@westpac/ui 0.16.0 → 0.18.0

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

@@ -16,22 +16,69 @@ function _extends() {
 import React, { createContext, useEffect, useId, useMemo, useRef, useState } from 'react';
 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';
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 export const RadioGroupContext = createContext({
-    name: '',
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    validationState: null,
-    selectedValue: null,
-    setSelectedValue: ()=>null,
-    lastFocusedValue: null,
-    setLastFocusedValue: ()=>null,
     orientation: 'vertical',
-    size: 'medium'
+    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() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        resetValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        commitValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        }
+    }
 });
 export function RadioGroup({ className , radios , label , orientation ='vertical' , showAmount =0 , size ='medium' , errorMessage , hintMessage , ...props }) {
     const state = useRadioGroupState({
@@ -84,7 +131,7 @@ export function RadioGroup({ className , radios , label , orientation ='vertical
         id: panelId
     }, React.createElement(RadioGroupContext.Provider, {
         value: {
-            ...state,
+            state,
             orientation,
             size
         }

package/dist/components/radio-group/radio-group.types.d.ts

@@ -37,4 +37,8 @@ export type RadioGroupContextState = {
      * Controls size of `Radio` components, can't be applied directly on `Radio`
      */
     size: 'medium' | 'large';
-} & RadioGroupState;
+    /**
+     * State
+     */
+    state: RadioGroupState;
+};

package/dist/components/repeater/repeater.component.js

@@ -126,7 +126,8 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
             look: "link",
             size: "small",
             soft: true,
-            onClick: ()=>handleRemove(item.id, index)
+            onClick: ()=>handleRemove(item.id, index),
+            type: "button"
         }, "Remove")));
     })))), React.createElement("div", {
         className: styles.footer()
@@ -139,7 +140,8 @@ export function Repeater({ addText ='Add another item' , indexTag: ItemIndex = '
         look: "link",
         size: "small",
         soft: true,
-        onClick: ()=>handleAdd()
+        onClick: ()=>handleAdd(),
+        type: "button"
     }, addText)), React.createElement(VisuallyHidden, {
         role: "status"
     }, status));

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

@@ -13,7 +13,7 @@ function _extends() {
     };
     return _extends.apply(this, arguments);
 }
-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';
 import { styles } from './selector-button-group.styles.js';
@@ -31,12 +31,14 @@ export function SelectorButtonGroup({ className , children , label , orientation
         selected,
         setSelected
     ]);
-    const state = {
-        value: selected,
-        onClick: (id)=>handleChange(id),
-        validationState: errorMessage ? 'invalid' : 'valid',
-        isDisabled
-    };
+    const state = useMemo(()=>({
+            value: selected,
+            onClick: (id)=>handleChange(id),
+            validationState: errorMessage ? 'invalid' : 'valid',
+            isDisabled
+        }), [
+        selected
+    ]);
     const { labelProps , fieldProps , descriptionProps , errorMessageProps  } = useField({
         validationState: state.validationState,
         label,

package/dist/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.js

@@ -16,6 +16,7 @@ function _extends() {
 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';
 export const SelectorCheckboxGroupContext = createContext({
@@ -27,7 +28,55 @@ export const SelectorCheckboxGroupContext = createContext({
     addValue: ()=>null,
     removeValue: ()=>null,
     toggleValue: ()=>null,
-    validationState: 'valid'
+    validationState: 'valid',
+    isInvalid: false,
+    isRequired: false,
+    setInvalid: function() {
+        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() {
+        throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    resetValidation: function() {
+        throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    },
+    commitValidation: function() {
+        throw new Error(FUNCTION_NOT_IMPLEMENTED);
+    }
 });
 export function SelectorCheckboxGroup(props) {
     const { children , label , description , errorMessage  } = props;

package/dist/components/selector/components/selector-radio-group/components/selector-radio-group-option/selector-radio-group-option.component.js

@@ -20,7 +20,7 @@ import { FlexiCell } from '../../../../../index.js';
 import { SelectorRadioGroupContext } from '../../selector-radio-group.component.js';
 import { styles as selectorRadioGroupOptionStyles } from './selector-radio-group-option.styles.js';
 function BaseSelectorRadioGroupOption({ className , children , value , withBorder =true , withArrow , after , before , checkIcon ='checkbox' , ...props }, ref) {
-    const state = useContext(SelectorRadioGroupContext);
+    const { state  } = useContext(SelectorRadioGroupContext);
     const localRef = useRef(null);
     const { inputProps , isSelected , isDisabled  } = useRadio({
         ...props,

package/dist/components/selector/components/selector-radio-group/selector-radio-group.component.js

@@ -16,19 +16,66 @@ function _extends() {
 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';
 export const SelectorRadioGroupContext = createContext({
-    name: '',
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    validationState: null,
-    selectedValue: null,
-    setSelectedValue: ()=>null,
-    lastFocusedValue: null,
-    setLastFocusedValue: ()=>null,
-    orientation: 'vertical'
+    orientation: 'vertical',
+    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() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        resetValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        },
+        commitValidation: function() {
+            throw new Error(FUNCTION_NOT_IMPLEMENTED);
+        }
+    }
 });
 export function SelectorRadioGroup({ className , children , label , orientation ='vertical' , errorMessage , description , ...props }) {
     const state = useRadioGroupState({
@@ -51,7 +98,7 @@ export function SelectorRadioGroup({ className , children , label , orientation
         })
     }, radioGroupProps), React.createElement(SelectorRadioGroupContext.Provider, {
         value: {
-            ...state,
+            state,
             orientation
         }
     }, children)));

package/dist/components/selector/components/selector-radio-group/selector-radio-group.types.d.ts

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

package/dist/components/tabs/components/tabs-tab/tabs-tab.component.js

@@ -18,7 +18,7 @@ import { styles } from './tabs-tab.styles.js';
 export function TabsTab({ item: { key , rendered  } , state , orientation , justify , color , look  }) {
     const ref = useRef(null);
     const { tabProps  } = useTab({
-        key
+        key: key
     }, state, ref);
     const { isFocusVisible , focusProps  } = useFocusRing();
     return React.createElement("div", _extends({}, mergeProps(tabProps, focusProps), {

package/dist/components/tabs/tabs.component.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" resolution-mode="require"/>
+import { AriaLinkOptions } from 'react-aria';
+import { ItemProps } from 'react-stately';
 import { type TabsProps } from './tabs.types.js';
-export declare function Tabs({ className, orientation, justify, children, color, look, sticky, stickyOffset, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
-export declare const TabsPanel: <T>(props: import("react-stately").ItemProps<T>) => JSX.Element;
+export declare function Tabs({ className, orientation, justify, children, color, look, sticky, stickyOffset, disabledKeys, selectedKey, defaultSelectedKey, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare const TabsPanel: (props: ItemProps<AriaLinkOptions> & AriaLinkOptions & {
+    href?: string;
+}) => JSX.Element;

package/dist/components/tabs/tabs.component.js

@@ -18,10 +18,13 @@ import { useTabList } from 'react-aria';
 import { Item, useTabListState } from 'react-stately';
 import { TabsTab, TabsTabPanel } from './components/index.js';
 import { styles as tabStyles } from './tabs.styles.js';
-export function Tabs({ className , orientation ='horizontal' , justify , children , color , look ='default' , sticky =false , stickyOffset ={} , ...props }) {
+export function Tabs({ className , orientation ='horizontal' , justify , children , color , look ='default' , sticky =false , stickyOffset ={} , disabledKeys , selectedKey , defaultSelectedKey , ...props }) {
     var _state_selectedItem;
     const state = useTabListState({
         ...props,
+        disabledKeys: disabledKeys,
+        selectedKey: selectedKey,
+        defaultSelectedKey: defaultSelectedKey,
         children
     });
     const styles = tabStyles({
@@ -32,6 +35,9 @@ export function Tabs({ className , orientation ='horizontal' , justify , childre
     const ref = useRef(null);
     const { tabListProps  } = useTabList({
         ...props,
+        disabledKeys: disabledKeys,
+        selectedKey: selectedKey,
+        defaultSelectedKey: defaultSelectedKey,
         orientation
     }, state, ref);
     return React.createElement("div", {

package/dist/constants/message.d.ts

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

package/dist/constants/message.js

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