@univerjs/find-replace 1.0.0-insiders.20260809-70eefdd → 1.0.0-rc.0

package/lib/cjs/index.js

@@ -5,8 +5,8 @@ let _univerjs_ui = require("@univerjs/ui");
 let _univerjs_engine_render = require("@univerjs/engine-render");
 let rxjs = require("rxjs");
 let _univerjs_icons = require("@univerjs/icons");
-let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
 
 //#region src/services/context-keys.ts
 /**
@@ -650,6 +650,13 @@ let FindReplaceService = class FindReplaceService extends _univerjs_core.Disposa
 		});
 		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();
@@ -775,6 +782,14 @@ const OpenReplaceDialogOperation = {
 		return true;
 	}
 };
+const CloseFindDialogOperation = {
+	id: "ui.operation.close-find-dialog",
+	type: _univerjs_core.CommandType.OPERATION,
+	handler: (accessor) => {
+		accessor.get(IFindReplaceService).terminate();
+		return true;
+	}
+};
 const GoToNextMatchOperation = {
 	type: _univerjs_core.CommandType.OPERATION,
 	id: "ui.operation.go-to-next-match",
@@ -810,7 +825,11 @@ function FindReplaceMenuItemFactory(accessor) {
 		tooltip: "find-replace.toolbar",
 		type: _univerjs_ui.MenuItemType.BUTTON,
 		hidden$: (0, _univerjs_ui.getMenuHiddenObservable)(accessor, _univerjs_core.UniverInstanceType.UNIVER_SHEET),
-		disabled$: (0, rxjs.combineLatest)([contextService.subscribeContextValue$(_univerjs_core.EDITOR_ACTIVATED), contextService.subscribeContextValue$(_univerjs_core.FOCUSING_SHEET)]).pipe((0, rxjs.map)(([editorActivated, focusingSheet]) => editorActivated || !focusingSheet))
+		disabled$: (0, rxjs.combineLatest)([
+			contextService.subscribeContextValue$(_univerjs_core.EDITOR_ACTIVATED),
+			contextService.subscribeContextValue$(_univerjs_core.FOCUSING_SHEET),
+			contextService.subscribeContextValue$(FIND_REPLACE_AVAILABLE).pipe((0, rxjs.startWith)(contextService.getContextValue(FIND_REPLACE_AVAILABLE)))
+		]).pipe((0, rxjs.map)(([editorActivated, focusingSheet, available]) => editorActivated || !focusingSheet || !available))
 	};
 }
 
@@ -939,6 +958,7 @@ let FindReplaceController = class FindReplaceController extends _univerjs_core.R
 		[
 			OpenFindDialogOperation,
 			OpenReplaceDialogOperation,
+			CloseFindDialogOperation,
 			GoToNextMatchOperation,
 			GoToPreviousMatchOperation,
 			ReplaceAllMatchesCommand,
@@ -962,6 +982,7 @@ let FindReplaceController = class FindReplaceController extends _univerjs_core.R
 		this._menuManagerService.mergeMenu(menuSchema);
 		this._findReplaceService.stateUpdates$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((newState) => {
 			if (newState.revealed === true) this._openPanel();
+			else if (newState.revealed === false) this._closePanel(false);
 		});
 	}
 	_openPanel() {
@@ -984,11 +1005,14 @@ let FindReplaceController = class FindReplaceController extends _univerjs_core.R
 		}));
 	}
 	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());
 	}
 };
@@ -1013,7 +1037,7 @@ function getFindReplaceDialogDefaultPosition(direction) {
 //#endregion
 //#region package.json
 var name = "@univerjs/find-replace";
-var version = "1.0.0-insiders.20260809-70eefdd";
+var version = "1.0.0-rc.0";
 
 //#endregion
 //#region src/config/config.ts
@@ -1021,6 +1045,476 @@ 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 = (0, _univerjs_ui.useDependency)(IFindReplaceService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const state = (0, _univerjs_ui.useObservable)(findReplaceService.state$, void 0, true);
+	const capabilities = (0, _univerjs_ui.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "univer-grid univer-gap-2",
+		"data-u-comp": "mobile-find-replace-settings",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: "univer-grid univer-gap-1 univer-text-sm univer-text-gray-700 dark:!univer-text-gray-300",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.MobileSelect, {
+			value: props.value,
+			options: props.options,
+			onChange: props.onChange
+		})]
+	});
+}
+function SettingCheckbox(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "univer-flex univer-min-h-9 univer-items-center",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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 _univerjs_core.Disposable {
+	constructor(componentManager, iconManager) {
+		super();
+		this.disposeWithMe(iconManager.register({ SearchIcon: _univerjs_icons.SearchIcon }));
+		this.disposeWithMe(componentManager.register(MOBILE_FIND_REPLACE_SETTINGS_COMPONENT, MobileFindReplaceSettings));
+	}
+};
+MobileComponentsController = __decorate([__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_ui.ComponentManager)), __decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_ui.IconManager))], MobileComponentsController);
+
+//#endregion
+//#region src/menu/mobile-schema.ts
+const mobileMenuSchema = { [_univerjs_ui.RibbonDataGroup.ORGANIZATION]: { [OpenFindDialogOperation.id]: {
+	order: 2,
+	menuItemFactory: FindReplaceMenuItemFactory
+} } };
+
+//#endregion
+//#region src/views/mobile/MobileFindReplaceBar.tsx
+const SEARCH_DEBOUNCE_TIME = 500;
+function MobileFindReplaceBar() {
+	const findReplaceService = (0, _univerjs_ui.useDependency)(IFindReplaceService);
+	(0, _univerjs_ui.useObservable)(findReplaceService.state$, void 0, true);
+	if (!findReplaceService.revealed) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MobileFindReplaceBarContent, {});
+}
+function MobileFindReplaceBarContent() {
+	const keyboardInset = (0, react.useContext)(_univerjs_ui.MobileKeyboardInsetContext);
+	const commandService = (0, _univerjs_ui.useDependency)(_univerjs_core.ICommandService);
+	const dialogService = (0, _univerjs_ui.useDependency)(_univerjs_ui.IDialogService);
+	const findReplaceService = (0, _univerjs_ui.useDependency)(IFindReplaceService);
+	const localeService = (0, _univerjs_ui.useDependency)(_univerjs_core.LocaleService);
+	const state = (0, _univerjs_ui.useObservable)(findReplaceService.state$, void 0, true);
+	const currentMatch = (0, _univerjs_ui.useObservable)(findReplaceService.currentMatch$, null, true);
+	const replaceables = (0, _univerjs_ui.useObservable)(findReplaceService.replaceables$, [], true);
+	const [findValue, setFindValue] = (0, react.useState)(() => state.replaceRevealed ? state.inputtingFindString : state.findString);
+	const inputRef = (0, react.useRef)(null);
+	const searchTimerRef = (0, react.useRef)(null);
+	const suppressNextFocusRef = (0, react.useRef)(false);
+	(0, react.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);
+	}, []);
+	(0, react.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]);
+	(0, react.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"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: keyboardInset,
+			paddingBottom: "calc(6px + env(safe-area-inset-bottom, 0px))"
+		},
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-flex",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+					label: localeService.t("find-replace.mobile.settings"),
+					onClick: openSettings,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ConfigureTabIcon, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "univer-relative univer-mr-2 univer-min-w-0 univer-flex-1",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.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__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.Input, {
+						ref: inputRef,
+						size: "middle",
+						allowClear: true,
+						value: findValue,
+						placeholder: localeService.t("find-replace.dialog.find-placeholder"),
+						inputClass: "!univer-pl-10",
+						slot: resultText ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+					disabled: navigationDisabled,
+					label: localeService.t("find-replace.mobile.previous-match"),
+					onClick: () => executeAfterBlur(GoToPreviousMatchOperation.id, true),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ArrowUpIcon, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+					disabled: navigationDisabled,
+					label: localeService.t("find-replace.mobile.next-match"),
+					onClick: () => executeAfterBlur(GoToNextMatchOperation.id, true),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.ArrowDownIcon, {})
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconButton, {
+					label: localeService.t("find-replace.mobile.close"),
+					onClick: () => {
+						blurActiveElement();
+						commandService.executeCommand(CloseFindDialogOperation.id).catch(() => void 0);
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_icons.CloseIcon, {})
+				})
+			]
+		}), state.replaceRevealed && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "univer-flex univer-gap-1 univer-pl-9",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+					disabled: replaceDisabled,
+					onClick: () => executeAfterBlur(ReplaceCurrentMatchCommand.id),
+					children: localeService.t("find-replace.dialog.replace")
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionButton, {
+					disabled: replaceAllDisabled,
+					onClick: () => executeAfterBlur(ReplaceAllMatchesCommand.id),
+					children: localeService.t("find-replace.dialog.replace-all")
+				})
+			]
+		})]
+	});
+}
+function IconButton(props) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		"aria-label": props.label,
+		disabled: props.disabled,
+		className: (0, _univerjs_design.clsx)(_univerjs_design.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__ */ (0, react_jsx_runtime.jsx)("button", {
+		type: "button",
+		disabled: props.disabled,
+		className: (0, _univerjs_design.clsx)(_univerjs_design.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 _univerjs_core.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(_univerjs_ui.BuiltInUIPart.FOOTER, () => (0, _univerjs_ui.connectInjector)(MobileFindReplaceBar, injector)));
+		findReplaceService.stateUpdates$.pipe((0, rxjs.takeUntil)(this.dispose$)).subscribe((state) => {
+			if (state.revealed === false) dialogService.close(MOBILE_FIND_REPLACE_SETTINGS_DIALOG_ID);
+		});
+		let sessionUnitId = null;
+		findReplaceService.stateUpdates$.pipe((0, rxjs.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((0, rxjs.takeUntil)(this.dispose$)).subscribe((focused) => {
+			if (sessionUnitId && focused !== sessionUnitId) findReplaceService.terminate();
+		});
+	}
+};
+FindReplaceMobileController = __decorate([
+	__decorateParam(0, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(1, _univerjs_core.ICommandService),
+	__decorateParam(2, _univerjs_ui.IDialogService),
+	__decorateParam(3, IFindReplaceService),
+	__decorateParam(4, _univerjs_ui.IMenuManagerService),
+	__decorateParam(5, _univerjs_core.IUniverInstanceService),
+	__decorateParam(6, _univerjs_ui.IUIPartsService)
+], FindReplaceMobileController);
+
+//#endregion
+//#region src/mobile-plugin.ts
+let UniverFindReplaceMobileUIPlugin = class UniverFindReplaceMobileUIPlugin extends _univerjs_core.Plugin {
+	constructor(_config = defaultPluginConfig, _injector, _configService) {
+		super();
+		this._config = _config;
+		this._injector = _injector;
+		this._configService = _configService;
+		const { ...rest } = (0, _univerjs_core.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([
+	(0, _univerjs_core.DependentOn)(_univerjs_ui.UniverMobileUIPlugin),
+	__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)),
+	__decorateParam(2, _univerjs_core.IConfigService)
+], UniverFindReplaceMobileUIPlugin);
+
 //#endregion
 //#region src/views/dialog/SearchInput.tsx
 function SearchInput(props) {
@@ -1082,10 +1576,18 @@ const FIND_BY_OPTIONS = [{
 	value: "formula"
 }];
 function useFindInputFocus(findReplaceService, ref) {
+	const pendingFocusFrameRef = (0, react.useRef)(null);
 	const focus = (0, react.useCallback)(() => {
 		var _document$querySelect;
 		(_document$querySelect = document.querySelector(".univer-find-input input")) === null || _document$querySelect === void 0 || _document$querySelect.focus();
 	}, []);
+	const focusAfterDialogClose = (0, react.useCallback)(() => {
+		focus();
+		pendingFocusFrameRef.current = requestAnimationFrame(() => {
+			pendingFocusFrameRef.current = null;
+			focus();
+		});
+	}, [focus]);
 	const selectHasFocus = (0, react.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);
@@ -1096,10 +1598,14 @@ function useFindInputFocus(findReplaceService, ref) {
 	}));
 	(0, react.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
 	};
 }
@@ -1145,7 +1651,7 @@ const ReplaceDialog = (0, react.forwardRef)(function ReplaceDialogImpl(_props, r
 	const replaceAllDisabled = replaceables.length === 0;
 	const onFindStringChange = (0, react.useCallback)((newValue) => findReplaceService.changeInputtingFindString(newValue), [findReplaceService]);
 	const onReplaceStringChange = (0, react.useCallback)((replaceString) => findReplaceService.changeReplaceString(replaceString), [findReplaceService]);
-	const { focus } = useFindInputFocus(findReplaceService, ref);
+	const { focusAfterDialogClose } = useFindInputFocus(findReplaceService, ref);
 	const onClickFindButton = (0, react.useCallback)(() => {
 		if (findString === inputtingFindString) findReplaceService.moveToNextMatch();
 		else {
@@ -1160,8 +1666,8 @@ const ReplaceDialog = (0, react.forwardRef)(function ReplaceDialogImpl(_props, r
 	const onClickReplaceButton = (0, react.useCallback)(() => commandService.executeCommand(ReplaceCurrentMatchCommand.id), [commandService]);
 	const onClickReplaceAllButton = (0, react.useCallback)(async () => {
 		await commandService.executeCommand(ReplaceAllMatchesCommand.id);
-		focus();
-	}, [commandService, focus]);
+		focusAfterDialogClose();
+	}, [commandService, focusAfterDialogClose]);
 	const onChangeFindDirection = (0, react.useCallback)((findDirection) => {
 		findReplaceService.changeFindDirection(findDirection);
 	}, [findReplaceService]);
@@ -1385,6 +1891,7 @@ _defineProperty(UniverFindReplacePlugin, "version", version);
 UniverFindReplacePlugin = __decorate([__decorateParam(1, (0, _univerjs_core.Inject)(_univerjs_core.Injector)), __decorateParam(2, _univerjs_core.IConfigService)], UniverFindReplacePlugin);
 
 //#endregion
+exports.CloseFindDialogOperation = CloseFindDialogOperation;
 exports.FindBy = FindBy;
 exports.FindDirection = FindDirection;
 exports.FindModel = FindModel;
@@ -1416,6 +1923,12 @@ exports.OpenFindDialogOperation = OpenFindDialogOperation;
 exports.OpenReplaceDialogOperation = OpenReplaceDialogOperation;
 exports.ReplaceAllMatchesCommand = ReplaceAllMatchesCommand;
 exports.ReplaceCurrentMatchCommand = ReplaceCurrentMatchCommand;
+Object.defineProperty(exports, 'UniverFindReplaceMobileUIPlugin', {
+  enumerable: true,
+  get: function () {
+    return UniverFindReplaceMobileUIPlugin;
+  }
+});
 Object.defineProperty(exports, 'UniverFindReplacePlugin', {
   enumerable: true,
   get: function () {

package/lib/cjs/locale/ar-SA.js

@@ -2,10 +2,16 @@
 //#region src/locale/ar-SA.ts
 const locale = { "find-replace": {
 	toolbar: "بحث واستبدال",
+	mobile: {
+		settings: "إعدادات البحث والاستبدال",
+		"settings-title": "إعدادات البحث والاستبدال",
+		"previous-match": "التطابق السابق",
+		"next-match": "التطابق التالي",
+		close: "إغلاق البحث والاستبدال"
+	},
 	shortcut: {
 		"open-find-dialog": "فتح مربع حوار البحث",
 		"open-replace-dialog": "فتح مربع حوار الاستبدال",
-		"close-dialog": "إغلاق مربع حوار البحث والاستبدال",
 		"go-to-next-match": "الانتقال إلى التطابق التالي",
 		"go-to-previous-match": "الانتقال إلى التطابق السابق",
 		"focus-selection": "تركيز التحديد",

package/lib/cjs/locale/ca-ES.js

@@ -2,10 +2,16 @@
 //#region src/locale/ca-ES.ts
 const locale = { "find-replace": {
 	toolbar: "Cerca i reemplaça",
+	mobile: {
+		settings: "Configuració de cerca i reemplaçament",
+		"settings-title": "Configuració de cerca i reemplaçament",
+		"previous-match": "Coincidència anterior",
+		"next-match": "Coincidència següent",
+		close: "Tanca la cerca i el reemplaçament"
+	},
 	shortcut: {
 		"open-find-dialog": "Obrir el diàleg de cerca",
 		"open-replace-dialog": "Obrir el diàleg de reemplaçament",
-		"close-dialog": "Tancar el diàleg de cerca i reemplaçament",
 		"go-to-next-match": "Anar a la següent coincidència",
 		"go-to-previous-match": "Anar a la coincidència anterior",
 		"focus-selection": "Enfocar la selecció",