@westpac/ui 0.57.4 → 0.59.0

package/dist/components/compacta/compacta.component.d.ts

@@ -1,2 +1,2 @@
 import { type CompactaProps } from './compacta.types.js';
-export declare function Compacta({ className, children, titleTag: Tag, addText, ...props }: CompactaProps): import("react/jsx-runtime").JSX.Element;
+export declare function Compacta({ className, children, titleTag: Tag, addText, initialCompactas, ...props }: CompactaProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/compacta/compacta.component.js

@@ -7,7 +7,7 @@ import { AddCircleIcon, ExpandLessIcon, ExpandMoreIcon, RemoveCircleIcon } from
 import { VisuallyHidden } from '../index.js';
 import { styles as compactaStyles } from './compacta.styles.js';
 const loadAnimations = ()=>import('./compacta.utils.js').then((res)=>res.default);
-export function Compacta({ className, children, titleTag: Tag = 'h3', addText = 'Add another', ...props }) {
+export function Compacta({ className, children, titleTag: Tag = 'h3', addText = 'Add another', initialCompactas, ...props }) {
     const [initial, setInitial] = useState(true);
     const id = useId();
     const [items, setItems] = useState([
@@ -129,6 +129,26 @@ export function Compacta({ className, children, titleTag: Tag = 'h3', addText =
         items.length,
         action
     ]);
+    useEffect(()=>{
+        if (initialCompactas) {
+            const newItems = initialCompactas.map((item, index)=>{
+                var _item_id, _ref, _ref1, _ref2;
+                var _item_title, _item_title1, _item_title2;
+                const itemId = (_item_id = item.id) !== null && _item_id !== void 0 ? _item_id : `${id}-${generateID()}`;
+                return {
+                    id: itemId,
+                    open: index === initialCompactas.length - 1 ? true : false,
+                    delay: false,
+                    title: {
+                        primary: (_ref = (_item_title = item.title) === null || _item_title === void 0 ? void 0 : _item_title.primary) !== null && _ref !== void 0 ? _ref : '',
+                        secondary: (_ref1 = (_item_title1 = item.title) === null || _item_title1 === void 0 ? void 0 : _item_title1.secondary) !== null && _ref1 !== void 0 ? _ref1 : '',
+                        tertiary: (_ref2 = (_item_title2 = item.title) === null || _item_title2 === void 0 ? void 0 : _item_title2.tertiary) !== null && _ref2 !== void 0 ? _ref2 : ''
+                    }
+                };
+            });
+            setItems(newItems);
+        }
+    }, []);
     const styles = compactaStyles({});
     return React.createElement("div", {
         className: styles.base({

package/dist/components/compacta/compacta.types.d.ts

@@ -8,6 +8,18 @@ export type CompactaProps = {
      * Component to repeat
      */
     children: (...props: ContentProps[]) => ReactNode;
+    /**
+     * The initial compactas to render. Each compacta needs a unique id if you want to pre-fill values.
+     * Each object contained within the array represents a compacta.
+     */
+    initialCompactas?: {
+        id?: string;
+        title?: {
+            primary?: string;
+            secondary?: string;
+            tertiary?: string;
+        };
+    }[];
     /**
      * Tag for primary title
      * @default h3

package/dist/components/index.d.ts

@@ -48,3 +48,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/dist/components/index.js

@@ -48,3 +48,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/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.component.d.ts

@@ -0,0 +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;

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

@@ -0,0 +1,20 @@
+'use client';
+import React, { useContext, useRef } from 'react';
+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';
+export function MultiSelectDropdown({ setFilterText, ...props }) {
+    const { filterText, listBoxRef } = useContext(MultiSelectContext);
+    const closeBtnRef = useRef(null);
+    return React.createElement(MultiSelectPopover, null, React.createElement(MultiSelectSearchbar, {
+        filterText: filterText,
+        setFilterText: setFilterText,
+        closeBtnRef: closeBtnRef
+    }), React.createElement(MultiSelectListBox, {
+        ...props,
+        "aria-label": "multiselect list",
+        escapeKeyBehavior: "none",
+        listBoxRef: listBoxRef
+    }));
+}

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

@@ -0,0 +1,37 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            popover?: import("tailwind-variants").ClassValue;
+            clearButton?: import("tailwind-variants").ClassValue;
+            searchInputWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            popover?: import("tailwind-variants").ClassValue;
+            clearButton?: import("tailwind-variants").ClassValue;
+            searchInputWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    popover: string;
+    searchInputWrapper: string;
+    clearButton: string;
+}, undefined, TVConfig<V, EV>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            popover?: import("tailwind-variants").ClassValue;
+            clearButton?: import("tailwind-variants").ClassValue;
+            searchInputWrapper?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    popover: string;
+    searchInputWrapper: string;
+    clearButton: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    popover: string;
+    searchInputWrapper: string;
+    clearButton: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,8 @@
+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/dist/components/multi-select/components/multi-select-dropdown/multi-select-dropdown.types.d.ts

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

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

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,2 @@
+import type { MultiSelectSectionProps } from './multi-select-list-box-section.types.js';
+export declare function MultiSelectListBoxSection<T>({ section }: MultiSelectSectionProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+'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';
+export function MultiSelectListBoxSection({ section }) {
+    const { listState } = useContext(MultiSelectContext);
+    const { itemProps, headingProps, groupProps } = useListBoxSection({
+        heading: section.rendered,
+        'aria-label': section['aria-label']
+    });
+    const styles = listBoxStyles();
+    const childNodes = useMemo(()=>{
+        var _listState_collection;
+        return (listState === null || listState === void 0 ? void 0 : (_listState_collection = listState.collection) === null || _listState_collection === void 0 ? void 0 : _listState_collection.getChildren) ? [
+            ...listState.collection.getChildren(section.key)
+        ] : [];
+    }, [
+        section.key,
+        listState === null || listState === void 0 ? void 0 : listState.collection
+    ]);
+    return React.createElement(React.Fragment, null, React.createElement("li", itemProps, section.rendered && React.createElement("span", {
+        ...headingProps,
+        className: styles.span(),
+        tabIndex: -1
+    }, section.rendered), React.createElement("ul", groupProps, childNodes.map((node)=>React.createElement(MultiSelectOption, {
+            key: node.key,
+            item: node
+        })))));
+}

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

@@ -0,0 +1,25 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            span?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            span?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    span: string;
+}, undefined, TVConfig<V, EV>, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            span?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    span: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    span: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,6 @@
+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/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.types.d.ts

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

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-list-box-section/multi-select-list-box-section.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1,2 @@
+import { MultiSelectOptionProps } from './multi-select-option.types.js';
+export declare function MultiSelectOption<T>({ item }: MultiSelectOptionProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,62 @@
+'use client';
+import React, { useCallback, useContext, useRef } 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';
+export function MultiSelectOption({ item }) {
+    var _item_props;
+    const { listState, selectAllRef, inputRef } = useContext(MultiSelectContext);
+    const selectionMode = listState.selectionManager.selectionMode;
+    const ref = useRef(null);
+    const { optionProps, isDisabled, isSelected } = useOption({
+        key: item.key
+    }, listState, ref);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const styles = optionStyles({
+        disabled: isDisabled,
+        selectionMode,
+        isFocusVisible
+    });
+    const handleButtonKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowUp' && item.index === 0) {
+            e.preventDefault();
+            if (selectAllRef.current) {
+                var _selectAllRef_current;
+                (_selectAllRef_current = selectAllRef.current) === null || _selectAllRef_current === void 0 ? void 0 : _selectAllRef_current.focus();
+            } else {
+                var _inputRef_current;
+                (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+            }
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            listState.selectionManager.toggleSelection(item.key);
+        }
+    }, [
+        listState.selectionManager
+    ]);
+    return React.createElement("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
+    }, React.createElement("div", {
+        className: styles.itemContainer()
+    }, React.createElement("div", {
+        className: styles.flexZero()
+    }, React.createElement("div", {
+        className: styles.checkbox()
+    }, isSelected && React.createElement(TickIcon, {
+        size: "small",
+        "aria-hidden": "true",
+        color: "hero"
+    }))), React.createElement("div", {
+        className: styles.body()
+    }, item.rendered)), ((_item_props = item.props) === null || _item_props === void 0 ? void 0 : _item_props.description) && React.createElement("div", {
+        className: styles.description()
+    }, item.props.description));
+}

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

@@ -0,0 +1,82 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    selectionMode: {
+        none: {};
+        multiple: {
+            checkbox: string;
+        };
+        single: {
+            checkbox: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    checkbox: string;
+    body: string;
+    flexZero: string;
+    itemContainer: string;
+    description: string;
+}, undefined, TVConfig<V, EV>, {
+    selectionMode: {
+        none: {};
+        multiple: {
+            checkbox: string;
+        };
+        single: {
+            checkbox: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    checkbox: string;
+    body: string;
+    flexZero: string;
+    itemContainer: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    selectionMode: {
+        none: {};
+        multiple: {
+            checkbox: string;
+        };
+        single: {
+            checkbox: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            root: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    checkbox: string;
+    body: string;
+    flexZero: string;
+    itemContainer: string;
+    description: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,32 @@
+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/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.types.d.ts

@@ -0,0 +1,8 @@
+import type { Node } from '@react-types/shared';
+export type MultiSelectOptionProps<T> = {
+    item: Omit<Node<T>, 'props'> & {
+        props?: {
+            description?: string;
+        };
+    };
+};

package/dist/components/multi-select/components/multi-select-list-box/components/multi-select-option/multi-select-option.types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+export declare function MultiSelectSelectAllOption(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,93 @@
+'use client';
+import React, { useCallback, useContext, useMemo } 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
+    ]);
+    const handleSelectionChange = useCallback(()=>{
+        if (!allItemsAreSelected) {
+            listState.selectionManager.setSelectedKeys(new Set([
+                ...listState.selectionManager.selectedKeys,
+                ...listState.selectionManager.collection.getKeys()
+            ]));
+            return;
+        }
+        return listState.selectionManager.clearSelection();
+    }, [
+        allItemsAreSelected,
+        listState.selectionManager
+    ]);
+    const { optionProps } = useOption({
+        key: 'select-all'
+    }, listState, selectAllRef);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const styles = selectAllOptionStyles({
+        selected: withOneSelectionOrMore,
+        isFocusVisible
+    });
+    const handleInputKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowDown') {
+            var _listBoxRef_current;
+            e.preventDefault();
+            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 (e.key === 'ArrowUp') {
+            var _inputRef_current;
+            e.preventDefault();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        }
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            handleSelectionChange();
+        }
+    }, [
+        handleSelectionChange,
+        listBoxRef,
+        inputRef
+    ]);
+    let ariaChecked;
+    if (allItemsAreSelected) {
+        ariaChecked = 'true';
+    } else if (withOneSelectionOrMore) {
+        ariaChecked = 'mixed';
+    } else {
+        ariaChecked = 'false';
+    }
+    return React.createElement("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"
+    }, React.createElement("div", {
+        className: styles.button()
+    }, React.createElement("div", {
+        className: styles.checkbox(),
+        role: "presentation"
+    }, allItemsAreSelected && React.createElement(TickIcon, {
+        size: "small",
+        "aria-hidden": "true",
+        color: "hero"
+    }), !allItemsAreSelected && withOneSelectionOrMore && React.createElement("div", {
+        className: styles.indeterminate()
+    })), React.createElement("span", {
+        className: styles.label()
+    }, "Select all")));
+}

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

@@ -0,0 +1,64 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            listItem: string;
+        };
+        false: {
+            listItem: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            listItem: string;
+        };
+        false: {};
+    };
+}, {
+    listItem: string;
+    button: string;
+    checkbox: string;
+    indeterminate: string;
+    label: string;
+}, undefined, TVConfig<V, EV>, {
+    selected: {
+        true: {
+            listItem: string;
+        };
+        false: {
+            listItem: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            listItem: string;
+        };
+        false: {};
+    };
+}, {
+    listItem: string;
+    button: string;
+    checkbox: string;
+    indeterminate: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            listItem: string;
+        };
+        false: {
+            listItem: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            listItem: string;
+        };
+        false: {};
+    };
+}, {
+    listItem: string;
+    button: string;
+    checkbox: string;
+    indeterminate: string;
+    label: string;
+}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,26 @@
+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/dist/components/multi-select/components/multi-select-list-box/multi-select-list-box.component.d.ts

@@ -0,0 +1,2 @@
+import type { MultiSelectListBoxProps } from './multi-select-list-box.types.js';
+export declare function MultiSelectListBox<T extends object = object>({ listBoxRef, ...props }: MultiSelectListBoxProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+'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';
+export function MultiSelectListBox({ listBoxRef, ...props }) {
+    const { listState } = useContext(MultiSelectContext);
+    const selectionMode = listState.selectionManager.selectionMode;
+    const { listBoxProps } = useListBox({
+        selectionMode,
+        ...props
+    }, listState, listBoxRef);
+    const stateCollection = [
+        ...listState.collection
+    ];
+    const styles = listBoxStyles();
+    return React.createElement("div", {
+        className: styles.container()
+    }, selectionMode === 'multiple' && stateCollection.length > 0 && React.createElement(MultiSelectSelectAllOption, null), React.createElement("ul", {
+        ...listBoxProps,
+        ref: listBoxRef,
+        className: styles.ul()
+    }, stateCollection.length > 0 ? stateCollection.map((item)=>item.type === 'section' ? React.createElement(MultiSelectListBoxSection, {
+            key: item.key,
+            section: item
+        }) : React.createElement(MultiSelectOption, {
+            key: item.key,
+            item: item
+        })) : React.createElement("p", {
+        className: styles.noItemsText()
+    }, "No results. Try another search.")));
+}