@univerjs/sheets-filter-ui 0.25.0 → 1.0.0-alpha.0

package/lib/cjs/index.js

@@ -6,11 +6,11 @@ let _univerjs_ui = require("@univerjs/ui");
 let _univerjs_engine_render = require("@univerjs/engine-render");
 let _univerjs_sheets = require("@univerjs/sheets");
 let rxjs = require("rxjs");
-let _univerjs_rpc = require("@univerjs/rpc");
-let _univerjs_design = require("@univerjs/design");
 let _univerjs_icons = require("@univerjs/icons");
+let _univerjs_design = require("@univerjs/design");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _univerjs_rpc = require("@univerjs/rpc");
 
 //#region src/models/conditions.ts
 let FilterConditionItems;
@@ -599,7 +599,7 @@ function statisticFilterByValueItems(items) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -607,7 +607,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/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);
@@ -717,7 +717,7 @@ function getFilterTreeByValueItems(filters, localeService, iterateRange, workshe
 						title: `${day}`,
 						key: `${year}-${month}-${day}`,
 						count: 1,
-						originValues: new Set([value]),
+						originValues: /* @__PURE__ */ new Set([value]),
 						leaf: true,
 						checked: isNeedClearCheckedStatus ? false : alreadyChecked.size ? alreadyChecked.has(value) : !blankChecked
 					});
@@ -837,7 +837,7 @@ function searchTree(items, searchKeywords) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -848,7 +848,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -861,14 +861,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.133.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.137.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -1518,7 +1518,7 @@ const ChangeFilterByOperation = {
 //#endregion
 //#region package.json
 var name = "@univerjs/sheets-filter-ui";
-var version = "0.25.0";
+var version = "1.0.0-alpha.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1527,949 +1527,973 @@ const configSymbol = Symbol(SHEETS_FILTER_UI_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
 //#endregion
-//#region src/controllers/sheets-filter-permission.controller.ts
-let SheetsFilterPermissionController = class SheetsFilterPermissionController extends _univerjs_core.Disposable {
-	constructor(_sheetsFilterService, _localeService, _commandService, _sheetPermissionCheckPermission, _injector, _sheetsSelectionService) {
-		super();
-		this._sheetsFilterService = _sheetsFilterService;
-		this._localeService = _localeService;
-		this._commandService = _commandService;
-		this._sheetPermissionCheckPermission = _sheetPermissionCheckPermission;
-		this._injector = _injector;
-		this._sheetsSelectionService = _sheetsSelectionService;
-		this._commandExecutedListener();
-	}
-	_commandExecutedListener() {
-		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
-			if (command.id === _univerjs_sheets_filter.SmartToggleSheetsFilterCommand.id) {
-				var _this$_sheetsFilterSe;
-				const target = (0, _univerjs_sheets.getSheetCommandTarget)(this._injector.get(_univerjs_core.IUniverInstanceService));
-				if (!target) return;
-				const { unitId, subUnitId, worksheet } = target;
-				const filterRange = (_this$_sheetsFilterSe = this._sheetsFilterService.getFilterModel(unitId, subUnitId)) === null || _this$_sheetsFilterSe === void 0 ? void 0 : _this$_sheetsFilterSe.getRange();
-				let permission;
-				if (filterRange) permission = this._sheetPermissionCheckPermission.permissionCheckWithRanges({
-					rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
-					worksheetTypes: [_univerjs_sheets.WorksheetFilterPermission, _univerjs_sheets.WorksheetViewPermission]
-				}, [filterRange], unitId, subUnitId);
-				else {
-					var _this$_sheetsSelectio;
-					const range = (_this$_sheetsSelectio = this._sheetsSelectionService.getCurrentLastSelection()) === null || _this$_sheetsSelectio === void 0 ? void 0 : _this$_sheetsSelectio.range;
-					if (range) {
-						let newRange = { ...range };
-						newRange = range.startColumn === range.endColumn && range.startRow === range.endRow ? (0, _univerjs_sheets.expandToContinuousRange)(newRange, {
-							left: true,
-							right: true,
-							up: true,
-							down: true
-						}, worksheet) : newRange;
-						permission = this._sheetPermissionCheckPermission.permissionCheckWithRanges({
-							rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
-							worksheetTypes: [_univerjs_sheets.WorksheetViewPermission, _univerjs_sheets.WorksheetFilterPermission]
-						}, [newRange], unitId, subUnitId);
-					} else permission = this._sheetPermissionCheckPermission.permissionCheckWithoutRange({
-						rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
-						worksheetTypes: [_univerjs_sheets.WorksheetViewPermission, _univerjs_sheets.WorksheetFilterPermission]
-					});
-				}
-				if (!permission) this._sheetPermissionCheckPermission.blockExecuteWithoutPermission(this._localeService.t("sheets-filter-ui.permission.filterErr"));
-			}
-			if (command.id === OpenFilterPanelOperation.id) {
-				var _this$_sheetsFilterSe2;
-				const params = command.params;
-				const { unitId, subUnitId } = params;
-				const filterRange = (_this$_sheetsFilterSe2 = this._sheetsFilterService.getFilterModel(unitId, subUnitId)) === null || _this$_sheetsFilterSe2 === void 0 ? void 0 : _this$_sheetsFilterSe2.getRange();
-				const colRange = _univerjs_core.Tools.deepClone(filterRange);
-				if (colRange) {
-					colRange.startColumn = params.col;
-					colRange.endColumn = params.col;
-					if (!this._sheetPermissionCheckPermission.permissionCheckWithRanges({
-						rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
-						worksheetTypes: [_univerjs_sheets.WorksheetFilterPermission, _univerjs_sheets.WorksheetViewPermission]
-					}, [colRange], unitId, subUnitId)) this._sheetPermissionCheckPermission.blockExecuteWithoutPermission(this._localeService.t("sheets-filter-ui.permission.filterErr"));
-				}
-			}
-		}));
-	}
-};
-SheetsFilterPermissionController = __decorate([
-	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets_filter.SheetsFilterService)),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(2, _univerjs_core.ICommandService),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetPermissionCheckController)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService))
-], SheetsFilterPermissionController);
-
-//#endregion
-//#region src/views/widgets/drawings.ts
-const BUTTON_VIEWPORT = 16;
-const FILTER_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 FilterButton = class {
-	static drawNoCriteria(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 drawHasCriteria(ctx, size, fgColor, bgColor) {
-		ctx.save();
-		_univerjs_engine_render.Rect.drawWith(ctx, {
-			radius: 2,
-			width: BUTTON_VIEWPORT,
-			height: BUTTON_VIEWPORT,
-			fill: bgColor
-		});
-		ctx.scale(size / BUTTON_VIEWPORT, size / BUTTON_VIEWPORT);
-		ctx.fillStyle = fgColor;
-		ctx.fill(FILTER_BUTTON_EMPTY);
-		ctx.restore();
-	}
-};
+//#region src/views/components/SheetsFilterByColorsPanel.tsx
+/**
+* Filter by colors.
+*/
+function FilterByColor(props) {
+	const { model } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const cellFillColors = (0, _univerjs_ui.useObservable)(model.cellFillColors$, [], true);
+	const cellTextColors = (0, _univerjs_ui.useObservable)(model.cellTextColors$, [], true);
+	const handleSelectCellFillColor = (0, react.useCallback)((color) => {
+		model.onFilterCheckToggled(color);
+	}, [model]);
+	const handleSelectCellTextColor = (0, react.useCallback)((color) => {
+		model.onFilterCheckToggled(color, false);
+	}, [model]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "sheets-filter-panel-colors-container",
+		className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "sheets-filter-panel",
+			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-h-[300px] univer-flex-grow univer-flex-col univer-gap-4 univer-overflow-auto univer-rounded-md univer-px-2 univer-py-2.5", _univerjs_design.borderClassName),
+			children: [
+				cellFillColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-mb-2 univer-text-sm univer-text-gray-900 dark:!univer-text-white",
+					children: localeService.t("sheets-filter-ui.panel.filter-by-cell-fill-color")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-grid univer-grid-cols-8 univer-items-center univer-justify-start univer-gap-2",
+					children: cellFillColors.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-relative univer-size-6",
+						onClick: () => handleSelectCellFillColor(color),
+						children: [!color.color ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.BanIcon, { className: "univer-size-6 univer-cursor-pointer univer-rounded-full hover:univer-ring-2 hover:univer-ring-offset-2 hover:univer-ring-offset-white" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							className: (0, _univerjs_design.clsx)("univer-box-border univer-size-6 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow hover:univer-ring-2 hover:univer-ring-offset-2 hover:univer-ring-offset-white"),
+							style: { backgroundColor: color.color }
+						}), color.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})]
+					}, `sheets-filter-cell-fill-color-${index}`))
+				})] }),
+				cellTextColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-mb-2 univer-text-sm univer-text-gray-900 dark:!univer-text-white",
+					children: localeService.t("sheets-filter-ui.panel.filter-by-cell-text-color")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-grid univer-grid-cols-8 univer-items-center univer-justify-start univer-gap-2",
+					children: cellTextColors.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-relative univer-size-6",
+						onClick: () => handleSelectCellTextColor(color),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "univer-box-border univer-flex univer-size-full univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-[rgba(13,13,13,0.06)] univer-p-0.5 hover:univer-ring-2 hover:univer-ring-offset-2 hover:univer-ring-offset-white dark:!univer-border-[rgba(255,255,255,0.06)]",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AIcon, { style: { color: color.color } })
+						}), color.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})]
+					}, `sheets-filter-cell-text-color-${index}`))
+				})] }),
+				cellFillColors.length <= 1 && cellTextColors.length <= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "univer-flex univer-size-full univer-items-center univer-justify-center univer-text-sm univer-text-gray-900 dark:!univer-text-gray-200",
+					children: localeService.t("sheets-filter-ui.panel.filter-by-color-none")
+				})
+			]
+		})
+	});
+}
+function CheckedIcon() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-absolute -univer-bottom-0.5 -univer-right-0.5 univer-flex univer-size-3 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-bg-white",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SuccessIcon, { className: "univer-size-full univer-font-bold univer-text-[#418F1F]" })
+	});
+}
 
 //#endregion
-//#region src/views/widgets/filter-button.shape.ts
-const FILTER_ICON_SIZE = 16;
-let SheetsFilterButtonShape = class SheetsFilterButtonShape 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());
+//#region src/views/components/SheetsFilterByConditionsPanel.tsx
+/**
+* Filter by conditions.
+*/
+function FilterByCondition(props) {
+	var _formParams$val, _formParams$val2;
+	const { model } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const condition = (0, _univerjs_ui.useObservable)(model.conditionItem$, void 0);
+	const formParams = (0, _univerjs_ui.useObservable)(model.filterConditionFormParams$, void 0);
+	const radioValue = (formParams === null || formParams === void 0 ? void 0 : formParams.and) ? "AND" : "OR";
+	const onRadioChange = (0, react.useCallback)((key) => {
+		model.onConditionFormChange({ and: key === "AND" });
+	}, [model]);
+	const primaryOptions = usePrimaryOptions(localeService);
+	const onPrimaryConditionChange = (0, react.useCallback)((value) => {
+		model.onPrimaryConditionChange(value);
+	}, [model]);
+	const secondaryOptions = useSecondaryOptions(localeService);
+	const onFormParamsChange = (0, react.useCallback)((diffParams) => {
+		model.onConditionFormChange(diffParams);
+	}, [model]);
+	const placeholder = localeService.t("sheets-filter-ui.panel.input-values-placeholder");
+	function renderSecondaryCondition(operator, val, name) {
+		const shouldRenderInput = FilterConditionItems.getItemByOperator(operator).numOfParameters === 1;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			name === "operator2" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
+				value: radioValue,
+				onChange: onRadioChange,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+					value: "AND",
+					children: localeService.t("sheets-filter-ui.panel.and")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
+					value: "OR",
+					children: localeService.t("sheets-filter-ui.panel.or")
+				})]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+				value: operator,
+				options: secondaryOptions,
+				onChange: (operator) => onFormParamsChange({ [name]: operator })
+			}),
+			shouldRenderInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+				className: "univer-mt-2",
+				value: val,
+				placeholder,
+				onChange: (value) => onFormParamsChange({ [name === "operator1" ? "val1" : "val2"]: value })
+			}) })
+		] });
 	}
-	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
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-u-comp": "sheets-filter-panel-conditions-container",
+		className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
+		children: condition && formParams && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
+			value: condition.operator,
+			options: primaryOptions,
+			onChange: onPrimaryConditionChange
+		}), FilterConditionItems.getItemByOperator(condition.operator).numOfParameters !== 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "sheets-filter-panel-conditions-container-inner",
+			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-flex-grow univer-overflow-hidden univer-rounded-md univer-p-2", _univerjs_design.borderClassName),
+			children: [
+				condition.numOfParameters >= 1 && renderSecondaryCondition(formParams.operator1, (_formParams$val = formParams.val1) !== null && _formParams$val !== void 0 ? _formParams$val : "", "operator1"),
+				condition.numOfParameters >= 2 && renderSecondaryCondition(formParams.operator2, (_formParams$val2 = formParams.val2) !== null && _formParams$val2 !== void 0 ? _formParams$val2 : "", "operator2"),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-u-comp": "sheets-filter-panel-conditions-desc",
+					className: "univer-mt-2 univer-text-xs univer-text-gray-500",
+					children: [
+						localeService.t("sheets-filter-ui.panel.?"),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						localeService.t("sheets-filter-ui.panel.*")
+					]
+				})
+			]
+		}) : null] })
+	});
+}
+function usePrimaryOptions(localeService) {
+	return (0, react.useMemo)(() => [
+		{ options: [{
+			label: localeService.t(FilterConditionItems.NONE.label),
+			value: FilterConditionItems.NONE.operator
+		}] },
+		{ options: [{
+			label: localeService.t(FilterConditionItems.EMPTY.label),
+			value: FilterConditionItems.EMPTY.operator
+		}, {
+			label: localeService.t(FilterConditionItems.NOT_EMPTY.label),
+			value: FilterConditionItems.NOT_EMPTY.operator
+		}] },
+		{ options: [
+			{
+				label: localeService.t(FilterConditionItems.TEXT_CONTAINS.label),
+				value: FilterConditionItems.TEXT_CONTAINS.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.DOES_NOT_CONTAIN.label),
+				value: FilterConditionItems.DOES_NOT_CONTAIN.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.STARTS_WITH.label),
+				value: FilterConditionItems.STARTS_WITH.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.ENDS_WITH.label),
+				value: FilterConditionItems.ENDS_WITH.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.EQUALS.label),
+				value: FilterConditionItems.EQUALS.operator
+			}
+		] },
+		{ options: [
+			{
+				label: localeService.t(FilterConditionItems.GREATER_THAN.label),
+				value: FilterConditionItems.GREATER_THAN.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.GREATER_THAN_OR_EQUAL.label),
+				value: FilterConditionItems.GREATER_THAN_OR_EQUAL.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.LESS_THAN.label),
+				value: FilterConditionItems.LESS_THAN.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.LESS_THAN_OR_EQUAL.label),
+				value: FilterConditionItems.LESS_THAN_OR_EQUAL.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.EQUAL.label),
+				value: FilterConditionItems.EQUAL.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.NOT_EQUAL.label),
+				value: FilterConditionItems.NOT_EQUAL.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.BETWEEN.label),
+				value: FilterConditionItems.BETWEEN.operator
+			},
+			{
+				label: localeService.t(FilterConditionItems.NOT_BETWEEN.label),
+				value: FilterConditionItems.NOT_BETWEEN.operator
+			}
+		] },
+		{ options: [{
+			label: localeService.t(FilterConditionItems.CUSTOM.label),
+			value: FilterConditionItems.CUSTOM.operator
+		}] }
+	], [localeService.getCurrentLocale(), localeService]);
+}
+function useSecondaryOptions(localeService) {
+	return (0, react.useMemo)(() => FilterConditionItems.ALL_CONDITIONS.filter((c) => c.numOfParameters !== 2).map((c) => ({
+		label: localeService.t(c.label),
+		value: c.operator
+	})), [localeService.getCurrentLocale(), localeService]);
+}
+
+//#endregion
+//#region src/views/components/SheetsFilterByValuesPanel.tsx
+/**
+* Filter by values.
+*/
+function FilterByValue(props) {
+	const { model } = props;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const searchText = (0, _univerjs_ui.useObservable)(model.searchString$, "", true);
+	const items = (0, _univerjs_ui.useObservable)(model.filterItems$, void 0, true);
+	const filterOnly = localeService.t("sheets-filter-ui.panel.filter-only");
+	const stat = statisticFilterByValueItems(items);
+	const allChecked = stat.checked > 0 && stat.unchecked === 0;
+	const indeterminate = stat.checked > 0 && stat.unchecked > 0;
+	const treeMap = model.treeMapCache;
+	const onCheckAllToggled = (0, react.useCallback)(() => {
+		model.onCheckAllToggled(!allChecked);
+	}, [model, allChecked]);
+	const onSearchValueChange = (0, react.useCallback)((str) => {
+		model.setSearchString(str);
+	}, [model]);
+	function extractCheckedKeys(items) {
+		let checkedKeys = [];
+		items.forEach((item) => {
+			if (item.checked) checkedKeys.push(item.key);
+			if (item.children) checkedKeys = checkedKeys.concat(extractCheckedKeys(item.children));
 		});
+		return checkedKeys;
 	}
-	_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 { hasCriteria } = this._filterParams;
-		const fgColor = this._themeService.getColorFromTheme("primary.600");
-		const bgColor = this._hovered ? this._themeService.getColorFromTheme("gray.50") : "rgba(255, 255, 255, 1.0)";
-		if (hasCriteria) FilterButton.drawHasCriteria(ctx, 16, fgColor, bgColor);
-		else FilterButton.drawNoCriteria(ctx, 16, fgColor, bgColor);
-		ctx.restore();
-	}
-	onPointerDown(evt) {
-		if (evt.button === 2) return;
-		const { col, unitId, subUnitId } = this._filterParams;
-		if (this._contextService.getContextValue("FILTER_PANEL_OPENED") || !this._commandService.hasCommand(OpenFilterPanelOperation.id)) return;
-		setTimeout(() => {
-			this._commandService.executeCommand(OpenFilterPanelOperation.id, {
-				unitId,
-				subUnitId,
-				col
-			});
-		}, 200);
-	}
-	onPointerEnter() {
-		this._hovered = true;
-		this.makeDirty(true);
-	}
-	onPointerLeave() {
-		this._hovered = false;
-		this.makeDirty(true);
-	}
-};
-SheetsFilterButtonShape = __decorate([
-	__decorateParam(2, _univerjs_core.IContextService),
-	__decorateParam(3, _univerjs_core.ICommandService),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
-], SheetsFilterButtonShape);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "sheets-filter-panel-values-container",
+		className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+			autoFocus: true,
+			value: searchText,
+			placeholder: localeService.t("sheets-filter-ui.panel.search-placeholder"),
+			onChange: onSearchValueChange
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			"data-u-comp": "sheets-filter-panel",
+			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-px-2 univer-py-2.5", _univerjs_design.borderClassName),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-u-comp": "sheets-filter-panel-values-item",
+				className: "univer-box-border univer-h-8 univer-w-full univer-py-0.5",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-u-comp": "sheets-filter-panel-values-item-inner",
+					className: "univer-box-border univer-flex univer-h-7 univer-items-center univer-rounded-md univer-py-0 univer-pl-5 univer-pr-0.5 univer-text-sm",
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
+							indeterminate,
+							disabled: items.length === 0,
+							checked: allChecked,
+							onChange: onCheckAllToggled
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-u-comp": "sheets-filter-panel-values-item-text",
+							className: "univer-mx-1 univer-inline-block univer-flex-shrink univer-truncate univer-text-gray-900 dark:!univer-text-white",
+							children: `${localeService.t("sheets-filter-ui.panel.select-all")}`
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-u-comp": "sheets-filter-panel-values-item-count",
+							className: "univer-text-gray-400 dark:!univer-text-gray-500",
+							children: `(${stat.checked}/${stat.checked + stat.unchecked})`
+						})
+					]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-u-comp": "sheets-filter-panel-values-virtual",
+				className: "univer-flex-grow",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tree, {
+					data: items,
+					defaultExpandAll: false,
+					valueGroup: extractCheckedKeys(items),
+					onChange: (node) => {
+						model.onFilterCheckToggled(node);
+					},
+					defaultCache: treeMap,
+					itemHeight: 28,
+					treeNodeClassName: `
+                          univer-pr-2 univer-border-box univer-rounded-md
+                          [&:hover_a]:univer-inline-block
+                          hover:univer-bg-gray-50 univer-h-full
+                          univer-text-gray-900 dark:hover:!univer-bg-gray-900
+                          dark:!univer-text-white
+                        `,
+					attachRender: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "univer-ml-1 univer-flex univer-h-5 univer-flex-1 univer-cursor-pointer univer-items-center univer-justify-between univer-text-sm univer-text-primary-500",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-u-comp": "sheets-filter-panel-values-item-count",
+							className: "univer-text-gray-400 dark:!univer-text-gray-500",
+							children: `(${item.count})`
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+							className: "univer-box-border univer-hidden univer-h-4 univer-whitespace-nowrap univer-px-1.5",
+							onClick: () => {
+								const filterValues = [];
+								if (item.children) item.children.forEach((child) => {
+									if (child.children) child.children.forEach((subChild) => {
+										filterValues.push(subChild.key);
+									});
+									else filterValues.push(child.key);
+								});
+								else filterValues.push(item.key);
+								model.onFilterOnly(filterValues);
+							},
+							children: filterOnly
+						})]
+					})
+				})
+			})]
+		})]
+	});
+}
+
+//#endregion
+//#region src/views/components/SheetsFilterSyncSwitch.tsx
+function FilterSyncSwitch() {
+	const sheetsFilterSyncController = (0, _univerjs_ui.useDependency)(_univerjs_sheets_filter.SheetsFilterSyncController);
+	if (!(0, _univerjs_ui.useObservable)(sheetsFilterSyncController.visible$, void 0, true)) return null;
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const messageService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IMessageService);
+	const enabled = (0, _univerjs_ui.useObservable)(sheetsFilterSyncController.enabled$, void 0, true);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-mt-2 univer-flex univer-items-center univer-justify-between univer-text-sm univer-text-gray-900 dark:!univer-text-gray-200",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-flex univer-items-center univer-gap-1",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-filter-ui.sync.title") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
+				title: enabled ? localeService.t("sheets-filter-ui.sync.statusTips.off") : localeService.t("sheets-filter-ui.sync.statusTips.on"),
+				asChild: true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-block" })
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Switch, {
+			defaultChecked: enabled,
+			onChange: (checked) => {
+				const message = checked ? localeService.t("sheets-filter-ui.sync.switchTips.on") : localeService.t("sheets-filter-ui.sync.switchTips.off");
+				sheetsFilterSyncController.setEnabled(checked);
+				messageService.show({
+					content: message,
+					type: _univerjs_design.MessageType.Success,
+					duration: 2e3
+				});
+			}
+		})]
+	});
+}
 
 //#endregion
-//#region src/views/render-modules/sheets-filter.render-controller.ts
-const DEFAULT_Z_INDEX = 1e3;
-const SHEETS_FILTER_BUTTON_Z_INDEX = 5e3;
-function 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 SheetsFilterRenderController = class SheetsFilterRenderController extends _univerjs_core.RxDisposable {
-	constructor(_context, _injector, _sheetSkeletonManagerService, _sheetsFilterService, _themeService, _sheetInterceptorService, _commandService, _selectionRenderService) {
-		super();
-		this._context = _context;
-		this._injector = _injector;
-		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
-		this._sheetsFilterService = _sheetsFilterService;
-		this._themeService = _themeService;
-		this._sheetInterceptorService = _sheetInterceptorService;
-		this._commandService = _commandService;
-		this._selectionRenderService = _selectionRenderService;
-		_defineProperty(this, "_currentRenderParams", null);
-		_defineProperty(this, "_filterRangeShape", null);
-		_defineProperty(this, "_buttonRenderDisposable", null);
-		_defineProperty(this, "_filterButtonShapes", []);
-		this._initRenderer();
-	}
-	dispose() {
-		super.dispose();
-		this._disposeRendering();
-	}
-	_initRenderer() {
-		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => {
-			this._refreshRendering(this._currentRenderParams);
-		}));
-		this._sheetSkeletonManagerService.currentSkeleton$.pipe((0, rxjs.switchMap)((skeletonParams) => {
-			var _workbook$getActiveSh, _this$_sheetsFilterSe;
-			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 filterModel = (_this$_sheetsFilterSe = this._sheetsFilterService.getFilterModel(unitId, worksheetId)) !== null && _this$_sheetsFilterSe !== void 0 ? _this$_sheetsFilterSe : void 0;
-			const getParams = () => ({
-				unitId,
-				worksheetId,
-				filterModel,
-				range: filterModel === null || filterModel === void 0 ? void 0 : filterModel.getRange(),
-				skeleton: skeletonParams.skeleton
-			});
-			return (0, _univerjs_core.fromCallback)(this._commandService.onCommandExecuted.bind(this._commandService)).pipe((0, rxjs.filter)(([command]) => {
-				var _command$params;
-				return command.type === _univerjs_core.CommandType.MUTATION && ((_command$params = command.params) === null || _command$params === void 0 ? void 0 : _command$params.unitId) === workbook.getUnitId() && (_univerjs_sheets_filter.FILTER_MUTATIONS.has(command.id) || command.id === _univerjs_sheets.SetRangeValuesMutation.id);
-			}), (0, rxjs.throttleTime)(20, void 0, {
-				leading: false,
-				trailing: true
-			}), (0, rxjs.map)(getParams), (0, rxjs.startWith)(getParams()));
-		}), (0, rxjs.takeUntil)(this.dispose$)).subscribe((renderParams) => {
-			this._currentRenderParams = renderParams;
-			this._refreshRendering(renderParams);
-		});
-	}
-	_refreshRendering(renderParams) {
-		this._disposeRendering();
-		if (!renderParams || !renderParams.range) return;
-		this._renderRange(renderParams.range, renderParams.skeleton);
-		this._renderButtons(renderParams);
-	}
-	_renderRange(range, skeleton) {
-		const { scene } = this._context;
-		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
-		const filterRangeShape = this._filterRangeShape = new _univerjs_sheets_ui.SelectionControl(scene, DEFAULT_Z_INDEX, this._themeService, {
-			rowHeaderWidth,
-			columnHeaderHeight,
-			enableAutoFill: false,
-			highlightHeader: false
-		});
-		const selectionWithCoord = (0, _univerjs_sheets.attachSelectionWithCoord)({
-			range,
-			primary: null,
-			style: { fill: "rgba(0, 0, 0, 0.0)" }
-		}, skeleton);
-		filterRangeShape.updateRangeBySelectionWithCoord(selectionWithCoord);
-		filterRangeShape.setEvent(false);
-		scene.makeDirty(true);
-	}
-	_renderButtons(params) {
-		const { range, filterModel, unitId, skeleton, worksheetId } = params;
-		const { unit: workbook, scene } = this._context;
-		const worksheet = workbook.getSheetBySheetId(worksheetId);
-		if (!worksheet) return;
-		this._interceptCellContent(unitId, worksheetId, params.range);
-		const { startColumn, endColumn, startRow } = range;
-		for (let col = startColumn; col <= endColumn; col++) {
-			const key = `sheets-filter-button-${col}`;
-			const startPosition = (0, _univerjs_sheets_ui.getCoordByCell)(startRow, col, scene, skeleton);
-			const cellStyle = worksheet.getComposedCellStyle(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 hasCriteria = !!filterModel.getFilterColumn(col);
-			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,
-					col,
-					hasCriteria
+//#region src/views/components/SheetsFilterPanel.tsx
+/**
+* This Filter Panel component is used to filter the data in the sheet.
+*
+* @returns React element
+*/
+function FilterPanel() {
+	var _filterService$active;
+	const sheetsFilterPanelService = (0, _univerjs_ui.useDependency)(SheetsFilterPanelService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const filterBy = (0, _univerjs_ui.useObservable)(sheetsFilterPanelService.filterBy$, void 0, true);
+	const filterByModel = (0, _univerjs_ui.useObservable)(sheetsFilterPanelService.filterByModel$, void 0, false);
+	const canApply = (0, _univerjs_ui.useObservable)(() => (filterByModel === null || filterByModel === void 0 ? void 0 : filterByModel.canApply$) || (0, rxjs.of)(false), void 0, false, [filterByModel]);
+	const items = useFilterByOptions(localeService);
+	const clearFilterDisabled = !(0, _univerjs_ui.useObservable)(sheetsFilterPanelService.hasCriteria$);
+	const onFilterByTypeChange = (0, react.useCallback)((value) => {
+		commandService.executeCommand(ChangeFilterByOperation.id, { filterBy: value });
+	}, [commandService]);
+	const onClearCriteria = (0, react.useCallback)(async () => {
+		await (filterByModel === null || filterByModel === void 0 ? void 0 : filterByModel.clear());
+		commandService.executeCommand(CloseFilterPanelOperation.id);
+	}, [filterByModel, commandService]);
+	const onCancel = (0, react.useCallback)(() => {
+		commandService.executeCommand(CloseFilterPanelOperation.id);
+	}, [commandService]);
+	const onApply = (0, react.useCallback)(async () => {
+		await (filterByModel === null || filterByModel === void 0 ? void 0 : filterByModel.apply());
+		commandService.executeCommand(CloseFilterPanelOperation.id);
+	}, [filterByModel, commandService]);
+	const range = (_filterService$active = (0, _univerjs_ui.useDependency)(_univerjs_sheets_filter.SheetsFilterService).activeFilterModel) === null || _filterService$active === void 0 ? void 0 : _filterService$active.getRange();
+	const colIndex = sheetsFilterPanelService.col;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-u-comp": "sheets-filter-panel",
+		className: "univer-box-border univer-flex univer-max-h-[500px] univer-w-[400px] univer-flex-col univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ComponentContainer, {
+				components: (0, _univerjs_ui.useComponentsOfPart)(_univerjs_sheets_ui.SheetsUIPart.FILTER_PANEL_EMBED_POINT),
+				sharedProps: {
+					range,
+					colIndex,
+					onClose: onCancel
 				}
-			};
-			const buttonShape = this._injector.createInstance(SheetsFilterButtonShape, key, props);
-			this._filterButtonShapes.push(buttonShape);
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "univer-mb-1 univer-flex-shrink-0 univer-flex-grow-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Segmented, {
+					value: filterBy,
+					items,
+					onChange: (value) => onFilterByTypeChange(value)
+				})
+			}),
+			filterByModel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-u-comp": "sheets-filter-panel-content",
+				className: "univer-flex-shrink univer-flex-grow univer-pt-2",
+				children: filterBy === _univerjs_sheets_filter.FilterBy.VALUES ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterByValue, { model: filterByModel }) : filterBy === _univerjs_sheets_filter.FilterBy.COLORS ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterByColor, { model: filterByModel }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterByCondition, { model: filterByModel })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-flex-1" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterSyncSwitch, {}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-u-comp": "sheets-filter-panel-footer",
+				className: "univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-nowrap univer-justify-between univer-overflow-hidden",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+					variant: "link",
+					onClick: onClearCriteria,
+					disabled: clearFilterDisabled,
+					children: localeService.t("sheets-filter-ui.panel.clear-filter")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "univer-flex univer-gap-2",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						variant: "default",
+						onClick: onCancel,
+						children: localeService.t("sheets-filter-ui.panel.cancel")
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
+						disabled: !canApply,
+						variant: "primary",
+						onClick: onApply,
+						children: localeService.t("sheets-filter-ui.panel.confirm")
+					})]
+				})]
+			})
+		]
+	});
+}
+const FILTER_PANEL_POPUP_KEY = "FILTER_PANEL_POPUP";
+function useFilterByOptions(localeService) {
+	return (0, react.useMemo)(() => [
+		{
+			label: localeService.t("sheets-filter-ui.panel.by-values"),
+			value: _univerjs_sheets_filter.FilterBy.VALUES
+		},
+		{
+			label: localeService.t("sheets-filter-ui.panel.by-colors"),
+			value: _univerjs_sheets_filter.FilterBy.COLORS
+		},
+		{
+			label: localeService.t("sheets-filter-ui.panel.by-conditions"),
+			value: _univerjs_sheets_filter.FilterBy.CONDITIONS
 		}
-		scene.addObjects(this._filterButtonShapes);
-		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$_filterRangeSha, _this$_buttonRenderDi;
-		(_this$_filterRangeSha = this._filterRangeShape) === null || _this$_filterRangeSha === void 0 || _this$_filterRangeSha.dispose();
-		this._filterButtonShapes.forEach((s) => s.dispose());
-		(_this$_buttonRenderDi = this._buttonRenderDisposable) === null || _this$_buttonRenderDi === void 0 || _this$_buttonRenderDi.dispose();
-		this._filterRangeShape = null;
-		this._buttonRenderDisposable = null;
-		this._filterButtonShapes = [];
-	}
-};
-SheetsFilterRenderController = __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_filter.SheetsFilterService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
-	__decorateParam(6, _univerjs_core.ICommandService),
-	__decorateParam(7, _univerjs_sheets_ui.ISheetSelectionRenderService)
-], SheetsFilterRenderController);
+	], [localeService.getCurrentLocale(), localeService]);
+}
 
 //#endregion
-//#region src/controllers/sheets-filter-ui-mobile.controller.ts
-let SheetsFilterUIMobileController = class SheetsFilterUIMobileController extends _univerjs_core.RxDisposable {
-	constructor(_renderManagerService, _sheetsRenderService) {
+//#region src/controllers/components.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 ComponentsController = class ComponentsController extends _univerjs_core.Disposable {
+	constructor(_componentManager, _iconManager) {
 		super();
-		this._renderManagerService = _renderManagerService;
-		this._sheetsRenderService = _sheetsRenderService;
-		[
-			_univerjs_sheets_filter.SetSheetsFilterRangeMutation,
-			_univerjs_sheets_filter.SetSheetsFilterCriteriaMutation,
-			_univerjs_sheets_filter.RemoveSheetsFilterMutation,
-			_univerjs_sheets_filter.ReCalcSheetsFilterMutation
-		].forEach((m) => this.disposeWithMe(this._sheetsRenderService.registerSkeletonChangingMutations(m.id)));
-		this.disposeWithMe(this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, [SheetsFilterRenderController]));
+		this._componentManager = _componentManager;
+		this._iconManager = _iconManager;
+		this._registerIcons();
+		this._registerComponents();
+	}
+	_registerIcons() {
+		this.disposeWithMe(this._iconManager.register({ FilterIcon: _univerjs_icons.FilterIcon }));
+	}
+	_registerComponents() {
+		[[FILTER_PANEL_POPUP_KEY, FilterPanel]].forEach(([key, comp]) => {
+			this.disposeWithMe(this._componentManager.register(key, comp));
+		});
 	}
 };
-SheetsFilterUIMobileController = __decorate([__decorateParam(0, _univerjs_engine_render.IRenderManagerService), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetsRenderService))], SheetsFilterUIMobileController);
+ComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], ComponentsController);
 
 //#endregion
-//#region src/mobile-plugin.ts
-let UniverSheetsFilterMobileUIPlugin = class UniverSheetsFilterMobileUIPlugin extends _univerjs_core.Plugin {
-	constructor(_config = defaultPluginConfig, _injector, _configService) {
+//#region src/controllers/sheets-filter-permission.controller.ts
+let SheetsFilterPermissionController = class SheetsFilterPermissionController extends _univerjs_core.Disposable {
+	constructor(_sheetsFilterService, _localeService, _commandService, _sheetPermissionCheckPermission, _injector, _sheetsSelectionService) {
 		super();
-		this._config = _config;
+		this._sheetsFilterService = _sheetsFilterService;
+		this._localeService = _localeService;
+		this._commandService = _commandService;
+		this._sheetPermissionCheckPermission = _sheetPermissionCheckPermission;
 		this._injector = _injector;
-		this._configService = _configService;
-		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
-		if (menu) this._configService.setConfig("menu", menu, { merge: true });
-		this._configService.setConfig(SHEETS_FILTER_UI_PLUGIN_CONFIG_KEY, rest);
-	}
-	onStarting() {
-		[[SheetsFilterPermissionController], [SheetsFilterUIMobileController]].forEach((d) => this._injector.add(d));
-	}
-	onReady() {
-		this._injector.get(SheetsFilterPermissionController);
+		this._sheetsSelectionService = _sheetsSelectionService;
+		this._commandExecutedListener();
 	}
-	onRendered() {
-		this._injector.get(SheetsFilterUIMobileController);
+	_commandExecutedListener() {
+		this.disposeWithMe(this._commandService.beforeCommandExecuted((command) => {
+			if (command.id === _univerjs_sheets_filter.SmartToggleSheetsFilterCommand.id) {
+				var _this$_sheetsFilterSe;
+				const target = (0, _univerjs_sheets.getSheetCommandTarget)(this._injector.get(_univerjs_core.IUniverInstanceService));
+				if (!target) return;
+				const { unitId, subUnitId, worksheet } = target;
+				const filterRange = (_this$_sheetsFilterSe = this._sheetsFilterService.getFilterModel(unitId, subUnitId)) === null || _this$_sheetsFilterSe === void 0 ? void 0 : _this$_sheetsFilterSe.getRange();
+				let permission;
+				if (filterRange) permission = this._sheetPermissionCheckPermission.permissionCheckWithRanges({
+					rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
+					worksheetTypes: [_univerjs_sheets.WorksheetFilterPermission, _univerjs_sheets.WorksheetViewPermission]
+				}, [filterRange], unitId, subUnitId);
+				else {
+					var _this$_sheetsSelectio;
+					const range = (_this$_sheetsSelectio = this._sheetsSelectionService.getCurrentLastSelection()) === null || _this$_sheetsSelectio === void 0 ? void 0 : _this$_sheetsSelectio.range;
+					if (range) {
+						let newRange = { ...range };
+						newRange = range.startColumn === range.endColumn && range.startRow === range.endRow ? (0, _univerjs_sheets.expandToContinuousRange)(newRange, {
+							left: true,
+							right: true,
+							up: true,
+							down: true
+						}, worksheet) : newRange;
+						permission = this._sheetPermissionCheckPermission.permissionCheckWithRanges({
+							rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
+							worksheetTypes: [_univerjs_sheets.WorksheetViewPermission, _univerjs_sheets.WorksheetFilterPermission]
+						}, [newRange], unitId, subUnitId);
+					} else permission = this._sheetPermissionCheckPermission.permissionCheckWithoutRange({
+						rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
+						worksheetTypes: [_univerjs_sheets.WorksheetViewPermission, _univerjs_sheets.WorksheetFilterPermission]
+					});
+				}
+				if (!permission) this._sheetPermissionCheckPermission.blockExecuteWithoutPermission(this._localeService.t("sheets-filter-ui.permission.filterErr"));
+			}
+			if (command.id === OpenFilterPanelOperation.id) {
+				var _this$_sheetsFilterSe2;
+				const params = command.params;
+				const { unitId, subUnitId } = params;
+				const filterRange = (_this$_sheetsFilterSe2 = this._sheetsFilterService.getFilterModel(unitId, subUnitId)) === null || _this$_sheetsFilterSe2 === void 0 ? void 0 : _this$_sheetsFilterSe2.getRange();
+				const colRange = _univerjs_core.Tools.deepClone(filterRange);
+				if (colRange) {
+					colRange.startColumn = params.col;
+					colRange.endColumn = params.col;
+					if (!this._sheetPermissionCheckPermission.permissionCheckWithRanges({
+						rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint],
+						worksheetTypes: [_univerjs_sheets.WorksheetFilterPermission, _univerjs_sheets.WorksheetViewPermission]
+					}, [colRange], unitId, subUnitId)) this._sheetPermissionCheckPermission.blockExecuteWithoutPermission(this._localeService.t("sheets-filter-ui.permission.filterErr"));
+				}
+			}
+		}));
 	}
 };
-_defineProperty(UniverSheetsFilterMobileUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
-_defineProperty(UniverSheetsFilterMobileUIPlugin, "pluginName", "SHEET_FILTER_UI_PLUGIN");
-_defineProperty(UniverSheetsFilterMobileUIPlugin, "packageName", name);
-_defineProperty(UniverSheetsFilterMobileUIPlugin, "version", version);
-UniverSheetsFilterMobileUIPlugin = __decorate([
-	(0, _univerjs_core.DependentOn)(_univerjs_sheets_filter.UniverSheetsFilterPlugin),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(2, _univerjs_core.IConfigService)
-], UniverSheetsFilterMobileUIPlugin);
+SheetsFilterPermissionController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_sheets_filter.SheetsFilterService)),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(2, _univerjs_core.ICommandService),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetPermissionCheckController)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetsSelectionsService))
+], SheetsFilterPermissionController);
 
 //#endregion
-//#region src/menu/sheets-filter.menu.ts
-function SmartToggleFilterMenuItemFactory(accessor) {
-	const sheetsFilterService = accessor.get(_univerjs_sheets_filter.SheetsFilterService);
-	return {
-		id: _univerjs_sheets_filter.SmartToggleSheetsFilterCommand.id,
-		type: _univerjs_ui.MenuItemType.BUTTON_SELECTOR,
-		icon: "FilterIcon",
-		tooltip: "sheets-filter-ui.toolbar.smart-toggle-filter-tooltip",
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		activated$: sheetsFilterService.activeFilterModel$.pipe((0, rxjs.map)((model) => !!model)),
-		disabled$: (0, _univerjs_sheets_ui.getObservableWithExclusiveRange$)(accessor, (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
-			worksheetTypes: [_univerjs_sheets.WorksheetFilterPermission, _univerjs_sheets.WorksheetViewPermission],
-			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
-		}))
-	};
-}
-function ClearFilterCriteriaMenuItemFactory(accessor) {
-	const sheetsFilterService = accessor.get(_univerjs_sheets_filter.SheetsFilterService);
-	return {
-		id: _univerjs_sheets_filter.ClearSheetsFilterCriteriaCommand.id,
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		title: "sheets-filter-ui.toolbar.clear-filter-criteria",
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: sheetsFilterService.activeFilterModel$.pipe((0, rxjs.switchMap)((model) => {
-			var _model$hasCriteria$$p;
-			return (_model$hasCriteria$$p = model === null || model === void 0 ? void 0 : model.hasCriteria$.pipe((0, rxjs.map)((m) => !m))) !== null && _model$hasCriteria$$p !== void 0 ? _model$hasCriteria$$p : (0, rxjs.of)(true);
-		}))
-	};
-}
-function ReCalcFilterMenuItemFactory(accessor) {
-	const sheetsFilterService = accessor.get(_univerjs_sheets_filter.SheetsFilterService);
-	return {
-		id: _univerjs_sheets_filter.ReCalcSheetsFilterCommand.id,
-		type: _univerjs_ui.MenuItemType.BUTTON,
-		title: "sheets-filter-ui.toolbar.re-calc-filter-conditions",
-		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: sheetsFilterService.activeFilterModel$.pipe((0, rxjs.switchMap)((model) => {
-			var _model$hasCriteria$$p2;
-			return (_model$hasCriteria$$p2 = model === null || model === void 0 ? void 0 : model.hasCriteria$.pipe((0, rxjs.map)((m) => !m))) !== null && _model$hasCriteria$$p2 !== void 0 ? _model$hasCriteria$$p2 : (0, rxjs.of)(true);
-		}))
-	};
-}
+//#region src/views/widgets/drawings.ts
+const BUTTON_VIEWPORT = 16;
+const FILTER_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 FilterButton = class {
+	static drawNoCriteria(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 drawHasCriteria(ctx, size, fgColor, bgColor) {
+		ctx.save();
+		_univerjs_engine_render.Rect.drawWith(ctx, {
+			radius: 2,
+			width: BUTTON_VIEWPORT,
+			height: BUTTON_VIEWPORT,
+			fill: bgColor
+		});
+		ctx.scale(size / BUTTON_VIEWPORT, size / BUTTON_VIEWPORT);
+		ctx.fillStyle = fgColor;
+		ctx.fill(FILTER_BUTTON_EMPTY);
+		ctx.restore();
+	}
+};
 
 //#endregion
-//#region src/menu/schema.ts
-const menuSchema = { [_univerjs_ui.RibbonDataGroup.ORGANIZATION]: { [_univerjs_sheets_filter.SmartToggleSheetsFilterCommand.id]: {
-	order: 2,
-	menuItemFactory: SmartToggleFilterMenuItemFactory,
-	[_univerjs_sheets_filter.ClearSheetsFilterCriteriaCommand.id]: {
-		order: 0,
-		menuItemFactory: ClearFilterCriteriaMenuItemFactory
-	},
-	[_univerjs_sheets_filter.ReCalcSheetsFilterCommand.id]: {
-		order: 1,
-		menuItemFactory: ReCalcFilterMenuItemFactory
+//#region src/views/widgets/filter-button.shape.ts
+const FILTER_ICON_SIZE = 16;
+let SheetsFilterButtonShape = class SheetsFilterButtonShape 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 { hasCriteria } = this._filterParams;
+		const fgColor = this._themeService.getColorFromTheme("primary.600");
+		const bgColor = this._hovered ? this._themeService.getColorFromTheme("gray.50") : "rgba(255, 255, 255, 1.0)";
+		if (hasCriteria) FilterButton.drawHasCriteria(ctx, 16, fgColor, bgColor);
+		else FilterButton.drawNoCriteria(ctx, 16, fgColor, bgColor);
+		ctx.restore();
 	}
-} } };
+	onPointerDown(evt) {
+		if (evt.button === 2) return;
+		const { col, unitId, subUnitId } = this._filterParams;
+		if (this._contextService.getContextValue("FILTER_PANEL_OPENED") || !this._commandService.hasCommand(OpenFilterPanelOperation.id)) return;
+		setTimeout(() => {
+			this._commandService.executeCommand(OpenFilterPanelOperation.id, {
+				unitId,
+				subUnitId,
+				col
+			});
+		}, 200);
+	}
+	onPointerEnter() {
+		this._hovered = true;
+		this.makeDirty(true);
+	}
+	onPointerLeave() {
+		this._hovered = false;
+		this.makeDirty(true);
+	}
+};
+SheetsFilterButtonShape = __decorate([
+	__decorateParam(2, _univerjs_core.IContextService),
+	__decorateParam(3, _univerjs_core.ICommandService),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService))
+], SheetsFilterButtonShape);
 
 //#endregion
-//#region src/views/components/SheetsFilterByColorsPanel.tsx
-/**
-* Filter by colors.
-*/
-function FilterByColor(props) {
-	const { model } = props;
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const cellFillColors = (0, _univerjs_ui.useObservable)(model.cellFillColors$, [], true);
-	const cellTextColors = (0, _univerjs_ui.useObservable)(model.cellTextColors$, [], true);
-	const handleSelectCellFillColor = (0, react.useCallback)((color) => {
-		model.onFilterCheckToggled(color);
-	}, [model]);
-	const handleSelectCellTextColor = (0, react.useCallback)((color) => {
-		model.onFilterCheckToggled(color, false);
-	}, [model]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-u-comp": "sheets-filter-panel-colors-container",
-		className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "sheets-filter-panel",
-			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-h-[300px] univer-flex-grow univer-flex-col univer-gap-4 univer-overflow-auto univer-rounded-md univer-px-2 univer-py-2.5", _univerjs_design.borderClassName),
-			children: [
-				cellFillColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-mb-2 univer-text-sm univer-text-gray-900 dark:!univer-text-white",
-					children: localeService.t("sheets-filter-ui.panel.filter-by-cell-fill-color")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-grid univer-grid-cols-8 univer-items-center univer-justify-start univer-gap-2",
-					children: cellFillColors.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-relative univer-size-6",
-						onClick: () => handleSelectCellFillColor(color),
-						children: [!color.color ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.BanIcon, { className: "univer-size-6 univer-cursor-pointer univer-rounded-full hover:univer-ring-2 hover:univer-ring-offset-2 hover:univer-ring-offset-white" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: (0, _univerjs_design.clsx)("univer-box-border univer-size-6 univer-cursor-pointer univer-rounded-full univer-border univer-border-solid univer-border-transparent univer-bg-gray-300 univer-transition-shadow hover:univer-ring-2 hover:univer-ring-offset-2 hover:univer-ring-offset-white"),
-							style: { backgroundColor: color.color }
-						}), color.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})]
-					}, `sheets-filter-cell-fill-color-${index}`))
-				})] }),
-				cellTextColors.length > 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-mb-2 univer-text-sm univer-text-gray-900 dark:!univer-text-white",
-					children: localeService.t("sheets-filter-ui.panel.filter-by-cell-text-color")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-grid univer-grid-cols-8 univer-items-center univer-justify-start univer-gap-2",
-					children: cellTextColors.map((color, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-relative univer-size-6",
-						onClick: () => handleSelectCellTextColor(color),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "univer-box-border univer-flex univer-size-full univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-border univer-border-solid univer-border-[rgba(13,13,13,0.06)] univer-p-0.5 hover:univer-ring-2 hover:univer-ring-offset-2 hover:univer-ring-offset-white dark:!univer-border-[rgba(255,255,255,0.06)]",
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.AIcon, { style: { color: color.color } })
-						}), color.checked && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckedIcon, {})]
-					}, `sheets-filter-cell-text-color-${index}`))
-				})] }),
-				cellFillColors.length <= 1 && cellTextColors.length <= 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "univer-flex univer-size-full univer-items-center univer-justify-center univer-text-sm univer-text-gray-900 dark:!univer-text-gray-200",
-					children: localeService.t("sheets-filter-ui.panel.filter-by-color-none")
-				})
-			]
-		})
-	});
-}
-function CheckedIcon() {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: "univer-absolute -univer-bottom-0.5 -univer-right-0.5 univer-flex univer-size-3 univer-cursor-pointer univer-items-center univer-justify-center univer-rounded-full univer-bg-white",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.SuccessIcon, { className: "univer-size-full univer-font-bold univer-text-[#418F1F]" })
-	});
+//#region src/views/render-modules/sheets-filter.render-controller.ts
+const DEFAULT_Z_INDEX = 1e3;
+const SHEETS_FILTER_BUTTON_Z_INDEX = 5e3;
+function 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;
+	}
 }
-
-//#endregion
-//#region src/views/components/SheetsFilterByConditionsPanel.tsx
-/**
-* Filter by conditions.
-*/
-function FilterByCondition(props) {
-	var _formParams$val, _formParams$val2;
-	const { model } = props;
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const condition = (0, _univerjs_ui.useObservable)(model.conditionItem$, void 0);
-	const formParams = (0, _univerjs_ui.useObservable)(model.filterConditionFormParams$, void 0);
-	const radioValue = (formParams === null || formParams === void 0 ? void 0 : formParams.and) ? "AND" : "OR";
-	const onRadioChange = (0, react.useCallback)((key) => {
-		model.onConditionFormChange({ and: key === "AND" });
-	}, [model]);
-	const primaryOptions = usePrimaryOptions(localeService);
-	const onPrimaryConditionChange = (0, react.useCallback)((value) => {
-		model.onPrimaryConditionChange(value);
-	}, [model]);
-	const secondaryOptions = useSecondaryOptions(localeService);
-	const onFormParamsChange = (0, react.useCallback)((diffParams) => {
-		model.onConditionFormChange(diffParams);
-	}, [model]);
-	const placeholder = localeService.t("sheets-filter-ui.panel.input-values-placeholder");
-	function renderSecondaryCondition(operator, val, name) {
-		const shouldRenderInput = FilterConditionItems.getItemByOperator(operator).numOfParameters === 1;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-			name === "operator2" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_univerjs_design.RadioGroup, {
-				value: radioValue,
-				onChange: onRadioChange,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-					value: "AND",
-					children: localeService.t("sheets-filter-ui.panel.and")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Radio, {
-					value: "OR",
-					children: localeService.t("sheets-filter-ui.panel.or")
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
-				value: operator,
-				options: secondaryOptions,
-				onChange: (operator) => onFormParamsChange({ [name]: operator })
-			}),
-			shouldRenderInput && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
-				className: "univer-mt-2",
-				value: val,
-				placeholder,
-				onChange: (value) => onFormParamsChange({ [name === "operator1" ? "val1" : "val2"]: value })
-			}) })
-		] });
+let SheetsFilterRenderController = class SheetsFilterRenderController extends _univerjs_core.RxDisposable {
+	constructor(_context, _injector, _sheetSkeletonManagerService, _sheetsFilterService, _themeService, _sheetInterceptorService, _commandService, _selectionRenderService) {
+		super();
+		this._context = _context;
+		this._injector = _injector;
+		this._sheetSkeletonManagerService = _sheetSkeletonManagerService;
+		this._sheetsFilterService = _sheetsFilterService;
+		this._themeService = _themeService;
+		this._sheetInterceptorService = _sheetInterceptorService;
+		this._commandService = _commandService;
+		this._selectionRenderService = _selectionRenderService;
+		_defineProperty(this, "_currentRenderParams", null);
+		_defineProperty(this, "_filterRangeShape", null);
+		_defineProperty(this, "_buttonRenderDisposable", null);
+		_defineProperty(this, "_filterButtonShapes", []);
+		this._initRenderer();
+	}
+	dispose() {
+		super.dispose();
+		this._disposeRendering();
+	}
+	_initRenderer() {
+		this.disposeWithMe(this._themeService.currentTheme$.subscribe(() => {
+			this._refreshRendering(this._currentRenderParams);
+		}));
+		this._sheetSkeletonManagerService.currentSkeleton$.pipe((0, rxjs.switchMap)((skeletonParams) => {
+			var _workbook$getActiveSh, _this$_sheetsFilterSe;
+			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 filterModel = (_this$_sheetsFilterSe = this._sheetsFilterService.getFilterModel(unitId, worksheetId)) !== null && _this$_sheetsFilterSe !== void 0 ? _this$_sheetsFilterSe : void 0;
+			const getParams = () => ({
+				unitId,
+				worksheetId,
+				filterModel,
+				range: filterModel === null || filterModel === void 0 ? void 0 : filterModel.getRange(),
+				skeleton: skeletonParams.skeleton
+			});
+			return (0, _univerjs_core.fromCallback)(this._commandService.onCommandExecuted.bind(this._commandService)).pipe((0, rxjs.filter)(([command]) => {
+				var _command$params;
+				return command.type === _univerjs_core.CommandType.MUTATION && ((_command$params = command.params) === null || _command$params === void 0 ? void 0 : _command$params.unitId) === workbook.getUnitId() && (_univerjs_sheets_filter.FILTER_MUTATIONS.has(command.id) || command.id === _univerjs_sheets.SetRangeValuesMutation.id);
+			}), (0, rxjs.throttleTime)(20, void 0, {
+				leading: false,
+				trailing: true
+			}), (0, rxjs.map)(getParams), (0, rxjs.startWith)(getParams()));
+		}), (0, rxjs.takeUntil)(this.dispose$)).subscribe((renderParams) => {
+			this._currentRenderParams = renderParams;
+			this._refreshRendering(renderParams);
+		});
+	}
+	_refreshRendering(renderParams) {
+		this._disposeRendering();
+		if (!renderParams || !renderParams.range) return;
+		this._renderRange(renderParams.range, renderParams.skeleton);
+		this._renderButtons(renderParams);
+	}
+	_renderRange(range, skeleton) {
+		const { scene } = this._context;
+		const { rowHeaderWidth, columnHeaderHeight } = skeleton;
+		const filterRangeShape = this._filterRangeShape = new _univerjs_sheets_ui.SelectionControl(scene, DEFAULT_Z_INDEX, this._themeService, {
+			rowHeaderWidth,
+			columnHeaderHeight,
+			enableAutoFill: false,
+			highlightHeader: false
+		});
+		const selectionWithCoord = (0, _univerjs_sheets.attachSelectionWithCoord)({
+			range,
+			primary: null,
+			style: { fill: "rgba(0, 0, 0, 0.0)" }
+		}, skeleton);
+		filterRangeShape.updateRangeBySelectionWithCoord(selectionWithCoord);
+		filterRangeShape.setEvent(false);
+		scene.makeDirty(true);
+	}
+	_renderButtons(params) {
+		const { range, filterModel, unitId, skeleton, worksheetId } = params;
+		const { unit: workbook, scene } = this._context;
+		const worksheet = workbook.getSheetBySheetId(worksheetId);
+		if (!worksheet) return;
+		this._interceptCellContent(unitId, worksheetId, params.range);
+		const { startColumn, endColumn, startRow } = range;
+		for (let col = startColumn; col <= endColumn; col++) {
+			const key = `sheets-filter-button-${col}`;
+			const startPosition = (0, _univerjs_sheets_ui.getCoordByCell)(startRow, col, scene, skeleton);
+			const cellStyle = worksheet.getComposedCellStyle(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 hasCriteria = !!filterModel.getFilterColumn(col);
+			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,
+					col,
+					hasCriteria
+				}
+			};
+			const buttonShape = this._injector.createInstance(SheetsFilterButtonShape, key, props);
+			this._filterButtonShapes.push(buttonShape);
+		}
+		scene.addObjects(this._filterButtonShapes);
+		scene.makeDirty();
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		"data-u-comp": "sheets-filter-panel-conditions-container",
-		className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
-		children: condition && formParams && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Select, {
-			value: condition.operator,
-			options: primaryOptions,
-			onChange: onPrimaryConditionChange
-		}), FilterConditionItems.getItemByOperator(condition.operator).numOfParameters !== 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "sheets-filter-panel-conditions-container-inner",
-			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-flex-grow univer-overflow-hidden univer-rounded-md univer-p-2", _univerjs_design.borderClassName),
-			children: [
-				condition.numOfParameters >= 1 && renderSecondaryCondition(formParams.operator1, (_formParams$val = formParams.val1) !== null && _formParams$val !== void 0 ? _formParams$val : "", "operator1"),
-				condition.numOfParameters >= 2 && renderSecondaryCondition(formParams.operator2, (_formParams$val2 = formParams.val2) !== null && _formParams$val2 !== void 0 ? _formParams$val2 : "", "operator2"),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					"data-u-comp": "sheets-filter-panel-conditions-desc",
-					className: "univer-mt-2 univer-text-xs univer-text-gray-500",
-					children: [
-						localeService.t("sheets-filter-ui.panel.?"),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
-						localeService.t("sheets-filter-ui.panel.*")
-					]
-				})
-			]
-		}) : null] })
-	});
-}
-function usePrimaryOptions(localeService) {
-	return (0, react.useMemo)(() => [
-		{ options: [{
-			label: localeService.t(FilterConditionItems.NONE.label),
-			value: FilterConditionItems.NONE.operator
-		}] },
-		{ options: [{
-			label: localeService.t(FilterConditionItems.EMPTY.label),
-			value: FilterConditionItems.EMPTY.operator
-		}, {
-			label: localeService.t(FilterConditionItems.NOT_EMPTY.label),
-			value: FilterConditionItems.NOT_EMPTY.operator
-		}] },
-		{ options: [
-			{
-				label: localeService.t(FilterConditionItems.TEXT_CONTAINS.label),
-				value: FilterConditionItems.TEXT_CONTAINS.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.DOES_NOT_CONTAIN.label),
-				value: FilterConditionItems.DOES_NOT_CONTAIN.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.STARTS_WITH.label),
-				value: FilterConditionItems.STARTS_WITH.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.ENDS_WITH.label),
-				value: FilterConditionItems.ENDS_WITH.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.EQUALS.label),
-				value: FilterConditionItems.EQUALS.operator
-			}
-		] },
-		{ options: [
-			{
-				label: localeService.t(FilterConditionItems.GREATER_THAN.label),
-				value: FilterConditionItems.GREATER_THAN.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.GREATER_THAN_OR_EQUAL.label),
-				value: FilterConditionItems.GREATER_THAN_OR_EQUAL.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.LESS_THAN.label),
-				value: FilterConditionItems.LESS_THAN.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.LESS_THAN_OR_EQUAL.label),
-				value: FilterConditionItems.LESS_THAN_OR_EQUAL.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.EQUAL.label),
-				value: FilterConditionItems.EQUAL.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.NOT_EQUAL.label),
-				value: FilterConditionItems.NOT_EQUAL.operator
-			},
-			{
-				label: localeService.t(FilterConditionItems.BETWEEN.label),
-				value: FilterConditionItems.BETWEEN.operator
+	_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);
 			},
-			{
-				label: localeService.t(FilterConditionItems.NOT_BETWEEN.label),
-				value: FilterConditionItems.NOT_BETWEEN.operator
-			}
-		] },
-		{ options: [{
-			label: localeService.t(FilterConditionItems.CUSTOM.label),
-			value: FilterConditionItems.CUSTOM.operator
-		}] }
-	], [localeService.getCurrentLocale(), localeService]);
-}
-function useSecondaryOptions(localeService) {
-	return (0, react.useMemo)(() => FilterConditionItems.ALL_CONDITIONS.filter((c) => c.numOfParameters !== 2).map((c) => ({
-		label: localeService.t(c.label),
-		value: c.operator
-	})), [localeService.getCurrentLocale(), localeService]);
-}
-
-//#endregion
-//#region src/views/components/SheetsFilterByValuesPanel.tsx
-/**
-* Filter by values.
-*/
-function FilterByValue(props) {
-	const { model } = props;
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const searchText = (0, _univerjs_ui.useObservable)(model.searchString$, "", true);
-	const items = (0, _univerjs_ui.useObservable)(model.filterItems$, void 0, true);
-	const filterOnly = localeService.t("sheets-filter-ui.panel.filter-only");
-	const stat = statisticFilterByValueItems(items);
-	const allChecked = stat.checked > 0 && stat.unchecked === 0;
-	const indeterminate = stat.checked > 0 && stat.unchecked > 0;
-	const treeMap = model.treeMapCache;
-	const onCheckAllToggled = (0, react.useCallback)(() => {
-		model.onCheckAllToggled(!allChecked);
-	}, [model, allChecked]);
-	const onSearchValueChange = (0, react.useCallback)((str) => {
-		model.setSearchString(str);
-	}, [model]);
-	function extractCheckedKeys(items) {
-		let checkedKeys = [];
-		items.forEach((item) => {
-			if (item.checked) checkedKeys.push(item.key);
-			if (item.children) checkedKeys = checkedKeys.concat(extractCheckedKeys(item.children));
+			priority: 10
 		});
-		return checkedKeys;
 	}
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-u-comp": "sheets-filter-panel-values-container",
-		className: "univer-flex univer-h-full univer-min-h-[300px] univer-flex-col",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
-			autoFocus: true,
-			value: searchText,
-			placeholder: localeService.t("sheets-filter-ui.panel.search-placeholder"),
-			onChange: onSearchValueChange
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			"data-u-comp": "sheets-filter-panel",
-			className: (0, _univerjs_design.clsx)("univer-mt-2 univer-box-border univer-flex univer-flex-grow univer-flex-col univer-overflow-hidden univer-rounded-md univer-px-2 univer-py-2.5", _univerjs_design.borderClassName),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-u-comp": "sheets-filter-panel-values-item",
-				className: "univer-box-border univer-h-8 univer-w-full univer-py-0.5",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					"data-u-comp": "sheets-filter-panel-values-item-inner",
-					className: "univer-box-border univer-flex univer-h-7 univer-items-center univer-rounded-md univer-py-0 univer-pl-5 univer-pr-0.5 univer-text-sm",
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Checkbox, {
-							indeterminate,
-							disabled: items.length === 0,
-							checked: allChecked,
-							onChange: onCheckAllToggled
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							"data-u-comp": "sheets-filter-panel-values-item-text",
-							className: "univer-mx-1 univer-inline-block univer-flex-shrink univer-truncate univer-text-gray-900 dark:!univer-text-white",
-							children: `${localeService.t("sheets-filter-ui.panel.select-all")}`
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							"data-u-comp": "sheets-filter-panel-values-item-count",
-							className: "univer-text-gray-400 dark:!univer-text-gray-500",
-							children: `(${stat.checked}/${stat.checked + stat.unchecked})`
-						})
-					]
-				})
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-u-comp": "sheets-filter-panel-values-virtual",
-				className: "univer-flex-grow",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tree, {
-					data: items,
-					defaultExpandAll: false,
-					valueGroup: extractCheckedKeys(items),
-					onChange: (node) => {
-						model.onFilterCheckToggled(node);
-					},
-					defaultCache: treeMap,
-					itemHeight: 28,
-					treeNodeClassName: `
-                          univer-pr-2 univer-border-box univer-rounded-md
-                          [&:hover_a]:univer-inline-block
-                          hover:univer-bg-gray-50 univer-h-full
-                          univer-text-gray-900 dark:hover:!univer-bg-gray-900
-                          dark:!univer-text-white
-                        `,
-					attachRender: (item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "univer-ml-1 univer-flex univer-h-5 univer-flex-1 univer-cursor-pointer univer-items-center univer-justify-between univer-text-sm univer-text-primary-500",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							"data-u-comp": "sheets-filter-panel-values-item-count",
-							className: "univer-text-gray-400 dark:!univer-text-gray-500",
-							children: `(${item.count})`
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							className: "univer-box-border univer-hidden univer-h-4 univer-whitespace-nowrap univer-px-1.5",
-							onClick: () => {
-								const filterValues = [];
-								if (item.children) item.children.forEach((child) => {
-									if (child.children) child.children.forEach((subChild) => {
-										filterValues.push(subChild.key);
-									});
-									else filterValues.push(child.key);
-								});
-								else filterValues.push(item.key);
-								model.onFilterOnly(filterValues);
-							},
-							children: filterOnly
-						})]
-					})
-				})
-			})]
-		})]
-	});
-}
+	_disposeRendering() {
+		var _this$_filterRangeSha, _this$_buttonRenderDi;
+		(_this$_filterRangeSha = this._filterRangeShape) === null || _this$_filterRangeSha === void 0 || _this$_filterRangeSha.dispose();
+		this._filterButtonShapes.forEach((s) => s.dispose());
+		(_this$_buttonRenderDi = this._buttonRenderDisposable) === null || _this$_buttonRenderDi === void 0 || _this$_buttonRenderDi.dispose();
+		this._filterRangeShape = null;
+		this._buttonRenderDisposable = null;
+		this._filterButtonShapes = [];
+	}
+};
+SheetsFilterRenderController = __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_filter.SheetsFilterService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.ThemeService)),
+	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_sheets.SheetInterceptorService)),
+	__decorateParam(6, _univerjs_core.ICommandService),
+	__decorateParam(7, _univerjs_sheets_ui.ISheetSelectionRenderService)
+], SheetsFilterRenderController);
 
 //#endregion
-//#region src/views/components/SheetsFilterSyncSwitch.tsx
-/**
-* 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.
-*/
-function FilterSyncSwitch() {
-	const sheetsFilterSyncController = (0, _univerjs_ui.useDependency)(_univerjs_sheets_filter.SheetsFilterSyncController);
-	if (!(0, _univerjs_ui.useObservable)(sheetsFilterSyncController.visible$, void 0, true)) return null;
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const messageService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IMessageService);
-	const enabled = (0, _univerjs_ui.useObservable)(sheetsFilterSyncController.enabled$, void 0, true);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "univer-mt-2 univer-flex univer-items-center univer-justify-between univer-text-sm univer-text-gray-900 dark:!univer-text-gray-200",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "univer-flex univer-items-center univer-gap-1",
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: localeService.t("sheets-filter-ui.sync.title") }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Tooltip, {
-				title: enabled ? localeService.t("sheets-filter-ui.sync.statusTips.off") : localeService.t("sheets-filter-ui.sync.statusTips.on"),
-				asChild: true,
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.InfoIcon, { className: "univer-block" })
-			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Switch, {
-			defaultChecked: enabled,
-			onChange: (checked) => {
-				const message = checked ? localeService.t("sheets-filter-ui.sync.switchTips.on") : localeService.t("sheets-filter-ui.sync.switchTips.off");
-				sheetsFilterSyncController.setEnabled(checked);
-				messageService.show({
-					content: message,
-					type: _univerjs_design.MessageType.Success,
-					duration: 2e3
-				});
-			}
-		})]
-	});
-}
+//#region src/controllers/ui-mobile.controller.ts
+let SheetsFilterUIMobileController = class SheetsFilterUIMobileController extends _univerjs_core.RxDisposable {
+	constructor(_renderManagerService, _sheetsRenderService) {
+		super();
+		this._renderManagerService = _renderManagerService;
+		this._sheetsRenderService = _sheetsRenderService;
+		[
+			_univerjs_sheets_filter.SetSheetsFilterRangeMutation,
+			_univerjs_sheets_filter.SetSheetsFilterCriteriaMutation,
+			_univerjs_sheets_filter.RemoveSheetsFilterMutation,
+			_univerjs_sheets_filter.ReCalcSheetsFilterMutation
+		].forEach((m) => this.disposeWithMe(this._sheetsRenderService.registerSkeletonChangingMutations(m.id)));
+		this.disposeWithMe(this._renderManagerService.registerRenderModule(_univerjs_core.UniverInstanceType.UNIVER_SHEET, [SheetsFilterRenderController]));
+	}
+};
+SheetsFilterUIMobileController = __decorate([__decorateParam(0, _univerjs_engine_render.IRenderManagerService), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetsRenderService))], SheetsFilterUIMobileController);
 
 //#endregion
-//#region src/views/components/SheetsFilterPanel.tsx
-/**
-* This Filter Panel component is used to filter the data in the sheet.
-*
-* @returns React element
-*/
-function FilterPanel() {
-	var _filterService$active;
-	const sheetsFilterPanelService = (0, _univerjs_ui.useDependency)(SheetsFilterPanelService);
-	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
-	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
-	const filterBy = (0, _univerjs_ui.useObservable)(sheetsFilterPanelService.filterBy$, void 0, true);
-	const filterByModel = (0, _univerjs_ui.useObservable)(sheetsFilterPanelService.filterByModel$, void 0, false);
-	const canApply = (0, _univerjs_ui.useObservable)(() => (filterByModel === null || filterByModel === void 0 ? void 0 : filterByModel.canApply$) || (0, rxjs.of)(false), void 0, false, [filterByModel]);
-	const items = useFilterByOptions(localeService);
-	const clearFilterDisabled = !(0, _univerjs_ui.useObservable)(sheetsFilterPanelService.hasCriteria$);
-	const onFilterByTypeChange = (0, react.useCallback)((value) => {
-		commandService.executeCommand(ChangeFilterByOperation.id, { filterBy: value });
-	}, [commandService]);
-	const onClearCriteria = (0, react.useCallback)(async () => {
-		await (filterByModel === null || filterByModel === void 0 ? void 0 : filterByModel.clear());
-		commandService.executeCommand(CloseFilterPanelOperation.id);
-	}, [filterByModel, commandService]);
-	const onCancel = (0, react.useCallback)(() => {
-		commandService.executeCommand(CloseFilterPanelOperation.id);
-	}, [commandService]);
-	const onApply = (0, react.useCallback)(async () => {
-		await (filterByModel === null || filterByModel === void 0 ? void 0 : filterByModel.apply());
-		commandService.executeCommand(CloseFilterPanelOperation.id);
-	}, [filterByModel, commandService]);
-	const range = (_filterService$active = (0, _univerjs_ui.useDependency)(_univerjs_sheets_filter.SheetsFilterService).activeFilterModel) === null || _filterService$active === void 0 ? void 0 : _filterService$active.getRange();
-	const colIndex = sheetsFilterPanelService.col;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		"data-u-comp": "sheets-filter-panel",
-		className: "univer-box-border univer-flex univer-max-h-[500px] univer-w-[400px] univer-flex-col univer-rounded-lg univer-bg-white univer-p-4 univer-shadow-lg dark:!univer-border-gray-600 dark:!univer-bg-gray-700",
-		children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_ui.ComponentContainer, {
-				components: (0, _univerjs_ui.useComponentsOfPart)(_univerjs_sheets_ui.SheetsUIPart.FILTER_PANEL_EMBED_POINT),
-				sharedProps: {
-					range,
-					colIndex,
-					onClose: onCancel
-				}
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "univer-mb-1 univer-flex-shrink-0 univer-flex-grow-0",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Segmented, {
-					value: filterBy,
-					items,
-					onChange: (value) => onFilterByTypeChange(value)
-				})
-			}),
-			filterByModel ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-u-comp": "sheets-filter-panel-content",
-				className: "univer-flex-shrink univer-flex-grow univer-pt-2",
-				children: filterBy === _univerjs_sheets_filter.FilterBy.VALUES ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterByValue, { model: filterByModel }) : filterBy === _univerjs_sheets_filter.FilterBy.COLORS ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterByColor, { model: filterByModel }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterByCondition, { model: filterByModel })
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "univer-flex-1" }),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FilterSyncSwitch, {}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-u-comp": "sheets-filter-panel-footer",
-				className: "univer-mt-4 univer-inline-flex univer-flex-shrink-0 univer-flex-grow-0 univer-flex-nowrap univer-justify-between univer-overflow-hidden",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-					variant: "link",
-					onClick: onClearCriteria,
-					disabled: clearFilterDisabled,
-					children: localeService.t("sheets-filter-ui.panel.clear-filter")
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-					className: "univer-flex univer-gap-2",
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-						variant: "default",
-						onClick: onCancel,
-						children: localeService.t("sheets-filter-ui.panel.cancel")
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Button, {
-						disabled: !canApply,
-						variant: "primary",
-						onClick: onApply,
-						children: localeService.t("sheets-filter-ui.panel.confirm")
-					})]
-				})]
-			})
-		]
-	});
+//#region src/mobile-plugin.ts
+let UniverSheetsFilterMobileUIPlugin = class UniverSheetsFilterMobileUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._configService = _configService;
+		const { menu, ...rest } = (0, _univerjs_core.merge)({}, defaultPluginConfig, this._config);
+		if (menu) this._configService.setConfig("menu", menu, { merge: true });
+		this._configService.setConfig(SHEETS_FILTER_UI_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
+		[[SheetsFilterPermissionController], [SheetsFilterUIMobileController]].forEach((d) => this._injector.add(d));
+	}
+	onReady() {
+		this._injector.get(SheetsFilterPermissionController);
+	}
+	onRendered() {
+		this._injector.get(SheetsFilterUIMobileController);
+	}
+};
+_defineProperty(UniverSheetsFilterMobileUIPlugin, "type", _univerjs_core.UniverInstanceType.UNIVER_SHEET);
+_defineProperty(UniverSheetsFilterMobileUIPlugin, "pluginName", "SHEET_FILTER_UI_PLUGIN");
+_defineProperty(UniverSheetsFilterMobileUIPlugin, "packageName", name);
+_defineProperty(UniverSheetsFilterMobileUIPlugin, "version", version);
+UniverSheetsFilterMobileUIPlugin = __decorate([
+	(0, _univerjs_core.DependentOn)(_univerjs_sheets_filter.UniverSheetsFilterPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_core.IConfigService)
+], UniverSheetsFilterMobileUIPlugin);
+
+//#endregion
+//#region src/menu/sheets-filter.menu.ts
+function SmartToggleFilterMenuItemFactory(accessor) {
+	const sheetsFilterService = accessor.get(_univerjs_sheets_filter.SheetsFilterService);
+	return {
+		id: _univerjs_sheets_filter.SmartToggleSheetsFilterCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON_SELECTOR,
+		icon: "FilterIcon",
+		tooltip: "sheets-filter-ui.toolbar.smart-toggle-filter-tooltip",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		activated$: sheetsFilterService.activeFilterModel$.pipe((0, rxjs.map)((model) => !!model)),
+		disabled$: (0, _univerjs_sheets_ui.getObservableWithExclusiveRange$)(accessor, (0, _univerjs_sheets_ui.getCurrentRangeDisable$)(accessor, {
+			worksheetTypes: [_univerjs_sheets.WorksheetFilterPermission, _univerjs_sheets.WorksheetViewPermission],
+			rangeTypes: [_univerjs_sheets.RangeProtectionPermissionViewPoint]
+		}))
+	};
 }
-function useFilterByOptions(localeService) {
-	return (0, react.useMemo)(() => [
-		{
-			label: localeService.t("sheets-filter-ui.panel.by-values"),
-			value: _univerjs_sheets_filter.FilterBy.VALUES
-		},
-		{
-			label: localeService.t("sheets-filter-ui.panel.by-colors"),
-			value: _univerjs_sheets_filter.FilterBy.COLORS
-		},
-		{
-			label: localeService.t("sheets-filter-ui.panel.by-conditions"),
-			value: _univerjs_sheets_filter.FilterBy.CONDITIONS
-		}
-	], [localeService.getCurrentLocale(), localeService]);
+function ClearFilterCriteriaMenuItemFactory(accessor) {
+	const sheetsFilterService = accessor.get(_univerjs_sheets_filter.SheetsFilterService);
+	return {
+		id: _univerjs_sheets_filter.ClearSheetsFilterCriteriaCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		title: "sheets-filter-ui.toolbar.clear-filter-criteria",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: sheetsFilterService.activeFilterModel$.pipe((0, rxjs.switchMap)((model) => {
+			var _model$hasCriteria$$p;
+			return (_model$hasCriteria$$p = model === null || model === void 0 ? void 0 : model.hasCriteria$.pipe((0, rxjs.map)((m) => !m))) !== null && _model$hasCriteria$$p !== void 0 ? _model$hasCriteria$$p : (0, rxjs.of)(true);
+		}))
+	};
+}
+function ReCalcFilterMenuItemFactory(accessor) {
+	const sheetsFilterService = accessor.get(_univerjs_sheets_filter.SheetsFilterService);
+	return {
+		id: _univerjs_sheets_filter.ReCalcSheetsFilterCommand.id,
+		type: _univerjs_ui.MenuItemType.BUTTON,
+		title: "sheets-filter-ui.toolbar.re-calc-filter-conditions",
+		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
+		disabled$: sheetsFilterService.activeFilterModel$.pipe((0, rxjs.switchMap)((model) => {
+			var _model$hasCriteria$$p2;
+			return (_model$hasCriteria$$p2 = model === null || model === void 0 ? void 0 : model.hasCriteria$.pipe((0, rxjs.map)((m) => !m))) !== null && _model$hasCriteria$$p2 !== void 0 ? _model$hasCriteria$$p2 : (0, rxjs.of)(true);
+		}))
+	};
 }
 
+//#endregion
+//#region src/menu/schema.ts
+const menuSchema = { [_univerjs_ui.RibbonDataGroup.ORGANIZATION]: { [_univerjs_sheets_filter.SmartToggleSheetsFilterCommand.id]: {
+	order: 2,
+	menuItemFactory: SmartToggleFilterMenuItemFactory,
+	[_univerjs_sheets_filter.ClearSheetsFilterCriteriaCommand.id]: {
+		order: 0,
+		menuItemFactory: ClearFilterCriteriaMenuItemFactory
+	},
+	[_univerjs_sheets_filter.ReCalcSheetsFilterCommand.id]: {
+		order: 1,
+		menuItemFactory: ReCalcFilterMenuItemFactory
+	}
+} } };
+
 //#endregion
 //#region src/controllers/sheets-filter.shortcut.ts
 const SmartToggleFilterShortcut = {
@@ -2482,13 +2506,11 @@ const SmartToggleFilterShortcut = {
 };
 
 //#endregion
-//#region src/controllers/sheets-filter-ui-desktop.controller.ts
-const FILTER_PANEL_POPUP_KEY = "FILTER_PANEL_POPUP";
+//#region src/controllers/ui.controller.ts
 let SheetsFilterUIDesktopController = class SheetsFilterUIDesktopController extends SheetsFilterUIMobileController {
-	constructor(_injector, _componentManager, _sheetsFilterPanelService, _sheetCanvasPopupService, _sheetsFilterService, _localeService, _shortcutService, _commandService, _menuManagerService, _contextService, _messageService, sheetsRenderService, renderManagerService) {
+	constructor(_injector, _sheetsFilterPanelService, _sheetCanvasPopupService, _sheetsFilterService, _localeService, _shortcutService, _commandService, _menuManagerService, _contextService, _messageService, sheetsRenderService, renderManagerService) {
 		super(renderManagerService, sheetsRenderService);
 		this._injector = _injector;
-		this._componentManager = _componentManager;
 		this._sheetsFilterPanelService = _sheetsFilterPanelService;
 		this._sheetCanvasPopupService = _sheetCanvasPopupService;
 		this._sheetsFilterService = _sheetsFilterService;
@@ -2527,9 +2549,6 @@ let SheetsFilterUIDesktopController = class SheetsFilterUIDesktopController exte
 		this._menuManagerService.mergeMenu(menuSchema);
 	}
 	_initUI() {
-		[[FILTER_PANEL_POPUP_KEY, FilterPanel], ["FilterIcon", _univerjs_icons.FilterIcon]].forEach(([key, comp]) => {
-			this.disposeWithMe(this._componentManager.register(key, comp));
-		});
 		this.disposeWithMe(this._contextService.subscribeContextValue$(FILTER_PANEL_OPENED_KEY).pipe((0, rxjs.distinctUntilChanged)()).subscribe((open) => {
 			if (open) this._openFilterPopup();
 			else this._closeFilterPopup();
@@ -2562,18 +2581,17 @@ let SheetsFilterUIDesktopController = class SheetsFilterUIDesktopController exte
 };
 SheetsFilterUIDesktopController = __decorate([
 	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
-	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)),
-	__decorateParam(2, (0, _univerjs_core.Inject)(SheetsFilterPanelService)),
-	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService)),
-	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_sheets_filter.SheetsFilterService)),
-	__decorateParam(5, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
-	__decorateParam(6, _univerjs_ui.IShortcutService),
-	__decorateParam(7, _univerjs_core.ICommandService),
-	__decorateParam(8, _univerjs_ui.IMenuManagerService),
-	__decorateParam(9, _univerjs_core.IContextService),
-	__decorateParam(10, _univerjs_ui.IMessageService),
-	__decorateParam(11, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetsRenderService)),
-	__decorateParam(12, _univerjs_engine_render.IRenderManagerService)
+	__decorateParam(1, (0, _univerjs_core.Inject)(SheetsFilterPanelService)),
+	__decorateParam(2, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetCanvasPopManagerService)),
+	__decorateParam(3, (0, _univerjs_core.Inject)(_univerjs_sheets_filter.SheetsFilterService)),
+	__decorateParam(4, (0, _univerjs_core.Inject)(_univerjs_core.LocaleService)),
+	__decorateParam(5, _univerjs_ui.IShortcutService),
+	__decorateParam(6, _univerjs_core.ICommandService),
+	__decorateParam(7, _univerjs_ui.IMenuManagerService),
+	__decorateParam(8, _univerjs_core.IContextService),
+	__decorateParam(9, _univerjs_ui.IMessageService),
+	__decorateParam(10, (0, _univerjs_core.Inject)(_univerjs_sheets_ui.SheetsRenderService)),
+	__decorateParam(11, _univerjs_engine_render.IRenderManagerService)
 ], SheetsFilterUIDesktopController);
 
 //#endregion
@@ -2590,6 +2608,8 @@ let UniverSheetsFilterUIPlugin = class UniverSheetsFilterUIPlugin extends _unive
 		this._configService.setConfig(SHEETS_FILTER_UI_PLUGIN_CONFIG_KEY, rest);
 	}
 	onStarting() {
+		this._injector.add([ComponentsController]);
+		this._injector.get(ComponentsController);
 		(0, _univerjs_core.registerDependencies)(this._injector, [
 			[SheetsFilterPanelService],
 			[SheetsFilterPermissionController],