@sima-land/moleculas 16.0.0-alpha.31 → 16.0.0-alpha.33

package/common/components/badge/badge.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const timer_1 = require("@sima-land/ui-nucleons/timer");
+const utils_1 = require("./utils");
 const bind_1 = __importDefault(require("classnames/bind"));
 const badge_m_scss_1 = __importDefault(require("./badge.m.scss"));
 const cx = bind_1.default.bind(badge_m_scss_1.default);
@@ -15,41 +15,13 @@ const cx = bind_1.default.bind(badge_m_scss_1.default);
  * @param props Свойства.
  * @return Элемент.
  */
-exports.Badge = (0, react_1.forwardRef)(function Badge({ className, color, coloring = 'outline', fields, href, style, shape = 'unset', withHoverEffect = Boolean(href), 'data-testid': testId = 'badge', ...restProps }, ref) {
-    const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
+exports.Badge = (0, react_1.forwardRef)(function Badge({ className, color, coloring = 'outline', fields, href, style, shape = 'unset', withHoverEffect = Boolean(href), 'data-testid': testId = 'badge', children, ...restProps }, ref) {
+    const iconOnly = fields && fields.length === 1 && fields[0].type === 'svg-url';
     const rootClassName = cx('root', iconOnly && 'icon-only', withHoverEffect && 'with-hover-effect', shape === 'round' && 'shape-round', shape === 'pill' && 'shape-pill', shape !== 'pill' && !iconOnly && 'padding-x-default', shape === 'pill' && !iconOnly && 'padding-x-pill', coloring === 'outline' && 'coloring-outline', coloring === 'fill' && 'coloring-fill', className);
     const rootStyle = {
-        '--badge-color': color,
+        '--badge-color': (0, utils_1.tokenToCustomProperty)(color),
         ...style,
     };
-    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...restProps, "data-testid": testId, href: href, style: rootStyle, className: rootClassName, children: iconOnly ? ((0, jsx_runtime_1.jsx)("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
-        // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
-        (0, jsx_runtime_1.jsx)("span", { className: cx('content'), children: fields.reduce((acc, item, i) => {
-                let result = null;
-                // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
-                switch (item.type) {
-                    case 'text':
-                        result = item.value;
-                        break;
-                    case 'timer':
-                        result = ((0, jsx_runtime_1.jsx)(timer_1.Timer, { date: item.value, timeout: 1000 * 60, format: formatDistance }, i));
-                        break;
-                }
-                acc.push(result);
-                i < fields.length - 1 && acc.push(' ');
-                return acc;
-            }, []) })) }));
+    return ((0, jsx_runtime_1.jsx)("a", { ref: ref, ...restProps, "data-testid": testId, href: href, style: rootStyle, className: rootClassName, children: fields ? (0, utils_1.renderFields)(fields) : children }));
 });
-/**
- * Форматирует оставшееся время.
- * @param distance Оставшееся время.
- * @return Отформатированное время.
- */
-const formatDistance = ({ days, hours, minutes, }) => [toTimePart(days), ...[hours % 24, minutes % 60].map(toTimePart)].join(':');
-/**
- * Форматирует число добавляя нули при необходимости.
- * @param n Число.
- * @return Отформатированное число.
- */
-const toTimePart = (n) => `${n}`.padStart(2, '0');
 //# sourceMappingURL=badge.js.map

package/common/components/badge/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/common/components/badge/badge.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA8C;AAE9C,wDAAqD;AACrD,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAgC,SAAS,KAAK,CAC3E,EACE,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,SAAS,EACpB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,OAAO,EACf,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,EAC/B,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;IAErE,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,QAAQ,IAAI,WAAW,EACvB,eAAe,IAAI,mBAAmB,EACtC,KAAK,KAAK,OAAO,IAAI,aAAa,EAClC,KAAK,KAAK,MAAM,IAAI,YAAY,EAChC,KAAK,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,mBAAmB,EACpD,KAAK,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,gBAAgB,EACjD,QAAQ,KAAK,SAAS,IAAI,kBAAkB,EAC5C,QAAQ,KAAK,MAAM,IAAI,eAAe,EACtC,SAAS,CACV,CAAC;IAEF,MAAM,SAAS,GAAe;QAC5B,eAAe,EAAE,KAAK;QACtB,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,KACJ,SAAS,iBACA,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,aAAa,EACxB,QAAQ,EACN,QAAQ,CAAC,CAAC,CAAC,CACT,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAC,EAAE,GAAG,CAC5D,CAAC,CAAC,CAAC;QACF,oGAAoG;QACpG,iCAAM,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,YAC3B,MAAM,CAAC,MAAM,CAAc,CAAC,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC3C,IAAI,MAAM,GAAG,IAAI,CAAC;gBAElB,gGAAgG;gBAChG,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;oBAClB,KAAK,MAAM;wBACT,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;wBACpB,MAAM;oBACR,KAAK,OAAO;wBACV,MAAM,GAAG,CACP,uBAAC,aAAK,IAAS,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,MAAM,EAAE,cAAc,IAA/D,CAAC,CAAkE,CAChF,CAAC;wBACF,MAAM;gBACV,CAAC;gBAED,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAEjB,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;gBAEvC,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,EAAE,CAAC,GACD,CACR,GAEH,CACH,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH;;;;GAIG;AACH,MAAM,cAAc,GAAG,CAAC,EACtB,IAAI,EACJ,KAAK,EACL,OAAO,GAKR,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,KAAK,GAAG,EAAE,EAAE,OAAO,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAElF;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC"}
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../../src/common/components/badge/badge.tsx"],"names":[],"mappings":";;;;;;;AACA,iCAAmC;AACnC,mCAA8D;AAC9D,2DAAyC;AACzC,kEAAoC;AAEpC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,sBAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACU,QAAA,KAAK,GAAG,IAAA,kBAAU,EAAgC,SAAS,KAAK,CAC3E,EACE,SAAS,EACT,KAAK,EACL,QAAQ,GAAG,SAAS,EACpB,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,OAAO,EACf,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,EAC/B,aAAa,EAAE,MAAM,GAAG,OAAO,EAC/B,QAAQ,EACR,GAAG,SAAS,EACb,EACD,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,SAAS,CAAC;IAE/E,MAAM,aAAa,GAAG,EAAE,CACtB,MAAM,EACN,QAAQ,IAAI,WAAW,EACvB,eAAe,IAAI,mBAAmB,EACtC,KAAK,KAAK,OAAO,IAAI,aAAa,EAClC,KAAK,KAAK,MAAM,IAAI,YAAY,EAChC,KAAK,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,mBAAmB,EACpD,KAAK,KAAK,MAAM,IAAI,CAAC,QAAQ,IAAI,gBAAgB,EACjD,QAAQ,KAAK,SAAS,IAAI,kBAAkB,EAC5C,QAAQ,KAAK,MAAM,IAAI,eAAe,EACtC,SAAS,CACV,CAAC;IAEF,MAAM,SAAS,GAAe;QAC5B,eAAe,EAAE,IAAA,6BAAqB,EAAC,KAAK,CAAC;QAC7C,GAAG,KAAK;KACT,CAAC;IAEF,OAAO,CACL,8BACE,GAAG,EAAE,GAAG,KACJ,SAAS,iBACA,MAAM,EACnB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,EAChB,SAAS,EAAE,aAAa,YAEvB,MAAM,CAAC,CAAC,CAAC,IAAA,oBAAY,EAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,GACvC,CACL,CAAC;AACJ,CAAC,CAAC,CAAC"}

package/common/components/badge/badge.m.scss

@@ -1,5 +1,5 @@
 $badge-size: 20px;
-$icon-size: 14px;
+$icon-size: 16px;
 
 .root {
   display: inline-flex;
@@ -15,15 +15,23 @@ $icon-size: 14px;
 }
 
 .padding-x-default {
-  // ВАЖНО: учитываем border
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 6px;
+  padding-right: 6px;
+  &.coloring-outline {
+    // ВАЖНО: учитываем border
+    padding-left: 5px;
+    padding-right: 5px;
+  }
 }
 
 .padding-x-pill {
-  // ВАЖНО: учитываем border
-  padding-left: 7px;
+  padding-left: 8px;
   padding-right: 8px;
+  &.coloring-outline {
+    // ВАЖНО: учитываем border
+    padding-left: 7px;
+    padding-right: 7px;
+  }
 }
 
 .shape-round {
@@ -74,8 +82,13 @@ $icon-size: 14px;
 }
 
 .icon {
-  display: inline-block;
+  display: block;
   width: $icon-size;
   height: $icon-size;
   line-height: $icon-size;
 }
+
+.icon + .content,
+.content + .icon {
+  margin-left: 4px;
+}

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

@@ -14,7 +14,7 @@ export interface BadgeProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>
     /** Как применится цвет. */
     coloring?: 'fill' | 'outline' | 'unset';
     /** Содержимое шильдика. */
-    fields: Array<BadgeField>;
+    fields?: Array<BadgeField>;
     /** Форма скруглений. */
     shape?: 'round' | 'pill' | 'unset';
     /** Нужен ли эффект при наведении. */

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

@@ -0,0 +1,33 @@
+import type { ReactNode } from 'react';
+import type { BadgeField } from './types';
+/**
+ * Если переданное значение является токеном цвета/градиента, вернёт CSS-значение с соответствующей CSS-переменной.
+ * Иначе вернет само значение.
+ * @param value Значение.
+ * @return Значение или undefined.
+ */
+export declare function tokenToCustomProperty(value: string | undefined): string | undefined;
+/**
+ * Сформирует содержимое шильдика на основе списка полей.
+ * Текстовые поля (type === text | timer) идущие подряд, будут объединены в один span.
+ * Между текстовыми полями в span будет вставлен 1 пробел.
+ * @param fields Поля.
+ * @return СОдержимое шильдика.
+ */
+export declare function renderFields(fields: BadgeField[]): ReactNode[];
+/**
+ * Форматирует оставшееся время.
+ * @param distance Оставшееся время.
+ * @return Отформатированное время.
+ */
+export declare function formatDistance({ days, hours, minutes, }: {
+    days: number;
+    hours: number;
+    minutes: number;
+}): string;
+/**
+ * Форматирует число добавляя нули при необходимости.
+ * @param n Число.
+ * @return Отформатированное число.
+ */
+export declare function toTimePart(n: number): string;

package/common/components/badge/utils.js

@@ -0,0 +1,113 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.toTimePart = exports.formatDistance = exports.renderFields = exports.tokenToCustomProperty = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("@sima-land/ui-nucleons/colors");
+const gradients_1 = require("@sima-land/ui-nucleons/gradients");
+const timer_1 = require("@sima-land/ui-nucleons/timer");
+const badge_m_scss_1 = __importDefault(require("./badge.m.scss"));
+/**
+ * Если переданное значение является токеном цвета/градиента, вернёт CSS-значение с соответствующей CSS-переменной.
+ * Иначе вернет само значение.
+ * @param value Значение.
+ * @return Значение или undefined.
+ */
+function tokenToCustomProperty(value) {
+    if (typeof value !== 'string') {
+        return value;
+    }
+    if (value.startsWith('color/')) {
+        const colorName = value.replace('color/', '');
+        if (!colors_1.COLORS.has(colorName)) {
+            return value;
+        }
+        return `var(--color-${colorName})`;
+    }
+    if (value.startsWith('gradient/')) {
+        const gradientName = value.replace('gradient/', '');
+        if (!gradients_1.GRADIENTS.has(gradientName)) {
+            return value;
+        }
+        return `var(--gradient-${gradientName})`;
+    }
+    return value;
+}
+exports.tokenToCustomProperty = tokenToCustomProperty;
+/**
+ * Сформирует содержимое шильдика на основе списка полей.
+ * Текстовые поля (type === text | timer) идущие подряд, будут объединены в один span.
+ * Между текстовыми полями в span будет вставлен 1 пробел.
+ * @param fields Поля.
+ * @return СОдержимое шильдика.
+ */
+function renderFields(fields) {
+    const result = [];
+    let item = null;
+    for (const field of fields) {
+        if (!item) {
+            switch (field.type) {
+                case 'text': {
+                    item = [field.value];
+                    break;
+                }
+                case 'timer': {
+                    item = [(0, jsx_runtime_1.jsx)(timer_1.Timer, { date: field.value, timeout: 1000 * 60, format: formatDistance }, 0)];
+                    break;
+                }
+                case 'svg-url': {
+                    result.push((0, jsx_runtime_1.jsx)("img", { className: badge_m_scss_1.default.icon, src: field.value, alt: '' }, result.length));
+                    break;
+                }
+            }
+        }
+        else {
+            switch (field.type) {
+                case 'text': {
+                    item.push(' ');
+                    item.push(field.value);
+                    break;
+                }
+                case 'timer': {
+                    item.push(' ');
+                    item.push((0, jsx_runtime_1.jsx)(timer_1.Timer, { date: field.value, timeout: 1000 * 60, format: formatDistance }, item.length));
+                    break;
+                }
+                case 'svg-url': {
+                    // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
+                    result.push((0, jsx_runtime_1.jsx)("span", { className: badge_m_scss_1.default.content, children: item }, result.length));
+                    item = null;
+                    result.push((0, jsx_runtime_1.jsx)("img", { className: badge_m_scss_1.default.icon, src: field.value, alt: '' }, result.length));
+                    break;
+                }
+            }
+        }
+    }
+    if (item) {
+        result.push((0, jsx_runtime_1.jsx)("span", { className: badge_m_scss_1.default.content, children: item }, result.length));
+        item = null;
+    }
+    return result;
+}
+exports.renderFields = renderFields;
+/**
+ * Форматирует оставшееся время.
+ * @param distance Оставшееся время.
+ * @return Отформатированное время.
+ */
+function formatDistance({ days, hours, minutes, }) {
+    return `${toTimePart(days)}:${toTimePart(hours % 24)}:${toTimePart(minutes % 60)}`;
+}
+exports.formatDistance = formatDistance;
+/**
+ * Форматирует число добавляя нули при необходимости.
+ * @param n Число.
+ * @return Отформатированное число.
+ */
+function toTimePart(n) {
+    return `${n}`.padStart(2, '0');
+}
+exports.toTimePart = toTimePart;
+//# sourceMappingURL=utils.js.map

package/common/components/badge/utils.js.map

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

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

@@ -4,4 +4,4 @@ import { ProductCarouselProps } from './types';
  * @param props Свойства.
  * @return Элемент.
  */
-export declare function ProductCarousel({ infinite, className, itemSize, itemProps, onInViewport, onNeedRequest, children, controlProps, itemImageRatio, }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function ProductCarousel({ infinite, className, itemSize, itemProps, onInViewport, onNeedRequest, children, controlProps, itemImageRatio, needRequestOptions, }: ProductCarouselProps): import("react/jsx-runtime").JSX.Element;

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

@@ -24,12 +24,15 @@ const getSizeClasses = (size) => size && size !== 'unset'
         `size-xl-${size.xl || 2}`,
     ]
     : [];
+const defaultNeedRequestOptions = {
+    rootMargin: '200px 0px 200px 0px',
+};
 /**
  * Карусель рекомендованных товаров.
  * @param props Свойства.
  * @return Элемент.
  */
-function ProductCarousel({ infinite = true, className, itemSize = { xs: 4, s: 3, m: 2, l: 2, xl: 2 }, itemProps, onInViewport, onNeedRequest, children, controlProps, itemImageRatio = 1, }) {
+function ProductCarousel({ infinite = true, className, itemSize = { xs: 4, s: 3, m: 2, l: 2, xl: 2 }, itemProps, onInViewport, onNeedRequest, children, controlProps, itemImageRatio = 1, needRequestOptions = defaultNeedRequestOptions, }) {
     const layer = (0, helpers_1.useLayer)();
     const needBigArrows = (0, hooks_2.useMedia)('(min-width: 1600px)');
     const rootRef = (0, react_1.useRef)(null);
@@ -43,7 +46,12 @@ function ProductCarousel({ infinite = true, className, itemSize = { xs: 4, s: 3,
     const firstItemRef = (0, react_1.useRef)(null);
     const itemWidth = (0, hooks_1.useClientWidth)(firstItemRef, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
-    const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
+    const { root, rootMargin, threshold } = needRequestOptions;
+    const options = (0, react_1.useMemo)(() => ({
+        root,
+        rootMargin,
+        threshold,
+    }), [root, rootMargin, threshold]);
     (0, hooks_2.useIntersection)(rootRef, entry => {
         entry.isIntersecting && onNeedRequest && onNeedRequest();
     }, options);

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

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

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

@@ -18,6 +18,8 @@ export interface ProductCarouselProps {
     onInViewport?: () => void;
     /** Сработает при попадании карусели в область достаточно близкую к viewport'у. */
     onNeedRequest?: () => void;
+    /** Опции области, которая вызовет onNeedRequest. */
+    needRequestOptions?: IntersectionObserverInit;
     /** Предоставит свойства для элемента карусели. */
     itemProps?: {
         style?: CSSProperties;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sima-land/moleculas",
   "type": "commonjs",
-  "version": "16.0.0-alpha.31",
+  "version": "16.0.0-alpha.33",
   "repository": "ssh://git@github.com:sima-land/moleculas.git",
   "author": "www.sima-land.ru team",
   "license": "Apache-2.0",
@@ -56,7 +56,7 @@
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@sima-land/ui-nucleons": "^45.0.0-alpha.19",
+    "@sima-land/ui-nucleons": "^45.0.0-alpha.20",
     "@sima-land/ui-quarks": "^5.0.0",
     "react": "^17.0 || ^18.0"
   }