@cloud-ru/uikit-product-widget 0.9.4

package/dist/esm/components/ProductsWidget/ProductsWidget.js

@@ -0,0 +1,30 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { AdaptiveCarousel } from '@sbercloud/uikit-product-mobile-carousel';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Typography } from '@snack-uikit/typography';
+import { COLUMN_SIZE, MOBILE_COLUMN_SIZE, MOBILE_ROW_SIZE, ROW_SIZE } from './constants';
+import styles from './styles.module.css';
+import { getLoadingCards } from './utils/getLoadingCards';
+import { getProductColumns } from './utils/getProductColumns';
+export function ProductsWidget(_a) {
+    var { layoutType, cards = [], loading = false, columnSize: columnSizeProp = COLUMN_SIZE, rowSize: rowSizeProp = ROW_SIZE, arrows = true, pagination = true } = _a, rest = __rest(_a, ["layoutType", "cards", "loading", "columnSize", "rowSize", "arrows", "pagination"]);
+    const { t } = useLocale('Widget');
+    const isMobile = layoutType === 'mobile';
+    const columnSize = isMobile ? MOBILE_COLUMN_SIZE : columnSizeProp;
+    const rowSize = isMobile ? MOBILE_ROW_SIZE : rowSizeProp;
+    const productsCards = useMemo(() => (loading ? getLoadingCards({ columnSize, rowSize }) : getProductColumns({ cards, columnSize, rowSize })), [columnSize, loading, cards, rowSize]);
+    return (_jsxs("div", Object.assign({ className: styles.wrapper }, extractSupportProps(rest), { children: [_jsx("div", { className: styles.headerWrapper, children: _jsx(Typography.SansTitleL, { tag: 'h5', children: t('Products.title') }) }), _jsx(AdaptiveCarousel, { layoutType: layoutType, gap: '8px', infiniteScroll: !isMobile, swipe: false, showItems: rowSize, arrows: arrows, pagination: pagination, children: productsCards.map((d, index) => (_jsx("div", { className: styles.column, children: d }, index))) })] })));
+}

package/dist/esm/components/ProductsWidget/constants.d.ts

@@ -0,0 +1,4 @@
+export declare const ROW_SIZE = 4;
+export declare const COLUMN_SIZE = 3;
+export declare const MOBILE_ROW_SIZE = 1.1;
+export declare const MOBILE_COLUMN_SIZE = 4;

package/dist/esm/components/ProductsWidget/constants.js

@@ -0,0 +1,4 @@
+export const ROW_SIZE = 4;
+export const COLUMN_SIZE = 3;
+export const MOBILE_ROW_SIZE = 1.1;
+export const MOBILE_COLUMN_SIZE = 4;

package/dist/esm/components/ProductsWidget/index.d.ts

@@ -0,0 +1 @@
+export * from './ProductsWidget';

package/dist/esm/components/ProductsWidget/index.js

@@ -0,0 +1 @@
+export * from './ProductsWidget';

package/dist/esm/components/ProductsWidget/styles.module.css

@@ -0,0 +1,45 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  gap:16px;
+  grid-column:span 12;
+}
+
+.column{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-1m, 8px);
+}
+
+.headerWrapper{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:var(--dimension-050m, 4px);
+}
+
+.arrowWrapper{
+  display:flex;
+  align-items:center;
+}
+
+.pageNumber{
+  font-family:var(--sans-label-l-font-family, SB Sans Interface);
+  font-weight:var(--sans-label-l-font-weight, Semibold);
+  line-height:var(--sans-label-l-line-height, 20px);
+  font-size:var(--sans-label-l-font-size, 14px);
+  letter-spacing:var(--sans-label-l-letter-spacing, 0px);
+  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
+  color:var(--sys-neutral-text-main, #41424e);
+}
+
+.pageTotal{
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+  margin-right:var(--dimension-050m, 4px);
+  color:var(--sys-neutral-text-support, #6d707f);
+}

package/dist/esm/components/ProductsWidget/utils/getLoadingCards.d.ts

@@ -0,0 +1,6 @@
+type GetLoadingCardsParams = {
+    columnSize?: number;
+    rowSize?: number;
+};
+export declare function getLoadingCards({ columnSize, rowSize }: GetLoadingCardsParams): import("react/jsx-runtime").JSX.Element[][];
+export {};

package/dist/esm/components/ProductsWidget/utils/getLoadingCards.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Skeleton } from '@snack-uikit/skeleton';
+import { COLUMN_SIZE, ROW_SIZE } from '../constants';
+export function getLoadingCards({ columnSize = COLUMN_SIZE, rowSize = ROW_SIZE }) {
+    const result = [];
+    for (let i = 0; i < rowSize; i++) {
+        const columnSkeletons = [];
+        for (let j = 0; j < columnSize; j++) {
+            columnSkeletons.push(_jsx(Skeleton, { loading: true, borderRadius: 8, height: 48 }));
+        }
+        result.push(columnSkeletons);
+    }
+    return result;
+}

package/dist/esm/components/ProductsWidget/utils/getProductColumns.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+type GetProductColumnsParams = {
+    cards: ReactNode[];
+    columnSize: number;
+    rowSize: number;
+};
+export declare function getProductColumns({ cards, columnSize }: GetProductColumnsParams): (string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined)[][];
+export {};

package/dist/esm/components/ProductsWidget/utils/getProductColumns.js

@@ -0,0 +1,16 @@
+export function getProductColumns({ cards, columnSize }) {
+    const result = [];
+    for (let i = 0; i < cards.length; i += columnSize) {
+        const innerCards = [];
+        for (let j = 0; j < columnSize; j++) {
+            const index = i + j;
+            if (index >= cards.length) {
+                break;
+            }
+            const card = cards[index];
+            innerCards.push(card);
+        }
+        result.push(innerCards);
+    }
+    return result;
+}

package/dist/esm/components/SolutionsWidget/SolutionsWidget.d.ts

@@ -0,0 +1,8 @@
+import { CardSuggestProps } from '@sbercloud/uikit-product-card-predefined';
+import { WithLayoutType, WithSupportProps } from '@sbercloud/uikit-product-utils';
+import { LinkProps } from '@snack-uikit/link';
+export type SolutionsWidgetProps = WithLayoutType<WithSupportProps<{
+    moreLink?: Pick<LinkProps, 'onClick' | 'href'>;
+    cards: Pick<CardSuggestProps, 'description' | 'title' | 'onClick'>[];
+}>>;
+export declare function SolutionsWidget({ layoutType, moreLink, cards, ...rest }: SolutionsWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/SolutionsWidget/SolutionsWidget.js

@@ -0,0 +1,24 @@
+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;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardSuggest } from '@sbercloud/uikit-product-card-predefined';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { extractSupportProps } from '@sbercloud/uikit-product-utils';
+import { Link } from '@snack-uikit/link';
+import { Typography } from '@snack-uikit/typography';
+import styles from './styles.module.css';
+export function SolutionsWidget(_a) {
+    var { layoutType, moreLink, cards } = _a, rest = __rest(_a, ["layoutType", "moreLink", "cards"]);
+    const { t } = useLocale('Widget');
+    const isMobile = layoutType === 'mobile';
+    return (_jsxs("div", Object.assign({ className: styles.wrapper }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.header, children: [_jsx(Typography.SansTitleL, { tag: 'h5', children: t('Solutions.title') }), moreLink && (_jsx(Link, { text: t('Solutions.link'), size: 'm', appearance: 'neutral', onClick: moreLink === null || moreLink === void 0 ? void 0 : moreLink.onClick, href: moreLink === null || moreLink === void 0 ? void 0 : moreLink.href }))] }), _jsx("div", { className: styles.cards, "data-mobile": isMobile || undefined, children: cards.map(({ description, title, onClick }) => (_jsx(CardSuggest, { className: styles.card, description: description, title: title, onClick: onClick }, title))) })] })));
+}

package/dist/esm/components/SolutionsWidget/index.d.ts

@@ -0,0 +1 @@
+export * from './SolutionsWidget';

package/dist/esm/components/SolutionsWidget/index.js

@@ -0,0 +1 @@
+export * from './SolutionsWidget';

package/dist/esm/components/SolutionsWidget/styles.module.css

@@ -0,0 +1,28 @@
+.wrapper{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-2m, 16px);
+  grid-column:span 12;
+}
+
+.header{
+  display:flex;
+  flex-direction:row;
+  justify-content:space-between;
+  align-items:center;
+}
+
+.cards{
+  display:grid;
+  grid-template-columns:repeat(4, 1fr);
+  gap:var(--dimension-1m, 8px);
+}
+.cards[data-mobile]{
+  display:flex;
+  flex-direction:column;
+  gap:10px;
+}
+
+.card{
+  flex-grow:0;
+}

package/dist/esm/components/Widget/Widget.d.ts

@@ -0,0 +1,2 @@
+import { WidgetProps } from './types';
+export declare function Widget({ header, children, actions, wide, state, loadingState, errorState, className, layoutType, ...rest }: WidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Widget/Widget.js

@@ -0,0 +1,95 @@
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { CrossSVG } from '@sbercloud/uikit-product-icons';
+import { useLocale } from '@sbercloud/uikit-product-locale';
+import { TitleClickable } from '@sbercloud/uikit-product-title-clickable';
+import { InfoBlock } from '@snack-uikit/info-block';
+import { Skeleton } from '@snack-uikit/skeleton';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { ActionView } from '../../helperComponents/Actions/ActionView';
+import { BUTTON_TYPE } from '../../helperComponents/Actions/constants';
+import { DesktopActions } from '../../helperComponents/Actions/DesktopActions';
+import { MobileActions } from '../../helperComponents/Actions/MobileActions';
+import { ButtonKebab } from '../../helperComponents/ButtonKebab';
+import styles from './styles.module.css';
+export function Widget(_a) {
+    var { header, children, actions = [], wide = false, state = 'default', loadingState, errorState, className, layoutType } = _a, rest = __rest(_a, ["header", "children", "actions", "wide", "state", "loadingState", "errorState", "className", "layoutType"]);
+    const { t } = useLocale('Widget');
+    const renderContent = () => {
+        var _a;
+        switch (state) {
+            case 'loading': {
+                if (loadingState === null || loadingState === void 0 ? void 0 : loadingState.loadingContent) {
+                    return loadingState.loadingContent;
+                }
+                if (loadingState === null || loadingState === void 0 ? void 0 : loadingState.showSkeleton) {
+                    return (_jsx("div", { className: styles.skeletonContent, children: _jsx(Skeleton, { loading: true, width: '100%', height: 80, borderRadius: 8 }) }));
+                }
+                return null;
+            }
+            case 'error': {
+                return (_jsx(InfoBlock, { size: 'm', icon: (_a = errorState === null || errorState === void 0 ? void 0 : errorState.errorIcon) !== null && _a !== void 0 ? _a : { icon: CrossSVG, appearance: 'neutral', decor: true }, title: (errorState === null || errorState === void 0 ? void 0 : errorState.errorTitle) || t('dataErrorTitle'), description: (errorState === null || errorState === void 0 ? void 0 : errorState.errorDescription) || t('dataErrorDescription') }));
+            }
+            case 'default':
+            default: {
+                return children;
+            }
+        }
+    };
+    const renderActionsSkeleton = () => (_jsx("div", { className: cn(styles.actionsWrapper, { [styles.actionsWide]: wide }), children: _jsx("div", { className: styles.skeletonActions, children: wide ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { loading: true, width: 96, height: 32, borderRadius: 8 }), _jsx(Skeleton, { loading: true, width: 32, height: 32, borderRadius: 8 })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1, minWidth: 0 }, children: _jsx(Skeleton, { loading: true, width: '100%', height: 32, borderRadius: 8 }) }), _jsx(Skeleton, { loading: true, width: 32, height: 32, borderRadius: 8 })] })) }) }));
+    const getPrimaryAction = (items) => {
+        const index = items.findIndex(a => a.variant !== BUTTON_TYPE.Droplist && a.variant !== BUTTON_TYPE.Kebab);
+        return index >= 0 ? items[index] : undefined;
+    };
+    const buildKebabItems = (items) => items.reduce((acc, action) => {
+        var _a, _b;
+        if (action.variant === BUTTON_TYPE.Droplist || action.variant === BUTTON_TYPE.Kebab) {
+            acc.push({
+                type: 'group',
+                label: action.variant === BUTTON_TYPE.Droplist ? (_a = action.button) === null || _a === void 0 ? void 0 : _a.label : undefined,
+                items: action.list.items,
+                divider: acc.length > 0,
+            });
+        }
+        else {
+            acc.push({
+                content: { option: (_b = action.label) !== null && _b !== void 0 ? _b : '' },
+                beforeContent: action.icon,
+                onClick: (event) => {
+                    var _a;
+                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, event);
+                },
+            });
+        }
+        return acc;
+    }, []);
+    const renderActions = () => {
+        if (state === 'loading') {
+            return renderActionsSkeleton();
+        }
+        if (!actions.length)
+            return null;
+        if (wide) {
+            const isMobile = layoutType === 'mobile';
+            return (_jsx("div", { className: cn(styles.actionsWrapper, { [styles.actionsWide]: wide }), children: isMobile ? _jsx(MobileActions, { items: actions }) : _jsx(DesktopActions, { items: actions }) }));
+        }
+        const primaryAction = getPrimaryAction(actions);
+        const kebabItemsMobile = buildKebabItems(actions);
+        return (_jsxs("div", { className: cn(styles.actionsWrapper), children: [primaryAction && (_jsx(ActionView, Object.assign({}, primaryAction, { layoutType: layoutType, commonProps: { size: 's', fullWidth: true } }))), _jsx(ButtonKebab, { layoutType: layoutType, list: {
+                        items: kebabItemsMobile,
+                        closeDroplistOnItemClick: true,
+                    } })] }));
+    };
+    return (_jsxs("div", Object.assign({ className: cn(styles.widget, className) }, extractSupportProps(rest), { children: [_jsxs("div", { className: styles.widgetHeader, children: [state === 'loading' ? (_jsx("div", { className: styles.skeletonHeader, children: _jsx(Skeleton, { loading: true, width: wide ? 120 : '100%', height: 32, borderRadius: 8 }) })) : (_jsx(TitleClickable, Object.assign({}, header, { className: cn(styles.titleClickable, header.className) }))), wide && renderActions()] }), _jsx("div", { className: styles.widgetContent, children: renderContent() }), !wide && renderActions()] })));
+}

package/dist/esm/components/Widget/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './Widget';

package/dist/esm/components/Widget/index.js

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './Widget';

package/dist/esm/components/Widget/styles.module.css

@@ -0,0 +1,56 @@
+.widget{
+  box-sizing:border-box;
+  display:flex;
+  flex-direction:column;
+  gap:calc(var(--dimension-1m, 8px) + var(--dimension-050m, 4px));
+  background-color:var(--sys-neutral-background1-level, #fdfdfd);
+  border-radius:calc(var(--dimension-1m, 8px) + var(--dimension-050m, 4px));
+  padding:var(--dimension-2m, 16px);
+}
+
+.widgetHeader{
+  display:flex;
+  align-items:center;
+  justify-content:space-between;
+  gap:var(--dimension-1m, 8px);
+  min-width:0;
+}
+
+.titleClickable{
+  flex:1;
+  min-width:0;
+}
+
+.widgetContent{
+  color:var(--sys-neutral-text-main, #41424e);
+  min-height:0;
+}
+
+.actionsWrapper{
+  flex-shrink:0;
+  display:flex;
+  align-items:center;
+  gap:var(--dimension-050m, 4px);
+}
+
+.actionsWide{
+  justify-content:flex-end;
+}
+
+.skeletonContent{
+  display:flex;
+  flex-direction:column;
+  gap:var(--dimension-050m, 4px);
+}
+
+.skeletonHeader{
+  flex:1;
+  min-width:0;
+}
+
+.skeletonActions{
+  display:flex;
+  align-items:center;
+  gap:var(--dimension-1m, 8px);
+  width:100%;
+}

package/dist/esm/components/Widget/types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+import { TitleClickableProps } from '@sbercloud/uikit-product-title-clickable';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import type { InfoBlockProps } from '@snack-uikit/info-block';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { Action } from '../../helperComponents/Actions/types';
+export type WidgetState = 'default' | 'loading' | 'error';
+export type WidgetHeaderProps = Pick<TitleClickableProps, 'title' | 'icon' | 'avatar' | 'href' | 'target' | 'onClick' | 'titleTag' | 'fullWidth' | 'children' | 'className'>;
+export type WidgetLoadingStateProps = {
+    loadingContent?: ReactNode;
+    showSkeleton?: boolean;
+};
+export type WidgetErrorStateProps = {
+    errorTitle?: string;
+    errorDescription?: string;
+    errorIcon?: InfoBlockProps['icon'];
+};
+export type WidgetProps = WithLayoutType<WithSupportProps<{
+    header: WidgetHeaderProps;
+    children: ReactNode;
+    actions?: Action[];
+    wide?: boolean;
+    state?: WidgetState;
+    loadingState?: WidgetLoadingStateProps;
+    errorState?: WidgetErrorStateProps;
+    className?: string;
+}>>;

package/dist/esm/components/Widget/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ProductsWidget';
+export * from './SolutionsWidget';
+export * from './Widget';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './ProductsWidget';
+export * from './SolutionsWidget';
+export * from './Widget';

package/dist/esm/helperComponents/Actions/ActionView.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { Action } from './types';
+export declare function ActionView({ variant, tooltip, hidden, layoutType, commonProps, ...buttonProps }: WithLayoutType<Action & {
+    commonProps: {
+        className?: string;
+        size?: 's' | 'm' | 'l';
+        fullWidth?: boolean;
+    };
+}>): string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | null | undefined;

package/dist/esm/helperComponents/Actions/ActionView.js

@@ -0,0 +1,46 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AdaptiveTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonFilled, ButtonFunction, ButtonOutline, ButtonSimple, ButtonTonal, } from '@snack-uikit/button';
+import { ButtonDroplist } from '../ButtonDroplist';
+import { ButtonKebab } from '../ButtonKebab';
+import { BUTTON_TYPE } from './constants';
+export function ActionView(_a) {
+    var { variant, tooltip, hidden = false, layoutType, commonProps } = _a, buttonProps = __rest(_a, ["variant", "tooltip", "hidden", "layoutType", "commonProps"]);
+    if (hidden) {
+        return null;
+    }
+    const addTooltip = (component) => tooltip ? (_jsx(AdaptiveTooltip, Object.assign({ layoutType: layoutType }, tooltip, { children: component }))) : (component);
+    switch (variant) {
+        case BUTTON_TYPE.Filled:
+            return addTooltip(_jsx(ButtonFilled, Object.assign({}, buttonProps, commonProps)));
+        case BUTTON_TYPE.Outline:
+            return addTooltip(_jsx(ButtonOutline, Object.assign({}, buttonProps, commonProps)));
+        case BUTTON_TYPE.Tonal:
+            return addTooltip(_jsx(ButtonTonal, Object.assign({}, buttonProps, commonProps)));
+        case BUTTON_TYPE.Function:
+            return addTooltip(_jsx(ButtonFunction, Object.assign({}, buttonProps, commonProps)));
+        case BUTTON_TYPE.Simple:
+            return addTooltip(_jsx(ButtonSimple, Object.assign({}, buttonProps, commonProps)));
+        case BUTTON_TYPE.Kebab: {
+            const { button, list } = buttonProps;
+            return addTooltip(_jsx(ButtonKebab, { button: Object.assign(Object.assign({}, button), commonProps), list: list, layoutType: layoutType }));
+        }
+        case BUTTON_TYPE.Droplist: {
+            const { button, list } = buttonProps;
+            return addTooltip(_jsx(ButtonDroplist, { button: Object.assign(Object.assign({}, button), commonProps), list: list, layoutType: layoutType }));
+        }
+        default:
+            return null;
+    }
+}

package/dist/esm/helperComponents/Actions/DesktopActions.d.ts

@@ -0,0 +1,2 @@
+import { ActionsProps } from './types';
+export declare function DesktopActions({ items }: Pick<ActionsProps, 'items'>): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/Actions/DesktopActions.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { ActionView } from './ActionView';
+import { hasVisibleActions } from './helpers';
+import styles from './styles.module.css';
+export function DesktopActions({ items }) {
+    if (!hasVisibleActions(items)) {
+        return null;
+    }
+    return (_jsx("div", { className: styles.desktopActionsWrapper, children: items.map((action, index) => (_createElement(ActionView, Object.assign({}, action, { key: index, layoutType: 'desktop', commonProps: {
+                className: styles.button,
+            } })))) }));
+}

package/dist/esm/helperComponents/Actions/MobileActions.d.ts

@@ -0,0 +1,2 @@
+import { ActionsProps } from './types';
+export declare function MobileActions({ items }: ActionsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/Actions/MobileActions.js

@@ -0,0 +1,64 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { KebabSVG } from '@sbercloud/uikit-product-icons';
+import { MobileDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonOutline } from '@snack-uikit/button';
+import { useDynamicList } from '@snack-uikit/utils';
+import { ActionView } from './ActionView';
+import { BUTTON_TYPE } from './constants';
+import { hasVisibleActions } from './helpers';
+import styles from './styles.module.css';
+export function MobileActions({ items }) {
+    const containerRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const { visibleItems, hiddenItems } = useDynamicList({ parentContainerRef: containerRef, items, maxVisibleItems: 2 });
+    if (!hasVisibleActions(items)) {
+        return null;
+    }
+    const hiddenItemsWithKebab = hiddenItems.concat(visibleItems.filter(item => item.variant === 'kebab'));
+    const visibleItemsWithoutKebab = visibleItems.filter(item => item.variant !== 'kebab');
+    return (_jsxs("div", { className: styles.mobileActionsWrapper, ref: containerRef, children: [hiddenItemsWithKebab.length > 0 && (_jsx(MobileDroplist, { open: isOpen, onOpenChange: setIsOpen, items: hiddenItemsWithKebab.reduce((acc, action) => {
+                    var _a;
+                    switch (action.variant) {
+                        case BUTTON_TYPE.Tonal:
+                        case BUTTON_TYPE.Simple:
+                        case BUTTON_TYPE.Outline:
+                        case BUTTON_TYPE.Function:
+                        case BUTTON_TYPE.Filled: {
+                            acc.push(Object.assign(Object.assign({}, action), { content: { option: (_a = action.label) !== null && _a !== void 0 ? _a : '' }, onClick: event => {
+                                    var _a;
+                                    setIsOpen(false);
+                                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, event);
+                                }, beforeContent: action === null || action === void 0 ? void 0 : action.icon, itemWrapRender: action.tooltip
+                                    ? item => {
+                                        var _a, _b;
+                                        return (_jsx(MobileTooltip, Object.assign({ tip: (_b = (_a = action.tooltip) === null || _a === void 0 ? void 0 : _a.tip) !== null && _b !== void 0 ? _b : '' }, action.tooltip, { children: item })));
+                                    }
+                                    : undefined }));
+                            break;
+                        }
+                        case BUTTON_TYPE.Droplist:
+                        case BUTTON_TYPE.Kebab: {
+                            const needDivider = Boolean(action.variant === 'droplist' && (action === null || action === void 0 ? void 0 : action.button.label)) || acc.length > 0;
+                            acc.push(Object.assign(Object.assign({}, action), { type: 'group', label: action.variant === 'droplist' ? action === null || action === void 0 ? void 0 : action.button.label : undefined, divider: needDivider, items: action.list.items.map(item => (Object.assign(Object.assign({}, item), { onClick: event => {
+                                        var _a;
+                                        setIsOpen(false);
+                                        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                                        // @ts-expect-error
+                                        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, event);
+                                    } }))) }));
+                            break;
+                        }
+                        default: {
+                            break;
+                        }
+                    }
+                    return acc;
+                }, []), children: _jsx(ButtonOutline, { appearance: 'neutral', icon: _jsx(KebabSVG, {}), size: 's' }) })), visibleItemsWithoutKebab.map((action, index) => (_createElement(ActionView, Object.assign({}, action, { key: index, layoutType: 'mobile', commonProps: {
+                    className: styles.button,
+                    size: 's',
+                    fullWidth: true,
+                } }))))] }));
+}

package/dist/esm/helperComponents/Actions/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const BUTTON_TYPE: {
+    readonly Filled: "filled";
+    readonly Outline: "outline";
+    readonly Tonal: "tonal";
+    readonly Function: "function";
+    readonly Simple: "simple";
+    readonly Droplist: "droplist";
+    readonly Kebab: "kebab";
+};

package/dist/esm/helperComponents/Actions/constants.js

@@ -0,0 +1,9 @@
+export const BUTTON_TYPE = {
+    Filled: 'filled',
+    Outline: 'outline',
+    Tonal: 'tonal',
+    Function: 'function',
+    Simple: 'simple',
+    Droplist: 'droplist',
+    Kebab: 'kebab',
+};

package/dist/esm/helperComponents/Actions/helpers.d.ts

@@ -0,0 +1,2 @@
+import { Action } from './types';
+export declare function hasVisibleActions(actions: Action[]): boolean;

package/dist/esm/helperComponents/Actions/helpers.js

@@ -0,0 +1,3 @@
+export function hasVisibleActions(actions) {
+    return actions.some(action => !action.hidden);
+}

package/dist/esm/helperComponents/Actions/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DesktopActions';
+export * from './MobileActions';
+export * from './types';

package/dist/esm/helperComponents/Actions/index.js

@@ -0,0 +1,3 @@
+export * from './DesktopActions';
+export * from './MobileActions';
+export * from './types';