@sima-land/moleculas 16.0.0-alpha.5 → 16.0.0-alpha.7

package/common/components/media-modal/__mocks__/index.js

@@ -92,6 +92,7 @@ exports.mixed = [
         type: 'video',
         data: {
             src: 'https://cdn2.static1-sima-land.com/flv/3404953.mp4',
+            thumbnail: 'https://loremflickr.com/240/240?random=16',
         },
     },
     {

package/common/components/media-modal/parts/all-round-view.js

@@ -42,7 +42,7 @@ const react_1 = __importStar(require("react"));
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const all_round_view_1 = require("../../../../desktop/components/gallery-modal/components/all-round-view");
 const utils_1 = require("../utils");
-const touch_x_svg_1 = __importDefault(require("../../../icons/touch-x.svg"));
+const TouchScrollX_1 = __importDefault(require("@sima-land/ui-quarks/icons/64x64/Colorful/TouchScrollX"));
 const all_round_view_module_scss_1 = __importDefault(require("./all-round-view.module.scss"));
 /**
  * Просмотр 360.
@@ -73,6 +73,6 @@ function AfterMount(_a) {
     }, []);
     return (react_1.default.createElement("div", { className: all_round_view_module_scss_1.default.root },
         !desktop && tutorial && (react_1.default.createElement("div", { className: all_round_view_module_scss_1.default.tutorial, onPointerUp: acceptTutorial },
-            react_1.default.createElement(touch_x_svg_1.default, null))),
+            react_1.default.createElement(TouchScrollX_1.default, null))),
         react_1.default.createElement(all_round_view_1.AllRoundView, Object.assign({}, props, { controls: desktop, state: state, onStateChange: setState }))));
 }

package/common/components/media-modal/parts/index.js

@@ -10,11 +10,11 @@ const define_slots_1 = require("@sima-land/ui-nucleons/helpers/define-slots");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const utils_1 = require("../utils");
 const scroll_section_1 = require("./scroll-section");
-const left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/left"));
+const Left_1 = __importDefault(require("@sima-land/ui-quarks/icons/16x16/Stroked/Arrows/Left"));
 const parts_module_scss_1 = __importDefault(require("./parts.module.scss"));
 exports.Preset = {
     headerTabs: (userProps) => (Object.assign({ view: 'clean-underline' }, userProps)),
-    headerButton: (userProps) => (Object.assign({ size: 's', startIcon: left_1.default, iconGutter: 4, className: parts_module_scss_1.default['header-button'], children: 'Вернуться к основному товару' }, userProps)),
+    headerButton: (userProps) => (Object.assign({ size: 's', startIcon: Left_1.default, iconGutter: 4, className: parts_module_scss_1.default['header-button'], children: 'Вернуться к основному товару' }, userProps)),
 };
 /**
  * Формирует layout для шапки модального окна медиа.

package/common/components/media-modal/parts/media-content.d.ts

@@ -1,10 +1,12 @@
 import { ReactNode } from 'react';
 import { MediaData } from '../types';
 export interface MediaContentProps {
-    items: MediaData[];
+    children?: ReactNode;
     targetIndex?: number;
     onChangeTargetIndex?: (newIndex: number) => void;
     loading?: boolean;
+    /** @deprecated */
+    items?: MediaData[];
 }
 export interface FitSquareProps {
     children?: ReactNode;

package/common/components/media-modal/parts/media-content.js

@@ -50,26 +50,28 @@ exports.MediaContent = MediaContent;
  * @param props Свойства.
  * @return Элемент.
  */
-function MediaCarousel({ items, targetIndex, onChangeTargetIndex, loading }) {
+function MediaCarousel({ items: itemsProp, children, targetIndex, onChangeTargetIndex, loading, }) {
     const ref = (0, react_1.useRef)(null);
     const area = (0, utils_1.useClientRect)(ref);
+    const items = toViewPropsList(itemsProp, children);
     return (react_1.default.createElement("div", { ref: ref, className: media_content_module_scss_1.default.carousel }, area.ready && (react_1.default.createElement(carousel_1.Carousel, { infinite: false, targetIndex: targetIndex, onChangeTargetIndex: onChangeTargetIndex, draggable: true, containerProps: {
             className: media_content_module_scss_1.default.carousel,
             // в случае если будет работать некорректно - дать возможность задавать пропсы для Carousel
             [page_scroll_lock_1.BSL_IGNORE_ATTR]: true,
-        }, withControls: false, items: items, renderItem: data => (react_1.default.createElement("div", { className: media_content_module_scss_1.default['carousel-item'] },
+        }, withControls: false, items: items, renderItem: (props) => (react_1.default.createElement("div", { className: media_content_module_scss_1.default['carousel-item'] },
             react_1.default.createElement(FitSquare, Object.assign({}, area),
-                react_1.default.createElement(media_view_1.MediaView, { media: data, loading: loading })))) }))));
+                react_1.default.createElement(media_view_1.MediaView, Object.assign({ loading: loading }, props))))) }))));
 }
 /**
  * Отображает медиа-контент в виде слайдера.
  * @param props Свойства.
  * @return Элемент.
  */
-function MediaSlider({ items, targetIndex, onChangeTargetIndex, loading }) {
+function MediaSlider({ items: itemsProp, children, targetIndex, onChangeTargetIndex, loading, }) {
     const [position, setPosition] = (0, react_1.useState)(0);
     const ref = (0, react_1.useRef)(null);
     const area = (0, utils_1.useClientRect)(ref);
+    const items = toViewPropsList(itemsProp, children);
     const total = items.length;
     const controls = total > 1;
     const correction = controls ? -(2 * (56 + 24)) : 0;
@@ -85,13 +87,26 @@ function MediaSlider({ items, targetIndex, onChangeTargetIndex, loading }) {
                 onChangeTargetIndex === null || onChangeTargetIndex === void 0 ? void 0 : onChangeTargetIndex(next);
             } })),
         react_1.default.createElement(FitSquare, { width: area.width + correction, height: area.height },
-            react_1.default.createElement(media_view_1.MediaView, { media: items[position], loading: loading })),
+            react_1.default.createElement(media_view_1.MediaView, Object.assign({ loading: loading }, items[position]))),
         controls && (react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', onClick: () => {
                 const next = (position + 1) % total;
                 setPosition(next);
                 onChangeTargetIndex === null || onChangeTargetIndex === void 0 ? void 0 : onChangeTargetIndex(next);
             } }))))));
 }
+/**
+ * Получив пропсы items и children вернет массив пропсов для MediaView.
+ * @param items Проп items.
+ * @param children Проп children.
+ * @return Массив пропсов для MediaVuew.
+ */
+function toViewPropsList(items, children) {
+    var _a;
+    return ((_a = items === null || items === void 0 ? void 0 : items.map(media => ({ media }))) !== null && _a !== void 0 ? _a : react_1.Children.toArray(children).reduce((acc, item) => {
+        (0, react_1.isValidElement)(item) && item.type === media_view_1.MediaView && acc.push(item.props);
+        return acc;
+    }, []));
+}
 /**
  * Вписывает квадрат в заданную прямоугольную область.
  * @param props Свойства.

package/common/components/media-modal/parts/media-view.js

@@ -30,9 +30,11 @@ exports.MediaView = void 0;
 const react_1 = __importStar(require("react"));
 const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
 const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
-const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
 const all_round_view_1 = require("./all-round-view");
+const image_broken_svg_1 = __importDefault(require("../../../icons/image-broken.svg"));
+const media_view_module_scss_1 = __importDefault(require("./media-view.module.scss"));
+const hooks_1 = require("../../../hooks");
 /**
  * Отображает медиа-контент - 360, видео или изображение.
  * @param props Свойства.
@@ -40,6 +42,14 @@ const all_round_view_1 = require("./all-round-view");
  */
 function MediaView({ media, loading, videoProps }) {
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    let imageSrc = undefined;
+    if ((media === null || media === void 0 ? void 0 : media.type) === 'image') {
+        imageSrc = media.data.src;
+    }
+    else if ((media === null || media === void 0 ? void 0 : media.type) === 'video') {
+        imageSrc = media.data.thumbnail;
+    }
+    const { failed, handleError } = (0, hooks_1.useImageStub)(imageSrc);
     const videoRef = (0, react_1.useRef)(null);
     const videoSrc = (media === null || media === void 0 ? void 0 : media.type) === 'video' ? media.data.src : null;
     (0, react_1.useEffect)(() => {
@@ -54,7 +64,8 @@ function MediaView({ media, loading, videoProps }) {
     }
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(media_view_module_scss_1.default.root) },
         (media === null || media === void 0 ? void 0 : media.type) === 'image' && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: media_view_module_scss_1.default.image },
-            react_1.default.createElement("img", { src: media.data.src, alt: media.data.alt || '' }))),
+            failed && react_1.default.createElement(image_broken_svg_1.default, null),
+            !failed && react_1.default.createElement("img", { src: media.data.src, alt: media.data.alt || '', onError: handleError }))),
         (media === null || media === void 0 ? void 0 : media.type) === 'video' && (react_1.default.createElement("video", Object.assign({ autoPlay: false, controls: true, controlsList: 'nodownload' }, videoProps, { ref: videoRef }),
             react_1.default.createElement("source", { src: media.data.src }))),
         (media === null || media === void 0 ? void 0 : media.type) === '360' && react_1.default.createElement(all_round_view_1.AllRoundView, { photos: media.data.photos, controls: desktop })));

package/common/components/media-modal/parts/media-view.module.scss

@@ -27,4 +27,9 @@
     height: 100%;
     object-fit: contain;
   }
+  .image svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
 }

package/common/components/media-modal/parts/product-brief.js

@@ -18,9 +18,11 @@ exports.ProductBrief = void 0;
 const react_1 = __importDefault(require("react"));
 const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
 const price_1 = require("@sima-land/ui-nucleons/price");
+const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
+const hooks_1 = require("../../../hooks");
 const bind_1 = __importDefault(require("classnames/bind"));
+const image_broken_svg_1 = __importDefault(require("../../../icons/image-broken.svg"));
 const product_brief_module_scss_1 = __importDefault(require("./product-brief.module.scss"));
-const breakpoint_1 = require("@sima-land/ui-nucleons/hooks/breakpoint");
 const cx = bind_1.default.bind(product_brief_module_scss_1.default);
 /**
  * Блок товара-рекомендации.
@@ -30,6 +32,7 @@ const cx = bind_1.default.bind(product_brief_module_scss_1.default);
 function ProductBrief(_a) {
     var { size: sizeProp, imageSrc, title, price, currency, footer, className, href, onLinkClick, loading } = _a, restProps = __rest(_a, ["size", "imageSrc", "title", "price", "currency", "footer", "className", "href", "onLinkClick", "loading"]);
     const desktop = (0, breakpoint_1.useBreakpoint)('xs+');
+    const { failed, handleError } = (0, hooks_1.useImageStub)(imageSrc);
     const size = (sizeProp !== null && sizeProp !== void 0 ? sizeProp : desktop) ? 'l' : 's';
     if (loading) {
         return react_1.default.createElement(ProductBriefSkeleton, { size: size });
@@ -37,7 +40,8 @@ function ProductBrief(_a) {
     return (react_1.default.createElement("div", Object.assign({ className: cx('root', `size-${size}`, className) }, restProps),
         react_1.default.createElement("a", { className: product_brief_module_scss_1.default.image, href: href, onClick: onLinkClick },
             react_1.default.createElement(image_overlay_1.ImageOverlay, { className: product_brief_module_scss_1.default.overlay },
-                react_1.default.createElement("img", { src: imageSrc }))),
+                failed && react_1.default.createElement(image_broken_svg_1.default, null),
+                !failed && react_1.default.createElement("img", { src: imageSrc, onError: handleError }))),
         react_1.default.createElement("div", { className: product_brief_module_scss_1.default.info },
             react_1.default.createElement("a", { className: product_brief_module_scss_1.default.title, href: href, onClick: onLinkClick }, title),
             price && react_1.default.createElement(price_1.Price, { className: product_brief_module_scss_1.default.price, value: price, currencyGrapheme: currency })),

package/common/components/media-modal/parts/product-brief.module.scss

@@ -15,6 +15,11 @@
       height: 100%;
       object-fit: contain;
     }
+    > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 

package/common/components/media-modal/parts/thumbnail.js

@@ -29,11 +29,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Thumbnail = exports.ThumbnailContext = void 0;
 const react_1 = __importStar(require("react"));
 const image_overlay_1 = require("../../../../desktop/components/gallery-modal/components/image-overlay");
-const play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/play"));
+const Play_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/Play"));
 const _360_svg_1 = __importDefault(require("../../../../desktop/components/gallery-modal/icons/360.svg"));
+const price_1 = require("@sima-land/ui-nucleons/price");
+const hooks_1 = require("../../../hooks");
 const bind_1 = __importDefault(require("classnames/bind"));
+const image_broken_svg_1 = __importDefault(require("../../../icons/image-broken.svg"));
 const thumbnail_module_scss_1 = __importDefault(require("./thumbnail.module.scss"));
-const price_1 = require("@sima-land/ui-nucleons/price");
 exports.ThumbnailContext = (0, react_1.createContext)({});
 const cx = bind_1.default.bind(thumbnail_module_scss_1.default);
 /**
@@ -44,6 +46,7 @@ const cx = bind_1.default.bind(thumbnail_module_scss_1.default);
 function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, className, loading, title, price, currency, }) {
     var _a;
     const { size: sizeFromContext } = (0, react_1.useContext)(exports.ThumbnailContext);
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src);
     const size = (_a = sizeFromProps !== null && sizeFromProps !== void 0 ? sizeFromProps : sizeFromContext) !== null && _a !== void 0 ? _a : 'l';
     const rootClassName = cx('root', `size-${size}`, (type === null || type === void 0 ? void 0 : type.startsWith('icon-')) && 'iconic', checked && 'checked', loading && 'loading', className);
     if (loading) {
@@ -54,10 +57,11 @@ function Thumbnail({ size: sizeFromProps, type, src, alt, checked, onClick, clas
     return (react_1.default.createElement("button", { className: rootClassName, onClick: onClick, "data-testid": 'thumbnail' },
         react_1.default.createElement("span", { className: cx('content') },
             (type === null || type === void 0 ? void 0 : type.startsWith('preview-')) && (react_1.default.createElement(image_overlay_1.ImageOverlay, { className: cx('image') },
-                react_1.default.createElement("img", { src: src, alt: alt }))),
-            type === 'preview-video' && react_1.default.createElement("span", { className: cx('play') }),
+                failed && react_1.default.createElement(image_broken_svg_1.default, null),
+                !failed && react_1.default.createElement("img", { src: src, alt: alt, onError: handleError }))),
+            !failed && type === 'preview-video' && react_1.default.createElement("span", { className: cx('play') }),
             type === 'icon-360' && react_1.default.createElement(_360_svg_1.default, { fill: 'currentColor' }),
-            type === 'icon-video' && react_1.default.createElement(play_1.default, { width: 32, height: 32, fill: 'currentColor' })),
+            type === 'icon-video' && react_1.default.createElement(Play_1.default, { width: 32, height: 32, fill: 'currentColor' })),
         (title || price) && (react_1.default.createElement("span", { className: cx('info') },
             title && react_1.default.createElement("span", { className: cx('title') }, title),
             price && react_1.default.createElement(price_1.Price, { className: cx('price'), value: price, currencyGrapheme: currency })))));

package/common/components/media-modal/parts/thumbnail.module.scss

@@ -98,6 +98,11 @@
       height: 100%;
       object-fit: contain;
     }
+    > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
   }
   &::after {
     content: '';

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

@@ -1,48 +1,2 @@
-import { AnchorHTMLAttributes } from 'react';
-interface TextContent {
-    type: 'text';
-    text: string;
-}
-interface ColorContent {
-    type: 'color';
-    color: string;
-}
-interface ImageContent {
-    type: 'image';
-    src: string;
-}
-export type ModifierContent = TextContent | ColorContent | ImageContent;
-export interface ModifierProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** Вывести выбранным. */
-    active?: boolean;
-    /** Вывести отключенным. */
-    disabled?: boolean;
-    /** Вывести зачеркнутым. */
-    crossedOut?: boolean;
-    /** Содержимое. */
-    content: ModifierContent;
-    /** Высота по дизайн-гайдам. */
-    size?: 's' | 'm';
-    /** Кол-во. */
-    count?: number;
-    /** Выводить ли ярлык уценки. */
-    markdown?: boolean;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-export type MoreButtonProps = Omit<ModifierProps, 'content' | 'crossedOut' | 'active' | 'count'> & {
-    count: number;
-};
-/**
- * Кнопка модификатора (аналога товара).
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId, ...props }: ModifierProps): JSX.Element;
-/**
- * Кнопка "+N" для показа полного списка модификаторов.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare function MoreButton({ count, className, 'data-testid': testId, ...rest }: MoreButtonProps): JSX.Element;
-export {};
+export type { TextContent, ImageContent, ColorContent, ModifierContent, ModifierProps, MoreButtonProps, } from './types';
+export { Modifier, MoreButton } from './modifier';

package/common/components/modifier/index.js

@@ -1,103 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __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.MoreButton = exports.Modifier = void 0;
-const react_1 = __importStar(require("react"));
-const hint_1 = require("@sima-land/ui-nucleons/hint");
-const bind_1 = __importDefault(require("classnames/bind"));
-const modifiers_module_scss_1 = __importDefault(require("./modifiers.module.scss"));
-const cx = bind_1.default.bind(modifiers_module_scss_1.default);
-/**
- * Кнопка модификатора (аналога товара).
- * @param props Свойства.
- * @return Элемент.
- */
-function Modifier(_a) {
-    var { size = 'm', active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId = 'modifier' } = _a, props = __rest(_a, ["size", "active", "crossedOut", "disabled", "content", "count", "className", "markdown", 'data-testid']);
-    // текст хинта
-    const [hint, setHint] = (0, react_1.useState)('');
-    // состояние хинта
-    const [open, setOpen] = (0, react_1.useState)(false);
-    // позиционирование хинта
-    const _b = (0, hint_1.useHintFloating)({ open, onOpenChange: setOpen }), { refs } = _b, floating = __rest(_b, ["refs"]);
-    // пользовательское взаимодействие для хинта
-    const { getReferenceProps, getFloatingProps } = (0, hint_1.useHintOnHover)(floating);
-    // определение необходимости активации хинта
-    (0, react_1.useEffect)(() => {
-        const textElement = refs.reference.current;
-        if (!(textElement instanceof HTMLElement) || content.type !== 'text') {
-            return;
-        }
-        // eslint-disable-next-line require-jsdoc
-        const defineHint = () => setHint(isTruncated(textElement) ? content.text : '');
-        defineHint();
-        const observer = new ResizeObserver(defineHint);
-        observer.observe(textElement);
-        return () => observer.disconnect();
-    }, [content.text]);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("a", Object.assign({}, props, { className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId }),
-            content.type === 'color' && (react_1.default.createElement("span", { className: cx('color'), role: 'banner', style: { background: content.color } })),
-            content.type === 'image' && (react_1.default.createElement("span", { className: cx('image'), role: 'banner', style: { backgroundImage: `url(${content.src})` } })),
-            content.type === 'text' && (react_1.default.createElement("span", Object.assign({ ref: refs.setReference, className: cx('text') }, getReferenceProps()), content.text)),
-            typeof count === 'number' && (react_1.default.createElement("span", { className: cx('counter') }, count > 99 ? '99+' : count)),
-            crossedOut && (react_1.default.createElement("svg", { width: '100%', height: '100%', className: cx('diagonal') },
-                react_1.default.createElement("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)' }))),
-            markdown && react_1.default.createElement("span", { className: modifiers_module_scss_1.default.corner }, "\u0423")),
-        hint && (react_1.default.createElement(hint_1.Hint, Object.assign({ open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow }, getFloatingProps()), hint))));
-}
-exports.Modifier = Modifier;
-/**
- * Кнопка "+N" для показа полного списка модификаторов.
- * @param props Свойства.
- * @return Элемент.
- */
-function MoreButton(_a) {
-    var { count, className, 'data-testid': testId = 'more-modifiers' } = _a, rest = __rest(_a, ["count", "className", 'data-testid']);
-    return (react_1.default.createElement(Modifier, Object.assign({ role: 'button', "aria-label": '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0430\u043D\u0430\u043B\u043E\u0433\u0438' }, rest, { className: cx('more', className), content: { type: 'text', text: `+${count}` }, "data-testid": testId })));
-}
-exports.MoreButton = MoreButton;
-/**
- * Определяет, обрезан ли текст в элементе.
- * @param el Элемент.
- * @return Обрезан ли текст в элементе.
- */
-function isTruncated(el) {
-    return el.scrollWidth > el.clientWidth;
-}
+var modifier_1 = require("./modifier");
+Object.defineProperty(exports, "Modifier", { enumerable: true, get: function () { return modifier_1.Modifier; } });
+Object.defineProperty(exports, "MoreButton", { enumerable: true, get: function () { return modifier_1.MoreButton; } });

package/common/components/modifier/modifier.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { ModifierProps, MoreButtonProps } from './types';
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Modifier({ size, active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId, ...props }: ModifierProps): JSX.Element;
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function MoreButton({ count, className, 'data-testid': testId, ...rest }: MoreButtonProps): JSX.Element;

package/common/components/modifier/modifier.js

@@ -0,0 +1,117 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __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.MoreButton = exports.Modifier = void 0;
+const react_1 = __importStar(require("react"));
+const hint_1 = require("@sima-land/ui-nucleons/hint");
+const hooks_1 = require("../../hooks");
+const ImageBroken_1 = __importDefault(require("@sima-land/ui-quarks/icons/40x40/Stroked/ImageBroken"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const modifier_module_scss_1 = __importDefault(require("./modifier.module.scss"));
+const cx = bind_1.default.bind(modifier_module_scss_1.default);
+/**
+ * Кнопка модификатора (аналога товара).
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Modifier(_a) {
+    var { size = 'm', active, crossedOut, disabled, content, count, className, markdown, 'data-testid': testId = 'modifier' } = _a, props = __rest(_a, ["size", "active", "crossedOut", "disabled", "content", "count", "className", "markdown", 'data-testid']);
+    // текст хинта
+    const [hint, setHint] = (0, react_1.useState)('');
+    // состояние хинта
+    const [open, setOpen] = (0, react_1.useState)(false);
+    // позиционирование хинта
+    const _b = (0, hint_1.useHintFloating)({ open, onOpenChange: setOpen }), { refs } = _b, floating = __rest(_b, ["refs"]);
+    // пользовательское взаимодействие для хинта
+    const { getReferenceProps, getFloatingProps } = (0, hint_1.useHintOnHover)(floating);
+    // определение необходимости активации хинта
+    (0, react_1.useEffect)(() => {
+        const textElement = refs.reference.current;
+        if (!(textElement instanceof HTMLElement) || content.type !== 'text') {
+            return;
+        }
+        // eslint-disable-next-line require-jsdoc
+        const defineHint = () => setHint(isTruncated(textElement) ? content.text : '');
+        defineHint();
+        const observer = new ResizeObserver(defineHint);
+        observer.observe(textElement);
+        return () => observer.disconnect();
+    }, [content.text]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("a", Object.assign({}, props, { className: cx('root', `size-${size}`, { active, disabled }, className), "data-testid": testId }),
+            content.type === 'color' && (react_1.default.createElement("span", { className: cx('color'), role: 'banner', style: { background: content.color } })),
+            content.type === 'image' && react_1.default.createElement(Image, { src: content.src }),
+            content.type === 'text' && (react_1.default.createElement("span", Object.assign({ ref: refs.setReference, className: cx('text') }, getReferenceProps()), content.text)),
+            typeof count === 'number' && (react_1.default.createElement("span", { className: cx('counter') }, count > 99 ? '99+' : count)),
+            crossedOut && (react_1.default.createElement("svg", { width: '100%', height: '100%', className: cx('diagonal') },
+                react_1.default.createElement("line", { x1: '0', y1: '100%', x2: '100%', y2: '0', stroke: 'var(--modifier-border-color)' }))),
+            markdown && react_1.default.createElement("span", { className: modifier_module_scss_1.default.corner }, "\u0423")),
+        hint && (react_1.default.createElement(hint_1.Hint, Object.assign({ open: open, hintRef: refs.setFloating, arrowRef: refs.setArrow }, getFloatingProps()), hint))));
+}
+exports.Modifier = Modifier;
+/**
+ * Картинка с заглушкой в случае ошибки загрузки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Image(_a) {
+    var { src, onError } = _a, rest = __rest(_a, ["src", "onError"]);
+    const { failed, handleError } = (0, hooks_1.useImageStub)(src, onError);
+    return (react_1.default.createElement("span", { className: cx('image-wrapper', { fail: failed }) },
+        failed && react_1.default.createElement(ImageBroken_1.default, null),
+        react_1.default.createElement("img", Object.assign({ className: cx('image') }, rest, { src: src, onError: handleError }))));
+}
+/**
+ * Кнопка "+N" для показа полного списка модификаторов.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function MoreButton(_a) {
+    var { count, className, 'data-testid': testId = 'more-modifiers' } = _a, rest = __rest(_a, ["count", "className", 'data-testid']);
+    return (react_1.default.createElement(Modifier, Object.assign({ role: 'button', "aria-label": '\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u0432\u0441\u0435 \u0430\u043D\u0430\u043B\u043E\u0433\u0438' }, rest, { className: cx('more', className), content: { type: 'text', text: `+${count}` }, "data-testid": testId })));
+}
+exports.MoreButton = MoreButton;
+/**
+ * Определяет, обрезан ли текст в элементе.
+ * @param el Элемент.
+ * @return Обрезан ли текст в элементе.
+ */
+function isTruncated(el) {
+    return el.scrollWidth > el.clientWidth;
+}

package/common/components/modifier/{modifiers.module.scss → modifier.module.scss}

@@ -97,6 +97,27 @@
   background-size: cover;
 }
 
+.image-wrapper {
+  border-radius: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: colors.$basic-gray4;
+  &.fail {
+    --modifier-media-opacity: 0;
+  }
+  > svg {
+    width: calc(48%);
+    height: calc(48%);
+    fill: colors.$basic-gray24;
+  }
+}
+
 .text {
   padding: var(--modifier-padding);
   display: block;

package/common/components/modifier/types.d.ts

@@ -0,0 +1,35 @@
+import type { AnchorHTMLAttributes } from 'react';
+export interface TextContent {
+    type: 'text';
+    text: string;
+}
+export interface ColorContent {
+    type: 'color';
+    color: string;
+}
+export interface ImageContent {
+    type: 'image';
+    src: string;
+}
+export type ModifierContent = TextContent | ColorContent | ImageContent;
+export interface ModifierProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Вывести выбранным. */
+    active?: boolean;
+    /** Вывести отключенным. */
+    disabled?: boolean;
+    /** Вывести зачеркнутым. */
+    crossedOut?: boolean;
+    /** Содержимое. */
+    content: ModifierContent;
+    /** Высота по дизайн-гайдам. */
+    size?: 's' | 'm';
+    /** Кол-во. */
+    count?: number;
+    /** Выводить ли ярлык уценки. */
+    markdown?: boolean;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}
+export type MoreButtonProps = Omit<ModifierProps, 'content' | 'crossedOut' | 'active' | 'count'> & {
+    count: number;
+};

package/common/components/modifier/types.js

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