@westpac/ui 1.1.1 → 1.2.0

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

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    buttonContainer: 'relative w-full',
+    buttonContainer: 'relative w-fit',
     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',
@@ -52,19 +52,19 @@ export const styles = tv({
       },
     },
     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]' },
+      full: { selectionSpan: 'w-full', buttonContainer: 'w-full' },
+      1: { selectionSpan: 'w-[1.81ex]' },
+      2: { selectionSpan: 'w-[3.62ex]' },
+      3: { selectionSpan: 'w-[5.43ex]' },
+      4: { selectionSpan: 'w-[7.24ex]' },
+      5: { selectionSpan: 'w-[9.05ex]' },
+      6: { selectionSpan: 'w-[10.86ex]' },
+      7: { selectionSpan: 'w-[12.67ex]' },
+      8: { selectionSpan: 'w-[14.48ex]' },
+      9: { selectionSpan: 'w-[16.29ex]' },
+      10: { selectionSpan: 'w-[18.1ex]' },
+      20: { selectionSpan: 'w-[36.2ex]' },
+      30: { selectionSpan: 'w-[54.3ex]' },
     },
   },
 });

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

@@ -18,4 +18,5 @@ export type MultiSelectListBoxTriggerProps<T> = {
   selectedKeys?: ListProps<T>['selectedKeys'];
   showSingleSectionTitle?: MultiSelectProps<T>['showSingleSectionTitle'];
   triggerProps: AriaButtonProps<'button'>;
+  width?: ResponsiveVariants<Variants['width']>;
 };

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useContext } from 'react';
+import React, { useContext, useLayoutEffect, useMemo } from 'react';
 import { DismissButton, mergeProps, Overlay, usePopover } from 'react-aria';
 
 import { MultiSelectContext } from '../../multi-select.component.js';
@@ -13,10 +13,21 @@ export function MultiSelectPopover({ children, className, ...props }: MultiSelec
   const { overlayState, overlayProps, popoverRef, buttonRef, placement, portalContainer } =
     useContext(MultiSelectContext);
 
+  const [isPopoverSmaller, setIsPopoverSmaller] = React.useState(false);
+
+  useLayoutEffect(() => {
+    if (buttonRef.current && popoverRef.current) {
+      const buttonWidth = buttonRef.current.getBoundingClientRect().width;
+      const popoverWidth = popoverRef.current.getBoundingClientRect().width;
+      setIsPopoverSmaller(popoverWidth < buttonWidth);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   const { popoverProps } = usePopover(
     {
       ...props,
-      placement,
+      placement: placement,
       popoverRef,
       triggerRef: buttonRef,
       isNonModal: true,
@@ -27,16 +38,32 @@ export function MultiSelectPopover({ children, className, ...props }: MultiSelec
     overlayState,
   );
 
-  const width = buttonRef.current?.getBoundingClientRect().width;
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return (
+        document.querySelector('[data-theme]') ||
+        document.querySelector('[class^="theme-"], [class*=" theme-"]') ||
+        document.body
+      );
+    }
+  }, []);
+
   const styles = popoverStyles();
 
   return (
-    <Overlay disableFocusManagement portalContainer={portalContainer}>
+    <Overlay disableFocusManagement portalContainer={portalContainer || brandContainer}>
       <div
         {...mergeProps(popoverProps, overlayProps)}
         ref={popoverRef}
         className={styles.overlay({ className })}
-        style={{ ...popoverProps.style, width: width ? `${width}px` : undefined }}
+        style={{
+          ...popoverProps.style,
+          width: isPopoverSmaller ? buttonRef.current?.getBoundingClientRect().width : undefined,
+          maxWidth: brandContainer
+            ? brandContainer.getBoundingClientRect().width - (parseInt(popoverProps.style?.left as string) || 0)
+            : undefined,
+        }}
         onBlur={e => {
           const related = e.relatedTarget as Element | null;
           if (!popoverRef?.current) return;

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

@@ -27,6 +27,7 @@ export const MultiSelectContext = createContext<MultiSelectContextProps>({
   inputRef: { current: null },
   filterText: '',
   overlayProps: {},
+  hideSelectAll: false,
 });
 
 export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
@@ -37,9 +38,12 @@ export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
   onSelectionChange,
   placeholder = 'Select',
   showSingleSectionTitle = false,
-  placement,
+  placement = 'bottom left',
   portalContainer,
   id,
+  hideFilter = false,
+  hideSelectAll = false,
+  width = 'full',
   ...props
 }: MultiSelectProps<T>) {
   const [filterText, setFilterText] = useState('');
@@ -67,7 +71,14 @@ export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
     onOpenChange: isOpen => {
       if (isOpen) {
         requestAnimationFrame(() => {
-          inputRef.current?.focus();
+          if (!hideFilter) {
+            inputRef.current?.focus();
+          } else if (selectionMode === 'multiple' && !hideSelectAll) {
+            selectAllRef.current?.focus();
+          } else {
+            const firstItem = listBoxRef.current?.querySelector('[data-key]') as HTMLElement;
+            firstItem?.focus();
+          }
         });
       }
       if (!isOpen) {
@@ -94,6 +105,7 @@ export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
         inputRef,
         overlayProps,
         portalContainer,
+        hideSelectAll,
       }}
     >
       <div className={styles.root()}>
@@ -103,8 +115,11 @@ export function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({
           showSingleSectionTitle={showSingleSectionTitle}
           triggerProps={triggerProps}
           id={id}
+          width={width}
         />
-        {overlayState.isOpen && <MultiSelectDropdown setFilterText={setFilterText} {...listBoxProps} />}
+        {overlayState.isOpen && (
+          <MultiSelectDropdown setFilterText={setFilterText} hideFilter={hideFilter} {...listBoxProps} />
+        )}
       </div>
     </MultiSelectContext.Provider>
   );

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

@@ -2,9 +2,15 @@ import { DOMProps } from '@react-types/shared';
 import { Key, ReactNode, RefObject } from 'react';
 import { AriaListBoxOptions, AriaPopoverProps } from 'react-aria';
 import { ItemProps, ListProps, ListState, OverlayTriggerState } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
 
+import { ResponsiveVariants } from '../../types/responsive-variants.types.js';
+
+import { styles as triggerStyles } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.styles.js';
 import { MultiSelectSize } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.js';
 
+type Variants = VariantProps<typeof triggerStyles>;
+
 export type MultiSelectContextProps<T extends object = object> = {
   size?: MultiSelectSize;
   overlayState: OverlayTriggerState;
@@ -18,6 +24,7 @@ export type MultiSelectContextProps<T extends object = object> = {
   overlayProps: DOMProps;
   placement?: AriaPopoverProps['placement'];
   portalContainer?: Element;
+  hideSelectAll?: boolean;
 };
 
 export type MultiSelectItemProps<T extends object = object> = { description?: string } & ItemProps<T>;
@@ -26,6 +33,16 @@ export type MultiSelectItemProps<T extends object = object> = { description?: st
 export type MultiSelectValue = { textValue?: string; content?: ReactNode; key: Key; description?: string };
 
 export type MultiSelectProps<T> = {
+  /**
+   * Whether to hide the filter input in the dropdown
+   * @default false
+   */
+  hideFilter?: boolean;
+  /**
+   * Whether to hide the "Select All" option in the dropdown for multiple selection multi-selects
+   * @default false
+   */
+  hideSelectAll?: boolean;
   /**
    * Props for the list box within the multi-select
    */
@@ -40,7 +57,7 @@ export type MultiSelectProps<T> = {
   placeholder?: string;
   /**
    * Manual placement of the dropdown, will flip automatically if there is not enough space
-   * @default bottom
+   * @default 'bottom left'
    */
   placement?: AriaPopoverProps['placement'];
   /**
@@ -57,4 +74,9 @@ export type MultiSelectProps<T> = {
    * @default medium
    */
   size?: MultiSelectSize;
+  /**
+   * Width of the multi-select, can be a fixed width or full width
+   * @default full
+   */
+  width?: ResponsiveVariants<Variants['width']>;
 } & ListProps<T>;