npm - react-window - Versions diffs - 2.0.2-alpha.1 → 2.1.0-alpha.0 - Mend

react-window 2.0.2-alpha.1 → 2.1.0-alpha.0

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 (83) hide show

package/docs/assets/{StickyRowsRoute-D9QBSEk_.js → StickyRowsRoute-DLva-P41.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as s,B as a,E as n,C as t}from"./index-C6NWGx8D.js";import{B as p}from"./arePropsEqual-Czc4-HWX.js";import{F as e}from"./FormattedCode-B5NYyy8K.js";import{H as c}from"./Header-B_onM2vR.js";import{L as i}from"./List-CwFMf7n1.js";const o={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">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-number">101</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">20</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-variableName">EMPTY_OBJECT</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-full h-0 top-0 sticky"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"h-[20px] bg-teal-600 px-2 rounded"</span><span class="tok-punctuation">&#62;</span><span class="">Sticky header</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">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">)</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">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-number">101</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">20</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-variableName">EMPTY_OBJECT</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-full h-0 top-0 sticky"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"h-[20px] bg-teal-600 px-2 rounded"</span><span class="tok-punctuation">&#62;</span><span class="">Sticky header</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">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">)</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>'},l={};function d({index:a,style:n}){return 0===a?s.jsx("div",{style:n}):s.jsxs("div",{style:n,children:["Row ",a]})}function r(){return s.jsx(i,{rowComponent:d,rowCount:101,rowHeight:20,rowProps:l,children:s.jsx("div",{className:"w-full h-0 top-0 sticky",children:s.jsx("div",{className:"h-[20px] bg-teal-600 px-2 rounded",children:"Sticky header"})})})}function h(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(c,{section:"Other",title:"Sticky rows"}),s.jsxs("div",{children:["If you want to render content on top of your list or grid, the safest method is to use a"," ",s.jsx(n,{href:"https://react.dev/reference/react-dom/createPortal",children:"portal"})," ","and render them directly into the parent document. This avoids potential clipping issues or z-index conflicts."]}),s.jsxs("div",{children:["In the case of sticky rows, it might be easier to render within the parent list or grid using the ",s.jsx("code",{children:"children"})," prop:"]}),s.jsx(e,{markdown:o}),s.jsxs(t,{intent:"warning",children:[s.jsx("strong",{children:"Note"})," the height of 0 in the example above prevents the sticky row from affecting the height of the parent list."]}),s.jsx("div",{children:"The sample code above creates a list like this:"}),s.jsx(p,{className:"h-50","data-focus-within":"bold",children:s.jsx(r,{})})]})}export{h as default};
-//# sourceMappingURL=StickyRowsRoute-D9QBSEk_.js.map
+import{j as s,B as a,E as n,C as t}from"./index-0ZXvQVSH.js";import{B as p}from"./arePropsEqual-U1Tm1J18.js";import{F as e}from"./FormattedCode-C9MIMH17.js";import{H as c}from"./Header-BdKWSvvb.js";import{L as i}from"./List-CxgHSppl.js";const o={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">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-number">101</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">20</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-variableName">EMPTY_OBJECT</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-full h-0 top-0 sticky"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"h-[20px] bg-teal-600 px-2 rounded"</span><span class="tok-punctuation">&#62;</span><span class="">Sticky header</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">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">)</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">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-number">101</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">20</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-variableName">EMPTY_OBJECT</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"w-full h-0 top-0 sticky"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"h-[20px] bg-teal-600 px-2 rounded"</span><span class="tok-punctuation">&#62;</span><span class="">Sticky header</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">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">)</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>'},l={};function d({index:a,style:n}){return 0===a?s.jsx("div",{style:n}):s.jsxs("div",{style:n,children:["Row ",a]})}function r(){return s.jsx(i,{rowComponent:d,rowCount:101,rowHeight:20,rowProps:l,children:s.jsx("div",{className:"w-full h-0 top-0 sticky",children:s.jsx("div",{className:"h-[20px] bg-teal-600 px-2 rounded",children:"Sticky header"})})})}function h(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(c,{section:"Other",title:"Sticky rows"}),s.jsxs("div",{children:["If you want to render content on top of your list or grid, the safest method is to use a"," ",s.jsx(n,{href:"https://react.dev/reference/react-dom/createPortal",children:"portal"})," ","and render them directly into the parent document. This avoids potential clipping issues or z-index conflicts."]}),s.jsxs("div",{children:['For the specific case of "sticky" rows, you can render within the parent list or grid using the ',s.jsx("code",{children:"children"})," prop:"]}),s.jsx(p,{className:"h-50","data-focus-within":"bold",children:s.jsx(r,{})}),s.jsx("div",{children:"The example above was created using code like this:"}),s.jsx(e,{markdown:o}),s.jsxs(t,{intent:"warning",children:[s.jsx("strong",{children:"Note"})," the height of 0 in the example above prevents the sticky row from affecting the height of the parent list."]})]})}export{h as default};
+//# sourceMappingURL=StickyRowsRoute-DLva-P41.js.map

package/docs/assets/{StickyRowsRoute-D9QBSEk_.js.map → StickyRowsRoute-DLva-P41.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StickyRowsRoute-~~D9QBSEk_~~.js","sources":["../../src/constants.ts","../../src/routes/list/examples/ListWithStickyRows.example.tsx","../../src/routes/list/StickyRowsRoute.tsx"],"sourcesContent":["export const EMPTY_ARRAY: unknown[] = [];\nexport const EMPTY_OBJECT = {};\nexport const NOOP_FUNCTION = () => {};\n","import { EMPTY_OBJECT } from \"../../../constants\";\n\nfunction RowComponent({ index, style }: RowComponentProps<object>) {\n if (index === 0) {\n return <div style={style}></div>;\n }\n\n return <div style={style}>Row {index}</div>;\n}\n\n// <begin>\n\nimport { List, type RowComponentProps } from \"react-window\";\n\nfunction Example() {\n return (\n <List\n rowComponent={RowComponent}\n rowCount={101}\n rowHeight={20}\n rowProps={EMPTY_OBJECT}\n >\n <div className=\"w-full h-0 top-0 sticky\">\n <div className=\"h-[20px] bg-teal-600 px-2 rounded\">Sticky header</div>\n </div>\n </List>\n );\n}\n\n// <end>\n\nexport { Example };\n","import ListWithStickyRowsMarkdown from \"../../../public/generated/code-snippets/ListWithStickyRows.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/ListWithStickyRows.example\";\n\nexport default function StickyRowsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Other\" title=\"Sticky rows\" />\n <div>\n If you want to render content on top of your list or grid, the safest\n method is to use a{\" \"}\n <ExternalLink href=\"https://react.dev/reference/react-dom/createPortal\">\n portal\n </ExternalLink>{\" \"}\n and render them directly into the parent document. This avoids potential\n clipping issues or z-index conflicts.\n </div>\n <div>\n In the case of sticky rows, it ~~might~~ ~~be easier to~~ render within the\n ~~parent~~ list or grid using the <code>children</code> prop:\n </div>\n <FormattedCode markdown={ListWithStickyRowsMarkdown} />\n <Callout intent=\"warning\">\n <strong>Note</strong> the height of 0 in the example above prevents the\n sticky row from affecting the height of the parent list.\n </Callout>\n ~~<div>The sample code above creates a list like this:</div>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n <Example />\n </Block>\n~~ </Box>\n );\n}\n"],"names":["EMPTY_OBJECT","RowComponent","index","style","jsx","jsxs","children","Example","List","rowComponent","rowCount","rowHeight","rowProps","className","StickyRowsRoute","Box","direction","gap","Header","section","title","ExternalLink","href","FormattedCode","markdown","ListWithStickyRowsMarkdown","Callout","intent"~~,"Block"~~],"mappings":"8iTACaA,EAAe,CAAA,ECC5B,SAASC,GAAaC,MAAEA,EAAAC,MAAOA,IAC7B,OAAc,IAAVD,EACKE,MAAC,OAAID,UAGPE,OAAC,OAAIF,QAAcG,SAAA,CAAA,OAAKJ,IACjC,CAMA,SAASK,IACP,OACEH,EAAAA,IAACI,EAAA,CACCC,aAAcR,EACdS,SAAU,IACVC,UAAW,GACXC,SAAUZ,EAEVM,SAAAF,EAAAA,IAAC,OAAIS,UAAU,0BACbP,eAAC,MAAA,CAAIO,UAAU,oCAAoCP,SAAA,qBAI3D,CClBA,SAAwBQ,IACtB,OACET,EAAAA,KAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BX,SAAA,CAAAF,EAAAA,IAACc,EAAA,CAAOC,QAAQ,QAAQC,MAAM,uBAC7B,MAAA,CAAId,SAAA,CAAA,2FAEgB,IACnBF,EAAAA,IAACiB,EAAA,CAAaC,KAAK,qDAAqDhB,SAAA,WAExD,IAAI,2HAIrB,MAAA,CAAIA,SAAA,CAAA,~~uGAE2BF~~,IAAC,QAAKE,SAAA,aAAe,~~cAErDF~~,IAACmB,~~EAAA~~,~~CAAcC~~,~~SAAUC~~,~~MACzBpB~~,~~KAACqB~~,~~EAAA~~,~~CAAQC~~,~~OAAO~~,~~UACdrB~~,SAAA,~~GAAAF~~,~~IAAC~~,~~UAAOE~~,~~SAAA~~,~~SAAa~~,~~mHAGvBF~~,~~IAAC~~,~~OAAIE~~,~~SAAA~~,~~oDACLF~~,~~EAAAA~~,~~IAACwB~~,~~GAAMf~~,~~UAAU~~,~~OAAO~~,~~oBAAkB~~,~~OACxCP~~,~~WAAAF,IAACG,UAIT~~"}
1	+ {"version":3,"file":"StickyRowsRoute-DLva-P41.js","sources":["../../src/constants.ts","../../src/routes/list/examples/ListWithStickyRows.example.tsx","../../src/routes/list/StickyRowsRoute.tsx"],"sourcesContent":["export const EMPTY_ARRAY: unknown[] = [];\nexport const EMPTY_OBJECT = {};\nexport const NOOP_FUNCTION = () => {};\n","import { EMPTY_OBJECT } from \"../../../constants\";\n\nfunction RowComponent({ index, style }: RowComponentProps<object>) {\n if (index === 0) {\n return <div style={style}></div>;\n }\n\n return <div style={style}>Row {index}</div>;\n}\n\n// <begin>\n\nimport { List, type RowComponentProps } from \"react-window\";\n\nfunction Example() {\n return (\n <List\n rowComponent={RowComponent}\n rowCount={101}\n rowHeight={20}\n rowProps={EMPTY_OBJECT}\n >\n <div className=\"w-full h-0 top-0 sticky\">\n <div className=\"h-[20px] bg-teal-600 px-2 rounded\">Sticky header</div>\n </div>\n </List>\n );\n}\n\n// <end>\n\nexport { Example };\n","import ListWithStickyRowsMarkdown from \"../../../public/generated/code-snippets/ListWithStickyRows.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/ListWithStickyRows.example\";\n\nexport default function StickyRowsRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Other\" title=\"Sticky rows\" />\n <div>\n If you want to render content on top of your list or grid, the safest\n method is to use a{\" \"}\n <ExternalLink href=\"https://react.dev/reference/react-dom/createPortal\">\n portal\n </ExternalLink>{\" \"}\n and render them directly into the parent document. This avoids potential\n clipping issues or z-index conflicts.\n </div>\n <div>\n For the specific case of \"sticky\" rows, you can render within the parent\n list or grid using the <code>children</code> prop:\n </div>\n <Block className=\"h-50\" data-focus-within=\"bold\">\n <Example />\n </Block>\n <div>The example above was created using code like this:</div>\n <FormattedCode markdown={ListWithStickyRowsMarkdown} />\n <Callout intent=\"warning\">\n <strong>Note</strong> the height of 0 in the example above prevents the\n sticky row from affecting the height of the parent list.\n </Callout>\n </Box>\n );\n}\n"],"names":["EMPTY_OBJECT","RowComponent","index","style","jsx","jsxs","children","Example","List","rowComponent","rowCount","rowHeight","rowProps","className","StickyRowsRoute","Box","direction","gap","Header","section","title","ExternalLink","href","Block","FormattedCode","markdown","ListWithStickyRowsMarkdown","Callout","intent"],"mappings":"8iTACaA,EAAe,CAAA,ECC5B,SAASC,GAAaC,MAAEA,EAAAC,MAAOA,IAC7B,OAAc,IAAVD,EACKE,MAAC,OAAID,UAGPE,OAAC,OAAIF,QAAcG,SAAA,CAAA,OAAKJ,IACjC,CAMA,SAASK,IACP,OACEH,EAAAA,IAACI,EAAA,CACCC,aAAcR,EACdS,SAAU,IACVC,UAAW,GACXC,SAAUZ,EAEVM,SAAAF,EAAAA,IAAC,OAAIS,UAAU,0BACbP,eAAC,MAAA,CAAIO,UAAU,oCAAoCP,SAAA,qBAI3D,CClBA,SAAwBQ,IACtB,OACET,EAAAA,KAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BX,SAAA,CAAAF,EAAAA,IAACc,EAAA,CAAOC,QAAQ,QAAQC,MAAM,uBAC7B,MAAA,CAAId,SAAA,CAAA,2FAEgB,IACnBF,EAAAA,IAACiB,EAAA,CAAaC,KAAK,qDAAqDhB,SAAA,WAExD,IAAI,2HAIrB,MAAA,CAAIA,SAAA,CAAA,qGAEoBF,IAAC,QAAKE,SAAA,aAAe,YAE9CF,EAAAA,IAACmB,GAAMV,UAAU,OAAO,oBAAkB,OACxCP,WAAAF,IAACG,UAEHH,IAAC,OAAIE,SAAA,0DACLF,IAACoB,EAAA,CAAcC,SAAUC,MACzBrB,KAACsB,EAAA,CAAQC,OAAO,UACdtB,SAAA,GAAAF,IAAC,UAAOE,SAAA,SAAa,mHAK7B"}

package/docs/assets/{SupportRoute-DyO6dv_w.js → SupportRoute-Do2-2OX7.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{j as e,B as t,E as s}from"./index-C6NWGx8D.js";import{H as i}from"./Header-B_onM2vR.js";function o(){return e.jsxs(t,{direction:"column",gap:4,children:[e.jsx(i,{title:"Support"}),e.jsxs("div",{children:[e.jsx(s,{href:"https://github.com/bvaughn/react-window",children:"GitHub"})," ","is the easiest place to look for help, but it's probably not the fastest. This project is maintained by a single developer so there is limited bandwidth for answering questions."]}),e.jsxs("div",{children:["I recommend asking questions on"," ",e.jsx(s,{href:"https://stackoverflow.com/questions/tagged/react-window",children:"Stack Overflow"})," ","or"," ",e.jsx(s,{href:"https://reddit.com/r/reactjs",children:"Reddit"})," ","to start with. Both sites have active communities who often respond quickly. If you don't find an answer there you can try opening a GitHub issue- but please take a moment first to see if your question has"," ",e.jsx(s,{href:"https://github.com/bvaughn/react-window/issues?q=is%3Aissue%20state%3Aclosed",children:"has already been answered"})," ","before opening a new one."]})]})}export{o as default};
-//# sourceMappingURL=SupportRoute-DyO6dv_w.js.map
+import{j as e,B as t,E as s}from"./index-0ZXvQVSH.js";import{H as i}from"./Header-BdKWSvvb.js";function o(){return e.jsxs(t,{direction:"column",gap:4,children:[e.jsx(i,{title:"Support"}),e.jsxs("div",{children:[e.jsx(s,{href:"https://github.com/bvaughn/react-window",children:"GitHub"})," ","is the easiest place to look for help, but it's probably not the fastest. This project is maintained by a single developer so there is limited bandwidth for answering questions."]}),e.jsxs("div",{children:["I recommend asking questions on"," ",e.jsx(s,{href:"https://stackoverflow.com/questions/tagged/react-window",children:"Stack Overflow"})," ","or"," ",e.jsx(s,{href:"https://reddit.com/r/reactjs",children:"Reddit"})," ","to start with. Both sites have active communities who often respond quickly. If you don't find an answer there you can try opening a GitHub issue- but please take a moment first to see if your question has"," ",e.jsx(s,{href:"https://github.com/bvaughn/react-window/issues?q=is%3Aissue%20state%3Aclosed",children:"has already been answered"})," ","before opening a new one."]})]})}export{o as default};
+//# sourceMappingURL=SupportRoute-Do2-2OX7.js.map

package/docs/assets/{SupportRoute-DyO6dv_w.js.map → SupportRoute-Do2-2OX7.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SupportRoute-~~DyO6dv_w~~.js","sources":["../../src/routes/SupportRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function SupportRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Support\" />\n <div>\n <ExternalLink href=\"https://github.com/bvaughn/react-window\">\n GitHub\n </ExternalLink>{\" \"}\n is the easiest place to look for help, but it's probably not the\n fastest. This project is maintained by a single developer so there is\n limited bandwidth for answering questions.\n </div>\n <div>\n I recommend asking questions on{\" \"}\n <ExternalLink href=\"https://stackoverflow.com/questions/tagged/react-window\">\n Stack Overflow\n </ExternalLink>{\" \"}\n or{\" \"}\n <ExternalLink href=\"https://reddit.com/r/reactjs\">Reddit</ExternalLink>{\" \"}\n to start with. Both sites have active communities who often respond\n quickly. If you don't find an answer there you can try opening a GitHub\n issue- but please take a moment first to see if your question has{\" \"}\n <ExternalLink href=\"https://github.com/bvaughn/react-window/issues?q=is%3Aissue%20state%3Aclosed\">\n has already been answered\n </ExternalLink>{\" \"}\n before opening a new one.\n </div>\n </Box>\n );\n}\n"],"names":["SupportRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href"],"mappings":"+FAIA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,mBACb,MAAA,CACCH,SAAA,CAAAC,EAAAA,IAACG,EAAA,CAAaC,KAAK,0CAA0CL,SAAA,WAE7C,IAAI,8LAKrB,MAAA,CAAIA,SAAA,CAAA,kCAC6B,IAChCC,EAAAA,IAACG,EAAA,CAAaC,KAAK,0DAA0DL,SAAA,mBAE7D,IAAI,KACjB,IACHC,EAAAA,IAACG,EAAA,CAAaC,KAAK,+BAA+BL,SAAA,WAAsB,IAAI,gNAGV,IAClEC,EAAAA,IAACG,EAAA,CAAaC,KAAK,+EAA+EL,SAAA,8BAElF,IAAI,iCAK5B"}
1	+ {"version":3,"file":"SupportRoute-Do2-2OX7.js","sources":["../../src/routes/SupportRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function SupportRoute() {\n return (\n <Box direction=\"column\" gap={4}>\n <Header title=\"Support\" />\n <div>\n <ExternalLink href=\"https://github.com/bvaughn/react-window\">\n GitHub\n </ExternalLink>{\" \"}\n is the easiest place to look for help, but it's probably not the\n fastest. This project is maintained by a single developer so there is\n limited bandwidth for answering questions.\n </div>\n <div>\n I recommend asking questions on{\" \"}\n <ExternalLink href=\"https://stackoverflow.com/questions/tagged/react-window\">\n Stack Overflow\n </ExternalLink>{\" \"}\n or{\" \"}\n <ExternalLink href=\"https://reddit.com/r/reactjs\">Reddit</ExternalLink>{\" \"}\n to start with. Both sites have active communities who often respond\n quickly. If you don't find an answer there you can try opening a GitHub\n issue- but please take a moment first to see if your question has{\" \"}\n <ExternalLink href=\"https://github.com/bvaughn/react-window/issues?q=is%3Aissue%20state%3Aclosed\">\n has already been answered\n </ExternalLink>{\" \"}\n before opening a new one.\n </div>\n </Box>\n );\n}\n"],"names":["SupportRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href"],"mappings":"+FAIA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,mBACb,MAAA,CACCH,SAAA,CAAAC,EAAAA,IAACG,EAAA,CAAaC,KAAK,0CAA0CL,SAAA,WAE7C,IAAI,8LAKrB,MAAA,CAAIA,SAAA,CAAA,kCAC6B,IAChCC,EAAAA,IAACG,EAAA,CAAaC,KAAK,0DAA0DL,SAAA,mBAE7D,IAAI,KACjB,IACHC,EAAAA,IAACG,EAAA,CAAaC,KAAK,+BAA+BL,SAAA,WAAsB,IAAI,gNAGV,IAClEC,EAAAA,IAACG,EAAA,CAAaC,KAAK,+EAA+EL,SAAA,8BAElF,IAAI,iCAK5B"}

package/docs/assets/{TabularDataRoute-CH8QvWD7.js → TabularDataRoute-DPSrWaLN.js} RENAMED Viewed

@@ -1,2 +1,2 @@
-import{r as s,j as a,B as n,C as p,L as t}from"./index-C6NWGx8D.js";import{B as c}from"./arePropsEqual-Czc4-HWX.js";import{F as e}from"./FormattedCode-B5NYyy8K.js";import{C as l}from"./ContinueLink-DMnSPbdx.js";import{H as o}from"./Header-B_onM2vR.js";import{L as i}from"./LoadingSpinner-BMzTPwZo.js";import{L as d}from"./List-CwFMf7n1.js";import{j as r}from"./addresses-CDQyd4n9.js";let k=-1;function u(s=!1){if(-1===k||s){const s=document.createElement("div"),a=s.style;a.width="50px",a.height="50px",a.overflow="scroll",document.body.appendChild(s),k=s.offsetWidth-s.clientWidth,document.body.removeChild(s)}return k}const m={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">getScrollbarSize</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">addresses</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></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-punctuation">[</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="tok-punctuation">(</span><span class="tok-variableName">getScrollbarSize</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">"h-55 flex flex-col"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row bg-teal-600 p-1 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"grow flex flex-row items-center gap-2 font-bold"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-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: 12ch; 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-1"</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: 12ch; 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">"w-10"</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: 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">className</span><span class="tok-operator">=</span><span class="tok-string">"shrink"</span><span class=""> </span><span class="tok-propertyName">style</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">size</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></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">className</span><span class="tok-operator">=</span><span class="tok-string">"overflow-hidden"</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">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; 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: 12ch; 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">addresses</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: 12ch; 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: 12ch; 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">addresses</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#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><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">addresses</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></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">addresses</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></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">"flex flex-row items-center gap-2 px-2"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"w-10 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</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-variableName tok-definition">getScrollbarSize</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-propertyName">addresses</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">addresses</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Address</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></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-punctuation">[</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="tok-punctuation">(</span><span class="tok-variableName">getScrollbarSize</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">"h-55 flex flex-col"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row bg-teal-600 p-1 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"grow flex flex-row items-center gap-2 font-bold"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-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: 12ch; 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-1"</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: 12ch; 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">"w-10"</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: 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">className</span><span class="tok-operator">=</span><span class="tok-string">"shrink"</span><span class=""> </span><span class="tok-propertyName">style</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">size</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></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">className</span><span class="tok-operator">=</span><span class="tok-string">"overflow-hidden"</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">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; 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: 12ch; 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">addresses</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: 12ch; 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: 12ch; 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">addresses</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#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><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">addresses</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">addresses</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Address</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="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">addresses</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></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">"flex flex-row items-center gap-2 px-2"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"w-10 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</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({addresses:n}){const[p]=s.useState(u);return a.jsxs("div",{className:"h-55 flex flex-col",children:[a.jsxs("div",{className:"flex flex-row bg-teal-600 p-1 px-2",children:[a.jsxs("div",{className:"grow flex flex-row items-center gap-2 font-bold",children:[a.jsx("div",{className:"flex-1",children:"City"}),a.jsx("div",{className:"flex-1",children:"State"}),a.jsx("div",{className:"w-10",children:"Zip"})]}),a.jsx("div",{className:"shrink",style:{width:p}})]}),a.jsx("div",{className:"overflow-hidden",children:a.jsx(d,{rowComponent:v,rowCount:n.length,rowHeight:25,rowProps:{addresses:n}})})]})}function v({index:s,addresses:n,style:p}){const t=n[s];return a.jsxs("div",{className:"flex flex-row items-center gap-2 px-2",style:p,children:[a.jsx("div",{className:"flex-1",children:t.city}),a.jsx("div",{className:"flex-1",children:t.state}),a.jsx("div",{className:"w-10 text-xs",children:t.zip})]})}function y(){const d=s.useMemo(()=>r?r.sort((s,a)=>s.city.localeCompare(a.city)):[],[]);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(o,{section:"Tables",title:"Rendering tabular data"}),a.jsx("div",{children:"Many types of tabular data can be rendered using the list component."}),a.jsx(c,{className:"p-0!","data-focus-within":"bold",children:d.length?a.jsx(h,{addresses:d}):a.jsx("div",{className:"p-2",children:a.jsx(i,{})})}),a.jsx("div",{children:"The example above uses Flexbox layout to position columns and headers."}),a.jsx(e,{markdown:m}),a.jsxs(p,{intent:"primary",children:["It may be more efficient to render data with many columns using the"," ",a.jsx(t,{to:"/grid/grid",children:"Grid"})," component."]}),a.jsx(l,{to:"/list/tabular-data-aria-roles",title:"ARIA roles"})]})}export{y as default};
-//# sourceMappingURL=TabularDataRoute-CH8QvWD7.js.map
+import{r as s,j as a,B as n,C as p,L as t}from"./index-0ZXvQVSH.js";import{B as c}from"./arePropsEqual-U1Tm1J18.js";import{F as e}from"./FormattedCode-C9MIMH17.js";import{C as l}from"./ContinueLink-Bt_isYvF.js";import{H as o}from"./Header-BdKWSvvb.js";import{L as i}from"./LoadingSpinner-tWpMuzoA.js";import{L as d}from"./List-CxgHSppl.js";import{j as r}from"./addresses-CDQyd4n9.js";let k=-1;function u(s=!1){if(-1===k||s){const s=document.createElement("div"),a=s.style;a.width="50px",a.height="50px",a.overflow="scroll",document.body.appendChild(s),k=s.offsetWidth-s.clientWidth,document.body.removeChild(s)}return k}const m={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">getScrollbarSize</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">addresses</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></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-punctuation">[</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="tok-punctuation">(</span><span class="tok-variableName">getScrollbarSize</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">"h-55 flex flex-col"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row bg-teal-600 p-1 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"grow flex flex-row items-center gap-2 font-bold"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-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: 12ch; 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-1"</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: 12ch; 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">"w-10"</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: 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">className</span><span class="tok-operator">=</span><span class="tok-string">"shrink"</span><span class=""> </span><span class="tok-propertyName">style</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">size</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></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">className</span><span class="tok-operator">=</span><span class="tok-string">"overflow-hidden"</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">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; 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: 12ch; 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">addresses</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: 12ch; 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: 12ch; 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">addresses</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#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><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">addresses</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></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">addresses</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></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">"flex flex-row items-center gap-2 px-2"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"w-10 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</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-variableName tok-definition">getScrollbarSize</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-propertyName">addresses</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">addresses</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Address</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></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-punctuation">[</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="tok-punctuation">(</span><span class="tok-variableName">getScrollbarSize</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">"h-55 flex flex-col"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"flex flex-row bg-teal-600 p-1 px-2"</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">className</span><span class="tok-operator">=</span><span class="tok-string">"grow flex flex-row items-center gap-2 font-bold"</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex-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: 12ch; 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-1"</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: 12ch; 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">"w-10"</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: 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">className</span><span class="tok-operator">=</span><span class="tok-string">"shrink"</span><span class=""> </span><span class="tok-propertyName">style</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">size</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class=""></span></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">className</span><span class="tok-operator">=</span><span class="tok-string">"overflow-hidden"</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">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; 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: 12ch; 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">addresses</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: 12ch; 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: 12ch; 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">addresses</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: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#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><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">addresses</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">addresses</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Address</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="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">addresses</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></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">"flex flex-row items-center gap-2 px-2"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"flex-1"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></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">"w-10 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">address</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</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({addresses:n}){const[p]=s.useState(u);return a.jsxs("div",{className:"h-55 flex flex-col",children:[a.jsxs("div",{className:"flex flex-row bg-teal-600 p-1 px-2",children:[a.jsxs("div",{className:"grow flex flex-row items-center gap-2 font-bold",children:[a.jsx("div",{className:"flex-1",children:"City"}),a.jsx("div",{className:"flex-1",children:"State"}),a.jsx("div",{className:"w-10",children:"Zip"})]}),a.jsx("div",{className:"shrink",style:{width:p}})]}),a.jsx("div",{className:"overflow-hidden",children:a.jsx(d,{rowComponent:v,rowCount:n.length,rowHeight:25,rowProps:{addresses:n}})})]})}function v({index:s,addresses:n,style:p}){const t=n[s];return a.jsxs("div",{className:"flex flex-row items-center gap-2 px-2",style:p,children:[a.jsx("div",{className:"flex-1",children:t.city}),a.jsx("div",{className:"flex-1",children:t.state}),a.jsx("div",{className:"w-10 text-xs",children:t.zip})]})}function y(){const d=s.useMemo(()=>r?r.sort((s,a)=>s.city.localeCompare(a.city)):[],[]);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(o,{section:"Tables",title:"Rendering tabular data"}),a.jsx("div",{children:"Many types of tabular data can be rendered using the list component."}),a.jsx(c,{className:"p-0!","data-focus-within":"bold",children:d.length?a.jsx(h,{addresses:d}):a.jsx("div",{className:"p-2",children:a.jsx(i,{})})}),a.jsx("div",{children:"The example above uses Flexbox layout to position columns and headers."}),a.jsx(e,{markdown:m}),a.jsxs(p,{intent:"primary",children:["It may be more efficient to render data with many columns using the"," ",a.jsx(t,{to:"/grid/grid",children:"Grid"})," component."]}),a.jsx(l,{to:"/list/tabular-data-aria-roles",title:"ARIA roles"})]})}export{y as default};
+//# sourceMappingURL=TabularDataRoute-DPSrWaLN.js.map

package/docs/assets/{TabularDataRoute-CH8QvWD7.js.map → TabularDataRoute-DPSrWaLN.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabularDataRoute-~~CH8QvWD7~~.js","sources":["../../lib/utils/getScrollbarSize.ts","../../src/routes/tables/examples/FlexboxLayout.example.tsx","../../src/routes/tables/TabularDataRoute.tsx","../../src/routes/tables/hooks/useAddresses.ts"],"sourcesContent":["let size: number = -1;\n\nexport function getScrollbarSize(recalculate: boolean = false): number {\n if (size === -1 \|\| recalculate) {\n const div = document.createElement(\"div\");\n const style = div.style;\n style.width = \"50px\";\n style.height = \"50px\";\n style.overflow = \"scroll\";\n\n document.body.appendChild(div);\n\n size = div.offsetWidth - div.clientWidth;\n\n document.body.removeChild(div);\n }\n\n return size;\n}\n\nexport function setScrollbarSizeForTests(value: number) {\n size = value;\n}\n","import { useState } from \"react\";\nimport type json from \"../../../../public/data/addresses.json\";\n\ntype Address = (typeof json)[0];\n\n// <begin>\n\nimport { getScrollbarSize, List, type RowComponentProps } from \"react-window\";\n\nfunction Example({ addresses }: { addresses: Address[] }) {\n const [size] = useState(getScrollbarSize);\n\n return (\n <div className=\"h-55 flex flex-col\">\n <div className=\"flex flex-row bg-teal-600 p-1 px-2\">\n <div className=\"grow flex flex-row items-center gap-2 font-bold\">\n <div className=\"flex-1\">City</div>\n <div className=\"flex-1\">State</div>\n <div className=\"w-10\">Zip</div>\n </div>\n <div className=\"shrink\" style={{ width: size }} />\n </div>\n <div className=\"overflow-hidden\">\n <List\n rowComponent={RowComponent}\n rowCount={addresses.length}\n rowHeight={25}\n rowProps={{ addresses }}\n />\n </div>\n </div>\n );\n}\n\nfunction RowComponent({\n index,\n addresses,\n style\n}: RowComponentProps<{\n addresses: Address[];\n}>) {\n const address = addresses[index];\n\n return (\n <div className=\"flex flex-row items-center gap-2 px-2\" style={style}>\n <div className=\"flex-1\">{address.city}</div>\n <div className=\"flex-1\">{address.state}</div>\n <div className=\"w-10 text-xs\">{address.zip}</div>\n </div>\n );\n}\n\n// <end>\n\nexport { Example };\n","import FlexboxLayoutMarkdown from \"../../../public/generated/code-snippets/FlexboxLayout.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 { Header } from \"../../components/Header\";\nimport { Link } from \"../../components/Link\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/FlexboxLayout.example\";\nimport { useAddresses } from \"./hooks/useAddresses\";\n\nexport default function TabularDataRoute() {\n const addresses = useAddresses();\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Tables\" title=\"Rendering tabular data\" />\n <div>\n Many types of tabular data can be rendered using the list component.\n </div>\n <Block className=\"p-0!\" data-focus-within=\"bold\">\n {!addresses.length ? (\n <div className=\"p-2\">\n <LoadingSpinner />\n </div>\n ) : (\n <Example addresses={addresses} />\n )}\n </Block>\n <div>\n The example above uses Flexbox layout to position columns and headers.\n </div>\n <FormattedCode markdown={FlexboxLayoutMarkdown} />\n <Callout intent=\"primary\">\n It may be more efficient to render data with many columns using the{\" \"}\n <Link to=\"/grid/grid\">Grid</Link> component.\n </Callout>\n <ContinueLink to=\"/list/tabular-data-aria-roles\" title=\"ARIA roles\" />\n </Box>\n );\n}\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/addresses.json\";\n\ntype Address = (typeof json)[0];\n\nexport function useAddresses(): Address[] {\n return useMemo(() => {\n if (json) {\n return json.sort((a, b) => a.city.localeCompare(b.city));\n }\n\n return [];\n }, []);\n}\n"],"names":["size","getScrollbarSize","recalculate","div","document","createElement","style","width","height","overflow","body","appendChild","offsetWidth","clientWidth","removeChild","Example","addresses","useState","jsxs","className","children","jsx","List","rowComponent","RowComponent","rowCount","length","rowHeight","rowProps","index","address","city","state","zip","TabularDataRoute","useMemo","json","sort","a","b","localeCompare","Box","direction","gap","Header","section","title","Block","LoadingSpinner","FormattedCode","markdown","FlexboxLayoutMarkdown","Callout","intent","Link","to","ContinueLink"],"mappings":"gYAAA,IAAIA,GAAe,EAEZ,SAASC,EAAiBC,GAAuB,GACtD,QAAIF,GAAeE,EAAa,CAC9B,MAAMC,EAAMC,SAASC,cAAc,OAC7BC,EAAQH,EAAIG,MAClBA,EAAMC,MAAQ,OACdD,EAAME,OAAS,OACfF,EAAMG,SAAW,SAEjBL,SAASM,KAAKC,YAAYR,GAE1BH,EAAOG,EAAIS,YAAcT,EAAIU,YAE7BT,SAASM,KAAKI,YAAYX,EAC5B,CAEA,OAAOH,CACT,qx8BCTA,SAASe,GAAQC,UAAEA,IACjB,MAAOhB,GAAQiB,EAAAA,SAAShB,GAExB,SACEiB,KAAC,MAAA,CAAIC,UAAU,qBACbC,SAAA,GAAAF,KAAC,MAAA,CAAIC,UAAU,qCACbC,SAAA,GAAAF,KAAC,MAAA,CAAIC,UAAU,kDACbC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAASC,SAAA,SACxBC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAASC,SAAA,UACxBC,EAAAA,IAAC,MAAA,CAAIF,UAAU,OAAOC,SAAA,WAExBC,MAAC,OAAIF,UAAU,SAASb,MAAO,CAAEC,MAAOP,UAE1CqB,IAAC,MAAA,CAAIF,UAAU,kBACbC,SAAAC,EAAAA,IAACC,EAAA,CACCC,aAAcC,EACdC,SAAUT,EAAUU,OACpBC,UAAW,GACXC,SAAU,CAAEZ,mBAKtB,CAEA,SAASQ,GAAaK,MACpBA,EAAAb,UACAA,EAAAV,MACAA,IAIA,MAAMwB,EAAUd,EAAUa,GAE1B,SACEX,KAAC,MAAA,CAAIC,UAAU,wCAAwCb,QACrDc,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAAUC,SAAAU,EAAQC,OACjCV,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAAUC,WAAQY,QACjCX,EAAAA,IAAC,MAAA,CAAIF,UAAU,eAAgBC,WAAQa,QAG7C,CCtCA,SAAwBC,IACtB,MAAMlB,ECPCmB,EAAAA,QAAQ,IACTC,EACKA,EAAKC,KAAK,CAACC,EAAGC,IAAMD,EAAEP,KAAKS,cAAcD,EAAER,OAG7C,GACN,IDGH,OACEb,EAAAA,KAACuB,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,CAAAC,EAAAA,IAACuB,EAAA,CAAOC,QAAQ,SAASC,MAAM,6BAC/BzB,IAAC,OAAID,SAAA,yEAGLC,EAAAA,IAAC0B,GAAM5B,UAAU,OAAO,oBAAkB,OACvCC,SAACJ,EAAUU,OAKVL,EAAAA,IAACN,EAAA,CAAQC,cAJTK,EAAAA,IAAC,OAAIF,UAAU,MACbC,eAAC4B,EAAA,CAAA,SAMP3B,IAAC,OAAID,SAAA,6EAGLC,IAAC4B,EAAA,CAAcC,SAAUC,MACzBjC,KAACkC,EAAA,CAAQC,OAAO,UAAUjC,SAAA,CAAA,sEAC4C,IACpEC,EAAAA,IAACiC,EAAA,CAAKC,GAAG,aAAanC,SAAA,SAAW,iBAEnCC,EAAAA,IAACmC,EAAA,CAAaD,GAAG,gCAAgCT,MAAM,iBAG7D"}
1	+ {"version":3,"file":"TabularDataRoute-DPSrWaLN.js","sources":["../../lib/utils/getScrollbarSize.ts","../../src/routes/tables/examples/FlexboxLayout.example.tsx","../../src/routes/tables/TabularDataRoute.tsx","../../src/routes/tables/hooks/useAddresses.ts"],"sourcesContent":["let size: number = -1;\n\nexport function getScrollbarSize(recalculate: boolean = false): number {\n if (size === -1 \|\| recalculate) {\n const div = document.createElement(\"div\");\n const style = div.style;\n style.width = \"50px\";\n style.height = \"50px\";\n style.overflow = \"scroll\";\n\n document.body.appendChild(div);\n\n size = div.offsetWidth - div.clientWidth;\n\n document.body.removeChild(div);\n }\n\n return size;\n}\n\nexport function setScrollbarSizeForTests(value: number) {\n size = value;\n}\n","import { useState } from \"react\";\nimport type json from \"../../../../public/data/addresses.json\";\n\ntype Address = (typeof json)[0];\n\n// <begin>\n\nimport { getScrollbarSize, List, type RowComponentProps } from \"react-window\";\n\nfunction Example({ addresses }: { addresses: Address[] }) {\n const [size] = useState(getScrollbarSize);\n\n return (\n <div className=\"h-55 flex flex-col\">\n <div className=\"flex flex-row bg-teal-600 p-1 px-2\">\n <div className=\"grow flex flex-row items-center gap-2 font-bold\">\n <div className=\"flex-1\">City</div>\n <div className=\"flex-1\">State</div>\n <div className=\"w-10\">Zip</div>\n </div>\n <div className=\"shrink\" style={{ width: size }} />\n </div>\n <div className=\"overflow-hidden\">\n <List\n rowComponent={RowComponent}\n rowCount={addresses.length}\n rowHeight={25}\n rowProps={{ addresses }}\n />\n </div>\n </div>\n );\n}\n\nfunction RowComponent({\n index,\n addresses,\n style\n}: RowComponentProps<{\n addresses: Address[];\n}>) {\n const address = addresses[index];\n\n return (\n <div className=\"flex flex-row items-center gap-2 px-2\" style={style}>\n <div className=\"flex-1\">{address.city}</div>\n <div className=\"flex-1\">{address.state}</div>\n <div className=\"w-10 text-xs\">{address.zip}</div>\n </div>\n );\n}\n\n// <end>\n\nexport { Example };\n","import FlexboxLayoutMarkdown from \"../../../public/generated/code-snippets/FlexboxLayout.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 { Header } from \"../../components/Header\";\nimport { Link } from \"../../components/Link\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/FlexboxLayout.example\";\nimport { useAddresses } from \"./hooks/useAddresses\";\n\nexport default function TabularDataRoute() {\n const addresses = useAddresses();\n\n return (\n <Box direction=\"column\" gap={4}>\n <Header section=\"Tables\" title=\"Rendering tabular data\" />\n <div>\n Many types of tabular data can be rendered using the list component.\n </div>\n <Block className=\"p-0!\" data-focus-within=\"bold\">\n {!addresses.length ? (\n <div className=\"p-2\">\n <LoadingSpinner />\n </div>\n ) : (\n <Example addresses={addresses} />\n )}\n </Block>\n <div>\n The example above uses Flexbox layout to position columns and headers.\n </div>\n <FormattedCode markdown={FlexboxLayoutMarkdown} />\n <Callout intent=\"primary\">\n It may be more efficient to render data with many columns using the{\" \"}\n <Link to=\"/grid/grid\">Grid</Link> component.\n </Callout>\n <ContinueLink to=\"/list/tabular-data-aria-roles\" title=\"ARIA roles\" />\n </Box>\n );\n}\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/addresses.json\";\n\ntype Address = (typeof json)[0];\n\nexport function useAddresses(): Address[] {\n return useMemo(() => {\n if (json) {\n return json.sort((a, b) => a.city.localeCompare(b.city));\n }\n\n return [];\n }, []);\n}\n"],"names":["size","getScrollbarSize","recalculate","div","document","createElement","style","width","height","overflow","body","appendChild","offsetWidth","clientWidth","removeChild","Example","addresses","useState","jsxs","className","children","jsx","List","rowComponent","RowComponent","rowCount","length","rowHeight","rowProps","index","address","city","state","zip","TabularDataRoute","useMemo","json","sort","a","b","localeCompare","Box","direction","gap","Header","section","title","Block","LoadingSpinner","FormattedCode","markdown","FlexboxLayoutMarkdown","Callout","intent","Link","to","ContinueLink"],"mappings":"gYAAA,IAAIA,GAAe,EAEZ,SAASC,EAAiBC,GAAuB,GACtD,QAAIF,GAAeE,EAAa,CAC9B,MAAMC,EAAMC,SAASC,cAAc,OAC7BC,EAAQH,EAAIG,MAClBA,EAAMC,MAAQ,OACdD,EAAME,OAAS,OACfF,EAAMG,SAAW,SAEjBL,SAASM,KAAKC,YAAYR,GAE1BH,EAAOG,EAAIS,YAAcT,EAAIU,YAE7BT,SAASM,KAAKI,YAAYX,EAC5B,CAEA,OAAOH,CACT,qx8BCTA,SAASe,GAAQC,UAAEA,IACjB,MAAOhB,GAAQiB,EAAAA,SAAShB,GAExB,SACEiB,KAAC,MAAA,CAAIC,UAAU,qBACbC,SAAA,GAAAF,KAAC,MAAA,CAAIC,UAAU,qCACbC,SAAA,GAAAF,KAAC,MAAA,CAAIC,UAAU,kDACbC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAASC,SAAA,SACxBC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAASC,SAAA,UACxBC,EAAAA,IAAC,MAAA,CAAIF,UAAU,OAAOC,SAAA,WAExBC,MAAC,OAAIF,UAAU,SAASb,MAAO,CAAEC,MAAOP,UAE1CqB,IAAC,MAAA,CAAIF,UAAU,kBACbC,SAAAC,EAAAA,IAACC,EAAA,CACCC,aAAcC,EACdC,SAAUT,EAAUU,OACpBC,UAAW,GACXC,SAAU,CAAEZ,mBAKtB,CAEA,SAASQ,GAAaK,MACpBA,EAAAb,UACAA,EAAAV,MACAA,IAIA,MAAMwB,EAAUd,EAAUa,GAE1B,SACEX,KAAC,MAAA,CAAIC,UAAU,wCAAwCb,QACrDc,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAAUC,SAAAU,EAAQC,OACjCV,EAAAA,IAAC,MAAA,CAAIF,UAAU,SAAUC,WAAQY,QACjCX,EAAAA,IAAC,MAAA,CAAIF,UAAU,eAAgBC,WAAQa,QAG7C,CCtCA,SAAwBC,IACtB,MAAMlB,ECPCmB,EAAAA,QAAQ,IACTC,EACKA,EAAKC,KAAK,CAACC,EAAGC,IAAMD,EAAEP,KAAKS,cAAcD,EAAER,OAG7C,GACN,IDGH,OACEb,EAAAA,KAACuB,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,CAAAC,EAAAA,IAACuB,EAAA,CAAOC,QAAQ,SAASC,MAAM,6BAC/BzB,IAAC,OAAID,SAAA,yEAGLC,EAAAA,IAAC0B,GAAM5B,UAAU,OAAO,oBAAkB,OACvCC,SAACJ,EAAUU,OAKVL,EAAAA,IAACN,EAAA,CAAQC,cAJTK,EAAAA,IAAC,OAAIF,UAAU,MACbC,eAAC4B,EAAA,CAAA,SAMP3B,IAAC,OAAID,SAAA,6EAGLC,IAAC4B,EAAA,CAAcC,SAAUC,MACzBjC,KAACkC,EAAA,CAAQC,OAAO,UAAUjC,SAAA,CAAA,sEAC4C,IACpEC,EAAAA,IAACiC,EAAA,CAAKC,GAAG,aAAanC,SAAA,SAAW,iBAEnCC,EAAAA,IAACmC,EAAA,CAAaD,GAAG,gCAAgCT,MAAM,iBAG7D"}