@okta/odyssey-react-mui 1.0.2 → 1.1.1

package/dist/PasswordField.js

@@ -1,5 +1,6 @@
 import _InputBase from "@mui/material/InputBase";
 import _InputAdornment from "@mui/material/InputAdornment";
+import _IconButton from "@mui/material/IconButton";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -13,7 +14,6 @@ import _InputAdornment from "@mui/material/InputAdornment";
  */
 import { forwardRef, memo, useCallback, useState } from "react";
 import { ShowIcon, HideIcon } from "./icons.generated/index.js";
-import { Button } from "./Button.js";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef((_ref, ref) => {
@@ -27,10 +27,12 @@ const PasswordField = forwardRef((_ref, ref) => {
     isOptional = false,
     isReadOnly,
     label,
+    name: nameOverride,
     onChange,
     onFocus,
     onBlur,
     placeholder,
+    testId,
     value
   } = _ref;
   const [inputType, setInputType] = useState("password");
@@ -46,18 +48,17 @@ const PasswordField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
+      "data-se": testId,
       endAdornment: _jsx(_InputAdornment, {
         position: "end",
-        children: _jsx(Button, {
-          ariaLabel: "toggle password visibility",
-          endIcon: inputType === "password" ? _jsx(ShowIcon, {}) : _jsx(HideIcon, {}),
+        children: _jsx(_IconButton, {
+          "aria-label": "toggle password visibility",
           onClick: togglePasswordVisibility,
-          size: "small",
-          variant: "floating"
+          children: inputType === "password" ? _jsx(ShowIcon, {}) : _jsx(HideIcon, {})
         })
       }),
       id: id,
-      name: id,
+      name: nameOverride ?? id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -68,7 +69,7 @@ const PasswordField = forwardRef((_ref, ref) => {
       type: inputType,
       value: value
     });
-  }, [autoCompleteType, hasInitialFocus, togglePasswordVisibility, inputType, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, value]);
+  }, [autoCompleteType, hasInitialFocus, togglePasswordVisibility, inputType, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, testId, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","ShowIcon","HideIcon","Button","Field","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","isReadOnly","label","onChange","onFocus","onBlur","placeholder","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","ariaLabel","endIcon","onClick","size","variant","name","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 } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Button } from \"./Button\";\nimport { Field } from \"./Field\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <Button\n                ariaLabel=\"toggle password visibility\"\n                endIcon={inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                onClick={togglePasswordVisibility}\n                size=\"small\"\n                variant=\"floating\"\n              />\n            </InputAdornment>\n          }\n          id={id}\n          name={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        togglePasswordVisibility,\n        inputType,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,QAAQ,QACH,OAAO;AAAC,SAENC,QAAQ,EAAEC,QAAQ;AAAA,SAClBC,MAAM;AAAA,SACNC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA+Dd,MAAMC,aAAa,GAAGV,UAAU,CAC9B,CAAAW,IAAA,EAiBEC,GAAG,KACA;EAAA,IAjBH;IACEC,gBAAgB;IAChBC,YAAY;IACZC,eAAe;IACfC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,MAAM;IACNC,WAAW;IACXC;EACF,CAAC,GAAAhB,IAAA;EAGD,MAAM,CAACiB,SAAS,EAAEC,YAAY,CAAC,GAAG1B,QAAQ,CAAC,UAAU,CAAC;EAEtD,MAAM2B,wBAAwB,GAAG5B,WAAW,CAAC,MAAM;IACjD2B,YAAY,CAAED,SAAS,IACrBA,SAAS,KAAK,UAAU,GAAG,MAAM,GAAG,UACtC,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMG,oBAAoB,GAAG7B,WAAW,CACtC8B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEhB;IAAG,CAAC,GAAAe,KAAA;IAAA,OACtBvB,IAAA,CAAAyB,UAAA;MACE,oBAAkBD,eAAgB;MAClCE,YAAY,EAAEtB,gBAAiB;MAE/BuB,SAAS,EAAErB,eAAgB;MAC3BsB,YAAY,EACV5B,IAAA,CAAA6B,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAC5B/B,IAAA,CAACH,MAAM;UACLmC,SAAS,EAAC,4BAA4B;UACtCC,OAAO,EAAEd,SAAS,KAAK,UAAU,GAAGnB,IAAA,CAACL,QAAQ,IAAE,CAAC,GAAGK,IAAA,CAACJ,QAAQ,IAAE,CAAE;UAChEsC,OAAO,EAAEb,wBAAyB;UAClCc,IAAI,EAAC,OAAO;UACZC,OAAO,EAAC;QAAU,CACnB;MAAC,CACY,CACjB;MACD5B,EAAE,EAAEA,EAAG;MACP6B,IAAI,EAAE7B,EAAG;MACTM,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,MAAM,EAAEA,MAAO;MACfC,WAAW,EAAEA,WAAY;MACzBqB,QAAQ,EAAE1B,UAAW;MACrBT,GAAG,EAAEA,GAAI;MACToC,QAAQ,EAAE,CAAC5B,UAAW;MACtB6B,IAAI,EAAErB,SAAU;MAChBD,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACEd,gBAAgB,EAChBE,eAAe,EACfe,wBAAwB,EACxBF,SAAS,EACTL,QAAQ,EACRC,OAAO,EACPC,MAAM,EACNC,WAAW,EACXN,UAAU,EACVC,UAAU,EACVT,GAAG,EACHe,KAAK,CAET,CAAC;EAED,OACElB,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3BoC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACfnC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,UAAU,EAAEA,UAAW;IACvBE,KAAK,EAAEA,KAAM;IACbS,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMqB,qBAAqB,GAAGnD,IAAI,CAACS,aAAa,CAAC;AACjD0C,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAI1C,aAAa"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","ShowIcon","HideIcon","Field","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","isReadOnly","label","name","nameOverride","onChange","onFocus","onBlur","placeholder","testId","value","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            <InputAdornment position=\"end\">\n              <IconButton\n                aria-label=\"toggle password visibility\"\n                onClick={togglePasswordVisibility}\n              >\n                {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n              </IconButton>\n            </InputAdornment>\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        ref,\n        testId,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}

package/dist/Radio.js

@@ -20,12 +20,14 @@ const Radio = _ref => {
     isInvalid,
     label,
     name,
+    testId,
     value
   } = _ref;
   return _jsx(_FormControlLabel, {
     checked: isChecked,
     className: isInvalid ? "Mui-error" : "",
     control: _jsx(_Radio, {}),
+    "data-se": testId,
     disabled: isDisabled,
     label: label,
     name: name,

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","value","_FormControlLabel","checked","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 { Radio as MuiRadio } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport { FormControlLabel } from \"@mui/material\";\n\nexport type RadioProps = {\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio is disabled\n   */\n  isDisabled?: 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 name attribute of the Radio\n   */\n  name?: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n};\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  value,\n}: RadioProps) => (\n  <FormControlLabel\n    checked={isChecked}\n    className={isInvalid ? \"Mui-error\" : \"\"}\n    control={<MuiRadio />}\n    disabled={isDisabled}\n    label={label}\n    name={name}\n    value={value}\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;AAGA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA+B7B,MAAMC,KAAK,GAAGC,IAAA;EAAA,IAAC;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC;EACU,CAAC,GAAAN,IAAA;EAAA,OACXF,IAAA,CAAAS,iBAAA;IACEC,OAAO,EAAEP,SAAU;IACnBQ,SAAS,EAAEN,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCO,OAAO,EAAEZ,IAAA,CAAAa,MAAA,IAAW,CAAE;IACtBC,QAAQ,EAAEV,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA;EAAM,CACd,CAAC;AAAA,CACH;AAED,MAAMO,aAAa,GAAGjB,IAAI,CAACG,KAAK,CAAC;AACjCc,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAId,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","testId","value","_FormControlLabel","checked","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 { Radio as MuiRadio } from \"@mui/material\";\nimport { memo } from \"react\";\n\nimport { FormControlLabel } from \"@mui/material\";\n\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 is disabled\n   */\n  isDisabled?: 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 name attribute of the Radio\n   */\n  name?: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n} & SeleniumProps;\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  value,\n}: RadioProps) => (\n  <FormControlLabel\n    checked={isChecked}\n    className={isInvalid ? \"Mui-error\" : \"\"}\n    control={<MuiRadio />}\n    data-se={testId}\n    disabled={isDisabled}\n    label={label}\n    name={name}\n    value={value}\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;AAGA,SAASA,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiC7B,MAAMC,KAAK,GAAGC,IAAA;EAAA,IAAC;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC;EACU,CAAC,GAAAP,IAAA;EAAA,OACXF,IAAA,CAAAU,iBAAA;IACEC,OAAO,EAAER,SAAU;IACnBS,SAAS,EAAEP,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCQ,OAAO,EAAEb,IAAA,CAAAc,MAAA,IAAW,CAAE;IACtB,WAASN,MAAO;IAChBO,QAAQ,EAAEX,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA;EAAM,CACd,CAAC;AAAA,CACH;AAED,MAAMO,aAAa,GAAGlB,IAAI,CAACG,KAAK,CAAC;AACjCe,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIf,KAAK"}

package/dist/RadioGroup.js

@@ -22,7 +22,9 @@ const RadioGroup = _ref => {
     id: idOverride,
     isDisabled,
     label,
+    name: nameOverride,
     onChange,
+    testId,
     value
   } = _ref;
   const renderFieldComponent = useCallback(_ref2 => {
@@ -32,14 +34,15 @@ const RadioGroup = _ref => {
     } = _ref2;
     return _jsx(_RadioGroup, {
       "aria-describedby": ariaDescribedBy,
+      "data-se": testId,
       defaultValue: defaultValue,
       id: id,
-      name: id,
+      name: nameOverride ?? id,
       onChange: onChange,
       value: value,
       children: children
     });
-  }, [children, defaultValue, onChange, value]);
+  }, [children, defaultValue, nameOverride, onChange, testId, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "group",

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","Field","jsx","_jsx","RadioGroup","_ref","children","defaultValue","errorMessage","hint","id","idOverride","isDisabled","label","onChange","value","renderFieldComponent","_ref2","ariaDescribedBy","_RadioGroup","name","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 { RadioGroup as MuiRadioGroup } from \"@mui/material\";\nimport { ChangeEventHandler, memo, ReactElement, useCallback } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The error text for an invalid RadioGroup\n   */\n  errorMessage?: string;\n  /**\n   * Optional hint text\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element. This will also be the input's `name` field.\n   */\n  id?: string;\n  /**\n   * Disables the whole RadioGroup\n   */\n  isDisabled?: boolean;\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?: ChangeEventHandler<EventTarget>;\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n};\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  label,\n  onChange,\n  value,\n}: RadioGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        defaultValue={defaultValue}\n        id={id}\n        name={id}\n        onChange={onChange}\n        value={value}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, defaultValue, onChange, value]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAA6BA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAGnEC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAyCd,MAAMC,UAAU,GAAGC,IAAA,IAUI;EAAA,IAVH;IAClBC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC;EACe,CAAC,GAAAV,IAAA;EAChB,MAAMW,oBAAoB,GAAGhB,WAAW,CACtCiB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAER;IAAG,CAAC,GAAAO,KAAA;IAAA,OACtBd,IAAA,CAAAgB,WAAA;MACE,oBAAkBD,eAAgB;MAClCX,YAAY,EAAEA,YAAa;MAC3BG,EAAE,EAAEA,EAAG;MACPU,IAAI,EAAEV,EAAG;MACTI,QAAQ,EAAEA,QAAS;MACnBC,KAAK,EAAEA,KAAM;MAAAT,QAAA,EAEZA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEC,YAAY,EAAEO,QAAQ,EAAEC,KAAK,CAC1C,CAAC;EAED,OACEZ,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3Ba,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBb,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbG,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,kBAAkB,GAAGxB,IAAI,CAACK,UAAU,CAAC;AAC3CmB,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAInB,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","Field","jsx","_jsx","RadioGroup","_ref","children","defaultValue","errorMessage","hint","id","idOverride","isDisabled","label","name","nameOverride","onChange","testId","value","renderFieldComponent","_ref2","ariaDescribedBy","_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 { RadioGroup as MuiRadioGroup } from \"@mui/material\";\nimport { ChangeEventHandler, memo, ReactElement, useCallback } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: Array<ReactElement<typeof Radio>>;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The error text for an invalid RadioGroup\n   */\n  errorMessage?: string;\n  /**\n   * Optional hint text\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Disables the whole RadioGroup\n   */\n  isDisabled?: boolean;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: ChangeEventHandler<EventTarget>;\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & SeleniumProps;\n\nconst RadioGroup = ({\n  children,\n  defaultValue,\n  errorMessage,\n  hint,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange,\n  testId,\n  value,\n}: RadioGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, id }) => (\n      <MuiRadioGroup\n        aria-describedby={ariaDescribedBy}\n        data-se={testId}\n        defaultValue={defaultValue}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        value={value}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, defaultValue, nameOverride, onChange, testId, value]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      id={idOverride}\n      isDisabled={isDisabled}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAA6BA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAGnEC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA8Cd,MAAMC,UAAU,GAAGC,IAAA,IAYI;EAAA,IAZH;IAClBC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ;IACRC,MAAM;IACNC;EACe,CAAC,GAAAb,IAAA;EAChB,MAAMc,oBAAoB,GAAGnB,WAAW,CACtCoB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEX;IAAG,CAAC,GAAAU,KAAA;IAAA,OACtBjB,IAAA,CAAAmB,WAAA;MACE,oBAAkBD,eAAgB;MAClC,WAASJ,MAAO;MAChBV,YAAY,EAAEA,YAAa;MAC3BG,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBM,QAAQ,EAAEA,QAAS;MACnBE,KAAK,EAAEA,KAAM;MAAAZ,QAAA,EAEZA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEC,YAAY,EAAEQ,YAAY,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,KAAK,CAChE,CAAC;EAED,OACEf,IAAA,CAACF,KAAK;IACJO,YAAY,EAAEA,YAAa;IAC3Be,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBf,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbM,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAG1B,IAAI,CAACK,UAAU,CAAC;AAC3CqB,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIrB,UAAU"}

package/dist/SearchField.js

@@ -1,5 +1,6 @@
 import _InputBase from "@mui/material/InputBase";
 import _InputAdornment from "@mui/material/InputAdornment";
+import _IconButton from "@mui/material/IconButton";
 /*!
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -16,7 +17,6 @@ import { useState, useEffect } from "react";
 import { forwardRef, memo, useCallback } from "react";
 import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
 import { Field } from "./Field.js";
-import { Button } from "./Button.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SearchField = forwardRef((_ref, ref) => {
   let {
@@ -25,11 +25,13 @@ const SearchField = forwardRef((_ref, ref) => {
     id: idOverride,
     isDisabled = false,
     label,
+    name: nameOverride,
     onChange: onChangeProp,
     onFocus,
     onBlur,
     onClear: onClearProp,
     placeholder,
+    testId,
     value: controlledValue
   } = _ref;
   const [uncontrolledValue, setUncontrolledValue] = useState("");
@@ -55,23 +57,22 @@ const SearchField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
+      "data-se": testId,
       endAdornment: uncontrolledValue && _jsx(_InputAdornment, {
         position: "end",
-        children: _jsx(Button, {
-          ariaLabel: "Clear",
-          isDisabled: isDisabled,
-          label: "",
+        children: _jsx(_IconButton, {
+          "aria-label": "Clear",
+          disabled: isDisabled,
           onClick: onClear,
           size: "small",
-          startIcon: _jsx(CloseCircleFilledIcon, {}),
-          variant: "floating"
+          children: _jsx(CloseCircleFilledIcon, {})
         })
       }),
       id: id,
-      name: id,
+      name: nameOverride ?? id,
+      onBlur: onBlur,
       onChange: onChange,
       onFocus: onFocus,
-      onBlur: onBlur,
       placeholder: placeholder,
       ref: ref,
       startAdornment: _jsx(_InputAdornment, {
@@ -81,7 +82,7 @@ const SearchField = forwardRef((_ref, ref) => {
       type: "search",
       value: controlledValue === undefined ? uncontrolledValue : controlledValue
     });
-  }, [autoCompleteType, hasInitialFocus, isDisabled, onClear, onChange, onFocus, onBlur, placeholder, ref, controlledValue, uncontrolledValue]);
+  }, [autoCompleteType, controlledValue, hasInitialFocus, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, testId, uncontrolledValue]);
   return _jsx(Field, {
     fieldType: "single",
     hasVisibleLabel: false,

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["useState","useEffect","forwardRef","memo","useCallback","CloseCircleFilledIcon","SearchIcon","Field","Button","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","hasInitialFocus","id","idOverride","isDisabled","label","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","value","controlledValue","uncontrolledValue","setUncontrolledValue","event","currentTarget","undefined","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","ariaLabel","onClick","size","startIcon","variant","name","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 { useState, useEffect } from \"react\";\nimport { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { Button } from \"./Button\";\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   * 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   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n};\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      value: controlledValue,\n    },\n    ref\n  ) => {\n    const [uncontrolledValue, setUncontrolledValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          setUncontrolledValue(event.currentTarget.value);\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      setUncontrolledValue(\"\");\n      onClearProp?.();\n    }, [onClearProp]);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setUncontrolledValue(controlledValue);\n      }\n    }, [controlledValue]);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          endAdornment={\n            uncontrolledValue && (\n              <InputAdornment position=\"end\">\n                <Button\n                  ariaLabel=\"Clear\"\n                  isDisabled={isDisabled}\n                  label=\"\"\n                  onClick={onClear}\n                  size=\"small\"\n                  startIcon={<CloseCircleFilledIcon />}\n                  variant=\"floating\"\n                />\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n          value={\n            controlledValue === undefined ? uncontrolledValue : controlledValue\n          }\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        isDisabled,\n        onClear,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        ref,\n        controlledValue,\n        uncontrolledValue,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}
+{"version":3,"file":"SearchField.js","names":["useState","useEffect","forwardRef","memo","useCallback","CloseCircleFilledIcon","SearchIcon","Field","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","hasInitialFocus","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","value","controlledValue","uncontrolledValue","setUncontrolledValue","event","currentTarget","undefined","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","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 { useState, useEffect } from \"react\";\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\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   * 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   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the 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   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & SeleniumProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      value: controlledValue,\n    },\n    ref\n  ) => {\n    const [uncontrolledValue, setUncontrolledValue] = useState(\"\");\n\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          setUncontrolledValue(event.currentTarget.value);\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      setUncontrolledValue(\"\");\n      onClearProp?.();\n    }, [onClearProp]);\n\n    useEffect(() => {\n      if (controlledValue !== undefined) {\n        setUncontrolledValue(controlledValue);\n      }\n    }, [controlledValue]);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            uncontrolledValue && (\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          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          type=\"search\"\n          value={\n            controlledValue === undefined ? uncontrolledValue : controlledValue\n          }\n        />\n      ),\n      [\n        autoCompleteType,\n        controlledValue,\n        hasInitialFocus,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n        uncontrolledValue,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}

package/dist/Select.js

@@ -1,5 +1,6 @@
 import _Select from "@mui/material/Select";
 import _MenuItem from "@mui/material/MenuItem";
+import _Checkbox from "@mui/material/Checkbox";
 import _ListSubheader from "@mui/material/ListSubheader";
 import _Box from "@mui/material/Box";
 import _Chip from "@mui/material/Chip";
@@ -16,7 +17,6 @@ import _Chip from "@mui/material/Chip";
  */
 
 import { forwardRef, memo, useCallback, useState } from "react";
-import { Checkbox } from "./Checkbox.js";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -29,10 +29,12 @@ const Select = forwardRef((_ref, ref) => {
     isMultiSelect = false,
     isOptional = false,
     label,
+    name: nameOverride,
     onBlur,
     onChange: onChangeProp,
     onFocus,
     value,
+    testId,
     options
   } = _ref;
   if (typeof value === "undefined") {
@@ -96,16 +98,17 @@ const Select = forwardRef((_ref, ref) => {
     }
     return _jsxs(_MenuItem, {
       value: option.value,
-      children: [isMultiSelect && _jsx(Checkbox, {
-        isDefaultChecked: selectedValue.includes(option.value)
+      children: [isMultiSelect && _jsx(_Checkbox, {
+        checked: selectedValue.includes(option.value)
       }), option.text]
     }, option.value);
   });
   const renderFieldComponent = useCallback(() => _jsx(_Select, {
     children: children,
+    "data-se": testId,
     id: idOverride,
     multiple: isMultiSelect,
-    name: idOverride,
+    name: nameOverride ?? idOverride,
     onBlur: onBlur,
     onChange: onChange,
     onFocus: onFocus,
@@ -113,7 +116,7 @@ const Select = forwardRef((_ref, ref) => {
     renderValue: isMultiSelect ? renderValue : undefined,
     value: selectedValue,
     labelId: label
-  }), [idOverride, isMultiSelect, onBlur, onChange, onFocus, ref, children, renderValue, selectedValue, label]);
+  }), [children, idOverride, isMultiSelect, label, nameOverride, onBlur, onChange, onFocus, ref, renderValue, selectedValue, testId]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["forwardRef","memo","useCallback","useState","Checkbox","Field","jsx","_jsx","jsxs","_jsxs","Select","_ref","ref","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","onBlur","onChange","onChangeProp","onFocus","value","options","selectedValue","setSelectedValue","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","undefined","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","isDefaultChecked","includes","renderFieldComponent","_Select","multiple","name","labelId","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, forwardRef, memo, useCallback, useState } from \"react\";\nimport {\n  Box,\n  Chip,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectProps = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the Select\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\n  /**\n   * If `true`, the Select is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  isMultiSelect?: boolean;\n  /**\n   * If `true`, the Select is optional\n   */\n  isOptional?: boolean;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: string | string[];\n};\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiSelect = false,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      value,\n      options,\n    },\n    ref\n  ) => {\n    // If there's no value set, we set it to a blank string (if it's a single-select)\n    // or an empty array (if it's a multi-select)\n    if (typeof value === \"undefined\") {\n      value = isMultiSelect ? [] : \"\";\n    }\n\n    const [selectedValue, setSelectedValue] = useState<string | string[]>(\n      value\n    );\n\n    const onChange = useCallback(\n      (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {\n        const {\n          target: { value },\n        } = event;\n\n        // Set the field value, with some additional logic to handle array values\n        // for multi-selects\n        if (isMultiSelect) {\n          setSelectedValue(\n            typeof value === \"string\" ? value.split(\",\") : value\n          );\n        } else {\n          setSelectedValue(value);\n        }\n\n        // Trigger the onChange event, if one has been passed\n        if (onChangeProp) {\n          onChangeProp(event, child);\n        }\n      },\n      [isMultiSelect, onChangeProp, setSelectedValue]\n    );\n\n    // Normalize the options array to accommodate the various\n    // data types that might be passed\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        return {\n          text: option.text,\n          value: option.value || option.text,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const renderValue = useCallback(\n      (selected: string | string[]) => {\n        // If the selected value isn't an array, then we don't need to display\n        // chips and should fall back to the default render behavior\n        if (typeof selected === \"string\") {\n          return undefined;\n        }\n\n        // Convert the selected options array into <Chip>s\n        const renderedChips = selected\n          .map((item: string) => {\n            const selectedOption = normalizedOptions.find(\n              (option) => option.value === item\n            );\n\n            if (!selectedOption) {\n              return null;\n            }\n\n            return <Chip key={item} label={selectedOption.text} />;\n          })\n          .filter(Boolean);\n\n        if (renderedChips.length === 0) {\n          return null;\n        }\n\n        // We need the <Box> to surround the <Chip>s for\n        // proper styling\n        return <Box>{renderedChips}</Box>;\n      },\n      [normalizedOptions]\n    );\n\n    // Convert the options into the ReactNode children\n    // that will populate the <Select>\n    const children = normalizedOptions.map((option) => {\n      if (option.type === \"heading\") {\n        return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n      }\n\n      return (\n        <MenuItem key={option.value} value={option.value}>\n          {isMultiSelect && (\n            <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />\n          )}\n          {option.text}\n        </MenuItem>\n      );\n    });\n\n    const renderFieldComponent = useCallback(\n      () => (\n        <MuiSelect\n          children={children}\n          id={idOverride}\n          multiple={isMultiSelect}\n          name={idOverride}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          renderValue={isMultiSelect ? renderValue : undefined}\n          value={selectedValue}\n          labelId={label}\n        />\n      ),\n      [\n        idOverride,\n        isMultiSelect,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        children,\n        renderValue,\n        selectedValue,\n        label,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["forwardRef","memo","useCallback","useState","Field","jsx","_jsx","jsxs","_jsxs","Select","_ref","ref","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","value","testId","options","selectedValue","setSelectedValue","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","undefined","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","renderFieldComponent","_Select","multiple","labelId","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, forwardRef, memo, useCallback, useState } from \"react\";\nimport {\n  Box,\n  Chip,\n  Checkbox as MuiCheckbox,\n  ListSubheader,\n  MenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nexport type SelectProps = {\n  /**\n   * The error message for the Select\n   */\n  errorMessage?: string;\n  /**\n   * The hint text for the Select\n   */\n  hint?: string;\n  /**\n   * The id attribute of the Select\n   */\n  id?: string;\n  /**\n   * If `true`, the Select is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  isMultiSelect?: boolean;\n  /**\n   * If `true`, the Select is optional\n   */\n  isOptional?: boolean;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: string | string[];\n} & SeleniumProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst Select = forwardRef<HTMLSelectElement, SelectProps>(\n  (\n    {\n      errorMessage,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiSelect = false,\n      isOptional = false,\n      label,\n      name: nameOverride,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      value,\n      testId,\n      options,\n    },\n    ref\n  ) => {\n    // If there's no value set, we set it to a blank string (if it's a single-select)\n    // or an empty array (if it's a multi-select)\n    if (typeof value === \"undefined\") {\n      value = isMultiSelect ? [] : \"\";\n    }\n\n    const [selectedValue, setSelectedValue] = useState<string | string[]>(\n      value\n    );\n\n    const onChange = useCallback(\n      (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {\n        const {\n          target: { value },\n        } = event;\n\n        // Set the field value, with some additional logic to handle array values\n        // for multi-selects\n        if (isMultiSelect) {\n          setSelectedValue(\n            typeof value === \"string\" ? value.split(\",\") : value\n          );\n        } else {\n          setSelectedValue(value);\n        }\n\n        // Trigger the onChange event, if one has been passed\n        if (onChangeProp) {\n          onChangeProp(event, child);\n        }\n      },\n      [isMultiSelect, onChangeProp, setSelectedValue]\n    );\n\n    // Normalize the options array to accommodate the various\n    // data types that might be passed\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        return {\n          text: option.text,\n          value: option.value || option.text,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const renderValue = useCallback(\n      (selected: string | string[]) => {\n        // If the selected value isn't an array, then we don't need to display\n        // chips and should fall back to the default render behavior\n        if (typeof selected === \"string\") {\n          return undefined;\n        }\n\n        // Convert the selected options array into <Chip>s\n        const renderedChips = selected\n          .map((item: string) => {\n            const selectedOption = normalizedOptions.find(\n              (option) => option.value === item\n            );\n\n            if (!selectedOption) {\n              return null;\n            }\n\n            return <Chip key={item} label={selectedOption.text} />;\n          })\n          .filter(Boolean);\n\n        if (renderedChips.length === 0) {\n          return null;\n        }\n\n        // We need the <Box> to surround the <Chip>s for\n        // proper styling\n        return <Box>{renderedChips}</Box>;\n      },\n      [normalizedOptions]\n    );\n\n    // Convert the options into the ReactNode children\n    // that will populate the <Select>\n    const children = normalizedOptions.map((option) => {\n      if (option.type === \"heading\") {\n        return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n      }\n\n      return (\n        <MenuItem key={option.value} value={option.value}>\n          {isMultiSelect && (\n            <MuiCheckbox checked={selectedValue.includes(option.value)} />\n          )}\n          {option.text}\n        </MenuItem>\n      );\n    });\n\n    const renderFieldComponent = useCallback(\n      () => (\n        <MuiSelect\n          children={children}\n          data-se={testId}\n          id={idOverride}\n          multiple={isMultiSelect}\n          name={nameOverride ?? idOverride}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n          renderValue={isMultiSelect ? renderValue : undefined}\n          value={selectedValue}\n          labelId={label}\n        />\n      ),\n      [\n        children,\n        idOverride,\n        isMultiSelect,\n        label,\n        nameOverride,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        renderValue,\n        selectedValue,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,UAAU,EAAEC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAAC,SAWlEC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA+Ed,MAAMC,MAAM,GAAGT,UAAU,CACvB,CAAAU,IAAA,EAiBEC,GAAG,KACA;EAAA,IAjBH;IACEC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,KAAK;IACLC,MAAM;IACNC;EACF,CAAC,GAAAlB,IAAA;EAKD,IAAI,OAAOgB,KAAK,KAAK,WAAW,EAAE;IAChCA,KAAK,GAAGT,aAAa,GAAG,EAAE,GAAG,EAAE;EACjC;EAEA,MAAM,CAACY,aAAa,EAAEC,gBAAgB,CAAC,GAAG3B,QAAQ,CAChDuB,KACF,CAAC;EAED,MAAMH,QAAQ,GAAGrB,WAAW,CAC1B,CAAC6B,KAA2C,EAAEC,KAAgB,KAAK;IACjE,MAAM;MACJC,MAAM,EAAE;QAAEP;MAAM;IAClB,CAAC,GAAGK,KAAK;IAIT,IAAId,aAAa,EAAE;MACjBa,gBAAgB,CACd,OAAOJ,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACQ,KAAK,CAAC,GAAG,CAAC,GAAGR,KACjD,CAAC;IACH,CAAC,MAAM;MACLI,gBAAgB,CAACJ,KAAK,CAAC;IACzB;IAGA,IAAIF,YAAY,EAAE;MAChBA,YAAY,CAACO,KAAK,EAAEC,KAAK,CAAC;IAC5B;EACF,CAAC,EACD,CAACf,aAAa,EAAEO,YAAY,EAAEM,gBAAgB,CAChD,CAAC;EAID,MAAMK,iBAAiB,GAAGP,OAAO,CAACQ,GAAG,CAAEC,MAAM,IAAK;IAChD,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;MAC9B,OAAO;QACLC,IAAI,EAAED,MAAM,CAACC,IAAI;QACjBZ,KAAK,EAAEW,MAAM,CAACX,KAAK,IAAIW,MAAM,CAACC,IAAI;QAClCC,IAAI,EAAEF,MAAM,CAACE,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG;MAChD,CAAC;IACH;IAEA,OAAO;MAAED,IAAI,EAAED,MAAM;MAAEX,KAAK,EAAEW,MAAM;MAAEE,IAAI,EAAE;IAAS,CAAC;EACxD,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGtC,WAAW,CAC5BuC,QAA2B,IAAK;IAG/B,IAAI,OAAOA,QAAQ,KAAK,QAAQ,EAAE;MAChC,OAAOC,SAAS;IAClB;IAGA,MAAMC,aAAa,GAAGF,QAAQ,CAC3BL,GAAG,CAAEQ,IAAY,IAAK;MACrB,MAAMC,cAAc,GAAGV,iBAAiB,CAACW,IAAI,CAC1CT,MAAM,IAAKA,MAAM,CAACX,KAAK,KAAKkB,IAC/B,CAAC;MAED,IAAI,CAACC,cAAc,EAAE;QACnB,OAAO,IAAI;MACb;MAEA,OAAOvC,IAAA,CAAAyC,KAAA;QAAiB5B,KAAK,EAAE0B,cAAc,CAACP;MAAK,GAAjCM,IAAmC,CAAC;IACxD,CAAC,CAAC,CACDI,MAAM,CAACC,OAAO,CAAC;IAElB,IAAIN,aAAa,CAACO,MAAM,KAAK,CAAC,EAAE;MAC9B,OAAO,IAAI;IACb;IAIA,OAAO5C,IAAA,CAAA6C,IAAA;MAAAC,QAAA,EAAMT;IAAa,CAAM,CAAC;EACnC,CAAC,EACD,CAACR,iBAAiB,CACpB,CAAC;EAID,MAAMiB,QAAQ,GAAGjB,iBAAiB,CAACC,GAAG,CAAEC,MAAM,IAAK;IACjD,IAAIA,MAAM,CAACE,IAAI,KAAK,SAAS,EAAE;MAC7B,OAAOjC,IAAA,CAAA+C,cAAA;QAAAD,QAAA,EAAkCf,MAAM,CAACC;MAAI,GAAzBD,MAAM,CAACC,IAAkC,CAAC;IACvE;IAEA,OACE9B,KAAA,CAAA8C,SAAA;MAA6B5B,KAAK,EAAEW,MAAM,CAACX,KAAM;MAAA0B,QAAA,GAC9CnC,aAAa,IACZX,IAAA,CAAAiD,SAAA;QAAaC,OAAO,EAAE3B,aAAa,CAAC4B,QAAQ,CAACpB,MAAM,CAACX,KAAK;MAAE,CAAE,CAC9D,EACAW,MAAM,CAACC,IAAI;IAAA,GAJCD,MAAM,CAACX,KAKZ,CAAC;EAEf,CAAC,CAAC;EAEF,MAAMgC,oBAAoB,GAAGxD,WAAW,CACtC,MACEI,IAAA,CAAAqD,OAAA;IACEP,QAAQ,EAAEA,QAAS;IACnB,WAASzB,MAAO;IAChBb,EAAE,EAAEC,UAAW;IACf6C,QAAQ,EAAE3C,aAAc;IACxBG,IAAI,EAAEC,YAAY,IAAIN,UAAW;IACjCO,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBd,GAAG,EAAEA,GAAI;IACT6B,WAAW,EAAEvB,aAAa,GAAGuB,WAAW,GAAGE,SAAU;IACrDhB,KAAK,EAAEG,aAAc;IACrBgC,OAAO,EAAE1C;EAAM,CAChB,CACF,EACD,CACEiC,QAAQ,EACRrC,UAAU,EACVE,aAAa,EACbE,KAAK,EACLE,YAAY,EACZC,MAAM,EACNC,QAAQ,EACRE,OAAO,EACPd,GAAG,EACH6B,WAAW,EACXX,aAAa,EACbF,MAAM,CAEV,CAAC;EAED,OACErB,IAAA,CAACF,KAAK;IACJQ,YAAY,EAAEA,YAAa;IAC3BkD,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACflD,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbuC,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMM,cAAc,GAAG/D,IAAI,CAACQ,MAAM,CAAC;AACnCuD,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIvD,MAAM"}

package/dist/SeleniumProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=SeleniumProps.js.map

package/dist/SeleniumProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeleniumProps.js","names":[],"sources":["../src/SeleniumProps.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport type SeleniumProps = {\n  /**\n   * This prop puts a `data` attribute on an HTML element in this component with the value provided.\n   *\n   * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.\n   */\n  testId?: string;\n};\n"],"mappings":""}

package/dist/Status.js

@@ -16,15 +16,17 @@ export const statusSeverityValues = ["default", "error", "success", "warning"];
 export const statusVariantValues = ["lamp", "pill"];
 export const Status = _ref => {
   let {
-    severity,
     label,
+    severity,
+    testId,
     variant = "lamp"
   } = _ref;
   const muiProps = useMuiProps();
   return _jsx(_Chip, {
     ...muiProps,
-    label: label,
     color: severity,
+    "data-se": testId,
+    label: label,
     variant: variant
   });
 };

package/dist/Status.js.map

@@ -1 +1 @@
-{"version":3,"file":"Status.js","names":["useMuiProps","jsx","_jsx","statusSeverityValues","statusVariantValues","Status","_ref","severity","label","variant","muiProps","_Chip","color"],"sources":["../src/Status.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 { Chip } from \"@mui/material\";\n\nimport { useMuiProps } from \"./MuiPropsContext\";\n\nexport const statusSeverityValues = [\n  \"default\",\n  \"error\",\n  \"success\",\n  \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n  /**\n   * The text content of the Status\n   */\n  label: string;\n  /**\n   * Determine the color and icon of the Status\n   */\n  severity: (typeof statusSeverityValues)[number];\n  /**\n   * The style of the Status indicator\n   */\n  variant?: (typeof statusVariantValues)[number];\n};\n\nexport const Status = ({ severity, label, variant = \"lamp\" }: StatusProps) => {\n  const muiProps = useMuiProps();\n\n  return (\n    <Chip {...muiProps} label={label} color={severity} variant={variant} />\n  );\n};\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAcSA,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpB,OAAO,MAAMC,oBAAoB,GAAG,CAClC,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,CACD;AACV,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAAwD;EAAA,IAAvD;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO,GAAG;EAAoB,CAAC,GAAAH,IAAA;EACvE,MAAMI,QAAQ,GAAGV,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAS,KAAA;IAAA,GAAUD,QAAQ;IAAEF,KAAK,EAAEA,KAAM;IAACI,KAAK,EAAEL,QAAS;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC;AAE3E,CAAC"}
+{"version":3,"file":"Status.js","names":["useMuiProps","jsx","_jsx","statusSeverityValues","statusVariantValues","Status","_ref","label","severity","testId","variant","muiProps","_Chip","color"],"sources":["../src/Status.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 { Chip } from \"@mui/material\";\n\nimport { useMuiProps } from \"./MuiPropsContext\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport const statusSeverityValues = [\n  \"default\",\n  \"error\",\n  \"success\",\n  \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n  /**\n   * The text content of the Status\n   */\n  label: string;\n  /**\n   * Determine the color and icon of the Status\n   */\n  severity: (typeof statusSeverityValues)[number];\n  /**\n   * The style of the Status indicator\n   */\n  variant?: (typeof statusVariantValues)[number];\n} & SeleniumProps;\n\nexport const Status = ({\n  label,\n  severity,\n  testId,\n  variant = \"lamp\",\n}: StatusProps) => {\n  const muiProps = useMuiProps();\n\n  return (\n    <Chip\n      {...muiProps}\n      color={severity}\n      data-se={testId}\n      label={label}\n      variant={variant}\n    />\n  );\n};\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAcSA,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpB,OAAO,MAAMC,oBAAoB,GAAG,CAClC,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,CACD;AACV,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAKH;EAAA,IALI;IACrBC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,OAAO,GAAG;EACC,CAAC,GAAAJ,IAAA;EACZ,MAAMK,QAAQ,GAAGX,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAU,KAAA;IAAA,GACMD,QAAQ;IACZE,KAAK,EAAEL,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC"}

package/dist/Tabs.js

@@ -11,26 +11,33 @@ import _Tab from "@mui/material/Tab";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { memo, useCallback, useState } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 import { TabList as MuiTabList, TabPanel as MuiTabPanel, TabContext as MuiTabContext } from "@mui/lab";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = _ref => {
   let {
     ariaLabel,
-    initialValue = "0",
-    tabs
+    initialValue,
+    tabs,
+    value
   } = _ref;
-  const [tabState, setTabState] = useState(initialValue);
+  const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
   const onChange = useCallback((_event, newState) => {
     setTabState(newState);
   }, []);
+  useEffect(() => {
+    if (value !== undefined) {
+      setTabState(value);
+    }
+  }, [value]);
   return _jsxs(MuiTabContext, {
     value: tabState,
     children: [_jsx(MuiTabList, {
       onChange: onChange,
       "aria-label": ariaLabel,
       children: tabs.map((tab, index) => _jsx(_Tab, {
+        "data-se": tab.testId,
         disabled: tab.isDisabled,
         icon: tab.startIcon,
         label: tab.label,

package/dist/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","names":["React","memo","useCallback","useState","TabList","MuiTabList","TabPanel","MuiTabPanel","TabContext","MuiTabContext","jsx","_jsx","jsxs","_jsxs","Tabs","_ref","ariaLabel","initialValue","tabs","tabState","setTabState","onChange","_event","newState","value","children","map","tab","index","_Tab","disabled","isDisabled","icon","startIcon","label","toString","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport React, {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\nimport { Tab as MuiTab } from \"@mui/material\";\nimport {\n  TabList as MuiTabList,\n  TabPanel as MuiTabPanel,\n  TabContext as MuiTabContext,\n} from \"@mui/lab\";\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n};\n\nexport type TabsProps = {\n  /**\n   * The ARIA label for the full Tabs group\n   */\n  ariaLabel?: string;\n  /**\n   * The value of the Tab that should be selected by default\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n};\n\nconst Tabs = ({ ariaLabel, initialValue = \"0\", tabs }: TabsProps) => {\n  const [tabState, setTabState] = useState(initialValue);\n\n  const onChange = useCallback(\n    (_event: React.SyntheticEvent, newState: string) => {\n      setTabState(newState);\n    },\n    []\n  );\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList onChange={onChange} aria-label={ariaLabel}>\n        {tabs.map((tab, index) => (\n          <MuiTab\n            disabled={tab.isDisabled}\n            icon={tab.startIcon}\n            label={tab.label}\n            value={tab.value ? tab.value : index.toString()}\n            key={tab.value ? tab.value : index.toString()}\n          />\n        ))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAGVC,IAAI,EACJC,WAAW,EACXC,QAAQ,QACH,OAAO;AAEd,SACEC,OAAO,IAAIC,UAAU,EACrBC,QAAQ,IAAIC,WAAW,EACvBC,UAAU,IAAIC,aAAa,QACtB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAwClB,MAAMC,IAAI,GAAGC,IAAA,IAAwD;EAAA,IAAvD;IAAEC,SAAS;IAAEC,YAAY,GAAG,GAAG;IAAEC;EAAgB,CAAC,GAAAH,IAAA;EAC9D,MAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGjB,QAAQ,CAACc,YAAY,CAAC;EAEtD,MAAMI,QAAQ,GAAGnB,WAAW,CAC1B,CAACoB,MAA4B,EAAEC,QAAgB,KAAK;IAClDH,WAAW,CAACG,QAAQ,CAAC;EACvB,CAAC,EACD,EACF,CAAC;EAED,OACEV,KAAA,CAACJ,aAAa;IAACe,KAAK,EAAEL,QAAS;IAAAM,QAAA,GAC7Bd,IAAA,CAACN,UAAU;MAACgB,QAAQ,EAAEA,QAAS;MAAC,cAAYL,SAAU;MAAAS,QAAA,EACnDP,IAAI,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBjB,IAAA,CAAAkB,IAAA;QACEC,QAAQ,EAAEH,GAAG,CAACI,UAAW;QACzBC,IAAI,EAAEL,GAAG,CAACM,SAAU;QACpBC,KAAK,EAAEP,GAAG,CAACO,KAAM;QACjBV,KAAK,EAAEG,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC;MAAE,GAC3CR,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC,CAC7C,CACF;IAAC,CACQ,CAAC,EACZjB,IAAI,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBjB,IAAA,CAACJ,WAAW;MACViB,KAAK,EAAEG,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC,CAAE;MAAAV,QAAA,EAG/CE,GAAG,CAACF;IAAQ,GAFRE,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC,CAGjC,CACd,CAAC;EAAA,CACW,CAAC;AAEpB,CAAC;AAED,MAAMC,YAAY,GAAGnC,IAAI,CAACa,IAAI,CAAC;AAC/BsB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAItB,IAAI"}
+{"version":3,"file":"Tabs.js","names":["React","memo","useCallback","useEffect","useState","TabList","MuiTabList","TabPanel","MuiTabPanel","TabContext","MuiTabContext","jsx","_jsx","jsxs","_jsxs","Tabs","_ref","ariaLabel","initialValue","tabs","value","tabState","setTabState","onChange","_event","newState","undefined","children","map","tab","index","_Tab","testId","disabled","isDisabled","icon","startIcon","label","toString","MemoizedTabs","displayName"],"sources":["../src/Tabs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport React, {\n  ReactElement,\n  ReactNode,\n  memo,\n  useCallback,\n  useEffect,\n  useState,\n} from \"react\";\nimport { Tab as MuiTab } from \"@mui/material\";\nimport {\n  TabList as MuiTabList,\n  TabPanel as MuiTabPanel,\n  TabContext as MuiTabContext,\n} from \"@mui/lab\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TabItemProps = {\n  /**\n   * The content of the Tab itself\n   */\n  children: ReactNode;\n  /**\n   * If `true`, the TabItem is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * The label text for the TabItem\n   */\n  label: string;\n  /**\n   * An optional icon to display at the start of the TabItem\n   */\n  startIcon?: ReactElement;\n  /**\n   * The value associated with the TabItem\n   */\n  value?: string;\n} & SeleniumProps;\n\nexport type TabsProps = {\n  /**\n   * The ARIA label for the full Tabs group\n   */\n  ariaLabel?: string;\n  /**\n   * @deprecated please use the `value` prop instead\n   * When `value` is provided, `initialValue` isn't used.\n   */\n  initialValue?: string;\n  /**\n   * The TabItems to be included in the Tabs group\n   */\n  tabs: TabItemProps[];\n  /**\n   * Identifier for the selected tab.\n   */\n  value?: string;\n};\n\nconst Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {\n  const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n\n  const onChange = useCallback(\n    (_event: React.SyntheticEvent, newState: string) => {\n      setTabState(newState);\n    },\n    []\n  );\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setTabState(value);\n    }\n  }, [value]);\n\n  return (\n    <MuiTabContext value={tabState}>\n      <MuiTabList onChange={onChange} aria-label={ariaLabel}>\n        {tabs.map((tab, index) => (\n          <MuiTab\n            data-se={tab.testId}\n            disabled={tab.isDisabled}\n            icon={tab.startIcon}\n            label={tab.label}\n            value={tab.value ? tab.value : index.toString()}\n            key={tab.value ? tab.value : index.toString()}\n          />\n        ))}\n      </MuiTabList>\n      {tabs.map((tab, index) => (\n        <MuiTabPanel\n          value={tab.value ? tab.value : index.toString()}\n          key={tab.value ? tab.value : index.toString()}\n        >\n          {tab.children}\n        </MuiTabPanel>\n      ))}\n    </MuiTabContext>\n  );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAGVC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,QAAQ,QACH,OAAO;AAEd,SACEC,OAAO,IAAIC,UAAU,EACrBC,QAAQ,IAAIC,WAAW,EACvBC,UAAU,IAAIC,aAAa,QACtB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA8ClB,MAAMC,IAAI,GAAGC,IAAA,IAAyD;EAAA,IAAxD;IAAEC,SAAS;IAAEC,YAAY;IAAEC,IAAI;IAAEC;EAAiB,CAAC,GAAAJ,IAAA;EAC/D,MAAM,CAACK,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACc,YAAY,IAAIE,KAAK,IAAI,GAAG,CAAC;EAEtE,MAAMG,QAAQ,GAAGrB,WAAW,CAC1B,CAACsB,MAA4B,EAAEC,QAAgB,KAAK;IAClDH,WAAW,CAACG,QAAQ,CAAC;EACvB,CAAC,EACD,EACF,CAAC;EAEDtB,SAAS,CAAC,MAAM;IACd,IAAIiB,KAAK,KAAKM,SAAS,EAAE;MACvBJ,WAAW,CAACF,KAAK,CAAC;IACpB;EACF,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,OACEN,KAAA,CAACJ,aAAa;IAACU,KAAK,EAAEC,QAAS;IAAAM,QAAA,GAC7Bf,IAAA,CAACN,UAAU;MAACiB,QAAQ,EAAEA,QAAS;MAAC,cAAYN,SAAU;MAAAU,QAAA,EACnDR,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAAAmB,IAAA;QACE,WAASF,GAAG,CAACG,MAAO;QACpBC,QAAQ,EAAEJ,GAAG,CAACK,UAAW;QACzBC,IAAI,EAAEN,GAAG,CAACO,SAAU;QACpBC,KAAK,EAAER,GAAG,CAACQ,KAAM;QACjBjB,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC;MAAE,GAC3CT,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAC7C,CACF;IAAC,CACQ,CAAC,EACZnB,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAACJ,WAAW;MACVY,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAAE;MAAAX,QAAA,EAG/CE,GAAG,CAACF;IAAQ,GAFRE,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAGjC,CACd,CAAC;EAAA,CACW,CAAC;AAEpB,CAAC;AAED,MAAMC,YAAY,GAAGtC,IAAI,CAACc,IAAI,CAAC;AAC/BwB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIxB,IAAI"}

package/dist/Tag.js

@@ -20,7 +20,8 @@ const Tag = _ref => {
     isDisabled,
     label,
     onClick,
-    onRemove
+    onRemove,
+    testId
   } = _ref;
   const {
     chipElementType
@@ -30,12 +31,13 @@ const Tag = _ref => {
     "aria-disabled": isDisabled,
     clickable: onClick ? true : false,
     component: chipElementType,
+    "data-se": testId,
     disabled: isDisabled,
     icon: icon,
     label: label,
     onClick: onClick,
     onDelete: onRemove
-  }), [chipElementType, icon, isDisabled, label, onClick, onRemove]);
+  }), [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]);
   return _jsx(MuiPropsContext.Consumer, {
     children: renderTag
   });

package/dist/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","TagListContext","MuiPropsContext","jsx","_jsx","Tag","_ref","icon","isDisabled","label","onClick","onRemove","chipElementType","renderTag","muiProps","_Chip","clickable","component","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.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 { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\n\nexport type TagProps = {\n  icon?: ReactElement;\n  isDisabled?: boolean;\n  /**\n   * The label text for the Tag\n   */\n  label: string;\n  /**\n   * Callback fired when the Tag is clicked\n   */\n  onClick?: MuiChipProps[\"onClick\"];\n  /**\n   * Callback fired when the remove button of the Tag is clicked\n   */\n  onRemove?: MuiChipProps[\"onDelete\"];\n};\n\nconst Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {\n  const { chipElementType } = useContext(TagListContext);\n\n  const renderTag = useCallback(\n    (muiProps) => (\n      <MuiChip\n        {...muiProps}\n        aria-disabled={isDisabled}\n        clickable={onClick ? true : false}\n        component={chipElementType}\n        disabled={isDisabled}\n        icon={icon}\n        label={label}\n        onClick={onClick}\n        onDelete={onRemove}\n      />\n    ),\n    [chipElementType, icon, isDisabled, label, onClick, onRemove]\n  );\n\n  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAAC,SAC3DC,cAAc;AAAA,SACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBxB,MAAMC,GAAG,GAAGC,IAAA,IAA8D;EAAA,IAA7D;IAAEC,IAAI;IAAEC,UAAU;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAmB,CAAC,GAAAL,IAAA;EACnE,MAAM;IAAEM;EAAgB,CAAC,GAAGZ,UAAU,CAACC,cAAc,CAAC;EAEtD,MAAMY,SAAS,GAAGd,WAAW,CAC1Be,QAAQ,IACPV,IAAA,CAAAW,KAAA;IAAA,GACMD,QAAQ;IACZ,iBAAeN,UAAW;IAC1BQ,SAAS,EAAEN,OAAO,GAAG,IAAI,GAAG,KAAM;IAClCO,SAAS,EAAEL,eAAgB;IAC3BM,QAAQ,EAAEV,UAAW;IACrBD,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBS,QAAQ,EAAER;EAAS,CACpB,CACF,EACD,CAACC,eAAe,EAAEL,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,CAC9D,CAAC;EAED,OAAOP,IAAA,CAACF,eAAe,CAACkB,QAAQ;IAAAC,QAAA,EAAER;EAAS,CAA2B,CAAC;AACzE,CAAC;AAED,MAAMS,WAAW,GAAGxB,IAAI,CAACO,GAAG,CAAC;AAC7BiB,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIjB,GAAG"}
+{"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","TagListContext","MuiPropsContext","jsx","_jsx","Tag","_ref","icon","isDisabled","label","onClick","onRemove","testId","chipElementType","renderTag","muiProps","_Chip","clickable","component","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.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 { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TagProps = {\n  icon?: ReactElement;\n  isDisabled?: boolean;\n  /**\n   * The label text for the Tag\n   */\n  label: string;\n  /**\n   * Callback fired when the Tag is clicked\n   */\n  onClick?: MuiChipProps[\"onClick\"];\n  /**\n   * Callback fired when the remove button of the Tag is clicked\n   */\n  onRemove?: MuiChipProps[\"onDelete\"];\n} & SeleniumProps;\n\nconst Tag = ({\n  icon,\n  isDisabled,\n  label,\n  onClick,\n  onRemove,\n  testId,\n}: TagProps) => {\n  const { chipElementType } = useContext(TagListContext);\n\n  const renderTag = useCallback(\n    (muiProps) => (\n      <MuiChip\n        {...muiProps}\n        aria-disabled={isDisabled}\n        clickable={onClick ? true : false}\n        component={chipElementType}\n        data-se={testId}\n        disabled={isDisabled}\n        icon={icon}\n        label={label}\n        onClick={onClick}\n        onDelete={onRemove}\n      />\n    ),\n    [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]\n  );\n\n  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAAC,SAC3DC,cAAc;AAAA,SACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoBxB,MAAMC,GAAG,GAAGC,IAAA,IAOI;EAAA,IAPH;IACXC,IAAI;IACJC,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC;EACQ,CAAC,GAAAN,IAAA;EACT,MAAM;IAAEO;EAAgB,CAAC,GAAGb,UAAU,CAACC,cAAc,CAAC;EAEtD,MAAMa,SAAS,GAAGf,WAAW,CAC1BgB,QAAQ,IACPX,IAAA,CAAAY,KAAA;IAAA,GACMD,QAAQ;IACZ,iBAAeP,UAAW;IAC1BS,SAAS,EAAEP,OAAO,GAAG,IAAI,GAAG,KAAM;IAClCQ,SAAS,EAAEL,eAAgB;IAC3B,WAASD,MAAO;IAChBO,QAAQ,EAAEX,UAAW;IACrBD,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBU,QAAQ,EAAET;EAAS,CACpB,CACF,EACD,CAACE,eAAe,EAAEN,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,CACtE,CAAC;EAED,OAAOR,IAAA,CAACF,eAAe,CAACmB,QAAQ;IAAAC,QAAA,EAAER;EAAS,CAA2B,CAAC;AACzE,CAAC;AAED,MAAMS,WAAW,GAAGzB,IAAI,CAACO,GAAG,CAAC;AAC7BkB,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIlB,GAAG"}