npm - react-window - Versions diffs - 2.0.2-alpha.1 → 2.1.0-alpha.0 - Mend

react-window 2.0.2-alpha.1 → 2.1.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/docs/assets/{ImperativeApiRoute-BxC-VyUh.js → ImperativeApiRoute-rlhH1_Qi.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as s,j as a,B as n,a as p,C as t}from"./index-C6NWGx8D.js";import{G as c}from"./Grid-BXEwl59J.js";import{B as e}from"./arePropsEqual-Czc4-HWX.js";import{F as o}from"./FormattedCode-B5NYyy8K.js";import{H as i}from"./Header-B_onM2vR.js";import{L as l}from"./LoadingSpinner-BMzTPwZo.js";import{S as d}from"./Select-INFvG4Rz.js";import{C as r}from"./CellComponent.example-CFiu8zNV.js";import{u,C as k,c as h}from"./useContacts-Bu0Z6ao9.js";import{C as m}from"./ContinueLink-DMnSPbdx.js";import"./contacts-Bxrk2JS2.js";const v=s.useRef,g={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">grid</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">gridRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">grid</span><span class="">?.</span><span class="tok-propertyName">scrollToCell</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">10</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">grid</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">gridRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">grid</span><span class="">?.</span><span class="tok-propertyName">scrollToCell</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">10</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>'},f={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridCallbackRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setGrid</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">grid</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setGrid</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridCallbackRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setGrid</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">grid</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setGrid</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'},y={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">gridRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">gridRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">gridRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">gridRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'},x={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span></div>'},N={label:"",value:""},b=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));b.unshift(N);const w=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));w.unshift(N);const j=k.map(s=>({label:s,value:s})).sort((s,a)=>s.label.localeCompare(a.label));function C(){const C=u(),R=s.useMemo(()=>{const s=[];return C&&(C.reduce((s,a)=>(s.includes(a.title)||s.push(a.title),s),new Array).sort().forEach(a=>{s.push({label:a,value:a})}),s.unshift(N)),s},[C]),[G,A]=s.useState(),[I,S]=s.useState(),[P,T]=s.useState(N),[E,H]=s.useState(N),L=v(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(i,{section:"Grids",title:"Imperative API"}),a.jsx("div",{children:"Grid provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(o,{markdown:x}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(o,{markdown:y}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(o,{markdown:g}),a.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:A,options:b,placeholder:"Align",value:G}),a.jsx(d,{className:"flex-1",onChange:S,options:w,placeholder:"Scroll behavior",value:I})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:H,options:R,placeholder:"Job title",value:E}),a.jsx(d,{className:"flex-1",onChange:T,options:j,placeholder:"Column",value:P}),a.jsx(p,{className:"shrink-0",disabled:!P.value&&!E.value,onClick:()=>{const s=L.current;if(s){const a=P?.value?k.indexOf(P.value):void 0,n=E?.value?C.findIndex(s=>s.title===E.value):void 0;void 0!==a&&void 0!==n?s.scrollToCell({behavior:I?.value,columnAlign:G?.value,columnIndex:a,rowAlign:G?.value,rowIndex:n}):void 0!==a?s.scrollToColumn({align:G?.value,behavior:I?.value,index:a}):void 0!==n&&s.scrollToRow({align:G?.value,behavior:I?.value,index:n})}},children:"Scroll"})]}),a.jsxs(e,{className:"h-50","data-focus-within":"bold",children:[!C.length&&a.jsx(l,{}),a.jsx(c,{cellComponent:r,cellProps:{contacts:C},columnCount:j.length,columnWidth:h,gridRef:L,rowCount:C.length,rowHeight:25})]}),a.jsxs("div",{children:["The Grid API also provides ",a.jsx("code",{children:"scrollToColumn"})," and"," ",a.jsx("code",{children:"scrollToRow"})," methods for single-axis scrolling."]}),a.jsxs(t,{intent:"primary",children:[a.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),a.jsx(o,{markdown:f}),a.jsx(m,{to:"/grid/aria-roles",title:"ARIA roles"})]})}export{C as default};
-//# sourceMappingURL=ImperativeApiRoute-BxC-VyUh.js.map
+import{r as s,j as a,B as n,a as p,C as t}from"./index-0ZXvQVSH.js";import{G as c}from"./Grid-CgYC2ncE.js";import{B as e}from"./arePropsEqual-U1Tm1J18.js";import{F as o}from"./FormattedCode-C9MIMH17.js";import{H as i}from"./Header-BdKWSvvb.js";import{L as l}from"./LoadingSpinner-tWpMuzoA.js";import{S as d}from"./Select-DqyIzw3c.js";import{C as r}from"./CellComponent.example-Fvf2fNMJ.js";import{u,C as k,c as h}from"./useContacts-BUeepGdf.js";import{C as m}from"./ContinueLink-Bt_isYvF.js";import"./contacts-Bxrk2JS2.js";const v=s.useRef,g={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">grid</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">gridRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">grid</span><span class="">?.</span><span class="tok-propertyName">scrollToCell</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">10</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">grid</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">gridRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">grid</span><span class="">?.</span><span class="tok-propertyName">scrollToCell</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">10</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>'},f={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridCallbackRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setGrid</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">grid</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setGrid</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridCallbackRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setGrid</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">grid</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setGrid</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'},y={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">gridRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">gridRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">gridRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">gridRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'},x={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span></div>'},N={label:"",value:""},b=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));b.unshift(N);const w=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));w.unshift(N);const j=k.map(s=>({label:s,value:s})).sort((s,a)=>s.label.localeCompare(a.label));function C(){const C=u(),R=s.useMemo(()=>{const s=[];return C&&(C.reduce((s,a)=>(s.includes(a.title)||s.push(a.title),s),new Array).sort().forEach(a=>{s.push({label:a,value:a})}),s.unshift(N)),s},[C]),[G,A]=s.useState(),[I,S]=s.useState(),[P,T]=s.useState(N),[E,H]=s.useState(N),L=v(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(i,{section:"Grids",title:"Imperative API"}),a.jsx("div",{children:"Grid provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(o,{markdown:x}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(o,{markdown:y}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(o,{markdown:g}),a.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:A,options:b,placeholder:"Align",value:G}),a.jsx(d,{className:"flex-1",onChange:S,options:w,placeholder:"Scroll behavior",value:I})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:H,options:R,placeholder:"Job title",value:E}),a.jsx(d,{className:"flex-1",onChange:T,options:j,placeholder:"Column",value:P}),a.jsx(p,{className:"shrink-0",disabled:!P.value&&!E.value,onClick:()=>{const s=L.current;if(s){const a=P?.value?k.indexOf(P.value):void 0,n=E?.value?C.findIndex(s=>s.title===E.value):void 0;void 0!==a&&void 0!==n?s.scrollToCell({behavior:I?.value,columnAlign:G?.value,columnIndex:a,rowAlign:G?.value,rowIndex:n}):void 0!==a?s.scrollToColumn({align:G?.value,behavior:I?.value,index:a}):void 0!==n&&s.scrollToRow({align:G?.value,behavior:I?.value,index:n})}},children:"Scroll"})]}),a.jsxs(e,{className:"h-50","data-focus-within":"bold",children:[!C.length&&a.jsx(l,{}),a.jsx(c,{cellComponent:r,cellProps:{contacts:C},columnCount:j.length,columnWidth:h,gridRef:L,rowCount:C.length,rowHeight:25})]}),a.jsxs("div",{children:["The Grid API also provides ",a.jsx("code",{children:"scrollToColumn"})," and"," ",a.jsx("code",{children:"scrollToRow"})," methods for single-axis scrolling."]}),a.jsxs(t,{intent:"primary",children:[a.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),a.jsx(o,{markdown:f}),a.jsx(m,{to:"/grid/aria-roles",title:"ARIA roles"})]})}export{C as default};
+//# sourceMappingURL=ImperativeApiRoute-rlhH1_Qi.js.map

package/docs/assets/{ImperativeApiRoute-BxC-VyUh.js.map → ImperativeApiRoute-rlhH1_Qi.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImperativeApiRoute-BxC-VyUh.js","sources":["../../lib/components/grid/useGridRef.ts","../../src/routes/grid/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { GridImperativeAPI } from \"./types\";\n\n/*\n Convenience hook to return a properly typed ref for the Grid component.\n */\nexport const useGridRef = useRef as typeof useRef<GridImperativeAPI>;\n","import { useMemo, useState } from \"react\";\nimport { Grid, useGridRef, type Align } from \"react-window\";\nimport gridRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/gridRefClickEventHandler.json\";\nimport useGridCallbackRefMarkdown from \"../../../public/generated/code-snippets/useGridCallbackRef.json\";\nimport useGridRefMarkdown from \"../../../public/generated/code-snippets/useGridRef.json\";\nimport useGridRefImportMarkdown from \"../../../public/generated/code-snippets/useGridRefImport.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { CellComponent } from \"./examples/CellComponent.example\";\nimport { columnWidth } from \"./examples/columnWidth.example\";\nimport type { Contact } from \"./examples/Grid.example\";\nimport { COLUMN_KEYS } from \"./examples/shared\";\nimport { useContacts } from \"./hooks/useContacts\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\n\nconst EMPTY_OPTION: Option<string> = {\n label: \"\",\n value: \"\"\n};\n\nconst ALIGNMENTS: Option<Align>[] = (\n [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n label: `align: ${value}`,\n value\n}));\nALIGNMENTS.unshift(EMPTY_OPTION as Option<Align>);\n\nconst BEHAVIORS: Option<ScrollBehavior>[] = (\n [\"auto\", \"instant\", \"smooth\"] satisfies ScrollBehavior[]\n).map((value) => ({\n label: `behavior: ${value}`,\n value\n}));\nBEHAVIORS.unshift(EMPTY_OPTION as Option<ScrollBehavior>);\n\nconst COLUMNS: Option<string>[] = COLUMN_KEYS.map((key) => ({\n label: key,\n value: key\n})).sort((a, b) => a.label.localeCompare(b.label));\n\nexport default function GridImperativeApiRoute() {\n const contacts = useContacts();\n\n const titleOptions = useMemo<Option<string>[]>(() => {\n const options: Option<string>[] = [];\n if (contacts) {\n contacts\n .reduce((array, contact) => {\n if (!array.includes(contact.title)) {\n array.push(contact.title);\n }\n return array;\n }, new Array<string>())\n .sort()\n .forEach((title) => {\n options.push({\n label: title,\n value: title\n });\n });\n\n options.unshift(EMPTY_OPTION);\n }\n\n return options;\n }, [contacts]);\n\n const [align, setAlign] = useState<Option<Align> \| undefined>();\n const [behavior, setBehavior] = useState<\n Option<ScrollBehavior> \| undefined\n >();\n const [column, setColumn] = useState<Option<string>>(EMPTY_OPTION);\n const [title, setTitle] = useState<Option<string>>(EMPTY_OPTION);\n\n const gridRef = useGridRef(null);\n\n const scrollToCell = () => {\n const grid = gridRef.current;\n if (grid) {\n const columnIndex = column?.value\n ? COLUMN_KEYS.indexOf(column.value as keyof Contact)\n : undefined;\n\n const rowIndex = title?.value\n ? contacts.findIndex((row) => row.title === title.value)\n : undefined;\n\n if (columnIndex !== undefined && rowIndex !== undefined) {\n grid.scrollToCell({\n behavior: behavior?.value,\n columnAlign: align?.value,\n columnIndex,\n rowAlign: align?.value,\n rowIndex\n });\n } else if (columnIndex !== undefined) {\n grid.scrollToColumn({\n align: align?.value,\n behavior: behavior?.value,\n index: columnIndex\n });\n } else if (rowIndex !== undefined) {\n grid.scrollToRow({\n align: align?.value,\n behavior: behavior?.value,\n index: rowIndex\n });\n }\n }\n };\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Grids\" title=\"Imperative API\" />\n <div>\n Grid provides an imperative API for responding to events. The\n recommended way to access this API is to use the exported ref hook:\n </div>\n <FormattedCode markdown={useGridRefImportMarkdown} />\n <div>Attach the ref during render:</div>\n <FormattedCode markdown={useGridRefMarkdown} />\n <div>And call API methods in an event handler:</div>\n <FormattedCode markdown={gridRefClickEventHandlerMarkdown} />\n <div>The form below uses the imperative API to scroll the list:</div>\n <Box direction=\"row\" gap={4}>\n <Select\n className=\"flex-1\"\n onChange={setAlign}\n options={ALIGNMENTS}\n placeholder=\"Align\"\n value={align}\n />\n <Select\n className=\"flex-1\"\n onChange={setBehavior}\n options={BEHAVIORS}\n placeholder=\"Scroll behavior\"\n value={behavior}\n />\n </Box>\n <Box direction=\"row\" gap={4}>\n <Select\n className=\"flex-1\"\n onChange={setTitle}\n options={titleOptions}\n placeholder=\"Job title\"\n value={title}\n />\n <Select\n className=\"flex-1\"\n onChange={setColumn}\n options={COLUMNS}\n placeholder=\"Column\"\n value={column}\n />\n <Button\n className=\"shrink-0\"\n disabled={!column.value && !title.value}\n onClick={scrollToCell}\n >\n Scroll\n </Button>\n </Box>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n {!contacts.length && <LoadingSpinner />}\n <Grid\n cellComponent={CellComponent}\n cellProps={{ contacts }}\n columnCount={COLUMNS.length}\n columnWidth={columnWidth}\n gridRef={gridRef}\n rowCount={contacts.length}\n rowHeight={25}\n />\n </Block>\n <div>\n The Grid API also provides <code>scrollToColumn</code> and{\" \"}\n <code>scrollToRow</code> methods for single-axis scrolling.\n </div>\n <Callout intent=\"primary\">\n <strong className=\"text-sky-300\">Note</strong> If you are passing the\n ref to another component or hook, use the ref callback function instead.\n </Callout>\n <FormattedCode markdown={useGridCallbackRefMarkdown} />\n <ContinueLink to=\"/grid/aria-roles\" title=\"ARIA roles\" />\n </Box>\n );\n}\n"],"names":["useGridRef","useRef","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","COLUMNS","COLUMN_KEYS","key","sort","a","b","localeCompare","GridImperativeApiRoute","contacts","useContacts","titleOptions","useMemo","options","reduce","array","contact","includes","title","push","Array","forEach","align","setAlign","useState","behavior","setBehavior","column","setColumn","setTitle","gridRef","jsxs","Box","direction","gap","children","jsx","Header","section","FormattedCode","markdown","useGridRefImportMarkdown","useGridRefMarkdown","gridRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","grid","current","columnIndex","indexOf","rowIndex","findIndex","row","scrollToCell","columnAlign","rowAlign","scrollToColumn","index","scrollToRow","Block","length","LoadingSpinner","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","rowHeight","Callout","intent","useGridCallbackRefMarkdown","ContinueLink","to"],"mappings":"2gBAMO,MAAMA,EAAaC,EAAAA,4rjBCepBC,EAA+B,CACnCC,MAAO,GACPC,MAAO,IAGHC,EACJ,CAAC,OAAQ,SAAU,MAAO,QAAS,SACnCC,IAAKF,IAAA,CACLD,MAAO,UAAUC,IACjBA,WAEFC,EAAWE,QAAQL,GAEnB,MAAMM,EACJ,CAAC,OAAQ,UAAW,UACpBF,IAAKF,IAAA,CACLD,MAAO,aAAaC,IACpBA,WAEFI,EAAUD,QAAQL,GAElB,MAAMO,EAA4BC,EAAYJ,IAAKK,IAAA,CACjDR,MAAOQ,EACPP,MAAOO,KACLC,KAAK,CAACC,EAAGC,IAAMD,EAAEV,MAAMY,cAAcD,EAAEX,QAE3C,SAAwBa,IACtB,MAAMC,EAAWC,IAEXC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4B,GAoBlC,OAnBIJ,IACFA,EACGK,OAAO,CAACC,EAAOC,KACTD,EAAME,SAASD,EAAQE,QAC1BH,EAAMI,KAAKH,EAAQE,OAEdH,GACN,IAAIK,OACNhB,OACAiB,QAASH,IACRL,EAAQM,KAAK,CACXxB,MAAOuB,EACPtB,MAAOsB,MAIbL,EAAQd,QAAQL,IAGXmB,GACN,CAACJ,KAEGa,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAQC,GAAaJ,EAAAA,SAAyB9B,IAC9CwB,EAAOW,GAAYL,EAAAA,SAAyB9B,GAE7CoC,EAAUtC,EAAW,MAqC3B,OACEuC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQpB,MAAM,qBAC9BkB,IAAC,OAAID,SAAA,wIAILC,IAACG,EAAA,CAAcC,SAAUC,MACzBL,IAAC,OAAID,SAAA,oCACLC,IAACG,EAAA,CAAcC,SAAUE,MACzBN,IAAC,OAAID,SAAA,gDACLC,IAACG,EAAA,CAAcC,SAAUG,MACzBP,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUvB,EACVV,QAAShB,EACTkD,YAAY,QACZnD,MAAO0B,IAETc,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUpB,EACVb,QAASb,EACT+C,YAAY,kBACZnD,MAAO6B,OAGXM,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUjB,EACVhB,QAASF,EACToC,YAAY,YACZnD,MAAOsB,IAETkB,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUlB,EACVf,QAASZ,EACT8C,YAAY,SACZnD,MAAO+B,IAETS,EAAAA,IAACY,EAAA,CACCH,UAAU,WACVI,UAAWtB,EAAO/B,QAAUsB,EAAMtB,MAClCsD,QAlFa,KACnB,MAAMC,EAAOrB,EAAQsB,QACrB,GAAID,EAAM,CACR,MAAME,EAAc1B,GAAQ/B,MACxBM,EAAYoD,QAAQ3B,EAAO/B,YAC3B,EAEE2D,EAAWrC,GAAOtB,MACpBa,EAAS+C,UAAWC,GAAQA,EAAIvC,QAAUA,EAAMtB,YAChD,OAEgB,IAAhByD,QAA0C,IAAbE,EAC/BJ,EAAKO,aAAa,CAChBjC,SAAUA,GAAU7B,MACpB+D,YAAarC,GAAO1B,MACpByD,cACAO,SAAUtC,GAAO1B,MACjB2D,kBAEuB,IAAhBF,EACTF,EAAKU,eAAe,CAClBvC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOT,SAEa,IAAbE,GACTJ,EAAKY,YAAY,CACfzC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOP,GAGb,GAmDKpB,SAAA,cAIHJ,EAAAA,KAACiC,EAAA,CAAMnB,UAAU,OAAO,oBAAkB,OACvCV,SAAA,EAAC1B,EAASwD,cAAWC,EAAA,CAAA,GACtB9B,EAAAA,IAAC+B,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAE7D,YACb8D,YAAatE,EAAQgE,OACrBO,cACA1C,UACA2C,SAAUhE,EAASwD,OACnBS,UAAW,eAGd,MAAA,CAAIvC,SAAA,CAAA,gCACwBC,IAAC,QAAKD,SAAA,mBAAqB,OAAK,MAC3DC,IAAC,QAAKD,SAAA,gBAAkB,2CAE1BJ,KAAC4C,EAAA,CAAQC,OAAO,UACdzC,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOS,UAAU,eAAeV,SAAA,SAAa,wGAGhDC,IAACG,EAAA,CAAcC,SAAUqC,IACzBzC,EAAAA,IAAC0C,EAAA,CAAaC,GAAG,mBAAmB7D,MAAM,iBAGhD"}
1	+ {"version":3,"file":"ImperativeApiRoute-rlhH1_Qi.js","sources":["../../lib/components/grid/useGridRef.ts","../../src/routes/grid/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { GridImperativeAPI } from \"./types\";\n\n/*\n Convenience hook to return a properly typed ref for the Grid component.\n */\nexport const useGridRef = useRef as typeof useRef<GridImperativeAPI>;\n","import { useMemo, useState } from \"react\";\nimport { Grid, useGridRef, type Align } from \"react-window\";\nimport gridRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/gridRefClickEventHandler.json\";\nimport useGridCallbackRefMarkdown from \"../../../public/generated/code-snippets/useGridCallbackRef.json\";\nimport useGridRefMarkdown from \"../../../public/generated/code-snippets/useGridRef.json\";\nimport useGridRefImportMarkdown from \"../../../public/generated/code-snippets/useGridRefImport.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { CellComponent } from \"./examples/CellComponent.example\";\nimport { columnWidth } from \"./examples/columnWidth.example\";\nimport type { Contact } from \"./examples/Grid.example\";\nimport { COLUMN_KEYS } from \"./examples/shared\";\nimport { useContacts } from \"./hooks/useContacts\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\n\nconst EMPTY_OPTION: Option<string> = {\n label: \"\",\n value: \"\"\n};\n\nconst ALIGNMENTS: Option<Align>[] = (\n [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n label: `align: ${value}`,\n value\n}));\nALIGNMENTS.unshift(EMPTY_OPTION as Option<Align>);\n\nconst BEHAVIORS: Option<ScrollBehavior>[] = (\n [\"auto\", \"instant\", \"smooth\"] satisfies ScrollBehavior[]\n).map((value) => ({\n label: `behavior: ${value}`,\n value\n}));\nBEHAVIORS.unshift(EMPTY_OPTION as Option<ScrollBehavior>);\n\nconst COLUMNS: Option<string>[] = COLUMN_KEYS.map((key) => ({\n label: key,\n value: key\n})).sort((a, b) => a.label.localeCompare(b.label));\n\nexport default function GridImperativeApiRoute() {\n const contacts = useContacts();\n\n const titleOptions = useMemo<Option<string>[]>(() => {\n const options: Option<string>[] = [];\n if (contacts) {\n contacts\n .reduce((array, contact) => {\n if (!array.includes(contact.title)) {\n array.push(contact.title);\n }\n return array;\n }, new Array<string>())\n .sort()\n .forEach((title) => {\n options.push({\n label: title,\n value: title\n });\n });\n\n options.unshift(EMPTY_OPTION);\n }\n\n return options;\n }, [contacts]);\n\n const [align, setAlign] = useState<Option<Align> \| undefined>();\n const [behavior, setBehavior] = useState<\n Option<ScrollBehavior> \| undefined\n >();\n const [column, setColumn] = useState<Option<string>>(EMPTY_OPTION);\n const [title, setTitle] = useState<Option<string>>(EMPTY_OPTION);\n\n const gridRef = useGridRef(null);\n\n const scrollToCell = () => {\n const grid = gridRef.current;\n if (grid) {\n const columnIndex = column?.value\n ? COLUMN_KEYS.indexOf(column.value as keyof Contact)\n : undefined;\n\n const rowIndex = title?.value\n ? contacts.findIndex((row) => row.title === title.value)\n : undefined;\n\n if (columnIndex !== undefined && rowIndex !== undefined) {\n grid.scrollToCell({\n behavior: behavior?.value,\n columnAlign: align?.value,\n columnIndex,\n rowAlign: align?.value,\n rowIndex\n });\n } else if (columnIndex !== undefined) {\n grid.scrollToColumn({\n align: align?.value,\n behavior: behavior?.value,\n index: columnIndex\n });\n } else if (rowIndex !== undefined) {\n grid.scrollToRow({\n align: align?.value,\n behavior: behavior?.value,\n index: rowIndex\n });\n }\n }\n };\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Grids\" title=\"Imperative API\" />\n <div>\n Grid provides an imperative API for responding to events. The\n recommended way to access this API is to use the exported ref hook:\n </div>\n <FormattedCode markdown={useGridRefImportMarkdown} />\n <div>Attach the ref during render:</div>\n <FormattedCode markdown={useGridRefMarkdown} />\n <div>And call API methods in an event handler:</div>\n <FormattedCode markdown={gridRefClickEventHandlerMarkdown} />\n <div>The form below uses the imperative API to scroll the list:</div>\n <Box direction=\"row\" gap={4}>\n <Select\n className=\"flex-1\"\n onChange={setAlign}\n options={ALIGNMENTS}\n placeholder=\"Align\"\n value={align}\n />\n <Select\n className=\"flex-1\"\n onChange={setBehavior}\n options={BEHAVIORS}\n placeholder=\"Scroll behavior\"\n value={behavior}\n />\n </Box>\n <Box direction=\"row\" gap={4}>\n <Select\n className=\"flex-1\"\n onChange={setTitle}\n options={titleOptions}\n placeholder=\"Job title\"\n value={title}\n />\n <Select\n className=\"flex-1\"\n onChange={setColumn}\n options={COLUMNS}\n placeholder=\"Column\"\n value={column}\n />\n <Button\n className=\"shrink-0\"\n disabled={!column.value && !title.value}\n onClick={scrollToCell}\n >\n Scroll\n </Button>\n </Box>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n {!contacts.length && <LoadingSpinner />}\n <Grid\n cellComponent={CellComponent}\n cellProps={{ contacts }}\n columnCount={COLUMNS.length}\n columnWidth={columnWidth}\n gridRef={gridRef}\n rowCount={contacts.length}\n rowHeight={25}\n />\n </Block>\n <div>\n The Grid API also provides <code>scrollToColumn</code> and{\" \"}\n <code>scrollToRow</code> methods for single-axis scrolling.\n </div>\n <Callout intent=\"primary\">\n <strong className=\"text-sky-300\">Note</strong> If you are passing the\n ref to another component or hook, use the ref callback function instead.\n </Callout>\n <FormattedCode markdown={useGridCallbackRefMarkdown} />\n <ContinueLink to=\"/grid/aria-roles\" title=\"ARIA roles\" />\n </Box>\n );\n}\n"],"names":["useGridRef","useRef","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","COLUMNS","COLUMN_KEYS","key","sort","a","b","localeCompare","GridImperativeApiRoute","contacts","useContacts","titleOptions","useMemo","options","reduce","array","contact","includes","title","push","Array","forEach","align","setAlign","useState","behavior","setBehavior","column","setColumn","setTitle","gridRef","jsxs","Box","direction","gap","children","jsx","Header","section","FormattedCode","markdown","useGridRefImportMarkdown","useGridRefMarkdown","gridRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","grid","current","columnIndex","indexOf","rowIndex","findIndex","row","scrollToCell","columnAlign","rowAlign","scrollToColumn","index","scrollToRow","Block","length","LoadingSpinner","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","rowHeight","Callout","intent","useGridCallbackRefMarkdown","ContinueLink","to"],"mappings":"2gBAMO,MAAMA,EAAaC,EAAAA,4rjBCepBC,EAA+B,CACnCC,MAAO,GACPC,MAAO,IAGHC,EACJ,CAAC,OAAQ,SAAU,MAAO,QAAS,SACnCC,IAAKF,IAAA,CACLD,MAAO,UAAUC,IACjBA,WAEFC,EAAWE,QAAQL,GAEnB,MAAMM,EACJ,CAAC,OAAQ,UAAW,UACpBF,IAAKF,IAAA,CACLD,MAAO,aAAaC,IACpBA,WAEFI,EAAUD,QAAQL,GAElB,MAAMO,EAA4BC,EAAYJ,IAAKK,IAAA,CACjDR,MAAOQ,EACPP,MAAOO,KACLC,KAAK,CAACC,EAAGC,IAAMD,EAAEV,MAAMY,cAAcD,EAAEX,QAE3C,SAAwBa,IACtB,MAAMC,EAAWC,IAEXC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4B,GAoBlC,OAnBIJ,IACFA,EACGK,OAAO,CAACC,EAAOC,KACTD,EAAME,SAASD,EAAQE,QAC1BH,EAAMI,KAAKH,EAAQE,OAEdH,GACN,IAAIK,OACNhB,OACAiB,QAASH,IACRL,EAAQM,KAAK,CACXxB,MAAOuB,EACPtB,MAAOsB,MAIbL,EAAQd,QAAQL,IAGXmB,GACN,CAACJ,KAEGa,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAQC,GAAaJ,EAAAA,SAAyB9B,IAC9CwB,EAAOW,GAAYL,EAAAA,SAAyB9B,GAE7CoC,EAAUtC,EAAW,MAqC3B,OACEuC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQpB,MAAM,qBAC9BkB,IAAC,OAAID,SAAA,wIAILC,IAACG,EAAA,CAAcC,SAAUC,MACzBL,IAAC,OAAID,SAAA,oCACLC,IAACG,EAAA,CAAcC,SAAUE,MACzBN,IAAC,OAAID,SAAA,gDACLC,IAACG,EAAA,CAAcC,SAAUG,MACzBP,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUvB,EACVV,QAAShB,EACTkD,YAAY,QACZnD,MAAO0B,IAETc,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUpB,EACVb,QAASb,EACT+C,YAAY,kBACZnD,MAAO6B,OAGXM,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUjB,EACVhB,QAASF,EACToC,YAAY,YACZnD,MAAOsB,IAETkB,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUlB,EACVf,QAASZ,EACT8C,YAAY,SACZnD,MAAO+B,IAETS,EAAAA,IAACY,EAAA,CACCH,UAAU,WACVI,UAAWtB,EAAO/B,QAAUsB,EAAMtB,MAClCsD,QAlFa,KACnB,MAAMC,EAAOrB,EAAQsB,QACrB,GAAID,EAAM,CACR,MAAME,EAAc1B,GAAQ/B,MACxBM,EAAYoD,QAAQ3B,EAAO/B,YAC3B,EAEE2D,EAAWrC,GAAOtB,MACpBa,EAAS+C,UAAWC,GAAQA,EAAIvC,QAAUA,EAAMtB,YAChD,OAEgB,IAAhByD,QAA0C,IAAbE,EAC/BJ,EAAKO,aAAa,CAChBjC,SAAUA,GAAU7B,MACpB+D,YAAarC,GAAO1B,MACpByD,cACAO,SAAUtC,GAAO1B,MACjB2D,kBAEuB,IAAhBF,EACTF,EAAKU,eAAe,CAClBvC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOT,SAEa,IAAbE,GACTJ,EAAKY,YAAY,CACfzC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOP,GAGb,GAmDKpB,SAAA,cAIHJ,EAAAA,KAACiC,EAAA,CAAMnB,UAAU,OAAO,oBAAkB,OACvCV,SAAA,EAAC1B,EAASwD,cAAWC,EAAA,CAAA,GACtB9B,EAAAA,IAAC+B,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAE7D,YACb8D,YAAatE,EAAQgE,OACrBO,cACA1C,UACA2C,SAAUhE,EAASwD,OACnBS,UAAW,eAGd,MAAA,CAAIvC,SAAA,CAAA,gCACwBC,IAAC,QAAKD,SAAA,mBAAqB,OAAK,MAC3DC,IAAC,QAAKD,SAAA,gBAAkB,2CAE1BJ,KAAC4C,EAAA,CAAQC,OAAO,UACdzC,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOS,UAAU,eAAeV,SAAA,SAAa,wGAGhDC,IAACG,EAAA,CAAcC,SAAUqC,IACzBzC,EAAAA,IAAC0C,EAAA,CAAaC,GAAG,mBAAmB7D,MAAM,iBAGhD"}

package/docs/assets/List-CxgHSppl.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,j as t}from"./index-0ZXvQVSH.js";import{u as o,a as s,b as n}from"./arePropsEqual-U1Tm1J18.js";function r({children:r,className:i,defaultHeight:a=0,listRef:l,onResize:d,onRowsRendered:c,overscanCount:u=3,rowComponent:m,rowCount:f,rowHeight:p,rowProps:x,tagName:h="div",style:v,...g}){const I=o(x),w=e.useMemo(()=>e.memo(m,s),[m]),[z,b]=e.useState(null),{getCellBounds:C,getEstimatedSize:y,scrollToIndex:E,startIndexOverscan:R,startIndexVisible:S,stopIndexOverscan:T,stopIndexVisible:j}=n({containerElement:z,defaultContainerSize:a,direction:"vertical",itemCount:f,itemProps:I,itemSize:p,onResize:d,overscanCount:u});e.useImperativeHandle(l,()=>({get element(){return z},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const s=E({align:e,containerScrollOffset:z?.scrollTop??0,index:o});"function"==typeof z?.scrollTo&&z.scrollTo({behavior:t,top:s})}}),[z,E]),e.useEffect(()=>{R>=0&&T>=0&&c&&c({startIndex:S,stopIndex:j},{startIndex:R,stopIndex:T})},[c,R,S,T,j]);const H=e.useMemo(()=>{const t=[];if(f>0)for(let o=R;o<=T;o++){const s=C(o);t.push(e.createElement(w,{...I,ariaAttributes:{"aria-posinset":o+1,"aria-setsize":f,role:"listitem"},key:o,index:o,style:{position:"absolute",left:0,transform:`translateY(${s.scrollOffset}px)`,height:s.size,width:"100%"}}))}return t},[w,C,f,I,R,T]),O=t.jsx("div",{"aria-hidden":!0,style:{height:y(),width:"100%",zIndex:-1}});return e.createElement(h,{role:"list",...g,className:i,ref:b,style:{position:"relative",maxHeight:"100%",flexGrow:1,overflowY:"auto",...v}},H,r,O)}export{r as L};
2	+ //# sourceMappingURL=List-CxgHSppl.js.map

package/docs/assets/List-CxgHSppl.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"List-CxgHSppl.js","sources":["../../lib/components/list/List.tsx"],"sourcesContent":["import {\n createElement,\n memo,\n useEffect,\n useImperativeHandle,\n useMemo,\n useState,\n type ReactNode\n} from \"react\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { ListProps } from \"./types\";\n\nexport function List<\n RowProps extends object,\n TagName extends TagNames = \"div\"\n>({\n children,\n className,\n defaultHeight = 0,\n listRef,\n onResize,\n onRowsRendered,\n overscanCount = 3,\n rowComponent: RowComponentProp,\n rowCount,\n rowHeight,\n rowProps: rowPropsUnstable,\n tagName = \"div\" as TagName,\n style,\n ...rest\n}: ListProps<RowProps, TagName>) {\n const rowProps = useMemoizedObject(rowPropsUnstable);\n const RowComponent = useMemo(\n () => memo(RowComponentProp, arePropsEqual),\n [RowComponentProp]\n );\n\n const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n const {\n getCellBounds,\n getEstimatedSize,\n scrollToIndex,\n startIndexOverscan,\n startIndexVisible,\n stopIndexOverscan,\n stopIndexVisible\n } = useVirtualizer({\n containerElement: element,\n defaultContainerSize: defaultHeight,\n direction: \"vertical\",\n itemCount: rowCount,\n itemProps: rowProps,\n itemSize: rowHeight,\n onResize,\n overscanCount\n });\n\n useImperativeHandle(\n listRef,\n () => ({\n get element() {\n return element;\n },\n\n scrollToRow({\n align = \"auto\",\n behavior = \"auto\",\n index\n }: {\n align?: Align;\n behavior?: ScrollBehavior;\n index: number;\n }) {\n const top = scrollToIndex({\n align,\n containerScrollOffset: element?.scrollTop ?? 0,\n index\n });\n\n if (typeof element?.scrollTo === \"function\") {\n element.scrollTo({\n behavior,\n top\n });\n }\n }\n }),\n [element, scrollToIndex]\n );\n\n useEffect(() => {\n if (startIndexOverscan >= 0 && stopIndexOverscan >= 0 && onRowsRendered) {\n onRowsRendered(\n {\n startIndex: startIndexVisible,\n stopIndex: stopIndexVisible\n },\n {\n startIndex: startIndexOverscan,\n stopIndex: stopIndexOverscan\n }\n );\n }\n }, [\n onRowsRendered,\n startIndexOverscan,\n startIndexVisible,\n stopIndexOverscan,\n stopIndexVisible\n ]);\n\n const rows = useMemo(() => {\n const children: ReactNode[] = [];\n if (rowCount > 0) {\n for (\n let index = startIndexOverscan;\n index <= stopIndexOverscan;\n index++\n ) {\n const bounds = getCellBounds(index);\n\n children.push(\n <RowComponent\n {...(rowProps as RowProps)}\n ariaAttributes={{\n \"aria-posinset\": index + 1,\n \"aria-setsize\": rowCount,\n role: \"listitem\"\n }}\n key={index}\n index={index}\n style={{\n position: \"absolute\",\n left: 0,\n transform: `translateY(${bounds.scrollOffset}px)`,\n height: bounds.size,\n width: \"100%\"\n }}\n />\n );\n }\n }\n return children;\n }, [\n RowComponent,\n getCellBounds,\n rowCount,\n rowProps,\n startIndexOverscan,\n stopIndexOverscan\n ]);\n\n const sizingElement = (\n <div\n aria-hidden\n style={{\n height: getEstimatedSize(),\n width: \"100%\",\n zIndex: -1\n }}\n ></div>\n );\n\n return createElement(\n tagName,\n {\n role: \"list\",\n ...rest,\n className,\n ref: setElement,\n style: {\n position: \"relative\",\n maxHeight: \"100%\",\n flexGrow: 1,\n overflowY: \"auto\",\n ...style\n }\n },\n rows,\n children,\n sizingElement\n );\n}\n"],"names":["List","children","className","defaultHeight","listRef","onResize","onRowsRendered","overscanCount","rowComponent","RowComponentProp","rowCount","rowHeight","rowProps","rowPropsUnstable","tagName","style","rest","useMemoizedObject","RowComponent","useMemo","memo","arePropsEqual","element","setElement","useState","getCellBounds","getEstimatedSize","scrollToIndex","startIndexOverscan","startIndexVisible","stopIndexOverscan","stopIndexVisible","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","useImperativeHandle","scrollToRow","align","behavior","index","top","containerScrollOffset","scrollTop","scrollTo","useEffect","startIndex","stopIndex","rows","bounds","push","createElement","ariaAttributes","role","key","position","left","transform","scrollOffset","height","size","width","sizingElement","jsx","zIndex","ref","maxHeight","flexGrow","overflowY"],"mappings":"6GAeO,SAASA,GAGdC,SACAA,EAAAC,UACAA,EAAAC,cACAA,EAAgB,EAAAC,QAChBA,EAAAC,SACAA,EAAAC,eACAA,EAAAC,cACAA,EAAgB,EAChBC,aAAcC,EAAAC,SACdA,EAAAC,UACAA,EACAC,SAAUC,EAAAC,QACVA,EAAU,MAAAC,MACVA,KACGC,IAEH,MAAMJ,EAAWK,EAAkBJ,GAC7BK,EAAeC,EAAAA,QACnB,IAAMC,EAAAA,KAAKX,EAAkBY,GAC7B,CAACZ,KAGIa,EAASC,GAAcC,EAAAA,SAAgC,OAExDC,cACJA,EAAAC,iBACAA,EAAAC,cACAA,EAAAC,mBACAA,EAAAC,kBACAA,EAAAC,kBACAA,EAAAC,iBACAA,GACEC,EAAe,CACjBC,iBAAkBX,EAClBY,qBAAsB/B,EACtBgC,UAAW,WACXC,UAAW1B,EACX2B,UAAWzB,EACX0B,SAAU3B,EACVN,WACAE,kBAGFgC,EAAAA,oBACEnC,EACA,KAAA,CACE,WAAIkB,GACF,OAAOA,CACT,EAEA,WAAAkB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMjB,EAAc,CACxBc,QACAI,sBAAuBvB,GAASwB,WAAa,EAC7CH,UAG+B,mBAAtBrB,GAASyB,UAClBzB,EAAQyB,SAAS,CACfL,WACAE,OAGN,IAEF,CAACtB,EAASK,IAGZqB,EAAAA,UAAU,KACJpB,GAAsB,GAAKE,GAAqB,GAAKxB,GACvDA,EACE,CACE2C,WAAYpB,EACZqB,UAAWnB,GAEb,CACEkB,WAAYrB,EACZsB,UAAWpB,KAIhB,CACDxB,EACAsB,EACAC,EACAC,EACAC,IAGF,MAAMoB,EAAOhC,EAAAA,QAAQ,KACnB,MAAMlB,EAAwB,GAC9B,GAAIS,EAAW,EACb,IAAA,IACMiC,EAAQf,EACZe,GAASb,EACTa,IACA,CACA,MAAMS,EAAS3B,EAAckB,GAE7B1C,EAASoD,KACPC,EAAAA,cAACpC,EAAA,IACMN,EACL2C,eAAgB,CACd,gBAAiBZ,EAAQ,EACzB,eAAgBjC,EAChB8C,KAAM,YAERC,IAAKd,EACLA,QACA5B,MAAO,CACL2C,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcR,EAAOS,kBAChCC,OAAQV,EAAOW,KACfC,MAAO,UAIf,CAEF,OAAO/D,GACN,CACDiB,EACAO,EACAf,EACAE,EACAgB,EACAE,IAGImC,EACJC,EAAAA,IAAC,MAAA,CACC,eAAW,EACXnD,MAAO,CACL+C,OAAQpC,IACRsC,MAAO,OACPG,QAAQ,KAKd,OAAOb,EAAAA,cACLxC,EACA,CACE0C,KAAM,UACHxC,EACHd,YACAkE,IAAK7C,EACLR,MAAO,CACL2C,SAAU,WACVW,UAAW,OACXC,SAAU,EACVC,UAAW,UACRxD,IAGPoC,EACAlD,EACAgE,EAEJ"}

package/docs/assets/{LoadingSpinner-BMzTPwZo.js → LoadingSpinner-tWpMuzoA.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,j as a,B as t}from"./index-C6NWGx8D.js";function l({title:a,titleId:t,...l},n){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":t},l),a?e.createElement("title",{id:t},a):null,e.createElement("path",{fillRule:"evenodd",d:"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z",clipRule:"evenodd"}))}const n=e.forwardRef(l);function i(){return a.jsxs(t,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[a.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{i as L};
-//# sourceMappingURL=LoadingSpinner-BMzTPwZo.js.map
+import{r as e,j as a,B as t}from"./index-0ZXvQVSH.js";function l({title:a,titleId:t,...l},n){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":t},l),a?e.createElement("title",{id:t},a):null,e.createElement("path",{fillRule:"evenodd",d:"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z",clipRule:"evenodd"}))}const n=e.forwardRef(l);function i(){return a.jsxs(t,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[a.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{i as L};
+//# sourceMappingURL=LoadingSpinner-tWpMuzoA.js.map

package/docs/assets/{LoadingSpinner-BMzTPwZo.js.map → LoadingSpinner-tWpMuzoA.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LoadingSpinner-~~BMzTPwZo~~.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../src/components/LoadingSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowPathIcon({\n title,\n titleId,\n ...props\n}, svgRef) {\n return /#__PURE__/React.createElement(\"svg\", Object.assign({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 20 20\",\n fill: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /#__PURE__/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /#__PURE__/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z\",\n clipRule: \"evenodd\"\n }));\n}\nconst ForwardRef = /#__PURE__/ React.forwardRef(ArrowPathIcon);\nexport default ForwardRef;","import { ArrowPathIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\n\nexport function LoadingSpinner() {\n return (\n <Box align=\"center\" className=\"text-slate-300\" direction=\"row\" gap={2}>\n <ArrowPathIcon className=\"size-4 animate-spin\" />\n Loading...\n </Box>\n );\n}\n"],"names":["ArrowPathIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","LoadingSpinner","jsxs","Box","align","className","direction","gap","children","jsx"],"mappings":"sDACA,SAASA,GAAcC,MACrBA,EAAAC,QACAA,KACGC,GACFC,GACD,OAAoBC,gBAAoB,MAAOC,OAAOC,OAAO,CAC3DC,MAAO,6BACPC,QAAS,YACTC,KAAM,eACN,cAAe,OACf,YAAa,OACbC,IAAKP,EACL,kBAAmBF,GAClBC,GAAQF,EAAqBI,EAAAA,cAAoB,QAAS,CAC3DO,GAAIV,GACHD,GAAS,KAAmBI,EAAAA,cAAoB,OAAQ,CACzDQ,SAAU,UACVC,EAAG,0YACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,GCnB3C,SAASkB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC1B,EAAA,CAAcsB,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"LoadingSpinner-tWpMuzoA.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../src/components/LoadingSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowPathIcon({\n title,\n titleId,\n ...props\n}, svgRef) {\n return /#__PURE__/React.createElement(\"svg\", Object.assign({\n xmlns: \"http://www.w3.org/2000/svg\",\n viewBox: \"0 0 20 20\",\n fill: \"currentColor\",\n \"aria-hidden\": \"true\",\n \"data-slot\": \"icon\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /#__PURE__/React.createElement(\"title\", {\n id: titleId\n }, title) : null, /#__PURE__/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z\",\n clipRule: \"evenodd\"\n }));\n}\nconst ForwardRef = /#__PURE__/ React.forwardRef(ArrowPathIcon);\nexport default ForwardRef;","import { ArrowPathIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\n\nexport function LoadingSpinner() {\n return (\n <Box align=\"center\" className=\"text-slate-300\" direction=\"row\" gap={2}>\n <ArrowPathIcon className=\"size-4 animate-spin\" />\n Loading...\n </Box>\n );\n}\n"],"names":["ArrowPathIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","LoadingSpinner","jsxs","Box","align","className","direction","gap","children","jsx"],"mappings":"sDACA,SAASA,GAAcC,MACrBA,EAAAC,QACAA,KACGC,GACFC,GACD,OAAoBC,gBAAoB,MAAOC,OAAOC,OAAO,CAC3DC,MAAO,6BACPC,QAAS,YACTC,KAAM,eACN,cAAe,OACf,YAAa,OACbC,IAAKP,EACL,kBAAmBF,GAClBC,GAAQF,EAAqBI,EAAAA,cAAoB,QAAS,CAC3DO,GAAIV,GACHD,GAAS,KAAmBI,EAAAA,cAAoB,OAAQ,CACzDQ,SAAU,UACVC,EAAG,0YACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,GCnB3C,SAASkB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC1B,EAAA,CAAcsB,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}

package/docs/assets/{PageNotFound-kFYcmtEM.js → PageNotFound-mw-pBfPL.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as e,B as s,C as n,E as t}from"./index-C6NWGx8D.js";import{H as i}from"./Header-B_onM2vR.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(i,{title:"Page not found"}),e.jsxs(n,{intent:"danger",children:["The URL you requested can't be found. If you think this is an error,"," ",e.jsx(t,{href:"https://github.com/bvaughn/react-window/issues/new",children:"please file a GitHub issue"}),"."]})]})}export{r as default};
-//# sourceMappingURL=PageNotFound-kFYcmtEM.js.map
+import{j as e,B as s,C as n,E as t}from"./index-0ZXvQVSH.js";import{H as i}from"./Header-BdKWSvvb.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(i,{title:"Page not found"}),e.jsxs(n,{intent:"danger",children:["The URL you requested can't be found. If you think this is an error,"," ",e.jsx(t,{href:"https://github.com/bvaughn/react-window/issues/new",children:"please file a GitHub issue"}),"."]})]})}export{r as default};
+//# sourceMappingURL=PageNotFound-mw-pBfPL.js.map

package/docs/assets/{PageNotFound-kFYcmtEM.js.map → PageNotFound-mw-pBfPL.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PageNotFound-~~kFYcmtEM~~.js","sources":["../../src/routes/PageNotFound.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PageNotFound() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Page not found\" />\n <Callout intent=\"danger\">\n The URL you requested can't be found. If you think this is an error,{\" \"}\n <ExternalLink href=\"https://github.com/bvaughn/react-window/issues/new\">\n please file a GitHub issue\n </ExternalLink>\n .\n </Callout>\n </Box>\n );\n}\n"],"names":["PageNotFound","jsxs","Box","direction","gap","children","jsx","Header","title","Callout","intent","ExternalLink","href"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,qBACdP,KAACQ,EAAA,CAAQC,OAAO,SAASL,SAAA,CAAA,uEAC8C,IACrEC,EAAAA,IAACK,EAAA,CAAaC,KAAK,qDAAqDP,SAAA,+BAEzD,SAKvB"}
1	+ {"version":3,"file":"PageNotFound-mw-pBfPL.js","sources":["../../src/routes/PageNotFound.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PageNotFound() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Page not found\" />\n <Callout intent=\"danger\">\n The URL you requested can't be found. If you think this is an error,{\" \"}\n <ExternalLink href=\"https://github.com/bvaughn/react-window/issues/new\">\n please file a GitHub issue\n </ExternalLink>\n .\n </Callout>\n </Box>\n );\n}\n"],"names":["PageNotFound","jsxs","Box","direction","gap","children","jsx","Header","title","Callout","intent","ExternalLink","href"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,qBACdP,KAACQ,EAAA,CAAQC,OAAO,SAASL,SAAA,CAAA,uEAC8C,IACrEC,EAAAA,IAACK,EAAA,CAAaC,KAAK,qDAAqDP,SAAA,+BAEzD,SAKvB"}

package/docs/assets/{PlatformRequirementsRoute-D2r4s58b.js → PlatformRequirementsRoute-pGdzRelu.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as e,B as s,E as r,C as i}from"./index-C6NWGx8D.js";import{H as n}from"./Header-B_onM2vR.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(n,{title:"Requirements"}),e.jsxs("div",{children:["This library requires React"," ",e.jsx(r,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"version 18"})," ","or newer."]}),e.jsxs("div",{children:["It also uses the"," ",e.jsx(r,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","(or a polyfill) to calculate the available space for ",e.jsx("code",{children:"List"})," ","and ",e.jsx("code",{children:"Grid"})," components."]}),e.jsxs(i,{intent:"primary",children:[e.jsx("code",{children:"ResizeObserver"})," usage can be avoided if explicit pixel dimensions are specified using the ",e.jsx("code",{children:"style"})," prop. (Percentage or EM/REM based dimensions do not count.)"]})]})}export{o as default};
-//# sourceMappingURL=PlatformRequirementsRoute-D2r4s58b.js.map
+import{j as e,B as s,E as r,C as i}from"./index-0ZXvQVSH.js";import{H as n}from"./Header-BdKWSvvb.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(n,{title:"Requirements"}),e.jsxs("div",{children:["This library requires React"," ",e.jsx(r,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"version 18"})," ","or newer."]}),e.jsxs("div",{children:["It also uses the"," ",e.jsx(r,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","(or a polyfill) to calculate the available space for ",e.jsx("code",{children:"List"})," ","and ",e.jsx("code",{children:"Grid"})," components."]}),e.jsxs(i,{intent:"primary",children:[e.jsx("code",{children:"ResizeObserver"})," usage can be avoided if explicit pixel dimensions are specified using the ",e.jsx("code",{children:"style"})," prop. (Percentage or EM/REM based dimensions do not count.)"]})]})}export{o as default};
+//# sourceMappingURL=PlatformRequirementsRoute-pGdzRelu.js.map

package/docs/assets/{PlatformRequirementsRoute-D2r4s58b.js.map → PlatformRequirementsRoute-pGdzRelu.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PlatformRequirementsRoute-~~D2r4s58b~~.js","sources":["../../src/routes/PlatformRequirementsRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PlatformRequirementsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Requirements\" />\n <div>\n This library requires React{\" \"}\n <ExternalLink href=\"https://react.dev/blog/2022/03/29/react-v18\">\n version 18\n </ExternalLink>{\" \"}\n or newer.\n </div>\n <div>\n It also uses the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n ResizeObserver\n </ExternalLink>{\" \"}\n (or a polyfill) to calculate the available space for <code>List</code>{\" \"}\n and <code>Grid</code> components.\n </div>\n <Callout intent=\"primary\">\n <code>ResizeObserver</code> usage can be avoided if explicit pixel\n dimensions are specified using the <code>style</code> prop. (Percentage\n or EM/REM based dimensions do not count.)\n </Callout>\n </Box>\n );\n}\n"],"names":["PlatformRequirementsRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","Callout","intent"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,wBACb,MAAA,CAAIH,SAAA,CAAA,8BACyB,IAC5BC,EAAAA,IAACG,EAAA,CAAaC,KAAK,8CAA8CL,SAAA,eAEjD,IAAI,sBAGrB,MAAA,CAAIA,SAAA,CAAA,mBACc,IACjBC,EAAAA,IAACG,EAAA,CAAaC,KAAK,kEAAkEL,SAAA,mBAErE,IAAI,0DACiCC,IAAC,QAAKD,SAAA,SAAY,IAAI,SACvEC,IAAC,QAAKD,SAAA,SAAW,oBAEvBJ,KAACU,EAAA,CAAQC,OAAO,UACdP,SAAA,GAAAC,IAAC,QAAKD,SAAA,mBAAqB,gFACQC,IAAC,QAAKD,SAAA,UAAY,oEAK7D"}
1	+ {"version":3,"file":"PlatformRequirementsRoute-pGdzRelu.js","sources":["../../src/routes/PlatformRequirementsRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PlatformRequirementsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Requirements\" />\n <div>\n This library requires React{\" \"}\n <ExternalLink href=\"https://react.dev/blog/2022/03/29/react-v18\">\n version 18\n </ExternalLink>{\" \"}\n or newer.\n </div>\n <div>\n It also uses the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n ResizeObserver\n </ExternalLink>{\" \"}\n (or a polyfill) to calculate the available space for <code>List</code>{\" \"}\n and <code>Grid</code> components.\n </div>\n <Callout intent=\"primary\">\n <code>ResizeObserver</code> usage can be avoided if explicit pixel\n dimensions are specified using the <code>style</code> prop. (Percentage\n or EM/REM based dimensions do not count.)\n </Callout>\n </Box>\n );\n}\n"],"names":["PlatformRequirementsRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","Callout","intent"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,wBACb,MAAA,CAAIH,SAAA,CAAA,8BACyB,IAC5BC,EAAAA,IAACG,EAAA,CAAaC,KAAK,8CAA8CL,SAAA,eAEjD,IAAI,sBAGrB,MAAA,CAAIA,SAAA,CAAA,mBACc,IACjBC,EAAAA,IAACG,EAAA,CAAaC,KAAK,kEAAkEL,SAAA,mBAErE,IAAI,0DACiCC,IAAC,QAAKD,SAAA,SAAY,IAAI,SACvEC,IAAC,QAAKD,SAAA,SAAW,oBAEvBJ,KAACU,EAAA,CAAQC,OAAO,UACdP,SAAA,GAAAC,IAAC,QAAKD,SAAA,mBAAqB,gFACQC,IAAC,QAAKD,SAAA,UAAY,oEAK7D"}

package/docs/assets/{PropsRoute-B_3n6IE5.js → PropsRoute-DV7EZjjj.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as e,B as a}from"./index-C6NWGx8D.js";import{C as n}from"./ContinueLink-DMnSPbdx.js";import{C as t}from"./ComponentProps-BFVtvKZW.js";import"./Header-B_onM2vR.js";const l={tags:{},filePath:"lib/components/grid/Grid.tsx",description:"",displayName:"Grid",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"dir":{"defaultValue":null,"description":"Corresponds to the HTML dir attribute:\\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir","name":"dir","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe grid of cells will fill the height and width defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties | undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the grid (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string | JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"cellComponent":{"defaultValue":null,"description":"React component responsible for rendering a cell.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `cellProps`.\\n\\n⚠️ The prop types for this component are exported as `CellComponentProps`","name":"cellComponent","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-colindex\\": number; role: \\"gridcell\\"; }; columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"}},"cellProps":{"defaultValue":null,"description":"Additional props to be passed to the cell-rendering component.\\nGrid will automatically re-render cells when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"cellProps","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<CellProps>"}},"columnCount":{"defaultValue":null,"description":"Number of columns to be rendered in the grid.","name":"columnCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"columnWidth":{"defaultValue":null,"description":"Column width; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current width (string)\\n- function that returns the row width (in pixels) given an index and `cellProps`","name":"columnWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of grid for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"defaultWidth":{"defaultValue":{"value":"0"},"description":"Default width of grid for initial render.\\nThis value is important for server rendering.","name":"defaultWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"gridRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"gridRef","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<GridImperativeAPI> | undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: GridImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<GridImperativeAPI | null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onCellsRendered":{"defaultValue":null,"description":"Callback notified when the range of rendered cells changes.","name":"onCellsRendered","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((args: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(args: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the Grid\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a cell into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows/columns to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a grid when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowCount":{"defaultValue":null,"description":"Number of rows to be rendered in the grid.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements | undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function r(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(t,{section:"Grids",json:l}),e.jsx(n,{to:"/grid/imperative-api",title:"imperative api"})]})}export{r as default};
-//# sourceMappingURL=PropsRoute-B_3n6IE5.js.map
+import{j as e,B as a}from"./index-0ZXvQVSH.js";import{C as n}from"./ContinueLink-Bt_isYvF.js";import{C as t}from"./ComponentProps-BaSDIyGM.js";import"./Header-BdKWSvvb.js";const l={tags:{},filePath:"lib/components/grid/Grid.tsx",description:"",displayName:"Grid",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"dir":{"defaultValue":null,"description":"Corresponds to the HTML dir attribute:\\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir","name":"dir","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string | undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe grid of cells will fill the height and width defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties | undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the grid (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string | JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"cellComponent":{"defaultValue":null,"description":"React component responsible for rendering a cell.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `cellProps`.\\n\\n⚠️ The prop types for this component are exported as `CellComponentProps`","name":"cellComponent","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-colindex\\": number; role: \\"gridcell\\"; }; columnIndex: number; rowIndex: number; style: CSSProperties; } & CellProps) => ReactNode"}},"cellProps":{"defaultValue":null,"description":"Additional props to be passed to the cell-rendering component.\\nGrid will automatically re-render cells when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"cellProps","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<CellProps>"}},"columnCount":{"defaultValue":null,"description":"Number of columns to be rendered in the grid.","name":"columnCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"columnWidth":{"defaultValue":null,"description":"Column width; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current width (string)\\n- function that returns the row width (in pixels) given an index and `cellProps`","name":"columnWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of grid for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"defaultWidth":{"defaultValue":{"value":"0"},"description":"Default width of grid for initial render.\\nThis value is important for server rendering.","name":"defaultWidth","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"gridRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"gridRef","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<GridImperativeAPI> | undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: GridImperativeAPI | null) => void | (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<GridImperativeAPI | null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onCellsRendered":{"defaultValue":null,"description":"Callback notified when the range of rendered cells changes.","name":"onCellsRendered","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((visibleCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }, allCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(visibleCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }, allCells: { columnStartIndex: number; columnStopIndex: number; rowStartIndex: number; rowStopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the Grid\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a cell into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows/columns to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a grid when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number | undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowCount":{"defaultValue":null,"description":"Number of rows to be rendered in the grid.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string | number | ((index: number, cellProps: CellProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: CellProps) => number","description":"","fullComment":"","tags":{}}]}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/grid/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements | undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function r(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(t,{section:"Grids",json:l}),e.jsx(n,{to:"/grid/imperative-api",title:"imperative api"})]})}export{r as default};
+//# sourceMappingURL=PropsRoute-DV7EZjjj.js.map

package/docs/assets/{PropsRoute-B_3n6IE5.js.map → PropsRoute-DV7EZjjj.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PropsRoute-~~B_3n6IE5~~.js","sources":["../../src/routes/grid/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/Grid.json\";\n\nexport default function GridPropsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <ComponentProps section=\"Grids\" json={json} />\n <ContinueLink to=\"/grid/imperative-api\" title=\"imperative api\" />\n </Box>\n );\n}\n"],"names":["GridPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"~~oueAKA~~,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}
1	+ {"version":3,"file":"PropsRoute-DV7EZjjj.js","sources":["../../src/routes/grid/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/Grid.json\";\n\nexport default function GridPropsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <ComponentProps section=\"Grids\" json={json} />\n <ContinueLink to=\"/grid/imperative-api\" title=\"imperative api\" />\n </Box>\n );\n}\n"],"names":["GridPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"k9eAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}

package/docs/assets/PropsRoute-UF2eK3lu.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{j as e,B as a}from"./index-0ZXvQVSH.js";import{C as t}from"./ContinueLink-Bt_isYvF.js";import{C as n}from"./ComponentProps-BaSDIyGM.js";import"./Header-BdKWSvvb.js";const l={tags:{},filePath:"lib/components/list/List.tsx",description:"",displayName:"List",methods:[],props:JSON.parse('{"className":{"defaultValue":null,"description":"CSS class name.","name":"className","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"string \| undefined","value":[{"value":"undefined"},{"value":"string"}]}},"style":{"defaultValue":null,"description":"Optional CSS properties.\\nThe list of rows will fill the height defined by this style.","name":"style","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"HTMLAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"CSSProperties \| undefined","value":[{"value":"undefined"},{"value":"CSSProperties","description":"","fullComment":"","tags":{}}]}},"children":{"defaultValue":null,"description":"Additional content to be rendered within the list (above cells).\\nThis property can be used to render things like overlays or tooltips.","name":"children","parent":{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},"declarations":[{"fileName":"react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts","name":"DOMAttributes"},{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"ReactNode","value":[{"value":"undefined"},{"value":"null"},{"value":"string"},{"value":"number"},{"value":"bigint"},{"value":"false"},{"value":"true"},{"value":"ReactElement<unknown, string \| JSXElementConstructor<any>>","description":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.","fullComment":"Represents a JSX element.\\n\\nWhere {@link ReactNode} represents everything that can be rendered, `ReactElement`\\nonly represents JSX.\\n@template P The type of the props object\\n@template T The type of the component or tag\\n@example ```tsx\\nconst element: ReactElement = <div />;\\n```","tags":{"template":"P The type of the props object\\nT The type of the component or tag","example":"```tsx\\nconst element: ReactElement = <div />;\\n```"}},{"value":"Iterable<ReactNode>","description":"","fullComment":"","tags":{}},{"value":"ReactPortal","description":"","fullComment":"","tags":{}},{"value":"Promise<AwaitedReactNode>","description":"Represents the completion of an asynchronous operation","fullComment":"Represents the completion of an asynchronous operation","tags":{}}]}},"defaultHeight":{"defaultValue":{"value":"0"},"description":"Default height of list for initial render.\\nThis value is important for server rendering.","name":"defaultHeight","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number \| undefined","value":[{"value":"undefined"},{"value":"number"}]}},"listRef":{"defaultValue":null,"description":"Ref used to interact with this component\'s imperative API.\\n\\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\\n\\n⚠️ The `useListRef` and `useListCallbackRef` hooks are exported for convenience use in TypeScript projects.","name":"listRef","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"Ref<ListImperativeAPI> \| undefined","value":[{"value":"undefined"},{"value":"null"},{"value":"(instance: ListImperativeAPI \| null) => void \| (() => VoidOrUndefinedOnly)","description":"","fullComment":"","tags":{}},{"value":"RefObject<ListImperativeAPI \| null>","description":"Created by {@link createRef}, or {@link useRef} when passed `null`.","fullComment":"Created by {@link createRef}, or {@link useRef} when passed `null`.\\n@template T The type of the ref\'s value.\\n@example ```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```","tags":{"template":"T The type of the ref\'s value.","example":"```tsx\\nconst ref = createRef<HTMLDivElement>();\\n\\nref.current = document.createElement(\'div\'); // Error\\n```"}}]}},"onResize":{"defaultValue":null,"description":"Callback notified when the List\'s outermost HTMLElement resizes.\\nThis may be used to (re)scroll a row into view.","name":"onResize","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) \| undefined","value":[{"value":"undefined"},{"value":"(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void","description":"","fullComment":"","tags":{}}]}},"onRowsRendered":{"defaultValue":null,"description":"Callback notified when the range of visible rows changes.","name":"onRowsRendered","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"((visibleRows: { startIndex: number; stopIndex: number; }, allRows: { startIndex: number; stopIndex: number; }) => void) \| undefined","value":[{"value":"undefined"},{"value":"(visibleRows: { startIndex: number; stopIndex: number; }, allRows: { startIndex: number; stopIndex: number; }) => void","description":"","fullComment":"","tags":{}}]}},"overscanCount":{"defaultValue":{"value":"3"},"description":"How many additional rows to render outside of the visible area.\\nThis can reduce visual flickering near the edges of a list when scrolling.","name":"overscanCount","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"number \| undefined","value":[{"value":"undefined"},{"value":"number"}]}},"rowComponent":{"defaultValue":null,"description":"React component responsible for rendering a row.\\n\\nThis component will receive an `index` and `style` prop by default.\\nAdditionally it will receive prop values passed to `rowProps`.\\n\\n⚠️ The prop types for this component are exported as `RowComponentProps`","name":"rowComponent","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"(props: { ariaAttributes: { \\"aria-posinset\\": number; \\"aria-setsize\\": number; role: \\"listitem\\"; }; index: number; style: CSSProperties; } & RowProps) => ReactNode"}},"rowCount":{"defaultValue":null,"description":"Number of items to be rendered in the list.","name":"rowCount","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"number"}},"rowHeight":{"defaultValue":null,"description":"Row height; the following formats are supported:\\n- number of pixels (number)\\n- percentage of the grid\'s current height (string)\\n- function that returns the row height (in pixels) given an index and `cellProps`","name":"rowHeight","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"enum","raw":"string \| number \| ((index: number, cellProps: RowProps) => number)","value":[{"value":"string"},{"value":"number"},{"value":"(index: number, cellProps: RowProps) => number","description":"","fullComment":"","tags":{}}]}},"rowProps":{"defaultValue":null,"description":"Additional props to be passed to the row-rendering component.\\nList will automatically re-render rows when values in this object change.\\n\\n⚠️ This object must not contain either an `index` or `style` prop.","name":"rowProps","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":true,"type":{"name":"ExcludeForbiddenKeys<RowProps>"}},"tagName":{"defaultValue":{"value":"\\"div\\" as TagName"},"description":"Can be used to override the root HTML element rendered by the List component.\\nThe default value is \\"div\\", meaning that List renders an HTMLDivElement as its root.\\n\\n⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.","name":"tagName","declarations":[{"fileName":"react-window/lib/components/list/types.ts","name":"TypeLiteral"}],"required":false,"type":{"name":"enum","raw":"keyof IntrinsicElements \| undefined","value":[{"value":"undefined"},{"value":"\\"symbol\\""},{"value":"\\"object\\""},{"value":"\\"slot\\""},{"value":"\\"style\\""},{"value":"\\"title\\""},{"value":"\\"search\\""},{"value":"\\"article\\""},{"value":"\\"button\\""},{"value":"\\"dialog\\""},{"value":"\\"figure\\""},{"value":"\\"form\\""},{"value":"\\"img\\""},{"value":"\\"link\\""},{"value":"\\"main\\""},{"value":"\\"menu\\""},{"value":"\\"menuitem\\""},{"value":"\\"option\\""},{"value":"\\"switch\\""},{"value":"\\"table\\""},{"value":"\\"text\\""},{"value":"\\"time\\""},{"value":"\\"a\\""},{"value":"\\"abbr\\""},{"value":"\\"address\\""},{"value":"\\"area\\""},{"value":"\\"aside\\""},{"value":"\\"audio\\""},{"value":"\\"b\\""},{"value":"\\"base\\""},{"value":"\\"bdi\\""},{"value":"\\"bdo\\""},{"value":"\\"big\\""},{"value":"\\"blockquote\\""},{"value":"\\"body\\""},{"value":"\\"br\\""},{"value":"\\"canvas\\""},{"value":"\\"caption\\""},{"value":"\\"center\\""},{"value":"\\"cite\\""},{"value":"\\"code\\""},{"value":"\\"col\\""},{"value":"\\"colgroup\\""},{"value":"\\"data\\""},{"value":"\\"datalist\\""},{"value":"\\"dd\\""},{"value":"\\"del\\""},{"value":"\\"details\\""},{"value":"\\"dfn\\""},{"value":"\\"div\\""},{"value":"\\"dl\\""},{"value":"\\"dt\\""},{"value":"\\"em\\""},{"value":"\\"embed\\""},{"value":"\\"fieldset\\""},{"value":"\\"figcaption\\""},{"value":"\\"footer\\""},{"value":"\\"h1\\""},{"value":"\\"h2\\""},{"value":"\\"h3\\""},{"value":"\\"h4\\""},{"value":"\\"h5\\""},{"value":"\\"h6\\""},{"value":"\\"head\\""},{"value":"\\"header\\""},{"value":"\\"hgroup\\""},{"value":"\\"hr\\""},{"value":"\\"html\\""},{"value":"\\"i\\""},{"value":"\\"iframe\\""},{"value":"\\"input\\""},{"value":"\\"ins\\""},{"value":"\\"kbd\\""},{"value":"\\"keygen\\""},{"value":"\\"label\\""},{"value":"\\"legend\\""},{"value":"\\"li\\""},{"value":"\\"map\\""},{"value":"\\"mark\\""},{"value":"\\"meta\\""},{"value":"\\"meter\\""},{"value":"\\"nav\\""},{"value":"\\"noindex\\""},{"value":"\\"noscript\\""},{"value":"\\"ol\\""},{"value":"\\"optgroup\\""},{"value":"\\"output\\""},{"value":"\\"p\\""},{"value":"\\"param\\""},{"value":"\\"picture\\""},{"value":"\\"pre\\""},{"value":"\\"progress\\""},{"value":"\\"q\\""},{"value":"\\"rp\\""},{"value":"\\"rt\\""},{"value":"\\"ruby\\""},{"value":"\\"s\\""},{"value":"\\"samp\\""},{"value":"\\"script\\""},{"value":"\\"section\\""},{"value":"\\"select\\""},{"value":"\\"small\\""},{"value":"\\"source\\""},{"value":"\\"span\\""},{"value":"\\"strong\\""},{"value":"\\"sub\\""},{"value":"\\"summary\\""},{"value":"\\"sup\\""},{"value":"\\"template\\""},{"value":"\\"tbody\\""},{"value":"\\"td\\""},{"value":"\\"textarea\\""},{"value":"\\"tfoot\\""},{"value":"\\"th\\""},{"value":"\\"thead\\""},{"value":"\\"tr\\""},{"value":"\\"track\\""},{"value":"\\"u\\""},{"value":"\\"ul\\""},{"value":"\\"var\\""},{"value":"\\"video\\""},{"value":"\\"wbr\\""},{"value":"\\"webview\\""},{"value":"\\"svg\\""},{"value":"\\"animate\\""},{"value":"\\"animateMotion\\""},{"value":"\\"animateTransform\\""},{"value":"\\"circle\\""},{"value":"\\"clipPath\\""},{"value":"\\"defs\\""},{"value":"\\"desc\\""},{"value":"\\"ellipse\\""},{"value":"\\"feBlend\\""},{"value":"\\"feColorMatrix\\""},{"value":"\\"feComponentTransfer\\""},{"value":"\\"feComposite\\""},{"value":"\\"feConvolveMatrix\\""},{"value":"\\"feDiffuseLighting\\""},{"value":"\\"feDisplacementMap\\""},{"value":"\\"feDistantLight\\""},{"value":"\\"feDropShadow\\""},{"value":"\\"feFlood\\""},{"value":"\\"feFuncA\\""},{"value":"\\"feFuncB\\""},{"value":"\\"feFuncG\\""},{"value":"\\"feFuncR\\""},{"value":"\\"feGaussianBlur\\""},{"value":"\\"feImage\\""},{"value":"\\"feMerge\\""},{"value":"\\"feMergeNode\\""},{"value":"\\"feMorphology\\""},{"value":"\\"feOffset\\""},{"value":"\\"fePointLight\\""},{"value":"\\"feSpecularLighting\\""},{"value":"\\"feSpotLight\\""},{"value":"\\"feTile\\""},{"value":"\\"feTurbulence\\""},{"value":"\\"filter\\""},{"value":"\\"foreignObject\\""},{"value":"\\"g\\""},{"value":"\\"image\\""},{"value":"\\"line\\""},{"value":"\\"linearGradient\\""},{"value":"\\"marker\\""},{"value":"\\"mask\\""},{"value":"\\"metadata\\""},{"value":"\\"mpath\\""},{"value":"\\"path\\""},{"value":"\\"pattern\\""},{"value":"\\"polygon\\""},{"value":"\\"polyline\\""},{"value":"\\"radialGradient\\""},{"value":"\\"rect\\""},{"value":"\\"set\\""},{"value":"\\"stop\\""},{"value":"\\"textPath\\""},{"value":"\\"tspan\\""},{"value":"\\"use\\""},{"value":"\\"view\\""}]}}}')};function i(){return e.jsxs(a,{direction:"column",gap:4,children:[e.jsx(n,{section:"Lists",json:l}),e.jsx(t,{to:"/list/imperative-api",title:"imperative api"})]})}export{i as default};
2	+ //# sourceMappingURL=PropsRoute-UF2eK3lu.js.map

package/docs/assets/{PropsRoute-CUL_CRSw.js.map → PropsRoute-UF2eK3lu.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PropsRoute-~~CUL_CRSw~~.js","sources":["../../src/routes/list/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/List.json\";\n\nexport default function ListPropsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <ComponentProps section=\"Lists\" json={json} />\n <ContinueLink to=\"/list/imperative-api\" title=\"imperative api\" />\n </Box>\n );\n}\n"],"names":["ListPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"~~kraAKA~~,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}
1	+ {"version":3,"file":"PropsRoute-UF2eK3lu.js","sources":["../../src/routes/list/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\nimport json from \"../../../public/generated/js-docs/List.json\";\n\nexport default function ListPropsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <ComponentProps section=\"Lists\" json={json} />\n <ContinueLink to=\"/list/imperative-api\" title=\"imperative api\" />\n </Box>\n );\n}\n"],"names":["ListPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","json","ContinueLink","to","title"],"mappings":"0yaAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAeC,QAAQ,QAAQC,SAChCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}