@procore/data-table 14.24.0 → 14.25.0

package/dist/modern/index.cjs

@@ -9,6 +9,7 @@ var coreIcons = require('@procore/core-icons');
 var classNames = require('classnames');
 var dateFns = require('date-fns');
 var labsFinancialsUtils = require('@procore/labs-financials-utils');
+var styled4 = require('styled-components');
 var format = require('@procore/labs-financials-utils/dist/format');
 var ulid$1 = require('ulid');
 var toastAlert = require('@procore/toast-alert');
@@ -16,10 +17,9 @@ var ReactDOM = require('react-dom');
 var server = require('react-dom/server');
 var webSdkStorage = require('@procore/web-sdk-storage');
 var _isEqual = require('lodash.isequal');
-var ReactResizeDetector = require('react-resize-detector');
+var reactResizeDetector = require('react-resize-detector');
 var labsDatetimeSelect = require('@procore/labs-datetime-select');
 var Decimal = require('decimal.js');
-var styled3 = require('styled-components');
 var globalizationToolkit = require('@procore/globalization-toolkit');
 var labsGroupBySelect = require('@procore/labs-group-by-select');
 
@@ -29,11 +29,10 @@ var React77__default = /*#__PURE__*/_interopDefault(React77);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var debounce5__default = /*#__PURE__*/_interopDefault(debounce5);
 var classNames__default = /*#__PURE__*/_interopDefault(classNames);
+var styled4__default = /*#__PURE__*/_interopDefault(styled4);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 var _isEqual__default = /*#__PURE__*/_interopDefault(_isEqual);
-var ReactResizeDetector__default = /*#__PURE__*/_interopDefault(ReactResizeDetector);
 var Decimal__default = /*#__PURE__*/_interopDefault(Decimal);
-var styled3__default = /*#__PURE__*/_interopDefault(styled3);
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -8681,6 +8680,9 @@ function getDateObject(date) {
   }
   return date;
 }
+var StyledDateSelect = styled4__default.default(coreReact.DateSelect)`
+  background-color: #ffffff;
+`;
 var DateCellValue = ({
   columnDefinition,
   isGroup,
@@ -8728,7 +8730,7 @@ var Editor2 = React77__default.default.forwardRef(
         timeZone: columnDefinition.cellEditorParams?.timeZone
       },
       /* @__PURE__ */ React77__default.default.createElement(
-        coreReact.DateSelect,
+        StyledDateSelect,
         {
           afterHide,
           className: cx4("input-cell"),
@@ -56491,7 +56493,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowUnGroup",
     action() {
-      props.columnApi.resetColumnState();
       props.columnApi.removeRowGroupColumn(props.column);
     }
   };
@@ -56501,7 +56502,6 @@ var getMainMenuItems = (props, I18n) => {
     }),
     value: "rowGroup",
     action() {
-      props.columnApi.resetColumnState();
       props.columnApi.addRowGroupColumn(props.column);
     }
   };
@@ -56757,8 +56757,18 @@ var GenericHeaderRenderer = (props) => {
   const onSSDR = Boolean(onServerSideDataRequest);
   const [sortOrder, setSortOrder] = React77__default.default.useState(props.column.getSort());
   const [isFirstColumn2, setIsFirstColumn] = React77__default.default.useState(false);
+  const [isRowGroupActive, setIsRowGroupActive] = React77__default.default.useState(
+    () => props.column.isRowGroupActive()
+  );
   const defaultMenuOptions = getMainMenuItems(
-    { ...props, onTableConfigChange },
+    {
+      ...props,
+      menuConfig: {
+        ...props.menuConfig,
+        isRowGroupActive
+      },
+      onTableConfigChange
+    },
     I18n
   );
   const headerCellRef = React77.useRef(null);
@@ -56772,6 +56782,18 @@ var GenericHeaderRenderer = (props) => {
   }) : !!headerCheckboxSelection;
   const checkbox = React77.useRef(null);
   const colId = props.column.getId();
+  React77__default.default.useEffect(() => {
+    const onRowGroupChanged = () => {
+      setIsRowGroupActive(props.column.isRowGroupActive());
+    };
+    props.column.addEventListener("columnRowGroupChanged", onRowGroupChanged);
+    return () => {
+      props.column.removeEventListener(
+        "columnRowGroupChanged",
+        onRowGroupChanged
+      );
+    };
+  }, []);
   React77__default.default.useEffect(() => {
     function calculatePosition() {
       const columns = props.columnApi.getColumnState();
@@ -105014,6 +105036,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) => {
@@ -109592,6 +109627,15 @@ var Table = (props) => {
     ["onGridReady"],
     props.UNSAFE_internalAGGridOverrides ?? {}
   );
+  const { ref: resizeRef } = reactResizeDetector.useResizeDetector({
+    onResize: onContainerResize,
+    refreshMode: "debounce",
+    refreshRate: 400
+  });
+  const combinedRef = React77__default.default.useCallback(
+    mergeRefs(wrapperRef, resizeRef),
+    [wrapperRef, resizeRef]
+  );
   return /* @__PURE__ */ React77__default.default.createElement(
     Spinner,
     {
@@ -109606,133 +109650,125 @@ var Table = (props) => {
       }
     },
     /* @__PURE__ */ React77__default.default.createElement(
-      ReactResizeDetector__default.default,
+      "div",
       {
-        onResize: onContainerResize,
-        refreshMode: "debounce",
-        refreshRate: 400
-      },
-      /* @__PURE__ */ React77__default.default.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__default.default.createElement("style", null, `:root {
+        className: cx19("ag-theme-alpine", {
+          "ag-suppress-column-virtualization": suppressColumnVirtualisation
+        }),
+        ref: combinedRef,
+        "data-qa": loadingStatus.loading ? "loading" : "loaded"
+      },
+      /* @__PURE__ */ React77__default.default.createElement("style", null, `:root {
               --viewport-width: ${viewportWidth}px;
               --rowActions-width: ${rowActionsWidth.current}px;
             }`),
-        /* @__PURE__ */ React77__default.default.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__default.default.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__default.default.createElement(
@@ -109876,7 +109912,7 @@ var FILTERS_GROUP_EXPANDABLE_AREA_VERTICAL_MARGIN = coreReact.spacing.md;
 var FILTERS_GROUP_ITEM_HEIGHT = 60;
 var ITEMS_IN_FILTERS_GROUP = 5;
 var FILTERS_GROUP_EXPANDABLE_AREA_HEIGHT = (FILTERS_GROUP_ITEM_HEIGHT + coreReact.spacing.xl) * ITEMS_IN_FILTERS_GROUP + BORDER_WIDTH;
-var StyledPanelSection = styled3__default.default(coreReact.Panel.Section)`
+var StyledPanelSection = styled4__default.default(coreReact.Panel.Section)`
   // Filters Group container styles
   &.filters-list-group-section {
     padding-bottom: ${FILTERS_GROUP_VERTICAL_MARGIN}px;
@@ -110169,11 +110205,11 @@ var ConfigPanelButton = () => {
 var QuickFilterLabel = React77__default.default.forwardRef(({ enabled, ...props }, ref) => {
   return /* @__PURE__ */ React77__default.default.createElement(StyledQuickFilterLabel, { $enabled: enabled }, /* @__PURE__ */ React77__default.default.createElement(coreReact.SelectButton, { ref, ...props }));
 });
-var StyledQuickFilterLabel = styled3__default.default.div`
+var StyledQuickFilterLabel = styled4__default.default.div`
   ${coreReact.StyledSelectButton} {
     width: auto;
     max-width: 380px;
-    ${({ $enabled }) => $enabled && styled3.css`
+    ${({ $enabled }) => $enabled && styled4.css`
         background: ${coreReact.colors.blue96};
         border-color: ${coreReact.colors.blue96};
         font-weight: ${coreReact.typographyWeights.semibold};
@@ -110796,7 +110832,7 @@ var LocationQuickFilterRenderer = ({
   );
 };
 var LocationQuickFilterRenderer_default = LocationQuickFilterRenderer;
-var StyledFilterPresetPopoverContent = styled3__default.default(coreReact.Popover.Content)`
+var StyledFilterPresetPopoverContent = styled4__default.default(coreReact.Popover.Content)`
   padding: ${coreReact.spacing.sm}px ${coreReact.spacing.lg}px;
 `;
 var getValueLabel = (isValueEmpty, value, placeholder, filterName) => {
@@ -110878,12 +110914,12 @@ var getSuperSelectFilterPreset = (columnDefinition) => {
     selectionStyle: "highlight"
   };
 };
-var StyledSuperSelectWrapper = styled3__default.default.div`
+var StyledSuperSelectWrapper = styled4__default.default.div`
   ${coreReact.UNSAFE_StyledSuperSelectTrigger} {
     width: auto;
   }
 
-  ${({ $enabled }) => $enabled && styled3.css`
+  ${({ $enabled }) => $enabled && styled4.css`
       ${coreReact.UNSAFE_StyledSuperSelectTrigger} {
         max-width: 360px;
         background: ${coreReact.colors.blue96};
@@ -111331,7 +111367,7 @@ var FilterIcon = () => {
     )
   );
 };
-var StyledFilterTokenWrapper = styled3__default.default.div`
+var StyledFilterTokenWrapper = styled4__default.default.div`
   ${coreReact.UNSAFE_StyledFilterTokenLabel} {
     font-weight: ${coreReact.typographyWeights.semibold};
   }