@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/src/Button.tsx

@@ -13,8 +13,6 @@
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
 import {
-  ComponentProps,
-  HTMLAttributes,
   memo,
   ReactElement,
   useCallback,
@@ -23,11 +21,15 @@ import {
   useRef,
 } from "react";
 
-import { MuiPropsContext, useMuiProps } from "./MuiPropsContext";
-import { Tooltip } from "./Tooltip";
+import { useButton } from "./ButtonContext";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
-import { useButton } from "./ButtonContext";
+import {
+  MuiPropsContext,
+  MuiPropsContextType,
+  useMuiProps,
+} from "./MuiPropsContext";
+import { Tooltip } from "./Tooltip";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
 export const buttonTypeValues = ["button", "submit", "reset"] as const;
@@ -39,32 +41,6 @@ export const buttonVariantValues = [
 ] as const;
 
 export type ButtonProps = {
-  /**
-   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
-   *
-   * value: A space-separated list of one or more ID values referencing the elements being controlled by the current element
-   */
-  ariaControls?: ComponentProps<"button">["aria-controls"];
-  /**
-   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.
-   */
-  ariaExpanded?: ComponentProps<"button">["aria-expanded"];
-  /**
-   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
-   */
-  ariaHasPopup?: ComponentProps<"button">["aria-haspopup"];
-  /**
-   * 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 ref forwarded to the Button
    */
@@ -101,7 +77,6 @@ export type ButtonProps = {
    * The icon element to display at the start of the Button
    */
   startIcon?: ReactElement;
-  tabIndex?: HTMLAttributes<HTMLElement>["tabIndex"];
   /**
    * The tooltip text for the Button if it's icon-only
    */
@@ -131,7 +106,18 @@ export type ButtonProps = {
       startIcon?: ReactElement;
     }
 ) &
-  HtmlProps;
+  Pick<
+    HtmlProps,
+    | "ariaControls"
+    | "ariaDescribedBy"
+    | "ariaExpanded"
+    | "ariaHasPopup"
+    | "ariaLabel"
+    | "ariaLabelledBy"
+    | "tabIndex"
+    | "testId"
+    | "translate"
+  >;
 
 const Button = ({
   ariaControls,
@@ -166,7 +152,7 @@ const Button = ({
   const isFullWidth = useMemo(
     () =>
       buttonContext.isFullWidth ? buttonContext.isFullWidth : isFullWidthProp,
-    [buttonContext, isFullWidthProp]
+    [buttonContext, isFullWidthProp],
   );
 
   useImperativeHandle(
@@ -178,11 +164,12 @@ const Button = ({
         },
       };
     },
-    []
+    [],
   );
 
   const renderButton = useCallback(
-    (muiProps) => {
+    (muiProps: MuiPropsContextType) => {
+      //@ts-expect-error ref is not an optional prop on the props context type
       muiProps?.ref?.(localButtonRef.current);
 
       return (
@@ -197,7 +184,7 @@ const Button = ({
           data-se={testId}
           disabled={isDisabled}
           endIcon={endIcon}
-          fullWidth={isFullWidth}
+          fullWidth={buttonContext.isFullWidth ?? isFullWidth}
           id={id}
           onClick={onClick}
           ref={localButtonRef}
@@ -223,6 +210,7 @@ const Button = ({
       id,
       isDisabled,
       isFullWidth,
+      buttonContext.isFullWidth,
       label,
       onClick,
       size,
@@ -232,7 +220,7 @@ const Button = ({
       translate,
       type,
       variant,
-    ]
+    ],
   );
 
   if (tooltipText) {

package/src/Callout.tsx

@@ -78,7 +78,7 @@ export type CalloutProps = {
         linkText?: never;
       }
   ) &
-  HtmlProps;
+  Pick<HtmlProps, "testId" | "translate">;
 
 const Callout = ({
   children,

package/src/Checkbox.tsx

@@ -20,7 +20,6 @@ import {
   FormHelperText,
 } from "@mui/material";
 
-import { FieldComponentProps } from "./FieldComponentProps";
 import { CheckedFieldProps } from "./FormCheckedProps";
 import type { HtmlProps } from "./HtmlProps";
 import {
@@ -28,31 +27,16 @@ import {
   FocusHandle,
   getControlState,
 } from "./inputUtils";
+import { FieldComponentProps } from "./FieldComponentProps";
 import { Typography } from "./Typography";
 
 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;
-  /**
-   * The id of the `input` element.
-   */
-  id?: string;
   /**
    * The ref forwarded to the Checkbox
    */
   inputRef?: React.RefObject<FocusHandle>;
-  /**
-   * Determines whether the Checkbox is disabled
-   */
-  isDisabled?: boolean;
   /**
    * Determines whether the Checkbox is in an indeterminate state
    */
@@ -65,10 +49,6 @@ export type CheckboxProps = {
    * The label text for the Checkbox
    */
   label?: string;
-  /**
-   * The helper text content
-   */
-  hint?: string;
   /**
    * The checkbox validity, if different from its enclosing group. Defaults to "inherit".
    */
@@ -81,9 +61,9 @@ export type CheckboxProps = {
    * Callback fired when the blur event happens. Provides event value.
    */
   onBlur?: MuiFormControlLabelProps["onBlur"];
-} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> &
+} & Pick<FieldComponentProps, "hint" | "id" | "isDisabled" | "name"> &
   CheckedFieldProps<MuiCheckboxProps> &
-  HtmlProps;
+  Pick<HtmlProps, "ariaLabel" | "ariaLabelledBy" | "testId" | "translate">;
 
 const Checkbox = ({
   ariaLabel,
@@ -110,7 +90,7 @@ const Checkbox = ({
     getControlState({
       controlledValue: isChecked,
       uncontrolledValue: isDefaultChecked,
-    })
+    }),
   );
   const inputValues = useMemo(() => {
     if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {
@@ -129,7 +109,7 @@ const Checkbox = ({
         },
       };
     },
-    []
+    [],
   );
 
   const label = useMemo(() => {
@@ -153,14 +133,14 @@ const Checkbox = ({
     (event, checked) => {
       onChangeProp?.(event, checked);
     },
-    [onChangeProp]
+    [onChangeProp],
   );
 
   const onBlur = useCallback<NonNullable<MuiFormControlLabelProps["onBlur"]>>(
     (event) => {
       onBlurProp?.(event);
     },
-    [onBlurProp]
+    [onBlurProp],
   );
 
   return (
@@ -172,8 +152,8 @@ const Checkbox = ({
         validity === "invalid"
           ? "Mui-error"
           : validity === "valid"
-          ? "Mui-valid"
-          : ""
+            ? "Mui-valid"
+            : ""
       }
       control={
         <MuiCheckbox

package/src/CheckboxGroup.tsx

@@ -15,7 +15,10 @@ import { memo, ReactElement, useCallback } from "react";
 
 import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
-import { FieldComponentProps } from "./FieldComponentProps";
+import {
+  FieldComponentProps,
+  FieldComponentRenderProps,
+} from "./FieldComponentProps";
 import type { HtmlProps } from "./HtmlProps";
 
 export type CheckboxGroupProps = {
@@ -35,7 +38,6 @@ export type CheckboxGroupProps = {
   label: string;
 } & Pick<
   FieldComponentProps,
-  | "ariaDescribedBy"
   | "errorMessage"
   | "errorMessageList"
   | "hint"
@@ -43,7 +45,15 @@ export type CheckboxGroupProps = {
   | "id"
   | "isDisabled"
 > &
-  HtmlProps;
+  Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
+
+type CheckboxGroupRenderProps = Pick<
+  FieldComponentRenderProps,
+  "id" | "labelElementId"
+> &
+  Partial<
+    Pick<FieldComponentRenderProps, "ariaDescribedBy" | "errorMessageElementId">
+  >;
 
 const CheckboxGroup = ({
   ariaDescribedBy,
@@ -60,7 +70,12 @@ const CheckboxGroup = ({
   translate,
 }: CheckboxGroupProps) => {
   const renderFieldComponent = useCallback(
-    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (
+    ({
+      ariaDescribedBy,
+      errorMessageElementId,
+      id,
+      labelElementId,
+    }: CheckboxGroupRenderProps) => (
       <MuiFormGroup
         aria-describedby={ariaDescribedBy}
         aria-errormessage={errorMessageElementId}
@@ -72,7 +87,7 @@ const CheckboxGroup = ({
         {children}
       </MuiFormGroup>
     ),
-    [children, testId, translate]
+    [children, testId, translate],
   );
 
   return (

package/src/CircularProgress.tsx

@@ -16,16 +16,12 @@ import { CircularProgress as MuiCircularProgress } from "@mui/material";
 import type { HtmlProps } from "./HtmlProps";
 
 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;
-} & HtmlProps;
+} & Pick<HtmlProps, "ariaLabel" | "testId">;
 
 const CircularProgress = ({
   ariaLabel,

package/src/Dialog.tsx

@@ -39,15 +39,15 @@ export type DialogProps = {
   /**
    * An optional Button object to be situated in the Dialog footer. Should almost always be of variant `primary`.
    */
-  callToActionFirstComponent?: ReactElement<typeof Button>;
+  primaryCallToActionComponent?: ReactElement<typeof Button>;
   /**
    * An optional Button object to be situated in the Dialog footer, alongside the `callToActionPrimaryComponent`.
    */
-  callToActionSecondComponent?: ReactElement<typeof Button>;
+  secondaryCallToActionComponent?: ReactElement<typeof Button>;
   /**
    * An optional Button object to be situated in the Dialog footer, alongside the other two `callToAction` components.
    */
-  callToActionLastComponent?: ReactElement<typeof Button>;
+  tertiaryCallToActionComponent?: ReactElement<typeof Button>;
   /**
    * The content of the Dialog. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
    */
@@ -64,12 +64,12 @@ export type DialogProps = {
    * The title of the Dialog
    */
   title: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const Dialog = ({
-  callToActionFirstComponent,
-  callToActionSecondComponent,
-  callToActionLastComponent,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  tertiaryCallToActionComponent,
   children,
   isOpen,
   onClose,
@@ -87,8 +87,9 @@ const Dialog = ({
     const handleContentScroll = () => {
       const dialogContentElement = dialogContentRef.current;
       if (dialogContentElement) {
+        cancelAnimationFrame(frameId);
         setIsContentScrollable(
-          dialogContentElement.scrollHeight > dialogContentElement.clientHeight
+          dialogContentElement.scrollHeight > dialogContentElement.clientHeight,
         );
       }
       frameId = requestAnimationFrame(handleContentScroll);
@@ -116,7 +117,6 @@ const Dialog = ({
         {title}
         <Button
           ariaLabel={t("close.text")}
-          label=""
           onClick={onClose}
           size="small"
           startIcon={<CloseIcon />}
@@ -124,22 +124,23 @@ const Dialog = ({
         />
       </DialogTitle>
       <DialogContent
-        dividers={isContentScrollable}
-        ref={dialogContentRef}
         {...(isContentScrollable && {
+          //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard
           tabIndex: 0,
         })}
+        dividers={isContentScrollable}
+        ref={dialogContentRef}
       >
         {content}
       </DialogContent>
 
-      {(callToActionFirstComponent ||
-        callToActionSecondComponent ||
-        callToActionLastComponent) && (
+      {(primaryCallToActionComponent ||
+        secondaryCallToActionComponent ||
+        tertiaryCallToActionComponent) && (
         <DialogActions>
-          {callToActionLastComponent}
-          {callToActionSecondComponent}
-          {callToActionFirstComponent}
+          {tertiaryCallToActionComponent}
+          {secondaryCallToActionComponent}
+          {primaryCallToActionComponent}
         </DialogActions>
       )}
     </MuiDialog>

package/src/ErrorMessageList.tsx

@@ -31,7 +31,7 @@ const ErrorMessageList = ({ errorMessages }: ErrorMessageListProps) => {
       listStyle: "disc",
       paddingInlineStart: odysseyDesignTokens.Spacing4,
     }),
-    [odysseyDesignTokens]
+    [odysseyDesignTokens],
   );
 
   return (

package/src/Field.tsx

@@ -21,6 +21,7 @@ import { FieldComponentProps } from "./FieldComponentProps";
 import { FieldError } from "./FieldError";
 import { FieldHint } from "./FieldHint";
 import { FieldLabel } from "./FieldLabel";
+import { HtmlProps } from "./HtmlProps";
 import { Typography } from "./Typography";
 import { useFieldset } from "./FieldsetContext";
 import { useTranslation } from "react-i18next";
@@ -29,10 +30,6 @@ import { useUniqueId } from "./useUniqueId";
 export const fieldTypeValues = ["single", "group"] as const;
 
 export type FieldProps = {
-  /**
-   * If `error` is not undefined, the `input` will indicate an error.
-   */
-  errorMessage?: string;
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */
@@ -97,7 +94,6 @@ const Field = ({
 }: FieldProps &
   Pick<
     FieldComponentProps,
-    | "ariaDescribedBy"
     | "errorMessage"
     | "errorMessageList"
     | "hint"
@@ -106,7 +102,8 @@ const Field = ({
     | "isDisabled"
     | "isFullWidth"
     | "isOptional"
-  >) => {
+  > &
+  Pick<HtmlProps, "ariaDescribedBy">) => {
   const { t } = useTranslation();
 
   const id = useUniqueId(idOverride);
@@ -119,14 +116,14 @@ const Field = ({
     () =>
       [hintId, errorMessageElementId, ariaDescribedBy].join(" ").trim() ||
       undefined,
-    [ariaDescribedBy, errorMessageElementId, hintId]
+    [ariaDescribedBy, errorMessageElementId, hintId],
   );
 
   const { isDisabled: isFieldsetDisabled } = useFieldset();
 
   const isDisabled = useMemo(
     () => isDisabledProp || isFieldsetDisabled,
-    [isDisabledProp, isFieldsetDisabled]
+    [isDisabledProp, isFieldsetDisabled],
   );
 
   return (
@@ -141,7 +138,7 @@ const Field = ({
       fullWidth={isFullWidth}
     >
       {fieldType === "group" ? (
-        <MuiFormLabel component="legend">
+        <MuiFormLabel component="legend" id={labelElementId}>
           {label}{" "}
           {isOptional && label && (
             <Typography component="span" color="textSecondary">

package/src/FieldComponentProps.ts

@@ -15,10 +15,6 @@ import { ReactElement } from "react";
 import { HintLink } from "./HintLink";
 
 export type FieldComponentProps = {
-  /**
-   * The ID of the element that describes the Field
-   */
-  ariaDescribedBy?: string;
   /**
    * If `error` is not undefined, the `input` will indicate an error.
    */
@@ -60,3 +56,11 @@ export type FieldComponentProps = {
    */
   name?: string;
 };
+
+export type FieldComponentRenderProps = {
+  ariaDescribedBy: string;
+  dataSe: string;
+  errorMessageElementId: string;
+  id: string;
+  labelElementId: string;
+};

package/src/FieldError.tsx

@@ -24,7 +24,7 @@ export type FieldErrorProps = {
   id?: string;
   message?: string;
   messageList?: string[];
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const FieldError = ({
   id,
@@ -38,7 +38,7 @@ const FieldError = ({
   return (
     <FormHelperText data-se={testId} error id={id} translate={translate}>
       <ScreenReaderText translate={translate}>{`${t(
-        "fielderror.screenreader.text"
+        "fielderror.screenreader.text",
       )}:`}</ScreenReaderText>
       <Box>
         {message}

package/src/FieldHint.tsx

@@ -21,7 +21,7 @@ export type FieldHintProps = {
   LinkComponent?: FieldComponentProps["HintLinkComponent"];
   id?: string;
   text: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const FieldHint = ({
   id,

package/src/FieldLabel.tsx

@@ -24,7 +24,7 @@ export type FieldLabelProps = {
   inputId: string;
   isOptional: boolean;
   text: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const FieldLabel = ({
   hasVisibleLabel,
@@ -51,7 +51,7 @@ const FieldLabel = ({
         )}
       </MuiInputLabel>
     ),
-    [id, inputId, isOptional, testId, translate, text, t]
+    [id, inputId, isOptional, testId, translate, text, t],
   );
 
   return hasVisibleLabel ? (

package/src/Fieldset.tsx

@@ -49,7 +49,7 @@ export type FieldsetProps = {
    * The name associated with the group.
    */
   name?: string;
-} & HtmlProps;
+} & Pick<HtmlProps, "testId" | "translate">;
 
 const Fieldset = ({
   alert,
@@ -69,7 +69,7 @@ const Fieldset = ({
     () => ({
       isDisabled,
     }),
-    [isDisabled]
+    [isDisabled],
   );
 
   return (

package/src/Form.tsx

@@ -91,7 +91,7 @@ export type FormProps = {
    */
   title?: string;
 } & Pick<FieldComponentProps, "isFullWidth"> &
-  HtmlProps;
+  Pick<HtmlProps, "testId" | "translate">;
 
 const Form = ({
   alert,

package/src/FormCheckedProps.ts

@@ -15,7 +15,7 @@ import { SwitchBaseProps } from "@mui/material/internal/SwitchBase";
 type SwitchOnChangeProp = Pick<SwitchBaseProps, "onChange">;
 
 export type ControlledCheckedFieldProps<
-  TogglableInputElement extends SwitchOnChangeProp
+  TogglableInputElement extends SwitchOnChangeProp,
 > = {
   /**
    * Sets the checked state of the Checkbox
@@ -34,7 +34,7 @@ export type ControlledCheckedFieldProps<
 };
 
 export type UncontrolledCheckedFieldProps<
-  TogglableInputElement extends SwitchOnChangeProp
+  TogglableInputElement extends SwitchOnChangeProp,
 > = {
   /**
    * Sets the checked state of the Checkbox
@@ -53,7 +53,7 @@ export type UncontrolledCheckedFieldProps<
 };
 
 export type CheckedFieldProps<
-  TogglableInputElement extends SwitchOnChangeProp
+  TogglableInputElement extends SwitchOnChangeProp,
 > =
   | ControlledCheckedFieldProps<TogglableInputElement>
   | UncontrolledCheckedFieldProps<TogglableInputElement>;

package/src/HintLink.tsx

@@ -18,7 +18,7 @@ const HintLink = (
   props: Pick<
     LinkProps,
     "children" | "href" | "onClick" | "rel" | "target" | "testId"
-  >
+  >,
 ) => <Link {...props} variant="default" />;
 
 const MemoizedHintLink = memo(HintLink);