@westpac/ui 0.57.4 → 0.59.0

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

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type AriaListBoxOptions } from 'react-aria';
+export type MultiSelectListBoxProps<T> = {
+    listBoxRef: React.RefObject<HTMLUListElement>;
+} & Omit<AriaListBoxOptions<T>, 'selectionMode'>;

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

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

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

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

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

@@ -0,0 +1,118 @@
+import React, { useCallback, useContext, useEffect, useState } 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';
+export function MultiSelectListBoxTrigger({ placeholder, showSingleSectionTitle, selectedKeys, triggerProps, id }) {
+    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([]);
+    const [sectionTitle, setSectionTitle] = useState(undefined);
+    const finalButtonProps = mergeProps(focusProps, buttonProps);
+    const styles = triggerStyles({
+        size,
+        isFocusVisible
+    });
+    const getSectionTitle = useCallback((key)=>{
+        const parentKey = key !== null && key !== void 0 ? key : '';
+        const item = listState.collection.getItem(parentKey);
+        if (!item) return undefined;
+        const title = item.props.title;
+        return title;
+    }, [
+        listState.collection
+    ]);
+    const handleTriggerKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+            var _inputRef_current;
+            e.preventDefault();
+            overlayState.open();
+            (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+        }
+    }, [
+        overlayState
+    ]);
+    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
+                ]));
+            const next = [];
+            for (const key of [
+                ...selectedKeys
+            ]){
+                if (currentMap.has(key)) {
+                    next.push({
+                        key,
+                        value: currentMap.get(key)
+                    });
+                } else {
+                    var _listState_collection_getItem;
+                    next.push({
+                        key,
+                        value: (_listState_collection_getItem = listState.collection.getItem(key)) === null || _listState_collection_getItem === void 0 ? void 0 : _listState_collection_getItem.textValue
+                    });
+                }
+            }
+            if (selectionMode === 'single' && showSingleSectionTitle) {
+                var _listState_collection_getItem1;
+                const firstKey = [
+                    ...selectedKeys
+                ][0];
+                const parentKey = (_listState_collection_getItem1 = listState.collection.getItem(firstKey)) === null || _listState_collection_getItem1 === void 0 ? void 0 : _listState_collection_getItem1.parentKey;
+                const title = parentKey ? getSectionTitle(parentKey) : undefined;
+                setSectionTitle(title);
+            }
+            setSelectedValues(next);
+        }
+    }, [
+        selectedKeys
+    ]);
+    const valuesString = selectionMode === 'single' && selectedValues.length > 0 && showSingleSectionTitle && sectionTitle ? `${sectionTitle}: ${selectedValues[0].value}` : selectedValues.map((node)=>node.value || '').join(', ');
+    return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+        tooltip: valuesString,
+        position: "top"
+    }, React.createElement("div", {
+        className: styles.buttonContainer()
+    }, React.createElement("button", {
+        className: styles.control(),
+        ref: buttonRef,
+        ...finalButtonProps,
+        onKeyDown: handleTriggerKeyDown,
+        type: "button",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        tabIndex: undefined,
+        "aria-haspopup": "dialog",
+        id: id
+    }, React.createElement("div", {
+        className: styles.selection()
+    }, React.createElement("span", {
+        className: styles.selectionSpan()
+    }, selectedValues.length > 0 ? valuesString : placeholder)), React.createElement("div", {
+        className: styles.button()
+    }, React.createElement(DropDownIcon, {
+        color: "muted",
+        size: "medium",
+        "aria-hidden": "true"
+    }))), selectedValues.length > 0 && React.createElement(Button, {
+        className: styles.clearButton(),
+        look: "unstyled",
+        onClick: ()=>{
+            listState.selectionManager.clearSelection();
+        }
+    }, React.createElement(ClearIcon, {
+        className: styles.clearIcon(),
+        size: "small",
+        color: "muted"
+    })))), selectedValues.length > 0 && selectionMode === 'multiple' && React.createElement("p", {
+        className: styles.hint()
+    }, selectedValues.length, " item", selectedValues.length > 1 && 's', " selected"));
+}

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

@@ -0,0 +1,263 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        medium: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        large: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        xlarge: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+    };
+    invalid: {
+        true: {
+            control: string;
+        };
+        false: {
+            control: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            control: string;
+        };
+    };
+    width: {
+        full: {
+            control: string;
+        };
+        1: {
+            control: string;
+        };
+        2: {
+            control: string;
+        };
+        3: {
+            control: string;
+        };
+        4: {
+            control: string;
+        };
+        5: {
+            control: string;
+        };
+        6: {
+            control: string;
+        };
+        7: {
+            control: string;
+        };
+        8: {
+            control: string;
+        };
+        9: {
+            control: string;
+        };
+        10: {
+            control: string;
+        };
+        20: {
+            control: string;
+        };
+        30: {
+            control: string;
+        };
+    };
+}, {
+    buttonContainer: string;
+    control: string;
+    selection: string;
+    selectionSpan: string;
+    hint: string;
+    button: string;
+    clearButton: string;
+    clearIcon: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    size: {
+        small: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        medium: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        large: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        xlarge: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+    };
+    invalid: {
+        true: {
+            control: string;
+        };
+        false: {
+            control: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            control: string;
+        };
+    };
+    width: {
+        full: {
+            control: string;
+        };
+        1: {
+            control: string;
+        };
+        2: {
+            control: string;
+        };
+        3: {
+            control: string;
+        };
+        4: {
+            control: string;
+        };
+        5: {
+            control: string;
+        };
+        6: {
+            control: string;
+        };
+        7: {
+            control: string;
+        };
+        8: {
+            control: string;
+        };
+        9: {
+            control: string;
+        };
+        10: {
+            control: string;
+        };
+        20: {
+            control: string;
+        };
+        30: {
+            control: string;
+        };
+    };
+}, {
+    buttonContainer: string;
+    control: string;
+    selection: string;
+    selectionSpan: string;
+    hint: string;
+    button: string;
+    clearButton: string;
+    clearIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        small: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        medium: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        large: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+        xlarge: {
+            control: string;
+            button: string;
+            clearButton: string;
+        };
+    };
+    invalid: {
+        true: {
+            control: string;
+        };
+        false: {
+            control: string;
+        };
+    };
+    isFocusVisible: {
+        true: {
+            control: string;
+        };
+    };
+    width: {
+        full: {
+            control: string;
+        };
+        1: {
+            control: string;
+        };
+        2: {
+            control: string;
+        };
+        3: {
+            control: string;
+        };
+        4: {
+            control: string;
+        };
+        5: {
+            control: string;
+        };
+        6: {
+            control: string;
+        };
+        7: {
+            control: string;
+        };
+        8: {
+            control: string;
+        };
+        9: {
+            control: string;
+        };
+        10: {
+            control: string;
+        };
+        20: {
+            control: string;
+        };
+        30: {
+            control: string;
+        };
+    };
+}, {
+    buttonContainer: string;
+    control: string;
+    selection: string;
+    selectionSpan: string;
+    hint: string;
+    button: string;
+    clearButton: string;
+    clearIcon: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

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

@@ -0,0 +1,99 @@
+import { tv } from 'tailwind-variants';
+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/dist/components/multi-select/components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.d.ts

@@ -0,0 +1,15 @@
+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'>;
+};
+export {};

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

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

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

@@ -0,0 +1,2 @@
+import type { MultiSelectPopoverProps } from './multi-select-popover.types.js';
+export declare function MultiSelectPopover({ children, className, ...props }: MultiSelectPopoverProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,52 @@
+'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';
+export function MultiSelectPopover({ children, className, ...props }) {
+    var _buttonRef_current;
+    const { overlayState, overlayProps, popoverRef, buttonRef, placement, portalContainer } = useContext(MultiSelectContext);
+    const { popoverProps } = usePopover({
+        ...props,
+        placement,
+        popoverRef,
+        triggerRef: buttonRef,
+        isNonModal: true,
+        shouldFlip: true,
+        shouldCloseOnInteractOutside: ()=>false,
+        offset: 6
+    }, overlayState);
+    const width = (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.getBoundingClientRect().width;
+    const styles = popoverStyles();
+    return React.createElement(Overlay, {
+        disableFocusManagement: true,
+        portalContainer: portalContainer
+    }, React.createElement("div", {
+        ...mergeProps(popoverProps, overlayProps),
+        ref: popoverRef,
+        className: styles.overlay({
+            className
+        }),
+        style: {
+            ...popoverProps.style,
+            width: width ? `${width}px` : undefined
+        },
+        onBlur: (e)=>{
+            const related = e.relatedTarget;
+            if (!(popoverRef === null || popoverRef === void 0 ? void 0 : popoverRef.current)) return;
+            if (related && popoverRef.current.contains(related)) return;
+            if (related && (buttonRef === null || buttonRef === void 0 ? void 0 : buttonRef.current) && buttonRef.current.contains(related)) return;
+            overlayState.close();
+        },
+        onKeyDown: (e)=>{
+            if (e.key === 'Tab' || e.key === 'Escape') {
+                overlayState.close();
+            }
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "Options list with filter"
+    }, children, React.createElement(DismissButton, {
+        onDismiss: ()=>overlayState.close()
+    })));
+}

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

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

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

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        underlay: 'fixed inset-0 bg-black/5',
+        overlay: 'z-10 flex flex-col overflow-hidden rounded border border-border bg-white shadow-lg'
+    }
+});

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { AriaPopoverProps } from 'react-aria';
+export type MultiSelectPopoverProps = {
+    children: React.ReactNode;
+    className?: string;
+} & Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>;

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

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

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

@@ -0,0 +1,2 @@
+import type { MultiSelectSearchbarProps } from './multi-select-searchbar.types.js';
+export declare function MultiSelectSearchbar({ filterText, setFilterText, closeBtnRef, }: Pick<MultiSelectSearchbarProps, 'filterText' | 'setFilterText' | 'closeBtnRef'>): import("react/jsx-runtime").JSX.Element;