@westpac/ui 1.4.0 → 1.5.0

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

@@ -71,14 +71,17 @@ function Autocomplete({ size = 'medium', invalid = false, isDisabled, footer, po
     const { buttonProps } = useButton(clearButtonProps, clearButtonRef);
     const outerRef = React.useRef(null);
     const isNoOptionPopOverOpen = useMemo(()=>{
-        return !!(noOptionsMessage && (!state.isOpen && state.isFocused && searchProps.value.length > 0 && state.selectedItems.length === 0 || state.collection.size === 0 && searchProps.value.length > 0));
+        var _ref;
+        var _searchProps_value;
+        const inputLength = (_ref = (_searchProps_value = searchProps.value) === null || _searchProps_value === void 0 ? void 0 : _searchProps_value.length) !== null && _ref !== void 0 ? _ref : 0;
+        return !!(noOptionsMessage && (!state.isOpen && state.isFocused && inputLength > 0 && !state.value || state.collection.size === 0 && inputLength > 0));
     }, [
         noOptionsMessage,
         state.isOpen,
         state.isFocused,
-        state.selectedItems,
+        state.value,
         state.collection.size,
-        searchProps.value.length
+        searchProps.value
     ]);
     return React.createElement("div", {
         className: styles.base({

package/dist/components/error-message/error-message.component.d.ts

@@ -1,2 +1,2 @@
 import { type ErrorMessageProps } from './error-message.types.js';
-export declare function ErrorMessage({ className, tag: Tag, icon: Icon, message, ...props }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorMessage({ className, tag: Tag, icon: Icon, errorTitle, message, ...props }: ErrorMessageProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/error-message/error-message.component.js

@@ -1,10 +1,33 @@
 import { clsx } from 'clsx';
 import React from 'react';
 import { AlertIcon } from '../../components/icon/index.js';
+import { List, ListItem } from '../../components/list/index.js';
 import { styles as errorMessageStyles } from './error-message.styles.js';
-export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message, ...props }) {
+export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, errorTitle, message, ...props }) {
     const styles = errorMessageStyles({});
     const FinalIcon = Icon !== null && Icon !== void 0 ? Icon : AlertIcon;
+    if (errorTitle && Array.isArray(message)) {
+        return React.createElement("div", {
+            className: styles.titleWrapper({
+                className
+            }),
+            ...props
+        }, React.createElement("span", {
+            className: styles.title({})
+        }, React.createElement(FinalIcon, {
+            color: "danger",
+            copyrightYear: "2026",
+            className: styles.icon({}),
+            size: "xsmall",
+            look: "outlined"
+        }), errorTitle), React.createElement(List, {
+            type: "bullet",
+            look: "primary",
+            className: styles.bulletList({})
+        }, message.map((msg, index)=>React.createElement(ListItem, {
+                key: index
+            }, msg))));
+    }
     return Array.isArray(message) ? React.createElement("ul", {
         className: styles.list({}),
         ...props
@@ -15,7 +38,7 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
             })
         }, React.createElement(FinalIcon, {
             color: "danger",
-            copyrightYear: "2023",
+            copyrightYear: "2026",
             className: styles.icon({}),
             size: "xsmall",
             look: "outlined"
@@ -26,7 +49,7 @@ export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message,
         ...props
     }, React.createElement(FinalIcon, {
         color: "danger",
-        copyrightYear: "2023",
+        copyrightYear: "2026",
         className: styles.icon({}),
         size: "xsmall",
         look: "outlined"

package/dist/components/error-message/error-message.styles.d.ts

@@ -2,36 +2,54 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             list?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            titleWrapper?: import("tailwind-merge").ClassNameValue;
+            bulletList?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             list?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            titleWrapper?: import("tailwind-merge").ClassNameValue;
+            bulletList?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
     base: string;
     list: string;
     icon: string;
+    titleWrapper: string;
+    title: string;
+    bulletList: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-merge").ClassNameValue | {
             base?: import("tailwind-merge").ClassNameValue;
+            title?: import("tailwind-merge").ClassNameValue;
             list?: import("tailwind-merge").ClassNameValue;
             icon?: import("tailwind-merge").ClassNameValue;
+            titleWrapper?: import("tailwind-merge").ClassNameValue;
+            bulletList?: import("tailwind-merge").ClassNameValue;
         };
     };
 } | {}, {
     base: string;
     list: string;
     icon: string;
+    titleWrapper: string;
+    title: string;
+    bulletList: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     base: string;
     list: string;
     icon: string;
+    titleWrapper: string;
+    title: string;
+    bulletList: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/error-message/error-message.styles.js

@@ -3,6 +3,9 @@ export const styles = tv({
     slots: {
         base: 'flex items-start typography-body-11 text-text-danger',
         list: 'mb-2 flex flex-col gap-1',
-        icon: 'mt-[0.25rem] mr-[0.5em] flex-shrink-0 align-top'
+        icon: 'mt-[0.25rem] mr-[0.5em] flex-shrink-0 align-top',
+        titleWrapper: 'mb-2 flex flex-col gap-1 text-text-danger',
+        title: 'flex items-start typography-body-11',
+        bulletList: 'text-text-danger'
     }
 });

package/dist/components/error-message/error-message.types.d.ts

@@ -5,6 +5,10 @@ export type ErrorMessageProps = {
      * Icon
      */
     icon?: (...args: unknown[]) => JSX.Element;
+    /**
+     * Title
+     */
+    errorTitle?: string;
     /**
      * Message or messages
      */

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

@@ -1,2 +1,2 @@
 import { type FieldProps } from './field.types.js';
-export declare function Field({ className, label, tag: Tag, children, hintMessage, errorMessage, labelElementType, labelSize, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function Field({ className, label, tag: Tag, children, hintMessage, errorTitle, errorMessage, labelElementType, labelSize, ...props }: FieldProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/field/field.component.js

@@ -2,7 +2,7 @@
 import React, { Children, cloneElement, isValidElement, useCallback } from 'react';
 import { useField } from 'react-aria';
 import { ErrorMessage, Hint, Label } from '../index.js';
-export function Field({ className, label, tag: Tag = 'div', children, hintMessage, errorMessage, labelElementType, labelSize, ...props }) {
+export function Field({ className, label, tag: Tag = 'div', children, hintMessage, errorTitle, errorMessage, labelElementType, labelSize, ...props }) {
     const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
         ...props,
         description: hintMessage,
@@ -28,6 +28,7 @@ export function Field({ className, label, tag: Tag = 'div', children, hintMessag
         ...labelProps
     }, label), hintMessage && React.createElement(Hint, descriptionProps, hintMessage), errorMessage && React.createElement(ErrorMessage, {
         ...errorMessageProps,
+        errorTitle: errorTitle,
         message: errorMessage
     }), renderChildren());
 }

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

@@ -2,6 +2,10 @@ import { HTMLAttributes } from 'react';
 import { AriaFieldProps } from 'react-aria';
 import { HintProps, LabelProps } from '../index.js';
 export type FieldProps = {
+    /**
+     * error title
+     */
+    errorTitle?: string;
     /**
      * error message
      */

package/dist/components/icon/components/flag-icon.d.ts

@@ -0,0 +1,2 @@
+import { type IconProps } from '../icon.types.js';
+export declare function FlagIcon({ look, 'aria-label': ariaLabel, copyrightYear, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/icon/components/flag-icon.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Icon } from '../icon.component.js';
+export function FlagIcon({ look = 'filled', 'aria-label': ariaLabel = 'Flag', copyrightYear = '2026', ...props }) {
+    return React.createElement(Icon, {
+        "aria-label": ariaLabel,
+        copyrightYear: copyrightYear,
+        ...props
+    }, look === 'filled' ? React.createElement("path", {
+        d: "M4 22V2H20L18 7L20 12H6V22H4Z",
+        fill: "currentColor"
+    }) : React.createElement("path", {
+        d: "M4 22V2H20L18 7L20 12H6V22H4ZM5.95 10H17L16 7L17.05 4H6L5.95 10Z",
+        fill: "currentColor"
+    }));
+}

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

@@ -98,6 +98,7 @@ export { FilterIcon } from './components/filter-icon.js';
 export { FingerprintIcon } from './components/fingerprint-icon.js';
 export { FirstAidCaseIcon } from './components/first-aid-case-icon.js';
 export { FirstAidIcon } from './components/first-aid-icon.js';
+export { FlagIcon } from './components/flag-icon.js';
 export { FormatColorIcon } from './components/format-color-icon.js';
 export { FullscreenExitIcon } from './components/fullscreen-exit-icon.js';
 export { FullscreenIcon } from './components/fullscreen-icon.js';

package/dist/components/icon/index.js

@@ -98,6 +98,7 @@ export { FilterIcon } from './components/filter-icon.js';
 export { FingerprintIcon } from './components/fingerprint-icon.js';
 export { FirstAidCaseIcon } from './components/first-aid-case-icon.js';
 export { FirstAidIcon } from './components/first-aid-icon.js';
+export { FlagIcon } from './components/flag-icon.js';
 export { FormatColorIcon } from './components/format-color-icon.js';
 export { FullscreenExitIcon } from './components/fullscreen-exit-icon.js';
 export { FullscreenIcon } from './components/fullscreen-icon.js';

package/dist/components/selector/components/selector-button-group/selector-button-group.component.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SelectorButtonGroupContextState, SelectorButtonGroupProps } from './selector-button-group.types.js';
 export declare const SelectorButtonContext: React.Context<SelectorButtonGroupContextState>;
-export declare function SelectorButtonGroup({ className, children, label, orientation, errorMessage, description, value, isDisabled, ...props }: SelectorButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function SelectorButtonGroup({ className, children, label, orientation, errorMessage, description, value, onChange, isDisabled, ...props }: SelectorButtonGroupProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,25 +11,34 @@ export const SelectorButtonContext = createContext({
     validationState: 'valid',
     isDisabled: undefined
 });
-export function SelectorButtonGroup({ className, children, label, orientation = 'vertical', errorMessage, description, value = '', isDisabled, ...props }) {
+export function SelectorButtonGroup({ className, children, label, orientation = 'vertical', errorMessage, description, value = '', onChange, isDisabled, ...props }) {
+    const isControlled = onChange !== undefined;
+    const onChangeCallback = onChange;
     const [selected, setSelected] = useState(value);
     const breakpoint = useBreakpoint();
     const resolvedOrientation = resolveResponsiveVariant(orientation, breakpoint);
     const handleChange = useCallback((id)=>{
-        setSelected(id);
+        if (onChangeCallback) {
+            onChangeCallback(id);
+        } else {
+            setSelected(id);
+        }
     }, [
+        onChangeCallback,
         setSelected
     ]);
     const state = useMemo(()=>({
-            value: selected,
+            value: isControlled ? value !== null && value !== void 0 ? value : '' : selected,
             onClick: (id)=>handleChange(id),
             validationState: errorMessage ? 'invalid' : 'valid',
             isDisabled
         }), [
         errorMessage,
         handleChange,
+        isControlled,
         isDisabled,
-        selected
+        selected,
+        value
     ]);
     const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
         validationState: state.validationState,

package/dist/components/selector/components/selector-button-group/selector-button-group.types.d.ts

@@ -18,9 +18,14 @@ export type SelectorButtonGroupProps = {
      */
     tag?: keyof JSX.IntrinsicElements;
     /**
-     * Key to set as default value
+     * Key to set as default value (uncontrolled) or currently selected value (controlled)
      */
     value?: string;
+    /**
+     * Called when selection changes. Providing this prop makes the component controlled.
+     * Pass an empty string to clear the selection.
+     */
+    onChange?: (value: string) => void;
 } & AriaFieldProps & Omit<HTMLAttributes<Element>, 'onChange'>;
 export type SelectorButtonGroupContextState = {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -254,8 +254,8 @@
     "vite": "^7.1.12",
     "vitest": "^3.2.4",
     "@westpac/style-config": "~1.0.2",
-    "@westpac/test-config": "~0.0.0",
     "@westpac/eslint-config": "~1.1.0",
+    "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
   "dependencies": {

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

@@ -48,7 +48,6 @@ function Autocomplete<T extends object>(
   }: AutocompleteProps<T>,
   ref: ForwardedRef<HTMLInputElement>,
 ) {
-  // eslint-disable-next-line @typescript-eslint/unbound-method
   const { contains } = useFilter({ sensitivity: 'base' });
   const internalState = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
   const state = comboBoxState ?? internalState;
@@ -97,19 +96,13 @@ function Autocomplete<T extends object>(
   const outerRef = React.useRef(null);
 
   const isNoOptionPopOverOpen = useMemo(() => {
+    const inputLength = searchProps.value?.length ?? 0;
     return !!(
       noOptionsMessage &&
-      ((!state.isOpen && state.isFocused && searchProps.value.length > 0 && state.selectedItems.length === 0) ||
-        (state.collection.size === 0 && searchProps.value.length > 0))
+      ((!state.isOpen && state.isFocused && inputLength > 0 && !state.value) ||
+        (state.collection.size === 0 && inputLength > 0))
     );
-  }, [
-    noOptionsMessage,
-    state.isOpen,
-    state.isFocused,
-    state.selectedItems,
-    state.collection.size,
-    searchProps.value.length,
-  ]);
+  }, [noOptionsMessage, state.isOpen, state.isFocused, state.value, state.collection.size, searchProps.value]);
 
   return (
     <div className={styles.base({ className })}>

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

@@ -2,26 +2,50 @@ import { clsx } from 'clsx';
 import React, { ReactNode } from 'react';
 
 import { AlertIcon } from '../../components/icon/index.js';
+import { List, ListItem } from '../../components/list/index.js';
 
 import { styles as errorMessageStyles } from './error-message.styles.js';
 import { type ErrorMessageProps } from './error-message.types.js';
 
-export function ErrorMessage({ className, tag: Tag = 'div', icon: Icon, message, ...props }: ErrorMessageProps) {
+export function ErrorMessage({
+  className,
+  tag: Tag = 'div',
+  icon: Icon,
+  errorTitle,
+  message,
+  ...props
+}: ErrorMessageProps) {
   const styles = errorMessageStyles({});
   const FinalIcon = Icon ?? AlertIcon;
 
+  if (errorTitle && Array.isArray(message)) {
+    return (
+      <div className={styles.titleWrapper({ className })} {...props}>
+        <span className={styles.title({})}>
+          <FinalIcon color="danger" copyrightYear="2026" className={styles.icon({})} size="xsmall" look="outlined" />
+          {errorTitle}
+        </span>
+        <List type="bullet" look="primary" className={styles.bulletList({})}>
+          {message.map((msg, index) => (
+            <ListItem key={index}>{msg}</ListItem>
+          ))}
+        </List>
+      </div>
+    );
+  }
+
   return Array.isArray(message) ? (
     <ul className={styles.list({})} {...props}>
       {message.map((msg, index) => (
         <li key={index} className={styles.base({ className })}>
-          <FinalIcon color="danger" copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
+          <FinalIcon color="danger" copyrightYear="2026" className={styles.icon({})} size="xsmall" look="outlined" />
           {msg}
         </li>
       ))}
     </ul>
   ) : (
     <Tag className={styles.base({ className: clsx(className, 'mb-2') })} {...props}>
-      <FinalIcon color="danger" copyrightYear="2023" className={styles.icon({})} size="xsmall" look="outlined" />
+      <FinalIcon color="danger" copyrightYear="2026" className={styles.icon({})} size="xsmall" look="outlined" />
       {message as ReactNode}
     </Tag>
   );

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

@@ -6,5 +6,8 @@ export const styles = tv({
     list: 'mb-2 flex flex-col gap-1',
     // below should be em rather than rem based on old GEL
     icon: 'mt-[0.25rem] mr-[0.5em] flex-shrink-0 align-top',
+    titleWrapper: 'mb-2 flex flex-col gap-1 text-text-danger',
+    title: 'flex items-start typography-body-11',
+    bulletList: 'text-text-danger',
   },
 });

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

@@ -6,6 +6,10 @@ export type ErrorMessageProps = {
    * Icon
    */
   icon?: (...args: unknown[]) => JSX.Element;
+  /**
+   * Title
+   */
+  errorTitle?: string;
   /**
    * Message or messages
    */

package/src/components/field/field.component.tsx

@@ -13,6 +13,7 @@ export function Field({
   tag: Tag = 'div',
   children,
   hintMessage,
+  errorTitle,
   errorMessage,
   labelElementType,
   labelSize,
@@ -42,7 +43,7 @@ export function Field({
         </Label>
       )}
       {hintMessage && <Hint {...descriptionProps}>{hintMessage}</Hint>}
-      {errorMessage && <ErrorMessage {...errorMessageProps} message={errorMessage} />}
+      {errorMessage && <ErrorMessage {...errorMessageProps} errorTitle={errorTitle} message={errorMessage} />}
       {renderChildren()}
     </Tag>
   );

package/src/components/field/field.types.ts

@@ -4,6 +4,10 @@ import { AriaFieldProps } from 'react-aria';
 import { HintProps, LabelProps } from '../index.js';
 
 export type FieldProps = {
+  /**
+   * error title
+   */
+  errorTitle?: string;
   /**
    * error message
    */

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

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Icon } from '../icon.component.js';
+import { type IconProps } from '../icon.types.js';
+
+export function FlagIcon({
+  look = 'filled',
+  'aria-label': ariaLabel = 'Flag',
+  copyrightYear = '2026',
+  ...props
+}: IconProps) {
+  return (
+    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
+      {look === 'filled' ? (
+        <path d="M4 22V2H20L18 7L20 12H6V22H4Z" fill="currentColor" />
+      ) : (
+        <path d="M4 22V2H20L18 7L20 12H6V22H4ZM5.95 10H17L16 7L17.05 4H6L5.95 10Z" fill="currentColor" />
+      )}
+    </Icon>
+  );
+}

package/src/components/icon/index.ts

@@ -98,6 +98,7 @@ export { FilterIcon } from './components/filter-icon.js';
 export { FingerprintIcon } from './components/fingerprint-icon.js';
 export { FirstAidCaseIcon } from './components/first-aid-case-icon.js';
 export { FirstAidIcon } from './components/first-aid-icon.js';
+export { FlagIcon } from './components/flag-icon.js';
 export { FormatColorIcon } from './components/format-color-icon.js';
 export { FullscreenExitIcon } from './components/fullscreen-exit-icon.js';
 export { FullscreenIcon } from './components/fullscreen-icon.js';

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

@@ -25,28 +25,35 @@ export function SelectorButtonGroup({
   errorMessage,
   description,
   value = '',
+  onChange,
   isDisabled,
   ...props
 }: SelectorButtonGroupProps) {
+  const isControlled = onChange !== undefined;
+  const onChangeCallback = onChange as ((value: string) => void) | undefined;
   const [selected, setSelected] = useState(value);
   const breakpoint = useBreakpoint();
   const resolvedOrientation = resolveResponsiveVariant(orientation, breakpoint);
 
   const handleChange = useCallback(
     (id: string) => {
-      setSelected(id);
+      if (onChangeCallback) {
+        onChangeCallback(id);
+      } else {
+        setSelected(id);
+      }
     },
-    [setSelected],
+    [onChangeCallback, setSelected],
   );
 
   const state: SelectorButtonGroupContextState = useMemo(
     () => ({
-      value: selected,
+      value: isControlled ? (value ?? '') : selected,
       onClick: (id: string) => handleChange(id),
       validationState: errorMessage ? 'invalid' : 'valid',
       isDisabled,
     }),
-    [errorMessage, handleChange, isDisabled, selected],
+    [errorMessage, handleChange, isControlled, isDisabled, selected, value],
   );
 
   const { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({

package/src/components/selector/components/selector-button-group/selector-button-group.types.ts

@@ -22,9 +22,14 @@ export type SelectorButtonGroupProps = {
    */
   tag?: keyof JSX.IntrinsicElements;
   /**
-   * Key to set as default value
+   * Key to set as default value (uncontrolled) or currently selected value (controlled)
    */
   value?: string;
+  /**
+   * Called when selection changes. Providing this prop makes the component controlled.
+   * Pass an empty string to clear the selection.
+   */
+  onChange?: (value: string) => void;
 } & AriaFieldProps &
   Omit<HTMLAttributes<Element>, 'onChange'>;