@okta/odyssey-react-mui 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "@mui/lab": "^5.0.0-alpha.117",
     "@mui/material": "^5.11.6",
     "@mui/utils": "^5.11.2",
-    "@okta/odyssey-design-tokens": "0.22.0"
+    "@okta/odyssey-design-tokens": "0.23.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "b1a4a93f7d570162a52e4c28012fb65e31d5bb4b"
+  "gitHead": "46e7484fa0317496e65b9ba8b3f930956b0470e9"
 }

package/src/Autocomplete.tsx

@@ -62,6 +62,12 @@ export type AutocompleteProps<
     undefined,
     IsCustomValueAllowed
   >["onChange"];
+  onInputChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onInputChange"];
   options: MuiAutocompleteProps<
     OptionType,
     HasMultipleChoices,
@@ -89,14 +95,16 @@ const Autocomplete = <
   hint,
   label,
   onChange,
+  onInputChange,
   options,
   value,
 }: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const renderInput = useCallback(
     ({ InputLabelProps, InputProps, ...params }) => (
       <Field
-        {...InputLabelProps}
+        fieldType="single"
         hasVisibleLabel
+        id={InputLabelProps.htmlFor}
         hint={hint}
         label={label}
         renderFieldComponent={({ ariaDescribedBy, id }) => (
@@ -119,6 +127,7 @@ const Autocomplete = <
       loading={isLoading}
       multiple={hasMultipleChoices}
       onChange={onChange}
+      onInputChange={onInputChange}
       options={options}
       readOnly={isReadOnly}
       renderInput={renderInput}

package/src/Banner.tsx

@@ -14,44 +14,44 @@ import { AlertColor, AlertProps } from "@mui/material";
 import { memo } from "react";
 import { Alert, Link, ScreenReaderText } from "./";
 
-export interface BannerProps {
+export type BannerProps = {
   /**
-   * Determine the color and icon of the alert
-   */
-  severity: AlertColor;
-  /**
-   * Sets the ARIA role of the alert
-   * ("status" for something that dynamically updates, "alert" for errors, null for something
-   * unchanging)
+   * 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
    */
-  role?: "status" | "alert";
+  linkText?: string;
   /**
-   * The text content of the alert
+   * If defined, the alert will include a link to the URL
    */
-  text: string;
+  linkUrl?: 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
+   * Sets the ARIA role of the alert
+   * ("status" for something that dynamically updates, "alert" for errors, null for something
+   * unchanging)
    */
-  linkUrl?: string;
+  role?: "status" | "alert";
   /**
-   * 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
+   * Determine the color and icon of the alert
    */
-  linkText?: string;
-}
+  severity: AlertColor;
+  /**
+   * The text content of the alert
+   */
+  text: string;
+};
 
 const Banner = ({
-  onClose,
-  severity,
-  role,
   linkUrl,
   linkText,
+  onClose,
+  role,
+  severity,
   text,
 }: BannerProps) => (
   <Alert onClose={onClose} role={role} severity={severity} variant="banner">

package/src/Button.tsx

@@ -12,17 +12,20 @@
 
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { Tooltip } from "./";
-import { memo } from "react";
+import { memo, ReactElement, useContext, useMemo } from "react";
+
+import { Icon } from "./Icon";
+import { MuiPropsContext } from "./MuiPropsContext";
+import { Tooltip } from "./Tooltip";
 
 export type ButtonProps = {
-  endIcon?: React.ReactNode;
+  endIcon?: ReactElement<typeof Icon>;
   id?: string;
   isDisabled?: boolean;
   isFullWidth?: boolean;
   onClick?: MuiButtonProps["onClick"];
   size?: MuiButtonProps["size"];
-  startIcon?: React.ReactNode;
+  startIcon?: ReactElement<typeof Icon>;
   text?: string;
   /**
    * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
@@ -43,25 +46,42 @@ const Button = ({
   tooltipText,
   variant,
 }: ButtonProps) => {
-  const button = (
-    <MuiButton
-      disabled={isDisabled}
-      endIcon={endIcon}
-      fullWidth={isFullWidth}
-      id={id}
-      onClick={onClick}
-      size={size}
-      startIcon={startIcon}
-      variant={variant}
-    >
-      {text}
-    </MuiButton>
+  const muiProps = useContext(MuiPropsContext);
+
+  const button = useMemo(
+    () => (
+      <MuiButton
+        {...muiProps}
+        disabled={isDisabled}
+        endIcon={endIcon}
+        fullWidth={isFullWidth}
+        id={id}
+        onClick={onClick}
+        size={size}
+        startIcon={startIcon}
+        variant={variant}
+      >
+        {text}
+      </MuiButton>
+    ),
+    [
+      endIcon,
+      id,
+      isDisabled,
+      isFullWidth,
+      muiProps,
+      onClick,
+      size,
+      startIcon,
+      text,
+      variant,
+    ]
   );
 
   return (
     <>
       {tooltipText && (
-        <Tooltip describeChild placement="top" title={tooltipText}>
+        <Tooltip ariaType="description" placement="top" text={tooltipText}>
           {button}
         </Tooltip>
       )}

package/src/CheckboxGroup.tsx

@@ -10,16 +10,11 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement, useMemo } from "react";
+import { FormGroup as MuiFormGroup } from "@mui/material";
+import { memo, ReactElement, useCallback } from "react";
 
-import {
-  Checkbox,
-  FormControl,
-  FormGroup,
-  FormHelperText,
-  FormLabel,
-  ScreenReaderText,
-} from ".";
+import { Checkbox } from "./Checkbox";
+import { Field } from "./Field";
 
 export type CheckboxGroupProps = {
   children:
@@ -27,9 +22,12 @@ export type CheckboxGroupProps = {
     | Array<ReactElement<typeof Checkbox>>;
   errorMessage?: string;
   hint?: string;
+  /**
+   * The id of the `input` element. This will also be the input's `name` field.
+   */
+  id?: string;
   isDisabled?: boolean;
-  label?: string;
-  name?: string;
+  label: string;
 };
 
 const CheckboxGroup = ({
@@ -37,34 +35,29 @@ const CheckboxGroup = ({
   isDisabled,
   errorMessage,
   hint,
+  id: idOverride,
   label,
-  name,
 }: CheckboxGroupProps) => {
-  const ariaDescribedBy = useMemo(
-    () =>
-      errorMessage || hint
-        ? [hint && `${name}-hint`, errorMessage && `${name}-error`]
-            .filter(Boolean)
-            .join(" ")
-        : undefined,
-    [errorMessage, hint, name]
+  const renderFieldComponent = useCallback(
+    ({ ariaDescribedBy, id }) => (
+      <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>
+        {children}
+      </MuiFormGroup>
+    ),
+    [children]
   );
 
   return (
-    <FormControl
-      component="fieldset"
-      disabled={isDisabled}
-      error={Boolean(errorMessage)}
-    >
-      {label && <FormLabel component="legend">{label}</FormLabel>}
-      {hint && <FormHelperText id={`${name}-hint`}>{hint}</FormHelperText>}
-      <FormGroup aria-describedby={ariaDescribedBy}>{children}</FormGroup>
-      {errorMessage && (
-        <FormHelperText id={`${name}-error`} error>
-          <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}
-        </FormHelperText>
-      )}
-    </FormControl>
+    <Field
+      errorMessage={errorMessage}
+      fieldType="group"
+      hasVisibleLabel={false}
+      hint={hint}
+      id={idOverride}
+      isDisabled={isDisabled}
+      label={label}
+      renderFieldComponent={renderFieldComponent}
+    />
   );
 };
 

package/src/Dialog.tsx

@@ -0,0 +1,110 @@
+/*!
+ * 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 { Dialog as MuiDialog } from "@mui/material";
+import {
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+} from "@mui/material";
+import { Button, CloseIcon } from "./";
+import {
+  memo,
+  ReactNode,
+  useState,
+  useEffect,
+  useRef,
+  ReactElement,
+} from "react";
+
+export type DialogProps = {
+  callToActionPrimaryComponent?: ReactElement<typeof Button>;
+  callToActionSecondaryComponent?: ReactElement<typeof Button>;
+  callToActionTertiaryComponent?: ReactElement<typeof Button>;
+  children: ReactNode | Array<ReactNode>;
+  onClose: () => void;
+  isOpen: boolean;
+  title: string;
+};
+
+const Dialog = ({
+  callToActionPrimaryComponent,
+  callToActionSecondaryComponent,
+  callToActionTertiaryComponent,
+  children,
+  isOpen,
+  onClose,
+  title,
+}: DialogProps) => {
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const dialogContentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let frameId: number;
+
+    const handleContentScroll = () => {
+      const dialogContentElement = dialogContentRef.current;
+      if (dialogContentElement) {
+        setIsContentScrollable(
+          dialogContentElement.scrollHeight > dialogContentElement.clientHeight
+        );
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+
+  const content =
+    typeof children === "string" ? (
+      <DialogContentText>{children}</DialogContentText>
+    ) : (
+      children
+    );
+
+  return (
+    <MuiDialog open={isOpen} onClose={onClose}>
+      <DialogTitle>
+        {title}
+        <Button
+          variant="floating"
+          onClick={onClose}
+          startIcon={<CloseIcon />}
+        />
+      </DialogTitle>
+      <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>
+        {content}
+      </DialogContent>
+
+      {(callToActionPrimaryComponent ||
+        callToActionSecondaryComponent ||
+        callToActionTertiaryComponent) && (
+        <DialogActions>
+          {callToActionTertiaryComponent}
+          {callToActionSecondaryComponent}
+          {callToActionPrimaryComponent}
+        </DialogActions>
+      )}
+    </MuiDialog>
+  );
+};
+
+const MemoizedDialog = memo(Dialog);
+
+export { MemoizedDialog as Dialog };

package/src/Field.tsx

@@ -13,18 +13,23 @@
 import { memo, ReactElement, useMemo } from "react";
 
 import {
-  FieldError,
-  FieldHint,
-  FieldLabel,
-  FormControl,
-  useUniqueId,
-} from "./";
+  FormControl as MuiFormControl,
+  FormLabel as MuiFormLabel,
+} from "@mui/material";
+import { FieldError } from "./FieldError";
+import { FieldHint } from "./FieldHint";
+import { FieldLabel } from "./FieldLabel";
+import { useUniqueId } from "./useUniqueId";
 
 export type FieldProps = {
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */
   errorMessage?: string;
+  /**
+   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).
+   */
+  fieldType: "single" | "group";
   hasVisibleLabel: boolean;
   /**
    * The helper text content.
@@ -34,14 +39,18 @@ export type FieldProps = {
    * The id of the `input` element.
    */
   id?: string;
+  /**
+   * Important for narrowing down the `fieldset` role to "radiogroup".
+   */
+  isRadioGroup?: boolean;
   /**
    * If `true`, the component is disabled.
    */
   isDisabled?: boolean;
   /**
-   * If `true`, the `input` element is required.
+   * If `true`, the `input` element is not required.
    */
-  isRequired?: boolean;
+  isOptional?: boolean;
   /**
    * The label for the `input` element.
    */
@@ -54,6 +63,9 @@ export type FieldProps = {
    * The short hint displayed in the `input` before the user enters a value.
    */
   placeholder?: string;
+  /**
+   * Render-props function that sends back ARIA props to your field component.
+   */
   renderFieldComponent: ({
     ariaDescribedBy,
     id,
@@ -65,11 +77,13 @@ export type FieldProps = {
 
 const Field = ({
   errorMessage,
+  fieldType,
   hasVisibleLabel,
   hint,
   id: idOverride,
   isDisabled = false,
-  isRequired = true,
+  isRadioGroup = false,
+  isOptional = false,
   label,
   optionalLabel,
   renderFieldComponent,
@@ -85,15 +99,24 @@ const Field = ({
   );
 
   return (
-    <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>
-      <FieldLabel
-        hasVisibleLabel={hasVisibleLabel}
-        id={labelId}
-        inputId={id}
-        isRequired={isRequired}
-        optionalText={optionalLabel}
-        text={label}
-      />
+    <MuiFormControl
+      component={fieldType === "group" ? "fieldset" : "div"}
+      disabled={isDisabled}
+      error={Boolean(errorMessage)}
+      role={isRadioGroup ? "radiogroup" : undefined}
+    >
+      {fieldType === "group" ? (
+        <MuiFormLabel component="legend">{label}</MuiFormLabel>
+      ) : (
+        <FieldLabel
+          hasVisibleLabel={hasVisibleLabel}
+          id={labelId}
+          inputId={id}
+          isOptional={isOptional}
+          optionalText={optionalLabel}
+          text={label}
+        />
+      )}
 
       {hint && <FieldHint id={hintId} text={hint} />}
 
@@ -103,7 +126,7 @@ const Field = ({
       })}
 
       {errorMessage && <FieldError id={errorId} text={errorMessage} />}
-    </FormControl>
+    </MuiFormControl>
   );
 };
 

package/src/FieldLabel.tsx

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { InputLabel } from "@mui/material";
+import { InputLabel as MuiInputLabel } from "@mui/material";
 import { memo, useMemo } from "react";
 
 import { ScreenReaderText } from "./ScreenReaderText";
@@ -20,7 +20,7 @@ export type FieldLabelProps = {
   hasVisibleLabel: boolean;
   id: string;
   inputId: string;
-  isRequired: boolean;
+  isOptional: boolean;
   optionalText?: string;
   text: string;
 };
@@ -29,20 +29,20 @@ const FieldLabel = ({
   hasVisibleLabel,
   id,
   inputId,
-  isRequired,
+  isOptional,
   optionalText,
   text,
 }: FieldLabelProps) => {
   const inputLabel = useMemo(
     () => (
-      <InputLabel htmlFor={inputId} id={id}>
+      <MuiInputLabel htmlFor={inputId} id={id}>
         {text}
-        {!isRequired && (
+        {isOptional && (
           <Typography variant="subtitle1">{optionalText}</Typography>
         )}
-      </InputLabel>
+      </MuiInputLabel>
     ),
-    [id, inputId, isRequired, optionalText, text]
+    [id, inputId, isOptional, optionalText, text]
   );
 
   return hasVisibleLabel ? (

package/src/Icon.test.tsx

@@ -18,7 +18,7 @@ const name = "check";
 
 describe("Icon", () => {
   it("renders an icon based on name prop", () => {
-    render(<Icon name={name} titleAccess={title} />);
+    render(<Icon name={name} label={title} size="medium" />);
 
     const svgElement = screen.getByRole("img");
     expect(svgElement).toBeVisible();

package/src/Icon.tsx

@@ -11,15 +11,26 @@
  */
 
 import { forwardRef } from "react";
-import type { SvgIconNoChildrenProps } from "./iconDictionary/types";
 import { iconDictionary } from "./iconDictionary";
 
-export interface IconProps extends SvgIconNoChildrenProps {
-  /**
-   * Name of the icon to render
+export type IconProps = {
+  /*
+   ** The element whose text describes the icon, if it exists
+   */
+  ariaLabelledby?: string;
+  /*
+   ** Text that describes the icon
+   */
+  label: string;
+  /*
+   ** Name of the icon to render
    */
   name: keyof typeof iconDictionary;
-}
+  /*
+   ** The size of the icon
+   */
+  size: "small" | "medium" | "large";
+};
 
 /**
  * A system of icons which establishes a visual language
@@ -28,12 +39,18 @@ export interface IconProps extends SvgIconNoChildrenProps {
  * icon component imports where possible to keep your bundle size smaller.
  */
 export const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ name, titleAccess, ...rest }, ref) => {
+  ({ ariaLabelledby, label, name, size }) => {
     if (!(name in iconDictionary)) return null;
 
     const NamedIcon = iconDictionary[name];
 
-    return <NamedIcon titleAccess={titleAccess} ref={ref} {...rest} />;
+    return (
+      <NamedIcon
+        aria-labelledby={ariaLabelledby}
+        fontSize={size}
+        titleAccess={label}
+      />
+    );
   }
 );
 

package/src/Infobox.tsx

@@ -14,28 +14,28 @@ import { AlertColor } from "@mui/material";
 import { memo, ReactNode } from "react";
 import { Alert, AlertTitle, ScreenReaderText } from ".";
 
-export interface InfoboxProps {
+export type InfoboxProps = {
   /**
    * The contents of the alert
    */
   children: ReactNode;
-  /**
-   * Determine the color and icon of the alert
-   */
-  severity: AlertColor;
   /**
    * Sets the ARIA role of the alert
    * ("status" for something that dynamically updates, "alert" for errors, null for something
    * unchanging)
    */
   role?: "status" | "alert";
+  /**
+   * Determine the color and icon of the alert
+   */
+  severity: AlertColor;
   /**
    * The title of the alert
    */
   title?: string;
-}
+};
 
-const Infobox = ({ children, severity, role, title }: InfoboxProps) => (
+const Infobox = ({ children, role, severity, title }: InfoboxProps) => (
   <Alert role={role} severity={severity} variant="infobox">
     <ScreenReaderText>{severity}: </ScreenReaderText>
     {title && <AlertTitle>{title}</AlertTitle>}