@sima-land/moleculas 15.6.0 → 16.0.0-alpha.1

package/desktop/components/product-card/index.d.ts

@@ -1,11 +1,16 @@
 import React from 'react';
 import { ProductInfo, ProductInfoProps } from '../../../common/components/product-info';
 import { PlateProps } from '@sima-land/ui-nucleons/plate';
-export declare type ProductCardChildren = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
+export type ProductCardChildren = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
 export interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ProductCardChildren;
 }
 export declare const HoverCard: React.ForwardRefExoticComponent<PlateProps & React.RefAttributes<HTMLDivElement | null>>;
+/**
+ * Карточка данных товара с расширенной инф-ой при наведении.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 export declare const ProductCard: ({ children, className, ...props }: ProductCardProps) => JSX.Element;
 /**
  * Фильтрует содержимое карточки для вывода состояния без наведения.
@@ -13,4 +18,9 @@ export declare const ProductCard: ({ children, className, ...props }: ProductCar
  * @return Элемент.
  */
 export declare const reduceBaseInfo: (el: ProductCardChildren) => React.FunctionComponentElement<ProductInfoProps>;
+/**
+ * Получив содержимое карточки фильтрует/меняет его для вывода в карточке при наведении.
+ * @param el Содержимое.
+ * @return Элемент.
+ */
 export declare const reduceHoverInfo: (el: ProductCardChildren) => React.FunctionComponentElement<ProductInfoProps>;

package/desktop/components/product-card/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -44,6 +48,11 @@ exports.HoverCard = (0, react_1.forwardRef)((props, ref) => {
     const layer = (0, layer_1.useLayer)() + 1;
     return (react_1.default.createElement(plate_1.Plate, Object.assign({}, props, { style: Object.assign(Object.assign({}, props.style), { zIndex: layer }), ref: ref, rounds: 'm', shadow: 'z4', className: (0, classnames_1.default)(product_card_module_scss_1.default.card, props.className), "data-testid": 'product-card:hover-card' })));
 });
+/**
+ * Карточка данных товара с расширенной инф-ой при наведении.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 const ProductCard = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
     const [hovered, toggle] = (0, react_1.useState)(false);
@@ -82,6 +91,11 @@ const reduceBaseInfo = (el) => (0, react_1.cloneElement)(el, {
     }),
 });
 exports.reduceBaseInfo = reduceBaseInfo;
+/**
+ * Получив содержимое карточки фильтрует/меняет его для вывода в карточке при наведении.
+ * @param el Содержимое.
+ * @return Элемент.
+ */
 const reduceHoverInfo = (el) => (0, react_1.cloneElement)(el, {
     // при наведении у изображения строго непрозрачность = 1
     children: react_1.Children.map(el.props.children, child => (0, react_1.isValidElement)(child) && child.type === product_info_1.Parts.Image

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

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

@@ -7,7 +7,7 @@ interface ItemSize {
     l?: 2 | 3 | 4;
     xl?: 2 | 3 | 4;
 }
-export declare type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
+export type ItemElement = React.ReactElement<ProductInfoProps, typeof ProductInfo>;
 export interface ProductCarouselProps {
     /** CSS-класс для корневого элемента. */
     className?: string;
@@ -27,5 +27,5 @@ export interface ProductCarouselProps {
  * @param props Свойства.
  * @return Элемент.
  */
-export declare const ProductCarousel: ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps) => JSX.Element;
+export declare function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }: ProductCarouselProps): JSX.Element;
 export {};

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

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];
@@ -34,6 +38,7 @@ const bind_1 = __importDefault(require("classnames/bind"));
 const product_carousel_module_scss_1 = __importDefault(require("./product-carousel.module.scss"));
 const layer_1 = require("@sima-land/ui-nucleons/helpers/layer");
 const cx = bind_1.default.bind(product_carousel_module_scss_1.default);
+// eslint-disable-next-line require-jsdoc
 const getSizeClasses = (size = {}) => [
     `size-xs-${size.xs || 4}`,
     `size-s-${size.s || 3}`,
@@ -46,7 +51,7 @@ const getSizeClasses = (size = {}) => [
  * @param props Свойства.
  * @return Элемент.
  */
-const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) => {
+function ProductCarousel({ className, itemSize, onInViewport, onNeedRequest, withHoverCard, children, }) {
     const layer = (0, layer_1.useLayer)();
     const [activeItemIndex, setActiveItemIndex] = (0, react_1.useState)(null);
     const cardShow = (0, utils_1.useAllowFlag)();
@@ -61,7 +66,8 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
         items = children ? [children] : [];
     }
     // вычисляем ширину элемента карусели для позиционирования стрелок
-    const itemWidth = (0, utils_1.useChildWidth)(rootRef, `.${cx('item')}`, [items.length]);
+    const firstItemRef = (0, react_1.useRef)(null);
+    const itemWidth = (0, utils_1.useClientWidth)(firstItemRef, [items.length]);
     // инициируем загрузку данных, когда компонент почти попал в зону видимости
     const options = (0, react_1.useMemo)(() => ({ rootMargin: '200px 0px 200px 0px' }), []);
     (0, intersection_1.useIntersection)(rootRef, entry => {
@@ -83,21 +89,12 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
                     top: `${itemWidth / 2}px`,
                 },
             },
-        }), { renderItem: ([item, index]) => (react_1.default.createElement("div", { "data-testid": 'product-carousel:item', className: cx('item', getSizeClasses(itemSize)), onMouseEnter: e => {
+        }), { renderItem: ([item, index], realIndex) => (react_1.default.createElement(ProductCarouselItem, { rootRef: realIndex === 0 ? firstItemRef : undefined, withHoverCard: withHoverCard, className: cx(getSizeClasses(itemSize)), onMouseEnter: e => {
                     if (cardShow.allowed()) {
                         targetItemRef.current = e.currentTarget;
                         setActiveItemIndex(index);
                     }
-                } }, (0, react_1.cloneElement)(item, {
-                children: react_1.Children.toArray(item.props.children).reduce((list, child) => {
-                    if ((0, react_1.isValidElement)(child)) {
-                        child.type === product_info_1.Parts.Image &&
-                            list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
-                        child.type !== product_info_1.Parts.Footer && list.push(child);
-                    }
-                    return list;
-                }, []),
-            }))), 
+                } }, item)), 
             // длительность прокрутки в Carousel - 320, делаем слегка с запасом
             // @todo после восстановления проверить позицию курсора чтобы показать карточку (если будет критично)
             onChangeTargetIndex: () => cardShow.disallowFor(360) }))),
@@ -105,5 +102,35 @@ const ProductCarousel = ({ className, itemSize, onInViewport, onNeedRequest, wit
             activeItemIndex !== null &&
             items[activeItemIndex] &&
             [items[activeItemIndex]].map(item => (react_1.default.createElement(hover_card_1.HoverCard, Object.assign({ key: activeItemIndex, targetRef: targetItemRef, onMouseLeave: () => setActiveItemIndex(null) }, item.props))))));
-};
+}
 exports.ProductCarousel = ProductCarousel;
+/**
+ * Элемент карусели. Выведет базовый контент.
+ * Полное содержимое будет выведено во всплывающей карточке.
+ * @inheritdoc
+ */
+function ProductCarouselItem({ rootRef, className, onMouseEnter, withHoverCard, children, }) {
+    return (react_1.default.createElement("div", { ref: rootRef, "data-testid": 'product-carousel:item', className: cx('item', className), onMouseEnter: onMouseEnter }, (0, react_1.cloneElement)(children, {
+        children: react_1.Children.toArray(children.props.children).reduce((list, child) => {
+            if ((0, react_1.isValidElement)(child)) {
+                switch (child.type) {
+                    case product_info_1.Parts.Image: {
+                        // иконки у картинки скрываем если есть HoverCard
+                        list.push(withHoverCard ? (0, react_1.cloneElement)(child, { children: undefined }) : child);
+                        break;
+                    }
+                    case product_info_1.Parts.Footer:
+                        // футер не выводим если есть HoverCard
+                        !withHoverCard && list.push(child);
+                        break;
+                    default: {
+                        // остальное выводим как есть
+                        list.push(child);
+                        break;
+                    }
+                }
+            }
+            return list;
+        }, []),
+    })));
+}

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

@@ -9,9 +9,8 @@ export declare const useAllowFlag: () => {
 };
 /**
  * Возвращает ширину дочернего элемента.
- * @param ref Ref элемента.
- * @param selector CSS-селектор дочернего элемента.
+ * @param ref Ref дочернего элемента.
  * @param deps Массив зависимостей от которых зависит пересчет.
  * @return Ширина.
  */
-export declare const useChildWidth: (ref: React.RefObject<HTMLElement | null>, selector: string, deps?: React.DependencyList | undefined) => number | null;
+export declare const useClientWidth: (ref: React.RefObject<HTMLElement | null>, deps?: React.DependencyList) => number | null;

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

@@ -1,11 +1,7 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useChildWidth = exports.useAllowFlag = void 0;
+exports.useClientWidth = exports.useAllowFlag = void 0;
 const react_1 = require("react");
-const on_1 = __importDefault(require("@sima-land/ui-nucleons/helpers/on"));
 /**
  * Возвращает объект работы с флагом, который автоматически возвращается в true через заданный промежуток времени.
  * @return Объект работы с флагом.
@@ -25,23 +21,24 @@ const useAllowFlag = () => {
 exports.useAllowFlag = useAllowFlag;
 /**
  * Возвращает ширину дочернего элемента.
- * @param ref Ref элемента.
- * @param selector CSS-селектор дочернего элемента.
+ * @param ref Ref дочернего элемента.
  * @param deps Массив зависимостей от которых зависит пересчет.
  * @return Ширина.
  */
-const useChildWidth = (ref, selector, deps) => {
-    const [itemWidth, setItemWidth] = (0, react_1.useState)(null);
-    const update = (0, react_1.useCallback)(() => {
-        if (ref.current) {
-            const child = ref.current.querySelector(selector);
-            child && setItemWidth(child.clientWidth);
-        }
-    }, [ref]);
+const useClientWidth = (ref, deps = []) => {
+    const [width, setWidth] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
-        ref.current && update();
-        return (0, on_1.default)(window, 'resize', update);
-    }, deps);
-    return itemWidth;
+        if (!ref.current) {
+            return;
+        }
+        const element = ref.current;
+        const observer = new ResizeObserver(() => {
+            setWidth(element.clientWidth);
+        });
+        observer.observe(ref.current);
+        setWidth(element.clientWidth);
+        return observer.disconnect();
+    }, [ref, ...deps]);
+    return width;
 };
-exports.useChildWidth = useChildWidth;
+exports.useClientWidth = useClientWidth;

package/desktop/components/promotion-card/banner-title.d.ts

@@ -5,7 +5,17 @@ export interface BannerTitleProps {
     volumeDiscount?: number;
     dueDate?: Date;
 }
+/**
+ * Заголовок баннера.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 export declare const BannerTitle: ({ promotionType, volumeDiscount, dueDate }: BannerTitleProps) => JSX.Element;
+/**
+ * Таймер.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 export declare const CustomTimer: ({ dueDate }: {
     dueDate: Date;
 }) => JSX.Element;

package/desktop/components/promotion-card/banner-title.js

@@ -8,6 +8,11 @@ const react_1 = __importDefault(require("react"));
 const timer_1 = require("@sima-land/ui-nucleons/timer");
 const date_fns_1 = require("date-fns");
 const banner_title_module_scss_1 = __importDefault(require("./banner-title.module.scss"));
+/**
+ * Заголовок баннера.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
     let content = null;
     switch (promotionType) {
@@ -32,6 +37,11 @@ const BannerTitle = ({ promotionType, volumeDiscount, dueDate }) => {
     return react_1.default.createElement(react_1.default.Fragment, null, content);
 };
 exports.BannerTitle = BannerTitle;
+/**
+ * Таймер.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 const CustomTimer = ({ dueDate }) => (react_1.default.createElement(timer_1.Timer, { date: (0, date_fns_1.formatISO)(dueDate), timeout: 1000 * 60, format: ({ days, hours, minutes }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.timer, "data-testid": 'promotion-card:banner-timer' },
         react_1.default.createElement(TimerPart, { label: '\u0434\u043D\u0435\u0439', value: Math.min(99, days) }),
         react_1.default.createElement(TimerDivider, null),
@@ -39,7 +49,16 @@ const CustomTimer = ({ dueDate }) => (react_1.default.createElement(timer_1.Time
         react_1.default.createElement(TimerDivider, null),
         react_1.default.createElement(TimerPart, { label: '\u043C\u0438\u043D\u0443\u0442', value: minutes % 60 }))) }));
 exports.CustomTimer = CustomTimer;
+/**
+ * Часть таймера.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 const TimerPart = ({ label, value }) => (react_1.default.createElement("div", { className: banner_title_module_scss_1.default.part },
     react_1.default.createElement("div", null, `${value}`.padStart(2, '0')),
     react_1.default.createElement("div", { className: banner_title_module_scss_1.default.label }, label)));
+/**
+ * Разделитель частей таймера.
+ * @return Элемент.
+ */
 const TimerDivider = () => react_1.default.createElement("div", { className: banner_title_module_scss_1.default.divider }, ":");

package/desktop/components/promotion-card/estimate.d.ts

@@ -2,4 +2,9 @@
 export interface EstimateProps {
     dueDate: Date;
 }
+/**
+ * Оставшееся время.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 export declare const Estimate: ({ dueDate }: EstimateProps) => JSX.Element;

package/desktop/components/promotion-card/estimate.js

@@ -20,7 +20,17 @@ const MONTH_SHORT_NAME = [
     'ноя',
     'дек',
 ];
+/**
+ * Получив число возвращает его строковое отображение.
+ * @param n Число.
+ * @return Отображение.
+ */
 const toTimePart = (n) => `${n}`.padStart(2, '0');
+/**
+ * Оставшееся время.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 const Estimate = ({ dueDate }) => {
     const now = new Date();
     let content = null;

package/desktop/components/promotion-card/index.js

@@ -1,7 +1,11 @@
 "use strict";
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[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];

package/desktop/components/promotion-card/types.d.ts

@@ -1 +1 @@
-export declare type PromotionType = 'gift' | '3-by-2' | 'special' | 'volume-discount';
+export type PromotionType = 'gift' | '3-by-2' | 'special' | 'volume-discount';

package/mobile/components/action-circles/action-circles.module.scss

@@ -0,0 +1,60 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.circles {
+  display: flex;
+  justify-content: center;
+  padding: 48px 32px;
+}
+
+.circles-item {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: content-box;
+  width: 88px;
+  margin: 0 12px;
+  cursor: pointer;
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: colors.$basic-gray4;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    margin-bottom: 12px;
+  }
+}
+
+.list {
+  padding: 12px 0;
+}
+
+.list-item {
+  @include utils.reset-button;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 48px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  text-decoration: none;
+  cursor: pointer;
+  &.basic-gray87 {
+    color: colors.$basic-gray87;
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  }
+  &.additional-red {
+    color: colors.$additional-red;
+    &:hover {
+      color: colors.$additional-deep-red;
+    }
+  }
+}

package/mobile/components/action-circles/index.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+import { LinkProps } from '@sima-land/ui-nucleons/link';
+export interface ActionCirclesProps {
+    /** Кнопки. */
+    children?: ReactNode;
+}
+export interface ActionCircleItemProps extends Pick<LinkProps, 'href' | 'pseudo' | 'onClick'> {
+    /** Название. */
+    title: string;
+    /** Иконка. */
+    icon: ReactNode;
+}
+/**
+ * Кнопки действий с иконками.
+ * Используется вместе с `Alert`.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ActionCircles({ children }: ActionCirclesProps): JSX.Element;
+export declare namespace ActionCircles {
+    var Item: ({ icon, title, href, onClick, }: ActionCircleItemProps) => JSX.Element;
+}

package/mobile/components/action-circles/index.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionCircles = void 0;
+const react_1 = __importDefault(require("react"));
+const link_1 = require("@sima-land/ui-nucleons/link");
+const bind_1 = __importDefault(require("classnames/bind"));
+const action_circles_module_scss_1 = __importDefault(require("./action-circles.module.scss"));
+const cx = bind_1.default.bind(action_circles_module_scss_1.default);
+/**
+ * Кнопки действий с иконками.
+ * Используется вместе с `Alert`.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ActionCircles({ children }) {
+    return react_1.default.createElement("div", { className: cx('circles') }, children);
+}
+exports.ActionCircles = ActionCircles;
+/**
+ * Кнопка действия с иконкой.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+ActionCircles.Item = function ActionCircleItem({ icon, title, href, onClick, }) {
+    // @todo перейти на TextButton из нуклонов
+    return (react_1.default.createElement(link_1.Link, { href: href, className: cx('circles-item'), color: 'basic-gray87', onClick: onClick, "data-testid": 'action-circles:item' },
+        react_1.default.createElement("span", { className: cx('icon-wrapper') }, icon),
+        title));
+};

package/mobile/components/action-list/action-list.module.scss

@@ -0,0 +1,60 @@
+@use 'node_modules/@sima-land/ui-nucleons/colors';
+@use 'node_modules/@sima-land/ui-nucleons/utils';
+
+.circles {
+  display: flex;
+  justify-content: center;
+  padding: 48px 32px;
+}
+
+.circles-item {
+  display: inline-flex;
+  align-items: center;
+  flex-direction: column;
+  text-align: center;
+  box-sizing: content-box;
+  width: 88px;
+  margin: 0 12px;
+  cursor: pointer;
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: colors.$basic-gray4;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    margin-bottom: 12px;
+  }
+}
+
+.list {
+  padding: 12px 0;
+}
+
+.list-item {
+  @include utils.reset-button;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  height: 48px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  text-decoration: none;
+  cursor: pointer;
+  &.basic-gray87 {
+    color: colors.$basic-gray87;
+    &:hover {
+      color: colors.$basic-gray54;
+    }
+  }
+  &.additional-red {
+    color: colors.$additional-red;
+    &:hover {
+      color: colors.$additional-deep-red;
+    }
+  }
+}

package/mobile/components/action-list/index.d.ts

@@ -0,0 +1,23 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { Token } from '@sima-land/ui-nucleons/colors';
+export interface ActionsListProps {
+    /** Кнопки. */
+    children?: ReactNode;
+}
+export interface ActionsListItemProps {
+    children?: ReactNode;
+    as?: 'anchor' | 'button';
+    href?: string;
+    onClick?: MouseEventHandler;
+    color?: Extract<Token, 'basic-gray87' | 'additional-red'>;
+}
+/**
+ * Список действий.
+ * Используется вместе с `Alert`.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+export declare function ActionList({ children }: ActionsListProps): JSX.Element;
+export declare namespace ActionList {
+    var Item: ({ children, as, href, onClick, color, }: ActionsListItemProps) => JSX.Element;
+}

package/mobile/components/action-list/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActionList = void 0;
+const react_1 = __importDefault(require("react"));
+const bind_1 = __importDefault(require("classnames/bind"));
+const action_list_module_scss_1 = __importDefault(require("./action-list.module.scss"));
+const cx = bind_1.default.bind(action_list_module_scss_1.default);
+/**
+ * Список действий.
+ * Используется вместе с `Alert`.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+function ActionList({ children }) {
+    return react_1.default.createElement("div", { className: cx('list') }, children);
+}
+exports.ActionList = ActionList;
+/**
+ * Элемент списка действий.
+ * @param props Свойства.
+ * @return Элемент.
+ */
+ActionList.Item = function ActionListItem({ children, as = 'button', href, onClick, color = 'basic-gray87', }) {
+    const className = cx('list-item', { [color]: color });
+    const testId = 'action-list:item';
+    // @todo перейти на TextButton из нуклонов
+    if (as === 'anchor') {
+        return (react_1.default.createElement("a", { className: className, "data-testid": testId, href: href, onClick: onClick }, children));
+    }
+    else {
+        return (react_1.default.createElement("button", { type: 'button', className: className, "data-testid": testId, onClick: onClick }, children));
+    }
+};

package/mobile/components/breadcrumbs/index.d.ts

@@ -5,4 +5,9 @@ export interface BreadcrumbsProps {
         url?: string;
     }[];
 }
+/**
+ * Хлебные крошки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 export declare const Breadcrumbs: ({ items }: BreadcrumbsProps) => JSX.Element;

package/mobile/components/breadcrumbs/index.js

@@ -7,5 +7,10 @@ exports.Breadcrumbs = void 0;
 const link_1 = require("@sima-land/ui-nucleons/link");
 const react_1 = __importDefault(require("react"));
 const breadcrumbs_module_scss_1 = __importDefault(require("./breadcrumbs.module.scss"));
+/**
+ * Хлебные крошки.
+ * @param props Свойства.
+ * @return Элемент.
+ */
 const Breadcrumbs = ({ items }) => (react_1.default.createElement("nav", { className: breadcrumbs_module_scss_1.default.root }, items.map((item, index) => (react_1.default.createElement(link_1.Link, { key: index, href: item.url, pseudo: !item.url, color: 'basic-gray87', className: breadcrumbs_module_scss_1.default.item, "data-testid": 'breadcrumb' }, item.name)))));
 exports.Breadcrumbs = Breadcrumbs;