import { defineComponent as h, reactive as l, toRef as v, ref as w, watch as b, createBlock as x, openBlock as y, Teleport as R, createElementVNode as B, mergeProps as C, withModifiers as c, renderSlot as k } from "vue";
import { useElementPosition as E } from "../../composition/usePosition.js";
import { scrollIntoView as H } from "../../helpers/dom.js";
import { tapIf as I } from "@milaboratories/helpers";
const P = /* @__PURE__ */ h({
  __name: "DropdownOverlay",
  props: {
    root: {},
    gap: {}
  },
  setup(f, { expose: d }) {
    const i = f, r = l({
      optionsHeight: 0
    }), e = l({
      top: void 0,
      bottom: void 0,
      left: "0px",
      width: "0px"
    }), m = v(i, "root"), n = w();
    return d({
      scrollIntoActive: () => {
        const t = n.value;
        t && I(t.querySelector(".hovered-item"), (o) => {
          H(t, o);
        });
      },
      listRef: n
    }), b(n, (t) => {
      t && requestAnimationFrame(() => {
        const o = t.getBoundingClientRect();
        r.optionsHeight = o.height, window.dispatchEvent(new CustomEvent("adjust"));
      });
    }), E(m, (t) => {
      const o = document.body.getBoundingClientRect(), a = t.top - o.top, u = t.left - o.left, s = i.gap ?? 0, p = a + t.height + s;
      if (p + r.optionsHeight > t.clientHeight) {
        const g = o.bottom - t.bottom + t.height + s;
        e.bottom = g + "px", e.top = void 0;
      } else
        e.top = p + "px", e.bottom = void 0;
      e.left = u + "px", e.width = t.width + "px";
    }), (t, o) => (y(), x(R, { to: "body" }, [
      B("div", C({
        ref_key: "listRef",
        ref: n
      }, t.$attrs, {
        style: e,
        tabindex: "-1",
        onMousedown: o[0] || (o[0] = c(() => {
        }, ["prevent"])),
        onClick: o[1] || (o[1] = c(() => {
        }, ["stop"]))
      }), [
        k(t.$slots, "default", { ref: "list" })
      ], 16)
    ]));
  }
});
export {
  P as default
};
//# sourceMappingURL=DropdownOverlay.vue.js.map
