@sima-land/moleculas 13.2.3 → 14.0.0

package/common/components/badge/index.d.ts

@@ -3,13 +3,11 @@ export interface BadgeField {
     type: 'text' | 'timer' | 'svg-url';
     value: string;
 }
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
     /** Основной цвет, используется как цвет обводки, иконок и текста. */
     color?: string;
     /** Содержимое шильдика. */
     fields: Array<BadgeField>;
-    /** Ссылка, переход по которой будет произведён по нажатию на шильдик. */
-    href?: string;
     /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }

package/common/components/badge/index.js

@@ -30,9 +30,8 @@ const cx = bind_1.default.bind(badge_module_scss_1.default);
  */
 const Badge = (_a) => {
     var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
-    const Element = href ? 'a' : 'span';
     const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement(Element, Object.assign({}, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value })) : (
+    return (react_1.default.createElement("a", Object.assign({}, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value })) : (
         // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
         react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
             let result = null;

package/common/components/intractive-image/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export interface InteractiveImageProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    'data-testid'?: string;
+}
+export interface InteractiveImageImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    'data-testid'?: string;
+}
+export interface InteractiveImagePointProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    x: number;
+    y: number;
+    'data-testid'?: string;
+}
+export declare const InteractiveImage: ({ children, "data-testid": testId, className, ...rest }: InteractiveImageProps) => JSX.Element;
+export declare const Parts: {
+    readonly Image: React.ForwardRefExoticComponent<InteractiveImageImageProps & React.RefAttributes<HTMLImageElement>>;
+    readonly Point: React.ForwardRefExoticComponent<InteractiveImagePointProps & React.RefAttributes<HTMLAnchorElement>>;
+};

package/common/components/intractive-image/index.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.Parts = exports.InteractiveImage = void 0;
+const react_1 = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const interactive_image_module_scss_1 = __importDefault(require("./interactive-image.module.scss"));
+const InteractiveImage = (_a) => {
+    var { children, 'data-testid': testId, className } = _a, rest = __rest(_a, ["children", 'data-testid', "className"]);
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(interactive_image_module_scss_1.default.root, className) }, rest, { "data-testid": testId }), react_1.Children.toArray(children).filter(child => (0, react_1.isValidElement)(child) && (child.type === Image || child.type === Point))));
+};
+exports.InteractiveImage = InteractiveImage;
+const Image = (0, react_1.forwardRef)((_a, ref) => {
+    var { className, 'data-testid': testId = 'interactive-image:image' } = _a, rest = __rest(_a, ["className", 'data-testid']);
+    return (react_1.default.createElement("img", Object.assign({ ref: ref, className: (0, classnames_1.default)(interactive_image_module_scss_1.default.image, className), "data-testid": testId }, rest)));
+});
+const Point = (0, react_1.forwardRef)((_a, ref) => {
+    var { x, y, className, style, 'data-testid': testId = 'interactive-image:point' } = _a, rest = __rest(_a, ["x", "y", "className", "style", 'data-testid']);
+    return (react_1.default.createElement("a", Object.assign({ ref: ref, "aria-label": '\u0422\u043E\u0447\u043A\u0430 \u043D\u0430 \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0438', "data-testid": testId, className: (0, classnames_1.default)(interactive_image_module_scss_1.default.point, className), style: Object.assign(Object.assign({}, style), { top: `${y}%`, left: `${x}%` }) }, rest)));
+});
+exports.Parts = { Image, Point };

package/common/components/intractive-image/interactive-image.module.scss

@@ -0,0 +1,50 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/breakpoints';
+
+.root {
+  display: inline-block;
+  font-size: 0;
+  position: relative;
+  overflow: hidden;
+  background: colors.$basic-gray4;
+}
+
+.image {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  min-width: 100%;
+  min-height: 100%;
+}
+
+.point {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  height: 64px;
+  background: rgba(colors.$basic-gray87, 0.4);
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  &:hover {
+    cursor: pointer;
+    background: rgba(colors.$basic-gray87, 0.64);
+  }
+  &::after {
+    content: '';
+    display: block;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    border-radius: 50%;
+  }
+  @include breakpoints.down('xs') {
+    width: 40px;
+    height: 40px;
+    &::after {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}

package/common/constants.d.ts

@@ -1,5 +1,2 @@
-export declare const MODIFIERS_TYPES: {
-    text: string;
-    image: string;
-    color: string;
-};
+import { ModifierType } from './types';
+export declare const MODIFIER_TYPE: Record<ModifierType, ModifierType>;

package/common/constants.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MODIFIERS_TYPES = void 0;
-exports.MODIFIERS_TYPES = {
+exports.MODIFIER_TYPE = void 0;
+exports.MODIFIER_TYPE = {
     text: 'text',
     image: 'image',
     color: 'color',

package/common/types.d.ts

@@ -0,0 +1 @@
+export declare type ModifierType = 'text' | 'image' | 'color';

package/common/types.js

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

package/desktop/components/modifiers/button/index.d.ts

@@ -1,15 +1,17 @@
-import React from 'react';
+import React, { CSSProperties } from 'react';
+import { ModifierType } from '../../../../common/types';
 export interface Modifier {
     count?: number;
     content: string;
     color?: string;
     image?: string;
-    type?: 'text' | 'image';
+    type?: ModifierType;
     isMarkdown?: boolean;
     selected?: boolean;
 }
 export interface ModifierButtonProps extends Modifier {
     className?: string;
+    style?: CSSProperties;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
     squared?: boolean;
     'data-testid'?: string;
@@ -17,4 +19,4 @@ export interface ModifierButtonProps extends Modifier {
 /**
  * Компонент модификатора.
  */
-export declare const ModifierButton: React.ForwardRefExoticComponent<ModifierButtonProps & React.RefAttributes<HTMLDivElement | null>>;
+export declare const ModifierButton: React.ForwardRefExoticComponent<ModifierButtonProps & React.RefAttributes<HTMLDivElement>>;

package/desktop/components/modifiers/button/index.js

@@ -29,18 +29,16 @@ const modifier_button_module_scss_1 = __importDefault(require("./modifier-button
 const bind_1 = __importDefault(require("classnames/bind"));
 const constants_1 = require("../../../../common/constants");
 const cx = bind_1.default.bind(modifier_button_module_scss_1.default);
-const typesList = Object.values(constants_1.MODIFIERS_TYPES);
 /**
  * Компонент модификатора.
  */
-exports.ModifierButton = (0, react_1.forwardRef)(function ModifierButton({ count = null, content, selected, color, image, type: typeProp = 'text', className, onClick, isMarkdown: hasMarkdown, squared = [constants_1.MODIFIERS_TYPES.color, constants_1.MODIFIERS_TYPES.image].includes(typeProp), 'data-testid': testId = 'modifier-button', }, ref) {
-    const type = typesList.includes(typeProp) ? typeProp : 'text';
+exports.ModifierButton = (0, react_1.forwardRef)(function ModifierButton({ count = null, content, selected, color, image, type = 'text', className, style, onClick, isMarkdown: hasMarkdown, squared = [constants_1.MODIFIER_TYPE.color, constants_1.MODIFIER_TYPE.image].includes(type), 'data-testid': testId = 'modifier-button', }, ref) {
     const hasCount = (0, lodash_1.isNumber)(count) && count >= 0;
-    return (react_1.default.createElement("div", { ref: ref, className: cx('modifier-button', squared && 'squared', selected && 'selected', className), style: color ? { background: color } : undefined, onClick: onClick, "data-testid": testId },
+    return (react_1.default.createElement("div", { ref: ref, className: cx('modifier-button', squared && 'squared', selected && 'selected', className), style: color ? Object.assign(Object.assign({}, style), { background: color }) : style, onClick: onClick, "data-testid": testId },
         (hasCount || hasMarkdown) && (react_1.default.createElement("span", { className: cx('label', hasCount && 'with-count'), "data-testid": 'modifier-button:badge' },
             hasCount && (count > 99 ? '99+' : count),
             hasMarkdown && (hasCount ? '(У)' : 'У'))),
-        [constants_1.MODIFIERS_TYPES.text, constants_1.MODIFIERS_TYPES.image].includes(type) && (react_1.default.createElement("div", { className: cx('content') },
-            type === constants_1.MODIFIERS_TYPES.text && (react_1.default.createElement("span", { className: cx('text', !squared && 'guttered') }, String(content || ''))),
-            type === constants_1.MODIFIERS_TYPES.image && react_1.default.createElement("img", { src: image, alt: content, className: cx('image') })))));
+        [constants_1.MODIFIER_TYPE.text, constants_1.MODIFIER_TYPE.image].includes(type) && (react_1.default.createElement("div", { className: cx('content') },
+            type === constants_1.MODIFIER_TYPE.text && (react_1.default.createElement("span", { className: cx('text', !squared && 'guttered') }, String(content || ''))),
+            type === constants_1.MODIFIER_TYPE.image && react_1.default.createElement("img", { src: image, alt: content, className: cx('image') })))));
 });

package/desktop/components/modifiers/button/modifier-button.module.scss

@@ -6,6 +6,8 @@
   max-width: 100%;
   position: relative;
   display: inline-block;
+  font-size: 0;
+  line-height: 0;
   border-radius: 4px;
   min-width: $minSize;
   height: $minSize;
@@ -47,6 +49,8 @@
 }
 
 .text {
+  font-size: 14px;
+  line-height: 20px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;

package/desktop/components/modifiers/group/index.d.ts

@@ -1,85 +1,15 @@
-/// <reference types="lodash" />
-import React, { Component } from 'react';
-import { ModifierButtonProps, Modifier } from '../button';
-declare type ModifierPredicate<T> = (item: Modifier) => T;
-interface ModifiersGroupState {
-    needShowAll: boolean;
-    hasHiddenNodes: boolean;
-    lastVisibleChildIndex: number | null;
-}
+import { MouseEventHandler, ReactNode } from 'react';
 export interface ModifiersGroupProps {
-    /** Список модификаторов. */
-    items?: Modifier[];
-    /** Флаг необходимости отображения всех модификаторов. */
-    needShowAll?: boolean;
-    /** Будет вызвана при выборе модификатора, получит сам модификатор. */
-    onSelectItem?: (item: Modifier, selected: boolean) => void;
-    /** Возвращает тип модификатора ("text" или "image", по умолчанию "text"). */
-    getItemType?: ModifierPredicate<ModifierButtonProps['type']>;
-    /** Возвращает число с количеством модификатора (по умолчанию свойство "count"). */
-    getItemCount?: ModifierPredicate<number>;
-    /** Возвращает цвет модификатора (по умолчанию свойство "color"). */
-    getItemColor?: ModifierPredicate<string>;
-    /** Возвращает содержимое модификатора (по умолчанию свойство "content"). */
-    getItemContent?: ModifierPredicate<string>;
-    /** Показывает, выбран ли модификатор (по умолчанию свойство "selected"). */
-    isSelectedItem?: ModifierPredicate<boolean>;
-    /** Возвращает URL изображения модификатора (по умолчанию свойство "image"). */
-    getItemImage?: ModifierPredicate<string>;
-    /** Имеет ли товар уценку. */
-    isMarkdown?: ModifierPredicate<boolean>;
-    /** Сработает при нажатии на кнопку отображения всех модификаторов. */
-    onClickShowAll?: () => void;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
+    /** Кнопки модификаторов. */
+    children?: ReactNode;
+    /** Надо ли сразу показывать весь список не ограничивая двумя строками. */
+    defaultOpened?: boolean;
+    /** Будет вызвана после нажатия на кнопку показа всех модификаторов. */
+    onShowAll?: MouseEventHandler<HTMLDivElement>;
 }
 /**
- * Создает функцию, находящую индекс элемента, который не должен быть виден.
- * @param container Контейнер.
- * @return Функция.
- */
-export declare const createHiddenNodeIndexFinder: (container: HTMLElement) => (childNode: HTMLElement) => boolean;
-/**
- * Компонент списка модификаторов.
+ * Блок списка кнопок модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
  */
-export declare class ModifiersGroup extends Component<ModifiersGroupProps, ModifiersGroupState> {
-    removeGlobalListener: any;
-    state: {
-        needShowAll: boolean;
-        hasHiddenNodes: boolean;
-        lastVisibleChildIndex: null;
-    };
-    windowWidth: number;
-    containerRef: React.RefObject<HTMLDivElement>;
-    showingButtonRef: React.RefObject<HTMLDivElement>;
-    /**
-     * @inheritdoc
-     */
-    componentDidMount(): void;
-    /**
-     * @inheritdoc
-     */
-    componentDidUpdate(): void;
-    /**
-     * @inheritdoc
-     */
-    componentWillUnmount(): void;
-    /**
-     * Сбрасывает информацию о видимых и невидимых дочерних узлах контейнера.
-     */
-    resetVisibleNodesData: import("lodash").DebouncedFunc<() => void>;
-    /**
-     * Обновляет информацию о видимых и невидимых дочерних узлах контейнера,
-     * необходимую для показа кнопки раскрытия полного списка модификаторов.
-     */
-    checkVisibleNodes: () => void;
-    /**
-     * Обработчик нажатия на кнопку отображения всех модификаторов.
-     */
-    handleShowAllClick: () => void;
-    /**
-     * @inheritdoc
-     */
-    render(): JSX.Element;
-}
-export {};
+export declare const ModifiersGroup: ({ children, defaultOpened, onShowAll, }: ModifiersGroupProps) => JSX.Element;

package/desktop/components/modifiers/group/index.js

@@ -22,144 +22,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModifiersGroup = exports.createHiddenNodeIndexFinder = void 0;
+exports.ModifiersGroup = void 0;
 const react_1 = __importStar(require("react"));
-const lodash_1 = require("lodash");
-const prop_1 = __importDefault(require("lodash/fp/prop"));
 const button_1 = require("../button");
-const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
-const modifiers_group_module_scss_1 = __importDefault(require("./modifiers-group.module.scss"));
+const utils_1 = require("./utils");
 const bind_1 = __importDefault(require("classnames/bind"));
+const modifiers_group_module_scss_1 = __importDefault(require("./modifiers-group.module.scss"));
 const cx = bind_1.default.bind(modifiers_group_module_scss_1.default);
 /**
- * Внешний отступ кнопки.
- */
-const MODIFIER_GUTTER = 4;
-/**
- * Создает функцию, находящую индекс элемента, который не должен быть виден.
- * @param container Контейнер.
- * @return Функция.
+ * Блок списка кнопок модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
  */
-const createHiddenNodeIndexFinder = (container) => (childNode) => {
-    let childOffsetTop = childNode.offsetTop;
-    if (childNode.classList.contains(cx('invisible'))) {
-        childOffsetTop -= MODIFIER_GUTTER;
-    }
-    return childOffsetTop - container.offsetTop >= container.clientHeight;
+const ModifiersGroup = ({ children, defaultOpened = false, onShowAll, }) => {
+    const [opened, setOpened] = (0, react_1.useState)(defaultOpened);
+    const rootRef = (0, react_1.useRef)(null);
+    const openerRef = (0, react_1.useRef)(null);
+    const showAll = (0, react_1.useCallback)(event => {
+        setOpened(true);
+        onShowAll === null || onShowAll === void 0 ? void 0 : onShowAll(event);
+    }, [onShowAll]);
+    const viewState = (0, utils_1.useViewState)(rootRef, openerRef);
+    const items = react_1.Children.toArray(children).reduce((result, child, index) => {
+        if ((0, react_1.isValidElement)(child) && child.type === button_1.ModifierButton) {
+            const needHideItems = viewState.lastVisibleIndex !== -1 && !opened;
+            const isDisplayed = !needHideItems || index < viewState.lastVisibleIndex;
+            result.push(react_1.default.createElement(GroupItem, { key: index, hidden: !isDisplayed }, child));
+        }
+        return result;
+    }, []);
+    return (react_1.default.createElement("div", { ref: rootRef, className: cx('root', { opened }) },
+        items,
+        !opened && (react_1.default.createElement(GroupItem, { ref: openerRef, invisible: viewState.lastVisibleIndex === -1 },
+            react_1.default.createElement(OpenButton, { count: items.length - viewState.lastVisibleIndex, onClick: showAll })))));
 };
-exports.createHiddenNodeIndexFinder = createHiddenNodeIndexFinder;
-const defaultGetItemType = (0, prop_1.default)('type');
-const defaultGetItemCount = (0, prop_1.default)('count');
-const defaultGetItemColor = (0, prop_1.default)('color');
-const defaultGetItemContent = (0, prop_1.default)('content');
-const defaultIsSelectedItem = (0, prop_1.default)('selected');
-const defaultGetItemImage = (0, prop_1.default)('image');
-const defaultGetIsMarkdown = (0, prop_1.default)('isMarkdown');
-/**
- * Компонент списка модификаторов.
- */
-class ModifiersGroup extends react_1.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            // нажата ли кнопка показа всех модификаторов
-            needShowAll: this.props.needShowAll || false,
-            // есть ли дочерние узлы контейнера, которые скрыты из за ограничения его высоты
-            hasHiddenNodes: true,
-            // индекс последнего видимого элемента в ограниченном по высоте контейнере
-            lastVisibleChildIndex: null,
-        };
-        this.windowWidth = 0;
-        this.containerRef = (0, react_1.createRef)();
-        this.showingButtonRef = (0, react_1.createRef)();
-        /**
-         * Сбрасывает информацию о видимых и невидимых дочерних узлах контейнера.
-         */
-        this.resetVisibleNodesData = (0, lodash_1.debounce)(() => {
-            if (document.documentElement.offsetWidth !== this.windowWidth) {
-                this.windowWidth = document.documentElement.offsetWidth;
-                this.setState({
-                    hasHiddenNodes: true,
-                    lastVisibleChildIndex: null,
-                });
-            }
-        }, 250, { leading: true });
-        /**
-         * Обновляет информацию о видимых и невидимых дочерних узлах контейнера,
-         * необходимую для показа кнопки раскрытия полного списка модификаторов.
-         */
-        this.checkVisibleNodes = () => {
-            // если не указан индекс последнего видимого узла
-            if (this.state.lastVisibleChildIndex === null) {
-                const containerEl = this.containerRef.current;
-                const showingButtonEl = this.showingButtonRef.current;
-                if (containerEl && showingButtonEl) {
-                    const childList = [...containerEl.children];
-                    const firstHiddenNodeIndex = childList.findIndex((0, exports.createHiddenNodeIndexFinder)(containerEl));
-                    if (firstHiddenNodeIndex !== -1) {
-                        const lastVisibleElIndex = firstHiddenNodeIndex - 1;
-                        const lastVisibleNode = childList[lastVisibleElIndex];
-                        if (lastVisibleNode) {
-                            const rightBound = lastVisibleNode.getBoundingClientRect().right;
-                            const rightContainerBound = containerEl.getBoundingClientRect().right;
-                            // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
-                            const isShowingButtonFit = rightContainerBound - rightBound >= showingButtonEl.clientWidth * 1.5;
-                            this.setState({
-                                // если хватает места - ставим кнопку после последнего, иначе - вместо
-                                lastVisibleChildIndex: lastVisibleElIndex + (isShowingButtonFit ? 1 : 0),
-                                hasHiddenNodes: true,
-                            });
-                        }
-                    }
-                    else {
-                        this.setState({ hasHiddenNodes: false });
-                    }
-                }
-            }
-        };
-        /**
-         * Обработчик нажатия на кнопку отображения всех модификаторов.
-         */
-        this.handleShowAllClick = () => {
-            const { onClickShowAll } = this.props;
-            this.setState({ needShowAll: true });
-            onClickShowAll && onClickShowAll();
-        };
-    }
-    /**
-     * @inheritdoc
-     */
-    componentDidMount() {
-        this.windowWidth = document.documentElement.offsetWidth;
-        this.removeGlobalListener = (0, on_1.default)(window, 'resize', this.resetVisibleNodesData);
-        this.checkVisibleNodes();
-    }
-    /**
-     * @inheritdoc
-     */
-    componentDidUpdate() {
-        this.checkVisibleNodes();
-    }
-    /**
-     * @inheritdoc
-     */
-    componentWillUnmount() {
-        this.removeGlobalListener();
-    }
-    /**
-     * @inheritdoc
-     */
-    render() {
-        const { items, onSelectItem, getItemType = defaultGetItemType, getItemCount = defaultGetItemCount, getItemColor = defaultGetItemColor, getItemContent = defaultGetItemContent, isSelectedItem = defaultIsSelectedItem, getItemImage = defaultGetItemImage, isMarkdown = defaultGetIsMarkdown, 'data-testid': testId = 'modifiers-group', } = this.props;
-        const { needShowAll, hasHiddenNodes, lastVisibleChildIndex } = this.state;
-        const needHideModifiers = !needShowAll && lastVisibleChildIndex !== null;
-        return (react_1.default.createElement("div", { className: cx('modifiers-group', !needShowAll && 'height-limited'), ref: this.containerRef, "data-testid": testId },
-            Array.isArray(items) &&
-                items.map((item, index) => {
-                    const isDisplayed = !needHideModifiers || index < lastVisibleChildIndex;
-                    return (react_1.default.createElement(button_1.ModifierButton, { key: index, type: getItemType(item), count: getItemCount(item), color: getItemColor(item), content: getItemContent(item), selected: isSelectedItem(item), image: getItemImage(item), onClick: () => onSelectItem && onSelectItem(item, isSelectedItem(item)), className: cx('guttered', !isDisplayed && 'not-display'), isMarkdown: isMarkdown(item) }));
-                }),
-            Array.isArray(items) && hasHiddenNodes && !needShowAll && (react_1.default.createElement(button_1.ModifierButton, { squared: true, ref: this.showingButtonRef, content: `+${items.length - lastVisibleChildIndex}`, className: cx('show-all-button', 'guttered', lastVisibleChildIndex === null && 'invisible'), onClick: this.handleShowAllClick, "data-testid": 'modifier-group:show-all-button' }))));
-    }
-}
 exports.ModifiersGroup = ModifiersGroup;
+const GroupItem = (0, react_1.forwardRef)(({ children, hidden, invisible }, ref) => (react_1.default.createElement("div", { ref: ref, className: cx('item', { hidden, invisible }), "data-testid": 'modifier-group:item' }, children)));
+const OpenButton = ({ count, onClick }) => (react_1.default.createElement(button_1.ModifierButton, { squared: true, onClick: onClick, content: `+${count}`, className: cx('opener'), "data-testid": 'modifier-group:show-all-button' }));

package/desktop/components/modifiers/group/modifiers-group.module.scss

@@ -1,43 +1,31 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
-@import '../modifiers';
+@use '../modifiers';
 
-.modifiers-group {
+.root {
+  position: relative;
   display: flex;
   flex-wrap: wrap;
-  margin: -$gutter;
+  flex-direction: row;
+  margin: -#{modifiers.$gutter};
+  font-size: 0;
   overflow: hidden;
-  &.height-limited {
-    max-height: $groupMaxHeight;
+  &:not(.opened) {
+    max-height: modifiers.$groupMaxHeight;
   }
 }
 
-.modifiers-title {
-  font-size: 14px;
-  font-weight: normal;
-  margin: 0 0 16px;
-}
-
-.modifiers-link {
-  display: inline-block;
-  margin: 16px 0;
-}
-
-.guttered {
-  margin: $gutter;
+.item {
+  height: modifiers.$minSize;
+  margin: modifiers.$gutter;
+  max-width: 100%;
+  &.hidden {
+    display: none;
+  }
+  &.invisible {
+    opacity: 0;
+  }
 }
 
-.show-all-button {
-  width: $minSize;
+.opener {
   color: colors.$basic-blue;
 }
-
-.not-display {
-  display: none;
-}
-
-.invisible {
-  opacity: 0;
-  height: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}

package/desktop/components/modifiers/group/utils.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+export interface ViewState {
+    phase: 'default' | 'ready';
+    lastVisibleIndex: number;
+}
+export declare const initialViewState: ViewState;
+/**
+ * Хук состояния отображения блока модификаторов.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
+ * @return Состояние.
+ */
+export declare function useViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;
+/**
+ * Определяет индекс последней видимой кнопки-модификатора для свернутого списка модификаторов.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
+ * @return Состояние.
+ */
+export declare function defineViewState(containerRef: RefObject<HTMLElement>, openerRef: RefObject<HTMLElement>): ViewState;