@okta/odyssey-react-mui 0.24.0 → 1.0.1

package/i18n.config.json

@@ -1,5 +1,4 @@
 {
-  "defaultBranch": "develop",
   "resourceFile": "odyssey-react-mui.properties",
   "resourceFilePath": "packages/odyssey-react-mui/src/properties",
   "translationsFilePath": "packages/odyssey-react-mui/src/properties/translations",

package/package.json

@@ -1,22 +1,33 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.24.0",
+  "version": "1.0.1",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
   "sideEffects": false,
+  "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/src/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./README.md": {
-      "default": "./README.md"
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/src/index.d.ts"
+      ],
+      "icons": [
+        "./dist/src/icons.generated/index.d.ts"
+      ],
+      "labs": [
+        "./dist/src/labs/index.d.ts"
+      ]
     }
   },
+  "exports": {
+    "./icons": "./dist/icons.generated/index.js",
+    "./labs": "./dist/labs/index.js",
+    ".": "./dist/index.js",
+    "./README.md": "./README.md"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/okta/odyssey",
@@ -28,9 +39,14 @@
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.12.3",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.24.0",
+    "@mui/x-date-pickers": "^5.0.15",
+    "@okta/odyssey-design-tokens": "1.0.1",
+    "date-fns": "^2.30.0",
     "i18next": "^22.4.15",
-    "react-i18next": "^12.2.2"
+    "material-react-table": "^1.14.0",
+    "react-i18next": "^12.2.2",
+    "ts-node": "^10.9.1",
+    "word-wrap": "~1.2.5"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -38,5 +54,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "a0606b67a94216882f377514f2f733c6ebb39f9d"
+  "gitHead": "e59c6f57fab14c9b2f83826558af3a88157b3815"
 }

package/scripts/generateIconsIndex.ts

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2023-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 { readdir, writeFile } from "node:fs/promises";
+import { extname, basename } from "node:path";
+
+const currentYear = new Date().getFullYear();
+
+export const headerComment = `/*!
+ * Copyright (c) ${currentYear}-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.
+ */
+
+// Code automatically generated by svgr; DO NOT EDIT.
+
+`;
+
+readdir("./src/icons.generated")
+  .then((filenames) =>
+    headerComment.concat(
+      filenames
+        .map((filename) => basename(filename, extname(filename)))
+        .map((filename) => `export * from "./${filename}";`)
+        .join("\n")
+    )
+  )
+  .then((content) => writeFile("./src/icons.generated/index.ts", content))
+  .then(() => {
+    console.info("Completed writing index file.");
+  })
+  .catch((error) => {
+    console.error(error);
+  });

package/scripts/properties-to-ts.js

@@ -13,16 +13,18 @@
 // Part of this has been copied over from @okta/ui-build-tools' own internal node script
 // https://github.com/okta/ui-build-tools/blob/master/packages/clis/i18n/properties-to-json.js
 
-const { resolve, join, basename, extname } = require("node:path");
-const {
+import { resolve, join, basename, extname } from "node:path";
+import {
   readFileSync,
   writeFileSync,
   rmSync,
   existsSync,
   mkdirSync,
-} = require("fs");
-const properties = require("properties");
-const readdir = require("recursive-readdir");
+} from "node:fs";
+import properties from "properties";
+import readdir from "recursive-readdir";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
 
 const convert = (baseFiles, propertiesTargetDir) => {
   for (const src of baseFiles) {
@@ -63,16 +65,7 @@ async function convertPropertiesToJson({ resourcePath, targetJsonPath }) {
   convert(baseFiles, propertiesTargetDirectory);
 }
 
-exports.handler = async (argv) => {
-  const { resourcePath, targetJsonPath } = argv;
-
-  await convertPropertiesToJson({
-    resourcePath,
-    targetJsonPath,
-  });
-};
-
-require("yargs")
+yargs(hideBin(process.argv))
   .scriptName("properties-to-ts")
   .usage("$0 <cmd> [args]")
   .command(

package/src/Autocomplete.tsx

@@ -24,56 +24,89 @@ export type AutocompleteProps<
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 > = {
+  /**
+   * Enables multiple choice selection
+   */
   hasMultipleChoices?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["multiple"];
+  /**
+   * The hint text for the Autocomplete input
+   */
   hint?: string;
+  /**
+   * Allows the input of custom values
+   */
   isCustomValueAllowed?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["freeSolo"];
+  /**
+   * Disables the Autocomplete input
+   */
   isDisabled?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["disabled"];
+  /**
+   * Displays a loading indicator
+   */
   isLoading?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["loading"];
+  /**
+   * Makes the Autocomplete input read-only
+   */
   isReadOnly?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["readOnly"];
+  /**
+   * The label text for the autocomplete input
+   */
   label: string;
+  /**
+   * Callback fired when the value of the autocomplete input changes
+   */
   onChange?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["onChange"];
+  /**
+   * Callback fired when the input value of the autocomplete input changes
+   */
   onInputChange?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["onInputChange"];
+  /**
+   * The options for the Autocomplete input
+   */
   options: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
     undefined,
     IsCustomValueAllowed
   >["options"];
+  /**
+   * The value of the Autocomplete input
+   */
   value?: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
@@ -87,8 +120,8 @@ const Autocomplete = <
   HasMultipleChoices extends boolean | undefined,
   IsCustomValueAllowed extends boolean | undefined
 >({
-  isCustomValueAllowed,
   hasMultipleChoices,
+  isCustomValueAllowed,
   isDisabled,
   isLoading,
   isReadOnly,
@@ -122,6 +155,8 @@ const Autocomplete = <
 
   return (
     <MuiAutocomplete
+      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
+      aria-disabled={isDisabled}
       disabled={isDisabled}
       freeSolo={isCustomValueAllowed}
       loading={isLoading}

package/src/Banner.tsx

@@ -10,11 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor, AlertProps } from "@mui/material";
+import { Alert, AlertColor, AlertTitle, AlertProps } from "@mui/material";
+import { Link } from "./Link";
+import { ScreenReaderText } from "./ScreenReaderText";
 import { memo } from "react";
-import { Alert, Link, ScreenReaderText } from "./";
 import { useTranslation } from "react-i18next";
 
+export const bannerRoleValues = ["status", "alert"] as const;
+export const bannerSeverityValues: AlertColor[] = [
+  "success",
+  "info",
+  "warning",
+  "error",
+];
+
 export type BannerProps = {
   /**
    * If linkUrl is not undefined, this is the text of the link.
@@ -36,11 +45,11 @@ export type BannerProps = {
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof bannerRoleValues)[number];
   /**
    * Determine the color and icon of the alert
    */
-  severity: AlertColor;
+  severity: (typeof bannerSeverityValues)[number];
   /**
    * The text content of the alert
    */
@@ -60,7 +69,7 @@ const Banner = ({
   return (
     <Alert onClose={onClose} role={role} severity={severity} variant="banner">
       <ScreenReaderText>{t(`severity.${severity}`)}:</ScreenReaderText>
-      {text}
+      <AlertTitle>{text}</AlertTitle>
       {linkUrl && (
         <Link href={linkUrl} variant="monochrome">
           {linkText}
@@ -71,5 +80,6 @@ const Banner = ({
 };
 
 const MemoizedBanner = memo(Banner);
+MemoizedBanner.displayName = "Banner";
 
 export { MemoizedBanner as Banner };

package/src/Box.tsx

@@ -0,0 +1,35 @@
+/*!
+ * Copyright (c) 2023-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 { Box as MuiBox, BoxProps as MuiBoxProps } from "@mui/material";
+import { ReactNode, forwardRef } from "react";
+
+export type BoxProps = {
+  children?: ReactNode;
+  component?: MuiBoxProps["component"];
+  id?: MuiBoxProps["id"];
+  sx?: MuiBoxProps["sx"];
+};
+
+export const Box = forwardRef<HTMLElement, BoxProps>(
+  ({ children, component, id, sx }, ref) => (
+    <MuiBox
+      ref={ref}
+      children={children}
+      component={component}
+      id={id}
+      sx={sx}
+    />
+  )
+);
+
+Box.displayName = "Box";

package/src/Button.tsx

@@ -12,46 +12,121 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { memo, ReactElement, useContext, useMemo } from "react";
+import { memo, ReactElement, useCallback } from "react";
 
-import { Icon } from "./Icon";
-import { MuiPropsContext } from "./MuiPropsContext";
+import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 
+export const buttonSizeValues = ["small", "medium", "large"] as const;
+export const buttonTypeValues = ["button", "submit", "reset"] as const;
+export const buttonVariantValues = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "danger",
+  "floating",
+] as const;
+
 export type ButtonProps = {
-  endIcon?: ReactElement<typeof Icon>;
+  /**
+   * The ARIA label for the Button
+   */
+  ariaLabel?: string;
+  /**
+   * The ID of the element that labels the Button
+   */
+  ariaLabelledBy?: string;
+  /**
+   * The ID of the element that describes the Button
+   */
+  ariaDescribedBy?: string;
+  /**
+   * The icon element to display at the end of the Button
+   */
+  endIcon?: ReactElement;
+  /**
+   * The ID of the Button
+   */
   id?: string;
+  /**
+   * Determines whether the Button is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * Determines whether the Button should take up the full available width
+   */
   isFullWidth?: boolean;
+  /**
+   * The text content of the Button
+   */
+  label?: string;
+  /**
+   * The click event handler for the Button
+   */
   onClick?: MuiButtonProps["onClick"];
-  size?: MuiButtonProps["size"];
-  startIcon?: ReactElement<typeof Icon>;
-  text?: string;
   /**
-   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
+   * The size of the button
+   */
+  size?: (typeof buttonSizeValues)[number];
+  /**
+   * The icon element to display at the start of the Button
+   */
+  startIcon?: ReactElement;
+  /**
+   * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
-  variant?: "primary" | "secondary" | "danger" | "floating";
-};
+  /**
+   * The type of the HTML button element
+   */
+  type?: (typeof buttonTypeValues)[number];
+  /**
+   * The variant of the Button
+   */
+  variant: (typeof buttonVariantValues)[number];
+} & (
+  | {
+      endIcon?: ReactElement;
+      label: string;
+      startIcon?: ReactElement;
+    }
+  | {
+      endIcon?: ReactElement;
+      label?: "" | undefined;
+      startIcon: ReactElement;
+    }
+  | {
+      endIcon: ReactElement;
+      label?: "" | undefined;
+      startIcon?: ReactElement;
+    }
+);
 
 const Button = ({
+  ariaDescribedBy,
+  ariaLabel,
+  ariaLabelledBy,
   endIcon,
   id,
   isDisabled,
   isFullWidth,
+  label = "",
   onClick,
   size = "medium",
   startIcon,
-  text,
   tooltipText,
+  type = "button",
   variant,
 }: ButtonProps) => {
-  const muiProps = useContext(MuiPropsContext);
+  const muiProps = useMuiProps();
 
-  const button = useMemo(
-    () => (
+  const renderButton = useCallback(
+    (muiProps) => (
       <MuiButton
         {...muiProps}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-describedby={ariaDescribedBy}
         disabled={isDisabled}
         endIcon={endIcon}
         fullWidth={isFullWidth}
@@ -59,21 +134,25 @@ const Button = ({
         onClick={onClick}
         size={size}
         startIcon={startIcon}
+        type={type}
         variant={variant}
       >
-        {text}
+        {label}
       </MuiButton>
     ),
     [
+      ariaDescribedBy,
+      ariaLabel,
+      ariaLabelledBy,
       endIcon,
       id,
       isDisabled,
       isFullWidth,
-      muiProps,
+      label,
       onClick,
       size,
       startIcon,
-      text,
+      type,
       variant,
     ]
   );
@@ -82,14 +161,16 @@ const Button = ({
     <>
       {tooltipText && (
         <Tooltip ariaType="description" placement="top" text={tooltipText}>
-          {button}
+          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>
         </Tooltip>
       )}
-      {!tooltipText && button}
+
+      {!tooltipText && renderButton(muiProps)}
     </>
   );
 };
 
 const MemoizedButton = memo(Button);
+MemoizedButton.displayName = "Button";
 
 export { MemoizedButton as Button };

package/src/{Infobox.tsx → Callout.tsx}

@@ -10,44 +10,53 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
-import { Alert, AlertTitle, ScreenReaderText } from ".";
+import { Alert, AlertTitle, Box } from "@mui/material";
+import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
-export type InfoboxProps = {
+export const calloutRoleValues = ["status", "alert"] as const;
+export const calloutSeverityValues = [
+  "success",
+  "info",
+  "warning",
+  "error",
+] as const;
+
+export type CalloutProps = {
   /**
-   * The contents of the alert
+   * The contents of the Callout
    */
   children: ReactNode;
   /**
-   * Sets the ARIA role of the alert
+   * Sets the ARIA role of the Callout
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof calloutRoleValues)[number];
   /**
-   * Determine the color and icon of the alert
+   * Determine the color and icon of the Callout
    */
-  severity: AlertColor;
+  severity: (typeof calloutSeverityValues)[number];
   /**
-   * The title of the alert
+   * The title of the Callout
    */
   title?: string;
 };
 
-const Infobox = ({ children, role, severity, title }: InfoboxProps) => {
+const Callout = ({ children, role, severity, title }: CalloutProps) => {
   const { t } = useTranslation();
 
   return (
-    <Alert role={role} severity={severity} variant="infobox">
+    <Alert role={role} severity={severity} variant="callout">
       <ScreenReaderText>{t(`severity.${severity}`)}: </ScreenReaderText>
       {title && <AlertTitle>{title}</AlertTitle>}
-      {children}
+      <Box component="div">{children}</Box>
     </Alert>
   );
 };
 
-const MemoizedInfobox = memo(Infobox);
+const MemoizedCallout = memo(Callout);
+MemoizedCallout.displayName = "Callout";
 
-export { MemoizedInfobox as Infobox };
+export { MemoizedCallout as Callout };