react-window 1.8.10 → 2.0.0-alpha.0

package/docs/favicon.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="128" height="128" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+  <style>
+    path {
+    fill: #007bff;
+    }
+    @media (prefers-color-scheme: dark) {
+      path {
+        fill: #ffffff;
+      }
+    }
+  </style>
+  </defs>
+  <path d="M25.307 16c2.888-4.481 3.597-8.662 1.476-10.783-2.124-2.123-6.32-1.408-10.814 1.497-1.005-0.675-2.157-1.302-3.366-1.821l-0.139-0.053c-3.162-1.267-5.737-1.134-7.247 0.377-1.509 1.509-1.643 4.083-0.377 7.247 0.572 1.349 1.199 2.501 1.923 3.583l-0.049-0.078c-2.905 4.494-3.622 8.691-1.497 10.816 0.816 0.766 1.917 1.236 3.127 1.236 0.079 0 0.158-0.002 0.236-0.006l-0.011 0c2.811-0.217 5.356-1.198 7.473-2.734l-0.042 0.029c2.075 1.507 4.621 2.488 7.382 2.702l0.050 0.003c0.066 0.003 0.144 0.005 0.222 0.005 1.212 0 2.315-0.471 3.134-1.24l-0.002 0.002c2.119-2.12 1.41-6.302-1.478-10.784zM23.43 6.464c0.050-0.004 0.107-0.006 0.166-0.006 0.544 0 1.041 0.199 1.423 0.529l-0.003-0.002c1.011 1.011 0.517 3.67-1.301 6.799-0.844-1.063-1.691-2.011-2.588-2.909l0 0c-0.901-0.891-1.857-1.733-2.86-2.517l-0.072-0.054c1.484-0.988 3.266-1.648 5.187-1.835l0.047-0.004zM12.642 12.642c1.020-1.020 2.114-1.966 3.273-2.829l0.079-0.056c1.243 0.92 2.341 1.867 3.365 2.886l0.001-0.001c1.017 1.021 1.96 2.117 2.82 3.278l0.056 0.080c-0.917 1.242-1.861 2.338-2.879 3.361l0.001-0.001c-1.020 1.017-2.116 1.96-3.277 2.82l-0.080 0.056c-1.242-0.917-2.338-1.861-3.36-2.879l0.001 0.001c-1.016-1.021-1.96-2.116-2.822-3.275l-0.057-0.080c0.917-1.242 1.861-2.339 2.879-3.362l-0.001 0.001zM7.161 11.535c-0.846-2.114-0.912-3.815-0.177-4.551 0.378-0.32 0.87-0.515 1.409-0.515 0.061 0 0.121 0.003 0.181 0.007l-0.008-0.001c1.083 0.048 2.097 0.295 3.022 0.706l-0.053-0.021c0.882 0.368 1.62 0.745 2.327 1.17l-0.079-0.044c-2.057 1.634-3.862 3.439-5.443 5.428l-0.052 0.068c-0.381-0.627-0.758-1.366-1.082-2.132l-0.043-0.116zM6.984 25.018c-1.013-1.015-0.513-3.686 1.317-6.824 0.839 1.075 1.681 2.031 2.576 2.935l-0.003-0.003c0.899 0.897 1.849 1.743 2.846 2.534l0.069 0.053c-3.129 1.82-5.79 2.314-6.805 1.306zM25.018 25.016c-1.009 1.013-3.673 0.518-6.806-1.304 1.065-0.843 2.015-1.689 2.914-2.585l-0.001 0.001c0.898-0.898 1.745-1.847 2.537-2.843l0.053-0.068c1.819 3.129 2.313 5.788 1.303 6.8zM16 19.25c1.795 0 3.25-1.455 3.25-3.25s-1.455-3.25-3.25-3.25c-1.795 0-3.25 1.455-3.25 3.25v0c0.002 1.794 1.456 3.248 3.25 3.25h0zM16 15.25c0.414 0 0.75 0.336 0.75 0.75s-0.336 0.75-0.75 0.75c-0.414 0-0.75-0.336-0.75-0.75v0c0.001-0.414 0.336-0.749 0.75-0.75h0z"></path>
+</svg>

package/docs/generated/README.md

@@ -0,0 +1 @@
+The contents of this folder are generated automatically. Do not edit them by hand.

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\"></span><br/><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\">contacts</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\">rowIndex</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><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">contacts</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">rowIndex</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">content</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">indexToColumn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">columnIndex</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><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\">\"truncate\"</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><br/><span class=\"\">      </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">content</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">type </span><span class=\"\">GridComponentProps </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><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-propertyName\">contacts</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">columnIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">rowIndex</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">style</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">GridComponentProps</span><span class=\"tok-operator\">&#60;</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-labelName\">contacts</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">Contact</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">) </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  const address = contacts[rowIndex];</span><br/><span class=\"\">  const content = address[indexToColumn(columnIndex)];</span><br/><span class=\"\"></span><br/><span class=\"\">  return (</span><br/><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\">\"truncate\"</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><br/><span class=\"\">      </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">content</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><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><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<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><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">string</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><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><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">names</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\"></span><br/><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\">names</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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex items-center\"</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><br/><span class=\"\">      </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">type </span><span class=\"\">RowComponentProps </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><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">names</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">style</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"tok-operator\">&#60;</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-labelName\">names</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">string</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">) </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  return (</span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex items-center\"</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><br/><span class=\"\">      </span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">names</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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"h-55 flex flex-col\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 font-bold bg-teal-600 p-1 px-2\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"grow\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">City</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">State</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-15\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">Zip</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-hidden\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><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><br/><span class=\"\">          </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">addresses</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">          </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">          </span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">RowComponent</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">address</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">addresses</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 px-2\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"grow\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">state</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-15\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">postalCode</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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">type </span><span class=\"\">RowComponentProps </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><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"h-55 flex flex-col\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 font-bold bg-teal-600 p-1 px-2\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"grow\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">City</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">State</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-15\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">Zip</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"overflow-hidden\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><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><br/><span class=\"\">          </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">addresses</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">          </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">          </span><span class=\"tok-propertyName\">rowProps</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-propertyName tok-definition\">addresses</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">        </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-propertyName\">index</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">addresses</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName\">style</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">RowComponentProps</span><span class=\"tok-operator\">&#60;</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-labelName\">addresses</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">Address</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">) </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  const address = addresses[index];</span><br/><span class=\"\"></span><br/><span class=\"\">  return (</span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"flex flex-row items-center gap-2 px-2\"</span><span class=\"\"> </span><span class=\"tok-propertyName\">style</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">style</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"grow\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">city</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-10\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">state</span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">div</span><span class=\"\"> </span><span class=\"tok-propertyName\">className</span><span class=\"tok-operator\">=</span><span class=\"tok-string\">\"w-15\"</span><span class=\"tok-punctuation\">&#62;</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">address</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">postalCode</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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\"></span><br/><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\">contacts</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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Grid</span><span class=\"\"></span><br/><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><br/><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\">contacts</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">columnCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">10</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><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><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">contacts</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<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><br/><span class=\"\"></span><br/><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\">contacts</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\">contacts</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Contact</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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Grid</span><span class=\"\"></span><br/><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><br/><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\">contacts</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">columnCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">10</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><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><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowCount</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">contacts</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">length</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-propertyName\">rowHeight</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-number\">25</span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"></span><br/><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><br/><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><br/><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><br/><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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-variableName\">items</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">type</span><span class=\"\"> </span><span class=\"tok-operator\">===</span><span class=\"\"> </span><span class=\"tok-string\">\"state\"</span><span class=\"\"> </span><span class=\"tok-operator\">?</span><span class=\"\"> </span><span class=\"tok-number\">35</span><span class=\"\"> </span><span class=\"tok-operator\">:</span><span class=\"\"> </span><span class=\"tok-number\">20</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><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><br/><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><br/><span class=\"\"></span><br/><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><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><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><br/><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\">value</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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-variableName tok-definition\">List</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-variableName tok-definition\">type </span><span class=\"\">ListImperativeAPI</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-variableName tok-definition\">type </span><span class=\"\">RowComponentProps</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><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><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-variableName\">type </span><span class=\"tok-variableName\">Item</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"></span><br/><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-labelName\">value</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">string</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">  | </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-labelName\">type</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"zipcode\"</span><span class=\"tok-punctuation\">;</span><span class=\"\"> </span><span class=\"tok-labelName\">value</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">string</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-variableName\">type </span><span class=\"tok-variableName\">RowProps</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-propertyName tok-definition\">items</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-variableName\">Item</span><span class=\"tok-punctuation\">[</span><span class=\"tok-punctuation\">]</span><span class=\"\">;</span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"\"></span><br/><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><br/><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><br/><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><br/><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><br/><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><br/><span class=\"\">    </span><span class=\"tok-string2\">/&#62;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-variableName\">items</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">type</span><span class=\"\"> </span><span class=\"tok-operator\">===</span><span class=\"\"> </span><span class=\"tok-string\">\"state\"</span><span class=\"\"> </span><span class=\"tok-operator\">?</span><span class=\"\"> </span><span class=\"tok-number\">35</span><span class=\"\"> </span><span class=\"tok-operator\">:</span><span class=\"\"> </span><span class=\"tok-number\">20</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><br/><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=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">RowProps</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\">) </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  const item = items[index];</span><br/><span class=\"\"></span><br/><span class=\"\">  const className = getClassName(item);</span><br/><span class=\"\"></span><br/><span class=\"\">  return (</span><br/><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><br/><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\">value</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><br/><span class=\"\">    </span><span class=\"tok-punctuation\">&#60;/</span><span class=\"tok-typeName\">div</span><span class=\"tok-punctuation\">&#62;</span><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\"></span><br/><span class=\"\">  );</span><br/><span class=\"\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">columnWidth</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">index</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">switch</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">indexToColumn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"address\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">250</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"email\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">300</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"job_title\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">150</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"timezone\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">200</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"zipcode\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">75</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">default</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">100</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">columnWidth</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">index</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">number</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">switch</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">indexToColumn</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"address\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">250</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"email\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">300</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"job_title\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">150</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"timezone\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">200</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">case</span><span class=\"\"> </span><span class=\"tok-string\">\"zipcode\"</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">75</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-keyword\">default</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">      </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-number\">100</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">}</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
+}

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

@@ -0,0 +1,3 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">onClick</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">grid</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">gridRef</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">current</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-variableName\">grid</span><span class=\"\">?.</span><span class=\"tok-propertyName\">scrollToCell</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">behavior</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">columnAlign</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">columnIndex</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">10</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">rowAlign</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">rowIndex</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">250</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">;</span>"
+}

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

@@ -0,0 +1,3 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">onClick</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">=&#62;</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">list</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">listRef</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">current</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-variableName\">list</span><span class=\"\">?.</span><span class=\"tok-propertyName\">scrollToRow</span><span class=\"tok-punctuation\">(</span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">align</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">behavior</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-string\">\"auto\"</span><span class=\"tok-punctuation\">,</span><span class=\"\"> </span><span class=\"tok-comment\">// optional</span><span class=\"\"></span><br/><span class=\"\">    </span><span class=\"tok-propertyName tok-definition\">index</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-number\">250</span><span class=\"tok-punctuation\">,</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span><span class=\"tok-punctuation\">;</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-variableName\">items</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">type</span><span class=\"\"> </span><span class=\"tok-operator\">===</span><span class=\"\"> </span><span class=\"tok-string\">\"state\"</span><span class=\"\"> </span><span class=\"tok-operator\">?</span><span class=\"\"> </span><span class=\"tok-number\">35</span><span class=\"\"> </span><span class=\"tok-operator\">:</span><span class=\"\"> </span><span class=\"tok-number\">20</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<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><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-variableName\">items</span><span class=\"tok-punctuation\">[</span><span class=\"tok-variableName\">index</span><span class=\"tok-punctuation\">]</span><span class=\"tok-operator\">.</span><span class=\"tok-propertyName\">type</span><span class=\"\"> </span><span class=\"tok-operator\">===</span><span class=\"\"> </span><span class=\"tok-string\">\"state\"</span><span class=\"\"> </span><span class=\"tok-operator\">?</span><span class=\"\"> </span><span class=\"tok-number\">35</span><span class=\"\"> </span><span class=\"tok-operator\">:</span><span class=\"\"> </span><span class=\"tok-number\">20</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">gridRef</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useGridRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Grid</span><span class=\"\"> </span><span class=\"tok-propertyName\">gridRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">gridRef</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">gridRef</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useGridRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">Grid</span><span class=\"\"> </span><span class=\"tok-propertyName\">gridRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">gridRef</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
+}

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

@@ -0,0 +1,3 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useGridRef</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span>"
+}

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

@@ -0,0 +1,4 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">listRef</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useListRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"> </span><span class=\"tok-propertyName\">listRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">listRef</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>",
+  "typeScript": "<span class=\"tok-keyword\">function</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">Example</span><span class=\"tok-punctuation\">(</span><span class=\"tok-variableName tok-definition\">props</span><span class=\"tok-punctuation\">:</span><span class=\"\"> </span><span class=\"tok-typeName\">Props</span><span class=\"tok-punctuation\">)</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">const</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">listRef</span><span class=\"\"> </span><span class=\"tok-operator\">=</span><span class=\"\"> </span><span class=\"tok-variableName\">useListRef</span><span class=\"tok-punctuation\">(</span><span class=\"tok-keyword\">null</span><span class=\"tok-punctuation\">)</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><br/><span class=\"\">  </span><span class=\"tok-keyword\">return</span><span class=\"\"> </span><span class=\"tok-punctuation\">&#60;</span><span class=\"tok-typeName\">List</span><span class=\"\"> </span><span class=\"tok-propertyName\">listRef</span><span class=\"tok-operator\">=</span><span class=\"tok-punctuation\">{</span><span class=\"tok-variableName\">listRef</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"tok-punctuation\">...</span><span class=\"tok-variableName\">props</span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-punctuation\">/&#62;</span><span class=\"tok-punctuation\">;</span><span class=\"\"></span><br/><span class=\"\"></span><span class=\"tok-punctuation\">}</span>"
+}

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

@@ -0,0 +1,3 @@
+{
+  "javaScript": "<span class=\"tok-keyword\">import</span><span class=\"\"> </span><span class=\"tok-punctuation\">{</span><span class=\"\"> </span><span class=\"tok-variableName tok-definition\">useListRef</span><span class=\"\"> </span><span class=\"tok-punctuation\">}</span><span class=\"\"> </span><span class=\"tok-keyword\">from</span><span class=\"\"> </span><span class=\"tok-string\">\"react-window\"</span><span class=\"tok-punctuation\">;</span>"
+}