@univerjs/sheets-table-ui 0.15.3-insiders.20260131-b9b8805 → 0.15.3

package/lib/es/index.js

@@ -1,20 +1,20 @@
 var En = Object.defineProperty;
 var $n = (r, e, t) => e in r ? En(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var U = (r, e, t) => $n(r, typeof e != "symbol" ? e + "" : e, t);
-import { Inject as N, IUniverInstanceService as pe, LocaleService as te, Disposable as Le, ObjectMatrix as Ln, cellToRange as Zt, Rectangle as be, ICommandService as ne, Injector as ke, IPermissionService as jt, IContextService as wt, CommandType as qt, IConfigService as Yt, ThemeService as kn, RxDisposable as Qt, VerticalAlign as rt, InterceptorEffectEnum as Pn, ErrorService as On, ColorKit as he, UniverInstanceType as Ye, DependentOn as Dn, Plugin as Bn, merge as Fn, registerDependencies as Vn, touchDependencies as Hn } from "@univerjs/core";
-import { SHEET_VIEWPORT_KEY as An, convertTransformToOffsetX as Un, convertTransformToOffsetY as Wn, IRenderManagerService as zt, Rect as Et, Shape as Zn } from "@univerjs/engine-render";
-import { TableManager as re, SheetTableService as jn, SetSheetTableFilterCommand as $t, isConditionFilter as qn, isManualFilter as Yn, TableDateCompareTypeEnum as o, TableStringCompareTypeEnum as Z, TableConditionTypeEnum as F, TableNumberCompareTypeEnum as k, SheetsTableSortStateEnum as Xe, TableColumnFilterTypeEnum as Lt, AddSheetTableCommand as Qn, SHEET_TABLE_CUSTOM_THEME_PREFIX as zn, DeleteSheetTableCommand as Gn, SetSheetTableCommand as ft, SheetsTableButtonStateEnum as Re, processStyleWithBorderStyle as kt, customEmptyThemeWithBorderStyle as Xn, AddTableThemeCommand as Kn, RemoveTableThemeCommand as Jn, SheetTableRemoveColCommand as Gt, SheetTableRemoveRowCommand as Xt, SheetTableInsertColCommand as Kt, SheetTableInsertRowCommand as Jt, SheetsTableController as en, UniverSheetsTablePlugin as er } from "@univerjs/sheets-table";
+import { Inject as N, IUniverInstanceService as pe, ICommandService as te, LocaleService as ne, Disposable as Le, ObjectMatrix as Ln, cellToRange as Zt, Rectangle as be, Injector as ke, IPermissionService as jt, IContextService as wt, CommandType as qt, IConfigService as Yt, ThemeService as kn, RxDisposable as Qt, VerticalAlign as rt, InterceptorEffectEnum as Pn, ErrorService as On, ColorKit as he, UniverInstanceType as Ye, DependentOn as Dn, Plugin as Bn, merge as Fn, registerDependencies as Vn, touchDependencies as Hn } from "@univerjs/core";
+import { IRenderManagerService as Gt, SHEET_VIEWPORT_KEY as An, convertTransformToOffsetX as Un, convertTransformToOffsetY as Wn, Rect as Et, Shape as Zn } from "@univerjs/engine-render";
+import { TableManager as re, SheetTableService as jn, SetSheetTableFilterCommand as $t, isConditionFilter as qn, isManualFilter as Yn, TableDateCompareTypeEnum as o, TableStringCompareTypeEnum as Z, TableConditionTypeEnum as F, TableNumberCompareTypeEnum as k, SheetsTableSortStateEnum as ze, TableColumnFilterTypeEnum as Lt, AddSheetTableCommand as Qn, SHEET_TABLE_CUSTOM_THEME_PREFIX as Gn, DeleteSheetTableCommand as Xn, SetSheetTableCommand as ft, SheetsTableButtonStateEnum as Re, processStyleWithBorderStyle as kt, customEmptyThemeWithBorderStyle as zn, AddTableThemeCommand as Kn, RemoveTableThemeCommand as Jn, SheetTableRemoveColCommand as Xt, SheetTableRemoveRowCommand as zt, SheetTableInsertColCommand as Kt, SheetTableInsertRowCommand as Jt, SheetsTableController as en, UniverSheetsTablePlugin as er } from "@univerjs/sheets-table";
 import { SheetCanvasPopManagerService as tr, SheetSkeletonManagerService as lt, SheetScrollManagerService as nr, SetZoomRatioOperation as rr, SetScrollOperation as ir, getSheetObject as ar, getCoordByCell as sr, getCurrentRangeDisable$ as or, SelectAllCommand as lr } from "@univerjs/sheets-ui";
-import { useDependency as M, ComponentManager as tn, IDialogService as nn, ISidebarService as cr, useObservable as Te, BuiltInUIPart as ur, connectInjector as dr, IUIPartsService as hr, MenuItemType as ye, getMenuHiddenObservable as vr, ContextMenuPosition as gr, ContextMenuGroup as br, RibbonDataGroup as mr, IMenuManagerService as pr } from "@univerjs/ui";
+import { useDependency as M, ComponentManager as tn, IDialogService as nn, ISidebarService as cr, useObservable as Te, IUIPartsService as ur, BuiltInUIPart as dr, connectInjector as hr, MenuItemType as ye, getMenuHiddenObservable as vr, ContextMenuPosition as gr, ContextMenuGroup as br, RibbonDataGroup as mr, IMenuManagerService as pr } from "@univerjs/ui";
 import { startWith as rn, distinctUntilChanged as fr, Subject as Cr, BehaviorSubject as Pt, merge as It, filter as Sr, debounceTime as _r, switchMap as we, of as J, map as Tr, takeUntil as wr } from "rxjs";
 import { jsxs as T, jsx as l, Fragment as yt } from "react/jsx-runtime";
 import { Dropdown as Ne, clsx as D, borderClassName as H, CascaderList as Ir, Input as Rt, InputNumber as gt, DatePicker as yr, DateRangePicker as Rr, Select as Mr, Checkbox as Ot, scrollbarClassName as xr, ButtonGroup as Nr, Button as _e, Segmented as Er, ColorPicker as Ke } from "@univerjs/design";
 import { useRef as $r, createElement as ie, forwardRef as le, useState as q, useMemo as an, useCallback as Dt, useEffect as sn } from "react";
-import { SetRangeValuesMutation as Lr, WorkbookEditablePermission as on, getSheetCommandTarget as ct, SheetsSelectionsService as ut, isSingleCellSelection as kr, expandToContinuousRange as Pr, SetRangeThemeMutation as ln, WorkbookPermissionService as cn, SheetRangeThemeModel as un, SheetInterceptorService as dn, SetVerticalTextAlignCommand as Or, INTERCEPTOR_POINT as Dr, RangeThemeStyle as Br, SetSelectionsOperation as Bt, getPrimaryForRange as Ft } from "@univerjs/sheets";
+import { SetRangeValuesMutation as Lr, WorkbookEditablePermission as on, getSheetCommandTarget as ct, SheetsSelectionsService as ut, isSingleCellSelection as kr, expandToContinuousRange as Pr, SetRangeThemeMutation as ln, WorkbookPermissionService as cn, SheetRangeThemeModel as un, SheetInterceptorService as dn, SetVerticalTextAlignCommand as Or, INTERCEPTOR_POINT as Dr, RangeThemeStyle as Br, getPrimaryForRange as Bt, SetSelectionsOperation as Ft } from "@univerjs/sheets";
 import { SortRangeCommand as Fr, SortType as Vt } from "@univerjs/sheets-sort";
 import { serializeRange as Ht, deserializeRangeWithSheet as Vr } from "@univerjs/engine-formula";
 import { RangeSelector as Hr } from "@univerjs/sheets-formula-ui";
-const Ar = "SHEET_TABLE_UI_PLUGIN", ge = "SHEETS_TABLE_FILTER_PANEL_OPENED_KEY", Ur = "UNIVER_SHEET_Table_FILTER_PANEL_ID", hn = "TABLE_TOOLBAR_BUTTON", xe = "TABLE_SELECTOR_DIALOG", Wr = "SHEET_TABLE_THEME_PANEL_ID", vn = "SHEET_TABLE_THEME_PANEL", bt = "table-custom-", Zr = "table-default-", ve = "rgb(255, 255, 255)", G = "none", Je = "1px solid rgb(var(--grey-200))";
+const Ar = "SHEET_TABLE_UI_PLUGIN", ge = "SHEETS_TABLE_FILTER_PANEL_OPENED_KEY", Ur = "UNIVER_SHEET_Table_FILTER_PANEL_ID", hn = "TABLE_TOOLBAR_BUTTON", xe = "TABLE_SELECTOR_DIALOG", Wr = "SHEET_TABLE_THEME_PANEL_ID", vn = "SHEET_TABLE_THEME_PANEL", bt = "table-custom-", Zr = "table-default-", ve = "rgb(255, 255, 255)", X = "none", Je = "1px solid rgb(var(--grey-200))";
 function ae({ ref: r, ...e }) {
   const { icon: t, id: n, className: i, extend: a, ...s } = e, c = `univerjs-icon univerjs-icon-${n} ${i || ""}`.trim(), u = $r(`_${Yr()}`);
   return gn(t, `${n}`, {
@@ -105,7 +105,7 @@ const Qr = {
   }));
 });
 bn.displayName = "AscendingIcon";
-const zr = {
+const Gr = {
   tag: "svg",
   attrs: {
     xmlns: "http://www.w3.org/2000/svg",
@@ -150,11 +150,11 @@ const zr = {
   return ie(ae, Object.assign({}, e, {
     id: "delete-icon",
     ref: t,
-    icon: zr
+    icon: Gr
   }));
 });
 mn.displayName = "DeleteIcon";
-const Gr = {
+const Xr = {
   tag: "svg",
   attrs: {
     xmlns: "http://www.w3.org/2000/svg",
@@ -194,11 +194,11 @@ const Gr = {
   return ie(ae, Object.assign({}, e, {
     id: "descending-icon",
     ref: t,
-    icon: Gr
+    icon: Xr
   }));
 });
 pn.displayName = "DescendingIcon";
-const Xr = {
+const zr = {
   tag: "svg",
   attrs: {
     xmlns: "http://www.w3.org/2000/svg",
@@ -218,7 +218,7 @@ const Xr = {
   return ie(ae, Object.assign({}, e, {
     id: "dropdown-icon",
     ref: t,
-    icon: Xr
+    icon: zr
   }));
 });
 je.displayName = "DropdownIcon";
@@ -473,12 +473,12 @@ Ee = ii([
   We(0, N(re)),
   We(1, N(jn)),
   We(2, N(pe)),
-  We(3, ne),
-  We(4, N(te))
+  We(3, te),
+  We(4, N(ne))
 ], Ee);
 var j = /* @__PURE__ */ ((r) => (r.DatePicker = "DatePicker", r.DateRange = "DateRange", r.Input = "Input", r.Inputs = "Inputs", r.Select = "Select", r.None = "None", r))(j || {});
 function ai(r) {
-  const t = r.get(te).t;
+  const t = r.get(ne).t;
   return [
     {
       value: F.String,
@@ -659,7 +659,7 @@ function ai(r) {
 function si(r, e) {
   if (!e)
     return [];
-  const n = r.get(te).t;
+  const n = r.get(ne).t;
   switch (e) {
     case o.Quarter:
       return [
@@ -832,7 +832,7 @@ function li(r) {
 }
 const ci = (r) => {
   var w, S, E, C, $, I, B, R;
-  const { conditionInfo: e, onChange: t } = r, n = M(te), [i, a] = q(!1), s = M(ke), c = ai(s), u = (g, x, y) => {
+  const { conditionInfo: e, onChange: t } = r, n = M(ne), [i, a] = q(!1), s = M(ke), c = ai(s), u = (g, x, y) => {
     t({
       type: x != null ? x : e.type,
       compare: y != null ? y : e.compare,
@@ -960,7 +960,7 @@ const ci = (r) => {
   }), e;
 };
 function di(r) {
-  const { unitId: e, tableId: t, subUnitId: n, columnIndex: i, checkedItemSet: a, setCheckedItemSet: s, tableFilter: c } = r, u = M(te), h = M(Ee), { data: d, itemsCountMap: v, allItemsCount: f } = h.getTableFilterItems(e, n, t, i), [w, S] = q(c === void 0 ? !0 : a.size === v.size), [E, C] = q(w ? f : ui(v)), $ = !w && a.size > 0, [I, B] = q(""), R = an(() => I ? d.filter((m) => String(m.title).toLowerCase().includes(I.toLowerCase())) : d, [I, d]), g = Dt(() => {
+  const { unitId: e, tableId: t, subUnitId: n, columnIndex: i, checkedItemSet: a, setCheckedItemSet: s, tableFilter: c } = r, u = M(ne), h = M(Ee), { data: d, itemsCountMap: v, allItemsCount: f } = h.getTableFilterItems(e, n, t, i), [w, S] = q(c === void 0 ? !0 : a.size === v.size), [E, C] = q(w ? f : ui(v)), $ = !w && a.size > 0, [I, B] = q(""), R = an(() => I ? d.filter((m) => String(m.title).toLowerCase().includes(I.toLowerCase())) : d, [I, d]), g = Dt(() => {
     w ? (a.clear(), s(new Set(a)), S(!1)) : (R.forEach((m) => {
       a.add(m.title);
     }), s(new Set(a)), S(!0));
@@ -1031,13 +1031,13 @@ function di(r) {
 }
 function hi() {
   var de;
-  const r = M(te), e = vi(r), t = M(Ee), n = M(re), i = M(ne), a = M(jt), s = M($e), c = s.getCurrentTableFilterInfo(), u = t.getTableFilterPanelInitProps(c.unitId, c.subUnitId, c.tableId, c.column), { unitId: h, subUnitId: d, tableId: v, tableFilter: f, currentFilterBy: w, columnIndex: S } = u, { data: E } = t.getTableFilterItems(h, d, v, S), C = t.getTableFilterCheckedItems(h, v, S), [$, I] = q(new Set(C)), [B, R] = q(w || me.Items), [g, x] = q(() => {
+  const r = M(ne), e = vi(r), t = M(Ee), n = M(re), i = M(te), a = M(jt), s = M($e), c = s.getCurrentTableFilterInfo(), u = t.getTableFilterPanelInitProps(c.unitId, c.subUnitId, c.tableId, c.column), { unitId: h, subUnitId: d, tableId: v, tableFilter: f, currentFilterBy: w, columnIndex: S } = u, { data: E } = t.getTableFilterItems(h, d, v, S), C = t.getTableFilterCheckedItems(h, v, S), [$, I] = q(new Set(C)), [B, R] = q(w || me.Items), [g, x] = q(() => {
     const b = u.tableFilter;
     return li(b);
   }), y = n.getTable(h, v);
   if (!y) return null;
   const m = y.getTableFilters(), O = m.getSortState();
-  O.columnIndex === S && (O.sortState, Xe.Asc), O.columnIndex === S && (O.sortState, Xe.Desc);
+  O.columnIndex === S && (O.sortState, ze.Asc), O.columnIndex === S && (O.sortState, ze.Desc);
   const L = () => {
     s.closeFilterPanel();
   }, Y = () => {
@@ -1050,8 +1050,8 @@ function hi() {
       range: P,
       orderRules: [{ colIndex: S + P.startColumn, type: b ? Vt.ASC : Vt.DESC }],
       hasTitle: !1
-    }), m.setSortState(S, b ? Xe.Asc : Xe.Desc), L();
-  }, z = () => {
+    }), m.setSortState(S, b ? ze.Asc : ze.Desc), L();
+  }, G = () => {
     if (B === me.Items) {
       const b = [];
       for (const Q of E)
@@ -1115,7 +1115,7 @@ function hi() {
             onChange: (b) => R(b)
           }
         ) }),
-        /* @__PURE__ */ l("div", { className: "univer-z-10 univer-h-60", children: /* @__PURE__ */ l("div", { className: "univer-mt-3 univer-size-full", children: B === me.Items ? /* @__PURE__ */ l(
+        /* @__PURE__ */ l("div", { className: "univer-z-10 univer-h-60", children: /* @__PURE__ */ l("div", { className: "univer-mt-3 univer-h-full univer-w-full", children: B === me.Items ? /* @__PURE__ */ l(
           di,
           {
             tableFilter: f,
@@ -1153,7 +1153,7 @@ function hi() {
               ),
               /* @__PURE__ */ T("div", { children: [
                 /* @__PURE__ */ l(_e, { className: "univer-mr-2", onClick: Y, children: r.t("sheets-table.filter.cancel") }),
-                /* @__PURE__ */ l(_e, { variant: "primary", onClick: z, children: r.t("sheets-table.filter.confirm") })
+                /* @__PURE__ */ l(_e, { variant: "primary", onClick: G, children: r.t("sheets-table.filter.confirm") })
               ] })
             ]
           }
@@ -1245,7 +1245,7 @@ const Ct = {
   id: "sheet.operation.open-table-selector",
   async handler(r) {
     var w;
-    const e = r.get(pe), t = r.get(ne), n = ct(e);
+    const e = r.get(pe), t = r.get(te), n = ct(e);
     if (!n)
       return !1;
     const { unitId: i, subUnitId: a, worksheet: s } = n, u = r.get(ut).getCurrentLastSelection(), h = (w = u == null ? void 0 : u.range) != null ? w : { startRow: 0, endRow: 0, startColumn: 0, endColumn: 0 }, v = kr(u) ? Pr(h, { up: !0, left: !0, right: !0, down: !0 }, s) : h, f = await Tn(r, i, a, v);
@@ -1253,7 +1253,7 @@ const Ct = {
   }
 };
 async function Tn(r, e, t, n, i) {
-  const a = r.get(nn), s = r.get(te);
+  const a = r.get(nn), s = r.get(ne);
   return new Promise((c) => {
     const u = {
       unitId: e,
@@ -1308,18 +1308,18 @@ let Ie = class extends Le {
       this._commandService.onCommandExecuted((e) => {
         if (e.id === ln.id) {
           const t = e.params, { styleName: n } = t;
-          n.startsWith(zn) && this._refreshTable.next(Math.random());
+          n.startsWith(Gn) && this._refreshTable.next(Math.random());
         }
       })
     );
   }
 };
 Ie = pi([
-  fi(0, N(ne))
+  fi(0, N(te))
 ], Ie);
 const Ci = () => {
   var fe, de;
-  const [r, e] = q(""), [t, n] = q(""), i = M(cr), [a, s] = q({}), c = M(ke), u = M(it), h = Te(u.anchorPosition$), d = M(ne), v = M(pe), f = M(cn), w = Te(f.unitPermissionInitStateChange$, !1), S = M(re), E = M(un), C = M(Ie), $ = Te(C.refreshTable$), I = M(te), B = M(ut), R = Te(B.selectionChanged$, [{ range: Zt(0, 0), primary: null }]), [, g] = q(Math.random()), y = M(Yt).getConfig(wn), m = (fe = y == null ? void 0 : y.anchorHeight) != null ? fe : 24, O = (de = y == null ? void 0 : y.anchorBackgroundColor) != null ? de : "rgb(53,91,183)", L = (b, P) => {
+  const [r, e] = q(""), [t, n] = q(""), i = M(cr), [a, s] = q({}), c = M(ke), u = M(it), h = Te(u.anchorPosition$), d = M(te), v = M(pe), f = M(cn), w = Te(f.unitPermissionInitStateChange$, !1), S = M(re), E = M(un), C = M(Ie), $ = Te(C.refreshTable$), I = M(ne), B = M(ut), R = Te(B.selectionChanged$, [{ range: Zt(0, 0), primary: null }]), [, g] = q(Math.random()), y = M(Yt).getConfig(wn), m = (fe = y == null ? void 0 : y.anchorHeight) != null ? fe : 24, O = (de = y == null ? void 0 : y.anchorBackgroundColor) != null ? de : "rgb(53,91,183)", L = (b, P) => {
     s((A) => ({
       ...A,
       [b]: P
@@ -1331,7 +1331,7 @@ const Ci = () => {
     return null;
   const Y = ct(v);
   if (!Y) return null;
-  const { unitId: V, subUnitId: z } = Y, ce = (b, P) => {
+  const { unitId: V, subUnitId: G } = Y, ce = (b, P) => {
     var Q;
     if (((Q = S.getTableById(V, b)) == null ? void 0 : Q.getDisplayName()) === P) {
       e(""), n("");
@@ -1345,7 +1345,7 @@ const Ci = () => {
   }, ue = async (b) => {
     const P = S.getTableById(V, b);
     if (!P) return;
-    const A = P.getRange(), Q = await Tn(c, V, z, A, b);
+    const A = P.getRange(), Q = await Tn(c, V, G, A, b);
     Q && d.executeCommand(ft.id, {
       tableId: b,
       unitId: V,
@@ -1354,18 +1354,18 @@ const Ci = () => {
       }
     });
   };
-  return w ? /* @__PURE__ */ l("div", { className: "univer-absolute univer-z-50 univer-size-0", children: h.map((b) => {
-    var Oe, De, p, _, X, K, se;
+  return w ? /* @__PURE__ */ l("div", { className: "univer-absolute univer-z-50 univer-h-0 univer-w-0", children: h.map((b) => {
+    var Oe, De, p, _, z, K, se;
     const P = S.getTableById(V, b.tableId);
     if (!P) return null;
-    const A = E.getRangeThemeStyle(V, P.getTableStyleId()), Q = (p = (De = (Oe = A == null ? void 0 : A.getHeaderRowStyle()) == null ? void 0 : Oe.bg) == null ? void 0 : De.rgb) != null ? p : O, Qe = (K = (X = (_ = A == null ? void 0 : A.getHeaderRowStyle()) == null ? void 0 : _.cl) == null ? void 0 : X.rgb) != null ? K : "rgb(255, 255, 255)", ze = P.getRange();
+    const A = E.getRangeThemeStyle(V, P.getTableStyleId()), Q = (p = (De = (Oe = A == null ? void 0 : A.getHeaderRowStyle()) == null ? void 0 : Oe.bg) == null ? void 0 : De.rgb) != null ? p : O, Qe = (K = (z = (_ = A == null ? void 0 : A.getHeaderRowStyle()) == null ? void 0 : _.cl) == null ? void 0 : z.rgb) != null ? K : "rgb(255, 255, 255)", Ge = P.getRange();
     if (!(R != null && R.length))
       return null;
-    const Ge = R[R.length - 1].range, Pe = !be.intersects(ze, Ge) && b.y <= 20;
+    const Xe = R[R.length - 1].range, Pe = !be.intersects(Ge, Xe) && b.y <= 20;
     return /* @__PURE__ */ T(
       "div",
       {
-        className: D("univer-shadow-xs univer-absolute univer-box-border univer-cursor-pointer univer-items-center univer-rounded-xl univer-px-2", H, {
+        className: D("univer-shadow-xs univer-absolute univer-box-border univer-cursor-pointer univer-items-center univer-rounded-xl univer-pl-2 univer-pr-2", H, {
           "univer-flex": !Pe,
           "univer-hidden": Pe
         }),
@@ -1396,11 +1396,11 @@ const Ci = () => {
             Ne,
             {
               align: "start",
-              overlay: /* @__PURE__ */ T("div", { className: "univer-py-2", children: [
+              overlay: /* @__PURE__ */ T("div", { className: "univer-pb-2 univer-pt-2", children: [
                 /* @__PURE__ */ T(
                   "div",
                   {
-                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
+                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm hover:univer-bg-gray-200",
                     onClick: () => {
                       e(b.tableId), n(b.tableName);
                     },
@@ -1413,14 +1413,14 @@ const Ci = () => {
                 /* @__PURE__ */ l(
                   "div",
                   {
-                    className: "univer-my-1 univer-h-px univer-w-full univer-bg-gray-200"
+                    className: "univer-mb-1 univer-mt-1 univer-h-px univer-w-full univer-bg-gray-200"
                   }
                 ),
                 /* @__PURE__ */ T(
                   "div",
                   {
                     onClick: () => ue(b.tableId),
-                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
+                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm hover:univer-bg-gray-200",
                     children: [
                       /* @__PURE__ */ l(fn, {}),
                       I.t("sheets-table.updateRange")
@@ -1430,7 +1430,7 @@ const Ci = () => {
                 /* @__PURE__ */ T(
                   "div",
                   {
-                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
+                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-gap-2 univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm hover:univer-bg-gray-200",
                     onClick: () => {
                       L(b.tableId, !1);
                       const W = S.getTableById(V, b.tableId);
@@ -1442,7 +1442,7 @@ const Ci = () => {
                           label: vn,
                           oldConfig: Ce,
                           unitId: V,
-                          subUnitId: z,
+                          subUnitId: G,
                           tableId: b.tableId
                         },
                         width: 330
@@ -1463,17 +1463,17 @@ const Ci = () => {
                 /* @__PURE__ */ l(
                   "div",
                   {
-                    className: "univer-my-1 univer-h-px univer-w-full univer-bg-gray-200"
+                    className: "univer-mb-1 univer-mt-1 univer-h-px univer-w-full univer-bg-gray-200"
                   }
                 ),
                 /* @__PURE__ */ T(
                   "div",
                   {
-                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-px-2 univer-py-1 univer-text-sm hover:univer-bg-gray-200",
+                    className: "univer-flex univer-min-w-32 univer-cursor-pointer univer-items-center univer-pb-1 univer-pl-2 univer-pr-2 univer-pt-1 univer-text-sm hover:univer-bg-gray-200",
                     onClick: () => {
-                      L(b.tableId, !1), d.executeCommand(Gn.id, {
+                      L(b.tableId, !1), d.executeCommand(Xn.id, {
                         tableId: b.tableId,
-                        subUnitId: z,
+                        subUnitId: G,
                         unitId: V
                       });
                     },
@@ -1514,7 +1514,7 @@ let it = class extends Le {
   }
   _initUI() {
     this.disposeWithMe(
-      this._uiPartsService.registerComponent(ur.CONTENT, () => dr(Ci, this._injector))
+      this._uiPartsService.registerComponent(dr.CONTENT, () => hr(Ci, this._injector))
     );
   }
   _initListener() {
@@ -1580,10 +1580,10 @@ let it = class extends Le {
 it = _i([
   ee(1, N(ke)),
   ee(2, N(lt)),
-  ee(3, zt),
-  ee(4, ne),
+  ee(3, Gt),
+  ee(4, te),
   ee(5, pe),
-  ee(6, hr),
+  ee(6, ur),
   ee(7, N(re)),
   ee(8, N(nr)),
   ee(9, N(cn)),
@@ -1702,7 +1702,7 @@ let St = class extends Zn {
 };
 St = xi([
   mt(2, wt),
-  mt(3, ne),
+  mt(3, te),
   mt(4, N(kn))
 ], St);
 var Ni = Object.getOwnPropertyDescriptor, Ei = (r, e, t, n) => {
@@ -1789,7 +1789,7 @@ let _t = class extends Qt {
           const C = `sheets-table-filter-button-${f}-${E}`, $ = sr(f, E, c, i), I = u.getCellStyle(f, E), B = (I == null ? void 0 : I.vt) || rt.BOTTOM, { startX: R, startY: g, endX: x, endY: y } = $, m = x - R, O = y - g;
           if (O <= qe || m <= qe)
             continue;
-          const L = d[E - w], Y = x - oe - qe, V = Li(g, y, O, B), z = {
+          const L = d[E - w], Y = x - oe - qe, V = Li(g, y, O, B), G = {
             left: Y,
             top: V,
             height: oe,
@@ -1798,7 +1798,7 @@ let _t = class extends Qt {
             cellHeight: O,
             cellWidth: m,
             filterParams: { unitId: n, subUnitId: a, row: f, col: E, buttonState: L, tableId: v }
-          }, ce = this._injector.createInstance(St, C, z);
+          }, ce = this._injector.createInstance(St, C, G);
           this._tableFilterButtonShapes.push(ce);
         }
       }
@@ -1829,10 +1829,10 @@ _t = Ei([
   Ze(2, N(lt)),
   Ze(3, N(dn)),
   Ze(4, N(re)),
-  Ze(5, ne)
+  Ze(5, te)
 ], _t);
 const ki = (r) => {
-  const { unitId: e, subUnitId: t, range: n, onCancel: i, onConfirm: a, tableId: s } = r, c = M(re), [u, h] = q(n), [d, v] = q(""), f = M(te), w = M(pe);
+  const { unitId: e, subUnitId: t, range: n, onCancel: i, onConfirm: a, tableId: s } = r, c = M(re), [u, h] = q(n), [d, v] = q(""), f = M(ne), w = M(pe);
   return /* @__PURE__ */ T(yt, { children: [
     /* @__PURE__ */ l(
       Hr,
@@ -1908,14 +1908,14 @@ const ki = (r) => {
     ] })
   ] });
 }, Pi = (r) => {
-  var P, A, Q, dt, Qe, ze, ht, Ge, vt, Pe, Oe, De;
-  const { unitId: e, subUnitId: t, tableId: n } = r, i = M(ne), a = M(te), s = M(re), c = s.getTableById(e, n), u = M(un), h = M(Ie), d = Te(u.rangeThemeMapChange$), v = Te(h.refreshTable$), f = M(On), [, w] = q(Math.random()), S = Te(s.tableThemeChanged$, {
+  var P, A, Q, dt, Qe, Ge, ht, Xe, vt, Pe, Oe, De;
+  const { unitId: e, subUnitId: t, tableId: n } = r, i = M(te), a = M(ne), s = M(re), c = s.getTableById(e, n), u = M(un), h = M(Ie), d = Te(u.rangeThemeMapChange$), v = Te(h.refreshTable$), f = M(On), [, w] = q(Math.random()), S = Te(s.tableThemeChanged$, {
     theme: c == null ? void 0 : c.getTableStyleId(),
     oldTheme: c == null ? void 0 : c.getTableStyleId(),
     unitId: e,
     subUnitId: t,
     tableId: n
-  }), E = u.getRegisteredRangeThemes().filter((p) => p == null ? void 0 : p.startsWith(Zr)), C = u.getALLRegisteredTheme(e).filter((p) => p == null ? void 0 : p.startsWith(bt)), $ = c == null ? void 0 : c.getTableStyleId(), I = C.find((p) => p === $), B = I || C[0], R = u.getCustomRangeThemeStyle(e, B), g = (Q = (A = (P = R == null ? void 0 : R.getHeaderRowStyle()) == null ? void 0 : P.bg) == null ? void 0 : A.rgb) != null ? Q : ve, x = (ze = (Qe = (dt = R == null ? void 0 : R.getFirstRowStyle()) == null ? void 0 : dt.bg) == null ? void 0 : Qe.rgb) != null ? ze : ve, y = (vt = (Ge = (ht = R == null ? void 0 : R.getSecondRowStyle()) == null ? void 0 : ht.bg) == null ? void 0 : Ge.rgb) != null ? vt : ve, m = (De = (Oe = (Pe = R == null ? void 0 : R.getLastRowStyle()) == null ? void 0 : Pe.bg) == null ? void 0 : Oe.rgb) != null ? De : ve, [O, L] = q(null), Y = (p) => {
+  }), E = u.getRegisteredRangeThemes().filter((p) => p == null ? void 0 : p.startsWith(Zr)), C = u.getALLRegisteredTheme(e).filter((p) => p == null ? void 0 : p.startsWith(bt)), $ = c == null ? void 0 : c.getTableStyleId(), I = C.find((p) => p === $), B = I || C[0], R = u.getCustomRangeThemeStyle(e, B), g = (Q = (A = (P = R == null ? void 0 : R.getHeaderRowStyle()) == null ? void 0 : P.bg) == null ? void 0 : A.rgb) != null ? Q : ve, x = (Ge = (Qe = (dt = R == null ? void 0 : R.getFirstRowStyle()) == null ? void 0 : dt.bg) == null ? void 0 : Qe.rgb) != null ? Ge : ve, y = (vt = (Xe = (ht = R == null ? void 0 : R.getSecondRowStyle()) == null ? void 0 : ht.bg) == null ? void 0 : Xe.rgb) != null ? vt : ve, m = (De = (Oe = (Pe = R == null ? void 0 : R.getLastRowStyle()) == null ? void 0 : Pe.bg) == null ? void 0 : Oe.rgb) != null ? De : ve, [O, L] = q(null), Y = (p) => {
     i.executeCommand(ft.id, {
       unitId: e,
       tableId: n,
@@ -1932,13 +1932,13 @@ const ki = (r) => {
       const K = Number(p.split("-")[2]);
       _ = `${bt}${K + 1}`;
     }
-    const X = new Br(_, { ...Xn });
+    const z = new Br(_, { ...zn });
     i.executeCommand(Kn.id, {
       unitId: e,
       tableId: n,
-      themeStyle: X
+      themeStyle: z
     });
-  }, z = (p, _) => {
+  }, G = (p, _) => {
     i.executeCommand(ln.id, {
       unitId: e,
       subUnitId: t,
@@ -1960,7 +1960,7 @@ const ki = (r) => {
     /* @__PURE__ */ l("h5", { children: a.t("sheets-table.defaultStyle") }),
     /* @__PURE__ */ l("div", { className: "univer-flex univer-gap-2", children: E.map((p) => {
       var Ce, Se, Be, Fe, Ve, He, Ae, Ue;
-      const _ = u.getDefaultRangeThemeStyle(p), X = ((Se = (Ce = _ == null ? void 0 : _.getHeaderRowStyle()) == null ? void 0 : Ce.bg) == null ? void 0 : Se.rgb) || ve, K = ((Fe = (Be = _ == null ? void 0 : _.getFirstRowStyle()) == null ? void 0 : Be.bg) == null ? void 0 : Fe.rgb) || ve, se = ((He = (Ve = _ == null ? void 0 : _.getSecondRowStyle()) == null ? void 0 : Ve.bg) == null ? void 0 : He.rgb) || ve, W = ((Ue = (Ae = _ == null ? void 0 : _.getLastRowStyle()) == null ? void 0 : Ae.bg) == null ? void 0 : Ue.rgb) || ve;
+      const _ = u.getDefaultRangeThemeStyle(p), z = ((Se = (Ce = _ == null ? void 0 : _.getHeaderRowStyle()) == null ? void 0 : Ce.bg) == null ? void 0 : Se.rgb) || ve, K = ((Fe = (Be = _ == null ? void 0 : _.getFirstRowStyle()) == null ? void 0 : Be.bg) == null ? void 0 : Fe.rgb) || ve, se = ((He = (Ve = _ == null ? void 0 : _.getSecondRowStyle()) == null ? void 0 : Ve.bg) == null ? void 0 : He.rgb) || ve, W = ((Ue = (Ae = _ == null ? void 0 : _.getLastRowStyle()) == null ? void 0 : Ae.bg) == null ? void 0 : Ue.rgb) || ve;
       return /* @__PURE__ */ T(
         "div",
         {
@@ -1969,10 +1969,10 @@ const ki = (r) => {
           }),
           onClick: () => Y(p),
           children: [
-            /* @__PURE__ */ l("div", { style: { background: X, border: `${G}` } }),
-            /* @__PURE__ */ l("div", { style: { background: K, border: `${G}` } }),
-            /* @__PURE__ */ l("div", { style: { background: se, border: `${G}` } }),
-            /* @__PURE__ */ l("div", { style: { background: W, border: `${G}` } })
+            /* @__PURE__ */ l("div", { style: { background: z, border: `${X}` } }),
+            /* @__PURE__ */ l("div", { style: { background: K, border: `${X}` } }),
+            /* @__PURE__ */ l("div", { style: { background: se, border: `${X}` } }),
+            /* @__PURE__ */ l("div", { style: { background: W, border: `${X}` } })
           ]
         },
         p
@@ -1991,7 +1991,7 @@ const ki = (r) => {
         ),
         C.map((p) => {
           var Ce, Se, Be, Fe, Ve, He, Ae, Ue;
-          const _ = u.getCustomRangeThemeStyle(e, p), X = (Se = (Ce = _ == null ? void 0 : _.getHeaderRowStyle()) == null ? void 0 : Ce.bg) == null ? void 0 : Se.rgb, K = (Fe = (Be = _ == null ? void 0 : _.getFirstRowStyle()) == null ? void 0 : Be.bg) == null ? void 0 : Fe.rgb, se = (He = (Ve = _ == null ? void 0 : _.getSecondRowStyle()) == null ? void 0 : Ve.bg) == null ? void 0 : He.rgb, W = (Ue = (Ae = _ == null ? void 0 : _.getLastRowStyle()) == null ? void 0 : Ae.bg) == null ? void 0 : Ue.rgb;
+          const _ = u.getCustomRangeThemeStyle(e, p), z = (Se = (Ce = _ == null ? void 0 : _.getHeaderRowStyle()) == null ? void 0 : Ce.bg) == null ? void 0 : Se.rgb, K = (Fe = (Be = _ == null ? void 0 : _.getFirstRowStyle()) == null ? void 0 : Be.bg) == null ? void 0 : Fe.rgb, se = (He = (Ve = _ == null ? void 0 : _.getSecondRowStyle()) == null ? void 0 : Ve.bg) == null ? void 0 : He.rgb, W = (Ue = (Ae = _ == null ? void 0 : _.getLastRowStyle()) == null ? void 0 : Ae.bg) == null ? void 0 : Ue.rgb;
           return /* @__PURE__ */ T(
             "div",
             {
@@ -2002,14 +2002,14 @@ const ki = (r) => {
               onMouseEnter: () => L(p),
               onMouseLeave: () => L(null),
               children: [
-                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: X != null ? X : G, border: `${X ? G : Je}` } }),
-                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: K != null ? K : G, border: `${K ? G : Je}` } }),
-                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: se != null ? se : G, border: `${se ? G : Je}` } }),
-                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: W != null ? W : G, border: `${W ? G : Je}` } }),
+                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: z != null ? z : X, border: `${z ? X : Je}` } }),
+                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: K != null ? K : X, border: `${K ? X : Je}` } }),
+                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: se != null ? se : X, border: `${se ? X : Je}` } }),
+                /* @__PURE__ */ l("div", { className: "univer-box-border univer-h-2.5", style: { background: W != null ? W : X, border: `${W ? X : Je}` } }),
                 /* @__PURE__ */ l(
                   "div",
                   {
-                    className: "univer-absolute univer-right-[-3px] univer-top-[-3px] univer-size-3 univer-rounded-md univer-bg-gray-200 univer-text-center univer-text-xs univer-leading-[10px]",
+                    className: "univer-absolute univer-right-[-3px] univer-top-[-3px] univer-h-3 univer-w-3 univer-rounded-md univer-bg-gray-200 univer-text-center univer-text-xs univer-leading-[10px]",
                     style: { display: O === p ? "block" : "none" },
                     onClick: (Nn) => {
                       Nn.stopPropagation(), ce(p);
@@ -2056,7 +2056,7 @@ const ki = (r) => {
                           rgb: new he(p).isDark() ? "#fff" : "#000"
                         }
                       });
-                      z(c.getTableStyleId(), { headerRowStyle: _ });
+                      G(c.getTableStyleId(), { headerRowStyle: _ });
                     }
                   }
                 ) }),
@@ -2068,7 +2068,7 @@ const ki = (r) => {
                       /* @__PURE__ */ l(
                         "div",
                         {
-                          className: D("univer-size-4 univer-rounded-lg univer-bg-gray-400", H, {
+                          className: D("univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400", H, {
                             "univer-text-white": ue,
                             "univer-text-gray-900": !ue
                           }),
@@ -2077,7 +2077,7 @@ const ki = (r) => {
                           }
                         }
                       ),
-                      /* @__PURE__ */ l(je, { className: "univer-size-2" })
+                      /* @__PURE__ */ l(je, { className: "univer-h-2 univer-w-2" })
                     ]
                   }
                 )
@@ -2106,7 +2106,7 @@ const ki = (r) => {
                   {
                     value: x,
                     onChange: (p) => {
-                      z(c.getTableStyleId(), {
+                      G(c.getTableStyleId(), {
                         firstRowStyle: {
                           bg: {
                             rgb: p
@@ -2127,11 +2127,11 @@ const ki = (r) => {
                       /* @__PURE__ */ l(
                         "div",
                         {
-                          className: D("univer-size-4 univer-rounded-lg univer-bg-gray-400", H),
+                          className: D("univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400", H),
                           style: { background: x }
                         }
                       ),
-                      /* @__PURE__ */ l(je, { className: "univer-size-2" })
+                      /* @__PURE__ */ l(je, { className: "univer-h-2 univer-w-2" })
                     ]
                   }
                 )
@@ -2159,7 +2159,7 @@ const ki = (r) => {
                   Ke,
                   {
                     value: y,
-                    onChange: (p) => z(c.getTableStyleId(), {
+                    onChange: (p) => G(c.getTableStyleId(), {
                       secondRowStyle: {
                         bg: {
                           rgb: p
@@ -2179,11 +2179,11 @@ const ki = (r) => {
                       /* @__PURE__ */ l(
                         "div",
                         {
-                          className: D("univer-size-4 univer-rounded-lg univer-bg-gray-400", H),
+                          className: D("univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400", H),
                           style: { background: y }
                         }
                       ),
-                      /* @__PURE__ */ l(je, { className: "univer-size-2" })
+                      /* @__PURE__ */ l(je, { className: "univer-h-2 univer-w-2" })
                     ]
                   }
                 )
@@ -2220,7 +2220,7 @@ const ki = (r) => {
                           rgb: new he(p).isDark() ? "#fff" : "#000"
                         }
                       });
-                      z(c.getTableStyleId(), { lastRowStyle: _ });
+                      G(c.getTableStyleId(), { lastRowStyle: _ });
                     }
                   }
                 ) }),
@@ -2232,11 +2232,11 @@ const ki = (r) => {
                       /* @__PURE__ */ l(
                         "div",
                         {
-                          className: D("univer-size-4 univer-rounded-lg univer-bg-gray-400", H),
+                          className: D("univer-h-4 univer-w-4 univer-rounded-lg univer-bg-gray-400", H),
                           style: { background: m }
                         }
                       ),
-                      /* @__PURE__ */ l(je, { className: "univer-size-2" })
+                      /* @__PURE__ */ l(je, { className: "univer-h-2 univer-w-2" })
                     ]
                   }
                 )
@@ -2294,7 +2294,7 @@ function Vi(r) {
 }
 function Hi(r) {
   return {
-    id: Xt.id,
+    id: zt.id,
     type: ye.BUTTON,
     title: "sheets-table.remove.row",
     hidden$: Mn(r)
@@ -2302,7 +2302,7 @@ function Hi(r) {
 }
 function Ai(r) {
   return {
-    id: Gt.id,
+    id: Xt.id,
     title: "sheets-table.remove.col",
     type: ye.BUTTON
   };
@@ -2362,11 +2362,11 @@ const Ui = {
       [yn]: {
         order: 6,
         menuItemFactory: Bi,
-        [Xt.id]: {
+        [zt.id]: {
           order: 1,
           menuItemFactory: Hi
         },
-        [Gt.id]: {
+        [Xt.id]: {
           order: 2,
           menuItemFactory: Ai
         }
@@ -2472,14 +2472,14 @@ let st = class extends Le {
                 undos: [],
                 redos: [
                   {
-                    id: Bt.id,
+                    id: Ft.id,
                     params: {
                       unitId: i,
                       subUnitId: a,
                       selections: [
                         {
                           range: h,
-                          primary: Ft(h, s)
+                          primary: Bt(h, s)
                         }
                       ]
                     }
@@ -2489,14 +2489,14 @@ let st = class extends Le {
                 undos: [],
                 redos: [
                   {
-                    id: Bt.id,
+                    id: Ft.id,
                     params: {
                       unitId: i,
                       subUnitId: a,
                       selections: [
                         {
                           range: d,
-                          primary: Ft(d, s)
+                          primary: Bt(d, s)
                         }
                       ]
                     }
@@ -2516,11 +2516,11 @@ st = Qi([
   pt(1, N(pe)),
   pt(2, N(re))
 ], st);
-var zi = Object.defineProperty, Gi = Object.getOwnPropertyDescriptor, Xi = (r, e, t) => e in r ? zi(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Ki = (r, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? Gi(e, t) : e, a = r.length - 1, s; a >= 0; a--)
+var Gi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, zi = (r, e, t) => e in r ? Gi(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t, Ki = (r, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? Xi(e, t) : e, a = r.length - 1, s; a >= 0; a--)
     (s = r[a]) && (i = s(i) || i);
   return i;
-}, nt = (r, e) => (t, n) => e(t, n, r), xn = (r, e, t) => Xi(r, typeof e != "symbol" ? e + "" : e, t);
+}, nt = (r, e) => (t, n) => e(t, n, r), xn = (r, e, t) => zi(r, typeof e != "symbol" ? e + "" : e, t);
 let ot = class extends Bn {
   constructor(r = At, e, t, n, i) {
     super(), this._config = r, this._injector = e, this._commandService = t, this._configService = n, this._renderManagerService = i;
@@ -2573,9 +2573,9 @@ xn(ot, "type", Ye.UNIVER_SHEET);
 ot = Ki([
   Dn(er),
   nt(1, N(ke)),
-  nt(2, N(ne)),
+  nt(2, N(te)),
   nt(3, Yt),
-  nt(4, zt)
+  nt(4, Gt)
 ], ot);
 export {
   ot as UniverSheetsTableUIPlugin