@univerjs/sheets-filter-ui 0.8.2 → 0.8.3-nightly.202507010644

package/lib/es/index.js

@@ -1,18 +1,17 @@
 var qt = Object.defineProperty;
 var Kt = (t, e, r) => e in t ? qt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var f = (t, e, r) => Kt(t, typeof e != "symbol" ? e + "" : e, r);
-import { BooleanNumber as rt, createIdentifier as vt, Inject as E, LocaleService as K, IUniverInstanceService as Ge, ILogService as Xt, extractPureTextFromCell as Zt, numfmt as it, Disposable as me, Injector as X, Quantity as gt, Tools as Te, ICommandService as Q, CommandType as Le, IContextService as we, UniverInstanceType as Z, ThemeService as St, RxDisposable as Et, fromCallback as zt, InterceptorEffectEnum as Jt, DependentOn as Tt, IConfigService as Nt, Optional as er, Plugin as je, merge as Ft, registerDependencies as tr, touchDependencies as st } from "@univerjs/core";
-import { IRPCChannelService as Ct, toModule as rr, fromModule as ir } from "@univerjs/rpc";
-import { CustomFilterOperator as u, SetSheetsFilterCriteriaCommand as re, SheetsFilterService as V, SmartToggleSheetsFilterCommand as pe, ReCalcSheetsFilterCommand as Ye, ClearSheetsFilterCriteriaCommand as qe, FILTER_MUTATIONS as sr, SetSheetsFilterRangeMutation as nr, SetSheetsFilterCriteriaMutation as or, RemoveSheetsFilterMutation as ar, ReCalcSheetsFilterMutation as lr, RemoveSheetFilterCommand as cr, SetSheetFilterRangeCommand as ur, UniverSheetsFilterPlugin as yt } from "@univerjs/sheets-filter";
-import { RefRangeService as hr, SheetPermissionCheckController as dr, SheetsSelectionsService as mr, getSheetCommandTarget as pr, WorksheetFilterPermission as ae, WorksheetViewPermission as le, RangeProtectionPermissionViewPoint as ce, expandToContinuousRange as fr, SheetInterceptorService as _r, SetRangeValuesMutation as vr, INTERCEPTOR_POINT as gr } from "@univerjs/sheets";
-import { ILayoutService as Sr, useDependency as te, useObservable as B, useComponentsOfPart as Er, ComponentContainer as Tr, getMenuHiddenObservable as Ke, MenuItemType as Xe, RibbonDataGroup as Nr, KeyCode as Fr, MetaKeys as nt, ComponentManager as Cr, IShortcutService as yr, IMenuManagerService as Or, IMessageService as Rr } from "@univerjs/ui";
-import { SetCellEditVisibleOperation as Ir, SheetsUIPart as Ar, getObservableWithExclusiveRange$ as Pr, getCurrentRangeDisable$ as br, SheetSkeletonManagerService as Lr, ISheetSelectionRenderService as wr, SelectionControl as Mr, attachSelectionWithCoord as $r, getCoordByCell as Ur, SheetsRenderService as Ot, whenSheetEditorFocused as Hr, SheetCanvasPopManagerService as Dr } from "@univerjs/sheets-ui";
-import { BehaviorSubject as q, ReplaySubject as kr, Subject as xr, merge as Br, combineLatest as Wr, throttleTime as Rt, startWith as It, map as ie, shareReplay as Qr, of as fe, switchMap as Ze, filter as Vr, takeUntil as Gr, distinctUntilChanged as jr } from "rxjs";
-import { Select as ot, clsx as At, borderClassName as Pt, RadioGroup as Yr, Radio as at, Input as bt, Checkbox as qr, Tree as Kr, Segmented as Xr, Button as Ue, MessageType as Zr } from "@univerjs/design";
-import { Rect as lt, Shape as zr, IRenderManagerService as Lt } from "@univerjs/engine-render";
+import { BooleanNumber as rt, createIdentifier as vt, Inject as E, LocaleService as K, IUniverInstanceService as Ge, ILogService as Xt, extractPureTextFromCell as Zt, numfmt as it, Disposable as me, Injector as X, Quantity as gt, Tools as Te, ICommandService as Q, CommandType as Le, IContextService as we, ThemeService as St, RxDisposable as Et, fromCallback as zt, InterceptorEffectEnum as Jt, UniverInstanceType as Z, DependentOn as Tt, IConfigService as Nt, Plugin as je, merge as Ft, Optional as er, registerDependencies as tr, touchDependencies as st } from "@univerjs/core";
+import { CustomFilterOperator as u, SetSheetsFilterCriteriaCommand as re, SheetsFilterService as V, SmartToggleSheetsFilterCommand as pe, FILTER_MUTATIONS as rr, SetSheetsFilterRangeMutation as ir, SetSheetsFilterCriteriaMutation as sr, RemoveSheetsFilterMutation as nr, ReCalcSheetsFilterMutation as or, UniverSheetsFilterPlugin as Ct, ReCalcSheetsFilterCommand as Ye, ClearSheetsFilterCriteriaCommand as qe, RemoveSheetFilterCommand as ar, SetSheetFilterRangeCommand as lr } from "@univerjs/sheets-filter";
+import { ILayoutService as cr, useDependency as te, useObservable as B, useComponentsOfPart as ur, ComponentContainer as hr, getMenuHiddenObservable as Ke, MenuItemType as Xe, RibbonDataGroup as dr, KeyCode as mr, MetaKeys as nt, ComponentManager as pr, IShortcutService as fr, IMenuManagerService as _r, IMessageService as vr } from "@univerjs/ui";
+import { SetCellEditVisibleOperation as gr, SheetSkeletonManagerService as Sr, ISheetSelectionRenderService as Er, SelectionControl as Tr, attachSelectionWithCoord as Nr, getCoordByCell as Fr, SheetsRenderService as yt, SheetsUIPart as Cr, getObservableWithExclusiveRange$ as yr, getCurrentRangeDisable$ as Or, whenSheetEditorFocused as Rr, SheetCanvasPopManagerService as Ir } from "@univerjs/sheets-ui";
+import { RefRangeService as Ar, SheetPermissionCheckController as Pr, SheetsSelectionsService as br, getSheetCommandTarget as Lr, WorksheetFilterPermission as ae, WorksheetViewPermission as le, RangeProtectionPermissionViewPoint as ce, expandToContinuousRange as wr, SheetInterceptorService as Mr, SetRangeValuesMutation as $r, INTERCEPTOR_POINT as Ur } from "@univerjs/sheets";
+import { BehaviorSubject as q, ReplaySubject as Hr, Subject as Dr, merge as kr, combineLatest as xr, throttleTime as Ot, startWith as Rt, map as ie, shareReplay as Br, of as fe, switchMap as Ze, filter as Wr, takeUntil as Qr, distinctUntilChanged as Vr } from "rxjs";
+import { Rect as ot, Shape as Gr, IRenderManagerService as It } from "@univerjs/engine-render";
+import { IRPCChannelService as At, toModule as jr, fromModule as Yr } from "@univerjs/rpc";
+import { Select as at, clsx as Pt, borderClassName as bt, RadioGroup as qr, Radio as lt, Input as Lt, Checkbox as Kr, Tree as Xr, Segmented as Zr, Button as Ue, MessageType as zr } from "@univerjs/design";
 import { jsx as S, jsxs as b, Fragment as ct } from "react/jsx-runtime";
 import { forwardRef as wt, useRef as Jr, createElement as Mt, useCallback as D, useMemo as ze } from "react";
-const $t = "sheets-filter-ui.config", Ne = {};
 var F = /* @__PURE__ */ ((t) => (t[t.FIRST = 0] = "FIRST", t[t.SECOND = 1] = "SECOND", t))(F || {}), _ = /* @__PURE__ */ ((t) => (t.NONE = "none", t.STARTS_WITH = "startsWith", t.DOES_NOT_START_WITH = "doesNotStartWith", t.ENDS_WITH = "endsWith", t.DOES_NOT_END_WITH = "doesNotEndWith", t.CONTAINS = "contains", t.DOES_NOT_CONTAIN = "doesNotContain", t.EQUALS = "equals", t.NOT_EQUALS = "notEquals", t.EMPTY = "empty", t.NOT_EMPTY = "notEmpty", t.BETWEEN = "between", t.NOT_BETWEEN = "notBetween", t.CUSTOM = "custom", t))(_ || {}), d;
 ((t) => {
   t.NONE = {
@@ -511,7 +510,7 @@ var ei = Object.getOwnPropertyDescriptor, ti = (t, e, r, s) => {
     (i = t[l]) && (n = i(n) || n);
   return n;
 }, He = (t, e) => (r, s) => e(r, s, t);
-const Je = "sheets-filter.generate-filter-values.service", Fe = vt(Je), ri = ["yyyy-mm-dd", "yyyy-mm-dd;@", "yyyy/mm/dd;@", "yyyy/mm/dd hh:mm", "yyyy-m-d am/pm h:mm", "yyyy-MM-dd", "yyyy/MM/dd", "yyyy/mm/dd", 'yyyy"年"MM"月"dd"日"', "MM-dd", 'M"月"d"日"', "MM-dd A/P hh:mm"];
+const Je = "sheets-filter.generate-filter-values.service", Ne = vt(Je), ri = ["yyyy-mm-dd", "yyyy-mm-dd;@", "yyyy/mm/dd;@", "yyyy/mm/dd hh:mm", "yyyy-m-d am/pm h:mm", "yyyy-MM-dd", "yyyy/MM/dd", "yyyy/mm/dd", 'yyyy"年"MM"月"dd"日"', "MM-dd", 'M"月"d"日"', "MM-dd A/P hh:mm"];
 let Be = class extends me {
   constructor(t, e, r) {
     super(), this._localeService = t, this._univerInstanceService = e, this._logService = r;
@@ -519,7 +518,7 @@ let Be = class extends me {
   async getFilterValues(t) {
     var h;
     const { unitId: e, subUnitId: r, filteredOutRowsByOtherColumns: s, filters: n, blankChecked: l, iterateRange: i, alreadyChecked: o } = t, a = this._univerInstanceService.getUnit(e), c = (h = this._univerInstanceService.getUnit(e)) == null ? void 0 : h.getSheetBySheetId(r);
-    return !a || !c ? [] : (this._logService.debug("[SheetsGenerateFilterValuesService]", "getFilterValues for", { unitId: e, subUnitId: r }), Ut(n, this._localeService, i, c, new Set(s), new Set(o.map(String)), l, a.getStyles()));
+    return !a || !c ? [] : (this._logService.debug("[SheetsGenerateFilterValuesService]", "getFilterValues for", { unitId: e, subUnitId: r }), $t(n, this._localeService, i, c, new Set(s), new Set(o.map(String)), l, a.getStyles()));
   }
 };
 Be = ti([
@@ -527,7 +526,7 @@ Be = ti([
   He(1, Ge),
   He(2, Xt)
 ], Be);
-function Ut(t, e, r, s, n, l, i, o) {
+function $t(t, e, r, s, n, l, i, o) {
   var v, C, N, R, O, w, M, _e, ve;
   const a = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map(), h = "yyyy-mm-dd", m = new Set(ri), g = "empty";
   let p = 0;
@@ -638,13 +637,13 @@ function We(t, e) {
   }
   return null;
 }
-function Ht(t) {
-  return t.leaf ? t.checked : t.children ? t.children.every((e) => Ht(e)) : !0;
+function Ut(t) {
+  return t.leaf ? t.checked : t.children ? t.children.every((e) => Ut(e)) : !0;
 }
 function ue(t, e) {
   t.leaf && (e !== void 0 ? t.checked = e : t.checked = !t.checked), t.children && t.children.forEach((r) => ue(r, e));
 }
-function Dt(t, e) {
+function Ht(t, e) {
   const r = [];
   return t.forEach((s) => {
     const n = s.originValues ? e.some(
@@ -657,7 +656,7 @@ function Dt(t, e) {
     if (n || l)
       r.push({ ...s });
     else if (s.children) {
-      const o = Dt(s.children, e);
+      const o = Ht(s.children, e);
       if (o.length > 0) {
         const a = o.reduce((c, h) => c + h.count, 0);
         r.push({ ...s, count: a, children: o });
@@ -669,7 +668,7 @@ var ni = Object.getOwnPropertyDescriptor, et = (t, e, r, s) => {
   for (var n = s > 1 ? void 0 : s ? ni(e, r) : e, l = t.length - 1, i; l >= 0; l--)
     (i = t[l]) && (n = i(n) || n);
   return n;
-}, Ce = (t, e) => (r, s) => e(r, s, t), ye = /* @__PURE__ */ ((t) => (t[t.VALUES = 0] = "VALUES", t[t.CONDITIONS = 1] = "CONDITIONS", t))(ye || {});
+}, Fe = (t, e) => (r, s) => e(r, s, t), Ce = /* @__PURE__ */ ((t) => (t[t.VALUES = 0] = "VALUES", t[t.CONDITIONS = 1] = "CONDITIONS", t))(Ce || {});
 vt("sheets-filter-ui.sheets-filter-panel.service");
 let W = class extends me {
   constructor(e, r) {
@@ -679,7 +678,7 @@ let W = class extends me {
       /* VALUES */
     ));
     f(this, "filterBy$", this._filterBy$.asObservable());
-    f(this, "_filterByModel$", new kr(1));
+    f(this, "_filterByModel$", new Hr(1));
     f(this, "filterByModel$", this._filterByModel$.asObservable());
     f(this, "_filterByModel", null);
     f(this, "_hasCriteria$", new q(!1));
@@ -757,7 +756,7 @@ let W = class extends me {
     this._disposePreviousModel();
     const s = e.getRange();
     if (s.startRow === s.endRow) return !1;
-    const n = await Re.fromFilterColumn(
+    const n = await Oe.fromFilterColumn(
       this._injector,
       e,
       r
@@ -771,7 +770,7 @@ let W = class extends me {
     this._disposePreviousModel();
     const s = e.getRange();
     if (s.startRow === s.endRow) return !1;
-    const n = Oe.fromFilterColumn(
+    const n = ye.fromFilterColumn(
       this._injector,
       e,
       r,
@@ -788,10 +787,10 @@ let W = class extends me {
   }
 };
 W = et([
-  Ce(0, E(X)),
-  Ce(1, E(hr))
+  Fe(0, E(X)),
+  Fe(1, E(Ar))
 ], W);
-let Oe = class extends me {
+let ye = class extends me {
   constructor(e, r, s, n, l) {
     super();
     f(this, "canApply$", fe(!0));
@@ -814,7 +813,7 @@ let Oe = class extends me {
    */
   static fromFilterColumn(e, r, s, n) {
     const [l, i] = d.testMappingFilterColumn(n == null ? void 0 : n.getColumnData());
-    return e.createInstance(Oe, r, s, l, i);
+    return e.createInstance(ye, r, s, l, i);
   }
   get conditionItem() {
     return this._conditionItem$.getValue();
@@ -876,10 +875,10 @@ let Oe = class extends me {
     this._filterConditionFormParams$.next(r);
   }
 };
-Oe = et([
-  Ce(4, Q)
-], Oe);
-let Re = class extends me {
+ye = et([
+  Fe(4, Q)
+], ye);
+let Oe = class extends me {
   constructor(e, r, s, n, l) {
     super();
     f(this, "_rawFilterItems$");
@@ -891,22 +890,22 @@ let Re = class extends me {
     f(this, "_manuallyUpdateFilterItems$");
     f(this, "_searchString$");
     f(this, "searchString$");
-    this._filterModel = e, this.col = r, this._commandService = l, this._treeMapCache = n, this._searchString$ = new q(""), this.searchString$ = this._searchString$.asObservable(), this._rawFilterItems$ = new q(s), this.rawFilterItems$ = this._rawFilterItems$.asObservable(), this._manuallyUpdateFilterItems$ = new xr(), this.filterItems$ = Br(
-      Wr([
+    this._filterModel = e, this.col = r, this._commandService = l, this._treeMapCache = n, this._searchString$ = new q(""), this.searchString$ = this._searchString$.asObservable(), this._rawFilterItems$ = new q(s), this.rawFilterItems$ = this._rawFilterItems$.asObservable(), this._manuallyUpdateFilterItems$ = new Dr(), this.filterItems$ = kr(
+      xr([
         this._searchString$.pipe(
-          Rt(500, void 0, { leading: !0, trailing: !0 }),
-          It(void 0)
+          Ot(500, void 0, { leading: !0, trailing: !0 }),
+          Rt(void 0)
         ),
         this._rawFilterItems$
       ]).pipe(
         ie(([i, o]) => {
           if (!i) return o;
           const c = i.toLowerCase().split(/\s+/).filter((h) => !!h);
-          return Dt(o, c);
+          return Ht(o, c);
         })
       ),
       this._manuallyUpdateFilterItems$
-    ).pipe(Qr(1)), this.canApply$ = this.filterItems$.pipe(ie((i) => xe(i).checked > 0)), this.disposeWithMe(this.filterItems$.subscribe((i) => this._filterItems = i));
+    ).pipe(Br(1)), this.canApply$ = this.filterItems$.pipe(ie((i) => xe(i).checked > 0)), this.disposeWithMe(this.filterItems$.subscribe((i) => this._filterItems = i));
   }
   /**
    * Create a model with targeting filter column. If there is not a filter column, the model would be created with
@@ -920,7 +919,7 @@ let Re = class extends me {
    */
   static async fromFilterColumn(e, r, s) {
     var w;
-    const n = e.get(Ge), l = e.get(K), i = e.get(Fe, gt.OPTIONAL), { unitId: o, subUnitId: a } = r, c = n.getUniverSheetInstance(o);
+    const n = e.get(Ge), l = e.get(K), i = e.get(Ne, gt.OPTIONAL), { unitId: o, subUnitId: a } = r, c = n.getUniverSheetInstance(o);
     if (!c) throw new Error(`[ByValuesModel]: Workbook not found for filter model with unitId: ${o}!`);
     const h = c == null ? void 0 : c.getSheetBySheetId(a);
     if (!h) throw new Error(`[ByValuesModel]: Worksheet not found for filter model with unitId: ${o} and subUnitId: ${a}!`);
@@ -938,10 +937,10 @@ let Re = class extends me {
       });
       R = M.filterTreeItems, O = M.filterTreeMapCache;
     } else {
-      const M = Ut(!!p, l, N, h, C, T, v, c.getStyles());
+      const M = $t(!!p, l, N, h, C, T, v, c.getStyles());
       R = M.filterTreeItems, O = M.filterTreeMapCache;
     }
-    return e.createInstance(Re, r, s, R, O);
+    return e.createInstance(Oe, r, s, R, O);
   }
   get rawFilterItems() {
     return this._rawFilterItems$.getValue();
@@ -972,7 +971,7 @@ let Re = class extends me {
     const r = Te.deepClone(this._filterItems), s = We(r, e.key);
     if (!s)
       return;
-    const n = Ht(s);
+    const n = Ut(s);
     ue(s, !n), this._manuallyUpdateFilterItems(r);
   }
   onFilterOnly(e) {
@@ -1031,15 +1030,15 @@ let Re = class extends me {
   }
   // #endregion
 };
-Re = et([
-  Ce(4, Q)
-], Re);
-const se = "FILTER_PANEL_OPENED", Ie = {
+Oe = et([
+  Fe(4, Q)
+], Oe);
+const se = "FILTER_PANEL_OPENED", Re = {
   id: "sheet.operation.open-filter-panel",
   type: Le.OPERATION,
   handler: (t, e) => {
     const r = t.get(we), s = t.get(V), n = t.get(W);
-    t.get(Q).syncExecuteCommand(Ir.id, { visible: !1 });
+    t.get(Q).syncExecuteCommand(gr.id, { visible: !1 });
     const { unitId: i, subUnitId: o, col: a } = e, c = s.getFilterModel(i, o);
     return c ? (n.setupCol(c, a), r.getContextValue(se) || r.setContextValue(se, !0), !0) : !1;
   }
@@ -1047,17 +1046,17 @@ const se = "FILTER_PANEL_OPENED", Ie = {
   id: "sheet.operation.close-filter-panel",
   type: Le.OPERATION,
   handler: (t) => {
-    const e = t.get(we), r = t.get(W), s = t.get(Sr, gt.OPTIONAL);
+    const e = t.get(we), r = t.get(W), s = t.get(cr, gt.OPTIONAL);
     return e.getContextValue(se) ? (e.setContextValue(se, !1), s == null || s.focus(), r.terminate()) : !1;
   }
-}, kt = {
+}, Dt = {
   id: "sheet.operation.apply-filter",
   type: Le.OPERATION,
   handler: (t, e) => {
     const { filterBy: r } = e;
     return t.get(W).changeFilterBy(r);
   }
-};
+}, kt = "sheets-filter-ui.config", Ie = {};
 var oi = Object.getOwnPropertyDescriptor, ai = (t, e, r, s) => {
   for (var n = s > 1 ? void 0 : s ? oi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
     (i = t[l]) && (n = i(n) || n);
@@ -1072,7 +1071,7 @@ let ne = class extends me {
       this._commandService.beforeCommandExecuted((t) => {
         var e, r, s;
         if (t.id === pe.id) {
-          const n = this._injector.get(Ge), l = pr(n);
+          const n = this._injector.get(Ge), l = Lr(n);
           if (!l) return;
           const { unitId: i, subUnitId: o, worksheet: a } = l, c = (e = this._sheetsFilterService.getFilterModel(i, o)) == null ? void 0 : e.getRange();
           let h;
@@ -1085,7 +1084,7 @@ let ne = class extends me {
             const m = (r = this._sheetsSelectionService.getCurrentLastSelection()) == null ? void 0 : r.range;
             if (m) {
               let g = { ...m };
-              g = m.startColumn === m.endColumn && m.startRow === m.endRow ? fr(g, { left: !0, right: !0, up: !0, down: !0 }, a) : g, h = this._sheetPermissionCheckPermission.permissionCheckWithRanges({
+              g = m.startColumn === m.endColumn && m.startRow === m.endRow ? wr(g, { left: !0, right: !0, up: !0, down: !0 }, a) : g, h = this._sheetPermissionCheckPermission.permissionCheckWithRanges({
                 rangeTypes: [ce],
                 worksheetTypes: [le, ae]
               }, [g], i, o);
@@ -1097,7 +1096,7 @@ let ne = class extends me {
           }
           h || this._sheetPermissionCheckPermission.blockExecuteWithoutPermission(this._localeService.t("permission.dialog.filterErr"));
         }
-        if (t.id === Ie.id) {
+        if (t.id === Re.id) {
           const n = t.params, { unitId: l, subUnitId: i } = n, o = (s = this._sheetsFilterService.getFilterModel(l, i)) == null ? void 0 : s.getRange(), a = Te.deepClone(o);
           a && (a.startColumn = n.col, a.endColumn = n.col, this._sheetPermissionCheckPermission.permissionCheckWithRanges({
             rangeTypes: [ce],
@@ -1112,10 +1111,255 @@ ne = ai([
   ee(0, E(V)),
   ee(1, E(K)),
   ee(2, Q),
-  ee(3, E(dr)),
+  ee(3, E(Pr)),
   ee(4, E(X)),
-  ee(5, E(mr))
+  ee(5, E(br))
 ], ne);
+const x = 16, li = new Path2D("M3.30363 3C2.79117 3 2.51457 3.60097 2.84788 3.99024L6.8 8.60593V12.5662C6.8 12.7184 6.8864 12.8575 7.02289 12.9249L8.76717 13.7863C8.96655 13.8847 9.2 13.7396 9.2 13.5173V8.60593L13.1521 3.99024C13.4854 3.60097 13.2088 3 12.6964 3H3.30363Z");
+class ht {
+  static drawNoCriteria(e, r, s, n) {
+    e.save(), ot.drawWith(e, {
+      radius: 2,
+      width: x,
+      height: x,
+      fill: n
+    }), e.lineCap = "square", e.strokeStyle = s, e.scale(r / x, r / x), e.beginPath(), e.lineWidth = 1, e.lineCap = "round", e.moveTo(3, 4), e.lineTo(13, 4), e.moveTo(4.5, 8), e.lineTo(11.5, 8), e.moveTo(6, 12), e.lineTo(10, 12), e.stroke(), e.restore();
+  }
+  static drawHasCriteria(e, r, s, n) {
+    e.save(), ot.drawWith(e, {
+      radius: 2,
+      width: x,
+      height: x,
+      fill: n
+    }), e.scale(r / x, r / x), e.fillStyle = s, e.fill(li), e.restore();
+  }
+}
+var ci = Object.getOwnPropertyDescriptor, ui = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? ci(e, r) : e, l = t.length - 1, i; l >= 0; l--)
+    (i = t[l]) && (n = i(n) || n);
+  return n;
+}, De = (t, e) => (r, s) => e(r, s, t);
+const H = 16, Se = 1;
+let Qe = class extends Gr {
+  constructor(e, r, s, n, l) {
+    super(e, r);
+    f(this, "_cellWidth", 0);
+    f(this, "_cellHeight", 0);
+    f(this, "_filterParams");
+    f(this, "_hovered", !1);
+    this._contextService = s, this._commandService = n, this._themeService = l, this.setShapeProps(r), this.onPointerDown$.subscribeEvent((i) => this.onPointerDown(i)), this.onPointerEnter$.subscribeEvent(() => this.onPointerEnter()), this.onPointerLeave$.subscribeEvent(() => this.onPointerLeave());
+  }
+  setShapeProps(e) {
+    typeof e.cellHeight < "u" && (this._cellHeight = e.cellHeight), typeof e.cellWidth < "u" && (this._cellWidth = e.cellWidth), typeof e.filterParams < "u" && (this._filterParams = e.filterParams), this.transformByState({
+      width: e.width,
+      height: e.height
+    });
+  }
+  _draw(e) {
+    const r = this._cellHeight, s = this._cellWidth, n = H - s, l = H - r;
+    e.save();
+    const i = new Path2D();
+    i.rect(n, l, s, r), e.clip(i);
+    const { hasCriteria: o } = this._filterParams, a = this._themeService.getColorFromTheme("primary.600"), c = this._hovered ? this._themeService.getColorFromTheme("gray.50") : "rgba(255, 255, 255, 1.0)";
+    o ? ht.drawHasCriteria(e, H, a, c) : ht.drawNoCriteria(e, H, a, c), e.restore();
+  }
+  onPointerDown(e) {
+    if (e.button === 2)
+      return;
+    const { col: r, unitId: s, subUnitId: n } = this._filterParams;
+    this._contextService.getContextValue(se) || !this._commandService.hasCommand(Re.id) || setTimeout(() => {
+      this._commandService.executeCommand(Re.id, {
+        unitId: s,
+        subUnitId: n,
+        col: r
+      });
+    }, 200);
+  }
+  onPointerEnter() {
+    this._hovered = !0, this.makeDirty(!0);
+  }
+  onPointerLeave() {
+    this._hovered = !1, this.makeDirty(!0);
+  }
+};
+Qe = ui([
+  De(2, we),
+  De(3, Q),
+  De(4, E(St))
+], Qe);
+var hi = Object.getOwnPropertyDescriptor, di = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? hi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
+    (i = t[l]) && (n = i(n) || n);
+  return n;
+}, Y = (t, e) => (r, s) => e(r, s, t);
+const mi = 1e3, pi = 5e3;
+let Ve = class extends Et {
+  constructor(e, r, s, n, l, i, o, a) {
+    super();
+    f(this, "_filterRangeShape", null);
+    f(this, "_buttonRenderDisposable", null);
+    f(this, "_filterButtonShapes", []);
+    this._context = e, this._injector = r, this._sheetSkeletonManagerService = s, this._sheetsFilterService = n, this._themeService = l, this._sheetInterceptorService = i, this._commandService = o, this._selectionRenderService = a, this._initRenderer();
+  }
+  dispose() {
+    super.dispose(), this._disposeRendering();
+  }
+  _initRenderer() {
+    this._sheetSkeletonManagerService.currentSkeleton$.pipe(
+      Ze((e) => {
+        var o, a;
+        if (!e) return fe(null);
+        const { unit: r, unitId: s } = this._context, n = ((o = r.getActiveSheet()) == null ? void 0 : o.getSheetId()) || "", l = (a = this._sheetsFilterService.getFilterModel(s, n)) != null ? a : void 0, i = () => ({
+          unitId: s,
+          worksheetId: n,
+          filterModel: l,
+          range: l == null ? void 0 : l.getRange(),
+          skeleton: e.skeleton
+        });
+        return zt(this._commandService.onCommandExecuted.bind(this._commandService)).pipe(
+          Wr(
+            ([c]) => {
+              var h;
+              return c.type === Le.MUTATION && ((h = c.params) == null ? void 0 : h.unitId) === r.getUnitId() && (rr.has(c.id) || c.id === $r.id);
+            }
+          ),
+          Ot(20, void 0, { leading: !1, trailing: !0 }),
+          ie(i),
+          Rt(i())
+          // must trigger once
+        );
+      }),
+      Qr(this.dispose$)
+    ).subscribe((e) => {
+      this._disposeRendering(), !(!e || !e.range) && (this._renderRange(e.range, e.skeleton), this._renderButtons(e));
+    });
+  }
+  _renderRange(e, r) {
+    const { scene: s } = this._context, { rowHeaderWidth: n, columnHeaderHeight: l } = r, i = this._filterRangeShape = new Tr(
+      s,
+      mi,
+      this._themeService,
+      {
+        rowHeaderWidth: n,
+        columnHeaderHeight: l,
+        enableAutoFill: !1,
+        highlightHeader: !1
+      }
+    ), a = Nr({
+      range: e,
+      primary: null,
+      style: { fill: "rgba(0, 0, 0, 0.0)" }
+    }, r);
+    i.updateRangeBySelectionWithCoord(a), i.setEvent(!1), s.makeDirty(!0);
+  }
+  _renderButtons(e) {
+    const { range: r, filterModel: s, unitId: n, skeleton: l, worksheetId: i } = e, { scene: o } = this._context;
+    this._interceptCellContent(n, i, e.range);
+    const { startColumn: a, endColumn: c, startRow: h } = r;
+    for (let m = a; m <= c; m++) {
+      const g = `sheets-filter-button-${m}`, p = Fr(h, m, o, l), { startX: T, startY: v, endX: C, endY: N } = p, R = C - T, O = N - v;
+      if (O <= Se || R <= Se)
+        continue;
+      const w = !!s.getFilterColumn(m), M = C - H - Se, _e = N - H - Se, ve = {
+        left: M,
+        top: _e,
+        height: H,
+        width: H,
+        zIndex: pi,
+        cellHeight: O,
+        cellWidth: R,
+        filterParams: { unitId: n, subUnitId: i, col: m, hasCriteria: w }
+      }, I = this._injector.createInstance(Qe, g, ve);
+      this._filterButtonShapes.push(I);
+    }
+    o.addObjects(this._filterButtonShapes), o.makeDirty();
+  }
+  _interceptCellContent(e, r, s) {
+    const { startRow: n, startColumn: l, endColumn: i } = s;
+    this._buttonRenderDisposable = this._sheetInterceptorService.intercept(Ur.CELL_CONTENT, {
+      effect: Jt.Style,
+      handler: (o, a, c) => {
+        const { row: h, col: m, unitId: g, subUnitId: p } = a;
+        return g !== e || p !== r || h !== n || m < l || m > i || ((!o || o === a.rawData) && (o = { ...a.rawData }), o.fontRenderExtension = {
+          ...o == null ? void 0 : o.fontRenderExtension,
+          rightOffset: H
+        }), c(o);
+      },
+      priority: 10
+    });
+  }
+  _disposeRendering() {
+    var e, r;
+    (e = this._filterRangeShape) == null || e.dispose(), this._filterButtonShapes.forEach((s) => s.dispose()), (r = this._buttonRenderDisposable) == null || r.dispose(), this._filterRangeShape = null, this._buttonRenderDisposable = null, this._filterButtonShapes = [];
+  }
+};
+Ve = di([
+  Y(1, E(X)),
+  Y(2, E(Sr)),
+  Y(3, E(V)),
+  Y(4, E(St)),
+  Y(5, E(Mr)),
+  Y(6, Q),
+  Y(7, Er)
+], Ve);
+var fi = Object.getOwnPropertyDescriptor, _i = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? fi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
+    (i = t[l]) && (n = i(n) || n);
+  return n;
+}, dt = (t, e) => (r, s) => e(r, s, t);
+let de = class extends Et {
+  constructor(t, e) {
+    super(), this._renderManagerService = t, this._sheetsRenderService = e, [
+      ir,
+      sr,
+      nr,
+      or
+    ].forEach((r) => this.disposeWithMe(this._sheetsRenderService.registerSkeletonChangingMutations(r.id))), this.disposeWithMe(this._renderManagerService.registerRenderModule(
+      Z.UNIVER_SHEET,
+      [Ve]
+    ));
+  }
+};
+de = _i([
+  dt(0, It),
+  dt(1, E(yt))
+], de);
+var vi = Object.defineProperty, gi = Object.getOwnPropertyDescriptor, Si = (t, e, r) => e in t ? vi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ei = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? gi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
+    (i = t[l]) && (n = i(n) || n);
+  return n;
+}, mt = (t, e) => (r, s) => e(r, s, t), xt = (t, e, r) => Si(t, typeof e != "symbol" ? e + "" : e, r);
+const Ti = "SHEET_FILTER_UI_PLUGIN";
+let Ae = class extends je {
+  constructor(t = Ie, e, r) {
+    super(), this._config = t, this._injector = e, this._configService = r;
+    const { menu: s, ...n } = Ft(
+      {},
+      Ie,
+      this._config
+    );
+    s && this._configService.setConfig("menu", s, { merge: !0 }), this._configService.setConfig(kt, n);
+  }
+  onStarting() {
+    [
+      [ne],
+      [de]
+    ].forEach((t) => this._injector.add(t));
+  }
+  onReady() {
+    this._injector.get(ne);
+  }
+  onRendered() {
+    this._injector.get(de);
+  }
+};
+xt(Ae, "type", Z.UNIVER_SHEET);
+xt(Ae, "pluginName", Ti);
+Ae = Ei([
+  Tt(Ct),
+  mt(1, E(X)),
+  mt(2, Nt)
+], Ae);
 var P = function() {
   return P = Object.assign || function(t) {
     for (var e, r = 1, s = arguments.length; r < s; r++) {
@@ -1124,23 +1368,23 @@ var P = function() {
     }
     return t;
   }, P.apply(this, arguments);
-}, li = function(t, e) {
+}, Ni = function(t, e) {
   var r = {};
   for (var s in t) Object.prototype.hasOwnProperty.call(t, s) && e.indexOf(s) < 0 && (r[s] = t[s]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
     for (var n = 0, s = Object.getOwnPropertySymbols(t); n < s.length; n++)
       e.indexOf(s[n]) < 0 && Object.prototype.propertyIsEnumerable.call(t, s[n]) && (r[s[n]] = t[s[n]]);
   return r;
-}, xt = wt(function(t, e) {
-  var r = t.icon, s = t.id, n = t.className, l = t.extend, i = li(t, ["icon", "id", "className", "extend"]), o = "univerjs-icon univerjs-icon-".concat(s, " ").concat(n || "").trim(), a = Jr("_".concat(hi()));
-  return Bt(r, "".concat(s), { defIds: r.defIds, idSuffix: a.current }, P({ ref: e, className: o }, i), l);
+}, Bt = wt(function(t, e) {
+  var r = t.icon, s = t.id, n = t.className, l = t.extend, i = Ni(t, ["icon", "id", "className", "extend"]), o = "univerjs-icon univerjs-icon-".concat(s, " ").concat(n || "").trim(), a = Jr("_".concat(yi()));
+  return Wt(r, "".concat(s), { defIds: r.defIds, idSuffix: a.current }, P({ ref: e, className: o }, i), l);
 });
-function Bt(t, e, r, s, n) {
-  return Mt(t.tag, P(P({ key: e }, ci(t, r, n)), s), (ui(t, r).children || []).map(function(l, i) {
-    return Bt(l, "".concat(e, "-").concat(t.tag, "-").concat(i), r, void 0, n);
+function Wt(t, e, r, s, n) {
+  return Mt(t.tag, P(P({ key: e }, Fi(t, r, n)), s), (Ci(t, r).children || []).map(function(l, i) {
+    return Wt(l, "".concat(e, "-").concat(t.tag, "-").concat(i), r, void 0, n);
   }));
 }
-function ci(t, e, r) {
+function Fi(t, e, r) {
   var s = P({}, t.attrs);
   r != null && r.colorChannel1 && s.fill === "colorChannel1" && (s.fill = r.colorChannel1), t.tag === "mask" && s.id && (s.id = s.id + e.idSuffix), Object.entries(s).forEach(function(l) {
     var i = l[0], o = l[1];
@@ -1152,42 +1396,42 @@ function ci(t, e, r) {
     typeof o == "string" && (s[i] = o.replace(/url\(#(.*)\)/, "url(#$1".concat(e.idSuffix, ")")));
   })), s;
 }
-function ui(t, e) {
+function Ci(t, e) {
   var r, s = e.defIds;
   return !s || s.length === 0 ? t : t.tag === "defs" && (!((r = t.children) === null || r === void 0) && r.length) ? P(P({}, t), { children: t.children.map(function(n) {
     return typeof n.attrs.id == "string" && s && s.includes(n.attrs.id) ? P(P({}, n), { attrs: P(P({}, n.attrs), { id: n.attrs.id + e.idSuffix }) }) : n;
   }) }) : t;
 }
-function hi() {
+function yi() {
   return Math.random().toString(36).substring(2, 8);
 }
-xt.displayName = "UniverIcon";
-var di = { tag: "svg", attrs: { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3.32182 2.60967C2.98161 2.60967 2.79671 3.0074 3.01601 3.2675L6.85819 7.8246C6.94943 7.93282 6.99947 8.06981 6.99947 8.21136V12.7338C6.99947 12.898 7.0998 13.0455 7.2525 13.1058L8.73833 13.6928C9.00085 13.7965 9.28531 13.6031 9.28531 13.3208V8.21136C9.28531 8.06981 9.33535 7.93282 9.42659 7.8246L13.2688 3.2675C13.4881 3.0074 13.3032 2.60967 12.963 2.60967H3.32182ZM2.09858 4.04101C1.22139 3.0006 1.96097 1.40967 3.32182 1.40967H12.963C14.3238 1.40967 15.0634 3.0006 14.1862 4.04101L10.4853 8.43054V13.3208C10.4853 14.4498 9.34747 15.2237 8.29742 14.8089L6.81158 14.2219C6.20078 13.9806 5.79947 13.3905 5.79947 12.7338V8.43054L2.09858 4.04101Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Wt = wt(function(t, e) {
-  return Mt(xt, Object.assign({}, t, {
+Bt.displayName = "UniverIcon";
+var Oi = { tag: "svg", attrs: { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 17 16", width: "1em", height: "1em" }, children: [{ tag: "path", attrs: { fill: "currentColor", d: "M3.32182 2.60967C2.98161 2.60967 2.79671 3.0074 3.01601 3.2675L6.85819 7.8246C6.94943 7.93282 6.99947 8.06981 6.99947 8.21136V12.7338C6.99947 12.898 7.0998 13.0455 7.2525 13.1058L8.73833 13.6928C9.00085 13.7965 9.28531 13.6031 9.28531 13.3208V8.21136C9.28531 8.06981 9.33535 7.93282 9.42659 7.8246L13.2688 3.2675C13.4881 3.0074 13.3032 2.60967 12.963 2.60967H3.32182ZM2.09858 4.04101C1.22139 3.0006 1.96097 1.40967 3.32182 1.40967H12.963C14.3238 1.40967 15.0634 3.0006 14.1862 4.04101L10.4853 8.43054V13.3208C10.4853 14.4498 9.34747 15.2237 8.29742 14.8089L6.81158 14.2219C6.20078 13.9806 5.79947 13.3905 5.79947 12.7338V8.43054L2.09858 4.04101Z", fillRule: "evenodd", clipRule: "evenodd" } }] }, Qt = wt(function(t, e) {
+  return Mt(Bt, Object.assign({}, t, {
     id: "filter-icon",
     ref: e,
-    icon: di
+    icon: Oi
   }));
 });
-Wt.displayName = "FilterIcon";
-function mi(t) {
+Qt.displayName = "FilterIcon";
+function Ri(t) {
   var p, T;
   const { model: e } = t, r = te(K), s = B(e.conditionItem$, void 0), n = B(e.filterConditionFormParams$, void 0), l = n != null && n.and ? "AND" : "OR", i = D((v) => {
     e.onConditionFormChange({ and: v === "AND" });
-  }, [e]), o = pi(r), a = D((v) => {
+  }, [e]), o = Ii(r), a = D((v) => {
     e.onPrimaryConditionChange(v);
-  }, [e]), c = fi(r), h = D((v) => {
+  }, [e]), c = Ai(r), h = D((v) => {
     e.onConditionFormChange(v);
   }, [e]), m = r.t("sheets-filter.panel.input-values-placeholder");
   function g(v, C, N) {
     const R = d.getItemByOperator(v).numOfParameters === 1;
     return /* @__PURE__ */ b(ct, { children: [
-      N === "operator2" && /* @__PURE__ */ b(Yr, { value: l, onChange: i, children: [
-        /* @__PURE__ */ S(at, { value: "AND", children: r.t("sheets-filter.panel.and") }),
-        /* @__PURE__ */ S(at, { value: "OR", children: r.t("sheets-filter.panel.or") })
+      N === "operator2" && /* @__PURE__ */ b(qr, { value: l, onChange: i, children: [
+        /* @__PURE__ */ S(lt, { value: "AND", children: r.t("sheets-filter.panel.and") }),
+        /* @__PURE__ */ S(lt, { value: "OR", children: r.t("sheets-filter.panel.or") })
       ] }),
       /* @__PURE__ */ S(
-        ot,
+        at,
         {
           value: v,
           options: c,
@@ -1195,7 +1439,7 @@ function mi(t) {
         }
       ),
       R && /* @__PURE__ */ S("div", { children: /* @__PURE__ */ S(
-        bt,
+        Lt,
         {
           className: "univer-mt-2",
           value: C,
@@ -1209,14 +1453,14 @@ function mi(t) {
     "div",
     {
       "data-u-comp": "sheets-filter-panel-conditions-container",
-      className: "univer-flex univer-h-full univer-flex-col",
+      className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
       children: s && n && /* @__PURE__ */ b(ct, { children: [
-        /* @__PURE__ */ S(ot, { value: s.operator, options: o, onChange: a }),
+        /* @__PURE__ */ S(at, { value: s.operator, options: o, onChange: a }),
         d.getItemByOperator(s.operator).numOfParameters !== 0 ? /* @__PURE__ */ b(
           "div",
           {
             "data-u-comp": "sheets-filter-panel-conditions-container-inner",
-            className: At("univer-mt-2 univer-flex-grow univer-overflow-hidden univer-rounded-md univer-p-2", Pt),
+            className: Pt("univer-mt-2 univer-flex-grow univer-overflow-hidden univer-rounded-md univer-p-2", bt),
             children: [
               s.numOfParameters >= 1 && g(n.operator1, (p = n.val1) != null ? p : "", "operator1"),
               s.numOfParameters >= 2 && g(n.operator2, (T = n.val2) != null ? T : "", "operator2"),
@@ -1239,7 +1483,7 @@ function mi(t) {
     }
   );
 }
-function pi(t) {
+function Ii(t) {
   const e = t.getCurrentLocale();
   return ze(() => [
     {
@@ -1281,11 +1525,11 @@ function pi(t) {
     }
   ], [e, t]);
 }
-function fi(t) {
+function Ai(t) {
   const e = t.getCurrentLocale();
   return ze(() => d.ALL_CONDITIONS.filter((r) => r.numOfParameters !== 2).map((r) => ({ label: t.t(r.label), value: r.operator })), [e, t]);
 }
-function _i(t) {
+function Pi(t) {
   const { model: e } = t, r = te(K), s = B(e.searchString$, "", !0), n = B(e.filterItems$, void 0, !0), l = r.t("sheets-filter.panel.filter-only"), i = xe(n), o = i.checked > 0 && i.unchecked === 0, a = i.checked > 0 && i.unchecked > 0, c = e.treeMapCache, h = D(() => {
     e.onCheckAllToggled(!o);
   }, [e, o]), m = D((p) => {
@@ -1301,10 +1545,10 @@ function _i(t) {
     "div",
     {
       "data-u-comp": "sheets-filter-panel-values-container",
-      className: "univer-flex univer-h-full univer-flex-col",
+      className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
       children: [
         /* @__PURE__ */ S(
-          bt,
+          Lt,
           {
             autoFocus: !0,
             value: s,
@@ -1316,7 +1560,7 @@ function _i(t) {
           "div",
           {
             "data-u-comp": "sheets-filter-panel",
-            className: At("univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-px-2 univer-py-2.5", Pt),
+            className: Pt("univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-px-2 univer-py-2.5", bt),
             children: [
               /* @__PURE__ */ S(
                 "div",
@@ -1330,7 +1574,7 @@ function _i(t) {
                       className: "univer-box-border univer-flex univer-h-7 univer-items-center univer-rounded-md univer-pb-0 univer-pl-5 univer-pr-0.5 univer-pt-0 univer-text-sm",
                       children: [
                         /* @__PURE__ */ S(
-                          qr,
+                          Kr,
                           {
                             indeterminate: a,
                             disabled: n.length === 0,
@@ -1360,12 +1604,11 @@ function _i(t) {
                 }
               ),
               /* @__PURE__ */ S("div", { "data-u-comp": "sheets-filter-panel-values-virtual", className: "univer-flex-grow", children: /* @__PURE__ */ S(
-                Kr,
+                Xr,
                 {
                   data: n,
                   defaultExpandAll: !1,
                   valueGroup: g(n),
-                  height: 180,
                   onChange: (p) => {
                     e.onFilterCheckToggled(p);
                   },
@@ -1418,32 +1661,32 @@ function _i(t) {
     }
   );
 }
-function vi() {
+function bi() {
   var C;
-  const t = te(W), e = te(K), r = te(Q), s = B(t.filterBy$, void 0, !0), n = B(t.filterByModel$, void 0, !1), l = B(() => (n == null ? void 0 : n.canApply$) || fe(!1), void 0, !1, [n]), i = gi(e), o = !B(t.hasCriteria$), a = D((N) => {
-    r.executeCommand(kt.id, { filterBy: N });
+  const t = te(W), e = te(K), r = te(Q), s = B(t.filterBy$, void 0, !0), n = B(t.filterByModel$, void 0, !1), l = B(() => (n == null ? void 0 : n.canApply$) || fe(!1), void 0, !1, [n]), i = Li(e), o = !B(t.hasCriteria$), a = D((N) => {
+    r.executeCommand(Dt.id, { filterBy: N });
   }, [r]), c = D(async () => {
     await (n == null ? void 0 : n.clear()), r.executeCommand(he.id);
   }, [n, r]), h = D(() => {
     r.executeCommand(he.id);
   }, [r]), m = D(async () => {
     await (n == null ? void 0 : n.apply()), r.executeCommand(he.id);
-  }, [n, r]), p = (C = te(V).activeFilterModel) == null ? void 0 : C.getRange(), T = t.col, v = Er(Ar.FILTER_PANEL_EMBED_POINT);
+  }, [n, r]), p = (C = te(V).activeFilterModel) == null ? void 0 : C.getRange(), T = t.col, v = ur(Cr.FILTER_PANEL_EMBED_POINT);
   return /* @__PURE__ */ b(
     "div",
     {
       "data-u-comp": "sheets-filter-panel",
-      className: "univer-box-border univer-flex univer-h-[442px] univer-w-[312px] univer-flex-col univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
+      className: "univer-box-border univer-flex univer-max-h-[500px] univer-w-[312px] univer-flex-col univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
       children: [
         /* @__PURE__ */ S(
-          Tr,
+          hr,
           {
             components: v,
             sharedProps: { range: p, colIndex: T, onClose: h }
           }
         ),
         /* @__PURE__ */ S("div", { className: "univer-mb-1 univer-flex-shrink-0 univer-flex-grow-0", children: /* @__PURE__ */ S(
-          Xr,
+          Zr,
           {
             value: s,
             items: i,
@@ -1455,7 +1698,7 @@ function vi() {
           {
             "data-u-comp": "sheets-filter-panel-content",
             className: "univer-flex-shrink univer-flex-grow univer-pt-2",
-            children: s === ye.VALUES ? /* @__PURE__ */ S(_i, { model: n }) : /* @__PURE__ */ S(mi, { model: n })
+            children: s === Ce.VALUES ? /* @__PURE__ */ S(Pi, { model: n }) : /* @__PURE__ */ S(Ri, { model: n })
           }
         ) : /* @__PURE__ */ S("div", { className: "univer-flex-1" }),
         /* @__PURE__ */ b(
@@ -1476,14 +1719,14 @@ function vi() {
     }
   );
 }
-function gi(t) {
+function Li(t) {
   const e = t.getCurrentLocale();
   return ze(() => [
-    { label: t.t("sheets-filter.panel.by-values"), value: ye.VALUES },
-    { label: t.t("sheets-filter.panel.by-conditions"), value: ye.CONDITIONS }
+    { label: t.t("sheets-filter.panel.by-values"), value: Ce.VALUES },
+    { label: t.t("sheets-filter.panel.by-conditions"), value: Ce.CONDITIONS }
   ], [e, t]);
 }
-function Si(t) {
+function wi(t) {
   const e = t.get(V);
   return {
     id: pe.id,
@@ -1492,9 +1735,9 @@ function Si(t) {
     tooltip: "sheets-filter.toolbar.smart-toggle-filter-tooltip",
     hidden$: Ke(t, Z.UNIVER_SHEET),
     activated$: e.activeFilterModel$.pipe(ie((r) => !!r)),
-    disabled$: Pr(
+    disabled$: yr(
       t,
-      br(
+      Or(
         t,
         {
           worksheetTypes: [ae, le],
@@ -1504,7 +1747,7 @@ function Si(t) {
     )
   };
 }
-function Ei(t) {
+function Mi(t) {
   const e = t.get(V);
   return {
     id: qe.id,
@@ -1517,7 +1760,7 @@ function Ei(t) {
     }))
   };
 }
-function Ti(t) {
+function $i(t) {
   const e = t.get(V);
   return {
     id: Ye.id,
@@ -1530,244 +1773,35 @@ function Ti(t) {
     }))
   };
 }
-const Ni = {
-  [Nr.ORGANIZATION]: {
+const Ui = {
+  [dr.ORGANIZATION]: {
     [pe.id]: {
       order: 2,
-      menuItemFactory: Si,
+      menuItemFactory: wi,
       [qe.id]: {
         order: 0,
-        menuItemFactory: Ei
+        menuItemFactory: Mi
       },
       [Ye.id]: {
         order: 1,
-        menuItemFactory: Ti
-      }
-    }
-  }
-}, x = 16, Fi = new Path2D("M3.30363 3C2.79117 3 2.51457 3.60097 2.84788 3.99024L6.8 8.60593V12.5662C6.8 12.7184 6.8864 12.8575 7.02289 12.9249L8.76717 13.7863C8.96655 13.8847 9.2 13.7396 9.2 13.5173V8.60593L13.1521 3.99024C13.4854 3.60097 13.2088 3 12.6964 3H3.30363Z");
-class ht {
-  static drawNoCriteria(e, r, s, n) {
-    e.save(), lt.drawWith(e, {
-      radius: 2,
-      width: x,
-      height: x,
-      fill: n
-    }), e.lineCap = "square", e.strokeStyle = s, e.scale(r / x, r / x), e.beginPath(), e.lineWidth = 1, e.lineCap = "round", e.moveTo(3, 4), e.lineTo(13, 4), e.moveTo(4.5, 8), e.lineTo(11.5, 8), e.moveTo(6, 12), e.lineTo(10, 12), e.stroke(), e.restore();
-  }
-  static drawHasCriteria(e, r, s, n) {
-    e.save(), lt.drawWith(e, {
-      radius: 2,
-      width: x,
-      height: x,
-      fill: n
-    }), e.scale(r / x, r / x), e.fillStyle = s, e.fill(Fi), e.restore();
-  }
-}
-var Ci = Object.getOwnPropertyDescriptor, yi = (t, e, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? Ci(e, r) : e, l = t.length - 1, i; l >= 0; l--)
-    (i = t[l]) && (n = i(n) || n);
-  return n;
-}, De = (t, e) => (r, s) => e(r, s, t);
-const H = 16, Se = 1;
-let Qe = class extends zr {
-  constructor(e, r, s, n, l) {
-    super(e, r);
-    f(this, "_cellWidth", 0);
-    f(this, "_cellHeight", 0);
-    f(this, "_filterParams");
-    f(this, "_hovered", !1);
-    this._contextService = s, this._commandService = n, this._themeService = l, this.setShapeProps(r), this.onPointerDown$.subscribeEvent((i) => this.onPointerDown(i)), this.onPointerEnter$.subscribeEvent(() => this.onPointerEnter()), this.onPointerLeave$.subscribeEvent(() => this.onPointerLeave());
-  }
-  setShapeProps(e) {
-    typeof e.cellHeight < "u" && (this._cellHeight = e.cellHeight), typeof e.cellWidth < "u" && (this._cellWidth = e.cellWidth), typeof e.filterParams < "u" && (this._filterParams = e.filterParams), this.transformByState({
-      width: e.width,
-      height: e.height
-    });
-  }
-  _draw(e) {
-    const r = this._cellHeight, s = this._cellWidth, n = H - s, l = H - r;
-    e.save();
-    const i = new Path2D();
-    i.rect(n, l, s, r), e.clip(i);
-    const { hasCriteria: o } = this._filterParams, a = this._themeService.getColorFromTheme("primary.600"), c = this._hovered ? this._themeService.getColorFromTheme("gray.50") : "rgba(255, 255, 255, 1.0)";
-    o ? ht.drawHasCriteria(e, H, a, c) : ht.drawNoCriteria(e, H, a, c), e.restore();
-  }
-  onPointerDown(e) {
-    if (e.button === 2)
-      return;
-    const { col: r, unitId: s, subUnitId: n } = this._filterParams;
-    this._contextService.getContextValue(se) || !this._commandService.hasCommand(Ie.id) || setTimeout(() => {
-      this._commandService.executeCommand(Ie.id, {
-        unitId: s,
-        subUnitId: n,
-        col: r
-      });
-    }, 200);
-  }
-  onPointerEnter() {
-    this._hovered = !0, this.makeDirty(!0);
-  }
-  onPointerLeave() {
-    this._hovered = !1, this.makeDirty(!0);
-  }
-};
-Qe = yi([
-  De(2, we),
-  De(3, Q),
-  De(4, E(St))
-], Qe);
-var Oi = Object.getOwnPropertyDescriptor, Ri = (t, e, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? Oi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
-    (i = t[l]) && (n = i(n) || n);
-  return n;
-}, Y = (t, e) => (r, s) => e(r, s, t);
-const Ii = 1e3, Ai = 5e3;
-let Ve = class extends Et {
-  constructor(e, r, s, n, l, i, o, a) {
-    super();
-    f(this, "_filterRangeShape", null);
-    f(this, "_buttonRenderDisposable", null);
-    f(this, "_filterButtonShapes", []);
-    this._context = e, this._injector = r, this._sheetSkeletonManagerService = s, this._sheetsFilterService = n, this._themeService = l, this._sheetInterceptorService = i, this._commandService = o, this._selectionRenderService = a, this._initRenderer();
-  }
-  dispose() {
-    super.dispose(), this._disposeRendering();
-  }
-  _initRenderer() {
-    this._sheetSkeletonManagerService.currentSkeleton$.pipe(
-      Ze((e) => {
-        var o, a;
-        if (!e) return fe(null);
-        const { unit: r, unitId: s } = this._context, n = ((o = r.getActiveSheet()) == null ? void 0 : o.getSheetId()) || "", l = (a = this._sheetsFilterService.getFilterModel(s, n)) != null ? a : void 0, i = () => ({
-          unitId: s,
-          worksheetId: n,
-          filterModel: l,
-          range: l == null ? void 0 : l.getRange(),
-          skeleton: e.skeleton
-        });
-        return zt(this._commandService.onCommandExecuted.bind(this._commandService)).pipe(
-          Vr(
-            ([c]) => {
-              var h;
-              return c.type === Le.MUTATION && ((h = c.params) == null ? void 0 : h.unitId) === r.getUnitId() && (sr.has(c.id) || c.id === vr.id);
-            }
-          ),
-          Rt(20, void 0, { leading: !1, trailing: !0 }),
-          ie(i),
-          It(i())
-          // must trigger once
-        );
-      }),
-      Gr(this.dispose$)
-    ).subscribe((e) => {
-      this._disposeRendering(), !(!e || !e.range) && (this._renderRange(e.range, e.skeleton), this._renderButtons(e));
-    });
-  }
-  _renderRange(e, r) {
-    const { scene: s } = this._context, { rowHeaderWidth: n, columnHeaderHeight: l } = r, i = this._filterRangeShape = new Mr(
-      s,
-      Ii,
-      this._themeService,
-      {
-        rowHeaderWidth: n,
-        columnHeaderHeight: l,
-        enableAutoFill: !1,
-        highlightHeader: !1
+        menuItemFactory: $i
       }
-    ), a = $r({
-      range: e,
-      primary: null,
-      style: { fill: "rgba(0, 0, 0, 0.0)" }
-    }, r);
-    i.updateRangeBySelectionWithCoord(a), i.setEvent(!1), s.makeDirty(!0);
-  }
-  _renderButtons(e) {
-    const { range: r, filterModel: s, unitId: n, skeleton: l, worksheetId: i } = e, { scene: o } = this._context;
-    this._interceptCellContent(n, i, e.range);
-    const { startColumn: a, endColumn: c, startRow: h } = r;
-    for (let m = a; m <= c; m++) {
-      const g = `sheets-filter-button-${m}`, p = Ur(h, m, o, l), { startX: T, startY: v, endX: C, endY: N } = p, R = C - T, O = N - v;
-      if (O <= Se || R <= Se)
-        continue;
-      const w = !!s.getFilterColumn(m), M = C - H - Se, _e = N - H - Se, ve = {
-        left: M,
-        top: _e,
-        height: H,
-        width: H,
-        zIndex: Ai,
-        cellHeight: O,
-        cellWidth: R,
-        filterParams: { unitId: n, subUnitId: i, col: m, hasCriteria: w }
-      }, I = this._injector.createInstance(Qe, g, ve);
-      this._filterButtonShapes.push(I);
     }
-    o.addObjects(this._filterButtonShapes), o.makeDirty();
-  }
-  _interceptCellContent(e, r, s) {
-    const { startRow: n, startColumn: l, endColumn: i } = s;
-    this._buttonRenderDisposable = this._sheetInterceptorService.intercept(gr.CELL_CONTENT, {
-      effect: Jt.Style,
-      handler: (o, a, c) => {
-        const { row: h, col: m, unitId: g, subUnitId: p } = a;
-        return g !== e || p !== r || h !== n || m < l || m > i || ((!o || o === a.rawData) && (o = { ...a.rawData }), o.fontRenderExtension = {
-          ...o == null ? void 0 : o.fontRenderExtension,
-          rightOffset: H
-        }), c(o);
-      },
-      priority: 10
-    });
-  }
-  _disposeRendering() {
-    var e, r;
-    (e = this._filterRangeShape) == null || e.dispose(), this._filterButtonShapes.forEach((s) => s.dispose()), (r = this._buttonRenderDisposable) == null || r.dispose(), this._filterRangeShape = null, this._buttonRenderDisposable = null, this._filterButtonShapes = [];
-  }
-};
-Ve = Ri([
-  Y(1, E(X)),
-  Y(2, E(Lr)),
-  Y(3, E(V)),
-  Y(4, E(St)),
-  Y(5, E(_r)),
-  Y(6, Q),
-  Y(7, wr)
-], Ve);
-var Pi = Object.getOwnPropertyDescriptor, bi = (t, e, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? Pi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
-    (i = t[l]) && (n = i(n) || n);
-  return n;
-}, dt = (t, e) => (r, s) => e(r, s, t);
-let de = class extends Et {
-  constructor(t, e) {
-    super(), this._renderManagerService = t, this._sheetsRenderService = e, [
-      nr,
-      or,
-      ar,
-      lr
-    ].forEach((r) => this.disposeWithMe(this._sheetsRenderService.registerSkeletonChangingMutations(r.id))), this.disposeWithMe(this._renderManagerService.registerRenderModule(
-      Z.UNIVER_SHEET,
-      [Ve]
-    ));
   }
-};
-de = bi([
-  dt(0, Lt),
-  dt(1, E(Ot))
-], de);
-const Li = {
+}, Hi = {
   id: pe.id,
-  binding: Fr.L | nt.CTRL_COMMAND | nt.SHIFT,
+  binding: mr.L | nt.CTRL_COMMAND | nt.SHIFT,
   description: "sheets-filter.shortcut.smart-toggle-filter",
-  preconditions: Hr,
+  preconditions: Rr,
   group: "4_sheet-edit"
 };
-var wi = Object.getOwnPropertyDescriptor, Mi = (t, e, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? wi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
+var Di = Object.getOwnPropertyDescriptor, ki = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? Di(e, r) : e, l = t.length - 1, i; l >= 0; l--)
     (i = t[l]) && (n = i(n) || n);
   return n;
 }, A = (t, e) => (r, s) => e(r, s, t);
-const mt = "FILTER_PANEL_POPUP";
-let Ae = class extends de {
+const pt = "FILTER_PANEL_POPUP";
+let Pe = class extends de {
   constructor(e, r, s, n, l, i, o, a, c, h, m, g, p) {
     super(p, g);
     f(this, "_popupDisposable");
@@ -1778,7 +1812,7 @@ let Ae = class extends de {
   }
   _initShortcuts() {
     [
-      Li
+      Hi
     ].forEach((e) => {
       this.disposeWithMe(this._shortcutService.registerShortcut(e));
     });
@@ -1786,34 +1820,34 @@ let Ae = class extends de {
   _initCommands() {
     [
       pe,
-      cr,
-      ur,
+      ar,
+      lr,
       re,
       qe,
       Ye,
-      kt,
-      Ie,
+      Dt,
+      Re,
       he
     ].forEach((e) => {
       this.disposeWithMe(this._commandService.registerCommand(e));
     });
   }
   _initMenuItems() {
-    this._menuManagerService.mergeMenu(Ni);
+    this._menuManagerService.mergeMenu(Ui);
   }
   _initUI() {
     [
-      [mt, vi],
-      ["FilterIcon", Wt]
+      [pt, bi],
+      ["FilterIcon", Qt]
     ].forEach(([e, r]) => {
       this.disposeWithMe(
         this._componentManager.register(e, r)
       );
-    }), this.disposeWithMe(this._contextService.subscribeContextValue$(se).pipe(jr()).subscribe((e) => {
+    }), this.disposeWithMe(this._contextService.subscribeContextValue$(se).pipe(Vr()).subscribe((e) => {
       e ? this._openFilterPopup() : this._closeFilterPopup();
     })), this.disposeWithMe(this._sheetsFilterService.errorMsg$.subscribe((e) => {
       e && this._messageService.show({
-        type: Zr.Error,
+        type: zr.Error,
         content: this._localeService.t(e)
       });
     }));
@@ -1824,7 +1858,7 @@ let Ae = class extends de {
       throw new Error("[SheetsFilterUIController]: no filter model when opening filter popup!");
     const r = e.getRange(), s = this._sheetsFilterPanelService.col, { startRow: n } = r;
     this._popupDisposable = this._sheetCanvasPopupService.attachPopupToCell(n, s, {
-      componentKey: mt,
+      componentKey: pt,
       direction: "horizontal",
       onClickOutside: () => this._commandService.syncExecuteCommand(he.id),
       offset: [5, 0]
@@ -1835,44 +1869,44 @@ let Ae = class extends de {
     (e = this._popupDisposable) == null || e.dispose(), this._popupDisposable = null;
   }
 };
-Ae = Mi([
+Pe = ki([
   A(0, E(X)),
-  A(1, E(Cr)),
+  A(1, E(pr)),
   A(2, E(W)),
-  A(3, E(Dr)),
+  A(3, E(Ir)),
   A(4, E(V)),
   A(5, E(K)),
-  A(6, yr),
+  A(6, fr),
   A(7, Q),
-  A(8, Or),
+  A(8, _r),
   A(9, we),
-  A(10, Rr),
-  A(11, E(Ot)),
-  A(12, Lt)
-], Ae);
-var $i = Object.defineProperty, Ui = Object.getOwnPropertyDescriptor, Hi = (t, e, r) => e in t ? $i(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Di = (t, e, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? Ui(e, r) : e, l = t.length - 1, i; l >= 0; l--)
+  A(10, vr),
+  A(11, E(yt)),
+  A(12, It)
+], Pe);
+var xi = Object.defineProperty, Bi = Object.getOwnPropertyDescriptor, Wi = (t, e, r) => e in t ? xi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Qi = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? Bi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
     (i = t[l]) && (n = i(n) || n);
   return n;
-}, ke = (t, e) => (r, s) => e(r, s, t), Qt = (t, e, r) => Hi(t, typeof e != "symbol" ? e + "" : e, r);
-const ki = "SHEET_FILTER_UI_PLUGIN";
-let Pe = class extends je {
-  constructor(t = Ne, e, r, s) {
+}, ke = (t, e) => (r, s) => e(r, s, t), Vt = (t, e, r) => Wi(t, typeof e != "symbol" ? e + "" : e, r);
+const Vi = "SHEET_FILTER_UI_PLUGIN";
+let be = class extends je {
+  constructor(t = Ie, e, r, s) {
     super(), this._config = t, this._injector = e, this._configService = r, this._rpcChannelService = s;
     const { menu: n, ...l } = Ft(
       {},
-      Ne,
+      Ie,
       this._config
     );
-    n && this._configService.setConfig("menu", n, { merge: !0 }), this._configService.setConfig($t, l);
+    n && this._configService.setConfig("menu", n, { merge: !0 }), this._configService.setConfig(kt, l);
   }
   onStarting() {
     tr(this._injector, [
       [W],
       [ne],
-      [Ae]
-    ]), this._config.useRemoteFilterValuesGenerator && this._rpcChannelService && this._injector.add([Fe, {
-      useFactory: () => rr(
+      [Pe]
+    ]), this._config.useRemoteFilterValuesGenerator && this._rpcChannelService && this._injector.add([Ne, {
+      useFactory: () => jr(
         this._rpcChannelService.requestChannel(Je)
       )
     }]);
@@ -1884,53 +1918,17 @@ let Pe = class extends je {
   }
   onRendered() {
     st(this._injector, [
-      [Ae]
+      [Pe]
     ]);
   }
 };
-Qt(Pe, "type", Z.UNIVER_SHEET);
-Qt(Pe, "pluginName", ki);
-Pe = Di([
-  Tt(yt),
-  ke(1, E(X)),
-  ke(2, Nt),
-  ke(3, er(Ct))
-], Pe);
-var xi = Object.defineProperty, Bi = Object.getOwnPropertyDescriptor, Wi = (t, e, r) => e in t ? xi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Qi = (t, e, r, s) => {
-  for (var n = s > 1 ? void 0 : s ? Bi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
-    (i = t[l]) && (n = i(n) || n);
-  return n;
-}, pt = (t, e) => (r, s) => e(r, s, t), Vt = (t, e, r) => Wi(t, typeof e != "symbol" ? e + "" : e, r);
-const Vi = "SHEET_FILTER_UI_PLUGIN";
-let be = class extends je {
-  constructor(t = Ne, e, r) {
-    super(), this._config = t, this._injector = e, this._configService = r;
-    const { menu: s, ...n } = Ft(
-      {},
-      Ne,
-      this._config
-    );
-    s && this._configService.setConfig("menu", s, { merge: !0 }), this._configService.setConfig($t, n);
-  }
-  onStarting() {
-    [
-      [ne],
-      [de]
-    ].forEach((t) => this._injector.add(t));
-  }
-  onReady() {
-    this._injector.get(ne);
-  }
-  onRendered() {
-    this._injector.get(de);
-  }
-};
 Vt(be, "type", Z.UNIVER_SHEET);
 Vt(be, "pluginName", Vi);
 be = Qi([
-  Tt(yt),
-  pt(1, E(X)),
-  pt(2, Nt)
+  Tt(Ct),
+  ke(1, E(X)),
+  ke(2, Nt),
+  ke(3, er(At))
 ], be);
 var Gi = Object.getOwnPropertyDescriptor, ji = (t, e, r, s) => {
   for (var n = s > 1 ? void 0 : s ? Gi(e, r) : e, l = t.length - 1, i; l >= 0; l--)
@@ -1943,25 +1941,25 @@ let _t = (Ee = class extends je {
   }
   onStarting() {
     [
-      [Fe, { useClass: Be }]
+      [Ne, { useClass: Be }]
     ].forEach((t) => this._injector.add(t));
   }
   onReady() {
     this._rpcChannelService.registerChannel(
       Je,
-      ir(this._injector.get(Fe))
+      Yr(this._injector.get(Ne))
     );
   }
 }, f(Ee, "type", Z.UNIVER_SHEET), f(Ee, "pluginName", "SHEET_FILTER_UI_WORKER_PLUGIN"), Ee);
 _t = ji([
   ft(1, E(X)),
-  ft(2, Ct)
+  ft(2, At)
 ], _t);
 export {
-  kt as ChangeFilterByOperation,
+  Dt as ChangeFilterByOperation,
   he as CloseFilterPanelOperation,
-  Ie as OpenFilterPanelOperation,
-  be as UniverSheetsFilterMobileUIPlugin,
-  Pe as UniverSheetsFilterUIPlugin,
+  Re as OpenFilterPanelOperation,
+  Ae as UniverSheetsFilterMobileUIPlugin,
+  be as UniverSheetsFilterUIPlugin,
   _t as UniverSheetsFilterUIWorkerPlugin
 };