@okta/odyssey-react-mui 0.16.1 → 0.17.0

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,
@@ -67,6 +70,7 @@ export type {
   BoxProps,
   ButtonProps,
   CheckboxProps,
+  ChipProps,
   CircularProgressProps,
   CssBaselineProps,
   DialogProps,
@@ -106,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,6 +13,7 @@
 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 { inputBaseClasses } from "@mui/material/InputBase";
 import { tableBodyClasses } from "@mui/material/TableBody";
@@ -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

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;
 };