@snack-uikit/card 0.20.8 → 0.20.9-preview-ac7bb67c.0

package/dist/cjs/components/FunctionBadge/FunctionBadge.d.ts

@@ -1,9 +1,9 @@
 import { ReactElement, ReactNode } from 'react';
-import { BaseItemProps } from '@snack-uikit/list';
-type Option = {
+import { DroplistProps } from '@snack-uikit/list';
+type Option = DroplistProps['items'][number] & {
     tagLabel?: string;
     icon?: ReactElement;
-} & Pick<BaseItemProps, 'onClick' | 'content' | 'disabled'>;
+};
 export type FunctionBadgeProps = {
     /** Иконка */
     icon?: ReactNode;

package/dist/cjs/components/FunctionBadge/FunctionBadge.js

@@ -43,6 +43,38 @@ function FunctionBadge(_ref) {
     e.stopPropagation();
     setIsOpen(isOpen => !isOpen);
   }, []);
+  const processItem = (0, react_1.useCallback)(option => {
+    var _a;
+    const {
+        icon,
+        tagLabel
+      } = option,
+      item = __rest(option, ["icon", "tagLabel"]);
+    // GroupItem и GroupSelectItem не имеют beforeContent, afterContent, onClick
+    if ('type' in item && (item.type === 'group' || item.type === 'group-select')) {
+      return item;
+    }
+    // BaseItem, AccordionItem, NextListItem имеют beforeContent, afterContent, onClick
+    const baseItem = item;
+    const itemOnClick = baseItem.onClick;
+    // Рекурсивно обрабатываем вложенные items для next-list и collapse
+    const processedItems = 'items' in item && 'type' in item && (item.type === 'next-list' || item.type === 'collapse') ? (_a = item.items) === null || _a === void 0 ? void 0 : _a.map(nestedItem => processItem(nestedItem)) : undefined;
+    return Object.assign(Object.assign(Object.assign({}, item), processedItems ? {
+      items: processedItems
+    } : {}), {
+      className: styles_module_scss_1.default.item,
+      beforeContent: icon !== null && icon !== void 0 ? icon : baseItem.beforeContent,
+      afterContent: tagLabel ? (0, jsx_runtime_1.jsx)(tag_1.Tag, {
+        label: tagLabel
+      }) : baseItem.afterContent,
+      onClick: e => {
+        e.stopPropagation();
+        setIsOpen(false);
+        itemOnClick === null || itemOnClick === void 0 ? void 0 : itemOnClick(e);
+      }
+    });
+  }, []);
+  const items = options.map(option => processItem(option));
   return (0, jsx_runtime_1.jsx)("span", {
     className: styles_module_scss_1.default.wrapper,
     children: (0, jsx_runtime_1.jsx)(list_1.Droplist, {
@@ -54,26 +86,7 @@ function FunctionBadge(_ref) {
       "data-test-id": constants_1.TEST_IDS.droplist,
       placement: 'bottom-end',
       triggerElemRef: buttonRef,
-      items: options.map(_a => {
-        var {
-            icon,
-            tagLabel,
-            onClick
-          } = _a,
-          item = __rest(_a, ["icon", "tagLabel", "onClick"]);
-        return Object.assign(Object.assign({}, item), {
-          className: styles_module_scss_1.default.item,
-          beforeContent: icon,
-          afterContent: tagLabel ? (0, jsx_runtime_1.jsx)(tag_1.Tag, {
-            label: tagLabel
-          }) : undefined,
-          onClick: e => {
-            e.stopPropagation();
-            setIsOpen(false);
-            onClick === null || onClick === void 0 ? void 0 : onClick(e);
-          }
-        });
-      }),
+      items: items,
       children: (0, jsx_runtime_1.jsx)("button", {
         type: 'button',
         "data-test-id": constants_1.TEST_IDS.functionBadge,

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

@@ -1,9 +1,9 @@
 import { ReactElement, ReactNode } from 'react';
-import { BaseItemProps } from '@snack-uikit/list';
-type Option = {
+import { DroplistProps } from '@snack-uikit/list';
+type Option = DroplistProps['items'][number] & {
     tagLabel?: string;
     icon?: ReactElement;
-} & Pick<BaseItemProps, 'onClick' | 'content' | 'disabled'>;
+};
 export type FunctionBadgeProps = {
     /** Иконка */
     icon?: ReactNode;

package/dist/esm/components/FunctionBadge/FunctionBadge.js

@@ -29,12 +29,26 @@ export function FunctionBadge({ icon, options }) {
         e.stopPropagation();
         setIsOpen(isOpen => !isOpen);
     }, []);
-    return (_jsx("span", { className: styles.wrapper, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, onOpenChange: setIsOpen, widthStrategy: 'gte', scroll: true, "data-test-id": TEST_IDS.droplist, placement: 'bottom-end', triggerElemRef: buttonRef, items: options.map((_a) => {
-                var { icon, tagLabel, onClick } = _a, item = __rest(_a, ["icon", "tagLabel", "onClick"]);
-                return (Object.assign(Object.assign({}, item), { className: styles.item, beforeContent: icon, afterContent: tagLabel ? _jsx(Tag, { label: tagLabel }) : undefined, onClick: e => {
-                        e.stopPropagation();
-                        setIsOpen(false);
-                        onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                    } }));
-            }), children: _jsx("button", { type: 'button', "data-test-id": TEST_IDS.functionBadge, className: styles.button, onClick: onClick, ref: buttonRef, children: icon || _jsx(KebabSVG, {}) }) }) }));
+    const processItem = useCallback((option) => {
+        var _a;
+        const { icon, tagLabel } = option, item = __rest(option, ["icon", "tagLabel"]);
+        // GroupItem и GroupSelectItem не имеют beforeContent, afterContent, onClick
+        if ('type' in item && (item.type === 'group' || item.type === 'group-select')) {
+            return item;
+        }
+        // BaseItem, AccordionItem, NextListItem имеют beforeContent, afterContent, onClick
+        const baseItem = item;
+        const itemOnClick = baseItem.onClick;
+        // Рекурсивно обрабатываем вложенные items для next-list и collapse
+        const processedItems = 'items' in item && 'type' in item && (item.type === 'next-list' || item.type === 'collapse')
+            ? (_a = item.items) === null || _a === void 0 ? void 0 : _a.map(nestedItem => processItem(nestedItem))
+            : undefined;
+        return Object.assign(Object.assign(Object.assign({}, item), (processedItems ? { items: processedItems } : {})), { className: styles.item, beforeContent: icon !== null && icon !== void 0 ? icon : baseItem.beforeContent, afterContent: tagLabel ? _jsx(Tag, { label: tagLabel }) : baseItem.afterContent, onClick: (e) => {
+                e.stopPropagation();
+                setIsOpen(false);
+                itemOnClick === null || itemOnClick === void 0 ? void 0 : itemOnClick(e);
+            } });
+    }, []);
+    const items = options.map(option => processItem(option));
+    return (_jsx("span", { className: styles.wrapper, children: _jsx(Droplist, { trigger: 'clickAndFocusVisible', open: isOpen, onOpenChange: setIsOpen, widthStrategy: 'gte', scroll: true, "data-test-id": TEST_IDS.droplist, placement: 'bottom-end', triggerElemRef: buttonRef, items: items, children: _jsx("button", { type: 'button', "data-test-id": TEST_IDS.functionBadge, className: styles.button, onClick: onClick, ref: buttonRef, children: icon || _jsx(KebabSVG, {}) }) }) }));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Card",
-  "version": "0.20.8",
+  "version": "0.20.9-preview-ac7bb67c.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -48,5 +48,5 @@
     "classnames": "2.5.1",
     "merge-refs": "1.3.0"
   },
-  "gitHead": "fc6ef99551b60c7b9d2f8cacc87cfb0fd35030bf"
+  "gitHead": "cd872b7343e3a29567c9cf7840344a8831512d6a"
 }

package/src/components/FunctionBadge/FunctionBadge.tsx

@@ -1,7 +1,7 @@
 import { MouseEvent, ReactElement, ReactNode, useCallback, useContext, useRef, useState } from 'react';
 
 import { KebabSVG } from '@snack-uikit/icons';
-import { BaseItemProps, Droplist } from '@snack-uikit/list';
+import { Droplist, DroplistProps } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { useLayoutEffect } from '@snack-uikit/utils';
 
@@ -9,10 +9,10 @@ import { TEST_IDS } from '../../constants';
 import { FunctionBadgeContext } from '../../context';
 import styles from './styles.module.scss';
 
-type Option = {
+type Option = DroplistProps['items'][number] & {
   tagLabel?: string;
   icon?: ReactElement;
-} & Pick<BaseItemProps, 'onClick' | 'content' | 'disabled'>;
+};
 
 export type FunctionBadgeProps = {
   /** Иконка */
@@ -36,6 +36,46 @@ export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
     setIsOpen(isOpen => !isOpen);
   }, []);
 
+  const processItem = useCallback((option: Option): typeof option => {
+    const { icon, tagLabel, ...item } = option;
+
+    // GroupItem и GroupSelectItem не имеют beforeContent, afterContent, onClick
+    if ('type' in item && (item.type === 'group' || item.type === 'group-select')) {
+      return item;
+    }
+
+    // BaseItem, AccordionItem, NextListItem имеют beforeContent, afterContent, onClick
+    const baseItem = item as {
+      beforeContent?: ReactNode;
+      afterContent?: ReactNode;
+      onClick?: (e: MouseEvent<HTMLElement>) => void;
+      items?: Option[];
+      type?: string;
+    };
+    const itemOnClick = baseItem.onClick;
+
+    // Рекурсивно обрабатываем вложенные items для next-list и collapse
+    const processedItems =
+      'items' in item && 'type' in item && (item.type === 'next-list' || item.type === 'collapse')
+        ? item.items?.map(nestedItem => processItem(nestedItem as Option))
+        : undefined;
+
+    return {
+      ...item,
+      ...(processedItems ? { items: processedItems } : {}),
+      className: styles.item,
+      beforeContent: icon ?? baseItem.beforeContent,
+      afterContent: tagLabel ? <Tag label={tagLabel} /> : baseItem.afterContent,
+      onClick: (e: MouseEvent<HTMLElement>) => {
+        e.stopPropagation();
+        setIsOpen(false);
+        itemOnClick?.(e);
+      },
+    };
+  }, []);
+
+  const items = options.map(option => processItem(option));
+
   return (
     <span className={styles.wrapper}>
       <Droplist
@@ -47,17 +87,7 @@ export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
         data-test-id={TEST_IDS.droplist}
         placement='bottom-end'
         triggerElemRef={buttonRef}
-        items={options.map(({ icon, tagLabel, onClick, ...item }) => ({
-          ...item,
-          className: styles.item,
-          beforeContent: icon,
-          afterContent: tagLabel ? <Tag label={tagLabel} /> : undefined,
-          onClick: e => {
-            e.stopPropagation();
-            setIsOpen(false);
-            onClick?.(e);
-          },
-        }))}
+        items={items}
       >
         <button
           type='button'