npm - react-window - Versions diffs - 2.1.1 → 2.1.2 - Mend

react-window 2.1.1 → 2.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (116) hide show

package/docs/assets/{RenderingGridRoute-BvlK0VIG.js → RenderingGridRoute-Cd7Z3aKa.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as s,B as a,C as n,E as p}from"./index-3R9tv3eW.js";import{B as t}from"./arePropsEqual-MBk0PiJi.js";import{C as c}from"./Code-BJ6U_DpT.js";import{C as e}from"./ContinueLink-Mq4XOwMu.js";import{H as i}from"./Header-DM8OHOd_.js";import{L as l}from"./LoadingSpinner-CcA45RYo.js";import{C as o}from"./CellComponent.example-ChzwGLAD.js";import{c as d,u as r}from"./useContacts-C-Fuwn4U.js";import{G as h}from"./Grid-Cio8auWD.js";import"./contacts-Bxrk2JS2.js";const u='<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">contacts</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-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">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="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">const</span><span class=""> </span><span class="tok-variableName tok-definition">address</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">contacts</span><span class="tok-punctuation">[</span><span class="tok-variableName">rowIndex</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">content</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">address</span><span class="tok-punctuation">[</span><span class="tok-variableName">indexToColumn</span><span class="tok-punctuation">(</span><span class="tok-variableName">columnIndex</span><span class="tok-punctuation">)</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"truncate"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">content</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>',k='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">columnWidth</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">switch</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">indexToColumn</span><span class="tok-punctuation">(</span><span class="tok-variableName">index</span><span class="tok-punctuation">)</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"address"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">250</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"email"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">300</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"job_title"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">150</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"timezone"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">200</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"zip"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">75</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">default</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">100</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',m='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">Grid</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">contacts</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">CellComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">contacts</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">10</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">columnWidth</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">contacts</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></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: 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>';function v({contacts:a}){return s.jsx(h,{cellComponent:o,cellProps:{contacts:a},columnCount:10,columnWidth:d,rowCount:a.length,rowHeight:25})}function g(){const o=r();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(i,{section:"Grids",title:"Rendering a grid"}),s.jsxs("div",{children:["Use the ",s.jsx("code",{children:"Grid"})," component to render data with many rows and columns:"]}),s.jsxs(t,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!o.length&&s.jsx(l,{}),s.jsx(v,{contacts:o})]}),s.jsx("div",{children:"Grids require you to specify the number of rows and columns as well as the width and height of each:"}),s.jsx(c,{html:m}),s.jsx("div",{children:"Column widths and row heights can be either numbers or functions. In the example above, row height is fixed and column width is function that determines the width of the column based on the column index:"}),s.jsx(c,{html:k}),s.jsxs("div",{children:["Lastly grids require a component to render cell, given a column and row index. As with lists, this component receives additional props specified as part of ",s.jsx("code",{children:"cellProps"}),":"]}),s.jsx(c,{html:u}),s.jsx(n,{intent:"warning",children:s.jsxs(a,{direction:"column",gap:4,children:[s.jsxs("div",{children:["Grids require space to render cells. Typically the"," ",s.jsx(p,{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."]}),s.jsxs("div",{children:["If an explicit width and height are specified (in pixels) using the"," ",s.jsx("code",{children:"style"})," prop, ",s.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),s.jsx(e,{to:"/grid/props",title:"component props"})]})}export{g as default};
-//# sourceMappingURL=RenderingGridRoute-BvlK0VIG.js.map
+import{j as s,B as a,C as n,E as p}from"./index-Cnm6lMUF.js";import{B as t}from"./arePropsEqual-CaQN03VG.js";import{C as c}from"./Code-r2plEB3N.js";import{C as e}from"./ContinueLink-BDXFlJ2t.js";import{H as i}from"./Header-CWpEkQSA.js";import{L as l}from"./LoadingSpinner-D94ZhMZx.js";import{C as o}from"./CellComponent.example-uUYIhpiW.js";import{c as d,u as r}from"./useContacts-X0AOlpLx.js";import{G as h}from"./Grid-BjC_BndR.js";import"./contacts-Bxrk2JS2.js";const u='<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">contacts</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-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">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="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">const</span><span class=""> </span><span class="tok-variableName tok-definition">address</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">contacts</span><span class="tok-punctuation">[</span><span class="tok-variableName">rowIndex</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">content</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">address</span><span class="tok-punctuation">[</span><span class="tok-variableName">indexToColumn</span><span class="tok-punctuation">(</span><span class="tok-variableName">columnIndex</span><span class="tok-punctuation">)</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"truncate"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">content</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>',k='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">columnWidth</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">switch</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">indexToColumn</span><span class="tok-punctuation">(</span><span class="tok-variableName">index</span><span class="tok-punctuation">)</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"address"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">250</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"email"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">300</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"job_title"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">150</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"timezone"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">200</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"zip"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">75</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">default</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">100</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',m='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">Grid</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">contacts</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">CellComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">contacts</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">10</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">columnWidth</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">contacts</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></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: 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>';function v({contacts:a}){return s.jsx(h,{cellComponent:o,cellProps:{contacts:a},columnCount:10,columnWidth:d,rowCount:a.length,rowHeight:25})}function g(){const o=r();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(i,{section:"Grids",title:"Rendering a grid"}),s.jsxs("div",{children:["Use the ",s.jsx("code",{children:"Grid"})," component to render data with many rows and columns:"]}),s.jsxs(t,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!o.length&&s.jsx(l,{}),s.jsx(v,{contacts:o})]}),s.jsx("div",{children:"Grids require you to specify the number of rows and columns as well as the width and height of each:"}),s.jsx(c,{html:m}),s.jsx("div",{children:"Column widths and row heights can be either numbers or functions. In the example above, row height is fixed and column width is function that determines the width of the column based on the column index:"}),s.jsx(c,{html:k}),s.jsxs("div",{children:["Lastly grids require a component to render cell, given a column and row index. As with lists, this component receives additional props specified as part of ",s.jsx("code",{children:"cellProps"}),":"]}),s.jsx(c,{html:u}),s.jsx(n,{intent:"warning",children:s.jsxs(a,{direction:"column",gap:4,children:[s.jsxs("div",{children:["Grids require space to render cells. Typically the"," ",s.jsx(p,{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."]}),s.jsxs("div",{children:["If an explicit width and height are specified (in pixels) using the"," ",s.jsx("code",{children:"style"})," prop, ",s.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),s.jsx(e,{to:"/grid/props",title:"component props"})]})}export{g as default};
+//# sourceMappingURL=RenderingGridRoute-Cd7Z3aKa.js.map

package/docs/assets/{RenderingGridRoute-BvlK0VIG.js.map → RenderingGridRoute-Cd7Z3aKa.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RenderingGridRoute-~~BvlK0VIG~~.js","sources":["../../src/routes/grid/examples/Grid.example.tsx","../../src/routes/grid/RenderingGridRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { CellComponent } from \"./CellComponent.example\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction Example({ contacts }: { contacts: Contact[] }) {\n return (\n <Grid\n cellComponent={CellComponent}\n cellProps={{ contacts }}\n columnCount={10}\n columnWidth={columnWidth}\n rowCount={contacts.length}\n rowHeight={25}\n />\n );\n}\n\n// <end>\n\nexport { CellComponent, Example };\nexport type { Contact };\n","import CellComponentMarkdown from \"../../../public/generated/code-snippets/CellComponent.json\";\nimport columnWidthMarkdown from \"../../../public/generated/code-snippets/columnWidth.json\";\nimport GridMarkdown from \"../../../public/generated/code-snippets/Grid.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/Grid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RenderingGridRoute() {\n const contacts = useContacts();\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Grids\" title=\"Rendering a grid\" />\n <div>\n Use the <code>Grid</code> component to render data with many rows and\n columns:\n </div>\n <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n {!contacts.length && <LoadingSpinner />}\n <Example contacts={contacts} />\n </Block>\n <div>\n Grids require you to specify the number of rows and columns as well as\n the width and height of each:\n </div>\n <Code html={GridMarkdown.html} />\n <div>\n Column widths and row heights can be either numbers or functions. In the\n example above, row height is fixed and column width is function that\n determines the width of the column based on the column index:\n </div>\n <Code html={columnWidthMarkdown.html} />\n <div>\n Lastly grids require a component to render cell, given a column and row\n index. As with lists, this component receives additional props specified\n as part of <code>cellProps</code>:\n </div>\n <Code html={CellComponentMarkdown.html} />\n <Callout intent=\"warning\">\n <Box direction=\"column\" gap={4}>\n <div>\n Grids require space to render cells. 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 width and height are 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 to=\"/grid/props\" title=\"component props\" />\n </Box>\n );\n}\n"],"names":["Example","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","length","rowHeight","RenderingGridRoute","useContacts","jsxs","Box","direction","gap","children","Header","section","title","Block","className","LoadingSpinner","Code","html","GridMarkdown","columnWidthMarkdown","CellComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"0pgBAUA,SAASA,GAAQC,SAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,SAAUR,EAASS,OACnBC,UAAW,IAGjB,CCPA,SAAwBC,IACtB,MAAMX,EAAWY,IAEjB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAhB,EAAAA,IAACiB,EAAA,CAAOC,QAAQ,QAAQC,MAAM,4BAC7B,MAAA,CAAIH,SAAA,CAAA,aACKhB,IAAC,QAAKgB,SAAA,SAAW,2DAG3BJ,EAAAA,KAACQ,EAAA,CAAMC,UAAU,qBAAqB,oBAAkB,OACrDL,SAAA,EAACjB,EAASS,cAAWc,EAAA,CAAA,GACtBtB,MAACF,GAAQC,kBAEXC,IAAC,OAAIgB,SAAA,2GAILhB,IAACuB,EAAA,CAAKC,KAAMC,MACZzB,IAAC,OAAIgB,SAAA,kNAKLhB,IAACuB,EAAA,CAAKC,KAAME,WACX,MAAA,CAAIV,SAAA,CAAA,iKAGQhB,IAAC,QAAKgB,SAAA,cAAgB,SAEnChB,IAACuB,EAAA,CAAKC,KAAMG,IACZ3B,EAAAA,IAAC4B,GAAQC,OAAO,UACdb,gBAACH,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAJ,OAAC,MAAA,CAAII,SAAA,CAAA,qDACgD,IACnDhB,EAAAA,IAAC8B,EAAA,CAAaC,KAAK,kEAAkEf,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEhB,IAAC,QAAKgB,SAAA,UAAY,YAAOhB,IAAC,QAAKgB,SAAA,mBAAqB,6BAK1DhB,EAAAA,IAACgC,EAAA,CAAaC,GAAG,cAAcd,MAAM,sBAG3C"}
1	+ {"version":3,"file":"RenderingGridRoute-Cd7Z3aKa.js","sources":["../../src/routes/grid/examples/Grid.example.tsx","../../src/routes/grid/RenderingGridRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { CellComponent } from \"./CellComponent.example\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction Example({ contacts }: { contacts: Contact[] }) {\n return (\n <Grid\n cellComponent={CellComponent}\n cellProps={{ contacts }}\n columnCount={10}\n columnWidth={columnWidth}\n rowCount={contacts.length}\n rowHeight={25}\n />\n );\n}\n\n// <end>\n\nexport { CellComponent, Example };\nexport type { Contact };\n","import CellComponentMarkdown from \"../../../public/generated/code-snippets/CellComponent.json\";\nimport columnWidthMarkdown from \"../../../public/generated/code-snippets/columnWidth.json\";\nimport GridMarkdown from \"../../../public/generated/code-snippets/Grid.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/Grid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RenderingGridRoute() {\n const contacts = useContacts();\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Grids\" title=\"Rendering a grid\" />\n <div>\n Use the <code>Grid</code> component to render data with many rows and\n columns:\n </div>\n <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n {!contacts.length && <LoadingSpinner />}\n <Example contacts={contacts} />\n </Block>\n <div>\n Grids require you to specify the number of rows and columns as well as\n the width and height of each:\n </div>\n <Code html={GridMarkdown.html} />\n <div>\n Column widths and row heights can be either numbers or functions. In the\n example above, row height is fixed and column width is function that\n determines the width of the column based on the column index:\n </div>\n <Code html={columnWidthMarkdown.html} />\n <div>\n Lastly grids require a component to render cell, given a column and row\n index. As with lists, this component receives additional props specified\n as part of <code>cellProps</code>:\n </div>\n <Code html={CellComponentMarkdown.html} />\n <Callout intent=\"warning\">\n <Box direction=\"column\" gap={4}>\n <div>\n Grids require space to render cells. 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 width and height are 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 to=\"/grid/props\" title=\"component props\" />\n </Box>\n );\n}\n"],"names":["Example","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","length","rowHeight","RenderingGridRoute","useContacts","jsxs","Box","direction","gap","children","Header","section","title","Block","className","LoadingSpinner","Code","html","GridMarkdown","columnWidthMarkdown","CellComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"0pgBAUA,SAASA,GAAQC,SAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,SAAUR,EAASS,OACnBC,UAAW,IAGjB,CCPA,SAAwBC,IACtB,MAAMX,EAAWY,IAEjB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAhB,EAAAA,IAACiB,EAAA,CAAOC,QAAQ,QAAQC,MAAM,4BAC7B,MAAA,CAAIH,SAAA,CAAA,aACKhB,IAAC,QAAKgB,SAAA,SAAW,2DAG3BJ,EAAAA,KAACQ,EAAA,CAAMC,UAAU,qBAAqB,oBAAkB,OACrDL,SAAA,EAACjB,EAASS,cAAWc,EAAA,CAAA,GACtBtB,MAACF,GAAQC,kBAEXC,IAAC,OAAIgB,SAAA,2GAILhB,IAACuB,EAAA,CAAKC,KAAMC,MACZzB,IAAC,OAAIgB,SAAA,kNAKLhB,IAACuB,EAAA,CAAKC,KAAME,WACX,MAAA,CAAIV,SAAA,CAAA,iKAGQhB,IAAC,QAAKgB,SAAA,cAAgB,SAEnChB,IAACuB,EAAA,CAAKC,KAAMG,IACZ3B,EAAAA,IAAC4B,GAAQC,OAAO,UACdb,gBAACH,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAJ,OAAC,MAAA,CAAII,SAAA,CAAA,qDACgD,IACnDhB,EAAAA,IAAC8B,EAAA,CAAaC,KAAK,kEAAkEf,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEhB,IAAC,QAAKgB,SAAA,UAAY,YAAOhB,IAAC,QAAKgB,SAAA,mBAAqB,6BAK1DhB,EAAAA,IAACgC,EAAA,CAAaC,GAAG,cAAcd,MAAM,sBAG3C"}

package/docs/assets/ScratchpadRoute-BE3BnYuC.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{r as e,j as n,B as t,c as l}from"./index-Cnm6lMUF.js";import{G as o}from"./Grid-BjC_BndR.js";import{B as s}from"./arePropsEqual-CaQN03VG.js";import{S as a}from"./Select-D7Hzggtt.js";const r=e.useState,c=n=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"#e3e3e3",...n},e.createElement("path",{d:"m424-424-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-424ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"})),i=n=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"#e3e3e3",...n},e.createElement("path",{d:"M320-440h320q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H320q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"})),d=n=>e.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"#e3e3e3",...n},e.createElement("path",{d:"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z"}));function u({checked:e,children:t,className:l,indeterminate:o,onChange:s,...a}){let r,u;return o?(r=i,u="fill-white"):e?(r=c,u="fill-blue-600"):(r=d,u="fill-slate-600"),n.jsxs("label",{className:`cursor-pointer rounded-lg flex flex-row items-center outline-none group ${l}`,"data-focus-within":!0,...a,children:[n.jsx("input",{checked:e,className:"w-0 h-0",onChange:e=>{s(e.currentTarget.checked)},type:"checkbox"}),n.jsx(r,{className:u}),t&&n.jsxs(n.Fragment,{children:[" ",t]})]})}function m({children:e,className:t,onChange:l,value:o,...s}){return n.jsx("input",{className:`rounded-md bg-black/30 border border-2 border-transparent py-1 px-2 outline-none focus:border-emerald-300 ${t}`,"data-focus":!0,onChange:e=>{l(e.currentTarget.value)},value:o,...s,children:e})}const h=["auto","center","end","smart","start"].map(e=>({label:`align: ${e}`,value:e}));function x(){const[l,c]=e.useState(!1),[i,d]=e.useState(),[x,p]=e.useState(),[w,v]=r(null),[f,q]=e.useState(h[0]);return n.jsxs(t,{direction:"column",gap:4,children:[n.jsxs(t,{align:"center",direction:"row",gap:4,onKeyDown:e=>{if("Enter"===e.key)void 0!==i&&void 0!==x?w?.scrollToCell({columnAlign:f.value,columnIndex:i,rowAlign:f.value,rowIndex:x}):void 0!==i?w?.scrollToColumn({align:f.value,index:i}):void 0!==x&&w?.scrollToRow({align:f.value,index:x})},children:[n.jsx(a,{className:"flex-1",onChange:q,options:h,placeholder:"Align",value:f}),n.jsx(u,{checked:l,onChange:c}),n.jsx(m,{autoFocus:!0,className:"grow",min:0,max:99,onChange:e=>{const n=parseInt(e);d(isNaN(n)?void 0:n)},placeholder:"Column",step:1,type:"number",value:void 0===i?"":""+i}),n.jsx(m,{autoFocus:!0,className:"grow",min:0,max:99,onChange:e=>{const n=parseInt(e);p(isNaN(n)?void 0:n)},placeholder:"Row",step:1,type:"number",value:void 0===x?"":""+x})]}),n.jsx(s,{className:"w-full h-100","data-focus-within":"bold",children:n.jsx(o,{cellComponent:g,cellProps:{focusedColumnIndex:i,focusedRowIndex:x},columnCount:100,columnWidth:75,dir:l?"rtl":void 0,gridRef:v,rowCount:100,rowHeight:35},l?"rtl":"ltr")})]})}function g({columnIndex:e,focusedColumnIndex:t,focusedRowIndex:o,rowIndex:s,style:a}){return n.jsxs("div",{className:l("flex items-center justify-center text-xs",{"bg-slate-900":e%2==s%2,"bg-slate-800":e===t\|\|s===o}),style:a,children:["row ",s,", col ",e]})}export{x as default};
2	+ //# sourceMappingURL=ScratchpadRoute-BE3BnYuC.js.map

package/docs/assets/{ScratchpadRoute-wzxynGR2.js.map → ScratchpadRoute-BE3BnYuC.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ScratchpadRoute-wzxynGR2.js","sources":["../../lib/components/grid/useGridCallbackRef.ts","../../public/svgs/checkbox-checked.svg?react","../../public/svgs/checkbox-indeterminate.svg?react","../../public/svgs/checkbox-unchecked.svg?react","../../src/components/Checkbox.tsx","../../src/components/Input.tsx","../../src/routes/ScratchpadRoute.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { GridImperativeAPI } from \"./types\";\n\n/*\n Convenience hook to return a properly typed ref callback for the Grid component.\n \n Use this hook when you need to share the ref with another component or hook.\n /\nexport const useGridCallbackRef =\n useState as typeof useState<GridImperativeAPI \| null>;\n","import as React from \"react\";\nconst SvgCheckboxChecked = (props) => /* @__PURE__ / React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24px\", viewBox: \"0 -960 960 960\", width: \"24px\", fill: \"#e3e3e3\", ...props }, / @__PURE__ / React.createElement(\"path\", { d: \"m424-424-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-424ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z\" }));\nexport default SvgCheckboxChecked;\n","import as React from \"react\";\nconst SvgCheckboxIndeterminate = (props) => /* @__PURE__ / React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24px\", viewBox: \"0 -960 960 960\", width: \"24px\", fill: \"#e3e3e3\", ...props }, / @__PURE__ / React.createElement(\"path\", { d: \"M320-440h320q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H320q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z\" }));\nexport default SvgCheckboxIndeterminate;\n","import as React from \"react\";\nconst SvgCheckboxUnchecked = (props) => /* @__PURE__ / React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24px\", viewBox: \"0 -960 960 960\", width: \"24px\", fill: \"#e3e3e3\", ...props }, / @__PURE__ */ React.createElement(\"path\", { d: \"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z\" }));\nexport default SvgCheckboxUnchecked;\n","import {\n type FunctionComponent,\n type HTMLAttributes,\n type PropsWithChildren,\n type SVGProps\n} from \"react\";\nimport CheckedIcon from \"../../public/svgs/checkbox-checked.svg?react\";\nimport IndeterminateIcon from \"../../public/svgs/checkbox-indeterminate.svg?react\";\nimport UncheckedIcon from \"../../public/svgs/checkbox-unchecked.svg?react\";\n\nexport function Checkbox({\n checked,\n children,\n className,\n indeterminate,\n onChange,\n ...rest\n}: PropsWithChildren<\n Omit<HTMLAttributes<HTMLElement>, \"defaultChecked\" \| \"onChange\"> & {\n checked: boolean;\n className?: string;\n indeterminate?: boolean;\n onChange: (value: boolean) => void;\n }\n>) {\n let IconElement: FunctionComponent<SVGProps<SVGSVGElement>>;\n let iconClassName: string;\n if (indeterminate) {\n IconElement = IndeterminateIcon;\n iconClassName = \"fill-white\";\n } else if (checked) {\n IconElement = CheckedIcon;\n iconClassName = \"fill-blue-600\";\n } else {\n IconElement = UncheckedIcon;\n iconClassName = \"fill-slate-600\";\n }\n\n return (\n <label\n className={`cursor-pointer rounded-lg flex flex-row items-center outline-none group ${className}`}\n data-focus-within\n {...rest}\n >\n <input\n checked={checked}\n className=\"w-0 h-0\"\n onChange={(event) => {\n onChange(event.currentTarget.checked);\n }}\n type=\"checkbox\"\n />\n <IconElement className={iconClassName} />\n {children && <> {children}</>}\n </label>\n );\n}\n","import type { InputHTMLAttributes, PropsWithChildren } from \"react\";\n\nexport function Input<Type extends string>({\n children,\n className,\n onChange,\n value,\n ...rest\n}: PropsWithChildren<\n Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> & {\n className?: string;\n onChange: (value: Type) => void;\n value: Type;\n }\n>) {\n return (\n <input\n className={`rounded-md bg-black/30 border border-2 border-transparent py-1 px-2 outline-none focus:border-emerald-300 ${className}`}\n data-focus\n onChange={(event) => {\n onChange(event.currentTarget.value as Type);\n }}\n value={value}\n {...rest}\n >\n {children}\n </input>\n );\n}\n","import { useState } from \"react\";\nimport {\n Grid,\n useGridCallbackRef,\n type Align,\n type CellComponentProps\n} from \"react-window\";\nimport { Block } from \"../components/Block\";\nimport { Box } from \"../components/Box\";\nimport { Checkbox } from \"../components/Checkbox\";\nimport { Input } from \"../components/Input\";\nimport { Select, type Option } from \"../components/Select\";\nimport { cn } from \"../utils/cn\";\n\nconst ALIGNMENTS: Option<Align>[] = (\n [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n label: `align: ${value}`,\n value\n}));\n\nexport default function ScratchpadRoute() {\n const [rtl, setRtl] = useState(false);\n const [columnIndex, setColumnIndex] = useState<number \| undefined>();\n const [rowIndex, setRowIndex] = useState<number \| undefined>();\n const [gridRef, setGridRef] = useGridCallbackRef(null);\n const [align, setAlign] = useState(ALIGNMENTS[0]);\n\n return (\n <Box direction=\"column\" gap={4}>\n <Box\n align=\"center\"\n direction=\"row\"\n gap={4}\n onKeyDown={(event) => {\n switch (event.key) {\n case \"Enter\": {\n if (columnIndex !== undefined && rowIndex !== undefined) {\n gridRef?.scrollToCell({\n columnAlign: align.value,\n columnIndex,\n rowAlign: align.value,\n rowIndex\n });\n } else if (columnIndex !== undefined) {\n gridRef?.scrollToColumn({\n align: align.value,\n index: columnIndex\n });\n } else if (rowIndex !== undefined) {\n gridRef?.scrollToRow({\n align: align.value,\n index: rowIndex\n });\n }\n break;\n }\n }\n }}\n >\n <Select\n className=\"flex-1\"\n onChange={setAlign}\n options={ALIGNMENTS}\n placeholder=\"Align\"\n value={align}\n />\n <Checkbox checked={rtl} onChange={setRtl} />\n <Input\n autoFocus\n className=\"grow\"\n min={0}\n max={99}\n onChange={(value) => {\n const parsed = parseInt(value);\n setColumnIndex(isNaN(parsed) ? undefined : parsed);\n }}\n placeholder=\"Column\"\n step={1}\n type=\"number\"\n value={columnIndex === undefined ? \"\" : \"\" + columnIndex}\n />\n <Input\n autoFocus\n className=\"grow\"\n min={0}\n max={99}\n onChange={(value) => {\n const parsed = parseInt(value);\n setRowIndex(isNaN(parsed) ? undefined : parsed);\n }}\n placeholder=\"Row\"\n step={1}\n type=\"number\"\n value={rowIndex === undefined ? \"\" : \"\" + rowIndex}\n />\n </Box>\n <Block className=\"w-full h-100\" data-focus-within=\"bold\">\n <Grid\n cellComponent={CellComponent}\n cellProps={{\n focusedColumnIndex: columnIndex,\n focusedRowIndex: rowIndex\n }}\n columnCount={100}\n columnWidth={75}\n dir={rtl ? \"rtl\" : undefined}\n key={rtl ? \"rtl\" : \"ltr\"}\n gridRef={setGridRef}\n rowCount={100}\n rowHeight={35}\n />\n </Block>\n </Box>\n );\n}\n\nfunction CellComponent({\n columnIndex,\n focusedColumnIndex,\n focusedRowIndex,\n rowIndex,\n style\n}: CellComponentProps<{\n focusedColumnIndex: number \| undefined;\n focusedRowIndex: number \| undefined;\n}>) {\n return (\n <div\n className={cn(\"flex items-center justify-center text-xs\", {\n \"bg-slate-900\": columnIndex % 2 === rowIndex % 2,\n \"bg-slate-800\":\n columnIndex === focusedColumnIndex \|\| rowIndex === focusedRowIndex\n })}\n style={style}\n >\n row {rowIndex}, col {columnIndex}\n </div>\n );\n}\n"],"names":["useGridCallbackRef","useState","SvgCheckboxChecked","props","React.createElement","xmlns","height","viewBox","width","fill","d","SvgCheckboxIndeterminate","SvgCheckboxUnchecked","Checkbox","checked","children","className","indeterminate","onChange","rest","IconElement","iconClassName","IndeterminateIcon","CheckedIcon","UncheckedIcon","jsxs","jsx","event","currentTarget","type","Fragment","Input","value","ALIGNMENTS","map","label","ScratchpadRoute","rtl","setRtl","columnIndex","setColumnIndex","rowIndex","setRowIndex","gridRef","setGridRef","align","setAlign","Box","direction","gap","onKeyDown","key","scrollToCell","columnAlign","rowAlign","scrollToColumn","index","scrollToRow","Select","options","placeholder","autoFocus","min","max","parsed","parseInt","isNaN","step","Block","Grid","cellComponent","CellComponent","cellProps","focusedColumnIndex","focusedRowIndex","columnCount","columnWidth","dir","rowCount","rowHeight","style","cn"],"mappings":"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"}
1	+ {"version":3,"file":"ScratchpadRoute-BE3BnYuC.js","sources":["../../lib/components/grid/useGridCallbackRef.ts","../../public/svgs/checkbox-checked.svg?react","../../public/svgs/checkbox-indeterminate.svg?react","../../public/svgs/checkbox-unchecked.svg?react","../../src/components/Checkbox.tsx","../../src/components/Input.tsx","../../src/routes/ScratchpadRoute.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { GridImperativeAPI } from \"./types\";\n\n/*\n Convenience hook to return a properly typed ref callback for the Grid component.\n \n Use this hook when you need to share the ref with another component or hook.\n /\nexport const useGridCallbackRef =\n useState as typeof useState<GridImperativeAPI \| null>;\n","import as React from \"react\";\nconst SvgCheckboxChecked = (props) => /* @__PURE__ / React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24px\", viewBox: \"0 -960 960 960\", width: \"24px\", fill: \"#e3e3e3\", ...props }, / @__PURE__ / React.createElement(\"path\", { d: \"m424-424-86-86q-11-11-28-11t-28 11q-11 11-11 28t11 28l114 114q12 12 28 12t28-12l226-226q11-11 11-28t-11-28q-11-11-28-11t-28 11L424-424ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z\" }));\nexport default SvgCheckboxChecked;\n","import as React from \"react\";\nconst SvgCheckboxIndeterminate = (props) => /* @__PURE__ / React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24px\", viewBox: \"0 -960 960 960\", width: \"24px\", fill: \"#e3e3e3\", ...props }, / @__PURE__ / React.createElement(\"path\", { d: \"M320-440h320q17 0 28.5-11.5T680-480q0-17-11.5-28.5T640-520H320q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z\" }));\nexport default SvgCheckboxIndeterminate;\n","import as React from \"react\";\nconst SvgCheckboxUnchecked = (props) => /* @__PURE__ / React.createElement(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", height: \"24px\", viewBox: \"0 -960 960 960\", width: \"24px\", fill: \"#e3e3e3\", ...props }, / @__PURE__ */ React.createElement(\"path\", { d: \"M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Z\" }));\nexport default SvgCheckboxUnchecked;\n","import {\n type FunctionComponent,\n type HTMLAttributes,\n type PropsWithChildren,\n type SVGProps\n} from \"react\";\nimport CheckedIcon from \"../../public/svgs/checkbox-checked.svg?react\";\nimport IndeterminateIcon from \"../../public/svgs/checkbox-indeterminate.svg?react\";\nimport UncheckedIcon from \"../../public/svgs/checkbox-unchecked.svg?react\";\n\nexport function Checkbox({\n checked,\n children,\n className,\n indeterminate,\n onChange,\n ...rest\n}: PropsWithChildren<\n Omit<HTMLAttributes<HTMLElement>, \"defaultChecked\" \| \"onChange\"> & {\n checked: boolean;\n className?: string;\n indeterminate?: boolean;\n onChange: (value: boolean) => void;\n }\n>) {\n let IconElement: FunctionComponent<SVGProps<SVGSVGElement>>;\n let iconClassName: string;\n if (indeterminate) {\n IconElement = IndeterminateIcon;\n iconClassName = \"fill-white\";\n } else if (checked) {\n IconElement = CheckedIcon;\n iconClassName = \"fill-blue-600\";\n } else {\n IconElement = UncheckedIcon;\n iconClassName = \"fill-slate-600\";\n }\n\n return (\n <label\n className={`cursor-pointer rounded-lg flex flex-row items-center outline-none group ${className}`}\n data-focus-within\n {...rest}\n >\n <input\n checked={checked}\n className=\"w-0 h-0\"\n onChange={(event) => {\n onChange(event.currentTarget.checked);\n }}\n type=\"checkbox\"\n />\n <IconElement className={iconClassName} />\n {children && <> {children}</>}\n </label>\n );\n}\n","import type { InputHTMLAttributes, PropsWithChildren } from \"react\";\n\nexport function Input<Type extends string>({\n children,\n className,\n onChange,\n value,\n ...rest\n}: PropsWithChildren<\n Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> & {\n className?: string;\n onChange: (value: Type) => void;\n value: Type;\n }\n>) {\n return (\n <input\n className={`rounded-md bg-black/30 border border-2 border-transparent py-1 px-2 outline-none focus:border-emerald-300 ${className}`}\n data-focus\n onChange={(event) => {\n onChange(event.currentTarget.value as Type);\n }}\n value={value}\n {...rest}\n >\n {children}\n </input>\n );\n}\n","import { useState } from \"react\";\nimport {\n Grid,\n useGridCallbackRef,\n type Align,\n type CellComponentProps\n} from \"react-window\";\nimport { Block } from \"../components/Block\";\nimport { Box } from \"../components/Box\";\nimport { Checkbox } from \"../components/Checkbox\";\nimport { Input } from \"../components/Input\";\nimport { Select, type Option } from \"../components/Select\";\nimport { cn } from \"../utils/cn\";\n\nconst ALIGNMENTS: Option<Align>[] = (\n [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n label: `align: ${value}`,\n value\n}));\n\nexport default function ScratchpadRoute() {\n const [rtl, setRtl] = useState(false);\n const [columnIndex, setColumnIndex] = useState<number \| undefined>();\n const [rowIndex, setRowIndex] = useState<number \| undefined>();\n const [gridRef, setGridRef] = useGridCallbackRef(null);\n const [align, setAlign] = useState(ALIGNMENTS[0]);\n\n return (\n <Box direction=\"column\" gap={4}>\n <Box\n align=\"center\"\n direction=\"row\"\n gap={4}\n onKeyDown={(event) => {\n switch (event.key) {\n case \"Enter\": {\n if (columnIndex !== undefined && rowIndex !== undefined) {\n gridRef?.scrollToCell({\n columnAlign: align.value,\n columnIndex,\n rowAlign: align.value,\n rowIndex\n });\n } else if (columnIndex !== undefined) {\n gridRef?.scrollToColumn({\n align: align.value,\n index: columnIndex\n });\n } else if (rowIndex !== undefined) {\n gridRef?.scrollToRow({\n align: align.value,\n index: rowIndex\n });\n }\n break;\n }\n }\n }}\n >\n <Select\n className=\"flex-1\"\n onChange={setAlign}\n options={ALIGNMENTS}\n placeholder=\"Align\"\n value={align}\n />\n <Checkbox checked={rtl} onChange={setRtl} />\n <Input\n autoFocus\n className=\"grow\"\n min={0}\n max={99}\n onChange={(value) => {\n const parsed = parseInt(value);\n setColumnIndex(isNaN(parsed) ? undefined : parsed);\n }}\n placeholder=\"Column\"\n step={1}\n type=\"number\"\n value={columnIndex === undefined ? \"\" : \"\" + columnIndex}\n />\n <Input\n autoFocus\n className=\"grow\"\n min={0}\n max={99}\n onChange={(value) => {\n const parsed = parseInt(value);\n setRowIndex(isNaN(parsed) ? undefined : parsed);\n }}\n placeholder=\"Row\"\n step={1}\n type=\"number\"\n value={rowIndex === undefined ? \"\" : \"\" + rowIndex}\n />\n </Box>\n <Block className=\"w-full h-100\" data-focus-within=\"bold\">\n <Grid\n cellComponent={CellComponent}\n cellProps={{\n focusedColumnIndex: columnIndex,\n focusedRowIndex: rowIndex\n }}\n columnCount={100}\n columnWidth={75}\n dir={rtl ? \"rtl\" : undefined}\n key={rtl ? \"rtl\" : \"ltr\"}\n gridRef={setGridRef}\n rowCount={100}\n rowHeight={35}\n />\n </Block>\n </Box>\n );\n}\n\nfunction CellComponent({\n columnIndex,\n focusedColumnIndex,\n focusedRowIndex,\n rowIndex,\n style\n}: CellComponentProps<{\n focusedColumnIndex: number \| undefined;\n focusedRowIndex: number \| undefined;\n}>) {\n return (\n <div\n className={cn(\"flex items-center justify-center text-xs\", {\n \"bg-slate-900\": columnIndex % 2 === rowIndex % 2,\n \"bg-slate-800\":\n columnIndex === focusedColumnIndex \|\| rowIndex === focusedRowIndex\n })}\n style={style}\n >\n row {rowIndex}, col {columnIndex}\n </div>\n );\n}\n"],"names":["useGridCallbackRef","useState","SvgCheckboxChecked","props","React.createElement","xmlns","height","viewBox","width","fill","d","SvgCheckboxIndeterminate","SvgCheckboxUnchecked","Checkbox","checked","children","className","indeterminate","onChange","rest","IconElement","iconClassName","IndeterminateIcon","CheckedIcon","UncheckedIcon","jsxs","jsx","event","currentTarget","type","Fragment","Input","value","ALIGNMENTS","map","label","ScratchpadRoute","rtl","setRtl","columnIndex","setColumnIndex","rowIndex","setRowIndex","gridRef","setGridRef","align","setAlign","Box","direction","gap","onKeyDown","key","scrollToCell","columnAlign","rowAlign","scrollToColumn","index","scrollToRow","Select","options","placeholder","autoFocus","min","max","parsed","parseInt","isNaN","step","Block","Grid","cellComponent","CellComponent","cellProps","focusedColumnIndex","focusedRowIndex","columnCount","columnWidth","dir","rowCount","rowHeight","style","cn"],"mappings":"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"}