@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/data-display/CodeBlock/tokenize.cjs.js

@@ -0,0 +1,13 @@
+var e={js:`js`,jsx:`js`,mjs:`js`,cjs:`js`,javascript:`js`,ts:`js`,tsx:`js`,mts:`js`,cts:`js`,typescript:`js`,css:`css`,json:`json`,jsonc:`json`,bash:`bash`,sh:`bash`,shell:`bash`,shellscript:`bash`,zsh:`bash`,console:`bash`,html:`html`,htm:`html`,xml:`html`,svg:`html`};function t(t){if(t)return e[t.trim().toLowerCase()]}function n(e,t){let n=[],r={depth:0,inTag:!1,expectTagName:!1,commandStart:!0},i=(e,t)=>{let r=n[n.length-1];r&&r.type===e&&e===`plain`?r.content+=t:n.push({type:e,content:t})},a=0;for(;a<e.length;){let n=!1;for(let o of t){if(o.when&&!o.when(r))continue;o.re.lastIndex=a;let t=o.re.exec(e);if(!t||t[0].length===0)continue;let s=t[0];i(typeof o.type==`function`?o.type(s,r,e.slice(a+s.length,a+s.length+64)):o.type,s),a+=s.length,n=!0;break}n||(i(`plain`,e[a]),a+=1)}return n}var r=e=>new Set(e.split(/\s+/).filter(Boolean)),i=r(`
+  abstract as async await break case catch class const continue debugger
+  declare default delete do else enum export extends false finally for from
+  function get if implements import in infer instanceof interface is keyof let
+  namespace new null of private protected public readonly return satisfies set
+  static super switch this throw true try type typeof undefined unique var void
+  while with yield any boolean never number object string symbol unknown bigint
+`),a=[{re:/\/\/[^\n]*/y,type:`comment`},{re:/\/\*[\s\S]*?(?:\*\/|$)/y,type:`comment`},{re:/"(?:\\.|[^"\\\n])*"?/y,type:`string`},{re:/'(?:\\.|[^'\\\n])*'?/y,type:`string`},{re:/`(?:\\[\s\S]|[^`\\])*`?/y,type:`string`},{re:/(?:0[xX][\da-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|(?:\d[\d_]*)?\.?\d[\d_]*(?:[eE][+-]?\d+)?)n?(?![\w$])/y,type:`number`},{re:/(?<=(?:^|[\s(){}[\],;:?&|!=>])<\/?)[A-Za-z][\w.:-]*/y,type:`tag`},{re:/[A-Za-z_][\w-]*(?==["'{])/y,type:`attribute`},{re:/[A-Za-z_$][\w$]*/y,type:e=>i.has(e)?`keyword`:`plain`},{re:/[{}()[\];,.<>:?!=+\-*/%&|^~@#]+/y,type:`punctuation`},{re:/\s+/y,type:`plain`}],o=[{re:/\/\*[\s\S]*?(?:\*\/|$)/y,type:`comment`},{re:/"(?:\\.|[^"\\\n])*"?/y,type:`string`},{re:/'(?:\\.|[^'\\\n])*'?/y,type:`string`},{re:/@[\w-]+/y,type:`keyword`},{re:/!important\b/y,type:`keyword`},{re:/\{/y,type:(e,t)=>(t.depth+=1,`punctuation`)},{re:/\}/y,type:(e,t)=>(t.depth=Math.max(0,t.depth-1),`punctuation`)},{re:/-{0,2}[A-Za-z][\w-]*(?=\s*:)/y,type:`attribute`,when:e=>e.depth>0},{re:/#[\da-fA-F]{3,8}(?![\w-])/y,type:`number`,when:e=>e.depth>0},{re:/-?(?:\d*\.)?\d+(?:[a-zA-Z]+|%)?/y,type:`number`},{re:/[.#]?-?[A-Za-z_][\w-]*/y,type:(e,t)=>t.depth>0?`plain`:`tag`},{re:/[:;,()>+~*=[\]]+/y,type:`punctuation`},{re:/\s+/y,type:`plain`}],s=[{re:/\/\/[^\n]*/y,type:`comment`},{re:/\/\*[\s\S]*?(?:\*\/|$)/y,type:`comment`},{re:/"(?:\\.|[^"\\\n])*"?/y,type:(e,t,n)=>/^\s*:/.test(n)?`attribute`:`string`},{re:/-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y,type:`number`},{re:/\b(?:true|false|null)\b/y,type:`keyword`},{re:/[{}[\],:]/y,type:`punctuation`},{re:/\s+/y,type:`plain`}],c=r(`
+  if then else elif fi for while until do done case esac in function select
+  return break continue export local readonly declare unset source alias
+  echo cd exit set shift trap eval exec test time
+`),l=e=>{e.commandStart=!1},u={js:a,css:o,json:s,bash:[{re:/(?<=^|\s)#[^\n]*/y,type:`comment`},{re:/(?<=^|\n)[$>](?= )/y,type:`punctuation`},{re:/"(?:\\[\s\S]|[^"\\])*"?/y,type:(e,t)=>(l(t),`string`)},{re:/'[^']*'?/y,type:(e,t)=>(l(t),`string`)},{re:/\$(?:\{[^}\n]*\}?|[\w@#?*!$-]+|\(\(?)/y,type:(e,t)=>(l(t),`attribute`)},{re:/(?<=\s|^)--?[\w-]+(?:=)?/y,type:(e,t)=>(l(t),`attribute`)},{re:/(?<![\w-])\d+(?:\.\d+)?(?![\w-])/y,type:(e,t)=>(l(t),`number`)},{re:/[A-Za-z_][\w.@/+-]*/y,type:(e,t)=>{let n=t.commandStart;return t.commandStart=!1,c.has(e)?(t.commandStart=/^(?:then|do|else|elif|if|while|until|time)$/.test(e),`keyword`):n?`tag`:`plain`}},{re:/\n|&&|\|\||[|;&]/y,type:(e,t)=>(t.commandStart=!0,e===`
+`?`plain`:`punctuation`)},{re:/[<>(){}[\]=\\]+/y,type:`punctuation`},{re:/[^\S\n]+/y,type:`plain`}],html:[{re:/<!--[\s\S]*?(?:-->|$)/y,type:`comment`,when:e=>!e.inTag},{re:/<![A-Za-z][^>]*>?/y,type:`keyword`,when:e=>!e.inTag},{re:/<\?[\s\S]*?(?:\?>|$)/y,type:`keyword`,when:e=>!e.inTag},{re:/<\/?(?=[A-Za-z])/y,when:e=>!e.inTag,type:(e,t)=>(t.inTag=!0,t.expectTagName=!0,`punctuation`)},{re:/[A-Za-z][\w:.-]*/y,when:e=>e.inTag,type:(e,t)=>t.expectTagName?(t.expectTagName=!1,`tag`):`attribute`},{re:/"[^"]*"?|'[^']*'?/y,type:`string`,when:e=>e.inTag},{re:/\/?>/y,when:e=>e.inTag,type:(e,t)=>(t.inTag=!1,`punctuation`)},{re:/=/y,type:`punctuation`,when:e=>e.inTag},{re:/&(?:#\d+|#x[\da-fA-F]+|\w+);/y,type:`keyword`,when:e=>!e.inTag},{re:/[^<&]+/y,type:`plain`,when:e=>!e.inTag},{re:/\s+/y,type:`plain`}]};function d(e,r){let i=t(r);return!i||e===``?e===``?[]:[{type:`plain`,content:e}]:n(e,u[i])}exports.resolveTokenizerLanguage=t,exports.tokenizeCode=d;

package/dist/components/data-display/CodeBlock/tokenize.d.ts

@@ -0,0 +1,26 @@
+/** Kind of a syntax token. Each maps to one verified text color in CodeBlock. */
+export type CodeTokenType = "keyword" | "string" | "number" | "comment" | "punctuation" | "tag" | "attribute" | "plain";
+/** One piece of tokenized source. Concatenating every `content` gives back the input. */
+export interface CodeToken {
+    /** What kind of syntax this piece is. */
+    type: CodeTokenType;
+    /** The exact source text. May contain newlines (e.g. a block comment). */
+    content: string;
+}
+/** Languages the built-in tokenizer understands, by their canonical name. */
+export type TokenizerLanguage = "js" | "css" | "json" | "bash" | "html";
+/** Resolves a language name or alias (e.g. `"tsx"`, `"sh"`) to a built-in tokenizer, or `undefined`. */
+export declare function resolveTokenizerLanguage(language: string | undefined): TokenizerLanguage | undefined;
+/**
+ * Splits source code into typed tokens for syntax highlighting, without any
+ * dependencies. Supports `ts`, `tsx`, `js`, `jsx` (and aliases such as
+ * `typescript`), `css`, `json`, `bash` (`sh`, `shell`), and `html` (`xml`,
+ * `svg`). Unknown or missing languages return a single `plain` token.
+ *
+ * Safe by construction: it only slices the input string. Concatenating
+ * every token's `content` always reproduces `code` exactly.
+ *
+ * @example tokenizeCode("const a = 1;", "ts")
+ * // [{ type: "keyword", content: "const" }, { type: "plain", content: " a " }, ...]
+ */
+export declare function tokenizeCode(code: string, language?: string): CodeToken[];

package/dist/components/data-display/CodeBlock/tokenize.mjs

@@ -0,0 +1,307 @@
+//#region src/components/data-display/CodeBlock/tokenize.ts
+var e = {
+	js: "js",
+	jsx: "js",
+	mjs: "js",
+	cjs: "js",
+	javascript: "js",
+	ts: "js",
+	tsx: "js",
+	mts: "js",
+	cts: "js",
+	typescript: "js",
+	css: "css",
+	json: "json",
+	jsonc: "json",
+	bash: "bash",
+	sh: "bash",
+	shell: "bash",
+	shellscript: "bash",
+	zsh: "bash",
+	console: "bash",
+	html: "html",
+	htm: "html",
+	xml: "html",
+	svg: "html"
+};
+function t(t) {
+	if (t) return e[t.trim().toLowerCase()];
+}
+function n(e, t) {
+	let n = [], r = {
+		depth: 0,
+		inTag: !1,
+		expectTagName: !1,
+		commandStart: !0
+	}, i = (e, t) => {
+		let r = n[n.length - 1];
+		r && r.type === e && e === "plain" ? r.content += t : n.push({
+			type: e,
+			content: t
+		});
+	}, a = 0;
+	for (; a < e.length;) {
+		let n = !1;
+		for (let o of t) {
+			if (o.when && !o.when(r)) continue;
+			o.re.lastIndex = a;
+			let t = o.re.exec(e);
+			if (!t || t[0].length === 0) continue;
+			let s = t[0];
+			i(typeof o.type == "function" ? o.type(s, r, e.slice(a + s.length, a + s.length + 64)) : o.type, s), a += s.length, n = !0;
+			break;
+		}
+		n || (i("plain", e[a]), a += 1);
+	}
+	return n;
+}
+var r = (e) => new Set(e.split(/\s+/).filter(Boolean)), i = r("\n  abstract as async await break case catch class const continue debugger\n  declare default delete do else enum export extends false finally for from\n  function get if implements import in infer instanceof interface is keyof let\n  namespace new null of private protected public readonly return satisfies set\n  static super switch this throw true try type typeof undefined unique var void\n  while with yield any boolean never number object string symbol unknown bigint\n"), a = [
+	{
+		re: /\/\/[^\n]*/y,
+		type: "comment"
+	},
+	{
+		re: /\/\*[\s\S]*?(?:\*\/|$)/y,
+		type: "comment"
+	},
+	{
+		re: /"(?:\\.|[^"\\\n])*"?/y,
+		type: "string"
+	},
+	{
+		re: /'(?:\\.|[^'\\\n])*'?/y,
+		type: "string"
+	},
+	{
+		re: /`(?:\\[\s\S]|[^`\\])*`?/y,
+		type: "string"
+	},
+	{
+		re: /(?:0[xX][\da-fA-F_]+|0[bB][01_]+|0[oO][0-7_]+|(?:\d[\d_]*)?\.?\d[\d_]*(?:[eE][+-]?\d+)?)n?(?![\w$])/y,
+		type: "number"
+	},
+	{
+		re: /(?<=(?:^|[\s(){}[\],;:?&|!=>])<\/?)[A-Za-z][\w.:-]*/y,
+		type: "tag"
+	},
+	{
+		re: /[A-Za-z_][\w-]*(?==["'{])/y,
+		type: "attribute"
+	},
+	{
+		re: /[A-Za-z_$][\w$]*/y,
+		type: (e) => i.has(e) ? "keyword" : "plain"
+	},
+	{
+		re: /[{}()[\];,.<>:?!=+\-*/%&|^~@#]+/y,
+		type: "punctuation"
+	},
+	{
+		re: /\s+/y,
+		type: "plain"
+	}
+], o = [
+	{
+		re: /\/\*[\s\S]*?(?:\*\/|$)/y,
+		type: "comment"
+	},
+	{
+		re: /"(?:\\.|[^"\\\n])*"?/y,
+		type: "string"
+	},
+	{
+		re: /'(?:\\.|[^'\\\n])*'?/y,
+		type: "string"
+	},
+	{
+		re: /@[\w-]+/y,
+		type: "keyword"
+	},
+	{
+		re: /!important\b/y,
+		type: "keyword"
+	},
+	{
+		re: /\{/y,
+		type: (e, t) => (t.depth += 1, "punctuation")
+	},
+	{
+		re: /\}/y,
+		type: (e, t) => (t.depth = Math.max(0, t.depth - 1), "punctuation")
+	},
+	{
+		re: /-{0,2}[A-Za-z][\w-]*(?=\s*:)/y,
+		type: "attribute",
+		when: (e) => e.depth > 0
+	},
+	{
+		re: /#[\da-fA-F]{3,8}(?![\w-])/y,
+		type: "number",
+		when: (e) => e.depth > 0
+	},
+	{
+		re: /-?(?:\d*\.)?\d+(?:[a-zA-Z]+|%)?/y,
+		type: "number"
+	},
+	{
+		re: /[.#]?-?[A-Za-z_][\w-]*/y,
+		type: (e, t) => t.depth > 0 ? "plain" : "tag"
+	},
+	{
+		re: /[:;,()>+~*=[\]]+/y,
+		type: "punctuation"
+	},
+	{
+		re: /\s+/y,
+		type: "plain"
+	}
+], s = [
+	{
+		re: /\/\/[^\n]*/y,
+		type: "comment"
+	},
+	{
+		re: /\/\*[\s\S]*?(?:\*\/|$)/y,
+		type: "comment"
+	},
+	{
+		re: /"(?:\\.|[^"\\\n])*"?/y,
+		type: (e, t, n) => /^\s*:/.test(n) ? "attribute" : "string"
+	},
+	{
+		re: /-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/y,
+		type: "number"
+	},
+	{
+		re: /\b(?:true|false|null)\b/y,
+		type: "keyword"
+	},
+	{
+		re: /[{}[\],:]/y,
+		type: "punctuation"
+	},
+	{
+		re: /\s+/y,
+		type: "plain"
+	}
+], c = r("\n  if then else elif fi for while until do done case esac in function select\n  return break continue export local readonly declare unset source alias\n  echo cd exit set shift trap eval exec test time\n"), l = (e) => {
+	e.commandStart = !1;
+}, u = {
+	js: a,
+	css: o,
+	json: s,
+	bash: [
+		{
+			re: /(?<=^|\s)#[^\n]*/y,
+			type: "comment"
+		},
+		{
+			re: /(?<=^|\n)[$>](?= )/y,
+			type: "punctuation"
+		},
+		{
+			re: /"(?:\\[\s\S]|[^"\\])*"?/y,
+			type: (e, t) => (l(t), "string")
+		},
+		{
+			re: /'[^']*'?/y,
+			type: (e, t) => (l(t), "string")
+		},
+		{
+			re: /\$(?:\{[^}\n]*\}?|[\w@#?*!$-]+|\(\(?)/y,
+			type: (e, t) => (l(t), "attribute")
+		},
+		{
+			re: /(?<=\s|^)--?[\w-]+(?:=)?/y,
+			type: (e, t) => (l(t), "attribute")
+		},
+		{
+			re: /(?<![\w-])\d+(?:\.\d+)?(?![\w-])/y,
+			type: (e, t) => (l(t), "number")
+		},
+		{
+			re: /[A-Za-z_][\w.@/+-]*/y,
+			type: (e, t) => {
+				let n = t.commandStart;
+				return t.commandStart = !1, c.has(e) ? (t.commandStart = /^(?:then|do|else|elif|if|while|until|time)$/.test(e), "keyword") : n ? "tag" : "plain";
+			}
+		},
+		{
+			re: /\n|&&|\|\||[|;&]/y,
+			type: (e, t) => (t.commandStart = !0, e === "\n" ? "plain" : "punctuation")
+		},
+		{
+			re: /[<>(){}[\]=\\]+/y,
+			type: "punctuation"
+		},
+		{
+			re: /[^\S\n]+/y,
+			type: "plain"
+		}
+	],
+	html: [
+		{
+			re: /<!--[\s\S]*?(?:-->|$)/y,
+			type: "comment",
+			when: (e) => !e.inTag
+		},
+		{
+			re: /<![A-Za-z][^>]*>?/y,
+			type: "keyword",
+			when: (e) => !e.inTag
+		},
+		{
+			re: /<\?[\s\S]*?(?:\?>|$)/y,
+			type: "keyword",
+			when: (e) => !e.inTag
+		},
+		{
+			re: /<\/?(?=[A-Za-z])/y,
+			when: (e) => !e.inTag,
+			type: (e, t) => (t.inTag = !0, t.expectTagName = !0, "punctuation")
+		},
+		{
+			re: /[A-Za-z][\w:.-]*/y,
+			when: (e) => e.inTag,
+			type: (e, t) => t.expectTagName ? (t.expectTagName = !1, "tag") : "attribute"
+		},
+		{
+			re: /"[^"]*"?|'[^']*'?/y,
+			type: "string",
+			when: (e) => e.inTag
+		},
+		{
+			re: /\/?>/y,
+			when: (e) => e.inTag,
+			type: (e, t) => (t.inTag = !1, "punctuation")
+		},
+		{
+			re: /=/y,
+			type: "punctuation",
+			when: (e) => e.inTag
+		},
+		{
+			re: /&(?:#\d+|#x[\da-fA-F]+|\w+);/y,
+			type: "keyword",
+			when: (e) => !e.inTag
+		},
+		{
+			re: /[^<&]+/y,
+			type: "plain",
+			when: (e) => !e.inTag
+		},
+		{
+			re: /\s+/y,
+			type: "plain"
+		}
+	]
+};
+function d(e, r) {
+	let i = t(r);
+	return !i || e === "" ? e === "" ? [] : [{
+		type: "plain",
+		content: e
+	}] : n(e, u[i]);
+}
+//#endregion
+export { t as resolveTokenizerLanguage, d as tokenizeCode };

package/dist/components/data-display/DataGrid/DataGrid.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../hooks/useMergedRef.cjs.js"),r=require("../../../utils/cx.cjs.js"),i=require("../../../utils/announce.cjs.js"),a=require("../../feedback/Spinner/Spinner.cjs.js"),o=require("../../primitives/Icon/icons.cjs.js"),s=require("../../layout/ScrollArea/ScrollArea.cjs.js"),c=require("../../forms/CheckBox/CheckBox.cjs.js"),ee=require("../../navigation/Pagination/Pagination.cjs.js"),l=require("./dataGridUtils.cjs.js"),u=require("./DataGrid.module.css.cjs.js");let d=require("react"),f=require("react/jsx-runtime");var te={compact:u.default.compact,comfortable:u.default.comfortable,spacious:u.default.spacious},ne={plain:u.default.plain,striped:u.default.striped,outline:u.default.outline},re={start:u.default.alignStart,center:u.default.alignCenter,end:u.default.alignEnd},ie=10,ae=`a[href],button:not([disabled]),input:not([disabled]):not([type='hidden']),select:not([disabled]),textarea:not([disabled]),[contenteditable='true'],[data-grid-widget]`,p=e=>Array.from(e.querySelectorAll(ae));function m(e){return e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement?!0:e instanceof HTMLInputElement?![`checkbox`,`radio`,`button`,`submit`,`reset`,`color`,`file`,`image`].includes(e.type):e.getAttribute(`contenteditable`)===`true`}function h(e){let t=p(e).filter(e=>!e.hasAttribute(`data-grid-secondary`));return t.length===1&&!m(t[0])?t[0]:e}var oe=e=>{let[t,n]=(e.getAttribute(`data-cell`)??`0:0`).split(`:`).map(Number);return[t,n]},se=e=>typeof e==`number`?`${e}px`:e,ce=e=>e.id;function g({rows:m,columns:g,getRowId:_=ce,getRowLabel:le,"aria-label":v,"aria-labelledby":y,"aria-describedby":ue,sort:de,defaultSort:fe,onSortChange:pe,multiSort:me=!0,filter:b=``,selectionMode:x=`none`,selected:he,defaultSelected:ge,onSelectedChange:_e,isRowSelectable:ve,pageSize:S,page:ye,defaultPage:be=1,onPageChange:xe,manual:C=!1,rowCount:Se,onRowActivate:w,loading:T=!1,emptyState:Ce,density:we=`comfortable`,variant:Te=`outline`,hoverable:Ee=!0,stickyHeader:De=!0,maxHeight:Oe,layout:ke=`auto`,tableStyle:Ae,className:je,style:Me,ref:Ne}){let{messages:E,locale:D}=t.useLocale(),O=E.dataGrid,k=(0,d.useRef)(null),Pe=(0,d.useId)(),Fe=`${Pe}-pages`,Ie=`${Pe}-name`,Le=n.useMergedRef(k,Ne),[A,Re]=e.useControllableState({value:de,defaultValue:fe??[],onChange:pe}),[j,M]=e.useControllableState({value:he,defaultValue:ge??[],onChange:_e}),[ze,N]=e.useControllableState({value:ye,defaultValue:be,onChange:xe}),P=(0,d.useMemo)(()=>C?m.slice():l.sortRows(l.filterRows(m,b,g),A,g,D),[C,m,b,g,A,D]),F=C?Se??m.length:P.length,I=S?Math.max(1,Math.ceil(F/S)):1,L=Math.min(Math.max(1,ze),I),R=S&&!C?(L-1)*S:0,z=S&&!C?P.slice(R,R+S):P,B=S?(L-1)*S:0,V=`${b}|${JSON.stringify(A)}`,Be=(0,d.useRef)(V);(0,d.useEffect)(()=>{Be.current!==V&&(Be.current=V,S&&L!==1&&N(1))},[V,S,L,N]);let Ve=(0,d.useRef)(b);(0,d.useEffect)(()=>{if(Ve.current===b)return;let e=window.setTimeout(()=>{Ve.current=b,i.announce(F===0?O.noResults:O.rowCount(F))},600);return()=>window.clearTimeout(e)},[b,F,O]);let H=x===`multiple`,U=x!==`none`,W=+!!H,G=g.length+W,He=g.find(e=>e.rowHeader)??g[0],Ue=e=>le?.(e)??String((He&&l.getCellValue(e,He))??_(e)),We=e=>e.headerLabel??(typeof e.header==`string`?e.header:e.key),K=(0,d.useMemo)(()=>new Set(j),[j]),Ge=e=>ve?.(e)??!0,q=(0,d.useMemo)(()=>P.filter(e=>ve?.(e)??!0).map(_),[P,ve,_]),J=q.filter(e=>K.has(e)).length,Ke=q.length>0&&J===q.length,qe=J>0&&!Ke,Je=(0,d.useRef)(null),Y=(0,d.useRef)(!1),Ye=(e,t,n)=>{let r=z[e];if(!r||!Ge(r))return;let i=_(r);if(x===`single`){M(K.has(i)&&n!==!0?[]:[i]),Je.current=e;return}let a=n??!K.has(i),o=Je.current,s=[i];if(t&&o!==null&&o!==e){let[t,n]=o<e?[o,e]:[e,o];s=z.slice(t,n+1).filter(Ge).map(_)}let c=new Set(j);for(let e of s)a?c.add(e):c.delete(e);Je.current=e,M(Array.from(c))},Xe=e=>{let t=new Set(j);for(let n of q)e?t.add(n):t.delete(n);M(Array.from(t))},Ze=(e,t)=>{let n=A.find(t=>t.key===e.key),r=n?n.direction===`ascending`?`descending`:null:`ascending`,a;a=t&&me?n?r?A.map(t=>t.key===e.key?{key:t.key,direction:r}:t):A.filter(t=>t.key!==e.key):[...A,{key:e.key,direction:`ascending`}]:r?[{key:e.key,direction:r}]:[],Re(a),i.announce(r?O.sorted(We(e),r===`ascending`?O.ascending:O.descending):O.sortCleared)},Qe=z.length,[$e,et]=(0,d.useState)({r:0,c:0}),X=Math.min($e.r,Qe),Z=Math.min($e.c,G-1),[tt,Q]=(0,d.useState)(!1),[nt,rt]=(0,d.useState)(0),it=(e,t)=>k.current?.querySelector(`[data-cell="${e}:${t}"]`)??null;(0,d.useLayoutEffect)(()=>{let e=k.current;if(!e)return;for(let t of e.querySelectorAll(`[data-cell]`)){t.tabIndex=-1;for(let e of p(t))e.tabIndex=-1}let t=it(X,Z);if(t){if(tt)for(let e of p(t))e.tabIndex=0;else h(t).tabIndex=0}}),(0,d.useLayoutEffect)(()=>{if(nt===0)return;let e=it(X,Z);if(!e)return;let t=h(e);t.focus({preventScroll:!0}),(t===e?e:t).scrollIntoView?.({block:`nearest`,inline:`nearest`})},[nt]);let $=(e,t)=>{Q(!1),et({r:Math.max(0,Math.min(e,Qe)),c:Math.max(0,Math.min(t,G-1))}),rt(e=>e+1)},at=e=>{let t=e.target,n=t.closest(`[data-cell]`);if(!n||!k.current?.contains(n))return;let[r,i]=oe(n);(r!==X||i!==Z)&&et({r,c:i}),Q(t!==n&&t!==h(n))},ot=e=>{let t=e.relatedTarget;(!t||!k.current?.contains(t))&&Q(!1)},st=e=>{if(Y.current=e.shiftKey,e.defaultPrevented||e.nativeEvent.isComposing)return;let t=e.target,n=t.closest(`[data-cell]`);if(!n||!k.current?.contains(n))return;let[r,i]=oe(n);if(tt||t!==n&&t!==h(n)){if(e.key===`Escape`)e.preventDefault(),Q(!1),n.focus();else if(e.key===`Tab`){let r=p(n);if(r.length===0)return;e.preventDefault(),r[(r.indexOf(t)+(e.shiftKey?-1:1)+r.length)%r.length].focus()}return}let a=getComputedStyle(n).direction===`rtl`,o=e.ctrlKey||e.metaKey,s=r>0?z[r-1]:void 0;switch(e.key){case`ArrowDown`:e.preventDefault(),$(r+1,i);return;case`ArrowUp`:e.preventDefault(),$(r-1,i);return;case`ArrowRight`:e.preventDefault(),$(r,a?i-1:i+1);return;case`ArrowLeft`:e.preventDefault(),$(r,a?i+1:i-1);return;case`Home`:e.preventDefault(),$(o?0:r,0);return;case`End`:e.preventDefault(),$(o?Qe:r,G-1);return;case`PageDown`:e.preventDefault(),$(Math.max(1,r+ie),i);return;case`PageUp`:e.preventDefault(),$(Math.max(+(r>0),r-ie),i);return;case`Enter`:case`F2`:{let r=p(n);r.length>0&&(t===n||e.key===`F2`)?(e.preventDefault(),Q(!0),r[0].focus()):e.key===`Enter`&&t===n&&s&&w&&(e.preventDefault(),w(s));return}case` `:s&&U&&t===n&&(e.preventDefault(),Ye(r-1,e.shiftKey));return;default:o&&e.key.toLowerCase()===`a`&&H&&(e.preventDefault(),Xe(!Ke))}},ct=(0,d.useMemo)(()=>new Intl.NumberFormat(D),[D]),lt=(0,d.useMemo)(()=>new Intl.DateTimeFormat(D,{dateStyle:`medium`}),[D]),ut=e=>e==null?``:typeof e==`number`?ct.format(e):e instanceof Date?lt.format(e):String(e),dt=(e,t)=>{if(e.target.closest(ae))return;let n=z[t];x===`single`&&Ye(t,!1,!0),n&&w&&w(n)},ft=A[0],pt=!C&&b.trim()!==``,mt=!!S||H&&J>0,ht=F===0?0:B+1,gt=Math.min(F,B+z.length);return(0,f.jsxs)(`div`,{className:r.cx(u.default.frame,ne[Te],te[we],Ee&&u.default.hoverable,De&&u.default.sticky,je),style:Me,children:[(0,f.jsx)(s.ScrollArea,{scrollbars:`both`,maxHeight:Oe,shadows:!1,tabIndex:-1,className:u.default.scroll,children:(0,f.jsxs)(`table`,{ref:Le,role:`grid`,className:r.cx(u.default.table,ke===`fixed`&&u.default.fixed),style:Ae,"aria-label":v,"aria-labelledby":y,"aria-describedby":ue,"aria-rowcount":F+1,"aria-colcount":G,"aria-multiselectable":H||void 0,"aria-busy":T||void 0,onKeyDown:st,onFocus:at,onBlur:ot,onPointerDown:e=>{Y.current=e.shiftKey},children:[(0,f.jsx)(`thead`,{className:u.default.head,children:(0,f.jsxs)(`tr`,{"aria-rowindex":1,children:[H&&(0,f.jsx)(`th`,{role:`columnheader`,"data-cell":`0:0`,"data-select-column":``,"aria-colindex":1,className:r.cx(u.default.cell,u.default.selectCell),children:(0,f.jsx)(c.CheckBox,{checked:Ke,indeterminate:qe,disabled:q.length===0,onCheckedChange:e=>Xe(qe?!0:e),"aria-label":E.table.selectAll})}),g.map((e,t)=>{let n=t+W,i=A.findIndex(t=>t.key===e.key),a=i>=0?A[i].direction:null,s=a===`ascending`?o.ArrowUpIcon:a===`descending`?o.ArrowDownIcon:o.SortIcon,c=e.align??(e.numeric?`end`:`start`);return(0,f.jsxs)(`th`,{role:`columnheader`,"data-cell":`0:${n}`,"aria-colindex":n+1,scope:`col`,"aria-sort":ft?.key===e.key?ft.direction:void 0,"data-sorted":a??void 0,className:r.cx(u.default.cell,u.default.headerCell,e.sortable&&u.default.sortableCell,re[c],e.numeric&&u.default.numeric,e.headerEnd!=null&&u.default.hasHeaderEnd,e.className),style:{inlineSize:se(e.width),minInlineSize:se(e.minWidth),...e.style},children:[e.sortable?(0,f.jsxs)(`button`,{type:`button`,className:u.default.sortButton,onClick:t=>Ze(e,t.shiftKey||Y.current),children:[(0,f.jsx)(`span`,{className:u.default.sortLabel,children:e.header}),(0,f.jsxs)(`span`,{className:u.default.sortIcon,"aria-hidden":`true`,children:[(0,f.jsx)(s,{size:`sm`,strokeWidth:2.5}),A.length>1&&i>=0&&(0,f.jsx)(`span`,{className:u.default.sortPriority,children:i+1})]})]}):e.header,e.headerEnd]},e.key)})]})}),(0,f.jsx)(`tbody`,{className:u.default.body,children:z.length===0?(0,f.jsx)(`tr`,{className:u.default.emptyRow,children:(0,f.jsx)(`td`,{role:`gridcell`,colSpan:G,className:r.cx(u.default.cell,u.default.emptyCell),children:T?(0,f.jsxs)(`span`,{className:u.default.loadingInline,children:[(0,f.jsx)(a.Spinner,{size:`sm`,decorative:!0}),E.table.loading]}):Ce??(pt?O.noResults:O.empty)})}):z.map((e,t)=>{let n=_(e),i=t+1,a=K.has(n),o=Ge(e);return(0,f.jsxs)(`tr`,{"aria-rowindex":B+t+2,"aria-selected":U?a:void 0,"aria-disabled":U&&!o?!0:void 0,"data-selected":a||void 0,className:r.cx(u.default.row,(w||x===`single`)&&u.default.clickable),onClick:e=>dt(e,t),children:[H&&(0,f.jsx)(`td`,{role:`gridcell`,"data-cell":`${i}:0`,"data-select-column":``,"aria-colindex":1,className:r.cx(u.default.cell,u.default.selectCell),children:(0,f.jsx)(c.CheckBox,{checked:a,disabled:!o,onCheckedChange:e=>Ye(t,Y.current,e),"aria-label":E.table.selectRowNamed(Ue(e))})}),g.map((n,o)=>{let s=o+W,c=l.getCellValue(e,n),ee=n.cell?n.cell(e,{value:c,rowIndex:R+t,selected:a}):ut(c),d=n.align??(n.numeric?`end`:`start`),te=n.rowHeader?`th`:`td`;return(0,f.jsx)(te,{role:n.rowHeader?`rowheader`:`gridcell`,"data-cell":`${i}:${s}`,"aria-colindex":s+1,scope:n.rowHeader?`row`:void 0,className:r.cx(u.default.cell,n.rowHeader&&u.default.rowHeader,re[d],n.numeric&&u.default.numeric,n.className),style:n.style,children:ee},n.key)})]},n)})})]})}),T&&z.length>0&&(0,f.jsx)(`div`,{className:u.default.loadingOverlay,children:(0,f.jsx)(a.Spinner,{label:E.table.loading})}),(0,f.jsx)(`span`,{hidden:!0,id:Fe,children:E.pagination.nav}),v&&!y&&(0,f.jsx)(`span`,{hidden:!0,id:Ie,children:v}),mt&&(0,f.jsxs)(`div`,{className:u.default.footer,children:[(0,f.jsx)(`span`,{role:`status`,className:u.default.status,children:H&&J>0?O.selectedCount(J):null}),S?(0,f.jsxs)(`div`,{className:u.default.paging,children:[(0,f.jsx)(`span`,{className:u.default.range,children:O.range(ht,gt,F)}),I>1&&(0,f.jsx)(ee.Pagination,{size:`sm`,compact:!0,pageCount:I,page:L,onPageChange:N,"aria-labelledby":`${Fe} ${y??Ie}`})]}):null]})]})}exports.DataGrid=g,exports.compareValues=l.compareValues,exports.filterRows=l.filterRows,exports.getCellValue=l.getCellValue,exports.sortRows=l.sortRows;

package/dist/components/data-display/DataGrid/DataGrid.d.ts

@@ -0,0 +1,183 @@
+import { CSSProperties, ReactNode, Ref } from 'react';
+import { DataGridRowId, DataGridSortItem } from './dataGridUtils';
+export type { DataGridRowId, DataGridSortItem } from './dataGridUtils';
+export { compareValues, filterRows, getCellValue, sortRows } from './dataGridUtils';
+/** Horizontal alignment of a column's cells. */
+export type DataGridAlign = "start" | "center" | "end";
+/** Row height and padding. */
+export type DataGridDensity = "compact" | "comfortable" | "spacious";
+/** Visual style: row dividers only, zebra stripes, or a rounded outlined frame. */
+export type DataGridVariant = "plain" | "striped" | "outline";
+/** How rows are selected. `multiple` adds a checkbox column. */
+export type DataGridSelectionMode = "none" | "single" | "multiple";
+/** What a custom cell renderer receives besides the row. */
+export interface DataGridCellContext {
+    /** The column's raw value for this row. */
+    value: unknown;
+    /** Index of the row among the rows shown. */
+    rowIndex: number;
+    /** Whether the row is selected. */
+    selected: boolean;
+}
+/** One column of a `DataGrid`. */
+export interface DataGridColumn<T> {
+    /** Unique key. Also the default field read from each row (`row[key]`). */
+    key: string;
+    /** Header content. */
+    header: ReactNode;
+    /** Plain-text header, for announcements and names when `header` isn't a string. Defaults to `header` or `key`. */
+    headerLabel?: string;
+    /** Raw value for sorting, filtering, and default rendering. @default (row) => row[key] */
+    value?: (row: T) => unknown;
+    /** Renders the cell. Defaults to the value, with numbers and dates formatted for the locale. */
+    cell?: (row: T, context: DataGridCellContext) => ReactNode;
+    /** The header sorts this column. @default false */
+    sortable?: boolean;
+    /** Ascending comparator, for values the default order gets wrong. */
+    compare?: (a: T, b: T) => number;
+    /** Include this column's values in the `filter` search. @default true */
+    filterable?: boolean;
+    /** Width (px as a number, or any CSS length). */
+    width?: number | string;
+    /** Minimum width (px as a number, or any CSS length). */
+    minWidth?: number | string;
+    /** Cell alignment. @default "start" ("end" when `numeric`) */
+    align?: DataGridAlign;
+    /** Tabular, bold display figures, aligned to the end. @default false */
+    numeric?: boolean;
+    /**
+     * This column's cells name their rows (a player's name): they render as
+     * row headers, and the row's checkbox is named after them.
+     */
+    rowHeader?: boolean;
+    /** Class name for every cell of this column, header included. */
+    className?: string;
+    /** Style for every cell of this column, header included (for example sticky offsets). */
+    style?: CSSProperties;
+    /**
+     * Content placed in the header cell after the label, outside the sort
+     * button (a resize handle, a column menu). Mark focusable controls with
+     * `data-grid-secondary` so the sort button stays the cell's focus target;
+     * F2 then steps into the cell to reach them.
+     */
+    headerEnd?: ReactNode;
+}
+export interface DataGridProps<T> {
+    /** The data. Sorting, filtering, and paging work on a copy; this array is never mutated. */
+    rows: readonly T[];
+    /** The columns, in display order. */
+    columns: readonly DataGridColumn<T>[];
+    /** A stable id for each row. @default (row) => row.id */
+    getRowId?: (row: T) => DataGridRowId;
+    /** Readable name of a row, for its checkbox ("Select Jordan Reyes"). Defaults to the `rowHeader` column's value, then the first column's. */
+    getRowLabel?: (row: T) => string;
+    /** Accessible name of the grid. Required unless `aria-labelledby` is given. */
+    "aria-label"?: string;
+    /** Id of a visible heading that names the grid. */
+    "aria-labelledby"?: string;
+    /** Id of text that describes the grid. */
+    "aria-describedby"?: string;
+    /** Active sort, primary first (controlled). */
+    sort?: DataGridSortItem[];
+    /** Initial sort when uncontrolled. @default [] */
+    defaultSort?: DataGridSortItem[];
+    /** Called with the next sort. */
+    onSortChange?: (sort: DataGridSortItem[]) => void;
+    /** Shift+click (or Shift+Enter) on a header adds it as a secondary sort. @default true */
+    multiSort?: boolean;
+    /**
+     * Search text: rows are kept when their filterable columns contain every
+     * word (case- and diacritic-insensitive). Render your own search field
+     * (e.g. `SearchInput`) and pass its text here.
+     */
+    filter?: string;
+    /** How rows are selected. @default "none" */
+    selectionMode?: DataGridSelectionMode;
+    /** Selected row ids (controlled). */
+    selected?: DataGridRowId[];
+    /** Initially selected row ids when uncontrolled. @default [] */
+    defaultSelected?: DataGridRowId[];
+    /** Called with the next selected ids. */
+    onSelectedChange?: (selected: DataGridRowId[]) => void;
+    /** Rows that can't be selected (their checkbox is disabled). */
+    isRowSelectable?: (row: T) => boolean;
+    /** Rows per page. Shows a footer with the range and `Pagination`. Without it, every row shows. */
+    pageSize?: number;
+    /** Current page, starting at 1 (controlled). */
+    page?: number;
+    /** Initial page when uncontrolled. @default 1 */
+    defaultPage?: number;
+    /** Called with the next page. */
+    onPageChange?: (page: number) => void;
+    /**
+     * Server-side data: the grid doesn't sort, filter, or page `rows` itself.
+     * It shows them as given and reports `sort`, `filter`, and `page` changes
+     * for you to fetch. Pass `rowCount` for the total. @default false
+     */
+    manual?: boolean;
+    /** Total rows on the server, with `manual`. @default rows.length */
+    rowCount?: number;
+    /** Called when a row is activated: Enter on one of its cells, or a click on a non-interactive part of it. */
+    onRowActivate?: (row: T) => void;
+    /** Shows a loading state and marks the grid `aria-busy`. @default false */
+    loading?: boolean;
+    /** Shown when there are no rows. Defaults to "No rows" (or "No matching rows" while filtering). */
+    emptyState?: ReactNode;
+    /** Row height and padding. @default "comfortable" */
+    density?: DataGridDensity;
+    /** Visual style. @default "outline" */
+    variant?: DataGridVariant;
+    /** Highlight rows under the pointer. @default true */
+    hoverable?: boolean;
+    /** Keep the header row visible while scrolling. @default true */
+    stickyHeader?: boolean;
+    /** Maximum height of the scrolling body (CSS length, or px as a number). */
+    maxHeight?: CSSProperties["maxHeight"];
+    /**
+     * Table layout. `fixed` makes column widths exact (content wraps or clips
+     * instead of widening a column). @default "auto"
+     */
+    layout?: "auto" | "fixed";
+    /** Style for the `<table>` (for example a total width when columns are resized). */
+    tableStyle?: CSSProperties;
+    /** Class name for the outer frame. */
+    className?: string;
+    /** Style for the outer frame. */
+    style?: CSSProperties;
+    /** Ref to the `<table role="grid">`. */
+    ref?: Ref<HTMLTableElement>;
+}
+/**
+ * An interactive data table (WAI-ARIA APG "Data Grid"): sortable columns
+ * (with Shift for multi-column sorts), search filtering, single or
+ * multiple row selection, pagination, and a full keyboard model. Works with
+ * client-side data, or server-side data with `manual`.
+ *
+ * Keyboard: the grid is one Tab stop. Arrow keys move between cells
+ * (mirrored in RTL), Home / End go to the row's first or last cell, Ctrl+Home
+ * / Ctrl+End to the first or last cell of the grid, Page Up / Page Down move
+ * ten rows. On a header, Enter sorts (Shift+Enter adds a secondary sort).
+ * Space selects the row, Shift+click or Shift+Space selects a range, and
+ * Ctrl/⌘+A selects every row. A cell with a single button, link, or
+ * checkbox focuses it directly; for cells with several controls or a text
+ * field, Enter or F2 moves into the cell, Tab cycles inside it, and Escape
+ * returns to the grid.
+ *
+ * Screen readers hear sort changes and filter result counts; the grid is a
+ * real `<table role="grid">` with `aria-sort`, `aria-selected`,
+ * `aria-rowcount`, and `aria-rowindex`.
+ *
+ * ```tsx
+ * <DataGrid
+ *   aria-label="Roster"
+ *   rows={players}
+ *   columns={[
+ *     { key: "name", header: "Player", sortable: true, rowHeader: true },
+ *     { key: "ppg", header: "PPG", sortable: true, numeric: true },
+ *   ]}
+ *   selectionMode="multiple"
+ *   pageSize={10}
+ * />
+ * ```
+ */
+export declare function DataGrid<T>({ rows, columns, getRowId, getRowLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, sort: sortProp, defaultSort, onSortChange, multiSort, filter, selectionMode, selected: selectedProp, defaultSelected, onSelectedChange, isRowSelectable, pageSize, page: pageProp, defaultPage, onPageChange, manual, rowCount, onRowActivate, loading, emptyState, density, variant, hoverable, stickyHeader, maxHeight, layout, tableStyle, className, style, ref, }: DataGridProps<T>): import("react").JSX.Element;