react-window 2.1.0 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-window",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [
@@ -25,8 +25,8 @@
     "build:docs": "TARGET=docs vite build",
     "build:lib": "TARGET=lib vite build",
     "compile": "pnpm run compile:code-snippets && pnpm run compile:docs",
-    "compile:code-snippets": "node ./scripts/code-snippets/run.mjs",
-    "compile:docs": "node ./scripts/docs/run.mjs",
+    "compile:code-snippets": "node --loader ts-node/esm ./scripts/code-snippets/run.ts",
+    "compile:docs": "node --loader ts-node/esm ./scripts/docs/run.ts",
     "lint": "eslint .",
     "prerelease": "rm -rf dist && rm -rf docs && pnpm run build",
     "prettier": "prettier --write \"**/*.{css,html,js,json,jsx,ts,tsx}\"",
@@ -87,6 +87,7 @@
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11",
     "ts-blank-space": "^0.6.2",
+    "ts-node": "^10.9.2",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "typescript-json-schema": "^0.65.1",

package/docs/assets/AriaRolesRoute-Bp1v1tTi.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{F as p}from"./FormattedCode-DJTpo7zC.js";import{H as t}from"./Header-CDZFHeTb.js";const c={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class="tok-punctuation">&#62;</span><span class="">City</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class="">State</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class="tok-punctuation">&#62;</span><span class="">Zip</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"3"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},e={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Add 1 to the row index to account for the header row</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"table"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1000</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">City</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">State</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"columnheader"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class="">Zip</span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"rowgroup"</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">otherListProps</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Add 1 to the row index to account for the header row</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">2</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"cell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">3</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class="">...</span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function o(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Tables",title:"ARIA roles"}),s.jsxs("div",{children:["The default ARIA role set by the ",s.jsx("code",{children:"List"})," component is"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list"})," ",", but the"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role",children:"table"})," ","role is more appropriate for tabular data."]}),s.jsx(p,{markdown:c}),s.jsx("div",{children:"The example on the previous page can be modified like so to assign the correct ARIA attributes:"}),s.jsx(p,{markdown:e})]})}export{o as default};
-//# sourceMappingURL=AriaRolesRoute-Bp1v1tTi.js.map

package/docs/assets/AriaRolesRoute-Bp1v1tTi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AriaRolesRoute-Bp1v1tTi.js","sources":["../../src/routes/tables/AriaRolesRoute.tsx"],"sourcesContent":["import TableAriaAttributesMarkdown from \"../../../public/generated/code-snippets/TableAriaAttributes.json\";\nimport TableAriaOverridePropsMarkdown from \"../../../public/generated/code-snippets/TableAriaOverrideProps.json\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Tables\" title=\"ARIA roles\" />\n      <div>\n        The default ARIA role set by the <code>List</code> component is{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n          list\n        </ExternalLink>{\" \"}\n        , but the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/table_role\">\n          table\n        </ExternalLink>{\" \"}\n        role is more appropriate for tabular data.\n      </div>\n      <FormattedCode markdown={TableAriaAttributesMarkdown} />\n      <div>\n        The example on the previous page can be modified like so to assign the\n        correct ARIA attributes:\n      </div>\n      <FormattedCode markdown={TableAriaOverridePropsMarkdown} />\n    </Box>\n  );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","TableAriaAttributesMarkdown","TableAriaOverridePropsMarkdown"],"mappings":"27+BAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,SAASC,MAAM,sBAC9B,MAAA,CAAIJ,SAAA,CAAA,sCAC8BC,IAAC,QAAKD,SAAA,SAAW,gBAAc,IAChEC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,SAE/F,IAAI,YACV,IACVC,EAAAA,IAACI,EAAA,CAAaC,KAAK,6FAA6FN,SAAA,UAEhG,IAAI,kDAGtBC,IAACM,EAAA,CAAcC,SAAUC,MACzBR,IAAC,OAAID,SAAA,sGAILC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}

package/docs/assets/AriaRolesRoute-CH6BGZED.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{F as p}from"./FormattedCode-DJTpo7zC.js";import{H as t}from"./Header-CDZFHeTb.js";const e={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"grid"</span><span class=""> </span><span class="tok-propertyName">aria-colcount</span><span class="tok-operator">=</span><span class="tok-string">"100"</span><span class=""> </span><span class="tok-propertyName">aria-rowcount</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"row"</span><span class=""> </span><span class="tok-propertyName">aria-rowindex</span><span class="tok-operator">=</span><span class="tok-string">"0"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"gridcell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"0"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"gridcell"</span><span class=""> </span><span class="tok-propertyName">aria-colindex</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More columns ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},c={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">ariaAttributes</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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-comment">/* Data */</span><span class="">}</span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">CellComponentProps</span><span class="">&#60;</span><span class="tok-typeName">object</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-comment">/* Data */</span><span class="">}</span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function i(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(t,{section:"Grids",title:"ARIA roles"}),s.jsxs("div",{children:["The ARIA"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role",children:"grid role"})," ","can be used to identify an element that contains one or more rows of cells."]}),s.jsx(p,{markdown:e}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"Grid"})," component automatically adds this role to the root HTMLDivElement it renders, but because individual cells are rendered by your code- you must assign ARIA attributes to those elements."]}),s.jsxs("div",{children:["To simplify this, the recommended ARIA attributes are passed to the"," ",s.jsx("code",{children:"cellComponent"})," in the form of the"," ",s.jsx("code",{children:"ariaAttributes"})," prop. The easiest way to use them is just to pass them through like so:"]}),s.jsx(p,{markdown:c})]})}export{i as default};
-//# sourceMappingURL=AriaRolesRoute-CH6BGZED.js.map

package/docs/assets/AriaRolesRoute-CH6BGZED.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AriaRolesRoute-CH6BGZED.js","sources":["../../src/routes/grid/AriaRolesRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport GridAriaRolesMarkdown from \"../../../public/generated/code-snippets/GridAriaRoles.json\";\nimport CellComponentAriaRolesMarkdown from \"../../../public/generated/code-snippets/CellComponentAriaRoles.json\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Grids\" title=\"ARIA roles\" />\n      <div>\n        The ARIA{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/grid_role\">\n          grid role\n        </ExternalLink>{\" \"}\n        can be used to identify an element that contains one or more rows of\n        cells.\n      </div>\n      <FormattedCode markdown={GridAriaRolesMarkdown} />\n      <div>\n        The <code>Grid</code> component automatically adds this role to the root\n        HTMLDivElement it renders, but because individual cells are rendered by\n        your code- you must assign ARIA attributes to those elements.\n      </div>\n      <div>\n        To simplify this, the recommended ARIA attributes are passed to the{\" \"}\n        <code>cellComponent</code> in the form of the{\" \"}\n        <code>ariaAttributes</code> prop. The easiest way to use them is just to\n        pass them through like so:\n      </div>\n      <FormattedCode markdown={CellComponentAriaRolesMarkdown} />\n    </Box>\n  );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","GridAriaRolesMarkdown","CellComponentAriaRolesMarkdown"],"mappings":"otUAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,sBAC7B,MAAA,CAAIJ,SAAA,CAAA,WACM,IACTC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,cAE/F,IAAI,mFAItBC,IAACM,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIT,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,SAAW,sMAItB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEC,IAAC,QAAKD,SAAA,kBAAoB,sBAAoB,MAC9CC,IAAC,QAAKD,SAAA,mBAAqB,gFAG7BC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}

package/docs/assets/AriaRolesRoute-DtxQ1Zyb.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n}from"./index-1kZ13GgQ.js";import{F as t}from"./FormattedCode-DJTpo7zC.js";import{H as p}from"./Header-CDZFHeTb.js";const e={html:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"list"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"listitem"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-posinset</span><span class="tok-operator">=</span><span class="tok-string">"1"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-setsize</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class="">Row 1</span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">role</span><span class="tok-operator">=</span><span class="tok-string">"listitem"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-posinset</span><span class="tok-operator">=</span><span class="tok-string">"2"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">aria-setsize</span><span class="tok-operator">=</span><span class="tok-string">"1000"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class="">Row 2</span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">&#60;!-- More rows ... --&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span></div>'},i={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">ariaAttributes</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">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">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></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">ariaAttributes</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">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="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">ariaAttributes</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">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></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function c(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(p,{section:"Lists",title:"ARIA roles"}),s.jsxs("div",{children:["The ARIA"," ",s.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role",children:"list role"})," ","can be used to identify a list of items."]}),s.jsx(t,{markdown:e}),s.jsxs("div",{children:["The ",s.jsx("code",{children:"List"})," component automatically adds this role to the root HTMLDivElement it renders, but because individual rows are rendered by your code- you must assign ARIA attributes to those elements."]}),s.jsxs("div",{children:["To simplify this, the recommended ARIA attributes are passed to the"," ",s.jsx("code",{children:"rowComponent"})," in the form of the ",s.jsx("code",{children:"ariaAttributes"})," ","prop. The easiest way to use them is just to pass them through like so:"]}),s.jsx(t,{markdown:i})]})}export{c as default};
-//# sourceMappingURL=AriaRolesRoute-DtxQ1Zyb.js.map

package/docs/assets/AriaRolesRoute-DtxQ1Zyb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"AriaRolesRoute-DtxQ1Zyb.js","sources":["../../src/routes/list/AriaRolesRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport ListAriaRolesMarkdown from \"../../../public/generated/code-snippets/ListAriaRoles.json\";\nimport RowComponentAriaRolesMarkdown from \"../../../public/generated/code-snippets/RowComponentAriaRoles.json\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\n\nexport default function AriaRolesRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"ARIA roles\" />\n      <div>\n        The ARIA{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role\">\n          list role\n        </ExternalLink>{\" \"}\n        can be used to identify a list of items.\n      </div>\n      <FormattedCode markdown={ListAriaRolesMarkdown} />\n      <div>\n        The <code>List</code> component automatically adds this role to the root\n        HTMLDivElement it renders, but because individual rows are rendered by\n        your code- you must assign ARIA attributes to those elements.\n      </div>\n      <div>\n        To simplify this, the recommended ARIA attributes are passed to the{\" \"}\n        <code>rowComponent</code> in the form of the <code>ariaAttributes</code>{\" \"}\n        prop. The easiest way to use them is just to pass them through like so:\n      </div>\n      <FormattedCode markdown={RowComponentAriaRolesMarkdown} />\n    </Box>\n  );\n}\n"],"names":["AriaRolesRoute","jsxs","Box","direction","gap","children","jsx","Header","section","title","ExternalLink","href","FormattedCode","markdown","ListAriaRolesMarkdown","RowComponentAriaRolesMarkdown"],"mappings":"uiXAOA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,sBAC7B,MAAA,CAAIJ,SAAA,CAAA,WACM,IACTC,EAAAA,IAACI,EAAA,CAAaC,KAAK,4FAA4FN,SAAA,cAE/F,IAAI,gDAGtBC,IAACM,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIT,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,SAAW,qMAItB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEC,IAAC,QAAKD,SAAA,iBAAmB,yBAAoBC,IAAC,QAAKD,SAAA,mBAAsB,IAAI,+EAG/EC,IAACM,EAAA,CAAcC,SAAUE,MAG/B"}

package/docs/assets/CellComponent.example-Cmj5vj6U.js

@@ -1,2 +0,0 @@
-import{j as s}from"./index-1kZ13GgQ.js";import{i as t}from"./useContacts-CGODVxAU.js";function n({contacts:n,columnIndex:e,rowIndex:o,style:r}){const c=n[o][t(e)];return s.jsx("div",{className:"truncate",style:r,children:c})}export{n as C};
-//# sourceMappingURL=CellComponent.example-Cmj5vj6U.js.map

package/docs/assets/ContinueLink-jysYO6ZF.js

@@ -1,2 +0,0 @@
-import{j as t,L as i}from"./index-1kZ13GgQ.js";function n({title:n,to:o}){return t.jsxs("div",{children:["Continue to ",t.jsx(i,{to:o,children:n}),"…"]})}export{n as C};
-//# sourceMappingURL=ContinueLink-jysYO6ZF.js.map

package/docs/assets/FixedHeightList-HNBwl6P8.js

@@ -1,2 +0,0 @@
-const s={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">25</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">25</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};export{s as c};
-//# sourceMappingURL=FixedHeightList-HNBwl6P8.js.map

package/docs/assets/FixedHeightList-HNBwl6P8.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FixedHeightList-HNBwl6P8.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/docs/assets/FixedRowHeightsRoute-DX-Q4QkL.js

@@ -1,2 +0,0 @@
-import{j as a,B as n,C as s,E as e}from"./index-1kZ13GgQ.js";import{c as t}from"./FixedHeightList-HNBwl6P8.js";import{B as o}from"./arePropsEqual-Bd1V-lj7.js";import{F as i}from"./FormattedCode-DJTpo7zC.js";import{C as p}from"./ContinueLink-jysYO6ZF.js";import{H as l}from"./Header-CDZFHeTb.js";import{L as r}from"./List-BgVuV26Q.js";const c=JSON.parse('["Aaden","Aarav","Aaron","Abdiel","Abdullah","Abel","Abraham","Abram","Ace","Achilles","Adam","Adan","Aden","Adonis","Adrian","Adriel","Adrien","Agustin","Ahmad","Ahmed","Aidan","Aiden","Alan","Alaric","Albert","Alberto","Alden","Aldo","Alec","Alejandro","Alessandro","Alex","Alexander","Alexis","Alexzander","Alfonso","Alfred","Alfredo","Ali","Alijah","Alistair","Allan","Allen","Alonso","Alonzo","Alvaro","Alvin","Amari","Ameer","Amir","Amos","Anakin","Anders","Anderson","Andre","Andres","Andrew","Andy","Angel","Angelo","Anson","Anthony","Anton","Antonio","Apollo","Archer","Ares","Ari","Arian","Ariel","Arjun","Arlo","Armando","Armani","Aron","Arthur","Arturo","Aryan","Asa","Asher","Ashton","Atlas","Atticus","August","Augustine","Augustus","Austin","Avery","Avi","Axel","Axl","Axton","Ayaan","Ayan","Ayden","Aydin","Azariah","Barrett","Baylor","Beau","Beckett","Beckham","Ben","Benjamin","Bennett","Benson","Bentlee","Bentley","Benton","Billy","Bishop","Bjorn","Blaine","Blaise","Blake","Blaze","Bo","Bobby","Bodhi","Bodie","Boone","Boston","Bowen","Braden","Bradley","Brady","Brandon","Branson","Brantley","Braxton","Brayan","Brayden","Braydon","Braylen","Braylon","Brayson","Brecken","Brendan","Brenden","Brennan","Brentley","Brett","Brian","Briar","Bridger","Briggs","Brixton","Brock","Brodie","Brody","Bronson","Brooks","Bruce","Bruno","Bryan","Bryant","Bryce","Brycen","Brysen","Bryson","Byron","Cade","Caden","Caiden","Cain","Cairo","Caleb","Callan","Callen","Callum","Calvin","Camden","Camdyn","Cameron","Camilo","Camron","Canaan","Cannon","Carl","Carlos","Carmelo","Carson","Carter","Case","Casen","Casey","Cash","Cason","Caspian","Cassius","Castiel","Cayden","Cayson","Cedric","Cesar","Chad","Chaim","Chance","Chandler","Channing","Charles","Charlie","Chase","Chris","Christian","Christopher","Clark","Clay","Clayton","Clyde","Cody","Coen","Cohen","Colby","Cole","Coleman","Colin","Collin","Colson","Colt","Colten","Colton","Conner","Connor","Conor","Conrad","Cooper","Corbin","Corey","Cory","Craig","Crew","Cristian","Cristiano","Crosby","Cruz","Cullen","Curtis","Cyrus","Dakota","Dallas","Dalton","Damari","Damian","Damien","Damon","Dane","Dangelo","Daniel","Danny","Dante","Darian","Dariel","Dario","Darius","Darrell","Darren","Darwin","Dash","Davian","David","Davion","Davis","Dawson","Dax","Daxton","Dayton","Deacon","Dean","Deandre","Decker","Declan","Demetrius","Dennis","Denver","Derek","Derrick","Desmond","Devin","Devon","Dexter","Diego","Dilan","Dillon","Dimitri","Dominic","Dominick","Dominik","Dominique","Donald","Donovan","Dorian","Douglas","Drake","Draven","Drew","Duke","Duncan","Dustin","Dwayne","Dylan","Eason","Easton","Eddie","Eden","Edgar","Edison","Eduardo","Edward","Edwin","Eli","Elian","Elias","Eliezer","Elijah","Eliseo","Elisha","Elliot","Elliott","Ellis","Emanuel","Emerson","Emery","Emiliano","Emilio","Emmanuel","Emmet","Emmett","Emmitt","Emory","Enoch","Enrique","Enzo","Ephraim","Eric","Erick","Erik","Ernest","Ernesto","Esteban","Ethan","Eugene","Evan","Everett","Ezekiel","Ezequiel","Ezra","Fabian","Felipe","Felix","Fernando","Finley","Finn","Finnegan","Finnley","Fisher","Fletcher","Flynn","Ford","Forrest","Foster","Fox","Francis","Francisco","Franco","Frank","Frankie","Franklin","Frederick","Gabriel","Gael","Gage","Gannon","Garrett","Gary","Gatlin","Gavin","George","Gerald","Gerardo","Giancarlo","Gianluca","Gianni","Gibson","Gideon","Giovanni","Gordon","Grady","Graham","Grant","Graysen","Grayson","Gregory","Grey","Greysen","Greyson","Griffin","Guillermo","Gunnar","Gunner","Gustavo","Hamza","Hank","Harlan","Harley","Harold","Harper","Harrison","Harry","Harvey","Hassan","Hayden","Hayes","Heath","Hector","Hendrix","Henrik","Henry","Hezekiah","Holden","Houston","Howard","Hudson","Hugh","Hugo","Hunter","Huxley","Ian","Ibrahim","Ignacio","Iker","Ira","Isaac","Isaiah","Isaias","Ishaan","Ismael","Israel","Issac","Ivan","Izaiah","Jabari","Jace","Jack","Jackson","Jacob","Jacoby","Jad","Jaden","Jadiel","Jagger","Jaiden","Jaime","Jairo","Jake","Jakob","Jalen","Jamal","Jamari","James","Jameson","Jamie","Jamir","Jamison","Jared","Jase","Jasiah","Jason","Jasper","Javier","Javion","Javon","Jax","Jaxen","Jaxon","Jaxson","Jaxton","Jaxx","Jaxxon","Jay","Jayce","Jayceon","Jayden","Jaylen","Jayson","Jaziel","Jedidiah","Jefferson","Jeffery","Jeffrey","Jensen","Jeremiah","Jeremias","Jeremy","Jermaine","Jerome","Jerry","Jesse","Jessie","Jesus","Jett","Jimmy","Joaquin","Joe","Joel","Joey","Johan","John","Johnathan","Johnny","Jon","Jonah","Jonas","Jonathan","Jordan","Jordy","Jorge","Jose","Joseph","Joshua","Josiah","Josue","Jovanni","Joziah","Juan","Judah","Jude","Judson","Juelz","Julian","Julien","Julio","Julius","Junior","Justice","Justin","Kace","Kade","Kaden","Kai","Kaiden","Kairo","Kaiser","Kaison","Kaleb","Kalel","Kamari","Kamden","Kameron","Kamryn","Kane","Kannon","Kareem","Karson","Karter","Kase","Kasen","Kash","Kashton","Kason","Kayden","Kaysen","Kayson","Keagan","Keanu","Keaton","Keegan","Keenan","Keith","Kellan","Kellen","Kelvin","Kendall","Kendrick","Kenneth","Kenny","Kevin","Khalid","Khalil","Khari","Kian","Kieran","Killian","King","Kingsley","Kingston","Knox","Koa","Kobe","Koda","Kody","Kohen","Kole","Kolten","Kolton","Konnor","Korbin","Kristian","Kristopher","Kye","Kylan","Kyle","Kylen","Kyler","Kyng","Kyree","Kyrie","Kyson","Lachlan","Lamar","Lance","Landen","Landon","Landry","Landyn","Lane","Langston","Larry","Lawrence","Lawson","Layne","Layton","Leandro","Ledger","Lee","Legend","Leif","Leighton","Leland","Lennon","Lennox","Leo","Leon","Leonard","Leonardo","Leonel","Leonidas","Leroy","Levi","Lewis","Liam","Lincoln","Lionel","Lochlan","Logan","London","Lorenzo","Louie","Louis","Luca","Lucas","Lucca","Lucian","Luciano","Luis","Luka","Lukas","Luke","Lyle","Lyric","Mack","Madden","Maddox","Maddux","Magnus","Maison","Major","Makai","Malachi","Malakai","Malcolm","Malik","Manuel","Marc","Marcel","Marcelo","Marco","Marcos","Marcus","Mario","Mark","Markus","Marley","Marlon","Marshall","Martin","Marvin","Mason","Mateo","Mathew","Mathias","Matias","Matteo","Matthew","Matthias","Maurice","Mauricio","Maverick","Max","Maxim","Maximilian","Maximiliano","Maximo","Maximus","Maxton","Maxwell","Mayson","Mekhi","Melvin","Memphis","Merrick","Messiah","Micah","Michael","Micheal","Miguel","Mike","Milan","Miles","Miller","Milo","Misael","Mitchell","Mohamed","Mohammad","Mohammed","Moises","Morgan","Moses","Moshe","Muhammad","Musa","Mustafa","Myles","Nash","Nasir","Nathan","Nathanael","Nathaniel","Nehemiah","Neil","Nelson","Nicholas","Nickolas","Nico","Nicolas","Niko","Nikolai","Nikolas","Nixon","Noah","Noe","Noel","Nolan","Nova","Oakley","Odin","Oliver","Omar","Omari","Orion","Orlando","Oscar","Otis","Otto","Owen","Pablo","Parker","Patrick","Paul","Paxton","Payton","Pedro","Peter","Peyton","Philip","Phillip","Phoenix","Pierce","Porter","Preston","Prince","Princeton","Quentin","Quincy","Quinn","Quinton","Rafael","Raiden","Ramiro","Ramon","Randall","Randy","Raphael","Rashad","Raul","Ray","Rayan","Rayden","Raylan","Raymond","Reagan","Reece","Reed","Reese","Reginald","Reid","Reign","Remington","Remy","Rene","Reuben","Rex","Rey","Reyansh","Rhett","Rhys","Ricardo","Richard","Ricky","Ridge","Riley","River","Robert","Roberto","Rocco","Rocky","Rodney","Rodrigo","Rogelio","Roger","Rohan","Roland","Roman","Romeo","Ronald","Ronan","Ronin","Ronnie","Rory","Rowan","Rowen","Roy","Royal","Royce","Ruben","Rudy","Russell","Ryan","Ryder","Ryker","Rylan","Ryland","Sage","Salvador","Salvatore","Sam","Samir","Samson","Samuel","Santana","Santiago","Santino","Santos","Saul","Sawyer","Scott","Seamus","Sean","Sebastian","Sergio","Seth","Shane","Shaun","Shawn","Shepard","Shepherd","Shiloh","Shmuel","Silas","Simeon","Simon","Sincere","Skylar","Skyler","Solomon","Sonny","Soren","Spencer","Stanley","Stefan","Stephen","Sterling","Stetson","Steven","Sullivan","Sutton","Sylas","Tadeo","Talon","Tanner","Tate","Tatum","Taylor","Terrance","Terrell","Terrence","Terry","Thaddeus","Thatcher","Theo","Theodore","Thiago","Thomas","Timothy","Titan","Titus","Tobias","Toby","Tomas","Tommy","Tony","Trace","Travis","Trent","Trenton","Trevor","Trey","Tripp","Tristan","Tristen","Tristian","Troy","Tucker","Ty","Tyler","Tyson","Ulises","Uriah","Uriel","Valentin","Valentino","Van","Vance","Vaughn","Vicente","Victor","Vihaan","Vincent","Vincenzo","Vivaan","Wade","Walker","Walter","Warren","Waylon","Wayne","Wells","Wesley","Wesson","Westin","Westley","Weston","Wilder","Will","William","Willie","Wilson","Winston","Wyatt","Xander","Xavier","Xzavier","Yadiel","Yahir","Yahya","Yehuda","Yisroel","Yosef","Yousef","Yusuf","Zachariah","Zachary","Zackary","Zahir","Zaid","Zaiden","Zain","Zaire","Zander","Zane","Zavier","Zayd","Zayden","Zayn","Zayne","Zechariah","Zeke","Zion","Zyaire"]'),d={javaScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',typeScript:'<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">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="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>'};function h({index:n,names:s,style:e}){return a.jsxs("div",{className:"flex items-center justify-between",style:e,children:[s[n],a.jsx("div",{className:"text-slate-500 text-xs",children:`${n+1} of ${s.length}`})]})}function u({names:n}){return a.jsx(r,{rowComponent:h,rowCount:n.length,rowHeight:25,rowProps:{names:n}})}function m(){return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Fixed row heights"}),a.jsx("div",{children:"The simplest type of list to render is one with fixed row heights."}),a.jsx(o,{className:"h-50","data-focus-within":"bold",children:a.jsx(u,{names:c})}),a.jsxs("div",{children:["To render this type of list, you need to specify how many rows it contains (",a.jsx("code",{children:"rowCount"}),"), which component should render rows (",a.jsx("code",{children:"rowComponent"}),"), and the height of each row (",a.jsx("code",{children:"rowHeight"}),"):"]}),a.jsx(i,{markdown:t}),a.jsxs("div",{children:["The ",a.jsx("code",{children:"rowProps"})," object can also be used to share between components. Values passed in ",a.jsx("code",{children:"rowProps"})," will also be passed as props to the row component:"]}),a.jsx(i,{markdown:d}),a.jsx(s,{intent:"warning",children:a.jsxs(n,{direction:"column",gap:4,children:[a.jsxs("div",{children:["Lists require vertical space to render rows. Typically the"," ",a.jsx(e,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),a.jsxs("div",{children:["If an explicit height is specified (in pixels) using the"," ",a.jsx("code",{children:"style"})," prop, ",a.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),a.jsx(p,{to:"/list/variable-row-height",title:"variable row heights"})]})}export{m as default};
-//# sourceMappingURL=FixedRowHeightsRoute-DX-Q4QkL.js.map

package/docs/assets/FixedRowHeightsRoute-DX-Q4QkL.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FixedRowHeightsRoute-DX-Q4QkL.js","sources":["../../src/routes/list/examples/FixedHeightRowComponent.example.tsx","../../src/routes/list/examples/FixedHeightList.example.tsx","../../src/routes/list/FixedRowHeightsRoute.tsx"],"sourcesContent":["import { type RowComponentProps } from \"react-window\";\n\nfunction RowComponent({\n  index,\n  names,\n  style\n}: RowComponentProps<{\n  names: string[];\n}>) {\n  return (\n    <div className=\"flex items-center justify-between\" style={style}>\n      {names[index]}\n      <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${names.length}`}</div>\n    </div>\n  );\n}\n\n// <end>\n\nexport { RowComponent };\n","import { RowComponent } from \"./FixedHeightRowComponent.example\";\n\n// <begin>\n\nimport { List } from \"react-window\";\n\nfunction Example({ names }: { names: string[] }) {\n  return (\n    <List\n      rowComponent={RowComponent}\n      rowCount={names.length}\n      rowHeight={25}\n      rowProps={{ names }}\n    />\n  );\n}\n\n// <end>\n\nexport { Example };\n","import json from \"../../../public/data/names.json\";\nimport FixedHeightListMarkdown from \"../../../public/generated/code-snippets/FixedHeightList.json\";\nimport FixedHeightRowComponentMarkdown from \"../../../public/generated/code-snippets/FixedHeightRowComponent.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/FixedHeightList.example\";\n\nexport default function FixedRowHeightsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Fixed row heights\" />\n      <div>\n        The simplest type of list to render is one with fixed row heights.\n      </div>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        <Example names={json} />\n      </Block>\n      <div>\n        To render this type of list, you need to specify how many rows it\n        contains (<code>rowCount</code>), which component should render rows (\n        <code>rowComponent</code>), and the height of each row (\n        <code>rowHeight</code>):\n      </div>\n      <FormattedCode markdown={FixedHeightListMarkdown} />\n      <div>\n        The <code>rowProps</code> object can also be used to share between\n        components. Values passed in <code>rowProps</code> will also be passed\n        as props to the row component:\n      </div>\n      <FormattedCode markdown={FixedHeightRowComponentMarkdown} />\n      <Callout intent=\"warning\">\n        <Box direction=\"column\" gap={4}>\n          <div>\n            Lists require vertical space to render rows. Typically the{\" \"}\n            <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n              ResizeObserver\n            </ExternalLink>{\" \"}\n            API is used to determine how much space there is available within\n            the parent DOM element.\n          </div>\n          <div>\n            If an explicit height is specified (in pixels) using the{\" \"}\n            <code>style</code> prop, <code>ResizeObserver</code> will not be\n            used.\n          </div>\n        </Box>\n      </Callout>\n      <ContinueLink\n        to=\"/list/variable-row-height\"\n        title=\"variable row heights\"\n      />\n    </Box>\n  );\n}\n"],"names":["RowComponent","index","names","style","jsxs","className","children","jsx","length","Example","List","rowComponent","rowCount","rowHeight","rowProps","FixedRowHeightsRoute","Box","direction","gap","Header","section","title","Block","json","FormattedCode","markdown","FixedHeightListMarkdown","FixedHeightRowComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"g6kBAEA,SAASA,GAAaC,MACpBA,EAAAC,MACAA,EAAAC,MACAA,IAIA,SACEC,KAAC,MAAA,CAAIC,UAAU,oCAAoCF,QAChDG,SAAA,CAAAJ,EAAMD,GACPM,EAAAA,IAAC,MAAA,CAAIF,UAAU,yBAA0BC,SAAA,GAAGL,EAAQ,QAAQC,EAAMM,aAGxE,CCTA,SAASC,GAAQP,MAAEA,IACjB,OACEK,EAAAA,IAACG,EAAA,CACCC,aAAcX,EACdY,SAAUV,EAAMM,OAChBK,UAAW,GACXC,SAAU,CAAEZ,UAGlB,CCHA,SAAwBa,IACtB,OACEX,EAAAA,KAACY,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAC,EAAAA,IAACY,EAAA,CAAOC,QAAQ,QAAQC,MAAM,wBAC9Bd,IAAC,OAAID,SAAA,yEAGLC,IAACe,EAAA,CAAMjB,UAAU,OAAO,oBAAkB,OACxCC,SAAAC,EAAAA,IAACE,EAAA,CAAQP,MAAOqB,aAEjB,MAAA,CAAIjB,SAAA,CAAA,iFAEOC,IAAC,QAAKD,SAAA,aAAe,4CAC/BC,IAAC,QAAKD,SAAA,iBAAmB,oCACzBC,IAAC,QAAKD,SAAA,cAAgB,UAExBC,IAACiB,EAAA,CAAcC,SAAUC,WACxB,MAAA,CAAIpB,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,aAAe,4EACIC,IAAC,QAAKD,SAAA,aAAe,2DAGpDC,IAACiB,EAAA,CAAcC,SAAUE,IACzBpB,EAAAA,IAACqB,GAAQC,OAAO,UACdvB,gBAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,6DACwD,IAC3DC,EAAAA,IAACuB,EAAA,CAAaC,KAAK,kEAAkEzB,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,2DACsD,MACzDC,IAAC,QAAKD,SAAA,UAAY,YAAOC,IAAC,QAAKD,SAAA,mBAAqB,6BAK1DC,EAAAA,IAACyB,EAAA,CACCC,GAAG,4BACHZ,MAAM,2BAId"}

package/docs/assets/FormattedCode-DJTpo7zC.js

@@ -1,2 +0,0 @@
-import{r as e,j as t,c as r}from"./index-1kZ13GgQ.js";function n({className:e="",html:n}){return t.jsx("code",{className:r("text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black","flex flex-col",e),dangerouslySetInnerHTML:{__html:n}})}function s({markdown:s}){const[a,l]=function(t,r){const[n,s]=e.useState(()=>{const e=localStorage.getItem(t);return null!=e?JSON.parse(e):r}),a=e.useRef({prevValue:null,value:JSON.stringify(n)});return e.useLayoutEffect(()=>{a.current.prevValue=a.current.value,a.current.value=JSON.stringify(n)}),e.useLayoutEffect(()=>{const e=e=>{t===e.key&&e.newValue&&e.newValue!==JSON.stringify(n)&&s(JSON.parse(e.newValue))};return window.addEventListener("storage",e),()=>{window.removeEventListener("storage",e)}},[t,n]),e.useLayoutEffect(()=>{window.dispatchEvent(new StorageEvent("storage",{key:t,newValue:a.current.value||"",oldValue:a.current.prevValue||""})),localStorage.setItem(t,a.current.value)},[t,n]),[n,s]}("CodeTabs::tab",!0);if("html"in s)return t.jsx(n,{html:s.html});const o=t.jsx(n,{html:a?s.typeScript??s.javaScript:s.javaScript});return s.typeScript?t.jsxs("div",{className:"relative",children:[o,t.jsxs("button",{className:r("absolute top-2 right-2 p-1 rounded-sm bg-white/10 cursor-pointer hover:text-sky-300 hover:bg-sky-950 text-xs flex flex-row items-center gap-1",{"text-white/50":!a,"text-sky-300 bg-sky-950/50":a}),onClick:()=>l(!a),children:[a?"TS":"JS",t.jsx("div",{className:r("w-2 h-2 rounded",{"bg-green-400":a,"bg-orange-400":!a})})]})]}):o}export{s as F};
-//# sourceMappingURL=FormattedCode-DJTpo7zC.js.map

package/docs/assets/FormattedCode-DJTpo7zC.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FormattedCode-DJTpo7zC.js","sources":["../../src/components/code/Code.tsx","../../src/components/code/FormattedCode.tsx","../../src/hooks/useLocalStorage.ts"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport \"./code-mirror.css\";\n\nexport function Code({\n  className = \"\",\n  html\n}: {\n  className?: string;\n  html: string;\n}) {\n  return (\n    <code\n      className={cn(\n        \"text-xs md:text-sm block text-left whitespace-pre-wrap text-white! rounded-md p-3 bg-black\",\n        \"flex flex-col\",\n        className\n      )}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  );\n}\n","import useLocalStorage from \"../../hooks/useLocalStorage\";\nimport { cn } from \"../../utils/cn\";\nimport { Code } from \"./Code\";\n\ntype Markdown =\n  | {\n      javaScript: string;\n      typeScript?: string;\n    }\n  | {\n      html: string;\n    };\n\nexport function FormattedCode({ markdown }: { markdown: Markdown }) {\n  const [ts, setTS] = useLocalStorage(\"CodeTabs::tab\", true);\n\n  if (\"html\" in markdown) {\n    return <Code html={markdown.html} />;\n  }\n\n  const code = (\n    <Code\n      html={\n        ts ? (markdown.typeScript ?? markdown.javaScript) : markdown.javaScript\n      }\n    />\n  );\n\n  if (!markdown.typeScript) {\n    return code;\n  }\n\n  return (\n    <div className=\"relative\">\n      {code}\n      <button\n        className={cn(\n          \"absolute top-2 right-2 p-1 rounded-sm bg-white/10 cursor-pointer hover:text-sky-300 hover:bg-sky-950 text-xs flex flex-row items-center gap-1\",\n          {\n            \"text-white/50\": !ts,\n            \"text-sky-300 bg-sky-950/50\": ts\n          }\n        )}\n        onClick={() => setTS(!ts)}\n      >\n        {ts ? \"TS\" : \"JS\"}\n        <div\n          className={cn(\"w-2 h-2 rounded\", {\n            \"bg-green-400\": ts,\n            \"bg-orange-400\": !ts\n          })}\n        />\n      </button>\n    </div>\n  );\n}\n","import { useLayoutEffect, useRef, useState } from \"react\";\n\nexport default function useLocalStorage<Type>(\n  key: string,\n  defaultValue: Type\n): [value: Type, setValue: (newValue: Type) => void] {\n  const [value, setValue] = useState<Type>(() => {\n    const storedValue = localStorage.getItem(key);\n    if (storedValue != null) {\n      return JSON.parse(storedValue) as Type;\n    } else {\n      return defaultValue;\n    }\n  });\n\n  const committedValuesRef = useRef<{\n    prevValue: string | null;\n    value: string;\n  }>({\n    prevValue: null,\n    value: JSON.stringify(value)\n  });\n  useLayoutEffect(() => {\n    committedValuesRef.current.prevValue = committedValuesRef.current.value;\n    committedValuesRef.current.value = JSON.stringify(value);\n  });\n\n  // Sync changes from local storage\n  useLayoutEffect(() => {\n    const onStorage = (event: StorageEvent) => {\n      if (\n        key === event.key &&\n        event.newValue &&\n        event.newValue !== JSON.stringify(value)\n      ) {\n        setValue(JSON.parse(event.newValue));\n      }\n    };\n\n    window.addEventListener(\"storage\", onStorage);\n\n    return () => {\n      window.removeEventListener(\"storage\", onStorage);\n    };\n  }, [key, value]);\n\n  // Sync changes to local storage\n  useLayoutEffect(() => {\n    window.dispatchEvent(\n      new StorageEvent(\"storage\", {\n        key,\n        newValue: committedValuesRef.current.value || \"\",\n        oldValue: committedValuesRef.current.prevValue || \"\"\n      })\n    );\n\n    localStorage.setItem(key, committedValuesRef.current.value);\n  }, [key, value]);\n\n  return [value, setValue];\n}\n"],"names":["Code","className","html","jsx","cn","dangerouslySetInnerHTML","__html","FormattedCode","markdown","ts","setTS","key","defaultValue","value","setValue","useState","storedValue","localStorage","getItem","JSON","parse","committedValuesRef","useRef","prevValue","stringify","useLayoutEffect","current","onStorage","event","newValue","window","addEventListener","removeEventListener","dispatchEvent","StorageEvent","oldValue","setItem","useLocalStorage","code","typeScript","javaScript","jsxs","children","onClick"],"mappings":"sDAGO,SAASA,GAAKC,UACnBA,EAAY,GAAAC,KACZA,IAKA,OACEC,EAAAA,IAAC,OAAA,CACCF,UAAWG,EACT,6FACA,gBACAH,GAEFI,wBAAyB,CAAEC,OAAQJ,IAGzC,CCPO,SAASK,GAAcC,SAAEA,IAC9B,MAAOC,EAAIC,GCZb,SACEC,EACAC,GAEA,MAAOC,EAAOC,GAAYC,EAAAA,SAAe,KACvC,MAAMC,EAAcC,aAAaC,QAAQP,GACzC,OAAmB,MAAfK,EACKG,KAAKC,MAAMJ,GAEXJ,IAILS,EAAqBC,EAAAA,OAGxB,CACDC,UAAW,KACXV,MAAOM,KAAKK,UAAUX,KAuCxB,OArCAY,EAAAA,gBAAgB,KACdJ,EAAmBK,QAAQH,UAAYF,EAAmBK,QAAQb,MAClEQ,EAAmBK,QAAQb,MAAQM,KAAKK,UAAUX,KAIpDY,EAAAA,gBAAgB,KACd,MAAME,EAAaC,IAEfjB,IAAQiB,EAAMjB,KACdiB,EAAMC,UACND,EAAMC,WAAaV,KAAKK,UAAUX,IAElCC,EAASK,KAAKC,MAAMQ,EAAMC,YAM9B,OAFAC,OAAOC,iBAAiB,UAAWJ,GAE5B,KACLG,OAAOE,oBAAoB,UAAWL,KAEvC,CAAChB,EAAKE,IAGTY,EAAAA,gBAAgB,KACdK,OAAOG,cACL,IAAIC,aAAa,UAAW,CAC1BvB,MACAkB,SAAUR,EAAmBK,QAAQb,OAAS,GAC9CsB,SAAUd,EAAmBK,QAAQH,WAAa,MAItDN,aAAamB,QAAQzB,EAAKU,EAAmBK,QAAQb,QACpD,CAACF,EAAKE,IAEF,CAACA,EAAOC,EACjB,CD9CsBuB,CAAgB,iBAAiB,GAErD,GAAI,SAAU7B,EACZ,SAAOL,IAACH,EAAA,CAAKE,KAAMM,EAASN,OAG9B,MAAMoC,EACJnC,EAAAA,IAACH,EAAA,CACCE,KACEO,EAAMD,EAAS+B,YAAc/B,EAASgC,WAAchC,EAASgC,aAKnE,OAAKhC,EAAS+B,aAKZE,KAAC,MAAA,CAAIxC,UAAU,WACZyC,SAAA,CAAAJ,EACDG,EAAAA,KAAC,SAAA,CACCxC,UAAWG,EACT,gJACA,CACE,iBAAkBK,EAClB,6BAA8BA,IAGlCkC,QAAS,IAAMjC,GAAOD,GAErBiC,SAAA,CAAAjC,EAAK,KAAO,KACbN,EAAAA,IAAC,MAAA,CACCF,UAAWG,EAAG,kBAAmB,CAC/B,eAAgBK,EAChB,iBAAkBA,YApBnB6B,CA0BX"}

package/docs/assets/GettingStartedRoute-ImtHIz0x.js

@@ -1,2 +0,0 @@
-import{j as e,B as s,E as i,C as t,L as l}from"./index-1kZ13GgQ.js";import{H as o}from"./Header-CDZFHeTb.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(o,{title:"Getting started"}),e.jsxs("div",{children:[e.jsx("strong",{children:"react-window"})," is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from"," ",e.jsx(i,{href:"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en",children:"React DevTools"})," ","to the"," ",e.jsx(i,{href:"https://github.com/replayio/devtools",children:"Replay browser"}),"."]}),e.jsx("div",{className:"text-xl",children:"Installation"}),e.jsx("div",{children:"Begin by installing the library from NPM:"}),e.jsxs("code",{className:"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!",children:["npm install ",e.jsx("span",{className:"tok-keyword",children:"react-window"})]}),e.jsxs(t,{intent:"primary",children:["TypeScript definitions are included within the published"," ",e.jsx("code",{children:"dist"})," folder and documentation is included within the"," ",e.jsx("code",{children:"docs"})," folder."]}),e.jsx("div",{children:"This library provides two basic types of components; choose one below to learn more:"}),e.jsxs("ul",{className:"pl-8",children:[e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/list/fixed-row-height",children:"Lists"})," (vertical scrolling)"]}),e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/grid/grid",children:"Grids"})," (horizontal and vertical scrolling)"]})]}),e.jsxs("div",{children:["Check out the ",e.jsx(l,{to:"/support",children:"support page"})," if you need help."]})]})}export{r as default};
-//# sourceMappingURL=GettingStartedRoute-ImtHIz0x.js.map

package/docs/assets/GettingStartedRoute-ImtHIz0x.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GettingStartedRoute-ImtHIz0x.js","sources":["../../src/routes/GettingStartedRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\nimport { Link } from \"../components/Link\";\n\nexport default function GettingStartedRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Getting started\" />\n      <div>\n        <strong>react-window</strong> is a component library that helps render\n        large lists of data quickly and without the performance problems that\n        often go along with rendering a lot of data. It's used in a lot of\n        places, from{\" \"}\n        <ExternalLink href=\"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\">\n          React DevTools\n        </ExternalLink>{\" \"}\n        to the{\" \"}\n        <ExternalLink href=\"https://github.com/replayio/devtools\">\n          Replay browser\n        </ExternalLink>\n        .\n      </div>\n      <div className=\"text-xl\">Installation</div>\n      <div>Begin by installing the library from NPM:</div>\n      <code className=\"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!\">\n        npm install <span className=\"tok-keyword\">react-window</span>\n      </code>\n      <Callout intent=\"primary\">\n        TypeScript definitions are included within the published{\" \"}\n        <code>dist</code> folder and documentation is included within the{\" \"}\n        <code>docs</code> folder.\n      </Callout>\n      <div>\n        This library provides two basic types of components; choose one below to\n        learn more:\n      </div>\n      <ul className=\"pl-8\">\n        <li className=\"list-disc\">\n          <Link to=\"/list/fixed-row-height\">Lists</Link> (vertical scrolling)\n        </li>\n        <li className=\"list-disc\">\n          <Link to=\"/grid/grid\">Grids</Link> (horizontal and vertical scrolling)\n        </li>\n      </ul>\n      <div>\n        Check out the <Link to=\"/support\">support page</Link> if you need help.\n      </div>\n    </Box>\n  );\n}\n"],"names":["GettingStartedRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","className","Callout","intent","Link","to"],"mappings":"6GAMA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,2BACb,MAAA,CACCH,SAAA,GAAAC,IAAC,UAAOD,SAAA,iBAAqB,kMAGhB,IACbC,EAAAA,IAACG,EAAA,CAAaC,KAAK,wGAAwGL,SAAA,mBAE3G,IAAI,SACb,IACPC,EAAAA,IAACG,EAAA,CAAaC,KAAK,uCAAuCL,SAAA,mBAE3C,OAGjBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,UAAUN,SAAA,mBACzBC,IAAC,OAAID,SAAA,gDACLJ,KAAC,OAAA,CAAKU,UAAU,kGAAkGN,SAAA,CAAA,eACpGC,EAAAA,IAAC,OAAA,CAAKK,UAAU,cAAcN,SAAA,sBAE5CJ,KAACW,EAAA,CAAQC,OAAO,UAAUR,SAAA,CAAA,2DACiC,MACzDC,IAAC,QAAKD,SAAA,SAAW,mDAAiD,MAClEC,IAAC,QAAKD,SAAA,SAAW,gBAEnBC,IAAC,OAAID,SAAA,2FAILJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,yBAAyBV,SAAA,UAAY,6BAEhDJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,aAAaV,SAAA,UAAY,oDAGrC,MAAA,CAAIA,SAAA,CAAA,iBACWC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,WAAWV,SAAA,iBAAmB,0BAI7D"}

package/docs/assets/Grid-vld19V9I.js

@@ -1,2 +0,0 @@
-import{r as e,j as t}from"./index-1kZ13GgQ.js";import{u as o,a as n,b as r}from"./arePropsEqual-Bd1V-lj7.js";function l({cellComponent:l,cellProps:i,children:s,className:a,columnCount:c,columnWidth:d,defaultHeight:u=0,defaultWidth:f=0,dir:m,gridRef:x,onCellsRendered:p,onResize:h,overscanCount:g=3,rowCount:I,rowHeight:v,style:S,tagName:w="div",...C}){const b=o(i),z=e.useMemo(()=>e.memo(l,n),[l]),[T,O]=e.useState(null),E=function(t,o){const[n,r]=e.useState("rtl"===o);return e.useLayoutEffect(()=>{t&&(o||r(function(e){let t=e;for(;t;){if(t.dir)return"rtl"===t.dir;t=t.parentElement}return!1}(t)))},[o,t]),n}(T,m),{getCellBounds:y,getEstimatedSize:R,startIndexOverscan:j,startIndexVisible:H,scrollToIndex:P,stopIndexOverscan:V,stopIndexVisible:A}=r({containerElement:T,defaultContainerSize:f,direction:"horizontal",isRtl:E,itemCount:c,itemProps:b,itemSize:d,onResize:h,overscanCount:g}),{getCellBounds:L,getEstimatedSize:N,startIndexOverscan:W,startIndexVisible:B,scrollToIndex:G,stopIndexOverscan:M,stopIndexVisible:$}=r({containerElement:T,defaultContainerSize:u,direction:"vertical",itemCount:I,itemProps:b,itemSize:v,onResize:h,overscanCount:g});e.useImperativeHandle(x,()=>({get element(){return T},scrollToCell({behavior:e="auto",columnAlign:t="auto",columnIndex:o,rowAlign:n="auto",rowIndex:r}){const l=P({align:t,containerScrollOffset:T?.scrollLeft??0,index:o}),i=G({align:n,containerScrollOffset:T?.scrollTop??0,index:r});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:e,left:l,top:i})},scrollToColumn({align:e="auto",behavior:t="auto",index:o}){const n=P({align:e,containerScrollOffset:T?.scrollLeft??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,left:n})},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const n=G({align:e,containerScrollOffset:T?.scrollTop??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,top:n})}}),[T,P,G]),e.useEffect(()=>{j>=0&&V>=0&&W>=0&&M>=0&&p&&p({columnStartIndex:H,columnStopIndex:A,rowStartIndex:B,rowStopIndex:$},{columnStartIndex:j,columnStopIndex:V,rowStartIndex:W,rowStopIndex:M})},[p,j,H,V,A,W,B,M,$]);const k=e.useMemo(()=>{const o=[];if(c>0&&I>0)for(let n=W;n<=M;n++){const r=L(n),l=[];for(let t=j;t<=V;t++){const o=y(t);l.push(e.createElement(z,{...b,ariaAttributes:{"aria-colindex":t+1,role:"gridcell"},columnIndex:t,key:t,rowIndex:n,style:{position:"absolute",left:E?void 0:0,right:E?0:void 0,transform:`translate(${E?-o.scrollOffset:o.scrollOffset}px, ${r.scrollOffset}px)`,height:I>1?r.size:"100%",width:o.size}}))}o.push(t.jsx("div",{role:"row","aria-rowindex":n+1,children:l},n))}return o},[z,b,c,j,V,y,L,E,I,W,M]),q=t.jsx("div",{"aria-hidden":!0,style:{height:N(),width:R(),zIndex:-1}});return e.createElement(w,{"aria-colcount":c,"aria-rowcount":I,role:"grid",...C,className:a,dir:m,ref:O,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...S}},k,s,q)}export{l as G};
-//# sourceMappingURL=Grid-vld19V9I.js.map

package/docs/assets/Grid-vld19V9I.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Grid-vld19V9I.js","sources":["../../lib/components/grid/Grid.tsx","../../lib/core/useIsRtl.ts","../../lib/utils/isRtl.ts"],"sourcesContent":["import {\n  createElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type ReactNode\n} from \"react\";\nimport { useIsRtl } from \"../../core/useIsRtl\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { GridProps } from \"./types\";\n\nexport function Grid<\n  CellProps extends object,\n  TagName extends TagNames = \"div\"\n>({\n  cellComponent: CellComponentProp,\n  cellProps: cellPropsUnstable,\n  children,\n  className,\n  columnCount,\n  columnWidth,\n  defaultHeight = 0,\n  defaultWidth = 0,\n  dir,\n  gridRef,\n  onCellsRendered,\n  onResize,\n  overscanCount = 3,\n  rowCount,\n  rowHeight,\n  style,\n  tagName = \"div\" as TagName,\n  ...rest\n}: GridProps<CellProps, TagName>) {\n  const cellProps = useMemoizedObject(cellPropsUnstable);\n  const CellComponent = useMemo(\n    () => memo(CellComponentProp, arePropsEqual),\n    [CellComponentProp]\n  );\n\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n  const isRtl = useIsRtl(element, dir);\n\n  const {\n    getCellBounds: getColumnBounds,\n    getEstimatedSize: getEstimatedWidth,\n    startIndexOverscan: columnStartIndexOverscan,\n    startIndexVisible: columnStartIndexVisible,\n    scrollToIndex: scrollToColumnIndex,\n    stopIndexOverscan: columnStopIndexOverscan,\n    stopIndexVisible: columnStopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultWidth,\n    direction: \"horizontal\",\n    isRtl,\n    itemCount: columnCount,\n    itemProps: cellProps,\n    itemSize: columnWidth,\n    onResize,\n    overscanCount\n  });\n\n  const {\n    getCellBounds: getRowBounds,\n    getEstimatedSize: getEstimatedHeight,\n    startIndexOverscan: rowStartIndexOverscan,\n    startIndexVisible: rowStartIndexVisible,\n    scrollToIndex: scrollToRowIndex,\n    stopIndexOverscan: rowStopIndexOverscan,\n    stopIndexVisible: rowStopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultHeight,\n    direction: \"vertical\",\n    itemCount: rowCount,\n    itemProps: cellProps,\n    itemSize: rowHeight,\n    onResize,\n    overscanCount\n  });\n\n  useImperativeHandle(\n    gridRef,\n    () => ({\n      get element() {\n        return element;\n      },\n\n      scrollToCell({\n        behavior = \"auto\",\n        columnAlign = \"auto\",\n        columnIndex,\n        rowAlign = \"auto\",\n        rowIndex\n      }: {\n        behavior?: ScrollBehavior;\n        columnAlign?: Align;\n        columnIndex: number;\n        rowAlign?: Align;\n        rowIndex: number;\n      }) {\n        const left = scrollToColumnIndex({\n          align: columnAlign,\n          containerScrollOffset: element?.scrollLeft ?? 0,\n          index: columnIndex\n        });\n        const top = scrollToRowIndex({\n          align: rowAlign,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index: rowIndex\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            left,\n            top\n          });\n        }\n      },\n\n      scrollToColumn({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const left = scrollToColumnIndex({\n          align,\n          containerScrollOffset: element?.scrollLeft ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            left\n          });\n        }\n      },\n\n      scrollToRow({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const top = scrollToRowIndex({\n          align,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            top\n          });\n        }\n      }\n    }),\n    [element, scrollToColumnIndex, scrollToRowIndex]\n  );\n\n  useEffect(() => {\n    if (\n      columnStartIndexOverscan >= 0 &&\n      columnStopIndexOverscan >= 0 &&\n      rowStartIndexOverscan >= 0 &&\n      rowStopIndexOverscan >= 0 &&\n      onCellsRendered\n    ) {\n      onCellsRendered(\n        {\n          columnStartIndex: columnStartIndexVisible,\n          columnStopIndex: columnStopIndexVisible,\n          rowStartIndex: rowStartIndexVisible,\n          rowStopIndex: rowStopIndexVisible\n        },\n        {\n          columnStartIndex: columnStartIndexOverscan,\n          columnStopIndex: columnStopIndexOverscan,\n          rowStartIndex: rowStartIndexOverscan,\n          rowStopIndex: rowStopIndexOverscan\n        }\n      );\n    }\n  }, [\n    onCellsRendered,\n    columnStartIndexOverscan,\n    columnStartIndexVisible,\n    columnStopIndexOverscan,\n    columnStopIndexVisible,\n    rowStartIndexOverscan,\n    rowStartIndexVisible,\n    rowStopIndexOverscan,\n    rowStopIndexVisible\n  ]);\n\n  const cells = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (columnCount > 0 && rowCount > 0) {\n      for (\n        let rowIndex = rowStartIndexOverscan;\n        rowIndex <= rowStopIndexOverscan;\n        rowIndex++\n      ) {\n        const rowBounds = getRowBounds(rowIndex);\n\n        const columns: ReactNode[] = [];\n\n        for (\n          let columnIndex = columnStartIndexOverscan;\n          columnIndex <= columnStopIndexOverscan;\n          columnIndex++\n        ) {\n          const columnBounds = getColumnBounds(columnIndex);\n\n          columns.push(\n            <CellComponent\n              {...(cellProps as CellProps)}\n              ariaAttributes={{\n                \"aria-colindex\": columnIndex + 1,\n                role: \"gridcell\"\n              }}\n              columnIndex={columnIndex}\n              key={columnIndex}\n              rowIndex={rowIndex}\n              style={{\n                position: \"absolute\",\n                left: isRtl ? undefined : 0,\n                right: isRtl ? 0 : undefined,\n                transform: `translate(${isRtl ? -columnBounds.scrollOffset : columnBounds.scrollOffset}px, ${rowBounds.scrollOffset}px)`,\n                height: rowCount > 1 ? rowBounds.size : \"100%\",\n                width: columnBounds.size\n              }}\n            />\n          );\n        }\n\n        children.push(\n          <div key={rowIndex} role=\"row\" aria-rowindex={rowIndex + 1}>\n            {columns}\n          </div>\n        );\n      }\n    }\n    return children;\n  }, [\n    CellComponent,\n    cellProps,\n    columnCount,\n    columnStartIndexOverscan,\n    columnStopIndexOverscan,\n    getColumnBounds,\n    getRowBounds,\n    isRtl,\n    rowCount,\n    rowStartIndexOverscan,\n    rowStopIndexOverscan\n  ]);\n\n  const sizingElement = (\n    <div\n      aria-hidden\n      style={{\n        height: getEstimatedHeight(),\n        width: getEstimatedWidth(),\n        zIndex: -1\n      }}\n    ></div>\n  );\n\n  return createElement(\n    tagName,\n    {\n      \"aria-colcount\": columnCount,\n      \"aria-rowcount\": rowCount,\n      role: \"grid\",\n      ...rest,\n      className,\n      dir,\n      ref: setElement,\n      style: {\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        maxHeight: \"100%\",\n        maxWidth: \"100%\",\n        flexGrow: 1,\n        overflow: \"auto\",\n        ...style\n      }\n    },\n    cells,\n    children,\n    sizingElement\n  );\n}\n","import { useLayoutEffect, useState, type HTMLAttributes } from \"react\";\nimport { isRtl } from \"../utils/isRtl\";\n\nexport function useIsRtl(\n  element: HTMLElement | null,\n  dir: HTMLAttributes<HTMLElement>[\"dir\"]\n) {\n  const [value, setValue] = useState(dir === \"rtl\");\n\n  useLayoutEffect(() => {\n    if (element) {\n      if (!dir) {\n        setValue(isRtl(element));\n      }\n    }\n  }, [dir, element]);\n\n  return value;\n}\n","export function isRtl(element: HTMLElement) {\n  let currentElement: HTMLElement | null = element;\n  while (currentElement) {\n    if (currentElement.dir) {\n      return currentElement.dir === \"rtl\";\n    }\n\n    currentElement = currentElement.parentElement;\n  }\n\n  return false;\n}\n"],"names":["Grid","cellComponent","CellComponentProp","cellProps","cellPropsUnstable","children","className","columnCount","columnWidth","defaultHeight","defaultWidth","dir","gridRef","onCellsRendered","onResize","overscanCount","rowCount","rowHeight","style","tagName","rest","useMemoizedObject","CellComponent","useMemo","memo","arePropsEqual","element","setElement","useState","isRtl","value","setValue","useLayoutEffect","currentElement","parentElement","useIsRtl","getCellBounds","getColumnBounds","getEstimatedSize","getEstimatedWidth","startIndexOverscan","columnStartIndexOverscan","startIndexVisible","columnStartIndexVisible","scrollToIndex","scrollToColumnIndex","stopIndexOverscan","columnStopIndexOverscan","stopIndexVisible","columnStopIndexVisible","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","getRowBounds","getEstimatedHeight","rowStartIndexOverscan","rowStartIndexVisible","scrollToRowIndex","rowStopIndexOverscan","rowStopIndexVisible","useImperativeHandle","scrollToCell","behavior","columnAlign","columnIndex","rowAlign","rowIndex","left","align","containerScrollOffset","scrollLeft","index","top","scrollTop","scrollTo","scrollToColumn","scrollToRow","useEffect","columnStartIndex","columnStopIndex","rowStartIndex","rowStopIndex","cells","rowBounds","columns","columnBounds","push","createElement","ariaAttributes","role","key","position","right","transform","scrollOffset","height","size","width","jsx","sizingElement","zIndex","ref","maxHeight","maxWidth","flexGrow","overflow"],"mappings":"6GAgBO,SAASA,GAIdC,cAAeC,EACfC,UAAWC,EAAAC,SACXA,EAAAC,UACAA,EAAAC,YACAA,EAAAC,YACAA,EAAAC,cACAA,EAAgB,EAAAC,aAChBA,EAAe,EAAAC,IACfA,EAAAC,QACAA,EAAAC,gBACAA,EAAAC,SACAA,EAAAC,cACAA,EAAgB,EAAAC,SAChBA,EAAAC,UACAA,EAAAC,MACAA,EAAAC,QACAA,EAAU,SACPC,IAEH,MAAMjB,EAAYkB,EAAkBjB,GAC9BkB,EAAgBC,EAAAA,QACpB,IAAMC,EAAAA,KAAKtB,EAAmBuB,GAC9B,CAACvB,KAGIwB,EAASC,GAAcC,EAAAA,SAAgC,MAExDC,EC5CD,SACLH,EACAf,GAEA,MAAOmB,EAAOC,GAAYH,EAAAA,SAAiB,QAARjB,GAUnC,OARAqB,EAAAA,gBAAgB,KACVN,IACGf,GACHoB,ECZD,SAAeL,GACpB,IAAIO,EAAqCP,EACzC,KAAOO,GAAgB,CACrB,GAAIA,EAAetB,IACjB,MAA8B,QAAvBsB,EAAetB,IAGxBsB,EAAiBA,EAAeC,aAClC,CAEA,OAAO,CACT,CDCiBL,CAAMH,MAGlB,CAACf,EAAKe,IAEFI,CACT,CD6BgBK,CAAST,EAASf,IAG9ByB,cAAeC,EACfC,iBAAkBC,EAClBC,mBAAoBC,EACpBC,kBAAmBC,EACnBC,cAAeC,EACfC,kBAAmBC,EACnBC,iBAAkBC,GAChBC,EAAe,CACjBC,iBAAkBzB,EAClB0B,qBAAsB1C,EACtB2C,UAAW,aACXxB,MAAAA,EACAyB,UAAW/C,EACXgD,UAAWpD,EACXqD,SAAUhD,EACVM,WACAC,mBAIAqB,cAAeqB,EACfnB,iBAAkBoB,EAClBlB,mBAAoBmB,EACpBjB,kBAAmBkB,EACnBhB,cAAeiB,EACff,kBAAmBgB,EACnBd,iBAAkBe,GAChBb,EAAe,CACjBC,iBAAkBzB,EAClB0B,qBAAsB3C,EACtB4C,UAAW,WACXC,UAAWtC,EACXuC,UAAWpD,EACXqD,SAAUvC,EACVH,WACAC,kBAGFiD,EAAAA,oBACEpD,EACA,KAAA,CACE,WAAIc,GACF,OAAOA,CACT,EAEA,YAAAuC,EAAaC,SACXA,EAAW,OAAAC,YACXA,EAAc,OAAAC,YACdA,EAAAC,SACAA,EAAW,OAAAC,SACXA,IAQA,MAAMC,EAAO1B,EAAoB,CAC/B2B,MAAOL,EACPM,sBAAuB/C,GAASgD,YAAc,EAC9CC,MAAOP,IAEHQ,EAAMf,EAAiB,CAC3BW,MAAOH,EACPI,sBAAuB/C,GAASmD,WAAa,EAC7CF,MAAOL,IAGwB,mBAAtB5C,GAASoD,UAClBpD,EAAQoD,SAAS,CACfZ,WACAK,OACAK,OAGN,EAEA,cAAAG,EAAeP,MACbA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMJ,EAAO1B,EAAoB,CAC/B2B,QACAC,sBAAuB/C,GAASgD,YAAc,EAC9CC,UAG+B,mBAAtBjD,GAASoD,UAClBpD,EAAQoD,SAAS,CACfZ,WACAK,QAGN,EAEA,WAAAS,EAAYR,MACVA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMC,EAAMf,EAAiB,CAC3BW,QACAC,sBAAuB/C,GAASmD,WAAa,EAC7CF,UAG+B,mBAAtBjD,GAASoD,UAClBpD,EAAQoD,SAAS,CACfZ,WACAU,OAGN,IAEF,CAAClD,EAASmB,EAAqBgB,IAGjCoB,EAAAA,UAAU,KAENxC,GAA4B,GAC5BM,GAA2B,GAC3BY,GAAyB,GACzBG,GAAwB,GACxBjD,GAEAA,EACE,CACEqE,iBAAkBvC,EAClBwC,gBAAiBlC,EACjBmC,cAAexB,EACfyB,aAActB,GAEhB,CACEmB,iBAAkBzC,EAClB0C,gBAAiBpC,EACjBqC,cAAezB,EACf0B,aAAcvB,KAInB,CACDjD,EACA4B,EACAE,EACAI,EACAE,EACAU,EACAC,EACAE,EACAC,IAGF,MAAMuB,EAAQ/D,EAAAA,QAAQ,KACpB,MAAMlB,EAAwB,GAC9B,GAAIE,EAAc,GAAKS,EAAW,EAChC,IAAA,IACMsD,EAAWX,EACfW,GAAYR,EACZQ,IACA,CACA,MAAMiB,EAAY9B,EAAaa,GAEzBkB,EAAuB,GAE7B,IAAA,IACMpB,EAAc3B,EAClB2B,GAAerB,EACfqB,IACA,CACA,MAAMqB,EAAepD,EAAgB+B,GAErCoB,EAAQE,KACNC,EAAAA,cAACrE,EAAA,IACMnB,EACLyF,eAAgB,CACd,gBAAiBxB,EAAc,EAC/ByB,KAAM,YAERzB,cACA0B,IAAK1B,EACLE,WACApD,MAAO,CACL6E,SAAU,WACVxB,KAAM1C,OAAQ,EAAY,EAC1BmE,MAAOnE,EAAQ,OAAI,EACnBoE,UAAW,aAAapE,GAAS4D,EAAaS,aAAeT,EAAaS,mBAAmBX,EAAUW,kBACvGC,OAAQnF,EAAW,EAAIuE,EAAUa,KAAO,OACxCC,MAAOZ,EAAaW,QAI5B,CAEA/F,EAASqF,KACPY,EAAAA,IAAC,OAAmBT,KAAK,MAAM,gBAAevB,EAAW,EACtDjE,YADOiE,GAId,CAEF,OAAOjE,GACN,CACDiB,EACAnB,EACAI,EACAkC,EACAM,EACAV,EACAoB,EACA5B,EACAb,EACA2C,EACAG,IAGIyC,EACJD,EAAAA,IAAC,MAAA,CACC,eAAW,EACXpF,MAAO,CACLiF,OAAQzC,IACR2C,MAAO9D,IACPiE,QAAQ,KAKd,OAAOb,EAAAA,cACLxE,EACA,CACE,gBAAiBZ,EACjB,gBAAiBS,EACjB6E,KAAM,UACHzE,EACHd,YACAK,MACA8F,IAAK9E,EACLT,MAAO,CACL6E,SAAU,WACVM,MAAO,OACPF,OAAQ,OACRO,UAAW,OACXC,SAAU,OACVC,SAAU,EACVC,SAAU,UACP3F,IAGPoE,EACAjF,EACAkG,EAEJ"}