@majoo-ui/react 2.1.1 → 2.1.2

package/components/table/Table.esm.js

@@ -6,6 +6,15 @@ import 'core-js/modules/es.iterator.for-each.js';
 import 'core-js/modules/es.iterator.map.js';
 import 'core-js/modules/es.json.parse.js';
 import 'core-js/modules/es.json.stringify.js';
+import 'core-js/modules/es.map.get-or-insert.js';
+import 'core-js/modules/es.map.get-or-insert-computed.js';
+import 'core-js/modules/es.set.difference.v2.js';
+import 'core-js/modules/es.set.intersection.v2.js';
+import 'core-js/modules/es.set.is-disjoint-from.v2.js';
+import 'core-js/modules/es.set.is-subset-of.v2.js';
+import 'core-js/modules/es.set.is-superset-of.v2.js';
+import 'core-js/modules/es.set.symmetric-difference.v2.js';
+import 'core-js/modules/es.set.union.v2.js';
 import { __rest } from 'tslib';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
@@ -28,7 +37,7 @@ import useMediaQuery from '../../utils/useMediaQuery.esm.js';
 import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
 import { ContextMenuTrigger, ContextMenu, ContextMenuItem, ContextMenuSeparator } from '../contextMenu/ContextMenu.esm.js';
 import MobileTable from './MobileTable.esm.js';
-import { useSticky } from 'react-table-sticky';
+import { useSticky, getStickyValue, getMarginRight } from 'react-table-sticky';
 import { useTranslation } from 'react-i18next';
 import { useVirtual } from 'react-virtual';
 import { PlusPrimitive } from '@majoo-ui/icons';
@@ -380,6 +389,88 @@ const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
   }
   return {};
 };
+const resolveCellCss = cell => {
+  const {
+    cellCss
+  } = cell.column;
+  return typeof cellCss === 'function' ? cellCss(cell) : cellCss;
+};
+/**
+ * react-table-sticky only decorates header and body cells, so footer cells work out the same
+ * sticky offset themselves.
+ */
+const getStickyFooterProps = (column, flatHeaders) => {
+  const sticky = getStickyValue(column);
+  if (!sticky) return {};
+  const margin = sticky === 'left' ? column.totalLeft : getMarginRight(column.id, flatHeaders.filter(header => header.depth === column.depth));
+  return {
+    style: {
+      position: 'sticky',
+      zIndex: 3,
+      [sticky]: `${margin}px`
+    },
+    'data-sticky-td': true
+  };
+};
+/**
+ * Cells per header row. With `spanRows`, a column outside any group is drawn once across every
+ * header row instead of under the empty placeholder cells react-table puts above it.
+ */
+const buildHeaderRows = (headerGroups, spanRows) => {
+  if (!spanRows) {
+    return headerGroups.map(headerGroup => headerGroup.headers.map(column => ({
+      column,
+      rowSpan: 1
+    })));
+  }
+  const coveredIds = new Set();
+  headerGroups.forEach(headerGroup => headerGroup.headers.forEach(header => {
+    if (header.placeholderOf) coveredIds.add(header.placeholderOf.id);
+  }));
+  return headerGroups.map(headerGroup => headerGroup.headers.filter(header => !coveredIds.has(header.id)).map(header => {
+    let column = header;
+    let rowSpan = 1;
+    while (column.placeholderOf) {
+      column = column.placeholderOf;
+      rowSpan += 1;
+    }
+    return {
+      column,
+      rowSpan
+    };
+  }));
+};
+/**
+ * rowSpan of the body cells whose column sets `rowSpan`, looked up by column id then row id. The
+ * first row of a run of equal keys spans the run; the rows it covers get 0 and render no cell. A
+ * run never crosses an expanded row, whose sub rows sit in between.
+ */
+const getCellRowSpans = (rows, spanColumns) => {
+  const spans = new Map();
+  spanColumns.forEach(column => {
+    // Nested by column: joining ids into one string would let row `0` + column `1.x` collide with
+    // sub row `0.1` + column `x`.
+    const columnSpans = new Map();
+    spans.set(column.id, columnSpans);
+    let anchorId = null;
+    let anchorKey;
+    rows.forEach((row, index) => {
+      var _a;
+      if (!row) return;
+      const key = typeof column.rowSpan === 'function' ? column.rowSpan(row) : row.values[column.id];
+      const hasKey = key !== null && key !== undefined;
+      if (anchorId !== null && hasKey && key === anchorKey && !((_a = rows[index - 1]) === null || _a === void 0 ? void 0 : _a.isExpanded)) {
+        columnSpans.set(anchorId, columnSpans.get(anchorId) + 1);
+        columnSpans.set(row.id, 0);
+        return;
+      }
+      anchorId = hasKey ? row.id : null;
+      anchorKey = key;
+      columnSpans.set(row.id, 1);
+    });
+  });
+  return spans;
+};
 const formattingData = (rawData, rowGroup) => {
   if ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey) && !(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.isManuallyFormatted)) {
     const {
@@ -624,7 +715,11 @@ function Table({
   draggable = false,
   onDragEnd,
   isExpandableTree,
-  subRows = 'subRows'
+  subRows = 'subRows',
+  footerData,
+  initialSortBy,
+  disableSortRemove = false,
+  headerRowSpan = false
 }) {
   var _a, _b, _c, _d;
   const [openMenu, setOpen] = useState(false);
@@ -661,6 +756,11 @@ function Table({
         expanded: controlledExpanded
       });
     }
+    if (initialSortBy) {
+      Object.assign(initialState, {
+        sortBy: initialSortBy
+      });
+    }
     return Object.keys(initialState).length > 0 ? initialState : undefined;
   };
   const records = useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]);
@@ -686,6 +786,7 @@ function Table({
     defaultCanSort: true,
     pageCount: totalPage || Math.ceil(totalData / limit),
     autoResetSortBy: false,
+    disableSortRemove,
     autoResetExpanded,
     onExpandedChange,
     autoResetPage: false,
@@ -697,6 +798,7 @@ function Table({
     getTableProps,
     getTableBodyProps,
     headerGroups,
+    flatHeaders,
     visibleColumns,
     prepareRow,
     rows,
@@ -924,6 +1026,38 @@ function Table({
       }))]
     });
   };
+  const renderTableFoot = () => {
+    if (!(footerData === null || footerData === void 0 ? void 0 : footerData.length)) return null;
+    let footerColumns = visibleColumns.filter(column => !column.isSubRow);
+    if (filteredHeader.length > 0 || filterHeader.length > 0) {
+      footerColumns = footerColumns.filter(column => filteredHeader.includes(column.id) || filterHeader.includes(column.id));
+    }
+    return jsx(TableFoot, {
+      css: {
+        zIndex: '$docked'
+      },
+      children: footerData.map((footerRow, footerRowIndex) => {
+        var _a;
+        return jsx(TableFootRow, {
+          children: footerColumns.map(column => jsx(TableCell, Object.assign({}, getStickyFooterProps(column, flatHeaders), {
+            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+              padding: '20px 8px',
+              fontWeight: '600',
+              verticalAlign: cellAlign
+            }), stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.footerCss),
+            children: column.render('Footer', {
+              footerRow,
+              footerRowIndex,
+              value: column.accessor ? column.accessor(footerRow, footerRowIndex, {
+                subRows: [],
+                depth: 0
+              }) : undefined
+            })
+          }), column.id))
+        }, (_a = footerRow[keyId]) !== null && _a !== void 0 ? _a : footerRowIndex);
+      })
+    });
+  };
   const handleRowClick = (row, i) => {
     var _a, _b, _c, _d;
     let clickable = false;
@@ -1026,6 +1160,10 @@ function Table({
     const tableData = isExpandableTree ? rows : page;
     return virtualized ? isInfiniteScroll ? virtualRows : tableData : tableData;
   }, [virtualized, isExpandableTree, isInfiniteScroll, rows, page, virtualRows]);
+  const rowSpanColumns = useMemo(() => visibleColumns.filter(column => column.rowSpan), [visibleColumns]);
+  // Row groups interleave decorator rows and dragging reorders rows, so neither merges cells.
+  // Bail out before touching the rows: virtualized tables recompute this on every scroll.
+  const cellRowSpans = useMemo(() => rowGroup || draggable || !rowSpanColumns.length ? null : getCellRowSpans(tableRowData.map(dataRow => virtualized && isInfiniteScroll ? page === null || page === void 0 ? void 0 : page[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow), rowSpanColumns), [rowGroup, draggable, rowSpanColumns, tableRowData, virtualized, isInfiniteScroll, page]);
   const onSortEnd = ({
     oldIndex,
     newIndex
@@ -1088,13 +1226,20 @@ function Table({
                   hiddenHeader: hideHeader,
                   css: headerCss,
                   isInfiniteScroll: isInfiniteScroll,
-                  children: headerGroups.map(headerGroup => {
-                    let visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+                  children: buildHeaderRows(headerGroups, headerRowSpan).map((headerCells, headerRowIndex) => {
+                    let visibleHeaders = headerCells.filter(({
+                      column
+                    }) => !column.isSubRow);
                     if (filteredHeader.length > 0 || filterHeader.length > 0) {
-                      visibleHeaders = visibleHeaders.filter(item => filteredHeader.includes(item.id) || filterHeader.includes(item.id));
+                      visibleHeaders = visibleHeaders.filter(({
+                        column: item
+                      }) => filteredHeader.includes(item.id) || filterHeader.includes(item.id));
                     }
-                    return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
-                      children: visibleHeaders.map((column, index) => {
+                    return jsx(TableHeadRow, Object.assign({}, headerGroups[headerRowIndex].getHeaderGroupProps(), {
+                      children: visibleHeaders.map(({
+                        column,
+                        rowSpan
+                      }, index) => {
                         const headerRender = column.render('Header');
                         return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
                           title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
@@ -1107,6 +1252,7 @@ function Table({
                             minWidth: column.colMinWidth
                           }
                         }]), {
+                          rowSpan: rowSpan > 1 ? rowSpan : undefined,
                           css: Object.assign(Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
                             position: 'sticky',
                             zIndex: column.sticky ? '5 !important' : 3,
@@ -1174,13 +1320,13 @@ function Table({
                           const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
                           const exceptionId = (_c = [].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
                           return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
                               padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
                               verticalAlign: cell.column.accessor ? cellAlign : 'center',
                               cursor: onRowClick ? 'pointer' : 'unset'
                             }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
                               paddingRight: index + 1 === _row.length ? 30 : null
-                            }),
+                            }), resolveCellCss(cell)),
                             onClick: () => {
                               if (!exceptionId) {
                                 handleRowClick(row, i);
@@ -1289,21 +1435,24 @@ function Table({
                           css: customStyle
                         }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
                           children: row.cells.filter(cell => filteredHeader.length > 0 || filterHeader.length > 0 ? filteredHeader.includes(cell.column.id) || filterHeader.includes(cell.column.id) : cell).filter(cell => !cell.column.isSubRow).map((cell, index, _row) => {
-                            var _a, _b, _c;
-                            let visibleHeaders = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _a === void 0 ? void 0 : _a.headers.filter(column => !column.isSubRow);
+                            var _a, _b, _c, _d;
+                            const cellRowSpan = (_a = cellRowSpans === null || cellRowSpans === void 0 ? void 0 : cellRowSpans.get(cell.column.id)) === null || _a === void 0 ? void 0 : _a.get(row.id);
+                            if (cellRowSpan === 0) return null;
+                            let visibleHeaders = (_b = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _b === void 0 ? void 0 : _b.headers.filter(column => !column.isSubRow);
                             if (filterHeader.length > 0) {
                               visibleHeaders = visibleHeaders.filter(item => filterHeader.includes(item.id));
                             }
-                            const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
-                            const exceptionId = (_c = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
+                            const collId = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id;
+                            const exceptionId = (_d = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _d === void 0 ? void 0 : _d.includes(collId);
                             return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                              rowSpan: cellRowSpan > 1 ? cellRowSpan : undefined,
+                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
                                 padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
                                 verticalAlign: cell.column.accessor ? cellAlign : 'center',
                                 cursor: onRowClick ? 'pointer' : 'unset'
                               }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
                                 paddingRight: index + 1 === _row.length ? 30 : null
-                              }),
+                              }), resolveCellCss(cell)),
                               onClick: () => {
                                 if (!exceptionId) {
                                   handleRowClick(row, i);
@@ -1385,7 +1534,7 @@ function Table({
                       }
                     })
                   })]
-                }))]
+                })), renderTableFoot()]
               }))
             }), renderContextMenu()]
           })

package/index.esm.css

@@ -1,3 +1,7 @@
+.recharts-pie-sector {
+  outline: none;
+}
+
 .rdw-option-wrapper {
   padding: 5px;
   min-width: 25px;
@@ -1045,10 +1049,6 @@
   counter-reset: ol4;
 }
 
-.recharts-pie-sector {
-  outline: none;
-}
-
 .ReactCrop {
   position: relative;
   display: inline-block;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "main": "./index.esm.js",
   "sideEffects": [
     "*.css",