# All files / src/tree TreeGroup.tsx

100% Statements 94/94
100% Branches 10/10
100% Functions 3/3
100% Lines 94/94

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    951x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    677x
    409x
    409x
    263x
    263x
    263x
    263x
    263x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    263x
    2x
    2x
    2x
    263x
    263x
    263x
    263x
    263x
    263x
    263x
    1x
     "use client";
    import { forwardRef, type CSSProperties, type ReactNode } from "react";
    import { List, type ListProps } from "../list/List.js";
    import { useCollapseTransition } from "../transition/useCollapseTransition.js";
    import { useTreeContext } from "./TreeProvider.js";
    import { treeGroup } from "./styles.js";

    /**
     * @remarks \@since 6.0.0
     */
    export interface OverridableTreeGroupProps extends ListProps {
      /** @defaultValue `false` */
      temporary?: boolean;

      /** @defaultValue `false` */
      disableTransition?: boolean;
    }

    /**
     * @internal
     * @remarks \@since 6.0.0
     */
    export interface TreeGroupProps extends OverridableTreeGroupProps {
      children: ReactNode;
      depth: number;
      collapsed: boolean;
    }

    /**
     * **Client Component**
     *
     * @internal
     * @remarks \@since 6.0.0 Removed the collapse options and is no longer a
     * "public" component.
     */
    export const TreeGroup = forwardRef<HTMLUListElement, TreeGroupProps>(
      function TreeGroup(props, ref) {
        const {
          className,
          collapsed,
          depth,
          onClick,
          onMouseDown,
          children,
          temporary: propTemporary,
          disableTransition = false,
          ...remaining
        } = props;

        const style: CSSProperties = {
          ...remaining.style,
          "--rmd-tree-depth": depth,
        };

        const { temporaryChildItems } = useTreeContext();
        const temporary = propTemporary ?? temporaryChildItems;

        const { elementProps, rendered } = useCollapseTransition({
          style,
          nodeRef: ref,
          enter: !disableTransition,
          exit: !disableTransition,
          transitionIn: !collapsed,
          temporary,
          className: treeGroup({ className }),
        });

        if (!rendered || !children) {
          return null;
        }

        return (
          <List
            {...remaining}
            onClick={(event) => {
              onClick?.(event);
              // always stop propagation for click events and mousedown for groups
              // so that the parent child item's click and mousedown events aren't
              // also fired while there are disabled child elementsS or
              // non-interactable (like dividers or subheader)
              event.stopPropagation();
            }}
            onMouseDown={(event) => {
              onMouseDown?.(event);
              event.stopPropagation();
            }}
            {...elementProps}
            role="group"
          >
            {children}
          </List>
        );
      }
    );