@okta/odyssey-react-mui 0.15.3 → 0.17.0

package/src/OdysseyCacheProvider.test.tsx

@@ -0,0 +1,38 @@
+/*!
+ * Copyright (c) 2021-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.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { render, screen } from "@testing-library/react";
+import { Button } from "./";
+import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
+
+// This component needs to be tested, even if it doesn't make much sense, because it can't be loaded by Storybook; therefore, any issues will only be seen by consumers of Odyssey.
+describe("OdysseyCacheProvider", () => {
+  it("renders without crashing the app", () => {
+    expect(() =>
+      render(
+        <OdysseyCacheProvider>
+          <div />
+        </OdysseyCacheProvider>
+      )
+    ).not.toThrow();
+  });
+
+  it("themes a Button", () => {
+    render(
+      <OdysseyCacheProvider>
+        <Button>text</Button>
+      </OdysseyCacheProvider>
+    );
+
+    expect(screen.queryByRole("button")).toHaveTextContent("text");
+  });
+});

package/src/OdysseyCacheProvider.tsx

@@ -0,0 +1,48 @@
+/*!
+ * Copyright (c) 2022-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.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+declare global {
+  interface Window {
+    cspNonce: string;
+  }
+}
+
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import { memo, ReactElement, useMemo } from "react";
+
+import { useUniqueAlphabeticalId } from "./useUniqueAlphabeticalId";
+
+const OdysseyCacheProvider = ({
+  children,
+  nonce,
+}: {
+  children: ReactElement;
+  nonce?: string;
+}) => {
+  const uniqueAlphabeticalId = useUniqueAlphabeticalId();
+
+  const emotionCache = useMemo(
+    () =>
+      createCache({
+        key: uniqueAlphabeticalId,
+        nonce: nonce || window.cspNonce,
+      }),
+    [nonce, uniqueAlphabeticalId]
+  );
+
+  return <CacheProvider value={emotionCache}>{children}</CacheProvider>;
+};
+
+const MemoizedOdysseyCacheProvider = memo(OdysseyCacheProvider);
+
+export { MemoizedOdysseyCacheProvider as OdysseyCacheProvider };

package/src/OdysseyThemeProvider.tsx

@@ -0,0 +1,24 @@
+/*!
+ * Copyright (c) 2022-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.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
+import { memo, ReactElement } from "react";
+
+import { odysseyTheme } from "./theme";
+
+const OdysseyThemeProvider = ({ children }: { children: ReactElement }) => (
+  <MuiThemeProvider theme={odysseyTheme}>{children}</MuiThemeProvider>
+);
+
+const MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);
+
+export { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };

package/src/ThemeProvider.tsx

@@ -10,11 +10,17 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
-import { ReactElement } from "react";
+import { memo, ReactElement } from "react";
 
-import { odysseyTheme } from "./theme";
+import { OdysseyCacheProvider } from "./OdysseyCacheProvider";
+import { OdysseyThemeProvider } from "./OdysseyThemeProvider";
 
-export const ThemeProvider = ({ children }: { children: ReactElement }) => (
-  <MuiThemeProvider theme={odysseyTheme}>{children}</MuiThemeProvider>
+const ThemeProvider = ({ children }: { children: ReactElement }) => (
+  <OdysseyCacheProvider>
+    <OdysseyThemeProvider>{children}</OdysseyThemeProvider>
+  </OdysseyCacheProvider>
 );
+
+const MemoizedThemeProvider = memo(ThemeProvider);
+
+export { MemoizedThemeProvider as ThemeProvider };

package/src/createUniqueAlphabeticalId.test.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright (c) 2021-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.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId";
+
+describe("createUniqueAlphabeticalId", () => {
+  it("only has lowercase letters", () => {
+    const uniqueAlphabeticalId = createUniqueAlphabeticalId();
+
+    expect(uniqueAlphabeticalId.match(/[a-z]/)).not.toBeNull();
+    expect(uniqueAlphabeticalId.toLowerCase()).toBe(uniqueAlphabeticalId);
+  });
+});

package/src/createUniqueAlphabeticalId.ts

@@ -0,0 +1,19 @@
+/*!
+ * Copyright (c) 2021-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.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+// This is a random number chosen to shrink down the unique ID to an arbitrary length.
+export const uniqueIdLength = 6;
+
+export const createUniqueAlphabeticalId = () =>
+  Math.random()
+    .toString(36)
+    .replace(/[\d\.]/g, "");

package/src/createUniqueId.ts

@@ -13,5 +13,5 @@
 // This is a random number chosen to shrink down the unique ID to an arbitrary length.
 export const uniqueIdLength = 6;
 
-export const createUniqueId = (): string =>
+export const createUniqueId = () =>
   Math.random().toString(36).slice(-uniqueIdLength);

package/src/index.ts

@@ -14,6 +14,8 @@ export * from "./createUniqueId";
 export * from "./Icon";
 export * from "./iconDictionary";
 export * from "./Link";
+export * from "./OdysseyCacheProvider";
+export * from "./OdysseyThemeProvider";
 export * from "./PasswordInput";
 export * from "./theme";
 export * from "./ThemeProvider";
@@ -25,6 +27,7 @@ export {
   Box,
   Button,
   Checkbox,
+  Chip,
   CircularProgress,
   CssBaseline,
   Dialog,
@@ -37,9 +40,10 @@ export {
   FormGroup,
   FormHelperText,
   FormLabel,
+  IconButton,
   InputAdornment,
+  InputBase,
   InputLabel,
-  OutlinedInput,
   Radio,
   RadioGroup,
   Select,
@@ -66,6 +70,7 @@ export type {
   BoxProps,
   ButtonProps,
   CheckboxProps,
+  ChipProps,
   CircularProgressProps,
   CssBaselineProps,
   DialogProps,
@@ -78,9 +83,10 @@ export type {
   FormGroupProps,
   FormHelperTextProps,
   FormLabelProps,
+  IconButtonProps,
   InputAdornmentProps,
+  InputBaseProps,
   InputLabelProps,
-  OutlinedInputProps,
   RadioGroupProps,
   RadioProps,
   SelectProps,
@@ -104,6 +110,6 @@ export { TabContext, TabList, TabPanel } from "@mui/lab";
 
 export type { TabContextProps, TabListProps, TabPanelProps } from "@mui/lab";
 
-export { Favorite as FavoriteIcon } from "@mui/icons-material";
+export { default as FavoriteIcon } from "@mui/icons-material/Favorite";
 
 export { visuallyHidden } from "@mui/utils";

package/src/theme/components.tsx

@@ -13,8 +13,9 @@
 import type { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
+import { chipClasses } from "@mui/material/Chip";
 import { dialogActionsClasses } from "@mui/material/DialogActions";
-import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import { inputBaseClasses } from "@mui/material/InputBase";
 import { tableBodyClasses } from "@mui/material/TableBody";
 import { tableCellClasses } from "@mui/material/TableCell";
 import { tableHeadClasses } from "@mui/material/TableHead";
@@ -25,6 +26,7 @@ import {
   AlertTriangleFilledIcon,
   ArrowDownIcon,
   CheckCircleFilledIcon,
+  CloseCircleFilledIcon,
   InformationCircleFilledIcon,
 } from "../iconDictionary";
 
@@ -293,7 +295,7 @@ export const components: ThemeOptions["components"] = {
         fontWeight: 600,
         minWidth: "unset",
         padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-        display: "inline-block",
+        display: "inline-flex",
         position: "relative",
         marginBlock: "0",
         marginInline: "0",
@@ -326,9 +328,14 @@ export const components: ThemeOptions["components"] = {
         },
 
         ".MuiButton-startIcon > *:nth-of-type(1)": {
-          fontSize: "inherit",
+          fontSize: "1.14285714em",
         },
       }),
+      startIcon: ({ theme }) => ({
+        display: "inline-flex",
+        margin: 0,
+        marginInlineEnd: theme.spacing(2),
+      }),
     },
   },
   MuiButtonBase: {
@@ -374,6 +381,66 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiChip: {
+    defaultProps: {
+      deleteIcon: <CloseCircleFilledIcon />,
+    },
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        height: "auto",
+        paddingBlock: theme.spacing(2),
+        paddingInline: theme.spacing(3),
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: "1.14285714",
+        borderRadius: "1.5em",
+        backgroundColor: theme.palette.grey[100],
+
+        ...(ownerState.onDelete && {
+          paddingInlineEnd: theme.spacing(2),
+        }),
+
+        [`& .${chipClasses.deleteIcon}`]: {
+          WebkitTapHighlightColor: "transparent",
+          color: theme.palette.text.secondary,
+          fontSize: "1em",
+          cursor: "pointer",
+          margin: "0",
+          marginInlineStart: theme.spacing(2),
+
+          "&:hover": {
+            color: theme.palette.text.primary,
+          },
+        },
+
+        [`&.${chipClasses.disabled}`]: {
+          opacity: 1,
+          pointerEvents: "none",
+          backgroundColor: theme.palette.grey[50],
+          color: theme.palette.text.secondary,
+        },
+
+        ...(ownerState.clickable && {
+          "&:hover": {
+            backgroundColor: theme.palette.grey[200],
+          },
+          [`&.${chipClasses.focusVisible}`]: {
+            backgroundColor: theme.palette.grey[200],
+            outlineColor: theme.palette.primary.main,
+            outlineOffset: "2px",
+            outlineStyle: "solid",
+            outlineWidth: "2px",
+          },
+          "&:active": {
+            boxShadow: "none",
+            backgroundColor: theme.palette.grey[300],
+          },
+        }),
+      }),
+      label: {
+        padding: 0,
+      },
+    },
+  },
   MuiCircularProgress: {
     defaultProps: {
       // TODO: defaultProps cannot take a theme object; needs workaround
@@ -542,6 +609,7 @@ export const components: ThemeOptions["components"] = {
     },
     styleOverrides: {
       root: ({ theme }) => ({
+        fontSize: theme.typography.subtitle1.fontSize,
         lineHeight: "1.33333333",
         marginTop: theme.spacing(2),
         ".MuiFormLabel-root + &": {
@@ -598,35 +666,129 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiInput: {
+    defaultProps: {
+      disableUnderline: true,
+    },
+    styleOverrides: {
+      root: {
+        "label + &": {
+          marginTop: 0,
+        },
+      },
+    },
+  },
   MuiInputAdornment: {
     defaultProps: {
       variant: "outlined",
     },
     styleOverrides: {
-      root: ({ ownerState }) => ({
+      root: ({ theme, ownerState }) => ({
         display: "flex",
+        minWidth: "1em",
+        maxHeight: "unset",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        color: theme.palette.action.active,
         ...(ownerState.position === "start" && {
-          marginRight: 0,
+          marginInlineEnd: theme.spacing(2),
         }),
         ...(ownerState.position === "end" && {
-          marginLeft: 0,
+          marginInlineStart: theme.spacing(2),
+        }),
+        ...(ownerState.disablePointerEvents === true && {
+          pointerEvents: "none",
         }),
       }),
     },
   },
   MuiInputBase: {
+    defaultProps: {
+      minRows: 3,
+      required: true,
+    },
     styleOverrides: {
       root: ({ ownerState, theme }) => ({
+        ...theme.typography.body1,
+        flex: "1",
+        width: "auto",
+        color: theme.palette.text.primary,
         lineHeight: "1.14285714",
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
+        borderRadius: theme.mixins.borderRadius,
+        borderColor: theme.palette.grey[500],
+        paddingBlock: `calc(${theme.spacing(3)} - ${theme.mixins.borderWidth})`,
+        paddingInline: theme.spacing(3),
+
+        ...(ownerState.multiline && {
+          paddingBlock: theme.spacing(3),
+          paddingInline: theme.spacing(3),
+          ...(ownerState.size === "small" && {
+            paddingBlock: theme.spacing(3),
+            paddingInline: theme.spacing(3),
+          }),
+        }),
+
+        ...(ownerState.fullWidth && {
+          width: "100%",
+        }),
 
         ...(ownerState.readOnly === true && {
           backgroundColor: theme.palette.grey[50],
         }),
+
+        [`&:hover`]: {
+          borderColor: theme.palette.grey[900],
+        },
+
+        [`&.${inputBaseClasses.focused}`]: {
+          borderColor: theme.palette.primary.main,
+          outlineColor: theme.palette.primary.main,
+          outlineOffset: 0,
+          outlineStyle: "solid",
+          outlineWidth: "1px",
+        },
+
+        [`&.${inputBaseClasses.error}`]: {
+          borderColor: theme.palette.error.main,
+        },
+
+        [`&.${inputBaseClasses.error}:hover`]: {
+          borderColor: theme.palette.error.dark,
+        },
+
+        [`&.${inputBaseClasses.error}.${inputBaseClasses.focused}`]: {
+          borderColor: theme.palette.error.main,
+          outlineColor: theme.palette.error.main,
+        },
+
+        [`&.${inputBaseClasses.disabled}`]: {
+          color: theme.palette.text.disabled,
+          borderColor: theme.palette.action.disabled,
+          pointerEvents: "auto",
+          backgroundColor: theme.palette.grey[50],
+          cursor: "not-allowed",
+        },
       }),
-      input: {
+      input: ({ theme }) => ({
         boxSizing: "border-box",
         height: "auto",
-      },
+        paddingBlock: 0,
+        paddingInline: 0,
+
+        [`.${inputBaseClasses.disabled} &`]: {
+          pointerEvents: "auto",
+          cursor: "not-allowed",
+        },
+
+        [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: {
+          "&::placeholder": {
+            color: theme.palette.text.secondary,
+            opacity: "1 !important",
+          },
+        },
+      }),
     },
   },
   MuiInputLabel: {
@@ -636,6 +798,8 @@ export const components: ThemeOptions["components"] = {
     },
     styleOverrides: {
       root: ({ ownerState }) => ({
+        display: "flex",
+        justifyContent: "space-between",
         // @ts-expect-error: Incorrect typing in MUI
         ...(ownerState.formControl && {
           position: "initial",
@@ -724,7 +888,7 @@ export const components: ThemeOptions["components"] = {
   },
   MuiNativeSelect: {
     defaultProps: {
-      variant: "outlined",
+      variant: "standard",
     },
     styleOverrides: {
       icon: ({ theme }) => ({
@@ -732,66 +896,6 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
-  MuiOutlinedInput: {
-    defaultProps: {
-      notched: false,
-      minRows: 3,
-    },
-    styleOverrides: {
-      root: ({ ownerState, theme }) => ({
-        [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
-          borderColor: theme.palette.text.primary,
-        },
-        [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]:
-          {
-            borderColor: theme.palette.primary.main,
-            borderWidth: 2,
-          },
-        [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]:
-          {
-            borderColor: theme.palette.error.main,
-          },
-        [`&.${outlinedInputClasses.error}:hover .${outlinedInputClasses.notchedOutline}`]:
-          {
-            borderColor: theme.palette.error.dark,
-          },
-        [`&.${outlinedInputClasses.error}.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]:
-          {
-            borderColor: theme.palette.error.main,
-          },
-        [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]:
-          {
-            borderColor: theme.palette.action.disabled,
-            pointerEvents: "auto",
-          },
-        [`&.${outlinedInputClasses.disabled}`]: {
-          backgroundColor: theme.palette.grey[50],
-          cursor: "not-allowed",
-        },
-        ...(ownerState.startAdornment && {
-          paddingLeft: theme.spacing(3),
-        }),
-        ...(ownerState.endAdornment && {
-          paddingRight: theme.spacing(3),
-        }),
-        ...(ownerState.multiline && {
-          padding: "0",
-          ...(ownerState.size === "small" && {
-            padding: "0",
-          }),
-        }),
-      }),
-      input: ({ theme }) => ({
-        padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
-        borderWidth: theme.mixins.borderWidth,
-        borderStyle: theme.mixins.borderStyle,
-        borderColor: "transparent",
-      }),
-      notchedOutline: ({ theme }) => ({
-        borderColor: theme.palette.grey[500],
-      }),
-    },
-  },
   MuiRadio: {
     defaultProps: {
       size: "small",
@@ -825,6 +929,16 @@ export const components: ThemeOptions["components"] = {
       },
     },
   },
+  MuiSelect: {
+    defaultProps: {
+      variant: "standard",
+    },
+    styleOverrides: {
+      icon: ({ theme }) => ({
+        color: theme.palette.text.primary,
+      }),
+    },
+  },
   MuiSvgIcon: {
     defaultProps: {
       fontSize: "inherit",

package/src/theme/typography.ts

@@ -64,6 +64,7 @@ export const typography: ThemeOptions["typography"] = {
     marginBottom: Tokens.SpaceScale1,
   },
   subtitle1: {
+    color: Tokens.ColorPaletteNeutral600,
     fontWeight: Tokens.FontWeightNormal,
     fontSize: Tokens.FontScale0,
     lineHeight: Tokens.FontLineHeightBody,

package/src/useUniqueAlphabeticalId.ts

@@ -0,0 +1,21 @@
+/*!
+ * Copyright (c) 2022-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.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { useMemo } from "react";
+
+import { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId";
+
+export const useUniqueAlphabeticalId = (id?: string) => {
+  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);
+
+  return id ?? uniqueAlphabeticalId;
+};

package/src/useUniqueId.ts

@@ -14,8 +14,8 @@ import { useMemo } from "react";
 
 import { createUniqueId } from "./createUniqueId";
 
-export const useUniqueId = (id?: string): string => {
+export const useUniqueId = (id?: string) => {
   const uniqueId = useMemo(() => createUniqueId(), []);
 
-  return id || uniqueId;
+  return id ?? uniqueId;
 };