@okta/odyssey-react-mui 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.2.0](https://github.com/okta/odyssey/compare/v1.1.1...v1.2.0) (2023-09-29)
+
+### Features
+
+- adds ability to use Shadow DOM with Odyssey ([#1966](https://github.com/okta/odyssey/issues/1966)) ([6b52246](https://github.com/okta/odyssey/commit/6b5224662982d7e214457292d0ab168719dc8c29))
+- hide selected Autocomplete items ([#1984](https://github.com/okta/odyssey/issues/1984)) ([11aa9ee](https://github.com/okta/odyssey/commit/11aa9ee0211e7f5b2c2512d77ee7efd8b4c7426e))
+- **odyssey-react-mui:** adding new prop for PasswordField to control show password button ([58ad6c8](https://github.com/okta/odyssey/commit/58ad6c8027d963a557fc501acba7ebc5724e2410))
+- **odyssey-react-mui:** renamed prop to hasShowPassword and changed default to true ([6c3b8d2](https://github.com/okta/odyssey/commit/6c3b8d2d8486afbee6869a12c5320f2ea152dc5a))
+
+### Bug Fixes
+
+- id and name not changing in Storybook ([#1987](https://github.com/okta/odyssey/issues/1987)) ([2f57e15](https://github.com/okta/odyssey/commit/2f57e156f27c64954e8aa39662198d9c04ff9518))
+- **odyssey-react-mui:** add mising prop errorMessage to autocomplete ([1c1360c](https://github.com/okta/odyssey/commit/1c1360cd33f74b5d91f961ed859ab0972633995d))
+- **odyssey-react-mui:** add props onBlur, onFocus, id, name ([66ad838](https://github.com/okta/odyssey/commit/66ad838821ba18c3ee4c24f729b89c76eb62df3e))
+- **odyssey-react-mui:** address PR comments ([f10a903](https://github.com/okta/odyssey/commit/f10a903cece4f873f91a588b3b603d96b6055eb1))
+- **odyssey-react-mui:** fixing issue with t function type by upgrading package ([c0b8343](https://github.com/okta/odyssey/commit/c0b834326afda7e42aacb64af174def159c31e90))
+- **odyssey-react-mui:** fixing tests to use getByRole and canvas ([cd7feed](https://github.com/okta/odyssey/commit/cd7feed17147397e5f79eed31e31d59ee17f562d))
+- **odyssey-react-mui:** localizing the aria-label for the PasswordField component ([e9d332a](https://github.com/okta/odyssey/commit/e9d332a5f691742609533e679bb58d7f910c9a1b))
+- **odyssey-react-mui:** toggle aria label based on password ([405fd71](https://github.com/okta/odyssey/commit/405fd7155d8ac9bb5b697bbb8b4dad3c021a0e63))
+- **odyssey-react-mui:** updating descriptions for props ([12b9587](https://github.com/okta/odyssey/commit/12b9587cda9058ff00180e0cc7b2bcb4debeb27f))
+- removed classes prop from Typography components ([#1989](https://github.com/okta/odyssey/issues/1989)) ([889f369](https://github.com/okta/odyssey/commit/889f3697582da68f71f2db801c1e7702a29fd9f5))
+
 ## [1.1.1](https://github.com/okta/odyssey/compare/v1.1.0...v1.1.1) (2023-09-15)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Autocomplete.js

@@ -16,7 +16,9 @@ import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Autocomplete = _ref => {
   let {
+    errorMessage,
     hasMultipleChoices,
+    id: idOverride,
     isCustomValueAllowed,
     isDisabled,
     isLoading,
@@ -24,8 +26,11 @@ const Autocomplete = _ref => {
     isReadOnly,
     hint,
     label,
+    name: nameOverride,
+    onBlur,
     onChange,
     onInputChange,
+    onFocus,
     options,
     value,
     testId
@@ -37,6 +42,7 @@ const Autocomplete = _ref => {
       ...params
     } = _ref2;
     return _jsx(Field, {
+      errorMessage: errorMessage,
       fieldType: "single",
       hasVisibleLabel: true,
       id: InputLabelProps.htmlFor,
@@ -53,21 +59,26 @@ const Autocomplete = _ref => {
           ...InputProps,
           "aria-describedby": ariaDescribedBy,
           id: id,
+          name: nameOverride ?? id,
           required: !isOptional
         });
       }
     });
-  }, [hint, isOptional, label]);
+  }, [errorMessage, hint, isOptional, label, nameOverride]);
   return _jsx(_Autocomplete, {
     "aria-disabled": isDisabled,
     "data-se": testId,
     disableCloseOnSelect: hasMultipleChoices,
     disabled: isDisabled,
     freeSolo: isCustomValueAllowed,
+    filterSelectedOptions: true,
+    id: idOverride,
     loading: isLoading,
     multiple: hasMultipleChoices,
+    onBlur: onBlur,
     onChange: onChange,
     onInputChange: onInputChange,
+    onFocus: onFocus,
     options: options,
     readOnly: isReadOnly,
     renderInput: renderInput,

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","jsx","_jsx","Autocomplete","_ref","hasMultipleChoices","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","onChange","onInputChange","options","value","testId","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","id","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","_InputBase","required","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","loading","multiple","readOnly","MemoizedAutocomplete"],"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} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The hint text for the Autocomplete input\n   */\n  hint?: string;\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   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\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 value of the autocomplete input changes\n   */\n  onChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the input value of the autocomplete input changes\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & SeleniumProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  hasMultipleChoices,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  onChange,\n  onInputChange,\n  options,\n  value,\n  testId,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [hint, isOptional, label]\n  );\n\n  return (\n    <MuiAutocomplete\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      data-se={testId}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      value={value}\n    />\n  );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAEjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAuGd,MAAMC,YAAY,GAAGC,IAAA,IAkB0D;EAAA,IAd7E;IACAC,kBAAkB;IAClBC,oBAAoB;IACpBC,UAAU;IACVC,SAAS;IACTC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC,KAAK;IACLC;EACuE,CAAC,GAAAb,IAAA;EACxE,MAAMc,WAAW,GAAGnB,WAAW,CAC7BoB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,UAAU;MAAE,GAAGC;IAAO,CAAC,GAAAH,KAAA;IAAA,OACzCjB,IAAA,CAACF,KAAK;MACJuB,SAAS,EAAC,QAAQ;MAClBC,eAAe;MACfC,EAAE,EAAEL,eAAe,CAACM,OAAQ;MAC5Bf,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA,KAAM;MACbH,UAAU,EAAEA,UAAW;MACvBkB,oBAAoB,EAAEC,KAAA;QAAA,IAAC;UAAEC,eAAe;UAAEJ;QAAG,CAAC,GAAAG,KAAA;QAAA,OAC5C1B,IAAA,CAAA4B,UAAA;UAAA,GACMR,MAAM;UAAA,GACND,UAAU;UACd,oBAAkBQ,eAAgB;UAClCJ,EAAE,EAAEA,EAAG;UACPM,QAAQ,EAAE,CAACtB;QAAW,CACvB,CAAC;MAAA;IACF,CACH,CAAC;EAAA,CACH,EACD,CAACE,IAAI,EAAEF,UAAU,EAAEG,KAAK,CAC1B,CAAC;EAED,OACEV,IAAA,CAAA8B,aAAA;IAEE,iBAAezB,UAAW;IAC1B,WAASU,MAAO;IAChBgB,oBAAoB,EAAE5B,kBAAmB;IACzC6B,QAAQ,EAAE3B,UAAW;IACrB4B,QAAQ,EAAE7B,oBAAqB;IAC/B8B,OAAO,EAAE5B,SAAU;IACnB6B,QAAQ,EAAEhC,kBAAmB;IAC7BQ,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBuB,QAAQ,EAAE5B,UAAW;IACrBQ,WAAW,EAAEA,WAAY;IACzBF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAMuB,oBAAoB,GAAGzC,IAAI,CAACK,YAAY,CAAwB;AAEtE,SAASoC,oBAAoB,IAAIpC,YAAY"}
+{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","jsx","_jsx","Autocomplete","_ref","errorMessage","hasMultipleChoices","id","idOverride","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","name","nameOverride","onBlur","onChange","onInputChange","onFocus","options","value","testId","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","_InputBase","required","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","loading","multiple","readOnly","MemoizedAutocomplete"],"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} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The hint text for the Autocomplete input\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\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   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: 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?: MuiAutocompleteProps<\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: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"options\"];\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n} & SeleniumProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  errorMessage,\n  hasMultipleChoices,\n  id: idOverride,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange,\n  onInputChange,\n  onFocus,\n  options,\n  value,\n  testId,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({ ariaDescribedBy, id }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [errorMessage, hint, isOptional, label, nameOverride]\n  );\n\n  return (\n    <MuiAutocomplete\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      data-se={testId}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\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      value={value}\n    />\n  );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAEjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAqId,MAAMC,YAAY,GAAGC,IAAA,IAuB0D;EAAA,IAnB7E;IACAC,YAAY;IACZC,kBAAkB;IAClBC,EAAE,EAAEC,UAAU;IACdC,oBAAoB;IACpBC,UAAU;IACVC,SAAS;IACTC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,IAAI;IACJC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ;IACRC,aAAa;IACbC,OAAO;IACPC,OAAO;IACPC,KAAK;IACLC;EACuE,CAAC,GAAApB,IAAA;EACxE,MAAMqB,WAAW,GAAG1B,WAAW,CAC7B2B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,UAAU;MAAE,GAAGC;IAAO,CAAC,GAAAH,KAAA;IAAA,OACzCxB,IAAA,CAACF,KAAK;MACJK,YAAY,EAAEA,YAAa;MAC3ByB,SAAS,EAAC,QAAQ;MAClBC,eAAe;MACfxB,EAAE,EAAEoB,eAAe,CAACK,OAAQ;MAC5BlB,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA,KAAM;MACbH,UAAU,EAAEA,UAAW;MACvBqB,oBAAoB,EAAEC,KAAA;QAAA,IAAC;UAAEC,eAAe;UAAE5B;QAAG,CAAC,GAAA2B,KAAA;QAAA,OAC5ChC,IAAA,CAAAkC,UAAA;UAAA,GACMP,MAAM;UAAA,GACND,UAAU;UACd,oBAAkBO,eAAgB;UAClC5B,EAAE,EAAEA,EAAG;UACPS,IAAI,EAAEC,YAAY,IAAIV,EAAG;UACzB8B,QAAQ,EAAE,CAACzB;QAAW,CACvB,CAAC;MAAA;IACF,CACH,CAAC;EAAA,CACH,EACD,CAACP,YAAY,EAAES,IAAI,EAAEF,UAAU,EAAEG,KAAK,EAAEE,YAAY,CACtD,CAAC;EAED,OACEf,IAAA,CAAAoC,aAAA;IAEE,iBAAe5B,UAAW;IAC1B,WAASc,MAAO;IAChBe,oBAAoB,EAAEjC,kBAAmB;IACzCkC,QAAQ,EAAE9B,UAAW;IACrB+B,QAAQ,EAAEhC,oBAAqB;IAC/BiC,qBAAqB,EAAE,IAAK;IAC5BnC,EAAE,EAAEC,UAAW;IACfmC,OAAO,EAAEhC,SAAU;IACnBiC,QAAQ,EAAEtC,kBAAmB;IAC7BY,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBC,aAAa,EAAEA,aAAc;IAC7BC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IACjBuB,QAAQ,EAAEhC,UAAW;IACrBY,WAAW,EAAEA,WAAY;IACzBF,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAMuB,oBAAoB,GAAGhD,IAAI,CAACK,YAAY,CAAwB;AAEtE,SAAS2C,oBAAoB,IAAI3C,YAAY"}

package/dist/OdysseyCacheProvider.js

@@ -18,15 +18,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const OdysseyCacheProvider = _ref => {
   let {
     children,
+    emotionRootElement,
     nonce,
     stylisPlugins
   } = _ref;
   const uniqueAlphabeticalId = useUniqueAlphabeticalId();
   const emotionCache = useMemo(() => createCache({
+    container: emotionRootElement,
     key: uniqueAlphabeticalId,
     nonce: nonce || window.cspNonce,
+    prepend: Boolean(emotionRootElement),
     stylisPlugins
-  }), [nonce, stylisPlugins, uniqueAlphabeticalId]);
+  }), [emotionRootElement, nonce, stylisPlugins, uniqueAlphabeticalId]);
   return _jsx(CacheProvider, {
     value: emotionCache,
     children: children

package/dist/OdysseyCacheProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","CacheProvider","memo","useMemo","useUniqueAlphabeticalId","jsx","_jsx","OdysseyCacheProvider","_ref","children","nonce","stylisPlugins","uniqueAlphabeticalId","emotionCache","key","window","cspNonce","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { CacheProvider } from \"@emotion/react\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  nonce?: string;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  nonce,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const emotionCache = useMemo(\n    () =>\n      createCache({\n        key: uniqueAlphabeticalId,\n        nonce: nonce || window.cspNonce,\n        stylisPlugins,\n      }),\n    [nonce, stylisPlugins, uniqueAlphabeticalId]\n  );\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAExCC,uBAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAQhC,MAAMC,oBAAoB,GAAGC,IAAA,IAII;EAAA,IAJH;IAC5BC,QAAQ;IACRC,KAAK;IACLC;EACyB,CAAC,GAAAH,IAAA;EAC1B,MAAMI,oBAAoB,GAAGR,uBAAuB,CAAC,CAAC;EAEtD,MAAMS,YAAY,GAAGV,OAAO,CAC1B,MACEH,WAAW,CAAC;IACVc,GAAG,EAAEF,oBAAoB;IACzBF,KAAK,EAAEA,KAAK,IAAIK,MAAM,CAACC,QAAQ;IAC/BL;EACF,CAAC,CAAC,EACJ,CAACD,KAAK,EAAEC,aAAa,EAAEC,oBAAoB,CAC7C,CAAC;EAED,OAAON,IAAA,CAACL,aAAa;IAACgB,KAAK,EAAEJ,YAAa;IAAAJ,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMS,4BAA4B,GAAGhB,IAAI,CAACK,oBAAoB,CAAC;AAC/DW,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIX,oBAAoB"}
+{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","CacheProvider","memo","useMemo","useUniqueAlphabeticalId","jsx","_jsx","OdysseyCacheProvider","_ref","children","emotionRootElement","nonce","stylisPlugins","uniqueAlphabeticalId","emotionCache","container","key","window","cspNonce","prepend","Boolean","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { CacheProvider } from \"@emotion/react\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   */\n  emotionRootElement?: HTMLStyleElement;\n  nonce?: string;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  emotionRootElement,\n  nonce,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const emotionCache = useMemo(\n    () =>\n      createCache({\n        container: emotionRootElement,\n        key: uniqueAlphabeticalId,\n        nonce: nonce || window.cspNonce,\n        prepend: Boolean(emotionRootElement),\n        stylisPlugins,\n      }),\n    [emotionRootElement, nonce, stylisPlugins, uniqueAlphabeticalId]\n  );\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,aAAa,QAAQ,gBAAgB;AAC9C,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAExCC,uBAAuB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAahC,MAAMC,oBAAoB,GAAGC,IAAA,IAKI;EAAA,IALH;IAC5BC,QAAQ;IACRC,kBAAkB;IAClBC,KAAK;IACLC;EACyB,CAAC,GAAAJ,IAAA;EAC1B,MAAMK,oBAAoB,GAAGT,uBAAuB,CAAC,CAAC;EAEtD,MAAMU,YAAY,GAAGX,OAAO,CAC1B,MACEH,WAAW,CAAC;IACVe,SAAS,EAAEL,kBAAkB;IAC7BM,GAAG,EAAEH,oBAAoB;IACzBF,KAAK,EAAEA,KAAK,IAAIM,MAAM,CAACC,QAAQ;IAC/BC,OAAO,EAAEC,OAAO,CAACV,kBAAkB,CAAC;IACpCE;EACF,CAAC,CAAC,EACJ,CAACF,kBAAkB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,oBAAoB,CACjE,CAAC;EAED,OAAOP,IAAA,CAACL,aAAa;IAACoB,KAAK,EAAEP,YAAa;IAAAL,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMa,4BAA4B,GAAGpB,IAAI,CAACK,oBAAoB,CAAC;AAC/De,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIf,oBAAoB"}

package/dist/OdysseyProvider.js

@@ -20,6 +20,8 @@ const OdysseyProvider = _ref => {
   let {
     children,
     designTokensOverride,
+    emotionRootElement,
+    shadowRootElement,
     languageCode,
     nonce,
     stylisPlugins,
@@ -27,11 +29,13 @@ const OdysseyProvider = _ref => {
     translationOverrides
   } = _ref;
   return _jsx(OdysseyCacheProvider, {
+    emotionRootElement: emotionRootElement,
     nonce: nonce,
     stylisPlugins: stylisPlugins,
     children: _jsx(OdysseyThemeProvider, {
-      themeOverride: themeOverride,
       designTokensOverride: designTokensOverride,
+      shadowRootElement: shadowRootElement,
+      themeOverride: themeOverride,
       children: _jsx(_ScopedCssBaseline, {
         children: _jsx(OdysseyTranslationProvider, {
           languageCode: languageCode,

package/dist/OdysseyProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","_ref","children","designTokensOverride","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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 { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\n\nexport type OdysseyProviderProps = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = ({\n  children,\n  designTokensOverride,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps) => (\n  <OdysseyCacheProvider nonce={nonce} stylisPlugins={stylisPlugins}>\n    <OdysseyThemeProvider\n      themeOverride={themeOverride}\n      designTokensOverride={designTokensOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider);\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAU5B,MAAMC,eAAe,GAAGC,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,oBAAoB;IACpBC,YAAY;IACZC,KAAK;IACLC,aAAa;IACbC,aAAa;IACbC;EACoB,CAAC,GAAAP,IAAA;EAAA,OACrBF,IAAA,CAACJ,oBAAoB;IAACU,KAAK,EAAEA,KAAM;IAACC,aAAa,EAAEA,aAAc;IAAAJ,QAAA,EAC/DH,IAAA,CAACH,oBAAoB;MACnBW,aAAa,EAAEA,aAAc;MAC7BJ,oBAAoB,EAAEA,oBAAqB;MAAAD,QAAA,EAE3CH,IAAA,CAAAU,kBAAA;QAAAP,QAAA,EACEH,IAAA,CAACF,0BAA0B;UACzBO,YAAY,EAAEA,YAAa;UAC3BI,oBAAoB,EAAEA,oBAAqB;UAAAN,QAAA,EAE1CA;QAAQ,CACiB;MAAC,CACZ;IAAC,CACA;EAAC,CACH,CAAC;AAAA,CACxB;AAED,MAAMQ,qBAAqB,GAAGhB,IAAI,CAACM,eAAe,CAAC;AAEnD,SAASU,qBAAqB,IAAIV,eAAe"}
+{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","_ref","children","designTokensOverride","emotionRootElement","shadowRootElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.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 { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\n\nexport type OdysseyProviderProps = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = ({\n  children,\n  designTokensOverride,\n  emotionRootElement,\n  shadowRootElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps) => (\n  <OdysseyCacheProvider\n    emotionRootElement={emotionRootElement}\n    nonce={nonce}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowRootElement={shadowRootElement}\n      themeOverride={themeOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider);\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAU5B,MAAMC,eAAe,GAAGC,IAAA;EAAA,IAAC;IACvBC,QAAQ;IACRC,oBAAoB;IACpBC,kBAAkB;IAClBC,iBAAiB;IACjBC,YAAY;IACZC,KAAK;IACLC,aAAa;IACbC,aAAa;IACbC;EACoB,CAAC,GAAAT,IAAA;EAAA,OACrBF,IAAA,CAACJ,oBAAoB;IACnBS,kBAAkB,EAAEA,kBAAmB;IACvCG,KAAK,EAAEA,KAAM;IACbC,aAAa,EAAEA,aAAc;IAAAN,QAAA,EAE7BH,IAAA,CAACH,oBAAoB;MACnBO,oBAAoB,EAAEA,oBAAqB;MAC3CE,iBAAiB,EAAEA,iBAAkB;MACrCI,aAAa,EAAEA,aAAc;MAAAP,QAAA,EAE7BH,IAAA,CAAAY,kBAAA;QAAAT,QAAA,EACEH,IAAA,CAACF,0BAA0B;UACzBS,YAAY,EAAEA,YAAa;UAC3BI,oBAAoB,EAAEA,oBAAqB;UAAAR,QAAA,EAE1CA;QAAQ,CACiB;MAAC,CACZ;IAAC,CACA;EAAC,CACH,CAAC;AAAA,CACxB;AAED,MAAMU,qBAAqB,GAAGlB,IAAI,CAACM,eAAe,CAAC;AAEnD,SAASY,qBAAqB,IAAIZ,eAAe"}

package/dist/OdysseyThemeProvider.js

@@ -21,13 +21,17 @@ const OdysseyThemeProvider = _ref => {
   let {
     children,
     designTokensOverride,
+    shadowRootElement,
     themeOverride
   } = _ref;
   const odysseyTokens = useMemo(() => ({
     ...Tokens,
     ...designTokensOverride
   }), [designTokensOverride]);
-  const odysseyTheme = useMemo(() => createOdysseyMuiTheme(odysseyTokens), [odysseyTokens]);
+  const odysseyTheme = useMemo(() => createOdysseyMuiTheme({
+    odysseyTokens,
+    shadowRootElement
+  }), [odysseyTokens, shadowRootElement]);
   const customOdysseyTheme = useMemo(() => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)), [odysseyTheme, themeOverride]);
   return _jsx(MuiThemeProvider, {
     theme: customOdysseyTheme ?? odysseyTheme,

package/dist/OdysseyThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","_ref","children","designTokensOverride","themeOverride","odysseyTokens","odysseyTheme","customOdysseyTheme","theme","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.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 {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  themeOverride?: ThemeOptions;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () => createOdysseyMuiTheme(odysseyTokens),\n    [odysseyTokens]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAQnC,MAAMC,oBAAoB,GAAGC,IAAA,IAII;EAAA,IAJH;IAC5BC,QAAQ;IACRC,oBAAoB;IACpBC;EACyB,CAAC,GAAAH,IAAA;EAC1B,MAAMI,aAAa,GAAGZ,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGO;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMG,YAAY,GAAGb,OAAO,CAC1B,MAAME,qBAAqB,CAACU,aAAa,CAAC,EAC1C,CAACA,aAAa,CAChB,CAAC;EAED,MAAME,kBAAkB,GAAGd,OAAO,CAChC,MAAMW,aAAa,IAAIf,WAAW,CAACK,SAAS,CAACY,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEL,IAAA,CAACR,gBAAgB;IAACiB,KAAK,EAAED,kBAAkB,IAAID,YAAa;IAAAJ,QAAA,EAC1DH,IAAA,CAACF,0BAA0B,CAACY,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAH,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMS,4BAA4B,GAAGnB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASW,4BAA4B,IAAIX,oBAAoB"}
+{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","_ref","children","designTokensOverride","shadowRootElement","themeOverride","odysseyTokens","odysseyTheme","customOdysseyTheme","theme","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.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 {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  shadowRootElement?: HTMLDivElement;\n  themeOverride?: ThemeOptions;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowRootElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowRootElement,\n      }),\n    [odysseyTokens, shadowRootElement]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC,MAAMC,oBAAoB,GAAGC,IAAA,IAKI;EAAA,IALH;IAC5BC,QAAQ;IACRC,oBAAoB;IACpBC,iBAAiB;IACjBC;EACyB,CAAC,GAAAJ,IAAA;EAC1B,MAAMK,aAAa,GAAGb,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGO;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMI,YAAY,GAAGd,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBW,aAAa;IACbF;EACF,CAAC,CAAC,EACJ,CAACE,aAAa,EAAEF,iBAAiB,CACnC,CAAC;EAED,MAAMI,kBAAkB,GAAGf,OAAO,CAChC,MAAMY,aAAa,IAAIhB,WAAW,CAACK,SAAS,CAACa,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEN,IAAA,CAACR,gBAAgB;IAACkB,KAAK,EAAED,kBAAkB,IAAID,YAAa;IAAAL,QAAA,EAC1DH,IAAA,CAACF,0BAA0B,CAACa,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAJ,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMU,4BAA4B,GAAGpB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASY,4BAA4B,IAAIZ,oBAAoB"}

package/dist/OdysseyTranslationProvider.js

@@ -11,7 +11,7 @@
  */
 
 import { useEffect } from "react";
-import i18n, { defaultNS, resources } from "./OdysseyI18n.js";
+import { i18n, defaultNS, resources } from "./i18n.js";
 import { I18nextProvider } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 const mergeBundleOverrides = (languageCode, translationOverrides) => {

package/dist/OdysseyTranslationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","jsx","_jsx","mergeBundleOverrides","languageCode","translationOverrides","bundle","overrides","OdysseyTranslationProvider","_ref","children","changeLanguage","window","navigator","language","Object","keys","forEach","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.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 { ReactNode, useEffect } from \"react\";\n\nimport { SupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport i18n, { defaultNS, resources } from \"./OdysseyI18n\";\nimport { I18nextProvider } from \"react-i18next\";\n\nexport type TranslationOverrides = {\n  [key in SupportedLanguages]?: Partial<(typeof resources)[\"en\"]>;\n};\n\nconst mergeBundleOverrides = (\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides\n) => {\n  const bundle = resources[languageCode];\n  const overrides = translationOverrides[languageCode];\n  return {\n    ...bundle,\n    ...overrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages;\n  translationOverrides?: TranslationOverrides;\n};\n\nexport const OdysseyTranslationProvider = ({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps) => {\n  useEffect(() => {\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(languageCode || window.navigator.language);\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      Object.keys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides(\n          language as SupportedLanguages,\n          translationOverrides\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,SAAS,QAAQ,OAAO;AAAC,OAItCC,IAAI,IAAIC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhD,MAAMC,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA0C,KACvC;EACH,MAAMC,MAAM,GAAGP,SAAS,CAACK,YAAY,CAAC;EACtC,MAAMG,SAAS,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACpD,OAAO;IACL,GAAGE,MAAM;IACT,GAAGC;EACL,CAAC;AACH,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAIH;EAAA,IAJI;IACzCC,QAAQ;IACRN,YAAY;IACZC;EAC+B,CAAC,GAAAI,IAAA;EAChCb,SAAS,CAAC,MAAM;IAEdC,IAAI,CAACc,cAAc,CAACP,YAAY,IAAIQ,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAC;EAChE,CAAC,EAAE,CAACV,YAAY,CAAC,CAAC;EAElBR,SAAS,CAAC,MAAM;IACd,IAAIS,oBAAoB,EAAE;MACxBU,MAAM,CAACC,IAAI,CAACX,oBAAoB,CAAC,CAACY,OAAO,CAAEH,QAAQ,IAAK;QACtD,MAAMR,MAAM,GAAGH,oBAAoB,CACjCW,QAAQ,EACRT,oBACF,CAAC;QACDR,IAAI,CAACqB,iBAAiB,CAACJ,QAAQ,EAAEhB,SAAS,EAAEQ,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACD,oBAAoB,CAAC,CAAC;EAE1B,OAAOH,IAAA,CAACF,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAa,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}
+{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","jsx","_jsx","mergeBundleOverrides","languageCode","translationOverrides","bundle","overrides","OdysseyTranslationProvider","_ref","children","changeLanguage","window","navigator","language","Object","keys","forEach","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.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 { ReactNode, useEffect } from \"react\";\n\nimport { SupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport { i18n, defaultNS, resources } from \"./i18n\";\nimport { I18nextProvider } from \"react-i18next\";\n\nexport type TranslationOverrides = {\n  [key in SupportedLanguages]?: Partial<(typeof resources)[\"en\"]>;\n};\n\nconst mergeBundleOverrides = (\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides\n) => {\n  const bundle = resources[languageCode];\n  const overrides = translationOverrides[languageCode];\n  return {\n    ...bundle,\n    ...overrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages;\n  translationOverrides?: TranslationOverrides;\n};\n\nexport const OdysseyTranslationProvider = ({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps) => {\n  useEffect(() => {\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(languageCode || window.navigator.language);\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      Object.keys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides(\n          language as SupportedLanguages,\n          translationOverrides\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,SAAS,QAAQ,OAAO;AAAC,SAIpCC,IAAI,EAAEC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhD,MAAMC,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA0C,KACvC;EACH,MAAMC,MAAM,GAAGP,SAAS,CAACK,YAAY,CAAC;EACtC,MAAMG,SAAS,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACpD,OAAO;IACL,GAAGE,MAAM;IACT,GAAGC;EACL,CAAC;AACH,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAIH;EAAA,IAJI;IACzCC,QAAQ;IACRN,YAAY;IACZC;EAC+B,CAAC,GAAAI,IAAA;EAChCb,SAAS,CAAC,MAAM;IAEdC,IAAI,CAACc,cAAc,CAACP,YAAY,IAAIQ,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAC;EAChE,CAAC,EAAE,CAACV,YAAY,CAAC,CAAC;EAElBR,SAAS,CAAC,MAAM;IACd,IAAIS,oBAAoB,EAAE;MACxBU,MAAM,CAACC,IAAI,CAACX,oBAAoB,CAAC,CAACY,OAAO,CAAEH,QAAQ,IAAK;QACtD,MAAMR,MAAM,GAAGH,oBAAoB,CACjCW,QAAQ,EACRT,oBACF,CAAC;QACDR,IAAI,CAACqB,iBAAiB,CAACJ,QAAQ,EAAEhB,SAAS,EAAEQ,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACD,oBAAoB,CAAC,CAAC;EAE1B,OAAOH,IAAA,CAACF,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAa,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}

package/dist/PasswordField.js

@@ -15,6 +15,7 @@ import _IconButton from "@mui/material/IconButton";
 import { forwardRef, memo, useCallback, useState } from "react";
 import { ShowIcon, HideIcon } from "./icons.generated/index.js";
 import { Field } from "./Field.js";
+import { useTranslation } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef((_ref, ref) => {
   let {
@@ -25,6 +26,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     id: idOverride,
     isDisabled = false,
     isOptional = false,
+    hasShowPassword = true,
     isReadOnly,
     label,
     name: nameOverride,
@@ -35,6 +37,9 @@ const PasswordField = forwardRef((_ref, ref) => {
     testId,
     value
   } = _ref;
+  const {
+    t
+  } = useTranslation();
   const [inputType, setInputType] = useState("password");
   const togglePasswordVisibility = useCallback(() => {
     setInputType(inputType => inputType === "password" ? "text" : "password");
@@ -49,15 +54,18 @@ const PasswordField = forwardRef((_ref, ref) => {
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
       "data-se": testId,
-      endAdornment: _jsx(_InputAdornment, {
+      endAdornment: hasShowPassword && _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(_IconButton, {
-          "aria-label": "toggle password visibility",
+          "aria-label": inputType === "password" ? t("passwordfield.icon.label.show") : t("passwordfield.icon.label.hide"),
           onClick: togglePasswordVisibility,
           children: inputType === "password" ? _jsx(ShowIcon, {}) : _jsx(HideIcon, {})
         })
       }),
       id: id,
+      inputProps: {
+        role: "textbox"
+      },
       name: nameOverride ?? id,
       onChange: onChange,
       onFocus: onFocus,
@@ -69,7 +77,7 @@ const PasswordField = forwardRef((_ref, ref) => {
       type: inputType,
       value: value
     });
-  }, [autoCompleteType, hasInitialFocus, togglePasswordVisibility, inputType, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, testId, value]);
+  }, [autoCompleteType, hasInitialFocus, t, togglePasswordVisibility, inputType, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, hasShowPassword, ref, testId, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","ShowIcon","HideIcon","Field","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","isReadOnly","label","name","nameOverride","onChange","onFocus","onBlur","placeholder","testId","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"toggle password visibility\"\n                onClick={togglePasswordVisibility}\n              >\n                {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n              </IconButton>\n            </InputAdornment>\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        testId,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","ShowIcon","HideIcon","Field","useTranslation","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onFocus","onBlur","placeholder","testId","value","t","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{ role: \"textbox\" }}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\n        testId,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}

package/dist/Select.js

@@ -16,11 +16,11 @@ import _Chip from "@mui/material/Chip";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef, memo, useCallback, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Select = forwardRef((_ref, ref) => {
+const Select = _ref => {
   let {
     errorMessage,
     hint,
@@ -56,20 +56,15 @@ const Select = forwardRef((_ref, ref) => {
       onChangeProp(event, child);
     }
   }, [isMultiSelect, onChangeProp, setSelectedValue]);
-  const normalizedOptions = options.map(option => {
-    if (typeof option === "object") {
-      return {
-        text: option.text,
-        value: option.value || option.text,
-        type: option.type === "heading" ? "heading" : "option"
-      };
-    }
-    return {
-      text: option,
-      value: option,
-      type: "option"
-    };
-  });
+  const normalizedOptions = useMemo(() => options.map(option => typeof option === "object" ? {
+    text: option.text,
+    value: option.value || option.text,
+    type: option.type === "heading" ? "heading" : "option"
+  } : {
+    text: option,
+    value: option,
+    type: "option"
+  }), [options]);
   const renderValue = useCallback(selected => {
     if (typeof selected === "string") {
       return undefined;
@@ -90,7 +85,7 @@ const Select = forwardRef((_ref, ref) => {
       children: renderedChips
     });
   }, [normalizedOptions]);
-  const children = normalizedOptions.map(option => {
+  const children = useMemo(() => normalizedOptions.map(option => {
     if (option.type === "heading") {
       return _jsx(_ListSubheader, {
         children: option.text
@@ -102,21 +97,27 @@ const Select = forwardRef((_ref, ref) => {
         checked: selectedValue.includes(option.value)
       }), option.text]
     }, option.value);
-  });
-  const renderFieldComponent = useCallback(() => _jsx(_Select, {
-    children: children,
-    "data-se": testId,
-    id: idOverride,
-    multiple: isMultiSelect,
-    name: nameOverride ?? idOverride,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    ref: ref,
-    renderValue: isMultiSelect ? renderValue : undefined,
-    value: selectedValue,
-    labelId: label
-  }), [children, idOverride, isMultiSelect, label, nameOverride, onBlur, onChange, onFocus, ref, renderValue, selectedValue, testId]);
+  }), [isMultiSelect, normalizedOptions, selectedValue]);
+  const renderFieldComponent = useCallback(_ref2 => {
+    let {
+      ariaDescribedBy,
+      id
+    } = _ref2;
+    return _jsx(_Select, {
+      "aria-describedby": ariaDescribedBy,
+      children: children,
+      "data-se": testId,
+      id: id,
+      labelId: label,
+      multiple: isMultiSelect,
+      name: nameOverride ?? id,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      renderValue: isMultiSelect ? renderValue : undefined,
+      value: selectedValue
+    });
+  }, [children, isMultiSelect, label, nameOverride, onBlur, onChange, onFocus, renderValue, selectedValue, testId]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",
@@ -128,7 +129,7 @@ const Select = forwardRef((_ref, ref) => {
     label: label,
     renderFieldComponent: renderFieldComponent
   });
-});
+};
 const MemoizedSelect = memo(Select);
 MemoizedSelect.displayName = "Select";
 export { MemoizedSelect as Select };

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["forwardRef","memo","useCallback","useState","Field","jsx","_jsx","jsxs","_jsxs","Select","_ref","ref","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","value","testId","options","selectedValue","setSelectedValue","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","undefined","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","renderFieldComponent","_Select","multiple","labelId","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.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 { ReactNode, forwardRef, memo, useCallback, useState } from \"react\";\nimport {\n  Box,\n  Chip,\n  Checkbox as MuiCheckbox,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectProps = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the Select\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\n  /**\n   * If `true`, the Select is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  isMultiSelect?: boolean;\n  /**\n   * If `true`, the Select is optional\n   */\n  isOptional?: boolean;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: string | string[];\n} & SeleniumProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiSelect = false,\n      isOptional = false,\n      label,\n      name: nameOverride,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      value,\n      testId,\n      options,\n    },\n    ref\n  ) => {\n    // If there's no value set, we set it to a blank string (if it's a single-select)\n    // or an empty array (if it's a multi-select)\n    if (typeof value === \"undefined\") {\n      value = isMultiSelect ? [] : \"\";\n    }\n\n    const [selectedValue, setSelectedValue] = useState<string | string[]>(\n      value\n    );\n\n    const onChange = useCallback(\n      (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {\n        const {\n          target: { value },\n        } = event;\n\n        // Set the field value, with some additional logic to handle array values\n        // for multi-selects\n        if (isMultiSelect) {\n          setSelectedValue(\n            typeof value === \"string\" ? value.split(\",\") : value\n          );\n        } else {\n          setSelectedValue(value);\n        }\n\n        // Trigger the onChange event, if one has been passed\n        if (onChangeProp) {\n          onChangeProp(event, child);\n        }\n      },\n      [isMultiSelect, onChangeProp, setSelectedValue]\n    );\n\n    // Normalize the options array to accommodate the various\n    // data types that might be passed\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        return {\n          text: option.text,\n          value: option.value || option.text,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const renderValue = useCallback(\n      (selected: string | string[]) => {\n        // If the selected value isn't an array, then we don't need to display\n        // chips and should fall back to the default render behavior\n        if (typeof selected === \"string\") {\n          return undefined;\n        }\n\n        // Convert the selected options array into <Chip>s\n        const renderedChips = selected\n          .map((item: string) => {\n            const selectedOption = normalizedOptions.find(\n              (option) => option.value === item\n            );\n\n            if (!selectedOption) {\n              return null;\n            }\n\n            return <Chip key={item} label={selectedOption.text} />;\n          })\n          .filter(Boolean);\n\n        if (renderedChips.length === 0) {\n          return null;\n        }\n\n        // We need the <Box> to surround the <Chip>s for\n        // proper styling\n        return <Box>{renderedChips}</Box>;\n      },\n      [normalizedOptions]\n    );\n\n    // Convert the options into the ReactNode children\n    // that will populate the <Select>\n    const children = normalizedOptions.map((option) => {\n      if (option.type === \"heading\") {\n        return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n      }\n\n      return (\n        <MenuItem key={option.value} value={option.value}>\n          {isMultiSelect && (\n            <MuiCheckbox checked={selectedValue.includes(option.value)} />\n          )}\n          {option.text}\n        </MenuItem>\n      );\n    });\n\n    const renderFieldComponent = useCallback(\n      () => (\n        <MuiSelect\n          children={children}\n          data-se={testId}\n          id={idOverride}\n          multiple={isMultiSelect}\n          name={nameOverride ?? idOverride}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          renderValue={isMultiSelect ? renderValue : undefined}\n          value={selectedValue}\n          labelId={label}\n        />\n      ),\n      [\n        children,\n        idOverride,\n        isMultiSelect,\n        label,\n        nameOverride,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        renderValue,\n        selectedValue,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useMemo","useState","Field","jsx","_jsx","jsxs","_jsxs","Select","_ref","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","value","testId","options","selectedValue","setSelectedValue","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","undefined","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","renderFieldComponent","_ref2","ariaDescribedBy","_Select","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.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 { ReactNode, memo, useCallback, useMemo, useState } from \"react\";\nimport {\n  Box,\n  Chip,\n  Checkbox as MuiCheckbox,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectProps = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the Select\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\n  /**\n   * If `true`, the Select is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  isMultiSelect?: boolean;\n  /**\n   * If `true`, the Select is optional\n   */\n  isOptional?: boolean;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: string | string[];\n} & SeleniumProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst Select = ({\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled = false,\n  isMultiSelect = false,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  value,\n  testId,\n  options,\n}: SelectProps) => {\n  // If there's no value set, we set it to a blank string (if it's a single-select)\n  // or an empty array (if it's a multi-select)\n  if (typeof value === \"undefined\") {\n    value = isMultiSelect ? [] : \"\";\n  }\n\n  const [selectedValue, setSelectedValue] = useState<string | string[]>(value);\n\n  const onChange = useCallback(\n    (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {\n      const {\n        target: { value },\n      } = event;\n\n      // Set the field value, with some additional logic to handle array values\n      // for multi-selects\n      if (isMultiSelect) {\n        setSelectedValue(typeof value === \"string\" ? value.split(\",\") : value);\n      } else {\n        setSelectedValue(value);\n      }\n\n      // Trigger the onChange event, if one has been passed\n      if (onChangeProp) {\n        onChangeProp(event, child);\n      }\n    },\n    [isMultiSelect, onChangeProp, setSelectedValue]\n  );\n\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const normalizedOptions = useMemo(\n    () =>\n      options.map((option) =>\n        typeof option === \"object\"\n          ? {\n              text: option.text,\n              value: option.value || option.text,\n              type: option.type === \"heading\" ? \"heading\" : \"option\",\n            }\n          : { text: option, value: option, type: \"option\" }\n      ),\n    [options]\n  );\n\n  const renderValue = useCallback(\n    (selected: string | string[]) => {\n      // If the selected value isn't an array, then we don't need to display\n      // chips and should fall back to the default render behavior\n      if (typeof selected === \"string\") {\n        return undefined;\n      }\n\n      // Convert the selected options array into <Chip>s\n      const renderedChips = selected\n        .map((item: string) => {\n          const selectedOption = normalizedOptions.find(\n            (option) => option.value === item\n          );\n\n          if (!selectedOption) {\n            return null;\n          }\n\n          return <Chip key={item} label={selectedOption.text} />;\n        })\n        .filter(Boolean);\n\n      if (renderedChips.length === 0) {\n        return null;\n      }\n\n      // We need the <Box> to surround the <Chip>s for\n      // proper styling\n      return <Box>{renderedChips}</Box>;\n    },\n    [normalizedOptions]\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const children = useMemo(\n    () =>\n      normalizedOptions.map((option) => {\n        if (option.type === \"heading\") {\n          return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n        }\n\n        return (\n          <MenuItem key={option.value} value={option.value}>\n            {isMultiSelect && (\n              <MuiCheckbox checked={selectedValue.includes(option.value)} />\n            )}\n            {option.text}\n          </MenuItem>\n        );\n      }),\n    [isMultiSelect, normalizedOptions, selectedValue]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiSelect\n        aria-describedby={ariaDescribedBy}\n        children={children}\n        data-se={testId}\n        id={id}\n        labelId={label}\n        multiple={isMultiSelect}\n        name={nameOverride ?? id}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        renderValue={isMultiSelect ? renderValue : undefined}\n        value={selectedValue}\n      />\n    ),\n    [\n      children,\n      isMultiSelect,\n      label,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      selectedValue,\n      testId,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}