alinea
Version:
[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)
303 lines (298 loc) • 15.4 kB
JavaScript
import {
a,
b,
u as u2,
x
} from "./chunk-Q2COWNH4.js";
import {
C,
c as c2,
d,
h as h2
} from "./chunk-VKS6HYMO.js";
import {
I as I2,
T,
e,
h
} from "./chunk-CRWVV7PH.js";
import {
T as T2,
e as e2
} from "./chunk-B5OJDF23.js";
import {
c,
p as p2
} from "./chunk-PB6GIAHT.js";
import {
p
} from "./chunk-QMGXID4H.js";
import {
r
} from "./chunk-KO7U3IBJ.js";
import {
D,
I,
R,
S,
X,
l,
o,
o2,
o3,
s2 as s,
s3 as s2,
u,
y
} from "./chunk-QEHUZJO2.js";
// node_modules/@headlessui/react/dist/components/listbox/listbox.js
import N, { Fragment as xe, createContext as Z, createRef as ye, useCallback as ge, useContext as ee, useEffect as te, useMemo as h3, useReducer as Le, useRef as D2 } from "react";
// node_modules/@headlessui/react/dist/hooks/use-computed.js
import { useState as s3 } from "react";
function i(e3, o4) {
let [u3, t] = s3(e3), r2 = s(e3);
return l(() => t(r2.current), [r2, t, ...o4]), u3;
}
// node_modules/@headlessui/react/dist/components/listbox/listbox.js
var Be = ((n) => (n[n.Open = 0] = "Open", n[n.Closed = 1] = "Closed", n))(Be || {});
var He = ((n) => (n[n.Single = 0] = "Single", n[n.Multi = 1] = "Multi", n))(He || {});
var Ge = ((n) => (n[n.Pointer = 0] = "Pointer", n[n.Other = 1] = "Other", n))(Ge || {});
var Ne = ((i2) => (i2[i2.OpenListbox = 0] = "OpenListbox", i2[i2.CloseListbox = 1] = "CloseListbox", i2[i2.GoToOption = 2] = "GoToOption", i2[i2.Search = 3] = "Search", i2[i2.ClearSearch = 4] = "ClearSearch", i2[i2.RegisterOption = 5] = "RegisterOption", i2[i2.UnregisterOption = 6] = "UnregisterOption", i2[i2.RegisterLabel = 7] = "RegisterLabel", i2))(Ne || {});
function z(e3, a2 = (n) => n) {
let n = e3.activeOptionIndex !== null ? e3.options[e3.activeOptionIndex] : null, r2 = I2(a2(e3.options.slice()), (t) => t.dataRef.current.domRef.current), l2 = n ? r2.indexOf(n) : null;
return l2 === -1 && (l2 = null), { options: r2, activeOptionIndex: l2 };
}
var je = { [1](e3) {
return e3.dataRef.current.disabled || e3.listboxState === 1 ? e3 : { ...e3, activeOptionIndex: null, listboxState: 1 };
}, [0](e3) {
if (e3.dataRef.current.disabled || e3.listboxState === 0)
return e3;
let a2 = e3.activeOptionIndex, { isSelected: n } = e3.dataRef.current, r2 = e3.options.findIndex((l2) => n(l2.dataRef.current.value));
return r2 !== -1 && (a2 = r2), { ...e3, listboxState: 0, activeOptionIndex: a2 };
}, [2](e3, a2) {
var l2;
if (e3.dataRef.current.disabled || e3.listboxState === 1)
return e3;
let n = z(e3), r2 = x(a2, { resolveItems: () => n.options, resolveActiveIndex: () => n.activeOptionIndex, resolveId: (t) => t.id, resolveDisabled: (t) => t.dataRef.current.disabled });
return { ...e3, ...n, searchQuery: "", activeOptionIndex: r2, activationTrigger: (l2 = a2.trigger) != null ? l2 : 1 };
}, [3]: (e3, a2) => {
if (e3.dataRef.current.disabled || e3.listboxState === 1)
return e3;
let r2 = e3.searchQuery !== "" ? 0 : 1, l2 = e3.searchQuery + a2.value.toLowerCase(), p3 = (e3.activeOptionIndex !== null ? e3.options.slice(e3.activeOptionIndex + r2).concat(e3.options.slice(0, e3.activeOptionIndex + r2)) : e3.options).find((i2) => {
var b2;
return !i2.dataRef.current.disabled && ((b2 = i2.dataRef.current.textValue) == null ? void 0 : b2.startsWith(l2));
}), u3 = p3 ? e3.options.indexOf(p3) : -1;
return u3 === -1 || u3 === e3.activeOptionIndex ? { ...e3, searchQuery: l2 } : { ...e3, searchQuery: l2, activeOptionIndex: u3, activationTrigger: 1 };
}, [4](e3) {
return e3.dataRef.current.disabled || e3.listboxState === 1 || e3.searchQuery === "" ? e3 : { ...e3, searchQuery: "" };
}, [5]: (e3, a2) => {
let n = { id: a2.id, dataRef: a2.dataRef }, r2 = z(e3, (l2) => [...l2, n]);
return e3.activeOptionIndex === null && e3.dataRef.current.isSelected(a2.dataRef.current.value) && (r2.activeOptionIndex = r2.options.indexOf(n)), { ...e3, ...r2 };
}, [6]: (e3, a2) => {
let n = z(e3, (r2) => {
let l2 = r2.findIndex((t) => t.id === a2.id);
return l2 !== -1 && r2.splice(l2, 1), r2;
});
return { ...e3, ...n, activationTrigger: 1 };
}, [7]: (e3, a2) => ({ ...e3, labelId: a2.id }) };
var J = Z(null);
J.displayName = "ListboxActionsContext";
function _(e3) {
let a2 = ee(J);
if (a2 === null) {
let n = new Error(`<${e3} /> is missing a parent <Listbox /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(n, _), n;
}
return a2;
}
var q = Z(null);
q.displayName = "ListboxDataContext";
function U(e3) {
let a2 = ee(q);
if (a2 === null) {
let n = new Error(`<${e3} /> is missing a parent <Listbox /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(n, U), n;
}
return a2;
}
function Ve(e3, a2) {
return u(a2.type, je, e3, a2);
}
var Ke = xe;
function Qe(e3, a2) {
let { value: n, defaultValue: r2, form: l2, name: t, onChange: p3, by: u3 = (s4, c3) => s4 === c3, disabled: i2 = false, horizontal: b2 = false, multiple: R2 = false, ...m } = e3;
const P = b2 ? "horizontal" : "vertical";
let S2 = y(a2), [L = R2 ? [] : void 0, y2] = T2(n, p3, r2), [T3, o4] = Le(Ve, { dataRef: ye(), listboxState: 1, options: [], searchQuery: "", labelId: null, activeOptionIndex: null, activationTrigger: 1 }), x2 = D2({ static: false, hold: false }), E = D2(null), B = D2(null), W = D2(null), C2 = o2(typeof u3 == "string" ? (s4, c3) => {
let O = u3;
return (s4 == null ? void 0 : s4[O]) === (c3 == null ? void 0 : c3[O]);
} : u3), A = ge((s4) => u(d2.mode, { [1]: () => L.some((c3) => C2(c3, s4)), [0]: () => C2(L, s4) }), [L]), d2 = h3(() => ({ ...T3, value: L, disabled: i2, mode: R2 ? 1 : 0, orientation: P, compare: C2, isSelected: A, optionsPropsRef: x2, labelRef: E, buttonRef: B, optionsRef: W }), [L, i2, R2, T3]);
l(() => {
T3.dataRef.current = d2;
}, [d2]), h2([d2.buttonRef, d2.optionsRef], (s4, c3) => {
var O;
o4({ type: 1 }), h(c3, T.Loose) || (s4.preventDefault(), (O = d2.buttonRef.current) == null || O.focus());
}, d2.listboxState === 0);
let H = h3(() => ({ open: d2.listboxState === 0, disabled: i2, value: L }), [d2, i2, L]), ie = o2((s4) => {
let c3 = d2.options.find((O) => O.id === s4);
c3 && X2(c3.dataRef.current.value);
}), re = o2(() => {
if (d2.activeOptionIndex !== null) {
let { dataRef: s4, id: c3 } = d2.options[d2.activeOptionIndex];
X2(s4.current.value), o4({ type: 2, focus: a.Specific, id: c3 });
}
}), ae = o2(() => o4({ type: 0 })), le = o2(() => o4({ type: 1 })), se = o2((s4, c3, O) => s4 === a.Specific ? o4({ type: 2, focus: a.Specific, id: c3, trigger: O }) : o4({ type: 2, focus: s4, trigger: O })), pe = o2((s4, c3) => (o4({ type: 5, id: s4, dataRef: c3 }), () => o4({ type: 6, id: s4 }))), ue = o2((s4) => (o4({ type: 7, id: s4 }), () => o4({ type: 7, id: null }))), X2 = o2((s4) => u(d2.mode, { [0]() {
return y2 == null ? void 0 : y2(s4);
}, [1]() {
let c3 = d2.value.slice(), O = c3.findIndex((F) => C2(F, s4));
return O === -1 ? c3.push(s4) : c3.splice(O, 1), y2 == null ? void 0 : y2(c3);
} })), de = o2((s4) => o4({ type: 3, value: s4 })), ce = o2(() => o4({ type: 4 })), fe = h3(() => ({ onChange: X2, registerOption: pe, registerLabel: ue, goToOption: se, closeListbox: le, openListbox: ae, selectActiveOption: re, selectOption: ie, search: de, clearSearch: ce }), []), Te = { ref: S2 }, G = D2(null), be = p();
return te(() => {
G.current && r2 !== void 0 && be.addEventListener(G.current, "reset", () => {
y2 == null || y2(r2);
});
}, [G, y2]), N.createElement(J.Provider, { value: fe }, N.createElement(q.Provider, { value: d2 }, N.createElement(c2, { value: u(d2.listboxState, { [0]: d.Open, [1]: d.Closed }) }, t != null && L != null && e2({ [t]: L }).map(([s4, c3], O) => N.createElement(c, { features: p2.Hidden, ref: O === 0 ? (F) => {
var Y;
G.current = (Y = F == null ? void 0 : F.closest("form")) != null ? Y : null;
} : void 0, ...R({ key: s4, as: "input", type: "hidden", hidden: true, readOnly: true, form: l2, name: s4, value: c3 }) })), X({ ourProps: Te, theirProps: m, slot: H, defaultTag: Ke, name: "Listbox" }))));
}
var We = "button";
function Xe(e3, a2) {
var y2;
let n = I(), { id: r2 = `headlessui-listbox-button-${n}`, ...l2 } = e3, t = U("Listbox.Button"), p3 = _("Listbox.Button"), u3 = y(t.buttonRef, a2), i2 = p(), b2 = o2((T3) => {
switch (T3.key) {
case o3.Space:
case o3.Enter:
case o3.ArrowDown:
T3.preventDefault(), p3.openListbox(), i2.nextFrame(() => {
t.value || p3.goToOption(a.First);
});
break;
case o3.ArrowUp:
T3.preventDefault(), p3.openListbox(), i2.nextFrame(() => {
t.value || p3.goToOption(a.Last);
});
break;
}
}), R2 = o2((T3) => {
switch (T3.key) {
case o3.Space:
T3.preventDefault();
break;
}
}), m = o2((T3) => {
if (r(T3.currentTarget))
return T3.preventDefault();
t.listboxState === 0 ? (p3.closeListbox(), i2.nextFrame(() => {
var o4;
return (o4 = t.buttonRef.current) == null ? void 0 : o4.focus({ preventScroll: true });
})) : (T3.preventDefault(), p3.openListbox());
}), P = i(() => {
if (t.labelId)
return [t.labelId, r2].join(" ");
}, [t.labelId, r2]), S2 = h3(() => ({ open: t.listboxState === 0, disabled: t.disabled, value: t.value }), [t]), L = { ref: u3, id: r2, type: s2(e3, t.buttonRef), "aria-haspopup": "listbox", "aria-controls": (y2 = t.optionsRef.current) == null ? void 0 : y2.id, "aria-expanded": t.listboxState === 0, "aria-labelledby": P, disabled: t.disabled, onKeyDown: b2, onKeyUp: R2, onClick: m };
return X({ ourProps: L, theirProps: l2, slot: S2, defaultTag: We, name: "Listbox.Button" });
}
var $e = "label";
function ze(e3, a2) {
let n = I(), { id: r2 = `headlessui-listbox-label-${n}`, ...l2 } = e3, t = U("Listbox.Label"), p3 = _("Listbox.Label"), u3 = y(t.labelRef, a2);
l(() => p3.registerLabel(r2), [r2]);
let i2 = o2(() => {
var m;
return (m = t.buttonRef.current) == null ? void 0 : m.focus({ preventScroll: true });
}), b2 = h3(() => ({ open: t.listboxState === 0, disabled: t.disabled }), [t]);
return X({ ourProps: { ref: u3, id: r2, onClick: i2 }, theirProps: l2, slot: b2, defaultTag: $e, name: "Listbox.Label" });
}
var Je = "ul";
var qe = S.RenderStrategy | S.Static;
function Ye(e3, a2) {
var T3;
let n = I(), { id: r2 = `headlessui-listbox-options-${n}`, ...l2 } = e3, t = U("Listbox.Options"), p3 = _("Listbox.Options"), u3 = y(t.optionsRef, a2), i2 = p(), b2 = p(), R2 = C(), m = (() => R2 !== null ? (R2 & d.Open) === d.Open : t.listboxState === 0)();
te(() => {
var x2;
let o4 = t.optionsRef.current;
o4 && t.listboxState === 0 && o4 !== ((x2 = e(o4)) == null ? void 0 : x2.activeElement) && o4.focus({ preventScroll: true });
}, [t.listboxState, t.optionsRef]);
let P = o2((o4) => {
switch (b2.dispose(), o4.key) {
case o3.Space:
if (t.searchQuery !== "")
return o4.preventDefault(), o4.stopPropagation(), p3.search(o4.key);
case o3.Enter:
if (o4.preventDefault(), o4.stopPropagation(), t.activeOptionIndex !== null) {
let { dataRef: x2 } = t.options[t.activeOptionIndex];
p3.onChange(x2.current.value);
}
t.mode === 0 && (p3.closeListbox(), o().nextFrame(() => {
var x2;
return (x2 = t.buttonRef.current) == null ? void 0 : x2.focus({ preventScroll: true });
}));
break;
case u(t.orientation, { vertical: o3.ArrowDown, horizontal: o3.ArrowRight }):
return o4.preventDefault(), o4.stopPropagation(), p3.goToOption(a.Next);
case u(t.orientation, { vertical: o3.ArrowUp, horizontal: o3.ArrowLeft }):
return o4.preventDefault(), o4.stopPropagation(), p3.goToOption(a.Previous);
case o3.Home:
case o3.PageUp:
return o4.preventDefault(), o4.stopPropagation(), p3.goToOption(a.First);
case o3.End:
case o3.PageDown:
return o4.preventDefault(), o4.stopPropagation(), p3.goToOption(a.Last);
case o3.Escape:
return o4.preventDefault(), o4.stopPropagation(), p3.closeListbox(), i2.nextFrame(() => {
var x2;
return (x2 = t.buttonRef.current) == null ? void 0 : x2.focus({ preventScroll: true });
});
case o3.Tab:
o4.preventDefault(), o4.stopPropagation();
break;
default:
o4.key.length === 1 && (p3.search(o4.key), b2.setTimeout(() => p3.clearSearch(), 350));
break;
}
}), S2 = i(() => {
var o4, x2, E;
return (E = (o4 = t.labelRef.current) == null ? void 0 : o4.id) != null ? E : (x2 = t.buttonRef.current) == null ? void 0 : x2.id;
}, [t.labelRef.current, t.buttonRef.current]), L = h3(() => ({ open: t.listboxState === 0 }), [t]), y2 = { "aria-activedescendant": t.activeOptionIndex === null || (T3 = t.options[t.activeOptionIndex]) == null ? void 0 : T3.id, "aria-multiselectable": t.mode === 1 ? true : void 0, "aria-labelledby": S2, "aria-orientation": t.orientation, id: r2, onKeyDown: P, role: "listbox", tabIndex: 0, ref: u3 };
return X({ ourProps: y2, theirProps: l2, slot: L, defaultTag: Je, features: qe, visible: m, name: "Listbox.Options" });
}
var Ze = "li";
function et(e3, a2) {
let n = I(), { id: r2 = `headlessui-listbox-option-${n}`, disabled: l2 = false, value: t, ...p3 } = e3, u3 = U("Listbox.Option"), i2 = _("Listbox.Option"), b2 = u3.activeOptionIndex !== null ? u3.options[u3.activeOptionIndex].id === r2 : false, R2 = u3.isSelected(t), m = D2(null), P = b(m), S2 = s({ disabled: l2, value: t, domRef: m, get textValue() {
return P();
} }), L = y(a2, m);
l(() => {
if (u3.listboxState !== 0 || !b2 || u3.activationTrigger === 0)
return;
let A = o();
return A.requestAnimationFrame(() => {
var d2, H;
(H = (d2 = m.current) == null ? void 0 : d2.scrollIntoView) == null || H.call(d2, { block: "nearest" });
}), A.dispose;
}, [m, b2, u3.listboxState, u3.activationTrigger, u3.activeOptionIndex]), l(() => i2.registerOption(r2, S2), [S2, r2]);
let y2 = o2((A) => {
if (l2)
return A.preventDefault();
i2.onChange(t), u3.mode === 0 && (i2.closeListbox(), o().nextFrame(() => {
var d2;
return (d2 = u3.buttonRef.current) == null ? void 0 : d2.focus({ preventScroll: true });
}));
}), T3 = o2(() => {
if (l2)
return i2.goToOption(a.Nothing);
i2.goToOption(a.Specific, r2);
}), o4 = u2(), x2 = o2((A) => o4.update(A)), E = o2((A) => {
o4.wasMoved(A) && (l2 || b2 || i2.goToOption(a.Specific, r2, 0));
}), B = o2((A) => {
o4.wasMoved(A) && (l2 || b2 && i2.goToOption(a.Nothing));
}), W = h3(() => ({ active: b2, selected: R2, disabled: l2 }), [b2, R2, l2]);
return X({ ourProps: { id: r2, ref: L, role: "option", tabIndex: l2 === true ? void 0 : -1, "aria-disabled": l2 === true ? true : void 0, "aria-selected": R2, disabled: void 0, onClick: y2, onFocus: T3, onPointerEnter: x2, onMouseEnter: x2, onPointerMove: E, onMouseMove: E, onPointerLeave: B, onMouseLeave: B }, theirProps: p3, slot: W, defaultTag: Ze, name: "Listbox.Option" });
}
var tt = D(Qe);
var ot = D(Xe);
var nt = D(ze);
var it = D(Ye);
var rt = D(et);
var Nt = Object.assign(tt, { Button: ot, Label: nt, Options: it, Option: rt });
export {
Nt
};