@westpac/ui 0.16.0 → 0.18.0

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}`]: {},

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

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

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

@@ -1,35 +0,0 @@
-function _extends() {
-    _extends = Object.assign || function(target) {
-        for(var i = 1; i < arguments.length; i++){
-            var source = arguments[i];
-            for(var key in source){
-                if (Object.prototype.hasOwnProperty.call(source, key)) {
-                    target[key] = source[key];
-                }
-            }
-        }
-        return target;
-    };
-    return _extends.apply(this, arguments);
-}
-import React, { Fragment } from 'react';
-import { Icon } from '../icon.component.js';
-export function TwitterIcon({ look ='filled' , 'aria-label': ariaLabel = 'Twitter' , copyrightYear ='2024' , ...props }) {
-    return React.createElement(Icon, _extends({
-        "aria-label": ariaLabel,
-        copyrightYear: copyrightYear
-    }, props), look === 'filled' ? React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z",
-        fill: "currentColor"
-    }) : React.createElement(Fragment, null, React.createElement("path", {
-        d: "M18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z",
-        fill: "currentColor"
-    }), React.createElement("path", {
-        fillRule: "evenodd",
-        clipRule: "evenodd",
-        d: "M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2V2Z",
-        fill: "currentColor"
-    })));
-}

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

@@ -1,37 +0,0 @@
-import React, { Fragment } from 'react';
-
-import { Icon } from '../icon.component.js';
-import { type IconProps } from '../icon.types.js';
-
-export function TwitterIcon({
-  look = 'filled',
-  'aria-label': ariaLabel = 'Twitter',
-  copyrightYear = '2024',
-  ...props
-}: IconProps) {
-  return (
-    <Icon aria-label={ariaLabel} copyrightYear={copyrightYear} {...props}>
-      {look === 'filled' ? (
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M2 0C0.895431 0 0 0.89543 0 2V22C0 23.1046 0.89543 24 2 24H22C23.1046 24 24 23.1046 24 22V2C24 0.895431 23.1046 0 22 0H2ZM18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z"
-          fill="currentColor"
-        />
-      ) : (
-        <Fragment>
-          <path
-            d="M18.1146 7.34209C18.7788 7.26155 19.4119 7.08237 20 6.81641C19.5605 7.48568 19.003 8.07379 18.3618 8.54452C18.368 8.68749 18.3712 8.83233 18.3712 8.97655C18.3712 13.3898 15.0691 18.4799 9.032 18.4799C7.1784 18.4799 5.45216 17.9261 4 16.9784C4.25597 17.0096 4.51506 17.0259 4.7804 17.0259C6.31809 17.0259 7.72905 16.4921 8.85219 15.5962C7.41626 15.5693 6.19572 14.6035 5.77743 13.2768C5.97846 13.3156 6.167 13.3362 6.37802 13.3362C6.6777 13.3362 6.93429 13.2956 7.20899 13.2194C5.70813 12.9122 4.50944 11.5625 4.50944 9.94487V9.90241C5.13376 10.1534 5.52583 10.3032 6.06337 10.3207C5.18308 9.72198 4.67052 8.69935 4.67052 7.54062C4.67052 6.92879 4.83221 6.35504 5.11503 5.86183C6.73451 7.88212 9.15249 9.21192 11.8801 9.35114C11.8239 9.10641 11.7952 8.85169 11.7952 8.58947C11.7952 6.74586 13.2655 5.25 15.0773 5.25C16.0219 5.25 16.8747 5.65581 17.4734 6.30447C18.2213 6.15401 18.9237 5.87681 19.558 5.49473C19.312 6.27388 18.7919 6.92879 18.1146 7.34209Z"
-            fill="currentColor"
-          />
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM2 2H22V22H2V2Z"
-            fill="currentColor"
-          />
-        </Fragment>
-      )}
-    </Icon>
-  );
-}