@westpac/ui 0.57.4 → 0.59.0

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

@@ -0,0 +1,74 @@
+import React, { useContext, useCallback } from 'react';
+import { Button } from '../../../../components/button/index.js';
+import { ClearIcon, SearchIcon } from '../../../../components/icon/index.js';
+import { InputGroup } from '../../../../components/input-group/index.js';
+import { Input } from '../../../input/index.js';
+import { MultiSelectContext } from '../../multi-select.component.js';
+import { styles as searchbarStyles } from './multi-select-searchbar.styles.js';
+export function MultiSelectSearchbar({ filterText, setFilterText, closeBtnRef }) {
+    const { size, inputRef, selectAllRef, listBoxRef } = useContext(MultiSelectContext);
+    const styles = searchbarStyles();
+    const handleInputKeyDown = useCallback((e)=>{
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            if (selectAllRef.current) {
+                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 (e.key === 'Escape' && filterText.length > 0) {
+            e.stopPropagation();
+            setFilterText('');
+        }
+        if (e.key === 'Tab' && filterText.length > 0) {
+            var _closeBtnRef_current;
+            e.preventDefault();
+            e.stopPropagation();
+            (_closeBtnRef_current = closeBtnRef.current) === null || _closeBtnRef_current === void 0 ? void 0 : _closeBtnRef_current.focus();
+        }
+    }, [
+        filterText.length,
+        setFilterText,
+        selectAllRef,
+        listBoxRef,
+        closeBtnRef
+    ]);
+    return React.createElement("div", {
+        className: styles.searchInputWrapper()
+    }, React.createElement(InputGroup, {
+        before: {
+            icon: (props)=>React.createElement(SearchIcon, {
+                    ...props,
+                    color: "muted"
+                })
+        },
+        after: filterText.length > 0 && {
+            inset: true,
+            element: React.createElement(Button, {
+                onClick: ()=>{
+                    var _inputRef_current;
+                    setFilterText('');
+                    (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                },
+                look: "unstyled",
+                className: styles.clearButton(),
+                ref: closeBtnRef,
+                "aria-label": "Clear filter text"
+            }, React.createElement(ClearIcon, {
+                color: "muted",
+                size: "small"
+            }))
+        },
+        "aria-label": "Filter options"
+    }, React.createElement(Input, {
+        ref: inputRef,
+        size: size,
+        value: filterText,
+        onChange: (e)=>setFilterText(e.target.value),
+        onKeyDown: handleInputKeyDown,
+        tabIndex: -1
+    })));
+}

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

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

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

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        searchInputWrapper: 'border-b border-b-border p-2',
+        clearButton: 'mb-0.5 px-2'
+    }
+});

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

@@ -0,0 +1,6 @@
+import { ButtonRef } from '../../../../components/button/button.types.js';
+export type MultiSelectSearchbarProps = {
+    filterText: string;
+    setFilterText: (text: string) => void;
+    closeBtnRef: React.RefObject<ButtonRef>;
+};

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

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

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

@@ -0,0 +1,2 @@
+export { MultiSelect, MultiSelectItem, MultiSelectSection } from './multi-select.component.js';
+export { type MultiSelectValue } from './multi-select.types.js';

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

@@ -0,0 +1 @@
+export { MultiSelect, MultiSelectItem, MultiSelectSection } from './multi-select.component.js';

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

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

@@ -0,0 +1,95 @@
+'use client';
+import React, { useRef, useState, memo, createContext } from 'react';
+import { useFilter, useOverlayTrigger } from 'react-aria';
+import { Item, useListState, useOverlayTriggerState } from 'react-stately';
+import { MultiSelectDropdown } from './components/multi-select-dropdown/multi-select-dropdown.component.js';
+import { MultiSelectListBoxTrigger } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.component.js';
+import { styles as multiSelectStyles } from './multi-select.styles.js';
+import { filterNodes } from './utils/filter-nodes.js';
+export const MultiSelectContext = createContext({
+    overlayState: {},
+    listState: {},
+    listBoxRef: {
+        current: null
+    },
+    buttonRef: {
+        current: null
+    },
+    popoverRef: {
+        current: null
+    },
+    selectAllRef: {
+        current: null
+    },
+    inputRef: {
+        current: null
+    },
+    filterText: '',
+    overlayProps: {}
+});
+export function BaseMultiSelect({ size = 'medium', listBoxProps, selectionMode = 'multiple', selectedKeys, onSelectionChange, placeholder = 'Select', showSingleSectionTitle = false, placement, portalContainer, id, ...props }) {
+    const [filterText, setFilterText] = useState('');
+    const filter = useFilter({
+        sensitivity: 'base'
+    });
+    const listState = useListState({
+        ...props,
+        selectedKeys,
+        selectionMode,
+        onSelectionChange,
+        filter: (nodes)=>filterNodes(nodes, filterText, (value, string)=>filter.contains(value, string))
+    });
+    const inputRef = useRef(null);
+    const buttonRef = useRef(null);
+    const popoverRef = useRef(null);
+    const selectAllRef = useRef(null);
+    const listBoxRef = useRef(null);
+    const overlayState = useOverlayTriggerState({
+        onOpenChange: (isOpen)=>{
+            if (isOpen) {
+                requestAnimationFrame(()=>{
+                    var _inputRef_current;
+                    (_inputRef_current = inputRef.current) === null || _inputRef_current === void 0 ? void 0 : _inputRef_current.focus();
+                });
+            }
+            if (!isOpen) {
+                var _buttonRef_current;
+                (_buttonRef_current = buttonRef.current) === null || _buttonRef_current === void 0 ? void 0 : _buttonRef_current.focus();
+            }
+        }
+    });
+    const { triggerProps, overlayProps } = useOverlayTrigger({
+        type: 'dialog'
+    }, overlayState, buttonRef);
+    const styles = multiSelectStyles({});
+    return React.createElement(MultiSelectContext.Provider, {
+        value: {
+            filterText,
+            size,
+            overlayState,
+            listState,
+            buttonRef,
+            popoverRef,
+            placement,
+            selectAllRef,
+            listBoxRef,
+            inputRef,
+            overlayProps,
+            portalContainer
+        }
+    }, React.createElement("div", {
+        className: styles.root()
+    }, React.createElement(MultiSelectListBoxTrigger, {
+        placeholder: placeholder,
+        selectedKeys: selectedKeys,
+        showSingleSectionTitle: showSingleSectionTitle,
+        triggerProps: triggerProps,
+        id: id
+    }), overlayState.isOpen && React.createElement(MultiSelectDropdown, {
+        setFilterText: setFilterText,
+        ...listBoxProps
+    })));
+}
+export const MultiSelect = memo(BaseMultiSelect);
+export const MultiSelectItem = Item;
+export { Section as MultiSelectSection } from 'react-stately';

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

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

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

@@ -0,0 +1,6 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        root: 'relative flex flex-col gap-1'
+    }
+});

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

@@ -0,0 +1,61 @@
+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 { MultiSelectSize } from './components/multi-select-list-box-trigger/multi-select-list-box-trigger.types.js';
+export type MultiSelectContextProps<T extends object = object> = {
+    size?: MultiSelectSize;
+    overlayState: OverlayTriggerState;
+    listState: ListState<T>;
+    buttonRef: RefObject<HTMLButtonElement>;
+    listBoxRef: RefObject<HTMLUListElement>;
+    popoverRef: RefObject<HTMLDivElement>;
+    selectAllRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement>;
+    filterText: string;
+    overlayProps: DOMProps;
+    placement?: AriaPopoverProps['placement'];
+    portalContainer?: Element;
+};
+export type MultiSelectItemProps<T extends object = object> = {
+    description?: string;
+} & ItemProps<T>;
+export type MultiSelectValue = {
+    textValue?: string;
+    content?: ReactNode;
+    key: Key;
+    description?: string;
+};
+export type MultiSelectProps<T> = {
+    /**
+     * Props for the list box within the multi-select
+     */
+    listBoxProps?: Omit<AriaListBoxOptions<T>, 'state' | 'selectionMode'>;
+    /**
+     * id for the base multi-select container for accessibility/other uses
+     */
+    id?: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder?: string;
+    /**
+     * Manual placement of the dropdown, will flip automatically if there is not enough space
+     * @default bottom
+     */
+    placement?: AriaPopoverProps['placement'];
+    /**
+     * Element where the popover will be rendered, by default it will be into the body
+     */
+    portalContainer?: Element;
+    /**
+     * Whether to show the section for the selected option in the field i.e. "Transaction: Savings" rather than "Savings"
+     * NOTE: Only works with single selectionMode multi-selects
+     */
+    showSingleSectionTitle?: boolean;
+    /**
+     * Size of input
+     * @default medium
+     */
+    size?: MultiSelectSize;
+} & ListProps<T>;

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

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

package/dist/components/multi-select/utils/filter-nodes.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@react-types/shared';
+export declare function filterNodes<T>(nodes: Iterable<Node<T>>, filterText: string, contains: (value: string, search: string) => boolean): Iterable<Node<T>>;

package/dist/components/multi-select/utils/filter-nodes.js

@@ -0,0 +1,25 @@
+export function filterNodes(nodes, filterText, contains) {
+    if (!filterText) return nodes;
+    const arr = Array.from(nodes);
+    return arr.flatMap((node)=>{
+        if (node.type !== 'section') {
+            var _node_textValue;
+            return contains((_node_textValue = node.textValue) !== null && _node_textValue !== void 0 ? _node_textValue : '', filterText) ? [
+                node
+            ] : [];
+        }
+        const childNodesArr = Array.from(node.childNodes || []);
+        const matchedChildren = childNodesArr.filter((child)=>{
+            var _child_textValue;
+            return contains((_child_textValue = child.textValue) !== null && _child_textValue !== void 0 ? _child_textValue : '', filterText);
+        });
+        if (matchedChildren.length === 0) return [];
+        const sectionWithMatches = {
+            ...node,
+            childNodes: matchedChildren
+        };
+        return [
+            sectionWithMatches
+        ];
+    });
+}

package/dist/components/tooltip/components/tooltip-content/tooltip-content.component.d.ts

@@ -1,2 +1,2 @@
 import { TooltipContentProps } from './tooltip-content.types.js';
-export declare function TooltipContent({ children, id }: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TooltipContent({ children, id, position }: TooltipContentProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/tooltip/components/tooltip-content/tooltip-content.component.js

@@ -1,8 +1,10 @@
 import React from 'react';
 import { styles } from './tooltip-content.styles.js';
-export function TooltipContent({ children, id }) {
+export function TooltipContent({ children, id, position }) {
     return children ? React.createElement("span", {
-        className: styles(),
+        className: styles({
+            position
+        }),
         role: "tooltip",
         id: id
     }, children) : null;

package/dist/components/tooltip/components/tooltip-content/tooltip-content.styles.d.ts

@@ -1 +1,16 @@
-export declare const styles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text", TVConfig<V, EV>, {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text", TVConfig<V, EV>, unknown, unknown, undefined>>;
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    position: {
+        top: string;
+        bottom: string;
+    };
+}, undefined, "absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text", TVConfig<V, EV>, {
+    position: {
+        top: string;
+        bottom: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    position: {
+        top: string;
+        bottom: string;
+    };
+}, undefined, "absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text", TVConfig<V, EV>, unknown, unknown, undefined>>;

package/dist/components/tooltip/components/tooltip-content/tooltip-content.styles.js

@@ -1,4 +1,10 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
-    base: 'absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text'
+    base: 'absolute left-1 top-full z-10 mt-2 whitespace-nowrap rounded-sm border border-border bg-background p-0.5 text-text',
+    variants: {
+        position: {
+            top: 'top-auto bottom-full',
+            bottom: 'top-full mt-2 mb-0'
+        }
+    }
 });

package/dist/components/tooltip/components/tooltip-content/tooltip-content.types.d.ts

@@ -2,4 +2,5 @@ import { ReactNode } from 'react';
 export type TooltipContentProps = {
     children?: ReactNode;
     id: string;
+    position?: 'top' | 'bottom';
 };

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

@@ -1,2 +1,2 @@
 import { TooltipProps } from './tooltip.types.js';
-export declare function Tooltip({ children, tooltip, id, className }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ children, disabled, tooltip, id, className, position }: TooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tooltip/tooltip.component.js

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { mergeProps, useHover, useFocusRing } from 'react-aria';
 import { TooltipContent } from './components/tooltip-content/tooltip-content.component.js';
 import { styles } from './tooltip.styles.js';
-export function Tooltip({ children, tooltip, id, className }) {
+export function Tooltip({ children, disabled, tooltip, id, className, position = 'bottom' }) {
     const localId = useId();
     const [isOpen, setIsOpen] = useState(false);
     const tooltipWaitTime = useRef(null);
@@ -27,7 +27,7 @@ export function Tooltip({ children, tooltip, id, className }) {
         }
     }, []);
     useEffect(()=>{
-        setIsOpen(isFocusVisible);
+        setIsOpen(isFocusVisible && !disabled);
     }, [
         isFocusVisible
     ]);
@@ -50,6 +50,7 @@ export function Tooltip({ children, tooltip, id, className }) {
             className
         })
     }, children, isOpen && React.createElement(TooltipContent, {
-        id: id !== null && id !== void 0 ? id : localId
+        id: id !== null && id !== void 0 ? id : localId,
+        position: position
     }, tooltip));
 }

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

@@ -1,7 +1,10 @@
 import { ReactNode } from 'react';
+import { TooltipContentProps } from './components/tooltip-content/tooltip-content.types.js';
 export type TooltipProps = {
     children: ReactNode;
+    disabled?: boolean;
     tooltip: string;
     id?: string;
     className?: string;
+    position?: TooltipContentProps['position'];
 };