@gravity-ui/markdown-editor 15.25.0 → 15.27.0

package/build/esm/markup/codemirror/search-plugin/plugin.d.ts

@@ -13,23 +13,21 @@ export interface SearchPanelPluginParams {
 export declare const SearchPanelPlugin: (params: SearchPanelPluginParams) => ViewPlugin<{
     readonly view: EditorView;
     readonly params: SearchPanelPluginParams;
-    anchor: HTMLElement | null;
-    renderer: RendererItem | null;
-    searchConfig: SearchQueryConfig;
+    renderer: RendererItem;
     receiver: Receiver<EventMap> | undefined;
-    setViewSearchWithDelay: (config: Partial<SearchQueryConfig>) => void;
+    panelOpened: boolean;
+    searchState: SearchQuery | null;
     update(update: ViewUpdate): void;
     destroy(): void;
-    setViewSearch(config: Partial<SearchQueryConfig>): void;
+    createRenderer(): RendererItem;
     handleEditorModeChange({ mode }: {
         mode: MarkdownEditorMode;
     }): void;
-    handleChange(search: string): void;
+    handleChange(config: SearchQueryConfig): void;
     handleClose(): void;
     handleSearchNext(): void;
     handleSearchPrev(): void;
-    handleSearchConfigChange(config: Partial<SearchQueryConfig>): void;
-    handleReplaceNext(query: string, replacement: string): void;
-    handleReplaceAll(query: string, replacement: string): void;
+    handleReplaceNext(): void;
+    handleReplaceAll(): void;
 }>;
 export {};

package/build/esm/markup/codemirror/search-plugin/plugin.js

@@ -1,90 +1,83 @@
 import { SearchQuery, closeSearchPanel, findNext, findPrevious, getSearchQuery, replaceAll, replaceNext, search, searchKeymap, searchPanelOpen, setSearchQuery, } from '@codemirror/search';
 import { ViewPlugin, keymap, } from '@codemirror/view';
-import { debounce } from "../../../lodash.js";
+import { renderSearchPopup } from "../../../modules/search/index.js";
 import { ReactRendererFacet } from "../react-facet.js";
-import { renderSearchPopup } from "./view/SearchPopup.js";
-const INPUT_DELAY = 200;
+import { searchTheme } from "./theme.js";
 export const SearchPanelPlugin = (params) => ViewPlugin.fromClass(class {
     view;
     params;
-    anchor;
     renderer;
-    searchConfig = {
-        search: '',
-        caseSensitive: false,
-        wholeWord: false,
-        replace: '',
-    };
     receiver;
-    setViewSearchWithDelay;
+    panelOpened;
+    searchState;
     constructor(view) {
         this.view = view;
-        this.anchor = null;
-        this.renderer = null;
         this.params = params;
         this.receiver = params.receiver;
+        this.panelOpened = searchPanelOpen(view.state);
+        this.searchState = getSearchQuery(view.state);
+        this.renderer = this.createRenderer();
         this.handleClose = this.handleClose.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleSearchNext = this.handleSearchNext.bind(this);
         this.handleSearchPrev = this.handleSearchPrev.bind(this);
         this.handleReplaceNext = this.handleReplaceNext.bind(this);
         this.handleReplaceAll = this.handleReplaceAll.bind(this);
-        this.handleSearchConfigChange = this.handleSearchConfigChange.bind(this);
         this.handleEditorModeChange = this.handleEditorModeChange.bind(this);
-        this.setViewSearchWithDelay = debounce(this.setViewSearch, this.params.inputDelay ?? INPUT_DELAY);
         this.receiver?.on('change-editor-mode', this.handleEditorModeChange);
     }
     update(update) {
         const isPanelOpen = searchPanelOpen(update.state);
-        if (isPanelOpen && !this.renderer) {
-            const initial = getSearchQuery(update.state);
-            this.anchor = document.querySelector(this.params.anchorSelector);
-            this.renderer = this.view.state
-                .facet(ReactRendererFacet)
-                .createItem('cm-search', () => renderSearchPopup({
-                initial,
+        const searchQuery = getSearchQuery(update.state);
+        if (isPanelOpen !== this.panelOpened || searchQuery !== this.searchState) {
+            this.panelOpened = isPanelOpen;
+            this.searchState = searchQuery;
+            this.renderer.rerender();
+        }
+    }
+    destroy() {
+        this.renderer.remove();
+        this.receiver?.off('change-editor-mode', this.handleEditorModeChange);
+    }
+    createRenderer() {
+        return this.view.state.facet(ReactRendererFacet).createItem('cm-search', () => {
+            if (!this.panelOpened || !this.searchState)
+                return null;
+            const anchor = this.view.dom.ownerDocument.querySelector(this.params.anchorSelector);
+            if (!anchor)
+                return null;
+            return renderSearchPopup({
                 open: true,
-                anchor: this.anchor,
-                onChange: this.handleChange,
+                anchor: anchor,
+                state: this.searchState,
                 onClose: this.handleClose,
+                onChange: this.handleChange,
                 onSearchNext: this.handleSearchNext,
                 onSearchPrev: this.handleSearchPrev,
                 onReplaceNext: this.handleReplaceNext,
                 onReplaceAll: this.handleReplaceAll,
-                onConfigChange: this.handleSearchConfigChange,
-            }));
-        }
-        else if (!isPanelOpen && this.renderer) {
-            this.renderer?.remove();
-            this.renderer = null;
-        }
-    }
-    destroy() {
-        this.renderer?.remove();
-        this.renderer = null;
-        this.receiver?.off('change-editor-mode', this.handleEditorModeChange);
-    }
-    setViewSearch(config) {
-        this.searchConfig = {
-            ...this.searchConfig,
-            ...config,
-        };
-        const searchQuery = new SearchQuery({
-            ...this.searchConfig,
+            });
         });
-        this.view.dispatch({ effects: setSearchQuery.of(searchQuery) });
     }
     handleEditorModeChange({ mode }) {
         if (mode === 'wysiwyg') {
             closeSearchPanel(this.view);
         }
     }
-    handleChange(search) {
-        this.setViewSearchWithDelay({ search });
+    handleChange(config) {
+        this.view.dispatch({
+            effects: setSearchQuery.of(new SearchQuery({
+                search: config.search,
+                replace: config.replace,
+                caseSensitive: config.caseSensitive,
+                wholeWord: config.wholeWord,
+            })),
+        });
     }
     handleClose() {
-        this.setViewSearch({ search: '' });
+        this.handleChange({ search: '' });
         closeSearchPanel(this.view);
+        this.view.focus();
     }
     handleSearchNext() {
         findNext(this.view);
@@ -92,20 +85,16 @@ export const SearchPanelPlugin = (params) => ViewPlugin.fromClass(class {
     handleSearchPrev() {
         findPrevious(this.view);
     }
-    handleSearchConfigChange(config) {
-        this.setViewSearch(config);
-    }
-    handleReplaceNext(query, replacement) {
-        this.setViewSearch({ search: query, replace: replacement });
+    handleReplaceNext() {
         replaceNext(this.view);
     }
-    handleReplaceAll(query, replacement) {
-        this.setViewSearch({ search: query, replace: replacement });
+    handleReplaceAll() {
         replaceAll(this.view);
     }
 }, {
     provide: () => [
         keymap.of(searchKeymap),
+        searchTheme,
         search({
             createPanel: () => ({
                 // Create an empty search panel

package/build/esm/markup/codemirror/search-plugin/plugin.js.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.js","sourceRoot":"../../../../../src","sources":["markup/codemirror/search-plugin/plugin.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    SearchQuery,\n    closeSearchPanel,\n    findNext,\n    findPrevious,\n    getSearchQuery,\n    replaceAll,\n    replaceNext,\n    search,\n    searchKeymap,\n    searchPanelOpen,\n    setSearchQuery,\n} from '@codemirror/search';\nimport {\n    type EditorView,\n    type PluginValue,\n    ViewPlugin,\n    type ViewUpdate,\n    keymap,\n} from '@codemirror/view';\n\nimport type {MarkdownEditorMode} from '../../../bundle';\nimport type {EventMap} from '../../../bundle/Editor';\nimport type {RendererItem} from '../../../extensions';\nimport {debounce} from '../../../lodash';\nimport type {Receiver} from '../../../utils';\nimport {ReactRendererFacet} from '../react-facet';\n\nimport {renderSearchPopup} from './view/SearchPopup';\n\ntype SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];\n\nconst INPUT_DELAY = 200;\n\nexport interface SearchPanelPluginParams {\n    anchorSelector: string;\n    inputDelay?: number;\n    receiver?: Receiver<EventMap>;\n}\n\nexport const SearchPanelPlugin = (params: SearchPanelPluginParams) =>\n    ViewPlugin.fromClass(\n        class implements PluginValue {\n            readonly view: EditorView;\n            readonly params: SearchPanelPluginParams;\n\n            anchor: HTMLElement | null;\n            renderer: RendererItem | null;\n            searchConfig: SearchQueryConfig = {\n                search: '',\n                caseSensitive: false,\n                wholeWord: false,\n                replace: '',\n            };\n            receiver: Receiver<EventMap> | undefined;\n\n            setViewSearchWithDelay: (config: Partial<SearchQueryConfig>) => void;\n\n            constructor(view: EditorView) {\n                this.view = view;\n                this.anchor = null;\n                this.renderer = null;\n                this.params = params;\n                this.receiver = params.receiver;\n\n                this.handleClose = this.handleClose.bind(this);\n                this.handleChange = this.handleChange.bind(this);\n                this.handleSearchNext = this.handleSearchNext.bind(this);\n                this.handleSearchPrev = this.handleSearchPrev.bind(this);\n                this.handleReplaceNext = this.handleReplaceNext.bind(this);\n                this.handleReplaceAll = this.handleReplaceAll.bind(this);\n                this.handleSearchConfigChange = this.handleSearchConfigChange.bind(this);\n                this.handleEditorModeChange = this.handleEditorModeChange.bind(this);\n\n                this.setViewSearchWithDelay = debounce(\n                    this.setViewSearch,\n                    this.params.inputDelay ?? INPUT_DELAY,\n                );\n                this.receiver?.on('change-editor-mode', this.handleEditorModeChange);\n            }\n\n            update(update: ViewUpdate): void {\n                const isPanelOpen = searchPanelOpen(update.state);\n\n                if (isPanelOpen && !this.renderer) {\n                    const initial = getSearchQuery(update.state);\n                    this.anchor = document.querySelector(this.params.anchorSelector);\n                    this.renderer = this.view.state\n                        .facet(ReactRendererFacet)\n                        .createItem('cm-search', () =>\n                            renderSearchPopup({\n                                initial,\n                                open: true,\n                                anchor: this.anchor,\n                                onChange: this.handleChange,\n                                onClose: this.handleClose,\n                                onSearchNext: this.handleSearchNext,\n                                onSearchPrev: this.handleSearchPrev,\n                                onReplaceNext: this.handleReplaceNext,\n                                onReplaceAll: this.handleReplaceAll,\n                                onConfigChange: this.handleSearchConfigChange,\n                            }),\n                        );\n                } else if (!isPanelOpen && this.renderer) {\n                    this.renderer?.remove();\n                    this.renderer = null;\n                }\n            }\n\n            destroy() {\n                this.renderer?.remove();\n                this.renderer = null;\n                this.receiver?.off('change-editor-mode', this.handleEditorModeChange);\n            }\n\n            setViewSearch(config: Partial<SearchQueryConfig>) {\n                this.searchConfig = {\n                    ...this.searchConfig,\n                    ...config,\n                };\n                const searchQuery = new SearchQuery({\n                    ...this.searchConfig,\n                });\n\n                this.view.dispatch({effects: setSearchQuery.of(searchQuery)});\n            }\n\n            handleEditorModeChange({mode}: {mode: MarkdownEditorMode}) {\n                if (mode === 'wysiwyg') {\n                    closeSearchPanel(this.view);\n                }\n            }\n\n            handleChange(search: string) {\n                this.setViewSearchWithDelay({search});\n            }\n\n            handleClose() {\n                this.setViewSearch({search: ''});\n                closeSearchPanel(this.view);\n            }\n\n            handleSearchNext() {\n                findNext(this.view);\n            }\n\n            handleSearchPrev() {\n                findPrevious(this.view);\n            }\n\n            handleSearchConfigChange(config: Partial<SearchQueryConfig>) {\n                this.setViewSearch(config);\n            }\n\n            handleReplaceNext(query: string, replacement: string) {\n                this.setViewSearch({search: query, replace: replacement});\n                replaceNext(this.view);\n            }\n\n            handleReplaceAll(query: string, replacement: string) {\n                this.setViewSearch({search: query, replace: replacement});\n                replaceAll(this.view);\n            }\n        },\n        {\n            provide: () => [\n                keymap.of(searchKeymap),\n                search({\n                    createPanel: () => ({\n                        // Create an empty search panel\n                        dom: document.createElement('div'),\n                    }),\n                }),\n            ],\n        },\n    );\n"]}
+{"version":3,"file":"plugin.js","sourceRoot":"../../../../../src","sources":["markup/codemirror/search-plugin/plugin.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n    SearchQuery,\n    closeSearchPanel,\n    findNext,\n    findPrevious,\n    getSearchQuery,\n    replaceAll,\n    replaceNext,\n    search,\n    searchKeymap,\n    searchPanelOpen,\n    setSearchQuery,\n} from '@codemirror/search';\nimport {\n    type EditorView,\n    type PluginValue,\n    ViewPlugin,\n    type ViewUpdate,\n    keymap,\n} from '@codemirror/view';\n\nimport type {MarkdownEditorMode} from 'src/bundle';\nimport type {EventMap} from 'src/bundle/Editor';\nimport type {RendererItem} from 'src/extensions';\nimport {renderSearchPopup} from 'src/modules/search';\nimport type {Receiver} from 'src/utils';\n\nimport {ReactRendererFacet} from '../react-facet';\n\nimport {searchTheme} from './theme';\n\ntype SearchQueryConfig = ConstructorParameters<typeof SearchQuery>[0];\n\nexport interface SearchPanelPluginParams {\n    anchorSelector: string;\n    inputDelay?: number;\n    receiver?: Receiver<EventMap>;\n}\n\nexport const SearchPanelPlugin = (params: SearchPanelPluginParams) =>\n    ViewPlugin.fromClass(\n        class implements PluginValue {\n            readonly view: EditorView;\n            readonly params: SearchPanelPluginParams;\n\n            renderer: RendererItem;\n            receiver: Receiver<EventMap> | undefined;\n\n            panelOpened: boolean;\n            searchState: SearchQuery | null;\n\n            constructor(view: EditorView) {\n                this.view = view;\n                this.params = params;\n                this.receiver = params.receiver;\n\n                this.panelOpened = searchPanelOpen(view.state);\n                this.searchState = getSearchQuery(view.state);\n                this.renderer = this.createRenderer();\n\n                this.handleClose = this.handleClose.bind(this);\n                this.handleChange = this.handleChange.bind(this);\n                this.handleSearchNext = this.handleSearchNext.bind(this);\n                this.handleSearchPrev = this.handleSearchPrev.bind(this);\n                this.handleReplaceNext = this.handleReplaceNext.bind(this);\n                this.handleReplaceAll = this.handleReplaceAll.bind(this);\n                this.handleEditorModeChange = this.handleEditorModeChange.bind(this);\n\n                this.receiver?.on('change-editor-mode', this.handleEditorModeChange);\n            }\n\n            update(update: ViewUpdate): void {\n                const isPanelOpen = searchPanelOpen(update.state);\n                const searchQuery = getSearchQuery(update.state);\n\n                if (isPanelOpen !== this.panelOpened || searchQuery !== this.searchState) {\n                    this.panelOpened = isPanelOpen;\n                    this.searchState = searchQuery;\n                    this.renderer.rerender();\n                }\n            }\n\n            destroy() {\n                this.renderer.remove();\n                this.receiver?.off('change-editor-mode', this.handleEditorModeChange);\n            }\n\n            createRenderer() {\n                return this.view.state.facet(ReactRendererFacet).createItem('cm-search', () => {\n                    if (!this.panelOpened || !this.searchState) return null;\n\n                    const anchor = this.view.dom.ownerDocument.querySelector(\n                        this.params.anchorSelector,\n                    );\n\n                    if (!anchor) return null;\n\n                    return renderSearchPopup({\n                        open: true,\n                        anchor: anchor,\n                        state: this.searchState,\n                        onClose: this.handleClose,\n                        onChange: this.handleChange,\n                        onSearchNext: this.handleSearchNext,\n                        onSearchPrev: this.handleSearchPrev,\n                        onReplaceNext: this.handleReplaceNext,\n                        onReplaceAll: this.handleReplaceAll,\n                    });\n                });\n            }\n\n            handleEditorModeChange({mode}: {mode: MarkdownEditorMode}) {\n                if (mode === 'wysiwyg') {\n                    closeSearchPanel(this.view);\n                }\n            }\n\n            handleChange(config: SearchQueryConfig) {\n                this.view.dispatch({\n                    effects: setSearchQuery.of(\n                        new SearchQuery({\n                            search: config.search,\n                            replace: config.replace,\n                            caseSensitive: config.caseSensitive,\n                            wholeWord: config.wholeWord,\n                        }),\n                    ),\n                });\n            }\n\n            handleClose() {\n                this.handleChange({search: ''});\n                closeSearchPanel(this.view);\n                this.view.focus();\n            }\n\n            handleSearchNext() {\n                findNext(this.view);\n            }\n\n            handleSearchPrev() {\n                findPrevious(this.view);\n            }\n\n            handleReplaceNext() {\n                replaceNext(this.view);\n            }\n\n            handleReplaceAll() {\n                replaceAll(this.view);\n            }\n        },\n        {\n            provide: () => [\n                keymap.of(searchKeymap),\n                searchTheme,\n                search({\n                    createPanel: () => ({\n                        // Create an empty search panel\n                        dom: document.createElement('div'),\n                    }),\n                }),\n            ],\n        },\n    );\n"]}

package/build/esm/markup/codemirror/search-plugin/theme.d.ts

@@ -0,0 +1 @@
+export declare const searchTheme: import("@codemirror/state").Extension;

package/build/esm/markup/codemirror/search-plugin/theme.js

@@ -0,0 +1,12 @@
+import { EditorView } from "../../../cm/view.js";
+export const searchTheme = EditorView.baseTheme({
+    '&light, &dark': {
+        '& .cm-searchMatch': {
+            backgroundColor: 'var(--g-color-base-info-light)',
+        },
+        '& .cm-searchMatch-selected': {
+            backgroundColor: 'var(--g-color-base-info-heavy)',
+        },
+    },
+});
+//# sourceMappingURL=theme.js.map

package/build/esm/markup/codemirror/search-plugin/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"../../../../../src","sources":["markup/codemirror/search-plugin/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,4BAAiB;AAEpC,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CAAC,SAAS,CAAC;IAC5C,eAAe,EAAE;QACb,mBAAmB,EAAE;YACjB,eAAe,EAAE,gCAAgC;SACpD;QACD,4BAA4B,EAAE;YAC1B,eAAe,EAAE,gCAAgC;SACpD;KACJ;CACJ,CAAC,CAAC","sourcesContent":["import {EditorView} from '#cm/view';\n\nexport const searchTheme = EditorView.baseTheme({\n    '&light, &dark': {\n        '& .cm-searchMatch': {\n            backgroundColor: 'var(--g-color-base-info-light)',\n        },\n        '& .cm-searchMatch-selected': {\n            backgroundColor: 'var(--g-color-base-info-heavy)',\n        },\n    },\n});\n"]}

package/build/esm/modules/search/components/SearchCardView.css

@@ -0,0 +1,7 @@
+.g-md-search-card {
+  width: 428px;
+}
+.g-md-search-card__row.g-md-search-card__row {
+  --gc-form-row-label-width: 86px;
+  --gc-form-row-field-height: 36px;
+}

package/build/esm/modules/search/components/SearchCardView.d.ts

@@ -0,0 +1,17 @@
+import { type DOMProps } from '@gravity-ui/uikit';
+import type { SearchCounter, SearchState } from "../types.js";
+import "./SearchCardView.css";
+export type SearchCardViewProps = DOMProps & {
+    counter?: SearchCounter;
+    searchState: SearchState;
+    onClose: () => void;
+    onSearchChange: (value: string) => void;
+    onReplacementChange: (value: string) => void;
+    onFindPrevious: () => void;
+    onFindNext: () => void;
+    onReplace: () => void;
+    onReplaceAll: () => void;
+    onWholeWordChange: (value: boolean) => void;
+    onCaseSensitiveChange: (value: boolean) => void;
+};
+export declare const SearchCardView: React.FC<SearchCardViewProps>;

package/build/esm/modules/search/components/SearchCardView.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { DelayedTextInput, FormRow } from '@gravity-ui/components';
+import { Xmark } from '@gravity-ui/icons';
+import { Button, Card, Checkbox, Flex, Icon, Text, sp } from '@gravity-ui/uikit';
+import { cn } from "../../../classname.js";
+import { i18n } from "../../../i18n/search/index.js";
+import { useAutoFocus } from "../../../react-utils/useAutoFocus.js";
+import { SearchQA } from "../qa.js";
+import { SearchTextInput } from "./SearchTextInput.js";
+import "./SearchCardView.css";
+const b = cn('search-card');
+export const SearchCardView = ({ style, className, counter, searchState, onClose, onSearchChange, onReplacementChange, onFindPrevious, onFindNext, onReplace, onReplaceAll, onWholeWordChange, onCaseSensitiveChange, }) => {
+    const searchInputRef = useRef(null);
+    useAutoFocus(searchInputRef, [], 200);
+    return (_jsxs(Card, { size: "l", spacing: { pt: 4, pb: 5, pl: 5, pr: 5 }, style: style, className: b(null, className), children: [_jsxs(Flex, { spacing: { mb: 5 }, alignItems: "center", justifyContent: "space-between", className: b('header'), children: [_jsx(Text, { variant: "subheader-2", className: b('title'), children: i18n('title') }), _jsx(Button, { size: "m", view: "flat", onClick: onClose, "aria-label": i18n('action_close'), qa: SearchQA.CloseBtn, children: _jsx(Icon, { data: Xmark }) })] }), _jsxs(FormRow, { direction: "row", label: i18n('title_search'), className: b('row', sp({ mb: 4 })), children: [_jsx(SearchTextInput, { counter: counter, onFindNext: onFindNext, onFindPrevious: onFindPrevious, controlRef: searchInputRef, className: sp({ mb: 2 }), onUpdate: onSearchChange, value: searchState.search, delay: 300 }), _jsx(Checkbox, { size: "m", onUpdate: onCaseSensitiveChange, checked: searchState.caseSensitive, qa: SearchQA.CaseSensitiveCheck, className: sp({ mr: 4 }), children: i18n('label_case-sensitive') }), _jsx(Checkbox, { size: "m", checked: searchState.wholeWord, onUpdate: onWholeWordChange, qa: SearchQA.WholeWordCheck, children: i18n('label_whole-word') })] }), _jsx(FormRow, { direction: "row", label: i18n('title_replace'), className: b('row', sp({ mb: 5 })), children: _jsx(DelayedTextInput, { size: "l", delay: 300, value: searchState.replace, onUpdate: onReplacementChange, qa: SearchQA.ReplaceInput }) }), _jsxs(Flex, { justifyContent: "flex-end", gap: 2, className: b('footer'), children: [_jsx(Button, { size: "l", view: "normal", onClick: onReplaceAll, disabled: !searchState.search, qa: SearchQA.ReplaceAllBtn, children: i18n('action_replace_all') }), _jsx(Button, { view: "action", size: "l", disabled: !searchState.search, onClick: onReplace, qa: SearchQA.ReplaceBtn, children: i18n('action_replace') })] })] }));
+};
+//# sourceMappingURL=SearchCardView.js.map

package/build/esm/modules/search/components/SearchCardView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCardView.js","sourceRoot":"../../../../../src","sources":["modules/search/components/SearchCardView.tsx"],"names":[],"mappings":"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","sourcesContent":["import {useRef} from 'react';\n\nimport {DelayedTextInput, FormRow} from '@gravity-ui/components';\nimport {Xmark} from '@gravity-ui/icons';\nimport {Button, Card, Checkbox, type DOMProps, Flex, Icon, Text, sp} from '@gravity-ui/uikit';\n\nimport {cn} from 'src/classname';\nimport {i18n} from 'src/i18n/search';\nimport {useAutoFocus} from 'src/react-utils/useAutoFocus';\n\nimport {SearchQA} from '../qa';\nimport type {SearchCounter, SearchState} from '../types';\n\nimport {SearchTextInput} from './SearchTextInput';\n\nimport './SearchCardView.scss';\n\nexport type SearchCardViewProps = DOMProps & {\n    counter?: SearchCounter;\n    searchState: SearchState;\n    onClose: () => void;\n    onSearchChange: (value: string) => void;\n    onReplacementChange: (value: string) => void;\n    onFindPrevious: () => void;\n    onFindNext: () => void;\n    onReplace: () => void;\n    onReplaceAll: () => void;\n    onWholeWordChange: (value: boolean) => void;\n    onCaseSensitiveChange: (value: boolean) => void;\n};\n\nconst b = cn('search-card');\n\nexport const SearchCardView: React.FC<SearchCardViewProps> = ({\n    style,\n    className,\n\n    counter,\n    searchState,\n    onClose,\n    onSearchChange,\n    onReplacementChange,\n    onFindPrevious,\n    onFindNext,\n    onReplace,\n    onReplaceAll,\n    onWholeWordChange,\n    onCaseSensitiveChange,\n}) => {\n    const searchInputRef = useRef<HTMLInputElement>(null);\n\n    useAutoFocus(searchInputRef, [], 200);\n\n    return (\n        <Card\n            size=\"l\"\n            spacing={{pt: 4, pb: 5, pl: 5, pr: 5}}\n            style={style}\n            className={b(null, className)}\n        >\n            <Flex\n                spacing={{mb: 5}}\n                alignItems=\"center\"\n                justifyContent=\"space-between\"\n                className={b('header')}\n            >\n                <Text variant=\"subheader-2\" className={b('title')}>\n                    {i18n('title')}\n                </Text>\n                <Button\n                    size=\"m\"\n                    view=\"flat\"\n                    onClick={onClose}\n                    aria-label={i18n('action_close')}\n                    qa={SearchQA.CloseBtn}\n                >\n                    <Icon data={Xmark} />\n                </Button>\n            </Flex>\n\n            <FormRow direction=\"row\" label={i18n('title_search')} className={b('row', sp({mb: 4}))}>\n                <SearchTextInput\n                    counter={counter}\n                    onFindNext={onFindNext}\n                    onFindPrevious={onFindPrevious}\n                    controlRef={searchInputRef}\n                    className={sp({mb: 2})}\n                    onUpdate={onSearchChange}\n                    value={searchState.search}\n                    delay={300}\n                />\n\n                <Checkbox\n                    size=\"m\"\n                    onUpdate={onCaseSensitiveChange}\n                    checked={searchState.caseSensitive}\n                    qa={SearchQA.CaseSensitiveCheck}\n                    className={sp({mr: 4})}\n                >\n                    {i18n('label_case-sensitive')}\n                </Checkbox>\n\n                <Checkbox\n                    size=\"m\"\n                    checked={searchState.wholeWord}\n                    onUpdate={onWholeWordChange}\n                    qa={SearchQA.WholeWordCheck}\n                >\n                    {i18n('label_whole-word')}\n                </Checkbox>\n            </FormRow>\n\n            <FormRow\n                direction=\"row\"\n                label={i18n('title_replace')}\n                className={b('row', sp({mb: 5}))}\n            >\n                <DelayedTextInput\n                    size=\"l\"\n                    delay={300}\n                    value={searchState.replace}\n                    onUpdate={onReplacementChange}\n                    qa={SearchQA.ReplaceInput}\n                />\n            </FormRow>\n\n            <Flex justifyContent=\"flex-end\" gap={2} className={b('footer')}>\n                <Button\n                    size=\"l\"\n                    view=\"normal\"\n                    onClick={onReplaceAll}\n                    disabled={!searchState.search}\n                    qa={SearchQA.ReplaceAllBtn}\n                >\n                    {i18n('action_replace_all')}\n                </Button>\n                <Button\n                    view=\"action\"\n                    size=\"l\"\n                    disabled={!searchState.search}\n                    onClick={onReplace}\n                    qa={SearchQA.ReplaceBtn}\n                >\n                    {i18n('action_replace')}\n                </Button>\n            </Flex>\n        </Card>\n    );\n};\n"]}

package/build/esm/modules/search/components/SearchCompactView.css

@@ -0,0 +1,5 @@
+.g-md-search-compact {
+  display: flex;
+  align-items: center;
+  width: 428px;
+}

package/build/esm/modules/search/components/SearchCompactView.d.ts

@@ -0,0 +1,13 @@
+import { type DOMProps, type QAProps } from '@gravity-ui/uikit';
+import type { SearchCounter } from "../types.js";
+import "./SearchCompactView.css";
+export type SearchCompactProps = DOMProps & QAProps & {
+    value: string;
+    counter?: SearchCounter;
+    onChange: (value: string) => void;
+    onFindPrevious: () => void;
+    onFindNext: () => void;
+    onExpand: () => void;
+    onClose: () => void;
+};
+export declare const SeachCompactView: React.FC<SearchCompactProps>;

package/build/esm/modules/search/components/SearchCompactView.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { ChevronsExpandUpRight, Xmark } from '@gravity-ui/icons';
+import { Button, ButtonIcon, Card, Icon, Tooltip, sp, } from '@gravity-ui/uikit';
+import { cn } from "../../../classname.js";
+import { i18n } from "../../../i18n/search/index.js";
+import { useAutoFocus } from "../../../react-utils/useAutoFocus.js";
+import { SearchQA } from "../qa.js";
+import { SearchTextInput } from "./SearchTextInput.js";
+import "./SearchCompactView.css";
+const b = cn('search-compact');
+export const SeachCompactView = function SearchCompactView({ value, counter, onChange, onFindNext, onFindPrevious, onExpand, onClose, qa, style, className, }) {
+    const inputRef = useRef(null);
+    useAutoFocus(inputRef, [], 200);
+    return (_jsxs(Card, { spacing: { pr: 1 }, "data-qa": qa, style: style, className: b(null, className), children: [_jsx(SearchTextInput, { counter: counter, onFindNext: onFindNext, onFindPrevious: onFindPrevious, value: value, view: "clear", delay: 300, onUpdate: onChange, controlRef: inputRef, placeholder: i18n('search_placeholder'), className: sp({ pl: 3 }) }), _jsx("div", { className: sp({ mr: 1 }), style: {
+                    flexShrink: 0,
+                    background: 'var(--g-color-line-generic-solid)',
+                    height: '36px',
+                    width: '1px',
+                } }), _jsx(Tooltip, { content: i18n('action_expand'), role: "label", children: (props, ref) => (_jsx(Button, { ...props, size: "m", view: "flat-secondary", onClick: onExpand, qa: SearchQA.ExpandBtn, ref: ref, "aria-label": i18n('action_expand'), children: _jsx(ButtonIcon, { children: _jsx(Icon, { data: ChevronsExpandUpRight }) }) })) }), _jsx(Button, { size: "m", view: "flat-secondary", onClick: onClose, className: sp({ ml: 1 }), "aria-label": i18n('action_close'), qa: SearchQA.CloseBtn, children: _jsx(ButtonIcon, { children: _jsx(Icon, { data: Xmark }) }) })] }));
+};
+//# sourceMappingURL=SearchCompactView.js.map

package/build/esm/modules/search/components/SearchCompactView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCompactView.js","sourceRoot":"../../../../../src","sources":["modules/search/components/SearchCompactView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,OAAO,CAAC;AAE7B,OAAO,EAAC,qBAAqB,EAAE,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EACH,MAAM,EACN,UAAU,EACV,IAAI,EAEJ,IAAI,EAEJ,OAAO,EACP,EAAE,GACL,MAAM,mBAAmB,CAAC;AAE3B,OAAO,EAAC,EAAE,EAAC,8BAAsB;AACjC,OAAO,EAAC,IAAI,EAAC,sCAAwB;AACrC,OAAO,EAAC,YAAY,EAAC,6CAAqC;AAE1D,OAAO,EAAC,QAAQ,EAAC,iBAAc;AAG/B,OAAO,EAAC,eAAe,EAAC,6BAA0B;AAElD,iCAAkC;AAElC,MAAM,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,CAAC;AAa/B,MAAM,CAAC,MAAM,gBAAgB,GAAiC,SAAS,iBAAiB,CAAC,EACrF,KAAK,EACL,OAAO,EAEP,QAAQ,EACR,UAAU,EACV,cAAc,EACd,QAAQ,EACR,OAAO,EAEP,EAAE,EACF,KAAK,EACL,SAAS,GACZ;IACG,MAAM,QAAQ,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAC;IAEhD,YAAY,CAAC,QAAQ,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;IAEhC,OAAO,CACH,MAAC,IAAI,IAAC,OAAO,EAAE,EAAC,EAAE,EAAE,CAAC,EAAC,aAAW,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,aAC5E,KAAC,eAAe,IACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,GAAG,EACV,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,QAAQ,EACpB,WAAW,EAAE,IAAI,CAAC,oBAAoB,CAAC,EACvC,SAAS,EAAE,EAAE,CAAC,EAAC,EAAE,EAAE,CAAC,EAAC,CAAC,GACxB,EAEF,cACI,SAAS,EAAE,EAAE,CAAC,EAAC,EAAE,EAAE,CAAC,EAAC,CAAC,EACtB,KAAK,EAAE;oBACH,UAAU,EAAE,CAAC;oBACb,UAAU,EAAE,mCAAmC;oBAC/C,MAAM,EAAE,MAAM;oBACd,KAAK,EAAE,KAAK;iBACf,GACH,EAGF,KAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,EAAE,IAAI,EAAC,OAAO,YAChD,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACb,KAAC,MAAM,OACC,KAAK,EACT,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,QAAQ,EACjB,EAAE,EAAE,QAAQ,CAAC,SAAS,EACtB,GAAG,EAAE,GAAmC,gBAC5B,IAAI,CAAC,eAAe,CAAC,YAEjC,KAAC,UAAU,cACP,KAAC,IAAI,IAAC,IAAI,EAAE,qBAAqB,GAAI,GAC5B,GACR,CACZ,GACK,EACV,KAAC,MAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,EAAE,CAAC,EAAC,EAAE,EAAE,CAAC,EAAC,CAAC,gBACV,IAAI,CAAC,cAAc,CAAC,EAChC,EAAE,EAAE,QAAQ,CAAC,QAAQ,YAErB,KAAC,UAAU,cACP,KAAC,IAAI,IAAC,IAAI,EAAE,KAAK,GAAI,GACZ,GACR,IACN,CACV,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useRef} from 'react';\n\nimport {ChevronsExpandUpRight, Xmark} from '@gravity-ui/icons';\nimport {\n    Button,\n    ButtonIcon,\n    Card,\n    type DOMProps,\n    Icon,\n    type QAProps,\n    Tooltip,\n    sp,\n} from '@gravity-ui/uikit';\n\nimport {cn} from 'src/classname';\nimport {i18n} from 'src/i18n/search';\nimport {useAutoFocus} from 'src/react-utils/useAutoFocus';\n\nimport {SearchQA} from '../qa';\nimport type {SearchCounter} from '../types';\n\nimport {SearchTextInput} from './SearchTextInput';\n\nimport './SearchCompactView.scss';\n\nconst b = cn('search-compact');\n\nexport type SearchCompactProps = DOMProps &\n    QAProps & {\n        value: string;\n        counter?: SearchCounter;\n        onChange: (value: string) => void;\n        onFindPrevious: () => void;\n        onFindNext: () => void;\n        onExpand: () => void;\n        onClose: () => void;\n    };\n\nexport const SeachCompactView: React.FC<SearchCompactProps> = function SearchCompactView({\n    value,\n    counter,\n\n    onChange,\n    onFindNext,\n    onFindPrevious,\n    onExpand,\n    onClose,\n\n    qa,\n    style,\n    className,\n}) {\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    useAutoFocus(inputRef, [], 200);\n\n    return (\n        <Card spacing={{pr: 1}} data-qa={qa} style={style} className={b(null, className)}>\n            <SearchTextInput\n                counter={counter}\n                onFindNext={onFindNext}\n                onFindPrevious={onFindPrevious}\n                value={value}\n                view=\"clear\"\n                delay={300}\n                onUpdate={onChange}\n                controlRef={inputRef}\n                placeholder={i18n('search_placeholder')}\n                className={sp({pl: 3})}\n            />\n\n            <div\n                className={sp({mr: 1})}\n                style={{\n                    flexShrink: 0,\n                    background: 'var(--g-color-line-generic-solid)',\n                    height: '36px',\n                    width: '1px',\n                }}\n            />\n\n            {/* eslint-disable-next-line jsx-a11y/aria-role */}\n            <Tooltip content={i18n('action_expand')} role=\"label\">\n                {(props, ref) => (\n                    <Button\n                        {...props}\n                        size=\"m\"\n                        view=\"flat-secondary\"\n                        onClick={onExpand}\n                        qa={SearchQA.ExpandBtn}\n                        ref={ref as React.Ref<HTMLButtonElement>}\n                        aria-label={i18n('action_expand')}\n                    >\n                        <ButtonIcon>\n                            <Icon data={ChevronsExpandUpRight} />\n                        </ButtonIcon>\n                    </Button>\n                )}\n            </Tooltip>\n            <Button\n                size=\"m\"\n                view=\"flat-secondary\"\n                onClick={onClose}\n                className={sp({ml: 1})}\n                aria-label={i18n('action_close')}\n                qa={SearchQA.CloseBtn}\n            >\n                <ButtonIcon>\n                    <Icon data={Xmark} />\n                </ButtonIcon>\n            </Button>\n        </Card>\n    );\n};\n"]}

package/build/esm/modules/search/components/SearchCounter.d.ts

@@ -0,0 +1,6 @@
+import { type DOMProps } from '@gravity-ui/uikit';
+import type { SearchCounter } from "../types.js";
+export type SearchCounterProps = DOMProps & {
+    counter: SearchCounter;
+};
+export declare const SearchCounterText: React.FC<SearchCounterProps>;

package/build/esm/modules/search/components/SearchCounter.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@gravity-ui/uikit';
+import { i18n } from "../../../i18n/search/index.js";
+import { SearchQA } from "../qa.js";
+export const SearchCounterText = ({ counter, style, className }) => {
+    return (_jsx(Text, { whiteSpace: "nowrap", style: style, className: className, qa: SearchQA.Counter, children: i18n('search_counter', {
+            current: String(counter.current),
+            total: String(counter.total),
+        }) }));
+};
+//# sourceMappingURL=SearchCounter.js.map

package/build/esm/modules/search/components/SearchCounter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCounter.js","sourceRoot":"../../../../../src","sources":["modules/search/components/SearchCounter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAgB,IAAI,EAAC,MAAM,mBAAmB,CAAC;AAEtD,OAAO,EAAC,IAAI,EAAC,sCAAwB;AAErC,OAAO,EAAC,QAAQ,EAAC,iBAAc;AAO/B,MAAM,CAAC,MAAM,iBAAiB,GAAiC,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAC,EAAE,EAAE;IAC3F,OAAO,CACH,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE,QAAQ,CAAC,OAAO,YAC7E,IAAI,CAAC,gBAAgB,EAAE;YACpB,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;YAChC,KAAK,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;SAC/B,CAAC,GACC,CACV,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {type DOMProps, Text} from '@gravity-ui/uikit';\n\nimport {i18n} from 'src/i18n/search';\n\nimport {SearchQA} from '../qa';\nimport type {SearchCounter} from '../types';\n\nexport type SearchCounterProps = DOMProps & {\n    counter: SearchCounter;\n};\n\nexport const SearchCounterText: React.FC<SearchCounterProps> = ({counter, style, className}) => {\n    return (\n        <Text whiteSpace=\"nowrap\" style={style} className={className} qa={SearchQA.Counter}>\n            {i18n('search_counter', {\n                current: String(counter.current),\n                total: String(counter.total),\n            })}\n        </Text>\n    );\n};\n"]}

package/build/esm/modules/search/components/SearchPopup.css

@@ -0,0 +1,9 @@
+.g-md-search-popup {
+  --g-popup-border-width: 0;
+  --g-popup-border-radius: 16px;
+  border-radius: 16px;
+}
+.g-md-search-popup_compact {
+  --g-popup-border-radius: var(--g-border-radius-l);
+  border-radius: var(--g-border-radius-l);
+}

package/build/esm/modules/search/components/SearchPopup.d.ts

@@ -0,0 +1,15 @@
+import { type UseSearchProps } from "../hooks/use-search.js";
+import type { SearchCounter } from "../types.js";
+import "./SearchPopup.css";
+export type SearchPopupProps = UseSearchProps & {
+    open: boolean;
+    anchor: Element;
+    counter?: SearchCounter;
+    onClose: () => void;
+};
+export declare const SearchPopup: React.FC<SearchPopupProps>;
+interface SearchPopupWithRefProps extends Omit<SearchPopupProps, 'anchor'> {
+    anchor: Element | null;
+}
+export declare function renderSearchPopup({ anchor, ...props }: SearchPopupWithRefProps): JSX.Element | null;
+export {};

package/build/esm/modules/search/components/SearchPopup.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popup } from '@gravity-ui/uikit';
+import { cn } from "../../../classname.js";
+import { useSearch } from "../hooks/use-search.js";
+import { SearchQA } from "../qa.js";
+import { SearchCardView } from "./SearchCardView.js";
+import { SeachCompactView } from "./SearchCompactView.js";
+import "./SearchPopup.css";
+const b = cn('search-popup');
+export const SearchPopup = ({ open, anchor, counter, onClose, ...props }) => {
+    const { isCompact, searchState, handlers } = useSearch(props);
+    return (_jsx(Popup, { open: open, qa: SearchQA.Panel, anchorElement: anchor, placement: "bottom-end", className: b({ compact: isCompact }), onOpenChange: (_open, _event, reason) => {
+            if (reason === 'escape-key') {
+                onClose();
+            }
+        }, children: isCompact ? (_jsx(SeachCompactView, { counter: counter, onClose: onClose, value: searchState.search, onExpand: handlers.onExpand, onChange: handlers.onSearchChange, onFindNext: handlers.onFindNext, onFindPrevious: handlers.onFindPrevious })) : (_jsx(SearchCardView, { counter: counter, onClose: onClose, searchState: searchState, onSearchChange: handlers.onSearchChange, onReplacementChange: handlers.onReplaceChange, onFindNext: handlers.onFindNext, onFindPrevious: handlers.onFindPrevious, onReplace: handlers.onReplace, onReplaceAll: handlers.onReplaceAll, onWholeWordChange: handlers.onWholeWordChange, onCaseSensitiveChange: handlers.onCaseSensitiveChange })) }));
+};
+SearchPopup.displayName = 'SearchPopup';
+export function renderSearchPopup({ anchor, ...props }) {
+    if (!anchor)
+        return null;
+    return _jsx(SearchPopup, { anchor: anchor, ...props });
+}
+//# sourceMappingURL=SearchPopup.js.map

package/build/esm/modules/search/components/SearchPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchPopup.js","sourceRoot":"../../../../../src","sources":["modules/search/components/SearchPopup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,mBAAmB,CAAC;AAExC,OAAO,EAAC,EAAE,EAAC,8BAAsB;AAEjC,OAAO,EAAsB,SAAS,EAAC,+BAA4B;AACnE,OAAO,EAAC,QAAQ,EAAC,iBAAc;AAG/B,OAAO,EAAC,cAAc,EAAC,4BAAyB;AAChD,OAAO,EAAC,gBAAgB,EAAC,+BAA4B;AAErD,2BAA4B;AAE5B,MAAM,CAAC,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC;AAS7B,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EACpD,IAAI,EACJ,MAAM,EACN,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACX,EAAE,EAAE;IACD,MAAM,EAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAAC;IAE5D,OAAO,CACH,KAAC,KAAK,IACF,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,QAAQ,CAAC,KAAK,EAClB,aAAa,EAAE,MAAM,EACrB,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,SAAS,EAAC,CAAC,EAClC,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE;YACpC,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;gBAC1B,OAAO,EAAE,CAAC;YACd,CAAC;QACL,CAAC,YAEA,SAAS,CAAC,CAAC,CAAC,CACT,KAAC,gBAAgB,IACb,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,WAAW,CAAC,MAAM,EACzB,QAAQ,EAAE,QAAQ,CAAC,QAAQ,EAC3B,QAAQ,EAAE,QAAQ,CAAC,cAAc,EACjC,UAAU,EAAE,QAAQ,CAAC,UAAU,EAC/B,cAAc,EAAE,QAAQ,CAAC,cAAc,GACzC,CACL,CAAC,CAAC,CAAC,CACA,KAAC,cAAc,IACX,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,QAAQ,CAAC,cAAc,EACvC,mBAAmB,EAAE,QAAQ,CAAC,eAAe,EAC7C,UAAU,EAAE,QAAQ,CAAC,UAAU,EAC/B,cAAc,EAAE,QAAQ,CAAC,cAAc,EACvC,SAAS,EAAE,QAAQ,CAAC,SAAS,EAC7B,YAAY,EAAE,QAAQ,CAAC,YAAY,EACnC,iBAAiB,EAAE,QAAQ,CAAC,iBAAiB,EAC7C,qBAAqB,EAAE,QAAQ,CAAC,qBAAqB,GACvD,CACL,GACG,CACX,CAAC;AACN,CAAC,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAMxC,MAAM,UAAU,iBAAiB,CAAC,EAAC,MAAM,EAAE,GAAG,KAAK,EAA0B;IACzE,IAAI,CAAC,MAAM;QAAE,OAAO,IAAI,CAAC;IAEzB,OAAO,KAAC,WAAW,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAC;AACtD,CAAC","sourcesContent":["import {Popup} from '@gravity-ui/uikit';\n\nimport {cn} from 'src/classname';\n\nimport {type UseSearchProps, useSearch} from '../hooks/use-search';\nimport {SearchQA} from '../qa';\nimport type {SearchCounter} from '../types';\n\nimport {SearchCardView} from './SearchCardView';\nimport {SeachCompactView} from './SearchCompactView';\n\nimport './SearchPopup.scss';\n\nconst b = cn('search-popup');\n\nexport type SearchPopupProps = UseSearchProps & {\n    open: boolean;\n    anchor: Element;\n    counter?: SearchCounter;\n    onClose: () => void;\n};\n\nexport const SearchPopup: React.FC<SearchPopupProps> = ({\n    open,\n    anchor,\n    counter,\n    onClose,\n    ...props\n}) => {\n    const {isCompact, searchState, handlers} = useSearch(props);\n\n    return (\n        <Popup\n            open={open}\n            qa={SearchQA.Panel}\n            anchorElement={anchor}\n            placement=\"bottom-end\"\n            className={b({compact: isCompact})}\n            onOpenChange={(_open, _event, reason) => {\n                if (reason === 'escape-key') {\n                    onClose();\n                }\n            }}\n        >\n            {isCompact ? (\n                <SeachCompactView\n                    counter={counter}\n                    onClose={onClose}\n                    value={searchState.search}\n                    onExpand={handlers.onExpand}\n                    onChange={handlers.onSearchChange}\n                    onFindNext={handlers.onFindNext}\n                    onFindPrevious={handlers.onFindPrevious}\n                />\n            ) : (\n                <SearchCardView\n                    counter={counter}\n                    onClose={onClose}\n                    searchState={searchState}\n                    onSearchChange={handlers.onSearchChange}\n                    onReplacementChange={handlers.onReplaceChange}\n                    onFindNext={handlers.onFindNext}\n                    onFindPrevious={handlers.onFindPrevious}\n                    onReplace={handlers.onReplace}\n                    onReplaceAll={handlers.onReplaceAll}\n                    onWholeWordChange={handlers.onWholeWordChange}\n                    onCaseSensitiveChange={handlers.onCaseSensitiveChange}\n                />\n            )}\n        </Popup>\n    );\n};\n\nSearchPopup.displayName = 'SearchPopup';\n\ninterface SearchPopupWithRefProps extends Omit<SearchPopupProps, 'anchor'> {\n    anchor: Element | null;\n}\n\nexport function renderSearchPopup({anchor, ...props}: SearchPopupWithRefProps) {\n    if (!anchor) return null;\n\n    return <SearchPopup anchor={anchor} {...props} />;\n}\n"]}

package/build/esm/modules/search/components/SearchTextInput.d.ts

@@ -0,0 +1,10 @@
+import { DelayedTextInput } from '@gravity-ui/components';
+import type { SearchCounter } from "../types.js";
+type DelayedTextInputProps = React.ComponentProps<typeof DelayedTextInput>;
+export type SearchTextInputProps = DelayedTextInputProps & {
+    counter?: SearchCounter;
+    onFindNext: () => void;
+    onFindPrevious: () => void;
+};
+export declare const SearchTextInput: React.FC<SearchTextInputProps>;
+export {};

package/build/esm/modules/search/components/SearchTextInput.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { DelayedTextInput } from '@gravity-ui/components';
+import { ChevronDown, ChevronUp } from '@gravity-ui/icons';
+import { Button, ButtonIcon, Icon, sp } from '@gravity-ui/uikit';
+import { i18n } from "../../../i18n/search/index.js";
+import { SearchQA } from "../qa.js";
+import { SearchCounterText } from "./SearchCounter.js";
+export const SearchTextInput = function SearchTextInput({ counter, onFindNext, onFindPrevious, ...inputProps }) {
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Enter') {
+            if (event.shiftKey)
+                onFindPrevious();
+            else
+                onFindNext();
+        }
+    }, [onFindNext, onFindPrevious]);
+    return (_jsx(DelayedTextInput, { size: "l", qa: SearchQA.FindInput, onKeyDown: handleKeyDown, endContent: Boolean(inputProps.value) && (_jsxs(_Fragment, { children: [counter && _jsx(SearchCounterText, { counter: counter, className: sp({ px: 1 }) }), _jsx(Button, { size: "m", view: "flat-secondary", onClick: onFindPrevious, "aria-label": i18n('action_prev'), qa: SearchQA.PrevBtn, children: _jsx(ButtonIcon, { children: _jsx(Icon, { data: ChevronUp }) }) }), _jsx(Button, { size: "m", view: "flat-secondary", onClick: onFindNext, className: sp({ ml: 1 }), "aria-label": i18n('action_next'), qa: SearchQA.NextBtn, children: _jsx(ButtonIcon, { children: _jsx(Icon, { data: ChevronDown }) }) })] })), ...inputProps }));
+};
+//# sourceMappingURL=SearchTextInput.js.map

package/build/esm/modules/search/components/SearchTextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchTextInput.js","sourceRoot":"../../../../../src","sources":["modules/search/components/SearchTextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,OAAO,CAAC;AAElC,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAC,WAAW,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,EAAE,EAAC,MAAM,mBAAmB,CAAC;AAE/D,OAAO,EAAC,IAAI,EAAC,sCAAwB;AAErC,OAAO,EAAC,QAAQ,EAAC,iBAAc;AAG/B,OAAO,EAAC,iBAAiB,EAAC,2BAAwB;AAUlD,MAAM,CAAC,MAAM,eAAe,GAAmC,SAAS,eAAe,CAAC,EACpF,OAAO,EACP,UAAU,EACV,cAAc,EACd,GAAG,UAAU,EAChB;IACG,MAAM,aAAa,GAAG,WAAW,CAC7B,CAAC,KAAK,EAAE,EAAE;QACN,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACxB,IAAI,KAAK,CAAC,QAAQ;gBAAE,cAAc,EAAE,CAAC;;gBAChC,UAAU,EAAE,CAAC;QACtB,CAAC;IACL,CAAC,EACD,CAAC,UAAU,EAAE,cAAc,CAAC,CAC/B,CAAC;IAEF,OAAO,CACH,KAAC,gBAAgB,IACb,IAAI,EAAC,GAAG,EACR,EAAE,EAAE,QAAQ,CAAC,SAAS,EACtB,SAAS,EAAE,aAAa,EACxB,UAAU,EACN,OAAO,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CACzB,8BACK,OAAO,IAAI,KAAC,iBAAiB,IAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,EAAE,CAAC,EAAC,EAAE,EAAE,CAAC,EAAC,CAAC,GAAI,EAC3E,KAAC,MAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,cAAc,gBACX,IAAI,CAAC,aAAa,CAAC,EAC/B,EAAE,EAAE,QAAQ,CAAC,OAAO,YAEpB,KAAC,UAAU,cACP,KAAC,IAAI,IAAC,IAAI,EAAE,SAAS,GAAI,GAChB,GACR,EACT,KAAC,MAAM,IACH,IAAI,EAAC,GAAG,EACR,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,EAAE,CAAC,EAAC,EAAE,EAAE,CAAC,EAAC,CAAC,gBACV,IAAI,CAAC,aAAa,CAAC,EAC/B,EAAE,EAAE,QAAQ,CAAC,OAAO,YAEpB,KAAC,UAAU,cACP,KAAC,IAAI,IAAC,IAAI,EAAE,WAAW,GAAI,GAClB,GACR,IACV,CACN,KAED,UAAU,GAChB,CACL,CAAC;AACN,CAAC,CAAC","sourcesContent":["import {useCallback} from 'react';\n\nimport {DelayedTextInput} from '@gravity-ui/components';\nimport {ChevronDown, ChevronUp} from '@gravity-ui/icons';\nimport {Button, ButtonIcon, Icon, sp} from '@gravity-ui/uikit';\n\nimport {i18n} from 'src/i18n/search';\n\nimport {SearchQA} from '../qa';\nimport type {SearchCounter} from '../types';\n\nimport {SearchCounterText} from './SearchCounter';\n\ntype DelayedTextInputProps = React.ComponentProps<typeof DelayedTextInput>;\n\nexport type SearchTextInputProps = DelayedTextInputProps & {\n    counter?: SearchCounter;\n    onFindNext: () => void;\n    onFindPrevious: () => void;\n};\n\nexport const SearchTextInput: React.FC<SearchTextInputProps> = function SearchTextInput({\n    counter,\n    onFindNext,\n    onFindPrevious,\n    ...inputProps\n}) {\n    const handleKeyDown = useCallback<React.KeyboardEventHandler>(\n        (event) => {\n            if (event.key === 'Enter') {\n                if (event.shiftKey) onFindPrevious();\n                else onFindNext();\n            }\n        },\n        [onFindNext, onFindPrevious],\n    );\n\n    return (\n        <DelayedTextInput\n            size=\"l\"\n            qa={SearchQA.FindInput}\n            onKeyDown={handleKeyDown}\n            endContent={\n                Boolean(inputProps.value) && (\n                    <>\n                        {counter && <SearchCounterText counter={counter} className={sp({px: 1})} />}\n                        <Button\n                            size=\"m\"\n                            view=\"flat-secondary\"\n                            onClick={onFindPrevious}\n                            aria-label={i18n('action_prev')}\n                            qa={SearchQA.PrevBtn}\n                        >\n                            <ButtonIcon>\n                                <Icon data={ChevronUp} />\n                            </ButtonIcon>\n                        </Button>\n                        <Button\n                            size=\"m\"\n                            view=\"flat-secondary\"\n                            onClick={onFindNext}\n                            className={sp({ml: 1})}\n                            aria-label={i18n('action_next')}\n                            qa={SearchQA.NextBtn}\n                        >\n                            <ButtonIcon>\n                                <Icon data={ChevronDown} />\n                            </ButtonIcon>\n                        </Button>\n                    </>\n                )\n            }\n            {...inputProps}\n        />\n    );\n};\n"]}

package/build/esm/modules/search/hooks/use-search.d.ts

@@ -0,0 +1,24 @@
+import type { SearchState } from "../types.js";
+export type UseSearchProps = {
+    state: SearchState;
+    onChange: (config: SearchState) => void;
+    onSearchPrev: (config: SearchState) => void;
+    onSearchNext: (config: SearchState) => void;
+    onReplaceNext: (config: SearchState) => void;
+    onReplaceAll: (config: SearchState) => void;
+};
+export declare function useSearch({ state, onChange, onSearchPrev, onSearchNext, onReplaceNext, onReplaceAll, }: UseSearchProps): {
+    isCompact: boolean;
+    searchState: SearchState;
+    handlers: {
+        onExpand: () => void;
+        onSearchChange: (value: string) => void;
+        onReplaceChange: (value: string) => void;
+        onWholeWordChange: (val: boolean) => void;
+        onCaseSensitiveChange: (val: boolean) => void;
+        onFindPrevious: () => void;
+        onFindNext: () => void;
+        onReplace: () => void;
+        onReplaceAll: () => void;
+    };
+};

package/build/esm/modules/search/hooks/use-search.js

@@ -0,0 +1,44 @@
+import { useBooleanState } from "../../../react-utils/index.js";
+export function useSearch({ state, onChange, onSearchPrev, onSearchNext, onReplaceNext, onReplaceAll, }) {
+    const [isCompact, , showFullForm] = useBooleanState(true);
+    const handleSearchChange = (value) => {
+        onChange({ ...state, search: value });
+    };
+    const handleReplacementChange = (value) => {
+        onChange({ ...state, replace: value });
+    };
+    const handleFindPrevious = () => {
+        onSearchPrev(state);
+    };
+    const handleFindNext = () => {
+        onSearchNext(state);
+    };
+    const handleReplace = () => {
+        onReplaceNext(state);
+    };
+    const handleReplaceAll = () => {
+        onReplaceAll(state);
+    };
+    const handleCaseSensitiveChange = (val) => {
+        onChange({ ...state, caseSensitive: val });
+    };
+    const handleWholeWordChange = (val) => {
+        onChange({ ...state, wholeWord: val });
+    };
+    return {
+        isCompact,
+        searchState: state,
+        handlers: {
+            onExpand: showFullForm,
+            onSearchChange: handleSearchChange,
+            onReplaceChange: handleReplacementChange,
+            onWholeWordChange: handleWholeWordChange,
+            onCaseSensitiveChange: handleCaseSensitiveChange,
+            onFindPrevious: handleFindPrevious,
+            onFindNext: handleFindNext,
+            onReplace: handleReplace,
+            onReplaceAll: handleReplaceAll,
+        },
+    };
+}
+//# sourceMappingURL=use-search.js.map

package/build/esm/modules/search/hooks/use-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-search.js","sourceRoot":"../../../../../src","sources":["modules/search/hooks/use-search.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,sCAAwB;AAahD,MAAM,UAAU,SAAS,CAAC,EACtB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,GACC;IACb,MAAM,CAAC,SAAS,EAAE,AAAD,EAAG,YAAY,CAAC,GAAG,eAAe,CAAC,IAAI,CAAC,CAAC;IAE1D,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE;QACzC,QAAQ,CAAC,EAAC,GAAG,KAAK,EAAE,MAAM,EAAE,KAAK,EAAC,CAAC,CAAC;IACxC,CAAC,CAAC;IAEF,MAAM,uBAAuB,GAAG,CAAC,KAAa,EAAE,EAAE;QAC9C,QAAQ,CAAC,EAAC,GAAG,KAAK,EAAE,OAAO,EAAE,KAAK,EAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC5B,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAG,EAAE;QACxB,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,aAAa,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE;QAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,CAAC;IAEF,MAAM,yBAAyB,GAAG,CAAC,GAAY,EAAE,EAAE;QAC/C,QAAQ,CAAC,EAAC,GAAG,KAAK,EAAE,aAAa,EAAE,GAAG,EAAC,CAAC,CAAC;IAC7C,CAAC,CAAC;IAEF,MAAM,qBAAqB,GAAG,CAAC,GAAY,EAAE,EAAE;QAC3C,QAAQ,CAAC,EAAC,GAAG,KAAK,EAAE,SAAS,EAAE,GAAG,EAAC,CAAC,CAAC;IACzC,CAAC,CAAC;IAEF,OAAO;QACH,SAAS;QAET,WAAW,EAAE,KAAK;QAElB,QAAQ,EAAE;YACN,QAAQ,EAAE,YAAY;YAEtB,cAAc,EAAE,kBAAkB;YAClC,eAAe,EAAE,uBAAuB;YAExC,iBAAiB,EAAE,qBAAqB;YACxC,qBAAqB,EAAE,yBAAyB;YAEhD,cAAc,EAAE,kBAAkB;YAClC,UAAU,EAAE,cAAc;YAE1B,SAAS,EAAE,aAAa;YACxB,YAAY,EAAE,gBAAgB;SACjC;KACJ,CAAC;AACN,CAAC","sourcesContent":["import {useBooleanState} from 'src/react-utils';\n\nimport type {SearchState} from '../types';\n\nexport type UseSearchProps = {\n    state: SearchState;\n    onChange: (config: SearchState) => void;\n    onSearchPrev: (config: SearchState) => void;\n    onSearchNext: (config: SearchState) => void;\n    onReplaceNext: (config: SearchState) => void;\n    onReplaceAll: (config: SearchState) => void;\n};\n\nexport function useSearch({\n    state,\n    onChange,\n    onSearchPrev,\n    onSearchNext,\n    onReplaceNext,\n    onReplaceAll,\n}: UseSearchProps) {\n    const [isCompact, , showFullForm] = useBooleanState(true);\n\n    const handleSearchChange = (value: string) => {\n        onChange({...state, search: value});\n    };\n\n    const handleReplacementChange = (value: string) => {\n        onChange({...state, replace: value});\n    };\n\n    const handleFindPrevious = () => {\n        onSearchPrev(state);\n    };\n\n    const handleFindNext = () => {\n        onSearchNext(state);\n    };\n\n    const handleReplace = () => {\n        onReplaceNext(state);\n    };\n\n    const handleReplaceAll = () => {\n        onReplaceAll(state);\n    };\n\n    const handleCaseSensitiveChange = (val: boolean) => {\n        onChange({...state, caseSensitive: val});\n    };\n\n    const handleWholeWordChange = (val: boolean) => {\n        onChange({...state, wholeWord: val});\n    };\n\n    return {\n        isCompact,\n\n        searchState: state,\n\n        handlers: {\n            onExpand: showFullForm,\n\n            onSearchChange: handleSearchChange,\n            onReplaceChange: handleReplacementChange,\n\n            onWholeWordChange: handleWholeWordChange,\n            onCaseSensitiveChange: handleCaseSensitiveChange,\n\n            onFindPrevious: handleFindPrevious,\n            onFindNext: handleFindNext,\n\n            onReplace: handleReplace,\n            onReplaceAll: handleReplaceAll,\n        },\n    };\n}\n"]}

package/build/esm/modules/search/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./types.js";
+export * from "./components/SearchPopup.js";
+export { SearchQA } from "./qa.js";