@ckeditor/ckeditor5-find-and-replace 40.2.0 → 41.0.0

package/src/findandreplaceui.js

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findandreplaceui
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { createDropdown, CssTransitionDisablerMixin } from 'ckeditor5/src/ui';
-import FindAndReplaceFormView from './ui/findandreplaceformview';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { ButtonView, Dialog, DialogViewPosition, createDropdown, DropdownView, FormHeaderView, CssTransitionDisablerMixin } from 'ckeditor5/src/ui.js';
+import FindAndReplaceFormView from './ui/findandreplaceformview.js';
 import loupeIcon from '../theme/icons/find-replace.svg';
 /**
  * The default find and replace UI.
@@ -16,6 +16,12 @@ import loupeIcon from '../theme/icons/find-replace.svg';
  * that uses the {@link module:find-and-replace/findandreplace~FindAndReplace FindAndReplace} plugin API.
  */
 export default class FindAndReplaceUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [Dialog];
+    }
     /**
      * @inheritDoc
      */
@@ -27,6 +33,7 @@ export default class FindAndReplaceUI extends Plugin {
      */
     constructor(editor) {
         super(editor);
+        editor.config.define('findAndReplace.uiType', 'dialog');
         this.formView = null;
     }
     /**
@@ -34,66 +41,138 @@ export default class FindAndReplaceUI extends Plugin {
      */
     init() {
         const editor = this.editor;
-        // Register the toolbar dropdown component.
-        editor.ui.componentFactory.add('findAndReplace', locale => {
-            const dropdown = createDropdown(locale);
-            // Dropdown should be disabled when in source editing mode. See #10001.
-            const findCommand = editor.commands.get('find');
-            dropdown.bind('isEnabled').to(findCommand);
-            dropdown.once('change:isOpen', () => {
-                this.formView = new (CssTransitionDisablerMixin(FindAndReplaceFormView))(editor.locale);
-                dropdown.panelView.children.add(this.formView);
-                this._setupFormView(this.formView);
-            });
-            // Every time a dropdown is opened, the search text field should get focused and selected for better UX.
-            // Note: Using the low priority here to make sure the following listener starts working after
-            // the default action of the drop-down is executed (i.e. the panel showed up). Otherwise,
-            // the invisible form/input cannot be focused/selected.
-            //
-            // Each time a dropdown is closed, move the focus back to the find and replace toolbar button
-            // and let the find and replace editing feature know that all search results can be invalidated
-            // and no longer should be marked in the content.
-            dropdown.on('change:isOpen', (event, name, isOpen) => {
-                if (isOpen) {
-                    this.formView.disableCssTransitions();
-                    this.formView.reset();
-                    this.formView._findInputView.fieldView.select();
-                    this.formView.enableCssTransitions();
+        const isUiUsingDropdown = editor.config.get('findAndReplace.uiType') === 'dropdown';
+        const findCommand = editor.commands.get('find');
+        // Register the toolbar component: dropdown or button (that opens a dialog).
+        editor.ui.componentFactory.add('findAndReplace', () => {
+            let view;
+            if (isUiUsingDropdown) {
+                view = this._createDropdown();
+                // Button should be disabled when in source editing mode. See #10001.
+                view.bind('isEnabled').to(findCommand);
+            }
+            else {
+                view = this._createDialogButton();
+                // Button should be disabled when in source editing mode. See #10001.
+                view.bind('isEnabled').to(findCommand);
+            }
+            editor.keystrokes.set('Ctrl+F', (data, cancelEvent) => {
+                if (!findCommand.isEnabled) {
+                    return;
+                }
+                if (view instanceof DropdownView) {
+                    const dropdownButtonView = view.buttonView;
+                    if (!dropdownButtonView.isOn) {
+                        dropdownButtonView.fire('execute');
+                    }
                 }
                 else {
-                    this.fire('searchReseted');
+                    if (view.isOn) {
+                        // If the dialog is open, do not close it. Instead focus it.
+                        // Unfortunately we can't simply use:
+                        // 	this.formView!.focus();
+                        // because it would always move focus to the first input field, which we don't want.
+                        editor.plugins.get('Dialog').view.focus();
+                    }
+                    else {
+                        view.fire('execute');
+                    }
                 }
-            }, { priority: 'low' });
-            this._setupDropdownButton(dropdown);
-            return dropdown;
+                cancelEvent();
+            });
+            return view;
         });
     }
     /**
-     * Sets up the find and replace button.
+     * Creates a dropdown containing the find and replace form.
      */
-    _setupDropdownButton(dropdown) {
+    _createDropdown() {
         const editor = this.editor;
         const t = editor.locale.t;
-        dropdown.buttonView.set({
+        const dropdownView = createDropdown(editor.locale);
+        dropdownView.once('change:isOpen', () => {
+            this.formView = this._createFormView();
+            this.formView.children.add(new FormHeaderView(editor.locale, {
+                label: t('Find and replace')
+            }), 0);
+            dropdownView.panelView.children.add(this.formView);
+        });
+        // Every time a dropdown is opened, the search text field should get focused and selected for better UX.
+        // Note: Using the low priority here to make sure the following listener starts working after
+        // the default action of the drop-down is executed (i.e. the panel showed up). Otherwise,
+        // the invisible form/input cannot be focused/selected.
+        //
+        // Each time a dropdown is closed, move the focus back to the find and replace toolbar button
+        // and let the find and replace editing feature know that all search results can be invalidated
+        // and no longer should be marked in the content.
+        dropdownView.on('change:isOpen', (event, name, isOpen) => {
+            if (isOpen) {
+                this._setupFormView();
+            }
+            else {
+                this.fire('searchReseted');
+            }
+        }, { priority: 'low' });
+        dropdownView.buttonView.set({
             icon: loupeIcon,
             label: t('Find and replace'),
             keystroke: 'CTRL+F',
             tooltip: true
         });
-        editor.keystrokes.set('Ctrl+F', (data, cancelEvent) => {
-            if (dropdown.isEnabled) {
-                dropdown.isOpen = true;
-                cancelEvent();
+        return dropdownView;
+    }
+    /**
+     * Creates a button that opens a dialog with the find and replace form.
+     */
+    _createDialogButton() {
+        const editor = this.editor;
+        const buttonView = new ButtonView(editor.locale);
+        const dialog = editor.plugins.get('Dialog');
+        const t = editor.locale.t;
+        buttonView.set({
+            icon: loupeIcon,
+            label: t('Find and replace'),
+            keystroke: 'CTRL+F',
+            tooltip: true
+        });
+        // Button should be on when the find and replace dialog is opened.
+        buttonView.bind('isOn').to(dialog, 'id', id => id === 'findAndReplace');
+        // Every time a dialog is opened, the search text field should get focused and selected for better UX.
+        // Each time a dialog is closed, move the focus back to the find and replace toolbar button
+        // and let the find and replace editing feature know that all search results can be invalidated
+        // and no longer should be marked in the content.
+        buttonView.on('execute', () => {
+            if (!this.formView) {
+                this.formView = this._createFormView();
+            }
+            if (buttonView.isOn) {
+                dialog.hide();
+            }
+            else {
+                dialog.show({
+                    id: 'findAndReplace',
+                    title: t('Find and replace'),
+                    content: this.formView,
+                    position: DialogViewPosition.EDITOR_TOP_SIDE,
+                    onShow: () => {
+                        this._setupFormView();
+                    },
+                    onHide: () => {
+                        this.fire('searchReseted');
+                    }
+                });
             }
         });
+        return buttonView;
     }
     /**
      * Sets up the form view for the find and replace.
      *
      * @param formView A related form view.
      */
-    _setupFormView(formView) {
+    _createFormView() {
         const editor = this.editor;
+        const formView = new (CssTransitionDisablerMixin(FindAndReplaceFormView))(editor.locale);
         const commands = editor.commands;
         const findAndReplaceEditing = this.editor.plugins.get('FindAndReplaceEditing');
         const editingState = findAndReplaceEditing.state;
@@ -128,5 +207,15 @@ export default class FindAndReplaceUI extends Plugin {
                 this.fire('searchReseted');
             }
         });
+        return formView;
+    }
+    /**
+     * Clears the find and replace form and focuses the search text field.
+     */
+    _setupFormView() {
+        this.formView.disableCssTransitions();
+        this.formView.reset();
+        this.formView._findInputView.fieldView.select();
+        this.formView.enableCssTransitions();
     }
 }

package/src/findandreplaceutils.d.ts

@@ -1,14 +1,14 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findandreplaceutils
  */
-import type { Item, Model, Range } from 'ckeditor5/src/engine';
-import { Plugin } from 'ckeditor5/src/core';
-import { Collection } from 'ckeditor5/src/utils';
-import type { ResultType } from './findandreplace';
+import type { Item, Model, Range } from 'ckeditor5/src/engine.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Collection } from 'ckeditor5/src/utils.js';
+import type { ResultType } from './findandreplace.js';
 /**
  * A set of helpers related to find and replace.
  */

package/src/findandreplaceutils.js

@@ -1,9 +1,9 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Plugin } from 'ckeditor5/src/core';
-import { Collection, uid } from 'ckeditor5/src/utils';
+import { Plugin } from 'ckeditor5/src/core.js';
+import { Collection, uid } from 'ckeditor5/src/utils.js';
 import { escapeRegExp } from 'lodash-es';
 /**
  * A set of helpers related to find and replace.

package/src/findcommand.d.ts

@@ -1,15 +1,15 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findcommand
 */
-import type { Item } from 'ckeditor5/src/engine';
-import { Command, type Editor } from 'ckeditor5/src/core';
-import type { Collection } from 'ckeditor5/src/utils';
-import type FindAndReplaceState from './findandreplacestate';
-import type { ResultType } from './findandreplace';
+import type { Item } from 'ckeditor5/src/engine.js';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { Collection } from 'ckeditor5/src/utils.js';
+import type FindAndReplaceState from './findandreplacestate.js';
+import type { ResultType } from './findandreplace.js';
 /**
  * The find command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  */

package/src/findcommand.js

@@ -1,8 +1,8 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 /**
  * The find command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  */

package/src/findnextcommand.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findnextcommand
 */
-import { Command, type Editor } from 'ckeditor5/src/core';
-import type FindAndReplaceState from './findandreplacestate';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type FindAndReplaceState from './findandreplacestate.js';
 /**
  * The find next command. Moves the highlight to the next search result.
  *

package/src/findnextcommand.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findnextcommand
 */
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 /**
  * The find next command. Moves the highlight to the next search result.
  *

package/src/findpreviouscommand.d.ts

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findpreviouscommand
 */
-import FindNextCommand from './findnextcommand';
+import FindNextCommand from './findnextcommand.js';
 /**
  * The find previous command. Moves the highlight to the previous search result.
  *

package/src/findpreviouscommand.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/findpreviouscommand
 */
-import FindNextCommand from './findnextcommand';
+import FindNextCommand from './findnextcommand.js';
 /**
  * The find previous command. Moves the highlight to the previous search result.
  *

package/src/index.d.ts

@@ -1,17 +1,18 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace
  */
-export { default as FindAndReplace } from './findandreplace';
-export { default as FindAndReplaceEditing } from './findandreplaceediting';
-export { default as FindAndReplaceUI } from './findandreplaceui';
-export { default as FindAndReplaceUtils } from './findandreplaceutils';
-export { default as FindCommand } from './findcommand';
-export { default as FindNextCommand } from './findnextcommand';
-export { default as FindPreviousCommand } from './findpreviouscommand';
-export { default as ReplaceCommand } from './replacecommand';
-export { default as ReplaceAllCommand } from './replaceallcommand';
-import './augmentation';
+export { default as FindAndReplace } from './findandreplace.js';
+export { default as FindAndReplaceEditing } from './findandreplaceediting.js';
+export { default as FindAndReplaceUI } from './findandreplaceui.js';
+export { default as FindAndReplaceUtils } from './findandreplaceutils.js';
+export { default as FindCommand } from './findcommand.js';
+export { default as FindNextCommand } from './findnextcommand.js';
+export { default as FindPreviousCommand } from './findpreviouscommand.js';
+export { default as ReplaceCommand } from './replacecommand.js';
+export { default as ReplaceAllCommand } from './replaceallcommand.js';
+export { FindAndReplaceConfig } from './findandreplaceconfig.js';
+import './augmentation.js';

package/src/index.js

@@ -1,17 +1,17 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace
  */
-export { default as FindAndReplace } from './findandreplace';
-export { default as FindAndReplaceEditing } from './findandreplaceediting';
-export { default as FindAndReplaceUI } from './findandreplaceui';
-export { default as FindAndReplaceUtils } from './findandreplaceutils';
-export { default as FindCommand } from './findcommand';
-export { default as FindNextCommand } from './findnextcommand';
-export { default as FindPreviousCommand } from './findpreviouscommand';
-export { default as ReplaceCommand } from './replacecommand';
-export { default as ReplaceAllCommand } from './replaceallcommand';
-import './augmentation';
+export { default as FindAndReplace } from './findandreplace.js';
+export { default as FindAndReplaceEditing } from './findandreplaceediting.js';
+export { default as FindAndReplaceUI } from './findandreplaceui.js';
+export { default as FindAndReplaceUtils } from './findandreplaceutils.js';
+export { default as FindCommand } from './findcommand.js';
+export { default as FindNextCommand } from './findnextcommand.js';
+export { default as FindPreviousCommand } from './findpreviouscommand.js';
+export { default as ReplaceCommand } from './replacecommand.js';
+export { default as ReplaceAllCommand } from './replaceallcommand.js';
+import './augmentation.js';

package/src/replaceallcommand.d.ts

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/replaceallcommand
  */
-import { Collection } from 'ckeditor5/src/utils';
-import type { ResultType } from './findandreplace';
-import { ReplaceCommandBase } from './replacecommandbase';
+import { Collection } from 'ckeditor5/src/utils.js';
+import type { ResultType } from './findandreplace.js';
+import { ReplaceCommandBase } from './replacecommandbase.js';
 /**
  * The replace all command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  */

package/src/replaceallcommand.js

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/replaceallcommand
  */
-import { Collection } from 'ckeditor5/src/utils';
-import { ReplaceCommandBase } from './replacecommandbase';
+import { Collection } from 'ckeditor5/src/utils.js';
+import { ReplaceCommandBase } from './replacecommandbase.js';
 /**
  * The replace all command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  */

package/src/replacecommand.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/replacecommand
 */
-import type { ResultType } from './findandreplace';
-import { ReplaceCommandBase } from './replacecommandbase';
+import type { ResultType } from './findandreplace.js';
+import { ReplaceCommandBase } from './replacecommandbase.js';
 /**
  * The replace command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  */

package/src/replacecommand.js

@@ -1,8 +1,8 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-import { ReplaceCommandBase } from './replacecommandbase';
+import { ReplaceCommandBase } from './replacecommandbase.js';
 /**
  * The replace command. It is used by the {@link module:find-and-replace/findandreplace~FindAndReplace find and replace feature}.
  */

package/src/replacecommandbase.d.ts

@@ -1,13 +1,13 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/replacecommandbase
 */
-import { Command, type Editor } from 'ckeditor5/src/core';
-import type { ResultType } from './findandreplace';
-import type FindAndReplaceState from './findandreplacestate';
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import type { ResultType } from './findandreplace.js';
+import type FindAndReplaceState from './findandreplacestate.js';
 export declare abstract class ReplaceCommandBase extends Command {
     /**
      * The find and replace state object used for command operations.

package/src/replacecommandbase.js

@@ -1,11 +1,11 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/replacecommandbase
 */
-import { Command } from 'ckeditor5/src/core';
+import { Command } from 'ckeditor5/src/core.js';
 export class ReplaceCommandBase extends Command {
     /**
      * Creates a new `ReplaceCommand` instance.

package/src/ui/findandreplaceformview.d.ts

@@ -1,12 +1,12 @@
 /**
- * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 /**
  * @module find-and-replace/ui/findandreplaceformview
  */
-import { View, LabeledFieldView, type InputView } from 'ckeditor5/src/ui';
-import { type Locale } from 'ckeditor5/src/utils';
+import { View, LabeledFieldView, FocusCycler, ViewCollection, type InputView } from 'ckeditor5/src/ui.js';
+import { type Locale } from 'ckeditor5/src/utils.js';
 import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';
 import '../../theme/findandreplaceform.css';
 /**
@@ -15,6 +15,10 @@ import '../../theme/findandreplaceform.css';
  * See {@link module:find-and-replace/ui/findandreplaceformview~FindAndReplaceFormView}.
  */
 export default class FindAndReplaceFormView extends View {
+    /**
+     * A collection of child views.
+     */
+    children: ViewCollection;
     /**
      * Stores the number of matched search results.
      *
@@ -115,9 +119,17 @@ export default class FindAndReplaceFormView extends View {
      */
     private readonly _findNextButtonView;
     /**
-     * The find options dropdown.
+     * A collapsible view aggregating the advanced search options.
+     */
+    private readonly _advancedOptionsCollapsibleView;
+    /**
+     * A switch button view controlling the "Match case" option.
      */
-    private readonly _optionsDropdown;
+    private readonly _matchCaseSwitchView;
+    /**
+     * A switch button view controlling the "Whole words only" option.
+     */
+    private readonly _wholeWordsOnlySwitchView;
     /**
      * The replace button view.
      */
@@ -127,13 +139,13 @@ export default class FindAndReplaceFormView extends View {
      */
     private readonly _replaceAllButtonView;
     /**
-     * The fieldset aggregating the find UI.
+     * The `div` aggregating the inputs.
      */
-    private readonly _findFieldsetView;
+    private readonly _inputsDivView;
     /**
-     * The fieldset aggregating the replace UI.
+     * The `div` aggregating the action buttons.
      */
-    private readonly _replaceFieldsetView;
+    private readonly _actionButtonsDivView;
     /**
      * Tracks information about the DOM focus in the form.
      */
@@ -149,7 +161,7 @@ export default class FindAndReplaceFormView extends View {
     /**
      * Helps cycling over {@link #_focusables} in the form.
      */
-    private readonly _focusCycler;
+    readonly focusCycler: FocusCycler;
     locale: Locale;
     /**
      * Creates a view of find and replace form.
@@ -166,9 +178,9 @@ export default class FindAndReplaceFormView extends View {
      */
     destroy(): void;
     /**
-     * Focuses the fist {@link #_focusables} in the form.
+     * @inheritDoc
      */
-    focus(): void;
+    focus(direction?: 1 | -1): void;
     /**
      * Resets the form before re-appearing.
      *
@@ -189,9 +201,9 @@ export default class FindAndReplaceFormView extends View {
      */
     private get _textToReplace();
     /**
-     * Configures and returns the `<fieldset>` aggregating all find controls.
+     * Configures and returns the `<div>` aggregating all form inputs.
      */
-    private _createFindFieldset;
+    private _createInputsDiv;
     /**
      * The action performed when the {@link #_findButtonView} is pressed.
      */
@@ -201,14 +213,23 @@ export default class FindAndReplaceFormView extends View {
      */
     private _injectFindResultsCounter;
     /**
-     * Configures and returns the `<fieldset>` aggregating all replace controls.
+     * Creates the collapsible view aggregating the advanced search options.
+     */
+    private _createAdvancedOptionsCollapsible;
+    /**
+     * Configures and returns the `<div>` element aggregating all form action buttons.
+     */
+    private _createActionButtonsDiv;
+    /**
+     * Creates, configures and returns and instance of a dropdown allowing users to narrow
+     * the search criteria down. The dropdown has a list with switch buttons for each option.
      */
-    private _createReplaceFieldset;
+    private _createMatchCaseSwitch;
     /**
      * Creates, configures and returns and instance of a dropdown allowing users to narrow
      * the search criteria down. The dropdown has a list with switch buttons for each option.
      */
-    private _createOptionsDropdown;
+    private _createWholeWordsOnlySwitch;
     /**
      * Initializes the {@link #_focusables} and {@link #_focusTracker} to allow navigation
      * using <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> keystrokes in the right order.