@westpac/ui 0.57.2 → 0.57.4

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

@@ -70,6 +70,8 @@ export function ButtonGroup({ className, buttons, label, look = 'hero', size = '
     const state = useRadioGroupState({
         ...props,
         label,
+        value: props.value === '' ? null : props.value,
+        defaultValue: props.defaultValue === '' ? null : props.defaultValue,
         orientation: 'horizontal'
     });
     const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup({

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

@@ -1,4 +1,5 @@
 'use client';
+import { mergeProps } from '@react-aria/utils';
 import React, { useContext, useRef } from 'react';
 import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 import { Button as GELButton } from '../../../button/index.js';
@@ -22,8 +23,7 @@ export function ButtonGroupButton({ className, label, ...props }) {
             className
         })
     }, React.createElement(VisuallyHidden, null, React.createElement("input", {
-        ...inputProps,
-        ...focusProps,
+        ...mergeProps(inputProps, focusProps),
         ref: ref
     })), React.createElement(GELButton, {
         tag: "div",

package/dist/css/westpac-ui.css

@@ -104,7 +104,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 } /*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */ /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -2881,9 +2881,7 @@ body {
   vertical-align: middle;
   --tw-text-opacity: 1;
   color: rgba(var(--colors-text), var(--tw-text-opacity, 1));
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -2984,9 +2982,7 @@ body {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -6534,9 +6530,7 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

package/dist/css/westpac-ui.min.css

@@ -104,7 +104,7 @@
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 } /*
-! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
 */ /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
@@ -2881,9 +2881,7 @@ body {
   vertical-align: middle;
   --tw-text-opacity: 1;
   color: rgba(var(--colors-text), var(--tw-text-opacity, 1));
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -2984,9 +2982,7 @@ body {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
@@ -6534,9 +6530,7 @@ body {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 .transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.57.2",
+  "version": "0.57.4",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -212,12 +212,12 @@
     "@react-types/combobox": "~3.13.6",
     "@react-types/shared": "~3.30.0",
     "@react-types/tabs": "~3.3.16",
-    "@storybook/addon-a11y": "10.1.4",
-    "@storybook/addon-docs": "10.1.4",
-    "@storybook/addon-links": "10.1.4",
-    "@storybook/addon-mcp": "~0.1.6",
-    "@storybook/addon-themes": "~10.1.4",
-    "@storybook/react-vite": "10.1.4",
+    "@storybook/addon-a11y": "10.2.3",
+    "@storybook/addon-docs": "10.2.3",
+    "@storybook/addon-links": "10.2.3",
+    "@storybook/addon-mcp": "~0.2.2",
+    "@storybook/addon-themes": "~10.2.3",
+    "@storybook/react-vite": "10.2.3",
     "@swc/cli": "^0.1.62",
     "@swc/core": "^1.3.35",
     "@testing-library/jest-dom": "^5.16.5",
@@ -239,7 +239,7 @@
     "eslint-plugin-storybook": "~10.1.4",
     "glob": "~10.5.0",
     "jsdom": "^22.1.0",
-    "plop": "~3.1.2",
+    "plop": "~4.0.5",
     "postcss": "~8.4.31",
     "postcss-cli": "~10.1.0",
     "prettier": "^3.2.5",
@@ -248,9 +248,9 @@
     "react-docgen-typescript": "~2.2.2",
     "react-dom": "^18.2.0",
     "shx": "^0.3.4",
-    "storybook": "10.1.4",
+    "storybook": "10.2.3",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.4.15",
+    "tailwindcss": "~3.4.19",
     "tailwindcss-themer": "~3.1.0",
     "ts-node": "~10.9.1",
     "typescript": "^5.5.4",
@@ -283,7 +283,7 @@
     "@duetds/date-picker": "~1.4.0",
     "react": ">=18.2.0",
     "tailwind-variants": "~0.2.1",
-    "tailwindcss": "~3.4.15",
+    "tailwindcss": "~3.4.19",
     "tailwindcss-themer": "~3.1.0"
   },
   "repository": {

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

@@ -84,7 +84,15 @@ export function ButtonGroup({
   hintMessage,
   ...props
 }: ButtonGroupProps) {
-  const state = useRadioGroupState({ ...props, label, orientation: 'horizontal' });
+  const state = useRadioGroupState({
+    ...props,
+    label,
+    // React Aria seems to not handle empty string values as expected, so we convert empty string to null to ensure accessibility focus behaves as expected
+    value: props.value === '' ? null : props.value,
+    defaultValue: props.defaultValue === '' ? null : props.defaultValue,
+    orientation: 'horizontal',
+  });
+
   const { radioGroupProps, labelProps, errorMessageProps, descriptionProps } = useRadioGroup(
     {
       ...props,

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

@@ -1,5 +1,6 @@
 'use client';
 
+import { mergeProps } from '@react-aria/utils';
 import React, { useContext, useRef } from 'react';
 import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
 
@@ -19,7 +20,7 @@ export function ButtonGroupButton({ className, label, ...props }: ButtonGroupBut
   return (
     <label className={styles.base({ className })}>
       <VisuallyHidden>
-        <input {...inputProps} {...focusProps} ref={ref} />
+        <input {...mergeProps(inputProps, focusProps)} ref={ref} />
       </VisuallyHidden>
       <GELButton
         tag="div"