@sima-land/ui-nucleons 44.2.9 → 45.0.0-alpha.0

package/hooks/index.js

@@ -1,24 +1,21 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 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 = __importDefault(require("../helpers/on"));
+const on_1 = require("../helpers/on");
 const identity_1 = require("./identity");
 /**
  * При монтировании проверяет, поддерживает ли устройство touch события.
  * @return True - если поддерживает, false - если нет.
  */
-const useIsTouchDevice = () => {
+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;
 /**
  * Реализует подписку на событие полной прокрутки списка.
@@ -28,12 +25,12 @@ exports.useIsTouchDevice = useIsTouchDevice;
  * @param options.threshold Отступ от конца списка по которому событие должно срабатывать.
  * @param moreDeps Зависимости эффекта (нужны, когда ref заполняется не на этапе render'а).
  */
-const useInfiniteScroll = (ref, { onFullScroll, threshold = 0, }, moreDeps) => {
+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.default)(element, 'scroll', event => {
+            return (0, on_1.on)(element, 'scroll', event => {
                 var _a;
                 const { scrollTop, clientHeight, scrollHeight } = event.target;
                 const bottom = threshold + scrollTop + clientHeight;
@@ -42,24 +39,35 @@ const useInfiniteScroll = (ref, { onFullScroll, threshold = 0, }, moreDeps) => {
             });
         }
     }, [ref, threshold, ...(moreDeps || [])]);
-};
+}
 exports.useInfiniteScroll = useInfiniteScroll;
 /**
  * Запускает переданный обработчик при клике вне элемента.
  * @param elementRef Ref элемента, клик вне которого нужно обработать.
  * @param callback Сработает при клике вне элемента.
  */
-const useOutsideClick = (elementRef, callback) => {
+function useOutsideClick(elementRef, callback) {
+    const innerRef = (0, identity_1.useIdentityRef)(elementRef);
     const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => (0, on_1.default)(document.documentElement, 'click', event => {
-        const { current: element } = elementRef;
-        const { current: handler } = callbackRef;
-        element &&
-            element !== event.target &&
-            !element.contains(event.target) &&
-            (handler === null || handler === void 0 ? void 0 : handler(event));
-    }), []);
-};
+    (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));
+        });
+        return off;
+    }, []);
+}
 exports.useOutsideClick = useOutsideClick;
 /**
  * Нужен для того чтобы не получать ошибку при использовании в SSR с NodeJS.

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

@@ -1,4 +1,4 @@
-export declare type IntersectionObserverEntryBase = Omit<IntersectionObserverEntry, 'time' | 'rootBounds' | 'boundingClientRect' | 'intersectionRect'>;
+export type IntersectionObserverEntryBase = Omit<IntersectionObserverEntry, 'time' | 'rootBounds' | 'boundingClientRect' | 'intersectionRect'>;
 /**
  * Возвращает новый объект, частично реализующий IntersectionObserverEntry.
  * @param base Базовая информация.

package/hooks/intersection/test-utils.js

@@ -47,6 +47,7 @@ class IntersectionMock {
         if (intersectionMock) {
             throw Error('Already mocked');
         }
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
         intersectionMock = this;
         window.IntersectionObserver = FakeIntersectionObserver;
     }
@@ -87,7 +88,7 @@ class IntersectionMock {
      * @param observer Observer.
      */
     _unregisterObserver(observer) {
-        this._observers.splice(this._observers.indexOf(observer));
+        this._observers.splice(this._observers.indexOf(observer), 1);
     }
 }
 exports.IntersectionMock = IntersectionMock;

package/hooks/styles.d.ts

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

package/hooks/styles.js

@@ -0,0 +1,26 @@
+"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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,60 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 react_1 = __importStar(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 (react_1.default.createElement("span", { style: style, className: className, "data-testid": testId }, 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 (react_1.default.createElement(react_1.Fragment, { key: index },
+                head,
+                last && (react_1.default.createElement("span", { className: info_text_module_scss_1.default.last },
+                    last,
+                    react_1.default.createElement("button", { 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' },
+                        react_1.default.createElement(information_1.default, { className: cx('icon') }))))));
+        }
+    })));
+}
+exports.InfoText = InfoText;

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

@@ -0,0 +1,28 @@
+@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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,96 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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 react_1 = __importStar(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 (react_1.default.createElement(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: (react_1.default.createElement(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: react_1.default.createElement(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;

package/input/input.module.scss

@@ -0,0 +1,20 @@
+@use '../colors';
+
+.main {
+  display: flex;
+  width: 100%;
+}
+
+.input {
+  min-width: 0;
+  width: 0;
+  flex-grow: 1;
+  background: inherit;
+  font: inherit;
+  line-height: inherit;
+}
+
+.clear-button {
+  fill: colors.$basic-gray38;
+  cursor: pointer;
+}

package/input/utils.d.ts

@@ -0,0 +1,36 @@
+import { EventHandler, MouseEventHandler, RefObject, SyntheticEvent } from 'react';
+/**
+ * Получив значения value и defaultValue для поля, определяет является ли оно заполненным.
+ * @param value Значение value.
+ * @param defaultValue Значение defaultValue.
+ * @return Является ли поле заполненным.
+ */
+export declare function defineFilled(value: unknown, defaultValue: unknown): boolean;
+/**
+ * Получи информацию о состоянии поля возвращает цвет placeholder.
+ * @param state Состояние.
+ * @return Цвет.
+ */
+export declare function definePlaceholderColor({ failed, disabled, }: {
+    failed?: boolean;
+    disabled?: boolean;
+}): string | undefined;
+/**
+ * Хук состояния заполненности поля текстовым значением.
+ * @param ref Ref элемента поля.
+ * @param affectProps Свойства, влияющие на состояние заполненности.
+ * @return Кортеж: состояние; функция обновления состояния.
+ */
+export declare function useFilledState(ref: RefObject<HTMLInputElement> | RefObject<HTMLTextAreaElement>, { value, defaultValue, }: {
+    value: unknown;
+    defaultValue: unknown;
+}): [boolean, EventHandler<SyntheticEvent<{
+    value: string;
+}>>];
+/**
+ * Хук, формирующий callback события mousedown на блоке поля, фокусирующий пользователя на поле.
+ * @param fieldRef Ref элемента поля.
+ * @param callback Будет вызвана по событию mousedown.
+ * @return Функция обратного вызова.
+ */
+export declare function useFieldMouseDown(fieldRef: RefObject<HTMLInputElement | HTMLTextAreaElement>, callback?: MouseEventHandler<HTMLDivElement>): MouseEventHandler<HTMLDivElement>;

package/input/utils.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldMouseDown = exports.useFilledState = exports.definePlaceholderColor = exports.defineFilled = void 0;
+const react_1 = require("react");
+const colors_1 = require("../colors");
+/**
+ * Получив значения value и defaultValue для поля, определяет является ли оно заполненным.
+ * @param value Значение value.
+ * @param defaultValue Значение defaultValue.
+ * @return Является ли поле заполненным.
+ */
+function defineFilled(value, defaultValue) {
+    return [value, defaultValue].some(v => typeof v !== 'undefined' && `${v}` !== '');
+}
+exports.defineFilled = defineFilled;
+/**
+ * Получи информацию о состоянии поля возвращает цвет placeholder.
+ * @param state Состояние.
+ * @return Цвет.
+ */
+function definePlaceholderColor({ failed, disabled, }) {
+    let placeholderColor = undefined;
+    switch (true) {
+        case failed:
+            placeholderColor = colors_1.COLORS.get('additional-deep-red');
+            break;
+        case disabled:
+            placeholderColor = colors_1.COLORS.get('basic-gray24');
+            break;
+        case !disabled:
+            placeholderColor = colors_1.COLORS.get('basic-gray38');
+            break;
+    }
+    return placeholderColor;
+}
+exports.definePlaceholderColor = definePlaceholderColor;
+/**
+ * Хук состояния заполненности поля текстовым значением.
+ * @param ref Ref элемента поля.
+ * @param affectProps Свойства, влияющие на состояние заполненности.
+ * @return Кортеж: состояние; функция обновления состояния.
+ */
+function useFilledState(ref, { value, defaultValue, }) {
+    const [filled, setFilled] = (0, react_1.useState)(() => defineFilled(value, defaultValue));
+    const updateFilled = (0, react_1.useCallback)(event => {
+        setFilled(Boolean(event.currentTarget.value));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        setFilled(Boolean((_a = ref.current) === null || _a === void 0 ? void 0 : _a.value));
+    });
+    return [filled, updateFilled];
+}
+exports.useFilledState = useFilledState;
+/**
+ * Хук, формирующий callback события mousedown на блоке поля, фокусирующий пользователя на поле.
+ * @param fieldRef Ref элемента поля.
+ * @param callback Будет вызвана по событию mousedown.
+ * @return Функция обратного вызова.
+ */
+function useFieldMouseDown(fieldRef, callback) {
+    return (0, react_1.useCallback)(event => {
+        const field = fieldRef.current;
+        callback === null || callback === void 0 ? void 0 : callback(event);
+        if (!event.defaultPrevented && field && event.target !== field) {
+            event.preventDefault();
+            field.focus();
+        }
+    }, [fieldRef, callback]);
+}
+exports.useFieldMouseDown = useFieldMouseDown;

package/layout/index.d.ts

@@ -1,11 +1,6 @@
-import React from 'react';
-declare type Breakpoint = 'mxs' | 'ms' | 'mm' | 'ml' | 'xs' | 's' | 'm' | 'l' | 'xl';
-export interface LayoutProps extends React.HTMLAttributes<HTMLElement> {
-    /** Тэг. */
-    element?: string;
-    /** Список точек остановки на которых необходимо отключить ограничение ширины. */
-    disabledOn?: Array<Breakpoint>;
-}
-declare const DesktopLayout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLElement>>;
-declare const MobileLayout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLElement>>;
-export { DesktopLayout, MobileLayout };
+import { Breakpoint } from '../types';
+import { LayoutProps } from './types';
+import { Layout } from './layout';
+import { MobileLayout, DesktopLayout } from './legacy';
+export type { Breakpoint, LayoutProps };
+export { Layout, MobileLayout, DesktopLayout };

package/layout/index.js

@@ -1,62 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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.MobileLayout = exports.DesktopLayout = void 0;
-const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const layout_module_scss_1 = __importDefault(require("./layout.module.scss"));
-const cx = bind_1.default.bind(layout_module_scss_1.default);
-/**
- * Возвращает созданный функциональный компонент, формирующий Layout.
- * @param specificClass Специальный класс.
- * @param displayName Отображаемое имя компонента.
- * @return Элемент.
- */
-const createLayout = (specificClass, displayName) => {
-    const Component = (0, react_1.forwardRef)((_a, ref) => {
-        var { className, element: Element = 'div', disabledOn = [] } = _a, restProps = __rest(_a, ["className", "element", "disabledOn"]);
-        return (react_1.default.createElement(Element, Object.assign({}, restProps, { ref: ref, className: cx('layout', specificClass, className, disabledOn.map(key => `disabled-${key}`)) })));
-    });
-    Component.displayName = displayName;
-    return Component;
-};
-const DesktopLayout = createLayout('desktop', 'DesktopLayout');
-exports.DesktopLayout = DesktopLayout;
-const MobileLayout = createLayout('mobile', 'MobileLayout');
-exports.MobileLayout = MobileLayout;
+exports.DesktopLayout = exports.MobileLayout = exports.Layout = void 0;
+const layout_1 = require("./layout");
+Object.defineProperty(exports, "Layout", { enumerable: true, get: function () { return layout_1.Layout; } });
+const legacy_1 = require("./legacy");
+Object.defineProperty(exports, "MobileLayout", { enumerable: true, get: function () { return legacy_1.MobileLayout; } });
+Object.defineProperty(exports, "DesktopLayout", { enumerable: true, get: function () { return legacy_1.DesktopLayout; } });

package/layout/layout.d.ts

@@ -0,0 +1,10 @@
+import { Ref } from 'react';
+import { LayoutProps } from './types';
+/**
+ * Контейнер, формирующий отступы по горизонтали в соответствии с дизайн-гайдами.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Layout({ children, className, disabledOn, rootRef, ...rest }: Omit<LayoutProps, 'element'> & {
+    rootRef?: Ref<HTMLDivElement>;
+}): JSX.Element;