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

ClayDropDown component

import { Overlay, useOverlayPosition } from "@clayui/shared";
import classNames from "classnames";
import React, { useRef } from "react";
const Align = {
  BottomCenter: 4,
  BottomLeft: 5,
  BottomRight: 3,
  LeftBottom: 11,
  LeftCenter: 6,
  LeftTop: 10,
  RightBottom: 9,
  RightCenter: 2,
  RightTop: 8,
  TopCenter: 0,
  TopLeft: 7,
  TopRight: 1
};
const Menu = React.forwardRef(
  ({
    active = false,
    alignElementRef,
    alignmentByViewport = false,
    alignmentPosition = Align.BottomLeft,
    autoBestAlign = true,
    children,
    className,
    closeOnClickOutside = true,
    containerProps = {},
    deps = [active, children],
    hasLeftSymbols,
    hasRightSymbols,
    height,
    lock = false,
    offsetFn,
    onActiveChange,
    onSetActive,
    role = "presentation",
    suppress,
    triggerRef,
    width,
    ...otherProps
  }, ref) => {
    const setActive = onActiveChange ?? onSetActive;
    const menuInternalRef = useRef(null);
    const subPortalRef = useRef(null);
    let menuRef = menuInternalRef;
    if (ref) {
      menuRef = ref;
    }
    useOverlayPosition(
      {
        alignmentByViewport,
        alignmentPosition,
        autoBestAlign,
        getOffset: offsetFn,
        isOpen: active,
        ref: menuRef,
        triggerRef: alignElementRef
      },
      deps
    );
    return /* @__PURE__ */ React.createElement(
      Overlay,
      {
        isCloseOnInteractOutside: closeOnClickOutside,
        isKeyboardDismiss: true,
        isModal: lock,
        isOpen: active,
        menuRef,
        onClose: () => setActive(false),
        portalRef: subPortalRef,
        suppress,
        triggerRef: triggerRef ?? alignElementRef
      },
      /* @__PURE__ */ React.createElement("div", { ...containerProps, ref: subPortalRef }, /* @__PURE__ */ React.createElement(
        "div",
        {
          ...otherProps,
          "aria-hidden": !active ? true : void 0,
          "aria-modal": lock ? true : void 0,
          className: classNames("dropdown-menu", className, {
            "dropdown-menu-indicator-end": hasRightSymbols,
            "dropdown-menu-indicator-start": hasLeftSymbols,
            [`dropdown-menu-height-${height}`]: height,
            [`dropdown-menu-width-${width}`]: width,
            "show": active
          }),
          ref: menuRef,
          role
        },
        children
      ))
    );
  }
);
Menu.displayName = "ClayDropDownMenu";
var Menu_default = Menu;
export {
  Align,
  Menu_default as default
};