@sima-land/moleculas 12.3.0 → 13.0.0

package/mobile/components/garland-calculator-button/index.js

@@ -5,25 +5,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GarlandCalculatorButton = void 0;
 const react_1 = __importDefault(require("react"));
-const box_1 = require("@sima-land/ui-nucleons/box");
-const text_1 = require("@sima-land/ui-nucleons/text");
 const link_1 = require("@sima-land/ui-nucleons/link");
-const tree_in_circle_svg_1 = __importDefault(require("./tree-in-circle.svg"));
-const bind_1 = __importDefault(require("classnames/bind"));
+const plate_1 = require("@sima-land/ui-nucleons/plate");
+const spruce_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/spruce"));
+const classnames_1 = __importDefault(require("classnames"));
 const garland_calculator_button_module_scss_1 = __importDefault(require("./garland-calculator-button.module.scss"));
-const cx = bind_1.default.bind(garland_calculator_button_module_scss_1.default);
 /**
  * Компонент плашки с кнопкой открытия гирлянды.
  * @param props Свойства компонента.
  * @return Элемент.
  */
-const GarlandCalculatorButton = ({ className, onClick }) => (react_1.default.createElement("div", { className: cx('wrapper', className) },
-    react_1.default.createElement(box_1.Box, { padding: 6, display: 'flex', justifyContent: 'between' },
-        react_1.default.createElement(box_1.Box, { paddingRight: 5 },
-            react_1.default.createElement(text_1.Text, { size: 14, lineHeight: 20, weight: 400 }, "\u0421\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0435\u0442\u0440\u043E\u0432 \u0433\u0438\u0440\u043B\u044F\u043D\u0434\u044B \u043F\u043E\u043A\u0443\u043F\u0430\u0442\u044C? \u041F\u043E\u043C\u043E\u0436\u0435\u043C \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043E\u043F\u0442\u0438\u043C\u0430\u043B\u044C\u043D\u0443\u044E \u0434\u043B\u0438\u043D\u0443"),
-            react_1.default.createElement(box_1.Box, { marginTop: 3 },
-                react_1.default.createElement(link_1.Link, { onClick: onClick }, "\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C"))),
-        react_1.default.createElement(box_1.Box, { flex: 'none' },
-            react_1.default.createElement(tree_in_circle_svg_1.default, { width: 48, height: 48 })))));
+const GarlandCalculatorButton = ({ className, onClick }) => (react_1.default.createElement(plate_1.Plate, { rounds: 'm', shadow: 'z3', className: (0, classnames_1.default)(garland_calculator_button_module_scss_1.default.root, className) },
+    react_1.default.createElement("div", { className: garland_calculator_button_module_scss_1.default.main },
+        react_1.default.createElement("div", { className: garland_calculator_button_module_scss_1.default.text }, "\u0421\u043A\u043E\u043B\u044C\u043A\u043E \u043C\u0435\u0442\u0440\u043E\u0432 \u0433\u0438\u0440\u043B\u044F\u043D\u0434\u044B \u043F\u043E\u043A\u0443\u043F\u0430\u0442\u044C? \u041F\u043E\u043C\u043E\u0436\u0435\u043C \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C \u043E\u043F\u0442\u0438\u043C\u0430\u043B\u044C\u043D\u0443\u044E \u0434\u043B\u0438\u043D\u0443"),
+        react_1.default.createElement(link_1.Link, { pseudo: true, onClick: onClick }, "\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044C")),
+    react_1.default.createElement("div", { className: garland_calculator_button_module_scss_1.default.icon },
+        react_1.default.createElement(spruce_1.default, { className: garland_calculator_button_module_scss_1.default.svg }))));
 exports.GarlandCalculatorButton = GarlandCalculatorButton;
-exports.default = exports.GarlandCalculatorButton;

package/mobile/components/item-image/index.d.ts

@@ -10,12 +10,12 @@ export interface ItemImageProps {
         onClick?: React.MouseEventHandler;
     };
     className?: string;
-    onClick: React.MouseEventHandler;
-    badges: BadgeProps[];
+    onClick?: React.MouseEventHandler;
+    badges?: BadgeProps[];
     withBlur?: boolean;
     itemUrl?: string;
     isFetchingWishItems?: boolean;
-    onLoadImage: (duration: number) => void;
+    onLoadImage?: (duration: number) => void;
 }
 /**
  * Компонент изображения товара с избранным.
@@ -29,7 +29,7 @@ export interface ItemImageProps {
  * @param props.withBlur Добавление блюра.
  * @param props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
  */
-export default class ItemImage extends Component<ItemImageProps> {
+export declare class ItemImage extends Component<ItemImageProps> {
     bootStartTime: number;
     image: any;
     /**

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

@@ -22,14 +22,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemImage = void 0;
 const react_1 = __importStar(require("react"));
 const link_1 = require("@sima-land/ui-nucleons/link");
-const lodash_1 = require("lodash");
-const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
-const bind_1 = __importDefault(require("classnames/bind"));
 const badge_list_1 = require("../../../common/components/badge-list");
-const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
+const badge_1 = require("../../../common/components/badge");
 const wish_button_1 = require("../../../common/components/wish-button");
+const eighteen_plus_svg_1 = __importDefault(require("../../../common/icons/eighteen-plus.svg"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const item_image_module_scss_1 = __importDefault(require("./item-image.module.scss"));
 const cx = bind_1.default.bind(item_image_module_scss_1.default);
 /**
  * Компонент изображения товара с избранным.
@@ -58,7 +59,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,9 +68,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)) {
-            onLoadImage(Date.now() - this.bootStartTime);
-        }
+        img && img.complete && (onLoadImage === null || onLoadImage === void 0 ? void 0 : onLoadImage(Date.now() - this.bootStartTime));
     }
     /**
      * @inheritdoc
@@ -78,12 +77,12 @@ class ItemImage extends react_1.Component {
         const { src, alt, hasWishButton, wishProps, className, onClick, badges, withBlur, itemUrl, isFetchingWishItems, } = this.props;
         return (react_1.default.createElement("div", { className: cx('wrapper', className) },
             withBlur && (react_1.default.createElement("div", { className: cx('with-blur') },
-                react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124 }))),
+                react_1.default.createElement(eighteen_plus_svg_1.default, { width: 124, height: 124, opacity: '0.3' }))),
             react_1.default.createElement("div", { className: cx('image-wrapper') },
                 react_1.default.createElement(link_1.Link, { href: itemUrl }, withBlur ? (react_1.default.createElement("div", { className: cx('with-filter-blur'), children: this.getImage({ src, alt }, onClick) })) : (this.getImage({ src, alt }, onClick)))),
             Array.isArray(badges) && Boolean(badges.length) && !withBlur && (react_1.default.createElement("div", { className: cx('badges') },
-                react_1.default.createElement(badge_list_1.BadgeList, { items: badges }))),
+                react_1.default.createElement(badge_list_1.BadgeList, null, badges.map((badge, index) => (react_1.default.createElement(badge_1.Badge, Object.assign({ key: index }, badge))))))),
             hasWishButton && (react_1.default.createElement(wish_button_1.WishButton, { checked: wishProps === null || wishProps === void 0 ? void 0 : wishProps.isWished, className: wishProps === null || wishProps === void 0 ? void 0 : wishProps.className, onClick: wishProps === null || wishProps === void 0 ? void 0 : wishProps.onClick, disabled: isFetchingWishItems }))));
     }
 }
-exports.default = ItemImage;
+exports.ItemImage = ItemImage;

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/person-screen/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import { ScreenProps } from '@sima-land/ui-nucleons/screen';
-export interface PersonScreenProps extends ScreenProps {
+export interface PersonScreenProps {
     name?: string;
     appointment?: string;
     photoUrl?: string;
@@ -11,6 +10,7 @@ export interface PersonScreenProps extends ScreenProps {
     secondPhoneHref?: string;
     secondPhoneText?: string;
     arbitraryLinkProps?: React.AnchorHTMLAttributes<HTMLAnchorElement>;
+    onClose?: () => void;
 }
 /**
  * Компонент экрана персональных данных.
@@ -27,7 +27,7 @@ export interface PersonScreenProps extends ScreenProps {
  * @param props.arbitraryLinkProps Свойства произвольной ссылки.
  * @return Элемент.
  */
-export declare const PersonScreen: ({ name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, ...screenProps }: PersonScreenProps) => JSX.Element;
+export declare const PersonScreen: ({ name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose, ...screenProps }: PersonScreenProps) => JSX.Element;
 /**
  * Компонент блока-ссылки для связи.
  * @param props Свойства.

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

@@ -44,20 +44,22 @@ const cx = bind_1.default.bind(person_screen_module_scss_1.default);
  * @return Элемент.
  */
 const PersonScreen = (_a) => {
-    var { name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps } = _a, screenProps = __rest(_a, ["name", "appointment", "photoUrl", "email", "skype", "phoneHref", "phoneText", "secondPhoneHref", "secondPhoneText", "arbitraryLinkProps"]);
-    return (react_1.default.createElement(screen_1.Screen, Object.assign({}, screenProps, { withDivideHeader: false }),
-        react_1.default.createElement("div", { className: cx('avatar', 'small') },
-            react_1.default.createElement(user_1.UserAvatar, { size: 64, title: name, imageUrl: photoUrl })),
-        react_1.default.createElement("div", { className: cx('avatar', 'big') },
-            react_1.default.createElement(user_1.UserAvatar, { size: 104, title: name, imageUrl: photoUrl })),
-        react_1.default.createElement("span", { className: cx('name') }, name),
-        Boolean(appointment) && react_1.default.createElement("span", { className: cx('appointment') }, appointment),
-        arbitraryLinkProps && (react_1.default.createElement("div", { className: cx('profile-url'), children: react_1.default.createElement("a", Object.assign({ className: cx('link') }, arbitraryLinkProps)) })),
-        react_1.default.createElement("div", { className: cx('items', borders_1.InnerBorder.bottom) },
-            Boolean(email) && (react_1.default.createElement(exports.CommunicateLink, { href: `mailto:${email}`, primaryText: email, secondaryText: '\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430', icon: react_1.default.createElement(mail_1.default, null) })),
-            Boolean(skype) && (react_1.default.createElement(exports.CommunicateLink, { href: `skype:${skype}?chat`, primaryText: skype, secondaryText: 'Skype', icon: react_1.default.createElement(skype_1.default, null) })),
-            Boolean(phoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: phoneHref || undefined, primaryText: phoneText, secondaryText: '\u0420\u0430\u0431\u043E\u0447\u0438\u0439', icon: react_1.default.createElement(phone_1.default, null) })),
-            Boolean(secondPhoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: secondPhoneHref || undefined, primaryText: secondPhoneText, secondaryText: '\u0421\u043E\u0442\u043E\u0432\u044B\u0439', icon: react_1.default.createElement(mobile_1.default, null) })))));
+    var { name, appointment, photoUrl, email, skype, phoneHref, phoneText, secondPhoneHref, secondPhoneText, arbitraryLinkProps, onClose } = _a, screenProps = __rest(_a, ["name", "appointment", "photoUrl", "email", "skype", "phoneHref", "phoneText", "secondPhoneHref", "secondPhoneText", "arbitraryLinkProps", "onClose"]);
+    return (react_1.default.createElement(screen_1.Screen, Object.assign({}, screenProps),
+        react_1.default.createElement(screen_1.Screen.Header, { onClose: onClose }),
+        react_1.default.createElement(screen_1.Screen.Body, null,
+            react_1.default.createElement("div", { className: cx('avatar', 'small') },
+                react_1.default.createElement(user_1.UserAvatar, { size: 64, title: name, imageUrl: photoUrl })),
+            react_1.default.createElement("div", { className: cx('avatar', 'big') },
+                react_1.default.createElement(user_1.UserAvatar, { size: 104, title: name, imageUrl: photoUrl })),
+            react_1.default.createElement("span", { className: cx('name') }, name),
+            Boolean(appointment) && react_1.default.createElement("span", { className: cx('appointment') }, appointment),
+            arbitraryLinkProps && (react_1.default.createElement("div", { className: cx('profile-url'), children: react_1.default.createElement("a", Object.assign({ className: cx('link') }, arbitraryLinkProps)) })),
+            react_1.default.createElement("div", { className: cx('items', borders_1.InnerBorder.bottom) },
+                Boolean(email) && (react_1.default.createElement(exports.CommunicateLink, { href: `mailto:${email}`, primaryText: email, secondaryText: '\u042D\u043B\u0435\u043A\u0442\u0440\u043E\u043D\u043D\u0430\u044F \u043F\u043E\u0447\u0442\u0430', icon: react_1.default.createElement(mail_1.default, null) })),
+                Boolean(skype) && (react_1.default.createElement(exports.CommunicateLink, { href: `skype:${skype}?chat`, primaryText: skype, secondaryText: 'Skype', icon: react_1.default.createElement(skype_1.default, null) })),
+                Boolean(phoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: phoneHref || undefined, primaryText: phoneText, secondaryText: '\u0420\u0430\u0431\u043E\u0447\u0438\u0439', icon: react_1.default.createElement(phone_1.default, null) })),
+                Boolean(secondPhoneText) && (react_1.default.createElement(exports.CommunicateLink, { href: secondPhoneHref || undefined, primaryText: secondPhoneText, secondaryText: '\u0421\u043E\u0442\u043E\u0432\u044B\u0439', icon: react_1.default.createElement(mobile_1.default, null) }))))));
 };
 exports.PersonScreen = PersonScreen;
 /**

package/mobile/components/product-actions-alert/index.d.ts

@@ -11,11 +11,8 @@ export interface ProductActionsAlertProps {
     onClose?: React.MouseEventHandler;
 }
 /**
- * Компонент действий.
- * @param props Свойства компонента.
- * @param props.buttons Конфигурация кнопок.
- * @param props.alertProps Свойства компонента Alert.
- * @param props.onClose Обработчик закрытия.
+ * Alert действий с товаром.
+ * @param props Свойства.
  * @return Элемент.
  */
 export declare const ProductActionsAlert: ({ buttons, alertProps, onClose }: ProductActionsAlertProps) => JSX.Element;

package/mobile/components/product-actions-alert/index.js

@@ -12,11 +12,8 @@ const bind_1 = __importDefault(require("classnames/bind"));
 const product_actions_alert_module_scss_1 = __importDefault(require("./product-actions-alert.module.scss"));
 const cx = bind_1.default.bind(product_actions_alert_module_scss_1.default);
 /**
- * Компонент действий.
- * @param props Свойства компонента.
- * @param props.buttons Конфигурация кнопок.
- * @param props.alertProps Свойства компонента Alert.
- * @param props.onClose Обработчик закрытия.
+ * Alert действий с товаром.
+ * @param props Свойства.
  * @return Элемент.
  */
 const ProductActionsAlert = ({ buttons, alertProps, onClose }) => (react_1.default.createElement(alert_1.Alert, Object.assign({}, alertProps, { footer: react_1.default.createElement(clean_buttons_1.Clean.Group, null,

package/mobile/components/product-slider/index.d.ts

@@ -1,20 +1,17 @@
 import React from 'react';
-import { ProductSliderItem } from './item';
+import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
+export declare type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
 export interface ProductSliderProps {
     /** Товары. */
-    children?: React.ReactNode;
+    children?: ItemElement | ItemElement[];
     /** Функция, вызываемая при попадании компонента в поле видимости. */
     onInViewport?: () => void;
     /** Функция, инициализирующая загрузку рекомендаций. */
     onNeedRequest?: () => void;
 }
-export interface ProductSliderComponent {
-    (props: ProductSliderProps): JSX.Element;
-    Item: typeof ProductSliderItem;
-}
 /**
- * Компонент мобильного слайдера рекомендованных товаров.
- * @param props Свойства компонента.
+ * Слайдер товаров.
+ * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductSlider: ProductSliderComponent;
+export declare const ProductSlider: ({ children, onInViewport, onNeedRequest }: ProductSliderProps) => JSX.Element;

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

@@ -18,32 +18,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.ProductSlider = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../../../desktop/components/product-carousel/utils");
-const item_1 = require("./item");
 const touch_slider_1 = require("@sima-land/ui-nucleons/touch-slider");
-const utils_2 = require("./utils");
+const product_info_1 = require("../../../common/components/product-info");
+const product_slider_module_scss_1 = __importDefault(require("./product-slider.module.scss"));
 /**
- * Компонент мобильного слайдера рекомендованных товаров.
- * @param props Свойства компонента.
+ * Слайдер товаров.
+ * @param props Свойства.
  * @return Элемент.
  */
-const ProductSlider = ({ children, onInViewport, onNeedRequest, }) => {
-    const rootRef = react_1.useRef(null);
-    const [mounted, setMounted] = react_1.useState(false);
+const ProductSlider = ({ children, onInViewport, onNeedRequest }) => {
+    const rootRef = (0, react_1.useRef)(null);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    utils_1.useViewport(rootRef, onNeedRequest, {
+    (0, utils_1.useViewport)(rootRef, onNeedRequest, {
         rootMargin: '200px 0px 200px 0px',
     });
     // сообщаем, когда компонент попадет в зону видимости
-    utils_1.useViewport(rootRef, onInViewport);
-    // разрешаем загружать картинки только после монтирования
-    react_1.useEffect(() => setMounted(true), []);
+    (0, utils_1.useViewport)(rootRef, onInViewport);
     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(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));
+            return list;
+        }, []))));
 };
 exports.ProductSlider = ProductSlider;
-exports.ProductSlider.Item = item_1.ProductSliderItem;

package/mobile/components/product-slider/{item.module.scss → product-slider.module.scss}

@@ -1,7 +1,6 @@
-@use 'sass:math';
 @use 'node_modules/@sima-land/ui-nucleons/breakpoints';
 
-.root {
+.item {
   position: relative;
   flex-shrink: 0;
   width: 160px;
@@ -12,13 +11,3 @@
     margin-right: 16px;
   }
 }
-
-.favorite-button {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-}
-
-.footer {
-  margin-top: 12px;
-}

package/mobile/components/pseudo-input/index.d.ts

@@ -1,14 +1,11 @@
 import React from 'react';
-export interface Props {
+export interface PseudoInputProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Текст, введенный в поле. */
     text?: string;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
 }
 /**
- * Компонент псевдо-инпута поиска.
- * @param props Пропсы.
- * @param props.text Текст подсказки.
- * @param props.onClick Обработчик клика.
+ * Псевдо-поле поиска.
+ * @param props Свойства.
  * @return Элемент.
  */
-declare const PseudoInput: ({ text, onClick }: Props) => JSX.Element;
-export default PseudoInput;
+export declare const PseudoInput: ({ text, className, ...rest }: PseudoInputProps) => JSX.Element;

package/mobile/components/pseudo-input/index.js

@@ -1,23 +1,34 @@
 "use strict";
+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.PseudoInput = void 0;
 const react_1 = __importDefault(require("react"));
 const bind_1 = __importDefault(require("classnames/bind"));
 const search_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/search"));
 const pseudo_input_module_scss_1 = __importDefault(require("./pseudo-input.module.scss"));
-const colors_1 = require("@sima-land/ui-nucleons/colors");
 const cx = bind_1.default.bind(pseudo_input_module_scss_1.default);
 /**
- * Компонент псевдо-инпута поиска.
- * @param props Пропсы.
- * @param props.text Текст подсказки.
- * @param props.onClick Обработчик клика.
+ * Псевдо-поле поиска.
+ * @param props Свойства.
  * @return Элемент.
  */
-const PseudoInput = ({ text, onClick }) => (react_1.default.createElement("div", { onClick: onClick, className: cx('input'), role: 'button' },
-    react_1.default.createElement("span", { className: cx('icon') },
-        react_1.default.createElement(search_1.default, { fill: colors_1.COLORS.get('gray38'), "aria-hidden": 'true' })),
-    react_1.default.createElement("span", { className: cx('text') }, text)));
-exports.default = PseudoInput;
+const PseudoInput = (_a) => {
+    var { text, className } = _a, rest = __rest(_a, ["text", "className"]);
+    return (react_1.default.createElement("div", Object.assign({}, rest, { role: 'button', className: cx('input', className) }),
+        react_1.default.createElement(search_1.default, { className: cx('icon'), "aria-hidden": 'true' }),
+        react_1.default.createElement("span", { className: cx('text') }, text)));
+};
+exports.PseudoInput = PseudoInput;

package/mobile/components/pseudo-input/pseudo-input.module.scss

@@ -1,21 +1,18 @@
-@import 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .input {
-  box-sizing: border-box;
   display: flex;
   align-items: center;
-  width: 100%;
   height: 40px;
-  margin-top: 24px;
   padding: 0 16px 0 12px;
   border-radius: 8px;
-  background-color: $gray4;
+  background-color: colors.$gray4;
 }
 
 .icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  display: block;
+  flex-shrink: 0;
+  fill: colors.$gray38;
 }
 
 .text {
@@ -23,5 +20,5 @@
   margin-left: 12px;
   font-size: 16px;
   line-height: 24px;
-  color: $gray38;
+  color: colors.$gray38;
 }

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.d.ts

@@ -8,6 +8,7 @@ export interface SelectScreenProps {
     }) => React.ReactNode;
     isItemSelected?: (item: any) => boolean | void;
     onItemClick?: (item: any) => void;
+    onClose?: () => void;
 }
 /**
  * Экран выбора опции.
@@ -19,5 +20,4 @@ export interface SelectScreenProps {
  * @param props.onItemClick Сработает при клике на опцию.
  * @return Экран выбора опции.
  */
-declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, ...screenProps }: SelectScreenProps) => JSX.Element;
-export default SelectScreen;
+export declare const SelectScreen: ({ items, getItemName, displayItem, isItemSelected, onItemClick, onClose, }: SelectScreenProps) => JSX.Element;

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

@@ -1,19 +1,9 @@
 "use strict";
-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"));
 const lodash_1 = require("lodash");
 const prop_1 = __importDefault(require("lodash/fp/prop"));
@@ -33,17 +23,17 @@ const select_screen_module_scss_1 = __importDefault(require("./select-screen.mod
  * @param props.onItemClick Сработает при клике на опцию.
  * @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"]);
-    return (react_1.default.createElement(screen_1.Screen, Object.assign({ withDivideHeader: false }, screenProps),
+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 }),
+    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 }, 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 }),
                     isSelected && react_1.default.createElement(check_1.default, { fill: colors_1.COLORS.get('gray87') })));
-            })))));
-};
+            }))))));
+exports.SelectScreen = SelectScreen;
 /**
  * Выводит опцию в текстовом виде.
  * @param item Элемент списка.
@@ -52,4 +42,3 @@ const SelectScreen = (_a) => {
  * @return Опция в текстовом виде.
  */
 const displayOption = (item, { getItemName }) => (react_1.default.createElement(text_1.Text, { size: 16, lineHeight: 24, color: 'gray87', children: getItemName(item) }));
-exports.default = SelectScreen;