@westpac/ui 1.0.0-canary.9 → 1.0.0

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.component.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React, { useContext, useMemo } from 'react';
+import { useListBoxSection } from 'react-aria';
+
+import { MultiSelectContext } from '../../../../multi-select.component.js';
+import { MultiSelectOption } from '../multi-select-option/multi-select-option.component.js';
+
+import { styles as listBoxStyles } from './multi-select-list-box-section.styles.js';
+
+import type { MultiSelectSectionProps } from './multi-select-list-box-section.types.js';
+
+export function MultiSelectListBoxSection<T>({ section }: MultiSelectSectionProps<T>) {
+  const { listState } = useContext(MultiSelectContext);
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: section.rendered,
+    'aria-label': section['aria-label'],
+  });
+
+  const styles = listBoxStyles();
+
+  const childNodes = useMemo(() => {
+    return listState?.collection?.getChildren ? [...listState.collection.getChildren(section.key)] : [];
+  }, [section.key, listState?.collection]);
+
+  return (
+    <>
+      <li {...itemProps}>
+        {section.rendered && (
+          <span {...headingProps} className={styles.span()} tabIndex={-1}>
+            {section.rendered}
+          </span>
+        )}
+        <ul {...groupProps}>
+          {childNodes.map(node => (
+            <MultiSelectOption key={node.key} item={node} />
+          ))}
+        </ul>
+      </li>
+    </>
+  );
+}

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.styles.ts

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    span: 'flex h-6 items-center bg-surface-muted-faint px-2 align-middle typography-body-10 text-text-hero',
+  },
+});

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.types.ts

@@ -0,0 +1,5 @@
+import type { Node } from '@react-types/shared';
+
+export type MultiSelectSectionProps<T> = {
+  section: Node<T>;
+};

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.component.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import React, { useCallback, useContext, useRef, KeyboardEvent } from 'react';
+import { mergeProps, useFocusRing, useOption } from 'react-aria';
+
+import { TickIcon } from '../../../../../icon/index.js';
+import { MultiSelectContext } from '../../../../multi-select.component.js';
+
+import { styles as optionStyles } from './multi-select-option.styles.js';
+import { MultiSelectOptionProps } from './multi-select-option.types.js';
+
+export function MultiSelectOption<T>({ item }: MultiSelectOptionProps<T>) {
+  const { listState, selectAllRef, inputRef } = useContext(MultiSelectContext);
+  const selectionMode = listState.selectionManager.selectionMode;
+  const ref = useRef<HTMLLIElement>(null);
+  const { optionProps, isDisabled, isSelected } = useOption({ key: item.key }, listState, ref);
+  const { isFocusVisible, focusProps } = useFocusRing();
+
+  const styles = optionStyles({
+    disabled: isDisabled,
+    selectionMode,
+    isFocusVisible,
+  });
+
+  // Need to manually handle keyboard accessibility due to component complexity
+  const handleButtonKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLLIElement>) => {
+      if (e.key === 'ArrowUp' && item.index === 0) {
+        e.preventDefault();
+        if (selectAllRef.current) {
+          selectAllRef.current?.focus();
+        } else {
+          inputRef.current?.focus();
+        }
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        listState.selectionManager.toggleSelection(item.key);
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listState.selectionManager],
+  );
+
+  return (
+    <li
+      {...mergeProps(optionProps, focusProps)}
+      ref={ref}
+      className={styles.root()}
+      onKeyDown={handleButtonKeyDown}
+      aria-checked={selectionMode === 'multiple' ? isSelected : undefined}
+      aria-selected={selectionMode === 'single' ? isSelected : undefined}
+      tabIndex={0}
+    >
+      <div className={styles.itemContainer()}>
+        <div className={styles.flexZero()}>
+          <div className={styles.checkbox()}>
+            {isSelected && <TickIcon size="small" aria-hidden="true" color="hero" />}
+          </div>
+        </div>
+        <div className={styles.body()}>{item.rendered}</div>
+      </div>
+      {item.props?.description && <div className={styles.description()}>{item.props.description}</div>}
+    </li>
+  );
+}

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.styles.ts

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    root: 'flex cursor-pointer flex-col justify-between bg-background-white p-2 text-sm text-text-body transition-[background-color] hover:bg-surface-muted-faint',
+    checkbox: 'size-4',
+    body: '-mt-0.5 flex flex-1 items-center typography-body-9',
+    flexZero: 'flex-0',
+    itemContainer: 'flex gap-1',
+    description: 'relative ml-5 typography-body-10 text-text-muted',
+  },
+  variants: {
+    selectionMode: {
+      none: {},
+      multiple: {
+        checkbox: 'flex items-center justify-center rounded border border-border-hero bg-background-white',
+      },
+      single: {
+        checkbox: 'flex items-center justify-center',
+      },
+    },
+    isFocusVisible: {
+      true: {
+        root: 'bg-surface-muted-faint focus-outline -outline-offset-2',
+      },
+    },
+    disabled: {
+      true: {
+        root: 'cursor-not-allowed text-text-muted',
+      },
+    },
+  },
+});

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.types.ts

@@ -0,0 +1,7 @@
+import type { Node } from '@react-types/shared';
+
+export type MultiSelectOptionProps<T> = {
+  // item is a react-stately Node for the given item value type T.
+  // props.description is optional and may not exist for all item types, so keep it optional.
+  item: Omit<Node<T>, 'props'> & { props?: { description?: string } };
+};

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-select-all-option/multi-select-select-all-option.component.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import React, { useCallback, useContext, useMemo, KeyboardEvent } from 'react';
+import { useOption, useFocusRing, mergeProps } from 'react-aria';
+
+import { TickIcon } from '../../../../../icon/index.js';
+import { MultiSelectContext } from '../../../../multi-select.component.js';
+
+import { styles as selectAllOptionStyles } from './multi-select-select-all-option.styles.js';
+
+export function MultiSelectSelectAllOption() {
+  const { listState, selectAllRef, listBoxRef, inputRef } = useContext(MultiSelectContext);
+
+  const allItemsAreSelected = useMemo(
+    () => listState.selectionManager.isSelectAll,
+    [listState.selectionManager.isSelectAll],
+  );
+
+  const withOneSelectionOrMore = useMemo(
+    () => !![...listState.selectionManager.selectedKeys].length,
+    [listState.selectionManager.selectedKeys],
+  );
+
+  // Handle selection change
+  const handleSelectionChange = useCallback(() => {
+    if (!allItemsAreSelected) {
+      // This is because selectAll send a string called 'all' when it is called.
+      listState.selectionManager.setSelectedKeys(
+        new Set([...listState.selectionManager.selectedKeys, ...listState.selectionManager.collection.getKeys()]),
+      );
+      return;
+    }
+    return listState.selectionManager.clearSelection();
+  }, [allItemsAreSelected, listState.selectionManager]);
+
+  // Use useOption for accessibility and keyboard nav
+  const { optionProps } = useOption(
+    {
+      key: 'select-all',
+    },
+    listState,
+    selectAllRef,
+  );
+
+  const { isFocusVisible, focusProps } = useFocusRing();
+
+  const styles = selectAllOptionStyles({
+    selected: withOneSelectionOrMore,
+    isFocusVisible,
+  });
+
+  // Need to manually handle keyboard accessibility due to component complexity
+  const handleInputKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        const firstItem = listBoxRef.current?.querySelector('[data-key]') as HTMLElement;
+        firstItem?.focus();
+      }
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleSelectionChange();
+      }
+    },
+    [handleSelectionChange, listBoxRef, inputRef],
+  );
+
+  let ariaChecked: 'true' | 'false' | 'mixed';
+  if (allItemsAreSelected) {
+    ariaChecked = 'true';
+  } else if (withOneSelectionOrMore) {
+    ariaChecked = 'mixed';
+  } else {
+    ariaChecked = 'false';
+  }
+
+  return (
+    <div
+      className={styles.listItem()}
+      key="select-all"
+      {...mergeProps(optionProps, focusProps)}
+      ref={selectAllRef}
+      onClick={handleSelectionChange}
+      onKeyDown={e => {
+        handleInputKeyDown(e);
+      }}
+      role="option"
+      aria-checked={ariaChecked}
+      aria-label="Select all options"
+    >
+      <div className={styles.button()}>
+        <div className={styles.checkbox()} role="presentation">
+          {allItemsAreSelected && <TickIcon size="small" aria-hidden="true" color="hero" />}
+          {!allItemsAreSelected && withOneSelectionOrMore && <div className={styles.indeterminate()} />}
+        </div>
+        <span className={styles.label()}>Select all</span>
+      </div>
+    </div>
+  );
+}

package/src/components/multi-select/components/multi-select-list-box/components/multi-select-select-all-option/multi-select-select-all-option.styles.ts

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    listItem: 'border-b border-b-border-muted-soft hover:bg-surface-muted-faint',
+    button: 'flex w-full cursor-pointer items-center gap-1 p-2',
+    checkbox: 'flex size-4 items-center justify-center rounded border border-border-hero bg-background-white',
+    indeterminate: 'block w-3/5 border-t-2 border-t-border-hero',
+    label: 'typography-body-9',
+  },
+  variants: {
+    selected: {
+      true: { listItem: 'bg-surface-muted-faint' },
+      false: { listItem: '' },
+    },
+    isFocusVisible: {
+      true: { listItem: 'bg-surface-muted-faint focus-outline -outline-offset-2' },
+      false: {},
+    },
+  },
+});

package/src/components/multi-select/components/multi-select-list-box/multi-select-list-box.component.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import React, { useContext } from 'react';
+import { useListBox } from 'react-aria';
+
+import { MultiSelectContext } from '../../multi-select.component.js';
+
+import { MultiSelectListBoxSection } from './components/multi-select-list-box-section/multi-select-list-box-section.component.js';
+import { MultiSelectOption } from './components/multi-select-option/multi-select-option.component.js';
+import { MultiSelectSelectAllOption } from './components/multi-select-select-all-option/multi-select-select-all-option.component.js';
+import { styles as listBoxStyles } from './multi-select-list-box.styles.js';
+
+import type { MultiSelectListBoxProps } from './multi-select-list-box.types.js';
+
+export function MultiSelectListBox<T extends object = object>({ listBoxRef, ...props }: MultiSelectListBoxProps<T>) {
+  const { listState } = useContext(MultiSelectContext);
+  const selectionMode = listState.selectionManager.selectionMode;
+  const { listBoxProps } = useListBox({ selectionMode, ...props }, listState, listBoxRef);
+
+  const stateCollection = [...listState.collection];
+
+  const styles = listBoxStyles();
+
+  return (
+    <div className={styles.container()}>
+      {selectionMode === 'multiple' && stateCollection.length > 0 && <MultiSelectSelectAllOption />}
+      <ul {...listBoxProps} ref={listBoxRef} className={styles.ul()}>
+        {stateCollection.length > 0 ? (
+          stateCollection.map(item =>
+            item.type === 'section' ? (
+              <MultiSelectListBoxSection key={item.key} section={item} />
+            ) : (
+              <MultiSelectOption key={item.key} item={item} />
+            ),
+          )
+        ) : (
+          <p className={styles.noItemsText()}>No results. Try another search.</p>
+        )}
+      </ul>
+    </div>
+  );
+}

package/src/components/multi-select/components/multi-select-list-box/multi-select-list-box.styles.ts

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    container: 'max-h-72 overflow-auto',
+    checkbox: 'flex size-4 items-center justify-center rounded border border-border-muted-strong',
+    ul: 'w-full outline-none',
+    noItemsText: 'px-2 py-3 typography-body-9 text-text-body',
+  },
+});

package/src/components/multi-select/components/multi-select-list-box/multi-select-list-box.types.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type AriaListBoxOptions } from 'react-aria';
+
+export type MultiSelectListBoxProps<T> = {
+  listBoxRef: React.RefObject<HTMLUListElement>;
+} & Omit<AriaListBoxOptions<T>, 'selectionMode'>;

package/src/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.tsx

@@ -0,0 +1,139 @@
+import React, { useCallback, useContext, useEffect, useState, Key, KeyboardEvent } from 'react';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
+
+import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
+import { Button } from '../../../button/button.component.js';
+import { DropDownIcon, ClearIcon } from '../../../icon/index.js';
+import { Tooltip } from '../../../tooltip/tooltip.component.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+
+import { styles as triggerStyles } from './multi-select-list-box-trigger.styles.js';
+import { MultiSelectListBoxTriggerProps } from './multi-select-list-box-trigger.types.js';
+
+export function MultiSelectListBoxTrigger<T>({
+  placeholder,
+  showSingleSectionTitle,
+  selectedKeys,
+  triggerProps,
+  id,
+}: MultiSelectListBoxTriggerProps<T>) {
+  const { size, overlayState, listState, buttonRef, inputRef } = useContext(MultiSelectContext);
+  const selectionMode = listState.selectionManager.selectionMode;
+  const breakpoint = useBreakpoint();
+  const { buttonProps } = useButton(triggerProps, buttonRef);
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const [selectedValues, setSelectedValues] = useState<{ key: string; value: string | undefined }[]>([]);
+  const [sectionTitle, setSectionTitle] = useState<string | undefined>(undefined);
+
+  const finalButtonProps = mergeProps(focusProps, buttonProps);
+  const styles = triggerStyles({
+    size: resolveResponsiveVariant(size, breakpoint),
+    isFocusVisible,
+  });
+
+  const getSectionTitle = useCallback(
+    (key?: Key): string | undefined => {
+      const parentKey = key ?? '';
+      const item = listState.collection.getItem(parentKey as string);
+      if (!item) return undefined;
+      const title = (item.props as { title?: string }).title;
+      return title;
+    },
+    [listState.collection],
+  );
+
+  const handleTriggerKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLButtonElement>) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+        e.preventDefault();
+        overlayState.open();
+        inputRef.current?.focus();
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [overlayState],
+  );
+
+  // Manage selected items state for display
+  useEffect(() => {
+    if (!selectedKeys || typeof selectedKeys === 'string' || (selectedKeys instanceof Set && selectedKeys.size === 0)) {
+      setSelectedValues([]);
+    } else {
+      const currentMap = new Map(selectedValues.map(item => [item.key, item.value]));
+
+      // manages the selected values that should be displayed to work with filtering
+      const next: { key: string; value: string | undefined }[] = [];
+      for (const key of [...selectedKeys] as string[]) {
+        if (currentMap.has(key)) {
+          next.push({ key, value: currentMap.get(key) });
+        } else {
+          next.push({ key, value: listState.collection.getItem(key)?.textValue });
+        }
+      }
+
+      // Handles displaying the section title
+      if (selectionMode === 'single' && showSingleSectionTitle) {
+        const firstKey = ([...selectedKeys] as string[])[0];
+        const parentKey = listState.collection.getItem(firstKey)?.parentKey;
+        const title = parentKey ? getSectionTitle(parentKey) : undefined;
+        setSectionTitle(title);
+      }
+
+      setSelectedValues(next);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedKeys]);
+
+  const valuesString =
+    selectionMode === 'single' && selectedValues.length > 0 && showSingleSectionTitle && sectionTitle
+      ? `${sectionTitle}: ${selectedValues[0].value}`
+      : selectedValues.map(node => node.value || '').join(', ');
+
+  return (
+    <>
+      <Tooltip tooltip={valuesString} position="top">
+        <div className={styles.buttonContainer()}>
+          <button
+            className={styles.control()}
+            ref={buttonRef}
+            {...finalButtonProps}
+            onKeyDown={handleTriggerKeyDown}
+            type="button"
+            role="combobox"
+            aria-autocomplete="list"
+            tabIndex={undefined}
+            aria-haspopup="dialog"
+            id={id}
+          >
+            {/* Selected items */}
+            <div className={styles.selection()}>
+              <span className={styles.selectionSpan()}>{selectedValues.length > 0 ? valuesString : placeholder}</span>
+            </div>
+
+            {/* dropdown toggle */}
+            <div className={styles.button()}>
+              <DropDownIcon color="muted-vivid" size="medium" aria-hidden="true" />
+            </div>
+          </button>
+          {selectedValues.length > 0 && (
+            <Button
+              className={styles.clearButton()}
+              look="unstyled"
+              onClick={() => {
+                listState.selectionManager.clearSelection();
+              }}
+            >
+              <ClearIcon className={styles.clearIcon()} size="small" color="muted" />
+            </Button>
+          )}
+        </div>
+      </Tooltip>
+      {selectedValues.length > 0 && selectionMode === 'multiple' && (
+        <p className={styles.hint()}>
+          {selectedValues.length} item{selectedValues.length > 1 && 's'} selected
+        </p>
+      )}
+    </>
+  );
+}

package/src/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.styles.ts

@@ -0,0 +1,70 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    buttonContainer: 'relative w-full',
+    control: 'form-control relative box-border inline-flex w-full flex-row overflow-hidden',
+    selection: 'flex flex-1 items-center overflow-hidden pr-4.5 text-left whitespace-nowrap',
+    selectionSpan: 'w-full overflow-hidden text-ellipsis',
+    hint: 'typography-body-10 text-text-muted',
+    button: 'flex cursor-default items-center justify-center border-l border-l-border-muted-strong bg-background-white',
+    clearButton: 'absolute top-0 bottom-0 flex !h-auto items-center justify-center',
+    clearIcon: '-mt-0.5',
+  },
+  variants: {
+    size: {
+      small: {
+        control:
+          'min-h-[1.875rem] form-control-small group-[.input-group-inset-after]:pr-6 group-[.input-group-inset-before]:pl-6',
+        button: '-mt-0.5 -mr-[0.5625rem] -mb-[0.25rem] rounded-r-sm px-0.5',
+        clearButton: 'right-6.5',
+      },
+      medium: {
+        control:
+          'min-h-[2.25rem] form-control-medium group-[.input-group-inset-after]:pr-7 group-[.input-group-inset-before]:pl-7',
+        button: '-my-[0.3125rem] -mr-2 rounded-r-md px-1.5',
+        clearButton: 'right-8.5',
+      },
+      large: {
+        control:
+          'min-h-[2.625rem] form-control-large group-[.input-group-inset-after]:pr-8 group-[.input-group-inset-before]:pl-8',
+        button: '-my-[0.5rem] -mr-2.5 rounded-r-lg px-1.5',
+        clearButton: 'right-8.5',
+      },
+      xlarge: {
+        control:
+          'min-h-[3rem] form-control-xlarge group-[.input-group-inset-after]:pr-9 group-[.input-group-inset-before]:pl-9',
+        button: '-mt-[0.5625rem] -mr-3 -mb-[0.625rem] rounded-r-xl px-2',
+        clearButton: 'right-9.5',
+      },
+    },
+    invalid: {
+      true: {
+        control: 'border-border-danger',
+      },
+      false: {
+        control: 'border-border-muted-strong',
+      },
+    },
+    isFocusVisible: {
+      true: {
+        control: 'focus-outline',
+      },
+    },
+    width: {
+      full: { control: 'w-full' },
+      1: { control: 'box-content w-[1.81ex]' },
+      2: { control: 'box-content w-[3.62ex]' },
+      3: { control: 'box-content w-[5.43ex]' },
+      4: { control: 'box-content w-[7.24ex]' },
+      5: { control: 'box-content w-[9.05ex]' },
+      6: { control: 'box-content w-[10.86ex]' },
+      7: { control: 'box-content w-[12.67ex]' },
+      8: { control: 'box-content w-[14.48ex]' },
+      9: { control: 'box-content w-[16.29ex]' },
+      10: { control: 'box-content w-[18.1ex]' },
+      20: { control: 'box-content w-[36.2ex]' },
+      30: { control: 'box-content w-[54.3ex]' },
+    },
+  },
+});

package/src/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.ts

@@ -0,0 +1,21 @@
+import { AriaButtonProps } from 'react-aria';
+import { ListProps } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
+
+import { ResponsiveVariants } from 'src/types/responsive-variants.types.js';
+
+import { MultiSelectProps } from '../../multi-select.types.js';
+
+import { styles as triggerStyles } from './multi-select-list-box-trigger.styles.js';
+
+type Variants = VariantProps<typeof triggerStyles>;
+
+export type MultiSelectSize = ResponsiveVariants<Variants['size']>;
+
+export type MultiSelectListBoxTriggerProps<T> = {
+  id?: string;
+  placeholder: string;
+  selectedKeys?: ListProps<T>['selectedKeys'];
+  showSingleSectionTitle?: MultiSelectProps<T>['showSingleSectionTitle'];
+  triggerProps: AriaButtonProps<'button'>;
+};

package/src/components/multi-select/components/multi-select-popover/multi-select-popover.component.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React, { useContext } from 'react';
+import { DismissButton, mergeProps, Overlay, usePopover } from 'react-aria';
+
+import { MultiSelectContext } from '../../multi-select.component.js';
+
+import { styles as popoverStyles } from './multi-select-popover.styles.js';
+
+import type { MultiSelectPopoverProps } from './multi-select-popover.types.js';
+
+export function MultiSelectPopover({ children, className, ...props }: MultiSelectPopoverProps) {
+  const { overlayState, overlayProps, popoverRef, buttonRef, placement, portalContainer } =
+    useContext(MultiSelectContext);
+
+  const { popoverProps } = usePopover(
+    {
+      ...props,
+      placement,
+      popoverRef,
+      triggerRef: buttonRef,
+      isNonModal: true,
+      shouldFlip: true,
+      shouldCloseOnInteractOutside: () => false, // need to manage accessibility manually due to complexity of component
+      offset: 6,
+    },
+    overlayState,
+  );
+
+  const width = buttonRef.current?.getBoundingClientRect().width;
+  const styles = popoverStyles();
+
+  return (
+    <Overlay disableFocusManagement portalContainer={portalContainer}>
+      <div
+        {...mergeProps(popoverProps, overlayProps)}
+        ref={popoverRef}
+        className={styles.overlay({ className })}
+        style={{ ...popoverProps.style, width: width ? `${width}px` : undefined }}
+        onBlur={e => {
+          const related = e.relatedTarget as Element | null;
+          if (!popoverRef?.current) return;
+          // keep open if focus moved to an element inside the popover
+          if (related && popoverRef.current.contains(related)) return;
+          // keep open if focus moved to the trigger button (so it doesn't open instantly on press)
+          if (related && buttonRef?.current && buttonRef.current.contains(related)) return;
+          overlayState.close();
+        }}
+        // Closes the dropdown when using keyboard navigation
+        onKeyDown={e => {
+          if (e.key === 'Tab' || e.key === 'Escape') {
+            overlayState.close();
+          }
+        }}
+        role="dialog"
+        aria-modal="true"
+        aria-label="Options list with filter"
+      >
+        {children}
+        <DismissButton onDismiss={() => overlayState.close()} />
+      </div>
+    </Overlay>
+  );
+}

package/src/components/multi-select/components/multi-select-popover/multi-select-popover.styles.ts

@@ -0,0 +1,8 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    underlay: 'fixed inset-0 bg-black/5',
+    overlay: 'z-10 flex flex-col overflow-hidden rounded-xl border border-border-muted-soft bg-background-white shadow',
+  },
+});

package/src/components/multi-select/components/multi-select-popover/multi-select-popover.types.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import type { AriaPopoverProps } from 'react-aria';
+
+export type MultiSelectPopoverProps = {
+  children: React.ReactNode;
+  className?: string;
+} & Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>;