@sima-land/moleculas 14.2.0 → 15.0.0

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,12 +36,15 @@ 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 &&

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;
@@ -18,7 +14,7 @@
   border-radius: 8px;
   padding: 0 0 0 12px;
   &:focus-within {
-    .clear-icon {
+    .clear-button {
       display: flex;
     }
     .input-container {
@@ -42,12 +38,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;
@@ -84,13 +80,15 @@
   text-overflow: ellipsis;
 }
 
-.clear-icon {
+.clear-button {
   position: relative;
   align-items: center;
   justify-content: center;
   padding: 0 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.0.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",