@univerjs/sheets-filter-ui 0.7.0 → 0.8.0-beta.1

package/lib/es/index.js

@@ -1,18 +1,18 @@
 var Yt = Object.defineProperty;
 var qt = (t, e, r) => e in t ? Yt(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
 var f = (t, e, r) => qt(t, typeof e != "symbol" ? e + "" : e, r);
-import { BooleanNumber as rt, createIdentifier as _t, Inject as E, LocaleService as K, IUniverInstanceService as Ge, ILogService as Kt, extractPureTextFromCell as Xt, numfmt as it, Disposable as me, Injector as X, Quantity as vt, Tools as Te, ICommandService as Q, CommandType as Le, IContextService as Me, UniverInstanceType as Z, ThemeService as gt, RxDisposable as St, fromCallback as Zt, InterceptorEffectEnum as zt, DependentOn as Et, IConfigService as Tt, Optional as Jt, Plugin as je, merge as Nt } from "@univerjs/core";
+import { BooleanNumber as rt, createIdentifier as _t, Inject as E, LocaleService as K, IUniverInstanceService as Ge, ILogService as Kt, extractPureTextFromCell as Xt, numfmt as it, Disposable as me, Injector as X, Quantity as vt, Tools as Te, ICommandService as Q, CommandType as Le, IContextService as we, UniverInstanceType as Z, ThemeService as gt, RxDisposable as St, fromCallback as Zt, InterceptorEffectEnum as zt, DependentOn as Et, IConfigService as Tt, Optional as Jt, Plugin as je, merge as Nt } from "@univerjs/core";
 import { IRPCChannelService as Ft, toModule as er, fromModule as tr } 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 rr, SetSheetsFilterRangeMutation as ir, SetSheetsFilterCriteriaMutation as sr, RemoveSheetsFilterMutation as nr, ReCalcSheetsFilterMutation as or, RemoveSheetFilterCommand as ar, SetSheetFilterRangeCommand as lr, UniverSheetsFilterPlugin as Ct } from "@univerjs/sheets-filter";
 import { RefRangeService as cr, SheetPermissionCheckController as ur, SheetsSelectionsService as hr, getSheetCommandTarget as dr, WorksheetFilterPermission as ae, WorksheetViewPermission as le, RangeProtectionPermissionViewPoint as ce, expandToContinuousRange as mr, SheetInterceptorService as pr, SetRangeValuesMutation as fr, INTERCEPTOR_POINT as _r } from "@univerjs/sheets";
-import { ILayoutService as vr, useDependency as te, useObservable as B, useComponentsOfPart as gr, ComponentContainer as Sr, getMenuHiddenObservable as Ke, MenuItemType as Xe, RibbonStartGroup as Er, KeyCode as Tr, MetaKeys as st, ComponentManager as Nr, IShortcutService as Fr, IMenuManagerService as Cr, IMessageService as yr } from "@univerjs/ui";
-import { SetCellEditVisibleOperation as Or, SheetsUIPart as Rr, getObservableWithExclusiveRange$ as Ir, getCurrentRangeDisable$ as Ar, SheetSkeletonManagerService as Pr, ISheetSelectionRenderService as br, SelectionControl as Lr, attachSelectionWithCoord as Mr, getCoordByCell as wr, SheetsRenderService as yt, whenSheetEditorFocused as $r, SheetCanvasPopManagerService as Ur } from "@univerjs/sheets-ui";
+import { ILayoutService as vr, useDependency as te, useObservable as B, useComponentsOfPart as gr, ComponentContainer as Sr, getMenuHiddenObservable as Ke, MenuItemType as Xe, RibbonDataGroup as Er, KeyCode as Tr, MetaKeys as st, ComponentManager as Nr, IShortcutService as Fr, IMenuManagerService as Cr, IMessageService as yr } from "@univerjs/ui";
+import { SetCellEditVisibleOperation as Or, SheetsUIPart as Rr, getObservableWithExclusiveRange$ as Ir, getCurrentRangeDisable$ as Ar, SheetSkeletonManagerService as Pr, ISheetSelectionRenderService as br, SelectionControl as Lr, attachSelectionWithCoord as wr, getCoordByCell as Mr, SheetsRenderService as yt, whenSheetEditorFocused as $r, SheetCanvasPopManagerService as Ur } from "@univerjs/sheets-ui";
 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 { Select as nt, clsx as It, borderClassName as At, RadioGroup as Gr, Radio as ot, Input as Pt, Checkbox as jr, Tree as Yr, Segmented as qr, Button as Ue, MessageType as Kr } from "@univerjs/design";
 import { Rect as at, Shape as Xr, IRenderManagerService as bt } from "@univerjs/engine-render";
 import { jsx as S, jsxs as b, Fragment as lt } from "react/jsx-runtime";
-import { forwardRef as Lt, useRef as Zr, createElement as Mt, useCallback as D, useMemo as ze } from "react";
-const wt = "sheets-filter-ui.config", Ne = {};
+import { forwardRef as Lt, useRef as Zr, createElement as wt, useCallback as D, useMemo as ze } from "react";
+const Mt = "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 = {
@@ -392,9 +392,9 @@ var F = /* @__PURE__ */ ((t) => (t[t.FIRST = 0] = "FIRST", t[t.SECOND = 1] = "SE
     mapToFilterColumn: (i) => {
       const { and: o, val1: a, val2: c, operator1: h, operator2: m } = i;
       function g(R, O) {
-        for (const M of t.ALL_CONDITIONS)
-          if (M.operator === R)
-            return M.mapToFilterColumn({ val1: O, operator1: R });
+        for (const w of t.ALL_CONDITIONS)
+          if (w.operator === R)
+            return w.mapToFilterColumn({ val1: O, operator1: R });
       }
       const p = !h || h === t.NONE.operator, T = !m || m === t.NONE.operator;
       if (p && T)
@@ -528,7 +528,7 @@ Be = Jr([
   He(2, Kt)
 ], Be);
 function $t(t, e, r, s, n, l, i, o) {
-  var v, C, N, R, O, M, w, _e, ve;
+  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(ei), g = "empty";
   let p = 0;
   for (const I of s.iterateByColumn(r, !1, !1)) {
@@ -545,7 +545,7 @@ function $t(t, e, r, s, n, l, i, o) {
         p += 1, z += tt;
         continue;
       }
-      const ge = (v = I.value) != null && v.v && !I.value.p ? (R = (N = o.get((C = I.value) == null ? void 0 : C.s)) == null ? void 0 : N.n) == null ? void 0 : R.pattern : "", jt = ge && it.isDate(ge);
+      const ge = (v = I.value) != null && v.v && !I.value.p ? (R = (N = o.get((C = I.value) == null ? void 0 : C.s)) == null ? void 0 : N.n) == null ? void 0 : R.pattern : "", jt = ge && it.getFormatInfo(ge).isDate;
       if (ge && jt && m.has(ge)) {
         const k = (O = s.getCellRaw(I.row, I.col)) == null ? void 0 : O.v;
         if (!k) {
@@ -562,7 +562,7 @@ function $t(t, e, r, s, n, l, i, o) {
           leaf: !1,
           checked: !1
         }, a.set(`${y}`, j), c.set(`${y}`, [`${y}`]));
-        let U = (M = j.children) == null ? void 0 : M.find(($e) => $e.key === `${y}-${$}`);
+        let U = (w = j.children) == null ? void 0 : w.find(($e) => $e.key === `${y}-${$}`);
         U || (U = {
           title: e.t(`sheets-filter.date.${$}`),
           key: `${y}-${$}`,
@@ -570,9 +570,9 @@ function $t(t, e, r, s, n, l, i, o) {
           count: 0,
           leaf: !1,
           checked: !1
-        }, (w = j.children) == null || w.push(U), c.set(`${y}-${$}`, [`${y}`, `${y}-${$}`]));
-        const we = (_e = U == null ? void 0 : U.children) == null ? void 0 : _e.find(($e) => $e.key === `${y}-${$}-${oe}`);
-        we ? (we.originValues.add(G), we.count++, U.count++, j.count++) : ((ve = U.children) == null || ve.push({
+        }, (M = j.children) == null || M.push(U), c.set(`${y}-${$}`, [`${y}`, `${y}-${$}`]));
+        const Me = (_e = U == null ? void 0 : U.children) == null ? void 0 : _e.find(($e) => $e.key === `${y}-${$}-${oe}`);
+        Me ? (Me.originValues.add(G), Me.count++, U.count++, j.count++) : ((ve = U.children) == null || ve.push({
           title: `${oe}`,
           key: `${y}-${$}-${oe}`,
           count: 1,
@@ -919,15 +919,15 @@ let Re = class extends me {
    * @returns the model to control the panel's state
    */
   static async fromFilterColumn(e, r, s) {
-    var M;
+    var w;
     const n = e.get(Ge), l = e.get(K), i = e.get(Fe, vt.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}!`);
-    const m = r.getRange(), g = s, p = (M = r.getFilterColumn(s)) == null ? void 0 : M.getColumnData().filters, T = new Set(p == null ? void 0 : p.filters), v = !!(p && p.blank), C = r.getFilteredOutRowsExceptCol(s), N = { ...m, startRow: m.startRow + 1, startColumn: g, endColumn: g };
+    const m = r.getRange(), g = s, p = (w = r.getFilterColumn(s)) == null ? void 0 : w.getColumnData().filters, T = new Set(p == null ? void 0 : p.filters), v = !!(p && p.blank), C = r.getFilteredOutRowsExceptCol(s), N = { ...m, startRow: m.startRow + 1, startColumn: g, endColumn: g };
     let R, O;
     if (i) {
-      const w = await i.getFilterValues({
+      const M = await i.getFilterValues({
         unitId: o,
         subUnitId: a,
         filteredOutRowsByOtherColumns: Array.from(C),
@@ -936,10 +936,10 @@ let Re = class extends me {
         iterateRange: N,
         alreadyChecked: Array.from(T)
       });
-      R = w.filterTreeItems, O = w.filterTreeMapCache;
+      R = M.filterTreeItems, O = M.filterTreeMapCache;
     } else {
-      const w = $t(!!p, l, N, h, C, T, v, c.getStyles());
-      R = w.filterTreeItems, O = w.filterTreeMapCache;
+      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);
   }
@@ -1038,7 +1038,7 @@ const se = "FILTER_PANEL_OPENED", Ie = {
   id: "sheet.operation.open-filter-panel",
   type: Le.OPERATION,
   handler: (t, e) => {
-    const r = t.get(Me), s = t.get(V), n = t.get(W);
+    const r = t.get(we), s = t.get(V), n = t.get(W);
     t.get(Q).syncExecuteCommand(Or.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,7 +1047,7 @@ const se = "FILTER_PANEL_OPENED", Ie = {
   id: "sheet.operation.close-filter-panel",
   type: Le.OPERATION,
   handler: (t) => {
-    const e = t.get(Me), r = t.get(W), s = t.get(vr, vt.OPTIONAL);
+    const e = t.get(we), r = t.get(W), s = t.get(vr, vt.OPTIONAL);
     return e.getContextValue(se) ? (e.setContextValue(se, !1), s == null || s.focus(), r.terminate()) : !1;
   }
 }, Dt = {
@@ -1136,7 +1136,7 @@ var P = function() {
   return xt(r, "".concat(s), { defIds: r.defIds, idSuffix: a.current }, P({ ref: e, className: o }, i), l);
 });
 function xt(t, e, r, s, n) {
-  return Mt(t.tag, P(P({ key: e }, ai(t, r, n)), s), (li(t, r).children || []).map(function(l, i) {
+  return wt(t.tag, P(P({ key: e }, ai(t, r, n)), s), (li(t, r).children || []).map(function(l, i) {
     return xt(l, "".concat(e, "-").concat(t.tag, "-").concat(i), r, void 0, n);
   }));
 }
@@ -1155,21 +1155,21 @@ function ai(t, e, r) {
 function li(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.indexOf(n.attrs.id) > -1 ? P(P({}, n), { attrs: P(P({}, n.attrs), { id: n.attrs.id + e.idSuffix }) }) : 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 ci() {
   return Math.random().toString(36).substring(2, 8);
 }
 kt.displayName = "UniverIcon";
-var ui = { tag: "svg", attrs: { 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" } }] }, Bt = Lt(function(t, e) {
-  return Mt(kt, Object.assign({}, t, {
-    id: "filter-single",
+var ui = { 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" } }] }, Bt = Lt(function(t, e) {
+  return wt(kt, Object.assign({}, t, {
+    id: "filter-icon",
     ref: e,
     icon: ui
   }));
 });
-Bt.displayName = "FilterSingle";
+Bt.displayName = "FilterIcon";
 function hi(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) => {
@@ -1342,7 +1342,7 @@ function pi(t) {
                           "span",
                           {
                             "data-u-comp": "sheets-filter-panel-values-item-text",
-                            className: "univer-mx-1 univer-inline-block univer-flex-shrink univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap univer-text-gray-900 dark:univer-text-white",
+                            className: "univer-mx-1 univer-inline-block univer-flex-shrink univer-overflow-hidden univer-text-ellipsis univer-whitespace-nowrap univer-text-gray-900 dark:!univer-text-white",
                             children: `${r.t("sheets-filter.panel.select-all")}`
                           }
                         ),
@@ -1350,7 +1350,7 @@ function pi(t) {
                           "span",
                           {
                             "data-u-comp": "sheets-filter-panel-values-item-count",
-                            className: "univer-text-gray-400 dark:univer-text-gray-500",
+                            className: "univer-text-gray-400 dark:!univer-text-gray-500",
                             children: `(${i.checked}/${i.checked + i.unchecked})`
                           }
                         )
@@ -1375,8 +1375,8 @@ function pi(t) {
                           univer-pr-2 univer-border-box univer-max-w-[245px] univer-rounded-md
                           [&:hover_a]:univer-inline-block
                           hover:univer-bg-gray-50 univer-h-full
-                          univer-text-gray-900 dark:hover:univer-bg-gray-900
-                          dark:univer-text-white
+                          univer-text-gray-900 dark:hover:!univer-bg-gray-900
+                          dark:!univer-text-white
                         `,
                   attachRender: (p) => /* @__PURE__ */ b(
                     "div",
@@ -1387,7 +1387,7 @@ function pi(t) {
                           "span",
                           {
                             "data-u-comp": "sheets-filter-panel-values-item-count",
-                            className: "univer-text-gray-400 dark:univer-text-gray-500",
+                            className: "univer-text-gray-400 dark:!univer-text-gray-500",
                             children: `(${p.count})`
                           }
                         ),
@@ -1433,7 +1433,7 @@ function fi() {
     "div",
     {
       "data-u-comp": "sheets-filter-panel",
-      className: "univer-box-border univer-flex univer-h-[432px] 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-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",
       children: [
         /* @__PURE__ */ S(
           Sr,
@@ -1457,7 +1457,7 @@ function fi() {
             className: "univer-flex-shrink univer-flex-grow univer-pt-2",
             children: s === ye.VALUES ? /* @__PURE__ */ S(pi, { model: n }) : /* @__PURE__ */ S(hi, { model: n })
           }
-        ) : /* @__PURE__ */ S("div", { style: { flex: 1 } }),
+        ) : /* @__PURE__ */ S("div", { className: "univer-flex-1" }),
         /* @__PURE__ */ b(
           "div",
           {
@@ -1465,7 +1465,7 @@ function fi() {
             className: "univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-nowrap univer-justify-between univer-overflow-hidden",
             children: [
               /* @__PURE__ */ S(Ue, { variant: "link", onClick: c, disabled: o, children: e.t("sheets-filter.panel.clear-filter") }),
-              /* @__PURE__ */ b("span", { className: "univer-space-x-2", children: [
+              /* @__PURE__ */ b("span", { className: "univer-flex univer-gap-2", children: [
                 /* @__PURE__ */ S(Ue, { variant: "default", onClick: h, children: e.t("sheets-filter.panel.cancel") }),
                 /* @__PURE__ */ S(Ue, { disabled: !l, variant: "primary", onClick: m, children: e.t("sheets-filter.panel.confirm") })
               ] })
@@ -1488,7 +1488,7 @@ function vi(t) {
   return {
     id: pe.id,
     type: Xe.BUTTON_SELECTOR,
-    icon: "FilterSingle",
+    icon: "FilterIcon",
     tooltip: "sheets-filter.toolbar.smart-toggle-filter-tooltip",
     hidden$: Ke(t, Z.UNIVER_SHEET),
     activated$: e.activeFilterModel$.pipe(ie((r) => !!r)),
@@ -1522,9 +1522,9 @@ function Si(t) {
   };
 }
 const Ei = {
-  [Er.FORMULAS_INSERT]: {
+  [Er.ORGANIZATION]: {
     [pe.id]: {
-      order: 10,
+      order: 2,
       menuItemFactory: vi,
       [qe.id]: {
         order: 0,
@@ -1604,7 +1604,7 @@ let Qe = class extends Xr {
   }
 };
 Qe = Fi([
-  De(2, Me),
+  De(2, we),
   De(3, Q),
   De(4, E(gt))
 ], Qe);
@@ -1666,7 +1666,7 @@ let Ve = class extends St {
         enableAutoFill: !1,
         highlightHeader: !1
       }
-    ), a = Mr({
+    ), a = wr({
       range: e,
       primary: null,
       style: { fill: "rgba(0, 0, 0, 0.0)" }
@@ -1678,18 +1678,18 @@ let Ve = class extends St {
     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 = wr(h, m, o, l), { startX: T, startY: v, endX: C, endY: N } = p, R = C - T, O = N - v;
+      const g = `sheets-filter-button-${m}`, p = Mr(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 M = !!s.getFilterColumn(m), w = C - H - Se, _e = N - H - Se, ve = {
-        left: w,
+      const w = !!s.getFilterColumn(m), M = C - H - Se, _e = N - H - Se, ve = {
+        left: M,
         top: _e,
         height: H,
         width: H,
         zIndex: Ri,
         cellHeight: O,
         cellWidth: R,
-        filterParams: { unitId: n, subUnitId: i, col: m, hasCriteria: M }
+        filterParams: { unitId: n, subUnitId: i, col: m, hasCriteria: w }
       }, I = this._injector.createInstance(Qe, g, ve);
       this._filterButtonShapes.push(I);
     }
@@ -1701,13 +1701,10 @@ let Ve = class extends St {
       effect: zt.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 ? c(o) : c({
-          ...o,
-          fontRenderExtension: {
-            ...o == null ? void 0 : o.fontRenderExtension,
-            rightOffset: H
-          }
-        });
+        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
     });
@@ -1796,7 +1793,14 @@ let Ae = class extends de {
     this._menuManagerService.mergeMenu(Ei);
   }
   _initUI() {
-    this.disposeWithMe(this._componentManager.register(dt, fi)), this.disposeWithMe(this._componentManager.register("FilterSingle", Bt)), this.disposeWithMe(this._contextService.subscribeContextValue$(se).pipe(Vr()).subscribe((e) => {
+    [
+      [dt, fi],
+      ["FilterIcon", Bt]
+    ].forEach(([e, r]) => {
+      this.disposeWithMe(
+        this._componentManager.register(e, r)
+      );
+    }), 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({
@@ -1832,13 +1836,13 @@ Ae = Li([
   A(6, Fr),
   A(7, Q),
   A(8, Cr),
-  A(9, Me),
+  A(9, we),
   A(10, yr),
   A(11, E(yt)),
   A(12, bt)
 ], Ae);
-var Mi = Object.defineProperty, wi = Object.getOwnPropertyDescriptor, $i = (t, e, r) => e in t ? Mi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ui = (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 wi = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, $i = (t, e, r) => e in t ? wi(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r, Ui = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? Mi(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), Wt = (t, e, r) => $i(t, typeof e != "symbol" ? e + "" : e, r);
@@ -1851,7 +1855,7 @@ let Pe = class extends je {
       Ne,
       this._config
     );
-    n && this._configService.setConfig("menu", n, { merge: !0 }), this._configService.setConfig(wt, l);
+    n && this._configService.setConfig("menu", n, { merge: !0 }), this._configService.setConfig(Mt, l);
   }
   onStarting() {
     [
@@ -1893,7 +1897,7 @@ let be = class extends je {
       Ne,
       this._config
     );
-    s && this._configService.setConfig("menu", s, { merge: !0 }), this._configService.setConfig(wt, n);
+    s && this._configService.setConfig("menu", s, { merge: !0 }), this._configService.setConfig(Mt, n);
   }
   onStarting() {
     [

package/lib/index.css

@@ -1 +1 @@
-.univer-mx-1{margin-left:4px;margin-right:4px}.univer-mb-1{margin-bottom:4px}.univer-ml-1{margin-left:4px}.univer-mt-2{margin-top:8px}.univer-mt-4{margin-top:16px}.univer-box-border{box-sizing:border-box}.univer-inline-block{display:inline-block}.univer-flex{display:flex}.univer-inline-flex{display:inline-flex}.univer-hidden{display:none}.univer-h-4{height:16px}.univer-h-5{height:20px}.univer-h-7{height:28px}.univer-h-8{height:32px}.univer-h-\[432px\]{height:432px}.univer-h-full{height:100%}.univer-w-\[312px\]{width:312px}.univer-w-full{width:100%}.univer-max-w-\[245px\]{max-width:245px}.univer-flex-1{flex:1 1 0%}.univer-flex-shrink{flex-shrink:1}.univer-flex-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-flex-nowrap{flex-wrap:nowrap}.univer-items-center{align-items:center}.univer-justify-between{justify-content:space-between}.univer-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse: 0;margin-right:0;margin-right:calc(8px * var(--tw-space-x-reverse));margin-left:calc(8px * (1 - var(--tw-space-x-reverse)));margin-left:8px;margin-left:calc(8px * calc(1 - var(--tw-space-x-reverse)))}.univer-overflow-hidden{overflow:hidden}.univer-text-ellipsis{text-overflow:ellipsis}.univer-whitespace-nowrap{white-space:nowrap}.univer-rounded-lg{border-radius:8px}.univer-rounded-md{border-radius:6px}.univer-bg-white{background-color:var(--univer-white)}.univer-p-2{padding:8px}.univer-p-4{padding:16px}.univer-px-1\.5{padding-left:6px;padding-right:6px}.univer-px-2{padding-left:8px;padding-right:8px}.univer-py-0\.5{padding-top:2px;padding-bottom:2px}.univer-py-2\.5{padding-top:10px;padding-bottom:10px}.univer-pb-0{padding-bottom:0}.univer-pl-5{padding-left:20px}.univer-pr-0\.5{padding-right:2px}.univer-pr-2{padding-right:8px}.univer-pt-0{padding-top:0}.univer-pt-2{padding-top:8px}.univer-text-sm{font-size:14px;line-height:20px}.univer-text-xs{font-size:12px;line-height:16px}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-shadow-lg{--tw-shadow: 0px 4px 6px 0px rgba(30, 40, 77, .05), 0px 10px 15px -3px rgba(30, 40, 77, .1);--tw-shadow-colored: 0px 4px 6px 0px var(--tw-shadow-color), 0px 10px 15px -3px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)),var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)),var(--tw-shadow)}.hover\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.dark\:univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)}.dark\:univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)}.dark\:univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)}.dark\:univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)}.dark\:hover\:univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)}.\[\&\:hover_a\]\:univer-inline-block:hover a{display:inline-block}
+.univer-mx-1{margin-left:4px;margin-right:4px}.univer-mb-1{margin-bottom:4px}.univer-ml-1{margin-left:4px}.univer-mt-2{margin-top:8px}.univer-mt-4{margin-top:16px}.univer-box-border{box-sizing:border-box}.univer-inline-block{display:inline-block}.univer-flex{display:flex}.univer-inline-flex{display:inline-flex}.univer-hidden{display:none}.univer-h-4{height:16px}.univer-h-5{height:20px}.univer-h-7{height:28px}.univer-h-8{height:32px}.univer-h-\[442px\]{height:442px}.univer-h-full{height:100%}.univer-w-\[312px\]{width:312px}.univer-w-full{width:100%}.univer-max-w-\[245px\]{max-width:245px}.univer-flex-1{flex:1 1 0%}.univer-flex-shrink{flex-shrink:1}.univer-flex-shrink-0{flex-shrink:0}.univer-flex-grow{flex-grow:1}.univer-flex-grow-0{flex-grow:0}.univer-cursor-pointer{cursor:pointer}.univer-flex-col{flex-direction:column}.univer-flex-nowrap{flex-wrap:nowrap}.univer-items-center{align-items:center}.univer-justify-between{justify-content:space-between}.univer-gap-2{gap:8px}.univer-overflow-hidden{overflow:hidden}.univer-text-ellipsis{text-overflow:ellipsis}.univer-whitespace-nowrap{white-space:nowrap}.univer-rounded-lg{border-radius:8px}.univer-rounded-md{border-radius:6px}.univer-bg-white{background-color:var(--univer-white)}.univer-p-2{padding:8px}.univer-p-4{padding:16px}.univer-px-1\.5{padding-left:6px;padding-right:6px}.univer-px-2{padding-left:8px;padding-right:8px}.univer-py-0\.5{padding-top:2px;padding-bottom:2px}.univer-py-2\.5{padding-top:10px;padding-bottom:10px}.univer-pb-0{padding-bottom:0}.univer-pl-5{padding-left:20px}.univer-pr-0\.5{padding-right:2px}.univer-pr-2{padding-right:8px}.univer-pt-0{padding-top:0}.univer-pt-2{padding-top:8px}.univer-text-sm{font-size:14px;line-height:20px}.univer-text-xs{font-size:12px;line-height:16px}.univer-text-gray-400{color:var(--univer-gray-400)}.univer-text-gray-500{color:var(--univer-gray-500)}.univer-text-gray-900{color:var(--univer-gray-900)}.univer-text-primary-500{color:var(--univer-primary-500)}.univer-shadow-lg{--tw-shadow: 0px 4px 6px 0px rgba(30, 40, 77, .05), 0px 10px 15px -3px rgba(30, 40, 77, .1);--tw-shadow-colored: 0px 4px 6px 0px var(--tw-shadow-color), 0px 10px 15px -3px var(--tw-shadow-color);box-shadow:0 0 #0000,0 0 #0000,0 4px 6px #1e284d0d,0 10px 15px -3px #1e284d1a;box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)),var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)),var(--tw-shadow)}.hover\:univer-bg-gray-50:hover{background-color:var(--univer-gray-50)}.dark\:\!univer-border-gray-600:where(.univer-dark,.univer-dark *){border-color:var(--univer-gray-600)!important}.dark\:\!univer-bg-gray-700:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-700)!important}.dark\:\!univer-text-gray-500:where(.univer-dark,.univer-dark *){color:var(--univer-gray-500)!important}.dark\:\!univer-text-white:where(.univer-dark,.univer-dark *){color:var(--univer-white)!important}.dark\:hover\:\!univer-bg-gray-900:hover:where(.univer-dark,.univer-dark *){background-color:var(--univer-gray-900)!important}.\[\&\:hover_a\]\:univer-inline-block:hover a{display:inline-block}