@procore/data-table 13.0.0 → 13.1.0

package/dist/modern/index.js

@@ -55090,7 +55090,7 @@ function getParentSelectionState(parent, affectedRows, parentChildrenMap) {
 function getAffectedRows(currentRows, selectionNode, affectedRows) {
   const isNodeRootLevel = isNodeRootLevelOfGrid(selectionNode.parent);
   const nodeId = selectionNode.id;
-  const isRowSelected = !!selectionNode.isSelected();
+  const isRowSelected2 = !!selectionNode.isSelected();
   const parentChildrenMap = {};
   if (selectionNode.group || selectionNode.parent?.group && !isNodeRootLevel) {
     currentRows.forEach((row) => {
@@ -55109,7 +55109,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
       }
     });
   }
-  const selectedState = isRowSelected ? rowSelectionState.selected : rowSelectionState.unselected;
+  const selectedState = isRowSelected2 ? rowSelectionState.selected : rowSelectionState.unselected;
   affectedRows[nodeId] = {
     node: selectionNode,
     selectedState
@@ -55155,7 +55155,7 @@ function getAffectedRows(currentRows, selectionNode, affectedRows) {
     ).forEach((node) => {
       affectedRows[node.id] = {
         node,
-        selectedState: isRowSelected ? rowSelectionState.selected : rowSelectionState.unselected
+        selectedState: isRowSelected2 ? rowSelectionState.selected : rowSelectionState.unselected
       };
     });
   }
@@ -55214,7 +55214,8 @@ function getSelectedState(node, affectedRows) {
 }
 function ServerSideRowCheckbox(props) {
   const { rowSelectionRef } = useInternalTableContext();
-  const indeterminate = rowSelectionRef.current?.affectedRows[props.node.id]?.selectedState === "indeterminate" ? true : false;
+  const indeterminate = rowSelectionRef.current?.affectedRows[props.node.id]?.selectedState === "indeterminate";
+  const { tableRef } = useInternalTableContext();
   const checked = getSelectedState(
     props.node,
     rowSelectionRef.current?.affectedRows
@@ -55228,7 +55229,7 @@ function ServerSideRowCheckbox(props) {
       "data-qa": "rowCheckbox",
       onClick: noop2,
       onChange: () => {
-        props.node.setSelected(!props.node.isSelected());
+        props.node.isSelected() ? tableRef?.current?.deselectRows([props.node.id]) : tableRef?.current?.selectRows([props.node.id]);
       }
     }
   ));
@@ -55620,18 +55621,31 @@ var DataTableCellRenderer = ({
     )
   ));
 };
+function getStartingValue(eventKey, editorType, existingValue) {
+  if (eventKey && editorType === "input" && eventKey !== "Enter") {
+    if (eventKey === "Backspace") {
+      return "";
+    }
+    return eventKey;
+  }
+  return existingValue;
+}
 var DataTableCellEditor = React82__default.default.forwardRef(
   ({
+    api,
     colDef,
     Component: Component4,
     context,
     data,
     editorType,
+    eventKey,
     node,
     parseValue,
     stopEditing,
     value
   }, ref) => {
+    const startingValue = getStartingValue(eventKey, editorType, value);
+    const [currentValue, setCurrentValue] = React82.useState(startingValue);
     const { rowHeight, tableRef } = useInternalTableContext();
     const inlineEditorRef = React82__default.default.useRef(null);
     const inputRef = React82__default.default.useRef(null);
@@ -55668,10 +55682,26 @@ var DataTableCellEditor = React82__default.default.forwardRef(
         }
       };
     });
+    function handleKeyDown(event) {
+      if (node.rowIndex !== null && colDef.field && editorType === "input" && !event.shiftKey && !event.metaKey && !event.altKey && !event.ctrlKey) {
+        if (event.key === "ArrowUp") {
+          stopEditing(true);
+          api.setFocusedCell(node.rowIndex - 1, colDef.field, node.rowPinned);
+        } else if (event.key === "ArrowDown" || event.key === "Enter") {
+          stopEditing(true);
+          api.setFocusedCell(node.rowIndex + 1, colDef.field, node.rowPinned);
+        }
+      }
+    }
     React82__default.default.useEffect(() => {
       if (editorType === "input") {
-        inputRef.current?.select();
+        if (eventKey) {
+          inputRef.current?.focus();
+        } else {
+          inputRef.current?.select();
+        }
         inlineEditorRef.current?.show();
+        inputRef.current?.addEventListener("keydown", handleKeyDown);
       } else if (editorType === "textarea") {
         textAreaRef.current?.select();
         inlineEditorRef.current?.show();
@@ -55680,6 +55710,9 @@ var DataTableCellEditor = React82__default.default.forwardRef(
         selectRef.current?.focus();
         inlineEditorRef.current?.show();
       }
+      return () => {
+        inputRef.current?.removeEventListener("keydown", handleKeyDown);
+      };
     }, []);
     const handleRefs = (editorType2) => {
       const getRef = (refType) => coreReact.UNSAFE_mergeRefs(refType, ref);
@@ -55710,10 +55743,13 @@ var DataTableCellEditor = React82__default.default.forwardRef(
           parentId: context?.parentId,
           rowPinned: node.rowPinned,
           rowHeight,
-          setDataValue: (field, newValue) => node.setDataValue(field, newValue),
+          setDataValue: (field, newValue) => {
+            node.setDataValue(field, newValue);
+            setCurrentValue(newValue);
+          },
           stopEditing,
           tableApi: tableRef?.current,
-          value,
+          value: currentValue,
           ref: handleRefs(editorType)
         }
       )
@@ -56087,11 +56123,14 @@ var SortComponent = (props) => {
   }
   return null;
 };
+var isRowSelected = (rowNode) => {
+  return Boolean(rowNode.selectable ? rowNode.isSelected() : true);
+};
 var GenericHeaderRenderer = (props) => {
   const colDef = props.column.getColDef();
   const HeaderNode = colDef.headerComponentParams?.headerNode;
   const I18n = coreReact.useI18nContext();
-  const { columnApi, gridApi, onServerSideDataRequest } = useInternalTableContext();
+  const { columnApi, tableRef, gridApi, onServerSideDataRequest } = useInternalTableContext();
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React82__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React82__default.default.useState(false);
@@ -56127,7 +56166,9 @@ var GenericHeaderRenderer = (props) => {
   }, []);
   const onSortToggled = (event) => {
     let currentSort = null;
-    if (event.target.parentElement === checkbox.current?.parentElement) {
+    if (Array.from(checkbox.current?.parentElement?.children || []).includes(
+      event.target?.parentElement
+    )) {
       return;
     }
     if (props.enableSorting) {
@@ -56179,6 +56220,9 @@ var GenericHeaderRenderer = (props) => {
   }, [props.column]);
   const [isExpandable, setIsExpandable] = React82__default.default.useState(false);
   React82__default.default.useEffect(() => {
+    if (onSSDR) {
+      return;
+    }
     const hasExpandableNodes = !!findNode(
       (node) => node.isExpandable(),
       props.api
@@ -56303,14 +56347,9 @@ var GenericHeaderRenderer = (props) => {
       return;
     }
     function updateSelectAllCheckbox() {
-      const currentPageIds = getCurrentPageIds();
-      const selectedRowIds = (props.api.getSelectedRows() ?? []).map(
-        ({ id }) => id
-      );
-      const isAllSelected = currentPageIds.every(
-        (id) => selectedRowIds.includes(id)
-      );
-      const isPartialSelected = !isAllSelected && currentPageIds.some((id) => selectedRowIds.includes(id));
+      const currentRows = getCurrentRows(gridApi);
+      const isAllSelected = currentRows.length && currentRows.every(isRowSelected);
+      const isPartialSelected = !isAllSelected && currentRows.some(isRowSelected);
       if (isAllSelected) {
         setSelectAll("all" /* All */);
       } else if (isPartialSelected) {
@@ -56322,49 +56361,19 @@ var GenericHeaderRenderer = (props) => {
     props.api.addEventListener(selectionChanged, updateSelectAllCheckbox);
     props.api.addEventListener(paginationChanged, updateSelectAllCheckbox);
     return () => {
-      props.api.removeEventListener(
-        "selectionChanged",
-        updateSelectAllCheckbox
-      );
-      props.api.removeEventListener(
-        "paginationChanged",
-        updateSelectAllCheckbox
-      );
+      props.api.removeEventListener(selectionChanged, updateSelectAllCheckbox);
+      props.api.removeEventListener(paginationChanged, updateSelectAllCheckbox);
     };
   }, [isFirstColumn2, selectAll, props.selectionSSREnabled]);
-  const getCurrentPageIds = () => {
-    const rowCount = props.api.getDisplayedRowCount();
-    const lastGridIndex = rowCount - 1;
-    const currentPage = props.api.paginationGetCurrentPage();
-    const pageSize = props.api.paginationGetPageSize();
-    const startPageIndex = currentPage * pageSize;
-    let endPageIndex = (currentPage + 1) * pageSize - 1;
-    if (endPageIndex > lastGridIndex) {
-      endPageIndex = lastGridIndex;
-    }
-    return [...Array(endPageIndex - startPageIndex + 1).keys()].map(
-      (index) => props.api.getDisplayedRowAtIndex(index + startPageIndex)?.data?.id
-    );
-  };
-  const handleSSRSelectAll = (param) => {
-    if (!props.selectionSSREnabled) {
-      return;
-    }
-    const selectedRowIds = (props.api.getSelectedRows() ?? []).map(
-      ({ id }) => id
-    );
-    const currentPageIds = getCurrentPageIds();
-    if (param === "all" /* All */) {
-      [.../* @__PURE__ */ new Set([...selectedRowIds, ...currentPageIds])]?.forEach(
-        (id) => {
-          props.api.getRowNode(id.toString())?.setSelected(true);
-        }
-      );
-    }
-    if (param === "none" /* None */) {
-      currentPageIds.forEach((id) => {
-        props.api.getRowNode(id.toString())?.setSelected(false);
-      });
+  const toggleSelectAll = () => {
+    const nextSelectedState = selectAll === "all" /* All */ ? "none" /* None */ : "all" /* All */;
+    setSelectAll(nextSelectedState);
+    props.onSelectAll?.(nextSelectedState);
+    const isSelectAll = nextSelectedState == "all" /* All */;
+    if (props.selectionSSREnabled) {
+      isSelectAll ? tableRef?.current?.selectAll() : tableRef?.current?.deselectAll();
+    } else {
+      isSelectAll ? props.api.selectAllFiltered() : props.api.deselectAllFiltered();
     }
   };
   return /* @__PURE__ */ React82__default.default.createElement(
@@ -56403,15 +56412,7 @@ var GenericHeaderRenderer = (props) => {
           indeterminate: selectAll === "partial",
           onClick: (e) => e.stopPropagation(),
           onChange: () => {
-            if (selectAll === "all" /* All */) {
-              setSelectAll("none" /* None */);
-              props.onSelectAll?.("none" /* None */);
-              onSSDR ? handleSSRSelectAll("none" /* None */) : props.api.deselectAllFiltered();
-            } else {
-              setSelectAll("all" /* All */);
-              props.onSelectAll?.("all" /* All */);
-              onSSDR ? handleSSRSelectAll("all" /* All */) : props.api.selectAllFiltered();
-            }
+            toggleSelectAll();
           }
         }
       ),
@@ -58684,18 +58685,30 @@ var ClientSideRowModelModule = {
   rowModel: "clientSide",
   beans: [ClientSideRowModel, FilterStage, SortStage, FlattenStage, SortService, FilterService, ImmutableService]
 };
+var getSelectedRows = ({
+  gridApi,
+  rowSelectionRef
+}) => {
+  const serverSideRows = Object.values(
+    rowSelectionRef?.current?.affectedRows || {}
+  ).filter(
+    (affectedRow) => affectedRow.selectedState === rowSelectionState.selected
+  ).map((affectedRow) => affectedRow.node);
+  return gridApi?.getModel().getType() === "serverSide" ? serverSideRows : gridApi?.getSelectedNodes() ?? [];
+};
 var useRowSelectionState = () => {
   const [selectedRows, setSelectedRows] = React82__default.default.useState([]);
-  const { gridApi } = useInternalTableContext();
+  const { gridApi, rowSelectionRef } = useInternalTableContext();
   React82__default.default.useEffect(() => {
     function selectionEventFunction() {
-      const rows = gridApi?.getSelectedNodes() ?? [];
-      setSelectedRows(rows);
+      setSelectedRows(getSelectedRows({ gridApi, rowSelectionRef }));
     }
     selectionEventFunction();
     gridApi?.addEventListener("selectionChanged", selectionEventFunction);
+    gridApi?.addEventListener("paginationChanged", selectionEventFunction);
     return () => {
       gridApi?.removeEventListener("selectionChanged", selectionEventFunction);
+      gridApi?.removeEventListener("paginationChanged", selectionEventFunction);
     };
   }, [gridApi]);
   return selectedRows;
@@ -75551,6 +75564,7 @@ var useTableApi = ({
     filterStorage,
     onTableConfigChange,
     rowHeight,
+    rowSelectionRef,
     setRowHeight: internalSetRowHeight,
     searchStorage
   } = useInternalTableContext();
@@ -75683,11 +75697,11 @@ var useTableApi = ({
             columnDefinition: colDef,
             node: { rowPinned: false },
             data: {}
-          }) === true
+          })
         );
       }
       if (typeof colDef.bulkEditable === "boolean") {
-        return colDef.bulkEditable === true;
+        return colDef.bulkEditable;
       }
       if (typeof colDef.editable === "function") {
         return (
@@ -75699,7 +75713,7 @@ var useTableApi = ({
             columnDefinition: colDef,
             node: { rowPinned: false },
             data: {}
-          }) === true
+          })
         );
       }
       return colDef.editable === true;
@@ -75871,13 +75885,58 @@ var useTableApi = ({
     [internalSetRowHeight]
   );
   const gridApiMethods = React82__default.default.useMemo(
-    () => buildPartialTableApi({ gridApi, columnApi, rowHeight, filterStorage }),
+    () => buildPartialTableApi({
+      gridApi,
+      columnApi,
+      rowHeight,
+      filterStorage,
+      rowSelectionRef
+    }),
     [columnApi, gridApi, rowHeight, filterStorage]
   );
+  const onSelectionChanged = (rowNode) => {
+    const isGrouped = rowNode.group || rowNode.parent?.group && !isNodeRootLevelOfGrid(rowNode.parent);
+    const currAffectedRows = rowSelectionRef.current.affectedRows;
+    if (!isGrouped) {
+      rowSelectionRef.current.affectedRows = {
+        ...currAffectedRows,
+        [rowNode.id]: {
+          node: rowNode,
+          selectedState: rowNode.isSelected() ? rowSelectionState.selected : rowSelectionState.unselected
+        }
+      };
+      gridApi?.redrawRows({ rowNodes: [rowNode] });
+      return;
+    }
+    const rowsToUpdate = getAffectedRows(
+      getCurrentRows(gridApi),
+      rowNode,
+      currAffectedRows
+    );
+    const rowValues = Object.values(rowsToUpdate);
+    rowValues.forEach((row) => {
+      row.node.setSelected(
+        row.selectedState === rowSelectionState.selected,
+        false,
+        "checkboxSelected"
+      );
+    });
+    rowSelectionRef.current.affectedRows = {
+      ...currAffectedRows,
+      ...rowsToUpdate
+    };
+    gridApi?.redrawRows({
+      rowNodes: rowValues.map((rowValue) => rowValue.node)
+    });
+  };
   const selectRows = React82__default.default.useCallback(
     (rowIds) => {
       rowIds?.forEach((id) => {
-        gridApi?.getRowNode(id.toString())?.setSelected(true);
+        const rowNode = gridApi?.getRowNode(id.toString());
+        if (!rowNode)
+          return;
+        rowNode.setSelected(true);
+        onSelectionChanged(rowNode);
       });
     },
     [gridApi]
@@ -75885,7 +75944,11 @@ var useTableApi = ({
   const deselectRows = React82__default.default.useCallback(
     (rowIds) => {
       rowIds?.forEach((id) => {
-        gridApi?.getRowNode(id.toString())?.setSelected(false);
+        const rowNode = gridApi?.getRowNode(id.toString());
+        if (!rowNode)
+          return;
+        rowNode.setSelected(false);
+        onSelectionChanged(rowNode);
       });
     },
     [gridApi]
@@ -75934,7 +75997,8 @@ function buildPartialTableApi({
   gridApi,
   rowHeight,
   columnApi,
-  filterStorage
+  filterStorage,
+  rowSelectionRef
 }) {
   const setRowData = (rows) => {
     if (gridApi?.getModel().getType() === "serverSide") {
@@ -75974,7 +76038,8 @@ function buildPartialTableApi({
       gridApi: detailGridApi,
       columnApi: detailGridColumnApi,
       rowHeight,
-      filterStorage
+      filterStorage,
+      rowSelectionRef
     }) : void 0;
   };
   const getTableConfiguration = () => {
@@ -76007,44 +76072,58 @@ function buildPartialTableApi({
     }
     return {};
   };
-  const getSelectedRows = () => {
+  const getSelectedRows2 = () => {
     return gridApi?.getSelectedRows() || [];
   };
-  const selectAll = () => {
-    const model = gridApi?.getModel();
-    if (model?.getType() === "clientSide") {
-      gridApi?.selectAll();
-    }
-    gridApi?.forEachNode(function(node) {
-      if (node.isSelected() === false) {
-        node.setSelected(true, void 0, "apiSelectAll");
+  const rowsNeedingUpdateAfterSelectAll = (isSelectAll) => {
+    const prevRowNodes = gridApi?.getRenderedNodes() || [];
+    return prevRowNodes.filter((prevRowNode) => {
+      if (!prevRowNode.selectable) {
+        return false;
       }
+      return isSelectAll ? !prevRowNode.isSelected() : prevRowNode.isSelected();
     });
+  };
+  const updateAffectedRowsOnToggle = (isSelected) => {
+    const prevAffectedRows = rowSelectionRef.current.affectedRows;
+    const currentRows = getCurrentRows(gridApi);
+    rowSelectionRef.current.affectedRows = currentRows.reduce(
+      (accum, rowNode) => {
+        if (!rowNode.id) {
+          return accum;
+        }
+        return {
+          ...accum,
+          [rowNode.id]: {
+            node: rowNode,
+            selectedState: isSelected ? rowSelectionState.selected : rowSelectionState.unselected
+          }
+        };
+      },
+      prevAffectedRows
+    );
+  };
+  const selectAll = () => {
+    const nodesToUpdate = rowsNeedingUpdateAfterSelectAll(true);
+    gridApi?.selectAll();
     if (gridApi?.getModel().getType() === "serverSide") {
-      gridApi?.redrawRows();
+      updateAffectedRowsOnToggle(true);
+      gridApi?.redrawRows({ rowNodes: nodesToUpdate });
     }
   };
   const deselectAll = () => {
-    const model = gridApi?.getModel();
-    if (model?.getType() === "clientSide") {
-      gridApi?.deselectAll();
-    }
-    gridApi?.forEachNode(function(node) {
-      if (node.isSelected() === true) {
-        node.setSelected(false, void 0, "apiSelectAll");
-      }
-    });
+    const nodesToUpdate = rowsNeedingUpdateAfterSelectAll(false);
+    gridApi?.deselectAll();
     if (gridApi?.getModel().getType() === "serverSide") {
-      gridApi?.redrawRows();
+      updateAffectedRowsOnToggle(false);
+      gridApi?.redrawRows({ rowNodes: nodesToUpdate });
     }
   };
   const collapseAll = () => {
     gridApi?.collapseAll();
   };
   const expandAll = () => {
-    gridApi?.forEachNode((node) => {
-      node.setExpanded(true);
-    });
+    gridApi?.expandAll();
   };
   const setRowNodeExpanded = (rowNode, expanded) => {
     return gridApi?.setRowNodeExpanded(rowNode, expanded);
@@ -76075,7 +76154,7 @@ function buildPartialTableApi({
     getFilteredAndSortedRowNodes,
     getRootAggregateData,
     getRowData,
-    getSelectedRows,
+    getSelectedRows: getSelectedRows2,
     getTableConfiguration,
     refreshCells,
     setPinnedBottomRowData,
@@ -76995,42 +77074,6 @@ var Table = (props) => {
     },
     [props.onRowGroupOpened]
   );
-  const onSelectionChanged = (event) => {
-    if (!internalTableContext.onServerSideDataRequest || event.source === "apiSelectAll") {
-      return;
-    }
-    const previousSelectedIds = Object.keys(
-      rowSelectionRef.current.affectedRows
-    ).filter(
-      (nodeId) => rowSelectionRef.current.affectedRows[nodeId].selectedState === rowSelectionState.selected
-    );
-    const affectedRows = rowSelectionRef.current.affectedRows;
-    const eventSelectedIds = event.api.getSelectedNodes().map((node) => node.id);
-    const diff = ramda.symmetricDifference(eventSelectedIds, previousSelectedIds);
-    const selectionNode = event.api.getRowNode(diff[0]);
-    if (selectionNode === void 0) {
-      return;
-    }
-    const rowsToUpdate = getAffectedRows(
-      getCurrentRows(event.api),
-      selectionNode,
-      affectedRows
-    );
-    Object.values(rowsToUpdate).forEach((row) => {
-      row.node.setSelected(
-        row.selectedState === rowSelectionState.selected,
-        void 0,
-        event.source
-      );
-    });
-    rowSelectionRef.current.affectedRows = {
-      ...affectedRows,
-      ...rowsToUpdate
-    };
-    gridApi?.redrawRows({
-      rowNodes: Object.values(rowsToUpdate).map((val) => val.node)
-    });
-  };
   const getGroupRowAgg = React82__default.default.useCallback(
     (params) => {
       const agNodes = params.nodes;
@@ -77183,6 +77226,7 @@ var Table = (props) => {
             cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
             defaultColDef,
             enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
+            enableCellEditingOnBackspace: true,
             excelStyles: transformToExcelStyles(props.excelDataTypeFormats),
             components: frameworkComponents,
             fullWidthCellRenderer: FullWidthCellRenderer(
@@ -77239,7 +77283,6 @@ var Table = (props) => {
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
             onRowSelected: internalOnRowSelected,
-            onSelectionChanged,
             onSortChanged: onSortEventChanged,
             onFilterChanged,
             onFirstDataRendered: props.onFirstDataRendered,
@@ -77292,6 +77335,7 @@ var TablePagination = ({
     page: 0,
     items: 0
   });
+  const { rowSelectionRef } = useInternalTableContext();
   React82__default.default.useEffect(() => {
     function onPaginationChanged(params) {
       if (gridApi && params.api.paginationGetCurrentPage() !== pagination.page || pagination.items !== params.api.paginationGetRowCount()) {
@@ -77299,6 +77343,10 @@ var TablePagination = ({
           page: params.api.paginationGetCurrentPage(),
           items: params.api.paginationGetRowCount()
         });
+        if (params.api.getModel().getType() === "serverSide") {
+          rowSelectionRef?.current?.affectedRows && (rowSelectionRef.current.affectedRows = {});
+          gridApi?.deselectAll();
+        }
       }
     }
     gridApi?.addEventListener("paginationChanged", onPaginationChanged);