@namroodinc/liquid-editorial 0.1.7 → 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 +2 -0
- package/UPGRADING.md +25 -0
- 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/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 -231
- 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/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 +39 -36
- package/dist/components/DatePicker/index.js.map +1 -1
- package/dist/components/Drawer/index.cjs +1 -1
- package/dist/components/Drawer/index.cjs.map +1 -1
- package/dist/components/Drawer/index.d.cts.map +1 -1
- package/dist/components/Drawer/index.d.ts.map +1 -1
- package/dist/components/Drawer/index.js +69 -62
- package/dist/components/Drawer/index.js.map +1 -1
- 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/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/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/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 +32 -18
- package/dist/components/Select/index.js.map +1 -1
- 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 +49 -50
- package/dist/components/SortableList/index.js.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +4 -4
- 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/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
|
@@ -46,24 +46,27 @@ function g(e) {
|
|
|
46
46
|
let t = new Date(e.getFullYear(), e.getMonth(), 1), n = (t.getDay() + 6) % 7;
|
|
47
47
|
return new Date(t.getFullYear(), t.getMonth(), 1 - n);
|
|
48
48
|
}
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
function _(e, t, n) {
|
|
50
|
+
return e ? "primary" : t ? "active" : n ? "neutral" : "simple";
|
|
51
|
+
}
|
|
52
|
+
var v = r(function({ value: e, endValue: n, onSelect: r, min: a, max: v, className: y, ...b }, x) {
|
|
53
|
+
let S = p(e), [C, w] = s(() => S ?? /* @__PURE__ */ new Date()), [T, E] = s(() => e ?? f(/* @__PURE__ */ new Date())), D = o(null), O = o(!1);
|
|
51
54
|
i(() => {
|
|
52
55
|
let t = p(e);
|
|
53
|
-
t && (
|
|
56
|
+
t && (E(e), w(new Date(t.getFullYear(), t.getMonth(), 1)));
|
|
54
57
|
}, [e]), i(() => {
|
|
55
|
-
|
|
56
|
-
}, [
|
|
57
|
-
let
|
|
58
|
-
let n = g(
|
|
58
|
+
O.current && (O.current = !1, D.current?.querySelector("[data-focused]")?.focus());
|
|
59
|
+
}, [T]);
|
|
60
|
+
let k = Array.from({ length: 42 }, (e, t) => {
|
|
61
|
+
let n = g(C);
|
|
59
62
|
return new Date(n.getFullYear(), n.getMonth(), n.getDate() + t);
|
|
60
|
-
}),
|
|
61
|
-
let t = new Date(
|
|
62
|
-
|
|
63
|
-
}, j = (e) => {
|
|
64
|
-
let t = p(w) ?? /* @__PURE__ */ new Date(), n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + e);
|
|
65
|
-
D.current = !0, T(f(n)), C(new Date(n.getFullYear(), n.getMonth(), 1));
|
|
63
|
+
}), A = f(/* @__PURE__ */ new Date()), j = (e) => {
|
|
64
|
+
let t = new Date(C.getFullYear(), C.getMonth() + e, 1);
|
|
65
|
+
w(t), E(f(t));
|
|
66
66
|
}, M = (e) => {
|
|
67
|
+
let t = p(T) ?? /* @__PURE__ */ new Date(), n = new Date(t.getFullYear(), t.getMonth(), t.getDate() + e);
|
|
68
|
+
O.current = !0, E(f(n)), w(new Date(n.getFullYear(), n.getMonth(), 1));
|
|
69
|
+
}, N = (e) => {
|
|
67
70
|
let t = {
|
|
68
71
|
ArrowLeft: -1,
|
|
69
72
|
ArrowRight: 1,
|
|
@@ -72,12 +75,12 @@ var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, classNa
|
|
|
72
75
|
PageUp: -28,
|
|
73
76
|
PageDown: 28
|
|
74
77
|
}[e.key];
|
|
75
|
-
t !== void 0 && (e.preventDefault(),
|
|
78
|
+
t !== void 0 && (e.preventDefault(), M(t));
|
|
76
79
|
};
|
|
77
80
|
return /* @__PURE__ */ l("div", {
|
|
78
|
-
ref:
|
|
79
|
-
className: u("ds-calendar",
|
|
80
|
-
...
|
|
81
|
+
ref: x,
|
|
82
|
+
className: u("ds-calendar", y),
|
|
83
|
+
...b,
|
|
81
84
|
children: [
|
|
82
85
|
/* @__PURE__ */ l("div", {
|
|
83
86
|
className: "ds-calendar__head",
|
|
@@ -88,11 +91,11 @@ var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, classNa
|
|
|
88
91
|
isIconOnly: !0,
|
|
89
92
|
iconStart: "chevron-left",
|
|
90
93
|
"aria-label": "Previous month",
|
|
91
|
-
onClick: () =>
|
|
94
|
+
onClick: () => j(-1)
|
|
92
95
|
}),
|
|
93
96
|
/* @__PURE__ */ c("span", {
|
|
94
97
|
className: "ds-calendar__month",
|
|
95
|
-
children: h(
|
|
98
|
+
children: h(C)
|
|
96
99
|
}),
|
|
97
100
|
/* @__PURE__ */ c(t, {
|
|
98
101
|
variant: "simple",
|
|
@@ -100,7 +103,7 @@ var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, classNa
|
|
|
100
103
|
isIconOnly: !0,
|
|
101
104
|
iconStart: "chevron-right",
|
|
102
105
|
"aria-label": "Next month",
|
|
103
|
-
onClick: () =>
|
|
106
|
+
onClick: () => j(1)
|
|
104
107
|
})
|
|
105
108
|
]
|
|
106
109
|
}),
|
|
@@ -110,31 +113,31 @@ var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, classNa
|
|
|
110
113
|
children: d.map((e) => /* @__PURE__ */ c("span", { children: e.slice(0, 2) }, e))
|
|
111
114
|
}),
|
|
112
115
|
/* @__PURE__ */ c("div", {
|
|
113
|
-
ref:
|
|
116
|
+
ref: D,
|
|
114
117
|
className: "ds-calendar__grid",
|
|
115
118
|
role: "grid",
|
|
116
|
-
onKeyDown:
|
|
119
|
+
onKeyDown: N,
|
|
117
120
|
children: Array.from({ length: 6 }, (i, o) => /* @__PURE__ */ c("div", {
|
|
118
121
|
role: "row",
|
|
119
122
|
className: "ds-calendar__row",
|
|
120
|
-
children:
|
|
121
|
-
let o = f(i), s = i.getMonth() !==
|
|
123
|
+
children: k.slice(o * 7, o * 7 + 7).map((i) => {
|
|
124
|
+
let o = f(i), s = i.getMonth() !== C.getMonth(), l = a && o < a || v && o > v, u = !!(e && n && o > e && o < n), d = o === e || o === n;
|
|
122
125
|
return /* @__PURE__ */ c(t, {
|
|
123
|
-
variant: d
|
|
126
|
+
variant: _(d, u, o === A),
|
|
124
127
|
size: "sm",
|
|
125
128
|
isIconOnly: !0,
|
|
126
129
|
role: "gridcell",
|
|
127
130
|
"aria-label": m(o),
|
|
128
|
-
tabIndex: o ===
|
|
131
|
+
tabIndex: o === T ? 0 : -1,
|
|
129
132
|
isDisabled: !!l,
|
|
130
133
|
"aria-selected": d || void 0,
|
|
131
134
|
"data-outside": s || void 0,
|
|
132
|
-
"data-today": o ===
|
|
135
|
+
"data-today": o === A || void 0,
|
|
133
136
|
"data-in-range": u || void 0,
|
|
134
|
-
"data-focused": o ===
|
|
137
|
+
"data-focused": o === T || void 0,
|
|
135
138
|
className: "ds-calendar__day",
|
|
136
139
|
onClick: () => {
|
|
137
|
-
|
|
140
|
+
E(o), r?.(o);
|
|
138
141
|
},
|
|
139
142
|
children: i.getDate()
|
|
140
143
|
}, o);
|
|
@@ -144,7 +147,7 @@ var _ = r(function({ value: e, endValue: n, onSelect: r, min: a, max: _, classNa
|
|
|
144
147
|
]
|
|
145
148
|
});
|
|
146
149
|
});
|
|
147
|
-
function
|
|
150
|
+
function y({ value: r, defaultValue: d = "", onValueChange: f, size: p = "md", placeholder: h = "Pick a date", min: g, max: _, isDisabled: y = !1, isInvalid: b = !1, "aria-invalid": x, id: S, className: C, ...w }) {
|
|
148
151
|
let [T, E] = s(d), D = r ?? T, [O, k] = s(!1), A = o(null), j = o(null), M = o(null), N = a(), P = S ?? N;
|
|
149
152
|
return i(() => {
|
|
150
153
|
if (!O) return;
|
|
@@ -188,10 +191,10 @@ function v({ value: r, defaultValue: d = "", onValueChange: f, size: p = "md", p
|
|
|
188
191
|
className: "ds-datefield__popover",
|
|
189
192
|
role: "dialog",
|
|
190
193
|
"aria-label": "Choose a date",
|
|
191
|
-
children: /* @__PURE__ */ c(
|
|
194
|
+
children: /* @__PURE__ */ c(v, {
|
|
192
195
|
value: D,
|
|
193
196
|
min: g,
|
|
194
|
-
max:
|
|
197
|
+
max: _,
|
|
195
198
|
onSelect: (e) => {
|
|
196
199
|
r === void 0 && E(e), f?.(e), k(!1), j.current?.focus();
|
|
197
200
|
}
|
|
@@ -199,7 +202,7 @@ function v({ value: r, defaultValue: d = "", onValueChange: f, size: p = "md", p
|
|
|
199
202
|
})]
|
|
200
203
|
});
|
|
201
204
|
}
|
|
202
|
-
function
|
|
205
|
+
function b({ value: e, defaultValue: t = {
|
|
203
206
|
start: "",
|
|
204
207
|
end: ""
|
|
205
208
|
}, onValueChange: n, size: r = "md", min: i, max: a, isDisabled: o = !1, startLabel: d = "Start date", endLabel: f = "End date", className: p }) {
|
|
@@ -209,7 +212,7 @@ function y({ value: e, defaultValue: t = {
|
|
|
209
212
|
return /* @__PURE__ */ l("div", {
|
|
210
213
|
className: u("ds-daterange", p),
|
|
211
214
|
children: [
|
|
212
|
-
/* @__PURE__ */ c(
|
|
215
|
+
/* @__PURE__ */ c(y, {
|
|
213
216
|
"aria-label": d,
|
|
214
217
|
size: r,
|
|
215
218
|
value: g.start,
|
|
@@ -227,7 +230,7 @@ function y({ value: e, defaultValue: t = {
|
|
|
227
230
|
"aria-hidden": "true",
|
|
228
231
|
children: "–"
|
|
229
232
|
}),
|
|
230
|
-
/* @__PURE__ */ c(
|
|
233
|
+
/* @__PURE__ */ c(y, {
|
|
231
234
|
"aria-label": f,
|
|
232
235
|
size: r,
|
|
233
236
|
value: g.end,
|
|
@@ -244,6 +247,6 @@ function y({ value: e, defaultValue: t = {
|
|
|
244
247
|
});
|
|
245
248
|
}
|
|
246
249
|
//#endregion
|
|
247
|
-
export {
|
|
250
|
+
export { v as Calendar, y as DateField, b as DateRangeField, m as formatIsoDate };
|
|
248
251
|
|
|
249
252
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["Icon","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","Calendar","forwardRef","rest","selected","setMonth","useState","focused","setFocused","gridRef","useRef","shouldFocus","useEffect","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","Button","rowIndex","iso","isOutside","isDisabled","min","max","inRange","endValue","isEdge","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","useId","triggerId","id","onPointerDown","target","isInvalid","open","placeholder","Popover","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type HTMLAttributes,\n type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const day = `${date.getDate()}`.padStart(2, \"0\");\n return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const [year, month, day] = value.split(\"-\").map(Number);\n if (!year || !month || !day) return null;\n const date = new Date(year, month - 1, day);\n return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n const date = fromIso(value);\n if (!date) return \"\";\n return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n const first = new Date(month.getFullYear(), month.getMonth(), 1);\n const weekday = (first.getDay() + 6) % 7; // Monday-first\n return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Selected day, or the start of a selected span. */\n value?: IsoDate;\n /** End of a selected span. Set it to put the calendar in range mode. */\n endValue?: IsoDate;\n onSelect?: (value: IsoDate) => void;\n min?: IsoDate;\n max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n { value, endValue, onSelect, min, max, className, ...rest },\n ref,\n) {\n const selected = fromIso(value);\n const [month, setMonth] = useState(() => selected ?? new Date());\n const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n const gridRef = useRef<HTMLDivElement | null>(null);\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const next = fromIso(value);\n if (!next) return;\n // Controlled changes intentionally reposition the visible and roving-focus month.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFocused(value!);\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n }, [value]);\n\n useEffect(() => {\n if (!shouldFocus.current) return;\n shouldFocus.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n }, [focused]);\n\n const days = Array.from({ length: 42 }, (_, index) => {\n const start = startOfGrid(month);\n return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n });\n\n const today = toIso(new Date());\n\n const changeMonth = (delta: number) => {\n const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n setMonth(next);\n setFocused(toIso(next));\n };\n\n const move = (deltaDays: number) => {\n const base = fromIso(focused) ?? new Date();\n const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n shouldFocus.current = true;\n setFocused(toIso(next));\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const steps: Record<string, number> = {\n ArrowLeft: -1,\n ArrowRight: 1,\n ArrowUp: -7,\n ArrowDown: 7,\n PageUp: -28,\n PageDown: 28,\n };\n const delta = steps[event.key];\n if (delta === undefined) return;\n event.preventDefault();\n move(delta);\n };\n\n return (\n <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n <div className=\"ds-calendar__head\">\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-left\"\n aria-label=\"Previous month\"\n onClick={() => changeMonth(-1)}\n />\n <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-right\"\n aria-label=\"Next month\"\n onClick={() => changeMonth(1)}\n />\n </div>\n <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n {WEEKDAYS.map((day) => (\n <span key={day}>{day.slice(0, 2)}</span>\n ))}\n </div>\n <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n {Array.from({ length: 6 }, (_, rowIndex) => (\n <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n const iso = toIso(day);\n const isOutside = day.getMonth() !== month.getMonth();\n const isDisabled = (min && iso < min) || (max && iso > max);\n const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n const isEdge = iso === value || iso === endValue;\n return (\n <Button\n key={iso}\n variant={isEdge ? \"primary\" : inRange ? \"active\" : iso === today ? \"neutral\" : \"simple\"}\n size=\"sm\"\n isIconOnly\n role=\"gridcell\"\n aria-label={formatIsoDate(iso)}\n tabIndex={iso === focused ? 0 : -1}\n isDisabled={Boolean(isDisabled)}\n aria-selected={isEdge || undefined}\n data-outside={isOutside || undefined}\n data-today={iso === today || undefined}\n data-in-range={inRange || undefined}\n data-focused={iso === focused || undefined}\n className=\"ds-calendar__day\"\n onClick={() => {\n setFocused(iso);\n onSelect?.(iso);\n }}\n >\n {day.getDate()}\n </Button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n});\n\nexport interface DateFieldProps {\n value?: IsoDate;\n defaultValue?: IsoDate;\n onValueChange?: (value: IsoDate) => void;\n size?: FieldSize;\n placeholder?: string;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n isInvalid?: boolean;\n id?: string;\n className?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n value,\n defaultValue = \"\",\n onValueChange,\n size = \"md\",\n placeholder = \"Pick a date\",\n min,\n max,\n isDisabled = false,\n isInvalid = false,\n \"aria-invalid\": ariaInvalid,\n id,\n className,\n ...rest\n}: DateFieldProps) {\n const [internal, setInternal] = useState<IsoDate>(defaultValue);\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const generatedId = useId();\n const triggerId = id ?? generatedId;\n\n useEffect(() => {\n if (!isOpen) return;\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n triggerRef.current?.focus();\n }\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n <Button\n {...rest}\n ref={triggerRef}\n id={triggerId}\n size={size}\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-invalid={isInvalid || ariaInvalid || undefined}\n isDisabled={isDisabled}\n data-placeholder={current ? undefined : \"\"}\n className=\"ds-field-skin ds-datefield__control\"\n onClick={() => setOpen((open) => !open)}\n >\n <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n </Button>\n <Popover\n anchorRef={triggerRef}\n anchorId={triggerId}\n isOpen={isOpen}\n panelRef={panelRef}\n className=\"ds-datefield__popover\"\n role=\"dialog\"\n aria-label=\"Choose a date\"\n >\n <Calendar\n value={current}\n min={min}\n max={max}\n onSelect={(next) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n triggerRef.current?.focus();\n }}\n />\n </Popover>\n </div>\n );\n}\n\nexport interface DateRangeValue {\n start: IsoDate;\n end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n value?: DateRangeValue;\n defaultValue?: DateRangeValue;\n onValueChange?: (value: DateRangeValue) => void;\n size?: FieldSize;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n startLabel?: string;\n endLabel?: string;\n className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n value,\n defaultValue = { start: \"\", end: \"\" },\n onValueChange,\n size = \"md\",\n min,\n max,\n isDisabled = false,\n startLabel = \"Start date\",\n endLabel = \"End date\",\n className,\n}: DateRangeFieldProps) {\n const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n const current = value ?? internal;\n\n const commit = (next: DateRangeValue) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"ds-daterange\", className)}>\n <DateField\n aria-label={startLabel}\n size={size}\n value={current.start}\n min={min}\n max={current.end || max}\n isDisabled={isDisabled}\n placeholder={startLabel}\n onValueChange={(next) => commit({ ...current, start: next })}\n />\n <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n –\n </span>\n <DateField\n aria-label={endLabel}\n size={size}\n value={current.end}\n min={current.start || min}\n max={max}\n isDisabled={isDisabled}\n placeholder={endLabel}\n onValueChange={(next) => commit({ ...current, end: next })}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["Icon","cx","parts","WEEKDAYS","toIso","month","date","day","fromIso","value","year","formatIsoDate","monthLabel","startOfGrid","first","weekday","dayVariant","isEdge","inRange","isToday","Calendar","forwardRef","rest","selected","setMonth","useState","focused","setFocused","gridRef","useRef","shouldFocus","useEffect","next","days","start","index","today","changeMonth","delta","move","base","deltaDays","onKeyDown","event","className","Button","rowIndex","iso","isOutside","isDisabled","min","max","endValue","onSelect","DateField","ariaInvalid","internal","setInternal","defaultValue","current","isOpen","setOpen","rootRef","triggerRef","panelRef","generatedId","useId","triggerId","id","onPointerDown","target","isInvalid","open","placeholder","Popover","onValueChange","DateRangeField","commit","startLabel","endLabel"],"sources":["../../../src/components/DatePicker/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useId,\n useRef,\n useState,\n type HTMLAttributes,\n type AriaAttributes,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Popover } from \"../Popover\";\nimport type { FieldSize } from \"../Field\";\nimport \"../Field/style.css\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\n/** ISO calendar date, \"YYYY-MM-DD\" — the only date shape the system passes around. */\nexport type IsoDate = string;\n\nconst WEEKDAYS = [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"];\n\nfunction toIso(date: Date): IsoDate {\n const month = `${date.getMonth() + 1}`.padStart(2, \"0\");\n const day = `${date.getDate()}`.padStart(2, \"0\");\n return `${date.getFullYear()}-${month}-${day}`;\n}\n\nfunction fromIso(value: string | undefined): Date | null {\n if (!value || !/^\\d{4}-\\d{2}-\\d{2}$/.test(value)) return null;\n const [year, month, day] = value.split(\"-\").map(Number);\n if (!year || !month || !day) return null;\n const date = new Date(year, month - 1, day);\n return Number.isNaN(date.getTime()) || toIso(date) !== value ? null : date;\n}\n\n/** \"12 March 2026\" — the system's one long date format. */\nexport function formatIsoDate(value: string | undefined): string {\n const date = fromIso(value);\n if (!date) return \"\";\n return date.toLocaleDateString(\"en-GB\", { day: \"numeric\", month: \"long\", year: \"numeric\" });\n}\n\nfunction monthLabel(date: Date) {\n return date.toLocaleDateString(\"en-GB\", { month: \"long\", year: \"numeric\" });\n}\n\nfunction startOfGrid(month: Date) {\n const first = new Date(month.getFullYear(), month.getMonth(), 1);\n const weekday = (first.getDay() + 6) % 7; // Monday-first\n return new Date(first.getFullYear(), first.getMonth(), 1 - weekday);\n}\n\nfunction dayVariant(isEdge: boolean, inRange: boolean, isToday: boolean) {\n if (isEdge) return \"primary\";\n if (inRange) return \"active\";\n return isToday ? \"neutral\" : \"simple\";\n}\n\nexport interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n /** Selected day, or the start of a selected span. */\n value?: IsoDate;\n /** End of a selected span. Set it to put the calendar in range mode. */\n endValue?: IsoDate;\n onSelect?: (value: IsoDate) => void;\n min?: IsoDate;\n max?: IsoDate;\n}\n\n/**\n * A month of days, Monday first. Arrow keys walk the grid; the month follows\n * the focused day, so a whole year is reachable from the keyboard.\n */\nexport const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(\n { value, endValue, onSelect, min, max, className, ...rest },\n ref,\n) {\n const selected = fromIso(value);\n const [month, setMonth] = useState(() => selected ?? new Date());\n const [focused, setFocused] = useState<IsoDate>(() => value ?? toIso(new Date()));\n const gridRef = useRef<HTMLDivElement | null>(null);\n const shouldFocus = useRef(false);\n\n useEffect(() => {\n const next = fromIso(value);\n if (!next) return;\n // Controlled changes intentionally reposition the visible and roving-focus month.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n setFocused(value!);\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n }, [value]);\n\n useEffect(() => {\n if (!shouldFocus.current) return;\n shouldFocus.current = false;\n gridRef.current?.querySelector<HTMLButtonElement>(\"[data-focused]\")?.focus();\n }, [focused]);\n\n const days = Array.from({ length: 42 }, (_, index) => {\n const start = startOfGrid(month);\n return new Date(start.getFullYear(), start.getMonth(), start.getDate() + index);\n });\n\n const today = toIso(new Date());\n\n const changeMonth = (delta: number) => {\n const next = new Date(month.getFullYear(), month.getMonth() + delta, 1);\n setMonth(next);\n setFocused(toIso(next));\n };\n\n const move = (deltaDays: number) => {\n const base = fromIso(focused) ?? new Date();\n const next = new Date(base.getFullYear(), base.getMonth(), base.getDate() + deltaDays);\n shouldFocus.current = true;\n setFocused(toIso(next));\n setMonth(new Date(next.getFullYear(), next.getMonth(), 1));\n };\n\n const onKeyDown = (event: React.KeyboardEvent) => {\n const steps: Record<string, number> = {\n ArrowLeft: -1,\n ArrowRight: 1,\n ArrowUp: -7,\n ArrowDown: 7,\n PageUp: -28,\n PageDown: 28,\n };\n const delta = steps[event.key];\n if (delta === undefined) return;\n event.preventDefault();\n move(delta);\n };\n\n return (\n <div ref={ref} className={cx(\"ds-calendar\", className)} {...rest}>\n <div className=\"ds-calendar__head\">\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-left\"\n aria-label=\"Previous month\"\n onClick={() => changeMonth(-1)}\n />\n <span className=\"ds-calendar__month\">{monthLabel(month)}</span>\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"chevron-right\"\n aria-label=\"Next month\"\n onClick={() => changeMonth(1)}\n />\n </div>\n <div className=\"ds-calendar__weekdays\" aria-hidden=\"true\">\n {WEEKDAYS.map((day) => (\n <span key={day}>{day.slice(0, 2)}</span>\n ))}\n </div>\n <div ref={gridRef} className=\"ds-calendar__grid\" role=\"grid\" onKeyDown={onKeyDown}>\n {Array.from({ length: 6 }, (_, rowIndex) => (\n <div role=\"row\" className=\"ds-calendar__row\" key={rowIndex}>\n {days.slice(rowIndex * 7, rowIndex * 7 + 7).map((day) => {\n const iso = toIso(day);\n const isOutside = day.getMonth() !== month.getMonth();\n const isDisabled = (min && iso < min) || (max && iso > max);\n const inRange = Boolean(value && endValue && iso > value && iso < endValue);\n const isEdge = iso === value || iso === endValue;\n return (\n <Button\n key={iso}\n variant={dayVariant(isEdge, inRange, iso === today)}\n size=\"sm\"\n isIconOnly\n role=\"gridcell\"\n aria-label={formatIsoDate(iso)}\n tabIndex={iso === focused ? 0 : -1}\n isDisabled={Boolean(isDisabled)}\n aria-selected={isEdge || undefined}\n data-outside={isOutside || undefined}\n data-today={iso === today || undefined}\n data-in-range={inRange || undefined}\n data-focused={iso === focused || undefined}\n className=\"ds-calendar__day\"\n onClick={() => {\n setFocused(iso);\n onSelect?.(iso);\n }}\n >\n {day.getDate()}\n </Button>\n );\n })}\n </div>\n ))}\n </div>\n </div>\n );\n});\n\nexport interface DateFieldProps {\n value?: IsoDate;\n defaultValue?: IsoDate;\n onValueChange?: (value: IsoDate) => void;\n size?: FieldSize;\n placeholder?: string;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n isInvalid?: boolean;\n id?: string;\n className?: string;\n \"aria-label\"?: string;\n \"aria-describedby\"?: string;\n \"aria-invalid\"?: AriaAttributes[\"aria-invalid\"];\n}\n\n/** One day, picked from a calendar. The field prints the long date, never a mask. */\nexport function DateField({\n value,\n defaultValue = \"\",\n onValueChange,\n size = \"md\",\n placeholder = \"Pick a date\",\n min,\n max,\n isDisabled = false,\n isInvalid = false,\n \"aria-invalid\": ariaInvalid,\n id,\n className,\n ...rest\n}: DateFieldProps) {\n const [internal, setInternal] = useState<IsoDate>(defaultValue);\n const current = value ?? internal;\n const [isOpen, setOpen] = useState(false);\n const rootRef = useRef<HTMLDivElement | null>(null);\n const triggerRef = useRef<HTMLButtonElement | null>(null);\n const panelRef = useRef<HTMLDivElement | null>(null);\n const generatedId = useId();\n const triggerId = id ?? generatedId;\n\n useEffect(() => {\n if (!isOpen) return;\n const onPointerDown = (event: MouseEvent) => {\n const target = event.target as Node;\n if (!rootRef.current?.contains(target) && !panelRef.current?.contains(target)) setOpen(false);\n };\n const onKeyDown = (event: KeyboardEvent) => {\n if (event.key === \"Escape\") {\n event.preventDefault();\n setOpen(false);\n triggerRef.current?.focus();\n }\n };\n document.addEventListener(\"mousedown\", onPointerDown);\n document.addEventListener(\"keydown\", onKeyDown);\n return () => {\n document.removeEventListener(\"mousedown\", onPointerDown);\n document.removeEventListener(\"keydown\", onKeyDown);\n };\n }, [isOpen]);\n\n return (\n <div className={cx(\"ds-datefield\", className)} ref={rootRef}>\n <Button\n {...rest}\n ref={triggerRef}\n id={triggerId}\n size={size}\n aria-haspopup=\"dialog\"\n aria-expanded={isOpen}\n aria-invalid={isInvalid || ariaInvalid || undefined}\n isDisabled={isDisabled}\n data-placeholder={current ? undefined : \"\"}\n className=\"ds-field-skin ds-datefield__control\"\n onClick={() => setOpen((open) => !open)}\n >\n <span className=\"ds-datefield__value\">{current ? formatIsoDate(current) : placeholder}</span>\n <Icon name=\"calendar\" size={16} className=\"ds-datefield__glyph\" />\n </Button>\n <Popover\n anchorRef={triggerRef}\n anchorId={triggerId}\n isOpen={isOpen}\n panelRef={panelRef}\n className=\"ds-datefield__popover\"\n role=\"dialog\"\n aria-label=\"Choose a date\"\n >\n <Calendar\n value={current}\n min={min}\n max={max}\n onSelect={(next) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n setOpen(false);\n triggerRef.current?.focus();\n }}\n />\n </Popover>\n </div>\n );\n}\n\nexport interface DateRangeValue {\n start: IsoDate;\n end: IsoDate;\n}\n\nexport interface DateRangeFieldProps {\n value?: DateRangeValue;\n defaultValue?: DateRangeValue;\n onValueChange?: (value: DateRangeValue) => void;\n size?: FieldSize;\n min?: IsoDate;\n max?: IsoDate;\n isDisabled?: boolean;\n startLabel?: string;\n endLabel?: string;\n className?: string;\n}\n\n/** A span of days. The end field never offers a day before the start. */\nexport function DateRangeField({\n value,\n defaultValue = { start: \"\", end: \"\" },\n onValueChange,\n size = \"md\",\n min,\n max,\n isDisabled = false,\n startLabel = \"Start date\",\n endLabel = \"End date\",\n className,\n}: DateRangeFieldProps) {\n const [internal, setInternal] = useState<DateRangeValue>(defaultValue);\n const current = value ?? internal;\n\n const commit = (next: DateRangeValue) => {\n if (value === undefined) setInternal(next);\n onValueChange?.(next);\n };\n\n return (\n <div className={cx(\"ds-daterange\", className)}>\n <DateField\n aria-label={startLabel}\n size={size}\n value={current.start}\n min={min}\n max={current.end || max}\n isDisabled={isDisabled}\n placeholder={startLabel}\n onValueChange={(next) => commit({ ...current, start: next })}\n />\n <span className=\"ds-daterange__dash\" aria-hidden=\"true\">\n –\n </span>\n <DateField\n aria-label={endLabel}\n size={size}\n value={current.end}\n min={current.start || min}\n max={max}\n isDisabled={isDisabled}\n placeholder={endLabel}\n onValueChange={(next) => commit({ ...current, end: next })}\n />\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs");let
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../../chunks/mergeRefs-Bc3qS0Tt.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");function a(e,t,r){let[i,a]=(0,n.useState)(e),[o,s]=(0,n.useState)(!1);return i!==e&&(a(e),s(!e&&t)),(0,n.useEffect)(()=>{if(!o||e)return;let t=getComputedStyle(r.current).transitionDuration.split(`,`),n=Math.max(0,...t.map(e=>parseFloat(e)*(e.trim().endsWith(`ms`)?1:1e3)||0)),i=window.setTimeout(()=>s(!1),n);return()=>window.clearTimeout(i)},[o,e,r]),[o,s]}var o=(0,n.forwardRef)(function({isOpen:o,onClose:s,title:c,description:l,side:u=`end`,size:d=`md`,variant:f=`default`,closeLabel:p=`Close`,portalContainer:m,footer:h,className:g,children:_,...v},y){let b=(0,n.useRef)(null),x=(0,n.useRef)(null),S=(0,n.useRef)(null),C=(0,n.useRef)(s),w=(0,n.useId)(),T=(0,n.useId)(),[E,D]=a(o,f===`navigation`,x);return(0,n.useEffect)(()=>{C.current=s},[s]),(0,n.useEffect)(()=>{if(!o)return;let e=document.activeElement,t=f===`navigation`?{preventScroll:!0}:void 0,n=`:is(button, [href], input, select, textarea, [tabindex]):not(:disabled):not([tabindex='-1'])`;((f===`navigation`?S.current:b.current?.querySelector(n))??b.current)?.focus(t);let r=e=>{if(e.key===`Escape`){if(e.defaultPrevented)return;e.preventDefault(),C.current();return}if(e.key!==`Tab`)return;let t=Array.from(b.current?.querySelectorAll(n)??[]);if(t.length===0)return;let r=t[0],i=t[t.length-1];e.shiftKey&&(document.activeElement===r||!b.current?.contains(document.activeElement))?(e.preventDefault(),i.focus()):!e.shiftKey&&(document.activeElement===i||!b.current?.contains(document.activeElement))&&(e.preventDefault(),r.focus())};window.addEventListener(`keydown`,r);let i=document.body.style.overflow;return document.body.style.overflow=`hidden`,()=>{window.removeEventListener(`keydown`,r),document.body.style.overflow=i,e?.focus(t)}},[o,f,m]),!o&&!E||typeof document>`u`?null:(0,r.createPortal)((0,i.jsx)(`div`,{ref:e=>{x.current=e,e&&(e.inert=!o)},className:`ds-drawer-scrim`,"data-side":u,"data-variant":f,"data-contained":m?``:void 0,"data-state":o?`open`:`closed`,"aria-hidden":!o||void 0,onTransitionEnd:e=>{e.target===e.currentTarget&&e.propertyName===`opacity`&&!o&&D(!1)},onMouseDown:e=>o&&e.target===e.currentTarget&&C.current(),children:(0,i.jsxs)(`div`,{...v,ref:t.t(b,y),role:`dialog`,"aria-modal":`true`,"aria-labelledby":v[`aria-label`]?void 0:v[`aria-labelledby`]??w,"aria-describedby":l?T:void 0,tabIndex:-1,"data-side":u,"data-size":d,"data-variant":f,className:[`ds-drawer`,g].filter(Boolean).join(` `),children:[(0,i.jsxs)(`header`,{className:`ds-drawer__head`,children:[(0,i.jsxs)(`div`,{className:`ds-drawer__titles`,children:[(0,i.jsx)(`h2`,{id:w,className:`ds-drawer__title`,children:c}),l&&(0,i.jsx)(`p`,{id:T,className:`ds-drawer__description`,children:l})]}),(0,i.jsx)(e.Button,{ref:S,variant:`simple`,size:f===`navigation`?`lg`:`sm`,isIconOnly:!0,iconStart:`x`,className:f===`navigation`?`ds-drawer__close`:void 0,"aria-label":p,onClick:()=>C.current()})]}),(0,i.jsx)(`div`,{className:`ds-drawer__body`,children:_}),h&&(0,i.jsx)(`footer`,{className:`ds-drawer__footer`,children:h})]})}),m??document.body)});exports.Drawer=o;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useId","useState","createPortal","Button","require_components_Button_index","react","react_dom","react_jsx_runtime","Drawer","rest","panelRef","scrimRef","closeRef","onCloseRef","onClose","titleId","descriptionId","previousOpen","setPreviousOpen","isOpen","exiting","setExiting","variant","durations","duration","value","timeout","previous","focusOptions","selector","onKeyDown","event","focusable","first","last","overflow","portalContainer","node","side","ref","description","size","className","title","closeLabel","footer"],"sources":["../../../src/components/Drawer/index.tsx"],"sourcesContent":["import { forwardRef, useEffect, useId, useRef, useState, 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: 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\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 [previousOpen, setPreviousOpen] = useState(isOpen);\n const [exiting, setExiting] = useState(false);\n\n if (previousOpen !== isOpen) {\n setPreviousOpen(isOpen);\n setExiting(!isOpen && variant === \"navigation\");\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]);\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={(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={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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"}
|
|
1
|
+
{"version":3,"file":"index.cjs","names":["useState","forwardRef","useRef","useId","createPortal","mergeRefs","Button","require_components_Button_index","require_mergeRefs","react","react_dom","react_jsx_runtime","useDrawerExit","previousOpen","setPreviousOpen","isOpen","exiting","setExiting","animated","durations","scrimRef","duration","value","timeout","Drawer","rest","panelRef","closeRef","onCloseRef","onClose","titleId","descriptionId","variant","previous","focusOptions","selector","onKeyDown","event","focusable","first","last","overflow","portalContainer","node","side","ref","description","size","className","title","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":"A,wOAgCA,SAASY,EAAc,EAAiB,EAAmB,EAA4C,CACrG,GAAM,CAACC,EAAcC,IAAA,EAAmBd,EAAAA,SAAAA,CAASe,CAAM,EACjD,CAACC,EAASC,IAAA,EAAcjB,EAAAA,SAAAA,CAAS,EAAK,EAkB5C,OAhBIa,IAAiBE,IACnBD,EAAgBC,CAAM,EACtBE,EAAW,CAACF,GAAUG,CAAQ,IAGhC,EAAAT,EAAA,UAAA,KAAgB,CACd,GAAI,CAACO,GAAWD,EAAQ,OAExB,IAAMI,EAAY,iBAAiBC,EAAS,OAAQ,CAAC,CAAC,mBAAmB,MAAM,GAAG,EAC5EC,EAAW,KAAK,IAAI,EAAG,GAAGF,EAAU,IAAK,GAC7C,WAAWG,CAAK,GAAKA,EAAM,KAAK,CAAC,CAAC,SAAS,IAAI,EAAI,EAAI,MAAS,CAClE,CAAC,EACKC,EAAU,OAAO,eAAiBN,EAAW,EAAK,EAAGI,CAAQ,EACnE,UAAa,OAAO,aAAaE,CAAO,CAC1C,EAAG,CAACP,EAASD,EAAQK,CAAQ,CAAC,EAEvB,CAACJ,EAASC,CAAU,CAC7B,CAOA,IAAaO,GAAA,EAASvB,EAAAA,WAAAA,CAAwC,SAC5D,CACE,SACA,UACA,QACA,cACA,OAAO,MACP,OAAO,KACP,UAAU,UACV,aAAa,QACb,kBACA,SACA,YACA,WACA,GAAGwB,GAEL,EACA,CACA,IAAMC,GAAA,EAAWxB,EAAAA,OAAAA,CAA8B,IAAI,EAC7CkB,GAAA,EAAWlB,EAAAA,OAAAA,CAA8B,IAAI,EAC7CyB,GAAA,EAAWzB,EAAAA,OAAAA,CAAiC,IAAI,EAChD0B,GAAA,EAAa1B,EAAAA,OAAAA,CAAO2B,CAAO,EAC3BC,GAAA,EAAU3B,EAAAA,MAAAA,CAAM,EAChB4B,GAAA,EAAgB5B,EAAAA,MAAAA,CAAM,EACtB,CAACa,EAASC,GAAcL,EAAcG,EAAQiB,IAAY,aAAcZ,CAAQ,EAwDtF,OAtDA,EAAAX,EAAA,UAAA,KAAgB,CACd,EAAW,QAAUoB,CACvB,EAAG,CAACA,CAAO,CAAC,GAEZ,EAAApB,EAAA,UAAA,KAAgB,CACd,GAAI,CAACM,EAAQ,OAEb,IAAMkB,EAAW,SAAS,cAEpBC,EAAeF,IAAY,aAAe,CAAE,cAAe,EAAK,EAAI,IAAA,GACpEG,EAAW,iGACIH,IAAY,aAAeL,EAAS,QAAUD,EAAS,SAAS,cAA2BS,CAAQ,IACvGT,EAAS,QAAA,EAAU,MAAMQ,CAAY,EAEtD,IAAME,EAAa,GAAyB,CAC1C,GAAIC,EAAM,MAAQ,SAAU,CAE1B,GAAIA,EAAM,iBAAkB,OAC5BA,EAAM,eAAe,EACrBT,EAAW,QAAQ,EACnB,MACF,CACA,GAAIS,EAAM,MAAQ,MAAO,OACzB,IAAMC,EAAY,MAAM,KACtBZ,EAAS,SAAS,iBAChBS,CACF,GAAK,CAAC,CACR,EACA,GAAIG,EAAU,SAAW,EAAG,OAC5B,IAAMC,EAAQD,EAAU,GAClBE,EAAOF,EAAUA,EAAU,OAAS,GACtCD,EAAM,WAAa,SAAS,gBAAkBE,GAAS,CAACb,EAAS,SAAS,SAAS,SAAS,aAAa,IAC3GW,EAAM,eAAe,EACrBG,EAAK,MAAM,GACF,CAACH,EAAM,WAAa,SAAS,gBAAkBG,GAAQ,CAACd,EAAS,SAAS,SAAS,SAAS,aAAa,KAClHW,EAAM,eAAe,EACrBE,EAAM,MAAM,EAEhB,EAGA,OAAO,iBAAiB,UAAWH,CAAS,EAC5C,IAAMK,EAAW,SAAS,KAAK,MAAM,SAGrC,MAFA,UAAS,KAAK,MAAM,SAAW,aAElB,CACX,OAAO,oBAAoB,UAAWL,CAAS,EAC/C,SAAS,KAAK,MAAM,SAAWK,EAC/BR,GAAU,MAAMC,CAAY,CAC9B,CACF,EAAG,CAACnB,EAAQiB,EAASU,CAAe,CAAC,EAEhC,CAAC3B,GAAU,CAACC,GAAY,OAAO,SAAa,IAAoB,MAErE,EAAOZ,EAAAA,aAAAA,EACL,EAAAO,EAAA,IAAA,CAAC,MAAD,CACE,IAAM,GAAS,CACb,EAAS,QAAUgC,EACfA,IAAM,EAAK,MAAQ,CAAC5B,EAC1B,EACA,UAAU,kBACV,YAAW6B,EACX,eAAcZ,EACd,iBAAgBU,EAAkB,GAAK,IAAA,GACvC,aAAY3B,EAAS,OAAS,SAC9B,cAAa,CAACA,GAAU,IAAA,GACxB,gBAAkB,GAAU,CACtBsB,EAAM,SAAWA,EAAM,eAAiBA,EAAM,eAAiB,WAAa,CAACtB,GAAQE,EAAW,EAAK,CAC3G,EACA,YAAc,GAAUF,GAAUsB,EAAM,SAAWA,EAAM,eAAiBT,EAAW,QAAQ,EAE7F,UAAA,EAAAjB,EAAA,KAAA,CAAC,MAAD,CACE,GAAIc,EACJ,IAAKpB,EAAAA,EAAUqB,EAAUmB,CAAG,EAC5B,KAAK,SACL,aAAW,OACX,kBAAiBpB,EAAK,cAAgB,IAAA,GAAaA,EAAK,oBAAsBK,EAC9E,mBAAkBgB,EAAcf,EAAgB,IAAA,GAChD,SAAU,GACV,YAAWa,EACX,YAAWG,EACX,eAAcf,EACd,UAAW,CAAC,YAAagB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAX9D,SAAA,EAaE,EAAArC,EAAA,KAAA,CAAC,SAAD,CAAQ,UAAU,kBAAlB,SAAA,EACE,EAAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,oBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,KAAD,CAAI,GAAImB,EAAS,UAAU,mBACxB,SAAAmB,CACC,CAAA,EACHH,IACC,EAAAnC,EAAA,IAAA,CAAC,IAAD,CAAG,GAAIoB,EAAe,UAAU,yBAC7B,SAAAe,CACA,CAAA,CAEF,CACL,CAAA,GAAA,EAAAnC,EAAA,IAAA,CAACL,EAAAA,OAAD,CACE,IAAKqB,EACL,QAAQ,SACR,KAAMK,IAAY,aAAe,KAAO,KACxC,WAAA,GACA,UAAU,IACV,UAAWA,IAAY,aAAe,mBAAqB,IAAA,GAC3D,aAAYkB,EACZ,YAAetB,EAAW,QAAQ,CACnC,CAAA,CACK,C,IACR,EAAAjB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,kBAAmB,UAAc,CAAA,EAC/CwC,IAAU,EAAAxC,EAAA,IAAA,CAAC,SAAD,CAAQ,UAAU,oBAAqB,SAAAwC,CAAe,CAAA,CAC9D,C,EACF,CAAA,EACLT,GAAmB,SAAS,IAC9B,CACF,CAAC,E"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,cAAc,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,cAAc,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAI5H,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChF,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACnC,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAyBD;;;;GAIG;AACH,eAAO,MAAM,MAAM,wGA0IjB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,cAAc,EAAE,KAAK,SAAS,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkD,KAAK,cAAc,EAAE,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAI5H,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvC,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChF,MAAM,EAAE,OAAO,CAAC;IAChB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qEAAqE;IACrE,OAAO,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;IACnC,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAyBD;;;;GAIG;AACH,eAAO,MAAM,MAAM,wGA0IjB,CAAC"}
|
|
@@ -1,107 +1,114 @@
|
|
|
1
1
|
import { Button as e } from "../Button/index.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
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
|
+
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
|
-
if (!
|
|
10
|
-
let
|
|
11
|
-
return () => window.clearTimeout(
|
|
12
|
-
}, [
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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);
|
|
18
27
|
let i = (e) => {
|
|
19
28
|
if (e.key === "Escape") {
|
|
20
29
|
if (e.defaultPrevented) return;
|
|
21
|
-
e.preventDefault(),
|
|
30
|
+
e.preventDefault(), E.current();
|
|
22
31
|
return;
|
|
23
32
|
}
|
|
24
33
|
if (e.key !== "Tab") return;
|
|
25
|
-
let t = Array.from(
|
|
34
|
+
let t = Array.from(C.current?.querySelectorAll(r) ?? []);
|
|
26
35
|
if (t.length === 0) return;
|
|
27
36
|
let n = t[0], i = t[t.length - 1];
|
|
28
|
-
e.shiftKey && (document.activeElement === n || !
|
|
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());
|
|
29
38
|
};
|
|
30
39
|
window.addEventListener("keydown", i);
|
|
31
40
|
let a = document.body.style.overflow;
|
|
32
41
|
return document.body.style.overflow = "hidden", () => {
|
|
33
|
-
window.removeEventListener("keydown", i), document.body.style.overflow = a, e?.focus(
|
|
42
|
+
window.removeEventListener("keydown", i), document.body.style.overflow = a, e?.focus(t);
|
|
34
43
|
};
|
|
35
44
|
}, [
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
]), !
|
|
45
|
+
n,
|
|
46
|
+
h,
|
|
47
|
+
_
|
|
48
|
+
]), !n && !k || typeof document > "u" ? null : s(/* @__PURE__ */ c("div", {
|
|
40
49
|
ref: (e) => {
|
|
41
|
-
|
|
50
|
+
w.current = e, e && (e.inert = !n);
|
|
42
51
|
},
|
|
43
52
|
className: "ds-drawer-scrim",
|
|
44
|
-
"data-side":
|
|
45
|
-
"data-variant":
|
|
46
|
-
"data-contained":
|
|
47
|
-
"data-state":
|
|
48
|
-
"aria-hidden": !
|
|
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,
|
|
49
58
|
onTransitionEnd: (e) => {
|
|
50
|
-
e.target === e.currentTarget && e.propertyName === "opacity" && !
|
|
59
|
+
e.target === e.currentTarget && e.propertyName === "opacity" && !n && A(!1);
|
|
51
60
|
},
|
|
52
|
-
onMouseDown: (e) =>
|
|
53
|
-
children: /* @__PURE__ */
|
|
54
|
-
...
|
|
55
|
-
ref: (
|
|
56
|
-
S.current = e, typeof x == "function" ? x(e) : x && (x.current = e);
|
|
57
|
-
},
|
|
61
|
+
onMouseDown: (e) => n && e.target === e.currentTarget && E.current(),
|
|
62
|
+
children: /* @__PURE__ */ l("div", {
|
|
63
|
+
...x,
|
|
64
|
+
ref: t(C, S),
|
|
58
65
|
role: "dialog",
|
|
59
66
|
"aria-modal": "true",
|
|
60
|
-
"aria-labelledby":
|
|
61
|
-
"aria-describedby":
|
|
67
|
+
"aria-labelledby": x["aria-label"] ? void 0 : x["aria-labelledby"] ?? D,
|
|
68
|
+
"aria-describedby": f ? O : void 0,
|
|
62
69
|
tabIndex: -1,
|
|
63
|
-
"data-side":
|
|
64
|
-
"data-size":
|
|
65
|
-
"data-variant":
|
|
66
|
-
className: ["ds-drawer",
|
|
70
|
+
"data-side": p,
|
|
71
|
+
"data-size": m,
|
|
72
|
+
"data-variant": h,
|
|
73
|
+
className: ["ds-drawer", y].filter(Boolean).join(" "),
|
|
67
74
|
children: [
|
|
68
|
-
/* @__PURE__ */
|
|
75
|
+
/* @__PURE__ */ l("header", {
|
|
69
76
|
className: "ds-drawer__head",
|
|
70
|
-
children: [/* @__PURE__ */
|
|
77
|
+
children: [/* @__PURE__ */ l("div", {
|
|
71
78
|
className: "ds-drawer__titles",
|
|
72
|
-
children: [/* @__PURE__ */
|
|
73
|
-
id: E,
|
|
74
|
-
className: "ds-drawer__title",
|
|
75
|
-
children: u
|
|
76
|
-
}), d && /* @__PURE__ */ s("p", {
|
|
79
|
+
children: [/* @__PURE__ */ c("h2", {
|
|
77
80
|
id: D,
|
|
78
|
-
className: "ds-
|
|
81
|
+
className: "ds-drawer__title",
|
|
79
82
|
children: d
|
|
83
|
+
}), f && /* @__PURE__ */ c("p", {
|
|
84
|
+
id: O,
|
|
85
|
+
className: "ds-drawer__description",
|
|
86
|
+
children: f
|
|
80
87
|
})]
|
|
81
|
-
}), /* @__PURE__ */
|
|
82
|
-
ref:
|
|
88
|
+
}), /* @__PURE__ */ c(e, {
|
|
89
|
+
ref: T,
|
|
83
90
|
variant: "simple",
|
|
84
|
-
size:
|
|
91
|
+
size: h === "navigation" ? "lg" : "sm",
|
|
85
92
|
isIconOnly: !0,
|
|
86
93
|
iconStart: "x",
|
|
87
|
-
className:
|
|
88
|
-
"aria-label":
|
|
89
|
-
onClick: () =>
|
|
94
|
+
className: h === "navigation" ? "ds-drawer__close" : void 0,
|
|
95
|
+
"aria-label": g,
|
|
96
|
+
onClick: () => E.current()
|
|
90
97
|
})]
|
|
91
98
|
}),
|
|
92
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ c("div", {
|
|
93
100
|
className: "ds-drawer__body",
|
|
94
|
-
children:
|
|
101
|
+
children: b
|
|
95
102
|
}),
|
|
96
|
-
|
|
103
|
+
v && /* @__PURE__ */ c("footer", {
|
|
97
104
|
className: "ds-drawer__footer",
|
|
98
|
-
children:
|
|
105
|
+
children: v
|
|
99
106
|
})
|
|
100
107
|
]
|
|
101
108
|
})
|
|
102
|
-
}),
|
|
109
|
+
}), _ ?? document.body);
|
|
103
110
|
});
|
|
104
111
|
//#endregion
|
|
105
|
-
export {
|
|
112
|
+
export { d as Drawer };
|
|
106
113
|
|
|
107
114
|
//# sourceMappingURL=index.js.map
|