# All files / src/expansion-panel useExpansionList.ts

100% Statements 79/79
100% Branches 2/2
100% Functions 2/2
100% Lines 79/79

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
    801x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    16x
    16x
    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
    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
     "use client";
    import type {
      FocusEventHandler,
      KeyboardEventHandler,
      MouseEventHandler,
    } from "react";
    import type { KeyboardMovementProviderImplementation } from "../movement/types.js";
    import { useKeyboardMovementProvider } from "../movement/useKeyboardMovementProvider.js";

    /**
     * @internal
     * @remarks \@since 6.0.0
     */
    const getPanelsOnly = (container: HTMLElement): readonly HTMLElement[] => [
      ...container.querySelectorAll<HTMLElement>(".rmd-expansion-panel__button"),
    ];

    /** @remarks \@since 6.0.0 */
    export interface ExpansionListHookOptions<E extends HTMLElement> {
      onClick?: MouseEventHandler<E>;
      onFocus?: FocusEventHandler<E>;
      onKeyDown?: KeyboardEventHandler<E>;
    }

    /** @remarks \@since 6.0.0 */
    export type ExpansionListImplementation<E extends HTMLElement> =
      KeyboardMovementProviderImplementation<E>;

    /**
     * @example
     * Custom Implementation
     * ```tsx
     * import {
     *   ExpansionPanel,
     *   Form,
     *   KeyboardMovementProvider,
     *   useExpansionList,
     *   useExpansionPanels,
     * } from "@react-md/core";
     * import type { ReactElement } from "react";
     *
     * import { BillingAddress } from "./BillingAddress";
     * import { BillingInformation } from "./BillingInformation";
     * import { PersonalInformation } from "./PersonalInformation";
     *
     * function Example(): ReactElement {
     *   const { movementContext, movementProps } = useExpansionList();
     *   const { getPanelProps } = useExpansionPanels();
     *
     *   return (
     *     <KeyboardMovementProvider value={movementContext}>
     *       <Form {...movementProps}>
     *         <ExpansionPanel {...getPanelProps("personal-information-panel")}>
     *           <PersonalInformation />
     *         </ExpansionPanel>
     *         <ExpansionPanel {...getPanelProps("billing-information-panel")}>
     *           <BillingInformation />
     *         </ExpansionPanel>
     *         <ExpansionPanel {...getPanelProps("billing-address-panel")}>
     *           <BillingAddress />
     *         </ExpansionPanel>
     *       </FOrm>
     *     </KeyboardMovementProvider>
     *   );
     * }
     * ```
     *
     * @remarks \@since 6.0.0
     */
    export function useExpansionList<E extends HTMLElement>(
      options: ExpansionListHookOptions<E> = {}
    ): ExpansionListImplementation<E> {
      return useKeyboardMovementProvider({
        ...options,
        loopable: true,
        includeDisabled: true,
        getFocusableElements: getPanelsOnly,
      });
    }