@univerjs/find-replace 1.0.0-insiders.20260813-7c9aa50 → 1.0.0

package/lib/index.js

@@ -1,11 +1,11 @@
-import { CommandType, Disposable, DisposableCollection, EDITOR_ACTIVATED, FOCUSING_SHEET, ICommandService, IConfigService, IConfirmService, IContextService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, RxDisposable, UniverInstanceType, createIdentifier, merge, toDisposable } from "@univerjs/core";
-import { Button, Checkbox, FormDualColumnLayout, FormLayout, Input, MessageType, Pager, Select } from "@univerjs/design";
-import { ComponentManager, IDialogService, ILayoutService, IMenuManagerService, IMessageService, IShortcutService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonDataGroup, getMenuHiddenObservable, useDebounceFn, useDependency, useObservable } from "@univerjs/ui";
+import { CommandType, DependentOn, Disposable, DisposableCollection, EDITOR_ACTIVATED, FOCUSING_SHEET, ICommandService, IConfigService, IConfirmService, IContextService, IUniverInstanceService, Inject, Injector, LocaleService, Plugin, RxDisposable, UniverInstanceType, createIdentifier, merge, toDisposable } from "@univerjs/core";
+import { Button, Checkbox, FormDualColumnLayout, FormLayout, Input, MessageType, MobileSelect, Pager, Select, clsx, resetButtonClassName, useMobileKeyboardViewportLayout } from "@univerjs/design";
+import { BuiltInUIPart, ComponentManager, IDialogService, ILayoutService, IMenuManagerService, IMessageService, IShortcutService, IUIPartsService, IconManager, KeyCode, MenuItemType, MetaKeys, RibbonDataGroup, UniverMobileUIPlugin, connectInjector, getMenuHiddenObservable, useDebounceFn, useDependency, useObservable } from "@univerjs/ui";
 import { RENDER_RAW_FORMULA_KEY } from "@univerjs/engine-render";
-import { BehaviorSubject, Subject, combineLatest, debounceTime, fromEvent, map, takeUntil, throttleTime } from "rxjs";
-import { SearchIcon } from "@univerjs/icons";
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { BehaviorSubject, Subject, combineLatest, debounceTime, fromEvent, map, startWith, takeUntil, throttleTime } from "rxjs";
+import { ArrowDownIcon, ArrowUpIcon, CloseIcon, ConfigureTabIcon, SearchIcon } from "@univerjs/icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 
 //#region src/services/context-keys.ts
 /**
@@ -36,7 +36,7 @@ const FIND_REPLACE_REPLACE_REVEALED = "FIND_REPLACE_REPLACE_REVEALED";
 const FIND_REPLACE_AVAILABLE = "FIND_REPLACE_AVAILABLE";
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/typeof.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -47,7 +47,7 @@ function _typeof(o) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPrimitive.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -60,14 +60,14 @@ function toPrimitive(t, r) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.149.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.140.0/helpers/esm/defineProperty.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -78,7 +78,7 @@ function _defineProperty(e, r, t) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorateParam.js
+//#region \0@oxc-project+runtime@0.149.0/helpers/esm/decorateParam.js
 function __decorateParam(paramIndex, decorator) {
 	return function(target, key) {
 		decorator(target, key, paramIndex);
@@ -86,7 +86,7 @@ function __decorateParam(paramIndex, decorator) {
 }
 
 //#endregion
-//#region \0@oxc-project+runtime@0.140.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.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);
@@ -649,6 +649,13 @@ let FindReplaceService = class FindReplaceService extends Disposable {
 		});
 		this._toggleRevealReplace(true);
 	}
+	hideReplace() {
+		this._state.changeState({
+			replaceRevealed: false,
+			findString: this._state.inputtingFindString
+		});
+		this._toggleRevealReplace(false);
+	}
 	focusSelection() {
 		var _this$_model2;
 		(_this$_model2 = this._model) === null || _this$_model2 === void 0 || _this$_model2.focusSelection();
@@ -774,6 +781,14 @@ const OpenReplaceDialogOperation = {
 		return true;
 	}
 };
+const CloseFindDialogOperation = {
+	id: "ui.operation.close-find-dialog",
+	type: CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(IFindReplaceService).terminate();
+		return true;
+	}
+};
 const GoToNextMatchOperation = {
 	type: CommandType.OPERATION,
 	id: "ui.operation.go-to-next-match",
@@ -809,7 +824,11 @@ function FindReplaceMenuItemFactory(accessor) {
 		tooltip: "find-replace.toolbar",
 		type: MenuItemType.BUTTON,
 		hidden$: getMenuHiddenObservable(accessor, UniverInstanceType.UNIVER_SHEET),
-		disabled$: combineLatest([contextService.subscribeContextValue$(EDITOR_ACTIVATED), contextService.subscribeContextValue$(FOCUSING_SHEET)]).pipe(map(([editorActivated, focusingSheet]) => editorActivated || !focusingSheet))
+		disabled$: combineLatest([
+			contextService.subscribeContextValue$(EDITOR_ACTIVATED),
+			contextService.subscribeContextValue$(FOCUSING_SHEET),
+			contextService.subscribeContextValue$(FIND_REPLACE_AVAILABLE).pipe(startWith(contextService.getContextValue(FIND_REPLACE_AVAILABLE)))
+		]).pipe(map(([editorActivated, focusingSheet, available]) => editorActivated || !focusingSheet || !available))
 	};
 }
 
@@ -938,6 +957,7 @@ let FindReplaceController = class FindReplaceController extends RxDisposable {
 		[
 			OpenFindDialogOperation,
 			OpenReplaceDialogOperation,
+			CloseFindDialogOperation,
 			GoToNextMatchOperation,
 			GoToPreviousMatchOperation,
 			ReplaceAllMatchesCommand,
@@ -961,6 +981,7 @@ let FindReplaceController = class FindReplaceController extends RxDisposable {
 		this._menuManagerService.mergeMenu(menuSchema);
 		this._findReplaceService.stateUpdates$.pipe(takeUntil(this.dispose$)).subscribe((newState) => {
 			if (newState.revealed === true) this._openPanel();
+			else if (newState.revealed === false) this._closePanel(false);
 		});
 	}
 	_openPanel() {
@@ -983,11 +1004,14 @@ let FindReplaceController = class FindReplaceController extends RxDisposable {
 		}));
 	}
 	closePanel() {
+		this._closePanel(true);
+	}
+	_closePanel(terminateSession) {
 		if (!this._closingListenerDisposable) return;
 		this._closingListenerDisposable.dispose();
 		this._closingListenerDisposable = null;
 		this._dialogService.close(FIND_REPLACE_DIALOG_ID);
-		this._findReplaceService.terminate();
+		if (terminateSession) this._findReplaceService.terminate();
 		queueMicrotask(() => this._layoutService.focus());
 	}
 };
@@ -1012,7 +1036,7 @@ function getFindReplaceDialogDefaultPosition(direction) {
 //#endregion
 //#region package.json
 var name = "@univerjs/find-replace";
-var version = "1.0.0-insiders.20260813-7c9aa50";
+var version = "1.0.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1020,6 +1044,478 @@ const FIND_REPLACE_PLUGIN_CONFIG_KEY = "find-replace.config";
 const configSymbol = Symbol(FIND_REPLACE_PLUGIN_CONFIG_KEY);
 const defaultPluginConfig = {};
 
+//#endregion
+//#region src/const.ts
+/**
+* Copyright 2023-present DreamNum Co., Ltd.
+*
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+*     http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+const MOBILE_FIND_REPLACE_SETTINGS_COMPONENT = "MobileFindReplaceSettings";
+const MOBILE_FIND_REPLACE_SETTINGS_DIALOG_ID = "MOBILE_FIND_REPLACE_SETTINGS_DIALOG";
+
+//#endregion
+//#region src/views/mobile/MobileFindReplaceSettings.tsx
+const FIND_SCOPE_OPTIONS$1 = [{
+	label: "find-replace.dialog.find-scope.current-sheet",
+	value: "subunit"
+}, {
+	label: "find-replace.dialog.find-scope.workbook",
+	value: "unit"
+}];
+const FIND_DIRECTION_OPTIONS$1 = [{
+	label: "find-replace.dialog.find-direction.row",
+	value: "row"
+}, {
+	label: "find-replace.dialog.find-direction.column",
+	value: "column"
+}];
+const FIND_BY_OPTIONS$1 = [{
+	label: "find-replace.dialog.find-by.value",
+	value: "value"
+}, {
+	label: "find-replace.dialog.find-by.formula",
+	value: "formula"
+}];
+function MobileFindReplaceSettings() {
+	const findReplaceService = useDependency(IFindReplaceService);
+	const localeService = useDependency(LocaleService);
+	const state = useObservable(findReplaceService.state$, void 0, true);
+	const capabilities = useObservable(findReplaceService.providerCapabilities$, null, true);
+	function refreshSearch(force = false) {
+		if (state.findString && (force || state.replaceRevealed)) findReplaceService.find();
+	}
+	const findScopeOptions = FIND_SCOPE_OPTIONS$1.map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	const findDirectionOptions = FIND_DIRECTION_OPTIONS$1.map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	const findByOptions = FIND_BY_OPTIONS$1.map((option) => ({
+		...option,
+		label: localeService.t(option.label)
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "univer-grid univer-gap-2",
+		"data-u-comp": "mobile-find-replace-settings",
+		children: [
+			/* @__PURE__ */ jsx(SettingCheckbox, {
+				checked: state.replaceRevealed,
+				label: localeService.t("find-replace.dialog.replace"),
+				onChange: (checked) => {
+					if (checked) findReplaceService.revealReplace();
+					else findReplaceService.hideReplace();
+					refreshSearch(true);
+				}
+			}),
+			(capabilities === null || capabilities === void 0 ? void 0 : capabilities.findDirection) && /* @__PURE__ */ jsx(SettingSelect, {
+				label: localeService.t("find-replace.dialog.find-direction.title"),
+				value: state.findDirection,
+				options: findDirectionOptions,
+				onChange: (value) => {
+					findReplaceService.changeFindDirection(value);
+					refreshSearch();
+				}
+			}),
+			(capabilities === null || capabilities === void 0 ? void 0 : capabilities.findScope) && /* @__PURE__ */ jsx(SettingSelect, {
+				label: localeService.t("find-replace.dialog.find-scope.title"),
+				value: state.findScope,
+				options: findScopeOptions,
+				onChange: (value) => {
+					findReplaceService.changeFindScope(value);
+					refreshSearch();
+				}
+			}),
+			(capabilities === null || capabilities === void 0 ? void 0 : capabilities.findBy) && /* @__PURE__ */ jsx(SettingSelect, {
+				label: localeService.t("find-replace.dialog.find-by.title"),
+				value: state.findBy,
+				options: findByOptions,
+				onChange: (value) => {
+					findReplaceService.changeFindBy(value);
+					refreshSearch();
+				}
+			}),
+			(capabilities === null || capabilities === void 0 ? void 0 : capabilities.caseSensitive) && /* @__PURE__ */ jsx(SettingCheckbox, {
+				checked: state.caseSensitive,
+				label: localeService.t("find-replace.dialog.case-sensitive"),
+				onChange: (checked) => {
+					findReplaceService.changeCaseSensitive(checked);
+					refreshSearch();
+				}
+			}),
+			(capabilities === null || capabilities === void 0 ? void 0 : capabilities.matchesTheWholeCell) && /* @__PURE__ */ jsx(SettingCheckbox, {
+				checked: state.matchesTheWholeCell,
+				label: localeService.t("find-replace.dialog.match-the-whole-cell"),
+				onChange: (checked) => {
+					findReplaceService.changeMatchesTheWholeCell(checked);
+					refreshSearch();
+				}
+			}),
+			(capabilities === null || capabilities === void 0 ? void 0 : capabilities.matchesTheWholeWord) && /* @__PURE__ */ jsx(SettingCheckbox, {
+				checked: state.matchesTheWholeWord,
+				label: localeService.t("find-replace.dialog.match-the-whole-word"),
+				onChange: (checked) => {
+					findReplaceService.changeMatchesTheWholeWord(checked);
+					refreshSearch();
+				}
+			})
+		]
+	});
+}
+function SettingSelect(props) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: "univer-grid univer-gap-1 univer-text-sm univer-text-gray-700 dark:!univer-text-gray-300",
+		children: [/* @__PURE__ */ jsx("span", { children: props.label }), /* @__PURE__ */ jsx(MobileSelect, {
+			value: props.value,
+			options: props.options,
+			onChange: props.onChange
+		})]
+	});
+}
+function SettingCheckbox(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "univer-flex univer-min-h-9 univer-items-center",
+		children: /* @__PURE__ */ jsx(Checkbox, {
+			checked: props.checked,
+			onChange: (checked) => props.onChange(Boolean(checked)),
+			children: props.label
+		})
+	});
+}
+
+//#endregion
+//#region src/controllers/mobile/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 MobileComponentsController = class MobileComponentsController extends Disposable {
+	constructor(componentManager, iconManager) {
+		super();
+		this.disposeWithMe(iconManager.register({ SearchIcon }));
+		this.disposeWithMe(componentManager.register(MOBILE_FIND_REPLACE_SETTINGS_COMPONENT, MobileFindReplaceSettings));
+	}
+};
+MobileComponentsController = __decorate([__decorateParam(0, Inject(ComponentManager)), __decorateParam(1, Inject(IconManager))], MobileComponentsController);
+
+//#endregion
+//#region src/menu/mobile-schema.ts
+const mobileMenuSchema = { [RibbonDataGroup.ORGANIZATION]: { [OpenFindDialogOperation.id]: {
+	order: 2,
+	menuItemFactory: FindReplaceMenuItemFactory
+} } };
+
+//#endregion
+//#region src/views/mobile/MobileFindReplaceBar.tsx
+const SEARCH_DEBOUNCE_TIME = 500;
+function MobileFindReplaceBar() {
+	const findReplaceService = useDependency(IFindReplaceService);
+	useObservable(findReplaceService.state$, void 0, true);
+	if (!findReplaceService.revealed) return null;
+	return /* @__PURE__ */ jsx(MobileFindReplaceBarContent, {});
+}
+function MobileFindReplaceBarContent() {
+	const commandService = useDependency(ICommandService);
+	const dialogService = useDependency(IDialogService);
+	const findReplaceService = useDependency(IFindReplaceService);
+	const localeService = useDependency(LocaleService);
+	const state = useObservable(findReplaceService.state$, void 0, true);
+	const currentMatch = useObservable(findReplaceService.currentMatch$, null, true);
+	const replaceables = useObservable(findReplaceService.replaceables$, [], true);
+	const [findValue, setFindValue] = useState(() => state.replaceRevealed ? state.inputtingFindString : state.findString);
+	const barRef = useRef(null);
+	const inputRef = useRef(null);
+	const searchTimerRef = useRef(null);
+	const suppressNextFocusRef = useRef(false);
+	const keyboardLayout = useMobileKeyboardViewportLayout(barRef);
+	useEffect(() => {
+		const frame = requestAnimationFrame(() => {
+			var _inputRef$current;
+			return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, []);
+	useEffect(() => {
+		const subscription = findReplaceService.focusSignal$.subscribe(() => {
+			var _inputRef$current2;
+			if (suppressNextFocusRef.current) {
+				suppressNextFocusRef.current = false;
+				return;
+			}
+			(_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
+		});
+		return () => subscription.unsubscribe();
+	}, [findReplaceService]);
+	useEffect(() => () => {
+		if (searchTimerRef.current) clearTimeout(searchTimerRef.current);
+	}, []);
+	function clearSearchTimer() {
+		if (searchTimerRef.current) {
+			clearTimeout(searchTimerRef.current);
+			searchTimerRef.current = null;
+		}
+	}
+	function commitSearch(value) {
+		clearSearchTimer();
+		if (!value) {
+			findReplaceService.changeInputtingFindString("");
+			return;
+		}
+		if (findReplaceService.replaceRevealed) {
+			findReplaceService.changeInputtingFindString(value);
+			findReplaceService.changeFindString(value);
+			findReplaceService.find();
+			return;
+		}
+		findReplaceService.changeFindString(value);
+	}
+	function scheduleSearch(value) {
+		clearSearchTimer();
+		if (!value) {
+			commitSearch(value);
+			return;
+		}
+		searchTimerRef.current = setTimeout(() => commitSearch(value), SEARCH_DEBOUNCE_TIME);
+	}
+	function blurActiveElement() {
+		if (document.activeElement instanceof HTMLElement) document.activeElement.blur();
+	}
+	function executeAfterBlur(commandId, suppressFocusSignal = false) {
+		blurActiveElement();
+		if (findValue !== state.findString) {
+			commitSearch(findValue);
+			if (commandId === GoToNextMatchOperation.id || commandId === GoToPreviousMatchOperation.id) return;
+		}
+		suppressNextFocusRef.current = suppressFocusSignal;
+		const execution = commandService.executeCommand(commandId);
+		suppressNextFocusRef.current = false;
+		execution.catch(() => void 0);
+	}
+	function openSettings() {
+		commitSearch(findValue);
+		blurActiveElement();
+		dialogService.open({
+			id: MOBILE_FIND_REPLACE_SETTINGS_DIALOG_ID,
+			title: { title: localeService.t("find-replace.mobile.settings-title") },
+			children: { label: MOBILE_FIND_REPLACE_SETTINGS_COMPONENT }
+		});
+	}
+	const resultText = state.findCompleted && state.matchesCount === 0 ? localeService.t("find-replace.dialog.no-result") : state.matchesCount > 0 ? `${state.matchesPosition}/${state.matchesCount}` : void 0;
+	const navigationDisabled = state.matchesCount === 0;
+	const replaceDisabled = state.matchesCount === 0 || !(currentMatch === null || currentMatch === void 0 ? void 0 : currentMatch.replaceable);
+	const replaceAllDisabled = replaceables.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: barRef,
+		"data-u-comp": "mobile-find-replace-bar",
+		className: "univer-fixed univer-inset-x-0 univer-z-40 univer-grid univer-gap-2 univer-bg-gray-0 univer-px-2 univer-pt-1.5 univer-shadow-[0_-4px_16px_rgba(0,0,0,0.08)] dark:!univer-bg-gray-800",
+		style: {
+			bottom: (keyboardLayout === null || keyboardLayout === void 0 ? void 0 : keyboardLayout.bottom) ?? 0,
+			paddingBottom: "calc(6px + env(safe-area-inset-bottom, 0px))"
+		},
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "univer-flex",
+			children: [
+				/* @__PURE__ */ jsx(IconButton, {
+					label: localeService.t("find-replace.mobile.settings"),
+					onClick: openSettings,
+					children: /* @__PURE__ */ jsx(ConfigureTabIcon, {})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "univer-relative univer-mr-2 univer-min-w-0 univer-flex-1",
+					children: [/* @__PURE__ */ jsx(SearchIcon, { className: "univer-pointer-events-none univer-absolute univer-left-3 univer-top-1/2 univer-z-10 univer-size-5 -univer-translate-y-1/2 univer-text-gray-500" }), /* @__PURE__ */ jsx(Input, {
+						ref: inputRef,
+						size: "middle",
+						allowClear: true,
+						value: findValue,
+						placeholder: localeService.t("find-replace.dialog.find-placeholder"),
+						inputClass: "!univer-pl-10",
+						slot: resultText ? /* @__PURE__ */ jsx("span", {
+							className: "univer-text-xs univer-text-gray-400",
+							children: resultText
+						}) : void 0,
+						onChange: (value) => {
+							setFindValue(value);
+							scheduleSearch(value);
+						},
+						onKeyDown: (event) => {
+							if (event.key === "Enter") executeAfterBlur(GoToNextMatchOperation.id);
+						}
+					})]
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					disabled: navigationDisabled,
+					label: localeService.t("find-replace.mobile.previous-match"),
+					onClick: () => executeAfterBlur(GoToPreviousMatchOperation.id, true),
+					children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					disabled: navigationDisabled,
+					label: localeService.t("find-replace.mobile.next-match"),
+					onClick: () => executeAfterBlur(GoToNextMatchOperation.id, true),
+					children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
+				}),
+				/* @__PURE__ */ jsx(IconButton, {
+					label: localeService.t("find-replace.mobile.close"),
+					onClick: () => {
+						blurActiveElement();
+						commandService.executeCommand(CloseFindDialogOperation.id).catch(() => void 0);
+					},
+					children: /* @__PURE__ */ jsx(CloseIcon, {})
+				})
+			]
+		}), state.replaceRevealed && /* @__PURE__ */ jsxs("div", {
+			className: "univer-flex univer-gap-1 univer-pl-9",
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					size: "middle",
+					className: "univer-min-w-0 univer-flex-1",
+					value: state.replaceString,
+					placeholder: localeService.t("find-replace.dialog.replace-placeholder"),
+					onChange: (value) => findReplaceService.changeReplaceString(value)
+				}),
+				/* @__PURE__ */ jsx(ActionButton, {
+					disabled: replaceDisabled,
+					onClick: () => executeAfterBlur(ReplaceCurrentMatchCommand.id),
+					children: localeService.t("find-replace.dialog.replace")
+				}),
+				/* @__PURE__ */ jsx(ActionButton, {
+					disabled: replaceAllDisabled,
+					onClick: () => executeAfterBlur(ReplaceAllMatchesCommand.id),
+					children: localeService.t("find-replace.dialog.replace-all")
+				})
+			]
+		})]
+	});
+}
+function IconButton(props) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": props.label,
+		disabled: props.disabled,
+		className: clsx(resetButtonClassName, "univer-flex univer-size-9 univer-flex-none univer-items-center univer-justify-center univer-rounded-full univer-text-lg univer-text-gray-700 active:univer-bg-gray-100 disabled:univer-opacity-35 dark:!univer-text-gray-200 dark:active:!univer-bg-gray-700"),
+		onClick: props.onClick,
+		children: props.children
+	});
+}
+function ActionButton(props) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled: props.disabled,
+		className: clsx(resetButtonClassName, "univer-h-10 univer-flex-none univer-whitespace-nowrap univer-rounded-lg univer-bg-primary-600 univer-px-3 univer-text-sm univer-font-medium univer-text-gray-0 active:univer-bg-primary-700 disabled:univer-bg-gray-100 disabled:univer-text-gray-400 dark:disabled:!univer-bg-gray-700 dark:disabled:!univer-text-gray-500"),
+		onClick: props.onClick,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region src/controllers/mobile/find-replace.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 FindReplaceMobileController = class FindReplaceMobileController extends RxDisposable {
+	constructor(injector, commandService, dialogService, findReplaceService, menuManagerService, univerInstanceService, uiPartsService) {
+		super();
+		[
+			OpenFindDialogOperation,
+			OpenReplaceDialogOperation,
+			CloseFindDialogOperation,
+			GoToNextMatchOperation,
+			GoToPreviousMatchOperation,
+			ReplaceAllMatchesCommand,
+			ReplaceCurrentMatchCommand,
+			FocusSelectionOperation
+		].forEach((command) => this.disposeWithMe(commandService.registerCommand(command)));
+		menuManagerService.mergeMenu(mobileMenuSchema);
+		this.disposeWithMe(uiPartsService.registerComponent(BuiltInUIPart.FOOTER, () => connectInjector(MobileFindReplaceBar, injector)));
+		findReplaceService.stateUpdates$.pipe(takeUntil(this.dispose$)).subscribe((state) => {
+			if (state.revealed === false) dialogService.close(MOBILE_FIND_REPLACE_SETTINGS_DIALOG_ID);
+		});
+		let sessionUnitId = null;
+		findReplaceService.stateUpdates$.pipe(takeUntil(this.dispose$)).subscribe((state) => {
+			if (state.revealed === true) {
+				var _univerInstanceServic;
+				sessionUnitId = ((_univerInstanceServic = univerInstanceService.getFocusedUnit()) === null || _univerInstanceServic === void 0 ? void 0 : _univerInstanceServic.getUnitId()) ?? null;
+			} else if (state.revealed === false) sessionUnitId = null;
+		});
+		univerInstanceService.focused$.pipe(takeUntil(this.dispose$)).subscribe((focused) => {
+			if (sessionUnitId && focused !== sessionUnitId) findReplaceService.terminate();
+		});
+	}
+};
+FindReplaceMobileController = __decorate([
+	__decorateParam(0, Inject(Injector)),
+	__decorateParam(1, ICommandService),
+	__decorateParam(2, IDialogService),
+	__decorateParam(3, IFindReplaceService),
+	__decorateParam(4, IMenuManagerService),
+	__decorateParam(5, IUniverInstanceService),
+	__decorateParam(6, IUIPartsService)
+], FindReplaceMobileController);
+
+//#endregion
+//#region src/mobile-plugin.ts
+let UniverFindReplaceMobileUIPlugin = class UniverFindReplaceMobileUIPlugin extends Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._configService = _configService;
+		const { ...rest } = merge({}, defaultPluginConfig, this._config);
+		this._configService.setConfig(FIND_REPLACE_PLUGIN_CONFIG_KEY, rest);
+	}
+	onStarting() {
+		this._injector.add([MobileComponentsController]);
+		this._injector.get(MobileComponentsController);
+		[[FindReplaceMobileController], [IFindReplaceService, { useClass: FindReplaceService }]].forEach((dependency) => this._injector.add(dependency));
+	}
+	onRendered() {
+		this._injector.get(FindReplaceMobileController);
+	}
+};
+_defineProperty(UniverFindReplaceMobileUIPlugin, "pluginName", "UNIVER_FIND_REPLACE_PLUGIN");
+_defineProperty(UniverFindReplaceMobileUIPlugin, "packageName", name);
+_defineProperty(UniverFindReplaceMobileUIPlugin, "version", version);
+UniverFindReplaceMobileUIPlugin = __decorate([
+	DependentOn(UniverMobileUIPlugin),
+	__decorateParam(1, Inject(Injector)),
+	__decorateParam(2, IConfigService)
+], UniverFindReplaceMobileUIPlugin);
+
 //#endregion
 //#region src/views/dialog/SearchInput.tsx
 function SearchInput(props) {
@@ -1081,10 +1577,18 @@ const FIND_BY_OPTIONS = [{
 	value: "formula"
 }];
 function useFindInputFocus(findReplaceService, ref) {
+	const pendingFocusFrameRef = useRef(null);
 	const focus = useCallback(() => {
 		var _document$querySelect;
 		(_document$querySelect = document.querySelector(".univer-find-input input")) === null || _document$querySelect === void 0 || _document$querySelect.focus();
 	}, []);
+	const focusAfterDialogClose = useCallback(() => {
+		focus();
+		pendingFocusFrameRef.current = requestAnimationFrame(() => {
+			pendingFocusFrameRef.current = null;
+			focus();
+		});
+	}, [focus]);
 	const selectHasFocus = useCallback(() => {
 		const allInputs = document.querySelectorAll("[data-u-comp=find-replace-dialog] [data-u-comp=search-input]");
 		return Array.from(allInputs).some((input) => input === document.activeElement);
@@ -1095,10 +1599,14 @@ function useFindInputFocus(findReplaceService, ref) {
 	}));
 	useEffect(() => {
 		const subscription = findReplaceService.focusSignal$.subscribe(() => focus());
-		return () => subscription.unsubscribe();
+		return () => {
+			subscription.unsubscribe();
+			if (pendingFocusFrameRef.current !== null) cancelAnimationFrame(pendingFocusFrameRef.current);
+		};
 	}, [findReplaceService, focus]);
 	return {
 		focus,
+		focusAfterDialogClose,
 		selectHasFocus
 	};
 }
@@ -1144,7 +1652,7 @@ const ReplaceDialog = forwardRef(function ReplaceDialogImpl(_props, ref) {
 	const replaceAllDisabled = replaceables.length === 0;
 	const onFindStringChange = useCallback((newValue) => findReplaceService.changeInputtingFindString(newValue), [findReplaceService]);
 	const onReplaceStringChange = useCallback((replaceString) => findReplaceService.changeReplaceString(replaceString), [findReplaceService]);
-	const { focus } = useFindInputFocus(findReplaceService, ref);
+	const { focusAfterDialogClose } = useFindInputFocus(findReplaceService, ref);
 	const onClickFindButton = useCallback(() => {
 		if (findString === inputtingFindString) findReplaceService.moveToNextMatch();
 		else {
@@ -1159,8 +1667,8 @@ const ReplaceDialog = forwardRef(function ReplaceDialogImpl(_props, ref) {
 	const onClickReplaceButton = useCallback(() => commandService.executeCommand(ReplaceCurrentMatchCommand.id), [commandService]);
 	const onClickReplaceAllButton = useCallback(async () => {
 		await commandService.executeCommand(ReplaceAllMatchesCommand.id);
-		focus();
-	}, [commandService, focus]);
+		focusAfterDialogClose();
+	}, [commandService, focusAfterDialogClose]);
 	const onChangeFindDirection = useCallback((findDirection) => {
 		findReplaceService.changeFindDirection(findDirection);
 	}, [findReplaceService]);
@@ -1242,20 +1750,20 @@ const ReplaceDialog = forwardRef(function ReplaceDialogImpl(_props, ref) {
 			capabilities.caseSensitive && /* @__PURE__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(Checkbox, {
 				checked: caseSensitive,
 				onChange: (checked) => {
-					findReplaceService.changeCaseSensitive(checked);
+					findReplaceService.changeCaseSensitive(Boolean(checked));
 					if (findCompleted) findReplaceService.find();
 				},
 				children: localeService.t("find-replace.dialog.case-sensitive")
 			}) }),
 			capabilities.matchesTheWholeCell && /* @__PURE__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(Checkbox, {
 				checked: matchesTheWholeCell,
-				onChange: (checked) => findReplaceService.changeMatchesTheWholeCell(checked),
+				onChange: (checked) => findReplaceService.changeMatchesTheWholeCell(Boolean(checked)),
 				children: localeService.t("find-replace.dialog.match-the-whole-cell")
 			}) }),
 			capabilities.matchesTheWholeWord && /* @__PURE__ */ jsx(FormLayout, { children: /* @__PURE__ */ jsx(Checkbox, {
 				checked: matchesTheWholeWord,
 				onChange: (checked) => {
-					findReplaceService.changeMatchesTheWholeWord(checked);
+					findReplaceService.changeMatchesTheWholeWord(Boolean(checked));
 					if (findCompleted) findReplaceService.find();
 				},
 				children: localeService.t("find-replace.dialog.match-the-whole-word")
@@ -1384,4 +1892,4 @@ _defineProperty(UniverFindReplacePlugin, "version", version);
 UniverFindReplacePlugin = __decorate([__decorateParam(1, Inject(Injector)), __decorateParam(2, IConfigService)], UniverFindReplacePlugin);
 
 //#endregion
-export { FindBy, FindDirection, FindModel, FindReplaceController, menuSchema as FindReplaceMenuSchema, FindReplaceModel, FindReplaceService, FindReplaceState, FindScope, GoToNextMatchOperation, GoToPreviousMatchOperation, IFindReplaceService, OpenFindDialogOperation, OpenReplaceDialogOperation, ReplaceAllMatchesCommand, ReplaceCurrentMatchCommand, UniverFindReplacePlugin, createInitFindReplaceState };
+export { CloseFindDialogOperation, FindBy, FindDirection, FindModel, FindReplaceController, menuSchema as FindReplaceMenuSchema, FindReplaceModel, FindReplaceService, FindReplaceState, FindScope, GoToNextMatchOperation, GoToPreviousMatchOperation, IFindReplaceService, OpenFindDialogOperation, OpenReplaceDialogOperation, ReplaceAllMatchesCommand, ReplaceCurrentMatchCommand, UniverFindReplaceMobileUIPlugin, UniverFindReplacePlugin, createInitFindReplaceState };