@westpac/ui 1.0.0-canary.9 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.0.0-canary.9",
+  "version": "1.0.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -121,6 +121,9 @@
     "./modal": {
       "default": "./dist/components/modal/index.js"
     },
+    "./multi-select": {
+      "default": "./dist/components/multi-select/index.js"
+    },
     "./pagination": {
       "default": "./dist/components/pagination/index.js"
     },
@@ -197,6 +200,7 @@
   ],
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.3",
+    "@eslint/compat": "~1.3.2",
     "@eslint/eslintrc": "~3.3.1",
     "@eslint/js": "~9.30.0",
     "@react-types/accordion": "3.0.0-alpha.14",
@@ -204,12 +208,12 @@
     "@react-types/combobox": "~3.13.6",
     "@react-types/shared": "~3.30.0",
     "@react-types/tabs": "~3.3.16",
-    "@storybook/addon-a11y": "10.1.4",
-    "@storybook/addon-docs": "10.1.4",
-    "@storybook/addon-links": "10.1.4",
-    "@storybook/addon-mcp": "0.1.6",
-    "@storybook/addon-themes": "~10.1.4",
-    "@storybook/react-vite": "10.1.4",
+    "@storybook/addon-a11y": "10.2.3",
+    "@storybook/addon-docs": "10.2.3",
+    "@storybook/addon-links": "10.2.3",
+    "@storybook/addon-mcp": "~0.2.2",
+    "@storybook/addon-themes": "~10.2.3",
+    "@storybook/react-vite": "10.2.11",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@tailwindcss/postcss": "~4.1.12",
@@ -233,7 +237,7 @@
     "eslint-plugin-storybook": "~10.1.4",
     "glob": "~10.5.0",
     "jsdom": "^22.1.0",
-    "plop": "~3.1.2",
+    "plop": "~4.0.5",
     "postcss": "~8.5.6",
     "postcss-cli": "~10.1.0",
     "prettier": "^3.2.5",
@@ -243,15 +247,15 @@
     "react-dom": "^18.2.0",
     "react-hook-form": "~7.62.0",
     "shx": "^0.3.4",
-    "storybook": "10.1.4",
+    "storybook": "10.2.11",
     "tailwindcss": "~4.1.12",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4",
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
-    "@westpac/style-config": "~0.1.0-canary.4",
+    "@westpac/eslint-config": "~1.1.0",
+    "@westpac/style-config": "~1.0.0",
     "@westpac/test-config": "~0.0.0",
-    "@westpac/eslint-config": "~1.1.0-canary.2",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {

package/src/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.component.tsx

@@ -15,7 +15,7 @@ export function AutocompleteListBox(props: AutocompleteListBoxProps) {
   const { listBoxProps } = useListBox(props, state, listBoxRef);
 
   return (
-    <ul {...listBoxProps} ref={listBoxRef} className="max-h-[400px] w-full overflow-auto outline-none">
+    <ul {...listBoxProps} ref={listBoxRef} className="w-full overflow-hidden rounded-xl outline-none">
       {[...state.collection].map(item =>
         item.type === 'section' ? (
           <AutocompleteListBoxSection key={item.key} section={item} state={state} />

package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -47,12 +47,12 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
         }}
         ref={popoverRef}
         className={clsx(
-          'z-10 my-1 rounded-xl border border-border-muted-soft shadow-[0_2px_12px_rgba(0,0,0,0.2)]',
+          'z-10 my-1 flex flex-col rounded-xl border border-border-muted-soft shadow-[0_2px_12px_rgba(0,0,0,0.2)]',
           className,
         )}
       >
         {!isNonModal && <DismissButton onDismiss={() => state.close()} />}
-        {children}
+        <div className="min-h-0 flex-1 overflow-auto">{children}</div>
         <DismissButton onDismiss={() => state.close()} />
       </div>
     </Overlay>

package/src/components/bottom-sheet/bottom-sheet.component.tsx

@@ -26,7 +26,7 @@ export function BottomSheet({
         secondaryLabel={secondaryLabel}
         primaryOnClick={primaryOnClick}
         secondaryOnClick={secondaryOnClick}
-        onClose={() => state.close()}
+        onClose={props.isDismissable ? () => state.close() : undefined}
         title={title}
       >
         {children}

package/src/components/button/button.component.tsx

@@ -26,6 +26,7 @@ function BaseButton(
     iconSize,
     children,
     removeLinkPadding,
+    type = Tag === 'button' ? 'button' : undefined,
     ...props
   }: ButtonProps,
   ref: Ref<ButtonRef>,
@@ -75,7 +76,7 @@ function BaseButton(
   }, [iconColor, look, soft]);
 
   return (
-    <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)}>
+    <Tag ref={ref} className={styles.base({ className })} {...mergeProps(props, focusProps)} type={type}>
       {IconBefore && (
         <IconBefore
           look={iconLook}

package/src/components/button-group/components/button-group-button/button-group-button.component.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { mergeProps } from '@react-aria/utils';
 import React, { useContext, useRef } from 'react';
 import { useFocusRing, useToggleButtonGroupItem } from 'react-aria';
 
@@ -32,8 +33,7 @@ export function ButtonGroupButton({ className, ...props }: ButtonGroupButtonProp
 
   return (
     <Button
-      {...buttonProps}
-      {...focusProps}
+      {...mergeProps(buttonProps, focusProps)}
       className={styles.button({ className })}
       soft={!isSelected}
       data-pressed={isPressed}

package/src/components/checkbox-group/checkbox-group.component.tsx

@@ -18,6 +18,7 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
   orientation: 'vertical',
   size: 'medium',
   state: {
+    defaultValue: [],
     value: [],
     isDisabled: false,
     isReadOnly: false,
@@ -76,7 +77,6 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
     commitValidation: function (): void {
       throw new Error(FUNCTION_NOT_IMPLEMENTED);
     },
-    defaultValue: [],
   },
 });
 export function CheckboxGroup({

package/src/components/compacta/components/compacta-item/compacta-item.component.tsx

@@ -43,8 +43,8 @@ export function CompactaItem({
   }, []);
 
   useEffect(() => {
-    const secondLastIndex = totalItems - 2;
-    if (index === secondLastIndex) {
+    const secondLastIndex = totalItems - 1;
+    if (index !== secondLastIndex && !props.defaultExpanded) {
       state.setExpanded(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/components/date-picker/components/calendar/components/calendar-cell/calendar-cell.types.ts

@@ -1,8 +1,4 @@
 import { AriaCalendarCellProps } from 'react-aria';
 import { CalendarState, RangeCalendarState } from 'react-stately';
 
-// import { styles } from './calendar-Cell.styles.js';
-
-// type Variants = VariantProps<typeof styles>;
-
 export type CalendarCellProps = AriaCalendarCellProps & { state: CalendarState | RangeCalendarState };

package/src/components/date-picker/components/date-field/components/date-segment/date-segment.component.tsx

@@ -15,7 +15,6 @@ export function DateSegment({ segment, state, separator, ...props }: DateSegment
   const { segmentProps } = useDateSegment(segment, state, ref);
   const styles = dateSegmentStyles({
     isFocusVisible,
-    isPlaceholder: segment.isPlaceholder,
     isSeparator: segmentProps.role !== 'spinbutton',
   });
   return (

package/src/components/date-picker/components/date-field/components/date-segment/date-segment.styles.ts

@@ -1,18 +1,14 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'rounded-sm font-light text-text-body focus:focus-outline disabled:form-control-disabled',
+  base: 'rounded-sm text-text-body uppercase focus:focus-outline disabled:form-control-disabled',
   variants: {
-    isPlaceholder: {
-      true: 'text-text-muted/50 opacity-100',
-      false: '',
-    },
     isFocusVisible: {
       true: 'focus-outline',
       false: '',
     },
     isSeparator: {
-      true: 'px-0.5 text-text-body/50',
+      true: 'px-0.5 text-text-body',
       false: '',
     },
   },

package/src/components/date-picker/components/popover/popover.styles.ts

@@ -23,7 +23,7 @@ export const styles = tv({
           'pointer-events-none absolute top-0 right-0 touch-none rounded-full opacity-0 focus:pointer-events-auto focus:touch-auto focus:opacity-100',
         headerLabel: 'hidden',
         popover:
-          'absolute mt-1 scale-100 animate-fadeIn rounded-2xl border border-border-muted-soft bg-background-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
+          'absolute my-1 scale-100 animate-fadeIn rounded-2xl border border-border-muted-soft bg-background-white opacity-100 shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
       },
     },
   },

package/src/components/date-picker/date-picker.component.tsx

@@ -29,6 +29,7 @@ export function DatePicker({
   disableWeekends,
   separator,
   portalContainer,
+  placement = 'bottom left',
   ...props
 }: DatePickerProps) {
   const { locale } = useLocale();
@@ -56,6 +57,7 @@ export function DatePicker({
     block: resolvedBlock,
     size: resolvedSize,
     isInvalid: state.isInvalid,
+    isReadOnly: props.isReadOnly,
     isDisabled: props.isDisabled,
   });
   const ref = useRef(null);
@@ -93,7 +95,18 @@ export function DatePicker({
   return (
     <>
       {props.label && <div {...labelProps}>{props.label}</div>}
-      <div {...props} {...groupProps} ref={ref} className={styles.input({ className })}>
+      <div
+        {...props}
+        {...groupProps}
+        ref={ref}
+        onBlur={e => {
+          if (state.value) {
+            return props.onBlur?.(e, state.value);
+          }
+          return props.onBlur?.(e);
+        }}
+        className={styles.input({ className })}
+      >
         <DateField className={styles.dateField()} separator={separator} {...fieldProps} />
         <Button
           look="faint"
@@ -111,7 +124,7 @@ export function DatePicker({
           showAsBottomSheet={showAsBottomSheet}
           state={state}
           triggerRef={ref}
-          placement="bottom left"
+          placement={placement}
         >
           <Dialog {...dialogProps}>
             <Calendar {...calendarProps} firstDayOfWeek={props.firstDayOfWeek} />

package/src/components/date-picker/date-picker.styles.ts

@@ -2,47 +2,51 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    input: 'form-control flex items-center border-border-muted-strong disabled:form-control-disabled',
-    button:
-      'flex h-auto items-center justify-center rounded-l-none border-y-0 border-r-0 border-l border-l-border-muted-strong bg-surface-muted-pale',
-    dateField: 'flex-1',
+    input: 'form-control flex items-center border-0',
+    dateField: 'rounded rounded-r-none border border-r-0 border-border-muted-strong',
+    button: 'flex items-center justify-center rounded-l-none border-border-muted-strong bg-surface-muted-pale',
   },
   variants: {
     size: {
       small: {
-        input: 'gap-1.5 form-control-small',
-        button: '-my-0.5 -mr-1.5 mb-[-0.25rem] min-h-5 py-[0.25rem]',
+        input: 'max-h-5',
+        dateField: 'h-5 w-[120px] form-control-small',
       },
       medium: {
-        input: 'gap-2 form-control-medium',
-        button: 'my-[-0.3125rem] -mr-2 min-h-6 py-[0.3125rem]',
+        input: 'max-h-6',
+        dateField: 'h-6 w-[140px] form-control-medium',
       },
       large: {
-        input: 'gap-2.5 form-control-large',
-        button: 'my-[-0.5rem] -mr-2.5 min-h-7 py-[0.5rem]',
+        input: 'max-h-7',
+        dateField: 'h-7 w-[145px] form-control-large',
       },
       xlarge: {
-        input: 'gap-3 form-control-xlarge',
-        button: '-my-1.5 -mr-3 mb-[-0.625rem] min-h-8 py-1.5',
+        input: 'max-h-8',
+        dateField: 'h-8 w-[165px] form-control-xlarge',
       },
     },
     block: {
       true: {
-        input: 'w-full',
-      },
-      false: {
-        input: '',
+        input: 'w-full gap-0',
+        dateField: 'w-full',
       },
     },
     isInvalid: {
       true: {
-        input: 'border-border-danger',
+        dateField: 'border-border-danger',
+        button: 'border-border-danger border-l-border-muted-strong',
       },
       false: {},
     },
     isDisabled: {
       true: {
-        input: 'form-control-disabled',
+        dateField: '!form-control-disabled',
+      },
+      false: {},
+    },
+    isReadOnly: {
+      true: {
+        dateField: '!form-control-disabled',
       },
       false: {},
     },

package/src/components/date-picker/date-picker.types.ts

@@ -1,5 +1,5 @@
 import { Breakpoint } from '@westpac/style-config/constants';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, FocusEvent } from 'react';
 import { DateValue } from 'react-aria';
 import { DatePickerStateOptions } from 'react-stately';
 import { VariantProps } from 'tailwind-variants';
@@ -9,9 +9,9 @@ import { ResponsiveVariants } from 'src/types/responsive-variants.types.js';
 import { styles } from './date-picker.styles.js';
 
 type Variants = VariantProps<typeof styles>;
-export type DatePickerProps<T extends DateValue = DateValue> = DatePickerStateOptions<T> &
+export type DatePickerProps<T extends DateValue = DateValue> = Omit<DatePickerStateOptions<T>, 'onBlur'> &
   Omit<Variants, 'size' | 'block'> &
-  Omit<HTMLAttributes<HTMLDivElement>, 'invalid' | 'block'> & {
+  Omit<HTMLAttributes<HTMLDivElement>, 'invalid' | 'block' | 'onBlur'> & {
     /**
      * Determines whether to display the component as a bottom sheet view.
      * Can also accept an object to conditionally enable the bottom sheet based on breakpoints.
@@ -33,6 +33,15 @@ export type DatePickerProps<T extends DateValue = DateValue> = DatePickerStateOp
      * Separator character used in the date field. Defaults to "/".
      */
     separator?: string;
+    /**
+     * Custom onBlur that provides the regular event as the first parameter and the date value in the same format as onChange as the second.
+     */
+    onBlur?: (event: FocusEvent<Element, Element>, date?: T) => void;
+    /**
+     * Placement for the datepicker popover.
+     * @default "bottom left"
+     */
+    placement?: 'top left' | 'top right' | 'bottom left' | 'bottom right';
     /**
      * portal container for date picker
      */

package/src/components/header/header.component.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import throttle from 'lodash.throttle';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
@@ -100,11 +100,15 @@ export function Header({
     scrolled: isScrolled || scrolled,
   });
 
-  const HeaderLogo = () => (
-    <>
-      <SmallLogo align={logoAlignment} aria-label={logoAssistiveText} className={styles.smallLogo()} />
-      <LargeLogo aria-label={logoAssistiveText} className={styles.largeLogo()} />
-    </>
+  const HeaderLogo = useCallback(
+    () => (
+      <>
+        <SmallLogo align={logoAlignment} aria-label={logoAssistiveText} className={styles.smallLogo()} />
+        <LargeLogo aria-label={logoAssistiveText} className={styles.largeLogo()} />
+      </>
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [logoAlignment, logoAssistiveText, LargeLogo, SmallLogo],
   );
 
   const defaultAssistiveText = leftIcon === 'arrow' ? 'Back' : 'Menu';

package/src/components/icon/components/arrow-back-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowBackIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Back',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M12 20L13.41 18.59L7.83 13L20 13V11L7.83 11L13.41 5.41L12 4L4 12L12 20Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-down-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowDownIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Down',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M20 12L18.59 10.59L13 16.17V4L11 4L11 16.17L5.41 10.59L4 12L12 20L20 12Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-forward-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowForwardIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Forward',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M12 4L10.59 5.41L16.17 11H4V13H16.17L10.59 18.59L12 20L20 12L12 4Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/components/arrow-up-icon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function ArrowUpIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Arrow Up',
+  copyrightYear = '2025',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      <path d="M4 12L5.41 13.41L11 7.83L11 20H13V7.83L18.59 13.41L20 12L12 4L4 12Z" fill="currentColor" />
+    </Icon>
+  );
+}

package/src/components/icon/icon.styles.ts

@@ -4,11 +4,11 @@ export const styles = tv({
   base: 'inline-block transition-colors disabled:pointer-events-none disabled:opacity-50',
   variants: {
     size: {
-      xsmall: 'size-2',
-      small: 'size-3',
-      medium: 'size-4',
-      large: 'size-6',
-      xlarge: 'size-8',
+      xsmall: 'size-2 min-h-2 min-w-2',
+      small: 'size-3 min-h-3 min-w-3',
+      medium: 'size-4 min-h-4 min-w-4',
+      large: 'size-6 min-h-6 min-w-6',
+      xlarge: 'size-8 min-h-8 min-w-8',
     },
     color: {
       muted: 'text-surface-muted',

package/src/components/icon/index.ts

@@ -6,14 +6,18 @@ export { AlertIcon } from './components/alert-icon.js';
 export { AndroidIcon } from './components/android-icon.js';
 export { AppleIcon } from './components/apple-icon.js';
 export { ArchiveBoxIcon } from './components/archive-box-icon.js';
+export { ArrowBackIcon } from './components/arrow-back-icon.js';
 export { ArrowBackCircleIcon } from './components/arrow-back-circle-icon.js';
+export { ArrowDownIcon } from './components/arrow-down-icon.js';
 export { ArrowDownCircleIcon } from './components/arrow-down-circle-icon.js';
 export { ArrowForkIcon } from './components/arrow-fork-icon.js';
+export { ArrowForwardIcon } from './components/arrow-forward-icon.js';
 export { ArrowForwardCircleIcon } from './components/arrow-forward-circle-icon.js';
 export { ArrowLeftIcon } from './components/arrow-left-icon.js';
 export { ArrowRightIcon } from './components/arrow-right-icon.js';
 export { ArrowSplitIcon } from './components/arrow-split-icon.js';
 export { ArrowThreadReplyIcon } from './components/arrow-thread-reply-icon.js';
+export { ArrowUpIcon } from './components/arrow-up-icon.js';
 export { ArrowUpCircleIcon } from './components/arrow-up-circle-icon.js';
 export { AtmIcon } from './components/atm-icon.js';
 export { AttacheCaseIcon } from './components/attache-case-icon.js';

package/src/components/index.ts

@@ -46,3 +46,4 @@ export * from './pass-code-view/index.js';
 export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
+export * from './multi-select/index.js';

package/src/components/input-group/components/input-group-supporting-text/input-group-supporting-text.styles.ts

@@ -1,5 +1,5 @@
 import { tv } from 'tailwind-variants';
 
 export const styles = tv({
-  base: 'mt-1 text-xs text-text-muted',
+  base: 'mt-1 text-text-muted',
 });

package/src/components/link/link.component.tsx

@@ -1,3 +1,4 @@
+// TODO: This component will not work with the Next Link component in Next.js 16+ as legacyBehavior as has been deprecated in 15. Need to find a solution.
 'use client';
 
 import React, { ForwardedRef, RefObject, forwardRef } from 'react';

package/src/components/link/link.styles.ts

@@ -2,19 +2,17 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'inline-flex bg-[transparent] hover:underline',
-    iconBefore: 'mr-1',
-    iconAfter: 'ml-1',
+    base: 'bg-[transparent] hover:underline',
+    iconBefore: 'relative bottom-[0.1em] mr-1',
+    iconAfter: 'relative bottom-[0.1em] ml-1',
   },
   variants: {
     type: {
       inline: {
-        base: 'items-baseline text-text-link',
-        iconBefore: 'self-center',
-        iconAfter: 'self-center',
+        base: 'inline text-text-link',
       },
       standalone: {
-        base: 'items-center text-text-body',
+        base: 'text-text-body',
       },
     },
     underline: {

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts

@@ -12,7 +12,7 @@ export const styles = tv({
     },
     canScroll: {
       true: {
-        base: 'shadow-[0px_-4px_5px_-2px_inset] shadow-black/30 dark:shadow-black/75',
+        base: 'shadow-[0px_-4px_5px_-2px_inset] shadow-black/30',
       },
     },
     scrollAtBottom: {

package/src/components/modal/components/modal-dialog/modal-dialog.component.tsx

@@ -13,6 +13,7 @@ const ModalDialogContext = createContext<ModalDialogContextValue>({ size: 'md' }
 const SCROLL_BUFFER = 10;
 
 export const useModalDialogContext = () => useContext(ModalDialogContext);
+
 /**
  * @private
  */

package/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -40,7 +40,7 @@ export const styles = tv({
     },
     scrolled: {
       true: {
-        title: 'shadow-[0px_2px_5px_0px] shadow-black/30 dark:shadow-black/75',
+        title: 'shadow-[0px_2px_5px_0px] shadow-black/30',
       },
     },
   },

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

@@ -0,0 +1,26 @@
+'use client';
+
+import React, { useContext, useRef } from 'react';
+
+import { ButtonRef } from '../../../../components/button/button.types.js';
+import { MultiSelectListBox } from '../../components/multi-select-list-box/multi-select-list-box.component.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+import { MultiSelectPopover } from '../multi-select-popover/multi-select-popover.component.js';
+import { MultiSelectSearchbar } from '../multi-select-searchbar/multi-select-searchbar.component.js';
+
+import { MultiSelectDropdownProps } from './multi-select-dropdown.types.js';
+
+export function MultiSelectDropdown<T extends object = object>({
+  setFilterText,
+  ...props
+}: MultiSelectDropdownProps<T>) {
+  const { filterText, listBoxRef } = useContext(MultiSelectContext);
+  const closeBtnRef = useRef<ButtonRef>(null);
+
+  return (
+    <MultiSelectPopover>
+      <MultiSelectSearchbar filterText={filterText} setFilterText={setFilterText} closeBtnRef={closeBtnRef} />
+      <MultiSelectListBox {...props} aria-label="multiselect list" escapeKeyBehavior="none" listBoxRef={listBoxRef} />
+    </MultiSelectPopover>
+  );
+}

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-muted-soft 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>;