@konstructio/ui/dist/components/DropdownButton/DropdownButton.js

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

import { jsxs as v, jsx as p } from "react/jsx-runtime";
import w, { forwardRef as E, useState as P, useRef as b, useCallback as y, useEffect as z } from "react";
import { cn as l } from "../../utils/index.js";
import { Button as C } from "../Button/Button.js";
import { P as c } from "../../index-h-Ul0anl.js";
function m() {
  return m = Object.assign || function(e) {
    for (var a = 1; a < arguments.length; a++) {
      var n = arguments[a];
      for (var t in n)
        Object.prototype.hasOwnProperty.call(n, t) && (e[t] = n[t]);
    }
    return e;
  }, m.apply(this, arguments);
}
function L(e, a) {
  if (e == null) return {};
  var n = N(e, a), t, r;
  if (Object.getOwnPropertySymbols) {
    var o = Object.getOwnPropertySymbols(e);
    for (r = 0; r < o.length; r++)
      t = o[r], !(a.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (n[t] = e[t]);
  }
  return n;
}
function N(e, a) {
  if (e == null) return {};
  var n = {}, t = Object.keys(e), r, o;
  for (o = 0; o < t.length; o++)
    r = t[o], !(a.indexOf(r) >= 0) && (n[r] = e[r]);
  return n;
}
var g = E(function(e, a) {
  var n = e.color, t = n === void 0 ? "currentColor" : n, r = e.size, o = r === void 0 ? 24 : r, s = L(e, ["color", "size"]);
  return /* @__PURE__ */ w.createElement("svg", m({
    ref: a,
    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__ */ w.createElement("polyline", {
    points: "6 9 12 15 18 9"
  }));
});
g.propTypes = {
  color: c.string,
  size: c.oneOfType([c.string, c.number])
};
g.displayName = "ChevronDown";
const T = ({
  buttonClassName: e,
  className: a,
  itemClassName: n,
  listClassName: t,
  options: r
}) => {
  const [o, s] = P(!1), O = b(null), f = b(null), j = y(() => s((i) => !i), []), x = y((i) => {
    s(!1), i == null || i();
  }, []);
  return z(() => {
    const i = new AbortController(), u = (d) => {
      d.key === "Escape" && s(!1);
    }, k = (d) => {
      var h;
      (h = f.current) != null && h.contains(d.target) || s(!1);
    };
    return document.addEventListener("keydown", u, {
      signal: i.signal
    }), document.addEventListener("mousedown", k, {
      signal: i.signal
    }), document.addEventListener(
      "visibilitychange",
      () => {
        document.hidden && s(!1);
      },
      {
        signal: i.signal
      }
    ), () => {
      i.abort();
    };
  }, [f]), /* @__PURE__ */ v("div", { ref: f, className: l("relative w-full", a), children: [
    /* @__PURE__ */ v(
      C,
      {
        ref: O,
        className: l(
          "flex gap-2 items-center justify-between w-full",
          e
        ),
        onClick: j,
        children: [
          "Download Invoice as",
          /* @__PURE__ */ p(
            g,
            {
              className: l({
                "transform rotate-180": o,
                "transition-transform duration-200": !0
              })
            }
          )
        ]
      }
    ),
    o && /* @__PURE__ */ p(
      "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: r.map((i, u) => /* @__PURE__ */ p(
          "li",
          {
            className: l(
              "hover:bg-gray-50 px-6 py-1.5 hover:cursor-pointer",
              n
            ),
            onClick: () => x(i.onClick),
            children: i.label
          },
          u
        ))
      }
    )
  ] });
};
export {
  T as DropdownButton
};