@box-kite/react 2.2.15 → 2.2.16
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/.claude/rules/box-kite-rules.md +1 -1
- package/.claude/skills/box-kite/SKILL.md +1 -1
- package/.claude/skills/box-kite/references/styling.md +1 -1
- package/.cursor/rules/box-kite.mdc +1 -1
- package/AGENTS.md +1 -1
- package/BOX_AI_CONTEXT.md +16 -0
- package/BOX_KITE_AI_CONTEXT.md +16 -0
- package/behavior.cjs +1 -1
- package/behavior.mjs +16 -16
- package/catalog.cjs +1 -1
- package/catalog.mjs +1 -1
- package/client.cjs +1 -1
- package/client.mjs +10 -10
- package/components/accordion.cjs +1 -1
- package/components/accordion.mjs +95 -91
- package/components/calendar.cjs +1 -1
- package/components/calendar.mjs +212 -210
- package/components/chart.cjs +1 -1
- package/components/chart.d.ts +8 -3
- package/components/chart.mjs +70 -65
- package/components/combobox.cjs +1 -1
- package/components/combobox.mjs +187 -186
- package/components/dashboard.cjs +1 -1
- package/components/dashboard.d.ts +1 -44
- package/components/dashboard.mjs +202 -201
- package/components/dataGrid/components/dataGridListLayout.d.ts +1 -1
- package/components/dataGrid/contracts/dataGridContract.d.ts +1 -1
- package/components/dataGrid/models/gridModel.d.ts +1 -1
- package/components/dataGrid.cjs +2 -2
- package/components/dataGrid.mjs +10 -10
- package/components/dateField.cjs +1 -1
- package/components/dateField.mjs +96 -96
- package/components/datePicker.cjs +1 -1
- package/components/datePicker.mjs +177 -179
- package/components/dialog.cjs +1 -1
- package/components/dialog.d.ts +2 -64
- package/components/dialog.mjs +130 -126
- package/components/form.cjs +1 -1
- package/components/form.d.ts +4 -3
- package/components/form.mjs +25 -22
- package/components/menu.cjs +1 -1
- package/components/menu.d.ts +2 -73
- package/components/menu.mjs +222 -218
- package/components/overlay.cjs +1 -1
- package/components/overlay.mjs +43 -43
- package/components/popover.cjs +1 -1
- package/components/popover.d.ts +1 -41
- package/components/popover.mjs +55 -51
- package/components/radioGroup.cjs +1 -1
- package/components/radioGroup.mjs +59 -55
- package/components/slider.cjs +1 -1
- package/components/slider.d.ts +1 -55
- package/components/slider.mjs +92 -90
- package/components/sortableList.cjs +1 -1
- package/components/sortableList.mjs +149 -148
- package/components/swipeItem.cjs +1 -1
- package/components/swipeItem.mjs +100 -100
- package/components/tabs.cjs +1 -1
- package/components/tabs.mjs +135 -132
- package/components/toaster.cjs +1 -1
- package/components/toaster.d.ts +1 -37
- package/components/toaster.mjs +130 -128
- package/components/tooltip.cjs +1 -1
- package/components/tooltip.d.ts +1 -34
- package/components/tooltip.mjs +73 -69
- package/components/virtualList.cjs +1 -1
- package/components/virtualList.mjs +88 -87
- package/interactionListening.cjs +1 -1
- package/interactionListening.mjs +3 -3
- package/layer.cjs +1 -1
- package/layer.mjs +1 -1
- package/package.json +31 -30
- package/placement.cjs +1 -1
- package/placement.mjs +1 -1
- package/platform.cjs +1 -1
- package/platform.mjs +17 -14
- package/react/componentsContext.d.ts +1 -1
- package/react-shared.cjs +1 -1
- package/react-shared.mjs +1 -1
- package/scrolling.cjs +1 -1
- package/scrolling.mjs +1 -1
- package/utils/chart/chartUtils.d.ts +3 -2
- package/utils/dashboard/dashboardUtils.d.ts +1 -1
- package/utils/dom/domUtils.d.ts +6 -0
- package/create/src/agents.d.ts +0 -22
- package/create/src/agents.test.d.ts +0 -1
- package/create/src/index.d.ts +0 -1
- package/create/src/options.d.ts +0 -31
- package/create/src/options.test.d.ts +0 -1
- package/create/src/packageManager.d.ts +0 -5
- package/create/src/project.d.ts +0 -27
- package/create/src/project.test.d.ts +0 -1
- package/create/templates/ts/designs/azure.d.ts +0 -5
- package/create/templates/ts/designs/ember.d.ts +0 -5
- package/create/templates/ts/designs/mono.d.ts +0 -5
- package/create/templates/ts/src/App.d.ts +0 -2
- package/create/templates/ts/src/design.d.ts +0 -5
- package/create/templates/ts/src/main.d.ts +0 -0
- package/mcp/src/data.d.ts +0 -90
- package/mcp/src/data.test.d.ts +0 -1
- package/mcp/src/engine.d.ts +0 -23
- package/mcp/src/index.d.ts +0 -1
- package/mcp/src/search.d.ts +0 -38
- package/mcp/src/search.test.d.ts +0 -1
- package/mcp/src/server.d.ts +0 -18
- package/mcp/src/server.test.d.ts +0 -1
- package/mcp/src/styles.d.ts +0 -27
- package/mcp/src/styles.test.d.ts +0 -1
- package/mcp/src/tools.d.ts +0 -18
- package/mcp/src/vocabulary.d.ts +0 -41
- package/registry/blocks/dashboard-shell/dashboard-shell.d.ts +0 -24
- package/registry/blocks/dashboard-shell/dashboard-stats.d.ts +0 -13
- package/registry/blocks/data-grid/invoice-rows.d.ts +0 -15
- package/registry/blocks/data-grid/invoices-grid.d.ts +0 -1
- package/registry/blocks/settings-form/settings-form.d.ts +0 -17
- package/registry/designs/store/address-form.d.ts +0 -11
- package/registry/designs/store/cart-items.d.ts +0 -10
- package/registry/designs/store/cart-page.d.ts +0 -4
- package/registry/designs/store/checkout-page.d.ts +0 -7
- package/registry/designs/store/credit-card-form.d.ts +0 -10
- package/registry/designs/store/form-field.d.ts +0 -19
- package/registry/designs/store/order-summary.d.ts +0 -18
- package/registry/designs/store/product-art.d.ts +0 -26
- package/registry/designs/store/product-card.d.ts +0 -11
- package/registry/designs/store/product-gallery.d.ts +0 -11
- package/registry/designs/store/product-grid.d.ts +0 -10
- package/registry/designs/store/product-page.d.ts +0 -5
- package/registry/designs/store/quantity-stepper.d.ts +0 -13
- package/registry/designs/store/shipping-method.d.ts +0 -14
- package/registry/designs/store/store-data.d.ts +0 -53
- package/registry/designs/store/store-design.d.ts +0 -63
- package/registry/designs/store/store-shell.d.ts +0 -12
- package/registry/designs/store/storefront-page.d.ts +0 -4
- package/registry/designs/store/variant-picker.d.ts +0 -15
- package/supabase/functions/collect/index.d.ts +0 -30
- package/supabase/functions/collect/index.test.d.ts +0 -1
package/components/dashboard.mjs
CHANGED
|
@@ -1,45 +1,46 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import t from "../
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import d from "./
|
|
9
|
-
import
|
|
10
|
-
import {
|
|
2
|
+
import { f as e } from "../react-shared.mjs";
|
|
3
|
+
import { l as t, m as n } from "../platform.mjs";
|
|
4
|
+
import r from "../box.mjs";
|
|
5
|
+
import { a as i, i as a, o } from "../behavior.mjs";
|
|
6
|
+
import { t as s } from "../dashboardSchema.mjs";
|
|
7
|
+
import { i as c, r as l } from "../reporting.mjs";
|
|
8
|
+
import { Circle as u, Path as d, Svg as f } from "./svg.mjs";
|
|
9
|
+
import p from "./visuallyHidden.mjs";
|
|
10
|
+
import { createContext as m, useCallback as h, useContext as g, useId as _, useMemo as v, useRef as y, useState as b } from "react";
|
|
11
|
+
import { jsx as x, jsxs as S } from "react/jsx-runtime";
|
|
11
12
|
//#region src/utils/dashboard/dashboardUtils.ts
|
|
12
|
-
var
|
|
13
|
+
var C;
|
|
13
14
|
(function(e) {
|
|
14
15
|
let t = e.VERSION = 1, n = e.MIN_COLUMNS = 1, r = e.MAX_COLUMNS = 24;
|
|
15
16
|
function i(e, t, n) {
|
|
16
17
|
return Math.min(Math.max(e, t), n);
|
|
17
18
|
}
|
|
18
|
-
function
|
|
19
|
+
function a(e, t) {
|
|
19
20
|
return typeof e == "number" && Number.isFinite(e) ? Math.round(e) : t;
|
|
20
21
|
}
|
|
21
|
-
function
|
|
22
|
+
function o(e, t) {
|
|
22
23
|
return e.x < t.x + t.w && e.x + e.w > t.x && e.y < t.y + t.h && e.y + e.h > t.y;
|
|
23
24
|
}
|
|
24
|
-
e.overlaps =
|
|
25
|
+
e.overlaps = o;
|
|
25
26
|
function c(e, t) {
|
|
26
|
-
return e.find((e) => e.id !== t.id &&
|
|
27
|
+
return e.find((e) => e.id !== t.id && o(e, t));
|
|
27
28
|
}
|
|
28
29
|
function l(e, t) {
|
|
29
|
-
let n = Math.min(e.maxW ?? t, t), r = i(
|
|
30
|
+
let n = Math.min(e.maxW ?? t, t), r = i(a(e.w, 1), Math.max(1, Math.min(e.minW ?? 1, n)), Math.max(1, n)), o = i(a(e.h, 1), Math.max(1, e.minH ?? 1), Math.max(1, e.maxH ?? 2 ** 53 - 1));
|
|
30
31
|
return {
|
|
31
32
|
...e,
|
|
32
33
|
w: r,
|
|
33
|
-
h:
|
|
34
|
-
x: i(
|
|
35
|
-
y: Math.max(
|
|
34
|
+
h: o,
|
|
35
|
+
x: i(a(e.x, 0), 0, t - r),
|
|
36
|
+
y: Math.max(a(e.y, 0), 0)
|
|
36
37
|
};
|
|
37
38
|
}
|
|
38
39
|
function u(e, t) {
|
|
39
40
|
return e.y - t.y || e.x - t.x;
|
|
40
41
|
}
|
|
41
42
|
function d(e, t) {
|
|
42
|
-
let
|
|
43
|
+
let o = i(a(t, 12), n, r), s = e.map((e) => l(e, o)), d = (e) => +!e.fixed, f = [...s].sort((e, t) => d(e) - d(t) || u(e, t)), p = [];
|
|
43
44
|
for (let e of f) {
|
|
44
45
|
if (e.fixed) {
|
|
45
46
|
p.push(e);
|
|
@@ -58,11 +59,11 @@ var b;
|
|
|
58
59
|
}
|
|
59
60
|
e.resolve = d;
|
|
60
61
|
function f(e) {
|
|
61
|
-
let
|
|
62
|
+
let o = i(a(e.columns, 12), n, r);
|
|
62
63
|
return {
|
|
63
64
|
version: t,
|
|
64
|
-
columns:
|
|
65
|
-
items: d(e.items,
|
|
65
|
+
columns: o,
|
|
66
|
+
items: d(e.items, o)
|
|
66
67
|
};
|
|
67
68
|
}
|
|
68
69
|
e.normalize = f;
|
|
@@ -75,10 +76,10 @@ var b;
|
|
|
75
76
|
}
|
|
76
77
|
e.ranks = m;
|
|
77
78
|
function h(e, t) {
|
|
78
|
-
let n = (n) => !
|
|
79
|
+
let n = (n) => !o(t, n) && !e.some((e) => e.id !== n.id && e.id !== t.id && o(e, n));
|
|
79
80
|
return e.map((e) => {
|
|
80
81
|
if (e.id === t.id) return t;
|
|
81
|
-
if (e.fixed === !0 || !
|
|
82
|
+
if (e.fixed === !0 || !o(e, t)) return e;
|
|
82
83
|
let r = {
|
|
83
84
|
...e,
|
|
84
85
|
y: Math.max(t.y - e.h, 0)
|
|
@@ -89,14 +90,14 @@ var b;
|
|
|
89
90
|
};
|
|
90
91
|
});
|
|
91
92
|
}
|
|
92
|
-
function g(e, t,
|
|
93
|
+
function g(e, t, o, s) {
|
|
93
94
|
let c = p(e, t);
|
|
94
95
|
if (!c || c.fixed) return e;
|
|
95
96
|
let u = l({
|
|
96
97
|
...c,
|
|
97
|
-
x:
|
|
98
|
+
x: o,
|
|
98
99
|
y: s
|
|
99
|
-
}, i(
|
|
100
|
+
}, i(a(e.columns, 12), n, r));
|
|
100
101
|
return f({
|
|
101
102
|
...e,
|
|
102
103
|
items: h(e.items, u)
|
|
@@ -136,8 +137,8 @@ var b;
|
|
|
136
137
|
});
|
|
137
138
|
}
|
|
138
139
|
e.remove = y;
|
|
139
|
-
function b(e,
|
|
140
|
-
let s = i(o
|
|
140
|
+
function b(e, o) {
|
|
141
|
+
let s = i(a(o, 12), n, r);
|
|
141
142
|
if (s === e.columns) return f(e);
|
|
142
143
|
let c = s / e.columns, l = (e) => e === void 0 ? void 0 : i(Math.max(1, Math.round(e * c)), 1, s), u = e.items.map((e) => {
|
|
143
144
|
let t = i(Math.max(1, Math.round(e.w * c)), 1, s);
|
|
@@ -271,35 +272,35 @@ var b;
|
|
|
271
272
|
issues: o
|
|
272
273
|
};
|
|
273
274
|
}
|
|
274
|
-
e.parse = E, e.SCHEMA =
|
|
275
|
-
})(
|
|
276
|
-
var
|
|
275
|
+
e.parse = E, e.SCHEMA = s;
|
|
276
|
+
})(C ||= {});
|
|
277
|
+
var w = C, T = [
|
|
277
278
|
"xs",
|
|
278
279
|
"sm",
|
|
279
280
|
"md",
|
|
280
281
|
"lg",
|
|
281
282
|
"xl",
|
|
282
283
|
"xxl"
|
|
283
|
-
],
|
|
284
|
+
], E = [
|
|
284
285
|
"h1",
|
|
285
286
|
"h2",
|
|
286
287
|
"h3",
|
|
287
288
|
"h4",
|
|
288
289
|
"h5",
|
|
289
290
|
"h6"
|
|
290
|
-
],
|
|
291
|
-
function
|
|
291
|
+
], D = m(null);
|
|
292
|
+
function O(e, t, n) {
|
|
292
293
|
return Math.min(Math.max(e, t), n);
|
|
293
294
|
}
|
|
294
|
-
function
|
|
295
|
-
if (typeof e == "number") return [{ count:
|
|
296
|
-
let t =
|
|
295
|
+
function k(e) {
|
|
296
|
+
if (typeof e == "number") return [{ count: O(Math.round(e), w.MIN_COLUMNS, w.MAX_COLUMNS) }];
|
|
297
|
+
let t = T.filter((t) => typeof e[t] == "number").map((t) => ({
|
|
297
298
|
size: t,
|
|
298
|
-
count:
|
|
299
|
+
count: O(Math.round(e[t]), w.MIN_COLUMNS, w.MAX_COLUMNS)
|
|
299
300
|
}));
|
|
300
301
|
return t.length > 0 ? t : [{ count: 12 }];
|
|
301
302
|
}
|
|
302
|
-
function
|
|
303
|
+
function A(e) {
|
|
303
304
|
return {
|
|
304
305
|
gridColumnStart: e.x + 1,
|
|
305
306
|
gridColumnEnd: e.x + 1 + e.w,
|
|
@@ -307,10 +308,10 @@ function D(e) {
|
|
|
307
308
|
gridRowEnd: e.y + 1 + e.h
|
|
308
309
|
};
|
|
309
310
|
}
|
|
310
|
-
function
|
|
311
|
+
function ee(e) {
|
|
311
312
|
return `max${e[0].toUpperCase()}${e.slice(1)}`;
|
|
312
313
|
}
|
|
313
|
-
function
|
|
314
|
+
function te(e, t) {
|
|
314
315
|
let n = t ? -1 : 1;
|
|
315
316
|
if (e === "ArrowLeft") return {
|
|
316
317
|
x: -n,
|
|
@@ -329,39 +330,41 @@ function ee(e, t) {
|
|
|
329
330
|
y: 1
|
|
330
331
|
};
|
|
331
332
|
}
|
|
332
|
-
function
|
|
333
|
+
function j(e) {
|
|
333
334
|
return `column ${e.x + 1}, row ${e.y + 1}`;
|
|
334
335
|
}
|
|
335
|
-
function
|
|
336
|
+
function M(e) {
|
|
336
337
|
return `${e.w} ${e.w === 1 ? "column" : "columns"} by ${e.h} ${e.h === 1 ? "row" : "rows"}`;
|
|
337
338
|
}
|
|
338
|
-
function
|
|
339
|
-
let { children:
|
|
339
|
+
function N(e, s) {
|
|
340
|
+
let { children: u, layout: d, defaultLayout: f, onLayoutChange: m, onLayoutCommit: g, columns: C = {
|
|
340
341
|
xs: 1,
|
|
341
342
|
md: 6,
|
|
342
343
|
xxl: 12
|
|
343
|
-
}, rowHeight:
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
344
|
+
}, rowHeight: E = 24, editable: O = !1, label: N, labelledBy: ne, props: re, ...P } = e, F = y(null), I = h((e) => {
|
|
345
|
+
F.current = e, t(s, e);
|
|
346
|
+
}, [s]), [L, R] = b(null), [z, B] = b(null), [ie, V] = b(""), H = `${_()}-dashboard`, [U, ae] = a({
|
|
347
|
+
value: d,
|
|
348
|
+
defaultValue: f ?? {
|
|
349
|
+
version: w.VERSION,
|
|
347
350
|
columns: 12,
|
|
348
351
|
items: []
|
|
349
352
|
},
|
|
350
|
-
onChange:
|
|
351
|
-
}),
|
|
352
|
-
let e =
|
|
353
|
-
for (let n of
|
|
354
|
-
let r = n.count ===
|
|
353
|
+
onChange: m
|
|
354
|
+
}), W = v(() => w.normalize(U), [U]), G = o(W), K = l(g, "dashboard", "layoutCommit"), oe = typeof C == "number" ? String(C) : T.map((e) => C[e] ?? "").join(), q = v(() => k(C), [oe]), J = q[q.length - 1], Y = v(() => {
|
|
355
|
+
let e = w.ranks(W), t = /* @__PURE__ */ new Map();
|
|
356
|
+
for (let n of q) {
|
|
357
|
+
let r = n.count === J.count ? W : w.project(W, n.count), i = J.count / n.count;
|
|
355
358
|
for (let a of r.items) {
|
|
356
359
|
let r = t.get(a.id) ?? {
|
|
357
360
|
order: e.get(a.id) ?? 0,
|
|
358
361
|
fixed: a.fixed === !0
|
|
359
|
-
}, o =
|
|
362
|
+
}, o = A({
|
|
360
363
|
...a,
|
|
361
364
|
x: Math.round(a.x * i),
|
|
362
365
|
w: Math.round((a.x + a.w) * i) - Math.round(a.x * i)
|
|
363
366
|
});
|
|
364
|
-
n ===
|
|
367
|
+
n === q[0] ? r.placement = o : r.query = {
|
|
365
368
|
...r.query,
|
|
366
369
|
[n.size]: o
|
|
367
370
|
}, t.set(a.id, r);
|
|
@@ -369,151 +372,151 @@ function j(a) {
|
|
|
369
372
|
}
|
|
370
373
|
return t;
|
|
371
374
|
}, [
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
]),
|
|
376
|
-
|
|
377
|
-
}),
|
|
375
|
+
W,
|
|
376
|
+
q,
|
|
377
|
+
J.count
|
|
378
|
+
]), X = i((e, t) => {
|
|
379
|
+
w.same(e, G.current) || ae(e, t);
|
|
380
|
+
}), se = (e, t) => {
|
|
378
381
|
let n = e.getBoundingClientRect(), r = F.current, i = r && typeof getComputedStyle == "function" ? getComputedStyle(r) : void 0, a = Number.parseFloat(i?.columnGap ?? "") || 0, o = Number.parseFloat(i?.rowGap ?? "") || 0;
|
|
379
382
|
return {
|
|
380
383
|
x: (n.width + a) / t.w,
|
|
381
384
|
y: (n.height + o) / t.h
|
|
382
385
|
};
|
|
383
|
-
},
|
|
384
|
-
let i = e.kind === "move" ?
|
|
385
|
-
return
|
|
386
|
+
}, ce = (e) => e instanceof Element ? e.closest("[data-widget-id]") : null, Z = (e, t, n, r) => {
|
|
387
|
+
let i = e.kind === "move" ? w.moveTo(G.current, e.id, t, n) : w.resizeTo(G.current, e.id, t, n);
|
|
388
|
+
return X(i, {
|
|
386
389
|
reason: e.kind,
|
|
387
390
|
event: r
|
|
388
391
|
}), i;
|
|
389
|
-
},
|
|
390
|
-
let a =
|
|
391
|
-
!
|
|
392
|
-
id:
|
|
392
|
+
}, le = i((e, t, r, i) => {
|
|
393
|
+
let a = w.itemOf(G.current, t), o = ce(e.currentTarget);
|
|
394
|
+
!O || e.button !== 0 || e.defaultPrevented || !a || a.fixed || !o || (e.preventDefault(), e.currentTarget.setPointerCapture?.(e.pointerId), e.currentTarget.focus(), R({
|
|
395
|
+
id: t,
|
|
393
396
|
kind: i,
|
|
394
397
|
name: r,
|
|
395
398
|
origin: a,
|
|
396
|
-
before:
|
|
399
|
+
before: G.current,
|
|
397
400
|
pointer: {
|
|
398
|
-
id:
|
|
399
|
-
x:
|
|
400
|
-
y:
|
|
401
|
-
step:
|
|
402
|
-
rtl:
|
|
401
|
+
id: e.pointerId,
|
|
402
|
+
x: e.clientX,
|
|
403
|
+
y: e.clientY,
|
|
404
|
+
step: se(o, a),
|
|
405
|
+
rtl: n(o)
|
|
403
406
|
}
|
|
404
407
|
}));
|
|
405
|
-
}),
|
|
406
|
-
if (!
|
|
407
|
-
let { x: n, y: r, step: i, rtl: a } =
|
|
408
|
+
}), ue = i((e, t) => {
|
|
409
|
+
if (!L?.pointer || L.id !== t) return;
|
|
410
|
+
let { x: n, y: r, step: i, rtl: a } = L.pointer, o = {
|
|
408
411
|
x: e.clientX - n,
|
|
409
412
|
y: e.clientY - r
|
|
410
|
-
}, s =
|
|
411
|
-
if (
|
|
413
|
+
}, s = w.cellsMoved(a ? -o.x : o.x, o.y, i), c = L.origin, l = L.kind === "move" ? Z(L, c.x + s.columns, c.y + s.rows, e) : Z(L, c.w + s.columns, c.h + s.rows, e), u = w.itemOf(l, t);
|
|
414
|
+
if (L.kind !== "move" || !u) return;
|
|
412
415
|
let d = {
|
|
413
416
|
x: (u.x - c.x) * i.x * (a ? -1 : 1),
|
|
414
417
|
y: (u.y - c.y) * i.y
|
|
415
418
|
};
|
|
416
|
-
|
|
417
|
-
}), Q =
|
|
418
|
-
if (!
|
|
419
|
-
let n =
|
|
420
|
-
e.currentTarget.releasePointerCapture?.(
|
|
421
|
-
reason:
|
|
419
|
+
B({ translate: `${Math.round(o.x - d.x)}px ${Math.round(o.y - d.y)}px` });
|
|
420
|
+
}), Q = i((e, t) => {
|
|
421
|
+
if (!L?.pointer || L.id !== t) return;
|
|
422
|
+
let n = w.itemOf(G.current, t);
|
|
423
|
+
e.currentTarget.releasePointerCapture?.(L.pointer.id), R(null), B(null), K(G.current, {
|
|
424
|
+
reason: L.kind,
|
|
422
425
|
event: e
|
|
423
|
-
}), n &&
|
|
424
|
-
}),
|
|
425
|
-
|
|
426
|
+
}), n && V(L.kind === "move" ? `${L.name} moved to ${j(n)}.` : `${L.name} resized to ${M(n)}.`);
|
|
427
|
+
}), de = c("dashboard"), fe = i((e, t) => {
|
|
428
|
+
de("grabCancel", e.id, {
|
|
426
429
|
reason: t.type === "blur" ? "blur" : "escape",
|
|
427
430
|
event: t
|
|
428
|
-
}),
|
|
431
|
+
}), X(e.before, {
|
|
429
432
|
reason: e.kind,
|
|
430
433
|
event: t
|
|
431
|
-
}),
|
|
432
|
-
}),
|
|
433
|
-
if (!
|
|
434
|
-
let a =
|
|
434
|
+
}), R(null), V(`${e.name} put back at ${j(e.origin)}.`);
|
|
435
|
+
}), pe = i((e, t, r, i) => {
|
|
436
|
+
if (!O || e.defaultPrevented) return;
|
|
437
|
+
let a = L && L.id === t && L.kind === i && !L.pointer ? L : void 0, o = w.itemOf(G.current, t);
|
|
435
438
|
if (!o) return;
|
|
436
439
|
if (!a) {
|
|
437
|
-
if (
|
|
438
|
-
|
|
439
|
-
id:
|
|
440
|
+
if (e.key !== "Enter" && e.key !== " " || o.fixed) return;
|
|
441
|
+
e.preventDefault(), R({
|
|
442
|
+
id: t,
|
|
440
443
|
kind: i,
|
|
441
444
|
name: r,
|
|
442
445
|
origin: o,
|
|
443
|
-
before:
|
|
444
|
-
}),
|
|
446
|
+
before: G.current
|
|
447
|
+
}), de("grab", t, {
|
|
445
448
|
reason: i,
|
|
446
|
-
event:
|
|
447
|
-
}),
|
|
449
|
+
event: e
|
|
450
|
+
}), V(i === "move" ? `${r} picked up at ${j(o)}. Use the arrow keys to move it.` : `${r} held for resizing at ${M(o)}. Use the arrow keys to resize it.`);
|
|
448
451
|
return;
|
|
449
452
|
}
|
|
450
|
-
if (
|
|
451
|
-
|
|
453
|
+
if (e.key === "Escape") {
|
|
454
|
+
e.preventDefault(), fe(a, e);
|
|
452
455
|
return;
|
|
453
456
|
}
|
|
454
|
-
if (
|
|
455
|
-
|
|
457
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
458
|
+
e.preventDefault(), R(null), K(G.current, {
|
|
456
459
|
reason: i,
|
|
457
|
-
event:
|
|
458
|
-
}),
|
|
460
|
+
event: e
|
|
461
|
+
}), V(i === "move" ? `${r} dropped at ${j(o)}.` : `${r} resized to ${M(o)}.`);
|
|
459
462
|
return;
|
|
460
463
|
}
|
|
461
|
-
let s =
|
|
464
|
+
let s = te(e.key, n(e.currentTarget));
|
|
462
465
|
if (!s) return;
|
|
463
|
-
|
|
464
|
-
let c = i === "move" ?
|
|
465
|
-
l &&
|
|
466
|
-
}),
|
|
467
|
-
|
|
468
|
-
}),
|
|
469
|
-
editable:
|
|
470
|
-
placementOf: (e) =>
|
|
471
|
-
heldOf: (e) =>
|
|
472
|
-
offsetOf: (e) =>
|
|
473
|
-
outsideAuthoring:
|
|
474
|
-
instructionsId:
|
|
466
|
+
e.preventDefault();
|
|
467
|
+
let c = i === "move" ? Z(a, o.x + s.x, o.y + s.y, e) : Z(a, o.w + s.x, o.h + s.y, e), l = w.itemOf(c, t);
|
|
468
|
+
l && V(i === "move" ? `${r}, ${j(l)}.` : `${r}, ${M(l)}.`);
|
|
469
|
+
}), me = i((e, t, n) => {
|
|
470
|
+
L && L.id === t && L.kind === n && !L.pointer && fe(L, e);
|
|
471
|
+
}), he = v(() => ({
|
|
472
|
+
editable: O,
|
|
473
|
+
placementOf: (e) => Y.get(e),
|
|
474
|
+
heldOf: (e) => L && L.id === e ? L : void 0,
|
|
475
|
+
offsetOf: (e) => L && L.id === e && z ? z : void 0,
|
|
476
|
+
outsideAuthoring: J.size ? { [ee(J.size)]: { display: "none" } } : void 0,
|
|
477
|
+
instructionsId: H,
|
|
475
478
|
handleProps: (e, t, n) => ({
|
|
476
479
|
type: "button",
|
|
477
480
|
"aria-label": n === "move" ? `Move ${t}` : `Resize ${t}`,
|
|
478
|
-
"aria-pressed": !!(
|
|
479
|
-
"aria-describedby":
|
|
480
|
-
onPointerDown: (r) =>
|
|
481
|
-
onPointerMove: (t) =>
|
|
481
|
+
"aria-pressed": !!(L && L.id === e && L.kind === n),
|
|
482
|
+
"aria-describedby": H,
|
|
483
|
+
onPointerDown: (r) => le(r, e, t, n),
|
|
484
|
+
onPointerMove: (t) => ue(t, e),
|
|
482
485
|
onPointerUp: (t) => Q(t, e),
|
|
483
486
|
onPointerCancel: (t) => Q(t, e),
|
|
484
|
-
onKeyDown: (r) =>
|
|
485
|
-
onBlur: (t) =>
|
|
487
|
+
onKeyDown: (r) => pe(r, e, t, n),
|
|
488
|
+
onBlur: (t) => me(t, e, n)
|
|
486
489
|
})
|
|
487
490
|
}), [
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
Z,
|
|
495
|
-
oe,
|
|
496
|
-
Q,
|
|
491
|
+
O,
|
|
492
|
+
Y,
|
|
493
|
+
L,
|
|
494
|
+
z,
|
|
495
|
+
J.size,
|
|
496
|
+
H,
|
|
497
497
|
le,
|
|
498
|
-
ue
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
498
|
+
ue,
|
|
499
|
+
Q,
|
|
500
|
+
pe,
|
|
501
|
+
me
|
|
502
|
+
]), $ = L ? Y.get(L.id) : void 0;
|
|
503
|
+
return /* @__PURE__ */ S(D.Provider, {
|
|
504
|
+
value: he,
|
|
502
505
|
children: [
|
|
503
|
-
/* @__PURE__ */
|
|
504
|
-
ref:
|
|
506
|
+
/* @__PURE__ */ S(r, {
|
|
507
|
+
ref: I,
|
|
505
508
|
component: "dashboard",
|
|
506
509
|
...P,
|
|
507
|
-
variant: [P.variant, { dragging:
|
|
508
|
-
vars: { "dashboard-row": `${
|
|
509
|
-
gridTemplateColumns:
|
|
510
|
+
variant: [P.variant, { dragging: L !== null }],
|
|
511
|
+
vars: { "dashboard-row": `${E / 4}rem` },
|
|
512
|
+
gridTemplateColumns: J.count,
|
|
510
513
|
props: {
|
|
511
514
|
role: "list",
|
|
512
|
-
"aria-label":
|
|
513
|
-
"aria-labelledby":
|
|
514
|
-
...
|
|
515
|
+
"aria-label": N,
|
|
516
|
+
"aria-labelledby": ne,
|
|
517
|
+
...re
|
|
515
518
|
},
|
|
516
|
-
children: [
|
|
519
|
+
children: [u, $ && /* @__PURE__ */ x(r, {
|
|
517
520
|
component: "dashboard.placeholder",
|
|
518
521
|
order: $.order,
|
|
519
522
|
cq: $.query,
|
|
@@ -524,31 +527,31 @@ function j(a) {
|
|
|
524
527
|
}
|
|
525
528
|
})]
|
|
526
529
|
}),
|
|
527
|
-
/* @__PURE__ */
|
|
530
|
+
/* @__PURE__ */ x(p, {
|
|
528
531
|
props: { role: "status" },
|
|
529
|
-
children:
|
|
532
|
+
children: ie
|
|
530
533
|
}),
|
|
531
|
-
/* @__PURE__ */
|
|
532
|
-
id:
|
|
534
|
+
/* @__PURE__ */ x(p, {
|
|
535
|
+
id: H,
|
|
533
536
|
children: "Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back."
|
|
534
537
|
})
|
|
535
538
|
]
|
|
536
539
|
});
|
|
537
540
|
}
|
|
538
|
-
function
|
|
539
|
-
return e === "resize" ? /* @__PURE__ */
|
|
541
|
+
function ne({ kind: e }) {
|
|
542
|
+
return e === "resize" ? /* @__PURE__ */ x(f, {
|
|
540
543
|
viewBox: "0 0 24 24",
|
|
541
544
|
width: "1rem",
|
|
542
545
|
height: "1rem",
|
|
543
546
|
rtl: { flip: "xAxis" },
|
|
544
547
|
props: { fill: "none" },
|
|
545
|
-
children: /* @__PURE__ */
|
|
548
|
+
children: /* @__PURE__ */ x(d, {
|
|
546
549
|
d: "M20 10 10 20M20 16l-4 4",
|
|
547
550
|
stroke: "currentColor",
|
|
548
551
|
strokeWidth: 2,
|
|
549
552
|
strokeLinecap: "round"
|
|
550
553
|
})
|
|
551
|
-
}) : /* @__PURE__ */
|
|
554
|
+
}) : /* @__PURE__ */ S(f, {
|
|
552
555
|
viewBox: "0 0 24 24",
|
|
553
556
|
width: "1rem",
|
|
554
557
|
height: "1rem",
|
|
@@ -556,7 +559,7 @@ function M({ kind: e }) {
|
|
|
556
559
|
8,
|
|
557
560
|
12,
|
|
558
561
|
16
|
|
559
|
-
].map((e) => /* @__PURE__ */
|
|
562
|
+
].map((e) => /* @__PURE__ */ x(u, {
|
|
560
563
|
cx: 9,
|
|
561
564
|
cy: e,
|
|
562
565
|
r: 1.4,
|
|
@@ -565,7 +568,7 @@ function M({ kind: e }) {
|
|
|
565
568
|
8,
|
|
566
569
|
12,
|
|
567
570
|
16
|
|
568
|
-
].map((e) => /* @__PURE__ */
|
|
571
|
+
].map((e) => /* @__PURE__ */ x(u, {
|
|
569
572
|
cx: 15,
|
|
570
573
|
cy: e,
|
|
571
574
|
r: 1.4,
|
|
@@ -573,13 +576,13 @@ function M({ kind: e }) {
|
|
|
573
576
|
}, e))]
|
|
574
577
|
});
|
|
575
578
|
}
|
|
576
|
-
function
|
|
577
|
-
return /* @__PURE__ */
|
|
579
|
+
function re() {
|
|
580
|
+
return /* @__PURE__ */ x(f, {
|
|
578
581
|
viewBox: "0 0 24 24",
|
|
579
582
|
width: "1rem",
|
|
580
583
|
height: "1rem",
|
|
581
584
|
props: { fill: "none" },
|
|
582
|
-
children: /* @__PURE__ */
|
|
585
|
+
children: /* @__PURE__ */ x(d, {
|
|
583
586
|
d: "M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4",
|
|
584
587
|
stroke: "currentColor",
|
|
585
588
|
strokeWidth: 2,
|
|
@@ -589,115 +592,113 @@ function N() {
|
|
|
589
592
|
});
|
|
590
593
|
}
|
|
591
594
|
function P(e) {
|
|
592
|
-
let { id:
|
|
595
|
+
let { id: t, children: n, title: i, name: a, description: o, actions: s, level: c = 3, loading: u = !1, error: d, empty: f, onRefresh: p, refreshLabel: m, props: h, ..._ } = e, v = g(D), y = t === void 0 ? void 0 : v?.placementOf(t), b = t === void 0 ? void 0 : v?.heldOf(t), C = a ?? (typeof i == "string" ? i : void 0) ?? t ?? "Widget", w = v?.editable === !0 && y !== void 0 && !y.fixed, T = l((e, t) => p?.(), "widget", "refresh"), O = (e) => w && t !== void 0 ? /* @__PURE__ */ x(r, {
|
|
593
596
|
component: "widget.handle",
|
|
594
597
|
tag: "button",
|
|
595
598
|
variant: {
|
|
596
599
|
editable: !0,
|
|
597
|
-
grabbed:
|
|
600
|
+
grabbed: b?.kind === e,
|
|
598
601
|
corner: e === "resize"
|
|
599
602
|
},
|
|
600
|
-
cq:
|
|
601
|
-
props:
|
|
602
|
-
children: /* @__PURE__ */
|
|
603
|
-
}) : null,
|
|
603
|
+
cq: v?.outsideAuthoring,
|
|
604
|
+
props: v?.handleProps(t, C, e),
|
|
605
|
+
children: /* @__PURE__ */ x(ne, { kind: e })
|
|
606
|
+
}) : null, k = () => u ? /* @__PURE__ */ x(r, {
|
|
604
607
|
component: "widget.skeleton",
|
|
605
608
|
props: { "aria-hidden": !0 },
|
|
606
609
|
children: [
|
|
607
610
|
80,
|
|
608
611
|
100,
|
|
609
612
|
60
|
|
610
|
-
].map((e) => /* @__PURE__ */
|
|
613
|
+
].map((e) => /* @__PURE__ */ x(r, {
|
|
611
614
|
component: "widget.skeleton.bar",
|
|
612
615
|
width: `${e}%`
|
|
613
616
|
}, e))
|
|
614
|
-
}) : d ? /* @__PURE__ */
|
|
617
|
+
}) : d ? /* @__PURE__ */ S(r, {
|
|
615
618
|
component: "widget.message",
|
|
616
619
|
variant: { error: !0 },
|
|
617
620
|
props: { role: "status" },
|
|
618
|
-
children: [d,
|
|
621
|
+
children: [d, p && /* @__PURE__ */ x(r, {
|
|
619
622
|
tag: "button",
|
|
620
623
|
component: "widget.retry",
|
|
621
624
|
props: {
|
|
622
625
|
type: "button",
|
|
623
|
-
onClick: (e) =>
|
|
626
|
+
onClick: (e) => T(t, {
|
|
624
627
|
reason: "retry",
|
|
625
628
|
event: e
|
|
626
629
|
})
|
|
627
630
|
},
|
|
628
631
|
children: "Try again"
|
|
629
632
|
})]
|
|
630
|
-
}) : f ? /* @__PURE__ */
|
|
633
|
+
}) : f ? /* @__PURE__ */ x(r, {
|
|
631
634
|
component: "widget.message",
|
|
632
635
|
children: f === !0 ? "Nothing to show yet." : f
|
|
633
|
-
}) :
|
|
634
|
-
return /* @__PURE__ */
|
|
636
|
+
}) : n, A = i !== void 0 || o !== void 0 || s !== void 0 || p !== void 0 || w;
|
|
637
|
+
return /* @__PURE__ */ S(r, {
|
|
635
638
|
component: "widget",
|
|
636
639
|
..._,
|
|
637
640
|
variant: [_.variant, {
|
|
638
|
-
dragging:
|
|
639
|
-
grabbed:
|
|
641
|
+
dragging: b?.pointer !== void 0,
|
|
642
|
+
grabbed: b !== void 0 && b.pointer === void 0
|
|
640
643
|
}],
|
|
641
|
-
order:
|
|
642
|
-
cq:
|
|
643
|
-
...
|
|
644
|
+
order: y?.order,
|
|
645
|
+
cq: y?.query,
|
|
646
|
+
...y?.placement,
|
|
644
647
|
style: {
|
|
645
|
-
...
|
|
648
|
+
...t === void 0 ? void 0 : v?.offsetOf(t),
|
|
646
649
|
..._.style
|
|
647
650
|
},
|
|
648
651
|
props: {
|
|
649
|
-
role:
|
|
652
|
+
role: y ? "listitem" : void 0,
|
|
650
653
|
"aria-busy": u || void 0,
|
|
651
|
-
"data-widget-id":
|
|
652
|
-
...
|
|
654
|
+
"data-widget-id": t,
|
|
655
|
+
...h
|
|
653
656
|
},
|
|
654
657
|
children: [
|
|
655
|
-
|
|
658
|
+
A && /* @__PURE__ */ S(r, {
|
|
656
659
|
component: "widget.header",
|
|
657
660
|
children: [
|
|
658
661
|
O("move"),
|
|
659
|
-
/* @__PURE__ */
|
|
662
|
+
/* @__PURE__ */ S(r, {
|
|
660
663
|
component: "widget.label",
|
|
661
|
-
children: [i !== void 0 && /* @__PURE__ */
|
|
664
|
+
children: [i !== void 0 && /* @__PURE__ */ x(r, {
|
|
662
665
|
component: "widget.title",
|
|
663
|
-
tag:
|
|
666
|
+
tag: E[c - 1],
|
|
664
667
|
children: i
|
|
665
|
-
}), o !== void 0 && /* @__PURE__ */
|
|
668
|
+
}), o !== void 0 && /* @__PURE__ */ x(r, {
|
|
666
669
|
component: "widget.description",
|
|
667
670
|
children: o
|
|
668
671
|
})]
|
|
669
672
|
}),
|
|
670
|
-
|
|
673
|
+
p && /* @__PURE__ */ x(r, {
|
|
671
674
|
component: "widget.handle",
|
|
672
675
|
tag: "button",
|
|
673
676
|
variant: { editable: !0 },
|
|
674
677
|
props: {
|
|
675
678
|
type: "button",
|
|
676
|
-
"aria-label":
|
|
677
|
-
onClick: (e) =>
|
|
679
|
+
"aria-label": m ?? `Refresh ${C}`,
|
|
680
|
+
onClick: (e) => T(t, {
|
|
678
681
|
reason: "refresh",
|
|
679
682
|
event: e
|
|
680
683
|
})
|
|
681
684
|
},
|
|
682
|
-
children: /* @__PURE__ */
|
|
685
|
+
children: /* @__PURE__ */ x(re, {})
|
|
683
686
|
}),
|
|
684
|
-
|
|
687
|
+
s !== void 0 && /* @__PURE__ */ x(r, {
|
|
685
688
|
component: "widget.actions",
|
|
686
|
-
children:
|
|
689
|
+
children: s
|
|
687
690
|
})
|
|
688
691
|
]
|
|
689
692
|
}),
|
|
690
|
-
/* @__PURE__ */
|
|
693
|
+
/* @__PURE__ */ x(r, {
|
|
691
694
|
component: "widget.body",
|
|
692
|
-
children:
|
|
695
|
+
children: k()
|
|
693
696
|
}),
|
|
694
697
|
O("resize")
|
|
695
698
|
]
|
|
696
699
|
});
|
|
697
700
|
}
|
|
698
|
-
var F =
|
|
699
|
-
F.displayName = "DashboardGrid";
|
|
700
|
-
var I = P;
|
|
701
|
+
var F = e(N, "DashboardGrid"), I = P;
|
|
701
702
|
I.displayName = "Widget";
|
|
702
703
|
//#endregion
|
|
703
|
-
export {
|
|
704
|
+
export { w as DashboardUtils, I as Widget, F as default };
|