@snack-uikit/tree 0.8.19 → 0.8.20

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -1,5 +1,14 @@
 import cn from 'classnames';
-import { FocusEvent, KeyboardEventHandler, MouseEventHandler, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  FocusEvent,
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEventHandler,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
@@ -27,276 +36,288 @@ type TreeNodeComponentProps = TreeNodeProps & {
   tabIndexAvailable?: boolean;
 };
 
-export function TreeNode({
-  id,
-  title,
-  icon = <FileSVG size={24} />,
-  expandedIcon = <FolderOpenSVG size={24} />,
-  collapsedIcon = <FolderSVG size={24} />,
-  disabled,
-  onClick,
-  nested,
-  className,
-  onChevronClick,
-  onKeyDown,
-  isLoading,
-  parentNode,
-  tabIndexAvailable,
-  ...rest
-}: TreeNodeComponentProps) {
-  const {
-    isMultiSelect,
-    isSelectable,
-    onNodeClick,
-    selected,
-    expandedNodes,
-    onSelect,
-    nodeActions,
-    parentActions,
-    setFocusPosition,
-    resetFocusPosition,
-    focusedNodeId,
-    setFocusIndex,
-    focusableNodeIds,
-    showToggle,
-    showLines,
-    showIcons,
-  } = useTreeContext();
-
-  const [isDroplistOpen, setDroplistOpen] = useState(false);
-  const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
-
-  const ref = useRef<HTMLDivElement | null>(null);
-
-  const isExpandable = Array.isArray(nested);
-  const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
-
-  const nestedNodesSelection = useMemo(() => {
-    if (!nested || !selected) return undefined;
-
-    return checkNestedNodesSelection(nested, Array.isArray(selected) ? selected : [selected]);
-  }, [nested, selected]);
-
-  const isSelected =
-    (Array.isArray(selected) ? selected.includes(id) || nestedNodesSelection?.allSelected : selected === id) || false;
-
-  const isFocused = focusedNodeId === id;
-
-  useEffect(() => {
-    if (ref.current && isFocused) {
-      ref.current.focus();
-    }
-  }, [isFocused]);
-
-  const treeNodeIcon = useMemo(() => {
-    if (!showIcons) return undefined;
-
-    if (isExpandable) {
-      return isExpanded ? expandedIcon : collapsedIcon;
-    }
-
-    return icon;
-  }, [showIcons, isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
-
-  const handleClick: TreeNodeProps['onClick'] = e => {
-    onNodeClick(
-      {
-        id,
-        title,
-        disabled,
-        nested,
-        onClick,
-      },
-      e,
-    );
-  };
-
-  const handleSelect = () => {
-    onSelect(
-      {
-        id,
-        disabled,
-        nested,
-      },
+export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
+  (
+    {
+      id,
+      title,
+      icon = <FileSVG size={24} />,
+      expandedIcon = <FolderOpenSVG size={24} />,
+      collapsedIcon = <FolderSVG size={24} />,
+      disabled,
+      onClick,
+      nested,
+      className,
+      onChevronClick,
+      onKeyDown,
+      isLoading,
       parentNode,
-    );
-  };
+      tabIndexAvailable,
+      ...rest
+    },
+    ref,
+  ) => {
+    const {
+      isMultiSelect,
+      isSelectable,
+      onNodeClick,
+      selected,
+      expandedNodes,
+      onSelect,
+      nodeActions,
+      parentActions,
+      setFocusPosition,
+      resetFocusPosition,
+      focusedNodeId,
+      setFocusIndex,
+      focusableNodeIds,
+      showToggle,
+      showLines,
+      showIcons,
+    } = useTreeContext();
+
+    const [isDroplistOpen, setDroplistOpen] = useState(false);
+    const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
+
+    const contentRef = useRef<HTMLDivElement | null>(null);
+
+    const isExpandable = Array.isArray(nested);
+    const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
+
+    const nestedNodesSelection = useMemo(() => {
+      if (!nested || !selected) return undefined;
+
+      return checkNestedNodesSelection(nested, Array.isArray(selected) ? selected : [selected]);
+    }, [nested, selected]);
+
+    const isSelected =
+      (Array.isArray(selected) ? selected.includes(id) || nestedNodesSelection?.allSelected : selected === id) || false;
+
+    const isFocused = focusedNodeId === id;
+
+    useEffect(() => {
+      if (contentRef.current && isFocused) {
+        contentRef.current.focus();
+      }
+    }, [isFocused]);
 
-  const handleFocus = (e?: FocusEvent) => {
-    setFocusPosition(id);
+    const treeNodeIcon = useMemo(() => {
+      if (!showIcons) return undefined;
 
-    if (!e) {
-      setFocusDroplistTrigger(false);
-      ref.current?.focus();
-    }
-  };
+      if (isExpandable) {
+        return isExpanded ? expandedIcon : collapsedIcon;
+      }
 
-  const handleBlurActions = () => {
-    if (isDroplistTriggerFocused && !isDroplistOpen) {
-      setFocusDroplistTrigger(false);
+      return icon;
+    }, [showIcons, isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
+
+    const handleClick: TreeNodeProps['onClick'] = e => {
+      onNodeClick(
+        {
+          id,
+          title,
+          disabled,
+          nested,
+          onClick,
+        },
+        e,
+      );
+    };
+
+    const handleSelect = () => {
+      onSelect(
+        {
+          id,
+          disabled,
+          nested,
+        },
+        parentNode,
+      );
+    };
+
+    const handleFocus = (e?: FocusEvent) => {
+      setFocusPosition(id);
+
+      if (!e) {
+        setFocusDroplistTrigger(false);
+        contentRef.current?.focus();
+      }
+    };
 
-      ref.current?.blur();
-    }
-  };
+    const handleBlurActions = () => {
+      if (isDroplistTriggerFocused && !isDroplistOpen) {
+        setFocusDroplistTrigger(false);
 
-  const handleKeyDown: KeyboardEventHandler<HTMLElement> = e => {
-    onKeyDown?.(e);
+        contentRef.current?.blur();
+      }
+    };
 
-    const focusableCount = focusableNodeIds.length;
+    const handleKeyDown: KeyboardEventHandler<HTMLElement> = e => {
+      onKeyDown?.(e);
 
-    switch (e.key) {
-      case 'ArrowDown': {
-        e.preventDefault();
+      const focusableCount = focusableNodeIds.length;
 
-        setFocusIndex((prev = 0) => {
-          if (prev >= focusableCount - 1) {
-            return focusableCount - 1;
-          }
-          return prev + 1;
-        });
+      switch (e.key) {
+        case 'ArrowDown': {
+          e.preventDefault();
 
-        return;
-      }
-      case 'ArrowUp': {
-        e.preventDefault();
+          setFocusIndex((prev = 0) => {
+            if (prev >= focusableCount - 1) {
+              return focusableCount - 1;
+            }
+            return prev + 1;
+          });
 
-        setFocusIndex((prev = 0) => {
-          if (!prev) {
-            return 0;
-          }
-          return prev - 1;
-        });
+          return;
+        }
+        case 'ArrowUp': {
+          e.preventDefault();
 
-        return;
-      }
-      case 'ArrowRight': {
-        e.preventDefault();
+          setFocusIndex((prev = 0) => {
+            if (!prev) {
+              return 0;
+            }
+            return prev - 1;
+          });
 
-        if (isExpanded || !isExpandable || disabled) {
-          setFocusDroplistTrigger(true);
+          return;
         }
+        case 'ArrowRight': {
+          e.preventDefault();
 
-        return;
-      }
-      case 'ArrowLeft': {
-        e.preventDefault();
+          if (isExpanded || !isExpandable || disabled) {
+            setFocusDroplistTrigger(true);
+          }
 
-        if (isDroplistTriggerFocused) {
-          setFocusDroplistTrigger(false);
-          ref.current?.focus();
+          return;
         }
+        case 'ArrowLeft': {
+          e.preventDefault();
 
-        return;
-      }
-      case 'Escape': {
-        ref.current?.blur();
-        return;
-      }
-      case ' ':
-      case 'Enter': {
-        e.preventDefault();
-        handleSelect();
-        return;
+          if (isDroplistTriggerFocused) {
+            setFocusDroplistTrigger(false);
+            contentRef.current?.focus();
+          }
+
+          return;
+        }
+        case 'Escape': {
+          contentRef.current?.blur();
+          return;
+        }
+        case ' ':
+        case 'Enter': {
+          e.preventDefault();
+          handleSelect();
+          return;
+        }
+        default:
+          return;
       }
-      default:
-        return;
-    }
-  };
-
-  const getNodeActions = nested ? parentActions : nodeActions;
-
-  return (
-    <div
-      role='presentation'
-      className={cn(styles.treeNode, className)}
-      {...extractSupportProps(rest)}
-      data-node-id={id}
-    >
-      {parentNode && (
-        <TreeLine halfWidth={Boolean(nested)} horizontal visible={showLines} data-test-id={TEST_IDS.line} />
-      )}
-
-      {!parentNode && !nested && <TreeLine visible={false} />}
-
-      {isExpandable && (
-        <ButtonFunction
-          size='xs'
-          icon={<ChevronRightSVG />}
-          loading={isLoading}
-          onClick={onChevronClick}
-          data-expanded={isExpanded || undefined}
-          className={styles.treeNodeExpandButton}
-          tabIndex={-1}
-          data-test-id={TEST_IDS.chevron}
-        />
-      )}
+    };
 
+    const getNodeActions = nested ? parentActions : nodeActions;
+
+    return (
       <div
-        role='treeitem'
-        aria-expanded={isExpanded}
-        aria-selected={
-          isSelectable ? isSelected || (nestedNodesSelection?.someSelected && !isExpanded && !isMultiSelect) : undefined
-        }
-        aria-disabled={disabled}
-        data-multiselect={isMultiSelect || undefined}
-        data-droplist-active={isDroplistOpen || isDroplistTriggerFocused || undefined}
-        onClick={handleClick}
-        onKeyDown={handleKeyDown}
-        onFocus={handleFocus}
-        onBlur={resetFocusPosition}
-        tabIndex={tabIndexAvailable ? 0 : -1}
-        className={styles.treeNodeContent}
-        data-test-id={TEST_IDS.item}
+        role='presentation'
+        className={cn(styles.treeNode, className)}
+        {...extractSupportProps(rest)}
+        data-node-id={id}
         ref={ref}
       >
-        {(isMultiSelect || showToggle) && (
-          <div className={styles.treeNodeCheckboxWrap}>
-            {isMultiSelect && (
-              <Checkbox
-                size='s'
-                disabled={disabled}
-                checked={isSelected}
-                indeterminate={!isSelected && nestedNodesSelection?.someSelected}
-                onChange={handleSelect}
-                onClick={stopPropagationClick}
-                data-test-id={TEST_IDS.checkbox}
-                tabIndex={-1}
-              />
-            )}
-            {showToggle && (
-              <Radio size='s' checked={isSelected} disabled={disabled} data-test-id={TEST_IDS.radio} tabIndex={-1} />
-            )}
-          </div>
+        {parentNode && (
+          <TreeLine halfWidth={Boolean(nested)} horizontal visible={showLines} data-test-id={TEST_IDS.line} />
         )}
 
-        {treeNodeIcon && (
-          <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
-            {treeNodeIcon}
+        {!parentNode && !nested && <TreeLine visible={false} />}
+
+        {isExpandable && (
+          <div className={styles.treeNodeExpandButtonWrapper}>
+            <ButtonFunction
+              size='xs'
+              icon={<ChevronRightSVG />}
+              loading={isLoading}
+              onClick={onChevronClick}
+              data-expanded={isExpanded || undefined}
+              className={styles.treeNodeExpandButton}
+              tabIndex={-1}
+              data-test-id={TEST_IDS.chevron}
+            />
+
+            <TreeLine visible={isExpanded && showLines} height={'100%'} />
           </div>
         )}
 
-        <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
-          {typeof title === 'string' && <TruncateString text={title} data-test-id={TEST_IDS.title} />}
-          {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
-        </Typography.SansBodyM>
-
-        {getNodeActions && (
-          <TreeNodeActions
-            getNodeActions={getNodeActions}
-            node={{
-              id,
-              title,
-              disabled,
-              nested,
-            }}
-            focusNode={handleFocus}
-            onBlurActions={handleBlurActions}
-            isDroplistTriggerFocused={isDroplistTriggerFocused}
-            isDroplistOpen={isDroplistOpen}
-            setDroplistOpen={setDroplistOpen}
-          />
-        )}
+        <div
+          role='treeitem'
+          aria-expanded={isExpanded}
+          aria-selected={
+            isSelectable
+              ? isSelected || (nestedNodesSelection?.someSelected && !isExpanded && !isMultiSelect)
+              : undefined
+          }
+          aria-disabled={disabled}
+          data-multiselect={isMultiSelect || undefined}
+          data-droplist-active={isDroplistOpen || isDroplistTriggerFocused || undefined}
+          onClick={handleClick}
+          onKeyDown={handleKeyDown}
+          onFocus={handleFocus}
+          onBlur={resetFocusPosition}
+          tabIndex={tabIndexAvailable ? 0 : -1}
+          className={styles.treeNodeContent}
+          data-test-id={TEST_IDS.item}
+          ref={contentRef}
+        >
+          {(isMultiSelect || showToggle) && (
+            <div className={styles.treeNodeCheckboxWrap}>
+              {isMultiSelect && (
+                <Checkbox
+                  size='s'
+                  disabled={disabled}
+                  checked={isSelected}
+                  indeterminate={!isSelected && nestedNodesSelection?.someSelected}
+                  onChange={handleSelect}
+                  onClick={stopPropagationClick}
+                  data-test-id={TEST_IDS.checkbox}
+                  tabIndex={-1}
+                />
+              )}
+              {showToggle && (
+                <Radio size='s' checked={isSelected} disabled={disabled} data-test-id={TEST_IDS.radio} tabIndex={-1} />
+              )}
+            </div>
+          )}
+
+          {treeNodeIcon && (
+            <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
+              {treeNodeIcon}
+            </div>
+          )}
+
+          <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
+            {typeof title === 'string' && <TruncateString text={title} data-test-id={TEST_IDS.title} />}
+            {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
+          </Typography.SansBodyM>
+
+          {getNodeActions && (
+            <TreeNodeActions
+              getNodeActions={getNodeActions}
+              node={{
+                id,
+                title,
+                disabled,
+                nested,
+              }}
+              focusNode={handleFocus}
+              onBlurActions={handleBlurActions}
+              isDroplistTriggerFocused={isDroplistTriggerFocused}
+              isDroplistOpen={isDroplistOpen}
+              setDroplistOpen={setDroplistOpen}
+            />
+          )}
+        </div>
       </div>
-    </div>
-  );
-}
+    );
+  },
+);

package/src/helperComponents/TreeNode/styles.module.scss

@@ -1,9 +1,9 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree' as tree;
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element' as element;
 
 .treeNode {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   box-sizing: border-box;
   width: 100%;
 }
@@ -16,19 +16,25 @@
 
   box-sizing: border-box;
 
-  color: styles-tokens-tree.$sys-neutral-text-support;
+  color: tree.$sys-neutral-text-support;
 
   svg {
-    width: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
-    height: styles-tokens-element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    width: element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: element.$icon-s !important; /* stylelint-disable-line declaration-no-important */
   }
 }
 
 .treeNodeTitle {
+  @include tree.composite-var(tree.$tree-item-content-wrap);
+
+  display: flex;
   flex-grow: 1;
+  align-items: center;
+
   box-sizing: border-box;
-  min-width: styles-tokens-tree.$size-tree-item-checkbox-wrap;
-  color: styles-tokens-tree.$sys-neutral-text-main;
+  min-width: tree.$size-tree-item-wrap;
+
+  color: tree.$sys-neutral-text-main;
 }
 
 .treeNodeActions {
@@ -41,14 +47,14 @@
 }
 
 .treeNodeContent {
-  @include styles-tokens-tree.composite-var(styles-tokens-tree.$tree-item-content-layout);
+  @include tree.composite-var(tree.$tree-item-content-layout);
 
   cursor: pointer;
 
   position: relative;
 
   display: flex;
-  align-items: center;
+  align-items: flex-start;
 
   box-sizing: border-box;
   width: 100%;
@@ -66,13 +72,13 @@
     height: 100%;
 
     opacity: 0;
-    background-color: styles-tokens-tree.$sys-neutral-accent-default;
+    background-color: tree.$sys-neutral-accent-default;
     border-radius: inherit;
   }
 
   &:hover, &:focus-visible, &[data-droplist-active] {
     &::before {
-      opacity: styles-tokens-tree.$opacity-a008;
+      opacity: tree.$opacity-a008;
     }
 
     .treeNodeActions {
@@ -81,9 +87,9 @@
   }
 
   &:focus-visible {
-    @include styles-tokens-tree.outline-inside-var(styles-tokens-element.$container-focused-s);
+    @include tree.outline-inside-var(element.$container-focused-s);
 
-    outline-color: styles-tokens-tree.$sys-available-complementary;
+    outline-color: tree.$sys-available-complementary;
   }
 
   &[data-multiselect] {
@@ -98,26 +104,26 @@
     }
 
     .treeNodeTitle, .treeNodeIcon {
-      color: styles-tokens-tree.$sys-neutral-text-disabled;
+      color: tree.$sys-neutral-text-disabled;
     }
   }
 
   &[aria-selected='true']:not([data-multiselect]) {
     &::before {
-      opacity: styles-tokens-tree.$opacity-a008;
-      background-color: styles-tokens-tree.$sys-primary-accent-default;
+      opacity: tree.$opacity-a008;
+      background-color: tree.$sys-primary-accent-default;
     }
 
     &:hover {
       &::before {
-        opacity: styles-tokens-tree.$opacity-a016;
+        opacity: tree.$opacity-a016;
       }
     }
   }
 }
 
 .treeNodeCheckboxWrap {
-  @include styles-tokens-tree.composite-var(styles-tokens-tree.$tree-item-checkbox-wrap);
+  @include tree.composite-var(tree.$tree-item-toggle-wrap);
 
   display: flex;
   flex-shrink: 0;
@@ -128,6 +134,8 @@
 }
 
 .treeNodeExpandButton {
+  @include tree.composite-var(tree.$tree-item-expand-wrap);
+
   box-sizing: border-box;
 
   svg {
@@ -140,3 +148,12 @@
     }
   }
 }
+
+.treeNodeExpandButtonWrapper {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+
+  min-width: tree.$size-button-xs;
+}