@okta/odyssey-react-mui 1.13.11 → 1.14.2

package/src/labs/DataTable.tsx

@@ -247,13 +247,13 @@ export type DataTableProps = {
    * Action buttons to display in each row
    */
   rowActionButtons?: (
-    row: MRT_RowData
+    row: MRT_RowData,
   ) => ReactElement<typeof Button | typeof Fragment>;
   /**
    * Menu items to include in the optional actions menu on each row.
    */
   rowActionMenuItems?: (
-    row: MRT_RowData
+    row: MRT_RowData,
   ) => ReactElement<typeof MenuItem | typeof Fragment>;
 };
 
@@ -329,7 +329,7 @@ const DataTable = ({
   }, [columns]);
 
   const [columnVisibility, setColumnVisibility] = useState<MRT_VisibilityState>(
-    initialColumnVisibility
+    initialColumnVisibility,
   );
 
   const [globalFilter, setGlobalFilter] = useState<string>("");
@@ -367,10 +367,10 @@ const DataTable = ({
   const handleSortingChange = useCallback(
     (updater: MRT_Updater<MRT_SortingState>) => {
       setSorting((prevSorting) =>
-        updater instanceof Function ? updater(prevSorting) : sorting
+        updater instanceof Function ? updater(prevSorting) : sorting,
       );
     },
-    [sorting]
+    [sorting],
   );
 
   const handleColumnVisibility = useCallback(
@@ -380,7 +380,7 @@ const DataTable = ({
         [columnId]: !columnVisibility[columnId],
       }));
     },
-    [columnVisibility]
+    [columnVisibility],
   );
 
   const handleSearch = useCallback((value: string) => {
@@ -394,10 +394,10 @@ const DataTable = ({
   const handleRowSelectionChange = useCallback(
     (updater: MRT_Updater<MRT_RowSelectionState>) => {
       setRowSelection((prevRowSelection) =>
-        updater instanceof Function ? updater(prevRowSelection) : rowSelection
+        updater instanceof Function ? updater(prevRowSelection) : rowSelection,
       );
     },
-    [rowSelection]
+    [rowSelection],
   );
 
   const updateRowOrder = useCallback(
@@ -420,7 +420,7 @@ const DataTable = ({
       reorderDataFn?.({ rowId, newIndex });
       refreshData();
     },
-    [data, totalRows, reorderDataFn, refreshData]
+    [data, totalRows, reorderDataFn, refreshData],
   );
 
   const rowVirtualizerInstanceRef =
@@ -428,7 +428,7 @@ const DataTable = ({
 
   const getRowFromTableAndSetHovered = (
     table: TableType,
-    id: MRT_RowData["id"]
+    id: MRT_RowData["id"],
   ) => {
     if (id) {
       const nextRow: MRT_RowData = table.getRow(id);
@@ -520,7 +520,7 @@ const DataTable = ({
       page,
       resultsPerPage,
       updateRowOrder,
-    ]
+    ],
   );
 
   const handleDragHandleOnDragEnd = useCallback(
@@ -538,7 +538,7 @@ const DataTable = ({
 
       setDraggingRow(null);
     },
-    [updateRowOrder]
+    [updateRowOrder],
   );
 
   const handleDragHandleOnDragCapture = useCallback(
@@ -547,7 +547,7 @@ const DataTable = ({
         setDraggingRow(table.getState().draggingRow);
       }
     },
-    [draggingRow]
+    [draggingRow],
   );
 
   const table = useMaterialReactTable({
@@ -639,12 +639,12 @@ const DataTable = ({
         draggingRow?.id === row.id && table.getState().hoveredRow?.id !== row.id
           ? "isDragging"
           : table.getState().hoveredRow?.id === row.id &&
-            draggingRow?.id !== row.id
-          ? "isDragTarget"
-          : draggingRow?.id === row.id &&
-            table.getState().hoveredRow?.id === row.id
-          ? "isDragging isDragTarget"
-          : undefined,
+              draggingRow?.id !== row.id
+            ? "isDragTarget"
+            : draggingRow?.id === row.id &&
+                table.getState().hoveredRow?.id === row.id
+              ? "isDragging isDragTarget"
+              : undefined,
     }),
 
     muiRowDragHandleProps: ({ table, row }) => ({
@@ -800,7 +800,7 @@ const DataTable = ({
       hasChangeableDensity,
       handleColumnVisibility,
       hasColumnVisibility,
-    ]
+    ],
   );
 
   return (

package/src/labs/DatePicker.tsx

@@ -34,6 +34,7 @@ export const DatePicker = <TInputDate, TDate>({
   value = null,
 }: DatePickerProps<TInputDate, TDate>) => {
   const renderInput = useCallback(
+    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
     ({ InputProps, ...props }) => {
       const combinedProps = {
         ...InputProps,
@@ -42,13 +43,14 @@ export const DatePicker = <TInputDate, TDate>({
 
       return <InputBase {...combinedProps} required={!isOptional} />;
     },
-    [isOptional]
+    [isOptional],
   );
 
   return (
     <MuiDatePicker
       label={label}
       onChange={onChange}
+      // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
       renderInput={renderInput}
       value={value}
     />

package/src/labs/Drawer.tsx

@@ -0,0 +1,254 @@
+/*!
+ * Copyright (c) 2024-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,
+  ReactNode,
+  useState,
+  useEffect,
+  useMemo,
+  useRef,
+  ReactElement,
+} from "react";
+import styled from "@emotion/styled";
+import { useTranslation } from "react-i18next";
+import { Drawer as MuiDrawer } from "@mui/material";
+
+import type { HtmlProps } from "../HtmlProps";
+import { Button } from "../Button";
+import { CloseIcon } from "../icons.generated";
+import { Heading5 } from "../Typography";
+import {
+  useOdysseyDesignTokens,
+  DesignTokens,
+} from "../OdysseyDesignTokensContext";
+
+export const variantValues = ["temporary", "persistent"] as const;
+
+export type DrawerProps = {
+  /**
+   * An optional Button object to be situated in the Drawerfooter. Should almost always be of variant `primary`.
+   */
+  primaryCallToActionComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Drawer footer, alongside the `callToActionPrimaryComponent`.
+   */
+  secondaryCallToActionComponent?: ReactElement<typeof Button>;
+  /**
+   * An optional Button object to be situated in the Drawer footer, alongside the other two `callToAction` components.
+   */
+  tertiaryCallToActionComponent?: ReactElement<typeof Button>;
+  /**
+   * The content of the Drawer. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
+   */
+  children?: ReactNode;
+  /**
+   * When set to `true`, the Drawer will be visible.
+   */
+  isOpen?: boolean;
+  /**
+   * Callback that controls what happens when the Drawer is dismissed
+   */
+  onClose: () => void;
+  /**
+   * Shows divider lines separating header, content, and footer (if using action buttons)
+   */
+  showDividers: boolean;
+  /**
+   * The title of the Drawer
+   */
+  title?: string;
+  /**
+   * Type of Drawer
+   */
+  variant?: (typeof variantValues)[number];
+} & Pick<HtmlProps, "ariaLabel" | "testId" | "translate">;
+
+interface DrawerStyleProps {
+  odysseyDesignTokens: DesignTokens;
+  showDividers: boolean;
+}
+const DrawerHeader = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<DrawerStyleProps>`
+  position: sticky;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0;
+  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4}
+    ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing5};
+  color: ${({ odysseyDesignTokens }) => odysseyDesignTokens.HueNeutral900};
+  background-color: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.HueNeutralWhite};
+  border-bottom: ${({ showDividers, odysseyDesignTokens }) =>
+    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+`;
+
+const DrawerContentWrapper = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<{
+  odysseyDesignTokens: DesignTokens;
+}>`
+  overflow-y: auto;
+`;
+
+const DrawerContent = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<DrawerStyleProps>`
+  padding: ${({ showDividers, odysseyDesignTokens }) =>
+    showDividers
+      ? `${odysseyDesignTokens.Spacing5}`
+      : `0 ${odysseyDesignTokens.Spacing5}`};
+`;
+
+const DrawerFooter = styled("div", {
+  shouldForwardProp: (prop) => prop !== "odysseyDesignTokens",
+})<DrawerStyleProps>`
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  align-content: center;
+  padding: ${({ odysseyDesignTokens }) => odysseyDesignTokens.Spacing4};
+  border-top: ${({ showDividers, odysseyDesignTokens }) =>
+    showDividers ? `1px solid ${odysseyDesignTokens.HueNeutral200}` : "none"};
+  background-color: ${({ odysseyDesignTokens }) =>
+    odysseyDesignTokens.HueNeutralWhite};
+`;
+
+const Drawer = ({
+  ariaLabel,
+  children,
+  isOpen,
+  onClose,
+  primaryCallToActionComponent,
+  secondaryCallToActionComponent,
+  showDividers = false,
+  tertiaryCallToActionComponent,
+  testId,
+  title,
+  translate,
+  variant = "temporary",
+}: DrawerProps) => {
+  const [isContentScrollable, setIsContentScrollable] = useState(false);
+  const drawerContentRef = useRef<HTMLDivElement>(null);
+  const odysseyDesignTokens = useOdysseyDesignTokens();
+
+  //If RTL is set in the theme, align the drawer on the left side of the screen, uses right by default.
+  const { i18n } = useTranslation();
+  const anchorDirection = i18n.dir() === "rtl" ? "left" : "right";
+
+  useEffect(() => {
+    let frameId: number;
+
+    const handleContentScroll = () => {
+      const drawerContentElement = drawerContentRef.current;
+      if (drawerContentElement) {
+        cancelAnimationFrame(frameId);
+        setIsContentScrollable(
+          drawerContentElement.scrollHeight > drawerContentElement.clientHeight,
+        );
+      }
+      frameId = requestAnimationFrame(handleContentScroll);
+    };
+
+    if (isOpen) {
+      frameId = requestAnimationFrame(handleContentScroll);
+    }
+
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [isOpen]);
+
+  const dividersVisible = useMemo(() => {
+    return showDividers || isContentScrollable;
+  }, [showDividers, isContentScrollable]);
+
+  const hasFooter = useMemo(
+    () =>
+      primaryCallToActionComponent ||
+      secondaryCallToActionComponent ||
+      tertiaryCallToActionComponent,
+    [
+      primaryCallToActionComponent,
+      secondaryCallToActionComponent,
+      tertiaryCallToActionComponent,
+    ],
+  );
+
+  return (
+    <MuiDrawer
+      data-se={testId}
+      anchor={anchorDirection}
+      open={isOpen}
+      onClose={onClose}
+      variant={variant}
+      sx={{
+        //Overrides defualt MUI inline style
+        ...(variant === "persistent" && {
+          "& .MuiDrawer-paper": {
+            transition: "none",
+          },
+        }),
+      }}
+    >
+      <DrawerContentWrapper
+        {...(isContentScrollable && {
+          //Sets tabIndex on content element if scrollable so content is easier to navigate with the keyboard
+          tabIndex: 0,
+        })}
+        odysseyDesignTokens={odysseyDesignTokens}
+        ref={drawerContentRef}
+      >
+        <DrawerHeader
+          translate={translate}
+          odysseyDesignTokens={odysseyDesignTokens}
+          showDividers={dividersVisible}
+        >
+          <Heading5>{title}</Heading5>
+          <Button
+            ariaLabel={ariaLabel}
+            onClick={onClose}
+            size="small"
+            startIcon={<CloseIcon />}
+            variant="floating"
+          />
+        </DrawerHeader>
+        <DrawerContent
+          showDividers={dividersVisible}
+          odysseyDesignTokens={odysseyDesignTokens}
+        >
+          {children}
+        </DrawerContent>
+      </DrawerContentWrapper>
+      {hasFooter && (
+        <DrawerFooter
+          odysseyDesignTokens={odysseyDesignTokens}
+          showDividers={dividersVisible}
+        >
+          {tertiaryCallToActionComponent}
+          {secondaryCallToActionComponent}
+          {primaryCallToActionComponent}
+        </DrawerFooter>
+      )}
+    </MuiDrawer>
+  );
+};
+
+const MemoizedDrawer = memo(Drawer);
+MemoizedDrawer.displayName = "Drawer";
+
+export { MemoizedDrawer as Drawer };

package/src/labs/GroupPicker.tsx

@@ -10,16 +10,20 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import type { AutocompleteGetTagProps } from "@mui/material/useAutocomplete";
+import type {
+  AutocompleteFreeSoloValueMapping,
+  AutocompleteGetTagProps,
+} from "@mui/material/useAutocomplete";
 
 import {
   Autocomplete as MuiAutocomplete,
   Avatar as MuiAvatar,
   Box,
   InputBase,
+  AutocompleteRenderInputParams,
 } from "@mui/material";
 import { avatarClasses } from "@mui/material/Avatar";
-import { memo, useCallback } from "react";
+import { HTMLAttributes, memo, useCallback } from "react";
 
 import { AutocompleteProps } from "../Autocomplete";
 import { Field } from "../Field";
@@ -41,7 +45,7 @@ export type GroupPickerOptionType = {
 export type GroupPickerProps<
   GroupPickerOptionType,
   HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined
+  IsCustomValueAllowed extends boolean | undefined,
 > = AutocompleteProps<
   GroupPickerOptionType,
   HasMultipleChoices,
@@ -54,7 +58,7 @@ const avatarImageSizeMedium = 24;
 const GroupPicker = <
   OptionType extends GroupPickerOptionType,
   HasMultipleChoices extends boolean | undefined,
-  IsCustomValueAllowed extends boolean | undefined
+  IsCustomValueAllowed extends boolean | undefined,
 >({
   hasMultipleChoices,
   isCustomValueAllowed,
@@ -72,16 +76,26 @@ const GroupPicker = <
 }: GroupPickerProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {
   const odysseyDesignTokens = useOdysseyDesignTokens();
 
-  const isOptionEqualToValue = useCallback((sourceValue, targetValue) => {
-    return sourceValue.id === targetValue.id;
-  }, []);
+  const isOptionEqualToValue = useCallback(
+    (sourceValue: OptionType, targetValue: OptionType) => {
+      return sourceValue.id === targetValue.id;
+    },
+    [],
+  );
 
-  const getOptionLabel = useCallback((option) => {
-    return option.name;
-  }, []);
+  const getOptionLabel = useCallback(
+    (
+      option:
+        | OptionType
+        | AutocompleteFreeSoloValueMapping<IsCustomValueAllowed>,
+    ) => {
+      return (option as OptionType).name;
+    },
+    [],
+  );
 
   const renderOption = useCallback(
-    (props, option) => {
+    (props: HTMLAttributes<HTMLElement>, option: OptionType) => {
       return (
         <li {...props} key={option.id}>
           <Box
@@ -151,7 +165,7 @@ const GroupPicker = <
         </li>
       );
     },
-    [odysseyDesignTokens]
+    [odysseyDesignTokens],
   );
 
   const renderTags = useCallback(
@@ -186,14 +200,19 @@ const GroupPicker = <
           </Box>
         );
       }),
-    [odysseyDesignTokens]
+    [odysseyDesignTokens],
   );
 
   const renderInput = useCallback(
-    ({ InputLabelProps, InputProps, ...params }) => (
+    ({
+      InputLabelProps,
+      InputProps,
+      ...params
+    }: AutocompleteRenderInputParams) => (
       <Field
         fieldType="single"
         hasVisibleLabel
+        //@ts-expect-error htmlFor is not available on the currently typed params
         id={InputLabelProps.htmlFor}
         hint={hint}
         label={label}
@@ -209,7 +228,7 @@ const GroupPicker = <
         )}
       />
     ),
-    [hint, isOptional, label]
+    [hint, isOptional, label],
   );
 
   return (

package/src/labs/PaginatedTable.tsx

@@ -78,7 +78,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
     useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
 
   const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
-    []
+    [],
   );
 
   const [globalFilter, setGlobalFilter] = useState<string>();
@@ -123,7 +123,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
           />
         </Typography>
       ),
-    [fetchMoreData, totalFetchedRows]
+    [fetchMoreData, totalFetchedRows],
   );
 
   const renderTopToolbarCustomActions = useCallback<
@@ -135,7 +135,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
     ({ table }: { table: MRT_TableInstance<TData> }) => (
       <>{ToolbarButtons && <ToolbarButtons table={table} />}</>
     ),
-    [ToolbarButtons]
+    [ToolbarButtons],
   );
 
   const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
@@ -148,12 +148,13 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
     initialState?.pagination || {
       pageIndex: 0,
       pageSize: rowsPerPage,
-    }
+    },
   );
 
   const dataLengthRef = useRef(data.length);
 
   const updatePagination = useCallback(
+    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
     (paginationFunction) => {
       if (data.length === dataLengthRef.current) {
         setPagination((previousPagination) => {
@@ -164,7 +165,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
         dataLengthRef.current = data.length;
       }
     },
-    [data.length]
+    [data.length],
   );
 
   useEffect(() => {
@@ -193,7 +194,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
       pagination,
       ...initialState,
     }),
-    [initialState, pagination]
+    [initialState, pagination],
   );
 
   const modifiedState = useMemo(
@@ -214,7 +215,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
       globalFilter,
       columnFilters,
       state,
-    ]
+    ],
   );
 
   const muiToolbarAlertBannerProps: AlertProps = useMemo(
@@ -225,7 +226,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
             severity: "error",
           }
         : {},
-    [hasError, t]
+    [hasError, t],
   );
 
   const muiTablePaginationProps = useMemo(
@@ -234,10 +235,11 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
       showFirstButton: false,
       showLastButton: false,
     }),
-    []
+    [],
   );
 
   const muiCheckboxStyles = useCallback(
+    // @ts-expect-error TEMP: This type aren't working after the upgrade, but they need to be fixed.
     (theme) =>
       typeof theme.components?.MuiCheckbox?.styleOverrides?.root === "function"
         ? theme.components?.MuiCheckbox?.styleOverrides?.root?.({
@@ -245,7 +247,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
             theme,
           })
         : "",
-    []
+    [],
   );
 
   const table = useMaterialReactTable({

package/src/labs/StaticTable.tsx

@@ -62,7 +62,7 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
     useRef<MRT_Virtualizer<HTMLDivElement, HTMLTableRowElement>>(null);
 
   const [columnFilters, setColumnFilters] = useState<MRT_ColumnFiltersState>(
-    []
+    [],
   );
 
   const [globalFilter, setGlobalFilter] = useState<string>();
@@ -79,7 +79,7 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
       columnFilters,
       ...state,
     }),
-    [globalFilter, columnFilters, state]
+    [globalFilter, columnFilters, state],
   );
 
   const renderTopToolbarCustomActions = useCallback<
@@ -89,7 +89,7 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
     >
   >(
     ({ table }) => <>{ToolbarButtons && <ToolbarButtons table={table} />}</>,
-    [ToolbarButtons]
+    [ToolbarButtons],
   );
 
   useEffect(() => {

package/src/labs/Switch.tsx

@@ -64,7 +64,7 @@ export type SwitchProps = {
   "hint" | "id" | "isFullWidth" | "isDisabled" | "name"
 > &
   CheckedFieldProps<MuiSwitchProps> &
-  HtmlProps;
+  Pick<HtmlProps, "testId">;
 
 type SwitchLabelProps = {
   checked: boolean;
@@ -143,7 +143,7 @@ const Switch = ({
     getControlState({
       controlledValue: isChecked,
       uncontrolledValue: isDefaultChecked,
-    })
+    }),
   );
   const inputValues = useMemo(() => {
     if (controlledStateRef.current === CONTROLLED) {
@@ -155,7 +155,7 @@ const Switch = ({
   const [internalSwitchChecked, setInternalSwitchChecked] = useState(
     controlledStateRef.current === CONTROLLED
       ? Boolean(isChecked)
-      : Boolean(isDefaultChecked)
+      : Boolean(isDefaultChecked),
   );
 
   useEffect(() => {
@@ -174,7 +174,7 @@ const Switch = ({
       setInternalSwitchChecked(checked);
       onChange?.({ checked, value });
     },
-    [onChange, setInternalSwitchChecked, value]
+    [onChange, setInternalSwitchChecked, value],
   );
 
   const renderSwitchComponent = useMemo(
@@ -205,7 +205,7 @@ const Switch = ({
       labelElementId,
       _name,
       testId,
-    ]
+    ],
   );
 
   return (