@univerjs/sheets-table-ui 0.20.0 → 0.20.1-insiders.20260418-3a69981

package/lib/cjs/index.js

@@ -1 +1,2569 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require(`@univerjs/core`),t=require(`@univerjs/engine-render`),n=require(`@univerjs/sheets-table`),r=require(`@univerjs/sheets-ui`),i=require(`@univerjs/ui`),a=require(`rxjs`),o=require(`@univerjs/design`),s=require(`@univerjs/icons`),c=require(`@univerjs/sheets`),l=require(`@univerjs/sheets-sort`),u=require(`react`),d=require(`react/jsx-runtime`),f=require(`@univerjs/engine-formula`),p=require(`@univerjs/sheets-formula-ui`);var m=`@univerjs/sheets-table-ui`,h=`0.20.0`;const g=`SHEETS_TABLE_FILTER_PANEL_OPENED_KEY`,_=`TABLE_TOOLBAR_BUTTON`,v=`TABLE_SELECTOR_DIALOG`,y=`SHEET_TABLE_THEME_PANEL`,b=`table-custom-`,x=`rgb(255, 255, 255)`,S=`none`,C=`1px solid rgb(var(--grey-200))`;let w=function(e){return e.Items=`items`,e.Condition=`condition`,e}({});function T(e){"@babel/helpers - typeof";return T=typeof Symbol==`function`&&typeof Symbol.iterator==`symbol`?function(e){return typeof e}:function(e){return e&&typeof Symbol==`function`&&e.constructor===Symbol&&e!==Symbol.prototype?`symbol`:typeof e},T(e)}function E(e,t){if(T(e)!=`object`||!e)return e;var n=e[Symbol.toPrimitive];if(n!==void 0){var r=n.call(e,t||`default`);if(T(r)!=`object`)return r;throw TypeError(`@@toPrimitive must return a primitive value.`)}return(t===`string`?String:Number)(e)}function D(e){var t=E(e,`string`);return T(t)==`symbol`?t:t+``}function O(e,t,n){return(t=D(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function k(e,t){return function(n,r){t(n,r,e)}}function A(e,t,n,r){var i=arguments.length,a=i<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,n):r,o;if(typeof Reflect==`object`&&typeof Reflect.decorate==`function`)a=Reflect.decorate(e,t,n,r);else for(var s=e.length-1;s>=0;s--)(o=e[s])&&(a=(i<3?o(a):i>3?o(t,n,a):o(t,n))||a);return i>3&&a&&Object.defineProperty(t,n,a),a}let j=class extends e.Disposable{constructor(e,t,n,r,i){super(),this._tableManager=e,this._sheetTableService=t,this._univerInstanceService=n,this._commandService=r,this._localeService=i,O(this,`_itemsCache`,new Map),this._registerTableFilterChangeEvent()}_registerTableFilterChangeEvent(){this._commandService.onCommandExecuted(t=>{if(t.id===c.SetRangeValuesMutation.id){let{unitId:n,subUnitId:r,cellValue:i}=t.params,a=this._tableManager.getTablesBySubunitId(n,r);if(!a.length)return;new e.ObjectMatrix(i).forValue((t,n,r)=>{let i=(0,e.cellToRange)(t,n),o=a.find(t=>{let n=t.getTableFilterRange();return e.Rectangle.intersects(n,i)});if(o){let e=n-o.getRange().startColumn;this._itemsCache.delete(o.getId()+e)}})}else if(t.id===n.SetSheetTableFilterCommand.id){let{unitId:e,tableId:n}=t.params,r=this._tableManager.getTable(e,n);if(!r)return;let i=r.getSubunitId();this._tableManager.getTablesBySubunitId(e,i).forEach(e=>{let t=e.getRange();for(let n=t.startColumn;n<=t.endColumn;n++)this._itemsCache.delete(e.getId()+n)})}})}getTableFilterPanelInitProps(e,t,r,i){let a=this._tableManager.getTable(e,r),o=a.getRange(),s=a.getTableFilterColumn(i-o.startColumn);return{unitId:e,subUnitId:t,tableFilter:s,currentFilterBy:(0,n.isConditionFilter)(s)?w.Condition:w.Items,tableId:r,columnIndex:i-o.startColumn}}getTableFilterCheckedItems(e,t,r){let i=this._tableManager.getTable(e,t),a=[];if(i){let e=i.getTableFilterColumn(r);e&&(0,n.isManualTableFilter)(e)&&a.push(...e.values)}return a}setTableFilter(e,t,r,i){if(!this._tableManager.getTable(e,t))return;let a={unitId:e,tableId:t,column:r,tableFilter:i};this._commandService.executeCommand(n.SetSheetTableFilterCommand.id,a)}getTableFilterItems(e,t,n,r){var i;if(this._itemsCache.has(n+r))return this._itemsCache.get(n+r)||{data:[],itemsCountMap:new Map,allItemsCount:0};let a=this._tableManager.getTable(e,n);if(!a)return{data:[],itemsCountMap:new Map,allItemsCount:0};let{startRow:o,endRow:s,startColumn:c}=a.getTableFilterRange(),l=c+r,u=(i=this._univerInstanceService.getUnit(e))==null?void 0:i.getSheetBySheetId(t);if(!u)return{data:[],itemsCountMap:new Map,allItemsCount:0};let d=[],f=new Map,p=0;for(let e=o;e<=s;e++){if(u.isRowFiltered(e))continue;let t=this._sheetTableService.getCellValueWithConditionType(u,e,l);t===void 0&&(t=this._localeService.t(`sheets-table.condition.empty`)),f.has(t)||d.push({title:t,key:`${l}_${e}`,leaf:!0}),p++,f.set(t,(f.get(t)||0)+1)}return this._itemsCache.set(n+r,{data:d,itemsCountMap:f,allItemsCount:p}),{data:d,itemsCountMap:f,allItemsCount:p}}};j=A([k(0,(0,e.Inject)(n.TableManager)),k(1,(0,e.Inject)(n.SheetTableService)),k(2,(0,e.Inject)(e.IUniverInstanceService)),k(3,e.ICommandService),k(4,(0,e.Inject)(e.LocaleService))],j);let M=function(e){return e.DatePicker=`DatePicker`,e.DateRange=`DateRange`,e.Input=`Input`,e.Inputs=`Inputs`,e.Select=`Select`,e.None=`None`,e}({});function N(t){let r=t.get(e.LocaleService).t;return[{value:n.TableConditionTypeEnum.String,label:r(`sheets-table.condition.${n.TableConditionTypeEnum.String}`),children:[{value:n.TableStringCompareTypeEnum.Equal,label:r(`sheets-table.string.compare.${n.TableStringCompareTypeEnum.Equal}`)},{value:n.TableStringCompareTypeEnum.NotEqual,label:r(`sheets-table.string.compare.${n.TableStringCompareTypeEnum.NotEqual}`)},{value:n.TableStringCompareTypeEnum.Contains,label:r(`sheets-table.string.compare.${n.TableStringCompareTypeEnum.Contains}`)},{value:n.TableStringCompareTypeEnum.NotContains,label:r(`sheets-table.string.compare.${n.TableStringCompareTypeEnum.NotContains}`)},{value:n.TableStringCompareTypeEnum.StartsWith,label:r(`sheets-table.string.compare.${n.TableStringCompareTypeEnum.StartsWith}`)},{value:n.TableStringCompareTypeEnum.EndsWith,label:r(`sheets-table.string.compare.${n.TableStringCompareTypeEnum.EndsWith}`)}]},{value:n.TableConditionTypeEnum.Number,label:r(`sheets-table.condition.${n.TableConditionTypeEnum.Number}`),children:[{value:n.TableNumberCompareTypeEnum.Equal,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.Equal}`)},{value:n.TableNumberCompareTypeEnum.NotEqual,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.NotEqual}`)},{value:n.TableNumberCompareTypeEnum.GreaterThan,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.GreaterThan}`)},{value:n.TableNumberCompareTypeEnum.GreaterThanOrEqual,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.GreaterThanOrEqual}`)},{value:n.TableNumberCompareTypeEnum.LessThan,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.LessThan}`)},{value:n.TableNumberCompareTypeEnum.LessThanOrEqual,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.LessThanOrEqual}`)},{value:n.TableNumberCompareTypeEnum.Between,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.Between}`)},{value:n.TableNumberCompareTypeEnum.NotBetween,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.NotBetween}`)},{value:n.TableNumberCompareTypeEnum.Above,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.Above}`)},{value:n.TableNumberCompareTypeEnum.Below,label:r(`sheets-table.number.compare.${n.TableNumberCompareTypeEnum.Below}`)}]},{value:n.TableConditionTypeEnum.Date,label:r(`sheets-table.condition.${n.TableConditionTypeEnum.Date}`),children:[{value:n.TableDateCompareTypeEnum.Equal,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Equal}`)},{value:n.TableDateCompareTypeEnum.NotEqual,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.NotEqual}`)},{value:n.TableDateCompareTypeEnum.After,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.After}`)},{value:n.TableDateCompareTypeEnum.AfterOrEqual,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.AfterOrEqual}`)},{value:n.TableDateCompareTypeEnum.Before,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Before}`)},{value:n.TableDateCompareTypeEnum.BeforeOrEqual,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.BeforeOrEqual}`)},{value:n.TableDateCompareTypeEnum.Between,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Between}`)},{value:n.TableDateCompareTypeEnum.NotBetween,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.NotBetween}`)},{value:n.TableDateCompareTypeEnum.Today,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Today}`)},{value:n.TableDateCompareTypeEnum.Yesterday,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Yesterday}`)},{value:n.TableDateCompareTypeEnum.Tomorrow,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Tomorrow}`)},{value:n.TableDateCompareTypeEnum.ThisWeek,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.ThisWeek}`)},{value:n.TableDateCompareTypeEnum.LastWeek,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.LastWeek}`)},{value:n.TableDateCompareTypeEnum.NextWeek,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.NextWeek}`)},{value:n.TableDateCompareTypeEnum.ThisMonth,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.ThisMonth}`)},{value:n.TableDateCompareTypeEnum.LastMonth,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.LastMonth}`)},{value:n.TableDateCompareTypeEnum.NextMonth,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.NextMonth}`)},{value:n.TableDateCompareTypeEnum.ThisYear,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.ThisYear}`)},{value:n.TableDateCompareTypeEnum.LastYear,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.LastYear}`)},{value:n.TableDateCompareTypeEnum.NextYear,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.NextYear}`)},{value:n.TableDateCompareTypeEnum.Quarter,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Quarter}`)},{value:n.TableDateCompareTypeEnum.Month,label:r(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Month}`)}]}]}function P(t,r){if(!r)return[];let i=t.get(e.LocaleService).t;switch(r){case n.TableDateCompareTypeEnum.Quarter:return[{value:n.TableDateCompareTypeEnum.Q1,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Q1}`)},{value:n.TableDateCompareTypeEnum.Q2,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Q2}`)},{value:n.TableDateCompareTypeEnum.Q3,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Q3}`)},{value:n.TableDateCompareTypeEnum.Q4,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.Q4}`)}];case n.TableDateCompareTypeEnum.Month:return[{value:n.TableDateCompareTypeEnum.M1,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M1}`)},{value:n.TableDateCompareTypeEnum.M2,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M2}`)},{value:n.TableDateCompareTypeEnum.M3,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M3}`)},{value:n.TableDateCompareTypeEnum.M4,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M4}`)},{value:n.TableDateCompareTypeEnum.M5,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M5}`)},{value:n.TableDateCompareTypeEnum.M6,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M6}`)},{value:n.TableDateCompareTypeEnum.M7,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M7}`)},{value:n.TableDateCompareTypeEnum.M8,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M8}`)},{value:n.TableDateCompareTypeEnum.M9,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M9}`)},{value:n.TableDateCompareTypeEnum.M10,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M10}`)},{value:n.TableDateCompareTypeEnum.M11,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M11}`)},{value:n.TableDateCompareTypeEnum.M12,label:i(`sheets-table.date.compare.${n.TableDateCompareTypeEnum.M12}`)}];default:return[]}}const F=new Set([n.TableDateCompareTypeEnum.Equal,n.TableDateCompareTypeEnum.NotEqual,n.TableDateCompareTypeEnum.After,n.TableDateCompareTypeEnum.AfterOrEqual,n.TableDateCompareTypeEnum.Before,n.TableDateCompareTypeEnum.BeforeOrEqual]);function I(e,t){return t?e===n.TableConditionTypeEnum.String?M.Input:e===n.TableConditionTypeEnum.Number?t===n.TableNumberCompareTypeEnum.Between||t===n.TableNumberCompareTypeEnum.NotBetween?M.Inputs:M.Input:e===n.TableConditionTypeEnum.Date?t===n.TableDateCompareTypeEnum.Between||t===n.TableDateCompareTypeEnum.NotBetween?M.DateRange:t===n.TableDateCompareTypeEnum.Quarter||t===n.TableDateCompareTypeEnum.Month?M.Select:F.has(t)?M.DatePicker:M.None:M.None:M.None}function ee(e){if(!e||e.filterType!==`condition`)return{type:n.TableConditionTypeEnum.String,compareType:n.TableStringCompareTypeEnum.Equal,info:{}};let t=e.filterInfo,{conditionType:r,compareType:i}=t;if(r===n.TableConditionTypeEnum.Date)if(i===n.TableDateCompareTypeEnum.Between||i===n.TableDateCompareTypeEnum.NotBetween){let e;return Array.isArray(t.expectedValue)&&(e=t.expectedValue.map(e=>typeof e==`string`?new Date(e):e)),{type:r,compare:i,info:{dateRange:e}}}else if(i===n.TableDateCompareTypeEnum.Today||i===n.TableDateCompareTypeEnum.Yesterday||i===n.TableDateCompareTypeEnum.Tomorrow||i===n.TableDateCompareTypeEnum.ThisWeek||i===n.TableDateCompareTypeEnum.LastWeek||i===n.TableDateCompareTypeEnum.NextWeek||i===n.TableDateCompareTypeEnum.ThisMonth||i===n.TableDateCompareTypeEnum.LastMonth||i===n.TableDateCompareTypeEnum.NextMonth||i===n.TableDateCompareTypeEnum.ThisYear||i===n.TableDateCompareTypeEnum.LastYear||i===n.TableDateCompareTypeEnum.NextYear)return{type:r,compare:i,info:{}};else if(F.has(i)){let e;if(typeof t.expectedValue==`string`)e=new Date(t.expectedValue);else if(Array.isArray(t.expectedValue))for(let e=0;e<t.expectedValue.length;e++)typeof t.expectedValue[e]==`string`&&(t.expectedValue[e]=new Date(t.expectedValue[e]));return{type:r,compare:i,info:{date:e}}}else if(new Set([n.TableDateCompareTypeEnum.Q1,n.TableDateCompareTypeEnum.Q2,n.TableDateCompareTypeEnum.Q3,n.TableDateCompareTypeEnum.Q4]).has(i))return{type:r,compare:n.TableDateCompareTypeEnum.Quarter,info:{dateSelect:t.compareType}};else return{type:r,compare:n.TableDateCompareTypeEnum.Month,info:{dateSelect:t.compareType}};else if(r===n.TableConditionTypeEnum.Number)return i===n.TableNumberCompareTypeEnum.Between||i===n.TableNumberCompareTypeEnum.NotBetween?{type:r,compare:i,info:{numberRange:t.expectedValue}}:{type:r,compare:i,info:{number:t.expectedValue}};else if(r===n.TableConditionTypeEnum.String)return{type:r,compare:i,info:{string:t.expectedValue}};return{type:n.TableConditionTypeEnum.String,compare:n.TableStringCompareTypeEnum.Equal,info:{}}}const te=t=>{var r,a,c,l,f,p,m,h;let{conditionInfo:g,onChange:_}=t,v=(0,i.useDependency)(e.LocaleService),[y,b]=(0,u.useState)(!1),x=(0,i.useDependency)(e.Injector),S=N(x),C=(e,t,n)=>{_({type:t==null?g.type:t,compare:n==null?g.compare:n,info:e})},w=e=>{var t;let r=e[0],i=e[1];i&&b(!1);let a={};r===n.TableConditionTypeEnum.Date?i===n.TableDateCompareTypeEnum.Quarter?a.dateSelect=n.TableDateCompareTypeEnum.Q1:i===n.TableDateCompareTypeEnum.Month?a.dateSelect=n.TableDateCompareTypeEnum.M1:F.has(i)?a.date=new Date:a.dateRange=[new Date,new Date]:r===n.TableConditionTypeEnum.Number?a.number=0:r===n.TableConditionTypeEnum.String&&(a.string=``),C(a,e[0],(t=e[1])==null?n.TableStringCompareTypeEnum.Equal:t)},T=I(g.type,g.compare),E=``;E=g.compare?`${v.t(`sheets-table.condition.${g.type}`)} - ${v.t(`sheets-table.${g.type}.compare.${g.compare}`)}`:v.t(`sheets-table.condition.${g.type}`);let D=P(x,g.compare);return(0,d.jsxs)(`div`,{children:[(0,d.jsx)(o.Dropdown,{align:`start`,open:y,onOpenChange:b,overlay:(0,d.jsx)(o.CascaderList,{value:[g.type,g.compare],options:S,onChange:w,contentClassName:`univer-flex-1`,wrapperClassName:`!univer-h-[150px]`}),children:(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-white`,o.borderClassName),children:[(0,d.jsx)(`span`,{children:E}),(0,d.jsx)(s.MoreDownIcon,{})]})}),(0,d.jsxs)(`div`,{className:`univer-mt-3 univer-w-full`,children:[T===M.Input&&(0,d.jsx)(d.Fragment,{children:g.type===n.TableConditionTypeEnum.String?(0,d.jsx)(o.Input,{className:`univer-w-full`,placeholder:`请输入`,value:g.info.string,onChange:e=>C({string:e})}):(0,d.jsx)(o.InputNumber,{className:`univer-h-7 univer-w-full`,value:g.info.number,controls:!1,onChange:e=>{e!==null&&C({number:e})}})}),T===M.DatePicker&&(0,d.jsx)(`div`,{id:`univer-table-date-picker-wrapper`,children:(0,d.jsx)(o.DatePicker,{className:`univer-w-full`,value:(r=g.info.date)==null?new Date:r,onValueChange:e=>C({date:e})})}),T===M.DateRange&&(0,d.jsx)(`div`,{id:`univer-table-date-range-wrapper`,children:(0,d.jsx)(o.DateRangePicker,{className:`univer-w-full`,value:[(a=(c=g.info.dateRange)==null?void 0:c[0])==null?new Date:a,(l=(f=g.info.dateRange)==null?void 0:f[1])==null?new Date:l],onValueChange:e=>{C(e?{dateRange:e}:{})}})}),T===M.Inputs&&(0,d.jsxs)(`div`,{className:`univer-flex univer-items-center univer-gap-2`,children:[(0,d.jsx)(o.InputNumber,{className:`univer-w-full`,value:(p=g.info.numberRange)==null?void 0:p[0],onChange:e=>{if(e!==null){var t;C({numberRange:[e,(t=g.info.numberRange)==null?void 0:t[1]]})}},controls:!1}),(0,d.jsx)(`span`,{children:` - `}),(0,d.jsx)(o.InputNumber,{className:`univer-w-full`,value:(m=g.info.numberRange)==null?void 0:m[1],controls:!1,onChange:e=>{if(e!==null){var t;C({numberRange:[(t=g.info.numberRange)==null?void 0:t[0],e]})}}})]}),T===M.Select&&(0,d.jsx)(o.Select,{className:`univer-w-full`,value:(h=g.info.dateSelect)==null?D[0].value:h,options:D,onChange:e=>C({dateSelect:e})})]})]})},L=e=>{let t=0;return e.forEach(e=>{t+=e}),t};function R(t){let{unitId:n,tableId:r,subUnitId:a,columnIndex:s,checkedItemSet:c,setCheckedItemSet:l,tableFilter:f}=t,p=(0,i.useDependency)(e.LocaleService),{data:m,itemsCountMap:h,allItemsCount:g}=(0,i.useDependency)(j).getTableFilterItems(n,a,r,s),[_,v]=(0,u.useState)(f===void 0?!0:c.size===h.size),[y,b]=(0,u.useState)(_?g:L(h)),x=!_&&c.size>0,[S,C]=(0,u.useState)(``),w=(0,u.useMemo)(()=>S?m.filter(e=>String(e.title).toLowerCase().includes(S.toLowerCase())):m,[S,m]),T=(0,u.useCallback)(()=>{_?(c.clear(),l(new Set(c)),v(!1)):(w.forEach(e=>{c.add(e.title)}),l(new Set(c)),v(!0))},[_]),E=(0,u.useCallback)(e=>{e===``?(v(!0),m.forEach(e=>{c.add(e.title)}),b(g)):(c.clear(),v(!1),b(0)),C(e)},[]),D=e=>{if(_){v(!1);let t=new Set;for(let{title:n}of m)e!==n&&t.add(n);b(g-h.get(e)),l(t)}else c.has(e)?(c.delete(e),b(y-h.get(e))):(c.add(e),b(y+h.get(e))),l(new Set(c))};return(0,d.jsxs)(`div`,{className:`univer-flex univer-h-full univer-flex-col`,children:[(0,d.jsx)(o.Input,{autoFocus:!0,value:S,placeholder:p.t(`sheets-table.filter.search-placeholder`),onChange:E}),(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-mt-2 univer-box-border univer-flex univer-h-[180px] univer-max-h-[180px] univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-py-1.5 univer-pl-2`,o.borderClassName),children:(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-h-40 univer-overflow-y-auto univer-py-1 univer-pl-2`,o.scrollbarClassName),children:(0,d.jsxs)(`div`,{className:`univer-h-full`,children:[(0,d.jsx)(`div`,{className:`univer-flex univer-items-center univer-px-2 univer-py-1`,children:(0,d.jsx)(o.Checkbox,{indeterminate:x,disabled:m.length===0,checked:_,onChange:T,children:(0,d.jsxs)(`div`,{className:`univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm`,children:[(0,d.jsx)(`span`,{className:`univer-inline-block univer-truncate`,children:`${p.t(`sheets-table.filter.select-all`)}`}),(0,d.jsx)(`span`,{className:`univer-ml univer-text-gray-400`,children:`(${y}/${S?w.length:g})`})]})})}),w.map(e=>(0,d.jsx)(`div`,{className:`univer-flex univer-items-center univer-px-2 univer-py-1`,children:(0,d.jsx)(o.Checkbox,{checked:_||c.has(e.title),onChange:()=>{D(e.title)},children:(0,d.jsxs)(`div`,{className:`univer-flex univer-h-5 univer-flex-1 univer-text-sm`,children:[(0,d.jsx)(`span`,{className:`univer-inline-block univer-truncate`,children:e.title}),(0,d.jsx)(`span`,{className:`univer-ml-1 univer-text-gray-400`,children:`(${h.get(e.title)||0})`})]})})},e.key))]})})})]})}function z(){var t;let r=(0,i.useDependency)(e.LocaleService),a=B(r),f=(0,i.useDependency)(j),p=(0,i.useDependency)(n.TableManager),m=(0,i.useDependency)(e.ICommandService),h=(0,i.useDependency)(e.IPermissionService),g=(0,i.useDependency)(V),_=g.getCurrentTableFilterInfo(),v=f.getTableFilterPanelInitProps(_.unitId,_.subUnitId,_.tableId,_.column),{unitId:y,subUnitId:b,tableId:x,tableFilter:S,currentFilterBy:C,columnIndex:T}=v,{data:E}=f.getTableFilterItems(y,b,x,T),D=f.getTableFilterCheckedItems(y,x,T),[O,k]=(0,u.useState)(new Set(D)),[A,M]=(0,u.useState)(C||w.Items),[N,P]=(0,u.useState)(()=>{let e=v.tableFilter;return ee(e)}),F=p.getTable(y,x);if(!F)return null;let I=F.getTableFilters(),L=I.getSortState();L.columnIndex===T&&(L.sortState,n.SheetsTableSortStateEnum.Asc),L.columnIndex===T&&(L.sortState,n.SheetsTableSortStateEnum.Desc);let z=()=>{g.closeFilterPanel()},H=()=>{z()},U=e=>{let t=F.getTableFilterRange();m.executeCommand(l.SortRangeCommand.id,{unitId:y,subUnitId:b,range:t,orderRules:[{colIndex:T+t.startColumn,type:e?l.SortType.ASC:l.SortType.DESC}],hasTitle:!1}),I.setSortState(T,e?n.SheetsTableSortStateEnum.Asc:n.SheetsTableSortStateEnum.Desc),z()},W=()=>{if(A===w.Items){let e=[];for(let t of E)O.has(t.title)&&e.push(t.title);let t=F.getTableFilterColumn(T);if(t){if(t.values.join(`,`)===e.join(`,`)){z();return}}else if(e.length===0){z();return}let r={filterType:n.TableColumnFilterTypeEnum.manual,values:e};f.setTableFilter(y,x,T,r)}else{let e;e=N.compare===n.TableDateCompareTypeEnum.Quarter||N.compare===n.TableDateCompareTypeEnum.Month?{conditionType:N.type,compareType:Object.values(N.info)[0]}:{conditionType:N.type,compareType:N.compare,expectedValue:Object.values(N.info)[0]};let t={filterType:n.TableColumnFilterTypeEnum.condition,filterInfo:e};f.setTableFilter(y,x,T,t)}z()},G=()=>{f.setTableFilter(y,x,T,void 0),z()},K=new c.WorkbookEditablePermission(y).id;return(0,d.jsxs)(`div`,{className:`univer-box-border univer-flex univer-min-w-[312px] univer-flex-col univer-rounded-[10px] univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700`,children:[((t=h.getPermissionPoint(K))==null?void 0:t.value)&&(0,d.jsx)(`div`,{className:`univer-mb-3 univer-flex`,children:(0,d.jsxs)(o.ButtonGroup,{className:`univer-mb-3 !univer-flex univer-w-full`,children:[(0,d.jsxs)(o.Button,{className:`univer-w-1/2`,onClick:()=>U(!0),children:[(0,d.jsx)(s.AscendingIcon,{className:`univer-mr-1`}),r.t(`sheets-sort.general.sort-asc`)]}),(0,d.jsxs)(o.Button,{className:`univer-w-1/2`,onClick:()=>U(!1),children:[(0,d.jsx)(s.DescendingIcon,{className:`univer-mr-1`}),r.t(`sheets-sort.general.sort-desc`)]})]})}),(0,d.jsx)(`div`,{className:`univer-w-full`,children:(0,d.jsx)(o.Segmented,{value:A,items:a,onChange:e=>M(e)})}),(0,d.jsx)(`div`,{className:`univer-z-10 univer-h-60`,children:(0,d.jsx)(`div`,{className:`univer-mt-3 univer-size-full`,children:A===w.Items?(0,d.jsx)(R,{tableFilter:S,unitId:y,subUnitId:b,tableId:x,columnIndex:T,checkedItemSet:O,setCheckedItemSet:k}):(0,d.jsx)(te,{tableFilter:S,unitId:y,subUnitId:b,tableId:x,columnIndex:T,conditionInfo:N,onChange:P})})}),(0,d.jsxs)(`div`,{className:`univer-flex-wrap-nowrap univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-justify-between univer-gap-6 univer-overflow-hidden`,children:[(0,d.jsx)(o.Button,{disabled:S===void 0,onClick:G,children:r.t(`sheets-table.filter.clear-filter`)}),(0,d.jsxs)(`div`,{children:[(0,d.jsx)(o.Button,{className:`univer-mr-2`,onClick:H,children:r.t(`sheets-table.filter.cancel`)}),(0,d.jsx)(o.Button,{variant:`primary`,onClick:W,children:r.t(`sheets-table.filter.confirm`)})]})]})]})}function B(e){return(0,u.useMemo)(()=>[{label:e.t(`sheets-table.filter.by-values`),value:w.Items},{label:e.t(`sheets-table.filter.by-conditions`),value:w.Condition}],[e.getCurrentLocale(),e])}let V=class extends e.Disposable{constructor(e,t,n,r){super(),this._componentManager=e,this._contextService=t,this._sheetCanvasPopupService=n,this._dialogService=r,O(this,`_popupDisposable`,void 0),O(this,`_currentTableFilterInfo`,null),this._initComponents(),this._initUIPopup()}setCurrentTableFilterInfo(e){this._currentTableFilterInfo=e}clearCurrentTableFilterInfo(){this._currentTableFilterInfo=null}getCurrentTableFilterInfo(){return this._currentTableFilterInfo}_initComponents(){[[g,z]].forEach(([e,t])=>{this.disposeWithMe(this._componentManager.register(e,t))})}_initUIPopup(){this.disposeWithMe(this._contextService.subscribeContextValue$(g).pipe((0,a.startWith)(void 0),(0,a.distinctUntilChanged)()).subscribe(e=>{e?this._openFilterPopup():e===!1&&this._closeFilterPopup()}))}closeFilterPanel(){this._contextService.setContextValue(g,!1)}_openFilterPopup(){let e=this._currentTableFilterInfo;if(!e)throw Error(`[SheetsFilterUIController]: no filter model when opening filter popup!`);let{row:t,column:n}=e;this._popupDisposable=this._sheetCanvasPopupService.attachPopupToCell(t,n,{componentKey:g,direction:`horizontal`,onClickOutside:()=>{this._dialogService.close(`UNIVER_SHEET_Table_FILTER_PANEL_ID`),this._contextService.setContextValue(g,!1)},offset:[5,0],portal:!0})}_closeFilterPopup(){var e;(e=this._popupDisposable)==null||e.dispose(),this._popupDisposable=null,this.clearCurrentTableFilterInfo()}};V=A([k(0,(0,e.Inject)(i.ComponentManager)),k(1,e.IContextService),k(2,(0,e.Inject)(r.SheetCanvasPopManagerService)),k(3,(0,e.Inject)(i.IDialogService))],V);const H={type:e.CommandType.OPERATION,id:`sheet.operation.open-table-filter-panel`,async handler(t,r){if(!r)return!1;let{row:i,col:a,unitId:o,subUnitId:s,tableId:c}=r,l=t.get(n.TableManager),u=t.get(e.IContextService),d=t.get(V);return l.getTable(o,c)?(u.getContextValue(`SHEETS_TABLE_FILTER_PANEL_OPENED_KEY`)||(d.setCurrentTableFilterInfo({unitId:o,subUnitId:s,row:i,tableId:c,column:a}),u.setContextValue(g,!0)),!0):!1}},U={type:e.CommandType.OPERATION,id:`sheet.operation.open-table-selector`,async handler(t){var r;let i=t.get(e.IUniverInstanceService),a=t.get(e.ICommandService),o=(0,c.getSheetCommandTarget)(i);if(!o)return!1;let{unitId:s,subUnitId:l,worksheet:u}=o,d=t.get(c.SheetsSelectionsService).getCurrentLastSelection(),f=(r=d==null?void 0:d.range)==null?{startRow:0,endRow:0,startColumn:0,endColumn:0}:r,p=await W(t,s,l,(0,c.isSingleCellSelection)(d)?(0,c.expandToContinuousRange)(f,{up:!0,left:!0,right:!0,down:!0},u):f);return p?(a.executeCommand(n.AddSheetTableCommand.id,{...p}),!0):!1}};async function W(t,n,r,a,o){let s=t.get(i.IDialogService),c=t.get(e.LocaleService);return new Promise(e=>{let t={unitId:n,subUnitId:r,range:a,tableId:o,onConfirm:t=>{e(t),s.close(v)},onCancel:()=>{e(null),s.close(v)}};s.open({id:v,title:{title:c.t(`sheets-table.selectRange`)},draggable:!0,destroyOnClose:!0,mask:!1,maskClosable:!1,children:{label:{name:v,props:t}},width:300,onClose:()=>{e(null),s.close(v)}})})}const G=`sheets-table-ui.config`;Symbol(G);const K={anchorHeight:24,anchorBackgroundColor:`rgb(134,139,156)`};let q=class extends e.Disposable{constructor(e){super(),this._commandService=e,O(this,`_refreshTable`,new a.Subject),O(this,`refreshTable$`,this._refreshTable.asObservable()),this._initListener()}_initListener(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{if(e.id===c.SetRangeThemeMutation.id){let{styleName:t}=e.params;t.startsWith(n.SHEET_TABLE_CUSTOM_THEME_PREFIX)&&this._refreshTable.next(Math.random())}}))}};q=A([k(0,(0,e.Inject)(e.ICommandService))],q);const J=()=>{var t,r;let[a,l]=(0,u.useState)(``),[f,p]=(0,u.useState)(``),m=(0,i.useDependency)(i.ISidebarService),[h,g]=(0,u.useState)({}),_=(0,i.useDependency)(e.Injector),v=(0,i.useObservable)((0,i.useDependency)(Y).anchorPosition$),b=(0,i.useDependency)(e.ICommandService),x=(0,i.useDependency)(e.IUniverInstanceService),S=(0,i.useObservable)((0,i.useDependency)(c.WorkbookPermissionService).unitPermissionInitStateChange$,!1),C=(0,i.useDependency)(n.TableManager),w=(0,i.useDependency)(c.SheetRangeThemeModel),T=(0,i.useObservable)((0,i.useDependency)(q).refreshTable$),E=(0,i.useDependency)(e.LocaleService),D=(0,i.useObservable)((0,i.useDependency)(c.SheetsSelectionsService).selectionChanged$,[{range:(0,e.cellToRange)(0,0),primary:null}]),[,O]=(0,u.useState)(Math.random()),k=(0,i.useDependency)(e.IConfigService).getConfig(G),A=(t=k==null?void 0:k.anchorHeight)==null?24:t,j=(r=k==null?void 0:k.anchorBackgroundColor)==null?`rgb(53,91,183)`:r,M=(e,t)=>{g(n=>({...n,[e]:t}))};if((0,u.useEffect)(()=>{O(Math.random())},[T]),!(v!=null&&v.length))return null;let N=(0,c.getSheetCommandTarget)(x);if(!N)return null;let{unitId:P,subUnitId:F}=N,I=(e,t)=>{var r;if(((r=C.getTableById(P,e))==null?void 0:r.getDisplayName())===t){l(``),p(``);return}b.executeCommand(n.SetSheetTableCommand.id,{tableId:e,unitId:P,name:t}),p(``),l(``)},ee=async e=>{let t=C.getTableById(P,e);if(!t)return;let r=await W(_,P,F,t.getRange(),e);r&&b.executeCommand(n.SetSheetTableCommand.id,{tableId:e,unitId:P,updateRange:{newRange:r.range}})};return S?(0,d.jsx)(`div`,{className:`univer-absolute univer-z-50 univer-size-0`,children:v.map(t=>{var r,i,c,u,g;let _=C.getTableById(P,t.tableId);if(!_)return null;let v=w.getRangeThemeStyle(P,_.getTableStyleId()),x=(r=v==null||(i=v.getHeaderRowStyle())==null||(i=i.bg)==null?void 0:i.rgb)==null?j:r,S=(c=v==null||(u=v.getHeaderRowStyle())==null||(u=u.cl)==null?void 0:u.rgb)==null?`rgb(255, 255, 255)`:c,T=_.getRange();if(!(D!=null&&D.length))return null;let O=D[D.length-1].range,k=!e.Rectangle.intersects(T,O)&&t.y<=20;return(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-shadow-xs univer-absolute univer-box-border univer-cursor-pointer univer-items-center univer-rounded-xl univer-px-2`,o.borderClassName,{"univer-flex":!k,"univer-hidden":k}),style:{left:t.x,top:Math.max(t.y,0),backgroundColor:x,color:S,borderWidth:`0.5px`,height:A?`${A}px`:`24px`},children:[(0,d.jsx)(`div`,{className:`univer-text-nowrap`,children:a===t.tableId?(0,d.jsx)(o.Input,{className:`univer-h-[18px] univer-min-w-16 univer-rounded-none`,inputClass:`univer-h-[18px] univer-w-[80px]`,value:f,onChange:e=>p(e),onBlur:()=>I(t.tableId,f),onKeyDown:e=>{e.key===`Enter`&&I(t.tableId,f)},autoFocus:a===t.tableId}):(0,d.jsx)(`div`,{className:`univer-h-[18px] univer-max-w-24 univer-truncate univer-text-sm`,children:t.tableName})}),(0,d.jsx)(o.Dropdown,{align:`start`,overlay:(0,d.jsxs)(`div`,{className:`univer-py-2`,children:[(0,d.jsxs)(`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`,onClick:()=>{l(t.tableId),p(t.tableName)},children:[(0,d.jsx)(s.RenameIcon,{}),E.t(`sheets-table.rename`)]}),(0,d.jsx)(`div`,{className:`univer-my-1 univer-h-px univer-w-full univer-bg-gray-200`}),(0,d.jsxs)(`div`,{onClick:()=>ee(t.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`,children:[(0,d.jsx)(s.GridOutlineIcon,{}),E.t(`sheets-table.updateRange`)]}),(0,d.jsxs)(`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`,onClick:()=>{M(t.tableId,!1);let e=C.getTableById(P,t.tableId);if(!e)return;let n=e.getTableConfig(),r={id:`SHEET_TABLE_THEME_PANEL_ID`,header:{title:E.t(`sheets-table.tableStyle`)},children:{label:y,oldConfig:n,unitId:P,subUnitId:F,tableId:t.tableId},width:330};m.open(r)},children:[(0,d.jsx)(s.PaintBucketDoubleIcon,{extend:{colorChannel1:`rgb(53,91,183)`}}),E.t(`sheets-table.setTheme`)]}),(0,d.jsx)(`div`,{className:`univer-my-1 univer-h-px univer-w-full univer-bg-gray-200`}),(0,d.jsxs)(`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`,onClick:()=>{M(t.tableId,!1),b.executeCommand(n.DeleteSheetTableCommand.id,{tableId:t.tableId,subUnitId:F,unitId:P})},children:[(0,d.jsx)(s.DeleteIcon,{className:`univer-mr-2`}),E.t(`sheets-table.removeTable`)]})]}),open:(g=h[t.tableId])==null?!1:g,onOpenChange:e=>{M(t.tableId,e)},children:(0,d.jsx)(`div`,{children:(0,d.jsx)(s.MoreDownIcon,{})})},t.tableId)]},t.tableId)})}):null};let Y=class extends e.Disposable{constructor(e,t,n,r,i,o,s,c,l,u,d){super(),this._context=e,this._injector=t,this._sheetSkeletonManagerService=n,this._renderManagerService=r,this._commandService=i,this._univerInstanceService=o,this._uiPartsService=s,this._tableManager=c,this._scrollManagerService=l,this._workbookPermissionService=u,this._permissionService=d,O(this,`_anchorVisible$`,new a.BehaviorSubject(!0)),O(this,`_timer`,void 0),O(this,`_anchorPosition$`,new a.BehaviorSubject([])),O(this,`anchorPosition$`,this._anchorPosition$.asObservable()),this._initUI(),this._initListener(),this._initTableAnchor()}_initUI(){this.disposeWithMe(this._uiPartsService.registerComponent(i.BuiltInUIPart.CONTENT,()=>(0,i.connectInjector)(J,this._injector)))}_initListener(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{(e.id===r.SetZoomRatioOperation.id||e.id===r.SetScrollOperation.id)&&(this._anchorVisible$.next(!1),this._timer&&clearTimeout(this._timer),this._timer=setTimeout(()=>{this._anchorVisible$.next(!0)},300))}))}_initTableAnchor(){this.disposeWithMe((0,a.merge)(this._context.unit.activeSheet$,this._sheetSkeletonManagerService.currentSkeleton$,this._scrollManagerService.validViewportScrollInfo$,this._tableManager.tableAdd$,this._tableManager.tableDelete$,this._tableManager.tableNameChanged$,this._tableManager.tableRangeChanged$,this._tableManager.tableThemeChanged$,this._workbookPermissionService.unitPermissionInitStateChange$.pipe((0,a.filter)(e=>e)),this._permissionService.permissionPointUpdate$.pipe((0,a.debounceTime)(300)),this._anchorVisible$).subscribe(()=>{var e;if(!this._anchorVisible$.getValue()){this._anchorPosition$.next([]);return}let n=this._context.unit,i=n.getActiveSheet(),a=i==null?void 0:i.getSheetId(),o=this._tableManager.getTableList(this._context.unitId).filter(e=>e.subUnitId===a),s=this._renderManagerService.getRenderById(this._context.unitId);if(!s){this._anchorPosition$.next([]);return}if(!((e=this._permissionService.getPermissionPoint(new c.WorkbookEditablePermission(n.getUnitId()).id))!=null&&e.value)){this._anchorPosition$.next([]);return}let l=o.reduce((e,n)=>{let{startRow:i,startColumn:a}=n.range,o=s.with(r.SheetSkeletonManagerService),c=(0,r.getSheetObject)(this._univerInstanceService,this._renderManagerService);if(!c)return e;let{scene:l}=c,u=l.getViewport(t.SHEET_VIEWPORT_KEY.VIEW_MAIN);if(!u)return e;let d=l==null?void 0:l.scaleX,f=l==null?void 0:l.scaleY,p=l==null?void 0:l.getViewportScrollXY(u);if(!d||!l||!f||!p)return e;let m=o.getCurrentSkeleton();if(!m)return e;let h=m.getNoMergeCellWithCoordByIndex(i,a),g=(0,t.convertTransformToOffsetX)(h.startX,d,p),_=(0,t.convertTransformToOffsetY)(h.startY,f,p)-25-4;return _>=-10&&g>=45&&e.push({x:g,y:_,tableId:n.id,tableName:n.name}),e},[]);this._anchorPosition$.next(l)}))}};Y=A([k(1,(0,e.Inject)(e.Injector)),k(2,(0,e.Inject)(r.SheetSkeletonManagerService)),k(3,t.IRenderManagerService),k(4,e.ICommandService),k(5,e.IUniverInstanceService),k(6,i.IUIPartsService),k(7,(0,e.Inject)(n.TableManager)),k(8,(0,e.Inject)(r.SheetScrollManagerService)),k(9,(0,e.Inject)(c.WorkbookPermissionService)),k(10,(0,e.Inject)(e.IPermissionService))],Y),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`);var X=class{static drawNoSetting(e,n,r,i){e.save(),t.Rect.drawWith(e,{radius:2,width:16,height:16,fill:i}),e.lineCap=`square`,e.strokeStyle=r,e.scale(n/16,n/16),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 drawIconByPath(e,n,r,i){e.save(),e.strokeStyle=r,e.fillStyle=i,t.Rect.drawWith(e,{radius:2,width:16,height:16,fill:i}),n.forEach(t=>{let n=new Path2D(t);e.fillStyle=r,e.fill(n,`evenodd`)}),e.restore()}};const ne=[`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`],re=[`M12.4008 13.1831C12.6907 13.1831 12.9258 12.9481 12.9258 12.6581V4.60873L14.013 5.69597C14.218 5.901 14.5505 5.901 14.7555 5.69597C14.9605 5.49094 14.9605 5.15853 14.7555 4.95351L12.7721 2.97017C12.5671 2.76515 12.2347 2.76515 12.0297 2.97017L10.0463 4.95351C9.84132 5.15853 9.84132 5.49094 10.0463 5.69597C10.2514 5.901 10.5838 5.901 10.7888 5.69597L11.8758 4.60901V12.6581C11.8758 12.9481 12.1108 13.1831 12.4008 13.1831Z`,`M1.28069 4.85447C0.842195 4.33439 1.21191 3.5391 1.89218 3.5391H8.59333C9.2736 3.5391 9.64331 4.33439 9.20482 4.85447L6.51052 8.0501V11.6601C6.51052 12.2245 5.94174 12.6114 5.41683 12.404L4.48092 12.0343C4.1756 11.9136 3.97498 11.6187 3.97498 11.2904V8.0501L1.28069 4.85447Z`],ie=[`M12.4008 2.81641C12.6907 2.81641 12.9258 3.05146 12.9258 3.34141V11.3908L14.013 10.3036C14.218 10.0986 14.5505 10.0986 14.7555 10.3036C14.9605 10.5086 14.9605 10.841 14.7555 11.046L12.7721 13.0294C12.5671 13.2344 12.2347 13.2344 12.0297 13.0294L10.0463 11.046C9.84132 10.841 9.84132 10.5086 10.0463 10.3036C10.2514 10.0986 10.5838 10.0986 10.7888 10.3036L11.8758 11.3905V3.34141C11.8758 3.05146 12.1108 2.81641 12.4008 2.81641Z`,`M1.28069 4.85444C0.842195 4.33435 1.21191 3.53906 1.89218 3.53906H8.59333C9.2736 3.53906 9.64331 4.33435 9.20482 4.85443L6.51052 8.05006V11.6601C6.51052 12.2245 5.94174 12.6113 5.41683 12.404L4.48092 12.0342C4.1756 11.9136 3.97498 11.6186 3.97498 11.2903V8.05006L1.28069 4.85444Z`],ae=[`M11.9003 13.7046C11.9003 13.9969 11.6633 14.2339 11.371 14.2339C11.0787 14.2339 10.8417 13.9969 10.8417 13.7046V3.57272L9.74577 4.66862C9.53906 4.87534 9.20391 4.87534 8.9972 4.66862C8.79048 4.46191 8.79048 4.12676 8.9972 3.92005L10.9969 1.92039C11.2036 1.71368 11.5387 1.71368 11.7454 1.92039L13.7451 3.92005C13.9518 4.12676 13.9518 4.46191 13.7451 4.66862C13.5384 4.87534 13.2032 4.87534 12.9965 4.66862L11.9003 3.57243V13.7046Z`,`M2.69779 10.0113C2.40546 10.0113 2.16847 9.77429 2.16847 9.48196C2.16847 9.18962 2.40546 8.95264 2.69779 8.95264H6.67804C6.89213 8.95264 7.08514 9.0816 7.16707 9.2794C7.249 9.47719 7.20371 9.70486 7.05233 9.85624L3.97569 12.9329H6.67804C6.97038 12.9329 7.20736 13.1699 7.20736 13.4622C7.20736 13.7545 6.97038 13.9915 6.67804 13.9915H2.69779C2.4837 13.9915 2.29069 13.8626 2.20876 13.6648C2.12684 13.467 2.17212 13.2393 2.32351 13.0879L5.40015 10.0113H2.69779Z`,`M5.51638 2.58693C5.23363 1.81542 4.14248 1.81543 3.85973 2.58693L2.13245 7.29995C2.03185 7.57443 2.17281 7.87849 2.4473 7.97909C2.72178 8.07969 3.02584 7.93872 3.12644 7.66424L3.64346 6.25351L3.64504 6.25351H5.73266L6.24968 7.66424C6.35027 7.93872 6.65433 8.07969 6.92882 7.97909C7.2033 7.87849 7.34426 7.57443 7.24367 7.29995L5.51638 2.58693ZM5.34467 5.19487L4.68806 3.40325L4.03144 5.19487H5.34467Z`],oe=[`M11.9003 2.29495C11.9003 2.00261 11.6633 1.76562 11.371 1.76562C11.0787 1.76562 10.8417 2.00261 10.8417 2.29495V12.4268L9.74577 11.3309C9.53906 11.1242 9.20391 11.1242 8.9972 11.3309C8.79048 11.5376 8.79048 11.8727 8.9972 12.0795L10.9969 14.0791C11.2036 14.2858 11.5387 14.2858 11.7454 14.0791L13.7451 12.0795C13.9518 11.8727 13.9518 11.5376 13.7451 11.3309C13.5384 11.1242 13.2032 11.1242 12.9965 11.3309L11.9003 12.4271V2.29495Z`,`M2.69792 10.0113C2.40558 10.0113 2.16859 9.77429 2.16859 9.48196C2.16859 9.18962 2.40558 8.95264 2.69792 8.95264H6.67816C6.89225 8.95264 7.08526 9.0816 7.16719 9.2794C7.24912 9.47719 7.20384 9.70486 7.05245 9.85624L3.97581 12.9329H6.67816C6.9705 12.9329 7.20749 13.1699 7.20749 13.4622C7.20749 13.7545 6.9705 13.9915 6.67816 13.9915H2.69792C2.48383 13.9915 2.29082 13.8626 2.20889 13.6648C2.12696 13.467 2.17224 13.2393 2.32363 13.0879L5.40027 10.0113H2.69792Z`,`M5.5165 2.58693C5.23375 1.81542 4.1426 1.81543 3.85985 2.58693L2.13257 7.29995C2.03197 7.57443 2.17294 7.8785 2.44742 7.97909C2.7219 8.07969 3.02596 7.93872 3.12656 7.66424L3.64358 6.25351L3.64516 6.25351H5.73278L6.2498 7.66424C6.35039 7.93872 6.65446 8.07969 6.92894 7.97909C7.20342 7.8785 7.34438 7.57443 7.24379 7.29995L5.5165 2.58693ZM5.34479 5.19487L4.68818 3.40325L4.03156 5.19487H5.34479Z`];let se=class extends t.Shape{constructor(e,t,n,r,i){super(e,t),this._contextService=n,this._commandService=r,this._themeService=i,O(this,`_cellWidth`,0),O(this,`_cellHeight`,0),O(this,`_filterParams`,void 0),O(this,`_hovered`,!1),this.setShapeProps(t),this.onPointerDown$.subscribeEvent(e=>this.onPointerDown(e)),this.onPointerEnter$.subscribeEvent(()=>this.onPointerEnter()),this.onPointerLeave$.subscribeEvent(()=>this.onPointerLeave())}setShapeProps(e){e.cellHeight!==void 0&&(this._cellHeight=e.cellHeight),e.cellWidth!==void 0&&(this._cellWidth=e.cellWidth),e.filterParams!==void 0&&(this._filterParams=e.filterParams),this.transformByState({width:e.width,height:e.height})}_draw(e){let t=this._cellHeight,r=this._cellWidth,i=16-r,a=16-t;e.save();let o=new Path2D;o.rect(i,a,r,t),e.clip(o);let{buttonState:s}=this._filterParams,c=this._themeService.getColorFromTheme(`primary.600`),l=this._hovered?this._themeService.getColorFromTheme(`gray.50`):`rgba(255, 255, 255, 1.0)`,u;switch(s){case n.SheetsTableButtonStateEnum.FilteredSortNone:u=ne;break;case n.SheetsTableButtonStateEnum.FilteredSortAsc:u=re;break;case n.SheetsTableButtonStateEnum.FilteredSortDesc:u=ie;break;case n.SheetsTableButtonStateEnum.FilterNoneSortNone:break;case n.SheetsTableButtonStateEnum.FilterNoneSortAsc:u=ae;break;case n.SheetsTableButtonStateEnum.FilterNoneSortDesc:u=oe;break}u?X.drawIconByPath(e,u,c,l):s!==void 0&&X.drawNoSetting(e,16,c,l),e.restore()}onPointerDown(e){if(e.button===2)return;let{row:t,col:n,unitId:r,subUnitId:i,tableId:a}=this._filterParams;this._contextService.getContextValue(`SHEETS_TABLE_FILTER_PANEL_OPENED_KEY`)||!this._commandService.hasCommand(H.id)||setTimeout(()=>{let e={row:t,col:n,unitId:r,subUnitId:i,tableId:a};this._commandService.executeCommand(H.id,e)},200)}onPointerEnter(){this._hovered=!0,this.makeDirty(!0)}onPointerLeave(){this._hovered=!1,this.makeDirty(!0)}};se=A([k(2,e.IContextService),k(3,e.ICommandService),k(4,(0,e.Inject)(e.ThemeService))],se);const ce=(t,n,r,i)=>{switch(i){case e.VerticalAlign.TOP:return t+1;case e.VerticalAlign.MIDDLE:return t+Math.max(0,(r-16)/2);case e.VerticalAlign.BOTTOM:default:return n-16-1}};let le=class extends e.RxDisposable{constructor(e,t,n,r,i,a){super(),this._context=e,this._injector=t,this._sheetSkeletonManagerService=n,this._sheetInterceptorService=r,this._tableManager=i,this._commandService=a,O(this,`_buttonRenderDisposable`,null),O(this,`_tableFilterButtonShapes`,[]),this._initRenderer(),this._initCommandExecuted()}dispose(){super.dispose(),this._disposeRendering()}_initRenderer(){let e=this._tableManager;this._sheetSkeletonManagerService.currentSkeleton$.pipe((0,a.switchMap)(t=>{var n;if(!t)return(0,a.of)(null);let{unit:r,unitId:i}=this._context,o=((n=r.getActiveSheet())==null?void 0:n.getSheetId())||``,s=()=>({unitId:i,worksheetId:o,tableFilterRanges:this._tableManager.getSheetFilterRangeWithState(r.getUnitId(),o),skeleton:t.skeleton});return(0,a.merge)(e.tableAdd$,e.tableNameChanged$,e.tableRangeChanged$,e.tableThemeChanged$,e.tableDelete$,e.tableFilterChanged$).pipe((0,a.map)(()=>s()),(0,a.startWith)(s()))}),(0,a.takeUntil)(this.dispose$)).subscribe(e=>{this._disposeRendering(),!(!e||!e.tableFilterRanges)&&this._renderButtons(e)})}_initCommandExecuted(){this.disposeWithMe(this._commandService.onCommandExecuted(e=>{var t;if(e.id!==c.SetVerticalTextAlignCommand.id)return;let{unit:n,unitId:r}=this._context,i=((t=n.getActiveSheet())==null?void 0:t.getSheetId())||``,a=this._sheetSkeletonManagerService.getCurrentSkeleton();if(!a)return;let o={unitId:r,worksheetId:i,tableFilterRanges:this._tableManager.getSheetFilterRangeWithState(n.getUnitId(),i),skeleton:a};this._disposeRendering(),!(!o||!o.tableFilterRanges)&&this._renderButtons(o)}))}_renderButtons(t){let{tableFilterRanges:n,unitId:i,skeleton:a,worksheetId:o}=t,{unit:s,scene:c}=this._context,l=s.getSheetBySheetId(o);if(l){for(let{range:t,states:s,tableId:u}of n){let{startRow:n,startColumn:d,endColumn:f}=t;this._interceptCellContent(i,o,t);for(let t=d;t<=f;t++){let f=`sheets-table-filter-button-${n}-${t}`,p=(0,r.getCoordByCell)(n,t,c,a),m=l.getCellStyle(n,t),h=(m==null?void 0:m.vt)||e.VerticalAlign.BOTTOM,{startX:g,startY:_,endX:v,endY:y}=p,b=v-g,x=y-_;if(x<=1||b<=1)continue;let S=s[t-d],C={left:v-16-1,top:ce(_,y,x,h),height:16,width:16,zIndex:5e3,cellHeight:x,cellWidth:b,filterParams:{unitId:i,subUnitId:o,row:n,col:t,buttonState:S,tableId:u}},w=this._injector.createInstance(se,f,C);this._tableFilterButtonShapes.push(w)}}c.addObjects(this._tableFilterButtonShapes),c.makeDirty()}}_interceptCellContent(t,n,r){let{startRow:i,startColumn:a,endColumn:o}=r;this._buttonRenderDisposable=this._sheetInterceptorService.intercept(c.INTERCEPTOR_POINT.CELL_CONTENT,{effect:e.InterceptorEffectEnum.Style,handler:(e,r,s)=>{let{row:c,col:l,unitId:u,subUnitId:d}=r;return u!==t||d!==n||c!==i||l<a||l>o?s(e):((!e||e===r.rawData)&&(e={...r.rawData}),e.fontRenderExtension={...e==null?void 0:e.fontRenderExtension,rightOffset:16},s(e))},priority:10})}_disposeRendering(){var e;this._tableFilterButtonShapes.forEach(e=>e.dispose()),(e=this._buttonRenderDisposable)==null||e.dispose(),this._buttonRenderDisposable=null,this._tableFilterButtonShapes=[]}};le=A([k(1,(0,e.Inject)(e.Injector)),k(2,(0,e.Inject)(r.SheetSkeletonManagerService)),k(3,(0,e.Inject)(c.SheetInterceptorService)),k(4,(0,e.Inject)(n.TableManager)),k(5,e.ICommandService)],le);let ue=class extends e.RxDisposable{constructor(e,t,n,r,i){super(),this._context=e,this._injector=t,this._sheetSkeletonManagerService=n,this._tableManager=r,this._sheetTableThemeUIController=i,this._initListener()}_dirtySkeleton(){var e;(e=this._context.mainComponent)==null||e.makeDirty();let t=this._sheetSkeletonManagerService.getCurrentParam();if(t){let e={...t,dirty:!0};this._sheetSkeletonManagerService.reCalculate(e)}}_initListener(){let e=this._tableManager,t=this._dirtySkeleton.bind(this);this.disposeWithMe((0,a.merge)(e.tableAdd$,e.tableDelete$,e.tableNameChanged$,e.tableRangeChanged$,e.tableThemeChanged$,e.tableFilterChanged$,e.tableInitStatus$,this._sheetTableThemeUIController.refreshTable$).subscribe(t))}};ue=A([k(1,(0,e.Inject)(e.Injector)),k(2,(0,e.Inject)(r.SheetSkeletonManagerService)),k(3,(0,e.Inject)(n.TableManager)),k(4,(0,e.Inject)(q))],ue);let Z=class extends e.Disposable{constructor(e,t,n){super(),this._sheetInterceptorService=e,this._univerInstanceService=t,this._tableManager=n,this._initSelectionChange()}_initSelectionChange(){this.disposeWithMe(this._sheetInterceptorService.interceptCommand({getMutations:t=>{if(t.id===r.SelectAllCommand.id){let n=(0,c.getSheetCommandTarget)(this._univerInstanceService);if(!n)return{redos:[],undos:[]};let{range:r}=t.params,{unitId:i,subUnitId:a,worksheet:o}=n,s=this._tableManager.getTablesBySubunitId(i,a).find(t=>{let n=t.getRange();return e.Rectangle.contains(n,r)});if(s){let t=s.getRange(),n={...t,startRow:t.startRow+1};return e.Rectangle.equals(t,r)?{undos:[],redos:[]}:e.Rectangle.equals(n,r)?{undos:[],redos:[{id:c.SetSelectionsOperation.id,params:{unitId:i,subUnitId:a,selections:[{range:t,primary:(0,c.getPrimaryForRange)(t,o)}]}}]}:{undos:[],redos:[{id:c.SetSelectionsOperation.id,params:{unitId:i,subUnitId:a,selections:[{range:n,primary:(0,c.getPrimaryForRange)(n,o)}]}}]}}}return{redos:[],undos:[]}}}))}};Z=A([k(0,(0,e.Inject)(c.SheetInterceptorService)),k(1,(0,e.Inject)(e.IUniverInstanceService)),k(2,(0,e.Inject)(n.TableManager))],Z);const de=t=>{let{unitId:r,subUnitId:a,range:s,onCancel:l,onConfirm:m,tableId:h}=t,g=(0,i.useDependency)(n.TableManager),[_,v]=(0,u.useState)(s),[y,b]=(0,u.useState)(``),x=(0,i.useDependency)(e.LocaleService),S=(0,i.useDependency)(e.IUniverInstanceService);return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(p.RangeSelector,{maxRangeCount:1,unitId:r,subUnitId:a,initialValue:(0,f.serializeRange)(s),onChange:(t,n)=>{let i=(0,f.serializeRange)(s),o=(0,f.deserializeRangeWithSheet)(n).range,l=(0,c.getSheetCommandTarget)(S,{unitId:r,subUnitId:a});if(!l)return;if(l.worksheet.getMergeData().some(t=>e.Rectangle.intersects(o,t))){b(x.t(`sheets-table.tableRangeWithMergeError`));return}if(g.getTablesBySubunitId(r,a).some(t=>{if(t.getId()===h)return!1;let n=t.getRange();return e.Rectangle.intersects(o,n)})){b(x.t(`sheets-table.tableRangeWithOtherTableError`));return}let{startRow:u,endRow:d}=o;if(u===d){b(x.t(`sheets-table.tableRangeSingleRowError`));return}if(i!==n){if(h){let t=g.getTableById(r,h);if(t){let n=t.getRange();if(e.Rectangle.intersects(o,n)&&n.startRow===o.startRow){v(o),b(``),m({unitId:r,subUnitId:a,range:o});return}else{b(x.t(`sheets-table.updateError`));return}}}v(o),b(``)}},supportAcrossSheet:!1}),y&&(0,d.jsx)(`div`,{className:`univer-mt-1 univer-text-xs univer-text-red-500`,children:y}),(0,d.jsxs)(`div`,{className:`univer-mt-4 univer-flex univer-justify-end`,children:[(0,d.jsx)(o.Button,{onClick:l,children:x.t(`sheets-table.cancel`)}),(0,d.jsx)(o.Button,{variant:`primary`,onClick:()=>{y||m({unitId:r,subUnitId:a,range:_})},className:`univer-ml-2`,children:x.t(`sheets-table.confirm`)})]})]})},fe=t=>{var r,a,l,f,p,m,h,g;let{unitId:_,subUnitId:v,tableId:y}=t,w=(0,i.useDependency)(e.ICommandService),T=(0,i.useDependency)(e.LocaleService),E=(0,i.useDependency)(n.TableManager),D=E.getTableById(_,y),O=(0,i.useDependency)(c.SheetRangeThemeModel),k=(0,i.useDependency)(q),A=(0,i.useObservable)(O.rangeThemeMapChange$),j=(0,i.useObservable)(k.refreshTable$),M=(0,i.useDependency)(e.ErrorService),[,N]=(0,u.useState)(Math.random()),P=(0,i.useObservable)(E.tableThemeChanged$,{theme:D==null?void 0:D.getTableStyleId(),oldTheme:D==null?void 0:D.getTableStyleId(),unitId:_,subUnitId:v,tableId:y}),F=O.getRegisteredRangeThemes().filter(e=>e==null?void 0:e.startsWith(`table-default-`)),I=O.getALLRegisteredTheme(_).filter(e=>e==null?void 0:e.startsWith(b)),ee=D==null?void 0:D.getTableStyleId(),te=I.find(e=>e===ee),L=te||I[0],R=O.getCustomRangeThemeStyle(_,L),z=(r=R==null||(a=R.getHeaderRowStyle())==null||(a=a.bg)==null?void 0:a.rgb)==null?x:r,B=(l=R==null||(f=R.getFirstRowStyle())==null||(f=f.bg)==null?void 0:f.rgb)==null?x:l,V=(p=R==null||(m=R.getSecondRowStyle())==null||(m=m.bg)==null?void 0:m.rgb)==null?x:p,H=(h=R==null||(g=R.getLastRowStyle())==null||(g=g.bg)==null?void 0:g.rgb)==null?x:h,[U,W]=(0,u.useState)(null),G=e=>{w.executeCommand(n.SetSheetTableCommand.id,{unitId:_,tableId:y,theme:e})},K=()=>{if(I.length>=11){M.emit(T.t(`sheets-table.customTooMore`));return}let e=I[I.length-1],t=`${b}1`;e&&(t=`${b}${Number(e.split(`-`)[2])+1}`);let r=new c.RangeThemeStyle(t,{...n.customEmptyThemeWithBorderStyle});w.executeCommand(n.AddTableThemeCommand.id,{unitId:_,tableId:y,themeStyle:r})},J=(e,t)=>{w.executeCommand(c.SetRangeThemeMutation.id,{unitId:_,subUnitId:v,styleName:e,style:t})},Y=e=>{w.executeCommand(n.RemoveTableThemeCommand.id,{unitId:_,tableId:y,themeName:e})};if((0,u.useEffect)(()=>{N(Math.random())},[A,j]),!D)return null;let X=new e.ColorKit(z).isDark(),ne=new e.ColorKit(B).isDark(),re=new e.ColorKit(V).isDark(),ie=new e.ColorKit(H).isDark();return(0,d.jsxs)(`div`,{children:[(0,d.jsx)(`h5`,{children:T.t(`sheets-table.defaultStyle`)}),(0,d.jsx)(`div`,{className:`univer-flex univer-gap-2`,children:F.map(e=>{var t,n,r,i;let a=O.getDefaultRangeThemeStyle(e),s=(a==null||(t=a.getHeaderRowStyle())==null||(t=t.bg)==null?void 0:t.rgb)||`rgb(255, 255, 255)`,c=(a==null||(n=a.getFirstRowStyle())==null||(n=n.bg)==null?void 0:n.rgb)||`rgb(255, 255, 255)`,l=(a==null||(r=a.getSecondRowStyle())==null||(r=r.bg)==null?void 0:r.rgb)||`rgb(255, 255, 255)`,u=(a==null||(i=a.getLastRowStyle())==null||(i=i.bg)==null?void 0:i.rgb)||`rgb(255, 255, 255)`;return(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px [&>div]:univer-box-border [&>div]:univer-h-2.5`,{"univer-border-blue-500":e===P.theme}),onClick:()=>G(e),children:[(0,d.jsx)(`div`,{style:{background:s,border:`${s?S:C}`}}),(0,d.jsx)(`div`,{style:{background:c,border:`${c?S:C}`}}),(0,d.jsx)(`div`,{style:{background:l,border:`${l?S:C}`}}),(0,d.jsx)(`div`,{style:{background:u,border:`${u?S:C}`}})]},e)})}),(0,d.jsx)(`h5`,{children:T.t(`sheets-table.customStyle`)}),(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-w-full univer-rounded-sm`,o.borderClassName),children:[(0,d.jsxs)(`div`,{className:`univer-flex univer-flex-wrap univer-gap-2 univer-p-2`,children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10`,o.borderClassName),onClick:K,children:`+`}),I.map(e=>{var t,n,r,i;let a=O.getCustomRangeThemeStyle(_,e),s=a==null||(t=a.getHeaderRowStyle())==null||(t=t.bg)==null?void 0:t.rgb,c=a==null||(n=a.getFirstRowStyle())==null||(n=n.bg)==null?void 0:n.rgb,l=a==null||(r=a.getSecondRowStyle())==null||(r=r.bg)==null?void 0:r.rgb,u=a==null||(i=a.getLastRowStyle())==null||(i=i.bg)==null?void 0:i.rgb;return(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px`,{"univer-border-blue-500":e===P.theme}),onClick:()=>G(e),onMouseEnter:()=>W(e),onMouseLeave:()=>W(null),children:[(0,d.jsx)(`div`,{className:`univer-box-border univer-h-2.5`,style:{background:s==null?S:s,border:`${s?S:C}`}}),(0,d.jsx)(`div`,{className:`univer-box-border univer-h-2.5`,style:{background:c==null?S:c,border:`${c?S:C}`}}),(0,d.jsx)(`div`,{className:`univer-box-border univer-h-2.5`,style:{background:l==null?S:l,border:`${l?S:C}`}}),(0,d.jsx)(`div`,{className:`univer-box-border univer-h-2.5`,style:{background:u==null?S:u,border:`${u?S:C}`}}),(0,d.jsx)(`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]`,style:{display:U===e?`block`:`none`},onClick:t=>{t.stopPropagation(),Y(e)},children:`x`})]},e)})]}),te&&(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(`div`,{className:`univer-h-px univer-w-full univer-bg-gray-200`}),(0,d.jsxs)(`div`,{className:`univer-flex univer-flex-col univer-gap-2 univer-p-2`,children:[(0,d.jsxs)(`div`,{className:`univer-flex univer-h-9 univer-gap-2`,children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9`,o.borderClassName,{"univer-text-white":X,"univer-text-gray-900":!X}),style:{background:z},children:T.t(`sheets-table.header`)}),(0,d.jsx)(o.Dropdown,{overlay:(0,d.jsx)(`div`,{className:`univer-p-2`,children:(0,d.jsx)(o.ColorPicker,{value:z,onChange:t=>{let r=(0,n.processStyleWithBorderStyle)(`headerRowStyle`,{bg:{rgb:t},cl:{rgb:new e.ColorKit(t).isDark()?`#fff`:`#000`}});J(D.getTableStyleId(),{headerRowStyle:r})}})}),children:(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1`,o.borderClassName),children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-size-4 univer-rounded-lg univer-bg-gray-400`,o.borderClassName,{"univer-text-white":X,"univer-text-gray-900":!X}),style:{background:z}}),(0,d.jsx)(s.DropdownIcon,{className:`univer-size-2`})]})})]}),(0,d.jsxs)(`div`,{className:`univer-flex univer-h-9 univer-gap-2`,children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9`,o.borderClassName,{"univer-text-white":ne,"univer-text-gray-900":!ne}),style:{background:B},children:T.t(`sheets-table.firstLine`)}),(0,d.jsx)(o.Dropdown,{overlay:(0,d.jsx)(`div`,{className:`univer-p-2`,children:(0,d.jsx)(o.ColorPicker,{value:B,onChange:t=>{J(D.getTableStyleId(),{firstRowStyle:{bg:{rgb:t},cl:{rgb:new e.ColorKit(t).isDark()?`#fff`:`#000`}}})}})}),children:(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1`,o.borderClassName),children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-size-4 univer-rounded-lg univer-bg-gray-400`,o.borderClassName),style:{background:B}}),(0,d.jsx)(s.DropdownIcon,{className:`univer-size-2`})]})})]}),(0,d.jsxs)(`div`,{className:`univer-flex univer-h-9 univer-gap-2`,children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9`,o.borderClassName,{"univer-text-white":re,"univer-text-gray-900":!re}),style:{background:V},children:T.t(`sheets-table.secondLine`)}),(0,d.jsx)(o.Dropdown,{overlay:(0,d.jsx)(`div`,{className:`univer-p-2`,children:(0,d.jsx)(o.ColorPicker,{value:V,onChange:t=>J(D.getTableStyleId(),{secondRowStyle:{bg:{rgb:t},cl:{rgb:new e.ColorKit(t).isDark()?`#fff`:`#000`}}})})}),children:(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1`,o.borderClassName),children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-size-4 univer-rounded-lg univer-bg-gray-400`,o.borderClassName),style:{background:V}}),(0,d.jsx)(s.DropdownIcon,{className:`univer-size-2`})]})})]}),(0,d.jsxs)(`div`,{className:`univer-flex univer-h-9 univer-gap-2`,children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9`,o.borderClassName,{"univer-text-white":ie,"univer-text-gray-900":!ie}),style:{background:H},children:T.t(`sheets-table.footer`)}),(0,d.jsx)(o.Dropdown,{overlay:(0,d.jsx)(`div`,{className:`univer-p-2`,children:(0,d.jsx)(o.ColorPicker,{value:H,onChange:t=>{let r=(0,n.processStyleWithBorderStyle)(`lastRowStyle`,{bg:{rgb:t},cl:{rgb:new e.ColorKit(t).isDark()?`#fff`:`#000`}});J(D.getTableStyleId(),{lastRowStyle:r})}})}),children:(0,d.jsxs)(`div`,{className:(0,o.clsx)(`univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1`,o.borderClassName),children:[(0,d.jsx)(`div`,{className:(0,o.clsx)(`univer-size-4 univer-rounded-lg univer-bg-gray-400`,o.borderClassName),style:{background:H}}),(0,d.jsx)(s.DropdownIcon,{className:`univer-size-2`})]})})]})]})]})]})]})},pe=`sheet.table.context-insert_menu-id`,me=`sheet.table.context-remove_menu-id`;function he(t){return{id:U.id,type:i.MenuItemType.BUTTON,icon:_,tooltip:`sheets-table.title`,title:`sheets-table.title`,hidden$:(0,i.getMenuHiddenObservable)(t,e.UniverInstanceType.UNIVER_SHEET),disabled$:(0,r.getCurrentRangeDisable$)(t,{},!0)}}function ge(e){return{id:pe,type:i.MenuItemType.SUBITEMS,icon:`InsertDoubleIcon`,title:`sheets-table.insert.main`,hidden$:Se(e)}}function _e(e){return{id:me,type:i.MenuItemType.SUBITEMS,icon:`ReduceDoubleIcon`,title:`sheets-table.remove.main`,hidden$:Se(e)}}function ve(e){return{id:n.SheetTableInsertRowCommand.id,type:i.MenuItemType.BUTTON,title:`sheets-table.insert.row`,hidden$:Ce(e)}}function ye(e){return{id:n.SheetTableInsertColCommand.id,title:`sheets-table.insert.col`,type:i.MenuItemType.BUTTON}}function be(e){return{id:n.SheetTableRemoveRowCommand.id,type:i.MenuItemType.BUTTON,title:`sheets-table.remove.row`,hidden$:Ce(e)}}function xe(e){return{id:n.SheetTableRemoveColCommand.id,title:`sheets-table.remove.col`,type:i.MenuItemType.BUTTON}}function Se(t){let r=t.get(c.SheetsSelectionsService);return t.get(e.IUniverInstanceService).getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SHEET).pipe((0,a.switchMap)(e=>e?e.activeSheet$.pipe((0,a.switchMap)(i=>i?r.selectionMoveEnd$.pipe((0,a.switchMap)(r=>{if(!r.length||r.length>1)return(0,a.of)(!0);let o=r[0].range;return(0,a.of)(!t.get(n.SheetsTableController).getContainerTableWithRange(e.getUnitId(),i.getSheetId(),o))})):(0,a.of)(!0))):(0,a.of)(!0)))}function Ce(t){let r=t.get(c.SheetsSelectionsService);return t.get(e.IUniverInstanceService).getCurrentTypeOfUnit$(e.UniverInstanceType.UNIVER_SHEET).pipe((0,a.switchMap)(e=>e?e.activeSheet$.pipe((0,a.switchMap)(i=>i?r.selectionMoveEnd$.pipe((0,a.switchMap)(r=>{if(!r.length||r.length>1)return(0,a.of)(!0);let o=r[0].range,s=t.get(n.SheetsTableController).getContainerTableWithRange(e.getUnitId(),i.getSheetId(),o);if(!s)return(0,a.of)(!0);let c=s.getRange();return o.startRow===c.startRow?(0,a.of)(!0):(0,a.of)(!1)})):(0,a.of)(!0))):(0,a.of)(!0)))}const we={[i.RibbonDataGroup.ORGANIZATION]:{[U.id]:{order:0,menuItemFactory:he}},[i.ContextMenuPosition.MAIN_AREA]:{[i.ContextMenuGroup.LAYOUT]:{[pe]:{order:5,menuItemFactory:ge,[n.SheetTableInsertRowCommand.id]:{order:1,menuItemFactory:ve},[n.SheetTableInsertColCommand.id]:{order:2,menuItemFactory:ye}},[me]:{order:6,menuItemFactory:_e,[n.SheetTableRemoveRowCommand.id]:{order:1,menuItemFactory:be},[n.SheetTableRemoveColCommand.id]:{order:2,menuItemFactory:xe}}}}};let Q=class extends e.Disposable{constructor(e,t){super(),this._componentManager=e,this._menuManagerService=t,this._initComponents(),this._initMenu()}_initComponents(){[[_,s.TableIcon],[v,de],[y,fe]].forEach(([e,t])=>{this.disposeWithMe(this._componentManager.register(e,t))})}_initMenu(){this._menuManagerService.mergeMenu(we)}};Q=A([k(0,(0,e.Inject)(i.ComponentManager)),k(1,(0,e.Inject)(i.IMenuManagerService))],Q);let $=class extends e.Plugin{constructor(t=K,n,r,i,a){super(),this._config=t,this._injector=n,this._commandService=r,this._configService=i,this._renderManagerService=a;let{menu:o,...s}=(0,e.merge)({},K,this._config);o&&this._configService.setConfig(`menu`,o,{merge:!0}),this._configService.setConfig(G,s),this._initRegisterCommand()}onStarting(){(0,e.registerDependencies)(this._injector,[[V],[j],[Q],[q],[Z]])}onReady(){(0,e.touchDependencies)(this._injector,[[V],[j],[Q],[q],[Z]])}onRendered(){this._registerRenderModules()}_registerRenderModules(){let t=[[le],[ue]];this._config.hideAnchor!==!0&&t.push([Y]),t.forEach(t=>{this.disposeWithMe(this._renderManagerService.registerRenderModule(e.UniverInstanceType.UNIVER_SHEET,t))})}_initRegisterCommand(){[H,U].forEach(e=>this._commandService.registerCommand(e))}};O($,`pluginName`,`SHEET_TABLE_UI_PLUGIN`),O($,`packageName`,m),O($,`version`,h),O($,`type`,e.UniverInstanceType.UNIVER_SHEET),$=A([(0,e.DependentOn)(n.UniverSheetsTablePlugin),k(1,(0,e.Inject)(e.Injector)),k(2,(0,e.Inject)(e.ICommandService)),k(3,e.IConfigService),k(4,t.IRenderManagerService)],$),Object.defineProperty(exports,`UniverSheetsTableUIPlugin`,{enumerable:!0,get:function(){return $}});
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+let _univerjs_core = require("@univerjs/core");
+let _univerjs_engine_render = require("@univerjs/engine-render");
+let _univerjs_sheets_table = require("@univerjs/sheets-table");
+let _univerjs_sheets_ui = require("@univerjs/sheets-ui");
+let _univerjs_ui = require("@univerjs/ui");
+let rxjs = require("rxjs");
+let _univerjs_design = require("@univerjs/design");
+let _univerjs_icons = require("@univerjs/icons");
+let _univerjs_sheets = require("@univerjs/sheets");
+let _univerjs_sheets_sort = require("@univerjs/sheets-sort");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _univerjs_engine_formula = require("@univerjs/engine-formula");
+let _univerjs_sheets_formula_ui = require("@univerjs/sheets-formula-ui");
+
+//#region package.json
+var name = "@univerjs/sheets-table-ui";
+var version = "0.20.1-insiders.20260418-3a69981";
+
+//#endregion
+//#region src/const.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const PLUGIN_NAME = "SHEET_TABLE_UI_PLUGIN";
+const SHEETS_TABLE_FILTER_PANEL_OPENED_KEY = "SHEETS_TABLE_FILTER_PANEL_OPENED_KEY";
+const UNIVER_SHEET_TABLE_FILTER_PANEL_ID = "UNIVER_SHEET_Table_FILTER_PANEL_ID";
+const TABLE_TOOLBAR_BUTTON = "TABLE_TOOLBAR_BUTTON";
+const TABLE_SELECTOR_DIALOG = "TABLE_SELECTOR_DIALOG";
+const SHEET_TABLE_THEME_PANEL_ID = "SHEET_TABLE_THEME_PANEL_ID";
+const SHEET_TABLE_THEME_PANEL = "SHEET_TABLE_THEME_PANEL";
+const TABLE_CUSTOM_NAME_PREFIX = "table-custom-";
+const TABLE_DEFAULT_NAME_PREFIX = "table-default-";
+const TABLE_DEFAULT_BG_COLOR = "rgb(255, 255, 255)";
+const TABLE_BORDER_NONE = "none";
+const TABLE_BORDER_DEFAULT = "1px solid rgb(var(--grey-200))";
+
+//#endregion
+//#region src/types.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let FilterByEnum = /* @__PURE__ */ function(FilterByEnum) {
+	FilterByEnum["Items"] = "items";
+	FilterByEnum["Condition"] = "condition";
+	return FilterByEnum;
+}({});
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/typeof.js
+function _typeof(o) {
+	"@babel/helpers - typeof";
+	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
+		return typeof o;
+	} : function(o) {
+		return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+	}, _typeof(o);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPrimitive.js
+function toPrimitive(t, r) {
+	if ("object" != _typeof(t) || !t) return t;
+	var e = t[Symbol.toPrimitive];
+	if (void 0 !== e) {
+		var i = e.call(t, r || "default");
+		if ("object" != _typeof(i)) return i;
+		throw new TypeError("@@toPrimitive must return a primitive value.");
+	}
+	return ("string" === r ? String : Number)(t);
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/toPropertyKey.js
+function toPropertyKey(t) {
+	var i = toPrimitive(t, "string");
+	return "symbol" == _typeof(i) ? i : i + "";
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/defineProperty.js
+function _defineProperty(e, r, t) {
+	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+		value: t,
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : e[r] = t, e;
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorateParam.js
+function __decorateParam(paramIndex, decorator) {
+	return function(target, key) {
+		decorator(target, key, paramIndex);
+	};
+}
+
+//#endregion
+//#region \0@oxc-project+runtime@0.124.0/helpers/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+
+//#endregion
+//#region src/services/sheets-table-ui-service.ts
+let SheetsTableUiService = class SheetsTableUiService extends _univerjs_core.Disposable {
+	constructor(_tableManager, _sheetTableService, _univerInstanceService, _commandService, _localeService) {
+		super();
+		this._tableManager = _tableManager;
+		this._sheetTableService = _sheetTableService;
+		this._univerInstanceService = _univerInstanceService;
+		this._commandService = _commandService;
+		this._localeService = _localeService;
+		_defineProperty(this, "_itemsCache", /* @__PURE__ */ new Map());
+		this._registerTableFilterChangeEvent();
+	}
+	_registerTableFilterChangeEvent() {
+		this._commandService.onCommandExecuted((command) => {
+			if (command.id === _univerjs_sheets.SetRangeValuesMutation.id) {
+				const { unitId, subUnitId, cellValue } = command.params;
+				const tables = this._tableManager.getTablesBySubunitId(unitId, subUnitId);
+				if (!tables.length) return;
+				new _univerjs_core.ObjectMatrix(cellValue).forValue((row, col, _value) => {
+					const cellRange = (0, _univerjs_core.cellToRange)(row, col);
+					const overlapTable = tables.find((table) => {
+						const tableRange = table.getTableFilterRange();
+						return _univerjs_core.Rectangle.intersects(tableRange, cellRange);
+					});
+					if (overlapTable) {
+						const colIndex = col - overlapTable.getRange().startColumn;
+						this._itemsCache.delete(overlapTable.getId() + colIndex);
+					}
+				});
+			} else if (command.id === _univerjs_sheets_table.SetSheetTableFilterCommand.id) {
+				const { unitId, tableId } = command.params;
+				const table = this._tableManager.getTable(unitId, tableId);
+				if (!table) return;
+				const subUnitId = table.getSubunitId();
+				this._tableManager.getTablesBySubunitId(unitId, subUnitId).forEach((table) => {
+					const range = table.getRange();
+					for (let i = range.startColumn; i <= range.endColumn; i++) this._itemsCache.delete(table.getId() + i);
+				});
+			}
+		});
+	}
+	getTableFilterPanelInitProps(unitId, subUnitId, tableId, column) {
+		const table = this._tableManager.getTable(unitId, tableId);
+		const tableRange = table.getRange();
+		const tableFilter = table.getTableFilterColumn(column - tableRange.startColumn);
+		return {
+			unitId,
+			subUnitId,
+			tableFilter,
+			currentFilterBy: (0, _univerjs_sheets_table.isConditionFilter)(tableFilter) ? FilterByEnum.Condition : FilterByEnum.Items,
+			tableId,
+			columnIndex: column - tableRange.startColumn
+		};
+	}
+	getTableFilterCheckedItems(unitId, tableId, columnIndex) {
+		const table = this._tableManager.getTable(unitId, tableId);
+		const checkedItems = [];
+		if (table) {
+			const filter = table.getTableFilterColumn(columnIndex);
+			if (filter && (0, _univerjs_sheets_table.isManualTableFilter)(filter)) checkedItems.push(...filter.values);
+		}
+		return checkedItems;
+	}
+	setTableFilter(unitId, tableId, columnIndex, tableFilter) {
+		if (!this._tableManager.getTable(unitId, tableId)) return;
+		const setTableFilterParams = {
+			unitId,
+			tableId,
+			column: columnIndex,
+			tableFilter
+		};
+		this._commandService.executeCommand(_univerjs_sheets_table.SetSheetTableFilterCommand.id, setTableFilterParams);
+	}
+	getTableFilterItems(unitId, subUnitId, tableId, columnIndex) {
+		var _this$_univerInstance;
+		if (this._itemsCache.has(tableId + columnIndex)) return this._itemsCache.get(tableId + columnIndex) || {
+			data: [],
+			itemsCountMap: /* @__PURE__ */ new Map(),
+			allItemsCount: 0
+		};
+		const table = this._tableManager.getTable(unitId, tableId);
+		if (!table) return {
+			data: [],
+			itemsCountMap: /* @__PURE__ */ new Map(),
+			allItemsCount: 0
+		};
+		const { startRow, endRow, startColumn } = table.getTableFilterRange();
+		const column = startColumn + columnIndex;
+		const worksheet = (_this$_univerInstance = this._univerInstanceService.getUnit(unitId)) === null || _this$_univerInstance === void 0 ? void 0 : _this$_univerInstance.getSheetBySheetId(subUnitId);
+		if (!worksheet) return {
+			data: [],
+			itemsCountMap: /* @__PURE__ */ new Map(),
+			allItemsCount: 0
+		};
+		const data = [];
+		const map = /* @__PURE__ */ new Map();
+		let allItemsCount = 0;
+		for (let row = startRow; row <= endRow; row++) {
+			if (worksheet.isRowFiltered(row)) continue;
+			let stringItem = this._sheetTableService.getCellValueWithConditionType(worksheet, row, column);
+			if (stringItem === void 0) stringItem = this._localeService.t("sheets-table.condition.empty");
+			if (!map.has(stringItem)) data.push({
+				title: stringItem,
+				key: `${column}_${row}`,
+				leaf: true
+			});
+			allItemsCount++;
+			map.set(stringItem, (map.get(stringItem) || 0) + 1);
+		}
+		this._itemsCache.set(tableId + columnIndex, {
+			data,
+			itemsCountMap: map,
+			allItemsCount
+		});
+		return {
+			data,
+			itemsCountMap: map,
+			allItemsCount
+		};
+	}
+};
+SheetsTableUiService = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_table.SheetTableService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
+	__decorateParam(3, _univerjs_core.ICommandService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService))
+], SheetsTableUiService);
+
+//#endregion
+//#region src/views/components/type.ts
+let ConditionSubComponentEnum = /* @__PURE__ */ function(ConditionSubComponentEnum) {
+	ConditionSubComponentEnum["DatePicker"] = "DatePicker";
+	ConditionSubComponentEnum["DateRange"] = "DateRange";
+	ConditionSubComponentEnum["Input"] = "Input";
+	ConditionSubComponentEnum["Inputs"] = "Inputs";
+	ConditionSubComponentEnum["Select"] = "Select";
+	ConditionSubComponentEnum["None"] = "None";
+	return ConditionSubComponentEnum;
+}({});
+
+//#endregion
+//#region src/views/components/util.ts
+function getCascaderListOptions(injector) {
+	const t = injector.get(_univerjs_core.LocaleService).t;
+	return [
+		{
+			value: _univerjs_sheets_table.TableConditionTypeEnum.String,
+			label: t(`sheets-table.condition.${_univerjs_sheets_table.TableConditionTypeEnum.String}`),
+			children: [
+				{
+					value: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
+					label: t(`sheets-table.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.Equal}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableStringCompareTypeEnum.NotEqual,
+					label: t(`sheets-table.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.NotEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableStringCompareTypeEnum.Contains,
+					label: t(`sheets-table.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.Contains}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableStringCompareTypeEnum.NotContains,
+					label: t(`sheets-table.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.NotContains}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableStringCompareTypeEnum.StartsWith,
+					label: t(`sheets-table.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.StartsWith}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableStringCompareTypeEnum.EndsWith,
+					label: t(`sheets-table.string.compare.${_univerjs_sheets_table.TableStringCompareTypeEnum.EndsWith}`)
+				}
+			]
+		},
+		{
+			value: _univerjs_sheets_table.TableConditionTypeEnum.Number,
+			label: t(`sheets-table.condition.${_univerjs_sheets_table.TableConditionTypeEnum.Number}`),
+			children: [
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Equal,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Equal}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.NotEqual,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.NotEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThan,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThan}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThanOrEqual,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.GreaterThanOrEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.LessThan,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.LessThan}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.LessThanOrEqual,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.LessThanOrEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Between,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Between}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Above,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Above}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableNumberCompareTypeEnum.Below,
+					label: t(`sheets-table.number.compare.${_univerjs_sheets_table.TableNumberCompareTypeEnum.Below}`)
+				}
+			]
+		},
+		{
+			value: _univerjs_sheets_table.TableConditionTypeEnum.Date,
+			label: t(`sheets-table.condition.${_univerjs_sheets_table.TableConditionTypeEnum.Date}`),
+			children: [
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Equal,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Equal}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.After,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.After}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.AfterOrEqual,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.AfterOrEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Before,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Before}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.BeforeOrEqual,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.BeforeOrEqual}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Between,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Between}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Today,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Today}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Yesterday,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Yesterday}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Tomorrow,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Tomorrow}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.ThisWeek,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisWeek}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.LastWeek,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastWeek}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NextWeek,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextWeek}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.ThisMonth,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisMonth}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.LastMonth,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastMonth}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NextMonth,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextMonth}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.ThisYear,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.ThisYear}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.LastYear,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.LastYear}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.NextYear,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.NextYear}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Quarter}`)
+				},
+				{
+					value: _univerjs_sheets_table.TableDateCompareTypeEnum.Month,
+					label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Month}`)
+				}
+			]
+		}
+	];
+}
+function getConditionDateSelect(injector, dateType) {
+	if (!dateType) return [];
+	const t = injector.get(_univerjs_core.LocaleService).t;
+	switch (dateType) {
+		case _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter: return [
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q1,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q1}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q2,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q2}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q3,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q3}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.Q4,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.Q4}`)
+			}
+		];
+		case _univerjs_sheets_table.TableDateCompareTypeEnum.Month: return [
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M1,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M1}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M2,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M2}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M3,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M3}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M4,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M4}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M5,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M5}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M6,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M6}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M7,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M7}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M8,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M8}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M9,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M9}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M10,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M10}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M11,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M11}`)
+			},
+			{
+				value: _univerjs_sheets_table.TableDateCompareTypeEnum.M12,
+				label: t(`sheets-table.date.compare.${_univerjs_sheets_table.TableDateCompareTypeEnum.M12}`)
+			}
+		];
+		default: return [];
+	}
+}
+const datePickerSet = new Set([
+	_univerjs_sheets_table.TableDateCompareTypeEnum.Equal,
+	_univerjs_sheets_table.TableDateCompareTypeEnum.NotEqual,
+	_univerjs_sheets_table.TableDateCompareTypeEnum.After,
+	_univerjs_sheets_table.TableDateCompareTypeEnum.AfterOrEqual,
+	_univerjs_sheets_table.TableDateCompareTypeEnum.Before,
+	_univerjs_sheets_table.TableDateCompareTypeEnum.BeforeOrEqual
+]);
+function getSubComponentType(type, compare) {
+	if (!compare) return ConditionSubComponentEnum.None;
+	if (type === _univerjs_sheets_table.TableConditionTypeEnum.String) return ConditionSubComponentEnum.Input;
+	else if (type === _univerjs_sheets_table.TableConditionTypeEnum.Number) if (compare === _univerjs_sheets_table.TableNumberCompareTypeEnum.Between || compare === _univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween) return ConditionSubComponentEnum.Inputs;
+	else return ConditionSubComponentEnum.Input;
+	else if (type === _univerjs_sheets_table.TableConditionTypeEnum.Date) {
+		if (compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Between || compare === _univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween) return ConditionSubComponentEnum.DateRange;
+		else if (compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter || compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month) return ConditionSubComponentEnum.Select;
+		else if (datePickerSet.has(compare)) return ConditionSubComponentEnum.DatePicker;
+		return ConditionSubComponentEnum.None;
+	}
+	return ConditionSubComponentEnum.None;
+}
+function getInitConditionInfo(tableFilter) {
+	if (!tableFilter || tableFilter.filterType !== "condition") return {
+		type: _univerjs_sheets_table.TableConditionTypeEnum.String,
+		compareType: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
+		info: {}
+	};
+	const filterInfo = tableFilter.filterInfo;
+	const { conditionType, compareType } = filterInfo;
+	if (conditionType === _univerjs_sheets_table.TableConditionTypeEnum.Date) if (compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.Between || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.NotBetween) {
+		let dateRange;
+		if (Array.isArray(filterInfo.expectedValue)) dateRange = filterInfo.expectedValue.map((i) => typeof i === "string" ? new Date(i) : i);
+		return {
+			type: conditionType,
+			compare: compareType,
+			info: { dateRange }
+		};
+	} else if (compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.Today || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.Yesterday || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.Tomorrow || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.ThisWeek || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.LastWeek || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.NextWeek || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.ThisMonth || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.LastMonth || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.NextMonth || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.ThisYear || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.LastYear || compareType === _univerjs_sheets_table.TableDateCompareTypeEnum.NextYear) return {
+		type: conditionType,
+		compare: compareType,
+		info: {}
+	};
+	else if (datePickerSet.has(compareType)) {
+		let date;
+		if (typeof filterInfo.expectedValue === "string") date = new Date(filterInfo.expectedValue);
+		else if (Array.isArray(filterInfo.expectedValue)) {
+			for (let i = 0; i < filterInfo.expectedValue.length; i++) if (typeof filterInfo.expectedValue[i] === "string") filterInfo.expectedValue[i] = new Date(filterInfo.expectedValue[i]);
+		}
+		return {
+			type: conditionType,
+			compare: compareType,
+			info: { date }
+		};
+	} else if (new Set([
+		_univerjs_sheets_table.TableDateCompareTypeEnum.Q1,
+		_univerjs_sheets_table.TableDateCompareTypeEnum.Q2,
+		_univerjs_sheets_table.TableDateCompareTypeEnum.Q3,
+		_univerjs_sheets_table.TableDateCompareTypeEnum.Q4
+	]).has(compareType)) return {
+		type: conditionType,
+		compare: _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter,
+		info: { dateSelect: filterInfo.compareType }
+	};
+	else return {
+		type: conditionType,
+		compare: _univerjs_sheets_table.TableDateCompareTypeEnum.Month,
+		info: { dateSelect: filterInfo.compareType }
+	};
+	else if (conditionType === _univerjs_sheets_table.TableConditionTypeEnum.Number) if (compareType === _univerjs_sheets_table.TableNumberCompareTypeEnum.Between || compareType === _univerjs_sheets_table.TableNumberCompareTypeEnum.NotBetween) return {
+		type: conditionType,
+		compare: compareType,
+		info: { numberRange: filterInfo.expectedValue }
+	};
+	else return {
+		type: conditionType,
+		compare: compareType,
+		info: { number: filterInfo.expectedValue }
+	};
+	else if (conditionType === _univerjs_sheets_table.TableConditionTypeEnum.String) return {
+		type: conditionType,
+		compare: compareType,
+		info: { string: filterInfo.expectedValue }
+	};
+	return {
+		type: _univerjs_sheets_table.TableConditionTypeEnum.String,
+		compare: _univerjs_sheets_table.TableStringCompareTypeEnum.Equal,
+		info: {}
+	};
+}
+
+//#endregion
+//#region src/views/components/SheetTableConditionPanel.tsx
+const SheetTableConditionPanel = (props) => {
+	var _conditionInfo$info$d, _conditionInfo$info$d2, _conditionInfo$info$d3, _conditionInfo$info$d4, _conditionInfo$info$d5, _conditionInfo$info$n, _conditionInfo$info$n3, _conditionInfo$info$d6;
+	const { conditionInfo, onChange } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const [conditionVisible, setConditionVisible] = (0, react.useState)(false);
+	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
+	const cascaderOptions = getCascaderListOptions(injector);
+	const handleConditionInfo = (info, type, compare) => {
+		onChange({
+			type: type !== null && type !== void 0 ? type : conditionInfo.type,
+			compare: compare !== null && compare !== void 0 ? compare : conditionInfo.compare,
+			info
+		});
+	};
+	const handleChange = (value) => {
+		var _ref;
+		const type = value[0];
+		const compare = value[1];
+		if (compare) setConditionVisible(false);
+		const info = {};
+		if (type === _univerjs_sheets_table.TableConditionTypeEnum.Date) if (compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter) info.dateSelect = _univerjs_sheets_table.TableDateCompareTypeEnum.Q1;
+		else if (compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month) info.dateSelect = _univerjs_sheets_table.TableDateCompareTypeEnum.M1;
+		else if (datePickerSet.has(compare)) info.date = /* @__PURE__ */ new Date();
+		else info.dateRange = [/* @__PURE__ */ new Date(), /* @__PURE__ */ new Date()];
+		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.Number) info.number = 0;
+		else if (type === _univerjs_sheets_table.TableConditionTypeEnum.String) info.string = "";
+		handleConditionInfo(info, value[0], (_ref = value[1]) !== null && _ref !== void 0 ? _ref : _univerjs_sheets_table.TableStringCompareTypeEnum.Equal);
+	};
+	const subComponentType = getSubComponentType(conditionInfo.type, conditionInfo.compare);
+	let selectType = "";
+	if (conditionInfo.compare) selectType = `${localeService.t(`sheets-table.condition.${conditionInfo.type}`)} - ${localeService.t(`sheets-table.${conditionInfo.type}.compare.${conditionInfo.compare}`)}`;
+	else selectType = localeService.t(`sheets-table.condition.${conditionInfo.type}`);
+	const conditionDateOptions = getConditionDateSelect(injector, conditionInfo.compare);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+		align: "start",
+		open: conditionVisible,
+		onOpenChange: setConditionVisible,
+		overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.CascaderList, {
+			value: [conditionInfo.type, conditionInfo.compare],
+			options: cascaderOptions,
+			onChange: handleChange,
+			contentClassName: "univer-flex-1",
+			wrapperClassName: "!univer-h-[150px]"
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _univerjs_design.clsx)("univer-box-border univer-flex univer-h-8 univer-w-full univer-items-center univer-justify-between univer-rounded-md univer-bg-white univer-px-2 univer-text-sm univer-transition-colors univer-duration-200 hover:univer-border-primary-600 focus:univer-border-primary-600 focus:univer-outline-none focus:univer-ring-2 dark:!univer-bg-gray-700 dark:!univer-text-white", _univerjs_design.borderClassName),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: selectType }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {})]
+		})
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-mt-3 univer-w-full",
+		children: [
+			subComponentType === ConditionSubComponentEnum.Input && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: conditionInfo.type === _univerjs_sheets_table.TableConditionTypeEnum.String ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+				className: "univer-w-full",
+				placeholder: "请输入",
+				value: conditionInfo.info.string,
+				onChange: (v) => handleConditionInfo({ string: v })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+				className: "univer-h-7 univer-w-full",
+				value: conditionInfo.info.number,
+				controls: false,
+				onChange: (v) => {
+					if (v !== null) handleConditionInfo({ number: v });
+				}
+			}) }),
+			!!(subComponentType === ConditionSubComponentEnum.DatePicker) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: "univer-table-date-picker-wrapper",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DatePicker, {
+					className: "univer-w-full",
+					value: (_conditionInfo$info$d = conditionInfo.info.date) !== null && _conditionInfo$info$d !== void 0 ? _conditionInfo$info$d : /* @__PURE__ */ new Date(),
+					onValueChange: (v) => handleConditionInfo({ date: v })
+				})
+			}),
+			!!(subComponentType === ConditionSubComponentEnum.DateRange) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: "univer-table-date-range-wrapper",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.DateRangePicker, {
+					className: "univer-w-full",
+					value: [(_conditionInfo$info$d2 = (_conditionInfo$info$d3 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d3 === void 0 ? void 0 : _conditionInfo$info$d3[0]) !== null && _conditionInfo$info$d2 !== void 0 ? _conditionInfo$info$d2 : /* @__PURE__ */ new Date(), (_conditionInfo$info$d4 = (_conditionInfo$info$d5 = conditionInfo.info.dateRange) === null || _conditionInfo$info$d5 === void 0 ? void 0 : _conditionInfo$info$d5[1]) !== null && _conditionInfo$info$d4 !== void 0 ? _conditionInfo$info$d4 : /* @__PURE__ */ new Date()],
+					onValueChange: (v) => {
+						if (v) handleConditionInfo({ dateRange: v });
+						else handleConditionInfo({});
+					}
+				})
+			}),
+			subComponentType === ConditionSubComponentEnum.Inputs && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-items-center univer-gap-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						className: "univer-w-full",
+						value: (_conditionInfo$info$n = conditionInfo.info.numberRange) === null || _conditionInfo$info$n === void 0 ? void 0 : _conditionInfo$info$n[0],
+						onChange: (v) => {
+							if (v !== null) {
+								var _conditionInfo$info$n2;
+								handleConditionInfo({ numberRange: [v, (_conditionInfo$info$n2 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n2 === void 0 ? void 0 : _conditionInfo$info$n2[1]] });
+							}
+						},
+						controls: false
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: " - " }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.InputNumber, {
+						className: "univer-w-full",
+						value: (_conditionInfo$info$n3 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n3 === void 0 ? void 0 : _conditionInfo$info$n3[1],
+						controls: false,
+						onChange: (v) => {
+							if (v !== null) {
+								var _conditionInfo$info$n4;
+								handleConditionInfo({ numberRange: [(_conditionInfo$info$n4 = conditionInfo.info.numberRange) === null || _conditionInfo$info$n4 === void 0 ? void 0 : _conditionInfo$info$n4[0], v] });
+							}
+						}
+					})
+				]
+			}),
+			!!(subComponentType === ConditionSubComponentEnum.Select) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+				className: "univer-w-full",
+				value: (_conditionInfo$info$d6 = conditionInfo.info.dateSelect) !== null && _conditionInfo$info$d6 !== void 0 ? _conditionInfo$info$d6 : conditionDateOptions[0].value,
+				options: conditionDateOptions,
+				onChange: (v) => handleConditionInfo({ dateSelect: v })
+			})
+		]
+	})] });
+};
+
+//#endregion
+//#region src/views/components/SheetTableItemsFilterPanel.tsx
+const getCheckedCount = (map) => {
+	let count = 0;
+	map.forEach((value) => {
+		count += value;
+	});
+	return count;
+};
+function SheetTableItemsFilterPanel(props) {
+	const { unitId, tableId, subUnitId, columnIndex, checkedItemSet, setCheckedItemSet, tableFilter } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const { data: items, itemsCountMap, allItemsCount } = (0, _univerjs_ui.useDependency)(SheetsTableUiService).getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
+	const [allChecked, setAllChecked] = (0, react.useState)(tableFilter === void 0 ? true : checkedItemSet.size === itemsCountMap.size);
+	const [checkedCount, setCheckedCount] = (0, react.useState)(allChecked ? allItemsCount : getCheckedCount(itemsCountMap));
+	const indeterminate = !allChecked && checkedItemSet.size > 0;
+	const [searchText, setSearchText] = (0, react.useState)("");
+	const displayItems = (0, react.useMemo)(() => {
+		return searchText ? items.filter((item) => {
+			return String(item.title).toLowerCase().includes(searchText.toLowerCase());
+		}) : items;
+	}, [searchText, items]);
+	const onCheckAllToggled = (0, react.useCallback)(() => {
+		if (allChecked) {
+			checkedItemSet.clear();
+			setCheckedItemSet(new Set(checkedItemSet));
+			setAllChecked(false);
+		} else {
+			displayItems.forEach((item) => {
+				checkedItemSet.add(item.title);
+			});
+			setCheckedItemSet(new Set(checkedItemSet));
+			setAllChecked(true);
+		}
+	}, [allChecked]);
+	const onSearchValueChange = (0, react.useCallback)((str) => {
+		if (str === "") {
+			setAllChecked(true);
+			items.forEach((item) => {
+				checkedItemSet.add(item.title);
+			});
+			setCheckedCount(allItemsCount);
+		} else {
+			checkedItemSet.clear();
+			setAllChecked(false);
+			setCheckedCount(0);
+		}
+		setSearchText(str);
+	}, []);
+	const onCheckItemToggled = (key) => {
+		if (allChecked) {
+			setAllChecked(false);
+			const newSet = /* @__PURE__ */ new Set();
+			for (const { title } of items) if (key !== title) newSet.add(title);
+			setCheckedCount(allItemsCount - itemsCountMap.get(key));
+			setCheckedItemSet(newSet);
+		} else {
+			if (checkedItemSet.has(key)) {
+				checkedItemSet.delete(key);
+				setCheckedCount(checkedCount - itemsCountMap.get(key));
+			} else {
+				checkedItemSet.add(key);
+				setCheckedCount(checkedCount + itemsCountMap.get(key));
+			}
+			setCheckedItemSet(new Set(checkedItemSet));
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-flex univer-h-full univer-flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+			autoFocus: true,
+			value: searchText,
+			placeholder: localeService.t("sheets-table.filter.search-placeholder"),
+			onChange: onSearchValueChange
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-h-[180px] univer-max-h-[180px] univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-py-1.5 univer-pl-2", _univerjs_design.borderClassName),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _univerjs_design.clsx)("univer-h-40 univer-overflow-y-auto univer-py-1 univer-pl-2", _univerjs_design.scrollbarClassName),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-h-full",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-flex univer-items-center univer-px-2 univer-py-1",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+							indeterminate,
+							disabled: items.length === 0,
+							checked: allChecked,
+							onChange: onCheckAllToggled,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: "univer-flex univer-h-5 univer-flex-1 univer-items-center univer-text-sm",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "univer-inline-block univer-truncate",
+									children: `${localeService.t("sheets-table.filter.select-all")}`
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "univer-ml univer-text-gray-400",
+									children: `(${checkedCount}/${searchText ? displayItems.length : allItemsCount})`
+								})]
+							})
+						})
+					}), displayItems.map((item) => {
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-flex univer-items-center univer-px-2 univer-py-1",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+								checked: allChecked || checkedItemSet.has(item.title),
+								onChange: () => {
+									onCheckItemToggled(item.title);
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									className: "univer-flex univer-h-5 univer-flex-1 univer-text-sm",
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "univer-inline-block univer-truncate",
+										children: item.title
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										className: "univer-ml-1 univer-text-gray-400",
+										children: `(${itemsCountMap.get(item.title) || 0})`
+									})]
+								})
+							})
+						}, item.key);
+					})]
+				})
+			})
+		})]
+	});
+}
+
+//#endregion
+//#region src/views/components/SheetTableFilterPanel.tsx
+function SheetTableFilterPanel() {
+	var _permissionService$ge;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const filterByItems = useFilterByOptions(localeService);
+	const tableUiService = (0, _univerjs_ui.useDependency)(SheetsTableUiService);
+	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const permissionService = (0, _univerjs_ui.useDependency)(_univerjs_core.IPermissionService);
+	const sheetsTableComponentController = (0, _univerjs_ui.useDependency)(SheetsTableComponentController);
+	const tableFilterPanelInfo = sheetsTableComponentController.getCurrentTableFilterInfo();
+	const props = tableUiService.getTableFilterPanelInitProps(tableFilterPanelInfo.unitId, tableFilterPanelInfo.subUnitId, tableFilterPanelInfo.tableId, tableFilterPanelInfo.column);
+	const { unitId, subUnitId, tableId, tableFilter, currentFilterBy, columnIndex } = props;
+	const { data } = tableUiService.getTableFilterItems(unitId, subUnitId, tableId, columnIndex);
+	const checkedItems = tableUiService.getTableFilterCheckedItems(unitId, tableId, columnIndex);
+	const [checkedItemSet, setCheckedItemSet] = (0, react.useState)(new Set(checkedItems));
+	const [filterBy, setFilterBy] = (0, react.useState)(currentFilterBy || FilterByEnum.Items);
+	const [conditionInfo, setConditionInfo] = (0, react.useState)(() => {
+		const tableFilter = props.tableFilter;
+		return getInitConditionInfo(tableFilter);
+	});
+	const table = tableManager.getTable(unitId, tableId);
+	if (!table) return null;
+	const tableFilters = table.getTableFilters();
+	const sortState = tableFilters.getSortState();
+	sortState.columnIndex === columnIndex && (sortState.sortState, _univerjs_sheets_table.SheetsTableSortStateEnum.Asc);
+	sortState.columnIndex === columnIndex && (sortState.sortState, _univerjs_sheets_table.SheetsTableSortStateEnum.Desc);
+	const closeDialog = () => {
+		sheetsTableComponentController.closeFilterPanel();
+	};
+	const onCancel = () => {
+		closeDialog();
+	};
+	const applySort = (asc) => {
+		const range = table.getTableFilterRange();
+		commandService.executeCommand(_univerjs_sheets_sort.SortRangeCommand.id, {
+			unitId,
+			subUnitId,
+			range,
+			orderRules: [{
+				colIndex: columnIndex + range.startColumn,
+				type: asc ? _univerjs_sheets_sort.SortType.ASC : _univerjs_sheets_sort.SortType.DESC
+			}],
+			hasTitle: false
+		});
+		tableFilters.setSortState(columnIndex, asc ? _univerjs_sheets_table.SheetsTableSortStateEnum.Asc : _univerjs_sheets_table.SheetsTableSortStateEnum.Desc);
+		closeDialog();
+	};
+	const onApply = () => {
+		if (filterBy === FilterByEnum.Items) {
+			const filteredItems = [];
+			for (const itemInfo of data) if (checkedItemSet.has(itemInfo.title)) filteredItems.push(itemInfo.title);
+			const originFilter = table.getTableFilterColumn(columnIndex);
+			if (originFilter) {
+				if (originFilter.values.join(",") === filteredItems.join(",")) {
+					closeDialog();
+					return;
+				}
+			} else if (filteredItems.length === 0) {
+				closeDialog();
+				return;
+			}
+			const tableFilter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.manual,
+				values: filteredItems
+			};
+			tableUiService.setTableFilter(unitId, tableId, columnIndex, tableFilter);
+		} else {
+			let filterInfo;
+			if (conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Quarter || conditionInfo.compare === _univerjs_sheets_table.TableDateCompareTypeEnum.Month) filterInfo = {
+				conditionType: conditionInfo.type,
+				compareType: Object.values(conditionInfo.info)[0]
+			};
+			else filterInfo = {
+				conditionType: conditionInfo.type,
+				compareType: conditionInfo.compare,
+				expectedValue: Object.values(conditionInfo.info)[0]
+			};
+			const tableFilter = {
+				filterType: _univerjs_sheets_table.TableColumnFilterTypeEnum.condition,
+				filterInfo
+			};
+			tableUiService.setTableFilter(unitId, tableId, columnIndex, tableFilter);
+		}
+		closeDialog();
+	};
+	const onClearFilter = () => {
+		tableUiService.setTableFilter(unitId, tableId, columnIndex, void 0);
+		closeDialog();
+	};
+	const workbookEditableId = new _univerjs_sheets.WorkbookEditablePermission(unitId).id;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-box-border univer-flex univer-min-w-[312px] univer-flex-col univer-rounded-[10px] univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
+		children: [
+			((_permissionService$ge = permissionService.getPermissionPoint(workbookEditableId)) === null || _permissionService$ge === void 0 ? void 0 : _permissionService$ge.value) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mb-3 univer-flex",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.ButtonGroup, {
+					className: "univer-mb-3 !univer-flex univer-w-full",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+						className: "univer-w-1/2",
+						onClick: () => applySort(true),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AscendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-sort.general.sort-asc")]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.Button, {
+						className: "univer-w-1/2",
+						onClick: () => applySort(false),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DescendingIcon, { className: "univer-mr-1" }), localeService.t("sheets-sort.general.sort-desc")]
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-w-full",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Segmented, {
+					value: filterBy,
+					items: filterByItems,
+					onChange: (value) => setFilterBy(value)
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-z-10 univer-h-60",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-mt-3 univer-size-full",
+					children: filterBy === FilterByEnum.Items ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableItemsFilterPanel, {
+						tableFilter,
+						unitId,
+						subUnitId,
+						tableId,
+						columnIndex,
+						checkedItemSet,
+						setCheckedItemSet
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SheetTableConditionPanel, {
+						tableFilter,
+						unitId,
+						subUnitId,
+						tableId,
+						columnIndex,
+						conditionInfo,
+						onChange: setConditionInfo
+					})
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex-wrap-nowrap univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-justify-between univer-gap-6 univer-overflow-hidden",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					disabled: tableFilter === void 0,
+					onClick: onClearFilter,
+					children: localeService.t("sheets-table.filter.clear-filter")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					className: "univer-mr-2",
+					onClick: onCancel,
+					children: localeService.t("sheets-table.filter.cancel")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					variant: "primary",
+					onClick: onApply,
+					children: localeService.t("sheets-table.filter.confirm")
+				})] })]
+			})
+		]
+	});
+}
+function useFilterByOptions(localeService) {
+	return (0, react.useMemo)(() => [{
+		label: localeService.t("sheets-table.filter.by-values"),
+		value: FilterByEnum.Items
+	}, {
+		label: localeService.t("sheets-table.filter.by-conditions"),
+		value: FilterByEnum.Condition
+	}], [localeService.getCurrentLocale(), localeService]);
+}
+
+//#endregion
+//#region src/controllers/sheet-table-component.controller.ts
+let SheetsTableComponentController = class SheetsTableComponentController extends _univerjs_core.Disposable {
+	constructor(_componentManager, _contextService, _sheetCanvasPopupService, _dialogService) {
+		super();
+		this._componentManager = _componentManager;
+		this._contextService = _contextService;
+		this._sheetCanvasPopupService = _sheetCanvasPopupService;
+		this._dialogService = _dialogService;
+		_defineProperty(this, "_popupDisposable", void 0);
+		_defineProperty(this, "_currentTableFilterInfo", null);
+		this._initComponents();
+		this._initUIPopup();
+	}
+	setCurrentTableFilterInfo(info) {
+		this._currentTableFilterInfo = info;
+	}
+	clearCurrentTableFilterInfo() {
+		this._currentTableFilterInfo = null;
+	}
+	getCurrentTableFilterInfo() {
+		return this._currentTableFilterInfo;
+	}
+	_initComponents() {
+		[[SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, SheetTableFilterPanel]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+	}
+	_initUIPopup() {
+		this.disposeWithMe(this._contextService.subscribeContextValue$(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY).pipe((0, rxjs.startWith)(void 0), (0, rxjs.distinctUntilChanged)()).subscribe((open) => {
+			if (open) this._openFilterPopup();
+			else if (open === false) this._closeFilterPopup();
+		}));
+	}
+	closeFilterPanel() {
+		this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
+	}
+	_openFilterPopup() {
+		const currentFilterModel = this._currentTableFilterInfo;
+		if (!currentFilterModel) throw new Error("[SheetsFilterUIController]: no filter model when opening filter popup!");
+		const { row: startRow, column: col } = currentFilterModel;
+		this._popupDisposable = this._sheetCanvasPopupService.attachPopupToCell(startRow, col, {
+			componentKey: SHEETS_TABLE_FILTER_PANEL_OPENED_KEY,
+			direction: "horizontal",
+			onClickOutside: () => {
+				this._dialogService.close(UNIVER_SHEET_TABLE_FILTER_PANEL_ID);
+				this._contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, false);
+			},
+			offset: [5, 0],
+			portal: true
+		});
+	}
+	_closeFilterPopup() {
+		var _this$_popupDisposabl;
+		(_this$_popupDisposabl = this._popupDisposable) === null || _this$_popupDisposabl === void 0 || _this$_popupDisposabl.dispose();
+		this._popupDisposable = null;
+		this.clearCurrentTableFilterInfo();
+	}
+};
+SheetsTableComponentController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
+	__decorateParam(1, _univerjs_core.IContextService),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_ui.IDialogService))
+], SheetsTableComponentController);
+
+//#endregion
+//#region src/commands/operations/open-table-filter-dialog.opration.ts
+const OpenTableFilterPanelOperation = {
+	type: _univerjs_core.CommandType.OPERATION,
+	id: "sheet.operation.open-table-filter-panel",
+	async handler(accessor, params) {
+		if (!params) return false;
+		const { row, col, unitId, subUnitId, tableId } = params;
+		const tableManager = accessor.get(_univerjs_sheets_table.TableManager);
+		const contextService = accessor.get(_univerjs_core.IContextService);
+		const sheetsTableComponentController = accessor.get(SheetsTableComponentController);
+		if (!tableManager.getTable(unitId, tableId)) return false;
+		if (!contextService.getContextValue("SHEETS_TABLE_FILTER_PANEL_OPENED_KEY")) {
+			sheetsTableComponentController.setCurrentTableFilterInfo({
+				unitId,
+				subUnitId,
+				row,
+				tableId,
+				column: col
+			});
+			contextService.setContextValue(SHEETS_TABLE_FILTER_PANEL_OPENED_KEY, true);
+		}
+		return true;
+	}
+};
+
+//#endregion
+//#region src/commands/operations/open-table-selector.operation.ts
+const OpenTableSelectorOperation = {
+	type: _univerjs_core.CommandType.OPERATION,
+	id: "sheet.operation.open-table-selector",
+	async handler(accessor) {
+		var _lastSelection$range;
+		const univerInstanceService = accessor.get(_univerjs_core.IUniverInstanceService);
+		const commandService = accessor.get(_univerjs_core.ICommandService);
+		const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService);
+		if (!target) return false;
+		const { unitId, subUnitId, worksheet } = target;
+		const lastSelection = accessor.get(_univerjs_sheets.SheetsSelectionsService).getCurrentLastSelection();
+		const range = (_lastSelection$range = lastSelection === null || lastSelection === void 0 ? void 0 : lastSelection.range) !== null && _lastSelection$range !== void 0 ? _lastSelection$range : {
+			startRow: 0,
+			endRow: 0,
+			startColumn: 0,
+			endColumn: 0
+		};
+		const rangeInfo = await openRangeSelector(accessor, unitId, subUnitId, (0, _univerjs_sheets.isSingleCellSelection)(lastSelection) ? (0, _univerjs_sheets.expandToContinuousRange)(range, {
+			up: true,
+			left: true,
+			right: true,
+			down: true
+		}, worksheet) : range);
+		if (!rangeInfo) return false;
+		commandService.executeCommand(_univerjs_sheets_table.AddSheetTableCommand.id, { ...rangeInfo });
+		return true;
+	}
+};
+async function openRangeSelector(accessor, unitId, subUnitId, range, tableId) {
+	const dialogService = accessor.get(_univerjs_ui.IDialogService);
+	const localeService = accessor.get(_univerjs_core.LocaleService);
+	return new Promise((resolve) => {
+		const dialogProps = {
+			unitId,
+			subUnitId,
+			range,
+			tableId,
+			onConfirm: (info) => {
+				resolve(info);
+				dialogService.close(TABLE_SELECTOR_DIALOG);
+			},
+			onCancel: () => {
+				resolve(null);
+				dialogService.close(TABLE_SELECTOR_DIALOG);
+			}
+		};
+		dialogService.open({
+			id: TABLE_SELECTOR_DIALOG,
+			title: { title: localeService.t("sheets-table.selectRange") },
+			draggable: true,
+			destroyOnClose: true,
+			mask: false,
+			maskClosable: false,
+			children: { label: {
+				name: TABLE_SELECTOR_DIALOG,
+				props: dialogProps
+			} },
+			width: 300,
+			onClose: () => {
+				resolve(null);
+				dialogService.close(TABLE_SELECTOR_DIALOG);
+			}
+		});
+	});
+}
+
+//#endregion
+//#region src/config/config.ts
+const SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY = "sheets-table-ui.config";
+const configSymbol = Symbol(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY);
+const defaultPluginConfig = {
+	anchorHeight: 24,
+	anchorBackgroundColor: "rgb(134,139,156)"
+};
+
+//#endregion
+//#region src/controllers/sheet-table-theme-ui.controller.ts
+let SheetTableThemeUIController = class SheetTableThemeUIController extends _univerjs_core.Disposable {
+	constructor(_commandService) {
+		super();
+		this._commandService = _commandService;
+		_defineProperty(this, "_refreshTable", new rxjs.Subject());
+		_defineProperty(this, "refreshTable$", this._refreshTable.asObservable());
+		this._initListener();
+	}
+	_initListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === _univerjs_sheets.SetRangeThemeMutation.id) {
+				const { styleName } = command.params;
+				if (styleName.startsWith(_univerjs_sheets_table.SHEET_TABLE_CUSTOM_THEME_PREFIX)) this._refreshTable.next(Math.random());
+			}
+		}));
+	}
+};
+SheetTableThemeUIController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService))], SheetTableThemeUIController);
+
+//#endregion
+//#region src/views/components/SheetTableAnchor.tsx
+const SheetTableAnchor = () => {
+	var _tableConfig$anchorHe, _tableConfig$anchorBa;
+	const [inputFocusId, setInputFocusId] = (0, react.useState)("");
+	const [inputValue, setInputValue] = (0, react.useState)("");
+	const sidebarService = (0, _univerjs_ui.useDependency)(_univerjs_ui.ISidebarService);
+	const [openStates, setOpenStates] = (0, react.useState)({});
+	const injector = (0, _univerjs_ui.useDependency)(_univerjs_core.Injector);
+	const anchorPosition = (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(SheetTableAnchorController).anchorPosition$);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	const workbookPermissionInitState = (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(_univerjs_sheets.WorkbookPermissionService).unitPermissionInitStateChange$, false);
+	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const rangeThemeModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetRangeThemeModel);
+	const tableRefresh$ = (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(SheetTableThemeUIController).refreshTable$);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const selections = (0, _univerjs_ui.useObservable)((0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetsSelectionsService).selectionChanged$, [{
+		range: (0, _univerjs_core.cellToRange)(0, 0),
+		primary: null
+	}]);
+	const [, setRefresh] = (0, react.useState)(Math.random());
+	const tableConfig = (0, _univerjs_ui.useDependency)(_univerjs_core.IConfigService).getConfig(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY);
+	const anchorHeight = (_tableConfig$anchorHe = tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.anchorHeight) !== null && _tableConfig$anchorHe !== void 0 ? _tableConfig$anchorHe : 24;
+	const anchorBackgroundColor = (_tableConfig$anchorBa = tableConfig === null || tableConfig === void 0 ? void 0 : tableConfig.anchorBackgroundColor) !== null && _tableConfig$anchorBa !== void 0 ? _tableConfig$anchorBa : "rgb(53,91,183)";
+	const updateOpenState = (tableId, isOpen) => {
+		setOpenStates((prev) => ({
+			...prev,
+			[tableId]: isOpen
+		}));
+	};
+	(0, react.useEffect)(() => {
+		setRefresh(Math.random());
+	}, [tableRefresh$]);
+	if (!(anchorPosition === null || anchorPosition === void 0 ? void 0 : anchorPosition.length)) return null;
+	const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService);
+	if (!target) return null;
+	const { unitId, subUnitId } = target;
+	const handleChangeTableName = (tableId, name) => {
+		var _tableManager$getTabl;
+		if (((_tableManager$getTabl = tableManager.getTableById(unitId, tableId)) === null || _tableManager$getTabl === void 0 ? void 0 : _tableManager$getTabl.getDisplayName()) === name) {
+			setInputFocusId("");
+			setInputValue("");
+			return;
+		}
+		commandService.executeCommand(_univerjs_sheets_table.SetSheetTableCommand.id, {
+			tableId,
+			unitId,
+			name
+		});
+		setInputValue("");
+		setInputFocusId("");
+	};
+	const handleChangeRange = async (tableId) => {
+		const table = tableManager.getTableById(unitId, tableId);
+		if (!table) return;
+		const selection = await openRangeSelector(injector, unitId, subUnitId, table.getRange(), tableId);
+		if (!selection) return;
+		commandService.executeCommand(_univerjs_sheets_table.SetSheetTableCommand.id, {
+			tableId,
+			unitId,
+			updateRange: { newRange: selection.range }
+		});
+	};
+	if (!workbookPermissionInitState) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-absolute univer-z-50 univer-size-0",
+		children: anchorPosition.map((item) => {
+			var _rangeTheme$getHeader, _rangeTheme$getHeader2, _rangeTheme$getHeader3, _rangeTheme$getHeader4, _openStates$item$tabl;
+			const table = tableManager.getTableById(unitId, item.tableId);
+			if (!table) return null;
+			const rangeTheme = rangeThemeModel.getRangeThemeStyle(unitId, table.getTableStyleId());
+			const headerBgColor = (_rangeTheme$getHeader = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader2 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader2 === void 0 || (_rangeTheme$getHeader2 = _rangeTheme$getHeader2.bg) === null || _rangeTheme$getHeader2 === void 0 ? void 0 : _rangeTheme$getHeader2.rgb) !== null && _rangeTheme$getHeader !== void 0 ? _rangeTheme$getHeader : anchorBackgroundColor;
+			const headerTextColor = (_rangeTheme$getHeader3 = rangeTheme === null || rangeTheme === void 0 || (_rangeTheme$getHeader4 = rangeTheme.getHeaderRowStyle()) === null || _rangeTheme$getHeader4 === void 0 || (_rangeTheme$getHeader4 = _rangeTheme$getHeader4.cl) === null || _rangeTheme$getHeader4 === void 0 ? void 0 : _rangeTheme$getHeader4.rgb) !== null && _rangeTheme$getHeader3 !== void 0 ? _rangeTheme$getHeader3 : "rgb(255, 255, 255)";
+			const tableRange = table.getRange();
+			if (!(selections === null || selections === void 0 ? void 0 : selections.length)) return null;
+			const lastRange = selections[selections.length - 1].range;
+			const shouldHidden = !_univerjs_core.Rectangle.intersects(tableRange, lastRange) && item.y <= 20;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, _univerjs_design.clsx)("univer-shadow-xs univer-absolute univer-box-border univer-cursor-pointer univer-items-center univer-rounded-xl univer-px-2", _univerjs_design.borderClassName, {
+					"univer-flex": !shouldHidden,
+					"univer-hidden": shouldHidden
+				}),
+				style: {
+					left: item.x,
+					top: Math.max(item.y, 0),
+					backgroundColor: headerBgColor,
+					color: headerTextColor,
+					borderWidth: "0.5px",
+					height: anchorHeight ? `${anchorHeight}px` : "24px"
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-text-nowrap",
+					children: inputFocusId === item.tableId ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+						className: "univer-h-[18px] univer-min-w-16 univer-rounded-none",
+						inputClass: "univer-h-[18px] univer-w-[80px]",
+						value: inputValue,
+						onChange: (v) => setInputValue(v),
+						onBlur: () => handleChangeTableName(item.tableId, inputValue),
+						onKeyDown: (e) => {
+							if (e.key === "Enter") handleChangeTableName(item.tableId, inputValue);
+						},
+						autoFocus: inputFocusId === item.tableId
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "univer-h-[18px] univer-max-w-24 univer-truncate univer-text-sm",
+						children: item.tableName
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+					align: "start",
+					overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-py-2",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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",
+								onClick: () => {
+									setInputFocusId(item.tableId);
+									setInputValue(item.tableName);
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.RenameIcon, {}), localeService.t("sheets-table.rename")]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-my-1 univer-h-px univer-w-full univer-bg-gray-200" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								onClick: () => handleChangeRange(item.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",
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.GridOutlineIcon, {}), localeService.t("sheets-table.updateRange")]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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",
+								onClick: () => {
+									updateOpenState(item.tableId, false);
+									const table = tableManager.getTableById(unitId, item.tableId);
+									if (!table) return;
+									const tableConfig = table.getTableConfig();
+									const sidebarConfig = {
+										id: SHEET_TABLE_THEME_PANEL_ID,
+										header: { title: localeService.t("sheets-table.tableStyle") },
+										children: {
+											label: SHEET_TABLE_THEME_PANEL,
+											oldConfig: tableConfig,
+											unitId,
+											subUnitId,
+											tableId: item.tableId
+										},
+										width: 330
+									};
+									sidebarService.open(sidebarConfig);
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.PaintBucketDoubleIcon, { extend: { colorChannel1: "rgb(53,91,183)" } }), localeService.t("sheets-table.setTheme")]
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-my-1 univer-h-px univer-w-full univer-bg-gray-200" }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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",
+								onClick: () => {
+									updateOpenState(item.tableId, false);
+									commandService.executeCommand(_univerjs_sheets_table.DeleteSheetTableCommand.id, {
+										tableId: item.tableId,
+										subUnitId,
+										unitId
+									});
+								},
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DeleteIcon, { className: "univer-mr-2" }), localeService.t("sheets-table.removeTable")]
+							})
+						]
+					}),
+					open: (_openStates$item$tabl = openStates[item.tableId]) !== null && _openStates$item$tabl !== void 0 ? _openStates$item$tabl : false,
+					onOpenChange: (isOpen) => {
+						updateOpenState(item.tableId, isOpen);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.MoreDownIcon, {}) })
+				}, item.tableId)]
+			}, item.tableId);
+		})
+	});
+};
+
+//#endregion
+//#region src/controllers/sheet-table-anchor.controller.ts
+let SheetTableAnchorController = class SheetTableAnchorController extends _univerjs_core.Disposable {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _renderManagerService, _commandService, _univerInstanceService, _uiPartsService, _tableManager, _scrollManagerService, _workbookPermissionService, _permissionService) {
+		super();
+		this._context = _context;
+		this._injector = _injector;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._renderManagerService = _renderManagerService;
+		this._commandService = _commandService;
+		this._univerInstanceService = _univerInstanceService;
+		this._uiPartsService = _uiPartsService;
+		this._tableManager = _tableManager;
+		this._scrollManagerService = _scrollManagerService;
+		this._workbookPermissionService = _workbookPermissionService;
+		this._permissionService = _permissionService;
+		_defineProperty(this, "_anchorVisible$", new rxjs.BehaviorSubject(true));
+		_defineProperty(this, "_timer", void 0);
+		_defineProperty(this, "_anchorPosition$", new rxjs.BehaviorSubject([]));
+		_defineProperty(this, "anchorPosition$", this._anchorPosition$.asObservable());
+		this._initUI();
+		this._initListener();
+		this._initTableAnchor();
+	}
+	_initUI() {
+		this.disposeWithMe(this._uiPartsService.registerComponent(_univerjs_ui.BuiltInUIPart.CONTENT, () => (0, _univerjs_ui.connectInjector)(SheetTableAnchor, this._injector)));
+	}
+	_initListener() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			if (command.id === _univerjs_sheets_ui.SetZoomRatioOperation.id || command.id === _univerjs_sheets_ui.SetScrollOperation.id) {
+				this._anchorVisible$.next(false);
+				if (this._timer) clearTimeout(this._timer);
+				this._timer = setTimeout(() => {
+					this._anchorVisible$.next(true);
+				}, 300);
+			}
+		}));
+	}
+	_initTableAnchor() {
+		this.disposeWithMe((0, rxjs.merge)(this._context.unit.activeSheet$, this._sheetSkeletonManagerService.currentSkeleton$, this._scrollManagerService.validViewportScrollInfo$, this._tableManager.tableAdd$, this._tableManager.tableDelete$, this._tableManager.tableNameChanged$, this._tableManager.tableRangeChanged$, this._tableManager.tableThemeChanged$, this._workbookPermissionService.unitPermissionInitStateChange$.pipe((0, rxjs.filter)((v) => v)), this._permissionService.permissionPointUpdate$.pipe((0, rxjs.debounceTime)(300)), this._anchorVisible$).subscribe(() => {
+			var _this$_permissionServ;
+			if (!this._anchorVisible$.getValue()) {
+				this._anchorPosition$.next([]);
+				return;
+			}
+			const workbook = this._context.unit;
+			const worksheet = workbook.getActiveSheet();
+			const subUnitId = worksheet === null || worksheet === void 0 ? void 0 : worksheet.getSheetId();
+			const tables = this._tableManager.getTableList(this._context.unitId).filter((table) => {
+				return table.subUnitId === subUnitId;
+			});
+			const renderUnit = this._renderManagerService.getRenderById(this._context.unitId);
+			if (!renderUnit) {
+				this._anchorPosition$.next([]);
+				return;
+			}
+			if (!((_this$_permissionServ = this._permissionService.getPermissionPoint(new _univerjs_sheets.WorkbookEditablePermission(workbook.getUnitId()).id)) === null || _this$_permissionServ === void 0 ? void 0 : _this$_permissionServ.value)) {
+				this._anchorPosition$.next([]);
+				return;
+			}
+			const tableInfos = tables.reduce((acc, table) => {
+				const { startRow, startColumn } = table.range;
+				const sheetSkeletonManagerService = renderUnit.with(_univerjs_sheets_ui.SheetSkeletonManagerService);
+				const sheetObject = (0, _univerjs_sheets_ui.getSheetObject)(this._univerInstanceService, this._renderManagerService);
+				if (!sheetObject) return acc;
+				const { scene } = sheetObject;
+				const viewport = scene.getViewport(_univerjs_engine_render.SHEET_VIEWPORT_KEY.VIEW_MAIN);
+				if (!viewport) return acc;
+				const scaleX = scene === null || scene === void 0 ? void 0 : scene.scaleX;
+				const scaleY = scene === null || scene === void 0 ? void 0 : scene.scaleY;
+				const scrollXY = scene === null || scene === void 0 ? void 0 : scene.getViewportScrollXY(viewport);
+				if (!scaleX || !scene || !scaleY || !scrollXY) return acc;
+				const skeleton = sheetSkeletonManagerService.getCurrentSkeleton();
+				if (!skeleton) return acc;
+				const position = skeleton.getNoMergeCellWithCoordByIndex(startRow, startColumn);
+				const startX = (0, _univerjs_engine_render.convertTransformToOffsetX)(position.startX, scaleX, scrollXY);
+				const startY = (0, _univerjs_engine_render.convertTransformToOffsetY)(position.startY, scaleY, scrollXY) - 25 - 4;
+				if (startY >= -10 && startX >= 45) acc.push({
+					x: startX,
+					y: startY,
+					tableId: table.id,
+					tableName: table.name
+				});
+				return acc;
+			}, []);
+			this._anchorPosition$.next(tableInfos);
+		}));
+	}
+};
+SheetTableAnchorController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
+	__decorateParam(3, _univerjs_engine_render.IRenderManagerService),
+	__decorateParam(4, _univerjs_core.ICommandService),
+	__decorateParam(5, _univerjs_core.IUniverInstanceService),
+	__decorateParam(6, _univerjs_ui.IUIPartsService),
+	__decorateParam(7, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
+	__decorateParam(8, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetScrollManagerService)),
+	__decorateParam(9, (0, _univerjs_core.Inject)(_univerjs_sheets.WorkbookPermissionService)),
+	__decorateParam(10, (0, _univerjs_core.Inject)(_univerjs_core.IPermissionService))
+], SheetTableAnchorController);
+
+//#endregion
+//#region src/views/widgets/drawings.ts
+const BUTTON_VIEWPORT = 16;
+const PIVOT_BUTTON_EMPTY = 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");
+var TableButton = class {
+	static drawNoSetting(ctx, size, fgColor, bgColor) {
+		ctx.save();
+		_univerjs_engine_render.Rect.drawWith(ctx, {
+			radius: 2,
+			width: BUTTON_VIEWPORT,
+			height: BUTTON_VIEWPORT,
+			fill: bgColor
+		});
+		ctx.lineCap = "square";
+		ctx.strokeStyle = fgColor;
+		ctx.scale(size / BUTTON_VIEWPORT, size / BUTTON_VIEWPORT);
+		ctx.beginPath();
+		ctx.lineWidth = 1;
+		ctx.lineCap = "round";
+		ctx.moveTo(3, 4);
+		ctx.lineTo(13, 4);
+		ctx.moveTo(4.5, 8);
+		ctx.lineTo(11.5, 8);
+		ctx.moveTo(6, 12);
+		ctx.lineTo(10, 12);
+		ctx.stroke();
+		ctx.restore();
+	}
+	static drawIconByPath(ctx, pathData, fgColor, bgColor) {
+		ctx.save();
+		ctx.strokeStyle = fgColor;
+		ctx.fillStyle = bgColor;
+		_univerjs_engine_render.Rect.drawWith(ctx, {
+			radius: 2,
+			width: BUTTON_VIEWPORT,
+			height: BUTTON_VIEWPORT,
+			fill: bgColor
+		});
+		pathData.forEach((d) => {
+			const path = new Path2D(d);
+			ctx.fillStyle = fgColor;
+			ctx.fill(path, "evenodd");
+		});
+		ctx.restore();
+	}
+};
+
+//#endregion
+//#region src/views/widgets/icons.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const filterPartial = ["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"];
+const filteredSortAsc = ["M12.4008 13.1831C12.6907 13.1831 12.9258 12.9481 12.9258 12.6581V4.60873L14.013 5.69597C14.218 5.901 14.5505 5.901 14.7555 5.69597C14.9605 5.49094 14.9605 5.15853 14.7555 4.95351L12.7721 2.97017C12.5671 2.76515 12.2347 2.76515 12.0297 2.97017L10.0463 4.95351C9.84132 5.15853 9.84132 5.49094 10.0463 5.69597C10.2514 5.901 10.5838 5.901 10.7888 5.69597L11.8758 4.60901V12.6581C11.8758 12.9481 12.1108 13.1831 12.4008 13.1831Z", "M1.28069 4.85447C0.842195 4.33439 1.21191 3.5391 1.89218 3.5391H8.59333C9.2736 3.5391 9.64331 4.33439 9.20482 4.85447L6.51052 8.0501V11.6601C6.51052 12.2245 5.94174 12.6114 5.41683 12.404L4.48092 12.0343C4.1756 11.9136 3.97498 11.6187 3.97498 11.2904V8.0501L1.28069 4.85447Z"];
+const filteredSortDesc = ["M12.4008 2.81641C12.6907 2.81641 12.9258 3.05146 12.9258 3.34141V11.3908L14.013 10.3036C14.218 10.0986 14.5505 10.0986 14.7555 10.3036C14.9605 10.5086 14.9605 10.841 14.7555 11.046L12.7721 13.0294C12.5671 13.2344 12.2347 13.2344 12.0297 13.0294L10.0463 11.046C9.84132 10.841 9.84132 10.5086 10.0463 10.3036C10.2514 10.0986 10.5838 10.0986 10.7888 10.3036L11.8758 11.3905V3.34141C11.8758 3.05146 12.1108 2.81641 12.4008 2.81641Z", "M1.28069 4.85444C0.842195 4.33435 1.21191 3.53906 1.89218 3.53906H8.59333C9.2736 3.53906 9.64331 4.33435 9.20482 4.85443L6.51052 8.05006V11.6601C6.51052 12.2245 5.94174 12.6113 5.41683 12.404L4.48092 12.0342C4.1756 11.9136 3.97498 11.6186 3.97498 11.2903V8.05006L1.28069 4.85444Z"];
+const filterNoneSortAsc = [
+	"M11.9003 13.7046C11.9003 13.9969 11.6633 14.2339 11.371 14.2339C11.0787 14.2339 10.8417 13.9969 10.8417 13.7046V3.57272L9.74577 4.66862C9.53906 4.87534 9.20391 4.87534 8.9972 4.66862C8.79048 4.46191 8.79048 4.12676 8.9972 3.92005L10.9969 1.92039C11.2036 1.71368 11.5387 1.71368 11.7454 1.92039L13.7451 3.92005C13.9518 4.12676 13.9518 4.46191 13.7451 4.66862C13.5384 4.87534 13.2032 4.87534 12.9965 4.66862L11.9003 3.57243V13.7046Z",
+	"M2.69779 10.0113C2.40546 10.0113 2.16847 9.77429 2.16847 9.48196C2.16847 9.18962 2.40546 8.95264 2.69779 8.95264H6.67804C6.89213 8.95264 7.08514 9.0816 7.16707 9.2794C7.249 9.47719 7.20371 9.70486 7.05233 9.85624L3.97569 12.9329H6.67804C6.97038 12.9329 7.20736 13.1699 7.20736 13.4622C7.20736 13.7545 6.97038 13.9915 6.67804 13.9915H2.69779C2.4837 13.9915 2.29069 13.8626 2.20876 13.6648C2.12684 13.467 2.17212 13.2393 2.32351 13.0879L5.40015 10.0113H2.69779Z",
+	"M5.51638 2.58693C5.23363 1.81542 4.14248 1.81543 3.85973 2.58693L2.13245 7.29995C2.03185 7.57443 2.17281 7.87849 2.4473 7.97909C2.72178 8.07969 3.02584 7.93872 3.12644 7.66424L3.64346 6.25351L3.64504 6.25351H5.73266L6.24968 7.66424C6.35027 7.93872 6.65433 8.07969 6.92882 7.97909C7.2033 7.87849 7.34426 7.57443 7.24367 7.29995L5.51638 2.58693ZM5.34467 5.19487L4.68806 3.40325L4.03144 5.19487H5.34467Z"
+];
+const filterNoneSortDesc = [
+	"M11.9003 2.29495C11.9003 2.00261 11.6633 1.76562 11.371 1.76562C11.0787 1.76562 10.8417 2.00261 10.8417 2.29495V12.4268L9.74577 11.3309C9.53906 11.1242 9.20391 11.1242 8.9972 11.3309C8.79048 11.5376 8.79048 11.8727 8.9972 12.0795L10.9969 14.0791C11.2036 14.2858 11.5387 14.2858 11.7454 14.0791L13.7451 12.0795C13.9518 11.8727 13.9518 11.5376 13.7451 11.3309C13.5384 11.1242 13.2032 11.1242 12.9965 11.3309L11.9003 12.4271V2.29495Z",
+	"M2.69792 10.0113C2.40558 10.0113 2.16859 9.77429 2.16859 9.48196C2.16859 9.18962 2.40558 8.95264 2.69792 8.95264H6.67816C6.89225 8.95264 7.08526 9.0816 7.16719 9.2794C7.24912 9.47719 7.20384 9.70486 7.05245 9.85624L3.97581 12.9329H6.67816C6.9705 12.9329 7.20749 13.1699 7.20749 13.4622C7.20749 13.7545 6.9705 13.9915 6.67816 13.9915H2.69792C2.48383 13.9915 2.29082 13.8626 2.20889 13.6648C2.12696 13.467 2.17224 13.2393 2.32363 13.0879L5.40027 10.0113H2.69792Z",
+	"M5.5165 2.58693C5.23375 1.81542 4.1426 1.81543 3.85985 2.58693L2.13257 7.29995C2.03197 7.57443 2.17294 7.8785 2.44742 7.97909C2.7219 8.07969 3.02596 7.93872 3.12656 7.66424L3.64358 6.25351L3.64516 6.25351H5.73278L6.2498 7.66424C6.35039 7.93872 6.65446 8.07969 6.92894 7.97909C7.20342 7.8785 7.34438 7.57443 7.24379 7.29995L5.5165 2.58693ZM5.34479 5.19487L4.68818 3.40325L4.03156 5.19487H5.34479Z"
+];
+
+//#endregion
+//#region src/views/widgets/table-filter-button.shape.ts
+const FILTER_ICON_SIZE = 16;
+let SheetsTableFilterButtonShape = class SheetsTableFilterButtonShape extends _univerjs_engine_render.Shape {
+	constructor(key, props, _contextService, _commandService, _themeService) {
+		super(key, props);
+		this._contextService = _contextService;
+		this._commandService = _commandService;
+		this._themeService = _themeService;
+		_defineProperty(this, "_cellWidth", 0);
+		_defineProperty(this, "_cellHeight", 0);
+		_defineProperty(this, "_filterParams", void 0);
+		_defineProperty(this, "_hovered", false);
+		this.setShapeProps(props);
+		this.onPointerDown$.subscribeEvent((evt) => this.onPointerDown(evt));
+		this.onPointerEnter$.subscribeEvent(() => this.onPointerEnter());
+		this.onPointerLeave$.subscribeEvent(() => this.onPointerLeave());
+	}
+	setShapeProps(props) {
+		if (typeof props.cellHeight !== "undefined") this._cellHeight = props.cellHeight;
+		if (typeof props.cellWidth !== "undefined") this._cellWidth = props.cellWidth;
+		if (typeof props.filterParams !== "undefined") this._filterParams = props.filterParams;
+		this.transformByState({
+			width: props.width,
+			height: props.height
+		});
+	}
+	_draw(ctx) {
+		const cellHeight = this._cellHeight;
+		const cellWidth = this._cellWidth;
+		const left = 16 - cellWidth;
+		const top = 16 - cellHeight;
+		ctx.save();
+		const cellRegion = new Path2D();
+		cellRegion.rect(left, top, cellWidth, cellHeight);
+		ctx.clip(cellRegion);
+		const { buttonState } = this._filterParams;
+		const fgColor = this._themeService.getColorFromTheme("primary.600");
+		const bgColor = this._hovered ? this._themeService.getColorFromTheme("gray.50") : "rgba(255, 255, 255, 1.0)";
+		let icons;
+		switch (buttonState) {
+			case _univerjs_sheets_table.SheetsTableButtonStateEnum.FilteredSortNone:
+				icons = filterPartial;
+				break;
+			case _univerjs_sheets_table.SheetsTableButtonStateEnum.FilteredSortAsc:
+				icons = filteredSortAsc;
+				break;
+			case _univerjs_sheets_table.SheetsTableButtonStateEnum.FilteredSortDesc:
+				icons = filteredSortDesc;
+				break;
+			case _univerjs_sheets_table.SheetsTableButtonStateEnum.FilterNoneSortNone: break;
+			case _univerjs_sheets_table.SheetsTableButtonStateEnum.FilterNoneSortAsc:
+				icons = filterNoneSortAsc;
+				break;
+			case _univerjs_sheets_table.SheetsTableButtonStateEnum.FilterNoneSortDesc:
+				icons = filterNoneSortDesc;
+				break;
+		}
+		if (icons) TableButton.drawIconByPath(ctx, icons, fgColor, bgColor);
+		else if (buttonState !== void 0) TableButton.drawNoSetting(ctx, 16, fgColor, bgColor);
+		ctx.restore();
+	}
+	onPointerDown(evt) {
+		if (evt.button === 2) return;
+		const { row, col, unitId, subUnitId, tableId } = this._filterParams;
+		if (this._contextService.getContextValue("SHEETS_TABLE_FILTER_PANEL_OPENED_KEY") || !this._commandService.hasCommand(OpenTableFilterPanelOperation.id)) return;
+		setTimeout(() => {
+			const cmdParams = {
+				row,
+				col,
+				unitId,
+				subUnitId,
+				tableId
+			};
+			this._commandService.executeCommand(OpenTableFilterPanelOperation.id, cmdParams);
+		}, 200);
+	}
+	onPointerEnter() {
+		this._hovered = true;
+		this.makeDirty(true);
+	}
+	onPointerLeave() {
+		this._hovered = false;
+		this.makeDirty(true);
+	}
+};
+SheetsTableFilterButtonShape = __decorate([
+	__decorateParam(2, _univerjs_core.IContextService),
+	__decorateParam(3, _univerjs_core.ICommandService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
+], SheetsTableFilterButtonShape);
+
+//#endregion
+//#region src/controllers/sheet-table-filter-button-render.controller.ts
+const SHEETS_FILTER_BUTTON_Z_INDEX = 5e3;
+const computeIconTop = (startY, endY, cellHeight, verticalAlign) => {
+	switch (verticalAlign) {
+		case _univerjs_core.VerticalAlign.TOP: return startY + 1;
+		case _univerjs_core.VerticalAlign.MIDDLE: return startY + Math.max(0, (cellHeight - 16) / 2);
+		case _univerjs_core.VerticalAlign.BOTTOM:
+		default: return endY - 16 - 1;
+	}
+};
+let SheetsTableFilterButtonRenderController = class SheetsTableFilterButtonRenderController extends _univerjs_core.RxDisposable {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _sheetInterceptorService, _tableManager, _commandService) {
+		super();
+		this._context = _context;
+		this._injector = _injector;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._tableManager = _tableManager;
+		this._commandService = _commandService;
+		_defineProperty(this, "_buttonRenderDisposable", null);
+		_defineProperty(this, "_tableFilterButtonShapes", []);
+		this._initRenderer();
+		this._initCommandExecuted();
+	}
+	dispose() {
+		super.dispose();
+		this._disposeRendering();
+	}
+	_initRenderer() {
+		const tableManager = this._tableManager;
+		this._sheetSkeletonManagerService.currentSkeleton$.pipe((0, rxjs.switchMap)((skeletonParams) => {
+			var _workbook$getActiveSh;
+			if (!skeletonParams) return (0, rxjs.of)(null);
+			const { unit: workbook, unitId } = this._context;
+			const worksheetId = ((_workbook$getActiveSh = workbook.getActiveSheet()) === null || _workbook$getActiveSh === void 0 ? void 0 : _workbook$getActiveSh.getSheetId()) || "";
+			const getParams = () => ({
+				unitId,
+				worksheetId,
+				tableFilterRanges: this._tableManager.getSheetFilterRangeWithState(workbook.getUnitId(), worksheetId),
+				skeleton: skeletonParams.skeleton
+			});
+			return (0, rxjs.merge)(tableManager.tableAdd$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableDelete$, tableManager.tableFilterChanged$).pipe((0, rxjs.map)(() => getParams()), (0, rxjs.startWith)(getParams()));
+		}), (0, rxjs.takeUntil)(this.dispose$)).subscribe((renderParams) => {
+			this._disposeRendering();
+			if (!renderParams || !renderParams.tableFilterRanges) return;
+			this._renderButtons(renderParams);
+		});
+	}
+	_initCommandExecuted() {
+		this.disposeWithMe(this._commandService.onCommandExecuted((command) => {
+			var _workbook$getActiveSh2;
+			if (command.id !== _univerjs_sheets.SetVerticalTextAlignCommand.id) return;
+			const { unit: workbook, unitId } = this._context;
+			const worksheetId = ((_workbook$getActiveSh2 = workbook.getActiveSheet()) === null || _workbook$getActiveSh2 === void 0 ? void 0 : _workbook$getActiveSh2.getSheetId()) || "";
+			const skeleton = this._sheetSkeletonManagerService.getCurrentSkeleton();
+			if (!skeleton) return;
+			const renderParams = {
+				unitId,
+				worksheetId,
+				tableFilterRanges: this._tableManager.getSheetFilterRangeWithState(workbook.getUnitId(), worksheetId),
+				skeleton
+			};
+			this._disposeRendering();
+			if (!renderParams || !renderParams.tableFilterRanges) return;
+			this._renderButtons(renderParams);
+		}));
+	}
+	_renderButtons(params) {
+		const { tableFilterRanges, unitId, skeleton, worksheetId } = params;
+		const { unit: workbook, scene } = this._context;
+		const worksheet = workbook.getSheetBySheetId(worksheetId);
+		if (!worksheet) return;
+		for (const { range, states, tableId } of tableFilterRanges) {
+			const { startRow, startColumn, endColumn } = range;
+			this._interceptCellContent(unitId, worksheetId, range);
+			for (let col = startColumn; col <= endColumn; col++) {
+				const key = `sheets-table-filter-button-${startRow}-${col}`;
+				const startPosition = (0, _univerjs_sheets_ui.getCoordByCell)(startRow, col, scene, skeleton);
+				const cellStyle = worksheet.getCellStyle(startRow, col);
+				const verticalAlign = (cellStyle === null || cellStyle === void 0 ? void 0 : cellStyle.vt) || _univerjs_core.VerticalAlign.BOTTOM;
+				const { startX, startY, endX, endY } = startPosition;
+				const cellWidth = endX - startX;
+				const cellHeight = endY - startY;
+				if (cellHeight <= 1 || cellWidth <= 1) continue;
+				const state = states[col - startColumn];
+				const props = {
+					left: endX - 16 - 1,
+					top: computeIconTop(startY, endY, cellHeight, verticalAlign),
+					height: 16,
+					width: 16,
+					zIndex: SHEETS_FILTER_BUTTON_Z_INDEX,
+					cellHeight,
+					cellWidth,
+					filterParams: {
+						unitId,
+						subUnitId: worksheetId,
+						row: startRow,
+						col,
+						buttonState: state,
+						tableId
+					}
+				};
+				const buttonShape = this._injector.createInstance(SheetsTableFilterButtonShape, key, props);
+				this._tableFilterButtonShapes.push(buttonShape);
+			}
+		}
+		scene.addObjects(this._tableFilterButtonShapes);
+		scene.makeDirty();
+	}
+	_interceptCellContent(workbookId, worksheetId, range) {
+		const { startRow, startColumn, endColumn } = range;
+		this._buttonRenderDisposable = this._sheetInterceptorService.intercept(_univerjs_sheets.INTERCEPTOR_POINT.CELL_CONTENT, {
+			effect: _univerjs_core.InterceptorEffectEnum.Style,
+			handler: (cell, pos, next) => {
+				const { row, col, unitId, subUnitId } = pos;
+				if (unitId !== workbookId || subUnitId !== worksheetId || row !== startRow || col < startColumn || col > endColumn) return next(cell);
+				if (!cell || cell === pos.rawData) cell = { ...pos.rawData };
+				cell.fontRenderExtension = {
+					...cell === null || cell === void 0 ? void 0 : cell.fontRenderExtension,
+					rightOffset: 16
+				};
+				return next(cell);
+			},
+			priority: 10
+		});
+	}
+	_disposeRendering() {
+		var _this$_buttonRenderDi;
+		this._tableFilterButtonShapes.forEach((s) => s.dispose());
+		(_this$_buttonRenderDi = this._buttonRenderDisposable) === null || _this$_buttonRenderDi === void 0 || _this$_buttonRenderDi.dispose();
+		this._buttonRenderDisposable = null;
+		this._tableFilterButtonShapes = [];
+	}
+};
+SheetsTableFilterButtonRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
+	__decorateParam(5, _univerjs_core.ICommandService)
+], SheetsTableFilterButtonRenderController);
+
+//#endregion
+//#region src/controllers/sheet-table-render.controller.ts
+let SheetsTableRenderController = class SheetsTableRenderController extends _univerjs_core.RxDisposable {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _tableManager, _sheetTableThemeUIController) {
+		super();
+		this._context = _context;
+		this._injector = _injector;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._tableManager = _tableManager;
+		this._sheetTableThemeUIController = _sheetTableThemeUIController;
+		this._initListener();
+	}
+	_dirtySkeleton() {
+		var _this$_context$mainCo;
+		(_this$_context$mainCo = this._context.mainComponent) === null || _this$_context$mainCo === void 0 || _this$_context$mainCo.makeDirty();
+		const currentParam = this._sheetSkeletonManagerService.getCurrentParam();
+		if (currentParam) {
+			const param = {
+				...currentParam,
+				dirty: true
+			};
+			this._sheetSkeletonManagerService.reCalculate(param);
+		}
+	}
+	_initListener() {
+		const tableManager = this._tableManager;
+		const dirtySkeleton = this._dirtySkeleton.bind(this);
+		this.disposeWithMe((0, rxjs.merge)(tableManager.tableAdd$, tableManager.tableDelete$, tableManager.tableNameChanged$, tableManager.tableRangeChanged$, tableManager.tableThemeChanged$, tableManager.tableFilterChanged$, tableManager.tableInitStatus$, this._sheetTableThemeUIController.refreshTable$).subscribe(dirtySkeleton));
+	}
+};
+SheetsTableRenderController = __decorate([
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetSkeletonManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(SheetTableThemeUIController))
+], SheetsTableRenderController);
+
+//#endregion
+//#region src/controllers/sheet-table-selection.controller.ts
+let SheetTableSelectionController = class SheetTableSelectionController extends _univerjs_core.Disposable {
+	constructor(_sheetInterceptorService, _univerInstanceService, _tableManager) {
+		super();
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._univerInstanceService = _univerInstanceService;
+		this._tableManager = _tableManager;
+		this._initSelectionChange();
+	}
+	_initSelectionChange() {
+		this.disposeWithMe(this._sheetInterceptorService.interceptCommand({ getMutations: (command) => {
+			if (command.id === _univerjs_sheets_ui.SelectAllCommand.id) {
+				const target = (0, _univerjs_sheets.getSheetCommandTarget)(this._univerInstanceService);
+				if (!target) return {
+					redos: [],
+					undos: []
+				};
+				const { range } = command.params;
+				const { unitId, subUnitId, worksheet } = target;
+				const overlapTable = this._tableManager.getTablesBySubunitId(unitId, subUnitId).find((table) => {
+					const tableRange = table.getRange();
+					return _univerjs_core.Rectangle.contains(tableRange, range);
+				});
+				if (overlapTable) {
+					const tableRange = overlapTable.getRange();
+					const tableRangeWithoutHeader = {
+						...tableRange,
+						startRow: tableRange.startRow + 1
+					};
+					if (_univerjs_core.Rectangle.equals(tableRange, range)) return {
+						undos: [],
+						redos: []
+					};
+					else if (_univerjs_core.Rectangle.equals(tableRangeWithoutHeader, range)) return {
+						undos: [],
+						redos: [{
+							id: _univerjs_sheets.SetSelectionsOperation.id,
+							params: {
+								unitId,
+								subUnitId,
+								selections: [{
+									range: tableRange,
+									primary: (0, _univerjs_sheets.getPrimaryForRange)(tableRange, worksheet)
+								}]
+							}
+						}]
+					};
+					else return {
+						undos: [],
+						redos: [{
+							id: _univerjs_sheets.SetSelectionsOperation.id,
+							params: {
+								unitId,
+								subUnitId,
+								selections: [{
+									range: tableRangeWithoutHeader,
+									primary: (0, _univerjs_sheets.getPrimaryForRange)(tableRangeWithoutHeader, worksheet)
+								}]
+							}
+						}]
+					};
+				}
+			}
+			return {
+				redos: [],
+				undos: []
+			};
+		} }));
+	}
+};
+SheetTableSelectionController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.IUniverInstanceService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_table.TableManager))
+], SheetTableSelectionController);
+
+//#endregion
+//#region src/views/components/SheetTableSelector.tsx
+const SheetTableSelector = (props) => {
+	const { unitId, subUnitId, range, onCancel, onConfirm, tableId } = props;
+	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const [selectedRange, setSelectedRange] = (0, react.useState)(range);
+	const [rangeError, setRangeError] = (0, react.useState)("");
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const univerInstanceService = (0, _univerjs_ui.useDependency)(_univerjs_core.IUniverInstanceService);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_sheets_formula_ui.RangeSelector, {
+			maxRangeCount: 1,
+			unitId,
+			subUnitId,
+			initialValue: (0, _univerjs_engine_formula.serializeRange)(range),
+			onChange: (_, text) => {
+				const originValue = (0, _univerjs_engine_formula.serializeRange)(range);
+				const newRange = (0, _univerjs_engine_formula.deserializeRangeWithSheet)(text).range;
+				const target = (0, _univerjs_sheets.getSheetCommandTarget)(univerInstanceService, {
+					unitId,
+					subUnitId
+				});
+				if (!target) return;
+				if (target.worksheet.getMergeData().some((merge) => {
+					return _univerjs_core.Rectangle.intersects(newRange, merge);
+				})) {
+					setRangeError(localeService.t("sheets-table.tableRangeWithMergeError"));
+					return;
+				}
+				if (tableManager.getTablesBySubunitId(unitId, subUnitId).some((table) => {
+					if (table.getId() === tableId) return false;
+					const tableRange = table.getRange();
+					return _univerjs_core.Rectangle.intersects(newRange, tableRange);
+				})) {
+					setRangeError(localeService.t("sheets-table.tableRangeWithOtherTableError"));
+					return;
+				}
+				const { startRow, endRow } = newRange;
+				if (startRow === endRow) {
+					setRangeError(localeService.t("sheets-table.tableRangeSingleRowError"));
+					return;
+				}
+				if (originValue === text) return;
+				if (tableId) {
+					const table = tableManager.getTableById(unitId, tableId);
+					if (table) {
+						const oldRange = table.getRange();
+						if (_univerjs_core.Rectangle.intersects(newRange, oldRange) && oldRange.startRow === newRange.startRow) {
+							setSelectedRange(newRange);
+							setRangeError("");
+							onConfirm({
+								unitId,
+								subUnitId,
+								range: newRange
+							});
+							return;
+						} else {
+							setRangeError(localeService.t("sheets-table.updateError"));
+							return;
+						}
+					}
+				}
+				setSelectedRange(newRange);
+				setRangeError("");
+			},
+			supportAcrossSheet: false
+		}),
+		rangeError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-mt-1 univer-text-xs univer-text-red-500",
+			children: rangeError
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-mt-4 univer-flex univer-justify-end",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				onClick: onCancel,
+				children: localeService.t("sheets-table.cancel")
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+				variant: "primary",
+				onClick: () => {
+					if (rangeError) return;
+					onConfirm({
+						unitId,
+						subUnitId,
+						range: selectedRange
+					});
+				},
+				className: "univer-ml-2",
+				children: localeService.t("sheets-table.confirm")
+			})]
+		})
+	] });
+};
+
+//#endregion
+//#region src/views/components/SheetTableThemePanel.tsx
+const SheetTableThemePanel = (props) => {
+	var _customStyle$getHeade, _customStyle$getHeade2, _customStyle$getFirst, _customStyle$getFirst2, _customStyle$getSecon, _customStyle$getSecon2, _customStyle$getLastR, _customStyle$getLastR2;
+	const { unitId, subUnitId, tableId } = props;
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const tableManager = (0, _univerjs_ui.useDependency)(_univerjs_sheets_table.TableManager);
+	const table = tableManager.getTableById(unitId, tableId);
+	const rangeThemeModel = (0, _univerjs_ui.useDependency)(_univerjs_sheets.SheetRangeThemeModel);
+	const sheetTableThemeUIController = (0, _univerjs_ui.useDependency)(SheetTableThemeUIController);
+	const rangeThemeMapChanged = (0, _univerjs_ui.useObservable)(rangeThemeModel.rangeThemeMapChange$);
+	const tableRefresh = (0, _univerjs_ui.useObservable)(sheetTableThemeUIController.refreshTable$);
+	const errorService = (0, _univerjs_ui.useDependency)(_univerjs_core.ErrorService);
+	const [, setRefresh] = (0, react.useState)(Math.random());
+	const themeConfig = (0, _univerjs_ui.useObservable)(tableManager.tableThemeChanged$, {
+		theme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
+		oldTheme: table === null || table === void 0 ? void 0 : table.getTableStyleId(),
+		unitId,
+		subUnitId,
+		tableId
+	});
+	const defaultRangeThemes = rangeThemeModel.getRegisteredRangeThemes().filter((item) => item === null || item === void 0 ? void 0 : item.startsWith(TABLE_DEFAULT_NAME_PREFIX));
+	const customRangeThemes = rangeThemeModel.getALLRegisteredTheme(unitId).filter((item) => item === null || item === void 0 ? void 0 : item.startsWith(TABLE_CUSTOM_NAME_PREFIX));
+	const selectedTheme = table === null || table === void 0 ? void 0 : table.getTableStyleId();
+	const customSelected = customRangeThemes.find((item) => item === selectedTheme);
+	const customStyleName = customSelected || customRangeThemes[0];
+	const customStyle = rangeThemeModel.getCustomRangeThemeStyle(unitId, customStyleName);
+	const headerBg = (_customStyle$getHeade = customStyle === null || customStyle === void 0 || (_customStyle$getHeade2 = customStyle.getHeaderRowStyle()) === null || _customStyle$getHeade2 === void 0 || (_customStyle$getHeade2 = _customStyle$getHeade2.bg) === null || _customStyle$getHeade2 === void 0 ? void 0 : _customStyle$getHeade2.rgb) !== null && _customStyle$getHeade !== void 0 ? _customStyle$getHeade : TABLE_DEFAULT_BG_COLOR;
+	const firstRowBg = (_customStyle$getFirst = customStyle === null || customStyle === void 0 || (_customStyle$getFirst2 = customStyle.getFirstRowStyle()) === null || _customStyle$getFirst2 === void 0 || (_customStyle$getFirst2 = _customStyle$getFirst2.bg) === null || _customStyle$getFirst2 === void 0 ? void 0 : _customStyle$getFirst2.rgb) !== null && _customStyle$getFirst !== void 0 ? _customStyle$getFirst : TABLE_DEFAULT_BG_COLOR;
+	const secondRowBg = (_customStyle$getSecon = customStyle === null || customStyle === void 0 || (_customStyle$getSecon2 = customStyle.getSecondRowStyle()) === null || _customStyle$getSecon2 === void 0 || (_customStyle$getSecon2 = _customStyle$getSecon2.bg) === null || _customStyle$getSecon2 === void 0 ? void 0 : _customStyle$getSecon2.rgb) !== null && _customStyle$getSecon !== void 0 ? _customStyle$getSecon : TABLE_DEFAULT_BG_COLOR;
+	const lastRowBg = (_customStyle$getLastR = customStyle === null || customStyle === void 0 || (_customStyle$getLastR2 = customStyle.getLastRowStyle()) === null || _customStyle$getLastR2 === void 0 || (_customStyle$getLastR2 = _customStyle$getLastR2.bg) === null || _customStyle$getLastR2 === void 0 ? void 0 : _customStyle$getLastR2.rgb) !== null && _customStyle$getLastR !== void 0 ? _customStyle$getLastR : TABLE_DEFAULT_BG_COLOR;
+	const [hoverCustomId, setHoverCustomId] = (0, react.useState)(null);
+	const handleThemeChange = (theme) => {
+		commandService.executeCommand(_univerjs_sheets_table.SetSheetTableCommand.id, {
+			unitId,
+			tableId,
+			theme
+		});
+	};
+	const handleAddCustomTheme = () => {
+		if (customRangeThemes.length >= 11) {
+			errorService.emit(localeService.t("sheets-table.customTooMore"));
+			return;
+		}
+		const lastCustomTheme = customRangeThemes[customRangeThemes.length - 1];
+		let newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}1`;
+		if (lastCustomTheme) newThemeName = `${TABLE_CUSTOM_NAME_PREFIX}${Number(lastCustomTheme.split("-")[2]) + 1}`;
+		const newTheme = new _univerjs_sheets.RangeThemeStyle(newThemeName, { ..._univerjs_sheets_table.customEmptyThemeWithBorderStyle });
+		commandService.executeCommand(_univerjs_sheets_table.AddTableThemeCommand.id, {
+			unitId,
+			tableId,
+			themeStyle: newTheme
+		});
+	};
+	const setCustomTheme = (themeName, tableThemeStyle) => {
+		commandService.executeCommand(_univerjs_sheets.SetRangeThemeMutation.id, {
+			unitId,
+			subUnitId,
+			styleName: themeName,
+			style: tableThemeStyle
+		});
+	};
+	const removeCustomTheme = (themeName) => {
+		commandService.executeCommand(_univerjs_sheets_table.RemoveTableThemeCommand.id, {
+			unitId,
+			tableId,
+			themeName
+		});
+	};
+	(0, react.useEffect)(() => {
+		setRefresh(Math.random());
+	}, [rangeThemeMapChanged, tableRefresh]);
+	if (!table) return null;
+	const headerBgIsDark = new _univerjs_core.ColorKit(headerBg).isDark();
+	const firstRowBgIsDark = new _univerjs_core.ColorKit(firstRowBg).isDark();
+	const secondRowBgIsDark = new _univerjs_core.ColorKit(secondRowBg).isDark();
+	const lastRowBgIsDark = new _univerjs_core.ColorKit(lastRowBg).isDark();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table.defaultStyle") }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "univer-flex univer-gap-2",
+			children: defaultRangeThemes.map((item) => {
+				var _rangeThemeItem$getHe, _rangeThemeItem$getFi, _rangeThemeItem$getSe, _rangeThemeItem$getLa;
+				const rangeThemeItem = rangeThemeModel.getDefaultRangeThemeStyle(item);
+				const headerRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe === void 0 || (_rangeThemeItem$getHe = _rangeThemeItem$getHe.bg) === null || _rangeThemeItem$getHe === void 0 ? void 0 : _rangeThemeItem$getHe.rgb) || "rgb(255, 255, 255)";
+				const firstRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi === void 0 || (_rangeThemeItem$getFi = _rangeThemeItem$getFi.bg) === null || _rangeThemeItem$getFi === void 0 ? void 0 : _rangeThemeItem$getFi.rgb) || "rgb(255, 255, 255)";
+				const secondRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe === void 0 || (_rangeThemeItem$getSe = _rangeThemeItem$getSe.bg) === null || _rangeThemeItem$getSe === void 0 ? void 0 : _rangeThemeItem$getSe.rgb) || "rgb(255, 255, 255)";
+				const lastRowBg = (rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa === void 0 || (_rangeThemeItem$getLa = _rangeThemeItem$getLa.bg) === null || _rangeThemeItem$getLa === void 0 ? void 0 : _rangeThemeItem$getLa.rgb) || "rgb(255, 255, 255)";
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: (0, _univerjs_design.clsx)("univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px [&>div]:univer-box-border [&>div]:univer-h-2.5", { "univer-border-blue-500": item === themeConfig.theme }),
+					onClick: () => handleThemeChange(item),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: headerRowBg,
+							border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: firstRowBg,
+							border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: secondRowBg,
+							border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} }),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { style: {
+							background: lastRowBg,
+							border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+						} })
+					]
+				}, item);
+			})
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h5", { children: localeService.t("sheets-table.customStyle") }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _univerjs_design.clsx)("univer-w-full univer-rounded-sm", _univerjs_design.borderClassName),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-flex-wrap univer-gap-2 univer-p-2",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: (0, _univerjs_design.clsx)("univer-h-10 univer-w-8 univer-cursor-pointer univer-p-px univer-text-center univer-leading-10", _univerjs_design.borderClassName),
+					onClick: handleAddCustomTheme,
+					children: "+"
+				}), customRangeThemes.map((item) => {
+					var _rangeThemeItem$getHe2, _rangeThemeItem$getFi2, _rangeThemeItem$getSe2, _rangeThemeItem$getLa2;
+					const rangeThemeItem = rangeThemeModel.getCustomRangeThemeStyle(unitId, item);
+					const headerRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getHe2 = rangeThemeItem.getHeaderRowStyle()) === null || _rangeThemeItem$getHe2 === void 0 || (_rangeThemeItem$getHe2 = _rangeThemeItem$getHe2.bg) === null || _rangeThemeItem$getHe2 === void 0 ? void 0 : _rangeThemeItem$getHe2.rgb;
+					const firstRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getFi2 = rangeThemeItem.getFirstRowStyle()) === null || _rangeThemeItem$getFi2 === void 0 || (_rangeThemeItem$getFi2 = _rangeThemeItem$getFi2.bg) === null || _rangeThemeItem$getFi2 === void 0 ? void 0 : _rangeThemeItem$getFi2.rgb;
+					const secondRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getSe2 = rangeThemeItem.getSecondRowStyle()) === null || _rangeThemeItem$getSe2 === void 0 || (_rangeThemeItem$getSe2 = _rangeThemeItem$getSe2.bg) === null || _rangeThemeItem$getSe2 === void 0 ? void 0 : _rangeThemeItem$getSe2.rgb;
+					const lastRowBg = rangeThemeItem === null || rangeThemeItem === void 0 || (_rangeThemeItem$getLa2 = rangeThemeItem.getLastRowStyle()) === null || _rangeThemeItem$getLa2 === void 0 || (_rangeThemeItem$getLa2 = _rangeThemeItem$getLa2.bg) === null || _rangeThemeItem$getLa2 === void 0 ? void 0 : _rangeThemeItem$getLa2.rgb;
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: (0, _univerjs_design.clsx)("univer-relative univer-h-10 univer-w-8 univer-cursor-pointer univer-border univer-border-solid univer-border-gray-200 univer-p-px", { "univer-border-blue-500": item === themeConfig.theme }),
+						onClick: () => handleThemeChange(item),
+						onMouseEnter: () => setHoverCustomId(item),
+						onMouseLeave: () => setHoverCustomId(null),
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: headerRowBg !== null && headerRowBg !== void 0 ? headerRowBg : TABLE_BORDER_NONE,
+									border: `${headerRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: firstRowBg !== null && firstRowBg !== void 0 ? firstRowBg : TABLE_BORDER_NONE,
+									border: `${firstRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: secondRowBg !== null && secondRowBg !== void 0 ? secondRowBg : TABLE_BORDER_NONE,
+									border: `${secondRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-box-border univer-h-2.5",
+								style: {
+									background: lastRowBg !== null && lastRowBg !== void 0 ? lastRowBg : TABLE_BORDER_NONE,
+									border: `${lastRowBg ? TABLE_BORDER_NONE : TABLE_BORDER_DEFAULT}`
+								}
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("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]",
+								style: { display: hoverCustomId === item ? "block" : "none" },
+								onClick: (e) => {
+									e.stopPropagation();
+									removeCustomTheme(item);
+								},
+								children: "x"
+							})
+						]
+					}, item);
+				})]
+			}), customSelected && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-h-px univer-w-full univer-bg-gray-200" }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "univer-flex univer-flex-col univer-gap-2 univer-p-2",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": headerBgIsDark,
+								"univer-text-gray-900": !headerBgIsDark
+							}),
+							style: { background: headerBg },
+							children: localeService.t("sheets-table.header")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: headerBg,
+									onChange: (val) => {
+										const headerRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("headerRowStyle", {
+											bg: { rgb: val },
+											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+										});
+										setCustomTheme(table.getTableStyleId(), { headerRowStyle });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName, {
+										"univer-text-white": headerBgIsDark,
+										"univer-text-gray-900": !headerBgIsDark
+									}),
+									style: { background: headerBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": firstRowBgIsDark,
+								"univer-text-gray-900": !firstRowBgIsDark
+							}),
+							style: { background: firstRowBg },
+							children: localeService.t("sheets-table.firstLine")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: firstRowBg,
+									onChange: (val) => {
+										setCustomTheme(table.getTableStyleId(), { firstRowStyle: {
+											bg: { rgb: val },
+											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+										} });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
+									style: { background: firstRowBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": secondRowBgIsDark,
+								"univer-text-gray-900": !secondRowBgIsDark
+							}),
+							style: { background: secondRowBg },
+							children: localeService.t("sheets-table.secondLine")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: secondRowBg,
+									onChange: (val) => setCustomTheme(table.getTableStyleId(), { secondRowStyle: {
+										bg: { rgb: val },
+										cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+									} })
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
+									style: { background: secondRowBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-flex univer-h-9 univer-gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-h-full univer-w-52 univer-rounded-sm univer-text-center univer-leading-9", _univerjs_design.borderClassName, {
+								"univer-text-white": lastRowBgIsDark,
+								"univer-text-gray-900": !lastRowBgIsDark
+							}),
+							style: { background: lastRowBg },
+							children: localeService.t("sheets-table.footer")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Dropdown, {
+							overlay: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "univer-p-2",
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.ColorPicker, {
+									value: lastRowBg,
+									onChange: (val) => {
+										const lastRowStyle = (0, _univerjs_sheets_table.processStyleWithBorderStyle)("lastRowStyle", {
+											bg: { rgb: val },
+											cl: { rgb: new _univerjs_core.ColorKit(val).isDark() ? "#fff" : "#000" }
+										});
+										setCustomTheme(table.getTableStyleId(), { lastRowStyle });
+									}
+								})
+							}),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								className: (0, _univerjs_design.clsx)("univer-flex univer-cursor-pointer univer-items-center univer-gap-2 univer-rounded-sm univer-bg-white univer-p-1", _univerjs_design.borderClassName),
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									className: (0, _univerjs_design.clsx)("univer-size-4 univer-rounded-lg univer-bg-gray-400", _univerjs_design.borderClassName),
+									style: { background: lastRowBg }
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.DropdownIcon, { className: "univer-size-2" })]
+							})
+						})]
+					})
+				]
+			})] })]
+		})
+	] });
+};
+
+//#endregion
+//#region src/menu/menu.ts
+const SHEET_TABLE_CONTEXT_INSERT_MENU_ID = "sheet.table.context-insert_menu-id";
+const SHEET_TABLE_CONTEXT_REMOVE_MENU_ID = "sheet.table.context-remove_menu-id";
+function sheetTableToolbarInsertMenuFactory(accessor) {
+	return {
+		id: OpenTableSelectorOperation.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		icon: TABLE_TOOLBAR_BUTTON,
+		tooltip: "sheets-table.title",
+		title: "sheets-table.title",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {}, true)
+	};
+}
+function SheetTableInsertContextMenuFactory(accessor) {
+	return {
+		id: SHEET_TABLE_CONTEXT_INSERT_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "InsertDoubleIcon",
+		title: "sheets-table.insert.main",
+		hidden$: getSheetTableRowColOperationHidden$(accessor)
+	};
+}
+function SheetTableRemoveContextMenuFactory(accessor) {
+	return {
+		id: SHEET_TABLE_CONTEXT_REMOVE_MENU_ID,
+		type: _univerjs_ui.MenuItemType.SUBITEMS,
+		icon: "ReduceDoubleIcon",
+		title: "sheets-table.remove.main",
+		hidden$: getSheetTableRowColOperationHidden$(accessor)
+	};
+}
+function SheetTableInsertRowMenuFactory(accessor) {
+	return {
+		id: _univerjs_sheets_table.SheetTableInsertRowCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		title: "sheets-table.insert.row",
+		hidden$: getSheetTableHeaderOperationHidden$(accessor)
+	};
+}
+function SheetTableInsertColMenuFactory(accessor) {
+	return {
+		id: _univerjs_sheets_table.SheetTableInsertColCommand.id,
+		title: "sheets-table.insert.col",
+		type: _univerjs_ui.MenuItemType.BUTTON
+	};
+}
+function SheetTableRemoveRowMenuFactory(accessor) {
+	return {
+		id: _univerjs_sheets_table.SheetTableRemoveRowCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		title: "sheets-table.remove.row",
+		hidden$: getSheetTableHeaderOperationHidden$(accessor)
+	};
+}
+function SheetTableRemoveColMenuFactory(accessor) {
+	return {
+		id: _univerjs_sheets_table.SheetTableRemoveColCommand.id,
+		title: "sheets-table.remove.col",
+		type: _univerjs_ui.MenuItemType.BUTTON
+	};
+}
+function getSheetTableRowColOperationHidden$(accessor) {
+	const sheetsSelectionsService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
+	return accessor.get(_univerjs_core.IUniverInstanceService).getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => {
+		if (!workbook) return (0, rxjs.of)(true);
+		return workbook.activeSheet$.pipe((0, rxjs.switchMap)((sheet) => {
+			if (!sheet) return (0, rxjs.of)(true);
+			return sheetsSelectionsService.selectionMoveEnd$.pipe((0, rxjs.switchMap)((selections) => {
+				if (!selections.length || selections.length > 1) return (0, rxjs.of)(true);
+				const range = selections[0].range;
+				return (0, rxjs.of)(!accessor.get(_univerjs_sheets_table.SheetsTableController).getContainerTableWithRange(workbook.getUnitId(), sheet.getSheetId(), range));
+			}));
+		}));
+	}));
+}
+function getSheetTableHeaderOperationHidden$(accessor) {
+	const sheetsSelectionsService = accessor.get(_univerjs_sheets.SheetsSelectionsService);
+	return accessor.get(_univerjs_core.IUniverInstanceService).getCurrentTypeOfUnit$(_univerjs_core.UniverInstanceType.UNIVER_SHEET).pipe((0, rxjs.switchMap)((workbook) => {
+		if (!workbook) return (0, rxjs.of)(true);
+		return workbook.activeSheet$.pipe((0, rxjs.switchMap)((sheet) => {
+			if (!sheet) return (0, rxjs.of)(true);
+			return sheetsSelectionsService.selectionMoveEnd$.pipe((0, rxjs.switchMap)((selections) => {
+				if (!selections.length || selections.length > 1) return (0, rxjs.of)(true);
+				const range = selections[0].range;
+				const isInTable = accessor.get(_univerjs_sheets_table.SheetsTableController).getContainerTableWithRange(workbook.getUnitId(), sheet.getSheetId(), range);
+				if (!isInTable) return (0, rxjs.of)(true);
+				const tableRange = isInTable.getRange();
+				if (range.startRow === tableRange.startRow) return (0, rxjs.of)(true);
+				return (0, rxjs.of)(false);
+			}));
+		}));
+	}));
+}
+
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = {
+	[_univerjs_ui.RibbonDataGroup.ORGANIZATION]: { [OpenTableSelectorOperation.id]: {
+		order: 0,
+		menuItemFactory: sheetTableToolbarInsertMenuFactory
+	} },
+	[_univerjs_ui.ContextMenuPosition.MAIN_AREA]: { [_univerjs_ui.ContextMenuGroup.LAYOUT]: {
+		[SHEET_TABLE_CONTEXT_INSERT_MENU_ID]: {
+			order: 5,
+			menuItemFactory: SheetTableInsertContextMenuFactory,
+			[_univerjs_sheets_table.SheetTableInsertRowCommand.id]: {
+				order: 1,
+				menuItemFactory: SheetTableInsertRowMenuFactory
+			},
+			[_univerjs_sheets_table.SheetTableInsertColCommand.id]: {
+				order: 2,
+				menuItemFactory: SheetTableInsertColMenuFactory
+			}
+		},
+		[SHEET_TABLE_CONTEXT_REMOVE_MENU_ID]: {
+			order: 6,
+			menuItemFactory: SheetTableRemoveContextMenuFactory,
+			[_univerjs_sheets_table.SheetTableRemoveRowCommand.id]: {
+				order: 1,
+				menuItemFactory: SheetTableRemoveRowMenuFactory
+			},
+			[_univerjs_sheets_table.SheetTableRemoveColCommand.id]: {
+				order: 2,
+				menuItemFactory: SheetTableRemoveColMenuFactory
+			}
+		}
+	} }
+};
+
+//#endregion
+//#region src/menu/sheet-table-menu.controller.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+let SheetTableMenuController = class SheetTableMenuController extends _univerjs_core.Disposable {
+	constructor(_componentManager, _menuManagerService) {
+		super();
+		this._componentManager = _componentManager;
+		this._menuManagerService = _menuManagerService;
+		this._initComponents();
+		this._initMenu();
+	}
+	_initComponents() {
+		[
+			[TABLE_TOOLBAR_BUTTON, _univerjs_icons.TableIcon],
+			[TABLE_SELECTOR_DIALOG, SheetTableSelector],
+			[SHEET_TABLE_THEME_PANEL, SheetTableThemePanel]
+		].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
+	}
+	_initMenu() {
+		this._menuManagerService.mergeMenu(menuSchema);
+	}
+};
+SheetTableMenuController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IMenuManagerService))], SheetTableMenuController);
+
+//#endregion
+//#region src/plugin.ts
+let UniverSheetsTableUIPlugin = class UniverSheetsTableUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _commandService, _configService, _renderManagerService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._commandService = _commandService;
+		this._configService = _configService;
+		this._renderManagerService = _renderManagerService;
+		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(SHEETS_TABLE_UI_PLUGIN_CONFIG_KEY, rest);
+		this._initRegisterCommand();
+	}
+	onStarting() {
+		(0, _univerjs_core.registerDependencies)(this._injector, [
+			[SheetsTableComponentController],
+			[SheetsTableUiService],
+			[SheetTableMenuController],
+			[SheetTableThemeUIController],
+			[SheetTableSelectionController]
+		]);
+	}
+	onReady() {
+		(0, _univerjs_core.touchDependencies)(this._injector, [
+			[SheetsTableComponentController],
+			[SheetsTableUiService],
+			[SheetTableMenuController],
+			[SheetTableThemeUIController],
+			[SheetTableSelectionController]
+		]);
+	}
+	onRendered() {
+		this._registerRenderModules();
+	}
+	_registerRenderModules() {
+		const renderDependencies = [[SheetsTableFilterButtonRenderController], [SheetsTableRenderController]];
+		if (this._config.hideAnchor !== true) renderDependencies.push([SheetTableAnchorController]);
+		renderDependencies.forEach((m) => {
+			this.disposeWithMe(this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, m));
+		});
+	}
+	_initRegisterCommand() {
+		[OpenTableFilterPanelOperation, OpenTableSelectorOperation].forEach((m) => this._commandService.registerCommand(m));
+	}
+};
+_defineProperty(UniverSheetsTableUIPlugin, "pluginName", PLUGIN_NAME);
+_defineProperty(UniverSheetsTableUIPlugin, "packageName", name);
+_defineProperty(UniverSheetsTableUIPlugin, "version", version);
+_defineProperty(UniverSheetsTableUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
+UniverSheetsTableUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_sheets_table.UniverSheetsTablePlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_core.ICommandService)),
+	__decorateParam(3, _univerjs_core.IConfigService),
+	__decorateParam(4, _univerjs_engine_render.IRenderManagerService)
+], UniverSheetsTableUIPlugin);
+
+//#endregion
+Object.defineProperty(exports, 'UniverSheetsTableUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverSheetsTableUIPlugin;
+  }
+});