react-window 2.1.0 → 2.1.1

package/docs/assets/StickyRowsRoute-DUIWoMJJ.js

@@ -0,0 +1,2 @@
+import{j as s,B as a,E as n,C as t}from"./index-3R9tv3eW.js";import{B as p}from"./arePropsEqual-MBk0PiJi.js";import{C as e}from"./Code-BJ6U_DpT.js";import{H as i}from"./Header-DM8OHOd_.js";import{L as c}from"./List-B9HC1vRM.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-DUIWoMJJ.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StickyRowsRoute-DUIWoMJJ.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-BneNHh_g.js → SupportRoute-DO1SyQwL.js}

@@ -1,2 +1,2 @@
-import{j as e,B as t,E as s}from"./index-1kZ13GgQ.js";import{H as i}from"./Header-CDZFHeTb.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-BneNHh_g.js.map
+import{j as e,B as t,E as s}from"./index-3R9tv3eW.js";import{H as i}from"./Header-DM8OHOd_.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-DO1SyQwL.js.map

package/docs/assets/{SupportRoute-BneNHh_g.js.map → SupportRoute-DO1SyQwL.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SupportRoute-BneNHh_g.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"}
+{"version":3,"file":"SupportRoute-DO1SyQwL.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-DMwDahmo.js

@@ -0,0 +1,2 @@
+import{r as s,j as a,B as n,C as p,L as t}from"./index-3R9tv3eW.js";import{B as e}from"./arePropsEqual-MBk0PiJi.js";import{C as c}from"./Code-BJ6U_DpT.js";import{C as l}from"./ContinueLink-Mq4XOwMu.js";import{H as o}from"./Header-DM8OHOd_.js";import{L as i}from"./LoadingSpinner-CcA45RYo.js";import{L as d}from"./List-B9HC1vRM.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-DMwDahmo.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabularDataRoute-DMwDahmo.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-B9mccfzh.js

@@ -0,0 +1,2 @@
+import{j as s,B as a}from"./index-3R9tv3eW.js";import{B as n}from"./arePropsEqual-MBk0PiJi.js";import{C as p}from"./Code-BJ6U_DpT.js";import{C as t}from"./ContinueLink-Mq4XOwMu.js";import{H as c}from"./Header-DM8OHOd_.js";import{L as e}from"./LoadingSpinner-CcA45RYo.js";import{u as i,E as o}from"./useCitiesByState-DlHLfAIQ.js";import"./List-B9HC1vRM.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-B9mccfzh.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"VariableRowHeightsRoute-B9mccfzh.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"}

package/docs/assets/{arePropsEqual-Bd1V-lj7.js → arePropsEqual-MBk0PiJi.js}

@@ -1,2 +1,2 @@
-import{j as e,X as t,r as n,Y as i}from"./index-1kZ13GgQ.js";function s({children:n,className:i,...s}){return e.jsx(t,{children:e.jsx("div",{className:`border-lg bg-black/30 text-slate-300 rounded-lg p-2 ${i}`,...s,children:n})})}function r(e){if(void 0!==e)switch(typeof e){case"number":return e;case"string":if(e.endsWith("px"))return parseFloat(e)}}let o=null;function c({containerElement:e,direction:t,isRtl:n,scrollOffset:i}){if("horizontal"===t&&n)switch(function(e=!1){if(null===o||e){const e=document.createElement("div"),t=e.style;t.width="50px",t.height="50px",t.overflow="scroll",t.direction="rtl";const n=document.createElement("div"),i=n.style;return i.width="100px",i.height="100px",e.appendChild(n),document.body.appendChild(e),e.scrollLeft>0?o="positive-descending":(e.scrollLeft=1,o=0===e.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(e),o}return o}()){case"negative":return-i;case"positive-descending":if(e){const{clientWidth:t,scrollLeft:n,scrollWidth:i}=e;return i-t-n}}return i}function l(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function a(e,t){if(e===t)return!0;if(!!e!=!!t)return!1;if(l(void 0!==e),l(void 0!==t),Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!Object.is(t[n],e[n]))return!1;return!0}function d({cachedBounds:e,itemCount:t,itemSize:n}){if(0===t)return 0;if("number"==typeof n)return t*n;{const n=e.get(0===e.size?0:e.size-1);l(void 0!==n,"Unexpected bounds cache miss");return t*((n.scrollOffset+n.size)/e.size)}}function u({cachedBounds:e,containerScrollOffset:t,containerSize:n,itemCount:i,overscanCount:s}){const r=i-1;let o=0,c=-1,l=0,a=-1,d=0;for(;d<r;){const n=e.get(d);if(n.scrollOffset+n.size>t)break;d++}for(o=d,l=Math.max(0,o-s);d<r;){const i=e.get(d);if(i.scrollOffset+i.size>=t+n)break;d++}return c=Math.min(r,d),a=Math.min(i-1,c+s),o<0&&(o=0,c=-1,l=0,a=-1),{startIndexVisible:o,stopIndexVisible:c,startIndexOverscan:l,stopIndexOverscan:a}}function f({itemCount:e,itemProps:t,itemSize:i}){return n.useMemo(()=>function({itemCount:e,itemProps:t,itemSize:n}){const i=new Map;return{get(s){for(l(s<e,`Invalid index ${s}`);i.size-1<s;){const e=i.size;let r;switch(typeof n){case"function":r=n(e,t);break;case"number":r=n}if(0===e)i.set(e,{size:r,scrollOffset:0});else{const t=i.get(e-1);l(void 0!==t,`Unexpected bounds cache miss for index ${s}`),i.set(e,{scrollOffset:t.scrollOffset+t.size,size:r})}}const r=i.get(s);return l(void 0!==r,`Unexpected bounds cache miss for index ${s}`),r},set(e,t){i.set(e,t)},get size(){return i.size}}}({itemCount:e,itemProps:t,itemSize:i}),[e,t,i])}function h({containerElement:e,containerStyle:t,defaultContainerSize:s=0,direction:o,isRtl:h=!1,itemCount:m,itemProps:v,itemSize:g,onResize:p,overscanCount:x}){const[b,z]=n.useState({startIndexVisible:0,startIndexOverscan:0,stopIndexVisible:-1,stopIndexOverscan:-1}),{startIndexVisible:O,startIndexOverscan:S,stopIndexVisible:w,stopIndexOverscan:C}={startIndexVisible:Math.min(m-1,b.startIndexVisible),startIndexOverscan:Math.min(m-1,b.startIndexOverscan),stopIndexVisible:Math.min(m-1,b.stopIndexVisible),stopIndexOverscan:Math.min(m-1,b.stopIndexOverscan)},{height:I=s,width:y=s}=function({box:e,defaultHeight:t,defaultWidth:s,disabled:o,element:c,mode:l,style:a}){const{styleHeight:d,styleWidth:u}=n.useMemo(()=>({styleHeight:r(a?.height),styleWidth:r(a?.width)}),[a?.height,a?.width]),[f,h]=n.useState({height:t,width:s}),m=o||"only-height"===l&&void 0!==d||"only-width"===l&&void 0!==u||void 0!==d&&void 0!==u;return i(()=>{if(null===c||m)return;const t=new ResizeObserver(e=>{for(const t of e){const{contentRect:e,target:n}=t;c===n&&h(t=>t.height===e.height&&t.width===e.width?t:{height:e.height,width:e.width})}});return t.observe(c,{box:e}),()=>{t?.unobserve(c)}},[e,m,c,d,u]),n.useMemo(()=>({height:d??f.height,width:u??f.width}),[f,d,u])}({defaultHeight:"vertical"===o?s:void 0,defaultWidth:"horizontal"===o?s:void 0,element:e,mode:"vertical"===o?"only-height":"only-width",style:t}),M=n.useRef({height:0,width:0}),E="vertical"===o?I:y,V=function({containerSize:e,itemSize:t}){let n;"string"==typeof t?(l(t.endsWith("%"),`Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`),l(void 0!==e,"Container size must be defined if a percentage item size is specified"),n=e*parseInt(t)/100):n=t;return n}({containerSize:E,itemSize:g});n.useLayoutEffect(()=>{if("function"==typeof p){const e=M.current;e.height===I&&e.width===y||(p({height:I,width:y},{...e}),e.height=I,e.width=y)}},[I,p,y]);const k=f({itemCount:m,itemProps:v,itemSize:V}),B=n.useCallback(e=>k.get(e),[k]),R=n.useCallback(()=>d({cachedBounds:k,itemCount:m,itemSize:V}),[k,m,V]),L=n.useCallback(t=>{const n=c({containerElement:e,direction:o,isRtl:h,scrollOffset:t});return u({cachedBounds:k,containerScrollOffset:n,containerSize:E,itemCount:m,overscanCount:x})},[k,e,E,o,h,m,x]);i(()=>{z(L(("vertical"===o?e?.scrollTop:e?.scrollLeft)??0))},[e,o,L]),i(()=>{if(!e)return;const t=()=>{z(t=>{const{scrollLeft:n,scrollTop:i}=e,s=c({containerElement:e,direction:o,isRtl:h,scrollOffset:"vertical"===o?i:n}),r=u({cachedBounds:k,containerScrollOffset:s,containerSize:E,itemCount:m,overscanCount:x});return a(r,t)?t:r})};return e.addEventListener("scroll",t),()=>{e.removeEventListener("scroll",t)}},[k,e,E,o,m,x]);const j=function(e){const t=n.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return i(()=>{t.current=e},[e]),n.useCallback(e=>t.current?.(e),[t])}(({align:t="auto",containerScrollOffset:n,index:i})=>{let s=function({align:e,cachedBounds:t,index:n,itemCount:i,itemSize:s,containerScrollOffset:r,containerSize:o}){const c=d({cachedBounds:t,itemCount:i,itemSize:s}),l=t.get(n),a=Math.max(0,Math.min(c-o,l.scrollOffset)),u=Math.max(0,l.scrollOffset-o+l.size);switch("smart"===e&&(e=r>=u&&r<=a?"auto":"center"),e){case"start":return a;case"end":return u;case"center":return l.scrollOffset<=o/2?0:l.scrollOffset+l.size/2>=c-o/2?c-o:l.scrollOffset+l.size/2-o/2;default:return r>=u&&r<=a?r:r<u?u:a}}({align:t,cachedBounds:k,containerScrollOffset:n,containerSize:E,index:i,itemCount:m,itemSize:V});if(e){if(s=c({containerElement:e,direction:o,isRtl:h,scrollOffset:s}),"function"!=typeof e.scrollTo){const e=L(s);a(b,e)||z(e)}return s}});return{getCellBounds:B,getEstimatedSize:R,scrollToIndex:j,startIndexOverscan:S,startIndexVisible:O,stopIndexOverscan:C,stopIndexVisible:w}}function m(e){return n.useMemo(()=>e,Object.values(e))}function v(e,t){const{ariaAttributes:n,style:i,...s}=e,{ariaAttributes:r,style:o,...c}=t;return a(n,r)&&a(i,o)&&a(s,c)}export{s as B,v as a,h as b,m as u};
-//# sourceMappingURL=arePropsEqual-Bd1V-lj7.js.map
+import{j as e,X as t,r as n,Y as i}from"./index-3R9tv3eW.js";function s({children:n,className:i,...s}){return e.jsx(t,{children:e.jsx("div",{className:`border-lg bg-black/30 text-slate-300 rounded-lg p-2 ${i}`,...s,children:n})})}function r(e){if(void 0!==e)switch(typeof e){case"number":return e;case"string":if(e.endsWith("px"))return parseFloat(e)}}let o=null;function c({containerElement:e,direction:t,isRtl:n,scrollOffset:i}){if("horizontal"===t&&n)switch(function(e=!1){if(null===o||e){const e=document.createElement("div"),t=e.style;t.width="50px",t.height="50px",t.overflow="scroll",t.direction="rtl";const n=document.createElement("div"),i=n.style;return i.width="100px",i.height="100px",e.appendChild(n),document.body.appendChild(e),e.scrollLeft>0?o="positive-descending":(e.scrollLeft=1,o=0===e.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(e),o}return o}()){case"negative":return-i;case"positive-descending":if(e){const{clientWidth:t,scrollLeft:n,scrollWidth:i}=e;return i-t-n}}return i}function l(e,t="Assertion error"){if(!e)throw console.error(t),Error(t)}function a(e,t){if(e===t)return!0;if(!!e!=!!t)return!1;if(l(void 0!==e),l(void 0!==t),Object.keys(e).length!==Object.keys(t).length)return!1;for(const n in e)if(!Object.is(t[n],e[n]))return!1;return!0}function d({cachedBounds:e,itemCount:t,itemSize:n}){if(0===t)return 0;if("number"==typeof n)return t*n;{const n=e.get(0===e.size?0:e.size-1);l(void 0!==n,"Unexpected bounds cache miss");return t*((n.scrollOffset+n.size)/e.size)}}function u({cachedBounds:e,containerScrollOffset:t,containerSize:n,itemCount:i,overscanCount:s}){const r=i-1;let o=0,c=-1,l=0,a=-1,d=0;for(;d<r;){const n=e.get(d);if(n.scrollOffset+n.size>t)break;d++}for(o=d,l=Math.max(0,o-s);d<r;){const i=e.get(d);if(i.scrollOffset+i.size>=t+n)break;d++}return c=Math.min(r,d),a=Math.min(i-1,c+s),o<0&&(o=0,c=-1,l=0,a=-1),{startIndexVisible:o,stopIndexVisible:c,startIndexOverscan:l,stopIndexOverscan:a}}function f({itemCount:e,itemProps:t,itemSize:i}){return n.useMemo(()=>function({itemCount:e,itemProps:t,itemSize:n}){const i=new Map;return{get(s){for(l(s<e,`Invalid index ${s}`);i.size-1<s;){const e=i.size;let r;switch(typeof n){case"function":r=n(e,t);break;case"number":r=n}if(0===e)i.set(e,{size:r,scrollOffset:0});else{const t=i.get(e-1);l(void 0!==t,`Unexpected bounds cache miss for index ${s}`),i.set(e,{scrollOffset:t.scrollOffset+t.size,size:r})}}const r=i.get(s);return l(void 0!==r,`Unexpected bounds cache miss for index ${s}`),r},set(e,t){i.set(e,t)},get size(){return i.size}}}({itemCount:e,itemProps:t,itemSize:i}),[e,t,i])}function h({containerElement:e,containerStyle:t,defaultContainerSize:s=0,direction:o,isRtl:h=!1,itemCount:m,itemProps:v,itemSize:g,onResize:p,overscanCount:x}){const[b,z]=n.useState({startIndexVisible:0,startIndexOverscan:0,stopIndexVisible:-1,stopIndexOverscan:-1}),{startIndexVisible:O,startIndexOverscan:S,stopIndexVisible:w,stopIndexOverscan:C}={startIndexVisible:Math.min(m-1,b.startIndexVisible),startIndexOverscan:Math.min(m-1,b.startIndexOverscan),stopIndexVisible:Math.min(m-1,b.stopIndexVisible),stopIndexOverscan:Math.min(m-1,b.stopIndexOverscan)},{height:I=s,width:y=s}=function({box:e,defaultHeight:t,defaultWidth:s,disabled:o,element:c,mode:l,style:a}){const{styleHeight:d,styleWidth:u}=n.useMemo(()=>({styleHeight:r(a?.height),styleWidth:r(a?.width)}),[a?.height,a?.width]),[f,h]=n.useState({height:t,width:s}),m=o||"only-height"===l&&void 0!==d||"only-width"===l&&void 0!==u||void 0!==d&&void 0!==u;return i(()=>{if(null===c||m)return;const t=new ResizeObserver(e=>{for(const t of e){const{contentRect:e,target:n}=t;c===n&&h(t=>t.height===e.height&&t.width===e.width?t:{height:e.height,width:e.width})}});return t.observe(c,{box:e}),()=>{t?.unobserve(c)}},[e,m,c,d,u]),n.useMemo(()=>({height:d??f.height,width:u??f.width}),[f,d,u])}({defaultHeight:"vertical"===o?s:void 0,defaultWidth:"horizontal"===o?s:void 0,element:e,mode:"vertical"===o?"only-height":"only-width",style:t}),M=n.useRef({height:0,width:0}),E="vertical"===o?I:y,V=function({containerSize:e,itemSize:t}){let n;"string"==typeof t?(l(t.endsWith("%"),`Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`),l(void 0!==e,"Container size must be defined if a percentage item size is specified"),n=e*parseInt(t)/100):n=t;return n}({containerSize:E,itemSize:g});n.useLayoutEffect(()=>{if("function"==typeof p){const e=M.current;e.height===I&&e.width===y||(p({height:I,width:y},{...e}),e.height=I,e.width=y)}},[I,p,y]);const k=f({itemCount:m,itemProps:v,itemSize:V}),B=n.useCallback(e=>k.get(e),[k]),R=n.useCallback(()=>d({cachedBounds:k,itemCount:m,itemSize:V}),[k,m,V]),L=n.useCallback(t=>{const n=c({containerElement:e,direction:o,isRtl:h,scrollOffset:t});return u({cachedBounds:k,containerScrollOffset:n,containerSize:E,itemCount:m,overscanCount:x})},[k,e,E,o,h,m,x]);i(()=>{z(L(("vertical"===o?e?.scrollTop:e?.scrollLeft)??0))},[e,o,L]),i(()=>{if(!e)return;const t=()=>{z(t=>{const{scrollLeft:n,scrollTop:i}=e,s=c({containerElement:e,direction:o,isRtl:h,scrollOffset:"vertical"===o?i:n}),r=u({cachedBounds:k,containerScrollOffset:s,containerSize:E,itemCount:m,overscanCount:x});return a(r,t)?t:r})};return e.addEventListener("scroll",t),()=>{e.removeEventListener("scroll",t)}},[k,e,E,o,m,x]);const j=function(e){const t=n.useRef(()=>{throw new Error("Cannot call an event handler while rendering.")});return i(()=>{t.current=e},[e]),n.useCallback(e=>t.current?.(e),[t])}(({align:t="auto",containerScrollOffset:n,index:i})=>{let s=function({align:e,cachedBounds:t,index:n,itemCount:i,itemSize:s,containerScrollOffset:r,containerSize:o}){const c=d({cachedBounds:t,itemCount:i,itemSize:s}),l=t.get(n),a=Math.max(0,Math.min(c-o,l.scrollOffset)),u=Math.max(0,l.scrollOffset-o+l.size);switch("smart"===e&&(e=r>=u&&r<=a?"auto":"center"),e){case"start":return a;case"end":return u;case"center":return l.scrollOffset<=o/2?0:l.scrollOffset+l.size/2>=c-o/2?c-o:l.scrollOffset+l.size/2-o/2;default:return r>=u&&r<=a?r:r<u?u:a}}({align:t,cachedBounds:k,containerScrollOffset:n,containerSize:E,index:i,itemCount:m,itemSize:V});if(e){if(s=c({containerElement:e,direction:o,isRtl:h,scrollOffset:s}),"function"!=typeof e.scrollTo){const e=L(s);a(b,e)||z(e)}return s}});return{getCellBounds:B,getEstimatedSize:R,scrollToIndex:j,startIndexOverscan:S,startIndexVisible:O,stopIndexOverscan:C,stopIndexVisible:w}}function m(e){return n.useMemo(()=>e,Object.values(e))}function v(e,t){const{ariaAttributes:n,style:i,...s}=e,{ariaAttributes:r,style:o,...c}=t;return a(n,r)&&a(i,o)&&a(s,c)}export{s as B,v as a,h as b,m as u};
+//# sourceMappingURL=arePropsEqual-MBk0PiJi.js.map

package/docs/assets/{arePropsEqual-Bd1V-lj7.js.map → arePropsEqual-MBk0PiJi.js.map}

@@ -1 +1 @@
-{"version":3,"file":"arePropsEqual-Bd1V-lj7.js","sources":["../../src/components/Block.tsx","../../lib/utils/parseNumericStyleValue.ts","../../lib/utils/getRTLOffsetType.ts","../../lib/utils/adjustScrollOffsetForRtl.ts","../../lib/utils/assert.ts","../../lib/utils/shallowCompare.ts","../../lib/core/getEstimatedSize.ts","../../lib/core/getStartStopIndices.ts","../../lib/core/useCachedBounds.ts","../../lib/core/createCachedBounds.ts","../../lib/core/useVirtualizer.ts","../../lib/hooks/useResizeObserver.ts","../../lib/core/useItemSize.ts","../../lib/hooks/useStableCallback.ts","../../lib/core/getOffsetForIndex.ts","../../lib/hooks/useMemoizedObject.ts","../../lib/utils/arePropsEqual.ts"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from \"react\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\n\nexport function Block({\n  children,\n  className,\n  ...rest\n}: PropsWithChildren<HTMLAttributes<HTMLDivElement> & { className?: string }>) {\n  return (\n    <ErrorBoundary>\n      <div\n        className={`border-lg bg-black/30 text-slate-300 rounded-lg p-2 ${className}`}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ErrorBoundary>\n  );\n}\n","import type { CSSProperties } from \"react\";\n\nexport function parseNumericStyleValue(\n  value: CSSProperties[\"height\"]\n): number | undefined {\n  if (value !== undefined) {\n    switch (typeof value) {\n      case \"number\": {\n        return value;\n      }\n      case \"string\": {\n        if (value.endsWith(\"px\")) {\n          return parseFloat(value);\n        }\n        break;\n      }\n    }\n  }\n}\n","export type RTLOffsetType =\n  | \"negative\"\n  | \"positive-descending\"\n  | \"positive-ascending\";\n\nlet cachedRTLResult: RTLOffsetType | null = null;\n\n// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n// The safest way to check this is to intentionally set a negative offset,\n// and then verify that the subsequent \"scroll\" event matches the negative offset.\n// If it does not match, then we can assume a non-standard RTL scroll implementation.\nexport function getRTLOffsetType(recalculate: boolean = false): RTLOffsetType {\n  if (cachedRTLResult === null || recalculate) {\n    const outerDiv = document.createElement(\"div\");\n    const outerStyle = outerDiv.style;\n    outerStyle.width = \"50px\";\n    outerStyle.height = \"50px\";\n    outerStyle.overflow = \"scroll\";\n    outerStyle.direction = \"rtl\";\n\n    const innerDiv = document.createElement(\"div\");\n    const innerStyle = innerDiv.style;\n    innerStyle.width = \"100px\";\n    innerStyle.height = \"100px\";\n\n    outerDiv.appendChild(innerDiv);\n\n    document.body.appendChild(outerDiv);\n\n    if (outerDiv.scrollLeft > 0) {\n      cachedRTLResult = \"positive-descending\";\n    } else {\n      outerDiv.scrollLeft = 1;\n      if (outerDiv.scrollLeft === 0) {\n        cachedRTLResult = \"negative\";\n      } else {\n        cachedRTLResult = \"positive-ascending\";\n      }\n    }\n\n    document.body.removeChild(outerDiv);\n\n    return cachedRTLResult;\n  }\n\n  return cachedRTLResult;\n}\n","import type { Direction } from \"../core/types\";\nimport { getRTLOffsetType } from \"./getRTLOffsetType\";\n\nexport function adjustScrollOffsetForRtl({\n  containerElement,\n  direction,\n  isRtl,\n  scrollOffset\n}: {\n  containerElement: HTMLElement | null;\n  direction: Direction;\n  isRtl: boolean;\n  scrollOffset: number;\n}) {\n  // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n  // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n  // So we need to determine which browser behavior we're dealing with, and mimic it.\n  if (direction === \"horizontal\") {\n    if (isRtl) {\n      switch (getRTLOffsetType()) {\n        case \"negative\": {\n          return -scrollOffset;\n        }\n        case \"positive-descending\": {\n          if (containerElement) {\n            const { clientWidth, scrollLeft, scrollWidth } = containerElement;\n            return scrollWidth - clientWidth - scrollLeft;\n          }\n          break;\n        }\n      }\n    }\n  }\n  return scrollOffset;\n}\n","export function assert(\n  expectedCondition: unknown,\n  message: string = \"Assertion error\"\n): asserts expectedCondition {\n  if (!expectedCondition) {\n    console.error(message);\n\n    throw Error(message);\n  }\n}\n","import { assert } from \"./assert\";\n\nexport function shallowCompare<Type extends object>(\n  a: Type | undefined,\n  b: Type | undefined\n) {\n  if (a === b) {\n    return true;\n  }\n\n  if (!!a !== !!b) {\n    return false;\n  }\n\n  assert(a !== undefined);\n  assert(b !== undefined);\n\n  if (Object.keys(a).length !== Object.keys(b).length) {\n    return false;\n  }\n\n  for (const key in a) {\n    if (!Object.is(b[key], a[key])) {\n      return false;\n    }\n  }\n\n  return true;\n}\n","import type { CachedBounds, SizeFunction } from \"./types\";\nimport { assert } from \"../utils/assert\";\n\nexport function getEstimatedSize<Props extends object>({\n  cachedBounds,\n  itemCount,\n  itemSize\n}: {\n  cachedBounds: CachedBounds;\n  itemCount: number;\n  itemSize: number | SizeFunction<Props>;\n}) {\n  if (itemCount === 0) {\n    return 0;\n  } else if (typeof itemSize === \"number\") {\n    return itemCount * itemSize;\n  } else {\n    const bounds = cachedBounds.get(\n      cachedBounds.size === 0 ? 0 : cachedBounds.size - 1\n    );\n    assert(bounds !== undefined, \"Unexpected bounds cache miss\");\n\n    const averageItemSize =\n      (bounds.scrollOffset + bounds.size) / cachedBounds.size;\n\n    return itemCount * averageItemSize;\n  }\n}\n","import type { CachedBounds } from \"./types\";\n\nexport function getStartStopIndices({\n  cachedBounds,\n  containerScrollOffset,\n  containerSize,\n  itemCount,\n  overscanCount\n}: {\n  cachedBounds: CachedBounds;\n  containerScrollOffset: number;\n  containerSize: number;\n  itemCount: number;\n  overscanCount: number;\n}): {\n  startIndexVisible: number;\n  stopIndexVisible: number;\n  startIndexOverscan: number;\n  stopIndexOverscan: number;\n} {\n  const maxIndex = itemCount - 1;\n\n  let startIndexVisible = 0;\n  let stopIndexVisible = -1;\n  let startIndexOverscan = 0;\n  let stopIndexOverscan = -1;\n  let currentIndex = 0;\n\n  while (currentIndex < maxIndex) {\n    const bounds = cachedBounds.get(currentIndex);\n\n    if (bounds.scrollOffset + bounds.size > containerScrollOffset) {\n      break;\n    }\n\n    currentIndex++;\n  }\n\n  startIndexVisible = currentIndex;\n  startIndexOverscan = Math.max(0, startIndexVisible - overscanCount);\n\n  while (currentIndex < maxIndex) {\n    const bounds = cachedBounds.get(currentIndex);\n\n    if (\n      bounds.scrollOffset + bounds.size >=\n      containerScrollOffset + containerSize\n    ) {\n      break;\n    }\n\n    currentIndex++;\n  }\n\n  stopIndexVisible = Math.min(maxIndex, currentIndex);\n  stopIndexOverscan = Math.min(itemCount - 1, stopIndexVisible + overscanCount);\n\n  if (startIndexVisible < 0) {\n    startIndexVisible = 0;\n    stopIndexVisible = -1;\n    startIndexOverscan = 0;\n    stopIndexOverscan = -1;\n  }\n\n  return {\n    startIndexVisible,\n    stopIndexVisible,\n    startIndexOverscan,\n    stopIndexOverscan\n  };\n}\n","import { useMemo } from \"react\";\nimport { createCachedBounds } from \"./createCachedBounds\";\nimport type { CachedBounds, SizeFunction } from \"./types\";\n\nexport function useCachedBounds<Props extends object>({\n  itemCount,\n  itemProps,\n  itemSize\n}: {\n  itemCount: number;\n  itemProps: Props;\n  itemSize: number | SizeFunction<Props>;\n}): CachedBounds {\n  return useMemo(\n    () =>\n      createCachedBounds({\n        itemCount,\n        itemProps,\n        itemSize\n      }),\n    [itemCount, itemProps, itemSize]\n  );\n}\n","import { assert } from \"../utils/assert\";\nimport type { Bounds, CachedBounds, SizeFunction } from \"./types\";\n\nexport function createCachedBounds<Props extends object>({\n  itemCount,\n  itemProps,\n  itemSize\n}: {\n  itemCount: number;\n  itemProps: Props;\n  itemSize: number | SizeFunction<Props>;\n}): CachedBounds {\n  const cache = new Map<number, Bounds>();\n\n  return {\n    get(index: number) {\n      assert(index < itemCount, `Invalid index ${index}`);\n\n      while (cache.size - 1 < index) {\n        const currentIndex = cache.size;\n\n        let size: number;\n        switch (typeof itemSize) {\n          case \"function\": {\n            size = itemSize(currentIndex, itemProps);\n            break;\n          }\n          case \"number\": {\n            size = itemSize;\n            break;\n          }\n        }\n\n        if (currentIndex === 0) {\n          cache.set(currentIndex, {\n            size,\n            scrollOffset: 0\n          });\n        } else {\n          const previousRowBounds = cache.get(currentIndex - 1);\n          assert(\n            previousRowBounds !== undefined,\n            `Unexpected bounds cache miss for index ${index}`\n          );\n\n          cache.set(currentIndex, {\n            scrollOffset:\n              previousRowBounds.scrollOffset + previousRowBounds.size,\n            size\n          });\n        }\n      }\n\n      const bounds = cache.get(index);\n      assert(\n        bounds !== undefined,\n        `Unexpected bounds cache miss for index ${index}`\n      );\n\n      return bounds;\n    },\n    set(index: number, bounds: Bounds) {\n      cache.set(index, bounds);\n    },\n    get size() {\n      return cache.size;\n    }\n  };\n}\n","import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../hooks/useIsomorphicLayoutEffect\";\nimport { useResizeObserver } from \"../hooks/useResizeObserver\";\nimport { useStableCallback } from \"../hooks/useStableCallback\";\nimport type { Align } from \"../types\";\nimport { adjustScrollOffsetForRtl } from \"../utils/adjustScrollOffsetForRtl\";\nimport { shallowCompare } from \"../utils/shallowCompare\";\nimport { getEstimatedSize as getEstimatedSizeUtil } from \"./getEstimatedSize\";\nimport { getOffsetForIndex } from \"./getOffsetForIndex\";\nimport { getStartStopIndices as getStartStopIndicesUtil } from \"./getStartStopIndices\";\nimport type { Direction, SizeFunction } from \"./types\";\nimport { useCachedBounds } from \"./useCachedBounds\";\nimport { useItemSize } from \"./useItemSize\";\n\nexport function useVirtualizer<Props extends object>({\n  containerElement,\n  containerStyle,\n  defaultContainerSize = 0,\n  direction,\n  isRtl = false,\n  itemCount,\n  itemProps,\n  itemSize: itemSizeProp,\n  onResize,\n  overscanCount\n}: {\n  containerElement: HTMLElement | null;\n  containerStyle?: CSSProperties;\n  defaultContainerSize?: number;\n  direction: Direction;\n  isRtl?: boolean;\n  itemCount: number;\n  itemProps: Props;\n  itemSize: number | string | SizeFunction<Props>;\n  onResize:\n    | ((\n        size: { height: number; width: number },\n        prevSize: { height: number; width: number }\n      ) => void)\n    | undefined;\n  overscanCount: number;\n}) {\n  const [indices, setIndices] = useState<{\n    startIndexVisible: number;\n    stopIndexVisible: number;\n    startIndexOverscan: number;\n    stopIndexOverscan: number;\n  }>({\n    startIndexVisible: 0,\n    startIndexOverscan: 0,\n    stopIndexVisible: -1,\n    stopIndexOverscan: -1\n  });\n\n  // Guard against temporarily invalid indices that may occur when item count decreases\n  // Cached bounds object will be re-created and a second render will restore things\n  const {\n    startIndexVisible,\n    startIndexOverscan,\n    stopIndexVisible,\n    stopIndexOverscan\n  } = {\n    startIndexVisible: Math.min(itemCount - 1, indices.startIndexVisible),\n    startIndexOverscan: Math.min(itemCount - 1, indices.startIndexOverscan),\n    stopIndexVisible: Math.min(itemCount - 1, indices.stopIndexVisible),\n    stopIndexOverscan: Math.min(itemCount - 1, indices.stopIndexOverscan)\n  };\n\n  const { height = defaultContainerSize, width = defaultContainerSize } =\n    useResizeObserver({\n      defaultHeight:\n        direction === \"vertical\" ? defaultContainerSize : undefined,\n      defaultWidth:\n        direction === \"horizontal\" ? defaultContainerSize : undefined,\n      element: containerElement,\n      mode: direction === \"vertical\" ? \"only-height\" : \"only-width\",\n      style: containerStyle\n    });\n\n  const prevSizeRef = useRef<{ height: number; width: number }>({\n    height: 0,\n    width: 0\n  });\n\n  const containerSize = direction === \"vertical\" ? height : width;\n\n  const itemSize = useItemSize({ containerSize, itemSize: itemSizeProp });\n\n  useLayoutEffect(() => {\n    if (typeof onResize === \"function\") {\n      const prevSize = prevSizeRef.current;\n\n      if (prevSize.height !== height || prevSize.width !== width) {\n        onResize({ height, width }, { ...prevSize });\n\n        prevSize.height = height;\n        prevSize.width = width;\n      }\n    }\n  }, [height, onResize, width]);\n\n  const cachedBounds = useCachedBounds({\n    itemCount,\n    itemProps,\n    itemSize\n  });\n\n  const getCellBounds = useCallback(\n    (index: number) => cachedBounds.get(index),\n    [cachedBounds]\n  );\n\n  const getEstimatedSize = useCallback(\n    () =>\n      getEstimatedSizeUtil({\n        cachedBounds,\n        itemCount,\n        itemSize\n      }),\n    [cachedBounds, itemCount, itemSize]\n  );\n\n  const getStartStopIndices = useCallback(\n    (scrollOffset: number) => {\n      const containerScrollOffset = adjustScrollOffsetForRtl({\n        containerElement,\n        direction,\n        isRtl,\n        scrollOffset\n      });\n\n      return getStartStopIndicesUtil({\n        cachedBounds,\n        containerScrollOffset,\n        containerSize,\n        itemCount,\n        overscanCount\n      });\n    },\n    [\n      cachedBounds,\n      containerElement,\n      containerSize,\n      direction,\n      isRtl,\n      itemCount,\n      overscanCount\n    ]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const scrollOffset =\n      (direction === \"vertical\"\n        ? containerElement?.scrollTop\n        : containerElement?.scrollLeft) ?? 0;\n\n    setIndices(getStartStopIndices(scrollOffset));\n  }, [containerElement, direction, getStartStopIndices]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerElement) {\n      return;\n    }\n\n    const onScroll = () => {\n      setIndices((prev) => {\n        const { scrollLeft, scrollTop } = containerElement;\n\n        const scrollOffset = adjustScrollOffsetForRtl({\n          containerElement,\n          direction,\n          isRtl,\n          scrollOffset: direction === \"vertical\" ? scrollTop : scrollLeft\n        });\n\n        const next = getStartStopIndicesUtil({\n          cachedBounds,\n          containerScrollOffset: scrollOffset,\n          containerSize,\n          itemCount,\n          overscanCount\n        });\n\n        if (shallowCompare(next, prev)) {\n          return prev;\n        }\n\n        return next;\n      });\n    };\n\n    containerElement.addEventListener(\"scroll\", onScroll);\n\n    return () => {\n      containerElement.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [\n    cachedBounds,\n    containerElement,\n    containerSize,\n    direction,\n    itemCount,\n    overscanCount\n  ]);\n\n  const scrollToIndex = useStableCallback(\n    ({\n      align = \"auto\",\n      containerScrollOffset,\n      index\n    }: {\n      align?: Align;\n      containerScrollOffset: number;\n      index: number;\n    }) => {\n      let scrollOffset = getOffsetForIndex({\n        align,\n        cachedBounds,\n        containerScrollOffset,\n        containerSize,\n        index,\n        itemCount,\n        itemSize\n      });\n\n      if (containerElement) {\n        scrollOffset = adjustScrollOffsetForRtl({\n          containerElement,\n          direction,\n          isRtl,\n          scrollOffset\n        });\n\n        if (typeof containerElement.scrollTo !== \"function\") {\n          // Special case for environments like jsdom that don't implement scrollTo\n          const next = getStartStopIndices(scrollOffset);\n          if (!shallowCompare(indices, next)) {\n            setIndices(next);\n          }\n        }\n\n        return scrollOffset;\n      }\n    }\n  );\n\n  return {\n    getCellBounds,\n    getEstimatedSize,\n    scrollToIndex,\n    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\n  };\n}\n","import { useMemo, useState, type CSSProperties } from \"react\";\nimport { parseNumericStyleValue } from \"../utils/parseNumericStyleValue\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\nexport function useResizeObserver({\n  box,\n  defaultHeight,\n  defaultWidth,\n  disabled: disabledProp,\n  element,\n  mode,\n  style\n}: {\n  box?: ResizeObserverBoxOptions;\n  defaultHeight?: number;\n  defaultWidth?: number;\n  disabled?: boolean;\n  element: HTMLElement | null;\n  mode?: \"only-height\" | \"only-width\";\n  style?: CSSProperties;\n}) {\n  const { styleHeight, styleWidth } = useMemo(\n    () => ({\n      styleHeight: parseNumericStyleValue(style?.height),\n      styleWidth: parseNumericStyleValue(style?.width)\n    }),\n    [style?.height, style?.width]\n  );\n\n  const [state, setState] = useState<{\n    height: number | undefined;\n    width: number | undefined;\n  }>({\n    height: defaultHeight,\n    width: defaultWidth\n  });\n\n  const disabled =\n    disabledProp ||\n    (mode === \"only-height\" && styleHeight !== undefined) ||\n    (mode === \"only-width\" && styleWidth !== undefined) ||\n    (styleHeight !== undefined && styleWidth !== undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (element === null || disabled) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { contentRect, target } = entry;\n        if (element === target) {\n          setState((prevState) => {\n            if (\n              prevState.height === contentRect.height &&\n              prevState.width === contentRect.width\n            ) {\n              return prevState;\n            }\n\n            return {\n              height: contentRect.height,\n              width: contentRect.width\n            };\n          });\n        }\n      }\n    });\n    resizeObserver.observe(element, { box });\n\n    return () => {\n      resizeObserver?.unobserve(element);\n    };\n  }, [box, disabled, element, styleHeight, styleWidth]);\n\n  return useMemo(\n    () => ({\n      height: styleHeight ?? state.height,\n      width: styleWidth ?? state.width\n    }),\n    [state, styleHeight, styleWidth]\n  );\n}\n","import { assert } from \"../utils/assert\";\nimport type { SizeFunction } from \"./types\";\n\nexport function useItemSize<Props extends object>({\n  containerSize,\n  itemSize: itemSizeProp\n}: {\n  containerSize: number;\n  itemSize: number | string | SizeFunction<Props>;\n}) {\n  let itemSize: number | SizeFunction<Props>;\n  switch (typeof itemSizeProp) {\n    case \"string\": {\n      assert(\n        itemSizeProp.endsWith(\"%\"),\n        `Invalid item size: \"${itemSizeProp}\"; string values must be percentages (e.g. \"100%\")`\n      );\n      assert(\n        containerSize !== undefined,\n        \"Container size must be defined if a percentage item size is specified\"\n      );\n\n      itemSize = (containerSize * parseInt(itemSizeProp)) / 100;\n      break;\n    }\n    default: {\n      itemSize = itemSizeProp;\n      break;\n    }\n  }\n\n  return itemSize;\n}\n","import { useCallback, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\n// Forked from useEventCallback (usehooks-ts)\nexport function useStableCallback<Args, Return>(\n  fn: (args: Args) => Return\n): (args: Args) => Return {\n  const ref = useRef<typeof fn>(() => {\n    throw new Error(\"Cannot call an event handler while rendering.\");\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  }, [fn]);\n\n  return useCallback((args: Args) => ref.current?.(args), [ref]) as (\n    args: Args\n  ) => Return;\n}\n","import type { Align } from \"../types\";\nimport { getEstimatedSize } from \"./getEstimatedSize\";\nimport type { CachedBounds, SizeFunction } from \"./types\";\n\nexport function getOffsetForIndex<Props extends object>({\n  align,\n  cachedBounds,\n  index,\n  itemCount,\n  itemSize,\n  containerScrollOffset,\n  containerSize\n}: {\n  align: Align;\n  cachedBounds: CachedBounds;\n  index: number;\n  itemCount: number;\n  itemSize: number | SizeFunction<Props>;\n  containerScrollOffset: number;\n  containerSize: number;\n}) {\n  const estimatedTotalSize = getEstimatedSize({\n    cachedBounds,\n    itemCount,\n    itemSize\n  });\n\n  const bounds = cachedBounds.get(index);\n  const maxOffset = Math.max(\n    0,\n    Math.min(estimatedTotalSize - containerSize, bounds.scrollOffset)\n  );\n  const minOffset = Math.max(\n    0,\n    bounds.scrollOffset - containerSize + bounds.size\n  );\n\n  if (align === \"smart\") {\n    if (\n      containerScrollOffset >= minOffset &&\n      containerScrollOffset <= maxOffset\n    ) {\n      align = \"auto\";\n    } else {\n      align = \"center\";\n    }\n  }\n\n  switch (align) {\n    case \"start\": {\n      return maxOffset;\n    }\n    case \"end\": {\n      return minOffset;\n    }\n    case \"center\": {\n      if (bounds.scrollOffset <= containerSize / 2) {\n        // Too near the beginning to center-align\n        return 0;\n      } else if (\n        bounds.scrollOffset + bounds.size / 2 >=\n        estimatedTotalSize - containerSize / 2\n      ) {\n        // Too near the end to center-align\n        return estimatedTotalSize - containerSize;\n      } else {\n        return bounds.scrollOffset + bounds.size / 2 - containerSize / 2;\n      }\n    }\n    case \"auto\":\n    default: {\n      if (\n        containerScrollOffset >= minOffset &&\n        containerScrollOffset <= maxOffset\n      ) {\n        return containerScrollOffset;\n      } else if (containerScrollOffset < minOffset) {\n        return minOffset;\n      } else {\n        return maxOffset;\n      }\n    }\n  }\n}\n","import { useMemo } from \"react\";\n\nexport function useMemoizedObject<Type extends object>(\n  unstableObject: Type\n): Type {\n  return useMemo(() => {\n    return unstableObject;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, Object.values(unstableObject));\n}\n","import type { CSSProperties } from \"react\";\nimport { shallowCompare } from \"./shallowCompare\";\n\n// Custom comparison function for React.memo()\n// It knows to compare individual style props and ignore the wrapper object.\n// See https://react.dev/reference/react/memo#memo\nexport function arePropsEqual(\n  prevProps: { ariaAttributes: object; style: CSSProperties },\n  nextProps: { ariaAttributes: object; style: CSSProperties }\n): boolean {\n  const {\n    ariaAttributes: prevAriaAttributes,\n    style: prevStyle,\n    ...prevRest\n  } = prevProps;\n  const {\n    ariaAttributes: nextAriaAttributes,\n    style: nextStyle,\n    ...nextRest\n  } = nextProps;\n\n  return (\n    shallowCompare(prevAriaAttributes, nextAriaAttributes) &&\n    shallowCompare(prevStyle, nextStyle) &&\n    shallowCompare(prevRest, nextRest)\n  );\n}\n"],"names":["Block","children","className","rest","ErrorBoundary","jsx","parseNumericStyleValue","value","endsWith","parseFloat","cachedRTLResult","adjustScrollOffsetForRtl","containerElement","direction","isRtl","scrollOffset","recalculate","outerDiv","document","createElement","outerStyle","style","width","height","overflow","innerDiv","innerStyle","appendChild","body","scrollLeft","removeChild","getRTLOffsetType","clientWidth","scrollWidth","assert","expectedCondition","message","console","error","Error","shallowCompare","a","b","Object","keys","length","key","is","getEstimatedSize","cachedBounds","itemCount","itemSize","bounds","get","size","getStartStopIndices","containerScrollOffset","containerSize","overscanCount","maxIndex","startIndexVisible","stopIndexVisible","startIndexOverscan","stopIndexOverscan","currentIndex","Math","max","min","useCachedBounds","itemProps","useMemo","cache","Map","index","set","previousRowBounds","createCachedBounds","useVirtualizer","containerStyle","defaultContainerSize","itemSizeProp","onResize","indices","setIndices","useState","box","defaultHeight","defaultWidth","disabled","disabledProp","element","mode","styleHeight","styleWidth","state","setState","useIsomorphicLayoutEffect","resizeObserver","ResizeObserver","entries","entry","contentRect","target","prevState","observe","unobserve","useResizeObserver","prevSizeRef","useRef","parseInt","useItemSize","useLayoutEffect","prevSize","current","getCellBounds","useCallback","getEstimatedSizeUtil","getStartStopIndicesUtil","scrollTop","onScroll","prev","next","addEventListener","removeEventListener","scrollToIndex","fn","ref","args","useStableCallback","align","estimatedTotalSize","maxOffset","minOffset","getOffsetForIndex","scrollTo","useMemoizedObject","unstableObject","values","arePropsEqual","prevProps","nextProps","ariaAttributes","prevAriaAttributes","prevStyle","prevRest","nextAriaAttributes","nextStyle","nextRest"],"mappings":"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"}
+{"version":3,"file":"arePropsEqual-MBk0PiJi.js","sources":["../../src/components/Block.tsx","../../lib/utils/parseNumericStyleValue.ts","../../lib/utils/getRTLOffsetType.ts","../../lib/utils/adjustScrollOffsetForRtl.ts","../../lib/utils/assert.ts","../../lib/utils/shallowCompare.ts","../../lib/core/getEstimatedSize.ts","../../lib/core/getStartStopIndices.ts","../../lib/core/useCachedBounds.ts","../../lib/core/createCachedBounds.ts","../../lib/core/useVirtualizer.ts","../../lib/hooks/useResizeObserver.ts","../../lib/core/useItemSize.ts","../../lib/hooks/useStableCallback.ts","../../lib/core/getOffsetForIndex.ts","../../lib/hooks/useMemoizedObject.ts","../../lib/utils/arePropsEqual.ts"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from \"react\";\nimport { ErrorBoundary } from \"./ErrorBoundary\";\n\nexport function Block({\n  children,\n  className,\n  ...rest\n}: PropsWithChildren<HTMLAttributes<HTMLDivElement> & { className?: string }>) {\n  return (\n    <ErrorBoundary>\n      <div\n        className={`border-lg bg-black/30 text-slate-300 rounded-lg p-2 ${className}`}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ErrorBoundary>\n  );\n}\n","import type { CSSProperties } from \"react\";\n\nexport function parseNumericStyleValue(\n  value: CSSProperties[\"height\"]\n): number | undefined {\n  if (value !== undefined) {\n    switch (typeof value) {\n      case \"number\": {\n        return value;\n      }\n      case \"string\": {\n        if (value.endsWith(\"px\")) {\n          return parseFloat(value);\n        }\n        break;\n      }\n    }\n  }\n}\n","export type RTLOffsetType =\n  | \"negative\"\n  | \"positive-descending\"\n  | \"positive-ascending\";\n\nlet cachedRTLResult: RTLOffsetType | null = null;\n\n// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).\n// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.\n// The safest way to check this is to intentionally set a negative offset,\n// and then verify that the subsequent \"scroll\" event matches the negative offset.\n// If it does not match, then we can assume a non-standard RTL scroll implementation.\nexport function getRTLOffsetType(recalculate: boolean = false): RTLOffsetType {\n  if (cachedRTLResult === null || recalculate) {\n    const outerDiv = document.createElement(\"div\");\n    const outerStyle = outerDiv.style;\n    outerStyle.width = \"50px\";\n    outerStyle.height = \"50px\";\n    outerStyle.overflow = \"scroll\";\n    outerStyle.direction = \"rtl\";\n\n    const innerDiv = document.createElement(\"div\");\n    const innerStyle = innerDiv.style;\n    innerStyle.width = \"100px\";\n    innerStyle.height = \"100px\";\n\n    outerDiv.appendChild(innerDiv);\n\n    document.body.appendChild(outerDiv);\n\n    if (outerDiv.scrollLeft > 0) {\n      cachedRTLResult = \"positive-descending\";\n    } else {\n      outerDiv.scrollLeft = 1;\n      if (outerDiv.scrollLeft === 0) {\n        cachedRTLResult = \"negative\";\n      } else {\n        cachedRTLResult = \"positive-ascending\";\n      }\n    }\n\n    document.body.removeChild(outerDiv);\n\n    return cachedRTLResult;\n  }\n\n  return cachedRTLResult;\n}\n","import type { Direction } from \"../core/types\";\nimport { getRTLOffsetType } from \"./getRTLOffsetType\";\n\nexport function adjustScrollOffsetForRtl({\n  containerElement,\n  direction,\n  isRtl,\n  scrollOffset\n}: {\n  containerElement: HTMLElement | null;\n  direction: Direction;\n  isRtl: boolean;\n  scrollOffset: number;\n}) {\n  // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.\n  // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).\n  // So we need to determine which browser behavior we're dealing with, and mimic it.\n  if (direction === \"horizontal\") {\n    if (isRtl) {\n      switch (getRTLOffsetType()) {\n        case \"negative\": {\n          return -scrollOffset;\n        }\n        case \"positive-descending\": {\n          if (containerElement) {\n            const { clientWidth, scrollLeft, scrollWidth } = containerElement;\n            return scrollWidth - clientWidth - scrollLeft;\n          }\n          break;\n        }\n      }\n    }\n  }\n  return scrollOffset;\n}\n","export function assert(\n  expectedCondition: unknown,\n  message: string = \"Assertion error\"\n): asserts expectedCondition {\n  if (!expectedCondition) {\n    console.error(message);\n\n    throw Error(message);\n  }\n}\n","import { assert } from \"./assert\";\n\nexport function shallowCompare<Type extends object>(\n  a: Type | undefined,\n  b: Type | undefined\n) {\n  if (a === b) {\n    return true;\n  }\n\n  if (!!a !== !!b) {\n    return false;\n  }\n\n  assert(a !== undefined);\n  assert(b !== undefined);\n\n  if (Object.keys(a).length !== Object.keys(b).length) {\n    return false;\n  }\n\n  for (const key in a) {\n    if (!Object.is(b[key], a[key])) {\n      return false;\n    }\n  }\n\n  return true;\n}\n","import type { CachedBounds, SizeFunction } from \"./types\";\nimport { assert } from \"../utils/assert\";\n\nexport function getEstimatedSize<Props extends object>({\n  cachedBounds,\n  itemCount,\n  itemSize\n}: {\n  cachedBounds: CachedBounds;\n  itemCount: number;\n  itemSize: number | SizeFunction<Props>;\n}) {\n  if (itemCount === 0) {\n    return 0;\n  } else if (typeof itemSize === \"number\") {\n    return itemCount * itemSize;\n  } else {\n    const bounds = cachedBounds.get(\n      cachedBounds.size === 0 ? 0 : cachedBounds.size - 1\n    );\n    assert(bounds !== undefined, \"Unexpected bounds cache miss\");\n\n    const averageItemSize =\n      (bounds.scrollOffset + bounds.size) / cachedBounds.size;\n\n    return itemCount * averageItemSize;\n  }\n}\n","import type { CachedBounds } from \"./types\";\n\nexport function getStartStopIndices({\n  cachedBounds,\n  containerScrollOffset,\n  containerSize,\n  itemCount,\n  overscanCount\n}: {\n  cachedBounds: CachedBounds;\n  containerScrollOffset: number;\n  containerSize: number;\n  itemCount: number;\n  overscanCount: number;\n}): {\n  startIndexVisible: number;\n  stopIndexVisible: number;\n  startIndexOverscan: number;\n  stopIndexOverscan: number;\n} {\n  const maxIndex = itemCount - 1;\n\n  let startIndexVisible = 0;\n  let stopIndexVisible = -1;\n  let startIndexOverscan = 0;\n  let stopIndexOverscan = -1;\n  let currentIndex = 0;\n\n  while (currentIndex < maxIndex) {\n    const bounds = cachedBounds.get(currentIndex);\n\n    if (bounds.scrollOffset + bounds.size > containerScrollOffset) {\n      break;\n    }\n\n    currentIndex++;\n  }\n\n  startIndexVisible = currentIndex;\n  startIndexOverscan = Math.max(0, startIndexVisible - overscanCount);\n\n  while (currentIndex < maxIndex) {\n    const bounds = cachedBounds.get(currentIndex);\n\n    if (\n      bounds.scrollOffset + bounds.size >=\n      containerScrollOffset + containerSize\n    ) {\n      break;\n    }\n\n    currentIndex++;\n  }\n\n  stopIndexVisible = Math.min(maxIndex, currentIndex);\n  stopIndexOverscan = Math.min(itemCount - 1, stopIndexVisible + overscanCount);\n\n  if (startIndexVisible < 0) {\n    startIndexVisible = 0;\n    stopIndexVisible = -1;\n    startIndexOverscan = 0;\n    stopIndexOverscan = -1;\n  }\n\n  return {\n    startIndexVisible,\n    stopIndexVisible,\n    startIndexOverscan,\n    stopIndexOverscan\n  };\n}\n","import { useMemo } from \"react\";\nimport { createCachedBounds } from \"./createCachedBounds\";\nimport type { CachedBounds, SizeFunction } from \"./types\";\n\nexport function useCachedBounds<Props extends object>({\n  itemCount,\n  itemProps,\n  itemSize\n}: {\n  itemCount: number;\n  itemProps: Props;\n  itemSize: number | SizeFunction<Props>;\n}): CachedBounds {\n  return useMemo(\n    () =>\n      createCachedBounds({\n        itemCount,\n        itemProps,\n        itemSize\n      }),\n    [itemCount, itemProps, itemSize]\n  );\n}\n","import { assert } from \"../utils/assert\";\nimport type { Bounds, CachedBounds, SizeFunction } from \"./types\";\n\nexport function createCachedBounds<Props extends object>({\n  itemCount,\n  itemProps,\n  itemSize\n}: {\n  itemCount: number;\n  itemProps: Props;\n  itemSize: number | SizeFunction<Props>;\n}): CachedBounds {\n  const cache = new Map<number, Bounds>();\n\n  return {\n    get(index: number) {\n      assert(index < itemCount, `Invalid index ${index}`);\n\n      while (cache.size - 1 < index) {\n        const currentIndex = cache.size;\n\n        let size: number;\n        switch (typeof itemSize) {\n          case \"function\": {\n            size = itemSize(currentIndex, itemProps);\n            break;\n          }\n          case \"number\": {\n            size = itemSize;\n            break;\n          }\n        }\n\n        if (currentIndex === 0) {\n          cache.set(currentIndex, {\n            size,\n            scrollOffset: 0\n          });\n        } else {\n          const previousRowBounds = cache.get(currentIndex - 1);\n          assert(\n            previousRowBounds !== undefined,\n            `Unexpected bounds cache miss for index ${index}`\n          );\n\n          cache.set(currentIndex, {\n            scrollOffset:\n              previousRowBounds.scrollOffset + previousRowBounds.size,\n            size\n          });\n        }\n      }\n\n      const bounds = cache.get(index);\n      assert(\n        bounds !== undefined,\n        `Unexpected bounds cache miss for index ${index}`\n      );\n\n      return bounds;\n    },\n    set(index: number, bounds: Bounds) {\n      cache.set(index, bounds);\n    },\n    get size() {\n      return cache.size;\n    }\n  };\n}\n","import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"../hooks/useIsomorphicLayoutEffect\";\nimport { useResizeObserver } from \"../hooks/useResizeObserver\";\nimport { useStableCallback } from \"../hooks/useStableCallback\";\nimport type { Align } from \"../types\";\nimport { adjustScrollOffsetForRtl } from \"../utils/adjustScrollOffsetForRtl\";\nimport { shallowCompare } from \"../utils/shallowCompare\";\nimport { getEstimatedSize as getEstimatedSizeUtil } from \"./getEstimatedSize\";\nimport { getOffsetForIndex } from \"./getOffsetForIndex\";\nimport { getStartStopIndices as getStartStopIndicesUtil } from \"./getStartStopIndices\";\nimport type { Direction, SizeFunction } from \"./types\";\nimport { useCachedBounds } from \"./useCachedBounds\";\nimport { useItemSize } from \"./useItemSize\";\n\nexport function useVirtualizer<Props extends object>({\n  containerElement,\n  containerStyle,\n  defaultContainerSize = 0,\n  direction,\n  isRtl = false,\n  itemCount,\n  itemProps,\n  itemSize: itemSizeProp,\n  onResize,\n  overscanCount\n}: {\n  containerElement: HTMLElement | null;\n  containerStyle?: CSSProperties;\n  defaultContainerSize?: number;\n  direction: Direction;\n  isRtl?: boolean;\n  itemCount: number;\n  itemProps: Props;\n  itemSize: number | string | SizeFunction<Props>;\n  onResize:\n    | ((\n        size: { height: number; width: number },\n        prevSize: { height: number; width: number }\n      ) => void)\n    | undefined;\n  overscanCount: number;\n}) {\n  const [indices, setIndices] = useState<{\n    startIndexVisible: number;\n    stopIndexVisible: number;\n    startIndexOverscan: number;\n    stopIndexOverscan: number;\n  }>({\n    startIndexVisible: 0,\n    startIndexOverscan: 0,\n    stopIndexVisible: -1,\n    stopIndexOverscan: -1\n  });\n\n  // Guard against temporarily invalid indices that may occur when item count decreases\n  // Cached bounds object will be re-created and a second render will restore things\n  const {\n    startIndexVisible,\n    startIndexOverscan,\n    stopIndexVisible,\n    stopIndexOverscan\n  } = {\n    startIndexVisible: Math.min(itemCount - 1, indices.startIndexVisible),\n    startIndexOverscan: Math.min(itemCount - 1, indices.startIndexOverscan),\n    stopIndexVisible: Math.min(itemCount - 1, indices.stopIndexVisible),\n    stopIndexOverscan: Math.min(itemCount - 1, indices.stopIndexOverscan)\n  };\n\n  const { height = defaultContainerSize, width = defaultContainerSize } =\n    useResizeObserver({\n      defaultHeight:\n        direction === \"vertical\" ? defaultContainerSize : undefined,\n      defaultWidth:\n        direction === \"horizontal\" ? defaultContainerSize : undefined,\n      element: containerElement,\n      mode: direction === \"vertical\" ? \"only-height\" : \"only-width\",\n      style: containerStyle\n    });\n\n  const prevSizeRef = useRef<{ height: number; width: number }>({\n    height: 0,\n    width: 0\n  });\n\n  const containerSize = direction === \"vertical\" ? height : width;\n\n  const itemSize = useItemSize({ containerSize, itemSize: itemSizeProp });\n\n  useLayoutEffect(() => {\n    if (typeof onResize === \"function\") {\n      const prevSize = prevSizeRef.current;\n\n      if (prevSize.height !== height || prevSize.width !== width) {\n        onResize({ height, width }, { ...prevSize });\n\n        prevSize.height = height;\n        prevSize.width = width;\n      }\n    }\n  }, [height, onResize, width]);\n\n  const cachedBounds = useCachedBounds({\n    itemCount,\n    itemProps,\n    itemSize\n  });\n\n  const getCellBounds = useCallback(\n    (index: number) => cachedBounds.get(index),\n    [cachedBounds]\n  );\n\n  const getEstimatedSize = useCallback(\n    () =>\n      getEstimatedSizeUtil({\n        cachedBounds,\n        itemCount,\n        itemSize\n      }),\n    [cachedBounds, itemCount, itemSize]\n  );\n\n  const getStartStopIndices = useCallback(\n    (scrollOffset: number) => {\n      const containerScrollOffset = adjustScrollOffsetForRtl({\n        containerElement,\n        direction,\n        isRtl,\n        scrollOffset\n      });\n\n      return getStartStopIndicesUtil({\n        cachedBounds,\n        containerScrollOffset,\n        containerSize,\n        itemCount,\n        overscanCount\n      });\n    },\n    [\n      cachedBounds,\n      containerElement,\n      containerSize,\n      direction,\n      isRtl,\n      itemCount,\n      overscanCount\n    ]\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const scrollOffset =\n      (direction === \"vertical\"\n        ? containerElement?.scrollTop\n        : containerElement?.scrollLeft) ?? 0;\n\n    setIndices(getStartStopIndices(scrollOffset));\n  }, [containerElement, direction, getStartStopIndices]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerElement) {\n      return;\n    }\n\n    const onScroll = () => {\n      setIndices((prev) => {\n        const { scrollLeft, scrollTop } = containerElement;\n\n        const scrollOffset = adjustScrollOffsetForRtl({\n          containerElement,\n          direction,\n          isRtl,\n          scrollOffset: direction === \"vertical\" ? scrollTop : scrollLeft\n        });\n\n        const next = getStartStopIndicesUtil({\n          cachedBounds,\n          containerScrollOffset: scrollOffset,\n          containerSize,\n          itemCount,\n          overscanCount\n        });\n\n        if (shallowCompare(next, prev)) {\n          return prev;\n        }\n\n        return next;\n      });\n    };\n\n    containerElement.addEventListener(\"scroll\", onScroll);\n\n    return () => {\n      containerElement.removeEventListener(\"scroll\", onScroll);\n    };\n  }, [\n    cachedBounds,\n    containerElement,\n    containerSize,\n    direction,\n    itemCount,\n    overscanCount\n  ]);\n\n  const scrollToIndex = useStableCallback(\n    ({\n      align = \"auto\",\n      containerScrollOffset,\n      index\n    }: {\n      align?: Align;\n      containerScrollOffset: number;\n      index: number;\n    }) => {\n      let scrollOffset = getOffsetForIndex({\n        align,\n        cachedBounds,\n        containerScrollOffset,\n        containerSize,\n        index,\n        itemCount,\n        itemSize\n      });\n\n      if (containerElement) {\n        scrollOffset = adjustScrollOffsetForRtl({\n          containerElement,\n          direction,\n          isRtl,\n          scrollOffset\n        });\n\n        if (typeof containerElement.scrollTo !== \"function\") {\n          // Special case for environments like jsdom that don't implement scrollTo\n          const next = getStartStopIndices(scrollOffset);\n          if (!shallowCompare(indices, next)) {\n            setIndices(next);\n          }\n        }\n\n        return scrollOffset;\n      }\n    }\n  );\n\n  return {\n    getCellBounds,\n    getEstimatedSize,\n    scrollToIndex,\n    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\n  };\n}\n","import { useMemo, useState, type CSSProperties } from \"react\";\nimport { parseNumericStyleValue } from \"../utils/parseNumericStyleValue\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\nexport function useResizeObserver({\n  box,\n  defaultHeight,\n  defaultWidth,\n  disabled: disabledProp,\n  element,\n  mode,\n  style\n}: {\n  box?: ResizeObserverBoxOptions;\n  defaultHeight?: number;\n  defaultWidth?: number;\n  disabled?: boolean;\n  element: HTMLElement | null;\n  mode?: \"only-height\" | \"only-width\";\n  style?: CSSProperties;\n}) {\n  const { styleHeight, styleWidth } = useMemo(\n    () => ({\n      styleHeight: parseNumericStyleValue(style?.height),\n      styleWidth: parseNumericStyleValue(style?.width)\n    }),\n    [style?.height, style?.width]\n  );\n\n  const [state, setState] = useState<{\n    height: number | undefined;\n    width: number | undefined;\n  }>({\n    height: defaultHeight,\n    width: defaultWidth\n  });\n\n  const disabled =\n    disabledProp ||\n    (mode === \"only-height\" && styleHeight !== undefined) ||\n    (mode === \"only-width\" && styleWidth !== undefined) ||\n    (styleHeight !== undefined && styleWidth !== undefined);\n\n  useIsomorphicLayoutEffect(() => {\n    if (element === null || disabled) {\n      return;\n    }\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { contentRect, target } = entry;\n        if (element === target) {\n          setState((prevState) => {\n            if (\n              prevState.height === contentRect.height &&\n              prevState.width === contentRect.width\n            ) {\n              return prevState;\n            }\n\n            return {\n              height: contentRect.height,\n              width: contentRect.width\n            };\n          });\n        }\n      }\n    });\n    resizeObserver.observe(element, { box });\n\n    return () => {\n      resizeObserver?.unobserve(element);\n    };\n  }, [box, disabled, element, styleHeight, styleWidth]);\n\n  return useMemo(\n    () => ({\n      height: styleHeight ?? state.height,\n      width: styleWidth ?? state.width\n    }),\n    [state, styleHeight, styleWidth]\n  );\n}\n","import { assert } from \"../utils/assert\";\nimport type { SizeFunction } from \"./types\";\n\nexport function useItemSize<Props extends object>({\n  containerSize,\n  itemSize: itemSizeProp\n}: {\n  containerSize: number;\n  itemSize: number | string | SizeFunction<Props>;\n}) {\n  let itemSize: number | SizeFunction<Props>;\n  switch (typeof itemSizeProp) {\n    case \"string\": {\n      assert(\n        itemSizeProp.endsWith(\"%\"),\n        `Invalid item size: \"${itemSizeProp}\"; string values must be percentages (e.g. \"100%\")`\n      );\n      assert(\n        containerSize !== undefined,\n        \"Container size must be defined if a percentage item size is specified\"\n      );\n\n      itemSize = (containerSize * parseInt(itemSizeProp)) / 100;\n      break;\n    }\n    default: {\n      itemSize = itemSizeProp;\n      break;\n    }\n  }\n\n  return itemSize;\n}\n","import { useCallback, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect\";\n\n// Forked from useEventCallback (usehooks-ts)\nexport function useStableCallback<Args, Return>(\n  fn: (args: Args) => Return\n): (args: Args) => Return {\n  const ref = useRef<typeof fn>(() => {\n    throw new Error(\"Cannot call an event handler while rendering.\");\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  }, [fn]);\n\n  return useCallback((args: Args) => ref.current?.(args), [ref]) as (\n    args: Args\n  ) => Return;\n}\n","import type { Align } from \"../types\";\nimport { getEstimatedSize } from \"./getEstimatedSize\";\nimport type { CachedBounds, SizeFunction } from \"./types\";\n\nexport function getOffsetForIndex<Props extends object>({\n  align,\n  cachedBounds,\n  index,\n  itemCount,\n  itemSize,\n  containerScrollOffset,\n  containerSize\n}: {\n  align: Align;\n  cachedBounds: CachedBounds;\n  index: number;\n  itemCount: number;\n  itemSize: number | SizeFunction<Props>;\n  containerScrollOffset: number;\n  containerSize: number;\n}) {\n  const estimatedTotalSize = getEstimatedSize({\n    cachedBounds,\n    itemCount,\n    itemSize\n  });\n\n  const bounds = cachedBounds.get(index);\n  const maxOffset = Math.max(\n    0,\n    Math.min(estimatedTotalSize - containerSize, bounds.scrollOffset)\n  );\n  const minOffset = Math.max(\n    0,\n    bounds.scrollOffset - containerSize + bounds.size\n  );\n\n  if (align === \"smart\") {\n    if (\n      containerScrollOffset >= minOffset &&\n      containerScrollOffset <= maxOffset\n    ) {\n      align = \"auto\";\n    } else {\n      align = \"center\";\n    }\n  }\n\n  switch (align) {\n    case \"start\": {\n      return maxOffset;\n    }\n    case \"end\": {\n      return minOffset;\n    }\n    case \"center\": {\n      if (bounds.scrollOffset <= containerSize / 2) {\n        // Too near the beginning to center-align\n        return 0;\n      } else if (\n        bounds.scrollOffset + bounds.size / 2 >=\n        estimatedTotalSize - containerSize / 2\n      ) {\n        // Too near the end to center-align\n        return estimatedTotalSize - containerSize;\n      } else {\n        return bounds.scrollOffset + bounds.size / 2 - containerSize / 2;\n      }\n    }\n    case \"auto\":\n    default: {\n      if (\n        containerScrollOffset >= minOffset &&\n        containerScrollOffset <= maxOffset\n      ) {\n        return containerScrollOffset;\n      } else if (containerScrollOffset < minOffset) {\n        return minOffset;\n      } else {\n        return maxOffset;\n      }\n    }\n  }\n}\n","import { useMemo } from \"react\";\n\nexport function useMemoizedObject<Type extends object>(\n  unstableObject: Type\n): Type {\n  return useMemo(() => {\n    return unstableObject;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, Object.values(unstableObject));\n}\n","import type { CSSProperties } from \"react\";\nimport { shallowCompare } from \"./shallowCompare\";\n\n// Custom comparison function for React.memo()\n// It knows to compare individual style props and ignore the wrapper object.\n// See https://react.dev/reference/react/memo#memo\nexport function arePropsEqual(\n  prevProps: { ariaAttributes: object; style: CSSProperties },\n  nextProps: { ariaAttributes: object; style: CSSProperties }\n): boolean {\n  const {\n    ariaAttributes: prevAriaAttributes,\n    style: prevStyle,\n    ...prevRest\n  } = prevProps;\n  const {\n    ariaAttributes: nextAriaAttributes,\n    style: nextStyle,\n    ...nextRest\n  } = nextProps;\n\n  return (\n    shallowCompare(prevAriaAttributes, nextAriaAttributes) &&\n    shallowCompare(prevStyle, nextStyle) &&\n    shallowCompare(prevRest, nextRest)\n  );\n}\n"],"names":["Block","children","className","rest","ErrorBoundary","jsx","parseNumericStyleValue","value","endsWith","parseFloat","cachedRTLResult","adjustScrollOffsetForRtl","containerElement","direction","isRtl","scrollOffset","recalculate","outerDiv","document","createElement","outerStyle","style","width","height","overflow","innerDiv","innerStyle","appendChild","body","scrollLeft","removeChild","getRTLOffsetType","clientWidth","scrollWidth","assert","expectedCondition","message","console","error","Error","shallowCompare","a","b","Object","keys","length","key","is","getEstimatedSize","cachedBounds","itemCount","itemSize","bounds","get","size","getStartStopIndices","containerScrollOffset","containerSize","overscanCount","maxIndex","startIndexVisible","stopIndexVisible","startIndexOverscan","stopIndexOverscan","currentIndex","Math","max","min","useCachedBounds","itemProps","useMemo","cache","Map","index","set","previousRowBounds","createCachedBounds","useVirtualizer","containerStyle","defaultContainerSize","itemSizeProp","onResize","indices","setIndices","useState","box","defaultHeight","defaultWidth","disabled","disabledProp","element","mode","styleHeight","styleWidth","state","setState","useIsomorphicLayoutEffect","resizeObserver","ResizeObserver","entries","entry","contentRect","target","prevState","observe","unobserve","useResizeObserver","prevSizeRef","useRef","parseInt","useItemSize","useLayoutEffect","prevSize","current","getCellBounds","useCallback","getEstimatedSizeUtil","getStartStopIndicesUtil","scrollTop","onScroll","prev","next","addEventListener","removeEventListener","scrollToIndex","fn","ref","args","useStableCallback","align","estimatedTotalSize","maxOffset","minOffset","getOffsetForIndex","scrollTo","useMemoizedObject","unstableObject","values","arePropsEqual","prevProps","nextProps","ariaAttributes","prevAriaAttributes","prevStyle","prevRest","nextAriaAttributes","nextStyle","nextRest"],"mappings":"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"}