@box-kite/react 2.2.4 → 2.2.5

package/components/virtualList.mjs

@@ -0,0 +1,188 @@
+"use client";
+import { f as e } from "../react-shared.mjs";
+import { n as t } from "../effects.mjs";
+import { a as n, o as r } from "../behavior.mjs";
+import { n as i, t as a } from "../scrolling.mjs";
+import o from "./list.mjs";
+import { Fragment as s, useCallback as c, useEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+import { jsx as p } from "react/jsx-runtime";
+//#region src/utils/virtual/measuredWindow.ts
+function m(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+var h;
+(function(e) {
+	let t = e.DEFAULT_OVERSCAN = 4, n = e.PIN_REACH = 50;
+	function r(e) {
+		let t = Array(e.length + 1);
+		t[0] = 0;
+		for (let n = 0; n < e.length; n++) t[n + 1] = t[n] + e[n];
+		return t;
+	}
+	e.offsetsOf = r;
+	function a(e, t) {
+		let n = 0, r = 0;
+		for (let t of e) n += t, r++;
+		return r ? n / r : t;
+	}
+	e.typicalSize = a;
+	function o(e) {
+		let { offsets: r, viewStart: a, viewEnd: o, overscan: s = t, pin: c = -1 } = e, l = r.length - 1, u = r[l] ?? 0;
+		if (l <= 0) return {
+			startIndex: 0,
+			endIndex: 0,
+			offsetY: 0,
+			totalHeight: 0
+		};
+		let d = m(i(r, a, l) - s, 0, l - 1), f = m(i(r, o - .5, l) + 1 + s, d + 1, l);
+		return c >= 0 && c < l && (c < d && d - c <= n ? d = c : c >= f && c - f < n && (f = c + 1)), {
+			startIndex: d,
+			endIndex: f,
+			offsetY: r[d],
+			totalHeight: u
+		};
+	}
+	e.measuredWindow = o;
+})(h ||= {});
+var g = h;
+//#endregion
+//#region src/components/virtualList.tsx
+function _(e, t) {
+	for (let n of Array.from(e.children)) {
+		let e = n.getBoundingClientRect();
+		if (e.bottom > t) return {
+			element: n,
+			top: e.top
+		};
+	}
+	return null;
+}
+var v = 150;
+function y(e, i) {
+	let { items: m, itemKey: h, children: y, estimateSize: b = 57, overscan: x = 6, initialCount: S = 20, onRangeChange: C, scrollerRef: w, vars: T, css: E, props: D, ...O } = e, k = d(null), [A, j] = f(() => /* @__PURE__ */ new Map()), [, M] = f(0), [N, P] = f({
+		startIndex: 0,
+		endIndex: Math.min(S, m.length)
+	}), [F, I] = f(-1), L = n(C), R = c((e) => {
+		k.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
+	}, [i]), [z, B] = f(null), V = u(() => m.map((e, t) => h(e, t)), [m, h]), H = u(() => g.typicalSize(A.values(), b), [A, b]), U = z?.count === m.length ? z : null, W = U ? U.estimate : H, G = u(() => g.offsetsOf(V.map((e) => A.get(e) ?? W)), [
+		V,
+		A,
+		W
+	]), K = G[m.length], q = r({
+		offsets: G,
+		pin: F,
+		overscan: x,
+		count: m.length,
+		total: K,
+		estimate: W
+	}), J = d(null), Y = Math.min(N.startIndex, Math.max(0, m.length - 1)), X = Math.min(Math.max(N.endIndex, Y), m.length), Z = n(() => {
+		let e = k.current, { offsets: t, pin: n, overscan: r, count: i } = q.current;
+		if (!e || i === 0) return;
+		let o = w?.current ?? a(e), s = e.ownerDocument.defaultView, c = o ? o.getBoundingClientRect().top + o.clientTop : 0, l = o ? o.clientHeight : s?.innerHeight ?? 0, u = e.getBoundingClientRect().top + e.clientTop, d = g.measuredWindow({
+			offsets: t,
+			viewStart: c - u,
+			viewEnd: c - u + l,
+			overscan: r,
+			pin: n
+		});
+		P((e) => e.startIndex === d.startIndex && e.endIndex === d.endIndex ? e : {
+			startIndex: d.startIndex,
+			endIndex: d.endIndex
+		});
+	});
+	t(() => {
+		let e = k.current;
+		if (!e) return;
+		let t = null, n = 0, r = w?.current ?? a(e), i = r ? r.getBoundingClientRect().top : 0, o = parseFloat(getComputedStyle(e).rowGap) || 0, s = J.current;
+		if (J.current = null, s?.element.isConnected && (n += s.element.getBoundingClientRect().top - s.top), Array.from(e.children).forEach((e, r) => {
+			let a = Y + r, s = V[a];
+			if (s === void 0) return;
+			e.setAttribute("aria-setsize", String(m.length)), e.setAttribute("aria-posinset", String(a + 1));
+			let c = e.getBoundingClientRect(), l = c.height + o, u = A.get(s) ?? W;
+			c.height > 0 && A.get(s) !== l && (t ??= new Map(A), t.set(s, l), c.bottom <= i && (n += l - u));
+		}), n !== 0) {
+			let t = r ?? e.ownerDocument.defaultView, i = r ? r.scrollTop : t?.scrollY ?? 0;
+			t?.scrollTo({
+				top: i + n,
+				behavior: "instant"
+			});
+		}
+		t ? (J.current = _(e, i), j(t)) : Z();
+	}), l(() => {
+		let e = k.current;
+		if (!e || typeof ResizeObserver > "u") return;
+		let t = new ResizeObserver(() => M((e) => e + 1));
+		return Array.from(e.children).forEach((e) => t.observe(e)), () => t.disconnect();
+	}, [N, V]), l(() => {
+		let e = k.current, t = e?.ownerDocument.defaultView;
+		if (!e || !t) return;
+		let n = w?.current ?? a(e), r = n ?? t, i = 0, o = !1, s = 0, c = () => {
+			i ||= requestAnimationFrame(() => (i = 0, Z()));
+		}, l = () => {
+			let { count: r, total: i, estimate: a } = q.current;
+			B((e) => e ?? {
+				count: r,
+				total: i,
+				estimate: a
+			}), clearTimeout(s), s = t.setTimeout(() => {
+				o || (J.current = _(e, n ? n.getBoundingClientRect().top : 0), B(null));
+			}, v);
+		}, u = () => {
+			l(), c();
+		}, d = () => {
+			o = !0, l();
+		}, f = () => {
+			o && (o = !1, l());
+		};
+		r.addEventListener("scroll", u, { passive: !0 }), r.addEventListener("pointerdown", d, {
+			capture: !0,
+			passive: !0
+		}), t.addEventListener("pointerup", f, !0), t.addEventListener("pointercancel", f, !0), t.addEventListener("resize", c);
+		let p = typeof ResizeObserver > "u" ? null : new ResizeObserver(c);
+		return n && p?.observe(n), () => {
+			cancelAnimationFrame(i), clearTimeout(s), r.removeEventListener("scroll", u), r.removeEventListener("pointerdown", d, !0), t.removeEventListener("pointerup", f, !0), t.removeEventListener("pointercancel", f, !0), t.removeEventListener("resize", c), p?.disconnect();
+		};
+	}, [
+		w,
+		Z,
+		q
+	]), l(() => {
+		L({
+			startIndex: N.startIndex,
+			endIndex: N.endIndex
+		});
+	}, [N, L]);
+	let Q = (e) => {
+		let t = k.current, n = Array.from(t?.children ?? []).findIndex((t) => t.contains(e.target));
+		n >= 0 && I(Y + n);
+	}, ee = (e) => {
+		k.current?.contains(e.relatedTarget) || I(-1);
+	}, $ = [];
+	for (let e = Y; e < X; e++) $.push(/* @__PURE__ */ p(s, { children: y(m[e], e) }, V[e]));
+	return /* @__PURE__ */ p(o, {
+		ref: R,
+		...O,
+		vars: Y > 0 ? {
+			...T,
+			"list-first-divider": "block"
+		} : T,
+		css: {
+			...E,
+			overflowAnchor: "none"
+		},
+		transition: "none",
+		style: {
+			paddingBlockStart: `${G[Y]}px`,
+			paddingBlockEnd: `${Math.max(0, (U && X < m.length ? U.total : K) - G[X])}px`
+		},
+		props: {
+			...D,
+			onFocus: Q,
+			onBlur: ee
+		},
+		children: $
+	});
+}
+var b = e(y, "VirtualList");
+//#endregion
+export { b as default };

package/dataGridList.cjs

@@ -0,0 +1 @@
+const e=require("./box.cjs"),t=require("./components/svg.cjs"),n=require("./components/button.cjs"),r=require("./components/flex.cjs"),i=require("./components/checkbox.cjs"),a=require("./components/visuallyHidden.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");let p=require("react"),m=require("react/jsx-runtime");function h(e){let{cell:t}=e,{AggregateCell:n}=t.column;return n?(0,m.jsx)(n,{cell:t}):(0,m.jsx)(m.Fragment,{children:t.value??`—`})}h.displayName=`DataGridListAggregate`;var g;(function(e){e.ICON_BUTTON={display:`inline-flex`,ai:`center`,jc:`center`,width:11,height:11,flexShrink:0,borderRadius:999,cursor:`pointer`},e.PILL={display:`inline-flex`,ai:`center`,gap:1.5,flexShrink:0,height:10,px:3.5,borderRadius:999,fontSize:14,fontWeight:500,textWrap:`nowrap`,cursor:`pointer`},e.TRUNCATE={textOverflow:`ellipsis`,overflow:`hidden`,textWrap:`nowrap`},e.INPUT={width:`fit`,height:11,px:3,borderRadius:2,fontSize:16},e.LABEL={fontSize:12,lineHeight:16},e.SHEET_BUTTON={height:12,px:4,borderRadius:3,fontSize:16,fontWeight:500,cursor:`pointer`}})(g||={});var _=g;function v(t){let{grid:i,shown:a}=t,{list:o,pagination:s,aggregation:l}=i,u=i.componentName,d=i.localeText,f=s.state,p=l.hasFooter?l.footerCells.value.filter(e=>e.column.aggregate):[];return(0,m.jsxs)(m.Fragment,{children:[p.length>0&&(0,m.jsxs)(e.default,{bgColor:`currentColor/3`,px:4,py:3,children:[(0,m.jsx)(e.default,{fontWeight:600,fontSize:14,mb:1,children:l.footerLabel}),(0,m.jsx)(e.default,{tag:`dl`,display:`grid`,gridTemplateColumns:2,columnGap:4,rowGap:2,m:0,children:p.map(t=>(0,m.jsxs)(e.default,{minWidth:0,children:[(0,m.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:12,lineHeight:16,children:t.column.header??String(t.column.key)}),(0,m.jsx)(e.default,{tag:`dd`,m:0,fontSize:14,lineHeight:20,fontWeight:600,children:(0,m.jsx)(h,{cell:t})})]},t.column.key))})]}),f?(0,m.jsx)(r.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:(0,m.jsxs)(r.default,{ai:`center`,jc:`space-between`,gap:3,width:`fit`,children:[(0,m.jsx)(n.default,{type:`button`,component:`${u}.list.button`,..._.ICON_BUTTON,borderRadius:3,disabled:!s.canGoPrev,onClick:s.prevPage,props:{"aria-label":d.previousPage},children:(0,m.jsx)(c.u,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,m.jsx)(e.default,{textAlign:`center`,children:d.pageRowRange(s.startItem,s.endItem,s.totalItems)}),(0,m.jsx)(n.default,{type:`button`,component:`${u}.list.button`,..._.ICON_BUTTON,borderRadius:3,disabled:!s.canGoNext,onClick:s.nextPage,props:{"aria-label":d.nextPage},children:(0,m.jsx)(c.u,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]})}):(o.hasMore||a!==void 0)&&(0,m.jsxs)(r.default,{component:`list.muted`,d:`column`,gap:2,ai:`center`,px:4,py:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:[o.hasMore&&(0,m.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,m.jsx)(e.default,{children:d.shownCount(a,i.source.enabled?i.totalRowCount:i.filterStats.filtered)})]})]})}v.displayName=`DataGridListFooter`;function y(e){let{row:t}=e,{grid:n}=t,r=t.cells.flatMap(e=>e.aggregate?[e.aggregate]:[]),a=t.placeholder?``:String(t.groupValue);return(0,m.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,m.jsx)(u.default.Actions,{children:(0,m.jsx)(i.default,{variant:`datagrid`,checked:t.selected,indeterminate:t.indeterminate,onChange:t.toggleSelectAll,props:{"aria-label":n.localeText.selectGroupRows(a)}})}),(0,m.jsx)(c.u,{width:`16px`,height:`16px`,flexShrink:0,rotate:t.expanded?0:-90,rtl:{rotate:t.expanded?0:90}}),(0,m.jsxs)(u.default.Content,{children:[(0,m.jsx)(u.default.Title,{lines:1,fontSize:14,fontWeight:600,children:(0,m.jsx)(u.default.Action,{onClick:()=>t.toggleRow(),props:{"aria-expanded":t.expanded},children:a})}),r.length>0&&(0,m.jsx)(u.default.Row,{secondary:!0,wrap:!0,columnGap:4,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:r.map(e=>(0,m.jsxs)(s.Span,{display:`inline-flex`,gap:1,children:[(0,m.jsx)(s.Span,{children:e.column.header??String(e.column.key)}),(0,m.jsx)(s.Span,{fontWeight:600,children:(0,m.jsx)(h,{cell:e})})]},e.column.key))})]}),(0,m.jsx)(u.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,p.memo)(y);function x(e){let{row:t,column:n}=e,r=t.cells.find(e=>e.column===n);if(!r)return null;if(n.Cell)return(0,m.jsx)(n.Cell,{cell:r});let{value:i}=r;return(0,m.jsx)(m.Fragment,{children:i==null||i===``?`—`:String(i)})}x.displayName=`DataGridListValue`;function S(t){let{row:r,index:a,position:o,setSize:l}=t,{grid:d}=r,{list:p}=d,{title:h,kicker:g,subtitle:v,end:y,fields:b}=p.layout.value,{selecting:S}=p,C=p.recordViewEnabled&&!r.placeholder,w=c.d(r)?r:void 0,T=d.props.def.rowDetail,E=d.localeText,D={"aria-posinset":o,"aria-setsize":l};if(r.placeholder)return(0,m.jsx)(u.default.Item,{props:{...D,"aria-busy":!0},children:(0,m.jsx)(f.default,{lines:2,flex1:!0})});let O=h?(0,m.jsx)(x,{row:r,column:h}):E.unnamedRow(r.rowIndex+1),k=h?String(r.cells.find(e=>e.column===h)?.value??``):``,A=p.checkboxId(r.key);return(0,m.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,m.jsx)(u.default.Actions,{width:6,jc:`center`,alignSelf:`center`,children:(0,m.jsx)(i.default,{id:A,variant:`datagrid`,checked:r.selected,indeterminate:r.indeterminate,onChange:r.toggleSelection})}),(0,m.jsxs)(u.default.Content,{children:[g&&(0,m.jsx)(u.default.Overline,{lines:1,children:(0,m.jsx)(x,{row:r,column:g})}),(0,m.jsxs)(u.default.Row,{ai:`start`,gap:3,children:[(0,m.jsxs)(u.default.Row,{jc:`start`,ai:`center`,gap:1,flex1:!0,children:[w?.hasChildren&&(0,m.jsx)(u.default.Actions,{ms:-2,children:(0,m.jsx)(n.default,{type:`button`,component:`${d.componentName}.list.toggle`,..._.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,m.jsx)(c.u,{width:`16px`,height:`16px`,rotate:w.treeExpanded?0:-90,rtl:{rotate:w.treeExpanded?0:90}})})}),(0,m.jsx)(u.default.Title,{lines:1,flex1:!0,fontWeight:600,children:S?(0,m.jsx)(u.default.Action,{props:{htmlFor:A},children:O}):C?(0,m.jsx)(u.default.Action,{props:{"aria-haspopup":`dialog`},onClick:()=>p.openRecord(r,a),children:O}):O})]}),y&&(0,m.jsxs)(u.default.End,{fontSize:16,fontWeight:600,lineHeight:22,..._.TRUNCATE,children:[(0,m.jsx)(x,{row:r,column:y}),(0,m.jsx)(u.default.Meta,{fontWeight:400,..._.LABEL,children:y.header??String(y.key)})]})]}),v.length>0&&(0,m.jsx)(u.default.Description,{lines:1,children:v.map((e,t)=>(0,m.jsxs)(s.Span,{children:[t>0&&` · `,(0,m.jsx)(x,{row:r,column:e})]},e.key))}),b.length>0&&(0,m.jsx)(u.default.Fields,{mt:2,css:{gridTemplateColumns:`repeat(2, minmax(0, 1fr))`},children:b.map(t=>(0,m.jsx)(u.default.Field,{label:t.header??String(t.key),children:(0,m.jsx)(e.default,{..._.TRUNCATE,children:(0,m.jsx)(x,{row:r,column:t})})},t.key))}),T&&(0,m.jsxs)(m.Fragment,{children:[(0,m.jsx)(u.default.Actions,{alignSelf:`start`,mt:1,ms:-2,children:(0,m.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,m.jsx)(c.u,{width:`14px`,height:`14px`,rotate:r.expanded?0:-90,rtl:{rotate:r.expanded?0:90}}),E.details]})}),r.expanded&&(0,m.jsx)(u.default.Actions,{display:`block`,mt:2,children:(0,m.jsx)(e.default,{component:`${d.componentName}.list.detail`,p:3,borderRadius:2,fontSize:14,children:T.content(r.data)})})]})]})]})}S.displayName=`DataGridListItem`;var C=(0,p.memo)(S);function w(e){return(0,m.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1.25rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,m.jsx)(t.Path,{d:`M6 6l12 12M18 6L6 18`,strokeLinecap:`round`})})}var T=80;function E(t){let{grid:i,open:a,onOpen:o,onClose:s,title:c,trigger:u,actions:d,footer:f,tall:h,bodyProps:g,bodyRef:v,onKeyDown:y,children:b}=t,x=i.componentName,S=`${x}.list.sheet.line`,C=(0,p.useRef)(null),E=(0,p.useCallback)(e=>{let t=e.currentTarget.closest(`dialog`);e.button!==0||!t||e.target.closest(`button`)||(C.current={id:e.pointerId,y:e.clientY,dy:0,dialog:t},e.currentTarget.setPointerCapture(e.pointerId))},[]),D=(0,p.useCallback)(e=>{let t=C.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,p.useCallback)(()=>{let e=C.current;if(C.current=null,!e)return;let{dialog:t}=e;t.style.transition=``,t.style.translate=``,e.dy>T&&s()},[s]);return(0,m.jsxs)(l.default,{component:`${x}.list.sheet`,display:`flex`,d:`column`,css:h?{minHeight:`min(32rem, calc(100dvh - 2rem))`}:void 0,open:a,onOpenChange:e=>e?o?.():s(),trigger:u,props:{onKeyDown:y},children:[(0,m.jsxs)(r.default,{d:`column`,flexShrink:0,css:{touchAction:`none`},props:{onPointerDown:E,onPointerMove:D,onPointerUp:O,onPointerCancel:O},children:[(0,m.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,m.jsxs)(r.default,{component:`${S}`,ai:`center`,gap:2,ps:4,pe:2,py:2,bb:1,children:[(0,m.jsx)(l.default.Title,{flex1:!0,minWidth:0,m:0,fontSize:17,fontWeight:600,lineHeight:24,..._.TRUNCATE,children:c}),d,(0,m.jsx)(n.default,{type:`button`,component:`${x}.list.sheet.button`,..._.ICON_BUTTON,onClick:s,props:{"aria-label":i.localeText.close},children:(0,m.jsx)(w,{})})]})]}),(0,m.jsx)(e.default,{ref:v,flex1:!0,overflowY:`auto`,px:4,py:2,css:{overscrollBehavior:`contain`,touchAction:`pan-y`},props:g,children:b}),f&&(0,m.jsx)(r.default,{component:S,gap:3,flexShrink:0,px:4,pt:3,pb:4,bt:1,children:f})]})}E.displayName=`DataGridListSheet`;var D=60;function O({cell:t,index:i}){let{grid:a,column:o}=t,s=a.componentName,l=String(o.header??o.key),{editing:u}=t,d=(0,p.useRef)(null),f=(0,p.useRef)(!1);return(0,p.useEffect)(()=>{f.current&&!u&&d.current?.focus(),f.current=u},[u]),(0,m.jsxs)(e.default,{component:`${s}.list.sheet.line`,py:3,bb:1,children:[(0,m.jsx)(e.default,{tag:`dt`,component:`list.muted`,fontSize:13,lineHeight:18,children:l}),(0,m.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,m.jsx)(r.default,{component:`${s}.list.sheet.input`,..._.INPUT,flex1:!0,ai:`center`,px:1,children:(0,m.jsx)(c.l,{cell:t,row:-1,columnIndex:i})}):(0,m.jsx)(e.default,{flex1:!0,minWidth:0,children:(0,m.jsx)(x,{row:t.row,column:o})}),t.editable&&!u&&(0,m.jsx)(n.default,{ref:d,type:`button`,component:`${s}.list.sheet.button`,..._.SHEET_BUTTON,height:10,onClick:()=>t.beginEdit(),props:{"aria-label":a.localeText.editCell(l)},children:a.localeText.edit})]})]})}function k(t){let{grid:a}=t,{list:o}=a,l=a.componentName,u=a.localeText,d=o.record,f=o.recordPosition,{title:h}=o.layout.value,g=(0,p.useRef)(null),v=(0,p.useRef)(null),y=d?.key;(0,p.useEffect)(()=>{v.current?.scrollTo?.({top:0})},[y]);let b=(0,p.useCallback)(()=>{let e=o.record?.key;a.edits.cancel(),o.closeRecord(),requestAnimationFrame(()=>{let t=a.sizingElement?.querySelectorAll(`[data-list-key]`)??[];Array.from(t).find(t=>t.dataset.listKey===String(e))?.querySelector(`[data-list-action]`)?.focus()})},[a,o]),S=(0,p.useCallback)(e=>{a.edits.isOpen&&a.edits.commit(),a.edits.isOpen||o.stepRecord(e)},[a,o]),C=e=>{g.current=e.pointerType===`touch`?{x:e.clientX,y:e.clientY}:null},w=e=>{let t=g.current;if(g.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||S(n<0===a.isRtl?-1:1)},T=e=>{if(e.target.closest(`input,select,textarea,[role="combobox"]`))return;let t=a.isRtl?`ArrowLeft`:`ArrowRight`,n=a.isRtl?`ArrowRight`:`ArrowLeft`;(e.key===t||e.key===n)&&(e.preventDefault(),S(e.key===t?1:-1))},k=d&&f&&(0,m.jsxs)(r.default,{ai:`center`,gap:.5,flexShrink:0,children:[(0,m.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,..._.ICON_BUTTON,disabled:!o.hasPreviousRecord,onClick:()=>S(-1),props:{"aria-label":u.previousRow},children:(0,m.jsx)(c.u,{width:`18px`,height:`18px`,rotate:90,rtl:{rotate:-90}})}),(0,m.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,m.jsx)(n.default,{type:`button`,component:`${l}.list.sheet.button`,..._.ICON_BUTTON,disabled:!o.hasNextRecord,onClick:()=>S(1),props:{"aria-label":u.nextRow},children:(0,m.jsx)(c.u,{width:`18px`,height:`18px`,rotate:-90,rtl:{rotate:90}})})]}),A=a.props.def.rowDetail;return(0,m.jsx)(E,{grid:a,open:!!d,onClose:b,tall:!0,title:d&&h?(0,m.jsx)(x,{row:d,column:h}):``,actions:k,onKeyDown:T,bodyRef:v,bodyProps:{onPointerDown:C,onPointerUp:w},children:d&&(0,m.jsxs)(m.Fragment,{children:[a.props.def.rowSelection&&(0,m.jsx)(e.default,{py:3,children:(0,m.jsx)(i.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,m.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,m.jsx)(O,{cell:d.cells[t],index:t},e.key)})}),A&&(0,m.jsxs)(r.default,{d:`column`,gap:2,py:3,children:[(0,m.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:u.details}),A.content(d.data)]})]})})}k.displayName=`DataGridListRecord`;function A(t){let{grid:i}=t,a=i.componentName,o=i.localeText,s=i.selectedRows.size;return!i.props.def.rowSelection||s===0?null:(0,m.jsxs)(r.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,m.jsx)(e.default,{flex1:!0,minWidth:0,textWrap:`nowrap`,css:{fontVariantNumeric:`tabular-nums`},children:o.selectedRows(s)}),!i.allRowsSelected&&(0,m.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:i.toggleSelectAllRows,children:o.selectAll}),(0,m.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:i.clearSelection,children:o.clearSelection})]})}A.displayName=`DataGridListSelectionBar`;function j(e){return(0,m.jsx)(t.Svg,{viewBox:`0 0 24 24`,width:`1rem`,fill:`none`,stroke:`currentColor`,strokeWidth:2,...e,children:(0,m.jsx)(t.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,p.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,m.jsx)(o.default,{component:`${n}.list.sheet.input`,..._.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 F({column:t}){let{currentFilter:n}=t,i=t.grid.componentName,a=t.grid.localeText,s=String(t.header??t.key),l=t.filterConfig,[u,d]=(0,p.useState)(()=>c.c.numberDraft(n)),f=(0,p.useRef)(u),h=(0,p.useCallback)(e=>{f.current=e,d(e)},[]),{debounce:g,cancel:v}=c.s(n,e=>c.c.numberMatches(u,e),e=>h(c.c.numberDraft(e))),y=(e,n)=>{h({...f.current,...e});let r=()=>t.setNumberFilter(f.current.operator,f.current.value,f.current.valueTo);n?g(`value`,r):(v(),r())},b=(e,t,n,r)=>(0,m.jsx)(o.default,{component:`${i}.list.sheet.input`,..._.INPUT,type:`number`,value:e,step:l?.step,placeholder:n,onChange:e=>y({[r]:e.target.value},!0),props:{"aria-label":t,inputMode:`decimal`,min:l?.min,max:l?.max}});return(0,m.jsxs)(r.default,{gap:2,ai:`center`,children:[(0,m.jsx)(e.default,{tag:`select`,component:`${i}.list.sheet.input`,..._.INPUT,width:18,flexShrink:0,props:{value:u.operator,"aria-label":a.filterComparison(s),onChange:e=>y({operator:e.target.value},!1)},children:N.map(e=>(0,m.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 I({column:e}){let{currentFilter:t}=e,a=e.grid.componentName,s=e.grid.localeText,c=t?.type===`multiselect`?t.values:[],l=e.filterOptions,[u,d]=(0,p.useState)(``),f=t=>{e.setMultiselectFilter(c.includes(t)?c.filter(e=>e!==t):[...c,t])};if(l.length<=M)return(0,m.jsx)(r.default,{flexWrap:`wrap`,gap:2,children:l.map(e=>(0,m.jsx)(n.default,{type:`button`,component:`${a}.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 h=u.trim().toLocaleLowerCase(),g=h?l.filter(e=>e.label.toLocaleLowerCase().includes(h)):l;return(0,m.jsxs)(r.default,{d:`column`,gap:2,children:[(0,m.jsx)(o.default,{component:`${a}.list.sheet.input`,..._.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,m.jsx)(r.default,{d:`column`,maxHeight:64,overflowY:`auto`,children:g.map(e=>(0,m.jsx)(i.default,{checked:c.includes(e.value),onChange:()=>f(e.value),label:e.label,labelProps:{component:`${a}.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,m.jsx)(F,{column:t});case`multiselect`:return(0,m.jsx)(I,{column:t});default:return(0,m.jsx)(P,{column:t})}}L.displayName=`DataGridListFilter`;function R(t){let{grid:i}=t,{list:a}=i,o=i.componentName,c=i.localeText,l=a.activeFilters.length,u=a.filterableColumns;return u.length===0?null:(0,m.jsx)(E,{grid:i,open:a.sheet===`filter`,onOpen:()=>a.openSheet(`filter`),onClose:()=>a.openSheet(null),title:c.filters,trigger:({ref:t,props:{onClick:r,...i}})=>(0,m.jsxs)(n.default,{type:`button`,component:`${o}.list.toolbar.button`,variant:{active:l>0},..._.PILL,ref:t,onClick:r,props:{...i,"aria-label":c.filtersLabel(l)},children:[(0,m.jsx)(j,{}),c.filters,l>0&&(0,m.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,m.jsxs)(m.Fragment,{children:[l>0&&(0,m.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.button`,..._.SHEET_BUTTON,onClick:i.clearColumnFilters,children:c.clearFilters}),(0,m.jsx)(n.default,{type:`button`,component:`${o}.list.sheet.primary`,..._.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>a.openSheet(null),children:c.showRows(i.filterStats.filtered)})]}),children:u.map(e=>(0,m.jsxs)(r.default,{component:`${o}.list.sheet.line`,d:`column`,gap:2,py:3,bb:1,children:[(0,m.jsx)(s.H3,{m:0,fontSize:14,fontWeight:600,children:e.header??String(e.key)}),(0,m.jsx)(L,{column:e})]},e.key))})}R.displayName=`DataGridListFilterSheet`;function z(e){let{grid:t}=e,{list:i}=t,a=t.componentName,o=t.localeText,s=i.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,m.jsxs)(E,{grid:t,open:i.sheet===`sort`,onClose:()=>i.openSheet(null),title:o.sortBy,onOpen:()=>i.openSheet(`sort`),trigger:({ref:e,props:{onClick:t,...r}})=>(0,m.jsxs)(n.default,{type:`button`,component:`${a}.list.toolbar.button`,variant:{active:!!s},..._.PILL,ref:e,onClick:t,props:r,children:[(0,m.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,m.jsxs)(m.Fragment,{children:[s&&(0,m.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.button`,..._.SHEET_BUTTON,onClick:()=>t.setSortColumn(s.key,void 0),children:o.clearSort}),(0,m.jsx)(n.default,{type:`button`,component:`${a}.list.sheet.primary`,..._.SHEET_BUTTON,flex1:!0,fontWeight:600,onClick:()=>i.openSheet(null),children:o.close})]}),children:[(0,m.jsx)(r.default,{tag:`fieldset`,d:`column`,b:0,m:0,p:0,props:{"aria-label":o.sortBy},children:i.sortableColumns.map(e=>(0,m.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,m.jsx)(r.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,m.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,[i,a]=(0,p.useState)(e.globalFilterValue),{debounce:s,cancel:l}=c.s(e.globalFilterValue,e=>e===i,a);return(0,m.jsxs)(r.default,{position:`relative`,ai:`center`,children:[(0,m.jsx)(r.default,{position:`absolute`,insetStart:3.5,pointerEvents:`none`,color:`gray-500`,props:{"aria-hidden":!0},children:(0,m.jsx)(c.r,{fill:`currentColor`,width:`16px`})}),(0,m.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:i,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`}}),i&&(0,m.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,m.jsx)(w,{width:`16px`})})]})}function V(t){let{grid:i}=t,{list:o}=i,{def:s}=i.props,l=i.componentName,u=i.localeText,{filtered:d,total:f}=i.filterStats,p=o.activeFilters,h=o.sortableColumns.length>0;return(0,m.jsxs)(r.default,{component:`${l}.list.toolbar`,d:`column`,gap:3,px:4,pt:4,pb:3,children:[(0,m.jsxs)(r.default,{ai:`center`,gap:3,flexWrap:`wrap`,children:[(0,m.jsxs)(r.default,{d:`column`,flex1:!0,minWidth:0,children:[s.title&&(0,m.jsx)(e.default,{id:i.titleId,fontSize:17,fontWeight:600,lineHeight:24,children:s.title}),(0,m.jsx)(e.default,{component:`${l}.list.toolbar.count`,fontSize:13,css:{fontVariantNumeric:`tabular-nums`},children:u.rowCount(d,f)})]}),s.topBar&&(0,m.jsxs)(r.default,{ai:`center`,gap:2,flexWrap:`wrap`,children:[(0,m.jsx)(c.n,{grid:i}),(0,m.jsx)(c.t,{grid:i})]})]}),s.globalFilter&&(0,m.jsx)(B,{grid:i}),(0,m.jsxs)(r.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:[h&&(0,m.jsx)(z,{grid:i}),(0,m.jsx)(R,{grid:i}),s.rowSelection&&(0,m.jsx)(n.default,{type:`button`,component:`${l}.list.toolbar.button`,..._.PILL,variant:{active:o.selecting},onClick:()=>o.setSelecting(!o.selecting),props:{"aria-pressed":o.selecting},children:u.selectRows})]}),p.length>0&&(0,m.jsx)(r.default,{gap:2,overflowX:`auto`,scrollbarWidth:`none`,mx:-4,px:4,children:p.map(t=>(0,m.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,m.jsxs)(e.default,{tag:`span`,fontWeight:500,children:[t.label,`:`]}),(0,m.jsx)(e.default,{tag:`span`,children:t.value}),(0,m.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,m.jsx)(w,{width:`14px`})})]},t.column.key))}),s.topBarContent&&(0,m.jsx)(e.default,{children:s.topBarContent}),(0,m.jsx)(a.default,{props:{role:`status`},children:i.hasActiveFilters?u.rowCount(d,f):``})]})}V.displayName=`DataGridListToolbar`;function H(t){let{grid:n}=t,{list:i,source:a}=n,o=n.componentName,s=i.visibleItems,l=n.props.loading||a.isLoading,d=n.groupColumns.size===0&&!n.tree.enabled,f=a.enabled?n.totalRowCount:n.filterStats.filtered,{queryVersion:h}=a;return(0,p.useEffect)(()=>{a.enabled&&a.request(0,Math.max(s.length,1))},[a,h,s.length,n.page,n.pageSize,n.expansionVersion]),(0,m.jsxs)(r.default,{component:`${o}.list`,d:`column`,children:[(0,m.jsx)(V,{grid:n}),(0,m.jsx)(c.i,{grid:n}),l&&(0,m.jsx)(c.a,{grid:n}),s.length===0?(0,m.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,m.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,m.jsx)(b,{row:e,version:n.rowVersion(e,t)},e.key):(0,m.jsx)(C,{row:e,index:t,position:d?r+1:void 0,setSize:d?f:void 0,version:n.rowVersion(e,t)},e.key))}),(0,m.jsx)(v,{grid:n,shown:d?s.length:void 0}),(0,m.jsx)(A,{grid:n}),(0,m.jsx)(k,{grid:n})]})}H.displayName=`DataGridList`,exports.default=H;