sevago-library 1.3.17 → 1.3.18

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sevago-library
 
+## 1.3.18
+
+### Patch Changes
+
+- feat: add support for grouped headers in table component
+
 ## 1.3.17
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -74687,23 +74687,11 @@ const buttonRootSx = {
   minWidth: 100,
   textTransform: "none",
   borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
-  width: "fit-content",
-  [TABLET_MEDIA]: {
-    minWidth: 120,
-    minHeight: 44,
-    px: 2.5,
-    py: 1,
-    "& .MuiButton-startIcon .material-symbols-rounded, & .MuiButton-endIcon .material-symbols-rounded": {
-      fontSize: 22
-    }
-  }
+  width: "fit-content"
 };
 const buttonContentSx = {
   ...TYPOGRAPHY.textSm.regular,
-  whiteSpace: "nowrap",
-  [TABLET_MEDIA]: {
-    ...TYPOGRAPHY.textMd.medium
-  }
+  whiteSpace: "nowrap"
 };
 const ButtonElement = ({
   content,
@@ -76275,21 +76263,31 @@ const DISABLED_DEFAULT = Object.keys(TableActions).reduce(
   },
   {}
 );
+const getSxArray = (sx) => {
+  if (!sx) return [];
+  return Array.isArray(sx) ? [...sx] : [sx];
+};
+const mergeSxProps = (...sxList) => {
+  return sxList.flatMap((sx) => getSxArray(sx));
+};
 const getStyleCell = (column, palette, disableRow) => {
-  return {
-    width: `${column.width}px !important`,
-    minWidth: `${column.width}px !important`,
-    maxWidth: `${column.width}px !important`,
-    padding: PADDING_GAP_ITEM,
-    borderRadius: "0 !important",
-    color: disableRow ? palette.divider : "none",
-    ...column.stickyCss ? {
-      position: "sticky",
-      backgroundColor: palette.background.default,
-      ...column.stickyCss
-    } : {},
-    ...column.sx ? column.sx : {}
-  };
+  return mergeSxProps(
+    {
+      width: `${column.width}px !important`,
+      minWidth: `${column.width}px !important`,
+      maxWidth: `${column.width}px !important`,
+      padding: PADDING_GAP_ITEM,
+      borderRadius: "0 !important",
+      color: disableRow ? palette.divider : "none",
+      ...column.stickyCss ? {
+        position: "sticky",
+        backgroundColor: palette.background.default,
+        ...column.stickyCss
+      } : {}
+    },
+    column.sx,
+    column.cellSx
+  );
 };
 const getStyleRow = (hasOnClick, palette, index, rowSx, indexLoadingRow) => {
   return {
@@ -76383,10 +76381,10 @@ function TableRowPart({
           material.TableCell,
           {
             align: column.align,
-            sx: {
-              ...getStyleCell(column, palette, disabled.DISABLED_ROW),
-              ...isFirstDataCol ? { pl: (theme) => `calc(${theme.spacing(1)} + ${level * 16}px)` } : {}
-            },
+            sx: mergeSxProps(
+              getStyleCell(column, palette, disabled.DISABLED_ROW),
+              isFirstDataCol ? { pl: (theme) => `calc(${theme.spacing(1)} + ${level * 16}px)` } : void 0
+            ),
             onClick: column.id === "actions" || column.id === "selectCheckbox" ? (e) => {
               e.stopPropagation();
             } : void 0,
@@ -76511,45 +76509,104 @@ const TreeToggleCell = ({
 const TableContainerPart = ({ children }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { overflowY: "auto", flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.TableContainer, { sx: { maxHeight: "100%", overflow: "auto" }, children }) });
 };
-const TableHeadPart = ({ columns }) => {
+const GROUPED_HEADER_ROW_HEIGHT = 44;
+const toHeaderCell = (column, rowSpan) => ({
+  id: column.id,
+  label: column.label,
+  width: column.width,
+  align: column.align,
+  alignHead: column.alignHead,
+  sx: mergeSxProps(column.sx, column.headSx),
+  stickyCss: column.stickyCss,
+  rowSpan
+});
+function TableHeadPart({ columns, headerGroups }) {
   const { palette } = material.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(material.TableHead, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: columns.map((column) => {
+  const headerRows = React.useMemo(() => {
+    var _a;
+    if (!(headerGroups == null ? void 0 : headerGroups.length)) return [columns.map((column) => toHeaderCell(column))];
+    const groupByColumnId = /* @__PURE__ */ new Map();
+    headerGroups.forEach((group) => {
+      group.columnIds.forEach((columnId) => {
+        groupByColumnId.set(columnId, group);
+      });
+    });
+    const topCells = [];
+    const bottomCells = [];
+    let columnIndex = 0;
+    while (columnIndex < columns.length) {
+      const column = columns[columnIndex];
+      const group = groupByColumnId.get(column.id);
+      if (!group) {
+        topCells.push(toHeaderCell(column, 2));
+        columnIndex += 1;
+        continue;
+      }
+      let colSpan = 1;
+      while (columnIndex + colSpan < columns.length && ((_a = groupByColumnId.get(columns[columnIndex + colSpan].id)) == null ? void 0 : _a.id) === group.id) {
+        colSpan += 1;
+      }
+      topCells.push({
+        id: `${group.id}-${columnIndex}`,
+        label: group.label,
+        alignHead: group.align ?? "center",
+        sx: group.sx,
+        colSpan
+      });
+      for (let subColumnIndex = 0; subColumnIndex < colSpan; subColumnIndex += 1) {
+        bottomCells.push(toHeaderCell(columns[columnIndex + subColumnIndex]));
+      }
+      columnIndex += colSpan;
+    }
+    if (!bottomCells.length) return [columns.map((column) => toHeaderCell(column))];
+    return [topCells, bottomCells];
+  }, [columns, headerGroups]);
+  const isGroupedHeader = headerRows.length > 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(material.TableHead, { children: headerRows.map((headerRow, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: headerRow.map((cell) => {
     var _a;
     return /* @__PURE__ */ jsxRuntime.jsx(
       material.TableCell,
       {
-        align: column.align,
-        sx: {
-          width: `${column.width}px !important`,
-          minWidth: `${column.width}px !important`,
-          maxWidth: `${column.width}px !important`,
-          fontWeight: 550,
-          padding: PADDING_GAP_ITEM,
-          borderRadius: "0 !important",
-          backgroundColor: "#F9FAFB",
-          verticalAlign: "top",
-          textAlign: column.alignHead ? column.alignHead : "center",
-          borderTop: BORDER_TABLE,
-          ...column.stickyCss ? {
-            ...column.stickyCss,
+        align: cell.align,
+        colSpan: cell.colSpan,
+        rowSpan: cell.rowSpan,
+        sx: mergeSxProps(
+          {
+            ...cell.width != null ? {
+              width: `${cell.width}px !important`,
+              minWidth: `${cell.width}px !important`,
+              maxWidth: `${cell.width}px !important`
+            } : {},
+            height: isGroupedHeader ? GROUPED_HEADER_ROW_HEIGHT : void 0,
+            fontWeight: 550,
+            padding: PADDING_GAP_ITEM,
+            borderRadius: "0 !important",
+            backgroundColor: "#F9FAFB",
+            verticalAlign: isGroupedHeader && cell.rowSpan ? "middle" : "top",
+            textAlign: cell.alignHead ? cell.alignHead : "center",
+            borderTop: rowIndex === 0 ? BORDER_TABLE : "none",
+            top: isGroupedHeader ? rowIndex * GROUPED_HEADER_ROW_HEIGHT : 0
+          },
+          cell.stickyCss ? {
+            ...cell.stickyCss,
             position: "sticky",
             backgroundColor: palette.background.paper,
             zIndex: 4,
-            borderRight: ((_a = column.stickyCss) == null ? void 0 : _a.left) != null ? BORDER_TABLE : ""
+            borderRight: ((_a = cell.stickyCss) == null ? void 0 : _a.left) != null ? BORDER_TABLE : ""
           } : {},
-          ...column.sx ? column.sx : {}
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", children: column.label })
+          cell.sx
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "subtitle1", children: cell.label })
       },
-      column.id
+      cell.id
     );
-  }) }) });
-};
+  }) }, rowIndex)) });
+}
 const TableBaseComponent = ({
   columns,
+  headerGroups,
   rows = [],
   loading = false,
-  indexLoadingRow,
   stickyHeader = true,
   tableSx,
   tableRef,
@@ -76577,7 +76634,7 @@ const TableBaseComponent = ({
         ...Array.isArray(tableSx) ? tableSx : [tableSx]
       ],
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TableHeadPart, { columns }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeadPart, { columns, headerGroups }),
         /* @__PURE__ */ jsxRuntime.jsx(material.TableBody, { children: loading ? /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { colSpan: columns.length, children: renderLoading() }) }) : rows.length ? rows.map((row, index) => /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: renderRow(row, index) }, index)) : /* @__PURE__ */ jsxRuntime.jsx(material.TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(material.TableCell, { colSpan: columns.length, children: renderEmpty() }) }) })
       ]
     }
@@ -76588,6 +76645,7 @@ function TableRendererComponent({
   loading = false,
   rows,
   columns: initialColumns,
+  headerGroups,
   indexLoadingRow,
   isStickyActions = false,
   rowSx = {},
@@ -76887,9 +76945,25 @@ function TableRendererComponent({
         render: (row, index) => /* @__PURE__ */ jsxRuntime.jsx(StackRowAlignJustCenter, { gap: 1, onClick: (e) => e.stopPropagation(), children: renderActionsContent(row, index) })
       });
     }
-    return updateColumns;
+    if (!(headerGroups == null ? void 0 : headerGroups.length)) return updateColumns;
+    const groupByColumnId = /* @__PURE__ */ new Map();
+    headerGroups.forEach((group) => {
+      group.columnIds.forEach((columnId) => {
+        groupByColumnId.set(columnId, group);
+      });
+    });
+    return updateColumns.map((column) => {
+      const group = groupByColumnId.get(column.id);
+      if (!group || !group.childrenHeadSx && !group.childrenCellSx) return column;
+      return {
+        ...column,
+        ...group.childrenHeadSx ? { headSx: mergeSxProps(group.childrenHeadSx, column.headSx) } : {},
+        ...group.childrenCellSx ? { cellSx: mergeSxProps(group.childrenCellSx, column.cellSx) } : {}
+      };
+    });
   }, [
     initialColumns,
+    headerGroups,
     enableTree,
     onSelectRows,
     lengthActions,
@@ -76944,6 +77018,7 @@ function TableRendererComponent({
     TableBaseComponent,
     {
       columns,
+      headerGroups,
       rows: visibleRows,
       loading,
       indexLoadingRow,
@@ -76968,7 +77043,6 @@ function TableRendererComponent({
 function RowCollapsePart({
   columns,
   row,
-  indexRow,
   collapse,
   collapseTableWidth,
   renderDefaultRow,
@@ -77104,6 +77178,10 @@ const tableArgTypes = {
     control: false,
     table: { type: { summary: "Column<R>[]" } }
   },
+  headerGroups: {
+    control: false,
+    table: { type: { summary: "TableHeaderGroup[]" } }
+  },
   rows: {
     control: false,
     table: { type: { summary: "R[]" } }
@@ -79213,8 +79291,10 @@ exports.getPickerSx = getPickerSx;
 exports.getPopperProps = getPopperProps;
 exports.getStyleCell = getStyleCell;
 exports.getStyleRow = getStyleRow;
+exports.getSxArray = getSxArray;
 exports.highlightText = highlightText;
 exports.highlightYellow = highlightYellow;
+exports.mergeSxProps = mergeSxProps;
 exports.numberUtil = number_util;
 exports.objectUtil = object_util;
 exports.otherUtil = other_util;