@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.
- package/CHANGELOG.md +42 -0
- package/README.md +1 -1
- package/dist/Autocomplete.js +13 -1
- package/dist/Autocomplete.js.map +1 -1
- package/dist/Breadcrumbs.js +146 -0
- package/dist/Breadcrumbs.js.map +1 -0
- package/dist/Link.js +3 -1
- package/dist/Link.js.map +1 -1
- package/dist/MenuButton.js.map +1 -1
- package/dist/OdysseyCacheProvider.js +4 -1
- package/dist/OdysseyCacheProvider.js.map +1 -1
- package/dist/OdysseyProvider.js +5 -1
- package/dist/OdysseyProvider.js.map +1 -1
- package/dist/OdysseyThemeProvider.js +5 -1
- package/dist/OdysseyThemeProvider.js.map +1 -1
- package/dist/OdysseyTranslationProvider.js +1 -1
- package/dist/OdysseyTranslationProvider.js.map +1 -1
- package/dist/PasswordField.js +11 -3
- package/dist/PasswordField.js.map +1 -1
- package/dist/Select.js +34 -33
- package/dist/Select.js.map +1 -1
- package/dist/Tabs.js +8 -6
- package/dist/Tabs.js.map +1 -1
- package/dist/Typography.js +0 -22
- package/dist/Typography.js.map +1 -1
- package/dist/createShadowDom.js +26 -0
- package/dist/createShadowDom.js.map +1 -0
- package/dist/{OdysseyI18n.js → i18n.js} +3 -2
- package/dist/i18n.js.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -1
- package/dist/labs/GroupPicker.js +190 -0
- package/dist/labs/GroupPicker.js.map +1 -0
- package/dist/labs/datePickerTheme.js +4 -2
- package/dist/labs/datePickerTheme.js.map +1 -1
- package/dist/labs/index.js +1 -0
- package/dist/labs/index.js.map +1 -1
- package/dist/properties/ts/odyssey-react-mui.js +4 -0
- package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
- package/dist/src/Autocomplete.d.ts +23 -3
- package/dist/src/Autocomplete.d.ts.map +1 -1
- package/dist/src/Breadcrumbs.d.ts +31 -0
- package/dist/src/Breadcrumbs.d.ts.map +1 -0
- package/dist/src/Link.d.ts +6 -1
- package/dist/src/Link.d.ts.map +1 -1
- package/dist/src/MenuButton.d.ts +1 -1
- package/dist/src/MenuButton.d.ts.map +1 -1
- package/dist/src/OdysseyCacheProvider.d.ts +6 -1
- package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
- package/dist/src/OdysseyProvider.d.ts +1 -1
- package/dist/src/OdysseyProvider.d.ts.map +1 -1
- package/dist/src/OdysseyThemeProvider.d.ts +2 -1
- package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
- package/dist/src/PasswordField.d.ts +8 -0
- package/dist/src/PasswordField.d.ts.map +1 -1
- package/dist/src/Select.d.ts +1 -54
- package/dist/src/Select.d.ts.map +1 -1
- package/dist/src/Tabs.d.ts +7 -2
- package/dist/src/Tabs.d.ts.map +1 -1
- package/dist/src/Typography.d.ts +11 -15
- package/dist/src/Typography.d.ts.map +1 -1
- package/dist/src/createShadowDom.d.ts +16 -0
- package/dist/src/createShadowDom.d.ts.map +1 -0
- package/dist/src/{OdysseyI18n.d.ts → i18n.d.ts} +7 -2
- package/dist/src/i18n.d.ts.map +1 -0
- package/dist/src/index.d.ts +2 -0
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/labs/GroupPicker.d.ts +25 -0
- package/dist/src/labs/GroupPicker.d.ts.map +1 -0
- package/dist/src/labs/index.d.ts +1 -0
- package/dist/src/labs/index.d.ts.map +1 -1
- package/dist/src/properties/ts/odyssey-react-mui.d.ts +4 -0
- package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
- package/dist/src/theme/components.d.ts +4 -1
- package/dist/src/theme/components.d.ts.map +1 -1
- package/dist/src/theme/createOdysseyMuiTheme.d.ts +23 -0
- package/dist/src/theme/createOdysseyMuiTheme.d.ts.map +1 -0
- package/dist/src/theme/mixins.d.ts +3 -1
- package/dist/src/theme/mixins.d.ts.map +1 -1
- package/dist/src/theme/palette.d.ts +3 -1
- package/dist/src/theme/palette.d.ts.map +1 -1
- package/dist/src/theme/shape.d.ts +3 -1
- package/dist/src/theme/shape.d.ts.map +1 -1
- package/dist/src/theme/spacing.d.ts +3 -1
- package/dist/src/theme/spacing.d.ts.map +1 -1
- package/dist/src/theme/theme.d.ts +1 -8
- package/dist/src/theme/theme.d.ts.map +1 -1
- package/dist/src/theme/typography.d.ts +3 -1
- package/dist/src/theme/typography.d.ts.map +1 -1
- package/dist/theme/components.js +112 -67
- package/dist/theme/components.js.map +1 -1
- package/dist/theme/createOdysseyMuiTheme.js +51 -0
- package/dist/theme/createOdysseyMuiTheme.js.map +1 -0
- package/dist/theme/mixins.js +4 -1
- package/dist/theme/mixins.js.map +1 -1
- package/dist/theme/palette.js +4 -1
- package/dist/theme/palette.js.map +1 -1
- package/dist/theme/shape.js +4 -1
- package/dist/theme/shape.js.map +1 -1
- package/dist/theme/spacing.js +4 -1
- package/dist/theme/spacing.js.map +1 -1
- package/dist/theme/theme.js +1 -20
- package/dist/theme/theme.js.map +1 -1
- package/dist/theme/typography.js +4 -1
- package/dist/theme/typography.js.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/scripts/properties-to-ts.js +1 -1
- package/src/Autocomplete.tsx +47 -3
- package/src/Breadcrumbs.tsx +199 -0
- package/src/Link.tsx +7 -1
- package/src/MenuButton.tsx +2 -3
- package/src/OdysseyCacheProvider.tsx +9 -1
- package/src/OdysseyProvider.tsx +9 -2
- package/src/OdysseyThemeProvider.tsx +8 -2
- package/src/OdysseyTranslationProvider.test.tsx +2 -2
- package/src/OdysseyTranslationProvider.tsx +1 -1
- package/src/PasswordField.tsx +24 -8
- package/src/Select.tsx +147 -152
- package/src/Tabs.tsx +24 -12
- package/src/Typography.tsx +0 -26
- package/src/createShadowDom.ts +46 -0
- package/src/{OdysseyI18n.ts → i18n.ts} +2 -2
- package/src/index.ts +2 -0
- package/src/labs/GroupPicker.tsx +241 -0
- package/src/labs/README.md +1 -1
- package/src/labs/datePickerTheme.tsx +2 -2
- package/src/labs/index.ts +1 -0
- package/src/properties/odyssey-react-mui.properties +4 -0
- package/src/properties/ts/odyssey-react-mui.ts +1 -1
- package/src/theme/components.tsx +61 -13
- package/src/theme/createOdysseyMuiTheme.ts +47 -0
- package/src/theme/mixins.ts +5 -1
- package/src/theme/palette.ts +5 -3
- package/src/theme/shape.ts +5 -1
- package/src/theme/spacing.ts +5 -3
- package/src/theme/theme.ts +1 -26
- package/src/theme/typography.ts +5 -3
- package/dist/OdysseyI18n.js.map +0 -1
- 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 };
|
package/src/labs/README.md
CHANGED
|
@@ -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/
|
|
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
|
|
22
|
+
import * as odysseyTokens from "@okta/odyssey-design-tokens";
|
|
23
23
|
|
|
24
24
|
const popupSpacingValue = 5;
|
|
25
25
|
|
|
26
|
-
const odysseyTheme = createOdysseyMuiTheme(
|
|
26
|
+
const odysseyTheme = createOdysseyMuiTheme({ odysseyTokens });
|
|
27
27
|
|
|
28
28
|
type ThemeStyles = ({
|
|
29
29
|
theme,
|
package/src/labs/index.ts
CHANGED
|
@@ -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"};
|
package/src/theme/components.tsx
CHANGED
|
@@ -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
|
|
56
|
-
|
|
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:
|
|
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
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
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
|
+
});
|
package/src/theme/mixins.ts
CHANGED
|
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const 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,
|
package/src/theme/palette.ts
CHANGED
|
@@ -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
|
|
19
|
-
|
|
17
|
+
export const palette = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["palette"] => {
|
|
20
22
|
return {
|
|
21
23
|
mode: "light",
|
|
22
24
|
common: {
|
package/src/theme/shape.ts
CHANGED
|
@@ -14,7 +14,11 @@ import type { ThemeOptions } from "@mui/material";
|
|
|
14
14
|
|
|
15
15
|
import { DesignTokens } from "./theme";
|
|
16
16
|
|
|
17
|
-
export const 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"
|
package/src/theme/spacing.ts
CHANGED
|
@@ -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
|
|
19
|
-
|
|
17
|
+
export const spacing = ({
|
|
18
|
+
odysseyTokens,
|
|
19
|
+
}: {
|
|
20
|
+
odysseyTokens: DesignTokens;
|
|
21
|
+
}): ThemeOptions["spacing"] => {
|
|
20
22
|
return [
|
|
21
23
|
odysseyTokens.Spacing0,
|
|
22
24
|
odysseyTokens.Spacing1,
|
package/src/theme/theme.ts
CHANGED
|
@@ -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
|
-
|
|
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";
|
package/src/theme/typography.ts
CHANGED
|
@@ -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
|
|
19
|
-
|
|
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,
|
package/dist/OdysseyI18n.js.map
DELETED
|
@@ -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"}
|