# All files / tree TreeGroup.tsx

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

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
    95
    961x
    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
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    579x
    361x
    361x
    213x
    213x
    213x
    213x
    213x
    2x
    2x
    2x
    2x
    2x
    2x
    2x
    213x
    2x
    2x
    2x
    213x
    213x
    213x
    213x
    213x
    213x
    213x
    1x
     import type { CSSProperties, ReactNode } from "react";
    import { forwardRef } from "react";
    import type { ListProps } from "../list";
    import { List } from "../list";
    import { useCollapseTransition } from "../transition";
    import { treeGroup } from "./styles";
    import { useTreeContext } from "./TreeProvider";

    /**
     * @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;
    }

    /**
     * @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,
          hidden,
          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,
          hidden,
          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>
        );
      }
    );