@konstructio/ui
Version:
A set of reusable and customizable React components built for konstruct.io
470 lines (469 loc) • 16.3 kB
JavaScript
import { t as j } from "./dist-C4El7dZ5.js";
import { t as R } from "./dist-D_9sBzad.js";
import { t as q } from "./dist-CQfmhKEs.js";
import { c as Ee, n as ke, o as Se, s as Ie } from "./dist-B5WmTRxj.js";
import * as n from "react";
var ce = 1, xe = 0.9, Ce = 0.8, Re = 0.17, Y = 0.1, Q = 0.999, Ae = 0.9999, Me = 0.99, $e = /[\\\/_+.#"@\[\(\{&]/, De = /[\\\/_+.#"@\[\(\{&]/g, Fe = /[\s-]/, fe = /[\s-]/g;
function _(t, l, r, f, u, c, d) {
if (c === l.length) return u === t.length ? ce : Me;
var m = `${u},${c}`;
if (d[m] !== void 0) return d[m];
for (var b = f.charAt(c), i = r.indexOf(b, u), p = 0, h, I, y, x; i >= 0; ) h = _(t, l, r, f, i + 1, c + 1, d), h > p && (i === u ? h *= ce : $e.test(t.charAt(i - 1)) ? (h *= Ce, y = t.slice(u, i - 1).match(De), y && u > 0 && (h *= Math.pow(Q, y.length))) : Fe.test(t.charAt(i - 1)) ? (h *= xe, x = t.slice(u, i - 1).match(fe), x && u > 0 && (h *= Math.pow(Q, x.length))) : (h *= Re, u > 0 && (h *= Math.pow(Q, i - u))), t.charAt(i) !== l.charAt(c) && (h *= Ae)), (h < Y && r.charAt(i - 1) === f.charAt(c + 1) || f.charAt(c + 1) === f.charAt(c) && r.charAt(i - 1) !== f.charAt(c)) && (I = _(t, l, r, f, i + 1, c + 2, d), I * Y > h && (h = I * Y)), h > p && (p = h), i = r.indexOf(b, i + 1);
return d[m] = p, p;
}
function de(t) {
return t.toLowerCase().replace(fe, " ");
}
function Ke(t, l, r) {
return t = r && r.length > 0 ? `${t + " " + r.join(" ")}` : t, _(t, l, de(t), de(l), 0, 0, {});
}
var V = '[cmdk-group=""]', Z = '[cmdk-group-items=""]', qe = '[cmdk-group-heading=""]', me = '[cmdk-item=""]', se = `${me}:not([aria-disabled="true"])`, ee = "cmdk-item-select", F = "data-value", Pe = (t, l, r) => Ke(t, l, r), ve = n.createContext(void 0), L = () => n.useContext(ve), pe = n.createContext(void 0), te = () => n.useContext(pe), he = n.createContext(void 0), ge = n.forwardRef((t, l) => {
let r = K(() => {
var e, o;
return {
search: "",
value: (o = (e = t.value) != null ? e : t.defaultValue) != null ? o : "",
selectedItemId: void 0,
filtered: {
count: 0,
items: /* @__PURE__ */ new Map(),
groups: /* @__PURE__ */ new Set()
}
};
}), f = K(() => /* @__PURE__ */ new Set()), u = K(() => /* @__PURE__ */ new Map()), c = K(() => /* @__PURE__ */ new Map()), d = K(() => /* @__PURE__ */ new Set()), m = be(t), { label: b, children: i, value: p, onValueChange: h, filter: I, shouldFilter: y, loop: x, disablePointerSelection: z = !1, vimBindings: A = !0, ...O } = t, U = q(), re = q(), H = q(), M = n.useRef(null), w = We();
$(() => {
if (p !== void 0) {
let e = p.trim();
r.current.value = e, E.emit();
}
}, [p]), $(() => {
w(6, le);
}, []);
let E = n.useMemo(() => ({
subscribe: (e) => (d.current.add(e), () => d.current.delete(e)),
snapshot: () => r.current,
setState: (e, o, s) => {
var a, v, g, k;
if (!Object.is(r.current[e], o)) {
if (r.current[e] = o, e === "search") G(), T(), w(1, W);
else if (e === "value") {
if (document.activeElement.hasAttribute("cmdk-input") || document.activeElement.hasAttribute("cmdk-root")) {
let S = document.getElementById(H);
S ? S.focus() : (a = document.getElementById(U)) == null || a.focus();
}
if (w(7, () => {
var S;
r.current.selectedItemId = (S = D()) == null ? void 0 : S.id, E.emit();
}), s || w(5, le), ((v = m.current) == null ? void 0 : v.value) !== void 0) {
let S = o ?? "";
(k = (g = m.current).onValueChange) == null || k.call(g, S);
return;
}
}
E.emit();
}
},
emit: () => {
d.current.forEach((e) => e());
}
}), []), N = n.useMemo(() => ({
value: (e, o, s) => {
var a;
o !== ((a = c.current.get(e)) == null ? void 0 : a.value) && (c.current.set(e, {
value: o,
keywords: s
}), r.current.filtered.items.set(e, ne(o, s)), w(2, () => {
T(), E.emit();
}));
},
item: (e, o) => (f.current.add(e), o && (u.current.has(o) ? u.current.get(o).add(e) : u.current.set(o, /* @__PURE__ */ new Set([e]))), w(3, () => {
G(), T(), r.current.value || W(), E.emit();
}), () => {
c.current.delete(e), f.current.delete(e), r.current.filtered.items.delete(e);
let s = D();
w(4, () => {
G(), s?.getAttribute("id") === e && W(), E.emit();
});
}),
group: (e) => (u.current.has(e) || u.current.set(e, /* @__PURE__ */ new Set()), () => {
c.current.delete(e), u.current.delete(e);
}),
filter: () => m.current.shouldFilter,
label: b || t["aria-label"],
getDisablePointerSelection: () => m.current.disablePointerSelection,
listId: U,
inputId: H,
labelId: re,
listInnerRef: M
}), []);
function ne(e, o) {
var s, a;
let v = (a = (s = m.current) == null ? void 0 : s.filter) != null ? a : Pe;
return e ? v(e, r.current.search, o) : 0;
}
function T() {
if (!r.current.search || m.current.shouldFilter === !1) return;
let e = r.current.filtered.items, o = [];
r.current.filtered.groups.forEach((a) => {
let v = u.current.get(a), g = 0;
v.forEach((k) => {
let S = e.get(k);
g = Math.max(S, g);
}), o.push([a, g]);
});
let s = M.current;
P().sort((a, v) => {
var g, k;
let S = a.getAttribute("id"), ye = v.getAttribute("id");
return ((g = e.get(ye)) != null ? g : 0) - ((k = e.get(S)) != null ? k : 0);
}).forEach((a) => {
let v = a.closest(Z);
v ? v.appendChild(a.parentElement === v ? a : a.closest(`${Z} > *`)) : s.appendChild(a.parentElement === s ? a : a.closest(`${Z} > *`));
}), o.sort((a, v) => v[1] - a[1]).forEach((a) => {
var v;
let g = (v = M.current) == null ? void 0 : v.querySelector(`${V}[${F}="${encodeURIComponent(a[0])}"]`);
g?.parentElement.appendChild(g);
});
}
function W() {
let e = P().find((s) => s.getAttribute("aria-disabled") !== "true"), o = e?.getAttribute(F);
E.setState("value", o || void 0);
}
function G() {
var e, o, s, a;
if (!r.current.search || m.current.shouldFilter === !1) {
r.current.filtered.count = f.current.size;
return;
}
r.current.filtered.groups = /* @__PURE__ */ new Set();
let v = 0;
for (let g of f.current) {
let k = ne((o = (e = c.current.get(g)) == null ? void 0 : e.value) != null ? o : "", (a = (s = c.current.get(g)) == null ? void 0 : s.keywords) != null ? a : []);
r.current.filtered.items.set(g, k), k > 0 && v++;
}
for (let [g, k] of u.current) for (let S of k) if (r.current.filtered.items.get(S) > 0) {
r.current.filtered.groups.add(g);
break;
}
r.current.filtered.count = v;
}
function le() {
var e, o, s;
let a = D();
a && (((e = a.parentElement) == null ? void 0 : e.firstChild) === a && ((s = (o = a.closest(V)) == null ? void 0 : o.querySelector(qe)) == null || s.scrollIntoView({ block: "nearest" })), a.scrollIntoView({ block: "nearest" }));
}
function D() {
var e;
return (e = M.current) == null ? void 0 : e.querySelector(`${me}[aria-selected="true"]`);
}
function P() {
var e;
return Array.from(((e = M.current) == null ? void 0 : e.querySelectorAll(se)) || []);
}
function J(e) {
let o = P()[e];
o && E.setState("value", o.getAttribute(F));
}
function X(e) {
var o;
let s = D(), a = P(), v = a.findIndex((k) => k === s), g = a[v + e];
(o = m.current) != null && o.loop && (g = v + e < 0 ? a[a.length - 1] : v + e === a.length ? a[0] : a[v + e]), g && E.setState("value", g.getAttribute(F));
}
function ae(e) {
let o = D(), s = o?.closest(V), a;
for (; s && !a; ) s = e > 0 ? Ne(s, V) : Te(s, V), a = s?.querySelector(se);
a ? E.setState("value", a.getAttribute(F)) : X(e);
}
let ue = () => J(P().length - 1), ie = (e) => {
e.preventDefault(), e.metaKey ? ue() : e.altKey ? ae(1) : X(1);
}, oe = (e) => {
e.preventDefault(), e.metaKey ? J(0) : e.altKey ? ae(-1) : X(-1);
};
return n.createElement(R.div, {
ref: l,
tabIndex: -1,
...O,
"cmdk-root": "",
onKeyDown: (e) => {
var o;
(o = O.onKeyDown) == null || o.call(O, e);
let s = e.nativeEvent.isComposing || e.keyCode === 229;
if (!(e.defaultPrevented || s)) switch (e.key) {
case "n":
case "j":
A && e.ctrlKey && ie(e);
break;
case "ArrowDown":
ie(e);
break;
case "p":
case "k":
A && e.ctrlKey && oe(e);
break;
case "ArrowUp":
oe(e);
break;
case "Home":
e.preventDefault(), J(0);
break;
case "End":
e.preventDefault(), ue();
break;
case "Enter": {
e.preventDefault();
let a = D();
if (a) {
let v = new Event(ee);
a.dispatchEvent(v);
}
}
}
}
}, n.createElement("label", {
"cmdk-label": "",
htmlFor: N.inputId,
id: N.labelId,
style: Je
}, b), B(t, (e) => n.createElement(pe.Provider, { value: E }, n.createElement(ve.Provider, { value: N }, e))));
}), Ve = n.forwardRef((t, l) => {
var r, f;
let u = q(), c = n.useRef(null), d = n.useContext(he), m = L(), b = be(t), i = (f = (r = b.current) == null ? void 0 : r.forceMount) != null ? f : d?.forceMount;
$(() => {
if (!i) return m.item(u, d?.id);
}, [i]);
let p = we(u, c, [
t.value,
t.children,
c
], t.keywords), h = te(), I = C((w) => w.value && w.value === p.current), y = C((w) => i || m.filter() === !1 ? !0 : w.search ? w.filtered.items.get(u) > 0 : !0);
n.useEffect(() => {
let w = c.current;
if (!(!w || t.disabled)) return w.addEventListener(ee, x), () => w.removeEventListener(ee, x);
}, [
y,
t.onSelect,
t.disabled
]);
function x() {
var w, E;
z(), (E = (w = b.current).onSelect) == null || E.call(w, p.current);
}
function z() {
h.setState("value", p.current, !0);
}
if (!y) return null;
let { disabled: A, value: O, onSelect: U, forceMount: re, keywords: H, ...M } = t;
return n.createElement(R.div, {
ref: j(c, l),
...M,
id: u,
"cmdk-item": "",
role: "option",
"aria-disabled": !!A,
"aria-selected": !!I,
"data-disabled": !!A,
"data-selected": !!I,
onPointerMove: A || m.getDisablePointerSelection() ? void 0 : z,
onClick: A ? void 0 : x
}, t.children);
}), je = n.forwardRef((t, l) => {
let { heading: r, children: f, forceMount: u, ...c } = t, d = q(), m = n.useRef(null), b = n.useRef(null), i = q(), p = L(), h = C((y) => u || p.filter() === !1 ? !0 : y.search ? y.filtered.groups.has(d) : !0);
$(() => p.group(d), []), we(d, m, [
t.value,
t.heading,
b
]);
let I = n.useMemo(() => ({
id: d,
forceMount: u
}), [u]);
return n.createElement(R.div, {
ref: j(m, l),
...c,
"cmdk-group": "",
role: "presentation",
hidden: h ? void 0 : !0
}, r && n.createElement("div", {
ref: b,
"cmdk-group-heading": "",
"aria-hidden": !0,
id: i
}, r), B(t, (y) => n.createElement("div", {
"cmdk-group-items": "",
role: "group",
"aria-labelledby": r ? i : void 0
}, n.createElement(he.Provider, { value: I }, y))));
}), Le = n.forwardRef((t, l) => {
let { alwaysRender: r, ...f } = t, u = n.useRef(null), c = C((d) => !d.search);
return !r && !c ? null : n.createElement(R.div, {
ref: j(u, l),
...f,
"cmdk-separator": "",
role: "separator"
});
}), Oe = n.forwardRef((t, l) => {
let { onValueChange: r, ...f } = t, u = t.value != null, c = te(), d = C((i) => i.search), m = C((i) => i.selectedItemId), b = L();
return n.useEffect(() => {
t.value != null && c.setState("search", t.value);
}, [t.value]), n.createElement(R.input, {
ref: l,
...f,
"cmdk-input": "",
autoComplete: "off",
autoCorrect: "off",
spellCheck: !1,
"aria-autocomplete": "list",
role: "combobox",
"aria-expanded": !0,
"aria-controls": b.listId,
"aria-labelledby": b.labelId,
"aria-activedescendant": m,
id: b.inputId,
type: "text",
value: u ? t.value : d,
onChange: (i) => {
u || c.setState("search", i.target.value), r?.(i.target.value);
}
});
}), Be = n.forwardRef((t, l) => {
let { children: r, label: f = "Suggestions", ...u } = t, c = n.useRef(null), d = n.useRef(null), m = C((i) => i.selectedItemId), b = L();
return n.useEffect(() => {
if (d.current && c.current) {
let i = d.current, p = c.current, h, I = new ResizeObserver(() => {
h = requestAnimationFrame(() => {
let y = i.offsetHeight;
p.style.setProperty("--cmdk-list-height", y.toFixed(1) + "px");
});
});
return I.observe(i), () => {
cancelAnimationFrame(h), I.unobserve(i);
};
}
}, []), n.createElement(R.div, {
ref: j(c, l),
...u,
"cmdk-list": "",
role: "listbox",
tabIndex: -1,
"aria-activedescendant": m,
"aria-label": f,
id: b.listId
}, B(t, (i) => n.createElement("div", {
ref: j(d, b.listInnerRef),
"cmdk-list-sizer": ""
}, i)));
}), ze = n.forwardRef((t, l) => {
let { open: r, onOpenChange: f, overlayClassName: u, contentClassName: c, container: d, ...m } = t;
return n.createElement(Ee, {
open: r,
onOpenChange: f
}, n.createElement(Ie, { container: d }, n.createElement(Se, {
"cmdk-overlay": "",
className: u
}), n.createElement(ke, {
"aria-label": t.label,
"cmdk-dialog": "",
className: c
}, n.createElement(ge, {
ref: l,
...m
}))));
}), Ue = n.forwardRef((t, l) => C((r) => r.filtered.count === 0) ? n.createElement(R.div, {
ref: l,
...t,
"cmdk-empty": "",
role: "presentation"
}) : null), He = n.forwardRef((t, l) => {
let { progress: r, children: f, label: u = "Loading...", ...c } = t;
return n.createElement(R.div, {
ref: l,
...c,
"cmdk-loading": "",
role: "progressbar",
"aria-valuenow": r,
"aria-valuemin": 0,
"aria-valuemax": 100,
"aria-label": u
}, B(t, (d) => n.createElement("div", { "aria-hidden": !0 }, d)));
}), _e = Object.assign(ge, {
List: Be,
Item: Ve,
Input: Oe,
Group: je,
Separator: Le,
Dialog: ze,
Empty: Ue,
Loading: He
});
function Ne(t, l) {
let r = t.nextElementSibling;
for (; r; ) {
if (r.matches(l)) return r;
r = r.nextElementSibling;
}
}
function Te(t, l) {
let r = t.previousElementSibling;
for (; r; ) {
if (r.matches(l)) return r;
r = r.previousElementSibling;
}
}
function be(t) {
let l = n.useRef(t);
return $(() => {
l.current = t;
}), l;
}
var $ = typeof window > "u" ? n.useEffect : n.useLayoutEffect;
function K(t) {
let l = n.useRef();
return l.current === void 0 && (l.current = t()), l;
}
function C(t) {
let l = te(), r = () => t(l.snapshot());
return n.useSyncExternalStore(l.subscribe, r, r);
}
function we(t, l, r, f = []) {
let u = n.useRef(), c = L();
return $(() => {
var d;
let m = (() => {
var i;
for (let p of r) {
if (typeof p == "string") return p.trim();
if (typeof p == "object" && "current" in p) return p.current ? (i = p.current.textContent) == null ? void 0 : i.trim() : u.current;
}
})(), b = f.map((i) => i.trim());
c.value(t, m, b), (d = l.current) == null || d.setAttribute(F, m), u.current = m;
}), u;
}
var We = () => {
let [t, l] = n.useState(), r = K(() => /* @__PURE__ */ new Map());
return $(() => {
r.current.forEach((f) => f()), r.current = /* @__PURE__ */ new Map();
}, [t]), (f, u) => {
r.current.set(f, u), l({});
};
};
function Ge(t) {
let l = t.type;
return typeof l == "function" ? l(t.props) : "render" in l ? l.render(t.props) : t;
}
function B({ asChild: t, children: l }, r) {
return t && n.isValidElement(l) ? n.cloneElement(Ge(l), { ref: l.ref }, r(l.props.children)) : r(l);
}
var Je = {
position: "absolute",
width: "1px",
height: "1px",
padding: "0",
margin: "-1px",
overflow: "hidden",
clip: "rect(0, 0, 0, 0)",
whiteSpace: "nowrap",
borderWidth: "0"
};
export {
_e as t
};