@okta/odyssey-react-mui 0.23.0 → 1.0.0

package/src/Tabs.tsx

@@ -0,0 +1,103 @@
+/*!
+ * 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 React, {
+  ReactElement,
+  ReactNode,
+  memo,
+  useCallback,
+  useState,
+} from "react";
+import { Tab as MuiTab } from "@mui/material";
+import {
+  TabList as MuiTabList,
+  TabPanel as MuiTabPanel,
+  TabContext as MuiTabContext,
+} from "@mui/lab";
+
+export type TabItemProps = {
+  /**
+   * The content of the Tab itself
+   */
+  children: ReactNode;
+  /**
+   * 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 = {
+  /**
+   * 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, initialValue = "0", tabs }: TabsProps) => {
+  const [tabState, setTabState] = useState(initialValue);
+
+  const onChange = useCallback(
+    (_event: React.SyntheticEvent, newState: string) => {
+      setTabState(newState);
+    },
+    []
+  );
+
+  return (
+    <MuiTabContext value={tabState}>
+      <MuiTabList onChange={onChange} aria-label={ariaLabel}>
+        {tabs.map((tab, index) => (
+          <MuiTab
+            disabled={tab.isDisabled}
+            icon={tab.startIcon}
+            label={tab.label}
+            value={tab.value ? tab.value : index.toString()}
+            key={tab.value ? tab.value : index.toString()}
+          />
+        ))}
+      </MuiTabList>
+      {tabs.map((tab, index) => (
+        <MuiTabPanel
+          value={tab.value ? tab.value : index.toString()}
+          key={tab.value ? tab.value : index.toString()}
+        >
+          {tab.children}
+        </MuiTabPanel>
+      ))}
+    </MuiTabContext>
+  );
+};
+
+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.
    */
@@ -83,10 +90,6 @@ export type TextFieldProps = {
    * Callback fired when the `input` element get focus.
    */
   onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
-  /**
-   * The label for the `input` element if it's optional
-   */
-  optionalLabel?: string;
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
@@ -94,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.
    */
@@ -122,7 +125,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       onBlur,
       onChange,
       onFocus,
-      optionalLabel = "Optional",
       placeholder,
       startAdornment,
       type = "text",
@@ -187,7 +189,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         isDisabled={isDisabled}
         isOptional={isOptional}
         label={label}
-        optionalLabel={optionalLabel}
         renderFieldComponent={renderFieldComponent}
       />
     );
@@ -195,5 +196,6 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
 );
 
 const MemoizedTextField = memo(TextField);
+MemoizedTextField.displayName = "TextField";
 
 export { MemoizedTextField as TextField };

package/src/Toast.tsx

@@ -10,27 +10,31 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { AlertColor } from "@mui/material";
-import { useEffect, memo, forwardRef, useState, useCallback } from "react";
-import {
-  Alert,
-  AlertTitle,
-  CloseIcon,
-  Link,
-  Snackbar,
-  visuallyHidden,
-} from ".";
+import { useEffect, memo, useState, useCallback } from "react";
+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;
   /**
@@ -44,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;
   /**
@@ -52,87 +56,88 @@ 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;
 };
 
 const ClickAwayListenerProps = { onClickAway: () => false };
 
-const Toast = forwardRef(
-  ({
-    autoHideDuration = 6000,
-    isDismissable,
-    linkText,
-    linkUrl,
-    isVisible: isVisibleProp,
-    onHide: onHideProp,
-    role,
-    severity,
-    text,
-  }: ToastProps) => {
-    const [isVisible, setIsVisible] = useState(isVisibleProp);
+const Toast = ({
+  autoHideDuration = 6000,
+  isDismissable,
+  linkText,
+  linkUrl,
+  isVisible: isVisibleProp,
+  onHide: onHideProp,
+  role,
+  severity,
+  text,
+}: ToastProps) => {
+  const { t } = useTranslation();
+
+  const [isVisible, setIsVisible] = useState(isVisibleProp);
 
-    useEffect(() => {
-      setIsVisible(isVisibleProp);
-    }, [isVisibleProp]);
+  useEffect(() => {
+    setIsVisible(isVisibleProp);
+  }, [isVisibleProp]);
 
-    const onHide = useCallback(() => {
-      setIsVisible(false);
-      onHideProp?.();
-    }, [onHideProp]);
+  const onHide = useCallback(() => {
+    setIsVisible(false);
+    onHideProp?.();
+  }, [onHideProp]);
 
-    return (
-      <Snackbar
-        open={isVisible}
-        autoHideDuration={
-          isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
+  return (
+    <Snackbar
+      open={isVisible}
+      autoHideDuration={
+        isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration
+      }
+      onClose={onHide}
+      className="Toast"
+      ClickAwayListenerProps={ClickAwayListenerProps}
+    >
+      <Alert
+        action={
+          isDismissable === true && (
+            <Button
+              ariaLabel={t("toast.close.text")}
+              onClick={onHide}
+              size="small"
+              startIcon={<CloseIcon />}
+              variant="floating"
+            />
+          )
         }
-        onClose={onHide}
-        className="Toast"
-        ClickAwayListenerProps={ClickAwayListenerProps}
+        role={role}
+        severity={severity}
+        variant="toast"
       >
-        <Alert
-          action={
-            isDismissable === true && (
-              <Button
-                aria-label="close"
-                onClick={onHide}
-                size="small"
-                startIcon={<CloseIcon />}
-                variant="floating"
-              />
-            )
-          }
-          role={role}
-          severity={severity}
-          variant="toast"
-        >
-          <AlertTitle>
-            <span style={visuallyHidden}>{severity}:</span>
-            {text}
-          </AlertTitle>
-          {linkUrl && (
-            <Link href={linkUrl} variant="monochrome">
-              {linkText}
-            </Link>
-          )}
-        </Alert>
-      </Snackbar>
-    );
-  }
-);
+        <AlertTitle>
+          <span style={visuallyHidden}>{severity}:</span>
+          {text}
+        </AlertTitle>
+        {linkUrl && (
+          <Link href={linkUrl} variant="monochrome">
+            {linkText}
+          </Link>
+        )}
+      </Alert>
+    </Snackbar>
+  );
+};
 
 const MemoizedToast = memo(Toast);
+MemoizedToast.displayName = "Toast";
 
 export { MemoizedToast as Toast };

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"}