react-window 2.0.0-alpha.4 → 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 +75 -35
  4. package/dist/react-window.js +488 -395
  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 +110 -45
  16. package/docs/generated/js-docs/List.json +79 -49
  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-D8tyZCWm.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.",
@@ -262,6 +297,33 @@
262
297
  ]
263
298
  }
264
299
  },
300
+ "onResize": {
301
+ "defaultValue": null,
302
+ "description": "Callback notified when the Grid's outermost HTMLElement resizes.\nThis may be used to (re)scroll a cell into view.",
303
+ "name": "onResize",
304
+ "declarations": [
305
+ {
306
+ "fileName": "react-window/lib/components/grid/types.ts",
307
+ "name": "TypeLiteral"
308
+ }
309
+ ],
310
+ "required": false,
311
+ "type": {
312
+ "name": "enum",
313
+ "raw": "((size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void) | undefined",
314
+ "value": [
315
+ {
316
+ "value": "undefined"
317
+ },
318
+ {
319
+ "value": "(size: { height: number; width: number; }, prevSize: { height: number; width: number; }) => void",
320
+ "description": "",
321
+ "fullComment": "",
322
+ "tags": {}
323
+ }
324
+ ]
325
+ }
326
+ },
265
327
  "overscanCount": {
266
328
  "defaultValue": {
267
329
  "value": "3"
@@ -305,7 +367,7 @@
305
367
  },
306
368
  "rowHeight": {
307
369
  "defaultValue": null,
308
- "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`",
309
371
  "name": "rowHeight",
310
372
  "declarations": [
311
373
  {
@@ -316,8 +378,11 @@
316
378
  "required": true,
317
379
  "type": {
318
380
  "name": "enum",
319
- "raw": "number | ((index: number, cellProps: CellProps) => number)",
381
+ "raw": "string | number | ((index: number, cellProps: CellProps) => number)",
320
382
  "value": [
383
+ {
384
+ "value": "string"
385
+ },
321
386
  {
322
387
  "value": "number"
323
388
  },