@okta/odyssey-react-mui 1.21.1 → 1.22.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
+
 ## [1.21.1](https://github.com/okta/odyssey/compare/v1.15.9...v1.21.1) (2024-08-07)
 
 ### Features

package/dist/Autocomplete.js

@@ -11,15 +11,14 @@ 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";
 const ListboxContainer = styled.div`
   width: 100%;
   height: 100%;
@@ -120,20 +119,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 +160,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","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","Row","data","index","setItemSize","style","rowRef","firstChild","firstElementChild","height","clientHeight","baseOption","key","props","styles","ref","children","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\";\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":"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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":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAY9EC,wBAAwB,EAExBC,eAAe;AAAA,SAGRC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAEnB,OAAO,MAAMC,sBAAsB,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU;AAsC9E,MAAMC,QAAQ,GAAGA,CAAC;EAChBC,SAAS;EACTC,cAAc;EACdC,EAAE,EAAEC,UAAU;EACdC,QAAQ;EACRC,SAAS;EACTC,gBAAgB;EAChBC,UAAU;EACVC,eAAe;EACfC,UAAU,GAAG,KAAK;EAClBC,UAAU;EACVC,KAAK,EAAEC,SAAS;EAChBC,IAAI;EACJC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC,UAAU;EAClBC,MAAM;EACNC,SAAS;EACTC,QAAQ,GAAG,SAAS;EACpBC;AACa,CAAC,KAAK;EACnB,MAAM;IAAEC;EAAE,CAAC,GAAGzC,cAAc,CAAC,CAAC;EAC9B,MAAM0C,kBAAkB,GAAGtC,MAAM,CAC/BG,eAAe,CAAC;IACdoC,eAAe,EAAErB,SAAS;IAC1BsB,iBAAiB,EAAErB;EACrB,CAAC,CACH,CAAC;EACD,MAAMsB,WAAW,GAAG1C,OAAO,CAAC,MAAM;IAChC,IAAIuC,kBAAkB,CAACI,OAAO,KAAKxC,wBAAwB,CAACyC,UAAU,EAAE;MACtE,OAAO;QAAEC,OAAO,EAAE1B;MAAU,CAAC;IAC/B;IACA,OAAO;MAAE2B,cAAc,EAAE1B;IAAiB,CAAC;EAC7C,CAAC,EAAE,CAACA,gBAAgB,EAAED,SAAS,CAAC,CAAC;EAEjC,MAAM4B,aAAa,GAAG9C,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBgB,QAAQ,EACR,OAAO;IACL8B,KAAK,EAAEA,CAAA,KAAM;MACXD,aAAa,CAACJ,OAAO,EAAEK,KAAK,CAAC,CAAC;IAChC;EACF,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMvB,KAAK,GAAGzB,OAAO,CAAC,MAAM;IAC1B,OACES,KAAA,CAAAE,SAAA;MAAAsC,QAAA,GACE1C,IAAA,CAACF,UAAU;QAAC6C,SAAS,EAAC,MAAM;QAAAD,QAAA,EAAEvB;MAAS,CAAa,CAAC,EACpDF,UAAU,IACTf,KAAA,CAAAE,SAAA;QAAAsC,QAAA,GACG,GAAG,EACJxC,KAAA,CAACJ,UAAU;UAAC6C,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAF,QAAA,GAAC,GAChD,EAACX,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CACH,EACAX,IAAI,IAAIpB,IAAA,CAAA6C,eAAA;QAAgBjB,SAAS,EAAEA,SAAU;QAAAc,QAAA,EAAEtB;MAAI,CAAiB,CAAC;IAAA,CACtE,CAAC;EAEP,CAAC,EAAE,CAACH,UAAU,EAAEE,SAAS,EAAEC,IAAI,EAAEW,CAAC,EAAEH,SAAS,CAAC,CAAC;EAE/C,MAAML,QAAQ,GAAG/B,WAAW,CAC1B,CAACsD,KAAK,EAAER,OAAO,KAAK;IAClBd,YAAY,GAAGsB,KAAK,EAAER,OAAO,CAAC;EAChC,CAAC,EACD,CAACd,YAAY,CACf,CAAC;EAED,MAAMuB,OAAO,GAAGvD,WAAW,CACxBsD,KAAK,IAAK;IACT,IAAI9B,UAAU,EAAE;MACd8B,KAAK,CAACE,eAAe,CAAC,CAAC;MACvBF,KAAK,CAACG,cAAc,CAAC,CAAC;IACxB;EACF,CAAC,EACD,CAACjC,UAAU,CACb,CAAC;EAED,MAAMS,MAAM,GAAGjC,WAAW,CACvBsD,KAAK,IAAK;IACTpB,UAAU,GAAGoB,KAAK,CAAC;EACrB,CAAC,EACD,CAACpB,UAAU,CACb,CAAC;EAED,MAAMwB,cAAc,GAAGzD,OAAO,CAC5B,OAAO;IACL0D,UAAU,EAAE,YAAY;IACxB,IAAInC,UAAU,IAAI;MAChBoC,MAAM,EAAE,SAAS;MACjB,uBAAuB,EAAE;QACvBA,MAAM,EAAE;MACV;IACF,CAAC;EACH,CAAC,CAAC,EACF,CAACpC,UAAU,CACb,CAAC;EAED,OACEhB,IAAA,CAAAqD,iBAAA;IACEC,EAAE,EAAEJ,cAAe;IACnB,cAAY3C,SAAU;IACtB,mBAAiBC,cAAe;IAChC+C,SAAS,EACP1B,QAAQ,KAAK,SAAS,GAClB,WAAW,GACXA,QAAQ,KAAK,OAAO,GAClB,WAAW,GACX,EACP;IACD2B,OAAO,EACLxD,IAAA,CAAAyD,SAAA;MAAA,GACMtB,WAAW;MACfuB,aAAa,EAAE3C,eAAgB;MAC/BQ,QAAQ,EAAEA,QAAS;MACnBwB,OAAO,EACLA,OACD;MACDY,QAAQ,EAAE1C,UAAW;MACrB2C,UAAU,EAAE;QACV,SAAS,EAAEjC,MAAM;QACjB,eAAe,EAAEX,UAAU;QAC3B6C,QAAQ,EAAE7C;MACZ,CAAE;MACF8C,QAAQ,EAAEhD,UAAW;MACrBH,QAAQ,EAAE6B,aAAc;MACxBc,EAAE,EAAE;QACFS,gBAAgB,EAAE;MACpB;IAAE,CACH,CACF;IACDD,QAAQ,EAAEhD,UAAW;IACrBL,EAAE,EAAEC,UAAW;IACfQ,KAAK,EAAEA,KAAM;IACbG,IAAI,EAAEC,YAAY,IAAIZ,UAAW;IACjCoB,KAAK,EAAEA,KAAM;IACb6B,QAAQ,EAAE1C,UAAW;IACrBQ,MAAM,EAAEA,MAAO;IACfG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,MAAMoC,gBAAgB,GAAGzE,IAAI,CAACe,QAAQ,CAAC;AACvC0D,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI1D,QAAQ"}

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,

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","ariaDescribedBy","children","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isRequired","label","testId","translate","renderFieldComponent","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactNode, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype CheckboxGroupRenderProps = Pick<\n  FieldComponentRenderProps,\n  \"id\" | \"labelElementId\"\n> &\n  Partial<\n    Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n  >;\n\nconst CheckboxGroup = ({\n  ariaDescribedBy,\n  children,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isRequired = false,\n  label,\n  testId,\n  translate,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: CheckboxGroupRenderProps) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        translate={translate}\n      >\n        {children}\n      </MuiFormGroup>\n    ),\n    [children, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAaC,WAAW,QAAQ,OAAO;AAAC,SAE5CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAuCd,MAAMC,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,MAAM;EACNC;AACkB,CAAC,KAAK;EACxB,MAAMC,oBAAoB,GAAGlB,WAAW,CACtC,CAAC;IACCK,eAAe;IACfc,qBAAqB;IACrBR,EAAE;IACFS;EACwB,CAAC,KACzBjB,IAAA,CAAAkB,UAAA;IACE,oBAAkBhB,eAAgB;IAClC,qBAAmBc,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASJ,MAAO;IAChBL,EAAE,EAAEA,EAAG;IACPM,SAAS,EAAEA,SAAU;IAAAX,QAAA,EAEpBA;EAAQ,CACG,CACf,EACD,CAACA,QAAQ,EAAEU,MAAM,EAAEC,SAAS,CAC9B,CAAC;EAED,OACEd,IAAA,CAACF,KAAK;IACJI,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCc,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBd,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBW,UAAU,EAAE,CAACV,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbG,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAG1B,IAAI,CAACK,aAAa,CAAC;AACjDqB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIrB,aAAa"}
+{"version":3,"file":"CheckboxGroup.js","names":["React","memo","useCallback","useMemo","Field","jsx","_jsx","CheckboxGroup","ariaDescribedBy","children","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","isRequired","label","testId","translate","memoizedChildren","Children","map","child","isValidElement","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.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 React, { memo, ReactNode, useCallback, useMemo } from \"react\";\nimport { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { CheckboxProps } from \"./Checkbox\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype CheckboxGroupRenderProps = Pick<\n  FieldComponentRenderProps,\n  \"id\" | \"labelElementId\"\n> &\n  Partial<\n    Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n  >;\n\nconst CheckboxGroup = ({\n  ariaDescribedBy,\n  children,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  isRequired = false,\n  label,\n  testId,\n  translate,\n}: CheckboxGroupProps) => {\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<CheckboxProps>(child)) {\n          return React.cloneElement(child, {\n            isReadOnly,\n            isDisabled: isDisabled || child.props.isDisabled,\n          });\n        }\n        return child;\n      }),\n    [children, isReadOnly, isDisabled],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: CheckboxGroupRenderProps) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiFormGroup>\n    ),\n    [memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,IAAI,EAAaC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAG5DC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwCd,MAAMC,aAAa,GAAGA,CAAC;EACrBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,UAAU,GAAG,KAAK;EAClBC,UAAU,GAAG,KAAK;EAClBC,KAAK;EACLC,MAAM;EACNC;AACkB,CAAC,KAAK;EACxB,MAAMC,gBAAgB,GAAGnB,OAAO,CAC9B,MACEH,KAAK,CAACuB,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAGgB,KAAK,IAAK;IACtC,IAAIzB,KAAK,CAAC0B,cAAc,CAAgBD,KAAK,CAAC,EAAE;MAC9C,OAAOzB,KAAK,CAAC2B,YAAY,CAACF,KAAK,EAAE;QAC/BR,UAAU;QACVD,UAAU,EAAEA,UAAU,IAAIS,KAAK,CAACG,KAAK,CAACZ;MACxC,CAAC,CAAC;IACJ;IACA,OAAOS,KAAK;EACd,CAAC,CAAC,EACJ,CAAChB,QAAQ,EAAEQ,UAAU,EAAED,UAAU,CACnC,CAAC;EAED,MAAMa,oBAAoB,GAAG3B,WAAW,CACtC,CAAC;IACCM,eAAe;IACfsB,qBAAqB;IACrBhB,EAAE;IACFiB;EACwB,CAAC,KACzBzB,IAAA,CAAA0B,UAAA;IACE,oBAAkBxB,eAAgB;IAClC,qBAAmBsB,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASX,MAAO;IAChBN,EAAE,EAAEA,EAAG;IACPO,SAAS,EAAEA,SAAU;IAAAZ,QAAA,EAEpBa;EAAgB,CACL,CACf,EACD,CAACA,gBAAgB,EAAEF,MAAM,EAAEC,SAAS,CACtC,CAAC;EAED,OACEf,IAAA,CAACF,KAAK;IACJI,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCsB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBtB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBmB,UAAU,EAAE,CAACjB,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbU,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,qBAAqB,GAAGnC,IAAI,CAACM,aAAa,CAAC;AACjD6B,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAI7B,aAAa"}

package/dist/DataTable/DataTable.js

@@ -73,6 +73,8 @@ const ScrollableTableContainer = styled("div", {
   }
 }));
 const DataTable = ({
+  additionalActionButton,
+  additionalActionMenuItems,
   bulkActionMenuItems,
   columns,
   currentPage = 1,
@@ -478,7 +480,7 @@ const DataTable = ({
     totalRows
   });
   return _jsxs(_Fragment, {
-    children: [(hasSearch || hasFilters || hasChangeableDensity || hasColumnVisibility || bulkActionMenuItems) && _jsx(Box, {
+    children: [(hasSearch || hasFilters || hasChangeableDensity || hasColumnVisibility || bulkActionMenuItems || additionalActionButton || additionalActionMenuItems) && _jsx(Box, {
       sx: {
         marginBottom: 5
       },
@@ -499,7 +501,13 @@ const DataTable = ({
             columns: columns,
             columnVisibility: columnVisibility,
             setColumnVisibility: setColumnVisibility
-          }), bulkActionMenuItems && bulkActionMenuButton]
+          }), bulkActionMenuItems && bulkActionMenuButton, additionalActionButton, additionalActionMenuItems && _jsx(MenuButton, {
+            endIcon: _jsx(MoreIcon, {}),
+            ariaLabel: t("table.moreactions.arialabel"),
+            buttonVariant: "secondary",
+            menuAlignment: "right",
+            children: additionalActionMenuItems
+          })]
         })
       })
     }), errorMessage && _jsx(Box, {