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

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

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 (94) hide show

package/docs/assets/{ImperativeApiRoute-ZdLgDzyA.js → ImperativeApiRoute-BxC-VyUh.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-Dfhz9Ad4.js";import{G as c}from"./Grid-BnGy9pmI.js";import{B as e}from"./arePropsEqual-Bhv0L31F.js";import{F as o}from"./FormattedCode-CDzGfhdX.js";import{H as i}from"./Header-DyQVANF3.js";import{L as l}from"./LoadingSpinner-DXcA8wXA.js";import{S as d}from"./Select-Dtoy3zH8.js";import{C as r}from"./CellComponent.example-dKVH8ZYc.js";import{u,C as k,c as h}from"./useContacts-CDDyJV-g.js";import{C as m}from"./ContinueLink-DN1_wnU9.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-ZdLgDzyA.js.map
+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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ImperativeApiRoute-ZdLgDzyA.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-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"}

package/docs/assets/{ImperativeApiRoute-DN4crA5x.js → ImperativeApiRoute-D8HOQfr3.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-Dfhz9Ad4.js";import{L as c}from"./List-CsalXuo6.js";import{B as e}from"./arePropsEqual-Bhv0L31F.js";import{F as i}from"./FormattedCode-CDzGfhdX.js";import{H as l}from"./Header-DyQVANF3.js";import{L as o}from"./LoadingSpinner-DXcA8wXA.js";import{S as d}from"./Select-Dtoy3zH8.js";import{u as r,R as u}from"./useCitiesByState-_PN38xmv.js";import{C as k}from"./ContinueLink-DN1_wnU9.js";import"./addresses-CDQyd4n9.js";const h=s.useRef,m={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">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</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">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</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">align</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">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">index</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">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</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">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</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">align</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">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">index</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>'},v={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">useListCallbackRef</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">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</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">list</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</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">useListCallbackRef</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">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</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">list</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</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>'},f={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">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</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">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</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>'},g={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">useListRef</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>'};function y(s,{items:a}){return"state"===a[s].type?30:25}const x={label:"",value:""},N=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));N.unshift(x);const b=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));function w(){const[w,j]=s.useState(),[R,L]=s.useState(),[C,S]=s.useState(x),A=r(),I=s.useMemo(()=>{const s=A.filter(s=>"state"===s.type).map(s=>({label:s.state,value:s.state}));return s.unshift(x),s},[A]),P=h(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Imperative API"}),a.jsx("div",{children:"List provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(i,{markdown:g}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(i,{markdown:f}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(i,{markdown:m}),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:j,options:N,placeholder:"Align",value:w}),a.jsx(d,{className:"flex-1",onChange:L,options:b,placeholder:"Scroll behavior",value:R})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:S,options:I,placeholder:"State",value:C}),a.jsx(p,{className:"shrink-0",disabled:!C.value,onClick:()=>{const s=A.findIndex(s=>"state"===s.type&&s.state===C.value);P.current?.scrollToRow({align:w?.value,behavior:R?.value,index:s})},children:"Scroll"})]}),a.jsxs(e,{className:"h-50","data-focus-within":"bold",children:[!A.length&&a.jsx(o,{}),a.jsx(c,{listRef:P,rowComponent:u,rowCount:A.length,rowHeight:y,rowProps:{items:A}})]}),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(i,{markdown:v}),a.jsx(k,{to:"/list/aria-roles",title:"ARIA roles"})]})}b.unshift(x);export{w as default};
-//# sourceMappingURL=ImperativeApiRoute-DN4crA5x.js.map
+import{r as s,j as a,B as n,a as p,C as t}from"./index-C6NWGx8D.js";import{L as c}from"./List-CwFMf7n1.js";import{B as e}from"./arePropsEqual-Czc4-HWX.js";import{F as i}from"./FormattedCode-B5NYyy8K.js";import{H as l}from"./Header-B_onM2vR.js";import{L as o}from"./LoadingSpinner-BMzTPwZo.js";import{S as d}from"./Select-INFvG4Rz.js";import{u as r,R as u}from"./useCitiesByState-rFcDxGxC.js";import{C as k}from"./ContinueLink-DMnSPbdx.js";import"./addresses-CDQyd4n9.js";const h=s.useRef,m={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">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</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">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</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">align</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">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">index</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">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</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">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</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">align</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">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">index</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>'},v={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">useListCallbackRef</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">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</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">list</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</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">useListCallbackRef</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">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</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">list</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</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>'},f={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">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</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">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</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">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</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>'},g={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">useListRef</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>'};function y(s,{items:a}){return"state"===a[s].type?30:25}const x={label:"",value:""},N=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));N.unshift(x);const b=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));function w(){const[w,j]=s.useState(),[R,L]=s.useState(),[C,S]=s.useState(x),A=r(),I=s.useMemo(()=>{const s=A.filter(s=>"state"===s.type).map(s=>({label:s.state,value:s.state}));return s.unshift(x),s},[A]),P=h(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Imperative API"}),a.jsx("div",{children:"List provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),a.jsx(i,{markdown:g}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(i,{markdown:f}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(i,{markdown:m}),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:j,options:N,placeholder:"Align",value:w}),a.jsx(d,{className:"flex-1",onChange:L,options:b,placeholder:"Scroll behavior",value:R})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(d,{className:"flex-1",onChange:S,options:I,placeholder:"State",value:C}),a.jsx(p,{className:"shrink-0",disabled:!C.value,onClick:()=>{const s=A.findIndex(s=>"state"===s.type&&s.state===C.value);P.current?.scrollToRow({align:w?.value,behavior:R?.value,index:s})},children:"Scroll"})]}),a.jsxs(e,{className:"h-50","data-focus-within":"bold",children:[!A.length&&a.jsx(o,{}),a.jsx(c,{listRef:P,rowComponent:u,rowCount:A.length,rowHeight:y,rowProps:{items:A}})]}),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(i,{markdown:v}),a.jsx(k,{to:"/list/aria-roles",title:"ARIA roles"})]})}b.unshift(x);export{w as default};
+//# sourceMappingURL=ImperativeApiRoute-D8HOQfr3.js.map

package/docs/assets/{ImperativeApiRoute-DN4crA5x.js.map → ImperativeApiRoute-D8HOQfr3.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImperativeApiRoute-~~DN4crA5x~~.js","sources":["../../lib/components/list/useListRef.ts","../../src/routes/list/examples/rowHeight.example.ts","../../src/routes/list/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { ListImperativeAPI } from \"./types\";\n\n/*\n Convenience hook to return a properly typed ref for the List component.\n */\nexport const useListRef = useRef as typeof useRef<ListImperativeAPI>;\n","import type { RowProps } from \"./ListVariableRowHeights.example\";\n\n// <begin>\n\nfunction rowHeight(index: number, { items }: RowProps) {\n return items[index].type === \"state\" ? 30 : 25;\n}\n\n// <end>\n\nexport { rowHeight };\n","import { useMemo, useState } from \"react\";\nimport { List, useListRef, type Align } from \"react-window\";\nimport listRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/listRefClickEventHandler.json\";\nimport useListCallbackRefMarkdown from \"../../../public/generated/code-snippets/useListCallbackRef.json\";\nimport useListRefMarkdown from \"../../../public/generated/code-snippets/useListRef.json\";\nimport useListRefImportMarkdown from \"../../../public/generated/code-snippets/useListRefImport.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 { RowComponent } from \"./examples/ListVariableRowHeights.example\";\nimport { rowHeight } from \"./examples/rowHeight.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\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\nexport default function ListImperativeApiRoute() {\n const [align, setAlign] = useState<Option<Align> \| undefined>();\n const [behavior, setBehavior] = useState<\n Option<ScrollBehavior> \| undefined\n >();\n const [state, setState] = useState<Option<string>>(EMPTY_OPTION);\n\n const citiesByState = useCitiesByState();\n\n const stateOptions = useMemo<Option<string>[]>(() => {\n const options: Option<string>[] = citiesByState\n .filter((item) => item.type === \"state\")\n .map((item) => ({\n label: item.state,\n value: item.state\n }));\n options.unshift(EMPTY_OPTION);\n\n return options;\n }, [citiesByState]);\n\n const listRef = useListRef(null);\n\n const scrollToRow = () => {\n const index = citiesByState.findIndex(\n (item) => item.type === \"state\" && item.state === state.value\n );\n listRef.current?.scrollToRow({\n align: align?.value,\n behavior: behavior?.value,\n index\n });\n };\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"Imperative API\" />\n <div>\n List 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={useListRefImportMarkdown} />\n <div>Attach the ref during render:</div>\n <FormattedCode markdown={useListRefMarkdown} />\n <div>And call API methods in an event handler:</div>\n <FormattedCode markdown={listRefClickEventHandlerMarkdown} />\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={setState}\n options={stateOptions}\n placeholder=\"State\"\n value={state}\n />\n <Button\n className=\"shrink-0\"\n disabled={!state.value}\n onClick={scrollToRow}\n >\n Scroll\n </Button>\n </Box>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n {!citiesByState.length && <LoadingSpinner />}\n <List\n listRef={listRef}\n rowComponent={RowComponent}\n rowCount={citiesByState.length}\n rowHeight={rowHeight}\n rowProps={{ items: citiesByState }}\n />\n </Block>\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={useListCallbackRefMarkdown} />\n <ContinueLink to=\"/list/aria-roles\" title=\"ARIA roles\" />\n </Box>\n );\n}\n"],"names":["useListRef","useRef","rowHeight","index","items","type","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","ListImperativeApiRoute","align","setAlign","useState","behavior","setBehavior","state","setState","citiesByState","useCitiesByState","stateOptions","useMemo","options","filter","item","listRef","jsxs","Box","direction","gap","children","jsx","Header","section","title","FormattedCode","markdown","useListRefImportMarkdown","useListRefMarkdown","listRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","findIndex","current","scrollToRow","Block","length","LoadingSpinner","List","rowComponent","RowComponent","rowCount","rowProps","Callout","intent","useListCallbackRefMarkdown","ContinueLink","to"],"mappings":"udAMO,MAAMA,EAAaC,EAAAA,wygBCF1B,SAASC,EAAUC,GAAeC,MAAEA,IAClC,MAA6B,UAAtBA,EAAMD,GAAOE,KAAmB,GAAK,EAC9C,CCaA,MAAMC,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,WAIF,SAAwBK,IACtB,MAAOC,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAOC,GAAYJ,EAAAA,SAAyBV,GAE7Ce,EAAgBC,IAEhBC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4BJ,EAC/BK,OAAQC,GAAuB,UAAdA,EAAKtB,MACtBK,IAAKiB,IAAA,CACJpB,MAAOoB,EAAKR,MACZX,MAAOmB,EAAKR,SAIhB,OAFAM,EAAQd,QAAQL,GAETmB,GACN,CAACJ,IAEEO,EAAU5B,EAAW,MAa3B,OACE6B,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,qBAC9BH,IAAC,OAAID,SAAA,wIAILC,IAACI,EAAA,CAAcC,SAAUC,MACzBN,IAAC,OAAID,SAAA,oCACLC,IAACI,EAAA,CAAcC,SAAUE,MACzBP,IAAC,OAAID,SAAA,gDACLC,IAACI,EAAA,CAAcC,SAAUG,MACzBR,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU9B,EACVU,QAAShB,EACTqC,YAAY,QACZtC,MAAOM,IAEToB,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU3B,EACVO,QAASb,EACTkC,YAAY,kBACZtC,MAAOS,OAGXY,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAUzB,EACVK,QAASF,EACTuB,YAAY,QACZtC,MAAOW,IAETe,EAAAA,IAACa,EAAA,CACCH,UAAU,WACVI,UAAW7B,EAAMX,MACjByC,QAnDY,KAClB,MAAM9C,EAAQkB,EAAc6B,UACzBvB,GAAuB,UAAdA,EAAKtB,MAAoBsB,EAAKR,QAAUA,EAAMX,OAE1DoB,EAAQuB,SAASC,YAAY,CAC3BtC,MAAOA,GAAON,MACdS,SAAUA,GAAUT,MACpBL,WA6CG8B,SAAA,cAIHJ,EAAAA,KAACwB,EAAA,CAAMT,UAAU,OAAO,oBAAkB,OACvCX,SAAA,EAACZ,EAAciC,cAAWC,EAAA,CAAA,GAC3BrB,EAAAA,IAACsB,EAAA,CACC5B,UACA6B,aAAcC,EACdC,SAAUtC,EAAciC,OACxBpD,YACA0D,SAAU,CAAExD,MAAOiB,UAGvBQ,KAACgC,EAAA,CAAQC,OAAO,UACd7B,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOU,UAAU,eAAeX,SAAA,SAAa,wGAGhDC,IAACI,EAAA,CAAcC,SAAUwB,IACzB7B,EAAAA,IAAC8B,EAAA,CAAaC,GAAG,mBAAmB5B,MAAM,iBAGhD,CAnGAzB,EAAUD,QAAQL"}
1	+ {"version":3,"file":"ImperativeApiRoute-D8HOQfr3.js","sources":["../../lib/components/list/useListRef.ts","../../src/routes/list/examples/rowHeight.example.ts","../../src/routes/list/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { ListImperativeAPI } from \"./types\";\n\n/*\n Convenience hook to return a properly typed ref for the List component.\n */\nexport const useListRef = useRef as typeof useRef<ListImperativeAPI>;\n","import type { RowProps } from \"./ListVariableRowHeights.example\";\n\n// <begin>\n\nfunction rowHeight(index: number, { items }: RowProps) {\n return items[index].type === \"state\" ? 30 : 25;\n}\n\n// <end>\n\nexport { rowHeight };\n","import { useMemo, useState } from \"react\";\nimport { List, useListRef, type Align } from \"react-window\";\nimport listRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/listRefClickEventHandler.json\";\nimport useListCallbackRefMarkdown from \"../../../public/generated/code-snippets/useListCallbackRef.json\";\nimport useListRefMarkdown from \"../../../public/generated/code-snippets/useListRef.json\";\nimport useListRefImportMarkdown from \"../../../public/generated/code-snippets/useListRefImport.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 { RowComponent } from \"./examples/ListVariableRowHeights.example\";\nimport { rowHeight } from \"./examples/rowHeight.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\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\nexport default function ListImperativeApiRoute() {\n const [align, setAlign] = useState<Option<Align> \| undefined>();\n const [behavior, setBehavior] = useState<\n Option<ScrollBehavior> \| undefined\n >();\n const [state, setState] = useState<Option<string>>(EMPTY_OPTION);\n\n const citiesByState = useCitiesByState();\n\n const stateOptions = useMemo<Option<string>[]>(() => {\n const options: Option<string>[] = citiesByState\n .filter((item) => item.type === \"state\")\n .map((item) => ({\n label: item.state,\n value: item.state\n }));\n options.unshift(EMPTY_OPTION);\n\n return options;\n }, [citiesByState]);\n\n const listRef = useListRef(null);\n\n const scrollToRow = () => {\n const index = citiesByState.findIndex(\n (item) => item.type === \"state\" && item.state === state.value\n );\n listRef.current?.scrollToRow({\n align: align?.value,\n behavior: behavior?.value,\n index\n });\n };\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"Imperative API\" />\n <div>\n List 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={useListRefImportMarkdown} />\n <div>Attach the ref during render:</div>\n <FormattedCode markdown={useListRefMarkdown} />\n <div>And call API methods in an event handler:</div>\n <FormattedCode markdown={listRefClickEventHandlerMarkdown} />\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={setState}\n options={stateOptions}\n placeholder=\"State\"\n value={state}\n />\n <Button\n className=\"shrink-0\"\n disabled={!state.value}\n onClick={scrollToRow}\n >\n Scroll\n </Button>\n </Box>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n {!citiesByState.length && <LoadingSpinner />}\n <List\n listRef={listRef}\n rowComponent={RowComponent}\n rowCount={citiesByState.length}\n rowHeight={rowHeight}\n rowProps={{ items: citiesByState }}\n />\n </Block>\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={useListCallbackRefMarkdown} />\n <ContinueLink to=\"/list/aria-roles\" title=\"ARIA roles\" />\n </Box>\n );\n}\n"],"names":["useListRef","useRef","rowHeight","index","items","type","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","ListImperativeApiRoute","align","setAlign","useState","behavior","setBehavior","state","setState","citiesByState","useCitiesByState","stateOptions","useMemo","options","filter","item","listRef","jsxs","Box","direction","gap","children","jsx","Header","section","title","FormattedCode","markdown","useListRefImportMarkdown","useListRefMarkdown","listRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","findIndex","current","scrollToRow","Block","length","LoadingSpinner","List","rowComponent","RowComponent","rowCount","rowProps","Callout","intent","useListCallbackRefMarkdown","ContinueLink","to"],"mappings":"udAMO,MAAMA,EAAaC,EAAAA,wygBCF1B,SAASC,EAAUC,GAAeC,MAAEA,IAClC,MAA6B,UAAtBA,EAAMD,GAAOE,KAAmB,GAAK,EAC9C,CCaA,MAAMC,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,WAIF,SAAwBK,IACtB,MAAOC,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAOC,GAAYJ,EAAAA,SAAyBV,GAE7Ce,EAAgBC,IAEhBC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4BJ,EAC/BK,OAAQC,GAAuB,UAAdA,EAAKtB,MACtBK,IAAKiB,IAAA,CACJpB,MAAOoB,EAAKR,MACZX,MAAOmB,EAAKR,SAIhB,OAFAM,EAAQd,QAAQL,GAETmB,GACN,CAACJ,IAEEO,EAAU5B,EAAW,MAa3B,OACE6B,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,qBAC9BH,IAAC,OAAID,SAAA,wIAILC,IAACI,EAAA,CAAcC,SAAUC,MACzBN,IAAC,OAAID,SAAA,oCACLC,IAACI,EAAA,CAAcC,SAAUE,MACzBP,IAAC,OAAID,SAAA,gDACLC,IAACI,EAAA,CAAcC,SAAUG,MACzBR,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU9B,EACVU,QAAShB,EACTqC,YAAY,QACZtC,MAAOM,IAEToB,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU3B,EACVO,QAASb,EACTkC,YAAY,kBACZtC,MAAOS,OAGXY,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAUzB,EACVK,QAASF,EACTuB,YAAY,QACZtC,MAAOW,IAETe,EAAAA,IAACa,EAAA,CACCH,UAAU,WACVI,UAAW7B,EAAMX,MACjByC,QAnDY,KAClB,MAAM9C,EAAQkB,EAAc6B,UACzBvB,GAAuB,UAAdA,EAAKtB,MAAoBsB,EAAKR,QAAUA,EAAMX,OAE1DoB,EAAQuB,SAASC,YAAY,CAC3BtC,MAAOA,GAAON,MACdS,SAAUA,GAAUT,MACpBL,WA6CG8B,SAAA,cAIHJ,EAAAA,KAACwB,EAAA,CAAMT,UAAU,OAAO,oBAAkB,OACvCX,SAAA,EAACZ,EAAciC,cAAWC,EAAA,CAAA,GAC3BrB,EAAAA,IAACsB,EAAA,CACC5B,UACA6B,aAAcC,EACdC,SAAUtC,EAAciC,OACxBpD,YACA0D,SAAU,CAAExD,MAAOiB,UAGvBQ,KAACgC,EAAA,CAAQC,OAAO,UACd7B,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOU,UAAU,eAAeX,SAAA,SAAa,wGAGhDC,IAACI,EAAA,CAAcC,SAAUwB,IACzB7B,EAAAA,IAAC8B,EAAA,CAAaC,GAAG,mBAAmB5B,MAAM,iBAGhD,CAnGAzB,EAAUD,QAAQL"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"List-CwFMf7n1.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 startIndex,\n stopIndex\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 (startIndex >= 0 && stopIndex >= 0 && onRowsRendered) {\n onRowsRendered({\n startIndex,\n stopIndex\n });\n }\n }, [onRowsRendered, startIndex, stopIndex]);\n\n const rows = useMemo(() => {\n const children: ReactNode[] = [];\n if (rowCount > 0) {\n for (let index = startIndex; index <= stopIndex; index++) {\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 }, [RowComponent, getCellBounds, rowCount, rowProps, startIndex, stopIndex]);\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","startIndex","stopIndex","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","useImperativeHandle","scrollToRow","align","behavior","index","top","containerScrollOffset","scrollTop","scrollTo","useEffect","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,WACAA,EAAAC,UACAA,GACEC,EAAe,CACjBC,iBAAkBT,EAClBU,qBAAsB7B,EACtB8B,UAAW,WACXC,UAAWxB,EACXyB,UAAWvB,EACXwB,SAAUzB,EACVN,WACAE,kBAGF8B,EAAAA,oBACEjC,EACA,KAAA,CACE,WAAIkB,GACF,OAAOA,CACT,EAEA,WAAAgB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMf,EAAc,CACxBY,QACAI,sBAAuBrB,GAASsB,WAAa,EAC7CH,UAG+B,mBAAtBnB,GAASuB,UAClBvB,EAAQuB,SAAS,CACfL,WACAE,OAGN,IAEF,CAACpB,EAASK,IAGZmB,EAAAA,UAAU,KACJlB,GAAc,GAAKC,GAAa,GAAKvB,GACvCA,EAAe,CACbsB,aACAC,eAGH,CAACvB,EAAgBsB,EAAYC,IAEhC,MAAMkB,EAAO5B,EAAAA,QAAQ,KACnB,MAAMlB,EAAwB,GAC9B,GAAIS,EAAW,EACb,IAAA,IAAS+B,EAAQb,EAAYa,GAASZ,EAAWY,IAAS,CACxD,MAAMO,EAASvB,EAAcgB,GAE7BxC,EAASgD,KACPC,EAAAA,cAAChC,EAAA,IACMN,EACLuC,eAAgB,CACd,gBAAiBV,EAAQ,EACzB,eAAgB/B,EAChB0C,KAAM,YAERC,IAAKZ,EACLA,QACA1B,MAAO,CACLuC,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcR,EAAOS,kBAChCC,OAAQV,EAAOW,KACfC,MAAO,UAIf,CAEF,OAAO3D,GACN,CAACiB,EAAcO,EAAef,EAAUE,EAAUgB,EAAYC,IAE3DgC,EACJC,EAAAA,IAAC,MAAA,CACC,eAAW,EACX/C,MAAO,CACL2C,OAAQhC,IACRkC,MAAO,OACPG,QAAQ,KAKd,OAAOb,EAAAA,cACLpC,EACA,CACEsC,KAAM,UACHpC,EACHd,YACA8D,IAAKzC,EACLR,MAAO,CACLuC,SAAU,WACVW,UAAW,OACXC,SAAU,EACVC,UAAW,UACRpD,IAGPgC,EACA9C,EACA4D,EAEJ"}

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

@@ -1,2 +1,2 @@
-import{r as e,j as a,B as t}from"./index-Dfhz9Ad4.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-DXcA8wXA.js.map
+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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"LoadingSpinner-~~DXcA8wXA~~.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-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]}

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

@@ -1,2 +1,2 @@
-import{j as e,B as s,C as n,E as t}from"./index-Dfhz9Ad4.js";import{H as i}from"./Header-DyQVANF3.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-I9Ugq07H.js.map
+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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PageNotFound-~~I9Ugq07H~~.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-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"}

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

@@ -1,2 +1,2 @@
-import{j as e,B as s,E as r,C as i}from"./index-Dfhz9Ad4.js";import{H as n}from"./Header-DyQVANF3.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-Mn45V_j9.js.map
+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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PlatformRequirementsRoute-~~Mn45V_j9~~.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-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"}