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

package/README.md

@@ -0,0 +1,23 @@
+# UI-moleculas
+
+В этом проекте собраны UI-компоненты, привязанные к контексту интернет-магазина.
+
+## Использование
+
+### Установка
+
+```sh
+# с помощью npm
+npm i -S @sima-land/moleculas
+
+# или с помощью yarn
+yarn add @sima-land/moleculas
+```
+
+### Настройка среды
+
+Компоненты библиотеки используют:
+
+- импорты css/scss-файлов как css-модулей (каждый такой файл промаркирован в виде `*.module.{css,scss}`)
+
+Поэтому, для использования библиотеки необходимо сконфигурировать среду (сборщик или тестовый фреймворк) таким образом чтобы данные импорты работали корректно.

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { BadgeProps } from './types';
+/**
+ * Шильдик.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/common/components/badge/badge.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 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);
+/**
+ * Шильдик.
+ * @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';
+    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,
+        ...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;
+            }, []) })) }));
+});
+/**
+ * Форматирует оставшееся время.
+ * @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

@@ -0,0 +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"}

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

@@ -0,0 +1,81 @@
+$badge-size: 20px;
+$icon-size: 14px;
+
+.root {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: $badge-size;
+  font-weight: bold;
+  font-size: 12px;
+  line-height: 16px;
+  max-width: 100%;
+  min-width: $badge-size;
+  text-decoration: none;
+}
+
+.padding-x-default {
+  // ВАЖНО: учитываем border
+  padding-left: 5px;
+  padding-right: 5px;
+}
+
+.padding-x-pill {
+  // ВАЖНО: учитываем border
+  padding-left: 7px;
+  padding-right: 8px;
+}
+
+.shape-round {
+  border-radius: 4px;
+}
+
+.shape-pill {
+  border-radius: 99999px;
+}
+
+.with-hover-effect:hover {
+  position: relative;
+  cursor: pointer;
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    opacity: 0.16;
+  }
+}
+
+.coloring-outline {
+  color: var(--badge-color, #aaa);
+
+  // ВАЖНО: используем border т.к. на Safari box-shadow пропадает при уменьшении масштаба
+  border: 1px solid var(--badge-border-color, var(--badge-color, #aaa));
+}
+
+.coloring-fill {
+  background: var(--badge-color, #aaa);
+  color: var(--badge-text-color, #fff);
+}
+
+.icon-only {
+  width: $badge-size;
+}
+
+// содержимое
+.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.icon {
+  display: inline-block;
+  width: $icon-size;
+  height: $icon-size;
+  line-height: $icon-size;
+}

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

@@ -1,19 +1,2 @@
-import React from 'react';
-export interface BadgeField {
-    type: 'text' | 'timer' | 'svg-url';
-    value: string;
-}
-export interface BadgeProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
-    /** Основной цвет, используется как цвет обводки, иконок и текста. */
-    color?: string;
-    /** Содержимое шильдика. */
-    fields: Array<BadgeField>;
-    /** Идентификатор для систем автоматизированного тестирования. */
-    'data-testid'?: string;
-}
-/**
- * Шильдик.
- * @param props Свойства.
- * @return Элемент.
- */
-export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLAnchorElement>>;
+export type { BadgeProps, BadgeField } from './types';
+export { Badge } from './badge';

package/common/components/badge/index.js

@@ -1,83 +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 __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.Badge = void 0;
-const react_1 = __importStar(require("react"));
-const timer_1 = require("@sima-land/ui-nucleons/timer");
-const bind_1 = __importDefault(require("classnames/bind"));
-const badge_module_scss_1 = __importDefault(require("./badge.module.scss"));
-const cx = bind_1.default.bind(badge_module_scss_1.default);
-/**
- * Шильдик.
- * @param props Свойства.
- * @return Элемент.
- */
-exports.Badge = (0, react_1.forwardRef)(function Badge(_a, ref) {
-    var { className, color, fields, href, style, 'data-testid': testId = 'badge' } = _a, restProps = __rest(_a, ["className", "color", "fields", "href", "style", 'data-testid']);
-    const iconOnly = fields.length === 1 && fields[0].type === 'svg-url';
-    return (react_1.default.createElement("a", Object.assign({ ref: ref }, restProps, { "data-testid": testId, href: href, style: Object.assign(Object.assign({}, style), { '--badge-color': color }), className: cx('root', iconOnly && 'icon-only', href && 'interactive', className), children: iconOnly ? (react_1.default.createElement("img", { className: cx('icon'), src: fields[0].value, alt: '' })) : (
-        // вложенный span нужен для того чтобы объединить `display: inline-flex` и `text-overflow: ellipsis`
-        react_1.default.createElement("span", { className: cx('content') }, fields.reduce((acc, item, i) => {
-            let result = null;
-            // на данный момент сочетание иконки с другими элементами не предусмотрено макетами - игнорируем
-            switch (item.type) {
-                case 'text':
-                    result = item.value;
-                    break;
-                case 'timer':
-                    result = (react_1.default.createElement(timer_1.Timer, { key: i, date: item.value, timeout: 1000 * 60, format: formatDistance }));
-                    break;
-            }
-            acc.push(result);
-            i < fields.length - 1 && acc.push(' ');
-            return acc;
-        }, []))) })));
-});
-/**
- * Форматирует оставшееся время.
- * @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');
+var badge_1 = require("./badge");
+Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/components/badge/index.ts"],"names":[],"mappings":";;;AACA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA"}

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

@@ -0,0 +1,26 @@
+import type { AnchorHTMLAttributes, CSSProperties } from 'react';
+export interface BadgeField {
+    type: 'text' | 'timer' | 'svg-url';
+    value: string;
+}
+export interface BadgeStyle extends CSSProperties {
+    '--badge-color'?: string;
+    '--badge-text-color'?: string;
+    '--badge-border-color'?: string;
+}
+export interface BadgeProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
+    /** Основной цвет, используется как цвет обводки, иконок и текста. */
+    color?: string;
+    /** Как применится цвет. */
+    coloring?: 'fill' | 'outline' | 'unset';
+    /** Содержимое шильдика. */
+    fields: Array<BadgeField>;
+    /** Форма скруглений. */
+    shape?: 'round' | 'pill' | 'unset';
+    /** Нужен ли эффект при наведении. */
+    withHoverEffect?: boolean;
+    /** Стили. */
+    style?: BadgeStyle;
+    /** Идентификатор для систем автоматизированного тестирования. */
+    'data-testid'?: string;
+}

package/common/components/{intractive-image → badge}/types.js

@@ -1,2 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/common/components/badge/types.ts"],"names":[],"mappings":""}

package/common/components/badge-list/badge-list.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode, CSSProperties } from 'react';
+export interface BadgeListProps {
+    /** Список данных для шильдиков. */
+    children?: ReactNode;
+    /** CSS-класс корневого элемента. */
+    className?: string;
+    /** Стили корневого элемента. */
+    style?: CSSProperties;
+    /** Лимит количества строк, не влезающие шильдики будут скрыты. */
+    lineLimit?: number;
+}
+/**
+ * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
+ * @param props Свойства компонента.
+ * @return Элемент.
+ */
+export declare const BadgeList: {
+    ({ children, className, lineLimit, style }: BadgeListProps): import("react/jsx-runtime").JSX.Element;
+    Slot: typeof BadgeListSlot;
+};
+/**
+ * Слот для вывода Badge с произвольной оберткой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+declare function BadgeListSlot({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/common/components/badge-list/badge-list.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const badge_1 = require("../badge");
+const bind_1 = __importDefault(require("classnames/bind"));
+const badge_list_m_scss_1 = __importDefault(require("./badge-list.m.scss"));
+const cx = bind_1.default.bind(badge_list_m_scss_1.default);
+/**
+ * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
+ * @param props Свойства компонента.
+ * @return Элемент.
+ */
+const BadgeList = ({ children, className, lineLimit, style }) => ((0, jsx_runtime_1.jsx)("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? { ...style, '--line-limit': lineLimit } : style, children: react_1.Children.toArray(children).map((child, index) => {
+        switch (true) {
+            case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
+                return (0, jsx_runtime_1.jsx)(BadgeListSlot, { children: child }, index);
+            case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
+                return child;
+            default:
+                return null;
+        }
+    }) }));
+exports.BadgeList = BadgeList;
+/**
+ * Слот для вывода Badge с произвольной оберткой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BadgeListSlot({ children }) {
+    return (0, jsx_runtime_1.jsx)("div", { className: cx('item'), children: children });
+}
+exports.BadgeList.Slot = BadgeListSlot;
+//# sourceMappingURL=badge-list.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge-list.js","sourceRoot":"","sources":["../../../../src/common/components/badge-list/badge-list.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAA2E;AAC3E,oCAAiC;AACjC,2DAAyC;AACzC,4EAAyC;AAgBzC,MAAM,EAAE,GAAG,cAAU,CAAC,IAAI,CAAC,2BAAM,CAAC,CAAC;AAEnC;;;;GAIG;AACI,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAkB,EAAE,EAAE,CAAC,CACtF,gCACE,SAAS,EAAE,EAAE,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,IAAI,YAAY,CAAC,EAC3D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAE,EAAE,GAAG,KAAK,EAAE,cAAc,EAAE,SAAS,EAAoB,CAAC,CAAC,CAAC,KAAK,YAEpF,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;QAC/C,QAAQ,IAAI,EAAE,CAAC;YACb,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAK;gBAChD,OAAO,uBAAC,aAAa,cAAc,KAAK,IAAb,KAAK,CAAyB,CAAC;YAC5D,KAAK,IAAA,sBAAc,EAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;gBACxD,OAAO,KAAK,CAAC;YACf;gBACE,OAAO,IAAI,CAAC;QAChB,CAAC;IACH,CAAC,CAAC,GACE,CACP,CAAC;AAhBW,QAAA,SAAS,aAgBpB;AAEF;;;;GAIG;AACH,SAAS,aAAa,CAAC,EAAE,QAAQ,EAA4B;IAC3D,OAAO,gCAAK,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,YAAG,QAAQ,GAAO,CAAC;AACtD,CAAC;AAED,iBAAS,CAAC,IAAI,GAAG,aAAa,CAAC"}

package/common/components/badge-list/index.d.ts

@@ -1,29 +1 @@
-import React, { ReactNode } from 'react';
-export interface BadgeListProps {
-    /** Список данных для шильдиков. */
-    children?: React.ReactNode;
-    /** CSS-класс корневого элемента. */
-    className?: string;
-    /** Стили корневого элемента. */
-    style?: React.CSSProperties;
-    /** Лимит количества строк, не влезающие шильдики будут скрыты. */
-    lineLimit?: number;
-}
-/**
- * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-export declare const BadgeList: {
-    ({ children, className, lineLimit, style }: BadgeListProps): JSX.Element;
-    Slot: typeof BadgeListSlot;
-};
-/**
- * Слот для вывода Badge с произвольной оберткой.
- * @param props Свойства.
- * @return Элемент.
- */
-declare function BadgeListSlot({ children }: {
-    children?: ReactNode;
-}): JSX.Element;
-export {};
+export { type BadgeListProps, BadgeList } from './badge-list';

package/common/components/badge-list/index.js

@@ -1,59 +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.BadgeList = void 0;
-const react_1 = __importStar(require("react"));
-const badge_1 = require("../badge");
-const bind_1 = __importDefault(require("classnames/bind"));
-const badge_list_module_scss_1 = __importDefault(require("./badge-list.module.scss"));
-const cx = bind_1.default.bind(badge_list_module_scss_1.default);
-/**
- * Компонент списка шильдиков. Формирует отступы между шильдиками и переносы по дизайн-найдам.
- * @param props Свойства компонента.
- * @return Элемент.
- */
-const BadgeList = ({ children, className, lineLimit, style }) => (react_1.default.createElement("div", { className: cx('root', className, lineLimit && 'line-limit'), style: lineLimit ? Object.assign(Object.assign({}, style), { '--line-limit': lineLimit }) : style }, react_1.Children.toArray(children).map((child, index) => {
-    switch (true) {
-        case (0, react_1.isValidElement)(child) && child.type === badge_1.Badge:
-            return react_1.default.createElement(BadgeListSlot, { key: index }, child);
-        case (0, react_1.isValidElement)(child) && child.type === BadgeListSlot:
-            return child;
-        default:
-            return null;
-    }
-})));
-exports.BadgeList = BadgeList;
-/**
- * Слот для вывода Badge с произвольной оберткой.
- * @param props Свойства.
- * @return Элемент.
- */
-function BadgeListSlot({ children }) {
-    return react_1.default.createElement("div", { className: cx('item') }, children);
-}
-exports.BadgeList.Slot = BadgeListSlot;
+var badge_list_1 = require("./badge-list");
+Object.defineProperty(exports, "BadgeList", { enumerable: true, get: function () { return badge_list_1.BadgeList; } });
+//# sourceMappingURL=index.js.map

package/common/components/badge-list/index.js.map

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

package/common/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+import { type BreadcrumbItemProps, type BreadcrumbProps } from './types';
+import { type LinkProps } from '@sima-land/ui-nucleons/link';
+/**
+ * Список "хлебных крошек".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function Breadcrumbs({ children, className, 'data-testid': testId, ...restProps }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Элемент списка "хлебных крошек".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BreadcrumbsItem({ active, children, 'data-testid': testId, ...restProps }: BreadcrumbItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BreadcrumbsItem {
+    var Body: typeof BreadcrumbsItemBody;
+    var Dropdown: typeof BreadcrumbsItemDropdown;
+    var Sibling: typeof BreadcrumbsItemSibling;
+}
+/**
+ * Основное содержимое "хлебной крошки".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BreadcrumbsItemBody({ children }: {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Содержимое выпадающего списка "хлебной крошки".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BreadcrumbsItemDropdown({ loading, children, onOpen, }: {
+    children?: ReactNode;
+    loading?: boolean;
+    onOpen?: VoidFunction;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Соседняя "хлебная крошка", выводится в выпадающем списке.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function BreadcrumbsItemSibling({ children, className, active, 'data-testid': testId, ...restProps }: LinkProps & {
+    active?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/common/components/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,83 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BreadcrumbsItemSibling = exports.BreadcrumbsItemDropdown = exports.BreadcrumbsItemBody = exports.BreadcrumbsItem = exports.Breadcrumbs = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = require("@sima-land/ui-nucleons/link");
+const plate_1 = require("@sima-land/ui-nucleons/plate");
+const helpers_1 = require("@sima-land/ui-nucleons/helpers");
+const hooks_1 = require("@sima-land/ui-nucleons/hooks");
+const react_transition_group_1 = require("react-transition-group");
+const classnames_1 = __importDefault(require("classnames"));
+const breadcrumbs_m_scss_1 = __importDefault(require("./breadcrumbs.m.scss"));
+/**
+ * Список "хлебных крошек".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function Breadcrumbs({ children, className, 'data-testid': testId = 'breadcrumbs', ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)("div", { ...restProps, className: (0, classnames_1.default)(breadcrumbs_m_scss_1.default.root, className), "data-testid": testId, children: children }));
+}
+exports.Breadcrumbs = Breadcrumbs;
+/**
+ * Элемент списка "хлебных крошек".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BreadcrumbsItem({ active, children, 'data-testid': testId = 'breadcrumb', ...restProps }) {
+    const { body, dropdown } = (0, helpers_1.defineSlots)(children, {
+        body: BreadcrumbsItemBody,
+        dropdown: BreadcrumbsItemDropdown,
+    });
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const ref = (0, react_1.useRef)(null);
+    (0, hooks_1.useOutsideClick)(ref, () => setOpen(false));
+    // ВАЖНО: выносим кусок верстки чтобы использовать его в двух местах
+    const name = ((0, jsx_runtime_1.jsxs)("span", { className: breadcrumbs_m_scss_1.default.name, children: [(0, jsx_runtime_1.jsx)(link_1.Link, { color: 'basic-gray87', ...(active && { pseudo: true }), ...restProps, children: body }), dropdown && (0, jsx_runtime_1.jsx)(DownSVG, { className: breadcrumbs_m_scss_1.default.icon, onClick: () => setOpen(a => !a) })] }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.item, "data-testid": testId, children: (0, jsx_runtime_1.jsxs)("div", { className: breadcrumbs_m_scss_1.default.inner, children: [name, (0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { in: dropdown && open, timeout: 200, unmountOnExit: true, classNames: {
+                        enter: breadcrumbs_m_scss_1.default['fade-enter'],
+                        enterActive: breadcrumbs_m_scss_1.default['fade-enter-active'],
+                        exit: breadcrumbs_m_scss_1.default['fade-exit'],
+                        exitActive: breadcrumbs_m_scss_1.default['fade-exit-active'],
+                    }, children: (0, jsx_runtime_1.jsxs)(plate_1.Plate, { ref: ref, rounds: 'm', shadow: 'z3', className: breadcrumbs_m_scss_1.default.dropdown, children: [name, (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default['dropdown-body'], children: dropdown })] }) })] }) }));
+}
+exports.BreadcrumbsItem = BreadcrumbsItem;
+BreadcrumbsItem.Body = BreadcrumbsItemBody;
+BreadcrumbsItem.Dropdown = BreadcrumbsItemDropdown;
+BreadcrumbsItem.Sibling = BreadcrumbsItemSibling;
+/**
+ * Основное содержимое "хлебной крошки".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BreadcrumbsItemBody({ children }) {
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children });
+}
+exports.BreadcrumbsItemBody = BreadcrumbsItemBody;
+/**
+ * Содержимое выпадающего списка "хлебной крошки".
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BreadcrumbsItemDropdown({ loading, children, onOpen, }) {
+    (0, react_1.useEffect)(() => onOpen === null || onOpen === void 0 ? void 0 : onOpen(), []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loading ? ((0, jsx_runtime_1.jsxs)("div", { className: breadcrumbs_m_scss_1.default.stubs, children: [(0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub }), (0, jsx_runtime_1.jsx)("div", { className: breadcrumbs_m_scss_1.default.stub })] })) : (children) }));
+}
+exports.BreadcrumbsItemDropdown = BreadcrumbsItemDropdown;
+/**
+ * Соседняя "хлебная крошка", выводится в выпадающем списке.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function BreadcrumbsItemSibling({ children, className, active, 'data-testid': testId = 'breadcrumb:sibling', ...restProps }) {
+    return ((0, jsx_runtime_1.jsx)(link_1.Link, { color: 'basic-gray87', className: (0, classnames_1.default)(breadcrumbs_m_scss_1.default.sibling, className), "data-testid": testId, ...(active && { disabled: true, pseudo: true }), ...restProps, children: children }));
+}
+exports.BreadcrumbsItemSibling = BreadcrumbsItemSibling;
+/** @inheritdoc */
+function DownSVG(props) {
+    return ((0, jsx_runtime_1.jsx)("svg", { width: '16', height: '16', viewBox: '0 0 16 16', fill: 'none', ...props, children: (0, jsx_runtime_1.jsx)("path", { d: 'M4 6L8 10L12 6', strokeLinecap: 'round', strokeLinejoin: 'round' }) }));
+}
+//# sourceMappingURL=breadcrumbs.js.map

package/common/components/breadcrumbs/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../../../src/common/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":";;;;;;;AAAA,iCAAwF;AAExF,sDAAmE;AACnE,wDAAqD;AACrD,4DAA6D;AAC7D,wDAA+D;AAC/D,mEAAuD;AACvD,4DAAoC;AACpC,8EAA0C;AAE1C;;;;GAIG;AACH,SAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,aAAa,EAAE,MAAM,GAAG,aAAa,EACrC,GAAG,SAAS,EACI;IAChB,OAAO,CACL,mCAAS,SAAS,EAAE,SAAS,EAAE,IAAA,oBAAU,EAAC,4BAAM,CAAC,IAAI,EAAE,SAAS,CAAC,iBAAe,MAAM,YACnF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAXD,kCAWC;AAED;;;;GAIG;AACH,SAAgB,eAAe,CAAC,EAC9B,MAAM,EACN,QAAQ,EACR,aAAa,EAAE,MAAM,GAAG,YAAY,EACpC,GAAG,SAAS,EACQ;IACpB,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAA,qBAAW,EAAC,QAAQ,EAAE;QAC/C,IAAI,EAAE,mBAAmB;QACzB,QAAQ,EAAE,uBAAuB;KAClC,CAAC,CAAC;IAEH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAExC,MAAM,GAAG,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAEzC,IAAA,uBAAe,EAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAE3C,oEAAoE;IACpE,MAAM,IAAI,GAAG,CACX,kCAAM,SAAS,EAAE,4BAAM,CAAC,IAAI,aAC1B,uBAAC,WAAI,IAAC,KAAK,EAAC,cAAc,KAAK,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAAM,SAAS,YACvE,IAAI,GACA,EACN,QAAQ,IAAI,uBAAC,OAAO,IAAC,SAAS,EAAE,4BAAM,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,GAAI,IAC5E,CACR,CAAC;IAEF,OAAO,CACL,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,iBAAe,MAAM,YAE9C,iCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,aACzB,IAAI,EACL,uBAAC,sCAAa,IACZ,EAAE,EAAE,QAAQ,IAAI,IAAI,EACpB,OAAO,EAAE,GAAG,EACZ,aAAa,QACb,UAAU,EAAE;wBACV,KAAK,EAAE,4BAAM,CAAC,YAAY,CAAC;wBAC3B,WAAW,EAAE,4BAAM,CAAC,mBAAmB,CAAC;wBACxC,IAAI,EAAE,4BAAM,CAAC,WAAW,CAAC;wBACzB,UAAU,EAAE,4BAAM,CAAC,kBAAkB,CAAC;qBACvC,YAED,wBAAC,aAAK,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAE,4BAAM,CAAC,QAAQ,aAC/D,IAAI,EACL,gCAAK,SAAS,EAAE,4BAAM,CAAC,eAAe,CAAC,YAAG,QAAQ,GAAO,IACnD,GACM,IACZ,GACF,CACP,CAAC;AACJ,CAAC;AAnDD,0CAmDC;AAED,eAAe,CAAC,IAAI,GAAG,mBAAmB,CAAC;AAC3C,eAAe,CAAC,QAAQ,GAAG,uBAAuB,CAAC;AACnD,eAAe,CAAC,OAAO,GAAG,sBAAsB,CAAC;AAEjD;;;;GAIG;AACH,SAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAA4B;IACxE,OAAO,2DAAG,QAAQ,GAAI,CAAC;AACzB,CAAC;AAFD,kDAEC;AAED;;;;GAIG;AACH,SAAgB,uBAAuB,CAAC,EACtC,OAAO,EACP,QAAQ,EACR,MAAM,GAKP;IACC,IAAA,iBAAS,EAAC,GAAG,EAAE,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,EAAE,EAAE,CAAC,CAAC;IAEhC,OAAO,CACL,2DACG,OAAO,CAAC,CAAC,CAAC,CACT,iCAAK,SAAS,EAAE,4BAAM,CAAC,KAAK,aAE1B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,EAC/B,gCAAK,SAAS,EAAE,4BAAM,CAAC,IAAI,GAAI,IAC3B,CACP,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACA,CACJ,CAAC;AACJ,CAAC;AA9BD,0DA8BC;AAED;;;;GAIG;AACH,SAAgB,sBAAsB,CAAC,EACrC,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAa,EAAE,MAAM,GAAG,oBAAoB,EAC5C,GAAG,SAAS,EACqB;IACjC,OAAO,CACL,uBAAC,WAAI,IACH,KAAK,EAAC,cAAc,EACpB,SAAS,EAAE,IAAA,oBAAU,EAAC,4BAAM,CAAC,OAAO,EAAE,SAAS,CAAC,iBACnC,MAAM,KACf,CAAC,MAAM,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,KAC5C,SAAS,YAEZ,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAlBD,wDAkBC;AAED,kBAAkB;AAClB,SAAS,OAAO,CAAC,KAAmC;IAClD,OAAO,CACL,gCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,KAAK,KAAK,YACnE,iCAAM,CAAC,EAAC,gBAAgB,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,GAAG,GACpE,CACP,CAAC;AACJ,CAAC"}