WestpacGEL · jaortiz · Feb 27, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/.changeset/late-pens-tell.md b/.changeset/late-pens-tell.md
@@ -0,0 +1,5 @@
+---
+'@westpac/eslint-config': minor
+---
+
+Upgrading to the latest prettier config
diff --git a/README.md b/README.md
@@ -67,7 +67,7 @@ Add a custom attribute tag `data-theme="brand_name"` to `html` tag. Note that in
 Following example shows adding `wbc` theme. You can add other valid brand names such as `stg`, `bom`, `bsa`, `rams`, `wbg` etc. as the value.
 
 ```html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en" data-theme="wbc">
   ...
 </html>

diff --git a/...brand-select/components/list-box/components/list-box-option/list-box-option.component.tsx b/...brand-select/components/list-box/components/list-box-option/list-box-option.component.tsx
@@ -15,7 +15,7 @@ export function Option({ item, state }: OptionProps) {
   const ref = React.useRef<HTMLAnchorElement>(null);
   const { isDisabled, isSelected, isFocused } = useOption(
     {
-      key: item.key,
+      key: item.key as any,
     },
     state,
     ref,

diff --git a/...]/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx b/...]/[...component]/components/content-tabs/components/tabs/components/tab/tab.component.tsx
@@ -8,7 +8,7 @@ export function Tab({ item, state }: { item: Node<AriaTabProps>; state: TabListS
   const { key, rendered } = item;
   const ref = useRef(null);
   const { focusProps, isFocusVisible } = useFocusRing();
-  const { tabProps } = useTab({ key }, state, ref);
+  const { tabProps } = useTab({ key: key as string | number }, state, ref);
   const selected = key === state.selectedKey;
   return (
     <div {...mergeProps(tabProps, focusProps)} ref={ref} className={styles({ selected, isFocusVisible })}>

diff --git a/...debar-select/components/list-box/components/list-box-option/list-box-option.component.tsx b/...debar-select/components/list-box/components/list-box-option/list-box-option.component.tsx
@@ -16,7 +16,7 @@ export function Option({ item, state }: OptionProps) {
   const { isFocusVisible, focusProps } = useFocusRing();
   const { optionProps, isDisabled, isSelected } = useOption(
     {
-      key: item.key,
+      key: item.key as string | number,
     },
     state,
     ref,

diff --git a/apps/site/src/content/design-system/components/autocomplete/design/autocomplete/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/autocomplete/content.mdoc
@@ -3,8 +3,7 @@
   hintMessage="Search for the appropriate colour"
   label="What colour is the sky?"
   noOptionsMessage="No options"
-  validationState="valid"
-size="large"
+  size="large"
 >
   <AutocompleteItem>
     Green

diff --git a/apps/site/src/content/design-system/components/autocomplete/design/error-state/content.mdoc b/apps/site/src/content/design-system/components/autocomplete/design/error-state/content.mdoc
@@ -6,8 +6,8 @@ All form elements have associated error states, see&nbsp;[Error messages](/conte
   hintMessage="Search for the appropriate colour"
   label="What colour is the sky?"
   noOptionsMessage="No options"
-  validationState="invalid"
-size="large"
+  invalid
+  size="large"
 >
   <AutocompleteItem>
     Green

diff --git a/apps/site/src/utils/generate-font-components.ts b/apps/site/src/utils/generate-font-components.ts
@@ -4,14 +4,17 @@ export const generateFontComponents = (
   typographySizes: Record<string, { fontSize: string; lineHeight: string }>,
   theme: PluginAPI['theme'],
 ) => {
-  return Object.entries(typographySizes).reduce((acc, [size, value]) => {
-    return {
-      ...acc,
-      [`.typography-site-${size}`]: {
-        fontSize: theme(`fontSize.body-${size}`),
-        lineHeight: theme(`lineHeight.${value.lineHeight}`),
-        fontFamily: theme(`fontFamily.gel-sans`),
-      },
-    };
-  }, {} as Record<string, any>);
+  return Object.entries(typographySizes).reduce(
+    (acc, [size, value]) => {
+      return {
+        ...acc,
+        [`.typography-site-${size}`]: {
+          fontSize: theme(`fontSize.body-${size}`),
+          lineHeight: theme(`lineHeight.${value.lineHeight}`),
+          fontFamily: theme(`fontFamily.gel-sans`),
+        },
+      };
+    },
+    {} as Record<string, any>,
+  );
 };
diff --git a/package.json b/package.json
@@ -31,7 +31,7 @@
     "@westpac/eslint-config": "workspace:~",
     "@westpac/ts-config": "workspace:~",
     "husky": "^8.0.3",
-    "prettier": "^2.8.4",
+    "prettier": "^3.2.5",
     "shx": "^0.3.4",
     "turbo": "^1.9.0"
   },

diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -15,12 +15,12 @@
     "eslint-import-resolver-typescript": "^3.5.5",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-n": "^15.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-sonarjs": "^0.18.0",
     "eslint-plugin-tailwindcss": "~3.13.0",
     "eslint-plugin-typescript-sort-keys": "^2.3.0",
-    "prettier": "^2.8.4"
+    "prettier": "^3.2.5"
   },
   "devDependencies": {
     "typescript": "^5.1.6"

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -266,7 +266,7 @@
     "plop": "~3.1.2",
     "postcss": "~8.4.31",
     "postcss-cli": "~10.1.0",
-    "prettier": "^2.8.4",
+    "prettier": "^3.2.5",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-docgen-typescript": "~2.2.2",
@@ -283,14 +283,14 @@
   },
   "dependencies": {
     "@duetds/date-picker": "~1.4.0",
-    "@react-aria/accordion": "3.0.0-alpha.19",
-    "@react-aria/utils": "~3.18.0",
-    "@react-spectrum/utils": "~3.10.0",
+    "@react-aria/accordion": "3.0.0-alpha.27",
+    "@react-aria/utils": "~3.23.2",
+    "@react-spectrum/utils": "~3.11.5",
     "clsx": "^1.2.1",
     "framer-motion": "~10.12.16",
     "lodash.throttle": "~4.1.1",
-    "react-aria": "~3.25.0",
-    "react-stately": "~3.23.0"
+    "react-aria": "~3.32.1",
+    "react-stately": "~3.30.1"
   },
   "overrides": {
     "react-aria": {

diff --git a/packages/ui/src/components/accordion/accordion.component.tsx b/packages/ui/src/components/accordion/accordion.component.tsx
@@ -4,7 +4,7 @@ import { useAccordion } from '@react-aria/accordion';
 import { filterDOMProps } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
 import React, { Children, cloneElement, forwardRef, isValidElement } from 'react';
-import { Item, useTreeState } from 'react-stately';
+import { Item, type ItemProps, useTreeState } from 'react-stately';
 
 import { styles } from './accordion.styles.js';
 import { type AccordionProps } from './accordion.types.js';
@@ -24,7 +24,7 @@ function Accordion<T extends object>(
       // equal to (if (child == null || typeof child == 'string'))
       if (!isValidElement(child)) return child;
       return cloneElement(child, {
-        ...child.props,
+        ...(child.props as any),
         // Adding hasChildItems false by default
         hasChildItems: false,
       });
@@ -52,4 +52,4 @@ const _Accordion = forwardRef(Accordion) as unknown as { displayName: string } &
 _Accordion.displayName = 'Accordion';
 
 export { _Accordion as Accordion };
-export const AccordionItem = Item;
+export const AccordionItem: <T>(props: ItemProps<T>) => JSX.Element = Item;
diff --git a/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx b/packages/ui/src/components/accordion/components/accordion-item/accordion-item.component.tsx
@@ -20,8 +20,8 @@ export function AccordionItem<T = any>({
   const { state, item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
-  const isOpen = state.expandedKeys.has(item.key);
-  const isDisabled = state.disabledKeys.has(item.key);
+  const isOpen = state.expandedKeys.has(item.key as any);
+  const isDisabled = state.disabledKeys.has(item.key as any);
   const { hoverProps } = useHover({ isDisabled });
   const { direction } = useLocale();
   const styles = accordionItemStyles({ isOpen, isDisabled, look, isFocusVisible });

diff --git a/packages/ui/src/components/autocomplete/autocomplete.stories.tsx b/packages/ui/src/components/autocomplete/autocomplete.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { Key, useState } from 'react';
+import { useState } from 'react';
 
 import { FIXED_WIDTHS } from '../../constants/input-widths.js';
 
@@ -57,8 +57,8 @@ export const Default: Story = {
 export const Controlled: Story = {
   args: {},
   render: () => {
-    const [selectedKey, setSelectedKey] = useState<Key>();
-    const handleSelectionChange = (key: Key) => {
+    const [selectedKey, setSelectedKey] = useState<string | number>();
+    const handleSelectionChange = (key: string | number) => {
       setSelectedKey(key);
     };
     return (
@@ -176,7 +176,6 @@ export const ErrorMessageAndLabel: Story = {
   args: {
     label: 'Are you an existing customer?',
     errorMessage: 'This is an inline error message',
-    validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
     noOptionsMessage: 'No options',
     invalid: true,

diff --git a/...st-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx b/...st-box/components/autocomplete-list-box-option/autocomplete-list-box-option.component.tsx
@@ -18,7 +18,7 @@ export function AutocompleteListBoxOption({ item, state }: AutocompleteListBoxOp
 
   const { optionProps, isDisabled, isSelected, isFocused } = useOption(
     {
-      key: item.key,
+      key: item.key as any,
     },
     state,
     ref,

diff --git a/packages/ui/src/components/button-group/button-group.component.tsx b/packages/ui/src/components/button-group/button-group.component.tsx
@@ -4,25 +4,72 @@ import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js';
 
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
 
 export const ButtonGroupContext = createContext<ButtonGroupContextState>({
-  // 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,
   block: false,
   look: 'hero',
   size: 'medium',
+  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 ButtonGroup({
@@ -56,7 +103,7 @@ export function ButtonGroup({
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
       <div className={styles.buttonWrapper()}>
-        <ButtonGroupContext.Provider value={{ ...state, size, look, block }}>
+        <ButtonGroupContext.Provider value={{ state, size, look, block }}>
           {buttons.map((button, index) => (
             <ButtonGroupButton key={index} className="group/buttons" {...button} />
           ))}

diff --git a/packages/ui/src/components/button-group/button-group.types.ts b/packages/ui/src/components/button-group/button-group.types.ts
@@ -46,5 +46,12 @@ export type ButtonGroupContextState = {
    * Controls look of `Button` components, can't be applied directly to `Button`
    */
   look?: 'hero' | 'primary';
-} & RadioGroupState &
-  Pick<ButtonProps, 'size'>;
+  /**
+   * Controls look of `Button` components, can't be applied directly to `Button`
+   */
+  size: ButtonProps['size'];
+  /**
+   * Radio group state
+   */
+  state: RadioGroupState;
+};
diff --git a/.../components/button-group/components/button-group-button/button-group-button.component.tsx b/.../components/button-group/components/button-group-button/button-group-button.component.tsx
@@ -10,8 +10,7 @@ import { styles as buttonStyles } from './button-group-button.styles.js';
 import { type ButtonGroupButtonProps } from './button-group-button.types.js';
 
 export function ButtonGroupButton({ className, label, ...props }: ButtonGroupButtonProps) {
-  const state = useContext(ButtonGroupContext);
-  const { size, look, block } = state;
+  const { state, size, look, block } = useContext(ButtonGroupContext);
   const ref = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();

diff --git a/...i/src/components/button-group/components/button-group-button/button-group-button.spec.tsx b/...i/src/components/button-group/components/button-group-button/button-group-button.spec.tsx