@boxyhq/react-ui/dist/index-YXTuPJxR.js

React UI components from BoxyHQ

import { j as n, S as _, c as g, s as w, b as E, d as L, e as B, B as C, I as A, E as O } from "./index-CL4_ByuK.js";
import { useState as M, createContext as q, useEffect as k, useContext as V, useRef as H } from "react";
async function Q(e) {
  const t = await e.text();
  try {
    return t.length ? JSON.parse(t) : "";
  } catch {
    return t;
  }
}
async function ke(e, t) {
  try {
    const a = await fetch(e, t);
    if (a.status === 204)
      return;
    const l = a.headers.get("jackson-pagetoken"), s = await Q(a);
    if (!a.ok)
      throw new G(a.status, s.error.message);
    return l && typeof s == "object" ? {
      data: s,
      pageToken: l
    } : s;
  } catch (a) {
    return {
      error: {
        message: a.message || "Something went wrong"
      }
    };
  }
}
class G extends Error {
  constructor(t, a) {
    super(a), this.status = t;
  }
}
function Te(e) {
  function t() {
    const { type: l, id: s, label: c, value: r, classNames: d, handleInputChange: h, ...f } = e;
    return f;
  }
  function a() {
    var l, s, c;
    return {
      container: g(
        (l = e.classNames) == null ? void 0 : l.container,
        w.container
      ),
      input: g((s = e.classNames) == null ? void 0 : s.input, w.input),
      label: g((c = e.classNames) == null ? void 0 : c.label, w.label)
    };
  }
  return /* @__PURE__ */ n.jsxs("div", { className: a().container, children: [
    /* @__PURE__ */ n.jsx("label", { htmlFor: e.id, className: a().label, children: e.label }),
    /* @__PURE__ */ n.jsx(_, { y: 2 }),
    /* @__PURE__ */ n.jsx(
      "input",
      {
        type: e.type || "text",
        id: e.id,
        value: e.value,
        className: a().input,
        onChange: (l) => typeof e.handleInputChange == "function" && e.handleInputChange(l),
        ...t()
      }
    )
  ] });
}
const U = "_container_1jz5a_4", J = "_input_1jz5a_1", K = "_label_1jz5a_1", W = "_toolbar_1jz5a_9", j = {
  container: U,
  input: J,
  label: K,
  toolbar: W
};
function ze(e) {
  const [t, a] = M(() => !1);
  function l() {
    a(!t);
  }
  function s(r) {
    e.handleChange(r);
  }
  function c() {
    var r;
    return {
      input: g((r = e.classNames) == null ? void 0 : r.input, j.input)
    };
  }
  return /* @__PURE__ */ n.jsxs("div", { className: j.container, children: [
    /* @__PURE__ */ n.jsxs("div", { className: j.toolbar, children: [
      /* @__PURE__ */ n.jsx("label", { htmlFor: e.id, className: j.label, children: e.label }),
      /* @__PURE__ */ n.jsxs("div", { children: [
        /* @__PURE__ */ n.jsx(
          E,
          {
            handleClick: l,
            label: t ? "Hide secret" : "Show secret",
            icon: t ? "EyeSlashIcon" : "EyeIcon"
          }
        ),
        /* @__PURE__ */ n.jsx(_, { x: 0.5 }),
        /* @__PURE__ */ n.jsx(
          L,
          {
            text: e.value || "",
            successCallback: e.copyDoneCallback
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ n.jsx(_, { y: 2 }),
    /* @__PURE__ */ n.jsx(
      "input",
      {
        type: t ? "text" : "password",
        placeholder: e.placeholder,
        value: e.value || "",
        id: e.id,
        required: e.required,
        maxLength: e.maxLength,
        readOnly: e.readOnly,
        onChange: (r) => s(r),
        className: c().input
      }
    )
  ] });
}
const X = "_label_u7c4s_9", Y = "_div_u7c4s_17", Z = "_select_u7c4s_49", v = {
  label: X,
  div: Y,
  "div--disabled": "_div--disabled_u7c4s_43",
  select: Z
};
function De(e) {
  var l;
  function t() {
    return e.id ? e.id : e.label.replace(/ /g, "");
  }
  function a() {
    var s, c;
    return {
      div: v.div + (e.disabled ? ` ${v["div--disabled"]}` : ""),
      select: g((s = e.classNames) == null ? void 0 : s.select, v.select),
      label: g((c = e.classNames) == null ? void 0 : c.label, v.label)
    };
  }
  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
    /* @__PURE__ */ n.jsx("label", { htmlFor: t(), className: a().label, children: e.label }),
    /* @__PURE__ */ n.jsx(_, { y: 2 }),
    /* @__PURE__ */ n.jsxs("div", { className: a().div, children: [
      /* @__PURE__ */ n.jsx(
        "select",
        {
          id: t(),
          name: e.name,
          className: a().select,
          disabled: e.disabled ?? !1,
          value: e.selectedValue,
          onChange: (s) => e.handleChange(s),
          children: (l = e.options) == null ? void 0 : l.map((s) => /* @__PURE__ */ n.jsx("option", { value: s.value, children: s.text }, s.value))
        }
      ),
      /* @__PURE__ */ n.jsx("span", {})
    ] })
  ] });
}
const p = "_label_15znz_3", ee = "_checkbox_15znz_12", D = {
  label: p,
  checkbox: ee
};
function $e(e) {
  function t() {
    return e.id ? e.id : e.label.replace(/ /g, "");
  }
  return /* @__PURE__ */ n.jsxs("label", { className: D.label, children: [
    /* @__PURE__ */ n.jsx(
      "input",
      {
        type: "checkbox",
        id: t(),
        name: e.name,
        checked: e.checked,
        onChange: (a) => e.handleChange(a),
        className: D.checkbox
      }
    ),
    e.label
  ] });
}
const ne = "_container_569d7_1", te = {
  container: ne
};
function Ee(e) {
  return /* @__PURE__ */ n.jsxs("div", { className: te.container, children: [
    /* @__PURE__ */ n.jsx("div", { "aria-hidden": !e.isBusy, children: /* @__PURE__ */ n.jsx(B, {}) }),
    /* @__PURE__ */ n.jsx("div", { "aria-busy": e.isBusy, children: e.children })
  ] });
}
const ae = "_ul_1yjqg_1", se = {
  ul: ae
}, I = q({ offset: 0 });
function Me(e) {
  const [t, a] = M(() => 0);
  function l() {
    return t === 0 && e.currentPageItemsCount < e.itemsPerPage;
  }
  function s() {
    return t === 0;
  }
  function c() {
    return e.currentPageItemsCount < e.itemsPerPage;
  }
  function r() {
    const m = t - e.itemsPerPage;
    a(m), typeof e.handlePageChange == "function" && e.handlePageChange({
      offset: m
    }), typeof e.reFetch == "function" && e.reFetch({
      offset: m,
      limit: e.itemsPerPage,
      pageToken: e.pageTokenMap[m - e.itemsPerPage]
    });
  }
  function d() {
    const u = t, m = u + e.itemsPerPage;
    a(m), typeof e.handlePageChange == "function" && e.handlePageChange({
      offset: m
    }), typeof e.reFetch == "function" && e.reFetch({
      offset: m,
      limit: e.itemsPerPage,
      pageToken: e.pageTokenMap[u]
    });
  }
  function h() {
    const u = new URLSearchParams(
      window.location.search
    ).get("offset");
    return u && Number.isFinite(+u) ? Math.abs(+u) : null;
  }
  function f() {
    const u = h();
    typeof u == "number" ? (a(u), typeof e.reFetch == "function" && e.reFetch({
      offset: u,
      limit: e.itemsPerPage
    })) : (typeof e.handlePageChange == "function" && e.handlePageChange({
      offset: 0
    }), typeof e.reFetch == "function" && e.reFetch({
      offset: 0,
      limit: e.itemsPerPage
    }));
  }
  return k(() => {
    window.addEventListener("popstate", f), f();
  }, []), k(() => () => {
    window.removeEventListener("popstate", f);
  }, []), /* @__PURE__ */ n.jsx(
    I.Provider,
    {
      value: {
        offset: t
      },
      children: /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
        e.children,
        l() ? null : /* @__PURE__ */ n.jsx("nav", { "aria-label": "Pagination Navigation", children: /* @__PURE__ */ n.jsxs("ul", { className: se.ul, children: [
          /* @__PURE__ */ n.jsx("li", { children: /* @__PURE__ */ n.jsx(
            C,
            {
              name: "Prev",
              variant: "outline",
              icon: "LeftArrowIcon",
              "aria-label": "Goto Previous Page",
              handleClick: r,
              disabled: s()
            }
          ) }),
          /* @__PURE__ */ n.jsx("li", { children: /* @__PURE__ */ n.jsx(
            C,
            {
              name: "Next",
              variant: "outline",
              icon: "RightArrowIcon",
              "aria-label": "Goto Next Page",
              handleClick: d,
              disabled: c()
            }
          ) })
        ] }) })
      ] })
    }
  );
}
const le = "_container_1uf8j_1", ce = "_svg_1uf8j_12", ie = "_description_1uf8j_17", y = {
  container: le,
  svg: ce,
  description: ie
};
function P(e) {
  function t() {
    return {
      container: y.container + (e.className ? ` ${e.className}` : "")
    };
  }
  function a() {
    return e.variant || "info";
  }
  return /* @__PURE__ */ n.jsxs("div", { className: t().container, children: [
    a() === "info" ? /* @__PURE__ */ n.jsx(
      A,
      {
        svgAttrs: {
          class: y.svg
        }
      }
    ) : /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsx(
      O,
      {
        svgAttrs: {
          class: y.svg
        }
      }
    ) }),
    /* @__PURE__ */ n.jsx("h4", { children: e.title }),
    e.description ? /* @__PURE__ */ n.jsx("p", { className: y.description, children: e.description }) : null
  ] });
}
const oe = "_table_z2c6r_2", re = "_caption_z2c6r_13", ue = "_thead_z2c6r_24", de = "_td_z2c6r_32", he = "_th_z2c6r_24", fe = "_tr_z2c6r_41", me = "_iconSpan_z2c6r_59", ge = "_noMoreResults_z2c6r_64", b = {
  table: oe,
  caption: re,
  thead: ue,
  td: de,
  th: he,
  tr: fe,
  iconSpan: me,
  noMoreResults: ge
}, be = "_badge_huzc5_3", xe = "_info_huzc5_12", _e = "_success_huzc5_16", je = "_warning_huzc5_20", F = {
  "sr-only": "_sr-only_huzc5_1",
  badge: be,
  info: xe,
  success: _e,
  warning: je
};
function S(e) {
  function t() {
    return " " + (e.variant ? F[e.variant] : F.info);
  }
  return /* @__PURE__ */ n.jsx(
    "span",
    {
      className: `${F.badge}${t()}`,
      "aria-label": e.ariaLabel || e.badgeText,
      children: e.badgeText
    }
  );
}
function ve(e) {
  var T;
  function t(i, o) {
    return () => i.handleClick(o);
  }
  function a() {
    const i = e.col;
    let o = "-";
    return l() ? o = e.rowData[i] : s() && (o = e.rowData[i.name]), o;
  }
  function l() {
    return typeof e.col == "string";
  }
  function s() {
    return typeof e.col == "object" && "name" in e.col;
  }
  function c() {
    return e.col === "actions" || typeof e.col == "object" && e.col.name === "actions";
  }
  function r() {
    var o, x, z;
    const i = e.col;
    return typeof ((o = i.badge) == null ? void 0 : o.shouldDisplayBadge) == "function" ? i.badge.shouldDisplayBadge(e.rowData) : !!((x = i.badge) != null && x.position || (z = i.badge) != null && z.badgeText);
  }
  function d() {
    var o;
    return (o = e.col.badge) == null ? void 0 : o.position;
  }
  function h() {
    var o;
    const i = e.col;
    return ((o = i.badge) == null ? void 0 : o.badgeText) || e.rowData[i.name];
  }
  function f() {
    var o;
    return (o = e.col.badge) == null ? void 0 : o.ariaLabel;
  }
  function u() {
    var o, x;
    const i = e.col;
    return typeof ((o = i.badge) == null ? void 0 : o.variantSelector) == "function" ? i.badge.variantSelector(e.rowData) : (x = i.badge) == null ? void 0 : x.variant;
  }
  function m() {
    return a() === void 0 || a() === "" || a() === null;
  }
  return /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
    c() ? /* @__PURE__ */ n.jsx(n.Fragment, { children: (T = e.actions) == null ? void 0 : T.map((i, o) => {
      var x;
      return /* @__PURE__ */ n.jsx("span", { className: (x = e.classNames) == null ? void 0 : x.iconSpan, children: /* @__PURE__ */ n.jsx(
        E,
        {
          label: i.label,
          handleClick: t(i, e.rowData),
          icon: i.icon
        }
      ) }, o);
    }) }) : null,
    l() ? /* @__PURE__ */ n.jsx(n.Fragment, { children: a() }) : null,
    s() ? /* @__PURE__ */ n.jsx(n.Fragment, { children: r() ? /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
      d() === "surround" ? /* @__PURE__ */ n.jsx(
        S,
        {
          badgeText: h(),
          ariaLabel: f(),
          variant: u()
        }
      ) : null,
      d() === "left" ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
        /* @__PURE__ */ n.jsx(
          S,
          {
            badgeText: h(),
            ariaLabel: f(),
            variant: u()
          }
        ),
        m() ? null : /* @__PURE__ */ n.jsx(_, { x: 2 }),
        a()
      ] }) : null,
      d() === "right" ? /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
        a(),
        m() ? null : /* @__PURE__ */ n.jsx(_, { x: 2 }),
        /* @__PURE__ */ n.jsx(
          S,
          {
            badgeText: h(),
            ariaLabel: f(),
            variant: u()
          }
        )
      ] }) : null
    ] }) }) : /* @__PURE__ */ n.jsx(n.Fragment, { children: a() }) }) : null
  ] });
}
function R(e) {
  var l, s;
  function t() {
    var c, r, d, h, f, u, m;
    return {
      table: g((c = e.classNames) == null ? void 0 : c.table, b.table),
      caption: g(
        (r = e.classNames) == null ? void 0 : r.caption,
        b.caption
      ),
      thead: g((d = e.classNames) == null ? void 0 : d.thead, b.thead),
      tr: g((h = e.classNames) == null ? void 0 : h.tr, b.tr),
      th: g((f = e.classNames) == null ? void 0 : f.th, b.th),
      td: g((u = e.classNames) == null ? void 0 : u.td, b.td),
      iconSpan: g(
        (m = e.classNames) == null ? void 0 : m.iconSpan,
        b.iconSpan
      )
    };
  }
  function a(c) {
    return typeof c == "string" ? c : c.name;
  }
  return /* @__PURE__ */ n.jsxs("table", { className: t().table, children: [
    e.tableCaption ? /* @__PURE__ */ n.jsx("caption", { className: t().caption, children: e.tableCaption }) : null,
    /* @__PURE__ */ n.jsx("thead", { className: t().thead, children: /* @__PURE__ */ n.jsx("tr", { className: t().tr, children: (l = e.cols) == null ? void 0 : l.map((c) => /* @__PURE__ */ n.jsx("th", { scope: "col", className: t().th, children: a(c) }, a(c))) }) }),
    /* @__PURE__ */ n.jsxs("tbody", { children: [
      e.noMoreResults ? /* @__PURE__ */ n.jsx("tr", { children: /* @__PURE__ */ n.jsx(
        "td",
        {
          colSpan: e.cols.length,
          className: b.noMoreResults,
          children: "No more results found"
        }
      ) }) : null,
      e.noMoreResults ? null : /* @__PURE__ */ n.jsx(n.Fragment, { children: (s = e.data) == null ? void 0 : s.map((c, r) => {
        var d;
        return /* @__PURE__ */ n.jsx("tr", { className: t().tr, children: (d = e.cols) == null ? void 0 : d.map((h, f) => /* @__PURE__ */ n.jsx("td", { className: t().td, children: /* @__PURE__ */ n.jsx(
          ve,
          {
            col: h,
            rowData: c,
            actions: e.actions,
            classNames: t()
          }
        ) }, f)) }, r);
      }) })
    ] })
  ] });
}
function Ie(e) {
  function t() {
    return e.data.length === 0 && l.offset === 0;
  }
  function a() {
    return e.data.length === 0 && l.offset > 0;
  }
  const l = V(I);
  return /* @__PURE__ */ n.jsx(n.Fragment, { children: t() ? /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
    e.showErrorComponent ? /* @__PURE__ */ n.jsx(P, { variant: "error", title: e.errorMessage }) : null,
    e.showErrorComponent ? null : /* @__PURE__ */ n.jsx(P, { title: e.emptyStateMessage })
  ] }) }) : /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsx("div", { className: b.tableContainer, children: /* @__PURE__ */ n.jsx(
    R,
    {
      cols: e.cols,
      data: e.data,
      actions: e.actions,
      noMoreResults: a(),
      ...e.tableProps
    }
  ) }) }) });
}
function Re(e) {
  var t;
  return /* @__PURE__ */ n.jsx(n.Fragment, { children: ((t = e.data) == null ? void 0 : t.length) > 0 ? /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsx("div", { className: b.tableContainer, children: /* @__PURE__ */ n.jsx(
    R,
    {
      cols: e.cols,
      data: e.data,
      actions: e.actions,
      ...e.tableProps
    }
  ) }) }) : /* @__PURE__ */ n.jsx(n.Fragment, { children: /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
    e.showErrorComponent ? /* @__PURE__ */ n.jsx(P, { variant: "error", title: e.errorMessage }) : null,
    e.showErrorComponent ? null : /* @__PURE__ */ n.jsx(P, { title: e.emptyStateMessage })
  ] }) }) });
}
const ye = "_toggle_1uxfk_4", Ne = "_display_1uxfk_12", Ce = "_input_1uxfk_60", N = {
  "sr-only": "_sr-only_1uxfk_1",
  toggle: ye,
  display: Ne,
  input: Ce
};
function Le(e) {
  return /* @__PURE__ */ n.jsxs("label", { className: N.toggle, children: [
    e.label,
    /* @__PURE__ */ n.jsx(
      "input",
      {
        type: "checkbox",
        className: `${N.input} ${N["sr-only"]}`,
        onChange: (t) => e.handleChange(t),
        checked: e.checked,
        disabled: e.disabled
      }
    ),
    /* @__PURE__ */ n.jsx("span", { className: N.display })
  ] });
}
const Pe = "_confirmationDiv_sqflu_1", we = "_buttonsDiv_sqflu_7", $ = {
  confirmationDiv: Pe,
  buttonsDiv: we
};
function Be(e) {
  var a, l, s, c, r, d;
  const t = H(null);
  return k(() => {
    var h;
    (h = t.current) == null || h.focus();
  }, []), /* @__PURE__ */ n.jsxs("div", { className: $.confirmationDiv, children: [
    /* @__PURE__ */ n.jsx("h6", { children: e.promptMessage }),
    /* @__PURE__ */ n.jsxs("div", { className: $.buttonsDiv, children: [
      /* @__PURE__ */ n.jsx(
        C,
        {
          type: "button",
          name: ((a = e.buttonNames) == null ? void 0 : a.ctoa) || "Confirm",
          variant: e.ctoaVariant,
          handleClick: e.confirmationCallback,
          classNames: (s = (l = e.classNames) == null ? void 0 : l.button) == null ? void 0 : s.ctoa
        }
      ),
      /* @__PURE__ */ n.jsx(
        C,
        {
          type: "button",
          variant: "outline",
          name: ((c = e.buttonNames) == null ? void 0 : c.cancel) || "Cancel",
          handleClick: e.cancelCallback,
          classNames: (d = (r = e.classNames) == null ? void 0 : r.button) == null ? void 0 : d.cancel,
          buttonRef: t
        }
      )
    ] })
  ] });
}
export {
  $e as C,
  Te as I,
  Ee as L,
  Re as N,
  Me as P,
  De as S,
  Le as T,
  ze as a,
  Ie as b,
  Be as c,
  ke as s
};
//# sourceMappingURL=index-YXTuPJxR.js.map