@snack-uikit/search 0.4.13-preview-85c5f47b.0

package/dist/components/SearchAutocomplete/SearchAutocomplete.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useRef, useState } from 'react';
+import { Droplist } from '@snack-uikit/droplist';
+import { PRIVATE_SEARCH_TEST_IDS, Size, TEST_IDS } from '../../constants';
+import { SearchDecorator } from '../SearchDecorator';
+import { SearchPrivate } from '../SearchPrivate';
+import styles from './styles.module.css';
+export const SearchAutocomplete = forwardRef(function SearchAutocomplete(_a, ref) {
+    var _b, _c;
+    var { size = Size.S, value, onChange, placeholder, options = [], loading, outline, onSubmit, onFocus, className } = _a, rest = __rest(_a, ["size", "value", "onChange", "placeholder", "options", "loading", "outline", "onSubmit", "onFocus", "className"]);
+    const scrollRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { firstElementRefCallback, handleDroplistFocusLeave, handleDroplistItemClick, handleTriggerKeyDown, handleDroplistItemKeyDown, triggerElementRef, } = Droplist.useKeyboardNavigation({
+        setDroplistOpen: setIsOpen,
+        triggerType: Droplist.useKeyboardNavigation.triggerTypes.Input,
+    });
+    const handleOptionKeyDown = useCallback((event) => {
+        var _a, _b;
+        event.stopPropagation();
+        // ignoring special keys (tab, arrows, backspace and etc.)
+        if (event.key.length === 1) {
+            (_a = triggerElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = scrollRef.current) === null || _b === void 0 ? void 0 : _b.scroll(0, 0);
+        }
+    }, [triggerElementRef, scrollRef]);
+    const onKeyDown = (e) => {
+        handleTriggerKeyDown(e);
+        if (e.key.length === 1) {
+            setIsOpen(true);
+        }
+    };
+    return (_jsx("div", Object.assign({ className: cn(styles.wrap, className) }, rest, { children: _jsx(Droplist, Object.assign({ open: Boolean((_b = triggerElementRef.current) === null || _b === void 0 ? void 0 : _b.value) && isOpen && options.length > 0, firstElementRefCallback: firstElementRefCallback, useScroll: true, size: size, onFocusLeave: handleDroplistFocusLeave, onOpenChange: setIsOpen, "data-test-id": TEST_IDS.droplist, triggerClassName: styles.triggerClassName, scrollRef: scrollRef, triggerRef: triggerElementRef, triggerElement: _jsx(SearchDecorator, Object.assign({ size: size, outline: outline || undefined, focused: (isOpen && Boolean((_c = triggerElementRef.current) === null || _c === void 0 ? void 0 : _c.value)) || undefined, "data-test-id": TEST_IDS.decorator }, { children: _jsx(SearchPrivate, { loading: loading, value: value, onChange: onChange, onSubmit: onSubmit, placeholder: placeholder, ref: mergeRefs(ref, triggerElementRef), onKeyDown: onKeyDown, onFocus: onFocus, size: size, "data-test-id": PRIVATE_SEARCH_TEST_IDS.field }) })) }, { children: options.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, onClick: e => {
+                    var _a;
+                    handleDroplistItemClick(e);
+                    onChange === null || onChange === void 0 ? void 0 : onChange(item.option);
+                    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(item.option);
+                    (_a = triggerElementRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+                }, onKeyDown: e => handleDroplistItemKeyDown(e, handleOptionKeyDown), "data-test-id": TEST_IDS.option })))) })) })));
+});

package/dist/components/SearchAutocomplete/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchAutocomplete';

package/dist/components/SearchAutocomplete/index.js

@@ -0,0 +1 @@
+export * from './SearchAutocomplete';

package/dist/components/SearchAutocomplete/styles.module.css

@@ -0,0 +1,9 @@
+.triggerClassName{
+  --offset:var(--space-drop-list-drop-offset, 4px);
+  display:flex;
+  flex-grow:1;
+}
+
+.wrap{
+  display:flex;
+}

package/dist/components/SearchDecorator/SearchDecorator.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+import { SearchProps } from '../Search';
+export type SearchDecoratorProps = WithSupportProps<{
+    children: ReactNode;
+    focused?: boolean;
+    className?: string;
+} & Pick<SearchProps, 'outline' | 'size'>>;
+export declare function SearchDecorator({ children, outline, size, focused, className, ...rest }: SearchDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SearchDecorator {
+    var sizes: typeof Size;
+}

package/dist/components/SearchDecorator/SearchDecorator.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+import styles from './styles.module.css';
+export function SearchDecorator(_a) {
+    var { children, outline, size = Size.S, focused, className } = _a, rest = __rest(_a, ["children", "outline", "size", "focused", "className"]);
+    return (_jsx("div", Object.assign({ className: cn(styles.decorator, className), "data-outline": outline || undefined, "data-size": size, "data-focused": focused || undefined }, extractSupportProps(rest), { children: children })));
+}
+SearchDecorator.sizes = Size;

package/dist/components/SearchDecorator/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchDecorator';

package/dist/components/SearchDecorator/index.js

@@ -0,0 +1 @@
+export * from './SearchDecorator';

package/dist/components/SearchDecorator/styles.module.css

@@ -0,0 +1,45 @@
+.decorator{
+  display:flex;
+  flex:1 0 auto;
+  align-items:center;
+  box-sizing:border-box;
+  background-color:var(--sys-neutral-background1-level, #f9f9f9);
+  border-color:transparent;
+  border-style:solid;
+}
+.decorator[data-size=s]{
+  height:var(--size-search-s, 32px);
+  border-radius:var(--radius-search-s, 12px);
+  border-width:var(--border-width-search-single, 2px);
+  padding-left:var(--space-search-container-s, 6px);
+  padding-right:var(--space-search-container-s, 6px);
+}
+.decorator[data-size=m]{
+  height:var(--size-search-m, 40px);
+  border-radius:var(--radius-search-m, 14px);
+  border-width:var(--border-width-search-single, 2px);
+  padding-left:var(--space-search-container-m, 8px);
+  padding-right:var(--space-search-container-m, 8px);
+}
+.decorator[data-size=l]{
+  height:var(--size-search-l, 48px);
+  border-radius:var(--radius-search-l, 16px);
+  border-width:var(--border-width-search-single, 2px);
+  padding-left:var(--space-search-container-l, 10px);
+  padding-right:var(--space-search-container-l, 10px);
+}
+.decorator[data-outline]{
+  border-color:var(--sys-neutral-decor-default, #dedede);
+}
+.decorator:hover{
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-primary-decor-hovered, #decdfb);
+}
+.decorator:focus-within, .decorator[data-focused]{
+  outline-width:var(--border-state-focus-m-border-width, 3px);
+  outline-style:var(--border-state-focus-m-border-style, solid);
+  outline-color:var(--border-state-focus-m-border-color, );
+  background-color:var(--sys-neutral-background2-level, #fdfdfd);
+  border-color:var(--sys-primary-accent-default, #794ed3);
+  outline-color:var(--sys-primary-decor-activated, #c5b2f1);
+}

package/dist/components/SearchFieldText/SearchFieldText.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { SearchPrivateProps } from '../SearchPrivate';
+export type SearchTextFieldProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
+    /** Внешний бордер */
+    outline?: boolean;
+};
+export declare const SearchFieldText: import("react").ForwardRefExoticComponent<Omit<SearchPrivateProps, "onKeyDown"> & {
+    /** Внешний бордер */
+    outline?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/SearchFieldText/SearchFieldText.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import { SearchDecorator } from '../SearchDecorator';
+import { SearchPrivate } from '../SearchPrivate';
+export const SearchFieldText = forwardRef(function SearchFieldText(_a, ref) {
+    var { value, onChange, onBlur, onFocus, size = Size.S, outline, loading, placeholder, onSubmit, className } = _a, rest = __rest(_a, ["value", "onChange", "onBlur", "onFocus", "size", "outline", "loading", "placeholder", "onSubmit", "className"]);
+    return (_jsx(SearchDecorator, Object.assign({ outline: outline, size: size, className: className }, rest, { children: _jsx(SearchPrivate, { ref: ref, size: size, value: value, onChange: onChange, onBlur: onBlur, onFocus: onFocus, onSubmit: onSubmit, placeholder: placeholder, loading: loading, "data-test-id": PRIVATE_SEARCH_TEST_IDS.field }) })));
+});

package/dist/components/SearchFieldText/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchFieldText';

package/dist/components/SearchFieldText/index.js

@@ -0,0 +1 @@
+export * from './SearchFieldText';

package/dist/components/SearchPrivate/SearchPrivate.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { InputPrivateProps } from '@snack-uikit/input-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Size } from '../../constants';
+export type SearchPrivateProps = WithSupportProps<{
+    /** Размер */
+    size?: Size;
+    /** Состояние загрузки */
+    loading?: boolean;
+    /** Колбек на подтверждение поиска по строке */
+    onSubmit?(value: string): void;
+    /** CSS-класс */
+    className?: string;
+} & Pick<Partial<InputPrivateProps>, 'value' | 'onChange' | 'placeholder' | 'onFocus' | 'onBlur' | 'onKeyDown'>>;
+export declare const SearchPrivate: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & {
+    /** Размер */
+    size?: Size | undefined;
+    /** Состояние загрузки */
+    loading?: boolean | undefined;
+    /** Колбек на подтверждение поиска по строке */
+    onSubmit?(value: string): void;
+    /** CSS-класс */
+    className?: string | undefined;
+} & Pick<Partial<InputPrivateProps>, "value" | "onChange" | "placeholder" | "onFocus" | "onBlur" | "onKeyDown"> & import("react").RefAttributes<HTMLInputElement>> & {
+    sizes: typeof Size;
+};

package/dist/components/SearchPrivate/SearchPrivate.js

@@ -0,0 +1,63 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import mergeRefs from 'merge-refs';
+import { forwardRef, useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { SearchSVG } from '@snack-uikit/icons';
+import { InputPrivate, moveCursorToEnd, useButtonNavigation, useClearButton, } from '@snack-uikit/input-private';
+import { Sun } from '@snack-uikit/loaders';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { PRIVATE_SEARCH_TEST_IDS, Size } from '../../constants';
+import styles from './styles.module.css';
+const SearchPrivateComponent = forwardRef(function SearchPrivate(_a, ref) {
+    var { size = Size.S, value: valueProp = '', onChange: onChangeProp, loading, placeholder, onKeyDown, onFocus, onBlur, onSubmit, className } = _a, rest = __rest(_a, ["size", "value", "onChange", "loading", "placeholder", "onKeyDown", "onFocus", "onBlur", "onSubmit", "className"]);
+    const [value, onValueChange] = useUncontrolledProp(valueProp, '', onChangeProp);
+    const localRef = useRef(null);
+    const clearButtonRef = useRef(null);
+    const showClearButton = Boolean(value);
+    const onClear = () => {
+        var _a;
+        onValueChange('');
+        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const clearButtonSettings = useClearButton({
+        clearButtonRef,
+        showClearButton,
+        size,
+        onClear,
+    });
+    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+        inputRef: localRef,
+        buttons: useMemo(() => [clearButtonSettings], [clearButtonSettings]),
+        readonly: false,
+        submitKeys: ['Enter', 'Space'],
+    });
+    const handleKeyDown = useCallback((e) => {
+        var _a, _b;
+        onKeyDown && onKeyDown(e);
+        onInputKeyDown(e);
+        if (e.key === 'Enter' && ((_a = localRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
+            onSubmit && onSubmit(localRef.current.value);
+            // TODO: think about remove blur behavior
+            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+        }
+    }, [onInputKeyDown, onKeyDown, onSubmit]);
+    const handleOnFocus = useCallback((e) => {
+        onFocus && onFocus(e);
+        moveCursorToEnd(localRef.current);
+    }, [onFocus]);
+    return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size }, { children: [_jsx("span", Object.assign({ className: styles.prefix }, { children: loading ? (_jsx(Sun, { "data-test-id": PRIVATE_SEARCH_TEST_IDS.iconSun })) : (_jsx(SearchSVG, { "data-test-id": PRIVATE_SEARCH_TEST_IDS.iconSearch })) })), _jsx(InputPrivate, { value: value, onChange: onValueChange, onKeyDown: handleKeyDown, onFocus: handleOnFocus, onBlur: onBlur, tabIndex: inputTabIndex, ref: mergeRefs(ref, localRef), placeholder: placeholder, type: InputPrivate.types.Text, "data-test-id": PRIVATE_SEARCH_TEST_IDS.input }), _jsx("span", Object.assign({ className: styles.postfix }, { children: buttons }))] })));
+});
+export const SearchPrivate = SearchPrivateComponent;
+SearchPrivate.sizes = Size;

package/dist/components/SearchPrivate/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchPrivate';

package/dist/components/SearchPrivate/index.js

@@ -0,0 +1 @@
+export * from './SearchPrivate';

package/dist/components/SearchPrivate/styles.module.css

@@ -0,0 +1,68 @@
+.container{
+  display:flex;
+  flex-grow:1;
+  align-items:center;
+  box-sizing:border-box;
+}
+.container[data-size=s]{
+  gap:var(--space-search-search-private-s, 4px);
+}
+.container[data-size=s] input{
+  font-family:var(--sans-body-s-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-s-font-weight, Regular);
+  line-height:var(--sans-body-s-line-height, 16px);
+  font-size:var(--sans-body-s-font-size, 12px);
+  letter-spacing:var(--sans-body-s-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-s-paragraph-spacing, 6.6px);
+  cursor:text;
+}
+.container[data-size=s] svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.container[data-size=m]{
+  gap:var(--space-search-search-private-m, 4px);
+}
+.container[data-size=m] input{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  cursor:text;
+}
+.container[data-size=m] svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+.container[data-size=l]{
+  gap:var(--space-search-search-private-l, 8px);
+}
+.container[data-size=l] input{
+  font-family:var(--sans-body-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-l-font-weight, Regular);
+  line-height:var(--sans-body-l-line-height, 24px);
+  font-size:var(--sans-body-l-font-size, 16px);
+  letter-spacing:var(--sans-body-l-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-l-paragraph-spacing, 8.8px);
+  cursor:text;
+}
+.container[data-size=l] svg{
+  width:var(--dimension-3m, 24px) !important;
+  height:var(--dimension-3m, 24px) !important;
+}
+
+.prefix{
+  display:inline-flex;
+  flex-shrink:0;
+  align-items:center;
+  justify-content:center;
+  color:var(--sys-neutral-text-light, #898989);
+}
+
+.postfix{
+  display:inline-flex;
+  flex-shrink:0;
+  gap:var(--space-fields-postfix-gap, 4px);
+}

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Search';
+export * from './SearchPrivate';

package/dist/components/index.js

@@ -0,0 +1,2 @@
+export * from './Search';
+export * from './SearchPrivate';

package/dist/constants.d.ts

@@ -0,0 +1,18 @@
+export declare enum Size {
+    S = "s",
+    M = "m",
+    L = "l"
+}
+export declare const TEST_IDS: {
+    main: string;
+    decorator: string;
+    droplist: string;
+    option: string;
+};
+export declare const PRIVATE_SEARCH_TEST_IDS: {
+    field: string;
+    input: string;
+    iconSun: string;
+    iconSearch: string;
+    buttonClearValue: string;
+};

package/dist/constants.js

@@ -0,0 +1,19 @@
+export var Size;
+(function (Size) {
+    Size["S"] = "s";
+    Size["M"] = "m";
+    Size["L"] = "l";
+})(Size || (Size = {}));
+export const TEST_IDS = {
+    main: 'search',
+    decorator: 'search__decorator',
+    droplist: 'search__droplist',
+    option: 'search__option',
+};
+export const PRIVATE_SEARCH_TEST_IDS = {
+    field: 'search__field',
+    input: 'search__field-input',
+    iconSun: 'search__icon-sun',
+    iconSearch: 'search__icon-search',
+    buttonClearValue: 'button-clear-value',
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@snack-uikit/search",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Search",
+  "version": "0.4.13-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "Search",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/search",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/search"
+  },
+  "author": "Nikita Ershov <niershov@cloud.ru>",
+  "contributors": [
+    "Nikita Ershov <niershov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/droplist": "0.10.13-preview-85c5f47b.0",
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/input-private": "1.5.14-preview-85c5f47b.0",
+    "@snack-uikit/loaders": "0.3.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2",
+    "merge-refs": "1.0.0",
+    "uncontrollable": "8.0.4"
+  },
+  "devDependencies": {
+    "@types/merge-refs": "1.0.0"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/Search/Search.tsx

@@ -0,0 +1,75 @@
+import { forwardRef } from 'react';
+
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { Size } from '../../constants';
+import { SearchAutocomplete, SearchAutocompleteProps } from '../SearchAutocomplete';
+import { SearchFieldText } from '../SearchFieldText';
+import { SearchPrivateProps } from '../SearchPrivate';
+
+export type SearchProps = Omit<SearchPrivateProps, 'onKeyDown'> & {
+  /** Внешний бордер */
+  outline?: boolean;
+} & (
+    | (Pick<SearchAutocompleteProps, 'options'> & {
+        /**
+         * Работа в режиме Autocomplete в значении true
+         *
+         * Работа в режиме FieldText в значении false | undefined
+         */
+        autocomplete: true;
+      })
+    | {
+        autocomplete?: false;
+        /** В режиме FieldText options отсутсвуют */
+        options?: never;
+      }
+  );
+
+const SearchComponent = forwardRef<HTMLInputElement, SearchProps>(function Search({ size = Size.S, ...props }, ref) {
+  const { value, onChange, onBlur, onFocus, outline, loading, placeholder, onSubmit, className, ...rest } = props;
+  const supportProps = extractSupportProps(rest);
+
+  if (props.autocomplete) {
+    return (
+      <SearchAutocomplete
+        value={value}
+        onChange={onChange}
+        options={props.options}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        onSubmit={onSubmit}
+        size={size}
+        outline={outline}
+        loading={loading}
+        placeholder={placeholder}
+        className={className}
+        ref={ref}
+        {...supportProps}
+      />
+    );
+  }
+
+  return (
+    <SearchFieldText
+      value={value}
+      onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onSubmit={onSubmit}
+      size={size}
+      outline={outline}
+      loading={loading}
+      placeholder={placeholder}
+      className={className}
+      ref={ref}
+      {...supportProps}
+    />
+  );
+});
+
+export const Search = SearchComponent as typeof SearchComponent & {
+  sizes: typeof Size;
+};
+
+Search.sizes = Size;

package/src/components/Search/index.ts

@@ -0,0 +1 @@
+export * from './Search';