@sima-land/ui-nucleons 45.0.0-alpha.2 → 45.0.0-alpha.20

package/avatar/avatar.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Avatar = Avatar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const bind_1 = __importDefault(require("classnames/bind"));
+const avatar_m_scss_1 = __importDefault(require("./avatar.m.scss"));
+const cx = bind_1.default.bind(avatar_m_scss_1.default);
+/**
+ * Аватар - блок для репрезентации пользователя с помощью картинки, инициалов или иконки-заглушки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Avatar({ src, className, style, children, 'data-testid': testId = 'avatar', }) {
+    const [needImage, toggleNeedImage] = (0, react_1.useState)(() => Boolean(src));
+    (0, react_1.useEffect)(() => {
+        toggleNeedImage(Boolean(src));
+    }, [src]);
+    const rootClassName = cx('root', needImage && 'image-overlay', className);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: rootClassName, style: style, "data-testid": testId, children: [needImage && ((0, jsx_runtime_1.jsx)("img", { src: src, alt: '', className: cx('image'), onError: () => toggleNeedImage(false) })), !needImage && (0, jsx_runtime_1.jsx)("span", { className: cx('content'), children: children })] }));
+}
+//# sourceMappingURL=avatar.js.map

package/avatar/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../src/avatar/avatar.tsx"],"names":[],"mappings":";;;;;AAYA,wBA0BC;;AArCD,iCAA4C;AAC5C,2DAAyC;AACzC,oEAAqC;AAErC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,uBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACH,SAAgB,MAAM,CAAC,EACrB,GAAG,EACH,SAAS,EACT,KAAK,EACL,QAAQ,EACR,aAAa,EAAE,MAAM,GAAG,QAAQ,GACpB;IACZ,MAAM,CAAC,SAAS,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAC,GAAG,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAElE,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,eAAe,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;IAChC,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,aAAa,GAAG,EAAE,CAAC,MAAM,EAAE,SAAS,IAAI,eAAe,EAAE,SAAS,CAAC,CAAC;IAE1E,OAAO,CACL,kCAAM,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,KAAK,iBAAe,MAAM,aAE9D,SAAS,IAAI,CACZ,gCAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAC,EAAE,EAAC,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,CAAC,GAAI,CACxF,EAGA,CAAC,SAAS,IAAI,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAAG,QAAQ,GAAQ,IAC3D,CACR,CAAC;AACJ,CAAC"}

package/avatar/avatar.m.scss

@@ -0,0 +1,52 @@
+@use '../colors';
+
+@mixin layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-grow: 0;
+  flex-shrink: 0;
+  border-radius: 50%;
+  overflow: hidden;
+  width: var(--avatar-size, 72px);
+  height: var(--avatar-size, 72px);
+  color: var(--avatar-text-color, #{colors.$basic-gray87});
+  &::before {
+    @include layer;
+    content: '';
+    display: block;
+    background: var(--avatar-color, #{colors.$basic-gray4});
+    opacity: var(--avatar-color-opacity, 1);
+  }
+  &.image-overlay::after {
+    @include layer;
+    content: '';
+    pointer-events: none;
+    background: #000;
+    opacity: 0.04;
+  }
+}
+
+.image {
+  @include layer;
+  object-fit: cover;
+}
+
+.content {
+  font-size: var(--avatar-font-size, calc(var(--avatar-size, 72px) / 3));
+  position: relative;
+  font-weight: 600;
+  white-space: nowrap;
+
+  // ВАЖНО: чтобы например обертка в виде ссылки не накидывала text-decoration: underline
+  text-decoration: none;
+}

package/avatar/index.d.ts

@@ -1,30 +1,3 @@
-import { CSSProperties } from 'react';
-import { Token } from '../colors';
-export interface AvatarProps {
-    /** Цвет аватара без картинки. */
-    bgColor?: Token;
-    /** Цвет аватара без картинки. */
-    bgOpacity?: number;
-    /** Класс. */
-    className?: string;
-    /** Ссылка на картинку. */
-    imageUrl?: string;
-    /** Монограмма без картинки. */
-    monogram?: string;
-    /** Размер аватара. */
-    size?: number;
-    /** Стиль элементов rect/image, формирующего маску "super ellipse". */
-    style?: CSSProperties;
-    /** Цвет текста без картинки. */
-    textColor?: Token;
-    /** Текст без картинки. */
-    title?: string;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Компонент аватара.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-export declare const Avatar: ({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, "data-testid": testId, }: AvatarProps) => JSX.Element;
+export type { AvatarProps, AvatarStyle } from './types';
+export { Avatar } from './avatar';
+export { getNameInitials, getAvatarIconProps, getUserAvatarProps, getUserAvatarColor, } from './utils';

package/avatar/index.js

@@ -1,65 +1,11 @@
 "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.Avatar = void 0;
-const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const colors_1 = require("../colors");
-const person_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/person"));
-const avatar_module_scss_1 = __importDefault(require("./avatar.module.scss"));
-const utils_1 = require("./utils");
-const colors_2 = require("../styling/colors");
-const cx = bind_1.default.bind(avatar_module_scss_1.default);
-const SIZES = [40, 48, 56, 64, 72, 80, 104];
-const ICON_SIZES = {
-    40: 16,
-    48: 24,
-    56: 24,
-    64: 24,
-    72: 24,
-    80: 24,
-    104: 24,
-};
-/**
- * Компонент аватара.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-const Avatar = ({ size: sizeProp = 72, imageUrl, bgColor = 'basic-gray4', bgOpacity = 1, textColor = 'basic-gray87', title, monogram = (0, utils_1.getMonogram)(title), className, style, 'data-testid': testId = 'avatar', }) => {
-    const [needImage, toggleImage] = (0, react_1.useState)(Boolean(imageUrl));
-    (0, react_1.useEffect)(() => {
-        toggleImage(Boolean(imageUrl));
-    }, [imageUrl]);
-    const size = SIZES.includes(sizeProp) ? sizeProp : 72;
-    return (react_1.default.createElement("div", { "data-testid": testId, className: cx('root', `size-${size}`, (0, colors_2.color)(textColor), className), style: Object.assign(Object.assign({}, style), { '--avatar-color': !needImage ? colors_1.COLORS.get(bgColor) : undefined, '--avatar-color-opacity': bgOpacity }) },
-        !needImage && (react_1.default.createElement(react_1.default.Fragment, null, monogram ? (react_1.default.createElement("span", { className: cx('monogram') }, monogram.slice(0, 2).toUpperCase())) : (react_1.default.createElement(person_1.default, { fill: colors_1.COLORS.get(textColor), width: ICON_SIZES[size], height: ICON_SIZES[size], className: cx('icon') })))),
-        needImage && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("img", { src: imageUrl, alt: '', className: cx('layer', 'image'), onError: () => toggleImage(false) }),
-            react_1.default.createElement("div", { className: cx('layer', 'image-overlay') })))));
-};
-exports.Avatar = Avatar;
+exports.getUserAvatarColor = exports.getUserAvatarProps = exports.getAvatarIconProps = exports.getNameInitials = exports.Avatar = void 0;
+var avatar_1 = require("./avatar");
+Object.defineProperty(exports, "Avatar", { enumerable: true, get: function () { return avatar_1.Avatar; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getNameInitials", { enumerable: true, get: function () { return utils_1.getNameInitials; } });
+Object.defineProperty(exports, "getAvatarIconProps", { enumerable: true, get: function () { return utils_1.getAvatarIconProps; } });
+Object.defineProperty(exports, "getUserAvatarProps", { enumerable: true, get: function () { return utils_1.getUserAvatarProps; } });
+Object.defineProperty(exports, "getUserAvatarColor", { enumerable: true, get: function () { return utils_1.getUserAvatarColor; } });
+//# sourceMappingURL=index.js.map

package/avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/avatar/index.ts"],"names":[],"mappings":";;;AACA,mCAAkC;AAAzB,gGAAA,MAAM,OAAA;AACf,iCAKiB;AAJf,wGAAA,eAAe,OAAA;AACf,2GAAA,kBAAkB,OAAA;AAClB,2GAAA,kBAAkB,OAAA;AAClB,2GAAA,kBAAkB,OAAA"}

package/avatar/types.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { WithTestId } from '../types';
+export interface AvatarStyle extends CSSProperties {
+    '--avatar-size'?: string;
+    '--avatar-color'?: string;
+    '--avatar-color-opacity'?: number | string;
+    '--avatar-text-color'?: string;
+    '--avatar-font-size'?: string;
+}
+export interface AvatarProps extends WithTestId {
+    /** Класс. */
+    className?: string;
+    /** Изображение. */
+    src?: string;
+    /** Стили. */
+    style?: AvatarStyle;
+    /** Содержимое. */
+    children?: ReactNode;
+}

package/avatar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/avatar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/avatar/types.ts"],"names":[],"mappings":""}

package/avatar/utils.d.ts

@@ -1,6 +1,30 @@
+import type { SVGAttributes } from 'react';
+import type { AvatarProps } from './types';
 /**
- * Формирует монограмму из переданной строки.
- * @param value Переданная строка.
- * @return Монограмма.
+ * Возвращает свойства для аватара пользователя.
+ * @param payload Данные пользователя.
+ * @param customProps Дополнительные свойства аватара.
+ * @return Свойства.
  */
-export declare const getMonogram: (value: any) => string;
+export declare function getUserAvatarProps({ id, name, image, }: {
+    id?: number;
+    name?: string;
+    image?: string;
+}, customProps?: AvatarProps): AvatarProps;
+/**
+ * Возвращает цвет аватара текущего пользователя.
+ * @param identity Срока, идентифицирующая пользователя.
+ * @return Цвет.
+ */
+export declare function getUserAvatarColor(identity: string): string;
+/**
+ * Формирует инициалы имени.
+ * @param value Строка.
+ * @return Инициалы.
+ */
+export declare function getNameInitials(value: any): string;
+/**
+ * Возвращает свойства для иконки внутри аватара.
+ * @return Свойства.
+ */
+export declare function getAvatarIconProps(): SVGAttributes<SVGSVGElement>;

package/avatar/utils.js

@@ -1,19 +1,83 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getMonogram = void 0;
-const lodash_1 = require("lodash");
+exports.getUserAvatarProps = getUserAvatarProps;
+exports.getUserAvatarColor = getUserAvatarColor;
+exports.getNameInitials = getNameInitials;
+exports.getAvatarIconProps = getAvatarIconProps;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Person_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Person"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_m_scss_1 = __importDefault(require("./utils.m.scss"));
+const USER_AVATAR_COLORS = [
+    '#eb8585',
+    '#fda09b',
+    '#f49bb1',
+    '#ffd785',
+    '#ffbb85',
+    '#89d7c7',
+    '#85e5ac',
+    '#b5ef90',
+    '#93c4ee',
+    '#85caf5',
+    '#85ddea',
+    '#b3c1c7',
+    '#dc9bd5',
+    '#b4a8f0',
+    '#c999e9',
+];
 /**
- * Формирует монограмму из переданной строки.
- * @param value Переданная строка.
- * @return Монограмма.
+ * Возвращает свойства для аватара пользователя.
+ * @param payload Данные пользователя.
+ * @param customProps Дополнительные свойства аватара.
+ * @return Свойства.
  */
-const getMonogram = (value) => (0, lodash_1.isString)(value)
-    ? value
-        .split(/\s+/g)
-        .slice(0, 2)
-        .map(s => s[0])
-        .reverse()
-        .join('')
-        .toUpperCase()
-    : '';
-exports.getMonogram = getMonogram;
+function getUserAvatarProps({ id, name, image, }, customProps) {
+    return {
+        src: image,
+        children: getNameInitials(name) || (0, jsx_runtime_1.jsx)(Person_1.default, { ...getAvatarIconProps() }),
+        ...customProps,
+        className: (0, classnames_1.default)(utils_m_scss_1.default.user, customProps?.className),
+        style: {
+            '--avatar-color': id ? getUserAvatarColor(`${id}`) : undefined,
+            ...customProps?.style,
+        },
+    };
+}
+/**
+ * Возвращает цвет аватара текущего пользователя.
+ * @param identity Срока, идентифицирующая пользователя.
+ * @return Цвет.
+ */
+function getUserAvatarColor(identity) {
+    let total = 0;
+    for (let i = 0; i < identity.length; i++) {
+        total += identity.charCodeAt(i);
+    }
+    const list = USER_AVATAR_COLORS;
+    const hash = total % list.length;
+    return list[hash];
+}
+/**
+ * Формирует инициалы имени.
+ * @param value Строка.
+ * @return Инициалы.
+ */
+function getNameInitials(value) {
+    if (typeof value === 'string') {
+        return (value[0] ?? '').toUpperCase();
+    }
+    return '';
+}
+/**
+ * Возвращает свойства для иконки внутри аватара.
+ * @return Свойства.
+ */
+function getAvatarIconProps() {
+    return {
+        className: utils_m_scss_1.default.icon,
+    };
+}
+//# sourceMappingURL=utils.js.map

package/avatar/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/avatar/utils.tsx"],"names":[],"mappings":";;;;;AA8BA,gDAsBC;AAOD,gDAWC;AAOD,0CAMC;AAMD,gDAIC;;AA3FD,6FAAwE;AACxE,4DAAoC;AACpC,kEAAoC;AAEpC,MAAM,kBAAkB,GAA0B;IAChD,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;IACT,SAAS;CACV,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,kBAAkB,CAChC,EACE,EAAE,EACF,IAAI,EACJ,KAAK,GAKN,EACD,WAAyB;IAEzB,OAAO;QACL,GAAG,EAAE,KAAK;QACV,QAAQ,EAAE,eAAe,CAAC,IAAI,CAAC,IAAI,uBAAC,gBAAS,OAAK,kBAAkB,EAAE,GAAI;QAC1E,GAAG,WAAW;QACd,SAAS,EAAE,IAAA,oBAAU,EAAC,sBAAM,CAAC,IAAI,EAAE,WAAW,EAAE,SAAS,CAAC;QAC1D,KAAK,EAAE;YACL,gBAAgB,EAAE,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;YAC9D,GAAG,WAAW,EAAE,KAAK;SACtB;KACF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,QAAgB;IACjD,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,KAAK,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAClC,CAAC;IAED,MAAM,IAAI,GAAG,kBAAkB,CAAC;IAChC,MAAM,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC;IAEjC,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC;AACpB,CAAC;AAED;;;;GAIG;AACH,SAAgB,eAAe,CAAC,KAAU;IACxC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;IACxC,CAAC;IAED,OAAO,EAAE,CAAC;AACZ,CAAC;AAED;;;GAGG;AACH,SAAgB,kBAAkB;IAChC,OAAO;QACL,SAAS,EAAE,sBAAM,CAAC,IAAI;KACvB,CAAC;AACJ,CAAC"}

package/avatar/utils.m.scss

@@ -0,0 +1,10 @@
+.icon {
+  display: block;
+  fill: currentColor;
+  width: calc(var(--avatar-size, 72px) / 2);
+  height: calc(var(--avatar-size, 72px) / 2);
+}
+
+.user {
+  --avatar-text-color: #fff;
+}

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

@@ -1,11 +1,10 @@
-/// <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;
+export declare function BaseInput({ inputRef, textareaRef, style, className, restPlaceholder: restPlaceholderProp, 'data-testid': testId, ...props }: BaseInputProps): import("react/jsx-runtime").JSX.Element;

package/base-input/base-input.js

@@ -1,61 +1,26 @@
 "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"));
+exports.BaseInput = BaseInput;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = 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);
+const base_input_m_scss_1 = __importDefault(require("./base-input.m.scss"));
+const cx = bind_1.default.bind(base_input_m_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']);
+function BaseInput({ inputRef, textareaRef, style, className, restPlaceholder: restPlaceholderProp, 'data-testid': testId = 'base-input', ...props }) {
     const textareaInnerRef = (0, react_1.useRef)(null);
     const inputInnerRef = (0, react_1.useRef)(null);
     (0, react_1.useImperativeHandle)(textareaRef, () => textareaInnerRef.current);
@@ -68,16 +33,15 @@ function BaseInput(_a) {
     });
     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
+        field = ((0, jsx_runtime_1.jsx)("textarea", { ...(0, utils_1.omitMultiline)(props), ref: textareaInnerRef, rows: props.rows ?? 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);
+                props.onInput?.(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') })));
+        field = ((0, jsx_runtime_1.jsx)("input", { ...(0, utils_1.omitMultiline)(props), ref: inputInnerRef, "data-testid": 'base-input:field' // ВАЖНО: не даем переопределить data-test-id
+            , className: cx('field', 'reset') }));
     }
     let restPlaceholder = null;
     // скрываем rest placeholder для неконтролируемых полей
@@ -85,12 +49,8 @@ function BaseInput(_a) {
         restPlaceholder =
             typeof restPlaceholderProp === 'string'
                 ? { shiftValue: String(props.value), value: restPlaceholderProp }
-                : Object.assign({ shiftValue: String(props.value), value: '' }, restPlaceholderProp);
+                : { 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));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: cx('reset', 'root', className), "data-testid": testId, children: [!props.multiline && restPlaceholder && restPlaceholder.value && ((0, jsx_runtime_1.jsxs)("span", { "aria-hidden": true, className: cx('rest-placeholder'), children: [(0, jsx_runtime_1.jsx)("span", { "data-testid": 'rest-placeholder-shift', className: cx('shift-part'), children: restPlaceholder.shiftValue }), (0, jsx_runtime_1.jsx)("span", { "data-testid": 'rest-placeholder', className: cx('main-part'), children: restPlaceholder.value })] })), field] }));
 }
-exports.BaseInput = BaseInput;
+//# sourceMappingURL=base-input.js.map

package/base-input/base-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-input.js","sourceRoot":"","sources":["../../src/base-input/base-input.tsx"],"names":[],"mappings":"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"}

package/base-input/{base-input.module.scss → base-input.m.scss}

@@ -1,4 +1,5 @@
 @use '../utils';
+@use '../colors';
 
 .reset {
   border: 0;
@@ -16,21 +17,32 @@
   flex-grow: 1;
   display: flex;
   overflow: hidden;
+  background: var(--base-input-background);
 }
 
 .field {
   width: 0;
   flex-grow: 1;
   display: block;
-  color: inherit;
+  background: var(--base-input-background, inherit);
+  color: var(--base-input-color, inherit);
   font-size: inherit;
   line-height: inherit;
-  z-index: 1;
+  z-index: 0;
   text-overflow: inherit;
-  background: inherit;
   &::placeholder {
+    color: var(--base-input-placeholder-color);
+    -webkit-text-fill-color: var(--base-input-placeholder-color);
+    opacity: 1;
+  }
+  &:disabled {
+    background: var(--base-input-background);
+    color: var(--base-input-color);
+  }
+  &:disabled::placeholder {
+    color: var(--base-input-placeholder-color);
+    -webkit-text-fill-color: var(--base-input-placeholder-color);
     opacity: 1;
-    color: var(--placeholder-color);
   }
   &::-ms-clear {
     // отключаем системный крестик в IE
@@ -56,11 +68,11 @@
   font-size: inherit;
   line-height: inherit;
   overflow: hidden;
-  z-index: 0;
+  z-index: 1;
   .shift-part {
     color: transparent;
   }
   .main-part {
-    color: var(--placeholder-color);
+    color: var(--base-input-placeholder-color);
   }
 }

package/base-input/index.js

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BaseInput = void 0;
 var base_input_1 = require("./base-input");
 Object.defineProperty(exports, "BaseInput", { enumerable: true, get: function () { return base_input_1.BaseInput; } });
+//# sourceMappingURL=index.js.map

package/base-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/base-input/index.ts"],"names":[],"mappings":";;;AAOA,2CAAyC;AAAhC,uGAAA,SAAS,OAAA"}

package/base-input/types.d.ts

@@ -1,14 +1,17 @@
-import { InputHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import type { CSSProperties, InputHTMLAttributes, Ref, TextareaHTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
 export interface RestPlaceholderDefinition {
     /** Текст placeholder'а. */
     value: string;
     /** Значение, смещающее placeholder. По умолчанию используется значение в поле ввода. */
     shiftValue?: string;
 }
-export interface BaseInputStyle extends React.CSSProperties {
-    '--placeholder-color'?: string;
+export interface BaseInputStyle extends CSSProperties {
+    '--base-input-background'?: string;
+    '--base-input-color'?: string;
+    '--base-input-placeholder-color'?: string;
 }
-export interface CommonProps {
+export interface CommonProps extends WithTestId {
     /** Остаточный placeholder (выводится после введенного значения). */
     restPlaceholder?: string | RestPlaceholderDefinition;
     /** Стили корневого элемента. */
@@ -19,8 +22,6 @@ export interface CommonProps {
     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;

package/base-input/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/base-input/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/base-input/types.ts"],"names":[],"mappings":""}

package/base-input/utils.js

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

package/base-input/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/base-input/utils.ts"],"names":[],"mappings":";;AAKA,sCAMC;AAXD;;;;GAIG;AACH,SAAgB,aAAa,CAAgC,MAAS;IACpE,MAAM,IAAI,GAAG,EAAE,GAAG,MAAM,EAAE,CAAC;IAE3B,OAAO,IAAI,CAAC,SAAS,CAAC;IAEtB,OAAO,IAAI,CAAC;AACd,CAAC"}