@konstructio/ui/dist/DropdownButton-CWwjA3zI.js

A set of reusable and customizable React components built for konstruct.io

import { o as x } from "./chunk-cI0lbGMq.js";
import { t as C } from "./prop-types-CE0Kfmwk.js";
import { t as l } from "./utils-COaoD3PI.js";
import { Button as E } from "./components/Button/Button.js";
import v, { forwardRef as _, useCallback as h, useEffect as z, useRef as w, useState as L } from "react";
import { jsx as d, jsxs as b } from "react/jsx-runtime";
var c = /* @__PURE__ */ x(C());
function m() {
  return m = Object.assign || function(e) {
    for (var i = 1; i < arguments.length; i++) {
      var r = arguments[i];
      for (var t in r) Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
    }
    return e;
  }, m.apply(this, arguments);
}
function N(e, i) {
  if (e == null) return {};
  var r = D(e, i), t, n;
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    for (n = 0; n < o.length; n++)
      t = o[n], !(i.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
  }
  return r;
}
function D(e, i) {
  if (e == null) return {};
  var r = {}, t = Object.keys(e), n, o;
  for (o = 0; o < t.length; o++)
    n = t[o], !(i.indexOf(n) >= 0) && (r[n] = e[n]);
  return r;
}
var g = _(function(e, i) {
  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, o = n === void 0 ? 24 : n, s = N(e, ["color", "size"]);
  return /* @__PURE__ */ v.createElement("svg", m({
    ref: i,
    xmlns: "http://www.w3.org/2000/svg",
    width: o,
    height: o,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: t,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, s), /* @__PURE__ */ v.createElement("polyline", { points: "6 9 12 15 18 9" }));
});
g.propTypes = {
  color: c.default.string,
  size: c.default.oneOfType([c.default.string, c.default.number])
};
g.displayName = "ChevronDown";
var T = ({ buttonClassName: e, className: i, itemClassName: r, listClassName: t, options: n }) => {
  const [o, s] = L(!1), y = w(null), f = w(null), O = h(() => s((a) => !a), []), k = h((a) => {
    s(!1), a?.();
  }, []);
  return z(() => {
    const a = new AbortController(), u = (p) => {
      p.key === "Escape" && s(!1);
    }, j = (p) => {
      f.current?.contains(p.target) || s(!1);
    };
    return document.addEventListener("keydown", u, { signal: a.signal }), document.addEventListener("mousedown", j, { signal: a.signal }), document.addEventListener("visibilitychange", () => {
      document.hidden && s(!1);
    }, { signal: a.signal }), () => {
      a.abort();
    };
  }, [f]), /* @__PURE__ */ b("div", {
    ref: f,
    className: l("relative w-full", i),
    children: [/* @__PURE__ */ b(E, {
      ref: y,
      className: l("flex gap-2 items-center justify-between w-full", e),
      onClick: O,
      children: ["Download Invoice as", /* @__PURE__ */ d(g, { className: l({
        "transform rotate-180": o,
        "transition-transform duration-200": !0
      }) })]
    }), o && /* @__PURE__ */ d("ul", {
      className: l("absolute z-10 mt-1 w-full bg-white border border-gray-200 rounded shadow-xs animate-in fade-in-0 py-2", t),
      children: n.map((a, u) => /* @__PURE__ */ d("li", {
        className: l("hover:bg-gray-50 px-6 py-1.5 hover:cursor-pointer", r),
        onClick: () => k(a.onClick),
        children: a.label
      }, u))
    })]
  });
};
export {
  T as t
};