@okta/odyssey-react-mui 0.15.1 → 0.15.2

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,cAAc,kBAAkB,CAAC;AACjC,cAAc,eAAe,CAAC"}

package/dist/utils/index.js

@@ -9,5 +9,6 @@
  *
  * See the License for the specific language governing permissions and limitations under the License.
  */
-export { oid, useOid } from "./oid.js";
+export * from "./createUniqueId.js";
+export * from "./useUniqueId.js";
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["oid","useOid"],"sources":["../../src/utils/index.ts"],"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\nexport { oid, useOid } from \"./oid\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;SAESA,G,EAAKC,M"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/utils/index.ts"],"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\nexport * from \"./createUniqueId\";\nexport * from \"./useUniqueId\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/utils/useUniqueId.d.ts

@@ -0,0 +1,13 @@
+/*!
+ * 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.
+ */
+export declare const useUniqueId: (id?: string) => string;
+//# sourceMappingURL=useUniqueId.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUniqueId.d.ts","sourceRoot":"","sources":["../../src/utils/useUniqueId.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAMH,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,MAIzC,CAAC"}

package/dist/utils/useUniqueId.js

@@ -0,0 +1,18 @@
+/*!
+ * 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.js";
+export const useUniqueId = id => {
+  const uniqueId = useMemo(() => createUniqueId(), []);
+  return id || uniqueId;
+};
+//# sourceMappingURL=useUniqueId.js.map

package/dist/utils/useUniqueId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../../src/utils/useUniqueId.ts"],"sourcesContent":["/*!\n * Copyright (c) 2022-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\nimport { createUniqueId } from \"./createUniqueId\";\n\nexport const useUniqueId = (id?: string): string => {\n  const uniqueId = useMemo(() => createUniqueId(), []);\n\n  return id || uniqueId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;SAESC,c;AAET,OAAO,MAAMC,WAAW,GAAIC,EAAD,IAAyB;EAClD,MAAMC,QAAQ,GAAGJ,OAAO,CAAC,MAAMC,cAAc,EAArB,EAAyB,EAAzB,CAAxB;EAEA,OAAOE,EAAE,IAAIC,QAAb;AACD,CAJM"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -19,15 +19,17 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
-    "@okta/odyssey-design-tokens": "^0.15.1"
+    "@mui/icons-material": "^5.10.3",
+    "@mui/lab": "^5.0.0-alpha.103",
+    "@mui/material": "^5.10.5",
+    "@mui/utils": "^5.10.3",
+    "@okta/odyssey-design-tokens": "^0.15.2"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
-    "@mui/icons-material": "^5",
-    "@mui/material": "^5.9.0",
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "ae87e24beead8b4eaafb35d9fd0e3597c50104dc"
+  "gitHead": "fadeba32af958366b356d424c7a0a8dfcdf7a3f3"
 }

package/src/components/Link/Link.tsx

@@ -24,7 +24,7 @@ export const Link = forwardRef<HTMLLinkElement | HTMLAnchorElement, LinkProps>(
     const { icon, children, target } = props;
     return (
       <MuiLink {...props}>
-        <span className="Link-icon">{icon}</span>
+        {icon && <span className="Link-icon">{icon}</span>}
         {children}
         {target === "_blank" && (
           <span className="Link-indicator" role="presentation">

package/src/components/PasswordInput/PasswordInput.tsx

@@ -22,7 +22,7 @@ import {
   InputAdornment,
 } from "@mui/material";
 import { Visibility, VisibilityOff } from "@mui/icons-material";
-import { useOid } from "../../utils";
+import { useUniqueId } from "../../utils";
 
 interface State {
   password: string;
@@ -77,14 +77,14 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
         : tooltipLabel;
     }, [values, tooltipLabel]);
 
-    const oid = useOid(id);
+    const uniqueId = useUniqueId(id);
 
     return (
       <Box>
-        <InputLabel htmlFor={oid}>{label}</InputLabel>
+        <InputLabel htmlFor={uniqueId}>{label}</InputLabel>
         <OutlinedInput
           {...rest}
-          id={oid}
+          id={uniqueId}
           inputProps={inputProps}
           inputRef={ref}
           onChange={handlePasswordChange}

package/src/components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,20 @@
+/*!
+ * 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 { ReactElement } from "react";
+
+import { odysseyTheme } from "../../themes";
+
+export const ThemeProvider = ({ children }: { children: ReactElement }) => (
+  <MuiThemeProvider theme={odysseyTheme}>{children}</MuiThemeProvider>
+);

package/src/components/ThemeProvider/index.ts

@@ -0,0 +1,13 @@
+/*!
+ * 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.
+ */
+
+export * from "./ThemeProvider";

package/src/components/index.ts

@@ -10,6 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-export * from "./PasswordInput";
-export * from "./Link";
 export * from "./Icon";
+export * from "./Link";
+export * from "./PasswordInput";
+export * from "./ThemeProvider";

package/src/index.ts

@@ -10,5 +10,85 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
+export {
+  Alert,
+  AlertTitle,
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  CssBaseline,
+  FormControl,
+  FormControlLabel,
+  FormGroup,
+  FormHelperText,
+  FormLabel,
+  InputAdornment,
+  InputLabel,
+  OutlinedInput,
+  Radio,
+  RadioGroup,
+  Select,
+  Snackbar,
+  Stack,
+  SvgIcon,
+  Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableSortLabel,
+  ThemeProvider as MuiThemeProvider,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
+
+export type {
+  AlertProps,
+  AlertTitleProps,
+  BoxProps,
+  ButtonProps,
+  CheckboxProps,
+  CircularProgressProps,
+  CssBaselineProps,
+  FormControlLabelProps,
+  FormControlProps,
+  FormGroupProps,
+  FormHelperTextProps,
+  FormLabelProps,
+  InputAdornmentProps,
+  InputLabelProps,
+  OutlinedInputProps,
+  RadioGroupProps,
+  RadioProps,
+  SelectProps,
+  SnackbarProps,
+  StackProps,
+  SvgIconProps,
+  TabProps,
+  TableBodyProps,
+  TableCellProps,
+  TableContainerProps,
+  TableHeadProps,
+  TableProps,
+  TableRowProps,
+  TableSortLabelProps,
+  TooltipProps,
+  TypographyProps,
+  useThemeProps,
+} from "@mui/material";
+
+export { TabContext, TabList, TabPanel } from "@mui/lab";
+
+export type { TabContextProps, TabListProps, TabPanelProps } from "@mui/lab";
+
+export { Favorite as FavoriteIcon } from "@mui/icons-material";
+
+export { visuallyHidden } from "@mui/utils";
+
 export * from "./components";
 export * from "./themes";
+export * from "./utils";

package/src/themes/odyssey/components.tsx

@@ -11,6 +11,7 @@
  */
 
 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";
@@ -18,6 +19,7 @@ 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,
@@ -49,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",
         }),
@@ -127,6 +132,7 @@ export const components: ThemeOptions["components"] = {
   },
   MuiButton: {
     defaultProps: {
+      variant: "primary",
       disableElevation: true,
     },
     variants: [
@@ -289,6 +295,7 @@ export const components: ThemeOptions["components"] = {
         transitionTimingFunction: "linear",
         borderWidth: theme.mixins.borderWidth,
         borderStyle: theme.mixins.borderStyle,
+        borderRadius: theme.mixins.borderRadius,
         outlineColor: "transparent",
         outlineOffset: "0",
         fontSize: theme.typography.body1.fontSize,
@@ -802,6 +809,13 @@ export const components: ThemeOptions["components"] = {
       }),
     },
   },
+  MuiTabPanel: {
+    styleOverrides: {
+      root: {
+        padding: 0,
+      },
+    },
+  },
   MuiTable: {
     styleOverrides: {
       root: ({ theme, ownerState }) => ({
@@ -838,6 +852,10 @@ export const components: ThemeOptions["components"] = {
         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,
         },
@@ -933,7 +951,7 @@ export const components: ThemeOptions["components"] = {
     styleOverrides: {
       root: ({ theme }) => ({
         verticalAlign: "unset",
-        [`&.${tableRowClasses.hover}:hover`]: {
+        [`&.${tableRowClasses.root}:hover`]: {
           backgroundColor: theme.palette.grey[50],
         },
         [`&.${tableRowClasses.selected}`]: {
@@ -1017,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

@@ -99,4 +99,10 @@ declare module "@mui/material/TableCell" {
   }
 }
 
+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/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,QAAS,MAAM,KAAG,MAGpC,CAAC"}

package/dist/utils/oid.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"oid.js","names":["useMemo","length","oid","Math","random","toString","slice","useOid","id","_oid"],"sources":["../../src/utils/oid.ts"],"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"],"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;EAC7C,MAAMC,IAAI,GAAGT,OAAO,CAACE,GAAD,EAAM,CAACA,GAAD,CAAN,CAApB;;EACA,OAAOM,EAAE,IAAIC,IAAb;AACD,CAHM"}