@box-kite/react 2.2.6 → 2.2.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/.claude/rules/box-kite-rules.md +2 -0
- package/.claude/skills/box-kite/SKILL.md +2 -0
- package/.claude/skills/box-kite/references/extending.md +10 -0
- package/.claude/skills/box-kite/references/styling.md +3 -2
- package/.cursor/rules/box-kite.mdc +2 -0
- package/AGENTS.md +2 -0
- package/BOX_AI_CONTEXT.md +128 -2
- package/BOX_KITE_AI_CONTEXT.md +128 -2
- 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 +14 -0
- package/box.mjs +17 -16
- package/catalog.cjs +1 -1
- package/catalog.mjs +8 -0
- package/client.cjs +1 -1
- package/client.mjs +144 -113
- 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/headerCellModel.d.ts +1 -0
- package/components/dataGrid/models/rangeModel.d.ts +3 -0
- package/components/dataGrid.cjs +3 -3
- package/components/dataGrid.mjs +1015 -923
- package/components/dateField.cjs +1 -1
- package/components/dateField.mjs +165 -159
- package/components/datePicker.cjs +1 -1
- package/components/datePicker.mjs +198 -183
- 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/semantics.d.ts +29 -29
- 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/create/src/index.d.ts +1 -0
- package/create/src/options.d.ts +27 -0
- package/create/src/options.test.d.ts +1 -0
- package/create/src/packageManager.d.ts +5 -0
- package/create/src/project.d.ts +25 -0
- package/create/src/project.test.d.ts +1 -0
- package/create/templates/ts/designs/azure.d.ts +5 -0
- package/create/templates/ts/designs/ember.d.ts +5 -0
- package/create/templates/ts/designs/mono.d.ts +5 -0
- package/create/templates/ts/src/App.d.ts +2 -0
- package/create/templates/ts/src/design.d.ts +5 -0
- package/create/templates/ts/src/main.d.ts +0 -0
- package/dataGridDateParts.cjs +1 -1
- package/dataGridDateParts.mjs +56 -55
- package/dataGridList.cjs +1 -1
- package/dataGridList.mjs +437 -436
- package/docs/props.md +19 -19
- 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 +139 -70
- 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/theme/theme.d.ts +9 -0
- package/react/theme/themeContext.d.ts +2 -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/rsc.cjs +1 -1
- package/rsc.d.ts +3 -0
- package/rsc.mjs +1 -1
- 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/dataGridDateParts.mjs
CHANGED
|
@@ -2,16 +2,17 @@ import e from "./box.mjs";
|
|
|
2
2
|
import { n as t, r as n, t as r } from "./dates.mjs";
|
|
3
3
|
import { j as i, v as a, w as o } from "./date-math.mjs";
|
|
4
4
|
import { m as s } from "./date-input.mjs";
|
|
5
|
-
import {
|
|
6
|
-
import l from "./
|
|
7
|
-
import u from "./components/
|
|
8
|
-
import d from "./components/
|
|
9
|
-
import f from "./components/
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
5
|
+
import { t as c } from "./reporting.mjs";
|
|
6
|
+
import { n as l } from "./date-environment.mjs";
|
|
7
|
+
import u from "./components/flex.mjs";
|
|
8
|
+
import d from "./components/dropdown.mjs";
|
|
9
|
+
import f from "./components/dateField.mjs";
|
|
10
|
+
import p from "./components/datePicker.mjs";
|
|
11
|
+
import { t as m } from "./dataGridListLayout.mjs";
|
|
12
|
+
import { useState as h } from "react";
|
|
13
|
+
import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
13
14
|
//#region src/components/dataGrid/components/dataGridDateParts.tsx
|
|
14
|
-
var
|
|
15
|
+
var y = {
|
|
15
16
|
date: { dateStyle: "medium" },
|
|
16
17
|
time: { timeStyle: "short" },
|
|
17
18
|
datetime: {
|
|
@@ -19,34 +20,34 @@ var v = {
|
|
|
19
20
|
timeStyle: "short"
|
|
20
21
|
}
|
|
21
22
|
};
|
|
22
|
-
function
|
|
23
|
+
function b(e) {
|
|
23
24
|
return e instanceof Date || typeof e == "string" || typeof e == "number" ? e : null;
|
|
24
25
|
}
|
|
25
|
-
function
|
|
26
|
-
let { value: t, format: i } = e, { locale: a, zone: o } =
|
|
27
|
-
if (i === "relative") return /* @__PURE__ */ g
|
|
26
|
+
function x(e) {
|
|
27
|
+
let { value: t, format: i } = e, { locale: a, zone: o } = l();
|
|
28
|
+
if (i === "relative") return /* @__PURE__ */ _(g, { children: n(b(t), {
|
|
28
29
|
locale: a,
|
|
29
30
|
zone: o
|
|
30
31
|
}) });
|
|
31
|
-
let s = typeof i == "string" ?
|
|
32
|
-
return /* @__PURE__ */ g
|
|
32
|
+
let s = typeof i == "string" ? y[i] : i;
|
|
33
|
+
return /* @__PURE__ */ _(g, { children: r(b(t), {
|
|
33
34
|
...s,
|
|
34
35
|
locale: a,
|
|
35
36
|
zone: s.zone ?? o
|
|
36
37
|
}) });
|
|
37
38
|
}
|
|
38
|
-
function
|
|
39
|
+
function S(e, t) {
|
|
39
40
|
return t === null ? null : e instanceof Date ? o(t) : typeof e == "string" && /z$/i.test(e) ? i(t) : t;
|
|
40
41
|
}
|
|
41
|
-
function
|
|
42
|
-
let { cell: t, label: n, errorId: r, onBlur: i } = e, { type: o, zone: s, min:
|
|
43
|
-
return /* @__PURE__ */
|
|
42
|
+
function C(e) {
|
|
43
|
+
let { cell: t, label: n, errorId: r, onBlur: i } = e, { type: o, zone: s, min: l, max: u } = t.editor, d = t.draft instanceof Date || typeof t.draft == "string" ? a(t.draft) : null;
|
|
44
|
+
return /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(f, {
|
|
44
45
|
type: o,
|
|
45
|
-
value:
|
|
46
|
+
value: d,
|
|
46
47
|
zone: s,
|
|
47
|
-
min: typeof
|
|
48
|
-
max: typeof
|
|
49
|
-
onValueChange: (e) => t.setDraft(o === "datetime" ?
|
|
48
|
+
min: typeof l == "string" ? l : void 0,
|
|
49
|
+
max: typeof u == "string" ? u : void 0,
|
|
50
|
+
onValueChange: (e) => t.setDraft(o === "datetime" ? S(t.value, e) : e),
|
|
50
51
|
width: "fit",
|
|
51
52
|
variant: "compact",
|
|
52
53
|
b: 0,
|
|
@@ -61,10 +62,10 @@ function S(e) {
|
|
|
61
62
|
e.currentTarget.contains(e.relatedTarget) || i();
|
|
62
63
|
}
|
|
63
64
|
}
|
|
64
|
-
});
|
|
65
|
+
}) });
|
|
65
66
|
}
|
|
66
|
-
function
|
|
67
|
-
let t = e.currentFilter?.type === "date" ? e.currentFilter : void 0, [n, r] =
|
|
67
|
+
function w(e) {
|
|
68
|
+
let t = e.currentFilter?.type === "date" ? e.currentFilter : void 0, [n, r] = h(t?.operator ?? "on"), [i, a] = h(t?.valueTo ?? null), o = t?.value ?? null;
|
|
68
69
|
return {
|
|
69
70
|
operator: n,
|
|
70
71
|
value: o,
|
|
@@ -81,7 +82,7 @@ function C(e) {
|
|
|
81
82
|
}
|
|
82
83
|
};
|
|
83
84
|
}
|
|
84
|
-
var
|
|
85
|
+
var T = [
|
|
85
86
|
{
|
|
86
87
|
value: "on",
|
|
87
88
|
label: "="
|
|
@@ -99,7 +100,7 @@ var w = [
|
|
|
99
100
|
label: "↔"
|
|
100
101
|
}
|
|
101
102
|
];
|
|
102
|
-
function
|
|
103
|
+
function E(e, t) {
|
|
103
104
|
let n = e.filterConfig, r = typeof n?.min == "string" ? n.min : void 0, i = typeof n?.max == "string" ? n.max : void 0;
|
|
104
105
|
return {
|
|
105
106
|
from: {
|
|
@@ -112,8 +113,8 @@ function T(e, t) {
|
|
|
112
113
|
}
|
|
113
114
|
};
|
|
114
115
|
}
|
|
115
|
-
function
|
|
116
|
-
let { column: t } = e, n = String(t.header ?? t.key), r = t.grid.localeText, i =
|
|
116
|
+
function D(e) {
|
|
117
|
+
let { column: t } = e, n = String(t.header ?? t.key), r = t.grid.localeText, i = w(t), a = E(t, i), o = (e, t, i, a, o = !1) => /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(p, {
|
|
117
118
|
value: e,
|
|
118
119
|
onValueChange: i,
|
|
119
120
|
min: a.min,
|
|
@@ -128,12 +129,12 @@ function E(e) {
|
|
|
128
129
|
focus: { outline: 0 },
|
|
129
130
|
tabIndex: -1,
|
|
130
131
|
props: { "aria-label": t }
|
|
131
|
-
});
|
|
132
|
-
return /* @__PURE__ */
|
|
132
|
+
}) });
|
|
133
|
+
return /* @__PURE__ */ v(u, {
|
|
133
134
|
component: `${t.grid.componentName}.filter.cell.input`,
|
|
134
135
|
ai: i.operator === "between" ? "start" : "center",
|
|
135
136
|
gap: 1,
|
|
136
|
-
children: [/* @__PURE__ */
|
|
137
|
+
children: [/* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(d, {
|
|
137
138
|
value: i.operator,
|
|
138
139
|
variant: "compact",
|
|
139
140
|
onChange: (e) => e && i.setOperator(e),
|
|
@@ -146,11 +147,11 @@ function E(e) {
|
|
|
146
147
|
tabIndex: -1,
|
|
147
148
|
"aria-label": r.filterComparison(n)
|
|
148
149
|
},
|
|
149
|
-
children:
|
|
150
|
+
children: T.map((e) => /* @__PURE__ */ _(d.Item, {
|
|
150
151
|
value: e.value,
|
|
151
152
|
children: e.label
|
|
152
153
|
}, e.value))
|
|
153
|
-
}), /* @__PURE__ */
|
|
154
|
+
}) }), /* @__PURE__ */ v(u, {
|
|
154
155
|
d: "column",
|
|
155
156
|
gap: 1,
|
|
156
157
|
flex1: !0,
|
|
@@ -159,17 +160,17 @@ function E(e) {
|
|
|
159
160
|
})]
|
|
160
161
|
});
|
|
161
162
|
}
|
|
162
|
-
function
|
|
163
|
-
let { column: n } = t, r = n.grid.componentName, i = n.grid.localeText, a = String(n.header ?? n.key), o =
|
|
164
|
-
return /* @__PURE__ */
|
|
163
|
+
function O(t) {
|
|
164
|
+
let { column: n } = t, r = n.grid.componentName, i = n.grid.localeText, a = String(n.header ?? n.key), o = w(n), s = E(n, o);
|
|
165
|
+
return /* @__PURE__ */ v(u, {
|
|
165
166
|
gap: 2,
|
|
166
167
|
ai: "center",
|
|
167
168
|
flexWrap: "wrap",
|
|
168
169
|
children: [
|
|
169
|
-
/* @__PURE__ */
|
|
170
|
+
/* @__PURE__ */ _(e, {
|
|
170
171
|
tag: "select",
|
|
171
172
|
component: `${r}.list.sheet.input`,
|
|
172
|
-
...
|
|
173
|
+
...m.INPUT,
|
|
173
174
|
width: 18,
|
|
174
175
|
flexShrink: 0,
|
|
175
176
|
props: {
|
|
@@ -177,47 +178,47 @@ function D(t) {
|
|
|
177
178
|
"aria-label": i.filterComparison(a),
|
|
178
179
|
onChange: (e) => o.setOperator(e.target.value)
|
|
179
180
|
},
|
|
180
|
-
children:
|
|
181
|
+
children: T.map((e) => /* @__PURE__ */ _("option", {
|
|
181
182
|
value: e.value,
|
|
182
183
|
children: e.label
|
|
183
184
|
}, e.value))
|
|
184
185
|
}),
|
|
185
|
-
/* @__PURE__ */
|
|
186
|
+
/* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(p, {
|
|
186
187
|
value: o.value,
|
|
187
188
|
onValueChange: o.setValue,
|
|
188
189
|
min: s.from.min,
|
|
189
190
|
max: s.from.max,
|
|
190
191
|
flex1: !0,
|
|
191
192
|
props: { "aria-label": o.operator === "between" ? i.filterFrom(a) : i.filterColumn(a) }
|
|
192
|
-
}),
|
|
193
|
-
o.operator === "between" && /* @__PURE__ */
|
|
193
|
+
}) }),
|
|
194
|
+
o.operator === "between" && /* @__PURE__ */ _(c, { children: /* @__PURE__ */ _(p, {
|
|
194
195
|
value: o.valueTo,
|
|
195
196
|
onValueChange: o.setValueTo,
|
|
196
197
|
min: s.to.min,
|
|
197
198
|
max: s.to.max,
|
|
198
199
|
flex1: !0,
|
|
199
200
|
props: { "aria-label": i.filterTo(a) }
|
|
200
|
-
})
|
|
201
|
+
}) })
|
|
201
202
|
]
|
|
202
203
|
});
|
|
203
204
|
}
|
|
204
|
-
function
|
|
205
|
+
function k(e, t) {
|
|
205
206
|
let n = e.type === "datetime" ? e.zone === "none" ? "datetime" : "instant" : e.type;
|
|
206
207
|
return s(t, {
|
|
207
208
|
kind: n,
|
|
208
209
|
zone: e.zone === "none" ? void 0 : e.zone
|
|
209
210
|
});
|
|
210
211
|
}
|
|
211
|
-
function
|
|
212
|
+
function A(e, n) {
|
|
212
213
|
return n === void 0 ? r(e) : t(e, n);
|
|
213
214
|
}
|
|
214
|
-
var
|
|
215
|
-
DateValue:
|
|
216
|
-
DateEditor:
|
|
217
|
-
DateFilter:
|
|
218
|
-
ListDateFilter:
|
|
219
|
-
parsePasted:
|
|
220
|
-
describeDay:
|
|
215
|
+
var j = {
|
|
216
|
+
DateValue: x,
|
|
217
|
+
DateEditor: C,
|
|
218
|
+
DateFilter: D,
|
|
219
|
+
ListDateFilter: O,
|
|
220
|
+
parsePasted: k,
|
|
221
|
+
describeDay: A
|
|
221
222
|
};
|
|
222
223
|
//#endregion
|
|
223
|
-
export {
|
|
224
|
+
export { j as default };
|
package/dataGridList.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const e=require("./box.cjs"),t=require("./components/svg.cjs"),n=require("./components/button.cjs"),r=require("./components/visuallyHidden.cjs"),i=require("./components/flex.cjs"),a=require("./components/checkbox.cjs"),o=require("./components/textbox.cjs"),s=require("./components/semantics.cjs"),c=require("./components/dataGrid.cjs"),l=require("./components/dialog.cjs"),u=require("./components/list.cjs"),d=require("./components/radioButton.cjs"),f=require("./components/skeleton.cjs"),p=require("./dataGridListLayout.cjs");let m=require("react"),h=require("react/jsx-runtime");function g(e){let{cell:t}=e,{AggregateCell:n}=t.column;return n?(0,h.jsx)(n,{cell:t}):(0,h.jsx)(h.Fragment,{children:t.value??`—`})}g.displayName=`DataGridListAggregate`;function _(t){let{grid:r,shown:a}=t,{list:o,pagination:s,aggregation:l}=r,u=r.componentName,d=r.localeText,f=s.state,m=l.hasFooter?l.footerCells.value.filter(e=>e.column.aggregate):[];return(0,h.jsxs)(h.Fragment,{children:[m.length>0&&(0,h.jsxs)(e.default,{bgColor:`currentColor/3`,px:4,py:3,children:[(0,h.jsx)(e.default,{fontWeight:600,fontSize:14,mb:1,children:l.footerLabel}),(0,h.jsx)(e.default,{tag:`dl`,display:`grid`,gridTemplateColumns:2,columnGap:4,rowGap:2,m:0,children:m.map(t=>(0,h.jsxs)(e.default,{minWidth:0,children:[(0,h.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:12,lineHeight:16,children:t.column.header??String(t.column.key)}),(0,h.jsx)(e.default,{tag:`dd`,m:0,fontSize:14,lineHeight:20,fontWeight:600,children:(0,h.jsx)(g,{cell:t})})]},t.column.key))})]}),f?(0,h.jsx)(i.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:(0,h.jsxs)(i.default,{ai:`center`,jc:`space-between`,gap:3,width:`fit`,children:[(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,...p.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoPrev,onClick:s.prevPage,props:{"aria-label":d.previousPage},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,h.jsx)(e.default,{textAlign:`center`,children:d.pageRowRange(s.startItem,s.endItem,s.totalItems)}),(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,...p.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoNext,onClick:s.nextPage,props:{"aria-label":d.nextPage},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]})}):(o.hasMore||a!==void 0)&&(0,h.jsxs)(i.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:[o.hasMore&&(0,h.jsx)(n.default,{type:`button`,component:`${u}.list.button`,width:`fit`,height:11,borderRadius:3,fontSize:15,fontWeight:500,color:`indigo-600`,cursor:`pointer`,theme:{dark:{color:`indigo-300`}},onClick:o.showMore,children:d.showMore(o.nextBatch)}),a!==void 0&&(0,h.jsx)(e.default,{children:d.shownCount(a,r.source.enabled?r.totalRowCount:r.filterStats.filtered)})]})]})}_.displayName=`DataGridListFooter`;function v(e){let{row:t}=e,{grid:n}=t,r=t.cells.flatMap(e=>e.aggregate?[e.aggregate]:[]),i=t.placeholder?``:String(t.groupValue);return(0,h.jsxs)(u.default.Item,{size:`sm`,bgColor:`currentColor/3`,ps:4+Math.min(t.depth,3)*4,props:{"aria-busy":t.placeholder||void 0},children:[n.list.selecting&&t.selectable&&(0,h.jsx)(u.default.Actions,{children:(0,h.jsx)(a.default,{variant:`datagrid`,checked:t.selected,indeterminate:t.indeterminate,onChange:t.toggleSelectAll,props:{"aria-label":n.localeText.selectGroupRows(i)}})}),(0,h.jsx)(c.f,{width:`16px`,height:`16px`,flexShrink:0,rotate:t.expanded?0:-90,rtl:{rotate:t.expanded?0:90}}),(0,h.jsxs)(u.default.Content,{children:[(0,h.jsx)(u.default.Title,{lines:1,fontSize:14,fontWeight:600,children:(0,h.jsx)(u.default.Action,{onClick:()=>t.toggleRow(),props:{"aria-expanded":t.expanded},children:i})}),r.length>0&&(0,h.jsx)(u.default.Row,{secondary:!0,wrap:!0,columnGap:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:r.map(e=>(0,h.jsxs)(s.Span,{display:`inline-flex`,gap:1,children:[(0,h.jsx)(s.Span,{children:e.column.header??String(e.column.key)}),(0,h.jsx)(s.Span,{fontWeight:600,children:(0,h.jsx)(g,{cell:e})})]},e.column.key))})]}),(0,h.jsx)(u.default.Meta,{px:2,borderRadius:999,fontSize:12,fontWeight:600,lineHeight:20,bgColor:`currentColor/10`,alignSelf:`center`,children:t.count})]})}v.displayName=`DataGridListGroup`;var y=(0,m.memo)(v);function b(e){let{row:t,column:n}=e,r=t.cells.find(e=>e.column===n);if(!r)return null;if(n.Cell)return(0,h.jsx)(n.Cell,{cell:r});let{value:i}=r;if(typeof i==`boolean`)return(0,h.jsx)(h.Fragment,{children:i?r.grid.localeText.booleanTrue:r.grid.localeText.booleanFalse});let a=c.u(n,i);return a&&i!=null&&i!==``?(0,h.jsx)(c.l,{value:i,format:a}):(0,h.jsx)(h.Fragment,{children:i==null||i===``?`—`:String(i)})}b.displayName=`DataGridListValue`;function x(t){let{row:r,index:i,position:o,setSize:l}=t,{grid:d}=r,{list:m}=d,{title:g,kicker:_,subtitle:v,end:y,fields:x}=m.layout.value,{selecting:S}=m,C=m.recordViewEnabled&&!r.placeholder,w=c.p(r)?r:void 0,T=d.props.def.rowDetail,E=d.localeText,D={"aria-posinset":o,"aria-setsize":l};if(r.placeholder)return(0,h.jsx)(u.default.Item,{props:{...D,"aria-busy":!0},children:(0,h.jsx)(f.default,{lines:2,flex1:!0})});let O=g?(0,h.jsx)(b,{row:r,column:g}):E.unnamedRow(r.rowIndex+1),k=g?String(r.cells.find(e=>e.column===g)?.value??``):``,A=m.checkboxId(r.key);return(0,h.jsxs)(u.default.Item,{ai:`start`,selected:!!d.props.def.rowSelection&&r.selected,chevron:C&&!S,ps:w?4+Math.min(w.level,3)*4:void 0,props:{...D,"data-list-key":String(r.key)},children:[S&&(0,h.jsx)(u.default.Actions,{width:6,jc:`center`,alignSelf:`center`,children:(0,h.jsx)(a.default,{id:A,variant:`datagrid`,checked:r.selected,indeterminate:r.indeterminate,onChange:r.toggleSelection})}),(0,h.jsxs)(u.default.Content,{children:[_&&(0,h.jsx)(u.default.Overline,{lines:1,children:(0,h.jsx)(b,{row:r,column:_})}),(0,h.jsxs)(u.default.Row,{ai:`start`,gap:3,children:[(0,h.jsxs)(u.default.Row,{jc:`start`,ai:`center`,gap:1,flex1:!0,children:[w?.hasChildren&&(0,h.jsx)(u.default.Actions,{ms:-2,children:(0,h.jsx)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,...p.t.ICON_BUTTON,width:8,height:8,onClick:w.toggleTree,props:{"aria-expanded":w.treeExpanded,"aria-label":(w.treeExpanded?E.collapseTreeRow:E.expandTreeRow)(k||E.unnamedRow(r.rowIndex+1))},children:(0,h.jsx)(c.f,{width:`16px`,height:`16px`,rotate:w.treeExpanded?0:-90,rtl:{rotate:w.treeExpanded?0:90}})})}),(0,h.jsx)(u.default.Title,{lines:1,flex1:!0,fontWeight:600,children:S?(0,h.jsx)(u.default.Action,{props:{htmlFor:A},children:O}):C?(0,h.jsx)(u.default.Action,{props:{"aria-haspopup":`dialog`},onClick:()=>m.openRecord(r,i),children:O}):O})]}),y&&(0,h.jsxs)(u.default.End,{fontSize:16,fontWeight:600,lineHeight:22,...p.t.TRUNCATE,children:[(0,h.jsx)(b,{row:r,column:y}),(0,h.jsx)(u.default.Meta,{fontWeight:400,...p.t.LABEL,children:y.header??String(y.key)})]})]}),v.length>0&&(0,h.jsx)(u.default.Description,{lines:1,children:v.map((e,t)=>(0,h.jsxs)(s.Span,{children:[t>0&&` · `,(0,h.jsx)(b,{row:r,column:e})]},e.key))}),x.length>0&&(0,h.jsx)(u.default.Fields,{mt:2,css:{gridTemplateColumns:`repeat(2, minmax(0, 1fr))`},children:x.map(t=>(0,h.jsx)(u.default.Field,{label:t.header??String(t.key),children:(0,h.jsx)(e.default,{...p.t.TRUNCATE,children:(0,h.jsx)(b,{row:r,column:t})})},t.key))}),T&&(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(u.default.Actions,{alignSelf:`start`,mt:1,ms:-2,children:(0,h.jsxs)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,display:`inline-flex`,ai:`center`,gap:1,minHeight:8,px:2,borderRadius:2,fontSize:13,fontWeight:500,cursor:`pointer`,onClick:r.toggleDetail,props:{"aria-expanded":r.expanded},children:[(0,h.jsx)(c.f,{width:`14px`,height:`14px`,rotate:r.expanded?0:-90,rtl:{rotate:r.expanded?0:90}}),E.details]})}),r.expanded&&(0,h.jsx)(u.default.Actions,{display:`block`,mt:2,children:(0,h.jsx)(e.default,{component:`${d.componentName}.list.detail`,p:3,borderRadius:2,fontSize:14,children:T.content(r.data)})})]})]})]})}x.displayName=`DataGridListItem`;var S=(0,m.memo)(x);function C(e){return(0,h.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1.25rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,h.jsx)(t.Path,{d:`M6 6l12 12M18 6L6 18`,strokeLinecap:`round`})})}var w=80;function T(t){let{grid:r,open:a,onOpen:o,onClose:s,title:c,trigger:u,actions:d,footer:f,tall:g,bodyProps:_,bodyRef:v,onKeyDown:y,children:b}=t,x=r.componentName,S=`${x}.list.sheet.line`,T=(0,m.useRef)(null),E=(0,m.useCallback)(e=>{let t=e.currentTarget.closest(`dialog`);e.button!==0||!t||e.target.closest(`button`)||(T.current={id:e.pointerId,y:e.clientY,dy:0,dialog:t},e.currentTarget.setPointerCapture(e.pointerId))},[]),D=(0,m.useCallback)(e=>{let t=T.current;if(!t||t.id!==e.pointerId)return;let{dialog:n}=t;t.dy=Math.max(0,e.clientY-t.y),n.style.transition=`none`,n.style.translate=`0 ${t.dy}px`},[]),O=(0,m.useCallback)(()=>{let e=T.current;if(T.current=null,!e)return;let{dialog:t}=e;t.style.transition=``,t.style.translate=``,e.dy>w&&s()},[s]);return(0,h.jsxs)(l.default,{component:`${x}.list.sheet`,display:`flex`,d:`column`,css:g?{minHeight:`min(32rem, calc(100dvh - 2rem))`}:void 0,open:a,onOpenChange:e=>e?o?.():s(),trigger:u,props:{onKeyDown:y},children:[(0,h.jsxs)(i.default,{d:`column`,flexShrink:0,css:{touchAction:`none`},props:{onPointerDown:E,onPointerMove:D,onPointerUp:O,onPointerCancel:O},children:[(0,h.jsx)(e.default,{width:9,height:1.25,mt:2,mx:`auto`,borderRadius:999,bgColor:`gray-300`,theme:{dark:{bgColor:`gray-600`}},props:{"aria-hidden":!0}}),(0,h.jsxs)(i.default,{component:`${S}`,ai:`center`,gap:2,ps:4,pe:2,py:2,bb:1,children:[(0,h.jsx)(l.default.Title,{flex1:!0,minWidth:0,m:0,fontSize:17,fontWeight:600,lineHeight:24,...p.t.TRUNCATE,children:c}),d,(0,h.jsx)(n.default,{type:`button`,component:`${x}.list.sheet.button`,...p.t.ICON_BUTTON,onClick:s,props:{"aria-label":r.localeText.close},children:(0,h.jsx)(C,{})})]})]}),(0,h.jsx)(e.default,{ref:v,flex1:!0,overflowY:`auto`,px:4,py:2,css:{overscrollBehavior:`contain`,touchAction:`pan-y`},props:_,children:b}),f&&(0,h.jsx)(i.default,{component:S,gap:3,flexShrink:0,px:4,pt:3,pb:4,bt:1,children:f})]})}T.displayName=`DataGridListSheet`;var E=60;function D({cell:t,index:r}){let{grid:a,column:o}=t,s=a.componentName,l=String(o.header??o.key),{editing:u}=t,d=(0,m.useRef)(null),f=(0,m.useRef)(!1);return(0,m.useEffect)(()=>{f.current&&!u&&d.current?.focus(),f.current=u},[u]),(0,h.jsxs)(e.default,{component:`${s}.list.sheet.line`,py:3,bb:1,children:[(0,h.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:13,lineHeight:18,children:l}),(0,h.jsxs)(e.default,{tag:`dd`,display:`flex`,ai:`center`,gap:2,m:0,fontSize:16,lineHeight:24,css:{fontVariantNumeric:`tabular-nums`,overflowWrap:`anywhere`},children:[u?(0,h.jsx)(i.default,{component:`${s}.list.sheet.input`,...p.t.INPUT,flex1:!0,ai:`center`,px:1,children:(0,h.jsx)(c.d,{cell:t,row:-1,columnIndex:r})}):(0,h.jsx)(e.default,{flex1:!0,minWidth:0,children:(0,h.jsx)(b,{row:t.row,column:o})}),t.editable&&!u&&(0,h.jsx)(n.default,{ref:d,type:`button`,component:`${s}.list.sheet.button`,...p.t.SHEET_BUTTON,height:10,onClick:()=>t.beginEdit(),props:{"aria-label":a.localeText.editCell(l)},children:a.localeText.edit})]})]})}function O(t){let{grid:r}=t,{list:o}=r,l=r.componentName,u=r.localeText,d=o.record,f=o.recordPosition,{title:g}=o.layout.value,_=(0,m.useRef)(null),v=(0,m.useRef)(null),y=d?.key;(0,m.useEffect)(()=>{v.current?.scrollTo?.({top:0})},[y]);let x=(0,m.useCallback)(()=>{let e=o.record?.key;r.edits.cancel(),o.closeRecord(),requestAnimationFrame(()=>{let t=r.sizingElement?.querySelectorAll(`[data-list-key]`)??[];Array.from(t).find(t=>t.dataset.listKey===String(e))?.querySelector(`[data-list-action]`)?.focus()})},[r,o]),S=(0,m.useCallback)(e=>{r.edits.isOpen&&r.edits.commit(),r.edits.isOpen||o.stepRecord(e)},[r,o]),C=e=>{_.current=e.pointerType===`touch`?{x:e.clientX,y:e.clientY}:null},w=e=>{let t=_.current;if(_.current=null,!t)return;let n=e.clientX-t.x,i=e.clientY-t.y;Math.abs(n)<E||Math.abs(n)<Math.abs(i)*1.5||S(n<0===r.isRtl?-1:1)},O=e=>{if(e.target.closest(`input,select,textarea,[role="combobox"]`))return;let t=r.isRtl?`ArrowLeft`:`ArrowRight`,n=r.isRtl?`ArrowRight`:`ArrowLeft`;(e.key===t||e.key===n)&&(e.preventDefault(),S(e.key===t?1:-1))},k=d&&f&&(0,h.jsxs)(i.default,{ai:`center`,gap:.5,flexShrink:0,children:[(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,...p.t.ICON_BUTTON,disabled:!o.hasPreviousRecord,onClick:()=>S(-1),props:{"aria-label":u.previousRow},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,h.jsx)(e.default,{fontSize:13,color:`gray-500`,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{"aria-live":`polite`},children:u.recordPosition(f.position,f.total)}),(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,...p.t.ICON_BUTTON,disabled:!o.hasNextRecord,onClick:()=>S(1),props:{"aria-label":u.nextRow},children:(0,h.jsx)(c.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]}),A=r.props.def.rowDetail;return(0,h.jsx)(T,{grid:r,open:!!d,onClose:x,tall:!0,title:d&&g?(0,h.jsx)(b,{row:d,column:g}):``,actions:k,onKeyDown:O,bodyRef:v,bodyProps:{onPointerDown:C,onPointerUp:w},children:d&&(0,h.jsxs)(h.Fragment,{children:[r.props.def.rowSelection&&(0,h.jsx)(e.default,{py:3,children:(0,h.jsx)(a.default,{variant:`datagrid`,checked:d.selected,onChange:d.toggleSelection,label:u.selectRow(d.rowIndex+1),labelProps:{display:`flex`,ai:`center`,gap:3,fontSize:15}})}),(0,h.jsx)(e.default,{tag:`dl`,m:0,children:o.recordColumns.map(e=>{let t=d.cells.findIndex(t=>t.column===e);return t===-1?null:(0,h.jsx)(D,{cell:d.cells[t],index:t},e.key)})}),A&&(0,h.jsxs)(i.default,{d:`column`,gap:2,py:3,children:[(0,h.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:u.details}),A.content(d.data)]})]})})}O.displayName=`DataGridListRecord`;function k(t){let{grid:r}=t,a=r.componentName,o=r.localeText,s=r.selectedRows.size;return!r.props.def.rowSelection||s===0?null:(0,h.jsxs)(i.default,{component:`${a}.list.selectionBar`,position:`sticky`,bottom:0,zIndex:2,ai:`center`,gap:2,px:4,py:2,fontSize:14,fontWeight:500,children:[(0,h.jsx)(e.default,{flex1:!0,minWidth:0,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},children:o.selectedRows(s)}),!r.allRowsSelected&&(0,h.jsx)(n.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:r.toggleSelectAllRows,children:o.selectAll}),(0,h.jsx)(n.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:r.clearSelection,children:o.clearSelection})]})}k.displayName=`DataGridListSelectionBar`;function A(e){return(0,h.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,h.jsx)(t.Path,{d:`M4 6h16M7 12h10M10 18h4`,strokeLinecap:`round`})})}var j=8,M=[{value:`eq`,label:`=`},{value:`ne`,label:`≠`},{value:`gt`,label:`>`},{value:`gte`,label:`≥`},{value:`lt`,label:`<`},{value:`lte`,label:`≤`},{value:`between`,label:`↔`}];function N({column:e}){let{currentFilter:t}=e,n=e.grid.componentName,r=e.grid.localeText,[i,a]=(0,m.useState)(t?.type===`text`?t.value:``),{debounce:s}=c.s(t,e=>c.c.textMatches(i,e),e=>a(e?.type===`text`?e.value:``));return(0,h.jsx)(o.default,{component:`${n}.list.sheet.input`,...p.t.INPUT,type:`search`,value:i,placeholder:e.filterConfig?.placeholder??r.filterPlaceholder,onChange:t=>{let n=t.target.value;a(n),s(`value`,()=>e.setTextFilter(n))},props:{"aria-label":r.filterColumn(String(e.header??e.key))}})}function P({column:t}){let{currentFilter:n}=t,r=t.grid.componentName,a=t.grid.localeText,s=String(t.header??t.key),l=t.filterConfig,[u,d]=(0,m.useState)(()=>c.c.numberDraft(n)),f=(0,m.useRef)(u),g=(0,m.useCallback)(e=>{f.current=e,d(e)},[]),{debounce:_,cancel:v}=c.s(n,e=>c.c.numberMatches(u,e),e=>g(c.c.numberDraft(e))),y=(e,n)=>{g({...f.current,...e});let r=()=>t.setNumberFilter(f.current.operator,f.current.value,f.current.valueTo);n?_(`value`,r):(v(),r())},b=(e,t,n,i)=>(0,h.jsx)(o.default,{component:`${r}.list.sheet.input`,...p.t.INPUT,type:`number`,value:e,step:l?.step,placeholder:n,onChange:e=>y({[i]:e.target.value},!0),props:{"aria-label":t,inputMode:`decimal`,min:l?.min,max:l?.max}});return(0,h.jsxs)(i.default,{gap:2,ai:`center`,children:[(0,h.jsx)(e.default,{tag:`select`,component:`${r}.list.sheet.input`,...p.t.INPUT,width:18,flexShrink:0,props:{value:u.operator,"aria-label":a.filterComparison(s),onChange:e=>y({operator:e.target.value},!1)},children:M.map(e=>(0,h.jsx)(`option`,{value:e.value,children:e.label},e.value))}),b(u.value,u.operator===`between`?a.filterFrom(s):a.filterColumn(s),u.operator===`between`?a.filterFromPlaceholder:l?.placeholder??a.filterValuePlaceholder,`value`),u.operator===`between`&&b(u.valueTo,a.filterTo(s),a.filterToPlaceholder,`valueTo`)]})}function F({column:e}){let t=c.m(!0);return t?(0,h.jsx)(t.ListDateFilter,{column:e}):null}function I({column:e}){let{currentFilter:t}=e,r=e.grid.componentName,s=e.grid.localeText,c=t?.type===`multiselect`?t.values:[],l=e.filterOptions,[u,d]=(0,m.useState)(``),f=t=>{e.setMultiselectFilter(c.includes(t)?c.filter(e=>e!==t):[...c,t])};if(l.length<=j)return(0,h.jsx)(i.default,{flexWrap:`wrap`,gap:2,children:l.map(e=>(0,h.jsx)(n.default,{type:`button`,component:`${r}.list.sheet.chip`,display:`inline-flex`,ai:`center`,minHeight:10,px:3.5,borderRadius:999,fontSize:14,cursor:`pointer`,onClick:()=>f(e.value),props:{"aria-pressed":c.includes(e.value)},children:e.label},String(e.value)))});let g=u.trim().toLocaleLowerCase(),_=g?l.filter(e=>e.label.toLocaleLowerCase().includes(g)):l;return(0,h.jsxs)(i.default,{d:`column`,gap:2,children:[(0,h.jsx)(o.default,{component:`${r}.list.sheet.input`,...p.t.INPUT,type:`search`,value:u,placeholder:s.filterSelectSearchPlaceholder,onChange:e=>d(e.target.value),props:{"aria-label":s.filterColumn(String(e.header??e.key))}}),(0,h.jsx)(i.default,{d:`column`,maxHeight:64,overflowY:`auto`,children:_.map(e=>(0,h.jsx)(a.default,{checked:c.includes(e.value),onChange:()=>f(e.value),label:e.label,labelProps:{component:`${r}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,bb:1}},String(e.value)))})]})}function L(e){let{column:t}=e;switch(t.filterConfig?.type){case void 0:return null;case`number`:return(0,h.jsx)(P,{column:t});case`multiselect`:return(0,h.jsx)(I,{column:t});case`date`:return(0,h.jsx)(F,{column:t});default:return(0,h.jsx)(N,{column:t})}}L.displayName=`DataGridListFilter`;function R(t){let{grid:r}=t,{list:a}=r,o=r.componentName,c=r.localeText,l=a.activeFilters.length,u=a.filterableColumns;return u.length===0?null:(0,h.jsx)(T,{grid:r,open:a.sheet===`filter`,onOpen:()=>a.openSheet(`filter`),onClose:()=>a.openSheet(null),title:c.filters,trigger:({ref:t,props:{onClick:r,...i}})=>(0,h.jsxs)(n.default,{type:`button`,component:`${o}.list.toolbar.button`,variant:{active:l>0},...p.t.PILL,ref:t,onClick:r,props:{...i,"aria-label":c.filtersLabel(l)},children:[(0,h.jsx)(A,{}),c.filters,l>0&&(0,h.jsx)(e.default,{tag:`span`,minWidth:5,height:5,px:1.5,borderRadius:999,bgColor:`indigo-600`,color:`white`,fontSize:12,fontWeight:600,lineHeight:20,textAlign:`center`,props:{"aria-hidden":!0},children:l})]}),footer:(0,h.jsxs)(h.Fragment,{children:[l>0&&(0,h.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.button`,...p.t.SHEET_BUTTON,onClick:r.clearColumnFilters,children:c.clearFilters}),(0,h.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.primary`,...p.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>a.openSheet(null),children:c.showRows(r.filterStats.filtered)})]}),children:u.map(e=>(0,h.jsxs)(i.default,{component:`${o}.list.sheet.line`,d:`column`,gap:2,py:3,bb:1,children:[(0,h.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:e.header??String(e.key)}),(0,h.jsx)(L,{column:e})]},e.key))})}R.displayName=`DataGridListFilterSheet`;function z(e){let{grid:t}=e,{list:r}=t,a=t.componentName,o=t.localeText,s=r.sortedColumn,l=t.sortDirection===`DESC`,u=`${t.identifier}-sort`,f={component:`${a}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,cursor:`pointer`,bb:1};return(0,h.jsxs)(T,{grid:t,open:r.sheet===`sort`,onClose:()=>r.openSheet(null),title:o.sortBy,onOpen:()=>r.openSheet(`sort`),trigger:({ref:e,props:{onClick:t,...r}})=>(0,h.jsxs)(n.default,{type:`button`,component:`${a}.list.toolbar.button`,variant:{active:!!s},...p.t.PILL,ref:e,onClick:t,props:r,children:[(0,h.jsx)(c.o,{width:`16px`,height:`16px`,fill:`currentColor`,rotate:l?180:0}),s?o.sortedBy(String(s.header??s.key),l):o.sortBy]}),footer:(0,h.jsxs)(h.Fragment,{children:[s&&(0,h.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.button`,...p.t.SHEET_BUTTON,onClick:()=>t.setSortColumn(s.key,void 0),children:o.clearSort}),(0,h.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.primary`,...p.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>r.openSheet(null),children:o.close})]}),children:[(0,h.jsx)(i.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,props:{"aria-label":o.sortBy},children:r.sortableColumns.map(e=>(0,h.jsx)(d.default,{name:u,checked:s===e,onChange:()=>t.setSortColumn(e.key,l&&s?`DESC`:`ASC`),label:e.header??String(e.key),labelProps:f},e.key))}),s&&(0,h.jsx)(i.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,pt:4,props:{"aria-label":`${o.sortBy}: ${s.header??s.key}`},children:[`ASC`,`DESC`].map(e=>(0,h.jsx)(d.default,{name:`${u}-direction`,checked:t.sortDirection===e,onChange:()=>t.setSortColumn(s.key,e),label:e===`ASC`?o.ascending:o.descending,labelProps:f},e))})]})}z.displayName=`DataGridListSortSheet`;function B({grid:e}){let t=e.componentName,[r,a]=(0,m.useState)(e.globalFilterValue),{debounce:s,cancel:l}=c.s(e.globalFilterValue,e=>e===r,a);return(0,h.jsxs)(i.default,{position:`relative`,ai:`center`,children:[(0,h.jsx)(i.default,{position:`absolute`,insetStart:3.5,pointerEvents:`none`,color:`gray-500`,props:{"aria-hidden":!0},children:(0,h.jsx)(c.r,{fill:`currentColor`,width:`16px`})}),(0,h.jsx)(o.default,{component:`${t}.list.toolbar.search`,width:`fit`,height:11,ps:10,pe:10,b:0,borderRadius:3,fontSize:16,type:`search`,value:r,placeholder:e.localeText.searchPlaceholder,onChange:t=>{let n=t.target.value;a(n),s(`value`,()=>e.filter.setGlobalFilter(n))},props:{"aria-label":e.localeText.searchPlaceholder,enterKeyHint:`search`}}),r&&(0,h.jsx)(n.default,{type:`button`,component:`${t}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,position:`absolute`,insetEnd:2,onClick:()=>{l(),a(``),e.filter.setGlobalFilter(``)},props:{"aria-label":e.localeText.clearSearch},children:(0,h.jsx)(C,{width:`16px`})})]})}function V(t){let{grid:a}=t,{list:o}=a,{def:s}=a.props,l=a.componentName,u=a.localeText,{filtered:d,total:f}=a.filterStats,m=o.activeFilters,g=o.sortableColumns.length>0;return(0,h.jsxs)(i.default,{component:`${l}.list.toolbar`,d:`column`,gap:3,px:4,pt:4,pb:3,children:[(0,h.jsxs)(i.default,{ai:`center`,gap:3,flexWrap:`wrap`,children:[(0,h.jsxs)(i.default,{d:`column`,flex1:!0,minWidth:0,children:[s.title&&(0,h.jsx)(e.default,{id:a.titleId,fontSize:17,fontWeight:600,lineHeight:24,children:s.title}),(0,h.jsx)(e.default,{component:`${l}.list.toolbar.count`,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:u.rowCount(d,f)})]}),s.topBar&&(0,h.jsxs)(i.default,{ai:`center`,gap:2,flexWrap:`wrap`,children:[(0,h.jsx)(c.n,{grid:a}),(0,h.jsx)(c.t,{grid:a})]})]}),s.globalFilter&&(0,h.jsx)(B,{grid:a}),(0,h.jsxs)(i.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:[g&&(0,h.jsx)(z,{grid:a}),(0,h.jsx)(R,{grid:a}),s.rowSelection&&(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.toolbar.button`,...p.t.PILL,variant:{active:o.selecting},onClick:()=>o.setSelecting(!o.selecting),props:{"aria-pressed":o.selecting},children:u.selectRows})]}),m.length>0&&(0,h.jsx)(i.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:m.map(t=>(0,h.jsxs)(e.default,{tag:`span`,component:`${l}.list.toolbar.chip`,display:`inline-flex`,ai:`center`,gap:1,flexShrink:0,height:8,ps:3,pe:1,borderRadius:999,fontSize:13,textWrap:`nowrap`,children:[(0,h.jsxs)(e.default,{tag:`span`,fontWeight:500,children:[t.label,`:`]}),(0,h.jsx)(e.default,{tag:`span`,children:t.value}),(0,h.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,onClick:()=>t.column.clearFilter(),props:{"aria-label":u.clearFilter(t.label)},children:(0,h.jsx)(C,{width:`14px`})})]},t.column.key))}),s.topBarContent&&(0,h.jsx)(e.default,{children:s.topBarContent}),(0,h.jsx)(r.default,{props:{role:`status`},children:a.hasActiveFilters?u.rowCount(d,f):``})]})}V.displayName=`DataGridListToolbar`;function H(t){let{grid:n}=t,{list:r,source:a}=n,o=n.componentName,s=r.visibleItems,l=n.props.loading||a.isLoading,d=n.groupColumns.size===0&&!n.tree.enabled,f=a.enabled?n.totalRowCount:n.filterStats.filtered,{queryVersion:p}=a;return(0,m.useEffect)(()=>{a.enabled&&a.request(0,Math.max(s.length,1))},[a,p,s.length,n.page,n.pageSize,n.expansionVersion]),(0,h.jsxs)(i.default,{component:`${o}.list`,d:`column`,children:[(0,h.jsx)(V,{grid:n}),(0,h.jsx)(c.i,{grid:n}),l&&(0,h.jsx)(c.a,{grid:n}),s.length===0?(0,h.jsx)(e.default,{component:`list.muted`,px:4,py:10,textAlign:`center`,children:n.props.def.noDataComponent??(l?n.localeText.loadingRows:n.localeText.noRows)}):(0,h.jsx)(u.default,{props:{"aria-labelledby":n.props.def.title?n.titleId:void 0,"aria-busy":l||void 0},children:s.map(({row:e,index:t},r)=>e.kind===`group`?(0,h.jsx)(y,{row:e,version:n.rowVersion(e,t)},e.key):(0,h.jsx)(S,{row:e,index:t,position:d?r+1:void 0,setSize:d?f:void 0,version:n.rowVersion(e,t)},e.key))}),(0,h.jsx)(_,{grid:n,shown:d?s.length:void 0}),(0,h.jsx)(k,{grid:n}),(0,h.jsx)(O,{grid:n})]})}H.displayName=`DataGridList`,exports.default=H;
|
|
1
|
+
const e=require("./box.cjs"),t=require("./reporting.cjs"),n=require("./components/svg.cjs"),r=require("./components/button.cjs"),i=require("./components/visuallyHidden.cjs"),a=require("./components/flex.cjs"),o=require("./components/checkbox.cjs"),s=require("./components/textbox.cjs"),c=require("./components/semantics.cjs"),l=require("./components/dataGrid.cjs"),u=require("./components/dialog.cjs"),d=require("./components/list.cjs"),f=require("./components/radioButton.cjs"),p=require("./components/skeleton.cjs"),m=require("./dataGridListLayout.cjs");let h=require("react"),g=require("react/jsx-runtime");function _(e){let{cell:t}=e,{AggregateCell:n}=t.column;return n?(0,g.jsx)(n,{cell:t}):(0,g.jsx)(g.Fragment,{children:t.value??`—`})}_.displayName=`DataGridListAggregate`;function v(t){let{grid:n,shown:i}=t,{list:o,pagination:s,aggregation:c}=n,u=n.componentName,d=n.localeText,f=s.state,p=c.hasFooter?c.footerCells.value.filter(e=>e.column.aggregate):[];return(0,g.jsxs)(g.Fragment,{children:[p.length>0&&(0,g.jsxs)(e.default,{bgColor:`currentColor/3`,px:4,py:3,children:[(0,g.jsx)(e.default,{fontWeight:600,fontSize:14,mb:1,children:c.footerLabel}),(0,g.jsx)(e.default,{tag:`dl`,display:`grid`,gridTemplateColumns:2,columnGap:4,rowGap:2,m:0,children:p.map(t=>(0,g.jsxs)(e.default,{minWidth:0,children:[(0,g.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:12,lineHeight:16,children:t.column.header??String(t.column.key)}),(0,g.jsx)(e.default,{tag:`dd`,m:0,fontSize:14,lineHeight:20,fontWeight:600,children:(0,g.jsx)(_,{cell:t})})]},t.column.key))})]}),f?(0,g.jsx)(a.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:(0,g.jsxs)(a.default,{ai:`center`,jc:`space-between`,gap:3,width:`fit`,children:[(0,g.jsx)(r.default,{type:`button`,component:`${u}.list.button`,...m.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoPrev,onClick:s.prevPage,props:{"aria-label":d.previousPage},children:(0,g.jsx)(l.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,g.jsx)(e.default,{textAlign:`center`,children:d.pageRowRange(s.startItem,s.endItem,s.totalItems)}),(0,g.jsx)(r.default,{type:`button`,component:`${u}.list.button`,...m.t.ICON_BUTTON,borderRadius:3,disabled:!s.canGoNext,onClick:s.nextPage,props:{"aria-label":d.nextPage},children:(0,g.jsx)(l.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]})}):(o.hasMore||i!==void 0)&&(0,g.jsxs)(a.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:[o.hasMore&&(0,g.jsx)(r.default,{type:`button`,component:`${u}.list.button`,width:`fit`,height:11,borderRadius:3,fontSize:15,fontWeight:500,color:`accent-600`,cursor:`pointer`,theme:{dark:{color:`accent-300`}},onClick:o.showMore,children:d.showMore(o.nextBatch)}),i!==void 0&&(0,g.jsx)(e.default,{children:d.shownCount(i,n.source.enabled?n.totalRowCount:n.filterStats.filtered)})]})]})}v.displayName=`DataGridListFooter`;function y(e){let{row:t}=e,{grid:n}=t,r=t.cells.flatMap(e=>e.aggregate?[e.aggregate]:[]),i=t.placeholder?``:String(t.groupValue);return(0,g.jsxs)(d.default.Item,{size:`sm`,bgColor:`currentColor/3`,ps:4+Math.min(t.depth,3)*4,props:{"aria-busy":t.placeholder||void 0},children:[n.list.selecting&&t.selectable&&(0,g.jsx)(d.default.Actions,{children:(0,g.jsx)(o.default,{variant:`datagrid`,checked:t.selected,indeterminate:t.indeterminate,onChange:t.toggleSelectAll,props:{"aria-label":n.localeText.selectGroupRows(i)}})}),(0,g.jsx)(l.f,{width:`16px`,height:`16px`,flexShrink:0,rotate:t.expanded?0:-90,rtl:{rotate:t.expanded?0:90}}),(0,g.jsxs)(d.default.Content,{children:[(0,g.jsx)(d.default.Title,{lines:1,fontSize:14,fontWeight:600,children:(0,g.jsx)(d.default.Action,{onClick:()=>t.toggleRow(),props:{"aria-expanded":t.expanded},children:i})}),r.length>0&&(0,g.jsx)(d.default.Row,{secondary:!0,wrap:!0,columnGap:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:r.map(e=>(0,g.jsxs)(c.Span,{display:`inline-flex`,gap:1,children:[(0,g.jsx)(c.Span,{children:e.column.header??String(e.column.key)}),(0,g.jsx)(c.Span,{fontWeight:600,children:(0,g.jsx)(_,{cell:e})})]},e.column.key))})]}),(0,g.jsx)(d.default.Meta,{px:2,borderRadius:999,fontSize:12,fontWeight:600,lineHeight:20,bgColor:`currentColor/10`,alignSelf:`center`,children:t.count})]})}y.displayName=`DataGridListGroup`;var b=(0,h.memo)(y);function x(e){let{row:n,column:r}=e,i=n.cells.find(e=>e.column===r);if(!i)return null;if(r.Cell)return(0,g.jsx)(t.n,{children:(0,g.jsx)(r.Cell,{cell:i})});let{value:a}=i;if(typeof a==`boolean`)return(0,g.jsx)(g.Fragment,{children:a?i.grid.localeText.booleanTrue:i.grid.localeText.booleanFalse});let o=l.u(r,a);return o&&a!=null&&a!==``?(0,g.jsx)(l.l,{value:a,format:o}):(0,g.jsx)(g.Fragment,{children:a==null||a===``?`—`:String(a)})}x.displayName=`DataGridListValue`;function S(t){let{row:n,index:i,position:a,setSize:s}=t,{grid:u}=n,{list:f}=u,{title:h,kicker:_,subtitle:v,end:y,fields:b}=f.layout.value,{selecting:S}=f,C=f.recordViewEnabled&&!n.placeholder,w=l.p(n)?n:void 0,T=u.props.def.rowDetail,E=u.localeText,D={"aria-posinset":a,"aria-setsize":s};if(n.placeholder)return(0,g.jsx)(d.default.Item,{props:{...D,"aria-busy":!0},children:(0,g.jsx)(p.default,{lines:2,flex1:!0})});let O=h?(0,g.jsx)(x,{row:n,column:h}):E.unnamedRow(n.rowIndex+1),k=h?String(n.cells.find(e=>e.column===h)?.value??``):``,A=f.checkboxId(n.key);return(0,g.jsxs)(d.default.Item,{ai:`start`,selected:!!u.props.def.rowSelection&&n.selected,chevron:C&&!S,ps:w?4+Math.min(w.level,3)*4:void 0,props:{...D,"data-list-key":String(n.key)},children:[S&&(0,g.jsx)(d.default.Actions,{width:6,jc:`center`,alignSelf:`center`,children:(0,g.jsx)(o.default,{id:A,variant:`datagrid`,checked:n.selected,indeterminate:n.indeterminate,onChange:n.toggleSelection})}),(0,g.jsxs)(d.default.Content,{children:[_&&(0,g.jsx)(d.default.Overline,{lines:1,children:(0,g.jsx)(x,{row:n,column:_})}),(0,g.jsxs)(d.default.Row,{ai:`start`,gap:3,children:[(0,g.jsxs)(d.default.Row,{jc:`start`,ai:`center`,gap:1,flex1:!0,children:[w?.hasChildren&&(0,g.jsx)(d.default.Actions,{ms:-2,children:(0,g.jsx)(r.default,{type:`button`,component:`${u.componentName}.list.toggle`,...m.t.ICON_BUTTON,width:8,height:8,onClick:w.toggleTree,props:{"aria-expanded":w.treeExpanded,"aria-label":(w.treeExpanded?E.collapseTreeRow:E.expandTreeRow)(k||E.unnamedRow(n.rowIndex+1))},children:(0,g.jsx)(l.f,{width:`16px`,height:`16px`,rotate:w.treeExpanded?0:-90,rtl:{rotate:w.treeExpanded?0:90}})})}),(0,g.jsx)(d.default.Title,{lines:1,flex1:!0,fontWeight:600,children:S?(0,g.jsx)(d.default.Action,{props:{htmlFor:A},children:O}):C?(0,g.jsx)(d.default.Action,{props:{"aria-haspopup":`dialog`},onClick:()=>f.openRecord(n,i),children:O}):O})]}),y&&(0,g.jsxs)(d.default.End,{fontSize:16,fontWeight:600,lineHeight:22,...m.t.TRUNCATE,children:[(0,g.jsx)(x,{row:n,column:y}),(0,g.jsx)(d.default.Meta,{fontWeight:400,...m.t.LABEL,children:y.header??String(y.key)})]})]}),v.length>0&&(0,g.jsx)(d.default.Description,{lines:1,children:v.map((e,t)=>(0,g.jsxs)(c.Span,{children:[t>0&&` · `,(0,g.jsx)(x,{row:n,column:e})]},e.key))}),b.length>0&&(0,g.jsx)(d.default.Fields,{mt:2,css:{gridTemplateColumns:`repeat(2, minmax(0, 1fr))`},children:b.map(t=>(0,g.jsx)(d.default.Field,{label:t.header??String(t.key),children:(0,g.jsx)(e.default,{...m.t.TRUNCATE,children:(0,g.jsx)(x,{row:n,column:t})})},t.key))}),T&&(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(d.default.Actions,{alignSelf:`start`,mt:1,ms:-2,children:(0,g.jsxs)(r.default,{type:`button`,component:`${u.componentName}.list.toggle`,display:`inline-flex`,ai:`center`,gap:1,minHeight:8,px:2,borderRadius:2,fontSize:13,fontWeight:500,cursor:`pointer`,onClick:n.toggleDetail,props:{"aria-expanded":n.expanded},children:[(0,g.jsx)(l.f,{width:`14px`,height:`14px`,rotate:n.expanded?0:-90,rtl:{rotate:n.expanded?0:90}}),E.details]})}),n.expanded&&(0,g.jsx)(d.default.Actions,{display:`block`,mt:2,children:(0,g.jsx)(e.default,{component:`${u.componentName}.list.detail`,p:3,borderRadius:2,fontSize:14,children:T.content(n.data)})})]})]})]})}S.displayName=`DataGridListItem`;var C=(0,h.memo)(S);function w(e){return(0,g.jsx)(n.Svg,{viewBox:`0 0 24 24`,width:`1.25rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,g.jsx)(n.Path,{d:`M6 6l12 12M18 6L6 18`,strokeLinecap:`round`})})}var T=80;function E(n){let{grid:i,open:o,onOpen:s,onClose:c,title:l,trigger:d,actions:f,footer:p,tall:_,bodyProps:v,bodyRef:y,onKeyDown:b,children:x}=n,S=i.componentName,C=`${S}.list.sheet.line`,E=(0,h.useRef)(null),D=(0,h.useCallback)(e=>{let t=e.currentTarget.closest(`dialog`);e.button!==0||!t||e.target.closest(`button`)||(E.current={id:e.pointerId,y:e.clientY,dy:0,dialog:t},e.currentTarget.setPointerCapture(e.pointerId))},[]),O=(0,h.useCallback)(e=>{let t=E.current;if(!t||t.id!==e.pointerId)return;let{dialog:n}=t;t.dy=Math.max(0,e.clientY-t.y),n.style.transition=`none`,n.style.translate=`0 ${t.dy}px`},[]),k=(0,h.useCallback)(()=>{let e=E.current;if(E.current=null,!e)return;let{dialog:t}=e;t.style.transition=``,t.style.translate=``,e.dy>T&&c()},[c]);return(0,g.jsx)(t.t,{children:(0,g.jsxs)(u.default,{component:`${S}.list.sheet`,display:`flex`,d:`column`,css:_?{minHeight:`min(32rem, calc(100dvh - 2rem))`}:void 0,open:o,onOpenChange:e=>e?s?.():c(),trigger:d,props:{onKeyDown:b},children:[(0,g.jsxs)(a.default,{d:`column`,flexShrink:0,css:{touchAction:`none`},props:{onPointerDown:D,onPointerMove:O,onPointerUp:k,onPointerCancel:k},children:[(0,g.jsx)(e.default,{width:9,height:1.25,mt:2,mx:`auto`,borderRadius:999,bgColor:`base-300`,theme:{dark:{bgColor:`base-600`}},props:{"aria-hidden":!0}}),(0,g.jsxs)(a.default,{component:`${C}`,ai:`center`,gap:2,ps:4,pe:2,py:2,bb:1,children:[(0,g.jsx)(u.default.Title,{flex1:!0,minWidth:0,m:0,fontSize:17,fontWeight:600,lineHeight:24,...m.t.TRUNCATE,children:l}),f,(0,g.jsx)(r.default,{type:`button`,component:`${S}.list.sheet.button`,...m.t.ICON_BUTTON,onClick:c,props:{"aria-label":i.localeText.close},children:(0,g.jsx)(w,{})})]})]}),(0,g.jsx)(e.default,{ref:y,flex1:!0,overflowY:`auto`,px:4,py:2,css:{overscrollBehavior:`contain`,touchAction:`pan-y`},props:v,children:x}),p&&(0,g.jsx)(a.default,{component:C,gap:3,flexShrink:0,px:4,pt:3,pb:4,bt:1,children:p})]})})}E.displayName=`DataGridListSheet`;var D=60;function O({cell:t,index:n}){let{grid:i,column:o}=t,s=i.componentName,c=String(o.header??o.key),{editing:u}=t,d=(0,h.useRef)(null),f=(0,h.useRef)(!1);return(0,h.useEffect)(()=>{f.current&&!u&&d.current?.focus(),f.current=u},[u]),(0,g.jsxs)(e.default,{component:`${s}.list.sheet.line`,py:3,bb:1,children:[(0,g.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:13,lineHeight:18,children:c}),(0,g.jsxs)(e.default,{tag:`dd`,display:`flex`,ai:`center`,gap:2,m:0,fontSize:16,lineHeight:24,css:{fontVariantNumeric:`tabular-nums`,overflowWrap:`anywhere`},children:[u?(0,g.jsx)(a.default,{component:`${s}.list.sheet.input`,...m.t.INPUT,flex1:!0,ai:`center`,px:1,children:(0,g.jsx)(l.d,{cell:t,row:-1,columnIndex:n})}):(0,g.jsx)(e.default,{flex1:!0,minWidth:0,children:(0,g.jsx)(x,{row:t.row,column:o})}),t.editable&&!u&&(0,g.jsx)(r.default,{ref:d,type:`button`,component:`${s}.list.sheet.button`,...m.t.SHEET_BUTTON,height:10,onClick:()=>t.beginEdit(),props:{"aria-label":i.localeText.editCell(c)},children:i.localeText.edit})]})]})}function k(n){let{grid:i}=n,{list:s}=i,u=i.componentName,d=i.localeText,f=s.record,p=s.recordPosition,{title:_}=s.layout.value,v=(0,h.useRef)(null),y=(0,h.useRef)(null),b=f?.key;(0,h.useEffect)(()=>{y.current?.scrollTo?.({top:0})},[b]);let S=(0,h.useCallback)(()=>{let e=s.record?.key;i.edits.cancel(),s.closeRecord(),requestAnimationFrame(()=>{let t=i.sizingElement?.querySelectorAll(`[data-list-key]`)??[];Array.from(t).find(t=>t.dataset.listKey===String(e))?.querySelector(`[data-list-action]`)?.focus()})},[i,s]),C=(0,h.useCallback)(e=>{i.edits.isOpen&&i.edits.commit(),i.edits.isOpen||s.stepRecord(e)},[i,s]),w=e=>{v.current=e.pointerType===`touch`?{x:e.clientX,y:e.clientY}:null},T=e=>{let t=v.current;if(v.current=null,!t)return;let n=e.clientX-t.x,r=e.clientY-t.y;Math.abs(n)<D||Math.abs(n)<Math.abs(r)*1.5||C(n<0===i.isRtl?-1:1)},k=e=>{if(e.target.closest(`input,select,textarea,[role="combobox"]`))return;let t=i.isRtl?`ArrowLeft`:`ArrowRight`,n=i.isRtl?`ArrowRight`:`ArrowLeft`;(e.key===t||e.key===n)&&(e.preventDefault(),C(e.key===t?1:-1))},A=f&&p&&(0,g.jsxs)(a.default,{ai:`center`,gap:.5,flexShrink:0,children:[(0,g.jsx)(r.default,{type:`button`,component:`${u}.list.sheet.button`,...m.t.ICON_BUTTON,disabled:!s.hasPreviousRecord,onClick:()=>C(-1),props:{"aria-label":d.previousRow},children:(0,g.jsx)(l.f,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,g.jsx)(e.default,{fontSize:13,color:`base-500`,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},props:{"aria-live":`polite`},children:d.recordPosition(p.position,p.total)}),(0,g.jsx)(r.default,{type:`button`,component:`${u}.list.sheet.button`,...m.t.ICON_BUTTON,disabled:!s.hasNextRecord,onClick:()=>C(1),props:{"aria-label":d.nextRow},children:(0,g.jsx)(l.f,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]}),j=i.props.def.rowDetail;return(0,g.jsx)(E,{grid:i,open:!!f,onClose:S,tall:!0,title:f&&_?(0,g.jsx)(x,{row:f,column:_}):``,actions:A,onKeyDown:k,bodyRef:y,bodyProps:{onPointerDown:w,onPointerUp:T},children:f&&(0,g.jsxs)(g.Fragment,{children:[i.props.def.rowSelection&&(0,g.jsx)(e.default,{py:3,children:(0,g.jsx)(o.default,{variant:`datagrid`,checked:f.selected,onChange:f.toggleSelection,label:d.selectRow(f.rowIndex+1),labelProps:{display:`flex`,ai:`center`,gap:3,fontSize:15}})}),(0,g.jsx)(e.default,{tag:`dl`,m:0,children:s.recordColumns.map(e=>{let t=f.cells.findIndex(t=>t.column===e);return t===-1?null:(0,g.jsx)(O,{cell:f.cells[t],index:t},e.key)})}),j&&(0,g.jsxs)(a.default,{d:`column`,gap:2,py:3,children:[(0,g.jsx)(c.H3,{m:0,fontSize:14,fontWeight:600,children:d.details}),(0,g.jsx)(t.n,{children:j.content(f.data)})]})]})})}k.displayName=`DataGridListRecord`;function A(t){let{grid:n}=t,i=n.componentName,o=n.localeText,s=n.selectedRows.size;return!n.props.def.rowSelection||s===0?null:(0,g.jsxs)(a.default,{component:`${i}.list.selectionBar`,position:`sticky`,bottom:0,zIndex:2,ai:`center`,gap:2,px:4,py:2,fontSize:14,fontWeight:500,children:[(0,g.jsx)(e.default,{flex1:!0,minWidth:0,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},children:o.selectedRows(s)}),!n.allRowsSelected&&(0,g.jsx)(r.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:n.toggleSelectAllRows,children:o.selectAll}),(0,g.jsx)(r.default,{type:`button`,minHeight:10,px:3,borderRadius:2,fontSize:14,fontWeight:500,cursor:`pointer`,active:{bgColor:`white/15`},theme:{dark:{active:{bgColor:`black/10`}}},onClick:n.clearSelection,children:o.clearSelection})]})}A.displayName=`DataGridListSelectionBar`;function j(e){return(0,g.jsx)(n.Svg,{viewBox:`0 0 24 24`,width:`1rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,g.jsx)(n.Path,{d:`M4 6h16M7 12h10M10 18h4`,strokeLinecap:`round`})})}var M=8,N=[{value:`eq`,label:`=`},{value:`ne`,label:`≠`},{value:`gt`,label:`>`},{value:`gte`,label:`≥`},{value:`lt`,label:`<`},{value:`lte`,label:`≤`},{value:`between`,label:`↔`}];function P({column:e}){let{currentFilter:t}=e,n=e.grid.componentName,r=e.grid.localeText,[i,a]=(0,h.useState)(t?.type===`text`?t.value:``),{debounce:o}=l.s(t,e=>l.c.textMatches(i,e),e=>a(e?.type===`text`?e.value:``));return(0,g.jsx)(s.default,{component:`${n}.list.sheet.input`,...m.t.INPUT,type:`search`,value:i,placeholder:e.filterConfig?.placeholder??r.filterPlaceholder,onChange:t=>{let n=t.target.value;a(n),o(`value`,()=>e.setTextFilter(n))},props:{"aria-label":r.filterColumn(String(e.header??e.key))}})}function F({column:t}){let{currentFilter:n}=t,r=t.grid.componentName,i=t.grid.localeText,o=String(t.header??t.key),c=t.filterConfig,[u,d]=(0,h.useState)(()=>l.c.numberDraft(n)),f=(0,h.useRef)(u),p=(0,h.useCallback)(e=>{f.current=e,d(e)},[]),{debounce:_,cancel:v}=l.s(n,e=>l.c.numberMatches(u,e),e=>p(l.c.numberDraft(e))),y=(e,n)=>{p({...f.current,...e});let r=()=>t.setNumberFilter(f.current.operator,f.current.value,f.current.valueTo);n?_(`value`,r):(v(),r())},b=(e,t,n,i)=>(0,g.jsx)(s.default,{component:`${r}.list.sheet.input`,...m.t.INPUT,type:`number`,value:e,step:c?.step,placeholder:n,onChange:e=>y({[i]:e.target.value},!0),props:{"aria-label":t,inputMode:`decimal`,min:c?.min,max:c?.max}});return(0,g.jsxs)(a.default,{gap:2,ai:`center`,children:[(0,g.jsx)(e.default,{tag:`select`,component:`${r}.list.sheet.input`,...m.t.INPUT,width:18,flexShrink:0,props:{value:u.operator,"aria-label":i.filterComparison(o),onChange:e=>y({operator:e.target.value},!1)},children:N.map(e=>(0,g.jsx)(`option`,{value:e.value,children:e.label},e.value))}),b(u.value,u.operator===`between`?i.filterFrom(o):i.filterColumn(o),u.operator===`between`?i.filterFromPlaceholder:c?.placeholder??i.filterValuePlaceholder,`value`),u.operator===`between`&&b(u.valueTo,i.filterTo(o),i.filterToPlaceholder,`valueTo`)]})}function I({column:e}){let t=l.m(!0);return t?(0,g.jsx)(t.ListDateFilter,{column:e}):null}function L({column:e}){let{currentFilter:t}=e,n=e.grid.componentName,i=e.grid.localeText,c=t?.type===`multiselect`?t.values:[],l=e.filterOptions,[u,d]=(0,h.useState)(``),f=t=>{e.setMultiselectFilter(c.includes(t)?c.filter(e=>e!==t):[...c,t])};if(l.length<=M)return(0,g.jsx)(a.default,{flexWrap:`wrap`,gap:2,children:l.map(e=>(0,g.jsx)(r.default,{type:`button`,component:`${n}.list.sheet.chip`,display:`inline-flex`,ai:`center`,minHeight:10,px:3.5,borderRadius:999,fontSize:14,cursor:`pointer`,onClick:()=>f(e.value),props:{"aria-pressed":c.includes(e.value)},children:e.label},String(e.value)))});let p=u.trim().toLocaleLowerCase(),_=p?l.filter(e=>e.label.toLocaleLowerCase().includes(p)):l;return(0,g.jsxs)(a.default,{d:`column`,gap:2,children:[(0,g.jsx)(s.default,{component:`${n}.list.sheet.input`,...m.t.INPUT,type:`search`,value:u,placeholder:i.filterSelectSearchPlaceholder,onChange:e=>d(e.target.value),props:{"aria-label":i.filterColumn(String(e.header??e.key))}}),(0,g.jsx)(a.default,{d:`column`,maxHeight:64,overflowY:`auto`,children:_.map(e=>(0,g.jsx)(o.default,{checked:c.includes(e.value),onChange:()=>f(e.value),label:e.label,labelProps:{component:`${n}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,bb:1}},String(e.value)))})]})}function R(e){let{column:t}=e;switch(t.filterConfig?.type){case void 0:return null;case`number`:return(0,g.jsx)(F,{column:t});case`multiselect`:return(0,g.jsx)(L,{column:t});case`date`:return(0,g.jsx)(I,{column:t});default:return(0,g.jsx)(P,{column:t})}}R.displayName=`DataGridListFilter`;function z(t){let{grid:n}=t,{list:i}=n,o=n.componentName,s=n.localeText,l=i.activeFilters.length,u=i.filterableColumns;return u.length===0?null:(0,g.jsx)(E,{grid:n,open:i.sheet===`filter`,onOpen:()=>i.openSheet(`filter`),onClose:()=>i.openSheet(null),title:s.filters,trigger:({ref:t,props:{onClick:n,...i}})=>(0,g.jsxs)(r.default,{type:`button`,component:`${o}.list.toolbar.button`,variant:{active:l>0},...m.t.PILL,ref:t,onClick:n,props:{...i,"aria-label":s.filtersLabel(l)},children:[(0,g.jsx)(j,{}),s.filters,l>0&&(0,g.jsx)(e.default,{tag:`span`,minWidth:5,height:5,px:1.5,borderRadius:999,bgColor:`accent-600`,color:`white`,fontSize:12,fontWeight:600,lineHeight:20,textAlign:`center`,props:{"aria-hidden":!0},children:l})]}),footer:(0,g.jsxs)(g.Fragment,{children:[l>0&&(0,g.jsx)(r.default,{type:`button`,component:`${o}.list.sheet.button`,...m.t.SHEET_BUTTON,onClick:n.clearColumnFilters,children:s.clearFilters}),(0,g.jsx)(r.default,{type:`button`,component:`${o}.list.sheet.primary`,...m.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>i.openSheet(null),children:s.showRows(n.filterStats.filtered)})]}),children:u.map(e=>(0,g.jsxs)(a.default,{component:`${o}.list.sheet.line`,d:`column`,gap:2,py:3,bb:1,children:[(0,g.jsx)(c.H3,{m:0,fontSize:14,fontWeight:600,children:e.header??String(e.key)}),(0,g.jsx)(R,{column:e})]},e.key))})}z.displayName=`DataGridListFilterSheet`;function B(e){let{grid:t}=e,{list:n}=t,i=t.componentName,o=t.localeText,s=n.sortedColumn,c=t.sortDirection===`DESC`,u=`${t.identifier}-sort`,d={component:`${i}.list.sheet.line`,display:`flex`,ai:`center`,gap:3,minHeight:12,fontSize:16,cursor:`pointer`,bb:1};return(0,g.jsxs)(E,{grid:t,open:n.sheet===`sort`,onClose:()=>n.openSheet(null),title:o.sortBy,onOpen:()=>n.openSheet(`sort`),trigger:({ref:e,props:{onClick:t,...n}})=>(0,g.jsxs)(r.default,{type:`button`,component:`${i}.list.toolbar.button`,variant:{active:!!s},...m.t.PILL,ref:e,onClick:t,props:n,children:[(0,g.jsx)(l.o,{width:`16px`,height:`16px`,fill:`currentColor`,rotate:c?180:0}),s?o.sortedBy(String(s.header??s.key),c):o.sortBy]}),footer:(0,g.jsxs)(g.Fragment,{children:[s&&(0,g.jsx)(r.default,{type:`button`,component:`${i}.list.sheet.button`,...m.t.SHEET_BUTTON,onClick:()=>t.setSortColumn(s.key,void 0),children:o.clearSort}),(0,g.jsx)(r.default,{type:`button`,component:`${i}.list.sheet.primary`,...m.t.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>n.openSheet(null),children:o.close})]}),children:[(0,g.jsx)(a.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,props:{"aria-label":o.sortBy},children:n.sortableColumns.map(e=>(0,g.jsx)(f.default,{name:u,checked:s===e,onChange:()=>t.setSortColumn(e.key,c&&s?`DESC`:`ASC`),label:e.header??String(e.key),labelProps:d},e.key))}),s&&(0,g.jsx)(a.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,pt:4,props:{"aria-label":`${o.sortBy}: ${s.header??s.key}`},children:[`ASC`,`DESC`].map(e=>(0,g.jsx)(f.default,{name:`${u}-direction`,checked:t.sortDirection===e,onChange:()=>t.setSortColumn(s.key,e),label:e===`ASC`?o.ascending:o.descending,labelProps:d},e))})]})}B.displayName=`DataGridListSortSheet`;function V({grid:e}){let t=e.componentName,[n,i]=(0,h.useState)(e.globalFilterValue),{debounce:o,cancel:c}=l.s(e.globalFilterValue,e=>e===n,i);return(0,g.jsxs)(a.default,{position:`relative`,ai:`center`,children:[(0,g.jsx)(a.default,{position:`absolute`,insetStart:3.5,pointerEvents:`none`,color:`base-500`,props:{"aria-hidden":!0},children:(0,g.jsx)(l.r,{fill:`currentColor`,width:`16px`})}),(0,g.jsx)(s.default,{component:`${t}.list.toolbar.search`,width:`fit`,height:11,ps:10,pe:10,b:0,borderRadius:3,fontSize:16,type:`search`,value:n,placeholder:e.localeText.searchPlaceholder,onChange:t=>{let n=t.target.value;i(n),o(`value`,()=>e.filter.setGlobalFilter(n))},props:{"aria-label":e.localeText.searchPlaceholder,enterKeyHint:`search`}}),n&&(0,g.jsx)(r.default,{type:`button`,component:`${t}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,position:`absolute`,insetEnd:2,onClick:()=>{c(),i(``),e.filter.setGlobalFilter(``)},props:{"aria-label":e.localeText.clearSearch},children:(0,g.jsx)(w,{width:`16px`})})]})}function H(t){let{grid:n}=t,{list:o}=n,{def:s}=n.props,c=n.componentName,u=n.localeText,{filtered:d,total:f}=n.filterStats,p=o.activeFilters,h=o.sortableColumns.length>0;return(0,g.jsxs)(a.default,{component:`${c}.list.toolbar`,d:`column`,gap:3,px:4,pt:4,pb:3,children:[(0,g.jsxs)(a.default,{ai:`center`,gap:3,flexWrap:`wrap`,children:[(0,g.jsxs)(a.default,{d:`column`,flex1:!0,minWidth:0,children:[s.title&&(0,g.jsx)(e.default,{id:n.titleId,fontSize:17,fontWeight:600,lineHeight:24,children:s.title}),(0,g.jsx)(e.default,{component:`${c}.list.toolbar.count`,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:u.rowCount(d,f)})]}),s.topBar&&(0,g.jsxs)(a.default,{ai:`center`,gap:2,flexWrap:`wrap`,children:[(0,g.jsx)(l.n,{grid:n}),(0,g.jsx)(l.t,{grid:n})]})]}),s.globalFilter&&(0,g.jsx)(V,{grid:n}),(0,g.jsxs)(a.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:[h&&(0,g.jsx)(B,{grid:n}),(0,g.jsx)(z,{grid:n}),s.rowSelection&&(0,g.jsx)(r.default,{type:`button`,component:`${c}.list.toolbar.button`,...m.t.PILL,variant:{active:o.selecting},onClick:()=>o.setSelecting(!o.selecting),props:{"aria-pressed":o.selecting},children:u.selectRows})]}),p.length>0&&(0,g.jsx)(a.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:p.map(t=>(0,g.jsxs)(e.default,{tag:`span`,component:`${c}.list.toolbar.chip`,display:`inline-flex`,ai:`center`,gap:1,flexShrink:0,height:8,ps:3,pe:1,borderRadius:999,fontSize:13,textWrap:`nowrap`,children:[(0,g.jsxs)(e.default,{tag:`span`,fontWeight:500,children:[t.label,`:`]}),(0,g.jsx)(e.default,{tag:`span`,children:t.value}),(0,g.jsx)(r.default,{type:`button`,component:`${c}.list.sheet.button`,display:`inline-flex`,ai:`center`,jc:`center`,width:7,height:7,borderRadius:999,cursor:`pointer`,onClick:()=>t.column.clearFilter(),props:{"aria-label":u.clearFilter(t.label)},children:(0,g.jsx)(w,{width:`14px`})})]},t.column.key))}),s.topBarContent&&(0,g.jsx)(e.default,{children:s.topBarContent}),(0,g.jsx)(i.default,{props:{role:`status`},children:n.hasActiveFilters?u.rowCount(d,f):``})]})}H.displayName=`DataGridListToolbar`;function U(t){let{grid:n}=t,{list:r,source:i}=n,o=n.componentName,s=r.visibleItems,c=n.props.loading||i.isLoading,u=n.groupColumns.size===0&&!n.tree.enabled,f=i.enabled?n.totalRowCount:n.filterStats.filtered,{queryVersion:p}=i;return(0,h.useEffect)(()=>{i.enabled&&i.request(0,Math.max(s.length,1))},[i,p,s.length,n.page,n.pageSize,n.expansionVersion]),(0,g.jsxs)(a.default,{component:`${o}.list`,d:`column`,children:[(0,g.jsx)(H,{grid:n}),(0,g.jsx)(l.i,{grid:n}),c&&(0,g.jsx)(l.a,{grid:n}),s.length===0?(0,g.jsx)(e.default,{component:`list.muted`,px:4,py:10,textAlign:`center`,children:n.props.def.noDataComponent??(c?n.localeText.loadingRows:n.localeText.noRows)}):(0,g.jsx)(d.default,{props:{"aria-labelledby":n.props.def.title?n.titleId:void 0,"aria-busy":c||void 0},children:s.map(({row:e,index:t},r)=>e.kind===`group`?(0,g.jsx)(b,{row:e,version:n.rowVersion(e,t)},e.key):(0,g.jsx)(C,{row:e,index:t,position:u?r+1:void 0,setSize:u?f:void 0,version:n.rowVersion(e,t)},e.key))}),(0,g.jsx)(v,{grid:n,shown:u?s.length:void 0}),(0,g.jsx)(A,{grid:n}),(0,g.jsx)(k,{grid:n})]})}U.displayName=`DataGridList`,exports.default=U;
|