@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/CHANGELOG.md

@@ -3,6 +3,40 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.23.0](https://github.com/okta/odyssey/compare/v1.19.0...v1.23.0) (2024-09-19)
+
+### Features
+
+- add additional action button and menu slot to table ([#2334](https://github.com/okta/odyssey/issues/2334)) ([52b3f38](https://github.com/okta/odyssey/commit/52b3f3832adc442e0219be16fe8a4d96cf100a4e))
+- adds a generic top nav component ([#2296](https://github.com/okta/odyssey/issues/2296)) ([6f3165f](https://github.com/okta/odyssey/commit/6f3165f9fd4a1d1743c975b72132d4ec186d09bb))
+- adds new Shadow DOM export with better naming ([#2338](https://github.com/okta/odyssey/issues/2338)) ([0997e36](https://github.com/okta/odyssey/commit/0997e36afd4d241f5b3960528aff2865fb6d6ac3))
+- automatically scroll to the first isSelected SideNavItem ([#2325](https://github.com/okta/odyssey/issues/2325)) ([52ce441](https://github.com/okta/odyssey/commit/52ce44137ffe5601cfa6044782a21afb5449167e))
+
+### Bug Fixes
+
+- Add missing props to Storybook ([#2313](https://github.com/okta/odyssey/issues/2313)) ([bbf96a2](https://github.com/okta/odyssey/commit/bbf96a257160b922c0ebc31b1c5dec1fe31c35b4))
+- fixes translations not working with TypeScript ([#2354](https://github.com/okta/odyssey/issues/2354)) ([37653ee](https://github.com/okta/odyssey/commit/37653ee47c2fab8b54dec26efd5115f6633c2977))
+- **odyssey-design-tokens:** using correct weights in SB ([#2363](https://github.com/okta/odyssey/issues/2363)) ([2dfa614](https://github.com/okta/odyssey/commit/2dfa614cd4c09d71d8624be690ae788e134a74ba))
+- **odyssey-react-mui:** Add min-heights to keep correct heights ([#2324](https://github.com/okta/odyssey/issues/2324)) ([40d5a50](https://github.com/okta/odyssey/commit/40d5a5070ebfab1b650066e91b451c0ef4b3f2d8))
+- remove invalid pseudo element from theme overrides ([#2310](https://github.com/okta/odyssey/issues/2310)) ([fea0793](https://github.com/okta/odyssey/commit/fea0793acf0800494270a87e4e5d65129942b99e))
+- select multioption not rendering text when you use an options object ([#2323](https://github.com/okta/odyssey/issues/2323)) ([4bafbb9](https://github.com/okta/odyssey/commit/4bafbb99e03e52ad572fba9049013c058c75da38))
+- Update Test Selector types and improve functionality ([#2333](https://github.com/okta/odyssey/issues/2333)) ([7039009](https://github.com/okta/odyssey/commit/703900947861dfb36b8996414130a8db3414ccfa))
+
+## [1.22.0](https://github.com/okta/odyssey/compare/v1.19.0...v1.22.0) (2024-09-05)
+
+### Features
+
+- add additional action button and menu slot to table ([#2334](https://github.com/okta/odyssey/issues/2334)) ([52b3f38](https://github.com/okta/odyssey/commit/52b3f3832adc442e0219be16fe8a4d96cf100a4e))
+- adds a generic top nav component ([#2296](https://github.com/okta/odyssey/issues/2296)) ([6f3165f](https://github.com/okta/odyssey/commit/6f3165f9fd4a1d1743c975b72132d4ec186d09bb))
+- adds new Shadow DOM export with better naming ([#2338](https://github.com/okta/odyssey/issues/2338)) ([0997e36](https://github.com/okta/odyssey/commit/0997e36afd4d241f5b3960528aff2865fb6d6ac3))
+- automatically scroll to the first isSelected SideNavItem ([#2325](https://github.com/okta/odyssey/issues/2325)) ([52ce441](https://github.com/okta/odyssey/commit/52ce44137ffe5601cfa6044782a21afb5449167e))
+
+### Bug Fixes
+
+- **odyssey-react-mui:** Add min-heights to keep correct heights ([#2324](https://github.com/okta/odyssey/issues/2324)) ([40d5a50](https://github.com/okta/odyssey/commit/40d5a5070ebfab1b650066e91b451c0ef4b3f2d8))
+- remove invalid pseudo element from theme overrides ([#2310](https://github.com/okta/odyssey/issues/2310)) ([fea0793](https://github.com/okta/odyssey/commit/fea0793acf0800494270a87e4e5d65129942b99e))
+- select multioption not rendering text when you use an options object ([#2323](https://github.com/okta/odyssey/issues/2323)) ([4bafbb9](https://github.com/okta/odyssey/commit/4bafbb99e03e52ad572fba9049013c058c75da38))
+
 ## [1.21.2](https://github.com/okta/odyssey/compare/v1.21.1...v1.21.2) (2024-08-09)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/@types/i18next.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"i18next.d.js","names":[],"sources":["../../src/@types/i18next.d.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport \"i18next\";\nimport { translation as en } from \"../properties/ts/odyssey-react-mui\";\n\ndeclare module \"i18next\" {\n  interface CustomTypeOptions {\n    resources: {\n      translations: typeof en;\n    };\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAAS"}
+{"version":3,"file":"i18next.d.js","names":[],"sources":["../../src/@types/i18next.d.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport \"i18next\";\nimport { translation as en } from \"../properties/ts/odyssey-react-mui\";\n\ndeclare module \"i18next\" {\n  interface CustomTypeOptions {\n    resources: {\n      translation: typeof en;\n    };\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,SAAS"}

package/dist/Autocomplete.js

@@ -11,15 +11,44 @@ import _InputBase from "@mui/material/InputBase";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import styled from "@emotion/styled";
 import { VariableSizeList } from "react-window";
-import _AutoSizer from "react-virtualized-auto-sizer";
 import { useTranslation } from "react-i18next";
-const AutoSizer = _AutoSizer;
 import { Field } from "./Field.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+export const AutocompleteTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label"
+  },
+  children: {
+    list: {
+      children: {
+        listItem: {
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name"
+            },
+            role: "option"
+          }
+        }
+      },
+      isControlledElement: true
+    }
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name"
+    },
+    role: "combobox"
+  }
+};
 const ListboxContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -120,20 +149,37 @@ const Autocomplete = ({
       required: !isOptional
     })
   }), [ariaDescribedBy, errorMessage, errorMessageList, hint, HintLinkComponent, isFullWidth, isOptional, label, nameOverride, testId]);
-  const renderVirtualizedRow = ({
+  const Row = ({
     data,
     index,
+    setItemSize,
     style
   }) => {
-    const baseOption = data[index];
-    const optionItem = {
-      ...baseOption,
-      props: {
-        ...baseOption.props,
-        style
+    const rowRef = useRef(null);
+    useEffect(() => {
+      if (rowRef.current) {
+        const firstChild = rowRef.current.firstElementChild;
+        const height = firstChild ? firstChild.clientHeight : rowRef.current.clientHeight;
+        setItemSize(height);
       }
-    };
-    return optionItem;
+    }, [index, rowRef, setItemSize]);
+    const baseOption = data[index];
+    const {
+      key,
+      props
+    } = baseOption;
+    const styles = useMemo(() => ({
+      ...style,
+      height: "auto"
+    }), [style]);
+    return _jsx("div", {
+      ref: rowRef,
+      children: _createElement("li", {
+        ...props,
+        key: key,
+        style: styles
+      })
+    });
   };
   const OuterListboxContext = createContext({});
   const OuterListboxElementType = forwardRef((props, ref) => {
@@ -144,46 +190,68 @@ const Autocomplete = ({
       ...outerProps
     });
   });
-  function useResetCache(length) {
-    const ref = useRef(null);
+  const useResetCache = length => {
+    const resetCacheRef = useRef(null);
     useEffect(() => {
-      if (ref.current) {
-        ref.current.resetAfterIndex(0, true);
+      if (resetCacheRef.current) {
+        resetCacheRef.current.resetAfterIndex(0, true);
       }
     }, [length]);
-    return ref;
-  }
+    return resetCacheRef;
+  };
   const ListboxComponent = forwardRef(function (props, ref) {
+    const [listHeight, setListHeight] = useState(0);
     const {
       children,
       ...other
     } = props;
     const itemData = children.flatMap(item => [item].concat(item.children || []));
-    const optionHeight = 45;
-    const overscanRowCount = 8;
-    const itemSize = useCallback(() => optionHeight, []);
+    const sizeMap = useRef([]);
+    const getListBoxHeight = useCallback(() => {
+      const COMBINED_LISTBOX_PADDING = 16;
+      if (itemData.length > OVERSCAN_ROW_COUNT) {
+        return 99999;
+      } else {
+        const itemsHeightCalculated = itemData.map((_, index) => sizeMap.current[index] || 0).reduce((prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight, 0);
+        return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;
+      }
+    }, [itemData, sizeMap]);
+    useEffect(() => {
+      if (sizeMap.current.length && itemData.length) {
+        setListHeight(getListBoxHeight());
+      }
+    }, [getListBoxHeight, itemData, sizeMap]);
+    const OVERSCAN_ROW_COUNT = 8;
     const gridRef = useResetCache(itemData.length);
-    const renderWindow = useCallback(({
-      height,
-      width
-    }) => _jsx(VariableSizeList, {
-      innerElementType: "ul",
-      itemData: itemData,
-      itemCount: itemData.length,
-      itemSize: itemSize,
-      height: height,
-      width: width,
-      ref: gridRef,
-      outerElementType: OuterListboxElementType,
-      overscanCount: overscanRowCount,
-      children: renderVirtualizedRow
-    }), [itemData, gridRef, itemSize]);
+    const setItemSize = useCallback(size => {
+      gridRef?.current?.resetAfterIndex(0, true);
+      sizeMap.current = sizeMap.current.concat(size);
+    }, [gridRef, sizeMap]);
+    const getItemSize = useCallback(index => sizeMap.current[index] || 45, [sizeMap]);
     return _jsx(ListboxContainer, {
       ref: ref,
       children: _jsx(OuterListboxContext.Provider, {
         value: other,
-        children: _jsx(AutoSizer, {
-          children: renderWindow
+        children: _jsx(VariableSizeList, {
+          innerElementType: "ul",
+          itemData: itemData,
+          itemCount: itemData.length,
+          itemSize: getItemSize,
+          height: listHeight,
+          width: "100%",
+          ref: gridRef,
+          outerElementType: OuterListboxElementType,
+          overscanCount: OVERSCAN_ROW_COUNT,
+          children: ({
+            data,
+            index,
+            style
+          }) => _jsx(Row, {
+            data: data,
+            index: index,
+            style: style,
+            setItemSize: setItemSize
+          })
         })
       })
     });

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","styled","VariableSizeList","_AutoSizer","useTranslation","AutoSizer","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","ListboxContainer","div","Autocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","hint","HintLinkComponent","label","name","nameOverride","noOptionsText","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","t","controlledStateRef","controlledValue","uncontrolledValue","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","renderVirtualizedRow","data","index","style","baseOption","optionItem","props","OuterListboxContext","OuterListboxElementType","ref","outerProps","useResetCache","length","resetAfterIndex","ListboxComponent","children","other","itemData","flatMap","item","concat","optionHeight","overscanRowCount","itemSize","gridRef","renderWindow","height","width","innerElementType","itemCount","outerElementType","overscanCount","Provider","event","reason","details","_Autocomplete","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport {\n  createContext,\n  FC,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport _AutoSizer, {\n  Props as AutoSizerProps,\n  Size as AutoSizerSize,\n} from \"react-virtualized-auto-sizer\";\nimport { useTranslation } from \"react-i18next\";\n\n// This is required to get around a react-types issue for \"AutoSizer is not a valid JSX element.\"\n// @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246\nconst AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst ListboxContainer = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualized = useRef(Boolean(isVirtualizedProp));\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  const renderVirtualizedRow = ({\n    data,\n    index,\n    style,\n  }: ListChildComponentProps) => {\n    const baseOption = data[index];\n    /**\n     * react-window calculates the absolute positions of the list items, via an inline style, so\n     * we need to add it to each list item that is being rendered in the viewable list window.\n     * See here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n     */\n    const optionItem = { ...baseOption, props: { ...baseOption.props, style } };\n    return optionItem;\n  };\n\n  const OuterListboxContext = createContext({});\n\n  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n    const outerProps = useContext(OuterListboxContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  });\n\n  function useResetCache(length: number) {\n    const ref = useRef<VariableSizeList>(null);\n    useEffect(() => {\n      if (ref.current) {\n        ref.current.resetAfterIndex(0, true);\n      }\n    }, [length]);\n    return ref;\n  }\n\n  const ListboxComponent = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLElement>\n  >(function (props, ref) {\n    const { children, ...other } = props;\n    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(\n      (item: ReactElement & { children?: ReactElement[] }) =>\n        [item].concat(item.children || []),\n    );\n\n    // the height of an Odyssey autocomplete option item that is used to calculate height of window\n    const optionHeight = 45; //px\n\n    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n    const overscanRowCount = 8;\n\n    const itemSize = useCallback(() => optionHeight, []);\n\n    const gridRef = useResetCache(itemData.length);\n\n    const renderWindow = useCallback(\n      ({ height, width }: AutoSizerSize) => (\n        <VariableSizeList\n          innerElementType=\"ul\"\n          itemData={itemData}\n          itemCount={itemData.length}\n          // eslint-disable-next-line @typescript-eslint/no-unused-vars\n          itemSize={itemSize}\n          height={height}\n          width={width}\n          ref={gridRef}\n          outerElementType={OuterListboxElementType}\n          overscanCount={overscanRowCount}\n        >\n          {renderVirtualizedRow}\n        </VariableSizeList>\n      ),\n      [itemData, gridRef, itemSize],\n    );\n\n    return (\n      <ListboxContainer ref={ref}>\n        <OuterListboxContext.Provider value={other}>\n          <AutoSizer>{renderWindow}</AutoSizer>\n        </OuterListboxContext.Provider>\n      </ListboxContainer>\n    );\n  });\n\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualized.current && { ListboxComponent })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.js","names":["createContext","forwardRef","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","styled","VariableSizeList","useTranslation","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","createElement","_createElement","AutocompleteTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","ListboxContainer","div","Autocomplete","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","isVirtualized","isVirtualizedProp","HintLinkComponent","name","nameOverride","noOptionsText","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","value","getIsOptionEqualToValue","testId","translate","t","controlledStateRef","controlledValue","uncontrolledValue","Boolean","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","Row","data","index","setItemSize","style","rowRef","firstChild","firstElementChild","height","clientHeight","baseOption","key","props","styles","ref","OuterListboxContext","OuterListboxElementType","outerProps","useResetCache","length","resetCacheRef","resetAfterIndex","ListboxComponent","listHeight","setListHeight","other","itemData","flatMap","item","concat","sizeMap","getListBoxHeight","COMBINED_LISTBOX_PADDING","OVERSCAN_ROW_COUNT","itemsHeightCalculated","map","_","reduce","prevItemHeight","nextItemHeight","gridRef","size","getItemSize","Provider","innerElementType","itemCount","itemSize","width","outerElementType","overscanCount","event","reason","details","_Autocomplete","clearText","closeText","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","openText","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n  UseAutocompleteProps,\n  AutocompleteValue,\n  AutocompleteRenderInputParams,\n} from \"@mui/material\";\nimport {\n  createContext,\n  forwardRef,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { VariableSizeList, ListChildComponentProps } from \"react-window\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { TestSelector } from \"./test-selectors\";\n\nexport const AutocompleteTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      children: {\n        listItem: {\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\ntype SetItemSize = (size: number) => void;\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The text to display when no options are available\n   *\n   * default: \"No Options\"\n   */\n  noOptionsText?: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n\n  /**\n   * If this component is required to display a virtualized list of options,\n   * then this value needs to be set to true.\n   * It is recommended if you're options are on the order of 10's of hundreds or more.\n   */\n  isVirtualized?: boolean;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\nconst ListboxContainer = styled.div`\n  width: 100%;\n  height: 100%;\n`;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  isVirtualized: isVirtualizedProp = false,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  noOptionsText,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const isVirtualized = useRef(Boolean(isVirtualizedProp));\n\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({\n      InputLabelProps,\n      InputProps,\n      ...params\n    }: AutocompleteRenderInputParams) => (\n      <Field\n        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete\n        id={InputLabelProps.htmlFor}\n        isFullWidth={isFullWidth}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isFullWidth,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ],\n  );\n\n  const Row = ({\n    data,\n    index,\n    setItemSize,\n    style,\n  }: ListChildComponentProps & { setItemSize: SetItemSize }) => {\n    const rowRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (rowRef.current) {\n        /**\n         * Checking for child height to workaround a bug where the clientHeight of the row isn't updated correctly\n         * @see here if you need to know more: https://github.com/bvaughn/react-window/issues/582#issuecomment-1883074908\n         */\n        const firstChild = rowRef.current.firstElementChild;\n        const height = firstChild\n          ? firstChild.clientHeight\n          : rowRef.current.clientHeight;\n\n        setItemSize(height);\n      }\n    }, [index, rowRef, setItemSize]);\n\n    const baseOption = data[index];\n    const { key, props } = baseOption;\n\n    /**\n     * react-window calculates the absolute positions of the list items, via an inline style, so\n     * we need to add it to each list item that is being rendered in the viewable list window.\n     * @see here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll\n     */\n    const styles = useMemo(\n      () => ({\n        ...style,\n        height: \"auto\",\n      }),\n      [style],\n    );\n\n    return (\n      <div ref={rowRef}>\n        <li {...props} key={key} style={styles} />\n      </div>\n    );\n  };\n\n  const OuterListboxContext = createContext({});\n\n  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {\n    const outerProps = useContext(OuterListboxContext);\n    return <div ref={ref} {...props} {...outerProps} />;\n  });\n\n  const useResetCache = (length: number) => {\n    const resetCacheRef = useRef<VariableSizeList>(null);\n    useEffect(() => {\n      if (resetCacheRef.current) {\n        resetCacheRef.current.resetAfterIndex(0, true);\n      }\n    }, [length]);\n    return resetCacheRef;\n  };\n\n  const ListboxComponent = forwardRef<\n    HTMLDivElement,\n    HTMLAttributes<HTMLElement>\n  >(function (props, ref) {\n    const [listHeight, setListHeight] = useState(0);\n\n    const { children, ...other } = props;\n    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(\n      (item: ReactElement & { children?: ReactElement[] }) =>\n        [item].concat(item.children || []),\n    );\n\n    const sizeMap = useRef<number[]>([]);\n\n    const getListBoxHeight = useCallback(() => {\n      // 8px of padding top/bottom applied by MUI\n      const COMBINED_LISTBOX_PADDING = 16;\n\n      if (itemData.length > OVERSCAN_ROW_COUNT) {\n        // has a max-height of 40vh set in CSS. This is only set because height needs to be a number\n        return 99999;\n      } else {\n        const itemsHeightCalculated = itemData\n          .map((_, index) => sizeMap.current[index] || 0)\n          .reduce(\n            (prevItemHeight, nextItemHeight) => prevItemHeight + nextItemHeight,\n            0,\n          );\n        return COMBINED_LISTBOX_PADDING + itemsHeightCalculated;\n      }\n    }, [itemData, sizeMap]);\n\n    useEffect(() => {\n      if (sizeMap.current.length && itemData.length) {\n        setListHeight(getListBoxHeight());\n      }\n    }, [getListBoxHeight, itemData, sizeMap]);\n\n    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons\n    const OVERSCAN_ROW_COUNT = 8;\n\n    const gridRef = useResetCache(itemData.length);\n\n    const setItemSize = useCallback<SetItemSize>(\n      (size) => {\n        gridRef?.current?.resetAfterIndex(0, true);\n        sizeMap.current = sizeMap.current.concat(size);\n      },\n      [gridRef, sizeMap],\n    );\n    const getItemSize = useCallback(\n      // using 45px as a sane default here to avoid a lot of content shift on repaint\n      (index: number) => sizeMap.current[index] || 45,\n      [sizeMap],\n    );\n\n    return (\n      <ListboxContainer ref={ref}>\n        <OuterListboxContext.Provider value={other}>\n          <VariableSizeList\n            innerElementType=\"ul\"\n            itemData={itemData}\n            itemCount={itemData.length}\n            itemSize={getItemSize}\n            height={listHeight}\n            width=\"100%\"\n            ref={gridRef}\n            outerElementType={OuterListboxElementType}\n            overscanCount={OVERSCAN_ROW_COUNT}\n          >\n            {({ data, index, style }) => (\n              <Row\n                data={data}\n                index={index}\n                style={style}\n                setItemSize={setItemSize}\n              />\n            )}\n          </VariableSizeList>\n        </OuterListboxContext.Provider>\n      </ListboxContainer>\n    );\n  });\n\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp],\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp],\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // conditionally provide the ListboxComponent if this needs to be virtualized\n      {...(isVirtualized.current && {\n        ListboxComponent,\n      })}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      clearText={t(\"clear.text\")}\n      closeText={t(\"close.text\")}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      noOptionsText={noOptionsText}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      openText={t(\"open.text\")}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n      translate={translate}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAUA,SACEA,aAAa,EACbC,UAAU,EAEVC,IAAI,EAEJC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,iBAAiB;AACpC,SAASC,gBAAgB,QAAiC,cAAc;AACxE,SAASC,cAAc,QAAQ,eAAe;AAAC,SAEtCC,KAAK;AAAA,SAIZC,wBAAwB,EACxBC,cAAc,EACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,aAAA,IAAAC,cAAA;AAIjB,OAAO,MAAMC,wBAAwB,GAAG;EACtCC,cAAc,EAAE;IACdC,YAAY,EAAE,cAAc;IAC5BC,IAAI,EAAE,aAAa;IACnBC,KAAK,EAAE;EACT,CAAC;EACDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJD,QAAQ,EAAE;QACRE,QAAQ,EAAE;UACRC,eAAe,EAAE;YACfC,MAAM,EAAE,QAAQ;YAChBC,OAAO,EAAE;cACPN,KAAK,EAAE;YACT,CAAC;YACDO,IAAI,EAAE;UACR;QACF;MACF,CAAC;MACDC,mBAAmB,EAAE;IACvB;EACF,CAAC;EACDJ,eAAe,EAAE;IACfC,MAAM,EAAE,QAAQ;IAChBC,OAAO,EAAE;MACPN,KAAK,EAAE;IACT,CAAC;IACDO,IAAI,EAAE;EACR;AACF,CAAiC;AAiKjC,MAAME,gBAAgB,GAAGxB,MAAM,CAACyB,GAAI;AACpC;AACA;AACA,CAAC;AAED,MAAMC,YAAY,GAAGA,CAInB;EACAC,eAAe;EACfC,YAAY;EACZf,YAAY;EACZgB,gBAAgB;EAChBC,kBAAkB;EAClBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,oBAAoB;EACpBC,UAAU;EACVC,WAAW,GAAG,KAAK;EACnBC,SAAS;EACTC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,aAAa,EAAEC,iBAAiB,GAAG,KAAK;EACxC3B,IAAI;EACJ4B,iBAAiB;EACjB3B,KAAK;EACL4B,IAAI,EAAEC,YAAY;EAClBC,aAAa;EACbC,MAAM;EACNC,QAAQ,EAAEC,YAAY;EACtBC,aAAa,EAAEC,iBAAiB;EAChCC,OAAO;EACP9B,OAAO;EACP+B,KAAK;EACLC,uBAAuB;EACvBC,MAAM;EACNC;AACuE,CAAC,KAAK;EAC7E,MAAM;IAAEC;EAAE,CAAC,GAAGtD,cAAc,CAAC,CAAC;EAC9B,MAAMuD,kBAAkB,GAAG3D,MAAM,CAC/BQ,eAAe,CAAC;IACdoD,eAAe,EAAEN,KAAK;IACtBO,iBAAiB,EAAE/B;EACrB,CAAC,CACH,CAAC;EAED,MAAMY,aAAa,GAAG1C,MAAM,CAAC8D,OAAO,CAACnB,iBAAiB,CAAC,CAAC;EAExD,MAAMoB,gBAAgB,GAAGhE,OAAO,CAQ9B,MAAM;IACN,IAAIiC,kBAAkB,EAAE;MACtB,IAAIsB,KAAK,KAAKU,SAAS,EAAE;QACvB,OAAOlC,YAAY;MACrB;MACA,OAAO,EAAE;IAMX;IACA,OAAOwB,KAAK,KAAKU,SAAS,GAAGlC,YAAY,GAAGkC,SAAS;EACvD,CAAC,EAAE,CAAClC,YAAY,EAAEE,kBAAkB,EAAEsB,KAAK,CAAC,CAAC;EAE7C,MAAMW,UAAU,GAAG1D,cAAc,CAAC;IAChCuB,YAAY,EAAEiC,gBAAgB;IAC9BT,KAAK,EAAEA,KAAK;IACZY,YAAY,EAAEP,kBAAkB,CAACQ;EACnC,CAAC,CAAC;EAEF,MAAMC,cAAc,GAAGrE,OAAO,CAAC,MAAM;IACnC,IAAI4D,kBAAkB,CAACQ,OAAO,KAAK7D,wBAAwB,CAAC+D,UAAU,EAAE;MACtE,OAAO;QAAElC;MAAW,CAAC;IACvB;IACA,OAAO6B,SAAS;EAClB,CAAC,EAAE,CAAC7B,UAAU,CAAC,CAAC;EAEhB,MAAMmC,WAAW,GAAG1E,WAAW,CAC7B,CAAC;IACC2E,eAAe;IACfC,UAAU;IACV,GAAGC;EAC0B,CAAC,KAC9B/D,IAAA,CAACL,KAAK;IACJwB,eAAe,EAAEA,eAAgB;IACjCd,YAAY,EAAEA,YAAa;IAC3BgB,gBAAgB,EAAEA,gBAAiB;IACnC2C,SAAS,EAAC,QAAQ;IAClBC,eAAe;IAEf1C,EAAE,EAAEsC,eAAe,CAACK,OAAQ;IAC5BtC,WAAW,EAAEA,WAAY;IACzBtB,IAAI,EAAEA,IAAK;IACX4B,iBAAiB,EAAEA,iBAAkB;IACrC3B,KAAK,EAAEA,KAAM;IACbuB,UAAU,EAAEA,UAAW;IACvBqC,oBAAoB,EAAEA,CAAC;MACrBhD,eAAe;MACfI,EAAE;MACF6C,qBAAqB;MACrBC;IACF,CAAC,KACCrE,IAAA,CAAAsE,UAAA;MAAA,GACMP,MAAM;MAAA,GACND,UAAU;MACdS,UAAU,EAAE;QACV,GAAGR,MAAM,CAACQ,UAAU;QACpB,mBAAmB,EAAEH,qBAAqB;QAC1C,iBAAiB,EAAEC,cAAc;QACjC,SAAS,EAAEvB;MACb,CAAE;MACF,oBAAkB3B,eAAgB;MAClCI,EAAE,EAAEA,EAAG;MACPY,IAAI,EAAEC,YAAY,IAAIb,EAAG;MACzBiD,QAAQ,EAAE,CAAC1C;IAAW,CACvB;EACD,CACH,CACF,EACD,CACEX,eAAe,EACfd,YAAY,EACZgB,gBAAgB,EAChBf,IAAI,EACJ4B,iBAAiB,EACjBN,WAAW,EACXE,UAAU,EACVvB,KAAK,EACL6B,YAAY,EACZU,MAAM,CAEV,CAAC;EAED,MAAM2B,GAAG,GAAGA,CAAC;IACXC,IAAI;IACJC,KAAK;IACLC,WAAW;IACXC;EACsD,CAAC,KAAK;IAC5D,MAAMC,MAAM,GAAGxF,MAAM,CAAiB,IAAI,CAAC;IAE3CF,SAAS,CAAC,MAAM;MACd,IAAI0F,MAAM,CAACrB,OAAO,EAAE;QAKlB,MAAMsB,UAAU,GAAGD,MAAM,CAACrB,OAAO,CAACuB,iBAAiB;QACnD,MAAMC,MAAM,GAAGF,UAAU,GACrBA,UAAU,CAACG,YAAY,GACvBJ,MAAM,CAACrB,OAAO,CAACyB,YAAY;QAE/BN,WAAW,CAACK,MAAM,CAAC;MACrB;IACF,CAAC,EAAE,CAACN,KAAK,EAAEG,MAAM,EAAEF,WAAW,CAAC,CAAC;IAEhC,MAAMO,UAAU,GAAGT,IAAI,CAACC,KAAK,CAAC;IAC9B,MAAM;MAAES,GAAG;MAAEC;IAAM,CAAC,GAAGF,UAAU;IAOjC,MAAMG,MAAM,GAAGjG,OAAO,CACpB,OAAO;MACL,GAAGwF,KAAK;MACRI,MAAM,EAAE;IACV,CAAC,CAAC,EACF,CAACJ,KAAK,CACR,CAAC;IAED,OACE7E,IAAA;MAAKuF,GAAG,EAAET,MAAO;MAAAtE,QAAA,EACfN,cAAA;QAAA,GAAQmF,KAAK;QAAED,GAAG,EAAEA,GAAI;QAACP,KAAK,EAAES;MAAO,CAAE;IAAC,CACvC,CAAC;EAEV,CAAC;EAED,MAAME,mBAAmB,GAAGzG,aAAa,CAAC,CAAC,CAAC,CAAC;EAE7C,MAAM0G,uBAAuB,GAAGzG,UAAU,CAAiB,CAACqG,KAAK,EAAEE,GAAG,KAAK;IACzE,MAAMG,UAAU,GAAGvG,UAAU,CAACqG,mBAAmB,CAAC;IAClD,OAAOxF,IAAA;MAAKuF,GAAG,EAAEA,GAAI;MAAA,GAAKF,KAAK;MAAA,GAAMK;IAAU,CAAG,CAAC;EACrD,CAAC,CAAC;EAEF,MAAMC,aAAa,GAAIC,MAAc,IAAK;IACxC,MAAMC,aAAa,GAAGvG,MAAM,CAAmB,IAAI,CAAC;IACpDF,SAAS,CAAC,MAAM;MACd,IAAIyG,aAAa,CAACpC,OAAO,EAAE;QACzBoC,aAAa,CAACpC,OAAO,CAACqC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC;MAChD;IACF,CAAC,EAAE,CAACF,MAAM,CAAC,CAAC;IACZ,OAAOC,aAAa;EACtB,CAAC;EAED,MAAME,gBAAgB,GAAG/G,UAAU,CAGjC,UAAUqG,KAAK,EAAEE,GAAG,EAAE;IACtB,MAAM,CAACS,UAAU,EAAEC,aAAa,CAAC,GAAG1G,QAAQ,CAAC,CAAC,CAAC;IAE/C,MAAM;MAAEiB,QAAQ;MAAE,GAAG0F;IAAM,CAAC,GAAGb,KAAK;IACpC,MAAMc,QAAwB,GAAI3F,QAAQ,CAAoB4F,OAAO,CAClEC,IAAkD,IACjD,CAACA,IAAI,CAAC,CAACC,MAAM,CAACD,IAAI,CAAC7F,QAAQ,IAAI,EAAE,CACrC,CAAC;IAED,MAAM+F,OAAO,GAAGjH,MAAM,CAAW,EAAE,CAAC;IAEpC,MAAMkH,gBAAgB,GAAGtH,WAAW,CAAC,MAAM;MAEzC,MAAMuH,wBAAwB,GAAG,EAAE;MAEnC,IAAIN,QAAQ,CAACP,MAAM,GAAGc,kBAAkB,EAAE;QAExC,OAAO,KAAK;MACd,CAAC,MAAM;QACL,MAAMC,qBAAqB,GAAGR,QAAQ,CACnCS,GAAG,CAAC,CAACC,CAAC,EAAElC,KAAK,KAAK4B,OAAO,CAAC9C,OAAO,CAACkB,KAAK,CAAC,IAAI,CAAC,CAAC,CAC9CmC,MAAM,CACL,CAACC,cAAc,EAAEC,cAAc,KAAKD,cAAc,GAAGC,cAAc,EACnE,CACF,CAAC;QACH,OAAOP,wBAAwB,GAAGE,qBAAqB;MACzD;IACF,CAAC,EAAE,CAACR,QAAQ,EAAEI,OAAO,CAAC,CAAC;IAEvBnH,SAAS,CAAC,MAAM;MACd,IAAImH,OAAO,CAAC9C,OAAO,CAACmC,MAAM,IAAIO,QAAQ,CAACP,MAAM,EAAE;QAC7CK,aAAa,CAACO,gBAAgB,CAAC,CAAC,CAAC;MACnC;IACF,CAAC,EAAE,CAACA,gBAAgB,EAAEL,QAAQ,EAAEI,OAAO,CAAC,CAAC;IAGzC,MAAMG,kBAAkB,GAAG,CAAC;IAE5B,MAAMO,OAAO,GAAGtB,aAAa,CAACQ,QAAQ,CAACP,MAAM,CAAC;IAE9C,MAAMhB,WAAW,GAAG1F,WAAW,CAC5BgI,IAAI,IAAK;MACRD,OAAO,EAAExD,OAAO,EAAEqC,eAAe,CAAC,CAAC,EAAE,IAAI,CAAC;MAC1CS,OAAO,CAAC9C,OAAO,GAAG8C,OAAO,CAAC9C,OAAO,CAAC6C,MAAM,CAACY,IAAI,CAAC;IAChD,CAAC,EACD,CAACD,OAAO,EAAEV,OAAO,CACnB,CAAC;IACD,MAAMY,WAAW,GAAGjI,WAAW,CAE5ByF,KAAa,IAAK4B,OAAO,CAAC9C,OAAO,CAACkB,KAAK,CAAC,IAAI,EAAE,EAC/C,CAAC4B,OAAO,CACV,CAAC;IAED,OACEvG,IAAA,CAACgB,gBAAgB;MAACuE,GAAG,EAAEA,GAAI;MAAA/E,QAAA,EACzBR,IAAA,CAACwF,mBAAmB,CAAC4B,QAAQ;QAACxE,KAAK,EAAEsD,KAAM;QAAA1F,QAAA,EACzCR,IAAA,CAACP,gBAAgB;UACf4H,gBAAgB,EAAC,IAAI;UACrBlB,QAAQ,EAAEA,QAAS;UACnBmB,SAAS,EAAEnB,QAAQ,CAACP,MAAO;UAC3B2B,QAAQ,EAAEJ,WAAY;UACtBlC,MAAM,EAAEe,UAAW;UACnBwB,KAAK,EAAC,MAAM;UACZjC,GAAG,EAAE0B,OAAQ;UACbQ,gBAAgB,EAAEhC,uBAAwB;UAC1CiC,aAAa,EAAEhB,kBAAmB;UAAAlG,QAAA,EAEjCA,CAAC;YAAEkE,IAAI;YAAEC,KAAK;YAAEE;UAAM,CAAC,KACtB7E,IAAA,CAACyE,GAAG;YACFC,IAAI,EAAEA,IAAK;YACXC,KAAK,EAAEA,KAAM;YACbE,KAAK,EAAEA,KAAM;YACbD,WAAW,EAAEA;UAAY,CAC1B;QACF,CACe;MAAC,CACS;IAAC,CACf,CAAC;EAEvB,CAAC,CAAC;EAEF,MAAMrC,QAAQ,GAAGrD,WAAW,CAU1B,CAACyI,KAAK,EAAE/E,KAAK,EAAEgF,MAAM,EAAEC,OAAO,KAAK;IACjCrF,YAAY,GAAGmF,KAAK,EAAE/E,KAAK,EAAEgF,MAAM,EAAEC,OAAO,CAAC;EAC/C,CAAC,EACD,CAACrF,YAAY,CACf,CAAC;EAED,MAAMC,aAAa,GAAGvD,WAAW,CAU/B,CAACyI,KAAK,EAAE/E,KAAK,EAAEgF,MAAM,KAAK;IACxBlF,iBAAiB,GAAGiF,KAAK,EAAE/E,KAAK,EAAEgF,MAAM,CAAC;EAC3C,CAAC,EACD,CAAClF,iBAAiB,CACpB,CAAC;EAED,OACE1C,IAAA,CAAA8H,aAAA;IAAA,GACMvE,UAAU;IAAA,GACVG,cAAc;IAAA,IAEb1B,aAAa,CAACyB,OAAO,IAAI;MAC5BsC;IACF,CAAC;IAED,iBAAepE,UAAW;IAC1BoG,SAAS,EAAE/E,CAAC,CAAC,YAAY,CAAE;IAC3BgF,SAAS,EAAEhF,CAAC,CAAC,YAAY,CAAE;IAC3BiF,oBAAoB,EAAE3G,kBAAmB;IACzC4G,QAAQ,EAAEvG,UAAW;IACrBwG,QAAQ,EAAEzG,oBAAqB;IAC/B0G,qBAAqB,EAAE,IAAK;IAC5B7G,EAAE,EAAEC,UAAW;IACf6G,SAAS,EAAEzG,WAAY;IACvB0G,OAAO,EAAEzG,SAAU;IACnB0G,QAAQ,EAAEjH,kBAAmB;IAC7Be,aAAa,EAAEA,aAAc;IAC7BC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,aAAa,EAAEA,aAAc;IAC7BE,OAAO,EAAEA,OAAQ;IACjB6F,QAAQ,EAAExF,CAAC,CAAC,WAAW,CAAE;IACzBnC,OAAO,EAAEA,OAAQ;IACjB4H,QAAQ,EAAE1G,UAAW;IACrB6B,WAAW,EAAEA,WAAY;IACzB8E,oBAAoB,EAAE7F,uBAAwB;IAC9CE,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAGD,MAAM4F,oBAAoB,GAAG1J,IAAI,CAACiC,YAAY,CAAwB;AAEtEyH,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAIzH,YAAY"}

package/dist/Callout.js

@@ -22,40 +22,28 @@ import { Paragraph } from "./Typography.js";
 import { useUniqueId } from "./useUniqueId.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export const CalloutTestSelectors = {
-  feature: {
+export const CalloutTestSelector = {
+  accessibleText: {
+    text: "description",
+    title: "label"
+  },
+  children: {
     link: {
-      selector: {
+      elementSelector: {
         method: "ByRole",
         options: {
-          name: "${linkText}"
+          linkText: "name"
         },
-        role: "link",
-        templateVariableNames: ["linkText"]
-      }
-    },
-    text: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["text"],
-        text: "${text}"
-      }
-    },
-    title: {
-      selector: {
-        method: "ByText",
-        templateVariableNames: ["title"],
-        text: "${title}"
+        role: "link"
       }
     }
   },
-  selector: {
+  elementSelector: {
     method: "ByRole",
     options: {
-      name: "${title}"
+      title: "name"
     },
-    role: "${role}",
-    templateVariableNames: ["role", "title"]
+    role: ["alert", "status"]
   }
 };
 export const calloutRoleValues = ["status", "alert"];

package/dist/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","names":["styled","memo","useTranslation","useOdysseyDesignTokens","Paragraph","useUniqueId","jsx","_jsx","jsxs","_jsxs","CalloutTestSelectors","feature","link","selector","method","options","name","role","templateVariableNames","text","title","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","children","linkText","linkUrl","severity","testId","translate","t","titleId","_Alert","variant","_AlertTitle","id","_Box","component","_Link","href","MemoizedCallout","displayName"],"sources":["../src/Callout.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { Alert, AlertTitle, Box, Link as MuiLink } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { type FeatureTestSelector } from \"./test-selectors\";\nimport { Paragraph } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const CalloutTestSelectors = {\n  feature: {\n    link: {\n      selector: {\n        method: \"ByRole\",\n        options: {\n          name: \"${linkText}\",\n        },\n        role: \"link\",\n        templateVariableNames: [\"linkText\"],\n      },\n    },\n    text: {\n      selector: {\n        method: \"ByText\",\n        templateVariableNames: [\"text\"],\n        text: \"${text}\",\n      },\n    },\n    title: {\n      selector: {\n        method: \"ByText\",\n        templateVariableNames: [\"title\"],\n        text: \"${title}\",\n      },\n    },\n  },\n  selector: {\n    method: \"ByRole\",\n    options: {\n      name: \"${title}\",\n    },\n    role: \"${role}\",\n    templateVariableNames: [\"role\", \"title\"],\n  },\n} as const satisfies FeatureTestSelector;\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * Used to optionally pass a text list to the component\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      children?: never;\n      text: string;\n    }\n  | {\n      children: ReactNode;\n      text?: never;\n    }\n) &\n  (\n    | {\n        /**\n         * If linkUrl is not undefined, this is the text of the link.\n         * If left blank, it defaults to \"Learn more\".\n         * Note that linkText does nothing if linkUrl is not defined\n         */\n        linkUrl: string;\n        /**\n         * If defined, the Toast will include a link to the URL\n         */\n        linkText: string;\n      }\n    | {\n        linkUrl?: never;\n        linkText?: never;\n      }\n  ) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  \"& > * + *\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Callout = ({\n  children,\n  linkText,\n  linkUrl,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const titleId = useUniqueId();\n\n  return (\n    <Alert\n      aria-label={t(`severity.${severity}`)}\n      aria-labelledby={titleId}\n      data-se={testId}\n      role={role}\n      severity={severity}\n      variant=\"callout\"\n    >\n      {title && (\n        <AlertTitle aria-hidden id={titleId} translate={translate}>\n          {title}\n        </AlertTitle>\n      )}\n\n      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {children && <Box component=\"div\">{children}</Box>}\n        {text && <Paragraph>{text}</Paragraph>}\n        {linkUrl && (\n          <Box>\n            <MuiLink href={linkUrl} variant=\"monochrome\">\n              {linkText}\n            </MuiLink>\n          </Box>\n        )}\n      </ContentContainer>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":"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"}
+{"version":3,"file":"Callout.js","names":["styled","memo","useTranslation","useOdysseyDesignTokens","Paragraph","useUniqueId","jsx","_jsx","jsxs","_jsxs","CalloutTestSelector","accessibleText","text","title","children","link","elementSelector","method","options","linkText","role","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","linkUrl","severity","testId","translate","t","titleId","_Alert","variant","_AlertTitle","id","_Box","component","_Link","href","MemoizedCallout","displayName"],"sources":["../src/Callout.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport styled from \"@emotion/styled\";\nimport { Alert, AlertTitle, Box, Link as MuiLink } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { type TestSelector } from \"./test-selectors\";\nimport { Paragraph } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const CalloutTestSelector = {\n  accessibleText: {\n    text: \"description\",\n    title: \"label\",\n  },\n  children: {\n    link: {\n      elementSelector: {\n        method: \"ByRole\",\n        options: {\n          linkText: \"name\",\n        },\n        role: \"link\",\n      },\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      title: \"name\",\n    },\n    role: [\"alert\", \"status\"],\n  },\n} as const satisfies TestSelector;\n\nexport const calloutRoleValues = [\"status\", \"alert\"] as const;\nexport const calloutSeverityValues = [\n  \"success\",\n  \"info\",\n  \"warning\",\n  \"error\",\n] as const;\n\nexport type CalloutProps = {\n  /**\n   * Used to optionally pass a text list to the component\n   */\n  children?: ReactNode;\n  /**\n   * Sets the ARIA role of the Callout\n   * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n   * unchanging)\n   */\n  role?: (typeof calloutRoleValues)[number];\n  /**\n   * Determine the color and icon of the Callout\n   */\n  severity: (typeof calloutSeverityValues)[number];\n  /**\n   * The text content of the Callout\n   */\n  text?: string;\n  /**\n   * The title of the Callout\n   */\n  title?: string;\n} & (\n  | {\n      children?: never;\n      text: string;\n    }\n  | {\n      children: ReactNode;\n      text?: never;\n    }\n) &\n  (\n    | {\n        /**\n         * If linkUrl is not undefined, this is the text of the link.\n         * If left blank, it defaults to \"Learn more\".\n         * Note that linkText does nothing if linkUrl is not defined\n         */\n        linkUrl: string;\n        /**\n         * If defined, the Toast will include a link to the URL\n         */\n        linkText: string;\n      }\n    | {\n        linkUrl?: never;\n        linkText?: never;\n      }\n  ) &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst ContentContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})(({ odysseyDesignTokens }: { odysseyDesignTokens: DesignTokens }) => ({\n  \"& > * + *\": {\n    marginBlockStart: odysseyDesignTokens.Spacing4,\n  },\n}));\n\nconst Callout = ({\n  children,\n  linkText,\n  linkUrl,\n  role,\n  severity,\n  testId,\n  text,\n  title,\n  translate,\n}: CalloutProps) => {\n  const { t } = useTranslation();\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const titleId = useUniqueId();\n\n  return (\n    <Alert\n      aria-label={t(`severity.${severity}`)}\n      aria-labelledby={titleId}\n      data-se={testId}\n      role={role}\n      severity={severity}\n      variant=\"callout\"\n    >\n      {title && (\n        <AlertTitle aria-hidden id={titleId} translate={translate}>\n          {title}\n        </AlertTitle>\n      )}\n\n      <ContentContainer odysseyDesignTokens={odysseyDesignTokens}>\n        {children && <Box component=\"div\">{children}</Box>}\n        {text && <Paragraph>{text}</Paragraph>}\n        {linkUrl && (\n          <Box>\n            <MuiLink href={linkUrl} variant=\"monochrome\">\n              {linkText}\n            </MuiLink>\n          </Box>\n        )}\n      </ContentContainer>\n    </Alert>\n  );\n};\n\nconst MemoizedCallout = memo(Callout);\nMemoizedCallout.displayName = \"Callout\";\n\nexport { MemoizedCallout as Callout };\n"],"mappings":"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"}

package/dist/Checkbox.js

@@ -30,6 +30,7 @@ const Checkbox = ({
   isDefaultChecked,
   isDisabled,
   isIndeterminate,
+  isReadOnly = false,
   isRequired,
   label: labelProp,
   hint,
@@ -59,13 +60,11 @@ const Checkbox = ({
     };
   }, [isDefaultChecked, isChecked]);
   const localInputRef = useRef(null);
-  useImperativeHandle(inputRef, () => {
-    return {
-      focus: () => {
-        localInputRef.current?.focus();
-      }
-    };
-  }, []);
+  useImperativeHandle(inputRef, () => ({
+    focus: () => {
+      localInputRef.current?.focus();
+    }
+  }), []);
   const label = useMemo(() => {
     return _jsxs(_Fragment, {
       children: [_jsx(Typography, {
@@ -86,13 +85,26 @@ const Checkbox = ({
   const onChange = useCallback((event, checked) => {
     onChangeProp?.(event, checked);
   }, [onChangeProp]);
+  const onClick = useCallback(event => {
+    if (isReadOnly) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [isReadOnly]);
   const onBlur = useCallback(event => {
     onBlurProp?.(event);
   }, [onBlurProp]);
+  const checkboxStyles = useMemo(() => ({
+    alignItems: "flex-start",
+    ...(isReadOnly && {
+      cursor: "default",
+      "& .MuiTypography-root": {
+        cursor: "default"
+      }
+    })
+  }), [isReadOnly]);
   return _jsx(_FormControlLabel, {
-    sx: {
-      alignItems: "flex-start"
-    },
+    sx: checkboxStyles,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     className: validity === "invalid" ? "Mui-error" : validity === "valid" ? "Mui-valid" : "",
@@ -100,9 +112,12 @@ const Checkbox = ({
       ...inputValues,
       indeterminate: isIndeterminate,
       onChange: onChange,
+      onClick: onClick,
       required: isRequired,
       inputProps: {
-        "data-se": testId
+        "data-se": testId,
+        "aria-readonly": isReadOnly,
+        readOnly: isReadOnly
       },
       disabled: isDisabled,
       inputRef: localInputRef,

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","ComponentControlledState","getControlState","Typography","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","checkboxValidityValues","Checkbox","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","localInputRef","focus","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","inputProps","disabled","marginBlockStart","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n} from \"./inputUtils\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ref forwarded to the Checkbox\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"hint\" | \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  Pick<HtmlProps, \"ariaLabel\" | \"ariaLabelledBy\" | \"testId\" | \"translate\">;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t, translate]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n            ? \"Mui-valid\"\n            : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          disabled={isDisabled}\n          inputRef={localInputRef}\n          sx={{\n            marginBlockStart: \"2px\",\n          }}\n        />\n      }\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n      onBlur={onBlur}\n      translate={translate}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","ComponentControlledState","getControlState","Typography","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","checkboxValidityValues","Checkbox","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isReadOnly","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","localInputRef","focus","children","component","color","_FormHelperText","event","onClick","stopPropagation","preventDefault","checkboxStyles","alignItems","cursor","_FormControlLabel","sx","className","control","_Checkbox","indeterminate","required","inputProps","readOnly","disabled","marginBlockStart","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n} from \"./inputUtils\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ref forwarded to the Checkbox\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  Pick<HtmlProps, \"ariaLabel\" | \"ariaLabelledBy\" | \"testId\" | \"translate\">;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isReadOnly = false,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    }),\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => ({\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    }),\n    [],\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t, translate]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp],\n  );\n\n  const onClick = useCallback<NonNullable<MuiCheckboxProps[\"onClick\"]>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  const checkboxStyles = useMemo(\n    () => ({\n      alignItems: \"flex-start\",\n      ...(isReadOnly && {\n        cursor: \"default\",\n        \"& .MuiTypography-root\": {\n          cursor: \"default\",\n        },\n      }),\n    }),\n    [isReadOnly],\n  );\n\n  return (\n    <FormControlLabel\n      sx={checkboxStyles}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n            ? \"Mui-valid\"\n            : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          onClick={\n            onClick as unknown as React.MouseEventHandler<HTMLButtonElement>\n          }\n          required={isRequired}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-readonly\": isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          disabled={isDisabled}\n          inputRef={localInputRef}\n          sx={{\n            marginBlockStart: \"2px\",\n          }}\n        />\n      }\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n      onBlur={onBlur}\n      translate={translate}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}

package/dist/CheckboxGroup.js

@@ -10,7 +10,8 @@ import _FormGroup from "@mui/material/FormGroup";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback } from "react";
+
+import React, { memo, useCallback, useMemo } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CheckboxGroup = ({
@@ -22,11 +23,21 @@ const CheckboxGroup = ({
   HintLinkComponent,
   id: idOverride,
   isDisabled,
+  isReadOnly = false,
   isRequired = false,
   label,
   testId,
   translate
 }) => {
+  const memoizedChildren = useMemo(() => React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child, {
+        isReadOnly,
+        isDisabled: isDisabled || child.props.isDisabled
+      });
+    }
+    return child;
+  }), [children, isReadOnly, isDisabled]);
   const renderFieldComponent = useCallback(({
     ariaDescribedBy,
     errorMessageElementId,
@@ -39,8 +50,8 @@ const CheckboxGroup = ({
     "data-se": testId,
     id: id,
     translate: translate,
-    children: children
-  }), [children, testId, translate]);
+    children: memoizedChildren
+  }), [memoizedChildren, testId, translate]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,