@procore/data-table 14.28.0 → 14.29.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Change Log
 
+## 14.29.0
+
+### Minor Changes
+
+- 10547ee: Prevent SSR number and multi-number filters from sending empty value
+
+### Patch Changes
+
+- f59703f: Remove filter when value is empty
+
 ## 14.28.0
 
 ### Minor Changes

package/dist/legacy/index.cjs

@@ -54966,6 +54966,7 @@ function ServerSideNumberFilterRenderer({
     }
   );
   const prevValueRef = React80.useRef([]);
+  const internalClearRef = React80.useRef(false);
   const debounceTimerRef = React80.useRef(null);
   React80.useEffect(() => {
     return () => {
@@ -54975,9 +54976,10 @@ function ServerSideNumberFilterRenderer({
     };
   }, []);
   React80.useEffect(() => {
-    if (prevValueRef.current.length !== 0 && value.length === 0) {
+    if (prevValueRef.current.length > 0 && value.length === 0 && !internalClearRef.current) {
       setLocalFilter({});
     }
+    internalClearRef.current = false;
     prevValueRef.current = value;
   }, [value]);
   const transformToFilterArray = (filter) => {
@@ -55063,12 +55065,19 @@ function ServerSideNumberFilterRenderer({
         clearTimeout(debounceTimerRef.current);
       }
       debounceTimerRef.current = setTimeout(() => {
-        if (next.type === "inRange") {
-          if (next.value !== void 0 && next.valueTo !== void 0) {
-            updateFilter(next);
-          }
-        } else {
+        const { type, value: value2, valueTo } = next;
+        if (!type) {
+          onChange == null ? void 0 : onChange([]);
+          return;
+        }
+        const isInRange = type === "inRange";
+        const hasValues = isInRange ? value2 !== void 0 && valueTo !== void 0 : value2 !== void 0;
+        if (hasValues) {
           updateFilter(next);
+        } else {
+          internalClearRef.current = true;
+          setLocalFilter(next);
+          onChange == null ? void 0 : onChange([]);
         }
       }, DEBOUNCE_TIME);
     },
@@ -55202,6 +55211,17 @@ function ServerSideMultiNumberFilterRenderer({
     const [returnedFilter] = returnedFilterArray;
     const next = returnedFilter ? { ...returnedFilter, operator: firstFilter.operator } : { operator: firstFilter.operator };
     setFirstFilter(next);
+    const isCleared = !returnedFilter || !isValidFilter(returnedFilter) && !returnedFilter.type;
+    if (isCleared) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      setFirstFilter({ operator: "and" });
+      setSecondFilter({ operator: "and" });
+      onChange == null ? void 0 : onChange([]);
+      return;
+    }
     if (debounceTimerRef.current)
       clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -55220,20 +55240,12 @@ function ServerSideMultiNumberFilterRenderer({
   };
   const fireOnChange = React80.useCallback(
     (f1, f2) => {
-      if (!f1.type) {
-        onChange == null ? void 0 : onChange([]);
-        setFirstFilter({ operator: "and" });
-        setSecondFilter({ operator: "and" });
-        return;
-      }
       const f1Valid = isValidFilter(f1);
       const f2Valid = isValidFilter(f2);
       const values2 = [f1Valid ? f1 : null, f2Valid ? f2 : null].filter(
         (value2) => value2 !== null
       );
-      if (values2.length) {
-        onChange == null ? void 0 : onChange(values2);
-      }
+      onChange == null ? void 0 : onChange(values2);
     },
     [onChange]
   );
@@ -105779,6 +105791,9 @@ var de_DE_default = {
       selectCell: {
         placeholder: "{{label}} ausw\xE4hlen"
       },
+      multiSelectCell: {
+        placeholder: "Werte ausw\xE4hlen"
+      },
       booleanCell: {
         options: {
           yes: "Ja",
@@ -105844,7 +105859,7 @@ var en_AU_default = {
       close: "Close",
       locationFilter: {
         selectAll: "Select all",
-        includeSublocations: "Include sublocations",
+        includeSublocations: "Include sub-locations",
         searchLocations: "Search locations",
         locations: "Locations"
       },
@@ -105942,6 +105957,9 @@ var en_AU_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106105,6 +106123,9 @@ var en_CA_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106268,6 +106289,9 @@ var en_GB_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106597,6 +106621,9 @@ var es_ES_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106760,6 +106787,9 @@ var es_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106923,6 +106953,9 @@ var fr_CA_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -107086,6 +107119,9 @@ var fr_FR_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -107249,6 +107285,9 @@ var is_IS_default = {
       selectCell: {
         placeholder: "Veldu {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Veldu Gildi"
+      },
       booleanCell: {
         options: {
           yes: "J\xE1",
@@ -107412,6 +107451,9 @@ var ja_JP_default = {
       selectCell: {
         placeholder: "{{label}}\u3092\u9078\u629E\u3059\u308B"
       },
+      multiSelectCell: {
+        placeholder: "\u5024\u3092\u9078\u629E"
+      },
       booleanCell: {
         options: {
           yes: "\u306F\u3044",
@@ -107575,6 +107617,9 @@ var pl_PL_default = {
       selectCell: {
         placeholder: "Wybierz {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Wybierz warto\u015Bci"
+      },
       booleanCell: {
         options: {
           yes: "Tak",
@@ -107777,8 +107822,8 @@ var pt_BR_default = {
         description: "Depois que sua equipe criar esses itens, voc\xEA poder\xE1 acess\xE1-los aqui. ",
         title: "N\xE3o H\xE1 Itens para Exibir Agora",
         itemsTitle: "N\xE3o H\xE1 %{itemsLabel} para Exibir Agora",
-        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es ao %{tableName}",
-        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 tabela %{tableName}",
+        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
+        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
         featureFilter: "Filtrar",
         featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
@@ -107904,6 +107949,9 @@ var pt_BR_default = {
       selectCell: {
         placeholder: "Selecionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Selecionar Valores"
+      },
       booleanCell: {
         options: {
           yes: "Sim",
@@ -108067,6 +108115,9 @@ var th_TH_default = {
       selectCell: {
         placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01 {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E48\u0E32"
+      },
       booleanCell: {
         options: {
           yes: "\u0E43\u0E0A\u0E48",
@@ -108230,6 +108281,9 @@ var zh_SG_default = {
       selectCell: {
         placeholder: "\u9009\u62E9{{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u9009\u62E9\u503C"
+      },
       booleanCell: {
         options: {
           yes: "\u662F",
@@ -109575,7 +109629,7 @@ var Table = (props) => {
   const internalTableContext = useInternalTableContext();
   const clientSideRowData = props.rows ? { rowData: props.rows } : {};
   const serverSideInfiniteScroll = internalTableContext.onServerSideDataRequest ? { serverSideInfiniteScroll: true } : {};
-  const { columnApi, getRowHeight, gridApi } = internalTableContext;
+  const { columnApi, getRowHeight, gridApi, filterState } = internalTableContext;
   const [viewportWidth, setViewportWidth] = React80__default.default.useState(0);
   const rowActionsWidth = React80__default.default.useRef(0);
   const [tableHeight, setTableHeight] = React80__default.default.useState(0);
@@ -109816,6 +109870,13 @@ var Table = (props) => {
       setSiblingGroupsRowSelection(selectedGroupIndex, gridApi);
     }
   }, [internalTableContext.selectedGroupIndex]);
+  React80__default.default.useEffect(() => {
+    filterState.allAvailableFilters.forEach((filter) => {
+      if (Array.isArray(filter.filterValues) && filter.filterValues.length === 0) {
+        tableApi.removeFilter(filter.field);
+      }
+    });
+  }, [filterState.allAvailableFilters]);
   function footerValueGetter(params) {
     if (props.getSubtotalLabel) {
       return props.getSubtotalLabel(

package/dist/legacy/index.js

@@ -54953,6 +54953,7 @@ function ServerSideNumberFilterRenderer({
     }
   );
   const prevValueRef = useRef([]);
+  const internalClearRef = useRef(false);
   const debounceTimerRef = useRef(null);
   useEffect(() => {
     return () => {
@@ -54962,9 +54963,10 @@ function ServerSideNumberFilterRenderer({
     };
   }, []);
   useEffect(() => {
-    if (prevValueRef.current.length !== 0 && value.length === 0) {
+    if (prevValueRef.current.length > 0 && value.length === 0 && !internalClearRef.current) {
       setLocalFilter({});
     }
+    internalClearRef.current = false;
     prevValueRef.current = value;
   }, [value]);
   const transformToFilterArray = (filter) => {
@@ -55050,12 +55052,19 @@ function ServerSideNumberFilterRenderer({
         clearTimeout(debounceTimerRef.current);
       }
       debounceTimerRef.current = setTimeout(() => {
-        if (next.type === "inRange") {
-          if (next.value !== void 0 && next.valueTo !== void 0) {
-            updateFilter(next);
-          }
-        } else {
+        const { type, value: value2, valueTo } = next;
+        if (!type) {
+          onChange == null ? void 0 : onChange([]);
+          return;
+        }
+        const isInRange = type === "inRange";
+        const hasValues = isInRange ? value2 !== void 0 && valueTo !== void 0 : value2 !== void 0;
+        if (hasValues) {
           updateFilter(next);
+        } else {
+          internalClearRef.current = true;
+          setLocalFilter(next);
+          onChange == null ? void 0 : onChange([]);
         }
       }, DEBOUNCE_TIME);
     },
@@ -55189,6 +55198,17 @@ function ServerSideMultiNumberFilterRenderer({
     const [returnedFilter] = returnedFilterArray;
     const next = returnedFilter ? { ...returnedFilter, operator: firstFilter.operator } : { operator: firstFilter.operator };
     setFirstFilter(next);
+    const isCleared = !returnedFilter || !isValidFilter(returnedFilter) && !returnedFilter.type;
+    if (isCleared) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      setFirstFilter({ operator: "and" });
+      setSecondFilter({ operator: "and" });
+      onChange == null ? void 0 : onChange([]);
+      return;
+    }
     if (debounceTimerRef.current)
       clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -55207,20 +55227,12 @@ function ServerSideMultiNumberFilterRenderer({
   };
   const fireOnChange = useCallback(
     (f1, f2) => {
-      if (!f1.type) {
-        onChange == null ? void 0 : onChange([]);
-        setFirstFilter({ operator: "and" });
-        setSecondFilter({ operator: "and" });
-        return;
-      }
       const f1Valid = isValidFilter(f1);
       const f2Valid = isValidFilter(f2);
       const values2 = [f1Valid ? f1 : null, f2Valid ? f2 : null].filter(
         (value2) => value2 !== null
       );
-      if (values2.length) {
-        onChange == null ? void 0 : onChange(values2);
-      }
+      onChange == null ? void 0 : onChange(values2);
     },
     [onChange]
   );
@@ -105766,6 +105778,9 @@ var de_DE_default = {
       selectCell: {
         placeholder: "{{label}} ausw\xE4hlen"
       },
+      multiSelectCell: {
+        placeholder: "Werte ausw\xE4hlen"
+      },
       booleanCell: {
         options: {
           yes: "Ja",
@@ -105831,7 +105846,7 @@ var en_AU_default = {
       close: "Close",
       locationFilter: {
         selectAll: "Select all",
-        includeSublocations: "Include sublocations",
+        includeSublocations: "Include sub-locations",
         searchLocations: "Search locations",
         locations: "Locations"
       },
@@ -105929,6 +105944,9 @@ var en_AU_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106092,6 +106110,9 @@ var en_CA_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106255,6 +106276,9 @@ var en_GB_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106584,6 +106608,9 @@ var es_ES_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106747,6 +106774,9 @@ var es_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106910,6 +106940,9 @@ var fr_CA_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -107073,6 +107106,9 @@ var fr_FR_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -107236,6 +107272,9 @@ var is_IS_default = {
       selectCell: {
         placeholder: "Veldu {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Veldu Gildi"
+      },
       booleanCell: {
         options: {
           yes: "J\xE1",
@@ -107399,6 +107438,9 @@ var ja_JP_default = {
       selectCell: {
         placeholder: "{{label}}\u3092\u9078\u629E\u3059\u308B"
       },
+      multiSelectCell: {
+        placeholder: "\u5024\u3092\u9078\u629E"
+      },
       booleanCell: {
         options: {
           yes: "\u306F\u3044",
@@ -107562,6 +107604,9 @@ var pl_PL_default = {
       selectCell: {
         placeholder: "Wybierz {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Wybierz warto\u015Bci"
+      },
       booleanCell: {
         options: {
           yes: "Tak",
@@ -107764,8 +107809,8 @@ var pt_BR_default = {
         description: "Depois que sua equipe criar esses itens, voc\xEA poder\xE1 acess\xE1-los aqui. ",
         title: "N\xE3o H\xE1 Itens para Exibir Agora",
         itemsTitle: "N\xE3o H\xE1 %{itemsLabel} para Exibir Agora",
-        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es ao %{tableName}",
-        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 tabela %{tableName}",
+        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
+        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
         featureFilter: "Filtrar",
         featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
@@ -107891,6 +107936,9 @@ var pt_BR_default = {
       selectCell: {
         placeholder: "Selecionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Selecionar Valores"
+      },
       booleanCell: {
         options: {
           yes: "Sim",
@@ -108054,6 +108102,9 @@ var th_TH_default = {
       selectCell: {
         placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01 {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E48\u0E32"
+      },
       booleanCell: {
         options: {
           yes: "\u0E43\u0E0A\u0E48",
@@ -108217,6 +108268,9 @@ var zh_SG_default = {
       selectCell: {
         placeholder: "\u9009\u62E9{{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u9009\u62E9\u503C"
+      },
       booleanCell: {
         options: {
           yes: "\u662F",
@@ -109562,7 +109616,7 @@ var Table = (props) => {
   const internalTableContext = useInternalTableContext();
   const clientSideRowData = props.rows ? { rowData: props.rows } : {};
   const serverSideInfiniteScroll = internalTableContext.onServerSideDataRequest ? { serverSideInfiniteScroll: true } : {};
-  const { columnApi, getRowHeight, gridApi } = internalTableContext;
+  const { columnApi, getRowHeight, gridApi, filterState } = internalTableContext;
   const [viewportWidth, setViewportWidth] = React80.useState(0);
   const rowActionsWidth = React80.useRef(0);
   const [tableHeight, setTableHeight] = React80.useState(0);
@@ -109803,6 +109857,13 @@ var Table = (props) => {
       setSiblingGroupsRowSelection(selectedGroupIndex, gridApi);
     }
   }, [internalTableContext.selectedGroupIndex]);
+  React80.useEffect(() => {
+    filterState.allAvailableFilters.forEach((filter) => {
+      if (Array.isArray(filter.filterValues) && filter.filterValues.length === 0) {
+        tableApi.removeFilter(filter.field);
+      }
+    });
+  }, [filterState.allAvailableFilters]);
   function footerValueGetter(params) {
     if (props.getSubtotalLabel) {
       return props.getSubtotalLabel(

package/dist/modern/index.cjs

@@ -54905,6 +54905,7 @@ function ServerSideNumberFilterRenderer({
     }
   );
   const prevValueRef = React80.useRef([]);
+  const internalClearRef = React80.useRef(false);
   const debounceTimerRef = React80.useRef(null);
   React80.useEffect(() => {
     return () => {
@@ -54914,9 +54915,10 @@ function ServerSideNumberFilterRenderer({
     };
   }, []);
   React80.useEffect(() => {
-    if (prevValueRef.current.length !== 0 && value.length === 0) {
+    if (prevValueRef.current.length > 0 && value.length === 0 && !internalClearRef.current) {
       setLocalFilter({});
     }
+    internalClearRef.current = false;
     prevValueRef.current = value;
   }, [value]);
   const transformToFilterArray = (filter) => {
@@ -55002,12 +55004,19 @@ function ServerSideNumberFilterRenderer({
         clearTimeout(debounceTimerRef.current);
       }
       debounceTimerRef.current = setTimeout(() => {
-        if (next.type === "inRange") {
-          if (next.value !== void 0 && next.valueTo !== void 0) {
-            updateFilter(next);
-          }
-        } else {
+        const { type, value: value2, valueTo } = next;
+        if (!type) {
+          onChange?.([]);
+          return;
+        }
+        const isInRange = type === "inRange";
+        const hasValues = isInRange ? value2 !== void 0 && valueTo !== void 0 : value2 !== void 0;
+        if (hasValues) {
           updateFilter(next);
+        } else {
+          internalClearRef.current = true;
+          setLocalFilter(next);
+          onChange?.([]);
         }
       }, DEBOUNCE_TIME);
     },
@@ -55140,6 +55149,17 @@ function ServerSideMultiNumberFilterRenderer({
     const [returnedFilter] = returnedFilterArray;
     const next = returnedFilter ? { ...returnedFilter, operator: firstFilter.operator } : { operator: firstFilter.operator };
     setFirstFilter(next);
+    const isCleared = !returnedFilter || !isValidFilter(returnedFilter) && !returnedFilter.type;
+    if (isCleared) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      setFirstFilter({ operator: "and" });
+      setSecondFilter({ operator: "and" });
+      onChange?.([]);
+      return;
+    }
     if (debounceTimerRef.current)
       clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -55158,20 +55178,12 @@ function ServerSideMultiNumberFilterRenderer({
   };
   const fireOnChange = React80.useCallback(
     (f1, f2) => {
-      if (!f1.type) {
-        onChange?.([]);
-        setFirstFilter({ operator: "and" });
-        setSecondFilter({ operator: "and" });
-        return;
-      }
       const f1Valid = isValidFilter(f1);
       const f2Valid = isValidFilter(f2);
       const values2 = [f1Valid ? f1 : null, f2Valid ? f2 : null].filter(
         (value2) => value2 !== null
       );
-      if (values2.length) {
-        onChange?.(values2);
-      }
+      onChange?.(values2);
     },
     [onChange]
   );
@@ -105613,6 +105625,9 @@ var de_DE_default = {
       selectCell: {
         placeholder: "{{label}} ausw\xE4hlen"
       },
+      multiSelectCell: {
+        placeholder: "Werte ausw\xE4hlen"
+      },
       booleanCell: {
         options: {
           yes: "Ja",
@@ -105678,7 +105693,7 @@ var en_AU_default = {
       close: "Close",
       locationFilter: {
         selectAll: "Select all",
-        includeSublocations: "Include sublocations",
+        includeSublocations: "Include sub-locations",
         searchLocations: "Search locations",
         locations: "Locations"
       },
@@ -105776,6 +105791,9 @@ var en_AU_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -105939,6 +105957,9 @@ var en_CA_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106102,6 +106123,9 @@ var en_GB_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106431,6 +106455,9 @@ var es_ES_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106594,6 +106621,9 @@ var es_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106757,6 +106787,9 @@ var fr_CA_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -106920,6 +106953,9 @@ var fr_FR_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -107083,6 +107119,9 @@ var is_IS_default = {
       selectCell: {
         placeholder: "Veldu {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Veldu Gildi"
+      },
       booleanCell: {
         options: {
           yes: "J\xE1",
@@ -107246,6 +107285,9 @@ var ja_JP_default = {
       selectCell: {
         placeholder: "{{label}}\u3092\u9078\u629E\u3059\u308B"
       },
+      multiSelectCell: {
+        placeholder: "\u5024\u3092\u9078\u629E"
+      },
       booleanCell: {
         options: {
           yes: "\u306F\u3044",
@@ -107409,6 +107451,9 @@ var pl_PL_default = {
       selectCell: {
         placeholder: "Wybierz {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Wybierz warto\u015Bci"
+      },
       booleanCell: {
         options: {
           yes: "Tak",
@@ -107611,8 +107656,8 @@ var pt_BR_default = {
         description: "Depois que sua equipe criar esses itens, voc\xEA poder\xE1 acess\xE1-los aqui. ",
         title: "N\xE3o H\xE1 Itens para Exibir Agora",
         itemsTitle: "N\xE3o H\xE1 %{itemsLabel} para Exibir Agora",
-        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es ao %{tableName}",
-        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 tabela %{tableName}",
+        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
+        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
         featureFilter: "Filtrar",
         featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
@@ -107738,6 +107783,9 @@ var pt_BR_default = {
       selectCell: {
         placeholder: "Selecionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Selecionar Valores"
+      },
       booleanCell: {
         options: {
           yes: "Sim",
@@ -107901,6 +107949,9 @@ var th_TH_default = {
       selectCell: {
         placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01 {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E48\u0E32"
+      },
       booleanCell: {
         options: {
           yes: "\u0E43\u0E0A\u0E48",
@@ -108064,6 +108115,9 @@ var zh_SG_default = {
       selectCell: {
         placeholder: "\u9009\u62E9{{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u9009\u62E9\u503C"
+      },
       booleanCell: {
         options: {
           yes: "\u662F",
@@ -109390,7 +109444,7 @@ var Table = (props) => {
   const internalTableContext = useInternalTableContext();
   const clientSideRowData = props.rows ? { rowData: props.rows } : {};
   const serverSideInfiniteScroll = internalTableContext.onServerSideDataRequest ? { serverSideInfiniteScroll: true } : {};
-  const { columnApi, getRowHeight, gridApi } = internalTableContext;
+  const { columnApi, getRowHeight, gridApi, filterState } = internalTableContext;
   const [viewportWidth, setViewportWidth] = React80__default.default.useState(0);
   const rowActionsWidth = React80__default.default.useRef(0);
   const [tableHeight, setTableHeight] = React80__default.default.useState(0);
@@ -109619,6 +109673,13 @@ var Table = (props) => {
       setSiblingGroupsRowSelection(selectedGroupIndex, gridApi);
     }
   }, [internalTableContext.selectedGroupIndex]);
+  React80__default.default.useEffect(() => {
+    filterState.allAvailableFilters.forEach((filter) => {
+      if (Array.isArray(filter.filterValues) && filter.filterValues.length === 0) {
+        tableApi.removeFilter(filter.field);
+      }
+    });
+  }, [filterState.allAvailableFilters]);
   function footerValueGetter(params) {
     if (props.getSubtotalLabel) {
       return props.getSubtotalLabel(

package/dist/modern/index.js

@@ -54892,6 +54892,7 @@ function ServerSideNumberFilterRenderer({
     }
   );
   const prevValueRef = useRef([]);
+  const internalClearRef = useRef(false);
   const debounceTimerRef = useRef(null);
   useEffect(() => {
     return () => {
@@ -54901,9 +54902,10 @@ function ServerSideNumberFilterRenderer({
     };
   }, []);
   useEffect(() => {
-    if (prevValueRef.current.length !== 0 && value.length === 0) {
+    if (prevValueRef.current.length > 0 && value.length === 0 && !internalClearRef.current) {
       setLocalFilter({});
     }
+    internalClearRef.current = false;
     prevValueRef.current = value;
   }, [value]);
   const transformToFilterArray = (filter) => {
@@ -54989,12 +54991,19 @@ function ServerSideNumberFilterRenderer({
         clearTimeout(debounceTimerRef.current);
       }
       debounceTimerRef.current = setTimeout(() => {
-        if (next.type === "inRange") {
-          if (next.value !== void 0 && next.valueTo !== void 0) {
-            updateFilter(next);
-          }
-        } else {
+        const { type, value: value2, valueTo } = next;
+        if (!type) {
+          onChange?.([]);
+          return;
+        }
+        const isInRange = type === "inRange";
+        const hasValues = isInRange ? value2 !== void 0 && valueTo !== void 0 : value2 !== void 0;
+        if (hasValues) {
           updateFilter(next);
+        } else {
+          internalClearRef.current = true;
+          setLocalFilter(next);
+          onChange?.([]);
         }
       }, DEBOUNCE_TIME);
     },
@@ -55127,6 +55136,17 @@ function ServerSideMultiNumberFilterRenderer({
     const [returnedFilter] = returnedFilterArray;
     const next = returnedFilter ? { ...returnedFilter, operator: firstFilter.operator } : { operator: firstFilter.operator };
     setFirstFilter(next);
+    const isCleared = !returnedFilter || !isValidFilter(returnedFilter) && !returnedFilter.type;
+    if (isCleared) {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
+        debounceTimerRef.current = null;
+      }
+      setFirstFilter({ operator: "and" });
+      setSecondFilter({ operator: "and" });
+      onChange?.([]);
+      return;
+    }
     if (debounceTimerRef.current)
       clearTimeout(debounceTimerRef.current);
     debounceTimerRef.current = setTimeout(() => {
@@ -55145,20 +55165,12 @@ function ServerSideMultiNumberFilterRenderer({
   };
   const fireOnChange = useCallback(
     (f1, f2) => {
-      if (!f1.type) {
-        onChange?.([]);
-        setFirstFilter({ operator: "and" });
-        setSecondFilter({ operator: "and" });
-        return;
-      }
       const f1Valid = isValidFilter(f1);
       const f2Valid = isValidFilter(f2);
       const values2 = [f1Valid ? f1 : null, f2Valid ? f2 : null].filter(
         (value2) => value2 !== null
       );
-      if (values2.length) {
-        onChange?.(values2);
-      }
+      onChange?.(values2);
     },
     [onChange]
   );
@@ -105600,6 +105612,9 @@ var de_DE_default = {
       selectCell: {
         placeholder: "{{label}} ausw\xE4hlen"
       },
+      multiSelectCell: {
+        placeholder: "Werte ausw\xE4hlen"
+      },
       booleanCell: {
         options: {
           yes: "Ja",
@@ -105665,7 +105680,7 @@ var en_AU_default = {
       close: "Close",
       locationFilter: {
         selectAll: "Select all",
-        includeSublocations: "Include sublocations",
+        includeSublocations: "Include sub-locations",
         searchLocations: "Search locations",
         locations: "Locations"
       },
@@ -105763,6 +105778,9 @@ var en_AU_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -105926,6 +105944,9 @@ var en_CA_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106089,6 +106110,9 @@ var en_GB_default = {
       selectCell: {
         placeholder: "Select {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Select values"
+      },
       booleanCell: {
         options: {
           yes: "Yes",
@@ -106418,6 +106442,9 @@ var es_ES_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106581,6 +106608,9 @@ var es_default = {
       selectCell: {
         placeholder: "Seleccionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Seleccionar valores"
+      },
       booleanCell: {
         options: {
           yes: "S\xED",
@@ -106744,6 +106774,9 @@ var fr_CA_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -106907,6 +106940,9 @@ var fr_FR_default = {
       selectCell: {
         placeholder: "S\xE9lectionner {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "S\xE9lectionner les valeurs"
+      },
       booleanCell: {
         options: {
           yes: "Oui",
@@ -107070,6 +107106,9 @@ var is_IS_default = {
       selectCell: {
         placeholder: "Veldu {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Veldu Gildi"
+      },
       booleanCell: {
         options: {
           yes: "J\xE1",
@@ -107233,6 +107272,9 @@ var ja_JP_default = {
       selectCell: {
         placeholder: "{{label}}\u3092\u9078\u629E\u3059\u308B"
       },
+      multiSelectCell: {
+        placeholder: "\u5024\u3092\u9078\u629E"
+      },
       booleanCell: {
         options: {
           yes: "\u306F\u3044",
@@ -107396,6 +107438,9 @@ var pl_PL_default = {
       selectCell: {
         placeholder: "Wybierz {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Wybierz warto\u015Bci"
+      },
       booleanCell: {
         options: {
           yes: "Tak",
@@ -107598,8 +107643,8 @@ var pt_BR_default = {
         description: "Depois que sua equipe criar esses itens, voc\xEA poder\xE1 acess\xE1-los aqui. ",
         title: "N\xE3o H\xE1 Itens para Exibir Agora",
         itemsTitle: "N\xE3o H\xE1 %{itemsLabel} para Exibir Agora",
-        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es ao %{tableName}",
-        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 tabela %{tableName}",
+        tooltip: "O bot\xE3o %{featureName} ser\xE1 ativado assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
+        searchTooltip: "A pesquisa ser\xE1 ativada assim que voc\xEA adicionar informa\xE7\xF5es \xE0 %{tableName}",
         featureFilter: "Filtrar",
         featureQuickFilter: "Filtro r\xE1pido",
         featureGroupBy: "Agrupar por",
@@ -107725,6 +107770,9 @@ var pt_BR_default = {
       selectCell: {
         placeholder: "Selecionar {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "Selecionar Valores"
+      },
       booleanCell: {
         options: {
           yes: "Sim",
@@ -107888,6 +107936,9 @@ var th_TH_default = {
       selectCell: {
         placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01 {{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E04\u0E48\u0E32"
+      },
       booleanCell: {
         options: {
           yes: "\u0E43\u0E0A\u0E48",
@@ -108051,6 +108102,9 @@ var zh_SG_default = {
       selectCell: {
         placeholder: "\u9009\u62E9{{label}}"
       },
+      multiSelectCell: {
+        placeholder: "\u9009\u62E9\u503C"
+      },
       booleanCell: {
         options: {
           yes: "\u662F",
@@ -109377,7 +109431,7 @@ var Table = (props) => {
   const internalTableContext = useInternalTableContext();
   const clientSideRowData = props.rows ? { rowData: props.rows } : {};
   const serverSideInfiniteScroll = internalTableContext.onServerSideDataRequest ? { serverSideInfiniteScroll: true } : {};
-  const { columnApi, getRowHeight, gridApi } = internalTableContext;
+  const { columnApi, getRowHeight, gridApi, filterState } = internalTableContext;
   const [viewportWidth, setViewportWidth] = React80.useState(0);
   const rowActionsWidth = React80.useRef(0);
   const [tableHeight, setTableHeight] = React80.useState(0);
@@ -109606,6 +109660,13 @@ var Table = (props) => {
       setSiblingGroupsRowSelection(selectedGroupIndex, gridApi);
     }
   }, [internalTableContext.selectedGroupIndex]);
+  React80.useEffect(() => {
+    filterState.allAvailableFilters.forEach((filter) => {
+      if (Array.isArray(filter.filterValues) && filter.filterValues.length === 0) {
+        tableApi.removeFilter(filter.field);
+      }
+    });
+  }, [filterState.allAvailableFilters]);
   function footerValueGetter(params) {
     if (props.getSubtotalLabel) {
       return props.getSubtotalLabel(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.28.0",
+  "version": "14.29.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "type": "module",
   "main": "dist/legacy/index.cjs",
@@ -130,7 +130,6 @@
     "@testing-library/react": "11.0.4",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "13.1.5",
-    "@types/enzyme": "3.10.12",
     "@types/lodash.debounce": "4.0.7",
     "@types/lodash.isequal": "4.5.0",
     "@types/ramda": "0.28.23",
@@ -141,14 +140,12 @@
     "@types/testing-library__jest-dom": "5.14.5",
     "@typescript-eslint/eslint-plugin": "5.48.2",
     "@typescript-eslint/parser": "5.48.1",
-    "@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",
-    "enzyme": "3.11.0",
     "esbuild-sass-plugin": "^2.16.1",
     "eslint": "8.31.0",
     "eslint-config-airbnb": "19.0.4",