@westpac/ui 0.53.2 → 0.55.0

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

@@ -1,29 +1,46 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'flex gap-1',
+        base: 'flex gap-1 rounded-b-[3px] bg-white',
         primaryBtn: '',
-        secondaryBtn: 'no-underline hover:underline'
+        secondaryBtn: ''
     },
     variants: {
         size: {
             full: {
-                base: 'px-4 py-3'
+                base: 'px-4 pb-3'
             },
             lg: {
-                base: '-mt-6 px-12 pb-12'
+                base: 'px-12 pb-12'
             },
             md: {
-                base: '-mt-2 px-7 pb-7'
+                base: 'px-7 pb-7'
             },
             sm: {
-                base: '-mt-2 flex-col px-5 pb-5'
+                base: 'flex-col px-5 pb-5 '
             },
             fluid: {
-                base: '-mt-2 px-5 pb-5 max-md:flex-col'
+                base: 'px-5 pb-5 max-md:flex-col'
             }
+        },
+        compact: {
+            true: '',
+            false: ''
         }
-    }
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'lg',
+                'md'
+            ],
+            compact: true,
+            className: 'min-h-[90px] px-5 pb-5 pt-3'
+        }
+    ]
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -5,7 +5,7 @@ export declare const useModalDialogContext: () => ModalDialogContextValue;
 /**
  * @private
  */
-export declare function ModalDialog({ className, body, onClose, size, ...props }: ModalDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare function ModalDialog({ className, body, onClose, size, compact, ...props }: ModalDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace ModalDialog {
     var Body: typeof ModalDialogBody;
     var Footer: typeof ModalDialogFooter;

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

@@ -1,5 +1,5 @@
 'use client';
-import React, { createContext, useContext, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useDialog, useFocusRing } from 'react-aria';
 import { CloseIcon } from '../../../../components/icon/index.js';
 import { ModalDialogBody } from './components/modal-dialog-body/index.js';
@@ -8,16 +8,55 @@ import { styles as dialogStyles } from './modal-dialog.styles.js';
 const ModalDialogContext = createContext({
     size: 'md'
 });
+const SCROLL_BUFFER = 10;
 export const useModalDialogContext = ()=>useContext(ModalDialogContext);
-export function ModalDialog({ className, body, onClose, size = 'md', ...props }) {
+export function ModalDialog({ className, body, onClose, size, compact, ...props }) {
     const { children } = props;
     const { isFocusVisible, focusProps } = useFocusRing();
+    const [scrolled, setScrolled] = useState(false);
+    const [scrollAtBottom, setScrollAtBottom] = useState(false);
     const styles = dialogStyles({
         size,
-        isFocusVisible
+        isFocusVisible,
+        compact,
+        scrolled
     });
+    const [canScroll, setCanScroll] = useState(false);
+    const [footerPresent, setFooterPresent] = useState(false);
     const ref = useRef(null);
+    const bodyRef = useRef(null);
     const { dialogProps, titleProps } = useDialog(props, ref);
+    const handleScroll = useCallback(()=>{
+        if (bodyRef === null || bodyRef === void 0 ? void 0 : bodyRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = bodyRef.current;
+            setScrolled(scrollTop > SCROLL_BUFFER);
+            setScrollAtBottom(scrollTop + clientHeight >= scrollHeight - SCROLL_BUFFER);
+        }
+    }, [
+        bodyRef
+    ]);
+    useEffect(()=>{
+        const bodyElement = bodyRef.current;
+        if (!bodyElement) {
+            setCanScroll(false);
+            return;
+        }
+        bodyElement.addEventListener('scroll', handleScroll);
+        const updateCanScroll = ()=>{
+            setCanScroll(bodyElement.scrollHeight > bodyElement.clientHeight);
+        };
+        updateCanScroll();
+        const resizeObserver = new ResizeObserver(()=>{
+            updateCanScroll();
+        });
+        resizeObserver.observe(bodyElement);
+        return ()=>{
+            resizeObserver.disconnect();
+            bodyElement.removeEventListener('scroll', handleScroll);
+        };
+    }, [
+        bodyRef
+    ]);
     return React.createElement("div", {
         ...dialogProps,
         ref: ref,
@@ -37,7 +76,13 @@ export function ModalDialog({ className, body, onClose, size = 'md', ...props })
         className: styles.title()
     }, props.title), React.createElement(ModalDialogContext.Provider, {
         value: {
-            size
+            size,
+            scrollingRef: bodyRef,
+            canScroll,
+            compact,
+            footerPresent,
+            setFooterPresent,
+            scrollAtBottom
         }
     }, body ? React.createElement(ModalDialogBody, null, children) : children));
 }

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

@@ -30,6 +30,15 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             close: string;
         };
     };
+    compact: {
+        true: string;
+        false: string;
+    };
+    scrolled: {
+        true: {
+            title: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -68,6 +77,15 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             close: string;
         };
     };
+    compact: {
+        true: string;
+        false: string;
+    };
+    scrolled: {
+        true: {
+            title: string;
+        };
+    };
 }, {
     base: string;
     title: string;
@@ -104,6 +122,15 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             close: string;
         };
     };
+    compact: {
+        true: string;
+        false: string;
+    };
+    scrolled: {
+        true: {
+            title: string;
+        };
+    };
 }, {
     base: string;
     title: string;

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

@@ -1,14 +1,14 @@
 import { tv } from 'tailwind-variants';
 export const styles = tv({
     slots: {
-        base: 'relative mx-auto flex max-w-full flex-col overflow-hidden rounded bg-white text-text outline-none',
-        title: 'typography-body-7 pb-4 pt-9 font-bold text-text',
+        base: 'relative flex max-h-full max-w-full flex-col rounded bg-white text-text outline-none',
+        title: 'typography-body-7 pb-4 pt-9 font-bold text-text transition-shadow delay-0 duration-200 ease-[ease]',
         close: 'absolute right-0 top-0 block p-3'
     },
     variants: {
         size: {
             full: {
-                base: 'max-h-screen w-full flex-1',
+                base: 'h-screen max-h-screen w-full flex-1 rounded-none',
                 close: 'p-2',
                 title: 'px-4 py-3'
             },
@@ -18,14 +18,14 @@ export const styles = tv({
             },
             md: {
                 base: 'w-[37.5rem]',
-                title: 'px-7 '
+                title: 'px-7'
             },
             sm: {
                 base: 'w-[25rem]',
                 title: 'px-5'
             },
             fluid: {
-                base: 'w-full',
+                base: 'w-screen',
                 title: 'px-5'
             }
         },
@@ -36,8 +36,41 @@ export const styles = tv({
             false: {
                 close: 'outline-none'
             }
+        },
+        compact: {
+            true: '',
+            false: ''
+        },
+        scrolled: {
+            true: {
+                title: 'shadow-[0px_2px_5px_0px] shadow-black/30'
+            }
         }
-    }
+    },
+    compoundSlots: [
+        {
+            slots: [
+                'base'
+            ],
+            size: [
+                'md',
+                'lg'
+            ],
+            compact: true,
+            className: 'max-h-[80vh] overflow-hidden'
+        },
+        {
+            slots: [
+                'title'
+            ],
+            size: [
+                'lg',
+                'md'
+            ],
+            compact: true,
+            className: 'min-h-[90px] px-5 pb-4 pt-6'
+        }
+    ]
 }, {
     responsiveVariants: [
         'xsl',

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

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { type AriaDialogProps } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 import { styles } from './modal-dialog.styles.js';
@@ -15,6 +16,12 @@ export type ModalDialogProps = {
      * Additional className for Dialog
      */
     className?: string;
+    /**
+     * Alternate styling for **medium** and **large** sizes. Other sizes will continue to scroll within the backdrop.
+     *
+     * Keeps entire modal in view by adding internal scrolling and reducing internal padding.
+     */
+    compact?: boolean;
     /**
      * Full screen
      */
@@ -33,9 +40,35 @@ export type ModalDialogProps = {
     title?: string;
 } & AriaDialogProps;
 export type ModalDialogContextValue = {
+    /**
+     * Whether container can scroll
+     */
+    canScroll?: boolean;
+    /**
+     * Alternate styling for **medium** and **large** sizes. Other sizes will continue to scroll within the backdrop.
+     *
+     * Keeps entire modal in view by adding internal scrolling and reducing internal padding.
+     */
+    compact?: boolean;
+    /**
+     * Whether footer is present for styling
+     */
+    footerPresent?: boolean;
+    /**
+     * Sets whether footer is present for styling
+     */
+    setFooterPresent?: (present: boolean) => void;
     /**
      * Size of dialog
      */
     size?: Variants['size'];
+    /**
+     * Whether scroll is at bottom of the scrollable area
+     */
+    scrollAtBottom?: boolean;
+    /**
+     * Ref to use for scrolling animations
+     */
+    scrollingRef?: RefObject<HTMLDivElement>;
 };
 export {};

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

@@ -1,2 +1,2 @@
 import { type ModalProps } from './modal.types.js';
-export declare function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;
+export declare function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, compact, ...props }: ModalProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,11 @@
 'use client';
 import React from 'react';
 import { ModalBackdrop, ModalDialog } from './components/index.js';
-export function Modal({ children, backdropStyle, title, role, body, size, className, fullscreen, ...props }) {
+export function Modal({ children, backdropStyle, title, role, body, size = 'md', className, fullscreen, compact = false, ...props }) {
     return React.createElement(ModalBackdrop, {
         size: size,
         className: backdropStyle,
+        compact: compact,
         ...props
     }, React.createElement(ModalDialog, {
         fullscreen: fullscreen,
@@ -13,6 +14,7 @@ export function Modal({ children, backdropStyle, title, role, body, size, classN
         role: role,
         body: body,
         size: size,
-        className: className
+        className: className,
+        compact: compact
     }, children));
 }

package/dist/components/popover/components/panel/panel.styles.js

@@ -8,7 +8,7 @@ export const styles = tv({
         after:left-[1.5px] after:top-0 after:size-0 after:border-x-[6.5px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white
       `,
         closeBtn: 'absolute right-1 top-1 h-3 p-0 hover:opacity-80',
-        content: 'w-[17.625rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
+        content: 'w-[18.75rem] rounded-[3px] bg-white py-4 pl-3 pr-5',
         heading: 'typography-body-9 mb-2 font-medium text-text focus-visible:focus-outline',
         body: 'typography-body-10 text-text focus-visible:focus-outline'
     },

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

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

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

@@ -7,6 +7,7 @@ import { ErrorMessage, Hint, Label } from '../../../index.js';
 import { styles } from './selector-checkbox-group.styles.js';
 export const SelectorCheckboxGroupContext = createContext({
     value: [],
+    defaultValue: [],
     isDisabled: false,
     isReadOnly: false,
     isSelected: ()=>false,

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -9,6 +9,7 @@ export const SelectorRadioGroupContext = createContext({
     orientation: 'vertical',
     state: {
         name: '',
+        defaultSelectedValue: null,
         isDisabled: false,
         isReadOnly: false,
         isRequired: false,