feat(mosaic): add multiple selection to Combobox

.changeset/mosaic-combobox-multiple.md

@@ -0,0 +1,2 @@
+---
+---

packages/mosaic/src/components/combobox/combobox.styles.ts

@@ -18,6 +18,11 @@ const inset = space['1.5'];
 const optionRadius = `max(0px, calc(${popupRadius} - ${inset}))`;
 
 export const styles = stylex.create({
+  chips: {
+    padding: `calc(${space['1']} - 1px)`,
+    gap: space['1'],
+    minHeight: space['8'],
+  },
   positioner: {
     outline: 'none',
   },

packages/mosaic/src/components/combobox/combobox.test.tsx

@@ -425,4 +425,50 @@ describe('Mosaic Combobox', () => {
     await user.click(trigger);
     expect(trigger).toHaveAttribute('aria-expanded', 'false');
   });
+
+  it('locks a multiple combobox inside a disabled Field', async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(
+      <Field.Root disabled>
+        <Field.Label>Fruits</Field.Label>
+        <Combobox.Root
+          multiple
+          inline
+          open
+          defaultValue={['apple']}
+          onValueChange={onValueChange}
+        >
+          <Combobox.Chips>
+            <Combobox.Value>
+              {values =>
+                values.map(value => (
+                  <Combobox.Chip
+                    key={value}
+                    value={value}
+                    removeLabel={`Remove ${value}`}
+                  >
+                    {value}
+                  </Combobox.Chip>
+                ))
+              }
+            </Combobox.Value>
+            <Combobox.Input />
+          </Combobox.Chips>
+          <Combobox.List>
+            <Combobox.Option
+              value='banana'
+              label='Banana'
+            >
+              Banana
+            </Combobox.Option>
+          </Combobox.List>
+        </Combobox.Root>
+      </Field.Root>,
+    );
+    expect(screen.getByRole('combobox', { name: 'Fruits' })).toBeDisabled();
+    expect(screen.getByRole('button', { name: 'Remove apple' })).toBeDisabled();
+    await user.click(screen.getByRole('option', { name: 'Banana' }));
+    expect(onValueChange).not.toHaveBeenCalled();
+  });
 });

packages/mosaic/src/components/combobox/combobox.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useMergeRefs } from '@floating-ui/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
@@ -11,8 +12,12 @@ import { Combobox as HeadlessCombobox } from '../../primitives/combobox';
 import { useRender } from '../../primitives/utils';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { chipStyles } from '../../styles/chip.styles';
+import { focusOutline } from '../../styles/focus-outline.styles';
+import { inputStyles } from '../../styles/input.styles';
 import { reset } from '../../styles/reset.styles';
 import { Button } from '../button';
+import { useOptionalFieldContext, useOptionalFieldControlProps } from '../field/field.context';
 import { Icon } from '../icon';
 import { Input, type InputVariant } from '../input';
 import { useOptionalInputGroupContext } from '../input-group/input-group.context';
@@ -24,13 +29,18 @@ export type ComboboxSize = 'sm' | 'md' | 'lg';
 export type ComboboxTriggerProps = MosaicComponentProps<'button'>;
 export type ComboboxClearProps = MosaicComponentProps<'button'>;
 export const ComboboxCollection = HeadlessCombobox.Collection;
+export const ComboboxValue = HeadlessCombobox.Value;
+export type ComboboxValueProps = React.ComponentProps<typeof HeadlessCombobox.Value>;
 
 const ComboboxAnchorContext = React.createContext<{
   anchor: HTMLElement | null;
   setAnchor: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
 } | null>(null);
 
+const ComboboxInChipsContext = React.createContext(false);
+
 export function ComboboxRoot({ sideOffset = 8, openOnInputClick = true, ...props }: ComboboxRootProps) {
+  const fieldDisabled = useOptionalFieldContext()?.disabled;
   const [anchor, setAnchor] = React.useState<HTMLElement | null>(null);
   const context = React.useMemo(() => ({ anchor, setAnchor }), [anchor]);
   return (
@@ -39,6 +49,7 @@ export function ComboboxRoot({ sideOffset = 8, openOnInputClick = true, ...props
         sideOffset={sideOffset}
         openOnInputClick={openOnInputClick}
         {...props}
+        disabled={props.disabled ?? fieldDisabled}
       />
     </ComboboxAnchorContext.Provider>
   );
@@ -112,13 +123,28 @@ export const ComboboxInput = React.forwardRef<HTMLInputElement, ComboboxInputPro
   const inputGroup = useOptionalInputGroupContext();
   const variant = variantProp ?? (inputGroup ? 'ghost' : 'default');
   const setAnchor = React.useContext(ComboboxAnchorContext)?.setAnchor;
+  const inChips = React.useContext(ComboboxInChipsContext);
   const groupElement = inputGroup?.element;
   React.useLayoutEffect(() => {
+    if (inChips) {
+      return;
+    }
     setAnchor?.(groupElement ?? null);
     return () => setAnchor?.(null);
-  }, [groupElement, setAnchor]);
+  }, [groupElement, setAnchor, inChips]);
   const size = inputGroup?.size ?? sizeProp ?? 'md';
 
+  if (inChips) {
+    return (
+      <ChipsInput
+        ref={ref}
+        render={render}
+        xstyle={xstyle}
+        {...rest}
+      />
+    );
+  }
+
   return (
     <HeadlessCombobox.Input
       ref={ref}
@@ -135,6 +161,106 @@ export const ComboboxInput = React.forwardRef<HTMLInputElement, ComboboxInputPro
   );
 });
 
+const ChipsInput = React.forwardRef<HTMLInputElement, MosaicComponentProps<'input'>>(function MosaicComboboxChipsInput(
+  {
+    id,
+    disabled: disabledProp,
+    required: requiredProp,
+    'aria-invalid': ariaInvalid,
+    'aria-labelledby': ariaLabelledBy,
+    'aria-describedby': ariaDescribedBy,
+    xstyle,
+    ...rest
+  },
+  ref,
+) {
+  const fieldProps = useOptionalFieldControlProps({
+    id,
+    disabled: disabledProp,
+    required: requiredProp,
+    ariaInvalid,
+    ariaLabelledBy,
+    ariaDescribedBy,
+  });
+
+  return (
+    <HeadlessCombobox.Input
+      ref={ref}
+      id={fieldProps?.id ?? id}
+      disabled={fieldProps?.disabled ?? disabledProp}
+      required={fieldProps?.required ?? requiredProp}
+      aria-invalid={fieldProps?.['aria-invalid'] ?? ariaInvalid}
+      aria-labelledby={fieldProps?.['aria-labelledby'] ?? ariaLabelledBy}
+      aria-describedby={fieldProps?.['aria-describedby'] ?? ariaDescribedBy}
+      {...mergeStyleProps(themeProps('combobox-input'), stylex.props(reset.base, chipStyles.input, xstyle), rest)}
+    />
+  );
+});
+
+export type ComboboxChipsProps = MosaicComponentProps<'div'>;
+
+/** The field for a `multiple` combobox. Holds the chips and the input, and anchors the popup. */
+export const ComboboxChips = React.forwardRef<HTMLDivElement, ComboboxChipsProps>(function MosaicComboboxChips(
+  { xstyle, ...rest },
+  ref,
+) {
+  const setAnchor = React.useContext(ComboboxAnchorContext)?.setAnchor;
+  const [element, setElement] = React.useState<HTMLDivElement | null>(null);
+  const mergedRef = useMergeRefs([setElement, ref]);
+  React.useLayoutEffect(() => {
+    setAnchor?.(element);
+    return () => setAnchor?.(null);
+  }, [element, setAnchor]);
+
+  return (
+    <ComboboxInChipsContext.Provider value>
+      <HeadlessCombobox.Chips
+        ref={mergedRef}
+        {...mergeStyleProps(
+          themeProps('combobox-chips'),
+          stylex.props(reset.base, inputStyles.group, chipStyles.field, styles.chips, xstyle),
+          rest,
+        )}
+      />
+    </ComboboxInChipsContext.Provider>
+  );
+});
+
+export interface ComboboxChipProps extends MosaicComponentProps<'div'> {
+  value: string;
+  /** Accessible name of the chip's remove button. */
+  removeLabel: string;
+}
+
+export const ComboboxChip = React.forwardRef<HTMLDivElement, ComboboxChipProps>(function MosaicComboboxChip(
+  { removeLabel, children, xstyle, ...rest },
+  ref,
+) {
+  return (
+    <HeadlessCombobox.Chip
+      ref={ref}
+      {...mergeStyleProps(
+        themeProps('combobox-chip'),
+        stylex.props(reset.base, focusOutline.visible, chipStyles.chip, xstyle),
+        rest,
+      )}
+    >
+      <span {...mergeStyleProps(themeProps('combobox-chip-label'), stylex.props(reset.base, chipStyles.label))}>
+        {children}
+      </span>
+      <HeadlessCombobox.ChipRemove
+        aria-label={removeLabel}
+        {...mergeStyleProps(themeProps('combobox-chip-remove'), stylex.props(reset.base, chipStyles.remove))}
+      >
+        <Icon
+          glyph={X}
+          size='md'
+        />
+      </HeadlessCombobox.ChipRemove>
+    </HeadlessCombobox.Chip>
+  );
+});
+
 export interface ComboboxPopupProps extends MosaicComponentProps<'div'> {
   /** Overrides positioning against the input group or standalone input. */
   anchor?: React.ComponentPropsWithoutRef<typeof HeadlessCombobox.Positioner>['anchor'];
@@ -252,6 +378,9 @@ export const ComboboxEmpty = React.forwardRef<HTMLParagraphElement, ComboboxEmpt
 export const Combobox = {
   Root: ComboboxRoot,
   Collection: ComboboxCollection,
+  Value: ComboboxValue,
+  Chips: ComboboxChips,
+  Chip: ComboboxChip,
   Input: ComboboxInput,
   Trigger: ComboboxTrigger,
   Clear: ComboboxClear,

packages/mosaic/src/components/combobox/index.ts

@@ -1,5 +1,7 @@
 export {
   Combobox,
+  ComboboxChip,
+  ComboboxChips,
   ComboboxClear,
   ComboboxCollection,
   ComboboxEmpty,
@@ -10,8 +12,11 @@ export {
   ComboboxPopup,
   ComboboxRoot,
   ComboboxTrigger,
+  ComboboxValue,
 } from './combobox';
 export type {
+  ComboboxChipProps,
+  ComboboxChipsProps,
   ComboboxClearProps,
   ComboboxEmptyProps,
   ComboboxInputProps,
@@ -22,4 +27,5 @@ export type {
   ComboboxRootProps,
   ComboboxSize,
   ComboboxTriggerProps,
+  ComboboxValueProps,
 } from './combobox';