alinea
Version:
[](https://npmjs.org/package/alinea) [](https://packagephobia.com/result?p=alinea)
357 lines (351 loc) • 14 kB
JavaScript
import {
n
} from "../chunks/chunk-A5EY5PG6.js";
import {
autoUpdate,
flip,
offset,
useFloating
} from "../chunks/chunk-BGVZL6W4.js";
import {
a,
b,
u as u2,
x
} from "../chunks/chunk-Q2COWNH4.js";
import {
C,
c,
d,
h as h2
} from "../chunks/chunk-VKS6HYMO.js";
import {
D,
I as I2,
M,
T,
_,
e,
h
} from "../chunks/chunk-CRWVV7PH.js";
import {
p
} from "../chunks/chunk-QMGXID4H.js";
import {
r
} from "../chunks/chunk-KO7U3IBJ.js";
import {
D as D2,
I,
S,
X,
l,
o,
o2,
o3,
s3 as s,
u,
y
} from "../chunks/chunk-QEHUZJO2.js";
import "../chunks/chunk-U5RRZUYZ.js";
// node_modules/@headlessui/react/dist/hooks/use-tree-walker.js
import { useRef as E, useEffect as m } from "react";
function F({ container: e2, accept: t, walk: r2, enabled: c2 = true }) {
let o4 = E(t), l2 = E(r2);
m(() => {
o4.current = t, l2.current = r2;
}, [t, r2]), l(() => {
if (!e2 || !c2)
return;
let n2 = e(e2);
if (!n2)
return;
let f = o4.current, p2 = l2.current, d2 = Object.assign((i) => f(i), { acceptNode: f }), u3 = n2.createTreeWalker(e2, NodeFilter.SHOW_ELEMENT, d2, false);
for (; u3.nextNode(); )
p2(u3.currentNode);
}, [e2, c2, o4, l2]);
}
// node_modules/@headlessui/react/dist/components/menu/menu.js
import G, { Fragment as N, createContext as X2, createRef as H, useContext as $, useEffect as q, useMemo as x2, useReducer as z, useRef as K } from "react";
var me = ((r2) => (r2[r2.Open = 0] = "Open", r2[r2.Closed = 1] = "Closed", r2))(me || {});
var de = ((r2) => (r2[r2.Pointer = 0] = "Pointer", r2[r2.Other = 1] = "Other", r2))(de || {});
var fe = ((a2) => (a2[a2.OpenMenu = 0] = "OpenMenu", a2[a2.CloseMenu = 1] = "CloseMenu", a2[a2.GoToItem = 2] = "GoToItem", a2[a2.Search = 3] = "Search", a2[a2.ClearSearch = 4] = "ClearSearch", a2[a2.RegisterItem = 5] = "RegisterItem", a2[a2.UnregisterItem = 6] = "UnregisterItem", a2))(fe || {});
function w(e2, u3 = (r2) => r2) {
let r2 = e2.activeItemIndex !== null ? e2.items[e2.activeItemIndex] : null, i = I2(u3(e2.items.slice()), (t) => t.dataRef.current.domRef.current), s2 = r2 ? i.indexOf(r2) : null;
return s2 === -1 && (s2 = null), { items: i, activeItemIndex: s2 };
}
var Te = { [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, u3) => {
var s2;
let r2 = w(e2), i = x(u3, { resolveItems: () => r2.items, resolveActiveIndex: () => r2.activeItemIndex, resolveId: (t) => t.id, resolveDisabled: (t) => t.dataRef.current.disabled });
return { ...e2, ...r2, searchQuery: "", activeItemIndex: i, activationTrigger: (s2 = u3.trigger) != null ? s2 : 1 };
}, [3]: (e2, u3) => {
let i = e2.searchQuery !== "" ? 0 : 1, s2 = e2.searchQuery + u3.value.toLowerCase(), o4 = (e2.activeItemIndex !== null ? e2.items.slice(e2.activeItemIndex + i).concat(e2.items.slice(0, e2.activeItemIndex + i)) : e2.items).find((l2) => {
var m2;
return ((m2 = l2.dataRef.current.textValue) == null ? void 0 : m2.startsWith(s2)) && !l2.dataRef.current.disabled;
}), a2 = o4 ? e2.items.indexOf(o4) : -1;
return a2 === -1 || a2 === e2.activeItemIndex ? { ...e2, searchQuery: s2 } : { ...e2, searchQuery: s2, activeItemIndex: a2, activationTrigger: 1 };
}, [4](e2) {
return e2.searchQuery === "" ? e2 : { ...e2, searchQuery: "", searchActiveItemIndex: null };
}, [5]: (e2, u3) => {
let r2 = w(e2, (i) => [...i, { id: u3.id, dataRef: u3.dataRef }]);
return { ...e2, ...r2 };
}, [6]: (e2, u3) => {
let r2 = w(e2, (i) => {
let s2 = i.findIndex((t) => t.id === u3.id);
return s2 !== -1 && i.splice(s2, 1), i;
});
return { ...e2, ...r2, activationTrigger: 1 };
} };
var U = X2(null);
U.displayName = "MenuContext";
function O(e2) {
let u3 = $(U);
if (u3 === null) {
let r2 = new Error(`<${e2} /> is missing a parent <Menu /> component.`);
throw Error.captureStackTrace && Error.captureStackTrace(r2, O), r2;
}
return u3;
}
function ye(e2, u3) {
return u(u3.type, Te, e2, u3);
}
var Ie = N;
function Me(e2, u3) {
let { __demoMode: r2 = false, ...i } = e2, s2 = z(ye, { __demoMode: r2, menuState: r2 ? 0 : 1, buttonRef: H(), itemsRef: H(), items: [], searchQuery: "", activeItemIndex: null, activationTrigger: 1 }), [{ menuState: t, itemsRef: o4, buttonRef: a2 }, l2] = s2, m2 = y(u3);
h2([a2, o4], (g, R) => {
var p2;
l2({ type: 1 }), h(R, T.Loose) || (g.preventDefault(), (p2 = a2.current) == null || p2.focus());
}, t === 0);
let I3 = o2(() => {
l2({ type: 1 });
}), A = x2(() => ({ open: t === 0, close: I3 }), [t, I3]), f = { ref: m2 };
return G.createElement(U.Provider, { value: s2 }, G.createElement(c, { value: u(t, { [0]: d.Open, [1]: d.Closed }) }, X({ ourProps: f, theirProps: i, slot: A, defaultTag: Ie, name: "Menu" })));
}
var ge = "button";
function Re(e2, u3) {
var R;
let r2 = I(), { id: i = `headlessui-menu-button-${r2}`, ...s2 } = e2, [t, o4] = O("Menu.Button"), a2 = y(t.buttonRef, u3), l2 = p(), m2 = o2((p2) => {
switch (p2.key) {
case o3.Space:
case o3.Enter:
case o3.ArrowDown:
p2.preventDefault(), p2.stopPropagation(), o4({ type: 0 }), l2.nextFrame(() => o4({ type: 2, focus: a.First }));
break;
case o3.ArrowUp:
p2.preventDefault(), p2.stopPropagation(), o4({ type: 0 }), l2.nextFrame(() => o4({ type: 2, focus: a.Last }));
break;
}
}), I3 = o2((p2) => {
switch (p2.key) {
case o3.Space:
p2.preventDefault();
break;
}
}), A = o2((p2) => {
if (r(p2.currentTarget))
return p2.preventDefault();
e2.disabled || (t.menuState === 0 ? (o4({ type: 1 }), l2.nextFrame(() => {
var M2;
return (M2 = t.buttonRef.current) == null ? void 0 : M2.focus({ preventScroll: true });
})) : (p2.preventDefault(), o4({ type: 0 })));
}), f = x2(() => ({ open: t.menuState === 0 }), [t]), g = { ref: a2, id: i, type: s(e2, t.buttonRef), "aria-haspopup": "menu", "aria-controls": (R = t.itemsRef.current) == null ? void 0 : R.id, "aria-expanded": t.menuState === 0, onKeyDown: m2, onKeyUp: I3, onClick: A };
return X({ ourProps: g, theirProps: s2, slot: f, defaultTag: ge, name: "Menu.Button" });
}
var Ae = "div";
var be = S.RenderStrategy | S.Static;
function Ee(e2, u3) {
var M2, b2;
let r2 = I(), { id: i = `headlessui-menu-items-${r2}`, ...s2 } = e2, [t, o4] = O("Menu.Items"), a2 = y(t.itemsRef, u3), l2 = n(t.itemsRef), m2 = p(), I3 = C(), A = (() => I3 !== null ? (I3 & d.Open) === d.Open : t.menuState === 0)();
q(() => {
let n2 = t.itemsRef.current;
n2 && t.menuState === 0 && n2 !== (l2 == null ? void 0 : l2.activeElement) && n2.focus({ preventScroll: true });
}, [t.menuState, t.itemsRef, l2]), F({ container: t.itemsRef.current, enabled: t.menuState === 0, accept(n2) {
return n2.getAttribute("role") === "menuitem" ? NodeFilter.FILTER_REJECT : n2.hasAttribute("role") ? NodeFilter.FILTER_SKIP : NodeFilter.FILTER_ACCEPT;
}, walk(n2) {
n2.setAttribute("role", "none");
} });
let f = o2((n2) => {
var E2, P;
switch (m2.dispose(), n2.key) {
case o3.Space:
if (t.searchQuery !== "")
return n2.preventDefault(), n2.stopPropagation(), o4({ type: 3, value: n2.key });
case o3.Enter:
if (n2.preventDefault(), n2.stopPropagation(), o4({ type: 1 }), t.activeItemIndex !== null) {
let { dataRef: S2 } = t.items[t.activeItemIndex];
(P = (E2 = S2.current) == null ? void 0 : E2.domRef.current) == null || P.click();
}
D(t.buttonRef.current);
break;
case o3.ArrowDown:
return n2.preventDefault(), n2.stopPropagation(), o4({ type: 2, focus: a.Next });
case o3.ArrowUp:
return n2.preventDefault(), n2.stopPropagation(), o4({ type: 2, focus: a.Previous });
case o3.Home:
case o3.PageUp:
return n2.preventDefault(), n2.stopPropagation(), o4({ type: 2, focus: a.First });
case o3.End:
case o3.PageDown:
return n2.preventDefault(), n2.stopPropagation(), o4({ type: 2, focus: a.Last });
case o3.Escape:
n2.preventDefault(), n2.stopPropagation(), o4({ type: 1 }), o().nextFrame(() => {
var S2;
return (S2 = t.buttonRef.current) == null ? void 0 : S2.focus({ preventScroll: true });
});
break;
case o3.Tab:
n2.preventDefault(), n2.stopPropagation(), o4({ type: 1 }), o().nextFrame(() => {
_(t.buttonRef.current, n2.shiftKey ? M.Previous : M.Next);
});
break;
default:
n2.key.length === 1 && (o4({ type: 3, value: n2.key }), m2.setTimeout(() => o4({ type: 4 }), 350));
break;
}
}), g = o2((n2) => {
switch (n2.key) {
case o3.Space:
n2.preventDefault();
break;
}
}), R = x2(() => ({ open: t.menuState === 0 }), [t]), p2 = { "aria-activedescendant": t.activeItemIndex === null || (M2 = t.items[t.activeItemIndex]) == null ? void 0 : M2.id, "aria-labelledby": (b2 = t.buttonRef.current) == null ? void 0 : b2.id, id: i, onKeyDown: f, onKeyUp: g, role: "menu", tabIndex: 0, ref: a2 };
return X({ ourProps: p2, theirProps: s2, slot: R, defaultTag: Ae, features: be, visible: A, name: "Menu.Items" });
}
var Se = N;
function Pe(e2, u3) {
let r2 = I(), { id: i = `headlessui-menu-item-${r2}`, disabled: s2 = false, ...t } = e2, [o4, a2] = O("Menu.Item"), l2 = o4.activeItemIndex !== null ? o4.items[o4.activeItemIndex].id === i : false, m2 = K(null), I3 = y(u3, m2);
l(() => {
if (o4.__demoMode || o4.menuState !== 0 || !l2 || o4.activationTrigger === 0)
return;
let T2 = o();
return T2.requestAnimationFrame(() => {
var v, B;
(B = (v = m2.current) == null ? void 0 : v.scrollIntoView) == null || B.call(v, { block: "nearest" });
}), T2.dispose;
}, [o4.__demoMode, m2, l2, o4.menuState, o4.activationTrigger, o4.activeItemIndex]);
let A = b(m2), f = K({ disabled: s2, domRef: m2, get textValue() {
return A();
} });
l(() => {
f.current.disabled = s2;
}, [f, s2]), l(() => (a2({ type: 5, id: i, dataRef: f }), () => a2({ type: 6, id: i })), [f, i]);
let g = o2(() => {
a2({ type: 1 });
}), R = o2((T2) => {
if (s2)
return T2.preventDefault();
a2({ type: 1 }), D(o4.buttonRef.current);
}), p2 = o2(() => {
if (s2)
return a2({ type: 2, focus: a.Nothing });
a2({ type: 2, focus: a.Specific, id: i });
}), M2 = u2(), b2 = o2((T2) => M2.update(T2)), n2 = o2((T2) => {
M2.wasMoved(T2) && (s2 || l2 || a2({ type: 2, focus: a.Specific, id: i, trigger: 0 }));
}), E2 = o2((T2) => {
M2.wasMoved(T2) && (s2 || l2 && a2({ type: 2, focus: a.Nothing }));
}), P = x2(() => ({ active: l2, disabled: s2, close: g }), [l2, s2, g]);
return X({ ourProps: { id: i, ref: I3, role: "menuitem", tabIndex: s2 === true ? void 0 : -1, "aria-disabled": s2 === true ? true : void 0, disabled: void 0, onClick: R, onFocus: p2, onPointerEnter: b2, onMouseEnter: b2, onPointerMove: n2, onMouseMove: n2, onPointerLeave: E2, onMouseLeave: E2 }, theirProps: t, slot: P, defaultTag: Se, name: "Menu.Item" });
}
var ve = D2(Me);
var xe = D2(Re);
var he = D2(Ee);
var De = D2(Pe);
var it = Object.assign(ve, { Button: xe, Items: he, Item: De });
// 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 { fromModule } from "./util/Styler.js";
import { jsx } from "react/jsx-runtime";
var styles = fromModule(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(it, { children: /* @__PURE__ */ jsx("div", { ...props, className: styles.root.mergeProps(props)() }) }) });
}
DropdownMenu2.Root = Root;
function Trigger(props) {
const floating = useContext(floatingContext);
return /* @__PURE__ */ jsx(
it.Button,
{
ref: floating.reference,
...props,
className: styles.trigger.mergeProps(props)()
}
);
}
DropdownMenu2.Trigger = Trigger;
function Items(props) {
const floating = useContext(floatingContext);
return /* @__PURE__ */ jsx(
it.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(it.Item, { children: ({ active }) => {
return /* @__PURE__ */ jsx(
"button",
{
...props,
className: styles.item.mergeProps(props)({ active })
}
);
} });
}
DropdownMenu2.Item = Item;
})(DropdownMenu || (DropdownMenu = {}));
export {
DropdownMenu
};