react-window 2.1.2 → 2.2.0-alpha.0

package/docs/assets/StickyRowsRoute-BFaLUY3R.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n,C as t}from"./index-Cnm6lMUF.js";import{B as p}from"./arePropsEqual-CaQN03VG.js";import{C as e}from"./Code-r2plEB3N.js";import{H as i}from"./Header-CWpEkQSA.js";import{L as c}from"./List-CB_lBMmJ.js";const o='<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 r({index:a,style:n}){return 0===a?s.jsx("div",{style:n}):s.jsxs("div",{style:n,children:["Row ",a]})}function d(){return s.jsx(c,{rowComponent:r,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(i,{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(d,{})}),s.jsx("div",{children:"The example above was created using code like this:"}),s.jsx(e,{html: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-BFaLUY3R.js.map

package/docs/assets/StickyRowsRoute-BFaLUY3R.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StickyRowsRoute-BFaLUY3R.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 { Code } from \"../../components/code/Code\";\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      <Code html={ListWithStickyRowsMarkdown.html} />\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","Code","html","ListWithStickyRowsMarkdown","Callout","intent"],"mappings":"49JACaA,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,CAAKC,KAAMC,MACZrB,KAACsB,EAAA,CAAQC,OAAO,UACdtB,SAAA,GAAAF,IAAC,UAAOE,SAAA,SAAa,mHAK7B"}

package/docs/assets/SupportRoute-DbxH2zGy.js

@@ -1,2 +0,0 @@
-import{j as e,B as t,E as s}from"./index-Cnm6lMUF.js";import{H as i}from"./Header-CWpEkQSA.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-DbxH2zGy.js.map

package/docs/assets/SupportRoute-DbxH2zGy.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SupportRoute-DbxH2zGy.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-DI0yJsDS.js

@@ -1,2 +0,0 @@
-import{r as s,j as a,B as n,C as p,L as t}from"./index-Cnm6lMUF.js";import{B as e}from"./arePropsEqual-CaQN03VG.js";import{C as c}from"./Code-r2plEB3N.js";import{C as l}from"./ContinueLink-BDXFlJ2t.js";import{H as o}from"./Header-CWpEkQSA.js";import{L as i}from"./LoadingSpinner-D94ZhMZx.js";import{L as d}from"./List-CB_lBMmJ.js";import{j as r}from"./addresses-CDQyd4n9.js";let u=-1;function k(s=!1){if(-1===u||s){const s=document.createElement("div"),a=s.style;a.width="50px",a.height="50px",a.overflow="scroll",document.body.appendChild(s),u=s.offsetWidth-s.clientWidth,document.body.removeChild(s)}return u}const m='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">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(k);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(e,{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(c,{html: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-DI0yJsDS.js.map

package/docs/assets/TabularDataRoute-DI0yJsDS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabularDataRoute-DI0yJsDS.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 { Code } from \"../../components/code/Code\";\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      <Code html={FlexboxLayoutMarkdown.html} />\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","Code","html","FlexboxLayoutMarkdown","Callout","intent","Link","to","ContinueLink"],"mappings":"uXAAA,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,u/fCTA,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,CAAKC,KAAMC,MACZjC,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"}

package/docs/assets/VariableRowHeightsRoute-cSpZuhJh.js

@@ -1,2 +0,0 @@
-import{j as s,B as a}from"./index-Cnm6lMUF.js";import{B as n}from"./arePropsEqual-CaQN03VG.js";import{C as p}from"./Code-r2plEB3N.js";import{C as t}from"./ContinueLink-BDXFlJ2t.js";import{H as c}from"./Header-CWpEkQSA.js";import{L as e}from"./LoadingSpinner-D94ZhMZx.js";import{u as i,E as o}from"./useCitiesByState-DF2_rnmt.js";import"./List-CB_lBMmJ.js";import"./addresses-CDQyd4n9.js";const l='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName tok-definition">List</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">ListImperativeAPI</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-typeName">Item</span><span class=""> </span><span class="tok-operator">=</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-operator">|</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">type</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"state"</span><span class="tok-punctuation">;</span><span class=""> </span><span class="tok-propertyName tok-definition">state</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-operator">|</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">type</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"zip"</span><span class="tok-punctuation">;</span><span class=""> </span><span class="tok-propertyName tok-definition">city</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">;</span><span class=""> </span><span class="tok-propertyName tok-definition">zip</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-typeName">RowProps</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">items</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Item</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">items</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">items</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Item</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class="tok-operator">&#60;</span><span class="tok-variableName">RowProps</span><span class="tok-operator">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">items</span><span class="">.length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">rowHeight</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">items</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-string2">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">rowHeight</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">items</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowProps</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">switch</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">items</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-operator">.</span><span class="tok-propertyName">type</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"state"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">30</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">case</span><span class=""> </span><span class="tok-string">"zip"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-number">25</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">items</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">style</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-typeName">RowProps</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">item</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">items</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">className</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">getClassName</span><span class="tok-punctuation">(</span><span class="tok-variableName">item</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">className</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">type</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-string">"state"</span><span class=""> </span><span class="tok-operator">?</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">span</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">state</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-operator">:</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">city</span><span class="tok-punctuation">}</span><span class="">, </span><span class="tok-punctuation">{</span><span class="tok-variableName">item</span><span class="tok-operator">.</span><span class="tok-propertyName">zip</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">span</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">items</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function d(){const d=i();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(c,{section:"Lists",title:"Variable row heights"}),s.jsx("div",{children:"Lists with rows of different types may require different heights to render."}),s.jsx("div",{children:'Here is an example the most populous US postal codes, grouped by state. State rows "headers" are taller and are styled differently.'}),s.jsxs(n,{className:"h-50","data-focus-within":"bold",children:[!d.length&&s.jsx(e,{}),s.jsx(o,{items:d})]}),s.jsxs("div",{children:["This list requires a ",s.jsx("code",{children:"rowHeight"})," function that tells it what height a row should be based on the type of data it contains."]}),s.jsx(p,{html:l}),s.jsx(t,{to:"/list/props",title:"component props"})]})}export{d as default};
-//# sourceMappingURL=VariableRowHeightsRoute-cSpZuhJh.js.map

package/docs/assets/VariableRowHeightsRoute-cSpZuhJh.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariableRowHeightsRoute-cSpZuhJh.js","sources":["../../src/routes/list/VariableRowHeightsRoute.tsx"],"sourcesContent":["import ListVariableRowHeightsMarkdown from \"../../../public/generated/code-snippets/ListVariableRowHeights.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/ListVariableRowHeights.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\n\nexport default function VariableRowHeightsRoute() {\n  const citiesByState = useCitiesByState();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Variable row heights\" />\n      <div>\n        Lists with rows of different types may require different heights to\n        render.\n      </div>\n      <div>\n        Here is an example the most populous US postal codes, grouped by state.\n        State rows \"headers\" are taller and are styled differently.\n      </div>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!citiesByState.length && <LoadingSpinner />}\n        <Example items={citiesByState} />\n      </Block>\n      <div>\n        This list requires a <code>rowHeight</code> function that tells it what\n        height a row should be based on the type of data it contains.\n      </div>\n      <Code html={ListVariableRowHeightsMarkdown.html} />\n      <ContinueLink to=\"/list/props\" title=\"component props\" />\n    </Box>\n  );\n}\n"],"names":["VariableRowHeightsRoute","citiesByState","useCitiesByState","jsxs","Box","direction","gap","children","jsx","Header","section","title","Block","className","length","LoadingSpinner","Example","items","Code","html","ListVariableRowHeightsMarkdown","ContinueLink","to"],"mappings":"4tlBAUA,SAAwBA,IACtB,MAAMC,EAAgBC,IAEtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,2BAC9BH,IAAC,OAAID,SAAA,kFAILC,IAAC,OAAID,SAAA,wIAILJ,EAAAA,KAACS,EAAA,CAAMC,UAAU,OAAO,oBAAkB,OACvCN,SAAA,EAACN,EAAca,cAAWC,EAAA,CAAA,KAC3BP,IAACQ,EAAA,CAAQC,MAAOhB,cAEjB,MAAA,CAAIM,SAAA,CAAA,0BACkBC,IAAC,QAAKD,SAAA,cAAgB,kGAG7CC,IAACU,EAAA,CAAKC,KAAMC,IACZZ,EAAAA,IAACa,EAAA,CAAaC,GAAG,cAAcX,MAAM,sBAG3C"}