@procore/data-table 14.7.0 → 14.9.0

package/dist/modern/index.js

@@ -11,6 +11,7 @@ import { detectPrng, factory } from 'ulid';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
 import ReactDOM, { createPortal } from 'react-dom';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
+import { storage } from '@procore/web-sdk-storage';
 import _isEqual from 'lodash.isequal';
 import ReactResizeDetector from 'react-resize-detector';
 import { DateTimeSelectField } from '@procore/labs-datetime-select';
@@ -1403,7 +1404,7 @@ ag-grid, ag-grid-angular, ag-grid-ng2, ag-grid-polymer, ag-grid-aurelia {
   animation-iteration-count: infinite;
   animation-name: ag-shake-left-to-right;
 }
-@keyframes _ag-shake-left-to-right_10eap_366 {
+@keyframes _ag-shake-left-to-right_7x7l9_366 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5404,7 +5405,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_10eap_1 {
+@keyframes _spin_7x7l9_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7525,6 +7526,18 @@ input[class^=ag-][type=range]:disabled {
   box-shadow: 0px -6px 12px -3px hsla(200, 8%, 10%, 0.25);
   z-index: 2;
 }
+.ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-left-floating-bottom .ag-row, .ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-right-floating-bottom .ag-row {
+  background-color: #f4f5f6;
+}
+.ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-left-floating-bottom {
+  z-index: 1;
+  box-shadow: 3px 0px 12px 0.5px hsl(200, 8%, 90%);
+  border-right: 1px solid #d6dadc;
+}
+.ag-theme-alpine.ag-theme-alpine .ag-floating-bottom .ag-pinned-right-floating-bottom {
+  box-shadow: -3px 0px 12px 0.5px hsl(200, 8%, 90%);
+  border-left: 1px solid #d6dadc;
+}
 .ag-theme-alpine.ag-theme-alpine .ag-group-value {
   line-height: 16px;
 }
@@ -7891,7 +7904,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_10eap_7131 {
+div._contextPanel_7x7l9_7144 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7900,7 +7913,7 @@ div._contextPanel_10eap_7131 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_10eap_7140 {
+div._contextPanel--hidden_7x7l9_7153 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7908,50 +7921,50 @@ div._contextPanel--hidden_10eap_7140 {
   width: 0px;
 }
 
-._contextPanelWrapper_10eap_7148 {
+._contextPanelWrapper_7x7l9_7161 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_10eap_7153 {
+._contextPanelBody_7x7l9_7166 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_10eap_7157 {
+._contextPanel-stickyHeader_7x7l9_7170 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_10eap_7164 {
+._filters-list_7x7l9_7177 {
   padding: 0;
   margin: 0;
 }
-._filters-list_10eap_7164 ol {
+._filters-list_7x7l9_7177 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_10eap_7173 {
+._col-drag-column-icon_7x7l9_7186 {
   color: #6a767c;
 }
 
-._tabular-nums_10eap_7177 {
+._tabular-nums_7x7l9_7190 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_10eap_7131",
-  "contextPanel--hidden": "_contextPanel--hidden_10eap_7140",
-  "contextPanelWrapper": "_contextPanelWrapper_10eap_7148",
-  "contextPanelBody": "_contextPanelBody_10eap_7153",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_10eap_7157",
-  "filters-list": "_filters-list_10eap_7164",
-  "col-drag-column-icon": "_col-drag-column-icon_10eap_7173",
-  "tabular-nums": "_tabular-nums_10eap_7177",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_10eap_366",
-  "spin": "_spin_10eap_1"
+  "contextPanel": "_contextPanel_7x7l9_7144",
+  "contextPanel--hidden": "_contextPanel--hidden_7x7l9_7153",
+  "contextPanelWrapper": "_contextPanelWrapper_7x7l9_7161",
+  "contextPanelBody": "_contextPanelBody_7x7l9_7166",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_7x7l9_7170",
+  "filters-list": "_filters-list_7x7l9_7177",
+  "col-drag-column-icon": "_col-drag-column-icon_7x7l9_7186",
+  "tabular-nums": "_tabular-nums_7x7l9_7190",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_7x7l9_366",
+  "spin": "_spin_7x7l9_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -55156,6 +55169,16 @@ function getParentSelectionState(parent, affectedRows, parentChildrenMap) {
     return rowSelectionState.indeterminate;
   }
 }
+function getNodeSelectedState(node) {
+  const filteredChildren = node.childrenAfterFilter || [];
+  const numSelectedChildren = filteredChildren.filter(
+    (child) => child.isSelected()
+  ).length;
+  return {
+    selected: filteredChildren.length > 0 ? numSelectedChildren > 0 : node.isSelected(),
+    indeterminate: filteredChildren ? numSelectedChildren > 0 && filteredChildren.length !== numSelectedChildren : false
+  };
+}
 function getAffectedRows(currentRows, selectionNode, affectedRows) {
   const isNodeRootLevel = isNodeRootLevelOfGrid(selectionNode.parent);
   const nodeId = selectionNode.id;
@@ -55235,12 +55258,8 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
 function noop2() {
 }
 function ClientSideRowCheckbox(props) {
-  const [selected, setSelected] = useState(props.node.isSelected());
-  const numSelectedChildren = (props.node.childrenAfterGroup || []).filter(
-    (child) => child.isSelected()
-  ).length;
-  const selectedState = props.node.childrenAfterGroup ? numSelectedChildren > 0 : props.node.isSelected();
-  const indeterminateState = props.node.childrenAfterGroup ? numSelectedChildren > 0 && props.node.childrenAfterGroup?.length !== numSelectedChildren : false;
+  const [_selected, setSelected] = useState(props.node.isSelected());
+  const { selected, indeterminate } = getNodeSelectedState(props.node);
   function handleRowSelection(event) {
     if (props.node === event.node) {
       setSelected(event.node.isSelected());
@@ -55255,13 +55274,18 @@ function ClientSideRowCheckbox(props) {
   return /* @__PURE__ */ React83.createElement(Box, { paddingRight: "md" }, /* @__PURE__ */ React83.createElement(
     Checkbox,
     {
-      checked: selectedState,
+      checked: selected,
       disabled: props.data?.checkboxDisabled,
-      indeterminate: indeterminateState,
+      indeterminate,
       "data-qa": "rowCheckbox",
       onClick: noop2,
-      onChange: () => {
-        props.node.setSelected(!selected, void 0, "checkboxSelected");
+      onChange: (event) => {
+        return props.node.setSelectedParams({
+          newValue: event.target.checked,
+          groupSelectsFiltered: true,
+          event,
+          source: "checkboxSelected"
+        });
       }
     }
   ));
@@ -55423,23 +55447,33 @@ var AutoGroupCellRenderer = (props) => {
 };
 
 // src/CellRenderers/rowActionsCellStyles.scss
-var css6 = `div[col-id=rowActions] {
-  left: calc(var(--viewport-width) - var(--rowActions-width)) !important;
-  padding: 0px 8px !important;
+var css6 = `.ag-theme-alpine.ag-theme-alpine div.ag-cell[col-id=rowActions] {
+  left: var(--viewport-width) !important;
+  width: 0px !important;
+  padding: 0px !important;
   position: sticky;
   visibility: hidden;
   flex: none;
+  background: none;
+  overflow: visible;
 }
-.ag-row-hover div[col-id=rowActions] {
+.ag-theme-alpine.ag-theme-alpine div.ag-cell[col-id=rowActions] .inline-nonedit-wrapper {
+  width: auto;
+  height: 100%;
+  padding: 0px 8px;
+  position: absolute;
+  right: 0px;
+}
+.ag-theme-alpine.ag-theme-alpine .ag-row-hover div.ag-cell[col-id=rowActions] .inline-nonedit-wrapper {
   background: #f4f5f6;
 }
-.ag-row-focus div[col-id=rowActions] {
+.ag-theme-alpine.ag-theme-alpine .ag-row-focus div.ag-cell[col-id=rowActions] .inline-nonedit-wrapper {
   background: #f6f9fe;
 }
-.ag-row-hover div[col-id=rowActions], .ag-row-focus div[col-id=rowActions] {
+.ag-theme-alpine.ag-theme-alpine .ag-row-hover .ag-cell[col-id=rowActions], .ag-theme-alpine.ag-theme-alpine .ag-row-focus .ag-cell[col-id=rowActions] {
   visibility: visible;
 }
-div[col-id=rowActions-pinned] {
+.ag-theme-alpine.ag-theme-alpine .ag-cell[col-id=rowActions-pinned] {
   background: "transparent";
   left: calc(var(--viewport-width) - var(--rowActions-width)) !important;
   padding: 2px 8px !important;
@@ -55448,8 +55482,18 @@ div[col-id=rowActions-pinned] {
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css6));
 
 // src/CellRenderers/RowActionsCell.tsx
+function getRowActions(actions, rowProps) {
+  if (typeof actions === "function") {
+    return actions(rowProps);
+  }
+  return actions;
+}
 var InternalRowActionsCellRenderer = (props) => {
-  if (props.rowPinned || props.columnDefinition.cellRendererParams.hideActionsOnGroupedRow && props.isGroup) {
+  const actions = getRowActions(
+    props.columnDefinition.cellRendererParams.actions,
+    props
+  );
+  if (props.rowPinned || props.columnDefinition.cellRendererParams.hideActionsOnGroupedRow && props.isGroup || actions.length === 0) {
     return null;
   }
   return /* @__PURE__ */ React83.createElement(
@@ -55460,7 +55504,7 @@ var InternalRowActionsCellRenderer = (props) => {
       size: "xs",
       margin: "0px 4px"
     },
-    props.columnDefinition.cellRendererParams.actions.map((Action, idx) => {
+    actions.map((Action, idx) => {
       const key = `${Action.displayName}${idx}`;
       return /* @__PURE__ */ React83.createElement(Action, { ...props, key });
     })
@@ -56112,6 +56156,7 @@ var css7 = `.ag-header-cell .data-table-header-menu {
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css7));
 
 // src/GenericHeader/GenericHeader.tsx
+var filterChanged = "filterChanged";
 var selectionChanged = "selectionChanged";
 var paginationChanged = "paginationChanged";
 var tooltipDelay = {
@@ -56413,7 +56458,7 @@ var GenericHeaderRenderer = (props) => {
         if (node.selectable === false) {
           return;
         }
-        if (node.isSelected()) {
+        if (getNodeSelectedState(node).selected) {
           hasSelectedNodes = true;
         } else {
           isAllSelected = false;
@@ -56427,9 +56472,11 @@ var GenericHeaderRenderer = (props) => {
         setSelectAll("none" /* None */);
       }
     }
+    props.api.addEventListener(filterChanged, onSelectionChanged);
     props.api.addEventListener(selectionChanged, onSelectionChanged);
     onSelectionChanged();
     return () => {
+      removeEventListenerFromGrid(filterChanged, onSelectionChanged, props.api);
       removeEventListenerFromGrid(
         selectionChanged,
         onSelectionChanged,
@@ -80964,9 +81011,20 @@ var useTableApi = ({
       message
     });
   }, []);
+  function getUnviewableGroupedColumns(columnApi2) {
+    return (columnApi2?.getRowGroupColumns() ?? []).filter((column2) => {
+      const colDef = column2.getColDef();
+      return colDef.lockVisible && colDef.hide;
+    }).map((column2) => column2.getColId());
+  }
   const setRowGrouping = React83.useCallback(
     (value) => {
+      const unviewableGroupedColumns = getUnviewableGroupedColumns(columnApi);
       columnApi?.setRowGroupColumns(value);
+      const recentlyUngroupedUnviewableColumns = unviewableGroupedColumns.filter((colId) => !value.includes(colId));
+      if (recentlyUngroupedUnviewableColumns.length > 0) {
+        columnApi?.setColumnsVisible(recentlyUngroupedUnviewableColumns, false);
+      }
       resetPagination();
     },
     [columnApi]
@@ -81436,15 +81494,16 @@ var DataTable = ({
   onTableConfigChange,
   showExpandCollapseAllToggle,
   translations: translations2 = {},
-  enableCellTextSelection
+  enableCellTextSelection,
+  localStoragePersistenceKey
 }) => {
-  const [initialTableConfig] = React83.useState(_initialTableConfig);
+  const initialTableConfig = localStoragePersistenceKey && storage.local.getItem(localStoragePersistenceKey) || _initialTableConfig;
   const onServerSideDataRequestRef = React83.useRef(onServerSideDataRequest);
   const tableRef = React83.useRef(null);
   const [totalRowCount, setTotalRowCount] = React83.useState(0);
   const [selectedGroupIndex, setSelectedGroupIndex] = React83.useState(null);
   const [initialConfigSet, setInitialConfigSet] = React83.useState(
-    !_initialTableConfig
+    !initialTableConfig
   );
   const contextPanel = useContextPanel();
   const clientI18n = useI18nContext();
@@ -81532,18 +81591,31 @@ var DataTable = ({
       });
       checkboxColumn.current = newCheckboxColumn;
     }
-    if (!gridApi || !columnApi || !onTableConfigChange) {
+    if (!gridApi || !columnApi) {
       return;
     }
     const config = tableRef?.current?.getTableConfiguration();
     if (config) {
-      onTableConfigChange({
+      if (localStoragePersistenceKey) {
+        storage.local.setItem(localStoragePersistenceKey, {
+          ...config,
+          rowHeight: rowHeightRef.current,
+          serverFilters: filterStorage.filtersState
+        });
+      }
+      onTableConfigChange?.({
         ...config,
         rowHeight: rowHeightRef.current,
         serverFilters: filterStorage.filtersState
       });
     }
-  }, [gridApi, columnApi, onTableConfigChange, filterStorage.filtersState]);
+  }, [
+    gridApi,
+    columnApi,
+    onTableConfigChange,
+    filterStorage.filtersState,
+    localStoragePersistenceKey
+  ]);
   const filtersRef = useRef(filterStorage.selectedFilters);
   if (!_isEqual(filtersRef.current, filterStorage.selectedFilters)) {
     filtersRef.current = filterStorage.selectedFilters;
@@ -81886,10 +81958,14 @@ var Table = (props) => {
         suppressMovable: true,
         suppressSizeToFit: true,
         suppressMenu: true,
-        width: rowActionsWidth.current,
-        minWidth: rowActionsWidth.current,
+        width: suppressColumnVirtualisation ? 0 : rowActionsWidth.current,
+        minWidth: suppressColumnVirtualisation ? 0 : rowActionsWidth.current,
         cellStyle: (params) => {
-          if (params.node.rowPinned === "bottom") {
+          const actions = getRowActions(
+            params.colDef.cellRendererParams.actions,
+            params
+          );
+          if (params.node.rowPinned === "bottom" || actions.length === 0) {
             return {
               display: "none"
             };
@@ -82478,6 +82554,7 @@ var Table = (props) => {
             onSortChanged: onSortEventChanged,
             onFilterChanged,
             onFirstDataRendered: props.onFirstDataRendered,
+            paginateChildRows: props.paginateChildRows,
             pagination: props.pagination,
             paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
             popupParent: props.popupParent,
@@ -82510,18 +82587,14 @@ var Table = (props) => {
       TablePagination,
       {
         gridApi,
-        isServerSideRowModel: !!onSSDR,
-        pageSize: props.paginationPageSize,
-        totalRowCount: internalTableContext.totalRowCount
+        pageSize: props.paginationPageSize
       }
     )
   );
 };
 var TablePagination = ({
   gridApi,
-  isServerSideRowModel,
-  pageSize,
-  totalRowCount
+  pageSize
 }) => {
   const [pagination, setPagination] = React83.useState({
     page: 0,
@@ -82550,7 +82623,7 @@ var TablePagination = ({
     {
       activePage: pagination.page + 1,
       "data-qa": "data-table-pagination",
-      items: isServerSideRowModel ? totalRowCount : pagination.items,
+      items: pagination.items,
       onSelectPage: (_page) => {
         gridApi?.paginationGoToPage(_page - 1);
       },
@@ -82626,7 +82699,8 @@ var ClientSideDataTable = ({
   onBulkEditUpdate,
   onTableConfigChange,
   translations: translations2 = {},
-  enableCellTextSelection
+  enableCellTextSelection,
+  localStoragePersistenceKey
 }) => {
   return /* @__PURE__ */ React83.createElement(
     DataTable,
@@ -82642,6 +82716,7 @@ var ClientSideDataTable = ({
       onBulkEditUpdate,
       showExpandCollapseAllToggle: true,
       translations: translations2,
+      localStoragePersistenceKey,
       customBulkEditorFields,
       enableCellTextSelection
     },
@@ -87122,8 +87197,8 @@ var FilterListener = class FilterListener2 extends BeanStub {
     Object.keys(allColKeysMap).forEach((key) => {
       const oldJson = JSON.stringify(oldModel[key]);
       const newJson = JSON.stringify(newModel[key]);
-      const filterChanged = oldJson != newJson;
-      if (filterChanged) {
+      const filterChanged2 = oldJson != newJson;
+      if (filterChanged2) {
         res.push(key);
       }
     });
@@ -88034,7 +88109,8 @@ var ServerSideDataTable = ({
   onTableConfigChange,
   enableCellTextSelection,
   showExpandCollapseAllToggle,
-  translations: translations2 = {}
+  translations: translations2 = {},
+  localStoragePersistenceKey
 }) => {
   return /* @__PURE__ */ React83.createElement(
     DataTable,
@@ -88052,7 +88128,8 @@ var ServerSideDataTable = ({
       showExpandCollapseAllToggle,
       translations: translations2,
       customBulkEditorFields,
-      enableCellTextSelection
+      enableCellTextSelection,
+      localStoragePersistenceKey
     },
     children
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.7.0",
+  "version": "14.9.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -27,7 +27,7 @@
   ],
   "scripts": {
     "build": "NODE_ENV=production tsup",
-    "chromatic": "chromatic --project-token=67f7a4f5cd9d",
+    "chromatic": "dotenvx run -- chromatic",
     "chromatic:ci": "chromatic --ci  --storybook-build-dir ./storybook-static --project-token=${CHROMATIC_DATA_TABLE_TOKEN} --exit-once-uploaded --only-changed --skip=\"dependabot*\"",
     "clean": "rimraf dist",
     "cypress:dev:open": "start-server-and-test storybook-static:server http://127.0.0.1:6006 cypress:open",
@@ -58,7 +58,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com:procore/core/",
+    "url": "https://github.com/procore/core/",
     "directory": "packages/data-table"
   },
   "author": "Procore Technologies",
@@ -81,6 +81,7 @@
     "@procore/labs-datetime-select": "0.1.0",
     "@procore/labs-group-by-select": "3.1.2",
     "@procore/toast-alert": "5.1.0",
+    "@procore/web-sdk-storage": "^0.1.0",
     "classnames": "2.5.1",
     "date-fns": "2.29.1",
     "decimal.js": "10.3.1",
@@ -104,11 +105,12 @@
     "@ag-grid-enterprise/server-side-row-model": "30.1.0",
     "@ag-grid-enterprise/set-filter": "30.1.0",
     "@babel/eslint-parser": "7.21.3",
+    "@dotenvx/dotenvx": "1.6.4",
     "@ngneat/falso": "6.4.0",
     "@procore/core-css": "10.17.0",
-    "@procore/core-icons": "12.0.0",
+    "@procore/core-icons": "12.1.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.6.0",
+    "@procore/core-react": "12.7.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "3.0.1",