@procore/data-table 14.20.0 → 14.21.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## 14.21.1
+
+### Patch Changes
+
+- 8cca316b7: Fix issue with filters update
+
+## 14.21.0
+
+### Minor Changes
+
+- 627bb577d1: Expose onCellFocused event on data-table
+
+### Patch Changes
+
+- 72a02060f5: Fixed some issues with sublocations on LocationFilterRenderer. Added documentation.
+- 60f16d8d57: Fix 'include sublocations' checkbox and sublocations initial selection
+
 ## 14.20.0
 
 ### Minor Changes

package/dist/legacy/index.cjs

@@ -54096,19 +54096,34 @@ var ServerSideLocationFilterRenderer = React77__default.default.forwardRef(
       determineSelectedState(value)
     );
     const [disabledValues, setDisabledValues] = React77__default.default.useState([]);
+    const enableSublocationsInitialValue = value.some(
+      (selected) => {
+        var _a2;
+        return (_a2 = selected.sublocations) == null ? void 0 : _a2.length;
+      }
+    );
+    const getUniqDisabledValues = () => {
+      const newDisabledValues = [];
+      value.forEach((location) => {
+        newDisabledValues.push(...findSublocations(location));
+      });
+      const uniqDisabledValues = ramda.uniqBy(ramda.prop("id"), newDisabledValues).filter(
+        ({ id }) => !selectedValueIds.includes(id)
+      );
+      return uniqDisabledValues;
+    };
+    React77.useEffect(() => {
+      if (enableSublocationsInitialValue && options.length) {
+        setDisabledValues(getUniqDisabledValues());
+        setEnableSublocations(true);
+      }
+    }, [options]);
     const [enableSublocations, setEnableSublocations] = React77__default.default.useState(false);
     const onSelectSublocations = React77__default.default.useCallback(() => {
       if (enableSublocations) {
         setDisabledValues([]);
       } else {
-        const newDisabledValues = [];
-        value.forEach((location) => {
-          newDisabledValues.push(...findSublocations(location));
-        });
-        const uniqDisabledValues = ramda.uniqBy(ramda.prop("id"), newDisabledValues).filter(
-          ({ id }) => !selectedValueIds.includes(id)
-        );
-        setDisabledValues(uniqDisabledValues);
+        setDisabledValues(getUniqDisabledValues());
       }
       setEnableSublocations(!enableSublocations);
     }, [enableSublocations, value, selectedValueIds, options]);
@@ -54164,18 +54179,18 @@ var ServerSideLocationFilterRenderer = React77__default.default.forwardRef(
     const findSublocations = (selected) => {
       return options.filter((option) => {
         return ramda.startsWith(
-          `${getLabel3(selected).toLowerCase()} > `,
-          getLabel3(option).toLowerCase()
-        );
+          getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+          getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+        ) && option.id !== selected.id;
       });
     };
     const handleSelectSublocations = (selected) => {
       if (enableSublocations) {
         const filteredOptions = options.filter((option) => {
           return ramda.startsWith(
-            `${getLabel3(selected).toLowerCase()} > `,
-            getLabel3(option).toLowerCase()
-          );
+            getLabel3(selected).toLowerCase().replace(/ /g, ""),
+            getLabel3(option).toLowerCase().replace(/ /g, "")
+          ) && option.id !== selected.id;
         });
         return filteredOptions;
       } else {
@@ -54231,6 +54246,8 @@ var ServerSideLocationFilterRenderer = React77__default.default.forwardRef(
         {
           block: true,
           onClear: () => {
+            setEnableSublocations(false);
+            setDisabledValues([]);
             onChange([]);
           },
           label: `${I18n.t("dataTable.filters.locationFilter.locations")} ${value.length ? `(${value.length})` : ""}`
@@ -55267,7 +55284,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();
@@ -55294,8 +55314,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) => {
@@ -57639,7 +57662,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82831,9 +82854,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);
@@ -83083,6 +83103,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -83095,7 +83116,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,
@@ -84098,9 +84118,9 @@ var LocationQuickFilterRenderer = ({
   const findSublocations = (selected) => {
     return options.filter((option) => {
       return ramda.startsWith(
-        `${getLabel3(selected).toLowerCase()} > `,
-        getLabel3(option).toLowerCase()
-      );
+        getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+        getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+      ) && option.id !== selected.id;
     });
   };
   const handleSelectSublocations = (selected) => {
@@ -84163,6 +84183,8 @@ var LocationQuickFilterRenderer = ({
           "dataTable.filters.locationFilter.locations"
         )}${triggerLabel}`,
         onClear: () => {
+          setEnableSublocations(false);
+          setDisabledValues([]);
           onChange([]);
         },
         block: true

package/dist/legacy/index.d.cts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, CellFocusedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -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'> {
 }
@@ -985,6 +993,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
     onTableReady?: (tableApi: TableApi, tableApiRef: React.RefObject<TableApi>) => void;
     onColumnEverythingChanged?: (changeEvent: ColumnEverythingChangedEvent) => void;
+    onCellFocused?: (event: CellFocusedEvent) => void;
     onFirstDataRendered?: (event: FirstDataRenderedEvent) => void;
     paginateChildRows?: boolean;
     pagination?: boolean;

package/dist/legacy/index.d.ts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, CellFocusedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -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'> {
 }
@@ -985,6 +993,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
     onTableReady?: (tableApi: TableApi, tableApiRef: React.RefObject<TableApi>) => void;
     onColumnEverythingChanged?: (changeEvent: ColumnEverythingChangedEvent) => void;
+    onCellFocused?: (event: CellFocusedEvent) => void;
     onFirstDataRendered?: (event: FirstDataRenderedEvent) => void;
     paginateChildRows?: boolean;
     pagination?: boolean;

package/dist/legacy/index.js

@@ -1,4 +1,4 @@
-import React77, { useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, useEffect, Component as Component$1, createElement } from 'react';
+import React77, { useEffect, useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, Component as Component$1, createElement } from 'react';
 import { uniqBy, prop, startsWith, mergeDeepRight, equals, omit, intersection, isNil, mergeDeepLeft, isEmpty, groupBy } from 'ramda';
 import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, SelectButton, StyledSelectButton, typographyWeights, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, UNSAFE_StyledFilterTokenLabel, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Link, AvatarStack, Pill, Typeahead, Pagination, UNSAFE_SuperSelect, UNSAFE_FilterToken, Avatar, H3, useI18n, I18nContext, UNSAFE_useSuperSelectContext, Checkbox, DropdownFlyout, useVisibility, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
@@ -54082,19 +54082,34 @@ var ServerSideLocationFilterRenderer = React77.forwardRef(
       determineSelectedState(value)
     );
     const [disabledValues, setDisabledValues] = React77.useState([]);
+    const enableSublocationsInitialValue = value.some(
+      (selected) => {
+        var _a2;
+        return (_a2 = selected.sublocations) == null ? void 0 : _a2.length;
+      }
+    );
+    const getUniqDisabledValues = () => {
+      const newDisabledValues = [];
+      value.forEach((location) => {
+        newDisabledValues.push(...findSublocations(location));
+      });
+      const uniqDisabledValues = uniqBy(prop("id"), newDisabledValues).filter(
+        ({ id }) => !selectedValueIds.includes(id)
+      );
+      return uniqDisabledValues;
+    };
+    useEffect(() => {
+      if (enableSublocationsInitialValue && options.length) {
+        setDisabledValues(getUniqDisabledValues());
+        setEnableSublocations(true);
+      }
+    }, [options]);
     const [enableSublocations, setEnableSublocations] = React77.useState(false);
     const onSelectSublocations = React77.useCallback(() => {
       if (enableSublocations) {
         setDisabledValues([]);
       } else {
-        const newDisabledValues = [];
-        value.forEach((location) => {
-          newDisabledValues.push(...findSublocations(location));
-        });
-        const uniqDisabledValues = uniqBy(prop("id"), newDisabledValues).filter(
-          ({ id }) => !selectedValueIds.includes(id)
-        );
-        setDisabledValues(uniqDisabledValues);
+        setDisabledValues(getUniqDisabledValues());
       }
       setEnableSublocations(!enableSublocations);
     }, [enableSublocations, value, selectedValueIds, options]);
@@ -54150,18 +54165,18 @@ var ServerSideLocationFilterRenderer = React77.forwardRef(
     const findSublocations = (selected) => {
       return options.filter((option) => {
         return startsWith(
-          `${getLabel3(selected).toLowerCase()} > `,
-          getLabel3(option).toLowerCase()
-        );
+          getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+          getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+        ) && option.id !== selected.id;
       });
     };
     const handleSelectSublocations = (selected) => {
       if (enableSublocations) {
         const filteredOptions = options.filter((option) => {
           return startsWith(
-            `${getLabel3(selected).toLowerCase()} > `,
-            getLabel3(option).toLowerCase()
-          );
+            getLabel3(selected).toLowerCase().replace(/ /g, ""),
+            getLabel3(option).toLowerCase().replace(/ /g, "")
+          ) && option.id !== selected.id;
         });
         return filteredOptions;
       } else {
@@ -54217,6 +54232,8 @@ var ServerSideLocationFilterRenderer = React77.forwardRef(
         {
           block: true,
           onClear: () => {
+            setEnableSublocations(false);
+            setDisabledValues([]);
             onChange([]);
           },
           label: `${I18n.t("dataTable.filters.locationFilter.locations")} ${value.length ? `(${value.length})` : ""}`
@@ -55253,7 +55270,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();
@@ -55280,8 +55300,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) => {
@@ -57625,7 +57648,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82817,9 +82840,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);
@@ -83069,6 +83089,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -83081,7 +83102,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,
@@ -84084,9 +84104,9 @@ var LocationQuickFilterRenderer = ({
   const findSublocations = (selected) => {
     return options.filter((option) => {
       return startsWith(
-        `${getLabel3(selected).toLowerCase()} > `,
-        getLabel3(option).toLowerCase()
-      );
+        getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+        getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+      ) && option.id !== selected.id;
     });
   };
   const handleSelectSublocations = (selected) => {
@@ -84149,6 +84169,8 @@ var LocationQuickFilterRenderer = ({
           "dataTable.filters.locationFilter.locations"
         )}${triggerLabel}`,
         onClear: () => {
+          setEnableSublocations(false);
+          setDisabledValues([]);
           onChange([]);
         },
         block: true

package/dist/modern/index.cjs

@@ -54052,19 +54052,31 @@ var ServerSideLocationFilterRenderer = React77__default.default.forwardRef(
       determineSelectedState(value)
     );
     const [disabledValues, setDisabledValues] = React77__default.default.useState([]);
+    const enableSublocationsInitialValue = value.some(
+      (selected) => selected.sublocations?.length
+    );
+    const getUniqDisabledValues = () => {
+      const newDisabledValues = [];
+      value.forEach((location) => {
+        newDisabledValues.push(...findSublocations(location));
+      });
+      const uniqDisabledValues = ramda.uniqBy(ramda.prop("id"), newDisabledValues).filter(
+        ({ id }) => !selectedValueIds.includes(id)
+      );
+      return uniqDisabledValues;
+    };
+    React77.useEffect(() => {
+      if (enableSublocationsInitialValue && options.length) {
+        setDisabledValues(getUniqDisabledValues());
+        setEnableSublocations(true);
+      }
+    }, [options]);
     const [enableSublocations, setEnableSublocations] = React77__default.default.useState(false);
     const onSelectSublocations = React77__default.default.useCallback(() => {
       if (enableSublocations) {
         setDisabledValues([]);
       } else {
-        const newDisabledValues = [];
-        value.forEach((location) => {
-          newDisabledValues.push(...findSublocations(location));
-        });
-        const uniqDisabledValues = ramda.uniqBy(ramda.prop("id"), newDisabledValues).filter(
-          ({ id }) => !selectedValueIds.includes(id)
-        );
-        setDisabledValues(uniqDisabledValues);
+        setDisabledValues(getUniqDisabledValues());
       }
       setEnableSublocations(!enableSublocations);
     }, [enableSublocations, value, selectedValueIds, options]);
@@ -54120,18 +54132,18 @@ var ServerSideLocationFilterRenderer = React77__default.default.forwardRef(
     const findSublocations = (selected) => {
       return options.filter((option) => {
         return ramda.startsWith(
-          `${getLabel3(selected).toLowerCase()} > `,
-          getLabel3(option).toLowerCase()
-        );
+          getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+          getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+        ) && option.id !== selected.id;
       });
     };
     const handleSelectSublocations = (selected) => {
       if (enableSublocations) {
         const filteredOptions = options.filter((option) => {
           return ramda.startsWith(
-            `${getLabel3(selected).toLowerCase()} > `,
-            getLabel3(option).toLowerCase()
-          );
+            getLabel3(selected).toLowerCase().replace(/ /g, ""),
+            getLabel3(option).toLowerCase().replace(/ /g, "")
+          ) && option.id !== selected.id;
         });
         return filteredOptions;
       } else {
@@ -54187,6 +54199,8 @@ var ServerSideLocationFilterRenderer = React77__default.default.forwardRef(
         {
           block: true,
           onClear: () => {
+            setEnableSublocations(false);
+            setDisabledValues([]);
             onChange([]);
           },
           label: `${I18n.t("dataTable.filters.locationFilter.locations")} ${value.length ? `(${value.length})` : ""}`
@@ -55201,7 +55215,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();
@@ -55227,8 +55244,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 +57547,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82625,9 +82645,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) {
@@ -82874,6 +82891,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -82886,7 +82904,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,
@@ -83879,9 +83896,9 @@ var LocationQuickFilterRenderer = ({
   const findSublocations = (selected) => {
     return options.filter((option) => {
       return ramda.startsWith(
-        `${getLabel3(selected).toLowerCase()} > `,
-        getLabel3(option).toLowerCase()
-      );
+        getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+        getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+      ) && option.id !== selected.id;
     });
   };
   const handleSelectSublocations = (selected) => {
@@ -83944,6 +83961,8 @@ var LocationQuickFilterRenderer = ({
           "dataTable.filters.locationFilter.locations"
         )}${triggerLabel}`,
         onClear: () => {
+          setEnableSublocations(false);
+          setDisabledValues([]);
           onChange([]);
         },
         block: true

package/dist/modern/index.d.cts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, CellFocusedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -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'> {
 }
@@ -985,6 +993,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
     onTableReady?: (tableApi: TableApi, tableApiRef: React.RefObject<TableApi>) => void;
     onColumnEverythingChanged?: (changeEvent: ColumnEverythingChangedEvent) => void;
+    onCellFocused?: (event: CellFocusedEvent) => void;
     onFirstDataRendered?: (event: FirstDataRenderedEvent) => void;
     paginateChildRows?: boolean;
     pagination?: boolean;

package/dist/modern/index.d.ts

@@ -1,5 +1,5 @@
 import * as _ag_grid_community_core from '@ag-grid-community/core';
-import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
+import { ICellRendererParams, NumberFilterModel as NumberFilterModel$1, ColDef, IRowNode, ICellEditorParams, RowDataTransaction, RowNodeTransaction, ServerSideTransaction, GridApi, ICellEditor, RefreshCellsParams, RowNode as RowNode$1, Column, SelectionEventSourceType, ColumnPinnedType, RowHeightParams, CheckboxSelectionCallbackParams, ExcelDataType, RowGroupOpenedEvent, Module, RowSelectedEvent, ColumnEverythingChangedEvent, CellFocusedEvent, TabToNextCellParams, CellPosition, GetRowIdParams, ColumnApi, IFilter, IScalarFilterParams, ISimpleFilterParams } from '@ag-grid-community/core';
 import * as React$1 from 'react';
 import React__default from 'react';
 import { AgGridReactProps, AgReactUiProps } from '@ag-grid-community/react';
@@ -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'> {
 }
@@ -985,6 +993,7 @@ interface TableProps<TRow = any, TBottomRow = any> {
     onSelectAll?: (param: SelectAllState.All | SelectAllState.None) => void;
     onTableReady?: (tableApi: TableApi, tableApiRef: React.RefObject<TableApi>) => void;
     onColumnEverythingChanged?: (changeEvent: ColumnEverythingChangedEvent) => void;
+    onCellFocused?: (event: CellFocusedEvent) => void;
     onFirstDataRendered?: (event: FirstDataRenderedEvent) => void;
     paginateChildRows?: boolean;
     pagination?: boolean;

package/dist/modern/index.js

@@ -1,4 +1,4 @@
-import React77, { useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, useEffect, Component as Component$1, createElement } from 'react';
+import React77, { useEffect, useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, Component as Component$1, createElement } from 'react';
 import { uniqBy, prop, startsWith, mergeDeepRight, equals, omit, intersection, isNil, mergeDeepLeft, isEmpty, groupBy } from 'ramda';
 import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, SelectButton, StyledSelectButton, typographyWeights, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, UNSAFE_StyledFilterTokenLabel, DateTimeProvider, useField, Label, UNSAFE_mergeRefs, ContactItem as ContactItem$1, ToggleButton, Link, AvatarStack, Pill, Typeahead, Pagination, UNSAFE_SuperSelect, UNSAFE_FilterToken, Avatar, H3, useI18n, I18nContext, UNSAFE_useSuperSelectContext, Checkbox, DropdownFlyout, useVisibility, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon, EmptyState as EmptyState$1 } from '@procore/core-react';
 import classnames from 'classnames/bind';
@@ -54038,19 +54038,31 @@ var ServerSideLocationFilterRenderer = React77.forwardRef(
       determineSelectedState(value)
     );
     const [disabledValues, setDisabledValues] = React77.useState([]);
+    const enableSublocationsInitialValue = value.some(
+      (selected) => selected.sublocations?.length
+    );
+    const getUniqDisabledValues = () => {
+      const newDisabledValues = [];
+      value.forEach((location) => {
+        newDisabledValues.push(...findSublocations(location));
+      });
+      const uniqDisabledValues = uniqBy(prop("id"), newDisabledValues).filter(
+        ({ id }) => !selectedValueIds.includes(id)
+      );
+      return uniqDisabledValues;
+    };
+    useEffect(() => {
+      if (enableSublocationsInitialValue && options.length) {
+        setDisabledValues(getUniqDisabledValues());
+        setEnableSublocations(true);
+      }
+    }, [options]);
     const [enableSublocations, setEnableSublocations] = React77.useState(false);
     const onSelectSublocations = React77.useCallback(() => {
       if (enableSublocations) {
         setDisabledValues([]);
       } else {
-        const newDisabledValues = [];
-        value.forEach((location) => {
-          newDisabledValues.push(...findSublocations(location));
-        });
-        const uniqDisabledValues = uniqBy(prop("id"), newDisabledValues).filter(
-          ({ id }) => !selectedValueIds.includes(id)
-        );
-        setDisabledValues(uniqDisabledValues);
+        setDisabledValues(getUniqDisabledValues());
       }
       setEnableSublocations(!enableSublocations);
     }, [enableSublocations, value, selectedValueIds, options]);
@@ -54106,18 +54118,18 @@ var ServerSideLocationFilterRenderer = React77.forwardRef(
     const findSublocations = (selected) => {
       return options.filter((option) => {
         return startsWith(
-          `${getLabel3(selected).toLowerCase()} > `,
-          getLabel3(option).toLowerCase()
-        );
+          getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+          getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+        ) && option.id !== selected.id;
       });
     };
     const handleSelectSublocations = (selected) => {
       if (enableSublocations) {
         const filteredOptions = options.filter((option) => {
           return startsWith(
-            `${getLabel3(selected).toLowerCase()} > `,
-            getLabel3(option).toLowerCase()
-          );
+            getLabel3(selected).toLowerCase().replace(/ /g, ""),
+            getLabel3(option).toLowerCase().replace(/ /g, "")
+          ) && option.id !== selected.id;
         });
         return filteredOptions;
       } else {
@@ -54173,6 +54185,8 @@ var ServerSideLocationFilterRenderer = React77.forwardRef(
         {
           block: true,
           onClear: () => {
+            setEnableSublocations(false);
+            setDisabledValues([]);
             onChange([]);
           },
           label: `${I18n.t("dataTable.filters.locationFilter.locations")} ${value.length ? `(${value.length})` : ""}`
@@ -55187,7 +55201,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();
@@ -55213,8 +55230,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) => {
@@ -57513,7 +57533,7 @@ function useFilterStorage({
     setFiltersState((prev) => {
       const columnDefinition = getColumnDefinition(field);
       return {
-        ...filtersState,
+        ...prev,
         selectedFilters: {
           ...prev.selectedFilters,
           [field]: {
@@ -82611,9 +82631,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) {
@@ -82860,6 +82877,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -82872,7 +82890,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,
@@ -83865,9 +83882,9 @@ var LocationQuickFilterRenderer = ({
   const findSublocations = (selected) => {
     return options.filter((option) => {
       return startsWith(
-        `${getLabel3(selected).toLowerCase()} > `,
-        getLabel3(option).toLowerCase()
-      );
+        getLabel3(selected).toLowerCase().replace(/\s+>\s+/g, " > "),
+        getLabel3(option).toLowerCase().replace(/\s+>\s+/g, " > ")
+      ) && option.id !== selected.id;
     });
   };
   const handleSelectSublocations = (selected) => {
@@ -83930,6 +83947,8 @@ var LocationQuickFilterRenderer = ({
           "dataTable.filters.locationFilter.locations"
         )}${triggerLabel}`,
         onClear: () => {
+          setEnableSublocations(false);
+          setDisabledValues([]);
           onChange([]);
         },
         block: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.20.0",
+  "version": "14.21.1",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",