@okta/odyssey-react-mui 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.6.0](https://github.com/okta/odyssey/compare/v1.5.0...v1.6.0) (2023-11-02)
+
+### Features
+
+- **odyssey-react-mui:** wrapped typography component with context ([#2013](https://github.com/okta/odyssey/issues/2013)) ([4ae50de](https://github.com/okta/odyssey/commit/4ae50debc051299774847804509aa1dae0dad831))
+
+### Bug Fixes
+
+- revert [#2013](https://github.com/okta/odyssey/issues/2013) ([#2029](https://github.com/okta/odyssey/issues/2029)) ([9f75603](https://github.com/okta/odyssey/commit/9f7560336221ea00014b21627488932ade2d6e16))
+
 ## [1.5.0](https://github.com/okta/odyssey/compare/v1.4.0...v1.5.0) (2023-10-27)
 
 ### Features

package/dist/PasswordField.js

@@ -53,7 +53,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     } = _ref2;
     return _jsx(_InputBase, {
       "aria-describedby": ariaDescribedBy,
-      autoComplete: autoCompleteType,
+      autoComplete: inputType === "password" ? autoCompleteType : "off",
       autoFocus: hasInitialFocus,
       "data-se": testId,
       endAdornment: hasShowPassword && _jsx(_InputAdornment, {

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"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","errorMessageElementId","labelElementId","_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, errorMessageElementId, id, labelElementId }) => (\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={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\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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"}
+{"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","errorMessageElementId","labelElementId","_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, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\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={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\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":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,QAAQ,QACH,OAAO;AAAC,SAENC,QAAQ,EAAEC,QAAQ;AAAA,SAClBC,KAAK;AAEd,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAuE/C,MAAMC,aAAa,GAAGV,UAAU,CAC9B,CAAAW,IAAA,EAoBEC,GAAG,KACA;EAAA,IApBH;IACEC,gBAAgB;IAChBC,YAAY;IACZC,eAAe;IACfC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,UAAU,GAAG,KAAK;IAClBC,eAAe,GAAG,IAAI;IACtBC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,WAAW;IACXC,MAAM;IACNC;EACF,CAAC,GAAApB,IAAA;EAGD,MAAM;IAAEqB;EAAE,CAAC,GAAGzB,cAAc,CAAC,CAAC;EAC9B,MAAM,CAAC0B,SAAS,EAAEC,YAAY,CAAC,GAAG/B,QAAQ,CAAC,UAAU,CAAC;EAEtD,MAAMgC,wBAAwB,GAAGjC,WAAW,CAAC,MAAM;IACjDgC,YAAY,CAAED,SAAS,IACrBA,SAAS,KAAK,UAAU,GAAG,MAAM,GAAG,UACtC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,oBAAoB,GAAGlC,WAAW,CACtCmC,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEtB,EAAE;MAAEuB;IAAe,CAAC,GAAAH,KAAA;IAAA,OAC7D5B,IAAA,CAAAgC,UAAA;MACE,oBAAkBH,eAAgB;MAClCI,YAAY,EAAET,SAAS,KAAK,UAAU,GAAGpB,gBAAgB,GAAG,KAAM;MAElE8B,SAAS,EAAE5B,eAAgB;MAC3B,WAASe,MAAO;MAChBc,YAAY,EACVvB,eAAe,IACbZ,IAAA,CAAAoC,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAC5BtC,IAAA,CAAAuC,WAAA;UACE,cACEf,SAAS,KAAK,UAAU,GACpBD,CAAC,CAAC,+BAA+B,CAAC,GAClCA,CAAC,CAAC,+BAA+B,CACtC;UACDiB,OAAO,EAAEd,wBAAyB;UAAAY,QAAA,EAEjCd,SAAS,KAAK,UAAU,GAAGxB,IAAA,CAACL,QAAQ,IAAE,CAAC,GAAGK,IAAA,CAACJ,QAAQ,IAAE;QAAC,CAC7C;MAAC,CACC,CAEnB;MACDY,EAAE,EAAEA,EAAG;MACPiC,UAAU,EAAE;QACV,mBAAmB,EAAEX,qBAAqB;QAC1C,iBAAiB,EAAEC,cAAc;QAEjCW,IAAI,EAAE;MACR,CAAE;MACF3B,IAAI,EAAEC,YAAY,IAAIR,EAAG;MACzBS,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,MAAM,EAAEA,MAAO;MACfC,WAAW,EAAEA,WAAY;MACzBuB,QAAQ,EAAE9B,UAAW;MACrBV,GAAG,EAAEA,GAAI;MACTyC,QAAQ,EAAE,CAACjC,UAAW;MACtBkC,IAAI,EAAErB,SAAU;MAChBF,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACElB,gBAAgB,EAChBE,eAAe,EACfiB,CAAC,EACDG,wBAAwB,EACxBF,SAAS,EACTR,YAAY,EACZC,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXT,UAAU,EACVE,UAAU,EACVD,eAAe,EACfT,GAAG,EACHkB,MAAM,EACNC,KAAK,CAET,CAAC;EAED,OACEtB,IAAA,CAACH,KAAK;IACJQ,YAAY,EAAEA,YAAa;IAC3ByC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfxC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBG,KAAK,EAAEA,KAAM;IACba,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMqB,qBAAqB,GAAGxD,IAAI,CAACS,aAAa,CAAC;AACjD+C,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAI/C,aAAa"}

package/dist/Select.js

@@ -25,39 +25,37 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const Select = _ref => {
   let {
     errorMessage,
+    hasMultipleChoices: hasMultipleChoicesProp,
     hint,
     id: idOverride,
     isDisabled = false,
-    isMultiSelect = false,
+    isMultiSelect,
     isOptional = false,
     label,
     name: nameOverride,
     onBlur,
     onChange: onChangeProp,
     onFocus,
-    value,
+    options,
     testId,
-    options
+    value
   } = _ref;
-  if (typeof value === "undefined") {
-    value = isMultiSelect ? [] : "";
-  }
-  const [selectedValue, setSelectedValue] = useState(value);
+  const hasMultipleChoices = useMemo(() => hasMultipleChoicesProp === undefined ? isMultiSelect : hasMultipleChoicesProp, [hasMultipleChoicesProp, isMultiSelect]);
+  const formattedValueForMultiSelect = isMultiSelect ? [] : "";
+  const [selectedValue, setSelectedValue] = useState(value === undefined ? formattedValueForMultiSelect : value);
   const onChange = useCallback((event, child) => {
-    const {
-      target: {
-        value
+    const valueFromEvent = event.target.value;
+    if (typeof valueFromEvent === "string") {
+      if (hasMultipleChoices) {
+        setSelectedValue(valueFromEvent.split(","));
+      } else {
+        setSelectedValue(valueFromEvent);
       }
-    } = event;
-    if (isMultiSelect) {
-      setSelectedValue(typeof value === "string" ? value.split(",") : value);
     } else {
-      setSelectedValue(value);
+      setSelectedValue(valueFromEvent);
     }
-    if (onChangeProp) {
-      onChangeProp(event, child);
-    }
-  }, [isMultiSelect, onChangeProp, setSelectedValue]);
+    onChangeProp?.(event, child);
+  }, [hasMultipleChoices, onChangeProp, setSelectedValue]);
   const normalizedOptions = useMemo(() => options.map(option => typeof option === "object" ? {
     text: option.text,
     value: option.value || option.text,
@@ -95,13 +93,13 @@ const Select = _ref => {
     }
     return _jsxs(_MenuItem, {
       value: option.value,
-      children: [isMultiSelect && _jsx(_Checkbox, {
+      children: [hasMultipleChoices && _jsx(_Checkbox, {
         checked: selectedValue.includes(option.value)
       }), option.text, selectedValue == option.value && _jsx(_ListItemSecondaryAction, {
         children: _jsx(CheckIcon, {})
       })]
     }, option.value);
-  }), [isMultiSelect, normalizedOptions, selectedValue]);
+  }), [hasMultipleChoices, normalizedOptions, selectedValue]);
   const renderFieldComponent = useCallback(_ref2 => {
     let {
       ariaDescribedBy,
@@ -110,21 +108,21 @@ const Select = _ref => {
       labelElementId
     } = _ref2;
     return _jsx(_Select, {
+      "aria-describedby": ariaDescribedBy,
+      "aria-errormessage": errorMessageElementId,
       children: children,
       "data-se": testId,
       id: id,
-      "aria-errormessage": errorMessageElementId,
-      "aria-describedby": ariaDescribedBy,
       labelId: labelElementId,
-      multiple: isMultiSelect,
+      multiple: hasMultipleChoices,
       name: nameOverride ?? id,
       onBlur: onBlur,
       onChange: onChange,
       onFocus: onFocus,
-      renderValue: isMultiSelect ? renderValue : undefined,
+      renderValue: hasMultipleChoices ? renderValue : undefined,
       value: selectedValue
     });
-  }, [children, isMultiSelect, nameOverride, onBlur, onChange, onFocus, renderValue, selectedValue, testId]);
+  }, [children, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, selectedValue, testId]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useMemo","useState","Field","CheckIcon","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","_ListItemSecondaryAction","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_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  ListItemSecondaryAction,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { CheckIcon } from \"./icons.generated\";\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            {selectedValue == option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [isMultiSelect, normalizedOptions, selectedValue]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        children={children}\n        data-se={testId}\n        id={id}\n        aria-errormessage={errorMessageElementId}\n        aria-describedby={ariaDescribedBy}\n        labelId={labelElementId}\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      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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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useMemo","useState","Field","CheckIcon","jsx","_jsx","jsxs","_jsxs","Select","_ref","errorMessage","hasMultipleChoices","hasMultipleChoicesProp","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","value","undefined","formattedValueForMultiSelect","selectedValue","setSelectedValue","event","child","valueFromEvent","target","split","normalizedOptions","map","option","text","type","renderValue","selected","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","_ListItemSecondaryAction","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_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 { memo, useCallback, useMemo, useState } from \"react\";\nimport {\n  Box,\n  Checkbox as MuiCheckbox,\n  Chip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { CheckIcon } from \"./icons.generated\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\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   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\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<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"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?: Value;\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  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  errorMessage,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  id: idOverride,\n  isDisabled = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect]\n  );\n\n  const formattedValueForMultiSelect = isMultiSelect\n    ? ([] as string[] as Value)\n    : (\"\" as string as Value);\n\n  const [selectedValue, setSelectedValue] = useState(\n    value === undefined ? formattedValueForMultiSelect : value\n  );\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const valueFromEvent = event.target.value;\n\n      if (typeof valueFromEvent === \"string\") {\n        if (hasMultipleChoices) {\n          setSelectedValue(valueFromEvent.split(\",\") as Value);\n        } else {\n          setSelectedValue(valueFromEvent as Value);\n        }\n      } else {\n        setSelectedValue(valueFromEvent);\n      }\n\n      onChangeProp?.(event, child);\n    },\n    [hasMultipleChoices, 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: Value) => {\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            {hasMultipleChoices && (\n              <MuiCheckbox checked={selectedValue.includes(option.value)} />\n            )}\n            {option.text}\n            {selectedValue == option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, selectedValue]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        children={children}\n        data-se={testId}\n        id={id}\n        labelId={labelElementId}\n        multiple={hasMultipleChoices}\n        name={nameOverride ?? id}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        renderValue={hasMultipleChoices ? renderValue : undefined}\n        value={selectedValue}\n      />\n    ),\n    [\n      children,\n      hasMultipleChoices,\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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"}

package/dist/index.js

@@ -23,6 +23,7 @@ export * from "./Callout.js";
 export * from "./Checkbox.js";
 export * from "./CheckboxGroup.js";
 export * from "./CircularProgress.js";
+export * from "./createShadowDom.js";
 export * from "./createUniqueId.js";
 export * from "./Dialog.js";
 export * from "./Fieldset.js";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","CssBaseline","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens","odysseyTranslate"],"sources":["../src/index.ts"],"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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  CssBaseline,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./Form\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport { odysseyTranslate } from \"./i18n\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAsBtBC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"index.js","names":["deepmerge","visuallyHidden","createTheme","CssBaseline","DialogContentText","Divider","InputAdornment","InputBase","ListItemIcon","ListItemText","ListSubheader","MenuList","Paper","ScopedCssBaseline","ThemeProvider","useOdysseyDesignTokens","odysseyTranslate"],"sources":["../src/index.ts"],"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\nexport { deepmerge, visuallyHidden } from \"@mui/utils\";\n\nexport {\n  createTheme,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  CssBaseline,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  DialogContentText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Divider,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputAdornment,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  InputBase,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemIcon,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListItemText,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ListSubheader,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  MenuList,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  Paper,\n  /** @deprecated Will be removed in a future Odyssey version in lieu of a wrapped version. */\n  ScopedCssBaseline,\n  ThemeProvider,\n} from \"@mui/material\";\n\nexport type {\n  CssBaselineProps,\n  DialogContentTextProps,\n  DividerProps,\n  InputAdornmentProps,\n  InputBaseProps,\n  ListItemIconProps,\n  ListItemTextProps,\n  ListSubheaderProps,\n  MenuListProps,\n  PaperProps,\n  ScopedCssBaselineProps,\n  ThemeOptions,\n} from \"@mui/material\";\n\nexport { useOdysseyDesignTokens } from \"./OdysseyDesignTokensContext\";\n\nexport * from \"./Accordion\";\nexport * from \"./Autocomplete\";\nexport * from \"./Banner\";\nexport * from \"./Box\";\nexport * from \"./Breadcrumbs\";\nexport * from \"./Button\";\nexport * from \"./Callout\";\nexport * from \"./Checkbox\";\nexport * from \"./CheckboxGroup\";\nexport * from \"./CircularProgress\";\nexport * from \"./createShadowDom\";\nexport * from \"./createUniqueId\";\nexport * from \"./Dialog\";\nexport * from \"./Fieldset\";\nexport * from \"./Form\";\nexport * from \"./Link\";\nexport * from \"./MenuButton\";\nexport * from \"./MenuItem\";\nexport * from \"./NativeSelect\";\nexport * from \"./NullElement\";\nexport * from \"./OdysseyCacheProvider\";\nexport { odysseyTranslate } from \"./i18n\";\nexport * from \"./OdysseyProvider\";\nexport * from \"./OdysseyThemeProvider\";\nexport * from \"./OdysseyTranslationProvider\";\nexport * from \"./PasswordField\";\nexport * from \"./Radio\";\nexport * from \"./RadioGroup\";\nexport * from \"./ScreenReaderText\";\nexport * from \"./SearchField\";\nexport * from \"./Select\";\nexport * from \"./Status\";\nexport * from \"./Tabs\";\nexport * from \"./Tag\";\nexport * from \"./TagList\";\nexport * from \"./TextField\";\nexport * from \"./theme\";\nexport * from \"./Toast\";\nexport * from \"./ToastStack\";\nexport * from \"./Tooltip\";\nexport * from \"./Typography\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,cAAc,QAAQ,YAAY;AAEtD,SACEC,WAAW,EAEXC,WAAW,EAEXC,iBAAiB,EAEjBC,OAAO,EAEPC,cAAc,EAEdC,SAAS,EAETC,YAAY,EAEZC,YAAY,EAEZC,aAAa,EAEbC,QAAQ,EAERC,KAAK,EAELC,iBAAiB,EACjBC,aAAa,QACR,eAAe;AAAC,SAiBdC,sBAAsB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAuBtBC,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/src/Select.d.ts

@@ -17,11 +17,16 @@ export type SelectOption = {
     type?: "heading" | "option";
     value?: string;
 };
-export type SelectProps = {
+export type SelectValueType<HasMultipleChoices> = HasMultipleChoices extends true ? string[] : string;
+export type SelectProps<Value extends SelectValueType<HasMultipleChoices>, HasMultipleChoices extends boolean> = {
     /**
      * The error message for the Select
      */
     errorMessage?: string;
+    /**
+     * If `true`, the Select allows multiple selections
+     */
+    hasMultipleChoices?: HasMultipleChoices;
     /**
      * The hint text for the Select
      */
@@ -35,9 +40,10 @@ export type SelectProps = {
      */
     isDisabled?: boolean;
     /**
-     * If `true`, the Select allows multiple selections
+     * @deprecated Use `hasMultipleChoices` instead.
      */
-    isMultiSelect?: boolean;
+    /** **Deprecated:** use `hasMultipleChoices` */
+    isMultiSelect?: HasMultipleChoices;
     /**
      * If `true`, the Select is optional
      */
@@ -53,15 +59,15 @@ export type SelectProps = {
     /**
      * Callback fired when the Select loses focus
      */
-    onBlur?: MuiSelectProps["onBlur"];
+    onBlur?: MuiSelectProps<Value>["onBlur"];
     /**
      * Callback fired when the value of the Select changes
      */
-    onChange?: MuiSelectProps["onChange"];
+    onChange?: MuiSelectProps<Value>["onChange"];
     /**
      * Callback fired when the Select gains focus
      */
-    onFocus?: MuiSelectProps["onFocus"];
+    onFocus?: MuiSelectProps<Value>["onFocus"];
     /**
      * The options for the Select
      */
@@ -69,8 +75,8 @@ export type SelectProps = {
     /**
      * The value or values selected in the Select
      */
-    value?: string | string[];
+    value?: Value;
 } & SeleniumProps;
-declare const MemoizedSelect: import("react").MemoExoticComponent<({ errorMessage, hint, id: idOverride, isDisabled, isMultiSelect, isOptional, label, name: nameOverride, onBlur, onChange: onChangeProp, onFocus, value, testId, options, }: SelectProps) => JSX.Element>;
+declare const MemoizedSelect: import("react").MemoExoticComponent<(<Value extends SelectValueType<HasMultipleChoices>, HasMultipleChoices extends boolean>({ errorMessage, hasMultipleChoices: hasMultipleChoicesProp, hint, id: idOverride, isDisabled, isMultiSelect, isOptional, label, name: nameOverride, onBlur, onChange: onChangeProp, onFocus, options, testId, value, }: SelectProps<Value, HasMultipleChoices>) => JSX.Element)>;
 export { MemoizedSelect as Select };
 //# sourceMappingURL=Select.d.ts.map

package/dist/src/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAaH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC;IAClC;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,YAAY,CAAC,EAAE,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC3B,GAAG,aAAa,CAAC;AAyLlB,QAAA,MAAM,cAAc,mNAzJjB,WAAW,iBAyJqB,CAAC;AAGpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAYH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AAE9D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGrD,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,kBAAkB,IAC5C,kBAAkB,SAAS,IAAI,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;AAEtD,MAAM,MAAM,WAAW,CACrB,KAAK,SAAS,eAAe,CAAC,kBAAkB,CAAC,EACjD,kBAAkB,SAAS,OAAO,IAChC;IACF;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,+CAA+C;IAC/C,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzC;;OAEG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7C;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC;IAC3C;;OAEG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,YAAY,CAAC,EAAE,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC;CACf,GAAG,aAAa,CAAC;AAkMlB,QAAA,MAAM,cAAc,+YAAe,CAAC;AAGpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}

package/dist/src/index.d.ts

@@ -45,6 +45,7 @@ export * from "./Callout";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
+export * from "./createShadowDom";
 export * from "./createUniqueId";
 export * from "./Dialog";
 export * from "./Fieldset";

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EACL,WAAW;AACX,4FAA4F;AAC5F,WAAW;AACX,4FAA4F;AAC5F,iBAAiB;AACjB,4FAA4F;AAC5F,OAAO;AACP,4FAA4F;AAC5F,cAAc;AACd,4FAA4F;AAC5F,SAAS;AACT,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,aAAa;AACb,4FAA4F;AAC5F,QAAQ;AACR,4FAA4F;AAC5F,KAAK;AACL,4FAA4F;AAC5F,iBAAiB,EACjB,aAAa,GACd,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEvD,OAAO,EACL,WAAW;AACX,4FAA4F;AAC5F,WAAW;AACX,4FAA4F;AAC5F,iBAAiB;AACjB,4FAA4F;AAC5F,OAAO;AACP,4FAA4F;AAC5F,cAAc;AACd,4FAA4F;AAC5F,SAAS;AACT,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,YAAY;AACZ,4FAA4F;AAC5F,aAAa;AACb,4FAA4F;AAC5F,QAAQ;AACR,4FAA4F;AAC5F,KAAK;AACL,4FAA4F;AAC5F,iBAAiB,EACjB,aAAa,GACd,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,gBAAgB,EAChB,sBAAsB,EACtB,YAAY,EACZ,mBAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,sBAAsB,EACtB,YAAY,GACb,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,wBAAwB,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}

package/dist/theme/components.js

@@ -1561,7 +1561,7 @@ export const components = _ref => {
       styleOverrides: {
         root: {
           color: odysseyTokens.TypographyColorAction,
-          textDecoration: "underline",
+          textDecoration: "none",
           cursor: "pointer",
           "&:visited": {
             color: odysseyTokens.TypographyColorAction
@@ -1584,10 +1584,10 @@ export const components = _ref => {
             lineHeight: 1
           },
           ".Link-indicator": {
-            marginInlineStart: odysseyTokens.Spacing2
+            marginInlineStart: odysseyTokens.Spacing1
           },
           ".Link-icon": {
-            marginInlineEnd: odysseyTokens.Spacing2
+            marginInlineEnd: odysseyTokens.Spacing1
           },
           svg: {
             fontSize: "1em",