@westpac/ui 0.16.0 → 0.18.0

package/src/components/date-picker/date-picker.types.ts

@@ -65,6 +65,10 @@ export type DatePickerProps = {
    * onOpen
    */
   onOpen?: (...args: any[]) => unknown;
+  /*
+   * placeholder
+   */
+  placeholder?: string;
   /**
    * Size of datepicker input
    */

package/src/components/error-message/error-message.component.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 import { AlertIcon } from '../../components/icon/index.js';
 
@@ -21,7 +21,7 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
   ) : (
     <Tag className={styles.base({ className: `${className} mb-2` })} {...props}>
       <FinalIcon copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
-      {message}
+      {message as ReactNode}
     </Tag>
   );
 }

package/src/components/error-message/error-message.types.ts

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { AriaFieldProps } from 'react-aria';
 
 export type ErrorMessageProps = {
   /**
@@ -8,7 +9,7 @@ export type ErrorMessageProps = {
   /**
    * Message or messages
    */
-  message?: ReactNode | ReactNode[];
+  message?: AriaFieldProps['errorMessage'];
   /**
    * Tag to render
    */

package/src/components/icon/components/x-icon.tsx

@@ -0,0 +1,37 @@
+import React, { Fragment } from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function XIcon({ look = 'filled', 'aria-label': ariaLabel = 'X', copyrightYear = '2024', ...props }: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <Fragment>
+          <path fill="currentColor" d="M15.815 19.008h2.12L8.178 5.04h-2.12l9.757 13.968Z" />
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="M2 0a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2Zm17.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Z"
+            clip-rule="evenodd"
+          />
+        </Fragment>
+      ) : (
+        <Fragment>
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="m19.315 4-5.824 6.775L19.825 20h-4.659l-4.265-6.212L5.56 20H4.18l6.107-7.104L4.18 4H8.84l4.039 5.883L17.935 4h1.38Zm-3.5 15.008h2.12L8.178 5.04h-2.12l9.757 13.968Z"
+            clip-rule="evenodd"
+          />
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            d="M0 2a2 2 0 0 1 2-2h20a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2Zm2 0h20v20H2V2Z"
+            clip-rule="evenodd"
+          />
+        </Fragment>
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/index.ts

@@ -211,7 +211,6 @@ export { TransferIcon } from './components/transfer-icon.js';
 export { TransportIcon } from './components/transport-icon.js';
 export { TravelExploreIcon } from './components/travel-explore-icon.js';
 export { TuneIcon } from './components/tune-icon.js';
-export { TwitterIcon } from './components/twitter-icon.js';
 export { UmbrellaIcon } from './components/umbrella-icon.js';
 export { UploadIcon } from './components/upload-icon.js';
 export { VerifiedIcon } from './components/verified-icon.js';
@@ -229,6 +228,7 @@ export { WindowsNewIcon } from './components/windows-new-icon.js';
 export { WineGlassIcon } from './components/wine-glass-icon.js';
 export { WordFileIcon } from './components/word-file-icon.js';
 export { WriteIcon } from './components/write-icon.js';
+export { XIcon } from './components/x-icon.js';
 export { YammerIcon } from './components/yammer-icon.js';
 export { YoutubeIcon } from './components/youtube-icon.js';
 export { ZipFileIcon } from './components/zip-file-icon.js';

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

@@ -11,7 +11,7 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
   const { children, state, className } = props;
 
   const ref = useRef(null);
-  const styles = backdropStyles({ className, fullscreen: size === 'full' });
+  const styles = backdropStyles({ className, fullscreen: size === 'full', fluid: size === 'fluid' });
 
   const { modalProps, underlayProps } = useModalOverlay(props, state, ref);
 
@@ -20,8 +20,11 @@ export function ModalBackdrop({ zIndex = 100, portalContainer, size, ...props }:
     return null;
   }
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]');
+
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer || document.body}>
       <div style={{ zIndex }} className={styles.base()} {...underlayProps}>
         <div {...modalProps} ref={ref} className={styles.modal()}>
           {children}

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

@@ -2,8 +2,8 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv({
   slots: {
-    base: 'fixed inset-0 z-50 flex animate-fadeIn justify-center overflow-y-auto bg-black/50 p-2',
-    modal: 'relative top-5 z-10 h-fit w-full animate-fadeInDown',
+    base: 'fixed inset-0 z-50 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: {
@@ -12,5 +12,10 @@ export const styles = tv({
         base: 'flex flex-col p-0',
       },
     },
+    fluid: {
+      true: {
+        modal: 'px-2',
+      },
+    },
   },
 });

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

@@ -1,11 +1,15 @@
 import React from 'react';
 
-import { styles } from './modal-dialog-body.styles.js';
+import { useModalDialogContext } from '../../modal-dialog.component.js';
+
+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 });
   return (
-    <div className={styles({ className })} {...props}>
+    <div className={styles.base({ className })} {...props}>
       {children}
     </div>
   );

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

@@ -1,5 +1,17 @@
 import { tv } from 'tailwind-variants';
 
-export const styles = tv({
-  base: 'flex-1 overflow-auto px-4 py-3',
-});
+export const styles = tv(
+  {
+    slots: { base: 'flex-1 overflow-auto' },
+    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' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -1,12 +1,33 @@
+'use client';
+
 import React from 'react';
 
-import { styles } from './modal-dialog-footer.styles.js';
+import { Button } from '../../../../../button/index.js';
+import { useModalDialogContext } from '../../modal-dialog.component.js';
+
+import { styles as modalFooterStyles } from './modal-dialog-footer.styles.js';
 import { type ModalDialogFooterProps } from './modal-dialog-footer.types.js';
 
-export function ModalDialogFooter({ className, children, ...props }: ModalDialogFooterProps) {
+export function ModalDialogFooter({
+  className,
+  primaryLabel,
+  primaryOnClick,
+  secondaryLabel,
+  secondaryOnClick,
+  ...props
+}: ModalDialogFooterProps) {
+  const { size } = useModalDialogContext();
+  const styles = modalFooterStyles({ size });
   return (
-    <div className={styles({ className })} {...props}>
-      {children}
+    <div className={styles.base({ className })} {...props}>
+      <Button look="primary" size="large" className={styles.primaryBtn()} onClick={primaryOnClick}>
+        {primaryLabel}
+      </Button>
+      {secondaryLabel && (
+        <Button look="link" size="large" className={styles.secondaryBtn()} onClick={secondaryOnClick}>
+          {secondaryLabel}
+        </Button>
+      )}
     </div>
   );
 }

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

@@ -1,5 +1,17 @@
 import { tv } from 'tailwind-variants';
 
-export const styles = tv({
-  base: 'border-t border-t-border bg-background px-3 py-2',
-});
+export const styles = tv(
+  {
+    slots: { base: 'flex gap-1', primaryBtn: '', secondaryBtn: 'no-underline hover:underline' },
+    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' },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

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

@@ -5,4 +5,20 @@ export type ModalDialogFooterProps = {
    * Footer content
    */
   children?: ReactNode;
+  /**
+   * Label for primary button
+   */
+  primaryLabel: string;
+  /**
+   * onClick for primary button
+   */
+  primaryOnClick: () => void;
+  /**
+   * Label for secondary button
+   */
+  secondaryLabel?: string;
+  /**
+   * onClick for secondary button
+   */
+  secondaryOnClick?: () => void;
 } & HTMLAttributes<HTMLElement>;

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

@@ -1,4 +1,6 @@
-import React, { useRef } from 'react';
+'use client';
+
+import React, { createContext, useContext, useRef } from 'react';
 import { useDialog, useFocusRing } from 'react-aria';
 
 import { CloseIcon } from '../../../../components/icon/index.js';
@@ -6,8 +8,11 @@ import { CloseIcon } from '../../../../components/icon/index.js';
 import { ModalDialogBody } from './components/modal-dialog-body/index.js';
 import { ModalDialogFooter } from './components/modal-dialog-footer/index.js';
 import { styles as dialogStyles } from './modal-dialog.styles.js';
-import { type ModalDialogProps } from './modal-dialog.types.js';
+import { ModalDialogContextValue, type ModalDialogProps } from './modal-dialog.types.js';
+
+const ModalDialogContext = createContext<ModalDialogContextValue>({ size: 'md' });
 
+export const useModalDialogContext = () => useContext(ModalDialogContext);
 /**
  * @private
  */
@@ -32,7 +37,9 @@ export function ModalDialog({ className, body, onClose, size = 'md', ...props }:
           {props.title}
         </h3>
       )}
-      {body ? <ModalDialogBody>{children}</ModalDialogBody> : children}
+      <ModalDialogContext.Provider value={{ size }}>
+        {body ? <ModalDialogBody>{children}</ModalDialogBody> : children}
+      </ModalDialogContext.Provider>
     </div>
   );
 }

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

@@ -3,23 +3,32 @@ 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 outline-none',
-      title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-      close: 'absolute right-1 top-1 block p-1',
+      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',
+      close: 'absolute right-0 top-0 block p-3',
     },
     variants: {
       size: {
         full: {
           base: 'max-h-screen w-full flex-1',
+          close: 'p-2',
+          title: 'px-4 py-3',
         },
         lg: {
-          base: 'w-[56.25rem]',
+          base: 'w-[50rem]',
+          title: 'px-12 pt-12',
         },
         md: {
           base: 'w-[37.5rem]',
+          title: 'px-7 ',
         },
         sm: {
-          base: 'w-[18.75rem]',
+          base: 'w-[25rem]',
+          title: 'px-5',
+        },
+        fluid: {
+          base: 'w-full',
+          title: 'px-5',
         },
       },
       isFocusVisible: {

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

@@ -35,3 +35,10 @@ export type ModalDialogProps = {
    */
   title?: string;
 } & AriaDialogProps;
+
+export type ModalDialogContextValue = {
+  /**
+   * Size of dialog
+   */
+  size?: Variants['size'];
+};

package/src/components/pagination/pagination.component.tsx

@@ -23,12 +23,12 @@ export function Pagination({
 
   const generateHandleOnClickBackwards = useCallback(
     (
-        current: number,
-        infinite: boolean,
-        forwardOnly: boolean,
-        onChange: (page: number) => unknown,
-        pages: PaginationProps['pages'],
-      ) =>
+      current: number,
+      infinite: boolean,
+      forwardOnly: boolean,
+      onChange: (page: number) => unknown,
+      pages: PaginationProps['pages'],
+    ) =>
       () => {
         if (infinite && forwardOnly) {
           return onChange(pages.length);

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

@@ -9,8 +9,8 @@ export const styles = tv(
         'absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] border-t-muted after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
       closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
       content: 'w-[17.625rem] py-4 pl-3 pr-5',
-      heading: 'typography-body-9 mb-2 font-bold',
-      body: 'typography-body-10',
+      heading: 'typography-body-9 mb-2 font-bold text-text',
+      body: 'typography-body-10 text-text',
     },
     variants: {
       placement: {

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

@@ -9,8 +9,7 @@ import { styles as radioStyles } from './radio-group-radio.styles.js';
 import { type RadioGroupRadioProps } from './radio-group-radio.types.js';
 
 function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: any) {
-  const state = useContext(RadioGroupContext);
-  const { size, orientation } = state;
+  const { state, size, orientation } = useContext(RadioGroupContext);
   const localRef = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);
   const { isFocusVisible, focusProps } = useFocusRing();

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

@@ -4,6 +4,7 @@ import React, { createContext, useEffect, useId, useMemo, useRef, useState } fro
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
 import { ErrorMessage, Hint, Label, RadioGroupRadio } from '../index.js';
@@ -12,18 +13,63 @@ import { styles as radioGroupStyles } from './radio-group.styles.js';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
 
 export const RadioGroupContext = createContext<RadioGroupContextState>({
-  // TODO: Remove deprecated name prop once React Aria removes it from RadioGroupState
-  name: '',
-  isDisabled: false,
-  isReadOnly: false,
-  isRequired: false,
-  validationState: null,
-  selectedValue: null,
-  setSelectedValue: () => null,
-  lastFocusedValue: null,
-  setLastFocusedValue: () => null,
   orientation: 'vertical',
   size: 'medium',
+  state: {
+    name: '',
+    isDisabled: false,
+    isReadOnly: false,
+    isRequired: false,
+    validationState: null,
+    selectedValue: null,
+    setSelectedValue: () => null,
+    lastFocusedValue: null,
+    setLastFocusedValue: () => null,
+    isInvalid: false,
+    realtimeValidation: {
+      isInvalid: false,
+      validationErrors: [],
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: false,
+        valueMissing: false,
+      },
+    },
+    displayValidation: {
+      isInvalid: false,
+      validationErrors: [],
+      validationDetails: {
+        badInput: false,
+        customError: false,
+        patternMismatch: false,
+        rangeOverflow: false,
+        rangeUnderflow: false,
+        stepMismatch: false,
+        tooLong: false,
+        tooShort: false,
+        typeMismatch: false,
+        valid: false,
+        valueMissing: false,
+      },
+    },
+    updateValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    resetValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    commitValidation: function (): void {
+      throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+  },
 });
 
 export function RadioGroup({
@@ -70,9 +116,7 @@ export function RadioGroup({
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
       <div className={styles.radioWrapper()} id={panelId}>
-        <RadioGroupContext.Provider value={{ ...state, orientation, size }}>
-          {childrenToRender}
-        </RadioGroupContext.Provider>
+        <RadioGroupContext.Provider value={{ state, orientation, size }}>{childrenToRender}</RadioGroupContext.Provider>
         {hiddenOptions && (
           <Button
             onClick={() => setHiddenOptions(false)}

package/src/components/radio-group/radio-group.types.ts

@@ -41,4 +41,8 @@ export type RadioGroupContextState = {
    * Controls size of `Radio` components, can't be applied directly on `Radio`
    */
   size: 'medium' | 'large';
-} & RadioGroupState;
+  /**
+   * State
+   */
+  state: RadioGroupState;
+};

package/src/components/repeater/repeater.component.tsx

@@ -99,6 +99,7 @@ export function Repeater({
                         size="small"
                         soft
                         onClick={() => handleRemove(item.id, index)}
+                        type="button"
                       >
                         Remove
                       </Button>
@@ -118,6 +119,7 @@ export function Repeater({
           size="small"
           soft
           onClick={() => handleAdd()}
+          type="button"
         >
           {addText}
         </Button>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useCallback, useState } from 'react';
+import { createContext, useCallback, useMemo, useState } from 'react';
 import { useField } from 'react-aria';
 
 import { ErrorMessage, Hint, Label } from '../../../index.js';
@@ -35,12 +35,15 @@ export function SelectorButtonGroup({
     [selected, setSelected],
   );
 
-  const state: SelectorButtonGroupContextState = {
-    value: selected,
-    onClick: (id: string) => handleChange(id),
-    validationState: errorMessage ? 'invalid' : 'valid',
-    isDisabled,
-  };
+  const state: SelectorButtonGroupContextState = useMemo(
+    () => ({
+      value: selected,
+      onClick: (id: string) => handleChange(id),
+      validationState: errorMessage ? 'invalid' : 'valid',
+      isDisabled,
+    }),
+    [selected],
+  );
 
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
     validationState: state.validationState,

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

@@ -4,6 +4,7 @@ import React, { createContext } from 'react';
 import { useCheckboxGroup } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../../../constants/message.js';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
 import { styles } from './selector-checkbox-group.styles.js';
@@ -22,6 +23,54 @@ export const SelectorCheckboxGroupContext = createContext<SelectorCheckboxGroupC
   removeValue: () => null,
   toggleValue: () => null,
   validationState: 'valid',
+  isInvalid: false,
+  isRequired: false,
+  setInvalid: function (): void {
+    throw new Error(FUNCTION_NOT_IMPLEMENTED);
+  },
+  realtimeValidation: {
+    isInvalid: false,
+    validationErrors: [],
+    validationDetails: {
+      badInput: false,
+      customError: false,
+      patternMismatch: false,
+      rangeOverflow: false,
+      rangeUnderflow: false,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valid: false,
+      valueMissing: false,
+    },
+  },
+  displayValidation: {
+    isInvalid: false,
+    validationErrors: [],
+    validationDetails: {
+      badInput: false,
+      customError: false,
+      patternMismatch: false,
+      rangeOverflow: false,
+      rangeUnderflow: false,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valid: false,
+      valueMissing: false,
+    },
+  },
+  updateValidation: function (): void {
+    throw new Error(FUNCTION_NOT_IMPLEMENTED);
+  },
+  resetValidation: function (): void {
+    throw new Error(FUNCTION_NOT_IMPLEMENTED);
+  },
+  commitValidation: function (): void {
+    throw new Error(FUNCTION_NOT_IMPLEMENTED);
+  },
 });
 
 export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {

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

@@ -24,7 +24,7 @@ function BaseSelectorRadioGroupOption(
   }: SelectorRadioGroupOptionProps,
   ref: any,
 ) {
-  const state = useContext(SelectorRadioGroupContext);
+  const { state } = useContext(SelectorRadioGroupContext);
   const localRef = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, value, children }, state, localRef);
   const { isFocusVisible, focusProps } = useFocusRing();