@okta/odyssey-react-mui 1.6.0 → 1.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/OdysseyCacheProvider.js +7 -1
  3. package/dist/OdysseyCacheProvider.js.map +1 -1
  4. package/dist/OdysseyProvider.js +3 -4
  5. package/dist/OdysseyProvider.js.map +1 -1
  6. package/dist/OdysseyThemeProvider.js +3 -3
  7. package/dist/OdysseyThemeProvider.js.map +1 -1
  8. package/dist/Tooltip.js +5 -1
  9. package/dist/Tooltip.js.map +1 -1
  10. package/dist/{createShadowDom.js → createShadowRootElement.js} +6 -11
  11. package/dist/createShadowRootElement.js.map +1 -0
  12. package/dist/index.js +1 -1
  13. package/dist/index.js.map +1 -1
  14. package/dist/src/OdysseyCacheProvider.d.ts +2 -2
  15. package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
  16. package/dist/src/OdysseyProvider.d.ts +1 -1
  17. package/dist/src/OdysseyProvider.d.ts.map +1 -1
  18. package/dist/src/OdysseyThemeProvider.d.ts +2 -2
  19. package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
  20. package/dist/src/Tooltip.d.ts +2 -1
  21. package/dist/src/Tooltip.d.ts.map +1 -1
  22. package/dist/src/{createShadowDom.d.ts → createShadowRootElement.d.ts} +2 -5
  23. package/dist/src/createShadowRootElement.d.ts.map +1 -0
  24. package/dist/src/index.d.ts +1 -1
  25. package/dist/src/index.d.ts.map +1 -1
  26. package/dist/src/theme/components.d.ts +2 -2
  27. package/dist/src/theme/components.d.ts.map +1 -1
  28. package/dist/src/theme/createOdysseyMuiTheme.d.ts +2 -2
  29. package/dist/theme/components.js +15 -12
  30. package/dist/theme/components.js.map +1 -1
  31. package/dist/theme/createOdysseyMuiTheme.js +2 -2
  32. package/dist/theme/createOdysseyMuiTheme.js.map +1 -1
  33. package/dist/tsconfig.production.tsbuildinfo +1 -1
  34. package/package.json +3 -3
  35. package/src/OdysseyCacheProvider.tsx +12 -2
  36. package/src/OdysseyProvider.tsx +3 -4
  37. package/src/OdysseyThemeProvider.tsx +4 -4
  38. package/src/Tooltip.tsx +7 -2
  39. package/src/createShadowRootElement.ts +21 -0
  40. package/src/index.ts +1 -1
  41. package/src/theme/components.tsx +16 -13
  42. package/src/theme/createOdysseyMuiTheme.ts +3 -3
  43. package/dist/createShadowDom.js.map +0 -1
  44. package/dist/src/createShadowDom.d.ts.map +0 -1
  45. package/src/createShadowDom.ts +0 -46
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@okta/odyssey-react-mui",
3
- "version": "1.6.0",
3
+ "version": "1.6.1",
4
4
  "description": "React MUI components for Odyssey, Okta's design system",
5
5
  "author": "Okta, Inc.",
6
6
  "license": "Apache-2.0",
@@ -51,7 +51,7 @@
51
51
  "@mui/system": "^5.14.9",
52
52
  "@mui/utils": "^5.11.2",
53
53
  "@mui/x-date-pickers": "^5.0.15",
54
- "@okta/odyssey-design-tokens": "1.6.0",
54
+ "@okta/odyssey-design-tokens": "1.6.1",
55
55
  "date-fns": "^2.30.0",
56
56
  "i18next": "^23.5.1",
57
57
  "material-react-table": "^1.14.0",
@@ -63,5 +63,5 @@
63
63
  "react": ">=17 <19",
64
64
  "react-dom": ">=17 <19"
65
65
  },
66
- "gitHead": "03b8e69263df83250402101d7637a5ede3578099"
66
+ "gitHead": "162c333bbd49eea327a699b1b0fe883f8c11425d"
67
67
  }
package/src/OdysseyCacheProvider.tsx CHANGED
@@ -28,19 +28,29 @@ export type OdysseyCacheProviderProps = {
28
28
  * Emotion renders into this HTML element.
29
29
  * When enabling this prop, Emotion renders at the top of this component rather than the bottom like it does in the HTML `<head>`.
30
30
  */
31
- emotionRootElement?: HTMLStyleElement;
32
31
  nonce?: string;
32
+ shadowDomElement?: HTMLDivElement;
33
33
  stylisPlugins?: StylisPlugin[];
34
34
  };
35
35
 
36
36
  const OdysseyCacheProvider = ({
37
37
  children,
38
- emotionRootElement,
39
38
  nonce,
39
+ shadowDomElement,
40
40
  stylisPlugins,
41
41
  }: OdysseyCacheProviderProps) => {
42
42
  const uniqueAlphabeticalId = useUniqueAlphabeticalId();
43
43
 
44
+ const emotionRootElement = useMemo(() => {
45
+ const emotionRootElement = document.createElement("div");
46
+
47
+ emotionRootElement.setAttribute("data-emotion-root", "data-emotion-root");
48
+
49
+ shadowDomElement?.prepend?.(emotionRootElement);
50
+
51
+ return emotionRootElement;
52
+ }, [shadowDomElement]);
53
+
44
54
  const emotionCache = useMemo(
45
55
  () =>
46
56
  createCache({
package/src/OdysseyProvider.tsx CHANGED
@@ -35,8 +35,7 @@ export type OdysseyProviderProps = OdysseyCacheProviderProps &
35
35
  const OdysseyProvider = ({
36
36
  children,
37
37
  designTokensOverride,
38
- emotionRootElement,
39
- shadowRootElement,
38
+ shadowDomElement,
40
39
  languageCode,
41
40
  nonce,
42
41
  stylisPlugins,
@@ -44,13 +43,13 @@ const OdysseyProvider = ({
44
43
  translationOverrides,
45
44
  }: OdysseyProviderProps) => (
46
45
  <OdysseyCacheProvider
47
- emotionRootElement={emotionRootElement}
48
46
  nonce={nonce}
47
+ shadowDomElement={shadowDomElement}
49
48
  stylisPlugins={stylisPlugins}
50
49
  >
51
50
  <OdysseyThemeProvider
52
51
  designTokensOverride={designTokensOverride}
53
- shadowRootElement={shadowRootElement}
52
+ shadowDomElement={shadowDomElement}
54
53
  themeOverride={themeOverride}
55
54
  >
56
55
  <ScopedCssBaseline>
package/src/OdysseyThemeProvider.tsx CHANGED
@@ -25,14 +25,14 @@ import { OdysseyDesignTokensContext } from "./OdysseyDesignTokensContext";
25
25
  export type OdysseyThemeProviderProps = {
26
26
  children: ReactNode;
27
27
  designTokensOverride?: DesignTokensOverride;
28
- shadowRootElement?: HTMLDivElement;
28
+ shadowDomElement?: HTMLDivElement;
29
29
  themeOverride?: ThemeOptions;
30
30
  };
31
31
 
32
32
  const OdysseyThemeProvider = ({
33
33
  children,
34
34
  designTokensOverride,
35
- shadowRootElement,
35
+ shadowDomElement,
36
36
  themeOverride,
37
37
  }: OdysseyThemeProviderProps) => {
38
38
  const odysseyTokens = useMemo(
@@ -43,9 +43,9 @@ const OdysseyThemeProvider = ({
43
43
  () =>
44
44
  createOdysseyMuiTheme({
45
45
  odysseyTokens,
46
- shadowRootElement,
46
+ shadowDomElement,
47
47
  }),
48
- [odysseyTokens, shadowRootElement]
48
+ [odysseyTokens, shadowDomElement]
49
49
  );
50
50
 
51
51
  const customOdysseyTheme = useMemo(
package/src/Tooltip.tsx CHANGED
@@ -14,7 +14,7 @@ import { Tooltip as MuiTooltip } from "@mui/material";
14
14
  import type { TooltipProps as MuiTooltipProps } from "@mui/material";
15
15
 
16
16
  import { MuiPropsChild } from "./MuiPropsChild";
17
- import { ReactElement } from "react";
17
+ import { ReactElement, memo } from "react";
18
18
  import { SeleniumProps } from "./SeleniumProps";
19
19
 
20
20
  export type TooltipProps = {
@@ -36,7 +36,7 @@ export type TooltipProps = {
36
36
  text: string;
37
37
  } & SeleniumProps;
38
38
 
39
- export const Tooltip = ({
39
+ const Tooltip = ({
40
40
  ariaType,
41
41
  children,
42
42
  placement = "top",
@@ -52,3 +52,8 @@ export const Tooltip = ({
52
52
  <MuiPropsChild>{children}</MuiPropsChild>
53
53
  </MuiTooltip>
54
54
  );
55
+
56
+ const MemoizedTooltip = memo(Tooltip);
57
+ MemoizedTooltip.displayName = "Tooltip";
58
+
59
+ export { MemoizedTooltip as Tooltip };
package/src/createShadowRootElement.ts ADDED
@@ -0,0 +1,21 @@
1
+ /*!
2
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
+ *
5
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
+ * Unless required by applicable law or agreed to in writing, software
7
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
+ *
10
+ * See the License for the specific language governing permissions and limitations under the License.
11
+ */
12
+
13
+ export const createShadowRootElement = (containerElement: HTMLElement) => {
14
+ const shadowRoot = containerElement.attachShadow({ mode: "open" });
15
+
16
+ const ShadowRootElement = document.createElement("div");
17
+
18
+ shadowRoot.append(ShadowRootElement);
19
+
20
+ return createShadowRootElement;
21
+ };
package/src/index.ts CHANGED
@@ -66,7 +66,7 @@ export * from "./Callout";
66
66
  export * from "./Checkbox";
67
67
  export * from "./CheckboxGroup";
68
68
  export * from "./CircularProgress";
69
- export * from "./createShadowDom";
69
+ export * from "./createShadowRootElement";
70
70
  export * from "./createUniqueId";
71
71
  export * from "./Dialog";
72
72
  export * from "./Fieldset";
package/src/theme/components.tsx CHANGED
@@ -53,10 +53,10 @@ import { CSSProperties } from "react";
53
53
 
54
54
  export const components = ({
55
55
  odysseyTokens,
56
- shadowRootElement,
56
+ shadowDomElement,
57
57
  }: {
58
58
  odysseyTokens: DesignTokens;
59
- shadowRootElement?: HTMLDivElement;
59
+ shadowDomElement?: HTMLDivElement;
60
60
  }): ThemeOptions["components"] => {
61
61
  return {
62
62
  MuiAccordion: {
@@ -788,7 +788,7 @@ export const components = ({
788
788
  [`&.${chipClasses.disabled}`]: {
789
789
  opacity: 1,
790
790
  pointerEvents: "none",
791
- backgroundColor: odysseyTokens.HueNeutral50,
791
+ backgroundColor: odysseyTokens.HueNeutral200,
792
792
  color: odysseyTokens.TypographyColorDisabled,
793
793
  },
794
794
 
@@ -908,6 +908,11 @@ export const components = ({
908
908
 
909
909
  label: {
910
910
  padding: 0,
911
+
912
+ [`.${inputBaseClasses.root}.${inputBaseClasses.disabled} &`]: {
913
+ color: odysseyTokens.TypographyColorDisabled,
914
+ WebkitTextFillColor: odysseyTokens.TypographyColorDisabled,
915
+ } satisfies CSSProperties,
911
916
  },
912
917
 
913
918
  deleteIcon: {
@@ -1854,7 +1859,7 @@ export const components = ({
1854
1859
  },
1855
1860
  MuiModal: {
1856
1861
  defaultProps: {
1857
- container: shadowRootElement,
1862
+ container: shadowDomElement,
1858
1863
  },
1859
1864
  },
1860
1865
  MuiNativeSelect: {
@@ -1894,7 +1899,7 @@ export const components = ({
1894
1899
  },
1895
1900
  MuiPopover: {
1896
1901
  defaultProps: {
1897
- container: shadowRootElement,
1902
+ container: shadowDomElement,
1898
1903
  },
1899
1904
  styleOverrides: {
1900
1905
  paper: {
@@ -1907,7 +1912,7 @@ export const components = ({
1907
1912
  },
1908
1913
  MuiPopper: {
1909
1914
  defaultProps: {
1910
- container: shadowRootElement,
1915
+ container: shadowDomElement,
1911
1916
  },
1912
1917
  },
1913
1918
  MuiRadio: {
@@ -2075,19 +2080,17 @@ export const components = ({
2075
2080
  maxWidth: `calc(${odysseyTokens.TypographyLineLengthMax} / 2)`,
2076
2081
  minWidth: "unset",
2077
2082
  minHeight: "unset",
2078
- padding: `${odysseyTokens.Spacing4} 0`,
2083
+ padding: `${odysseyTokens.Spacing4} ${odysseyTokens.Spacing1}`,
2084
+ fontSize: odysseyTokens.TypographySizeHeading6,
2079
2085
  fontFamily: odysseyTokens.TypographyFamilyHeading,
2080
2086
  lineHeight: odysseyTokens.TypographyLineHeightUi,
2081
2087
  overflow: "visible",
2082
-
2083
- ...(ownerState.textColor === "inherit" && {
2084
- color: "inherit",
2085
- opacity: 1,
2086
- }),
2088
+ color: odysseyTokens.HueNeutral600,
2089
+ opacity: 1,
2087
2090
 
2088
2091
  ...(ownerState.selected == true && {
2089
2092
  color: odysseyTokens.TypographyColorAction,
2090
- fontWeight: odysseyTokens.TypographyWeightBodyBold,
2093
+ fontWeight: odysseyTokens.TypographyWeightHeading,
2091
2094
  }),
2092
2095
 
2093
2096
  ...(ownerState.disabled && {
package/src/theme/createOdysseyMuiTheme.ts CHANGED
@@ -29,15 +29,15 @@ export type DesignTokensOverride = Partial<typeof Tokens>;
29
29
 
30
30
  export const createOdysseyMuiTheme = ({
31
31
  odysseyTokens,
32
- shadowRootElement,
32
+ shadowDomElement,
33
33
  }: {
34
34
  odysseyTokens: DesignTokens;
35
- shadowRootElement?: HTMLDivElement;
35
+ shadowDomElement?: HTMLDivElement;
36
36
  }) =>
37
37
  createTheme({
38
38
  components: components({
39
39
  odysseyTokens,
40
- shadowRootElement,
40
+ shadowDomElement,
41
41
  }),
42
42
  mixins: mixins({ odysseyTokens }),
43
43
  palette: palette({ odysseyTokens }),
package/dist/createShadowDom.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"createShadowDom.js","names":["createShadowDom","containerElement","shadowContainer","attachShadow","mode","emotionRootElement","document","createElement","shadowRootElement","appendChild"],"sources":["../src/createShadowDom.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 createShadowDom = (containerElement: HTMLElement) => {\n const shadowContainer = containerElement.attachShadow({ mode: \"open\" });\n const emotionRootElement = document.createElement(\"style\");\n const shadowRootElement = document.createElement(\"div\");\n\n shadowContainer.appendChild(emotionRootElement);\n shadowContainer.appendChild(shadowRootElement);\n\n return {\n emotionRootElement,\n shadowRootElement,\n };\n};\n\n// --DOCS--\n\n// const {\n// emotionRootElement,\n// shadowRootElement,\n// } = (\n// createShadowDom(\n// document.querySelector('#root') as HTMLElement\n// )\n// )\n\n// ReactDOM\n// .createRoot(\n// shadowRootElement\n// )\n// .render(\n// <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>\n// <App />\n// </OdysseyProvider>\n// )\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAO,MAAMA,eAAe,GAAIC,gBAA6B,IAAK;EAChE,MAAMC,eAAe,GAAGD,gBAAgB,CAACE,YAAY,CAAC;IAAEC,IAAI,EAAE;EAAO,CAAC,CAAC;EACvE,MAAMC,kBAAkB,GAAGC,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;EAC1D,MAAMC,iBAAiB,GAAGF,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;EAEvDL,eAAe,CAACO,WAAW,CAACJ,kBAAkB,CAAC;EAC/CH,eAAe,CAACO,WAAW,CAACD,iBAAiB,CAAC;EAE9C,OAAO;IACLH,kBAAkB;IAClBG;EACF,CAAC;AACH,CAAC"}
package/dist/src/createShadowDom.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"createShadowDom.d.ts","sourceRoot":"","sources":["../../src/createShadowDom.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,eAAe,qBAAsB,WAAW;;;CAY5D,CAAC"}
package/src/createShadowDom.ts DELETED
@@ -1,46 +0,0 @@
1
- /*!
2
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
- *
5
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
- * Unless required by applicable law or agreed to in writing, software
7
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
- *
10
- * See the License for the specific language governing permissions and limitations under the License.
11
- */
12
-
13
- export const createShadowDom = (containerElement: HTMLElement) => {
14
- const shadowContainer = containerElement.attachShadow({ mode: "open" });
15
- const emotionRootElement = document.createElement("style");
16
- const shadowRootElement = document.createElement("div");
17
-
18
- shadowContainer.appendChild(emotionRootElement);
19
- shadowContainer.appendChild(shadowRootElement);
20
-
21
- return {
22
- emotionRootElement,
23
- shadowRootElement,
24
- };
25
- };
26
-
27
- // --DOCS--
28
-
29
- // const {
30
- // emotionRootElement,
31
- // shadowRootElement,
32
- // } = (
33
- // createShadowDom(
34
- // document.querySelector('#root') as HTMLElement
35
- // )
36
- // )
37
-
38
- // ReactDOM
39
- // .createRoot(
40
- // shadowRootElement
41
- // )
42
- // .render(
43
- // <OdysseyProvider emotionRootElement={emotionRootElement} shadowRootElement={shadowRootElement}>
44
- // <App />
45
- // </OdysseyProvider>
46
- // )