UNPKG

alinea

Version:
419 lines (411 loc) 19.9 kB
import { Me, R, R2, Re, be, c, d, f as f2, i, m, n as n2, re, s as s3, s2 as s4, te, u as u3, x2 as x, xe, ye } from "../chunks/chunk-WLKPH7JA.js"; import { A, F, P, T as T2, b, h } from "../chunks/chunk-HSIHEWFC.js"; import { f, s as s2 } from "../chunks/chunk-AICQFCVN.js"; import { r as r2 } from "../chunks/chunk-2NTSADJL.js"; import { $6179b936705e76d3$export$ae780daf29e6d456, $f7dceffc5ad7768b$export$4e328f61c538687f, K, L, O, T, _, e, n, o2 as o, o3 as o2, r, s2 as s, 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/internal/close-provider.js import r3, { createContext as n3, useContext as i2 } from "react"; var e2 = n3(() => { }); function C({ value: t, children: o4 }) { return r3.createElement(e2.Provider, { value: t }, o4); } // node_modules/@headlessui/react/dist/hooks/use-event-listener.js import { useEffect as d2 } from "react"; function E(n4, e3, a3, t) { let i3 = s(a3); d2(() => { n4 = n4 != null ? n4 : window; function r4(o4) { i3.current(o4); } return n4.addEventListener(e3, r4, t), () => n4.removeEventListener(e3, r4, t); }, [n4, e3, t]); } // node_modules/@headlessui/react/dist/hooks/use-root-containers.js import f3, { createContext as M, useContext as d3, useState as H } from "react"; function R3({ defaultContainers: l = [], portals: n4, mainTreeNode: o4 } = {}) { let r4 = n2(o4), u5 = o(() => { var i3, c2; let t = []; for (let e3 of l) e3 !== null && (e3 instanceof HTMLElement ? t.push(e3) : "current" in e3 && e3.current instanceof HTMLElement && t.push(e3.current)); if (n4 != null && n4.current) for (let e3 of n4.current) t.push(e3); for (let e3 of (i3 = r4 == null ? void 0 : r4.querySelectorAll("html > *, body > *")) != null ? i3 : []) e3 !== document.body && e3 !== document.head && e3 instanceof HTMLElement && e3.id !== "headlessui-portal-root" && (o4 && (e3.contains(o4) || e3.contains((c2 = o4 == null ? void 0 : o4.getRootNode()) == null ? void 0 : c2.host)) || t.some((m2) => e3.contains(m2)) || t.push(e3)); return t; }); return { resolveContainers: u5, contains: o((t) => u5().some((i3) => i3.contains(t))) }; } var a = M(null); function O2({ children: l, node: n4 }) { let [o4, r4] = H(null), u5 = b2(n4 != null ? n4 : o4); return f3.createElement(a.Provider, { value: u5 }, l, u5 === null && f3.createElement(f, { features: s2.Hidden, ref: (t) => { var i3, c2; if (t) { for (let e3 of (c2 = (i3 = u(t)) == null ? void 0 : i3.querySelectorAll("html > *, body > *")) != null ? c2 : []) if (e3 !== document.body && e3 !== document.head && e3 instanceof HTMLElement && e3 != null && e3.contains(t)) { r4(e3); break; } } } })); } function b2(l = null) { var n4; return (n4 = d3(a)) != null ? n4 : l; } // node_modules/@headlessui/react/dist/hooks/use-tab-direction.js import { useRef as o3 } from "react"; var a2 = ((r4) => (r4[r4.Forwards = 0] = "Forwards", r4[r4.Backwards = 1] = "Backwards", r4))(a2 || {}); function u4() { let e3 = o3(0); return s3(true, "keydown", (r4) => { r4.key === "Tab" && (e3.current = r4.shiftKey ? 1 : 0); }, true), e3; } // node_modules/@headlessui/react/dist/components/popover/popover.js import y2, { createContext as oe, createRef as Pe, useContext as re2, useEffect as ne, useMemo as D, useReducer as De, useRef as ee, useState as le } from "react"; var lt = ((f4) => (f4[f4.Open = 0] = "Open", f4[f4.Closed = 1] = "Closed", f4))(lt || {}); var at = ((p) => (p[p.TogglePopover = 0] = "TogglePopover", p[p.ClosePopover = 1] = "ClosePopover", p[p.SetButton = 2] = "SetButton", p[p.SetButtonId = 3] = "SetButtonId", p[p.SetPanel = 4] = "SetPanel", p[p.SetPanelId = 5] = "SetPanelId", p))(at || {}); var pt = { [0]: (o4) => ({ ...o4, popoverState: u2(o4.popoverState, { [0]: 1, [1]: 0 }), __demoMode: false }), [1](o4) { return o4.popoverState === 1 ? o4 : { ...o4, popoverState: 1, __demoMode: false }; }, [2](o4, a3) { return o4.button === a3.button ? o4 : { ...o4, button: a3.button }; }, [3](o4, a3) { return o4.buttonId === a3.buttonId ? o4 : { ...o4, buttonId: a3.buttonId }; }, [4](o4, a3) { return o4.panel === a3.panel ? o4 : { ...o4, panel: a3.panel }; }, [5](o4, a3) { return o4.panelId === a3.panelId ? o4 : { ...o4, panelId: a3.panelId }; } }; var Ee = oe(null); Ee.displayName = "PopoverContext"; function se(o4) { let a3 = re2(Ee); if (a3 === null) { let f4 = new Error(`<${o4} /> is missing a parent <Popover /> component.`); throw Error.captureStackTrace && Error.captureStackTrace(f4, se), f4; } return a3; } var ue = oe(null); ue.displayName = "PopoverAPIContext"; function be2(o4) { let a3 = re2(ue); if (a3 === null) { let f4 = new Error(`<${o4} /> is missing a parent <Popover /> component.`); throw Error.captureStackTrace && Error.captureStackTrace(f4, be2), f4; } return a3; } var ge = oe(null); ge.displayName = "PopoverGroupContext"; function Me2() { return re2(ge); } var ie = oe(null); ie.displayName = "PopoverPanelContext"; function st() { return re2(ie); } function ut(o4, a3) { return u2(a3.type, pt, o4, a3); } var it = "div"; function dt(o4, a3) { var J; let { __demoMode: f4 = false, ...C2 } = o4, T3 = ee(null), S = y(a3, T((t) => { T3.current = t; })), p = ee([]), l = De(ut, { __demoMode: f4, popoverState: f4 ? 0 : 1, buttons: p, button: null, buttonId: null, panel: null, panelId: null, beforePanelSentinel: Pe(), afterPanelSentinel: Pe(), afterButtonSentinel: Pe() }), [{ popoverState: c2, button: d4, buttonId: r4, panel: s5, panelId: R4, beforePanelSentinel: m2, afterPanelSentinel: h2, afterButtonSentinel: P2 }, n4] = l, v = n2((J = T3.current) != null ? J : d4), g = D(() => { if (!d4 || !s5) return false; for (let E2 of document.querySelectorAll("body > *")) if (Number(E2 == null ? void 0 : E2.contains(d4)) ^ Number(E2 == null ? void 0 : E2.contains(s5))) return true; let t = b(), e3 = t.indexOf(d4), u5 = (e3 + t.length - 1) % t.length, i3 = (e3 + 1) % t.length, A2 = t[u5], x2 = t[i3]; return !s5.contains(A2) && !s5.contains(x2); }, [d4, s5]), _2 = s(r4), L2 = s(R4), I = D(() => ({ buttonId: _2, panelId: L2, close: () => n4({ type: 1 }) }), [_2, L2, n4]), M2 = Me2(), k = M2 == null ? void 0 : M2.registerPopover, B = o(() => { var t; return (t = M2 == null ? void 0 : M2.isFocusWithinPopoverGroup()) != null ? t : (v == null ? void 0 : v.activeElement) && ((d4 == null ? void 0 : d4.contains(v.activeElement)) || (s5 == null ? void 0 : s5.contains(v.activeElement))); }); ne(() => k == null ? void 0 : k(I), [k, I]); let [U, O3] = te(), N = b2(d4), w2 = R3({ mainTreeNode: N, portals: U, defaultContainers: [d4, s5] }); E(v == null ? void 0 : v.defaultView, "focus", (t) => { var e3, u5, i3, A2, x2, E2; t.target !== window && t.target instanceof HTMLElement && c2 === 0 && (B() || d4 && s5 && (w2.contains(t.target) || (u5 = (e3 = m2.current) == null ? void 0 : e3.contains) != null && u5.call(e3, t.target) || (A2 = (i3 = h2.current) == null ? void 0 : i3.contains) != null && A2.call(i3, t.target) || (E2 = (x2 = P2.current) == null ? void 0 : x2.contains) != null && E2.call(x2, t.target) || n4({ type: 1 }))); }, true), R(c2 === 0, w2.resolveContainers, (t, e3) => { n4({ type: 1 }), A(e3, h.Loose) || (t.preventDefault(), d4 == null || d4.focus()); }); let F2 = o((t) => { n4({ type: 1 }); let e3 = (() => t ? t instanceof HTMLElement ? t : "current" in t && t.current instanceof HTMLElement ? t.current : d4 : d4)(); e3 == null || e3.focus(); }), Q = D(() => ({ close: F2, isPortalled: g }), [F2, g]), K2 = D(() => ({ open: c2 === 0, close: F2 }), [c2, F2]), Z = { ref: S }, $ = L(); return y2.createElement(O2, { node: N }, y2.createElement(Me, null, y2.createElement(ie.Provider, { value: null }, y2.createElement(Ee.Provider, { value: l }, y2.createElement(ue.Provider, { value: Q }, y2.createElement(C, { value: F2 }, y2.createElement(c, { value: u2(c2, { [0]: i.Open, [1]: i.Closed }) }, y2.createElement(O3, null, $({ ourProps: Z, theirProps: C2, slot: K2, defaultTag: it, name: "Popover" }))))))))); } var Pt = "button"; function ft(o4, a3) { let f4 = r(), { id: C2 = `headlessui-popover-button-${f4}`, disabled: T3 = false, autoFocus: S = false, ...p } = o4, [l, c2] = se("Popover.Button"), { isPortalled: d4 } = be2("Popover.Button"), r4 = ee(null), s5 = `headlessui-focus-sentinel-${r()}`, R4 = Me2(), m2 = R4 == null ? void 0 : R4.closeOthers, P2 = st() !== null; ne(() => { if (!P2) return c2({ type: 3, buttonId: C2 }), () => { c2({ type: 3, buttonId: null }); }; }, [P2, C2, c2]); let [n4] = le(() => Symbol()), v = y(r4, a3, ye(), o((e3) => { if (!P2) { if (e3) l.buttons.current.push(n4); else { let u5 = l.buttons.current.indexOf(n4); u5 !== -1 && l.buttons.current.splice(u5, 1); } l.buttons.current.length > 1 && console.warn("You are already using a <Popover.Button /> but only 1 <Popover.Button /> is supported."), e3 && c2({ type: 2, button: e3 }); } })), g = y(r4, a3), _2 = n2(r4), L2 = o((e3) => { var u5, i3, A2; if (P2) { if (l.popoverState === 1) return; switch (e3.key) { case o2.Space: case o2.Enter: e3.preventDefault(), (i3 = (u5 = e3.target).click) == null || i3.call(u5), c2({ type: 1 }), (A2 = l.button) == null || A2.focus(); break; } } else switch (e3.key) { case o2.Space: case o2.Enter: e3.preventDefault(), e3.stopPropagation(), l.popoverState === 1 && (m2 == null || m2(l.buttonId)), c2({ type: 0 }); break; case o2.Escape: if (l.popoverState !== 0) return m2 == null ? void 0 : m2(l.buttonId); if (!r4.current || _2 != null && _2.activeElement && !r4.current.contains(_2.activeElement)) return; e3.preventDefault(), e3.stopPropagation(), c2({ type: 1 }); break; } }), I = o((e3) => { P2 || e3.key === o2.Space && e3.preventDefault(); }), M2 = o((e3) => { var u5, i3; r2(e3.currentTarget) || T3 || (P2 ? (c2({ type: 1 }), (u5 = l.button) == null || u5.focus()) : (e3.preventDefault(), e3.stopPropagation(), l.popoverState === 1 && (m2 == null || m2(l.buttonId)), c2({ type: 0 }), (i3 = l.button) == null || i3.focus())); }), k = o((e3) => { e3.preventDefault(), e3.stopPropagation(); }), { isFocusVisible: B, focusProps: U } = $f7dceffc5ad7768b$export$4e328f61c538687f({ autoFocus: S }), { isHovered: O3, hoverProps: N } = $6179b936705e76d3$export$ae780daf29e6d456({ isDisabled: T3 }), { pressed: w2, pressProps: Y } = w({ disabled: T3 }), F2 = l.popoverState === 0, Q = D(() => ({ open: F2, active: w2 || F2, disabled: T3, hover: O3, focus: B, autofocus: S }), [F2, O3, B, w2, T3, S]), K2 = e(o4, l.button), Z = P2 ? _({ ref: g, type: K2, onKeyDown: L2, onClick: M2, disabled: T3 || void 0, autoFocus: S }, U, N, Y) : _({ ref: v, id: l.buttonId, type: K2, "aria-expanded": l.popoverState === 0, "aria-controls": l.panel ? l.panelId : void 0, disabled: T3 || void 0, autoFocus: S, onKeyDown: L2, onKeyUp: I, onClick: M2, onMouseDown: k }, U, N, Y), $ = u4(), J = o(() => { let e3 = l.panel; if (!e3) return; function u5() { u2($.current, { [a2.Forwards]: () => P(e3, F.First), [a2.Backwards]: () => P(e3, F.Last) }) === T2.Error && P(b().filter((A2) => A2.dataset.headlessuiFocusGuard !== "true"), u2($.current, { [a2.Forwards]: F.Next, [a2.Backwards]: F.Previous }), { relativeTo: l.button }); } u5(); }), t = L(); return y2.createElement(y2.Fragment, null, t({ ourProps: Z, theirProps: p, slot: Q, defaultTag: Pt, name: "Popover.Button" }), F2 && !P2 && d4 && y2.createElement(f, { id: s5, ref: l.afterButtonSentinel, features: s2.Focusable, "data-headlessui-focus-guard": true, as: "button", type: "button", onFocus: J })); } var ct = "div"; var vt = O.RenderStrategy | O.Static; function Oe(o4, a3) { let f4 = r(), { id: C2 = `headlessui-popover-backdrop-${f4}`, transition: T3 = false, ...S } = o4, [{ popoverState: p }, l] = se("Popover.Backdrop"), [c2, d4] = le(null), r4 = y(a3, d4), s5 = u3(), [R4, m2] = x(T3, c2, s5 !== null ? (s5 & i.Open) === i.Open : p === 0), h2 = o((g) => { if (r2(g.currentTarget)) return g.preventDefault(); l({ type: 1 }); }), P2 = D(() => ({ open: p === 0 }), [p]), n4 = { ref: r4, id: C2, "aria-hidden": true, onClick: h2, ...R2(m2) }; return L()({ ourProps: n4, theirProps: S, slot: P2, defaultTag: ct, features: vt, visible: R4, name: "Popover.Backdrop" }); } var Tt = "div"; var mt = O.RenderStrategy | O.Static; function yt(o4, a3) { let f4 = r(), { id: C2 = `headlessui-popover-panel-${f4}`, focus: T3 = false, anchor: S, portal: p = false, modal: l = false, transition: c2 = false, ...d4 } = o4, [r4, s5] = se("Popover.Panel"), { close: R4, isPortalled: m2 } = be2("Popover.Panel"), h2 = `headlessui-focus-sentinel-before-${f4}`, P2 = `headlessui-focus-sentinel-after-${f4}`, n4 = ee(null), v = xe(S), [g, _2] = Re(v), L2 = be(); v && (p = true); let [I, M2] = le(null), k = y(n4, a3, v ? g : null, o((t) => s5({ type: 4, panel: t })), M2), B = n2(n4); n(() => (s5({ type: 5, panelId: C2 }), () => { s5({ type: 5, panelId: null }); }), [C2, s5]); let U = u3(), [O3, N] = x(c2, I, U !== null ? (U & i.Open) === i.Open : r4.popoverState === 0); m(O3, r4.button, () => { s5({ type: 1 }); }); let w2 = r4.__demoMode ? false : l && O3; f2(w2, B); let Y = o((t) => { var e3; switch (t.key) { case o2.Escape: if (r4.popoverState !== 0 || !n4.current || B != null && B.activeElement && !n4.current.contains(B.activeElement)) return; t.preventDefault(), t.stopPropagation(), s5({ type: 1 }), (e3 = r4.button) == null || e3.focus(); break; } }); ne(() => { var t; o4.static || r4.popoverState === 1 && ((t = o4.unmount) == null || t) && s5({ type: 4, panel: null }); }, [r4.popoverState, o4.unmount, o4.static, s5]), ne(() => { if (r4.__demoMode || !T3 || r4.popoverState !== 0 || !n4.current) return; let t = B == null ? void 0 : B.activeElement; n4.current.contains(t) || P(n4.current, F.First); }, [r4.__demoMode, T3, n4.current, r4.popoverState]); let F2 = D(() => ({ open: r4.popoverState === 0, close: R4 }), [r4.popoverState, R4]), Q = _(v ? L2() : {}, { ref: k, id: C2, onKeyDown: Y, onBlur: T3 && r4.popoverState === 0 ? (t) => { var u5, i3, A2, x2, E2; let e3 = t.relatedTarget; e3 && n4.current && ((u5 = n4.current) != null && u5.contains(e3) || (s5({ type: 1 }), ((A2 = (i3 = r4.beforePanelSentinel.current) == null ? void 0 : i3.contains) != null && A2.call(i3, e3) || (E2 = (x2 = r4.afterPanelSentinel.current) == null ? void 0 : x2.contains) != null && E2.call(x2, e3)) && e3.focus({ preventScroll: true }))); } : void 0, tabIndex: -1, style: { ...d4.style, ..._2, "--button-width": d(r4.button, true).width }, ...R2(N) }), K2 = u4(), Z = o(() => { let t = n4.current; if (!t) return; function e3() { u2(K2.current, { [a2.Forwards]: () => { var i3; P(t, F.First) === T2.Error && ((i3 = r4.afterPanelSentinel.current) == null || i3.focus()); }, [a2.Backwards]: () => { var u5; (u5 = r4.button) == null || u5.focus({ preventScroll: true }); } }); } e3(); }), $ = o(() => { let t = n4.current; if (!t) return; function e3() { u2(K2.current, { [a2.Forwards]: () => { if (!r4.button) return; let u5 = b(), i3 = u5.indexOf(r4.button), A2 = u5.slice(0, i3 + 1), E2 = [...u5.slice(i3 + 1), ...A2]; for (let de of E2.slice()) if (de.dataset.headlessuiFocusGuard === "true" || I != null && I.contains(de)) { let Se = E2.indexOf(de); Se !== -1 && E2.splice(Se, 1); } P(E2, F.First, { sorted: false }); }, [a2.Backwards]: () => { var i3; P(t, F.Previous) === T2.Error && ((i3 = r4.button) == null || i3.focus()); } }); } e3(); }), J = L(); return y2.createElement(s4, null, y2.createElement(ie.Provider, { value: C2 }, y2.createElement(ue.Provider, { value: { close: R4, isPortalled: m2 } }, y2.createElement(re, { enabled: p ? o4.static || O3 : false }, O3 && m2 && y2.createElement(f, { id: h2, ref: r4.beforePanelSentinel, features: s2.Focusable, "data-headlessui-focus-guard": true, as: "button", type: "button", onFocus: Z }), J({ ourProps: Q, theirProps: d4, slot: F2, defaultTag: Tt, features: mt, visible: O3, name: "Popover.Panel" }), O3 && m2 && y2.createElement(f, { id: P2, ref: r4.afterPanelSentinel, features: s2.Focusable, "data-headlessui-focus-guard": true, as: "button", type: "button", onFocus: $ }))))); } var Et = "div"; function bt(o4, a3) { let f4 = ee(null), C2 = y(f4, a3), [T3, S] = le([]), p = o((P2) => { S((n4) => { let v = n4.indexOf(P2); if (v !== -1) { let g = n4.slice(); return g.splice(v, 1), g; } return n4; }); }), l = o((P2) => (S((n4) => [...n4, P2]), () => p(P2))), c2 = o(() => { var v; let P2 = u(f4); if (!P2) return false; let n4 = P2.activeElement; return (v = f4.current) != null && v.contains(n4) ? true : T3.some((g) => { var _2, L2; return ((_2 = P2.getElementById(g.buttonId.current)) == null ? void 0 : _2.contains(n4)) || ((L2 = P2.getElementById(g.panelId.current)) == null ? void 0 : L2.contains(n4)); }); }), d4 = o((P2) => { for (let n4 of T3) n4.buttonId.current !== P2 && n4.close(); }), r4 = D(() => ({ registerPopover: l, unregisterPopover: p, isFocusWithinPopoverGroup: c2, closeOthers: d4 }), [l, p, c2, d4]), s5 = D(() => ({}), []), R4 = o4, m2 = { ref: C2 }, h2 = L(); return y2.createElement(O2, null, y2.createElement(ge.Provider, { value: r4 }, h2({ ourProps: m2, theirProps: R4, slot: s5, defaultTag: Et, name: "Popover.Group" }))); } var gt = K(dt); var St = K(ft); var At = K(Oe); var Ct = K(Oe); var Rt = K(yt); var Bt = K(bt); var lo = Object.assign(gt, { Button: St, Backdrop: Ct, Overlay: At, Panel: Rt, Group: Bt }); // src/ui/PopoverMenu.module.scss var PopoverMenu_module_default = { "root": "alinea-PopoverMenu", "trigger": "alinea-PopoverMenu-trigger", "items": "alinea-PopoverMenu-items", "is-left": "alinea-PopoverMenu-is-left", "isLeft": "alinea-PopoverMenu-is-left", "is-right": "alinea-PopoverMenu-is-right", "isRight": "alinea-PopoverMenu-is-right", "header": "alinea-PopoverMenu-header", "footer": "alinea-PopoverMenu-footer" }; // src/ui/PopoverMenu.tsx import { jsx } from "react/jsx-runtime"; var styles = dist_default(PopoverMenu_module_default); var PopoverMenu; ((PopoverMenu2) => { function Root(props) { return /* @__PURE__ */ jsx(lo, { children: /* @__PURE__ */ jsx("div", { ...props, className: styles.root.mergeProps(props)() }) }); } PopoverMenu2.Root = Root; function Trigger(props) { return /* @__PURE__ */ jsx(lo.Button, { ...props, className: styles.trigger() }); } PopoverMenu2.Trigger = Trigger; function Items({ left, right, ...props }) { return /* @__PURE__ */ jsx( lo.Panel, { ...props, className: styles.items.mergeProps(props)({ left, right }) } ); } PopoverMenu2.Items = Items; function Header({ children }) { return /* @__PURE__ */ jsx("div", { className: styles.header(), children: /* @__PURE__ */ jsx("header", { children }) }); } PopoverMenu2.Header = Header; function Footer({ children }) { return /* @__PURE__ */ jsx("div", { className: styles.footer(), children: /* @__PURE__ */ jsx("footer", { children }) }); } PopoverMenu2.Footer = Footer; })(PopoverMenu || (PopoverMenu = {})); export { PopoverMenu };