@sima-land/ui-nucleons 45.0.0-alpha.5 → 45.0.0-alpha.51

package/hooks/index.js

@@ -1,78 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = exports.useOutsideClick = exports.useInfiniteScroll = exports.useIsTouchDevice = void 0;
-const react_1 = require("react");
-const is_touch_device_1 = require("../helpers/is-touch-device");
-const on_1 = require("../helpers/on");
-const identity_1 = require("./identity");
-/**
- * При монтировании проверяет, поддерживает ли устройство touch события.
- * @return True - если поддерживает, false - если нет.
- */
-function useIsTouchDevice() {
-    const [isTouch, setTouch] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        setTouch((0, is_touch_device_1.isTouchDevice)());
-    }, []);
-    return isTouch;
-}
-exports.useIsTouchDevice = useIsTouchDevice;
-/**
- * Реализует подписку на событие полной прокрутки списка.
- * @param ref Реф прокручиваемого элемента.
- * @param options Опции.
- * @param options.onFullScroll Сработает при событии полной прокрутки.
- * @param options.threshold Отступ от конца списка по которому событие должно срабатывать.
- * @param moreDeps Зависимости эффекта (нужны, когда ref заполняется не на этапе render'а).
- */
-function useInfiniteScroll(ref, { onFullScroll, threshold = 0, }, moreDeps) {
-    const callbackRef = (0, identity_1.useIdentityRef)(onFullScroll);
-    (0, react_1.useEffect)(() => {
-        const element = ref.current;
-        if (element) {
-            return (0, on_1.on)(element, 'scroll', event => {
-                var _a;
-                const { scrollTop, clientHeight, scrollHeight } = event.target;
-                const bottom = threshold + scrollTop + clientHeight;
-                const isFullyScrolled = bottom >= scrollHeight;
-                isFullyScrolled && ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, event));
-            });
-        }
-    }, [ref, threshold, ...(moreDeps || [])]);
-}
-exports.useInfiniteScroll = useInfiniteScroll;
-/**
- * Запускает переданный обработчик при клике вне элемента.
- * @param elementRef Ref элемента, клик вне которого нужно обработать.
- * @param callback Сработает при клике вне элемента.
- */
-function useOutsideClick(elementRef, callback) {
-    const innerRef = (0, identity_1.useIdentityRef)(elementRef);
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => {
-        const off = (0, on_1.on)(document.documentElement, 'click', event => {
-            var _a;
-            const arg = innerRef.current;
-            const refs = Array.isArray(arg) ? arg : [arg];
-            let isOutsideClick = true;
-            for (const { current: element } of refs) {
-                if (element &&
-                    event.target instanceof Node &&
-                    (element === event.target || element.contains(event.target))) {
-                    isOutsideClick = false;
-                    break;
-                }
-            }
-            isOutsideClick && ((_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, event));
-        }, 
-        // ВАЖНО: чтобы изменение DOM не приводило к ложному срабатыванию
-        { capture: true });
-        return off;
-    }, []);
-}
-exports.useOutsideClick = useOutsideClick;
-/**
- * Нужен для того чтобы не получать ошибку при использовании в SSR с NodeJS.
- * @see {@link https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85#gistcomment-2911761}
- */
-exports.useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_1.useLayoutEffect : react_1.useEffect;

package/hooks/intersection/index.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIntersection = void 0;
-const react_1 = require("react");
-const identity_1 = require("../identity");
-/**
- * Хук, вызывающий callback при пересечении целевого элемента с областью видимости.
- * @param ref Ref с целевым элементом.
- * @param callback Функция, которая будет вызвана при пересечении целевого элемента с областью видимости.
- * @param options Опции создания IntersectionObserver.
- */
-function useIntersection(ref, callback, options) {
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => {
-        const element = ref.current;
-        if (element) {
-            const observer = new IntersectionObserver(([entry]) => {
-                var _a;
-                (_a = callbackRef.current) === null || _a === void 0 ? void 0 : _a.call(callbackRef, entry);
-            }, options);
-            observer.observe(element);
-            return () => observer.disconnect();
-        }
-    }, [ref, callbackRef, options]);
-}
-exports.useIntersection = useIntersection;

package/hooks/intersection/readme.md

@@ -1,55 +0,0 @@
-# Утилиты для unit-тестирования
-
-Утилиты для unit-тестирования (Jest) компонентов, использующих хук `useIntersection`
-
-#### Пример компонента
-
-```jsx
-import { useIntersection } from '@sima-land/ui-nucleons/hooks/intersection';
-
-const TestComponent = () => {
-  const ref = useRef(null);
-  const [viewing, setViewing] = useState(false);
-
-  useIntersection(ref, entry => {
-    setViewing(entry.isIntersecting);
-  });
-
-  return (
-    <div ref={ref} data-testid='test-target'>
-      {viewing ? 'On screen' : 'Off screen'}
-    </div>
-  );
-};
-```
-
-#### Пример тестов
-
-```jsx
-import { IntersectionMock } from '@sima-land/ui-nucleons/hooks/intersection/test-utils';
-
-const intersectionMock = new IntersectionMock();
-
-beforeAll(() => {
-  intersectionMock.apply();
-});
-
-afterAll(() => {
-  intersectionMock.restore();
-});
-
-it('test component', () => {
-  const { asFragment, getByTestId } = render(<TestComponent />);
-  const target = getByTestId('test-target');
-
-  expect(asFragment().textContent).toContain('Off screen');
-
-  intersectionMock.changeElementState({
-    target,
-    isIntersecting: true,
-    intersectionRatio: 0,
-  });
-
-  expect(asFragment().textContent).toContain('On screen');
-});
-```

package/hooks/intersection/test-utils.d.ts

@@ -1,64 +0,0 @@
-export type IntersectionObserverEntryBase = Omit<IntersectionObserverEntry, 'time' | 'rootBounds' | 'boundingClientRect' | 'intersectionRect'>;
-/**
- * Возвращает новый объект, частично реализующий IntersectionObserverEntry.
- * @param base Базовая информация.
- * @return Объект.
- */
-export declare function createFakeEntry(base: IntersectionObserverEntryBase): IntersectionObserverEntry;
-/**
- * Реализует интерфейс для управления состоянием пересечения элемента с область видимости.
- */
-export declare class IntersectionMock {
-    _original: typeof IntersectionObserver;
-    _observers: FakeIntersectionObserver[];
-    /** Конструктор. */
-    constructor();
-    /**
-     * Подменяет глобальный конструктор IntersectionObserver.
-     */
-    apply(): void;
-    /**
-     * Восстанавливает оригинальный глобальный конструктор IntersectionObserver.
-     */
-    restore(): void;
-    /**
-     * Имитирует изменение состояния пересечения элемента с областью видимости.
-     * @param entryArg Данные пересечения элемента.
-     */
-    changeElementState(entryArg: IntersectionObserverEntryBase): void;
-    /**
-     * Записывает observer в список зарегистрированных.
-     * @param observer Observer.
-     */
-    _registerObserver(observer: FakeIntersectionObserver): void;
-    /**
-     * Удаляет observer из списка зарегистрированных.
-     * @param observer Observer.
-     */
-    _unregisterObserver(observer: FakeIntersectionObserver): void;
-}
-/**
- * Имитация IntersectionObserver.
- */
-export declare class FakeIntersectionObserver implements IntersectionObserver {
-    readonly root: Element | Document | null;
-    readonly rootMargin: string;
-    readonly thresholds: ReadonlyArray<number>;
-    _callback: IntersectionObserverCallback;
-    _elements: Element[];
-    /** @inheritdoc */
-    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
-    /** @inheritdoc */
-    observe(element: Element): void;
-    /** @inheritdoc */
-    unobserve(element: Element): void;
-    /** @inheritdoc */
-    disconnect(): void;
-    /** @inheritdoc */
-    takeRecords(): never[];
-    /**
-     * Запускает callback.
-     * @param entry Данные пересечения элемента.
-     */
-    _runCallback(entry: IntersectionObserverEntry): void;
-}

package/hooks/intersection/test-utils.js

@@ -1,137 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FakeIntersectionObserver = exports.IntersectionMock = exports.createFakeEntry = void 0;
-const test_utils_1 = require("react-dom/test-utils");
-let intersectionMock;
-/**
- * Возвращает новый объект, частично реализующий IntersectionObserverEntry.
- * @param base Базовая информация.
- * @return Объект.
- */
-function createFakeEntry(base) {
-    const entry = Object.assign(Object.assign({}, base), { time: Date.now(), 
-        /** @inheritdoc */
-        get rootBounds() {
-            // eslint-disable-next-line no-console
-            console.error('Not implemented in mock');
-            return null;
-        },
-        /** @inheritdoc */
-        get boundingClientRect() {
-            // eslint-disable-next-line no-console
-            console.error('Not implemented in mock');
-            return null;
-        },
-        /** @inheritdoc */
-        get intersectionRect() {
-            // eslint-disable-next-line no-console
-            console.error('Not implemented in mock');
-            return null;
-        } });
-    return entry;
-}
-exports.createFakeEntry = createFakeEntry;
-/**
- * Реализует интерфейс для управления состоянием пересечения элемента с область видимости.
- */
-class IntersectionMock {
-    /** Конструктор. */
-    constructor() {
-        this._observers = [];
-        this._original = window.IntersectionObserver;
-    }
-    /**
-     * Подменяет глобальный конструктор IntersectionObserver.
-     */
-    apply() {
-        if (intersectionMock) {
-            throw Error('Already mocked');
-        }
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
-        intersectionMock = this;
-        window.IntersectionObserver = FakeIntersectionObserver;
-    }
-    /**
-     * Восстанавливает оригинальный глобальный конструктор IntersectionObserver.
-     */
-    restore() {
-        if (window.IntersectionObserver !== FakeIntersectionObserver) {
-            throw Error('Not mocked');
-        }
-        window.IntersectionObserver = this._original;
-        intersectionMock = undefined;
-    }
-    /**
-     * Имитирует изменение состояния пересечения элемента с областью видимости.
-     * @param entryArg Данные пересечения элемента.
-     */
-    changeElementState(entryArg) {
-        (0, test_utils_1.act)(() => {
-            const entry = createFakeEntry(entryArg);
-            for (const observer of this._observers) {
-                if (observer._elements.some(e => e === entry.target) &&
-                    observer.thresholds.includes(entry.intersectionRatio)) {
-                    observer._runCallback(entry);
-                }
-            }
-        });
-    }
-    /**
-     * Записывает observer в список зарегистрированных.
-     * @param observer Observer.
-     */
-    _registerObserver(observer) {
-        this._observers.push(observer);
-    }
-    /**
-     * Удаляет observer из списка зарегистрированных.
-     * @param observer Observer.
-     */
-    _unregisterObserver(observer) {
-        this._observers.splice(this._observers.indexOf(observer), 1);
-    }
-}
-exports.IntersectionMock = IntersectionMock;
-/**
- * Имитация IntersectionObserver.
- */
-class FakeIntersectionObserver {
-    /** @inheritdoc */
-    constructor(callback, options = {}) {
-        this.root = (options === null || options === void 0 ? void 0 : options.root) || null;
-        this.rootMargin = (options === null || options === void 0 ? void 0 : options.rootMargin) || '0px 0px 0px 0px';
-        this.thresholds = Array.isArray(options.threshold)
-            ? options.threshold
-            : [options.threshold || 0];
-        this._callback = callback;
-        this._elements = [];
-        intersectionMock === null || intersectionMock === void 0 ? void 0 : intersectionMock._registerObserver(this);
-    }
-    /** @inheritdoc */
-    observe(element) {
-        this._elements.push(element);
-    }
-    /** @inheritdoc */
-    unobserve(element) {
-        this._elements = this._elements.filter(e => e !== element);
-    }
-    /** @inheritdoc */
-    disconnect() {
-        this._elements = [];
-        intersectionMock === null || intersectionMock === void 0 ? void 0 : intersectionMock._unregisterObserver(this);
-    }
-    /** @inheritdoc */
-    takeRecords() {
-        // eslint-disable-next-line no-console
-        console.error('Not implemented in mock');
-        return [];
-    }
-    /**
-     * Запускает callback.
-     * @param entry Данные пересечения элемента.
-     */
-    _runCallback(entry) {
-        this._callback([entry], this);
-    }
-}
-exports.FakeIntersectionObserver = FakeIntersectionObserver;

package/hooks/keydown.js

@@ -1,19 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeydown = void 0;
-const react_1 = require("react");
-const identity_1 = require("./identity");
-const on_1 = require("../helpers/on");
-/**
- * Хук, добавляющий обработчик нажатия на клавишу.
- * @param targetKey Клавиша, для которой отслеживается нажатие.
- * @param callback Обработчик нажатия.
- */
-function useKeydown(targetKey, callback) {
-    const ref = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => (0, on_1.on)(document, 'keydown', event => {
-        const handler = ref.current;
-        (event.key === targetKey || event.code === targetKey) && (handler === null || handler === void 0 ? void 0 : handler(event));
-    }), [targetKey]);
-}
-exports.useKeydown = useKeydown;

package/hooks/media.d.ts

@@ -1,6 +0,0 @@
-/**
- * Возвращает состояние по media-запросу.
- * @param query Запрос.
- * @return Состояние (matches).
- */
-export declare const useMedia: (query: string) => boolean;

package/hooks/media.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMedia = void 0;
-const react_1 = require("react");
-const media_query_list_1 = require("../helpers/media-query-list");
-/**
- * Возвращает состояние по media-запросу.
- * @param query Запрос.
- * @return Состояние (matches).
- */
-const useMedia = (query) => {
-    const [matches, setMatches] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        const mql = window.matchMedia(query);
-        setMatches(mql.matches);
-        return (0, media_query_list_1.subscribe)(mql, event => {
-            setMatches(event.matches);
-        }).unsubscribe;
-    }, [query]);
-    return matches;
-};
-exports.useMedia = useMedia;

package/hooks/styles.d.ts

@@ -1,6 +0,0 @@
-import { RefObject } from 'react';
-/**
- * Хук, устанавливающий css-переменную "--vh" на переданный элемент.
- * @param ref Ref элемента.
- */
-export declare function useViewportHeightUnit(ref: RefObject<HTMLElement | null>): void;

package/hooks/styles.js

@@ -1,26 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useViewportHeightUnit = void 0;
-const react_1 = require("react");
-const on_1 = require("../helpers/on");
-const styles_1 = require("../helpers/styles");
-/**
- * Хук, устанавливающий css-переменную "--vh" на переданный элемент.
- * @param ref Ref элемента.
- */
-function useViewportHeightUnit(ref) {
-    (0, react_1.useEffect)(() => {
-        const { visualViewport } = window;
-        const offList = [];
-        // eslint-disable-next-line require-jsdoc, jsdoc/require-jsdoc
-        function setVariable() {
-            ref.current && (0, styles_1.setViewportHeightUnit)(ref.current);
-        }
-        offList.push((0, on_1.on)(window, 'resize', setVariable));
-        offList.push((0, on_1.on)(window, 'orientationchange', setVariable));
-        visualViewport && offList.push((0, on_1.on)(visualViewport, 'resize', setVariable));
-        setVariable();
-        return () => offList.forEach(fn => fn());
-    }, []);
-}
-exports.useViewportHeightUnit = useViewportHeightUnit;

package/info-text/index.d.ts

@@ -1,23 +0,0 @@
-import { CSSProperties, MouseEventHandler, ReactNode, Ref } from 'react';
-import { WithTestId } from '../types';
-export interface InfoTextProps extends WithTestId {
-    /** Текст. */
-    children?: ReactNode;
-    /** Класс. */
-    className?: string;
-    /** Стили. */
-    style?: CSSProperties;
-    /** Ref элемента иконки. */
-    iconRef?: Ref<HTMLButtonElement>;
-    /** Нужно ли выводить иконку как "активную". */
-    iconActive?: boolean;
-    /** Сработает при клике на иконку. */
-    onIconClick?: MouseEventHandler;
-}
-/**
- * Позволяет выводить в конце произвольного текста иконку.
- * Иконка не переносится на следующую строку без предыдущего слова и может обрабатывать действие при клике.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function InfoText({ children, style, className, iconRef, onIconClick, iconActive, 'data-testid': testId, }: InfoTextProps): JSX.Element;

package/info-text/index.js

@@ -1,33 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfoText = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Information_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Information"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const info_text_module_scss_1 = __importDefault(require("./info-text.module.scss"));
-const cx = bind_1.default.bind(info_text_module_scss_1.default);
-/**
- * Позволяет выводить в конце произвольного текста иконку.
- * Иконка не переносится на следующую строку без предыдущего слова и может обрабатывать действие при клике.
- * @param props Свойства.
- * @return Элемент.
- */
-function InfoText({ children, style, className, iconRef, onIconClick, iconActive, 'data-testid': testId = 'info-text', }) {
-    return ((0, jsx_runtime_1.jsx)("span", Object.assign({ style: style, className: className, "data-testid": testId }, { children: react_1.Children.toArray(children).map((item, index, array) => {
-            if (index < array.length - 1) {
-                return item;
-            }
-            else {
-                const text = String(item);
-                const lastSpaceIndex = text.lastIndexOf(' ');
-                const head = text.slice(0, lastSpaceIndex);
-                const last = text.slice(lastSpaceIndex);
-                return ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [head, last && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: info_text_module_scss_1.default.last }, { children: [last, (0, jsx_runtime_1.jsx)("button", Object.assign({ ref: iconRef, type: 'button', "aria-label": '\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u0435\u0435', disabled: !onIconClick, "aria-hidden": !onIconClick, onClick: onIconClick, className: cx('button', { active: iconActive }), "data-testid": 'info-text:icon' }, { children: (0, jsx_runtime_1.jsx)(Information_1.default, { className: cx('icon') }) }))] })))] }, index));
-            }
-        }) })));
-}
-exports.InfoText = InfoText;

package/info-text/info-text.module.scss

@@ -1,28 +0,0 @@
-@use '../colors';
-@use '../utils';
-
-.last {
-  white-space: nowrap;
-  line-height: inherit;
-  font-size: inherit;
-}
-
-.button {
-  @include utils.reset-button;
-  @include utils.focus-visible;
-  display: inline-block;
-  vertical-align: -0.125em; // не понятно почему, но это значение ставит блок ровно по середине строки
-  margin-left: 4px;
-  color: colors.$basic-gray38;
-  &.active,
-  &:hover,
-  &:focus-visible {
-    color: colors.$basic-gray54;
-    cursor: pointer;
-  }
-}
-
-.icon {
-  display: block;
-  fill: currentColor;
-}

package/input/index.d.ts

@@ -1,32 +0,0 @@
-import { InputHTMLAttributes, MouseEventHandler, Ref } from 'react';
-import { BaseInputAsInputProps } from '../base-input';
-import { FieldBlockProps } from '../field-block';
-type HTMLInputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'autoComplete' | 'autoFocus' | 'defaultValue' | 'disabled' | 'id' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'placeholder' | 'readOnly' | 'required' | 'type' | 'value'>;
-export type InputType = Extract<InputHTMLAttributes<HTMLInputElement>['type'], 'text' | 'password' | 'search' | 'email' | 'tel' | 'number'>;
-export interface InputProps extends HTMLInputProps, FieldBlockProps {
-    /** Ref элемента input. */
-    inputRef?: Ref<HTMLInputElement>;
-    /** Свойства BaseInputProps. */
-    baseInputProps?: BaseInputAsInputProps;
-    /** Тип поля. */
-    type?: InputType;
-    /** Нужно ли выводить кнопку очистки поля. */
-    clearable?: boolean;
-    /** Сработает при очистке поля. */
-    onClear?: MouseEventHandler<SVGSVGElement>;
-    /** Значение. */
-    value?: string;
-    /** Значение по умолчанию. */
-    defaultValue?: string;
-    /** Стили корневого элемента. */
-    style?: Required<FieldBlockProps>['rootProps']['style'];
-    /** CSS-класс корневого элемента. */
-    className?: Required<FieldBlockProps>['rootProps']['className'];
-}
-/**
- * Текстовое поле.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function Input({ inputRef, baseInputProps, clearable, onClear, style, className, autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, type, value, size, label, failed, caption, blockProps, 'data-testid': testId, focused: focusedProp, ...restProps }: InputProps): JSX.Element;
-export {};

package/input/index.js

@@ -1,74 +0,0 @@
-"use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const base_input_1 = require("../base-input");
-const field_block_1 = require("../field-block");
-const utils_1 = require("./utils");
-const events_1 = require("../helpers/events");
-const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Filled/Cross"));
-const Cross_2 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Cross"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const input_module_scss_1 = __importDefault(require("./input.module.scss"));
-const cx = bind_1.default.bind(input_module_scss_1.default);
-/**
- * Текстовое поле.
- * @param props Свойства.
- * @return Элемент.
- */
-function Input(_a) {
-    var { 
-    // specific Input props
-    inputRef, baseInputProps, clearable, onClear, 
-    // root props
-    style, className, 
-    // input element props (popular)
-    autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, type, value, 
-    // FieldBlock props
-    size, label, failed, caption, blockProps, 'data-testid': testId = 'input', focused: focusedProp } = _a, restProps = __rest(_a, ["inputRef", "baseInputProps", "clearable", "onClear", "style", "className", "autoComplete", "autoFocus", "defaultValue", "disabled", "id", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "type", "value", "size", "label", "failed", "caption", "blockProps", 'data-testid', "focused"]);
-    const ref = (0, react_1.useRef)(null);
-    const [filled, updateFilled] = (0, utils_1.useFilledState)(ref, { value, defaultValue });
-    const [focused, setFocused] = (0, react_1.useState)(false);
-    const CrossSVG = size === 's' ? Cross_1.default : Cross_2.default;
-    const handleMouseDown = (0, utils_1.useFieldMouseDown)(ref, blockProps === null || blockProps === void 0 ? void 0 : blockProps.onMouseDown);
-    (0, react_1.useImperativeHandle)(inputRef, () => ref.current);
-    return ((0, jsx_runtime_1.jsx)(field_block_1.FieldBlock, Object.assign({}, restProps, { rootProps: Object.assign(Object.assign({}, restProps.rootProps), { style,
-            className }), "data-testid": testId, caption: caption, disabled: disabled, failed: failed, focused: focusedProp !== null && focusedProp !== void 0 ? focusedProp : focused, label: label, labelAsPlaceholder: !focused && !filled, labelProps: { htmlFor: id }, size: size }, (clearable &&
-        focused &&
-        filled && {
-        adornmentEnd: ((0, jsx_runtime_1.jsx)(CrossSVG, { "data-testid": 'input:clear-button', role: 'button', "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C \u043F\u043E\u043B\u0435', className: cx('clear-button'), onClick: e => {
-                ref.current && (0, events_1.triggerInput)(ref.current, '');
-                onClear === null || onClear === void 0 ? void 0 : onClear(e);
-            } })),
-    }), { blockProps: Object.assign(Object.assign({}, blockProps), { onMouseDown: handleMouseDown }), main: (0, jsx_runtime_1.jsx)(base_input_1.BaseInput, Object.assign({}, baseInputProps, { inputRef: ref, multiline: false, className: cx('input', baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.className), style: Object.assign(Object.assign({}, baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.style), { '--placeholder-color': (0, utils_1.definePlaceholderColor)({ failed, disabled }) }), autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, id: id, name: name, placeholder: !focused ? label || placeholder : placeholder, readOnly: readOnly, required: required, type: type, value: value, onFocus: event => {
-                onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
-                updateFilled(event);
-                setFocused(true);
-            }, onBlur: event => {
-                onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-                updateFilled(event);
-                setFocused(false);
-            }, onInput: event => {
-                onInput === null || onInput === void 0 ? void 0 : onInput(event);
-                updateFilled(event);
-            }, onChange: event => {
-                onChange === null || onChange === void 0 ? void 0 : onChange(event);
-                updateFilled(event);
-            } })), mainProps: { className: cx('main') } })));
-}
-exports.Input = Input;