@procore/data-table 15.0.0-alpha.2 → 15.0.0-alpha.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Change Log
 
+## 14.26.2
+
+### Patch Changes
+
+- ec16c0e: Upgrade react-resize-detector to avoid error with lodash import. More info: https://github.com/maslianok/react-resize-detector/issues/257
+
+## 14.26.1
+
+### Patch Changes
+
+- 4a1d11d: Update procore/labs-procore-environment to 5.0.1 in data-table
+  - @procore/error-pages@0.2.1
+
 ## 14.26.0
 
 ### Minor Changes

package/dist/legacy/index.cjs

@@ -10531,6 +10531,12 @@ var DataTableCellEditor = React61__default.default.forwardRef(
         }
       }
     }
+    function handleMouseDown(event) {
+      if (event.target !== inputRef.current) {
+        onValueChange(getValue3());
+        stopEditing2(false);
+      }
+    }
     React61__default.default.useEffect(() => {
       var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
       if (editorType === "input") {
@@ -10541,6 +10547,9 @@ var DataTableCellEditor = React61__default.default.forwardRef(
         }
         (_c = inlineEditorRef.current) == null ? void 0 : _c.show();
         (_d = inputRef.current) == null ? void 0 : _d.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       } else if (editorType === "textarea") {
         (_e = textAreaRef.current) == null ? void 0 : _e.select();
         (_f = inlineEditorRef.current) == null ? void 0 : _f.show();
@@ -10552,6 +10561,9 @@ var DataTableCellEditor = React61__default.default.forwardRef(
       return () => {
         var _a4;
         (_a4 = inputRef.current) == null ? void 0 : _a4.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       };
     }, []);
     const handleRefs = (editorType2) => {
@@ -10589,7 +10601,7 @@ var DataTableCellEditor = React61__default.default.forwardRef(
             setCurrentValue(newValue);
           },
           stopEditing: (relatedTarget) => {
-            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table')) === null;
+            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table"]')) === null;
             onValueChange(getValue3());
             stopEditing2(isRelatedTargetOutsideTable);
             if (isRelatedTargetOutsideTable) {
@@ -10746,7 +10758,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowUnGroup",
     action() {
-      props.api.resetColumnState();
       props.api.removeRowGroupColumn(props.column);
     }
   };
@@ -10756,7 +10767,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowGroup",
     action() {
-      props.api.resetColumnState();
       props.api.addRowGroupColumn(props.column);
     }
   };
@@ -130276,7 +130286,7 @@ var Table = (props) => {
         (colDef) => isBulkEditingEnabledForRow(colDef, node)
       );
     },
-    [props]
+    [internalTableContext.columnDefinitions, props.rowSelectionEnabled]
   );
   const decoratedAutoGroupColDef = React61__default.default.useMemo(
     () => getDecoratedAutoGroupColDef(
@@ -130698,6 +130708,28 @@ var Table = (props) => {
   const groupDefaultExpandedProp = !onSSDR ? {
     groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
   } : {};
+  const rowSelection = React61__default.default.useMemo(() => {
+    return {
+      mode: "multiRow",
+      checkboxes: false,
+      headerCheckbox: false,
+      hideDisabledCheckboxes: true,
+      selectAll: "filtered",
+      isRowSelectable,
+      enableClickSelection: props.enableClickSelection,
+      groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
+    };
+  }, [
+    isRowSelectable,
+    props.enableClickSelection,
+    props.groupSelectsChildren,
+    internalTableContext.totalRowCount,
+    onSSDR
+  ]);
+  const memoizedFullWidthCellRenderer = React61__default.default.useCallback(
+    FullWidthCellRenderer(props.fullWidthCellRenderer),
+    [props.fullWidthCellRenderer]
+  );
   return /* @__PURE__ */ React61__default.default.createElement(
     Spinner,
     {
@@ -130747,9 +130779,7 @@ var Table = (props) => {
           components: {
             ...frameworkComponents.base
           },
-          fullWidthCellRenderer: FullWidthCellRenderer(
-            props.fullWidthCellRenderer
-          ),
+          fullWidthCellRenderer: memoizedFullWidthCellRenderer,
           getRowHeight: getMainTableRowHeight,
           getRowId: internalTableContext.getRowId,
           getRowStyle,
@@ -130813,16 +130843,7 @@ var Table = (props) => {
           rowClassRules,
           rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
           rowModelType: onSSDR ? "serverSide" : "clientSide",
-          rowSelection: {
-            mode: "multiRow",
-            checkboxes: false,
-            headerCheckbox: false,
-            hideDisabledCheckboxes: true,
-            selectAll: "filtered",
-            isRowSelectable,
-            enableClickSelection: props.enableClickSelection,
-            groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
-          },
+          rowSelection,
           animateRows: false,
           ...serverSideInfiniteScroll,
           suppressClickEdit: true,

package/dist/legacy/index.js

@@ -10518,6 +10518,12 @@ var DataTableCellEditor = React61.forwardRef(
         }
       }
     }
+    function handleMouseDown(event) {
+      if (event.target !== inputRef.current) {
+        onValueChange(getValue3());
+        stopEditing2(false);
+      }
+    }
     React61.useEffect(() => {
       var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
       if (editorType === "input") {
@@ -10528,6 +10534,9 @@ var DataTableCellEditor = React61.forwardRef(
         }
         (_c = inlineEditorRef.current) == null ? void 0 : _c.show();
         (_d = inputRef.current) == null ? void 0 : _d.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       } else if (editorType === "textarea") {
         (_e = textAreaRef.current) == null ? void 0 : _e.select();
         (_f = inlineEditorRef.current) == null ? void 0 : _f.show();
@@ -10539,6 +10548,9 @@ var DataTableCellEditor = React61.forwardRef(
       return () => {
         var _a4;
         (_a4 = inputRef.current) == null ? void 0 : _a4.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       };
     }, []);
     const handleRefs = (editorType2) => {
@@ -10576,7 +10588,7 @@ var DataTableCellEditor = React61.forwardRef(
             setCurrentValue(newValue);
           },
           stopEditing: (relatedTarget) => {
-            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table')) === null;
+            const isRelatedTargetOutsideTable = (relatedTarget == null ? void 0 : relatedTarget.closest('[data-qa="data-table-table"]')) === null;
             onValueChange(getValue3());
             stopEditing2(isRelatedTargetOutsideTable);
             if (isRelatedTargetOutsideTable) {
@@ -10733,7 +10745,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowUnGroup",
     action() {
-      props.api.resetColumnState();
       props.api.removeRowGroupColumn(props.column);
     }
   };
@@ -10743,7 +10754,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowGroup",
     action() {
-      props.api.resetColumnState();
       props.api.addRowGroupColumn(props.column);
     }
   };
@@ -130263,7 +130273,7 @@ var Table = (props) => {
         (colDef) => isBulkEditingEnabledForRow(colDef, node)
       );
     },
-    [props]
+    [internalTableContext.columnDefinitions, props.rowSelectionEnabled]
   );
   const decoratedAutoGroupColDef = React61.useMemo(
     () => getDecoratedAutoGroupColDef(
@@ -130685,6 +130695,28 @@ var Table = (props) => {
   const groupDefaultExpandedProp = !onSSDR ? {
     groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
   } : {};
+  const rowSelection = React61.useMemo(() => {
+    return {
+      mode: "multiRow",
+      checkboxes: false,
+      headerCheckbox: false,
+      hideDisabledCheckboxes: true,
+      selectAll: "filtered",
+      isRowSelectable,
+      enableClickSelection: props.enableClickSelection,
+      groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
+    };
+  }, [
+    isRowSelectable,
+    props.enableClickSelection,
+    props.groupSelectsChildren,
+    internalTableContext.totalRowCount,
+    onSSDR
+  ]);
+  const memoizedFullWidthCellRenderer = React61.useCallback(
+    FullWidthCellRenderer(props.fullWidthCellRenderer),
+    [props.fullWidthCellRenderer]
+  );
   return /* @__PURE__ */ React61.createElement(
     Spinner,
     {
@@ -130734,9 +130766,7 @@ var Table = (props) => {
           components: {
             ...frameworkComponents.base
           },
-          fullWidthCellRenderer: FullWidthCellRenderer(
-            props.fullWidthCellRenderer
-          ),
+          fullWidthCellRenderer: memoizedFullWidthCellRenderer,
           getRowHeight: getMainTableRowHeight,
           getRowId: internalTableContext.getRowId,
           getRowStyle,
@@ -130800,16 +130830,7 @@ var Table = (props) => {
           rowClassRules,
           rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
           rowModelType: onSSDR ? "serverSide" : "clientSide",
-          rowSelection: {
-            mode: "multiRow",
-            checkboxes: false,
-            headerCheckbox: false,
-            hideDisabledCheckboxes: true,
-            selectAll: "filtered",
-            isRowSelectable,
-            enableClickSelection: props.enableClickSelection,
-            groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
-          },
+          rowSelection,
           animateRows: false,
           ...serverSideInfiniteScroll,
           suppressClickEdit: true,

package/dist/modern/index.cjs

@@ -10434,6 +10434,12 @@ var DataTableCellEditor = React61__default.default.forwardRef(
         }
       }
     }
+    function handleMouseDown(event) {
+      if (event.target !== inputRef.current) {
+        onValueChange(getValue3());
+        stopEditing2(false);
+      }
+    }
     React61__default.default.useEffect(() => {
       if (editorType === "input") {
         if (eventKey) {
@@ -10443,6 +10449,9 @@ var DataTableCellEditor = React61__default.default.forwardRef(
         }
         inlineEditorRef.current?.show();
         inputRef.current?.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       } else if (editorType === "textarea") {
         textAreaRef.current?.select();
         inlineEditorRef.current?.show();
@@ -10453,6 +10462,9 @@ var DataTableCellEditor = React61__default.default.forwardRef(
       }
       return () => {
         inputRef.current?.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       };
     }, []);
     const handleRefs = (editorType2) => {
@@ -10490,7 +10502,7 @@ var DataTableCellEditor = React61__default.default.forwardRef(
             setCurrentValue(newValue);
           },
           stopEditing: (relatedTarget) => {
-            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table') === null;
+            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table"]') === null;
             onValueChange(getValue3());
             stopEditing2(isRelatedTargetOutsideTable);
             if (isRelatedTargetOutsideTable) {
@@ -10646,7 +10658,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowUnGroup",
     action() {
-      props.api.resetColumnState();
       props.api.removeRowGroupColumn(props.column);
     }
   };
@@ -10656,7 +10667,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowGroup",
     action() {
-      props.api.resetColumnState();
       props.api.addRowGroupColumn(props.column);
     }
   };
@@ -129131,7 +129141,7 @@ var Table = (props) => {
         (colDef) => isBulkEditingEnabledForRow(colDef, node)
       );
     },
-    [props]
+    [internalTableContext.columnDefinitions, props.rowSelectionEnabled]
   );
   const decoratedAutoGroupColDef = React61__default.default.useMemo(
     () => getDecoratedAutoGroupColDef(
@@ -129540,6 +129550,28 @@ var Table = (props) => {
   const groupDefaultExpandedProp = !onSSDR ? {
     groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
   } : {};
+  const rowSelection = React61__default.default.useMemo(() => {
+    return {
+      mode: "multiRow",
+      checkboxes: false,
+      headerCheckbox: false,
+      hideDisabledCheckboxes: true,
+      selectAll: "filtered",
+      isRowSelectable,
+      enableClickSelection: props.enableClickSelection,
+      groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
+    };
+  }, [
+    isRowSelectable,
+    props.enableClickSelection,
+    props.groupSelectsChildren,
+    internalTableContext.totalRowCount,
+    onSSDR
+  ]);
+  const memoizedFullWidthCellRenderer = React61__default.default.useCallback(
+    FullWidthCellRenderer(props.fullWidthCellRenderer),
+    [props.fullWidthCellRenderer]
+  );
   return /* @__PURE__ */ React61__default.default.createElement(
     Spinner,
     {
@@ -129589,9 +129621,7 @@ var Table = (props) => {
           components: {
             ...frameworkComponents.base
           },
-          fullWidthCellRenderer: FullWidthCellRenderer(
-            props.fullWidthCellRenderer
-          ),
+          fullWidthCellRenderer: memoizedFullWidthCellRenderer,
           getRowHeight: getMainTableRowHeight,
           getRowId: internalTableContext.getRowId,
           getRowStyle,
@@ -129655,16 +129685,7 @@ var Table = (props) => {
           rowClassRules,
           rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
           rowModelType: onSSDR ? "serverSide" : "clientSide",
-          rowSelection: {
-            mode: "multiRow",
-            checkboxes: false,
-            headerCheckbox: false,
-            hideDisabledCheckboxes: true,
-            selectAll: "filtered",
-            isRowSelectable,
-            enableClickSelection: props.enableClickSelection,
-            groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
-          },
+          rowSelection,
           animateRows: false,
           ...serverSideInfiniteScroll,
           suppressClickEdit: true,

package/dist/modern/index.js

@@ -10421,6 +10421,12 @@ var DataTableCellEditor = React61.forwardRef(
         }
       }
     }
+    function handleMouseDown(event) {
+      if (event.target !== inputRef.current) {
+        onValueChange(getValue3());
+        stopEditing2(false);
+      }
+    }
     React61.useEffect(() => {
       if (editorType === "input") {
         if (eventKey) {
@@ -10430,6 +10436,9 @@ var DataTableCellEditor = React61.forwardRef(
         }
         inlineEditorRef.current?.show();
         inputRef.current?.addEventListener("keydown", handleKeyDown);
+        document.addEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       } else if (editorType === "textarea") {
         textAreaRef.current?.select();
         inlineEditorRef.current?.show();
@@ -10440,6 +10449,9 @@ var DataTableCellEditor = React61.forwardRef(
       }
       return () => {
         inputRef.current?.removeEventListener("keydown", handleKeyDown);
+        document.removeEventListener("mousedown", handleMouseDown, {
+          capture: true
+        });
       };
     }, []);
     const handleRefs = (editorType2) => {
@@ -10477,7 +10489,7 @@ var DataTableCellEditor = React61.forwardRef(
             setCurrentValue(newValue);
           },
           stopEditing: (relatedTarget) => {
-            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table') === null;
+            const isRelatedTargetOutsideTable = relatedTarget?.closest('[data-qa="data-table-table"]') === null;
             onValueChange(getValue3());
             stopEditing2(isRelatedTargetOutsideTable);
             if (isRelatedTargetOutsideTable) {
@@ -10633,7 +10645,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowUnGroup",
     action() {
-      props.api.resetColumnState();
       props.api.removeRowGroupColumn(props.column);
     }
   };
@@ -10643,7 +10654,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowGroup",
     action() {
-      props.api.resetColumnState();
       props.api.addRowGroupColumn(props.column);
     }
   };
@@ -129118,7 +129128,7 @@ var Table = (props) => {
         (colDef) => isBulkEditingEnabledForRow(colDef, node)
       );
     },
-    [props]
+    [internalTableContext.columnDefinitions, props.rowSelectionEnabled]
   );
   const decoratedAutoGroupColDef = React61.useMemo(
     () => getDecoratedAutoGroupColDef(
@@ -129527,6 +129537,28 @@ var Table = (props) => {
   const groupDefaultExpandedProp = !onSSDR ? {
     groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded
   } : {};
+  const rowSelection = React61.useMemo(() => {
+    return {
+      mode: "multiRow",
+      checkboxes: false,
+      headerCheckbox: false,
+      hideDisabledCheckboxes: true,
+      selectAll: "filtered",
+      isRowSelectable,
+      enableClickSelection: props.enableClickSelection,
+      groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
+    };
+  }, [
+    isRowSelectable,
+    props.enableClickSelection,
+    props.groupSelectsChildren,
+    internalTableContext.totalRowCount,
+    onSSDR
+  ]);
+  const memoizedFullWidthCellRenderer = React61.useCallback(
+    FullWidthCellRenderer(props.fullWidthCellRenderer),
+    [props.fullWidthCellRenderer]
+  );
   return /* @__PURE__ */ React61.createElement(
     Spinner,
     {
@@ -129576,9 +129608,7 @@ var Table = (props) => {
           components: {
             ...frameworkComponents.base
           },
-          fullWidthCellRenderer: FullWidthCellRenderer(
-            props.fullWidthCellRenderer
-          ),
+          fullWidthCellRenderer: memoizedFullWidthCellRenderer,
           getRowHeight: getMainTableRowHeight,
           getRowId: internalTableContext.getRowId,
           getRowStyle,
@@ -129642,16 +129672,7 @@ var Table = (props) => {
           rowClassRules,
           rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
           rowModelType: onSSDR ? "serverSide" : "clientSide",
-          rowSelection: {
-            mode: "multiRow",
-            checkboxes: false,
-            headerCheckbox: false,
-            hideDisabledCheckboxes: true,
-            selectAll: "filtered",
-            isRowSelectable,
-            enableClickSelection: props.enableClickSelection,
-            groupSelects: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR ? "filteredDescendants" : "self"
-          },
+          rowSelection,
           animateRows: false,
           ...serverSideInfiniteScroll,
           suppressClickEdit: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "15.0.0-alpha.2",
+  "version": "15.0.0-alpha.3",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -79,7 +79,7 @@
     "styled-components": ">= 5.1.1 < 6"
   },
   "dependencies": {
-    "@procore/error-pages": "0.1.0",
+    "@procore/error-pages": "0.2.1",
     "@procore/labs-datetime-select": "0.1.1",
     "@procore/labs-group-by-select": "4.0.0",
     "@procore/toast-alert": "5.1.0",
@@ -90,7 +90,7 @@
     "lodash.debounce": "4.0.8",
     "lodash.isequal": "4.5.0",
     "ramda": "0.28.0",
-    "react-resize-detector": "12.0.0",
+    "react-resize-detector": "12.0.2",
     "ulid": "2.3.0"
   },
   "devDependencies": {
@@ -113,7 +113,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.3.1",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.17.8",
+    "@procore/core-react": "12.19.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",