UNPKG

alinea

Version:
416 lines (410 loc) 18.2 kB
import { autoUpdate, flip, offset, useFloating } from "../chunks/chunk-JL5K3F7X.js"; import { c as c2, f as f2, s, s2, u as u3, y as y2 } from "../chunks/chunk-2STBQ2Y4.js"; import { Fe, Me, R, R2, Re, be, c, d, f, i, m, n as n2, re, u as u4, x2 as x, xe, ye } from "../chunks/chunk-WLKPH7JA.js"; import { A, F, G, _ as _2, h, j } from "../chunks/chunk-HSIHEWFC.js"; import { K as K2, P, w as w2 } from "../chunks/chunk-SOTBYUJY.js"; import { r as r2 } from "../chunks/chunk-2NTSADJL.js"; import { $6179b936705e76d3$export$ae780daf29e6d456, $f7dceffc5ad7768b$export$4e328f61c538687f, K, L, O, _, e, n, o, o2, o3, p, r, u, u2, w, y } from "../chunks/chunk-VUACWPFC.js"; import { dist_default } from "../chunks/chunk-A5O3N2GS.js"; import "../chunks/chunk-NZLE2WMY.js"; // node_modules/@headlessui/react/dist/hooks/use-tree-walker.js import { useEffect as T, useRef as E } from "react"; function F2(c3, { container: e2, accept: t, walk: r3 }) { let o4 = E(t), l = E(r3); T(() => { o4.current = t, l.current = r3; }, [t, r3]), n(() => { if (!e2 || !c3) return; let n3 = u(e2); if (!n3) return; let f3 = o4.current, p2 = l.current, i2 = Object.assign((m2) => f3(m2), { acceptNode: f3 }), u5 = n3.createTreeWalker(e2, NodeFilter.SHOW_ELEMENT, i2, false); for (; u5.nextNode(); ) p2(u5.currentNode); }, [e2, c3, o4, l]); } // node_modules/@headlessui/react/dist/components/menu/menu.js import x2, { Fragment as z, createContext as de, useCallback as ce, useContext as fe, useEffect as Te, useMemo as H, useReducer as ye2, useRef as Y, useState as Ie } from "react"; import { flushSync as L2 } from "react-dom"; var qe = ((r3) => (r3[r3.Open = 0] = "Open", r3[r3.Closed = 1] = "Closed", r3))(qe || {}); var ze = ((r3) => (r3[r3.Pointer = 0] = "Pointer", r3[r3.Other = 1] = "Other", r3))(ze || {}); var Ye = ((a) => (a[a.OpenMenu = 0] = "OpenMenu", a[a.CloseMenu = 1] = "CloseMenu", a[a.GoToItem = 2] = "GoToItem", a[a.Search = 3] = "Search", a[a.ClearSearch = 4] = "ClearSearch", a[a.RegisterItem = 5] = "RegisterItem", a[a.UnregisterItem = 6] = "UnregisterItem", a[a.SetButtonElement = 7] = "SetButtonElement", a[a.SetItemsElement = 8] = "SetItemsElement", a))(Ye || {}); function j2(e2, n3 = (r3) => r3) { let r3 = e2.activeItemIndex !== null ? e2.items[e2.activeItemIndex] : null, l = _2(n3(e2.items.slice()), (u5) => u5.dataRef.current.domRef.current), o4 = r3 ? l.indexOf(r3) : null; return o4 === -1 && (o4 = null), { items: l, activeItemIndex: o4 }; } var Ze = { [1](e2) { return e2.menuState === 1 ? e2 : { ...e2, activeItemIndex: null, menuState: 1 }; }, [0](e2) { return e2.menuState === 0 ? e2 : { ...e2, __demoMode: false, menuState: 0 }; }, [2]: (e2, n3) => { var u5, p2, s3, m2, a; if (e2.menuState === 1) return e2; let r3 = { ...e2, searchQuery: "", activationTrigger: (u5 = n3.trigger) != null ? u5 : 1, __demoMode: false }; if (n3.focus === c2.Nothing) return { ...r3, activeItemIndex: null }; if (n3.focus === c2.Specific) return { ...r3, activeItemIndex: e2.items.findIndex((t) => t.id === n3.id) }; if (n3.focus === c2.Previous) { let t = e2.activeItemIndex; if (t !== null) { let d2 = e2.items[t].dataRef.current.domRef, f3 = f2(n3, { resolveItems: () => e2.items, resolveActiveIndex: () => e2.activeItemIndex, resolveId: (c3) => c3.id, resolveDisabled: (c3) => c3.dataRef.current.disabled }); if (f3 !== null) { let c3 = e2.items[f3].dataRef.current.domRef; if (((p2 = d2.current) == null ? void 0 : p2.previousElementSibling) === c3.current || ((s3 = c3.current) == null ? void 0 : s3.previousElementSibling) === null) return { ...r3, activeItemIndex: f3 }; } } } else if (n3.focus === c2.Next) { let t = e2.activeItemIndex; if (t !== null) { let d2 = e2.items[t].dataRef.current.domRef, f3 = f2(n3, { resolveItems: () => e2.items, resolveActiveIndex: () => e2.activeItemIndex, resolveId: (c3) => c3.id, resolveDisabled: (c3) => c3.dataRef.current.disabled }); if (f3 !== null) { let c3 = e2.items[f3].dataRef.current.domRef; if (((m2 = d2.current) == null ? void 0 : m2.nextElementSibling) === c3.current || ((a = c3.current) == null ? void 0 : a.nextElementSibling) === null) return { ...r3, activeItemIndex: f3 }; } } } let l = j2(e2), o4 = f2(n3, { resolveItems: () => l.items, resolveActiveIndex: () => l.activeItemIndex, resolveId: (t) => t.id, resolveDisabled: (t) => t.dataRef.current.disabled }); return { ...r3, ...l, activeItemIndex: o4 }; }, [3]: (e2, n3) => { let l = e2.searchQuery !== "" ? 0 : 1, o4 = e2.searchQuery + n3.value.toLowerCase(), p2 = (e2.activeItemIndex !== null ? e2.items.slice(e2.activeItemIndex + l).concat(e2.items.slice(0, e2.activeItemIndex + l)) : e2.items).find((m2) => { var a; return ((a = m2.dataRef.current.textValue) == null ? void 0 : a.startsWith(o4)) && !m2.dataRef.current.disabled; }), s3 = p2 ? e2.items.indexOf(p2) : -1; return s3 === -1 || s3 === e2.activeItemIndex ? { ...e2, searchQuery: o4 } : { ...e2, searchQuery: o4, activeItemIndex: s3, activationTrigger: 1 }; }, [4](e2) { return e2.searchQuery === "" ? e2 : { ...e2, searchQuery: "", searchActiveItemIndex: null }; }, [5]: (e2, n3) => { let r3 = j2(e2, (l) => [...l, { id: n3.id, dataRef: n3.dataRef }]); return { ...e2, ...r3 }; }, [6]: (e2, n3) => { let r3 = j2(e2, (l) => { let o4 = l.findIndex((u5) => u5.id === n3.id); return o4 !== -1 && l.splice(o4, 1), l; }); return { ...e2, ...r3, activationTrigger: 1 }; }, [7]: (e2, n3) => e2.buttonElement === n3.element ? e2 : { ...e2, buttonElement: n3.element }, [8]: (e2, n3) => e2.itemsElement === n3.element ? e2 : { ...e2, itemsElement: n3.element } }; var Q = de(null); Q.displayName = "MenuContext"; function w3(e2) { let n3 = fe(Q); if (n3 === null) { let r3 = new Error(`<${e2} /> is missing a parent <Menu /> component.`); throw Error.captureStackTrace && Error.captureStackTrace(r3, w3), r3; } return n3; } function et(e2, n3) { return u2(n3.type, Ze, e2, n3); } var tt = z; function nt(e2, n3) { let { __demoMode: r3 = false, ...l } = e2, o4 = ye2(et, { __demoMode: r3, menuState: r3 ? 0 : 1, buttonElement: null, itemsElement: null, items: [], searchQuery: "", activeItemIndex: null, activationTrigger: 1 }), [{ menuState: u5, itemsElement: p2, buttonElement: s3 }, m2] = o4, a = y(n3); R(u5 === 0, [s3, p2], (b, S) => { m2({ type: 1 }), A(S, h.Loose) || (b.preventDefault(), s3 == null || s3.focus()); }); let d2 = o2(() => { m2({ type: 1 }); }), f3 = H(() => ({ open: u5 === 0, close: d2 }), [u5, d2]), c3 = { ref: a }, A2 = L(); return x2.createElement(Me, null, x2.createElement(Q.Provider, { value: o4 }, x2.createElement(c, { value: u2(u5, { [0]: i.Open, [1]: i.Closed }) }, A2({ ourProps: c3, theirProps: l, slot: f3, defaultTag: tt, name: "Menu" })))); } var rt = "button"; function ot(e2, n3) { var h2; let r3 = r(), { id: l = `headlessui-menu-button-${r3}`, disabled: o4 = false, autoFocus: u5 = false, ...p2 } = e2, [s3, m2] = w3("Menu.Button"), a = Fe(), t = y(n3, ye(), o2((T2) => m2({ type: 7, element: T2 }))), d2 = o2((T2) => { switch (T2.key) { case o3.Space: case o3.Enter: case o3.ArrowDown: T2.preventDefault(), T2.stopPropagation(), L2(() => m2({ type: 0 })), m2({ type: 2, focus: c2.First }); break; case o3.ArrowUp: T2.preventDefault(), T2.stopPropagation(), L2(() => m2({ type: 0 })), m2({ type: 2, focus: c2.Last }); break; } }), f3 = o2((T2) => { switch (T2.key) { case o3.Space: T2.preventDefault(); break; } }), c3 = o2((T2) => { var F3; if (r2(T2.currentTarget)) return T2.preventDefault(); o4 || (s3.menuState === 0 ? (L2(() => m2({ type: 1 })), (F3 = s3.buttonElement) == null || F3.focus({ preventScroll: true })) : (T2.preventDefault(), m2({ type: 0 }))); }), { isFocusVisible: A2, focusProps: b } = $f7dceffc5ad7768b$export$4e328f61c538687f({ autoFocus: u5 }), { isHovered: S, hoverProps: D } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled: o4 }), { pressed: M, pressProps: P2 } = w({ disabled: o4 }), v = H(() => ({ open: s3.menuState === 0, active: M || s3.menuState === 0, disabled: o4, hover: S, focus: A2, autofocus: u5 }), [s3, S, A2, M, o4, u5]), C = _(a(), { ref: t, id: l, type: e(e2, s3.buttonElement), "aria-haspopup": "menu", "aria-controls": (h2 = s3.itemsElement) == null ? void 0 : h2.id, "aria-expanded": s3.menuState === 0, disabled: o4 || void 0, autoFocus: u5, onKeyDown: d2, onKeyUp: f3, onClick: c3 }, b, D, P2); return L()({ ourProps: C, theirProps: p2, slot: v, defaultTag: rt, name: "Menu.Button" }); } var at = "div"; var lt = O.RenderStrategy | O.Static; function it(e2, n3) { var J, V; let r3 = r(), { id: l = `headlessui-menu-items-${r3}`, anchor: o4, portal: u5 = false, modal: p2 = true, transition: s3 = false, ...m2 } = e2, a = xe(o4), [t, d2] = w3("Menu.Items"), [f3, c3] = Re(a), A2 = be(), [b, S] = Ie(null), D = y(n3, a ? f3 : null, o2((i2) => d2({ type: 8, element: i2 })), S), M = n2(t.itemsElement); a && (u5 = true); let P2 = u4(), [v, C] = x(s3, b, P2 !== null ? (P2 & i.Open) === i.Open : t.menuState === 0); m(v, t.buttonElement, () => { d2({ type: 1 }); }); let O2 = t.__demoMode ? false : p2 && t.menuState === 0; f(O2, M); let h2 = t.__demoMode ? false : p2 && t.menuState === 0; y2(h2, { allowed: ce(() => [t.buttonElement, t.itemsElement], [t.buttonElement, t.itemsElement]) }); let T2 = t.menuState !== 0, K3 = s(T2, t.buttonElement) ? false : v; Te(() => { let i2 = t.itemsElement; i2 && t.menuState === 0 && i2 !== (M == null ? void 0 : M.activeElement) && i2.focus({ preventScroll: true }); }, [t.menuState, t.itemsElement, M]), F2(t.menuState === 0, { container: t.itemsElement, accept(i2) { return i2.getAttribute("role") === "menuitem" ? NodeFilter.FILTER_REJECT : i2.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT; }, walk(i2) { i2.setAttribute("role", "none"); } }); let I = p(), G2 = o2((i2) => { var X, $, q; switch (I.dispose(), i2.key) { case o3.Space: if (t.searchQuery !== "") return i2.preventDefault(), i2.stopPropagation(), d2({ type: 3, value: i2.key }); case o3.Enter: if (i2.preventDefault(), i2.stopPropagation(), d2({ type: 1 }), t.activeItemIndex !== null) { let { dataRef: ue } = t.items[t.activeItemIndex]; ($ = (X = ue.current) == null ? void 0 : X.domRef.current) == null || $.click(); } G(t.buttonElement); break; case o3.ArrowDown: return i2.preventDefault(), i2.stopPropagation(), d2({ type: 2, focus: c2.Next }); case o3.ArrowUp: return i2.preventDefault(), i2.stopPropagation(), d2({ type: 2, focus: c2.Previous }); case o3.Home: case o3.PageUp: return i2.preventDefault(), i2.stopPropagation(), d2({ type: 2, focus: c2.First }); case o3.End: case o3.PageDown: return i2.preventDefault(), i2.stopPropagation(), d2({ type: 2, focus: c2.Last }); case o3.Escape: i2.preventDefault(), i2.stopPropagation(), L2(() => d2({ type: 1 })), (q = t.buttonElement) == null || q.focus({ preventScroll: true }); break; case o3.Tab: i2.preventDefault(), i2.stopPropagation(), L2(() => d2({ type: 1 })), j(t.buttonElement, i2.shiftKey ? F.Previous : F.Next); break; default: i2.key.length === 1 && (d2({ type: 3, value: i2.key }), I.setTimeout(() => d2({ type: 4 }), 350)); break; } }), ae = o2((i2) => { switch (i2.key) { case o3.Space: i2.preventDefault(); break; } }), le = H(() => ({ open: t.menuState === 0 }), [t.menuState]), ie = _(a ? A2() : {}, { "aria-activedescendant": t.activeItemIndex === null || (J = t.items[t.activeItemIndex]) == null ? void 0 : J.id, "aria-labelledby": (V = t.buttonElement) == null ? void 0 : V.id, id: l, onKeyDown: G2, onKeyUp: ae, role: "menu", tabIndex: t.menuState === 0 ? 0 : void 0, ref: D, style: { ...m2.style, ...c3, "--button-width": d(t.buttonElement, true).width }, ...R2(C) }), se = L(); return x2.createElement(re, { enabled: u5 ? e2.static || v : false }, se({ ourProps: ie, theirProps: m2, slot: le, defaultTag: at, features: lt, visible: K3, name: "Menu.Items" })); } var st = z; function ut(e2, n3) { let r3 = r(), { id: l = `headlessui-menu-item-${r3}`, disabled: o4 = false, ...u5 } = e2, [p2, s3] = w3("Menu.Item"), m2 = p2.activeItemIndex !== null ? p2.items[p2.activeItemIndex].id === l : false, a = Y(null), t = y(n3, a); n(() => { if (!p2.__demoMode && p2.menuState === 0 && m2 && p2.activationTrigger !== 0) return o().requestAnimationFrame(() => { var I, G2; (G2 = (I = a.current) == null ? void 0 : I.scrollIntoView) == null || G2.call(I, { block: "nearest" }); }); }, [p2.__demoMode, a, m2, p2.menuState, p2.activationTrigger, p2.activeItemIndex]); let d2 = s2(a), f3 = Y({ disabled: o4, domRef: a, get textValue() { return d2(); } }); n(() => { f3.current.disabled = o4; }, [f3, o4]), n(() => (s3({ type: 5, id: l, dataRef: f3 }), () => s3({ type: 6, id: l })), [f3, l]); let c3 = o2(() => { s3({ type: 1 }); }), A2 = o2((I) => { if (o4) return I.preventDefault(); s3({ type: 1 }), G(p2.buttonElement); }), b = o2(() => { if (o4) return s3({ type: 2, focus: c2.Nothing }); s3({ type: 2, focus: c2.Specific, id: l }); }), S = u3(), D = o2((I) => { S.update(I), !o4 && (m2 || s3({ type: 2, focus: c2.Specific, id: l, trigger: 0 })); }), M = o2((I) => { S.wasMoved(I) && (o4 || m2 || s3({ type: 2, focus: c2.Specific, id: l, trigger: 0 })); }), P2 = o2((I) => { S.wasMoved(I) && (o4 || m2 && s3({ type: 2, focus: c2.Nothing })); }), [v, C] = K2(), [O2, h2] = w2(), T2 = H(() => ({ active: m2, focus: m2, disabled: o4, close: c3 }), [m2, o4, c3]), F3 = { id: l, ref: t, role: "menuitem", tabIndex: o4 === true ? void 0 : -1, "aria-disabled": o4 === true ? true : void 0, "aria-labelledby": v, "aria-describedby": O2, disabled: void 0, onClick: A2, onFocus: b, onPointerEnter: D, onMouseEnter: D, onPointerMove: M, onMouseMove: M, onPointerLeave: P2, onMouseLeave: P2 }, K3 = L(); return x2.createElement(C, null, x2.createElement(h2, null, K3({ ourProps: F3, theirProps: u5, slot: T2, defaultTag: st, name: "Menu.Item" }))); } var pt = "div"; function mt(e2, n3) { let [r3, l] = K2(), o4 = e2, u5 = { ref: n3, "aria-labelledby": r3, role: "group" }, p2 = L(); return x2.createElement(l, null, p2({ ourProps: u5, theirProps: o4, slot: {}, defaultTag: pt, name: "Menu.Section" })); } var dt = "header"; function ct(e2, n3) { let r3 = r(), { id: l = `headlessui-menu-heading-${r3}`, ...o4 } = e2, u5 = P(); n(() => u5.register(l), [l, u5.register]); let p2 = { id: l, ref: n3, role: "presentation", ...u5.props }; return L()({ ourProps: p2, theirProps: o4, slot: {}, defaultTag: dt, name: "Menu.Heading" }); } var ft = "div"; function Tt(e2, n3) { let r3 = e2, l = { ref: n3, role: "separator" }; return L()({ ourProps: l, theirProps: r3, slot: {}, defaultTag: ft, name: "Menu.Separator" }); } var yt = K(nt); var It = K(ot); var gt = K(it); var Et = K(ut); var Mt = K(mt); var St = K(ct); var At = K(Tt); var rn = Object.assign(yt, { Button: It, Items: gt, Item: Et, Section: Mt, Heading: St, Separator: At }); // src/ui/DropdownMenu.tsx import { createContext, useContext } from "react"; // src/ui/DropdownMenu.module.scss var DropdownMenu_module_default = { "root": "alinea-DropdownMenu", "trigger": "alinea-DropdownMenu-trigger", "items": "alinea-DropdownMenu-items", "is-bottom": "alinea-DropdownMenu-is-bottom", "isBottom": "alinea-DropdownMenu-is-bottom", "is-top": "alinea-DropdownMenu-is-top", "isTop": "alinea-DropdownMenu-is-top", "is-left": "alinea-DropdownMenu-is-left", "isLeft": "alinea-DropdownMenu-is-left", "is-right": "alinea-DropdownMenu-is-right", "isRight": "alinea-DropdownMenu-is-right", "item": "alinea-DropdownMenu-item", "is-active": "alinea-DropdownMenu-is-active", "isActive": "alinea-DropdownMenu-is-active" }; // src/ui/DropdownMenu.tsx import { jsx } from "react/jsx-runtime"; var styles = dist_default(DropdownMenu_module_default); var DropdownMenu; ((DropdownMenu2) => { const floatingContext = createContext( void 0 ); function Root({ top, bottom, left, right, ...props }) { const side = top ? "top" : "bottom"; const align = left ? "end" : "start"; const floating = useFloating({ whileElementsMounted: autoUpdate, strategy: "fixed", placement: `${side}-${align}`, middleware: [offset(4), flip()] }); return /* @__PURE__ */ jsx(floatingContext.Provider, { value: floating, children: /* @__PURE__ */ jsx(rn, { children: /* @__PURE__ */ jsx("div", { ...props, className: styles.root.mergeProps(props)() }) }) }); } DropdownMenu2.Root = Root; function Trigger(props) { const floating = useContext(floatingContext); return /* @__PURE__ */ jsx( rn.Button, { ref: floating.reference, ...props, className: styles.trigger.mergeProps(props)() } ); } DropdownMenu2.Trigger = Trigger; function Items(props) { const floating = useContext(floatingContext); return /* @__PURE__ */ jsx( rn.Items, { ...props, ref: floating.floating, style: { position: floating.strategy, top: `${floating.y || 0}px`, left: `${floating.x || 0}px` }, className: styles.items.mergeProps(props)() } ); } DropdownMenu2.Items = Items; function Item(props) { return /* @__PURE__ */ jsx(rn.Item, { children: ({ active }) => { return /* @__PURE__ */ jsx( "button", { ...props, className: styles.item.mergeProps(props)({ active }) } ); } }); } DropdownMenu2.Item = Item; })(DropdownMenu || (DropdownMenu = {})); export { DropdownMenu };