# All files / src/menu MenuItemSeparator.tsx

0% Statements 0/47
0% Branches 0/1
0% Functions 0/1
0% Lines 0/47

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

     "use client";
    import { forwardRef, type HTMLAttributes } from "react";
    import { type DividerProps } from "../divider/Divider.js";
    import { divider } from "../divider/styles.js";
    import { useMenuConfiguration } from "./MenuConfigurationProvider.js";

    /** @remarks \@since 5.0.0 */
    export interface MenuItemSeparatorProps
      extends HTMLAttributes<HTMLLIElement>,
        Pick<DividerProps, "inset" | "vertical"> {}

    /**
     * **Client Component**
     *
     * This component renders a `<li role="separator">` with the divider styles. It
     * will also automatically render itself vertically instead of horizontally if
     * the menu is rendering horizontally.
     *
     * @remarks \@since 5.0.0 Renders as an `<li>` instead of a `<div>` or `<hr />`.
     */
    export const MenuItemSeparator = forwardRef<
      HTMLLIElement,
      MenuItemSeparatorProps
    >(function MenuItemSeparator(props, ref) {
      const {
        className,
        inset,
        vertical: propVertical,
        children,
        ...remaining
      } = props;

      const horizontal = useMenuConfiguration().horizontal;
      const vertical = propVertical ?? horizontal;

      return (
        <li
          {...remaining}
          aria-orientation={vertical ? "vertical" : undefined}
          ref={ref}
          role="separator"
          className={divider({ inset: inset && !vertical, vertical, className })}
        >
          {children}
        </li>
      );
    });