@westpac/ui 0.12.0 → 0.14.0

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { Item } from 'react-stately';
 import { type AccordionProps } from './accordion.types.js';
 declare function Accordion<T extends object>({ className, rounded, look, ...props }: AccordionProps<T>, ref: any): import("react/jsx-runtime").JSX.Element;
 declare const _Accordion: {
-    Item: typeof Item;
     displayName: string;
 } & (<T>(props: import("@react-types/accordion").SpectrumAccordionProps<T> & {
+    children?: import("@react-types/shared").CollectionChildren<T> | undefined;
     justify?: boolean | undefined;
     look?: "soft" | "lego" | {
         [x: string]: "soft" | "lego" | undefined;
@@ -17,3 +16,4 @@ declare const _Accordion: {
     ref?: any;
 }) => ReturnType<typeof Accordion>);
 export { _Accordion as Accordion };
+export declare const AccordionItem: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;

package/dist/components/accordion/accordion.component.js

@@ -19,7 +19,7 @@ import { useDOMRef } from '@react-spectrum/utils';
 import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
 import { Item, useTreeState } from 'react-stately';
 import { styles } from './accordion.styles.js';
-import { AccordionItem } from './components/index.js';
+import { AccordionItem as AccordionItemContent } from './components/index.js';
 function Accordion({ className , rounded =true , look ='soft' , ...props }, ref) {
     const finalProps = {
         ...props,
@@ -44,7 +44,7 @@ function Accordion({ className , rounded =true , look ='soft' , ...props }, ref)
         className: "ml-[-1px] mt-[-1px]"
     }, [
         ...state.collection
-    ].map((item)=>React.createElement(AccordionItem, {
+    ].map((item)=>React.createElement(AccordionItemContent, {
             key: item.key,
             item: item,
             state: state,
@@ -53,5 +53,5 @@ function Accordion({ className , rounded =true , look ='soft' , ...props }, ref)
 }
 const _Accordion = forwardRef(Accordion);
 _Accordion.displayName = 'Accordion';
-_Accordion.Item = Item;
 export { _Accordion as Accordion };
+export const AccordionItem = Item;

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

@@ -5,16 +5,23 @@ import { styles } from './accordion.styles.js';
 import { AccordionItemProps } from './components/index.js';
 type Variants = VariantProps<typeof styles>;
 export type AccordionProps<T = any> = SpectrumAccordionProps<T> & {
+    /**
+     * <AccordionItem /> as a collection
+     */
+    children?: SpectrumAccordionProps<T>['children'];
     /**
      * Stretch the tab to fill the whole content
+     * @default false
      */
     justify?: boolean;
     /**
      * The look of the accordion
+     * @default soft
      */
     look?: AccordionItemProps['look'];
     /**
      * Whether the accordion is rounded
+     * @default true
      */
     rounded?: Variants['rounded'];
 } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;

package/dist/components/accordion/components/accordion-item/accordion-item.component.d.ts

@@ -1,5 +1,2 @@
 import { type AccordionItemProps } from './accordion-item.types.js';
 export declare function AccordionItem<T = any>({ className, tag: Tag, look, ...props }: AccordionItemProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace AccordionItem {
-    var displayName: string;
-}

package/dist/components/accordion/components/accordion-item/accordion-item.component.js

@@ -77,4 +77,3 @@ export function AccordionItem({ className , tag: Tag = 'div' , look ='soft' , ..
         className: styles.content()
     }, item.props.children))))));
 }
-AccordionItem.displayName = 'Accordion.Item';

package/dist/components/accordion/components/accordion-item/accordion-item.types.d.ts

@@ -1,9 +1,13 @@
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 import { Node, TreeState } from 'react-stately';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './accordion-item.styles.js';
 type Variants = VariantProps<typeof styles>;
 export type AccordionItemProps<T = any> = {
+    /**
+     * AccordionItem body content
+     */
+    children?: ReactNode;
     /**
      * Node from react-stately
      */

package/dist/components/accordion/index.d.ts

@@ -1,2 +1,2 @@
-export { Accordion } from './accordion.component.js';
+export { Accordion, AccordionItem } from './accordion.component.js';
 export { type AccordionProps } from './accordion.types.js';

package/dist/components/accordion/index.js

@@ -1 +1 @@
-export { Accordion } from './accordion.component.js';
+export { Accordion, AccordionItem } from './accordion.component.js';

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

@@ -1,8 +1,13 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 export type Look = 'info' | 'success' | 'warning' | 'danger' | 'system';
 export type AlertProps = {
+    /**
+     * The alert content
+     */
+    children?: React.ReactNode;
     /**
      * Enable dismissible mode
+     * @default false
      */
     dismissible?: boolean;
     /**
@@ -11,6 +16,7 @@ export type AlertProps = {
     heading?: string;
     /**
      * The alert heading tag is automatically defined, but may be overridden via this prop if required for semantic reasons.
+     * @default h2
      */
     headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
@@ -21,10 +27,12 @@ export type AlertProps = {
     icon?: React.ElementType;
     /**
      * Alert look style
+     * @default info
      */
     look?: Look;
     /**
      * Alert mode
+     * @default box
      */
     mode?: 'box' | 'text';
     /**
@@ -37,6 +45,7 @@ export type AlertProps = {
     open?: boolean;
     /**
      * Tag to render
+     * @default div
      */
     tag?: keyof JSX.IntrinsicElements;
 } & HTMLAttributes<Element>;

package/dist/components/alert/alert.types.js

@@ -1 +1 @@
-export { };
+import React from 'react';

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

@@ -1,6 +1,2 @@
-/// <reference types="react" resolution-mode="require"/>
 import { type AutocompleteProps } from './autocomplete.types.js';
-export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
-export declare namespace Autocomplete {
-    var Item: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
-}
+export declare function Autocomplete<T extends object>({ size, invalid, isDisabled, footer, portalContainer, errorMessage, hintMessage, noOptionsMessage, className, width, loadingState, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;

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

@@ -14,13 +14,29 @@ function _extends() {
     return _extends.apply(this, arguments);
 }
 import * as React from 'react';
-import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
-import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';
-import { ClearIcon } from '../icon/index.js';
-import { ErrorMessage, FormHint, FormLabel } from '../index.js';
+import { useMemo } from 'react';
+import { mergeProps, useButton, useComboBox, useFilter, useFocusRing, useSearchField } from 'react-aria';
+import { useComboBoxState, useSearchFieldState } from 'react-stately';
+import { ClearIcon, SearchIcon } from '../icon/index.js';
+import { ErrorMessage, Hint, Label, ProgressIndicator } from '../index.js';
 import { styles as autocompleteStyles } from './autocomplete.styles.js';
-import { ListBox, Popover } from './components/index.js';
-export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , errorMessage , hintMessage , ...props }) {
+import { AutocompleteListBox, AutocompletePopover } from './components/index.js';
+const STATIC_IS_OPEN_STATE = {
+    isOpen: true,
+    setOpen: ()=>{
+        return;
+    },
+    open: ()=>{
+        return;
+    },
+    close: ()=>{
+        return;
+    },
+    toggle: ()=>{
+        return;
+    }
+};
+export function Autocomplete({ size ='medium' , invalid =false , isDisabled , footer , portalContainer , errorMessage , hintMessage , noOptionsMessage , className , width ='full' , loadingState , ...props }) {
     const { contains  } = useFilter({
         sensitivity: 'base'
     });
@@ -29,6 +45,8 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         ...props,
         defaultFilter: contains
     });
+    const { isFocusVisible , focusProps  } = useFocusRing();
+    const { isFocusVisible: isInputFocusVisible , focusProps: inputFocusProps  } = useFocusRing();
     const inputRef = React.useRef(null);
     const listBoxRef = React.useRef(null);
     const popoverRef = React.useRef(null);
@@ -39,11 +57,13 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         listBoxRef,
         popoverRef
     }, state);
-    const styles = autocompleteStyles({
+    const { clearButton: clearButtonStyle , ...styles } = autocompleteStyles({
+        width,
         isDisabled,
-        isFocused: state.isFocused,
+        isInputFocusVisible,
         size,
-        invalid
+        invalid,
+        isFocusVisible
     });
     const searchProps = {
         label: props.label,
@@ -59,34 +79,75 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
     const clearButtonRef = React.useRef(null);
     const { buttonProps  } = useButton(clearButtonProps, clearButtonRef);
     const outerRef = React.useRef(null);
+    const isNoOptionPopOverOpen = useMemo(()=>{
+        return noOptionsMessage && (!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem || state.collection.size === 0 && searchProps.value.length > 0);
+    }, [
+        state,
+        searchProps,
+        noOptionsMessage
+    ]);
+    const iconSize = useMemo(()=>{
+        switch(size){
+            case 'small':
+            case 'medium':
+                return 'small';
+            default:
+                return 'medium';
+        }
+    }, [
+        size
+    ]);
     return React.createElement("div", {
-        className: styles.base()
-    }, React.createElement(FormLabel, _extends({}, labelProps), props.label), hintMessage && React.createElement(FormHint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
+        className: styles.base({
+            className
+        })
+    }, props.label && React.createElement(Label, _extends({}, labelProps), props.label), hintMessage && React.createElement(Hint, _extends({}, descriptionProps), hintMessage), errorMessage && React.createElement(ErrorMessage, _extends({}, errorMessageProps, {
         message: errorMessage
     })), React.createElement("div", {
         ref: outerRef,
         className: styles.outerWrapper()
-    }, React.createElement("input", _extends({}, inputProps, {
+    }, React.createElement("div", {
+        className: styles.iconWrapper()
+    }, loadingState ? React.createElement(ProgressIndicator, {
+        size: iconSize
+    }) : React.createElement(SearchIcon, {
+        "aria-hidden": true,
+        size: iconSize
+    })), React.createElement("input", _extends({}, mergeProps(inputProps, inputFocusProps), {
         ref: inputRef,
-        className: styles.input()
-    })), React.createElement("button", _extends({}, buttonProps, {
+        className: styles.input(),
+        "aria-live": "polite",
+        "aria-busy": loadingState
+    })), React.createElement("button", _extends({}, mergeProps(buttonProps, focusProps), {
+        onKeyDown: ()=>false,
+        tabIndex: 0,
         ref: clearButtonRef,
         style: {
             visibility: state.inputValue !== '' ? 'visible' : 'hidden'
         },
-        className: styles.clearButton()
+        className: clearButtonStyle()
     }), React.createElement(ClearIcon, {
         "aria-hidden": "true",
         color: "muted",
         size: "small"
-    }))), state.isOpen && React.createElement(Popover, {
+    }))), isNoOptionPopOverOpen && React.createElement(AutocompletePopover, {
+        state: STATIC_IS_OPEN_STATE,
+        isNonModal: true,
+        placement: "bottom start",
+        portalContainer: portalContainer,
+        triggerRef: outerRef
+    }, React.createElement("div", {
+        className: "px-3 py-2"
+    }, noOptionsMessage), footer && React.createElement("div", {
+        className: "border-t border-t-border px-3 py-2"
+    }, footer)), state.isOpen && React.createElement(AutocompletePopover, {
         popoverRef: popoverRef,
         triggerRef: outerRef,
         state: state,
         isNonModal: true,
         placement: "bottom start",
         portalContainer: portalContainer
-    }, React.createElement(ListBox, _extends({}, listBoxProps, {
+    }, React.createElement(AutocompleteListBox, _extends({}, listBoxProps, {
         autoFocus: listBoxProps.autoFocus,
         listBoxRef: listBoxRef,
         state: state
@@ -94,4 +155,3 @@ export function Autocomplete({ size ='medium' , invalid =false , isDisabled , fo
         className: "border-t border-t-border px-3 py-2"
     }, footer)));
 }
-Autocomplete.Item = Item;

package/dist/components/autocomplete/autocomplete.styles.d.ts

@@ -10,15 +10,19 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
+            iconWrapper: string;
         };
         medium: {
             input: string;
+            iconWrapper: string;
         };
         large: {
             input: string;
+            iconWrapper: string;
         };
         xlarge: {
             input: string;
+            iconWrapper: string;
         };
     };
     isDisabled: {
@@ -28,18 +32,91 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    isFocused: {
+    isFocusVisible: {
+        true: {
+            clearButton: string;
+        };
+        false: {};
+    };
+    isInputFocusVisible: {
         true: {
             outerWrapper: string;
         };
         false: {};
     };
+    width: {
+        1: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        2: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        3: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        4: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        5: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        6: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        7: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        8: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        9: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        10: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        20: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        30: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        full: {
+            outerWrapper: string;
+            input: string;
+        };
+    };
 }, {
     base: string;
     label: string;
     outerWrapper: string;
     input: string;
     clearButton: string;
+    iconWrapper: string;
 }, undefined, {
     responsiveVariants: string[];
 }, {
@@ -54,15 +131,19 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         small: {
             input: string;
+            iconWrapper: string;
         };
         medium: {
             input: string;
+            iconWrapper: string;
         };
         large: {
             input: string;
+            iconWrapper: string;
         };
         xlarge: {
             input: string;
+            iconWrapper: string;
         };
     };
     isDisabled: {
@@ -72,16 +153,89 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         };
         false: {};
     };
-    isFocused: {
+    isFocusVisible: {
+        true: {
+            clearButton: string;
+        };
+        false: {};
+    };
+    isInputFocusVisible: {
         true: {
             outerWrapper: string;
         };
         false: {};
     };
+    width: {
+        1: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        2: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        3: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        4: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        5: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        6: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        7: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        8: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        9: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        10: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        20: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        30: {
+            outerWrapper: string;
+            base: string;
+            input: string;
+        };
+        full: {
+            outerWrapper: string;
+            input: string;
+        };
+    };
 }, {
     base: string;
     label: string;
     outerWrapper: string;
     input: string;
     clearButton: string;
+    iconWrapper: string;
 }>;

package/dist/components/autocomplete/autocomplete.styles.js

@@ -1,11 +1,12 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative flex flex-col',
+        base: 'relative flex flex-1 flex-col',
         label: 'block text-left text-sm font-medium text-text',
-        outerWrapper: 'form-control relative flex w-full flex-row items-center overflow-hidden pr-2 disabled:form-control-disabled',
-        input: 'w-full appearance-none bg-[transparent] outline-none',
-        clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60'
+        outerWrapper: 'form-control relative flex flex-1 flex-row items-stretch overflow-hidden pr-2 disabled:form-control-disabled group-[.input-group-after]:rounded-r-none group-[.input-group-before]:rounded-l-none group-[.input-group-after]:border-r-0 group-[.input-group-before]:border-l-0',
+        input: 'appearance-none bg-[transparent] outline-none',
+        clearButton: 'flex cursor-default items-center justify-center text-text-50 hover:text-border-60',
+        iconWrapper: 'flex flex-col justify-center'
     },
     variants: {
         invalid: {
@@ -18,16 +19,20 @@ export const styles = tv({
         },
         size: {
             small: {
-                input: 'form-control-small'
+                input: 'form-control-small',
+                iconWrapper: 'pl-1'
             },
             medium: {
-                input: 'form-control-medium'
+                input: 'form-control-medium',
+                iconWrapper: 'pl-1.5'
             },
             large: {
-                input: 'form-control-large'
+                input: 'form-control-large',
+                iconWrapper: 'pl-1.5'
             },
             xlarge: {
-                input: 'form-control-xlarge'
+                input: 'form-control-xlarge',
+                iconWrapper: 'pl-2'
             }
         },
         isDisabled: {
@@ -37,11 +42,83 @@ export const styles = tv({
             },
             false: {}
         },
-        isFocused: {
+        isFocusVisible: {
+            true: {
+                clearButton: 'focus-outline'
+            },
+            false: {}
+        },
+        isInputFocusVisible: {
             true: {
                 outerWrapper: 'focus-outline'
             },
             false: {}
+        },
+        width: {
+            1: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[1.81ex]'
+            },
+            2: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[3.62ex]'
+            },
+            3: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[5.43ex]'
+            },
+            4: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[7.24ex]'
+            },
+            5: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[9.05ex]'
+            },
+            6: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[10.86ex]'
+            },
+            7: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[12.67ex]'
+            },
+            8: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[14.48ex]'
+            },
+            9: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[16.29ex]'
+            },
+            10: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[18.1ex]'
+            },
+            20: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[36.2ex]'
+            },
+            30: {
+                outerWrapper: 'w-auto',
+                base: 'items-start',
+                input: 'box-content w-[54.3ex]'
+            },
+            full: {
+                outerWrapper: 'w-full',
+                input: 'w-full'
+            }
         }
     }
 }, {