@sima-land/moleculas 16.0.0-alpha.2 → 16.0.0-alpha.21

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

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

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

@@ -0,0 +1,37 @@
+"use strict";
+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 jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const touch_slider_1 = require("@sima-land/ui-nucleons/touch-slider");
+const product_info_1 = require("../../../common/components/product-info");
+const product_slider_m_scss_1 = __importDefault(require("./product-slider.m.scss"));
+/**
+ * Слайдер товаров.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const ProductSlider = ({ children, onInViewport, onNeedRequest }) => {
+    const rootRef = (0, react_1.useRef)(null);
+    // инициируем загрузку данных, когда компонент почти попал в зону видимости
+    const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
+    (0, hooks_1.useIntersection)(rootRef, entry => {
+        entry.isIntersecting && (onNeedRequest === null || onNeedRequest === void 0 ? void 0 : onNeedRequest());
+    }, options);
+    // сообщаем, когда компонент попадет в зону видимости
+    (0, hooks_1.useIntersection)(rootRef, entry => {
+        entry.isIntersecting && (onInViewport === null || onInViewport === void 0 ? void 0 : onInViewport());
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: rootRef, "data-testid": 'product-slider:root', children: (0, jsx_runtime_1.jsx)(touch_slider_1.TouchSlider, { children: (0, jsx_runtime_1.jsx)(product_info_1.Parts.FooterContext.Provider, { value: { className: product_slider_m_scss_1.default.footer }, children: react_1.Children.toArray(children).reduce((list, item) => {
+                    (0, react_1.isValidElement)(item) &&
+                        item.type === product_info_1.ProductInfo &&
+                        list.push((0, jsx_runtime_1.jsx)("div", { className: product_slider_m_scss_1.default.item, "data-testid": 'product-slider:item', children: item }, item.key));
+                    return list;
+                }, []) }) }) }));
+};
+exports.ProductSlider = ProductSlider;
+//# sourceMappingURL=product-slider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"product-slider.js","sourceRoot":"","sources":["../../../../src/mobile/components/product-slider/product-slider.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAgF;AAChF,wDAA+D;AAC/D,sEAAkE;AAClE,0EAA+F;AAC/F,oFAA6C;AAe7C;;;;GAIG;AACI,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAsB,EAAE,EAAE;IAC7F,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE7C,2EAA2E;IAC3E,MAAM,OAAO,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,qBAAqB,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3E,IAAA,uBAAe,EACb,OAAO,EACP,KAAK,CAAC,EAAE;QACN,KAAK,CAAC,cAAc,KAAI,aAAa,aAAb,aAAa,uBAAb,aAAa,EAAI,CAAA,CAAC;IAC5C,CAAC,EACD,OAAO,CACR,CAAC;IAEF,qDAAqD;IACrD,IAAA,uBAAe,EAAC,OAAO,EAAE,KAAK,CAAC,EAAE;QAC/B,KAAK,CAAC,cAAc,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAA,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,gCAAK,GAAG,EAAE,OAAO,iBAAc,qBAAqB,YAClD,uBAAC,0BAAW,cACV,uBAAC,oBAAK,CAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,+BAAM,CAAC,MAAM,EAAE,YAC9D,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAiB,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;oBAChE,IAAA,sBAAc,EAAC,IAAI,CAAC;wBAClB,IAAI,CAAC,IAAI,KAAK,0BAAW;wBACzB,IAAI,CAAC,IAAI,CACP,gCAAoB,SAAS,EAAE,+BAAM,CAAC,IAAI,iBAAc,qBAAqB,YAC1E,IAAI,IADG,IAAI,CAAC,GAAG,CAEZ,CACP,CAAC;oBAEJ,OAAO,IAAI,CAAC;gBACd,CAAC,EAAE,EAAE,CAAC,GACuB,GACnB,GACV,CACP,CAAC;AACJ,CAAC,CAAC;AArCW,QAAA,aAAa,iBAqCxB"}

package/mobile/components/search-bar/index.d.ts

@@ -1,39 +1 @@
-import React from 'react';
-import { Token } from '@sima-land/ui-nucleons/colors';
-export declare const cx: (...args: import("classnames").ArgumentArray) => string;
-export interface ButtonProps {
-    text: string;
-    onClick: React.MouseEventHandler;
-    icon?: React.ElementType;
-    iconColor?: Token;
-}
-export interface SearchBarProps {
-    /** Поисковый Запрос. */
-    value?: string;
-    /** Вызовется при изменении поискового запроса. */
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-    /** Тип клавиатуры. */
-    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
-    /** Подсказка. */
-    placeholder?: string;
-    /** Вызовется при нажатии на кнопку очистки. */
-    onClear?: React.MouseEventHandler;
-    /** Кнопки(а) после поля. */
-    endButtons?: any[];
-    /** Кнопки(а) до поля. */
-    startButtons?: any[];
-    /** Признак наличия иконки поиска слева. */
-    withSearchIcon?: boolean;
-    /** Признак авто-фокуса. */
-    autoFocus?: boolean;
-    /** Описание в поле ввода. */
-    description?: string;
-    /** Ref для элемента текстового поля. */
-    inputRef?: React.MutableRefObject<HTMLInputElement | null>;
-}
-/**
- * Компонент поисковой строки.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const SearchBar: ({ value, onChange, inputMode, placeholder, onClear, endButtons, startButtons, withSearchIcon, autoFocus, description, inputRef: inputRefProp, }: SearchBarProps) => JSX.Element;
+export { type SearchBarProps, SearchBar } from './search-bar';

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

@@ -1,106 +1,6 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.SearchBar = exports.cx = void 0;
-const react_1 = __importStar(require("react"));
-const lodash_1 = require("lodash");
-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");
-const hooks_1 = require("@sima-land/ui-nucleons/hooks/");
-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);
-/**
- * Компонент поисковой строки.
- * @param props Свойства.
- * @return Элемент.
- */
-const SearchBar = ({ value, onChange, inputMode, placeholder = 'Поиск', onClear, endButtons = [], startButtons = [], withSearchIcon = true, autoFocus = true, description, inputRef: inputRefProp, }) => {
-    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;
-    (0, react_1.useImperativeHandle)(inputRefProp, () => inputRef.current);
-    (0, hooks_1.useOutsideClick)(dropdownRef, e => {
-        var _a;
-        !((_a = dropdownOpenerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleDropdown(false);
-    });
-    (0, react_1.useEffect)(() => needHideEndButtons
-        ? (0, on_1.default)(window, 'resize', (0, lodash_1.throttle)(() => toggleDropdown(false), 500))
-        : undefined, [needHideEndButtons]);
-    // eslint-disable-next-line require-jsdoc
-    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'), 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)))),
-            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 })))))),
-            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: (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);
-                        }, children: text }))))))))))));
-};
-exports.SearchBar = SearchBar;
-/**
- * Компонент кнопки.
- * @param props Свойства.
- * @param props.text Текст кнопки.
- * @param props.onClick Обработчик клика.
- * @param props.icon Иконка.
- * @param props.iconColor Цвет иконки.
- * @return Элемент.
- */
-const Button = (0, react_1.forwardRef)(function Button({ text, icon: Icon, iconColor = 'basic-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));
-});
+exports.SearchBar = void 0;
+var search_bar_1 = require("./search-bar");
+Object.defineProperty(exports, "SearchBar", { enumerable: true, get: function () { return search_bar_1.SearchBar; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mobile/components/search-bar/index.ts"],"names":[],"mappings":";;;AAAA,2CAA8D;AAAhC,uGAAA,SAAS,OAAA"}

package/mobile/components/search-bar/search-bar.d.ts

@@ -0,0 +1,39 @@
+import { ElementType, MouseEventHandler, ChangeEventHandler, MutableRefObject } from 'react';
+import { Token } from '@sima-land/ui-nucleons/colors';
+export declare const cx: (...args: import("classnames").ArgumentArray) => string;
+export interface ButtonProps {
+    text: string;
+    onClick: MouseEventHandler;
+    icon?: ElementType;
+    iconColor?: Token;
+}
+export interface SearchBarProps {
+    /** Поисковый Запрос. */
+    value?: string;
+    /** Вызовется при изменении поискового запроса. */
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    /** Тип клавиатуры. */
+    inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
+    /** Подсказка. */
+    placeholder?: string;
+    /** Вызовется при нажатии на кнопку очистки. */
+    onClear?: MouseEventHandler;
+    /** Кнопки(а) после поля. */
+    endButtons?: any[];
+    /** Кнопки(а) до поля. */
+    startButtons?: any[];
+    /** Признак наличия иконки поиска слева. */
+    withSearchIcon?: boolean;
+    /** Признак авто-фокуса. */
+    autoFocus?: boolean;
+    /** Описание в поле ввода. */
+    description?: string;
+    /** Ref для элемента текстового поля. */
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+}
+/**
+ * Компонент поисковой строки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const SearchBar: ({ value, onChange, inputMode, placeholder, onClear, endButtons, startButtons, withSearchIcon, autoFocus, description, inputRef: inputRefProp, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,64 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchBar = exports.cx = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+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");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const helpers_1 = require("@sima-land/ui-nucleons/helpers");
+const CircleCross_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/CircleCross"));
+const Magnifier_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Stroked/Magnifier"));
+const MoreVert_1 = __importDefault(require("@sima-land/ui-quarks/icons/24x24/Filled/MoreVert"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const search_bar_m_scss_1 = __importDefault(require("./search-bar.m.scss"));
+exports.cx = bind_1.default.bind(search_bar_m_scss_1.default);
+/**
+ * Компонент поисковой строки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+const SearchBar = ({ value, onChange, inputMode, placeholder = 'Поиск', onClear, endButtons = [], startButtons = [], withSearchIcon = true, autoFocus = true, description, inputRef: inputRefProp, }) => {
+    const [shownDropdown, toggleDropdown] = (0, react_2.useState)(false);
+    const inputRef = (0, react_2.useRef)(null);
+    const dropdownRef = (0, react_2.useRef)(null);
+    const dropdownOpenerRef = (0, react_2.useRef)(null);
+    const needHideEndButtons = endButtons.length > 1;
+    (0, react_2.useImperativeHandle)(inputRefProp, () => inputRef.current);
+    (0, hooks_1.useOutsideClick)(dropdownRef, e => {
+        var _a;
+        !((_a = dropdownOpenerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) && toggleDropdown(false);
+    });
+    (0, react_2.useEffect)(() => (needHideEndButtons ? (0, helpers_1.on)(window, 'resize', () => toggleDropdown(false)) : undefined), [needHideEndButtons]);
+    // eslint-disable-next-line require-jsdoc
+    const preventFieldBlur = e => {
+        if (inputRef.current &&
+            inputRef.current !== e.target && // не предотвращаем события на самом поле (например выделение текста)
+            document.activeElement === inputRef.current) {
+            e.preventDefault();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, exports.cx)('root'), children: [Boolean(startButtons.length) && ((0, jsx_runtime_1.jsx)("div", { className: (0, exports.cx)('before-field'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, exports.cx)('buttons-container'), children: startButtons.map((props, index) => ((0, react_1.createElement)(Button, { ...props, key: index }))) }) })), (0, jsx_runtime_1.jsxs)("label", { className: (0, exports.cx)('input-wrapper'), onMouseDown: preventFieldBlur, "data-testid": 'search-bar:input-wrapper', children: [withSearchIcon && ((0, jsx_runtime_1.jsx)("span", { className: (0, exports.cx)('search-icon'), children: (0, jsx_runtime_1.jsx)(Magnifier_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }) })), (0, jsx_runtime_1.jsxs)("div", { className: (0, exports.cx)('input-container'), children: [(0, jsx_runtime_1.jsx)("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 && ((0, jsx_runtime_1.jsx)("div", { className: (0, exports.cx)('description-container'), children: (0, jsx_runtime_1.jsx)("span", { className: (0, exports.cx)('description'), children: description }) }))] }), value && onClear && ((0, jsx_runtime_1.jsx)("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'), children: (0, jsx_runtime_1.jsx)(CircleCross_1.default, { fill: colors_1.COLORS.get('basic-gray38'), "aria-hidden": true }) }))] }), Boolean(endButtons.length) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, exports.cx)('after-field', needHideEndButtons && 'wide-screen'), children: (0, jsx_runtime_1.jsx)("div", { className: (0, exports.cx)('buttons-container'), children: endButtons.map((props, index) => ((0, react_1.createElement)(Button, { ...props, key: index }))) }) }), needHideEndButtons && ((0, jsx_runtime_1.jsxs)("div", { className: (0, exports.cx)('after-field', 'narrow-screen'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, exports.cx)('buttons-container'), children: (0, jsx_runtime_1.jsx)(Button, { text: '\u0411\u043E\u043B\u044C\u0448\u0435', ref: dropdownOpenerRef, icon: MoreVert_1.default, onClick: () => toggleDropdown(!shownDropdown) }) }), shownDropdown && ((0, jsx_runtime_1.jsx)("div", { ref: dropdownRef, className: (0, exports.cx)('dropdown-container'), children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { children: endButtons.map(({ text, onClick }, index) => ((0, jsx_runtime_1.jsx)(dropdown_item_1.DropdownItem, { size: 's', onClick: event => {
+                                            onClick(event);
+                                            toggleDropdown(false);
+                                        }, children: text }, index))) }) }))] }))] }))] }));
+};
+exports.SearchBar = SearchBar;
+/**
+ * Компонент кнопки.
+ * @param props Свойства.
+ * @param props.text Текст кнопки.
+ * @param props.onClick Обработчик клика.
+ * @param props.icon Иконка.
+ * @param props.iconColor Цвет иконки.
+ * @return Элемент.
+ */
+const Button = (0, react_2.forwardRef)(function Button({ text, icon: Icon, iconColor = 'basic-gray87', onClick }, ref) {
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onClick: onClick, className: (0, exports.cx)('button'), role: 'button', "data-testid": 'search-bar-button', tabIndex: 0, "aria-label": Icon && text, children: Icon ? (0, jsx_runtime_1.jsx)(Icon, { fill: colors_1.COLORS.get(iconColor), "aria-hidden": 'true' }) : text }));
+});
+//# sourceMappingURL=search-bar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../../src/mobile/components/search-bar/search-bar.tsx"],"names":[],"mappings":"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"}

package/mobile/components/search-bar/{search-bar.module.scss → search-bar.m.scss}

@@ -1,4 +1,4 @@
-@import 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/colors';
 
 .root {
   display: flex;
@@ -10,7 +10,7 @@
   flex-grow: 1;
   margin: 8px 0;
   width: 100%;
-  background-color: $basic-gray4;
+  background-color: colors.$basic-gray4;
   border-radius: 8px;
   padding: 0 12px;
   &:focus-within {
@@ -57,14 +57,14 @@
     display: none;
   }
   &::placeholder {
-    color: $basic-gray38;
+    color: colors.$basic-gray38;
   }
 }
 
 .description-container {
   line-height: 24px;
   font-size: 16px;
-  color: $basic-gray38;
+  color: colors.$basic-gray38;
   width: 100%;
   max-width: 50%;
   display: flex;
@@ -119,10 +119,10 @@
 
 .button {
   padding: 0 12px;
-  font-weight: 500;
+  font-weight: 600;
   font-size: 14px;
   line-height: 20px;
-  color: $basic-blue;
+  color: colors.$basic-blue;
   cursor: pointer;
   display: flex;
   align-items: center;

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

@@ -1,20 +1 @@
-import React from 'react';
-import { LayoutProps } from '@sima-land/ui-nucleons/layout';
-export type OptionSize = 's' | 'm' | 'l' | 'xl';
-export interface SelectScreenOptionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    size?: OptionSize;
-    selected?: boolean;
-    withSelectedIcon?: boolean;
-}
-/**
- * Отступы для вывода опций в компоненте Screen.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const SelectScreenLayout: ({ children, ...props }: LayoutProps) => JSX.Element;
-/**
- * Опция.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const SelectScreenOption: ({ children, className, selected, withSelectedIcon, size, ...props }: SelectScreenOptionProps) => JSX.Element;
+export { SelectScreenLayout, SelectScreenOption, type SelectScreenOptionProps, type OptionSize, } from './select-screen';

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

@@ -1,68 +1,7 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (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.SelectScreenOption = exports.SelectScreenLayout = void 0;
-const react_1 = __importStar(require("react"));
-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"));
-/**
- * Отступы для вывода опций в компоненте Screen.
- * @param props Свойства.
- * @return Элемент.
- */
-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;
-/**
- * Опция.
- * @param props Свойства.
- * @return Элемент.
- */
-const SelectScreenOption = (_a) => {
-    var { children, className, selected, withSelectedIcon = selected, size = 'm' } = _a, props = __rest(_a, ["children", "className", "selected", "withSelectedIcon", "size"]);
-    return (react_1.default.createElement("button", Object.assign({}, props, { type: 'button', className: (0, classnames_1.default)(select_screen_module_scss_1.default.item, className, select_screen_module_scss_1.default[`size-${size}`]), "data-testid": 'select-screen:option' }),
-        children,
-        selected && withSelectedIcon && react_1.default.createElement(check_1.default, { role: 'presentation', className: select_screen_module_scss_1.default.icon })));
-};
-exports.SelectScreenOption = SelectScreenOption;
+var select_screen_1 = require("./select-screen");
+Object.defineProperty(exports, "SelectScreenLayout", { enumerable: true, get: function () { return select_screen_1.SelectScreenLayout; } });
+Object.defineProperty(exports, "SelectScreenOption", { enumerable: true, get: function () { return select_screen_1.SelectScreenOption; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/mobile/components/select-screen/index.ts"],"names":[],"mappings":";;;AAAA,iDAKyB;AAJvB,mHAAA,kBAAkB,OAAA;AAClB,mHAAA,kBAAkB,OAAA"}

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

@@ -0,0 +1,20 @@
+import { ButtonHTMLAttributes } from 'react';
+import { LayoutProps } from '@sima-land/ui-nucleons/layout';
+export type OptionSize = 's' | 'm' | 'l' | 'xl';
+export interface SelectScreenOptionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    size?: OptionSize;
+    selected?: boolean;
+    withSelectedIcon?: boolean;
+}
+/**
+ * Отступы для вывода опций в компоненте Screen.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SelectScreenLayout({ children, ...props }: LayoutProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Опция.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function SelectScreenOption({ children, className, selected, withSelectedIcon, size, ...props }: SelectScreenOptionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectScreenOption = exports.SelectScreenLayout = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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_m_scss_1 = __importDefault(require("./select-screen.m.scss"));
+/**
+ * Отступы для вывода опций в компоненте Screen.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SelectScreenLayout({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsx)(layout_1.MobileLayout, { ...props, disabledOn: ['mxs', 'ms'], children: (0, jsx_runtime_1.jsx)("div", { className: select_screen_m_scss_1.default.container, children: react_1.Children.toArray(children).filter(x => (0, react_1.isValidElement)(x) && x.type === SelectScreenOption) }) }));
+}
+exports.SelectScreenLayout = SelectScreenLayout;
+/**
+ * Опция.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function SelectScreenOption({ children, className, selected, withSelectedIcon = selected, size = 'm', ...props }) {
+    return ((0, jsx_runtime_1.jsxs)("button", { ...props, type: 'button', className: (0, classnames_1.default)(select_screen_m_scss_1.default.item, className, select_screen_m_scss_1.default[`size-${size}`]), "data-testid": 'select-screen:option', children: [children, selected && withSelectedIcon && (0, jsx_runtime_1.jsx)(Check_1.default, { role: 'presentation', className: select_screen_m_scss_1.default.icon })] }));
+}
+exports.SelectScreenOption = SelectScreenOption;
+//# sourceMappingURL=select-screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-screen.js","sourceRoot":"","sources":["../../../../src/mobile/components/select-screen/select-screen.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAuE;AACvE,0DAA0E;AAC1E,2FAAsE;AACtE,4DAA4B;AAC5B,kFAA4C;AAU5C;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACpE,OAAO,CACL,uBAAC,qBAAY,OAAK,KAAK,EAAE,UAAU,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,YAChD,gCAAK,SAAS,EAAE,8BAAM,CAAC,SAAS,YAC7B,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,IAAA,sBAAc,EAAC,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,kBAAkB,CAAC,GACvF,GACO,CAChB,CAAC;AACJ,CAAC;AARD,gDAQC;AAED;;;;GAIG;AACH,SAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAAgB,GAAG,QAAQ,EAC3B,IAAI,GAAG,GAAG,EACV,GAAG,KAAK,EACgB;IACxB,OAAO,CACL,uCACM,KAAK,EACT,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,8BAAM,CAAC,IAAI,EAAE,SAAS,EAAE,8BAAM,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,iBACjD,sBAAsB,aAEjC,QAAQ,EACR,QAAQ,IAAI,gBAAgB,IAAI,uBAAC,eAAQ,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAE,8BAAM,CAAC,IAAI,GAAI,IAClF,CACV,CAAC;AACJ,CAAC;AAnBD,gDAmBC"}