react-window 2.0.0-alpha.5 → 2.0.0-alpha.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/dist/react-window.cjs +2 -1
  2. package/dist/react-window.cjs.map +1 -0
  3. package/dist/react-window.d.ts +41 -23
  4. package/dist/react-window.js +482 -405
  5. package/dist/react-window.js.map +1 -0
  6. package/docs/assets/index-BRVPsmMd.css +1 -0
  7. package/docs/assets/index-DoMrhaC7.js +68 -0
  8. package/docs/data/arabic-countries.json +252 -0
  9. package/docs/generated/code-snippets/FixedHeightRowComponent.json +2 -2
  10. package/docs/generated/code-snippets/FlexboxLayout.json +2 -2
  11. package/docs/generated/code-snippets/HorizontalList.json +4 -0
  12. package/docs/generated/code-snippets/HorizontalListCellRenderer.json +4 -0
  13. package/docs/generated/code-snippets/ListVariableRowHeights.json +2 -2
  14. package/docs/generated/code-snippets/RtlGrid.json +4 -0
  15. package/docs/generated/js-docs/Grid.json +83 -45
  16. package/docs/generated/js-docs/List.json +7 -4
  17. package/docs/index.html +2 -2
  18. package/docs/stats.html +1 -1
  19. package/package.json +2 -1
  20. package/docs/assets/index-BsBvdJUI.css +0 -1
  21. package/docs/assets/index-DcPBnht2.js +0 -67
package/docs/generated/code-snippets/HorizontalListCellRenderer.json ADDED
@@ -0,0 +1,4 @@
1
+ {
2
+ "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=\"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\">CellComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">columnIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">emails</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\">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></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">cn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-string\">\"px-2 truncate text-center leading-[2.5]\"</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: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-string\">\"bg-white/10 rounded\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">columnIndex</span><span class=\"\"> </span><span class=\"tok-operator\">%</span><span class=\"\"> </span><span class=\"tok-number\">2</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: 8ch; 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: 8ch; text-indent: -2ch;\"><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=\"\"></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: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">emails</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">columnIndex</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\">&#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>",
3
+ "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-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponentProps</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\">CellComponent</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\">columnIndex</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\">emails</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\">CellComponentProps</span><span class=\"\">&#60;</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">emails</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\">&#62;</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">cn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-string\">\"px-2 truncate text-center leading-[2.5]\"</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: 10ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-string\">\"bg-white/10 rounded\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">columnIndex</span><span class=\"\"> </span><span class=\"tok-operator\">%</span><span class=\"\"> </span><span class=\"tok-number\">2</span><span class=\"\"> </span><span class=\"tok-operator\">===</span><span class=\"\"> </span><span class=\"tok-number\">0</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=\"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\">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=\"\"></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: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">emails</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">columnIndex</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\">&#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>"
4
+ }
package/docs/generated/code-snippets/ListVariableRowHeights.json CHANGED
@@ -1,4 +1,4 @@
1
1
  {
2
- "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-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\">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\">zip</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: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">small</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\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">small</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-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: 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>",
3
- "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-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\">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\">zip</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: 12ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">small</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\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">small</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-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: 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>"
2
+ "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>",
3
+ "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>"
4
4
  }
package/docs/generated/code-snippets/RtlGrid.json ADDED
@@ -0,0 +1,4 @@
1
+ {
2
+ "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\">Grid</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\">RtlExample</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">countries</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\">Grid</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">cellComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">CellComponent</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\">cellProps</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\">countries</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\">columnCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">countries</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\">columnWidth</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">columnWidth</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\">dir</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"rtl\"</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-number\">1</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-string\">\"100%\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>",
3
+ "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\">Grid</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-keyword\">type</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">CellComponentProps</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\">RtlExample</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">countries</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\">countries</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Country</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\">Grid</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 8ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-propertyName\">cellComponent</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">CellComponent</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\">cellProps</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\">countries</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\">columnCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">countries</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\">columnWidth</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">columnWidth</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\">dir</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"rtl\"</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-number\">1</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-string\">\"100%\"</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 6ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 4ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span></div>\n<div style=\"min-height: 1rem; padding-left: 2ch; text-indent: -2ch;\"><span class=\"\"></span><span class=\"tok-punctuation\">}</span></div>"
4
+ }
package/docs/generated/js-docs/Grid.json CHANGED
@@ -37,10 +37,10 @@
37
37
  ]
38
38
  }
39
39
  },
40
- "style": {
40
+ "dir": {
41
41
  "defaultValue": null,
42
- "description": "Optional CSS properties.\nThe grid of cells will fill the height and width defined by this style.",
43
- "name": "style",
42
+ "description": "Corresponds to the HTML dir attribute:\nhttps://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir",
43
+ "name": "dir",
44
44
  "parent": {
45
45
  "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
46
46
  "name": "HTMLAttributes"
@@ -58,53 +58,30 @@
58
58
  "required": false,
59
59
  "type": {
60
60
  "name": "enum",
61
- "raw": "CSSProperties | undefined",
61
+ "raw": "string | undefined",
62
62
  "value": [
63
63
  {
64
64
  "value": "undefined"
65
65
  },
66
66
  {
67
- "value": "CSSProperties",
68
- "description": "",
69
- "fullComment": "",
70
- "tags": {}
67
+ "value": "string"
71
68
  }
72
69
  ]
73
70
  }
74
71
  },
75
- "defaultHeight": {
76
- "defaultValue": {
77
- "value": "0"
72
+ "style": {
73
+ "defaultValue": null,
74
+ "description": "Optional CSS properties.\nThe grid of cells will fill the height and width defined by this style.",
75
+ "name": "style",
76
+ "parent": {
77
+ "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
78
+ "name": "HTMLAttributes"
78
79
  },
79
- "description": "Default height of grid for initial render.\nThis value is important for server rendering.",
80
- "name": "defaultHeight",
81
80
  "declarations": [
82
81
  {
83
- "fileName": "react-window/lib/components/grid/types.ts",
84
- "name": "TypeLiteral"
85
- }
86
- ],
87
- "required": false,
88
- "type": {
89
- "name": "enum",
90
- "raw": "number | undefined",
91
- "value": [
92
- {
93
- "value": "undefined"
94
- },
95
- {
96
- "value": "number"
97
- }
98
- ]
99
- }
100
- },
101
- "defaultWidth": {
102
- "defaultValue": {
103
- "value": "0"
104
- },
105
- "description": "Default width of grid for initial render.\nThis value is important for server rendering.",
106
- "name": "defaultWidth",
107
- "declarations": [
82
+ "fileName": "react-window/node_modules/.pnpm/@types+react@19.1.8/node_modules/@types/react/index.d.ts",
83
+ "name": "HTMLAttributes"
84
+ },
108
85
  {
109
86
  "fileName": "react-window/lib/components/grid/types.ts",
110
87
  "name": "TypeLiteral"
@@ -113,13 +90,16 @@
113
90
  "required": false,
114
91
  "type": {
115
92
  "name": "enum",
116
- "raw": "number | undefined",
93
+ "raw": "CSSProperties | undefined",
117
94
  "value": [
118
95
  {
119
96
  "value": "undefined"
120
97
  },
121
98
  {
122
- "value": "number"
99
+ "value": "CSSProperties",
100
+ "description": "",
101
+ "fullComment": "",
102
+ "tags": {}
123
103
  }
124
104
  ]
125
105
  }
@@ -141,7 +121,7 @@
141
121
  },
142
122
  "cellProps": {
143
123
  "defaultValue": null,
144
- "description": "Additional props to be passed to the cellComponent.\n\n⚠️ This object must not contain either an `columnIndex`, `rowIndex`, or `style` prop.",
124
+ "description": "Additional props to be passed to the cell-rendering component.\nGrid will automatically re-render cells when values in this object change.\n\n⚠️ This object must not contain either an `index` or `style` prop.",
145
125
  "name": "cellProps",
146
126
  "declarations": [
147
127
  {
@@ -171,7 +151,7 @@
171
151
  },
172
152
  "columnWidth": {
173
153
  "defaultValue": null,
174
- "description": "Column width (in pixels) or a function that returns a column width (in pixels) given an index and `cellProps`.",
154
+ "description": "Column width; the following formats are supported:\n- number of pixels (number)\n- percentage of the grid's current width (string)\n- function that returns the row width (in pixels) given an index and `cellProps`",
175
155
  "name": "columnWidth",
176
156
  "declarations": [
177
157
  {
@@ -182,8 +162,11 @@
182
162
  "required": true,
183
163
  "type": {
184
164
  "name": "enum",
185
- "raw": "number | ((index: number, cellProps: CellProps) => number)",
165
+ "raw": "string | number | ((index: number, cellProps: CellProps) => number)",
186
166
  "value": [
167
+ {
168
+ "value": "string"
169
+ },
187
170
  {
188
171
  "value": "number"
189
172
  },
@@ -196,6 +179,58 @@
196
179
  ]
197
180
  }
198
181
  },
182
+ "defaultHeight": {
183
+ "defaultValue": {
184
+ "value": "0"
185
+ },
186
+ "description": "Default height of grid for initial render.\nThis value is important for server rendering.",
187
+ "name": "defaultHeight",
188
+ "declarations": [
189
+ {
190
+ "fileName": "react-window/lib/components/grid/types.ts",
191
+ "name": "TypeLiteral"
192
+ }
193
+ ],
194
+ "required": false,
195
+ "type": {
196
+ "name": "enum",
197
+ "raw": "number | undefined",
198
+ "value": [
199
+ {
200
+ "value": "undefined"
201
+ },
202
+ {
203
+ "value": "number"
204
+ }
205
+ ]
206
+ }
207
+ },
208
+ "defaultWidth": {
209
+ "defaultValue": {
210
+ "value": "0"
211
+ },
212
+ "description": "Default width of grid for initial render.\nThis value is important for server rendering.",
213
+ "name": "defaultWidth",
214
+ "declarations": [
215
+ {
216
+ "fileName": "react-window/lib/components/grid/types.ts",
217
+ "name": "TypeLiteral"
218
+ }
219
+ ],
220
+ "required": false,
221
+ "type": {
222
+ "name": "enum",
223
+ "raw": "number | undefined",
224
+ "value": [
225
+ {
226
+ "value": "undefined"
227
+ },
228
+ {
229
+ "value": "number"
230
+ }
231
+ ]
232
+ }
233
+ },
199
234
  "gridRef": {
200
235
  "defaultValue": null,
201
236
  "description": "Ref used to interact with this component's imperative API.\n\nThis API has imperative methods for scrolling and a getter for the outermost DOM element.\n\n⚠️ The `useGridRef` and `useGridCallbackRef` hooks are exported for convenience use in TypeScript projects.",
@@ -332,7 +367,7 @@
332
367
  },
333
368
  "rowHeight": {
334
369
  "defaultValue": null,
335
- "description": "Row height (in pixels) or a function that returns a row height (in pixels) given an index and `cellProps`.",
370
+ "description": "Row height; the following formats are supported:\n- number of pixels (number)\n- percentage of the grid's current height (string)\n- function that returns the row height (in pixels) given an index and `cellProps`",
336
371
  "name": "rowHeight",
337
372
  "declarations": [
338
373
  {
@@ -343,8 +378,11 @@
343
378
  "required": true,
344
379
  "type": {
345
380
  "name": "enum",
346
- "raw": "number | ((index: number, cellProps: CellProps) => number)",
381
+ "raw": "string | number | ((index: number, cellProps: CellProps) => number)",
347
382
  "value": [
383
+ {
384
+ "value": "string"
385
+ },
348
386
  {
349
387
  "value": "number"
350
388
  },
package/docs/generated/js-docs/List.json CHANGED
@@ -249,7 +249,7 @@
249
249
  },
250
250
  "rowHeight": {
251
251
  "defaultValue": null,
252
- "description": "Row height (in pixels) or a function that returns a row height (in pixels) given its index and `rowProps` data.",
252
+ "description": "Row height; the following formats are supported:\n- number of pixels (number)\n- percentage of the grid's current height (string)\n- function that returns the row height (in pixels) given an index and `cellProps`",
253
253
  "name": "rowHeight",
254
254
  "declarations": [
255
255
  {
@@ -260,13 +260,16 @@
260
260
  "required": true,
261
261
  "type": {
262
262
  "name": "enum",
263
- "raw": "number | ((index: number, rowProps: RowProps) => number)",
263
+ "raw": "string | number | ((index: number, cellProps: RowProps) => number)",
264
264
  "value": [
265
+ {
266
+ "value": "string"
267
+ },
265
268
  {
266
269
  "value": "number"
267
270
  },
268
271
  {
269
- "value": "(index: number, rowProps: RowProps) => number",
272
+ "value": "(index: number, cellProps: RowProps) => number",
270
273
  "description": "",
271
274
  "fullComment": "",
272
275
  "tags": {}
@@ -276,7 +279,7 @@
276
279
  },
277
280
  "rowProps": {
278
281
  "defaultValue": null,
279
- "description": "Additional props to be passed to the rowComponent.\n\n⚠️ This object must not contain either an `index` or `style` prop.",
282
+ "description": "Additional props to be passed to the row-rendering component.\nList will automatically re-render rows when values in this object change.\n\n⚠️ This object must not contain either an `index` or `style` prop.",
280
283
  "name": "rowProps",
281
284
  "declarations": [
282
285
  {
package/docs/index.html CHANGED
@@ -20,8 +20,8 @@
20
20
  />
21
21
  <meta property="og:image:width" content="1500" />
22
22
  <meta property="og:image:height" content="500" />
23
- <script type="module" crossorigin src="/assets/index-DcPBnht2.js"></script>
24
- <link rel="stylesheet" crossorigin href="/assets/index-BsBvdJUI.css">
23
+ <script type="module" crossorigin src="/assets/index-DoMrhaC7.js"></script>
24
+ <link rel="stylesheet" crossorigin href="/assets/index-BRVPsmMd.css">
25
25
  </head>
26
26
  <body>
27
27
  <div id="root"></div>