@okta/odyssey-react-mui 1.1.1 → 1.4.0

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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"}

package/dist/Tabs.js

@@ -11,8 +11,8 @@ import _Tab from "@mui/material/Tab";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { memo, useCallback, useEffect, useState } from "react";
-import { TabList as MuiTabList, TabPanel as MuiTabPanel, TabContext as MuiTabContext } from "@mui/lab";
+import { TabContext as MuiTabContext, TabList as MuiTabList, TabPanel as MuiTabPanel } from "@mui/lab";
+import { memo, useCallback, useEffect, useState } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = _ref => {
@@ -20,12 +20,14 @@ const Tabs = _ref => {
     ariaLabel,
     initialValue,
     tabs,
-    value
+    value,
+    onChange: onChangeProp
   } = _ref;
   const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
-  const onChange = useCallback((_event, newState) => {
-    setTabState(newState);
-  }, []);
+  const onChange = useCallback((event, value) => {
+    setTabState(value);
+    onChangeProp?.(event, value);
+  }, [onChangeProp]);
   useEffect(() => {
     if (value !== undefined) {
       setTabState(value);

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","memo","useCallback","useEffect","useState","TabList","MuiTabList","TabPanel","MuiTabPanel","TabContext","MuiTabContext","jsx","_jsx","jsxs","_jsxs","Tabs","_ref","ariaLabel","initialValue","tabs","value","tabState","setTabState","onChange","_event","newState","undefined","children","map","tab","index","_Tab","testId","disabled","isDisabled","icon","startIcon","label","toString","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport React, {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Tab as MuiTab } from \"@mui/material\";\nimport {\n  TabList as MuiTabList,\n  TabPanel as MuiTabPanel,\n  TabContext as MuiTabContext,\n} from \"@mui/lab\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & SeleniumProps;\n\nexport type TabsProps = {\n  /**\n   * The ARIA label for the full Tabs group\n   */\n  ariaLabel?: string;\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n};\n\nconst Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n\n  const onChange = useCallback(\n    (_event: React.SyntheticEvent, newState: string) => {\n      setTabState(newState);\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList onChange={onChange} aria-label={ariaLabel}>\n        {tabs.map((tab, index) => (\n          <MuiTab\n            data-se={tab.testId}\n            disabled={tab.isDisabled}\n            icon={tab.startIcon}\n            label={tab.label}\n            value={tab.value ? tab.value : index.toString()}\n            key={tab.value ? tab.value : index.toString()}\n          />\n        ))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAGVC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,QAAQ,QACH,OAAO;AAEd,SACEC,OAAO,IAAIC,UAAU,EACrBC,QAAQ,IAAIC,WAAW,EACvBC,UAAU,IAAIC,aAAa,QACtB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA8ClB,MAAMC,IAAI,GAAGC,IAAA,IAAyD;EAAA,IAAxD;IAAEC,SAAS;IAAEC,YAAY;IAAEC,IAAI;IAAEC;EAAiB,CAAC,GAAAJ,IAAA;EAC/D,MAAM,CAACK,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACc,YAAY,IAAIE,KAAK,IAAI,GAAG,CAAC;EAEtE,MAAMG,QAAQ,GAAGrB,WAAW,CAC1B,CAACsB,MAA4B,EAAEC,QAAgB,KAAK;IAClDH,WAAW,CAACG,QAAQ,CAAC;EACvB,CAAC,EACD,EACF,CAAC;EAEDtB,SAAS,CAAC,MAAM;IACd,IAAIiB,KAAK,KAAKM,SAAS,EAAE;MACvBJ,WAAW,CAACF,KAAK,CAAC;IACpB;EACF,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,OACEN,KAAA,CAACJ,aAAa;IAACU,KAAK,EAAEC,QAAS;IAAAM,QAAA,GAC7Bf,IAAA,CAACN,UAAU;MAACiB,QAAQ,EAAEA,QAAS;MAAC,cAAYN,SAAU;MAAAU,QAAA,EACnDR,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAAAmB,IAAA;QACE,WAASF,GAAG,CAACG,MAAO;QACpBC,QAAQ,EAAEJ,GAAG,CAACK,UAAW;QACzBC,IAAI,EAAEN,GAAG,CAACO,SAAU;QACpBC,KAAK,EAAER,GAAG,CAACQ,KAAM;QACjBjB,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC;MAAE,GAC3CT,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAC7C,CACF;IAAC,CACQ,CAAC,EACZnB,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAACJ,WAAW;MACVY,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAAE;MAAAX,QAAA,EAG/CE,GAAG,CAACF;IAAQ,GAFRE,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAGjC,CACd,CAAC;EAAA,CACW,CAAC;AAEpB,CAAC;AAED,MAAMC,YAAY,GAAGtC,IAAI,CAACc,IAAI,CAAC;AAC/BwB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIxB,IAAI"}
+{"version":3,"file":"Tabs.js","names":["TabContext","MuiTabContext","TabList","MuiTabList","TabPanel","MuiTabPanel","memo","useCallback","useEffect","useState","jsx","_jsx","jsxs","_jsxs","Tabs","_ref","ariaLabel","initialValue","tabs","value","onChange","onChangeProp","tabState","setTabState","event","undefined","children","map","tab","index","_Tab","testId","disabled","isDisabled","icon","startIcon","label","toString","MemoizedTabs","displayName"],"sources":["../src/Tabs.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  TabContext as MuiTabContext,\n  TabList as MuiTabList,\n  TabListProps as MuiTabListProps,\n  TabPanel as MuiTabPanel,\n} from \"@mui/lab\";\nimport { Tab as MuiTab } from \"@mui/material\";\nimport {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & SeleniumProps;\n\nexport type TabsProps = {\n  /**\n   * The ARIA label for the full Tabs group\n   */\n  ariaLabel?: string;\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n  /**\n   * Callback fired when the active tab is changed.\n   */\n  onChange?: MuiTabListProps[\"onChange\"];\n};\n\nconst Tabs = ({\n  ariaLabel,\n  initialValue,\n  tabs,\n  value,\n  onChange: onChangeProp,\n}: TabsProps) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n\n  const onChange = useCallback<NonNullable<MuiTabListProps[\"onChange\"]>>(\n    (event, value: string) => {\n      setTabState(value);\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp]\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList onChange={onChange} aria-label={ariaLabel}>\n        {tabs.map((tab, index) => (\n          <MuiTab\n            data-se={tab.testId}\n            disabled={tab.isDisabled}\n            icon={tab.startIcon}\n            label={tab.label}\n            value={tab.value ? tab.value : index.toString()}\n            key={tab.value ? tab.value : index.toString()}\n          />\n        ))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,UAAU,IAAIC,aAAa,EAC3BC,OAAO,IAAIC,UAAU,EAErBC,QAAQ,IAAIC,WAAW,QAClB,UAAU;AAEjB,SAGEC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,QAAQ,QACH,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkDf,MAAMC,IAAI,GAAGC,IAAA,IAMI;EAAA,IANH;IACZC,SAAS;IACTC,YAAY;IACZC,IAAI;IACJC,KAAK;IACLC,QAAQ,EAAEC;EACD,CAAC,GAAAN,IAAA;EACV,MAAM,CAACO,QAAQ,EAAEC,WAAW,CAAC,GAAGd,QAAQ,CAACQ,YAAY,IAAIE,KAAK,IAAI,GAAG,CAAC;EAEtE,MAAMC,QAAQ,GAAGb,WAAW,CAC1B,CAACiB,KAAK,EAAEL,KAAa,KAAK;IACxBI,WAAW,CAACJ,KAAK,CAAC;IAClBE,YAAY,GAAGG,KAAK,EAAEL,KAAK,CAAC;EAC9B,CAAC,EACD,CAACE,YAAY,CACf,CAAC;EAEDb,SAAS,CAAC,MAAM;IACd,IAAIW,KAAK,KAAKM,SAAS,EAAE;MACvBF,WAAW,CAACJ,KAAK,CAAC;IACpB;EACF,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,OACEN,KAAA,CAACZ,aAAa;IAACkB,KAAK,EAAEG,QAAS;IAAAI,QAAA,GAC7Bf,IAAA,CAACR,UAAU;MAACiB,QAAQ,EAAEA,QAAS;MAAC,cAAYJ,SAAU;MAAAU,QAAA,EACnDR,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAAAmB,IAAA;QACE,WAASF,GAAG,CAACG,MAAO;QACpBC,QAAQ,EAAEJ,GAAG,CAACK,UAAW;QACzBC,IAAI,EAAEN,GAAG,CAACO,SAAU;QACpBC,KAAK,EAAER,GAAG,CAACQ,KAAM;QACjBjB,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC;MAAE,GAC3CT,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAC7C,CACF;IAAC,CACQ,CAAC,EACZnB,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAACN,WAAW;MACVc,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAAE;MAAAX,QAAA,EAG/CE,GAAG,CAACF;IAAQ,GAFRE,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAGjC,CACd,CAAC;EAAA,CACW,CAAC;AAEpB,CAAC;AAED,MAAMC,YAAY,GAAGhC,IAAI,CAACQ,IAAI,CAAC;AAC/BwB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIxB,IAAI"}

package/dist/Typography.js

@@ -31,7 +31,6 @@ const Typography = _ref => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component: componentProp,
     testId,
@@ -54,7 +53,6 @@ const Typography = _ref => {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -69,7 +67,6 @@ const Heading1 = _ref2 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -79,7 +76,6 @@ const Heading1 = _ref2 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -94,7 +90,6 @@ const Heading2 = _ref3 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -104,7 +99,6 @@ const Heading2 = _ref3 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -119,7 +113,6 @@ const Heading3 = _ref4 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -129,7 +122,6 @@ const Heading3 = _ref4 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -144,7 +136,6 @@ const Heading4 = _ref5 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -154,7 +145,6 @@ const Heading4 = _ref5 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -169,7 +159,6 @@ const Heading5 = _ref6 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -179,7 +168,6 @@ const Heading5 = _ref6 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -194,7 +182,6 @@ const Heading6 = _ref7 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -204,7 +191,6 @@ const Heading6 = _ref7 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -219,7 +205,6 @@ const Paragraph = _ref8 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -229,7 +214,6 @@ const Paragraph = _ref8 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -244,7 +228,6 @@ const Subordinate = _ref9 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -254,7 +237,6 @@ const Subordinate = _ref9 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -269,7 +251,6 @@ const Support = _ref10 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -279,7 +260,6 @@ const Support = _ref10 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,
@@ -294,7 +274,6 @@ const Legend = _ref11 => {
     ariaLabel,
     ariaLabelledBy,
     children,
-    classes,
     color,
     component,
     testId
@@ -304,7 +283,6 @@ const Legend = _ref11 => {
     ariaLabel: ariaLabel,
     ariaLabelledBy: ariaLabelledBy,
     children: children,
-    classes: classes,
     color: color,
     component: component,
     "data-se": testId,

package/dist/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","names":["memo","useMemo","jsx","_jsx","typographyVariantMapping","h1","h2","h3","h4","h5","h6","body","subordinate","support","legend","typographyColorValues","Typography","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","children","classes","color","component","componentProp","testId","variant","_Typography","MemoizedTypography","displayName","Heading1","_ref2","MemoizedHeading1","Heading2","_ref3","MemoizedHeading2","Heading3","_ref4","MemoizedHeading3","Heading4","_ref5","MemoizedHeading4","Heading5","_ref6","MemoizedHeading5","Heading6","_ref7","MemoizedHeading6","Paragraph","_ref8","MemoizedParagraph","Subordinate","_ref9","MemoizedSubordinate","Support","_ref10","MemoizedSupport","Legend","_ref11","MemoizedLegend"],"sources":["../src/Typography.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  Typography as MuiTypography,\n  TypographyProps as MuiTypographyProps,\n} from \"@mui/material\";\nimport { ElementType, ReactNode, memo, useMemo } from \"react\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TypographyVariantValue =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"body\"\n  | \"subordinate\"\n  | \"support\"\n  | \"legend\";\n\nexport const typographyVariantMapping: Record<\n  TypographyVariantValue,\n  MuiTypographyProps[\"variant\"]\n> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  body: \"body1\",\n  subordinate: \"subtitle1\",\n  support: \"subtitle2\",\n  legend: \"legend\",\n} as const;\n\nexport const typographyColorValues = [\n  \"primary\",\n  \"textPrimary\",\n  \"secondary\",\n  \"textSecondary\",\n  \"error\",\n] as const;\n\nexport type TypographyProps = {\n  /**\n   * The ID of the element that describes the component.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ARIA label for the component.\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The text content of the component.\n   */\n  children: ReactNode;\n  /**\n   * Additional classes to add to the component.\n   */\n  classes?: object;\n  /**\n   * The color of the text.\n   */\n  color?: (typeof typographyColorValues)[number];\n  /**\n   * The HTML element the component should render, if different from the default.\n   */\n  component?: ElementType;\n  /**\n   * The variant of Typography to render.\n   */\n  variant?: keyof typeof typographyVariantMapping;\n} & SeleniumProps;\n\nconst Typography = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component: componentProp,\n  testId,\n  variant = \"body\",\n}: TypographyProps) => {\n  const component = useMemo(() => {\n    if (!componentProp) {\n      if (variant === \"body\") {\n        return \"p\";\n      } else if (variant === \"subordinate\" || variant === \"support\") {\n        return \"p\";\n      } else {\n        return variant;\n      }\n    }\n    return componentProp;\n  }, [componentProp, variant]);\n\n  return (\n    <MuiTypography\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      children={children}\n      classes={classes}\n      color={color}\n      component={component}\n      data-se={testId}\n      variant={typographyVariantMapping[variant]}\n    />\n  );\n};\n\nconst MemoizedTypography = memo(Typography);\nMemoizedTypography.displayName = \"Typography\";\n\nconst Heading1 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h1\"\n  />\n);\n\nconst MemoizedHeading1 = memo(Heading1);\nMemoizedHeading1.displayName = \"Heading1\";\n\nconst Heading2 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h2\"\n  />\n);\n\nconst MemoizedHeading2 = memo(Heading2);\nMemoizedHeading2.displayName = \"Heading2\";\n\nconst Heading3 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h3\"\n  />\n);\n\nconst MemoizedHeading3 = memo(Heading3);\nMemoizedHeading3.displayName = \"Heading3\";\n\nconst Heading4 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h4\"\n  />\n);\n\nconst MemoizedHeading4 = memo(Heading4);\nMemoizedHeading4.displayName = \"Heading4\";\n\nconst Heading5 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h5\"\n  />\n);\n\nconst MemoizedHeading5 = memo(Heading5);\nMemoizedHeading5.displayName = \"Heading5\";\n\nconst Heading6 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h6\"\n  />\n);\n\nconst MemoizedHeading6 = memo(Heading6);\nMemoizedHeading6.displayName = \"Heading6\";\n\nconst Paragraph = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"body\"\n  />\n);\n\nconst MemoizedParagraph = memo(Paragraph);\nMemoizedParagraph.displayName = \"Paragraph\";\n\nconst Subordinate = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"subordinate\"\n  />\n);\n\nconst MemoizedSubordinate = memo(Subordinate);\nMemoizedSubordinate.displayName = \"Subordinate\";\n\nconst Support = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"support\"\n  />\n);\n\nconst MemoizedSupport = memo(Support);\nMemoizedSupport.displayName = \"Support\";\n\nconst Legend = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  classes,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    classes={classes}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"legend\"\n  />\n);\n\nconst MemoizedLegend = memo(Legend);\nMemoizedLegend.displayName = \"Legend\";\n\nexport {\n  MemoizedTypography as Typography,\n  MemoizedHeading1 as Heading1,\n  MemoizedHeading2 as Heading2,\n  MemoizedHeading3 as Heading3,\n  MemoizedHeading4 as Heading4,\n  MemoizedHeading5 as Heading5,\n  MemoizedHeading6 as Heading6,\n  MemoizedLegend as Legend,\n  MemoizedParagraph as Paragraph,\n  MemoizedSubordinate as Subordinate,\n  MemoizedSupport as Support,\n};\n"],"mappings":"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"}
+{"version":3,"file":"Typography.js","names":["memo","useMemo","jsx","_jsx","typographyVariantMapping","h1","h2","h3","h4","h5","h6","body","subordinate","support","legend","typographyColorValues","Typography","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","children","color","component","componentProp","testId","variant","_Typography","MemoizedTypography","displayName","Heading1","_ref2","MemoizedHeading1","Heading2","_ref3","MemoizedHeading2","Heading3","_ref4","MemoizedHeading3","Heading4","_ref5","MemoizedHeading4","Heading5","_ref6","MemoizedHeading5","Heading6","_ref7","MemoizedHeading6","Paragraph","_ref8","MemoizedParagraph","Subordinate","_ref9","MemoizedSubordinate","Support","_ref10","MemoizedSupport","Legend","_ref11","MemoizedLegend"],"sources":["../src/Typography.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  Typography as MuiTypography,\n  TypographyProps as MuiTypographyProps,\n} from \"@mui/material\";\nimport { ElementType, ReactNode, memo, useMemo } from \"react\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TypographyVariantValue =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"body\"\n  | \"subordinate\"\n  | \"support\"\n  | \"legend\";\n\nexport const typographyVariantMapping: Record<\n  TypographyVariantValue,\n  MuiTypographyProps[\"variant\"]\n> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  body: \"body1\",\n  subordinate: \"subtitle1\",\n  support: \"subtitle2\",\n  legend: \"legend\",\n} as const;\n\nexport const typographyColorValues = [\n  \"primary\",\n  \"textPrimary\",\n  \"secondary\",\n  \"textSecondary\",\n  \"error\",\n] as const;\n\nexport type TypographyProps = {\n  /**\n   * The ID of the element that describes the component.\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ARIA label for the component.\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the component.\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The text content of the component.\n   */\n  children: ReactNode;\n  /**\n   * The color of the text.\n   */\n  color?: (typeof typographyColorValues)[number];\n  /**\n   * The HTML element the component should render, if different from the default.\n   */\n  component?: ElementType;\n  /**\n   * The variant of Typography to render.\n   */\n  variant?: keyof typeof typographyVariantMapping;\n} & SeleniumProps;\n\nconst Typography = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component: componentProp,\n  testId,\n  variant = \"body\",\n}: TypographyProps) => {\n  const component = useMemo(() => {\n    if (!componentProp) {\n      if (variant === \"body\") {\n        return \"p\";\n      } else if (variant === \"subordinate\" || variant === \"support\") {\n        return \"p\";\n      } else {\n        return variant;\n      }\n    }\n    return componentProp;\n  }, [componentProp, variant]);\n\n  return (\n    <MuiTypography\n      aria-describedby={ariaDescribedBy}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      children={children}\n      color={color}\n      component={component}\n      data-se={testId}\n      variant={typographyVariantMapping[variant]}\n    />\n  );\n};\n\nconst MemoizedTypography = memo(Typography);\nMemoizedTypography.displayName = \"Typography\";\n\nconst Heading1 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h1\"\n  />\n);\n\nconst MemoizedHeading1 = memo(Heading1);\nMemoizedHeading1.displayName = \"Heading1\";\n\nconst Heading2 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h2\"\n  />\n);\n\nconst MemoizedHeading2 = memo(Heading2);\nMemoizedHeading2.displayName = \"Heading2\";\n\nconst Heading3 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h3\"\n  />\n);\n\nconst MemoizedHeading3 = memo(Heading3);\nMemoizedHeading3.displayName = \"Heading3\";\n\nconst Heading4 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h4\"\n  />\n);\n\nconst MemoizedHeading4 = memo(Heading4);\nMemoizedHeading4.displayName = \"Heading4\";\n\nconst Heading5 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h5\"\n  />\n);\n\nconst MemoizedHeading5 = memo(Heading5);\nMemoizedHeading5.displayName = \"Heading5\";\n\nconst Heading6 = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"h6\"\n  />\n);\n\nconst MemoizedHeading6 = memo(Heading6);\nMemoizedHeading6.displayName = \"Heading6\";\n\nconst Paragraph = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"body\"\n  />\n);\n\nconst MemoizedParagraph = memo(Paragraph);\nMemoizedParagraph.displayName = \"Paragraph\";\n\nconst Subordinate = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"subordinate\"\n  />\n);\n\nconst MemoizedSubordinate = memo(Subordinate);\nMemoizedSubordinate.displayName = \"Subordinate\";\n\nconst Support = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"support\"\n  />\n);\n\nconst MemoizedSupport = memo(Support);\nMemoizedSupport.displayName = \"Support\";\n\nconst Legend = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component,\n  testId,\n}: TypographyProps) => (\n  <Typography\n    ariaDescribedBy={ariaDescribedBy}\n    ariaLabel={ariaLabel}\n    ariaLabelledBy={ariaLabelledBy}\n    children={children}\n    color={color}\n    component={component}\n    data-se={testId}\n    variant=\"legend\"\n  />\n);\n\nconst MemoizedLegend = memo(Legend);\nMemoizedLegend.displayName = \"Legend\";\n\nexport {\n  MemoizedTypography as Typography,\n  MemoizedHeading1 as Heading1,\n  MemoizedHeading2 as Heading2,\n  MemoizedHeading3 as Heading3,\n  MemoizedHeading4 as Heading4,\n  MemoizedHeading5 as Heading5,\n  MemoizedHeading6 as Heading6,\n  MemoizedLegend as Legend,\n  MemoizedParagraph as Paragraph,\n  MemoizedSubordinate as Subordinate,\n  MemoizedSupport as Support,\n};\n"],"mappings":"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"}

package/dist/createShadowDom.js

@@ -0,0 +1,26 @@
+/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+export const createShadowDom = containerElement => {
+  const shadowContainer = containerElement.attachShadow({
+    mode: "open"
+  });
+  const emotionRootElement = document.createElement("style");
+  const shadowRootElement = document.createElement("div");
+  shadowContainer.appendChild(emotionRootElement);
+  shadowContainer.appendChild(shadowRootElement);
+  return {
+    emotionRootElement,
+    shadowRootElement
+  };
+};
+//# sourceMappingURL=createShadowDom.js.map

package/dist/createShadowDom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createShadowDom.js","names":["createShadowDom","containerElement","shadowContainer","attachShadow","mode","emotionRootElement","document","createElement","shadowRootElement","appendChild"],"sources":["../src/createShadowDom.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const createShadowDom = (containerElement: HTMLElement) => {\n  const shadowContainer = containerElement.attachShadow({ mode: \"open\" });\n  const emotionRootElement = document.createElement(\"style\");\n  const shadowRootElement = document.createElement(\"div\");\n\n  shadowContainer.appendChild(emotionRootElement);\n  shadowContainer.appendChild(shadowRootElement);\n\n  return {\n    emotionRootElement,\n    shadowRootElement,\n  };\n};\n\n// --DOCS--\n\n// const {\n//   emotionRootElement,\n//   shadowRootElement,\n// } = (\n//   createShadowDom(\n//     document.querySelector('#root') as HTMLElement\n//   )\n// )\n\n// ReactDOM\n// .createRoot(\n//   shadowRootElement\n// )\n// .render(\n//   <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>\n//     <App />\n//   </OdysseyProvider>\n// )\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,eAAe,GAAIC,gBAA6B,IAAK;EAChE,MAAMC,eAAe,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EACvE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1D,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEvDL,eAAe,CAACO,WAAW,CAACJ,kBAAkB,CAAC;EAC/CH,eAAe,CAACO,WAAW,CAACD,iBAAiB,CAAC;EAE9C,OAAO;IACLH,kBAAkB;IAClBG;EACF,CAAC;AACH,CAAC"}

package/dist/{OdysseyI18n.js → i18n.js}

@@ -95,5 +95,6 @@ Object.entries(resources).forEach(_ref => {
   let [locale, property] = _ref;
   i18n.addResourceBundle(locale, defaultNS, property);
 });
-export default i18n;
-//# sourceMappingURL=OdysseyI18n.js.map
+export const odysseyTranslate = i18n.t.bind(i18n);
+export { i18n };
+//# sourceMappingURL=i18n.js.map