# All files / expansion-panel ExpansionList.tsx

100% Statements 42/42
100% Branches 1/1
100% Functions 1/1
100% Lines 42/42

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
    431x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    15x
    1x
     "use client";
    import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
    import { KeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";
    import { useExpansionList } from "./useExpansionList.js";

    /**
     * @remarks \@since 6.0.0 No longer requires the `onKeyDown` prop.
     */
    export interface ExpansionListProps extends HTMLAttributes<HTMLDivElement> {
      children: ReactNode;
    }

    /**
     * **Client Component**
     *
     * This component is only used to implement the keyboard movement behavior for
     * the `ExpansionPanel` components.
     *
     * @see {@link useExpansionList} for a custom implementation example if you do
     * not want to use a `<div>` for this wrapper component.
     * @remarks \@since 6.0.0 Uses the new keyboard movement API and does not
     * require the `onKeyDOwn` prop to be provided.
     */
    export const ExpansionList = forwardRef<HTMLDivElement, ExpansionListProps>(
      function ExpansionList(props, ref) {
        const { onClick, onFocus, onKeyDown, children, ...remaining } = props;

        const { movementContext, movementProps } = useExpansionList({
          onClick,
          onFocus,
          onKeyDown,
        });

        return (
          <KeyboardMovementProvider value={movementContext}>
            <div {...remaining} {...movementProps} ref={ref}>
              {children}
            </div>
          </KeyboardMovementProvider>
        );
      }
    );