@sima-land/moleculas 12.3.0 → 12.3.1

package/common/components/product-info/index.js

@@ -26,7 +26,7 @@ exports.OnImage = OnImage;
  * @return Элемент.
  */
 const ProductInfo = ({ data, onLinkClick, children }) => {
-    const { onImage } = define_slots_1.defineSlots(children, {
+    const { onImage } = (0, define_slots_1.defineSlots)(children, {
         onImage: exports.OnImage,
     });
     return (react_1.default.createElement(react_1.default.Fragment, null,

package/common/components/quick-view-button/index.js

@@ -44,7 +44,7 @@ const cx = bind_1.default.bind(quick_view_button_module_scss_1.default);
  * @param props Свойства компонента.
  * @return Элемент.
  */
-exports.QuickViewButton = react_1.forwardRef((_a, ref) => {
+exports.QuickViewButton = (0, react_1.forwardRef)((_a, ref) => {
     var { onClick, className } = _a, restProps = __rest(_a, ["onClick", "className"]);
     return (react_1.default.createElement(quick_view_svg_1.default, Object.assign({}, restProps, { ref: ref, role: 'button', "aria-label": '\u0411\u044B\u0441\u0442\u0440\u044B\u0439 \u043F\u0440\u043E\u0441\u043C\u043E\u0442\u0440', className: cx('root', className), width: 24, height: 24, onClick: onClick, "data-testid": 'quick-view-button' })));
 });

package/common/components/wish-button/index.js

@@ -49,7 +49,7 @@ const cx = bind_1.default.bind(wish_button_module_scss_1.default);
  * @param props.disabled Признак загрузки добавления товара в список избранного.
  * @return Элемент.
  */
-exports.WishButton = react_1.forwardRef((_a, ref) => {
+exports.WishButton = (0, react_1.forwardRef)((_a, ref) => {
     var { checked, className, onClick, disabled } = _a, restProps = __rest(_a, ["checked", "className", "onClick", "disabled"]);
     const Icon = checked ? filled_heart_svg_1.default : heart_svg_1.default;
     return (react_1.default.createElement(Icon, Object.assign({}, restProps, { ref: ref, role: 'button', "aria-label": checked ? 'Убрать из избранного' : 'Добавить в избранное', className: cx('button', className, { checked, disabled }), onClick: disabled ? undefined : onClick, "data-testid": 'favorite-button', width: 24, height: 24 })));

package/desktop/components/breadcrumbs/index.js

@@ -47,12 +47,12 @@ exports.Breadcrumbs = Breadcrumbs;
  */
 const Breadcrumb = ({ data, onSiblingsPopupOpen, isSiblingActive, }) => {
     var _a;
-    const popupRef = react_1.useRef(null);
-    const [withPopup, togglePopup] = react_1.useState(false);
+    const popupRef = (0, react_1.useRef)(null);
+    const [withPopup, togglePopup] = (0, react_1.useState)(false);
     // с useOutsideClick не работает после обновления React до 17 версии, пока так
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (withPopup) {
-            return on_1.default(window, 'mousedown', togglePopup.bind(null, false));
+            return (0, on_1.default)(window, 'mousedown', togglePopup.bind(null, false));
         }
     }, [withPopup]);
     const selfName = (react_1.default.createElement(link_1.Link, { color: 'gray87', href: data.url }, data.name));
@@ -74,6 +74,6 @@ const Breadcrumb = ({ data, onSiblingsPopupOpen, isSiblingActive, }) => {
                         selfName,
                         react_1.default.createElement(square_arrow_down_svg_1.default, { "data-testid": 'breadcrumb:siblings-closer', className: cx('toggle-icon', 'close'), onClick: () => togglePopup(false) })),
                     react_1.default.createElement("ul", { className: cx('siblings') },
-                        data.siblings.state === 'fetching' && (react_1.default.createElement(react_1.default.Fragment, null, lodash_1.times(8).map(index => (react_1.default.createElement("div", { key: index, className: cx('sibling-placeholder') }))))),
+                        data.siblings.state === 'fetching' && (react_1.default.createElement(react_1.default.Fragment, null, (0, lodash_1.times)(8).map(index => (react_1.default.createElement("div", { key: index, className: cx('sibling-placeholder') }))))),
                         data.siblings.state === 'ready' && (react_1.default.createElement(react_1.default.Fragment, null, (_a = data.siblings.data) === null || _a === void 0 ? void 0 : _a.map((sibling, index) => (react_1.default.createElement("li", { key: index, className: cx('sibling'), "data-testid": 'breadcrumb-sibling' }, isSiblingActive(sibling) ? (react_1.default.createElement("span", { className: cx('active') }, sibling.name)) : (react_1.default.createElement(link_1.Link, { color: 'gray87', className: cx('link'), href: sibling.url, children: sibling.name }))))))))))))));
 };

package/desktop/components/gallery-modal/components/all-round-view.js

@@ -36,16 +36,16 @@ const turn_left_svg_1 = __importDefault(require("../icons/turn-left.svg"));
 const turn_right_svg_1 = __importDefault(require("../icons/turn-right.svg"));
 const cx = bind_1.default.bind(all_round_view_module_scss_1.default);
 const AllRoundView = ({ photos }) => {
-    const imageRef = react_1.useRef(null);
-    const dragStartRef = react_1.useRef(null);
-    const [state, setState] = react_1.useState('autoplay');
+    const imageRef = (0, react_1.useRef)(null);
+    const dragStartRef = (0, react_1.useRef)(null);
+    const [state, setState] = (0, react_1.useState)('autoplay');
     const autoplay = state === 'autoplay';
     const ChangeState = (bindState) => () => setState(bindState);
-    const [index, setIndex] = react_1.useState(0);
-    const indexRef = identity_1.useIdentityRef(index);
-    const photosReady = utils_1.useImagesLoad(photos);
+    const [index, setIndex] = (0, react_1.useState)(0);
+    const indexRef = (0, identity_1.useIdentityRef)(index);
+    const photosReady = (0, utils_1.useImagesLoad)(photos);
     // запуск/остановка вращения
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (state !== 'default' && photosReady) {
             const timerId = window.setInterval(() => {
                 const increment = state === 'turn-left' ? -1 : 1;
@@ -55,14 +55,14 @@ const AllRoundView = ({ photos }) => {
         }
     }, [state, photosReady]);
     // перетаскивание
-    react_1.useEffect(() => {
+    (0, react_1.useEffect)(() => {
         // переданное число всегда замениться на такое, которое будет в промежутке от 0 до количества фото
         const wrap = (value) => (photos.length + value) % photos.length;
         const image = imageRef.current;
         const imageWidth = image.clientWidth;
         const imageLeft = image.getBoundingClientRect().left;
         const offList = [
-            on_1.default(image, 'pointerdown', e => {
+            (0, on_1.default)(image, 'pointerdown', e => {
                 e.preventDefault();
                 setState('default');
                 image.style.touchAction = 'none';
@@ -71,7 +71,7 @@ const AllRoundView = ({ photos }) => {
                     index: indexRef.current,
                 };
             }),
-            on_1.default(window, 'pointermove', e => {
+            (0, on_1.default)(window, 'pointermove', e => {
                 if (dragStartRef.current !== null) {
                     const startX = dragStartRef.current.position;
                     const currentX = e.clientX - imageLeft;
@@ -81,7 +81,7 @@ const AllRoundView = ({ photos }) => {
                     setIndex(nextIndex);
                 }
             }),
-            on_1.default(window, 'pointerup', () => {
+            (0, on_1.default)(window, 'pointerup', () => {
                 dragStartRef.current = null;
                 image.style.touchAction = '';
             }),

package/desktop/components/gallery-modal/components/gallery-modal.js

@@ -49,23 +49,23 @@ const bind_1 = __importDefault(require("classnames/bind"));
 const gallery_modal_module_scss_1 = __importDefault(require("./gallery-modal.module.scss"));
 const cx = bind_1.default.bind(gallery_modal_module_scss_1.default);
 const GalleryModal = ({ media, defaultMediaIndex = 0, review, onClose, onGoToReview, onMediaChange, withScrollDisable, scrollDisableOptions, onVideoEvent, }) => {
-    const [currentIndex, setCurrent] = react_1.useState(defaultMediaIndex);
-    const thumbnailsRef = react_1.useRef(null);
-    const areaRef = react_1.useRef(null);
+    const [currentIndex, setCurrent] = (0, react_1.useState)(defaultMediaIndex);
+    const thumbnailsRef = (0, react_1.useRef)(null);
+    const areaRef = (0, react_1.useRef)(null);
     const footerGutter = 40;
     const footerHeight = 20;
     const correction = review ? footerGutter + footerHeight : 0;
-    const size = utils_1.useRectFit(areaRef, { correction });
+    const size = (0, utils_1.useRectFit)(areaRef, { correction });
     const innerStyles = Object.assign({}, (size !== null && {
         '--area-height': `${size + correction}px`,
         '--all-round-view-size': `${size}px`,
     }));
-    const handlerRef = identity_1.useIdentityRef(onMediaChange);
-    react_1.useEffect(() => {
+    const handlerRef = (0, identity_1.useIdentityRef)(onMediaChange);
+    (0, react_1.useEffect)(() => {
         var _a;
         (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef, media[currentIndex], currentIndex);
         thumbnailsRef.current &&
-            scroll_to_child_1.scrollToChild(thumbnailsRef.current, thumbnailsRef.current.children[currentIndex]);
+            (0, scroll_to_child_1.scrollToChild)(thumbnailsRef.current, thumbnailsRef.current.children[currentIndex]);
     }, [currentIndex]);
     return (react_1.default.createElement(modal_1.Modal, Object.assign({ size: 'fullscreen', onClose: onClose }, { withScrollDisable, scrollDisableOptions }),
         react_1.default.createElement(modal_1.Modal.Header, { onClose: onClose }),

package/desktop/components/gallery-modal/components/image-overlay.js

@@ -20,6 +20,6 @@ const classnames_1 = __importDefault(require("classnames"));
 const image_overlay_module_scss_1 = __importDefault(require("./image-overlay.module.scss"));
 const ImageOverlay = (_a) => {
     var { className, children } = _a, restProps = __rest(_a, ["className", "children"]);
-    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default(image_overlay_module_scss_1.default.root, className) }, restProps), children));
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(image_overlay_module_scss_1.default.root, className) }, restProps), children));
 };
 exports.ImageOverlay = ImageOverlay;

package/desktop/components/gallery-modal/components/review-info.js

@@ -9,7 +9,7 @@ const link_1 = require("@sima-land/ui-nucleons/link");
 const rating_1 = require("@sima-land/ui-nucleons/rating");
 const classnames_1 = __importDefault(require("classnames"));
 const review_info_module_scss_1 = __importDefault(require("./review-info.module.scss"));
-const ReviewInfo = ({ rating, author, onGoToReview, className }) => (react_1.default.createElement("div", { className: classnames_1.default(review_info_module_scss_1.default.root, className) },
+const ReviewInfo = ({ rating, author, onGoToReview, className }) => (react_1.default.createElement("div", { className: (0, classnames_1.default)(review_info_module_scss_1.default.root, className) },
     react_1.default.createElement(rating_1.Rating, { value: rating }),
     react_1.default.createElement("div", { className: review_info_module_scss_1.default.author }, author),
     onGoToReview && (react_1.default.createElement(link_1.Link, { className: review_info_module_scss_1.default.link, pseudo: true, onClick: onGoToReview, "data-testid": 'gallery-modal:go-to-review-link' }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043E\u0442\u0437\u044B\u0432\u0443"))));

package/desktop/components/gallery-modal/utils.js

@@ -12,8 +12,8 @@ const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
  * @return Загружены ли все фото.
  */
 const useImagesLoad = (srcList) => {
-    const [loadedCount, setLoadedCount] = react_1.useState(0);
-    react_1.useEffect(() => {
+    const [loadedCount, setLoadedCount] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
         srcList.forEach(src => {
             const image = new Image();
             image.onload = () => setLoadedCount(c => c + 1);
@@ -31,8 +31,8 @@ exports.useImagesLoad = useImagesLoad;
  * @return Размер или null.
  */
 const useRectFit = (areaRef, { correction }) => {
-    const [size, setSize] = react_1.useState(null);
-    react_1.useEffect(() => {
+    const [size, setSize] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
         const calcSquareSize = () => {
             if (areaRef.current) {
                 const availWidth = areaRef.current.clientWidth;
@@ -46,7 +46,7 @@ const useRectFit = (areaRef, { correction }) => {
             }
         };
         calcSquareSize();
-        return on_1.default(window, 'resize', () => window.requestAnimationFrame(calcSquareSize));
+        return (0, on_1.default)(window, 'resize', () => window.requestAnimationFrame(calcSquareSize));
     }, [areaRef]);
     return size;
 };

package/desktop/components/item-image/index.js

@@ -88,8 +88,8 @@ class ItemImage extends react_1.Component {
         this.state = {
             currentPhotoIndex: null,
         };
-        this.image = react_1.createRef();
-        this.imageWrapper = react_1.createRef();
+        this.image = (0, react_1.createRef)();
+        this.imageWrapper = (0, react_1.createRef)();
         this.bootStartTime = Date.now();
     }
     /**
@@ -98,7 +98,7 @@ class ItemImage extends react_1.Component {
     componentDidMount() {
         const img = this.image.current;
         const { onLoadImage } = this.props;
-        if (img && img.complete && lodash_1.isFunction(onLoadImage)) {
+        if (img && img.complete && (0, lodash_1.isFunction)(onLoadImage)) {
             onLoadImage(Date.now() - this.bootStartTime);
         }
     }

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

@@ -33,9 +33,9 @@ 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 = lodash_1.isNumber(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),

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

@@ -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 = lodash_1.debounce(() => {
+        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];
@@ -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();
     }
     /**

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.js

@@ -21,7 +21,7 @@ const cx = bind_1.default.bind(person_modal_module_scss_1.default);
  * @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') },

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

@@ -59,15 +59,15 @@ const CartControlSlot = ({ children, stepText, markupText, loading, }) => (react
  * @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-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.js

@@ -51,24 +51,24 @@ 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')}`, [items.length]);
+    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);
+    (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, 
             // докидываем индекс чтобы позже брать актуальные данные из списка по нему

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);
     }, []);
-    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

@@ -21,7 +21,7 @@ const BannerTitle = ({ promotionType, volumeDiscount, 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,
@@ -32,14 +32,14 @@ const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
     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,12 +24,12 @@ 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)) {
+    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);
 };

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

@@ -17,6 +17,8 @@ export interface PromotionCardProps extends React.HTMLAttributes<HTMLDivElement>
     promotionType?: PromotionType;
     /** Скидка за объем, указывается при соответствующем типе акции. */
     volumeDiscount?: number;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
 }
 /**
  * Карточка акции.
@@ -24,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;
 };

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

@@ -55,13 +55,13 @@ const PromotionName = {
 const PromotionCard = (_a) => {
     var { promotionType, href, imageSrc, title, subtitle, dueDate, volumeDiscount, postfix = promotionType ? PromotionName[promotionType] : undefined, 
     // div props
-    className } = _a, restProps = __rest(_a, ["promotionType", "href", "imageSrc", "title", "subtitle", "dueDate", "volumeDiscount", "postfix", "className"]);
+    className, 'data-testid': testId = 'promotion-card' } = _a, restProps = __rest(_a, ["promotionType", "href", "imageSrc", "title", "subtitle", "dueDate", "volumeDiscount", "postfix", "className", 'data-testid']);
     // время нужно выводить только на клиенте - вводим состояние
-    const [mounted, setMounted] = react_1.useState(false);
-    react_1.useEffect(() => {
+    const [mounted, setMounted] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         setMounted(true);
     }, []);
-    return (react_1.default.createElement("div", Object.assign({ className: classnames_1.default(className, index_module_scss_1.default.root) }, restProps),
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(className, index_module_scss_1.default.root) }, restProps, { "data-testid": testId }),
         react_1.default.createElement("a", { href: href, className: index_module_scss_1.default.link },
             react_1.default.createElement("div", { className: index_module_scss_1.default.banner },
                 react_1.default.createElement("img", { src: imageSrc, alt: title, className: index_module_scss_1.default.image }),
@@ -72,10 +72,10 @@ const PromotionCard = (_a) => {
                     react_1.default.createElement("h4", { className: index_module_scss_1.default.title }, title),
                     subtitle && react_1.default.createElement("p", { className: index_module_scss_1.default.subtitle }, subtitle)),
                 react_1.default.createElement("div", { className: index_module_scss_1.default.footer },
-                    mounted && (react_1.default.createElement("time", { className: index_module_scss_1.default.timer },
+                    mounted && (react_1.default.createElement("time", { className: index_module_scss_1.default.timer, "data-testid": 'promotion-card:due-date' },
                         react_1.default.createElement(watch_1.default, { className: index_module_scss_1.default['timer-svg'] }),
                         react_1.default.createElement(estimate_1.Estimate, { dueDate: dueDate }))),
-                    postfix && react_1.default.createElement("div", { className: index_module_scss_1.default.postfix }, postfix))))));
+                    postfix && (react_1.default.createElement("div", { "data-testid": 'promotion-card:postfix', className: index_module_scss_1.default.postfix }, postfix)))))));
 };
 exports.PromotionCard = PromotionCard;
 exports.PromotionCard.Placeholder = placeholder_1.PromotionCardPlaceholder;

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

@@ -12,8 +12,8 @@ const classnames_1 = __importDefault(require("classnames"));
  * @param props Свойства div.
  * @return Элемент.
  */
-const PromotionCardPlaceholder = (props) => (react_1.default.createElement("div", Object.assign({}, props),
-    react_1.default.createElement("div", { className: classnames_1.default(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.banner) }),
-    react_1.default.createElement("div", { className: classnames_1.default(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) }),
-    react_1.default.createElement("div", { className: classnames_1.default(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) })));
+const PromotionCardPlaceholder = (props) => (react_1.default.createElement("div", Object.assign({ "data-testid": 'promotion-card:placeholder' }, props),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.banner) }),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) }),
+    react_1.default.createElement("div", { className: (0, classnames_1.default)(placeholder_module_scss_1.default.part, placeholder_module_scss_1.default.text) })));
 exports.PromotionCardPlaceholder = PromotionCardPlaceholder;

package/mobile/components/item-image/index.js

@@ -58,7 +58,7 @@ class ItemImage extends react_1.Component {
          * @return {Object} Свойства для компонента.
          */
         this.getImage = ({ src, alt }, onClick) => (react_1.default.createElement("img", { className: cx('image'), src: src, alt: alt, ref: this.image, onClick: onClick }));
-        this.image = react_1.createRef();
+        this.image = (0, react_1.createRef)();
         this.bootStartTime = Date.now();
     }
     /**
@@ -67,7 +67,7 @@ class ItemImage extends react_1.Component {
     componentDidMount() {
         const img = this.image.current;
         const { onLoadImage } = this.props;
-        if (img && img.complete && lodash_1.isFunction(onLoadImage)) {
+        if (img && img.complete && (0, lodash_1.isFunction)(onLoadImage)) {
             onLoadImage(Date.now() - this.bootStartTime);
         }
     }

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

@@ -26,13 +26,13 @@ exports.cx = bind_1.default.bind(modifier_item_module_scss_1.default);
  * @param props.onClick Обработчик клика на модификатор.
  * @return Элемент.
  */
-const ModifierItem = ({ name, selected, type = 'text', color, image, price, currencyGrapheme, additionalText, onClick, }) => (react_1.default.createElement("div", { onClick: onClick, className: exports.cx('wrapper', selected && 'selected') },
-    Boolean(type === constants_1.MODIFIERS_TYPES.image && image) && (react_1.default.createElement("img", { className: exports.cx('adornment'), src: image, alt: name })),
-    Boolean(type === constants_1.MODIFIERS_TYPES.color && color) && (react_1.default.createElement("div", { className: exports.cx('adornment', 'color'), style: { backgroundColor: color } })),
-    react_1.default.createElement("div", { className: exports.cx('info') },
-        react_1.default.createElement("span", { className: exports.cx('name') }, name),
-        Boolean(price) && (react_1.default.createElement(price_1.Price, { value: price, currencyGrapheme: currencyGrapheme, className: exports.cx('price', additionalText && 'additional') })),
+const ModifierItem = ({ name, selected, type = 'text', color, image, price, currencyGrapheme, additionalText, onClick, }) => (react_1.default.createElement("div", { onClick: onClick, className: (0, exports.cx)('wrapper', selected && 'selected') },
+    Boolean(type === constants_1.MODIFIERS_TYPES.image && image) && (react_1.default.createElement("img", { className: (0, exports.cx)('adornment'), src: image, alt: name })),
+    Boolean(type === constants_1.MODIFIERS_TYPES.color && color) && (react_1.default.createElement("div", { className: (0, exports.cx)('adornment', 'color'), style: { backgroundColor: color } })),
+    react_1.default.createElement("div", { className: (0, exports.cx)('info') },
+        react_1.default.createElement("span", { className: (0, exports.cx)('name') }, name),
+        Boolean(price) && (react_1.default.createElement(price_1.Price, { value: price, currencyGrapheme: currencyGrapheme, className: (0, exports.cx)('price', additionalText && 'additional') })),
         Boolean(additionalText) && (react_1.default.createElement(text_1.Text, { color: 'gray38', children: additionalText, size: 12, lineHeight: 16 }))),
-    react_1.default.createElement("div", { className: exports.cx('icon-wrapper') }, selected && (react_1.default.createElement("div", { className: exports.cx('icon') },
+    react_1.default.createElement("div", { className: (0, exports.cx)('icon-wrapper') }, selected && (react_1.default.createElement("div", { className: (0, exports.cx)('icon') },
         react_1.default.createElement(check_1.default, { fill: '#fff', role: 'presentation' }))))));
 exports.ModifierItem = ModifierItem;

package/mobile/components/product-slider/index.js

@@ -31,19 +31,19 @@ const utils_2 = require("./utils");
  * @return Элемент.
  */
 const ProductSlider = ({ children, onInViewport, onNeedRequest, }) => {
-    const rootRef = react_1.useRef(null);
-    const [mounted, setMounted] = react_1.useState(false);
+    const rootRef = (0, react_1.useRef)(null);
+    const [mounted, setMounted] = (0, react_1.useState)(false);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    utils_1.useViewport(rootRef, onNeedRequest, {
+    (0, utils_1.useViewport)(rootRef, onNeedRequest, {
         rootMargin: '200px 0px 200px 0px',
     });
     // сообщаем, когда компонент попадет в зону видимости
-    utils_1.useViewport(rootRef, onInViewport);
+    (0, utils_1.useViewport)(rootRef, onInViewport);
     // разрешаем загружать картинки только после монтирования
-    react_1.useEffect(() => setMounted(true), []);
+    (0, react_1.useEffect)(() => setMounted(true), []);
     return (react_1.default.createElement("div", { ref: rootRef },
         react_1.default.createElement(touch_slider_1.TouchSlider, null,
-            react_1.default.createElement(utils_2.SliderContext.Provider, { value: { needLoadImages: mounted } }, react_1.Children.toArray(children).filter(x => react_1.isValidElement(x) && x.type === item_1.ProductSliderItem)))));
+            react_1.default.createElement(utils_2.SliderContext.Provider, { value: { needLoadImages: mounted } }, react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === item_1.ProductSliderItem)))));
 };
 exports.ProductSlider = ProductSlider;
 exports.ProductSlider.Item = item_1.ProductSliderItem;

package/mobile/components/product-slider/item.js

@@ -48,7 +48,7 @@ const cx = bind_1.default.bind(item_module_scss_1.default);
  */
 const ProductSliderItem = (_a) => {
     var { data, favorite, footer, onFavoriteClick } = _a, restProps = __rest(_a, ["data", "favorite", "footer", "onFavoriteClick"]);
-    const { needLoadImages } = react_1.useContext(utils_1.SliderContext);
+    const { needLoadImages } = (0, react_1.useContext)(utils_1.SliderContext);
     return (react_1.default.createElement("div", { className: cx('root') },
         react_1.default.createElement(product_info_1.ProductInfo, Object.assign({}, restProps, { data: Object.assign(Object.assign({}, data), { imageSrc: needLoadImages ? data.imageSrc : undefined }) }),
             react_1.default.createElement(product_info_1.ProductInfo.OnImage, null,

package/mobile/components/product-slider/utils.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SliderContext = void 0;
 const react_1 = require("react");
-exports.SliderContext = react_1.createContext({ needLoadImages: false });
+exports.SliderContext = (0, react_1.createContext)({ needLoadImages: false });

package/mobile/components/search-bar/index.js

@@ -55,39 +55,39 @@ exports.cx = bind_1.default.bind(search_bar_module_scss_1.default);
  * @return Элемент.
  */
 const SearchBar = ({ inputMode, value, onChange, placeholder = 'Поиск', onClear, endButtons = [], startButtons = [], withSearchIcon = true, autoFocus = true, description, }) => {
-    const [shownDropdown, toggleDropdown] = react_1.useState(false);
-    const inputRef = react_1.useRef(null);
-    const dropDownRef = react_1.useRef(null);
-    const dropDownOpenerRef = react_1.useRef(null);
+    const [shownDropdown, toggleDropdown] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const dropDownRef = (0, react_1.useRef)(null);
+    const dropDownOpenerRef = (0, react_1.useRef)(null);
     const needHideEndButtons = endButtons.length > 1;
-    hooks_1.useOutsideClick(dropDownRef, e => {
+    (0, hooks_1.useOutsideClick)(dropDownRef, e => {
         !dropDownOpenerRef.current.contains(e.target) &&
             toggleDropdown(false);
     });
-    react_1.useEffect(() => needHideEndButtons
-        ? on_1.default(window, 'resize', lodash_1.throttle(() => toggleDropdown(false), 500))
+    (0, react_1.useEffect)(() => needHideEndButtons
+        ? (0, on_1.default)(window, 'resize', (0, lodash_1.throttle)(() => toggleDropdown(false), 500))
         : undefined, [needHideEndButtons]);
-    return (react_1.default.createElement("div", { className: exports.cx('wrapper') },
-        Boolean(startButtons.length) && (react_1.default.createElement("div", { className: exports.cx('before-field') },
-            react_1.default.createElement("div", { className: exports.cx('buttons-container') }, startButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index }))))))),
-        react_1.default.createElement("label", { className: exports.cx('input-wrapper') },
-            withSearchIcon && (react_1.default.createElement("span", { className: exports.cx('search-icon') },
+    return (react_1.default.createElement("div", { className: (0, exports.cx)('wrapper') },
+        Boolean(startButtons.length) && (react_1.default.createElement("div", { className: (0, exports.cx)('before-field') },
+            react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') }, startButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index }))))))),
+        react_1.default.createElement("label", { className: (0, exports.cx)('input-wrapper') },
+            withSearchIcon && (react_1.default.createElement("span", { className: (0, exports.cx)('search-icon') },
                 react_1.default.createElement(search_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": true }))),
-            react_1.default.createElement("div", { className: exports.cx('input-container') },
-                react_1.default.createElement("input", { ref: inputRef, value: value, onChange: onChange, className: exports.cx('search-field'), placeholder: placeholder, autoFocus: autoFocus, "data-testid": 'search-bar-input', type: 'text', inputMode: inputMode, tabIndex: 0 }),
-                description && (react_1.default.createElement("div", { className: exports.cx('description-container') },
-                    react_1.default.createElement("span", { className: exports.cx('description') }, description)))),
-            lodash_1.isFunction(onClear) && value && (react_1.default.createElement(link_1.Link, { onClick: event => {
+            react_1.default.createElement("div", { className: (0, exports.cx)('input-container') },
+                react_1.default.createElement("input", { ref: inputRef, value: value, onChange: onChange, className: (0, exports.cx)('search-field'), placeholder: placeholder, autoFocus: autoFocus, "data-testid": 'search-bar-input', type: 'text', inputMode: inputMode, tabIndex: 0 }),
+                description && (react_1.default.createElement("div", { className: (0, exports.cx)('description-container') },
+                    react_1.default.createElement("span", { className: (0, exports.cx)('description') }, description)))),
+            (0, lodash_1.isFunction)(onClear) && value && (react_1.default.createElement(link_1.Link, { onClick: event => {
                     onClear(event);
                     inputRef.current && inputRef.current.focus();
-                }, pseudo: true, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', "data-testid": 'search-bar:clear-icon', className: exports.cx('clear-icon'), children: react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": true }) }))),
+                }, pseudo: true, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', "data-testid": 'search-bar:clear-icon', className: (0, exports.cx)('clear-icon'), children: react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": true }) }))),
         Boolean(endButtons.length) && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("div", { className: exports.cx('after-field', needHideEndButtons && 'wide-screen') },
-                react_1.default.createElement("div", { className: exports.cx('buttons-container') }, endButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index })))))),
-            needHideEndButtons && (react_1.default.createElement("div", { className: exports.cx('after-field', 'narrow-screen') },
-                react_1.default.createElement("div", { className: exports.cx('buttons-container') },
+            react_1.default.createElement("div", { className: (0, exports.cx)('after-field', needHideEndButtons && 'wide-screen') },
+                react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') }, endButtons.map((props, index) => (react_1.default.createElement(Button, Object.assign({}, props, { key: index })))))),
+            needHideEndButtons && (react_1.default.createElement("div", { className: (0, exports.cx)('after-field', 'narrow-screen') },
+                react_1.default.createElement("div", { className: (0, exports.cx)('buttons-container') },
                     react_1.default.createElement(Button, { text: '\u0411\u043E\u043B\u044C\u0448\u0435', ref: dropDownOpenerRef, icon: more_vert_1.default, onClick: () => toggleDropdown(!shownDropdown) })),
-                shownDropdown && (react_1.default.createElement("div", { ref: dropDownRef, className: exports.cx('dropdown-container') },
+                shownDropdown && (react_1.default.createElement("div", { ref: dropDownRef, className: (0, exports.cx)('dropdown-container') },
                     react_1.default.createElement(dropdown_1.Dropdown, null, endButtons.map(({ text, onClick }, index) => (react_1.default.createElement(dropdown_item_1.DropdownItem, { size: 's', key: index, onClick: event => {
                             onClick(event);
                             toggleDropdown(false);
@@ -103,6 +103,6 @@ exports.SearchBar = SearchBar;
  * @param props.iconColor Цвет иконки.
  * @return Элемент.
  */
-const Button = react_1.forwardRef(function Button({ text, icon: Icon, iconColor = 'gray87', onClick }, ref) {
-    return (react_1.default.createElement("div", { ref: ref, onClick: onClick, className: exports.cx('button'), role: 'button', "data-testid": 'search-bar-button', tabIndex: 0, "aria-label": Icon && text }, Icon ? react_1.default.createElement(Icon, { fill: colors_1.COLORS.get(iconColor), "aria-hidden": 'true' }) : text));
+const Button = (0, react_1.forwardRef)(function Button({ text, icon: Icon, iconColor = 'gray87', onClick }, ref) {
+    return (react_1.default.createElement("div", { ref: ref, onClick: onClick, className: (0, exports.cx)('button'), role: 'button', "data-testid": 'search-bar-button', tabIndex: 0, "aria-label": Icon && text }, Icon ? react_1.default.createElement(Icon, { fill: colors_1.COLORS.get(iconColor), "aria-hidden": 'true' }) : text));
 });

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

@@ -34,10 +34,10 @@ const select_screen_module_scss_1 = __importDefault(require("./select-screen.mod
  * @return Экран выбора опции.
  */
 const SelectScreen = (_a) => {
-    var { items, getItemName = prop_1.default('name'), displayItem = displayOption, isItemSelected = lodash_1.noop, onItemClick } = _a, screenProps = __rest(_a, ["items", "getItemName", "displayItem", "isItemSelected", "onItemClick"]);
+    var { items, getItemName = (0, prop_1.default)('name'), displayItem = displayOption, isItemSelected = lodash_1.noop, onItemClick } = _a, screenProps = __rest(_a, ["items", "getItemName", "displayItem", "isItemSelected", "onItemClick"]);
     return (react_1.default.createElement(screen_1.Screen, Object.assign({ withDivideHeader: false }, screenProps),
         react_1.default.createElement(layout_1.MobileLayout, { disabledOn: ['mxs', 'ms'] },
-            react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, lodash_1.map(items, (item, index) => {
+            react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, (0, lodash_1.map)(items, (item, index) => {
                 const isSelected = Boolean(isItemSelected(item));
                 return (react_1.default.createElement("button", { key: index, className: select_screen_module_scss_1.default.item, onClick: () => onItemClick && onItemClick(item) },
                     displayItem(item, { getItemName, isSelected }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "12.3.0",
+  "version": "12.3.1",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -13,23 +13,24 @@
     "build:before": "rimraf build",
     "build:main": "tsc --project tsconfig.build.json",
     "build:after": "node .build/dist.js",
-    "build": "yarn build:before && yarn build:main && yarn build:after",
+    "build": "npm run build:before && npm run build:main && npm run build:after",
     "type-check": "tsc -p . --noEmit",
     "test": "jest",
     "coverage": "jest --coverage",
     "lint:scripts": "eslint --cache src/ --ext .js,.jsx,.ts,.tsx",
     "lint:styles": "stylelint 'src/**/*.scss'",
     "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook --no-dll --quiet --loglevel error -o build-storybook",
+    "storybook:build": "build-storybook --quiet --loglevel error -o build-storybook",
     "prettier": "prettier --write \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error",
     "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error"
   },
   "dependencies": {
-    "@sima-land/ui-nucleons": "^40.0.0",
-    "@sima-land/ui-quarks": "^2.0.1",
+    "@sima-land/ui-nucleons": "^40.3.0",
+    "@sima-land/ui-quarks": "^2.2.0",
     "classnames": "^2.3.1",
+    "date-fns": "^2.26.0",
     "lodash": "^4.17.21",
-    "react-svg": "^11.2.2",
+    "react-svg": "^14.1.3",
     "react-transition-group": "^4.4.1"
   },
   "peerDependencies": {
@@ -37,40 +38,39 @@
     "react-dom": ">=17"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.8",
-    "@babel/preset-env": "^7.14.8",
-    "@babel/preset-react": "^7.14.5",
-    "@rushstack/eslint-patch": "^1.0.9",
-    "@sima-land/linters": "^2.1.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@sima-land/linters": "^2.1.1",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
     "@storybook/addon-storysource": "^6.3.12",
     "@storybook/addon-viewport": "^6.3.12",
+    "@storybook/builder-webpack5": "^6.3.12",
+    "@storybook/manager-webpack5": "^6.3.12",
     "@storybook/react": "^6.3.12",
     "@storybook/theming": "^6.3.12",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/react": "^12.1.0",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.22",
-    "@types/lodash": "^4.14.169",
-    "@types/react-dom": "^17.0.4",
-    "@types/react-transition-group": "^4.4.1",
-    "@typescript-eslint/eslint-plugin": "^4.22.0",
-    "@typescript-eslint/parser": "^4.22.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
-    "babel-preset-jest": "^27.0.6",
+    "@types/enzyme": "^3.10.10",
+    "@types/jest": "^27.0.3",
+    "@types/lodash": "^4.14.177",
+    "@types/react-dom": "^17.0.11",
+    "@types/react-transition-group": "^4.4.4",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
+    "babel-preset-jest": "^27.2.0",
     "copyfiles": "^2.4.1",
     "css-loader": "^5.0.1",
-    "date-fns": "^2.16.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "enzyme-to-json": "^3.4.4",
     "eslint": "^7.32.0",
-    "husky": "^7.0.1",
+    "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.6.3",
-    "lint-staged": "^11.1.1",
-    "prettier": "^2.4.1",
+    "jest": "^27.3.1",
+    "lint-staged": "^12.1.2",
+    "postcss": "^8.3.11",
+    "prettier": "^2.5.0",
     "react": "^17.0.2",
     "react-docgen-typescript": "^2.1.1",
     "react-dom": "^17.0.2",
@@ -78,9 +78,9 @@
     "sass": "^1.36.0",
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
-    "stylelint": "^13.13.1",
-    "ts-jest": "^26.5.5",
+    "stylelint": "^14.1.0",
+    "ts-jest": "^27.0.7",
     "typescript": "^4.2.4",
-    "webpack": "^5.47.1"
+    "webpack": "^5.64.4"
   }
 }

package/README.md

@@ -1,86 +0,0 @@
-# Библиотека компонентов www.sima-land.ru
-
-React-компоненты, привязанные к контексту интернет-магазина.
-
-## Начало работы
-
-### Подключение
-
-Для подключения к проекту используйте
-
-```bash
-# npm
-$ npm i -S @sima-land/moleculas
-
-# yarn
-$ yarn add @sima-land/moleculas
-```
-
-### Консольные команды, необходимые в процессе разработки
-
-* `yarn test` - запуск unit-тестов
-* `yarn lint` - запуск линтеров
-* `yarn storybook` - запуск *storybook*
-
-## Соглашения
-
-1. В проекте используется линтер *ESLint*. Чтобы сделать `commit` и `push` в репозиторий, изменения должны пройти проверку линтером.
-1. Необходимо полное покрытие тестами всего функционала. Чтобы сделать `push` в репозиторий, все тесты должны пройти успешно.
-1. Коммиты должны быть оформлены по следующему шаблону:
-    ```
-    [№ задачи] [Название задачи]
-
-    [Изменение №1]
-    [Изменение №2]
-    ...
-    [Изменение №n]
-    ```
-    Пример:
-    ```
-    #62 Подключить отладку серверного приложения, написать документацию по работе с проектом
-
-    Внесены изменения в README.md, добавлены инструкции по началу работы в проекте
-    Добавлены конфигурационные файлы для Jest
-    Настроена отладка приложения в режиме разработки, инструкции по настройке IDE добавлены в README.md
-    ```
-
-## Отладка
-
-Для отладки иногда полезно подключить данную библиотеку к проекту напрямую, сделав `symlink` в файловой системе.
-
-1. Клонируем библиотеку. Заходим в папку этой библиотеки и делаем ```yarn build && cd build && yarn link```. Это нужно сделать 1 раз.
-2. Заходим в папку проекта к которому подключена библиотека и делаем ```yarn link "@sima-land/moleculas"```. Это
-приведет к тому, что код в node_modules будет заменен на ссылку в вашей FS.
-3. Для возврата в нормальный режим  ```yarn unlink "@sima-land/moleculas" && yarn install --force```
-
-Примечание: Если возникли ошибки с реактом/хуками, и одной из проблем в логе ошибки значится дублирование react'a,
-следует сделать линк реакта молекул с реактом проекта:
-1. Директория проекта куда добавлены молекулы `cd ./node_modules/react && yarn link`.
-2. Директория молекул `yarn link "react"`.
-
-## Витрина компонентов
-
-В качестве витрины компонентов для отображения размещенных в библиотеке компонентов используется [storybook](https://storybook.js.org/)
-
-Истории и документация компонентов позволяют увидеть варианты использования компонента с различными свойствами и примеры использования не вникая в код и логику компонента, что позволяет ускорить разработку при использовании библиотеки.
-Поэтому, при создании историй/документации компонентов необходимо учитывать различные **варианты использования** и различные **комбинации входных параметров**.
-
-### Соглашения
-
-Истории компонентов должны соответствовать формату `*.stories.(ts|tsx)`.
-
-Истории и вспомогательные файлы должны размещаться в директории `__stories__` в директории компонента.
-
-### Требования к историям/документации
-
-**История должна содержать:**
-- Вариант использования компонента;
-- Наименование, соответствующее варианту использования;
-- Необходимые начальные свойства (их можно изменить в UI Storybook на вкладке _Controls_).
-
-**Документация/блок историй должны содержать:**
-- Наименование компонента с префиксом группы, например `desktop/MyComponent`;
-- Текстовое описание компонента;
-- Блок кода с примером использования компонента;
-- Если компонент принимает в параметрах функции-обработчики, то они должны быть объявлены как [action](https://storybook.js.org/docs/react/essentials/actions), для отображения выполнения обработчиков на вкладке _Actions_ в UI.
-Для свойств-обработчиков, чьи имена начинаются с `on*` добавление [action](https://storybook.js.org/docs/react/essentials/actions) происходит автоматически, дополнительных действий с ними не требуется.