@procore/data-table 14.24.0 → 14.25.0

package/dist/modern/index.js

@@ -7,6 +7,7 @@ import { Error as Error$1, Grip, Pencil, Building, ExternalLink, Clear, Calendar
 import classNames from 'classnames';
 import { isDate, parseISO, isSameDay, formatISO, isBefore } from 'date-fns';
 import { formatNumber, formatCurrency, formatPercentage } from '@procore/labs-financials-utils';
+import styled4, { css as css$1 } from 'styled-components';
 import { format } from '@procore/labs-financials-utils/dist/format';
 import { detectPrng, factory } from 'ulid';
 import { useToastAlertContext, ToastAlertProvider } from '@procore/toast-alert';
@@ -14,10 +15,9 @@ 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 { useResizeDetector } from 'react-resize-detector';
 import { DateTimeSelectField } from '@procore/labs-datetime-select';
 import Decimal from 'decimal.js';
-import styled3, { css as css$1 } from 'styled-components';
 import { getDatePlaceholder } from '@procore/globalization-toolkit';
 import { GroupBySelect } from '@procore/labs-group-by-select';
 
@@ -8667,6 +8667,9 @@ function getDateObject(date) {
   }
   return date;
 }
+var StyledDateSelect = styled4(DateSelect)`
+  background-color: #ffffff;
+`;
 var DateCellValue = ({
   columnDefinition,
   isGroup,
@@ -8714,7 +8717,7 @@ var Editor2 = React77.forwardRef(
         timeZone: columnDefinition.cellEditorParams?.timeZone
       },
       /* @__PURE__ */ React77.createElement(
-        DateSelect,
+        StyledDateSelect,
         {
           afterHide,
           className: cx4("input-cell"),
@@ -56477,7 +56480,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowUnGroup",
     action() {
-      props.columnApi.resetColumnState();
       props.columnApi.removeRowGroupColumn(props.column);
     }
   };
@@ -56487,7 +56489,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowGroup",
     action() {
-      props.columnApi.resetColumnState();
       props.columnApi.addRowGroupColumn(props.column);
     }
   };
@@ -56743,8 +56744,18 @@ var GenericHeaderRenderer = (props) => {
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React77.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React77.useState(false);
+  const [isRowGroupActive, setIsRowGroupActive] = React77.useState(
+    () => props.column.isRowGroupActive()
+  );
   const defaultMenuOptions = getMainMenuItems(
-    { ...props, onTableConfigChange },
+    {
+      ...props,
+      menuConfig: {
+        ...props.menuConfig,
+        isRowGroupActive
+      },
+      onTableConfigChange
+    },
     I18n
   );
   const headerCellRef = useRef(null);
@@ -56758,6 +56769,18 @@ var GenericHeaderRenderer = (props) => {
   }) : !!headerCheckboxSelection;
   const checkbox = useRef(null);
   const colId = props.column.getId();
+  React77.useEffect(() => {
+    const onRowGroupChanged = () => {
+      setIsRowGroupActive(props.column.isRowGroupActive());
+    };
+    props.column.addEventListener("columnRowGroupChanged", onRowGroupChanged);
+    return () => {
+      props.column.removeEventListener(
+        "columnRowGroupChanged",
+        onRowGroupChanged
+      );
+    };
+  }, []);
   React77.useEffect(() => {
     function calculatePosition() {
       const columns = props.columnApi.getColumnState();
@@ -105000,6 +105023,19 @@ function getRootRowNode(rowNode) {
   return rowNode.level > 0 && rowNode.parent ? getRootRowNode(rowNode.parent) : rowNode;
 }
 
+// src/utils/mergeRefs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref != null) {
+        ref.current = value;
+      }
+    });
+  };
+}
+
 // src/utils/setSiblingGroupsRowSelection.ts
 function setSiblingGroupsRowSelection(groupIndex, gridApi) {
   gridApi?.forEachNode((node) => {
@@ -109578,6 +109614,15 @@ var Table = (props) => {
     ["onGridReady"],
     props.UNSAFE_internalAGGridOverrides ?? {}
   );
+  const { ref: resizeRef } = useResizeDetector({
+    onResize: onContainerResize,
+    refreshMode: "debounce",
+    refreshRate: 400
+  });
+  const combinedRef = React77.useCallback(
+    mergeRefs(wrapperRef, resizeRef),
+    [wrapperRef, resizeRef]
+  );
   return /* @__PURE__ */ React77.createElement(
     Spinner,
     {
@@ -109592,133 +109637,125 @@ var Table = (props) => {
       }
     },
     /* @__PURE__ */ React77.createElement(
-      ReactResizeDetector,
+      "div",
       {
-        onResize: onContainerResize,
-        refreshMode: "debounce",
-        refreshRate: 400
-      },
-      /* @__PURE__ */ React77.createElement(
-        "div",
-        {
-          style: {
-            flex: 1,
-            width: "100%",
-            maxHeight: props.maxHeight && tableHeight < props.maxHeight ? void 0 : props.maxHeight
-          },
-          className: cx19("ag-theme-alpine", {
-            "ag-suppress-column-virtualization": suppressColumnVirtualisation
-          }),
-          ref: wrapperRef,
-          "data-qa": loadingStatus.loading ? "loading" : "loaded"
+        style: {
+          flex: 1,
+          width: "100%",
+          maxHeight: props.maxHeight && tableHeight < props.maxHeight ? void 0 : props.maxHeight
         },
-        /* @__PURE__ */ React77.createElement("style", null, `:root {
+        className: cx19("ag-theme-alpine", {
+          "ag-suppress-column-virtualization": suppressColumnVirtualisation
+        }),
+        ref: combinedRef,
+        "data-qa": loadingStatus.loading ? "loading" : "loaded"
+      },
+      /* @__PURE__ */ React77.createElement("style", null, `:root {
               --viewport-width: ${viewportWidth}px;
               --rowActions-width: ${rowActionsWidth.current}px;
             }`),
-        /* @__PURE__ */ React77.createElement(
-          AgGridReact,
-          {
-            aggFuncs: aggregationFunctions_exports,
-            alwaysAggregateAtRootLevel: !onSSDR,
-            autoGroupColumnDef: decoratedAutoGroupColDef,
-            cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
-            isGroupOpenByDefault: isClientSideGroupOpenByDefault,
-            isServerSideGroupOpenByDefault,
-            defaultColDef,
-            enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
-            enableCellTextSelection: internalTableContext.enableCellTextSelection,
-            enableCellEditingOnBackspace: true,
-            excelStyles: transformToExcelStyles(props.excelDataTypeFormats),
-            components: frameworkComponents.base,
-            fullWidthCellRenderer: FullWidthCellRenderer(
-              props.fullWidthCellRenderer
-            ),
-            getRowHeight: getMainTableRowHeight,
-            getRowId: internalTableContext.getRowId,
-            getRowStyle,
-            groupAllowUnbalanced: true,
-            groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded,
-            groupIncludeFooter: !onSSDR && props.groupIncludeFooter === void 0 ? true : props.groupIncludeFooter,
-            getGroupRowAgg: props.getGroupRowAgg ? getGroupRowAgg : void 0,
-            groupSelectsChildren: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR,
-            groupSelectsFiltered: true,
-            headerHeight: props.headerHeight,
-            icons: tableIcons,
-            isFullWidthRow: (props2) => {
-              const node = props2.rowNode;
-              return isFullWidthRow(node);
-            },
-            initialGroupOrderComparator: props.initialGroupOrderComparator ? (params) => props.initialGroupOrderComparator(
-              serializeNode(params.nodeA),
-              serializeNode(params.nodeB)
-            ) : void 0,
-            isRowSelectable,
-            loadingOverlayComponent: "loadingOverlayRenderer",
-            loadingOverlayComponentParams: {
-              loading: true
-            },
-            maintainColumnOrder: props.maintainColumnOrder,
-            modules: [
-              ...props.modules,
-              MasterDetailModule,
-              MenuModule,
-              RowGroupingModule,
-              SetFilterModule,
-              CsvExportModule,
-              ExcelExportModule,
-              SparklinesModule
-            ],
-            noRowsOverlayComponent: "emptyStateRenderer",
-            noRowsOverlayComponentParams: {
-              emptyStateRenderer: props.emptyStateRenderer
-            },
-            onCellValueChanged: internalOnCellValueChanged,
-            onColumnGroupOpened,
-            onColumnMoved,
-            onColumnPinned,
-            onColumnResized,
-            onColumnRowGroupChanged,
-            onDisplayedColumnsChanged,
-            onDragStopped,
-            onGridReady,
-            onColumnEverythingChanged: props.onColumnEverythingChanged,
-            onModelUpdated,
-            onCellFocused: props.onCellFocused,
-            onRowDragEnd,
-            onRowDragMove,
-            onRowGroupOpened: internalRowGroupOpened,
-            onRowSelected: internalOnRowSelected,
-            onSortChanged: onSortEventChanged,
-            onFilterChanged,
-            onFirstDataRendered: props.onFirstDataRendered,
-            paginateChildRows: props.paginateChildRows,
-            pagination: props.pagination,
-            paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
-            popupParent: props.popupParent,
-            pinnedBottomRowData: props.pinnedBottomRowData,
-            rowBuffer: props.rowBuffer,
-            rowClassRules,
-            rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
-            rowModelType: onSSDR ? "serverSide" : void 0,
-            rowSelection: "multiple",
-            ...serverSideInfiniteScroll,
-            suppressClickEdit: true,
-            suppressAggFuncInHeader: true,
-            suppressColumnMoveAnimation: true,
-            suppressColumnVirtualisation,
-            suppressContextMenu: true,
-            suppressFieldDotNotation: props.suppressFieldDotNotation,
-            suppressGroupRowsSticky: !props.stickyExpandedGroupRows,
-            suppressPropertyNamesCheck: true,
-            suppressRowClickSelection: props.suppressRowClickSelection || tableRowSelectionEnabled,
-            suppressPaginationPanel: true,
-            tabToNextCell: props.tabToNextCell,
-            ...clientSideRowData,
-            ...detailRowConfigProps,
-            ...overrideProps
-          }
-        )
+      /* @__PURE__ */ React77.createElement(
+        AgGridReact,
+        {
+          aggFuncs: aggregationFunctions_exports,
+          alwaysAggregateAtRootLevel: !onSSDR,
+          autoGroupColumnDef: decoratedAutoGroupColDef,
+          cacheBlockSize: props.paginationPageSize || defaultPaginationPageSize,
+          isGroupOpenByDefault: isClientSideGroupOpenByDefault,
+          isServerSideGroupOpenByDefault,
+          defaultColDef,
+          enableGroupEdit: internalTableContext.enableGroupEditAndValidation,
+          enableCellTextSelection: internalTableContext.enableCellTextSelection,
+          enableCellEditingOnBackspace: true,
+          excelStyles: transformToExcelStyles(props.excelDataTypeFormats),
+          components: frameworkComponents.base,
+          fullWidthCellRenderer: FullWidthCellRenderer(
+            props.fullWidthCellRenderer
+          ),
+          getRowHeight: getMainTableRowHeight,
+          getRowId: internalTableContext.getRowId,
+          getRowStyle,
+          groupAllowUnbalanced: true,
+          groupDefaultExpanded: props.groupsAlwaysExpanded ? -1 : props.groupDefaultExpanded,
+          groupIncludeFooter: !onSSDR && props.groupIncludeFooter === void 0 ? true : props.groupIncludeFooter,
+          getGroupRowAgg: props.getGroupRowAgg ? getGroupRowAgg : void 0,
+          groupSelectsChildren: internalTableContext.totalRowCount > 0 && props.groupSelectsChildren || !onSSDR,
+          groupSelectsFiltered: true,
+          headerHeight: props.headerHeight,
+          icons: tableIcons,
+          isFullWidthRow: (props2) => {
+            const node = props2.rowNode;
+            return isFullWidthRow(node);
+          },
+          initialGroupOrderComparator: props.initialGroupOrderComparator ? (params) => props.initialGroupOrderComparator(
+            serializeNode(params.nodeA),
+            serializeNode(params.nodeB)
+          ) : void 0,
+          isRowSelectable,
+          loadingOverlayComponent: "loadingOverlayRenderer",
+          loadingOverlayComponentParams: {
+            loading: true
+          },
+          maintainColumnOrder: props.maintainColumnOrder,
+          modules: [
+            ...props.modules,
+            MasterDetailModule,
+            MenuModule,
+            RowGroupingModule,
+            SetFilterModule,
+            CsvExportModule,
+            ExcelExportModule,
+            SparklinesModule
+          ],
+          noRowsOverlayComponent: "emptyStateRenderer",
+          noRowsOverlayComponentParams: {
+            emptyStateRenderer: props.emptyStateRenderer
+          },
+          onCellValueChanged: internalOnCellValueChanged,
+          onColumnGroupOpened,
+          onColumnMoved,
+          onColumnPinned,
+          onColumnResized,
+          onColumnRowGroupChanged,
+          onDisplayedColumnsChanged,
+          onDragStopped,
+          onGridReady,
+          onColumnEverythingChanged: props.onColumnEverythingChanged,
+          onModelUpdated,
+          onCellFocused: props.onCellFocused,
+          onRowDragEnd,
+          onRowDragMove,
+          onRowGroupOpened: internalRowGroupOpened,
+          onRowSelected: internalOnRowSelected,
+          onSortChanged: onSortEventChanged,
+          onFilterChanged,
+          onFirstDataRendered: props.onFirstDataRendered,
+          paginateChildRows: props.paginateChildRows,
+          pagination: props.pagination,
+          paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
+          popupParent: props.popupParent,
+          pinnedBottomRowData: props.pinnedBottomRowData,
+          rowBuffer: props.rowBuffer,
+          rowClassRules,
+          rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,
+          rowModelType: onSSDR ? "serverSide" : void 0,
+          rowSelection: "multiple",
+          ...serverSideInfiniteScroll,
+          suppressClickEdit: true,
+          suppressAggFuncInHeader: true,
+          suppressColumnMoveAnimation: true,
+          suppressColumnVirtualisation,
+          suppressContextMenu: true,
+          suppressFieldDotNotation: props.suppressFieldDotNotation,
+          suppressGroupRowsSticky: !props.stickyExpandedGroupRows,
+          suppressPropertyNamesCheck: true,
+          suppressRowClickSelection: props.suppressRowClickSelection || tableRowSelectionEnabled,
+          suppressPaginationPanel: true,
+          tabToNextCell: props.tabToNextCell,
+          ...clientSideRowData,
+          ...detailRowConfigProps,
+          ...overrideProps
+        }
       )
     ),
     props.pagination && gridApi && /* @__PURE__ */ React77.createElement(
@@ -109862,7 +109899,7 @@ var FILTERS_GROUP_EXPANDABLE_AREA_VERTICAL_MARGIN = spacing.md;
 var FILTERS_GROUP_ITEM_HEIGHT = 60;
 var ITEMS_IN_FILTERS_GROUP = 5;
 var FILTERS_GROUP_EXPANDABLE_AREA_HEIGHT = (FILTERS_GROUP_ITEM_HEIGHT + spacing.xl) * ITEMS_IN_FILTERS_GROUP + BORDER_WIDTH;
-var StyledPanelSection = styled3(Panel.Section)`
+var StyledPanelSection = styled4(Panel.Section)`
   // Filters Group container styles
   &.filters-list-group-section {
     padding-bottom: ${FILTERS_GROUP_VERTICAL_MARGIN}px;
@@ -110155,7 +110192,7 @@ var ConfigPanelButton = () => {
 var QuickFilterLabel = React77.forwardRef(({ enabled, ...props }, ref) => {
   return /* @__PURE__ */ React77.createElement(StyledQuickFilterLabel, { $enabled: enabled }, /* @__PURE__ */ React77.createElement(SelectButton, { ref, ...props }));
 });
-var StyledQuickFilterLabel = styled3.div`
+var StyledQuickFilterLabel = styled4.div`
   ${StyledSelectButton} {
     width: auto;
     max-width: 380px;
@@ -110782,7 +110819,7 @@ var LocationQuickFilterRenderer = ({
   );
 };
 var LocationQuickFilterRenderer_default = LocationQuickFilterRenderer;
-var StyledFilterPresetPopoverContent = styled3(Popover.Content)`
+var StyledFilterPresetPopoverContent = styled4(Popover.Content)`
   padding: ${spacing.sm}px ${spacing.lg}px;
 `;
 var getValueLabel = (isValueEmpty, value, placeholder, filterName) => {
@@ -110864,7 +110901,7 @@ var getSuperSelectFilterPreset = (columnDefinition) => {
     selectionStyle: "highlight"
   };
 };
-var StyledSuperSelectWrapper = styled3.div`
+var StyledSuperSelectWrapper = styled4.div`
   ${UNSAFE_StyledSuperSelectTrigger} {
     width: auto;
   }
@@ -111317,7 +111354,7 @@ var FilterIcon = () => {
     )
   );
 };
-var StyledFilterTokenWrapper = styled3.div`
+var StyledFilterTokenWrapper = styled4.div`
   ${UNSAFE_StyledFilterTokenLabel} {
     font-weight: ${typographyWeights.semibold};
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.24.0",
+  "version": "14.25.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -89,7 +89,7 @@
     "lodash.debounce": "4.0.8",
     "lodash.isequal": "4.5.0",
     "ramda": "0.28.0",
-    "react-resize-detector": "8.0.4",
+    "react-resize-detector": "12.0.0",
     "ulid": "2.3.0"
   },
   "devDependencies": {
@@ -112,7 +112,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.3.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.17.3",
+    "@procore/core-react": "12.17.5",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "3.0.1",