import { jsx as r, jsxs as m } from "react/jsx-runtime";
import { classNames as v } from "./index-classNames.js";
import { uuidv4 as x } from "./index-generate-uid.js";
import { ComponentContainer as A } from "./index-ComponentContainer.js";
import { Icon as D } from "./index-Icon.js";
import { OVERLAY_BASE_Z_INDEX as l, OverlayStackingService as a } from "./index-OverlayStackingService.js";
import { Text as O } from "./index-Text.js";
import { useState as p, useRef as R, useEffect as L } from "react";
import c from "./index-DropdownMenu.module.scss.js";
import S from "./index-Popper.js";
import b from "./index-Fade.js";
import { ClickAwayListener as M } from "./index-ClickAwayListener.js";
import _ from "./index-MenuList.js";
import j from "./index-MenuItem2.js";
const Q = (f) => {
  const {
    anchorEl: t,
    isOpen: n,
    toggleIsOpen: i,
    items: u,
    hideOnItemClick: d = !0,
    placement: h = "bottom"
  } = f, [w, y] = p(null), I = R(`dropdown-${x()}`), [k, s] = p(l);
  L(() => {
    if (!n) {
      s(l);
      return;
    }
    const e = I.current;
    return s(a.register(e, "popover")), () => a.unregister(e);
  }, [n]);
  function C(e) {
    e.key === "Tab" ? (e.preventDefault(), i()) : e.key === "Escape" && i();
  }
  const E = (e) => {
    e && e(), d && i();
  }, N = (e) => {
    t && t.current && t.current.contains(e.target) || (e.preventDefault(), i());
  };
  return r(A, {
    children: r(S, {
      style: {
        zIndex: k
      },
      role: void 0,
      open: n,
      anchorEl: t && t.current,
      placement: h,
      modifiers: [{
        name: "arrow",
        enabled: !0,
        options: {
          element: w
        }
      }, {
        name: "offset",
        options: {
          offset: [0, 20]
        }
      }],
      transition: !0,
      children: ({
        TransitionProps: e,
        placement: F
      }) => r(b, {
        ...e,
        timeout: 250,
        children: m("div", {
          children: [r("div", {
            className: v(c.arrow),
            ref: y
          }), r(M, {
            onClickAway: N,
            children: r(_, {
              autoFocusItem: n,
              className: c.menu,
              onKeyDown: C,
              children: u.map((o, g) => m(j, {
                className: c.item,
                onClick: () => E(o.onClick),
                selected: o.selected,
                children: [o.iconName && r(D, {
                  ...o.iconProps,
                  children: o.iconName
                }), r(O, {
                  children: o.title
                })]
              }, g))
            })
          })]
        })
      })
    })
  });
};
export {
  Q as DropdownMenu
};
