@okta/odyssey-react-mui 1.24.1 → 1.25.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.25.0](https://github.com/okta/odyssey/compare/v1.24.1...v1.25.0) (2024-10-15)
+
+### Features
+
+- **odyssey-react-mui:** Add haitian creole to suported languages ([#2382](https://github.com/okta/odyssey/issues/2382)) ([71c40b5](https://github.com/okta/odyssey/commit/71c40b5990c074bf409300b02177ba0ff163aaed))
+
+### Bug Fixes
+
+- **odyssey-react-mui:** wrap long menu items. Add sane max-height ([#2381](https://github.com/okta/odyssey/issues/2381)) ([d3045a1](https://github.com/okta/odyssey/commit/d3045a1eece9e2d1aabdd1f999557e9a54a6485b))
+
 ## [1.24.1](https://github.com/okta/odyssey/compare/v1.24.0...v1.24.1) (2024-10-04)
 
 ### Bug Fixes

package/dist/OdysseyProvider.js

@@ -11,16 +11,15 @@ import _ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { OdysseyCacheProvider } from "./OdysseyCacheProvider.js";
 import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
 import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider.js";
-import { ContrastModeProvider, useContrastContext } from "./ContrastModeProvider.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const scopedCssBaselineStyles = {
   height: "inherit"
 };
-const OdysseyProviderInner = ({
+const OdysseyProvider = ({
   children,
   designTokensOverride,
   emotionRoot,
@@ -32,45 +31,26 @@ const OdysseyProviderInner = ({
   stylisPlugins,
   themeOverride,
   translationOverrides
-}) => {
-  const {
-    contrastMode
-  } = useContrastContext();
-  const memoizedThemeProps = useMemo(() => ({
-    ...themeOverride,
-    odysseyContrastMode: contrastMode
-  }), [themeOverride, contrastMode]);
-  return _jsx(OdysseyCacheProvider, {
-    emotionRoot: emotionRoot,
-    emotionRootElement: emotionRootElement,
-    hasShadowDom: Boolean(shadowRootElement || shadowDomElement),
-    nonce: nonce,
-    stylisPlugins: stylisPlugins,
-    children: _jsx(OdysseyThemeProvider, {
-      designTokensOverride: designTokensOverride,
-      shadowDomElement: shadowDomElement,
-      shadowRootElement: shadowRootElement,
-      themeOverride: memoizedThemeProps,
-      children: _jsx(_ScopedCssBaseline, {
-        sx: scopedCssBaselineStyles,
-        children: _jsx(OdysseyTranslationProvider, {
-          languageCode: languageCode,
-          translationOverrides: translationOverrides,
-          children: children
-        })
+}) => _jsx(OdysseyCacheProvider, {
+  emotionRoot: emotionRoot,
+  emotionRootElement: emotionRootElement,
+  hasShadowDom: Boolean(shadowRootElement || shadowDomElement),
+  nonce: nonce,
+  stylisPlugins: stylisPlugins,
+  children: _jsx(OdysseyThemeProvider, {
+    designTokensOverride: designTokensOverride,
+    shadowRootElement: shadowRootElement || shadowDomElement,
+    themeOverride: themeOverride,
+    children: _jsx(_ScopedCssBaseline, {
+      sx: scopedCssBaselineStyles,
+      children: _jsx(OdysseyTranslationProvider, {
+        languageCode: languageCode,
+        translationOverrides: translationOverrides,
+        children: children
       })
     })
-  });
-};
-const OdysseyProvider = ({
-  contrastMode,
-  ...providerProps
-}) => _jsx(ContrastModeProvider, {
-  contrastMode: contrastMode,
-  children: _jsx(OdysseyProviderInner, {
-    ...providerProps
   })
 });
-const MemoizedOdysseyProvider = memo(OdysseyProvider);
-export { MemoizedOdysseyProvider as OdysseyProvider };
+const MemoizedThemeProvider = memo(OdysseyProvider);
+export { MemoizedThemeProvider as OdysseyProvider };
 //# sourceMappingURL=OdysseyProvider.js.map

package/dist/OdysseyProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"OdysseyProvider.js","names":["memo","useMemo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","ContrastModeProvider","useContrastContext","jsx","_jsx","scopedCssBaselineStyles","height","OdysseyProviderInner","children","designTokensOverride","emotionRoot","emotionRootElement","shadowDomElement","shadowRootElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","contrastMode","memoizedThemeProps","odysseyContrastMode","hasShadowDom","Boolean","_ScopedCssBaseline","sx","OdysseyProvider","providerProps","MemoizedOdysseyProvider"],"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, useMemo } 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\";\nimport {\n  ContrastMode,\n  ContrastModeProvider,\n  useContrastContext,\n} from \"./ContrastModeProvider\";\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    contrastMode?: ContrastMode;\n  };\n\nconst OdysseyProviderInner = <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  const { contrastMode } = useContrastContext();\n\n  const memoizedThemeProps = useMemo(\n    () => ({\n      ...themeOverride,\n      odysseyContrastMode: contrastMode,\n    }),\n    [themeOverride, contrastMode],\n  );\n\n  return (\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        shadowDomElement={shadowDomElement}\n        shadowRootElement={shadowRootElement}\n        themeOverride={memoizedThemeProps}\n      >\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};\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n  contrastMode,\n  ...providerProps\n}: OdysseyProviderProps<SupportedLanguages>) => (\n  <ContrastModeProvider contrastMode={contrastMode}>\n    <OdysseyProviderInner {...providerProps} />\n  </ContrastModeProvider>\n);\n\nconst MemoizedOdysseyProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedOdysseyProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAI/CC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAM1BC,oBAAoB,EACpBC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpB,MAAMC,uBAAuB,GAAG;EAC9BC,MAAM,EAAE;AACV,CAAC;AAWD,MAAMC,oBAAoB,GAAGA,CAAoC;EAC/DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,kBAAkB;EAClBC,gBAAgB;EAChBC,iBAAiB;EACjBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KAAK;EAC9C,MAAM;IAAEC;EAAa,CAAC,GAAGjB,kBAAkB,CAAC,CAAC;EAE7C,MAAMkB,kBAAkB,GAAGvB,OAAO,CAChC,OAAO;IACL,GAAGoB,aAAa;IAChBI,mBAAmB,EAAEF;EACvB,CAAC,CAAC,EACF,CAACF,aAAa,EAAEE,YAAY,CAC9B,CAAC;EAED,OACEf,IAAA,CAACN,oBAAoB;IACnBY,WAAW,EAAEA,WAAY;IACzBC,kBAAkB,EAAEA,kBAAmB;IACvCW,YAAY,EAAEC,OAAO,CAACV,iBAAiB,IAAID,gBAAgB,CAAE;IAC7DG,KAAK,EAAEA,KAAM;IACbC,aAAa,EAAEA,aAAc;IAAAR,QAAA,EAE7BJ,IAAA,CAACL,oBAAoB;MACnBU,oBAAoB,EAAEA,oBAAqB;MAC3CG,gBAAgB,EAAEA,gBAAiB;MACnCC,iBAAiB,EAAEA,iBAAkB;MACrCI,aAAa,EAAEG,kBAAmB;MAAAZ,QAAA,EAElCJ,IAAA,CAAAoB,kBAAA;QAAmBC,EAAE,EAAEpB,uBAAwB;QAAAG,QAAA,EAC7CJ,IAAA,CAACJ,0BAA0B;UACzBc,YAAY,EAAEA,YAAa;UAC3BI,oBAAoB,EAAEA,oBAAqB;UAAAV,QAAA,EAE1CA;QAAQ,CACiB;MAAC,CACZ;IAAC,CACA;EAAC,CACH,CAAC;AAE3B,CAAC;AAED,MAAMkB,eAAe,GAAGA,CAAoC;EAC1DP,YAAY;EACZ,GAAGQ;AACqC,CAAC,KACzCvB,IAAA,CAACH,oBAAoB;EAACkB,YAAY,EAAEA,YAAa;EAAAX,QAAA,EAC/CJ,IAAA,CAACG,oBAAoB;IAAA,GAAKoB;EAAa,CAAG;AAAC,CACvB,CACvB;AAED,MAAMC,uBAAuB,GAAGhC,IAAI,CAAC8B,eAAe,CAA2B;AAE/E,SAASE,uBAAuB,IAAIF,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\";\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};\nexport type OdysseyProviderProps<\n  SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n  OdysseyThemeProviderProps &\n  OdysseyTranslationProviderProps<SupportedLanguages> & {\n    children: ReactNode;\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);\nconst MemoizedThemeProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\nexport { MemoizedThemeProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAAC,SAGtCC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAK5B,MAAMC,uBAAuB,GAAG;EAC9BC,MAAM,EAAE;AACV,CAAC;AAQD,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;AACD,MAAMe,qBAAqB,GAAGxB,IAAI,CAACQ,eAAe,CAA2B;AAC7E,SAASgB,qBAAqB,IAAIhB,eAAe"}

package/dist/OdysseyThemeProvider.js

@@ -30,7 +30,8 @@ const OdysseyThemeProvider = ({
   }), [designTokensOverride]);
   const odysseyTheme = useMemo(() => createOdysseyMuiTheme({
     odysseyTokens,
-    shadowRootElement: shadowRootElement || shadowDomElement
+    shadowRootElement: shadowRootElement || shadowDomElement,
+    contrastMode: "highContrast"
   }), [odysseyTokens, shadowDomElement, shadowRootElement]);
   const customOdysseyTheme = useMemo(() => themeOverride && createTheme(deepmerge(odysseyTheme, themeOverride)), [odysseyTheme, themeOverride]);
   return _jsx(MuiThemeProvider, {

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","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"}
+{"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","contrastMode","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\ndeclare module \"@mui/material/styles\" {\n  interface Theme {\n    contrastMode: string;\n  }\n  interface ThemeOptions {\n    contrastMode?: string;\n  }\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        contrastMode: \"highContrast\",\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;AAyBnC,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,gBAAgB;IACxDK,YAAY,EAAE;EAChB,CAAC,CAAC,EACJ,CAACF,aAAa,EAAEH,gBAAgB,EAAEC,iBAAiB,CACrD,CAAC;EAED,MAAMK,kBAAkB,GAAGhB,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;IAACmB,KAAK,EAAED,kBAAkB,IAAIF,YAAa;IAAAN,QAAA,EAC1DF,IAAA,CAACF,0BAA0B,CAACc,QAAQ;MAACC,KAAK,EAAEN,aAAc;MAAAL,QAAA,EACvDA;IAAQ,CAC0B;EAAC,CACtB,CAAC;AAEvB,CAAC;AAED,MAAMY,4BAA4B,GAAGrB,IAAI,CAACQ,oBAAoB,CAAC;AAE/D,SAASa,4BAA4B,IAAIb,oBAAoB"}

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 defaultSupportedLanguages = ["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"];
+export const defaultSupportedLanguages = ["cs", "da", "de", "el", "en", "es", "fi", "fr", "ht", "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":["defaultSupportedLanguages"],"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 defaultSupportedLanguages = [\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 DefaultSupportedLanguages =\n  (typeof defaultSupportedLanguages)[number];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,yBAAyB,GAAG,CACvC,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"}
+{"version":3,"file":"OdysseyTranslationProvider.types.js","names":["defaultSupportedLanguages"],"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 defaultSupportedLanguages = [\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  \"ht\", // Haitian Creole\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 DefaultSupportedLanguages =\n  (typeof defaultSupportedLanguages)[number];\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,yBAAyB,GAAG,CACvC,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,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/Select.js

@@ -18,12 +18,12 @@ import _Box from "@mui/material/Box";
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState, useImperativeHandle } from "react";
+import styled from "@emotion/styled";
 import { Field } from "./Field.js";
 import { CheckIcon, CloseCircleFilledIcon } from "./icons.generated/index.js";
 import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
-import { normalizedKey } from "./useNormalizedKey.js";
-import styled from "@emotion/styled";
 import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
+import { normalizedKey } from "./useNormalizedKey.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";
@@ -292,6 +292,14 @@ const Select = ({
         selectRef.current = el;
       },
       labelId: labelElementId,
+      MenuProps: {
+        sx: {
+          ".MuiPaper-root": {
+            maxHeight: "50vh",
+            minHeight: "200px"
+          }
+        }
+      },
       multiple: hasMultipleChoices,
       name: nameOverride ?? id,
       onBlur: onBlur,

package/dist/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","styled","useOdysseyDesignTokens","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\nimport styled from \"@emotion/styled\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { TestSelector } from \"./test-selectors\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","styled","Field","CheckIcon","CloseCircleFilledIcon","ComponentControlledState","useInputValues","getControlState","useOdysseyDesignTokens","normalizedKey","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SelectTestSelector","accessibleText","errorMessage","hint","label","children","list","listItem","elementSelector","method","options","role","isControlledElement","SelectContainer","div","ChipsPositioningContainer","shouldForwardProp","prop","odysseyDesignTokens","Spacing0","Spacing5","Spacing1","BorderWidthMain","NonInteractiveIcon","Spacing2","ChipsInnerContainer","_Box","isInteractive","isReadOnly","Spacing6","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","testId","translate","value","selectRef","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","preventDefault","target","split","normalizedOptions","normalizedOptionsMap","map","option","text","type","Map","removeSelectedValue","selectedValue","Array","isArray","newValue","filter","internalSelectedValue","syntheticEvent","Chips","stopPropagation","hasNonInteractiveIcon","item","length","_Chip","get","tabIndex","onDelete","deleteIcon","sx","pointerEvents","onMouseDown","renderedOptions","index","_ListSubheader","isSelected","includes","_MenuItem","selected","_Checkbox","checked","_ListItemSecondaryAction","toString","renderValue","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","readOnly","el","labelId","MenuProps","maxHeight","minHeight","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useImperativeHandle,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n  Box as MuiBox,\n  Checkbox as MuiCheckbox,\n  Chip as MuiChip,\n  ListItemSecondaryAction,\n  ListSubheader,\n  MenuItem as MuiMenuItem,\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n  SelectChangeEvent,\n} from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport {\n  FieldComponentProps,\n  FieldComponentRenderProps,\n} from \"./FieldComponentProps\";\nimport { CheckIcon, CloseCircleFilledIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\nimport {\n  useOdysseyDesignTokens,\n  DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { TestSelector } from \"./test-selectors\";\nimport { normalizedKey } from \"./useNormalizedKey\";\n\nexport const SelectTestSelector = {\n  accessibleText: {\n    errorMessage: \"errorMessage\",\n    hint: \"description\",\n    label: \"label\",\n  },\n  children: {\n    list: {\n      accessibleText: {\n        label: \"label\",\n      },\n      children: {\n        listItem: {\n          accessibleText: {\n            label: \"label\",\n          },\n          elementSelector: {\n            method: \"ByRole\",\n            options: {\n              label: \"name\",\n            },\n            role: \"option\",\n          },\n        },\n      },\n      isControlledElement: true,\n    },\n  },\n  elementSelector: {\n    method: \"ByRole\",\n    options: {\n      label: \"name\",\n    },\n    role: \"combobox\",\n  },\n} as const satisfies TestSelector;\n\nexport type SelectOption = {\n  text: string;\n  type?: \"heading\" | \"option\";\n  value?: string;\n};\n\nconst SelectContainer = styled.div`\n  position: relative;\n  width: 100%;\n  display: flex;\n`;\n\nconst ChipsPositioningContainer = styled(\"div\", {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  right: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};\n  bottom: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing0};\n  left: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.BorderWidthMain};\n  opacity: 1;\n  pointer-events: none;\n`;\n\nconst NonInteractiveIcon = styled(CloseCircleFilledIcon, {\n  shouldForwardProp: (prop) => prop !== \"odysseyDesignTokens\",\n})<{\n  odysseyDesignTokens: DesignTokens;\n}>`\n  font-size: 1em;\n  margin-inline-start: ${({ odysseyDesignTokens }) =>\n    odysseyDesignTokens.Spacing2};\n  margin-inline-end: -${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  margin-block-end: -1px;\n`;\n\nconst ChipsInnerContainer = styled(MuiBox, {\n  shouldForwardProp: (prop) =>\n    prop !== \"odysseyDesignTokens\" &&\n    prop !== \"isInteractive\" &&\n    prop !== \"isReadOnly\",\n})<{\n  isInteractive?: boolean;\n  isReadOnly?: boolean;\n  odysseyDesignTokens: DesignTokens;\n}>`\n  display: flex;\n  flex-wrap: wrap;\n  gap: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing1};\n  pointer-events: none;\n  opacity: ${({ isInteractive, isReadOnly }) =>\n    isInteractive || isReadOnly ? 1 : 0};\n  min-height: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing6};\n`;\n\nexport type SelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * The ref forwarded to the Select\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead.\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the Select\n   */\n  label: string;\n  /**\n   * Callback fired when the Select loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the Select changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the Select gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  /**\n   * The options for the Select\n   */\n  options: (string | SelectOption)[];\n  /**\n   * The value or values selected in the Select\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"isReadOnly\"\n  | \"name\"\n> &\n  Pick<HtmlProps, \"ariaDescribedBy\" | \"testId\" | \"translate\">;\n\ntype SelectRenderProps = Partial<\n  Pick<FieldComponentRenderProps, \"ariaDescribedBy\" | \"errorMessageElementId\">\n> &\n  Pick<FieldComponentRenderProps, \"id\" | \"labelElementId\">;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n *   - string —                            A simple string. The string will be both the text and the value of the resulting option.\n *                                         <option value=\"string\">string</option>\n *\n *   - { text: string } —                  Same as above, but the string is contained within an object.\n *                                         <option value=\"text\">text</option>\n *\n *   - { text: string, value: string } —   The option text will be text, and the option value will be value.\n *                                         <option value=\"value\">text</option>\n *\n *   - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst { CONTROLLED } = ComponentControlledState;\nconst Select = <\n  Value extends SelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean,\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices: hasMultipleChoicesProp,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  inputRef,\n  isDisabled = false,\n  isFullWidth = false,\n  isMultiSelect,\n  isOptional = false,\n  isReadOnly = false,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onFocus,\n  options,\n  testId,\n  translate,\n  value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n  const selectRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null);\n\n  const hasMultipleChoices = useMemo(\n    () =>\n      hasMultipleChoicesProp === undefined\n        ? isMultiSelect\n        : hasMultipleChoicesProp,\n    [hasMultipleChoicesProp, isMultiSelect],\n  );\n\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: value,\n      uncontrolledValue: defaultValue,\n    }),\n  );\n  const [internalSelectedValues, setInternalSelectedValues] = useState(\n    controlledStateRef.current === CONTROLLED ? value : defaultValue,\n  );\n\n  const localInputRef = useRef<HTMLSelectElement>(null);\n  const odysseyDesignTokens = useOdysseyDesignTokens();\n\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    [],\n  );\n\n  useEffect(() => {\n    if (controlledStateRef.current === CONTROLLED) {\n      setInternalSelectedValues(value);\n    }\n  }, [value]);\n\n  const inputValues = useInputValues({\n    defaultValue,\n    value,\n    controlState: controlledStateRef.current,\n  });\n\n  const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n    (event, child) => {\n      if (isReadOnly) {\n        event.preventDefault();\n      } else {\n        const {\n          target: { value },\n        } = event;\n        if (controlledStateRef.current !== CONTROLLED) {\n          setInternalSelectedValues(\n            (typeof value === \"string\" && hasMultipleChoices\n              ? value.split(\",\")\n              : value) as Value,\n          );\n        }\n        onChangeProp?.(event, child);\n      }\n    },\n    [hasMultipleChoices, onChangeProp, isReadOnly],\n  );\n  // Normalize the options array to accommodate the various\n  // data types that might be passed\n  const [normalizedOptions, normalizedOptionsMap] = useMemo(() => {\n    const normalizedOptions = options.map((option) => {\n      if (typeof option === \"object\") {\n        /**\n         * If the value of `option?.value is an empty string, we need to make sure that we\n         * set an empty string to `value` in the normalized option so that the select component\n         * can potentially set it as the selected one in the text input\n         */\n        const value =\n          option?.value === \"\" ? option.value : option.value || option.text;\n        return {\n          text: option.text,\n          value,\n          type: option.type === \"heading\" ? \"heading\" : \"option\",\n        };\n      }\n\n      return { text: option, value: option, type: \"option\" };\n    });\n\n    const normalizedOptionsMap = new Map(\n      normalizedOptions.map((option) => [option.value, option]),\n    );\n    return [normalizedOptions, normalizedOptionsMap];\n  }, [options]);\n\n  const removeSelectedValue = useCallback(\n    (selectedValue: string) => {\n      if (Array.isArray(internalSelectedValues)) {\n        const newValue = internalSelectedValues.filter(\n          (internalSelectedValue) => internalSelectedValue !== selectedValue,\n        );\n\n        const syntheticEvent = {\n          target: { value: newValue },\n        } as SelectChangeEvent<Value>;\n\n        onChange(syntheticEvent, null);\n      }\n    },\n    [internalSelectedValues, onChange],\n  );\n\n  const Chips = useCallback(\n    ({\n      isInteractive,\n      isReadOnly,\n    }: {\n      isInteractive: boolean;\n      isReadOnly?: boolean;\n    }) => {\n      const stopPropagation = (event: React.MouseEvent<SVGSVGElement>) =>\n        event.stopPropagation();\n\n      const hasNonInteractiveIcon =\n        !isInteractive &&\n        controlledStateRef.current === CONTROLLED &&\n        hasMultipleChoices;\n      return (\n        Array.isArray(internalSelectedValues) && (\n          <ChipsInnerContainer\n            isInteractive={isInteractive}\n            isReadOnly={isReadOnly}\n            odysseyDesignTokens={odysseyDesignTokens}\n          >\n            {internalSelectedValues.map(\n              (item) =>\n                item?.length > 0 && (\n                  <MuiChip\n                    key={item}\n                    label={\n                      <>\n                        {normalizedOptionsMap.get(item)?.text}\n                        {hasNonInteractiveIcon && (\n                          <NonInteractiveIcon\n                            odysseyDesignTokens={odysseyDesignTokens}\n                          />\n                        )}\n                      </>\n                    }\n                    tabIndex={-1}\n                    onDelete={\n                      isInteractive && controlledStateRef.current === CONTROLLED\n                        ? () => removeSelectedValue(item)\n                        : undefined\n                    }\n                    deleteIcon={\n                      <CloseCircleFilledIcon\n                        sx={{ pointerEvents: \"auto\" }}\n                        // We need to stop event propagation on mouse down to prevent the deletion\n                        // from being blocked by the Select list opening, and also ensure that\n                        // the pointerEvent is registered even when the parent's are not\n                        onMouseDown={stopPropagation}\n                      />\n                    }\n                  />\n                ),\n            )}\n          </ChipsInnerContainer>\n        )\n      );\n    },\n    [\n      controlledStateRef,\n      hasMultipleChoices,\n      internalSelectedValues,\n      odysseyDesignTokens,\n      removeSelectedValue,\n      normalizedOptionsMap,\n    ],\n  );\n\n  // Convert the options into the ReactNode children\n  // that will populate the <Select>\n  const renderedOptions = useMemo(\n    () =>\n      normalizedOptions.map((option, index) => {\n        if (option.type === \"heading\") {\n          return (\n            <ListSubheader key={option.text}> {option.text} </ListSubheader>\n          );\n        }\n\n        const isSelected = hasMultipleChoices\n          ? internalSelectedValues?.includes(option.value)\n          : internalSelectedValues === option.value;\n\n        return (\n          <MuiMenuItem\n            data-empty={!option.text}\n            key={normalizedKey(option.text, index.toString())}\n            value={option.value}\n            selected={isSelected}\n          >\n            {hasMultipleChoices && <MuiCheckbox checked={isSelected} />}\n            {option.text}\n            {!hasMultipleChoices && internalSelectedValues === option.value && (\n              <ListItemSecondaryAction>\n                <CheckIcon />\n              </ListItemSecondaryAction>\n            )}\n          </MuiMenuItem>\n        );\n      }),\n    [hasMultipleChoices, normalizedOptions, internalSelectedValues],\n  );\n\n  const renderValue = useCallback(\n    (value: Value) => Array.isArray(value) && <Chips isInteractive={false} />,\n    [Chips],\n  );\n\n  const renderFieldComponent = useCallback(\n    ({\n      ariaDescribedBy,\n      errorMessageElementId,\n      id,\n      labelElementId,\n    }: SelectRenderProps) => (\n      <SelectContainer>\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          aria-errormessage={errorMessageElementId}\n          displayEmpty\n          id={id}\n          inputProps={{\n            \"data-se\": testId,\n            \"aria-disabled\": isDisabled || isReadOnly,\n            readOnly: isReadOnly,\n          }}\n          inputRef={(el: HTMLInputElement | HTMLTextAreaElement | null) => {\n            if (localInputRef.current !== el) {\n              (localInputRef as React.MutableRefObject<typeof el>).current = el;\n            }\n            selectRef.current = el;\n          }}\n          labelId={labelElementId}\n          MenuProps={{\n            sx: {\n              \".MuiPaper-root\": {\n                maxHeight: \"50vh\",\n                minHeight: \"200px\",\n              },\n            },\n          }}\n          multiple={hasMultipleChoices}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          renderValue={hasMultipleChoices ? renderValue : undefined}\n          translate={translate}\n        >\n          {renderedOptions}\n        </MuiSelect>\n        {hasMultipleChoices && (\n          <>\n            <ChipsPositioningContainer\n              odysseyDesignTokens={odysseyDesignTokens}\n            >\n              <Chips isInteractive={!isReadOnly} isReadOnly={isReadOnly} />\n            </ChipsPositioningContainer>\n          </>\n        )}\n      </SelectContainer>\n    ),\n    [\n      Chips,\n      inputValues,\n      hasMultipleChoices,\n      isDisabled,\n      isReadOnly,\n      nameOverride,\n      odysseyDesignTokens,\n      onBlur,\n      onChange,\n      onFocus,\n      renderedOptions,\n      renderValue,\n      testId,\n      translate,\n    ],\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"single\"\n      hasVisibleLabel\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isFullWidth={isFullWidth}\n      isOptional={isOptional}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}

package/dist/Tag.js

@@ -24,92 +24,116 @@ const getChipColors = (colorVariant, odysseyDesignTokens, contrastMode) => {
     default: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueNeutral200,
-        text: odysseyDesignTokens.HueNeutral700
+        text: odysseyDesignTokens.HueNeutral700,
+        textDisabled: odysseyDesignTokens.HueNeutral400
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueNeutral100,
-        text: odysseyDesignTokens.HueNeutral700
+        text: odysseyDesignTokens.HueNeutral700,
+        textDisabled: odysseyDesignTokens.HueNeutral300
       }),
       hover: odysseyDesignTokens.HueNeutral200,
       active: odysseyDesignTokens.HueNeutral300,
       border: odysseyDesignTokens.HueNeutral200,
       deleteIcon: odysseyDesignTokens.HueNeutral500,
-      deleteIconHover: odysseyDesignTokens.HueNeutral700
+      deleteIconHover: odysseyDesignTokens.HueNeutral700,
+      icon: odysseyDesignTokens.HueNeutral700,
+      iconDisabled: odysseyDesignTokens.HueNeutral300
     },
     info: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueBlue200,
-        text: odysseyDesignTokens.HueBlue700
+        text: odysseyDesignTokens.HueBlue700,
+        textDisabled: odysseyDesignTokens.HueBlue400
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueBlue100,
-        text: odysseyDesignTokens.HueBlue700
+        text: odysseyDesignTokens.HueBlue700,
+        textDisabled: odysseyDesignTokens.HueBlue300
       }),
       hover: odysseyDesignTokens.HueBlue200,
       active: odysseyDesignTokens.HueBlue300,
       border: odysseyDesignTokens.HueBlue200,
       deleteIcon: odysseyDesignTokens.HueBlue500,
-      deleteIconHover: odysseyDesignTokens.HueBlue700
+      deleteIconHover: odysseyDesignTokens.HueBlue700,
+      icon: odysseyDesignTokens.HueBlue700,
+      iconDisabled: odysseyDesignTokens.HueBlue300
     },
     accentOne: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentOne200,
-        text: odysseyDesignTokens.HueAccentOne700
+        text: odysseyDesignTokens.HueAccentOne700,
+        textDisabled: odysseyDesignTokens.HueAccentOne400
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentOne100,
-        text: odysseyDesignTokens.HueAccentOne700
+        text: odysseyDesignTokens.HueAccentOne700,
+        textDisabled: odysseyDesignTokens.HueAccentOne300
       }),
       hover: odysseyDesignTokens.HueAccentOne200,
       active: odysseyDesignTokens.HueAccentOne300,
       border: odysseyDesignTokens.HueAccentOne200,
       deleteIcon: odysseyDesignTokens.HueAccentOne500,
-      deleteIconHover: odysseyDesignTokens.HueAccentOne700
+      deleteIconHover: odysseyDesignTokens.HueAccentOne700,
+      icon: odysseyDesignTokens.HueAccentOne700,
+      iconDisabled: odysseyDesignTokens.HueAccentOne300
     },
     accentTwo: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentTwo200,
-        text: odysseyDesignTokens.HueAccentTwo800
+        text: odysseyDesignTokens.HueAccentTwo800,
+        textDisabled: odysseyDesignTokens.HueAccentTwo400
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentTwo100,
-        text: odysseyDesignTokens.HueAccentTwo700
+        text: odysseyDesignTokens.HueAccentTwo700,
+        textDisabled: odysseyDesignTokens.HueAccentTwo300
       }),
       hover: odysseyDesignTokens.HueAccentTwo200,
       active: odysseyDesignTokens.HueAccentTwo300,
       border: odysseyDesignTokens.HueAccentTwo200,
       deleteIcon: odysseyDesignTokens.HueAccentTwo500,
-      deleteIconHover: odysseyDesignTokens.HueAccentTwo700
+      deleteIconHover: odysseyDesignTokens.HueAccentTwo700,
+      icon: odysseyDesignTokens.HueAccentTwo700,
+      iconDisabled: odysseyDesignTokens.HueAccentTwo300
     },
     accentThree: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentThree200,
-        text: odysseyDesignTokens.HueAccentThree700
+        text: odysseyDesignTokens.HueAccentThree700,
+        textDisabled: odysseyDesignTokens.HueAccentThree400
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentThree100,
-        text: odysseyDesignTokens.HueAccentThree700
+        text: odysseyDesignTokens.HueAccentThree700,
+        textDisabled: odysseyDesignTokens.HueAccentThree300
       }),
       hover: odysseyDesignTokens.HueAccentThree200,
       active: odysseyDesignTokens.HueAccentThree300,
       border: odysseyDesignTokens.HueAccentThree200,
       deleteIcon: odysseyDesignTokens.HueAccentThree500,
-      deleteIconHover: odysseyDesignTokens.HueAccentThree700
+      deleteIconHover: odysseyDesignTokens.HueAccentThree700,
+      icon: odysseyDesignTokens.HueAccentThree700,
+      iconDisabled: odysseyDesignTokens.HueAccentThree300
     },
     accentFour: {
       ...(contrastMode === "lowContrast" && {
         background: odysseyDesignTokens.HueAccentFour200,
-        text: odysseyDesignTokens.HueAccentFour700
+        text: odysseyDesignTokens.HueAccentFour700,
+        textDisabled: odysseyDesignTokens.HueAccentFour400
       }),
       ...(contrastMode === "highContrast" && {
         background: odysseyDesignTokens.HueAccentFour100,
-        text: odysseyDesignTokens.HueAccentFour700
+        text: odysseyDesignTokens.HueAccentFour700,
+        textDisabled: odysseyDesignTokens.HueAccentFour300
       }),
       hover: odysseyDesignTokens.HueAccentFour200,
       active: odysseyDesignTokens.HueAccentFour300,
       border: odysseyDesignTokens.HueAccentFour200,
       deleteIcon: odysseyDesignTokens.HueAccentFour500,
-      deleteIconHover: odysseyDesignTokens.HueAccentFour700
+      deleteIconHover: odysseyDesignTokens.HueAccentFour700,
+      icon: odysseyDesignTokens.HueAccentFour700,
+      iconDisabled: odysseyDesignTokens.HueAccentFour300
     }
   };
   return colors[colorVariant] || colors.default;
@@ -119,13 +143,19 @@ const StyledTag = styled(_Chip, {
 })(({
   colorVariant,
   contrastMode,
-  odysseyDesignTokens
+  odysseyDesignTokens,
+  clickable
 }) => {
   const colors = getChipColors(colorVariant, odysseyDesignTokens, contrastMode);
   return {
     backgroundColor: colors.background,
     color: colors.text,
-    borderColor: colors.border,
+    ...(clickable === true && {
+      borderColor: colors.border
+    }),
+    ...(clickable === false && {
+      borderColor: "transparent"
+    }),
     "&.MuiChip-clickable:hover": {
       backgroundColor: colors.hover
     },
@@ -133,10 +163,15 @@ const StyledTag = styled(_Chip, {
       backgroundColor: colors.active
     },
     "&.Mui-disabled": {
-      "& .MuiChip-deleteIcon": {
-        color: odysseyDesignTokens.HueNeutral300
+      color: colors.textDisabled,
+      borderColor: colors.border,
+      "& .MuiChip-icon, & .MuiChip-deleteIcon": {
+        color: colors.iconDisabled
       }
     },
+    "& .MuiChip-icon": {
+      color: colors.icon
+    },
     "& .MuiChip-deleteIcon": {
       color: colors.deleteIcon,
       "&:hover": {
@@ -170,7 +205,7 @@ const Tag = ({
     "data-se": testId,
     colorVariant: colorVariant,
     odysseyDesignTokens: odysseyDesignTokens,
-    contrastMode: contrastMode,
+    contrastMode: "highContrast",
     disabled: isDisabled,
     icon: icon,
     label: label,