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

package/arrow-button/index.d.ts

@@ -1,17 +0,0 @@
-/// <reference types="react" />
-export type ArrowButtonSize = 's' | 'l';
-export type ArrowDirection = 'up' | 'right' | 'down' | 'left';
-export interface ArrowButtonProps extends Omit<JSX.IntrinsicElements['button'], 'size' | 'children'> {
-    /** Размер. */
-    size?: ArrowButtonSize;
-    /** Направление (отвечает за иконку). */
-    direction?: ArrowDirection;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Компонент круглой кнопки со стрелкой.
- * @param props Свойства. Поддерживаются свойства элемента button.
- * @return Элемент.
- */
-export declare const ArrowButton: ({ size, direction, className, "data-testid": testId, ...buttonProps }: ArrowButtonProps) => JSX.Element;

package/arrow-button/index.js

@@ -1,54 +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.ArrowButton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const bind_1 = __importDefault(require("classnames/bind"));
-const arrow_button_module_scss_1 = __importDefault(require("./arrow-button.module.scss"));
-const ArrowUp_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowUp"));
-const ArrowRight_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowRight"));
-const ArrowDown_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowDown"));
-const ArrowLeft_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/ArrowLeft"));
-const ArrowUp_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowUp"));
-const ArrowRight_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowRight"));
-const ArrowDown_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowDown"));
-const ArrowLeft_2 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/ArrowLeft"));
-const cx = bind_1.default.bind(arrow_button_module_scss_1.default);
-const ICONS = {
-    s: {
-        up: ArrowUp_2.default,
-        right: ArrowRight_2.default,
-        down: ArrowDown_2.default,
-        left: ArrowLeft_2.default,
-    },
-    l: {
-        up: ArrowUp_1.default,
-        right: ArrowRight_1.default,
-        down: ArrowDown_1.default,
-        left: ArrowLeft_1.default,
-    },
-};
-/**
- * Компонент круглой кнопки со стрелкой.
- * @param props Свойства. Поддерживаются свойства элемента button.
- * @return Элемент.
- */
-const ArrowButton = (_a) => {
-    var { size = 'l', direction = 'right', className, 'data-testid': testId = 'arrow-button' } = _a, buttonProps = __rest(_a, ["size", "direction", "className", 'data-testid']);
-    const Icon = ICONS[size][direction];
-    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ type: 'button' }, buttonProps, { className: cx('arrow-button', `size-${size}`, className), "data-testid": testId }, { children: (0, jsx_runtime_1.jsx)(Icon, { "aria-hidden": true, fill: 'currentColor' }) })));
-};
-exports.ArrowButton = ArrowButton;

package/autocomplete/autocomplete.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import { AutocompleteProps } from './types';
-/**
- * Поле ввода с подсказками.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function Autocomplete({ children, loading, filterOption, dropdownProps, autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, type, value, adornmentEnd, baseInputProps, ...restProps }: AutocompleteProps): JSX.Element;

package/autocomplete/autocomplete.js

@@ -1,163 +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.Autocomplete = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dropdown_1 = require("../dropdown");
-const dropdown_item_1 = require("../dropdown-item");
-const utils_1 = require("../dropdown-item/utils");
-const dropdown_loading_1 = require("../_internal/dropdown-loading");
-const react_2 = require("@floating-ui/react");
-const input_1 = require("../input");
-const hooks_1 = require("../hooks");
-const utils_2 = require("../dropdown/utils");
-const events_1 = require("../helpers/events");
-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 autocomplete_module_scss_1 = __importDefault(require("./autocomplete.module.scss"));
-/**
- * Поле ввода с подсказками.
- * @param props Свойства.
- * @return Элемент.
- */
-function Autocomplete(_a) {
-    var { 
-    // specific Autocomplete props:
-    children, loading, filterOption = defaultFilterOption, dropdownProps, 
-    // rest props:
-    autoComplete, autoFocus, defaultValue, disabled, id, name, onBlur, onChange, onFocus, onInput, placeholder, readOnly, required, type, value, adornmentEnd = getDefaultAdornmentEnd, baseInputProps } = _a, restProps = __rest(_a, ["children", "loading", "filterOption", "dropdownProps", "autoComplete", "autoFocus", "defaultValue", "disabled", "id", "name", "onBlur", "onChange", "onFocus", "onInput", "placeholder", "readOnly", "required", "type", "value", "adornmentEnd", "baseInputProps"]);
-    const inputRef = (0, react_1.useRef)(null);
-    const [needMenu, setNeedMenu] = (0, react_1.useState)(false);
-    const _b = (0, react_2.useFloating)(Object.assign({ open: needMenu }, (0, utils_2.dropdownFloatingConfig)())), { refs } = _b, floating = __rest(_b, ["refs"]);
-    const floatingStyle = (0, utils_2.useDropdownFloatingStyle)(Object.assign({ refs }, floating));
-    const [activeIndex, setActiveIndex] = (0, react_1.useState)(-1);
-    const [currentValue, setCurrentValue] = (0, react_1.useState)(() => { var _a; return `${(_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : ''}`; });
-    const items = react_1.Children.toArray(children).filter((item) => utils_1.DropdownItemUtils.is(item) && filterOption(item, currentValue));
-    const canShowMenu = !disabled && (currentValue.length > 0 || items.length > 0);
-    const menuShown = needMenu && canShowMenu;
-    const selectItem = (0, react_1.useCallback)((item) => {
-        inputRef.current && (0, events_1.triggerInput)(inputRef.current, utils_1.DropdownItemUtils.getValue(item));
-        setNeedMenu(false);
-        setActiveIndex(-1);
-    }, [inputRef]);
-    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
-        inputRef.current && setCurrentValue(inputRef.current.value);
-    }, [value]);
-    const onKeyDown = baseInputProps === null || baseInputProps === void 0 ? void 0 : baseInputProps.onKeyDown;
-    const handleKeyDown = (0, react_1.useCallback)(event => {
-        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-        switch (event.code) {
-            case 'Escape': {
-                setNeedMenu(false);
-                break;
-            }
-            case 'Enter': {
-                if (menuShown) {
-                    const item = items[activeIndex];
-                    item && selectItem(item);
-                    setNeedMenu(false);
-                }
-                else {
-                    setNeedMenu(true);
-                }
-                break;
-            }
-            case 'ArrowUp': {
-                if (menuShown) {
-                    event.preventDefault();
-                    setActiveIndex(n => { var _a; return (_a = utils_1.DropdownItemUtils.asLoopedIterator(items, n).prev()) !== null && _a !== void 0 ? _a : -1; });
-                }
-                else {
-                    setNeedMenu(true);
-                }
-                break;
-            }
-            case 'ArrowDown': {
-                if (menuShown) {
-                    event.preventDefault();
-                    setActiveIndex(n => { var _a; return (_a = utils_1.DropdownItemUtils.asLoopedIterator(items, n).next()) !== null && _a !== void 0 ? _a : -1; });
-                }
-                else {
-                    setNeedMenu(true);
-                }
-                break;
-            }
-        }
-    }, [menuShown, activeIndex, items, selectItem, onKeyDown]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(input_1.Input, Object.assign({}, restProps, {
-                autoComplete,
-                autoFocus,
-                defaultValue,
-                disabled,
-                id,
-                name,
-                onInput,
-                placeholder,
-                readOnly,
-                required,
-                type,
-                value,
-            }, { inputRef: inputRef, blockRef: refs.setReference, onFocus: e => {
-                    onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
-                    setNeedMenu(true);
-                }, onBlur: e => {
-                    onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                    setNeedMenu(false);
-                    setActiveIndex(-1);
-                }, onChange: e => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(e);
-                    setNeedMenu(true);
-                    setActiveIndex(-1);
-                    setCurrentValue(e.target.value);
-                }, 
-                // @todo выяснить надо ли переключать меню при клике и раскомментировать/убрать
-                // blockProps={{
-                //   onMouseDown: () => {
-                //     !disabled && setNeedMenu(a => !a);
-                //   },
-                // }}
-                baseInputProps: Object.assign(Object.assign({}, baseInputProps), { onKeyDown: handleKeyDown }), adornmentEnd: typeof adornmentEnd === 'function' ? adornmentEnd({ menuShown }) : adornmentEnd })), (0, jsx_runtime_1.jsx)(react_2.FloatingPortal, Object.assign({ id: '' }, { children: menuShown && ((0, jsx_runtime_1.jsxs)(dropdown_1.Dropdown, Object.assign({ ref: refs.setFloating }, dropdownProps, { style: Object.assign(Object.assign({}, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.style), floatingStyle) }, { children: [!loading &&
-                            items.length > 0 &&
-                            items.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ checked: index === activeIndex }, item.props, { onMouseDown: e => {
-                                    var _a, _b;
-                                    e.preventDefault();
-                                    (_b = (_a = item.props).onMouseDown) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                                }, onClick: e => {
-                                    var _a, _b;
-                                    (_b = (_a = item.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                                    !e.defaultPrevented && selectItem(item);
-                                } }), index))), !loading && items.length === 0 && ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 's', noHover: true }, { children: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))), loading && (0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, {})] }))) }))] }));
-}
-exports.Autocomplete = Autocomplete;
-/**
- * Фильтр вариантов выбора по умолчанию.
- * @param item Вариант из меню.
- * @param inputValue Текущее значение в поле.
- * @return Нужно ли выводить опцию.
- */
-function defaultFilterOption(item, inputValue) {
-    return utils_1.DropdownItemUtils.getValue(item).toLowerCase().includes(inputValue.toLowerCase());
-}
-/**
- * Возвращает стандартную стрелку для поля ввода с подсказками.
- * @param data Данные о состоянии поля.
- * @return Элемент.
- */
-function getDefaultAdornmentEnd(data) {
-    const ArrowSVG = data.menuShown ? Up_1.default : Down_1.default;
-    return (0, jsx_runtime_1.jsx)(ArrowSVG, { className: autocomplete_module_scss_1.default.arrow, "data-testid": 'autocomplete:arrow-up' });
-}

package/autocomplete/index.d.ts

@@ -1,2 +0,0 @@
-export type { AutocompleteProps } from './types';
-export { Autocomplete } from './autocomplete';

package/autocomplete/index.js

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

package/autocomplete/types.d.ts

@@ -1,19 +0,0 @@
-import type { ReactNode } from 'react';
-import type { DropdownProps } from '../dropdown';
-import type { DropdownItemElement } from '../dropdown-item/types';
-import type { FieldBlockProps } from '../field-block';
-import type { InputProps } from '../input';
-export interface AutocompleteProps extends InputProps {
-    /** Содержимое. */
-    children?: ReactNode;
-    /** Выводить вместо списка спиннер. */
-    loading?: boolean;
-    /** Получив опцию должен определить, нужно ли выводить ее в списке. */
-    filterOption?: (option: DropdownItemElement, inputValue: string) => boolean;
-    /** Украшение после основного содержимого. */
-    adornmentEnd?: FieldBlockProps['adornmentEnd'] | ((data: {
-        menuShown: boolean;
-    }) => ReactNode);
-    /** Свойства выпадающего списка. */
-    dropdownProps?: Pick<DropdownProps, 'className' | 'style'>;
-}

package/autocomplete/types.js

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

package/autocomplete-deprecated/autocomplete.module.scss

@@ -1,20 +0,0 @@
-@use '../colors';
-
-.root {
-  position: relative;
-  width: var(--width, 320px);
-}
-
-.arrow {
-  fill: colors.$basic-gray38;
-}
-
-.field {
-  width: 100%;
-}
-
-.menu {
-  position: absolute;
-  width: 100%;
-  z-index: 2;
-}

package/autocomplete-deprecated/index.d.ts

@@ -1,28 +0,0 @@
-/// <reference types="react" />
-import { DropdownItemProps } from '../dropdown-item';
-import { TextFieldProps } from '../text-field';
-export interface AutocompleteProps extends Omit<TextFieldProps, 'ref' | 'value' | 'defaultValue'> {
-    /** Значение по умолчанию. */
-    defaultValue?: string;
-    /** Элементы меню. */
-    items?: any[];
-    /** Размер элемента меню. */
-    itemSize?: DropdownItemProps['size'];
-    /** Нужно ли выводить состояние загрузки списка. */
-    loading?: boolean;
-    /** Сработает при выборе. */
-    onSelect?: (item: any) => void;
-    /** Пресет (со стрелкой или без). */
-    preset?: 'default' | 'filled-only-list';
-    /** Выведет содержимое элемента. */
-    renderItem?: (item: any) => React.ReactNode;
-    /** Значение. */
-    value?: string;
-}
-/**
- * Поле ввода с подсказками.
- * @deprecated Нужно использовать новую реализацию "@sima-land/ui-nucleons/autocomplete".
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Autocomplete: ({ items, itemSize, onSelect, onChange, onKeyDown, style, className, value, defaultValue, loading, renderItem, preset, "data-testid": dataTestId, ...restProps }: AutocompleteProps) => JSX.Element;

package/autocomplete-deprecated/index.js

@@ -1,106 +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.Autocomplete = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = 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 ? ((0, jsx_runtime_1.jsx)(Up_1.default, { className: cx('arrow'), "data-testid": 'autocomplete:arrow-up' })) : ((0, jsx_runtime_1.jsx)(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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ style: style, className: cx('root', className), "data-testid": dataTestId }, { children: [(0, jsx_runtime_1.jsx)(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 && ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({}, (0, dropdown_2.placeDropdown)(restProps.size), { ref: menuRef, "data-testid": 'autocomplete:menu', className: cx('menu'), role: 'menu', customScrollbarProps: { osComponentRef } }, { children: loading ? ((0, jsx_runtime_1.jsx)(dropdown_loading_1.DropdownLoading, { "data-testid": 'autocomplete:loading-area' })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items && items.length > 0 ? (items.map((item, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: itemSize, role: 'menuitem', checked: index === activeIndex, onMouseDown: event => {
-                            // чтобы при нажатии на опцию предотвратить blur на поле
-                            event.preventDefault();
-                        }, onClick: () => {
-                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(item);
-                            setActiveIndex(null);
-                            toggleMenu(false);
-                        } }, { children: renderItem(item) }), index)))) : ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, Object.assign({ size: 'm', noHover: true }, { children: "\u041D\u0435 \u043D\u0430\u0439\u0434\u0435\u043D\u043E" }))) })) })))] })));
-};
-exports.Autocomplete = Autocomplete;

package/avatar/avatar.module.scss

@@ -1,77 +0,0 @@
-@use 'sass:map';
-
-$sizes: 40, 48, 56, 64, 72, 80, 104;
-
-$textSizes: (
-  40: 12,
-  48: 16,
-  56: 16,
-  64: 16,
-  72: 16,
-  80: 16,
-  104: 24,
-);
-
-@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;
-  &::before {
-    @include layer;
-    content: '';
-    display: block;
-    background: var(--avatar-color, none);
-    opacity: var(--avatar-color-opacity, 1);
-  }
-}
-
-@each $size in $sizes {
-  .size-#{$size} {
-    width: #{$size}px;
-    height: #{$size}px;
-    .monogram {
-      font-size: #{map.get($textSizes, $size)}px;
-    }
-  }
-}
-
-.monogram {
-  position: relative;
-  padding: 0 8px;
-  font-weight: 600;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-
-  // ВАЖНО: чтобы например обертка в виде ссылки не накидывала text-decoration: underline
-  text-decoration: none;
-}
-
-.icon {
-  position: relative;
-  fill: currentColor;
-}
-
-.layer {
-  @include layer;
-  &.image {
-    object-fit: cover;
-  }
-  &.image-overlay {
-    background: #000;
-    opacity: 0.04;
-  }
-}

package/avatar/index.d.ts

@@ -1,30 +0,0 @@
-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 function Avatar({ size: sizeProp, imageUrl, bgColor, bgOpacity, textColor, title, monogram, className, style, 'data-testid': testId, }: AvatarProps): JSX.Element;

package/avatar/index.js

@@ -1,39 +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.Avatar = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const colors_1 = require("../colors");
-const utils_1 = require("./utils");
-const colors_2 = require("../styling/colors");
-const Person_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Person"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const avatar_module_scss_1 = __importDefault(require("./avatar.module.scss"));
-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,
-};
-const cx = bind_1.default.bind(avatar_module_scss_1.default);
-/**
- * Компонент аватара.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-function 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 ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "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 }) }, { children: [!needImage && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: monogram ? ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: cx('monogram') }, { children: monogram.slice(0, 2).toUpperCase() }))) : ((0, jsx_runtime_1.jsx)(Person_1.default, { fill: colors_1.COLORS.get(textColor), width: ICON_SIZES[size], height: ICON_SIZES[size], className: cx('icon') })) })), needImage && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("img", { src: imageUrl, alt: '', className: cx('layer', 'image'), onError: () => toggleImage(false) }), (0, jsx_runtime_1.jsx)("div", { className: cx('layer', 'image-overlay') })] }))] })));
-}
-exports.Avatar = Avatar;

package/avatar/user.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-import { AvatarProps } from '.';
-export type UserAvatarProps = Omit<AvatarProps, 'bgColor' | 'bgOpacity' | 'textColor'>;
-export declare const colorKey: unique symbol;
-/**
- * Компонент аватара пользователя (не сотрудника).
- * @param props Свойства. Поддерживаются свойства Avatar.
- * @return Элемент.
- */
-export declare function UserAvatar(props: UserAvatarProps): JSX.Element;

package/avatar/user.js

@@ -1,40 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UserAvatar = exports.colorKey = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lodash_1 = require("lodash");
-const _1 = require(".");
-const COLORS = [
-    'additional-deep-red',
-    'additional-red',
-    'additional-teal',
-    'additional-green',
-    'additional-light-green',
-    'additional-amber',
-    'additional-purple',
-    'additional-violet',
-    'additional-deep-purple',
-    'additional-electric-blue',
-    'additional-light-blue',
-    'additional-cyan',
-    'additional-blue-gray',
-    'additional-deep-orange',
-];
-exports.colorKey = Symbol.for('user-avatar:color-key');
-/**
- * Компонент аватара пользователя (не сотрудника).
- * @param props Свойства. Поддерживаются свойства Avatar.
- * @return Элемент.
- */
-function UserAvatar(props) {
-    const [color, setColor] = (0, react_1.useState)();
-    (0, react_1.useEffect)(() => {
-        const source = window;
-        // запоминаем цвет (пока только один для всех аватаров на странице)
-        source[exports.colorKey] = source[exports.colorKey] || (0, lodash_1.sample)(COLORS);
-        setColor(source[exports.colorKey]);
-    }, []);
-    return (0, jsx_runtime_1.jsx)(_1.Avatar, Object.assign({}, props, { bgColor: color, bgOpacity: color ? 0.48 : 0, textColor: 'basic-white' }));
-}
-exports.UserAvatar = UserAvatar;

package/avatar/utils.d.ts

@@ -1,6 +0,0 @@
-/**
- * Формирует монограмму из переданной строки.
- * @param value Переданная строка.
- * @return Монограмма.
- */
-export declare function getMonogram(value: any): string;