# All files TreeGroup.tsx

100% Statements 76/76
100% Branches 6/6
100% Functions 1/1
100% Lines 76/76

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
    771x
    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
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    675x
    409x
    409x
    261x
    261x
    261x
    261x
    261x
    261x
    261x
    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,
          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} {...elementProps} role="group">
            {children}
          </List>
        );
      }
    );