@procore/data-table 14.21.0 → 14.22.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## 14.22.0
+
+### Minor Changes
+
+- bacb48a473: Added filterValueFormatter prop for format URL params in getParams
+
+### Patch Changes
+
+- 82b2e1b714: Refactor styles for Header column. Fix issue with not showing tooltip when suppressColumnVirtualisation false
+
+## 14.21.1
+
+### Patch Changes
+
+- 8cca316b7: Fix issue with filters update
+
 ## 14.21.0
 
 ### Minor Changes

package/dist/legacy/index.cjs

@@ -1424,7 +1424,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_18odb_369 {
+@keyframes _ag-shake-left-to-right_199bk_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5425,7 +5425,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_18odb_1 {
+@keyframes _spin_199bk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7615,17 +7615,25 @@ input[class^=ag-][type=range]:disabled {
   padding: 8px 0;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name-container {
-  display: -webkit-box;
   width: 100%;
+  display: -webkit-box;
   overflow: hidden;
   white-space: normal;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
   word-wrap: break-word;
-  text-overflow: ellipsis;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+@supports (-webkit-line-clamp: 4) {
+  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
+    white-space: initial;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .data-table-header-cell-container {
   flex-direction: row-reverse;
@@ -7637,16 +7645,6 @@ input[class^=ag-][type=range]:disabled {
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-label .data-table-header-display-name {
   padding-left: 4px;
 }
-@supports (-webkit-line-clamp: 4) {
-  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine.ag-suppress-column-virtualization .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: initial;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-  }
-}
 .ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
   margin-right: 4px;
 }
@@ -7930,7 +7928,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_18odb_7153 {
+div._contextPanel_199bk_7151 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7939,7 +7937,7 @@ div._contextPanel_18odb_7153 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_18odb_7162 {
+div._contextPanel--hidden_199bk_7160 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7947,50 +7945,50 @@ div._contextPanel--hidden_18odb_7162 {
   width: 0px;
 }
 
-._contextPanelWrapper_18odb_7170 {
+._contextPanelWrapper_199bk_7168 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_18odb_7175 {
+._contextPanelBody_199bk_7173 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_18odb_7179 {
+._contextPanel-stickyHeader_199bk_7177 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_18odb_7186 {
+._filters-list_199bk_7184 {
   padding: 0;
   margin: 0;
 }
-._filters-list_18odb_7186 ol {
+._filters-list_199bk_7184 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_18odb_7195 {
+._col-drag-column-icon_199bk_7193 {
   color: #6a767c;
 }
 
-._tabular-nums_18odb_7199 {
+._tabular-nums_199bk_7197 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_18odb_7153",
-  "contextPanel--hidden": "_contextPanel--hidden_18odb_7162",
-  "contextPanelWrapper": "_contextPanelWrapper_18odb_7170",
-  "contextPanelBody": "_contextPanelBody_18odb_7175",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_18odb_7179",
-  "filters-list": "_filters-list_18odb_7186",
-  "col-drag-column-icon": "_col-drag-column-icon_18odb_7195",
-  "tabular-nums": "_tabular-nums_18odb_7199",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_18odb_369",
-  "spin": "_spin_18odb_1"
+  "contextPanel": "_contextPanel_199bk_7151",
+  "contextPanel--hidden": "_contextPanel--hidden_199bk_7160",
+  "contextPanelWrapper": "_contextPanelWrapper_199bk_7168",
+  "contextPanelBody": "_contextPanelBody_199bk_7173",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_199bk_7177",
+  "filters-list": "_filters-list_199bk_7184",
+  "col-drag-column-icon": "_col-drag-column-icon_199bk_7193",
+  "tabular-nums": "_tabular-nums_199bk_7197",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_199bk_369",
+  "spin": "_spin_199bk_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -55284,7 +55282,10 @@ function transformServerSideRequestObj(request, filtersState, searchValue) {
     )
   };
 }
-var transformFilterValue = (value) => {
+var transformFilterValue = (value, field, formatter) => {
+  const formattedValue = formatter == null ? void 0 : formatter(value, field);
+  if (formattedValue)
+    return formattedValue;
   if (value == null ? void 0 : value.date)
     return dateFns.formatISO(value.date, { representation: "date" });
   return value.toString();
@@ -55311,8 +55312,11 @@ function getServerSideParams(request, filtersState, searchValue, options = {}) {
       params.set("group", group);
   }
   if (options.filters !== false) {
+    const formatter = options.filterValueFormatter;
     filtersState.forEach((filter) => {
-      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0]) : `[${filter.selected.map(transformFilterValue)}]`;
+      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0], filter.field, formatter) : `[${filter.selected.map(
+        (value2) => transformFilterValue(value2, filter.field, formatter)
+      )}]`;
       params.set(`filters[${filter.field}]`, value);
     });
     request.groupKeys.forEach((groupKey, index) => {
@@ -57656,7 +57660,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82848,9 +82852,6 @@ var Table = (props) => {
     );
     (_c2 = (_b2 = props.UNSAFE_internalAGGridOverrides) == null ? void 0 : _b2.onGridReady) == null ? void 0 : _c2.call(_b2, params);
   };
-  const postProcessPopup = (params) => {
-    params.ePopup.style.top = `${HEADER_HEIGHT}px`;
-  };
   const internalOnRowSelected = (event) => {
     var _a2, _b2, _c2;
     (_a2 = props.onRowSelected) == null ? void 0 : _a2.call(props, event);
@@ -83113,7 +83114,6 @@ var Table = (props) => {
             paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
             popupParent: props.popupParent,
             pinnedBottomRowData: props.pinnedBottomRowData,
-            postProcessPopup,
             rowBuffer: props.rowBuffer,
             rowClassRules,
             rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,

package/dist/legacy/index.d.cts

@@ -470,6 +470,8 @@ interface ColumnDefinition<TValue = any, TRenderer = React.FC<ICellRendererParam
     groupId?: string;
     cellEditor?: TEditor;
     cellEditorParams?: TEditorParams;
+    cellEditorPopup?: boolean;
+    cellEditorPopupPosition?: 'over' | 'under';
     cellCSVFormatter?: (value: TValue) => string;
     cellExcelFormatter?: (value: TValue) => string;
     cellExcelDataType?: string;
@@ -887,6 +889,12 @@ type ServerSideParamsOptions = {
      * @default filters[search]
      */
     searchKey?: string;
+    /**
+     * Custom function for formatting URL params.
+     * This function will help you to format URL params when value is an object.
+     * If the function does not return anything, the default behavior will be used.
+     */
+    filterValueFormatter?: (value: any, field: string) => string | void;
 };
 interface RowActionsConfig extends Omit<ColDef, 'field' | 'pinned' | 'lockPinned' | 'lockVisible'> {
 }

package/dist/legacy/index.d.ts

@@ -470,6 +470,8 @@ interface ColumnDefinition<TValue = any, TRenderer = React.FC<ICellRendererParam
     groupId?: string;
     cellEditor?: TEditor;
     cellEditorParams?: TEditorParams;
+    cellEditorPopup?: boolean;
+    cellEditorPopupPosition?: 'over' | 'under';
     cellCSVFormatter?: (value: TValue) => string;
     cellExcelFormatter?: (value: TValue) => string;
     cellExcelDataType?: string;
@@ -887,6 +889,12 @@ type ServerSideParamsOptions = {
      * @default filters[search]
      */
     searchKey?: string;
+    /**
+     * Custom function for formatting URL params.
+     * This function will help you to format URL params when value is an object.
+     * If the function does not return anything, the default behavior will be used.
+     */
+    filterValueFormatter?: (value: any, field: string) => string | void;
 };
 interface RowActionsConfig extends Omit<ColDef, 'field' | 'pinned' | 'lockPinned' | 'lockVisible'> {
 }

package/dist/legacy/index.js

@@ -1410,7 +1410,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_18odb_369 {
+@keyframes _ag-shake-left-to-right_199bk_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5411,7 +5411,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_18odb_1 {
+@keyframes _spin_199bk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7601,17 +7601,25 @@ input[class^=ag-][type=range]:disabled {
   padding: 8px 0;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name-container {
-  display: -webkit-box;
   width: 100%;
+  display: -webkit-box;
   overflow: hidden;
   white-space: normal;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
   word-wrap: break-word;
-  text-overflow: ellipsis;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+@supports (-webkit-line-clamp: 4) {
+  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
+    white-space: initial;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .data-table-header-cell-container {
   flex-direction: row-reverse;
@@ -7623,16 +7631,6 @@ input[class^=ag-][type=range]:disabled {
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-label .data-table-header-display-name {
   padding-left: 4px;
 }
-@supports (-webkit-line-clamp: 4) {
-  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine.ag-suppress-column-virtualization .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: initial;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-  }
-}
 .ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
   margin-right: 4px;
 }
@@ -7916,7 +7914,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_18odb_7153 {
+div._contextPanel_199bk_7151 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7925,7 +7923,7 @@ div._contextPanel_18odb_7153 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_18odb_7162 {
+div._contextPanel--hidden_199bk_7160 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7933,50 +7931,50 @@ div._contextPanel--hidden_18odb_7162 {
   width: 0px;
 }
 
-._contextPanelWrapper_18odb_7170 {
+._contextPanelWrapper_199bk_7168 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_18odb_7175 {
+._contextPanelBody_199bk_7173 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_18odb_7179 {
+._contextPanel-stickyHeader_199bk_7177 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_18odb_7186 {
+._filters-list_199bk_7184 {
   padding: 0;
   margin: 0;
 }
-._filters-list_18odb_7186 ol {
+._filters-list_199bk_7184 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_18odb_7195 {
+._col-drag-column-icon_199bk_7193 {
   color: #6a767c;
 }
 
-._tabular-nums_18odb_7199 {
+._tabular-nums_199bk_7197 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_18odb_7153",
-  "contextPanel--hidden": "_contextPanel--hidden_18odb_7162",
-  "contextPanelWrapper": "_contextPanelWrapper_18odb_7170",
-  "contextPanelBody": "_contextPanelBody_18odb_7175",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_18odb_7179",
-  "filters-list": "_filters-list_18odb_7186",
-  "col-drag-column-icon": "_col-drag-column-icon_18odb_7195",
-  "tabular-nums": "_tabular-nums_18odb_7199",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_18odb_369",
-  "spin": "_spin_18odb_1"
+  "contextPanel": "_contextPanel_199bk_7151",
+  "contextPanel--hidden": "_contextPanel--hidden_199bk_7160",
+  "contextPanelWrapper": "_contextPanelWrapper_199bk_7168",
+  "contextPanelBody": "_contextPanelBody_199bk_7173",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_199bk_7177",
+  "filters-list": "_filters-list_199bk_7184",
+  "col-drag-column-icon": "_col-drag-column-icon_199bk_7193",
+  "tabular-nums": "_tabular-nums_199bk_7197",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_199bk_369",
+  "spin": "_spin_199bk_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -55270,7 +55268,10 @@ function transformServerSideRequestObj(request, filtersState, searchValue) {
     )
   };
 }
-var transformFilterValue = (value) => {
+var transformFilterValue = (value, field, formatter) => {
+  const formattedValue = formatter == null ? void 0 : formatter(value, field);
+  if (formattedValue)
+    return formattedValue;
   if (value == null ? void 0 : value.date)
     return formatISO(value.date, { representation: "date" });
   return value.toString();
@@ -55297,8 +55298,11 @@ function getServerSideParams(request, filtersState, searchValue, options = {}) {
       params.set("group", group);
   }
   if (options.filters !== false) {
+    const formatter = options.filterValueFormatter;
     filtersState.forEach((filter) => {
-      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0]) : `[${filter.selected.map(transformFilterValue)}]`;
+      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0], filter.field, formatter) : `[${filter.selected.map(
+        (value2) => transformFilterValue(value2, filter.field, formatter)
+      )}]`;
       params.set(`filters[${filter.field}]`, value);
     });
     request.groupKeys.forEach((groupKey, index) => {
@@ -57642,7 +57646,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82834,9 +82838,6 @@ var Table = (props) => {
     );
     (_c2 = (_b2 = props.UNSAFE_internalAGGridOverrides) == null ? void 0 : _b2.onGridReady) == null ? void 0 : _c2.call(_b2, params);
   };
-  const postProcessPopup = (params) => {
-    params.ePopup.style.top = `${HEADER_HEIGHT}px`;
-  };
   const internalOnRowSelected = (event) => {
     var _a2, _b2, _c2;
     (_a2 = props.onRowSelected) == null ? void 0 : _a2.call(props, event);
@@ -83099,7 +83100,6 @@ var Table = (props) => {
             paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
             popupParent: props.popupParent,
             pinnedBottomRowData: props.pinnedBottomRowData,
-            postProcessPopup,
             rowBuffer: props.rowBuffer,
             rowClassRules,
             rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,

package/dist/modern/index.cjs

@@ -1422,7 +1422,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_18odb_369 {
+@keyframes _ag-shake-left-to-right_199bk_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5423,7 +5423,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_18odb_1 {
+@keyframes _spin_199bk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7613,17 +7613,25 @@ input[class^=ag-][type=range]:disabled {
   padding: 8px 0;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name-container {
-  display: -webkit-box;
   width: 100%;
+  display: -webkit-box;
   overflow: hidden;
   white-space: normal;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
   word-wrap: break-word;
-  text-overflow: ellipsis;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+@supports (-webkit-line-clamp: 4) {
+  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
+    white-space: initial;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .data-table-header-cell-container {
   flex-direction: row-reverse;
@@ -7635,16 +7643,6 @@ input[class^=ag-][type=range]:disabled {
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-label .data-table-header-display-name {
   padding-left: 4px;
 }
-@supports (-webkit-line-clamp: 4) {
-  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine.ag-suppress-column-virtualization .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: initial;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-  }
-}
 .ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
   margin-right: 4px;
 }
@@ -7928,7 +7926,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_18odb_7153 {
+div._contextPanel_199bk_7151 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7937,7 +7935,7 @@ div._contextPanel_18odb_7153 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_18odb_7162 {
+div._contextPanel--hidden_199bk_7160 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7945,50 +7943,50 @@ div._contextPanel--hidden_18odb_7162 {
   width: 0px;
 }
 
-._contextPanelWrapper_18odb_7170 {
+._contextPanelWrapper_199bk_7168 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_18odb_7175 {
+._contextPanelBody_199bk_7173 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_18odb_7179 {
+._contextPanel-stickyHeader_199bk_7177 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_18odb_7186 {
+._filters-list_199bk_7184 {
   padding: 0;
   margin: 0;
 }
-._filters-list_18odb_7186 ol {
+._filters-list_199bk_7184 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_18odb_7195 {
+._col-drag-column-icon_199bk_7193 {
   color: #6a767c;
 }
 
-._tabular-nums_18odb_7199 {
+._tabular-nums_199bk_7197 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_18odb_7153",
-  "contextPanel--hidden": "_contextPanel--hidden_18odb_7162",
-  "contextPanelWrapper": "_contextPanelWrapper_18odb_7170",
-  "contextPanelBody": "_contextPanelBody_18odb_7175",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_18odb_7179",
-  "filters-list": "_filters-list_18odb_7186",
-  "col-drag-column-icon": "_col-drag-column-icon_18odb_7195",
-  "tabular-nums": "_tabular-nums_18odb_7199",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_18odb_369",
-  "spin": "_spin_18odb_1"
+  "contextPanel": "_contextPanel_199bk_7151",
+  "contextPanel--hidden": "_contextPanel--hidden_199bk_7160",
+  "contextPanelWrapper": "_contextPanelWrapper_199bk_7168",
+  "contextPanelBody": "_contextPanelBody_199bk_7173",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_199bk_7177",
+  "filters-list": "_filters-list_199bk_7184",
+  "col-drag-column-icon": "_col-drag-column-icon_199bk_7193",
+  "tabular-nums": "_tabular-nums_199bk_7197",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_199bk_369",
+  "spin": "_spin_199bk_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -55215,7 +55213,10 @@ function transformServerSideRequestObj(request, filtersState, searchValue) {
     )
   };
 }
-var transformFilterValue = (value) => {
+var transformFilterValue = (value, field, formatter) => {
+  const formattedValue = formatter?.(value, field);
+  if (formattedValue)
+    return formattedValue;
   if (value?.date)
     return dateFns.formatISO(value.date, { representation: "date" });
   return value.toString();
@@ -55241,8 +55242,11 @@ function getServerSideParams(request, filtersState, searchValue, options = {}) {
       params.set("group", group);
   }
   if (options.filters !== false) {
+    const formatter = options.filterValueFormatter;
     filtersState.forEach((filter) => {
-      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0]) : `[${filter.selected.map(transformFilterValue)}]`;
+      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0], filter.field, formatter) : `[${filter.selected.map(
+        (value2) => transformFilterValue(value2, filter.field, formatter)
+      )}]`;
       params.set(`filters[${filter.field}]`, value);
     });
     request.groupKeys.forEach((groupKey, index) => {
@@ -57541,7 +57545,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82639,9 +82643,6 @@ var Table = (props) => {
     );
     props.UNSAFE_internalAGGridOverrides?.onGridReady?.(params);
   };
-  const postProcessPopup = (params) => {
-    params.ePopup.style.top = `${HEADER_HEIGHT}px`;
-  };
   const internalOnRowSelected = (event) => {
     props.onRowSelected?.(event);
     if (props.siblingGroupsRowSelectionDisabled) {
@@ -82901,7 +82902,6 @@ var Table = (props) => {
             paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
             popupParent: props.popupParent,
             pinnedBottomRowData: props.pinnedBottomRowData,
-            postProcessPopup,
             rowBuffer: props.rowBuffer,
             rowClassRules,
             rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,

package/dist/modern/index.d.cts

@@ -470,6 +470,8 @@ interface ColumnDefinition<TValue = any, TRenderer = React.FC<ICellRendererParam
     groupId?: string;
     cellEditor?: TEditor;
     cellEditorParams?: TEditorParams;
+    cellEditorPopup?: boolean;
+    cellEditorPopupPosition?: 'over' | 'under';
     cellCSVFormatter?: (value: TValue) => string;
     cellExcelFormatter?: (value: TValue) => string;
     cellExcelDataType?: string;
@@ -887,6 +889,12 @@ type ServerSideParamsOptions = {
      * @default filters[search]
      */
     searchKey?: string;
+    /**
+     * Custom function for formatting URL params.
+     * This function will help you to format URL params when value is an object.
+     * If the function does not return anything, the default behavior will be used.
+     */
+    filterValueFormatter?: (value: any, field: string) => string | void;
 };
 interface RowActionsConfig extends Omit<ColDef, 'field' | 'pinned' | 'lockPinned' | 'lockVisible'> {
 }

package/dist/modern/index.d.ts

@@ -470,6 +470,8 @@ interface ColumnDefinition<TValue = any, TRenderer = React.FC<ICellRendererParam
     groupId?: string;
     cellEditor?: TEditor;
     cellEditorParams?: TEditorParams;
+    cellEditorPopup?: boolean;
+    cellEditorPopupPosition?: 'over' | 'under';
     cellCSVFormatter?: (value: TValue) => string;
     cellExcelFormatter?: (value: TValue) => string;
     cellExcelDataType?: string;
@@ -887,6 +889,12 @@ type ServerSideParamsOptions = {
      * @default filters[search]
      */
     searchKey?: string;
+    /**
+     * Custom function for formatting URL params.
+     * This function will help you to format URL params when value is an object.
+     * If the function does not return anything, the default behavior will be used.
+     */
+    filterValueFormatter?: (value: any, field: string) => string | void;
 };
 interface RowActionsConfig extends Omit<ColDef, 'field' | 'pinned' | 'lockPinned' | 'lockVisible'> {
 }

package/dist/modern/index.js

@@ -1408,7 +1408,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_18odb_369 {
+@keyframes _ag-shake-left-to-right_199bk_369 {
   from {
     padding-left: 6px;
     padding-right: 2px;
@@ -5409,7 +5409,7 @@ input[class^=ag-][type=button]:focus, button[class^=ag-]:focus {
   animation-iteration-count: infinite;
   animation-timing-function: linear;
 }
-@keyframes _spin_18odb_1 {
+@keyframes _spin_199bk_1 {
   from {
     transform: rotate(0deg);
   }
@@ -7599,17 +7599,25 @@ input[class^=ag-][type=range]:disabled {
   padding: 8px 0;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name-container {
-  display: -webkit-box;
   width: 100%;
+  display: -webkit-box;
   overflow: hidden;
   white-space: normal;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
   word-wrap: break-word;
-  text-overflow: ellipsis;
   overflow: hidden;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+}
+@supports (-webkit-line-clamp: 4) {
+  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
+    white-space: initial;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
 }
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .data-table-header-cell-container {
   flex-direction: row-reverse;
@@ -7621,16 +7629,6 @@ input[class^=ag-][type=range]:disabled {
 .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-cell-label .data-table-header-display-name {
   padding-left: 4px;
 }
-@supports (-webkit-line-clamp: 4) {
-  .ag-theme-alpine.ag-theme-alpine.ag-theme-alpine.ag-suppress-column-virtualization .ag-ltr .ag-header-cell .ag-header-cell-comp-wrapper .ag-header-cell-label .data-table-header-display-name {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: initial;
-    display: -webkit-box;
-    -webkit-line-clamp: 4;
-    -webkit-box-orient: vertical;
-  }
-}
 .ag-theme-alpine.ag-theme-alpine .ag-ltr .ag-header-cell.ag-right-aligned-header .ag-header-label-icon {
   margin-right: 4px;
 }
@@ -7914,7 +7912,7 @@ input[class^=ag-][type=range]:disabled {
   padding-left: 16px;
 }
 
-div._contextPanel_18odb_7153 {
+div._contextPanel_199bk_7151 {
   width: 400px;
   transition: all ease 500ms;
   flex: 0 0 auto;
@@ -7923,7 +7921,7 @@ div._contextPanel_18odb_7153 {
   border: 1px solid #d6dadc;
   display: flex;
 }
-div._contextPanel--hidden_18odb_7162 {
+div._contextPanel--hidden_199bk_7160 {
   border: none;
   overflow: hidden;
   padding: 0px;
@@ -7931,50 +7929,50 @@ div._contextPanel--hidden_18odb_7162 {
   width: 0px;
 }
 
-._contextPanelWrapper_18odb_7170 {
+._contextPanelWrapper_199bk_7168 {
   position: relative;
   flex-grow: 1;
 }
 
-._contextPanelBody_18odb_7175 {
+._contextPanelBody_199bk_7173 {
   width: clamp(380px, 400px, 100%);
 }
 
-._contextPanel-stickyHeader_18odb_7179 {
+._contextPanel-stickyHeader_199bk_7177 {
   background-color: #ffffff;
   position: sticky;
   top: 0;
   z-index: 5;
 }
 
-._filters-list_18odb_7186 {
+._filters-list_199bk_7184 {
   padding: 0;
   margin: 0;
 }
-._filters-list_18odb_7186 ol {
+._filters-list_199bk_7184 ol {
   padding: 0;
   margin: 0;
 }
 
-._col-drag-column-icon_18odb_7195 {
+._col-drag-column-icon_199bk_7193 {
   color: #6a767c;
 }
 
-._tabular-nums_18odb_7199 {
+._tabular-nums_199bk_7197 {
   font-variant-numeric: tabular-nums;
 }`;
 document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
 var styles_default = {
-  "contextPanel": "_contextPanel_18odb_7153",
-  "contextPanel--hidden": "_contextPanel--hidden_18odb_7162",
-  "contextPanelWrapper": "_contextPanelWrapper_18odb_7170",
-  "contextPanelBody": "_contextPanelBody_18odb_7175",
-  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_18odb_7179",
-  "filters-list": "_filters-list_18odb_7186",
-  "col-drag-column-icon": "_col-drag-column-icon_18odb_7195",
-  "tabular-nums": "_tabular-nums_18odb_7199",
-  "ag-shake-left-to-right": "_ag-shake-left-to-right_18odb_369",
-  "spin": "_spin_18odb_1"
+  "contextPanel": "_contextPanel_199bk_7151",
+  "contextPanel--hidden": "_contextPanel--hidden_199bk_7160",
+  "contextPanelWrapper": "_contextPanelWrapper_199bk_7168",
+  "contextPanelBody": "_contextPanelBody_199bk_7173",
+  "contextPanel-stickyHeader": "_contextPanel-stickyHeader_199bk_7177",
+  "filters-list": "_filters-list_199bk_7184",
+  "col-drag-column-icon": "_col-drag-column-icon_199bk_7193",
+  "tabular-nums": "_tabular-nums_199bk_7197",
+  "ag-shake-left-to-right": "_ag-shake-left-to-right_199bk_369",
+  "spin": "_spin_199bk_1"
 };
 
 // src/utils/getCellValueTypographyProps.ts
@@ -55201,7 +55199,10 @@ function transformServerSideRequestObj(request, filtersState, searchValue) {
     )
   };
 }
-var transformFilterValue = (value) => {
+var transformFilterValue = (value, field, formatter) => {
+  const formattedValue = formatter?.(value, field);
+  if (formattedValue)
+    return formattedValue;
   if (value?.date)
     return formatISO(value.date, { representation: "date" });
   return value.toString();
@@ -55227,8 +55228,11 @@ function getServerSideParams(request, filtersState, searchValue, options = {}) {
       params.set("group", group);
   }
   if (options.filters !== false) {
+    const formatter = options.filterValueFormatter;
     filtersState.forEach((filter) => {
-      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0]) : `[${filter.selected.map(transformFilterValue)}]`;
+      const value = filter.selected.length === 1 ? transformFilterValue(filter.selected[0], filter.field, formatter) : `[${filter.selected.map(
+        (value2) => transformFilterValue(value2, filter.field, formatter)
+      )}]`;
       params.set(`filters[${filter.field}]`, value);
     });
     request.groupKeys.forEach((groupKey, index) => {
@@ -57527,7 +57531,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82625,9 +82629,6 @@ var Table = (props) => {
     );
     props.UNSAFE_internalAGGridOverrides?.onGridReady?.(params);
   };
-  const postProcessPopup = (params) => {
-    params.ePopup.style.top = `${HEADER_HEIGHT}px`;
-  };
   const internalOnRowSelected = (event) => {
     props.onRowSelected?.(event);
     if (props.siblingGroupsRowSelectionDisabled) {
@@ -82887,7 +82888,6 @@ var Table = (props) => {
             paginationPageSize: props.paginationPageSize || defaultPaginationPageSize,
             popupParent: props.popupParent,
             pinnedBottomRowData: props.pinnedBottomRowData,
-            postProcessPopup,
             rowBuffer: props.rowBuffer,
             rowClassRules,
             rowDragManaged: onSSDR ? false : props.rowDragManaged ?? true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.21.0",
+  "version": "14.22.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -30,8 +30,8 @@
     "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",
-    "cypress:dev:run": "start-server-and-test storybook-static:server http://127.0.0.1:6006 cypress:run",
+    "cypress:dev:open": "start-server-and-test storybook http://127.0.0.1:6006 'yarn cypress:open'",
+    "cypress:dev:run": "start-server-and-test storybook http://127.0.0.1:6006 'yarn cypress:run'",
     "cypress:open": "cypress open",
     "cypress:component:run": "cypress run -b ${CYPRESS_BROWSER-chrome} --spec ${CYPRESS_SPEC-src/**/*.cy.tsx} --component",
     "cypress:performance": "cypress run -b ${CYPRESS_BROWSER-chrome} --spec ${CYPRESS_SPEC-cypress/e2e/**/*.perf.ts}",
@@ -111,7 +111,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "12.2.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "12.16.0",
+    "@procore/core-react": "12.16.1",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "3.0.1",
@@ -142,6 +142,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "css-loader": "6.7.1",
     "cypress": "13.6.1",
+    "cypress-axe": "1.5.0",
     "cypress-multi-reporters": "1.6.4",
     "cypress-real-events": "^1.11.0",
     "cypress-web-vitals": "^4.1.2",