@okta/odyssey-react-mui 0.24.0 → 1.0.1

package/src/Checkbox.tsx

@@ -10,43 +10,79 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { Checkbox as MuiCheckbox, Typography } from "@mui/material";
-import { ChangeEventHandler, memo, useMemo } from "react";
+import {
+  Checkbox as MuiCheckbox,
+  CheckboxProps as MuiCheckboxProps,
+  FormControlLabel,
+} from "@mui/material";
+import { Typography } from "./Typography";
+import { memo, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
-import { FormControlLabel } from ".";
+export const checkboxValidityValues = ["valid", "invalid", "inherit"] as const;
 
 export type CheckboxProps = {
+  /**
+   * The ARIA label for the Checkbox
+   */
   ariaLabel?: string;
+  /**
+   * The ID of the element that labels the Checkbox
+   */
   ariaLabelledBy?: string;
-  isInvalid?: boolean;
-  isValid?: boolean;
-  isChecked?: boolean;
+  /**
+   * Determines whether the Checkbox is checked
+   */
   isDefaultChecked?: boolean;
+  /**
+   * Determines whether the Checkbox is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * Determines whether the Checkbox is in an indeterminate state
+   */
   isIndeterminate?: boolean;
+  /**
+   * Determines whether the Checkbox is required
+   */
   isRequired?: boolean;
+  /**
+   * The label text for the Checkbox
+   */
   label?: string;
+  /**
+   * The name attribute of the Checkbox
+   */
   name?: string;
-  onChange?: ChangeEventHandler<EventTarget>;
+  /**
+   * The change event handler for the Checkbox
+   */
+  onChange?: MuiCheckboxProps["onChange"];
+  /**
+   * The checkbox validity, if different from its enclosing group. Defaults to "inherit".
+   */
+  validity?: (typeof checkboxValidityValues)[number];
+  /**
+   * The value attribute of the Checkbox
+   */
   value?: string;
 };
 
 const Checkbox = ({
   ariaLabel,
   ariaLabelledBy,
-  isInvalid,
-  isValid,
-  isChecked,
+  isDefaultChecked = false,
   isDisabled,
   isIndeterminate,
   isRequired,
   label: labelProp,
   name,
-  onChange,
+  onChange: onChangeProp,
+  validity = "inherit",
   value,
 }: CheckboxProps) => {
   const { t } = useTranslation();
+  const [isCheckedValue, setIsCheckedValue] = useState(isDefaultChecked);
 
   const label = useMemo(() => {
     if (isRequired) {
@@ -63,13 +99,26 @@ const Checkbox = ({
     }
   }, [isRequired, labelProp, t]);
 
+  const onChange = useCallback(
+    (event, checked) => {
+      setIsCheckedValue(event.target.checked);
+      onChangeProp?.(event, checked);
+    },
+    [onChangeProp]
+  );
+
   return (
     <FormControlLabel
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledBy}
-      aria-required={isRequired}
-      checked={isChecked}
-      className={isInvalid ? "Mui-error" : isValid ? "Mui-valid" : ""}
+      checked={isCheckedValue}
+      className={
+        validity === "invalid"
+          ? "Mui-error"
+          : validity === "valid"
+          ? "Mui-valid"
+          : ""
+      }
       control={
         <MuiCheckbox indeterminate={isIndeterminate} required={isRequired} />
       }
@@ -84,5 +133,6 @@ const Checkbox = ({
 };
 
 const MemoizedCheckbox = memo(Checkbox);
+MemoizedCheckbox.displayName = "Checkbox";
 
 export { MemoizedCheckbox as Checkbox };

package/src/CheckboxGroup.tsx

@@ -17,26 +17,44 @@ import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
 
 export type CheckboxGroupProps = {
+  /**
+   * A single Checkbox element or an array of Checkbox elements
+   */
   children:
     | ReactElement<typeof Checkbox>
     | Array<ReactElement<typeof Checkbox>>;
+  /**
+   * The error message for the CheckboxGroup
+   */
   errorMessage?: string;
+  /**
+   * The hint text for the CheckboxGroup
+   */
   hint?: string;
   /**
    * The id of the `input` element. This will also be the input's `name` field.
    */
   id?: string;
+  /**
+   * If `true`, the CheckboxGroup is disabled
+   */
   isDisabled?: boolean;
+  /**
+   * If `true`, the CheckboxGroup is required
+   */
   isRequired?: boolean;
+  /**
+   * The label text for the CheckboxGroup
+   */
   label: string;
 };
 
 const CheckboxGroup = ({
   children,
-  isDisabled,
   errorMessage,
   hint,
   id: idOverride,
+  isDisabled,
   isRequired = false,
   label,
 }: CheckboxGroupProps) => {
@@ -65,5 +83,6 @@ const CheckboxGroup = ({
 };
 
 const MemoizedCheckboxGroup = memo(CheckboxGroup);
+MemoizedCheckboxGroup.displayName = "CheckboxGroup";
 
 export { MemoizedCheckboxGroup as CheckboxGroup };

package/src/CircularProgress.tsx

@@ -13,12 +13,24 @@
 import { CircularProgress as MuiCircularProgress } from "@mui/material";
 
 export type CircularProgressProps = {
+  /**
+   * The ARIA label for the progress spinner
+   */
+  ariaLabel?: string;
+  /**
+   * The percentage filled the spinner should be, as an integer.
+   * If undefined, the spinner will spin perpetually.
+   */
   value?: number;
 };
 
-export const CircularProgress = ({ value }: CircularProgressProps) => (
+export const CircularProgress = ({
+  ariaLabel,
+  value,
+}: CircularProgressProps) => (
   <MuiCircularProgress
     value={value}
     variant={value ? "determinate" : "indeterminate"}
+    aria-label={ariaLabel}
   />
 );

package/src/Dialog.tsx

@@ -17,7 +17,8 @@ import {
   DialogContentText,
   DialogActions,
 } from "@mui/material";
-import { Button, CloseIcon } from "./";
+import { Button } from "./Button";
+import { CloseIcon } from "./icons.generated";
 import {
   memo,
   ReactNode,
@@ -28,23 +29,46 @@ import {
 } from "react";
 
 export type DialogProps = {
-  callToActionPrimaryComponent?: ReactElement<typeof Button>;
-  callToActionSecondaryComponent?: ReactElement<typeof Button>;
-  callToActionTertiaryComponent?: ReactElement<typeof Button>;
-  children: ReactNode | Array<ReactNode>;
-  onClose: () => void;
+  /**
+   * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.
+   */
+  callToActionFirstComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.
+   */
+  callToActionSecondComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.
+   */
+  callToActionLastComponent?: ReactElement<typeof Button>;
+  /**
+   * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
+   */
+  children: ReactNode;
+  /**
+   * When set to `true`, the Dialog will be visible.
+   */
   isOpen: boolean;
+  /**
+   * Callback that controls what happens when the Dialog is dismissed
+   */
+  onClose: () => void;
+  /**
+   * The title of the Dialog
+   */
   title: string;
+  ariaLabel: string;
 };
 
 const Dialog = ({
-  callToActionPrimaryComponent,
-  callToActionSecondaryComponent,
-  callToActionTertiaryComponent,
+  callToActionFirstComponent,
+  callToActionSecondComponent,
+  callToActionLastComponent,
   children,
   isOpen,
   onClose,
   title,
+  ariaLabel,
 }: DialogProps) => {
   const [isContentScrollable, setIsContentScrollable] = useState(false);
   const dialogContentRef = useRef<HTMLDivElement>(null);
@@ -83,22 +107,25 @@ const Dialog = ({
       <DialogTitle>
         {title}
         <Button
-          variant="floating"
+          ariaLabel={ariaLabel}
+          label=""
           onClick={onClose}
+          size="small"
           startIcon={<CloseIcon />}
+          variant="floating"
         />
       </DialogTitle>
       <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>
         {content}
       </DialogContent>
 
-      {(callToActionPrimaryComponent ||
-        callToActionSecondaryComponent ||
-        callToActionTertiaryComponent) && (
+      {(callToActionFirstComponent ||
+        callToActionSecondComponent ||
+        callToActionLastComponent) && (
         <DialogActions>
-          {callToActionTertiaryComponent}
-          {callToActionSecondaryComponent}
-          {callToActionPrimaryComponent}
+          {callToActionLastComponent}
+          {callToActionSecondComponent}
+          {callToActionFirstComponent}
         </DialogActions>
       )}
     </MuiDialog>
@@ -106,5 +133,6 @@ const Dialog = ({
 };
 
 const MemoizedDialog = memo(Dialog);
+MemoizedDialog.displayName = "Dialog";
 
 export { MemoizedDialog as Dialog };

package/src/Field.tsx

@@ -15,13 +15,16 @@ import { memo, ReactElement, useMemo } from "react";
 import {
   FormControl as MuiFormControl,
   FormLabel as MuiFormLabel,
-  Typography,
 } from "@mui/material";
 import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
 import { FieldLabel } from "./FieldLabel";
-import { useUniqueId } from "./useUniqueId";
+import { Typography } from "./Typography";
+import { useFieldset } from "./FieldsetContext";
 import { useTranslation } from "react-i18next";
+import { useUniqueId } from "./useUniqueId";
+
+export const fieldTypeValues = ["single", "group"] as const;
 
 export type FieldProps = {
   /**
@@ -31,7 +34,10 @@ export type FieldProps = {
   /**
    * 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";
+  fieldType: (typeof fieldTypeValues)[number];
+  /**
+   * If `true`, the Field label will be shown
+   */
   hasVisibleLabel: boolean;
   /**
    * The helper text content.
@@ -83,7 +89,7 @@ const Field = ({
   hasVisibleLabel,
   hint,
   id: idOverride,
-  isDisabled = false,
+  isDisabled: isDisabledProp = false,
   isRadioGroup = false,
   isOptional = false,
   label,
@@ -101,6 +107,13 @@ const Field = ({
     [errorId, hintId]
   );
 
+  const { isDisabled: isFieldsetDisabled } = useFieldset();
+
+  const isDisabled = useMemo(
+    () => isDisabledProp || isFieldsetDisabled,
+    [isDisabledProp, isFieldsetDisabled]
+  );
+
   return (
     <MuiFormControl
       component={fieldType === "group" ? "fieldset" : "div"}
@@ -140,5 +153,6 @@ const Field = ({
 };
 
 const MemoizedField = memo(Field);
+MemoizedField.displayName = "Field";
 
 export { MemoizedField as Field };

package/src/FieldError.tsx

@@ -12,7 +12,7 @@
 
 import { memo } from "react";
 
-import { FormHelperText } from ".";
+import { FormHelperText } from "@mui/material";
 import { ScreenReaderText } from "./ScreenReaderText";
 import { useTranslation } from "react-i18next";
 
@@ -35,5 +35,6 @@ const FieldError = ({ id, text }: FieldErrorProps) => {
 };
 
 const MemoizedFieldError = memo(FieldError);
+MemoizedFieldError.displayName = "FieldError";
 
 export { MemoizedFieldError as FieldError };

package/src/FieldHint.tsx

@@ -12,7 +12,7 @@
 
 import { memo } from "react";
 
-import { FormHelperText } from "./";
+import { FormHelperText } from "@mui/material";
 
 export type FieldHintProps = {
   id?: string;
@@ -24,5 +24,6 @@ const FieldHint = ({ id, text }: FieldHintProps) => {
 };
 
 const MemoizedFieldHint = memo(FieldHint);
+MemoizedFieldHint.displayName = "FieldHint";
 
 export { MemoizedFieldHint as FieldHint };

package/src/FieldLabel.tsx

@@ -15,7 +15,7 @@ import { memo, useMemo } from "react";
 
 import { useTranslation } from "react-i18next";
 import { ScreenReaderText } from "./ScreenReaderText";
-import { Typography } from ".";
+import { Subordinate } from "./Typography";
 
 export type FieldLabelProps = {
   hasVisibleLabel: boolean;
@@ -37,11 +37,9 @@ const FieldLabel = ({
   const inputLabel = useMemo(
     () => (
       <MuiInputLabel htmlFor={inputId} id={id}>
-        {text}
+        <span>{text}</span>
         {isOptional && (
-          <Typography variant="subtitle1">
-            {t("fieldlabel.optional.text")}
-          </Typography>
+          <Subordinate>{t("fieldlabel.optional.text")}</Subordinate>
         )}
       </MuiInputLabel>
     ),
@@ -56,5 +54,6 @@ const FieldLabel = ({
 };
 
 const MemoizedFieldLabel = memo(FieldLabel);
+MemoizedFieldLabel.displayName = "FieldLabel";
 
 export { MemoizedFieldLabel as FieldLabel };

package/src/Fieldset.tsx

@@ -10,81 +10,92 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, ReactElement } from "react";
+import { Box } from "@mui/material";
+import { memo, ReactElement, useMemo } from "react";
 
-import { Box, Typography } from ".";
-import { Infobox } from "./Infobox";
+import { Callout } from "./Callout";
+import { FieldsetContext } from "./FieldsetContext";
+import { Legend, Support } from "./Typography";
+import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext";
 import { useUniqueId } from "./useUniqueId";
 
 export type FieldsetProps = {
   /**
-   * The title of the Fieldset
+   * A Callout indicating a Fieldset-wide error or status update.
    */
-  legend: string;
+  alert?: ReactElement<typeof Callout>;
+  /**
+   * The Field components within the Fieldset
+   */
+  children: ReactElement | Array<ReactElement>;
   /**
    * A supplementary description
    */
   description?: string;
   /**
-   * The Field components within the Fieldset
+   * Defines a unique identifier (ID) which must be unique in the whole document.
    */
-  children: ReactElement | Array<ReactElement>;
+  id?: string;
   /**
-   * An Infobox indicating a Fieldset-wide error or status update.
+   * Disables the component and any wrapped input fields.
    */
-  alert?: ReactElement<typeof Infobox>;
+  isDisabled?: boolean;
   /**
-   * The name associated with the group.
+   * The title of the Fieldset
    */
-  name?: string;
-  // /**
-  //  * If this Boolean attribute is set, all form controls that are descendants of the <fieldset>, are disabled, meaning they are not editable and won't be submitted along with the <form>.
-  //  * They won't receive any browsing events, like mouse clicks or focus-related events.
-  //  * Note that form elements inside the <legend> element won't be disabled.
-  //  */
-  // NOTE: Functionality is currently disabled. This will correctly disable child <input>s, but will not pass `isDisabled` to the child components.
-  // isDisabled?: boolean;
+  legend: string;
   /**
-   * Defines a unique identifier (ID) which must be unique in the whole document.
+   * The name associated with the group.
    */
-  id?: string;
+  name?: string;
 };
 
 const Fieldset = ({
   alert,
   children,
   description,
+  id: idOverride,
+  isDisabled = false,
   legend,
   name,
-  id: idOverride,
-}: // isDisabled,
-FieldsetProps) => {
+}: FieldsetProps) => {
+  const odysseyDesignTokens = useOdysseyDesignTokens();
   const id = useUniqueId(idOverride);
 
+  const fieldsetContextValue = useMemo(
+    () => ({
+      isDisabled,
+    }),
+    [isDisabled]
+  );
+
   return (
     <Box
       component="fieldset"
-      // disabled={isDisabled}
+      disabled={isDisabled}
       name={name}
       id={id}
       sx={{
-        maxWidth: (theme) => theme.mixins.maxWidth,
-        margin: (theme) => theme.spacing(0),
-        marginBlockEnd: (theme) => theme.spacing(4),
-        padding: (theme) => theme.spacing(0),
         border: "0",
+        margin: odysseyDesignTokens.Spacing0,
+        marginBlockEnd: odysseyDesignTokens.Spacing6,
+        maxWidth: odysseyDesignTokens.TypographyLineLengthMax,
+        padding: odysseyDesignTokens.Spacing0,
 
         "&:last-child": {
-          marginBlockEnd: (theme) => theme.spacing(0),
+          marginBlockEnd: odysseyDesignTokens.Spacing0,
         },
       }}
     >
-      <Typography variant="legend" component="legend">
-        {legend}
-      </Typography>
-      {description && <Typography paragraph>{description}</Typography>}
+      <Legend>{legend}</Legend>
+
+      {description && <Support>{description}</Support>}
+
       {alert}
-      {children}
+
+      <FieldsetContext.Provider value={fieldsetContextValue}>
+        {children}
+      </FieldsetContext.Provider>
     </Box>
   );
 };

package/src/FieldsetContext.tsx

@@ -0,0 +1,23 @@
+/*!
+ * 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 { createContext, useContext } from "react";
+
+export type FieldsetContextValue = {
+  isDisabled: boolean;
+};
+
+export const FieldsetContext = createContext<FieldsetContextValue>({
+  isDisabled: false,
+});
+
+export const useFieldset = () => useContext(FieldsetContext);