@okta/odyssey-react-mui 1.9.9 → 1.9.11

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.11](https://github.com/okta/odyssey/compare/v1.9.10...v1.9.11) (2023-12-22)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.9.10](https://github.com/okta/odyssey/compare/v1.9.9...v1.9.10) (2023-12-21)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.9.9](https://github.com/okta/odyssey/compare/v1.9.8...v1.9.9) (2023-12-20)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/@types/react-augment.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-augment.d.js","names":[],"sources":["../../src/@types/react-augment.d.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 { FC } from \"react\";\n\nexport interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {\n  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<\n    FC<WithForwardRefProps<T>>\n  >;\n}\n"],"mappings":""}
+{"version":3,"file":"react-augment.d.js","names":[],"sources":["../../src/@types/react-augment.d.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 { FC } from \"react\";\n\nexport interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {\n  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<\n    FC<WithForwardRefProps<T>>\n  >;\n}\n\nexport type FocusHandle = {\n  focus: () => void;\n};\n"],"mappings":""}

package/dist/Button.js

@@ -10,7 +10,7 @@ import _Button from "@mui/material/Button";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback } from "react";
+import { memo, useCallback, useImperativeHandle, useRef } from "react";
 import { MuiPropsContext, useMuiProps } from "./MuiPropsContext.js";
 import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,6 +24,7 @@ const Button = _ref => {
     ariaDescribedBy,
     ariaLabel,
     ariaLabelledBy,
+    buttonFocusRef,
     endIcon,
     id,
     isDisabled,
@@ -38,6 +39,15 @@ const Button = _ref => {
     variant
   } = _ref;
   const muiProps = useMuiProps();
+  const ref = useRef(null);
+  useImperativeHandle(buttonFocusRef, () => {
+    const element = ref.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   const renderButton = useCallback(muiProps => _jsx(_Button, {
     ...muiProps,
     "aria-label": ariaLabel,
@@ -49,6 +59,7 @@ const Button = _ref => {
     fullWidth: isFullWidth,
     id: id,
     onClick: onClick,
+    ref: ref,
     size: size,
     startIcon: startIcon,
     type: type,

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["memo","useCallback","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","testId","tooltipText","type","variant","muiProps","renderButton","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number];\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  SeleniumProps;\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  testId,\n  tooltipText,\n  type = \"button\",\n  variant,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  const renderButton = useCallback(\n    (muiProps) => (\n      <MuiButton\n        {...muiProps}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        data-se={testId}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        size={size}\n        startIcon={startIcon}\n        type={type}\n        variant={variant}\n      >\n        {label}\n      </MuiButton>\n    ),\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      testId,\n      type,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && !isDisabled && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n        </Tooltip>\n      )}\n\n      {(isDisabled || !tooltipText) && renderButton(muiProps)}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAE/CC,eAAe,EAAEC,WAAW;AAAA,SAC5BC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAGhB,OAAO,MAAMC,gBAAgB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AACrE,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU;AACtE,OAAO,MAAMC,mBAAmB,GAAG,CACjC,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,EACR,UAAU,CACF;AA8EV,MAAMC,MAAM,GAAGC,IAAA,IAgBI;EAAA,IAhBH;IACdC,eAAe;IACfC,SAAS;IACTC,cAAc;IACdC,OAAO;IACPC,EAAE;IACFC,UAAU;IACVC,WAAW;IACXC,KAAK,GAAG,EAAE;IACVC,OAAO;IACPC,IAAI,GAAG,QAAQ;IACfC,SAAS;IACTC,MAAM;IACNC,WAAW;IACXC,IAAI,GAAG,QAAQ;IACfC;EACW,CAAC,GAAAf,IAAA;EACZ,MAAMgB,QAAQ,GAAG5B,WAAW,CAAC,CAAC;EAE9B,MAAM6B,YAAY,GAAG/B,WAAW,CAC7B8B,QAAQ,IACPzB,IAAA,CAAA2B,OAAA;IAAA,GACMF,QAAQ;IACZ,cAAYd,SAAU;IACtB,mBAAiBC,cAAe;IAChC,oBAAkBF,eAAgB;IAClC,WAASW,MAAO;IAChBO,QAAQ,EAAEb,UAAW;IACrBF,OAAO,EAAEA,OAAQ;IACjBgB,SAAS,EAAEb,WAAY;IACvBF,EAAE,EAAEA,EAAG;IACPI,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,SAAS,EAAEA,SAAU;IACrBG,IAAI,EAAEA,IAAK;IACXC,OAAO,EAAEA,OAAQ;IAAAM,QAAA,EAEhBb;EAAK,CACG,CACZ,EACD,CACEP,eAAe,EACfC,SAAS,EACTC,cAAc,EACdC,OAAO,EACPC,EAAE,EACFC,UAAU,EACVC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,IAAI,EACJC,SAAS,EACTC,MAAM,EACNE,IAAI,EACJC,OAAO,CAEX,CAAC;EAED,OACEpB,KAAA,CAAAF,SAAA;IAAA4B,QAAA,GACGR,WAAW,IAAI,CAACP,UAAU,IACzBf,IAAA,CAACF,OAAO;MAACiC,QAAQ,EAAC,aAAa;MAACC,SAAS,EAAC,KAAK;MAACC,IAAI,EAAEX,WAAY;MAAAQ,QAAA,EAChE9B,IAAA,CAACJ,eAAe,CAACsC,QAAQ;QAAAJ,QAAA,EAAEJ;MAAY,CAA2B;IAAC,CAC5D,CACV,EAEA,CAACX,UAAU,IAAI,CAACO,WAAW,KAAKI,YAAY,CAACD,QAAQ,CAAC;EAAA,CACvD,CAAC;AAEP,CAAC;AAED,MAAMU,cAAc,GAAGzC,IAAI,CAACc,MAAM,CAAC;AACnC2B,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAI3B,MAAM"}
+{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useRef","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","buttonFocusRef","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","testId","tooltipText","type","variant","muiProps","ref","element","current","focus","renderButton","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ref forwarded to the Button to expose focus()\n   */\n  buttonFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number];\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  SeleniumProps;\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonFocusRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  testId,\n  tooltipText,\n  type = \"button\",\n  variant,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(\n    buttonFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const renderButton = useCallback(\n    (muiProps) => (\n      <MuiButton\n        {...muiProps}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        data-se={testId}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        ref={ref}\n        size={size}\n        startIcon={startIcon}\n        type={type}\n        variant={variant}\n      >\n        {label}\n      </MuiButton>\n    ),\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      testId,\n      type,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && !isDisabled && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n        </Tooltip>\n      )}\n\n      {(isDisabled || !tooltipText) && renderButton(muiProps)}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}

package/dist/Checkbox.js

@@ -14,7 +14,7 @@ import _FormHelperText from "@mui/material/FormHelperText";
  */
 
 import { useTranslation } from "react-i18next";
-import { memo, useCallback, useMemo, useRef } from "react";
+import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import { Typography } from "./Typography.js";
 import { ComponentControlledState, getControlState } from "./inputUtils.js";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -26,6 +26,7 @@ const Checkbox = _ref => {
     ariaLabel,
     ariaLabelledBy,
     id: idOverride,
+    inputFocusRef,
     isChecked,
     isDefaultChecked,
     isDisabled,
@@ -57,6 +58,15 @@ const Checkbox = _ref => {
       defaultChecked: isDefaultChecked
     };
   }, [isDefaultChecked, isChecked]);
+  const inputRef = useRef(null);
+  useImperativeHandle(inputFocusRef, () => {
+    const element = inputRef.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   const label = useMemo(() => {
     return _jsxs(_Fragment, {
       children: [labelProp, isRequired && _jsxs(_Fragment, {
@@ -88,6 +98,7 @@ const Checkbox = _ref => {
       indeterminate: isIndeterminate,
       onChange: onChange,
       required: isRequired,
+      inputRef: inputRef,
       sx: () => ({
         marginBlockStart: "2px"
       })

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","Typography","ComponentControlledState","getControlState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","marginBlockStart","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The helper text content\n   */\n  hint?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  SeleniumProps;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const label = useMemo(() => {\n    return (\n      <>\n        {labelProp}\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          sx={() => ({\n            marginBlockStart: \"2px\",\n          })}\n        />\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","ComponentControlledState","getControlState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","inputFocusRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","inputRef","element","focus","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","marginBlockStart","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * The ref forwarded to the Checkbox to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The helper text content\n   */\n  hint?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  SeleniumProps;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputFocusRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const 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 label = useMemo(() => {\n    return (\n      <>\n        {labelProp}\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          inputRef={inputRef}\n          sx={() => ({\n            marginBlockStart: \"2px\",\n          })}\n        />\n      }\n      data-se={testId}\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}

package/dist/Link.js

@@ -11,7 +11,7 @@ import _Link from "@mui/material/Link";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo } from "react";
+import { memo, useImperativeHandle, useRef } from "react";
 import { ExternalLinkIcon } from "./icons.generated/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -21,15 +21,26 @@ const Link = _ref => {
     children,
     href,
     icon,
+    linkFocusRef,
     rel,
     target,
     testId,
     variant,
     onClick
   } = _ref;
+  const ref = useRef(null);
+  useImperativeHandle(linkFocusRef, () => {
+    const element = ref.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   return _jsxs(_Link, {
     "data-se": testId,
     href: href,
+    ref: ref,
     rel: rel,
     target: target,
     variant: variant,

package/dist/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["memo","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","linkVariantValues","Link","_ref","children","href","icon","rel","target","testId","variant","onClick","_Link","className","role","MemoizedLink","displayName"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement } from \"react\";\nimport { ExternalLinkIcon } from \"./icons.generated\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nimport { Link as MuiLink, LinkProps as MuiLinkProps } from \"@mui/material\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type LinkProps = {\n  /**\n   * The content within the Link\n   */\n  children: React.ReactNode;\n  /**\n   * The Link destination\n   */\n  href: string;\n  /**\n   * An optional Icon component at the start of the Link\n   */\n  icon?: ReactElement;\n  /**\n   * The click event handler for the Link\n   */\n  onClick?: MuiLinkProps[\"onClick\"];\n  /**\n   * The HTML `rel` attribute for the Link\n   */\n  rel?: string;\n  /**\n   * The HTML `target` attribute for the Link\n   */\n  target?:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | (string & NonNullable<unknown>);\n  /**\n   * The visual presentation of the Link (default or monochrome)\n   */\n  variant?: (typeof linkVariantValues)[number];\n} & SeleniumProps;\n\nconst Link = ({\n  children,\n  href,\n  icon,\n  rel,\n  target,\n  testId,\n  variant,\n  onClick,\n}: LinkProps) => (\n  <MuiLink\n    data-se={testId}\n    href={href}\n    rel={rel}\n    target={target}\n    variant={variant}\n    onClick={onClick}\n  >\n    {icon && <span className=\"Link-icon\">{icon}</span>}\n\n    {children}\n\n    {target === \"_blank\" && (\n      <span className=\"Link-indicator\" role=\"presentation\">\n        <ExternalLinkIcon />\n      </span>\n    )}\n  </MuiLink>\n);\n\nconst MemoizedLink = memo(Link);\n\nMemoizedLink.displayName = \"Link\";\n\nexport { MemoizedLink as Link };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAsB,OAAO;AAAC,SAClCC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAKzB,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AAsCnE,MAAMC,IAAI,GAAGC,IAAA;EAAA,IAAC;IACZC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,GAAG;IACHC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC;EACS,CAAC,GAAAR,IAAA;EAAA,OACVH,KAAA,CAAAY,KAAA;IACE,WAASH,MAAO;IAChBJ,IAAI,EAAEA,IAAK;IACXE,GAAG,EAAEA,GAAI;IACTC,MAAM,EAAEA,MAAO;IACfE,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IAAAP,QAAA,GAEhBE,IAAI,IAAIR,IAAA;MAAMe,SAAS,EAAC,WAAW;MAAAT,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ,EAERI,MAAM,KAAK,QAAQ,IAClBV,IAAA;MAAMe,SAAS,EAAC,gBAAgB;MAACC,IAAI,EAAC,cAAc;MAAAV,QAAA,EAClDN,IAAA,CAACF,gBAAgB,IAAE;IAAC,CAChB,CACP;EAAA,CACM,CAAC;AAAA,CACX;AAED,MAAMmB,YAAY,GAAGpB,IAAI,CAACO,IAAI,CAAC;AAE/Ba,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIb,IAAI"}
+{"version":3,"file":"Link.js","names":["memo","useImperativeHandle","useRef","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","linkVariantValues","Link","_ref","children","href","icon","linkFocusRef","rel","target","testId","variant","onClick","ref","element","current","focus","_Link","className","role","MemoizedLink","displayName"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useImperativeHandle, useRef } from \"react\";\nimport { ExternalLinkIcon } from \"./icons.generated\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nimport { Link as MuiLink, LinkProps as MuiLinkProps } from \"@mui/material\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type LinkProps = {\n  /**\n   * The content within the Link\n   */\n  children: React.ReactNode;\n  /**\n   * The Link destination\n   */\n  href: string;\n  /**\n   * An optional Icon component at the start of the Link\n   */\n  icon?: ReactElement;\n  /**\n   * The ref forwarded to the TextField to expose focus()\n   */\n  linkFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The click event handler for the Link\n   */\n  onClick?: MuiLinkProps[\"onClick\"];\n  /**\n   * The HTML `rel` attribute for the Link\n   */\n  rel?: string;\n  /**\n   * The HTML `target` attribute for the Link\n   */\n  target?:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | (string & NonNullable<unknown>);\n  /**\n   * The visual presentation of the Link (default or monochrome)\n   */\n  variant?: (typeof linkVariantValues)[number];\n} & SeleniumProps;\n\nconst Link = ({\n  children,\n  href,\n  icon,\n  linkFocusRef,\n  rel,\n  target,\n  testId,\n  variant,\n  onClick,\n}: LinkProps) => {\n  const ref = useRef<HTMLAnchorElement>(null);\n  useImperativeHandle(\n    linkFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  return (\n    <MuiLink\n      data-se={testId}\n      href={href}\n      ref={ref}\n      rel={rel}\n      target={target}\n      variant={variant}\n      onClick={onClick}\n    >\n      {icon && <span className=\"Link-icon\">{icon}</span>}\n\n      {children}\n\n      {target === \"_blank\" && (\n        <span className=\"Link-indicator\" role=\"presentation\">\n          <ExternalLinkIcon />\n        </span>\n      )}\n    </MuiLink>\n  );\n};\n\nconst MemoizedLink = memo(Link);\n\nMemoizedLink.displayName = \"Link\";\n\nexport { MemoizedLink as Link };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAC/DC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMzB,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA0CnE,MAAMC,IAAI,GAAGC,IAAA,IAUI;EAAA,IAVH;IACZC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,YAAY;IACZC,GAAG;IACHC,MAAM;IACNC,MAAM;IACNC,OAAO;IACPC;EACS,CAAC,GAAAT,IAAA;EACV,MAAMU,GAAG,GAAGlB,MAAM,CAAoB,IAAI,CAAC;EAC3CD,mBAAmB,CACjBa,YAAY,EACZ,MAAM;IACJ,MAAMO,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,OACEhB,KAAA,CAAAiB,KAAA;IACE,WAASP,MAAO;IAChBL,IAAI,EAAEA,IAAK;IACXQ,GAAG,EAAEA,GAAI;IACTL,GAAG,EAAEA,GAAI;IACTC,MAAM,EAAEA,MAAO;IACfE,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IAAAR,QAAA,GAEhBE,IAAI,IAAIR,IAAA;MAAMoB,SAAS,EAAC,WAAW;MAAAd,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ,EAERK,MAAM,KAAK,QAAQ,IAClBX,IAAA;MAAMoB,SAAS,EAAC,gBAAgB;MAACC,IAAI,EAAC,cAAc;MAAAf,QAAA,EAClDN,IAAA,CAACF,gBAAgB,IAAE;IAAC,CAChB,CACP;EAAA,CACM,CAAC;AAEd,CAAC;AAED,MAAMwB,YAAY,GAAG3B,IAAI,CAACS,IAAI,CAAC;AAE/BkB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIlB,IAAI"}

package/dist/PasswordField.js

@@ -12,7 +12,7 @@ import _IconButton from "@mui/material/IconButton";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { forwardRef, memo, useCallback, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from "react";
 import { ShowIcon, HideIcon } from "./icons.generated/index.js";
 import { Field } from "./Field.js";
 import { useTranslation } from "react-i18next";
@@ -26,6 +26,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     hasInitialFocus,
     hint,
     id: idOverride,
+    inputFocusRef,
     isDisabled = false,
     isFullWidth = false,
     isOptional = false,
@@ -56,6 +57,15 @@ const PasswordField = forwardRef((_ref, ref) => {
     value,
     controlState: controlledStateRef.current
   });
+  const inputRef = useRef(null);
+  useImperativeHandle(inputFocusRef, () => {
+    const element = inputRef.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   const onChange = useCallback(event => {
     onChangeProp?.(event);
   }, [onChangeProp]);
@@ -86,6 +96,7 @@ const PasswordField = forwardRef((_ref, ref) => {
         "aria-labelledby": labelElementId,
         role: "textbox"
       },
+      inputRef: inputRef,
       name: nameOverride ?? id,
       onChange: onChange,
       onFocus: onFocus,

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","defaultValue","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","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  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { 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 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  SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\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      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 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          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n        />\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      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\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","hasInitialFocus","hint","id","idOverride","inputFocusRef","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","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 { SeleniumProps } from \"./SeleniumProps\";\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  SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\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      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          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      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\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

@@ -11,10 +11,11 @@ import _Radio from "@mui/material/Radio";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback } from "react";
+import { memo, useCallback, useRef, useImperativeHandle } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Radio = _ref => {
   let {
+    inputFocusRef,
     isChecked,
     isDisabled,
     isInvalid,
@@ -25,6 +26,15 @@ const Radio = _ref => {
     onChange: onChangeProp,
     onBlur: onBlurProp
   } = _ref;
+  const ref = useRef(null);
+  useImperativeHandle(inputFocusRef, () => {
+    const element = ref.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   const onChange = useCallback((event, checked) => {
     onChangeProp?.(event, checked);
   }, [onChangeProp]);
@@ -35,6 +45,7 @@ const Radio = _ref => {
     checked: isChecked,
     className: isInvalid ? "Mui-error" : "",
     control: _jsx(_Radio, {
+      inputRef: ref,
       onChange: onChange
     }),
     "data-se": testId,

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","testId","value","onChange","onChangeProp","onBlur","onBlurProp","event","checked","_FormControlLabel","className","control","_Radio","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 } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type RadioProps = {\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  SeleniumProps;\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\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 onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\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,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiC1C,MAAMC,KAAK,GAAGC,IAAA,IAUI;EAAA,IAVH;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAX,IAAA;EACX,MAAMQ,QAAQ,GAAGZ,WAAW,CAC1B,CAACgB,KAAK,EAAEC,OAAO,KAAK;IAClBJ,YAAY,GAAGG,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACJ,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGd,WAAW,CACvBgB,KAAK,IAAK;IACTD,UAAU,GAAGC,KAAK,CAAC;EACrB,CAAC,EACD,CAACD,UAAU,CACb,CAAC;EAED,OACEb,IAAA,CAAAgB,iBAAA;IACED,OAAO,EAAEZ,SAAU;IACnBc,SAAS,EAAEZ,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCa,OAAO,EAAElB,IAAA,CAAAmB,MAAA;MAAUT,QAAQ,EAAEA;IAAS,CAAE,CAAE;IAC1C,WAASF,MAAO;IAChBY,QAAQ,EAAEhB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMS,aAAa,GAAGxB,IAAI,CAACI,KAAK,CAAC;AACjCoB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIpB,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useRef","useImperativeHandle","jsx","_jsx","Radio","_ref","inputFocusRef","isChecked","isDisabled","isInvalid","label","name","testId","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 { SeleniumProps } from \"./SeleniumProps\";\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  SeleniumProps;\n\nconst Radio = ({\n  inputFocusRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\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      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,IAWI;EAAA,IAXH;IACbC,aAAa;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAZ,IAAA;EACX,MAAMa,GAAG,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAC1CC,mBAAmB,CACjBK,aAAa,EACb,MAAM;IACJ,MAAMa,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,GAAGf,WAAW,CAC1B,CAACuB,KAAK,EAAEC,OAAO,KAAK;IAClBR,YAAY,GAAGO,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACR,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGjB,WAAW,CACvBuB,KAAK,IAAK;IACTL,UAAU,GAAGK,KAAK,CAAC;EACrB,CAAC,EACD,CAACL,UAAU,CACb,CAAC;EAED,OACEd,IAAA,CAAAqB,iBAAA;IACED,OAAO,EAAEhB,SAAU;IACnBkB,SAAS,EAAEhB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCiB,OAAO,EAAEvB,IAAA,CAAAwB,MAAA;MAAUC,QAAQ,EAAEV,GAAI;MAACJ,QAAQ,EAAEA;IAAS,CAAE,CAAE;IACzD,WAASF,MAAO;IAChBiB,QAAQ,EAAErB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMc,aAAa,GAAGhC,IAAI,CAACM,KAAK,CAAC;AACjC0B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI1B,KAAK"}

package/dist/Select.js

@@ -17,7 +17,7 @@ import _Chip from "@mui/material/Chip";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useMemo, useRef, useState, useImperativeHandle } from "react";
 import { Field } from "./Field.js";
 import { CheckIcon } from "./icons.generated/index.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
@@ -34,6 +34,7 @@ const Select = _ref => {
     hint,
     HintLinkComponent,
     id: idOverride,
+    inputFocusRef,
     isDisabled = false,
     isFullWidth = false,
     isMultiSelect,
@@ -53,6 +54,15 @@ const Select = _ref => {
     uncontrolledValue: defaultValue
   }));
   const [internalSelectedValues, setInternalSelectedValues] = useState(controlledStateRef.current === CONTROLLED ? value : defaultValue);
+  const inputRef = useRef(null);
+  useImperativeHandle(inputFocusRef, () => {
+    const element = inputRef.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   useEffect(() => {
     if (controlledStateRef.current === CONTROLLED) {
       setInternalSelectedValues(value);
@@ -132,6 +142,7 @@ const Select = _ref => {
       children: children,
       "data-se": testId,
       id: id,
+      inputRef: inputRef,
       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","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","defaultValue","errorMessage","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","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 { memo, useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  Box,\n  Checkbox as MuiCheckbox,\n  Chip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport {\n  ComponentControlledState,\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   * @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  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  SeleniumProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  defaultValue,\n  errorMessage,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\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  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\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        labelId={labelElementId}\n        multiple={hasMultipleChoices}\n        name={nameOverride ?? id}\n        onBlur={onBlur}\n        onChange={onChange}\n        onFocus={onFocus}\n        renderValue={hasMultipleChoices ? renderValue : undefined}\n      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\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","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputFocusRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","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 { SeleniumProps } from \"./SeleniumProps\";\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  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  SeleniumProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n>({\n  defaultValue,\n  errorMessage,\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  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      />\n    ),\n    [\n      children,\n      inputValues,\n      hasMultipleChoices,\n      nameOverride,\n      onBlur,\n      onChange,\n      onFocus,\n      renderValue,\n      testId,\n    ]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\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

@@ -12,7 +12,7 @@ import _InputAdornment from "@mui/material/InputAdornment";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef, memo, useCallback, useRef } from "react";
+import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from "react";
 import { Field } from "./Field.js";
 import { useInputValues, getControlState } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,6 +27,7 @@ const TextField = forwardRef((_ref, ref) => {
     hint,
     HintLinkComponent,
     id: idOverride,
+    inputFocusRef,
     isDisabled = false,
     isFullWidth = false,
     isMultiline = false,
@@ -52,6 +53,15 @@ const TextField = forwardRef((_ref, ref) => {
     value,
     controlState: controlledStateRef.current
   });
+  const inputRef = useRef(null);
+  useImperativeHandle(inputFocusRef, () => {
+    const element = inputRef.current;
+    return {
+      focus: () => {
+        element && element.focus();
+      }
+    };
+  }, []);
   const onChange = useCallback(event => {
     onChangeProp?.(event);
   }, [onChangeProp]);
@@ -77,6 +87,7 @@ const TextField = forwardRef((_ref, ref) => {
         children: endAdornment
       }),
       id: id,
+      inputRef: inputRef,
       multiline: isMultiline,
       name: nameOverride ?? id,
       onBlur: onBlur,