@sima-land/moleculas 12.1.0 → 12.3.1

package/desktop/components/item-image/item-image.module.scss

@@ -54,7 +54,7 @@
         height: 2px;
         right: 2px;
         background: #9e9e9e;
-        opacity: .32;
+        opacity: 0.32;
         border-radius: 4px;
       }
       &.selected {
@@ -83,7 +83,7 @@
       left: 0;
       right: 0;
       bottom: 0;
-      background-color: rgba(0, 0, 0, .04);
+      background-color: rgba(0, 0, 0, 0.04);
     }
   }
 }
@@ -108,13 +108,13 @@
   left: -5px;
   width: calc(100% + 10px);
   height: calc(100% + 10px);
-  background: rgba(255, 255, 255, .5);
+  background: rgba(255, 255, 255, 0.5);
   z-index: 4;
   display: flex;
   justify-content: center;
   align-items: center;
   @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
-    background: rgba(255, 255, 255, .95);
+    background: rgba(255, 255, 255, 0.95);
   }
 }
 

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

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModifierButton = void 0;
 const react_1 = __importStar(require("react"));
-const isNumber_1 = __importDefault(require("lodash/isNumber"));
+const lodash_1 = require("lodash");
 const modifier_button_module_scss_1 = __importDefault(require("./modifier-button.module.scss"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const constants_1 = require("../../../../common/constants");
@@ -33,14 +33,14 @@ const typesList = Object.values(constants_1.MODIFIERS_TYPES);
 /**
  * Компонент модификатора.
  */
-exports.ModifierButton = 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) {
+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';
-    const hasCount = isNumber_1.default(count) && count >= 0;
+    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 },
         (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') }))))));
+            type === constants_1.MODIFIERS_TYPES.image && react_1.default.createElement("img", { src: image, alt: content, className: cx('image') })))));
 });

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

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModifiersGroup = exports.createHiddenNodeIndexFinder = void 0;
 const react_1 = __importStar(require("react"));
-const debounce_1 = __importDefault(require("lodash/debounce"));
+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"));
@@ -48,13 +48,13 @@ const createHiddenNodeIndexFinder = (container) => (childNode) => {
     return childOffsetTop - container.offsetTop >= container.clientHeight;
 };
 exports.createHiddenNodeIndexFinder = createHiddenNodeIndexFinder;
-const defaultGetItemType = prop_1.default('type');
-const defaultGetItemCount = prop_1.default('count');
-const defaultGetItemColor = prop_1.default('color');
-const defaultGetItemContent = prop_1.default('content');
-const defaultIsSelectedItem = prop_1.default('selected');
-const defaultGetItemImage = prop_1.default('image');
-const defaultGetIsMarkdown = prop_1.default('isMarkdown');
+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');
 /**
  * Возвращает компонент списка модификаторов.
  * @param {Object} props Свойства компонента.
@@ -82,12 +82,12 @@ class ModifiersGroup extends react_1.Component {
             lastVisibleChildIndex: null,
         };
         this.windowWidth = 0;
-        this.containerRef = react_1.createRef();
-        this.showingButtonRef = react_1.createRef();
+        this.containerRef = (0, react_1.createRef)();
+        this.showingButtonRef = (0, react_1.createRef)();
         /**
          * Сбрасывает информацию о видимых и невидимых дочерних узлах контейнера.
          */
-        this.resetVisibleNodesData = debounce_1.default(() => {
+        this.resetVisibleNodesData = (0, lodash_1.debounce)(() => {
             if (document.documentElement.offsetWidth !== this.windowWidth) {
                 this.windowWidth = document.documentElement.offsetWidth;
                 this.setState({
@@ -107,7 +107,7 @@ class ModifiersGroup extends react_1.Component {
                 const showingButtonEl = this.showingButtonRef.current;
                 if (containerEl && showingButtonEl) {
                     const childList = [...containerEl.children];
-                    const firstHiddenNodeIndex = childList.findIndex(exports.createHiddenNodeIndexFinder(containerEl));
+                    const firstHiddenNodeIndex = childList.findIndex((0, exports.createHiddenNodeIndexFinder)(containerEl));
                     if (firstHiddenNodeIndex !== -1) {
                         const lastVisibleElIndex = firstHiddenNodeIndex - 1;
                         const lastVisibleNode = childList[lastVisibleElIndex];
@@ -115,7 +115,7 @@ class ModifiersGroup extends react_1.Component {
                             const rightBound = lastVisibleNode.getBoundingClientRect().right;
                             const rightContainerBound = containerEl.getBoundingClientRect().right;
                             // проверяем, хватает ли кнопке места (с запасом в половину) после последнего видимого дочернего элемента
-                            const isShowingButtonFit = rightContainerBound - rightBound >= (showingButtonEl.clientWidth * 1.5);
+                            const isShowingButtonFit = rightContainerBound - rightBound >= showingButtonEl.clientWidth * 1.5;
                             this.setState({
                                 // если хватает места - ставим кнопку после последнего, иначе - вместо
                                 lastVisibleChildIndex: lastVisibleElIndex + (isShowingButtonFit ? 1 : 0),
@@ -143,7 +143,7 @@ class ModifiersGroup extends react_1.Component {
      */
     componentDidMount() {
         this.windowWidth = document.documentElement.offsetWidth;
-        this.removeGlobalListener = on_1.default(window, 'resize', this.resetVisibleNodesData);
+        this.removeGlobalListener = (0, on_1.default)(window, 'resize', this.resetVisibleNodesData);
         this.checkVisibleNodes();
     }
     /**
@@ -166,10 +166,11 @@ class ModifiersGroup extends react_1.Component {
         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) &&
+                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' }))));
     }
 }

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

@@ -27,9 +27,9 @@ const ModifiersWidget = ({ title, items, sizesTableUrl, onSelectItem, }) => (rea
         " (",
         items.length,
         "\u00A0",
-        get_declination_1.default(items.length, ['вариант', 'варианта', 'вариантов']),
+        (0, get_declination_1.default)(items.length, ['вариант', 'варианта', 'вариантов']),
         "):")),
-    react_1.default.createElement(group_1.ModifiersGroup, { items: items, getItemContent: prop_1.default('name'), getItemCount: prop_1.default('inCartQty'), onSelectItem: (item, selected) => {
+    react_1.default.createElement(group_1.ModifiersGroup, { items: items, getItemContent: (0, prop_1.default)('name'), getItemCount: (0, prop_1.default)('inCartQty'), onSelectItem: (item, selected) => {
             !selected && onSelectItem && onSelectItem(item);
         } }),
     Boolean(sizesTableUrl) && (react_1.default.createElement(link_1.Link, { href: sizesTableUrl, className: cx('modifiers-link') }, "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u0432"))));

package/desktop/components/person-modal/index.d.ts

@@ -1,37 +1,39 @@
 /// <reference types="react" />
 import { ModalProps } from '@sima-land/ui-nucleons/modal';
 export interface PersonModalProps {
+    /** Имя. */
     name: string;
+    /** Должность. */
     appointment: string;
+    /** Ссылка на фото. */
     photoUrl?: string;
+    /** Почта. */
     email?: string;
+    /** Skype. */
     skype?: string;
+    /** Социальные сети. */
     social?: any[];
+    /** Ссылка на рабочий номер телефона. */
     phoneHref?: string;
+    /** Рабочий номер телефона. */
     phoneText?: string;
+    /** Ссылка на сотовый номер телефона. */
     secondPhoneHref?: string;
+    /** Сотовый номер телефона. */
     secondPhoneText?: string;
+    /** Свойства ссылки под именем. */
     arbitraryLinkProps?: any;
+    /** Сработает при нажатии на кнопку "Закрыть". */
     onClose: () => void;
+    /** Нужно ли блокировать прокрутку пока открыто окно. */
     withScrollDisable?: ModalProps['withScrollDisable'];
+    /** Опции блокировки прокрутки. */
     scrollDisableOptions?: ModalProps['scrollDisableOptions'];
 }
 /**
- * Компонент карточки персоны.
+ * Компонент модального окна сотрудника.
  * @param props Свойства.
- * @param props.name Имя.
- * @param props.appointment Должность.
- * @param props.photoUrl  Ссылка на фото.
- * @param props.email Почта.
- * @param props.skype Skype.
- * @param props.social Социальные сети.
- * @param props.phoneHref Ссылка на рабочий номер телефона.
- * @param props.phoneText Рабочий номер телефона.
- * @param props.secondPhoneHref Ссылка на сотовый номер телефона.
- * @param props.secondPhoneText Сотовый номер телефона.
- * @param props.arbitraryLinkProps Свойства ссылки под именем.
- * @param props.onClose Сработает при нажатии на кнопку "Закрыть".
- * @return Компонент.
+ * @return Элемент.
  */
 export declare const PersonModal: ({ name, appointment, photoUrl, email, skype, social, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose, withScrollDisable, scrollDisableOptions, }: PersonModalProps) => JSX.Element;
 export default PersonModal;

package/desktop/components/person-modal/index.js

@@ -16,24 +16,12 @@ const modal_1 = require("@sima-land/ui-nucleons/modal");
 const keydown_1 = require("@sima-land/ui-nucleons/hooks/keydown");
 const cx = bind_1.default.bind(person_modal_module_scss_1.default);
 /**
- * Компонент карточки персоны.
+ * Компонент модального окна сотрудника.
  * @param props Свойства.
- * @param props.name Имя.
- * @param props.appointment Должность.
- * @param props.photoUrl  Ссылка на фото.
- * @param props.email Почта.
- * @param props.skype Skype.
- * @param props.social Социальные сети.
- * @param props.phoneHref Ссылка на рабочий номер телефона.
- * @param props.phoneText Рабочий номер телефона.
- * @param props.secondPhoneHref Ссылка на сотовый номер телефона.
- * @param props.secondPhoneText Сотовый номер телефона.
- * @param props.arbitraryLinkProps Свойства ссылки под именем.
- * @param props.onClose Сработает при нажатии на кнопку "Закрыть".
- * @return Компонент.
+ * @return Элемент.
  */
 const PersonModal = ({ name, appointment, photoUrl, email, skype, social, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose, withScrollDisable, scrollDisableOptions, }) => {
-    keydown_1.useKeydown('Escape', onClose);
+    (0, keydown_1.useKeydown)('Escape', onClose);
     return (react_1.default.createElement(modal_1.Modal, { size: 's', withScrollDisable: withScrollDisable, scrollDisableOptions: scrollDisableOptions, onClose: onClose },
         react_1.default.createElement(modal_1.Modal.Body, null,
             react_1.default.createElement("div", { className: cx('main') },
@@ -50,7 +38,8 @@ const PersonModal = ({ name, appointment, photoUrl, email, skype, social, phoneH
                         'Email: ',
                         react_1.default.createElement(link_1.Link, { color: 'gray87', href: `mailto:${email}`, children: email }))),
                     Array.isArray(social) && social.length > 0 && (react_1.default.createElement("span", { className: cx('contacts-item') },
-                        "\u0421\u043E\u0446. \u0441\u0435\u0442\u0438: ",
+                        "\u0421\u043E\u0446. \u0441\u0435\u0442\u0438:",
+                        ' ',
                         social.map((props, key) => (react_1.default.createElement(link_1.Link, Object.assign({ className: cx('inline'), key: key, color: 'gray87', target: '_blank', rel: 'nofollow' }, props)))))),
                     skype && (react_1.default.createElement("span", { className: cx('contacts-item') },
                         'Skype: ',

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import { ProductInfoProps } from '../../../common/components/product-info';
 export interface ProductCardProps extends ProductInfoProps, React.HTMLAttributes<HTMLDivElement> {
+    /** Будет вызвана при уходе курсора с элемента. */
     onMouseLeave?: () => void;
+    /** Будет вызвана при нажатии на кнопку-иконку быстрого просмотра. */
     onQuickViewClick?: () => void;
 }
 /**
@@ -9,10 +11,11 @@ export interface ProductCardProps extends ProductInfoProps, React.HTMLAttributes
  * @param props Свойства.
  * @return Элемент.
  */
-declare const CartControlSlot: ({ children, stepText, markupText, }: {
-    children: React.ReactNode;
+declare const CartControlSlot: ({ children, stepText, markupText, loading, }: {
+    children?: React.ReactNode;
     stepText?: string | undefined;
     markupText?: string | undefined;
+    loading?: boolean | undefined;
 }) => JSX.Element;
 export interface ProductCardComponent extends React.ForwardRefExoticComponent<React.PropsWithoutRef<ProductCardProps> & React.RefAttributes<HTMLDivElement>> {
     CartControl: typeof CartControlSlot;

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

@@ -50,24 +50,24 @@ const cx = bind_1.default.bind(product_card_module_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-const CartControlSlot = ({ children, stepText, markupText, }) => (react_1.default.createElement("div", { className: cx('control-wrapper') },
-    react_1.default.createElement("div", { className: cx('control') }, children),
-    stepText && (react_1.default.createElement("div", { className: cx('unit-text') }, stepText)),
-    markupText && (react_1.default.createElement("div", { className: cx('bottom-text') }, markupText))));
+const CartControlSlot = ({ children, stepText, markupText, loading, }) => (react_1.default.createElement("div", { className: cx('control-wrapper', { loading }) },
+    react_1.default.createElement("div", { className: cx('control') }, !loading && children),
+    (loading || stepText) && react_1.default.createElement("div", { className: cx('unit-text') }, !loading && stepText),
+    !loading && markupText && react_1.default.createElement("div", { className: cx('bottom-text') }, markupText)));
 /**
  * Карточка товара, появляющаяся над элементом карусели.
  * @param props Свойства компонента.
  * @return Элемент.
  */
-exports.ProductCard = react_1.forwardRef((_a, rootRef) => {
+exports.ProductCard = (0, react_1.forwardRef)((_a, rootRef) => {
     var { data, onLinkClick, onQuickViewClick, children, 
     // div props
     className } = _a, rootProps = __rest(_a, ["data", "onLinkClick", "onQuickViewClick", "children", "className"]);
-    const { cartControl } = define_slots_1.defineSlots(children, { cartControl: CartControlSlot });
+    const { cartControl } = (0, define_slots_1.defineSlots)(children, { cartControl: CartControlSlot });
     return (react_1.default.createElement("div", Object.assign({ ref: rootRef, className: cx('root', shapes_1.SmallRounds.all, shadows_1.BoxShadow.z4, className) }, rootProps),
         react_1.default.createElement(product_info_1.ProductInfo, { data: data, onLinkClick: onLinkClick },
             react_1.default.createElement(product_info_1.ProductInfo.OnImage, null,
-                react_1.default.createElement(with_hint_1.WithHint, { hint: '\u0411\u044B\u0441\u0442\u0440\u044B\u0439 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440', direction: 'left' }, (ref, toggle) => (react_1.default.createElement(quick_view_button_1.QuickViewButton, { ref: ref, onMouseEnter: () => toggle(true), onMouseLeave: () => toggle(false), className: cx('quick-view-button'), onClick: with_prevent_1.default(onQuickViewClick) }))))),
+                react_1.default.createElement(with_hint_1.WithHint, { hint: '\u0411\u044B\u0441\u0442\u0440\u044B\u0439 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440', direction: 'left' }, (ref, toggle) => (react_1.default.createElement(quick_view_button_1.QuickViewButton, { ref: ref, onMouseEnter: () => toggle(true), onMouseLeave: () => toggle(false), className: cx('quick-view-button'), onClick: (0, with_prevent_1.default)(onQuickViewClick) }))))),
         cartControl));
 });
 exports.ProductCard.CartControl = CartControlSlot;

package/desktop/components/product-card/product-card.module.scss

@@ -16,6 +16,20 @@
   display: flex;
   flex-wrap: wrap;
   margin-top: 16px;
+  &.loading {
+    .control {
+      background: colors.$gray4;
+      border-radius: 4px;
+    }
+    .unit-text::before {
+      content: '';
+      display: block;
+      background: colors.$gray4;
+      border-radius: 4px;
+      width: 48px;
+      height: 16px;
+    }
+  }
 }
 
 .control {

package/desktop/components/product-carousel/hover-card.js

@@ -37,13 +37,13 @@ const cx = bind_1.default.bind(hover_card_module_scss_1.default);
  * @return Элемент.
  */
 const HoverCard = ({ data, targetRef, onMouseLeave, onQuickViewClick, onLinkClick, renderCartControl, }) => {
-    const rootRef = react_1.useRef(null);
-    const [ready, setReady] = react_1.useState(false);
-    react_1.useLayoutEffect(() => {
+    const rootRef = (0, react_1.useRef)(null);
+    const [ready, setReady] = (0, react_1.useState)(false);
+    (0, react_1.useLayoutEffect)(() => {
         if (targetRef.current && rootRef.current) {
             const element = rootRef.current;
             const rect = targetRef.current.getBoundingClientRect();
-            const correction = utils_1.getOriginCorrection(rootRef.current);
+            const correction = (0, utils_1.getOriginCorrection)(rootRef.current);
             element.style.left = `${correction.x + rect.left - 16}px`;
             element.style.top = `${correction.y + rect.top - 16}px`;
             element.style.width = `${rect.width + 32}px`;

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

@@ -9,11 +9,17 @@ interface ItemSize {
     xl?: 2 | 3 | 4;
 }
 export interface ProductCarouselProps {
+    /** CSS-класс для корневого элемента. */
     className?: string;
+    /** Элементы карусели. */
     children?: React.ReactNode;
+    /** Найстройки размера элемента карусели. */
     itemSize?: ItemSize;
+    /** Сработает при попадании карусели во viewport. */
     onInViewport?: () => void;
+    /** Сработает при попадании карусели в область достаточно близкую к viewport'у. */
     onNeedRequest?: () => void;
+    /** Нужно ли показывать всплывающую карточку при наведении на элемент карусели. */
     withHoverCard?: boolean;
 }
 declare type CarouselItemProps = ProductInfoProps & Pick<HoverCardProps, 'renderCartControl' | 'onQuickViewClick'>;

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

@@ -51,50 +51,51 @@ const Item = () => null;
  * @return Элемент.
  */
 const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) => {
-    const [activeItemIndex, setActiveItemIndex] = react_1.useState(null);
-    const cardShow = utils_1.useAllowFlag();
-    const needBigArrows = media_1.useMedia('(min-width: 1600px)');
-    const sectionRef = react_1.useRef(null);
-    const stubRef = react_1.useRef(null);
-    const targetItemRef = react_1.useRef(null);
+    const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
+    const cardShow = (0, utils_1.useAllowFlag)();
+    const needBigArrows = (0, media_1.useMedia)('(min-width: 1600px)');
+    const sectionRef = (0, react_1.useRef)(null);
+    const stubRef = (0, react_1.useRef)(null);
+    const targetItemRef = (0, react_1.useRef)(null);
     const items = react_1.Children.toArray(children).reduce((acc, item) => {
-        react_1.isValidElement(item) && item.type === Item && acc.push(item.props);
+        (0, react_1.isValidElement)(item) && item.type === Item && acc.push(item.props);
         return acc;
     }, []);
     // вычисляем ширину элемента карусели для позиционирования стрелок
-    const itemWidth = utils_1.useChildWidth(sectionRef, `.${cx('item')}`, []);
+    const itemWidth = (0, utils_1.useChildWidth)(sectionRef, `.${cx('item')}`, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    utils_1.useViewport(stubRef, onNeedRequest, {
+    (0, utils_1.useViewport)(stubRef, onNeedRequest, {
         rootMargin: '200px 0px 200px 0px',
     });
     // отправляем статистку, когда компонент попадает в зону видимости
-    utils_1.useViewport(sectionRef, onInViewport);
-    return Array.isArray(items) && items.length > 0
-        ? (react_1.default.createElement("div", { ref: sectionRef, className: cx('root', className) },
-            react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
-                // докидываем индекс чтобы позже брать актуальные данные из списка по нему
-                items: items.map((item, index) => [item, index]) }, (itemWidth !== null && {
-                withControls: true,
-                controlProps: {
-                    size: needBigArrows ? 'l' : 's',
-                    style: {
-                        zIndex: 1,
-                        top: `${itemWidth / 2}px`,
-                    },
+    (0, utils_1.useViewport)(sectionRef, onInViewport);
+    return Array.isArray(items) && items.length > 0 ? (react_1.default.createElement("div", { ref: sectionRef, className: cx('root', className) },
+        react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
+            // докидываем индекс чтобы позже брать актуальные данные из списка по нему
+            items: items.map((item, index) => [item, index]) }, (itemWidth !== null && {
+            withControls: true,
+            controlProps: {
+                size: needBigArrows ? 'l' : 's',
+                style: {
+                    zIndex: 1,
+                    top: `${itemWidth / 2}px`,
                 },
-            }), { renderItem: ([item, index]) => (react_1.default.createElement("div", { "data-testid": 'product-carousel:item', className: cx('item', getSizeClasses(itemSize)), onMouseEnter: e => {
-                        if (cardShow.allowed()) {
-                            targetItemRef.current = e.currentTarget;
-                            setActiveItemIndex(index);
-                        }
-                    } },
-                    react_1.default.createElement(product_info_1.ProductInfo, { data: item.data, onLinkClick: item.onLinkClick }))), 
-                // длительность прокрутки в Carousel - 320, делаем слегка с запасом
-                // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
-                onChangeTargetIndex: () => cardShow.disallowFor(360) })),
-            withHoverCard && activeItemIndex !== null && (react_1.default.createElement(hover_card_1.HoverCard, { targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null), 
+            },
+        }), { renderItem: ([item, index]) => (react_1.default.createElement("div", { "data-testid": 'product-carousel:item', className: cx('item', getSizeClasses(itemSize)), onMouseEnter: e => {
+                    if (cardShow.allowed()) {
+                        targetItemRef.current = e.currentTarget;
+                        setActiveItemIndex(index);
+                    }
+                } },
+                react_1.default.createElement(product_info_1.ProductInfo, { data: item.data, onLinkClick: item.onLinkClick }))), 
+            // длительность прокрутки в Carousel - 320, делаем слегка с запасом
+            // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
+            onChangeTargetIndex: () => cardShow.disallowFor(360) })),
+        withHoverCard &&
+            activeItemIndex !== null &&
+            [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, { key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null), 
                 // данные элемента карусели
-                data: items[activeItemIndex].data, onLinkClick: items[activeItemIndex].onLinkClick, onQuickViewClick: items[activeItemIndex].onQuickViewClick, renderCartControl: items[activeItemIndex].renderCartControl })))) : (react_1.default.createElement("div", { ref: stubRef }));
+                data: item.data, onLinkClick: item.onLinkClick, onQuickViewClick: item.onQuickViewClick, renderCartControl: item.renderCartControl }))))) : (react_1.default.createElement("div", { ref: stubRef }));
 };
 exports.ProductCarousel = ProductCarousel;
 exports.ProductCarousel.Item = Item;

package/desktop/components/product-carousel/product-carousel.module.scss

@@ -4,7 +4,7 @@
 $breakpoints: 'xs', 's', 'm', 'l', 'xl';
 $gutter: 32px;
 
-@mixin sizes ($key) {
+@mixin sizes($key) {
   // в соответствии с гайдами ширина может быть 2/3/4
   @for $i from 2 through 4 {
     .size-#{$key}-#{$i} {

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

@@ -13,7 +13,7 @@ const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
  * @param options Опции IntersectionObserver.
  */
 const useViewport = (ref, callback, options) => {
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const element = ref.current;
         if (element) {
             const observer = new IntersectionObserver(entries => {
@@ -33,15 +33,15 @@ exports.useViewport = useViewport;
  * @return Объект работы с флагом.
  */
 const useAllowFlag = () => {
-    const ref = react_1.useRef(true);
-    const timerIdRef = react_1.useRef();
-    const allowed = react_1.useCallback(() => ref.current, []);
-    const disallowFor = react_1.useCallback(timeout => {
+    const ref = (0, react_1.useRef)(true);
+    const timerIdRef = (0, react_1.useRef)();
+    const allowed = (0, react_1.useCallback)(() => ref.current, []);
+    const disallowFor = (0, react_1.useCallback)(timeout => {
         window.clearTimeout(timerIdRef.current);
         ref.current = false;
-        timerIdRef.current = window.setTimeout(() => ref.current = true, timeout);
+        timerIdRef.current = window.setTimeout(() => (ref.current = true), timeout);
     }, []);
-    const controlRef = react_1.useRef({ allowed, disallowFor });
+    const controlRef = (0, react_1.useRef)({ allowed, disallowFor });
     return controlRef.current;
 };
 exports.useAllowFlag = useAllowFlag;
@@ -53,16 +53,16 @@ exports.useAllowFlag = useAllowFlag;
  * @return Ширина.
  */
 const useChildWidth = (ref, selector, deps) => {
-    const [itemWidth, setItemWidth] = react_1.useState(null);
-    const update = react_1.useCallback(() => {
+    const [itemWidth, setItemWidth] = (0, react_1.useState)(null);
+    const update = (0, react_1.useCallback)(() => {
         if (ref.current) {
             const child = ref.current.querySelector(selector);
             child && setItemWidth(child.clientWidth);
         }
     }, [ref]);
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         ref.current && update();
-        return on_1.default(window, 'resize', update);
+        return (0, on_1.default)(window, 'resize', update);
     }, deps);
     return itemWidth;
 };

package/desktop/components/promotion-card/banner-title.js

@@ -16,12 +16,12 @@ const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
             break;
         case 'special':
             if (dueDate) {
-                content = (react_1.default.createElement(exports.CustomTimer, { dueDate: dueDate }));
+                content = react_1.default.createElement(exports.CustomTimer, { dueDate: dueDate });
             }
             break;
         case 'volume-discount':
             if (volumeDiscount) {
-                content = (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.discount },
+                content = (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.discount, "data-testid": 'promotion-card:banner-discount' },
                     "\u0441\u043A\u0438\u0434\u043A\u0438 \u0434\u043E",
                     react_1.default.createElement("div", { className: banner_title_module_scss_1.default.percent },
                         volumeDiscount,
@@ -29,17 +29,17 @@ const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
             }
             break;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null, content));
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.BannerTitle = BannerTitle;
-const CustomTimer = ({ dueDate }) => (react_1.default.createElement(timer_1.Timer, { date: date_fns_1.formatISO(dueDate), timeout: 1000 * 60, format: ({ days, hours, minutes }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.timer },
+const CustomTimer = ({ dueDate }) => (react_1.default.createElement(timer_1.Timer, { date: (0, date_fns_1.formatISO)(dueDate), timeout: 1000 * 60, format: ({ days, hours, minutes }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.timer, "data-testid": 'promotion-card:banner-timer' },
         react_1.default.createElement(TimerPart, { label: '\u0434\u043D\u0435\u0439', value: Math.min(99, days) }),
-        react_1.default.createElement(Divider, null),
+        react_1.default.createElement(TimerDivider, null),
         react_1.default.createElement(TimerPart, { label: '\u0447\u0430\u0441\u043E\u0432', value: hours % 24 }),
-        react_1.default.createElement(Divider, null),
+        react_1.default.createElement(TimerDivider, null),
         react_1.default.createElement(TimerPart, { label: '\u043C\u0438\u043D\u0443\u0442', value: minutes % 60 }))) }));
 exports.CustomTimer = CustomTimer;
 const TimerPart = ({ label, value }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.part },
     react_1.default.createElement("div", null, `${value}`.padStart(2, '0')),
     react_1.default.createElement("div", { className: banner_title_module_scss_1.default.label }, label)));
-const Divider = () => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.divider }, ":"));
+const TimerDivider = () => react_1.default.createElement("div", { className: banner_title_module_scss_1.default.divider }, ":");

package/desktop/components/promotion-card/estimate.js

@@ -24,15 +24,13 @@ const toTimePart = (n) => `${n}`.padStart(2, '0');
 const Estimate = ({ dueDate }) => {
     const now = new Date();
     let content = null;
-    if (date_fns_1.getYear(dueDate) !== date_fns_1.getYear(now)) {
-        const text = [date_fns_1.getDate, date_fns_1.getMonth, date_fns_1.getYear]
-            .map(fn => toTimePart(fn(dueDate)))
-            .join('.');
+    if ((0, date_fns_1.getYear)(dueDate) !== (0, date_fns_1.getYear)(now)) {
+        const text = [date_fns_1.getDate, date_fns_1.getMonth, date_fns_1.getYear].map(fn => toTimePart(fn(dueDate))).join('.');
         content = `До ${text}`;
     }
     else {
-        content = `До ${date_fns_1.getDate(dueDate)} ${MONTH_SHORT_NAME[date_fns_1.getMonth(dueDate)]}`;
+        content = `До ${(0, date_fns_1.getDate)(dueDate)} ${MONTH_SHORT_NAME[(0, date_fns_1.getMonth)(dueDate)]}`;
     }
-    return (react_1.default.createElement(react_1.default.Fragment, null, content));
+    return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.Estimate = Estimate;

package/desktop/components/promotion-card/index.d.ts

@@ -1,14 +1,24 @@
 import React from 'react';
 import { PromotionType } from './types';
 export interface PromotionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Ссылка, переход по которой будет произведён при нажатии на карточку. */
     href?: string;
+    /** Заголовок, выводится под баннером. */
     title: string;
+    /** Подзаголовок. */
     subtitle?: string;
+    /** Дополнительный текст, выводится в правом нижнем углу.  */
     postfix?: string;
+    /** Путь к изображению для баннера. */
     imageSrc: string;
+    /** Дата окончания акции. */
     dueDate: Date;
+    /** Тип акции. */
     promotionType?: PromotionType;
+    /** Скидка за объем, указывается при соответствующем типе акции. */
     volumeDiscount?: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
 }
 /**
  * Карточка акции.
@@ -16,6 +26,6 @@ export interface PromotionCardProps extends React.HTMLAttributes<HTMLDivElement>
  * @return Элемент.
  */
 export declare const PromotionCard: {
-    ({ promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix, className, ...restProps }: PromotionCardProps): JSX.Element;
+    ({ promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix, className, "data-testid": testId, ...restProps }: PromotionCardProps): JSX.Element;
     Placeholder: (props: React.HTMLAttributes<HTMLDivElement>) => JSX.Element;
 };