react-window 2.1.0 → 2.1.2

package/docs/assets/TabularDataRoute-626oaEdE.js

@@ -1,2 +0,0 @@
-import{r as s,j as a,B as n,C as p,L as t}from"./index-1kZ13GgQ.js";import{B as c}from"./arePropsEqual-Bd1V-lj7.js";import{F as e}from"./FormattedCode-DJTpo7zC.js";import{C as l}from"./ContinueLink-jysYO6ZF.js";import{H as o}from"./Header-CDZFHeTb.js";import{L as i}from"./LoadingSpinner-C-xNF7A_.js";import{L as d}from"./List-BgVuV26Q.js";import{j as r}from"./addresses-CDQyd4n9.js";let k=-1;function u(s=!1){if(-1===k||s){const s=document.createElement("div"),a=s.style;a.width="50px",a.height="50px",a.overflow="scroll",document.body.appendChild(s),k=s.offsetWidth-s.clientWidth,document.body.removeChild(s)}return k}const m={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">getScrollbarSize</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">addresses</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">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="tok-punctuation">(</span><span class="tok-variableName">getScrollbarSize</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"h-55 flex flex-col"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row bg-teal-600 p-1 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"grow flex flex-row items-center gap-2 font-bold"</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=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-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: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-1"</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: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-10"</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: 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">className</span><span class="tok-operator">=</span><span class="tok-string">"shrink"</span><span class=""> </span><span class="tok-propertyName">style</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">size</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></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">className</span><span class="tok-operator">=</span><span class="tok-string">"overflow-hidden"</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">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; 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: 12ch; 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">addresses</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: 12ch; 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: 12ch; 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">addresses</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: 10ch; text-indent: -2ch;"><span class=""></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: 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">addresses</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-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">address</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">addresses</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row items-center gap-2 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-10 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',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">getScrollbarSize</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-propertyName">addresses</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">addresses</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Address</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">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="tok-punctuation">(</span><span class="tok-variableName">getScrollbarSize</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"h-55 flex flex-col"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row bg-teal-600 p-1 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"grow flex flex-row items-center gap-2 font-bold"</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=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-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: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-1"</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: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-10"</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: 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">className</span><span class="tok-operator">=</span><span class="tok-string">"shrink"</span><span class=""> </span><span class="tok-propertyName">style</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">size</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></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">className</span><span class="tok-operator">=</span><span class="tok-string">"overflow-hidden"</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">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; 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: 12ch; 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">addresses</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: 12ch; 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: 12ch; 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">addresses</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: 10ch; text-indent: -2ch;"><span class=""></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: 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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">addresses</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">addresses</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Address</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">address</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">addresses</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row items-center gap-2 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-10 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function h({addresses:n}){const[p]=s.useState(u);return a.jsxs("div",{className:"h-55 flex flex-col",children:[a.jsxs("div",{className:"flex flex-row bg-teal-600 p-1 px-2",children:[a.jsxs("div",{className:"grow flex flex-row items-center gap-2 font-bold",children:[a.jsx("div",{className:"flex-1",children:"City"}),a.jsx("div",{className:"flex-1",children:"State"}),a.jsx("div",{className:"w-10",children:"Zip"})]}),a.jsx("div",{className:"shrink",style:{width:p}})]}),a.jsx("div",{className:"overflow-hidden",children:a.jsx(d,{rowComponent:v,rowCount:n.length,rowHeight:25,rowProps:{addresses:n}})})]})}function v({index:s,addresses:n,style:p}){const t=n[s];return a.jsxs("div",{className:"flex flex-row items-center gap-2 px-2",style:p,children:[a.jsx("div",{className:"flex-1",children:t.city}),a.jsx("div",{className:"flex-1",children:t.state}),a.jsx("div",{className:"w-10 text-xs",children:t.zip})]})}function y(){const d=s.useMemo(()=>r?r.sort((s,a)=>s.city.localeCompare(a.city)):[],[]);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(o,{section:"Tables",title:"Rendering tabular data"}),a.jsx("div",{children:"Many types of tabular data can be rendered using the list component."}),a.jsx(c,{className:"p-0!","data-focus-within":"bold",children:d.length?a.jsx(h,{addresses:d}):a.jsx("div",{className:"p-2",children:a.jsx(i,{})})}),a.jsx("div",{children:"The example above uses Flexbox layout to position columns and headers."}),a.jsx(e,{markdown:m}),a.jsxs(p,{intent:"primary",children:["It may be more efficient to render data with many columns using the"," ",a.jsx(t,{to:"/grid/grid",children:"Grid"})," component."]}),a.jsx(l,{to:"/list/tabular-data-aria-roles",title:"ARIA roles"})]})}export{y as default};
-//# sourceMappingURL=TabularDataRoute-626oaEdE.js.map

package/docs/assets/TabularDataRoute-626oaEdE.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabularDataRoute-626oaEdE.js","sources":["../../lib/utils/getScrollbarSize.ts","../../src/routes/tables/examples/FlexboxLayout.example.tsx","../../src/routes/tables/TabularDataRoute.tsx","../../src/routes/tables/hooks/useAddresses.ts"],"sourcesContent":["let size: number = -1;\n\nexport function getScrollbarSize(recalculate: boolean = false): number {\n  if (size === -1 || recalculate) {\n    const div = document.createElement(\"div\");\n    const style = div.style;\n    style.width = \"50px\";\n    style.height = \"50px\";\n    style.overflow = \"scroll\";\n\n    document.body.appendChild(div);\n\n    size = div.offsetWidth - div.clientWidth;\n\n    document.body.removeChild(div);\n  }\n\n  return size;\n}\n\nexport function setScrollbarSizeForTests(value: number) {\n  size = value;\n}\n","import { useState } from \"react\";\nimport type json from \"../../../../public/data/addresses.json\";\n\ntype Address = (typeof json)[0];\n\n// <begin>\n\nimport { getScrollbarSize, List, type RowComponentProps } from \"react-window\";\n\nfunction Example({ addresses }: { addresses: Address[] }) {\n  const [size] = useState(getScrollbarSize);\n\n  return (\n    <div className=\"h-55 flex flex-col\">\n      <div className=\"flex flex-row bg-teal-600 p-1 px-2\">\n        <div className=\"grow flex flex-row items-center gap-2 font-bold\">\n          <div className=\"flex-1\">City</div>\n          <div className=\"flex-1\">State</div>\n          <div className=\"w-10\">Zip</div>\n        </div>\n        <div className=\"shrink\" style={{ width: size }} />\n      </div>\n      <div className=\"overflow-hidden\">\n        <List\n          rowComponent={RowComponent}\n          rowCount={addresses.length}\n          rowHeight={25}\n          rowProps={{ addresses }}\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction RowComponent({\n  index,\n  addresses,\n  style\n}: RowComponentProps<{\n  addresses: Address[];\n}>) {\n  const address = addresses[index];\n\n  return (\n    <div className=\"flex flex-row items-center gap-2 px-2\" style={style}>\n      <div className=\"flex-1\">{address.city}</div>\n      <div className=\"flex-1\">{address.state}</div>\n      <div className=\"w-10 text-xs\">{address.zip}</div>\n    </div>\n  );\n}\n\n// <end>\n\nexport { Example };\n","import FlexboxLayoutMarkdown from \"../../../public/generated/code-snippets/FlexboxLayout.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { Header } from \"../../components/Header\";\nimport { Link } from \"../../components/Link\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/FlexboxLayout.example\";\nimport { useAddresses } from \"./hooks/useAddresses\";\n\nexport default function TabularDataRoute() {\n  const addresses = useAddresses();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Tables\" title=\"Rendering tabular data\" />\n      <div>\n        Many types of tabular data can be rendered using the list component.\n      </div>\n      <Block className=\"p-0!\" data-focus-within=\"bold\">\n        {!addresses.length ? (\n          <div className=\"p-2\">\n            <LoadingSpinner />\n          </div>\n        ) : (\n          <Example addresses={addresses} />\n        )}\n      </Block>\n      <div>\n        The example above uses Flexbox layout to position columns and headers.\n      </div>\n      <FormattedCode markdown={FlexboxLayoutMarkdown} />\n      <Callout intent=\"primary\">\n        It may be more efficient to render data with many columns using the{\" \"}\n        <Link to=\"/grid/grid\">Grid</Link> component.\n      </Callout>\n      <ContinueLink to=\"/list/tabular-data-aria-roles\" title=\"ARIA roles\" />\n    </Box>\n  );\n}\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/addresses.json\";\n\ntype Address = (typeof json)[0];\n\nexport function useAddresses(): Address[] {\n  return useMemo(() => {\n    if (json) {\n      return json.sort((a, b) => a.city.localeCompare(b.city));\n    }\n\n    return [];\n  }, []);\n}\n"],"names":["size","getScrollbarSize","recalculate","div","document","createElement","style","width","height","overflow","body","appendChild","offsetWidth","clientWidth","removeChild","Example","addresses","useState","jsxs","className","children","jsx","List","rowComponent","RowComponent","rowCount","length","rowHeight","rowProps","index","address","city","state","zip","TabularDataRoute","useMemo","json","sort","a","b","localeCompare","Box","direction","gap","Header","section","title","Block","LoadingSpinner","FormattedCode","markdown","FlexboxLayoutMarkdown","Callout","intent","Link","to","ContinueLink"],"mappings":"gYAAA,IAAIA,GAAe,EAEZ,SAASC,EAAiBC,GAAuB,GACtD,QAAIF,GAAeE,EAAa,CAC9B,MAAMC,EAAMC,SAASC,cAAc,OAC7BC,EAAQH,EAAIG,MAClBA,EAAMC,MAAQ,OACdD,EAAME,OAAS,OACfF,EAAMG,SAAW,SAEjBL,SAASM,KAAKC,YAAYR,GAE1BH,EAAOG,EAAIS,YAAcT,EAAIU,YAE7BT,SAASM,KAAKI,YAAYX,EAC5B,CAEA,OAAOH,CACT,qx8BCTA,SAASe,GAAQC,UAAEA,IACjB,MAAOhB,GAAQiB,EAAAA,SAAShB,GAExB,SACEiB,KAAC,MAAA,CAAIC,UAAU,qBACbC,SAAA,GAAAF,KAAC,MAAA,CAAIC,UAAU,qCACbC,SAAA,GAAAF,KAAC,MAAA,CAAIC,UAAU,kDACbC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAASC,SAAA,SACxBC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAASC,SAAA,UACxBC,EAAAA,IAAC,MAAA,CAAIF,UAAU,OAAOC,SAAA,WAExBC,MAAC,OAAIF,UAAU,SAASb,MAAO,CAAEC,MAAOP,UAE1CqB,IAAC,MAAA,CAAIF,UAAU,kBACbC,SAAAC,EAAAA,IAACC,EAAA,CACCC,aAAcC,EACdC,SAAUT,EAAUU,OACpBC,UAAW,GACXC,SAAU,CAAEZ,mBAKtB,CAEA,SAASQ,GAAaK,MACpBA,EAAAb,UACAA,EAAAV,MACAA,IAIA,MAAMwB,EAAUd,EAAUa,GAE1B,SACEX,KAAC,MAAA,CAAIC,UAAU,wCAAwCb,QACrDc,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAAUC,SAAAU,EAAQC,OACjCV,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAAUC,WAAQY,QACjCX,EAAAA,IAAC,MAAA,CAAIF,UAAU,eAAgBC,WAAQa,QAG7C,CCtCA,SAAwBC,IACtB,MAAMlB,ECPCmB,EAAAA,QAAQ,IACTC,EACKA,EAAKC,KAAK,CAACC,EAAGC,IAAMD,EAAEP,KAAKS,cAAcD,EAAER,OAG7C,GACN,IDGH,OACEb,EAAAA,KAACuB,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,CAAAC,EAAAA,IAACuB,EAAA,CAAOC,QAAQ,SAASC,MAAM,6BAC/BzB,IAAC,OAAID,SAAA,yEAGLC,EAAAA,IAAC0B,GAAM5B,UAAU,OAAO,oBAAkB,OACvCC,SAACJ,EAAUU,OAKVL,EAAAA,IAACN,EAAA,CAAQC,cAJTK,EAAAA,IAAC,OAAIF,UAAU,MACbC,eAAC4B,EAAA,CAAA,SAMP3B,IAAC,OAAID,SAAA,6EAGLC,IAAC4B,EAAA,CAAcC,SAAUC,MACzBjC,KAACkC,EAAA,CAAQC,OAAO,UAAUjC,SAAA,CAAA,sEAC4C,IACpEC,EAAAA,IAACiC,EAAA,CAAKC,GAAG,aAAanC,SAAA,SAAW,iBAEnCC,EAAAA,IAACmC,EAAA,CAAaD,GAAG,gCAAgCT,MAAM,iBAG7D"}

package/docs/assets/VariableRowHeightsRoute-DYGtG5ua.js

@@ -1,2 +0,0 @@
-import{j as s,B as a}from"./index-1kZ13GgQ.js";import{B as n}from"./arePropsEqual-Bd1V-lj7.js";import{F as p}from"./FormattedCode-DJTpo7zC.js";import{C as t}from"./ContinueLink-jysYO6ZF.js";import{H as c}from"./Header-CDZFHeTb.js";import{L as e}from"./LoadingSpinner-C-xNF7A_.js";import{u as i,E as l}from"./useCitiesByState-CRl37uUx.js";import"./List-BgVuV26Q.js";import"./addresses-CDQyd4n9.js";const o={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">items</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">items</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-variableName">rowHeight</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">items</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><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">rowHeight</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">items</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">switch</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">items</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-operator">.</span><span class="tok-propertyName">type</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"state"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">30</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"zip"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">25</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">}</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=""></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">items</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-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">item</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">items</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">className</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">getClassName</span><span class="tok-punctuation">(</span><span class="tok-variableName">item</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">className</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">type</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-string">"state"</span><span class=""> </span><span class="tok-operator">?</span><span class=""> </span><span class="tok-punctuation">(</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">span</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-operator">:</span><span class=""> </span><span class="tok-punctuation">(</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">span</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=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="">, </span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</span><span class="tok-punctuation">}</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">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">items</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName tok-definition">List</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">type</span><span class=""> </span><span class="tok-variableName tok-definition">ListImperativeAPI</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">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</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><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">type</span><span class=""> </span><span class="tok-typeName">Item</span><span class=""> </span><span class="tok-operator">=</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-operator">|</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">type</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"state"</span><span class="tok-punctuation">;</span><span class=""> </span><span class="tok-propertyName tok-definition">state</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</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-operator">|</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">type</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"zip"</span><span class="tok-punctuation">;</span><span class=""> </span><span class="tok-propertyName tok-definition">city</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">;</span><span class=""> </span><span class="tok-propertyName tok-definition">zip</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</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: 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">type</span><span class=""> </span><span class="tok-typeName">RowProps</span><span class=""> </span><span class="tok-operator">=</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-propertyName tok-definition">items</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Item</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><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">items</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">items</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Item</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="tok-operator">&#60;</span><span class="tok-variableName">RowProps</span><span class="tok-operator">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">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-variableName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">items</span><span class="">.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-variableName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">rowHeight</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-variableName">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">items</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-string2">/&#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">rowHeight</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">items</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowProps</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">switch</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">items</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-operator">.</span><span class="tok-propertyName">type</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"state"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">30</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">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"zip"</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">25</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">}</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=""></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">items</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">RowProps</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">item</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">items</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">className</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">getClassName</span><span class="tok-punctuation">(</span><span class="tok-variableName">item</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">className</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">type</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-string">"state"</span><span class=""> </span><span class="tok-operator">?</span><span class=""> </span><span class="tok-punctuation">(</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">span</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-operator">:</span><span class=""> </span><span class="tok-punctuation">(</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">span</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=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="">, </span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</span><span class="tok-punctuation">}</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">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">items</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function d(){const d=i();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(c,{section:"Lists",title:"Variable row heights"}),s.jsx("div",{children:"Lists with rows of different types may require different heights to render."}),s.jsx("div",{children:'Here is an example the most populous US postal codes, grouped by state. State rows "headers" are taller and are styled differently.'}),s.jsxs(n,{className:"h-50","data-focus-within":"bold",children:[!d.length&&s.jsx(e,{}),s.jsx(l,{items:d})]}),s.jsxs("div",{children:["This list requires a ",s.jsx("code",{children:"rowHeight"})," function that tells it what height a row should be based on the type of data it contains."]}),s.jsx(p,{markdown:o}),s.jsx(t,{to:"/list/props",title:"component props"})]})}export{d as default};
-//# sourceMappingURL=VariableRowHeightsRoute-DYGtG5ua.js.map

package/docs/assets/VariableRowHeightsRoute-DYGtG5ua.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariableRowHeightsRoute-DYGtG5ua.js","sources":["../../src/routes/list/VariableRowHeightsRoute.tsx"],"sourcesContent":["import ListVariableRowHeightsMarkdown from \"../../../public/generated/code-snippets/ListVariableRowHeights.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/ListVariableRowHeights.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\n\nexport default function VariableRowHeightsRoute() {\n  const citiesByState = useCitiesByState();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Variable row heights\" />\n      <div>\n        Lists with rows of different types may require different heights to\n        render.\n      </div>\n      <div>\n        Here is an example the most populous US postal codes, grouped by state.\n        State rows \"headers\" are taller and are styled differently.\n      </div>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!citiesByState.length && <LoadingSpinner />}\n        <Example items={citiesByState} />\n      </Block>\n      <div>\n        This list requires a <code>rowHeight</code> function that tells it what\n        height a row should be based on the type of data it contains.\n      </div>\n      <FormattedCode markdown={ListVariableRowHeightsMarkdown} />\n      <ContinueLink to=\"/list/props\" title=\"component props\" />\n    </Box>\n  );\n}\n"],"names":["VariableRowHeightsRoute","citiesByState","useCitiesByState","jsxs","Box","direction","gap","children","jsx","Header","section","title","Block","className","length","LoadingSpinner","Example","items","FormattedCode","markdown","ListVariableRowHeightsMarkdown","ContinueLink","to"],"mappings":"i9gCAUA,SAAwBA,IACtB,MAAMC,EAAgBC,IAEtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,2BAC9BH,IAAC,OAAID,SAAA,kFAILC,IAAC,OAAID,SAAA,wIAILJ,EAAAA,KAACS,EAAA,CAAMC,UAAU,OAAO,oBAAkB,OACvCN,SAAA,EAACN,EAAca,cAAWC,EAAA,CAAA,KAC3BP,IAACQ,EAAA,CAAQC,MAAOhB,cAEjB,MAAA,CAAIM,SAAA,CAAA,0BACkBC,IAAC,QAAKD,SAAA,cAAgB,kGAG7CC,IAACU,EAAA,CAAcC,SAAUC,IACzBZ,EAAAA,IAACa,EAAA,CAAaC,GAAG,cAAcX,MAAM,sBAG3C"}