@procore/data-table 14.20.0 → 14.21.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Change Log
 
+## 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})` : ""}`
@@ -83083,6 +83100,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -84098,9 +84116,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 +84181,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';
@@ -985,6 +985,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';
@@ -985,6 +985,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})` : ""}`
@@ -83069,6 +83086,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -84084,9 +84102,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 +84167,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})` : ""}`
@@ -82874,6 +82888,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -83879,9 +83894,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 +83959,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';
@@ -985,6 +985,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';
@@ -985,6 +985,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})` : ""}`
@@ -82860,6 +82874,7 @@ var Table = (props) => {
             onGridReady,
             onColumnEverythingChanged: props.onColumnEverythingChanged,
             onModelUpdated,
+            onCellFocused: props.onCellFocused,
             onRowDragEnd,
             onRowDragMove,
             onRowGroupOpened: internalRowGroupOpened,
@@ -83865,9 +83880,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 +83945,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.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",