@okta/odyssey-react-mui 1.10.3 → 1.11.1

package/dist/PasswordField.js

@@ -27,7 +27,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     hasInitialFocus,
     hint,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     isDisabled = false,
     isFullWidth = false,
     isOptional = false,
@@ -59,12 +59,11 @@ const PasswordField = forwardRef((_ref, ref) => {
     value,
     controlState: controlledStateRef.current
   });
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -83,11 +82,12 @@ const PasswordField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: inputType === "password" ? autoCompleteType : "off",
       autoFocus: hasInitialFocus,
-      "data-se": testId,
       endAdornment: hasShowPassword && _jsx(_InputAdornment, {
         position: "end",
         children: _jsx(_IconButton, {
+          "aria-controls": id,
           "aria-label": inputType === "password" ? t("passwordfield.icon.label.show") : t("passwordfield.icon.label.hide"),
+          "aria-pressed": inputType === "text",
           onClick: togglePasswordVisibility,
           children: inputType === "password" ? _jsx(ShowIcon, {}) : _jsx(HideIcon, {})
         })
@@ -96,9 +96,10 @@ const PasswordField = forwardRef((_ref, ref) => {
       inputProps: {
         "aria-errormessage": errorMessageElementId,
         "aria-labelledby": labelElementId,
+        "data-se": testId,
         role: "textbox"
       },
-      inputRef: inputRef,
+      inputRef: localInputRef,
       name: nameOverride ?? id,
       onChange: onChange,
       onFocus: onFocus,

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasInitialFocus","hint","id","idOverride","inputFocusRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","translate","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","inputRef","element","focus","event","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  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { FocusHandle } from \"./@types/react-augment\";\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   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: 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 ref forwarded to the TextField to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The label for the `input` element.\n   */\n  label: 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. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  AllowedProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      inputFocusRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      translate,\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 controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(\n      inputFocusRef,\n      () => {\n        const element = inputRef.current;\n        return {\n          focus: () => {\n            element && element.focus();\n          },\n        };\n      },\n      []\n    );\n\n    const onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\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          inputRef={inputRef}\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          translate={translate}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\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        translate,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\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","useImperativeHandle","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","defaultValue","errorMessage","errorMessageList","hasInitialFocus","hint","id","idOverride","inputRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","translate","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","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  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils\";\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   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: 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 ref forwarded to the TextField\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * The label for the `input` element.\n   */\n  label: 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. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  AllowedProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      errorMessageList,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      inputRef,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      translate,\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 controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const localInputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(\n      inputRef,\n      () => {\n        return {\n          focus: () => {\n            localInputRef.current?.focus();\n          },\n        };\n      },\n      []\n    );\n\n    const onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-controls={id}\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  aria-pressed={inputType === \"text\"}\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            \"data-se\": testId,\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          inputRef={localInputRef}\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          translate={translate}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\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        translate,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\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/Radio.js

@@ -15,7 +15,7 @@ import { memo, useCallback, useRef, useImperativeHandle } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Radio = _ref => {
   let {
-    inputFocusRef,
+    inputRef,
     isChecked,
     isDisabled,
     isInvalid,
@@ -27,12 +27,11 @@ const Radio = _ref => {
     onChange: onChangeProp,
     onBlur: onBlurProp
   } = _ref;
-  const ref = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = ref.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -46,10 +45,12 @@ const Radio = _ref => {
     checked: isChecked,
     className: isInvalid ? "Mui-error" : "",
     control: _jsx(_Radio, {
-      inputRef: ref,
+      inputProps: {
+        "data-se": testId
+      },
+      inputRef: localInputRef,
       onChange: onChange
     }),
-    "data-se": testId,
     disabled: isDisabled,
     label: label,
     name: name,

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","_ref","inputFocusRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","ref","element","current","focus","event","checked","_FormControlLabel","className","control","_Radio","inputRef","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.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  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  AllowedProps;\n\nconst Radio = ({\n  inputFocusRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const ref = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={<MuiRadio inputRef={ref} onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGC,IAAA,IAYI;EAAA,IAZH;IACbC,aAAa;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAb,IAAA;EACX,MAAMc,GAAG,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EAC1CC,mBAAmB,CACjBK,aAAa,EACb,MAAM;IACJ,MAAMc,OAAO,GAAGD,GAAG,CAACE,OAAO;IAC3B,OAAO;MACLC,KAAK,EAAEA,CAAA,KAAM;QACXF,OAAO,IAAIA,OAAO,CAACE,KAAK,CAAC,CAAC;MAC5B;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMP,QAAQ,GAAGhB,WAAW,CAC1B,CAACwB,KAAK,EAAEC,OAAO,KAAK;IAClBR,YAAY,GAAGO,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACR,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGlB,WAAW,CACvBwB,KAAK,IAAK;IACTL,UAAU,GAAGK,KAAK,CAAC;EACrB,CAAC,EACD,CAACL,UAAU,CACb,CAAC;EAED,OACEf,IAAA,CAAAsB,iBAAA;IACED,OAAO,EAAEjB,SAAU;IACnBmB,SAAS,EAAEjB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCkB,OAAO,EAAExB,IAAA,CAAAyB,MAAA;MAAUC,QAAQ,EAAEV,GAAI;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAE;IACzD,WAASH,MAAO;IAChBkB,QAAQ,EAAEtB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMc,aAAa,GAAGjC,IAAI,CAACM,KAAK,CAAC;AACjC2B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI3B,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","_ref","inputRef","isChecked","isDisabled","isInvalid","label","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.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  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  AllowedProps;\n\nconst Radio = ({\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAQA,SAASA,IAAI,EAAEC,WAAW,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsCvE,MAAMC,KAAK,GAAGC,IAAA,IAYI;EAAA,IAZH;IACbC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,SAAS;IACTC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAb,IAAA;EACX,MAAMc,aAAa,GAAGnB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBK,QAAQ,EACR,MAAM;IACJ,OAAO;MACLc,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAML,QAAQ,GAAGhB,WAAW,CAC1B,CAACuB,KAAK,EAAEC,OAAO,KAAK;IAClBP,YAAY,GAAGM,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACP,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGlB,WAAW,CACvBuB,KAAK,IAAK;IACTJ,UAAU,GAAGI,KAAK,CAAC;EACrB,CAAC,EACD,CAACJ,UAAU,CACb,CAAC;EAED,OACEf,IAAA,CAAAqB,iBAAA;IACED,OAAO,EAAEhB,SAAU;IACnBkB,SAAS,EAAEhB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCiB,OAAO,EACLvB,IAAA,CAAAwB,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEhB;MACb,CAAE;MACFN,QAAQ,EAAEa,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDc,QAAQ,EAAErB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMa,aAAa,GAAGhC,IAAI,CAACM,KAAK,CAAC;AACjC0B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI1B,KAAK"}

package/dist/Select.js

@@ -35,7 +35,7 @@ const Select = _ref => {
     hint,
     HintLinkComponent,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     isDisabled = false,
     isFullWidth = false,
     isMultiSelect,
@@ -56,12 +56,11 @@ const Select = _ref => {
     uncontrolledValue: defaultValue
   }));
   const [internalSelectedValues, setInternalSelectedValues] = useState(controlledStateRef.current === CONTROLLED ? value : defaultValue);
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -142,9 +141,11 @@ const Select = _ref => {
       "aria-describedby": ariaDescribedBy,
       "aria-errormessage": errorMessageElementId,
       children: children,
-      "data-se": testId,
       id: id,
-      inputRef: inputRef,
+      inputProps: {
+        "data-se": testId
+      },
+      inputRef: localInputRef,
       labelId: labelElementId,
       multiple: hasMultipleChoices,
       name: nameOverride ?? id,

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputFocusRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","inputRef","element","focus","inputValues","controlState","event","child","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 {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} 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\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { FocusHandle } from \"./@types/react-augment\";\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 default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: 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} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  AllowedProps;\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 { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputFocusRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect]\n  );\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue\n  );\n  const inputRef = useRef<HTMLSelectElement>(null);\n\n  useImperativeHandle(\n    inputFocusRef,\n    () => {\n      const element = inputRef.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" ? value.split(\",\") : value) as Value\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [onChangeProp]\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        return (\n          <MenuItem key={option.value} value={option.value}>\n            {hasMultipleChoices && (\n              <MuiCheckbox\n                checked={internalSelectedValues?.includes(option.value)}\n              />\n            )}\n            {option.text}\n            {internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        children={children}\n        data-se={testId}\n        id={id}\n        inputRef={inputRef}\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        translate={translate}\n      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n      translate,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\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","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","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","inputProps","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 {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} 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\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\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 default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: 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} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  AllowedProps;\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 { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect]\n  );\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue\n  );\n  const localInputRef = useRef<HTMLSelectElement>(null);\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      const {\n        target: { value },\n      } = event;\n      if (controlledStateRef.current !== CONTROLLED) {\n        setInternalSelectedValues(\n          (typeof value === \"string\" ? value.split(\",\") : value) as Value\n        );\n      }\n      onChangeProp?.(event, child);\n    },\n    [onChangeProp]\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        return (\n          <MenuItem key={option.value} value={option.value}>\n            {hasMultipleChoices && (\n              <MuiCheckbox\n                checked={internalSelectedValues?.includes(option.value)}\n              />\n            )}\n            {option.text}\n            {internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues]\n  );\n\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiSelect\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        children={children}\n        id={id}\n        inputProps={{ \"data-se\": testId }}\n        inputRef={localInputRef}\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        translate={translate}\n      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n      translate,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\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/TextField.js

@@ -28,7 +28,7 @@ const TextField = forwardRef((_ref, ref) => {
     hint,
     HintLinkComponent,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     inputMode,
     isDisabled = false,
     isFullWidth = false,
@@ -56,12 +56,11 @@ const TextField = forwardRef((_ref, ref) => {
     value,
     controlState: controlledStateRef.current
   });
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -80,7 +79,6 @@ const TextField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
-      "data-se": testId,
       endAdornment: endAdornment && _jsx(_InputAdornment, {
         position: "end",
         translate: translate,
@@ -90,9 +88,10 @@ const TextField = forwardRef((_ref, ref) => {
       inputProps: {
         "aria-errormessage": errorMessageElementId,
         "aria-labelledby": labelElementId,
+        "data-se": testId,
         inputmode: inputMode
       },
-      inputRef: inputRef,
+      inputRef: localInputRef,
       multiline: isMultiline,
       name: nameOverride ?? id,
       onBlur: onBlur,

package/dist/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","Field","useInputValues","getControlState","jsx","_jsx","textFieldTypeValues","TextField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","endAdornment","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","inputFocusRef","inputMode","isDisabled","isFullWidth","isMultiline","isOptional","isReadOnly","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","placeholder","startAdornment","testId","translate","type","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","inputRef","element","focus","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","_InputAdornment","position","children","inputProps","inputmode","multiline","readOnly","required","fieldType","hasVisibleLabel","MemoizedTextField","displayName"],"sources":["../src/TextField.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  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\nimport { InputAdornment, InputBase } from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Field } from \"./Field\";\nimport { AllowedProps } from \"./AllowedProps\";\nimport { useInputValues, getControlState } from \"./inputUtils\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const textFieldTypeValues = [\n  \"email\",\n  \"number\",\n  \"tel\",\n  \"text\",\n  \"url\",\n] as const;\n\nexport type TextFieldProps = {\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   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * End `InputAdornment` for this component.\n   */\n  endAdornment?: string | ReactElement;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The ref forwarded to the TextField to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * Hints at the type of data that might be entered by the user while editing the element or its contents\n   * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute\n   */\n  inputMode?: InputHTMLAttributes<HTMLInputElement>[\"inputMode\"];\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: 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   * Start `InputAdornment` for this component.\n   */\n  startAdornment?: string | ReactElement;\n  /**\n   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n   */\n  type?: (typeof textFieldTypeValues)[number];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & FieldComponentProps &\n  AllowedProps;\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      endAdornment,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      id: idOverride,\n      inputFocusRef,\n      inputMode,\n      isDisabled = false,\n      isFullWidth = false,\n      isMultiline = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      placeholder,\n      startAdornment,\n      testId,\n      translate,\n      type = \"text\",\n      value: value,\n    },\n    ref\n  ) => {\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(\n      inputFocusRef,\n      () => {\n        const element = inputRef.current;\n        return {\n          focus: () => {\n            element && element.focus();\n          },\n        };\n      },\n      []\n    );\n\n    const onChange = useCallback<\n      NonNullable<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\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            endAdornment && (\n              <InputAdornment position=\"end\" translate={translate}>\n                {endAdornment}\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            inputmode: inputMode,\n          }}\n          inputRef={inputRef}\n          multiline={isMultiline}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          startAdornment={\n            startAdornment && (\n              <InputAdornment position=\"start\" translate={translate}>\n                {startAdornment}\n              </InputAdornment>\n            )\n          }\n          type={type}\n          translate={translate}\n        />\n      ),\n      [\n        autoCompleteType,\n        inputValues,\n        hasInitialFocus,\n        endAdornment,\n        inputMode,\n        isMultiline,\n        nameOverride,\n        onBlur,\n        onChange,\n        onFocus,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        startAdornment,\n        testId,\n        translate,\n        type,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\nMemoizedTextField.displayName = \"TextField\";\n\nexport { MemoizedTextField as TextField };\n"],"mappings":"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"}
+{"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","Field","useInputValues","getControlState","jsx","_jsx","textFieldTypeValues","TextField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","endAdornment","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","inputRef","inputMode","isDisabled","isFullWidth","isMultiline","isOptional","isReadOnly","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","placeholder","startAdornment","testId","translate","type","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","_InputAdornment","position","children","inputProps","inputmode","multiline","readOnly","required","fieldType","hasVisibleLabel","MemoizedTextField","displayName"],"sources":["../src/TextField.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  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\nimport { InputAdornment, InputBase } from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Field } from \"./Field\";\nimport { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle, useInputValues, getControlState } from \"./inputUtils\";\n\nexport const textFieldTypeValues = [\n  \"email\",\n  \"number\",\n  \"tel\",\n  \"text\",\n  \"url\",\n] as const;\n\nexport type TextFieldProps = {\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   * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string;\n  /**\n   * End `InputAdornment` for this component.\n   */\n  endAdornment?: string | ReactElement;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The ref forwarded to the TextField\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Hints at the type of data that might be entered by the user while editing the element or its contents\n   * @see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute\n   */\n  inputMode?: InputHTMLAttributes<HTMLInputElement>[\"inputMode\"];\n  /**\n   * If `true`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n   */\n  isMultiline?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: 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   * Start `InputAdornment` for this component.\n   */\n  startAdornment?: string | ReactElement;\n  /**\n   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n   */\n  type?: (typeof textFieldTypeValues)[number];\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & FieldComponentProps &\n  AllowedProps;\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      endAdornment,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      id: idOverride,\n      inputRef,\n      inputMode,\n      isDisabled = false,\n      isFullWidth = false,\n      isMultiline = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      placeholder,\n      startAdornment,\n      testId,\n      translate,\n      type = \"text\",\n      value: value,\n    },\n    ref\n  ) => {\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const localInputRef = useRef<HTMLInputElement>(null);\n    useImperativeHandle(\n      inputRef,\n      () => {\n        return {\n          focus: () => {\n            localInputRef.current?.focus();\n          },\n        };\n      },\n      []\n    );\n\n    const onChange = useCallback<\n      NonNullable<ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            endAdornment && (\n              <InputAdornment position=\"end\" translate={translate}>\n                {endAdornment}\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            \"data-se\": testId,\n            inputmode: inputMode,\n          }}\n          inputRef={localInputRef}\n          multiline={isMultiline}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          startAdornment={\n            startAdornment && (\n              <InputAdornment position=\"start\" translate={translate}>\n                {startAdornment}\n              </InputAdornment>\n            )\n          }\n          type={type}\n          translate={translate}\n        />\n      ),\n      [\n        autoCompleteType,\n        inputValues,\n        hasInitialFocus,\n        endAdornment,\n        inputMode,\n        isMultiline,\n        nameOverride,\n        onBlur,\n        onChange,\n        onFocus,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        startAdornment,\n        testId,\n        translate,\n        type,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedTextField = memo(TextField);\nMemoizedTextField.displayName = \"TextField\";\n\nexport { MemoizedTextField as TextField };\n"],"mappings":"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"}

package/dist/Typography.js

@@ -35,7 +35,7 @@ const Typography = _ref => {
     component: componentProp,
     testId,
     translate,
-    typographyFocusRef,
+    typographyRef,
     variant = "body"
   } = _ref;
   const component = useMemo(() => {
@@ -50,12 +50,11 @@ const Typography = _ref => {
     }
     return componentProp;
   }, [componentProp, variant]);
-  const ref = useRef(null);
-  useImperativeHandle(typographyFocusRef, () => {
-    const element = ref.current;
+  const localTypographyRef = useRef(null);
+  useImperativeHandle(typographyRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localTypographyRef.current?.focus();
       }
     };
   }, []);
@@ -67,7 +66,7 @@ const Typography = _ref => {
     color: color,
     component: component,
     "data-se": testId,
-    ref: ref,
+    ref: localTypographyRef,
     tabIndex: -1,
     translate: translate,
     variant: typographyVariantMapping[variant]

package/dist/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","names":["memo","useMemo","useRef","useImperativeHandle","jsx","_jsx","typographyVariantMapping","h1","h2","h3","h4","h5","h6","body","subordinate","support","legend","typographyColorValues","Typography","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","children","color","component","componentProp","testId","translate","typographyFocusRef","variant","ref","element","current","focus","_Typography","tabIndex","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 {\n  ElementType,\n  ReactNode,\n  memo,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from \"react\";\nimport { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\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 ref forwarded to the Typography to expose focus()\n   */\n  typographyFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The variant of Typography to render.\n   */\n  variant?: keyof typeof typographyVariantMapping;\n} & AllowedProps;\n\nconst Typography = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component: componentProp,\n  testId,\n  translate,\n  typographyFocusRef,\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  const ref = useRef<HTMLElement>(null);\n  useImperativeHandle(\n    typographyFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\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      ref={ref}\n      tabIndex={-1}\n      translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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","useRef","useImperativeHandle","jsx","_jsx","typographyVariantMapping","h1","h2","h3","h4","h5","h6","body","subordinate","support","legend","typographyColorValues","Typography","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","children","color","component","componentProp","testId","translate","typographyRef","variant","localTypographyRef","focus","current","_Typography","ref","tabIndex","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 {\n  ElementType,\n  ReactNode,\n  memo,\n  useMemo,\n  useRef,\n  useImperativeHandle,\n} from \"react\";\nimport { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./inputUtils\";\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 ref forwarded to the Typography\n   */\n  typographyRef?: React.RefObject<FocusHandle>;\n  /**\n   * The variant of Typography to render.\n   */\n  variant?: keyof typeof typographyVariantMapping;\n} & AllowedProps;\n\nconst Typography = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  children,\n  color,\n  component: componentProp,\n  testId,\n  translate,\n  typographyRef,\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  const localTypographyRef = useRef<HTMLElement>(null);\n  useImperativeHandle(\n    typographyRef,\n    () => {\n      return {\n        focus: () => {\n          localTypographyRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\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      ref={localTypographyRef}\n      tabIndex={-1}\n      translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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  translate,\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    translate={translate}\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/inputUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"inputUtils.js","names":["useMemo","ComponentControlledState","CONTROLLED","UNCONTROLLED","getControlState","_ref","controlledValue","uncontrolledValue","undefined","useInputValues","_ref2","defaultValue","value","controlState","inputValues"],"sources":["../src/inputUtils.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\nimport { useMemo } from \"react\";\n\ntype UseControlledStateProps<Value> = {\n  controlledValue?: Value;\n  uncontrolledValue?: Value;\n};\n\nexport const ComponentControlledState = {\n  CONTROLLED: \"CONTROLLED\",\n  UNCONTROLLED: \"UNCONTROLLED\",\n};\n\nexport type ModeType = keyof typeof ComponentControlledState;\nexport type ModeTypeValue = (typeof ComponentControlledState)[ModeType];\n\nexport const getControlState = <Value>({\n  controlledValue,\n  uncontrolledValue,\n}: UseControlledStateProps<Value>): ModeTypeValue => {\n  if (uncontrolledValue !== undefined || controlledValue === undefined) {\n    return ComponentControlledState.UNCONTROLLED;\n  }\n  return ComponentControlledState.CONTROLLED;\n};\n\ntype InputValueProps<Value> = {\n  defaultValue?: Value;\n  value?: Value;\n  controlState: ModeTypeValue;\n};\n\ntype InputValue<Value> =\n  | {\n      defaultValue: Value | undefined;\n      value?: undefined;\n    }\n  | {\n      value: Value | undefined;\n      defaultValue?: undefined;\n    };\n\n/**\n * In components that support being used in a controlled or uncontrolled way, the defaultValue and value props need\n * to be suppled values in a mutually exclusive way.\n * If a `value` is being provided to the component, then it is being used in a controlled manner and `defaultValue` needs to be undefined.\n * If `value` is undefined, then that means the component is being used in an uncontrolled way and `defaultValue` is either Value or undefined.\n * This helper helps ensure this mutual exclusivity between the 2 props so the component can operate as expected.\n *\n * @param {InputValueProps<Value>}: { defaultValue: Value | undefined, value: Value | undefined }\n * @returns {InputValue<Value>}: { defaultValue: Value | undefined, value?: undefined } | { defaultValue?: undefined, value: Value }\n */\nexport const useInputValues = <Value>({\n  defaultValue,\n  value,\n  controlState,\n}: InputValueProps<Value>): InputValue<Value> => {\n  const inputValues = useMemo(() => {\n    if (controlState === ComponentControlledState.CONTROLLED) {\n      return { value };\n    }\n    return { defaultValue };\n  }, [defaultValue, value]);\n  return inputValues;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAO/B,OAAO,MAAMC,wBAAwB,GAAG;EACtCC,UAAU,EAAE,YAAY;EACxBC,YAAY,EAAE;AAChB,CAAC;AAKD,OAAO,MAAMC,eAAe,GAAGC,IAAA,IAGsB;EAAA,IAHd;IACrCC,eAAe;IACfC;EAC8B,CAAC,GAAAF,IAAA;EAC/B,IAAIE,iBAAiB,KAAKC,SAAS,IAAIF,eAAe,KAAKE,SAAS,EAAE;IACpE,OAAOP,wBAAwB,CAACE,YAAY;EAC9C;EACA,OAAOF,wBAAwB,CAACC,UAAU;AAC5C,CAAC;AA4BD,OAAO,MAAMO,cAAc,GAAGC,KAAA,IAImB;EAAA,IAJX;IACpCC,YAAY;IACZC,KAAK;IACLC;EACsB,CAAC,GAAAH,KAAA;EACvB,MAAMI,WAAW,GAAGd,OAAO,CAAC,MAAM;IAChC,IAAIa,YAAY,KAAKZ,wBAAwB,CAACC,UAAU,EAAE;MACxD,OAAO;QAAEU;MAAM,CAAC;IAClB;IACA,OAAO;MAAED;IAAa,CAAC;EACzB,CAAC,EAAE,CAACA,YAAY,EAAEC,KAAK,CAAC,CAAC;EACzB,OAAOE,WAAW;AACpB,CAAC"}
+{"version":3,"file":"inputUtils.js","names":["useMemo","ComponentControlledState","CONTROLLED","UNCONTROLLED","getControlState","_ref","controlledValue","uncontrolledValue","undefined","useInputValues","_ref2","defaultValue","value","controlState","inputValues"],"sources":["../src/inputUtils.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\nimport { useMemo } from \"react\";\n\nexport type FocusHandle = {\n  focus: () => void;\n};\n\ntype UseControlledStateProps<Value> = {\n  controlledValue?: Value;\n  uncontrolledValue?: Value;\n};\n\nexport const ComponentControlledState = {\n  CONTROLLED: \"CONTROLLED\",\n  UNCONTROLLED: \"UNCONTROLLED\",\n};\n\nexport type ModeType = keyof typeof ComponentControlledState;\nexport type ModeTypeValue = (typeof ComponentControlledState)[ModeType];\n\nexport const getControlState = <Value>({\n  controlledValue,\n  uncontrolledValue,\n}: UseControlledStateProps<Value>): ModeTypeValue => {\n  if (uncontrolledValue !== undefined || controlledValue === undefined) {\n    return ComponentControlledState.UNCONTROLLED;\n  }\n  return ComponentControlledState.CONTROLLED;\n};\n\ntype InputValueProps<Value> = {\n  defaultValue?: Value;\n  value?: Value;\n  controlState: ModeTypeValue;\n};\n\ntype InputValue<Value> =\n  | {\n      defaultValue: Value | undefined;\n      value?: undefined;\n    }\n  | {\n      value: Value | undefined;\n      defaultValue?: undefined;\n    };\n\n/**\n * In components that support being used in a controlled or uncontrolled way, the defaultValue and value props need\n * to be suppled values in a mutually exclusive way.\n * If a `value` is being provided to the component, then it is being used in a controlled manner and `defaultValue` needs to be undefined.\n * If `value` is undefined, then that means the component is being used in an uncontrolled way and `defaultValue` is either Value or undefined.\n * This helper helps ensure this mutual exclusivity between the 2 props so the component can operate as expected.\n *\n * @param {InputValueProps<Value>}: { defaultValue: Value | undefined, value: Value | undefined }\n * @returns {InputValue<Value>}: { defaultValue: Value | undefined, value?: undefined } | { defaultValue?: undefined, value: Value }\n */\nexport const useInputValues = <Value>({\n  defaultValue,\n  value,\n  controlState,\n}: InputValueProps<Value>): InputValue<Value> => {\n  const inputValues = useMemo(() => {\n    if (controlState === ComponentControlledState.CONTROLLED) {\n      return { value };\n    }\n    return { defaultValue };\n  }, [defaultValue, value]);\n  return inputValues;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,OAAO;AAW/B,OAAO,MAAMC,wBAAwB,GAAG;EACtCC,UAAU,EAAE,YAAY;EACxBC,YAAY,EAAE;AAChB,CAAC;AAKD,OAAO,MAAMC,eAAe,GAAGC,IAAA,IAGsB;EAAA,IAHd;IACrCC,eAAe;IACfC;EAC8B,CAAC,GAAAF,IAAA;EAC/B,IAAIE,iBAAiB,KAAKC,SAAS,IAAIF,eAAe,KAAKE,SAAS,EAAE;IACpE,OAAOP,wBAAwB,CAACE,YAAY;EAC9C;EACA,OAAOF,wBAAwB,CAACC,UAAU;AAC5C,CAAC;AA4BD,OAAO,MAAMO,cAAc,GAAGC,KAAA,IAImB;EAAA,IAJX;IACpCC,YAAY;IACZC,KAAK;IACLC;EACsB,CAAC,GAAAH,KAAA;EACvB,MAAMI,WAAW,GAAGd,OAAO,CAAC,MAAM;IAChC,IAAIa,YAAY,KAAKZ,wBAAwB,CAACC,UAAU,EAAE;MACxD,OAAO;QAAEU;MAAM,CAAC;IAClB;IACA,OAAO;MAAED;IAAa,CAAC;EACzB,CAAC,EAAE,CAACA,YAAY,EAAEC,KAAK,CAAC,CAAC;EACzB,OAAOE,WAAW;AACpB,CAAC"}

package/dist/labs/Switch.js

@@ -117,11 +117,12 @@ const Switch = _ref2 => {
       "aria-checked": internalSwitchChecked,
       "aria-describedby": hintId,
       "aria-label": label,
-      "aria-labelledby": labelElementId
+      "aria-labelledby": labelElementId,
+      "data-se": testId
     },
     name: _name ?? id,
     onChange: handleOnChange
-  }), [handleOnChange, hintId, inputValues, internalSwitchChecked, id, isDisabled, label, labelElementId, _name]);
+  }), [handleOnChange, hintId, inputValues, internalSwitchChecked, id, isDisabled, label, labelElementId, _name, testId]);
   return _jsx(Box, {
     sx: {
       marginBlockEnd: odysseyDesignTokens.Spacing2
@@ -129,7 +130,6 @@ const Switch = _ref2 => {
     children: _jsx(_FormControlLabel, {
       checked: internalSwitchChecked,
       control: renderSwitchComponent,
-      "data-se": testId,
       disabled: isDisabled,
       id: labelElementId,
       label: _jsx(SwitchLabel, {