@okta/odyssey-react-mui 1.0.2 → 1.1.1

package/src/labs/PaginatedTable.tsx

@@ -82,7 +82,7 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
   const [globalFilter, setGlobalFilter] = useState<string>();
 
   useEffect(() => {
-    if (globalFilter) {
+    if (globalFilter !== undefined) {
       onGlobalFilterChange?.(globalFilter);
     }
   }, [globalFilter, onGlobalFilterChange]);
@@ -194,14 +194,23 @@ const PaginatedTable = <TData extends DefaultMaterialReactTableData>({
 
   const modifiedState = useMemo(
     () => ({
-      ...state,
       pagination: {
         pageIndex: pagination.pageIndex,
         pageSize: pagination.pageSize,
       },
       rowSelection,
+      globalFilter,
+      columnFilters,
+      ...state,
     }),
-    [pagination.pageIndex, pagination.pageSize, rowSelection, state]
+    [
+      pagination.pageIndex,
+      pagination.pageSize,
+      rowSelection,
+      globalFilter,
+      columnFilters,
+      state,
+    ]
   );
 
   const muiToolbarAlertBannerProps: AlertProps = useMemo(

package/src/labs/README.md

@@ -20,10 +20,10 @@ This project follows semantic versioning conventions:
 
 ## Getting Started
 
-Install the package and peer dependencies:
+To use Odyssey Labs, import as:
 
 ```sh
-yarn add @okta/odyssey-react-mui @okta/odyssey-react-labs @emotion/react
+import from "@okta/odyssey-react-mui/labs"
 ```
 
 ## Components

package/src/labs/StaticTable.tsx

@@ -20,6 +20,7 @@ import {
   memo,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -65,11 +66,20 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
   const [globalFilter, setGlobalFilter] = useState<string>();
 
   useEffect(() => {
-    if (globalFilter) {
+    if (globalFilter !== undefined) {
       onGlobalFilterChange?.(globalFilter);
     }
   }, [globalFilter, onGlobalFilterChange]);
 
+  const modifiedState = useMemo(
+    () => ({
+      globalFilter,
+      columnFilters,
+      ...state,
+    }),
+    [globalFilter, columnFilters, state]
+  );
+
   const renderTopToolbarCustomActions = useCallback<
     Exclude<
       MaterialReactTableProps<TData>["renderTopToolbarCustomActions"],
@@ -95,7 +105,7 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
       data={data}
       enableBottomToolbar={false}
       enablePagination={false}
-      enableRowVirtualization={data.length > 50}
+      enableRowVirtualization
       enableSorting={false}
       getRowId={getRowId}
       initialState={initialState}
@@ -112,7 +122,7 @@ const StaticTable = <TData extends DefaultMaterialReactTableData>({
       renderTopToolbarCustomActions={renderTopToolbarCustomActions}
       rowVirtualizerInstanceRef={rowVirtualizerInstanceRef}
       rowVirtualizerProps={{ overscan: 4 }}
-      state={state}
+      state={modifiedState}
     />
   );
 };

package/src/theme/components.tsx

@@ -13,6 +13,7 @@
 import { ThemeOptions } from "@mui/material";
 import type {} from "@mui/lab/themeAugmentation";
 import { alertTitleClasses } from "@mui/material/AlertTitle";
+import { autocompleteClasses } from "@mui/material/Autocomplete";
 import { buttonClasses } from "@mui/material/Button";
 import { checkboxClasses } from "@mui/material/Checkbox";
 import { chipClasses } from "@mui/material/Chip";
@@ -269,15 +270,39 @@ export const components = (
           paddingBlock: odysseyTokens.Spacing2,
           paddingInline: odysseyTokens.Spacing2,
           borderRadius: odysseyTokens.BorderRadiusMain,
+
+          [`& .${autocompleteClasses.option}`]: {
+            minHeight: "unset",
+            paddingBlock: odysseyTokens.Spacing3,
+            paddingInline: odysseyTokens.Spacing4,
+            borderRadius: odysseyTokens.BorderRadiusTight,
+
+            [`&:hover`]: {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            [`&.${autocompleteClasses.focused}`]: {
+              backgroundColor: odysseyTokens.HueNeutral100,
+            },
+
+            [`&[aria-selected="true"]`]: {
+              backgroundColor: "transparent",
+              color: odysseyTokens.TypographyColorAction,
+
+              [`&:hover`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+
+              [`&.${autocompleteClasses.focused}`]: {
+                backgroundColor: odysseyTokens.PalettePrimaryLighter,
+              },
+            },
+          },
         },
         loading: {
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
         },
-        option: {
-          paddingBlock: odysseyTokens.Spacing3,
-          borderRadius: odysseyTokens.BorderRadiusTight,
-        },
         popupIndicator: {
           padding: odysseyTokens.Spacing1,
           marginRight: "unset",
@@ -1149,8 +1174,8 @@ export const components = (
         root: {
           flexWrap: "wrap",
           gap: odysseyTokens.Spacing2,
-          paddingBlockStart: odysseyTokens.Spacing6,
-          paddingBlockEnd: odysseyTokens.Spacing6,
+          paddingBlockStart: odysseyTokens.Spacing5,
+          paddingBlockEnd: odysseyTokens.Spacing5,
           paddingInline: odysseyTokens.Spacing6,
 
           "& > .${ buttonClasses.root }": {
@@ -1327,6 +1352,13 @@ export const components = (
         },
       },
     },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          padding: odysseyTokens.Spacing1,
+        },
+      },
+    },
     MuiInput: {
       defaultProps: {
         disableUnderline: true,
@@ -1364,7 +1396,6 @@ export const components = (
     MuiInputBase: {
       defaultProps: {
         minRows: 3,
-        required: true,
       },
       styleOverrides: {
         root: ({ ownerState, theme }) => ({
@@ -1598,6 +1629,7 @@ export const components = (
           gap: odysseyTokens.Spacing2,
           minHeight: "unset",
           paddingBlock: odysseyTokens.Spacing3,
+          paddingInline: odysseyTokens.Spacing4,
           borderRadius: odysseyTokens.BorderRadiusTight,
 
           [`& .${formControlLabelClasses.root}`]: {
@@ -1614,6 +1646,10 @@ export const components = (
             },
           },
 
+          [`:focus-visible`]: {
+            backgroundColor: odysseyTokens.HueNeutral100,
+          },
+
           [`&.${menuItemClasses.root}-destructive`]: {
             color: odysseyTokens.TypographyColorDanger,
           },
@@ -2241,8 +2277,6 @@ export const components = (
     },
     MuiTypography: {
       defaultProps: {
-        fontFamily:
-          "'Inter', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Noto Sans Arabic', sans-serif",
         variantMapping: {
           h1: "h1",
           h2: "h2",