@sima-land/moleculas 13.4.0 → 14.2.0

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

@@ -11,7 +11,7 @@ export interface InteractiveImagePointProps extends React.AnchorHTMLAttributes<H
     y: number;
     'data-testid'?: string;
 }
-export declare const InteractiveImage: ({ children, "data-testid": testId, className, ...rest }: InteractiveImageProps) => JSX.Element;
+export declare const InteractiveImage: React.ForwardRefExoticComponent<InteractiveImageProps & React.RefAttributes<HTMLDivElement>>;
 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

@@ -37,11 +37,10 @@ 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) => {
+exports.InteractiveImage = (0, react_1.forwardRef)((_a, ref) => {
     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;
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, 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))));
+});
 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)));

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;

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

@@ -0,0 +1,73 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defineViewState = exports.useViewState = exports.initialViewState = void 0;
+const react_1 = require("react");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
+exports.initialViewState = {
+    phase: 'default',
+    lastVisibleIndex: -1,
+};
+/**
+ * Хук состояния отображения блока модификаторов.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
+ * @return Состояние.
+ */
+function useViewState(containerRef, openerRef) {
+    const [viewState, setViewState] = (0, react_1.useState)(exports.initialViewState);
+    (0, react_1.useEffect)(() => {
+        const off = (0, on_1.default)(window, 'resize', () => {
+            setViewState(exports.initialViewState);
+        });
+        return off;
+    }, []);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        if (viewState.phase === 'default') {
+            setViewState(defineViewState(containerRef, openerRef));
+        }
+    }, [viewState.phase, containerRef, openerRef]);
+    return viewState;
+}
+exports.useViewState = useViewState;
+/**
+ * Определяет индекс последней видимой кнопки-модификатора для свернутого списка модификаторов.
+ * @param containerRef Ref элемента-контейнера.
+ * @param openerRef Ref элемента кнопки, показывающей весь список модификаторов.
+ * @return Состояние.
+ */
+function defineViewState(containerRef, openerRef) {
+    const state = {
+        phase: 'ready',
+        lastVisibleIndex: -1,
+    };
+    const container = containerRef.current;
+    const opener = openerRef.current;
+    if (container && opener) {
+        const parentRect = container.getBoundingClientRect();
+        const childList = [...container.children];
+        const firstHiddenNodeIndex = childList
+            .filter(child => child !== opener)
+            .findIndex(child => {
+            const childRect = child.getBoundingClientRect();
+            return childRect.top - parentRect.top >= parentRect.height;
+        });
+        if (firstHiddenNodeIndex !== -1) {
+            const lastVisibleIndex = firstHiddenNodeIndex - 1;
+            const lastVisible = childList[lastVisibleIndex];
+            if (lastVisible) {
+                const rightBound = lastVisible.getBoundingClientRect().right;
+                const rightContainerBound = container.getBoundingClientRect().right;
+                // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
+                const isOpenerFit = rightContainerBound - rightBound >= opener.clientWidth * 1.5;
+                // если хватает места - ставим кнопку после последнего, иначе - вместо
+                state.lastVisibleIndex = lastVisibleIndex + Number(isOpenerFit);
+            }
+        }
+    }
+    return state;
+}
+exports.defineViewState = defineViewState;

package/desktop/components/modifiers/modifiers.scss

@@ -1,3 +1,8 @@
+// внешний отступ вокруг каждого элемента группы
 $gutter: 4px;
+
+// размер квадратного модификатора
 $minSize: 48px;
+
+// максимальная высота блока с ограничением в 2 строки
 $groupMaxHeight: ($minSize * 2) + ($gutter * 4);

package/desktop/components/product-carousel/index.js

@@ -71,7 +71,7 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
         items.length > 0 && (react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
             // докидываем индекс чтобы позже брать актуальные данные из списка по нему
             items: items.map((item, index) => [item, index]) }, (itemWidth !== null && {
-            withControls: true,
+            withControls: undefined,
             controlProps: {
                 size: needBigArrows ? 'l' : 's',
                 style: {

package/mobile/components/modifiers-list/modifier-item/index.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { ModifierType } from '../../../../common/types';
 export interface ModifierItemProps {
     name: string;
     selected?: boolean;
-    type?: 'text' | 'image' | 'color';
+    type?: ModifierType;
     color?: string;
     image?: string;
     price: number;

package/mobile/components/modifiers-list/modifier-item/index.js

@@ -7,10 +7,10 @@ exports.ModifierItem = exports.cx = void 0;
 const react_1 = __importDefault(require("react"));
 const modifier_item_module_scss_1 = __importDefault(require("./modifier-item.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
-const constants_1 = require("../../../../common/constants");
 const price_1 = require("@sima-land/ui-nucleons/price");
 const text_1 = require("@sima-land/ui-nucleons/text");
 const check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/check"));
+const constants_1 = require("../../../../common/constants");
 exports.cx = bind_1.default.bind(modifier_item_module_scss_1.default);
 /**
  * Компонент модификатора в списке.
@@ -27,8 +27,8 @@ exports.cx = bind_1.default.bind(modifier_item_module_scss_1.default);
  * @return Элемент.
  */
 const ModifierItem = ({ name, selected, type = 'text', color, image, price, currencyGrapheme, additionalText, onClick, }) => (react_1.default.createElement("div", { onClick: onClick, className: (0, exports.cx)('wrapper', selected && 'selected') },
-    Boolean(type === constants_1.MODIFIERS_TYPES.image && image) && (react_1.default.createElement("img", { className: (0, exports.cx)('adornment'), src: image, alt: name })),
-    Boolean(type === constants_1.MODIFIERS_TYPES.color && color) && (react_1.default.createElement("div", { className: (0, exports.cx)('adornment', 'color'), style: { backgroundColor: color } })),
+    Boolean(type === constants_1.MODIFIER_TYPE.image && image) && (react_1.default.createElement("img", { className: (0, exports.cx)('adornment'), src: image, alt: name })),
+    Boolean(type === constants_1.MODIFIER_TYPE.color && color) && (react_1.default.createElement("div", { className: (0, exports.cx)('adornment', 'color'), style: { backgroundColor: color } })),
     react_1.default.createElement("div", { className: (0, exports.cx)('info') },
         react_1.default.createElement("span", { className: (0, exports.cx)('name') }, name),
         Boolean(price) && (react_1.default.createElement(price_1.Price, { value: price, currencyGrapheme: currencyGrapheme, className: (0, exports.cx)('price', additionalText && 'additional') })),