@visactor/vtable-sheet 1.22.4-alpha.1 → 1.22.4-alpha.2

package/cjs/index.d.ts

@@ -2,5 +2,5 @@ import VTableSheet from './components/vtable-sheet';
 import type { ISheetDefine, IVTableSheetOptions } from './ts-types';
 import * as TYPES from './ts-types';
 import * as VTable from './vtable';
-export declare const version = "1.22.4-alpha.1";
+export declare const version = "1.22.4-alpha.2";
 export { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };

package/cjs/index.js

@@ -47,4 +47,4 @@ exports.VTable = VTable;
 
 const style_manager_1 = require("./styles/style-manager");
 
-exports.version = "1.22.4-alpha.1", (0, style_manager_1.importStyles)();
+exports.version = "1.22.4-alpha.2", (0, style_manager_1.importStyles)();

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.22.4-alpha.1\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };\n"]}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6EAAoD;AAW3C,sBAXF,sBAAW,CAWE;AATpB,kDAAoC;AASd,sBAAK;AAR3B,iDAAmC;AAQN,wBAAM;AAPnC,0DAAsD;AACzC,QAAA,OAAO,GAAG,gBAAgB,CAAC;AAExC,IAAA,4BAAY,GAAE,CAAC","file":"index.js","sourcesContent":["import VTableSheet from './components/vtable-sheet';\nimport type { ISheetDefine, IVTableSheetOptions } from './ts-types';\nimport * as TYPES from './ts-types';\nimport * as VTable from './vtable';\nimport { importStyles } from './styles/style-manager';\nexport const version = \"1.22.4-alpha.2\";\n// 导入样式\nimportStyles();\n/**\n * @namespace VTableSheet\n */\nexport { VTableSheet, TYPES, VTable, ISheetDefine, IVTableSheetOptions };\n"]}

package/dist/vtable-sheet.js

@@ -59310,7 +59310,7 @@
       }
       constructor(container, options = {}) {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
-        if (super(), this.showFrozenIcon = !0, this.version = "1.22.4-alpha.1", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
+        if (super(), this.showFrozenIcon = !0, this.version = "1.22.4-alpha.2", this.id = `VTable${Date.now()}`, this.isReleased = !1, this._chartEventMap = {}, this.throttleInvalidate = throttle2(this.render.bind(this), 200), "node" === Env$1.mode ? (options = container, container = null) : container instanceof HTMLElement || (options = container, container = container.container ? container.container : null), !container && "node" !== options.mode && !options.canvas) throw new Error("vtable's container is undefined");
         this.pluginManager = new PluginManager(this, options), this.fireListeners(TABLE_EVENT_TYPE.BEFORE_INIT, {
           options: options,
           container: container
@@ -72268,7 +72268,7 @@
 
     class FilterStateManager {
       constructor(table, engine) {
-        this.listeners = [], this.state = {
+        this.listeners = [], this.filterMenuStates = new Map(), this.state = {
           filters: new Map()
         }, this.engine = engine, this.table = table;
       }
@@ -72342,6 +72342,44 @@
       shouldApplyFilter(action) {
         return [FilterActionType.REMOVE_FILTER, FilterActionType.ENABLE_FILTER, FilterActionType.DISABLE_FILTER, FilterActionType.CLEAR_ALL_FILTERS, FilterActionType.APPLY_FILTERS].includes(action.type) || action.payload.enable;
       }
+      initializeFilterMenuState(fieldId, candidateValues, displayToRawMap) {
+        this.filterMenuStates.set(fieldId, {
+          stableCandidateValues: candidateValues,
+          currentSearchKeyword: "",
+          displayToRawMap: displayToRawMap
+        });
+      }
+      getStableCandidateValues(fieldId) {
+        var _a;
+        return (null === (_a = this.filterMenuStates.get(fieldId)) || void 0 === _a ? void 0 : _a.stableCandidateValues) || [];
+      }
+      updateSearchKeyword(fieldId, keyword) {
+        const menuState = this.filterMenuStates.get(fieldId);
+        menuState && (menuState.currentSearchKeyword = keyword);
+      }
+      getVisibleSelectedValues(fieldId) {
+        const menuState = this.filterMenuStates.get(fieldId),
+          filter = this.getFilterState(fieldId);
+        if (!menuState || !(null == filter ? void 0 : filter.values)) return new Set();
+        const allSelectedValues = new Set(filter.values),
+          filterKeywords = menuState.currentSearchKeyword.toUpperCase().split(" ").filter(s => s);
+        if (0 === filterKeywords.length) return allSelectedValues;
+        const visibleSelected = new Set();
+        for (const candidate of menuState.stableCandidateValues) {
+          const displayValue = candidate.value,
+            txtValue = String(displayValue).toUpperCase(),
+            match = filterKeywords.some(keyword => txtValue.includes(keyword));
+          if (match) {
+            const rawValue = menuState.displayToRawMap ? menuState.displayToRawMap.get(displayValue) : displayValue;
+            allSelectedValues.has(rawValue) && visibleSelected.add(rawValue);
+          }
+        }
+        return visibleSelected;
+      }
+      getCurrentSearchKeyword(fieldId) {
+        var _a;
+        return (null === (_a = this.filterMenuStates.get(fieldId)) || void 0 === _a ? void 0 : _a.currentSearchKeyword) || "";
+      }
     }
 
     const filterStyles = {
@@ -72496,11 +72534,8 @@
         this.selectedField = fieldId, this.collectUniqueColumnValues(fieldId);
       }
       collectUniqueColumnValues(fieldId) {
-        var _a;
-        const isEnable = null === (_a = this.filterStateManager.getFilterState(fieldId)) || void 0 === _a ? void 0 : _a.enable,
-          displayValueMap = new Map(),
-          rawToDisplayMap = new Map(),
-          displayToRawMap = new Map();
+        if (this.uniqueKeys.has(fieldId)) return;
+        const displayToRawMap = new Map();
         let targetCol = -1;
         for (let col = 0; col < this.table.colCount; col++) {
           for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
@@ -72512,133 +72547,164 @@
           }
           if (-1 !== targetCol) break;
         }
-        if (isEnable) {
-          const records = this.table.internalProps.records,
-            recordsLength = records.length;
-          for (let i = 0; i < recordsLength; i++) {
-            let rawValue, displayValue;
-            if (-1 !== targetCol) {
-              const row = this.table.columnHeaderLevelCount + i;
-              rawValue = records[i][fieldId];
-              const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
-              displayValue = bodyInfo && "fieldFormat" in bodyInfo && bodyInfo.fieldFormat && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat({
-                [fieldId]: rawValue
-              }) : rawValue;
-            }
-            null != rawValue && (displayValueMap.set(displayValue, (displayValueMap.get(displayValue) || 0) + 1), rawToDisplayMap.set(rawValue, displayValue), displayToRawMap.set(displayValue, rawValue));
-          }
-        } else {
-          const currentLength = this.table.internalProps.dataSource.length;
-          for (let i = 0; i < currentLength; i++) {
-            let rawValue, displayValue;
-            if (-1 !== targetCol) {
-              const row = this.table.columnHeaderLevelCount + i;
-              row < this.table.rowCount && (rawValue = this.table.getCellOriginValue(targetCol, row), displayValue = this.table.getCellValue(targetCol, row));
-            } else rawValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i), displayValue = rawValue;
-            null != rawValue && (displayValueMap.set(displayValue, (displayValueMap.get(displayValue) || 0) + 1), rawToDisplayMap.set(rawValue, displayValue), displayToRawMap.set(displayValue, rawValue));
-          }
+        const records = this.table.internalProps.records,
+          recordsLength = records.length;
+        for (let i = 0; i < recordsLength; i++) {
+          let rawValue, displayValue;
+          if (-1 !== targetCol) {
+            const row = this.table.columnHeaderLevelCount + i;
+            rawValue = records[i][fieldId];
+            const bodyInfo = this.table.internalProps.layoutMap.getBody(targetCol, row);
+            displayValue = bodyInfo && "fieldFormat" in bodyInfo && bodyInfo.fieldFormat && "function" == typeof bodyInfo.fieldFormat ? bodyInfo.fieldFormat({
+              [fieldId]: rawValue
+            }) : rawValue;
+          } else rawValue = records[i][fieldId], displayValue = rawValue;
+          null == rawValue || displayToRawMap.has(displayValue) || displayToRawMap.set(displayValue, rawValue);
         }
         this.displayToRawValueMap.set(fieldId, displayToRawMap);
-        const uniqueValues = Array.from(displayValueMap.entries()).map(([displayValue, count]) => ({
+        const uniqueValues = Array.from(displayToRawMap.entries()).map(([displayValue, rawValue]) => ({
           value: displayValue,
-          count: count,
-          rawValue: displayToRawMap.get(displayValue)
+          count: 0,
+          rawValue: rawValue
         }));
         this.uniqueKeys.set(fieldId, uniqueValues);
       }
+      updateCandidateCounts(fieldId) {
+        const uniqueValues = this.uniqueKeys.get(fieldId);
+        if (!uniqueValues) return;
+        const filter = this.filterStateManager.getFilterState(fieldId),
+          dataSource = (null == filter ? void 0 : filter.enable) ? this.table.internalProps.records : this.table.internalProps.dataSource;
+        let targetCol = -1;
+        for (let col = 0; col < this.table.colCount; col++) {
+          for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+            const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+            if (bodyInfo && bodyInfo.field === fieldId) {
+              targetCol = col;
+              break;
+            }
+          }
+          if (-1 !== targetCol) break;
+        }
+        const dataLength = dataSource.length,
+          countMap = new Map();
+        for (let i = 0; i < dataLength; i++) {
+          let displayValue;
+          if (-1 !== targetCol) {
+            const row = this.table.columnHeaderLevelCount + i;
+            row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row));
+          } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i);
+          null != displayValue && countMap.set(displayValue, (countMap.get(displayValue) || 0) + 1);
+        }
+        uniqueValues.forEach(item => {
+          item.count = countMap.get(item.value) || 0;
+        });
+      }
       onValueSelect(fieldId, displayValue, selected) {
         const displayToRawMap = this.displayToRawValueMap.get(fieldId),
           rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue,
           filter = this.filterStateManager.getFilterState(fieldId);
-        if (filter) {
-          const updatedValues = selected ? [...(filter.values || []), rawValue] : (filter.values || []).filter(v => v !== rawValue);
-          this.filterStateManager.dispatch({
-            type: FilterActionType.UPDATE_FILTER,
-            payload: {
-              field: fieldId,
-              values: updatedValues
-            }
-          });
-        } else this.filterStateManager.dispatch({
+        let updatedValues;
+        filter ? (updatedValues = selected ? [...(filter.values || []), rawValue] : (filter.values || []).filter(v => v !== rawValue), this.filterStateManager.dispatch({
+          type: FilterActionType.UPDATE_FILTER,
+          payload: {
+            field: fieldId,
+            values: updatedValues
+          }
+        })) : (updatedValues = selected ? [rawValue] : [], this.filterStateManager.dispatch({
           type: FilterActionType.ADD_FILTER,
           payload: {
             field: fieldId,
             type: "byValue",
-            values: [rawValue]
+            values: updatedValues
           }
-        });
+        }));
+      }
+      isValueVisible(displayValue, keyword) {
+        if (!keyword) return !0;
+        const filterKeywords = keyword.toUpperCase().split(" ").filter(s => s),
+          txtValue = String(displayValue).toUpperCase();
+        return filterKeywords.some(keyword => txtValue.includes(keyword));
       }
       toggleSelectAll(fieldId, selected) {
-        var _a;
-        const filter = this.filterStateManager.getFilterState(fieldId),
-          rawValuesToUpdate = selected && (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.map(item => item.rawValue)) || [];
-        if (filter) {
-          const updatedValues = selected ? rawValuesToUpdate : [];
-          this.filterStateManager.dispatch({
-            type: FilterActionType.UPDATE_FILTER,
-            payload: {
-              field: fieldId,
-              values: updatedValues
-            }
-          });
-        } else this.filterStateManager.dispatch({
+        const currentKeyword = this.filterStateManager.getCurrentSearchKeyword(fieldId),
+          stableCandidates = this.filterStateManager.getStableCandidateValues(fieldId),
+          displayToRawMap = this.displayToRawValueMap.get(fieldId),
+          visibleRawValues = stableCandidates.filter(candidate => this.isValueVisible(candidate.value, currentKeyword)).map(candidate => displayToRawMap ? displayToRawMap.get(candidate.value) : candidate.value),
+          filter = this.filterStateManager.getFilterState(fieldId),
+          currentValues = new Set((null == filter ? void 0 : filter.values) || []);
+        let updatedValues;
+        updatedValues = selected ? Array.from(new Set([...currentValues, ...visibleRawValues])) : Array.from(currentValues).filter(value => !visibleRawValues.includes(value)), filter ? this.filterStateManager.dispatch({
+          type: FilterActionType.UPDATE_FILTER,
+          payload: {
+            field: fieldId,
+            values: updatedValues
+          }
+        }) : this.filterStateManager.dispatch({
           type: FilterActionType.ADD_FILTER,
           payload: {
             field: fieldId,
             type: "byValue",
-            values: rawValuesToUpdate,
+            values: updatedValues,
             enable: !0
           }
         });
       }
       onSearch(fieldId, value) {
-        const filterKeywords = value.toUpperCase().split(" ").filter(s => s),
-          items = this.valueFilterOptionList.get(fieldId);
+        this.filterStateManager.updateSearchKeyword(fieldId, value);
+        const items = this.valueFilterOptionList.get(fieldId),
+          filterKeywords = value.toUpperCase().split(" ").filter(s => s);
         for (const item of items) {
           const txtValue = item.id.toUpperCase() || "",
-            match = filterKeywords.some(keyword => txtValue.includes(keyword));
-          item.itemContainer.style.display = 0 === filterKeywords.length || match ? "flex" : "none";
+            match = filterKeywords.some(keyword => txtValue.includes(keyword)),
+            isVisible = 0 === filterKeywords.length || match;
+          item.itemContainer.style.display = isVisible ? "flex" : "none";
         }
       }
       initFilterStateFromTableData(fieldId) {
-        const filter = this.filterStateManager.getFilterState(fieldId),
-          selectedRawValues = new Set(),
-          displayToRawMap = this.displayToRawValueMap.get(fieldId);
-        let targetCol = -1;
-        for (let col = 0; col < this.table.colCount; col++) {
-          for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
-            const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
-            if (bodyInfo && bodyInfo.field === fieldId) {
-              targetCol = col;
-              break;
+        var _a, _b;
+        const filter = this.filterStateManager.getFilterState(fieldId);
+        if (null == filter ? void 0 : filter.enable) {
+          const selectedRawValues = new Set(),
+            displayToRawMap = this.displayToRawValueMap.get(fieldId);
+          let targetCol = -1;
+          for (let col = 0; col < this.table.colCount; col++) {
+            for (let row = this.table.columnHeaderLevelCount; row < this.table.rowCount; row++) if (!this.table.internalProps.layoutMap.isHeader(col, row)) {
+              const bodyInfo = this.table.internalProps.layoutMap.getBody(col, row);
+              if (bodyInfo && bodyInfo.field === fieldId) {
+                targetCol = col;
+                break;
+              }
             }
+            if (-1 !== targetCol) break;
           }
-          if (-1 !== targetCol) break;
-        }
-        const currentLength = this.table.internalProps.dataSource.length;
-        for (let i = 0; i < currentLength; i++) {
-          let displayValue, rawValue;
-          if (-1 !== targetCol) {
-            const row = this.table.columnHeaderLevelCount + i;
-            row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue);
-          } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
-          null != rawValue && selectedRawValues.add(rawValue);
-        }
-        (!filter || !arrayEqual(filter.values, Array.from(selectedRawValues))) && (filter ? this.filterStateManager.dispatch({
-          type: FilterActionType.UPDATE_FILTER,
-          payload: {
-            field: fieldId,
-            type: "byValue",
-            values: Array.from(selectedRawValues)
-          }
-        }) : this.filterStateManager.dispatch({
-          type: FilterActionType.ADD_FILTER,
-          payload: {
-            field: fieldId,
-            type: "byValue",
-            values: Array.from(selectedRawValues)
+          const currentLength = this.table.internalProps.dataSource.length;
+          for (let i = 0; i < currentLength; i++) {
+            let displayValue, rawValue;
+            if (-1 !== targetCol) {
+              const row = this.table.columnHeaderLevelCount + i;
+              row < this.table.rowCount && (displayValue = this.table.getCellValue(targetCol, row), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue);
+            } else displayValue = this.table.getFieldData(String(fieldId), -1 !== targetCol ? targetCol : 0, this.table.columnHeaderLevelCount + i), rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
+            null != rawValue && selectedRawValues.add(rawValue);
           }
-        }));
+          !arrayEqual(filter.values, Array.from(selectedRawValues)) && this.filterStateManager.dispatch({
+            type: FilterActionType.UPDATE_FILTER,
+            payload: {
+              field: fieldId,
+              values: Array.from(selectedRawValues)
+            }
+          });
+        } else if (!filter) {
+          const availableRawValues = (null === (_b = null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.filter(item => item.count > 0)) || void 0 === _b ? void 0 : _b.map(item => item.rawValue).filter(v => null != v)) || [];
+          this.filterStateManager.dispatch({
+            type: FilterActionType.ADD_FILTER,
+            payload: {
+              field: fieldId,
+              type: "byValue",
+              values: availableRawValues,
+              enable: !1
+            }
+          });
+        }
       }
       syncCheckboxesWithFilterState(filter) {
         if (!filter) return;
@@ -72651,7 +72717,7 @@
             rawValue = displayToRawMap ? displayToRawMap.get(displayValue) : displayValue;
           optionDom.checkbox.checked = selectedRawValues.some(v => v === rawValue);
           const count = (null === (_b = null === (_a = this.uniqueKeys.get(filter.field)) || void 0 === _a ? void 0 : _a.find(key => String(key.value) === optionDom.id)) || void 0 === _b ? void 0 : _b.count) || 0;
-          optionDom.countSpan.textContent = String(count), optionDom.itemContainer.style.display = 0 === count ? "none" : "flex";
+          optionDom.checkbox.disabled = 0 === count;
         });
       }
       syncSelectAllWithFilterState(filter) {
@@ -72661,14 +72727,14 @@
         0 === uniqueValuesCount || 0 === filter.values.length ? (this.selectAllCheckbox.checked = !1, this.selectAllCheckbox.indeterminate = !1) : filter.values.length === uniqueValuesCount ? (this.selectAllCheckbox.checked = !0, this.selectAllCheckbox.indeterminate = !1) : (this.selectAllCheckbox.checked = !1, this.selectAllCheckbox.indeterminate = !0);
       }
       applyFilter(fieldId = this.selectedField) {
-        var _a, _b;
-        const selectedKeys = (null === (_a = this.filterStateManager.getFilterState(fieldId)) || void 0 === _a ? void 0 : _a.values) || [];
-        selectedKeys.length > 0 && selectedKeys.length < (null === (_b = this.uniqueKeys.get(fieldId)) || void 0 === _b ? void 0 : _b.length) ? this.filterStateManager.dispatch({
+        var _a;
+        const visibleSelectedKeys = Array.from(this.filterStateManager.getVisibleSelectedValues(fieldId));
+        visibleSelectedKeys.length > 0 && visibleSelectedKeys.length < (null === (_a = this.uniqueKeys.get(fieldId)) || void 0 === _a ? void 0 : _a.length) ? this.filterStateManager.dispatch({
           type: FilterActionType.APPLY_FILTERS,
           payload: {
             field: fieldId,
             type: "byValue",
-            values: selectedKeys,
+            values: visibleSelectedKeys,
             enable: !0
           }
         }) : this.filterStateManager.dispatch({
@@ -72709,11 +72775,11 @@
           rawValue: rawValue
         }) => {
           const itemDiv = document.createElement("div");
-          applyStyles(itemDiv, this.styles.optionItem);
+          applyStyles(itemDiv, this.styles.optionItem), itemDiv.style.display = "flex";
           const label = document.createElement("label");
           applyStyles(label, this.styles.optionLabel);
           const checkbox = document.createElement("input");
-          checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), applyStyles(checkbox, this.styles.checkbox);
+          checkbox.type = "checkbox", checkbox.value = String(value), checkbox.checked = selectedRawValueSet.has(rawValue), checkbox.disabled = 0 === count, applyStyles(checkbox, this.styles.checkbox);
           const countSpan = document.createElement("span");
           countSpan.textContent = String(count), applyStyles(countSpan, this.styles.countSpan), label.append(checkbox, ` ${value}`), itemDiv.append(label, countSpan), this.filterItemsContainer.appendChild(itemDiv);
           const itemDom = {
@@ -72745,7 +72811,10 @@
         });
       }
       show() {
-        this.initFilterStateFromTableData(this.selectedField), this.renderFilterOptions(this.selectedField), this.filterByValuePanel.style.display = "block";
+        this.collectUniqueColumnValues(this.selectedField), this.updateCandidateCounts(this.selectedField), this.initFilterStateFromTableData(this.selectedField);
+        const uniqueValues = this.uniqueKeys.get(this.selectedField),
+          displayToRawMap = this.displayToRawValueMap.get(this.selectedField);
+        uniqueValues && displayToRawMap && this.filterStateManager.initializeFilterMenuState(this.selectedField, uniqueValues, displayToRawMap), this.filterByValueSearchInput && (this.filterByValueSearchInput.value = ""), this.renderFilterOptions(this.selectedField), this.filterByValuePanel.style.display = "block";
       }
       hide() {
         this.filterByValuePanel.style.display = "none";
@@ -72992,7 +73061,9 @@
 
     class FilterToolbar {
       constructor(table, filterStateManager, styles) {
-        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, this.filterStateManager = filterStateManager, this.styles = styles, this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles), this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles), this.filterMenuWidth = 300;
+        this.valueFilter = null, this.conditionFilter = null, this.activeTab = "byValue", this.isVisible = !1, this.selectedField = null, this.filterModes = [], this.table = table, this.filterStateManager = filterStateManager, this.styles = styles, this.valueFilter = new ValueFilter(this.table, this.filterStateManager, this.styles), this.conditionFilter = new ConditionFilter(this.table, this.filterStateManager, this.styles), this.filterMenuWidth = 300, this.filterStateManager.subscribe(state => {
+          this.isVisible && null !== this.selectedField && this.updateClearFilterButtonState(this.selectedField);
+        });
       }
       onTabSwitch(tab) {
         this.activeTab = tab, "byValue" === tab ? (this.valueFilter.show(), this.conditionFilter.hide()) : (this.conditionFilter.show(), this.valueFilter.hide());
@@ -73008,6 +73079,11 @@
       clearFilter(field) {
         this.valueFilter && this.valueFilter.clearFilter(field), this.conditionFilter && this.conditionFilter.clearFilter(field), this.hide();
       }
+      updateClearFilterButtonState(field) {
+        const currentFilter = this.filterStateManager.getFilterState(field),
+          hasActiveFilter = currentFilter && currentFilter.enable;
+        this.clearFilterOptionLink.style.display = "inline", this.clearFilterOptionLink.style.opacity = hasActiveFilter ? "1" : "0.5", this.clearFilterOptionLink.style.pointerEvents = hasActiveFilter ? "auto" : "none", this.clearFilterOptionLink.style.cursor = hasActiveFilter ? "pointer" : "not-allowed";
+      }
       render(container) {
         this.filterMenu = document.createElement("div"), applyStyles(this.filterMenu, this.styles.filterMenu), this.filterMenu.style.width = `${this.filterMenuWidth}px`;
         const filterTabsContainer = document.createElement("div");
@@ -73042,7 +73118,7 @@
         const field = this.table.internalProps.layoutMap.getHeaderField(col, row);
         this.updateSelectedField(field);
         const currentFilter = this.filterStateManager.getFilterState(field);
-        currentFilter && "byCondition" === currentFilter.type ? this.onTabSwitch("byCondition") : this.onTabSwitch("byValue"), setTimeout(() => {
+        currentFilter && "byCondition" === currentFilter.type ? this.onTabSwitch("byCondition") : this.onTabSwitch("byValue"), this.updateClearFilterButtonState(field), setTimeout(() => {
           this.isVisible = !0;
         }, 0);
       }
@@ -89947,7 +90023,7 @@
         importStyle();
     }
 
-    const version = "1.22.4-alpha.1";
+    const version = "1.22.4-alpha.2";
     importStyles();
 
     exports.TYPES = index;