@sima-land/moleculas 14.2.0 → 15.1.0

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

@@ -14,9 +14,6 @@ export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorEl
 /**
  * Шильдик.
  * @param props Свойства.
- * @param props.color Цвет.
- * @param props.fields Содержимое.
- * @param props.href Ссылка.
  * @return Элемент.
  */
-export declare const Badge: ({ className, color, fields, href, style, "data-testid": testId, ...restProps }: BadgeProps) => JSX.Element;
+export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement>>;

package/common/components/badge/index.js

@@ -1,4 +1,23 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -15,23 +34,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
-const react_1 = __importDefault(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
+const react_1 = __importStar(require("react"));
 const timer_1 = require("@sima-land/ui-nucleons/timer");
+const bind_1 = __importDefault(require("classnames/bind"));
 const badge_module_scss_1 = __importDefault(require("./badge.module.scss"));
 const cx = bind_1.default.bind(badge_module_scss_1.default);
 /**
  * Шильдик.
  * @param props Свойства.
- * @param props.color Цвет.
- * @param props.fields Содержимое.
- * @param props.href Ссылка.
  * @return Элемент.
  */
-const Badge = (_a) => {
+exports.Badge = (0, react_1.forwardRef)(function Badge(_a, ref) {
     var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
     const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement("a", Object.assign({}, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value })) : (
+    return (react_1.default.createElement("a", Object.assign({ ref: ref }, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value })) : (
         // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
         react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
             let result = null;
@@ -48,8 +64,7 @@ const Badge = (_a) => {
             i < fields.length - 1 && acc.push(' ');
             return acc;
         }, []))) })));
-};
-exports.Badge = Badge;
+});
 /**
  * Форматирует оставшееся время.
  * @param distance Оставшееся время.

package/common/components/badge-list/badge-list.module.scss

@@ -11,6 +11,7 @@
 }
 
 .item {
+  max-width: 100%;
   margin-bottom: 4px;
   &:not(:last-child) {
     margin-right: 4px;

package/common/components/badge-list/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 export interface BadgeListProps {
     /** Список данных для шильдиков. */
     children?: React.ReactNode;
@@ -14,4 +14,11 @@ export interface BadgeListProps {
  * @param props Свойства компонента.
  * @return Элемент.
  */
-export declare const BadgeList: ({ children, className, lineLimit, style }: BadgeListProps) => JSX.Element;
+export declare const BadgeList: {
+    ({ children, className, lineLimit, style }: BadgeListProps): JSX.Element;
+    Slot: typeof BadgeListSlot;
+};
+declare function BadgeListSlot({ children }: {
+    children?: ReactNode;
+}): JSX.Element;
+export {};

package/common/components/badge-list/index.js

@@ -33,10 +33,18 @@ const cx = bind_1.default.bind(badge_list_module_scss_1.default);
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).reduce((list, item) => {
-    (0, react_1.isValidElement)(item) &&
-        item.type === badge_1.Badge &&
-        list.push((0, react_1.cloneElement)(item, { className: cx('item', item.props.className) }));
-    return list;
-}, [])));
+const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).map(child => {
+    switch (true) {
+        case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
+            return react_1.default.createElement(BadgeListSlot, null, child);
+        case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
+            return child;
+        default:
+            return null;
+    }
+})));
 exports.BadgeList = BadgeList;
+function BadgeListSlot({ children }) {
+    return react_1.default.createElement("div", { className: cx('item') }, children);
+}
+exports.BadgeList.Slot = BadgeListSlot;

package/desktop/components/gallery-modal/components/gallery-modal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { MediaData } from '../types';
 import { ModalProps } from '@sima-land/ui-nucleons/modal';
+import { ReviewInfoProps } from './review-info';
 export interface GalleryModalProps extends Pick<ModalProps, 'withScrollDisable' | 'scrollDisableOptions'> {
     /** Список медиа. */
     media: MediaData[];
@@ -9,10 +10,7 @@ export interface GalleryModalProps extends Pick<ModalProps, 'withScrollDisable'
     /** Будет вызвана при переключении элемента из списка медиа. */
     onMediaChange?: (data: MediaData, index: number) => void;
     /** Данные отзыва, выводятся внизу окна. */
-    review?: {
-        rating: number;
-        author: string;
-    };
+    review?: Pick<ReviewInfoProps, 'rating' | 'author' | 'content' | 'loading' | 'notAffectRating'>;
     /** Будет вызвана при попытке перейти к отзыву. */
     onGoToReview?: () => void;
     /** Будет вызвана при закрытии. */

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

@@ -50,38 +50,37 @@ const gallery_modal_module_scss_1 = __importDefault(require("./gallery-modal.mod
 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] = (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 = (0, utils_1.useRectFit)(areaRef, { correction });
-    const innerStyles = Object.assign({}, (size !== null && {
-        '--area-height': `${size + correction}px`,
-        '--all-round-view-size': `${size}px`,
-    }));
+    const rootRef = (0, react_1.useRef)(null);
     const handlerRef = (0, identity_1.useIdentityRef)(onMediaChange);
+    const thumbnailsRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         var _a;
         (_a = handlerRef.current) === null || _a === void 0 ? void 0 : _a.call(handlerRef, media[currentIndex], currentIndex);
         thumbnailsRef.current &&
             (0, scroll_to_child_1.scrollToChild)(thumbnailsRef.current, thumbnailsRef.current.children[currentIndex]);
     }, [currentIndex]);
+    const size = (0, utils_1.useSquareFit)(rootRef, { hasReview: Boolean(review) });
+    const style = size
+        ? {
+            '--square-size': `${size}px`,
+            '--all-round-view-size': `${size}px`,
+        }
+        : {};
     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 }),
         react_1.default.createElement(modal_1.Modal.Body, null,
-            react_1.default.createElement(layout_1.DesktopLayout, { className: cx('root'), style: innerStyles },
-                size !== null && media.length > 1 && (react_1.default.createElement("div", { className: cx('thumbnails'), ref: thumbnailsRef }, media.map((item, index) => (react_1.default.createElement(thumbnail_1.Thumbnail, Object.assign({ key: index, className: cx('thumbnail'), type: item.type, checked: index === currentIndex, onClick: () => setCurrent(index) }, (item.type === 'image' && {
-                    src: item.data.thumbnailSrc,
-                    alt: item.data.alt || '',
-                }))))))),
-                react_1.default.createElement("div", { ref: areaRef, className: cx('area') }, size !== null && (react_1.default.createElement("div", { className: cx('inner'), style: { width: `${size}px` } },
+            react_1.default.createElement(layout_1.DesktopLayout, { className: cx('root'), ref: rootRef, style: style },
+                react_1.default.createElement("div", { className: cx('main') },
+                    react_1.default.createElement("div", { className: cx('thumbnails'), ref: thumbnailsRef }, media.map((item, index) => (react_1.default.createElement(thumbnail_1.Thumbnail, Object.assign({ key: index, className: cx('thumbnail'), type: item.type, checked: index === currentIndex, onClick: () => setCurrent(index) }, (item.type === 'image' && {
+                        src: item.data.thumbnailSrc,
+                        alt: item.data.alt || '',
+                    })))))),
                     react_1.default.createElement("div", { className: cx('square') },
                         react_1.default.createElement(Media, Object.assign({}, media[currentIndex], { onVideoEvent: onVideoEvent })),
                         media.length > 1 && (react_1.default.createElement(react_1.default.Fragment, null,
                             react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'left', className: cx('button', 'left'), onClick: () => setCurrent((media.length + currentIndex - 1) % media.length), "data-testid": 'gallery-modal:prev-media-button' }),
-                            react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', className: cx('button', 'right'), onClick: () => setCurrent((currentIndex + 1) % media.length), "data-testid": 'gallery-modal:next-media-button' })))),
-                    review && (react_1.default.createElement(review_info_1.ReviewInfo, { rating: review.rating, author: review.author, onGoToReview: onGoToReview, className: cx('footer') })))))))));
+                            react_1.default.createElement(arrow_button_1.ArrowButton, { direction: 'right', className: cx('button', 'right'), onClick: () => setCurrent((currentIndex + 1) % media.length), "data-testid": 'gallery-modal:next-media-button' })))))),
+            size !== null && (react_1.default.createElement("div", { className: cx('footer'), style: style }, review && react_1.default.createElement(review_info_1.ReviewInfo, Object.assign({}, review, { onGoToReview: onGoToReview })))))));
 };
 exports.GalleryModal = GalleryModal;
 const Media = (_a) => {

package/desktop/components/gallery-modal/components/gallery-modal.module.scss

@@ -1,47 +1,52 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
-  height: calc(100vh - var(--header-height) - 40px);
   position: relative;
+  height: calc(100vh - var(--header-height));
+  display: flex;
+  flex-direction: column;
+  // box-shadow: inset 0 0 0 6px #f00;
 }
 
-.thumbnails {
+.main {
+  position: relative;
+  // box-shadow: inset 0 0 0 6px #0f0;
+  width: 100%;
   height: var(--area-height);
+}
+
+.thumbnails {
+  width: 104px;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
   position: absolute;
-  width: 104px;
   .thumbnail + .thumbnail {
     margin-top: 8px;
   }
 }
 
-.area {
-  height: 100%;
-  margin: 0 auto;
-  width: calc(100% - (2 * (120px + 56px + 24px)));
-  .inner {
-    height: 100%;
-    margin: 0 auto;
+.square {
+  width: var(--square-size);
+  height: var(--square-size);
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+  &::after {
+    content: '';
+    display: block;
+    padding-top: 100%;
+    width: 100%;
   }
-  .square {
-    position: relative;
-    &::after {
-      content: '';
-      display: block;
-      padding-top: 100%;
-      width: 100%;
+  .button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &.left {
+      right: calc(100% + 24px);
     }
-    .button {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      &.left {
-        right: calc(100% + 24px);
-      }
-      &.right {
-        left: calc(100% + 24px);
-      }
+    &.right {
+      left: calc(100% + 24px);
     }
   }
 }
@@ -71,5 +76,10 @@
 }
 
 .footer {
-  margin-top: 40px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-top: auto;
+  // background-color: #ff000024;
 }

package/desktop/components/gallery-modal/components/review-info.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
+import { ReactNode } from 'react';
 export interface ReviewInfoProps {
     rating: number;
     author: string;
+    content?: ReactNode;
     onGoToReview?: () => void;
+    notAffectRating?: boolean;
     className?: string;
+    loading?: boolean;
 }
-export declare const ReviewInfo: ({ rating, author, onGoToReview, className }: ReviewInfoProps) => JSX.Element;
+export declare const ReviewInfo: ({ rating, author, onGoToReview, content, className, notAffectRating, loading, }: ReviewInfoProps) => JSX.Element;

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

@@ -1,16 +1,75 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReviewInfo = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 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 bind_1 = __importDefault(require("classnames/bind"));
 const review_info_module_scss_1 = __importDefault(require("./review-info.module.scss"));
-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"))));
+const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
+const shadows_1 = require("@sima-land/ui-nucleons/styling/shadows");
+const custom_scrollbar_1 = require("@sima-land/ui-nucleons/_internal/custom-scrollbar");
+const cx = bind_1.default.bind(review_info_module_scss_1.default);
+const ReviewInfo = ({ rating, author, onGoToReview, content, className, notAffectRating, loading, }) => {
+    const [clamped, setClamped] = (0, react_1.useState)(false);
+    const [opened, setOpened] = (0, react_1.useState)(false);
+    const contentRef = (0, react_1.useRef)(null);
+    const checkClamp = (0, react_1.useCallback)(() => {
+        const contentEl = contentRef.current;
+        if (!opened && contentEl) {
+            setClamped(contentEl.scrollHeight > contentEl.clientHeight);
+        }
+    }, [opened]);
+    (0, react_1.useEffect)(checkClamp, [content, opened]);
+    (0, react_1.useEffect)(() => (0, on_1.default)(window, 'resize', checkClamp), [content, checkClamp]);
+    return (react_1.default.createElement("div", { className: cx('root', className, opened && shadows_1.BoxShadow.z2straight) },
+        loading && (react_1.default.createElement(Layout, null,
+            react_1.default.createElement(LoadingView, null))),
+        !loading && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Layout, { className: cx('header') },
+                react_1.default.createElement("div", { className: cx('rating') }, notAffectRating ? 'Не влияет на рейтинг' : react_1.default.createElement(rating_1.Rating, { value: rating })),
+                react_1.default.createElement("div", { className: cx('author') }, author),
+                onGoToReview && (react_1.default.createElement(link_1.Link, { className: cx('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"))),
+            content && !opened && (react_1.default.createElement(Layout, null,
+                react_1.default.createElement("div", { ref: contentRef, className: cx('content'), "data-testid": 'review-info:collapsed-content' }, content))),
+            content && opened && (react_1.default.createElement(custom_scrollbar_1.CustomScrollbar, { className: cx('content', 'opened') },
+                react_1.default.createElement(Layout, null,
+                    react_1.default.createElement("div", { "data-testid": 'review-info:expanded-content' }, content),
+                    react_1.default.createElement(link_1.Link, { pseudo: true, onClick: () => setOpened(false), "data-testid": 'review-info:collapse' }, "\u0421\u043A\u0440\u044B\u0442\u044C \u043E\u0442\u0437\u044B\u0432")))),
+            content && !opened && clamped && (react_1.default.createElement(Layout, null,
+                react_1.default.createElement(link_1.Link, { pseudo: true, onClick: () => setOpened(true), "data-testid": 'review-info:expand' }, "\u041F\u043E\u043A\u0430\u0437\u0430\u0442\u044C \u043F\u043E\u043B\u043D\u043E\u0441\u0442\u044C\u044E")))))));
+};
 exports.ReviewInfo = ReviewInfo;
+function Layout({ className, children }) {
+    return react_1.default.createElement("div", { className: cx(className, 'layout') }, children);
+}
+function LoadingView() {
+    return (react_1.default.createElement("div", { className: cx('loading') },
+        react_1.default.createElement("div", { className: cx('head') },
+            react_1.default.createElement("div", { className: cx('text', 'name') }),
+            react_1.default.createElement(link_1.Link, { pseudo: true, disabled: true, className: cx('button') }, "\u041F\u0435\u0440\u0435\u0439\u0442\u0438 \u043A \u043E\u0442\u0437\u044B\u0432\u0443")),
+        react_1.default.createElement("div", { className: cx('text') }),
+        react_1.default.createElement("div", { className: cx('text') })));
+}

package/desktop/components/gallery-modal/components/review-info.module.scss

@@ -1,15 +1,35 @@
 @use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
-  height: 20px;
-  display: flex;
+  min-height: 140px;
+  max-height: 314px;
   font-size: 14px;
   line-height: 20px;
+  padding-bottom: 24px;
+  background: #fff;
+}
+
+.layout {
+  width: var(--square-size);
+  margin: 0 auto;
+}
+
+.header {
+  height: 56px;
+  display: flex;
+  align-items: center;
+  padding: 26px 0 14px;
   white-space: nowrap;
 }
 
+.rating {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: colors.$basic-gray38;
+}
+
 .author {
-  flex: 1;
+  flex-grow: 1;
   margin-left: 16px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -18,5 +38,50 @@
 
 .link {
   margin-left: 16px;
-  font-weight: 500;
+  font-weight: 600;
+  &:hover {
+    font-weight: 600;
+  }
+}
+
+.content {
+  &.opened {
+    max-height: calc(314px - 56px - 24px);
+  }
+  &:not(.opened) {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+}
+
+.loading {
+  display: flex;
+  flex-wrap: wrap;
+  padding-top: 26px;
+  .head {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 8px;
+  }
+  .text {
+    width: 100%;
+    border-radius: 4px;
+    background: colors.$basic-gray4;
+    height: 16px;
+    line-height: 20px;
+    vertical-align: middle;
+    margin: 2px 0;
+  }
+  .name {
+    max-width: 240px;
+    margin-right: 16px;
+  }
+  .button {
+    margin-left: auto;
+    white-space: nowrap;
+    font-weight: 600;
+  }
 }

package/desktop/components/gallery-modal/utils.d.ts

@@ -6,11 +6,11 @@ import React from 'react';
  */
 export declare const useImagesLoad: (srcList: string[]) => boolean;
 /**
- * Хук, вернет размер квадрата вписанного в прямоугольную область, определенную заданным элементом.
+ * Хук, вернет размер квадрата вписанного в область окна галереи фото по макетам.
  * @param areaRef Реф с элементом.
  * @param options Опции.
  * @return Размер или null.
  */
-export declare const useRectFit: (areaRef: React.RefObject<HTMLDivElement | null>, { correction }: {
-    correction: number;
+export declare const useSquareFit: (areaRef: React.RefObject<HTMLDivElement | null>, { hasReview }: {
+    hasReview: boolean;
 }) => number | null;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRectFit = exports.useImagesLoad = void 0;
+exports.useSquareFit = exports.useImagesLoad = void 0;
 const react_1 = require("react");
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 /**
@@ -25,29 +25,26 @@ const useImagesLoad = (srcList) => {
 };
 exports.useImagesLoad = useImagesLoad;
 /**
- * Хук, вернет размер квадрата вписанного в прямоугольную область, определенную заданным элементом.
+ * Хук, вернет размер квадрата вписанного в область окна галереи фото по макетам.
  * @param areaRef Реф с элементом.
  * @param options Опции.
  * @return Размер или null.
  */
-const useRectFit = (areaRef, { correction }) => {
+const useSquareFit = (areaRef, { hasReview }) => {
     const [size, setSize] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        const calcSquareSize = () => {
+        function calc() {
             if (areaRef.current) {
-                const availWidth = areaRef.current.clientWidth;
-                const availHeight = areaRef.current.clientHeight;
-                if (availWidth + correction <= availHeight) {
-                    setSize(availWidth);
-                }
-                else {
-                    setSize(availHeight - correction);
-                }
+                const correction = 2 * (104 + 16 + 56 + 24); // ширина превью + отступ + ширина кнопки + отступ
+                // доступная область в которую можно вписать **квадрат**
+                const availWidth = areaRef.current.clientWidth - correction;
+                const availHeight = areaRef.current.clientHeight - (hasReview ? 140 : 40); // вычитаем высоту футера
+                setSize(Math.min(availWidth, availHeight));
             }
-        };
-        calcSquareSize();
-        return (0, on_1.default)(window, 'resize', () => window.requestAnimationFrame(calcSquareSize));
-    }, [areaRef]);
+        }
+        calc();
+        return (0, on_1.default)(window, 'resize', () => window.requestAnimationFrame(calc));
+    }, [areaRef, hasReview]);
     return size;
 };
-exports.useRectFit = useRectFit;
+exports.useSquareFit = useSquareFit;

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

@@ -47,9 +47,11 @@ exports.HoverCard = (0, react_1.forwardRef)((props, ref) => {
 const ProductCard = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [hovered, toggle] = (0, react_1.useState)(false);
-    return (react_1.default.createElement("div", Object.assign({}, props, { "data-testid": 'product-card', className: (0, classnames_1.default)(product_card_module_scss_1.default.root, className) }),
-        react_1.default.createElement("div", { "data-testid": 'product-card:info', onMouseEnter: () => toggle(true) }, (0, exports.reduceBaseInfo)(children)),
-        hovered && (react_1.default.createElement(exports.HoverCard, { onMouseLeave: () => toggle(false) }, (0, exports.reduceHoverInfo)(children)))));
+    return (react_1.default.createElement("div", Object.assign({}, props, { "data-testid": 'product-card', className: (0, classnames_1.default)(product_card_module_scss_1.default.root, className), onMouseEnter: () => toggle(true), 
+        // вешаем onMouseLeave на корневой элемент так как в Chrome проблемы если вешать на "product-card:info"
+        onMouseLeave: () => toggle(false) }),
+        react_1.default.createElement("div", { "data-testid": 'product-card:info' }, (0, exports.reduceBaseInfo)(children)),
+        hovered && react_1.default.createElement(exports.HoverCard, null, (0, exports.reduceHoverInfo)(children))));
 };
 exports.ProductCard = ProductCard;
 /**

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

@@ -27,6 +27,7 @@ const react_1 = __importStar(require("react"));
 const carousel_1 = require("@sima-land/ui-nucleons/carousel");
 const hover_card_1 = require("./hover-card");
 const utils_1 = require("./utils");
+const intersection_1 = require("@sima-land/ui-nucleons/hooks/intersection");
 const media_1 = require("@sima-land/ui-nucleons/hooks/media");
 const product_info_1 = require("../../../common/components/product-info");
 const bind_1 = __importDefault(require("classnames/bind"));
@@ -62,12 +63,15 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
     // вычисляем ширину элемента карусели для позиционирования стрелок
     const itemWidth = (0, utils_1.useChildWidth)(rootRef, `.${cx('item')}`, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    (0, utils_1.useViewport)(rootRef, onNeedRequest, {
-        rootMargin: '200px 0px 200px 0px',
-    });
+    const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
+    (0, intersection_1.useIntersection)(rootRef, entry => {
+        entry.isIntersecting && onNeedRequest && onNeedRequest();
+    }, options);
     // отправляем статистку, когда компонент попадает в зону видимости
-    (0, utils_1.useViewport)(rootRef, onInViewport);
-    return (react_1.default.createElement("div", { ref: rootRef, className: cx('root', className) },
+    (0, intersection_1.useIntersection)(rootRef, entry => {
+        entry.isIntersecting && onInViewport && onInViewport();
+    });
+    return (react_1.default.createElement("div", { ref: rootRef, className: cx('root', className), "data-testid": 'product-carousel:root' },
         items.length > 0 && (react_1.default.createElement(carousel_1.Carousel, Object.assign({ step: 3, draggable: false, 
             // докидываем индекс чтобы позже брать актуальные данные из списка по нему
             items: items.map((item, index) => [item, index]) }, (itemWidth !== null && {

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

@@ -1,11 +1,4 @@
 import React from 'react';
-/**
- * Вызывает callback когда заданный в ref элемент попал во viewport.
- * @param ref Ref отслеживаемого элемента.
- * @param callback Функция обратного вызова.
- * @param options Опции IntersectionObserver.
- */
-export declare const useViewport: (ref: React.MutableRefObject<HTMLElement | null>, callback?: (() => void) | undefined, options?: IntersectionObserverInit | undefined) => void;
 /**
  * Возвращает объект работы с флагом, который автоматически возвращается в true через заданный промежуток времени.
  * @return Объект работы с флагом.

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

@@ -3,34 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChildWidth = exports.useAllowFlag = exports.useViewport = void 0;
+exports.useChildWidth = exports.useAllowFlag = void 0;
 const react_1 = require("react");
 const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
-const identity_1 = require("@sima-land/ui-nucleons/hooks/identity");
-/**
- * Вызывает callback когда заданный в ref элемент попал во viewport.
- * @param ref Ref отслеживаемого элемента.
- * @param callback Функция обратного вызова.
- * @param options Опции IntersectionObserver.
- */
-const useViewport = (ref, callback, options) => {
-    const callbackRef = (0, identity_1.useIdentityRef)(callback);
-    (0, react_1.useEffect)(() => {
-        const element = ref.current;
-        if (element) {
-            const observer = new IntersectionObserver(entries => {
-                const fn = callbackRef.current;
-                for (const entry of entries) {
-                    entry.target === element && entry.isIntersecting && fn && fn();
-                    break;
-                }
-            }, options);
-            observer.observe(element);
-            return () => observer.disconnect();
-        }
-    }, []);
-};
-exports.useViewport = useViewport;
 /**
  * Возвращает объект работы с флагом, который автоматически возвращается в true через заданный промежуток времени.
  * @return Объект работы с флагом.

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

@@ -24,7 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ProductSlider = void 0;
 const react_1 = __importStar(require("react"));
-const utils_1 = require("../../../desktop/components/product-carousel/utils");
+const intersection_1 = require("@sima-land/ui-nucleons/hooks/intersection");
 const touch_slider_1 = require("@sima-land/ui-nucleons/touch-slider");
 const product_info_1 = require("../../../common/components/product-info");
 const product_slider_module_scss_1 = __importDefault(require("./product-slider.module.scss"));
@@ -36,16 +36,19 @@ const product_slider_module_scss_1 = __importDefault(require("./product-slider.m
 const ProductSlider = ({ children, onInViewport, onNeedRequest }) => {
     const rootRef = (0, react_1.useRef)(null);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    (0, utils_1.useViewport)(rootRef, onNeedRequest, {
-        rootMargin: '200px 0px 200px 0px',
-    });
+    const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
+    (0, intersection_1.useIntersection)(rootRef, entry => {
+        entry.isIntersecting && (onNeedRequest === null || onNeedRequest === void 0 ? void 0 : onNeedRequest());
+    }, options);
     // сообщаем, когда компонент попадет в зону видимости
-    (0, utils_1.useViewport)(rootRef, onInViewport);
-    return (react_1.default.createElement("div", { ref: rootRef },
+    (0, intersection_1.useIntersection)(rootRef, entry => {
+        entry.isIntersecting && (onInViewport === null || onInViewport === void 0 ? void 0 : onInViewport());
+    });
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-slider:root' },
         react_1.default.createElement(touch_slider_1.TouchSlider, null, react_1.Children.toArray(children).reduce((list, item) => {
             (0, react_1.isValidElement)(item) &&
                 item.type === product_info_1.ProductInfo &&
-                list.push(react_1.default.createElement("div", { key: item.key, className: product_slider_module_scss_1.default.item }, item));
+                list.push(react_1.default.createElement("div", { key: item.key, className: product_slider_module_scss_1.default.item, "data-testid": 'product-slider:item' }, item));
             return list;
         }, []))));
 };

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

@@ -24,10 +24,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBar = exports.cx = void 0;
 const react_1 = __importStar(require("react"));
-const bind_1 = __importDefault(require("classnames/bind"));
-const search_bar_module_scss_1 = __importDefault(require("./search-bar.module.scss"));
 const lodash_1 = require("lodash");
-const link_1 = require("@sima-land/ui-nucleons/link");
 const colors_1 = require("@sima-land/ui-nucleons/colors");
 const dropdown_1 = require("@sima-land/ui-nucleons/dropdown");
 const dropdown_item_1 = require("@sima-land/ui-nucleons/dropdown-item");
@@ -36,6 +33,8 @@ const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 const cross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/cross"));
 const search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/search"));
 const more_vert_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/more-vert"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const search_bar_module_scss_1 = __importDefault(require("./search-bar.module.scss"));
 exports.cx = bind_1.default.bind(search_bar_module_scss_1.default);
 /**
  * Компонент поисковой строки.
@@ -56,20 +55,25 @@ const SearchBar = ({ value, onChange, inputMode, placeholder = 'Поиск', onC
     (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: (0, exports.cx)('wrapper') },
+    const preventFieldBlur = e => {
+        if (inputRef.current &&
+            inputRef.current !== e.target && // не предотвращаем события на самом поле (например выделение текста)
+            document.activeElement === inputRef.current) {
+            e.preventDefault();
+        }
+    };
+    return (react_1.default.createElement("div", { className: (0, exports.cx)('root') },
         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') },
+        react_1.default.createElement("label", { className: (0, exports.cx)('input-wrapper'), onMouseDown: preventFieldBlur, "data-testid": 'search-bar: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('basic-gray38'), "aria-hidden": true }))),
             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: (0, exports.cx)('clear-icon'), children: react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }) }))),
+            value && onClear && (react_1.default.createElement("button", { onClick: onClear, "aria-label": '\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C', "data-testid": 'search-bar:clear-icon', className: (0, exports.cx)('clear-button') },
+                react_1.default.createElement(cross_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true })))),
         Boolean(endButtons.length) && (react_1.default.createElement(react_1.default.Fragment, null,
             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 })))))),

package/mobile/components/search-bar/search-bar.module.scss

@@ -1,13 +1,9 @@
 @import 'node_modules/@sima-land/ui-nucleons/colors';
 
-.wrapper {
+.root {
   display: flex;
 }
 
-.search-cancel {
-  margin-left: 16px;
-}
-
 .input-wrapper {
   display: inline-flex;
   position: relative;
@@ -16,14 +12,11 @@
   width: 100%;
   background-color: $basic-gray4;
   border-radius: 8px;
-  padding: 0 0 0 12px;
+  padding: 0 12px;
   &:focus-within {
-    .clear-icon {
+    .clear-button {
       display: flex;
     }
-    .input-container {
-      padding-right: 0;
-    }
     .description-container {
       display: none;
     }
@@ -42,12 +35,12 @@
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding-right: 12px;
 }
 
 .search-field {
   background-color: transparent;
   margin: 0;
+  padding: 0;
   border: 0;
   outline: 0;
   line-height: 24px;
@@ -76,6 +69,7 @@
   max-width: 50%;
   display: flex;
   justify-content: flex-end;
+  margin-left: 12px;
 }
 
 .description {
@@ -84,13 +78,16 @@
   text-overflow: ellipsis;
 }
 
-.clear-icon {
+.clear-button {
   position: relative;
   align-items: center;
   justify-content: center;
-  padding: 0 12px;
+  padding: 0;
+  margin-left: 12px;
   display: none;
   cursor: pointer;
+  background: transparent;
+  border: 0;
 }
 
 .hidden {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sima-land/moleculas",
-  "version": "14.2.0",
+  "version": "15.1.0",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -25,7 +25,7 @@
     "prettier:check": "prettier --check \"./src/**/*.{js,jsx,ts,tsx,css,scss}\" --loglevel error"
   },
   "dependencies": {
-    "@sima-land/ui-nucleons": "^43.1.0",
+    "@sima-land/ui-nucleons": "^44.0.1",
     "@sima-land/ui-quarks": "^2.2.0",
     "classnames": "^2.3.1",
     "date-fns": "^2.26.0",