@okta/odyssey-react-mui 0.21.4 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "0.21.4",
+  "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.21.4"
+    "@okta/odyssey-design-tokens": "0.23.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11",
@@ -33,5 +33,5 @@
     "react": ">=17 <19",
     "react-dom": ">=17 <19"
   },
-  "gitHead": "facb0d98d72297e662093673a0e0ee8d7e226be2"
+  "gitHead": "46e7484fa0317496e65b9ba8b3f930956b0470e9"
 }

package/src/Autocomplete.tsx

@@ -0,0 +1,141 @@
+/*!
+ * 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 {
+  Autocomplete as MuiAutocomplete,
+  AutocompleteProps as MuiAutocompleteProps,
+  InputBase,
+} from "@mui/material";
+import { memo, useCallback } from "react";
+
+import { Field } from "./Field";
+
+export type AutocompleteProps<
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+> = {
+  hasMultipleChoices?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["multiple"];
+  hint?: string;
+  isCustomValueAllowed?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["freeSolo"];
+  isDisabled?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["disabled"];
+  isLoading?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["loading"];
+  isReadOnly?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["readOnly"];
+  label: string;
+  onChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onChange"];
+  onInputChange?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["onInputChange"];
+  options: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["options"];
+  value?: MuiAutocompleteProps<
+    OptionType,
+    HasMultipleChoices,
+    undefined,
+    IsCustomValueAllowed
+  >["value"];
+};
+
+const Autocomplete = <
+  OptionType,
+  HasMultipleChoices extends boolean | undefined,
+  IsCustomValueAllowed extends boolean | undefined
+>({
+  isCustomValueAllowed,
+  hasMultipleChoices,
+  isDisabled,
+  isLoading,
+  isReadOnly,
+  hint,
+  label,
+  onChange,
+  onInputChange,
+  options,
+  value,
+}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
+  const renderInput = useCallback(
+    ({ InputLabelProps, InputProps, ...params }) => (
+      <Field
+        fieldType="single"
+        hasVisibleLabel
+        id={InputLabelProps.htmlFor}
+        hint={hint}
+        label={label}
+        renderFieldComponent={({ ariaDescribedBy, id }) => (
+          <InputBase
+            {...params}
+            {...InputProps}
+            aria-describedby={ariaDescribedBy}
+            id={id}
+          />
+        )}
+      />
+    ),
+    [hint, label]
+  );
+
+  return (
+    <MuiAutocomplete
+      disabled={isDisabled}
+      freeSolo={isCustomValueAllowed}
+      loading={isLoading}
+      multiple={hasMultipleChoices}
+      onChange={onChange}
+      onInputChange={onInputChange}
+      options={options}
+      readOnly={isReadOnly}
+      renderInput={renderInput}
+      value={value}
+    />
+  );
+};
+
+const MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;
+
+export { MemoizedAutocomplete as Autocomplete };

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

@@ -0,0 +1,95 @@
+/*!
+ * 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 { Button as MuiButton } from "@mui/material";
+import type { ButtonProps as MuiButtonProps } from "@mui/material";
+import { memo, ReactElement, useContext, useMemo } from "react";
+
+import { Icon } from "./Icon";
+import { MuiPropsContext } from "./MuiPropsContext";
+import { Tooltip } from "./Tooltip";
+
+export type ButtonProps = {
+  endIcon?: ReactElement<typeof Icon>;
+  id?: string;
+  isDisabled?: boolean;
+  isFullWidth?: boolean;
+  onClick?: MuiButtonProps["onClick"];
+  size?: MuiButtonProps["size"];
+  startIcon?: ReactElement<typeof Icon>;
+  text?: string;
+  /**
+   * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.
+   */
+  tooltipText?: string;
+  variant?: "primary" | "secondary" | "danger" | "floating";
+};
+
+const Button = ({
+  endIcon,
+  id,
+  isDisabled,
+  isFullWidth,
+  onClick,
+  size = "medium",
+  startIcon,
+  text,
+  tooltipText,
+  variant,
+}: ButtonProps) => {
+  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 ariaType="description" placement="top" text={tooltipText}>
+          {button}
+        </Tooltip>
+      )}
+      {!tooltipText && button}
+    </>
+  );
+};
+
+const MemoizedButton = memo(Button);
+
+export { MemoizedButton as Button };

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

@@ -0,0 +1,135 @@
+/*!
+ * 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 { memo, ReactElement, useMemo } from "react";
+
+import {
+  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.
+   */
+  hint?: string;
+  /**
+   * 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 not required.
+   */
+  isOptional?: boolean;
+  /**
+   * The label for the `input` element.
+   */
+  label: string;
+  /**
+   * The label for the `input` element if the it's not optional
+   */
+  optionalLabel?: string;
+  /**
+   * 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,
+  }: {
+    ariaDescribedBy?: string;
+    id: string;
+  }) => ReactElement;
+};
+
+const Field = ({
+  errorMessage,
+  fieldType,
+  hasVisibleLabel,
+  hint,
+  id: idOverride,
+  isDisabled = false,
+  isRadioGroup = false,
+  isOptional = false,
+  label,
+  optionalLabel,
+  renderFieldComponent,
+}: FieldProps) => {
+  const id = useUniqueId(idOverride);
+  const hintId = hint ? `${id}-hint` : undefined;
+  const errorId = errorMessage ? `${id}-error` : undefined;
+  const labelId = `${id}-label`;
+
+  const ariaDescribedBy = useMemo(
+    () => [hintId, errorId].join(" ").trim() || undefined,
+    [errorId, hintId]
+  );
+
+  return (
+    <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} />}
+
+      {renderFieldComponent({
+        ariaDescribedBy,
+        id,
+      })}
+
+      {errorMessage && <FieldError id={errorId} text={errorMessage} />}
+    </MuiFormControl>
+  );
+};
+
+const MemoizedField = memo(Field);
+
+export { MemoizedField as Field };

package/src/FieldError.tsx

@@ -0,0 +1,34 @@
+/*!
+ * 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 { memo } from "react";
+
+import { FormHelperText } from ".";
+import { ScreenReaderText } from "./ScreenReaderText";
+
+export type FieldErrorProps = {
+  id?: string;
+  text: string;
+};
+
+const FieldError = ({ id, text }: FieldErrorProps) => {
+  return (
+    <FormHelperText error id={id}>
+      <ScreenReaderText>Error:</ScreenReaderText>
+      {text}
+    </FormHelperText>
+  );
+};
+
+const MemoizedFieldError = memo(FieldError);
+
+export { MemoizedFieldError as FieldError };