@okta/odyssey-react-mui 1.14.7 → 1.15.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@okta/odyssey-react-mui",
-  "version": "1.14.7",
+  "version": "1.15.8",
   "description": "React MUI components for Odyssey, Okta's design system",
   "author": "Okta, Inc.",
   "license": "Apache-2.0",
@@ -43,25 +43,27 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.11.3",
+    "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
     "@mui/lab": "^5.0.0-alpha.165",
-    "@mui/material": "^5.15.10",
+    "@mui/material": "^5.15.12",
     "@mui/system": "^5.15.9",
     "@mui/utils": "^5.15.9",
     "@mui/x-date-pickers": "^5.0.15",
-    "@okta/odyssey-design-tokens": "^1.14.7",
+    "@okta/odyssey-design-tokens": "^1.15.8",
     "date-fns": "^2.30.0",
     "i18next": "^23.8.2",
     "material-react-table": "^2.11.3",
     "react-i18next": "^14.0.5",
+    "react-virtualized-auto-sizer": "^1.0.22",
+    "react-window": "^1.8.10",
     "tsx": "^4.7.1",
     "word-wrap": "^1.2.5"
   },
   "peerDependencies": {
-    "react": ">=17 <19",
-    "react-dom": ">=17 <19"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "gitHead": "f4d64bf568d491147afa57aaba6e218c1d496bab"
+  "gitHead": "7ce4fb11fd0b464ca6f1476e9cfaa0d320bc7d2e"
 }

package/src/Autocomplete.tsx

@@ -18,7 +18,29 @@ import {
   AutocompleteValue,
   AutocompleteRenderInputParams,
 } from "@mui/material";
-import { memo, useCallback, useMemo, useRef } from "react";
+import {
+  createContext,
+  FC,
+  forwardRef,
+  HTMLAttributes,
+  memo,
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import styled from "@emotion/styled";
+import { VariableSizeList, ListChildComponentProps } from "react-window";
+import _AutoSizer, {
+  Props as AutoSizerProps,
+  Size as AutoSizerSize,
+} from "react-virtualized-auto-sizer";
+
+// This is required to get around a react-types issue for "AutoSizer is not a valid JSX element."
+// @see https://github.com/bvaughn/react-virtualized/issues/1739#issuecomment-1291444246
+const AutoSizer = _AutoSizer as unknown as FC<AutoSizerProps>;
 
 import { Field } from "./Field";
 import { FieldComponentProps } from "./FieldComponentProps";
@@ -160,6 +182,13 @@ export type AutocompleteProps<
    * You will need to implement this function if your `option` items are objects.
    */
   getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;
+
+  /**
+   * If this component is required to display a virtualized list of options,
+   * then this value needs to be set to true.
+   * It is recommended if you're options are on the order of 10's of hundreds or more.
+   */
+  isVirtualized?: boolean;
 } & Pick<
   FieldComponentProps,
   | "errorMessage"
@@ -173,6 +202,11 @@ export type AutocompleteProps<
 > &
   Pick<HtmlProps, "ariaDescribedBy" | "testId" | "translate">;
 
+const ListboxContainer = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
 const Autocomplete = <
   OptionType,
   HasMultipleChoices extends boolean | undefined,
@@ -191,6 +225,7 @@ const Autocomplete = <
   isLoading,
   isOptional = false,
   isReadOnly,
+  isVirtualized: isVirtualizedProp = false,
   hint,
   HintLinkComponent,
   label,
@@ -211,6 +246,8 @@ const Autocomplete = <
       uncontrolledValue: defaultValue,
     }),
   );
+
+  const isVirtualized = useRef(Boolean(isVirtualizedProp));
   const defaultValueProp = useMemo<
     | AutocompleteValue<
         OptionType,
@@ -261,6 +298,7 @@ const Autocomplete = <
         hasVisibleLabel
         //@ts-expect-error htmlFor does not exist ont he InputLabelProps for autocomplete
         id={InputLabelProps.htmlFor}
+        isFullWidth={isFullWidth}
         hint={hint}
         HintLinkComponent={HintLinkComponent}
         label={label}
@@ -294,12 +332,95 @@ const Autocomplete = <
       errorMessageList,
       hint,
       HintLinkComponent,
+      isFullWidth,
       isOptional,
       label,
       nameOverride,
       testId,
     ],
   );
+
+  const renderVirtualizedRow = ({
+    data,
+    index,
+    style,
+  }: ListChildComponentProps) => {
+    const baseOption = data[index];
+    /**
+     * react-window calculates the absolute positions of the list items, via an inline style, so
+     * we need to add it to each list item that is being rendered in the viewable list window.
+     * See here if you need to know more: https://github.com/bvaughn/react-window?tab=readme-ov-file#why-is-my-list-blank-when-i-scroll
+     */
+    const optionItem = { ...baseOption, props: { ...baseOption.props, style } };
+    return optionItem;
+  };
+
+  const OuterListboxContext = createContext({});
+
+  const OuterListboxElementType = forwardRef<HTMLDivElement>((props, ref) => {
+    const outerProps = useContext(OuterListboxContext);
+    return <div ref={ref} {...props} {...outerProps} />;
+  });
+
+  function useResetCache(length: number) {
+    const ref = useRef<VariableSizeList>(null);
+    useEffect(() => {
+      if (ref.current) {
+        ref.current.resetAfterIndex(0, true);
+      }
+    }, [length]);
+    return ref;
+  }
+
+  const ListboxComponent = forwardRef<
+    HTMLDivElement,
+    HTMLAttributes<HTMLElement>
+  >(function (props, ref) {
+    const { children, ...other } = props;
+    const itemData: ReactElement[] = (children as ReactElement[]).flatMap(
+      (item: ReactElement & { children?: ReactElement[] }) =>
+        [item].concat(item.children || []),
+    );
+
+    // the height of an Odyssey autocomplete option item that is used to calculate height of window
+    const optionHeight = 45; //px
+
+    // The number of items (rows or columns) to render outside of the visible area for performance and scrolling reasons
+    const overscanRowCount = 8;
+
+    const itemSize = useCallback(() => optionHeight, []);
+
+    const gridRef = useResetCache(itemData.length);
+
+    const renderWindow = useCallback(
+      ({ height, width }: AutoSizerSize) => (
+        <VariableSizeList
+          innerElementType="ul"
+          itemData={itemData}
+          itemCount={itemData.length}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          itemSize={itemSize}
+          height={height}
+          width={width}
+          ref={gridRef}
+          outerElementType={OuterListboxElementType}
+          overscanCount={overscanRowCount}
+        >
+          {renderVirtualizedRow}
+        </VariableSizeList>
+      ),
+      [itemData, gridRef, itemSize],
+    );
+
+    return (
+      <ListboxContainer ref={ref}>
+        <OuterListboxContext.Provider value={other}>
+          <AutoSizer>{renderWindow}</AutoSizer>
+        </OuterListboxContext.Provider>
+      </ListboxContainer>
+    );
+  });
+
   const onChange = useCallback<
     NonNullable<
       UseAutocompleteProps<
@@ -336,6 +457,8 @@ const Autocomplete = <
     <MuiAutocomplete
       {...valueProps}
       {...inputValueProp}
+      // conditionally provide the ListboxComponent if this needs to be virtualized
+      {...(isVirtualized.current && { ListboxComponent })}
       // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div
       aria-disabled={isDisabled}
       disableCloseOnSelect={hasMultipleChoices}

package/src/Breadcrumbs.tsx

@@ -30,6 +30,7 @@ import { GroupIcon, HomeIcon, UserIcon } from "./icons.generated";
 import { Subordinate } from "./Typography";
 import { useTranslation } from "react-i18next";
 import { HtmlProps } from "./HtmlProps";
+import styled from "@emotion/styled";
 
 export type BreadcrumbType = "listItem" | "menuItem" | "currentPage";
 
@@ -53,6 +54,13 @@ export const BreadcrumbContext = createContext<BreadcrumbContextType>({
   breadcrumbType: "listItem",
 });
 
+const BreadcrumbContent = styled.span`
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 10rem;
+  text-overflow: ellipsis;
+`;
+
 export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
   const { breadcrumbType } = useContext(BreadcrumbContext);
 
@@ -63,7 +71,7 @@ export const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {
       ) : iconName === "user" ? (
         <UserIcon />
       ) : null}
-      {children}
+      <BreadcrumbContent>{children}</BreadcrumbContent>
     </>
   );
 
@@ -101,7 +109,7 @@ const defaultTruncationValue = 5;
 const BreadcrumbList = ({
   children,
   homeHref,
-  maxVisibleItems = defaultTruncationValue,
+  maxVisibleItems: maxVisibleItemsProp = defaultTruncationValue,
   testId,
   translate,
 }: BreadcrumbsProps) => {
@@ -109,6 +117,11 @@ const BreadcrumbList = ({
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
+  const maxVisibleItems = useMemo(
+    () => Math.min(Math.max(maxVisibleItemsProp, 0), children.length),
+    [maxVisibleItemsProp, children],
+  );
+
   const breadcrumbSections = useMemo(() => {
     if (children.length <= maxVisibleItems) {
       return {
@@ -155,7 +168,7 @@ const BreadcrumbList = ({
         </BreadcrumbContext.Provider>
       ))}
 
-      {breadcrumbSections.insideMenu && (
+      {breadcrumbSections.insideMenu.length > 0 && (
         <>
           <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>
           <Menu

package/src/Button.tsx

@@ -13,6 +13,7 @@
 import { Button as MuiButton } from "@mui/material";
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
 import {
+  HTMLAttributes,
   memo,
   ReactElement,
   useCallback,
@@ -45,10 +46,6 @@ export type ButtonProps = {
    * The ref forwarded to the Button
    */
   buttonRef?: React.RefObject<FocusHandle>;
-  /**
-   * The icon element to display at the end of the Button
-   */
-  endIcon?: ReactElement;
   /**
    * The ID of the Button
    */
@@ -61,10 +58,6 @@ export type ButtonProps = {
    * Determines whether the Button should take up the full available width
    */
   isFullWidth?: boolean;
-  /**
-   * The text content of the Button
-   */
-  label?: string;
   /**
    * The click event handler for the Button
    */
@@ -73,10 +66,7 @@ export type ButtonProps = {
    * The size of the button
    */
   size?: (typeof buttonSizeValues)[number];
-  /**
-   * 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
    */
@@ -91,18 +81,45 @@ export type ButtonProps = {
   variant: (typeof buttonVariantValues)[number] | "tertiary";
 } & (
   | {
+      /**
+       * The icon element to display at the end of the Button
+       */
       endIcon?: ReactElement;
+      /**
+       * The text content of the Button
+       */
       label: string;
+      /**
+       * The icon element to display at the start of the Button
+       */
       startIcon?: ReactElement;
     }
   | {
+      /**
+       * The icon element to display at the end of the Button
+       */
       endIcon?: ReactElement;
-      label?: "" | undefined;
+      /**
+       * The text content of the Button
+       */
+      label?: string | "" | undefined;
+      /**
+       * The icon element to display at the start of the Button
+       */
       startIcon: ReactElement;
     }
   | {
+      /**
+       * The icon element to display at the end of the Button
+       */
       endIcon: ReactElement;
-      label?: "" | undefined;
+      /**
+       * The text content of the Button
+       */
+      label?: never;
+      /**
+       * The icon element to display at the start of the Button
+       */
       startIcon?: ReactElement;
     }
 ) &
@@ -184,7 +201,7 @@ const Button = ({
           data-se={testId}
           disabled={isDisabled}
           endIcon={endIcon}
-          fullWidth={buttonContext.isFullWidth ?? isFullWidth}
+          fullWidth={isFullWidth}
           id={id}
           onClick={onClick}
           ref={localButtonRef}
@@ -210,7 +227,6 @@ const Button = ({
       id,
       isDisabled,
       isFullWidth,
-      buttonContext.isFullWidth,
       label,
       onClick,
       size,

package/src/Callout.tsx

@@ -34,7 +34,7 @@ export const calloutSeverityValues = [
 
 export type CalloutProps = {
   /**
-   * @deprecated Callout content shuold be set via title, text, linkText, and linkUrl
+   * Used to optionally pass a text list to the component
    */
   children?: ReactNode;
   /**

package/src/Checkbox.tsx

@@ -115,7 +115,7 @@ const Checkbox = ({
   const label = useMemo(() => {
     return (
       <>
-        {labelProp}
+        <Typography component="span">{labelProp}</Typography>
         {isRequired && (
           <>
             {" "}
@@ -164,10 +164,11 @@ const Checkbox = ({
           inputProps={{
             "data-se": testId,
           }}
+          disabled={isDisabled}
           inputRef={localInputRef}
-          sx={() => ({
+          sx={{
             marginBlockStart: "2px",
-          })}
+          }}
         />
       }
       disabled={isDisabled}

package/src/CheckboxGroup.tsx

@@ -11,9 +11,8 @@
  */
 
 import { FormGroup as MuiFormGroup } from "@mui/material";
-import { memo, ReactElement, useCallback } from "react";
+import { memo, ReactNode, useCallback } from "react";
 
-import { Checkbox } from "./Checkbox";
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -25,9 +24,7 @@ export type CheckboxGroupProps = {
   /**
    * A single Checkbox element or an array of Checkbox elements
    */
-  children:
-    | ReactElement<typeof Checkbox>
-    | Array<ReactElement<typeof Checkbox>>;
+  children: ReactNode;
   /**
    * If `true`, the CheckboxGroup is required
    */

package/src/DataTable/DataTable.tsx

@@ -49,7 +49,11 @@ import { useRowReordering } from "./useRowReordering";
 import { DataTableSettings } from "./DataTableSettings";
 import { MenuButton, MenuButtonProps } from "../MenuButton";
 import { Box } from "../Box";
-import { DataTableRowSelectionState } from ".";
+import {
+  DataTableColumn,
+  DataTableRowData,
+  DataTableRowSelectionState,
+} from ".";
 import {
   DesignTokens,
   useOdysseyDesignTokens,
@@ -201,6 +205,10 @@ export type DataTableProps = {
    * The component to display when the query returns no results
    */
   noResultsPlaceholder?: ReactNode;
+  /**
+   * An optional set of filters to render in the filters menu
+   */
+  filters?: Array<DataFilter | DataTableColumn<DataTableRowData> | string>;
 };
 
 const displayColumnDefOptions = {
@@ -344,6 +352,7 @@ const DataTable = ({
   errorMessage: errorMessageProp,
   emptyPlaceholder,
   noResultsPlaceholder,
+  filters: filtersProp,
 }: DataTableProps) => {
   const [data, setData] = useState<MRT_RowData[]>([]);
   const [pagination, setPagination] = useState({
@@ -445,21 +454,74 @@ const DataTable = ({
     ],
   );
 
-  const dataTableFilters = useMemo(
-    () =>
-      columns
-        .filter((column) => column.enableColumnFilter !== false)
-        .map((column) => {
-          return {
-            id: column.accessorKey as string,
+  /**
+   * This hack is to provide compatibility with Material-React-Table's
+   * filterOptions format, which allows for strings and { label: string, value: string }
+   */
+  const convertFilterSelectOptions = useCallback(
+    (options: DataTableColumn<DataTableRowData>["filterSelectOptions"]) =>
+      options?.map((option) =>
+        typeof option === "string"
+          ? {
+              label: option,
+              value: option,
+            }
+          : {
+              // If the option isn't a string, it must have value and/or option defined
+              // If either is undefined, use the other
+              label: option.label ?? option.value,
+              value: option.value ?? option.label,
+            },
+      ),
+    [],
+  );
+
+  const convertColumnToFilter = useCallback(
+    (column: DataTableColumn<DataTableRowData>) =>
+      column.enableColumnFilter !== false && column.accessorKey
+        ? ({
+            id: column.accessorKey,
             label: column.header,
-            variant: column.filterVariant ?? "text",
-            options: column.filterSelectOptions,
-          } as DataFilter;
-        }),
-    [columns],
+            variant: column.filterVariant,
+            options: convertFilterSelectOptions(column.filterSelectOptions),
+          } satisfies DataFilter as DataFilter)
+        : null,
+    [convertFilterSelectOptions],
   );
 
+  /**
+   * Filters default to the columns, but can be overridden
+   * with the `filters` prop. `filters` should be an array
+   * of column accessorKeys, column defs, or DataFilters.
+   */
+  const dataTableFilters = useMemo(() => {
+    const providedFilters = filtersProp || columns;
+    return providedFilters.reduce<DataFilter[]>((accumulator, item) => {
+      if (typeof item === "string") {
+        const foundColumn = columns.find(
+          (column) => column.accessorKey === item,
+        );
+        if (foundColumn) {
+          const filter = convertColumnToFilter(foundColumn);
+          if (filter) {
+            return accumulator.concat(filter);
+          }
+        }
+      } else if ("accessorKey" in item) {
+        // Checks if it's a column
+        const filter = convertColumnToFilter(item);
+        if (filter) {
+          return accumulator.concat(filter);
+        }
+      } else if ("label" in item) {
+        // Checks if it's a DataFilter
+        return accumulator.concat(item);
+      }
+      // If none of the conditions match, item is ignored (not mapping to undefined)
+      return accumulator;
+    }, []);
+  }, [columns, filtersProp, convertColumnToFilter]);
+
   const defaultCell = useCallback(
     ({ cell }: { cell: MRT_Cell<MRT_RowData> }) => {
       const value = cell.getValue<string>();

package/src/DataTable/DataTableEmptyState.tsx

@@ -59,4 +59,6 @@ const DataTableEmptyState = ({
 };
 
 const MemoizedDataTableEmptyState = memo(DataTableEmptyState);
+MemoizedDataTableEmptyState.displayName = "DataTableEmptyState";
+
 export { MemoizedDataTableEmptyState as DataTableEmptyState };

package/src/DataTable/DataTablePagination.tsx

@@ -286,4 +286,6 @@ const DataTablePagination = ({
 };
 
 const MemoizedDataTablePagination = memo(DataTablePagination);
+MemoizedDataTablePagination.displayName = "DataTablePagination";
+
 export { MemoizedDataTablePagination as DataTablePagination };

package/src/DataTable/DataTableRowActions.tsx

@@ -119,4 +119,6 @@ const DataTableRowActions = ({
 };
 
 const MemoizedDataTableRowActions = memo(DataTableRowActions);
+MemoizedDataTableRowActions.displayName = "DataTableRowActions";
+
 export { MemoizedDataTableRowActions as DataTableRowActions };

package/src/DataTable/DataTableSettings.tsx

@@ -132,4 +132,6 @@ const DataTableSettings = ({
 };
 
 const MemoizedDataTableSettings = memo(DataTableSettings);
+MemoizedDataTableSettings.displayName = "DataTableSettings";
+
 export { MemoizedDataTableSettings as DataTableSettings };

package/src/MenuButton.tsx

@@ -10,21 +10,17 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 import {
-  Divider,
-  ListSubheader,
-  Menu as MuiMenu,
-  PopoverOrigin,
-} from "@mui/material";
-
-import {
-  Button,
-  buttonSizeValues,
-  buttonVariantValues,
-  MenuItem,
-  useUniqueId,
-} from "./";
+  memo,
+  type ReactElement,
+  useCallback,
+  useMemo,
+  useState,
+  ReactNode,
+} from "react";
+import { Menu as MuiMenu, PopoverOrigin } from "@mui/material";
+
+import { Button, buttonSizeValues, buttonVariantValues, useUniqueId } from "./";
 import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { FieldComponentProps } from "./FieldComponentProps";
 import { MenuContext, MenuContextType } from "./MenuContext";
@@ -45,13 +41,7 @@ export type MenuButtonProps = {
   /**
    * The <MenuItem> components within the Menu.
    */
-  children:
-    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
-    | Array<
-        | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>
-        | NullElement
-      >
-    | NullElement;
+  children: ReactNode | NullElement;
   /**
    * The end Icon on the trigggering Button
    */

package/src/RadioGroup.tsx

@@ -14,9 +14,9 @@ import {
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps,
 } from "@mui/material";
-import { memo, ReactElement, useCallback, useRef } from "react";
+import { memo, ReactNode, useCallback, useRef } from "react";
 
-import { Radio, RadioProps } from "./Radio";
+import { RadioProps } from "./Radio";
 import { Field } from "./Field";
 import {
   FieldComponentProps,
@@ -29,7 +29,7 @@ export type RadioGroupProps = {
   /**
    * The Radio components within the group. Must include two or more.
    */
-  children: Array<ReactElement<typeof Radio>>;
+  children: ReactNode;
   /**
    * The text value of the Radio that should be selected by default
    */