@snack-uikit/tree 0.5.22 → 0.6.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.1 (2024-05-13)
+
+
+### Bug Fixes
+
+* **FF-0000:** add forgotten ([96e1334](https://github.com/cloud-ru-tech/snack-uikit/commit/96e13348e646f581a97cabe873cdfe02c5a96658))
+
+
+
+
+
+# 0.6.0 (2024-05-13)
+
+
+### BREAKING CHANGES
+
+
+* **FF-0000:** change droplist -> list package ([24b0090](https://github.com/cloud-ru-tech/snack-uikit/commit/24b0090acb586d0032c61acb6099f80aef9bff32))
+
+
+
+
 ## 0.5.22 (2024-05-08)
 
 ### Only dependencies have been changed

package/README.md

@@ -47,8 +47,8 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | expandedNodes | `string[]` | - | Состояние для раскрытых элементов |
 | onExpand | `(expandedKeys: string[], nodeId: string) => void` | - | Колбэк при раскрытии/закрытии элементов |
 | onDataLoad | `(node: TreeNodeProps) => Promise<unknown>` | - | Колбэк для асинхронной загрузки данных при раскрытии дерева |
-| parentActions | `(node: TreeNodeProps) => DroplistItemSingleProps[]` | - | Дополнительные действия для элемента-родителя |
-| nodeActions | `(node: TreeNodeProps) => DroplistItemSingleProps[]` | - | Дополнительные действия для элемента-потомка |
+| parentActions | `(node: TreeNodeProps) => Item[]` | - | Дополнительные действия для элемента-родителя |
+| nodeActions | `(node: TreeNodeProps) => Item[]` | - | Дополнительные действия для элемента-потомка |
 | showIcons | `boolean` | true | Флаг отвечающий за отображение иконок у элементов дерева |
 | showLines | `boolean` | true | Флаг отвечающий за отображение линий вложенности |
 | className | `string` | - | CSS-класс |

package/dist/helperComponents/TreeNode/components/TreeNodeActions.d.ts

@@ -1,10 +1,10 @@
 import { Dispatch, SetStateAction } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { ItemProps } from '@snack-uikit/list';
 import { TreeNodeProps } from '../../../types';
 type TreeNodeActionsProps = {
     isDroplistOpen: boolean;
     setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-    getNodeActions(node: TreeNodeProps): ItemSingleProps[];
+    getNodeActions(node: TreeNodeProps): ItemProps[];
     node: TreeNodeProps;
     isDroplistTriggerFocused: boolean;
     focusNode(): void;

package/dist/helperComponents/TreeNode/components/TreeNodeActions.js

@@ -1,39 +1,61 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
+import { Droplist } from '@snack-uikit/list';
 import { TEST_IDS } from '../../../constants';
 import styles from '../styles.module.css';
-import { stopPropagationClick } from '../utils';
+import { stopPropagationClick, stopPropagationFocus } from '../utils';
 export function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, }) {
     const droplistActions = getNodeActions(node);
-    const { triggerElementRef, handleDroplistFocusLeave, handleDroplistItemKeyDown, handleTriggerKeyDown, handleDroplistItemClick, firstElementRefCallback, } = Droplist.useKeyboardNavigation({ setDroplistOpen });
+    const localRef = useRef(null);
     useEffect(() => {
-        if (triggerElementRef.current && isDroplistTriggerFocused) {
-            triggerElementRef.current.focus();
+        if (localRef.current && isDroplistTriggerFocused) {
+            localRef.current.focus();
         }
-    }, [isDroplistTriggerFocused, triggerElementRef]);
-    if (!droplistActions.length) {
-        return null;
-    }
+    }, [isDroplistTriggerFocused, localRef]);
     const handleKeyDown = e => {
-        handleTriggerKeyDown(e);
+        var _a;
         switch (e.key) {
             case 'Tab': {
+                focusNode();
+                setDroplistOpen(false);
                 e.preventDefault();
+                e.stopPropagation();
                 return;
             }
             case 'ArrowLeft': {
                 if (isDroplistTriggerFocused) {
                     focusNode();
                     setDroplistOpen(false);
+                    e.stopPropagation();
+                }
+                return;
+            }
+            case ' ':
+            case 'Enter': {
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowDown': {
+                if (isDroplistTriggerFocused) {
+                    setDroplistOpen(true);
                 }
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowUp': {
+                setDroplistOpen(false);
+                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                e.stopPropagation();
                 return;
             }
             default:
                 return;
         }
     };
-    return (_jsx("div", { role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick, children: _jsx(Droplist, { open: isDroplistOpen, onOpenChange: setDroplistOpen, onFocusLeave: handleDroplistFocusLeave, firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'xs', icon: _jsx(KebabSVG, { size: 24 }), onKeyDown: handleKeyDown, onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger }), children: droplistActions.map(action => (_jsx(Droplist.ItemSingle, Object.assign({}, action, { onKeyDown: handleDroplistItemKeyDown, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.droplistAction }), action.option))) }) }));
+    if (!droplistActions.length) {
+        return null;
+    }
+    return (_jsx("div", { role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick, onKeyDown: handleKeyDown, onFocus: stopPropagationFocus, children: _jsx(Droplist, { open: isDroplistOpen, onOpenChange: setDroplistOpen, items: droplistActions, closeDroplistOnItemClick: true, placement: 'bottom-end', triggerElemRef: localRef, size: 'm', children: _jsx(ButtonFunction, { size: 'xs', icon: _jsx(KebabSVG, {}), onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger }) }) }));
 }

package/dist/helperComponents/TreeNode/utils.d.ts

@@ -1,2 +1,3 @@
-import { MouseEvent } from 'react';
+import { FocusEvent, MouseEvent } from 'react';
 export declare function stopPropagationClick(e: MouseEvent<HTMLInputElement>): void;
+export declare function stopPropagationFocus(e: FocusEvent<HTMLInputElement>): void;

package/dist/helperComponents/TreeNode/utils.js

@@ -1,3 +1,6 @@
 export function stopPropagationClick(e) {
     e.stopPropagation();
 }
+export function stopPropagationFocus(e) {
+    e.stopPropagation();
+}

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { ItemProps } from '@snack-uikit/list';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { SELECTION_MODE } from './constants';
 export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
@@ -57,9 +57,9 @@ export type TreeCommonProps = {
     /** Колбэк для асинхронной загрузки данных при раскрытии дерева */
     onDataLoad?(node: TreeNodeProps): Promise<boolean | unknown>;
     /** Дополнительные действия для элемента-родителя */
-    parentActions?(node: TreeNodeProps): ItemSingleProps[];
+    parentActions?(node: TreeNodeProps): ItemProps[];
     /** Дополнительные действия для элемента-потомка */
-    nodeActions?(node: TreeNodeProps): ItemSingleProps[];
+    nodeActions?(node: TreeNodeProps): ItemProps[];
     /**
      * Флаг отвечающий за отображение иконок у элементов дерева
      * @default true

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.5.22",
+  "version": "0.6.1",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,8 +33,8 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/droplist": "0.13.18",
     "@snack-uikit/icons": "0.21.0",
+    "@snack-uikit/list": "0.13.0",
     "@snack-uikit/toggles": "0.9.9",
     "@snack-uikit/truncate-string": "0.4.14",
     "@snack-uikit/typography": "0.6.2",
@@ -43,5 +43,5 @@
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "59bd2ac46a341357d543ada864a34e09745b3e42"
+  "gitHead": "58d2de0677c973ff4510861699d6fc19b8912a44"
 }

package/src/helperComponents/TreeNode/components/TreeNodeActions.tsx

@@ -1,18 +1,18 @@
-import { Dispatch, KeyboardEventHandler, SetStateAction, useEffect } from 'react';
+import { Dispatch, KeyboardEventHandler, SetStateAction, useEffect, useRef } from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
-import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
 import { KebabSVG } from '@snack-uikit/icons';
+import { Droplist, ItemProps } from '@snack-uikit/list';
 
 import { TEST_IDS } from '../../../constants';
 import { TreeNodeProps } from '../../../types';
 import styles from '../styles.module.scss';
-import { stopPropagationClick } from '../utils';
+import { stopPropagationClick, stopPropagationFocus } from '../utils';
 
 type TreeNodeActionsProps = {
   isDroplistOpen: boolean;
   setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-  getNodeActions(node: TreeNodeProps): ItemSingleProps[];
+  getNodeActions(node: TreeNodeProps): ItemProps[];
   node: TreeNodeProps;
   isDroplistTriggerFocused: boolean;
   focusNode(): void;
@@ -30,79 +30,86 @@ export function TreeNodeActions({
 }: TreeNodeActionsProps) {
   const droplistActions = getNodeActions(node);
 
-  const {
-    triggerElementRef,
-    handleDroplistFocusLeave,
-    handleDroplistItemKeyDown,
-    handleTriggerKeyDown,
-    handleDroplistItemClick,
-    firstElementRefCallback,
-  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen });
+  const localRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
-    if (triggerElementRef.current && isDroplistTriggerFocused) {
-      triggerElementRef.current.focus();
+    if (localRef.current && isDroplistTriggerFocused) {
+      localRef.current.focus();
     }
-  }, [isDroplistTriggerFocused, triggerElementRef]);
-
-  if (!droplistActions.length) {
-    return null;
-  }
-
-  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = e => {
-    handleTriggerKeyDown(e);
+  }, [isDroplistTriggerFocused, localRef]);
 
+  const handleKeyDown: KeyboardEventHandler<HTMLElement> = e => {
     switch (e.key) {
       case 'Tab': {
+        focusNode();
+        setDroplistOpen(false);
         e.preventDefault();
+        e.stopPropagation();
         return;
       }
       case 'ArrowLeft': {
         if (isDroplistTriggerFocused) {
           focusNode();
           setDroplistOpen(false);
+          e.stopPropagation();
         }
         return;
       }
+      case ' ':
+      case 'Enter': {
+        e.stopPropagation();
+
+        return;
+      }
+      case 'ArrowDown': {
+        if (isDroplistTriggerFocused) {
+          setDroplistOpen(true);
+        }
+
+        e.stopPropagation();
+        return;
+      }
+      case 'ArrowUp': {
+        setDroplistOpen(false);
+        localRef.current?.focus();
+
+        e.stopPropagation();
+        return;
+      }
       default:
         return;
     }
   };
 
+  if (!droplistActions.length) {
+    return null;
+  }
+
   return (
     <div
       role='presentation'
       className={styles.treeNodeActions}
       data-focused={isDroplistTriggerFocused || undefined}
       onClick={stopPropagationClick}
+      onKeyDown={handleKeyDown}
+      onFocus={stopPropagationFocus}
     >
       <Droplist
         open={isDroplistOpen}
         onOpenChange={setDroplistOpen}
-        onFocusLeave={handleDroplistFocusLeave}
-        firstElementRefCallback={firstElementRefCallback}
-        triggerRef={triggerElementRef}
+        items={droplistActions}
+        closeDroplistOnItemClick
         placement='bottom-end'
-        triggerElement={
-          <ButtonFunction
-            size='xs'
-            icon={<KebabSVG size={24} />}
-            onKeyDown={handleKeyDown}
-            onBlur={onBlurActions}
-            tabIndex={-1}
-            data-test-id={TEST_IDS.droplistTrigger}
-          />
-        }
+        triggerElemRef={localRef}
+        size='m'
       >
-        {droplistActions.map(action => (
-          <Droplist.ItemSingle
-            key={action.option}
-            {...action}
-            onKeyDown={handleDroplistItemKeyDown}
-            onClick={e => handleDroplistItemClick(e, action.onClick)}
-            data-test-id={TEST_IDS.droplistAction}
-          />
-        ))}
+        <ButtonFunction
+          size='xs'
+          icon={<KebabSVG />}
+          onBlur={onBlurActions}
+          tabIndex={-1}
+          data-test-id={TEST_IDS.droplistTrigger}
+        />
       </Droplist>
     </div>
   );

package/src/helperComponents/TreeNode/utils.ts

@@ -1,5 +1,9 @@
-import { MouseEvent } from 'react';
+import { FocusEvent, MouseEvent } from 'react';
 
 export function stopPropagationClick(e: MouseEvent<HTMLInputElement>) {
   e.stopPropagation();
 }
+
+export function stopPropagationFocus(e: FocusEvent<HTMLInputElement>) {
+  e.stopPropagation();
+}

package/src/types.ts

@@ -1,6 +1,6 @@
 import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
 
-import { ItemSingleProps } from '@snack-uikit/droplist';
+import { ItemProps } from '@snack-uikit/list';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
 import { SELECTION_MODE } from './constants';
@@ -66,9 +66,9 @@ export type TreeCommonProps = {
   /** Колбэк для асинхронной загрузки данных при раскрытии дерева */
   onDataLoad?(node: TreeNodeProps): Promise<boolean | unknown>;
   /** Дополнительные действия для элемента-родителя */
-  parentActions?(node: TreeNodeProps): ItemSingleProps[];
+  parentActions?(node: TreeNodeProps): ItemProps[];
   /** Дополнительные действия для элемента-потомка */
-  nodeActions?(node: TreeNodeProps): ItemSingleProps[];
+  nodeActions?(node: TreeNodeProps): ItemProps[];
   /**
    * Флаг отвечающий за отображение иконок у элементов дерева
    * @default true