@okta/odyssey-react-mui 0.22.0 → 0.24.0

package/src/iconDictionary/User.tsx

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
  *
  * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
@@ -30,10 +30,10 @@ export const UserIcon = forwardRef<SVGSVGElement, UserIconProps>(
       >
         <>
           <path
+            fill="currentColor"
             fillRule="evenodd"
+            d="M10 3v2a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0ZM5 3a3 3 0 0 1 6 0v2a3 3 0 0 1-6 0V3Zm-.87 7.074c.138-.056.329-.074 1.284-.074h5.172c.955 0 1.146.018 1.284.074.16.066.3.172.408.308.091.117.161.296.424 1.214L13.674 15H2.326l.972-3.404c.263-.918.333-1.097.424-1.214.107-.136.248-.242.408-.308Zm9.533 1.247L14.714 15 15 16H1l.286-1 1.05-3.68c.239-.831.357-1.247.6-1.556a2 2 0 0 1 .816-.616C4.116 9 4.55 9 5.414 9h5.172c.865 0 1.298 0 1.662.148a2 2 0 0 1 .816.616c.243.309.361.725.6 1.557Z"
             clipRule="evenodd"
-            d="M10 3V5C10 6.10457 9.10457 7 8 7C6.89543 7 6 6.10457 6 5V3C6 1.89543 6.89543 1 8 1C9.10457 1 10 1.89543 10 3ZM5 3C5 1.34315 6.34315 0 8 0C9.65685 0 11 1.34315 11 3V5C11 6.65685 9.65685 8 8 8C6.34315 8 5 6.65685 5 5V3ZM4.1305 10.0742C4.26803 10.0181 4.459 10 5.41376 10H10.5862C11.541 10 11.732 10.0181 11.8695 10.0742C12.0299 10.1398 12.1706 10.2459 12.2777 10.3821C12.3695 10.4989 12.4393 10.6776 12.7016 11.5956L13.6743 15H2.32573L3.29841 11.5956C3.5607 10.6776 3.63054 10.4989 3.72233 10.3821C3.82941 10.2459 3.97006 10.1398 4.1305 10.0742ZM13.6631 11.3209L14.7143 15L15 16H13.96H2.04002H1L1.28571 15L2.33689 11.3209C2.57458 10.489 2.69343 10.073 2.93606 9.76423C3.15022 9.49171 3.43152 9.27953 3.75239 9.14848C4.11592 9 4.54854 9 5.41376 9H10.5862C11.4515 9 11.8841 9 12.2476 9.14848C12.5685 9.27953 12.8498 9.49171 13.0639 9.76423C13.3066 10.073 13.4254 10.489 13.6631 11.3209Z"
-            fill="currentColor"
           />
         </>
       </SvgIcon>

package/src/iconDictionary/UserGroup.tsx

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
  *
  * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
@@ -30,10 +30,10 @@ export const UserGroupIcon = forwardRef<SVGSVGElement, UserGroupIconProps>(
       >
         <>
           <path
+            fill="currentColor"
             fillRule="evenodd"
+            d="M12 4V3a1 1 0 1 0-2 0v1a1 1 0 1 0 2 0Zm-1-3a2 2 0 0 0-2 2v1a2 2 0 1 0 4 0V3a2 2 0 0 0-2-2Zm2.45 8.71a15.26 15.26 0 0 0-.239-.97c-.064-.208-.11-.286-.14-.328l.81-.588c.24.331.342.775.545 1.663L14.77 11 15 12H8.313c.035.146.072.307.113.487L8.77 14 9 15H1l.229-1 .345-1.513c.203-.888.305-1.332.546-1.663a2 2 0 0 1 .831-.663C3.328 10 3.783 10 4.694 10h.612c.91 0 1.366 0 1.743.16a2 2 0 0 1 .33.18l.195-.853c.203-.888.305-1.332.546-1.663a2 2 0 0 1 .831-.663C9.328 7 9.783 7 10.694 7h.612c.91 0 1.366 0 1.743.16a2 2 0 0 1 .832.664l-.81.588a1 1 0 0 0-.415-.332c-.048-.02-.134-.047-.351-.063A15.32 15.32 0 0 0 11.306 8h-.612c-.47 0-.769 0-.999.017-.217.016-.303.043-.35.063a1 1 0 0 0-.417.332c-.03.042-.075.12-.14.328-.067.22-.134.512-.239.97L8.254 11h5.492l-.278-1.214-.017-.076ZM6 7V6a1 1 0 0 0-2 0v1a1 1 0 0 0 2 0ZM5 4a2 2 0 0 0-2 2v1a2 2 0 1 0 4 0V6a2 2 0 0 0-2-2Zm.306 7h-.612c-.47 0-.769 0-.999.017-.217.016-.303.043-.35.063a1 1 0 0 0-.417.332c-.03.042-.075.12-.14.328-.067.22-.134.512-.239.97L2.254 14h5.492l-.295-1.29c-.105-.458-.172-.75-.24-.97-.064-.208-.11-.286-.14-.328a1 1 0 0 0-.415-.332c-.048-.02-.134-.047-.351-.063-.23-.016-.53-.017-.999-.017Z"
             clipRule="evenodd"
-            d="M12 4V3C12 2.44772 11.5523 2 11 2C10.4477 2 10 2.44772 10 3V4C10 4.55228 10.4477 5 11 5C11.5523 5 12 4.55228 12 4ZM11 1C9.89543 1 9 1.89543 9 3V4C9 5.10457 9.89543 6 11 6C12.1046 6 13 5.10457 13 4V3C13 1.89543 12.1046 1 11 1ZM13.4507 9.70979C13.3461 9.25176 13.2788 8.96046 13.2112 8.74017C13.1473 8.53193 13.1019 8.45367 13.0716 8.41204L13.8805 7.82408C14.1212 8.15524 14.2227 8.59915 14.4256 9.48696L14.7714 11L15 12H13.9742H8.31292C8.34765 12.146 8.38455 12.3074 8.42559 12.487L8.77143 14L9 15H7.97421H2.02579H1L1.22857 14L1.57441 12.487C1.77734 11.5991 1.8788 11.1552 2.11952 10.8241C2.33185 10.532 2.61932 10.3028 2.95142 10.1609C3.32789 10 3.78325 10 4.69396 10H5.30604C6.21675 10 6.67211 10 7.04858 10.1609C7.16471 10.2105 7.27538 10.2708 7.37928 10.3407L7.57443 9.48696C7.77735 8.59915 7.87882 8.15524 8.11953 7.82408C8.33187 7.53195 8.61934 7.30278 8.95143 7.16087C9.32791 7 9.78326 7 10.694 7H11.3061C12.2168 7 12.6721 7 13.0486 7.16087C13.3807 7.30278 13.6682 7.53195 13.8805 7.82408L13.0716 8.41204C12.9654 8.26598 12.8217 8.15139 12.6557 8.08044C12.6083 8.06021 12.5219 8.03334 12.3047 8.01744C12.0748 8.00062 11.7759 8 11.3061 8H10.694C10.2241 8 9.92519 8.00062 9.69536 8.01744C9.47812 8.03334 9.3917 8.06021 9.34437 8.08044C9.17833 8.15139 9.03459 8.26598 8.92842 8.41204C8.89816 8.45367 8.85271 8.53193 8.7888 8.74017C8.72119 8.96047 8.65397 9.25177 8.54928 9.70979L8.25438 11H13.7457L13.4681 9.78588L13.4507 9.70979ZM6 7V6C6 5.44772 5.55228 5 5 5C4.44772 5 4 5.44772 4 6V7C4 7.55228 4.44772 8 5 8C5.55228 8 6 7.55228 6 7ZM5 4C3.89543 4 3 4.89543 3 6V7C3 8.10457 3.89543 9 5 9C6.10457 9 7 8.10457 7 7V6C7 4.89543 6.10457 4 5 4ZM5.30604 11H4.69396C4.22413 11 3.92517 11.0006 3.69534 11.0174C3.4781 11.0333 3.39168 11.0602 3.34436 11.0804C3.17831 11.1514 3.03457 11.266 2.92841 11.412C2.89815 11.4537 2.85269 11.5319 2.78879 11.7402C2.72118 11.9605 2.65396 12.2518 2.54927 12.7098L2.25436 14H7.74564L7.45073 12.7098C7.34604 12.2518 7.27882 11.9605 7.21122 11.7402C7.14731 11.5319 7.10185 11.4537 7.0716 11.412C6.96543 11.266 6.82169 11.1514 6.65565 11.0804C6.60832 11.0602 6.5219 11.0333 6.30466 11.0174C6.07483 11.0006 5.77587 11 5.30604 11Z"
-            fill="currentColor"
           />
         </>
       </SvgIcon>

package/src/iconDictionary/index.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-// Code automatically generated by svgr; DO NOT EDIT.
+// This file used to be generated, but now that's not possible. We need to maintain this file by-hand when icons are added.
 
 import { AddCircleIcon } from "./AddCircle";
 export * from "./AddCircle";

package/src/index.ts

@@ -17,11 +17,7 @@ export {
   Chip,
   createTheme,
   CssBaseline,
-  Dialog,
-  DialogActions,
-  DialogContent,
   DialogContentText,
-  DialogTitle,
   Divider,
   FormControl,
   FormControlLabel,
@@ -44,11 +40,9 @@ export {
   MenuList,
   Paper,
   ScopedCssBaseline,
-  Select,
   Snackbar,
   Stack,
   SvgIcon,
-  Tab,
   Table,
   TableBody,
   TableCell,
@@ -57,7 +51,6 @@ export {
   TableRow,
   TableSortLabel,
   ThemeProvider as MuiThemeProvider,
-  Tooltip,
   Typography,
 } from "@mui/material";
 
@@ -67,11 +60,6 @@ export type {
   BoxProps,
   ChipProps,
   CssBaselineProps,
-  DialogProps,
-  DialogActionsProps,
-  DialogContentProps,
-  DialogContentTextProps,
-  DialogTitleProps,
   DividerProps,
   FormControlLabelProps,
   FormControlProps,
@@ -95,11 +83,9 @@ export type {
   PaperProps,
   ScopedCssBaselineProps,
   SelectChangeEvent,
-  SelectProps,
   SnackbarProps,
   StackProps,
   SvgIconProps,
-  TabProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -108,14 +94,9 @@ export type {
   TableRowProps,
   TableSortLabelProps,
   ThemeOptions,
-  TooltipProps,
   TypographyProps,
 } from "@mui/material";
 
-export { TabContext, TabList, TabPanel } from "@mui/lab";
-
-export type { TabContextProps, TabListProps, TabPanelProps } from "@mui/lab";
-
 export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { deepmerge, visuallyHidden } from "@mui/utils";
@@ -127,26 +108,33 @@ export * from "./Checkbox";
 export * from "./CheckboxGroup";
 export * from "./CircularProgress";
 export * from "./createUniqueId";
-export * from "./FieldError";
-export * from "./FieldHint";
-export * from "./FieldLabel";
+export * from "./Dialog";
+export * from "./Fieldset";
+export * from "./Form";
 export * from "./Icon";
 export * from "./iconDictionary";
 export * from "./Infobox";
 export * from "./Link";
 export * from "./MenuButton";
 export * from "./MenuItem";
+export * from "./NativeSelect";
 export * from "./OdysseyCacheProvider";
+export * from "./OdysseyProvider";
 export * from "./OdysseyThemeProvider";
+export * from "./OdysseyTranslationProvider";
 export * from "./PasswordField";
 export * from "./Radio";
 export * from "./RadioGroup";
 export * from "./ScreenReaderText";
 export * from "./SearchField";
+export * from "./Select";
 export * from "./Status";
+export * from "./Tabs";
 export * from "./Tag";
 export * from "./TagList";
 export * from "./TextField";
 export * from "./theme";
-export * from "./ThemeProvider";
+export * from "./Tooltip";
+export * from "./Toast";
+export * from "./ToastStack";
 export * from "./useUniqueId";

package/src/properties/odyssey-react-mui.properties

@@ -0,0 +1,8 @@
+fielderror.screenreader.text = Error
+fieldlabel.optional.text = Optional
+fieldlabel.required.text = Required
+severity.success = success
+severity.warning = warning
+severity.info = info
+severity.error = error
+toast.close.text = close

package/src/properties/ts/odyssey-react-mui.ts

@@ -0,0 +1 @@
+export const translation = {"fielderror.screenreader.text":"Error","fieldlabel.optional.text":"Optional","fieldlabel.required.text":"Required","severity.success":"success","severity.warning":"warning","severity.info":"info","severity.error":"error","toast.close.text":"close"};

package/src/properties/ts/odyssey-react-mui_cs.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_da.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_de.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_el.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_es.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_fi.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_fr.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_hu.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_id.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_it.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ja.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ko.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ms.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_nb.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_nl-NL.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_pl.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_pt-BR.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ro.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_ru.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_sv.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_th.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_tr.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_uk.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_zh-CN.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/properties/ts/odyssey-react-mui_zh-TW.ts

@@ -0,0 +1 @@
+export const translation = {};

package/src/theme/components.tsx

@@ -243,6 +243,7 @@ export const components: ThemeOptions["components"] = {
           "&:disabled": {
             color: theme.palette.common.white,
             backgroundColor: theme.palette.primary.light,
+            pointerEvents: "initial",
           },
         }),
       },
@@ -388,7 +389,11 @@ export const components: ThemeOptions["components"] = {
 
         "&:disabled": {
           cursor: "not-allowed",
-          pointerEvents: "inherit", // in order to have cursor: not-allowed, must change pointer-events from "none"
+          pointerEvents: "initial",
+        },
+
+        "&:disabled:active": {
+          pointerEvents: "none",
         },
 
         [`.${buttonClasses.startIcon}, .${buttonClasses.endIcon}`]: {
@@ -450,8 +455,6 @@ export const components: ThemeOptions["components"] = {
 
         ".MuiSvgIcon-root": {
           color: theme.palette.common.white,
-          width: "0.5em",
-          height: "0.5em",
           transition: theme.transitions.create(["color"], {
             duration: theme.transitions.duration.short,
           }),
@@ -471,7 +474,7 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: "transparent",
           borderColor: theme.palette.grey[900],
         },
-        ".Mui-error:hover > &": {
+        ".Mui-error:not(.Mui-valid):hover > &": {
           borderColor: theme.palette.error.dark,
 
           "&.Mui-checked": {
@@ -479,7 +482,7 @@ export const components: ThemeOptions["components"] = {
             borderColor: theme.palette.error.dark,
           },
         },
-        ".Mui-error > &": {
+        ".Mui-error:not(.Mui-valid) > &": {
           borderColor: theme.palette.error.main,
 
           "&.Mui-checked": {
@@ -501,7 +504,7 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[300],
 
-          ".Mui-error > &": {
+          ".Mui-error:not(.Mui-valid) > &": {
             backgroundColor: theme.palette.grey[50],
             borderColor: theme.palette.grey[300],
           },
@@ -993,6 +996,10 @@ export const components: ThemeOptions["components"] = {
         paddingBlock: theme.spacing(4),
         paddingInline: theme.spacing(6),
 
+        "&:last-child": {
+          paddingBlockEnd: theme.spacing(6),
+        },
+
         ...(ownerState.dividers === false && {
           [`& + .${dialogActionsClasses.root}`]: {
             paddingBlockStart: theme.spacing(4),
@@ -1064,7 +1071,6 @@ export const components: ThemeOptions["components"] = {
   MuiFormControlLabel: {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
-        gap: theme.spacing(2),
         marginInlineStart: 0,
         marginInlineEnd: 0, // used for row presentation of radio/checkbox
         ...(ownerState.labelPlacement === "start" && {
@@ -1102,6 +1108,14 @@ export const components: ThemeOptions["components"] = {
             color: theme.palette.error.dark,
           },
       }),
+      label: ({ theme }) => ({
+        "&:not(:first-child)": {
+          marginInlineStart: theme.spacing(2),
+        },
+      }),
+      asterisk: () => ({
+        display: "none",
+      }),
     },
   },
   MuiFormHelperText: {
@@ -1318,6 +1332,9 @@ export const components: ThemeOptions["components"] = {
             transform: "none",
           }),
         }),
+        "& > .MuiTypography-root": {
+          lineHeight: "unset",
+        },
       }),
     },
   },
@@ -1326,6 +1343,7 @@ export const components: ThemeOptions["components"] = {
       root: ({ theme }) => ({
         color: theme.palette.primary.main,
         textDecoration: "underline",
+        cursor: "pointer",
 
         "&:hover": {
           color: theme.palette.primary.dark,
@@ -1554,9 +1572,6 @@ export const components: ThemeOptions["components"] = {
         },
         ".Mui-error > &": {
           borderColor: theme.palette.error.main,
-          "&::before": {
-            backgroundColor: theme.palette.error.main,
-          },
 
           "&.Mui-focusVisible": {
             boxShadow: `0 0 0 2px ${theme.palette.background.default}, 0 0 0 4px ${theme.palette.error.main}`,
@@ -1582,7 +1597,7 @@ export const components: ThemeOptions["components"] = {
           backgroundColor: theme.palette.grey[50],
           borderColor: theme.palette.grey[300],
 
-          "&::before": {
+          "&.Mui-checked::before": {
             backgroundColor: theme.palette.grey[300],
           },
         },
@@ -1596,6 +1611,13 @@ export const components: ThemeOptions["components"] = {
         horizontal: "right",
       },
     },
+    styleOverrides: {
+      root: {
+        "&.Toast": {
+          position: "static",
+        },
+      },
+    },
   },
   MuiSelect: {
     defaultProps: {
@@ -1620,6 +1642,7 @@ export const components: ThemeOptions["components"] = {
         },
       }),
       icon: ({ theme }) => ({
+        right: "unset",
         insetInlineEnd: theme.spacing(3),
         color: theme.palette.text.primary,
       }),
@@ -1631,8 +1654,16 @@ export const components: ThemeOptions["components"] = {
       color: "inherit",
     },
     styleOverrides: {
-      root: ({ theme }) => ({
+      root: ({ theme, ownerState }) => ({
         fontSize: `${theme.typography.ui.lineHeight}rem`,
+
+        ...(ownerState.fontSize === "small" && {
+          fontSize: `${Number(theme.typography.ui.lineHeight) * 0.75}rem`,
+        }),
+
+        ...(ownerState.fontSize === "large" && {
+          fontSize: `${Number(theme.typography.ui.lineHeight) * 1.25}rem`,
+        }),
       }),
     },
   },
@@ -2031,7 +2062,7 @@ export const components: ThemeOptions["components"] = {
   MuiTypography: {
     defaultProps: {
       fontFamily:
-        "'Public Sans', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
+        "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
       variantMapping: {
         h1: "h1",
         h2: "h2",

package/src/theme/index.ts

@@ -10,5 +10,9 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { theme as odysseyTheme } from "./theme";
+import * as Tokens from "@okta/odyssey-design-tokens";
+
+export * from "./theme";
 export { useTheme } from "./useTheme";
+
+export type DesignTokensOverride = Partial<typeof Tokens>;

package/src/theme/mixins.ts

@@ -11,11 +11,15 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
-import * as Tokens from "@okta/odyssey-design-tokens";
+import { DesignTokensOverride } from ".";
 
-export const mixins: ThemeOptions["mixins"] = {
-  maxWidth: Tokens.FontLineLengthMax,
-  borderRadius: Tokens.BorderRadiusBase,
-  borderStyle: Tokens.BorderStyleBase,
-  borderWidth: Tokens.BorderWidthBase,
+export const mixins = (
+  odysseyTokens: DesignTokensOverride
+): ThemeOptions["mixins"] => {
+  return {
+    maxWidth: odysseyTokens.FontLineLengthMax,
+    borderRadius: odysseyTokens.BorderRadiusBase,
+    borderStyle: odysseyTokens.BorderStyleBase,
+    borderWidth: odysseyTokens.BorderWidthBase,
+  };
 };