@westpac/ui 1.0.0-canary.8 → 1.0.0

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-muted-soft hover:bg-surface-muted-faint',
+        button: 'flex w-full cursor-pointer items-center gap-1 p-2',
+        checkbox: 'flex size-4 items-center justify-center rounded border border-border-hero bg-background-white',
+        indeterminate: 'block w-3/5 border-t-2 border-t-border-hero',
+        label: 'typography-body-9'
+    },
+    variants: {
+        selected: {
+            true: {
+                listItem: 'bg-surface-muted-faint'
+            },
+            false: {
+                listItem: ''
+            }
+        },
+        isFocusVisible: {
+            true: {
+                listItem: 'bg-surface-muted-faint focus-outline -outline-offset-2'
+            },
+            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.")));
+}

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-merge").ClassNameValue | {
+            ul?: import("tailwind-merge").ClassNameValue;
+            checkbox?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            noItemsText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-merge").ClassNameValue | {
+            ul?: import("tailwind-merge").ClassNameValue;
+            checkbox?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            noItemsText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    checkbox: string;
+    ul: string;
+    noItemsText: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-merge").ClassNameValue | {
+            ul?: import("tailwind-merge").ClassNameValue;
+            checkbox?: import("tailwind-merge").ClassNameValue;
+            container?: import("tailwind-merge").ClassNameValue;
+            noItemsText?: import("tailwind-merge").ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string;
+    checkbox: string;
+    ul: string;
+    noItemsText: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    container: string;
+    checkbox: string;
+    ul: string;
+    noItemsText: string;
+}, undefined, 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-72 overflow-auto',
+        checkbox: 'flex size-4 items-center justify-center rounded border border-border-muted-strong',
+        ul: 'w-full outline-none',
+        noItemsText: 'px-2 py-3 typography-body-9 text-text-body'
+    }
+});

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,121 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
+import { useBreakpoint } from '../../../../hook/breakpoints.hook.js';
+import { resolveResponsiveVariant } from '../../../../utils/breakpoint.util.js';
+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 breakpoint = useBreakpoint();
+    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: resolveResponsiveVariant(size, breakpoint),
+        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-vivid",
+        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,259 @@
+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, {
+    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, unknown, unknown, undefined>>;

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

@@ -0,0 +1,91 @@
+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',
+        selection: 'flex flex-1 items-center overflow-hidden pr-4.5 text-left whitespace-nowrap',
+        selectionSpan: 'w-full overflow-hidden text-ellipsis',
+        hint: 'typography-body-10 text-text-muted',
+        button: 'flex cursor-default items-center justify-center border-l border-l-border-muted-strong bg-background-white',
+        clearButton: 'absolute top-0 bottom-0 flex !h-auto items-center justify-center',
+        clearIcon: '-mt-0.5'
+    },
+    variants: {
+        size: {
+            small: {
+                control: 'min-h-[1.875rem] form-control-small group-[.input-group-inset-after]:pr-6 group-[.input-group-inset-before]:pl-6',
+                button: '-mt-0.5 -mr-[0.5625rem] -mb-[0.25rem] rounded-r-sm px-0.5',
+                clearButton: 'right-6.5'
+            },
+            medium: {
+                control: 'min-h-[2.25rem] form-control-medium group-[.input-group-inset-after]:pr-7 group-[.input-group-inset-before]:pl-7',
+                button: '-my-[0.3125rem] -mr-2 rounded-r-md px-1.5',
+                clearButton: 'right-8.5'
+            },
+            large: {
+                control: 'min-h-[2.625rem] form-control-large group-[.input-group-inset-after]:pr-8 group-[.input-group-inset-before]:pl-8',
+                button: '-my-[0.5rem] -mr-2.5 rounded-r-lg px-1.5',
+                clearButton: 'right-8.5'
+            },
+            xlarge: {
+                control: 'min-h-[3rem] form-control-xlarge group-[.input-group-inset-after]:pr-9 group-[.input-group-inset-before]:pl-9',
+                button: '-mt-[0.5625rem] -mr-3 -mb-[0.625rem] rounded-r-xl px-2',
+                clearButton: 'right-9.5'
+            }
+        },
+        invalid: {
+            true: {
+                control: 'border-border-danger'
+            },
+            false: {
+                control: 'border-border-muted-strong'
+            }
+        },
+        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]'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,16 @@
+import { AriaButtonProps } from 'react-aria';
+import { ListProps } from 'react-stately';
+import { VariantProps } from 'tailwind-variants';
+import { ResponsiveVariants } from 'src/types/responsive-variants.types.js';
+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 = ResponsiveVariants<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()
+    })));
+}