@westpac/ui 0.57.4 → 0.59.0

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

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    popover: 'shadow',
+    searchInputWrapper: 'border-b border-b-border p-2',
+    clearButton: 'mb-0.5 px-2',
+  },
+});

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

@@ -0,0 +1,6 @@
+import { Dispatch, SetStateAction } from 'react';
+import { AriaListBoxOptions } from 'react-aria';
+
+export type MultiSelectDropdownProps<T> = {
+  setFilterText: Dispatch<SetStateAction<string>>;
+} & AriaListBoxOptions<T>;

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: 'typography-body-10 flex h-6 items-center bg-background px-2.5 py-1 align-middle 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-white p-2 text-sm text-text transition-[background-color] hover:bg-background',
+    checkbox: 'size-4',
+    body: 'typography-body-9 -mt-0.5 flex flex-1 items-center',
+    flexZero: 'flex-none',
+    itemContainer: 'flex gap-1',
+    description: 'typography-body-10 relative ml-5 text-muted',
+  },
+  variants: {
+    selectionMode: {
+      none: {},
+      multiple: {
+        checkbox: 'flex items-center justify-center rounded border border-hero bg-white',
+      },
+      single: {
+        checkbox: 'flex items-center justify-center',
+      },
+    },
+    isFocusVisible: {
+      true: {
+        root: 'bg-background !outline-offset-[-2px] focus-outline',
+      },
+    },
+    disabled: {
+      true: {
+        root: 'cursor-not-allowed 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,105 @@
+'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(
+        // This makes it so that when filtered select all will add to the currently selected options rather than replacing
+        new Set([...listState.selectionManager.selectedKeys, ...listState.selectionManager.collection.getKeys()]),
+      );
+      return;
+    }
+    return listState.selectionManager.clearSelection();
+  }, [allItemsAreSelected, listState.selectionManager]);
+
+  // Use React Aria's useOption hook
+  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,22 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv({
+  slots: {
+    listItem: 'border-b border-b-border hover:bg-background',
+    button:
+      'flex w-full cursor-pointer items-center gap-1 p-2 focus-visible:bg-background focus-visible:outline-2 focus-visible:!outline-offset-[-2px] focus-visible:focus-outline',
+    checkbox: 'flex size-4 items-center justify-center rounded border border-hero bg-white',
+    indeterminate: 'block w-3/5 border-t-2 border-t-hero',
+    label: 'typography-body-9',
+  },
+  variants: {
+    selected: {
+      true: { listItem: 'bg-background' },
+      false: { listItem: '' },
+    },
+    isFocusVisible: {
+      true: { listItem: 'bg-background !outline-offset-[-2px] focus-outline' },
+      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-[432px] overflow-auto',
+    checkbox: 'flex size-4 items-center justify-center rounded border border-border',
+    ul: 'w-full outline-none',
+    noItemsText: 'typography-body-9 px-2 py-3 text-text',
+  },
+});

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,136 @@
+import React, { useCallback, useContext, useEffect, useState, Key, KeyboardEvent } from 'react';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
+
+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 { 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,
+    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" 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,74 @@
+import { tv } from 'tailwind-variants';
+
+// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values
+export const styles = tv(
+  {
+    slots: {
+      buttonContainer: 'relative w-full',
+      control: 'form-control relative box-border inline-flex w-full flex-row overflow-hidden rounded',
+      selection: 'flex flex-1 items-center overflow-hidden whitespace-nowrap pr-4.5 text-left',
+      selectionSpan: 'w-full overflow-hidden text-ellipsis',
+      hint: 'typography-body-10 text-muted',
+      button: 'flex cursor-default items-center justify-center rounded-r border-l border-l-borderDark bg-white',
+      clearButton: 'absolute inset-y-0 flex !h-auto items-center justify-center',
+      clearIcon: '-mt-0.5',
+    },
+    variants: {
+      size: {
+        small: {
+          control:
+            'form-control-small min-h-5 group-[.input-group-inset-after]:pr-6 group-[.input-group-inset-before]:pl-6',
+          button: '-mb-[0.25rem] -mr-1.5 -mt-0.5 px-0.5',
+          clearButton: 'right-6.5',
+        },
+        medium: {
+          control:
+            'form-control-medium min-h-6 group-[.input-group-inset-after]:pr-7 group-[.input-group-inset-before]:pl-7',
+          button: '-my-[0.3125rem] -mr-2 px-1.5',
+          clearButton: 'right-8.5',
+        },
+        large: {
+          control:
+            'form-control-large min-h-7 group-[.input-group-inset-after]:pr-8 group-[.input-group-inset-before]:pl-8',
+          button: '-my-[0.5rem] -mr-2.5 px-1.5',
+          clearButton: 'right-8.5',
+        },
+        xlarge: {
+          control:
+            'form-control-xlarge min-h-8 group-[.input-group-inset-after]:pr-9 group-[.input-group-inset-before]:pl-9',
+          button: '-mb-[0.625rem] -mr-3 -mt-1.5 px-2',
+          clearButton: 'right-9.5',
+        },
+      },
+      invalid: {
+        true: {
+          control: 'border-danger',
+        },
+        false: {
+          control: 'border-borderDark',
+        },
+      },
+      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]' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -0,0 +1,19 @@
+import { AriaButtonProps } from 'react-aria';
+import { ListProps } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
+
+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 = 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>
+  );
+}