@okta/odyssey-react-mui 1.43.0 → 1.45.0

package/dist/esm/PasswordField.js

@@ -13,9 +13,9 @@ import _IconButton from "@mui/material/IconButton";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 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";
+import { Field } from "./Field.js";
+import { HideIcon, ShowIcon } from "./icons.generated/index.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef(({
@@ -99,9 +99,9 @@ const PasswordField = forwardRef(({
     },
     inputRef: localInputRef,
     name: nameOverride ?? id,
+    onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
-    onBlur: onBlur,
     placeholder: placeholder,
     readOnly: isReadOnly,
     ref: ref,

package/dist/esm/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","ariaDescribedBy","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","ref","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","renderFieldComponent","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/index.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { useTranslation } from \"react-i18next\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils.js\";\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  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      ariaDescribedBy,\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(inputRef, () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\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      ({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      }: FieldRenderProps) => (\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={t(\"passwordfield.icon.label.show\")}\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        ariaDescribedBy={ariaDescribedBy}\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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","ignoreList":[]}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useImperativeHandle","useRef","useState","useTranslation","Field","HideIcon","ShowIcon","getControlState","useInputValues","jsx","_jsx","PasswordField","ariaDescribedBy","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","ref","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","localInputRef","focus","event","renderFieldComponent","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 { IconButton, InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { HideIcon, ShowIcon } from \"./icons.generated/index.js\";\nimport { FocusHandle, getControlState, useInputValues } from \"./inputUtils.js\";\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  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      ariaDescribedBy,\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(inputRef, () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\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      ({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      }: FieldRenderProps) => (\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={t(\"passwordfield.icon.label.show\")}\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          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\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        ariaDescribedBy={ariaDescribedBy}\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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","ignoreList":[]}

package/dist/esm/Radio.js

@@ -13,8 +13,8 @@ import _Radio from "@mui/material/Radio";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
 import styled from "@emotion/styled";
+import { memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { Typography } from "./Typography.js";
 import { useUniqueId } from "./useUniqueId.js";
@@ -81,6 +81,7 @@ const Radio = ({
       checked: isChecked,
       className: isInvalid ? "Mui-error" : "",
       control: _jsx(_Radio, {
+        disabled: isDisabled,
         inputProps: {
           "aria-describedby": hintId,
           "aria-disabled": isDisabled || isReadOnly,
@@ -90,15 +91,12 @@ const Radio = ({
         },
         inputRef: localInputRef,
         onChange: onChange,
-        onClick: onClick || handleClick,
-        disabled: isDisabled
+        onClick: onClick || handleClick
       }),
+      disabled: isDisabled,
       label: label,
       name: name,
-      translate: translate,
-      value: value,
       onBlur: onBlur,
-      disabled: isDisabled,
       sx: {
         ...(isReadOnly && {
           cursor: "default",
@@ -111,7 +109,9 @@ const Radio = ({
             marginBlockEnd: 0
           }
         })
-      }
+      },
+      translate: translate,
+      value: value
     }), hint && _jsx(HintContainerWithInlineStartSpacing, {
       odysseyDesignTokens: odysseyDesignTokens,
       children: _jsx(_FormHelperText, {

package/dist/esm/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","styled","useOdysseyDesignTokens","Typography","useUniqueId","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HintContainerWithInlineStartSpacing","div","odysseyDesignTokens","paddingInlineStart","TypographyLineHeightUi","Spacing2","marginBlockEnd","color","TypographyColorSubordinate","Radio","hint","id","idOverride","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","isReadOnly","onChange","onChangeProp","onBlur","onBlurProp","onClick","localInputRef","hintId","undefined","focus","current","component","children","event","checked","preventDefault","handleClick","stopPropagation","_FormControlLabel","className","control","_Radio","inputProps","readOnly","tabIndex","disabled","sx","cursor","_FormHelperText","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 { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport styled from \"@emotion/styled\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { FocusHandle } from \"./inputUtils.js\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nconst HintContainerWithInlineStartSpacing = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,\n  marginBlockEnd: odysseyDesignTokens.Spacing2,\n\n  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red\n  // We want to keep the hint text gray in the error state\n  \".Mui-error\": {\n    color: odysseyDesignTokens.TypographyColorSubordinate,\n  },\n}));\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Radio button is checked\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the radio button 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 blur event happens. Provides event value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  isReadOnly,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  onClick,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  const label = useMemo(\n    () => <Typography component=\"span\">{labelProp}</Typography>,\n    [labelProp],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        onChangeProp?.(event, checked);\n      }\n    },\n    [onChangeProp, isReadOnly],\n  );\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <>\n      <FormControlLabel\n        checked={isChecked}\n        className={isInvalid ? \"Mui-error\" : \"\"}\n        control={\n          <MuiRadio\n            inputProps={{\n              \"aria-describedby\": hintId,\n              \"aria-disabled\": isDisabled || isReadOnly,\n              \"data-se\": testId,\n              readOnly: isReadOnly,\n              tabIndex: isReadOnly ? 0 : undefined,\n            }}\n            inputRef={localInputRef}\n            onChange={onChange}\n            onClick={onClick || handleClick}\n            disabled={isDisabled}\n          />\n        }\n        label={label}\n        name={name}\n        translate={translate}\n        value={value}\n        onBlur={onBlur}\n        disabled={isDisabled}\n        sx={{\n          ...(isReadOnly && {\n            cursor: \"default\",\n            \"& .MuiTypography-root\": {\n              cursor: \"default\",\n            },\n          }),\n\n          ...(hint && {\n            // needed to override specific :not(:last-child) selector\n            \":not(:last-child)\": {\n              marginBlockEnd: 0,\n            },\n          }),\n        }}\n      />\n      {hint && (\n        <HintContainerWithInlineStartSpacing\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <FormHelperText id={hintId} translate={translate}>\n            {hint}\n          </FormHelperText>\n        </HintContainerWithInlineStartSpacing>\n      )}\n    </>\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Radio.js","names":["styled","memo","useCallback","useImperativeHandle","useMemo","useRef","useOdysseyDesignTokens","Typography","useUniqueId","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","HintContainerWithInlineStartSpacing","div","odysseyDesignTokens","paddingInlineStart","TypographyLineHeightUi","Spacing2","marginBlockEnd","color","TypographyColorSubordinate","Radio","hint","id","idOverride","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","isReadOnly","onChange","onChangeProp","onBlur","onBlurProp","onClick","localInputRef","hintId","undefined","focus","current","component","children","event","checked","preventDefault","handleClick","stopPropagation","_FormControlLabel","className","control","_Radio","disabled","inputProps","readOnly","tabIndex","sx","cursor","_FormHelperText","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 styled from \"@emotion/styled\";\nimport {\n  FormControlLabel,\n  FormHelperText,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useImperativeHandle, useMemo, useRef } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps.js\";\nimport { FocusHandle } from \"./inputUtils.js\";\nimport {\n  DesignTokens,\n  useOdysseyDesignTokens,\n} from \"./OdysseyDesignTokensContext.js\";\nimport { Typography } from \"./Typography.js\";\nimport { useUniqueId } from \"./useUniqueId.js\";\n\nconst HintContainerWithInlineStartSpacing = styled.div<{\n  odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n  paddingInlineStart: `calc(${odysseyDesignTokens.TypographyLineHeightUi}em + ${odysseyDesignTokens.Spacing2})`,\n  marginBlockEnd: odysseyDesignTokens.Spacing2,\n\n  // MUI applies the '.Mui-error' class to this hint text when the checkbox is invalid which turns the copy red\n  // We want to keep the hint text gray in the error state\n  \".Mui-error\": {\n    color: odysseyDesignTokens.TypographyColorSubordinate,\n  },\n}));\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Radio button is checked\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the radio button has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  isReadOnly,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  onClick,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n\n  useImperativeHandle(inputRef, () => {\n    return {\n      focus: () => {\n        localInputRef.current?.focus();\n      },\n    };\n  }, []);\n\n  const label = useMemo(\n    () => <Typography component=\"span\">{labelProp}</Typography>,\n    [labelProp],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        onChangeProp?.(event, checked);\n      }\n    },\n    [onChangeProp, isReadOnly],\n  );\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <>\n      <FormControlLabel\n        checked={isChecked}\n        className={isInvalid ? \"Mui-error\" : \"\"}\n        control={\n          <MuiRadio\n            disabled={isDisabled}\n            inputProps={{\n              \"aria-describedby\": hintId,\n              \"aria-disabled\": isDisabled || isReadOnly,\n              \"data-se\": testId,\n              readOnly: isReadOnly,\n              tabIndex: isReadOnly ? 0 : undefined,\n            }}\n            inputRef={localInputRef}\n            onChange={onChange}\n            onClick={onClick || handleClick}\n          />\n        }\n        disabled={isDisabled}\n        label={label}\n        name={name}\n        onBlur={onBlur}\n        sx={{\n          ...(isReadOnly && {\n            cursor: \"default\",\n            \"& .MuiTypography-root\": {\n              cursor: \"default\",\n            },\n          }),\n\n          ...(hint && {\n            // needed to override specific :not(:last-child) selector\n            \":not(:last-child)\": {\n              marginBlockEnd: 0,\n            },\n          }),\n        }}\n        translate={translate}\n        value={value}\n      />\n      {hint && (\n        <HintContainerWithInlineStartSpacing\n          odysseyDesignTokens={odysseyDesignTokens}\n        >\n          <FormHelperText id={hintId} translate={translate}>\n            {hint}\n          </FormHelperText>\n        </HintContainerWithInlineStartSpacing>\n      )}\n    </>\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/RadioGroup.js

@@ -10,7 +10,7 @@ import _RadioGroup from "@mui/material/RadioGroup";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import React, { memo, useCallback, useRef, useMemo } from "react";
+import React, { memo, useCallback, useMemo, useRef } from "react";
 import { Field } from "./Field.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
 import { Radio } from "./Radio.js";

package/dist/esm/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["React","memo","useCallback","useRef","useMemo","Field","getControlState","useInputValues","Radio","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","newValue","memoizedChildren","Children","map","child","isValidElement","type","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../../src/RadioGroup.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  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useRef, useMemo } from \"react\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { Radio, RadioProps } from \"./Radio.js\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, newValue) => {\n      onChangeProp?.(event, newValue);\n    },\n    [onChangeProp],\n  );\n\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {\n          return React.cloneElement(child, {\n            ...child.props,\n            isDisabled: isDisabled || child.props.isDisabled,\n            isReadOnly: isReadOnly || child.props.isReadOnly,\n          });\n        }\n        return child;\n      }),\n    [children, isDisabled, isReadOnly],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiRadioGroup>\n    ),\n    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RadioGroup.js","names":["React","memo","useCallback","useMemo","useRef","Field","getControlState","useInputValues","Radio","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","newValue","memoizedChildren","Children","map","child","isValidElement","type","cloneElement","props","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../../src/RadioGroup.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  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useMemo, useRef } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { Radio, RadioProps } from \"./Radio.js\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, newValue) => {\n      onChangeProp?.(event, newValue);\n    },\n    [onChangeProp],\n  );\n\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {\n          return React.cloneElement(child, {\n            ...child.props,\n            isDisabled: isDisabled || child.props.isDisabled,\n            isReadOnly: isReadOnly || child.props.isReadOnly,\n          });\n        }\n        return child;\n      }),\n    [children, isDisabled, isReadOnly],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiRadioGroup>\n    ),\n    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/ScreenReaderText.js

@@ -10,9 +10,8 @@ import _Box from "@mui/material/Box";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-
-import { memo } from "react";
 import { visuallyHidden } from "@mui/utils";
+import { memo } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 const style = {
   ...visuallyHidden
@@ -24,9 +23,9 @@ const ScreenReaderText = ({
   translate
 }) => _jsx(_Box, {
   "aria-hidden": ariaHidden,
-  sx: style,
   component: "span",
   id: id,
+  sx: style,
   translate: translate,
   children: children
 });

package/dist/esm/ScreenReaderText.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","ariaHidden","children","id","translate","_Box","sx","component","MemoizedScreenReaderText","displayName"],"sources":["../../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { HtmlProps } from \"./HtmlProps.js\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n  id?: string;\n} & Pick<HtmlProps, \"ariaHidden\" | \"translate\">;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({\n  ariaHidden,\n  children,\n  id,\n  translate,\n}: ScreenReaderTextProps) => (\n  <Box\n    aria-hidden={ariaHidden}\n    sx={style}\n    component=\"span\"\n    id={id}\n    translate={translate}\n  >\n    {children}\n  </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAEvC,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAgB5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EACxBC,UAAU;EACVC,QAAQ;EACRC,EAAE;EACFC;AACqB,CAAC,KACtBN,IAAA,CAAAO,IAAA;EACE,eAAaJ,UAAW;EACxBK,EAAE,EAAEP,KAAM;EACVQ,SAAS,EAAC,MAAM;EAChBJ,EAAE,EAAEA,EAAG;EACPC,SAAS,EAAEA,SAAU;EAAAF,QAAA,EAEpBA;AAAQ,CACN,CACN;AAED,MAAMM,wBAAwB,GAAGb,IAAI,CAACK,gBAAgB,CAAC;AACvDQ,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIR,gBAAgB","ignoreList":[]}
+{"version":3,"file":"ScreenReaderText.js","names":["visuallyHidden","memo","jsx","_jsx","style","ScreenReaderText","ariaHidden","children","id","translate","_Box","component","sx","MemoizedScreenReaderText","displayName"],"sources":["../../src/ScreenReaderText.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 { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { memo, ReactNode } from \"react\";\n\nimport { HtmlProps } from \"./HtmlProps.js\";\n\nexport type ScreenReaderTextProps = {\n  /**\n   * The visually-hidden text.\n   */\n  children: ReactNode;\n  id?: string;\n} & Pick<HtmlProps, \"ariaHidden\" | \"translate\">;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({\n  ariaHidden,\n  children,\n  id,\n  translate,\n}: ScreenReaderTextProps) => (\n  <Box\n    aria-hidden={ariaHidden}\n    component=\"span\"\n    id={id}\n    sx={style}\n    translate={translate}\n  >\n    {children}\n  </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,cAAc,QAAQ,YAAY;AAC3C,SAASC,IAAI,QAAmB,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiBxC,MAAMC,KAAK,GAAG;EAAE,GAAGJ;AAAe,CAAC;AAEnC,MAAMK,gBAAgB,GAAGA,CAAC;EACxBC,UAAU;EACVC,QAAQ;EACRC,EAAE;EACFC;AACqB,CAAC,KACtBN,IAAA,CAAAO,IAAA;EACE,eAAaJ,UAAW;EACxBK,SAAS,EAAC,MAAM;EAChBH,EAAE,EAAEA,EAAG;EACPI,EAAE,EAAER,KAAM;EACVK,SAAS,EAAEA,SAAU;EAAAF,QAAA,EAEpBA;AAAQ,CACN,CACN;AAED,MAAMM,wBAAwB,GAAGZ,IAAI,CAACI,gBAAgB,CAAC;AACvDQ,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIR,gBAAgB","ignoreList":[]}

package/dist/esm/SearchField.js

@@ -12,10 +12,12 @@ 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 } from "react";
+
 import styled from "@emotion/styled";
-import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
+import { forwardRef, memo, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { Field } from "./Field.js";
+import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -44,6 +46,9 @@ const SearchField = forwardRef(({
   value,
   variant = "outline"
 }, ref) => {
+  const {
+    t
+  } = useTranslation();
   const onChange = useCallback(event => {
     onChangeProp?.(event);
   }, [onChangeProp]);
@@ -64,17 +69,16 @@ const SearchField = forwardRef(({
     id
   }) => _jsx(_InputBase, {
     ...inputValues,
-    inputProps: {
-      tabIndex
-    },
     "aria-describedby": ariaDescribedBy,
     autoComplete: autoCompleteType,
     autoFocus: hasInitialFocus,
+    "data-ods-type": "search",
+    "data-ods-variant": variant,
     "data-se": testId,
     endAdornment: (inputValues?.defaultValue || inputValues?.value) && _jsx(_InputAdornment, {
       position: "end",
       children: _jsx(_IconButton, {
-        "aria-label": "Clear",
+        "aria-label": t("clear.text"),
         disabled: isDisabled,
         onClick: onClear,
         size: "small",
@@ -82,8 +86,9 @@ const SearchField = forwardRef(({
       })
     }),
     id: id,
-    "data-ods-type": "search",
-    "data-ods-variant": variant,
+    inputProps: {
+      tabIndex
+    },
     name: nameOverride ?? id,
     onBlur: onBlur,
     onChange: onChange,
@@ -96,7 +101,7 @@ const SearchField = forwardRef(({
     }),
     translate: translate,
     type: "search"
-  }), [autoCompleteType, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, tabIndex, testId, translate, variant]);
+  }), [autoCompleteType, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, t, tabIndex, testId, translate, variant]);
   return _jsx(StyledContainerToEnsureThemeProviderDivIsFullWidth, {
     children: _jsx(OdysseyThemeProvider, {
       children: _jsx(Field, {

package/dist/esm/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","styled","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","OdysseyThemeProvider","jsx","_jsx","searchVariantValues","StyledContainerToEnsureThemeProviderDivIsFullWidth","width","SearchField","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","variant","ref","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_InputBase","inputProps","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../../src/SearchField.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  HTMLAttributes,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated/index.js\";\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport type { HtmlProps } from \"./HtmlProps.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\n\nconst StyledContainerToEnsureThemeProviderDivIsFullWidth = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport type SearchFieldProps = {\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?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\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 clear button is pressed.\n   */\n  onClear?: () => void;\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  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n  /**\n   * Whether the SearchField has a gray or white background\n   */\n  variant?: (typeof searchVariantValues)[number];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<Pick<HtmlProps, \"ariaDescribedBy\">> &\n  Pick<FieldComponentRenderProps, \"id\">;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      tabIndex,\n      testId,\n      translate,\n      value,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp],\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\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 renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }: FieldRenderProps) => (\n        <InputBase\n          {...inputValues}\n          inputProps={{\n            tabIndex,\n          }}\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            (inputValues?.defaultValue || inputValues?.value) && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          data-ods-type=\"search\"\n          data-ods-variant={variant}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        tabIndex,\n        testId,\n        translate,\n        variant,\n      ],\n    );\n\n    return (\n      <StyledContainerToEnsureThemeProviderDivIsFullWidth>\n        <OdysseyThemeProvider>\n          <Field\n            ariaDescribedBy={ariaDescribedBy}\n            fieldType=\"single\"\n            hasVisibleLabel={false}\n            id={idOverride}\n            isDisabled={isDisabled}\n            isFullWidth={isFullWidth}\n            isOptional={true}\n            label={label}\n            renderFieldComponent={renderFieldComponent}\n          />\n        </OdysseyThemeProvider>\n      </StyledContainerToEnsureThemeProviderDivIsFullWidth>\n    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"SearchField.js","names":["styled","forwardRef","memo","useCallback","useRef","useTranslation","Field","CloseCircleFilledIcon","SearchIcon","getControlState","useInputValues","OdysseyThemeProvider","jsx","_jsx","searchVariantValues","StyledContainerToEnsureThemeProviderDivIsFullWidth","width","SearchField","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","variant","ref","t","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","inputProps","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../../src/SearchField.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 styled from \"@emotion/styled\";\nimport { IconButton, InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps.js\";\n\nimport { Field } from \"./Field.js\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps.js\";\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated/index.js\";\nimport { getControlState, useInputValues } from \"./inputUtils.js\";\nimport { OdysseyThemeProvider } from \"./OdysseyThemeProvider.js\";\n\nexport const searchVariantValues = [\"outline\", \"filled\"] as const;\n\nconst StyledContainerToEnsureThemeProviderDivIsFullWidth = styled(\"div\")({\n  width: \"100%\",\n});\n\nexport type SearchFieldProps = {\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?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\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 clear button is pressed.\n   */\n  onClear?: () => void;\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  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n  /**\n   * Whether the SearchField has a gray or white background\n   */\n  variant?: (typeof searchVariantValues)[number];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<Pick<HtmlProps, \"ariaDescribedBy\">> &\n  Pick<FieldComponentRenderProps, \"id\">;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      ariaDescribedBy,\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      tabIndex,\n      testId,\n      translate,\n      value,\n      variant = \"outline\",\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp],\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\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 renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }: FieldRenderProps) => (\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-ods-type=\"search\"\n          data-ods-variant={variant}\n          data-se={testId}\n          endAdornment={\n            (inputValues?.defaultValue || inputValues?.value) && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={t(\"clear.text\")}\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            tabIndex,\n          }}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          translate={translate}\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        t,\n        tabIndex,\n        testId,\n        translate,\n        variant,\n      ],\n    );\n\n    return (\n      <StyledContainerToEnsureThemeProviderDivIsFullWidth>\n        <OdysseyThemeProvider>\n          <Field\n            ariaDescribedBy={ariaDescribedBy}\n            fieldType=\"single\"\n            hasVisibleLabel={false}\n            id={idOverride}\n            isDisabled={isDisabled}\n            isFullWidth={isFullWidth}\n            isOptional={true}\n            label={label}\n            renderFieldComponent={renderFieldComponent}\n          />\n        </OdysseyThemeProvider>\n      </StyledContainerToEnsureThemeProviderDivIsFullWidth>\n    );\n  },\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/Select.js

@@ -17,11 +17,11 @@ import _Box from "@mui/material/Box";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useCallback, useEffect, useMemo, useRef, useState, useImperativeHandle } from "react";
 import styled from "@emotion/styled";
+import { memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
 import { Field } from "./Field.js";
 import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated/index.js";
-import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
+import { ComponentControlledState, getControlState, useInputValues } from "./inputUtils.js";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { normalizedKey } from "./useNormalizedKey.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -221,19 +221,19 @@ const Select = ({
       isReadOnly: isReadOnly,
       odysseyDesignTokens: odysseyDesignTokens,
       children: internalSelectedValues.map(item => item?.length > 0 && _jsx(_Chip, {
+        deleteIcon: _jsx(CloseCircleFilledIcon, {
+          onMouseDown: stopPropagation,
+          sx: {
+            pointerEvents: "auto"
+          }
+        }),
         label: _jsxs(_Fragment, {
           children: [normalizedOptionsMap.get(item)?.text, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
             odysseyDesignTokens: odysseyDesignTokens
           })]
         }),
-        tabIndex: -1,
         onDelete: isInteractive && controlledStateRef.current === CONTROLLED ? () => removeSelectedValue(item) : undefined,
-        deleteIcon: _jsx(CloseCircleFilledIcon, {
-          sx: {
-            pointerEvents: "auto"
-          },
-          onMouseDown: stopPropagation
-        })
+        tabIndex: -1
       }, item))
     });
   }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue, normalizedOptionsMap]);
@@ -246,9 +246,9 @@ const Select = ({
     const isSelected = hasMultipleChoices ? internalSelectedValues?.includes(option.value) : internalSelectedValues === option.value;
     return _jsxs(_MenuItem, {
       "data-empty": !option.text,
-      value: option.value,
-      selected: isSelected,
       lang: option.lang,
+      selected: isSelected,
+      value: option.value,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
         checked: isSelected
       }), option.text, !hasMultipleChoices && internalSelectedValues === option.value && _jsx(_ListItemSecondaryAction, {