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

package/top-bar/index.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TOP_BAR_HEIGHT = exports.TopBar = exports.navigationButtons = void 0;
-var utils_1 = require("./utils");
-Object.defineProperty(exports, "navigationButtons", { enumerable: true, get: function () { return utils_1.navigationButtons; } });
-var top_bar_1 = require("./top-bar");
-Object.defineProperty(exports, "TopBar", { enumerable: true, get: function () { return top_bar_1.TopBar; } });
-Object.defineProperty(exports, "TOP_BAR_HEIGHT", { enumerable: true, get: function () { return top_bar_1.TOP_BAR_HEIGHT; } });

package/top-bar/top-bar.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import { TopBarProps, TopBarSize } from './types';
-export declare const TOP_BAR_HEIGHT: Readonly<Record<TopBarSize, number>>;
-/**
- * Компонент шапки модальных окон/экранов.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function TopBar({ divided, size, title, subtitle, buttons: { start, startSecondary, end, endSecondary }, className, 'data-testid': testId, }: TopBarProps): JSX.Element;

package/top-bar/top-bar.js

@@ -1,61 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopBar = exports.TOP_BAR_HEIGHT = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const utils_1 = require("./utils");
-const borders_1 = require("../styling/borders");
-const bind_1 = __importDefault(require("classnames/bind"));
-const top_bar_module_scss_1 = __importDefault(require("./top-bar.module.scss"));
-// некоторым компонентам нужно знать конкретную высоту
-exports.TOP_BAR_HEIGHT = {
-    s: 56,
-    m: 64,
-    xl: 80,
-};
-const cx = bind_1.default.bind(top_bar_module_scss_1.default);
-/**
- * Компонент шапки модальных окон/экранов.
- * @param props Свойства.
- * @return Элемент.
- */
-function TopBar({ divided, size = 'm', title, subtitle, buttons: { start, startSecondary, end, endSecondary } = {}, className, 'data-testid': testId = 'top-bar', }) {
-    const hasStartButtons = start || startSecondary;
-    const hasEndButtons = end || endSecondary;
-    const hasButtons = hasStartButtons || hasEndButtons;
-    const rootClasses = cx('root', `size-${size}`, className, divided && borders_1.InnerBorder.bottom, !subtitle && 'no-subtitle');
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: rootClasses, "data-testid": testId }, { children: [hasButtons && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('side') }, { children: [hasStartButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, { children: [start && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, start)), startSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, startSecondary))] })), hasEndButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, Object.assign({ stub: true, end: true }, { children: [endSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, endSecondary)), end && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, end))] })))] }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('main') }, { children: [title && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('title') }, { children: title })), subtitle && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('subtitle') }, { children: subtitle }))] })), hasButtons && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('side') }, { children: [hasEndButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, Object.assign({ end: true }, { children: [endSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, endSecondary)), end && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, end))] }))), hasStartButtons && ((0, jsx_runtime_1.jsxs)(TopBarButtonGroup, Object.assign({ stub: true }, { children: [start && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, start)), startSecondary && (0, jsx_runtime_1.jsx)(TopBarButton, Object.assign({}, startSecondary))] })))] })))] })));
-}
-exports.TopBar = TopBar;
-/**
- * Компонент группы кнопок.
- * @param props Свойства.
- * @return Элемент.
- */
-function TopBarButtonGroup({ children, stub, end, }) {
-    return ((0, jsx_runtime_1.jsx)(utils_1.TopBarButtonGroupContext.Provider, Object.assign({ value: { stub } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('button-group', { stub, end }) }, { children: children })) })));
-}
-/**
- * Компонент кнопки-иконки.
- * @param props Свойства.
- * @return Элемент.
- */
-function TopBarButton(_a) {
-    var { text, icon, className, 'data-testid': testId = 'top-bar:button' } = _a, buttonProps = __rest(_a, ["text", "icon", "className", 'data-testid']);
-    const { stub } = (0, react_1.useContext)(utils_1.TopBarButtonGroupContext);
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({}, (!stub && Object.assign(Object.assign({}, buttonProps), { 'data-testid': testId })), { type: 'button', className: cx('button', icon && 'iconic', stub && 'stub', className), "aria-hidden": stub }, { children: icon && !stub ? icon : text })));
-}

package/top-bar/top-bar.module.scss

@@ -1,157 +0,0 @@
-@use '../colors';
-@use './top-bar-util';
-
-.root {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  background: #fff;
-  height: var(--top-bar-height);
-  &.size-s {
-    @include top-bar-util.size-s;
-  }
-  &.size-m {
-    @include top-bar-util.size-m;
-  }
-  &.size-xl {
-    @include top-bar-util.size-xl;
-  }
-}
-
-.main {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  justify-content: center;
-  overflow: hidden;
-  text-align: center;
-
-  // когда нет кнопок
-  &:first-child:last-child {
-    margin: 0 var(--top-bar-gutter);
-  }
-}
-
-.title {
-  color: colors.$basic-gray87;
-  font-size: var(--top-bar-title-size);
-  line-height: var(--top-bar-title-height);
-  font-weight: 600;
-
-  // когда нет подзаголовка
-  &:first-child:last-child {
-    font-size: var(--top-bar-title-only-size, var(--top-bar-title-size));
-    line-height: var(--top-bar-title-only-height, var(--top-bar-title-height));
-  }
-}
-
-.subtitle {
-  color: colors.$basic-gray38;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 400;
-  margin-top: -4px;
-}
-
-.title,
-.subtitle {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.side {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.button-group {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  &:not(.end) {
-    .iconic {
-      &:first-child:last-child {
-        justify-content: flex-start;
-        padding-left: var(--top-bar-gutter);
-      }
-      &:not(:last-child):first-child {
-        justify-content: flex-start;
-        padding-left: var(--top-bar-gutter);
-      }
-      &:not(:first-child):last-child {
-        justify-content: flex-end;
-        padding-right: var(--top-bar-gutter);
-      }
-    }
-  }
-  &.end {
-    justify-content: flex-end;
-    .iconic {
-      &:first-child:last-child {
-        justify-content: flex-end;
-        padding-right: var(--top-bar-gutter);
-      }
-      &:not(:last-child):first-child {
-        justify-content: flex-start;
-        padding-left: var(--top-bar-gutter);
-      }
-      &:not(:first-child):last-child {
-        justify-content: flex-end;
-        padding-right: var(--top-bar-gutter);
-      }
-    }
-    :not(.iconic) {
-      justify-content: flex-end;
-    }
-  }
-  &:not(.stub) {
-    height: 100%;
-  }
-}
-
-.button {
-  background: transparent;
-  border: 0;
-  box-sizing: border-box;
-  font-family: inherit;
-  font-size: 14px;
-  line-height: 20px;
-  font-weight: 600;
-  margin: 0;
-  outline: 0;
-  text-align: inherit;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0;
-  &:hover {
-    cursor: pointer;
-  }
-  &.iconic {
-    color: colors.$basic-gray87;
-    width: var(--top-bar-icon-button-width);
-    &:hover {
-      color: colors.$basic-gray54;
-    }
-  }
-  &:not(.iconic) {
-    color: colors.$basic-blue;
-    width: 100%;
-    padding: 0 var(--top-bar-gutter);
-    &:hover {
-      color: colors.$additional-deep-blue;
-    }
-  }
-  &.stub {
-    height: 0;
-    overflow: hidden;
-  }
-  svg {
-    // чтобы выравнивались по центру по вертикали
-    display: block;
-    flex-shrink: 0;
-    fill: currentColor;
-  }
-}

package/top-bar/types.d.ts

@@ -1,31 +0,0 @@
-import type { ReactNode } from 'react';
-export type TopBarSize = 's' | 'm' | 'xl';
-export interface TopBarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /** Иконка. */
-    icon?: React.ReactNode;
-    /** Текст. */
-    text?: string;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-export interface TopBarProps {
-    /** Свойства кнопок. */
-    buttons?: {
-        start?: TopBarButtonProps;
-        startSecondary?: TopBarButtonProps;
-        end?: TopBarButtonProps;
-        endSecondary?: TopBarButtonProps;
-    };
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Размер. */
-    size?: TopBarSize | 'unset';
-    /** Подзаголовок. */
-    subtitle?: ReactNode;
-    /** Заголовок. */
-    title?: ReactNode;
-    /** Нужна ли разделительная черта снизу. */
-    divided?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}

package/top-bar/types.js

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

package/top-bar/utils.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="react" />
-import { TopBarProps } from './types';
-export declare const TopBarButtonGroupContext: import("react").Context<{
-    stub?: boolean | undefined;
-}>;
-/**
- * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
- * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
- * @return Опция buttons для TopBar.
- */
-export declare function navigationButtons({ buttons, onBack, onClose, }: Pick<TopBarProps, 'buttons'> & {
-    onBack?: VoidFunction;
-    onClose?: VoidFunction;
-}): TopBarProps['buttons'];

package/top-bar/utils.js

@@ -1,34 +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.navigationButtons = exports.TopBarButtonGroupContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Cross"));
-const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
-exports.TopBarButtonGroupContext = (0, react_1.createContext)({
-    stub: false,
-});
-/**
- * Позволяет быстро определить кнопки-иконки "назад" и "закрыть" в TopBar.
- * @param props Свойства. При указании onBack/onClose будет выведена соответствующая кнопка иконка.
- * @return Опция buttons для TopBar.
- */
-function navigationButtons({ buttons, onBack, onClose, }) {
-    return Object.assign(Object.assign(Object.assign({}, buttons), (onBack && {
-        start: {
-            'data-testid': 'top-bar:back',
-            onClick: onBack,
-            icon: (0, jsx_runtime_1.jsx)(ArrowLeft_1.default, {}),
-        },
-    })), (onClose && {
-        end: {
-            'data-testid': 'top-bar:close',
-            onClick: onClose,
-            icon: (0, jsx_runtime_1.jsx)(Cross_1.default, {}),
-        },
-    }));
-}
-exports.navigationButtons = navigationButtons;

package/touch-slider/index.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-export interface TouchSliderProps {
-    /** Прокручиваемое содержимое. */
-    children?: React.ReactNode;
-}
-/**
- * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
- * Предназначен для использования на странице без дополнительных отступов по горизонтали.
- * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const TouchSlider: React.FC<TouchSliderProps>;

package/touch-slider/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.TouchSlider = void 0;
-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_module_scss_1 = __importDefault(require("./touch-slider.module.scss"));
-/**
- * Компонент блока, прокручиваемого по горизонтали. Реализует отступы MobileLayout.
- * Предназначен для использования на странице без дополнительных отступов по горизонтали.
- * @deprecated Следует использовать Carousel. Отказались от "волшебной обрезки" прокручиваемой области (экспериментально).
- * @param props Свойства.
- * @return Элемент.
- */
-const TouchSlider = ({ children }) => ((0, jsx_runtime_1.jsx)(layout_1.MobileLayout, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: touch_slider_module_scss_1.default.outer }, { [page_scroll_lock_1.BSL_IGNORE_ATTR]: true }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: touch_slider_module_scss_1.default.inner }, { children: children })) })) }));
-exports.TouchSlider = TouchSlider;

package/types.d.ts

@@ -1,18 +0,0 @@
-import type { InputHTMLAttributes } from 'react';
-/**
- * Обозначение точки остановки в соответствии дизайн-гайдами.
- */
-export type Breakpoint = 'mxs' | 'ms' | 'mm' | 'ml' | 'xs' | 's' | 'm' | 'l' | 'xl';
-/** Свойства компонента для маркировки атрибутом "data-testid". */
-export interface WithTestId {
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/** Свойства любого поля ввода. */
-export interface FieldProps {
-    /** Состояние с ошибками валидации. */
-    failed?: boolean;
-}
-/** Свойства компонента поля переключателя (input[type="checkbox"]). */
-export interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement>, FieldProps, WithTestId {
-}

package/types.js

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

package/unknown-content/index.d.ts

@@ -1,13 +0,0 @@
-import { 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;

package/unknown-content/index.js

@@ -1,24 +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.UnknownContent = void 0;
-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_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 ((0, jsx_runtime_1.jsx)("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;

package/unknown-content/utils.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setTableRowLabels = void 0;
-/**
- * Ищет в заданном элементе все ячейки таблиц и задает им атрибут "data-table-column-title".
- * Необходимо для стилизации адаптивных таблиц по гайдам.
- * @param element Элемент.
- */
-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) || '');
-    });
-};
-exports.setTableRowLabels = setTableRowLabels;

package/upload-area/index.d.ts

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

package/upload-area/index.js

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

package/upload-area/types.d.ts

@@ -1,32 +0,0 @@
-import type { ChangeEvent, CSSProperties, DragEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
-export type UploadAreaSize = 's' | 'm';
-export interface UploadAreaProps {
-    /** Размер. */
-    size?: UploadAreaSize | 'unset';
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Стили корневого элемента. */
-    style?: CSSProperties;
-    /** Ограничение на количество файлов. */
-    countLimit?: number;
-    /** Состояние с ошибками валидации. */
-    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;
-}

package/upload-area/types.js

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

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

@@ -1,17 +0,0 @@
-@mixin size-s {
-  --padding-x: 16px;
-  --padding-y: 20px;
-  --justify-content: flex-start;
-  --icon-size: 0;
-  --icon-display: none;
-  --min-height: calc(48px + (2 * var(--padding-y)));
-}
-
-@mixin size-m {
-  --padding-x: 60px;
-  --padding-y: 20px;
-  --justify-content: center;
-  --icon-size: 64px;
-  --icon-display: block;
-  --min-height: calc(var(--icon-size) + (2 * var(--padding-y)));
-}

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

@@ -1,8 +0,0 @@
-/// <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;

package/upload-area/upload-area.js

@@ -1,75 +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.UploadArea = void 0;
-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_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);
-/**
- * Поля выбора файлов.
- * @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', }) {
-    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);
-        return result;
-    }, [multiple, countLimit]);
-    const onInputChange = (0, react_1.useCallback)(event => {
-        onSelect === null || onSelect === void 0 ? void 0 : 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);
-    });
-    const rootClassName = cx('root', size !== 'unset' && `size-${size}`, { active, failed, disabled }, className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rootProps, bind, { "data-testid": testId, style: style, className: rootClassName, tabIndex: disabled ? -1 : 0, role: 'button', onFocus: event => {
-            var _a;
-            if (!disabled) {
-                (_a = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(rootProps, 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);
-            }
-        }, 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);
-            }
-        }, onBlur: event => {
-            var _a;
-            (_a = rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(rootProps, event);
-        } }, { children: [(0, jsx_runtime_1.jsx)(Upload_1.default, { className: cx('icon') }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('info') }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: cx('text', 'primary') }, { children: [(0, jsx_runtime_1.jsx)("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 })), (0, jsx_runtime_1.jsxs)(link_1.Link, Object.assign({ pseudo: true, "data-testid": 'upload-area:anchor', disabled: disabled }, { children: ["\u0417\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 ", fileRole] }))] })), secondaryInfo && (0, jsx_runtime_1.jsx)("div", Object.assign({ className: cx('text', 'secondary') }, { children: secondaryInfo }))] }))] })));
-}
-exports.UploadArea = UploadArea;