@cloud-ru/uikit-product-widget 0.9.4

package/dist/esm/helperComponents/Actions/styles.module.css

@@ -0,0 +1,35 @@
+.desktopActionsWrapper{
+  display:flex;
+  flex-direction:row-reverse;
+  align-items:center;
+  flex-shrink:0;
+  gap:var(--dimension-1m, 8px);
+  height:100%;
+}
+
+.mobileActionsWrapper{
+  display:flex;
+  gap:8px;
+  flex-shrink:0;
+  width:100%;
+  justify-content:stretch;
+  overflow-y:auto;
+  flex-direction:row-reverse;
+  -ms-overflow-style:none;
+  scrollbar-width:none;
+}
+.mobileActionsWrapper::-webkit-scrollbar{
+  display:none;
+}
+
+.button{
+  white-space:nowrap;
+}
+.button[data-full-width]:not([data-variant=icon-only]){
+  flex-shrink:0;
+  width:auto;
+}
+.button[data-variant=icon-only]{
+  flex-grow:0;
+  flex-shrink:0;
+}

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

@@ -0,0 +1,30 @@
+import { TooltipProps } from '@sbercloud/uikit-product-mobile-tooltip';
+import { ButtonFilledProps, ButtonFunctionProps, ButtonOutlineProps, ButtonSimpleProps, ButtonTonalProps } from '@snack-uikit/button';
+import { ButtonDroplistProps } from '../ButtonDroplist';
+import { ButtonKebabProps } from '../ButtonKebab';
+import { BUTTON_TYPE } from './constants';
+type ButtonKebabPropsWithoutLayout = Omit<ButtonKebabProps, 'layoutType'>;
+type ButtonDroplistWithoutLayout = Omit<ButtonDroplistProps, 'layoutType'>;
+export type Action = {
+    tooltip?: TooltipProps;
+    hidden?: boolean;
+} & (({
+    variant?: typeof BUTTON_TYPE.Filled;
+} & ButtonFilledProps) | ({
+    variant: typeof BUTTON_TYPE.Outline;
+} & ButtonOutlineProps) | ({
+    variant: typeof BUTTON_TYPE.Tonal;
+} & ButtonTonalProps) | ({
+    variant: typeof BUTTON_TYPE.Function;
+} & ButtonFunctionProps) | ({
+    variant: typeof BUTTON_TYPE.Simple;
+} & ButtonSimpleProps) | ({
+    variant: typeof BUTTON_TYPE.Kebab;
+} & ButtonKebabPropsWithoutLayout) | ({
+    variant: typeof BUTTON_TYPE.Droplist;
+} & ButtonDroplistWithoutLayout));
+export type ActionsProps = {
+    items: Action[];
+    maxVisibleItems?: number;
+};
+export {};

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

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

package/dist/esm/helperComponents/ButtonDropdown/ButtonDropdown.d.ts

@@ -0,0 +1,8 @@
+import { AdaptiveDropdownProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ButtonFunctionProps } from '@snack-uikit/button';
+export type ButtonDropdownProps = WithLayoutType<{
+    button: Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'>;
+    dropdown: Omit<AdaptiveDropdownProps, 'children' | 'layoutType' | 'placement'>;
+}>;
+export declare function ButtonDropdown({ layoutType, button, dropdown }: ButtonDropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ButtonDropdown/ButtonDropdown.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDownSVG, ChevronUpSVG } from '@sbercloud/uikit-product-icons';
+import { AdaptiveDropdown } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+export function ButtonDropdown({ layoutType, button, dropdown }) {
+    const [open, onOpenChange] = useValueControl({ onChange: dropdown.onOpenChange, value: dropdown.open });
+    const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+    return (_jsx(AdaptiveDropdown, Object.assign({}, dropdown, { open: open, onOpenChange: onOpenChange, layoutType: layoutType, children: _jsx(ButtonFunction, Object.assign({}, button, { icon: _jsx(Icon, {}), iconPosition: 'after', appearance: 'neutral' })) })));
+}

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

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

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

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

package/dist/esm/helperComponents/ButtonDroplist/ButtonDroplist.d.ts

@@ -0,0 +1,12 @@
+import { AdaptiveDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ButtonFilledProps, ButtonFunctionProps } from '@snack-uikit/button';
+export type ButtonDroplistProps = WithLayoutType<{
+    button: (Omit<ButtonFilledProps, 'appearance'> & {
+        buttonType?: 'filled';
+    }) | (Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'> & {
+        buttonType?: 'function';
+    });
+    list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'className' | 'open' | 'onOpenChange'>;
+}>;
+export declare function ButtonDroplist({ layoutType, button, list }: ButtonDroplistProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ButtonDroplist/ButtonDroplist.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ChevronDownSVG, ChevronUpSVG } from '@sbercloud/uikit-product-icons';
+import { AdaptiveDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+export function ButtonDroplist({ layoutType, button, list }) {
+    var _a;
+    const [open, onOpenChange] = useValueControl({ onChange: list.onOpenChange, value: list.open });
+    const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+    const buttonType = (_a = button.buttonType) !== null && _a !== void 0 ? _a : 'function';
+    const Button = buttonType === 'filled' ? ButtonFilled : ButtonFunction;
+    const buttonProps = useMemo(() => buttonType === 'filled' ? button : Object.assign(Object.assign({}, button), { appearance: 'neutral', icon: _jsx(Icon, {}), iconPosition: 'after' }), [buttonType, button, Icon]);
+    return (_jsx(AdaptiveDroplist, Object.assign({}, list, { open: open, onOpenChange: onOpenChange, layoutType: layoutType, selection: {
+            mode: 'single',
+            value: 'null',
+        }, size: 's', children: _jsx(Button, Object.assign({}, buttonProps)) })));
+}

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

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

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

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

package/dist/esm/helperComponents/ButtonKebab/ButtonKebab.d.ts

@@ -0,0 +1,8 @@
+import { AdaptiveDroplistProps } from '@sbercloud/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@sbercloud/uikit-product-utils';
+import { ButtonOutlineProps } from '@snack-uikit/button';
+export type ButtonKebabProps = WithLayoutType<{
+    button?: Omit<ButtonOutlineProps, 'label' | 'icon'>;
+    list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'open' | 'onOpenChange' | 'className'>;
+}>;
+export declare function ButtonKebab({ layoutType, button, list }: ButtonKebabProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/ButtonKebab/ButtonKebab.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { KebabSVG } from '@sbercloud/uikit-product-icons';
+import { AdaptiveDroplist } from '@sbercloud/uikit-product-mobile-dropdown';
+import { ButtonOutline } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+export function ButtonKebab({ layoutType, button, list }) {
+    const [open, onOpenChange] = useValueControl({ onChange: list.onOpenChange, value: list.open });
+    return (_jsx(AdaptiveDroplist, Object.assign({}, list, { open: open, onOpenChange: onOpenChange, layoutType: layoutType, selection: {
+            mode: 'single',
+            value: 'null',
+        }, placement: 'bottom-end', size: 's', children: _jsx(ButtonOutline, Object.assign({}, button, { icon: _jsx(KebabSVG, {}), appearance: 'neutral' })) })));
+}

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

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

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

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

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

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

package/dist/esm/helperComponents/index.js

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

package/dist/esm/index.d.ts

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

package/dist/esm/index.js

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

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@cloud-ru/uikit-product-widget",
+  "title": "Widget",
+  "version": "0.9.4",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "types": "./dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/cjs/index.js"
+  },
+  "files": [
+    "dist/esm",
+    "dist/cjs",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "homepage": "https://gitverse.ru/cloud-ru-tech/uikit-product/-/tree/master/packages/widget",
+  "repository": {
+    "type": "git",
+    "url": "https://gitverse.ru/cloud-ru-tech/uikit-product.git",
+    "directory": "packages/widget"
+  },
+  "author": {
+    "name": "Akhremenko Grigorii",
+    "url": "https://github.com/AGrigorii"
+  },
+  "license": "Apache-2.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {},
+  "dependencies": {
+    "@cloud-ru/uikit-product-card-predefined": "0.8.12",
+    "@cloud-ru/uikit-product-icons": "15.1.1",
+    "@cloud-ru/uikit-product-mobile-carousel": "0.1.12",
+    "@cloud-ru/uikit-product-mobile-dropdown": "0.9.21",
+    "@cloud-ru/uikit-product-mobile-tooltip": "0.4.65",
+    "@cloud-ru/uikit-product-title-clickable": "0.0.48",
+    "@cloud-ru/uikit-product-utils": "7.0.0",
+    "@snack-uikit/button": "0.19.16",
+    "@snack-uikit/info-block": "0.6.33",
+    "@snack-uikit/link": "0.15.9",
+    "@snack-uikit/skeleton": "0.6.2",
+    "@snack-uikit/typography": "0.8.4",
+    "@snack-uikit/utils": "3.7.0",
+    "classnames": "2.5.1"
+  },
+  "peerDependencies": {
+    "@cloud-ru/uikit-product-locale": "*"
+  },
+  "gitHead": "e8bd79bc92b26a8f52611972eec98a867536ccd3"
+}

package/src/components/ProductsWidget/ProductsWidget.tsx

@@ -0,0 +1,66 @@
+import { ReactNode, useMemo } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveCarousel, CarouselProps } from '@cloud-ru/uikit-product-mobile-carousel';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/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.scss';
+import { getLoadingCards } from './utils/getLoadingCards';
+import { getProductColumns } from './utils/getProductColumns';
+
+export type ProductsWidgetProps = WithLayoutType<
+  Pick<CarouselProps, 'arrows' | 'pagination'> &
+    WithSupportProps<{
+      loading?: boolean;
+      cards: ReactNode[];
+      columnSize?: number;
+      rowSize?: number;
+    }>
+>;
+
+export function ProductsWidget({
+  layoutType,
+  cards = [],
+  loading = false,
+  columnSize: columnSizeProp = COLUMN_SIZE,
+  rowSize: rowSizeProp = ROW_SIZE,
+  arrows = true,
+  pagination = true,
+  ...rest
+}: ProductsWidgetProps) {
+  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 (
+    <div className={styles.wrapper} {...extractSupportProps(rest)}>
+      <div className={styles.headerWrapper}>
+        <Typography.SansTitleL tag='h5'>{t('Products.title')}</Typography.SansTitleL>
+      </div>
+
+      <AdaptiveCarousel
+        layoutType={layoutType}
+        gap='8px'
+        infiniteScroll={!isMobile}
+        swipe={false}
+        showItems={rowSize}
+        arrows={arrows}
+        pagination={pagination}
+      >
+        {productsCards.map((d, index) => (
+          <div className={styles.column} key={index}>
+            {d}
+          </div>
+        ))}
+      </AdaptiveCarousel>
+    </div>
+  );
+}

package/src/components/ProductsWidget/constants.ts

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

package/src/components/ProductsWidget/index.ts

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

package/src/components/ProductsWidget/styles.module.scss

@@ -0,0 +1,40 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  grid-column: span 12;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-1m;
+}
+
+.headerWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: styles-theme-variables.$dimension-050m;
+}
+
+.arrowWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.pageNumber {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-label-l);
+
+  color: styles-theme-variables.$sys-neutral-text-main;
+}
+
+.pageTotal {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-m);
+
+  margin-right: styles-theme-variables.$dimension-050m;
+  color: styles-theme-variables.$sys-neutral-text-support;
+}

package/src/components/ProductsWidget/utils/getLoadingCards.tsx

@@ -0,0 +1,23 @@
+import { Skeleton } from '@snack-uikit/skeleton';
+
+import { COLUMN_SIZE, ROW_SIZE } from '../constants';
+
+type GetLoadingCardsParams = {
+  columnSize?: number;
+  rowSize?: number;
+};
+
+export function getLoadingCards({ columnSize = COLUMN_SIZE, rowSize = ROW_SIZE }: GetLoadingCardsParams) {
+  const result = [];
+
+  for (let i = 0; i < rowSize; i++) {
+    const columnSkeletons = [];
+    for (let j = 0; j < columnSize; j++) {
+      columnSkeletons.push(<Skeleton loading borderRadius={8} height={48} />);
+    }
+
+    result.push(columnSkeletons);
+  }
+
+  return result;
+}

package/src/components/ProductsWidget/utils/getProductColumns.tsx

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+
+type GetProductColumnsParams = {
+  cards: ReactNode[];
+  columnSize: number;
+  rowSize: number;
+};
+
+export function getProductColumns({ cards, columnSize }: GetProductColumnsParams) {
+  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/src/components/SolutionsWidget/SolutionsWidget.tsx

@@ -0,0 +1,43 @@
+import { CardSuggest, CardSuggestProps } from '@cloud-ru/uikit-product-card-predefined';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { extractSupportProps, WithLayoutType, WithSupportProps } from '@cloud-ru/uikit-product-utils';
+import { Link, LinkProps } from '@snack-uikit/link';
+import { Typography } from '@snack-uikit/typography';
+
+import styles from './styles.module.scss';
+
+export type SolutionsWidgetProps = WithLayoutType<
+  WithSupportProps<{
+    moreLink?: Pick<LinkProps, 'onClick' | 'href'>;
+    cards: Pick<CardSuggestProps, 'description' | 'title' | 'onClick'>[];
+  }>
+>;
+
+export function SolutionsWidget({ layoutType, moreLink, cards, ...rest }: SolutionsWidgetProps) {
+  const { t } = useLocale('Widget');
+  const isMobile = layoutType === 'mobile';
+
+  return (
+    <div className={styles.wrapper} {...extractSupportProps(rest)}>
+      <div className={styles.header}>
+        <Typography.SansTitleL tag='h5'>{t('Solutions.title')}</Typography.SansTitleL>
+
+        {moreLink && (
+          <Link
+            text={t('Solutions.link')}
+            size='m'
+            appearance='neutral'
+            onClick={moreLink?.onClick}
+            href={moreLink?.href}
+          />
+        )}
+      </div>
+
+      <div className={styles.cards} data-mobile={isMobile || undefined}>
+        {cards.map(({ description, title, onClick }) => (
+          <CardSuggest className={styles.card} key={title} description={description} title={title} onClick={onClick} />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/SolutionsWidget/index.ts

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

package/src/components/SolutionsWidget/styles.module.scss

@@ -0,0 +1,31 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-2m;
+  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: styles-theme-variables.$dimension-1m;
+
+  &[data-mobile] {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+}
+
+.card {
+  flex-grow: 0;
+}

package/src/components/Widget/Widget.tsx

@@ -0,0 +1,173 @@
+import cn from 'classnames';
+import { MouseEvent as ReactMouseEvent, ReactNode } from 'react';
+
+import { CrossSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveDroplistProps, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { TitleClickable } from '@cloud-ru/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 { Action } from '../../helperComponents/Actions/types';
+import { ButtonKebab } from '../../helperComponents/ButtonKebab';
+import styles from './styles.module.scss';
+import { WidgetProps } from './types';
+
+export function Widget({
+  header,
+  children,
+  actions = [],
+  wide = false,
+  state = 'default',
+  loadingState,
+  errorState,
+  className,
+  layoutType,
+  ...rest
+}: WidgetProps) {
+  const { t } = useLocale('Widget');
+  const renderContent = (): ReactNode => {
+    switch (state) {
+      case 'loading': {
+        if (loadingState?.loadingContent) {
+          return loadingState.loadingContent;
+        }
+
+        if (loadingState?.showSkeleton) {
+          return (
+            <div className={styles.skeletonContent}>
+              <Skeleton loading width='100%' height={80} borderRadius={8} />
+            </div>
+          );
+        }
+
+        return null;
+      }
+
+      case 'error': {
+        return (
+          <InfoBlock
+            size='m'
+            icon={errorState?.errorIcon ?? { icon: CrossSVG, appearance: 'neutral', decor: true }}
+            title={errorState?.errorTitle || t('dataErrorTitle')}
+            description={errorState?.errorDescription || t('dataErrorDescription')}
+          />
+        );
+      }
+
+      case 'default':
+      default: {
+        return children;
+      }
+    }
+  };
+
+  const renderActionsSkeleton = () => (
+    <div className={cn(styles.actionsWrapper, { [styles.actionsWide]: wide })}>
+      <div className={styles.skeletonActions}>
+        {wide ? (
+          <>
+            <Skeleton loading width={96} height={32} borderRadius={8} />
+            <Skeleton loading width={32} height={32} borderRadius={8} />
+          </>
+        ) : (
+          <>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <Skeleton loading width={'100%'} height={32} borderRadius={8} />
+            </div>
+            <Skeleton loading width={32} height={32} borderRadius={8} />
+          </>
+        )}
+      </div>
+    </div>
+  );
+
+  const getPrimaryAction = (items: Action[]): Action | undefined => {
+    const index = items.findIndex(a => a.variant !== BUTTON_TYPE.Droplist && a.variant !== BUTTON_TYPE.Kebab);
+    return index >= 0 ? items[index] : undefined;
+  };
+
+  const buildKebabItems = (items: Action[]): NonNullable<MobileDroplistProps['items']> =>
+    items.reduce<NonNullable<MobileDroplistProps['items']>>(
+      (acc, action) => {
+        if (action.variant === BUTTON_TYPE.Droplist || action.variant === BUTTON_TYPE.Kebab) {
+          acc.push({
+            type: 'group',
+            label: action.variant === BUTTON_TYPE.Droplist ? action.button?.label : undefined,
+            items: action.list.items,
+            divider: acc.length > 0,
+          });
+        } else {
+          acc.push({
+            content: { option: action.label ?? '' },
+            beforeContent: action.icon,
+            onClick: (event: ReactMouseEvent<HTMLElement>) => {
+              action.onClick?.(event as never);
+            },
+          });
+        }
+        return acc;
+      },
+      [] as NonNullable<MobileDroplistProps['items']>,
+    );
+
+  const renderActions = () => {
+    if (state === 'loading') {
+      return renderActionsSkeleton();
+    }
+
+    if (!actions.length) return null;
+
+    if (wide) {
+      const isMobile = layoutType === 'mobile';
+      return (
+        <div className={cn(styles.actionsWrapper, { [styles.actionsWide]: wide })}>
+          {isMobile ? <MobileActions items={actions} /> : <DesktopActions items={actions} />}
+        </div>
+      );
+    }
+
+    const primaryAction = getPrimaryAction(actions);
+    const kebabItemsMobile = buildKebabItems(actions);
+
+    return (
+      <div className={cn(styles.actionsWrapper)}>
+        {primaryAction && (
+          <ActionView {...primaryAction} layoutType={layoutType} commonProps={{ size: 's', fullWidth: true }} />
+        )}
+        <ButtonKebab
+          layoutType={layoutType}
+          list={{
+            items: kebabItemsMobile as unknown as AdaptiveDroplistProps['items'],
+            closeDroplistOnItemClick: true,
+          }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn(styles.widget, className)} {...extractSupportProps(rest)}>
+      <div className={styles.widgetHeader}>
+        {state === 'loading' ? (
+          <div className={styles.skeletonHeader}>
+            <Skeleton loading width={wide ? 120 : '100%'} height={32} borderRadius={8} />
+          </div>
+        ) : (
+          <TitleClickable {...header} className={cn(styles.titleClickable, header.className)} />
+        )}
+
+        {wide && renderActions()}
+      </div>
+
+      <div className={styles.widgetContent}>{renderContent()}</div>
+
+      {!wide && renderActions()}
+    </div>
+  );
+}