@westpac/ui 0.17.0 → 0.18.0

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/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();

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

@@ -4,23 +4,70 @@ import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../../../constants/message.js';
 import { ErrorMessage, Hint, Label } from '../../../index.js';
 
 import { styles } from './selector-radio-group.styles.js';
 import { type SelectorRadioGroupContextState, type SelectorRadioGroupProps } from './selector-radio-group.types.js';
 
 export const SelectorRadioGroupContext = createContext<SelectorRadioGroupContextState>({
-  // 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',
+  state: {
+    // 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,
+    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 SelectorRadioGroup({
@@ -46,7 +93,7 @@ export function SelectorRadioGroup({
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
       <div className={styles({ className, orientation })} {...radioGroupProps}>
-        <SelectorRadioGroupContext.Provider value={{ ...state, orientation }}>
+        <SelectorRadioGroupContext.Provider value={{ state, orientation }}>
           {children}
         </SelectorRadioGroupContext.Provider>
       </div>

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

@@ -24,4 +24,8 @@ export type SelectorRadioGroupContextState = {
    * Controls orientation of `Radio` components, can't be applied directly on `Radio`
    */
   orientation: 'vertical' | 'horizontal';
-} & RadioGroupState;
+  /**
+   * Radio group state
+   */
+  state: RadioGroupState;
+};

package/src/components/tabs/components/tabs-tab/tabs-tab.component.tsx

@@ -6,7 +6,7 @@ import { type TabsTabProps } from './tabs-tab.types.js';
 
 export function TabsTab({ item: { key, rendered }, state, orientation, justify, color, look }: TabsTabProps) {
   const ref = useRef(null);
-  const { tabProps } = useTab({ key }, state, ref);
+  const { tabProps } = useTab({ key: key as any }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
   return (
     <div

package/src/components/tabs/tabs.component.tsx

@@ -1,8 +1,8 @@
 'use client';
 
 import React, { useRef } from 'react';
-import { useTabList } from 'react-aria';
-import { Item, useTabListState } from 'react-stately';
+import { AriaLinkOptions, useTabList } from 'react-aria';
+import { Item, ItemProps, useTabListState } from 'react-stately';
 
 import { TabsTab, TabsTabPanel } from './components/index.js';
 import { styles as tabStyles } from './tabs.styles.js';
@@ -17,13 +17,32 @@ export function Tabs({
   look = 'default',
   sticky = false,
   stickyOffset = {},
+  disabledKeys,
+  selectedKey,
+  defaultSelectedKey,
   ...props
 }: TabsProps) {
-  const state = useTabListState({ ...props, children });
+  const state = useTabListState({
+    ...props,
+    disabledKeys: disabledKeys as any,
+    selectedKey: selectedKey as any,
+    defaultSelectedKey: defaultSelectedKey as any,
+    children,
+  });
   const styles = tabStyles({ orientation, look, sticky });
 
   const ref = useRef(null);
-  const { tabListProps } = useTabList({ ...props, orientation }, state, ref);
+  const { tabListProps } = useTabList(
+    {
+      ...props,
+      disabledKeys: disabledKeys as any,
+      selectedKey: selectedKey as any,
+      defaultSelectedKey: defaultSelectedKey as any,
+      orientation,
+    },
+    state,
+    ref,
+  );
   return (
     <div className={styles.base({ className })}>
       <div style={{ ...tabListProps.style, ...stickyOffset }} {...tabListProps} className={styles.tabList()} ref={ref}>
@@ -44,4 +63,6 @@ export function Tabs({
   );
 }
 
-export const TabsPanel = Item;
+export const TabsPanel = Item as (
+  props: ItemProps<AriaLinkOptions> & AriaLinkOptions & { href?: string },
+) => JSX.Element;

package/src/constants/message.ts

@@ -0,0 +1 @@
+export const FUNCTION_NOT_IMPLEMENTED = 'Function not implemented';

package/src/tailwind/utils/create-font-sizes.ts

@@ -1,12 +1,15 @@
 import { FONT_SIZES } from '../constants/typography.js';
 
 export const createFontSizes = (fontTypes: string[]) => {
-  return fontTypes.reduce((acc, fontType) => {
-    return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
-      return {
-        ...acc2,
-        [`${fontType}-${fontSize}`]: value.fontSize,
-      };
-    }, acc);
-  }, {} as Record<string, any>);
+  return fontTypes.reduce(
+    (acc, fontType) => {
+      return Object.entries(FONT_SIZES).reduce((acc2, [fontSize, value]) => {
+        return {
+          ...acc2,
+          [`${fontType}-${fontSize}`]: value.fontSize,
+        };
+      }, acc);
+    },
+    {} as Record<string, any>,
+  );
 };

package/src/tailwind/utils/generate-font-components.ts

@@ -4,19 +4,22 @@ export const generateFontComponents = (
   typographySizes: Record<string, { fontSize: string; lineHeight: string }>,
   theme: PluginAPI['theme'],
 ) => {
-  return Object.entries(typographySizes).reduce((acc, [size, value]) => {
-    return {
-      ...acc,
-      [`.typography-body-${size}`]: {
-        fontSize: theme(`fontSize.body-${size}`),
-        lineHeight: theme(`lineHeight.${value.lineHeight}`),
-        fontFamily: theme(`fontFamily.sans`),
-      },
-      [`.typography-brand-${size}`]: {
-        fontSize: theme(`fontSize.brand-${size}`),
-        lineHeight: theme(`lineHeight.${value.lineHeight}`),
-        fontFamily: theme(`fontFamily.brand`),
-      },
-    };
-  }, {} as Record<string, any>);
+  return Object.entries(typographySizes).reduce(
+    (acc, [size, value]) => {
+      return {
+        ...acc,
+        [`.typography-body-${size}`]: {
+          fontSize: theme(`fontSize.body-${size}`),
+          lineHeight: theme(`lineHeight.${value.lineHeight}`),
+          fontFamily: theme(`fontFamily.sans`),
+        },
+        [`.typography-brand-${size}`]: {
+          fontSize: theme(`fontSize.brand-${size}`),
+          lineHeight: theme(`lineHeight.${value.lineHeight}`),
+          fontFamily: theme(`fontFamily.brand`),
+        },
+      };
+    },
+    {} as Record<string, any>,
+  );
 };

package/src/tailwind/utils/generate-form-control.ts

@@ -3,14 +3,17 @@ export const generateFormControlComponents = (formControlProps: {
   disabled: string;
   sizes: Record<string, string>;
 }) => {
-  const sizes = Object.entries(formControlProps.sizes).reduce((acc, [size, value]) => {
-    return {
-      ...acc,
-      [`.form-control-${size}`]: {
-        [`@apply ${value}`]: {},
-      },
-    };
-  }, {} as Record<string, any>);
+  const sizes = Object.entries(formControlProps.sizes).reduce(
+    (acc, [size, value]) => {
+      return {
+        ...acc,
+        [`.form-control-${size}`]: {
+          [`@apply ${value}`]: {},
+        },
+      };
+    },
+    {} as Record<string, any>,
+  );
   return {
     '.form-control': {
       [`@apply ${formControlProps.base}`]: {},