@westpac/ui 0.17.0 → 0.19.0

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';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",
@@ -241,7 +241,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",
@@ -255,20 +255,20 @@
     "typescript": "^5.1.6",
     "vite": "^4.3.9",
     "vitest": "^0.30.1",
-    "@westpac/eslint-config": "~0.1.0",
+    "@westpac/eslint-config": "~0.2.1",
     "@westpac/test-config": "~0.0.0",
     "@westpac/ts-config": "~0.0.0"
   },
   "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": {

package/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;

package/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 });

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

@@ -112,7 +112,11 @@ export function Autocomplete<T extends object>({
 
       <div ref={outerRef} className={styles.outerWrapper()}>
         <div className={styles.iconWrapper()}>
-          {loadingState ? <ProgressIndicator size={iconSize} /> : <SearchIcon aria-hidden size={iconSize} />}
+          {loadingState ? (
+            <ProgressIndicator size={iconSize} color="muted" />
+          ) : (
+            <SearchIcon aria-hidden size={iconSize} color="muted" />
+          )}
         </div>
         <input
           {...mergeProps(inputProps, inputFocusProps)}

package/src/components/autocomplete/components/autocomplete-list-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,

package/src/components/autocomplete/components/autocomplete-list-box/components/autocomplete-list-box-option/autocomplete-list-box-option.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
+    base: 'flex cursor-pointer items-center justify-between border-t border-t-border bg-white p-2 px-3 text-sm text-text transition-colors first:border-t-0 hover:bg-hero hover:text-white focus:bg-hero focus:text-white',
     variants: {
       isFocused: {
         true: 'bg-hero !text-white',

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

@@ -1,5 +1,7 @@
+'use client';
+
 import { clsx } from 'clsx';
-import * as React from 'react';
+import React, { useMemo, useRef } from 'react';
 import { DismissButton, Overlay, usePopover } from 'react-aria';
 
 import { AutocompletePopoverProps } from './autocomplete-popover.types.js';
@@ -7,7 +9,7 @@ import { AutocompletePopoverProps } from './autocomplete-popover.types.js';
  * @private
  */
 export function AutocompletePopover(props: AutocompletePopoverProps) {
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const { popoverRef = ref, state, children, className, isNonModal, portalContainer } = props;
   const { popoverProps, underlayProps } = usePopover(
     {
@@ -17,9 +19,18 @@ export function AutocompletePopover(props: AutocompletePopoverProps) {
     state,
   );
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = useMemo(() => {
+    if (typeof window !== 'undefined') {
+      return (
+        document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body
+      );
+    }
+  }, []);
+
   const width = props.triggerRef.current?.getBoundingClientRect().width;
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer}>
       {!isNonModal && <div {...underlayProps} className="fixed inset-0" />}
 
       <div

package/src/components/bottom-sheet/components/bottom-sheet-dialog/bottom-sheet-dialog.styles.ts

@@ -4,8 +4,8 @@ export const styles = tv(
   {
     slots: {
       base: 'flex max-h-screen max-w-full flex-1 flex-col overflow-hidden rounded-t-md bg-white shadow-sm md:w-[37.5rem] md:rounded-md',
-      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold max-md:px-5',
-      body: 'flex-1 overflow-auto px-7 pb-7 max-md:px-5',
+      title: 'typography-body-7 p-7 pb-4 pt-9 font-bold text-text max-md:px-5',
+      body: 'flex-1 overflow-auto px-7 pb-7 text-text max-md:px-5',
       closeBtn: 'absolute right-3 top-3 p-0',
       buttonWrapper: '-mt-2 flex gap-1 px-7 pb-7 max-md:flex-col max-md:px-5 max-md:pb-5',
       primaryBtn: '',

package/src/components/bottom-sheet/components/bottom-sheet-modal/bottom-sheet-modal.component.tsx

@@ -1,6 +1,6 @@
 import { clsx } from 'clsx';
 import { PanInfo, motion, useAnimation } from 'framer-motion';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Overlay, useModalOverlay } from 'react-aria';
 
 import { BREAKPOINTS } from '../../../../tailwind/constants/index.js';
@@ -29,6 +29,15 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   const controls = useAnimation();
   const [isMobile, setIsMobile] = useState(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
 
+  // This is required so branding applies correctly by default due to portal location, can be overridden with portalContainer prop
+  const brandContainer = useMemo(() => {
+    if (isBrowser) {
+      return (
+        document.querySelector('[data-theme]') || document.querySelector('[className="data-theme"]') || document.body
+      );
+    }
+  }, []);
+
   useEffect(() => {
     function handleResize() {
       setIsMobile(checkIfItIsMobile(MEDIUM_BREAKPOINT_AS_NUMBER));
@@ -65,7 +74,7 @@ export function BottomSheetModal({ state, height, width, children, portalContain
   }
 
   return (
-    <Overlay portalContainer={portalContainer}>
+    <Overlay portalContainer={portalContainer || brandContainer}>
       <div className={styles.underlay()} {...underlayProps}>
         <motion.div
           animate={controls}

package/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} />
           ))}

package/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;
+};

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

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

@@ -4,6 +4,7 @@ import React, { createContext, useEffect, useId, useMemo, useRef, useState } fro
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
+import { FUNCTION_NOT_IMPLEMENTED } from '../../constants/message.js';
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
 import { CheckboxGroupCheckbox, ErrorMessage, Hint, Label } from '../index.js';
@@ -14,15 +15,66 @@ import { type CheckboxGroupContextState, type CheckboxGroupProps } from './check
 export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
   orientation: 'vertical',
   size: 'medium',
-  value: [],
-  isDisabled: false,
-  isReadOnly: false,
-  isSelected: () => false,
-  setValue: () => null,
-  addValue: () => null,
-  removeValue: () => null,
-  toggleValue: () => null,
-  validationState: 'valid',
+  state: {
+    value: [],
+    isDisabled: false,
+    isReadOnly: false,
+    isSelected: () => false,
+    setValue: () => null,
+    addValue: () => null,
+    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 CheckboxGroup({
   className,
@@ -65,7 +117,7 @@ export function CheckboxGroup({
         <ErrorMessage {...errorMessageProps} message={errorMessage} />
       )}
       <div className={styles.itemWrapper()} id={panelId}>
-        <CheckboxGroupContext.Provider value={{ ...state, orientation, size }}>
+        <CheckboxGroupContext.Provider value={{ state, orientation, size }}>
           {childrenToRender}
         </CheckboxGroupContext.Provider>
         {hiddenOptions && (

package/src/components/checkbox-group/checkbox-group.types.ts

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

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

@@ -32,8 +32,7 @@ function CheckIcon({ copyrightYear = '2024', size, ...props }: IconProps) {
 }
 
 function BaseCheckbox({ className, hint, label, value, ...props }: CheckboxGroupCheckboxProps, ref: any) {
-  const state = useContext(CheckboxGroupContext);
-  const { size, orientation } = state;
+  const { state, size, orientation } = useContext(CheckboxGroupContext);
   const localRef = useRef(null);
   const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem(
     { ...props, value, children: label },