@namroodinc/liquid-editorial 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +4 -0
- package/README.md +42 -0
- package/UPGRADING.md +93 -11
- package/dist/chunks/Board-BLhB5_xx.cjs +2 -0
- package/dist/chunks/Board-BLhB5_xx.cjs.map +1 -0
- package/dist/chunks/Board-BTFSzn6c.js +239 -0
- package/dist/chunks/Board-BTFSzn6c.js.map +1 -0
- package/dist/chunks/EntryEditor-CcyYtH74.js +191 -0
- package/dist/chunks/EntryEditor-CcyYtH74.js.map +1 -0
- package/dist/chunks/EntryEditor-DIpc1iPF.cjs +2 -0
- package/dist/chunks/EntryEditor-DIpc1iPF.cjs.map +1 -0
- package/dist/chunks/{RichTextEditor-DC_0oN1s.cjs → RichTextEditor-BxtlbjXj.cjs} +2 -2
- package/dist/chunks/RichTextEditor-BxtlbjXj.cjs.map +1 -0
- package/dist/chunks/{RichTextEditor-CSpjsL1z.js → RichTextEditor-Dnx4i7bQ.js} +104 -93
- package/dist/chunks/RichTextEditor-Dnx4i7bQ.js.map +1 -0
- package/dist/chunks/mergeRefs-Bc3qS0Tt.cjs +2 -0
- package/dist/chunks/mergeRefs-Bc3qS0Tt.cjs.map +1 -0
- package/dist/chunks/mergeRefs-DGM402mE.js +10 -0
- package/dist/chunks/mergeRefs-DGM402mE.js.map +1 -0
- package/dist/components/AppShell/index.cjs +2 -0
- package/dist/components/AppShell/index.cjs.map +1 -0
- package/dist/components/AppShell/index.d.cts +15 -0
- package/dist/components/AppShell/index.d.cts.map +1 -0
- package/dist/components/AppShell/index.d.ts +15 -0
- package/dist/components/AppShell/index.d.ts.map +1 -0
- package/dist/components/AppShell/index.js +93 -0
- package/dist/components/AppShell/index.js.map +1 -0
- package/dist/components/AppShell/style.css +79 -0
- package/dist/components/AssetGrid/index.cjs +1 -1
- package/dist/components/AssetGrid/index.cjs.map +1 -1
- package/dist/components/AssetGrid/index.d.cts.map +1 -1
- package/dist/components/AssetGrid/index.d.ts.map +1 -1
- package/dist/components/AssetGrid/index.js +57 -59
- package/dist/components/AssetGrid/index.js.map +1 -1
- package/dist/components/AssetGrid/style.css +8 -16
- package/dist/components/Board/index.cjs +1 -2
- package/dist/components/Board/index.d.cts.map +1 -1
- package/dist/components/Board/index.d.ts.map +1 -1
- package/dist/components/Board/index.js +1 -227
- package/dist/components/Board/keyboard.d.cts +7 -0
- package/dist/components/Board/keyboard.d.cts.map +1 -0
- package/dist/components/Board/keyboard.d.ts +7 -0
- package/dist/components/Board/keyboard.d.ts.map +1 -0
- package/dist/components/Board/keyboard.test.d.cts +2 -0
- package/dist/components/Board/keyboard.test.d.cts.map +1 -0
- package/dist/components/Board/keyboard.test.d.ts +2 -0
- package/dist/components/Board/keyboard.test.d.ts.map +1 -0
- package/dist/components/Board/moves.d.cts +5 -0
- package/dist/components/Board/moves.d.cts.map +1 -0
- package/dist/components/Board/moves.d.ts +5 -0
- package/dist/components/Board/moves.d.ts.map +1 -0
- package/dist/components/Board/moves.test.d.cts +2 -0
- package/dist/components/Board/moves.test.d.cts.map +1 -0
- package/dist/components/Board/moves.test.d.ts +2 -0
- package/dist/components/Board/moves.test.d.ts.map +1 -0
- package/dist/components/Board/style.css +17 -28
- package/dist/components/Button/index.cjs +1 -1
- package/dist/components/Button/index.cjs.map +1 -1
- package/dist/components/Button/index.d.cts +3 -2
- package/dist/components/Button/index.d.cts.map +1 -1
- package/dist/components/Button/index.d.ts +3 -2
- package/dist/components/Button/index.d.ts.map +1 -1
- package/dist/components/Button/index.js +1 -1
- package/dist/components/Button/index.js.map +1 -1
- package/dist/components/Button/style.css +21 -15
- package/dist/components/DatePicker/index.cjs +1 -1
- package/dist/components/DatePicker/index.cjs.map +1 -1
- package/dist/components/DatePicker/index.d.cts.map +1 -1
- package/dist/components/DatePicker/index.d.ts.map +1 -1
- package/dist/components/DatePicker/index.js +76 -72
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/DatePicker/style.css +4 -61
- package/dist/components/Drawer/index.cjs +1 -1
- package/dist/components/Drawer/index.cjs.map +1 -1
- package/dist/components/Drawer/index.d.cts +10 -1
- package/dist/components/Drawer/index.d.cts.map +1 -1
- package/dist/components/Drawer/index.d.ts +10 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +78 -49
- package/dist/components/Drawer/index.js.map +1 -1
- package/dist/components/Drawer/style.css +106 -0
- package/dist/components/EntryEditor/index.cjs +1 -1
- package/dist/components/EntryEditor/index.d.cts.map +1 -1
- package/dist/components/EntryEditor/index.d.ts.map +1 -1
- package/dist/components/EntryEditor/index.js +1 -1
- package/dist/components/EntryEditor/model.d.cts.map +1 -1
- package/dist/components/EntryEditor/model.d.ts.map +1 -1
- package/dist/components/EntryPicker/index.cjs +1 -1
- package/dist/components/EntryPicker/index.cjs.map +1 -1
- package/dist/components/EntryPicker/index.d.cts.map +1 -1
- package/dist/components/EntryPicker/index.d.ts.map +1 -1
- package/dist/components/EntryPicker/index.js +12 -11
- package/dist/components/EntryPicker/index.js.map +1 -1
- package/dist/components/EntryPicker/style.css +3 -30
- package/dist/components/Field/style.css +11 -3
- package/dist/components/Menu/index.cjs +1 -1
- package/dist/components/Menu/index.cjs.map +1 -1
- package/dist/components/Menu/index.d.cts.map +1 -1
- package/dist/components/Menu/index.d.ts.map +1 -1
- package/dist/components/Menu/index.js +11 -16
- package/dist/components/Menu/index.js.map +1 -1
- package/dist/components/Menu/style.css +7 -41
- package/dist/components/Modal/index.cjs +1 -1
- package/dist/components/Modal/index.cjs.map +1 -1
- package/dist/components/Modal/index.d.cts.map +1 -1
- package/dist/components/Modal/index.d.ts.map +1 -1
- package/dist/components/Modal/index.js +12 -12
- package/dist/components/Modal/index.js.map +1 -1
- package/dist/components/NumberField/index.cjs +1 -1
- package/dist/components/NumberField/index.cjs.map +1 -1
- package/dist/components/NumberField/index.js +13 -17
- package/dist/components/NumberField/index.js.map +1 -1
- package/dist/components/NumberField/style.css +1 -41
- package/dist/components/Pagination/index.cjs +1 -1
- package/dist/components/Pagination/index.cjs.map +1 -1
- package/dist/components/Pagination/index.js +1 -1
- package/dist/components/Pagination/index.js.map +1 -1
- package/dist/components/Pagination/style.css +0 -1
- package/dist/components/Popover/index.cjs +1 -1
- package/dist/components/Popover/index.cjs.map +1 -1
- package/dist/components/Popover/index.js +4 -4
- package/dist/components/RichTextEditor/index.cjs +1 -1
- package/dist/components/RichTextEditor/index.d.cts.map +1 -1
- package/dist/components/RichTextEditor/index.d.ts.map +1 -1
- package/dist/components/RichTextEditor/index.js +1 -1
- package/dist/components/SearchField/index.cjs +1 -1
- package/dist/components/SearchField/index.cjs.map +1 -1
- package/dist/components/SearchField/index.d.cts.map +1 -1
- package/dist/components/SearchField/index.d.ts.map +1 -1
- package/dist/components/SearchField/index.js +26 -27
- package/dist/components/SearchField/index.js.map +1 -1
- package/dist/components/SearchField/style.css +0 -21
- package/dist/components/Select/index.cjs +1 -1
- package/dist/components/Select/index.cjs.map +1 -1
- package/dist/components/Select/index.d.cts.map +1 -1
- package/dist/components/Select/index.d.ts.map +1 -1
- package/dist/components/Select/index.js +101 -80
- package/dist/components/Select/index.js.map +1 -1
- package/dist/components/Select/style.css +5 -38
- package/dist/components/SideNav/index.cjs +1 -1
- package/dist/components/SideNav/index.cjs.map +1 -1
- package/dist/components/SideNav/index.d.cts.map +1 -1
- package/dist/components/SideNav/index.d.ts.map +1 -1
- package/dist/components/SideNav/index.js +52 -49
- package/dist/components/SideNav/index.js.map +1 -1
- package/dist/components/SideNav/style.css +2 -27
- package/dist/components/SortableList/index.cjs +1 -1
- package/dist/components/SortableList/index.cjs.map +1 -1
- package/dist/components/SortableList/index.d.cts.map +1 -1
- package/dist/components/SortableList/index.d.ts.map +1 -1
- package/dist/components/SortableList/index.js +55 -53
- package/dist/components/SortableList/index.js.map +1 -1
- package/dist/components/SortableList/style.css +9 -15
- package/dist/components/Stepper/index.cjs +1 -1
- package/dist/components/Stepper/index.cjs.map +1 -1
- package/dist/components/Stepper/index.d.cts.map +1 -1
- package/dist/components/Stepper/index.d.ts.map +1 -1
- package/dist/components/Stepper/index.js +48 -39
- package/dist/components/Stepper/index.js.map +1 -1
- package/dist/components/Stepper/style.css +24 -18
- package/dist/components/SubNav/index.cjs +1 -1
- package/dist/components/SubNav/index.cjs.map +1 -1
- package/dist/components/SubNav/index.d.cts.map +1 -1
- package/dist/components/SubNav/index.d.ts.map +1 -1
- package/dist/components/SubNav/index.js +27 -28
- package/dist/components/SubNav/index.js.map +1 -1
- package/dist/components/SubNav/style.css +13 -0
- package/dist/components/Switch/index.cjs +1 -1
- package/dist/components/Switch/index.cjs.map +1 -1
- package/dist/components/Switch/index.d.cts.map +1 -1
- package/dist/components/Switch/index.d.ts.map +1 -1
- package/dist/components/Switch/index.js +23 -21
- package/dist/components/Switch/index.js.map +1 -1
- package/dist/components/Switch/style.css +2 -28
- package/dist/components/TagsInput/index.cjs +1 -1
- package/dist/components/TagsInput/index.cjs.map +1 -1
- package/dist/components/TagsInput/index.js +8 -10
- package/dist/components/TagsInput/index.js.map +1 -1
- package/dist/components/TagsInput/style.css +2 -24
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +2 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +39 -38
- package/dist/internal/mergeRefs.d.cts +4 -0
- package/dist/internal/mergeRefs.d.cts.map +1 -0
- package/dist/internal/mergeRefs.d.ts +4 -0
- package/dist/internal/mergeRefs.d.ts.map +1 -0
- package/dist/styles.css +1 -0
- package/dist/test/dragEvent.d.cts +3 -0
- package/dist/test/dragEvent.d.cts.map +1 -0
- package/dist/test/dragEvent.d.ts +3 -0
- package/dist/test/dragEvent.d.ts.map +1 -0
- package/package.json +2 -2
- package/dist/chunks/EntryEditor-C32lKKnV.cjs +0 -2
- package/dist/chunks/EntryEditor-C32lKKnV.cjs.map +0 -1
- package/dist/chunks/EntryEditor-xVuiqtFo.js +0 -181
- package/dist/chunks/EntryEditor-xVuiqtFo.js.map +0 -1
- package/dist/chunks/RichTextEditor-CSpjsL1z.js.map +0 -1
- package/dist/chunks/RichTextEditor-DC_0oN1s.cjs.map +0 -1
- package/dist/components/Board/index.cjs.map +0 -1
- package/dist/components/Board/index.js.map +0 -1
|
@@ -1,85 +1,114 @@
|
|
|
1
1
|
import { Button as e } from "../Button/index.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
2
|
+
import { t } from "../../chunks/mergeRefs-DGM402mE.js";
|
|
3
|
+
import { forwardRef as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
|
|
4
4
|
import { createPortal as s } from "react-dom";
|
|
5
|
+
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
5
6
|
//#region src/components/Drawer/index.tsx
|
|
6
|
-
|
|
7
|
-
let
|
|
8
|
-
return
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
function u(e, t, n) {
|
|
8
|
+
let [i, a] = o(e), [s, c] = o(!1);
|
|
9
|
+
return i !== e && (a(e), c(!e && t)), r(() => {
|
|
10
|
+
if (!s || e) return;
|
|
11
|
+
let t = getComputedStyle(n.current).transitionDuration.split(","), r = Math.max(0, ...t.map((e) => parseFloat(e) * (e.trim().endsWith("ms") ? 1 : 1e3) || 0)), i = window.setTimeout(() => c(!1), r);
|
|
12
|
+
return () => window.clearTimeout(i);
|
|
13
|
+
}, [
|
|
14
|
+
s,
|
|
15
|
+
e,
|
|
16
|
+
n
|
|
17
|
+
]), [s, c];
|
|
18
|
+
}
|
|
19
|
+
var d = n(function({ isOpen: n, onClose: o, title: d, description: f, side: p = "end", size: m = "md", variant: h = "default", closeLabel: g = "Close", portalContainer: _, footer: v, className: y, children: b, ...x }, S) {
|
|
20
|
+
let C = a(null), w = a(null), T = a(null), E = a(o), D = i(), O = i(), [k, A] = u(n, h === "navigation", w);
|
|
21
|
+
return r(() => {
|
|
22
|
+
E.current = o;
|
|
23
|
+
}, [o]), r(() => {
|
|
24
|
+
if (!n) return;
|
|
25
|
+
let e = document.activeElement, t = h === "navigation" ? { preventScroll: !0 } : void 0, r = ":is(button, [href], input, select, textarea, [tabindex]):not(:disabled):not([tabindex='-1'])";
|
|
26
|
+
((h === "navigation" ? T.current : C.current?.querySelector(r)) ?? C.current)?.focus(t);
|
|
27
|
+
let i = (e) => {
|
|
15
28
|
if (e.key === "Escape") {
|
|
16
|
-
|
|
29
|
+
if (e.defaultPrevented) return;
|
|
30
|
+
e.preventDefault(), E.current();
|
|
17
31
|
return;
|
|
18
32
|
}
|
|
19
33
|
if (e.key !== "Tab") return;
|
|
20
|
-
let t = Array.from(
|
|
34
|
+
let t = Array.from(C.current?.querySelectorAll(r) ?? []);
|
|
21
35
|
if (t.length === 0) return;
|
|
22
|
-
let n = t[0],
|
|
23
|
-
e.shiftKey && document.activeElement === n ? (e.preventDefault(),
|
|
36
|
+
let n = t[0], i = t[t.length - 1];
|
|
37
|
+
e.shiftKey && (document.activeElement === n || !C.current?.contains(document.activeElement)) ? (e.preventDefault(), i.focus()) : !e.shiftKey && (document.activeElement === i || !C.current?.contains(document.activeElement)) && (e.preventDefault(), n.focus());
|
|
24
38
|
};
|
|
25
|
-
|
|
26
|
-
let
|
|
39
|
+
window.addEventListener("keydown", i);
|
|
40
|
+
let a = document.body.style.overflow;
|
|
27
41
|
return document.body.style.overflow = "hidden", () => {
|
|
28
|
-
|
|
42
|
+
window.removeEventListener("keydown", i), document.body.style.overflow = a, e?.focus(t);
|
|
29
43
|
};
|
|
30
|
-
}, [
|
|
44
|
+
}, [
|
|
45
|
+
n,
|
|
46
|
+
h,
|
|
47
|
+
_
|
|
48
|
+
]), !n && !k || typeof document > "u" ? null : s(/* @__PURE__ */ c("div", {
|
|
49
|
+
ref: (e) => {
|
|
50
|
+
w.current = e, e && (e.inert = !n);
|
|
51
|
+
},
|
|
31
52
|
className: "ds-drawer-scrim",
|
|
32
|
-
"data-side":
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
53
|
+
"data-side": p,
|
|
54
|
+
"data-variant": h,
|
|
55
|
+
"data-contained": _ ? "" : void 0,
|
|
56
|
+
"data-state": n ? "open" : "closed",
|
|
57
|
+
"aria-hidden": !n || void 0,
|
|
58
|
+
onTransitionEnd: (e) => {
|
|
59
|
+
e.target === e.currentTarget && e.propertyName === "opacity" && !n && A(!1);
|
|
60
|
+
},
|
|
61
|
+
onMouseDown: (e) => n && e.target === e.currentTarget && E.current(),
|
|
62
|
+
children: /* @__PURE__ */ l("div", {
|
|
63
|
+
...x,
|
|
64
|
+
ref: t(C, S),
|
|
39
65
|
role: "dialog",
|
|
40
66
|
"aria-modal": "true",
|
|
41
|
-
"aria-labelledby":
|
|
42
|
-
"aria-describedby":
|
|
67
|
+
"aria-labelledby": x["aria-label"] ? void 0 : x["aria-labelledby"] ?? D,
|
|
68
|
+
"aria-describedby": f ? O : void 0,
|
|
43
69
|
tabIndex: -1,
|
|
44
|
-
"data-side":
|
|
45
|
-
"data-size":
|
|
46
|
-
|
|
70
|
+
"data-side": p,
|
|
71
|
+
"data-size": m,
|
|
72
|
+
"data-variant": h,
|
|
73
|
+
className: ["ds-drawer", y].filter(Boolean).join(" "),
|
|
47
74
|
children: [
|
|
48
|
-
/* @__PURE__ */
|
|
75
|
+
/* @__PURE__ */ l("header", {
|
|
49
76
|
className: "ds-drawer__head",
|
|
50
|
-
children: [/* @__PURE__ */
|
|
77
|
+
children: [/* @__PURE__ */ l("div", {
|
|
51
78
|
className: "ds-drawer__titles",
|
|
52
|
-
children: [/* @__PURE__ */
|
|
53
|
-
id:
|
|
79
|
+
children: [/* @__PURE__ */ c("h2", {
|
|
80
|
+
id: D,
|
|
54
81
|
className: "ds-drawer__title",
|
|
55
|
-
children:
|
|
56
|
-
}),
|
|
57
|
-
id:
|
|
82
|
+
children: d
|
|
83
|
+
}), f && /* @__PURE__ */ c("p", {
|
|
84
|
+
id: O,
|
|
58
85
|
className: "ds-drawer__description",
|
|
59
|
-
children:
|
|
86
|
+
children: f
|
|
60
87
|
})]
|
|
61
|
-
}), /* @__PURE__ */
|
|
88
|
+
}), /* @__PURE__ */ c(e, {
|
|
89
|
+
ref: T,
|
|
62
90
|
variant: "simple",
|
|
63
|
-
size: "sm",
|
|
91
|
+
size: h === "navigation" ? "lg" : "sm",
|
|
64
92
|
isIconOnly: !0,
|
|
65
93
|
iconStart: "x",
|
|
66
|
-
"
|
|
67
|
-
|
|
94
|
+
className: h === "navigation" ? "ds-drawer__close" : void 0,
|
|
95
|
+
"aria-label": g,
|
|
96
|
+
onClick: () => E.current()
|
|
68
97
|
})]
|
|
69
98
|
}),
|
|
70
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ c("div", {
|
|
71
100
|
className: "ds-drawer__body",
|
|
72
|
-
children:
|
|
101
|
+
children: b
|
|
73
102
|
}),
|
|
74
|
-
|
|
103
|
+
v && /* @__PURE__ */ c("footer", {
|
|
75
104
|
className: "ds-drawer__footer",
|
|
76
|
-
children:
|
|
105
|
+
children: v
|
|
77
106
|
})
|
|
78
107
|
]
|
|
79
108
|
})
|
|
80
|
-
}), document.body);
|
|
109
|
+
}), _ ?? document.body);
|
|
81
110
|
});
|
|
82
111
|
//#endregion
|
|
83
|
-
export {
|
|
112
|
+
export { d as Drawer };
|
|
84
113
|
|
|
85
114
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Drawer","forwardRef","rest","panelRef","useRef","onCloseRef","onClose","titleId","useId","descriptionId","useEffect","isOpen","previous","onKeyDown","event","focusable","first","last","overflow","createPortal","side","node","ref","description","size","className","title","Button","footer"],"sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"../Button\";\nimport \"./style.css\";\n\nexport type DrawerSide = \"end\" | \"start\" | \"bottom\";\nexport type DrawerSize = \"md\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n isOpen: boolean;\n /** Escape, the scrim and the close button all call this. */\n onClose: () => void;\n title: string;\n description?: string;\n /** Which edge the panel is anchored to. */\n side?: DrawerSide;\n size?: DrawerSize;\n /** Actions, right-aligned. The confirming action goes last. */\n footer?: ReactNode;\n children?: ReactNode;\n}\n\n/**\n * A side panel for work that belongs beside the page rather than on top of it\n * — editing one record, a filter set, a revision history. Same frame, rules\n * and footer band as `Modal`; focus is trapped while open.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n {\n isOpen,\n onClose,\n title,\n description,\n side = \"end\",\n size = \"md\",\n footer,\n className,\n children,\n ...rest\n },\n ref,\n) {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const onCloseRef = useRef(onClose);\n const titleId = useId();\n const descriptionId = useId();\n\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n const previous = document.activeElement as HTMLElement | null;\n const initialFocus = panelRef.current?.querySelector<HTMLElement>(\n \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n );\n (initialFocus ?? panelRef.current)?.focus();\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n onCloseRef.current();\n return;\n }\n if (event.key !== \"Tab\") return;\n const focusable = Array.from(\n panelRef.current?.querySelectorAll<HTMLElement>(\n \"button:not(:disabled), [href], input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex='-1'])\",\n ) ?? [],\n );\n if (focusable.length === 0) return;\n const first = focusable[0]!;\n const last = focusable[focusable.length - 1]!;\n if (event.shiftKey && document.activeElement === first) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && document.activeElement === last) {\n event.preventDefault();\n first.focus();\n }\n };\n\n document.addEventListener(\"keydown\", onKeyDown);\n const overflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n\n return () => {\n document.removeEventListener(\"keydown\", onKeyDown);\n document.body.style.overflow = overflow;\n previous?.focus();\n };\n }, [isOpen]);\n\n if (!isOpen || typeof document === \"undefined\") return null;\n\n return createPortal(\n <div\n className=\"ds-drawer-scrim\"\n data-side={side}\n onMouseDown={(event) => event.target === event.currentTarget && onCloseRef.current()}\n >\n <div\n {...rest}\n ref={(node) => {\n panelRef.current = node;\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={titleId}\n aria-describedby={description ? descriptionId : undefined}\n tabIndex={-1}\n data-side={side}\n data-size={size}\n className={[\"ds-drawer\", className].filter(Boolean).join(\" \")}\n >\n <header className=\"ds-drawer__head\">\n <div className=\"ds-drawer__titles\">\n <h2 id={titleId} className=\"ds-drawer__title\">\n {title}\n </h2>\n {description && (\n <p id={descriptionId} className=\"ds-drawer__description\">\n {description}\n </p>\n )}\n </div>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label=\"Close\"\n onClick={() => onCloseRef.current()}\n />\n </header>\n <div className=\"ds-drawer__body\">{children}</div>\n {footer && <footer className=\"ds-drawer__footer\">{footer}</footer>}\n </div>\n </div>,\n document.body,\n );\n});\n"],"mappings":";;;;;AA2BA,IAAaA,IAASC,EAAwC,SAC5D,EACE,WACA,YACA,UACA,gBACA,UAAO,OACP,UAAO,MACP,WACA,cACA,aACA,GAAGC,KAEL,GACA;CACA,IAAMC,IAAWC,EAA8B,IAAI,GAC7CC,IAAaD,EAAOE,CAAO,GAC3BC,IAAUC,EAAM,GAChBC,IAAgBD,EAAM;CAmD5B,OAjDAE,QAAgB;EACd,EAAW,UAAUJ;CACvB,GAAG,CAACA,CAAO,CAAC,GAEZI,QAAgB;EACd,IAAI,CAACC,GAAQ;EAEb,IAAMC,IAAW,SAAS;EAI1B,CAHqBT,EAAS,SAAS,cACrC,sIACF,KACiBA,EAAS,QAAA,EAAU,MAAM;EAE1C,IAAMU,KAAa,MAAyB;GAC1C,IAAIC,EAAM,QAAQ,UAAU;IAC1B,EAAW,QAAQ;IACnB;GACF;GACA,IAAIA,EAAM,QAAQ,OAAO;GACzB,IAAMC,IAAY,MAAM,KACtBZ,EAAS,SAAS,iBAChB,sIACF,KAAK,CAAC,CACR;GACA,IAAIY,EAAU,WAAW,GAAG;GAC5B,IAAMC,IAAQD,EAAU,IAClBE,IAAOF,EAAUA,EAAU,SAAS;GAC1C,AAAID,EAAM,YAAY,SAAS,kBAAkBE,KAC/CF,EAAM,eAAe,GACrBG,EAAK,MAAM,KACF,CAACH,EAAM,YAAY,SAAS,kBAAkBG,MACvDH,EAAM,eAAe,GACrBE,EAAM,MAAM;EAEhB;EAEA,SAAS,iBAAiB,WAAWH,CAAS;EAC9C,IAAMK,IAAW,SAAS,KAAK,MAAM;EAGrC,OAFA,SAAS,KAAK,MAAM,WAAW,gBAElB;GAGX,AAFA,SAAS,oBAAoB,WAAWL,CAAS,GACjD,SAAS,KAAK,MAAM,WAAWK,GAC/BN,GAAU,MAAM;EAClB;CACF,GAAG,CAACD,CAAM,CAAC,GAEP,CAACA,KAAU,OAAO,WAAa,MAAoB,OAEhDQ,EACL,kBAAC,OAAD;EACE,WAAU;EACV,aAAWC;EACX,cAAc,MAAUN,EAAM,WAAWA,EAAM,iBAAiBT,EAAW,QAAQ;EAEnF,UAAA,kBAAC,OAAD;GACE,GAAIH;GACJ,MAAM,MAAS;IAEb,AADA,EAAS,UAAUmB,GACf,OAAOC,KAAQ,aAAYA,EAAID,CAAI,IAC9BC,MAAK,EAAI,UAAUD;GAC9B;GACA,MAAK;GACL,cAAW;GACX,mBAAiBd;GACjB,oBAAkBgB,IAAcd,IAAgB,KAAA;GAChD,UAAU;GACV,aAAWW;GACX,aAAWI;GACX,WAAW,CAAC,aAAaC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;GAd9D,UAAA;IAgBE,kBAAC,UAAD;KAAQ,WAAU;KAAlB,UAAA,CACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,MAAD;OAAI,IAAIlB;OAAS,WAAU;OACxB,UAAAmB;MACC,CAAA,GACHH,KACC,kBAAC,KAAD;OAAG,IAAId;OAAe,WAAU;OAC7B,UAAAc;MACA,CAAA,CAEF;KACL,CAAA,GAAA,kBAACI,GAAD;MACE,SAAQ;MACR,MAAK;MACL,YAAA;MACA,WAAU;MACV,cAAW;MACX,eAAetB,EAAW,QAAQ;KACnC,CAAA,CACK;;IACR,kBAAC,OAAD;KAAK,WAAU;KAAmB;IAAc,CAAA;IAC/CuB,KAAU,kBAAC,UAAD;KAAQ,WAAU;KAAqB,UAAAA;IAAe,CAAA;GAC9D;;CACF,CAAA,GACL,SAAS,IACX;AACF,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["useDrawerExit","previousOpen","setPreviousOpen","useState","isOpen","exiting","setExiting","animated","useEffect","durations","scrimRef","duration","value","timeout","Drawer","forwardRef","rest","panelRef","useRef","closeRef","onCloseRef","onClose","titleId","useId","descriptionId","variant","previous","focusOptions","selector","onKeyDown","event","focusable","first","last","overflow","portalContainer","createPortal","node","side","mergeRefs","ref","description","size","className","title","Button","closeLabel","footer"],"sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useState, type HTMLAttributes, type ReactNode, type RefObject } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Button } from \"../Button\";\nimport { mergeRefs } from \"../../internal/mergeRefs\";\nimport \"./style.css\";\n\nexport type DrawerSide = \"end\" | \"start\" | \"bottom\";\nexport type DrawerSize = \"md\" | \"wide\";\n\nexport interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, \"title\"> {\n isOpen: boolean;\n /** Escape, the scrim and the close button all call this. */\n onClose: () => void;\n title: ReactNode;\n description?: string;\n /** Which edge the panel is anchored to. */\n side?: DrawerSide;\n size?: DrawerSize;\n /** Navigation uses a compact, square panel and animates its exit. */\n variant?: \"default\" | \"navigation\";\n /** Accessible name of the dismiss button. */\n closeLabel?: string;\n /**\n * Defaults to document.body, covering the viewport. A navigation drawer\n * portaled into a positioned element, such as an app shell, stays inside it.\n */\n portalContainer?: HTMLElement | null;\n /** Actions, right-aligned. The confirming action goes last. */\n footer?: ReactNode;\n children?: ReactNode;\n}\n\nfunction useDrawerExit(isOpen: boolean, animated: boolean, scrimRef: RefObject<HTMLDivElement | null>) {\n const [previousOpen, setPreviousOpen] = useState(isOpen);\n const [exiting, setExiting] = useState(false);\n\n if (previousOpen !== isOpen) {\n setPreviousOpen(isOpen);\n setExiting(!isOpen && animated);\n }\n\n useEffect(() => {\n if (!exiting || isOpen) return;\n // Read the actual transition, including token overrides and reduced motion.\n const durations = getComputedStyle(scrimRef.current!).transitionDuration.split(\",\");\n const duration = Math.max(0, ...durations.map((value) =>\n parseFloat(value) * (value.trim().endsWith(\"ms\") ? 1 : 1000) || 0,\n ));\n const timeout = window.setTimeout(() => setExiting(false), duration);\n return () => window.clearTimeout(timeout);\n }, [exiting, isOpen, scrimRef]);\n\n return [exiting, setExiting] as const;\n}\n\n/**\n * A side panel for work that belongs beside the page rather than on top of it\n * — editing one record, a filter set, a revision history. Same frame, rules\n * and footer band as `Modal`; focus is trapped while open.\n */\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n {\n isOpen,\n onClose,\n title,\n description,\n side = \"end\",\n size = \"md\",\n variant = \"default\",\n closeLabel = \"Close\",\n portalContainer,\n footer,\n className,\n children,\n ...rest\n },\n ref,\n) {\n const panelRef = useRef<HTMLDivElement | null>(null);\n const scrimRef = useRef<HTMLDivElement | null>(null);\n const closeRef = useRef<HTMLButtonElement | null>(null);\n const onCloseRef = useRef(onClose);\n const titleId = useId();\n const descriptionId = useId();\n const [exiting, setExiting] = useDrawerExit(isOpen, variant === \"navigation\", scrimRef);\n\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n const previous = document.activeElement as HTMLElement | null;\n // Navigation starts off-screen; focusing it must not scroll the shell with it.\n const focusOptions = variant === \"navigation\" ? { preventScroll: true } : undefined;\n const selector = \":is(button, [href], input, select, textarea, [tabindex]):not(:disabled):not([tabindex='-1'])\";\n const initialFocus = variant === \"navigation\" ? closeRef.current : panelRef.current?.querySelector<HTMLElement>(selector);\n (initialFocus ?? panelRef.current)?.focus(focusOptions);\n\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n // A popup inside the panel (Menu, Select, DateField) claims its Escape.\n if (event.defaultPrevented) return;\n event.preventDefault();\n onCloseRef.current();\n return;\n }\n if (event.key !== \"Tab\") return;\n const focusable = Array.from(\n panelRef.current?.querySelectorAll<HTMLElement>(\n selector,\n ) ?? [],\n );\n if (focusable.length === 0) return;\n const first = focusable[0]!;\n const last = focusable[focusable.length - 1]!;\n if (event.shiftKey && (document.activeElement === first || !panelRef.current?.contains(document.activeElement))) {\n event.preventDefault();\n last.focus();\n } else if (!event.shiftKey && (document.activeElement === last || !panelRef.current?.contains(document.activeElement))) {\n event.preventDefault();\n first.focus();\n }\n };\n\n // On window, so document-level popup handlers inside the panel run first.\n window.addEventListener(\"keydown\", onKeyDown);\n const overflow = document.body.style.overflow;\n document.body.style.overflow = \"hidden\";\n\n return () => {\n window.removeEventListener(\"keydown\", onKeyDown);\n document.body.style.overflow = overflow;\n previous?.focus(focusOptions);\n };\n }, [isOpen, variant, portalContainer]);\n\n if ((!isOpen && !exiting) || typeof document === \"undefined\") return null;\n\n return createPortal(\n <div\n ref={(node) => {\n scrimRef.current = node;\n if (node) node.inert = !isOpen;\n }}\n className=\"ds-drawer-scrim\"\n data-side={side}\n data-variant={variant}\n data-contained={portalContainer ? \"\" : undefined}\n data-state={isOpen ? \"open\" : \"closed\"}\n aria-hidden={!isOpen || undefined}\n onTransitionEnd={(event) => {\n if (event.target === event.currentTarget && event.propertyName === \"opacity\" && !isOpen) setExiting(false);\n }}\n onMouseDown={(event) => isOpen && event.target === event.currentTarget && onCloseRef.current()}\n >\n <div\n {...rest}\n ref={mergeRefs(panelRef, ref)}\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby={rest[\"aria-label\"] ? undefined : (rest[\"aria-labelledby\"] ?? titleId)}\n aria-describedby={description ? descriptionId : undefined}\n tabIndex={-1}\n data-side={side}\n data-size={size}\n data-variant={variant}\n className={[\"ds-drawer\", className].filter(Boolean).join(\" \")}\n >\n <header className=\"ds-drawer__head\">\n <div className=\"ds-drawer__titles\">\n <h2 id={titleId} className=\"ds-drawer__title\">\n {title}\n </h2>\n {description && (\n <p id={descriptionId} className=\"ds-drawer__description\">\n {description}\n </p>\n )}\n </div>\n <Button\n ref={closeRef}\n variant=\"simple\"\n size={variant === \"navigation\" ? \"lg\" : \"sm\"}\n isIconOnly\n iconStart=\"x\"\n className={variant === \"navigation\" ? \"ds-drawer__close\" : undefined}\n aria-label={closeLabel}\n onClick={() => onCloseRef.current()}\n />\n </header>\n <div className=\"ds-drawer__body\">{children}</div>\n {footer && <footer className=\"ds-drawer__footer\">{footer}</footer>}\n </div>\n </div>,\n portalContainer ?? document.body,\n );\n});\n"],"mappings":"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"}
|
|
@@ -117,6 +117,108 @@
|
|
|
117
117
|
border-block-start: var(--rule-width) solid var(--rule-color);
|
|
118
118
|
}
|
|
119
119
|
|
|
120
|
+
.ds-drawer-scrim[data-variant="navigation"] {
|
|
121
|
+
overflow: clip;
|
|
122
|
+
opacity: 1;
|
|
123
|
+
animation: none;
|
|
124
|
+
transition: opacity var(--duration-panel) var(--ease-panel);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/* Portaled into a positioned container, navigation covers only that box. */
|
|
128
|
+
.ds-drawer-scrim[data-variant="navigation"][data-contained] {
|
|
129
|
+
position: absolute;
|
|
130
|
+
z-index: 20;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.ds-drawer[data-variant="navigation"] {
|
|
134
|
+
--drawer-hidden-transform: translateX(100%);
|
|
135
|
+
|
|
136
|
+
box-sizing: border-box;
|
|
137
|
+
min-block-size: 0;
|
|
138
|
+
border-radius: 0;
|
|
139
|
+
box-shadow: none;
|
|
140
|
+
transform: none;
|
|
141
|
+
animation: none;
|
|
142
|
+
transition: transform var(--duration-panel) var(--ease-panel);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.ds-drawer[data-variant="navigation"]:is([data-side="end"], [data-side="start"]) {
|
|
146
|
+
block-size: 100%;
|
|
147
|
+
inline-size: min(var(--sidenav-width), 85%);
|
|
148
|
+
max-inline-size: none;
|
|
149
|
+
border: 0;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* A closed panel leaves through its own edge, mirrored for right-to-left. */
|
|
153
|
+
.ds-drawer[data-variant="navigation"][data-side="end"] {
|
|
154
|
+
border-inline-start: var(--frame-width) solid var(--frame-color);
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
.ds-drawer[data-variant="navigation"][data-side="start"] {
|
|
158
|
+
--drawer-hidden-transform: translateX(-100%);
|
|
159
|
+
|
|
160
|
+
border-inline-end: var(--frame-width) solid var(--frame-color);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.ds-drawer[data-variant="navigation"][data-side="end"]:dir(rtl) {
|
|
164
|
+
--drawer-hidden-transform: translateX(-100%);
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.ds-drawer[data-variant="navigation"][data-side="start"]:dir(rtl) {
|
|
168
|
+
--drawer-hidden-transform: translateX(100%);
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.ds-drawer[data-variant="navigation"][data-side="bottom"] {
|
|
172
|
+
--drawer-hidden-transform: translateY(100%);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
.ds-drawer-scrim[data-variant="navigation"][data-state="closed"] {
|
|
176
|
+
opacity: 0;
|
|
177
|
+
pointer-events: none;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.ds-drawer-scrim[data-variant="navigation"][data-state="closed"] .ds-drawer {
|
|
181
|
+
transform: var(--drawer-hidden-transform);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
@starting-style {
|
|
185
|
+
.ds-drawer-scrim[data-variant="navigation"][data-state="open"] { opacity: 0; }
|
|
186
|
+
.ds-drawer[data-variant="navigation"] { transform: var(--drawer-hidden-transform); }
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.ds-drawer[data-variant="navigation"] .ds-drawer__head {
|
|
190
|
+
box-sizing: border-box;
|
|
191
|
+
flex: none;
|
|
192
|
+
align-items: center;
|
|
193
|
+
gap: var(--space-3);
|
|
194
|
+
min-block-size: var(--topnav-height);
|
|
195
|
+
padding: 0 var(--space-4);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.ds-drawer[data-variant="navigation"] .ds-drawer__title {
|
|
199
|
+
font-size: var(--font-size-md);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.ds-drawer__close {
|
|
203
|
+
margin-inline-end: calc(-1 * var(--space-2));
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Content that doesn't scroll itself, unlike AppShell's SideNav, still can. */
|
|
207
|
+
.ds-drawer[data-variant="navigation"] .ds-drawer__body {
|
|
208
|
+
display: flex;
|
|
209
|
+
min-block-size: 0;
|
|
210
|
+
padding: 0;
|
|
211
|
+
overflow: hidden auto;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.ds-drawer[data-variant="navigation"] .ds-drawer__footer {
|
|
215
|
+
display: block;
|
|
216
|
+
flex: none;
|
|
217
|
+
padding: 0;
|
|
218
|
+
border: 0;
|
|
219
|
+
background: var(--color-surface);
|
|
220
|
+
}
|
|
221
|
+
|
|
120
222
|
@keyframes ds-drawer-in-end {
|
|
121
223
|
from {
|
|
122
224
|
translate: var(--space-8) 0;
|
|
@@ -143,5 +245,9 @@
|
|
|
143
245
|
.ds-drawer {
|
|
144
246
|
animation: none;
|
|
145
247
|
}
|
|
248
|
+
.ds-drawer-scrim[data-variant="navigation"],
|
|
249
|
+
.ds-drawer[data-variant="navigation"] {
|
|
250
|
+
transition-duration: 0s;
|
|
251
|
+
}
|
|
146
252
|
}
|
|
147
253
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../Field/index.cjs"),require("../TextField/index.cjs"),require("../EntryPicker/index.cjs"),require("../NumberField/index.cjs"),require("../Switch/index.cjs");const e=require("../../chunks/EntryEditor-
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require("../Field/index.cjs"),require("../TextField/index.cjs"),require("../EntryPicker/index.cjs"),require("../NumberField/index.cjs"),require("../Switch/index.cjs");const e=require("../../chunks/EntryEditor-DIpc1iPF.cjs");exports.EntryEditor=e.t,exports.validateEntryValues=e.n;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/EntryEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/EntryEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO7D,OAAO,EAA4D,KAAK,YAAY,EAAE,KAAK,WAAW,EAAwB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAChK,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjI,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACzG,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,sEAAsE;IACtE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6DD,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,WAAgB,EAChB,MAAW,EACX,UAAkB,EAClB,aAAqB,EACrB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAgClB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EntryEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EntryEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAO7D,OAAO,EAA4D,KAAK,YAAY,EAAE,KAAK,WAAW,EAAwB,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAChK,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEjI,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,GAAG,UAAU,CAAC;IACzG,KAAK,EAAE,YAAY,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1C,sEAAsE;IACtE,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kFAAkF;IAClF,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AA6DD,sFAAsF;AACtF,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,WAAgB,EAChB,MAAW,EACX,UAAkB,EAClB,aAAqB,EACrB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAgClB"}
|
|
@@ -3,4 +3,4 @@ import "../TextField/index.js";
|
|
|
3
3
|
import "../EntryPicker/index.js";
|
|
4
4
|
import "../NumberField/index.js";
|
|
5
5
|
import "../Switch/index.js";
|
|
6
|
-
export { t as EntryEditor, n as validateEntryValues } from "../../chunks/EntryEditor-
|
|
6
|
+
export { t as EntryEditor, n as validateEntryValues } from "../../chunks/EntryEditor-CcyYtH74.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"model.d.cts","sourceRoot":"","sources":["../../../src/components/EntryEditor/model.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,CAC1C;IAAE,IAAI,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACrG;IAAE,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CACtD,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AAC/C,MAAM,WAAW,cAAc;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AACnD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;AAC3I,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAa1D,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAOnE;
|
|
1
|
+
{"version":3,"file":"model.d.cts","sourceRoot":"","sources":["../../../src/components/EntryEditor/model.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,CAC1C;IAAE,IAAI,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACrG;IAAE,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CACtD,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AAC/C,MAAM,WAAW,cAAc;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AACnD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;AAC3I,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAa1D,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAOnE;AAmDD,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,CASrG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/components/EntryEditor/model.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,CAC1C;IAAE,IAAI,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACrG;IAAE,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CACtD,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AAC/C,MAAM,WAAW,cAAc;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AACnD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;AAC3I,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAa1D,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAOnE;
|
|
1
|
+
{"version":3,"file":"model.d.ts","sourceRoot":"","sources":["../../../src/components/EntryEditor/model.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,UAAU,gBAAgB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,MAAM,YAAY,GAAG,gBAAgB,GAAG,CAC1C;IAAE,IAAI,EAAE,WAAW,GAAG,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;IAAC,QAAQ,CAAC,EAAE,KAAK,CAAA;CAAE,GACrG;IAAE,IAAI,EAAE,OAAO,GAAG,WAAW,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CACtD,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;CACjC;AAED,MAAM,WAAW,UAAU;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AAC/C,MAAM,WAAW,cAAc;IAAG,OAAO,EAAE,MAAM,CAAA;CAAE;AACnD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,gBAAgB,GAAG,UAAU,GAAG,cAAc,GAAG,UAAU,EAAE,GAAG,cAAc,EAAE,CAAC;AAC3I,MAAM,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,eAAe,GAAG,SAAS,CAAC,CAAC;AACtE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAa1D,gFAAgF;AAChF,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAOnE;AAmDD,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,WAAW,CASrG"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs"),n=require("../Modal/index.cjs"),r=require("../Badge/index.cjs"),i=require("../SearchField/index.cjs"),a=require("../SortableList/index.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(...e){return e.filter(Boolean).join(` `)}function l(e,t){return!t||[e.title,e.subtitle,...e.keywords??[]].filter(Boolean).join(` `).toLowerCase().includes(t.toLowerCase())}function u({item:t}){return(0,s.jsx)(`span`,{className:`ds-entry__thumb`,children:t.imageUrl?(0,s.jsx)(`img`,{src:t.imageUrl,alt:``,loading:`lazy`}):(0,s.jsx)(e.t,{name:`file-text`,size:20})})}function d({items:d,value:f,defaultValue:p=[],onValueChange:m,mode:h=`multiple`,max:g,label:_=`Entries`,emptyLabel:v=`Nothing selected yet.`,addLabel:y=`Choose entries`,isReorderable:b=!0,isDisabled:x=!1,className:S}){let[C,w]=(0,o.useState)(p),T=f??C,[E,D]=(0,o.useState)(!1),[O,k]=(0,o.useState)(``),A=(0,o.useMemo)(()=>new Map(d.map(e=>[e.id,e])),[d]),j=(0,o.useMemo)(()=>d.filter(e=>l(e,O)),[d,O]),M=h===`multiple`&&g!==void 0&&T.length>=g,N=e=>{x||(f===void 0&&w(e),m?.(e))},P=e=>{h===`single`?(N(T[0]===e?[]:[e]),D(!1)):T.includes(e)?N(T.filter(t=>t!==e)):M||N([...T,e])},F=T.map(e=>A.get(e)??{id:e,title:e}),I=!x&&b&&h===`multiple`&&F.length>1,L=e=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(u,{item:e}),(0,s.jsxs)(`span`,{className:`ds-entry__body`,children:[(0,s.jsx)(`span`,{className:`ds-entry__title`,children:e.title}),e.subtitle&&(0,s.jsx)(`span`,{className:`ds-entry__subtitle`,children:e.subtitle})]})]});return(0,s.jsxs)(`div`,{className:c(`ds-entry-picker`,S),children:[(0,s.jsxs)(`div`,{className:`ds-entry-picker__head`,children:[(0,s.jsx)(`span`,{className:`ds-entry-picker__label`,children:_}),(0,s.jsx)(r.Badge,{shape:`count`,children:T.length})]}),F.length===0?(0,s.jsx)(`p`,{className:`ds-entry-picker__empty`,children:v}):I?(0,s.jsx)(a.SortableList,{items:T,onReorder:N,renderDragOverlay:e=>{let t=A.get(e);return t?(0,s.jsx)(`div`,{className:`ds-entry`,children:L(t)}):null},children:F.map(e=>(0,s.jsx)(a.SortableListItem,{id:e.id,label:e.title,action:(0,s.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`x`,"aria-label":`Remove ${e.title}`,isDisabled:x,onClick:()=>N(T.filter(t=>t!==e.id))}),children:(0,s.jsx)(`div`,{className:`ds-entry`,children:L(e)})},e.id))}):(0,s.jsx)(`ul`,{className:`ds-entry-picker__list`,children:F.map(e=>(0,s.jsxs)(`li`,{className:`ds-entry-picker__row`,children:[(0,s.jsx)(`div`,{className:`ds-entry`,children:L(e)}),(0,s.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`x`,"aria-label":`Remove ${e.title}`,isDisabled:x,onClick:()=>N(T.filter(t=>t!==e.id))})]},e.id))}),(0,s.jsxs)(`div`,{className:`ds-entry-picker__actions`,children:[(0,s.jsx)(t.Button,{variant:`neutral`,size:`sm`,iconStart:`plus`,isDisabled:x,onClick:()=>D(!0),children:y}),T.length>0&&(0,s.jsx)(t.Button,{variant:`simple`,size:`sm`,isDisabled:x,onClick:()=>N([]),children:`Clear`})]}),(0,s.jsxs)(n.Modal,{isOpen:E,onClose:()=>D(!1),title:y,description:h===`single`?`Choose one entry.`:g===void 0?`Choose as many entries as you need.`:`Choose up to ${g} entries.`,footer:(0,s.jsx)(t.Button,{variant:`primary`,onClick:()=>D(!1),children:`Done`}),children:[(0,s.jsx)(`div`,{className:`ds-entry-picker__search`,children:(0,s.jsx)(i.SearchField,{value:O,placeholder:`Search entries`,onChange:e=>k(e.target.value),onClear:()=>k(``)})}),(0,s.jsxs)(`ul`,{className:`ds-entry-picker__results`,children:[j.map(
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs"),n=require("../Modal/index.cjs"),r=require("../Badge/index.cjs"),i=require("../SearchField/index.cjs"),a=require("../SortableList/index.cjs");let o=require("react"),s=require("react/jsx-runtime");function c(...e){return e.filter(Boolean).join(` `)}function l(e,t){return!t||[e.title,e.subtitle,...e.keywords??[]].filter(Boolean).join(` `).toLowerCase().includes(t.toLowerCase())}function u({item:t}){return(0,s.jsx)(`span`,{className:`ds-entry__thumb`,children:t.imageUrl?(0,s.jsx)(`img`,{src:t.imageUrl,alt:``,loading:`lazy`}):(0,s.jsx)(e.t,{name:`file-text`,size:20})})}function d({items:d,value:f,defaultValue:p=[],onValueChange:m,mode:h=`multiple`,max:g,label:_=`Entries`,emptyLabel:v=`Nothing selected yet.`,addLabel:y=`Choose entries`,isReorderable:b=!0,isDisabled:x=!1,className:S}){let[C,w]=(0,o.useState)(p),T=f??C,[E,D]=(0,o.useState)(!1),[O,k]=(0,o.useState)(``),A=(0,o.useMemo)(()=>new Map(d.map(e=>[e.id,e])),[d]),j=(0,o.useMemo)(()=>d.filter(e=>l(e,O)),[d,O]),M=h===`multiple`&&g!==void 0&&T.length>=g,N=e=>{x||(f===void 0&&w(e),m?.(e))},P=e=>{h===`single`?(N(T[0]===e?[]:[e]),D(!1)):T.includes(e)?N(T.filter(t=>t!==e)):M||N([...T,e])},F=T.map(e=>A.get(e)??{id:e,title:e}),I=!x&&b&&h===`multiple`&&F.length>1,L=e=>(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(u,{item:e}),(0,s.jsxs)(`span`,{className:`ds-entry__body`,children:[(0,s.jsx)(`span`,{className:`ds-entry__title`,children:e.title}),e.subtitle&&(0,s.jsx)(`span`,{className:`ds-entry__subtitle`,children:e.subtitle})]})]});return(0,s.jsxs)(`div`,{className:c(`ds-entry-picker`,S),children:[(0,s.jsxs)(`div`,{className:`ds-entry-picker__head`,children:[(0,s.jsx)(`span`,{className:`ds-entry-picker__label`,children:_}),(0,s.jsx)(r.Badge,{shape:`count`,children:T.length})]}),F.length===0?(0,s.jsx)(`p`,{className:`ds-entry-picker__empty`,children:v}):I?(0,s.jsx)(a.SortableList,{items:T,onReorder:N,renderDragOverlay:e=>{let t=A.get(e);return t?(0,s.jsx)(`div`,{className:`ds-entry`,children:L(t)}):null},children:F.map(e=>(0,s.jsx)(a.SortableListItem,{id:e.id,label:e.title,action:(0,s.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`x`,"aria-label":`Remove ${e.title}`,isDisabled:x,onClick:()=>N(T.filter(t=>t!==e.id))}),children:(0,s.jsx)(`div`,{className:`ds-entry`,children:L(e)})},e.id))}):(0,s.jsx)(`ul`,{className:`ds-entry-picker__list`,children:F.map(e=>(0,s.jsxs)(`li`,{className:`ds-entry-picker__row`,children:[(0,s.jsx)(`div`,{className:`ds-entry`,children:L(e)}),(0,s.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`x`,"aria-label":`Remove ${e.title}`,isDisabled:x,onClick:()=>N(T.filter(t=>t!==e.id))})]},e.id))}),(0,s.jsxs)(`div`,{className:`ds-entry-picker__actions`,children:[(0,s.jsx)(t.Button,{variant:`neutral`,size:`sm`,iconStart:`plus`,isDisabled:x,onClick:()=>D(!0),children:y}),T.length>0&&(0,s.jsx)(t.Button,{variant:`simple`,size:`sm`,isDisabled:x,onClick:()=>N([]),children:`Clear`})]}),(0,s.jsxs)(n.Modal,{isOpen:E,onClose:()=>D(!1),title:y,description:h===`single`?`Choose one entry.`:g===void 0?`Choose as many entries as you need.`:`Choose up to ${g} entries.`,footer:(0,s.jsx)(t.Button,{variant:`primary`,onClick:()=>D(!1),children:`Done`}),children:[(0,s.jsx)(`div`,{className:`ds-entry-picker__search`,children:(0,s.jsx)(i.SearchField,{value:O,placeholder:`Search entries`,onChange:e=>k(e.target.value),onClear:()=>k(``)})}),(0,s.jsxs)(`ul`,{className:`ds-entry-picker__results`,children:[j.map(n=>{let r=T.includes(n.id),i=x||n.isDisabled||!r&&M;return(0,s.jsx)(`li`,{children:(0,s.jsxs)(t.Button,{variant:r?`active`:`simple`,size:`lg`,className:`ds-entry-picker__result`,"aria-pressed":r,isDisabled:!!i,onClick:()=>P(n.id),children:[(0,s.jsx)(`span`,{className:`ds-entry`,children:L(n)}),r&&(0,s.jsx)(e.t,{name:`check`,size:20})]})},n.id)}),j.length===0&&(0,s.jsxs)(`li`,{className:`ds-entry-picker__no-results`,children:[`No entries match “`,O,`”.`]})]})]})]})}exports.EntryPicker=d;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["Icon","useState","useMemo","_Fragment","Badge","SortableList","SortableListItem","Button","Modal","SearchField","require_Icon","require_components_Button_index","require_components_Modal_index","require_components_Badge_index","require_components_SearchField_index","require_components_SortableList_index","react","react_jsx_runtime","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","items","results","atMax","mode","max","commit","isDisabled","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","className","label","emptyLabel","addLabel","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n id: string;\n title: string;\n /** Second line — a content type, a path, a file size. */\n subtitle?: string;\n /** Main image: an asset thumbnail, or the entry's hero. */\n imageUrl?: string;\n /** Words the search matches on top of the title and subtitle. */\n keywords?: string[];\n isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n items: EntryItem[];\n /** Selected ids, in the order they will be stored. */\n value?: string[];\n defaultValue?: string[];\n onValueChange?: (value: string[]) => void;\n mode?: EntryPickerMode;\n /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n max?: number;\n label?: string;\n /** Copy shown when nothing is picked yet. */\n emptyLabel?: string;\n addLabel?: string;\n /** Multiple selections are reorderable by default — the stored order is the shown order. */\n isReorderable?: boolean;\n isDisabled?: boolean;\n className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n if (!query) return true;\n const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase();\n return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n return (\n <span className=\"ds-entry__thumb\">\n {item.imageUrl ? (\n <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n ) : (\n <Icon name=\"file-text\" size={20} />\n )}\n </span>\n );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n items,\n value,\n defaultValue = [],\n onValueChange,\n mode = \"multiple\",\n max,\n label = \"Entries\",\n emptyLabel = \"Nothing selected yet.\",\n addLabel = \"Choose entries\",\n isReorderable = true,\n isDisabled = false,\n className,\n}: EntryPickerProps) {\n const [internal, setInternal] = useState<string[]>(defaultValue);\n const selected = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n\n const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n const commit = (next: string[]) => {\n if (isDisabled) return;\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n const toggle = (id: string) => {\n if (mode === \"single\") {\n commit(selected[0] === id ? [] : [id]);\n setOpen(false);\n return;\n }\n if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n else if (!atMax) commit([...selected, id]);\n };\n\n const chosen = selected.map((id) => byId.get(id) ?? { id, title: id });\n const canReorder = !isDisabled && isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n const row = (item: EntryItem): ReactNode => (\n <>\n <Thumb item={item} />\n <span className=\"ds-entry__body\">\n <span className=\"ds-entry__title\">{item.title}</span>\n {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n </span>\n </>\n );\n\n return (\n <div className={cx(\"ds-entry-picker\", className)}>\n <div className=\"ds-entry-picker__head\">\n <span className=\"ds-entry-picker__label\">{label}</span>\n <Badge shape=\"count\">{selected.length}</Badge>\n </div>\n\n {chosen.length === 0 ? (\n <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n ) : canReorder ? (\n <SortableList\n items={selected}\n onReorder={commit}\n renderDragOverlay={(id) => {\n const item = byId.get(id);\n return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n }}\n >\n {chosen.map((item) => (\n <SortableListItem\n key={item.id}\n id={item.id}\n label={item.title}\n action={\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n }\n >\n <div className=\"ds-entry\">{row(item)}</div>\n </SortableListItem>\n ))}\n </SortableList>\n ) : (\n <ul className=\"ds-entry-picker__list\">\n {chosen.map((item) => (\n <li key={item.id} className=\"ds-entry-picker__row\">\n <div className=\"ds-entry\">{row(item)}</div>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n </li>\n ))}\n </ul>\n )}\n\n <div className=\"ds-entry-picker__actions\">\n <Button\n variant=\"neutral\"\n size=\"sm\"\n iconStart=\"plus\"\n isDisabled={isDisabled}\n onClick={() => setOpen(true)}\n >\n {addLabel}\n </Button>\n {selected.length > 0 && (\n <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n Clear\n </Button>\n )}\n </div>\n\n <Modal\n isOpen={isOpen}\n onClose={() => setOpen(false)}\n title={addLabel}\n description={\n mode === \"single\"\n ? \"Choose one entry.\"\n : max !== undefined\n ? `Choose up to ${max} entries.`\n : \"Choose as many entries as you need.\"\n }\n footer={\n <Button variant=\"primary\" onClick={() => setOpen(false)}>\n Done\n </Button>\n }\n >\n <div className=\"ds-entry-picker__search\">\n <SearchField\n value={query}\n placeholder=\"Search entries\"\n onChange={(event) => setQuery(event.target.value)}\n onClear={() => setQuery(\"\")}\n />\n </div>\n <ul className=\"ds-entry-picker__results\">\n {results.map((item) => {\n const isSelected = selected.includes(item.id);\n const isBlocked = isDisabled || item.isDisabled || (!isSelected && atMax);\n return (\n <li key={item.id}>\n <button\n type=\"button\"\n className=\"ds-entry-picker__result\"\n aria-pressed={isSelected}\n disabled={isBlocked || undefined}\n onClick={() => toggle(item.id)}\n >\n <div className=\"ds-entry\">{row(item)}</div>\n {isSelected && <Icon name=\"check\" size={20} />}\n </button>\n </li>\n );\n })}\n {results.length === 0 && (\n <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n )}\n </ul>\n </Modal>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["Icon","useState","useMemo","_Fragment","Badge","SortableList","SortableListItem","Button","Modal","SearchField","require_Icon","require_components_Button_index","require_components_Modal_index","require_components_Badge_index","require_components_SearchField_index","require_components_SortableList_index","react","react_jsx_runtime","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","items","results","atMax","mode","max","commit","isDisabled","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","className","label","emptyLabel","addLabel","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n id: string;\n title: string;\n /** Second line — a content type, a path, a file size. */\n subtitle?: string;\n /** Main image: an asset thumbnail, or the entry's hero. */\n imageUrl?: string;\n /** Words the search matches on top of the title and subtitle. */\n keywords?: string[];\n isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n items: EntryItem[];\n /** Selected ids, in the order they will be stored. */\n value?: string[];\n defaultValue?: string[];\n onValueChange?: (value: string[]) => void;\n mode?: EntryPickerMode;\n /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n max?: number;\n label?: string;\n /** Copy shown when nothing is picked yet. */\n emptyLabel?: string;\n addLabel?: string;\n /** Multiple selections are reorderable by default — the stored order is the shown order. */\n isReorderable?: boolean;\n isDisabled?: boolean;\n className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n if (!query) return true;\n const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase();\n return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n return (\n <span className=\"ds-entry__thumb\">\n {item.imageUrl ? (\n <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n ) : (\n <Icon name=\"file-text\" size={20} />\n )}\n </span>\n );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n items,\n value,\n defaultValue = [],\n onValueChange,\n mode = \"multiple\",\n max,\n label = \"Entries\",\n emptyLabel = \"Nothing selected yet.\",\n addLabel = \"Choose entries\",\n isReorderable = true,\n isDisabled = false,\n className,\n}: EntryPickerProps) {\n const [internal, setInternal] = useState<string[]>(defaultValue);\n const selected = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n\n const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n const commit = (next: string[]) => {\n if (isDisabled) return;\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n const toggle = (id: string) => {\n if (mode === \"single\") {\n commit(selected[0] === id ? [] : [id]);\n setOpen(false);\n return;\n }\n if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n else if (!atMax) commit([...selected, id]);\n };\n\n const chosen = selected.map((id) => byId.get(id) ?? { id, title: id });\n const canReorder = !isDisabled && isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n const row = (item: EntryItem): ReactNode => (\n <>\n <Thumb item={item} />\n <span className=\"ds-entry__body\">\n <span className=\"ds-entry__title\">{item.title}</span>\n {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n </span>\n </>\n );\n\n return (\n <div className={cx(\"ds-entry-picker\", className)}>\n <div className=\"ds-entry-picker__head\">\n <span className=\"ds-entry-picker__label\">{label}</span>\n <Badge shape=\"count\">{selected.length}</Badge>\n </div>\n\n {chosen.length === 0 ? (\n <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n ) : canReorder ? (\n <SortableList\n items={selected}\n onReorder={commit}\n renderDragOverlay={(id) => {\n const item = byId.get(id);\n return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n }}\n >\n {chosen.map((item) => (\n <SortableListItem\n key={item.id}\n id={item.id}\n label={item.title}\n action={\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n }\n >\n <div className=\"ds-entry\">{row(item)}</div>\n </SortableListItem>\n ))}\n </SortableList>\n ) : (\n <ul className=\"ds-entry-picker__list\">\n {chosen.map((item) => (\n <li key={item.id} className=\"ds-entry-picker__row\">\n <div className=\"ds-entry\">{row(item)}</div>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n </li>\n ))}\n </ul>\n )}\n\n <div className=\"ds-entry-picker__actions\">\n <Button\n variant=\"neutral\"\n size=\"sm\"\n iconStart=\"plus\"\n isDisabled={isDisabled}\n onClick={() => setOpen(true)}\n >\n {addLabel}\n </Button>\n {selected.length > 0 && (\n <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n Clear\n </Button>\n )}\n </div>\n\n <Modal\n isOpen={isOpen}\n onClose={() => setOpen(false)}\n title={addLabel}\n description={\n mode === \"single\"\n ? \"Choose one entry.\"\n : max !== undefined\n ? `Choose up to ${max} entries.`\n : \"Choose as many entries as you need.\"\n }\n footer={\n <Button variant=\"primary\" onClick={() => setOpen(false)}>\n Done\n </Button>\n }\n >\n <div className=\"ds-entry-picker__search\">\n <SearchField\n value={query}\n placeholder=\"Search entries\"\n onChange={(event) => setQuery(event.target.value)}\n onClear={() => setQuery(\"\")}\n />\n </div>\n <ul className=\"ds-entry-picker__results\">\n {results.map((item) => {\n const isSelected = selected.includes(item.id);\n const isBlocked = isDisabled || item.isDisabled || (!isSelected && atMax);\n return (\n <li key={item.id}>\n <Button\n variant={isSelected ? \"active\" : \"simple\"}\n size=\"lg\"\n className=\"ds-entry-picker__result\"\n aria-pressed={isSelected}\n isDisabled={Boolean(isBlocked)}\n onClick={() => toggle(item.id)}\n >\n <span className=\"ds-entry\">{row(item)}</span>\n {isSelected && <Icon name=\"check\" size={20} />}\n </Button>\n </li>\n );\n })}\n {results.length === 0 && (\n <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n )}\n </ul>\n </Modal>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/EntryPicker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,IAAiB,EACjB,GAAG,EACH,KAAiB,EACjB,UAAoC,EACpC,QAA2B,EAC3B,aAAoB,EACpB,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,+
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/EntryPicker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,IAAiB,EACjB,GAAG,EACH,KAAiB,EACjB,UAAoC,EACpC,QAA2B,EAC3B,aAAoB,EACpB,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,+BAsKlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EntryPicker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,IAAiB,EACjB,GAAG,EACH,KAAiB,EACjB,UAAoC,EACpC,QAA2B,EAC3B,aAAoB,EACpB,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,+
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/EntryPicker/index.tsx"],"names":[],"mappings":"AAOA,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iEAAiE;IACjE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,wEAAwE;IACxE,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4FAA4F;IAC5F,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAK,EACL,YAAiB,EACjB,aAAa,EACb,IAAiB,EACjB,GAAG,EACH,KAAiB,EACjB,UAAoC,EACpC,QAA2B,EAC3B,aAAoB,EACpB,UAAkB,EAClB,SAAS,GACV,EAAE,gBAAgB,+BAsKlB"}
|
|
@@ -146,22 +146,23 @@ function h({ items: h, value: g, defaultValue: _ = [], onValueChange: v, mode: y
|
|
|
146
146
|
})
|
|
147
147
|
}), /* @__PURE__ */ d("ul", {
|
|
148
148
|
className: "ds-entry-picker__results",
|
|
149
|
-
children: [F.map((
|
|
150
|
-
let
|
|
151
|
-
return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d(
|
|
152
|
-
|
|
149
|
+
children: [F.map((n) => {
|
|
150
|
+
let r = k.includes(n.id), i = T || n.isDisabled || !r && I;
|
|
151
|
+
return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ d(t, {
|
|
152
|
+
variant: r ? "active" : "simple",
|
|
153
|
+
size: "lg",
|
|
153
154
|
className: "ds-entry-picker__result",
|
|
154
|
-
"aria-pressed":
|
|
155
|
-
|
|
156
|
-
onClick: () => R(
|
|
157
|
-
children: [/* @__PURE__ */ u("
|
|
155
|
+
"aria-pressed": r,
|
|
156
|
+
isDisabled: !!i,
|
|
157
|
+
onClick: () => R(n.id),
|
|
158
|
+
children: [/* @__PURE__ */ u("span", {
|
|
158
159
|
className: "ds-entry",
|
|
159
|
-
children: V(
|
|
160
|
-
}),
|
|
160
|
+
children: V(n)
|
|
161
|
+
}), r && /* @__PURE__ */ u(e, {
|
|
161
162
|
name: "check",
|
|
162
163
|
size: 20
|
|
163
164
|
})]
|
|
164
|
-
}) },
|
|
165
|
+
}) }, n.id);
|
|
165
166
|
}), F.length === 0 && /* @__PURE__ */ d("li", {
|
|
166
167
|
className: "ds-entry-picker__no-results",
|
|
167
168
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","useState","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","useMemo","items","results","atMax","mode","max","commit","isDisabled","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","className","label","Badge","emptyLabel","SortableList","SortableListItem","Button","addLabel","Modal","SearchField","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n id: string;\n title: string;\n /** Second line — a content type, a path, a file size. */\n subtitle?: string;\n /** Main image: an asset thumbnail, or the entry's hero. */\n imageUrl?: string;\n /** Words the search matches on top of the title and subtitle. */\n keywords?: string[];\n isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n items: EntryItem[];\n /** Selected ids, in the order they will be stored. */\n value?: string[];\n defaultValue?: string[];\n onValueChange?: (value: string[]) => void;\n mode?: EntryPickerMode;\n /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n max?: number;\n label?: string;\n /** Copy shown when nothing is picked yet. */\n emptyLabel?: string;\n addLabel?: string;\n /** Multiple selections are reorderable by default — the stored order is the shown order. */\n isReorderable?: boolean;\n isDisabled?: boolean;\n className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n if (!query) return true;\n const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase();\n return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n return (\n <span className=\"ds-entry__thumb\">\n {item.imageUrl ? (\n <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n ) : (\n <Icon name=\"file-text\" size={20} />\n )}\n </span>\n );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n items,\n value,\n defaultValue = [],\n onValueChange,\n mode = \"multiple\",\n max,\n label = \"Entries\",\n emptyLabel = \"Nothing selected yet.\",\n addLabel = \"Choose entries\",\n isReorderable = true,\n isDisabled = false,\n className,\n}: EntryPickerProps) {\n const [internal, setInternal] = useState<string[]>(defaultValue);\n const selected = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n\n const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n const commit = (next: string[]) => {\n if (isDisabled) return;\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n const toggle = (id: string) => {\n if (mode === \"single\") {\n commit(selected[0] === id ? [] : [id]);\n setOpen(false);\n return;\n }\n if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n else if (!atMax) commit([...selected, id]);\n };\n\n const chosen = selected.map((id) => byId.get(id) ?? { id, title: id });\n const canReorder = !isDisabled && isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n const row = (item: EntryItem): ReactNode => (\n <>\n <Thumb item={item} />\n <span className=\"ds-entry__body\">\n <span className=\"ds-entry__title\">{item.title}</span>\n {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n </span>\n </>\n );\n\n return (\n <div className={cx(\"ds-entry-picker\", className)}>\n <div className=\"ds-entry-picker__head\">\n <span className=\"ds-entry-picker__label\">{label}</span>\n <Badge shape=\"count\">{selected.length}</Badge>\n </div>\n\n {chosen.length === 0 ? (\n <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n ) : canReorder ? (\n <SortableList\n items={selected}\n onReorder={commit}\n renderDragOverlay={(id) => {\n const item = byId.get(id);\n return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n }}\n >\n {chosen.map((item) => (\n <SortableListItem\n key={item.id}\n id={item.id}\n label={item.title}\n action={\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n }\n >\n <div className=\"ds-entry\">{row(item)}</div>\n </SortableListItem>\n ))}\n </SortableList>\n ) : (\n <ul className=\"ds-entry-picker__list\">\n {chosen.map((item) => (\n <li key={item.id} className=\"ds-entry-picker__row\">\n <div className=\"ds-entry\">{row(item)}</div>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n </li>\n ))}\n </ul>\n )}\n\n <div className=\"ds-entry-picker__actions\">\n <Button\n variant=\"neutral\"\n size=\"sm\"\n iconStart=\"plus\"\n isDisabled={isDisabled}\n onClick={() => setOpen(true)}\n >\n {addLabel}\n </Button>\n {selected.length > 0 && (\n <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n Clear\n </Button>\n )}\n </div>\n\n <Modal\n isOpen={isOpen}\n onClose={() => setOpen(false)}\n title={addLabel}\n description={\n mode === \"single\"\n ? \"Choose one entry.\"\n : max !== undefined\n ? `Choose up to ${max} entries.`\n : \"Choose as many entries as you need.\"\n }\n footer={\n <Button variant=\"primary\" onClick={() => setOpen(false)}>\n Done\n </Button>\n }\n >\n <div className=\"ds-entry-picker__search\">\n <SearchField\n value={query}\n placeholder=\"Search entries\"\n onChange={(event) => setQuery(event.target.value)}\n onClear={() => setQuery(\"\")}\n />\n </div>\n <ul className=\"ds-entry-picker__results\">\n {results.map((item) => {\n const isSelected = selected.includes(item.id);\n const isBlocked = isDisabled || item.isDisabled || (!isSelected && atMax);\n return (\n <li key={item.id}>\n <button\n type=\"button\"\n className=\"ds-entry-picker__result\"\n aria-pressed={isSelected}\n disabled={isBlocked || undefined}\n onClick={() => toggle(item.id)}\n >\n <div className=\"ds-entry\">{row(item)}</div>\n {isSelected && <Icon name=\"check\" size={20} />}\n </button>\n </li>\n );\n })}\n {results.length === 0 && (\n <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n )}\n </ul>\n </Modal>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","cx","parts","matches","query","item","Thumb","EntryPicker","internal","setInternal","useState","defaultValue","selected","value","isOpen","setOpen","setQuery","byId","useMemo","items","results","atMax","mode","max","commit","isDisabled","next","onValueChange","toggle","id","chosen","canReorder","isReorderable","row","className","label","Badge","emptyLabel","SortableList","SortableListItem","Button","addLabel","Modal","SearchField","event","isSelected","isBlocked"],"sources":["../../../src/components/EntryPicker/index.tsx"],"sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { Badge } from \"../Badge\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Modal } from \"../Modal\";\nimport { SearchField } from \"../SearchField\";\nimport { SortableList, SortableListItem } from \"../SortableList\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface EntryItem {\n id: string;\n title: string;\n /** Second line — a content type, a path, a file size. */\n subtitle?: string;\n /** Main image: an asset thumbnail, or the entry's hero. */\n imageUrl?: string;\n /** Words the search matches on top of the title and subtitle. */\n keywords?: string[];\n isDisabled?: boolean;\n}\n\nexport type EntryPickerMode = \"single\" | \"multiple\";\n\nexport interface EntryPickerProps {\n items: EntryItem[];\n /** Selected ids, in the order they will be stored. */\n value?: string[];\n defaultValue?: string[];\n onValueChange?: (value: string[]) => void;\n mode?: EntryPickerMode;\n /** Cap a multiple selection. Reaching it disables the unpicked rows. */\n max?: number;\n label?: string;\n /** Copy shown when nothing is picked yet. */\n emptyLabel?: string;\n addLabel?: string;\n /** Multiple selections are reorderable by default — the stored order is the shown order. */\n isReorderable?: boolean;\n isDisabled?: boolean;\n className?: string;\n}\n\nfunction matches(item: EntryItem, query: string) {\n if (!query) return true;\n const haystack = [item.title, item.subtitle, ...(item.keywords ?? [])]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase();\n return haystack.includes(query.toLowerCase());\n}\n\nfunction Thumb({ item }: { item: EntryItem }) {\n return (\n <span className=\"ds-entry__thumb\">\n {item.imageUrl ? (\n <img src={item.imageUrl} alt=\"\" loading=\"lazy\" />\n ) : (\n <Icon name=\"file-text\" size={20} />\n )}\n </span>\n );\n}\n\n/**\n * Pick entries or assets out of a list. Search narrows it, a row toggles,\n * and a multiple selection keeps — and reorders — the order you chose.\n */\nexport function EntryPicker({\n items,\n value,\n defaultValue = [],\n onValueChange,\n mode = \"multiple\",\n max,\n label = \"Entries\",\n emptyLabel = \"Nothing selected yet.\",\n addLabel = \"Choose entries\",\n isReorderable = true,\n isDisabled = false,\n className,\n}: EntryPickerProps) {\n const [internal, setInternal] = useState<string[]>(defaultValue);\n const selected = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const [query, setQuery] = useState(\"\");\n\n const byId = useMemo(() => new Map(items.map((item) => [item.id, item])), [items]);\n const results = useMemo(() => items.filter((item) => matches(item, query)), [items, query]);\n const atMax = mode === \"multiple\" && max !== undefined && selected.length >= max;\n\n const commit = (next: string[]) => {\n if (isDisabled) return;\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n const toggle = (id: string) => {\n if (mode === \"single\") {\n commit(selected[0] === id ? [] : [id]);\n setOpen(false);\n return;\n }\n if (selected.includes(id)) commit(selected.filter((item) => item !== id));\n else if (!atMax) commit([...selected, id]);\n };\n\n const chosen = selected.map((id) => byId.get(id) ?? { id, title: id });\n const canReorder = !isDisabled && isReorderable && mode === \"multiple\" && chosen.length > 1;\n\n const row = (item: EntryItem): ReactNode => (\n <>\n <Thumb item={item} />\n <span className=\"ds-entry__body\">\n <span className=\"ds-entry__title\">{item.title}</span>\n {item.subtitle && <span className=\"ds-entry__subtitle\">{item.subtitle}</span>}\n </span>\n </>\n );\n\n return (\n <div className={cx(\"ds-entry-picker\", className)}>\n <div className=\"ds-entry-picker__head\">\n <span className=\"ds-entry-picker__label\">{label}</span>\n <Badge shape=\"count\">{selected.length}</Badge>\n </div>\n\n {chosen.length === 0 ? (\n <p className=\"ds-entry-picker__empty\">{emptyLabel}</p>\n ) : canReorder ? (\n <SortableList\n items={selected}\n onReorder={commit}\n renderDragOverlay={(id) => {\n const item = byId.get(id);\n return item ? <div className=\"ds-entry\">{row(item)}</div> : null;\n }}\n >\n {chosen.map((item) => (\n <SortableListItem\n key={item.id}\n id={item.id}\n label={item.title}\n action={\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n }\n >\n <div className=\"ds-entry\">{row(item)}</div>\n </SortableListItem>\n ))}\n </SortableList>\n ) : (\n <ul className=\"ds-entry-picker__list\">\n {chosen.map((item) => (\n <li key={item.id} className=\"ds-entry-picker__row\">\n <div className=\"ds-entry\">{row(item)}</div>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"x\"\n aria-label={`Remove ${item.title}`}\n isDisabled={isDisabled}\n onClick={() => commit(selected.filter((id) => id !== item.id))}\n />\n </li>\n ))}\n </ul>\n )}\n\n <div className=\"ds-entry-picker__actions\">\n <Button\n variant=\"neutral\"\n size=\"sm\"\n iconStart=\"plus\"\n isDisabled={isDisabled}\n onClick={() => setOpen(true)}\n >\n {addLabel}\n </Button>\n {selected.length > 0 && (\n <Button variant=\"simple\" size=\"sm\" isDisabled={isDisabled} onClick={() => commit([])}>\n Clear\n </Button>\n )}\n </div>\n\n <Modal\n isOpen={isOpen}\n onClose={() => setOpen(false)}\n title={addLabel}\n description={\n mode === \"single\"\n ? \"Choose one entry.\"\n : max !== undefined\n ? `Choose up to ${max} entries.`\n : \"Choose as many entries as you need.\"\n }\n footer={\n <Button variant=\"primary\" onClick={() => setOpen(false)}>\n Done\n </Button>\n }\n >\n <div className=\"ds-entry-picker__search\">\n <SearchField\n value={query}\n placeholder=\"Search entries\"\n onChange={(event) => setQuery(event.target.value)}\n onClear={() => setQuery(\"\")}\n />\n </div>\n <ul className=\"ds-entry-picker__results\">\n {results.map((item) => {\n const isSelected = selected.includes(item.id);\n const isBlocked = isDisabled || item.isDisabled || (!isSelected && atMax);\n return (\n <li key={item.id}>\n <Button\n variant={isSelected ? \"active\" : \"simple\"}\n size=\"lg\"\n className=\"ds-entry-picker__result\"\n aria-pressed={isSelected}\n isDisabled={Boolean(isBlocked)}\n onClick={() => toggle(item.id)}\n >\n <span className=\"ds-entry\">{row(item)}</span>\n {isSelected && <Icon name=\"check\" size={20} />}\n </Button>\n </li>\n );\n })}\n {results.length === 0 && (\n <li className=\"ds-entry-picker__no-results\">No entries match “{query}”.</li>\n )}\n </ul>\n </Modal>\n </div>\n );\n}\n"],"mappings":"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"}
|