@okta/odyssey-react-mui 0.16.1 → 0.18.0

package/dist/useUniqueAlphabeticalId.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 useUniqueAlphabeticalId: (id?: string) => string;
+//# sourceMappingURL=useUniqueAlphabeticalId.d.ts.map

package/dist/useUniqueAlphabeticalId.d.ts.map

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

package/dist/useUniqueAlphabeticalId.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 { createUniqueAlphabeticalId } from "./createUniqueAlphabeticalId.js";
+export const useUniqueAlphabeticalId = id => {
+  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);
+  return id ?? uniqueAlphabeticalId;
+};
+//# sourceMappingURL=useUniqueAlphabeticalId.js.map

package/dist/useUniqueAlphabeticalId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useUniqueAlphabeticalId.js","names":["useMemo","createUniqueAlphabeticalId","useUniqueAlphabeticalId","id","uniqueAlphabeticalId"],"sources":["../src/useUniqueAlphabeticalId.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 { createUniqueAlphabeticalId } from \"./createUniqueAlphabeticalId\";\n\nexport const useUniqueAlphabeticalId = (id?: string) => {\n  const uniqueAlphabeticalId = useMemo(() => createUniqueAlphabeticalId(), []);\n\n  return id ?? uniqueAlphabeticalId;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,OAAT,QAAwB,OAAxB;SAESC,0B;AAET,OAAO,MAAMC,uBAAuB,GAAIC,EAAD,IAAiB;EACtD,MAAMC,oBAAoB,GAAGJ,OAAO,CAAC,MAAMC,0BAA0B,EAAjC,EAAqC,EAArC,CAApC;EAEA,OAAOE,EAAE,IAAIC,oBAAb;AACD,CAJM"}

package/dist/useUniqueId.d.ts.map

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

package/dist/useUniqueId.js

@@ -13,6 +13,6 @@ import { useMemo } from "react";
 import { createUniqueId } from "./createUniqueId.js";
 export const useUniqueId = id => {
   const uniqueId = useMemo(() => createUniqueId(), []);
-  return id || uniqueId;
+  return id ?? uniqueId;
 };
 //# sourceMappingURL=useUniqueId.js.map

package/dist/useUniqueId.js.map

@@ -1 +1 @@
-{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../src/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"}
+{"version":3,"file":"useUniqueId.js","names":["useMemo","createUniqueId","useUniqueId","id","uniqueId"],"sources":["../src/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) => {\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,IAAiB;EAC1C,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.16.1",
+  "version": "0.18.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -19,11 +19,12 @@
     "directory": "packages/odyssey-react-mui"
   },
   "dependencies": {
-    "@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.16.1"
+    "@emotion/cache": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/lab": "^5.0.0-alpha.117",
+    "@mui/material": "^5.11.6",
+    "@mui/utils": "^5.11.2",
+    "@okta/odyssey-design-tokens": "0.18.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -31,5 +32,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "da42577694e35710e4425c36d950de63c1b42458"
+  "gitHead": "83ced7625d94ed499ed408a382d151f96ecac238"
 }

package/src/Banner.tsx

@@ -0,0 +1,69 @@
+/*!
+ * 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 { AlertColor, AlertProps } from "@mui/material";
+import { memo } from "react";
+import { Alert, Link } from "./";
+
+export interface BannerProps {
+  /**
+   * Determine the color and icon of the alert
+   */
+  severity?: AlertColor;
+  /**
+   * Sets the ARIA role of the alert
+   * ("status" for something that dynamically updates, null for something
+   * unchanging)
+   */
+  role?: "status";
+  /**
+   * The text content of the alert
+   */
+  text: string;
+  /**
+   * The function that's fired when the user clicks the close button. If undefined,
+   * the close button will not be shown.
+   */
+  onClose?: AlertProps["onClose"];
+  /**
+   * If defined, the alert will include a link to the URL
+   */
+  linkUrl?: string;
+  /**
+   * If linkUrl is not undefined, this is the text of the link.
+   * If left blank, it defaults to "Learn more".
+   * Note that linkText does nothing if linkUrl is not defined
+   */
+  linkText?: string;
+}
+
+const Banner = ({
+  onClose,
+  severity = "info",
+  role,
+  linkUrl,
+  linkText = "Learn more",
+  text,
+}: BannerProps) => (
+  <Alert onClose={onClose} role={role} severity={severity} variant="banner">
+    {text}
+    {linkUrl && (
+      <Link href={linkUrl} variant="monochrome">
+        {linkText}
+      </Link>
+    )}
+  </Alert>
+);
+
+const MemoizedBanner = memo(Banner);
+
+export { MemoizedBanner as Banner };

package/src/Link.tsx

@@ -19,26 +19,24 @@ export interface LinkProps extends MuiLinkProps {
   icon?: ReactElement;
 }
 
-export const Link = forwardRef<HTMLLinkElement | HTMLAnchorElement, LinkProps>(
-  (props) => {
-    const { icon, children, target } = props;
-    return (
-      <MuiLink {...props}>
-        {icon && <span className="Link-icon">{icon}</span>}
-        {children}
-        {target === "_blank" && (
-          <span className="Link-indicator" role="presentation">
-            <SvgIcon viewBox="0 0 16 16">
-              <path
-                fillRule="evenodd"
-                clipRule="evenodd"
-                d="M13.2929 2H7.99998V1H14.5C14.7761 1 15 1.22386 15 1.5V8H14V2.70711L6.35353 10.3536L5.64642 9.64645L13.2929 2ZM1.5 4H1V4.5V14.5V15H1.5H11.5H12V14.5V8H11V14H2V5H8V4H1.5Z"
-                fill="currentColor"
-              />
-            </SvgIcon>
-          </span>
-        )}
-      </MuiLink>
-    );
-  }
-);
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const { icon, children, target } = props;
+  return (
+    <MuiLink {...props} ref={ref}>
+      {icon && <span className="Link-icon">{icon}</span>}
+      {children}
+      {target === "_blank" && (
+        <span className="Link-indicator" role="presentation">
+          <SvgIcon viewBox="0 0 16 16">
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M13.2929 2H7.99998V1H14.5C14.7761 1 15 1.22386 15 1.5V8H14V2.70711L6.35353 10.3536L5.64642 9.64645L13.2929 2ZM1.5 4H1V4.5V14.5V15H1.5H11.5H12V14.5V8H11V14H2V5H8V4H1.5Z"
+              fill="currentColor"
+            />
+          </SvgIcon>
+        </span>
+      )}
+    </MuiLink>
+  );
+});

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,44 @@
+/*!
+ * 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 {
+  createTheme,
+  ThemeOptions,
+  ThemeProvider as MuiThemeProvider,
+} from "@mui/material/styles";
+import { deepmerge } from "@mui/utils";
+import { memo, ReactElement, useMemo } from "react";
+
+import { odysseyTheme } from "./theme";
+
+const OdysseyThemeProvider = ({
+  children,
+  customTheme,
+}: {
+  children: ReactElement;
+  customTheme?: ThemeOptions;
+}) => {
+  const customOdysseyTheme = useMemo(
+    () => customTheme && createTheme(deepmerge(odysseyTheme, customTheme)),
+    [customTheme]
+  );
+
+  return (
+    <MuiThemeProvider theme={customOdysseyTheme ?? odysseyTheme}>
+      {children}
+    </MuiThemeProvider>
+  );
+};
+
+const MemoizedOdysseyThemeProvider = memo(OdysseyThemeProvider);
+
+export { MemoizedOdysseyThemeProvider as OdysseyThemeProvider };

package/src/Radio.tsx

@@ -0,0 +1,28 @@
+/*!
+ * 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 { FormControlLabel } from "./";
+import { Radio as MuiRadio } from "@mui/material";
+import { memo } from "react";
+
+export type RadioProps = {
+  label: string;
+  value: string;
+};
+
+const Radio = ({ label, value }: RadioProps) => (
+  <FormControlLabel control={<MuiRadio />} label={label} value={value} />
+);
+
+const MemoizedRadio = memo(Radio);
+
+export { MemoizedRadio as Radio };

package/src/RadioGroup.tsx

@@ -0,0 +1,105 @@
+/*!
+ * 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 {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  visuallyHidden,
+  Radio,
+  useUniqueId,
+} from "./";
+import { RadioGroup as MuiRadioGroup } from "@mui/material";
+import { memo, ReactElement, useMemo } from "react";
+
+export interface RadioGroupProps {
+  /**
+   * The <Radio> components within the group. Must include two or more.
+   */
+  children: Array<ReactElement<typeof Radio>>;
+  /**
+   * The text value of the radio that should be selected by default
+   */
+  defaultValue?: string;
+  /**
+   * The error text for an invalid group
+   */
+  errorMessage?: string;
+  /**
+   * Optional hint text
+   */
+  hint?: string;
+  /**
+   * Disables the whole radio group
+   */
+  isDisabled?: boolean;
+  /**
+   * The text label for the radio group
+   */
+  label: string;
+  /**
+   * The name of the radio group, which only needs to be changed
+   * if there are multiple radio groups on the same screen
+   */
+  name?: string;
+}
+
+const RadioGroup = ({
+  children,
+  defaultValue,
+  errorMessage,
+  hint,
+  isDisabled,
+  label,
+  name,
+}: RadioGroupProps) => {
+  const ariaDescribedBy = useMemo(
+    () =>
+      errorMessage || hint
+        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
+            .filter(Boolean)
+            .join(" ")
+        : undefined,
+    [errorMessage, hint, name]
+  );
+
+  const uniqueName = useUniqueId(name);
+
+  return (
+    <FormControl
+      component="fieldset"
+      disabled={isDisabled}
+      error={Boolean(errorMessage)}
+    >
+      <FormLabel component="legend">{label}</FormLabel>
+      {hint && (
+        <FormHelperText id={`${uniqueName}-hint`}>{hint}</FormHelperText>
+      )}
+      <MuiRadioGroup
+        aria-describedby={ariaDescribedBy}
+        defaultValue={defaultValue}
+        name={uniqueName}
+      >
+        {children}
+      </MuiRadioGroup>
+      {errorMessage && (
+        <FormHelperText id={`${uniqueName}-error`} error>
+          <span style={visuallyHidden}>Error:</span> {errorMessage}
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+};
+
+const MemoizedRadioGroup = memo(RadioGroup);
+
+export { MemoizedRadioGroup as RadioGroup };

package/src/Status.tsx

@@ -0,0 +1,29 @@
+/*!
+ * 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 { Chip } from "./";
+
+export interface StatusProps {
+  /**
+   * Determine the color and icon of the alert
+   */
+  severity: "default" | "error" | "info" | "success" | "warning";
+
+  /**
+   * The text content of the status
+   */
+  label: string;
+}
+
+export const Status = ({ severity, label }: StatusProps) => (
+  <Chip label={label} color={severity} variant="status" />
+);