@sima-land/ui-nucleons 45.0.0-alpha.4 → 45.0.0-alpha.41

package/touch-slider/touch-slider.js

@@ -0,0 +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.TouchSlider = TouchSlider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const layout_1 = require("../layout");
+const page_scroll_lock_1 = require("../_internal/page-scroll-lock");
+const touch_slider_m_scss_1 = __importDefault(require("./touch-slider.m.scss"));
+/**
+ * Блок, прокручиваемый по горизонтали. Реализует отступы MobileLayout.
+ * Предназначен для использования на странице без дополнительных отступов по горизонтали.
+ * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function TouchSlider({ children }) {
+    return ((0, jsx_runtime_1.jsx)(layout_1.MobileLayout, { children: (0, jsx_runtime_1.jsx)("div", { className: touch_slider_m_scss_1.default.outer, [page_scroll_lock_1.BSL_IGNORE_ATTR]: true, children: (0, jsx_runtime_1.jsx)("div", { className: touch_slider_m_scss_1.default.inner, children: children }) }) }));
+}
+//# sourceMappingURL=touch-slider.js.map

package/touch-slider/touch-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"touch-slider.js","sourceRoot":"","sources":["../../src/touch-slider/touch-slider.tsx"],"names":[],"mappings":";;;;;AAYA,kCAQC;;AApBD,sCAAyC;AACzC,oEAAgE;AAEhE,gFAA2C;AAE3C;;;;;;GAMG;AACH,SAAgB,WAAW,CAAC,EAAE,QAAQ,EAAoB;IACxD,OAAO,CACL,uBAAC,qBAAY,cACX,gCAAK,SAAS,EAAE,6BAAM,CAAC,KAAK,EAAQ,CAAC,kCAAe,CAAC,EAAE,IAAI,YACzD,gCAAK,SAAS,EAAE,6BAAM,CAAC,KAAK,YAAG,QAAQ,GAAO,GAC1C,GACO,CAChB,CAAC;AACJ,CAAC"}

package/touch-slider/types.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface TouchSliderProps {
+    /** Прокручиваемое содержимое. */
+    children?: ReactNode;
+}

package/touch-slider/types.js

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

package/touch-slider/types.js.map

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

package/{types.d.ts → types/index.d.ts}

@@ -14,5 +14,5 @@ export interface FieldProps {
     failed?: boolean;
 }
 /** Свойства компонента поля переключателя (input[type="checkbox"]). */
-export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps, WithTestId {
+export interface CheckboxInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, FieldProps, WithTestId {
 }

package/types/index.js

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

package/types/index.js.map

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

package/unknown-content/index.d.ts

@@ -1,13 +1,2 @@
-import React, { ReactNode } from 'react';
-export interface UnknownContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** Строка с html-версткой. */
-    markup?: string;
-    /** Содержимое. */
-    children?: ReactNode;
-}
-/**
- * Компонент, стилизующий верстку по гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function UnknownContent({ markup, children, className }: UnknownContentProps): JSX.Element;
+export type { UnknownContentProps } from './types';
+export { UnknownContent } from './unknown-content';

package/unknown-content/index.js

@@ -1,46 +1,6 @@
 "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.UnknownContent = void 0;
-const react_1 = __importStar(require("react"));
-const utils_1 = require("./utils");
-const classnames_1 = __importDefault(require("classnames"));
-const unknown_content_module_scss_1 = __importDefault(require("./unknown-content.module.scss"));
-/**
- * Компонент, стилизующий верстку по гайдам.
- * @param props Свойства.
- * @return Элемент.
- */
-function UnknownContent({ markup, children, className }) {
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        ref.current && (0, utils_1.setTableRowLabels)(ref.current);
-    });
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, className: (0, classnames_1.default)(unknown_content_module_scss_1.default.root, className) }, (children ? { children } : { dangerouslySetInnerHTML: { __html: markup || '' } }))));
-}
-exports.UnknownContent = UnknownContent;
+var unknown_content_1 = require("./unknown-content");
+Object.defineProperty(exports, "UnknownContent", { enumerable: true, get: function () { return unknown_content_1.UnknownContent; } });
+//# sourceMappingURL=index.js.map

package/unknown-content/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/unknown-content/index.ts"],"names":[],"mappings":";;;AACA,qDAAmD;AAA1C,iHAAA,cAAc,OAAA"}

package/unknown-content/types.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface UnknownContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Строка с html-версткой. */
+    markup?: string;
+    /** Содержимое. */
+    children?: ReactNode;
+}

package/unknown-content/types.js

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

package/unknown-content/types.js.map

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

package/unknown-content/unknown-content.d.ts

@@ -0,0 +1,8 @@
+import type { UnknownContentProps } from './types';
+/**
+ * Блок, стилизующий содержимое по дизайн-гайдам.
+ * @todo Переименовать в StyledMarkup?
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function UnknownContent({ markup, children, className }: UnknownContentProps): import("react/jsx-runtime").JSX.Element;

package/unknown-content/unknown-content.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.UnknownContent = UnknownContent;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const utils_1 = require("./utils");
+const classnames_1 = __importDefault(require("classnames"));
+const unknown_content_m_scss_1 = __importDefault(require("./unknown-content.m.scss"));
+/**
+ * Блок, стилизующий содержимое по дизайн-гайдам.
+ * @todo Переименовать в StyledMarkup?
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function UnknownContent({ markup, children, className }) {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        ref.current && (0, utils_1.setTableRowLabels)(ref.current);
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, classnames_1.default)(unknown_content_m_scss_1.default.root, className), ...(children ? { children } : { dangerouslySetInnerHTML: { __html: markup || '' } }) }));
+}
+//# sourceMappingURL=unknown-content.js.map

package/unknown-content/unknown-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"unknown-content.js","sourceRoot":"","sources":["../../src/unknown-content/unknown-content.tsx"],"names":[],"mappings":";;;;;AAYA,wCAcC;;AAzBD,iCAA0C;AAC1C,mCAA4C;AAC5C,4DAAoC;AACpC,sFAA8C;AAE9C;;;;;GAKG;AACH,SAAgB,cAAc,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAuB;IACjF,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,GAAG,CAAC,OAAO,IAAI,IAAA,yBAAiB,EAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,oBAAU,EAAC,gCAAM,CAAC,IAAI,EAAE,SAAS,CAAC,KACzC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,MAAM,IAAI,EAAE,EAAE,EAAE,CAAC,GACrF,CACH,CAAC;AACJ,CAAC"}

package/unknown-content/utils.js

@@ -8,11 +8,12 @@ exports.setTableRowLabels = void 0;
  */
 const setTableRowLabels = (element) => {
     element.querySelectorAll('tbody td').forEach(td => {
-        var _a;
         // считаем, что parentNode есть всегда т.к. селектор это подразумевает
         const index = [...td.parentNode.children].indexOf(td);
         // считаем, что index не может быть равен -1 т.к. поиск внутри родительского элемента
-        td.setAttribute('data-table-column-title', ((_a = td.closest('table').querySelector(`thead td:nth-child(${index + 1})`)) === null || _a === void 0 ? void 0 : _a.textContent) || '');
+        td.setAttribute('data-table-column-title', td.closest('table').querySelector(`thead td:nth-child(${index + 1})`)
+            ?.textContent || '');
     });
 };
 exports.setTableRowLabels = setTableRowLabels;
+//# sourceMappingURL=utils.js.map

package/unknown-content/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/unknown-content/utils.ts"],"names":[],"mappings":";;;AAAA;;;;GAIG;AACI,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAQ,EAAE;IAC1D,OAAO,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;QAChD,sEAAsE;QACtE,MAAM,KAAK,GAAG,CAAC,GAAI,EAAE,CAAC,UAAyB,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;QAEtE,qFAAqF;QACrF,EAAE,CAAC,YAAY,CACb,yBAAyB,EACxB,EAAE,CAAC,OAAO,CAAC,OAAO,CAAsB,CAAC,aAAa,CAAC,sBAAsB,KAAK,GAAG,CAAC,GAAG,CAAC;YACzF,EAAE,WAAW,IAAI,EAAE,CACtB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAZW,QAAA,iBAAiB,qBAY5B"}

package/upload-area/index.d.ts

@@ -1,2 +1,3 @@
-export type { UploadAreaProps, UploadAreaSize } from './types';
+export type { UploadAreaProps, UploadAreaSize, DescriptionPayload } from './types';
 export { UploadArea } from './upload-area';
+export { getFilesDescription } from './utils';

package/upload-area/index.js

@@ -1,5 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.UploadArea = void 0;
+exports.getFilesDescription = exports.UploadArea = void 0;
 var upload_area_1 = require("./upload-area");
 Object.defineProperty(exports, "UploadArea", { enumerable: true, get: function () { return upload_area_1.UploadArea; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "getFilesDescription", { enumerable: true, get: function () { return utils_1.getFilesDescription; } });
+//# sourceMappingURL=index.js.map

package/upload-area/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/upload-area/index.ts"],"names":[],"mappings":";;;AACA,6CAA2C;AAAlC,yGAAA,UAAU,OAAA;AACnB,iCAA8C;AAArC,4GAAA,mBAAmB,OAAA"}

package/upload-area/types.d.ts

@@ -1,32 +1,35 @@
 import type { ChangeEvent, CSSProperties, DragEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
+import type { WithTestId } from '../types';
 export type UploadAreaSize = 's' | 'm';
-export interface UploadAreaProps {
+export interface UploadAreaProps extends WithTestId {
     /** Размер. */
     size?: UploadAreaSize | 'unset';
     /** CSS-класс корневого элемента. */
     className?: string;
     /** Стили корневого элемента. */
     style?: CSSProperties;
-    /** Ограничение на количество файлов. */
-    countLimit?: number;
+    /** Заголовок. */
+    title?: string;
+    /** Описание. */
+    description?: string;
     /** Состояние с ошибками валидации. */
     failed?: boolean;
     /** Отключенное состояния. */
     disabled?: boolean;
-    /** Роль файлов. */
-    fileRole?: string;
-    /** Форматы файлов, выводятся пользователю. */
-    formats?: string;
     /** Ограничение на количество файлов. */
     multiple?: boolean;
     /** Сработает при выборе или перетаскивании файлов, получив список файлов и событие. */
     onSelect?: (list: File[], event: DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement>) => void;
-    /** Ограничение на размер. */
-    sizeLimit?: string;
     /** Свойства корневого элемента. */
     rootProps?: HTMLAttributes<HTMLElement>;
     /** Свойства элемента input. */
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
+}
+export interface DescriptionPayload {
+    /** Ограничение на количество файлов. */
+    countLimit?: number;
+    /** Ограничение на размер. */
+    sizeLimit?: string;
+    /** Форматы файлов, выводятся пользователю. */
+    formats?: string;
 }

package/upload-area/types.js

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

package/upload-area/types.js.map

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

package/upload-area/upload-area-util.scss

@@ -4,6 +4,7 @@
   --justify-content: flex-start;
   --icon-size: 0;
   --icon-display: none;
+  --icon-gap: 0;
   --min-height: calc(48px + (2 * var(--padding-y)));
 }
 
@@ -13,5 +14,6 @@
   --justify-content: center;
   --icon-size: 64px;
   --icon-display: block;
+  --icon-gap: 24px;
   --min-height: calc(var(--icon-size) + (2 * var(--padding-y)));
 }

package/upload-area/upload-area.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { UploadAreaProps } from './types';
 /**
  * Поля выбора файлов.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function UploadArea({ className, style, size, multiple, disabled, failed, formats, fileRole, countLimit, onSelect, sizeLimit, rootProps, inputProps, 'data-testid': testId, }: UploadAreaProps): JSX.Element;
+export declare function UploadArea({ title, description, className, style, size, multiple, disabled, failed, onSelect, rootProps, inputProps, 'data-testid': testId, }: UploadAreaProps): import("react/jsx-runtime").JSX.Element;

package/upload-area/upload-area.js

@@ -1,105 +1,58 @@
 "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.UploadArea = void 0;
-const react_1 = __importStar(require("react"));
+exports.UploadArea = UploadArea;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const link_1 = require("../link");
 const utils_1 = require("./utils");
-const lodash_1 = require("lodash");
-const get_declination_1 = require("../helpers/get-declination");
-const upload_svg_1 = __importDefault(require("./upload.svg"));
+const Upload_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Stroked/Upload"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const upload_area_module_scss_1 = __importDefault(require("./upload-area.module.scss"));
-const cx = bind_1.default.bind(upload_area_module_scss_1.default);
+const upload_area_m_scss_1 = __importDefault(require("./upload-area.m.scss"));
+const cx = bind_1.default.bind(upload_area_m_scss_1.default);
 /**
  * Поля выбора файлов.
  * @param props Свойства.
  * @return Элемент.
  */
-function UploadArea({ className, style, size = 'm', multiple, disabled, failed, formats, fileRole = 'файл', countLimit = multiple ? undefined : 1, onSelect, sizeLimit, rootProps, inputProps, 'data-testid': testId = 'upload-area', }) {
+function UploadArea({ title, description, className, style, size = 'm', multiple, disabled, failed, onSelect, rootProps, inputProps, 'data-testid': testId = 'upload-area', }) {
     const inputRef = (0, react_1.useRef)(null);
-    const secondaryInfo = (0, lodash_1.upperFirst)([
-        typeof countLimit === 'number' && countLimit > 0
-            ? `${countLimit} ${(0, get_declination_1.getDeclination)(countLimit, ['файл', 'файла', 'файлов'])}`
-            : null,
-        formats ? `формат ${formats}` : null,
-        sizeLimit ? `до ${sizeLimit}` : null,
-    ]
-        .filter(Boolean)
-        .join(', '));
     const filterFiles = (0, react_1.useCallback)((files) => {
         const result = [...files];
-        multiple
-            ? countLimit && Number.isFinite(countLimit) && result.splice(countLimit)
-            : result.splice(1);
+        multiple ? result : result.splice(1);
         return result;
-    }, [multiple, countLimit]);
+    }, [multiple]);
     const onInputChange = (0, react_1.useCallback)(event => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(filterFiles(event.target.files || []), event);
+        onSelect?.(filterFiles(event.target.files || []), event);
         // очищаем поле чтобы можно было выбрать тот же файл повторно
         event.target.value = '';
     }, [filterFiles, onSelect]);
     const { active, bind } = (0, utils_1.useFilesDrop)(event => {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(filterFiles(event.dataTransfer.files), event);
+        onSelect?.(filterFiles(event.dataTransfer.files), event);
     });
     const rootClassName = cx('root', size !== 'unset' && `size-${size}`, { active, failed, disabled }, className);
-    return (react_1.default.createElement("div", Object.assign({}, rootProps, bind, { "data-testid": testId, style: style, className: rootClassName, tabIndex: disabled ? -1 : 0, role: 'button', onFocus: event => {
-            var _a;
+    return ((0, jsx_runtime_1.jsxs)("div", { ...rootProps, ...bind, "data-testid": testId, style: style, className: rootClassName, tabIndex: disabled ? -1 : 0, role: 'button', onFocus: event => {
             if (!disabled) {
-                (_a = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(rootProps, event);
+                rootProps?.onFocus?.(event);
             }
         }, onClick: event => {
-            var _a, _b;
             if (!disabled) {
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                (_b = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onClick) === null || _b === void 0 ? void 0 : _b.call(rootProps, event);
+                inputRef.current?.click();
+                rootProps?.onClick?.(event);
             }
         }, onKeyDown: event => {
-            var _a, _b;
             // имитируем поведение кнопки
             if (!disabled && ['Enter', 'Space'].includes(event.code)) {
-                (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                (_b = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onKeyDown) === null || _b === void 0 ? void 0 : _b.call(rootProps, event);
+                inputRef.current?.click();
+                rootProps?.onKeyDown?.(event);
             }
         }, onBlur: event => {
-            var _a;
-            (_a = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(rootProps, event);
-        } }),
-        react_1.default.createElement(upload_svg_1.default, { className: cx('icon') }),
-        react_1.default.createElement("div", { className: cx('info') },
-            react_1.default.createElement("div", { className: cx('text', 'primary') },
-                react_1.default.createElement("input", Object.assign({}, inputProps, { ref: inputRef, type: 'file', multiple: multiple, className: cx('input'), onChange: onInputChange, onClick: e => {
-                        // для того чтобы при клике на корневом элементе не вызывался второй клик
-                        e.stopPropagation();
-                    }, "data-testid": 'upload-area:input', disabled: disabled })),
-                react_1.default.createElement(link_1.Link, { pseudo: true, "data-testid": 'upload-area:anchor', disabled: disabled },
-                    "\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 ",
-                    fileRole)),
-            secondaryInfo && react_1.default.createElement("div", { className: cx('text', 'secondary') }, secondaryInfo))));
+            rootProps?.onBlur?.(event);
+        }, children: [(0, jsx_runtime_1.jsx)(Upload_1.default, { className: cx('icon') }), (0, jsx_runtime_1.jsxs)("div", { className: cx('info', { empty: !title && !description }), children: [(0, jsx_runtime_1.jsxs)("div", { className: cx('text', 'primary'), children: [(0, jsx_runtime_1.jsx)("input", { ...inputProps, ref: inputRef, type: 'file', multiple: multiple, className: cx('input', inputProps?.className), onChange: onInputChange, onClick: e => {
+                                    // ВАЖНО: для того чтобы при клике на корневом элементе не вызывался второй клик
+                                    e.stopPropagation();
+                                }, "data-testid": 'upload-area:input', disabled: disabled }), (0, jsx_runtime_1.jsx)(link_1.Link, { pseudo: true, "data-testid": 'upload-area:anchor', disabled: disabled, children: title })] }), description && (0, jsx_runtime_1.jsx)("div", { className: cx('text', 'secondary'), children: description })] })] }));
 }
-exports.UploadArea = UploadArea;
+//# sourceMappingURL=upload-area.js.map

package/upload-area/upload-area.js.map

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

package/upload-area/{upload-area.module.scss → upload-area.m.scss}

@@ -43,10 +43,13 @@
   height: var(--icon-size);
   display: var(--icon-display);
   flex-shrink: 0;
-  margin-right: 24px;
   fill: colors.$basic-gray24;
 }
 
+.icon + .info:not(.empty) {
+  margin-left: var(--icon-gap);
+}
+
 .info {
   display: flex;
   flex-direction: column;

package/upload-area/utils.d.ts

@@ -1,4 +1,5 @@
 import { DragEventHandler } from 'react';
+import { DescriptionPayload } from './types';
 type UseFilesDropResult<T> = {
     active: boolean;
     bind: {
@@ -14,4 +15,10 @@ type UseFilesDropResult<T> = {
  * @return Данные.
  */
 export declare function useFilesDrop<T extends HTMLElement = HTMLElement>(callback: DragEventHandler<T>): UseFilesDropResult<T>;
+/**
+ * Возвращает строку с описанием файлов для отправки по дизайн-гайдам.
+ * @param payload Информация о файлах.
+ * @return Строка.
+ */
+export declare function getFilesDescription({ countLimit, sizeLimit, formats, }: DescriptionPayload): string;
 export {};

package/upload-area/utils.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFilesDrop = void 0;
+exports.useFilesDrop = useFilesDrop;
+exports.getFilesDescription = getFilesDescription;
 const react_1 = require("react");
-const identity_1 = require("../hooks/identity");
+const use_identity_ref_1 = require("../hooks/use-identity-ref");
+const get_declination_1 = require("../helpers/get-declination");
 /**
  * Хук обработки перетаскивания файлов на элемент.
  * @param callback Опции.
@@ -10,7 +12,7 @@ const identity_1 = require("../hooks/identity");
  */
 function useFilesDrop(callback) {
     const [active, setActive] = (0, react_1.useState)(false);
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
+    const callbackRef = (0, use_identity_ref_1.useIdentityRef)(callback);
     const onDragEnter = (0, react_1.useCallback)(event => {
         event.preventDefault();
         setActive(true);
@@ -45,4 +47,21 @@ function useFilesDrop(callback) {
         },
     };
 }
-exports.useFilesDrop = useFilesDrop;
+/**
+ * Возвращает строку с описанием файлов для отправки по дизайн-гайдам.
+ * @param payload Информация о файлах.
+ * @return Строка.
+ */
+function getFilesDescription({ countLimit, sizeLimit, formats, }) {
+    const description = [
+        typeof countLimit === 'number' && countLimit > 0
+            ? `${countLimit} ${(0, get_declination_1.getDeclination)(countLimit, ['файл', 'файла', 'файлов'])}`
+            : null,
+        formats ? `формат ${formats}` : null,
+        sizeLimit ? `до ${sizeLimit}` : null,
+    ]
+        .filter(Boolean)
+        .join(', ');
+    return description;
+}
+//# sourceMappingURL=utils.js.map

package/upload-area/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/upload-area/utils.ts"],"names":[],"mappings":";;AAoBA,oCA+CC;AAOD,kDAkBC;AA5FD,iCAAgE;AAChE,gEAA2D;AAC3D,gEAA4D;AAa5D;;;;GAIG;AACH,SAAgB,YAAY,CAC1B,QAA6B;IAE7B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,WAAW,GAAG,IAAA,iCAAc,EAAC,QAAQ,CAAC,CAAC;IAE7C,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC1D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,KAAK,CAAC;QAE/C,2CAA2C;QAC3C,IACE,CAAC,aAAa;YACd,CAAC,aAAa,YAAY,IAAI;gBAC5B,aAAa,YAAY,IAAI;gBAC7B,CAAC,aAAa,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,EACzC,CAAC;YACD,SAAS,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,MAAM,GAAG,IAAA,mBAAW,EAAsB,KAAK,CAAC,EAAE;QACtD,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,SAAS,CAAC,KAAK,CAAC,CAAC;QACjB,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,MAAM;QAEN,IAAI,EAAE;YACJ,WAAW;YACX,UAAU;YACV,WAAW;YACX,MAAM;SACP;KACF,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAClC,UAAU,EACV,SAAS,EACT,OAAO,GACY;IACnB,MAAM,WAAW,GAAW;QAC1B,OAAO,UAAU,KAAK,QAAQ,IAAI,UAAU,GAAG,CAAC;YAC9C,CAAC,CAAC,GAAG,UAAU,IAAI,IAAA,gCAAc,EAAC,UAAU,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5E,CAAC,CAAC,IAAI;QAER,OAAO,CAAC,CAAC,CAAC,UAAU,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI;QAEpC,SAAS,CAAC,CAAC,CAAC,MAAM,SAAS,EAAE,CAAC,CAAC,CAAC,IAAI;KACrC;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,IAAI,CAAC,CAAC;IAEd,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/_internal/custom-scrollbar/custom-scrollbar.module.scss

@@ -1,54 +0,0 @@
-@use '../../colors';
-
-// important используется здесь так как в storybook оригинальные стили почему-то не перекрываются
-$track-bound: 16px;
-
-.custom-scrollbar {
-  max-width: 100%;
-  max-height: 100%;
-}
-
-.custom-scrollbar :global(.os-scrollbar-handle) {
-  border-radius: 2px !important;
-  background: colors.$basic-gray12 !important;
-  &:hover,
-  &:global(.active) {
-    background: colors.$basic-gray24 !important;
-  }
-}
-
-.custom-scrollbar,
-.custom-scrollbar:global(.os-host-scrollbar-horizontal-hidden) {
-  > :global(.os-scrollbar-vertical) {
-    width: 12px !important;
-    padding: 0 !important;
-    top: $track-bound !important;
-    bottom: $track-bound !important;
-    :global(.os-scrollbar-handle) {
-      left: 4px !important;
-      width: 4px !important;
-      &::before {
-        left: -4px !important;
-        right: -4px !important;
-      }
-    }
-  }
-}
-
-.custom-scrollbar,
-.custom-scrollbar:global(.os-host-scrollbar-vertical-hidden) {
-  > :global(.os-scrollbar-horizontal) {
-    height: 12px !important;
-    padding: 0 !important;
-    left: $track-bound !important;
-    right: $track-bound !important;
-    :global(.os-scrollbar-handle) {
-      top: 4px !important;
-      bottom: 4px !important;
-      &::before {
-        top: -4px !important;
-        bottom: -4px !important;
-      }
-    }
-  }
-}

package/_internal/dropdown-loading/index.d.ts

@@ -1,9 +0,0 @@
-import { HTMLAttributes } from 'react';
-type DropdownLoadingProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'children'>;
-/**
- * Плашка состояния загрузки для Dropdown.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function DropdownLoading(props: DropdownLoadingProps): JSX.Element;
-export {};

package/_internal/dropdown-loading/index.js

@@ -1,19 +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.DropdownLoading = void 0;
-const react_1 = __importDefault(require("react"));
-const spinner_1 = require("../../spinner");
-const index_module_scss_1 = __importDefault(require("./index.module.scss"));
-/**
- * Плашка состояния загрузки для Dropdown.
- * @param props Свойства.
- * @return Элемент.
- */
-function DropdownLoading(props) {
-    return (react_1.default.createElement("div", Object.assign({}, props, { className: index_module_scss_1.default.root }),
-        react_1.default.createElement(spinner_1.SpinnerSVG, { size: 's' })));
-}
-exports.DropdownLoading = DropdownLoading;