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

package/docs/assets/{AriaRolesRoute-BXnUEUK2.js → AriaRolesRoute-rvLAMJGg.js}

@@ -1,2 +1,2 @@
-import{j as s,B as a,E as n}from"./index-Dfhz9Ad4.js";import{F as p}from"./FormattedCode-CDzGfhdX.js";import{H as t}from"./Header-DyQVANF3.js";const c={html:'<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={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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-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-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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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,{markdown: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,{markdown:e})]})}export{o as default};
-//# sourceMappingURL=AriaRolesRoute-BXnUEUK2.js.map
+import{j as s,B as a,E as n}from"./index-C6NWGx8D.js";import{F as p}from"./FormattedCode-B5NYyy8K.js";import{H as t}from"./Header-B_onM2vR.js";const c={html:'<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={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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-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-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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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,{markdown: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,{markdown:e})]})}export{o as default};
+//# sourceMappingURL=AriaRolesRoute-rvLAMJGg.js.map

package/docs/assets/{AriaRolesRoute-BXnUEUK2.js.map → AriaRolesRoute-rvLAMJGg.js.map}

@@ -1 +1 @@
-{"version":3,"file":"AriaRolesRoute-BXnUEUK2.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 { FormattedCode } from \"../../components/code/FormattedCode\";\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      <FormattedCode markdown={TableAriaAttributesMarkdown} />\n      <div>\n        The example on the previous page can be modified like so to assign the\n        correct ARIA attributes:\n      </div>\n      <FormattedCode markdown={TableAriaOverridePropsMarkdown} />\n    </Box>\n  );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"27+BAOA,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,CAAcC,SAAUC,MACzBR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}
+{"version":3,"file":"AriaRolesRoute-rvLAMJGg.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 { FormattedCode } from \"../../components/code/FormattedCode\";\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      <FormattedCode markdown={TableAriaAttributesMarkdown} />\n      <div>\n        The example on the previous page can be modified like so to assign the\n        correct ARIA attributes:\n      </div>\n      <FormattedCode markdown={TableAriaOverridePropsMarkdown} />\n    </Box>\n  );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"27+BAOA,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,CAAcC,SAAUC,MACzBR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}

package/docs/assets/CellComponent.example-CFiu8zNV.js

@@ -0,0 +1,2 @@
+import{j as s}from"./index-C6NWGx8D.js";import{i as t}from"./useContacts-Bu0Z6ao9.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};
+//# sourceMappingURL=CellComponent.example-CFiu8zNV.js.map

package/docs/assets/{CellComponent.example-dKVH8ZYc.js.map → CellComponent.example-CFiu8zNV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CellComponent.example-dKVH8ZYc.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"}
+{"version":3,"file":"CellComponent.example-CFiu8zNV.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/{ComponentProps-BA6jJCAT.js → ComponentProps-BFVtvKZW.js}

@@ -1,2 +1,2 @@
-import{r as e,j as r,B as t,E as a}from"./index-Dfhz9Ad4.js";import{H as l}from"./Header-DyQVANF3.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-BA6jJCAT.js.map
+import{r as e,j as r,B as t,E as a}from"./index-C6NWGx8D.js";import{H as l}from"./Header-B_onM2vR.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-BFVtvKZW.js.map

package/docs/assets/{ComponentProps-BA6jJCAT.js.map → ComponentProps-BFVtvKZW.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ComponentProps-BA6jJCAT.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]}
+{"version":3,"file":"ComponentProps-BFVtvKZW.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-DMnSPbdx.js

@@ -0,0 +1,2 @@
+import{j as t,L as i}from"./index-C6NWGx8D.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};
+//# sourceMappingURL=ContinueLink-DMnSPbdx.js.map

package/docs/assets/{ContinueLink-DN1_wnU9.js.map → ContinueLink-DMnSPbdx.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ContinueLink-DN1_wnU9.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"}
+{"version":3,"file":"ContinueLink-DMnSPbdx.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/FixedHeightList-C81qGuc2.js

@@ -0,0 +1,2 @@
+const s={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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></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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">tagName</span><span class="tok-operator">=</span><span class="tok-string">"ul"</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>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">tagName</span><span class="tok-operator">=</span><span class="tok-string">"ul"</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>'};export{s as c};
+//# sourceMappingURL=FixedHeightList-C81qGuc2.js.map

package/docs/assets/FixedHeightList-C81qGuc2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedHeightList-C81qGuc2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}