@okta/odyssey-react-mui 1.0.2 → 1.2.0

package/dist/OdysseyThemeProvider.js

@@ -1,4 +1,3 @@
-import _ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
 /*!
  * 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.")
@@ -22,21 +21,23 @@ const OdysseyThemeProvider = _ref => {
   let {
     children,
     designTokensOverride,
+    shadowRootElement,
     themeOverride
   } = _ref;
   const odysseyTokens = useMemo(() => ({
     ...Tokens,
     ...designTokensOverride
   }), [designTokensOverride]);
-  const odysseyTheme = useMemo(() => createOdysseyMuiTheme(odysseyTokens), [odysseyTokens]);
+  const odysseyTheme = useMemo(() => createOdysseyMuiTheme({
+    odysseyTokens,
+    shadowRootElement
+  }), [odysseyTokens, shadowRootElement]);
   const customOdysseyTheme = useMemo(() => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)), [odysseyTheme, themeOverride]);
   return _jsx(MuiThemeProvider, {
     theme: customOdysseyTheme ?? odysseyTheme,
-    children: _jsx(_ScopedCssBaseline, {
-      children: _jsx(OdysseyDesignTokensContext.Provider, {
-        value: odysseyTokens,
-        children: children
-      })
+    children: _jsx(OdysseyDesignTokensContext.Provider, {
+      value: odysseyTokens,
+      children: children
     })
   });
 };

package/dist/OdysseyThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","_ref","children","designTokensOverride","themeOverride","odysseyTokens","odysseyTheme","customOdysseyTheme","theme","_ScopedCssBaseline","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ScopedCssBaseline, ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  themeOverride?: ThemeOptions;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () => createOdysseyMuiTheme(odysseyTokens),\n    [odysseyTokens]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <ScopedCssBaseline>\n        <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n          {children}\n        </OdysseyDesignTokensContext.Provider>\n      </ScopedCssBaseline>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAQnC,MAAMC,oBAAoB,GAAGC,IAAA,IAII;EAAA,IAJH;IAC5BC,QAAQ;IACRC,oBAAoB;IACpBC;EACyB,CAAC,GAAAH,IAAA;EAC1B,MAAMI,aAAa,GAAGZ,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGO;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMG,YAAY,GAAGb,OAAO,CAC1B,MAAME,qBAAqB,CAACU,aAAa,CAAC,EAC1C,CAACA,aAAa,CAChB,CAAC;EAED,MAAME,kBAAkB,GAAGd,OAAO,CAChC,MAAMW,aAAa,IAAIf,WAAW,CAACK,SAAS,CAACY,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEL,IAAA,CAACR,gBAAgB;IAACiB,KAAK,EAAED,kBAAkB,IAAID,YAAa;IAAAJ,QAAA,EAC1DH,IAAA,CAAAU,kBAAA;MAAAP,QAAA,EACEH,IAAA,CAACF,0BAA0B,CAACa,QAAQ;QAACC,KAAK,EAAEN,aAAc;QAAAH,QAAA,EACvDA;MAAQ,CAC0B;IAAC,CACrB;EAAC,CACJ,CAAC;AAEvB,CAAC;AAED,MAAMU,4BAA4B,GAAGpB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASY,4BAA4B,IAAIZ,oBAAoB"}
+{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","_ref","children","designTokensOverride","shadowRootElement","themeOverride","odysseyTokens","odysseyTheme","customOdysseyTheme","theme","Provider","value","MemoizedOdysseyThemeProvider"],"sources":["../src/OdysseyThemeProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  createTheme,\n  ThemeProvider as MuiThemeProvider,\n} from \"@mui/material/styles\";\nimport { memo, ReactNode, useMemo } from \"react\";\n\nimport { ThemeOptions } from \"@mui/material\";\nimport { deepmerge } from \"@mui/utils\";\nimport { createOdysseyMuiTheme, DesignTokensOverride } from \"./theme\";\nimport * as Tokens from \"@okta/odyssey-design-tokens\";\nimport { OdysseyDesignTokensContext } from \"./OdysseyDesignTokensContext\";\n\nexport type OdysseyThemeProviderProps = {\n  children: ReactNode;\n  designTokensOverride?: DesignTokensOverride;\n  shadowRootElement?: HTMLDivElement;\n  themeOverride?: ThemeOptions;\n};\n\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowRootElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride]\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowRootElement,\n      }),\n    [odysseyTokens, shadowRootElement]\n  );\n\n  const customOdysseyTheme = useMemo(\n    () => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)),\n    [odysseyTheme, themeOverride]\n  );\n\n  return (\n    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>\n      <OdysseyDesignTokensContext.Provider value={odysseyTokens}>\n        {children}\n      </OdysseyDesignTokensContext.Provider>\n    </MuiThemeProvider>\n  );\n};\n\nconst MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);\n\nexport { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,WAAW,EACXC,aAAa,IAAIC,gBAAgB,QAC5B,sBAAsB;AAC7B,SAASC,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAGhD,SAASC,SAAS,QAAQ,YAAY;AAAC,SAC9BC,qBAAqB;AAC9B,OAAO,KAAKC,MAAM,MAAM,6BAA6B;AAAC,SAC7CC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASnC,MAAMC,oBAAoB,GAAGC,IAAA,IAKI;EAAA,IALH;IAC5BC,QAAQ;IACRC,oBAAoB;IACpBC,iBAAiB;IACjBC;EACyB,CAAC,GAAAJ,IAAA;EAC1B,MAAMK,aAAa,GAAGb,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGO;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMI,YAAY,GAAGd,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBW,aAAa;IACbF;EACF,CAAC,CAAC,EACJ,CAACE,aAAa,EAAEF,iBAAiB,CACnC,CAAC;EAED,MAAMI,kBAAkB,GAAGf,OAAO,CAChC,MAAMY,aAAa,IAAIhB,WAAW,CAACK,SAAS,CAACa,YAAY,EAAEF,aAAa,CAAC,CAAC,EAC1E,CAACE,YAAY,EAAEF,aAAa,CAC9B,CAAC;EAED,OACEN,IAAA,CAACR,gBAAgB;IAACkB,KAAK,EAAED,kBAAkB,IAAID,YAAa;IAAAL,QAAA,EAC1DH,IAAA,CAACF,0BAA0B,CAACa,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAJ,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMU,4BAA4B,GAAGpB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASY,4BAA4B,IAAIZ,oBAAoB"}

package/dist/OdysseyTranslationProvider.js

@@ -11,7 +11,7 @@
  */
 
 import { useEffect } from "react";
-import i18n, { defaultNS, resources } from "./OdysseyI18n.js";
+import { i18n, defaultNS, resources } from "./i18n.js";
 import { I18nextProvider } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 const mergeBundleOverrides = (languageCode, translationOverrides) => {

package/dist/OdysseyTranslationProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","jsx","_jsx","mergeBundleOverrides","languageCode","translationOverrides","bundle","overrides","OdysseyTranslationProvider","_ref","children","changeLanguage","window","navigator","language","Object","keys","forEach","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, useEffect } from \"react\";\n\nimport { SupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport i18n, { defaultNS, resources } from \"./OdysseyI18n\";\nimport { I18nextProvider } from \"react-i18next\";\n\nexport type TranslationOverrides = {\n  [key in SupportedLanguages]?: Partial<(typeof resources)[\"en\"]>;\n};\n\nconst mergeBundleOverrides = (\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides\n) => {\n  const bundle = resources[languageCode];\n  const overrides = translationOverrides[languageCode];\n  return {\n    ...bundle,\n    ...overrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages;\n  translationOverrides?: TranslationOverrides;\n};\n\nexport const OdysseyTranslationProvider = ({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps) => {\n  useEffect(() => {\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(languageCode || window.navigator.language);\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      Object.keys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides(\n          language as SupportedLanguages,\n          translationOverrides\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,SAAS,QAAQ,OAAO;AAAC,OAItCC,IAAI,IAAIC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhD,MAAMC,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA0C,KACvC;EACH,MAAMC,MAAM,GAAGP,SAAS,CAACK,YAAY,CAAC;EACtC,MAAMG,SAAS,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACpD,OAAO;IACL,GAAGE,MAAM;IACT,GAAGC;EACL,CAAC;AACH,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAIH;EAAA,IAJI;IACzCC,QAAQ;IACRN,YAAY;IACZC;EAC+B,CAAC,GAAAI,IAAA;EAChCb,SAAS,CAAC,MAAM;IAEdC,IAAI,CAACc,cAAc,CAACP,YAAY,IAAIQ,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAC;EAChE,CAAC,EAAE,CAACV,YAAY,CAAC,CAAC;EAElBR,SAAS,CAAC,MAAM;IACd,IAAIS,oBAAoB,EAAE;MACxBU,MAAM,CAACC,IAAI,CAACX,oBAAoB,CAAC,CAACY,OAAO,CAAEH,QAAQ,IAAK;QACtD,MAAMR,MAAM,GAAGH,oBAAoB,CACjCW,QAAQ,EACRT,oBACF,CAAC;QACDR,IAAI,CAACqB,iBAAiB,CAACJ,QAAQ,EAAEhB,SAAS,EAAEQ,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACD,oBAAoB,CAAC,CAAC;EAE1B,OAAOH,IAAA,CAACF,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAa,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}
+{"version":3,"file":"OdysseyTranslationProvider.js","names":["useEffect","i18n","defaultNS","resources","I18nextProvider","jsx","_jsx","mergeBundleOverrides","languageCode","translationOverrides","bundle","overrides","OdysseyTranslationProvider","_ref","children","changeLanguage","window","navigator","language","Object","keys","forEach","addResourceBundle"],"sources":["../src/OdysseyTranslationProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, useEffect } from \"react\";\n\nimport { SupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nimport { i18n, defaultNS, resources } from \"./i18n\";\nimport { I18nextProvider } from \"react-i18next\";\n\nexport type TranslationOverrides = {\n  [key in SupportedLanguages]?: Partial<(typeof resources)[\"en\"]>;\n};\n\nconst mergeBundleOverrides = (\n  languageCode: SupportedLanguages,\n  translationOverrides: TranslationOverrides\n) => {\n  const bundle = resources[languageCode];\n  const overrides = translationOverrides[languageCode];\n  return {\n    ...bundle,\n    ...overrides,\n  };\n};\n\nexport type OdysseyTranslationProviderProps = {\n  children: ReactNode;\n  languageCode?: SupportedLanguages;\n  translationOverrides?: TranslationOverrides;\n};\n\nexport const OdysseyTranslationProvider = ({\n  children,\n  languageCode,\n  translationOverrides,\n}: OdysseyTranslationProviderProps) => {\n  useEffect(() => {\n    // Defaults to the browser's language if available otherwise `en` will be used\n    i18n.changeLanguage(languageCode || window.navigator.language);\n  }, [languageCode]);\n\n  useEffect(() => {\n    if (translationOverrides) {\n      Object.keys(translationOverrides).forEach((language) => {\n        const bundle = mergeBundleOverrides(\n          language as SupportedLanguages,\n          translationOverrides\n        );\n        i18n.addResourceBundle(language, defaultNS, bundle);\n      });\n    }\n  }, [translationOverrides]);\n\n  return <I18nextProvider i18n={i18n}>{children}</I18nextProvider>;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,SAAS,QAAQ,OAAO;AAAC,SAIpCC,IAAI,EAAEC,SAAS,EAAEC,SAAS;AACnC,SAASC,eAAe,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAMhD,MAAMC,oBAAoB,GAAGA,CAC3BC,YAAgC,EAChCC,oBAA0C,KACvC;EACH,MAAMC,MAAM,GAAGP,SAAS,CAACK,YAAY,CAAC;EACtC,MAAMG,SAAS,GAAGF,oBAAoB,CAACD,YAAY,CAAC;EACpD,OAAO;IACL,GAAGE,MAAM;IACT,GAAGC;EACL,CAAC;AACH,CAAC;AAQD,OAAO,MAAMC,0BAA0B,GAAGC,IAAA,IAIH;EAAA,IAJI;IACzCC,QAAQ;IACRN,YAAY;IACZC;EAC+B,CAAC,GAAAI,IAAA;EAChCb,SAAS,CAAC,MAAM;IAEdC,IAAI,CAACc,cAAc,CAACP,YAAY,IAAIQ,MAAM,CAACC,SAAS,CAACC,QAAQ,CAAC;EAChE,CAAC,EAAE,CAACV,YAAY,CAAC,CAAC;EAElBR,SAAS,CAAC,MAAM;IACd,IAAIS,oBAAoB,EAAE;MACxBU,MAAM,CAACC,IAAI,CAACX,oBAAoB,CAAC,CAACY,OAAO,CAAEH,QAAQ,IAAK;QACtD,MAAMR,MAAM,GAAGH,oBAAoB,CACjCW,QAAQ,EACRT,oBACF,CAAC;QACDR,IAAI,CAACqB,iBAAiB,CAACJ,QAAQ,EAAEhB,SAAS,EAAEQ,MAAM,CAAC;MACrD,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACD,oBAAoB,CAAC,CAAC;EAE1B,OAAOH,IAAA,CAACF,eAAe;IAACH,IAAI,EAAEA,IAAK;IAAAa,QAAA,EAAEA;EAAQ,CAAkB,CAAC;AAClE,CAAC"}

package/dist/OdysseyTranslationProvider.types.js

@@ -10,5 +10,5 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export const supportedLanguages = ["cs", "da", "de", "el", "en", "es", "fi", "fr", "hu", "id", "it", "ja", "ko", "ms", "nb", "nl_NL", "ok_PL", "ok_SK", "pl", "pt_BR", "ro", "ru", "sv", "th", "tr", "uk", "zh_CN", "zh_TW"];
+export const supportedLanguages = ["cs", "da", "de", "el", "en", "es", "fi", "fr", "hu", "id", "it", "ja", "ko", "ms", "nb", "nl_NL", "ok_PL", "ok_SK", "pl", "pt_BR", "ro", "ru", "sv", "th", "tr", "uk", "vi", "zh_CN", "zh_TW"];
 //# sourceMappingURL=OdysseyTranslationProvider.types.js.map

package/dist/OdysseyTranslationProvider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyTranslationProvider.types.js","names":["supportedLanguages"],"sources":["../src/OdysseyTranslationProvider.types.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const supportedLanguages = [\n  \"cs\", // Czech\n  \"da\", // Danish\n  \"de\", // German\n  \"el\", // Greek\n  \"en\", // English\n  \"es\", // Spanish\n  \"fi\", // Finnish\n  \"fr\", // French\n  \"hu\", // Hungarian\n  \"id\", // Indonesian\n  \"it\", // Italian\n  \"ja\", // Japanese\n  \"ko\", // Korean\n  \"ms\", // Malaysian\n  \"nb\", // Norwegian\n  \"nl_NL\", // Dutch\n  \"ok_PL\", // (Test Language) Pseudo-loc\n  \"ok_SK\", // (Test Language) Show Keys\n  \"pl\", // Polish\n  \"pt_BR\", // Portuguese (Brazil)\n  \"ro\", // Romanian\n  \"ru\", // Russian\n  \"sv\", // Swedish\n  \"th\", // Thai\n  \"tr\", // Turkish\n  \"uk\", // Ukrainian\n  \"zh_CN\", // Chinese (PRC)\n  \"zh_TW\", // Chinese\n] as const;\n\nexport type SupportedLanguages = (typeof supportedLanguages)[number];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,kBAAkB,GAAG,CAChC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,CACC"}
+{"version":3,"file":"OdysseyTranslationProvider.types.js","names":["supportedLanguages"],"sources":["../src/OdysseyTranslationProvider.types.ts"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nexport const supportedLanguages = [\n  \"cs\", // Czech\n  \"da\", // Danish\n  \"de\", // German\n  \"el\", // Greek\n  \"en\", // English\n  \"es\", // Spanish\n  \"fi\", // Finnish\n  \"fr\", // French\n  \"hu\", // Hungarian\n  \"id\", // Indonesian\n  \"it\", // Italian\n  \"ja\", // Japanese\n  \"ko\", // Korean\n  \"ms\", // Malaysian\n  \"nb\", // Norwegian\n  \"nl_NL\", // Dutch\n  \"ok_PL\", // (Test Language) Pseudo-loc\n  \"ok_SK\", // (Test Language) Show Keys\n  \"pl\", // Polish\n  \"pt_BR\", // Portuguese (Brazil)\n  \"ro\", // Romanian\n  \"ru\", // Russian\n  \"sv\", // Swedish\n  \"th\", // Thai\n  \"tr\", // Turkish\n  \"uk\", // Ukrainian\n  \"vi\", // Vietnamese\n  \"zh_CN\", // Chinese (PRC)\n  \"zh_TW\", // Chinese\n] as const;\n\nexport type SupportedLanguages = (typeof supportedLanguages)[number];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,kBAAkB,GAAG,CAChC,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,OAAO,CACC"}

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,8 +14,8 @@ 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 { useTranslation } from "react-i18next";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PasswordField = forwardRef((_ref, ref) => {
   let {
@@ -25,14 +26,20 @@ const PasswordField = forwardRef((_ref, ref) => {
     id: idOverride,
     isDisabled = false,
     isOptional = false,
+    hasShowPassword = true,
     isReadOnly,
     label,
+    name: nameOverride,
     onChange,
     onFocus,
     onBlur,
     placeholder,
+    testId,
     value
   } = _ref;
+  const {
+    t
+  } = useTranslation();
   const [inputType, setInputType] = useState("password");
   const togglePasswordVisibility = useCallback(() => {
     setInputType(inputType => inputType === "password" ? "text" : "password");
@@ -46,18 +53,20 @@ const PasswordField = forwardRef((_ref, ref) => {
       "aria-describedby": ariaDescribedBy,
       autoComplete: autoCompleteType,
       autoFocus: hasInitialFocus,
-      endAdornment: _jsx(_InputAdornment, {
+      "data-se": testId,
+      endAdornment: hasShowPassword && _jsx(_InputAdornment, {
         position: "end",
-        children: _jsx(Button, {
-          ariaLabel: "toggle password visibility",
-          endIcon: inputType === "password" ? _jsx(ShowIcon, {}) : _jsx(HideIcon, {}),
+        children: _jsx(_IconButton, {
+          "aria-label": inputType === "password" ? t("passwordfield.icon.label.show") : t("passwordfield.icon.label.hide"),
           onClick: togglePasswordVisibility,
-          size: "small",
-          variant: "floating"
+          children: inputType === "password" ? _jsx(ShowIcon, {}) : _jsx(HideIcon, {})
         })
       }),
       id: id,
-      name: id,
+      inputProps: {
+        role: "textbox"
+      },
+      name: nameOverride ?? id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -68,7 +77,7 @@ const PasswordField = forwardRef((_ref, ref) => {
       type: inputType,
       value: value
     });
-  }, [autoCompleteType, hasInitialFocus, togglePasswordVisibility, inputType, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, value]);
+  }, [autoCompleteType, hasInitialFocus, t, togglePasswordVisibility, inputType, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, hasShowPassword, ref, testId, value]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useState","ShowIcon","HideIcon","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","useTranslation","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onFocus","onBlur","placeholder","testId","value","t","inputType","setInputType","togglePasswordVisibility","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useTranslation } from \"react-i18next\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, required for a controlled component.\n   */\n  value?: string;\n} & SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{ role: \"textbox\" }}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n          value={value}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\n        testId,\n        value,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}

package/dist/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":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAE3C,SAGEC,UAAU,EAEVC,IAAI,EACJC,WAAW,QACN,OAAO;AAAC,SAENC,qBAAqB,EAAEC,UAAU;AAAA,SACjCC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwDd,MAAMC,WAAW,GAAGR,UAAU,CAC5B,CAAAS,IAAA,EAgBEC,GAAG,KACA;EAAA,IAhBH;IACEC,gBAAgB;IAChBC,eAAe;IACfC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,MAAM;IACNC,OAAO,EAAEC,WAAW;IACpBC,WAAW;IACXC,MAAM;IACNC,KAAK,EAAEC;EACT,CAAC,GAAAnB,IAAA;EAGD,MAAM,CAACoB,iBAAiB,EAAEC,oBAAoB,CAAC,GAAGhC,QAAQ,CAAC,EAAE,CAAC;EAE9D,MAAMqB,QAAoE,GACxEjB,WAAW,CACR6B,KAAK,IAAK;IACTD,oBAAoB,CAACC,KAAK,CAACC,aAAa,CAACL,KAAK,CAAC;IAC/CP,YAAY,GAAGW,KAAK,CAAC;EACvB,CAAC,EACD,CAACX,YAAY,CACf,CAAC;EAEH,MAAMG,OAAO,GAAGrB,WAAW,CAAC,MAAM;IAChC4B,oBAAoB,CAAC,EAAE,CAAC;IACxBN,WAAW,GAAG,CAAC;EACjB,CAAC,EAAE,CAACA,WAAW,CAAC,CAAC;EAEjBzB,SAAS,CAAC,MAAM;IACd,IAAI6B,eAAe,KAAKK,SAAS,EAAE;MACjCH,oBAAoB,CAACF,eAAe,CAAC;IACvC;EACF,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMM,oBAAoB,GAAGhC,WAAW,CACtCiC,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEvB;IAAG,CAAC,GAAAsB,KAAA;IAAA,OACtB5B,IAAA,CAAA8B,UAAA;MACE,oBAAkBD,eAAgB;MAClCE,YAAY,EAAE3B,gBAAiB;MAE/B4B,SAAS,EAAE3B,eAAgB;MAC3B,WAASc,MAAO;MAChBc,YAAY,EACVX,iBAAiB,IACftB,IAAA,CAAAkC,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAC5BpC,IAAA,CAAAqC,WAAA;UACE,cAAW,OAAO;UAClBC,QAAQ,EAAE9B,UAAW;UACrB+B,OAAO,EAAEvB,OAAQ;UACjBwB,IAAI,EAAC,OAAO;UAAAJ,QAAA,EAEZpC,IAAA,CAACJ,qBAAqB,IAAE;QAAC,CACf;MAAC,CACC,CAEnB;MACDU,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBS,MAAM,EAAEA,MAAO;MACfH,QAAQ,EAAEA,QAAS;MACnBE,OAAO,EAAEA,OAAQ;MACjBI,WAAW,EAAEA,WAAY;MACzBf,GAAG,EAAEA,GAAI;MACTsC,cAAc,EACZzC,IAAA,CAAAkC,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAC9BpC,IAAA,CAACH,UAAU,IAAE;MAAC,CACA,CACjB;MACD6C,IAAI,EAAC,QAAQ;MACbtB,KAAK,EACHC,eAAe,KAAKK,SAAS,GAAGJ,iBAAiB,GAAGD;IACrD,CACF,CAAC;EAAA,CACH,EACD,CACEjB,gBAAgB,EAChBiB,eAAe,EACfhB,eAAe,EACfG,UAAU,EACVG,YAAY,EACZI,MAAM,EACNH,QAAQ,EACRI,OAAO,EACPF,OAAO,EACPI,WAAW,EACXf,GAAG,EACHgB,MAAM,EACNG,iBAAiB,CAErB,CAAC;EAED,OACEtB,IAAA,CAACF,KAAK;IACJ6C,SAAS,EAAC,QAAQ;IAClBC,eAAe,EAAE,KAAM;IACvBtC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBqC,UAAU,EAAE,IAAK;IACjBpC,KAAK,EAAEA,KAAM;IACbkB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMmB,mBAAmB,GAAGpD,IAAI,CAACO,WAAW,CAAC;AAC7C6C,mBAAmB,CAACC,WAAW,GAAG,aAAa;AAE/C,SAASD,mBAAmB,IAAI7C,WAAW"}

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";
@@ -15,12 +16,11 @@ import _Chip from "@mui/material/Chip";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { forwardRef, memo, useCallback, useState } from "react";
-import { Checkbox } from "./Checkbox.js";
+import { memo, useCallback, useMemo, useState } from "react";
 import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const Select = forwardRef((_ref, ref) => {
+const Select = _ref => {
   let {
     errorMessage,
     hint,
@@ -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") {
@@ -54,20 +56,15 @@ const Select = forwardRef((_ref, ref) => {
       onChangeProp(event, child);
     }
   }, [isMultiSelect, onChangeProp, setSelectedValue]);
-  const normalizedOptions = options.map(option => {
-    if (typeof option === "object") {
-      return {
-        text: option.text,
-        value: option.value || option.text,
-        type: option.type === "heading" ? "heading" : "option"
-      };
-    }
-    return {
-      text: option,
-      value: option,
-      type: "option"
-    };
-  });
+  const normalizedOptions = useMemo(() => options.map(option => typeof option === "object" ? {
+    text: option.text,
+    value: option.value || option.text,
+    type: option.type === "heading" ? "heading" : "option"
+  } : {
+    text: option,
+    value: option,
+    type: "option"
+  }), [options]);
   const renderValue = useCallback(selected => {
     if (typeof selected === "string") {
       return undefined;
@@ -88,7 +85,7 @@ const Select = forwardRef((_ref, ref) => {
       children: renderedChips
     });
   }, [normalizedOptions]);
-  const children = normalizedOptions.map(option => {
+  const children = useMemo(() => normalizedOptions.map(option => {
     if (option.type === "heading") {
       return _jsx(_ListSubheader, {
         children: option.text
@@ -96,24 +93,31 @@ 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,
-    id: idOverride,
-    multiple: isMultiSelect,
-    name: idOverride,
-    onBlur: onBlur,
-    onChange: onChange,
-    onFocus: onFocus,
-    ref: ref,
-    renderValue: isMultiSelect ? renderValue : undefined,
-    value: selectedValue,
-    labelId: label
-  }), [idOverride, isMultiSelect, onBlur, onChange, onFocus, ref, children, renderValue, selectedValue, label]);
+  }), [isMultiSelect, normalizedOptions, selectedValue]);
+  const renderFieldComponent = useCallback(_ref2 => {
+    let {
+      ariaDescribedBy,
+      id
+    } = _ref2;
+    return _jsx(_Select, {
+      "aria-describedby": ariaDescribedBy,
+      children: children,
+      "data-se": testId,
+      id: id,
+      labelId: label,
+      multiple: isMultiSelect,
+      name: nameOverride ?? id,
+      onBlur: onBlur,
+      onChange: onChange,
+      onFocus: onFocus,
+      renderValue: isMultiSelect ? renderValue : undefined,
+      value: selectedValue
+    });
+  }, [children, isMultiSelect, label, nameOverride, onBlur, onChange, onFocus, renderValue, selectedValue, testId]);
   return _jsx(Field, {
     errorMessage: errorMessage,
     fieldType: "single",
@@ -125,7 +129,7 @@ const Select = forwardRef((_ref, ref) => {
     label: label,
     renderFieldComponent: renderFieldComponent
   });
-});
+};
 const MemoizedSelect = memo(Select);
 MemoizedSelect.displayName = "Select";
 export { MemoizedSelect as Select };