@snack-uikit/tree 0.1.8-preview-85c5f47b.0

package/src/helperComponents/TreeLine/TreeLine.tsx

@@ -0,0 +1,22 @@
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type TreeLineProps = {
+  halfWidth?: boolean;
+  halfHeight?: boolean;
+  visible?: boolean;
+  horizontal?: boolean;
+};
+
+export function TreeLine({ halfWidth, halfHeight, horizontal, visible }: TreeLineProps) {
+  return (
+    <div
+      className={styles.treeLine}
+      data-horizontal={horizontal || undefined}
+      data-half-width={halfWidth || undefined}
+      data-half-height={halfHeight || undefined}
+      data-visible={visible || undefined}
+      data-test-id={TEST_IDS.line}
+    />
+  );
+}

package/src/helperComponents/TreeLine/index.ts

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

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

@@ -0,0 +1,58 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.treeLine {
+  pointer-events: none;
+
+  position: relative;
+
+  flex-shrink: 0;
+
+  width: $size-tree-item-line-width;
+
+  visibility: hidden;
+
+  &[data-visible] {
+    visibility: visible;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      width: 1px;
+      height: calc(100% - ($size-tree-item-height / 2));
+
+      background: $sys-neutral-decor-default;
+    }
+  }
+
+  &[data-half-height] {
+    &::after {
+      height: calc(100% - ($size-tree-item-height / 2));
+    }
+  }
+
+  &[data-horizontal] {
+    &::after {
+      top: 50%;
+      left: -50%;
+      transform: translateY(-50%);
+
+      width: calc(150% - $space-tree-item-child-line-padding);
+      height: 1px;
+    }
+
+    &[data-half-width] {
+      width: 0;
+
+      &::after {
+        left: calc(0px - $size-tree-item-line-width / 2);
+        width: calc($size-tree-item-line-width / 2);
+      }
+    }
+  }
+}

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -0,0 +1,288 @@
+import cn from 'classnames';
+import { FocusEvent, KeyboardEventHandler, MouseEventHandler, useEffect, useMemo, useRef, useState } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
+import { Checkbox } from '@snack-uikit/toggles';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { Typography } from '@snack-uikit/typography';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../constants';
+import { useTreeContext } from '../../contexts/TreeContext';
+import { checkNestedNodesSelection } from '../../helpers';
+import { ParentNode, TreeNodeProps } from '../../types';
+import { TreeLine } from '../TreeLine';
+import { TreeNodeActions } from './components';
+import styles from './styles.module.scss';
+import { stopPropagationClick } from './utils';
+
+export type { TreeNodeProps };
+
+type TreeNodeComponentProps = TreeNodeProps & {
+  onChevronClick?: MouseEventHandler<HTMLElement>;
+  onKeyDown?: KeyboardEventHandler<HTMLElement>;
+  isLoading?: boolean;
+  parentNode?: ParentNode;
+  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,
+    onNodeClick,
+    selected,
+    expandedNodes,
+    onSelect,
+    nodeActions,
+    parentActions,
+    setFocusPosition,
+    resetFocusPosition,
+    focusedNodeId,
+    setFocusIndex,
+    focusableNodeIds,
+    showLines,
+  } = 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 || !Array.isArray(selected) || !selected?.length) return undefined;
+
+    return checkNestedNodesSelection(nested, 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 (isExpandable) {
+      return isExpanded ? expandedIcon : collapsedIcon;
+    }
+
+    return icon;
+  }, [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);
+      ref.current?.focus();
+    }
+  };
+
+  const handleBlurActions = () => {
+    if (isDroplistTriggerFocused && !isDroplistOpen) {
+      setFocusDroplistTrigger(false);
+
+      ref.current?.blur();
+    }
+  };
+
+  const handleKeyDown: KeyboardEventHandler<HTMLElement> = e => {
+    onKeyDown?.(e);
+
+    const focusableCount = focusableNodeIds.length;
+
+    switch (e.key) {
+      case 'ArrowDown': {
+        e.preventDefault();
+
+        setFocusIndex((prev = 0) => {
+          if (prev >= focusableCount - 1) {
+            return focusableCount - 1;
+          }
+          return prev + 1;
+        });
+
+        return;
+      }
+      case 'ArrowUp': {
+        e.preventDefault();
+
+        setFocusIndex((prev = 0) => {
+          if (!prev) {
+            return 0;
+          }
+          return prev - 1;
+        });
+
+        return;
+      }
+      case 'ArrowRight': {
+        e.preventDefault();
+
+        if (isExpanded || !isExpandable || disabled) {
+          setFocusDroplistTrigger(true);
+        }
+
+        return;
+      }
+      case 'ArrowLeft': {
+        e.preventDefault();
+
+        if (isDroplistTriggerFocused) {
+          setFocusDroplistTrigger(false);
+          ref.current?.focus();
+        }
+
+        return;
+      }
+      case 'Escape': {
+        ref.current?.blur();
+        return;
+      }
+      case ' ':
+      case 'Enter': {
+        e.preventDefault();
+        handleSelect();
+        return;
+      }
+      default:
+        return;
+    }
+  };
+
+  const getNodeActions = Boolean(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 && !Boolean(nested) && <TreeLine visible={false} />}
+
+      {isExpandable && (
+        <ButtonFunction
+          size={ButtonFunction.sizes.Xs}
+          icon={<ChevronRightSVG />}
+          disabled={disabled}
+          loading={isLoading}
+          onClick={onChevronClick}
+          data-expanded={isExpanded || undefined}
+          className={styles.treeNodeExpandButton}
+          tabIndex={-1}
+          data-test-id={TEST_IDS.chevron}
+        />
+      )}
+
+      <div
+        role='treeitem'
+        aria-expanded={isExpanded}
+        aria-selected={isSelected}
+        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={ref}
+      >
+        {isMultiSelect && (
+          <div className={styles.treeNodeCheckboxWrap}>
+            <Checkbox
+              size={Checkbox.sizes.S}
+              disabled={disabled}
+              checked={!disabled && isSelected}
+              indeterminate={!disabled && !isSelected && nestedNodesSelection?.someSelected}
+              onChange={handleSelect}
+              onClick={stopPropagationClick}
+              data-test-id={TEST_IDS.checkbox}
+              tabIndex={-1}
+            />
+          </div>
+        )}
+
+        <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
+          {treeNodeIcon}
+        </div>
+
+        <Typography.SansBodyM tag={Typography.tags.div} className={styles.treeNodeTitle}>
+          <TruncateString text={title} data-test-id={TEST_IDS.title} />
+        </Typography.SansBodyM>
+
+        {getNodeActions && (
+          <TreeNodeActions
+            getNodeActions={getNodeActions}
+            node={{
+              id,
+              title,
+              disabled,
+              nested,
+            }}
+            focusNode={handleFocus}
+            onBlurActions={handleBlurActions}
+            isDroplistTriggerFocused={isDroplistTriggerFocused}
+            isDroplistOpen={isDroplistOpen}
+            setDroplistOpen={setDroplistOpen}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,109 @@
+import { Dispatch, KeyboardEventHandler, SetStateAction, useEffect } from 'react';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { Droplist, ItemSingleProps } from '@snack-uikit/droplist';
+import { KebabSVG } from '@snack-uikit/icons';
+
+import { TEST_IDS } from '../../../constants';
+import { TreeNodeProps } from '../../../types';
+import styles from '../styles.module.scss';
+import { stopPropagationClick } from '../utils';
+
+type TreeNodeActionsProps = {
+  isDroplistOpen: boolean;
+  setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+  getNodeActions(node: TreeNodeProps): ItemSingleProps[];
+  node: TreeNodeProps;
+  isDroplistTriggerFocused: boolean;
+  focusNode(): void;
+  onBlurActions(): void;
+};
+
+export function TreeNodeActions({
+  getNodeActions,
+  isDroplistTriggerFocused,
+  focusNode,
+  isDroplistOpen,
+  setDroplistOpen,
+  onBlurActions,
+  node,
+}: TreeNodeActionsProps) {
+  const droplistActions = getNodeActions(node);
+
+  const {
+    triggerElementRef,
+    handleDroplistFocusLeave,
+    handleDroplistItemKeyDown,
+    handleTriggerKeyDown,
+    handleDroplistItemClick,
+    firstElementRefCallback,
+  } = Droplist.useKeyboardNavigation<HTMLButtonElement>({ setDroplistOpen });
+
+  useEffect(() => {
+    if (triggerElementRef.current && isDroplistTriggerFocused) {
+      triggerElementRef.current.focus();
+    }
+  }, [isDroplistTriggerFocused, triggerElementRef]);
+
+  if (!droplistActions.length) {
+    return null;
+  }
+
+  const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = e => {
+    handleTriggerKeyDown(e);
+
+    switch (e.key) {
+      case 'Tab': {
+        e.preventDefault();
+        return;
+      }
+      case 'ArrowLeft': {
+        if (isDroplistTriggerFocused) {
+          focusNode();
+          setDroplistOpen(false);
+        }
+        return;
+      }
+      default:
+        return;
+    }
+  };
+
+  return (
+    <div
+      role='presentation'
+      className={styles.treeNodeActions}
+      data-focused={isDroplistTriggerFocused || undefined}
+      onClick={stopPropagationClick}
+    >
+      <Droplist
+        open={isDroplistOpen}
+        onOpenChange={setDroplistOpen}
+        onFocusLeave={handleDroplistFocusLeave}
+        firstElementRefCallback={firstElementRefCallback}
+        triggerRef={triggerElementRef}
+        placement={Droplist.placements.BottomEnd}
+        triggerElement={
+          <ButtonFunction
+            size={ButtonFunction.sizes.Xs}
+            icon={<KebabSVG size={24} />}
+            onKeyDown={handleKeyDown}
+            onBlur={onBlurActions}
+            tabIndex={-1}
+            data-test-id={TEST_IDS.droplistTrigger}
+          />
+        }
+      >
+        {droplistActions.map(action => (
+          <Droplist.ItemSingle
+            key={action.option}
+            {...action}
+            onKeyDown={handleDroplistItemKeyDown}
+            onClick={e => handleDroplistItemClick(e, action.onClick)}
+            data-test-id={TEST_IDS.droplistAction}
+          />
+        ))}
+      </Droplist>
+    </div>
+  );
+}

package/src/helperComponents/TreeNode/components/index.ts

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

package/src/helperComponents/TreeNode/index.ts

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

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

@@ -0,0 +1,144 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+
+.treeNode {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.treeNodeIcon {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  color: $sys-neutral-text-support;
+
+  svg {
+    width: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+    height: $icon-s !important; /* stylelint-disable-line declaration-no-important */
+  }
+}
+
+.treeNodeTitle {
+  flex-grow: 1;
+  box-sizing: border-box;
+  min-width: $size-tree-item-checkbox-wrap;
+  color: $sys-neutral-text-main;
+}
+
+.treeNodeActions {
+  display: flex;
+  visibility: hidden;
+
+  &:focus-visible, &[data-focused] {
+    visibility: visible;
+  }
+}
+
+.treeNodeContent {
+  @include composite-var($tree-item-content-layout);
+
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+
+  border-radius: $radius-tree-item-content-layout;
+
+  &::before {
+    pointer-events: none;
+    content: '';
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+
+    opacity: 0;
+    background-color: $sys-neutral-accent-default;
+    border-radius: inherit;
+  }
+
+  &:hover, &:focus-visible, &[data-droplist-active] {
+    &::before {
+      opacity: $opacity-a008;
+    }
+
+    .treeNodeActions {
+      visibility: visible;
+    }
+  }
+
+  &:focus-visible {
+    @include outline-inside-var($container-focused-s);
+
+    outline-color: $sys-available-complementary;
+  }
+
+  &[data-multiselect] {
+    cursor: default;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+
+    &::before {
+      display: none;
+    }
+
+    .treeNodeTitle, .treeNodeIcon {
+      color: $sys-neutral-text-disabled;
+    }
+  }
+
+  &[aria-selected='true']:not([data-multiselect]) {
+    &::before {
+      opacity: $opacity-a008;
+      background-color: $sys-primary-accent-default;
+    }
+
+    &:hover {
+      &::before {
+        opacity: $opacity-a016;
+      }
+    }
+  }
+}
+
+.treeNodeCheckboxWrap {
+  @include composite-var($tree-item-checkbox-wrap);
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+}
+
+.treeNodeExpandButton {
+  box-sizing: border-box;
+
+  svg {
+    transition: transform 0.2s ease;
+  }
+
+  &[data-expanded] {
+    svg {
+      transform: rotate(90deg);
+    }
+  }
+}

package/src/helperComponents/TreeNode/utils.ts

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

package/src/helperComponents/index.ts

@@ -0,0 +1,4 @@
+export * from './ExpandableTreeNode';
+export * from './TreeNode';
+export * from './TreeLine';
+export * from './TreeItem';