@databiosphere/findable-ui 19.0.0 → 21.0.0

package/src/components/Table/common/utils.ts

@@ -2,25 +2,16 @@ import {
   Cell,
   Column,
   ColumnFiltersState,
-  InitialTableState,
   memo,
   PaginationState,
   Row,
   RowData,
   sortingFns,
   Table,
-  VisibilityState,
 } from "@tanstack/react-table";
 import { SelectCategory } from "../../../common/entities";
-import {
-  ColumnConfig,
-  GridTrackMinMax,
-  GridTrackSize,
-} from "../../../config/entities";
 import { EXPLORE_MODE, ExploreMode } from "../../../hooks/useExploreMode";
-import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
-import { CheckboxMenuListItem } from "../components/CheckboxMenu/checkboxMenu";
-import { handleToggleVisibility } from "../components/TableFeatures/ColumnVisibility/utils";
+import { COLUMN_IDENTIFIER } from "./columnIdentifier";
 
 /**
  * Internal model of a category term count keyed by category term.
@@ -136,40 +127,6 @@ export function generateDownloadBlob<T extends RowData>(
   return new Blob([tsv], { type: "text/tab-separated-values" });
 }
 
-/**
- * Returns edit column checkbox menu options.
- * @param table - Table.
- * @returns a list of edit column options.
- */
-export function getEditColumnOptions<T extends RowData>(
-  table: Table<T>
-): CheckboxMenuListItem[] {
-  const { getAllColumns, initialState } = table;
-  const { columnVisibility: initialVisibilityState } = initialState;
-  const allColumns = getAllColumns();
-  return allColumns.reduce((acc, column) => {
-    const {
-      columnDef: { header },
-      getCanHide,
-      getIsVisible,
-      id,
-    } = column;
-    if (getCanHide()) {
-      const option: CheckboxMenuListItem = {
-        checked: getIsVisible(),
-        disabled: initialVisibilityState[id], // TODO(cc) column visibility toggle should be disabled when table enableGrouping is false, and column is grouped.
-        label: header as string, // TODO revisit type assertion here
-        onChange: () => {
-          handleToggleVisibility(table, column);
-        },
-        value: id,
-      };
-      acc.push(option);
-    }
-    return acc;
-  }, [] as CheckboxMenuListItem[]);
-}
-
 /**
  * Returns unique category term counts keyed by category terms.
  * Custom function based off react table function getFacetedUniqueValues, see
@@ -212,41 +169,6 @@ export function getFacetedUniqueValuesWithArrayValues<T extends RowData>(): (
     );
 }
 
-/**
- * Generates a string value for the CSS property grid-template-columns.
- * Defines grid table track sizing (for each visible column).
- * @param columns - Table columns.
- * @returns string value for the css property grid-template-columns.
- */
-export function getGridTemplateColumns<T extends RowData>(
-  columns: Column<T>[]
-): string {
-  return columns
-    .filter(filterGroupedColumn)
-    .map(({ columnDef: { meta } }) => {
-      const width = meta?.width;
-      if (isGridTrackMinMax(width)) {
-        return `minmax(${width.min}, ${width.max})`;
-      }
-      return width;
-    })
-    .join(" ");
-}
-
-/**
- * Returns initial table state.
- * @param columns - Column configuration.
- * @returns initial table state.
- */
-export function getInitialState<T extends RowData>(
-  columns: ColumnConfig<T>[]
-): InitialTableState {
-  const columnVisibility = getInitialTableColumnVisibility(columns);
-  return {
-    columnVisibility,
-  };
-}
-
 /**
  * Returns the pinned cell and its index tuple.
  * @param row - Row.
@@ -288,19 +210,19 @@ export function getTableStatePagination(
 }
 
 /**
- * Returns the list of table headers, excluding "select" column.
+ * Returns the list of table headers, excluding "rowSelection" column.
  * @param rows - Table rows.
  * @returns list of headers.
  */
 function getHeadersTableData<T extends RowData>(rows: Row<T>[]): TableData[] {
   return rows[0]
     .getAllCells()
-    .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
+    .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
     .map((cell) => cell.column.columnDef.header as TableData);
 }
 
 /**
- * Returns the list of table data, excluding "select" column.
+ * Returns the list of table data, excluding "rowSelection" column.
  * @param rows - Table rows.
  * @returns list of data.
  */
@@ -308,20 +230,11 @@ function getRowsTableData<T extends RowData>(rows: Row<T>[]): TableData[][] {
   return rows.map((row) =>
     row
       .getAllCells()
-      .filter((cell) => cell.column.id !== ACCESSOR_KEYS.SELECT)
+      .filter((cell) => cell.column.id !== COLUMN_IDENTIFIER.ROW_SELECTION)
       .map((cell) => cell.getValue() as TableData)
   );
 }
 
-/**
- * Returns true if the column is not grouped (filters out grouped columns).
- * @param column - Table column.
- * @returns true if the column is not grouped.
- */
-function filterGroupedColumn<T extends RowData>(column: Column<T>): boolean {
-  return !column.getIsGrouped();
-}
-
 /**
  * Returns true if any or all table rows are selected.
  * @param table - Table.
@@ -397,29 +310,6 @@ function basicSort<TValue>(val0: TValue, val1: TValue): number {
   return val0 === val1 ? 0 : val0 > val1 ? 1 : -1;
 }
 
-/**
- * Returns the initial table visibility state for the specified column configuration.
- * @param columns - Column configuration.
- * @returns initial table visibility state.
- */
-export function getInitialTableColumnVisibility<T extends RowData>(
-  columns: ColumnConfig<T>[]
-): VisibilityState {
-  return columns.reduce((acc, { columnVisible = true, id }) => {
-    Object.assign(acc, { [id]: columnVisible });
-    return acc;
-  }, {});
-}
-
-/**
- * Determine if the given track size width is a size range.
- * @param width - Grid table track size.
- * @returns true if the given track size width is a size range.
- */
-function isGridTrackMinMax(width?: GridTrackSize): width is GridTrackMinMax {
-  return (width as GridTrackMinMax).min !== undefined;
-}
-
 /**
  * Returns the given value as a string.
  * See React Table "toString" function

package/src/components/Table/components/TableCell/common/utils.ts

@@ -1,7 +1,7 @@
 import { TableCellProps } from "@mui/material";
 import { Column, CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
 import { TABLE_CELL_PROPS } from "../../../../../styles/common/mui/tableCell";
-import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
+import { COLUMN_IDENTIFIER } from "../../../common/columnIdentifier";
 
 /**
  * Returns table cell alignment based on the cell.
@@ -23,9 +23,9 @@ export function getTableCellPadding<T extends RowData, TValue>(
   id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]
 ): TableCellProps["padding"] {
   switch (id) {
-    case ACCESSOR_KEYS.ROW_POSITION:
+    case COLUMN_IDENTIFIER.ROW_POSITION:
       return TABLE_CELL_PROPS.PADDING.NORMAL;
-    case ACCESSOR_KEYS.SELECT:
+    case COLUMN_IDENTIFIER.ROW_SELECTION:
       return TABLE_CELL_PROPS.PADDING.CHECKBOX;
     default:
       return TABLE_CELL_PROPS.PADDING.NORMAL;

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -1,16 +1,12 @@
 import { Checkbox as MCheckbox } from "@mui/material";
-import { Row, RowData } from "@tanstack/react-table";
+import { CellContext, RowData } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 
-export interface RowSelectionCellProps<T extends RowData> {
-  row: Row<T>;
-}
-
-export const RowSelectionCell = <T extends RowData>({
+export const RowSelectionCell = <T extends RowData, TValue = unknown>({
   row,
-}: RowSelectionCellProps<T>): JSX.Element => {
+}: CellContext<T, TValue>): JSX.Element => {
   const { getIsSelected, getToggleSelectedHandler } = row;
   return (
     <MCheckbox

package/src/components/Table/components/TableFeatures/ColumnVisibility/utils.ts

@@ -1,52 +1,33 @@
-import { Column, RowData, Table } from "@tanstack/react-table";
+import { RowData, Table, VisibilityState } from "@tanstack/react-table";
 
 /**
- * Toggles the visibility state for the given column.
- * ### Column Visibility State
- * - **Column visibility is not enabled**:
- *   - No column visibility action (exit).
- * - **Column visibility is enabled**:
- *   - Toggles the visibility state of the specified column.
- * ### Grouping and Sorting State
- * - **Column is not visible**:
- *   - No grouping or sorting action (exit).
- * - **Column is visible**:
- *   - **Column is grouped**:
- *     - Resets grouping state to `[]`.
- *     - Clears column from sorting state.
- *   - **Column is not grouped**:
- *     - No grouping or sorting action.
+ * Resets column visibility state of the table.
+ * ### Default Behavior:
+ * - Column visibility state is reset to initial state.
+ * ### Grouping State:
+ * - Column visibility state is reset to initial state, with any grouped columns remaining visible.
  * @param table - Table.
- * @param column - Column.
  */
-export function handleToggleVisibility<T extends RowData>(
-  table: Table<T>,
-  column: Column<T>
+export function handleResetVisibilityState<T extends RowData>(
+  table: Table<T>
 ): void {
-  const {
-    options: { enableGrouping },
-    resetGrouping,
-  } = table;
-  const {
-    clearSorting,
-    getCanHide,
-    getIsGrouped,
-    getIsVisible,
-    toggleVisibility,
-  } = column;
-  if (!getCanHide()) return;
-
-  // Toggle column visibility.
-  toggleVisibility();
-
-  // Column is not visible i.e. requesting column visibility and therefore no further action is needed.
-  if (!getIsVisible()) return;
+  const { getState, initialState, resetColumnVisibility, setColumnVisibility } =
+    table;
+  const { grouping } = getState();
+  if (grouping.length === 0) {
+    resetColumnVisibility(); // Resets column visibility state.
+    return;
+  }
 
-  // Column is visible.
-  // Table grouping is enabled, and column is grouped.
-  if (enableGrouping && getIsGrouped()) {
-    resetGrouping(true); // Clears grouping state to `[]`.
-    // Currently, only a grouped column's sorting state is cleared.
-    clearSorting(); // Clears column sorting.
+  // Table is grouped.
+  // Ensure grouped columns remain visible (as their initial visibility state may have been `false`).
+  const groupedColumnVisibility: VisibilityState = {};
+  for (const id of grouping) {
+    groupedColumnVisibility[id] = true;
   }
+
+  setColumnVisibility({
+    ...initialState.columnVisibility,
+    ...groupedColumnVisibility,
+  });
 }

package/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx

@@ -1,22 +1,18 @@
 import { Checkbox } from "@mui/material";
-import { RowData, Table } from "@tanstack/react-table";
+import { HeaderContext, RowData } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 
-export interface HeadSelectionCellProps<T extends RowData> {
-  tableInstance: Table<T>;
-}
-
-export const HeadSelectionCell = <T extends RowData>({
-  tableInstance,
-}: HeadSelectionCellProps<T>): JSX.Element => {
+export const HeadSelectionCell = <T extends RowData, TValue = unknown>({
+  table,
+}: HeaderContext<T, TValue>): JSX.Element => {
   const {
     getIsAllPageRowsSelected,
     getIsSomePageRowsSelected,
     getToggleAllRowsSelectedHandler,
-  } = tableInstance;
+  } = table;
   return (
     <Checkbox
       checked={getIsAllPageRowsSelected()}

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/columnGrouping.tsx

@@ -1,32 +1,26 @@
-import { ListItemText } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { DropdownButton } from "../../../../../common/Button/components/DropdownButton/dropdownButton";
 import { DropdownMenu } from "../../../../../common/DropdownMenu/dropdownMenu";
-import { handleClearGroupingState } from "../../../TableFeatures/ColumnGrouping/utils";
-import { StyledMenuItem } from "./columnGrouping.styles";
 import { MenuItems } from "./components/MenuItems/menuItems";
-import { LIST_ITEM_TEXT_PROPS, MENU_ITEM_PROPS, MENU_PROPS } from "./constants";
+import { MENU_PROPS } from "./constants";
 import { ColumnGroupingProps } from "./types";
-import { getButtonLabel, getColumnGrouping } from "./utils";
+import { getButtonLabel } from "./utils";
 
 export const ColumnGrouping = <T extends RowData>({
   tableInstance,
 }: ColumnGroupingProps<T>): JSX.Element | null => {
   const {
-    getState,
+    getAllColumns,
     options: { enableGrouping },
   } = tableInstance;
-  const { grouping } = getState();
-  const groupingByColumnId = getColumnGrouping(tableInstance);
   if (!enableGrouping) return null;
-  if (groupingByColumnId.size === 0) return null;
   return (
     <DropdownMenu
       {...MENU_PROPS}
       button={(props) => (
         <DropdownButton {...props}>
-          {getButtonLabel(groupingByColumnId, grouping)}
+          {getButtonLabel(getAllColumns())}
         </DropdownButton>
       )}
     >
@@ -34,20 +28,8 @@ export const ColumnGrouping = <T extends RowData>({
         <MenuItems
           key="column-grouping"
           closeMenu={closeMenu}
-          groupingByColumnId={groupingByColumnId}
           tableInstance={tableInstance}
         />,
-        <StyledMenuItem
-          {...MENU_ITEM_PROPS}
-          key="reset-grouping-state"
-          disabled={grouping.length === 0}
-          onClick={() => {
-            handleClearGroupingState(tableInstance);
-            closeMenu();
-          }}
-        >
-          <ListItemText {...LIST_ITEM_TEXT_PROPS}>Clear Grouping</ListItemText>
-        </StyledMenuItem>,
       ]}
     </DropdownMenu>
   );

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/constants.ts

@@ -0,0 +1,13 @@
+import { ListItemTextProps, MenuItemProps } from "@mui/material";
+
+export const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps> = {
+  primaryTypographyProps: {
+    color: "primary",
+    component: "span",
+    variant: "inherit",
+  },
+};
+
+export const MENU_ITEM_PROPS: Partial<MenuItemProps> = {
+  component: "li",
+};

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/menuItems.tsx

@@ -1,28 +1,55 @@
 import { ListItemText, MenuItem } from "@mui/material";
 import { RowData } from "@tanstack/react-table";
-import React from "react";
-import { handleToggleGrouping } from "../../../../../TableFeatures/ColumnGrouping/utils";
-import { MENU_ITEM_PROPS } from "../../constants";
+import React, { Fragment } from "react";
+import {
+  handleClearGroupingState,
+  handleToggleGrouping,
+} from "../../../../../TableFeatures/ColumnGrouping/utils";
+import { LIST_ITEM_TEXT_PROPS, MENU_ITEM_PROPS } from "./constants";
+import { StyledMenuItem } from "./menuItems.styles";
 import { MenuItemsProps } from "./types";
+import {
+  getCanGroupColumns,
+  getVisibleColumnCount,
+  isToggleGroupingDisabled,
+} from "./utils";
 
 export const MenuItems = <T extends RowData>({
   closeMenu,
-  groupingByColumnId,
   tableInstance,
-}: MenuItemsProps<T>): JSX.Element[] => {
-  const columnByMenuItem = [...groupingByColumnId.values()];
-  return columnByMenuItem.map(([menuItem, column]) => (
-    <MenuItem
-      {...MENU_ITEM_PROPS}
-      key={column.id}
-      disabled={!column.getCanGroup()}
-      onClick={() => {
-        handleToggleGrouping(tableInstance, column);
-        closeMenu();
-      }}
-      selected={column.getIsGrouped()}
-    >
-      <ListItemText disableTypography>{menuItem}</ListItemText>
-    </MenuItem>
-  ));
+}: MenuItemsProps<T>): JSX.Element => {
+  const { getAllColumns } = tableInstance;
+  const columns = getCanGroupColumns(getAllColumns());
+  const visibleCount = getVisibleColumnCount(getAllColumns());
+  return (
+    <Fragment>
+      {columns.map((column) => {
+        return (
+          <MenuItem
+            {...MENU_ITEM_PROPS}
+            key={column.id}
+            disabled={isToggleGroupingDisabled(column, visibleCount)}
+            onClick={() => {
+              handleToggleGrouping(tableInstance, column);
+              closeMenu();
+            }}
+            selected={column.getIsGrouped()}
+          >
+            <ListItemText disableTypography>
+              {column.columnDef.header}
+            </ListItemText>
+          </MenuItem>
+        );
+      })}
+      <StyledMenuItem
+        {...MENU_ITEM_PROPS}
+        onClick={() => {
+          handleClearGroupingState(tableInstance);
+          closeMenu();
+        }}
+      >
+        <ListItemText {...LIST_ITEM_TEXT_PROPS}>Clear Grouping</ListItemText>
+      </StyledMenuItem>
+    </Fragment>
+  );
 };

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/types.ts

@@ -1,8 +1,7 @@
-import { Column, RowData, Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { UseMenu } from "../../../../../../../common/Menu/hooks/useMenu";
 
 export interface MenuItemsProps<T extends RowData> {
   closeMenu: UseMenu<HTMLButtonElement>["onClose"];
-  groupingByColumnId: Map<string, [string, Column<T>]>;
   tableInstance: Table<T>;
 }

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/components/MenuItems/utils.ts

@@ -0,0 +1,58 @@
+import { Column, RowData } from "@tanstack/react-table";
+import { COLUMN_IDENTIFIER } from "../../../../../../common/columnIdentifier";
+import { isStringHeaderColumn } from "../../../../../../common/typeGuards";
+
+/**
+ * Returns columns that are enabled to be grouped.
+ * @param columns - Columns.
+ * @returns columns that are enabled to be grouped.
+ */
+export function getCanGroupColumns<T extends RowData>(
+  columns: Column<T>[]
+): (Column<T> & { columnDef: { header: string } })[] {
+  return columns
+    .filter(isStringHeaderColumn)
+    .filter(({ getCanGroup }) => getCanGroup());
+}
+
+/**
+ * Returns the number of visible columns, excluding system columns "rowPosition" and "rowSelection".
+ * @param columns - Columns.
+ * @returns number of visible columns.
+ */
+export function getVisibleColumnCount<T extends RowData>(
+  columns: Column<T>[]
+): number {
+  return columns
+    .filter((column) => !isSystemColumn(column))
+    .filter(({ getIsVisible }) => getIsVisible()).length;
+}
+
+/**
+ * Returns true if the column is a system column "rowPosition" or "rowSelection".
+ * @param column - Column.
+ * @returns true if the column is a system column.
+ */
+function isSystemColumn<T extends RowData>(column: Column<T>): boolean {
+  return (
+    column.id === COLUMN_IDENTIFIER.ROW_POSITION ||
+    column.id === COLUMN_IDENTIFIER.ROW_SELECTION
+  );
+}
+
+/**
+ * Returns whether the column grouping toggle is disabled.
+ * - If the column is not enabled to be grouped, the toggle is disabled.
+ * - If the column is not visible, the toggle is disabled.
+ * - If the count of visible columns is 1, the toggle is disabled.
+ * @param column - Column.
+ * @param visibleCount - Count of visible, un-grouped columns.
+ * @returns true if the column visibility toggle is disabled.
+ */
+export function isToggleGroupingDisabled<T extends RowData>(
+  column: Column<T>,
+  visibleCount: number
+): boolean {
+  if (!column.getCanGroup() || !column.getIsVisible()) return true;
+  return visibleCount === 1; // We should not be able to group the last visible column; at least one un-grouped column should be visible.
+}

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/constants.ts

@@ -1,17 +1,5 @@
-import { ListItemTextProps, MenuItemProps, MenuProps } from "@mui/material";
-
-export const LIST_ITEM_TEXT_PROPS: Partial<ListItemTextProps> = {
-  primaryTypographyProps: {
-    color: "primary",
-    component: "span",
-    variant: "inherit",
-  },
-};
+import { MenuProps } from "@mui/material";
 
 export const MENU_PROPS: Partial<MenuProps> = {
   variant: "menu",
 };
-
-export const MENU_ITEM_PROPS: Partial<MenuItemProps> = {
-  component: "li",
-};

package/src/components/Table/components/TableToolbar/components/ColumnGrouping/utils.ts

@@ -1,45 +1,38 @@
-import { Column, GroupingState, RowData, Table } from "@tanstack/react-table";
+import { Column, RowData } from "@tanstack/react-table";
+import { isStringHeaderColumn } from "../../../../common/typeGuards";
 
 /**
  * Retrieves the button label for the column grouping dropdown.
- * Currently, the grouping state supports grouping by a single column only.
- * @param groupingByColumnId - Map of column groupings by column ID.
- * @param groupingState - Grouping state.
+ * @param columns - Columns.
  * @returns button label.
  */
 export function getButtonLabel<T extends RowData>(
-  groupingByColumnId: Map<string, [string, Column<T>]>,
-  groupingState: GroupingState
+  columns: Column<T>[]
 ): string {
-  const grouping = groupingByColumnId.get(groupingState[0]);
-  if (!grouping) return "Group by";
-  return `Group by: ${grouping[0]}`;
+  const headers = columns
+    .filter(isColumnGrouped)
+    .filter(isStringHeaderColumn)
+    .map(mapGroupedHeader);
+  if (headers.length === 0) return "Group by";
+  return `Group by: ${headers.join(", ")}`;
 }
 
 /**
- * Retrieves a map of column groupings by column ID from the given table instance.
- * Columns that are visible, group-able with a `string` header are included and are keyed by
- * their column ID. The value is a tuple containing the column header and the column instance.
- * @param table - Table.
- * @returns map of column grouping by column id.
+ * Returns true if the column is grouped.
+ * @param column - Column.
+ * @returns true if the column is grouped.
  */
-export function getColumnGrouping<T extends RowData>(
-  table: Table<T>
-): Map<string, [string, Column<T>]> {
-  const groupingByColumnId = new Map<string, [string, Column<T>]>();
-  for (const column of table.getAllColumns()) {
-    const {
-      columnDef: { header },
-      getCanGroup,
-      getIsVisible,
-      id,
-    } = column;
-    if (!getCanGroup()) continue;
-    if (!getIsVisible()) continue;
-    // Currently, headers are configured as strings.
-    // Only include columns that have a string header (for now).
-    if (typeof header !== "string") continue;
-    groupingByColumnId.set(id, [header, column]);
-  }
-  return groupingByColumnId;
+function isColumnGrouped<T extends RowData>(column: Column<T>): boolean {
+  return column.getIsGrouped();
+}
+
+/**
+ * Maps a column to its header.
+ * @param column - Column.
+ * @returns header.
+ */
+function mapGroupedHeader<T extends RowData>(
+  column: Column<T> & { columnDef: { header: string } }
+): string {
+  return column.columnDef.header;
 }

package/src/components/Table/components/TableToolbar/components/ColumnVisibility/columnVisibility.styles.ts

@@ -0,0 +1,12 @@
+import styled from "@emotion/styled";
+import { DropdownMenu } from "../../../../../common/DropdownMenu/dropdownMenu";
+
+export const StyledDropdownMenu = styled(DropdownMenu)`
+  .MuiListItemButton-root {
+    gap: 8px;
+
+    &.Mui-disabled {
+      opacity: 1;
+    }
+  }
+`;