react-window 2.1.2 → 2.2.0

package/docs/generated/code-snippets/TableAriaOverrideProps.json

@@ -1,3 +0,0 @@
-{
-  "html": "<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>"
-}

package/docs/generated/code-snippets/columnWidth.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">columnWidth</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></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\">indexToColumn</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><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\">\"address\"</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\">250</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\">\"email\"</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\">300</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\">\"job_title\"</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\">150</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\">\"timezone\"</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\">200</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\">75</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\">default</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\">100</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></div>"
-}

package/docs/generated/code-snippets/gridRefClickEventHandler.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">onClick</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">grid</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">gridRef</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">current</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-variableName\">grid</span><span class=\"\">?.</span><span class=\"tok-propertyName\">scrollToCell</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">behavior</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">columnAlign</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">columnIndex</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">10</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">rowAlign</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">rowIndex</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">250</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">;</span></div>"
-}

package/docs/generated/code-snippets/listRefClickEventHandler.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">onClick</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">list</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">listRef</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">current</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-variableName\">list</span><span class=\"\">?.</span><span class=\"tok-propertyName\">scrollToRow</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">align</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">behavior</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">index</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">250</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">;</span></div>"
-}

package/docs/generated/code-snippets/rowHeight.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">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\">return</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-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-number\">30</span><span class=\"\"> </span><span class=\"tok-operator\">:</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: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
-}

package/docs/generated/code-snippets/useGridCallbackRef.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useGridCallbackRef</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName tok-definition\">grid</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">setGrid</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useGridCallbackRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-variableName\">useCustomHook</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">grid</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Grid</span><span class=\"\"> </span><span class=\"tok-propertyName\">gridRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">setGrid</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
-}

package/docs/generated/code-snippets/useGridRef.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">gridRef</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useGridRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Grid</span><span class=\"\"> </span><span class=\"tok-propertyName\">gridRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">gridRef</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
-}

package/docs/generated/code-snippets/useGridRefImport.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useGridRef</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span></div>"
-}

package/docs/generated/code-snippets/useImageSizeCache.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-typeName\">Size</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\">height</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">number</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\">width</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">number</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\">type</span><span class=\"\"> </span><span class=\"tok-typeName\">Cache</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\">getAverageSize</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Size</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\">getImageSize</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=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Size</span><span class=\"\"> </span><span class=\"tok-operator\">|</span><span class=\"\"> </span><span class=\"tok-typeName\">undefined</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\">setImageSize</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-variableName tok-definition\">size</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Size</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-keyword\">void</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\">useImageSizeCache</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Cache</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\">cachedRowHeights</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">setCachedRowHeights</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=\"\">&#60;</span><span class=\"tok-typeName\">Map</span><span class=\"\">&#60;</span><span class=\"tok-typeName\">number</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-typeName\">Size</span><span class=\"\">&#62;&#62;</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\">new</span><span class=\"\"> </span><span class=\"tok-className\">Map</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-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\">getAverageSize</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useCallback</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">let</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">totalHeight</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">0</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\">let</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">totalWidth</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-number\">0</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: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-variableName\">cachedRowHeights</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">forEach</span><span class=\"tok-punctuation\">(</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-punctuation\">=&#62;</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-variableName\">totalHeight</span><span class=\"\"> </span><span class=\"tok-operator\">+=</span><span class=\"\"> </span><span class=\"tok-variableName\">size</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">height</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\">totalWidth</span><span class=\"\"> </span><span class=\"tok-operator\">+=</span><span class=\"\"> </span><span class=\"tok-variableName\">size</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">width</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=\"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: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">if</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">totalHeight</span><span class=\"\"> </span><span class=\"tok-operator\">===</span><span class=\"\"> </span><span class=\"tok-number\">0</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-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">height</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">1</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-propertyName tok-definition\">width</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">1</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: 6ch; 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: 6ch; 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: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName tok-definition\">height</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">totalHeight</span><span class=\"\"> </span><span class=\"tok-operator\">/</span><span class=\"\"> </span><span class=\"tok-variableName\">cachedRowHeights</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">size</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 tok-definition\">width</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">totalWidth</span><span class=\"\"> </span><span class=\"tok-operator\">/</span><span class=\"\"> </span><span class=\"tok-variableName\">cachedRowHeights</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">size</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=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">cachedRowHeights</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></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\">getImageSize</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useCallback</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=\"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\">=&#62;</span><span class=\"\"> </span><span class=\"tok-variableName\">cachedRowHeights</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">get</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: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">cachedRowHeights</span><span class=\"tok-punctuation\">]</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></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\">setImageSize</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useCallback</span><span class=\"tok-punctuation\">(</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-variableName tok-definition\">size</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Size</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-variableName\">setCachedRowHeights</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">prevMap</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">clonedMap</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-keyword\">new</span><span class=\"\"> </span><span class=\"tok-className\">Map</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">prevMap</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-variableName\">clonedMap</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">set</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName\">size</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-keyword\">return</span><span class=\"\"> </span><span class=\"tok-variableName\">clonedMap</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=\"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-punctuation\">}</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</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></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-variableName\">useMemo</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=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</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 tok-definition\">getAverageSize</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 tok-definition\">getImageSize</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 tok-definition\">setImageSize</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=\"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\">[</span><span class=\"tok-variableName\">getAverageSize</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName\">getImageSize</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName\">setImageSize</span><span class=\"tok-punctuation\">]</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
-}

package/docs/generated/code-snippets/useListCallbackRef.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useListCallbackRef</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName tok-definition\">list</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">setList</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useListCallbackRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-variableName\">useCustomHook</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">list</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"> </span><span class=\"tok-propertyName\">listRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">setList</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
-}

package/docs/generated/code-snippets/useListRef.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">listRef</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useListRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"> </span><span class=\"tok-propertyName\">listRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">listRef</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
-}

package/docs/generated/code-snippets/useListRefImport.json

@@ -1,3 +0,0 @@
-{
-  "html": "<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useListRef</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span></div>"
-}