@westpac/ui 1.1.1 → 1.2.0

package/dist/components/autocomplete/autocomplete.component.js

@@ -71,12 +71,12 @@ function Autocomplete({ size = 'medium', invalid = false, isDisabled, footer, po
     const { buttonProps } = useButton(clearButtonProps, clearButtonRef);
     const outerRef = React.useRef(null);
     const isNoOptionPopOverOpen = useMemo(()=>{
-        return !!(noOptionsMessage && (!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem || state.collection.size === 0 && searchProps.value.length > 0));
+        return !!(noOptionsMessage && (!state.isOpen && state.isFocused && searchProps.value.length > 0 && state.selectedItems.length === 0 || state.collection.size === 0 && searchProps.value.length > 0));
     }, [
         noOptionsMessage,
         state.isOpen,
         state.isFocused,
-        state.selectedItem,
+        state.selectedItems,
         state.collection.size,
         searchProps.value.length
     ]);

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.component.d.ts

@@ -1,2 +1,2 @@
 import { MultiSelectDropdownProps } from './multi-select-dropdown.types.js';
-export declare function MultiSelectDropdown<T extends object = object>({ setFilterText, ...props }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectDropdown<T extends object = object>({ setFilterText, hideFilter, ...props }: MultiSelectDropdownProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.component.js

@@ -4,10 +4,10 @@ import { MultiSelectListBox } from '../../components/multi-select-list-box/multi
 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';
-export function MultiSelectDropdown({ setFilterText, ...props }) {
+export function MultiSelectDropdown({ setFilterText, hideFilter, ...props }) {
     const { filterText, listBoxRef } = useContext(MultiSelectContext);
     const closeBtnRef = useRef(null);
-    return React.createElement(MultiSelectPopover, null, React.createElement(MultiSelectSearchbar, {
+    return React.createElement(MultiSelectPopover, null, !hideFilter && React.createElement(MultiSelectSearchbar, {
         filterText: filterText,
         setFilterText: setFilterText,
         closeBtnRef: closeBtnRef

package/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.types.d.ts

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

package/dist/components/multi-select/components/multi-select-list-box/multi-select-list-box.component.js

@@ -7,7 +7,7 @@ import { MultiSelectOption } from './components/multi-select-option/multi-select
 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';
 export function MultiSelectListBox({ listBoxRef, ...props }) {
-    const { listState } = useContext(MultiSelectContext);
+    const { listState, hideSelectAll } = useContext(MultiSelectContext);
     const selectionMode = listState.selectionManager.selectionMode;
     const { listBoxProps } = useListBox({
         selectionMode,
@@ -19,7 +19,7 @@ export function MultiSelectListBox({ listBoxRef, ...props }) {
     const styles = listBoxStyles();
     return React.createElement("div", {
         className: styles.container()
-    }, selectionMode === 'multiple' && stateCollection.length > 0 && React.createElement(MultiSelectSelectAllOption, null), React.createElement("ul", {
+    }, selectionMode === 'multiple' && stateCollection.length > 0 && !hideSelectAll && React.createElement(MultiSelectSelectAllOption, null), React.createElement("ul", {
         ...listBoxProps,
         ref: listBoxRef,
         className: styles.ul()

package/dist/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.d.ts

@@ -1,2 +1,2 @@
 import { MultiSelectListBoxTriggerProps } from './multi-select-list-box-trigger.types.js';
-export declare function MultiSelectListBoxTrigger<T>({ placeholder, showSingleSectionTitle, selectedKeys, triggerProps, id, }: MultiSelectListBoxTriggerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function MultiSelectListBoxTrigger<T>({ placeholder, showSingleSectionTitle, selectedKeys, triggerProps, id, width, }: MultiSelectListBoxTriggerProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.js

@@ -7,7 +7,7 @@ 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';
-export function MultiSelectListBoxTrigger({ placeholder, showSingleSectionTitle, selectedKeys, triggerProps, id }) {
+export function MultiSelectListBoxTrigger({ placeholder, showSingleSectionTitle, selectedKeys, triggerProps, id, width }) {
     const { size, overlayState, listState, buttonRef, inputRef } = useContext(MultiSelectContext);
     const selectionMode = listState.selectionManager.selectionMode;
     const breakpoint = useBreakpoint();
@@ -18,7 +18,8 @@ export function MultiSelectListBoxTrigger({ placeholder, showSingleSectionTitle,
     const finalButtonProps = mergeProps(focusProps, buttonProps);
     const styles = triggerStyles({
         size: resolveResponsiveVariant(size, breakpoint),
-        isFocusVisible
+        isFocusVisible,
+        width: resolveResponsiveVariant(width, breakpoint)
     });
     const getSectionTitle = useCallback((key)=>{
         const parentKey = key !== null && key !== void 0 ? key : '';

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

@@ -36,43 +36,44 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
     width: {
         full: {
-            control: string;
+            selectionSpan: string;
+            buttonContainer: string;
         };
         1: {
-            control: string;
+            selectionSpan: string;
         };
         2: {
-            control: string;
+            selectionSpan: string;
         };
         3: {
-            control: string;
+            selectionSpan: string;
         };
         4: {
-            control: string;
+            selectionSpan: string;
         };
         5: {
-            control: string;
+            selectionSpan: string;
         };
         6: {
-            control: string;
+            selectionSpan: string;
         };
         7: {
-            control: string;
+            selectionSpan: string;
         };
         8: {
-            control: string;
+            selectionSpan: string;
         };
         9: {
-            control: string;
+            selectionSpan: string;
         };
         10: {
-            control: string;
+            selectionSpan: string;
         };
         20: {
-            control: string;
+            selectionSpan: string;
         };
         30: {
-            control: string;
+            selectionSpan: string;
         };
     };
 }, {
@@ -122,43 +123,44 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
     width: {
         full: {
-            control: string;
+            selectionSpan: string;
+            buttonContainer: string;
         };
         1: {
-            control: string;
+            selectionSpan: string;
         };
         2: {
-            control: string;
+            selectionSpan: string;
         };
         3: {
-            control: string;
+            selectionSpan: string;
         };
         4: {
-            control: string;
+            selectionSpan: string;
         };
         5: {
-            control: string;
+            selectionSpan: string;
         };
         6: {
-            control: string;
+            selectionSpan: string;
         };
         7: {
-            control: string;
+            selectionSpan: string;
         };
         8: {
-            control: string;
+            selectionSpan: string;
         };
         9: {
-            control: string;
+            selectionSpan: string;
         };
         10: {
-            control: string;
+            selectionSpan: string;
         };
         20: {
-            control: string;
+            selectionSpan: string;
         };
         30: {
-            control: string;
+            selectionSpan: string;
         };
     };
 }, {
@@ -208,43 +210,44 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
     width: {
         full: {
-            control: string;
+            selectionSpan: string;
+            buttonContainer: string;
         };
         1: {
-            control: string;
+            selectionSpan: string;
         };
         2: {
-            control: string;
+            selectionSpan: string;
         };
         3: {
-            control: string;
+            selectionSpan: string;
         };
         4: {
-            control: string;
+            selectionSpan: string;
         };
         5: {
-            control: string;
+            selectionSpan: string;
         };
         6: {
-            control: string;
+            selectionSpan: string;
         };
         7: {
-            control: string;
+            selectionSpan: string;
         };
         8: {
-            control: string;
+            selectionSpan: string;
         };
         9: {
-            control: string;
+            selectionSpan: string;
         };
         10: {
-            control: string;
+            selectionSpan: string;
         };
         20: {
-            control: string;
+            selectionSpan: string;
         };
         30: {
-            control: string;
+            selectionSpan: string;
         };
     };
 }, {

package/dist/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.styles.js

@@ -1,7 +1,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',
@@ -48,43 +48,44 @@ export const styles = tv({
         },
         width: {
             full: {
-                control: 'w-full'
+                selectionSpan: 'w-full',
+                buttonContainer: 'w-full'
             },
             1: {
-                control: 'box-content w-[1.81ex]'
+                selectionSpan: 'w-[1.81ex]'
             },
             2: {
-                control: 'box-content w-[3.62ex]'
+                selectionSpan: 'w-[3.62ex]'
             },
             3: {
-                control: 'box-content w-[5.43ex]'
+                selectionSpan: 'w-[5.43ex]'
             },
             4: {
-                control: 'box-content w-[7.24ex]'
+                selectionSpan: 'w-[7.24ex]'
             },
             5: {
-                control: 'box-content w-[9.05ex]'
+                selectionSpan: 'w-[9.05ex]'
             },
             6: {
-                control: 'box-content w-[10.86ex]'
+                selectionSpan: 'w-[10.86ex]'
             },
             7: {
-                control: 'box-content w-[12.67ex]'
+                selectionSpan: 'w-[12.67ex]'
             },
             8: {
-                control: 'box-content w-[14.48ex]'
+                selectionSpan: 'w-[14.48ex]'
             },
             9: {
-                control: 'box-content w-[16.29ex]'
+                selectionSpan: 'w-[16.29ex]'
             },
             10: {
-                control: 'box-content w-[18.1ex]'
+                selectionSpan: 'w-[18.1ex]'
             },
             20: {
-                control: 'box-content w-[36.2ex]'
+                selectionSpan: 'w-[36.2ex]'
             },
             30: {
-                control: 'box-content w-[54.3ex]'
+                selectionSpan: 'w-[54.3ex]'
             }
         }
     }

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

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

package/dist/components/multi-select/components/multi-select-popover/multi-select-popover.component.js

@@ -1,14 +1,22 @@
 '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';
 import { styles as popoverStyles } from './multi-select-popover.styles.js';
 export function MultiSelectPopover({ children, className, ...props }) {
-    var _buttonRef_current;
+    var _buttonRef_current, _popoverProps_style;
     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);
+        }
+    }, []);
     const { popoverProps } = usePopover({
         ...props,
-        placement,
+        placement: placement,
         popoverRef,
         triggerRef: buttonRef,
         isNonModal: true,
@@ -16,11 +24,15 @@ export function MultiSelectPopover({ children, className, ...props }) {
         shouldCloseOnInteractOutside: ()=>false,
         offset: 6
     }, overlayState);
-    const width = (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.getBoundingClientRect().width;
+    const brandContainer = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-theme]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+        }
+    }, []);
     const styles = popoverStyles();
     return React.createElement(Overlay, {
         disableFocusManagement: true,
-        portalContainer: portalContainer
+        portalContainer: portalContainer || brandContainer
     }, React.createElement("div", {
         ...mergeProps(popoverProps, overlayProps),
         ref: popoverRef,
@@ -29,7 +41,8 @@ export function MultiSelectPopover({ children, className, ...props }) {
         }),
         style: {
             ...popoverProps.style,
-            width: width ? `${width}px` : undefined
+            width: isPopoverSmaller ? (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.getBoundingClientRect().width : undefined,
+            maxWidth: brandContainer ? brandContainer.getBoundingClientRect().width - (parseInt((_popoverProps_style = popoverProps.style) === null || _popoverProps_style === void 0 ? void 0 : _popoverProps_style.left) || 0) : undefined
         },
         onBlur: (e)=>{
             const related = e.relatedTarget;

package/dist/components/multi-select/multi-select.component.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { MultiSelectContextProps, MultiSelectItemProps, MultiSelectProps, MultiSelectValue } from './multi-select.types.js';
 export declare const MultiSelectContext: React.Context<MultiSelectContextProps>;
-export declare function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({ size, listBoxProps, selectionMode, selectedKeys, onSelectionChange, placeholder, showSingleSectionTitle, placement, portalContainer, id, ...props }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function BaseMultiSelect<T extends MultiSelectValue = MultiSelectValue>({ size, listBoxProps, selectionMode, selectedKeys, onSelectionChange, placeholder, showSingleSectionTitle, placement, portalContainer, id, hideFilter, hideSelectAll, width, ...props }: MultiSelectProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare const MultiSelect: React.MemoExoticComponent<typeof BaseMultiSelect>;
 export declare const MultiSelectItem: (props: MultiSelectItemProps) => JSX.Element;
 export { Section as MultiSelectSection } from 'react-stately';

package/dist/components/multi-select/multi-select.component.js

@@ -25,9 +25,10 @@ export const MultiSelectContext = createContext({
         current: null
     },
     filterText: '',
-    overlayProps: {}
+    overlayProps: {},
+    hideSelectAll: false
 });
-export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode = 'multiple', selectedKeys, onSelectionChange, placeholder = 'Select', showSingleSectionTitle = false, placement, portalContainer, id, ...props }) {
+export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode = 'multiple', selectedKeys, onSelectionChange, placeholder = 'Select', showSingleSectionTitle = false, placement = 'bottom left', portalContainer, id, hideFilter = false, hideSelectAll = false, width = 'full', ...props }) {
     const [filterText, setFilterText] = useState('');
     const filter = useFilter({
         sensitivity: 'base'
@@ -48,8 +49,17 @@ export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode =
         onOpenChange: (isOpen)=>{
             if (isOpen) {
                 requestAnimationFrame(()=>{
-                    var _inputRef_current;
-                    (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                    if (!hideFilter) {
+                        var _inputRef_current;
+                        (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                    } else if (selectionMode === 'multiple' && !hideSelectAll) {
+                        var _selectAllRef_current;
+                        (_selectAllRef_current = selectAllRef.current) === null || _selectAllRef_current === void 0 ? void 0 : _selectAllRef_current.focus();
+                    } else {
+                        var _listBoxRef_current;
+                        const firstItem = (_listBoxRef_current = listBoxRef.current) === null || _listBoxRef_current === void 0 ? void 0 : _listBoxRef_current.querySelector('[data-key]');
+                        firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
+                    }
                 });
             }
             if (!isOpen) {
@@ -75,7 +85,8 @@ export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode =
             listBoxRef,
             inputRef,
             overlayProps,
-            portalContainer
+            portalContainer,
+            hideSelectAll
         }
     }, React.createElement("div", {
         className: styles.root()
@@ -84,9 +95,11 @@ export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode =
         selectedKeys: selectedKeys,
         showSingleSectionTitle: showSingleSectionTitle,
         triggerProps: triggerProps,
-        id: id
+        id: id,
+        width: width
     }), overlayState.isOpen && React.createElement(MultiSelectDropdown, {
         setFilterText: setFilterText,
+        hideFilter: hideFilter,
         ...listBoxProps
     })));
 }

package/dist/components/multi-select/multi-select.types.d.ts

@@ -2,7 +2,11 @@ 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;
@@ -16,6 +20,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;
@@ -27,6 +32,16 @@ export type MultiSelectValue = {
     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
      */
@@ -41,7 +56,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'];
     /**
@@ -58,4 +73,10 @@ 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>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -254,9 +254,9 @@
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
     "@westpac/eslint-config": "~1.1.0",
-    "@westpac/style-config": "~1.0.1",
-    "@westpac/ts-config": "~0.0.0",
-    "@westpac/test-config": "~0.0.0"
+    "@westpac/style-config": "~1.0.2",
+    "@westpac/test-config": "~0.0.0",
+    "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {
     "@internationalized/date": "~3.10.0",

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

@@ -99,14 +99,14 @@ function Autocomplete<T extends object>(
   const isNoOptionPopOverOpen = useMemo(() => {
     return !!(
       noOptionsMessage &&
-      ((!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem) ||
+      ((!state.isOpen && state.isFocused && searchProps.value.length > 0 && state.selectedItems.length === 0) ||
         (state.collection.size === 0 && searchProps.value.length > 0))
     );
   }, [
     noOptionsMessage,
     state.isOpen,
     state.isFocused,
-    state.selectedItem,
+    state.selectedItems,
     state.collection.size,
     searchProps.value.length,
   ]);

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

@@ -12,6 +12,7 @@ import { MultiSelectDropdownProps } from './multi-select-dropdown.types.js';
 
 export function MultiSelectDropdown<T extends object = object>({
   setFilterText,
+  hideFilter,
   ...props
 }: MultiSelectDropdownProps<T>) {
   const { filterText, listBoxRef } = useContext(MultiSelectContext);
@@ -19,7 +20,9 @@ export function MultiSelectDropdown<T extends object = object>({
 
   return (
     <MultiSelectPopover>
-      <MultiSelectSearchbar filterText={filterText} setFilterText={setFilterText} closeBtnRef={closeBtnRef} />
+      {!hideFilter && (
+        <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.types.ts

@@ -2,5 +2,6 @@ import { Dispatch, SetStateAction } from 'react';
 import { AriaListBoxOptions } from 'react-aria';
 
 export type MultiSelectDropdownProps<T> = {
+  hideFilter?: boolean;
   setFilterText: Dispatch<SetStateAction<string>>;
 } & AriaListBoxOptions<T>;

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

@@ -13,7 +13,7 @@ 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 { listState, hideSelectAll } = useContext(MultiSelectContext);
   const selectionMode = listState.selectionManager.selectionMode;
   const { listBoxProps } = useListBox({ selectionMode, ...props }, listState, listBoxRef);
 
@@ -23,7 +23,7 @@ export function MultiSelectListBox<T extends object = object>({ listBoxRef, ...p
 
   return (
     <div className={styles.container()}>
-      {selectionMode === 'multiple' && stateCollection.length > 0 && <MultiSelectSelectAllOption />}
+      {selectionMode === 'multiple' && stateCollection.length > 0 && !hideSelectAll && <MultiSelectSelectAllOption />}
       <ul {...listBoxProps} ref={listBoxRef} className={styles.ul()}>
         {stateCollection.length > 0 ? (
           stateCollection.map(item =>

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

@@ -17,6 +17,7 @@ export function MultiSelectListBoxTrigger<T>({
   selectedKeys,
   triggerProps,
   id,
+  width,
 }: MultiSelectListBoxTriggerProps<T>) {
   const { size, overlayState, listState, buttonRef, inputRef } = useContext(MultiSelectContext);
   const selectionMode = listState.selectionManager.selectionMode;
@@ -30,6 +31,7 @@ export function MultiSelectListBoxTrigger<T>({
   const styles = triggerStyles({
     size: resolveResponsiveVariant(size, breakpoint),
     isFocusVisible,
+    width: resolveResponsiveVariant(width, breakpoint),
   });
 
   const getSectionTitle = useCallback(