@westpac/ui 0.42.2 → 0.42.3

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

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { useMemo } from 'react';
+import { ForwardedRef, forwardRef, useMemo } from 'react';
 import { mergeProps, useButton, useComboBox, useFilter, useFocusRing, useSearchField } from 'react-aria';
 import { useComboBoxState, useSearchFieldState } from 'react-stately';
 
@@ -28,25 +28,30 @@ const STATIC_IS_OPEN_STATE = {
   },
 };
 
-export function Autocomplete<T extends object>({
-  size = 'medium',
-  invalid = false,
-  isDisabled,
-  footer,
-  portalContainer,
-  errorMessage,
-  hintMessage,
-  noOptionsMessage,
-  className,
-  width = 'full',
-  loadingState,
-  ...props
-}: AutocompleteProps<T>) {
+function Autocomplete<T extends object>(
+  {
+    size = 'medium',
+    invalid = false,
+    isDisabled,
+    footer,
+    portalContainer,
+    errorMessage,
+    hintMessage,
+    noOptionsMessage,
+    className,
+    width = 'full',
+    loadingState,
+    ...props
+  }: AutocompleteProps<T>,
+  ref: ForwardedRef<HTMLInputElement>,
+) {
   const { contains } = useFilter({ sensitivity: 'base' });
   const state = useComboBoxState({ isDisabled, ...props, defaultFilter: contains });
   const { isFocusVisible, focusProps } = useFocusRing();
   const { isFocusVisible: isInputFocusVisible, focusProps: inputFocusProps } = useFocusRing();
-  const inputRef = React.useRef(null);
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  React.useImperativeHandle(ref, () => inputRef.current!);
   const listBoxRef = React.useRef(null);
   const popoverRef = React.useRef(null);
   const { inputProps, listBoxProps, labelProps, descriptionProps, errorMessageProps } = useComboBox(
@@ -168,3 +173,11 @@ export function Autocomplete<T extends object>({
     </div>
   );
 }
+
+const _Autocomplete = forwardRef(Autocomplete) as unknown as { displayName: string } & (<T extends object>(
+  props: AutocompleteProps<T> & { ref?: ForwardedRef<HTMLInputElement> },
+) => ReturnType<typeof Autocomplete>);
+
+_Autocomplete.displayName = 'Autocomplete';
+
+export { _Autocomplete as Autocomplete };

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { Ref, forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
 
 import { Icon } from '../../../icon/icon.component.js';
 import { IconProps } from '../../../icon/index.js';
@@ -37,7 +37,7 @@ function BaseCheckbox(
 ) {
   const { state, size, orientation } = useContext(CheckboxGroupContext);
   const localRef = useRef(null);
-  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem(
+  const { inputProps, labelProps, isDisabled, isSelected } = useCheckboxGroupItem(
     { ...props, value, children: label },
     state,
     localRef,
@@ -46,9 +46,9 @@ function BaseCheckbox(
   const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible });
 
   return (
-    <label className={styles.base({ className })} ref={ref}>
+    <label className={styles.base({ className })} ref={ref} {...labelProps}>
       <VisuallyHidden elementType="span">
-        <input {...inputProps} {...focusProps} ref={localRef} />
+        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
       </VisuallyHidden>
       <span className={styles.checkbox()}>
         {isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'border' : 'hero'} />}

package/src/components/date-picker/date-picker.component.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useFocusVisible } from 'react-aria';
 
 import { styles } from './date-picker.styles.js';
 import { type DatePickerProps, DuetDatePickerElement } from './date-picker.types.js';
@@ -28,6 +29,7 @@ export function DatePicker({
   ...props
 }: DatePickerProps) {
   const [initialized, setInitialized] = useState(false);
+  const { isFocusVisible } = useFocusVisible();
 
   useEffect(() => {
     const initDatePicker = async () => {
@@ -124,5 +126,5 @@ export function DatePicker({
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  return <duet-date-picker class={styles({ size, block, invalid })} ref={ref} {...props} />;
+  return <duet-date-picker class={styles({ size, block, invalid, isFocusVisible })} ref={ref} {...props} />;
 }

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

@@ -18,6 +18,10 @@ export const styles = tv(
         true: 'date-picker-invalid',
         false: '',
       },
+      isFocusVisible: {
+        true: 'date-picker-focused',
+        false: '',
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

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

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

package/src/components/filter/components/filter-buttons/filter-buttons.component.tsx

@@ -68,6 +68,7 @@ export function FilterButtons({
         setScroll(scrollBy, scrollX, container);
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollTarget],
   );
 
@@ -116,7 +117,7 @@ export function FilterButtons({
 
       return { targetLeft, targetRight };
     },
-    [],
+    [filterButtons.length],
   );
 
   const handleScrollTarget = useCallback(
@@ -141,6 +142,7 @@ export function FilterButtons({
         setScrollTarget({ left: targetLeft, right: targetRight });
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [scrollTarget, getTargetLeft, getTargetRight, adjustTargets],
   );
 
@@ -172,6 +174,7 @@ export function FilterButtons({
       container?.removeEventListener('scroll', handleScroll);
       window.removeEventListener('resize', handleScroll);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [handleScrollTarget, handleScrollable]);
 
   return (

package/src/components/header/header.styles.ts

@@ -18,7 +18,7 @@ export const styles = tv(
       logoCenter: {
         true: {
           logoLink:
-            'max-sm:absolute max-sm:left-1/2 max-sm:z-0 max-sm:translate-x-[-50%] max-sm:translate-y-[15%] sm:relative',
+            'max-sm:absolute max-sm:left-1/2 max-sm:z-0 max-sm:-translate-x-1/2 max-sm:translate-y-[15%] sm:relative',
           smallLogo: '',
         },
         false: {

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

@@ -9,7 +9,7 @@ export const styles = tv(
         before:absolute before:left-[1px] before:top-[0.5px] before:size-0 before:border-x-[7px] before:border-t-[12px] before:border-x-[transparent] before:border-t-muted after:absolute
         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 h-3 top-1 p-0 hover:opacity-80',
+      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',
       heading: 'typography-body-9 mb-2 font-medium text-text',
       body: 'typography-body-10 text-text',

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

@@ -64,6 +64,7 @@ export function Popover({
   return (
     <div className={styles.base({ className })}>
       <Button
+        type="button"
         look={(icon && !children) || linkStyling ? 'link' : look}
         iconAfter={icon}
         soft={soft}

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

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { Ref, forwardRef, useContext, useRef } from 'react';
-import { VisuallyHidden, useFocusRing, useRadio } from 'react-aria';
+import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 
 import { RadioGroupContext } from '../../radio-group.component.js';
 
@@ -11,14 +11,14 @@ import { type RadioGroupRadioProps } from './radio-group-radio.types.js';
 function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: Ref<HTMLLabelElement>) {
   const { state, size, orientation } = useContext(RadioGroupContext);
   const localRef = useRef(null);
-  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);
+  const { inputProps, labelProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = radioStyles({ isDisabled, isSelected, isFocusVisible, size, orientation });
 
   return (
-    <label className={styles.base({ className })} ref={ref}>
+    <label className={styles.base({ className })} ref={ref} {...labelProps}>
       <VisuallyHidden elementType="span">
-        <input {...inputProps} {...focusProps} ref={localRef} />
+        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
       </VisuallyHidden>
       <span className={styles.selector()} />
       <span className={styles.textWrapper()}>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Ref, forwardRef, useContext, useRef } from 'react';
+import React, { Ref, forwardRef, useCallback, useContext, useRef } from 'react';
 import { VisuallyHidden, mergeProps, useFocusRing, useRadio } from 'react-aria';
 
 import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
@@ -32,9 +32,12 @@ function BaseSelectorRadioGroupOption(
 
   const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
 
-  const onItemClick = () => {
+  const onItemClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
     state.setSelectedValue(value);
-  };
+  }, [isDisabled, state, value]);
 
   return (
     <FlexiCell

package/src/components/switch/switch.component.tsx

@@ -20,7 +20,7 @@ export function Switch({
   const labelId = useId();
   const ref = useRef(null);
   const { isSelected } = state;
-  const { inputProps } = useCheckbox(
+  const { inputProps, labelProps } = useCheckbox(
     { isDisabled, 'aria-labelledby': labelId, defaultSelected: checked, ...props },
     state,
     ref,
@@ -29,7 +29,7 @@ export function Switch({
   const styles = switchStyles({ block, isFocusVisible, isSelected, isDisabled, size });
 
   return (
-    <label className={styles.base({ className })}>
+    <label className={styles.base({ className })} {...labelProps}>
       <span className={styles.label()} id={labelId}>
         {label}
       </span>

package/src/tailwind/utils/generate-date-picker-component.ts

@@ -2,16 +2,15 @@ export const generateDatePicker = () => {
   return {
     '.date-picker': {
       '.duet-date__input': {
-        '@apply text-lg focus:!border-borderDark focus:!shadow-none focus:focus-outline border border-borderDark border-solid rounded':
-          {},
+        '@apply text-lg focus:!border-borderDark focus:!shadow-none border border-borderDark border-solid rounded': {},
       },
       '.duet-date__toggle': {
         '@apply shadow-none border-solid border-l !border-l-borderDark !bg-light touch-manipulation whitespace-nowrap transition hover:bg-white active:bg-white rounded-r':
           {},
-        '@apply focus:shadow-none focus:focus-outline': {},
+        '@apply focus:shadow-none': {},
       },
       '.duet-date__select select:focus + .duet-date__select-label': {
-        '@apply !focus-outline rounded': {},
+        '@apply rounded': {},
       },
       '.duet-date__toggle-icon': {
         '@apply w-[18px] h-[18px] bg-cover flex-auto': {},
@@ -100,17 +99,17 @@ export const generateDatePicker = () => {
         '@apply font-semibold': {},
       },
       '.duet-date__prev, .duet-date__next': {
-        '@apply bg-background focus:focus-outline !outline-offset-0 text-primary': {},
+        '@apply bg-background !outline-offset-0 text-primary': {},
       },
       '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
-        '@apply focus-outline !shadow-none': {},
+        '@apply !shadow-none': {},
         'outline-offset': '0 !important',
       },
 
       /* Calendar days */
       '.duet-date__day': {
         '@apply hover:!bg-primary/5 focus:!bg-white/0 focus:!text-text': {},
-        '@apply active:shadow active:focus-outline focus:focus-outline focus:!shadow-none !outline-offset-0': {},
+        '@apply active:shadow focus:!shadow-none !outline-offset-0': {},
         '&.is-today': {
           '@apply !shadow-primary !text-text !bg-primary/5 !border !border-solid !border-primary': {},
         },
@@ -124,9 +123,34 @@ export const generateDatePicker = () => {
         },
       },
       '.duet-date__close:focus': {
-        '@apply bg-light focus-outline': {},
+        '@apply bg-light': {},
         'outline-offset': '0 !important',
       },
+
+      /* Focused styles */
+      '&.date-picker-focused': {
+        '.duet-date__input': {
+          '@apply focus:focus-outline': {},
+        },
+        '.duet-date__toggle': {
+          '@apply focus:focus-outline': {},
+        },
+        '.duet-date__select select:focus + .duet-date__select-label': {
+          '@apply !focus-outline': {},
+        },
+        '.duet-date__prev, .duet-date__next': {
+          '@apply focus:focus-outline': {},
+        },
+        '.duet-date-dialog-select select:focus + .duet-date-dialog-select-label': {
+          '@apply focus-outline': {},
+        },
+        '.duet-date__day': {
+          '@apply active:focus-outline focus:focus-outline': {},
+        },
+        '.duet-date__close:focus': {
+          '@apply bg-light focus-outline': {},
+        },
+      },
     },
   };
 };