npm - react-window - Versions diffs - 2.1.1 → 2.1.2 - Mend

react-window 2.1.1 → 2.1.2

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

package/docs/assets/{AriaRolesRoute-B8u4KZlN.js → AriaRolesRoute-DILWjLTS.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as s,B as a,E as n}from"./index-3R9tv3eW.js";import{C as p}from"./Code-BJ6U_DpT.js";import{H as t}from"./Header-DM8OHOd_.js";const c='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class="">City</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class="">State</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class="tok-punctuation">&#62;</span><span class="">Zip</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>',e='<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">List</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</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-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">return</span><span class=""> </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-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></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">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</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-comment">// Add 1 to the row index to account for the header row</span><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">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function o(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Tables",title:"ARIA roles"}),s.jsxs("div",{children:["The default ARIA role set by the ",s.jsx("code",{children:"List"})," component is"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list"})," ",", but the"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role",children:"table"})," ","role is more appropriate for tabular data."]}),s.jsx(p,{html:c}),s.jsx("div",{children:"The example on the previous page can be modified like so to assign the correct ARIA attributes:"}),s.jsx(p,{html:e})]})}export{o as default};
-//# sourceMappingURL=AriaRolesRoute-B8u4KZlN.js.map
+import{j as s,B as a,E as n}from"./index-Cnm6lMUF.js";import{C as p}from"./Code-r2plEB3N.js";import{H as t}from"./Header-CWpEkQSA.js";const c='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class="">City</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class="">State</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class="tok-punctuation">&#62;</span><span class="">Zip</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>',e='<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">List</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</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-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">return</span><span class=""> </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-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></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">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</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-comment">// Add 1 to the row index to account for the header row</span><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">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function o(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Tables",title:"ARIA roles"}),s.jsxs("div",{children:["The default ARIA role set by the ",s.jsx("code",{children:"List"})," component is"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list"})," ",", but the"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role",children:"table"})," ","role is more appropriate for tabular data."]}),s.jsx(p,{html:c}),s.jsx("div",{children:"The example on the previous page can be modified like so to assign the correct ARIA attributes:"}),s.jsx(p,{html:e})]})}export{o as default};
+//# sourceMappingURL=AriaRolesRoute-DILWjLTS.js.map

package/docs/assets/{AriaRolesRoute-B8u4KZlN.js.map → AriaRolesRoute-DILWjLTS.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AriaRolesRoute-~~B8u4KZlN~~.js","sources":["../../src/routes/tables/AriaRolesRoute.tsx"],"sourcesContent":["import TableAriaAttributesMarkdown from \"../../../public/generated/code-snippets/TableAriaAttributes.json\";\nimport TableAriaOverridePropsMarkdown from \"../../../public/generated/code-snippets/TableAriaOverrideProps.json\";\nimport { Box } from \"../../components/Box\";\nimport { Code } from \"../../components/code/Code\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Tables\" title=\"ARIA roles\" />\n <div>\n The default ARIA role set by the <code>List</code> component is{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n list\n </ExternalLink>{\" \"}\n , but the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role\">\n table\n </ExternalLink>{\" \"}\n role is more appropriate for tabular data.\n </div>\n <Code html={TableAriaAttributesMarkdown.html} />\n <div>\n The example on the previous page can be modified like so to assign the\n correct ARIA attributes:\n </div>\n <Code html={TableAriaOverridePropsMarkdown.html} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","Code","html","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"2nmBAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,SAASC,MAAM,sBAC9B,MAAA,CAAIJ,SAAA,CAAA,sCAC8BC,IAAC,QAAKD,SAAA,SAAW,gBAAc,IAChEC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,SAE/F,IAAI,YACV,IACVC,EAAAA,IAACI,EAAA,CAAaC,KAAK,6FAA6FN,SAAA,UAEhG,IAAI,kDAGtBC,IAACM,EAAA,CAAKC,KAAMC,MACZR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAKC,KAAME,MAGlB"}
1	+ {"version":3,"file":"AriaRolesRoute-DILWjLTS.js","sources":["../../src/routes/tables/AriaRolesRoute.tsx"],"sourcesContent":["import TableAriaAttributesMarkdown from \"../../../public/generated/code-snippets/TableAriaAttributes.json\";\nimport TableAriaOverridePropsMarkdown from \"../../../public/generated/code-snippets/TableAriaOverrideProps.json\";\nimport { Box } from \"../../components/Box\";\nimport { Code } from \"../../components/code/Code\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Tables\" title=\"ARIA roles\" />\n <div>\n The default ARIA role set by the <code>List</code> component is{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n list\n </ExternalLink>{\" \"}\n , but the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role\">\n table\n </ExternalLink>{\" \"}\n role is more appropriate for tabular data.\n </div>\n <Code html={TableAriaAttributesMarkdown.html} />\n <div>\n The example on the previous page can be modified like so to assign the\n correct ARIA attributes:\n </div>\n <Code html={TableAriaOverridePropsMarkdown.html} />\n </Box>\n );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","Code","html","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"2nmBAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,SAASC,MAAM,sBAC9B,MAAA,CAAIJ,SAAA,CAAA,sCAC8BC,IAAC,QAAKD,SAAA,SAAW,gBAAc,IAChEC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,SAE/F,IAAI,YACV,IACVC,EAAAA,IAACI,EAAA,CAAaC,KAAK,6FAA6FN,SAAA,UAEhG,IAAI,kDAGtBC,IAACM,EAAA,CAAKC,KAAMC,MACZR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAKC,KAAME,MAGlB"}

package/docs/assets/CellComponent.example-uUYIhpiW.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{j as s}from"./index-Cnm6lMUF.js";import{i as t}from"./useContacts-X0AOlpLx.js";function n({contacts:n,columnIndex:e,rowIndex:o,style:r}){const c=n[o][t(e)];return s.jsx("div",{className:"truncate",style:r,children:c})}export{n as C};
2	+ //# sourceMappingURL=CellComponent.example-uUYIhpiW.js.map

package/docs/assets/{CellComponent.example-ChzwGLAD.js.map → CellComponent.example-uUYIhpiW.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CellComponent.example-~~ChzwGLAD~~.js","sources":["../../src/routes/grid/examples/CellComponent.example.tsx"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\nimport { indexToColumn } from \"./shared\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n contacts,\n columnIndex,\n rowIndex,\n style\n}: CellComponentProps<{\n contacts: Contact[];\n}>) {\n const address = contacts[rowIndex];\n const content = address[indexToColumn(columnIndex)];\n\n return (\n <div className=\"truncate\" style={style}>\n {content}\n </div>\n );\n}\n\n// <end>\n\nexport { CellComponent };\n"],"names":["CellComponent","contacts","columnIndex","rowIndex","style","content","indexToColumn","jsx","className","children"],"mappings":"sFAOA,SAASA,GAAcC,SACrBA,EAAAC,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUJ,EAASE,GACDG,EAAcJ,IAEtC,OACEK,EAAAA,IAAC,MAAA,CAAIC,UAAU,WAAWJ,QACvBK,SAAAJ,GAGP"}
1	+ {"version":3,"file":"CellComponent.example-uUYIhpiW.js","sources":["../../src/routes/grid/examples/CellComponent.example.tsx"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\nimport { indexToColumn } from \"./shared\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n contacts,\n columnIndex,\n rowIndex,\n style\n}: CellComponentProps<{\n contacts: Contact[];\n}>) {\n const address = contacts[rowIndex];\n const content = address[indexToColumn(columnIndex)];\n\n return (\n <div className=\"truncate\" style={style}>\n {content}\n </div>\n );\n}\n\n// <end>\n\nexport { CellComponent };\n"],"names":["CellComponent","contacts","columnIndex","rowIndex","style","content","indexToColumn","jsx","className","children"],"mappings":"sFAOA,SAASA,GAAcC,SACrBA,EAAAC,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUJ,EAASE,GACDG,EAAcJ,IAEtC,OACEK,EAAAA,IAAC,MAAA,CAAIC,UAAU,WAAWJ,QACvBK,SAAAJ,GAGP"}

package/docs/assets/{Code-BJ6U_DpT.js → Code-r2plEB3N.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as e,c as t}from"./index-3R9tv3eW.js";function l({children:l=null,className:s="",html:a}){return e.jsxs("div",{className:"relative",children:[e.jsx("code",{className:t("text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black","flex flex-col",s),dangerouslySetInnerHTML:{__html:a}}),l]})}export{l as C};
-//# sourceMappingURL=Code-BJ6U_DpT.js.map
+import{j as e,c as t}from"./index-Cnm6lMUF.js";function l({children:l=null,className:s="",html:a}){return e.jsxs("div",{className:"relative",children:[e.jsx("code",{className:t("text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black","flex flex-col",s),dangerouslySetInnerHTML:{__html:a}}),l]})}export{l as C};
+//# sourceMappingURL=Code-r2plEB3N.js.map

package/docs/assets/{Code-BJ6U_DpT.js.map → Code-r2plEB3N.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Code-~~BJ6U_DpT~~.js","sources":["../../src/components/code/Code.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport \"./code-mirror.css\";\n\nexport function Code({\n children = null,\n className = \"\",\n html\n}: {\n children?: ReactNode;\n className?: string;\n html: string;\n}) {\n return (\n <div className=\"relative\">\n <code\n className={cn(\n \"text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black\",\n \"flex flex-col\",\n className\n )}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n\n {children}\n </div>\n );\n}\n"],"names":["Code","children","className","html","jsxs","jsx","cn","dangerouslySetInnerHTML","__html"],"mappings":"+CAIO,SAASA,GAAKC,SACnBA,EAAW,KAAAC,UACXA,EAAY,GAAAC,KACZA,IAMA,SACEC,KAAC,MAAA,CAAIF,UAAU,WACbD,SAAA,CAAAI,EAAAA,IAAC,OAAA,CACCH,UAAWI,EACT,6FACA,gBACAJ,GAEFK,wBAAyB,CAAEC,OAAQL,KAGpCF,IAGP"}
1	+ {"version":3,"file":"Code-r2plEB3N.js","sources":["../../src/components/code/Code.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport \"./code-mirror.css\";\n\nexport function Code({\n children = null,\n className = \"\",\n html\n}: {\n children?: ReactNode;\n className?: string;\n html: string;\n}) {\n return (\n <div className=\"relative\">\n <code\n className={cn(\n \"text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black\",\n \"flex flex-col\",\n className\n )}\n dangerouslySetInnerHTML={{ __html: html }}\n />\n\n {children}\n </div>\n );\n}\n"],"names":["Code","children","className","html","jsxs","jsx","cn","dangerouslySetInnerHTML","__html"],"mappings":"+CAIO,SAASA,GAAKC,SACnBA,EAAW,KAAAC,UACXA,EAAY,GAAAC,KACZA,IAMA,SACEC,KAAC,MAAA,CAAIF,UAAU,WACbD,SAAA,CAAAI,EAAAA,IAAC,OAAA,CACCH,UAAWI,EACT,6FACA,gBACAJ,GAEFK,wBAAyB,CAAEC,OAAQL,KAGpCF,IAGP"}

package/docs/assets/{ComponentProps-0JkeHmLq.js → ComponentProps-CnDy_aV8.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as e,j as r,B as t,E as a}from"./index-3R9tv3eW.js";import{H as l}from"./Header-DM8OHOd_.js";function s({title:r,titleId:t,...a},l){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:l,"aria-labelledby":t},a),r?e.createElement("title",{id:t},r):null,e.createElement("path",{fillRule:"evenodd",d:"M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z",clipRule:"evenodd"}),e.createElement("path",{fillRule:"evenodd",d:"M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z",clipRule:"evenodd"}))}const n=e.forwardRef(s),o={url:"https://github.com/bvaughn/react-window.git"};function i({json:t}){const{optionalProps:a,requiredProps:l}=e.useMemo(()=>function(e){const r=[],t=[];return Object.values(e.props).forEach(e=>{e.required?t.push(e):r.push(e)}),r.sort((e,r)=>e.name.localeCompare(r.name)),t.sort((e,r)=>e.name.localeCompare(r.name)),{optionalProps:r,requiredProps:t}}(t),[t]);return r.jsxs(r.Fragment,{children:[r.jsx(c,{header:"Required props",props:l}),r.jsx(c,{header:"Optional props",props:a})]})}function c({header:e,props:t}){return 0===t.length?null:r.jsxs("div",{children:[r.jsx("div",{className:"text-lg font-bold mt-2",children:e}),r.jsx("dl",{children:t.map(e=>r.jsxs("div",{children:[r.jsx("dt",{className:"mt-2 pl-4 indent-[-1rem]",children:r.jsxs("code",{className:"tok-operator",children:[r.jsx("span",{className:"tok-propertyName",children:e.name}),e.required||"?",":"," ","raw"in e.type?e.type.raw:e.type.name,e.defaultValue&&r.jsxs(r.Fragment,{children:[" = ",r.jsx("span",{className:"text-white",children:e.defaultValue.value})]})]})}),r.jsx("dd",{className:"ml-4 [&_code]:text-sky-300",dangerouslySetInnerHTML:{__html:e.description.replaceAll("\n- ","<br/>• ").replaceAll("\n\n","<br/><br/>").replaceAll(/`([^`]+)`/g,"<code>$1</code>")}})]},e.name))})]})}function d({json:e,section:s}){return r.jsxs(r.Fragment,{children:[r.jsxs(t,{align:"center",direction:"row",gap:2,wrap:!0,children:[r.jsx(l,{section:s,title:"Component props"}),r.jsx(a,{className:"text-sm text-emerald-300 hover:text-white",href:`${o.url.replace(".git","")}/blob/master/${e.filePath}`,children:r.jsx(n,{className:"inline-block size-4 fill-current"})})]}),r.jsx(i,{json:e})]})}export{d as C};
-//# sourceMappingURL=ComponentProps-0JkeHmLq.js.map
+import{r as e,j as r,B as t,E as a}from"./index-Cnm6lMUF.js";import{H as l}from"./Header-CWpEkQSA.js";function s({title:r,titleId:t,...a},l){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:l,"aria-labelledby":t},a),r?e.createElement("title",{id:t},r):null,e.createElement("path",{fillRule:"evenodd",d:"M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z",clipRule:"evenodd"}),e.createElement("path",{fillRule:"evenodd",d:"M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z",clipRule:"evenodd"}))}const n=e.forwardRef(s),o={url:"https://github.com/bvaughn/react-window.git"};function i({json:t}){const{optionalProps:a,requiredProps:l}=e.useMemo(()=>function(e){const r=[],t=[];return Object.values(e.props).forEach(e=>{e.required?t.push(e):r.push(e)}),r.sort((e,r)=>e.name.localeCompare(r.name)),t.sort((e,r)=>e.name.localeCompare(r.name)),{optionalProps:r,requiredProps:t}}(t),[t]);return r.jsxs(r.Fragment,{children:[r.jsx(c,{header:"Required props",props:l}),r.jsx(c,{header:"Optional props",props:a})]})}function c({header:e,props:t}){return 0===t.length?null:r.jsxs("div",{children:[r.jsx("div",{className:"text-lg font-bold mt-2",children:e}),r.jsx("dl",{children:t.map(e=>r.jsxs("div",{children:[r.jsx("dt",{className:"mt-2 pl-4 indent-[-1rem]",children:r.jsxs("code",{className:"tok-operator",children:[r.jsx("span",{className:"tok-propertyName",children:e.name}),e.required||"?",":"," ","raw"in e.type?e.type.raw:e.type.name,e.defaultValue&&r.jsxs(r.Fragment,{children:[" = ",r.jsx("span",{className:"text-white",children:e.defaultValue.value})]})]})}),r.jsx("dd",{className:"ml-4 [&_code]:text-sky-300",dangerouslySetInnerHTML:{__html:e.description.replaceAll("\n- ","<br/>• ").replaceAll("\n\n","<br/><br/>").replaceAll(/`([^`]+)`/g,"<code>$1</code>")}})]},e.name))})]})}function d({json:e,section:s}){return r.jsxs(r.Fragment,{children:[r.jsxs(t,{align:"center",direction:"row",gap:2,wrap:!0,children:[r.jsx(l,{section:s,title:"Component props"}),r.jsx(a,{className:"text-sm text-emerald-300 hover:text-white",href:`${o.url.replace(".git","")}/blob/master/${e.filePath}`,children:r.jsx(n,{className:"inline-block size-4 fill-current"})})]}),r.jsx(i,{json:e})]})}export{d as C};
+//# sourceMappingURL=ComponentProps-CnDy_aV8.js.map

package/docs/assets/{ComponentProps-0JkeHmLq.js.map → ComponentProps-CnDy_aV8.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComponentProps-~~0JkeHmLq~~.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowTopRightOnSquareIcon.js","../../src/components/props/PropsBlocks.tsx","../../src/utils/processPropsJSON.ts","../../src/components/props/ComponentProps.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowTopRightOnSquareIcon({\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: \"M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z\",\n clipRule: \"evenodd\"\n }), /#__PURE__/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z\",\n clipRule: \"evenodd\"\n }));\n}\nconst ForwardRef = /#__PURE__/ React.forwardRef(ArrowTopRightOnSquareIcon);\nexport default ForwardRef;","import { useMemo } from \"react\";\nimport type { ComponentDoc, PropItem } from \"react-docgen-typescript\";\nimport { processPropsJSON } from \"../../utils/processPropsJSON\";\n\nexport function PropsBlocks({ json }: { json: ComponentDoc }) {\n const { optionalProps, requiredProps } = useMemo(\n () => processPropsJSON(json),\n [json]\n );\n\n return (\n <>\n <PropsBlock header=\"Required props\" props={requiredProps} />\n <PropsBlock header=\"Optional props\" props={optionalProps} />\n </>\n );\n}\n\nexport function PropsBlock({\n header,\n props\n}: {\n header: string;\n props: PropItem[];\n}) {\n if (props.length === 0) {\n return null;\n }\n\n return (\n <div>\n <div className=\"text-lg font-bold mt-2\">{header}</div>\n <dl>\n {props.map((prop) => (\n <div key={prop.name}>\n <dt className=\"mt-2 pl-4 indent-[-1rem]\">\n <code className=\"tok-operator\">\n <span className=\"tok-propertyName\">{prop.name}</span>\n {prop.required \|\| \"?\"}:{\" \"}\n {\"raw\" in prop.type ? prop.type.raw : prop.type.name}\n {prop.defaultValue && (\n <>\n {\" = \"}\n <span className=\"text-white\">\n {prop.defaultValue.value}\n </span>\n </>\n )}\n </code>\n </dt>\n <dd\n className=\"ml-4 [&_code]:text-sky-300\"\n dangerouslySetInnerHTML={{\n __html: prop.description\n .replaceAll(\"\\n- \", \"<br/>• \")\n .replaceAll(\"\\n\\n\", \"<br/><br/>\")\n .replaceAll(/`([^`]+)`/g, \"<code>$1</code>\")\n }}\n ></dd>\n </div>\n ))}\n </dl>\n </div>\n );\n}\n","import type { ComponentDoc, PropItem } from \"react-docgen-typescript\";\n\nexport function processPropsJSON(json: ComponentDoc) {\n const optionalProps: PropItem[] = [];\n const requiredProps: PropItem[] = [];\n\n Object.values(json.props).forEach((prop) => {\n if (prop.required) {\n requiredProps.push(prop);\n } else {\n optionalProps.push(prop);\n }\n });\n\n optionalProps.sort((a, b) => a.name.localeCompare(b.name));\n requiredProps.sort((a, b) => a.name.localeCompare(b.name));\n\n return { optionalProps, requiredProps };\n}\n","import { ArrowTopRightOnSquareIcon } from \"@heroicons/react/20/solid\";\nimport type { ComponentDoc } from \"react-docgen-typescript\";\nimport { repository } from \"../../../package.json\";\nimport { Box } from \"../Box\";\nimport { ExternalLink } from \"../ExternalLink\";\nimport { Header } from \"../Header\";\nimport { PropsBlocks } from \"./PropsBlocks\";\n\nexport function ComponentProps({\n json,\n section\n}: {\n json: ComponentDoc;\n section: string;\n}) {\n return (\n <>\n <Box align=\"center\" direction=\"row\" gap={2} wrap>\n <Header section={section} title=\"Component props\" />\n <ExternalLink\n className=\"text-sm text-emerald-300 hover:text-white\"\n href={`${repository.url.replace(\".git\", \"\")}/blob/master/${json.filePath}`}\n >\n <ArrowTopRightOnSquareIcon className=\"inline-block size-4 fill-current\" />\n </ExternalLink>\n </Box>\n <PropsBlocks json={json} />\n </>\n );\n}\n"],"names":["ArrowTopRightOnSquareIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","PropsBlocks","json","optionalProps","requiredProps","useMemo","values","forEach","prop","required","push","sort","a","b","name","localeCompare","processPropsJSON","jsxs","Fragment","children","jsx","PropsBlock","header","length","className","map","type","raw","defaultValue","value","dangerouslySetInnerHTML","__html","description","replaceAll","ComponentProps","section","Box","align","direction","gap","wrap","Header","ExternalLink","href","repository","url","replace","filePath"],"mappings":"sGACA,SAASA,GAA0BC,MACjCA,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,oNACHC,SAAU,YACKV,EAAAA,cAAoB,OAAQ,CAC3CQ,SAAU,UACVC,EAAG,qKACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,yDCtB3C,SAASkB,GAAYC,KAAEA,IAC5B,MAAMC,cAAEA,EAAAC,cAAeA,GAAkBC,EAAAA,QACvC,ICJG,SAA0BH,GAC/B,MAAMC,EAA4B,GAC5BC,EAA4B,GAalC,OAXAf,OAAOiB,OAAOJ,EAAKhB,OAAOqB,QAASC,IAC7BA,EAAKC,SACPL,EAAcM,KAAKF,GAEnBL,EAAcO,KAAKF,KAIvBL,EAAcQ,KAAK,CAACC,EAAGC,IAAMD,EAAEE,KAAKC,cAAcF,EAAEC,OACpDV,EAAcO,KAAK,CAACC,EAAGC,IAAMD,EAAEE,KAAKC,cAAcF,EAAEC,OAE7C,CAAEX,gBAAeC,gBAC1B,CDZUY,CAAiBd,GACvB,CAACA,IAGH,OACEe,EAAAA,KAAAC,WAAA,CACEC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAWC,OAAO,iBAAiBpC,MAAOkB,IAC3CgB,EAAAA,IAACC,EAAA,CAAWC,OAAO,iBAAiBpC,MAAOiB,MAGjD,CAEO,SAASkB,GAAWC,OACzBA,EAAApC,MACAA,IAKA,OAAqB,IAAjBA,EAAMqC,OACD,YAIN,MAAA,CACCJ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAII,UAAU,yBAA0BL,SAAAG,UACxC,KAAA,CACEH,SAAAjC,EAAMuC,IAAKjB,UACT,MAAA,CACCW,SAAA,CAAAC,EAAAA,IAAC,MAAGI,UAAU,2BACZL,SAAAF,EAAAA,KAAC,OAAA,CAAKO,UAAU,eACdL,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAKI,UAAU,mBAAoBL,SAAAX,EAAKM,OACxCN,EAAKC,UAAY,IAAI,IAAE,IACvB,QAASD,EAAKkB,KAAOlB,EAAKkB,KAAKC,IAAMnB,EAAKkB,KAAKZ,KAC/CN,EAAKoB,cACJX,EAAAA,KAAAC,EAAAA,SAAA,CACGC,SAAA,CAAA,YACA,OAAA,CAAKK,UAAU,aACbL,SAAAX,EAAKoB,aAAaC,gBAM7BT,EAAAA,IAAC,KAAA,CACCI,UAAU,6BACVM,wBAAyB,CACvBC,OAAQvB,EAAKwB,YACVC,WAAW,OAAQ,WACnBA,WAAW,OAAQ,cACnBA,WAAW,aAAc,wBAtBxBzB,EAAKM,WA8BzB,CExDO,SAASoB,GAAehC,KAC7BA,EAAAiC,QACAA,IAKA,OACElB,EAAAA,KAAAC,WAAA,CACEC,SAAA,CAAAF,EAAAA,KAACmB,EAAA,CAAIC,MAAM,SAASC,UAAU,MAAMC,IAAK,EAAGC,MAAI,EAC9CrB,SAAA,GAAAC,IAACqB,EAAA,CAAON,UAAkBnD,MAAM,oBAChCoC,EAAAA,IAACsB,EAAA,CACClB,UAAU,4CACVmB,KAAM,GAAGC,EAAWC,IAAIC,QAAQ,OAAQ,mBAAmB5C,EAAK6C,WAEhE5B,SAAAC,EAAAA,IAACrC,EAAA,CAA0ByC,UAAU,0CAGzCJ,MAACnB,GAAYC,WAGnB","x_google_ignoreList":[0]}
1	+ {"version":3,"file":"ComponentProps-CnDy_aV8.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowTopRightOnSquareIcon.js","../../src/components/props/PropsBlocks.tsx","../../src/utils/processPropsJSON.ts","../../src/components/props/ComponentProps.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowTopRightOnSquareIcon({\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: \"M4.25 5.5a.75.75 0 0 0-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 0 0 .75-.75v-4a.75.75 0 0 1 1.5 0v4A2.25 2.25 0 0 1 12.75 17h-8.5A2.25 2.25 0 0 1 2 14.75v-8.5A2.25 2.25 0 0 1 4.25 4h5a.75.75 0 0 1 0 1.5h-5Z\",\n clipRule: \"evenodd\"\n }), /#__PURE__/React.createElement(\"path\", {\n fillRule: \"evenodd\",\n d: \"M6.194 12.753a.75.75 0 0 0 1.06.053L16.5 4.44v2.81a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.553l-9.056 8.194a.75.75 0 0 0-.053 1.06Z\",\n clipRule: \"evenodd\"\n }));\n}\nconst ForwardRef = /#__PURE__/ React.forwardRef(ArrowTopRightOnSquareIcon);\nexport default ForwardRef;","import { useMemo } from \"react\";\nimport type { ComponentDoc, PropItem } from \"react-docgen-typescript\";\nimport { processPropsJSON } from \"../../utils/processPropsJSON\";\n\nexport function PropsBlocks({ json }: { json: ComponentDoc }) {\n const { optionalProps, requiredProps } = useMemo(\n () => processPropsJSON(json),\n [json]\n );\n\n return (\n <>\n <PropsBlock header=\"Required props\" props={requiredProps} />\n <PropsBlock header=\"Optional props\" props={optionalProps} />\n </>\n );\n}\n\nexport function PropsBlock({\n header,\n props\n}: {\n header: string;\n props: PropItem[];\n}) {\n if (props.length === 0) {\n return null;\n }\n\n return (\n <div>\n <div className=\"text-lg font-bold mt-2\">{header}</div>\n <dl>\n {props.map((prop) => (\n <div key={prop.name}>\n <dt className=\"mt-2 pl-4 indent-[-1rem]\">\n <code className=\"tok-operator\">\n <span className=\"tok-propertyName\">{prop.name}</span>\n {prop.required \|\| \"?\"}:{\" \"}\n {\"raw\" in prop.type ? prop.type.raw : prop.type.name}\n {prop.defaultValue && (\n <>\n {\" = \"}\n <span className=\"text-white\">\n {prop.defaultValue.value}\n </span>\n </>\n )}\n </code>\n </dt>\n <dd\n className=\"ml-4 [&_code]:text-sky-300\"\n dangerouslySetInnerHTML={{\n __html: prop.description\n .replaceAll(\"\\n- \", \"<br/>• \")\n .replaceAll(\"\\n\\n\", \"<br/><br/>\")\n .replaceAll(/`([^`]+)`/g, \"<code>$1</code>\")\n }}\n ></dd>\n </div>\n ))}\n </dl>\n </div>\n );\n}\n","import type { ComponentDoc, PropItem } from \"react-docgen-typescript\";\n\nexport function processPropsJSON(json: ComponentDoc) {\n const optionalProps: PropItem[] = [];\n const requiredProps: PropItem[] = [];\n\n Object.values(json.props).forEach((prop) => {\n if (prop.required) {\n requiredProps.push(prop);\n } else {\n optionalProps.push(prop);\n }\n });\n\n optionalProps.sort((a, b) => a.name.localeCompare(b.name));\n requiredProps.sort((a, b) => a.name.localeCompare(b.name));\n\n return { optionalProps, requiredProps };\n}\n","import { ArrowTopRightOnSquareIcon } from \"@heroicons/react/20/solid\";\nimport type { ComponentDoc } from \"react-docgen-typescript\";\nimport { repository } from \"../../../package.json\";\nimport { Box } from \"../Box\";\nimport { ExternalLink } from \"../ExternalLink\";\nimport { Header } from \"../Header\";\nimport { PropsBlocks } from \"./PropsBlocks\";\n\nexport function ComponentProps({\n json,\n section\n}: {\n json: ComponentDoc;\n section: string;\n}) {\n return (\n <>\n <Box align=\"center\" direction=\"row\" gap={2} wrap>\n <Header section={section} title=\"Component props\" />\n <ExternalLink\n className=\"text-sm text-emerald-300 hover:text-white\"\n href={`${repository.url.replace(\".git\", \"\")}/blob/master/${json.filePath}`}\n >\n <ArrowTopRightOnSquareIcon className=\"inline-block size-4 fill-current\" />\n </ExternalLink>\n </Box>\n <PropsBlocks json={json} />\n </>\n );\n}\n"],"names":["ArrowTopRightOnSquareIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","PropsBlocks","json","optionalProps","requiredProps","useMemo","values","forEach","prop","required","push","sort","a","b","name","localeCompare","processPropsJSON","jsxs","Fragment","children","jsx","PropsBlock","header","length","className","map","type","raw","defaultValue","value","dangerouslySetInnerHTML","__html","description","replaceAll","ComponentProps","section","Box","align","direction","gap","wrap","Header","ExternalLink","href","repository","url","replace","filePath"],"mappings":"sGACA,SAASA,GAA0BC,MACjCA,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,oNACHC,SAAU,YACKV,EAAAA,cAAoB,OAAQ,CAC3CQ,SAAU,UACVC,EAAG,qKACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,yDCtB3C,SAASkB,GAAYC,KAAEA,IAC5B,MAAMC,cAAEA,EAAAC,cAAeA,GAAkBC,EAAAA,QACvC,ICJG,SAA0BH,GAC/B,MAAMC,EAA4B,GAC5BC,EAA4B,GAalC,OAXAf,OAAOiB,OAAOJ,EAAKhB,OAAOqB,QAASC,IAC7BA,EAAKC,SACPL,EAAcM,KAAKF,GAEnBL,EAAcO,KAAKF,KAIvBL,EAAcQ,KAAK,CAACC,EAAGC,IAAMD,EAAEE,KAAKC,cAAcF,EAAEC,OACpDV,EAAcO,KAAK,CAACC,EAAGC,IAAMD,EAAEE,KAAKC,cAAcF,EAAEC,OAE7C,CAAEX,gBAAeC,gBAC1B,CDZUY,CAAiBd,GACvB,CAACA,IAGH,OACEe,EAAAA,KAAAC,WAAA,CACEC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAWC,OAAO,iBAAiBpC,MAAOkB,IAC3CgB,EAAAA,IAACC,EAAA,CAAWC,OAAO,iBAAiBpC,MAAOiB,MAGjD,CAEO,SAASkB,GAAWC,OACzBA,EAAApC,MACAA,IAKA,OAAqB,IAAjBA,EAAMqC,OACD,YAIN,MAAA,CACCJ,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAII,UAAU,yBAA0BL,SAAAG,UACxC,KAAA,CACEH,SAAAjC,EAAMuC,IAAKjB,UACT,MAAA,CACCW,SAAA,CAAAC,EAAAA,IAAC,MAAGI,UAAU,2BACZL,SAAAF,EAAAA,KAAC,OAAA,CAAKO,UAAU,eACdL,SAAA,CAAAC,EAAAA,IAAC,OAAA,CAAKI,UAAU,mBAAoBL,SAAAX,EAAKM,OACxCN,EAAKC,UAAY,IAAI,IAAE,IACvB,QAASD,EAAKkB,KAAOlB,EAAKkB,KAAKC,IAAMnB,EAAKkB,KAAKZ,KAC/CN,EAAKoB,cACJX,EAAAA,KAAAC,EAAAA,SAAA,CACGC,SAAA,CAAA,YACA,OAAA,CAAKK,UAAU,aACbL,SAAAX,EAAKoB,aAAaC,gBAM7BT,EAAAA,IAAC,KAAA,CACCI,UAAU,6BACVM,wBAAyB,CACvBC,OAAQvB,EAAKwB,YACVC,WAAW,OAAQ,WACnBA,WAAW,OAAQ,cACnBA,WAAW,aAAc,wBAtBxBzB,EAAKM,WA8BzB,CExDO,SAASoB,GAAehC,KAC7BA,EAAAiC,QACAA,IAKA,OACElB,EAAAA,KAAAC,WAAA,CACEC,SAAA,CAAAF,EAAAA,KAACmB,EAAA,CAAIC,MAAM,SAASC,UAAU,MAAMC,IAAK,EAAGC,MAAI,EAC9CrB,SAAA,GAAAC,IAACqB,EAAA,CAAON,UAAkBnD,MAAM,oBAChCoC,EAAAA,IAACsB,EAAA,CACClB,UAAU,4CACVmB,KAAM,GAAGC,EAAWC,IAAIC,QAAQ,OAAQ,mBAAmB5C,EAAK6C,WAEhE5B,SAAAC,EAAAA,IAACrC,EAAA,CAA0ByC,UAAU,0CAGzCJ,MAACnB,GAAYC,WAGnB","x_google_ignoreList":[0]}

package/docs/assets/ContinueLink-BDXFlJ2t.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{j as t,L as i}from"./index-Cnm6lMUF.js";function n({title:n,to:o}){return t.jsxs("div",{children:["Continue to ",t.jsx(i,{to:o,children:n}),"…"]})}export{n as C};
2	+ //# sourceMappingURL=ContinueLink-BDXFlJ2t.js.map

package/docs/assets/{ContinueLink-Mq4XOwMu.js.map → ContinueLink-BDXFlJ2t.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContinueLink-~~Mq4XOwMu~~.js","sources":["../../src/components/ContinueLink.tsx"],"sourcesContent":["import type { Path } from \"../routes\";\nimport { Link } from \"./Link\";\n\nexport function ContinueLink({ title, to }: { title: string; to: Path }) {\n return (\n <div>\n Continue to <Link to={to}>{title}</Link>…\n </div>\n );\n}\n"],"names":["ContinueLink","title","to","children","jsx","Link"],"mappings":"+CAGO,SAASA,GAAaC,MAAEA,EAAAC,GAAOA,IACpC,cACG,MAAA,CAAIC,SAAA,CAAA,iBACSC,IAACC,EAAA,CAAKH,KAASC,SAAAF,IAAa,MAG9C"}
1	+ {"version":3,"file":"ContinueLink-BDXFlJ2t.js","sources":["../../src/components/ContinueLink.tsx"],"sourcesContent":["import type { Path } from \"../routes\";\nimport { Link } from \"./Link\";\n\nexport function ContinueLink({ title, to }: { title: string; to: Path }) {\n return (\n <div>\n Continue to <Link to={to}>{title}</Link>…\n </div>\n );\n}\n"],"names":["ContinueLink","title","to","children","jsx","Link"],"mappings":"+CAGO,SAASA,GAAaC,MAAEA,EAAAC,GAAOA,IACpC,cACG,MAAA,CAAIC,SAAA,CAAA,iBACSC,IAACC,EAAA,CAAKH,KAASC,SAAAF,IAAa,MAG9C"}

package/docs/assets/{FixedRowHeightsRoute-DXFNDmnz.js → FixedRowHeightsRoute-CCpmgQDh.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as a,B as n,C as s,E as e}from"./index-3R9tv3eW.js";import{B as t}from"./arePropsEqual-MBk0PiJi.js";import{C as o}from"./Code-BJ6U_DpT.js";import{C as i}from"./ContinueLink-Mq4XOwMu.js";import{H as p}from"./Header-DM8OHOd_.js";import{L as l}from"./List-B9HC1vRM.js";const r=JSON.parse('["Aaden","Aarav","Aaron","Abdiel","Abdullah","Abel","Abraham","Abram","Ace","Achilles","Adam","Adan","Aden","Adonis","Adrian","Adriel","Adrien","Agustin","Ahmad","Ahmed","Aidan","Aiden","Alan","Alaric","Albert","Alberto","Alden","Aldo","Alec","Alejandro","Alessandro","Alex","Alexander","Alexis","Alexzander","Alfonso","Alfred","Alfredo","Ali","Alijah","Alistair","Allan","Allen","Alonso","Alonzo","Alvaro","Alvin","Amari","Ameer","Amir","Amos","Anakin","Anders","Anderson","Andre","Andres","Andrew","Andy","Angel","Angelo","Anson","Anthony","Anton","Antonio","Apollo","Archer","Ares","Ari","Arian","Ariel","Arjun","Arlo","Armando","Armani","Aron","Arthur","Arturo","Aryan","Asa","Asher","Ashton","Atlas","Atticus","August","Augustine","Augustus","Austin","Avery","Avi","Axel","Axl","Axton","Ayaan","Ayan","Ayden","Aydin","Azariah","Barrett","Baylor","Beau","Beckett","Beckham","Ben","Benjamin","Bennett","Benson","Bentlee","Bentley","Benton","Billy","Bishop","Bjorn","Blaine","Blaise","Blake","Blaze","Bo","Bobby","Bodhi","Bodie","Boone","Boston","Bowen","Braden","Bradley","Brady","Brandon","Branson","Brantley","Braxton","Brayan","Brayden","Braydon","Braylen","Braylon","Brayson","Brecken","Brendan","Brenden","Brennan","Brentley","Brett","Brian","Briar","Bridger","Briggs","Brixton","Brock","Brodie","Brody","Bronson","Brooks","Bruce","Bruno","Bryan","Bryant","Bryce","Brycen","Brysen","Bryson","Byron","Cade","Caden","Caiden","Cain","Cairo","Caleb","Callan","Callen","Callum","Calvin","Camden","Camdyn","Cameron","Camilo","Camron","Canaan","Cannon","Carl","Carlos","Carmelo","Carson","Carter","Case","Casen","Casey","Cash","Cason","Caspian","Cassius","Castiel","Cayden","Cayson","Cedric","Cesar","Chad","Chaim","Chance","Chandler","Channing","Charles","Charlie","Chase","Chris","Christian","Christopher","Clark","Clay","Clayton","Clyde","Cody","Coen","Cohen","Colby","Cole","Coleman","Colin","Collin","Colson","Colt","Colten","Colton","Conner","Connor","Conor","Conrad","Cooper","Corbin","Corey","Cory","Craig","Crew","Cristian","Cristiano","Crosby","Cruz","Cullen","Curtis","Cyrus","Dakota","Dallas","Dalton","Damari","Damian","Damien","Damon","Dane","Dangelo","Daniel","Danny","Dante","Darian","Dariel","Dario","Darius","Darrell","Darren","Darwin","Dash","Davian","David","Davion","Davis","Dawson","Dax","Daxton","Dayton","Deacon","Dean","Deandre","Decker","Declan","Demetrius","Dennis","Denver","Derek","Derrick","Desmond","Devin","Devon","Dexter","Diego","Dilan","Dillon","Dimitri","Dominic","Dominick","Dominik","Dominique","Donald","Donovan","Dorian","Douglas","Drake","Draven","Drew","Duke","Duncan","Dustin","Dwayne","Dylan","Eason","Easton","Eddie","Eden","Edgar","Edison","Eduardo","Edward","Edwin","Eli","Elian","Elias","Eliezer","Elijah","Eliseo","Elisha","Elliot","Elliott","Ellis","Emanuel","Emerson","Emery","Emiliano","Emilio","Emmanuel","Emmet","Emmett","Emmitt","Emory","Enoch","Enrique","Enzo","Ephraim","Eric","Erick","Erik","Ernest","Ernesto","Esteban","Ethan","Eugene","Evan","Everett","Ezekiel","Ezequiel","Ezra","Fabian","Felipe","Felix","Fernando","Finley","Finn","Finnegan","Finnley","Fisher","Fletcher","Flynn","Ford","Forrest","Foster","Fox","Francis","Francisco","Franco","Frank","Frankie","Franklin","Frederick","Gabriel","Gael","Gage","Gannon","Garrett","Gary","Gatlin","Gavin","George","Gerald","Gerardo","Giancarlo","Gianluca","Gianni","Gibson","Gideon","Giovanni","Gordon","Grady","Graham","Grant","Graysen","Grayson","Gregory","Grey","Greysen","Greyson","Griffin","Guillermo","Gunnar","Gunner","Gustavo","Hamza","Hank","Harlan","Harley","Harold","Harper","Harrison","Harry","Harvey","Hassan","Hayden","Hayes","Heath","Hector","Hendrix","Henrik","Henry","Hezekiah","Holden","Houston","Howard","Hudson","Hugh","Hugo","Hunter","Huxley","Ian","Ibrahim","Ignacio","Iker","Ira","Isaac","Isaiah","Isaias","Ishaan","Ismael","Israel","Issac","Ivan","Izaiah","Jabari","Jace","Jack","Jackson","Jacob","Jacoby","Jad","Jaden","Jadiel","Jagger","Jaiden","Jaime","Jairo","Jake","Jakob","Jalen","Jamal","Jamari","James","Jameson","Jamie","Jamir","Jamison","Jared","Jase","Jasiah","Jason","Jasper","Javier","Javion","Javon","Jax","Jaxen","Jaxon","Jaxson","Jaxton","Jaxx","Jaxxon","Jay","Jayce","Jayceon","Jayden","Jaylen","Jayson","Jaziel","Jedidiah","Jefferson","Jeffery","Jeffrey","Jensen","Jeremiah","Jeremias","Jeremy","Jermaine","Jerome","Jerry","Jesse","Jessie","Jesus","Jett","Jimmy","Joaquin","Joe","Joel","Joey","Johan","John","Johnathan","Johnny","Jon","Jonah","Jonas","Jonathan","Jordan","Jordy","Jorge","Jose","Joseph","Joshua","Josiah","Josue","Jovanni","Joziah","Juan","Judah","Jude","Judson","Juelz","Julian","Julien","Julio","Julius","Junior","Justice","Justin","Kace","Kade","Kaden","Kai","Kaiden","Kairo","Kaiser","Kaison","Kaleb","Kalel","Kamari","Kamden","Kameron","Kamryn","Kane","Kannon","Kareem","Karson","Karter","Kase","Kasen","Kash","Kashton","Kason","Kayden","Kaysen","Kayson","Keagan","Keanu","Keaton","Keegan","Keenan","Keith","Kellan","Kellen","Kelvin","Kendall","Kendrick","Kenneth","Kenny","Kevin","Khalid","Khalil","Khari","Kian","Kieran","Killian","King","Kingsley","Kingston","Knox","Koa","Kobe","Koda","Kody","Kohen","Kole","Kolten","Kolton","Konnor","Korbin","Kristian","Kristopher","Kye","Kylan","Kyle","Kylen","Kyler","Kyng","Kyree","Kyrie","Kyson","Lachlan","Lamar","Lance","Landen","Landon","Landry","Landyn","Lane","Langston","Larry","Lawrence","Lawson","Layne","Layton","Leandro","Ledger","Lee","Legend","Leif","Leighton","Leland","Lennon","Lennox","Leo","Leon","Leonard","Leonardo","Leonel","Leonidas","Leroy","Levi","Lewis","Liam","Lincoln","Lionel","Lochlan","Logan","London","Lorenzo","Louie","Louis","Luca","Lucas","Lucca","Lucian","Luciano","Luis","Luka","Lukas","Luke","Lyle","Lyric","Mack","Madden","Maddox","Maddux","Magnus","Maison","Major","Makai","Malachi","Malakai","Malcolm","Malik","Manuel","Marc","Marcel","Marcelo","Marco","Marcos","Marcus","Mario","Mark","Markus","Marley","Marlon","Marshall","Martin","Marvin","Mason","Mateo","Mathew","Mathias","Matias","Matteo","Matthew","Matthias","Maurice","Mauricio","Maverick","Max","Maxim","Maximilian","Maximiliano","Maximo","Maximus","Maxton","Maxwell","Mayson","Mekhi","Melvin","Memphis","Merrick","Messiah","Micah","Michael","Micheal","Miguel","Mike","Milan","Miles","Miller","Milo","Misael","Mitchell","Mohamed","Mohammad","Mohammed","Moises","Morgan","Moses","Moshe","Muhammad","Musa","Mustafa","Myles","Nash","Nasir","Nathan","Nathanael","Nathaniel","Nehemiah","Neil","Nelson","Nicholas","Nickolas","Nico","Nicolas","Niko","Nikolai","Nikolas","Nixon","Noah","Noe","Noel","Nolan","Nova","Oakley","Odin","Oliver","Omar","Omari","Orion","Orlando","Oscar","Otis","Otto","Owen","Pablo","Parker","Patrick","Paul","Paxton","Payton","Pedro","Peter","Peyton","Philip","Phillip","Phoenix","Pierce","Porter","Preston","Prince","Princeton","Quentin","Quincy","Quinn","Quinton","Rafael","Raiden","Ramiro","Ramon","Randall","Randy","Raphael","Rashad","Raul","Ray","Rayan","Rayden","Raylan","Raymond","Reagan","Reece","Reed","Reese","Reginald","Reid","Reign","Remington","Remy","Rene","Reuben","Rex","Rey","Reyansh","Rhett","Rhys","Ricardo","Richard","Ricky","Ridge","Riley","River","Robert","Roberto","Rocco","Rocky","Rodney","Rodrigo","Rogelio","Roger","Rohan","Roland","Roman","Romeo","Ronald","Ronan","Ronin","Ronnie","Rory","Rowan","Rowen","Roy","Royal","Royce","Ruben","Rudy","Russell","Ryan","Ryder","Ryker","Rylan","Ryland","Sage","Salvador","Salvatore","Sam","Samir","Samson","Samuel","Santana","Santiago","Santino","Santos","Saul","Sawyer","Scott","Seamus","Sean","Sebastian","Sergio","Seth","Shane","Shaun","Shawn","Shepard","Shepherd","Shiloh","Shmuel","Silas","Simeon","Simon","Sincere","Skylar","Skyler","Solomon","Sonny","Soren","Spencer","Stanley","Stefan","Stephen","Sterling","Stetson","Steven","Sullivan","Sutton","Sylas","Tadeo","Talon","Tanner","Tate","Tatum","Taylor","Terrance","Terrell","Terrence","Terry","Thaddeus","Thatcher","Theo","Theodore","Thiago","Thomas","Timothy","Titan","Titus","Tobias","Toby","Tomas","Tommy","Tony","Trace","Travis","Trent","Trenton","Trevor","Trey","Tripp","Tristan","Tristen","Tristian","Troy","Tucker","Ty","Tyler","Tyson","Ulises","Uriah","Uriel","Valentin","Valentino","Van","Vance","Vaughn","Vicente","Victor","Vihaan","Vincent","Vincenzo","Vivaan","Wade","Walker","Walter","Warren","Waylon","Wayne","Wells","Wesley","Wesson","Westin","Westley","Weston","Wilder","Will","William","Willie","Wilson","Winston","Wyatt","Xander","Xavier","Xzavier","Yadiel","Yahir","Yahya","Yehuda","Yisroel","Yosef","Yousef","Yusuf","Zachariah","Zachary","Zackary","Zahir","Zaid","Zaiden","Zain","Zaire","Zander","Zane","Zavier","Zayd","Zayden","Zayn","Zayne","Zechariah","Zeke","Zion","Zyaire"]'),c='<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">List</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-punctuation">{</span><span class=""> </span><span class="tok-propertyName">names</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</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">return</span><span class=""> </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-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">25</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class=""> </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-punctuation">/&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',d='<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-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</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">RowComponent</span><span class="tok-punctuation">(</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-propertyName">index</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-propertyName">names</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-propertyName">style</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><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</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-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</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="">&#62;</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">return</span><span class=""> </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-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function h({index:n,names:s,style:e}){return a.jsxs("div",{className:"flex items-center justify-between",style:e,children:[s[n],a.jsx("div",{className:"text-slate-500 text-xs",children:`${n+1} of ${s.length}`})]})}function u({names:n}){return a.jsx(l,{rowComponent:h,rowCount:n.length,rowHeight:25,rowProps:{names:n}})}function m(){return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(p,{section:"Lists",title:"Fixed row heights"}),a.jsx("div",{children:"The simplest type of list to render is one with fixed row heights."}),a.jsx(t,{className:"h-50","data-focus-within":"bold",children:a.jsx(u,{names:r})}),a.jsxs("div",{children:["To render this type of list, you need to specify how many rows it contains (",a.jsx("code",{children:"rowCount"}),"), which component should render rows (",a.jsx("code",{children:"rowComponent"}),"), and the height of each row (",a.jsx("code",{children:"rowHeight"}),"):"]}),a.jsx(o,{html:c}),a.jsxs("div",{children:["The ",a.jsx("code",{children:"rowProps"})," object can also be used to share between components. Values passed in ",a.jsx("code",{children:"rowProps"})," will also be passed as props to the row component:"]}),a.jsx(o,{html:d}),a.jsx(s,{intent:"warning",children:a.jsxs(n,{direction:"column",gap:4,children:[a.jsxs("div",{children:["Lists require vertical space to render rows. Typically the"," ",a.jsx(e,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),a.jsxs("div",{children:["If an explicit height is specified (in pixels) using the"," ",a.jsx("code",{children:"style"})," prop, ",a.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),a.jsx(i,{to:"/list/variable-row-height",title:"variable row heights"})]})}export{m as default};
-//# sourceMappingURL=FixedRowHeightsRoute-DXFNDmnz.js.map
+import{j as a,B as n,C as s,E as e}from"./index-Cnm6lMUF.js";import{B as t}from"./arePropsEqual-CaQN03VG.js";import{C as o}from"./Code-r2plEB3N.js";import{C as i}from"./ContinueLink-BDXFlJ2t.js";import{H as p}from"./Header-CWpEkQSA.js";import{L as l}from"./List-CB_lBMmJ.js";const r=JSON.parse('["Aaden","Aarav","Aaron","Abdiel","Abdullah","Abel","Abraham","Abram","Ace","Achilles","Adam","Adan","Aden","Adonis","Adrian","Adriel","Adrien","Agustin","Ahmad","Ahmed","Aidan","Aiden","Alan","Alaric","Albert","Alberto","Alden","Aldo","Alec","Alejandro","Alessandro","Alex","Alexander","Alexis","Alexzander","Alfonso","Alfred","Alfredo","Ali","Alijah","Alistair","Allan","Allen","Alonso","Alonzo","Alvaro","Alvin","Amari","Ameer","Amir","Amos","Anakin","Anders","Anderson","Andre","Andres","Andrew","Andy","Angel","Angelo","Anson","Anthony","Anton","Antonio","Apollo","Archer","Ares","Ari","Arian","Ariel","Arjun","Arlo","Armando","Armani","Aron","Arthur","Arturo","Aryan","Asa","Asher","Ashton","Atlas","Atticus","August","Augustine","Augustus","Austin","Avery","Avi","Axel","Axl","Axton","Ayaan","Ayan","Ayden","Aydin","Azariah","Barrett","Baylor","Beau","Beckett","Beckham","Ben","Benjamin","Bennett","Benson","Bentlee","Bentley","Benton","Billy","Bishop","Bjorn","Blaine","Blaise","Blake","Blaze","Bo","Bobby","Bodhi","Bodie","Boone","Boston","Bowen","Braden","Bradley","Brady","Brandon","Branson","Brantley","Braxton","Brayan","Brayden","Braydon","Braylen","Braylon","Brayson","Brecken","Brendan","Brenden","Brennan","Brentley","Brett","Brian","Briar","Bridger","Briggs","Brixton","Brock","Brodie","Brody","Bronson","Brooks","Bruce","Bruno","Bryan","Bryant","Bryce","Brycen","Brysen","Bryson","Byron","Cade","Caden","Caiden","Cain","Cairo","Caleb","Callan","Callen","Callum","Calvin","Camden","Camdyn","Cameron","Camilo","Camron","Canaan","Cannon","Carl","Carlos","Carmelo","Carson","Carter","Case","Casen","Casey","Cash","Cason","Caspian","Cassius","Castiel","Cayden","Cayson","Cedric","Cesar","Chad","Chaim","Chance","Chandler","Channing","Charles","Charlie","Chase","Chris","Christian","Christopher","Clark","Clay","Clayton","Clyde","Cody","Coen","Cohen","Colby","Cole","Coleman","Colin","Collin","Colson","Colt","Colten","Colton","Conner","Connor","Conor","Conrad","Cooper","Corbin","Corey","Cory","Craig","Crew","Cristian","Cristiano","Crosby","Cruz","Cullen","Curtis","Cyrus","Dakota","Dallas","Dalton","Damari","Damian","Damien","Damon","Dane","Dangelo","Daniel","Danny","Dante","Darian","Dariel","Dario","Darius","Darrell","Darren","Darwin","Dash","Davian","David","Davion","Davis","Dawson","Dax","Daxton","Dayton","Deacon","Dean","Deandre","Decker","Declan","Demetrius","Dennis","Denver","Derek","Derrick","Desmond","Devin","Devon","Dexter","Diego","Dilan","Dillon","Dimitri","Dominic","Dominick","Dominik","Dominique","Donald","Donovan","Dorian","Douglas","Drake","Draven","Drew","Duke","Duncan","Dustin","Dwayne","Dylan","Eason","Easton","Eddie","Eden","Edgar","Edison","Eduardo","Edward","Edwin","Eli","Elian","Elias","Eliezer","Elijah","Eliseo","Elisha","Elliot","Elliott","Ellis","Emanuel","Emerson","Emery","Emiliano","Emilio","Emmanuel","Emmet","Emmett","Emmitt","Emory","Enoch","Enrique","Enzo","Ephraim","Eric","Erick","Erik","Ernest","Ernesto","Esteban","Ethan","Eugene","Evan","Everett","Ezekiel","Ezequiel","Ezra","Fabian","Felipe","Felix","Fernando","Finley","Finn","Finnegan","Finnley","Fisher","Fletcher","Flynn","Ford","Forrest","Foster","Fox","Francis","Francisco","Franco","Frank","Frankie","Franklin","Frederick","Gabriel","Gael","Gage","Gannon","Garrett","Gary","Gatlin","Gavin","George","Gerald","Gerardo","Giancarlo","Gianluca","Gianni","Gibson","Gideon","Giovanni","Gordon","Grady","Graham","Grant","Graysen","Grayson","Gregory","Grey","Greysen","Greyson","Griffin","Guillermo","Gunnar","Gunner","Gustavo","Hamza","Hank","Harlan","Harley","Harold","Harper","Harrison","Harry","Harvey","Hassan","Hayden","Hayes","Heath","Hector","Hendrix","Henrik","Henry","Hezekiah","Holden","Houston","Howard","Hudson","Hugh","Hugo","Hunter","Huxley","Ian","Ibrahim","Ignacio","Iker","Ira","Isaac","Isaiah","Isaias","Ishaan","Ismael","Israel","Issac","Ivan","Izaiah","Jabari","Jace","Jack","Jackson","Jacob","Jacoby","Jad","Jaden","Jadiel","Jagger","Jaiden","Jaime","Jairo","Jake","Jakob","Jalen","Jamal","Jamari","James","Jameson","Jamie","Jamir","Jamison","Jared","Jase","Jasiah","Jason","Jasper","Javier","Javion","Javon","Jax","Jaxen","Jaxon","Jaxson","Jaxton","Jaxx","Jaxxon","Jay","Jayce","Jayceon","Jayden","Jaylen","Jayson","Jaziel","Jedidiah","Jefferson","Jeffery","Jeffrey","Jensen","Jeremiah","Jeremias","Jeremy","Jermaine","Jerome","Jerry","Jesse","Jessie","Jesus","Jett","Jimmy","Joaquin","Joe","Joel","Joey","Johan","John","Johnathan","Johnny","Jon","Jonah","Jonas","Jonathan","Jordan","Jordy","Jorge","Jose","Joseph","Joshua","Josiah","Josue","Jovanni","Joziah","Juan","Judah","Jude","Judson","Juelz","Julian","Julien","Julio","Julius","Junior","Justice","Justin","Kace","Kade","Kaden","Kai","Kaiden","Kairo","Kaiser","Kaison","Kaleb","Kalel","Kamari","Kamden","Kameron","Kamryn","Kane","Kannon","Kareem","Karson","Karter","Kase","Kasen","Kash","Kashton","Kason","Kayden","Kaysen","Kayson","Keagan","Keanu","Keaton","Keegan","Keenan","Keith","Kellan","Kellen","Kelvin","Kendall","Kendrick","Kenneth","Kenny","Kevin","Khalid","Khalil","Khari","Kian","Kieran","Killian","King","Kingsley","Kingston","Knox","Koa","Kobe","Koda","Kody","Kohen","Kole","Kolten","Kolton","Konnor","Korbin","Kristian","Kristopher","Kye","Kylan","Kyle","Kylen","Kyler","Kyng","Kyree","Kyrie","Kyson","Lachlan","Lamar","Lance","Landen","Landon","Landry","Landyn","Lane","Langston","Larry","Lawrence","Lawson","Layne","Layton","Leandro","Ledger","Lee","Legend","Leif","Leighton","Leland","Lennon","Lennox","Leo","Leon","Leonard","Leonardo","Leonel","Leonidas","Leroy","Levi","Lewis","Liam","Lincoln","Lionel","Lochlan","Logan","London","Lorenzo","Louie","Louis","Luca","Lucas","Lucca","Lucian","Luciano","Luis","Luka","Lukas","Luke","Lyle","Lyric","Mack","Madden","Maddox","Maddux","Magnus","Maison","Major","Makai","Malachi","Malakai","Malcolm","Malik","Manuel","Marc","Marcel","Marcelo","Marco","Marcos","Marcus","Mario","Mark","Markus","Marley","Marlon","Marshall","Martin","Marvin","Mason","Mateo","Mathew","Mathias","Matias","Matteo","Matthew","Matthias","Maurice","Mauricio","Maverick","Max","Maxim","Maximilian","Maximiliano","Maximo","Maximus","Maxton","Maxwell","Mayson","Mekhi","Melvin","Memphis","Merrick","Messiah","Micah","Michael","Micheal","Miguel","Mike","Milan","Miles","Miller","Milo","Misael","Mitchell","Mohamed","Mohammad","Mohammed","Moises","Morgan","Moses","Moshe","Muhammad","Musa","Mustafa","Myles","Nash","Nasir","Nathan","Nathanael","Nathaniel","Nehemiah","Neil","Nelson","Nicholas","Nickolas","Nico","Nicolas","Niko","Nikolai","Nikolas","Nixon","Noah","Noe","Noel","Nolan","Nova","Oakley","Odin","Oliver","Omar","Omari","Orion","Orlando","Oscar","Otis","Otto","Owen","Pablo","Parker","Patrick","Paul","Paxton","Payton","Pedro","Peter","Peyton","Philip","Phillip","Phoenix","Pierce","Porter","Preston","Prince","Princeton","Quentin","Quincy","Quinn","Quinton","Rafael","Raiden","Ramiro","Ramon","Randall","Randy","Raphael","Rashad","Raul","Ray","Rayan","Rayden","Raylan","Raymond","Reagan","Reece","Reed","Reese","Reginald","Reid","Reign","Remington","Remy","Rene","Reuben","Rex","Rey","Reyansh","Rhett","Rhys","Ricardo","Richard","Ricky","Ridge","Riley","River","Robert","Roberto","Rocco","Rocky","Rodney","Rodrigo","Rogelio","Roger","Rohan","Roland","Roman","Romeo","Ronald","Ronan","Ronin","Ronnie","Rory","Rowan","Rowen","Roy","Royal","Royce","Ruben","Rudy","Russell","Ryan","Ryder","Ryker","Rylan","Ryland","Sage","Salvador","Salvatore","Sam","Samir","Samson","Samuel","Santana","Santiago","Santino","Santos","Saul","Sawyer","Scott","Seamus","Sean","Sebastian","Sergio","Seth","Shane","Shaun","Shawn","Shepard","Shepherd","Shiloh","Shmuel","Silas","Simeon","Simon","Sincere","Skylar","Skyler","Solomon","Sonny","Soren","Spencer","Stanley","Stefan","Stephen","Sterling","Stetson","Steven","Sullivan","Sutton","Sylas","Tadeo","Talon","Tanner","Tate","Tatum","Taylor","Terrance","Terrell","Terrence","Terry","Thaddeus","Thatcher","Theo","Theodore","Thiago","Thomas","Timothy","Titan","Titus","Tobias","Toby","Tomas","Tommy","Tony","Trace","Travis","Trent","Trenton","Trevor","Trey","Tripp","Tristan","Tristen","Tristian","Troy","Tucker","Ty","Tyler","Tyson","Ulises","Uriah","Uriel","Valentin","Valentino","Van","Vance","Vaughn","Vicente","Victor","Vihaan","Vincent","Vincenzo","Vivaan","Wade","Walker","Walter","Warren","Waylon","Wayne","Wells","Wesley","Wesson","Westin","Westley","Weston","Wilder","Will","William","Willie","Wilson","Winston","Wyatt","Xander","Xavier","Xzavier","Yadiel","Yahir","Yahya","Yehuda","Yisroel","Yosef","Yousef","Yusuf","Zachariah","Zachary","Zackary","Zahir","Zaid","Zaiden","Zain","Zaire","Zander","Zane","Zavier","Zayd","Zayden","Zayn","Zayne","Zechariah","Zeke","Zion","Zyaire"]'),c='<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">List</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-punctuation">{</span><span class=""> </span><span class="tok-propertyName">names</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</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">return</span><span class=""> </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-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">25</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class=""> </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-punctuation">/&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',d='<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-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</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">RowComponent</span><span class="tok-punctuation">(</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-propertyName">index</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-propertyName">names</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-propertyName">style</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><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</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-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</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="">&#62;</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">return</span><span class=""> </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-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</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=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function h({index:n,names:s,style:e}){return a.jsxs("div",{className:"flex items-center justify-between",style:e,children:[s[n],a.jsx("div",{className:"text-slate-500 text-xs",children:`${n+1} of ${s.length}`})]})}function u({names:n}){return a.jsx(l,{rowComponent:h,rowCount:n.length,rowHeight:25,rowProps:{names:n}})}function m(){return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(p,{section:"Lists",title:"Fixed row heights"}),a.jsx("div",{children:"The simplest type of list to render is one with fixed row heights."}),a.jsx(t,{className:"h-50","data-focus-within":"bold",children:a.jsx(u,{names:r})}),a.jsxs("div",{children:["To render this type of list, you need to specify how many rows it contains (",a.jsx("code",{children:"rowCount"}),"), which component should render rows (",a.jsx("code",{children:"rowComponent"}),"), and the height of each row (",a.jsx("code",{children:"rowHeight"}),"):"]}),a.jsx(o,{html:c}),a.jsxs("div",{children:["The ",a.jsx("code",{children:"rowProps"})," object can also be used to share between components. Values passed in ",a.jsx("code",{children:"rowProps"})," will also be passed as props to the row component:"]}),a.jsx(o,{html:d}),a.jsx(s,{intent:"warning",children:a.jsxs(n,{direction:"column",gap:4,children:[a.jsxs("div",{children:["Lists require vertical space to render rows. Typically the"," ",a.jsx(e,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),a.jsxs("div",{children:["If an explicit height is specified (in pixels) using the"," ",a.jsx("code",{children:"style"})," prop, ",a.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),a.jsx(i,{to:"/list/variable-row-height",title:"variable row heights"})]})}export{m as default};
+//# sourceMappingURL=FixedRowHeightsRoute-CCpmgQDh.js.map

package/docs/assets/{FixedRowHeightsRoute-DXFNDmnz.js.map → FixedRowHeightsRoute-CCpmgQDh.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FixedRowHeightsRoute-~~DXFNDmnz~~.js","sources":["../../src/routes/list/examples/FixedHeightRowComponent.example.tsx","../../src/routes/list/examples/FixedHeightList.example.tsx","../../src/routes/list/FixedRowHeightsRoute.tsx"],"sourcesContent":["import { type RowComponentProps } from \"react-window\";\n\nfunction RowComponent({\n index,\n names,\n style\n}: RowComponentProps<{\n names: string[];\n}>) {\n return (\n <div className=\"flex items-center justify-between\" style={style}>\n {names[index]}\n <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${names.length}`}</div>\n </div>\n );\n}\n\n// <end>\n\nexport { RowComponent };\n","import { RowComponent } from \"./FixedHeightRowComponent.example\";\n\n// <begin>\n\nimport { List } from \"react-window\";\n\nfunction Example({ names }: { names: string[] }) {\n return (\n <List\n rowComponent={RowComponent}\n rowCount={names.length}\n rowHeight={25}\n rowProps={{ names }}\n />\n );\n}\n\n// <end>\n\nexport { Example };\n","import json from \"../../../public/data/names.json\";\nimport FixedHeightListMarkdown from \"../../../public/generated/code-snippets/FixedHeightList.json\";\nimport FixedHeightRowComponentMarkdown from \"../../../public/generated/code-snippets/FixedHeightRowComponent.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/FixedHeightList.example\";\n\nexport default function FixedRowHeightsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"Fixed row heights\" />\n <div>\n The simplest type of list to render is one with fixed row heights.\n </div>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n <Example names={json} />\n </Block>\n <div>\n To render this type of list, you need to specify how many rows it\n contains (<code>rowCount</code>), which component should render rows (\n <code>rowComponent</code>), and the height of each row (\n <code>rowHeight</code>):\n </div>\n <Code html={FixedHeightListMarkdown.html} />\n <div>\n The <code>rowProps</code> object can also be used to share between\n components. Values passed in <code>rowProps</code> will also be passed\n as props to the row component:\n </div>\n <Code html={FixedHeightRowComponentMarkdown.html} />\n <Callout intent=\"warning\">\n <Box direction=\"column\" gap={4}>\n <div>\n Lists require vertical space to render rows. Typically the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n ResizeObserver\n </ExternalLink>{\" \"}\n API is used to determine how much space there is available within\n the parent DOM element.\n </div>\n <div>\n If an explicit height is specified (in pixels) using the{\" \"}\n <code>style</code> prop, <code>ResizeObserver</code> will not be\n used.\n </div>\n </Box>\n </Callout>\n <ContinueLink\n to=\"/list/variable-row-height\"\n title=\"variable row heights\"\n />\n </Box>\n );\n}\n"],"names":["RowComponent","index","names","style","jsxs","className","children","jsx","length","Example","List","rowComponent","rowCount","rowHeight","rowProps","FixedRowHeightsRoute","Box","direction","gap","Header","section","title","Block","json","Code","html","FixedHeightListMarkdown","FixedHeightRowComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"wokBAEA,SAASA,GAAaC,MACpBA,EAAAC,MACAA,EAAAC,MACAA,IAIA,SACEC,KAAC,MAAA,CAAIC,UAAU,oCAAoCF,QAChDG,SAAA,CAAAJ,EAAMD,GACPM,EAAAA,IAAC,MAAA,CAAIF,UAAU,yBAA0BC,SAAA,GAAGL,EAAQ,QAAQC,EAAMM,aAGxE,CCTA,SAASC,GAAQP,MAAEA,IACjB,OACEK,EAAAA,IAACG,EAAA,CACCC,aAAcX,EACdY,SAAUV,EAAMM,OAChBK,UAAW,GACXC,SAAU,CAAEZ,UAGlB,CCHA,SAAwBa,IACtB,OACEX,EAAAA,KAACY,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAC,EAAAA,IAACY,EAAA,CAAOC,QAAQ,QAAQC,MAAM,wBAC9Bd,IAAC,OAAID,SAAA,yEAGLC,IAACe,EAAA,CAAMjB,UAAU,OAAO,oBAAkB,OACxCC,SAAAC,EAAAA,IAACE,EAAA,CAAQP,MAAOqB,aAEjB,MAAA,CAAIjB,SAAA,CAAA,iFAEOC,IAAC,QAAKD,SAAA,aAAe,4CAC/BC,IAAC,QAAKD,SAAA,iBAAmB,oCACzBC,IAAC,QAAKD,SAAA,cAAgB,UAExBC,IAACiB,EAAA,CAAKC,KAAMC,WACX,MAAA,CAAIpB,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,aAAe,4EACIC,IAAC,QAAKD,SAAA,aAAe,2DAGpDC,IAACiB,EAAA,CAAKC,KAAME,IACZpB,EAAAA,IAACqB,GAAQC,OAAO,UACdvB,gBAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,6DACwD,IAC3DC,EAAAA,IAACuB,EAAA,CAAaC,KAAK,kEAAkEzB,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,2DACsD,MACzDC,IAAC,QAAKD,SAAA,UAAY,YAAOC,IAAC,QAAKD,SAAA,mBAAqB,6BAK1DC,EAAAA,IAACyB,EAAA,CACCC,GAAG,4BACHZ,MAAM,2BAId"}
1	+ {"version":3,"file":"FixedRowHeightsRoute-CCpmgQDh.js","sources":["../../src/routes/list/examples/FixedHeightRowComponent.example.tsx","../../src/routes/list/examples/FixedHeightList.example.tsx","../../src/routes/list/FixedRowHeightsRoute.tsx"],"sourcesContent":["import { type RowComponentProps } from \"react-window\";\n\nfunction RowComponent({\n index,\n names,\n style\n}: RowComponentProps<{\n names: string[];\n}>) {\n return (\n <div className=\"flex items-center justify-between\" style={style}>\n {names[index]}\n <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${names.length}`}</div>\n </div>\n );\n}\n\n// <end>\n\nexport { RowComponent };\n","import { RowComponent } from \"./FixedHeightRowComponent.example\";\n\n// <begin>\n\nimport { List } from \"react-window\";\n\nfunction Example({ names }: { names: string[] }) {\n return (\n <List\n rowComponent={RowComponent}\n rowCount={names.length}\n rowHeight={25}\n rowProps={{ names }}\n />\n );\n}\n\n// <end>\n\nexport { Example };\n","import json from \"../../../public/data/names.json\";\nimport FixedHeightListMarkdown from \"../../../public/generated/code-snippets/FixedHeightList.json\";\nimport FixedHeightRowComponentMarkdown from \"../../../public/generated/code-snippets/FixedHeightRowComponent.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/FixedHeightList.example\";\n\nexport default function FixedRowHeightsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Lists\" title=\"Fixed row heights\" />\n <div>\n The simplest type of list to render is one with fixed row heights.\n </div>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n <Example names={json} />\n </Block>\n <div>\n To render this type of list, you need to specify how many rows it\n contains (<code>rowCount</code>), which component should render rows (\n <code>rowComponent</code>), and the height of each row (\n <code>rowHeight</code>):\n </div>\n <Code html={FixedHeightListMarkdown.html} />\n <div>\n The <code>rowProps</code> object can also be used to share between\n components. Values passed in <code>rowProps</code> will also be passed\n as props to the row component:\n </div>\n <Code html={FixedHeightRowComponentMarkdown.html} />\n <Callout intent=\"warning\">\n <Box direction=\"column\" gap={4}>\n <div>\n Lists require vertical space to render rows. Typically the{\" \"}\n <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n ResizeObserver\n </ExternalLink>{\" \"}\n API is used to determine how much space there is available within\n the parent DOM element.\n </div>\n <div>\n If an explicit height is specified (in pixels) using the{\" \"}\n <code>style</code> prop, <code>ResizeObserver</code> will not be\n used.\n </div>\n </Box>\n </Callout>\n <ContinueLink\n to=\"/list/variable-row-height\"\n title=\"variable row heights\"\n />\n </Box>\n );\n}\n"],"names":["RowComponent","index","names","style","jsxs","className","children","jsx","length","Example","List","rowComponent","rowCount","rowHeight","rowProps","FixedRowHeightsRoute","Box","direction","gap","Header","section","title","Block","json","Code","html","FixedHeightListMarkdown","FixedHeightRowComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"wokBAEA,SAASA,GAAaC,MACpBA,EAAAC,MACAA,EAAAC,MACAA,IAIA,SACEC,KAAC,MAAA,CAAIC,UAAU,oCAAoCF,QAChDG,SAAA,CAAAJ,EAAMD,GACPM,EAAAA,IAAC,MAAA,CAAIF,UAAU,yBAA0BC,SAAA,GAAGL,EAAQ,QAAQC,EAAMM,aAGxE,CCTA,SAASC,GAAQP,MAAEA,IACjB,OACEK,EAAAA,IAACG,EAAA,CACCC,aAAcX,EACdY,SAAUV,EAAMM,OAChBK,UAAW,GACXC,SAAU,CAAEZ,UAGlB,CCHA,SAAwBa,IACtB,OACEX,EAAAA,KAACY,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAC,EAAAA,IAACY,EAAA,CAAOC,QAAQ,QAAQC,MAAM,wBAC9Bd,IAAC,OAAID,SAAA,yEAGLC,IAACe,EAAA,CAAMjB,UAAU,OAAO,oBAAkB,OACxCC,SAAAC,EAAAA,IAACE,EAAA,CAAQP,MAAOqB,aAEjB,MAAA,CAAIjB,SAAA,CAAA,iFAEOC,IAAC,QAAKD,SAAA,aAAe,4CAC/BC,IAAC,QAAKD,SAAA,iBAAmB,oCACzBC,IAAC,QAAKD,SAAA,cAAgB,UAExBC,IAACiB,EAAA,CAAKC,KAAMC,WACX,MAAA,CAAIpB,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,aAAe,4EACIC,IAAC,QAAKD,SAAA,aAAe,2DAGpDC,IAACiB,EAAA,CAAKC,KAAME,IACZpB,EAAAA,IAACqB,GAAQC,OAAO,UACdvB,gBAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,6DACwD,IAC3DC,EAAAA,IAACuB,EAAA,CAAaC,KAAK,kEAAkEzB,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,2DACsD,MACzDC,IAAC,QAAKD,SAAA,UAAY,YAAOC,IAAC,QAAKD,SAAA,mBAAqB,6BAK1DC,EAAAA,IAACyB,EAAA,CACCC,GAAG,4BACHZ,MAAM,2BAId"}

package/docs/assets/{GettingStartedRoute-D-bI_IZb.js → GettingStartedRoute-bLneovGd.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as e,B as s,E as i,C as t,L as l}from"./index-3R9tv3eW.js";import{H as r}from"./Header-DM8OHOd_.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(r,{title:"Getting started"}),e.jsxs("div",{children:[e.jsx("strong",{children:"react-window"})," is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from"," ",e.jsx(i,{href:"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en",children:"React DevTools"})," ","to the"," ",e.jsx(i,{href:"https://github.com/replayio/devtools",children:"Replay browser"}),"."]}),e.jsx("div",{className:"text-xl mt-4",children:"Installation"}),e.jsx("div",{children:"Begin by installing the library from NPM:"}),e.jsxs("code",{className:"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!",children:["npm install ",e.jsx("span",{className:"tok-keyword",children:"react-window"})]}),e.jsxs(t,{intent:"primary",children:["TypeScript definitions are included within the published"," ",e.jsx("code",{children:"dist"})," folder and documentation is included within the"," ",e.jsx("code",{children:"docs"})," folder."]}),e.jsx("div",{className:"text-xl mt-4",children:"Learn more"}),e.jsx("div",{children:"This library provides two basic types of components; choose one below to learn more:"}),e.jsxs("ul",{className:"pl-8",children:[e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/list/fixed-row-height",children:"Lists"})," (vertical scrolling)"]}),e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/grid/grid",children:"Grids"})," (horizontal and vertical scrolling)"]})]}),e.jsx("div",{className:"text-xl mt-4",children:"Support"}),"If you like this project there are several ways to support it:",e.jsxs("ul",{className:"pl-8",children:[e.jsx("li",{className:"list-disc",children:e.jsx(i,{href:"https://github.com/sponsors/bvaughn/",children:"Become a GitHub sponsor"})}),e.jsx("li",{className:"list-disc",children:e.jsx(i,{href:"https://opencollective.com/react-window#sponsor",children:"Become an Open Collective sponsor"})}),e.jsxs("li",{className:"list-disc",children:["or"," ",e.jsx(i,{href:"http://givebrian.coffee/",children:"buy me a coffee"})]})]})]})}export{o as default};
-//# sourceMappingURL=GettingStartedRoute-D-bI_IZb.js.map
+import{j as e,B as s,E as i,C as t,L as l}from"./index-Cnm6lMUF.js";import{H as r}from"./Header-CWpEkQSA.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(r,{title:"Getting started"}),e.jsxs("div",{children:[e.jsx("strong",{children:"react-window"})," is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from"," ",e.jsx(i,{href:"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en",children:"React DevTools"})," ","to the"," ",e.jsx(i,{href:"https://github.com/replayio/devtools",children:"Replay browser"}),"."]}),e.jsx("div",{className:"text-xl mt-4",children:"Installation"}),e.jsx("div",{children:"Begin by installing the library from NPM:"}),e.jsxs("code",{className:"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!",children:["npm install ",e.jsx("span",{className:"tok-keyword",children:"react-window"})]}),e.jsxs(t,{intent:"primary",children:["TypeScript definitions are included within the published"," ",e.jsx("code",{children:"dist"})," folder and documentation is included within the"," ",e.jsx("code",{children:"docs"})," folder."]}),e.jsx("div",{className:"text-xl mt-4",children:"Learn more"}),e.jsx("div",{children:"This library provides two basic types of components; choose one below to learn more:"}),e.jsxs("ul",{className:"pl-8",children:[e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/list/fixed-row-height",children:"Lists"})," (vertical scrolling)"]}),e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/grid/grid",children:"Grids"})," (horizontal and vertical scrolling)"]})]}),e.jsx("div",{className:"text-xl mt-4",children:"Support"}),"If you like this project there are several ways to support it:",e.jsxs("ul",{className:"pl-8",children:[e.jsx("li",{className:"list-disc",children:e.jsx(i,{href:"https://github.com/sponsors/bvaughn/",children:"Become a GitHub sponsor"})}),e.jsx("li",{className:"list-disc",children:e.jsx(i,{href:"https://opencollective.com/react-window#sponsor",children:"Become an Open Collective sponsor"})}),e.jsxs("li",{className:"list-disc",children:["or"," ",e.jsx(i,{href:"http://givebrian.coffee/",children:"buy me a coffee"})]})]})]})}export{o as default};
+//# sourceMappingURL=GettingStartedRoute-bLneovGd.js.map

package/docs/assets/{GettingStartedRoute-D-bI_IZb.js.map → GettingStartedRoute-bLneovGd.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GettingStartedRoute-~~D-bI_IZb~~.js","sources":["../../src/routes/GettingStartedRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\nimport { Link } from \"../components/Link\";\n\nexport default function GettingStartedRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Getting started\" />\n <div>\n <strong>react-window</strong> is a component library that helps render\n large lists of data quickly and without the performance problems that\n often go along with rendering a lot of data. It's used in a lot of\n places, from{\" \"}\n <ExternalLink href=\"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\">\n React DevTools\n </ExternalLink>{\" \"}\n to the{\" \"}\n <ExternalLink href=\"https://github.com/replayio/devtools\">\n Replay browser\n </ExternalLink>\n .\n </div>\n <div className=\"text-xl mt-4\">Installation</div>\n <div>Begin by installing the library from NPM:</div>\n <code className=\"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!\">\n npm install <span className=\"tok-keyword\">react-window</span>\n </code>\n <Callout intent=\"primary\">\n TypeScript definitions are included within the published{\" \"}\n <code>dist</code> folder and documentation is included within the{\" \"}\n <code>docs</code> folder.\n </Callout>\n <div className=\"text-xl mt-4\">Learn more</div>\n <div>\n This library provides two basic types of components; choose one below to\n learn more:\n </div>\n <ul className=\"pl-8\">\n <li className=\"list-disc\">\n <Link to=\"/list/fixed-row-height\">Lists</Link> (vertical scrolling)\n </li>\n <li className=\"list-disc\">\n <Link to=\"/grid/grid\">Grids</Link> (horizontal and vertical scrolling)\n </li>\n </ul>\n <div className=\"text-xl mt-4\">Support</div>\n If you like this project there are several ways to support it:\n <ul className=\"pl-8\">\n <li className=\"list-disc\">\n <ExternalLink href=\"https://github.com/sponsors/bvaughn/\">\n Become a GitHub sponsor\n </ExternalLink>\n </li>\n <li className=\"list-disc\">\n <ExternalLink href=\"https://opencollective.com/react-window#sponsor\">\n Become an Open Collective sponsor\n </ExternalLink>\n </li>\n <li className=\"list-disc\">\n or{\" \"}\n <ExternalLink href=\"http://givebrian.coffee/\">\n buy me a coffee\n </ExternalLink>\n </li>\n </ul>\n </Box>\n );\n}\n"],"names":["GettingStartedRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","className","Callout","intent","Link","to"],"mappings":"6GAMA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,2BACb,MAAA,CACCH,SAAA,GAAAC,IAAC,UAAOD,SAAA,iBAAqB,kMAGhB,IACbC,EAAAA,IAACG,EAAA,CAAaC,KAAK,wGAAwGL,SAAA,mBAE3G,IAAI,SACb,IACPC,EAAAA,IAACG,EAAA,CAAaC,KAAK,uCAAuCL,SAAA,mBAE3C,OAGjBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,mBAC9BC,IAAC,OAAID,SAAA,gDACLJ,KAAC,OAAA,CAAKU,UAAU,kGAAkGN,SAAA,CAAA,eACpGC,EAAAA,IAAC,OAAA,CAAKK,UAAU,cAAcN,SAAA,sBAE5CJ,KAACW,EAAA,CAAQC,OAAO,UAAUR,SAAA,CAAA,2DACiC,MACzDC,IAAC,QAAKD,SAAA,SAAW,mDAAiD,MAClEC,IAAC,QAAKD,SAAA,SAAW,cAEnBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,iBAC9BC,IAAC,OAAID,SAAA,2FAILJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,yBAAyBV,SAAA,UAAY,6BAEhDJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,aAAaV,SAAA,UAAY,6CAGtCC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,YAAa,mEAE3CJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAC,IAAC,KAAA,CAAGK,UAAU,YACZN,SAAAC,EAAAA,IAACG,GAAaC,KAAK,uCAAuCL,yCAI5DC,IAAC,MAAGK,UAAU,YACZN,eAACI,EAAA,CAAaC,KAAK,kDAAkDL,SAAA,0CAIvEJ,KAAC,KAAA,CAAGU,UAAU,YAAYN,SAAA,CAAA,KACrB,IACHC,EAAAA,IAACG,EAAA,CAAaC,KAAK,2BAA2BL,SAAA,4BAOxD"}
1	+ {"version":3,"file":"GettingStartedRoute-bLneovGd.js","sources":["../../src/routes/GettingStartedRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\nimport { Link } from \"../components/Link\";\n\nexport default function GettingStartedRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Getting started\" />\n <div>\n <strong>react-window</strong> is a component library that helps render\n large lists of data quickly and without the performance problems that\n often go along with rendering a lot of data. It's used in a lot of\n places, from{\" \"}\n <ExternalLink href=\"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\">\n React DevTools\n </ExternalLink>{\" \"}\n to the{\" \"}\n <ExternalLink href=\"https://github.com/replayio/devtools\">\n Replay browser\n </ExternalLink>\n .\n </div>\n <div className=\"text-xl mt-4\">Installation</div>\n <div>Begin by installing the library from NPM:</div>\n <code className=\"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!\">\n npm install <span className=\"tok-keyword\">react-window</span>\n </code>\n <Callout intent=\"primary\">\n TypeScript definitions are included within the published{\" \"}\n <code>dist</code> folder and documentation is included within the{\" \"}\n <code>docs</code> folder.\n </Callout>\n <div className=\"text-xl mt-4\">Learn more</div>\n <div>\n This library provides two basic types of components; choose one below to\n learn more:\n </div>\n <ul className=\"pl-8\">\n <li className=\"list-disc\">\n <Link to=\"/list/fixed-row-height\">Lists</Link> (vertical scrolling)\n </li>\n <li className=\"list-disc\">\n <Link to=\"/grid/grid\">Grids</Link> (horizontal and vertical scrolling)\n </li>\n </ul>\n <div className=\"text-xl mt-4\">Support</div>\n If you like this project there are several ways to support it:\n <ul className=\"pl-8\">\n <li className=\"list-disc\">\n <ExternalLink href=\"https://github.com/sponsors/bvaughn/\">\n Become a GitHub sponsor\n </ExternalLink>\n </li>\n <li className=\"list-disc\">\n <ExternalLink href=\"https://opencollective.com/react-window#sponsor\">\n Become an Open Collective sponsor\n </ExternalLink>\n </li>\n <li className=\"list-disc\">\n or{\" \"}\n <ExternalLink href=\"http://givebrian.coffee/\">\n buy me a coffee\n </ExternalLink>\n </li>\n </ul>\n </Box>\n );\n}\n"],"names":["GettingStartedRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","className","Callout","intent","Link","to"],"mappings":"6GAMA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,2BACb,MAAA,CACCH,SAAA,GAAAC,IAAC,UAAOD,SAAA,iBAAqB,kMAGhB,IACbC,EAAAA,IAACG,EAAA,CAAaC,KAAK,wGAAwGL,SAAA,mBAE3G,IAAI,SACb,IACPC,EAAAA,IAACG,EAAA,CAAaC,KAAK,uCAAuCL,SAAA,mBAE3C,OAGjBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,mBAC9BC,IAAC,OAAID,SAAA,gDACLJ,KAAC,OAAA,CAAKU,UAAU,kGAAkGN,SAAA,CAAA,eACpGC,EAAAA,IAAC,OAAA,CAAKK,UAAU,cAAcN,SAAA,sBAE5CJ,KAACW,EAAA,CAAQC,OAAO,UAAUR,SAAA,CAAA,2DACiC,MACzDC,IAAC,QAAKD,SAAA,SAAW,mDAAiD,MAClEC,IAAC,QAAKD,SAAA,SAAW,cAEnBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,iBAC9BC,IAAC,OAAID,SAAA,2FAILJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,yBAAyBV,SAAA,UAAY,6BAEhDJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,aAAaV,SAAA,UAAY,6CAGtCC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,YAAa,mEAE3CJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAC,IAAC,KAAA,CAAGK,UAAU,YACZN,SAAAC,EAAAA,IAACG,GAAaC,KAAK,uCAAuCL,yCAI5DC,IAAC,MAAGK,UAAU,YACZN,eAACI,EAAA,CAAaC,KAAK,kDAAkDL,SAAA,0CAIvEJ,KAAC,KAAA,CAAGU,UAAU,YAAYN,SAAA,CAAA,KACrB,IACHC,EAAAA,IAACG,EAAA,CAAaC,KAAK,2BAA2BL,SAAA,4BAOxD"}

package/docs/assets/Grid-BjC_BndR.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,j as t}from"./index-Cnm6lMUF.js";import{u as o,a as n,b as r}from"./arePropsEqual-CaQN03VG.js";function l({cellComponent:l,cellProps:i,children:s,className:a,columnCount:c,columnWidth:d,defaultHeight:u=0,defaultWidth:f=0,dir:m,gridRef:x,onCellsRendered:p,onResize:h,overscanCount:g=3,rowCount:I,rowHeight:v,style:S,tagName:w="div",...C}){const b=o(i),z=e.useMemo(()=>e.memo(l,n),[l]),[T,y]=e.useState(null),O=function(t,o){const[n,r]=e.useState("rtl"===o);return e.useLayoutEffect(()=>{t&&(o\|\|r(function(e){let t=e;for(;t;){if(t.dir)return"rtl"===t.dir;t=t.parentElement}return!1}(t)))},[o,t]),n}(T,m),{getCellBounds:E,getEstimatedSize:R,startIndexOverscan:j,startIndexVisible:H,scrollToIndex:P,stopIndexOverscan:V,stopIndexVisible:A}=r({containerElement:T,containerStyle:S,defaultContainerSize:f,direction:"horizontal",isRtl:O,itemCount:c,itemProps:b,itemSize:d,onResize:h,overscanCount:g}),{getCellBounds:L,getEstimatedSize:N,startIndexOverscan:W,startIndexVisible:B,scrollToIndex:G,stopIndexOverscan:M,stopIndexVisible:$}=r({containerElement:T,containerStyle:S,defaultContainerSize:u,direction:"vertical",itemCount:I,itemProps:b,itemSize:v,onResize:h,overscanCount:g});e.useImperativeHandle(x,()=>({get element(){return T},scrollToCell({behavior:e="auto",columnAlign:t="auto",columnIndex:o,rowAlign:n="auto",rowIndex:r}){const l=P({align:t,containerScrollOffset:T?.scrollLeft??0,index:o}),i=G({align:n,containerScrollOffset:T?.scrollTop??0,index:r});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:e,left:l,top:i})},scrollToColumn({align:e="auto",behavior:t="auto",index:o}){const n=P({align:e,containerScrollOffset:T?.scrollLeft??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,left:n})},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const n=G({align:e,containerScrollOffset:T?.scrollTop??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,top:n})}}),[T,P,G]),e.useEffect(()=>{j>=0&&V>=0&&W>=0&&M>=0&&p&&p({columnStartIndex:H,columnStopIndex:A,rowStartIndex:B,rowStopIndex:$},{columnStartIndex:j,columnStopIndex:V,rowStartIndex:W,rowStopIndex:M})},[p,j,H,V,A,W,B,M,$]);const k=e.useMemo(()=>{const o=[];if(c>0&&I>0)for(let n=W;n<=M;n++){const r=L(n),l=[];for(let t=j;t<=V;t++){const o=E(t);l.push(e.createElement(z,{...b,ariaAttributes:{"aria-colindex":t+1,role:"gridcell"},columnIndex:t,key:t,rowIndex:n,style:{position:"absolute",left:O?void 0:0,right:O?0:void 0,transform:`translate(${O?-o.scrollOffset:o.scrollOffset}px, ${r.scrollOffset}px)`,height:r.size,width:o.size}}))}o.push(t.jsx("div",{role:"row","aria-rowindex":n+1,children:l},n))}return o},[z,b,c,j,V,E,L,O,I,W,M]),q=t.jsx("div",{"aria-hidden":!0,style:{height:N(),width:R(),zIndex:-1}});return e.createElement(w,{"aria-colcount":c,"aria-rowcount":I,role:"grid",...C,className:a,dir:m,ref:y,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...S}},k,s,q)}export{l as G};
2	+ //# sourceMappingURL=Grid-BjC_BndR.js.map