@box-kite/react 2.2.7 → 2.2.9
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/BOX_AI_CONTEXT.md +76 -0
- package/BOX_KITE_AI_CONTEXT.md +76 -0
- package/analytics.cjs +1 -0
- package/analytics.d.ts +10 -0
- package/analytics.mjs +121 -0
- package/behavior.cjs +1 -1
- package/behavior.mjs +42 -38
- package/box.cjs +1 -1
- package/box.d.ts +9 -0
- package/box.mjs +17 -16
- package/catalog.cjs +1 -1
- package/catalog.mjs +8 -0
- package/client.cjs +1 -1
- package/client.mjs +120 -120
- package/components/accordion.cjs +1 -1
- package/components/accordion.mjs +19 -10
- package/components/agent.cjs +1 -1
- package/components/agent.mjs +21 -8
- package/components/calendar.cjs +1 -1
- package/components/calendar.d.ts +3 -1
- package/components/calendar.mjs +154 -142
- package/components/combobox.cjs +1 -1
- package/components/combobox.mjs +184 -174
- package/components/dashboard.cjs +1 -1
- package/components/dashboard.mjs +183 -170
- package/components/dataGrid/models/columnModel.d.ts +1 -0
- package/components/dataGrid/models/gridModel.d.ts +18 -0
- package/components/dataGrid/models/rangeModel.d.ts +3 -0
- package/components/dataGrid.cjs +3 -3
- package/components/dataGrid.mjs +987 -896
- package/components/dateField.cjs +1 -1
- package/components/dateField.mjs +160 -149
- package/components/datePicker.cjs +1 -1
- package/components/datePicker.mjs +226 -206
- package/components/dialog.cjs +1 -1
- package/components/dialog.mjs +38 -33
- package/components/dropdown.cjs +1 -1
- package/components/dropdown.mjs +107 -93
- package/components/form.cjs +1 -1
- package/components/form.mjs +22 -18
- package/components/menu.cjs +1 -1
- package/components/menu.d.ts +2 -0
- package/components/menu.mjs +196 -175
- package/components/overlay.cjs +1 -1
- package/components/overlay.mjs +7 -7
- package/components/popover.cjs +1 -1
- package/components/popover.mjs +4 -0
- package/components/radioGroup.cjs +1 -1
- package/components/radioGroup.mjs +10 -5
- package/components/slider.cjs +1 -1
- package/components/slider.mjs +84 -83
- package/components/sortableList.cjs +1 -1
- package/components/sortableList.mjs +158 -150
- package/components/swipeItem.cjs +1 -1
- package/components/swipeItem.mjs +92 -84
- package/components/tabs.cjs +1 -1
- package/components/tabs.mjs +10 -5
- package/components/timeZoneSelect.cjs +1 -1
- package/components/timeZoneSelect.mjs +40 -35
- package/components/toaster.cjs +1 -1
- package/components/toaster.mjs +151 -113
- package/dataGridDateParts.cjs +1 -1
- package/dataGridDateParts.mjs +56 -55
- package/dataGridList.cjs +1 -1
- package/dataGridList.mjs +430 -429
- package/effects.cjs +1 -1
- package/effects.mjs +1 -1
- package/interactionListening.cjs +1 -0
- package/interactionListening.mjs +117 -0
- package/interactions.cjs +1 -0
- package/interactions.mjs +25 -0
- package/layer.cjs +1 -1
- package/layer.mjs +68 -66
- package/package.json +132 -68
- package/placement.cjs +1 -1
- package/placement.mjs +10 -10
- package/platform.cjs +1 -1
- package/platform.mjs +44 -25
- package/react/interactions/interactions.d.ts +30 -0
- package/react/popover/usePopoverLayer.d.ts +3 -0
- package/react/useStyles.d.ts +8 -1
- package/react-shared.cjs +1 -1
- package/react-shared.mjs +49 -48
- package/reporting.cjs +1 -0
- package/reporting.mjs +51 -0
- package/scrolling.cjs +1 -1
- package/scrolling.mjs +1 -1
- package/supabase/functions/collect/index.d.ts +30 -0
- package/supabase/functions/collect/index.test.d.ts +1 -0
- package/utils/analytics/analytics.d.ts +72 -0
- package/utils/analytics/analyticsIdentity.d.ts +13 -0
- package/utils/interactions/componentAttribute.d.ts +6 -0
- package/utils/interactions/interactionChannel.d.ts +35 -0
- package/utils/interactions/interactionJson.d.ts +6 -0
- package/utils/interactions/interactionListening.d.ts +6 -0
- package/utils/interactions/interactionTypes.d.ts +224 -0
package/client.mjs
CHANGED
|
@@ -1,45 +1,45 @@
|
|
|
1
1
|
import { l as e, u as t } from "./react-shared.mjs";
|
|
2
|
-
import {
|
|
3
|
-
import { t as
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import { applyDesignToElement as
|
|
7
|
-
import { jsx as
|
|
8
|
-
import { flushSync as
|
|
2
|
+
import { f as n, g as r, h as i, t as a } from "./platform.mjs";
|
|
3
|
+
import { t as o } from "./effects.mjs";
|
|
4
|
+
import s from "./box.mjs";
|
|
5
|
+
import c, { useCallback as l, useContext as u, useEffect as d, useLayoutEffect as f, useMemo as p, useRef as m, useState as h } from "react";
|
|
6
|
+
import { applyDesignToElement as g, applyThemeToElement as _, clearStoredTheme as v, defaultThemeName as y, documentRoot as b, getDefaultEngine as x, getSystemTheme as S, pauseTransitions as C, prepareReveal as w, readStoredTheme as T, transitionTheme as E, watchSystemTheme as D, writeStoredTheme as O } from "@box-kite/core";
|
|
7
|
+
import { jsx as k, jsxs as A } from "react/jsx-runtime";
|
|
8
|
+
import { flushSync as j } from "react-dom";
|
|
9
9
|
//#region src/react/clientRuntime.ts
|
|
10
|
-
var
|
|
11
|
-
function
|
|
12
|
-
if (typeof e.createContext != "function") throw Error(
|
|
10
|
+
var M = "[box-kite] The client build was loaded into a React Server Component graph, where React has no createContext. Import '@box-kite/react' by its package name — the react-server condition resolves it to a Box that renders on the server — and import the components that hold state (Dropdown, Tooltip, DataGrid, Checkbox, Select, Form) from a 'use client' module. See https://github.com/box-kite/box-kite#react-server-components-react-19";
|
|
11
|
+
function N(e) {
|
|
12
|
+
if (typeof e.createContext != "function") throw Error(M);
|
|
13
13
|
}
|
|
14
14
|
//#endregion
|
|
15
15
|
//#region src/react/componentsContext.ts
|
|
16
|
-
|
|
17
|
-
var
|
|
16
|
+
N(c);
|
|
17
|
+
var P = c.createContext(void 0);
|
|
18
18
|
//#endregion
|
|
19
19
|
//#region src/react/componentsProvider.tsx
|
|
20
|
-
function
|
|
21
|
-
return /* @__PURE__ */
|
|
20
|
+
function F({ value: e, children: t }) {
|
|
21
|
+
return /* @__PURE__ */ k(P.Provider, {
|
|
22
22
|
value: e,
|
|
23
23
|
children: t
|
|
24
24
|
});
|
|
25
25
|
}
|
|
26
26
|
//#endregion
|
|
27
27
|
//#region src/react/hooks/useVisibility.ts
|
|
28
|
-
function
|
|
29
|
-
let { node: t = null, event:
|
|
30
|
-
return
|
|
28
|
+
function I(e) {
|
|
29
|
+
let { node: t = null, event: r = "click", hideOnScroll: i = !1, hideOnResize: a = !1, hideOnEscape: o = !0 } = e ?? {}, [s, c] = h(!1), l = m(null);
|
|
30
|
+
return d(() => {
|
|
31
31
|
function e(e) {
|
|
32
|
-
let
|
|
33
|
-
|
|
32
|
+
let r = t ?? l.current;
|
|
33
|
+
r && !n(e, [r]) && c(!1);
|
|
34
34
|
}
|
|
35
|
-
function
|
|
35
|
+
function u() {
|
|
36
36
|
c(!1);
|
|
37
37
|
}
|
|
38
38
|
function d(e) {
|
|
39
39
|
e.key === "Escape" && c(!1);
|
|
40
40
|
}
|
|
41
41
|
let f = new AbortController();
|
|
42
|
-
return s && (window.addEventListener(
|
|
42
|
+
return s && (window.addEventListener(r, e, f), o && window.addEventListener("keydown", d, f), a && window.addEventListener("resize", u, f), i && window.addEventListener("scroll", e, {
|
|
43
43
|
signal: f.signal,
|
|
44
44
|
capture: !0
|
|
45
45
|
})), () => {
|
|
@@ -48,178 +48,178 @@ function N(e) {
|
|
|
48
48
|
}, [
|
|
49
49
|
t,
|
|
50
50
|
s,
|
|
51
|
-
|
|
51
|
+
r,
|
|
52
52
|
o,
|
|
53
53
|
a,
|
|
54
54
|
i
|
|
55
55
|
]), [
|
|
56
56
|
s,
|
|
57
57
|
c,
|
|
58
|
-
|
|
58
|
+
l
|
|
59
59
|
];
|
|
60
60
|
}
|
|
61
61
|
//#endregion
|
|
62
62
|
//#region src/react/useStyles.ts
|
|
63
|
-
var
|
|
64
|
-
function
|
|
65
|
-
let { classNames: r, signature: i, styleElements: a } = e(t, n,
|
|
66
|
-
return
|
|
67
|
-
|
|
63
|
+
var L = o;
|
|
64
|
+
function R(t, n) {
|
|
65
|
+
let { classNames: r, signature: i, styleElements: a } = e(t, n, u(P));
|
|
66
|
+
return L(() => {
|
|
67
|
+
x().flushSync();
|
|
68
68
|
}, [i ?? t]), {
|
|
69
69
|
classNames: r,
|
|
70
70
|
styleElements: a
|
|
71
71
|
};
|
|
72
72
|
}
|
|
73
|
-
function
|
|
74
|
-
let r = e ?
|
|
75
|
-
return
|
|
76
|
-
|
|
73
|
+
function z(e, n) {
|
|
74
|
+
let r = e ? x().addGlobalStyles(e, n) : void 0;
|
|
75
|
+
return L(() => {
|
|
76
|
+
x().flushSync();
|
|
77
77
|
}, [e, n]), t(r);
|
|
78
78
|
}
|
|
79
|
-
var
|
|
79
|
+
var B;
|
|
80
80
|
//#endregion
|
|
81
81
|
//#region src/react/theme/themeContext.ts
|
|
82
82
|
(function(e) {
|
|
83
83
|
function t() {
|
|
84
|
-
|
|
84
|
+
x().flushSync();
|
|
85
85
|
}
|
|
86
86
|
e.flushSync = t;
|
|
87
87
|
function n() {
|
|
88
|
-
|
|
88
|
+
x().clear();
|
|
89
89
|
}
|
|
90
90
|
e.clear = n;
|
|
91
|
-
function
|
|
92
|
-
return
|
|
91
|
+
function a() {
|
|
92
|
+
return x().getStyles();
|
|
93
93
|
}
|
|
94
|
-
e.getStyles =
|
|
95
|
-
function
|
|
96
|
-
return
|
|
94
|
+
e.getStyles = a;
|
|
95
|
+
function o() {
|
|
96
|
+
return x().getStyleTag();
|
|
97
97
|
}
|
|
98
|
-
e.getStyleTag =
|
|
99
|
-
function
|
|
100
|
-
return
|
|
98
|
+
e.getStyleTag = o;
|
|
99
|
+
function s() {
|
|
100
|
+
return x().styleElementId;
|
|
101
101
|
}
|
|
102
|
-
e.styleElementId =
|
|
103
|
-
function
|
|
104
|
-
|
|
102
|
+
e.styleElementId = s;
|
|
103
|
+
function c({ componentAttribute: e, ...t }) {
|
|
104
|
+
e !== void 0 && r(e), t.warnings !== void 0 && i(t.warnings), Object.keys(t).length > 0 && x().configure(t);
|
|
105
105
|
}
|
|
106
|
-
e.configure =
|
|
107
|
-
})(
|
|
108
|
-
var
|
|
106
|
+
e.configure = c;
|
|
107
|
+
})(B ||= {}), N(c);
|
|
108
|
+
var V = c.createContext({
|
|
109
109
|
theme: "",
|
|
110
110
|
setTheme: () => {},
|
|
111
111
|
setDesign: () => {}
|
|
112
112
|
});
|
|
113
113
|
//#endregion
|
|
114
114
|
//#region src/react/theme/theme.tsx
|
|
115
|
-
function
|
|
116
|
-
let { theme: t, use: n = "local", storageKey: r, globalStyles:
|
|
117
|
-
value:
|
|
115
|
+
function H(e) {
|
|
116
|
+
let { theme: t, use: n = "local", storageKey: r, globalStyles: i, viewTransition: a, components: c, design: u, designStorageKey: x } = e, M = c ? /* @__PURE__ */ k(F, {
|
|
117
|
+
value: c,
|
|
118
118
|
children: e.children
|
|
119
|
-
}) : e.children, N =
|
|
120
|
-
if (!
|
|
121
|
-
let t =
|
|
122
|
-
|
|
123
|
-
}, [
|
|
124
|
-
e === null ? (r &&
|
|
125
|
-
}), [r,
|
|
126
|
-
|
|
127
|
-
let X =
|
|
128
|
-
|
|
119
|
+
}) : e.children, N = z(n === "global" ? i : void 0, "html"), [P, I] = h(t ?? y), [L, R] = h(t !== void 0), B = m(null), H = m(P), U = m(null), W = m(null), G = m(void 0), K = l((e) => {
|
|
120
|
+
if (!a) return e();
|
|
121
|
+
let t = E(() => j(e), a === "reveal" ? "reveal" : "fade");
|
|
122
|
+
G.current = t.finished, t.finished.then(() => G.current = void 0, () => G.current = void 0);
|
|
123
|
+
}, [a]), q = l((e) => K(() => {
|
|
124
|
+
e === null ? (r && v(r), R(!1)) : (r && O(r, e), I(e), R(!0));
|
|
125
|
+
}), [r, K]), [J, Y] = h(u), [ee, te] = h(u);
|
|
126
|
+
u !== ee && (te(u), Y(u));
|
|
127
|
+
let X = l((e) => K(() => {
|
|
128
|
+
W.current ??= C(), x && (e === null ? v : O)(x, e), Y(e ?? u);
|
|
129
129
|
}), [
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
]), Z =
|
|
134
|
-
|
|
135
|
-
let e =
|
|
136
|
-
e && (Z.current = e,
|
|
137
|
-
}, [
|
|
138
|
-
if (Z.current !== null && Z.current !==
|
|
130
|
+
u,
|
|
131
|
+
x,
|
|
132
|
+
K
|
|
133
|
+
]), Z = m(null);
|
|
134
|
+
f(() => {
|
|
135
|
+
let e = x ? T(x) : null;
|
|
136
|
+
e && (Z.current = e, Y(e));
|
|
137
|
+
}, [x]), f(() => {
|
|
138
|
+
if (Z.current !== null && Z.current !== J) return;
|
|
139
139
|
Z.current = null;
|
|
140
|
-
let e = n === "global" &&
|
|
141
|
-
return
|
|
142
|
-
}, [
|
|
143
|
-
let Q =
|
|
144
|
-
|
|
145
|
-
let [ne, re] =
|
|
146
|
-
t !== ne && (re(t), t === void 0 ?
|
|
140
|
+
let e = n === "global" && J ? b() : null, t = e ? g(e, J) : void 0;
|
|
141
|
+
return W.current?.(G.current), W.current = null, t;
|
|
142
|
+
}, [J, n]);
|
|
143
|
+
let Q = a === "reveal";
|
|
144
|
+
d(() => Q ? w() : void 0, [Q]);
|
|
145
|
+
let [ne, re] = h(t);
|
|
146
|
+
t !== ne && (re(t), t === void 0 ? R(!1) : (I(t), R(!0))), f(() => {
|
|
147
147
|
if (L) return;
|
|
148
|
-
let e = r ?
|
|
149
|
-
if (t !==
|
|
150
|
-
|
|
148
|
+
let e = r ? T(r) : null, t = e ?? S();
|
|
149
|
+
if (t !== H.current && (B.current = t), I(t), e) {
|
|
150
|
+
R(!0);
|
|
151
151
|
return;
|
|
152
152
|
}
|
|
153
|
-
return
|
|
154
|
-
}, [L, r]),
|
|
155
|
-
P !==
|
|
156
|
-
}, [P]),
|
|
157
|
-
if (
|
|
153
|
+
return D(I);
|
|
154
|
+
}, [L, r]), o(() => {
|
|
155
|
+
P !== H.current && (U.current ??= C());
|
|
156
|
+
}, [P]), f(() => {
|
|
157
|
+
if (H.current = P, B.current !== null && B.current !== P) return;
|
|
158
158
|
B.current = null;
|
|
159
|
-
let e =
|
|
160
|
-
|
|
161
|
-
let t = n === "global" ?
|
|
162
|
-
return e?.(
|
|
159
|
+
let e = U.current;
|
|
160
|
+
U.current = null;
|
|
161
|
+
let t = n === "global" ? b() : null, r = t ? _(t, P) : void 0;
|
|
162
|
+
return e?.(G.current), r;
|
|
163
163
|
}, [P, n]);
|
|
164
|
-
let $ =
|
|
164
|
+
let $ = p(() => ({
|
|
165
165
|
theme: P,
|
|
166
|
-
setTheme:
|
|
167
|
-
design:
|
|
166
|
+
setTheme: q,
|
|
167
|
+
design: J,
|
|
168
168
|
setDesign: X
|
|
169
169
|
}), [
|
|
170
170
|
P,
|
|
171
|
-
K,
|
|
172
171
|
q,
|
|
172
|
+
J,
|
|
173
173
|
X
|
|
174
174
|
]);
|
|
175
|
-
return n === "local" ? /* @__PURE__ */
|
|
175
|
+
return n === "local" ? /* @__PURE__ */ A(V.Provider, {
|
|
176
176
|
value: $,
|
|
177
|
-
children: [N, /* @__PURE__ */
|
|
177
|
+
children: [N, /* @__PURE__ */ k(s, {
|
|
178
178
|
className: P,
|
|
179
179
|
props: {
|
|
180
180
|
"data-theme": P,
|
|
181
|
-
"data-design":
|
|
181
|
+
"data-design": J
|
|
182
182
|
},
|
|
183
|
-
children:
|
|
183
|
+
children: M
|
|
184
184
|
})]
|
|
185
|
-
}) : /* @__PURE__ */
|
|
185
|
+
}) : /* @__PURE__ */ A(V.Provider, {
|
|
186
186
|
value: $,
|
|
187
|
-
children: [N,
|
|
187
|
+
children: [N, M]
|
|
188
188
|
});
|
|
189
189
|
}
|
|
190
190
|
(function(e) {
|
|
191
191
|
function t() {
|
|
192
|
-
let { theme: e, setTheme: t } =
|
|
192
|
+
let { theme: e, setTheme: t } = u(V);
|
|
193
193
|
return [e, t];
|
|
194
194
|
}
|
|
195
195
|
e.useTheme = t;
|
|
196
196
|
function n() {
|
|
197
|
-
let { design: e, setDesign: t } =
|
|
197
|
+
let { design: e, setDesign: t } = u(V);
|
|
198
198
|
return [e, t];
|
|
199
199
|
}
|
|
200
200
|
e.useDesign = n;
|
|
201
|
-
})(
|
|
202
|
-
var
|
|
203
|
-
function
|
|
204
|
-
let t =
|
|
205
|
-
return t || (t = /* @__PURE__ */ new Map(),
|
|
201
|
+
})(H ||= {});
|
|
202
|
+
var U = H, W = /* @__PURE__ */ new WeakMap();
|
|
203
|
+
function G(e) {
|
|
204
|
+
let t = W.get(e);
|
|
205
|
+
return t || (t = /* @__PURE__ */ new Map(), W.set(e, t)), t;
|
|
206
206
|
}
|
|
207
|
-
function
|
|
208
|
-
let [t] =
|
|
207
|
+
function K(e = !0) {
|
|
208
|
+
let [t] = U.useTheme(), n = p(() => {
|
|
209
209
|
if (!e) return null;
|
|
210
|
-
let t =
|
|
210
|
+
let t = a();
|
|
211
211
|
if (!t) return null;
|
|
212
|
-
let
|
|
213
|
-
return
|
|
212
|
+
let n = "box-kite-portal", r = t.getElementById(n);
|
|
213
|
+
return r || (r = document.createElement("div"), r.id = n, document.body.appendChild(r)), r;
|
|
214
214
|
}, [e]);
|
|
215
|
-
return
|
|
216
|
-
if (!t || !
|
|
217
|
-
let e =
|
|
218
|
-
return e.set(t,
|
|
219
|
-
let
|
|
220
|
-
|
|
215
|
+
return f(() => {
|
|
216
|
+
if (!t || !n) return;
|
|
217
|
+
let e = G(n), r = e.get(t) ?? 0;
|
|
218
|
+
return e.set(t, r + 1), r === 0 && n.classList.add(t), () => {
|
|
219
|
+
let r = (e.get(t) ?? 1) - 1;
|
|
220
|
+
r <= 0 ? (e.delete(t), n.classList.remove(t)) : e.set(t, r);
|
|
221
221
|
};
|
|
222
|
-
}, [
|
|
222
|
+
}, [n, t]), n;
|
|
223
223
|
}
|
|
224
224
|
//#endregion
|
|
225
|
-
export {
|
|
225
|
+
export { I as a, R as i, U as n, F as o, B as r, K as t };
|
package/components/accordion.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../identity.cjs");let
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../identity.cjs"),r=require("../reporting.cjs");let i=require("react"),a=require("react/jsx-runtime");var o;(function(e){e.ROOT_ATTRIBUTE=`data-accordion`,e.TRIGGER_ATTRIBUTE=`data-accordion-trigger`;let t=e.ROOT_SELECTOR=`[data-accordion]`,n=e.TRIGGER_SELECTOR=`[data-accordion-trigger]`;function r(e,n){return n instanceof Element&&n.closest(t)===e}e.owns=r;function i(e){return e?[...e.querySelectorAll(n)].filter(t=>r(e,t)):[]}e.triggers=i;function a(e){return e.hasAttribute(`disabled`)||e.getAttribute(`aria-disabled`)===`true`}e.isDisabled=a;function o(e,t,n,r){let i=e.length;if(i===0)return;let o=t<0||t>=i?n>0?-1:i:t;for(let t=0;t<i;t++){if(o+=n,o<0||o>=i){if(!r)return;o=(o%i+i)%i}if(!a(e[o]))return e[o]}}e.step=o;function s(e,t){return o(e,t===1?-1:e.length,t,!1)}e.edge=s;function c(e,t){return t instanceof HTMLElement?e.indexOf(t):-1}e.indexOf=c;function l(e){if(e===`ArrowDown`)return{kind:`step`,delta:1};if(e===`ArrowUp`)return{kind:`step`,delta:-1};if(e===`Home`)return{kind:`edge`,delta:1};if(e===`End`)return{kind:`edge`,delta:-1}}e.moveFor=l;function u(e,t,n,r){return n.kind===`edge`?s(e,n.delta):o(e,t,n.delta,r)}e.target=u;function d(e,t,n){return e.includes(t)?e.filter(e=>e!==t):n?[...e,t]:[t]}e.toggle=d})(o||={});var s=o,c=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],l=(0,i.createContext)(null),u=(0,i.createContext)(null);function d(e){let t=(0,i.useContext)(l);if(!t)throw Error(`<${e}> has to be rendered inside an <Accordion>.`);return t}function f(e){let t=(0,i.useContext)(u);if(!t)throw Error(`<${e}> has to be rendered inside an <Accordion.Item>.`);return t}function p(n){let{children:o,value:c,defaultValue:u,onValueChange:d,multiple:f=!1,loop:p=!0,level:m=3,props:h,...g}=n,_=(0,i.useRef)(null),[v,y]=r.a({value:c,defaultValue:u??[],onChange:d,interaction:{component:`accordion`,type:`valueChange`}}),b=t.a((e,t)=>{y(t=>s.toggle(t,e,f),t)}),x=t.a(e=>{let t=_.current;if(!t||e.defaultPrevented||!s.owns(t,e.target))return;let n=s.triggers(t),r=s.indexOf(n,e.target);if(r===-1)return;let i=s.moveFor(e.key);if(!i)return;let a=s.target(n,r,i,p);a&&(e.preventDefault(),a.focus())}),S=(0,i.useMemo)(()=>({open:v,level:m,toggle:b}),[v,m,b]);return(0,a.jsx)(l.Provider,{value:S,children:(0,a.jsx)(e.default,{ref:_,component:`accordion`,...g,props:{[s.ROOT_ATTRIBUTE]:``,...h,onKeyDown:x},children:o})})}function m(t){let{value:r,children:o,disabled:s=!1,props:c,...l}=t,{open:f}=d(`Accordion.Item`),p=n.t(`accordion`),m=f.includes(r),h=(0,i.useMemo)(()=>({value:r,open:m,disabled:s,triggerId:`${p}-trigger`,panelId:`${p}-panel`}),[r,m,s,p]);return(0,a.jsx)(u.Provider,{value:h,children:(0,a.jsx)(e.default,{component:`accordion.item`,...l,props:c,children:o})})}m.displayName=`Accordion.Item`;function h(n){let{children:r,level:i,arrow:o=!0,props:l,...u}=n,{level:p,toggle:m}=d(`Accordion.Trigger`),{value:h,open:g,disabled:_,triggerId:v,panelId:y}=f(`Accordion.Trigger`),b=t.a(e=>m(h,{reason:`trigger`,event:e}));return(0,a.jsx)(e.default,{tag:c[(i??p)-1],component:`accordion.heading`,children:(0,a.jsxs)(e.default,{tag:`button`,component:`accordion.trigger`,...u,disabled:_,id:v,props:{type:`button`,"aria-expanded":g,"aria-controls":y,[s.TRIGGER_ATTRIBUTE]:``,...l,onClick:b},children:[r,o&&(0,a.jsx)(e.default,{tag:`span`,component:`accordion.arrow`,variant:{open:g},props:{"aria-hidden":!0}})]})})}h.displayName=`Accordion.Trigger`;function g(t){let{children:n,props:r,...i}=t,{open:o,triggerId:s,panelId:c}=f(`Accordion.Panel`);return(0,a.jsx)(e.default,{component:`accordion.track`,variant:{closed:!o},children:(0,a.jsx)(e.default,{component:`accordion.clip`,children:(0,a.jsx)(e.default,{component:`accordion.panel`,...i,id:c,props:{role:`region`,"aria-labelledby":s,...r},children:n})})})}g.displayName=`Accordion.Panel`;function _(o){let{children:s,trigger:c,open:l,defaultOpen:u=!1,onOpenChange:d,props:f,...p}=o,m=n.t(`collapsible`),h=`${m}-trigger`,g=`${m}-panel`,[_,v]=r.a({value:l,defaultValue:u,onChange:d,interaction:{component:`collapsible`,type:`openChange`}}),y=t.a(e=>v(e=>!e,{reason:`trigger`,event:e})),b=(0,i.useMemo)(()=>({props:{id:h,type:`button`,"aria-expanded":_,"aria-controls":g,onClick:y}}),[h,g,_,y]);return(0,a.jsxs)(e.default,{component:`collapsible`,...p,props:f,children:[c(b),(0,a.jsx)(e.default,{component:`collapsible.track`,variant:{closed:!_},children:(0,a.jsx)(e.default,{component:`collapsible.clip`,children:(0,a.jsx)(e.default,{component:`collapsible.panel`,id:g,children:s})})})]})}_.displayName=`Collapsible`;var v=p;v.Item=m,v.Trigger=h,v.Panel=g,v.displayName=`Accordion`,exports.Collapsible=_,exports.default=v;
|
package/components/accordion.mjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import e from "../box.mjs";
|
|
3
|
-
import { a as t
|
|
4
|
-
import { t as
|
|
3
|
+
import { a as t } from "../behavior.mjs";
|
|
4
|
+
import { t as n } from "../identity.mjs";
|
|
5
|
+
import { a as r } from "../reporting.mjs";
|
|
5
6
|
import { createContext as i, useContext as a, useMemo as o, useRef as s } from "react";
|
|
6
7
|
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
7
8
|
//#region src/utils/accordion/accordionUtils.ts
|
|
@@ -88,11 +89,15 @@ function g(e) {
|
|
|
88
89
|
if (!t) throw Error(`<${e}> has to be rendered inside an <Accordion.Item>.`);
|
|
89
90
|
return t;
|
|
90
91
|
}
|
|
91
|
-
function _(
|
|
92
|
-
let { children: i, value: a, defaultValue: l, onValueChange: u, multiple: f = !1, loop: m = !0, level: h = 3, props: g, ..._ } =
|
|
92
|
+
function _(n) {
|
|
93
|
+
let { children: i, value: a, defaultValue: l, onValueChange: u, multiple: f = !1, loop: m = !0, level: h = 3, props: g, ..._ } = n, v = s(null), [y, b] = r({
|
|
93
94
|
value: a,
|
|
94
95
|
defaultValue: l ?? [],
|
|
95
|
-
onChange: u
|
|
96
|
+
onChange: u,
|
|
97
|
+
interaction: {
|
|
98
|
+
component: "accordion",
|
|
99
|
+
type: "valueChange"
|
|
100
|
+
}
|
|
96
101
|
}), x = t((e, t) => {
|
|
97
102
|
b((t) => d.toggle(t, e, f), t);
|
|
98
103
|
}), S = t((e) => {
|
|
@@ -129,14 +134,14 @@ function _(r) {
|
|
|
129
134
|
});
|
|
130
135
|
}
|
|
131
136
|
function v(t) {
|
|
132
|
-
let { value:
|
|
133
|
-
value:
|
|
137
|
+
let { value: r, children: i, disabled: a = !1, props: s, ...l } = t, { open: u } = h("Accordion.Item"), d = n("accordion"), f = u.includes(r), p = o(() => ({
|
|
138
|
+
value: r,
|
|
134
139
|
open: f,
|
|
135
140
|
disabled: a,
|
|
136
141
|
triggerId: `${d}-trigger`,
|
|
137
142
|
panelId: `${d}-panel`
|
|
138
143
|
}), [
|
|
139
|
-
|
|
144
|
+
r,
|
|
140
145
|
f,
|
|
141
146
|
a,
|
|
142
147
|
d
|
|
@@ -207,10 +212,14 @@ function b(t) {
|
|
|
207
212
|
}
|
|
208
213
|
b.displayName = "Accordion.Panel";
|
|
209
214
|
function x(i) {
|
|
210
|
-
let { children: a, trigger: s, open: u, defaultOpen: d = !1, onOpenChange: f, props: p, ...m } = i, h =
|
|
215
|
+
let { children: a, trigger: s, open: u, defaultOpen: d = !1, onOpenChange: f, props: p, ...m } = i, h = n("collapsible"), g = `${h}-trigger`, _ = `${h}-panel`, [v, y] = r({
|
|
211
216
|
value: u,
|
|
212
217
|
defaultValue: d,
|
|
213
|
-
onChange: f
|
|
218
|
+
onChange: f,
|
|
219
|
+
interaction: {
|
|
220
|
+
component: "collapsible",
|
|
221
|
+
type: "openChange"
|
|
222
|
+
}
|
|
214
223
|
}), b = t((e) => y((e) => !e, {
|
|
215
224
|
reason: "trigger",
|
|
216
225
|
event: e
|
package/components/agent.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../identity.cjs");let
|
|
1
|
+
"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../box.cjs"),t=require("../behavior.cjs"),n=require("../identity.cjs"),r=require("../reporting.cjs");let i=require("react"),a=require("react/jsx-runtime");var o;(function(e){let t={pending:`Pending`,running:`Running`,success:`Done`,error:`Failed`};function n(e){return t[e]??t.pending}e.statusLabel=n;let r={approved:`Approved`,rejected:`Rejected`};function i(e){return r[e]??``}e.decisionLabel=i;let a=e.VALUE_LIMIT=2e4;function o(e){if(typeof e==`string`)return e;try{let t=JSON.stringify(e,s,2);return typeof t==`string`?t:String(e)}catch{return String(e)}}function s(e,t){return typeof t==`bigint`?`${t}`:typeof t==`function`?`[Function]`:t}function c(e,t=a){let n=o(e);return n.length<=t?{text:n,truncated:0}:{text:n.slice(0,t),truncated:n.length-t}}e.formatValue=c;function l(e){return e!=null}e.hasValue=l;function u(e){return`${Math.trunc(e)}`.replace(/\B(?=(\d{3})+(?!\d))/g,`,`)}e.formatCount=u;function d(e){if(!Number.isFinite(e)||e<0)return``;if(e<1e3)return`${Math.round(e)}ms`;let t=e/1e3;if(t<60)return`${t<10?Math.round(t*10)/10:Math.round(t)}s`;let n=Math.floor(t/60);return`${n}m ${Math.round(t-n*60)}s`}e.formatDuration=d;let f=e.STREAM_WINDOW=8;function p(e){return{settled:e,segments:[],nextKey:0}}e.initialStream=p;function m(e){return e.segments.reduce((e,t)=>e+t.text,e.settled)}e.streamText=m;function h(e,t,n=f){let r=m(e);if(t===r)return e;if(!t.startsWith(r))return{settled:t,segments:[],nextKey:e.nextKey};let i=[...e.segments,{key:e.nextKey,text:t.slice(r.length)}],a=Math.max(0,i.length-Math.max(0,n));return{settled:i.slice(0,a).reduce((e,t)=>e+t.text,e.settled),segments:i.slice(a),nextKey:e.nextKey+1}}e.advanceStream=h})(o||={});var s=o;function c({part:t,open:n}){return(0,a.jsx)(e.default,{tag:`span`,component:t,variant:{open:n},props:{"aria-hidden":!0}})}var l={section:`toolCall.section`,label:`toolCall.label`,value:`toolCall.value`,truncated:`toolCall.truncated`},u={section:`approval.section`,label:`approval.label`,value:`approval.value`,truncated:`approval.truncated`};function d({parts:t,label:n,value:r,limit:i}){let{text:o,truncated:c}=s.formatValue(r,i);return(0,a.jsxs)(e.default,{component:t.section,children:[(0,a.jsx)(e.default,{component:t.label,children:n}),(0,a.jsx)(e.default,{tag:`pre`,component:t.value,children:o}),c>0&&(0,a.jsx)(e.default,{component:t.truncated,children:`${s.formatCount(c)} more characters, not shown`})]})}function f(i){let{name:o,description:u,status:f=`pending`,input:p,output:m,error:h,open:g,defaultOpen:_=!1,onOpenChange:v,collapsible:y=!0,inputLabel:b=`Input`,outputLabel:x=`Output`,errorLabel:S=`Error`,valueLimit:C,children:w,props:T,...E}=i,D=n.t(`toolcall`),O=`${D}-header`,k=`${D}-body`,[A,j]=r.a({value:g,defaultValue:_,onChange:v,interaction:{component:`toolCall`,type:`openChange`}}),M=t.a(e=>j(e=>!e,{reason:`trigger`,event:e})),N=[{key:`input`,label:b,value:p},{key:`output`,label:x,value:m},{key:`error`,label:S,value:h}].filter(e=>s.hasValue(e.value)),P=y&&(N.length>0||w!==void 0),F=P&&A,I=(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(e.default,{tag:`span`,component:`toolCall.summary`,children:[(0,a.jsx)(e.default,{tag:`span`,component:`toolCall.name`,children:o}),u!==void 0&&(0,a.jsx)(e.default,{tag:`span`,component:`toolCall.description`,children:u})]}),(0,a.jsxs)(e.default,{tag:`span`,component:`toolCall.status`,variant:f,children:[(0,a.jsx)(e.default,{tag:`span`,component:`toolCall.status.dot`,variant:{running:f===`running`},props:{"aria-hidden":!0}}),s.statusLabel(f)]}),P&&(0,a.jsx)(c,{part:`toolCall.arrow`,open:F})]});return(0,a.jsxs)(e.default,{component:`toolCall`,...E,props:{"aria-busy":f===`running`||void 0,...T},children:[P?(0,a.jsx)(e.default,{tag:`button`,component:`toolCall.header`,variant:{interactive:!0},id:O,props:{type:`button`,"aria-expanded":F,"aria-controls":k,onClick:M},children:I}):(0,a.jsx)(e.default,{component:`toolCall.header`,id:O,children:I}),P&&(0,a.jsx)(e.default,{component:`toolCall.track`,variant:{closed:!F},children:(0,a.jsx)(e.default,{component:`toolCall.clip`,children:(0,a.jsxs)(e.default,{component:`toolCall.body`,id:k,children:[N.map(e=>(0,a.jsx)(d,{parts:l,label:e.label,value:e.value,limit:C},e.key)),w]})})})]})}var p=f;p.displayName=`ToolCallCard`;function m(t){let{title:i,description:o,input:c,inputLabel:l=`Request`,decision:f,defaultDecision:p=null,onDecisionChange:m,busy:h=!1,approveLabel:g=`Approve`,rejectLabel:_=`Reject`,autoFocus:v=!1,valueLimit:y,children:b,props:x,...S}=t,C=`${n.t(`approval`)}-title`,[w,T]=r.a({value:f,defaultValue:p,onChange:m,interaction:{component:`approval`,type:`decisionChange`}}),E=(e,t)=>n=>T(e,{reason:t,event:n});return(0,a.jsxs)(e.default,{component:`approval`,...S,variant:[S.variant,{approved:w===`approved`,rejected:w===`rejected`}],props:{role:`group`,"aria-labelledby":C,"aria-busy":h||void 0,...x},children:[(0,a.jsx)(e.default,{component:`approval.title`,id:C,children:i}),o!==void 0&&(0,a.jsx)(e.default,{component:`approval.description`,children:o}),s.hasValue(c)&&(0,a.jsx)(d,{parts:u,label:l,value:c,limit:y}),b,(0,a.jsxs)(e.default,{component:`approval.footer`,children:[w===null&&(0,a.jsxs)(e.default,{component:`approval.actions`,children:[(0,a.jsx)(e.default,{tag:`button`,component:`approval.button`,variant:{reject:!0},disabled:h,props:{type:`button`,autoFocus:v,onClick:E(`rejected`,`reject`)},children:_}),(0,a.jsx)(e.default,{tag:`button`,component:`approval.button`,variant:{approve:!0},disabled:h,props:{type:`button`,onClick:E(`approved`,`approve`)},children:g})]}),(0,a.jsx)(e.default,{component:`approval.decision`,variant:{approved:w===`approved`,rejected:w===`rejected`},props:{role:`status`},children:w===null?null:s.decisionLabel(w)})]})]})}var h=m;h.displayName=`ApprovalCard`;function g(i){let{label:o,children:l,open:u,defaultOpen:d=!1,onOpenChange:f,streaming:p=!1,duration:m,props:h,...g}=i,_=n.t(`reasoning`),v=`${_}-trigger`,y=`${_}-body`,[b,x]=r.a({value:u,defaultValue:d,onChange:f,interaction:{component:`reasoning`,type:`openChange`}}),S=t.a(e=>x(e=>!e,{reason:`trigger`,event:e})),C=m===void 0?``:s.formatDuration(m);return(0,a.jsxs)(e.default,{component:`reasoning`,...g,props:{"aria-busy":p||void 0,...h},children:[(0,a.jsxs)(e.default,{tag:`button`,component:`reasoning.trigger`,variant:{streaming:p},id:v,props:{type:`button`,"aria-expanded":b,"aria-controls":y,onClick:S},children:[(0,a.jsx)(c,{part:`reasoning.arrow`,open:b}),o??(p?`Thinking…`:`Reasoning`),!p&&C!==``&&(0,a.jsx)(e.default,{tag:`span`,component:`reasoning.duration`,children:`Thought for ${C}`})]}),(0,a.jsx)(e.default,{component:`reasoning.track`,variant:{closed:!b},children:(0,a.jsx)(e.default,{component:`reasoning.clip`,children:(0,a.jsx)(e.default,{component:`reasoning.body`,id:y,children:l})})})]})}var _=g;_.displayName=`Reasoning`;function v(t){let{text:n,streaming:r=!1,window:o=s.STREAM_WINDOW,caret:c=!0,props:l,...u}=t,[d,f]=(0,i.useState)(()=>s.initialStream(n)),p=s.advanceStream(d,n,o);return p!==d&&f(p),(0,a.jsxs)(e.default,{component:`streamingText`,...u,props:{"aria-busy":r||void 0,...l},children:[p.settled,p.segments.map(t=>(0,a.jsx)(e.default,{tag:`span`,component:`streamingText.segment`,children:t.text},t.key)),r&&c&&(0,a.jsx)(e.default,{tag:`span`,component:`streamingText.caret`,props:{"aria-hidden":!0}})]})}var y=v;y.displayName=`StreamingText`,exports.AgentUtils=s,exports.ApprovalCard=h,exports.Reasoning=_,exports.StreamingText=y,exports.ToolCallCard=p;
|
package/components/agent.mjs
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import e from "../box.mjs";
|
|
3
|
-
import { a as t
|
|
4
|
-
import { t as
|
|
3
|
+
import { a as t } from "../behavior.mjs";
|
|
4
|
+
import { t as n } from "../identity.mjs";
|
|
5
|
+
import { a as r } from "../reporting.mjs";
|
|
5
6
|
import { useState as i } from "react";
|
|
6
7
|
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
8
|
//#region src/utils/agent/agentUtils.ts
|
|
@@ -143,10 +144,14 @@ function p({ parts: t, label: n, value: r, limit: i }) {
|
|
|
143
144
|
});
|
|
144
145
|
}
|
|
145
146
|
function m(i) {
|
|
146
|
-
let { name: c, description: f, status: m = "pending", input: h, output: g, error: _, open: v, defaultOpen: y = !1, onOpenChange: b, collapsible: x = !0, inputLabel: S = "Input", outputLabel: C = "Output", errorLabel: w = "Error", valueLimit: T, children: E, props: D, ...O } = i, k =
|
|
147
|
+
let { name: c, description: f, status: m = "pending", input: h, output: g, error: _, open: v, defaultOpen: y = !1, onOpenChange: b, collapsible: x = !0, inputLabel: S = "Input", outputLabel: C = "Output", errorLabel: w = "Error", valueLimit: T, children: E, props: D, ...O } = i, k = n("toolcall"), A = `${k}-header`, j = `${k}-body`, [M, N] = r({
|
|
147
148
|
value: v,
|
|
148
149
|
defaultValue: y,
|
|
149
|
-
onChange: b
|
|
150
|
+
onChange: b,
|
|
151
|
+
interaction: {
|
|
152
|
+
component: "toolCall",
|
|
153
|
+
type: "openChange"
|
|
154
|
+
}
|
|
150
155
|
}), P = t((e) => N((e) => !e, {
|
|
151
156
|
reason: "trigger",
|
|
152
157
|
event: e
|
|
@@ -241,10 +246,14 @@ function m(i) {
|
|
|
241
246
|
var h = m;
|
|
242
247
|
h.displayName = "ToolCallCard";
|
|
243
248
|
function g(t) {
|
|
244
|
-
let { title: i, description: a, input: c, inputLabel: u = "Request", decision: d, defaultDecision: m = null, onDecisionChange: h, busy: g = !1, approveLabel: _ = "Approve", rejectLabel: v = "Reject", autoFocus: y = !1, valueLimit: b, children: x, props: S, ...C } = t, w = `${
|
|
249
|
+
let { title: i, description: a, input: c, inputLabel: u = "Request", decision: d, defaultDecision: m = null, onDecisionChange: h, busy: g = !1, approveLabel: _ = "Approve", rejectLabel: v = "Reject", autoFocus: y = !1, valueLimit: b, children: x, props: S, ...C } = t, w = `${n("approval")}-title`, [T, E] = r({
|
|
245
250
|
value: d,
|
|
246
251
|
defaultValue: m,
|
|
247
|
-
onChange: h
|
|
252
|
+
onChange: h,
|
|
253
|
+
interaction: {
|
|
254
|
+
component: "approval",
|
|
255
|
+
type: "decisionChange"
|
|
256
|
+
}
|
|
248
257
|
}), D = (e, t) => (n) => E(e, {
|
|
249
258
|
reason: t,
|
|
250
259
|
event: n
|
|
@@ -321,10 +330,14 @@ function g(t) {
|
|
|
321
330
|
var _ = g;
|
|
322
331
|
_.displayName = "ApprovalCard";
|
|
323
332
|
function v(i) {
|
|
324
|
-
let { label: a, children: c, open: d, defaultOpen: f = !1, onOpenChange: p, streaming: m = !1, duration: h, props: g, ..._ } = i, v =
|
|
333
|
+
let { label: a, children: c, open: d, defaultOpen: f = !1, onOpenChange: p, streaming: m = !1, duration: h, props: g, ..._ } = i, v = n("reasoning"), y = `${v}-trigger`, b = `${v}-body`, [x, S] = r({
|
|
325
334
|
value: d,
|
|
326
335
|
defaultValue: f,
|
|
327
|
-
onChange: p
|
|
336
|
+
onChange: p,
|
|
337
|
+
interaction: {
|
|
338
|
+
component: "reasoning",
|
|
339
|
+
type: "openChange"
|
|
340
|
+
}
|
|
328
341
|
}), C = t((e) => S((e) => !e, {
|
|
329
342
|
reason: "trigger",
|
|
330
343
|
event: e
|
package/components/calendar.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../identity.cjs"),i=require("../dates.cjs"),a=require("../date-math.cjs"),o=require("./svg.cjs"),
|
|
1
|
+
"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../identity.cjs"),i=require("../dates.cjs"),a=require("../date-math.cjs"),o=require("../reporting.cjs"),s=require("./svg.cjs"),c=require("../date-environment.cjs"),ee=require("./visuallyHidden.cjs");let l=require("react"),u=require("react/jsx-runtime");function d(e){let t=i.f(e);return t&&t.kind===`date`?t.fields:null}function f(e){return i.w({...e,...i.V})}function te(e,t,n){let r={year:e,month:t,day:1},a=i.U(r,-i.Q(i.G(r)-n,7));return Array.from({length:6},(e,r)=>{let o=Array.from({length:7},(e,n)=>{let o=i.U(a,r*7+n);return{date:f(o),day:o.day,outside:o.month!==t}}),s=i.U(a,r*7+i.Q(4-n,7));return{week:i.Z(s).week,days:o}})}function ne(e,t,n,r){let a=r.rtl?`ArrowLeft`:`ArrowRight`,o=r.rtl?`ArrowRight`:`ArrowLeft`;switch(t){case a:return i.U(e,1);case o:return i.U(e,-1);case`ArrowDown`:return i.U(e,7);case`ArrowUp`:return i.U(e,-7);case`Home`:return i.U(e,-i.Q(i.G(e)-r.firstDay,7));case`End`:return i.U(e,6-i.Q(i.G(e)-r.firstDay,7));case`PageUp`:return i.W(e,n?-12:-1);case`PageDown`:return i.W(e,n?12:1);default:return null}}function re(e,t){return t.min!=null&&i.q(e)<i.q(t.min)||t.max!=null&&i.q(e)>i.q(t.max)}function p(e,t){return t.min&&i.q(e)<i.q(t.min)?t.min:t.max&&i.q(e)>i.q(t.max)?t.max:e}function m(e,t){return i.q(e)<=i.q(t)?[e,t]:[t,e]}function ie(e,t,n){if(!t||!n)return t&&i.q(e)===i.q(t)?`start`:null;let[r,a]=m(t,n),o=i.q(e);return o===i.q(r)?`start`:o===i.q(a)?`end`:o>i.q(r)&&o<i.q(a)?`middle`:null}function ae(e,t,n){let[r,a]=m(e,t);for(let e=i.q(r);e<=i.q(a);e++)if(n(f(i.U({year:1970,month:1,day:1},e))))return!0;return!1}var h=`data-date`,g=12;function _(e,t){return e!==null&&t!==null&&i.q(e)===i.q(t)}function v(s){let{mode:v=`single`,value:b,defaultValue:S=null,onValueChange:ce,min:le,max:ue,isDateUnavailable:C,locale:de,zone:fe,firstDayOfWeek:pe,months:w=1,weekNumbers:me=!1,showOutsideDays:he=!0,focusedDate:ge,defaultFocusedDate:_e,onFocusedDateChange:ve,disabled:T=!1,readOnly:ye=!1,autoFocus:be=!1,label:E,previousLabel:xe=`Previous`,nextLabel:Se=`Next`,props:Ce,...D}=s,O=c.n({locale:de,zone:fe}),{locale:k}=O,A=d(a.N(O.zone)),j=pe??i.S(k).firstDay,M=e=>oe(k).format(e),N=v===`range`,P=(0,l.useMemo)(()=>({min:d(le),max:d(ue)}),[le,ue]),[F,I]=o.a({value:b,defaultValue:S,onChange:(e,t)=>{ce?.(e,N?t:{...t,...a.x(e,O.zone)})},interaction:{component:`calendar`,type:`valueChange`,content:[`value`]}}),L=N?null:d(F),R=N&&F?F:null,[z,B]=(0,l.useState)(null),[we,V]=(0,l.useState)(null),Te=f(p(d(_e)??L??d(R?.start)??A,P)),[Ee,H]=n.i({value:ge,defaultValue:Te,onChange:ve}),U=d(Ee)??A,[W,G]=(0,l.useState)(`day`),K=o.i(`calendar`),[q,De]=(0,l.useState)(()=>y(U)),J=q;(y(U)<q||y(U)>q+w-1)&&(J=y(U)<q?y(U):y(U)-w+1,De(J));let Oe=(0,l.useRef)(null),Y=(0,l.useRef)(be),ke=r.t(`calendar`);(0,l.useEffect)(()=>{Y.current&&(Y.current=!1,Oe.current?.querySelector(`[${h}="${Ee}"]`)?.focus())});let Ae=e=>re(e,P),je=e=>C?.(f(e))??!1,X=(e,t,n)=>{Y.current=n,H(f(p(e,P)),{reason:t})},Me=(e,t)=>{if(T||ye||Ae(e)||je(e))return;if(X(e,`select`,!1),!N){I(f(e),{reason:`select`,event:t});return}if(!z){B(e),V(e);return}let[n,r]=m(z,e);B(null),V(null),!(C&&ae(n,r,C))&&I({start:f(n),end:f(r)},{reason:`select`,event:t})},Ne=n.a(t=>{if(T)return;if(t.key===`Enter`||t.key===` `){t.preventDefault(),Me(U,t);return}if(t.key===`Escape`&&z){t.preventDefault(),t.stopPropagation(),B(null),V(null);return}let n=ne(U,t.key,t.shiftKey,{rtl:e.p(t.currentTarget),firstDay:j});n&&(t.preventDefault(),X(n,`keyboard`,!0),z&&V(p(n,P)))}),Pe=e=>{let t=i.W(U,e*(W===`day`?w:W===`month`?12:144));W===`day`&&De(J+e*w),X(t,`navigate`,!1),K(`pageChange`,f(t),{reason:e===1?`next`:`previous`,content:[`value`]})},Z=Array.from({length:w},(e,t)=>({year:Math.floor((J+t)/12),month:(J+t)%12+1,day:1})),Q=`${ke}-title`,Fe=W===`day`&&w>1,Ie=W===`day`?Z.map(e=>i.t(f(e),{locale:k,month:`long`,year:`numeric`})).join(` – `):W===`month`?M(U.year):`${M(x(U.year))} – ${M(x(U.year)+g-1)}`,Le=i.C(k,`short`),Re=Le.some(e=>e.length>4)?i.C(k,`narrow`):Le,ze=i.C(k,`long`),Be=Array.from({length:7},(e,t)=>(j+t)%7),Ve=z?we??z:null,He=z??d(R?.start),$=z?Ve:d(R?.end),Ue=e=>{let n=d(e.date),r=Ae(n),a=je(n),o=N?ie(n,He,$):null,s=N?o!==null:_(n,L),c=_(n,A),ee=_(n,U);return e.outside&&(!he||w>1)?(0,u.jsx)(t.default,{tag:`td`,component:`calendar.cell`,display:`table-cell`,props:{role:`gridcell`}},e.date):(0,u.jsx)(t.default,{tag:`td`,component:`calendar.cell`,display:`table-cell`,p:0,py:.5,variant:{rangeStart:o===`start`&&$!==null&&!_(He,$),rangeEnd:o===`end`,rangeMiddle:o===`middle`},props:{role:`gridcell`,"aria-selected":s||void 0,"aria-disabled":r||T||void 0,"aria-current":c?`date`:void 0},children:(0,u.jsx)(t.default,{component:`calendar.day`,display:`flex`,ai:`center`,jc:`center`,width:9,height:9,mx:`auto`,borderRadius:999,fontSize:14,css:{fontVariantNumeric:`tabular-nums`},variant:{today:c,selected:s&&o!==`middle`,outside:e.outside,blocked:r||T,unavailable:a},props:{[h]:e.date,tabIndex:ee&&!r&&!T?0:-1,"aria-label":i.t(e.date,{locale:k,dateStyle:`full`}),onClick:e=>Me(n,e),onPointerEnter:()=>z&&V(n)},children:M(e.day)})},e.date)},We=(t,n,r,i,a,o)=>{let s=e.p(t.currentTarget),c={ArrowUp:-r,ArrowDown:r,[s?`ArrowRight`:`ArrowLeft`]:-1,[s?`ArrowLeft`:`ArrowRight`]:1};t.key===`Enter`||t.key===` `?(t.preventDefault(),i(o)):t.key in c&&(t.preventDefault(),a(Math.max(0,Math.min(n-1,o+c[t.key])),t.currentTarget.parentElement))},Ge=()=>{let e=i.x(k,`short`),n=x(U.year),r=W===`month`?e.map((e,t)=>({label:e,active:t+1===U.month,current:A.year===U.year&&A.month===t+1})):Array.from({length:g},(e,t)=>({label:M(n+t),active:n+t===U.year,current:A.year===n+t})),a=e=>W===`month`?{...U,month:e+1,day:1}:{...U,year:n+e,day:1},o=e=>{let t=a(e);Y.current=!0,H(f(p({...t,day:Math.min(U.day,28)},P)),{reason:`navigate`}),G(W===`year`?`month`:`day`),K(`viewChange`,W===`year`?`month`:`day`,{reason:`zoom-in`})},s=(e,t)=>{let n=a(e);H(f({...n,day:Math.min(U.day,28)}),{reason:`keyboard`}),t?.querySelector(`[data-zoom="${e}"]`)?.focus()};return(0,u.jsx)(t.default,{display:`grid`,gridTemplateColumns:3,gap:1,props:{role:`group`,"aria-labelledby":Q},children:r.map((e,n)=>(0,u.jsx)(t.default,{tag:`button`,component:`calendar.zoomItem`,variant:{selected:e.active,today:e.current},py:2,borderRadius:2,disabled:T,props:{type:`button`,"data-zoom":n,tabIndex:e.active?0:-1,"aria-pressed":e.active,onClick:()=>o(n),onKeyDown:e=>We(e,r.length,3,o,s,n)},children:e.label},e.label))})},Ke=(e,n)=>{let r=te(e.year,e.month,j),a=i.t(f(e),{locale:k,month:`long`,year:`numeric`});return(0,u.jsxs)(t.default,{tag:`table`,css:{borderCollapse:`collapse`,tableLayout:`fixed`},props:{role:`grid`,"aria-label":w>1?a:void 0,"aria-labelledby":w>1?void 0:Q,"aria-readonly":ye||void 0,onKeyDown:Ne},children:[(0,u.jsx)(t.default,{tag:`thead`,display:`table-header-group`,children:(0,u.jsxs)(t.default,{tag:`tr`,display:`table-row`,children:[me&&(0,u.jsx)(t.default,{tag:`th`,display:`table-cell`,component:`calendar.weekday`,props:{"aria-hidden":!0}}),Be.map(e=>(0,u.jsx)(t.default,{tag:`th`,display:`table-cell`,component:`calendar.weekday`,pb:1,fontSize:12,props:{scope:`col`,abbr:ze[e]},children:Re[e]},e))]})}),(0,u.jsx)(t.default,{tag:`tbody`,display:`table-row-group`,children:r.map(e=>(0,u.jsxs)(t.default,{tag:`tr`,display:`table-row`,children:[me&&(0,u.jsx)(t.default,{tag:`td`,display:`table-cell`,component:`calendar.weekNumber`,fontSize:11,textAlign:`center`,props:{role:`rowheader`},children:M(e.week)}),e.days.map(Ue)]},e.days[0].date))})]},n)};return(0,u.jsxs)(t.default,{ref:Oe,component:`calendar`,display:`inline-block`,...D,variant:[D.variant,{disabled:T}],props:{role:E?`group`:void 0,"aria-label":E,...Ce,onPointerLeave:()=>z&&V(z)},children:[(0,u.jsxs)(t.default,{position:`relative`,minHeight:8,mb:2,children:[(0,u.jsx)(t.default,{tag:`button`,component:`calendar.nav`,position:`absolute`,top:0,insetStart:0,display:`inline-flex`,ai:`center`,jc:`center`,width:8,height:8,borderRadius:2,disabled:T,props:{type:`button`,"aria-label":xe,onClick:()=>Pe(-1)},children:(0,u.jsx)(se,{direction:-1})}),Fe?(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(t.default,{display:`flex`,gap:4,children:Z.map(e=>(0,u.jsx)(t.default,{flex1:!0,textAlign:`center`,py:1.5,fontSize:14,fontWeight:600,props:{"aria-hidden":!0},children:i.t(f(e),{locale:k,month:`long`,year:`numeric`})},f(e)))}),(0,u.jsx)(ee.default,{id:Q,props:{"aria-live":`polite`},children:Ie})]}):(0,u.jsx)(t.default,{display:`flex`,jc:`center`,px:9,children:(0,u.jsx)(t.default,{tag:`button`,component:`calendar.title`,py:1.5,px:3,borderRadius:2,fontSize:14,id:Q,disabled:T||W===`year`,props:{type:`button`,"aria-live":`polite`,onClick:()=>{G(W===`day`?`month`:`year`),K(`viewChange`,W===`day`?`month`:`year`,{reason:`zoom-out`})}},children:Ie})}),(0,u.jsx)(t.default,{tag:`button`,component:`calendar.nav`,position:`absolute`,top:0,insetEnd:0,display:`inline-flex`,ai:`center`,jc:`center`,width:8,height:8,borderRadius:2,disabled:T,props:{type:`button`,"aria-label":Se,onClick:()=>Pe(1)},children:(0,u.jsx)(se,{direction:1})})]}),W===`day`?(0,u.jsx)(t.default,{display:`flex`,gap:4,ai:`start`,children:Z.map(Ke)}):Ge()]})}function y(e){return e.year*12+e.month-1}var b=new Map;function oe(e){let t=b.get(e);return t||(t=new Intl.NumberFormat(e,{useGrouping:!1}),b.set(e,t)),t}function x(e){return e-(e%g+g)%g}function se({direction:e}){return(0,u.jsx)(s.Svg,{viewBox:`0 0 16 16`,width:`1rem`,height:`1rem`,rtl:{flip:`xAxis`},props:{fill:`none`},children:(0,u.jsx)(s.Path,{d:e===1?`M6 3l5 5-5 5`:`M10 3L5 8l5 5`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`})})}var S=v;S.displayName=`Calendar`,exports.default=S;
|
package/components/calendar.d.ts
CHANGED
|
@@ -10,6 +10,8 @@ export interface DateRange {
|
|
|
10
10
|
}
|
|
11
11
|
/** Which grid is on show: days, the months of a year, or a run of years. */
|
|
12
12
|
export type CalendarView = 'day' | 'month' | 'year';
|
|
13
|
+
/** Why the focused day moved: an arrow key, a month or year step, or a day being chosen (by any device). */
|
|
14
|
+
export type CalendarFocusReason = 'keyboard' | 'navigate' | 'select';
|
|
13
15
|
type CalendarBoxProps<TKey extends keyof ComponentsAndVariants> = Omit<BoxProps<'div', TKey>, 'onChange' | 'disabled' | 'defaultValue' | 'readOnly'>;
|
|
14
16
|
interface BaseProps<TKey extends keyof ComponentsAndVariants> extends CalendarBoxProps<TKey> {
|
|
15
17
|
/** The earliest day that can be chosen, `YYYY-MM-DD`. The arrows stop there too. */
|
|
@@ -35,7 +37,7 @@ interface BaseProps<TKey extends keyof ComponentsAndVariants> extends CalendarBo
|
|
|
35
37
|
/** Where the keyboard starts when the calendar owns it. Default the value, or today. */
|
|
36
38
|
defaultFocusedDate?: string;
|
|
37
39
|
/** Fires when the keyboard or the paging buttons move to another day. */
|
|
38
|
-
onFocusedDateChange?: ChangeHandler<string,
|
|
40
|
+
onFocusedDateChange?: ChangeHandler<string, CalendarFocusReason>;
|
|
39
41
|
/** Nothing can be chosen and nothing is focusable. */
|
|
40
42
|
disabled?: boolean;
|
|
41
43
|
/** Can be read and navigated, but not chosen in. */
|