@westpac/ui 1.13.1 → 1.15.1

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

@@ -0,0 +1,5 @@
+import { type FlyoutBackdropProps } from './flyout-backdrop.types.js';
+/**
+ * @private
+ */
+export declare function FlyoutBackdrop({ children, className, isDismissable, portalContainer, state, zIndex, ...props }: FlyoutBackdropProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,39 @@
+'use client';
+import { useExitAnimation } from '@react-aria/utils';
+import React, { useMemo, useRef } from 'react';
+import { Overlay, useModalOverlay } from 'react-aria';
+import { styles as backdropStyles } from './flyout-backdrop.styles.js';
+export function FlyoutBackdrop({ children, className, isDismissable = true, portalContainer, state, zIndex = 100, ...props }) {
+    const ref = useRef(null);
+    const isExiting = useExitAnimation(ref, state.isOpen);
+    const styles = backdropStyles({
+        isOpen: state.isOpen
+    });
+    const { modalProps, underlayProps } = useModalOverlay({
+        isDismissable,
+        ...props
+    }, state, ref);
+    const brandContainer = useMemo(()=>{
+        if (typeof window !== 'undefined') {
+            return document.querySelector('[data-brand]') || document.querySelector('[class^="theme-"], [class*=" theme-"]') || document.body;
+        }
+    }, []);
+    if (!state.isOpen && !isExiting) {
+        return null;
+    }
+    return React.createElement(Overlay, {
+        isExiting: isExiting,
+        portalContainer: portalContainer || brandContainer
+    }, React.createElement("div", {
+        className: styles.base({
+            className
+        }),
+        style: {
+            zIndex
+        },
+        ...underlayProps
+    }, children({
+        flyoutRef: ref,
+        modalProps
+    })));
+}

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

@@ -0,0 +1,34 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isOpen: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, {
+    isOpen: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{
+    isOpen: {
+        true: {
+            base: string;
+        };
+        false: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;

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

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'fixed inset-0'
+    },
+    variants: {
+        isOpen: {
+            true: {
+                base: 'animate-fadeIn bg-black/65'
+            },
+            false: {
+                base: 'pointer-events-none'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,30 @@
+import { type ReactNode, type RefObject } from 'react';
+import { type AriaModalOverlayProps, type useModalOverlay } from 'react-aria';
+import { type OverlayTriggerState } from 'react-stately';
+export type FlyoutBackdropRenderProps = {
+    flyoutRef: RefObject<HTMLDivElement>;
+    modalProps: ReturnType<typeof useModalOverlay>['modalProps'];
+};
+export type FlyoutBackdropProps = {
+    /**
+     * Function that renders the flyout dialog within the backdrop
+     */
+    children: (props: FlyoutBackdropRenderProps) => ReactNode;
+    /**
+     * Additional class name for the backdrop
+     */
+    className?: string;
+    /**
+     * Element where the backdrop will be rendered
+     */
+    portalContainer?: Element;
+    /**
+     * The flyout opening and closing state
+     */
+    state: OverlayTriggerState;
+    /**
+     * z-index of the backdrop
+     * @default 100
+     */
+    zIndex?: number;
+} & AriaModalOverlayProps;

package/dist/components/flyout/components/flyout-backdrop/flyout-backdrop.types.js

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

package/dist/components/flyout/components/flyout-backdrop/index.d.ts

@@ -0,0 +1,2 @@
+export { FlyoutBackdrop } from './flyout-backdrop.component.js';
+export { type FlyoutBackdropProps, type FlyoutBackdropRenderProps } from './flyout-backdrop.types.js';

package/dist/components/flyout/components/flyout-backdrop/index.js

@@ -0,0 +1 @@
+export { FlyoutBackdrop } from './flyout-backdrop.component.js';

package/dist/components/flyout/components/flyout-dialog/flyout-dialog.component.d.ts

@@ -0,0 +1,5 @@
+import { type FlyoutDialogInternalProps } from './flyout-dialog.types.js';
+/**
+ * @private
+ */
+export declare function FlyoutDialog({ children, className, closeAssistiveText, flyoutRef, heading, headingTag: HeadingTag, isOpen, modalProps, onClose, position, ...props }: FlyoutDialogInternalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/flyout/components/flyout-dialog/flyout-dialog.component.js

@@ -0,0 +1,67 @@
+'use client';
+import { useEnterAnimation } from '@react-aria/utils';
+import { clsx } from 'clsx';
+import React, { useEffect, useRef, useState } from 'react';
+import { mergeProps, useDialog } from 'react-aria';
+import { Button } from '../../../button/index.js';
+import { CloseIcon } from '../../../icon/index.js';
+import { styles as dialogStyles } from './flyout-dialog.styles.js';
+export function FlyoutDialog({ children, className, closeAssistiveText = 'Close flyout', flyoutRef, heading, headingTag: HeadingTag = 'h2', isOpen, modalProps, onClose, position = 'right', ...props }) {
+    const isEntering = useEnterAnimation(flyoutRef);
+    const styles = dialogStyles({
+        isEntering,
+        isOpen,
+        position
+    });
+    const { dialogProps, titleProps } = useDialog(props, flyoutRef);
+    const [scrolled, setScrolled] = useState(false);
+    const listRef = useRef(null);
+    useEffect(()=>{
+        var _listRef_current;
+        const element = listRef.current;
+        if (!element) {
+            return;
+        }
+        const listener = ()=>{
+            var _listRef_current;
+            const y = ((_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.scrollTop) || 0;
+            setScrolled(y > 0);
+        };
+        listRef === null || listRef === void 0 ? void 0 : (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.addEventListener('scroll', listener);
+        return ()=>{
+            var _listRef_current;
+            listRef === null || listRef === void 0 ? void 0 : (_listRef_current = listRef.current) === null || _listRef_current === void 0 ? void 0 : _listRef_current.removeEventListener('scroll', listener);
+        };
+    }, []);
+    return React.createElement("div", {
+        ...mergeProps(modalProps, dialogProps, props),
+        "aria-hidden": !isOpen || undefined,
+        className: styles.base({
+            className
+        }),
+        ref: flyoutRef
+    }, React.createElement("div", {
+        className: styles.content()
+    }, React.createElement("div", {
+        className: clsx(styles.header(), {
+            'shadow-[0_2px_5px_rgba(0,0,0,0.3)]': scrolled
+        })
+    }, heading && React.createElement(HeadingTag, {
+        ...titleProps,
+        className: styles.heading()
+    }, heading), onClose && React.createElement(Button, {
+        "aria-label": closeAssistiveText,
+        className: styles.button(),
+        iconAfter: ()=>React.createElement(CloseIcon, {
+                color: "primary",
+                size: "medium",
+                "aria-hidden": true
+            }),
+        look: "link",
+        onClick: onClose,
+        type: "button"
+    })), React.createElement("div", {
+        className: styles.body(),
+        ref: listRef
+    }, children)));
+}

package/dist/components/flyout/components/flyout-dialog/flyout-dialog.styles.d.ts

@@ -0,0 +1,82 @@
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    isEntering: {
+        true: {};
+    };
+    isOpen: {
+        true: {
+            base: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    button: string;
+    content: string;
+    header: string;
+    heading: string;
+}, undefined, {
+    isEntering: {
+        true: {};
+    };
+    isOpen: {
+        true: {
+            base: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    button: string;
+    content: string;
+    header: string;
+    heading: string;
+}, import("tailwind-variants").TVReturnType<{
+    isEntering: {
+        true: {};
+    };
+    isOpen: {
+        true: {
+            base: string;
+        };
+        false: {
+            content: string;
+        };
+    };
+    position: {
+        left: {
+            base: string;
+        };
+        right: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    button: string;
+    content: string;
+    header: string;
+    heading: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/components/flyout/components/flyout-dialog/flyout-dialog.styles.js

@@ -0,0 +1,66 @@
+import { tv } from 'tailwind-variants';
+export const styles = tv({
+    slots: {
+        base: 'fixed inset-y-0 flex w-50 flex-col bg-background-white transition-transform duration-500 ease-[cubic-bezier(0.23,1,0.32,1)]',
+        body: 'min-h-0 flex-1 overflow-auto',
+        button: 'ml-auto shrink-0',
+        content: 'flex h-full flex-col',
+        header: 'flex h-9 w-full shrink-0 items-center pl-2',
+        heading: 'min-w-0 typography-body-10 font-bold text-text-body'
+    },
+    variants: {
+        isEntering: {
+            true: {}
+        },
+        isOpen: {
+            true: {
+                base: 'translate-x-0'
+            },
+            false: {
+                content: 'hidden'
+            }
+        },
+        position: {
+            left: {
+                base: 'left-0 border-r border-border-muted-soft'
+            },
+            right: {
+                base: 'right-0 border-l border-border-muted-soft'
+            }
+        }
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'base'
+            ],
+            isOpen: false,
+            position: 'left',
+            className: '-translate-x-full'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            isOpen: false,
+            position: 'right',
+            className: 'translate-x-full'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            isEntering: true,
+            position: 'left',
+            className: '-translate-x-full'
+        },
+        {
+            slots: [
+                'base'
+            ],
+            isEntering: true,
+            position: 'right',
+            className: 'translate-x-full'
+        }
+    ]
+});

package/dist/components/flyout/components/flyout-dialog/flyout-dialog.types.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from 'react';
+import { type AriaDialogProps, type useModalOverlay } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+import { styles } from './flyout-dialog.styles.js';
+type Variants = VariantProps<typeof styles>;
+export type FlyoutDialogProps = {
+    /**
+     * Flyout content
+     */
+    children?: ReactNode;
+    /**
+     * Assistive text for the close button
+     * @default Close flyout
+     */
+    closeAssistiveText?: string;
+    /**
+     * The heading of the flyout
+     */
+    heading?: ReactNode;
+    /**
+     * The flyout heading tag may be overridden for semantic reasons
+     * @default h2
+     */
+    headingTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Called when the close button is pressed
+     */
+    onClose?: () => void;
+    /**
+     * Side of the page from which the flyout opens
+     * @default right
+     */
+    position?: Variants['position'];
+} & AriaDialogProps & HTMLAttributes<HTMLDivElement>;
+export type FlyoutDialogInternalProps = FlyoutDialogProps & {
+    flyoutRef: RefObject<HTMLDivElement>;
+    isOpen: boolean;
+    modalProps: ReturnType<typeof useModalOverlay>['modalProps'];
+};
+export {};

package/dist/components/flyout/components/flyout-dialog/flyout-dialog.types.js

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

package/dist/components/flyout/components/flyout-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export { FlyoutDialog } from './flyout-dialog.component.js';
+export { type FlyoutDialogProps } from './flyout-dialog.types.js';

package/dist/components/flyout/components/flyout-dialog/index.js

@@ -0,0 +1 @@
+export { FlyoutDialog } from './flyout-dialog.component.js';

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

@@ -0,0 +1,2 @@
+export * from './flyout-backdrop/index.js';
+export * from './flyout-dialog/index.js';

package/dist/components/flyout/components/index.js

@@ -0,0 +1,2 @@
+export * from './flyout-backdrop/index.js';
+export * from './flyout-dialog/index.js';

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

@@ -0,0 +1,2 @@
+import { type FlyoutProps } from './flyout.types.js';
+export declare function Flyout({ backdropClassName, children, className, closeAssistiveText, heading, headingTag, isDismissable, isKeyboardDismissDisabled, portalContainer, position, shouldCloseOnInteractOutside, state, zIndex, ...props }: FlyoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/flyout/flyout.component.js

@@ -0,0 +1,26 @@
+'use client';
+import React from 'react';
+import { FlyoutBackdrop, FlyoutDialog } from './components/index.js';
+export function Flyout({ backdropClassName, children, className, closeAssistiveText, heading, headingTag, isDismissable = true, isKeyboardDismissDisabled, portalContainer, position = 'right', shouldCloseOnInteractOutside, state, zIndex, ...props }) {
+    return React.createElement(FlyoutBackdrop, {
+        className: backdropClassName,
+        isDismissable: isDismissable,
+        isKeyboardDismissDisabled: isKeyboardDismissDisabled,
+        portalContainer: portalContainer,
+        shouldCloseOnInteractOutside: shouldCloseOnInteractOutside,
+        state: state,
+        zIndex: zIndex
+    }, ({ flyoutRef, modalProps })=>React.createElement(FlyoutDialog, {
+            ...props,
+            className: className,
+            closeAssistiveText: closeAssistiveText,
+            flyoutRef: flyoutRef,
+            heading: heading,
+            headingTag: headingTag,
+            isOpen: state.isOpen,
+            modalProps: modalProps,
+            onClose: isDismissable ? ()=>state.close() : undefined,
+            position: position,
+            key: position
+        }, children));
+}

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

@@ -0,0 +1,7 @@
+import { type FlyoutBackdropProps, type FlyoutDialogProps } from './components/index.js';
+export type FlyoutProps = Omit<FlyoutBackdropProps, 'children' | 'className'> & Omit<FlyoutDialogProps, 'onClose'> & {
+    /**
+     * Additional class name for the backdrop
+     */
+    backdropClassName?: string;
+};

package/dist/components/flyout/flyout.types.js

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

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

@@ -0,0 +1,2 @@
+export { Flyout } from './flyout.component.js';
+export { type FlyoutProps } from './flyout.types.js';

package/dist/components/flyout/index.js

@@ -0,0 +1 @@
+export { Flyout } from './flyout.component.js';

package/dist/components/index.d.ts

@@ -47,3 +47,4 @@ export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
 export * from './multi-select/index.js';
+export * from './flyout/index.js';

package/dist/components/index.js

@@ -47,3 +47,4 @@ export * from './progress-indicator/index.js';
 export * from './header/index.js';
 export * from './footer/index.js';
 export * from './multi-select/index.js';
+export * from './flyout/index.js';

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

@@ -1,5 +1,6 @@
 'use client';
 import React, { Children, cloneElement, isValidElement, useCallback, useId, useMemo } from 'react';
+import { twMerge } from 'tailwind-merge';
 import { useBreakpoint } from '../../hook/breakpoints.hook.js';
 import { resolveResponsiveVariant } from '../../utils/breakpoint.util.js';
 import { ErrorMessage, Hint, Label } from '../index.js';
@@ -81,7 +82,7 @@ export function InputGroup({ label, hideLabel, size = 'medium', hint, errorMessa
                     'aria-labelledby': ariaLabelledBy,
                     'aria-describedby': ariaDescribedBy || ariaDescribedByValue,
                     'aria-label': ariaLabel,
-                    className: 'focus:z-10',
+                    className: twMerge('focus:z-10', child.props.className),
                     ...resolvedWidth !== 'full' ? {
                         width: resolvedWidth
                     } : {}

package/dist/components/pass-code/pass-code.component.js

@@ -47,6 +47,9 @@ export const PassCode = forwardRef(({ length, value, onChange, onComplete, onPas
         if (index + validData.length < length) {
             var _inputRefs_current_;
             (_inputRefs_current_ = inputRefs.current[index + validData.length]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+        } else {
+            var _inputRefs_current_1;
+            (_inputRefs_current_1 = inputRefs.current[index + validData.length - 1]) === null || _inputRefs_current_1 === void 0 ? void 0 : _inputRefs_current_1.focus();
         }
         if (newPasscode.filter((passcode)=>!passcode).length === 0 && onComplete) {
             onComplete(newPasscode.join(''));
@@ -80,6 +83,13 @@ export const PassCode = forwardRef(({ length, value, onChange, onComplete, onPas
         } else {
             setInternalPasscode(newPasscode);
         }
+        if (index + validData.length < length) {
+            var _inputRefs_current_;
+            (_inputRefs_current_ = inputRefs.current[index + validData.length]) === null || _inputRefs_current_ === void 0 ? void 0 : _inputRefs_current_.focus();
+        } else {
+            var _inputRefs_current_1;
+            (_inputRefs_current_1 = inputRefs.current[index + validData.length - 1]) === null || _inputRefs_current_1 === void 0 ? void 0 : _inputRefs_current_1.focus();
+        }
         if (newPasscode.filter((passcode)=>!passcode).length === 0) {
             if (onPasteComplete) {
                 onPasteComplete(newPasscode.join(''));

package/dist/css/westpac-ui.css

@@ -769,6 +769,9 @@
   .h-8 {
     height: calc(0.375rem * 8);
   }
+  .h-9 {
+    height: calc(0.375rem * 9);
+  }
   .h-10 {
     height: calc(0.375rem * 10);
   }
@@ -781,6 +784,9 @@
   .h-30 {
     height: calc(0.375rem * 30);
   }
+  .h-50 {
+    height: calc(0.375rem * 50);
+  }
   .h-\[0\.625rem\] {
     height: 0.625rem;
   }
@@ -979,6 +985,12 @@
   .w-23 {
     width: calc(0.375rem * 23);
   }
+  .w-50 {
+    width: calc(0.375rem * 50);
+  }
+  .w-70 {
+    width: calc(0.375rem * 70);
+  }
   .w-\[1\.81ex\] {
     width: 1.81ex;
   }
@@ -1348,6 +1360,14 @@
   .shrink-0 {
     flex-shrink: 0;
   }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-0 {
+    --tw-translate-x: calc(0.375rem * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-\[-2\.5px\] {
     --tw-translate-x: -2.5px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1360,6 +1380,10 @@
     --tw-translate-x: 14px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1542,6 +1566,13 @@
       margin-inline-end: calc(calc(0.375rem * 1) * calc(1 - var(--tw-space-x-reverse)));
     }
   }
+  .space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(0.375rem * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(0.375rem * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -3150,6 +3181,10 @@
     --tw-shadow: 0 0.375rem 0.75rem var(--tw-shadow-color, rgba(0,0,0,0.175));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[0_2px_5px_rgba\(0\,0\,0\,0\.3\)\] {
+    --tw-shadow: 0 2px 5px var(--tw-shadow-color, rgba(0,0,0,0.3));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-\[0_2px_12px_rgba\(0\,0\,0\,0\.2\)\] {
     --tw-shadow: 0 2px 12px var(--tw-shadow-color, rgba(0,0,0,0.2));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3309,6 +3344,10 @@
     --tw-duration: 300ms;
     transition-duration: 300ms;
   }
+  .duration-500 {
+    --tw-duration: 500ms;
+    transition-duration: 500ms;
+  }
   .duration-\[\.3s\] {
     --tw-duration: .3s;
     transition-duration: .3s;
@@ -3317,6 +3356,10 @@
     --tw-duration: .6s;
     transition-duration: .6s;
   }
+  .ease-\[cubic-bezier\(0\.23\,1\,0\.32\,1\)\] {
+    --tw-ease: cubic-bezier(0.23,1,0.32,1);
+    transition-timing-function: cubic-bezier(0.23,1,0.32,1);
+  }
   .ease-\[cubic-bezier\(0\.25\,0\.1\,0\.25\,1\)\] {
     --tw-ease: cubic-bezier(0.25,0.1,0.25,1);
     transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);