@clayui/drop-down/lib/esm/Item.js

ClayDropDown component

import ClayIcon from "@clayui/icon";
import ClayLink from "@clayui/link";
import classNames from "classnames";
import React, { useContext } from "react";
import { DropDownContext } from "./DropDownContext";
const Item = React.forwardRef(
  ({
    active,
    children,
    className,
    "data-index": dataIndex,
    disabled,
    href,
    innerRef,
    onClick,
    role = "presentation",
    roleItem = "menuitem",
    spritemap,
    style,
    symbolLeft,
    symbolRight,
    tabIndex,
    ...otherProps
  }, ref) => {
    const clickableElement = onClick ? "button" : "span";
    const ItemElement = href ? ClayLink : clickableElement;
    const { close, closeOnClick, tabFocus } = useContext(DropDownContext);
    return /* @__PURE__ */ React.createElement("li", { "data-index": dataIndex, ref, role, style }, /* @__PURE__ */ React.createElement(
      ItemElement,
      {
        "aria-selected": active,
        ...otherProps,
        className: classNames("dropdown-item", className, {
          active,
          disabled
        }),
        disabled,
        href,
        onClick: (event) => {
          if (onClick) {
            onClick(event);
          }
          if (event.defaultPrevented) {
            return;
          }
          if (closeOnClick) {
            close();
          }
        },
        ref: innerRef,
        role: roleItem,
        tabIndex: disabled || !tabFocus ? -1 : tabIndex
      },
      symbolLeft && /* @__PURE__ */ React.createElement("span", { className: "dropdown-item-indicator-start" }, /* @__PURE__ */ React.createElement(
        ClayIcon,
        {
          spritemap,
          symbol: symbolLeft
        }
      )),
      children,
      symbolRight && /* @__PURE__ */ React.createElement("span", { className: "dropdown-item-indicator-end" }, /* @__PURE__ */ React.createElement(
        ClayIcon,
        {
          spritemap,
          symbol: symbolRight
        }
      ))
    ));
  }
);
Item.displayName = "ClayDropDownItem";
var Item_default = Item;
export {
  Item_default as default
};