@databiosphere/findable-ui 33.0.0 → 34.0.0

package/src/components/Detail/components/Table/components/TableBody/tableBody.tsx

@@ -1,5 +1,5 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
@@ -8,21 +8,32 @@ import { TableRows } from "../TableRows/tableRows";
 
 export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
+  /**
+   * Optional override for the rows rendered by <TableBody>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
 export const TableBody = <T extends RowData>({
   rowDirection,
+  rows,
   tableInstance,
   tableView,
 }: TableBodyProps<T>): JSX.Element => {
   return (
     <MTableBody>
       {rowDirection === ROW_DIRECTION.DEFAULT ? (
-        <TableRows tableInstance={tableInstance} tableView={tableView} />
+        <TableRows
+          rows={rows}
+          tableInstance={tableInstance}
+          tableView={tableView}
+        />
       ) : (
-        <CollapsableRows tableInstance={tableInstance} />
+        <CollapsableRows rows={rows} tableInstance={tableInstance} />
       )}
     </MTableBody>
   );

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,4 +1,4 @@
-import { RowData, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
@@ -6,10 +6,17 @@ import { TableRow } from "../../../../../../../Table/components/TableRow/tableRo
 import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
+  /**
+   * Optional override for the rows rendered by <CollapsableRows>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
 }
 
 export const CollapsableRows = <T extends RowData>({
+  rows: leafOrSubRows,
   tableInstance,
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
@@ -17,7 +24,7 @@ export const CollapsableRows = <T extends RowData>({
   useCollapsableRows(tableInstance);
   return (
     <Fragment>
-      {rows.map((row) => {
+      {(leafOrSubRows || rows).map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
           <TableRow key={row.id} isPreview={row.getIsPreview()}>

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,5 +1,5 @@
 import { TableCell } from "@mui/material";
-import { flexRender, RowData, Table } from "@tanstack/react-table";
+import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import {
   getTableCellAlign,
@@ -9,11 +9,18 @@ import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styl
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T extends RowData> {
+  /**
+   * Optional override for the rows rendered by <TableRows>.
+   * - Omit to show the table’s full leaf-level row model.
+   * - Pass `group.subRows` (or any other subset) to display a “mini-table” for a single group e.g. the rows that belong to one Data-Dictionary entity.
+   */
+  rows?: Row<T>[];
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
 export const TableRows = <T extends RowData>({
+  rows: leafOrSubRows,
   tableInstance,
   tableView,
 }: TableRowsProps<T>): JSX.Element => {
@@ -23,7 +30,7 @@ export const TableRows = <T extends RowData>({
   const { size: tableCellSize = "medium" } = tableCell || {};
   return (
     <Fragment>
-      {rows.map((row) => {
+      {(leafOrSubRows || rows).map((row) => {
         return (
           <TableRow
             key={row.id}

package/src/components/Filter/components/FilterList/filterList.styles.ts

@@ -1,7 +1,38 @@
+import { css } from "@emotion/react";
 import styled from "@emotion/styled";
-import { List as MList } from "@mui/material";
+import {
+  listItemButtonClasses,
+  listItemTextClasses,
+  List as MList,
+} from "@mui/material";
+import { PALETTE } from "../../../../styles/common/constants/palette";
 import { LIST_MARGIN } from "../../common/constants";
 
+export const MuiListItemButtonRoot = css`
+  .${listItemButtonClasses.root} {
+    gap: 8px;
+    padding: 10px 16px;
+
+    &.Mui-disabled {
+      color: ${PALETTE.SMOKE_MAIN};
+      opacity: 1;
+    }
+  }
+`;
+
+export const MuiListItemTextRoot = css`
+  .${listItemTextClasses.root} {
+    align-items: center;
+    display: grid;
+    gap: 8px;
+    grid-template-columns: 1fr auto;
+
+    > span {
+      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
+    }
+  }
+`;
+
 export const List = styled(MList)`
   && {
     overflow-wrap: break-word;
@@ -20,20 +51,8 @@ export const List = styled(MList)`
   }
 
   // List item
-  .MuiListItemButton-root {
-    gap: 8px;
-    padding: 10px 16px;
-  }
+  ${MuiListItemButtonRoot}
 
   // List item text
-  .MuiListItemText-root {
-    align-items: center;
-    display: grid;
-    gap: 8px;
-    grid-template-columns: 1fr auto;
-
-    > span {
-      min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
-    }
-  }
+  ${MuiListItemTextRoot}
 `;

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

@@ -84,6 +84,22 @@ export function buildCategoryViews<T extends RowData>(
   return categoryViews;
 }
 
+/**
+ * Returns the header for a column as a string.
+ * @param column - Column.
+ * @returns column header.
+ */
+export function getColumnHeader<T extends RowData>(column: Column<T>): string {
+  const { columnDef, id = "" } = column;
+  const { header, meta } = columnDef;
+
+  // Return header if it is a string.
+  if (typeof header === "string") return header;
+
+  // Return header from meta or id.
+  return meta?.header || id;
+}
+
 /**
  * Format data to TSV string.
  * @param data - Table data.

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.styles.ts

@@ -0,0 +1,23 @@
+import styled from "@emotion/styled";
+import { Menu, menuClasses, paperClasses } from "@mui/material";
+import { MAX_LIST_HEIGHT_PX } from "../../../../Filter/common/constants";
+import {
+  MuiListItemButtonRoot,
+  MuiListItemTextRoot,
+} from "../../../../Filter/components/FilterList/filterList.styles";
+
+export const StyledMenu = styled(Menu)`
+  .${paperClasses.root} {
+    margin: 4px 0;
+    width: 288px;
+
+    .${menuClasses.list} {
+      max-height: ${MAX_LIST_HEIGHT_PX}px;
+      overflow-wrap: break-word;
+
+      ${MuiListItemButtonRoot}
+
+      ${MuiListItemTextRoot}
+    }
+  }
+`;

package/src/components/Table/components/TableFeatures/ColumnFilter/columnFilter.tsx

@@ -0,0 +1,98 @@
+import {
+  Checkbox,
+  ListItemButton,
+  ListItemText,
+  Button as MButton,
+  Typography,
+} from "@mui/material";
+import { RowData } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { SVG_ICON_PROPS } from "../../../../../styles/common/mui/svgIcon";
+import { TYPOGRAPHY_PROPS } from "../../../../../styles/common/mui/typography";
+import { CheckedIcon } from "../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
+import { UncheckedIcon } from "../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
+import { DropDownIcon } from "../../../../common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { useMenu } from "../../../../common/Menu/hooks/useMenu";
+import { getColumnHeader } from "../../../common/utils";
+import { getSortedFacetedValues } from "../../../featureOptions/facetedColumn/utils";
+import { StyledMenu } from "./columnFilter.styles";
+import { MENU_PROPS } from "./constants";
+import { ColumnFilterProps } from "./types";
+import { updater } from "./utils";
+
+/**
+ *  Column filter component with supported filter functions:
+ *  - `arrIncludesSome`
+ */
+
+export const ColumnFilter = <T extends RowData>({
+  Button = MButton,
+  className,
+  column,
+  ...props /* MuiMenuProps */
+}: ColumnFilterProps<T>): JSX.Element => {
+  const { anchorEl, onClose, onOpen, open } = useMenu();
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+  const sortedValues = getSortedFacetedValues(facetedUniqueValues);
+  const filterValue = (column.getFilterValue() || []) as unknown[];
+  return (
+    <Fragment>
+      <Button
+        key={column.id}
+        endIcon={<DropDownIcon color={SVG_ICON_PROPS.COLOR.INK_LIGHT} />}
+        onClick={onOpen}
+      >
+        {getColumnHeader(column)}
+      </Button>
+      <StyledMenu
+        {...MENU_PROPS}
+        {...props}
+        className={className}
+        anchorEl={anchorEl}
+        onClose={onClose}
+        open={open}
+      >
+        {sortedValues.map(([value, occurrence]) => (
+          <ListItemButton
+            key={String(value)}
+            selected={filterValue.includes(value)}
+            onClick={() => column.setFilterValue(updater(value))}
+          >
+            <Checkbox
+              checked={filterValue.includes(value)}
+              checkedIcon={<CheckedIcon />}
+              icon={<UncheckedIcon />}
+            />
+            <ListItemText
+              disableTypography
+              primary={<span>{String(value)}</span>}
+              secondary={
+                <Typography
+                  color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
+                  variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_SMALL_400}
+                >
+                  {occurrence}
+                </Typography>
+              }
+            />
+          </ListItemButton>
+        ))}
+        <ListItemButton
+          disabled={!column.getIsFiltered()}
+          onClick={() => column.setFilterValue(undefined)}
+        >
+          <Typography
+            color={
+              column.getIsFiltered()
+                ? TYPOGRAPHY_PROPS.COLOR.PRIMARY
+                : TYPOGRAPHY_PROPS.COLOR.INHERIT
+            }
+            variant={TYPOGRAPHY_PROPS.VARIANT.TEXT_BODY_500}
+          >
+            Clear All
+          </Typography>
+        </ListItemButton>
+      </StyledMenu>
+    </Fragment>
+  );
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/constants.ts

@@ -0,0 +1,16 @@
+import { MenuProps } from "@mui/material";
+
+export const MENU_PROPS: Omit<MenuProps, "anchorEl" | "onClose" | "open"> = {
+  anchorOrigin: {
+    horizontal: "right",
+    vertical: "bottom",
+  },
+  marginThreshold: 8,
+  slotProps: {
+    paper: { variant: "menu" },
+  },
+  transformOrigin: {
+    horizontal: "right",
+    vertical: "top",
+  },
+};

package/src/components/Table/components/TableFeatures/ColumnFilter/types.ts

@@ -0,0 +1,10 @@
+import { Button, MenuProps } from "@mui/material";
+import { Column, RowData } from "@tanstack/react-table";
+import { BaseComponentProps } from "../../../../types";
+
+export interface ColumnFilterProps<T extends RowData>
+  extends BaseComponentProps,
+    Omit<MenuProps, "anchorEl" | "onClose" | "open"> {
+  Button?: typeof Button;
+  column: Column<T>;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Returns an updater function for column filter.
+ * @param value - Value.
+ * @returns An updater function that returns the new filter value.
+ */
+export function updater(
+  value: unknown
+): (old: unknown[] | undefined) => unknown[] | undefined {
+  return (old: unknown[] | undefined) => {
+    // If no old value, return new value.
+    if (!old) return [value];
+
+    // If value already exists, remove it.
+    if (old.includes(value)) {
+      // Filter out the value.
+      const next = old.filter((v) => v !== value);
+
+      // If no values remain, return undefined.
+      if (next.length === 0) return undefined;
+
+      return next;
+    }
+
+    // Otherwise, add the value.
+    return [...old, value];
+  };
+}

package/src/components/Table/featureOptions/facetedColumn/utils.ts

@@ -0,0 +1,14 @@
+import { COLLATOR_CASE_INSENSITIVE } from "../../../../common/constants";
+
+/**
+ * Sorts Map entries by key.
+ * @param facetedValues - Map of faceted values.
+ * @returns Sorted array of [key, value] entries.
+ */
+export function getSortedFacetedValues(
+  facetedValues: Map<unknown, number>
+): [unknown, number][] {
+  return [...facetedValues].sort((a, b) =>
+    COLLATOR_CASE_INSENSITIVE.compare(String(a), String(b))
+  );
+}

package/src/components/common/ButtonGroup/constants.ts

@@ -0,0 +1,13 @@
+import { ButtonGroupProps } from "@mui/material";
+import { BUTTON_GROUP_PROPS as MUI_BUTTON_GROUP_PROPS } from "../../../styles/common/mui/buttonGroup";
+
+export const BUTTON_GROUP_PROPS: Record<string, Partial<ButtonGroupProps>> = {
+  PRIMARY_CONTAINED: {
+    color: MUI_BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+    variant: MUI_BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+  },
+  SECONDARY_OUTLINED: {
+    color: MUI_BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+    variant: MUI_BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+  },
+};

package/src/mocks/@storybook/addon-actions.ts

@@ -0,0 +1,10 @@
+import { jest } from "@jest/globals";
+
+/**
+ * Mock for Storybook's @storybook/addon-actions function.
+ * The mock keeps the same function signature as the real Storybook action,
+ * does not trigger any Storybook logic, and simply returns a Jest mock function
+ * for use in tests.
+ * @returns A Jest mock function.
+ */
+export const action = (): jest.Mock => jest.fn();

package/src/styles/common/mui/buttonGroup.ts

@@ -0,0 +1,46 @@
+import { buttonGroupClasses, ButtonGroupProps } from "@mui/material";
+
+type ButtonGroupPropsOptions = {
+  CLASSES: typeof CLASSES;
+  COLOR: typeof COLOR;
+  SIZE: typeof SIZE;
+  VARIANT: typeof VARIANT;
+};
+
+const CLASSES: Record<string, ButtonGroupProps["classes"]> = {
+  COLOR_PRIMARY: buttonGroupClasses.colorPrimary,
+  COLOR_SECONDARY: buttonGroupClasses.colorSecondary,
+  CONTAINED: buttonGroupClasses.contained,
+  GROUPED: buttonGroupClasses.grouped,
+  OUTLINED: buttonGroupClasses.outlined,
+  ROOT: buttonGroupClasses.root,
+};
+
+const COLOR: Record<string, ButtonGroupProps["color"]> = {
+  ERROR: "error",
+  INFO: "info",
+  INHERIT: "inherit",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  SUCCESS: "success",
+  WARNING: "warning",
+};
+
+const SIZE: Record<string, ButtonGroupProps["size"]> = {
+  LARGE: "large",
+  MEDIUM: "medium",
+  SMALL: "small",
+};
+
+const VARIANT: Record<string, ButtonGroupProps["variant"]> = {
+  CONTAINED: "contained",
+  OUTLINED: "outlined",
+  TEXT: "text",
+};
+
+export const BUTTON_GROUP_PROPS: ButtonGroupPropsOptions = {
+  CLASSES,
+  COLOR,
+  SIZE,
+  VARIANT,
+};

package/src/styles/common/mui/typography.ts

@@ -10,12 +10,14 @@ const COLOR: Record<string, TypographyOwnProps["color"]> = {
   INHERIT: "inherit",
   INK_LIGHT: "ink.light",
   INK_MAIN: "ink.main",
+  PRIMARY: "primary",
 };
 
 const VARIANT: Record<string, TypographyOwnProps["variant"]> = {
   INHERIT: "inherit",
   TEXT_BODY_400: "text-body-400",
   TEXT_BODY_400_2_LINES: "text-body-400-2lines",
+  TEXT_BODY_500: "text-body-500",
   TEXT_BODY_SMALL_400: "text-body-small-400",
   TEXT_HEADING_LARGE: "text-heading-large",
   TEXT_HEADING_SMALL: "text-heading-small",

package/src/tests/mui/constants.ts

@@ -1,5 +1,6 @@
 export const MUI_CLASSES = {
   ACTIVE: "Mui-active",
   COMPLETED: "Mui-completed",
+  DISABLED: "Mui-disabled",
   SELECTED: "Mui-selected",
 };

package/src/tests/utils.ts

@@ -32,6 +32,15 @@ export function getStartsWithRegex(text: string): RegExp {
   return new RegExp(`^${escapeRegExp(text)}`);
 }
 
+/**
+ * Retrieves an element by its role.
+ * @param role - The role of the element.
+ * @returns The element.
+ */
+export function getRole<T extends HTMLElement = HTMLElement>(role: string): T {
+  return screen.getByRole(role);
+}
+
 /**
  * Retrieves an element by its text content.
  * @param text - The text content of the element.

package/src/theme/common/components.ts

@@ -3,6 +3,7 @@ import { DropDownIcon } from "../../components/common/Form/components/Select/com
 import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
 import { PALETTE } from "../../styles/common/constants/palette";
 import { SHADOWS } from "../../styles/common/constants/shadows";
+import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import {
@@ -200,6 +201,22 @@ export const MuiButton = (theme: Theme): Components["MuiButton"] => {
       },
       endIcon: {
         margin: 0,
+        variants: [
+          {
+            props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+            style: {
+              marginLeft: -6,
+              marginRight: -6,
+            },
+          },
+          {
+            props: { size: BUTTON_PROPS.SIZE.SMALL },
+            style: {
+              marginLeft: -6,
+              marginRight: -6,
+            },
+          },
+        ],
       },
       outlinedSecondary: {
         backgroundColor: "transparent",
@@ -317,38 +334,6 @@ export const MuiButtonBase = (theme: Theme): Components["MuiButtonBase"] => {
   };
 };
 
-/**
- * MuiButtonGroup Component
- * @param theme - Theme.
- * @returns MuiButtonGroup component theme styles.
- */
-export const MuiButtonGroup = (theme: Theme): Components["MuiButtonGroup"] => {
-  return {
-    defaultProps: {
-      disableElevation: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      grouped: {
-        minWidth: 0,
-        padding: "6px 8px",
-      },
-      groupedContainedPrimary: {
-        borderColor: theme.palette.primary.dark,
-        boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "&:hover": {
-          boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-        },
-        // eslint-disable-next-line sort-keys -- disabling key order for readability
-        "&:active": {
-          boxShadow: "none",
-        },
-      },
-    },
-  };
-};
-
 /**
  * MuiCard Component
  */

package/src/theme/components/index.ts

@@ -1,3 +1,4 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiButtonGroup } from "./muiButtonGroup";
 export { MuiTableCell } from "./muiTableCell";

package/src/theme/components/muiButtonGroup.ts

@@ -0,0 +1,79 @@
+import { Components } from "@mui/material";
+import { COLOR_MIXES } from "../../styles/common/constants/colorMixes";
+import { PALETTE } from "../../styles/common/constants/palette";
+import { BUTTON_GROUP_PROPS } from "../../styles/common/mui/buttonGroup";
+
+const SELECTORS = {
+  GROUPED: `.${BUTTON_GROUP_PROPS.CLASSES.GROUPED}`,
+};
+
+export const MuiButtonGroup: Components["MuiButtonGroup"] = {
+  defaultProps: {
+    disableElevation: true,
+    disableRipple: true,
+  },
+  styleOverrides: {
+    root: {
+      variants: [
+        /* PRIMARY CONTAINED */
+        {
+          props: {
+            color: BUTTON_GROUP_PROPS.COLOR.PRIMARY,
+            variant: BUTTON_GROUP_PROPS.VARIANT.CONTAINED,
+          },
+          style: {
+            [SELECTORS.GROUPED]: {
+              borderColor: PALETTE.PRIMARY_DARK,
+              boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+              minWidth: 0,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:hover": {
+                boxShadow: `0 1px 0 0 ${PALETTE.PRIMARY_DARK}`,
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:active": {
+                boxShadow: "none",
+              },
+            },
+          },
+        },
+        /* SECONDARY OUTLINED */
+        {
+          props: {
+            color: BUTTON_GROUP_PROPS.COLOR.SECONDARY,
+            variant: BUTTON_GROUP_PROPS.VARIANT.OUTLINED,
+          },
+          style: {
+            [SELECTORS.GROUPED]: {
+              backgroundColor: PALETTE.COMMON_WHITE,
+              boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+              color: PALETTE.INK_MAIN,
+              minWidth: 0,
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:hover": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+              },
+              // eslint-disable-next-line sort-keys -- disabling key order for readability
+              "&:active": {
+                backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+              },
+            },
+          },
+        },
+        /* SMALL */
+        {
+          props: {
+            size: BUTTON_GROUP_PROPS.SIZE.SMALL,
+          },
+          style: {
+            [SELECTORS.GROUPED]: {
+              padding: "6px 8px",
+            },
+          },
+        },
+      ],
+    },
+  },
+};

package/src/theme/theme.ts

@@ -80,7 +80,7 @@ export function createAppTheme(customOptions: ThemeOptions = {}): Theme {
     MuiBreadcrumbs: C.MuiBreadcrumbs(theme),
     MuiButton: C.MuiButton(theme),
     MuiButtonBase: C.MuiButtonBase(theme),
-    MuiButtonGroup: C.MuiButtonGroup(theme),
+    MuiButtonGroup: M.MuiButtonGroup,
     MuiCard: C.MuiCard,
     MuiCheckbox: C.MuiCheckbox(theme),
     MuiChip: C.MuiChip(theme),