@westpac/ui 0.53.2 → 0.55.0

package/src/components/autocomplete/components/autocomplete-popover/autocomplete-popover.component.tsx

@@ -37,10 +37,7 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
         {...popoverProps}
         style={{ ...popoverProps.style, 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 && <DismissButton onDismiss={() => state.close()} />}
         {children}

package/src/components/button/button.component.tsx

@@ -22,6 +22,7 @@ function BaseButton(
     iconColor,
     iconSize,
     children,
+    removeLinkPadding,
     ...props
   }: ButtonProps,
   ref: Ref<ButtonRef>,
@@ -36,6 +37,7 @@ function BaseButton(
     justify,
     isFocusVisible,
     hasChildren: !!children,
+    removeLinkPadding,
   });
 
   return (

package/src/components/button/button.styles.ts

@@ -33,7 +33,7 @@ export const styles = tv(
         },
         hero: { base: 'border border-hero bg-hero text-white hover:bg-hero-70 active:bg-hero-50' },
         faint: { base: 'border border-borderDark bg-light text-muted hover:bg-white active:bg-white' },
-        link: { base: 'px-0 text-link underline' },
+        link: { base: 'text-link underline' },
         unstyled: { base: 'p-0 text-left' },
       },
       soft: {
@@ -53,6 +53,9 @@ export const styles = tv(
         true: { base: 'focus-outline' },
         false: { base: 'outline-none' },
       },
+      removeLinkPadding: {
+        true: '',
+      },
     },
     compoundSlots: [
       {
@@ -73,6 +76,12 @@ export const styles = tv(
         soft: true,
         className: 'hover:bg-light active:bg-light',
       },
+      {
+        slots: ['base'],
+        look: 'link',
+        removeLinkPadding: true,
+        className: 'px-0',
+      },
       {
         slots: ['iconBefore'],
         hasChildren: true,

package/src/components/button/button.types.ts

@@ -54,6 +54,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/src/components/button-dropdown/button-dropdown.component.tsx

@@ -25,6 +25,7 @@ export function ButtonDropdown({
   soft = false,
   block = false,
   dropDownIcon: Icon = DropDownIcon,
+  placement = 'bottom start',
   shouldFlip,
 }: ButtonDropdownProps) {
   const ref = useRef<HTMLButtonElement & HTMLAnchorElement & HTMLSpanElement & HTMLDivElement>(null);
@@ -73,7 +74,7 @@ export function ButtonDropdown({
       {state.isOpen && (
         <ButtonDropdownPanel
           className={styles.panel({ className })}
-          placement="bottom start"
+          placement={placement}
           triggerRef={ref}
           state={state}
           block={block}

package/src/components/button-dropdown/button-dropdown.types.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';
@@ -26,6 +27,10 @@ export type ButtonDropdownProps = {
    * State of whether the Popover is open
    */
   open?: boolean;
+  /**
+   * placement of the popover
+   */
+  placement?: Placement;
   /**
    * Soft look button
    */

package/src/components/button-group/button-group.component.tsx

@@ -17,6 +17,7 @@ export const ButtonGroupContext = createContext<ButtonGroupContextState>({
   state: {
     // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
     name: '',
+    defaultSelectedValue: null,
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,

package/src/components/checkbox-group/checkbox-group.component.tsx

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

package/src/components/header/header.component.tsx

@@ -105,6 +105,8 @@ export function Header({
     </>
   );
 
+  const defaultAssistiveText = leftIcon === 'arrow' ? 'Back' : 'Menu';
+
   return (
     <header className={styles.base({ className })} {...props}>
       <div className={styles.inner()} style={{ maxWidth: fixed ? fixedMaxWidth : undefined }}>
@@ -116,7 +118,7 @@ export function Header({
               iconAfter={ButtonIcon}
               iconSize={leftIcon === 'arrow' ? 'medium' : 'small'}
               onClick={leftOnClick}
-              aria-label={leftAssistiveText}
+              aria-label={leftAssistiveText ?? defaultAssistiveText}
               className={styles.leftButton()}
               iconColor="text"
             />

package/src/components/header/header.types.ts

@@ -31,7 +31,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/src/components/modal/components/modal-backdrop/modal-backdrop.component.tsx

@@ -8,11 +8,14 @@ import { type ModalBackdropProps } from './modal-backdrop.types.js';
 /**
  * @private
  */
-export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }: ModalBackdropProps) {
+export function ModalBackdrop({ zIndex = 100, portalContainer, size, compact, ...props }: ModalBackdropProps) {
   const { children, state, className } = props;
 
   const ref = useRef(null);
-  const styles = backdropStyles({ fullscreen: size === 'full', fluid: size === 'fluid' });
+  const styles = backdropStyles({
+    size,
+    compact: compact && (size === 'md' || size === 'lg'),
+  });
 
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
 

package/src/components/modal/components/modal-backdrop/modal-backdrop.styles.ts

@@ -1,21 +1,41 @@
 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',
-  },
-  variants: {
-    fullscreen: {
-      true: {
-        modal: 'top-0 flex flex-1 flex-col',
-        base: 'flex flex-col p-0',
-      },
+export const styles = tv(
+  {
+    slots: {
+      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',
     },
-    fluid: {
-      true: {
-        modal: 'px-2',
+    variants: {
+      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: '',
+      },
+      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/src/components/modal/components/modal-backdrop/modal-backdrop.types.ts

@@ -12,6 +12,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/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.component.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 
 import { useModalDialogContext } from '../../modal-dialog.component.js';
@@ -6,10 +8,12 @@ import { styles as modalBodyStyles } from './modal-dialog-body.styles.js';
 import { type ModalDialogBodyProps } from './modal-dialog-body.types.js';
 
 export function ModalDialogBody({ className, children, ...props }: ModalDialogBodyProps) {
-  const { size } = useModalDialogContext();
-  const styles = modalBodyStyles({ size });
+  const { size, scrollingRef, canScroll, compact, footerPresent, scrollAtBottom } = useModalDialogContext();
+
+  const styles = modalBodyStyles({ size, canScroll, scrollAtBottom, compact, footerPresent });
+
   return (
-    <div className={styles.base({ className })} {...props}>
+    <div className={styles.base({ className })} ref={scrollingRef} {...props}>
       {children}
     </div>
   );

package/src/components/modal/components/modal-dialog/components/modal-dialog-body/modal-dialog-body.styles.ts

@@ -2,16 +2,58 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'flex-1 overflow-auto' },
+    slots: { base: 'flex-1 transition-shadow delay-0 duration-200 ease-[ease]' },
     variants: {
       size: {
         full: { base: 'px-4 py-3' },
         lg: { base: 'px-12 pb-12' },
         md: { base: 'px-7 pb-7' },
-        sm: { base: 'px-5 pb-7' },
-        fluid: { base: 'px-5 pb-7' },
+        sm: { base: 'px-5 pb-5' },
+        fluid: { 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', 'sm', 'md', 'lg', 'xl'] },
 );

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.component.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { Button } from '../../../../../button/index.js';
 import { useModalDialogContext } from '../../modal-dialog.component.js';
@@ -16,8 +16,13 @@ export function ModalDialogFooter({
   secondaryOnClick,
   ...props
 }: ModalDialogFooterProps) {
-  const { size } = useModalDialogContext();
-  const styles = modalFooterStyles({ size });
+  const { size, compact, setFooterPresent } = useModalDialogContext();
+  const styles = modalFooterStyles({ size, compact });
+
+  useEffect(() => {
+    setFooterPresent?.(true);
+  }, [setFooterPresent]);
+
   return (
     <div className={styles.base({ className })} {...props}>
       <Button look="primary" size="large" className={styles.primaryBtn()} onClick={primaryOnClick}>

package/src/components/modal/components/modal-dialog/components/modal-dialog-footer/modal-dialog-footer.styles.ts

@@ -2,16 +2,32 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    slots: { base: 'flex gap-1', primaryBtn: '', secondaryBtn: 'no-underline hover:underline' },
+    slots: {
+      base: 'flex gap-1 rounded-b-[3px] bg-white',
+      primaryBtn: '',
+      secondaryBtn: '',
+    },
     variants: {
       size: {
-        full: { base: 'px-4 py-3' },
-        lg: { base: '-mt-6 px-12 pb-12' },
-        md: { base: '-mt-2 px-7 pb-7' },
-        sm: { base: '-mt-2 flex-col px-5 pb-5' },
-        fluid: { base: '-mt-2 px-5 pb-5 max-md:flex-col' },
+        full: { base: 'px-4 pb-3' },
+        lg: { base: 'px-12 pb-12' },
+        md: { base: 'px-7 pb-7' },
+        sm: { base: 'flex-col px-5 pb-5 ' },
+        fluid: { 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', 'sm', 'md', 'lg', 'xl'] },
 );

package/src/components/modal/components/modal-dialog/modal-dialog.component.tsx

@@ -1,6 +1,6 @@
 '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';
@@ -12,19 +12,63 @@ import { ModalDialogContextValue, type ModalDialogProps } from './modal-dialog.t
 
 const ModalDialogContext = createContext<ModalDialogContextValue>({ size: 'md' });
 
+const SCROLL_BUFFER = 10;
+
 export const useModalDialogContext = () => useContext(ModalDialogContext);
+
 /**
  * @private
  */
-export function ModalDialog({ className, body, onClose, size = 'md', ...props }: ModalDialogProps) {
+export function ModalDialog({ className, body, onClose, size, compact, ...props }: ModalDialogProps) {
   const { children } = props;
   const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = dialogStyles({ size, isFocusVisible });
+  const [scrolled, setScrolled] = useState(false);
+  const [scrollAtBottom, setScrollAtBottom] = useState(false);
+  const styles = dialogStyles({ size, isFocusVisible, compact, scrolled });
+  const [canScroll, setCanScroll] = useState(false);
+  const [footerPresent, setFooterPresent] = useState<boolean>(false);
 
   const ref = useRef(null);
+  const bodyRef = useRef<HTMLDivElement>(null);
 
   const { dialogProps, titleProps } = useDialog(props, ref);
 
+  const handleScroll = useCallback(() => {
+    if (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);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bodyRef]);
+
   return (
     <div {...dialogProps} ref={ref} className={styles.base({ className })}>
       {onClose && (
@@ -37,12 +81,14 @@ export function ModalDialog({ className, body, onClose, size = 'md', ...props }:
           {props.title}
         </h3>
       )}
-      <ModalDialogContext.Provider value={{ size }}>
+
+      <ModalDialogContext.Provider
+        value={{ size, scrollingRef: bodyRef, canScroll, compact, footerPresent, setFooterPresent, scrollAtBottom }}
+      >
         {body ? <ModalDialogBody>{children}</ModalDialogBody> : children}
       </ModalDialogContext.Provider>
     </div>
   );
 }
-
 ModalDialog.Body = ModalDialogBody;
 ModalDialog.Footer = ModalDialogFooter;

package/src/components/modal/components/modal-dialog/modal-dialog.styles.ts

@@ -3,14 +3,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',
         },
@@ -20,14 +20,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',
         },
       },
@@ -35,7 +35,30 @@ export const styles = tv(
         true: { close: '!outline-offset-[-3px] focus-outline' },
         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', 'sm', 'md', 'lg', 'xl'] },
 );

package/src/components/modal/components/modal-dialog/modal-dialog.types.ts

@@ -1,3 +1,4 @@
+import { RefObject } from 'react';
 import { type AriaDialogProps } from 'react-aria';
 import { type VariantProps } from 'tailwind-variants';
 
@@ -18,6 +19,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
    */
@@ -37,8 +44,34 @@ export type ModalDialogProps = {
 } & 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>;
 };

package/src/components/modal/modal.component.tsx

@@ -11,13 +11,14 @@ export function Modal({
   title,
   role,
   body,
-  size,
+  size = 'md',
   className,
   fullscreen,
+  compact = false,
   ...props
 }: ModalProps) {
   return (
-    <ModalBackdrop size={size} className={backdropStyle} {...props}>
+    <ModalBackdrop size={size} className={backdropStyle} compact={compact} {...props}>
       <ModalDialog
         fullscreen={fullscreen}
         onClose={props.isDismissable ? () => props.state.close() : undefined}
@@ -26,6 +27,7 @@ export function Modal({
         body={body}
         size={size}
         className={className}
+        compact={compact}
       >
         {children}
       </ModalDialog>

package/src/components/popover/components/panel/panel.styles.ts

@@ -10,7 +10,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/src/components/radio-group/radio-group.component.tsx

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

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx

@@ -15,6 +15,7 @@ import {
 
 export const SelectorCheckboxGroupContext = createContext<SelectorCheckboxGroupContextState>({
   value: [],
+  defaultValue: [],
   isDisabled: false,
   isReadOnly: false,
   isSelected: () => false,

package/src/components/selector/components/selector-radio-group/selector-radio-group.component.tsx

@@ -15,6 +15,7 @@ export const SelectorRadioGroupContext = createContext<SelectorRadioGroupContext
   state: {
     // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
     name: '',
+    defaultSelectedValue: null,
     isDisabled: false,
     isReadOnly: false,
     isRequired: false,