@prt-ts/fluent-react-table-v2 9.46.8-build.7.0 → 9.46.8-build.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/index.cjs.js +23 -8
  2. package/index.esm.js +23 -8
  3. package/package.json +1 -1
  4. package/src/lib/index.d.ts +2 -1
  5. package/src/lib/types/TableProps.d.ts +5 -0
package/index.cjs.js CHANGED
@@ -1045,6 +1045,10 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
1045
1045
  const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
1046
1046
  const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
1047
1047
  const TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
1048
+ const TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
1049
+ const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
1050
+ const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
1051
+ const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
1048
1052
  const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1049
1053
  const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1050
1054
 
@@ -1293,7 +1297,7 @@ function tableReducer(state, action) {
1293
1297
  }
1294
1298
 
1295
1299
  const useGridContainer = (props, ref) => {
1296
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1300
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1297
1301
  const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
1298
1302
  const [drawerState, dispatch] = React__namespace.useReducer(tableReducer, {
1299
1303
  isFilterDrawerOpen: false,
@@ -1386,6 +1390,7 @@ const useGridContainer = (props, ref) => {
1386
1390
  meta: {
1387
1391
  pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
1388
1392
  rowSelectionMode: props.rowSelectionMode,
1393
+ isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
1389
1394
  tableHeight: props.tableHeight || "650px",
1390
1395
  updateData: onUpdateData,
1391
1396
  onTableViewDelete: props.onTableViewDelete,
@@ -1532,7 +1537,7 @@ const useTableHeaderStyles = reactComponents.makeStyles({
1532
1537
  tHeadRow: {
1533
1538
  backgroundColor: reactComponents.tokens.colorNeutralCardBackgroundSelected,
1534
1539
  },
1535
- tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: reactComponents.tokens.fontSizeBase300, fontWeight: reactComponents.tokens.fontWeightBold, minWidth: '1rem' }, reactComponents.shorthands.padding('2px', '4px')),
1540
+ tHeadCell: Object.assign({ zIndex: 9, position: 'relative', fontSize: reactComponents.tokens.fontSizeBase300, fontWeight: reactComponents.tokens.fontWeightBold, minWidth: '1rem' }, reactComponents.shorthands.padding('2px', '4px')),
1536
1541
  tHeadNonLeafCell: Object.assign({}, reactComponents.shorthands.borderBottom(0)),
1537
1542
  tHeadNonLeafCellFakeBorder: Object.assign({ width: '100%', height: '1px', position: "sticky", bottom: 0 }, reactComponents.shorthands.borderBottom('1px', 'solid', reactComponents.tokens.colorBrandBackgroundInverted)),
1538
1543
  tHeadCellDraggable: {
@@ -1566,7 +1571,7 @@ const getHeaderCellPinningStyles = (column, isDragging, additionalStyles) => {
1566
1571
  ? '-4px 0 4px -4px gray inset'
1567
1572
  : isFirstRightPinnedColumn
1568
1573
  ? '4px 0 4px -4px gray inset'
1569
- : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, opacity: isDragging ? 0.8 : (isPinned ? 0.95 : 1), position: isPinned ? 'sticky' : 'relative', zIndex: isDragging ? 100 : (isPinned ? 99 : 1), backgroundColor: reactComponents.tokens.colorNeutralCardBackgroundSelected, whiteSpace: 'wrap' }, additionalStyles);
1574
+ : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, opacity: isDragging ? 0.8 : (isPinned ? 0.95 : 1), position: isPinned ? 'sticky' : 'relative', zIndex: isDragging ? 10 : (isPinned ? 9 : 1), backgroundColor: reactComponents.tokens.colorNeutralCardBackgroundSelected, whiteSpace: 'wrap' }, additionalStyles);
1570
1575
  return styles;
1571
1576
  };
1572
1577
  const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
@@ -1577,7 +1582,7 @@ const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
1577
1582
  ? '-4px 0 4px -4px gray inset'
1578
1583
  : isFirstRightPinnedColumn
1579
1584
  ? '4px 0 4px -4px gray inset'
1580
- : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : 'relative', opacity: isDragging ? 0.85 : (isPinned ? 0.95 : 1), zIndex: isDragging ? 100 : (isPinned ? 1 : 0) }, additionalStyles);
1585
+ : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : 'relative', opacity: isDragging ? 0.85 : (isPinned ? 0.95 : 1), zIndex: isDragging ? 2 : (isPinned ? 1 : 0) }, additionalStyles);
1581
1586
  return styles;
1582
1587
  };
1583
1588
 
@@ -1586,6 +1591,8 @@ const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1586
1591
  const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1587
1592
  const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1588
1593
  const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
1594
+ const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
1595
+ const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
1589
1596
  function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1590
1597
  var _a;
1591
1598
  const { column } = header;
@@ -1647,7 +1654,15 @@ function HeaderMenu(props) {
1647
1654
  var _a;
1648
1655
  const isControlKeySelected = e.ctrlKey;
1649
1656
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1650
- }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1657
+ }, icon: jsxRuntime.jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'sort-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanGroup(), children: jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [!header.column.getIsGrouped() && (jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
1658
+ header.column.getToggleGroupingHandler()();
1659
+ const { isAutoExpandOnGroup } = table.options.meta;
1660
+ if (isAutoExpandOnGroup) {
1661
+ table.toggleAllRowsExpanded(true);
1662
+ }
1663
+ }, icon: jsxRuntime.jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), jsxRuntime.jsxs(reactControlFlow.Show, { when: header.column.getIsGrouped(), children: [jsxRuntime.jsxs(reactComponents.MenuItem, { onClick: () => {
1664
+ header.column.getToggleGroupingHandler()();
1665
+ }, icon: jsxRuntime.jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => table.toggleAllRowsExpanded(), icon: table.getIsAllRowsExpanded() ? jsxRuntime.jsx(GroupCollapseIcon, {}) : jsxRuntime.jsx(GroupExpandIcon, {}), children: jsxRuntime.jsx(reactControlFlow.Show, { when: table.getIsAllRowsExpanded(), fallback: jsxRuntime.jsx(jsxRuntime.Fragment, { children: "Expand All Groups" }), children: "Collapse All Groups" }) })] }), jsxRuntime.jsx(reactComponents.MenuDivider, {})] }, 'grouping-group') }), jsxRuntime.jsx(reactControlFlow.Show, { when: header.column.getCanPin(), children: jsxRuntime.jsxs(reactComponents.Menu, { children: [jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: jsxRuntime.jsxs(reactComponents.MenuItem, { icon: jsxRuntime.jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsxRuntime.jsx(reactComponents.MenuPopover, { children: jsxRuntime.jsxs(reactComponents.MenuList, { children: [jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
1651
1666
  var _a;
1652
1667
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1653
1668
  }, icon: jsxRuntime.jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), jsxRuntime.jsx(reactComponents.MenuItem, { onClick: () => {
@@ -1857,20 +1872,20 @@ function TableBody(props) {
1857
1872
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(reactControlFlow.Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsxRuntime.jsx("thead", { style: {
1858
1873
  position: "sticky",
1859
1874
  top: 0,
1860
- zIndex: 99
1875
+ zIndex: 9
1861
1876
  }, children: jsxRuntime.jsx(reactControlFlow.For, { each: topRows, children: (row, index) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxRuntime.jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingTop}px` } }) })), jsxRuntime.jsx(reactControlFlow.For, { each: virtualRows || [], children: (virtualRow) => {
1862
1877
  const row = rows[virtualRow.index];
1863
1878
  return (jsxRuntime.jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
1864
1879
  } }), paddingBottom > 0 && (jsxRuntime.jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsxRuntime.jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsxRuntime.jsx(reactControlFlow.Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
1865
1880
  position: "sticky",
1866
1881
  bottom: 0,
1867
- zIndex: 99
1882
+ zIndex: 9
1868
1883
  }, children: jsxRuntime.jsxs("tr", { style: { backgroundColor: "white" }, children: [jsxRuntime.jsx("td", { className: "p-1", children: jsxRuntime.jsx(reactComponents.Checkbox, { checked: table.getIsSomePageRowsSelected()
1869
1884
  ? 'mixed'
1870
1885
  : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxRuntime.jsxs("td", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }) }), jsxRuntime.jsx(reactControlFlow.Show, { when: (bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length) > 0, children: jsxRuntime.jsx("tfoot", { style: {
1871
1886
  position: "sticky",
1872
1887
  bottom: 0,
1873
- zIndex: 99
1888
+ zIndex: 9
1874
1889
  }, children: jsxRuntime.jsx(reactControlFlow.For, { each: bottomRows, children: (row) => (jsxRuntime.jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
1875
1890
  }
1876
1891
 
package/index.esm.js CHANGED
@@ -1023,6 +1023,10 @@ const SearchRegular = /*#__PURE__*/createFluentIcon('SearchRegular', "1em", ["M8
1023
1023
  const TableSimpleCheckmarkFilled = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkFilled', "1em", ["M14 17h-3.5v-6.5H17V14a3 3 0 0 1-3 3Zm3-7.5h-6.5V3H14a3 3 0 0 1 3 3v3.5Zm-7.5 0V3H6a3 3 0 0 0-3 3v3.5h6.5Zm0 7.5v-6.5H3V14a3 3 0 0 0 3 3h3.5Zm5.85-3.9a.5.5 0 0 0-.7-.7l-1.4 1.4-.4-.4a.5.5 0 0 0-.7.7l.75.75c.2.2.5.2.7 0l1.75-1.75Z"]);
1024
1024
  const TableSimpleCheckmarkRegular = /*#__PURE__*/createFluentIcon('TableSimpleCheckmarkRegular', "1em", ["M6 3a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h8a3 3 0 0 0 3-3V6a3 3 0 0 0-3-3H6ZM4 6c0-1.1.9-2 2-2h3.5v5.5H4V6Zm6.5 3.5V4H14a2 2 0 0 1 2 2v3.5h-5.5Zm-6.5 1h5.5V16H6a2 2 0 0 1-2-2v-3.5Zm10.86 1.4c.2.2.2.5 0 .7l-1.75 1.75a.5.5 0 0 1-.71 0l-.75-.75a.5.5 0 0 1 .7-.7l.4.4 1.4-1.4c.2-.2.51-.2.7 0Z"]);
1025
1025
  const TextClearFormattingFilled = /*#__PURE__*/createFluentIcon('TextClearFormattingFilled', "1em", ["M6 2c.2 0 .4.13.47.32l3.5 8.95a.5.5 0 0 1-.94.37L8.01 9H4l-1.04 2.68a.5.5 0 1 1-.94-.36l3.5-9A.5.5 0 0 1 6 2Zm0 1.88L4.4 8H7.6l-1.6-4.12ZM11.5 2c.28 0 .5.22.5.5v3.52a2.48 2.48 0 0 1 2.26-1.3c.89 0 1.6.34 2.15 1 .55.66.82 1.54.82 2.64l-.01.42-.05-.05a2.49 2.49 0 0 0-1.15-.65 2.86 2.86 0 0 0-.53-1.62c-.36-.47-.86-.7-1.48-.7-.6 0-1.09.24-1.47.72-.3.37-.47.83-.54 1.37v1.03c.05.43.18.8.37 1.12L11 11.37V2.5c0-.28.22-.5.5-.5Zm4.97 7.44 2.1 2.1a1.5 1.5 0 0 1-.01 2.12l-3.6 3.6-4.21-4.22 3.6-3.6a1.5 1.5 0 0 1 2.12 0Zm-2.22 8.52-4.21-4.21-.6.6a1.5 1.5 0 0 0 0 2.12l2.1 2.1c.3.3.71.45 1.12.43h4.09a.5.5 0 1 0 0-1h-2.53l.03-.04Z"]);
1026
+ const TextCollapseFilled = /*#__PURE__*/createFluentIcon('TextCollapseFilled', "1em", ["M5 3.5c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 3.5Zm0 12c0-.41.34-.75.75-.75h11.5a.75.75 0 0 1 0 1.5H5.75A.75.75 0 0 1 5 15.5Zm6.75-8.75a.75.75 0 0 0 0 1.5h5.5a.75.75 0 0 0 0-1.5h-5.5ZM11 11.5c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-6 0c0 .28.22.5.5.5h4a.5.5 0 0 0 0-1h-4a.5.5 0 0 0-.5.5Z"]);
1027
+ const TextCollapseRegular = /*#__PURE__*/createFluentIcon('TextCollapseRegular', "1em", ["M5 3.5c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h12a.5.5 0 0 1 0 1h-12a.5.5 0 0 1-.5-.5Zm6-8c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm0 4c0-.28.22-.5.5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm-2-2a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0ZM3.5 9a.5.5 0 0 0 0 1h4a.5.5 0 0 0 0-1h-4Z"]);
1028
+ const TextExpandFilled = /*#__PURE__*/createFluentIcon('TextExpandFilled', "1em", ["M4.75 3.5a.75.75 0 0 0 0 1.5h12.5a.75.75 0 0 0 0-1.5H4.75ZM4 16.25c0-.41.34-.75.75-.75h12.5a.75.75 0 0 1 0 1.5H4.75a.75.75 0 0 1-.75-.75Zm7-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75Zm0-4c0-.41.34-.75.75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5a.75.75 0 0 1-.75-.75ZM5.5 14a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM6 8.5V10h1.5a.5.5 0 0 1 0 1H6v1.5a.5.5 0 0 1-1 0V11H3.5a.5.5 0 0 1 0-1H5V8.5a.5.5 0 0 1 1 0Z"]);
1029
+ const TextExpandRegular = /*#__PURE__*/createFluentIcon('TextExpandRegular', "1em", ["M4 4.5c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm0 12c0-.28.22-.5.5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5Zm6-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5Zm0-4c0-.28.22-.5.5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5ZM5.5 14a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7ZM6 8.5a.5.5 0 0 0-1 0V10H3.5a.5.5 0 0 0 0 1H5v1.5a.5.5 0 0 0 1 0V11h1.5a.5.5 0 0 0 0-1H6V8.5Z"]);
1026
1030
  const TextSortAscendingFilled = /*#__PURE__*/createFluentIcon('TextSortAscendingFilled', "1em", ["M6.7 2.5a.75.75 0 0 0-1.4 0L3.03 9a.75.75 0 0 0 1.42.5l.34-1h2.4l.34 1A.75.75 0 0 0 8.96 9L6.7 2.5ZM6 5.04 6.68 7H5.32L6 5.04ZM4 11a.75.75 0 0 0 0 1.5h2.53l-3.14 4.3A.75.75 0 0 0 4 18h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 11H4Zm10.25-9c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1027
1031
  const TextSortDescendingFilled = /*#__PURE__*/createFluentIcon('TextSortDescendingFilled', "1em", ["M4 2a.75.75 0 1 0 0 1.5h2.53L3.39 7.8A.75.75 0 0 0 4 9h4a.75.75 0 0 0 0-1.5H5.47l3.14-4.3A.75.75 0 0 0 8 2H4Zm2.7 8.5a.75.75 0 0 0-1.4 0L3.03 17a.75.75 0 1 0 1.42.5l.34-1h2.4l.34 1a.75.75 0 1 0 1.42-.5L6.7 10.5ZM6 13.04 6.68 15H5.32L6 13.04ZM14.25 2c.41 0 .75.34.75.75v12.57l1.45-1.58a.75.75 0 0 1 1.1 1.02l-2.75 3a.75.75 0 0 1-1.1 0l-2.75-3a.75.75 0 0 1 1.1-1.02l1.45 1.58V2.75c0-.41.34-.75.75-.75Z"]);
1028
1032
 
@@ -1271,7 +1275,7 @@ function tableReducer(state, action) {
1271
1275
  }
1272
1276
 
1273
1277
  const useGridContainer = (props, ref) => {
1274
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
1278
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
1275
1279
  const { defaultColumn, columns, data, rowSelectionMode, autoResetPageIndex, onUpdateData } = props;
1276
1280
  const [drawerState, dispatch] = React.useReducer(tableReducer, {
1277
1281
  isFilterDrawerOpen: false,
@@ -1364,6 +1368,7 @@ const useGridContainer = (props, ref) => {
1364
1368
  meta: {
1365
1369
  pageSizeOptions: props.pageSizeOptions || [10, 20, 50, 100, 1000],
1366
1370
  rowSelectionMode: props.rowSelectionMode,
1371
+ isAutoExpandOnGroup: (_k = props.isAutoExpandOnGroup) !== null && _k !== void 0 ? _k : false,
1367
1372
  tableHeight: props.tableHeight || "650px",
1368
1373
  updateData: onUpdateData,
1369
1374
  onTableViewDelete: props.onTableViewDelete,
@@ -1510,7 +1515,7 @@ const useTableHeaderStyles = makeStyles({
1510
1515
  tHeadRow: {
1511
1516
  backgroundColor: tokens.colorNeutralCardBackgroundSelected,
1512
1517
  },
1513
- tHeadCell: Object.assign({ zIndex: 99, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
1518
+ tHeadCell: Object.assign({ zIndex: 9, position: 'relative', fontSize: tokens.fontSizeBase300, fontWeight: tokens.fontWeightBold, minWidth: '1rem' }, shorthands.padding('2px', '4px')),
1514
1519
  tHeadNonLeafCell: Object.assign({}, shorthands.borderBottom(0)),
1515
1520
  tHeadNonLeafCellFakeBorder: Object.assign({ width: '100%', height: '1px', position: "sticky", bottom: 0 }, shorthands.borderBottom('1px', 'solid', tokens.colorBrandBackgroundInverted)),
1516
1521
  tHeadCellDraggable: {
@@ -1544,7 +1549,7 @@ const getHeaderCellPinningStyles = (column, isDragging, additionalStyles) => {
1544
1549
  ? '-4px 0 4px -4px gray inset'
1545
1550
  : isFirstRightPinnedColumn
1546
1551
  ? '4px 0 4px -4px gray inset'
1547
- : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, opacity: isDragging ? 0.8 : (isPinned ? 0.95 : 1), position: isPinned ? 'sticky' : 'relative', zIndex: isDragging ? 100 : (isPinned ? 99 : 1), backgroundColor: tokens.colorNeutralCardBackgroundSelected, whiteSpace: 'wrap' }, additionalStyles);
1552
+ : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, opacity: isDragging ? 0.8 : (isPinned ? 0.95 : 1), position: isPinned ? 'sticky' : 'relative', zIndex: isDragging ? 10 : (isPinned ? 9 : 1), backgroundColor: tokens.colorNeutralCardBackgroundSelected, whiteSpace: 'wrap' }, additionalStyles);
1548
1553
  return styles;
1549
1554
  };
1550
1555
  const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
@@ -1555,7 +1560,7 @@ const getBodyCellPinningStyles = (column, isDragging, additionalStyles) => {
1555
1560
  ? '-4px 0 4px -4px gray inset'
1556
1561
  : isFirstRightPinnedColumn
1557
1562
  ? '4px 0 4px -4px gray inset'
1558
- : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : 'relative', opacity: isDragging ? 0.85 : (isPinned ? 0.95 : 1), zIndex: isDragging ? 100 : (isPinned ? 1 : 0) }, additionalStyles);
1563
+ : undefined, left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined, right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined, position: isPinned ? 'sticky' : 'relative', opacity: isDragging ? 0.85 : (isPinned ? 0.95 : 1), zIndex: isDragging ? 2 : (isPinned ? 1 : 0) }, additionalStyles);
1559
1564
  return styles;
1560
1565
  };
1561
1566
 
@@ -1564,6 +1569,8 @@ const SortAscIcon = bundleIcon$1(ArrowSortDown20Filled, ArrowSortDown20Regular);
1564
1569
  const SortDescIcon = bundleIcon$1(ArrowSortUp20Filled, ArrowSortUp20Regular);
1565
1570
  const PinIcon = bundleIcon$1(PinFilled, PinRegular);
1566
1571
  const HideColumnIcon = bundleIcon$1(EyeTrackingOffFilled, EyeTrackingOffRegular);
1572
+ const GroupExpandIcon = bundleIcon$1(TextExpandFilled, TextExpandRegular);
1573
+ const GroupCollapseIcon = bundleIcon$1(TextCollapseFilled, TextCollapseRegular);
1567
1574
  function HeaderCell({ header, table, hideMenu, headerDepth, totalNumberOfHeaderDepth, }) {
1568
1575
  var _a;
1569
1576
  const { column } = header;
@@ -1625,7 +1632,15 @@ function HeaderMenu(props) {
1625
1632
  var _a;
1626
1633
  const isControlKeySelected = e.ctrlKey;
1627
1634
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.toggleSorting(true, isControlKeySelected);
1628
- }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsx(MenuDivider, {})] }, 'sort-group') }), jsx(Show, { when: header.column.getCanGroup(), children: jsxs(MenuGroup, { children: [!header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => header.column.getToggleGroupingHandler()(), icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] })), jsx(MenuDivider, {})] }, 'grouping-group') }), jsx(Show, { when: header.column.getCanPin(), children: jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsxs(MenuItem, { icon: jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: () => {
1635
+ }, icon: jsx(TextSortDescendingFilled, {}), disabled: header.column.getIsSorted() === 'desc', children: "Sort Z to A" }), jsx(MenuDivider, {})] }, 'sort-group') }), jsx(Show, { when: header.column.getCanGroup(), children: jsxs(MenuGroup, { children: [!header.column.getIsGrouped() && (jsxs(MenuItem, { onClick: () => {
1636
+ header.column.getToggleGroupingHandler()();
1637
+ const { isAutoExpandOnGroup } = table.options.meta;
1638
+ if (isAutoExpandOnGroup) {
1639
+ table.toggleAllRowsExpanded(true);
1640
+ }
1641
+ }, icon: jsx(GroupFilled, {}), children: ["Group Column (by ", columnName, ")"] })), jsxs(Show, { when: header.column.getIsGrouped(), children: [jsxs(MenuItem, { onClick: () => {
1642
+ header.column.getToggleGroupingHandler()();
1643
+ }, icon: jsx(GroupDismissFilled, {}), children: ["Remove Grouping (on ", columnName, ")"] }), jsx(MenuItem, { onClick: () => table.toggleAllRowsExpanded(), icon: table.getIsAllRowsExpanded() ? jsx(GroupCollapseIcon, {}) : jsx(GroupExpandIcon, {}), children: jsx(Show, { when: table.getIsAllRowsExpanded(), fallback: jsx(Fragment, { children: "Expand All Groups" }), children: "Collapse All Groups" }) })] }), jsx(MenuDivider, {})] }, 'grouping-group') }), jsx(Show, { when: header.column.getCanPin(), children: jsxs(Menu, { children: [jsx(MenuTrigger, { disableButtonEnhancement: true, children: jsxs(MenuItem, { icon: jsx(PinIcon, {}), children: ["Pin Column (", columnName, ")"] }) }), jsx(MenuPopover, { children: jsxs(MenuList, { children: [jsx(MenuItem, { onClick: () => {
1629
1644
  var _a;
1630
1645
  (_a = header.column) === null || _a === void 0 ? void 0 : _a.pin(false);
1631
1646
  }, icon: jsx(PinOffRegular, {}), disabled: !(['left', 'right'].includes(header.column.getIsPinned())), children: "No Pin" }), jsx(MenuItem, { onClick: () => {
@@ -1835,20 +1850,20 @@ function TableBody(props) {
1835
1850
  return (jsxs(Fragment, { children: [jsx(Show, { when: (topRows === null || topRows === void 0 ? void 0 : topRows.length) > 0, children: jsx("thead", { style: {
1836
1851
  position: "sticky",
1837
1852
  top: 0,
1838
- zIndex: 99
1853
+ zIndex: 9
1839
1854
  }, children: jsx(For, { each: topRows, children: (row, index) => (jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) }), jsxs("tbody", { className: styles.tBody, children: [paddingTop > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingTop}px` } }) })), jsx(For, { each: virtualRows || [], children: (virtualRow) => {
1840
1855
  const row = rows[virtualRow.index];
1841
1856
  return (jsx(TableRow, { row: row, rowSelectionMode: rowSelectionMode }, row.id));
1842
1857
  } }), paddingBottom > 0 && (jsx("tr", { className: styles.tBodyRow, "aria-hidden": true, children: jsx("td", { style: { height: `${paddingBottom}px` } }) }))] }), jsx(Show, { when: rowSelectionMode === 'multiple' && (rows === null || rows === void 0 ? void 0 : rows.length) > 0, children: jsx("tfoot", { style: {
1843
1858
  position: "sticky",
1844
1859
  bottom: 0,
1845
- zIndex: 99
1860
+ zIndex: 9
1846
1861
  }, children: jsxs("tr", { style: { backgroundColor: "white" }, children: [jsx("td", { className: "p-1", children: jsx(Checkbox, { checked: table.getIsSomePageRowsSelected()
1847
1862
  ? 'mixed'
1848
1863
  : table.getIsAllPageRowsSelected(), onChange: table.getToggleAllPageRowsSelectedHandler(), "aria-label": "Select All Current Page Rows", title: 'Select All Current Page Rows' }) }), jsxs("td", { colSpan: 20, children: [table.getIsAllPageRowsSelected() ? 'Unselect' : 'Select', " All Current Page Rows (", table.getRowModel().rows.length, ")"] })] }) }) }), jsx(Show, { when: (bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length) > 0, children: jsx("tfoot", { style: {
1849
1864
  position: "sticky",
1850
1865
  bottom: 0,
1851
- zIndex: 99
1866
+ zIndex: 9
1852
1867
  }, children: jsx(For, { each: bottomRows, children: (row) => (jsx(PinnedRow, { row: row, rowSelectionMode: rowSelectionMode, bottomRowLength: bottomRows === null || bottomRows === void 0 ? void 0 : bottomRows.length }, row.id)) }) }) })] }));
1853
1868
  }
1854
1869
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@prt-ts/fluent-react-table-v2",
3
- "version": "9.46.8-build.7.0",
3
+ "version": "9.46.8-build.9.0",
4
4
  "peerDependencies": {
5
5
  "react": ">=17.0.0",
6
6
  "react-dom": ">=17.0.0",
package/src/lib/index.d.ts CHANGED
@@ -18,6 +18,7 @@ declare module '@tanstack/react-table' {
18
18
  interface TableMeta<TData extends RowData> {
19
19
  rowSelectionMode: TableProps<TData>["rowSelectionMode"];
20
20
  pageSizeOptions: TableProps<TData>["pageSizeOptions"];
21
+ isAutoExpandOnGroup: TableProps<TData>["isAutoExpandOnGroup"];
21
22
  tableHeight: string;
22
23
  updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
23
24
  onTableViewSave?: TableProps<TData>["onTableViewSave"];
@@ -40,5 +41,5 @@ declare module '@tanstack/react-table' {
40
41
  }
41
42
  export { Table, useSkipper } from "./components";
42
43
  export type { TableProps, TableRef, TableView } from "./types";
43
- export type { TableState, ColumnDef } from '@tanstack/react-table';
44
+ export type { TableState, ColumnDef, Column as ColumnType, Row as RowType, RowData as RowDataType, Table as TableType } from '@tanstack/react-table';
44
45
  export { createColumnHelper } from "@tanstack/react-table";
package/src/lib/types/TableProps.d.ts CHANGED
@@ -16,6 +16,11 @@ export type TableProps<TItem extends RowData> = {
16
16
  * Table loading state.
17
17
  */
18
18
  isLoading?: boolean;
19
+ /**
20
+ * While grouping isExpanded will use to make default expand state.
21
+ * @default false
22
+ */
23
+ isAutoExpandOnGroup?: boolean;
19
24
  /**
20
25
  * Grid title
21
26
  */