@okta/odyssey-react-mui 0.15.0 → 0.15.2

package/src/themes/odyssey/components.tsx

@@ -11,10 +11,18 @@
  */
 
 import type { ThemeOptions } from "@mui/material";
+import type {} from "@mui/lab/themeAugmentation";
 //import radioClasses from "@mui/material";
 import { outlinedInputClasses } from "@mui/material/OutlinedInput";
+import { tableBodyClasses } from "@mui/material/TableBody";
+import { tableCellClasses } from "@mui/material/TableCell";
+import { tableHeadClasses } from "@mui/material/TableHead";
+import { tableRowClasses } from "@mui/material/TableRow";
+import { tableSortLabelClasses } from "@mui/material/TableSortLabel";
+import { tooltipClasses } from "@mui/material/Tooltip";
 import {
   AlertTriangleFilledIcon,
+  ArrowDownIcon,
   CheckCircleFilledIcon,
   InformationCircleFilledIcon,
 } from "../../components/Icon";
@@ -43,18 +51,21 @@ export const components: ThemeOptions["components"] = {
           justifyContent: "center",
           alignItems: "center",
           borderWidth: 0,
+          borderRadius: 0,
         }),
         ...(ownerState.variant === "infobox" && {
-          borderStyle: "solid",
-          borderWidth: 1,
+          borderStyle: theme.mixins.borderStyle,
+          borderWidth: theme.mixins.borderWidth,
+          borderRadius: theme.mixins.borderRadius,
           "&:not(:last-child)": {
             marginBottom: theme.spacing(4),
           },
         }),
         ...(ownerState.variant === "toast" && {
           maxWidth: theme.mixins.maxWidth,
-          borderStyle: "solid",
-          borderWidth: 1,
+          borderStyle: theme.mixins.borderStyle,
+          borderWidth: theme.mixins.borderWidth,
+          borderRadius: theme.mixins.borderRadius,
           position: "relative",
           alignItems: "start",
         }),
@@ -96,6 +107,7 @@ export const components: ThemeOptions["components"] = {
       message: ({ ownerState, theme }) => ({
         padding: 0,
         lineHeight: theme.typography.body1.lineHeight,
+        overflow: "visible",
         ...(ownerState.variant === "banner" && {
           display: "flex",
           justifyContent: "space-between",
@@ -120,6 +132,7 @@ export const components: ThemeOptions["components"] = {
   },
   MuiButton: {
     defaultProps: {
+      variant: "primary",
       disableElevation: true,
     },
     variants: [
@@ -270,6 +283,7 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         fontWeight: 600,
+        minWidth: "unset",
         padding: `calc(${theme.spacing(3)} - 1px) ${theme.spacing(3)}`,
         display: "inline-block",
         position: "relative",
@@ -279,11 +293,12 @@ export const components: ThemeOptions["components"] = {
           "color, background-color, border-color, outline-offset, outline-color",
         transitionDuration: "100ms",
         transitionTimingFunction: "linear",
-        borderWidth: "1px",
-        borderStyle: "solid",
+        borderWidth: theme.mixins.borderWidth,
+        borderStyle: theme.mixins.borderStyle,
+        borderRadius: theme.mixins.borderRadius,
         outlineColor: "transparent",
         outlineOffset: "0",
-        fontSize: "1rem",
+        fontSize: theme.typography.body1.fontSize,
         lineHeight: "1.14285714",
         whiteSpace: "nowrap",
 
@@ -482,6 +497,27 @@ export const components: ThemeOptions["components"] = {
       root: ({ theme }) => ({
         padding: theme.spacing(1),
         fontSize: theme.typography.body1.fontSize,
+        backgroundColor: "transparent",
+        color: theme.palette.text.primary,
+        borderColor: "transparent",
+        borderRadius: theme.mixins.borderRadius,
+
+        "&:hover, &:focus-visible": {
+          backgroundColor: "rgba(29, 29, 33, 0.1)",
+          borderColor: "transparent",
+        },
+        "&:focus-visible": {
+          outlineColor: theme.palette.primary.main,
+        },
+        "&:active": {
+          backgroundColor: "rgba(29, 29, 33, 0.2)",
+          borderColor: "transparent",
+        },
+        "&:disabled": {
+          backgroundColor: "rgba(235, 235, 237, 0.6)",
+          color: theme.palette.text.secondary,
+          borderColor: "transparent",
+        },
       }),
     },
   },
@@ -503,9 +539,13 @@ export const components: ThemeOptions["components"] = {
   },
   MuiInputBase: {
     styleOverrides: {
-      root: {
+      root: ({ ownerState, theme }) => ({
         lineHeight: "1.14285714",
-      },
+
+        ...(ownerState.readOnly === true && {
+          backgroundColor: theme.palette.grey[50],
+        }),
+      }),
       input: {
         boxSizing: "border-box",
         height: "auto",
@@ -645,10 +685,11 @@ export const components: ThemeOptions["components"] = {
         [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]:
           {
             borderColor: theme.palette.action.disabled,
+            pointerEvents: "auto",
           },
         [`&.${outlinedInputClasses.disabled}`]: {
           backgroundColor: theme.palette.grey[50],
-          pointerEvents: "none",
+          cursor: "not-allowed",
         },
         ...(ownerState.startAdornment && {
           paddingLeft: theme.spacing(3),
@@ -768,6 +809,220 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiTabPanel: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+      },
+    },
+  },
+  MuiTable: {
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        display: "table",
+        width: "auto",
+        borderCollapse: "separate",
+        borderSpacing: 0,
+        border: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
+        borderRadius: theme.mixins.borderRadius,
+        marginBlock: theme.spacing(0),
+        marginInline: theme.spacing(0),
+        lineHeight: "1.14285714",
+
+        "&:only-child": {
+          marginBlockEnd: 0,
+        },
+
+        ...(ownerState.stickyHeader && {
+          borderCollapse: "separate",
+        }),
+      }),
+    },
+  },
+  MuiTableCell: {
+    styleOverrides: {
+      root: ({ theme, ownerState }) => ({
+        ...theme.typography.body1,
+        maxWidth: theme.mixins.maxWidth,
+        borderBottom: `${theme.mixins.borderWidth} ${theme.mixins.borderStyle} ${theme.palette.grey[100]}`,
+        textAlign: "start",
+        verticalAlign: "baseline",
+        padding: "unset",
+        paddingBlock: theme.spacing(4),
+        paddingInline: theme.spacing(4),
+        overflowWrap: "break-word",
+
+        [`.${tableRowClasses.root}:hover &[rowspan]`]: {
+          backgroundColor: theme.palette.common.white,
+        },
+
+        [`.${tableBodyClasses.root} .${tableRowClasses.root}:last-of-type &`]: {
+          borderBottom: 0,
+        },
+
+        [`.${tableRowClasses.selected} &`]: {
+          borderBottomColor: theme.palette.primary.light,
+        },
+
+        [`.${tableRowClasses.selected}:hover &`]: {
+          borderBottomColor: theme.palette.primary.main,
+        },
+
+        ...(ownerState.variant === "action" && {
+          paddingBlock: 0,
+        }),
+
+        ...(ownerState.variant === "body" && {
+          color: theme.palette.text.primary,
+        }),
+
+        ...(ownerState.variant === "date" && {
+          whiteSpace: "nowrap",
+        }),
+
+        ...(ownerState.variant === "footer" && {
+          color: theme.palette.text.secondary,
+          lineHeight: theme.typography.body1.lineHeight,
+          fontSize: theme.typography.body1.fontSize,
+        }),
+
+        [`.${tableHeadClasses.root} &`]: {
+          color: theme.palette.text.secondary,
+          lineHeight: theme.typography.body1.lineHeight,
+          fontWeight: theme.typography.fontWeightBold,
+          backgroundColor: theme.palette.grey[50],
+        },
+
+        ...(ownerState.variant === "head" && {
+          lineHeight: theme.typography.body1.lineHeight,
+          fontWeight: theme.typography.fontWeightBold,
+        }),
+
+        ...(ownerState.variant === "number" && {
+          textAlign: "right",
+          fontFeatureSettings: '"lnum", "tnum"',
+        }),
+
+        ...(ownerState.padding === "checkbox" && {
+          width: 48, // prevent the checkbox column from growing
+          padding: "0 0 0 4px",
+        }),
+
+        ...(ownerState.padding === "none" && {
+          padding: 0,
+        }),
+
+        ...(ownerState.align === "left" && {
+          textAlign: "left",
+        }),
+
+        ...(ownerState.align === "center" && {
+          textAlign: "center",
+        }),
+
+        ...(ownerState.align === "right" && {
+          textAlign: "right",
+          flexDirection: "row-reverse",
+        }),
+
+        ...(ownerState.align === "justify" && {
+          textAlign: "justify",
+        }),
+      }),
+    },
+  },
+  MuiTableContainer: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        width: "unset",
+        maxWidth: "100%",
+        marginBlockStart: theme.spacing(0),
+        marginBlockEnd: theme.spacing(4),
+        marginInline: 0,
+        overflowX: "auto",
+
+        "&:last-child": {
+          marginBlock: 0,
+        },
+      }),
+    },
+  },
+  MuiTableRow: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        verticalAlign: "unset",
+        [`&.${tableRowClasses.root}:hover`]: {
+          backgroundColor: theme.palette.grey[50],
+        },
+        [`&.${tableRowClasses.selected}`]: {
+          backgroundColor: theme.palette.primary.lighter,
+          "&:hover": {
+            backgroundColor: theme.palette.primary.lighter,
+          },
+        },
+      }),
+    },
+  },
+  MuiTableSortLabel: {
+    defaultProps: {
+      IconComponent: ArrowDownIcon,
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        cursor: "pointer",
+        display: "inline-flex",
+        justifyContent: "flex-start",
+        flexDirection: "inherit",
+        alignItems: "center",
+        "&:focus-visible": {
+          color: theme.palette.text.primary,
+          outlineOffset: theme.spacing(4),
+          outlineStyle: "solid",
+          outlineWidth: "2px",
+          outlineColor: theme.palette.primary.main,
+        },
+        "&:hover": {
+          color: theme.palette.text.primary,
+          [`& .${tableSortLabelClasses.icon}`]: {
+            opacity: 1,
+          },
+        },
+        [`&.${tableSortLabelClasses.active}`]: {
+          color: theme.palette.text.secondary,
+          [`& .${tableSortLabelClasses.icon}`]: {
+            opacity: 1,
+            color: "inherit",
+          },
+        },
+      }),
+      icon: ({ theme, ownerState }) => ({
+        fontSize: "inherit",
+        marginRight: 0,
+        marginLeft: 0,
+        opacity: 0,
+        color: "inherit",
+        transition: theme.transitions.create(["opacity", "transform"], {
+          duration: theme.transitions.duration.shorter,
+        }),
+        userSelect: "none",
+
+        [`.${tableCellClasses.alignRight} &`]: {
+          marginInlineEnd: theme.spacing(2),
+        },
+
+        [`.${tableCellClasses.alignLeft} &`]: {
+          marginInlineStart: theme.spacing(2),
+        },
+
+        ...(ownerState.direction === "desc" && {
+          transform: "rotate(0deg)",
+        }),
+        ...(ownerState.direction === "asc" && {
+          transform: "rotate(180deg)",
+        }),
+      }),
+    },
+  },
   MuiTabs: {
     styleOverrides: {
       root: ({ theme }) => ({
@@ -780,6 +1035,103 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiTooltip: {
+    defaultProps: {
+      arrow: true,
+      enterDelay: 500,
+      enterNextDelay: 250,
+      placement: "top",
+    },
+    styleOverrides: {
+      tooltip: ({ theme, ownerState }) => ({
+        maxWidth: `calc(${theme.mixins.maxWidth} / 2)`,
+        paddingBlock: theme.spacing(2),
+        paddingInline: theme.spacing(3),
+        backgroundColor: theme.palette.grey[900],
+        color: theme.palette.common.white,
+        fontSize: theme.typography.subtitle1.fontSize,
+        lineHeight: theme.typography.subtitle1.lineHeight,
+        ...(ownerState.touch === true && {
+          paddingBlock: theme.spacing(2),
+          paddingInline: theme.spacing(3),
+          fontSize: theme.typography.subtitle1.fontSize,
+          lineHeight: theme.typography.subtitle1.lineHeight,
+          fontWeight: theme.typography.fontWeightRegular,
+        }),
+        [`.${tooltipClasses.popper}[data-popper-placement*="left"] &`]: {
+          transformOrigin: "right center",
+          ...(ownerState.isRtl
+            ? {
+                marginLeft: theme.spacing(3),
+                ...(ownerState.touch === true && {
+                  marginLeft: theme.spacing(4),
+                }),
+              }
+            : {
+                marginRight: theme.spacing(3),
+                ...(ownerState.touch === true && {
+                  marginRight: theme.spacing(4),
+                }),
+              }),
+        },
+        [`.${tooltipClasses.popper}[data-popper-placement*="right"] &`]: {
+          transformOrigin: "left center",
+          ...(ownerState.isRtl
+            ? {
+                marginRight: theme.spacing(3),
+                ...(ownerState.touch === true && {
+                  marginRight: theme.spacing(4),
+                }),
+              }
+            : {
+                marginLeft: theme.spacing(3),
+                ...(ownerState.touch === true && {
+                  marginLeft: theme.spacing(4),
+                }),
+              }),
+        },
+        [`.${tooltipClasses.popper}[data-popper-placement*="top"] &`]: {
+          transformOrigin: "center bottom",
+          marginBottom: theme.spacing(3),
+          ...(ownerState.touch === true && {
+            marginBottom: theme.spacing(4),
+          }),
+        },
+        [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &`]: {
+          transformOrigin: "center top",
+          marginTop: theme.spacing(3),
+          ...(ownerState.touch === true && {
+            marginTop: theme.spacing(4),
+          }),
+        },
+      }),
+      arrow: ({ theme }) => ({
+        color: theme.palette.grey[900],
+        "&::before": {
+          borderRadius: "0",
+        },
+
+        [`.${tooltipClasses.popper}[data-popper-placement*="top"] &::before`]: {
+          borderRadius: `0 0 3px 0`,
+        },
+
+        [`.${tooltipClasses.popper}[data-popper-placement*="right"] &::before`]:
+          {
+            borderRadius: `0 0 0 3px`,
+          },
+
+        [`.${tooltipClasses.popper}[data-popper-placement*="bottom"] &::before`]:
+          {
+            borderRadius: `3px 0 0 0`,
+          },
+
+        [`.${tooltipClasses.popper}[data-popper-placement*="left"] &::before`]:
+          {
+            borderRadius: `0 3px 0 0`,
+          },
+      }),
+    },
+  },
   MuiTypography: {
     defaultProps: {
       fontFamily:

package/src/themes/odyssey/components.types.ts

@@ -59,7 +59,6 @@ declare module "@mui/material/Link" {
     body1: false;
     body2: false;
     button: false;
-    caption: false;
     h1: false;
     h2: false;
     h3: false;
@@ -89,4 +88,21 @@ declare module "@mui/material/Link" {
   }
 }
 
+declare module "@mui/material/TableCell" {
+  interface TableCellPropsVariantOverrides {
+    action: true;
+    body: true;
+    date: true;
+    footer: true;
+    head: true;
+    number: true;
+  }
+}
+
+declare module "@mui/material/Tooltip" {
+  interface TooltipComponentsPropsOverrides {
+    placement?: "bottom" | "left" | "right" | "top";
+  }
+}
+
 export {};

package/src/themes/odyssey/shape.ts

@@ -13,6 +13,12 @@
 import type { ThemeOptions } from "@mui/material";
 import * as Tokens from "@okta/odyssey-design-tokens";
 
+// Strip units from BorderRadiusBase to accommodate MUI's typing
+const NumericalBorderRadiusBase =
+  typeof Tokens.BorderRadiusBase === "string"
+    ? Number(Tokens.BorderRadiusBase.replace(/(\d+).*/, "$1"))
+    : Tokens.BorderRadiusBase;
+
 export const shape: ThemeOptions["shape"] = {
-  borderRadius: Tokens.BorderRadiusBase,
+  borderRadius: NumericalBorderRadiusBase,
 };

package/src/themes/odyssey/theme.ts

@@ -12,22 +12,22 @@
 
 import { createTheme } from "@mui/material/styles";
 
+import { components } from "./components";
+import { mixins } from "./mixins";
 import { palette } from "./palette";
-import "./palette.types";
 import { shape } from "./shape";
-import { mixins } from "./mixins";
-import "./mixins.types";
 import { spacing } from "./spacing";
 import { typography } from "./typography";
-import "./typography.types";
-import { components } from "./components";
 import "./components.types";
+import "./mixins.types";
+import "./palette.types";
+import "./typography.types";
 
 export const theme = createTheme({
+  components,
+  mixins,
   palette,
   shape,
-  mixins,
   spacing,
   typography,
-  components,
 });

package/src/themes/odyssey/typography.ts

@@ -28,37 +28,37 @@ export const typography: ThemeOptions["typography"] = {
     letterSpacing: 0,
   },
   h1: {
-    fontWeight: Tokens.FontWeightBold,
+    fontWeight: Number(Tokens.FontWeightBold),
     fontSize: Tokens.FontSizeHeading1,
     lineHeight: Tokens.FontLineHeightHeading1,
     marginBottom: Tokens.SpaceScale1,
   },
   h2: {
-    fontWeight: Tokens.FontWeightBold,
+    fontWeight: Number(Tokens.FontWeightBold),
     fontSize: Tokens.FontSizeHeading2,
     lineHeight: Tokens.FontLineHeightHeading2,
     marginBottom: Tokens.SpaceScale1,
   },
   h3: {
-    fontWeight: Tokens.FontWeightBold,
+    fontWeight: Number(Tokens.FontWeightBold),
     fontSize: Tokens.FontSizeHeading3,
     lineHeight: Tokens.FontLineHeightHeading3,
     marginBottom: Tokens.SpaceScale1,
   },
   h4: {
-    fontWeight: Tokens.FontWeightBold,
+    fontWeight: Number(Tokens.FontWeightBold),
     fontSize: Tokens.FontSizeHeading4,
     lineHeight: Tokens.FontLineHeightHeading4,
     marginBottom: Tokens.SpaceScale1,
   },
   h5: {
-    fontWeight: Tokens.FontWeightBold,
+    fontWeight: Number(Tokens.FontWeightBold),
     fontSize: Tokens.FontSizeHeading5,
     lineHeight: Tokens.FontLineHeightHeading5,
     marginBottom: Tokens.SpaceScale1,
   },
   h6: {
-    fontWeight: Tokens.FontWeightBold,
+    fontWeight: Number(Tokens.FontWeightBold),
     fontSize: Tokens.FontScale2,
     lineHeight: Tokens.FontLineHeightHeading6,
     marginBottom: Tokens.SpaceScale1,

package/src/themes/odyssey/typography.types.ts

@@ -25,17 +25,16 @@ declare module "@mui/material/styles" {
 
 declare module "@mui/material/Typography" {
   interface TypographyPropsVariantOverrides {
-    body1: true;
+    body1: true; // Design may refer to this as "body"
     body2: false;
-    body: true;
     button: false;
     kbd: true;
     legend: true;
     overline: false;
-    subtitle1: true;
+    subtitle1: true; // Design may refer to this as "caption"
     subtitle2: false;
-    default: true; // used by Link
-    monochrome: true; // used by Link
+    default: true; // used by <Link>
+    monochrome: true; // used by <Link>
   }
 }
 

package/src/utils/{oid.test.ts → createUniqueId.test.ts}

@@ -10,12 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { oid, length } from "./oid";
+import { createUniqueId, uniqueIdLength } from "./createUniqueId";
 
-describe("oid", () => {
+describe("createUniqueId", () => {
   it("returns a nice id string", () => {
-    const result = oid();
+    const result = createUniqueId();
+
     expect(typeof result).toBe("string");
-    expect(result).toHaveLength(length);
+    expect(result).toHaveLength(uniqueIdLength);
   });
 });

package/src/utils/{oid.ts → createUniqueId.ts}

@@ -10,13 +10,8 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { useMemo } from "react";
+// This is a random number chosen to shrink down the unique ID to an arbitrary length.
+export const uniqueIdLength = 6;
 
-export const length = 6;
-
-export const oid = (): string => Math.random().toString(36).slice(-length);
-
-export const useOid = (id?: string): string => {
-  const _oid = useMemo(oid, [oid]);
-  return id || _oid;
-};
+export const createUniqueId = (): string =>
+  Math.random().toString(36).slice(-uniqueIdLength);

package/src/utils/index.ts

@@ -10,4 +10,5 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export { oid, useOid } from "./oid";
+export * from "./createUniqueId";
+export * from "./useUniqueId";

package/src/utils/useUniqueId.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 { createUniqueId } from "./createUniqueId";
+
+export const useUniqueId = (id?: string): string => {
+  const uniqueId = useMemo(() => createUniqueId(), []);
+
+  return id || uniqueId;
+};

package/dist/utils/oid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"oid.d.ts","sourceRoot":"","sources":["../../src/utils/oid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAIH,eAAO,MAAM,MAAM,IAAI,CAAC;AAExB,eAAO,MAAM,GAAG,QAAO,MAAmD,CAAC;AAE3E,eAAO,MAAM,MAAM,+BAAkB,MAGpC,CAAC"}

package/dist/utils/oid.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/utils/oid.ts"],"names":["useMemo","length","oid","Math","random","toString","slice","useOid","id","_oid"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;AAEA,OAAO,MAAMC,MAAM,GAAG,CAAf;AAEP,OAAO,MAAMC,GAAG,GAAG,MAAcC,IAAI,CAACC,MAAL,GAAcC,QAAd,CAAuB,EAAvB,EAA2BC,KAA3B,CAAiC,CAACL,MAAlC,CAA1B;AAEP,OAAO,MAAMM,MAAM,GAAIC,EAAD,IAAyB;AAC7C,QAAMC,IAAI,GAAGT,OAAO,CAACE,GAAD,EAAM,CAACA,GAAD,CAAN,CAApB;;AACA,SAAOM,EAAE,IAAIC,IAAb;AACD,CAHM","sourcesContent":["/*!\n * Copyright (c) 2021-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 { useMemo } from \"react\";\n\nexport const length = 6;\n\nexport const oid = (): string => Math.random().toString(36).slice(-length);\n\nexport const useOid = (id?: string): string => {\n  const _oid = useMemo(oid, [oid]);\n  return id || _oid;\n};\n"],"file":"oid.js"}