@okta/odyssey-react-mui 1.14.8 → 1.15.8

package/CHANGELOG.md

@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.15.8](https://github.com/okta/odyssey/compare/v1.15.7...v1.15.8) (2024-03-22)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.15.7](https://github.com/okta/odyssey/compare/v1.15.6...v1.15.7) (2024-03-20)
+
+### Bug Fixes
+
+- add official support for lists in Callout ([63d3175](https://github.com/okta/odyssey/commit/63d317580e2a118ea3b3d37d3991de95f0a65120))
+
+## [1.15.6](https://github.com/okta/odyssey/compare/v1.15.5...v1.15.6) (2024-03-19)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.15.5](https://github.com/okta/odyssey/compare/v1.15.4...v1.15.5) (2024-03-19)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.15.4](https://github.com/okta/odyssey/compare/v1.15.3...v1.15.4) (2024-03-18)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.15.3](https://github.com/okta/odyssey/compare/v1.15.2...v1.15.3) (2024-03-18)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.15.2](https://github.com/okta/odyssey/compare/v1.15.1...v1.15.2) (2024-03-13)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.15.1](https://github.com/okta/odyssey/compare/v1.15.0...v1.15.1) (2024-03-12)
+
+### Bug Fixes
+
+- upgrade react types to fix component type from memo wrapper ([#2144](https://github.com/okta/odyssey/issues/2144)) ([ead53ee](https://github.com/okta/odyssey/commit/ead53ee7b2485569b711474a936cf7204cef7ee8))
+
+## [1.15.0](https://github.com/okta/odyssey/compare/v1.14.10...v1.15.0) (2024-03-12)
+
+### Features
+
+- allow virtualization of autocomplete ([#2122](https://github.com/okta/odyssey/issues/2122)) ([a8d8c3c](https://github.com/okta/odyssey/commit/a8d8c3c895f539c61be15224e12d9fb0762fdf10))
+
+## [1.14.10](https://github.com/okta/odyssey/compare/v1.14.9...v1.14.10) (2024-03-11)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.14.9](https://github.com/okta/odyssey/compare/v1.14.8...v1.14.9) (2024-03-08)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.14.8](https://github.com/okta/odyssey/compare/v1.14.7...v1.14.8) (2024-03-08)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Autocomplete.js

@@ -11,10 +11,18 @@ import _InputBase from "@mui/material/InputBase";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback, useMemo, useRef } from "react";
+import { createContext, forwardRef, memo, useCallback, useContext, useEffect, useMemo, useRef } from "react";
+import styled from "@emotion/styled";
+import { VariableSizeList } from "react-window";
+import _AutoSizer from "react-virtualized-auto-sizer";
+const AutoSizer = _AutoSizer;
 import { Field } from "./Field.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const ListboxContainer = styled.div`
+  width: 100%;
+  height: 100%;
+`;
 const Autocomplete = ({
   ariaDescribedBy,
   defaultValue,
@@ -29,6 +37,7 @@ const Autocomplete = ({
   isLoading,
   isOptional = false,
   isReadOnly,
+  isVirtualized: isVirtualizedProp = false,
   hint,
   HintLinkComponent,
   label,
@@ -47,6 +56,7 @@ const Autocomplete = ({
     controlledValue: value,
     uncontrolledValue: defaultValue
   }));
+  const isVirtualized = useRef(Boolean(isVirtualizedProp));
   const defaultValueProp = useMemo(() => {
     if (hasMultipleChoices) {
       if (value === undefined) {
@@ -80,6 +90,7 @@ const Autocomplete = ({
     fieldType: "single",
     hasVisibleLabel: true,
     id: InputLabelProps.htmlFor,
+    isFullWidth: isFullWidth,
     hint: hint,
     HintLinkComponent: HintLinkComponent,
     label: label,
@@ -103,7 +114,75 @@ const Autocomplete = ({
       name: nameOverride ?? id,
       required: !isOptional
     })
-  }), [ariaDescribedBy, errorMessage, errorMessageList, hint, HintLinkComponent, isOptional, label, nameOverride, testId]);
+  }), [ariaDescribedBy, errorMessage, errorMessageList, hint, HintLinkComponent, isFullWidth, isOptional, label, nameOverride, testId]);
+  const renderVirtualizedRow = ({
+    data,
+    index,
+    style
+  }) => {
+    const baseOption = data[index];
+    const optionItem = {
+      ...baseOption,
+      props: {
+        ...baseOption.props,
+        style
+      }
+    };
+    return optionItem;
+  };
+  const OuterListboxContext = createContext({});
+  const OuterListboxElementType = forwardRef((props, ref) => {
+    const outerProps = useContext(OuterListboxContext);
+    return _jsx("div", {
+      ref: ref,
+      ...props,
+      ...outerProps
+    });
+  });
+  function useResetCache(length) {
+    const ref = useRef(null);
+    useEffect(() => {
+      if (ref.current) {
+        ref.current.resetAfterIndex(0, true);
+      }
+    }, [length]);
+    return ref;
+  }
+  const ListboxComponent = forwardRef(function (props, ref) {
+    const {
+      children,
+      ...other
+    } = props;
+    const itemData = children.flatMap(item => [item].concat(item.children || []));
+    const optionHeight = 45;
+    const overscanRowCount = 8;
+    const itemSize = useCallback(() => optionHeight, []);
+    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]);
+    return _jsx(ListboxContainer, {
+      ref: ref,
+      children: _jsx(OuterListboxContext.Provider, {
+        value: other,
+        children: _jsx(AutoSizer, {
+          children: renderWindow
+        })
+      })
+    });
+  });
   const onChange = useCallback((event, value, reason, details) => {
     onChangeProp?.(event, value, reason, details);
   }, [onChangeProp]);
@@ -113,6 +192,9 @@ const Autocomplete = ({
   return _jsx(_Autocomplete, {
     ...valueProps,
     ...inputValueProp,
+    ...(isVirtualized.current && {
+      ListboxComponent
+    }),
     "aria-disabled": isDisabled,
     disableCloseOnSelect: hasMultipleChoices,
     disabled: isDisabled,

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","Autocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","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 { memo, useCallback, useMemo, useRef } from \"react\";\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   * 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} & 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 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  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\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 controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\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        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      isOptional,\n      label,\n      nameOverride,\n      testId,\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      // 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      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\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","styled","VariableSizeList","_AutoSizer","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","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","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","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","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\";\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   * 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  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 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      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\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/Breadcrumbs.js

@@ -17,12 +17,19 @@ import { createContext, memo, useCallback, useContext, useMemo, useState } from
 import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated/index.js";
 import { Subordinate } from "./Typography.js";
 import { useTranslation } from "react-i18next";
+import styled from "@emotion/styled";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const BreadcrumbContext = createContext({
   breadcrumbType: "listItem"
 });
+const BreadcrumbContent = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+`;
 export const Breadcrumb = ({
   children,
   href,
@@ -32,7 +39,9 @@ export const Breadcrumb = ({
     breadcrumbType
   } = useContext(BreadcrumbContext);
   const breadcrumbContent = _jsxs(_Fragment, {
-    children: [iconName === "group" ? _jsx(GroupIcon, {}) : iconName === "user" ? _jsx(UserIcon, {}) : null, children]
+    children: [iconName === "group" ? _jsx(GroupIcon, {}) : iconName === "user" ? _jsx(UserIcon, {}) : null, _jsx(BreadcrumbContent, {
+      children: children
+    })]
   });
   if (breadcrumbType === "menuItem") {
     return _jsx(_MenuItem, {

package/dist/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Subordinate","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","Breadcrumb","children","href","iconName","breadcrumbContent","_MenuItem","color","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","maxVisibleItemsProp","testId","translate","t","anchorEl","setAnchorEl","Math","min","max","length","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../src/Breadcrumbs.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  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated\";\nimport { Subordinate } from \"./Typography\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href: string;\n  iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      {children}\n    </>\n  );\n\n  if (breadcrumbType === \"menuItem\") {\n    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return <Subordinate color=\"textPrimary\">{breadcrumbContent}</Subordinate>;\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,\n  testId,\n  translate,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const maxVisibleItems = useMemo(\n    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),\n    [maxVisibleItemsProp, children],\n  );\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    [],\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n      data-se={testId}\n      translate={translate}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu.length > 0 && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Subordinate","useTranslation","styled","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","BreadcrumbContent","span","Breadcrumb","children","href","iconName","breadcrumbContent","_MenuItem","color","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","maxVisibleItemsProp","testId","translate","t","anchorEl","setAnchorEl","Math","min","max","length","breadcrumbSections","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../src/Breadcrumbs.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  ButtonBase,\n  Menu,\n  MenuItem,\n  Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n  MouseEventHandler,\n  ReactElement,\n  createContext,\n  memo,\n  useCallback,\n  useContext,\n  useMemo,\n  useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated\";\nimport { Subordinate } from \"./Typography\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps\";\nimport styled from \"@emotion/styled\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n  children?: string;\n  href: string;\n  iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n  children: ReactElement<typeof Breadcrumb>[];\n  homeHref?: string;\n  maxVisibleItems?: number;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nexport type BreadcrumbContextType = {\n  breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n  breadcrumbType: \"listItem\",\n});\n\nconst BreadcrumbContent = styled.span`\n  white-space: nowrap;\n  overflow: hidden;\n  max-width: 10rem;\n  text-overflow: ellipsis;\n`;\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n  const { breadcrumbType } = useContext(BreadcrumbContext);\n\n  const breadcrumbContent = (\n    <>\n      {iconName === \"group\" ? (\n        <GroupIcon />\n      ) : iconName === \"user\" ? (\n        <UserIcon />\n      ) : null}\n      <BreadcrumbContent>{children}</BreadcrumbContent>\n    </>\n  );\n\n  if (breadcrumbType === \"menuItem\") {\n    return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n  }\n\n  if (breadcrumbType === \"currentPage\") {\n    return <Subordinate color=\"textPrimary\">{breadcrumbContent}</Subordinate>;\n  }\n\n  // breadcrumbType === \"listItem\" is the default\n  // Provided here without a conditional to get TS to be quiet\n  // about potential undefined returns\n  return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n  BreadcrumbType,\n  { breadcrumbType: BreadcrumbType }\n> = {\n  currentPage: {\n    breadcrumbType: \"currentPage\",\n  },\n  listItem: {\n    breadcrumbType: \"listItem\",\n  },\n  menuItem: {\n    breadcrumbType: \"menuItem\",\n  },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n  children,\n  homeHref,\n  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,\n  testId,\n  translate,\n}: BreadcrumbsProps) => {\n  const { t } = useTranslation();\n\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n  const maxVisibleItems = useMemo(\n    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),\n    [maxVisibleItemsProp, children],\n  );\n\n  const breadcrumbSections = useMemo(() => {\n    if (children.length <= maxVisibleItems) {\n      return {\n        beforeMenu: [],\n        insideMenu: [],\n        remainingBreadcrumbs: children,\n      };\n    } else {\n      const menuStart = Math.floor(maxVisibleItems / 2);\n      const menuLength = children.length - maxVisibleItems;\n\n      return {\n        beforeMenu: children.slice(0, menuStart),\n        insideMenu: children.slice(menuStart, menuStart + menuLength),\n        remainingBreadcrumbs: children.slice(menuStart + menuLength),\n      };\n    }\n  }, [children, maxVisibleItems]);\n\n  const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (event) => setAnchorEl(event.currentTarget),\n    [],\n  );\n  const onCloseMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  return (\n    <MuiBreadcrumbs\n      maxItems={children.length + 1}\n      aria-label={t(\"breadcrumbs.label.text\")}\n      data-se={testId}\n      translate={translate}\n    >\n      {homeHref && (\n        <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n          <HomeIcon />\n        </ButtonBase>\n      )}\n\n      {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n        <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n          {breadcrumb}\n        </BreadcrumbContext.Provider>\n      ))}\n\n      {breadcrumbSections.insideMenu.length > 0 && (\n        <>\n          <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n          <Menu\n            open={Boolean(anchorEl)}\n            onClose={onCloseMenu}\n            anchorEl={anchorEl}\n            anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n            MenuListProps={{\n              sx: {\n                minWidth: 180,\n              },\n            }}\n          >\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.menuItem}\n            >\n              {breadcrumbSections.insideMenu}\n            </BreadcrumbContext.Provider>\n          </Menu>\n        </>\n      )}\n\n      {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n        if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n          return (\n            <BreadcrumbContext.Provider\n              value={breadcrumbProviderValue.currentPage}\n            >\n              {breadcrumb}\n            </BreadcrumbContext.Provider>\n          );\n        }\n        return (\n          <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n            {breadcrumb}\n          </BreadcrumbContext.Provider>\n        );\n      })}\n    </MuiBreadcrumbs>\n  );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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"}

package/dist/Button.js

@@ -66,7 +66,7 @@ const Button = ({
       "data-se": testId,
       disabled: isDisabled,
       endIcon: endIcon,
-      fullWidth: buttonContext.isFullWidth ?? isFullWidth,
+      fullWidth: isFullWidth,
       id: id,
       onClick: onClick,
       ref: localButtonRef,
@@ -78,7 +78,7 @@ const Button = ({
       variant: variant,
       children: label
     });
-  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, id, isDisabled, isFullWidth, buttonContext.isFullWidth, label, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
+  }, [ariaControls, ariaDescribedBy, ariaExpanded, ariaHasPopup, ariaLabel, ariaLabelledBy, endIcon, id, isDisabled, isFullWidth, label, onClick, size, startIcon, tabIndex, testId, translate, type, variant]);
   if (tooltipText) {
     return _jsx(Tooltip, {
       ariaType: "description",

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","useButton","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","endIcon","id","isDisabled","isFullWidth","isFullWidthProp","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","buttonContext","focus","current","renderButton","ref","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useButton } from \"./ButtonContext\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  Pick<\n    HtmlProps,\n    | \"ariaControls\"\n    | \"ariaDescribedBy\"\n    | \"ariaExpanded\"\n    | \"ariaHasPopup\"\n    | \"ariaLabel\"\n    | \"ariaLabelledBy\"\n    | \"tabIndex\"\n    | \"testId\"\n    | \"translate\"\n  >;\n\nconst Button = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => {\n      return {\n        focus: () => {\n          localButtonRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      //@ts-expect-error ref is not an optional prop on the props context type\n      muiProps?.ref?.(localButtonRef.current);\n\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={buttonContext.isFullWidth ?? isFullWidth}\n          id={id}\n          onClick={onClick}\n          ref={localButtonRef}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      buttonContext.isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useMemo","useRef","useButton","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","ariaControls","ariaDescribedBy","ariaExpanded","ariaHasPopup","ariaLabel","ariaLabelledBy","buttonRef","endIcon","id","isDisabled","isFullWidth","isFullWidthProp","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","buttonContext","focus","current","renderButton","ref","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useButton } from \"./ButtonContext\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport {\n  MuiPropsContext,\n  MuiPropsContextType,\n  useMuiProps,\n} from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n} & (\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon?: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label: string;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon?: ReactElement;\n    }\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon?: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label?: string | \"\" | undefined;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon: ReactElement;\n    }\n  | {\n      /**\n       * The icon element to display at the end of the Button\n       */\n      endIcon: ReactElement;\n      /**\n       * The text content of the Button\n       */\n      label?: never;\n      /**\n       * The icon element to display at the start of the Button\n       */\n      startIcon?: ReactElement;\n    }\n) &\n  Pick<\n    HtmlProps,\n    | \"ariaControls\"\n    | \"ariaDescribedBy\"\n    | \"ariaExpanded\"\n    | \"ariaHasPopup\"\n    | \"ariaLabel\"\n    | \"ariaLabelledBy\"\n    | \"tabIndex\"\n    | \"testId\"\n    | \"translate\"\n  >;\n\nconst Button = ({\n  ariaControls,\n  ariaDescribedBy,\n  ariaExpanded,\n  ariaHasPopup,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth: isFullWidthProp,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n  const buttonContext = useButton();\n  const isFullWidth = useMemo(\n    () =>\n      buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,\n    [buttonContext, isFullWidthProp],\n  );\n\n  useImperativeHandle(\n    buttonRef,\n    () => {\n      return {\n        focus: () => {\n          localButtonRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const renderButton = useCallback(\n    (muiProps: MuiPropsContextType) => {\n      //@ts-expect-error ref is not an optional prop on the props context type\n      muiProps?.ref?.(localButtonRef.current);\n\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-controls={ariaControls}\n          aria-describedby={ariaDescribedBy}\n          aria-expanded={ariaExpanded}\n          aria-haspopup={ariaHasPopup}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          id={id}\n          onClick={onClick}\n          ref={localButtonRef}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaControls,\n      ariaDescribedBy,\n      ariaExpanded,\n      ariaHasPopup,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ],\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}

package/dist/Callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","Paragraph","useOdysseyDesignTokens","styled","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","children","linkText","linkUrl","role","severity","testId","text","title","translate","t","_Alert","variant","_AlertTitle","_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 { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, Box, Link as MuiLink } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { Paragraph } from \"./Typography\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport styled from \"@emotion/styled\";\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   * @deprecated Callout content shuold be set via title, text, linkText, and linkUrl\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      text: string;\n      children?: never;\n    }\n  | {\n      text?: never;\n      children: ReactNode;\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\n  return (\n    <Alert data-se={testId} role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      {title && <AlertTitle translate={translate}>{title}</AlertTitle>}\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":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAGtCC,SAAS;AAAA,SAIhBC,sBAAsB;AAExB,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAErC,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuDV,MAAMC,gBAAgB,GAAGP,MAAM,CAAC,KAAK,EAAE;EACrCQ,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtE,WAAW,EAAE;IACXC,gBAAgB,EAAED,mBAAmB,CAACE;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,OAAO,GAAGA,CAAC;EACfC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC;AACY,CAAC,KAAK;EAClB,MAAM;IAAEC;EAAE,CAAC,GAAG1B,cAAc,CAAC,CAAC;EAC9B,MAAMa,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,OACEK,KAAA,CAAAoB,MAAA;IAAO,WAASL,MAAO;IAACF,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAC,SAAS;IAAAX,QAAA,GACvEZ,IAAA,CAACN,gBAAgB;MAAC0B,SAAS,EAAEA,SAAU;MAAAR,QAAA,EACpCS,CAAC,CAAE,YAAWL,QAAS,EAAC;IAAC,CACV,CAAC,EAClBG,KAAK,IAAInB,IAAA,CAAAwB,WAAA;MAAYJ,SAAS,EAAEA,SAAU;MAAAR,QAAA,EAAEO;IAAK,CAAa,CAAC,EAChEjB,KAAA,CAACG,gBAAgB;MAACG,mBAAmB,EAAEA,mBAAoB;MAAAI,QAAA,GACxDA,QAAQ,IAAIZ,IAAA,CAAAyB,IAAA;QAAKC,SAAS,EAAC,KAAK;QAAAd,QAAA,EAAEA;MAAQ,CAAM,CAAC,EACjDM,IAAI,IAAIlB,IAAA,CAACJ,SAAS;QAAAgB,QAAA,EAAEM;MAAI,CAAY,CAAC,EACrCJ,OAAO,IACNd,IAAA,CAAAyB,IAAA;QAAAb,QAAA,EACEZ,IAAA,CAAA2B,KAAA;UAASC,IAAI,EAAEd,OAAQ;UAACS,OAAO,EAAC,YAAY;UAAAX,QAAA,EACzCC;QAAQ,CACF;MAAC,CACP,CACN;IAAA,CACe,CAAC;EAAA,CACd,CAAC;AAEZ,CAAC;AAED,MAAMgB,eAAe,GAAGpC,IAAI,CAACkB,OAAO,CAAC;AACrCkB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIlB,OAAO"}
+{"version":3,"file":"Callout.js","names":["memo","ScreenReaderText","useTranslation","Paragraph","useOdysseyDesignTokens","styled","jsx","_jsx","jsxs","_jsxs","calloutRoleValues","calloutSeverityValues","ContentContainer","shouldForwardProp","prop","odysseyDesignTokens","marginBlockStart","Spacing4","Callout","children","linkText","linkUrl","role","severity","testId","text","title","translate","t","_Alert","variant","_AlertTitle","_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 { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, Box, Link as MuiLink } from \"@mui/material\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { Paragraph } from \"./Typography\";\n\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport styled from \"@emotion/styled\";\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      text: string;\n      children?: never;\n    }\n  | {\n      text?: never;\n      children: ReactNode;\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\n  return (\n    <Alert data-se={testId} role={role} severity={severity} variant=\"callout\">\n      <ScreenReaderText translate={translate}>\n        {t(`severity.${severity}`)}\n      </ScreenReaderText>\n      {title && <AlertTitle translate={translate}>{title}</AlertTitle>}\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":";;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAE/BC,gBAAgB;AACzB,SAASC,cAAc,QAAQ,eAAe;AAAC,SAGtCC,SAAS;AAAA,SAIhBC,sBAAsB;AAExB,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAErC,OAAO,MAAMC,iBAAiB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC7D,OAAO,MAAMC,qBAAqB,GAAG,CACnC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AAuDV,MAAMC,gBAAgB,GAAGP,MAAM,CAAC,KAAK,EAAE;EACrCQ,iBAAiB,EAAGC,IAAI,IAAKA,IAAI,KAAK;AACxC,CAAC,CAAC,CAAC,CAAC;EAAEC;AAA2D,CAAC,MAAM;EACtE,WAAW,EAAE;IACXC,gBAAgB,EAAED,mBAAmB,CAACE;EACxC;AACF,CAAC,CAAC,CAAC;AAEH,MAAMC,OAAO,GAAGA,CAAC;EACfC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,MAAM;EACNC,IAAI;EACJC,KAAK;EACLC;AACY,CAAC,KAAK;EAClB,MAAM;IAAEC;EAAE,CAAC,GAAG1B,cAAc,CAAC,CAAC;EAC9B,MAAMa,mBAAmB,GAAGX,sBAAsB,CAAC,CAAC;EAEpD,OACEK,KAAA,CAAAoB,MAAA;IAAO,WAASL,MAAO;IAACF,IAAI,EAAEA,IAAK;IAACC,QAAQ,EAAEA,QAAS;IAACO,OAAO,EAAC,SAAS;IAAAX,QAAA,GACvEZ,IAAA,CAACN,gBAAgB;MAAC0B,SAAS,EAAEA,SAAU;MAAAR,QAAA,EACpCS,CAAC,CAAE,YAAWL,QAAS,EAAC;IAAC,CACV,CAAC,EAClBG,KAAK,IAAInB,IAAA,CAAAwB,WAAA;MAAYJ,SAAS,EAAEA,SAAU;MAAAR,QAAA,EAAEO;IAAK,CAAa,CAAC,EAChEjB,KAAA,CAACG,gBAAgB;MAACG,mBAAmB,EAAEA,mBAAoB;MAAAI,QAAA,GACxDA,QAAQ,IAAIZ,IAAA,CAAAyB,IAAA;QAAKC,SAAS,EAAC,KAAK;QAAAd,QAAA,EAAEA;MAAQ,CAAM,CAAC,EACjDM,IAAI,IAAIlB,IAAA,CAACJ,SAAS;QAAAgB,QAAA,EAAEM;MAAI,CAAY,CAAC,EACrCJ,OAAO,IACNd,IAAA,CAAAyB,IAAA;QAAAb,QAAA,EACEZ,IAAA,CAAA2B,KAAA;UAASC,IAAI,EAAEd,OAAQ;UAACS,OAAO,EAAC,YAAY;UAAAX,QAAA,EACzCC;QAAQ,CACF;MAAC,CACP,CACN;IAAA,CACe,CAAC;EAAA,CACd,CAAC;AAEZ,CAAC;AAED,MAAMgB,eAAe,GAAGpC,IAAI,CAACkB,OAAO,CAAC;AACrCkB,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIlB,OAAO"}

package/dist/Checkbox.js

@@ -17,9 +17,9 @@ import { useTranslation } from "react-i18next";
 import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import { ComponentControlledState, getControlState } from "./inputUtils.js";
 import { Typography } from "./Typography.js";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
 export const checkboxValidityValues = ["valid", "invalid", "inherit"];
 const Checkbox = ({
   ariaLabel,
@@ -68,7 +68,10 @@ const Checkbox = ({
   }, []);
   const label = useMemo(() => {
     return _jsxs(_Fragment, {
-      children: [labelProp, isRequired && _jsxs(_Fragment, {
+      children: [_jsx(Typography, {
+        component: "span",
+        children: labelProp
+      }), isRequired && _jsxs(_Fragment, {
         children: [" ", _jsxs(Typography, {
           component: "span",
           color: "textSecondary",
@@ -101,10 +104,11 @@ const Checkbox = ({
       inputProps: {
         "data-se": testId
       },
+      disabled: isDisabled,
       inputRef: localInputRef,
-      sx: () => ({
+      sx: {
         marginBlockStart: "2px"
-      })
+      }
     }),
     disabled: isDisabled,
     id: idOverride,

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","ComponentControlledState","getControlState","Typography","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","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","marginBlockStart","disabled","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        {labelProp}\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          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","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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"}

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, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } 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:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\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,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyCd,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":["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"}