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

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,117 +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 ImageBroken_1 = __importDefault(require("@sima-land/ui-quarks/icons/40x40/Stroked/ImageBroken"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const modifiers_module_scss_1 = __importDefault(require("./modifiers.module.scss"));
-const hooks_1 = require("../../hooks");
-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(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: 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;
-/**
- * Картинка с заглушкой в случае ошибки загрузки.
- * @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;
-}
+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/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 });

package/common/components/product-info/types.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import type { ReactNode } from 'react';
 export interface ProductInfoProps {
     /** Ограничение товара. Влияет на отображение информации. */
     restriction?: 'adult' | 'unavailable';
     /** Содержимое. */
-    children?: React.ReactNode;
+    children?: ReactNode;
 }

package/common/hooks/index.d.ts

@@ -4,6 +4,7 @@ import { ReactEventHandler } from 'react';
  * @param src Ссылка на картинку.
  * @param onError Обработчик ошибки.
  * @return Управление состоянием.
+ * @todo Переименовать в useImageError?
  */
 export declare function useImageStub(src?: string, onError?: ReactEventHandler<HTMLImageElement>): {
     failed: boolean;

package/common/hooks/index.js

@@ -8,6 +8,7 @@ const react_1 = require("react");
  * @param src Ссылка на картинку.
  * @param onError Обработчик ошибки.
  * @return Управление состоянием.
+ * @todo Переименовать в useImageError?
  */
 function useImageStub(src, onError) {
     const [failed, setFailed] = (0, react_1.useState)(false);

package/desktop/components/product-carousel/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
+import { ReactElement, ReactNode, CSSProperties } from 'react';
+import { ProductInfoProps } from '../../../common/components/product-info';
 interface ItemSize {
     xs?: 2 | 3 | 4;
     s?: 2 | 3 | 4;
@@ -7,25 +7,30 @@ interface ItemSize {
     l?: 2 | 3 | 4;
     xl?: 2 | 3 | 4;
 }
-export type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
+export type ItemElement = ReactElement<ProductInfoProps>;
 export interface ProductCarouselProps {
     /** CSS-класс для корневого элемента. */
     className?: string;
     /** Элементы карусели. */
-    children?: ItemElement | ItemElement[];
+    children?: ReactNode;
     /** Настройки размера элемента карусели. */
-    itemSize?: ItemSize;
+    itemSize?: ItemSize | 'unset';
     /** Сработает при попадании карусели во viewport. */
     onInViewport?: () => void;
     /** Сработает при попадании карусели в область достаточно близкую к viewport'у. */
     onNeedRequest?: () => void;
     /** Нужно ли показывать всплывающую карточку при наведении на элемент карусели. */
     withHoverCard?: boolean;
+    /** Предоставит свойства для элемента карусели. */
+    itemProps?: {
+        style?: CSSProperties;
+        className?: string;
+    };
 }
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
+export declare function ProductCarousel({ className, itemSize, itemProps, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
 export {};

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

@@ -39,32 +39,33 @@ const product_carousel_module_scss_1 = __importDefault(require("./product-carous
 const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
 const cx = bind_1.default.bind(product_carousel_module_scss_1.default);
 // eslint-disable-next-line require-jsdoc
-const getSizeClasses = (size = {}) => [
-    `size-xs-${size.xs || 4}`,
-    `size-s-${size.s || 3}`,
-    `size-m-${size.m || 2}`,
-    `size-l-${size.l || 2}`,
-    `size-xl-${size.xl || 2}`,
-];
+const getSizeClasses = (size) => size && size !== 'unset'
+    ? [
+        `size-xs-${size.xs || 4}`,
+        `size-s-${size.s || 3}`,
+        `size-m-${size.m || 2}`,
+        `size-l-${size.l || 2}`,
+        `size-xl-${size.xl || 2}`,
+    ]
+    : [];
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
-function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) {
+function ProductCarousel({ className, itemSize = { xs: 4, s: 3, m: 2, l: 2, xl: 2 }, itemProps, onInViewport, onNeedRequest, withHoverCard, children, }) {
     const layer = (0, layer_1.useLayer)();
     const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
     const cardShow = (0, utils_1.useAllowFlag)();
     const needBigArrows = (0, media_1.useMedia)('(min-width: 1600px)');
     const rootRef = (0, react_1.useRef)(null);
     const targetItemRef = (0, react_1.useRef)(null);
-    let items;
-    if (Array.isArray(children)) {
-        items = children;
-    }
-    else {
-        items = children ? [children] : [];
-    }
+    const items = react_1.Children.toArray(children).reduce((acc, item) => {
+        if ((0, react_1.isValidElement)(item) && item.type === product_info_1.ProductInfo) {
+            acc.push(item);
+        }
+        return acc;
+    }, []);
     // вычисляем ширину элемента карусели для позиционирования стрелок
     const firstItemRef = (0, react_1.useRef)(null);
     const itemWidth = (0, utils_1.useClientWidth)(firstItemRef, [items.length]);
@@ -89,7 +90,7 @@ function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, wit
                     top: `${itemWidth / 2}px`,
                 },
             },
-        }), { renderItem: ([item, index], realIndex) => (react_1.default.createElement(ProductCarouselItem, { rootRef: realIndex === 0 ? firstItemRef : undefined, withHoverCard: withHoverCard, className: cx(getSizeClasses(itemSize)), onMouseEnter: e => {
+        }), { renderItem: ([item, index], realIndex) => (react_1.default.createElement(Item, { rootRef: realIndex === 0 ? firstItemRef : undefined, withHoverCard: withHoverCard, className: cx(getSizeClasses(itemSize), itemProps === null || itemProps === void 0 ? void 0 : itemProps.className), style: itemProps === null || itemProps === void 0 ? void 0 : itemProps.style, onMouseEnter: e => {
                     if (cardShow.allowed()) {
                         targetItemRef.current = e.currentTarget;
                         setActiveItemIndex(index);
@@ -109,8 +110,8 @@ exports.ProductCarousel = ProductCarousel;
  * Полное содержимое будет выведено во всплывающей карточке.
  * @inheritdoc
  */
-function ProductCarouselItem({ rootRef, className, onMouseEnter, withHoverCard, children, }) {
-    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-carousel:item', className: cx('item', className), onMouseEnter: onMouseEnter }, (0, react_1.cloneElement)(children, {
+function Item({ rootRef, className, onMouseEnter, withHoverCard, children, style, }) {
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-carousel:item', className: cx('item', className), onMouseEnter: onMouseEnter, style: style }, (0, react_1.cloneElement)(children, {
         children: react_1.Children.toArray(children.props.children).reduce((list, child) => {
             if ((0, react_1.isValidElement)(child)) {
                 switch (child.type) {

package/mobile/components/select-screen/index.d.ts

@@ -1,7 +1,7 @@
-import React from 'react';
+import { ButtonHTMLAttributes } from 'react';
 import { LayoutProps } from '@sima-land/ui-nucleons/layout';
 export type OptionSize = 's' | 'm' | 'l' | 'xl';
-export interface SelectScreenOptionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface SelectScreenOptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: OptionSize;
     selected?: boolean;
     withSelectedIcon?: boolean;
@@ -11,10 +11,10 @@ export interface SelectScreenOptionProps extends React.ButtonHTMLAttributes<HTML
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SelectScreenLayout: ({ children, ...props }: LayoutProps) => JSX.Element;
+export declare function SelectScreenLayout({ children, ...props }: LayoutProps): JSX.Element;
 /**
  * Опция.
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const SelectScreenOption: ({ children, className, selected, withSelectedIcon, size, ...props }: SelectScreenOptionProps) => JSX.Element;
+export declare function SelectScreenOption({ children, className, selected, withSelectedIcon, size, ...props }: SelectScreenOptionProps): JSX.Element;

package/mobile/components/select-screen/index.js

@@ -48,21 +48,21 @@ const select_screen_module_scss_1 = __importDefault(require("./select-screen.mod
  * @param props Свойства.
  * @return Элемент.
  */
-const SelectScreenLayout = (_a) => {
+function SelectScreenLayout(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return (react_1.default.createElement(layout_1.MobileLayout, Object.assign({}, props, { disabledOn: ['mxs', 'ms'] }),
-        react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === exports.SelectScreenOption))));
-};
+        react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === SelectScreenOption))));
+}
 exports.SelectScreenLayout = SelectScreenLayout;
 /**
  * Опция.
  * @param props Свойства.
  * @return Элемент.
  */
-const SelectScreenOption = (_a) => {
+function SelectScreenOption(_a) {
     var { children, className, selected, withSelectedIcon = selected, size = 'm' } = _a, props = __rest(_a, ["children", "className", "selected", "withSelectedIcon", "size"]);
     return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className, select_screen_module_scss_1.default[`size-${size}`]), "data-testid": 'select-screen:option' }),
         children,
         selected && withSelectedIcon && react_1.default.createElement(Check_1.default, { role: 'presentation', className: select_screen_module_scss_1.default.icon })));
-};
+}
 exports.SelectScreenOption = SelectScreenOption;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "16.0.0-alpha.6",
+  "version": "16.0.0-alpha.7",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",