@okta/odyssey-react-mui 0.24.0 → 1.0.0

package/src/Status.tsx

@@ -10,20 +10,37 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Chip } from "./";
+import { Chip } from "@mui/material";
+
+import { useMuiProps } from "./MuiPropsContext";
+
+export const statusSeverityValues = [
+  "default",
+  "error",
+  "success",
+  "warning",
+] as const;
+export const statusVariantValues = ["lamp", "pill"] as const;
 
 export type StatusProps = {
   /**
-   * Determine the color and icon of the alert
+   * The text content of the Status
    */
-  severity: "default" | "error" | "info" | "success" | "warning";
-
+  label: string;
   /**
-   * The text content of the status
+   * Determine the color and icon of the Status
    */
-  label: string;
+  severity: (typeof statusSeverityValues)[number];
+  /**
+   * The style of the Status indicator
+   */
+  variant?: (typeof statusVariantValues)[number];
 };
 
-export const Status = ({ severity, label }: StatusProps) => (
-  <Chip label={label} color={severity} variant="status" />
-);
+export const Status = ({ severity, label, variant = "lamp" }: StatusProps) => {
+  const muiProps = useMuiProps();
+
+  return (
+    <Chip {...muiProps} label={label} color={severity} variant={variant} />
+  );
+};

package/src/{iconDictionary/types.ts → SvgIcon.ts}

@@ -1,5 +1,5 @@
 /*!
- * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * 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.
@@ -18,3 +18,6 @@ export interface SvgIconNoChildrenProps extends Omit<SvgIconProps, "children"> {
    */
   children?: never;
 }
+
+export { default as SvgIcon } from "@mui/material/SvgIcon";
+export * from "@mui/material/SvgIcon";

package/src/Tabs.tsx

@@ -10,7 +10,13 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { ReactElement, ReactNode, useCallback, useState } from "react";
+import React, {
+  ReactElement,
+  ReactNode,
+  memo,
+  useCallback,
+  useState,
+} from "react";
 import { Tab as MuiTab } from "@mui/material";
 import {
   TabList as MuiTabList,
@@ -19,20 +25,44 @@ import {
 } from "@mui/lab";
 
 export type TabItemProps = {
+  /**
+   * The content of the Tab itself
+   */
   children: ReactNode;
-  startIcon?: ReactElement;
-  label: string;
+  /**
+   * If `true`, the TabItem is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * The label text for the TabItem
+   */
+  label: string;
+  /**
+   * An optional icon to display at the start of the TabItem
+   */
+  startIcon?: ReactElement;
+  /**
+   * The value associated with the TabItem
+   */
   value?: string;
 };
 
 export type TabsProps = {
-  tabs: TabItemProps[];
-  initialValue?: string;
+  /**
+   * The ARIA label for the full Tabs group
+   */
   ariaLabel?: string;
+  /**
+   * The value of the Tab that should be selected by default
+   */
+  initialValue?: string;
+  /**
+   * The TabItems to be included in the Tabs group
+   */
+  tabs: TabItemProps[];
 };
 
-const Tabs = ({ ariaLabel, tabs, initialValue = "0" }: TabsProps) => {
+const Tabs = ({ ariaLabel, initialValue = "0", tabs }: TabsProps) => {
   const [tabState, setTabState] = useState(initialValue);
 
   const onChange = useCallback(
@@ -67,4 +97,7 @@ const Tabs = ({ ariaLabel, tabs, initialValue = "0" }: TabsProps) => {
   );
 };
 
-export { Tabs };
+const MemoizedTabs = memo(Tabs);
+MemoizedTabs.displayName = "Tabs";
+
+export { MemoizedTabs as Tabs };

package/src/Tag.tsx

@@ -10,32 +10,52 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Chip, ChipProps } from "@mui/material";
-import { memo, useContext } from "react";
+import { Chip as MuiChip, ChipProps as MuiChipProps } from "@mui/material";
+import { memo, ReactElement, useCallback, useContext } from "react";
 import { TagListContext } from "./TagListContext";
+import { MuiPropsContext } from "./MuiPropsContext";
 
 export type TagProps = {
+  icon?: ReactElement;
   isDisabled?: boolean;
+  /**
+   * The label text for the Tag
+   */
   label: string;
-  onClick?: ChipProps["onClick"];
-  onRemove?: ChipProps["onDelete"];
+  /**
+   * Callback fired when the Tag is clicked
+   */
+  onClick?: MuiChipProps["onClick"];
+  /**
+   * Callback fired when the remove button of the Tag is clicked
+   */
+  onRemove?: MuiChipProps["onDelete"];
 };
 
-const Tag = ({ isDisabled, label, onClick, onRemove }: TagProps) => {
+const Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {
   const { chipElementType } = useContext(TagListContext);
 
-  return (
-    <Chip
-      label={label}
-      clickable={onClick ? true : false}
-      component={chipElementType}
-      disabled={isDisabled}
-      onClick={onClick}
-      onDelete={onRemove}
-    />
+  const renderTag = useCallback(
+    (muiProps) => (
+      <MuiChip
+        {...muiProps}
+        aria-disabled={isDisabled}
+        clickable={onClick ? true : false}
+        component={chipElementType}
+        disabled={isDisabled}
+        icon={icon}
+        label={label}
+        onClick={onClick}
+        onDelete={onRemove}
+      />
+    ),
+    [chipElementType, icon, isDisabled, label, onClick, onRemove]
   );
+
+  return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;
 };
 
 const MemoizedTag = memo(Tag);
+MemoizedTag.displayName = "Tag";
 
 export { MemoizedTag as Tag };

package/src/TagList.tsx

@@ -10,12 +10,15 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Tag } from "./";
+import { Tag } from "./Tag";
 import { Stack } from "@mui/material";
 import { memo, ReactElement, useMemo } from "react";
 import { ChipElementType, TagListContext } from "./TagListContext";
 
 export type TagListProps = {
+  /**
+   * The Tag or array of Tags within the TagList
+   */
   children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;
 };
 
@@ -30,7 +33,13 @@ const TagList = ({ children }: TagListProps) => {
   );
 
   return (
-    <Stack component="ul" direction="row" spacing={2}>
+    <Stack
+      component="ul"
+      direction="row"
+      spacing={2}
+      useFlexGap
+      flexWrap="wrap"
+    >
       <TagListContext.Provider value={providerValue}>
         {children}
       </TagListContext.Provider>
@@ -39,5 +48,6 @@ const TagList = ({ children }: TagListProps) => {
 };
 
 const MemoizedTagList = memo(TagList);
+MemoizedTagList.displayName = "TagList";
 
 export { MemoizedTagList as TagList };

package/src/TextField.tsx

@@ -22,7 +22,14 @@ import {
 } from "react";
 
 import { Field } from "./Field";
-import { Icon } from "./Icon";
+
+export const textFieldTypeValues = [
+  "email",
+  "number",
+  "tel",
+  "text",
+  "url",
+] as const;
 
 export type TextFieldProps = {
   /**
@@ -34,7 +41,7 @@ export type TextFieldProps = {
   /**
    * End `InputAdornment` for this component.
    */
-  endAdornment?: string | ReactElement<typeof Icon>;
+  endAdornment?: string | ReactElement;
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */
@@ -90,11 +97,11 @@ export type TextFieldProps = {
   /**
    * Start `InputAdornment` for this component.
    */
-  startAdornment?: string | ReactElement<typeof Icon>;
+  startAdornment?: string | ReactElement;
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
    */
-  type?: "email" | "number" | "tel" | "text" | "url";
+  type?: (typeof textFieldTypeValues)[number];
   /**
    * The value of the `input` element, required for a controlled component.
    */

package/src/Toast.tsx

@@ -10,28 +10,31 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
 import { useEffect, memo, useState, useCallback } from "react";
-import {
-  Alert,
-  AlertTitle,
-  CloseIcon,
-  Link,
-  Snackbar,
-  visuallyHidden,
-} from ".";
+import { Alert, AlertTitle, Snackbar } from "@mui/material";
+import { visuallyHidden } from "@mui/utils";
+import { Link } from "./Link";
+import { CloseIcon } from "./icons.generated";
 import { Button } from "./Button";
 import { useTranslation } from "react-i18next";
 
+export const toastRoleValues = ["status", "alert"] as const;
+export const toastSeverityValues = [
+  "success",
+  "info",
+  "warning",
+  "error",
+] as const;
+
 export type ToastProps = {
   /**
-   * If set, this determines how long the toast should appear before automatically disappearing in milliseconds.
-   * It will only take effect if the toast is not dismissible.
+   * If set, this determines how long the Toast should appear before automatically disappearing in milliseconds.
+   * It will only take effect if the Toast is not dismissible.
    * If left blank, it defaults to 6000.
    */
   autoHideDuration?: number;
   /**
-   * If `true`, the alert will include a close button.
+   * If `true`, the Toast will include a close button.
    */
   isDismissable?: boolean;
   /**
@@ -45,7 +48,7 @@ export type ToastProps = {
    */
   linkText?: string;
   /**
-   * If defined, the alert will include a link to the URL
+   * If defined, the Toast will include a link to the URL
    */
   linkUrl?: string;
   /**
@@ -53,17 +56,17 @@ export type ToastProps = {
    */
   onHide?: () => void;
   /**
-   * Sets the ARIA role of the alert
+   * Sets the ARIA role of the Toast
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
-  role?: "status" | "alert";
+  role?: (typeof toastRoleValues)[number];
   /**
-   * Determine the color and icon of the alert
+   * Determine the color and icon of the Toast
    */
-  severity: AlertColor;
+  severity: (typeof toastSeverityValues)[number];
   /**
-   * The text content of the alert
+   * The text content of the Toast
    */
   text: string;
 };
@@ -108,7 +111,7 @@ const Toast = ({
         action={
           isDismissable === true && (
             <Button
-              aria-label={t("toast.close.text")}
+              ariaLabel={t("toast.close.text")}
               onClick={onHide}
               size="small"
               startIcon={<CloseIcon />}

package/src/ToastStack.tsx

@@ -11,17 +11,26 @@
  */
 
 import { memo, ReactElement } from "react";
-import { Box, Snackbar } from ".";
+import { Box, Snackbar } from "@mui/material";
 import { Toast } from "./Toast";
 
 export type ToastStackProps = {
+  /**
+   * The Toast or array of Toasts within the ToastStack
+   */
   children: ReactElement<typeof Toast> | Array<ReactElement<typeof Toast>>;
 };
 
 const ToastStack = ({ children }: ToastStackProps) => {
   return (
     <Snackbar open={true}>
-      <Box display="flex" flexDirection="column-reverse" gap={2}>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column-reverse",
+          gap: 2,
+        }}
+      >
         {children}
       </Box>
     </Snackbar>
@@ -29,5 +38,6 @@ const ToastStack = ({ children }: ToastStackProps) => {
 };
 
 const MemoizedToastStack = memo(ToastStack);
+MemoizedToastStack.displayName = "ToastStack";
 
 export { MemoizedToastStack as ToastStack };

package/src/Tooltip.tsx

@@ -17,17 +17,29 @@ import { MuiPropsChild } from "./MuiPropsChild";
 import { ReactElement } from "react";
 
 export type TooltipProps = {
-  children: ReactElement;
+  /**
+   * The type of ARIA attribute to use
+   */
   ariaType: "description" | "label";
-  text: string;
+  /**
+   * The content that triggers the Tooltip when hovered
+   */
+  children: ReactElement;
+  /**
+   * The placement of the Tooltip
+   */
   placement?: MuiTooltipProps["placement"];
+  /**
+   * The text to display in the Tooltip
+   */
+  text: string;
 };
 
 export const Tooltip = ({
   ariaType,
   children,
+  placement = "top",
   text,
-  placement,
 }: TooltipProps) => (
   <MuiTooltip
     describeChild={ariaType === "description"}