@okta/odyssey-react-mui 1.1.1 → 1.4.0

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 (142) hide show
  1. package/CHANGELOG.md +42 -0
  2. package/README.md +1 -1
  3. package/dist/Autocomplete.js +13 -1
  4. package/dist/Autocomplete.js.map +1 -1
  5. package/dist/Breadcrumbs.js +146 -0
  6. package/dist/Breadcrumbs.js.map +1 -0
  7. package/dist/Link.js +3 -1
  8. package/dist/Link.js.map +1 -1
  9. package/dist/MenuButton.js.map +1 -1
  10. package/dist/OdysseyCacheProvider.js +4 -1
  11. package/dist/OdysseyCacheProvider.js.map +1 -1
  12. package/dist/OdysseyProvider.js +5 -1
  13. package/dist/OdysseyProvider.js.map +1 -1
  14. package/dist/OdysseyThemeProvider.js +5 -1
  15. package/dist/OdysseyThemeProvider.js.map +1 -1
  16. package/dist/OdysseyTranslationProvider.js +1 -1
  17. package/dist/OdysseyTranslationProvider.js.map +1 -1
  18. package/dist/PasswordField.js +11 -3
  19. package/dist/PasswordField.js.map +1 -1
  20. package/dist/Select.js +34 -33
  21. package/dist/Select.js.map +1 -1
  22. package/dist/Tabs.js +8 -6
  23. package/dist/Tabs.js.map +1 -1
  24. package/dist/Typography.js +0 -22
  25. package/dist/Typography.js.map +1 -1
  26. package/dist/createShadowDom.js +26 -0
  27. package/dist/createShadowDom.js.map +1 -0
  28. package/dist/{OdysseyI18n.js → i18n.js} +3 -2
  29. package/dist/i18n.js.map +1 -0
  30. package/dist/index.js +2 -0
  31. package/dist/index.js.map +1 -1
  32. package/dist/labs/GroupPicker.js +190 -0
  33. package/dist/labs/GroupPicker.js.map +1 -0
  34. package/dist/labs/datePickerTheme.js +4 -2
  35. package/dist/labs/datePickerTheme.js.map +1 -1
  36. package/dist/labs/index.js +1 -0
  37. package/dist/labs/index.js.map +1 -1
  38. package/dist/properties/ts/odyssey-react-mui.js +4 -0
  39. package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
  40. package/dist/src/Autocomplete.d.ts +23 -3
  41. package/dist/src/Autocomplete.d.ts.map +1 -1
  42. package/dist/src/Breadcrumbs.d.ts +31 -0
  43. package/dist/src/Breadcrumbs.d.ts.map +1 -0
  44. package/dist/src/Link.d.ts +6 -1
  45. package/dist/src/Link.d.ts.map +1 -1
  46. package/dist/src/MenuButton.d.ts +1 -1
  47. package/dist/src/MenuButton.d.ts.map +1 -1
  48. package/dist/src/OdysseyCacheProvider.d.ts +6 -1
  49. package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
  50. package/dist/src/OdysseyProvider.d.ts +1 -1
  51. package/dist/src/OdysseyProvider.d.ts.map +1 -1
  52. package/dist/src/OdysseyThemeProvider.d.ts +2 -1
  53. package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
  54. package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
  55. package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
  56. package/dist/src/PasswordField.d.ts +8 -0
  57. package/dist/src/PasswordField.d.ts.map +1 -1
  58. package/dist/src/Select.d.ts +1 -54
  59. package/dist/src/Select.d.ts.map +1 -1
  60. package/dist/src/Tabs.d.ts +7 -2
  61. package/dist/src/Tabs.d.ts.map +1 -1
  62. package/dist/src/Typography.d.ts +11 -15
  63. package/dist/src/Typography.d.ts.map +1 -1
  64. package/dist/src/createShadowDom.d.ts +16 -0
  65. package/dist/src/createShadowDom.d.ts.map +1 -0
  66. package/dist/src/{OdysseyI18n.d.ts → i18n.d.ts} +7 -2
  67. package/dist/src/i18n.d.ts.map +1 -0
  68. package/dist/src/index.d.ts +2 -0
  69. package/dist/src/index.d.ts.map +1 -1
  70. package/dist/src/labs/GroupPicker.d.ts +25 -0
  71. package/dist/src/labs/GroupPicker.d.ts.map +1 -0
  72. package/dist/src/labs/index.d.ts +1 -0
  73. package/dist/src/labs/index.d.ts.map +1 -1
  74. package/dist/src/properties/ts/odyssey-react-mui.d.ts +4 -0
  75. package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  76. package/dist/src/theme/components.d.ts +4 -1
  77. package/dist/src/theme/components.d.ts.map +1 -1
  78. package/dist/src/theme/createOdysseyMuiTheme.d.ts +23 -0
  79. package/dist/src/theme/createOdysseyMuiTheme.d.ts.map +1 -0
  80. package/dist/src/theme/mixins.d.ts +3 -1
  81. package/dist/src/theme/mixins.d.ts.map +1 -1
  82. package/dist/src/theme/palette.d.ts +3 -1
  83. package/dist/src/theme/palette.d.ts.map +1 -1
  84. package/dist/src/theme/shape.d.ts +3 -1
  85. package/dist/src/theme/shape.d.ts.map +1 -1
  86. package/dist/src/theme/spacing.d.ts +3 -1
  87. package/dist/src/theme/spacing.d.ts.map +1 -1
  88. package/dist/src/theme/theme.d.ts +1 -8
  89. package/dist/src/theme/theme.d.ts.map +1 -1
  90. package/dist/src/theme/typography.d.ts +3 -1
  91. package/dist/src/theme/typography.d.ts.map +1 -1
  92. package/dist/theme/components.js +112 -67
  93. package/dist/theme/components.js.map +1 -1
  94. package/dist/theme/createOdysseyMuiTheme.js +51 -0
  95. package/dist/theme/createOdysseyMuiTheme.js.map +1 -0
  96. package/dist/theme/mixins.js +4 -1
  97. package/dist/theme/mixins.js.map +1 -1
  98. package/dist/theme/palette.js +4 -1
  99. package/dist/theme/palette.js.map +1 -1
  100. package/dist/theme/shape.js +4 -1
  101. package/dist/theme/shape.js.map +1 -1
  102. package/dist/theme/spacing.js +4 -1
  103. package/dist/theme/spacing.js.map +1 -1
  104. package/dist/theme/theme.js +1 -20
  105. package/dist/theme/theme.js.map +1 -1
  106. package/dist/theme/typography.js +4 -1
  107. package/dist/theme/typography.js.map +1 -1
  108. package/dist/tsconfig.production.tsbuildinfo +1 -1
  109. package/package.json +4 -4
  110. package/scripts/properties-to-ts.js +1 -1
  111. package/src/Autocomplete.tsx +47 -3
  112. package/src/Breadcrumbs.tsx +199 -0
  113. package/src/Link.tsx +7 -1
  114. package/src/MenuButton.tsx +2 -3
  115. package/src/OdysseyCacheProvider.tsx +9 -1
  116. package/src/OdysseyProvider.tsx +9 -2
  117. package/src/OdysseyThemeProvider.tsx +8 -2
  118. package/src/OdysseyTranslationProvider.test.tsx +2 -2
  119. package/src/OdysseyTranslationProvider.tsx +1 -1
  120. package/src/PasswordField.tsx +24 -8
  121. package/src/Select.tsx +147 -152
  122. package/src/Tabs.tsx +24 -12
  123. package/src/Typography.tsx +0 -26
  124. package/src/createShadowDom.ts +46 -0
  125. package/src/{OdysseyI18n.ts → i18n.ts} +2 -2
  126. package/src/index.ts +2 -0
  127. package/src/labs/GroupPicker.tsx +241 -0
  128. package/src/labs/README.md +1 -1
  129. package/src/labs/datePickerTheme.tsx +2 -2
  130. package/src/labs/index.ts +1 -0
  131. package/src/properties/odyssey-react-mui.properties +4 -0
  132. package/src/properties/ts/odyssey-react-mui.ts +1 -1
  133. package/src/theme/components.tsx +61 -13
  134. package/src/theme/createOdysseyMuiTheme.ts +47 -0
  135. package/src/theme/mixins.ts +5 -1
  136. package/src/theme/palette.ts +5 -3
  137. package/src/theme/shape.ts +5 -1
  138. package/src/theme/spacing.ts +5 -3
  139. package/src/theme/theme.ts +1 -26
  140. package/src/theme/typography.ts +5 -3
  141. package/dist/OdysseyI18n.js.map +0 -1
  142. package/dist/src/OdysseyI18n.d.ts.map +0 -1
@@ -0,0 +1,241 @@
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
+ import type { AutocompleteGetTagProps } from "@mui/material/useAutocomplete";
14
+
15
+ import {
16
+ Autocomplete as MuiAutocomplete,
17
+ Avatar as MuiAvatar,
18
+ Box,
19
+ InputBase,
20
+ } from "@mui/material";
21
+ import { avatarClasses } from "@mui/material/Avatar";
22
+ import { memo, useCallback } from "react";
23
+
24
+ import { AutocompleteProps } from "../Autocomplete";
25
+ import { Field } from "../Field";
26
+ import { Subordinate } from "../Typography";
27
+ import { Tag } from "../Tag";
28
+ import { useOdysseyDesignTokens } from "../OdysseyDesignTokensContext";
29
+ import { UserIcon, GridIcon, GroupIcon } from "../icons.generated";
30
+
31
+ export type GroupPickerOptionType = {
32
+ appsCount?: number;
33
+ description: string;
34
+ groupPushMappingsCount?: number;
35
+ id: string;
36
+ logo?: string;
37
+ name: string;
38
+ usersCount?: number;
39
+ };
40
+
41
+ export type GroupPickerProps<
42
+ GroupPickerOptionType,
43
+ HasMultipleChoices extends boolean | undefined,
44
+ IsCustomValueAllowed extends boolean | undefined
45
+ > = AutocompleteProps<
46
+ GroupPickerOptionType,
47
+ HasMultipleChoices,
48
+ IsCustomValueAllowed
49
+ >;
50
+
51
+ const avatarImageSizeSmall = 16;
52
+ const avatarImageSizeMedium = 24;
53
+
54
+ const GroupPicker = <
55
+ OptionType extends GroupPickerOptionType,
56
+ HasMultipleChoices extends boolean | undefined,
57
+ IsCustomValueAllowed extends boolean | undefined
58
+ >({
59
+ hasMultipleChoices,
60
+ isCustomValueAllowed,
61
+ isDisabled,
62
+ isLoading,
63
+ isOptional = false,
64
+ isReadOnly,
65
+ hint,
66
+ label,
67
+ onChange,
68
+ onInputChange,
69
+ options,
70
+ value,
71
+ testId,
72
+ }: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
73
+ const odysseyDesignTokens = useOdysseyDesignTokens();
74
+
75
+ const isOptionEqualToValue = useCallback((sourceValue, targetValue) => {
76
+ return sourceValue.id === targetValue.id;
77
+ }, []);
78
+
79
+ const getOptionLabel = useCallback((option) => {
80
+ return option.name;
81
+ }, []);
82
+
83
+ const renderOption = useCallback(
84
+ (props, option) => {
85
+ return (
86
+ <li {...props} key={option.id}>
87
+ <Box
88
+ sx={{
89
+ alignItems: "top",
90
+ display: "flex",
91
+ flexDirection: "row",
92
+ }}
93
+ >
94
+ <Box sx={{ paddingRight: odysseyDesignTokens.Spacing2 }}>
95
+ <MuiAvatar
96
+ alt={option.name}
97
+ src={option.logo}
98
+ sx={{
99
+ [`.${avatarClasses.fallback}`]: {
100
+ visibility: "hidden",
101
+ },
102
+ background: "transparent",
103
+ height: avatarImageSizeMedium,
104
+ width: avatarImageSizeMedium,
105
+ }}
106
+ />
107
+ </Box>
108
+ <Box>
109
+ {option.name}
110
+ <Subordinate>{option.description}</Subordinate>
111
+ <Box
112
+ sx={{
113
+ display: "flex",
114
+ flexDirection: "row",
115
+ paddingTop: odysseyDesignTokens.Spacing1,
116
+ }}
117
+ >
118
+ {typeof option.usersCount === "number" && (
119
+ <Box
120
+ sx={{
121
+ display: "flex",
122
+ flexDirection: "row",
123
+ paddingRight: odysseyDesignTokens.Spacing4,
124
+ }}
125
+ >
126
+ <UserIcon />
127
+ {option.usersCount}
128
+ </Box>
129
+ )}
130
+ {typeof option.appsCount === "number" && (
131
+ <Box
132
+ sx={{
133
+ display: "flex",
134
+ flexDirection: "row",
135
+ paddingRight: odysseyDesignTokens.Spacing4,
136
+ }}
137
+ >
138
+ <GridIcon />
139
+ {option.appsCount}
140
+ </Box>
141
+ )}
142
+ {typeof option.groupPushMappingsCount === "number" && (
143
+ <Box sx={{ display: "flex", flexDirection: "row" }}>
144
+ <GroupIcon />
145
+ {option.groupPushMappingsCount}
146
+ </Box>
147
+ )}
148
+ </Box>
149
+ </Box>
150
+ </Box>
151
+ </li>
152
+ );
153
+ },
154
+ [odysseyDesignTokens]
155
+ );
156
+
157
+ const renderTags = useCallback(
158
+ (values: OptionType[], getTagProps: AutocompleteGetTagProps) =>
159
+ values.map((option, index) => {
160
+ const { key, onDelete } = getTagProps({ index });
161
+ return (
162
+ <Box
163
+ key={key}
164
+ sx={{
165
+ margin: odysseyDesignTokens.Spacing1,
166
+ }}
167
+ >
168
+ <Tag
169
+ icon={
170
+ <MuiAvatar
171
+ alt={option.name}
172
+ src={option.logo}
173
+ sx={{
174
+ [`.${avatarClasses.fallback}`]: {
175
+ visibility: "hidden",
176
+ },
177
+ background: "transparent",
178
+ height: avatarImageSizeSmall,
179
+ width: avatarImageSizeSmall,
180
+ }}
181
+ />
182
+ }
183
+ label={option.name}
184
+ onRemove={onDelete}
185
+ />
186
+ </Box>
187
+ );
188
+ }),
189
+ [odysseyDesignTokens]
190
+ );
191
+
192
+ const renderInput = useCallback(
193
+ ({ InputLabelProps, InputProps, ...params }) => (
194
+ <Field
195
+ fieldType="single"
196
+ hasVisibleLabel
197
+ id={InputLabelProps.htmlFor}
198
+ hint={hint}
199
+ label={label}
200
+ isOptional={isOptional}
201
+ renderFieldComponent={({ ariaDescribedBy, id }) => (
202
+ <InputBase
203
+ {...params}
204
+ {...InputProps}
205
+ aria-describedby={ariaDescribedBy}
206
+ id={id}
207
+ required={!isOptional}
208
+ />
209
+ )}
210
+ />
211
+ ),
212
+ [hint, isOptional, label]
213
+ );
214
+
215
+ return (
216
+ <MuiAutocomplete
217
+ // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
218
+ aria-disabled={isDisabled}
219
+ data-se={testId}
220
+ disabled={isDisabled}
221
+ filterSelectedOptions={true}
222
+ freeSolo={isCustomValueAllowed}
223
+ getOptionLabel={getOptionLabel}
224
+ isOptionEqualToValue={isOptionEqualToValue}
225
+ loading={isLoading}
226
+ multiple={hasMultipleChoices}
227
+ onChange={onChange}
228
+ onInputChange={onInputChange}
229
+ options={options}
230
+ readOnly={isReadOnly}
231
+ renderInput={renderInput}
232
+ renderOption={renderOption}
233
+ renderTags={renderTags}
234
+ value={value}
235
+ />
236
+ );
237
+ };
238
+
239
+ const MemoizedGroupPicker = memo(GroupPicker) as typeof GroupPicker;
240
+
241
+ export { MemoizedGroupPicker as GroupPicker };
@@ -37,7 +37,7 @@ bundled, and polyfilled for advanced use cases and browser support targets.
37
37
 
38
38
  ## License
39
39
 
40
- [Apache Version 2.0](https://github.com/okta/odyssey/blob/master/LICENSE)
40
+ [Apache Version 2.0](https://github.com/okta/odyssey/blob/main/LICENSE)
41
41
 
42
42
  ## Support Disclaimer
43
43
 
@@ -19,11 +19,11 @@ import {
19
19
  } from "../icons.generated";
20
20
  import { createOdysseyMuiTheme } from "../theme";
21
21
  import { ThemeOptions } from "@mui/material";
22
- import * as Tokens from "@okta/odyssey-design-tokens";
22
+ import * as odysseyTokens from "@okta/odyssey-design-tokens";
23
23
 
24
24
  const popupSpacingValue = 5;
25
25
 
26
- const odysseyTheme = createOdysseyMuiTheme(Tokens);
26
+ const odysseyTheme = createOdysseyMuiTheme({ odysseyTokens });
27
27
 
28
28
  type ThemeStyles = ({
29
29
  theme,
package/src/labs/index.ts CHANGED
@@ -22,3 +22,4 @@ export * from "./datePickerTheme";
22
22
  export * from "./materialReactTableTypes";
23
23
  export * from "./PaginatedTable";
24
24
  export * from "./StaticTable";
25
+ export * from "./GroupPicker";
@@ -1,6 +1,10 @@
1
+ breadcrumbs.home.text = Home
2
+ breadcrumbs.label.text = Breadcrumbs
1
3
  fielderror.screenreader.text = Error
2
4
  fieldlabel.optional.text = Optional
3
5
  fieldlabel.required.text = Required
6
+ passwordfield.icon.label.show = Show password
7
+ passwordfield.icon.label.hide = Hide password
4
8
  severity.error = error
5
9
  severity.info = info
6
10
  severity.success = success
@@ -1 +1 @@
1
- export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
1
+ export const translation = {"breadcrumbs.home.text":"Home","breadcrumbs.label.text":"Breadcrumbs","fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","passwordfield.icon.label.show":"Show password","passwordfield.icon.label.hide":"Hide password","severity.error":"error","severity.info":"info","severity.success":"success","severity.warning":"warning","table.error":"Error loading data.","table.fetchedrows.text":"Fetched {{totalRows}} row","table.fetchedrows.text_plural":"Fetched {{totalRows}} total rows","table.rows.text":"{{totalRows}} row","table.rows.text_plural":"{{totalRows}} rows","toast.close.text":"close"};
@@ -51,9 +51,13 @@ import {
51
51
  import { DesignTokens } from "./theme";
52
52
  import { CSSProperties } from "react";
53
53
 
54
- export const components = (
55
- odysseyTokens: DesignTokens
56
- ): ThemeOptions["components"] => {
54
+ export const components = ({
55
+ odysseyTokens,
56
+ shadowRootElement,
57
+ }: {
58
+ odysseyTokens: DesignTokens;
59
+ shadowRootElement?: HTMLDivElement;
60
+ }): ThemeOptions["components"] => {
57
61
  return {
58
62
  MuiAlert: {
59
63
  defaultProps: {
@@ -329,6 +333,40 @@ export const components = (
329
333
  }),
330
334
  },
331
335
  },
336
+ MuiBreadcrumbs: {
337
+ styleOverrides: {
338
+ li: {
339
+ fontSize: odysseyTokens.TypographySizeBody,
340
+ lineHeight: odysseyTokens.TypographyLineHeightUi,
341
+
342
+ "& > a, & > button": {
343
+ borderRadius: odysseyTokens.BorderRadiusTight,
344
+ color: odysseyTokens.TypographyColorSubordinate,
345
+ display: "flex",
346
+ gap: odysseyTokens.Spacing1,
347
+ padding: odysseyTokens.Spacing1,
348
+ transitionProperty: "color, background-color",
349
+ transitionDuration: "100ms",
350
+ transitionTimingFunction: "linear",
351
+
352
+ "&:hover": {
353
+ backgroundColor: odysseyTokens.HueNeutral200,
354
+ color: odysseyTokens.TypographyColorBody,
355
+ },
356
+
357
+ "&:focus-visible": {
358
+ boxShadow: `0 0 0 2px ${odysseyTokens.HueNeutralWhite}, 0 0 0 4px ${odysseyTokens.PalettePrimaryMain}`,
359
+ outline: "2px solid transparent",
360
+ outlineOffset: "1px",
361
+ },
362
+ },
363
+ },
364
+ separator: {
365
+ color: odysseyTokens.BorderColorDisplay,
366
+ marginInline: odysseyTokens.Spacing1,
367
+ },
368
+ },
369
+ },
332
370
  MuiButton: {
333
371
  defaultProps: {
334
372
  variant: "primary",
@@ -684,10 +722,7 @@ export const components = (
684
722
  height: ".64em",
685
723
  marginInlineEnd: odysseyTokens.Spacing2,
686
724
  borderRadius: "100%",
687
- backgroundColor: "transparent",
688
- borderColor: odysseyTokens.TypographyColorBody,
689
- borderWidth: odysseyTokens.BorderWidthHeavy,
690
- borderStyle: odysseyTokens.BorderStyleMain,
725
+ backgroundColor: odysseyTokens.HueNeutral600,
691
726
  },
692
727
 
693
728
  [`&.${chipClasses.colorError}`]: {
@@ -1601,6 +1636,14 @@ export const components = (
1601
1636
  },
1602
1637
  },
1603
1638
  },
1639
+ MuiListItemIcon: {
1640
+ styleOverrides: {
1641
+ root: {
1642
+ minWidth: "unset",
1643
+ color: "inherit",
1644
+ },
1645
+ },
1646
+ },
1604
1647
  MuiListSubheader: {
1605
1648
  styleOverrides: {
1606
1649
  root: {
@@ -1694,12 +1737,9 @@ export const components = (
1694
1737
  }),
1695
1738
  },
1696
1739
  },
1697
- MuiListItemIcon: {
1698
- styleOverrides: {
1699
- root: {
1700
- minWidth: "unset",
1701
- color: "inherit",
1702
- },
1740
+ MuiModal: {
1741
+ defaultProps: {
1742
+ container: shadowRootElement,
1703
1743
  },
1704
1744
  },
1705
1745
  MuiNativeSelect: {
@@ -1720,6 +1760,9 @@ export const components = (
1720
1760
  },
1721
1761
  },
1722
1762
  MuiPopover: {
1763
+ defaultProps: {
1764
+ container: shadowRootElement,
1765
+ },
1723
1766
  styleOverrides: {
1724
1767
  paper: {
1725
1768
  marginBlockStart: odysseyTokens.Spacing1,
@@ -1729,6 +1772,11 @@ export const components = (
1729
1772
  },
1730
1773
  },
1731
1774
  },
1775
+ MuiPopper: {
1776
+ defaultProps: {
1777
+ container: shadowRootElement,
1778
+ },
1779
+ },
1732
1780
  MuiRadio: {
1733
1781
  defaultProps: {
1734
1782
  size: "small",
@@ -0,0 +1,47 @@
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
+ import { createTheme } from "@mui/material/styles";
14
+ import * as Tokens from "@okta/odyssey-design-tokens";
15
+
16
+ import { components } from "./components";
17
+ import { mixins } from "./mixins";
18
+ import { palette } from "./palette";
19
+ import { shape } from "./shape";
20
+ import { spacing } from "./spacing";
21
+ import { typography } from "./typography";
22
+ import "./components.types";
23
+ import "./mixins.types";
24
+ import "./palette.types";
25
+ import "./typography.types";
26
+
27
+ export type DesignTokens = typeof Tokens;
28
+ export type DesignTokensOverride = Partial<typeof Tokens>;
29
+
30
+ export const createOdysseyMuiTheme = ({
31
+ odysseyTokens,
32
+ shadowRootElement,
33
+ }: {
34
+ odysseyTokens: DesignTokens;
35
+ shadowRootElement?: HTMLDivElement;
36
+ }) =>
37
+ createTheme({
38
+ components: components({
39
+ odysseyTokens,
40
+ shadowRootElement,
41
+ }),
42
+ mixins: mixins({ odysseyTokens }),
43
+ palette: palette({ odysseyTokens }),
44
+ shape: shape({ odysseyTokens }),
45
+ spacing: spacing({ odysseyTokens }),
46
+ typography: typography({ odysseyTokens }),
47
+ });
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const mixins = (odysseyTokens: DesignTokens): ThemeOptions["mixins"] => {
17
+ export const mixins = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["mixins"] => {
18
22
  return {
19
23
  maxWidth: odysseyTokens.TypographyLineLengthMax,
20
24
  borderRadius: odysseyTokens.BorderRadiusMain,
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const palette = (
18
- odysseyTokens: DesignTokens
19
- ): ThemeOptions["palette"] => {
17
+ export const palette = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["palette"] => {
20
22
  return {
21
23
  mode: "light",
22
24
  common: {
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const shape = (odysseyTokens: DesignTokens): ThemeOptions["shape"] => {
17
+ export const shape = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["shape"] => {
18
22
  // Strip units from BorderRadiusBase to accommodate MUI's typing
19
23
  const NumericalBorderRadiusBase =
20
24
  typeof odysseyTokens.BorderRadiusMain === "string"
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import type { DesignTokens } from "./theme";
16
16
 
17
- export const spacing = (
18
- odysseyTokens: DesignTokens
19
- ): ThemeOptions["spacing"] => {
17
+ export const spacing = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["spacing"] => {
20
22
  return [
21
23
  odysseyTokens.Spacing0,
22
24
  odysseyTokens.Spacing1,
@@ -10,29 +10,4 @@
10
10
  * See the License for the specific language governing permissions and limitations under the License.
11
11
  */
12
12
 
13
- import { createTheme } from "@mui/material/styles";
14
- import * as Tokens from "@okta/odyssey-design-tokens";
15
-
16
- import { components } from "./components";
17
- import { mixins } from "./mixins";
18
- import { palette } from "./palette";
19
- import { shape } from "./shape";
20
- import { spacing } from "./spacing";
21
- import { typography } from "./typography";
22
- import "./components.types";
23
- import "./mixins.types";
24
- import "./palette.types";
25
- import "./typography.types";
26
-
27
- export type DesignTokens = typeof Tokens;
28
- export type DesignTokensOverride = Partial<typeof Tokens>;
29
-
30
- export const createOdysseyMuiTheme = (odysseyTokens: DesignTokens) =>
31
- createTheme({
32
- components: components(odysseyTokens),
33
- mixins: mixins(odysseyTokens),
34
- palette: palette(odysseyTokens),
35
- shape: shape(odysseyTokens),
36
- spacing: spacing(odysseyTokens),
37
- typography: typography(odysseyTokens),
38
- });
13
+ export * from "./createOdysseyMuiTheme";
@@ -14,9 +14,11 @@ import type { ThemeOptions } from "@mui/material";
14
14
 
15
15
  import { DesignTokens } from "./theme";
16
16
 
17
- export const typography = (
18
- odysseyTokens: DesignTokens
19
- ): ThemeOptions["typography"] => {
17
+ export const typography = ({
18
+ odysseyTokens,
19
+ }: {
20
+ odysseyTokens: DesignTokens;
21
+ }): ThemeOptions["typography"] => {
20
22
  return {
21
23
  htmlFontSize: 16,
22
24
  fontFamily: odysseyTokens.TypographyFamilyBody,
@@ -1 +0,0 @@
1
- {"version":3,"file":"OdysseyI18n.js","names":["i18n","initReactI18next","translation","cs","da","de","el","en","es","fi","fr","hu","id","it","ja","ko","ms","nb","nlNL","okPL","okSK","pl","ptBR","ro","ru","sv","th","tr","uk","vi","zhCN","znTW","supportedLanguages","defaultLNG","defaultNS","resources","nl_NL","ok_PL","ok_SK","pt_BR","zh_CN","zh_TW","use","init","ns","fallbackLng","supportedLngs","load","keySeparator","interpolation","escapeValue","skipOnVariables","react","useSuspense","bindI18nStore","Object","entries","forEach","_ref","locale","property","addResourceBundle"],"sources":["../src/OdysseyI18n.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\nimport i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\n\nimport { translation as cs } from \"./properties/ts/odyssey-react-mui_cs\";\nimport { translation as da } from \"./properties/ts/odyssey-react-mui_da\";\nimport { translation as de } from \"./properties/ts/odyssey-react-mui_de\";\nimport { translation as el } from \"./properties/ts/odyssey-react-mui_el\";\nimport { translation as en } from \"./properties/ts/odyssey-react-mui\";\nimport { translation as es } from \"./properties/ts/odyssey-react-mui_es\";\nimport { translation as fi } from \"./properties/ts/odyssey-react-mui_fi\";\nimport { translation as fr } from \"./properties/ts/odyssey-react-mui_fr\";\nimport { translation as hu } from \"./properties/ts/odyssey-react-mui_hu\";\nimport { translation as id } from \"./properties/ts/odyssey-react-mui_id\";\nimport { translation as it } from \"./properties/ts/odyssey-react-mui_it\";\nimport { translation as ja } from \"./properties/ts/odyssey-react-mui_ja\";\nimport { translation as ko } from \"./properties/ts/odyssey-react-mui_ko\";\nimport { translation as ms } from \"./properties/ts/odyssey-react-mui_ms\";\nimport { translation as nb } from \"./properties/ts/odyssey-react-mui_nb\";\nimport { translation as nlNL } from \"./properties/ts/odyssey-react-mui_nl_NL\";\nimport { translation as okPL } from \"./properties/ts/odyssey-react-mui_ok_PL\";\nimport { translation as okSK } from \"./properties/ts/odyssey-react-mui_ok_SK\";\nimport { translation as pl } from \"./properties/ts/odyssey-react-mui_pl\";\nimport { translation as ptBR } from \"./properties/ts/odyssey-react-mui_pt_BR\";\nimport { translation as ro } from \"./properties/ts/odyssey-react-mui_ro\";\nimport { translation as ru } from \"./properties/ts/odyssey-react-mui_ru\";\nimport { translation as sv } from \"./properties/ts/odyssey-react-mui_sv\";\nimport { translation as th } from \"./properties/ts/odyssey-react-mui_th\";\nimport { translation as tr } from \"./properties/ts/odyssey-react-mui_tr\";\nimport { translation as uk } from \"./properties/ts/odyssey-react-mui_uk\";\nimport { translation as vi } from \"./properties/ts/odyssey-react-mui_vi\";\nimport { translation as zhCN } from \"./properties/ts/odyssey-react-mui_zh_CN\";\nimport { translation as znTW } from \"./properties/ts/odyssey-react-mui_zh_TW\";\n\nimport {\n SupportedLanguages,\n supportedLanguages,\n} from \"./OdysseyTranslationProvider.types\";\n\nexport const defaultLNG: SupportedLanguages = \"en\";\nexport const defaultNS = \"translations\";\nexport const resources = {\n cs,\n da,\n de,\n el,\n en,\n es,\n fi,\n fr,\n hu,\n id,\n it,\n ja,\n ko,\n ms,\n nb,\n nl_NL: nlNL,\n ok_PL: okPL,\n ok_SK: okSK,\n pl,\n pt_BR: ptBR,\n ro,\n ru,\n sv,\n th,\n tr,\n uk,\n vi,\n zh_CN: zhCN,\n zh_TW: znTW,\n};\n\ni18n.use(initReactI18next).init({\n defaultNS,\n ns: [defaultNS],\n fallbackLng: defaultLNG,\n supportedLngs: supportedLanguages,\n load: \"currentOnly\",\n keySeparator: false,\n interpolation: {\n escapeValue: false, // react already safe from xss\n skipOnVariables: false, // to handle translations that use nesting\n },\n react: {\n useSuspense: false,\n bindI18nStore: \"added\",\n },\n});\n\nObject.entries(resources).forEach(([locale, property]) => {\n i18n.addResourceBundle(locale, defaultNS, property);\n});\n\n// eslint-disable-next-line import/no-default-export\nexport default i18n;\n"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"OdysseyI18n.d.ts","sourceRoot":"","sources":["../../src/OdysseyI18n.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,IAAI,MAAM,SAAS,CAAC;AAiC3B,OAAO,EACL,kBAAkB,EAEnB,MAAM,oCAAoC,CAAC;AAE5C,eAAO,MAAM,UAAU,EAAE,kBAAyB,CAAC;AACnD,eAAO,MAAM,SAAS,iBAAiB,CAAC;AACxC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BrB,CAAC;AAwBF,eAAe,IAAI,CAAC"}