@okta/odyssey-react-mui 1.21.2 → 1.23.0

package/dist/FileUploader/index.js

@@ -0,0 +1,13 @@
+/*!
+ * 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.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+export * from "./FileUploader.js";
+//# sourceMappingURL=index.js.map

package/dist/FileUploader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/FileUploader/index.ts"],"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\nexport * from \"./FileUploader\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA"}

package/dist/OdysseyCacheProvider.js

@@ -18,6 +18,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const OdysseyCacheProvider = ({
   children,
   emotionRoot,
+  emotionRootElement,
   hasShadowDom: hasShadowDomProp,
   nonce,
   shadowDomElement,
@@ -27,8 +28,8 @@ const OdysseyCacheProvider = ({
   const hasShadowDom = hasShadowDomProp || shadowDomElement;
   const emotionCache = useMemo(() => {
     return createCache({
-      ...(emotionRoot && {
-        container: emotionRoot
+      ...((emotionRootElement || emotionRoot) && {
+        container: emotionRootElement || emotionRoot
       }),
       key: uniqueAlphabeticalId,
       nonce: nonce ?? window.cspNonce,
@@ -38,7 +39,7 @@ const OdysseyCacheProvider = ({
         stylisPlugins
       })
     });
-  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
+  }, [emotionRoot, emotionRootElement, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);
   return _jsx(CacheProvider, {
     value: emotionCache,
     children: children

package/dist/OdysseyCacheProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","memo","useMemo","useUniqueAlphabeticalId","CacheProvider","jsx","_jsx","OdysseyCacheProvider","children","emotionRoot","hasShadowDom","hasShadowDomProp","nonce","shadowDomElement","stylisPlugins","uniqueAlphabeticalId","emotionCache","container","key","window","cspNonce","prepend","speedy","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { memo, useMemo, ReactNode } from \"react\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\nimport { CacheProvider } from \"@emotion/react\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  /**\n   * Emotion caches styles into the style element.\n   * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.\n   */\n  emotionRoot?: HTMLStyleElement;\n  hasShadowDom?: boolean;\n  nonce?: string;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   */\n  /**\n   * @deprecated Will be removed in a future Odyssey version. Use `hasShadowDomElement` instead.\n   */\n  shadowDomElement?: HTMLDivElement | HTMLElement;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  emotionRoot,\n  hasShadowDom: hasShadowDomProp,\n  nonce,\n  shadowDomElement,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const hasShadowDom = hasShadowDomProp || shadowDomElement;\n\n  const emotionCache = useMemo(() => {\n    return createCache({\n      ...(emotionRoot && { container: emotionRoot }),\n      key: uniqueAlphabeticalId,\n      nonce: nonce ?? window.cspNonce,\n      prepend: true,\n      speedy: hasShadowDom ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n      ...(stylisPlugins && { stylisPlugins }),\n    });\n  }, [emotionRoot, hasShadowDom, nonce, stylisPlugins, uniqueAlphabeticalId]);\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,IAAI,EAAEC,OAAO,QAAmB,OAAO;AAAC,SACxCC,uBAAuB;AAChC,SAASC,aAAa,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAsB/C,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,WAAW;EACXC,YAAY,EAAEC,gBAAgB;EAC9BC,KAAK;EACLC,gBAAgB;EAChBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,oBAAoB,GAAGZ,uBAAuB,CAAC,CAAC;EAEtD,MAAMO,YAAY,GAAGC,gBAAgB,IAAIE,gBAAgB;EAEzD,MAAMG,YAAY,GAAGd,OAAO,CAAC,MAAM;IACjC,OAAOF,WAAW,CAAC;MACjB,IAAIS,WAAW,IAAI;QAAEQ,SAAS,EAAER;MAAY,CAAC,CAAC;MAC9CS,GAAG,EAAEH,oBAAoB;MACzBH,KAAK,EAAEA,KAAK,IAAIO,MAAM,CAACC,QAAQ;MAC/BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAEZ,YAAY,GAAG,KAAK,GAAG,IAAI;MACnC,IAAII,aAAa,IAAI;QAAEA;MAAc,CAAC;IACxC,CAAC,CAAC;EACJ,CAAC,EAAE,CAACL,WAAW,EAAEC,YAAY,EAAEE,KAAK,EAAEE,aAAa,EAAEC,oBAAoB,CAAC,CAAC;EAE3E,OAAOT,IAAA,CAACF,aAAa;IAACmB,KAAK,EAAEP,YAAa;IAAAR,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMgB,4BAA4B,GAAGvB,IAAI,CAACM,oBAAoB,CAAC;AAC/DiB,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIjB,oBAAoB"}
+{"version":3,"file":"OdysseyCacheProvider.js","names":["createCache","memo","useMemo","useUniqueAlphabeticalId","CacheProvider","jsx","_jsx","OdysseyCacheProvider","children","emotionRoot","emotionRootElement","hasShadowDom","hasShadowDomProp","nonce","shadowDomElement","stylisPlugins","uniqueAlphabeticalId","emotionCache","container","key","window","cspNonce","prepend","speedy","value","MemoizedOdysseyCacheProvider","displayName"],"sources":["../src/OdysseyCacheProvider.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\ndeclare global {\n  interface Window {\n    cspNonce: string;\n  }\n}\n\nimport createCache, { StylisPlugin } from \"@emotion/cache\";\nimport { memo, useMemo, ReactNode } from \"react\";\nimport { useUniqueAlphabeticalId } from \"./useUniqueAlphabeticalId\";\nimport { CacheProvider } from \"@emotion/react\";\n\nexport type OdysseyCacheProviderProps = {\n  children: ReactNode;\n  /**\n   * Emotion caches styles into the style element.\n   * When enabling this prop, Emotion caches the styles at this element, rather than in <head>.\n   * @deprecated Use `EmotionRootElement` instead. This was incorrectly configured as an `HTMLStyleElement`, but then we're rendering `<style>` inside `<style>`. We need this to be a `<div>` instead.\n   */\n  emotionRoot?: HTMLStyleElement;\n  /**\n   * Emotion adds `<style>` elements into this DOM node. Normally, Emotion puts these in `document.head`.\n   * This is useful if you want to render into a Shadow DOM or iframe.\n   */\n  emotionRootElement?: HTMLElement;\n  hasShadowDom?: boolean;\n  nonce?: string;\n  /**\n   * Emotion renders into this HTML element.\n   * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.\n   * @deprecated Will be removed in a future Odyssey version. Use `hasShadowDomElement` instead.\n   */\n  shadowDomElement?: HTMLDivElement | HTMLElement;\n  stylisPlugins?: StylisPlugin[];\n};\n\nconst OdysseyCacheProvider = ({\n  children,\n  emotionRoot,\n  emotionRootElement,\n  hasShadowDom: hasShadowDomProp,\n  nonce,\n  shadowDomElement,\n  stylisPlugins,\n}: OdysseyCacheProviderProps) => {\n  const uniqueAlphabeticalId = useUniqueAlphabeticalId();\n\n  const hasShadowDom = hasShadowDomProp || shadowDomElement;\n\n  const emotionCache = useMemo(() => {\n    return createCache({\n      ...((emotionRootElement || emotionRoot) && {\n        container: emotionRootElement || emotionRoot,\n      }),\n      key: uniqueAlphabeticalId,\n      nonce: nonce ?? window.cspNonce,\n      prepend: true,\n      speedy: hasShadowDom ? false : true, // <-- Needs to be set to false when shadow-dom is used!! https://github.com/emotion-js/emotion/issues/2053#issuecomment-713429122\n      ...(stylisPlugins && { stylisPlugins }),\n    });\n  }, [\n    emotionRoot,\n    emotionRootElement,\n    hasShadowDom,\n    nonce,\n    stylisPlugins,\n    uniqueAlphabeticalId,\n  ]);\n\n  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;\n};\n\nconst MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);\nMemoizedOdysseyCacheProvider.displayName = \"OdysseyCacheProvider\";\n\nexport { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAQA,OAAOA,WAAW,MAAwB,gBAAgB;AAC1D,SAASC,IAAI,EAAEC,OAAO,QAAmB,OAAO;AAAC,SACxCC,uBAAuB;AAChC,SAASC,aAAa,QAAQ,gBAAgB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA0B/C,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,WAAW;EACXC,kBAAkB;EAClBC,YAAY,EAAEC,gBAAgB;EAC9BC,KAAK;EACLC,gBAAgB;EAChBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,oBAAoB,GAAGb,uBAAuB,CAAC,CAAC;EAEtD,MAAMQ,YAAY,GAAGC,gBAAgB,IAAIE,gBAAgB;EAEzD,MAAMG,YAAY,GAAGf,OAAO,CAAC,MAAM;IACjC,OAAOF,WAAW,CAAC;MACjB,IAAI,CAACU,kBAAkB,IAAID,WAAW,KAAK;QACzCS,SAAS,EAAER,kBAAkB,IAAID;MACnC,CAAC,CAAC;MACFU,GAAG,EAAEH,oBAAoB;MACzBH,KAAK,EAAEA,KAAK,IAAIO,MAAM,CAACC,QAAQ;MAC/BC,OAAO,EAAE,IAAI;MACbC,MAAM,EAAEZ,YAAY,GAAG,KAAK,GAAG,IAAI;MACnC,IAAII,aAAa,IAAI;QAAEA;MAAc,CAAC;IACxC,CAAC,CAAC;EACJ,CAAC,EAAE,CACDN,WAAW,EACXC,kBAAkB,EAClBC,YAAY,EACZE,KAAK,EACLE,aAAa,EACbC,oBAAoB,CACrB,CAAC;EAEF,OAAOV,IAAA,CAACF,aAAa;IAACoB,KAAK,EAAEP,YAAa;IAAAT,QAAA,EAAEA;EAAQ,CAAgB,CAAC;AACvE,CAAC;AAED,MAAMiB,4BAA4B,GAAGxB,IAAI,CAACM,oBAAoB,CAAC;AAC/DkB,4BAA4B,CAACC,WAAW,GAAG,sBAAsB;AAEjE,SAASD,4BAA4B,IAAIlB,oBAAoB"}

package/dist/OdysseyProvider.js

@@ -16,26 +16,33 @@ import { OdysseyCacheProvider } from "./OdysseyCacheProvider.js";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+const scopedCssBaselineStyles = {
+  height: "inherit"
+};
 const OdysseyProvider = ({
   children,
   designTokensOverride,
   emotionRoot,
+  emotionRootElement,
   shadowDomElement,
+  shadowRootElement,
   languageCode,
   nonce,
   stylisPlugins,
   themeOverride,
   translationOverrides
 }) => _jsx(OdysseyCacheProvider, {
-  nonce: nonce,
   emotionRoot: emotionRoot,
-  hasShadowDom: Boolean(shadowDomElement),
+  emotionRootElement: emotionRootElement,
+  hasShadowDom: Boolean(shadowRootElement || shadowDomElement),
+  nonce: nonce,
   stylisPlugins: stylisPlugins,
   children: _jsx(OdysseyThemeProvider, {
     designTokensOverride: designTokensOverride,
-    shadowDomElement: shadowDomElement,
+    shadowRootElement: shadowRootElement || shadowDomElement,
     themeOverride: themeOverride,
     children: _jsx(_ScopedCssBaseline, {
+      sx: scopedCssBaselineStyles,
       children: _jsx(OdysseyTranslationProvider, {
         languageCode: languageCode,
         translationOverrides: translationOverrides,

package/dist/OdysseyProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","OdysseyProvider","children","designTokensOverride","emotionRoot","shadowDomElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","hasShadowDom","Boolean","_ScopedCssBaseline","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  shadowDomElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <OdysseyCacheProvider\n    nonce={nonce}\n    emotionRoot={emotionRoot}\n    hasShadowDom={Boolean(shadowDomElement)}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowDomElement={shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      <ScopedCssBaseline>\n        <OdysseyTranslationProvider<SupportedLanguages>\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAa5B,MAAMC,eAAe,GAAGA,CAAoC;EAC1DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,gBAAgB;EAChBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KACzCV,IAAA,CAACJ,oBAAoB;EACnBW,KAAK,EAAEA,KAAM;EACbH,WAAW,EAAEA,WAAY;EACzBO,YAAY,EAAEC,OAAO,CAACP,gBAAgB,CAAE;EACxCG,aAAa,EAAEA,aAAc;EAAAN,QAAA,EAE7BF,IAAA,CAACH,oBAAoB;IACnBM,oBAAoB,EAAEA,oBAAqB;IAC3CE,gBAAgB,EAAEA,gBAAiB;IACnCI,aAAa,EAAEA,aAAc;IAAAP,QAAA,EAE7BF,IAAA,CAAAa,kBAAA;MAAAX,QAAA,EACEF,IAAA,CAACF,0BAA0B;QACzBQ,YAAY,EAAEA,YAAa;QAC3BI,oBAAoB,EAAEA,oBAAqB;QAAAR,QAAA,EAE1CA;MAAQ,CACiB;IAAC,CACZ;EAAC,CACA;AAAC,CACH,CACvB;AAED,MAAMY,qBAAqB,GAAGnB,IAAI,CAACM,eAAe,CAA2B;AAE7E,SAASa,qBAAqB,IAAIb,eAAe"}
+{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","scopedCssBaselineStyles","height","OdysseyProvider","children","designTokensOverride","emotionRoot","emotionRootElement","shadowDomElement","shadowRootElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","hasShadowDom","Boolean","_ScopedCssBaseline","sx","MemoizedThemeProvider"],"sources":["../src/OdysseyProvider.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n  OdysseyCacheProvider,\n  OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n  OdysseyThemeProvider,\n  OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n  OdysseyTranslationProvider,\n  OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\n\nconst scopedCssBaselineStyles = {\n  height: \"inherit\",\n};\n\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\n  };\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  children,\n  designTokensOverride,\n  emotionRoot,\n  emotionRootElement,\n  shadowDomElement,\n  shadowRootElement,\n  languageCode,\n  nonce,\n  stylisPlugins,\n  themeOverride,\n  translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <OdysseyCacheProvider\n    emotionRoot={emotionRoot}\n    emotionRootElement={emotionRootElement}\n    hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}\n    nonce={nonce}\n    stylisPlugins={stylisPlugins}\n  >\n    <OdysseyThemeProvider\n      designTokensOverride={designTokensOverride}\n      shadowRootElement={shadowRootElement || shadowDomElement}\n      themeOverride={themeOverride}\n    >\n      {/* This component creates a div; for flexibility of layout of children, make it inherit its parent's height */}\n      <ScopedCssBaseline sx={scopedCssBaselineStyles}>\n        <OdysseyTranslationProvider<SupportedLanguages>\n          languageCode={languageCode}\n          translationOverrides={translationOverrides}\n        >\n          {children}\n        </OdysseyTranslationProvider>\n      </ScopedCssBaseline>\n    </OdysseyThemeProvider>\n  </OdysseyCacheProvider>\n);\n\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAItCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAK5B,MAAMC,uBAAuB,GAAG;EAC9BC,MAAM,EAAE;AACV,CAAC;AAUD,MAAMC,eAAe,GAAGA,CAAoC;EAC1DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,kBAAkB;EAClBC,gBAAgB;EAChBC,iBAAiB;EACjBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KACzCd,IAAA,CAACJ,oBAAoB;EACnBU,WAAW,EAAEA,WAAY;EACzBC,kBAAkB,EAAEA,kBAAmB;EACvCQ,YAAY,EAAEC,OAAO,CAACP,iBAAiB,IAAID,gBAAgB,CAAE;EAC7DG,KAAK,EAAEA,KAAM;EACbC,aAAa,EAAEA,aAAc;EAAAR,QAAA,EAE7BJ,IAAA,CAACH,oBAAoB;IACnBQ,oBAAoB,EAAEA,oBAAqB;IAC3CI,iBAAiB,EAAEA,iBAAiB,IAAID,gBAAiB;IACzDK,aAAa,EAAEA,aAAc;IAAAT,QAAA,EAG7BJ,IAAA,CAAAiB,kBAAA;MAAmBC,EAAE,EAAEjB,uBAAwB;MAAAG,QAAA,EAC7CJ,IAAA,CAACF,0BAA0B;QACzBY,YAAY,EAAEA,YAAa;QAC3BI,oBAAoB,EAAEA,oBAAqB;QAAAV,QAAA,EAE1CA;MAAQ,CACiB;IAAC,CACZ;EAAC,CACA;AAAC,CACH,CACvB;AAED,MAAMe,qBAAqB,GAAGxB,IAAI,CAACQ,eAAe,CAA2B;AAE7E,SAASgB,qBAAqB,IAAIhB,eAAe"}

package/dist/OdysseyThemeProvider.js

@@ -21,6 +21,7 @@ const OdysseyThemeProvider = ({
   children,
   designTokensOverride,
   shadowDomElement,
+  shadowRootElement,
   themeOverride
 }) => {
   const odysseyTokens = useMemo(() => ({
@@ -29,8 +30,8 @@ const OdysseyThemeProvider = ({
   }), [designTokensOverride]);
   const odysseyTheme = useMemo(() => createOdysseyMuiTheme({
     odysseyTokens,
-    shadowDomElement
-  }), [odysseyTokens, shadowDomElement]);
+    shadowRootElement: shadowRootElement || shadowDomElement
+  }), [odysseyTokens, shadowDomElement, shadowRootElement]);
   const customOdysseyTheme = useMemo(() => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)), [odysseyTheme, themeOverride]);
   return _jsx(MuiThemeProvider, {
     theme: customOdysseyTheme ?? odysseyTheme,

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","children","designTokensOverride","shadowDomElement","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  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;\n  themeOverride?: ThemeOptions;\n};\n\n/**\n * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.\n *\n * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.\n */\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowDomElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride],\n  );\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowDomElement,\n      }),\n    [odysseyTokens, shadowDomElement],\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;AAcnC,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,oBAAoB;EACpBC,gBAAgB;EAChBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,aAAa,GAAGZ,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGM;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EACD,MAAMI,YAAY,GAAGb,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBU,aAAa;IACbF;EACF,CAAC,CAAC,EACJ,CAACE,aAAa,EAAEF,gBAAgB,CAClC,CAAC;EAED,MAAMI,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;IAAAL,QAAA,EAC1DF,IAAA,CAACF,0BAA0B,CAACY,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAJ,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMU,4BAA4B,GAAGnB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASW,4BAA4B,IAAIX,oBAAoB"}
+{"version":3,"file":"OdysseyThemeProvider.js","names":["createTheme","ThemeProvider","MuiThemeProvider","memo","useMemo","deepmerge","createOdysseyMuiTheme","Tokens","OdysseyDesignTokensContext","jsx","_jsx","OdysseyThemeProvider","children","designTokensOverride","shadowDomElement","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  /** @deprecated Use `shadowRootElement` instead. */\n  shadowDomElement?: HTMLDivElement | HTMLElement | undefined;\n  shadowRootElement?: HTMLDivElement | HTMLElement;\n  themeOverride?: ThemeOptions;\n};\n\n/**\n * This function doesn't include the Emotion Cache or Translations. You should probably be using `OdysseyProvider`.\n *\n * Some teams have a need to wrap separately (SIW), but most teams will never need to use this explicitly.\n */\nconst OdysseyThemeProvider = ({\n  children,\n  designTokensOverride,\n  shadowDomElement,\n  shadowRootElement,\n  themeOverride,\n}: OdysseyThemeProviderProps) => {\n  const odysseyTokens = useMemo(\n    () => ({ ...Tokens, ...designTokensOverride }),\n    [designTokensOverride],\n  );\n\n  const odysseyTheme = useMemo(\n    () =>\n      createOdysseyMuiTheme({\n        odysseyTokens,\n        shadowRootElement: shadowRootElement || shadowDomElement,\n      }),\n    [odysseyTokens, shadowDomElement, 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;AAgBnC,MAAMC,oBAAoB,GAAGA,CAAC;EAC5BC,QAAQ;EACRC,oBAAoB;EACpBC,gBAAgB;EAChBC,iBAAiB;EACjBC;AACyB,CAAC,KAAK;EAC/B,MAAMC,aAAa,GAAGb,OAAO,CAC3B,OAAO;IAAE,GAAGG,MAAM;IAAE,GAAGM;EAAqB,CAAC,CAAC,EAC9C,CAACA,oBAAoB,CACvB,CAAC;EAED,MAAMK,YAAY,GAAGd,OAAO,CAC1B,MACEE,qBAAqB,CAAC;IACpBW,aAAa;IACbF,iBAAiB,EAAEA,iBAAiB,IAAID;EAC1C,CAAC,CAAC,EACJ,CAACG,aAAa,EAAEH,gBAAgB,EAAEC,iBAAiB,CACrD,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;IAAAN,QAAA,EAC1DF,IAAA,CAACF,0BAA0B,CAACa,QAAQ;MAACC,KAAK,EAAEL,aAAc;MAAAL,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMW,4BAA4B,GAAGpB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASY,4BAA4B,IAAIZ,oBAAoB"}

package/dist/Radio.js

@@ -28,8 +28,10 @@ const Radio = ({
   testId,
   translate,
   value,
+  isReadOnly,
   onChange: onChangeProp,
-  onBlur: onBlurProp
+  onBlur: onBlurProp,
+  onClick
 }) => {
   const localInputRef = useRef(null);
   useImperativeHandle(inputRef, () => {
@@ -48,7 +50,19 @@ const Radio = ({
       children: hint
     })]
   }), [labelProp, hint, translate]);
-  const onChange = useCallback((event, checked) => onChangeProp?.(event, checked), [onChangeProp]);
+  const onChange = useCallback((event, checked) => {
+    if (isReadOnly) {
+      event.preventDefault();
+    } else {
+      onChangeProp?.(event, checked);
+    }
+  }, [onChangeProp, isReadOnly]);
+  const handleClick = useCallback(event => {
+    if (isReadOnly) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }, [isReadOnly]);
   const onBlur = useCallback(event => {
     onBlurProp?.(event);
   }, [onBlurProp]);
@@ -57,17 +71,30 @@ const Radio = ({
     className: isInvalid ? "Mui-error" : "",
     control: _jsx(_Radio, {
       inputProps: {
-        "data-se": testId
+        "data-se": testId,
+        "aria-disabled": isDisabled || isReadOnly,
+        readOnly: isReadOnly,
+        tabIndex: isReadOnly ? 0 : undefined
       },
       inputRef: localInputRef,
-      onChange: onChange
+      onChange: onChange,
+      onClick: onClick || handleClick,
+      disabled: isDisabled
     }),
-    disabled: isDisabled,
     label: label,
     name: name,
     translate: translate,
     value: value,
-    onBlur: onBlur
+    onBlur: onBlur,
+    disabled: isDisabled,
+    sx: {
+      ...(isReadOnly && {
+        cursor: "default",
+        "& .MuiTypography-root": {
+          cursor: "default"
+        }
+      })
+    }
   });
 };
 const MemoizedRadio = memo(Radio);

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","onChange","onChangeProp","onBlur","onBlurProp","localInputRef","focus","current","children","component","_FormHelperText","event","checked","_FormControlLabel","className","control","_Radio","inputProps","disabled","MemoizedRadio","displayName"],"sources":["../src/Radio.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\n\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"hint\" | \"id\" | \"isDisabled\" | \"name\"> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const label = useMemo(\n    () => (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    ),\n    [labelProp, hint, translate],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => onChangeProp?.(event, checked),\n    [onChangeProp],\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n        />\n      }\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAUA,SAASA,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAKvEC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAkCnB,MAAMC,KAAK,GAAGA,CAAC;EACbC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK,EAAEC,SAAS;EAChBC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC;AACE,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAGzB,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBU,QAAQ,EACR,MAAM;IACJ,OAAO;MACLe,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMX,KAAK,GAAGhB,OAAO,CACnB,MACES,KAAA,CAAAF,SAAA;IAAAsB,QAAA,GACExB,IAAA,CAACF,UAAU;MAAC2B,SAAS,EAAC,MAAM;MAAAD,QAAA,EAAEZ;IAAS,CAAa,CAAC,EACpDN,IAAI,IAAIN,IAAA,CAAA0B,eAAA;MAAgBX,SAAS,EAAEA,SAAU;MAAAS,QAAA,EAAElB;IAAI,CAAiB,CAAC;EAAA,CACtE,CACH,EACD,CAACM,SAAS,EAAEN,IAAI,EAAES,SAAS,CAC7B,CAAC;EAED,MAAME,QAAQ,GAAGvB,WAAW,CAC1B,CAACiC,KAAK,EAAEC,OAAO,KAAKV,YAAY,GAAGS,KAAK,EAAEC,OAAO,CAAC,EAClD,CAACV,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGzB,WAAW,CACvBiC,KAAK,IAAK;IACTP,UAAU,GAAGO,KAAK,CAAC;EACrB,CAAC,EACD,CAACP,UAAU,CACb,CAAC;EAED,OACEpB,IAAA,CAAA6B,iBAAA;IACED,OAAO,EAAEpB,SAAU;IACnBsB,SAAS,EAAEpB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCqB,OAAO,EACL/B,IAAA,CAAAgC,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAEnB;MACb,CAAE;MACFP,QAAQ,EAAEc,aAAc;MACxBJ,QAAQ,EAAEA;IAAS,CACpB,CACF;IACDiB,QAAQ,EAAEzB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMgB,aAAa,GAAG1C,IAAI,CAACY,KAAK,CAAC;AACjC8B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI9B,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","isReadOnly","onChange","onChangeProp","onBlur","onBlurProp","onClick","localInputRef","focus","current","children","component","_FormHelperText","event","checked","preventDefault","handleClick","stopPropagation","_FormControlLabel","className","control","_Radio","inputProps","readOnly","tabIndex","undefined","disabled","sx","cursor","MemoizedRadio","displayName"],"sources":["../src/Radio.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n  /**\n   * The ref forwarded to the Radio\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Radio button is checked\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the radio button has an invalid value\n   */\n  isInvalid?: boolean;\n  /**\n   * The label text for the Radio\n   */\n  label: string;\n  /**\n   * The value attribute of the Radio\n   */\n  value: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n  onClick?: React.MouseEventHandler<HTMLSpanElement>;\n} & Pick<\n  FieldComponentProps,\n  \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n  Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n  hint,\n  inputRef,\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label: labelProp,\n  name,\n  testId,\n  translate,\n  value,\n  isReadOnly,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  onClick,\n}: RadioProps) => {\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  const label = useMemo(\n    () => (\n      <>\n        <Typography component=\"span\">{labelProp}</Typography>\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    ),\n    [labelProp, hint, translate],\n  );\n\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        onChangeProp?.(event, checked);\n      }\n    },\n    [onChangeProp, isReadOnly],\n  );\n\n  const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(\n    (event) => {\n      if (isReadOnly) {\n        event.stopPropagation();\n        event.preventDefault();\n      }\n    },\n    [isReadOnly],\n  );\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp],\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={\n        <MuiRadio\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n            tabIndex: isReadOnly ? 0 : undefined,\n          }}\n          inputRef={localInputRef}\n          onChange={onChange}\n          onClick={onClick || handleClick}\n          disabled={isDisabled}\n        />\n      }\n      label={label}\n      name={name}\n      translate={translate}\n      value={value}\n      onBlur={onBlur}\n      disabled={isDisabled}\n      sx={{\n        ...(isReadOnly && {\n          cursor: \"default\",\n          \"& .MuiTypography-root\": {\n            cursor: \"default\",\n          },\n        }),\n      }}\n    />\n  );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":"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"}

package/dist/RadioGroup.js

@@ -10,9 +10,10 @@ import _RadioGroup from "@mui/material/RadioGroup";
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-import { memo, useCallback, useRef } from "react";
+import React, { memo, useCallback, useRef, useMemo } from "react";
 import { Field } from "./Field.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
+import { Radio } from "./Radio.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const RadioGroup = ({
   ariaDescribedBy,
@@ -24,6 +25,7 @@ const RadioGroup = ({
   HintLinkComponent,
   id: idOverride,
   isDisabled,
+  isReadOnly = false,
   label,
   name: nameOverride,
   onChange: onChangeProp,
@@ -40,9 +42,18 @@ const RadioGroup = ({
     value,
     controlState: controlledStateRef.current
   });
-  const onChange = useCallback((event, value) => {
-    onChangeProp?.(event, value);
+  const onChange = useCallback((event, newValue) => {
+    onChangeProp?.(event, newValue);
   }, [onChangeProp]);
+  const memoizedChildren = useMemo(() => React.Children.map(children, child => {
+    if (React.isValidElement(child) && child.type === Radio) {
+      return React.cloneElement(child, {
+        isDisabled: isDisabled,
+        isReadOnly: isReadOnly
+      });
+    }
+    return child;
+  }), [children, isDisabled, isReadOnly]);
   const renderFieldComponent = useCallback(({
     ariaDescribedBy,
     errorMessageElementId,
@@ -58,8 +69,8 @@ const RadioGroup = ({
     name: nameOverride ?? id,
     onChange: onChange,
     translate: translate,
-    children: children
-  }), [children, inputValues, nameOverride, onChange, testId, translate]);
+    children: memoizedChildren
+  }), [inputValues, nameOverride, onChange, memoizedChildren, testId, translate]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
@@ -70,6 +81,7 @@ const RadioGroup = ({
     HintLinkComponent: HintLinkComponent,
     id: idOverride,
     isDisabled: isDisabled,
+    isReadOnly: isReadOnly,
     label: label,
     renderFieldComponent: renderFieldComponent
   });

package/dist/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactNode, useCallback, useRef } from \"react\";\n\nimport { RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: RadioProps[\"value\"];\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, value) => {\n      onChangeProp?.(event, value);\n    },\n    [onChangeProp],\n  );\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {children}\n      </MuiRadioGroup>\n    ),\n    [children, inputValues, nameOverride, onChange, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      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;AAMA,SAASA,IAAI,EAAaC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGpDC,KAAK;AAAA,SAMLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IACdwB,eAAe,EAAEF,KAAK;IACtBG,iBAAiB,EAAElB;EACrB,CAAC,CACH,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IACCQ,eAAe;IACf0B,qBAAqB;IACrBnB,EAAE;IACFoB;EACgB,CAAC,KACjB7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}
+{"version":3,"file":"RadioGroup.js","names":["React","memo","useCallback","useRef","useMemo","Field","getControlState","useInputValues","Radio","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isReadOnly","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","newValue","memoizedChildren","Children","map","child","isValidElement","type","cloneElement","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  RadioGroup as MuiRadioGroup,\n  type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport React, { memo, ReactNode, useCallback, useRef, useMemo } from \"react\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { Radio, RadioProps } from \"./Radio\";\n\nexport type RadioGroupProps = {\n  /**\n   * The Radio components within the group. Must include two or more.\n   */\n  children: ReactNode;\n  /**\n   * The text value of the Radio that should be selected by default\n   */\n  defaultValue?: string;\n  /**\n   * The text label for the RadioGroup\n   */\n  label: string;\n  /**\n   * Listen for changes in the browser that change `value`\n   */\n  onChange?: MuiRadioGroupProps[\"onChange\"];\n  /**\n   * The `value` on the selected Radio\n   */\n  value?: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype FieldRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\nconst RadioGroup = ({\n  ariaDescribedBy,\n  children,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onChange: onChangeProp,\n  testId,\n  translate,\n  value,\n}: RadioGroupProps) => {\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n    (event, newValue) => {\n      onChangeProp?.(event, newValue);\n    },\n    [onChangeProp],\n  );\n\n  const memoizedChildren = useMemo(\n    () =>\n      React.Children.map(children, (child) => {\n        if (React.isValidElement<RadioProps>(child) && child.type === Radio) {\n          return React.cloneElement(child, {\n            isDisabled: isDisabled,\n            isReadOnly: isReadOnly,\n          });\n        }\n        return child;\n      }),\n    [children, isDisabled, isReadOnly],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: FieldRenderProps) => (\n      <MuiRadioGroup\n        {...inputValues}\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        name={nameOverride ?? id}\n        onChange={onChange}\n        translate={translate}\n      >\n        {memoizedChildren}\n      </MuiRadioGroup>\n    ),\n    [inputValues, nameOverride, onChange, memoizedChildren, testId, translate],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={false}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":"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"}

package/dist/Select.js

@@ -27,6 +27,42 @@ import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const SelectTestSelector = {
+  accessibleText: {
+    errorMessage: "errorMessage",
+    hint: "description",
+    label: "label"
+  },
+  children: {
+    list: {
+      accessibleText: {
+        label: "label"
+      },
+      children: {
+        listItem: {
+          accessibleText: {
+            label: "label"
+          },
+          elementSelector: {
+            method: "ByRole",
+            options: {
+              label: "name"
+            },
+            role: "option"
+          }
+        }
+      },
+      isControlledElement: true
+    }
+  },
+  elementSelector: {
+    method: "ByRole",
+    options: {
+      label: "name"
+    },
+    role: "combobox"
+  }
+};
 const SelectContainer = styled.div`
   position: relative;
   width: 100%;
@@ -69,7 +105,7 @@ const NonInteractiveIcon = styled(CloseCircleFilledIcon, {
   margin-block-end: -1px;
 `;
 const ChipsInnerContainer = styled(_Box, {
-  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive"
+  shouldForwardProp: prop => prop !== "odysseyDesignTokens" && prop !== "isInteractive" && prop !== "isReadOnly"
 })`
   display: flex;
   flex-wrap: wrap;
@@ -78,8 +114,9 @@ const ChipsInnerContainer = styled(_Box, {
 }) => odysseyDesignTokens.Spacing1};
   pointer-events: none;
   opacity: ${({
-  isInteractive
-}) => isInteractive ? 1 : 0};
+  isInteractive,
+  isReadOnly
+}) => isInteractive || isReadOnly ? 1 : 0};
   min-height: ${({
   odysseyDesignTokens
 }) => odysseyDesignTokens.Spacing6};
@@ -101,6 +138,7 @@ const Select = ({
   isFullWidth = false,
   isMultiSelect,
   isOptional = false,
+  isReadOnly = false,
   label,
   name: nameOverride,
   onBlur,
@@ -111,6 +149,7 @@ const Select = ({
   translate,
   value
 }) => {
+  const selectRef = useRef(null);
   const hasMultipleChoices = useMemo(() => hasMultipleChoicesProp === undefined ? isMultiSelect : hasMultipleChoicesProp, [hasMultipleChoicesProp, isMultiSelect]);
   const controlledStateRef = useRef(getControlState({
     controlledValue: value,
@@ -137,31 +176,39 @@ const Select = ({
     controlState: controlledStateRef.current
   });
   const onChange = useCallback((event, child) => {
-    const {
-      target: {
-        value
+    if (isReadOnly) {
+      event.preventDefault();
+    } else {
+      const {
+        target: {
+          value
+        }
+      } = event;
+      if (controlledStateRef.current !== CONTROLLED) {
+        setInternalSelectedValues(typeof value === "string" && hasMultipleChoices ? value.split(",") : value);
       }
-    } = event;
-    if (controlledStateRef.current !== CONTROLLED) {
-      setInternalSelectedValues(typeof value === "string" && hasMultipleChoices ? value.split(",") : value);
+      onChangeProp?.(event, child);
     }
-    onChangeProp?.(event, child);
-  }, [hasMultipleChoices, onChangeProp]);
-  const normalizedOptions = useMemo(() => options.map(option => {
-    if (typeof option === "object") {
-      const value = option?.value === "" ? option.value : option.value || option.text;
+  }, [hasMultipleChoices, onChangeProp, isReadOnly]);
+  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {
+    const normalizedOptions = options.map(option => {
+      if (typeof option === "object") {
+        const value = option?.value === "" ? option.value : option.value || option.text;
+        return {
+          text: option.text,
+          value,
+          type: option.type === "heading" ? "heading" : "option"
+        };
+      }
       return {
-        text: option.text,
-        value,
-        type: option.type === "heading" ? "heading" : "option"
+        text: option,
+        value: option,
+        type: "option"
       };
-    }
-    return {
-      text: option,
-      value: option,
-      type: "option"
-    };
-  }), [options]);
+    });
+    const normalizedOptionsMap = new Map(normalizedOptions.map(option => [option.value, option]));
+    return [normalizedOptions, normalizedOptionsMap];
+  }, [options]);
   const removeSelectedValue = useCallback(selectedValue => {
     if (Array.isArray(internalSelectedValues)) {
       const newValue = internalSelectedValues.filter(internalSelectedValue => internalSelectedValue !== selectedValue);
@@ -174,16 +221,18 @@ const Select = ({
     }
   }, [internalSelectedValues, onChange]);
   const Chips = useCallback(({
-    isInteractive
+    isInteractive,
+    isReadOnly
   }) => {
     const stopPropagation = event => event.stopPropagation();
     const hasNonInteractiveIcon = !isInteractive && controlledStateRef.current === CONTROLLED && hasMultipleChoices;
     return Array.isArray(internalSelectedValues) && _jsx(ChipsInnerContainer, {
       isInteractive: isInteractive,
+      isReadOnly: isReadOnly,
       odysseyDesignTokens: odysseyDesignTokens,
       children: internalSelectedValues.map(item => item?.length > 0 && _jsx(_Chip, {
         label: _jsxs(_Fragment, {
-          children: [item, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
+          children: [normalizedOptionsMap.get(item)?.text, hasNonInteractiveIcon && _jsx(NonInteractiveIcon, {
             odysseyDesignTokens: odysseyDesignTokens
           })]
         }),
@@ -197,7 +246,7 @@ const Select = ({
         })
       }, item))
     });
-  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue]);
+  }, [controlledStateRef, hasMultipleChoices, internalSelectedValues, odysseyDesignTokens, removeSelectedValue, normalizedOptionsMap]);
   const renderedOptions = useMemo(() => normalizedOptions.map((option, index) => {
     if (option.type === "heading") {
       return _jsxs(_ListSubheader, {
@@ -206,6 +255,7 @@ const Select = ({
     }
     const isSelected = hasMultipleChoices ? internalSelectedValues?.includes(option.value) : internalSelectedValues === option.value;
     return _jsxs(_MenuItem, {
+      "data-empty": !option.text,
       value: option.value,
       selected: isSelected,
       children: [hasMultipleChoices && _jsx(_Checkbox, {
@@ -231,9 +281,16 @@ const Select = ({
       displayEmpty: true,
       id: id,
       inputProps: {
-        "data-se": testId
+        "data-se": testId,
+        "aria-disabled": isDisabled || isReadOnly,
+        readOnly: isReadOnly
+      },
+      inputRef: el => {
+        if (localInputRef.current !== el) {
+          localInputRef.current = el;
+        }
+        selectRef.current = el;
       },
-      inputRef: localInputRef,
       labelId: labelElementId,
       multiple: hasMultipleChoices,
       name: nameOverride ?? id,
@@ -247,11 +304,12 @@ const Select = ({
       children: _jsx(ChipsPositioningContainer, {
         odysseyDesignTokens: odysseyDesignTokens,
         children: _jsx(Chips, {
-          isInteractive: true
+          isInteractive: !isReadOnly,
+          isReadOnly: isReadOnly
         })
       })
     })]
-  }), [Chips, inputValues, hasMultipleChoices, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderedOptions, renderValue, testId, translate]);
+  }), [Chips, inputValues, hasMultipleChoices, isDisabled, isReadOnly, nameOverride, odysseyDesignTokens, onBlur, onChange, onFocus, renderedOptions, renderValue, testId, translate]);
   return _jsx(Field, {
     ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,