@westpac/ui 0.53.2 → 0.55.0

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

@@ -5,7 +5,7 @@ export const styles = tv({
         itemHeader: 'typography-body-9 flex w-full flex-1 items-center justify-between px-3 py-2 group-first:border-t-0',
         headerTitleWrapper: 'flex-1 pr-2 text-left',
         indicator: 'size-3 rotate-90',
-        content: '[&_:focus-visible]:focus-outline',
+        content: 'bg-white [&_:focus-visible]:focus-outline',
         motionContent: ''
     },
     variants: {
@@ -88,6 +88,14 @@ export const styles = tv({
             rounded: true,
             className: 'group-last:rounded-none'
         },
+        {
+            slots: [
+                'content'
+            ],
+            isOpen: true,
+            rounded: true,
+            className: 'group-last:rounded-b'
+        },
         {
             slots: [
                 'content'

package/dist/components/autocomplete/components/autocomplete-list-box/autocomplete-list-box.component.js

@@ -8,7 +8,7 @@ export function AutocompleteListBox(props) {
     return React.createElement("ul", {
         ...listBoxProps,
         ref: listBoxRef,
-        className: "max-h-[400px] w-full outline-none"
+        className: "max-h-[400px] w-full overflow-auto outline-none"
     }, [
         ...state.collection
     ].map((item)=>item.type === 'section' ? React.createElement(AutocompleteListBoxSection, {

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

@@ -28,7 +28,7 @@ export function AutocompletePopover(props) {
             width: width ? `${width}px` : undefined
         },
         ref: popoverRef,
-        className: clsx('z-10 mt-1 max-h-[400px] overflow-auto rounded border border-border bg-white shadow-lg', className)
+        className: clsx('z-10 mt-1 max-h-[400px] rounded border border-border bg-white shadow-lg', className)
     }, !isNonModal && React.createElement(DismissButton, {
         onDismiss: ()=>state.close()
     }), children, React.createElement(DismissButton, {

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

@@ -16,6 +16,7 @@ export declare const Button: React.ForwardRefExoticComponent<{
     look?: "link" | "primary" | "hero" | "faint" | "unstyled" | {
         [x: string]: "link" | "primary" | "hero" | "faint" | "unstyled" | undefined;
     } | undefined;
+    removeLinkPadding?: boolean;
     size?: "small" | "xlarge" | "medium" | "large" | {
         [x: string]: "small" | "xlarge" | "medium" | "large" | undefined;
     } | undefined;

package/dist/components/button/button.component.js

@@ -3,7 +3,7 @@ import React, { forwardRef, useMemo } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { styles as buttonStyles } from './button.styles.js';
 import { getIconSize } from './button.utils.js';
-function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, ...props }, ref) {
+function BaseButton({ className, size = 'medium', look = 'hero', soft, block = false, justify, tag: Tag = 'button', iconBefore: IconBefore, iconAfter: IconAfter, iconLook, iconColor, iconSize, children, removeLinkPadding, ...props }, ref) {
     const { isFocusVisible, focusProps } = useFocusRing();
     const btnIconSize = useMemo(()=>iconSize || getIconSize(size), [
         iconSize,
@@ -16,7 +16,8 @@ function BaseButton({ className, size = 'medium', look = 'hero', soft, block = f
         block,
         justify,
         isFocusVisible,
-        hasChildren: !!children
+        hasChildren: !!children,
+        removeLinkPadding
     });
     return React.createElement(Tag, {
         ref: ref,

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

@@ -62,6 +62,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    removeLinkPadding: {
+        true: string;
+    };
 }, {
     base: string;
     iconBefore: string;
@@ -131,6 +134,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    removeLinkPadding: {
+        true: string;
+    };
 }, {
     base: string;
     iconBefore: string;
@@ -198,6 +204,9 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    removeLinkPadding: {
+        true: string;
+    };
 }, {
     base: string;
     iconBefore: string;

package/dist/components/button/button.styles.js

@@ -33,7 +33,7 @@ export const styles = tv({
                 base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white'
             },
             link: {
-                base: 'px-0 text-link underline'
+                base: 'text-link underline'
             },
             unstyled: {
                 base: 'p-0 text-left'
@@ -67,6 +67,9 @@ export const styles = tv({
             false: {
                 base: 'outline-none'
             }
+        },
+        removeLinkPadding: {
+            true: ''
         }
     },
     compoundSlots: [
@@ -94,6 +97,14 @@ export const styles = tv({
             soft: true,
             className: 'hover:bg-light active:bg-light'
         },
+        {
+            slots: [
+                'base'
+            ],
+            look: 'link',
+            removeLinkPadding: true,
+            className: 'px-0'
+        },
         {
             slots: [
                 'iconBefore'

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

@@ -49,6 +49,11 @@ export type ButtonProps = {
      * @default hero
      */
     look?: Variants['look'];
+    /**
+     * Removes horizontal padding from the 'link' look button
+     * @default false
+     */
+    removeLinkPadding?: boolean;
     /**
      * Size of the button
      * @default medium

package/dist/components/button-dropdown/button-dropdown.component.d.ts

@@ -1,2 +1,2 @@
 import { type ButtonDropdownProps } from './button-dropdown.types.js';
-export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look, soft, block, dropDownIcon: Icon, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function ButtonDropdown({ className, dropdownSize, iconBefore: IconBefore, open, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look, soft, block, dropDownIcon: Icon, placement, shouldFlip, }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button-dropdown/button-dropdown.component.js

@@ -6,7 +6,7 @@ import { Button } from '../button/index.js';
 import { DropDownIcon } from '../icon/index.js';
 import { styles as buttonDropdownStyles } from './button-dropdown.styles.js';
 import { ButtonDropdownPanel } from './components/button-dropdown-panel/button-dropdown-panel.component.js';
-export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look = 'hero', soft = false, block = false, dropDownIcon: Icon = DropDownIcon, shouldFlip }) {
+export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore: IconBefore, open = false, text, children, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelBy, look = 'hero', soft = false, block = false, dropDownIcon: Icon = DropDownIcon, placement = 'bottom start', shouldFlip }) {
     const ref = useRef(null);
     const panelId = useId();
     const styles = buttonDropdownStyles({
@@ -54,7 +54,7 @@ export function ButtonDropdown({ className, dropdownSize = 'medium', iconBefore:
         className: styles.panel({
             className
         }),
-        placement: "bottom start",
+        placement: placement,
         triggerRef: ref,
         state: state,
         block: block,

package/dist/components/button-dropdown/button-dropdown.types.d.ts

@@ -1,4 +1,5 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { Placement } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 import { ButtonProps } from '../button/index.js';
 import { IconProps } from '../icon/icon.types.js';
@@ -22,6 +23,10 @@ export type ButtonDropdownProps = {
      * State of whether the Popover is open
      */
     open?: boolean;
+    /**
+     * placement of the popover
+     */
+    placement?: Placement;
     /**
      * Soft look button
      */

package/dist/components/button-group/button-group.component.js

@@ -11,6 +11,7 @@ export const ButtonGroupContext = createContext({
     size: 'medium',
     state: {
         name: '',
+        defaultSelectedValue: null,
         isDisabled: false,
         isReadOnly: false,
         isRequired: false,

package/dist/components/checkbox-group/checkbox-group.component.js

@@ -11,6 +11,7 @@ export const CheckboxGroupContext = createContext({
     orientation: 'vertical',
     size: 'medium',
     state: {
+        defaultValue: [],
         value: [],
         isDisabled: false,
         isReadOnly: false,

package/dist/components/header/header.component.js

@@ -67,6 +67,7 @@ export function Header({ anchorTarget, brand, className, children, disableLogoLi
             "aria-label": logoAssistiveText,
             className: styles.largeLogo()
         }));
+    const defaultAssistiveText = leftIcon === 'arrow' ? 'Back' : 'Menu';
     return React.createElement("header", {
         className: styles.base({
             className
@@ -86,7 +87,7 @@ export function Header({ anchorTarget, brand, className, children, disableLogoLi
         iconAfter: ButtonIcon,
         iconSize: leftIcon === 'arrow' ? 'medium' : 'small',
         onClick: leftOnClick,
-        "aria-label": leftAssistiveText,
+        "aria-label": leftAssistiveText !== null && leftAssistiveText !== void 0 ? leftAssistiveText : defaultAssistiveText,
         className: styles.leftButton(),
         iconColor: "text"
     })), disableLogoLink ? React.createElement("div", {

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

@@ -29,7 +29,8 @@ export type HeaderProps = {
      */
     isScrolled?: boolean;
     /**
-     * Visually hidden text for left button
+     * Aria-label for the arrow/hamburger button
+     * @default leftIcon === 'arrow' ? 'Back' : 'Menu'
      */
     leftAssistiveText?: string;
     /**

package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.d.ts

@@ -2,4 +2,4 @@ import { type ModalBackdropProps } from './modal-backdrop.types.js';
 /**
  * @private
  */
-export declare function ModalBackdrop({ zIndex, portalContainer, size, ...props }: ModalBackdropProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ModalBackdrop({ zIndex, portalContainer, size, compact, ...props }: ModalBackdropProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/modal/components/modal-backdrop/modal-backdrop.component.js

@@ -2,12 +2,12 @@
 import React, { useMemo, useRef } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 import { styles as backdropStyles } from './modal-backdrop.styles.js';
-export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }) {
+export function ModalBackdrop({ zIndex = 100, portalContainer, size, compact, ...props }) {
     const { children, state, className } = props;
     const ref = useRef(null);
     const styles = backdropStyles({
-        fullscreen: size === 'full',
-        fluid: size === 'fluid'
+        size,
+        compact: compact && (size === 'md' || size === 'lg')
     });
     const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
     const brandContainer = useMemo(()=>{

package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.d.ts

@@ -1,46 +1,65 @@
 export declare const styles: import("tailwind-variants").TVReturnType<{
-    fullscreen: {
-        true: {
-            modal: string;
+    size: {
+        fluid: {
             base: string;
         };
-    };
-    fluid: {
-        true: {
+        full: {
             modal: string;
+            base: string;
         };
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    compact: {
+        true: string;
+        false: string;
     };
 }, {
     base: string;
     modal: string;
-}, undefined, TVConfig<V, EV>, {
-    fullscreen: {
-        true: {
-            modal: string;
+}, undefined, {
+    responsiveVariants: string[];
+}, {
+    size: {
+        fluid: {
             base: string;
         };
-    };
-    fluid: {
-        true: {
+        full: {
             modal: string;
+            base: string;
         };
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    compact: {
+        true: string;
+        false: string;
     };
 }, {
     base: string;
     modal: string;
 }, import("tailwind-variants").TVReturnType<{
-    fullscreen: {
-        true: {
-            modal: string;
+    size: {
+        fluid: {
             base: string;
         };
-    };
-    fluid: {
-        true: {
+        full: {
             modal: string;
+            base: string;
         };
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    compact: {
+        true: string;
+        false: string;
     };
 }, {
     base: string;
     modal: string;
-}, undefined, TVConfig<V, EV>, unknown, unknown, undefined>>;
+}, undefined, {
+    responsiveVariants: string[];
+}, unknown, unknown, undefined>>;

package/dist/components/modal/components/modal-backdrop/modal-backdrop.styles.js

@@ -1,20 +1,61 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'fixed inset-0 flex animate-fadeIn items-center justify-center overflow-y-auto bg-black/50 p-2',
-        modal: 'relative top-3 z-10 h-fit w-full animate-fadeInDown'
+        base: 'fixed inset-0 flex animate-fadeIn justify-center bg-black/50 px-4',
+        modal: 'relative top-[5vh] z-10 size-fit max-w-full animate-fadeInDown'
     },
     variants: {
-        fullscreen: {
-            true: {
-                modal: 'top-0 flex flex-1 flex-col',
+        size: {
+            fluid: {
+                base: 'px-4'
+            },
+            full: {
+                modal: '!top-0 flex w-full flex-1 flex-col p-0',
                 base: 'flex flex-col p-0'
-            }
+            },
+            lg: '',
+            md: '',
+            sm: ''
         },
-        fluid: {
-            true: {
-                modal: 'px-2'
-            }
+        compact: {
+            true: '',
+            false: ''
         }
-    }
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'sm',
+                'md',
+                'lg',
+                'fluid'
+            ],
+            compact: false,
+            className: 'overflow-y-auto'
+        },
+        {
+            slots: [
+                'modal'
+            ],
+            size: [
+                'sm',
+                'md',
+                'lg',
+                'fluid'
+            ],
+            compact: false,
+            className: 'pb-[5vh]'
+        }
+    ]
+}, {
+    responsiveVariants: [
+        'xsl',
+        'sm',
+        'md',
+        'lg',
+        'xl'
+    ]
 });

package/dist/components/modal/components/modal-backdrop/modal-backdrop.types.d.ts

@@ -10,6 +10,11 @@ export type ModalBackdropProps = {
      * Clasname
      */
     className?: string;
+    /**
+     * For medium and large sizes.
+     * Keeps entire modal in view by adding internal scrolling.
+     */
+    compact?: boolean;
     /**
      * Element where backdrop will be placed
      */

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.js

@@ -1,15 +1,21 @@
+'use client';
 import React from 'react';
 import { useModalDialogContext } from '../../modal-dialog.component.js';
 import { styles as modalBodyStyles } from './modal-dialog-body.styles.js';
 export function ModalDialogBody({ className, children, ...props }) {
-    const { size } = useModalDialogContext();
+    const { size, scrollingRef, canScroll, compact, footerPresent, scrollAtBottom } = useModalDialogContext();
     const styles = modalBodyStyles({
-        size
+        size,
+        canScroll,
+        scrollAtBottom,
+        compact,
+        footerPresent
     });
     return React.createElement("div", {
         className: styles.base({
             className
         }),
+        ref: scrollingRef,
         ...props
     }, children);
 }

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.d.ts

@@ -16,6 +16,24 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    canScroll: {
+        true: {
+            base: string;
+        };
+    };
+    scrollAtBottom: {
+        true: {
+            base: string;
+        };
+    };
+    compact: {
+        true: string;
+        false: string;
+    };
+    footerPresent: {
+        true: string;
+        false: string;
+    };
 }, {
     base: string;
 }, undefined, {
@@ -38,6 +56,24 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    canScroll: {
+        true: {
+            base: string;
+        };
+    };
+    scrollAtBottom: {
+        true: {
+            base: string;
+        };
+    };
+    compact: {
+        true: string;
+        false: string;
+    };
+    footerPresent: {
+        true: string;
+        false: string;
+    };
 }, {
     base: string;
 }, import("tailwind-variants").TVReturnType<{
@@ -58,6 +94,24 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    canScroll: {
+        true: {
+            base: string;
+        };
+    };
+    scrollAtBottom: {
+        true: {
+            base: string;
+        };
+    };
+    compact: {
+        true: string;
+        false: string;
+    };
+    footerPresent: {
+        true: string;
+        false: string;
+    };
 }, {
     base: string;
 }, undefined, {

package/dist/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.js

@@ -1,7 +1,7 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'flex-1 overflow-auto'
+        base: 'flex-1 transition-shadow delay-0 duration-200 ease-[ease]'
     },
     variants: {
         size: {
@@ -15,13 +15,73 @@ export const styles = tv({
                 base: 'px-7 pb-7'
             },
             sm: {
-                base: 'px-5 pb-7'
+                base: 'px-5 pb-5'
             },
             fluid: {
-                base: 'px-5 pb-7'
+                base: 'px-5 pb-5'
             }
+        },
+        canScroll: {
+            true: {
+                base: 'shadow-[0px_-4px_5px_-2px_inset] shadow-black/30'
+            }
+        },
+        scrollAtBottom: {
+            true: {
+                base: 'shadow-[0_0_0_0_inset]'
+            }
+        },
+        compact: {
+            true: '',
+            false: ''
+        },
+        footerPresent: {
+            true: '',
+            false: ''
         }
-    }
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'lg'
+            ],
+            compact: true,
+            className: 'overflow-y-auto px-5 pb-3'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'md'
+            ],
+            compact: true,
+            className: 'overflow-y-auto px-5 pb-2'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'md'
+            ],
+            footerPresent: true,
+            className: 'pb-5'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'lg'
+            ],
+            footerPresent: true,
+            className: 'pb-6'
+        }
+    ]
 }, {
     responsiveVariants: [
         'xsl',

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.js

@@ -1,13 +1,19 @@
 'use client';
-import React from 'react';
+import React, { useEffect } from 'react';
 import { Button } from '../../../../../button/index.js';
 import { useModalDialogContext } from '../../modal-dialog.component.js';
 import { styles as modalFooterStyles } from './modal-dialog-footer.styles.js';
 export function ModalDialogFooter({ className, primaryLabel, primaryOnClick, secondaryLabel, secondaryOnClick, ...props }) {
-    const { size } = useModalDialogContext();
+    const { size, compact, setFooterPresent } = useModalDialogContext();
     const styles = modalFooterStyles({
-        size
+        size,
+        compact
     });
+    useEffect(()=>{
+        setFooterPresent === null || setFooterPresent === void 0 ? void 0 : setFooterPresent(true);
+    }, [
+        setFooterPresent
+    ]);
     return React.createElement("div", {
         className: styles.base({
             className

package/dist/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.styles.d.ts

@@ -16,6 +16,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    compact: {
+        true: string;
+        false: string;
+    };
 }, {
     base: string;
     primaryBtn: string;
@@ -40,6 +44,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    compact: {
+        true: string;
+        false: string;
+    };
 }, {
     base: string;
     primaryBtn: string;
@@ -62,6 +70,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             base: string;
         };
     };
+    compact: {
+        true: string;
+        false: string;
+    };
 }, {
     base: string;
     primaryBtn: string;