@box-kite/react 2.2.14 → 2.2.16

package/components/dashboard.cjs

@@ -1 +1 @@
-"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../platform.cjs"),t=require("../box.cjs"),n=require("../behavior.cjs"),r=require("../dashboardSchema.cjs"),i=require("../reporting.cjs"),a=require("./svg.cjs"),o=require("./visuallyHidden.cjs");let s=require("react"),c=require("react/jsx-runtime");var l;(function(e){let t=e.VERSION=1,n=e.MIN_COLUMNS=1,i=e.MAX_COLUMNS=24;function a(e,t,n){return Math.min(Math.max(e,t),n)}function o(e,t){return typeof e==`number`&&Number.isFinite(e)?Math.round(e):t}function s(e,t){return e.x<t.x+t.w&&e.x+e.w>t.x&&e.y<t.y+t.h&&e.y+e.h>t.y}e.overlaps=s;function c(e,t){return e.find(e=>e.id!==t.id&&s(e,t))}function l(e,t){let n=Math.min(e.maxW??t,t),r=a(o(e.w,1),Math.max(1,Math.min(e.minW??1,n)),Math.max(1,n)),i=a(o(e.h,1),Math.max(1,e.minH??1),Math.max(1,e.maxH??2**53-1));return{...e,w:r,h:i,x:a(o(e.x,0),0,t-r),y:Math.max(o(e.y,0),0)}}function u(e,t){return e.y-t.y||e.x-t.x}function d(e,t){let r=a(o(t,12),n,i),s=e.map(e=>l(e,r)),d=e=>+!e.fixed,f=[...s].sort((e,t)=>d(e)-d(t)||u(e,t)),p=[];for(let e of f){if(e.fixed){p.push(e);continue}let t={...e};for(;t.y>0&&!c(p,{...t,y:t.y-1});)t.y--;let n=c(p,t);for(;n;)t.y=n.y+n.h,n=c(p,t);p.push(t)}return p.sort(u)}e.resolve=d;function f(e){let r=a(o(e.columns,12),n,i);return{version:t,columns:r,items:d(e.items,r)}}e.normalize=f;function p(e,t){return e.items.find(e=>e.id===t)}e.itemOf=p;function m(e){return new Map(e.items.map((e,t)=>[e.id,t]))}e.ranks=m;function h(e,t){let n=n=>!s(t,n)&&!e.some(e=>e.id!==n.id&&e.id!==t.id&&s(e,n));return e.map(e=>{if(e.id===t.id)return t;if(e.fixed===!0||!s(e,t))return e;let r={...e,y:Math.max(t.y-e.h,0)};return n(r)?r:{...e,y:t.y+t.h}})}function g(e,t,r,s){let c=p(e,t);if(!c||c.fixed)return e;let u=l({...c,x:r,y:s},a(o(e.columns,12),n,i));return f({...e,items:h(e.items,u)})}e.moveTo=g;function _(e,t,n,r){let i=p(e,t);if(!i||i.fixed)return e;let a=e.items.map(e=>e.id===t?{...e,w:n,h:r}:e);return f({...e,items:a})}e.resizeTo=_;function v(e,t){let n=e.items.reduce((e,t)=>Math.max(e,t.y+t.h),0);return f({...e,items:[...e.items,{x:0,y:n,...t}]})}e.add=v;function y(e,t){return f({...e,items:e.items.filter(e=>e.id!==t)})}e.remove=y;function b(e,r){let s=a(o(r,12),n,i);if(s===e.columns)return f(e);let c=s/e.columns,l=e=>e===void 0?void 0:a(Math.max(1,Math.round(e*c)),1,s),u=e.items.map(e=>{let t=a(Math.max(1,Math.round(e.w*c)),1,s);return{...e,w:t,x:a(Math.floor(e.x*c),0,s-t),minW:l(e.minW),maxW:l(e.maxW)}});return f({version:t,columns:s,items:u})}e.project=b;function x(e,t){return e===t?!0:e.columns!==t.columns||e.items.length!==t.items.length?!1:e.items.every((e,n)=>{let r=t.items[n];return e.id===r.id&&e.x===r.x&&e.y===r.y&&e.w===r.w&&e.h===r.h})}e.same=x;function S(e,t,n){return{columns:n.x>0?Math.round(e/n.x):0,rows:n.y>0?Math.round(t/n.y):0}}e.cellsMoved=S;function C(e){return typeof e==`string`&&e.length>0}function w(e){return typeof e==`number`&&Number.isFinite(e)}function T(e,t,n){if(typeof e!=`object`||!e||Array.isArray(e)){n.push({code:`invalid-item`,path:t,message:`A layout item has to be an object.`});return}let r=e;if(!C(r.id)){n.push({code:`invalid-item`,path:`${t}.id`,message:`A layout item needs an id naming the widget it places.`});return}if(!w(r.x)||!w(r.y)||!w(r.w)||!w(r.h)){n.push({code:`invalid-item`,path:t,message:`Item "${r.id}" needs numeric x, y, w and h.`});return}let i=[`minW`,`minH`,`maxW`,`maxH`].reduce((e,t)=>(w(r[t])&&(e[t]=Math.round(r[t])),e),{});return{id:r.id,x:Math.round(r.x),y:Math.round(r.y),w:Math.round(r.w),h:Math.round(r.h),...i,...r.fixed===!0?{fixed:!0}:{}}}function E(e,r=12){let o=[],s={version:t,columns:r,items:[]};if(typeof e!=`object`||!e||Array.isArray(e))return o.push({code:`not-an-object`,path:``,message:`A layout has to be an object.`}),{layout:f(s),issues:o};let c=e;c.version!==t&&o.push({code:`version`,path:`version`,message:`Layout version ${String(c.version)} was read as version ${t}.`});let l=w(c.columns)?a(Math.round(c.columns),n,i):r;if(w(c.columns)||o.push({code:`columns`,path:`columns`,message:`No column count, so the layout was read in ${r}.`}),!Array.isArray(c.items))return o.push({code:`items`,path:`items`,message:`A layout needs an items array.`}),{layout:f({...s,columns:l}),issues:o};let u=new Set,d=c.items.reduce((e,t,n)=>{let r=T(t,`items.${n}`,o);return r?u.has(r.id)?(o.push({code:`duplicate-id`,path:`items.${n}.id`,message:`Two items are called "${r.id}"; the second was dropped.`}),e):(u.add(r.id),e.push(r),e):e},[]);return{layout:f({version:t,columns:l,items:d}),issues:o}}e.parse=E,e.SCHEMA=r.t})(l||={});var u=l,d=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],f=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],p=(0,s.createContext)(null);function m(e,t,n){return Math.min(Math.max(e,t),n)}function h(e){if(typeof e==`number`)return[{count:m(Math.round(e),u.MIN_COLUMNS,u.MAX_COLUMNS)}];let t=d.filter(t=>typeof e[t]==`number`).map(t=>({size:t,count:m(Math.round(e[t]),u.MIN_COLUMNS,u.MAX_COLUMNS)}));return t.length>0?t:[{count:12}]}function g(e){return{gridColumnStart:e.x+1,gridColumnEnd:e.x+1+e.w,gridRowStart:e.y+1,gridRowEnd:e.y+1+e.h}}function _(e){return`max${e[0].toUpperCase()}${e.slice(1)}`}function v(e,t){let n=t?-1:1;if(e===`ArrowLeft`)return{x:-n,y:0};if(e===`ArrowRight`)return{x:n,y:0};if(e===`ArrowUp`)return{x:0,y:-1};if(e===`ArrowDown`)return{x:0,y:1}}function y(e){return`column ${e.x+1}, row ${e.y+1}`}function b(e){return`${e.w} ${e.w===1?`column`:`columns`} by ${e.h} ${e.h===1?`row`:`rows`}`}function x(r){let{children:a,layout:l,defaultLayout:f,onLayoutChange:m,onLayoutCommit:x,columns:S={xs:1,md:6,xxl:12},rowHeight:C=24,editable:w=!1,label:T,labelledBy:E,props:D,...O}=r,k=(0,s.useRef)(null),[A,j]=(0,s.useState)(null),[M,N]=(0,s.useState)(null),[P,F]=(0,s.useState)(``),I=`${(0,s.useId)()}-dashboard`,[L,ee]=n.i({value:l,defaultValue:f??{version:u.VERSION,columns:12,items:[]},onChange:m}),R=(0,s.useMemo)(()=>u.normalize(L),[L]),z=n.o(R),B=i.r(x,`dashboard`,`layoutCommit`),te=typeof S==`number`?String(S):d.map(e=>S[e]??``).join(),V=(0,s.useMemo)(()=>h(S),[te]),H=V[V.length-1],U=(0,s.useMemo)(()=>{let e=u.ranks(R),t=new Map;for(let n of V){let r=n.count===H.count?R:u.project(R,n.count),i=H.count/n.count;for(let a of r.items){let r=t.get(a.id)??{order:e.get(a.id)??0,fixed:a.fixed===!0},o=g({...a,x:Math.round(a.x*i),w:Math.round((a.x+a.w)*i)-Math.round(a.x*i)});n===V[0]?r.placement=o:r.query={...r.query,[n.size]:o},t.set(a.id,r)}}return t},[R,V,H.count]),W=n.a((e,t)=>{u.same(e,z.current)||ee(e,t)}),ne=(e,t)=>{let n=e.getBoundingClientRect(),r=k.current,i=r&&typeof getComputedStyle==`function`?getComputedStyle(r):void 0,a=Number.parseFloat(i?.columnGap??``)||0,o=Number.parseFloat(i?.rowGap??``)||0;return{x:(n.width+a)/t.w,y:(n.height+o)/t.h}},re=e=>e instanceof Element?e.closest(`[data-widget-id]`):null,G=(e,t,n,r)=>{let i=e.kind===`move`?u.moveTo(z.current,e.id,t,n):u.resizeTo(z.current,e.id,t,n);return W(i,{reason:e.kind,event:r}),i},K=n.a((t,n,r,i)=>{let a=u.itemOf(z.current,n),o=re(t.currentTarget);!w||t.button!==0||t.defaultPrevented||!a||a.fixed||!o||(t.preventDefault(),t.currentTarget.setPointerCapture?.(t.pointerId),t.currentTarget.focus(),j({id:n,kind:i,name:r,origin:a,before:z.current,pointer:{id:t.pointerId,x:t.clientX,y:t.clientY,step:ne(o,a),rtl:e.p(o)}}))}),q=n.a((e,t)=>{if(!A?.pointer||A.id!==t)return;let{x:n,y:r,step:i,rtl:a}=A.pointer,o={x:e.clientX-n,y:e.clientY-r},s=u.cellsMoved(a?-o.x:o.x,o.y,i),c=A.origin,l=A.kind===`move`?G(A,c.x+s.columns,c.y+s.rows,e):G(A,c.w+s.columns,c.h+s.rows,e),d=u.itemOf(l,t);if(A.kind!==`move`||!d)return;let f={x:(d.x-c.x)*i.x*(a?-1:1),y:(d.y-c.y)*i.y};N({translate:`${Math.round(o.x-f.x)}px ${Math.round(o.y-f.y)}px`})}),J=n.a((e,t)=>{if(!A?.pointer||A.id!==t)return;let n=u.itemOf(z.current,t);e.currentTarget.releasePointerCapture?.(A.pointer.id),j(null),N(null),B(z.current,{reason:A.kind,event:e}),n&&F(A.kind===`move`?`${A.name} moved to ${y(n)}.`:`${A.name} resized to ${b(n)}.`)}),Y=i.i(`dashboard`),X=n.a((e,t)=>{Y(`grabCancel`,e.id,{reason:t.type===`blur`?`blur`:`escape`,event:t}),W(e.before,{reason:e.kind,event:t}),j(null),F(`${e.name} put back at ${y(e.origin)}.`)}),Z=n.a((t,n,r,i)=>{if(!w||t.defaultPrevented)return;let a=A&&A.id===n&&A.kind===i&&!A.pointer?A:void 0,o=u.itemOf(z.current,n);if(!o)return;if(!a){if(t.key!==`Enter`&&t.key!==` `||o.fixed)return;t.preventDefault(),j({id:n,kind:i,name:r,origin:o,before:z.current}),Y(`grab`,n,{reason:i,event:t}),F(i===`move`?`${r} picked up at ${y(o)}. Use the arrow keys to move it.`:`${r} held for resizing at ${b(o)}. Use the arrow keys to resize it.`);return}if(t.key===`Escape`){t.preventDefault(),X(a,t);return}if(t.key===`Enter`||t.key===` `){t.preventDefault(),j(null),B(z.current,{reason:i,event:t}),F(i===`move`?`${r} dropped at ${y(o)}.`:`${r} resized to ${b(o)}.`);return}let s=v(t.key,e.p(t.currentTarget));if(!s)return;t.preventDefault();let c=i===`move`?G(a,o.x+s.x,o.y+s.y,t):G(a,o.w+s.x,o.h+s.y,t),l=u.itemOf(c,n);l&&F(i===`move`?`${r}, ${y(l)}.`:`${r}, ${b(l)}.`)}),Q=n.a((e,t,n)=>{A&&A.id===t&&A.kind===n&&!A.pointer&&X(A,e)}),ie=(0,s.useMemo)(()=>({editable:w,placementOf:e=>U.get(e),heldOf:e=>A&&A.id===e?A:void 0,offsetOf:e=>A&&A.id===e&&M?M:void 0,outsideAuthoring:H.size?{[_(H.size)]:{display:`none`}}:void 0,instructionsId:I,handleProps:(e,t,n)=>({type:`button`,"aria-label":n===`move`?`Move ${t}`:`Resize ${t}`,"aria-pressed":!!(A&&A.id===e&&A.kind===n),"aria-describedby":I,onPointerDown:r=>K(r,e,t,n),onPointerMove:t=>q(t,e),onPointerUp:t=>J(t,e),onPointerCancel:t=>J(t,e),onKeyDown:r=>Z(r,e,t,n),onBlur:t=>Q(t,e,n)})}),[w,U,A,M,H.size,I,K,q,J,Z,Q]),$=A?U.get(A.id):void 0;return(0,c.jsxs)(p.Provider,{value:ie,children:[(0,c.jsxs)(t.default,{ref:k,component:`dashboard`,...O,variant:[O.variant,{dragging:A!==null}],vars:{"dashboard-row":`${C/4}rem`},gridTemplateColumns:H.count,props:{role:`list`,"aria-label":T,"aria-labelledby":E,...D},children:[a,$&&(0,c.jsx)(t.default,{component:`dashboard.placeholder`,order:$.order,cq:$.query,...$.placement,props:{role:`presentation`,"aria-hidden":!0}})]}),(0,c.jsx)(o.default,{props:{role:`status`},children:P}),(0,c.jsx)(o.default,{id:I,children:`Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back.`})]})}function S({kind:e}){return e===`resize`?(0,c.jsx)(a.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,rtl:{flip:`xAxis`},props:{fill:`none`},children:(0,c.jsx)(a.Path,{d:`M20 10 10 20M20 16l-4 4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`})}):(0,c.jsxs)(a.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,children:[[8,12,16].map(e=>(0,c.jsx)(a.Circle,{cx:9,cy:e,r:1.4,fill:`currentColor`},e)),[8,12,16].map(e=>(0,c.jsx)(a.Circle,{cx:15,cy:e,r:1.4,fill:`currentColor`},e))]})}function C(){return(0,c.jsx)(a.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,c.jsx)(a.Path,{d:`M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`})})}function w(e){let{id:n,children:r,title:a,name:o,description:l,actions:u,level:d=3,loading:m=!1,error:h,empty:g,onRefresh:_,refreshLabel:v,props:y,...b}=e,x=(0,s.useContext)(p),w=n===void 0?void 0:x?.placementOf(n),T=n===void 0?void 0:x?.heldOf(n),E=o??(typeof a==`string`?a:void 0)??n??`Widget`,D=x?.editable===!0&&w!==void 0&&!w.fixed,O=i.r((e,t)=>_?.(),`widget`,`refresh`),k=e=>D&&n!==void 0?(0,c.jsx)(t.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0,grabbed:T?.kind===e,corner:e===`resize`},cq:x?.outsideAuthoring,props:x?.handleProps(n,E,e),children:(0,c.jsx)(S,{kind:e})}):null,A=()=>m?(0,c.jsx)(t.default,{component:`widget.skeleton`,props:{"aria-hidden":!0},children:[80,100,60].map(e=>(0,c.jsx)(t.default,{component:`widget.skeleton.bar`,width:`${e}%`},e))}):h?(0,c.jsxs)(t.default,{component:`widget.message`,variant:{error:!0},props:{role:`status`},children:[h,_&&(0,c.jsx)(t.default,{tag:`button`,component:`widget.retry`,props:{type:`button`,onClick:e=>O(n,{reason:`retry`,event:e})},children:`Try again`})]}):g?(0,c.jsx)(t.default,{component:`widget.message`,children:g===!0?`Nothing to show yet.`:g}):r,j=a!==void 0||l!==void 0||u!==void 0||_!==void 0||D;return(0,c.jsxs)(t.default,{component:`widget`,...b,variant:[b.variant,{dragging:T?.pointer!==void 0,grabbed:T!==void 0&&T.pointer===void 0}],order:w?.order,cq:w?.query,...w?.placement,style:{...n===void 0?void 0:x?.offsetOf(n),...b.style},props:{role:w?`listitem`:void 0,"aria-busy":m||void 0,"data-widget-id":n,...y},children:[j&&(0,c.jsxs)(t.default,{component:`widget.header`,children:[k(`move`),(0,c.jsxs)(t.default,{component:`widget.label`,children:[a!==void 0&&(0,c.jsx)(t.default,{component:`widget.title`,tag:f[d-1],children:a}),l!==void 0&&(0,c.jsx)(t.default,{component:`widget.description`,children:l})]}),_&&(0,c.jsx)(t.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0},props:{type:`button`,"aria-label":v??`Refresh ${E}`,onClick:e=>O(n,{reason:`refresh`,event:e})},children:(0,c.jsx)(C,{})}),u!==void 0&&(0,c.jsx)(t.default,{component:`widget.actions`,children:u})]}),(0,c.jsx)(t.default,{component:`widget.body`,children:A()}),k(`resize`)]})}var T=x;T.displayName=`DashboardGrid`;var E=w;E.displayName=`Widget`,exports.DashboardUtils=u,exports.Widget=E,exports.default=T;
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../react-shared.cjs"),t=require("../platform.cjs"),n=require("../box.cjs"),r=require("../behavior.cjs"),i=require("../dashboardSchema.cjs"),a=require("../reporting.cjs"),o=require("./svg.cjs"),s=require("./visuallyHidden.cjs");let c=require("react"),l=require("react/jsx-runtime");var u;(function(e){let t=e.VERSION=1,n=e.MIN_COLUMNS=1,r=e.MAX_COLUMNS=24;function a(e,t,n){return Math.min(Math.max(e,t),n)}function o(e,t){return typeof e==`number`&&Number.isFinite(e)?Math.round(e):t}function s(e,t){return e.x<t.x+t.w&&e.x+e.w>t.x&&e.y<t.y+t.h&&e.y+e.h>t.y}e.overlaps=s;function c(e,t){return e.find(e=>e.id!==t.id&&s(e,t))}function l(e,t){let n=Math.min(e.maxW??t,t),r=a(o(e.w,1),Math.max(1,Math.min(e.minW??1,n)),Math.max(1,n)),i=a(o(e.h,1),Math.max(1,e.minH??1),Math.max(1,e.maxH??2**53-1));return{...e,w:r,h:i,x:a(o(e.x,0),0,t-r),y:Math.max(o(e.y,0),0)}}function u(e,t){return e.y-t.y||e.x-t.x}function d(e,t){let i=a(o(t,12),n,r),s=e.map(e=>l(e,i)),d=e=>+!e.fixed,f=[...s].sort((e,t)=>d(e)-d(t)||u(e,t)),p=[];for(let e of f){if(e.fixed){p.push(e);continue}let t={...e};for(;t.y>0&&!c(p,{...t,y:t.y-1});)t.y--;let n=c(p,t);for(;n;)t.y=n.y+n.h,n=c(p,t);p.push(t)}return p.sort(u)}e.resolve=d;function f(e){let i=a(o(e.columns,12),n,r);return{version:t,columns:i,items:d(e.items,i)}}e.normalize=f;function p(e,t){return e.items.find(e=>e.id===t)}e.itemOf=p;function m(e){return new Map(e.items.map((e,t)=>[e.id,t]))}e.ranks=m;function h(e,t){let n=n=>!s(t,n)&&!e.some(e=>e.id!==n.id&&e.id!==t.id&&s(e,n));return e.map(e=>{if(e.id===t.id)return t;if(e.fixed===!0||!s(e,t))return e;let r={...e,y:Math.max(t.y-e.h,0)};return n(r)?r:{...e,y:t.y+t.h}})}function g(e,t,i,s){let c=p(e,t);if(!c||c.fixed)return e;let u=l({...c,x:i,y:s},a(o(e.columns,12),n,r));return f({...e,items:h(e.items,u)})}e.moveTo=g;function _(e,t,n,r){let i=p(e,t);if(!i||i.fixed)return e;let a=e.items.map(e=>e.id===t?{...e,w:n,h:r}:e);return f({...e,items:a})}e.resizeTo=_;function v(e,t){let n=e.items.reduce((e,t)=>Math.max(e,t.y+t.h),0);return f({...e,items:[...e.items,{x:0,y:n,...t}]})}e.add=v;function y(e,t){return f({...e,items:e.items.filter(e=>e.id!==t)})}e.remove=y;function b(e,i){let s=a(o(i,12),n,r);if(s===e.columns)return f(e);let c=s/e.columns,l=e=>e===void 0?void 0:a(Math.max(1,Math.round(e*c)),1,s),u=e.items.map(e=>{let t=a(Math.max(1,Math.round(e.w*c)),1,s);return{...e,w:t,x:a(Math.floor(e.x*c),0,s-t),minW:l(e.minW),maxW:l(e.maxW)}});return f({version:t,columns:s,items:u})}e.project=b;function x(e,t){return e===t?!0:e.columns!==t.columns||e.items.length!==t.items.length?!1:e.items.every((e,n)=>{let r=t.items[n];return e.id===r.id&&e.x===r.x&&e.y===r.y&&e.w===r.w&&e.h===r.h})}e.same=x;function S(e,t,n){return{columns:n.x>0?Math.round(e/n.x):0,rows:n.y>0?Math.round(t/n.y):0}}e.cellsMoved=S;function C(e){return typeof e==`string`&&e.length>0}function w(e){return typeof e==`number`&&Number.isFinite(e)}function T(e,t,n){if(typeof e!=`object`||!e||Array.isArray(e)){n.push({code:`invalid-item`,path:t,message:`A layout item has to be an object.`});return}let r=e;if(!C(r.id)){n.push({code:`invalid-item`,path:`${t}.id`,message:`A layout item needs an id naming the widget it places.`});return}if(!w(r.x)||!w(r.y)||!w(r.w)||!w(r.h)){n.push({code:`invalid-item`,path:t,message:`Item "${r.id}" needs numeric x, y, w and h.`});return}let i=[`minW`,`minH`,`maxW`,`maxH`].reduce((e,t)=>(w(r[t])&&(e[t]=Math.round(r[t])),e),{});return{id:r.id,x:Math.round(r.x),y:Math.round(r.y),w:Math.round(r.w),h:Math.round(r.h),...i,...r.fixed===!0?{fixed:!0}:{}}}function E(e,i=12){let o=[],s={version:t,columns:i,items:[]};if(typeof e!=`object`||!e||Array.isArray(e))return o.push({code:`not-an-object`,path:``,message:`A layout has to be an object.`}),{layout:f(s),issues:o};let c=e;c.version!==t&&o.push({code:`version`,path:`version`,message:`Layout version ${String(c.version)} was read as version ${t}.`});let l=w(c.columns)?a(Math.round(c.columns),n,r):i;if(w(c.columns)||o.push({code:`columns`,path:`columns`,message:`No column count, so the layout was read in ${i}.`}),!Array.isArray(c.items))return o.push({code:`items`,path:`items`,message:`A layout needs an items array.`}),{layout:f({...s,columns:l}),issues:o};let u=new Set,d=c.items.reduce((e,t,n)=>{let r=T(t,`items.${n}`,o);return r?u.has(r.id)?(o.push({code:`duplicate-id`,path:`items.${n}.id`,message:`Two items are called "${r.id}"; the second was dropped.`}),e):(u.add(r.id),e.push(r),e):e},[]);return{layout:f({version:t,columns:l,items:d}),issues:o}}e.parse=E,e.SCHEMA=i.t})(u||={});var d=u,f=[`xs`,`sm`,`md`,`lg`,`xl`,`xxl`],p=[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`],m=(0,c.createContext)(null);function h(e,t,n){return Math.min(Math.max(e,t),n)}function g(e){if(typeof e==`number`)return[{count:h(Math.round(e),d.MIN_COLUMNS,d.MAX_COLUMNS)}];let t=f.filter(t=>typeof e[t]==`number`).map(t=>({size:t,count:h(Math.round(e[t]),d.MIN_COLUMNS,d.MAX_COLUMNS)}));return t.length>0?t:[{count:12}]}function _(e){return{gridColumnStart:e.x+1,gridColumnEnd:e.x+1+e.w,gridRowStart:e.y+1,gridRowEnd:e.y+1+e.h}}function v(e){return`max${e[0].toUpperCase()}${e.slice(1)}`}function y(e,t){let n=t?-1:1;if(e===`ArrowLeft`)return{x:-n,y:0};if(e===`ArrowRight`)return{x:n,y:0};if(e===`ArrowUp`)return{x:0,y:-1};if(e===`ArrowDown`)return{x:0,y:1}}function b(e){return`column ${e.x+1}, row ${e.y+1}`}function x(e){return`${e.w} ${e.w===1?`column`:`columns`} by ${e.h} ${e.h===1?`row`:`rows`}`}function S(e,i){let{children:o,layout:u,defaultLayout:p,onLayoutChange:h,onLayoutCommit:S,columns:C={xs:1,md:6,xxl:12},rowHeight:w=24,editable:T=!1,label:E,labelledBy:D,props:O,...k}=e,A=(0,c.useRef)(null),j=(0,c.useCallback)(e=>{A.current=e,t.l(i,e)},[i]),[M,N]=(0,c.useState)(null),[P,F]=(0,c.useState)(null),[ee,I]=(0,c.useState)(``),L=`${(0,c.useId)()}-dashboard`,[R,te]=r.i({value:u,defaultValue:p??{version:d.VERSION,columns:12,items:[]},onChange:h}),z=(0,c.useMemo)(()=>d.normalize(R),[R]),B=r.o(z),V=a.r(S,`dashboard`,`layoutCommit`),ne=typeof C==`number`?String(C):f.map(e=>C[e]??``).join(),H=(0,c.useMemo)(()=>g(C),[ne]),U=H[H.length-1],W=(0,c.useMemo)(()=>{let e=d.ranks(z),t=new Map;for(let n of H){let r=n.count===U.count?z:d.project(z,n.count),i=U.count/n.count;for(let a of r.items){let r=t.get(a.id)??{order:e.get(a.id)??0,fixed:a.fixed===!0},o=_({...a,x:Math.round(a.x*i),w:Math.round((a.x+a.w)*i)-Math.round(a.x*i)});n===H[0]?r.placement=o:r.query={...r.query,[n.size]:o},t.set(a.id,r)}}return t},[z,H,U.count]),G=r.a((e,t)=>{d.same(e,B.current)||te(e,t)}),re=(e,t)=>{let n=e.getBoundingClientRect(),r=A.current,i=r&&typeof getComputedStyle==`function`?getComputedStyle(r):void 0,a=Number.parseFloat(i?.columnGap??``)||0,o=Number.parseFloat(i?.rowGap??``)||0;return{x:(n.width+a)/t.w,y:(n.height+o)/t.h}},ie=e=>e instanceof Element?e.closest(`[data-widget-id]`):null,K=(e,t,n,r)=>{let i=e.kind===`move`?d.moveTo(B.current,e.id,t,n):d.resizeTo(B.current,e.id,t,n);return G(i,{reason:e.kind,event:r}),i},q=r.a((e,n,r,i)=>{let a=d.itemOf(B.current,n),o=ie(e.currentTarget);!T||e.button!==0||e.defaultPrevented||!a||a.fixed||!o||(e.preventDefault(),e.currentTarget.setPointerCapture?.(e.pointerId),e.currentTarget.focus(),N({id:n,kind:i,name:r,origin:a,before:B.current,pointer:{id:e.pointerId,x:e.clientX,y:e.clientY,step:re(o,a),rtl:t.m(o)}}))}),J=r.a((e,t)=>{if(!M?.pointer||M.id!==t)return;let{x:n,y:r,step:i,rtl:a}=M.pointer,o={x:e.clientX-n,y:e.clientY-r},s=d.cellsMoved(a?-o.x:o.x,o.y,i),c=M.origin,l=M.kind===`move`?K(M,c.x+s.columns,c.y+s.rows,e):K(M,c.w+s.columns,c.h+s.rows,e),u=d.itemOf(l,t);if(M.kind!==`move`||!u)return;let f={x:(u.x-c.x)*i.x*(a?-1:1),y:(u.y-c.y)*i.y};F({translate:`${Math.round(o.x-f.x)}px ${Math.round(o.y-f.y)}px`})}),Y=r.a((e,t)=>{if(!M?.pointer||M.id!==t)return;let n=d.itemOf(B.current,t);e.currentTarget.releasePointerCapture?.(M.pointer.id),N(null),F(null),V(B.current,{reason:M.kind,event:e}),n&&I(M.kind===`move`?`${M.name} moved to ${b(n)}.`:`${M.name} resized to ${x(n)}.`)}),X=a.i(`dashboard`),Z=r.a((e,t)=>{X(`grabCancel`,e.id,{reason:t.type===`blur`?`blur`:`escape`,event:t}),G(e.before,{reason:e.kind,event:t}),N(null),I(`${e.name} put back at ${b(e.origin)}.`)}),Q=r.a((e,n,r,i)=>{if(!T||e.defaultPrevented)return;let a=M&&M.id===n&&M.kind===i&&!M.pointer?M:void 0,o=d.itemOf(B.current,n);if(!o)return;if(!a){if(e.key!==`Enter`&&e.key!==` `||o.fixed)return;e.preventDefault(),N({id:n,kind:i,name:r,origin:o,before:B.current}),X(`grab`,n,{reason:i,event:e}),I(i===`move`?`${r} picked up at ${b(o)}. Use the arrow keys to move it.`:`${r} held for resizing at ${x(o)}. Use the arrow keys to resize it.`);return}if(e.key===`Escape`){e.preventDefault(),Z(a,e);return}if(e.key===`Enter`||e.key===` `){e.preventDefault(),N(null),V(B.current,{reason:i,event:e}),I(i===`move`?`${r} dropped at ${b(o)}.`:`${r} resized to ${x(o)}.`);return}let s=y(e.key,t.m(e.currentTarget));if(!s)return;e.preventDefault();let c=i===`move`?K(a,o.x+s.x,o.y+s.y,e):K(a,o.w+s.x,o.h+s.y,e),l=d.itemOf(c,n);l&&I(i===`move`?`${r}, ${b(l)}.`:`${r}, ${x(l)}.`)}),ae=r.a((e,t,n)=>{M&&M.id===t&&M.kind===n&&!M.pointer&&Z(M,e)}),oe=(0,c.useMemo)(()=>({editable:T,placementOf:e=>W.get(e),heldOf:e=>M&&M.id===e?M:void 0,offsetOf:e=>M&&M.id===e&&P?P:void 0,outsideAuthoring:U.size?{[v(U.size)]:{display:`none`}}:void 0,instructionsId:L,handleProps:(e,t,n)=>({type:`button`,"aria-label":n===`move`?`Move ${t}`:`Resize ${t}`,"aria-pressed":!!(M&&M.id===e&&M.kind===n),"aria-describedby":L,onPointerDown:r=>q(r,e,t,n),onPointerMove:t=>J(t,e),onPointerUp:t=>Y(t,e),onPointerCancel:t=>Y(t,e),onKeyDown:r=>Q(r,e,t,n),onBlur:t=>ae(t,e,n)})}),[T,W,M,P,U.size,L,q,J,Y,Q,ae]),$=M?W.get(M.id):void 0;return(0,l.jsxs)(m.Provider,{value:oe,children:[(0,l.jsxs)(n.default,{ref:j,component:`dashboard`,...k,variant:[k.variant,{dragging:M!==null}],vars:{"dashboard-row":`${w/4}rem`},gridTemplateColumns:U.count,props:{role:`list`,"aria-label":E,"aria-labelledby":D,...O},children:[o,$&&(0,l.jsx)(n.default,{component:`dashboard.placeholder`,order:$.order,cq:$.query,...$.placement,props:{role:`presentation`,"aria-hidden":!0}})]}),(0,l.jsx)(s.default,{props:{role:`status`},children:ee}),(0,l.jsx)(s.default,{id:L,children:`Press Enter or Space to pick the widget up, the arrow keys to move or resize it, Enter to drop it and Escape to put it back.`})]})}function C({kind:e}){return e===`resize`?(0,l.jsx)(o.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,rtl:{flip:`xAxis`},props:{fill:`none`},children:(0,l.jsx)(o.Path,{d:`M20 10 10 20M20 16l-4 4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`})}):(0,l.jsxs)(o.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,children:[[8,12,16].map(e=>(0,l.jsx)(o.Circle,{cx:9,cy:e,r:1.4,fill:`currentColor`},e)),[8,12,16].map(e=>(0,l.jsx)(o.Circle,{cx:15,cy:e,r:1.4,fill:`currentColor`},e))]})}function w(){return(0,l.jsx)(o.Svg,{viewBox:`0 0 24 24`,width:`1rem`,height:`1rem`,props:{fill:`none`},children:(0,l.jsx)(o.Path,{d:`M20 12a8 8 0 1 1-2.6-5.9M20 4v4h-4`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`})})}function T(e){let{id:t,children:r,title:i,name:o,description:s,actions:u,level:d=3,loading:f=!1,error:h,empty:g,onRefresh:_,refreshLabel:v,props:y,...b}=e,x=(0,c.useContext)(m),S=t===void 0?void 0:x?.placementOf(t),T=t===void 0?void 0:x?.heldOf(t),E=o??(typeof i==`string`?i:void 0)??t??`Widget`,D=x?.editable===!0&&S!==void 0&&!S.fixed,O=a.r((e,t)=>_?.(),`widget`,`refresh`),k=e=>D&&t!==void 0?(0,l.jsx)(n.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0,grabbed:T?.kind===e,corner:e===`resize`},cq:x?.outsideAuthoring,props:x?.handleProps(t,E,e),children:(0,l.jsx)(C,{kind:e})}):null,A=()=>f?(0,l.jsx)(n.default,{component:`widget.skeleton`,props:{"aria-hidden":!0},children:[80,100,60].map(e=>(0,l.jsx)(n.default,{component:`widget.skeleton.bar`,width:`${e}%`},e))}):h?(0,l.jsxs)(n.default,{component:`widget.message`,variant:{error:!0},props:{role:`status`},children:[h,_&&(0,l.jsx)(n.default,{tag:`button`,component:`widget.retry`,props:{type:`button`,onClick:e=>O(t,{reason:`retry`,event:e})},children:`Try again`})]}):g?(0,l.jsx)(n.default,{component:`widget.message`,children:g===!0?`Nothing to show yet.`:g}):r,j=i!==void 0||s!==void 0||u!==void 0||_!==void 0||D;return(0,l.jsxs)(n.default,{component:`widget`,...b,variant:[b.variant,{dragging:T?.pointer!==void 0,grabbed:T!==void 0&&T.pointer===void 0}],order:S?.order,cq:S?.query,...S?.placement,style:{...t===void 0?void 0:x?.offsetOf(t),...b.style},props:{role:S?`listitem`:void 0,"aria-busy":f||void 0,"data-widget-id":t,...y},children:[j&&(0,l.jsxs)(n.default,{component:`widget.header`,children:[k(`move`),(0,l.jsxs)(n.default,{component:`widget.label`,children:[i!==void 0&&(0,l.jsx)(n.default,{component:`widget.title`,tag:p[d-1],children:i}),s!==void 0&&(0,l.jsx)(n.default,{component:`widget.description`,children:s})]}),_&&(0,l.jsx)(n.default,{component:`widget.handle`,tag:`button`,variant:{editable:!0},props:{type:`button`,"aria-label":v??`Refresh ${E}`,onClick:e=>O(t,{reason:`refresh`,event:e})},children:(0,l.jsx)(w,{})}),u!==void 0&&(0,l.jsx)(n.default,{component:`widget.actions`,children:u})]}),(0,l.jsx)(n.default,{component:`widget.body`,children:A()}),k(`resize`)]})}var E=e.f(S,`DashboardGrid`),D=T;D.displayName=`Widget`,exports.DashboardUtils=d,exports.Widget=D,exports.default=E;

package/components/dashboard.d.ts

@@ -72,50 +72,7 @@ interface WidgetType {
     <TKey extends keyof ComponentsAndVariants = 'widget'>(props: WidgetProps<TKey>): React.ReactNode;
     displayName?: string;
 }
-/**
- * A dashboard the people using it can rearrange, and a model can write.
- *
- * ```tsx
- * <DashboardGrid layout={layout} onLayoutChange={setLayout} editable>
- *   <Widget id="revenue" title="Revenue">…</Widget>
- *   <Widget id="orders" title="Orders" loading>…</Widget>
- * </DashboardGrid>
- * ```
- *
- * **The layout is the artifact**, and it is plain JSON: a version, a column count and one `{ id, x, y, w, h }`
- * per widget, in cells. That is what a model emits under `DashboardUtils.SCHEMA`, what a drag reports back
- * and what a host stores — persistence is the app's, because only the app knows whether a dashboard belongs
- * to a user, a team or a URL.
- *
- * **Nothing is measured to lay it out.** A widget's place is `grid-column`/`grid-row`, which is a class, so
- * a layout of any size costs no inline style and no `ResizeObserver`; the narrower arrangements are
- * *projections* of the same layout, computed at render and chosen between by container queries. The one
- * inline style in the component is the translate that keeps a dragged widget under the pointer — a value
- * per frame, which a class would make a rule per frame that is never freed.
- *
- * **The layout is compacted upward**, so a widget cannot be parked in mid-air and two dashboards holding
- * the same widgets in the same places compare equal. A drop below a neighbour rises to meet it.
- *
- * **An arrangement can only be edited in the space it is written in.** Where the grid is rendering a
- * projection the handles are not there at all — hidden by the same container query that chose the
- * projection — because an edit made in six columns is not a layout in twelve, and writing one back would
- * quietly replace the other.
- *
- * @a11y The grid is a `role="list"` named by `label`, and each placed widget a `role="listitem"` — so a
- * reader is told how many widgets there are and which one this is, which a set of `region` landmarks
- * would drown out.
- * @a11y Moving and resizing are a **grab**: Enter or Space on a handle picks the widget up, the arrows
- * move it, Enter drops it and Escape puts it back. Every step is announced in a polite live region that
- * is there before there is anything to say.
- * @a11y The handles are real buttons with `aria-pressed` for the grabbed state and an `aria-describedby`
- * naming the instructions, rather than an HTML5 drag, which no screen reader drives.
- * @keyboard Enter, Space — Picks a widget up from either handle, and drops it again.
- * @keyboard Arrows — One cell, along the reading axis: in a right-to-left page ArrowLeft moves a widget
- * to the *right*. On the resize handle they add and remove a column or a row.
- * @keyboard Escape — Puts the widget back where it was picked up from, and the layout with it.
- */
-declare function DashboardGridImpl<TKey extends keyof ComponentsAndVariants = 'dashboard'>(props: DashboardGridProps<TKey>): import("react").JSX.Element;
-declare const DashboardGrid: typeof DashboardGridImpl;
+declare const DashboardGrid: <TKey extends keyof ComponentsAndVariants = "dashboard">(props: DashboardGridProps<TKey>) => React.ReactNode;
 declare const Widget: WidgetType;
 export { Widget };
 export default DashboardGrid;