@snack-uikit/card 0.8.1 → 0.9.1-preview-57c837e3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.9.0 (2024-01-30)
+
+
+### BREAKING CHANGES
+
+
+* **FF-4075:** change usage droplist to list package ([4ce6391](https://github.com/cloud-ru-tech/snack-uikit/commit/4ce63915e838a46a3776e8e21393695a37d2fdd3))
+
+
+
+
 ## 0.8.1 (2024-01-23)
 
 ### Only dependencies have been changed

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

@@ -1,9 +1,14 @@
-import { ReactNode } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { ReactElement, ReactNode } from 'react';
+import { BaseItemProps } from '@snack-uikit/list';
+type Option = {
+    tagLabel?: string;
+    icon?: ReactElement;
+} & Pick<BaseItemProps, 'onClick' | 'content' | 'disabled'>;
 export type FunctionBadgeProps = {
     /** Иконка */
     icon?: ReactNode;
     /** Вложенные опции */
-    options: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
+    options: Option[];
 };
 export declare function FunctionBadge({ icon, options }: FunctionBadgeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FunctionBadge/FunctionBadge.js

@@ -1,23 +1,39 @@
+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 { createElement as _createElement } from "react";
-import { useCallback, useContext, useLayoutEffect, useState } from 'react';
-import { Droplist } from '@snack-uikit/droplist';
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 import { KebabSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 import { TEST_IDS } from '../../constants';
 import { FunctionBadgeContext } from '../../context';
 import styles from './styles.module.css';
 export function FunctionBadge({ icon, options }) {
     const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef(null);
     const { setVisible } = useContext(FunctionBadgeContext);
     useLayoutEffect(() => {
         setVisible && setVisible(isOpen);
     }, [isOpen, setVisible]);
-    const { firstElementRefCallback, triggerElementRef, handleDroplistFocusLeave, handleDroplistItemClick, handleTriggerKeyDown, handleDroplistItemKeyDown, } = Droplist.useKeyboardNavigation({ setDroplistOpen: setIsOpen });
     const onClick = useCallback((e) => {
         e.stopPropagation();
         setIsOpen(isOpen => !isOpen);
     }, []);
-    return (_jsx("span", { className: styles.wrapper, children: _jsx(Droplist, { open: isOpen, onOpenChange: setIsOpen, firstElementRefCallback: firstElementRefCallback, widthStrategy: 'gte', useScroll: true, onFocusLeave: handleDroplistFocusLeave, "data-test-id": TEST_IDS.droplist, triggerClassName: styles.triggerClassName, placement: 'bottom-end', triggerElement: _jsx("button", { "data-test-id": TEST_IDS.functionBadge, className: styles.button, onKeyDown: handleTriggerKeyDown, onClick: onClick, ref: triggerElementRef, children: icon || _jsx(KebabSVG, {}) }), children: options.map(item => (_createElement(Droplist.ItemSingle, Object.assign({}, item, { key: item.option, className: styles.item, "data-test-id": TEST_IDS.option, onClick: e => {
-                    handleDroplistItemClick(e, item.onClick);
-                }, onKeyDown: handleDroplistItemKeyDown })))) }) }));
+    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), { 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", { "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.8.1",
+  "version": "0.9.1-preview-57c837e3.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,14 +33,15 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.15.1",
-    "@snack-uikit/droplist": "0.12.5",
     "@snack-uikit/icon-predefined": "0.4.1",
     "@snack-uikit/icons": "0.20.0",
+    "@snack-uikit/list": "0.1.1-preview-57c837e3.0",
     "@snack-uikit/promo-tag": "0.4.1",
+    "@snack-uikit/tag": "0.6.4",
     "@snack-uikit/truncate-string": "0.4.5",
     "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2"
   },
-  "gitHead": "c292f4c45173928f57cc5c9f3cb02efb26887b64"
+  "gitHead": "0539acbacf5bc065cdb55739e06f63366ac9178b"
 }

package/src/components/FunctionBadge/FunctionBadge.tsx

@@ -1,21 +1,28 @@
-import { MouseEvent, ReactNode, useCallback, useContext, useLayoutEffect, useState } from 'react';
+import { MouseEvent, ReactElement, ReactNode, useCallback, useContext, useLayoutEffect, useRef, useState } from 'react';
 
-import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
+import { BaseItemProps, Droplist } from '@snack-uikit/list';
+import { Tag } from '@snack-uikit/tag';
 
 import { TEST_IDS } from '../../constants';
 import { FunctionBadgeContext } from '../../context';
 import styles from './styles.module.scss';
 
+type Option = {
+  tagLabel?: string;
+  icon?: ReactElement;
+} & Pick<BaseItemProps, 'onClick' | 'content' | 'disabled'>;
+
 export type FunctionBadgeProps = {
   /** Иконка */
   icon?: ReactNode;
   /** Вложенные опции */
-  options: Pick<ItemSingleProps, 'tagLabel' | 'onClick' | 'option' | 'icon' | 'disabled' | 'description' | 'caption'>[];
+  options: Option[];
 };
 
 export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const buttonRef = useRef(null);
 
   const { setVisible } = useContext(FunctionBadgeContext);
 
@@ -23,15 +30,6 @@ export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
     setVisible && setVisible(isOpen);
   }, [isOpen, setVisible]);
 
-  const {
-    firstElementRefCallback,
-    triggerElementRef,
-    handleDroplistFocusLeave,
-    handleDroplistItemClick,
-    handleTriggerKeyDown,
-    handleDroplistItemKeyDown,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen: setIsOpen });
-
   const onClick = useCallback((e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     setIsOpen(isOpen => !isOpen);
@@ -40,39 +38,28 @@ export function FunctionBadge({ icon, options }: FunctionBadgeProps) {
   return (
     <span className={styles.wrapper}>
       <Droplist
+        trigger='clickAndFocusVisible'
         open={isOpen}
         onOpenChange={setIsOpen}
-        firstElementRefCallback={firstElementRefCallback}
         widthStrategy='gte'
-        useScroll
-        onFocusLeave={handleDroplistFocusLeave}
+        scroll
         data-test-id={TEST_IDS.droplist}
-        triggerClassName={styles.triggerClassName}
         placement='bottom-end'
-        triggerElement={
-          <button
-            data-test-id={TEST_IDS.functionBadge}
-            className={styles.button}
-            onKeyDown={handleTriggerKeyDown}
-            onClick={onClick}
-            ref={triggerElementRef}
-          >
-            {icon || <KebabSVG />}
-          </button>
-        }
+        triggerElemRef={buttonRef}
+        items={options.map(({ icon, tagLabel, onClick, ...item }) => ({
+          ...item,
+          beforeContent: icon,
+          afterContent: tagLabel ? <Tag label={tagLabel} /> : undefined,
+          onClick: e => {
+            e.stopPropagation();
+            setIsOpen(false);
+            onClick?.(e);
+          },
+        }))}
       >
-        {options.map(item => (
-          <Droplist.ItemSingle
-            {...item}
-            key={item.option}
-            className={styles.item}
-            data-test-id={TEST_IDS.option}
-            onClick={e => {
-              handleDroplistItemClick(e, item.onClick);
-            }}
-            onKeyDown={handleDroplistItemKeyDown}
-          />
-        ))}
+        <button data-test-id={TEST_IDS.functionBadge} className={styles.button} onClick={onClick} ref={buttonRef}>
+          {icon || <KebabSVG />}
+        </button>
       </Droplist>
     </span>
   );