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

package/autocomplete-deprecated/index.js

@@ -0,0 +1,130 @@
+"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.Autocomplete = void 0;
+const react_1 = __importStar(require("react"));
+const dropdown_1 = require("../dropdown");
+const dropdown_item_1 = require("../dropdown-item");
+const text_field_1 = require("../text-field");
+const dropdown_2 = require("../_internal/utils/dropdown");
+const down_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/down"));
+const up_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/up"));
+const dropdown_loading_1 = require("../_internal/dropdown-loading");
+const bind_1 = __importDefault(require("classnames/bind"));
+const autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
+const cx = bind_1.default.bind(autocomplete_module_scss_1.default);
+/**
+ * Поле ввода с подсказками.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/autocomplete".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const Autocomplete = (_a) => {
+    var { items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem = String, preset = 'default', 'data-testid': dataTestId } = _a, restProps = __rest(_a, ["items", "itemSize", "onSelect", "onChange", "onKeyDown", "style", "className", "value", "defaultValue", "loading", "renderItem", "preset", 'data-testid']);
+    const osComponentRef = (0, react_1.useRef)(null);
+    const fieldRef = (0, react_1.useRef)(null);
+    const menuRef = (0, react_1.useRef)(null);
+    const [withMenu, toggleMenu] = (0, react_1.useState)(false);
+    const [realValue, setRealValue] = (0, react_1.useState)(value || defaultValue);
+    const [activeIndex, setActiveIndex] = (0, react_1.useState)(null);
+    const needMenu = preset === 'filled-only-list' ? withMenu && realValue && realValue.length > 0 : withMenu;
+    const arrowIcon = needMenu ? (react_1.default.createElement(up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : (react_1.default.createElement(down_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-down' }));
+    const endAdornment = preset === 'default' ? arrowIcon : undefined;
+    (0, react_1.useEffect)(() => {
+        setRealValue(value);
+    }, [value]);
+    (0, react_1.useEffect)(() => {
+        setActiveIndex(null);
+    }, [items]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const menu = menuRef.current;
+        const osInstance = (_a = osComponentRef.current) === null || _a === void 0 ? void 0 : _a.osInstance();
+        if (menu && osInstance && activeIndex !== null) {
+            const child = menu.querySelectorAll('[role="menuitem"]')[activeIndex];
+            child instanceof HTMLElement &&
+                osInstance.scroll({
+                    el: child,
+                    scroll: { y: 'ifneeded' },
+                });
+        }
+    }, [activeIndex]);
+    return (react_1.default.createElement("div", { style: style, className: cx('root', className), "data-testid": dataTestId },
+        react_1.default.createElement(text_field_1.TextField, Object.assign({}, restProps, { ref: fieldRef, focused: withMenu, endAdornment: endAdornment, "data-testid": 'autocomplete:field', variant: 'desktop', value: realValue, multiline: false, className: cx('field'), onFocus: () => {
+                toggleMenu(true);
+                setActiveIndex(null);
+            }, onBlur: () => {
+                toggleMenu(false);
+            }, onChange: (event) => {
+                setRealValue(event.target.value);
+                setActiveIndex(0);
+                onChange === null || onChange === void 0 ? void 0 : onChange(event);
+            }, onKeyDown: (event) => {
+                const size = (items === null || items === void 0 ? void 0 : items.length) || 0;
+                let nextIndex;
+                switch (event.key) {
+                    case 'ArrowDown':
+                        nextIndex = (activeIndex !== null ? size + activeIndex + 1 : 0) % size;
+                        break;
+                    case 'ArrowUp':
+                        nextIndex = (size + Number(activeIndex) - 1) % size;
+                        break;
+                    case 'Enter':
+                        if (items && activeIndex !== null && items.length > activeIndex) {
+                            onSelect && onSelect(items[activeIndex]);
+                            toggleMenu(false);
+                        }
+                        break;
+                }
+                if (typeof nextIndex === 'number') {
+                    event.preventDefault(); // не даём каретке в поле перемещаться
+                    setActiveIndex(nextIndex);
+                }
+                onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+            } })),
+        needMenu && (react_1.default.createElement(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }), loading ? (react_1.default.createElement(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : (react_1.default.createElement(react_1.default.Fragment, null, items && items.length > 0 ? (items.map((item, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: itemSize, key: index, role: 'menuitem', checked: index === activeIndex, onMouseDown: event => {
+                // чтобы при нажатии на опцию предотвратить blur на поле
+                event.preventDefault();
+            }, onClick: () => {
+                onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
+                setActiveIndex(null);
+                toggleMenu(false);
+            } }, renderItem(item))))) : (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 'm', noHover: true }, "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E"))))))));
+};
+exports.Autocomplete = Autocomplete;

package/avatar/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { CSSProperties } from 'react';
 import { Token } from '../colors';
 export interface AvatarProps {
     /** Цвет аватара без картинки. */
@@ -14,7 +14,7 @@ export interface AvatarProps {
     /** Размер аватара. */
     size?: number;
     /** Стиль элементов rect/image, формирующего маску "super ellipse". */
-    style?: React.CSSProperties;
+    style?: CSSProperties;
     /** Цвет текста без картинки. */
     textColor?: Token;
     /** Текст без картинки. */

package/avatar/user.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AvatarProps } from '.';
-export declare type UserAvatarProps = Omit<AvatarProps, 'bgColor' | 'bgOpacity' | 'textColor'>;
+export type UserAvatarProps = Omit<AvatarProps, 'bgColor' | 'bgOpacity' | 'textColor'>;
 export declare const colorKey: unique symbol;
 /**
  * Компонент аватара пользователя (не сотрудника).

package/base-input/base-input.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BaseInputProps } from './types';
+/**
+ * Поле ввода текста.
+ * Позволяет выводить "остаточный placeholder".
+ * Может выводиться в однострочном и многострочном режимах.
+ * В многострочном режиме автоматически подстраивает высоту под введенный текст.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BaseInput({ inputRef, textareaRef, style, className, restPlaceholder: restPlaceholderProp, 'data-testid': testId, ...props }: BaseInputProps): JSX.Element;

package/base-input/base-input.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.BaseInput = void 0;
+const react_1 = __importStar(require("react"));
+const fit_element_height_1 = require("../helpers/fit-element-height");
+const hooks_1 = require("../hooks");
+const utils_1 = require("./utils");
+const bind_1 = __importDefault(require("classnames/bind"));
+const base_input_module_scss_1 = __importDefault(require("./base-input.module.scss"));
+const cx = bind_1.default.bind(base_input_module_scss_1.default);
+/**
+ * Поле ввода текста.
+ * Позволяет выводить "остаточный placeholder".
+ * Может выводиться в однострочном и многострочном режимах.
+ * В многострочном режиме автоматически подстраивает высоту под введенный текст.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BaseInput(_a) {
+    var _b;
+    var { inputRef, textareaRef, style, className, restPlaceholder: restPlaceholderProp, 'data-testid': testId = 'base-input' } = _a, props = __rest(_a, ["inputRef", "textareaRef", "style", "className", "restPlaceholder", 'data-testid']);
+    const textareaInnerRef = (0, react_1.useRef)(null);
+    const inputInnerRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(textareaRef, () => textareaInnerRef.current);
+    (0, react_1.useImperativeHandle)(inputRef, () => inputInnerRef.current);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        // ВАЖНО: после каждого render'а подгоняем высоту многострочного поля под содержимое
+        if (textareaInnerRef.current) {
+            (0, fit_element_height_1.fitElementHeight)({ target: textareaInnerRef.current });
+        }
+    });
+    let field;
+    if (props.multiline) {
+        field = (react_1.default.createElement("textarea", Object.assign({}, (0, utils_1.omitMultiline)(props), { ref: textareaInnerRef, rows: (_b = props.rows) !== null && _b !== void 0 ? _b : 1, "data-testid": 'base-input:field' // ВАЖНО: не даем переопределить data-test-id
+            , className: cx('field', 'reset', 'multiline'), onInput: e => {
+                var _a;
+                (_a = props.onInput) === null || _a === void 0 ? void 0 : _a.call(props, e);
+                (0, fit_element_height_1.fitElementHeight)({ target: e.currentTarget });
+            } })));
+    }
+    else {
+        field = (react_1.default.createElement("input", Object.assign({}, (0, utils_1.omitMultiline)(props), { ref: inputInnerRef, "data-testid": 'base-input:field' // ВАЖНО: не даем переопределить data-test-id
+            , className: cx('field', 'reset') })));
+    }
+    let restPlaceholder = null;
+    // скрываем rest placeholder для неконтролируемых полей
+    if (typeof props.value !== 'undefined') {
+        restPlaceholder =
+            typeof restPlaceholderProp === 'string'
+                ? { shiftValue: String(props.value), value: restPlaceholderProp }
+                : Object.assign({ shiftValue: String(props.value), value: '' }, restPlaceholderProp);
+    }
+    return (react_1.default.createElement("div", { style: style, className: cx('reset', 'root', className), "data-testid": testId },
+        !props.multiline && restPlaceholder && restPlaceholder.value && (react_1.default.createElement("span", { "aria-hidden": true, className: cx('rest-placeholder') },
+            react_1.default.createElement("span", { "data-testid": 'rest-placeholder-shift', className: cx('shift-part') }, restPlaceholder.shiftValue),
+            react_1.default.createElement("span", { "data-testid": 'rest-placeholder', className: cx('main-part') }, restPlaceholder.value))),
+        field));
+}
+exports.BaseInput = BaseInput;

package/base-input/base-input.module.scss

@@ -44,7 +44,7 @@
   }
 }
 
-.fake-text {
+.rest-placeholder {
   pointer-events: none;
   position: absolute;
   top: 0;
@@ -57,10 +57,10 @@
   line-height: inherit;
   overflow: hidden;
   z-index: 0;
-  .invisible-value {
+  .shift-part {
     color: transparent;
   }
-  .placeholder {
+  .main-part {
     color: var(--placeholder-color);
   }
 }

package/base-input/index.d.ts

@@ -1,23 +1,2 @@
-import React from 'react';
-interface RestPlaceholder {
-    value: string;
-    shiftValue?: string;
-}
-interface BaseInputStyle extends React.CSSProperties {
-    '--placeholder-color'?: string;
-}
-export interface CustomProps {
-    multiline?: boolean;
-    /** Остаточный placeholder (выводится после введенного значения). */
-    restPlaceholder?: string | RestPlaceholder;
-    /** Стили. */
-    style?: BaseInputStyle;
-}
-export declare type BaseInputProps = CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement>;
-/**
- * Компонент поля ввода.
- * @param props Свойства. Поддерживаются свойства элемента input.
- * @return Элемент.
- */
-export declare const BaseInput: React.ForwardRefExoticComponent<CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | undefined>>;
-export {};
+export type { RestPlaceholderDefinition, BaseInputAsInputProps, BaseInputAsTextareaProps, BaseInputProps, BaseInputStyle, } from './types';
+export { BaseInput } from './base-input';

package/base-input/index.js

@@ -1,79 +1,5 @@
 "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.BaseInput = void 0;
-const react_1 = __importStar(require("react"));
-const fit_element_height_1 = require("../helpers/fit-element-height");
-const bind_1 = __importDefault(require("classnames/bind"));
-const base_input_module_scss_1 = __importDefault(require("./base-input.module.scss"));
-const cx = bind_1.default.bind(base_input_module_scss_1.default);
-/**
- * Компонент поля ввода.
- * @param props Свойства. Поддерживаются свойства элемента input.
- * @return Элемент.
- */
-exports.BaseInput = (0, react_1.forwardRef)(function BaseInput(_a, ref) {
-    var { className, disabled, multiline, onInput, restPlaceholder: restPlaceholderProp, rows = 1, style, value } = _a, props = __rest(_a, ["className", "disabled", "multiline", "onInput", "restPlaceholder", "rows", "style", "value"]);
-    const Element = multiline
-        ? 'textarea'
-        : 'input';
-    const inputRef = (0, react_1.useRef)();
-    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
-    // при каждом рендере подгоняем высоту поля под содержимое
-    (0, react_1.useEffect)(() => {
-        multiline &&
-            inputRef.current &&
-            (0, fit_element_height_1.fitElementHeight)({
-                target: inputRef.current,
-            });
-    });
-    const restPlaceholder = typeof restPlaceholderProp === 'string'
-        ? { shiftValue: value, value: restPlaceholderProp }
-        : Object.assign({ shiftValue: value }, restPlaceholderProp);
-    return (react_1.default.createElement("div", { style: style, className: cx('reset', 'root', disabled && 'disabled', className) },
-        !multiline && Boolean(restPlaceholder.value) && (react_1.default.createElement("span", { "aria-hidden": true, className: cx('fake-text') },
-            react_1.default.createElement("span", { className: cx('invisible-value') }, restPlaceholder.shiftValue),
-            react_1.default.createElement("span", { className: cx('placeholder') }, restPlaceholder.value))),
-        react_1.default.createElement(Element, Object.assign({}, props, { rows: multiline ? rows : undefined, ref: inputRef, disabled: disabled, 
-            // ВАЖНО: не даем возможности задать стили/классы именно для этого элемента
-            className: cx('field', 'reset', multiline && 'multiline'), value: value, onInput: (event) => {
-                multiline && (0, fit_element_height_1.fitElementHeight)(event);
-                onInput === null || onInput === void 0 ? void 0 : onInput(event);
-            } }))));
-});
+var base_input_1 = require("./base-input");
+Object.defineProperty(exports, "BaseInput", { enumerable: true, get: function () { return base_input_1.BaseInput; } });

package/base-input/types.d.ts

@@ -0,0 +1,31 @@
+import { InputHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+export interface RestPlaceholderDefinition {
+    /** Текст placeholder'а. */
+    value: string;
+    /** Значение, смещающее placeholder. По умолчанию используется значение в поле ввода. */
+    shiftValue?: string;
+}
+export interface BaseInputStyle extends React.CSSProperties {
+    '--placeholder-color'?: string;
+}
+export interface CommonProps {
+    /** Остаточный placeholder (выводится после введенного значения). */
+    restPlaceholder?: string | RestPlaceholderDefinition;
+    /** Стили корневого элемента. */
+    style?: BaseInputStyle;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Ref элемента input. Будет заполнен только при multiline=false. */
+    inputRef?: Ref<HTMLInputElement | null>;
+    /** Ref элемента textarea. Будет заполнен только при multiline=true. */
+    textareaRef?: Ref<HTMLTextAreaElement | null>;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type BaseInputAsInputProps = CommonProps & Omit<InputHTMLAttributes<HTMLInputElement>, keyof CommonProps> & {
+    multiline?: false;
+};
+export type BaseInputAsTextareaProps = CommonProps & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, keyof CommonProps> & {
+    multiline: true;
+};
+export type BaseInputProps = BaseInputAsInputProps | BaseInputAsTextareaProps;

package/base-input/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/base-input/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Получив объект, вернет его копию но без свойства multiline.
+ * @param source Объект.
+ * @return Копия без свойства multiline.
+ */
+export declare function omitMultiline<T extends Record<string, any>>(source: T): Omit<T, 'multiline'>;

package/base-input/utils.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.omitMultiline = void 0;
+/**
+ * Получив объект, вернет его копию но без свойства multiline.
+ * @param source Объект.
+ * @return Копия без свойства multiline.
+ */
+function omitMultiline(source) {
+    const next = Object.assign({}, source);
+    delete next.multiline;
+    return next;
+}
+exports.omitMultiline = omitMultiline;

package/base-input-deprecated/base-input.module.scss

@@ -0,0 +1,66 @@
+@use '../utils';
+
+.reset {
+  border: 0;
+  box-sizing: border-box;
+  font: inherit;
+  margin: 0;
+  outline: 0;
+  padding: 0;
+}
+
+.root {
+  position: relative;
+  background-color: transparent;
+  width: 0;
+  flex-grow: 1;
+  display: flex;
+  overflow: hidden;
+}
+
+.field {
+  width: 0;
+  flex-grow: 1;
+  display: block;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  z-index: 1;
+  text-overflow: inherit;
+  background: inherit;
+  &::placeholder {
+    opacity: 1;
+    color: var(--placeholder-color);
+  }
+  &::-ms-clear {
+    // отключаем системный крестик в IE
+    display: none;
+    height: 0;
+    width: 0;
+  }
+  &.multiline {
+    resize: none;
+    @include utils.hidden-scrollbars;
+  }
+}
+
+.fake-text {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  overflow: hidden;
+  z-index: 0;
+  .invisible-value {
+    color: transparent;
+  }
+  .placeholder {
+    color: var(--placeholder-color);
+  }
+}

package/base-input-deprecated/index.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface RestPlaceholder {
+    value: string;
+    shiftValue?: string;
+}
+interface BaseInputStyle extends React.CSSProperties {
+    '--placeholder-color'?: string;
+}
+export interface CustomProps {
+    multiline?: boolean;
+    /** Остаточный placeholder (выводится после введенного значения). */
+    restPlaceholder?: string | RestPlaceholder;
+    /** Стили. */
+    style?: BaseInputStyle;
+}
+export type BaseInputProps = CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement>;
+/**
+ * Компонент поля ввода.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/base-input".
+ * @param props Свойства. Поддерживаются свойства элемента input.
+ * @return Элемент.
+ */
+export declare const BaseInput: React.ForwardRefExoticComponent<CustomProps & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement | undefined>>;
+export {};

package/base-input-deprecated/index.js

@@ -0,0 +1,80 @@
+"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.BaseInput = void 0;
+const react_1 = __importStar(require("react"));
+const fit_element_height_1 = require("../helpers/fit-element-height");
+const bind_1 = __importDefault(require("classnames/bind"));
+const base_input_module_scss_1 = __importDefault(require("./base-input.module.scss"));
+const cx = bind_1.default.bind(base_input_module_scss_1.default);
+/**
+ * Компонент поля ввода.
+ * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/base-input".
+ * @param props Свойства. Поддерживаются свойства элемента input.
+ * @return Элемент.
+ */
+exports.BaseInput = (0, react_1.forwardRef)(function BaseInput(_a, ref) {
+    var { className, disabled, multiline, onInput, restPlaceholder: restPlaceholderProp, rows = 1, style, value } = _a, props = __rest(_a, ["className", "disabled", "multiline", "onInput", "restPlaceholder", "rows", "style", "value"]);
+    const Element = multiline
+        ? 'textarea'
+        : 'input';
+    const inputRef = (0, react_1.useRef)();
+    (0, react_1.useImperativeHandle)(ref, () => inputRef.current);
+    // при каждом рендере подгоняем высоту поля под содержимое
+    (0, react_1.useEffect)(() => {
+        multiline &&
+            inputRef.current &&
+            (0, fit_element_height_1.fitElementHeight)({
+                target: inputRef.current,
+            });
+    });
+    const restPlaceholder = typeof restPlaceholderProp === 'string'
+        ? { shiftValue: value, value: restPlaceholderProp }
+        : Object.assign({ shiftValue: value }, restPlaceholderProp);
+    return (react_1.default.createElement("div", { "data-testid": 'base-input:root', style: style, className: cx('reset', 'root', disabled && 'disabled', className) },
+        !multiline && Boolean(restPlaceholder.value) && (react_1.default.createElement("span", { "aria-hidden": true, className: cx('fake-text') },
+            react_1.default.createElement("span", { className: cx('invisible-value') }, restPlaceholder.shiftValue),
+            react_1.default.createElement("span", { className: cx('placeholder') }, restPlaceholder.value))),
+        react_1.default.createElement(Element, Object.assign({ "data-testid": 'base-input:field' }, props, { rows: multiline ? rows : undefined, ref: inputRef, disabled: disabled, 
+            // ВАЖНО: не даем возможности задать стили/классы именно для этого элемента
+            className: cx('field', 'reset', multiline && 'multiline'), value: value, onInput: (event) => {
+                multiline && (0, fit_element_height_1.fitElementHeight)(event);
+                onInput === null || onInput === void 0 ? void 0 : onInput(event);
+            } }))));
+});

package/bordered-layout/index.d.ts

@@ -9,6 +9,7 @@ export interface BorderedLayoutProps {
 }
 /**
  * Выводит содержимое по мобильному layout'у с вертикальными полосками.
+ * @deprecated Можно использовать комбинацию Layout, пример есть в Storybook.
  * @param props Свойства компонента.
  * @return Элемент.
  */

package/bordered-layout/index.js

@@ -12,6 +12,7 @@ const bordered_layout_module_scss_1 = __importDefault(require("./bordered-layout
 const cx = bind_1.default.bind(bordered_layout_module_scss_1.default);
 /**
  * Выводит содержимое по мобильному layout'у с вертикальными полосками.
+ * @deprecated Можно использовать комбинацию Layout, пример есть в Storybook.
  * @param props Свойства компонента.
  * @return Элемент.
  */