react-window 2.0.1 → 2.0.2

package/docs/assets/{Header-BYp8JKXz.js.map → Header-D5XYa_k5.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Header-BYp8JKXz.js","sources":["../../src/components/Header.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\nimport { useEffect } from \"react\";\n\nexport function Header({\n  section,\n  title\n}: {\n  section?: string;\n  title: string;\n}) {\n  useEffect(() => {\n    const originalTitle = document.title;\n\n    document.title = `react-window: ${section ? `${section}: ${title}` : title}`;\n\n    return () => {\n      document.title = originalTitle;\n    };\n  });\n\n  return (\n    <Box align=\"center\" direction=\"row\" gap={2}>\n      {section && (\n        <>\n          <div className=\"text-xl\">{section}</div>\n          <ChevronRightIcon className=\"size-4 text-slate-400\" />\n        </>\n      )}\n      <div className=\"text-xl\">{title}</div>\n    </Box>\n  );\n}\n"],"names":["Header","section","title","useEffect","originalTitle","document","Box","align","direction","gap","children","jsxs","Fragment","jsx","className","ChevronRightIcon"],"mappings":"6DAIO,SAASA,GAAOC,QACrBA,EAAAC,MACAA,IAeA,OAVAC,EAAAA,UAAU,KACR,MAAMC,EAAgBC,SAASH,MAI/B,OAFAG,SAASH,MAAQ,iBAAiBD,EAAU,GAAGA,MAAYC,IAAUA,IAE9D,KACLG,SAASH,MAAQE,YAKlBE,EAAA,CAAIC,MAAM,SAASC,UAAU,MAAMC,IAAK,EACtCC,SAAA,CAAAT,GACCU,EAAAA,KAAAC,WAAA,CACEF,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAIC,UAAU,UAAWJ,SAAAT,MAC1BY,IAACE,EAAA,CAAiBD,UAAU,6BAGhCD,EAAAA,IAAC,MAAA,CAAIC,UAAU,UAAWJ,SAAAR,MAGhC"}
+{"version":3,"file":"Header-D5XYa_k5.js","sources":["../../src/components/Header.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\nimport { useEffect } from \"react\";\n\nexport function Header({\n  section,\n  title\n}: {\n  section?: string;\n  title: string;\n}) {\n  useEffect(() => {\n    const originalTitle = document.title;\n\n    document.title = `react-window: ${section ? `${section}: ${title}` : title}`;\n\n    return () => {\n      document.title = originalTitle;\n    };\n  });\n\n  return (\n    <Box align=\"center\" direction=\"row\" gap={2}>\n      {section && (\n        <>\n          <div className=\"text-xl\">{section}</div>\n          <ChevronRightIcon className=\"size-4 text-slate-400\" />\n        </>\n      )}\n      <div className=\"text-xl\">{title}</div>\n    </Box>\n  );\n}\n"],"names":["Header","section","title","useEffect","originalTitle","document","Box","align","direction","gap","children","jsxs","Fragment","jsx","className","ChevronRightIcon"],"mappings":"6DAIO,SAASA,GAAOC,QACrBA,EAAAC,MACAA,IAeA,OAVAC,EAAAA,UAAU,KACR,MAAMC,EAAgBC,SAASH,MAI/B,OAFAG,SAASH,MAAQ,iBAAiBD,EAAU,GAAGA,MAAYC,IAAUA,IAE9D,KACLG,SAASH,MAAQE,YAKlBE,EAAA,CAAIC,MAAM,SAASC,UAAU,MAAMC,IAAK,EACtCC,SAAA,CAAAT,GACCU,EAAAA,KAAAC,WAAA,CACEF,SAAA,CAAAG,EAAAA,IAAC,MAAA,CAAIC,UAAU,UAAWJ,SAAAT,MAC1BY,IAACE,EAAA,CAAiBD,UAAU,6BAGhCD,EAAAA,IAAC,MAAA,CAAIC,UAAU,UAAWJ,SAAAR,MAGhC"}

package/docs/assets/{HorizontalListsRoute-rNcKbQ1k.js → HorizontalListsRoute-BshOgFUz.js}

@@ -1,2 +1,2 @@
-import{j as e,c as s,r as o,B as r}from"./index-B_YQ7rlN.js";import{B as n}from"./arePropsEqual-D3jAKwxp.js";import{F as t}from"./FormattedCode-CAmuOSRw.js";import{u as i,L as l}from"./LoadingSpinner-Z5HQViRD.js";import{G as a}from"./Grid-DH-j7ODh.js";function d({columnIndex:o,emails:r,style:n}){return e.jsx("div",{className:s("px-2 truncate text-center leading-[2.5]",{"bg-white/10 rounded":o%2==0}),style:n,children:r[o]})}function c({emails:s}){return e.jsx(a,{cellComponent:d,cellProps:{emails:s},columnCount:s.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function m(){const s=function(){const e=i("/data/contacts.json");return o.useMemo(()=>e?e.map(e=>e.email).sort((e,s)=>e.localeCompare(s)):[],[e])}();return e.jsxs(r,{direction:"column",gap:4,children:[e.jsx("div",{children:"A horizontal list is just a grid with only one row."}),e.jsx("div",{children:"Here's an example horizontal list (grid) of emails:"}),e.jsxs(n,{className:"h-20","data-focus-within":"bold",children:[!s.length&&e.jsx(l,{}),e.jsx(c,{emails:s})]}),e.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),e.jsx(t,{url:"/generated/code-snippets/HorizontalList.json"}),e.jsx("div",{children:"And here's the cell renderer:"}),e.jsx(t,{url:"/generated/code-snippets/HorizontalListCellRenderer.json"})]})}export{m as default};
-//# sourceMappingURL=HorizontalListsRoute-rNcKbQ1k.js.map
+import{j as e,c as s,r as o,B as r}from"./index-6dOV2kLd.js";import{B as n}from"./arePropsEqual-J86giKVT.js";import{F as t}from"./FormattedCode-Bgu5KYpx.js";import{u as i,L as l}from"./LoadingSpinner-C5G0kF8B.js";import{G as a}from"./Grid-BmNZGHKY.js";function d({columnIndex:o,emails:r,style:n}){return e.jsx("div",{className:s("px-2 truncate text-center leading-[2.5]",{"bg-white/10 rounded":o%2==0}),style:n,children:r[o]})}function c({emails:s}){return e.jsx(a,{cellComponent:d,cellProps:{emails:s},columnCount:s.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function m(){const s=function(){const e=i("/data/contacts.json");return o.useMemo(()=>e?e.map(e=>e.email).sort((e,s)=>e.localeCompare(s)):[],[e])}();return e.jsxs(r,{direction:"column",gap:4,children:[e.jsx("div",{children:"A horizontal list is just a grid with only one row."}),e.jsx("div",{children:"Here's an example horizontal list (grid) of emails:"}),e.jsxs(n,{className:"h-20","data-focus-within":"bold",children:[!s.length&&e.jsx(l,{}),e.jsx(c,{emails:s})]}),e.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),e.jsx(t,{url:"/generated/code-snippets/HorizontalList.json"}),e.jsx("div",{children:"And here's the cell renderer:"}),e.jsx(t,{url:"/generated/code-snippets/HorizontalListCellRenderer.json"})]})}export{m as default};
+//# sourceMappingURL=HorizontalListsRoute-BshOgFUz.js.map

package/docs/assets/{HorizontalListsRoute-rNcKbQ1k.js.map → HorizontalListsRoute-BshOgFUz.js.map}

@@ -1 +1 @@
-{"version":3,"file":"HorizontalListsRoute-rNcKbQ1k.js","sources":["../../src/routes/grid/examples/HorizontalListCellRenderer.example.tsx","../../src/routes/grid/examples/HorizontalList.example.tsx","../../src/routes/grid/HorizontalListsRoute.tsx","../../src/routes/grid/hooks/useEmails.ts"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n  columnIndex,\n  emails,\n  style\n}: CellComponentProps<{ emails: string[] }>) {\n  return (\n    <div\n      className={cn(\"px-2 truncate text-center leading-[2.5]\", {\n        \"bg-white/10 rounded\": columnIndex % 2 === 0\n      })}\n      style={style}\n    >\n      {emails[columnIndex]}\n    </div>\n  );\n}\n\n// <end>\n\nexport { CellComponent };\n","import { CellComponent } from \"./HorizontalListCellRenderer.example\";\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction HorizontalList({ emails }: { emails: string[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ emails }}\n      columnCount={emails.length}\n      columnWidth={150}\n      rowCount={1}\n      rowHeight=\"100%\"\n    />\n  );\n}\n\n// <end>\n\nexport { HorizontalList };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { HorizontalList } from \"./examples/HorizontalList.example\";\nimport { useEmails } from \"./hooks/useEmails\";\n\nexport default function HorizontalListsRoute() {\n  const emails = useEmails();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <div>A horizontal list is just a grid with only one row.</div>\n      <div>Here's an example horizontal list (grid) of emails:</div>\n      <Block className=\"h-20\" data-focus-within=\"bold\">\n        {!emails.length && <LoadingSpinner />}\n        <HorizontalList emails={emails} />\n      </Block>\n      <div>Here's what the configuration for the grid above looks like:</div>\n      <FormattedCode url=\"/generated/code-snippets/HorizontalList.json\" />\n      <div>And here's the cell renderer:</div>\n      <FormattedCode url=\"/generated/code-snippets/HorizontalListCellRenderer.json\" />\n    </Box>\n  );\n}\n","import { useMemo } from \"react\";\nimport type json from \"../../../../public/data/contacts.json\";\nimport { useJSONData } from \"../../../hooks/useJSONData\";\n\ntype Contact = (typeof json)[0];\n\nexport function useEmails(): string[] {\n  const json = useJSONData<Contact[]>(\"/data/contacts.json\");\n\n  return useMemo(() => {\n    if (json) {\n      return json\n        .map((contact) => contact.email)\n        .sort((a, b) => a.localeCompare(b));\n    }\n\n    return [];\n  }, [json]);\n}\n"],"names":["CellComponent","columnIndex","emails","style","jsx","className","cn","children","HorizontalList","Grid","cellComponent","cellProps","columnCount","length","columnWidth","rowCount","rowHeight","HorizontalListsRoute","json","useJSONData","useMemo","map","contact","email","sort","a","b","localeCompare","useEmails","jsxs","Box","direction","gap","Block","LoadingSpinner","FormattedCode","url"],"mappings":"4PAMA,SAASA,GAAcC,YACrBA,EAAAC,OACAA,EAAAC,MACAA,IAEA,OACEC,EAAAA,IAAC,MAAA,CACCC,UAAWC,EAAG,0CAA2C,CACvD,sBAAuBL,EAAc,GAAM,IAE7CE,QAECI,WAAON,IAGd,CCfA,SAASO,GAAeN,OAAEA,IACxB,OACEE,EAAAA,IAACK,EAAA,CACCC,cAAeV,EACfW,UAAW,CAAET,UACbU,YAAaV,EAAOW,OACpBC,YAAa,IACbC,SAAU,EACVC,UAAU,QAGhB,CCVA,SAAwBC,IACtB,MAAMf,ECFD,WACL,MAAMgB,EAAOC,EAAuB,uBAEpC,OAAOC,EAAAA,QAAQ,IACTF,EACKA,EACJG,IAAKC,GAAYA,EAAQC,OACzBC,KAAK,CAACC,EAAGC,IAAMD,EAAEE,cAAcD,IAG7B,GACN,CAACR,GACN,CDViBU,GAEf,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BzB,SAAA,GAAAH,IAAC,OAAIG,SAAA,0DACLH,IAAC,OAAIG,SAAA,wDACLsB,EAAAA,KAACI,EAAA,CAAM5B,UAAU,OAAO,oBAAkB,OACvCE,SAAA,EAACL,EAAOW,cAAWqB,EAAA,CAAA,GACpB9B,MAACI,GAAeN,gBAElBE,IAAC,OAAIG,SAAA,mEACLH,IAAC+B,EAAA,CAAcC,IAAI,mDACnBhC,IAAC,OAAIG,SAAA,oCACLH,IAAC+B,EAAA,CAAcC,IAAI,+DAGzB"}
+{"version":3,"file":"HorizontalListsRoute-BshOgFUz.js","sources":["../../src/routes/grid/examples/HorizontalListCellRenderer.example.tsx","../../src/routes/grid/examples/HorizontalList.example.tsx","../../src/routes/grid/HorizontalListsRoute.tsx","../../src/routes/grid/hooks/useEmails.ts"],"sourcesContent":["import { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport { type CellComponentProps } from \"react-window\";\n\nfunction CellComponent({\n  columnIndex,\n  emails,\n  style\n}: CellComponentProps<{ emails: string[] }>) {\n  return (\n    <div\n      className={cn(\"px-2 truncate text-center leading-[2.5]\", {\n        \"bg-white/10 rounded\": columnIndex % 2 === 0\n      })}\n      style={style}\n    >\n      {emails[columnIndex]}\n    </div>\n  );\n}\n\n// <end>\n\nexport { CellComponent };\n","import { CellComponent } from \"./HorizontalListCellRenderer.example\";\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction HorizontalList({ emails }: { emails: string[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ emails }}\n      columnCount={emails.length}\n      columnWidth={150}\n      rowCount={1}\n      rowHeight=\"100%\"\n    />\n  );\n}\n\n// <end>\n\nexport { HorizontalList };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { HorizontalList } from \"./examples/HorizontalList.example\";\nimport { useEmails } from \"./hooks/useEmails\";\n\nexport default function HorizontalListsRoute() {\n  const emails = useEmails();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <div>A horizontal list is just a grid with only one row.</div>\n      <div>Here's an example horizontal list (grid) of emails:</div>\n      <Block className=\"h-20\" data-focus-within=\"bold\">\n        {!emails.length && <LoadingSpinner />}\n        <HorizontalList emails={emails} />\n      </Block>\n      <div>Here's what the configuration for the grid above looks like:</div>\n      <FormattedCode url=\"/generated/code-snippets/HorizontalList.json\" />\n      <div>And here's the cell renderer:</div>\n      <FormattedCode url=\"/generated/code-snippets/HorizontalListCellRenderer.json\" />\n    </Box>\n  );\n}\n","import { useMemo } from \"react\";\nimport type json from \"../../../../public/data/contacts.json\";\nimport { useJSONData } from \"../../../hooks/useJSONData\";\n\ntype Contact = (typeof json)[0];\n\nexport function useEmails(): string[] {\n  const json = useJSONData<Contact[]>(\"/data/contacts.json\");\n\n  return useMemo(() => {\n    if (json) {\n      return json\n        .map((contact) => contact.email)\n        .sort((a, b) => a.localeCompare(b));\n    }\n\n    return [];\n  }, [json]);\n}\n"],"names":["CellComponent","columnIndex","emails","style","jsx","className","cn","children","HorizontalList","Grid","cellComponent","cellProps","columnCount","length","columnWidth","rowCount","rowHeight","HorizontalListsRoute","json","useJSONData","useMemo","map","contact","email","sort","a","b","localeCompare","useEmails","jsxs","Box","direction","gap","Block","LoadingSpinner","FormattedCode","url"],"mappings":"4PAMA,SAASA,GAAcC,YACrBA,EAAAC,OACAA,EAAAC,MACAA,IAEA,OACEC,EAAAA,IAAC,MAAA,CACCC,UAAWC,EAAG,0CAA2C,CACvD,sBAAuBL,EAAc,GAAM,IAE7CE,QAECI,WAAON,IAGd,CCfA,SAASO,GAAeN,OAAEA,IACxB,OACEE,EAAAA,IAACK,EAAA,CACCC,cAAeV,EACfW,UAAW,CAAET,UACbU,YAAaV,EAAOW,OACpBC,YAAa,IACbC,SAAU,EACVC,UAAU,QAGhB,CCVA,SAAwBC,IACtB,MAAMf,ECFD,WACL,MAAMgB,EAAOC,EAAuB,uBAEpC,OAAOC,EAAAA,QAAQ,IACTF,EACKA,EACJG,IAAKC,GAAYA,EAAQC,OACzBC,KAAK,CAACC,EAAGC,IAAMD,EAAEE,cAAcD,IAG7B,GACN,CAACR,GACN,CDViBU,GAEf,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BzB,SAAA,GAAAH,IAAC,OAAIG,SAAA,0DACLH,IAAC,OAAIG,SAAA,wDACLsB,EAAAA,KAACI,EAAA,CAAM5B,UAAU,OAAO,oBAAkB,OACvCE,SAAA,EAACL,EAAOW,cAAWqB,EAAA,CAAA,GACpB9B,MAACI,GAAeN,gBAElBE,IAAC,OAAIG,SAAA,mEACLH,IAAC+B,EAAA,CAAcC,IAAI,mDACnBhC,IAAC,OAAIG,SAAA,oCACLH,IAAC+B,EAAA,CAAcC,IAAI,+DAGzB"}

package/docs/assets/{ImperativeApiRoute-DntU9ReR.js → ImperativeApiRoute-BAWsk-vD.js}

@@ -1,2 +1,2 @@
-import{r as e,j as s,B as t,a,C as o}from"./index-B_YQ7rlN.js";import{L as n}from"./List-C4KHYcVU.js";import{B as r}from"./arePropsEqual-D3jAKwxp.js";import{F as i}from"./FormattedCode-CAmuOSRw.js";import{H as l}from"./Header-BYp8JKXz.js";import{L as c}from"./LoadingSpinner-Z5HQViRD.js";import{S as d}from"./Select-C5ovWBbK.js";import{u,R as h}from"./useCitiesByState-azL1M3ue.js";const p=e.useRef;function m(e,{items:s}){return"state"===s[e].type?30:25}const j={label:"",value:""},f=["auto","center","end","smart","start"].map(e=>({label:`align: ${e}`,value:e}));f.unshift(j);const x=["auto","instant","smooth"].map(e=>({label:`behavior: ${e}`,value:e}));function v(){const[v,g]=e.useState(),[b,C]=e.useState(),[w,S]=e.useState(j),I=u(),L=e.useMemo(()=>{const e=I.filter(e=>"state"===e.type).map(e=>({label:e.state,value:e.state}));return e.unshift(j),e},[I]),k=p(null);return s.jsxs(t,{direction:"column",gap:4,children:[s.jsx(l,{section:"Lists",title:"Imperative API"}),s.jsx("div",{children:"List provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),s.jsx(i,{url:"/generated/code-snippets/useListRefImport.json"}),s.jsx("div",{children:"Attach the ref during render:"}),s.jsx(i,{url:"/generated/code-snippets/useListRef.json"}),s.jsx("div",{children:"And call API methods in an event handler:"}),s.jsx(i,{url:"/generated/code-snippets/listRefClickEventHandler.json"}),s.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),s.jsxs(t,{direction:"row",gap:4,children:[s.jsx(d,{className:"flex-1",onChange:g,options:f,placeholder:"Align",value:v}),s.jsx(d,{className:"flex-1",onChange:C,options:x,placeholder:"Scroll behavior",value:b})]}),s.jsxs(t,{direction:"row",gap:4,children:[s.jsx(d,{className:"flex-1",onChange:S,options:L,placeholder:"State",value:w}),s.jsx(a,{className:"shrink-0",disabled:!w.value,onClick:()=>{const e=I.findIndex(e=>"state"===e.type&&e.state===w.value);k.current?.scrollToRow({align:v?.value,behavior:b?.value,index:e})},children:"Scroll"})]}),s.jsxs(r,{className:"h-50","data-focus-within":"bold",children:[!I.length&&s.jsx(c,{}),s.jsx(n,{listRef:k,rowComponent:h,rowCount:I.length,rowHeight:m,rowProps:{items:I}})]}),s.jsxs(o,{intent:"primary",children:[s.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),s.jsx(i,{url:"/generated/code-snippets/useListCallbackRef.json"})]})}x.unshift(j);export{v as default};
-//# sourceMappingURL=ImperativeApiRoute-DntU9ReR.js.map
+import{r as e,j as s,B as t,a,C as o}from"./index-6dOV2kLd.js";import{L as n}from"./List-C7ANWJ5i.js";import{B as r}from"./arePropsEqual-J86giKVT.js";import{F as i}from"./FormattedCode-Bgu5KYpx.js";import{H as l}from"./Header-D5XYa_k5.js";import{L as c}from"./LoadingSpinner-C5G0kF8B.js";import{S as d}from"./Select-DYzOjrIR.js";import{u,R as h}from"./useCitiesByState-aLkpFxPh.js";const p=e.useRef;function m(e,{items:s}){return"state"===s[e].type?30:25}const j={label:"",value:""},f=["auto","center","end","smart","start"].map(e=>({label:`align: ${e}`,value:e}));f.unshift(j);const x=["auto","instant","smooth"].map(e=>({label:`behavior: ${e}`,value:e}));function v(){const[v,g]=e.useState(),[b,C]=e.useState(),[w,S]=e.useState(j),I=u(),L=e.useMemo(()=>{const e=I.filter(e=>"state"===e.type).map(e=>({label:e.state,value:e.state}));return e.unshift(j),e},[I]),k=p(null);return s.jsxs(t,{direction:"column",gap:4,children:[s.jsx(l,{section:"Lists",title:"Imperative API"}),s.jsx("div",{children:"List provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),s.jsx(i,{url:"/generated/code-snippets/useListRefImport.json"}),s.jsx("div",{children:"Attach the ref during render:"}),s.jsx(i,{url:"/generated/code-snippets/useListRef.json"}),s.jsx("div",{children:"And call API methods in an event handler:"}),s.jsx(i,{url:"/generated/code-snippets/listRefClickEventHandler.json"}),s.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),s.jsxs(t,{direction:"row",gap:4,children:[s.jsx(d,{className:"flex-1",onChange:g,options:f,placeholder:"Align",value:v}),s.jsx(d,{className:"flex-1",onChange:C,options:x,placeholder:"Scroll behavior",value:b})]}),s.jsxs(t,{direction:"row",gap:4,children:[s.jsx(d,{className:"flex-1",onChange:S,options:L,placeholder:"State",value:w}),s.jsx(a,{className:"shrink-0",disabled:!w.value,onClick:()=>{const e=I.findIndex(e=>"state"===e.type&&e.state===w.value);k.current?.scrollToRow({align:v?.value,behavior:b?.value,index:e})},children:"Scroll"})]}),s.jsxs(r,{className:"h-50","data-focus-within":"bold",children:[!I.length&&s.jsx(c,{}),s.jsx(n,{listRef:k,rowComponent:h,rowCount:I.length,rowHeight:m,rowProps:{items:I}})]}),s.jsxs(o,{intent:"primary",children:[s.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),s.jsx(i,{url:"/generated/code-snippets/useListCallbackRef.json"})]})}x.unshift(j);export{v as default};
+//# sourceMappingURL=ImperativeApiRoute-BAWsk-vD.js.map

package/docs/assets/{ImperativeApiRoute-DntU9ReR.js.map → ImperativeApiRoute-BAWsk-vD.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ImperativeApiRoute-DntU9ReR.js","sources":["../../lib/components/list/useListRef.ts","../../src/routes/list/examples/rowHeight.example.ts","../../src/routes/list/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { ListImperativeAPI } from \"./types\";\n\n/**\n * Convenience hook to return a properly typed ref for the List component.\n */\nexport const useListRef = useRef as typeof useRef<ListImperativeAPI>;\n","import type { RowProps } from \"./ListVariableRowHeights.example\";\n\n// <begin>\n\nfunction rowHeight(index: number, { items }: RowProps) {\n  return items[index].type === \"state\" ? 30 : 25;\n}\n\n// <end>\n\nexport { rowHeight };\n","import { useMemo, useState } from \"react\";\nimport { List, useListRef, type Align } from \"react-window\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { RowComponent } from \"./examples/ListVariableRowHeights.example\";\nimport { rowHeight } from \"./examples/rowHeight.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\n\nconst EMPTY_OPTION: Option<string> = {\n  label: \"\",\n  value: \"\"\n};\n\nconst ALIGNMENTS: Option<Align>[] = (\n  [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n  label: `align: ${value}`,\n  value\n}));\nALIGNMENTS.unshift(EMPTY_OPTION as Option<Align>);\n\nconst BEHAVIORS: Option<ScrollBehavior>[] = (\n  [\"auto\", \"instant\", \"smooth\"] satisfies ScrollBehavior[]\n).map((value) => ({\n  label: `behavior: ${value}`,\n  value\n}));\nBEHAVIORS.unshift(EMPTY_OPTION as Option<ScrollBehavior>);\n\nexport default function ListImperativeApiRoute() {\n  const [align, setAlign] = useState<Option<Align> | undefined>();\n  const [behavior, setBehavior] = useState<\n    Option<ScrollBehavior> | undefined\n  >();\n  const [state, setState] = useState<Option<string>>(EMPTY_OPTION);\n\n  const citiesByState = useCitiesByState();\n\n  const stateOptions = useMemo<Option<string>[]>(() => {\n    const options: Option<string>[] = citiesByState\n      .filter((item) => item.type === \"state\")\n      .map((item) => ({\n        label: item.state,\n        value: item.state\n      }));\n    options.unshift(EMPTY_OPTION);\n\n    return options;\n  }, [citiesByState]);\n\n  const listRef = useListRef(null);\n\n  const scrollToRow = () => {\n    const index = citiesByState.findIndex(\n      (item) => item.type === \"state\" && item.state === state.value\n    );\n    listRef.current?.scrollToRow({\n      align: align?.value,\n      behavior: behavior?.value,\n      index\n    });\n  };\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Imperative API\" />\n      <div>\n        List provides an imperative API for responding to events. The\n        recommended way to access this API is to use the exported ref hook:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/useListRefImport.json\" />\n      <div>Attach the ref during render:</div>\n      <FormattedCode url=\"/generated/code-snippets/useListRef.json\" />\n      <div>And call API methods in an event handler:</div>\n      <FormattedCode url=\"/generated/code-snippets/listRefClickEventHandler.json\" />\n      <div>The form below uses the imperative API to scroll the list:</div>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setAlign}\n          options={ALIGNMENTS}\n          placeholder=\"Align\"\n          value={align}\n        />\n        <Select\n          className=\"flex-1\"\n          onChange={setBehavior}\n          options={BEHAVIORS}\n          placeholder=\"Scroll behavior\"\n          value={behavior}\n        />\n      </Box>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setState}\n          options={stateOptions}\n          placeholder=\"State\"\n          value={state}\n        />\n        <Button\n          className=\"shrink-0\"\n          disabled={!state.value}\n          onClick={scrollToRow}\n        >\n          Scroll\n        </Button>\n      </Box>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!citiesByState.length && <LoadingSpinner />}\n        <List\n          listRef={listRef}\n          rowComponent={RowComponent}\n          rowCount={citiesByState.length}\n          rowHeight={rowHeight}\n          rowProps={{ items: citiesByState }}\n        />\n      </Block>\n      <Callout intent=\"primary\">\n        <strong className=\"text-sky-300\">Note</strong> If you are passing the\n        ref to another component or hook, use the ref callback function instead.\n      </Callout>\n      <FormattedCode url=\"/generated/code-snippets/useListCallbackRef.json\" />\n    </Box>\n  );\n}\n"],"names":["useListRef","useRef","rowHeight","index","items","type","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","ListImperativeApiRoute","align","setAlign","useState","behavior","setBehavior","state","setState","citiesByState","useCitiesByState","stateOptions","useMemo","options","filter","item","listRef","jsxs","Box","direction","gap","children","jsx","Header","section","title","FormattedCode","url","Select","className","onChange","placeholder","Button","disabled","onClick","findIndex","current","scrollToRow","Block","length","LoadingSpinner","List","rowComponent","RowComponent","rowCount","rowProps","Callout","intent"],"mappings":"8XAMO,MAAMA,EAAaC,EAAAA,OCF1B,SAASC,EAAUC,GAAeC,MAAEA,IAClC,MAA6B,UAAtBA,EAAMD,GAAOE,KAAmB,GAAK,EAC9C,CCQA,MAAMC,EAA+B,CACnCC,MAAO,GACPC,MAAO,IAGHC,EACJ,CAAC,OAAQ,SAAU,MAAO,QAAS,SACnCC,IAAKF,IAAA,CACLD,MAAO,UAAUC,IACjBA,WAEFC,EAAWE,QAAQL,GAEnB,MAAMM,EACJ,CAAC,OAAQ,UAAW,UACpBF,IAAKF,IAAA,CACLD,MAAO,aAAaC,IACpBA,WAIF,SAAwBK,IACtB,MAAOC,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAOC,GAAYJ,EAAAA,SAAyBV,GAE7Ce,EAAgBC,IAEhBC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4BJ,EAC/BK,OAAQC,GAAuB,UAAdA,EAAKtB,MACtBK,IAAKiB,IAAA,CACJpB,MAAOoB,EAAKR,MACZX,MAAOmB,EAAKR,SAIhB,OAFAM,EAAQd,QAAQL,GAETmB,GACN,CAACJ,IAEEO,EAAU5B,EAAW,MAa3B,OACE6B,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,qBAC9BH,IAAC,OAAID,SAAA,wIAILC,IAACI,EAAA,CAAcC,IAAI,qDACnBL,IAAC,OAAID,SAAA,oCACLC,IAACI,EAAA,CAAcC,IAAI,+CACnBL,IAAC,OAAID,SAAA,gDACLC,IAACI,EAAA,CAAcC,IAAI,6DACnBL,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACM,EAAA,CACCC,UAAU,SACVC,SAAU3B,EACVU,QAAShB,EACTkC,YAAY,QACZnC,MAAOM,IAEToB,EAAAA,IAACM,EAAA,CACCC,UAAU,SACVC,SAAUxB,EACVO,QAASb,EACT+B,YAAY,kBACZnC,MAAOS,OAGXY,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACM,EAAA,CACCC,UAAU,SACVC,SAAUtB,EACVK,QAASF,EACToB,YAAY,QACZnC,MAAOW,IAETe,EAAAA,IAACU,EAAA,CACCH,UAAU,WACVI,UAAW1B,EAAMX,MACjBsC,QAnDY,KAClB,MAAM3C,EAAQkB,EAAc0B,UACzBpB,GAAuB,UAAdA,EAAKtB,MAAoBsB,EAAKR,QAAUA,EAAMX,OAE1DoB,EAAQoB,SAASC,YAAY,CAC3BnC,MAAOA,GAAON,MACdS,SAAUA,GAAUT,MACpBL,WA6CG8B,SAAA,cAIHJ,EAAAA,KAACqB,EAAA,CAAMT,UAAU,OAAO,oBAAkB,OACvCR,SAAA,EAACZ,EAAc8B,cAAWC,EAAA,CAAA,GAC3BlB,EAAAA,IAACmB,EAAA,CACCzB,UACA0B,aAAcC,EACdC,SAAUnC,EAAc8B,OACxBjD,YACAuD,SAAU,CAAErD,MAAOiB,UAGvBQ,KAAC6B,EAAA,CAAQC,OAAO,UACd1B,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOO,UAAU,eAAeR,SAAA,SAAa,wGAGhDC,IAACI,EAAA,CAAcC,IAAI,uDAGzB,CAlGA3B,EAAUD,QAAQL"}
+{"version":3,"file":"ImperativeApiRoute-BAWsk-vD.js","sources":["../../lib/components/list/useListRef.ts","../../src/routes/list/examples/rowHeight.example.ts","../../src/routes/list/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { ListImperativeAPI } from \"./types\";\n\n/**\n * Convenience hook to return a properly typed ref for the List component.\n */\nexport const useListRef = useRef as typeof useRef<ListImperativeAPI>;\n","import type { RowProps } from \"./ListVariableRowHeights.example\";\n\n// <begin>\n\nfunction rowHeight(index: number, { items }: RowProps) {\n  return items[index].type === \"state\" ? 30 : 25;\n}\n\n// <end>\n\nexport { rowHeight };\n","import { useMemo, useState } from \"react\";\nimport { List, useListRef, type Align } from \"react-window\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { RowComponent } from \"./examples/ListVariableRowHeights.example\";\nimport { rowHeight } from \"./examples/rowHeight.example\";\nimport { useCitiesByState } from \"./hooks/useCitiesByState\";\n\nconst EMPTY_OPTION: Option<string> = {\n  label: \"\",\n  value: \"\"\n};\n\nconst ALIGNMENTS: Option<Align>[] = (\n  [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n  label: `align: ${value}`,\n  value\n}));\nALIGNMENTS.unshift(EMPTY_OPTION as Option<Align>);\n\nconst BEHAVIORS: Option<ScrollBehavior>[] = (\n  [\"auto\", \"instant\", \"smooth\"] satisfies ScrollBehavior[]\n).map((value) => ({\n  label: `behavior: ${value}`,\n  value\n}));\nBEHAVIORS.unshift(EMPTY_OPTION as Option<ScrollBehavior>);\n\nexport default function ListImperativeApiRoute() {\n  const [align, setAlign] = useState<Option<Align> | undefined>();\n  const [behavior, setBehavior] = useState<\n    Option<ScrollBehavior> | undefined\n  >();\n  const [state, setState] = useState<Option<string>>(EMPTY_OPTION);\n\n  const citiesByState = useCitiesByState();\n\n  const stateOptions = useMemo<Option<string>[]>(() => {\n    const options: Option<string>[] = citiesByState\n      .filter((item) => item.type === \"state\")\n      .map((item) => ({\n        label: item.state,\n        value: item.state\n      }));\n    options.unshift(EMPTY_OPTION);\n\n    return options;\n  }, [citiesByState]);\n\n  const listRef = useListRef(null);\n\n  const scrollToRow = () => {\n    const index = citiesByState.findIndex(\n      (item) => item.type === \"state\" && item.state === state.value\n    );\n    listRef.current?.scrollToRow({\n      align: align?.value,\n      behavior: behavior?.value,\n      index\n    });\n  };\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Imperative API\" />\n      <div>\n        List provides an imperative API for responding to events. The\n        recommended way to access this API is to use the exported ref hook:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/useListRefImport.json\" />\n      <div>Attach the ref during render:</div>\n      <FormattedCode url=\"/generated/code-snippets/useListRef.json\" />\n      <div>And call API methods in an event handler:</div>\n      <FormattedCode url=\"/generated/code-snippets/listRefClickEventHandler.json\" />\n      <div>The form below uses the imperative API to scroll the list:</div>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setAlign}\n          options={ALIGNMENTS}\n          placeholder=\"Align\"\n          value={align}\n        />\n        <Select\n          className=\"flex-1\"\n          onChange={setBehavior}\n          options={BEHAVIORS}\n          placeholder=\"Scroll behavior\"\n          value={behavior}\n        />\n      </Box>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setState}\n          options={stateOptions}\n          placeholder=\"State\"\n          value={state}\n        />\n        <Button\n          className=\"shrink-0\"\n          disabled={!state.value}\n          onClick={scrollToRow}\n        >\n          Scroll\n        </Button>\n      </Box>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!citiesByState.length && <LoadingSpinner />}\n        <List\n          listRef={listRef}\n          rowComponent={RowComponent}\n          rowCount={citiesByState.length}\n          rowHeight={rowHeight}\n          rowProps={{ items: citiesByState }}\n        />\n      </Block>\n      <Callout intent=\"primary\">\n        <strong className=\"text-sky-300\">Note</strong> If you are passing the\n        ref to another component or hook, use the ref callback function instead.\n      </Callout>\n      <FormattedCode url=\"/generated/code-snippets/useListCallbackRef.json\" />\n    </Box>\n  );\n}\n"],"names":["useListRef","useRef","rowHeight","index","items","type","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","ListImperativeApiRoute","align","setAlign","useState","behavior","setBehavior","state","setState","citiesByState","useCitiesByState","stateOptions","useMemo","options","filter","item","listRef","jsxs","Box","direction","gap","children","jsx","Header","section","title","FormattedCode","url","Select","className","onChange","placeholder","Button","disabled","onClick","findIndex","current","scrollToRow","Block","length","LoadingSpinner","List","rowComponent","RowComponent","rowCount","rowProps","Callout","intent"],"mappings":"8XAMO,MAAMA,EAAaC,EAAAA,OCF1B,SAASC,EAAUC,GAAeC,MAAEA,IAClC,MAA6B,UAAtBA,EAAMD,GAAOE,KAAmB,GAAK,EAC9C,CCQA,MAAMC,EAA+B,CACnCC,MAAO,GACPC,MAAO,IAGHC,EACJ,CAAC,OAAQ,SAAU,MAAO,QAAS,SACnCC,IAAKF,IAAA,CACLD,MAAO,UAAUC,IACjBA,WAEFC,EAAWE,QAAQL,GAEnB,MAAMM,EACJ,CAAC,OAAQ,UAAW,UACpBF,IAAKF,IAAA,CACLD,MAAO,aAAaC,IACpBA,WAIF,SAAwBK,IACtB,MAAOC,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAOC,GAAYJ,EAAAA,SAAyBV,GAE7Ce,EAAgBC,IAEhBC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4BJ,EAC/BK,OAAQC,GAAuB,UAAdA,EAAKtB,MACtBK,IAAKiB,IAAA,CACJpB,MAAOoB,EAAKR,MACZX,MAAOmB,EAAKR,SAIhB,OAFAM,EAAQd,QAAQL,GAETmB,GACN,CAACJ,IAEEO,EAAU5B,EAAW,MAa3B,OACE6B,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQC,MAAM,qBAC9BH,IAAC,OAAID,SAAA,wIAILC,IAACI,EAAA,CAAcC,IAAI,qDACnBL,IAAC,OAAID,SAAA,oCACLC,IAACI,EAAA,CAAcC,IAAI,+CACnBL,IAAC,OAAID,SAAA,gDACLC,IAACI,EAAA,CAAcC,IAAI,6DACnBL,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACM,EAAA,CACCC,UAAU,SACVC,SAAU3B,EACVU,QAAShB,EACTkC,YAAY,QACZnC,MAAOM,IAEToB,EAAAA,IAACM,EAAA,CACCC,UAAU,SACVC,SAAUxB,EACVO,QAASb,EACT+B,YAAY,kBACZnC,MAAOS,OAGXY,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACM,EAAA,CACCC,UAAU,SACVC,SAAUtB,EACVK,QAASF,EACToB,YAAY,QACZnC,MAAOW,IAETe,EAAAA,IAACU,EAAA,CACCH,UAAU,WACVI,UAAW1B,EAAMX,MACjBsC,QAnDY,KAClB,MAAM3C,EAAQkB,EAAc0B,UACzBpB,GAAuB,UAAdA,EAAKtB,MAAoBsB,EAAKR,QAAUA,EAAMX,OAE1DoB,EAAQoB,SAASC,YAAY,CAC3BnC,MAAOA,GAAON,MACdS,SAAUA,GAAUT,MACpBL,WA6CG8B,SAAA,cAIHJ,EAAAA,KAACqB,EAAA,CAAMT,UAAU,OAAO,oBAAkB,OACvCR,SAAA,EAACZ,EAAc8B,cAAWC,EAAA,CAAA,GAC3BlB,EAAAA,IAACmB,EAAA,CACCzB,UACA0B,aAAcC,EACdC,SAAUnC,EAAc8B,OACxBjD,YACAuD,SAAU,CAAErD,MAAOiB,UAGvBQ,KAAC6B,EAAA,CAAQC,OAAO,UACd1B,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOO,UAAU,eAAeR,SAAA,SAAa,wGAGhDC,IAACI,EAAA,CAAcC,IAAI,uDAGzB,CAlGA3B,EAAUD,QAAQL"}

package/docs/assets/{ImperativeApiRoute-DD9Z7HWg.js → ImperativeApiRoute-DQIcyOMg.js}

@@ -1,2 +1,2 @@
-import{r as e,j as o,B as s,a as l,C as a}from"./index-B_YQ7rlN.js";import{G as n}from"./Grid-DH-j7ODh.js";import{B as r}from"./arePropsEqual-D3jAKwxp.js";import{F as t}from"./FormattedCode-CAmuOSRw.js";import{H as i}from"./Header-BYp8JKXz.js";import{S as d}from"./Select-C5ovWBbK.js";import{C as c}from"./CellComponent.example-e4JJmmZM.js";import{u,C as h,c as m}from"./useContacts-BItVOkyi.js";import{L as p}from"./LoadingSpinner-Z5HQViRD.js";const v=e.useRef,x={label:"",value:""},j=["auto","center","end","smart","start"].map(e=>({label:`align: ${e}`,value:e}));j.unshift(x);const f=["auto","instant","smooth"].map(e=>({label:`behavior: ${e}`,value:e}));f.unshift(x);const g=h.map(e=>({label:e,value:e})).sort((e,o)=>e.label.localeCompare(o.label));function C(){const C=u(),b=e.useMemo(()=>{const e=[];return C&&(C.reduce((e,o)=>(e.includes(o.title)||e.push(o.title),e),new Array).sort().forEach(o=>{e.push({label:o,value:o})}),e.unshift(x)),e},[C]),[w,A]=e.useState(),[I,S]=e.useState(),[k,G]=e.useState(x),[N,P]=e.useState(x),R=v(null);return o.jsxs(s,{direction:"column",gap:4,children:[o.jsx(i,{section:"Grids",title:"Imperative API"}),o.jsx("div",{children:"Grid provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),o.jsx(t,{url:"/generated/code-snippets/useGridRefImport.json"}),o.jsx("div",{children:"Attach the ref during render:"}),o.jsx(t,{url:"/generated/code-snippets/useGridRef.json"}),o.jsx("div",{children:"And call API methods in an event handler:"}),o.jsx(t,{url:"/generated/code-snippets/gridRefClickEventHandler.json"}),o.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),o.jsxs(s,{direction:"row",gap:4,children:[o.jsx(d,{className:"flex-1",onChange:A,options:j,placeholder:"Align",value:w}),o.jsx(d,{className:"flex-1",onChange:S,options:f,placeholder:"Scroll behavior",value:I})]}),o.jsxs(s,{direction:"row",gap:4,children:[o.jsx(d,{className:"flex-1",onChange:P,options:b,placeholder:"Job title",value:N}),o.jsx(d,{className:"flex-1",onChange:G,options:g,placeholder:"Column",value:k}),o.jsx(l,{className:"shrink-0",disabled:!k.value&&!N.value,onClick:()=>{const e=R.current;if(e){const o=k?.value?h.indexOf(k.value):void 0,s=N?.value?C.findIndex(e=>e.title===N.value):void 0;void 0!==o&&void 0!==s?e.scrollToCell({behavior:I?.value,columnAlign:w?.value,columnIndex:o,rowAlign:w?.value,rowIndex:s}):void 0!==o?e.scrollToColumn({align:w?.value,behavior:I?.value,index:o}):void 0!==s&&e.scrollToRow({align:w?.value,behavior:I?.value,index:s})}},children:"Scroll"})]}),o.jsxs(r,{className:"h-50","data-focus-within":"bold",children:[!C.length&&o.jsx(p,{}),o.jsx(n,{cellComponent:c,cellProps:{contacts:C},columnCount:g.length,columnWidth:m,gridRef:R,rowCount:C.length,rowHeight:25})]}),o.jsxs("div",{children:["The Grid API also provides ",o.jsx("code",{children:"scrollToColumn"})," and"," ",o.jsx("code",{children:"scrollToRow"})," methods for single-axis scrolling."]}),o.jsxs(a,{intent:"primary",children:[o.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),o.jsx(t,{url:"/generated/code-snippets/useGridCallbackRef.json"})]})}export{C as default};
-//# sourceMappingURL=ImperativeApiRoute-DD9Z7HWg.js.map
+import{r as e,j as o,B as s,a as l,C as a}from"./index-6dOV2kLd.js";import{G as n}from"./Grid-BmNZGHKY.js";import{B as r}from"./arePropsEqual-J86giKVT.js";import{F as t}from"./FormattedCode-Bgu5KYpx.js";import{H as i}from"./Header-D5XYa_k5.js";import{S as d}from"./Select-DYzOjrIR.js";import{C as c}from"./CellComponent.example-B6rd3A81.js";import{u,C as h,c as m}from"./useContacts-QMK0xyhD.js";import{L as p}from"./LoadingSpinner-C5G0kF8B.js";const v=e.useRef,x={label:"",value:""},j=["auto","center","end","smart","start"].map(e=>({label:`align: ${e}`,value:e}));j.unshift(x);const f=["auto","instant","smooth"].map(e=>({label:`behavior: ${e}`,value:e}));f.unshift(x);const g=h.map(e=>({label:e,value:e})).sort((e,o)=>e.label.localeCompare(o.label));function C(){const C=u(),b=e.useMemo(()=>{const e=[];return C&&(C.reduce((e,o)=>(e.includes(o.title)||e.push(o.title),e),new Array).sort().forEach(o=>{e.push({label:o,value:o})}),e.unshift(x)),e},[C]),[w,A]=e.useState(),[I,S]=e.useState(),[k,G]=e.useState(x),[N,P]=e.useState(x),R=v(null);return o.jsxs(s,{direction:"column",gap:4,children:[o.jsx(i,{section:"Grids",title:"Imperative API"}),o.jsx("div",{children:"Grid provides an imperative API for responding to events. The recommended way to access this API is to use the exported ref hook:"}),o.jsx(t,{url:"/generated/code-snippets/useGridRefImport.json"}),o.jsx("div",{children:"Attach the ref during render:"}),o.jsx(t,{url:"/generated/code-snippets/useGridRef.json"}),o.jsx("div",{children:"And call API methods in an event handler:"}),o.jsx(t,{url:"/generated/code-snippets/gridRefClickEventHandler.json"}),o.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),o.jsxs(s,{direction:"row",gap:4,children:[o.jsx(d,{className:"flex-1",onChange:A,options:j,placeholder:"Align",value:w}),o.jsx(d,{className:"flex-1",onChange:S,options:f,placeholder:"Scroll behavior",value:I})]}),o.jsxs(s,{direction:"row",gap:4,children:[o.jsx(d,{className:"flex-1",onChange:P,options:b,placeholder:"Job title",value:N}),o.jsx(d,{className:"flex-1",onChange:G,options:g,placeholder:"Column",value:k}),o.jsx(l,{className:"shrink-0",disabled:!k.value&&!N.value,onClick:()=>{const e=R.current;if(e){const o=k?.value?h.indexOf(k.value):void 0,s=N?.value?C.findIndex(e=>e.title===N.value):void 0;void 0!==o&&void 0!==s?e.scrollToCell({behavior:I?.value,columnAlign:w?.value,columnIndex:o,rowAlign:w?.value,rowIndex:s}):void 0!==o?e.scrollToColumn({align:w?.value,behavior:I?.value,index:o}):void 0!==s&&e.scrollToRow({align:w?.value,behavior:I?.value,index:s})}},children:"Scroll"})]}),o.jsxs(r,{className:"h-50","data-focus-within":"bold",children:[!C.length&&o.jsx(p,{}),o.jsx(n,{cellComponent:c,cellProps:{contacts:C},columnCount:g.length,columnWidth:m,gridRef:R,rowCount:C.length,rowHeight:25})]}),o.jsxs("div",{children:["The Grid API also provides ",o.jsx("code",{children:"scrollToColumn"})," and"," ",o.jsx("code",{children:"scrollToRow"})," methods for single-axis scrolling."]}),o.jsxs(a,{intent:"primary",children:[o.jsx("strong",{className:"text-sky-300",children:"Note"})," If you are passing the ref to another component or hook, use the ref callback function instead."]}),o.jsx(t,{url:"/generated/code-snippets/useGridCallbackRef.json"})]})}export{C as default};
+//# sourceMappingURL=ImperativeApiRoute-DQIcyOMg.js.map

package/docs/assets/ImperativeApiRoute-DQIcyOMg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImperativeApiRoute-DQIcyOMg.js","sources":["../../lib/components/grid/useGridRef.ts","../../src/routes/grid/ImperativeApiRoute.tsx"],"sourcesContent":["import { useRef } from \"react\";\nimport type { GridImperativeAPI } from \"./types\";\n\n/**\n * Convenience hook to return a properly typed ref for the Grid component.\n */\nexport const useGridRef = useRef as typeof useRef<GridImperativeAPI>;\n","import { useMemo, useState } from \"react\";\nimport { Grid, useGridRef, type Align } from \"react-window\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { Header } from \"../../components/Header\";\nimport { Select, type Option } from \"../../components/Select\";\nimport { CellComponent } from \"./examples/CellComponent.example\";\nimport { columnWidth } from \"./examples/columnWidth.example\";\nimport type { Contact } from \"./examples/Grid.example\";\nimport { COLUMN_KEYS } from \"./examples/shared\";\nimport { useContacts } from \"./hooks/useContacts\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\n\nconst EMPTY_OPTION: Option<string> = {\n  label: \"\",\n  value: \"\"\n};\n\nconst ALIGNMENTS: Option<Align>[] = (\n  [\"auto\", \"center\", \"end\", \"smart\", \"start\"] satisfies Align[]\n).map((value) => ({\n  label: `align: ${value}`,\n  value\n}));\nALIGNMENTS.unshift(EMPTY_OPTION as Option<Align>);\n\nconst BEHAVIORS: Option<ScrollBehavior>[] = (\n  [\"auto\", \"instant\", \"smooth\"] satisfies ScrollBehavior[]\n).map((value) => ({\n  label: `behavior: ${value}`,\n  value\n}));\nBEHAVIORS.unshift(EMPTY_OPTION as Option<ScrollBehavior>);\n\nconst COLUMNS: Option<string>[] = COLUMN_KEYS.map((key) => ({\n  label: key,\n  value: key\n})).sort((a, b) => a.label.localeCompare(b.label));\n\nexport default function GridImperativeApiRoute() {\n  const contacts = useContacts();\n\n  const titleOptions = useMemo<Option<string>[]>(() => {\n    const options: Option<string>[] = [];\n    if (contacts) {\n      contacts\n        .reduce((array, contact) => {\n          if (!array.includes(contact.title)) {\n            array.push(contact.title);\n          }\n          return array;\n        }, new Array<string>())\n        .sort()\n        .forEach((title) => {\n          options.push({\n            label: title,\n            value: title\n          });\n        });\n\n      options.unshift(EMPTY_OPTION);\n    }\n\n    return options;\n  }, [contacts]);\n\n  const [align, setAlign] = useState<Option<Align> | undefined>();\n  const [behavior, setBehavior] = useState<\n    Option<ScrollBehavior> | undefined\n  >();\n  const [column, setColumn] = useState<Option<string>>(EMPTY_OPTION);\n  const [title, setTitle] = useState<Option<string>>(EMPTY_OPTION);\n\n  const gridRef = useGridRef(null);\n\n  const scrollToCell = () => {\n    const grid = gridRef.current;\n    if (grid) {\n      const columnIndex = column?.value\n        ? COLUMN_KEYS.indexOf(column.value as keyof Contact)\n        : undefined;\n\n      const rowIndex = title?.value\n        ? contacts.findIndex((row) => row.title === title.value)\n        : undefined;\n\n      if (columnIndex !== undefined && rowIndex !== undefined) {\n        grid.scrollToCell({\n          behavior: behavior?.value,\n          columnAlign: align?.value,\n          columnIndex,\n          rowAlign: align?.value,\n          rowIndex\n        });\n      } else if (columnIndex !== undefined) {\n        grid.scrollToColumn({\n          align: align?.value,\n          behavior: behavior?.value,\n          index: columnIndex\n        });\n      } else if (rowIndex !== undefined) {\n        grid.scrollToRow({\n          align: align?.value,\n          behavior: behavior?.value,\n          index: rowIndex\n        });\n      }\n    }\n  };\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Grids\" title=\"Imperative API\" />\n      <div>\n        Grid provides an imperative API for responding to events. The\n        recommended way to access this API is to use the exported ref hook:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/useGridRefImport.json\" />\n      <div>Attach the ref during render:</div>\n      <FormattedCode url=\"/generated/code-snippets/useGridRef.json\" />\n      <div>And call API methods in an event handler:</div>\n      <FormattedCode url=\"/generated/code-snippets/gridRefClickEventHandler.json\" />\n      <div>The form below uses the imperative API to scroll the list:</div>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setAlign}\n          options={ALIGNMENTS}\n          placeholder=\"Align\"\n          value={align}\n        />\n        <Select\n          className=\"flex-1\"\n          onChange={setBehavior}\n          options={BEHAVIORS}\n          placeholder=\"Scroll behavior\"\n          value={behavior}\n        />\n      </Box>\n      <Box direction=\"row\" gap={4}>\n        <Select\n          className=\"flex-1\"\n          onChange={setTitle}\n          options={titleOptions}\n          placeholder=\"Job title\"\n          value={title}\n        />\n        <Select\n          className=\"flex-1\"\n          onChange={setColumn}\n          options={COLUMNS}\n          placeholder=\"Column\"\n          value={column}\n        />\n        <Button\n          className=\"shrink-0\"\n          disabled={!column.value && !title.value}\n          onClick={scrollToCell}\n        >\n          Scroll\n        </Button>\n      </Box>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <Grid\n          cellComponent={CellComponent}\n          cellProps={{ contacts }}\n          columnCount={COLUMNS.length}\n          columnWidth={columnWidth}\n          gridRef={gridRef}\n          rowCount={contacts.length}\n          rowHeight={25}\n        />\n      </Block>\n      <div>\n        The Grid API also provides <code>scrollToColumn</code> and{\" \"}\n        <code>scrollToRow</code> methods for single-axis scrolling.\n      </div>\n      <Callout intent=\"primary\">\n        <strong className=\"text-sky-300\">Note</strong> If you are passing the\n        ref to another component or hook, use the ref callback function instead.\n      </Callout>\n      <FormattedCode url=\"/generated/code-snippets/useGridCallbackRef.json\" />\n    </Box>\n  );\n}\n"],"names":["useGridRef","useRef","EMPTY_OPTION","label","value","ALIGNMENTS","map","unshift","BEHAVIORS","COLUMNS","COLUMN_KEYS","key","sort","a","b","localeCompare","GridImperativeApiRoute","contacts","useContacts","titleOptions","useMemo","options","reduce","array","contact","includes","title","push","Array","forEach","align","setAlign","useState","behavior","setBehavior","column","setColumn","setTitle","gridRef","jsxs","Box","direction","gap","children","jsx","Header","section","FormattedCode","url","Select","className","onChange","placeholder","Button","disabled","onClick","grid","current","columnIndex","indexOf","rowIndex","findIndex","row","scrollToCell","columnAlign","rowAlign","scrollToColumn","index","scrollToRow","Block","length","LoadingSpinner","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","rowHeight","Callout","intent"],"mappings":"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"}

package/docs/assets/List-C7ANWJ5i.js

@@ -0,0 +1,2 @@
+import{r as e,j as t}from"./index-6dOV2kLd.js";import{u as o,a as s,b as n}from"./arePropsEqual-J86giKVT.js";function r({className:r,defaultHeight:i=0,listRef:l,onResize:a,onRowsRendered:c,overscanCount:u=3,rowComponent:d,rowCount:m,rowHeight:f,rowProps:p,style:x,...h}){const g=o(p),v=e.useMemo(()=>e.memo(d,s),[d]),[w,C]=e.useState(null),{getCellBounds:y,getEstimatedSize:z,scrollToIndex:I,startIndex:R,stopIndex:j}=n({containerElement:w,defaultContainerSize:i,direction:"vertical",itemCount:m,itemProps:g,itemSize:f,onResize:a,overscanCount:u});e.useImperativeHandle(l,()=>({get element(){return w},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const s=I({align:e,containerScrollOffset:w?.scrollTop??0,index:o});"function"==typeof w?.scrollTo&&w.scrollTo({behavior:t,top:s})}}),[w,I]),e.useEffect(()=>{R>=0&&j>=0&&c&&c({startIndex:R,stopIndex:j})},[c,R,j]);const E=e.useMemo(()=>{const t=[];if(m>0)for(let o=R;o<=j;o++){const s=y(o);t.push(e.createElement(v,{...g,key:o,index:o,style:{position:"absolute",left:0,transform:`translateY(${s.scrollOffset}px)`,height:s.size,width:"100%"}}))}return t},[v,y,m,g,R,j]);return t.jsx("div",{...h,className:r,ref:C,style:{...x,maxHeight:"100%",flexGrow:1,overflowY:"auto"},children:t.jsx("div",{className:r,style:{height:z(),position:"relative",width:"100%"},children:E})})}export{r as L};
+//# sourceMappingURL=List-C7ANWJ5i.js.map

package/docs/assets/List-C7ANWJ5i.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List-C7ANWJ5i.js","sources":["../../lib/components/list/List.tsx"],"sourcesContent":["import {\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type ReactNode\n} from \"react\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { ListProps } from \"./types\";\n\nexport function List<RowProps extends object>({\n  className,\n  defaultHeight = 0,\n  listRef,\n  onResize,\n  onRowsRendered,\n  overscanCount = 3,\n  rowComponent: RowComponentProp,\n  rowCount,\n  rowHeight,\n  rowProps: rowPropsUnstable,\n  style,\n  ...rest\n}: ListProps<RowProps>) {\n  const rowProps = useMemoizedObject(rowPropsUnstable);\n  const RowComponent = useMemo(\n    () => memo(RowComponentProp, arePropsEqual),\n    [RowComponentProp]\n  );\n\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n  const {\n    getCellBounds,\n    getEstimatedSize,\n    scrollToIndex,\n    startIndex,\n    stopIndex\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultHeight,\n    direction: \"vertical\",\n    itemCount: rowCount,\n    itemProps: rowProps,\n    itemSize: rowHeight,\n    onResize,\n    overscanCount\n  });\n\n  useImperativeHandle(\n    listRef,\n    () => ({\n      get element() {\n        return element;\n      },\n\n      scrollToRow({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const top = scrollToIndex({\n          align,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            top\n          });\n        }\n      }\n    }),\n    [element, scrollToIndex]\n  );\n\n  useEffect(() => {\n    if (startIndex >= 0 && stopIndex >= 0 && onRowsRendered) {\n      onRowsRendered({\n        startIndex,\n        stopIndex\n      });\n    }\n  }, [onRowsRendered, startIndex, stopIndex]);\n\n  const rows = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (rowCount > 0) {\n      for (let index = startIndex; index <= stopIndex; index++) {\n        const bounds = getCellBounds(index);\n\n        children.push(\n          <RowComponent\n            {...(rowProps as RowProps)}\n            key={index}\n            index={index}\n            style={{\n              position: \"absolute\",\n              left: 0,\n              transform: `translateY(${bounds.scrollOffset}px)`,\n              height: bounds.size,\n              width: \"100%\"\n            }}\n          />\n        );\n      }\n    }\n    return children;\n  }, [RowComponent, getCellBounds, rowCount, rowProps, startIndex, stopIndex]);\n\n  return (\n    <div\n      {...rest}\n      className={className}\n      ref={setElement}\n      style={{\n        ...style,\n        maxHeight: \"100%\",\n        flexGrow: 1,\n        overflowY: \"auto\"\n      }}\n    >\n      <div\n        className={className}\n        style={{\n          height: getEstimatedSize(),\n          position: \"relative\",\n          width: \"100%\"\n        }}\n      >\n        {rows}\n      </div>\n    </div>\n  );\n}\n"],"names":["List","className","defaultHeight","listRef","onResize","onRowsRendered","overscanCount","rowComponent","RowComponentProp","rowCount","rowHeight","rowProps","rowPropsUnstable","style","rest","useMemoizedObject","RowComponent","useMemo","memo","arePropsEqual","element","setElement","useState","getCellBounds","getEstimatedSize","scrollToIndex","startIndex","stopIndex","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","useImperativeHandle","scrollToRow","align","behavior","index","top","containerScrollOffset","scrollTop","scrollTo","useEffect","rows","children","bounds","push","createElement","key","position","left","transform","scrollOffset","height","size","width","jsx","ref","maxHeight","flexGrow","overflowY"],"mappings":"6GAcO,SAASA,GAA8BC,UAC5CA,EAAAC,cACAA,EAAgB,EAAAC,QAChBA,EAAAC,SACAA,EAAAC,eACAA,EAAAC,cACAA,EAAgB,EAChBC,aAAcC,EAAAC,SACdA,EAAAC,UACAA,EACAC,SAAUC,EAAAC,MACVA,KACGC,IAEH,MAAMH,EAAWI,EAAkBH,GAC7BI,EAAeC,EAAAA,QACnB,IAAMC,EAAAA,KAAKV,EAAkBW,GAC7B,CAACX,KAGIY,EAASC,GAAcC,EAAAA,SAAgC,OAExDC,cACJA,EAAAC,iBACAA,EAAAC,cACAA,EAAAC,WACAA,EAAAC,UACAA,GACEC,EAAe,CACjBC,iBAAkBT,EAClBU,qBAAsB5B,EACtB6B,UAAW,WACXC,UAAWvB,EACXwB,UAAWtB,EACXuB,SAAUxB,EACVN,WACAE,kBAGF6B,EAAAA,oBACEhC,EACA,KAAA,CACE,WAAIiB,GACF,OAAOA,CACT,EAEA,WAAAgB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMf,EAAc,CACxBY,QACAI,sBAAuBrB,GAASsB,WAAa,EAC7CH,UAG+B,mBAAtBnB,GAASuB,UAClBvB,EAAQuB,SAAS,CACfL,WACAE,OAGN,IAEF,CAACpB,EAASK,IAGZmB,EAAAA,UAAU,KACJlB,GAAc,GAAKC,GAAa,GAAKtB,GACvCA,EAAe,CACbqB,aACAC,eAGH,CAACtB,EAAgBqB,EAAYC,IAEhC,MAAMkB,EAAO5B,EAAAA,QAAQ,KACnB,MAAM6B,EAAwB,GAC9B,GAAIrC,EAAW,EACb,IAAA,IAAS8B,EAAQb,EAAYa,GAASZ,EAAWY,IAAS,CACxD,MAAMQ,EAASxB,EAAcgB,GAE7BO,EAASE,KACPC,EAAAA,cAACjC,EAAA,IACML,EACLuC,IAAKX,EACLA,QACA1B,MAAO,CACLsC,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcN,EAAOO,kBAChCC,OAAQR,EAAOS,KACfC,MAAO,UAIf,CAEF,OAAOX,GACN,CAAC9B,EAAcO,EAAed,EAAUE,EAAUe,EAAYC,IAEjE,OACE+B,EAAAA,IAAC,MAAA,IACK5C,EACJb,YACA0D,IAAKtC,EACLR,MAAO,IACFA,EACH+C,UAAW,OACXC,SAAU,EACVC,UAAW,QAGbhB,SAAAY,EAAAA,IAAC,MAAA,CACCzD,YACAY,MAAO,CACL0C,OAAQ/B,IACR2B,SAAU,WACVM,MAAO,QAGRX,SAAAD,KAIT"}

package/docs/assets/{LoadingSpinner-Z5HQViRD.js → LoadingSpinner-C5G0kF8B.js}

@@ -1,2 +1,2 @@
-import{r as e,j as t,B as r}from"./index-B_YQ7rlN.js";function a({title:t,titleId:r,...a},n){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":r},a),t?e.createElement("title",{id:r},t):null,e.createElement("path",{fillRule:"evenodd",d:"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z",clipRule:"evenodd"}))}const n=e.forwardRef(a);function o(t){const[r,a]=e.useState(),[n,o]=e.useState(null);if(n)throw n;return e.useEffect(()=>{const e=new AbortController;return(async()=>{try{const r=await fetch(t,{signal:e.signal});if(!e.signal.aborted){const t=await r.json();e.signal.aborted||a(t)}}catch(r){if(r instanceof Error&&"AbortError"===r?.name)return;console.error("Error thrown for URL: %o\n\n%o",t,r),o(r)}})(),()=>{const t=new Error;t.name="AbortError",e.abort(t)}},[t]),r}function l(){return t.jsxs(r,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[t.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{l as L,o as u};
-//# sourceMappingURL=LoadingSpinner-Z5HQViRD.js.map
+import{r as e,j as t,B as r}from"./index-6dOV2kLd.js";function a({title:t,titleId:r,...a},n){return e.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true","data-slot":"icon",ref:n,"aria-labelledby":r},a),t?e.createElement("title",{id:r},t):null,e.createElement("path",{fillRule:"evenodd",d:"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z",clipRule:"evenodd"}))}const n=e.forwardRef(a);function o(t){const[r,a]=e.useState(),[n,o]=e.useState(null);if(n)throw n;return e.useEffect(()=>{const e=new AbortController;return(async()=>{try{const r=await fetch(t,{signal:e.signal});if(!e.signal.aborted){const t=await r.json();e.signal.aborted||a(t)}}catch(r){if(r instanceof Error&&"AbortError"===r?.name)return;console.error("Error thrown for URL: %o\n\n%o",t,r),o(r)}})(),()=>{const t=new Error;t.name="AbortError",e.abort(t)}},[t]),r}function l(){return t.jsxs(r,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[t.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{l as L,o as u};
+//# sourceMappingURL=LoadingSpinner-C5G0kF8B.js.map

package/docs/assets/{LoadingSpinner-Z5HQViRD.js.map → LoadingSpinner-C5G0kF8B.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner-Z5HQViRD.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../src/hooks/useJSONData.ts","../../src/components/LoadingSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowPathIcon({\n  title,\n  titleId,\n  ...props\n}, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\",\n    ref: svgRef,\n    \"aria-labelledby\": titleId\n  }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n    id: titleId\n  }, title) : null, /*#__PURE__*/React.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    d: \"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nconst ForwardRef = /*#__PURE__*/ React.forwardRef(ArrowPathIcon);\nexport default ForwardRef;","import { useEffect, useState } from \"react\";\n\nexport function useJSONData<Type extends object>(url: string) {\n  const [json, setJSON] = useState<Type | undefined>();\n  const [error, setError] = useState<unknown>(null);\n\n  if (error) {\n    throw error;\n  }\n\n  useEffect(() => {\n    const abortController = new AbortController();\n\n    (async () => {\n      try {\n        const data = await fetch(url, {\n          signal: abortController.signal\n        });\n        if (!abortController.signal.aborted) {\n          const json = await data.json();\n          if (!abortController.signal.aborted) {\n            setJSON(json as Type);\n          }\n        }\n      } catch (error) {\n        if (error instanceof Error && error?.name === \"AbortError\") {\n          return;\n        }\n\n        console.error(\"Error thrown for URL: %o\\n\\n%o\", url, error);\n\n        setError(error);\n      }\n    })();\n\n    return () => {\n      const error = new Error();\n      error.name = \"AbortError\";\n\n      abortController.abort(error);\n    };\n  }, [url]);\n\n  return json;\n}\n","import { ArrowPathIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\n\nexport function LoadingSpinner() {\n  return (\n    <Box align=\"center\" className=\"text-slate-300\" direction=\"row\" gap={2}>\n      <ArrowPathIcon className=\"size-4 animate-spin\" />\n      Loading...\n    </Box>\n  );\n}\n"],"names":["ArrowPathIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","useJSONData","url","json","setJSON","useState","error","setError","useEffect","abortController","AbortController","data","fetch","signal","aborted","Error","name","console","abort","LoadingSpinner","jsxs","Box","align","className","direction","gap","children","jsx"],"mappings":"sDACA,SAASA,GAAcC,MACrBA,EAAAC,QACAA,KACGC,GACFC,GACD,OAAoBC,gBAAoB,MAAOC,OAAOC,OAAO,CAC3DC,MAAO,6BACPC,QAAS,YACTC,KAAM,eACN,cAAe,OACf,YAAa,OACbC,IAAKP,EACL,kBAAmBF,GAClBC,GAAQF,EAAqBI,EAAAA,cAAoB,QAAS,CAC3DO,GAAIV,GACHD,GAAS,KAAmBI,EAAAA,cAAoB,OAAQ,CACzDQ,SAAU,UACVC,EAAG,0YACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,GCpB3C,SAASkB,EAAiCC,GAC/C,MAAOC,EAAMC,GAAWC,cACjBC,EAAOC,GAAYF,EAAAA,SAAkB,MAE5C,GAAIC,EACF,MAAMA,EAoCR,OAjCAE,EAAAA,UAAU,KACR,MAAMC,EAAkB,IAAIC,gBAwB5B,MAtBA,WACE,IACE,MAAMC,QAAaC,MAAMV,EAAK,CAC5BW,OAAQJ,EAAgBI,SAE1B,IAAKJ,EAAgBI,OAAOC,QAAS,CACnC,MAAMX,QAAaQ,EAAKR,OACnBM,EAAgBI,OAAOC,SAC1BV,EAAQD,EAEZ,CACF,OAASG,GACP,GAAIA,aAAiBS,OAAyB,eAAhBT,GAAOU,KACnC,OAGFC,QAAQX,MAAM,iCAAkCJ,EAAKI,GAErDC,EAASD,EACX,CACF,EApBA,GAsBO,KACL,MAAMA,EAAQ,IAAIS,MAClBT,EAAMU,KAAO,aAEbP,EAAgBS,MAAMZ,KAEvB,CAACJ,IAEGC,CACT,CCzCO,SAASgB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC5C,EAAA,CAAcwC,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}
+{"version":3,"file":"LoadingSpinner-C5G0kF8B.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../src/hooks/useJSONData.ts","../../src/components/LoadingSpinner.tsx"],"sourcesContent":["import * as React from \"react\";\nfunction ArrowPathIcon({\n  title,\n  titleId,\n  ...props\n}, svgRef) {\n  return /*#__PURE__*/React.createElement(\"svg\", Object.assign({\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\",\n    ref: svgRef,\n    \"aria-labelledby\": titleId\n  }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n    id: titleId\n  }, title) : null, /*#__PURE__*/React.createElement(\"path\", {\n    fillRule: \"evenodd\",\n    d: \"M15.312 11.424a5.5 5.5 0 0 1-9.201 2.466l-.312-.311h2.433a.75.75 0 0 0 0-1.5H3.989a.75.75 0 0 0-.75.75v4.242a.75.75 0 0 0 1.5 0v-2.43l.31.31a7 7 0 0 0 11.712-3.138.75.75 0 0 0-1.449-.39Zm1.23-3.723a.75.75 0 0 0 .219-.53V2.929a.75.75 0 0 0-1.5 0V5.36l-.31-.31A7 7 0 0 0 3.239 8.188a.75.75 0 1 0 1.448.389A5.5 5.5 0 0 1 13.89 6.11l.311.31h-2.432a.75.75 0 0 0 0 1.5h4.243a.75.75 0 0 0 .53-.219Z\",\n    clipRule: \"evenodd\"\n  }));\n}\nconst ForwardRef = /*#__PURE__*/ React.forwardRef(ArrowPathIcon);\nexport default ForwardRef;","import { useEffect, useState } from \"react\";\n\nexport function useJSONData<Type extends object>(url: string) {\n  const [json, setJSON] = useState<Type | undefined>();\n  const [error, setError] = useState<unknown>(null);\n\n  if (error) {\n    throw error;\n  }\n\n  useEffect(() => {\n    const abortController = new AbortController();\n\n    (async () => {\n      try {\n        const data = await fetch(url, {\n          signal: abortController.signal\n        });\n        if (!abortController.signal.aborted) {\n          const json = await data.json();\n          if (!abortController.signal.aborted) {\n            setJSON(json as Type);\n          }\n        }\n      } catch (error) {\n        if (error instanceof Error && error?.name === \"AbortError\") {\n          return;\n        }\n\n        console.error(\"Error thrown for URL: %o\\n\\n%o\", url, error);\n\n        setError(error);\n      }\n    })();\n\n    return () => {\n      const error = new Error();\n      error.name = \"AbortError\";\n\n      abortController.abort(error);\n    };\n  }, [url]);\n\n  return json;\n}\n","import { ArrowPathIcon } from \"@heroicons/react/20/solid\";\nimport { Box } from \"./Box\";\n\nexport function LoadingSpinner() {\n  return (\n    <Box align=\"center\" className=\"text-slate-300\" direction=\"row\" gap={2}>\n      <ArrowPathIcon className=\"size-4 animate-spin\" />\n      Loading...\n    </Box>\n  );\n}\n"],"names":["ArrowPathIcon","title","titleId","props","svgRef","React.createElement","Object","assign","xmlns","viewBox","fill","ref","id","fillRule","d","clipRule","ForwardRef","React.forwardRef","useJSONData","url","json","setJSON","useState","error","setError","useEffect","abortController","AbortController","data","fetch","signal","aborted","Error","name","console","abort","LoadingSpinner","jsxs","Box","align","className","direction","gap","children","jsx"],"mappings":"sDACA,SAASA,GAAcC,MACrBA,EAAAC,QACAA,KACGC,GACFC,GACD,OAAoBC,gBAAoB,MAAOC,OAAOC,OAAO,CAC3DC,MAAO,6BACPC,QAAS,YACTC,KAAM,eACN,cAAe,OACf,YAAa,OACbC,IAAKP,EACL,kBAAmBF,GAClBC,GAAQF,EAAqBI,EAAAA,cAAoB,QAAS,CAC3DO,GAAIV,GACHD,GAAS,KAAmBI,EAAAA,cAAoB,OAAQ,CACzDQ,SAAU,UACVC,EAAG,0YACHC,SAAU,YAEd,CACA,MAAMC,EAA2BC,EAAAA,WAAiBjB,GCpB3C,SAASkB,EAAiCC,GAC/C,MAAOC,EAAMC,GAAWC,cACjBC,EAAOC,GAAYF,EAAAA,SAAkB,MAE5C,GAAIC,EACF,MAAMA,EAoCR,OAjCAE,EAAAA,UAAU,KACR,MAAMC,EAAkB,IAAIC,gBAwB5B,MAtBA,WACE,IACE,MAAMC,QAAaC,MAAMV,EAAK,CAC5BW,OAAQJ,EAAgBI,SAE1B,IAAKJ,EAAgBI,OAAOC,QAAS,CACnC,MAAMX,QAAaQ,EAAKR,OACnBM,EAAgBI,OAAOC,SAC1BV,EAAQD,EAEZ,CACF,OAASG,GACP,GAAIA,aAAiBS,OAAyB,eAAhBT,GAAOU,KACnC,OAGFC,QAAQX,MAAM,iCAAkCJ,EAAKI,GAErDC,EAASD,EACX,CACF,EApBA,GAsBO,KACL,MAAMA,EAAQ,IAAIS,MAClBT,EAAMU,KAAO,aAEbP,EAAgBS,MAAMZ,KAEvB,CAACJ,IAEGC,CACT,CCzCO,SAASgB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC5C,EAAA,CAAcwC,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}

package/docs/assets/{PageNotFound-B0nx-Cz_.js → PageNotFound-CmFn1Y8A.js}

@@ -1,2 +1,2 @@
-import{j as e,B as s,C as n,E as t}from"./index-B_YQ7rlN.js";import{H as i}from"./Header-BYp8JKXz.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(i,{title:"Page not found"}),e.jsxs(n,{intent:"danger",children:["The URL you requested can't be found. If you think this is an error,"," ",e.jsx(t,{href:"https://github.com/bvaughn/react-window/issues/new",children:"please file a GitHub issue"}),"."]})]})}export{r as default};
-//# sourceMappingURL=PageNotFound-B0nx-Cz_.js.map
+import{j as e,B as s,C as n,E as t}from"./index-6dOV2kLd.js";import{H as i}from"./Header-D5XYa_k5.js";function r(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(i,{title:"Page not found"}),e.jsxs(n,{intent:"danger",children:["The URL you requested can't be found. If you think this is an error,"," ",e.jsx(t,{href:"https://github.com/bvaughn/react-window/issues/new",children:"please file a GitHub issue"}),"."]})]})}export{r as default};
+//# sourceMappingURL=PageNotFound-CmFn1Y8A.js.map

package/docs/assets/{PageNotFound-B0nx-Cz_.js.map → PageNotFound-CmFn1Y8A.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageNotFound-B0nx-Cz_.js","sources":["../../src/routes/PageNotFound.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PageNotFound() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Page not found\" />\n      <Callout intent=\"danger\">\n        The URL you requested can't be found. If you think this is an error,{\" \"}\n        <ExternalLink href=\"https://github.com/bvaughn/react-window/issues/new\">\n          please file a GitHub issue\n        </ExternalLink>\n        .\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PageNotFound","jsxs","Box","direction","gap","children","jsx","Header","title","Callout","intent","ExternalLink","href"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,qBACdP,KAACQ,EAAA,CAAQC,OAAO,SAASL,SAAA,CAAA,uEAC8C,IACrEC,EAAAA,IAACK,EAAA,CAAaC,KAAK,qDAAqDP,SAAA,+BAEzD,SAKvB"}
+{"version":3,"file":"PageNotFound-CmFn1Y8A.js","sources":["../../src/routes/PageNotFound.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PageNotFound() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Page not found\" />\n      <Callout intent=\"danger\">\n        The URL you requested can't be found. If you think this is an error,{\" \"}\n        <ExternalLink href=\"https://github.com/bvaughn/react-window/issues/new\">\n          please file a GitHub issue\n        </ExternalLink>\n        .\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PageNotFound","jsxs","Box","direction","gap","children","jsx","Header","title","Callout","intent","ExternalLink","href"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,qBACdP,KAACQ,EAAA,CAAQC,OAAO,SAASL,SAAA,CAAA,uEAC8C,IACrEC,EAAAA,IAACK,EAAA,CAAaC,KAAK,qDAAqDP,SAAA,+BAEzD,SAKvB"}

package/docs/assets/{PlatformRequirementsRoute-C00ZSzCF.js → PlatformRequirementsRoute-DrlH5Zzd.js}

@@ -1,2 +1,2 @@
-import{j as e,B as s,E as r,C as i}from"./index-B_YQ7rlN.js";import{H as n}from"./Header-BYp8JKXz.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(n,{title:"Requirements"}),e.jsxs("div",{children:["This library requires React"," ",e.jsx(r,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"version 18"})," ","or newer."]}),e.jsxs("div",{children:["It also uses the"," ",e.jsx(r,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","(or a polyfill) to calculate the available space for ",e.jsx("code",{children:"List"})," ","and ",e.jsx("code",{children:"Grid"})," components."]}),e.jsxs(i,{intent:"primary",children:[e.jsx("code",{children:"ResizeObserver"})," usage can be avoided if explicit pixel dimensions are specified using the ",e.jsx("code",{children:"style"})," prop. (Percentage or EM/REM based dimensions do not count.)"]})]})}export{o as default};
-//# sourceMappingURL=PlatformRequirementsRoute-C00ZSzCF.js.map
+import{j as e,B as s,E as r,C as i}from"./index-6dOV2kLd.js";import{H as n}from"./Header-D5XYa_k5.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(n,{title:"Requirements"}),e.jsxs("div",{children:["This library requires React"," ",e.jsx(r,{href:"https://react.dev/blog/2022/03/29/react-v18",children:"version 18"})," ","or newer."]}),e.jsxs("div",{children:["It also uses the"," ",e.jsx(r,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","(or a polyfill) to calculate the available space for ",e.jsx("code",{children:"List"})," ","and ",e.jsx("code",{children:"Grid"})," components."]}),e.jsxs(i,{intent:"primary",children:[e.jsx("code",{children:"ResizeObserver"})," usage can be avoided if explicit pixel dimensions are specified using the ",e.jsx("code",{children:"style"})," prop. (Percentage or EM/REM based dimensions do not count.)"]})]})}export{o as default};
+//# sourceMappingURL=PlatformRequirementsRoute-DrlH5Zzd.js.map

package/docs/assets/{PlatformRequirementsRoute-C00ZSzCF.js.map → PlatformRequirementsRoute-DrlH5Zzd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PlatformRequirementsRoute-C00ZSzCF.js","sources":["../../src/routes/PlatformRequirementsRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PlatformRequirementsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Requirements\" />\n      <div>\n        This library requires React{\" \"}\n        <ExternalLink href=\"https://react.dev/blog/2022/03/29/react-v18\">\n          version 18\n        </ExternalLink>{\" \"}\n        or newer.\n      </div>\n      <div>\n        It also uses the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n          ResizeObserver\n        </ExternalLink>{\" \"}\n        (or a polyfill) to calculate the available space for <code>List</code>{\" \"}\n        and <code>Grid</code> components.\n      </div>\n      <Callout intent=\"primary\">\n        <code>ResizeObserver</code> usage can be avoided if explicit pixel\n        dimensions are specified using the <code>style</code> prop. (Percentage\n        or EM/REM based dimensions do not count.)\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PlatformRequirementsRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","Callout","intent"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,wBACb,MAAA,CAAIH,SAAA,CAAA,8BACyB,IAC5BC,EAAAA,IAACG,EAAA,CAAaC,KAAK,8CAA8CL,SAAA,eAEjD,IAAI,sBAGrB,MAAA,CAAIA,SAAA,CAAA,mBACc,IACjBC,EAAAA,IAACG,EAAA,CAAaC,KAAK,kEAAkEL,SAAA,mBAErE,IAAI,0DACiCC,IAAC,QAAKD,SAAA,SAAY,IAAI,SACvEC,IAAC,QAAKD,SAAA,SAAW,oBAEvBJ,KAACU,EAAA,CAAQC,OAAO,UACdP,SAAA,GAAAC,IAAC,QAAKD,SAAA,mBAAqB,gFACQC,IAAC,QAAKD,SAAA,UAAY,oEAK7D"}
+{"version":3,"file":"PlatformRequirementsRoute-DrlH5Zzd.js","sources":["../../src/routes/PlatformRequirementsRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\n\nexport default function PlatformRequirementsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Requirements\" />\n      <div>\n        This library requires React{\" \"}\n        <ExternalLink href=\"https://react.dev/blog/2022/03/29/react-v18\">\n          version 18\n        </ExternalLink>{\" \"}\n        or newer.\n      </div>\n      <div>\n        It also uses the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n          ResizeObserver\n        </ExternalLink>{\" \"}\n        (or a polyfill) to calculate the available space for <code>List</code>{\" \"}\n        and <code>Grid</code> components.\n      </div>\n      <Callout intent=\"primary\">\n        <code>ResizeObserver</code> usage can be avoided if explicit pixel\n        dimensions are specified using the <code>style</code> prop. (Percentage\n        or EM/REM based dimensions do not count.)\n      </Callout>\n    </Box>\n  );\n}\n"],"names":["PlatformRequirementsRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","Callout","intent"],"mappings":"sGAKA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,wBACb,MAAA,CAAIH,SAAA,CAAA,8BACyB,IAC5BC,EAAAA,IAACG,EAAA,CAAaC,KAAK,8CAA8CL,SAAA,eAEjD,IAAI,sBAGrB,MAAA,CAAIA,SAAA,CAAA,mBACc,IACjBC,EAAAA,IAACG,EAAA,CAAaC,KAAK,kEAAkEL,SAAA,mBAErE,IAAI,0DACiCC,IAAC,QAAKD,SAAA,SAAY,IAAI,SACvEC,IAAC,QAAKD,SAAA,SAAW,oBAEvBJ,KAACU,EAAA,CAAQC,OAAO,UACdP,SAAA,GAAAC,IAAC,QAAKD,SAAA,mBAAqB,gFACQC,IAAC,QAAKD,SAAA,UAAY,oEAK7D"}

package/docs/assets/PropsRoute-Du5tQlP4.js

@@ -0,0 +1,2 @@
+import{j as i,B as s}from"./index-6dOV2kLd.js";import{C as t}from"./ContinueLink-BgDdBmAq.js";import{C as o}from"./ComponentProps-DjtQqosW.js";import"./LoadingSpinner-C5G0kF8B.js";import"./Header-D5XYa_k5.js";function e(){return i.jsxs(s,{direction:"column",gap:4,children:[i.jsx(o,{section:"Lists",url:"/generated/js-docs/List.json"}),i.jsx(t,{to:"/list/imperative-api",title:"imperative api"})]})}export{e as default};
+//# sourceMappingURL=PropsRoute-Du5tQlP4.js.map

package/docs/assets/{PropsRoute-D9jETWHk.js.map → PropsRoute-Du5tQlP4.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PropsRoute-D9jETWHk.js","sources":["../../src/routes/list/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\n\nexport default function ListPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Lists\" url=\"/generated/js-docs/List.json\" />\n      <ContinueLink to=\"/list/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["ListPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","url","ContinueLink","to","title"],"mappings":"iNAIA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAeC,QAAQ,QAAQC,IAAI,iCACpCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}
+{"version":3,"file":"PropsRoute-Du5tQlP4.js","sources":["../../src/routes/list/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\n\nexport default function ListPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Lists\" url=\"/generated/js-docs/List.json\" />\n      <ContinueLink to=\"/list/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["ListPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","url","ContinueLink","to","title"],"mappings":"iNAIA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAeC,QAAQ,QAAQC,IAAI,iCACpCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}

package/docs/assets/PropsRoute-Y6h__YZK.js

@@ -0,0 +1,2 @@
+import{j as i,B as r}from"./index-6dOV2kLd.js";import{C as o}from"./ContinueLink-BgDdBmAq.js";import{C as e}from"./ComponentProps-DjtQqosW.js";import"./LoadingSpinner-C5G0kF8B.js";import"./Header-D5XYa_k5.js";function s(){return i.jsxs(r,{direction:"column",gap:4,children:[i.jsx(e,{section:"Grids",url:"/generated/js-docs/Grid.json"}),i.jsx(o,{to:"/grid/imperative-api",title:"imperative api"})]})}export{s as default};
+//# sourceMappingURL=PropsRoute-Y6h__YZK.js.map

package/docs/assets/{PropsRoute-D77WXdPD.js.map → PropsRoute-Y6h__YZK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PropsRoute-D77WXdPD.js","sources":["../../src/routes/grid/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\n\nexport default function GridPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Grids\" url=\"/generated/js-docs/Grid.json\" />\n      <ContinueLink to=\"/grid/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["GridPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","url","ContinueLink","to","title"],"mappings":"iNAIA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAeC,QAAQ,QAAQC,IAAI,iCACpCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}
+{"version":3,"file":"PropsRoute-Y6h__YZK.js","sources":["../../src/routes/grid/PropsRoute.tsx"],"sourcesContent":["import { Box } from \"../../components/Box\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ComponentProps } from \"../../components/props/ComponentProps\";\n\nexport default function GridPropsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <ComponentProps section=\"Grids\" url=\"/generated/js-docs/Grid.json\" />\n      <ContinueLink to=\"/grid/imperative-api\" title=\"imperative api\" />\n    </Box>\n  );\n}\n"],"names":["GridPropsRoute","jsxs","Box","direction","gap","children","jsx","ComponentProps","section","url","ContinueLink","to","title"],"mappings":"iNAIA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAeC,QAAQ,QAAQC,IAAI,iCACpCH,EAAAA,IAACI,EAAA,CAAaC,GAAG,uBAAuBC,MAAM,qBAGpD"}

package/docs/assets/{RTLGridsRoute-C49T7mLs.js → RTLGridsRoute-Bh6j-Do_.js}

@@ -1,2 +1,2 @@
-import{j as e,B as t,E as s}from"./index-B_YQ7rlN.js";import{B as r}from"./arePropsEqual-D3jAKwxp.js";import{F as o}from"./FormattedCode-CAmuOSRw.js";import{L as n}from"./LoadingSpinner-Z5HQViRD.js";import{c as i,i as a,u as l}from"./useContacts-BItVOkyi.js";import{G as c}from"./Grid-DH-j7ODh.js";function d({contacts:t}){return e.jsx(c,{cellComponent:m,cellProps:{contacts:t},columnCount:10,columnWidth:i,dir:"rtl",rowCount:t.length,rowHeight:35})}function m({contacts:t,columnIndex:s,rowIndex:r,style:o}){const n=t[r][a(s)];return e.jsxs("div",{className:"truncate leading-none",style:o,children:[e.jsx("div",{children:n}),e.jsxs("small",{className:"text-slate-400",children:["row ",r,", col ",s]})]})}function h(){const i=l();return e.jsxs(t,{direction:"column",gap:4,children:[e.jsxs("div",{children:["Grids can also display right to left languages (like Arabic). The grid components check the"," ",e.jsxs(s,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir",children:[e.jsx("code",{children:"dir"})," attribute"]})," ","to determine content directionality."]}),e.jsx("div",{children:"Using the same data as from the previous example, here is a grid rendered right to left."}),e.jsxs(r,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!i.length&&e.jsx(n,{}),e.jsx(d,{contacts:i})]}),e.jsx(o,{url:"/generated/code-snippets/RtlGrid.json"})]})}export{h as default};
-//# sourceMappingURL=RTLGridsRoute-C49T7mLs.js.map
+import{j as e,B as t,E as s}from"./index-6dOV2kLd.js";import{B as r}from"./arePropsEqual-J86giKVT.js";import{F as o}from"./FormattedCode-Bgu5KYpx.js";import{L as n}from"./LoadingSpinner-C5G0kF8B.js";import{c as i,i as a,u as l}from"./useContacts-QMK0xyhD.js";import{G as c}from"./Grid-BmNZGHKY.js";function d({contacts:t}){return e.jsx(c,{cellComponent:m,cellProps:{contacts:t},columnCount:10,columnWidth:i,dir:"rtl",rowCount:t.length,rowHeight:35})}function m({contacts:t,columnIndex:s,rowIndex:r,style:o}){const n=t[r][a(s)];return e.jsxs("div",{className:"truncate leading-none",style:o,children:[e.jsx("div",{children:n}),e.jsxs("small",{className:"text-slate-400",children:["row ",r,", col ",s]})]})}function h(){const i=l();return e.jsxs(t,{direction:"column",gap:4,children:[e.jsxs("div",{children:["Grids can also display right to left languages (like Arabic). The grid components check the"," ",e.jsxs(s,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir",children:[e.jsx("code",{children:"dir"})," attribute"]})," ","to determine content directionality."]}),e.jsx("div",{children:"Using the same data as from the previous example, here is a grid rendered right to left."}),e.jsxs(r,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!i.length&&e.jsx(n,{}),e.jsx(d,{contacts:i})]}),e.jsx(o,{url:"/generated/code-snippets/RtlGrid.json"})]})}export{h as default};
+//# sourceMappingURL=RTLGridsRoute-Bh6j-Do_.js.map

package/docs/assets/{RTLGridsRoute-C49T7mLs.js.map → RTLGridsRoute-Bh6j-Do_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RTLGridsRoute-C49T7mLs.js","sources":["../../src/routes/grid/examples/RtlGrid.example.tsx","../../src/routes/grid/RTLGridsRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction RtlExample({ contacts }: { contacts: Contact[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ contacts }}\n      columnCount={10}\n      columnWidth={columnWidth}\n      dir=\"rtl\"\n      rowCount={contacts.length}\n      rowHeight={35}\n    />\n  );\n}\n\n// <end>\n\nimport { type CellComponentProps } from \"react-window\";\nimport { indexToColumn } from \"./shared\";\n\nfunction CellComponent({\n  contacts,\n  columnIndex,\n  rowIndex,\n  style\n}: CellComponentProps<{\n  contacts: Contact[];\n}>) {\n  const address = contacts[rowIndex];\n  const content = address[indexToColumn(columnIndex)];\n\n  return (\n    <div className=\"truncate leading-none\" style={style}>\n      <div>{content}</div>\n      <small className=\"text-slate-400\">\n        row {rowIndex}, col {columnIndex}\n      </small>\n    </div>\n  );\n}\n\nexport { CellComponent, RtlExample };\nexport type { Contact };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { RtlExample } from \"./examples/RtlGrid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RTLGridsRoute() {\n  const contacts = useContacts();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <div>\n        Grids can also display right to left languages (like Arabic). The grid\n        components check the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\">\n          <code>dir</code> attribute\n        </ExternalLink>{\" \"}\n        to determine content directionality.\n      </div>\n      <div>\n        Using the same data as from the previous example, here is a grid\n        rendered right to left.\n      </div>\n      <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <RtlExample contacts={contacts} />\n      </Block>\n      <FormattedCode url=\"/generated/code-snippets/RtlGrid.json\" />\n    </Box>\n  );\n}\n"],"names":["RtlExample","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","dir","rowCount","length","rowHeight","columnIndex","rowIndex","style","content","indexToColumn","jsxs","className","children","RTLGridsRoute","useContacts","Box","direction","gap","ExternalLink","href","Block","LoadingSpinner","FormattedCode","url"],"mappings":"0SASA,SAASA,GAAWC,SAAEA,IACpB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,IAAI,MACJC,SAAUT,EAASU,OACnBC,UAAW,IAGjB,CAOA,SAASP,GAAcJ,SACrBA,EAAAY,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUf,EAASa,GACDG,EAAcJ,IAEtC,SACEK,KAAC,MAAA,CAAIC,UAAU,wBAAwBJ,QACrCK,SAAA,GAAAlB,IAAC,OAAKkB,SAAAJ,MACNE,KAAC,QAAA,CAAMC,UAAU,iBAAiBC,SAAA,CAAA,OAC3BN,EAAS,SAAOD,OAI7B,CCvCA,SAAwBQ,IACtB,MAAMpB,EAAWqB,IAEjB,OACEJ,EAAAA,KAACK,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BL,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,8FAEkB,MACrBF,KAACQ,EAAA,CAAaC,KAAK,oFACjBP,SAAA,GAAAlB,IAAC,QAAKkB,SAAA,QAAU,gBACF,IAAI,4CAGtBlB,IAAC,OAAIkB,SAAA,6FAILF,EAAAA,KAACU,EAAA,CAAMT,UAAU,qBAAqB,oBAAkB,OACrDC,SAAA,EAACnB,EAASU,cAAWkB,EAAA,CAAA,GACtB3B,MAACF,GAAWC,kBAEdC,IAAC4B,EAAA,CAAcC,IAAI,4CAGzB"}
+{"version":3,"file":"RTLGridsRoute-Bh6j-Do_.js","sources":["../../src/routes/grid/examples/RtlGrid.example.tsx","../../src/routes/grid/RTLGridsRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction RtlExample({ contacts }: { contacts: Contact[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ contacts }}\n      columnCount={10}\n      columnWidth={columnWidth}\n      dir=\"rtl\"\n      rowCount={contacts.length}\n      rowHeight={35}\n    />\n  );\n}\n\n// <end>\n\nimport { type CellComponentProps } from \"react-window\";\nimport { indexToColumn } from \"./shared\";\n\nfunction CellComponent({\n  contacts,\n  columnIndex,\n  rowIndex,\n  style\n}: CellComponentProps<{\n  contacts: Contact[];\n}>) {\n  const address = contacts[rowIndex];\n  const content = address[indexToColumn(columnIndex)];\n\n  return (\n    <div className=\"truncate leading-none\" style={style}>\n      <div>{content}</div>\n      <small className=\"text-slate-400\">\n        row {rowIndex}, col {columnIndex}\n      </small>\n    </div>\n  );\n}\n\nexport { CellComponent, RtlExample };\nexport type { Contact };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { RtlExample } from \"./examples/RtlGrid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RTLGridsRoute() {\n  const contacts = useContacts();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <div>\n        Grids can also display right to left languages (like Arabic). The grid\n        components check the{\" \"}\n        <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir\">\n          <code>dir</code> attribute\n        </ExternalLink>{\" \"}\n        to determine content directionality.\n      </div>\n      <div>\n        Using the same data as from the previous example, here is a grid\n        rendered right to left.\n      </div>\n      <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <RtlExample contacts={contacts} />\n      </Block>\n      <FormattedCode url=\"/generated/code-snippets/RtlGrid.json\" />\n    </Box>\n  );\n}\n"],"names":["RtlExample","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","dir","rowCount","length","rowHeight","columnIndex","rowIndex","style","content","indexToColumn","jsxs","className","children","RTLGridsRoute","useContacts","Box","direction","gap","ExternalLink","href","Block","LoadingSpinner","FormattedCode","url"],"mappings":"0SASA,SAASA,GAAWC,SAAEA,IACpB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,IAAI,MACJC,SAAUT,EAASU,OACnBC,UAAW,IAGjB,CAOA,SAASP,GAAcJ,SACrBA,EAAAY,YACAA,EAAAC,SACAA,EAAAC,MACAA,IAIA,MACMC,EADUf,EAASa,GACDG,EAAcJ,IAEtC,SACEK,KAAC,MAAA,CAAIC,UAAU,wBAAwBJ,QACrCK,SAAA,GAAAlB,IAAC,OAAKkB,SAAAJ,MACNE,KAAC,QAAA,CAAMC,UAAU,iBAAiBC,SAAA,CAAA,OAC3BN,EAAS,SAAOD,OAI7B,CCvCA,SAAwBQ,IACtB,MAAMpB,EAAWqB,IAEjB,OACEJ,EAAAA,KAACK,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BL,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,8FAEkB,MACrBF,KAACQ,EAAA,CAAaC,KAAK,oFACjBP,SAAA,GAAAlB,IAAC,QAAKkB,SAAA,QAAU,gBACF,IAAI,4CAGtBlB,IAAC,OAAIkB,SAAA,6FAILF,EAAAA,KAACU,EAAA,CAAMT,UAAU,qBAAqB,oBAAkB,OACrDC,SAAA,EAACnB,EAASU,cAAWkB,EAAA,CAAA,GACtB3B,MAACF,GAAWC,kBAEdC,IAAC4B,EAAA,CAAcC,IAAI,4CAGzB"}

package/docs/assets/{RenderingGridRoute-pTuxJ89O.js → RenderingGridRoute-BiAH8mBy.js}

@@ -1,2 +1,2 @@
-import{j as e,B as s,C as i,E as n}from"./index-B_YQ7rlN.js";import{B as r}from"./arePropsEqual-D3jAKwxp.js";import{F as o}from"./FormattedCode-CAmuOSRw.js";import{C as t}from"./ContinueLink-CbPhCk1k.js";import{H as d}from"./Header-BYp8JKXz.js";import{L as l}from"./LoadingSpinner-Z5HQViRD.js";import{C as a}from"./CellComponent.example-e4JJmmZM.js";import{c,u as h}from"./useContacts-BItVOkyi.js";import{G as p}from"./Grid-DH-j7ODh.js";function m({contacts:s}){return e.jsx(p,{cellComponent:a,cellProps:{contacts:s},columnCount:10,columnWidth:c,rowCount:s.length,rowHeight:25})}function j(){const a=h();return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(d,{section:"Grids",title:"Rendering a grid"}),e.jsxs("div",{children:["Use the ",e.jsx("code",{children:"Grid"})," component to render data with many rows and columns:"]}),e.jsxs(r,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!a.length&&e.jsx(l,{}),e.jsx(m,{contacts:a})]}),e.jsx("div",{children:"Grids require you to specify the number of rows and columns as well as the width and height of each:"}),e.jsx(o,{url:"/generated/code-snippets/Grid.json"}),e.jsx("div",{children:"Column widths and row heights can be either numbers or functions. In the example above, row height is fixed and column width is variable."}),e.jsx(o,{url:"/generated/code-snippets/columnWidth.json"}),e.jsxs("div",{children:["Lastly grids require a component to render cell, given a column and row index. As with lists, this component receives additional props specified as part of ",e.jsx("code",{children:"cellProps"}),":"]}),e.jsx(o,{url:"/generated/code-snippets/CellComponent.json"}),e.jsx(i,{intent:"warning",children:e.jsxs(s,{direction:"column",gap:4,children:[e.jsxs("div",{children:["Grids require space to render cells. Typically the"," ",e.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),e.jsxs("div",{children:["If an explicit width and height are specified (in pixels) using the"," ",e.jsx("code",{children:"style"})," prop, ",e.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),e.jsx(t,{to:"/grid/props",title:"component props"})]})}export{j as default};
-//# sourceMappingURL=RenderingGridRoute-pTuxJ89O.js.map
+import{j as e,B as s,C as i,E as n}from"./index-6dOV2kLd.js";import{B as r}from"./arePropsEqual-J86giKVT.js";import{F as o}from"./FormattedCode-Bgu5KYpx.js";import{C as t}from"./ContinueLink-BgDdBmAq.js";import{H as d}from"./Header-D5XYa_k5.js";import{L as l}from"./LoadingSpinner-C5G0kF8B.js";import{C as a}from"./CellComponent.example-B6rd3A81.js";import{c,u as h}from"./useContacts-QMK0xyhD.js";import{G as p}from"./Grid-BmNZGHKY.js";function m({contacts:s}){return e.jsx(p,{cellComponent:a,cellProps:{contacts:s},columnCount:10,columnWidth:c,rowCount:s.length,rowHeight:25})}function j(){const a=h();return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(d,{section:"Grids",title:"Rendering a grid"}),e.jsxs("div",{children:["Use the ",e.jsx("code",{children:"Grid"})," component to render data with many rows and columns:"]}),e.jsxs(r,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!a.length&&e.jsx(l,{}),e.jsx(m,{contacts:a})]}),e.jsx("div",{children:"Grids require you to specify the number of rows and columns as well as the width and height of each:"}),e.jsx(o,{url:"/generated/code-snippets/Grid.json"}),e.jsx("div",{children:"Column widths and row heights can be either numbers or functions. In the example above, row height is fixed and column width is variable."}),e.jsx(o,{url:"/generated/code-snippets/columnWidth.json"}),e.jsxs("div",{children:["Lastly grids require a component to render cell, given a column and row index. As with lists, this component receives additional props specified as part of ",e.jsx("code",{children:"cellProps"}),":"]}),e.jsx(o,{url:"/generated/code-snippets/CellComponent.json"}),e.jsx(i,{intent:"warning",children:e.jsxs(s,{direction:"column",gap:4,children:[e.jsxs("div",{children:["Grids require space to render cells. Typically the"," ",e.jsx(n,{href:"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver",children:"ResizeObserver"})," ","API is used to determine how much space there is available within the parent DOM element."]}),e.jsxs("div",{children:["If an explicit width and height are specified (in pixels) using the"," ",e.jsx("code",{children:"style"})," prop, ",e.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),e.jsx(t,{to:"/grid/props",title:"component props"})]})}export{j as default};
+//# sourceMappingURL=RenderingGridRoute-BiAH8mBy.js.map

package/docs/assets/{RenderingGridRoute-pTuxJ89O.js.map → RenderingGridRoute-BiAH8mBy.js.map}

@@ -1 +1 @@
-{"version":3,"file":"RenderingGridRoute-pTuxJ89O.js","sources":["../../src/routes/grid/examples/Grid.example.tsx","../../src/routes/grid/RenderingGridRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { CellComponent } from \"./CellComponent.example\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction Example({ contacts }: { contacts: Contact[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ contacts }}\n      columnCount={10}\n      columnWidth={columnWidth}\n      rowCount={contacts.length}\n      rowHeight={25}\n    />\n  );\n}\n\n// <end>\n\nexport { CellComponent, Example };\nexport type { Contact };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/Grid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RenderingGridRoute() {\n  const contacts = useContacts();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Grids\" title=\"Rendering a grid\" />\n      <div>\n        Use the <code>Grid</code> component to render data with many rows and\n        columns:\n      </div>\n      <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <Example contacts={contacts} />\n      </Block>\n      <div>\n        Grids require you to specify the number of rows and columns as well as\n        the width and height of each:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/Grid.json\" />\n      <div>\n        Column widths and row heights can be either numbers or functions. In the\n        example above, row height is fixed and column width is variable.\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/columnWidth.json\" />\n      <div>\n        Lastly grids require a component to render cell, given a column and row\n        index. As with lists, this component receives additional props specified\n        as part of <code>cellProps</code>:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/CellComponent.json\" />\n      <Callout intent=\"warning\">\n        <Box direction=\"column\" gap={4}>\n          <div>\n            Grids require space to render cells. Typically the{\" \"}\n            <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n              ResizeObserver\n            </ExternalLink>{\" \"}\n            API is used to determine how much space there is available within\n            the parent DOM element.\n          </div>\n          <div>\n            If an explicit width and height are specified (in pixels) using the{\" \"}\n            <code>style</code> prop, <code>ResizeObserver</code> will not be\n            used.\n          </div>\n        </Box>\n      </Callout>\n      <ContinueLink to=\"/grid/props\" title=\"component props\" />\n    </Box>\n  );\n}\n"],"names":["Example","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","length","rowHeight","RenderingGridRoute","useContacts","jsxs","Box","direction","gap","children","Header","section","title","Block","className","LoadingSpinner","FormattedCode","url","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"qbAUA,SAASA,GAAQC,SAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,SAAUR,EAASS,OACnBC,UAAW,IAGjB,CCVA,SAAwBC,IACtB,MAAMX,EAAWY,IAEjB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAhB,EAAAA,IAACiB,EAAA,CAAOC,QAAQ,QAAQC,MAAM,4BAC7B,MAAA,CAAIH,SAAA,CAAA,aACKhB,IAAC,QAAKgB,SAAA,SAAW,2DAG3BJ,EAAAA,KAACQ,EAAA,CAAMC,UAAU,qBAAqB,oBAAkB,OACrDL,SAAA,EAACjB,EAASS,cAAWc,EAAA,CAAA,GACtBtB,MAACF,GAAQC,kBAEXC,IAAC,OAAIgB,SAAA,2GAILhB,IAACuB,EAAA,CAAcC,IAAI,yCACnBxB,IAAC,OAAIgB,SAAA,gJAILhB,IAACuB,EAAA,CAAcC,IAAI,qDAClB,MAAA,CAAIR,SAAA,CAAA,iKAGQhB,IAAC,QAAKgB,SAAA,cAAgB,SAEnChB,IAACuB,EAAA,CAAcC,IAAI,gDACnBxB,EAAAA,IAACyB,GAAQC,OAAO,UACdV,gBAACH,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAJ,OAAC,MAAA,CAAII,SAAA,CAAA,qDACgD,IACnDhB,EAAAA,IAAC2B,EAAA,CAAaC,KAAK,kEAAkEZ,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEhB,IAAC,QAAKgB,SAAA,UAAY,YAAOhB,IAAC,QAAKgB,SAAA,mBAAqB,6BAK1DhB,EAAAA,IAAC6B,EAAA,CAAaC,GAAG,cAAcX,MAAM,sBAG3C"}
+{"version":3,"file":"RenderingGridRoute-BiAH8mBy.js","sources":["../../src/routes/grid/examples/Grid.example.tsx","../../src/routes/grid/RenderingGridRoute.tsx"],"sourcesContent":["import json from \"../../../../public/data/contacts.json\";\nimport { CellComponent } from \"./CellComponent.example\";\nimport { columnWidth } from \"./columnWidth.example\";\n\ntype Contact = (typeof json)[0];\n\n// <begin>\n\nimport { Grid } from \"react-window\";\n\nfunction Example({ contacts }: { contacts: Contact[] }) {\n  return (\n    <Grid\n      cellComponent={CellComponent}\n      cellProps={{ contacts }}\n      columnCount={10}\n      columnWidth={columnWidth}\n      rowCount={contacts.length}\n      rowHeight={25}\n    />\n  );\n}\n\n// <end>\n\nexport { CellComponent, Example };\nexport type { Contact };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { FormattedCode } from \"../../components/code/FormattedCode\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\nimport { Example } from \"./examples/Grid.example\";\nimport { useContacts } from \"./hooks/useContacts\";\n\nexport default function RenderingGridRoute() {\n  const contacts = useContacts();\n\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Grids\" title=\"Rendering a grid\" />\n      <div>\n        Use the <code>Grid</code> component to render data with many rows and\n        columns:\n      </div>\n      <Block className=\"h-50 overflow-auto\" data-focus-within=\"bold\">\n        {!contacts.length && <LoadingSpinner />}\n        <Example contacts={contacts} />\n      </Block>\n      <div>\n        Grids require you to specify the number of rows and columns as well as\n        the width and height of each:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/Grid.json\" />\n      <div>\n        Column widths and row heights can be either numbers or functions. In the\n        example above, row height is fixed and column width is variable.\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/columnWidth.json\" />\n      <div>\n        Lastly grids require a component to render cell, given a column and row\n        index. As with lists, this component receives additional props specified\n        as part of <code>cellProps</code>:\n      </div>\n      <FormattedCode url=\"/generated/code-snippets/CellComponent.json\" />\n      <Callout intent=\"warning\">\n        <Box direction=\"column\" gap={4}>\n          <div>\n            Grids require space to render cells. Typically the{\" \"}\n            <ExternalLink href=\"https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver\">\n              ResizeObserver\n            </ExternalLink>{\" \"}\n            API is used to determine how much space there is available within\n            the parent DOM element.\n          </div>\n          <div>\n            If an explicit width and height are specified (in pixels) using the{\" \"}\n            <code>style</code> prop, <code>ResizeObserver</code> will not be\n            used.\n          </div>\n        </Box>\n      </Callout>\n      <ContinueLink to=\"/grid/props\" title=\"component props\" />\n    </Box>\n  );\n}\n"],"names":["Example","contacts","jsx","Grid","cellComponent","CellComponent","cellProps","columnCount","columnWidth","rowCount","length","rowHeight","RenderingGridRoute","useContacts","jsxs","Box","direction","gap","children","Header","section","title","Block","className","LoadingSpinner","FormattedCode","url","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"qbAUA,SAASA,GAAQC,SAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAEL,YACbM,YAAa,GACbC,cACAC,SAAUR,EAASS,OACnBC,UAAW,IAGjB,CCVA,SAAwBC,IACtB,MAAMX,EAAWY,IAEjB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAhB,EAAAA,IAACiB,EAAA,CAAOC,QAAQ,QAAQC,MAAM,4BAC7B,MAAA,CAAIH,SAAA,CAAA,aACKhB,IAAC,QAAKgB,SAAA,SAAW,2DAG3BJ,EAAAA,KAACQ,EAAA,CAAMC,UAAU,qBAAqB,oBAAkB,OACrDL,SAAA,EAACjB,EAASS,cAAWc,EAAA,CAAA,GACtBtB,MAACF,GAAQC,kBAEXC,IAAC,OAAIgB,SAAA,2GAILhB,IAACuB,EAAA,CAAcC,IAAI,yCACnBxB,IAAC,OAAIgB,SAAA,gJAILhB,IAACuB,EAAA,CAAcC,IAAI,qDAClB,MAAA,CAAIR,SAAA,CAAA,iKAGQhB,IAAC,QAAKgB,SAAA,cAAgB,SAEnChB,IAACuB,EAAA,CAAcC,IAAI,gDACnBxB,EAAAA,IAACyB,GAAQC,OAAO,UACdV,gBAACH,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAJ,OAAC,MAAA,CAAII,SAAA,CAAA,qDACgD,IACnDhB,EAAAA,IAAC2B,EAAA,CAAaC,KAAK,kEAAkEZ,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,sEACiE,MACpEhB,IAAC,QAAKgB,SAAA,UAAY,YAAOhB,IAAC,QAAKgB,SAAA,mBAAqB,6BAK1DhB,EAAAA,IAAC6B,EAAA,CAAaC,GAAG,cAAcX,MAAM,sBAG3C"}

package/docs/assets/{ScratchpadRoute-AXfI00Be.js → ScratchpadRoute-NKLpLi0x.js}

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

package/docs/assets/{ScratchpadRoute-AXfI00Be.js.map → ScratchpadRoute-NKLpLi0x.js.map}

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