@sima-land/moleculas 13.0.0 → 13.1.3

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

@@ -3,7 +3,6 @@
   flex-wrap: wrap;
   line-height: 1;
   position: relative;
-  z-index: 2;
   overflow: hidden;
 }
 

package/common/components/product-info/product-info.module.scss

@@ -6,10 +6,20 @@
   max-width: 100%;
   margin-bottom: 8px;
   overflow: hidden;
-  aspect-ratio: 1 / 1;
+
+  // формируем соотношение сторон 1 / 1
+  &::before {
+    content: '';
+    display: block;
+    padding-top: 100%;
+    pointer-events: none;
+  }
 }
 
 .image-link {
+  position: absolute;
+  top: 0;
+  left: 0;
   display: block;
   height: 100%;
 }
@@ -19,12 +29,10 @@
   object-fit: contain;
   width: 100%;
   height: 100%;
-  &:not(.adult) {
+  &.adult {
     position: absolute;
     top: 0;
     left: 0;
-  }
-  &.adult {
     opacity: 0.2;
     filter: blur(24px);
     pointer-events: none;

package/desktop/components/modifiers/group/index.d.ts

@@ -2,22 +2,35 @@
 import React, { Component } from 'react';
 import { ModifierButtonProps, Modifier } from '../button';
 declare type ModifierPredicate<T> = (item: Modifier) => T;
-interface State {
+interface ModifiersGroupState {
     needShowAll: boolean;
     hasHiddenNodes: boolean;
     lastVisibleChildIndex: number | null;
 }
 export interface ModifiersGroupProps {
+    /** Список модификаторов. */
     items?: Modifier[];
+    /** Флаг необходимости отображения всех модификаторов. */
+    needShowAll?: boolean;
+    /** Будет вызвана при выборе модификатора, получит сам модификатор. */
     onSelectItem?: (item: Modifier, selected: boolean) => void;
+    /** Возвращает тип модификатора ("text" или "image", по умолчанию "text"). */
     getItemType?: ModifierPredicate<ModifierButtonProps['type']>;
+    /** Возвращает число с количеством модификатора (по умолчанию свойство "count"). */
     getItemCount?: ModifierPredicate<number>;
+    /** Возвращает цвет модификатора (по умолчанию свойство "color"). */
     getItemColor?: ModifierPredicate<string>;
+    /** Возвращает содержимое модификатора (по умолчанию свойство "content"). */
     getItemContent?: ModifierPredicate<string>;
+    /** Показывает, выбран ли модификатор (по умолчанию свойство "selected"). */
     isSelectedItem?: ModifierPredicate<boolean>;
+    /** Возвращает URL изображения модификатора (по умолчанию свойство "image"). */
     getItemImage?: ModifierPredicate<string>;
+    /** Имеет ли товар уценку. */
     isMarkdown?: ModifierPredicate<boolean>;
+    /** Сработает при нажатии на кнопку отображения всех модификаторов. */
     onClickShowAll?: () => void;
+    /** Идентификатор для систем автоматизированного тестирования. */
     'data-testid'?: string;
 }
 /**
@@ -27,24 +40,12 @@ export interface ModifiersGroupProps {
  */
 export declare const createHiddenNodeIndexFinder: (container: HTMLElement) => (childNode: HTMLElement) => boolean;
 /**
- * Возвращает компонент списка модификаторов.
- * @param {Object} props Свойства компонента.
- * @param {Array} props.items Список модификаторов.
- * @param {Function} [props.getItemType] Возвращает тип модификатора ("text" или "image", по умолчанию "text").
- * @param {Function} [props.getItemCount] Возвращает число с количеством модификатора (по умолчанию свойство "count").
- * @param {Function} [props.getItemColor] Возвращает цвет модификатора (по умолчанию свойство "color").
- * @param {Function} [props.getItemContent] Возвращает содержимое модификатора (по умолчанию свойство "content").
- * @param {Function} [props.isSelectedItem] Показывает, выбран ли модификатор (по умолчанию свойство "selected").
- * @param {Function} [props.onSelectItem] Будет вызвана при выборе модификатора, получит сам модификатор.
- * @param {Function} [props.getItemImage] Возвращает URL изображения модификатора (по умолчанию свойство "image").
- * @param {boolean} [props.needShowAll] Флаг необходимости отображения всех модификаторов.
- * @param {Function} [props.onClickShowAll] Сработает при нажатии на кнопку отображения всех модификаторов.
- * @param {Function} [props.isMarkdown] Имеет ли товар уценку.
+ * Компонент списка модификаторов.
  */
-export declare class ModifiersGroup extends Component<ModifiersGroupProps, State> {
+export declare class ModifiersGroup extends Component<ModifiersGroupProps, ModifiersGroupState> {
     removeGlobalListener: any;
     state: {
-        needShowAll: any;
+        needShowAll: boolean;
         hasHiddenNodes: boolean;
         lastVisibleChildIndex: null;
     };

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

@@ -56,19 +56,7 @@ const defaultIsSelectedItem = (0, prop_1.default)('selected');
 const defaultGetItemImage = (0, prop_1.default)('image');
 const defaultGetIsMarkdown = (0, prop_1.default)('isMarkdown');
 /**
- * Возвращает компонент списка модификаторов.
- * @param {Object} props Свойства компонента.
- * @param {Array} props.items Список модификаторов.
- * @param {Function} [props.getItemType] Возвращает тип модификатора ("text" или "image", по умолчанию "text").
- * @param {Function} [props.getItemCount] Возвращает число с количеством модификатора (по умолчанию свойство "count").
- * @param {Function} [props.getItemColor] Возвращает цвет модификатора (по умолчанию свойство "color").
- * @param {Function} [props.getItemContent] Возвращает содержимое модификатора (по умолчанию свойство "content").
- * @param {Function} [props.isSelectedItem] Показывает, выбран ли модификатор (по умолчанию свойство "selected").
- * @param {Function} [props.onSelectItem] Будет вызвана при выборе модификатора, получит сам модификатор.
- * @param {Function} [props.getItemImage] Возвращает URL изображения модификатора (по умолчанию свойство "image").
- * @param {boolean} [props.needShowAll] Флаг необходимости отображения всех модификаторов.
- * @param {Function} [props.onClickShowAll] Сработает при нажатии на кнопку отображения всех модификаторов.
- * @param {Function} [props.isMarkdown] Имеет ли товар уценку.
+ * Компонент списка модификаторов.
  */
 class ModifiersGroup extends react_1.Component {
     constructor() {

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

@@ -37,9 +37,13 @@ exports.reduceHoverInfo = exports.reduceBaseInfo = exports.ProductCard = exports
 const react_1 = __importStar(require("react"));
 const product_info_1 = require("../../../common/components/product-info");
 const plate_1 = require("@sima-land/ui-nucleons/plate");
+const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
 const classnames_1 = __importDefault(require("classnames"));
 const product_card_module_scss_1 = __importDefault(require("./product-card.module.scss"));
-exports.HoverCard = (0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' }))));
+exports.HoverCard = (0, react_1.forwardRef)((props, ref) => {
+    const layer = (0, layer_1.useLayer)() + 1;
+    return (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { zIndex: layer }), ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' })));
+});
 const ProductCard = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [hovered, toggle] = (0, react_1.useState)(false);

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

@@ -31,6 +31,7 @@ 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"));
 const product_carousel_module_scss_1 = __importDefault(require("./product-carousel.module.scss"));
+const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
 const cx = bind_1.default.bind(product_carousel_module_scss_1.default);
 const getSizeClasses = (size = {}) => [
     `size-xs-${size.xs || 4}`,
@@ -45,6 +46,7 @@ const getSizeClasses = (size = {}) => [
  * @return Элемент.
  */
 const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) => {
+    const layer = (0, layer_1.useLayer)();
     const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
     const cardShow = (0, utils_1.useAllowFlag)();
     const needBigArrows = (0, media_1.useMedia)('(min-width: 1600px)');
@@ -73,7 +75,7 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
             controlProps: {
                 size: needBigArrows ? 'l' : 's',
                 style: {
-                    zIndex: 1,
+                    zIndex: layer + 2,
                     top: `${itemWidth / 2}px`,
                 },
             },

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useChildWidth = exports.useAllowFlag = exports.useViewport = 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 отслеживаемого элемента.
@@ -13,12 +14,14 @@ const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
  * @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 && callback && callback();
+                    entry.target === element && entry.isIntersecting && fn && fn();
                     break;
                 }
             }, options);

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LayoutProps } from '@sima-land/ui-nucleons/layout';
 export interface SelectScreenProps {
     items?: any[];
     getItemName?: (item: any) => string;
@@ -8,10 +9,14 @@ export interface SelectScreenProps {
     }) => React.ReactNode;
     isItemSelected?: (item: any) => boolean | void;
     onItemClick?: (item: any) => void;
+    title?: string;
+    subtitle?: string;
+    onBack?: () => void;
     onClose?: () => void;
 }
 /**
  * Экран выбора опции.
+ * @deprecated Вместо SelectScreen используйте SelectScreenLayout и SelectScreenOption вместе с Screen.
  * @param props Свойства. Поддерживаются свойства Screen.
  * @param props.items Список опций.
  * @param props.getItemName Вернет имя опции.
@@ -20,4 +25,8 @@ export interface SelectScreenProps {
  * @param props.onItemClick Сработает при клике на опцию.
  * @return Экран выбора опции.
  */
-export declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, onClose, }: SelectScreenProps) => JSX.Element;
+export declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, title, subtitle, onBack, onClose, }: SelectScreenProps) => JSX.Element;
+export declare const SelectScreenLayout: ({ children, ...props }: LayoutProps) => JSX.Element;
+export declare const SelectScreenOption: ({ children, className, selected, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    selected?: boolean | undefined;
+}) => JSX.Element;

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

@@ -1,10 +1,40 @@
 "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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectScreen = void 0;
-const react_1 = __importDefault(require("react"));
+exports.SelectScreenOption = exports.SelectScreenLayout = exports.SelectScreen = void 0;
+const react_1 = __importStar(require("react"));
 const lodash_1 = require("lodash");
 const prop_1 = __importDefault(require("lodash/fp/prop"));
 const screen_1 = require("@sima-land/ui-nucleons/screen");
@@ -12,9 +42,11 @@ const text_1 = require("@sima-land/ui-nucleons/text");
 const colors_1 = require("@sima-land/ui-nucleons/colors");
 const layout_1 = require("@sima-land/ui-nucleons/layout");
 const check_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/check"));
+const classnames_1 = __importDefault(require("classnames"));
 const select_screen_module_scss_1 = __importDefault(require("./select-screen.module.scss"));
 /**
  * Экран выбора опции.
+ * @deprecated Вместо SelectScreen используйте SelectScreenLayout и SelectScreenOption вместе с Screen.
  * @param props Свойства. Поддерживаются свойства Screen.
  * @param props.items Список опций.
  * @param props.getItemName Вернет имя опции.
@@ -23,19 +55,32 @@ const select_screen_module_scss_1 = __importDefault(require("./select-screen.mod
  * @param props.onItemClick Сработает при клике на опцию.
  * @return Экран выбора опции.
  */
-const SelectScreen = ({ items, getItemName = (0, prop_1.default)('name'), displayItem = displayOption, isItemSelected = lodash_1.noop, onItemClick, onClose, }) => (react_1.default.createElement(screen_1.Screen, null,
-    onClose && react_1.default.createElement(screen_1.Screen.Header, { onClose: onClose }),
+const SelectScreen = ({ items, getItemName = (0, prop_1.default)('name'), displayItem = displayOption, isItemSelected = lodash_1.noop, onItemClick, title, subtitle, onBack, onClose, }) => (react_1.default.createElement(screen_1.Screen, null,
+    react_1.default.createElement(screen_1.Screen.Header, { title: title, subtitle: subtitle, onBack: onBack, onClose: onClose }),
     react_1.default.createElement(screen_1.Screen.Body, null,
-        react_1.default.createElement(layout_1.MobileLayout, { disabledOn: ['mxs', 'ms'] },
-            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 }),
-                    isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
-            }))))));
+        react_1.default.createElement(exports.SelectScreenLayout, { style: { padding: '16px 0' } }, (0, lodash_1.map)(items, (item, index) => {
+            const isSelected = Boolean(isItemSelected(item));
+            return (react_1.default.createElement(exports.SelectScreenOption, { key: index, onClick: () => onItemClick && onItemClick(item) },
+                displayItem(item, { getItemName, isSelected }),
+                isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
+        })))));
 exports.SelectScreen = SelectScreen;
+const SelectScreenLayout = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(layout_1.MobileLayout, Object.assign({}, props, { disabledOn: ['mxs', 'ms'] }),
+        react_1.default.createElement("div", { className: select_screen_module_scss_1.default.container }, react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === exports.SelectScreenOption))));
+};
+exports.SelectScreenLayout = SelectScreenLayout;
+const SelectScreenOption = (_a) => {
+    var { children, className, selected } = _a, props = __rest(_a, ["children", "className", "selected"]);
+    return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className), "data-testid": 'select-screen:option' }),
+        children,
+        selected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
+};
+exports.SelectScreenOption = SelectScreenOption;
 /**
  * Выводит опцию в текстовом виде.
+ * @deprecated
  * @param item Элемент списка.
  * @param options Опции вывода.
  * @param options.getItemName Вернет имя опции.

package/mobile/components/select-screen/select-screen.module.scss

@@ -3,7 +3,6 @@
 
 .container {
   --gutter: 24px;
-  padding: 16px 0;
   margin: 0 auto;
   max-width: calc((var(--gutter) * 5) + ((var(--layoutWidth) - (var(--gutter) * 7)) * 6 / 8));
 
@@ -22,6 +21,9 @@
   justify-content: space-between;
   width: 100%;
   padding: 16px;
+  font-size: 16px;
+  line-height: 24px;
+  height: 48px;
   margin: 0;
   border: 0;
   outline: 0;

package/package.json

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