react-window 2.1.0 → 2.1.1

package/docs/assets/{ContinueLink-jysYO6ZF.js.map → ContinueLink-Mq4XOwMu.js.map}

@@ -1 +1 @@
-{"version":3,"file":"ContinueLink-jysYO6ZF.js","sources":["../../src/components/ContinueLink.tsx"],"sourcesContent":["import type { Path } from \"../routes\";\nimport { Link } from \"./Link\";\n\nexport function ContinueLink({ title, to }: { title: string; to: Path }) {\n  return (\n    <div>\n      Continue to <Link to={to}>{title}</Link>…\n    </div>\n  );\n}\n"],"names":["ContinueLink","title","to","children","jsx","Link"],"mappings":"+CAGO,SAASA,GAAaC,MAAEA,EAAAC,GAAOA,IACpC,cACG,MAAA,CAAIC,SAAA,CAAA,iBACSC,IAACC,EAAA,CAAKH,KAASC,SAAAF,IAAa,MAG9C"}
+{"version":3,"file":"ContinueLink-Mq4XOwMu.js","sources":["../../src/components/ContinueLink.tsx"],"sourcesContent":["import type { Path } from \"../routes\";\nimport { Link } from \"./Link\";\n\nexport function ContinueLink({ title, to }: { title: string; to: Path }) {\n  return (\n    <div>\n      Continue to <Link to={to}>{title}</Link>…\n    </div>\n  );\n}\n"],"names":["ContinueLink","title","to","children","jsx","Link"],"mappings":"+CAGO,SAASA,GAAaC,MAAEA,EAAAC,GAAOA,IACpC,cACG,MAAA,CAAIC,SAAA,CAAA,iBACSC,IAACC,EAAA,CAAKH,KAASC,SAAAF,IAAa,MAG9C"}

package/docs/assets/FixedRowHeightsRoute-DXFNDmnz.js

@@ -0,0 +1,2 @@
+import{j as a,B as n,C as s,E as e}from"./index-3R9tv3eW.js";import{B as t}from"./arePropsEqual-MBk0PiJi.js";import{C as o}from"./Code-BJ6U_DpT.js";import{C as i}from"./ContinueLink-Mq4XOwMu.js";import{H as p}from"./Header-DM8OHOd_.js";import{L as l}from"./List-B9HC1vRM.js";const r=JSON.parse('["Aaden","Aarav","Aaron","Abdiel","Abdullah","Abel","Abraham","Abram","Ace","Achilles","Adam","Adan","Aden","Adonis","Adrian","Adriel","Adrien","Agustin","Ahmad","Ahmed","Aidan","Aiden","Alan","Alaric","Albert","Alberto","Alden","Aldo","Alec","Alejandro","Alessandro","Alex","Alexander","Alexis","Alexzander","Alfonso","Alfred","Alfredo","Ali","Alijah","Alistair","Allan","Allen","Alonso","Alonzo","Alvaro","Alvin","Amari","Ameer","Amir","Amos","Anakin","Anders","Anderson","Andre","Andres","Andrew","Andy","Angel","Angelo","Anson","Anthony","Anton","Antonio","Apollo","Archer","Ares","Ari","Arian","Ariel","Arjun","Arlo","Armando","Armani","Aron","Arthur","Arturo","Aryan","Asa","Asher","Ashton","Atlas","Atticus","August","Augustine","Augustus","Austin","Avery","Avi","Axel","Axl","Axton","Ayaan","Ayan","Ayden","Aydin","Azariah","Barrett","Baylor","Beau","Beckett","Beckham","Ben","Benjamin","Bennett","Benson","Bentlee","Bentley","Benton","Billy","Bishop","Bjorn","Blaine","Blaise","Blake","Blaze","Bo","Bobby","Bodhi","Bodie","Boone","Boston","Bowen","Braden","Bradley","Brady","Brandon","Branson","Brantley","Braxton","Brayan","Brayden","Braydon","Braylen","Braylon","Brayson","Brecken","Brendan","Brenden","Brennan","Brentley","Brett","Brian","Briar","Bridger","Briggs","Brixton","Brock","Brodie","Brody","Bronson","Brooks","Bruce","Bruno","Bryan","Bryant","Bryce","Brycen","Brysen","Bryson","Byron","Cade","Caden","Caiden","Cain","Cairo","Caleb","Callan","Callen","Callum","Calvin","Camden","Camdyn","Cameron","Camilo","Camron","Canaan","Cannon","Carl","Carlos","Carmelo","Carson","Carter","Case","Casen","Casey","Cash","Cason","Caspian","Cassius","Castiel","Cayden","Cayson","Cedric","Cesar","Chad","Chaim","Chance","Chandler","Channing","Charles","Charlie","Chase","Chris","Christian","Christopher","Clark","Clay","Clayton","Clyde","Cody","Coen","Cohen","Colby","Cole","Coleman","Colin","Collin","Colson","Colt","Colten","Colton","Conner","Connor","Conor","Conrad","Cooper","Corbin","Corey","Cory","Craig","Crew","Cristian","Cristiano","Crosby","Cruz","Cullen","Curtis","Cyrus","Dakota","Dallas","Dalton","Damari","Damian","Damien","Damon","Dane","Dangelo","Daniel","Danny","Dante","Darian","Dariel","Dario","Darius","Darrell","Darren","Darwin","Dash","Davian","David","Davion","Davis","Dawson","Dax","Daxton","Dayton","Deacon","Dean","Deandre","Decker","Declan","Demetrius","Dennis","Denver","Derek","Derrick","Desmond","Devin","Devon","Dexter","Diego","Dilan","Dillon","Dimitri","Dominic","Dominick","Dominik","Dominique","Donald","Donovan","Dorian","Douglas","Drake","Draven","Drew","Duke","Duncan","Dustin","Dwayne","Dylan","Eason","Easton","Eddie","Eden","Edgar","Edison","Eduardo","Edward","Edwin","Eli","Elian","Elias","Eliezer","Elijah","Eliseo","Elisha","Elliot","Elliott","Ellis","Emanuel","Emerson","Emery","Emiliano","Emilio","Emmanuel","Emmet","Emmett","Emmitt","Emory","Enoch","Enrique","Enzo","Ephraim","Eric","Erick","Erik","Ernest","Ernesto","Esteban","Ethan","Eugene","Evan","Everett","Ezekiel","Ezequiel","Ezra","Fabian","Felipe","Felix","Fernando","Finley","Finn","Finnegan","Finnley","Fisher","Fletcher","Flynn","Ford","Forrest","Foster","Fox","Francis","Francisco","Franco","Frank","Frankie","Franklin","Frederick","Gabriel","Gael","Gage","Gannon","Garrett","Gary","Gatlin","Gavin","George","Gerald","Gerardo","Giancarlo","Gianluca","Gianni","Gibson","Gideon","Giovanni","Gordon","Grady","Graham","Grant","Graysen","Grayson","Gregory","Grey","Greysen","Greyson","Griffin","Guillermo","Gunnar","Gunner","Gustavo","Hamza","Hank","Harlan","Harley","Harold","Harper","Harrison","Harry","Harvey","Hassan","Hayden","Hayes","Heath","Hector","Hendrix","Henrik","Henry","Hezekiah","Holden","Houston","Howard","Hudson","Hugh","Hugo","Hunter","Huxley","Ian","Ibrahim","Ignacio","Iker","Ira","Isaac","Isaiah","Isaias","Ishaan","Ismael","Israel","Issac","Ivan","Izaiah","Jabari","Jace","Jack","Jackson","Jacob","Jacoby","Jad","Jaden","Jadiel","Jagger","Jaiden","Jaime","Jairo","Jake","Jakob","Jalen","Jamal","Jamari","James","Jameson","Jamie","Jamir","Jamison","Jared","Jase","Jasiah","Jason","Jasper","Javier","Javion","Javon","Jax","Jaxen","Jaxon","Jaxson","Jaxton","Jaxx","Jaxxon","Jay","Jayce","Jayceon","Jayden","Jaylen","Jayson","Jaziel","Jedidiah","Jefferson","Jeffery","Jeffrey","Jensen","Jeremiah","Jeremias","Jeremy","Jermaine","Jerome","Jerry","Jesse","Jessie","Jesus","Jett","Jimmy","Joaquin","Joe","Joel","Joey","Johan","John","Johnathan","Johnny","Jon","Jonah","Jonas","Jonathan","Jordan","Jordy","Jorge","Jose","Joseph","Joshua","Josiah","Josue","Jovanni","Joziah","Juan","Judah","Jude","Judson","Juelz","Julian","Julien","Julio","Julius","Junior","Justice","Justin","Kace","Kade","Kaden","Kai","Kaiden","Kairo","Kaiser","Kaison","Kaleb","Kalel","Kamari","Kamden","Kameron","Kamryn","Kane","Kannon","Kareem","Karson","Karter","Kase","Kasen","Kash","Kashton","Kason","Kayden","Kaysen","Kayson","Keagan","Keanu","Keaton","Keegan","Keenan","Keith","Kellan","Kellen","Kelvin","Kendall","Kendrick","Kenneth","Kenny","Kevin","Khalid","Khalil","Khari","Kian","Kieran","Killian","King","Kingsley","Kingston","Knox","Koa","Kobe","Koda","Kody","Kohen","Kole","Kolten","Kolton","Konnor","Korbin","Kristian","Kristopher","Kye","Kylan","Kyle","Kylen","Kyler","Kyng","Kyree","Kyrie","Kyson","Lachlan","Lamar","Lance","Landen","Landon","Landry","Landyn","Lane","Langston","Larry","Lawrence","Lawson","Layne","Layton","Leandro","Ledger","Lee","Legend","Leif","Leighton","Leland","Lennon","Lennox","Leo","Leon","Leonard","Leonardo","Leonel","Leonidas","Leroy","Levi","Lewis","Liam","Lincoln","Lionel","Lochlan","Logan","London","Lorenzo","Louie","Louis","Luca","Lucas","Lucca","Lucian","Luciano","Luis","Luka","Lukas","Luke","Lyle","Lyric","Mack","Madden","Maddox","Maddux","Magnus","Maison","Major","Makai","Malachi","Malakai","Malcolm","Malik","Manuel","Marc","Marcel","Marcelo","Marco","Marcos","Marcus","Mario","Mark","Markus","Marley","Marlon","Marshall","Martin","Marvin","Mason","Mateo","Mathew","Mathias","Matias","Matteo","Matthew","Matthias","Maurice","Mauricio","Maverick","Max","Maxim","Maximilian","Maximiliano","Maximo","Maximus","Maxton","Maxwell","Mayson","Mekhi","Melvin","Memphis","Merrick","Messiah","Micah","Michael","Micheal","Miguel","Mike","Milan","Miles","Miller","Milo","Misael","Mitchell","Mohamed","Mohammad","Mohammed","Moises","Morgan","Moses","Moshe","Muhammad","Musa","Mustafa","Myles","Nash","Nasir","Nathan","Nathanael","Nathaniel","Nehemiah","Neil","Nelson","Nicholas","Nickolas","Nico","Nicolas","Niko","Nikolai","Nikolas","Nixon","Noah","Noe","Noel","Nolan","Nova","Oakley","Odin","Oliver","Omar","Omari","Orion","Orlando","Oscar","Otis","Otto","Owen","Pablo","Parker","Patrick","Paul","Paxton","Payton","Pedro","Peter","Peyton","Philip","Phillip","Phoenix","Pierce","Porter","Preston","Prince","Princeton","Quentin","Quincy","Quinn","Quinton","Rafael","Raiden","Ramiro","Ramon","Randall","Randy","Raphael","Rashad","Raul","Ray","Rayan","Rayden","Raylan","Raymond","Reagan","Reece","Reed","Reese","Reginald","Reid","Reign","Remington","Remy","Rene","Reuben","Rex","Rey","Reyansh","Rhett","Rhys","Ricardo","Richard","Ricky","Ridge","Riley","River","Robert","Roberto","Rocco","Rocky","Rodney","Rodrigo","Rogelio","Roger","Rohan","Roland","Roman","Romeo","Ronald","Ronan","Ronin","Ronnie","Rory","Rowan","Rowen","Roy","Royal","Royce","Ruben","Rudy","Russell","Ryan","Ryder","Ryker","Rylan","Ryland","Sage","Salvador","Salvatore","Sam","Samir","Samson","Samuel","Santana","Santiago","Santino","Santos","Saul","Sawyer","Scott","Seamus","Sean","Sebastian","Sergio","Seth","Shane","Shaun","Shawn","Shepard","Shepherd","Shiloh","Shmuel","Silas","Simeon","Simon","Sincere","Skylar","Skyler","Solomon","Sonny","Soren","Spencer","Stanley","Stefan","Stephen","Sterling","Stetson","Steven","Sullivan","Sutton","Sylas","Tadeo","Talon","Tanner","Tate","Tatum","Taylor","Terrance","Terrell","Terrence","Terry","Thaddeus","Thatcher","Theo","Theodore","Thiago","Thomas","Timothy","Titan","Titus","Tobias","Toby","Tomas","Tommy","Tony","Trace","Travis","Trent","Trenton","Trevor","Trey","Tripp","Tristan","Tristen","Tristian","Troy","Tucker","Ty","Tyler","Tyson","Ulises","Uriah","Uriel","Valentin","Valentino","Van","Vance","Vaughn","Vicente","Victor","Vihaan","Vincent","Vincenzo","Vivaan","Wade","Walker","Walter","Warren","Waylon","Wayne","Wells","Wesley","Wesson","Westin","Westley","Weston","Wilder","Will","William","Willie","Wilson","Winston","Wyatt","Xander","Xavier","Xzavier","Yadiel","Yahir","Yahya","Yehuda","Yisroel","Yosef","Yousef","Yusuf","Zachariah","Zachary","Zackary","Zahir","Zaid","Zaiden","Zain","Zaire","Zander","Zane","Zavier","Zayd","Zayden","Zayn","Zayne","Zechariah","Zeke","Zion","Zyaire"]'),c='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">List</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">names</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">25</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">names</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',d='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">RowComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">index</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">names</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">RowComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">names</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"flex items-center justify-between"</span><span class=""> </span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">names</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-string">"text-slate-500 text-xs"</span><span class="tok-punctuation">&#62;</span><span class="tok-punctuation">{</span><span class="tok-string2">`</span><span class="tok-punctuation">${</span><span class="tok-variableName">index</span><span class=""> </span><span class="tok-operator">+</span><span class=""> </span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class="tok-string2"> of </span><span class="tok-punctuation">${</span><span class="tok-variableName">names</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class="tok-string2">`</span><span class="tok-punctuation">}</span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function h({index:n,names:s,style:e}){return a.jsxs("div",{className:"flex items-center justify-between",style:e,children:[s[n],a.jsx("div",{className:"text-slate-500 text-xs",children:`${n+1} of ${s.length}`})]})}function u({names:n}){return a.jsx(l,{rowComponent:h,rowCount:n.length,rowHeight:25,rowProps:{names:n}})}function m(){return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(p,{section:"Lists",title:"Fixed row heights"}),a.jsx("div",{children:"The simplest type of list to render is one with fixed row heights."}),a.jsx(t,{className:"h-50","data-focus-within":"bold",children:a.jsx(u,{names:r})}),a.jsxs("div",{children:["To render this type of list, you need to specify how many rows it contains (",a.jsx("code",{children:"rowCount"}),"), which component should render rows (",a.jsx("code",{children:"rowComponent"}),"), and the height of each row (",a.jsx("code",{children:"rowHeight"}),"):"]}),a.jsx(o,{html:c}),a.jsxs("div",{children:["The ",a.jsx("code",{children:"rowProps"})," object can also be used to share between components. Values passed in ",a.jsx("code",{children:"rowProps"})," will also be passed as props to the row component:"]}),a.jsx(o,{html:d}),a.jsx(s,{intent:"warning",children:a.jsxs(n,{direction:"column",gap:4,children:[a.jsxs("div",{children:["Lists require vertical space to render rows. Typically the"," ",a.jsx(e,{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."]}),a.jsxs("div",{children:["If an explicit height is specified (in pixels) using the"," ",a.jsx("code",{children:"style"})," prop, ",a.jsx("code",{children:"ResizeObserver"})," will not be used."]})]})}),a.jsx(i,{to:"/list/variable-row-height",title:"variable row heights"})]})}export{m as default};
+//# sourceMappingURL=FixedRowHeightsRoute-DXFNDmnz.js.map

package/docs/assets/FixedRowHeightsRoute-DXFNDmnz.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FixedRowHeightsRoute-DXFNDmnz.js","sources":["../../src/routes/list/examples/FixedHeightRowComponent.example.tsx","../../src/routes/list/examples/FixedHeightList.example.tsx","../../src/routes/list/FixedRowHeightsRoute.tsx"],"sourcesContent":["import { type RowComponentProps } from \"react-window\";\n\nfunction RowComponent({\n  index,\n  names,\n  style\n}: RowComponentProps<{\n  names: string[];\n}>) {\n  return (\n    <div className=\"flex items-center justify-between\" style={style}>\n      {names[index]}\n      <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${names.length}`}</div>\n    </div>\n  );\n}\n\n// <end>\n\nexport { RowComponent };\n","import { RowComponent } from \"./FixedHeightRowComponent.example\";\n\n// <begin>\n\nimport { List } from \"react-window\";\n\nfunction Example({ names }: { names: string[] }) {\n  return (\n    <List\n      rowComponent={RowComponent}\n      rowCount={names.length}\n      rowHeight={25}\n      rowProps={{ names }}\n    />\n  );\n}\n\n// <end>\n\nexport { Example };\n","import json from \"../../../public/data/names.json\";\nimport FixedHeightListMarkdown from \"../../../public/generated/code-snippets/FixedHeightList.json\";\nimport FixedHeightRowComponentMarkdown from \"../../../public/generated/code-snippets/FixedHeightRowComponent.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\nimport { ExternalLink } from \"../../components/ExternalLink\";\nimport { Header } from \"../../components/Header\";\nimport { Example } from \"./examples/FixedHeightList.example\";\n\nexport default function FixedRowHeightsRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Lists\" title=\"Fixed row heights\" />\n      <div>\n        The simplest type of list to render is one with fixed row heights.\n      </div>\n      <Block className=\"h-50\" data-focus-within=\"bold\">\n        <Example names={json} />\n      </Block>\n      <div>\n        To render this type of list, you need to specify how many rows it\n        contains (<code>rowCount</code>), which component should render rows (\n        <code>rowComponent</code>), and the height of each row (\n        <code>rowHeight</code>):\n      </div>\n      <Code html={FixedHeightListMarkdown.html} />\n      <div>\n        The <code>rowProps</code> object can also be used to share between\n        components. Values passed in <code>rowProps</code> will also be passed\n        as props to the row component:\n      </div>\n      <Code html={FixedHeightRowComponentMarkdown.html} />\n      <Callout intent=\"warning\">\n        <Box direction=\"column\" gap={4}>\n          <div>\n            Lists require vertical space to render rows. 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 height is 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\n        to=\"/list/variable-row-height\"\n        title=\"variable row heights\"\n      />\n    </Box>\n  );\n}\n"],"names":["RowComponent","index","names","style","jsxs","className","children","jsx","length","Example","List","rowComponent","rowCount","rowHeight","rowProps","FixedRowHeightsRoute","Box","direction","gap","Header","section","title","Block","json","Code","html","FixedHeightListMarkdown","FixedHeightRowComponentMarkdown","Callout","intent","ExternalLink","href","ContinueLink","to"],"mappings":"wokBAEA,SAASA,GAAaC,MACpBA,EAAAC,MACAA,EAAAC,MACAA,IAIA,SACEC,KAAC,MAAA,CAAIC,UAAU,oCAAoCF,QAChDG,SAAA,CAAAJ,EAAMD,GACPM,EAAAA,IAAC,MAAA,CAAIF,UAAU,yBAA0BC,SAAA,GAAGL,EAAQ,QAAQC,EAAMM,aAGxE,CCTA,SAASC,GAAQP,MAAEA,IACjB,OACEK,EAAAA,IAACG,EAAA,CACCC,aAAcX,EACdY,SAAUV,EAAMM,OAChBK,UAAW,GACXC,SAAU,CAAEZ,UAGlB,CCHA,SAAwBa,IACtB,OACEX,EAAAA,KAACY,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAC,EAAAA,IAACY,EAAA,CAAOC,QAAQ,QAAQC,MAAM,wBAC9Bd,IAAC,OAAID,SAAA,yEAGLC,IAACe,EAAA,CAAMjB,UAAU,OAAO,oBAAkB,OACxCC,SAAAC,EAAAA,IAACE,EAAA,CAAQP,MAAOqB,aAEjB,MAAA,CAAIjB,SAAA,CAAA,iFAEOC,IAAC,QAAKD,SAAA,aAAe,4CAC/BC,IAAC,QAAKD,SAAA,iBAAmB,oCACzBC,IAAC,QAAKD,SAAA,cAAgB,UAExBC,IAACiB,EAAA,CAAKC,KAAMC,WACX,MAAA,CAAIpB,SAAA,CAAA,SACCC,IAAC,QAAKD,SAAA,aAAe,4EACIC,IAAC,QAAKD,SAAA,aAAe,2DAGpDC,IAACiB,EAAA,CAAKC,KAAME,IACZpB,EAAAA,IAACqB,GAAQC,OAAO,UACdvB,gBAACU,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BZ,SAAA,CAAAF,OAAC,MAAA,CAAIE,SAAA,CAAA,6DACwD,IAC3DC,EAAAA,IAACuB,EAAA,CAAaC,KAAK,kEAAkEzB,SAAA,mBAErE,IAAI,sGAIrB,MAAA,CAAIA,SAAA,CAAA,2DACsD,MACzDC,IAAC,QAAKD,SAAA,UAAY,YAAOC,IAAC,QAAKD,SAAA,mBAAqB,6BAK1DC,EAAAA,IAACyB,EAAA,CACCC,GAAG,4BACHZ,MAAM,2BAId"}

package/docs/assets/GettingStartedRoute-D-bI_IZb.js

@@ -0,0 +1,2 @@
+import{j as e,B as s,E as i,C as t,L as l}from"./index-3R9tv3eW.js";import{H as r}from"./Header-DM8OHOd_.js";function o(){return e.jsxs(s,{direction:"column",gap:4,children:[e.jsx(r,{title:"Getting started"}),e.jsxs("div",{children:[e.jsx("strong",{children:"react-window"})," is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from"," ",e.jsx(i,{href:"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en",children:"React DevTools"})," ","to the"," ",e.jsx(i,{href:"https://github.com/replayio/devtools",children:"Replay browser"}),"."]}),e.jsx("div",{className:"text-xl mt-4",children:"Installation"}),e.jsx("div",{children:"Begin by installing the library from NPM:"}),e.jsxs("code",{className:"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!",children:["npm install ",e.jsx("span",{className:"tok-keyword",children:"react-window"})]}),e.jsxs(t,{intent:"primary",children:["TypeScript definitions are included within the published"," ",e.jsx("code",{children:"dist"})," folder and documentation is included within the"," ",e.jsx("code",{children:"docs"})," folder."]}),e.jsx("div",{className:"text-xl mt-4",children:"Learn more"}),e.jsx("div",{children:"This library provides two basic types of components; choose one below to learn more:"}),e.jsxs("ul",{className:"pl-8",children:[e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/list/fixed-row-height",children:"Lists"})," (vertical scrolling)"]}),e.jsxs("li",{className:"list-disc",children:[e.jsx(l,{to:"/grid/grid",children:"Grids"})," (horizontal and vertical scrolling)"]})]}),e.jsx("div",{className:"text-xl mt-4",children:"Support"}),"If you like this project there are several ways to support it:",e.jsxs("ul",{className:"pl-8",children:[e.jsx("li",{className:"list-disc",children:e.jsx(i,{href:"https://github.com/sponsors/bvaughn/",children:"Become a GitHub sponsor"})}),e.jsx("li",{className:"list-disc",children:e.jsx(i,{href:"https://opencollective.com/react-window#sponsor",children:"Become an Open Collective sponsor"})}),e.jsxs("li",{className:"list-disc",children:["or"," ",e.jsx(i,{href:"http://givebrian.coffee/",children:"buy me a coffee"})]})]})]})}export{o as default};
+//# sourceMappingURL=GettingStartedRoute-D-bI_IZb.js.map

package/docs/assets/GettingStartedRoute-D-bI_IZb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GettingStartedRoute-D-bI_IZb.js","sources":["../../src/routes/GettingStartedRoute.tsx"],"sourcesContent":["import { Box } from \"../components/Box\";\nimport { Callout } from \"../components/Callout\";\nimport { ExternalLink } from \"../components/ExternalLink\";\nimport { Header } from \"../components/Header\";\nimport { Link } from \"../components/Link\";\n\nexport default function GettingStartedRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header title=\"Getting started\" />\n      <div>\n        <strong>react-window</strong> is a component library that helps render\n        large lists of data quickly and without the performance problems that\n        often go along with rendering a lot of data. It's used in a lot of\n        places, from{\" \"}\n        <ExternalLink href=\"https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en\">\n          React DevTools\n        </ExternalLink>{\" \"}\n        to the{\" \"}\n        <ExternalLink href=\"https://github.com/replayio/devtools\">\n          Replay browser\n        </ExternalLink>\n        .\n      </div>\n      <div className=\"text-xl mt-4\">Installation</div>\n      <div>Begin by installing the library from NPM:</div>\n      <code className=\"grow text-xs md:text-sm block text-left whitespace-pre-wrap rounded-md p-3 bg-black text-white!\">\n        npm install <span className=\"tok-keyword\">react-window</span>\n      </code>\n      <Callout intent=\"primary\">\n        TypeScript definitions are included within the published{\" \"}\n        <code>dist</code> folder and documentation is included within the{\" \"}\n        <code>docs</code> folder.\n      </Callout>\n      <div className=\"text-xl mt-4\">Learn more</div>\n      <div>\n        This library provides two basic types of components; choose one below to\n        learn more:\n      </div>\n      <ul className=\"pl-8\">\n        <li className=\"list-disc\">\n          <Link to=\"/list/fixed-row-height\">Lists</Link> (vertical scrolling)\n        </li>\n        <li className=\"list-disc\">\n          <Link to=\"/grid/grid\">Grids</Link> (horizontal and vertical scrolling)\n        </li>\n      </ul>\n      <div className=\"text-xl mt-4\">Support</div>\n      If you like this project there are several ways to support it:\n      <ul className=\"pl-8\">\n        <li className=\"list-disc\">\n          <ExternalLink href=\"https://github.com/sponsors/bvaughn/\">\n            Become a GitHub sponsor\n          </ExternalLink>\n        </li>\n        <li className=\"list-disc\">\n          <ExternalLink href=\"https://opencollective.com/react-window#sponsor\">\n            Become an Open Collective sponsor\n          </ExternalLink>\n        </li>\n        <li className=\"list-disc\">\n          or{\" \"}\n          <ExternalLink href=\"http://givebrian.coffee/\">\n            buy me a coffee\n          </ExternalLink>\n        </li>\n      </ul>\n    </Box>\n  );\n}\n"],"names":["GettingStartedRoute","jsxs","Box","direction","gap","children","jsx","Header","title","ExternalLink","href","className","Callout","intent","Link","to"],"mappings":"6GAMA,SAAwBA,IACtB,OACEC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,GAAAC,IAACC,EAAA,CAAOC,MAAM,2BACb,MAAA,CACCH,SAAA,GAAAC,IAAC,UAAOD,SAAA,iBAAqB,kMAGhB,IACbC,EAAAA,IAACG,EAAA,CAAaC,KAAK,wGAAwGL,SAAA,mBAE3G,IAAI,SACb,IACPC,EAAAA,IAACG,EAAA,CAAaC,KAAK,uCAAuCL,SAAA,mBAE3C,OAGjBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,mBAC9BC,IAAC,OAAID,SAAA,gDACLJ,KAAC,OAAA,CAAKU,UAAU,kGAAkGN,SAAA,CAAA,eACpGC,EAAAA,IAAC,OAAA,CAAKK,UAAU,cAAcN,SAAA,sBAE5CJ,KAACW,EAAA,CAAQC,OAAO,UAAUR,SAAA,CAAA,2DACiC,MACzDC,IAAC,QAAKD,SAAA,SAAW,mDAAiD,MAClEC,IAAC,QAAKD,SAAA,SAAW,cAEnBC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,iBAC9BC,IAAC,OAAID,SAAA,2FAILJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,yBAAyBV,SAAA,UAAY,6BAEhDJ,KAAC,KAAA,CAAGU,UAAU,YACZN,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CAAKC,GAAG,aAAaV,SAAA,UAAY,6CAGtCC,EAAAA,IAAC,MAAA,CAAIK,UAAU,eAAeN,SAAA,YAAa,mEAE3CJ,KAAC,KAAA,CAAGU,UAAU,OACZN,SAAA,GAAAC,IAAC,KAAA,CAAGK,UAAU,YACZN,SAAAC,EAAAA,IAACG,GAAaC,KAAK,uCAAuCL,yCAI5DC,IAAC,MAAGK,UAAU,YACZN,eAACI,EAAA,CAAaC,KAAK,kDAAkDL,SAAA,0CAIvEJ,KAAC,KAAA,CAAGU,UAAU,YAAYN,SAAA,CAAA,KACrB,IACHC,EAAAA,IAACG,EAAA,CAAaC,KAAK,2BAA2BL,SAAA,4BAOxD"}

package/docs/assets/{Grid-vld19V9I.js → Grid-Cio8auWD.js}

@@ -1,2 +1,2 @@
-import{r as e,j as t}from"./index-1kZ13GgQ.js";import{u as o,a as n,b as r}from"./arePropsEqual-Bd1V-lj7.js";function l({cellComponent:l,cellProps:i,children:s,className:a,columnCount:c,columnWidth:d,defaultHeight:u=0,defaultWidth:f=0,dir:m,gridRef:x,onCellsRendered:p,onResize:h,overscanCount:g=3,rowCount:I,rowHeight:v,style:S,tagName:w="div",...C}){const b=o(i),z=e.useMemo(()=>e.memo(l,n),[l]),[T,O]=e.useState(null),E=function(t,o){const[n,r]=e.useState("rtl"===o);return e.useLayoutEffect(()=>{t&&(o||r(function(e){let t=e;for(;t;){if(t.dir)return"rtl"===t.dir;t=t.parentElement}return!1}(t)))},[o,t]),n}(T,m),{getCellBounds:y,getEstimatedSize:R,startIndexOverscan:j,startIndexVisible:H,scrollToIndex:P,stopIndexOverscan:V,stopIndexVisible:A}=r({containerElement:T,defaultContainerSize:f,direction:"horizontal",isRtl:E,itemCount:c,itemProps:b,itemSize:d,onResize:h,overscanCount:g}),{getCellBounds:L,getEstimatedSize:N,startIndexOverscan:W,startIndexVisible:B,scrollToIndex:G,stopIndexOverscan:M,stopIndexVisible:$}=r({containerElement:T,defaultContainerSize:u,direction:"vertical",itemCount:I,itemProps:b,itemSize:v,onResize:h,overscanCount:g});e.useImperativeHandle(x,()=>({get element(){return T},scrollToCell({behavior:e="auto",columnAlign:t="auto",columnIndex:o,rowAlign:n="auto",rowIndex:r}){const l=P({align:t,containerScrollOffset:T?.scrollLeft??0,index:o}),i=G({align:n,containerScrollOffset:T?.scrollTop??0,index:r});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:e,left:l,top:i})},scrollToColumn({align:e="auto",behavior:t="auto",index:o}){const n=P({align:e,containerScrollOffset:T?.scrollLeft??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,left:n})},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const n=G({align:e,containerScrollOffset:T?.scrollTop??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,top:n})}}),[T,P,G]),e.useEffect(()=>{j>=0&&V>=0&&W>=0&&M>=0&&p&&p({columnStartIndex:H,columnStopIndex:A,rowStartIndex:B,rowStopIndex:$},{columnStartIndex:j,columnStopIndex:V,rowStartIndex:W,rowStopIndex:M})},[p,j,H,V,A,W,B,M,$]);const k=e.useMemo(()=>{const o=[];if(c>0&&I>0)for(let n=W;n<=M;n++){const r=L(n),l=[];for(let t=j;t<=V;t++){const o=y(t);l.push(e.createElement(z,{...b,ariaAttributes:{"aria-colindex":t+1,role:"gridcell"},columnIndex:t,key:t,rowIndex:n,style:{position:"absolute",left:E?void 0:0,right:E?0:void 0,transform:`translate(${E?-o.scrollOffset:o.scrollOffset}px, ${r.scrollOffset}px)`,height:I>1?r.size:"100%",width:o.size}}))}o.push(t.jsx("div",{role:"row","aria-rowindex":n+1,children:l},n))}return o},[z,b,c,j,V,y,L,E,I,W,M]),q=t.jsx("div",{"aria-hidden":!0,style:{height:N(),width:R(),zIndex:-1}});return e.createElement(w,{"aria-colcount":c,"aria-rowcount":I,role:"grid",...C,className:a,dir:m,ref:O,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...S}},k,s,q)}export{l as G};
-//# sourceMappingURL=Grid-vld19V9I.js.map
+import{r as e,j as t}from"./index-3R9tv3eW.js";import{u as o,a as n,b as r}from"./arePropsEqual-MBk0PiJi.js";function l({cellComponent:l,cellProps:i,children:s,className:a,columnCount:c,columnWidth:d,defaultHeight:u=0,defaultWidth:f=0,dir:m,gridRef:x,onCellsRendered:p,onResize:h,overscanCount:g=3,rowCount:I,rowHeight:v,style:S,tagName:w="div",...C}){const b=o(i),z=e.useMemo(()=>e.memo(l,n),[l]),[T,O]=e.useState(null),E=function(t,o){const[n,r]=e.useState("rtl"===o);return e.useLayoutEffect(()=>{t&&(o||r(function(e){let t=e;for(;t;){if(t.dir)return"rtl"===t.dir;t=t.parentElement}return!1}(t)))},[o,t]),n}(T,m),{getCellBounds:y,getEstimatedSize:R,startIndexOverscan:j,startIndexVisible:H,scrollToIndex:P,stopIndexOverscan:V,stopIndexVisible:A}=r({containerElement:T,defaultContainerSize:f,direction:"horizontal",isRtl:E,itemCount:c,itemProps:b,itemSize:d,onResize:h,overscanCount:g}),{getCellBounds:L,getEstimatedSize:N,startIndexOverscan:W,startIndexVisible:B,scrollToIndex:G,stopIndexOverscan:M,stopIndexVisible:$}=r({containerElement:T,defaultContainerSize:u,direction:"vertical",itemCount:I,itemProps:b,itemSize:v,onResize:h,overscanCount:g});e.useImperativeHandle(x,()=>({get element(){return T},scrollToCell({behavior:e="auto",columnAlign:t="auto",columnIndex:o,rowAlign:n="auto",rowIndex:r}){const l=P({align:t,containerScrollOffset:T?.scrollLeft??0,index:o}),i=G({align:n,containerScrollOffset:T?.scrollTop??0,index:r});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:e,left:l,top:i})},scrollToColumn({align:e="auto",behavior:t="auto",index:o}){const n=P({align:e,containerScrollOffset:T?.scrollLeft??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,left:n})},scrollToRow({align:e="auto",behavior:t="auto",index:o}){const n=G({align:e,containerScrollOffset:T?.scrollTop??0,index:o});"function"==typeof T?.scrollTo&&T.scrollTo({behavior:t,top:n})}}),[T,P,G]),e.useEffect(()=>{j>=0&&V>=0&&W>=0&&M>=0&&p&&p({columnStartIndex:H,columnStopIndex:A,rowStartIndex:B,rowStopIndex:$},{columnStartIndex:j,columnStopIndex:V,rowStartIndex:W,rowStopIndex:M})},[p,j,H,V,A,W,B,M,$]);const k=e.useMemo(()=>{const o=[];if(c>0&&I>0)for(let n=W;n<=M;n++){const r=L(n),l=[];for(let t=j;t<=V;t++){const o=y(t);l.push(e.createElement(z,{...b,ariaAttributes:{"aria-colindex":t+1,role:"gridcell"},columnIndex:t,key:t,rowIndex:n,style:{position:"absolute",left:E?void 0:0,right:E?0:void 0,transform:`translate(${E?-o.scrollOffset:o.scrollOffset}px, ${r.scrollOffset}px)`,height:r.size,width:o.size}}))}o.push(t.jsx("div",{role:"row","aria-rowindex":n+1,children:l},n))}return o},[z,b,c,j,V,y,L,E,I,W,M]),q=t.jsx("div",{"aria-hidden":!0,style:{height:N(),width:R(),zIndex:-1}});return e.createElement(w,{"aria-colcount":c,"aria-rowcount":I,role:"grid",...C,className:a,dir:m,ref:O,style:{position:"relative",width:"100%",height:"100%",maxHeight:"100%",maxWidth:"100%",flexGrow:1,overflow:"auto",...S}},k,s,q)}export{l as G};
+//# sourceMappingURL=Grid-Cio8auWD.js.map

package/docs/assets/Grid-Cio8auWD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-Cio8auWD.js","sources":["../../lib/components/grid/Grid.tsx","../../lib/core/useIsRtl.ts","../../lib/utils/isRtl.ts"],"sourcesContent":["import {\n  createElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type ReactNode\n} from \"react\";\nimport { useIsRtl } from \"../../core/useIsRtl\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { GridProps } from \"./types\";\n\nexport function Grid<\n  CellProps extends object,\n  TagName extends TagNames = \"div\"\n>({\n  cellComponent: CellComponentProp,\n  cellProps: cellPropsUnstable,\n  children,\n  className,\n  columnCount,\n  columnWidth,\n  defaultHeight = 0,\n  defaultWidth = 0,\n  dir,\n  gridRef,\n  onCellsRendered,\n  onResize,\n  overscanCount = 3,\n  rowCount,\n  rowHeight,\n  style,\n  tagName = \"div\" as TagName,\n  ...rest\n}: GridProps<CellProps, TagName>) {\n  const cellProps = useMemoizedObject(cellPropsUnstable);\n  const CellComponent = useMemo(\n    () => memo(CellComponentProp, arePropsEqual),\n    [CellComponentProp]\n  );\n\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n  const isRtl = useIsRtl(element, dir);\n\n  const {\n    getCellBounds: getColumnBounds,\n    getEstimatedSize: getEstimatedWidth,\n    startIndexOverscan: columnStartIndexOverscan,\n    startIndexVisible: columnStartIndexVisible,\n    scrollToIndex: scrollToColumnIndex,\n    stopIndexOverscan: columnStopIndexOverscan,\n    stopIndexVisible: columnStopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultWidth,\n    direction: \"horizontal\",\n    isRtl,\n    itemCount: columnCount,\n    itemProps: cellProps,\n    itemSize: columnWidth,\n    onResize,\n    overscanCount\n  });\n\n  const {\n    getCellBounds: getRowBounds,\n    getEstimatedSize: getEstimatedHeight,\n    startIndexOverscan: rowStartIndexOverscan,\n    startIndexVisible: rowStartIndexVisible,\n    scrollToIndex: scrollToRowIndex,\n    stopIndexOverscan: rowStopIndexOverscan,\n    stopIndexVisible: rowStopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultHeight,\n    direction: \"vertical\",\n    itemCount: rowCount,\n    itemProps: cellProps,\n    itemSize: rowHeight,\n    onResize,\n    overscanCount\n  });\n\n  useImperativeHandle(\n    gridRef,\n    () => ({\n      get element() {\n        return element;\n      },\n\n      scrollToCell({\n        behavior = \"auto\",\n        columnAlign = \"auto\",\n        columnIndex,\n        rowAlign = \"auto\",\n        rowIndex\n      }: {\n        behavior?: ScrollBehavior;\n        columnAlign?: Align;\n        columnIndex: number;\n        rowAlign?: Align;\n        rowIndex: number;\n      }) {\n        const left = scrollToColumnIndex({\n          align: columnAlign,\n          containerScrollOffset: element?.scrollLeft ?? 0,\n          index: columnIndex\n        });\n        const top = scrollToRowIndex({\n          align: rowAlign,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index: rowIndex\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            left,\n            top\n          });\n        }\n      },\n\n      scrollToColumn({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const left = scrollToColumnIndex({\n          align,\n          containerScrollOffset: element?.scrollLeft ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            left\n          });\n        }\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 = scrollToRowIndex({\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, scrollToColumnIndex, scrollToRowIndex]\n  );\n\n  useEffect(() => {\n    if (\n      columnStartIndexOverscan >= 0 &&\n      columnStopIndexOverscan >= 0 &&\n      rowStartIndexOverscan >= 0 &&\n      rowStopIndexOverscan >= 0 &&\n      onCellsRendered\n    ) {\n      onCellsRendered(\n        {\n          columnStartIndex: columnStartIndexVisible,\n          columnStopIndex: columnStopIndexVisible,\n          rowStartIndex: rowStartIndexVisible,\n          rowStopIndex: rowStopIndexVisible\n        },\n        {\n          columnStartIndex: columnStartIndexOverscan,\n          columnStopIndex: columnStopIndexOverscan,\n          rowStartIndex: rowStartIndexOverscan,\n          rowStopIndex: rowStopIndexOverscan\n        }\n      );\n    }\n  }, [\n    onCellsRendered,\n    columnStartIndexOverscan,\n    columnStartIndexVisible,\n    columnStopIndexOverscan,\n    columnStopIndexVisible,\n    rowStartIndexOverscan,\n    rowStartIndexVisible,\n    rowStopIndexOverscan,\n    rowStopIndexVisible\n  ]);\n\n  const cells = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (columnCount > 0 && rowCount > 0) {\n      for (\n        let rowIndex = rowStartIndexOverscan;\n        rowIndex <= rowStopIndexOverscan;\n        rowIndex++\n      ) {\n        const rowBounds = getRowBounds(rowIndex);\n\n        const columns: ReactNode[] = [];\n\n        for (\n          let columnIndex = columnStartIndexOverscan;\n          columnIndex <= columnStopIndexOverscan;\n          columnIndex++\n        ) {\n          const columnBounds = getColumnBounds(columnIndex);\n\n          columns.push(\n            <CellComponent\n              {...(cellProps as CellProps)}\n              ariaAttributes={{\n                \"aria-colindex\": columnIndex + 1,\n                role: \"gridcell\"\n              }}\n              columnIndex={columnIndex}\n              key={columnIndex}\n              rowIndex={rowIndex}\n              style={{\n                position: \"absolute\",\n                left: isRtl ? undefined : 0,\n                right: isRtl ? 0 : undefined,\n                transform: `translate(${isRtl ? -columnBounds.scrollOffset : columnBounds.scrollOffset}px, ${rowBounds.scrollOffset}px)`,\n                height: rowBounds.size,\n                width: columnBounds.size\n              }}\n            />\n          );\n        }\n\n        children.push(\n          <div key={rowIndex} role=\"row\" aria-rowindex={rowIndex + 1}>\n            {columns}\n          </div>\n        );\n      }\n    }\n    return children;\n  }, [\n    CellComponent,\n    cellProps,\n    columnCount,\n    columnStartIndexOverscan,\n    columnStopIndexOverscan,\n    getColumnBounds,\n    getRowBounds,\n    isRtl,\n    rowCount,\n    rowStartIndexOverscan,\n    rowStopIndexOverscan\n  ]);\n\n  const sizingElement = (\n    <div\n      aria-hidden\n      style={{\n        height: getEstimatedHeight(),\n        width: getEstimatedWidth(),\n        zIndex: -1\n      }}\n    ></div>\n  );\n\n  return createElement(\n    tagName,\n    {\n      \"aria-colcount\": columnCount,\n      \"aria-rowcount\": rowCount,\n      role: \"grid\",\n      ...rest,\n      className,\n      dir,\n      ref: setElement,\n      style: {\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        maxHeight: \"100%\",\n        maxWidth: \"100%\",\n        flexGrow: 1,\n        overflow: \"auto\",\n        ...style\n      }\n    },\n    cells,\n    children,\n    sizingElement\n  );\n}\n","import { useLayoutEffect, useState, type HTMLAttributes } from \"react\";\nimport { isRtl } from \"../utils/isRtl\";\n\nexport function useIsRtl(\n  element: HTMLElement | null,\n  dir: HTMLAttributes<HTMLElement>[\"dir\"]\n) {\n  const [value, setValue] = useState(dir === \"rtl\");\n\n  useLayoutEffect(() => {\n    if (element) {\n      if (!dir) {\n        setValue(isRtl(element));\n      }\n    }\n  }, [dir, element]);\n\n  return value;\n}\n","export function isRtl(element: HTMLElement) {\n  let currentElement: HTMLElement | null = element;\n  while (currentElement) {\n    if (currentElement.dir) {\n      return currentElement.dir === \"rtl\";\n    }\n\n    currentElement = currentElement.parentElement;\n  }\n\n  return false;\n}\n"],"names":["Grid","cellComponent","CellComponentProp","cellProps","cellPropsUnstable","children","className","columnCount","columnWidth","defaultHeight","defaultWidth","dir","gridRef","onCellsRendered","onResize","overscanCount","rowCount","rowHeight","style","tagName","rest","useMemoizedObject","CellComponent","useMemo","memo","arePropsEqual","element","setElement","useState","isRtl","value","setValue","useLayoutEffect","currentElement","parentElement","useIsRtl","getCellBounds","getColumnBounds","getEstimatedSize","getEstimatedWidth","startIndexOverscan","columnStartIndexOverscan","startIndexVisible","columnStartIndexVisible","scrollToIndex","scrollToColumnIndex","stopIndexOverscan","columnStopIndexOverscan","stopIndexVisible","columnStopIndexVisible","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","getRowBounds","getEstimatedHeight","rowStartIndexOverscan","rowStartIndexVisible","scrollToRowIndex","rowStopIndexOverscan","rowStopIndexVisible","useImperativeHandle","scrollToCell","behavior","columnAlign","columnIndex","rowAlign","rowIndex","left","align","containerScrollOffset","scrollLeft","index","top","scrollTop","scrollTo","scrollToColumn","scrollToRow","useEffect","columnStartIndex","columnStopIndex","rowStartIndex","rowStopIndex","cells","rowBounds","columns","columnBounds","push","createElement","ariaAttributes","role","key","position","right","transform","scrollOffset","height","size","width","jsx","sizingElement","zIndex","ref","maxHeight","maxWidth","flexGrow","overflow"],"mappings":"6GAgBO,SAASA,GAIdC,cAAeC,EACfC,UAAWC,EAAAC,SACXA,EAAAC,UACAA,EAAAC,YACAA,EAAAC,YACAA,EAAAC,cACAA,EAAgB,EAAAC,aAChBA,EAAe,EAAAC,IACfA,EAAAC,QACAA,EAAAC,gBACAA,EAAAC,SACAA,EAAAC,cACAA,EAAgB,EAAAC,SAChBA,EAAAC,UACAA,EAAAC,MACAA,EAAAC,QACAA,EAAU,SACPC,IAEH,MAAMjB,EAAYkB,EAAkBjB,GAC9BkB,EAAgBC,EAAAA,QACpB,IAAMC,EAAAA,KAAKtB,EAAmBuB,GAC9B,CAACvB,KAGIwB,EAASC,GAAcC,EAAAA,SAAgC,MAExDC,EC5CD,SACLH,EACAf,GAEA,MAAOmB,EAAOC,GAAYH,EAAAA,SAAiB,QAARjB,GAUnC,OARAqB,EAAAA,gBAAgB,KACVN,IACGf,GACHoB,ECZD,SAAeL,GACpB,IAAIO,EAAqCP,EACzC,KAAOO,GAAgB,CACrB,GAAIA,EAAetB,IACjB,MAA8B,QAAvBsB,EAAetB,IAGxBsB,EAAiBA,EAAeC,aAClC,CAEA,OAAO,CACT,CDCiBL,CAAMH,MAGlB,CAACf,EAAKe,IAEFI,CACT,CD6BgBK,CAAST,EAASf,IAG9ByB,cAAeC,EACfC,iBAAkBC,EAClBC,mBAAoBC,EACpBC,kBAAmBC,EACnBC,cAAeC,EACfC,kBAAmBC,EACnBC,iBAAkBC,GAChBC,EAAe,CACjBC,iBAAkBzB,EAClB0B,qBAAsB1C,EACtB2C,UAAW,aACXxB,MAAAA,EACAyB,UAAW/C,EACXgD,UAAWpD,EACXqD,SAAUhD,EACVM,WACAC,mBAIAqB,cAAeqB,EACfnB,iBAAkBoB,EAClBlB,mBAAoBmB,EACpBjB,kBAAmBkB,EACnBhB,cAAeiB,EACff,kBAAmBgB,EACnBd,iBAAkBe,GAChBb,EAAe,CACjBC,iBAAkBzB,EAClB0B,qBAAsB3C,EACtB4C,UAAW,WACXC,UAAWtC,EACXuC,UAAWpD,EACXqD,SAAUvC,EACVH,WACAC,kBAGFiD,EAAAA,oBACEpD,EACA,KAAA,CACE,WAAIc,GACF,OAAOA,CACT,EAEA,YAAAuC,EAAaC,SACXA,EAAW,OAAAC,YACXA,EAAc,OAAAC,YACdA,EAAAC,SACAA,EAAW,OAAAC,SACXA,IAQA,MAAMC,EAAO1B,EAAoB,CAC/B2B,MAAOL,EACPM,sBAAuB/C,GAASgD,YAAc,EAC9CC,MAAOP,IAEHQ,EAAMf,EAAiB,CAC3BW,MAAOH,EACPI,sBAAuB/C,GAASmD,WAAa,EAC7CF,MAAOL,IAGwB,mBAAtB5C,GAASoD,UAClBpD,EAAQoD,SAAS,CACfZ,WACAK,OACAK,OAGN,EAEA,cAAAG,EAAeP,MACbA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMJ,EAAO1B,EAAoB,CAC/B2B,QACAC,sBAAuB/C,GAASgD,YAAc,EAC9CC,UAG+B,mBAAtBjD,GAASoD,UAClBpD,EAAQoD,SAAS,CACfZ,WACAK,QAGN,EAEA,WAAAS,EAAYR,MACVA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMC,EAAMf,EAAiB,CAC3BW,QACAC,sBAAuB/C,GAASmD,WAAa,EAC7CF,UAG+B,mBAAtBjD,GAASoD,UAClBpD,EAAQoD,SAAS,CACfZ,WACAU,OAGN,IAEF,CAAClD,EAASmB,EAAqBgB,IAGjCoB,EAAAA,UAAU,KAENxC,GAA4B,GAC5BM,GAA2B,GAC3BY,GAAyB,GACzBG,GAAwB,GACxBjD,GAEAA,EACE,CACEqE,iBAAkBvC,EAClBwC,gBAAiBlC,EACjBmC,cAAexB,EACfyB,aAActB,GAEhB,CACEmB,iBAAkBzC,EAClB0C,gBAAiBpC,EACjBqC,cAAezB,EACf0B,aAAcvB,KAInB,CACDjD,EACA4B,EACAE,EACAI,EACAE,EACAU,EACAC,EACAE,EACAC,IAGF,MAAMuB,EAAQ/D,EAAAA,QAAQ,KACpB,MAAMlB,EAAwB,GAC9B,GAAIE,EAAc,GAAKS,EAAW,EAChC,IAAA,IACMsD,EAAWX,EACfW,GAAYR,EACZQ,IACA,CACA,MAAMiB,EAAY9B,EAAaa,GAEzBkB,EAAuB,GAE7B,IAAA,IACMpB,EAAc3B,EAClB2B,GAAerB,EACfqB,IACA,CACA,MAAMqB,EAAepD,EAAgB+B,GAErCoB,EAAQE,KACNC,EAAAA,cAACrE,EAAA,IACMnB,EACLyF,eAAgB,CACd,gBAAiBxB,EAAc,EAC/ByB,KAAM,YAERzB,cACA0B,IAAK1B,EACLE,WACApD,MAAO,CACL6E,SAAU,WACVxB,KAAM1C,OAAQ,EAAY,EAC1BmE,MAAOnE,EAAQ,OAAI,EACnBoE,UAAW,aAAapE,GAAS4D,EAAaS,aAAeT,EAAaS,mBAAmBX,EAAUW,kBACvGC,OAAQZ,EAAUa,KAClBC,MAAOZ,EAAaW,QAI5B,CAEA/F,EAASqF,KACPY,EAAAA,IAAC,OAAmBT,KAAK,MAAM,gBAAevB,EAAW,EACtDjE,YADOiE,GAId,CAEF,OAAOjE,GACN,CACDiB,EACAnB,EACAI,EACAkC,EACAM,EACAV,EACAoB,EACA5B,EACAb,EACA2C,EACAG,IAGIyC,EACJD,EAAAA,IAAC,MAAA,CACC,eAAW,EACXpF,MAAO,CACLiF,OAAQzC,IACR2C,MAAO9D,IACPiE,QAAQ,KAKd,OAAOb,EAAAA,cACLxE,EACA,CACE,gBAAiBZ,EACjB,gBAAiBS,EACjB6E,KAAM,UACHzE,EACHd,YACAK,MACA8F,IAAK9E,EACLT,MAAO,CACL6E,SAAU,WACVM,MAAO,OACPF,OAAQ,OACRO,UAAW,OACXC,SAAU,OACVC,SAAU,EACVC,SAAU,UACP3F,IAGPoE,EACAjF,EACAkG,EAEJ"}

package/docs/assets/{Header-CDZFHeTb.js → Header-DM8OHOd_.js}

@@ -1,2 +1,2 @@
-import{r as e,j as t,B as s,F as i}from"./index-1kZ13GgQ.js";function n({section:n,title:c}){return e.useEffect(()=>{const e=document.title;return document.title=`react-window: ${n?`${n}: ${c}`:c}`,()=>{document.title=e}}),t.jsxs(s,{align:"center",direction:"row",gap:2,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"text-xl",children:n}),t.jsx(i,{className:"size-4 text-slate-400"})]}),t.jsx("div",{className:"text-xl",children:c})]})}export{n as H};
-//# sourceMappingURL=Header-CDZFHeTb.js.map
+import{r as e,j as t,B as s,F as i}from"./index-3R9tv3eW.js";function n({section:n,title:c}){return e.useEffect(()=>{const e=document.title;return document.title=`react-window: ${n?`${n}: ${c}`:c}`,()=>{document.title=e}}),t.jsxs(s,{align:"center",direction:"row",gap:2,children:[n&&t.jsxs(t.Fragment,{children:[t.jsx("div",{className:"text-xl",children:n}),t.jsx(i,{className:"size-4 text-slate-400"})]}),t.jsx("div",{className:"text-xl",children:c})]})}export{n as H};
+//# sourceMappingURL=Header-DM8OHOd_.js.map

package/docs/assets/{Header-CDZFHeTb.js.map → Header-DM8OHOd_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Header-CDZFHeTb.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-DM8OHOd_.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-Dk2qJcyq.js

@@ -0,0 +1,2 @@
+import{j as s,c as a,r as n,B as p}from"./index-3R9tv3eW.js";import{B as t}from"./arePropsEqual-MBk0PiJi.js";import{C as c}from"./Code-BJ6U_DpT.js";import{L as e}from"./LoadingSpinner-CcA45RYo.js";import{G as l}from"./Grid-Cio8auWD.js";import{j as i}from"./contacts-Bxrk2JS2.js";const o='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">Grid</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">HorizontalList</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">emails</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">emails</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">CellComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">cellProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">emails</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnWidth</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">150</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">1</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-string">"100%"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',d='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponentProps</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">CellComponent</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">columnIndex</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">emails</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">CellComponentProps</span><span class="">&#60;</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">emails</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">string</span><span class="tok-punctuation">[</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-punctuation">}</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">className</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">cn</span><span class="tok-punctuation">(</span><span class="tok-string">"px-2 truncate text-center leading-[2.5]"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-string">"bg-white/10 rounded"</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">columnIndex</span><span class=""> </span><span class="tok-operator">%</span><span class=""> </span><span class="tok-number">2</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">style</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">style</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">{</span><span class="tok-variableName">emails</span><span class="tok-punctuation">[</span><span class="tok-variableName">columnIndex</span><span class="tok-punctuation">]</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;/</span><span class="tok-typeName">div</span><span class="tok-punctuation">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function r({columnIndex:n,emails:p,style:t}){return s.jsx("div",{className:a("px-2 truncate text-center leading-[2.5]",{"bg-white/10 rounded":n%2==0}),style:t,children:p[n]})}function u({emails:a}){return s.jsx(l,{cellComponent:r,cellProps:{emails:a},columnCount:a.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function h(){const a=n.useMemo(()=>i?i.map(s=>s.email).sort((s,a)=>s.localeCompare(a)):[],[]);return s.jsxs(p,{direction:"column",gap:4,children:[s.jsx("div",{children:"A horizontal list is just a grid with only one row."}),s.jsx("div",{children:"Here's an example horizontal list (grid) of emails:"}),s.jsxs(t,{className:"h-20","data-focus-within":"bold",children:[!a.length&&s.jsx(e,{}),s.jsx(u,{emails:a})]}),s.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),s.jsx(c,{html:o}),s.jsx("div",{children:"And here's the cell renderer:"}),s.jsx(c,{html:d})]})}export{h as default};
+//# sourceMappingURL=HorizontalListsRoute-Dk2qJcyq.js.map

package/docs/assets/HorizontalListsRoute-Dk2qJcyq.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalListsRoute-Dk2qJcyq.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 HorizontalListMarkdown from \"../../../public/generated/code-snippets/HorizontalList.json\";\nimport HorizontalListCellRendererMarkdown from \"../../../public/generated/code-snippets/HorizontalListCellRenderer.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Code } from \"../../components/code/Code\";\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      <Code html={HorizontalListMarkdown.html} />\n      <div>And here's the cell renderer:</div>\n      <Code html={HorizontalListCellRendererMarkdown.html} />\n    </Box>\n  );\n}\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/contacts.json\";\n\nexport function useEmails(): string[] {\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  }, []);\n}\n"],"names":["CellComponent","columnIndex","emails","style","jsx","className","cn","children","HorizontalList","Grid","cellComponent","cellProps","columnCount","length","columnWidth","rowCount","rowHeight","HorizontalListsRoute","useMemo","json","map","contact","email","sort","a","b","localeCompare","jsxs","Box","direction","gap","Block","LoadingSpinner","Code","html","HorizontalListMarkdown","HorizontalListCellRendererMarkdown"],"mappings":"okUAMA,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,CCRA,SAAwBC,IACtB,MAAMf,ECNCgB,EAAAA,QAAQ,IACTC,EACKA,EACJC,IAAKC,GAAYA,EAAQC,OACzBC,KAAK,CAACC,EAAGC,IAAMD,EAAEE,cAAcD,IAG7B,GACN,IDAH,OACEE,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,GAAAH,IAAC,OAAIG,SAAA,0DACLH,IAAC,OAAIG,SAAA,wDACLoB,EAAAA,KAACI,EAAA,CAAM1B,UAAU,OAAO,oBAAkB,OACvCE,SAAA,EAACL,EAAOW,cAAWmB,EAAA,CAAA,GACpB5B,MAACI,GAAeN,gBAElBE,IAAC,OAAIG,SAAA,mEACLH,IAAC6B,EAAA,CAAKC,KAAMC,MACZ/B,IAAC,OAAIG,SAAA,oCACLH,IAAC6B,EAAA,CAAKC,KAAME,MAGlB"}

package/docs/assets/ImperativeApiRoute-BdK7xl-u.js

@@ -0,0 +1,2 @@
+import{r as s,j as a,B as n,a as t,C as p}from"./index-3R9tv3eW.js";import{L as e}from"./List-B9HC1vRM.js";import{B as i}from"./arePropsEqual-MBk0PiJi.js";import{C as o}from"./Code-BJ6U_DpT.js";import{H as l}from"./Header-DM8OHOd_.js";import{L as c}from"./LoadingSpinner-CcA45RYo.js";import{S as r}from"./Select-BtAY4kA-.js";import{u as d,R as u}from"./useCitiesByState-DlHLfAIQ.js";import{C as k}from"./ContinueLink-Mq4XOwMu.js";import"./addresses-CDQyd4n9.js";const h=s.useRef,m='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">list</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">listRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">list</span><span class="">?.</span><span class="tok-propertyName">scrollToRow</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">align</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>',v='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useListCallbackRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">list</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setList</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">list</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setList</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',f='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">listRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useListRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class=""> </span><span class="tok-propertyName">listRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">listRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',g='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useListRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span></div>';function x(s,{items:a}){return"state"===a[s].type?30:25}const y={label:"",value:""},N=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));N.unshift(y);const b=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));function j(){const[j,w]=s.useState(),[C,L]=s.useState(),[R,A]=s.useState(y),S=d(),I=s.useMemo(()=>{const s=S.filter(s=>"state"===s.type).map(s=>({label:s.state,value:s.state}));return s.unshift(y),s},[S]),P=h(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(l,{section:"Lists",title:"Imperative API"}),a.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:"}),a.jsx(o,{html:g}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(o,{html:f}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(o,{html:m}),a.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(r,{className:"flex-1",onChange:w,options:N,placeholder:"Align",value:j}),a.jsx(r,{className:"flex-1",onChange:L,options:b,placeholder:"Scroll behavior",value:C})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(r,{className:"flex-1",onChange:A,options:I,placeholder:"State",value:R}),a.jsx(t,{className:"shrink-0",disabled:!R.value,onClick:()=>{const s=S.findIndex(s=>"state"===s.type&&s.state===R.value);P.current?.scrollToRow({align:j?.value,behavior:C?.value,index:s})},children:"Scroll"})]}),a.jsxs(i,{className:"h-50","data-focus-within":"bold",children:[!S.length&&a.jsx(c,{}),a.jsx(e,{listRef:P,rowComponent:u,rowCount:S.length,rowHeight:x,rowProps:{items:S}})]}),a.jsxs(p,{intent:"primary",children:[a.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."]}),a.jsx(o,{html:v}),a.jsx(k,{to:"/list/aria-roles",title:"ARIA roles"})]})}b.unshift(y);export{j as default};
+//# sourceMappingURL=ImperativeApiRoute-BdK7xl-u.js.map

package/docs/assets/ImperativeApiRoute-BdK7xl-u.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImperativeApiRoute-BdK7xl-u.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 listRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/listRefClickEventHandler.json\";\nimport useListCallbackRefMarkdown from \"../../../public/generated/code-snippets/useListCallbackRef.json\";\nimport useListRefMarkdown from \"../../../public/generated/code-snippets/useListRef.json\";\nimport useListRefImportMarkdown from \"../../../public/generated/code-snippets/useListRefImport.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\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\";\nimport { ContinueLink } from \"../../components/ContinueLink\";\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      <Code html={useListRefImportMarkdown.html} />\n      <div>Attach the ref during render:</div>\n      <Code html={useListRefMarkdown.html} />\n      <div>And call API methods in an event handler:</div>\n      <Code html={listRefClickEventHandlerMarkdown.html} />\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      <Code html={useListCallbackRefMarkdown.html} />\n      <ContinueLink to=\"/list/aria-roles\" title=\"ARIA roles\" />\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","Code","html","useListRefImportMarkdown","useListRefMarkdown","listRefClickEventHandlerMarkdown","Select","className","onChange","placeholder","Button","disabled","onClick","findIndex","current","scrollToRow","Block","length","LoadingSpinner","List","rowComponent","RowComponent","rowCount","rowProps","Callout","intent","useListCallbackRefMarkdown","ContinueLink","to"],"mappings":"8cAMO,MAAMA,EAAaC,EAAAA,w7QCF1B,SAASC,EAAUC,GAAeC,MAAEA,IAClC,MAA6B,UAAtBA,EAAMD,GAAOE,KAAmB,GAAK,EAC9C,CCaA,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,CAAKC,KAAMC,MACZN,IAAC,OAAID,SAAA,oCACLC,IAACI,EAAA,CAAKC,KAAME,MACZP,IAAC,OAAID,SAAA,gDACLC,IAACI,EAAA,CAAKC,KAAMG,MACZR,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU9B,EACVU,QAAShB,EACTqC,YAAY,QACZtC,MAAOM,IAEToB,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAU3B,EACVO,QAASb,EACTkC,YAAY,kBACZtC,MAAOS,OAGXY,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACS,EAAA,CACCC,UAAU,SACVC,SAAUzB,EACVK,QAASF,EACTuB,YAAY,QACZtC,MAAOW,IAETe,EAAAA,IAACa,EAAA,CACCH,UAAU,WACVI,UAAW7B,EAAMX,MACjByC,QAnDY,KAClB,MAAM9C,EAAQkB,EAAc6B,UACzBvB,GAAuB,UAAdA,EAAKtB,MAAoBsB,EAAKR,QAAUA,EAAMX,OAE1DoB,EAAQuB,SAASC,YAAY,CAC3BtC,MAAOA,GAAON,MACdS,SAAUA,GAAUT,MACpBL,WA6CG8B,SAAA,cAIHJ,EAAAA,KAACwB,EAAA,CAAMT,UAAU,OAAO,oBAAkB,OACvCX,SAAA,EAACZ,EAAciC,cAAWC,EAAA,CAAA,GAC3BrB,EAAAA,IAACsB,EAAA,CACC5B,UACA6B,aAAcC,EACdC,SAAUtC,EAAciC,OACxBpD,YACA0D,SAAU,CAAExD,MAAOiB,UAGvBQ,KAACgC,EAAA,CAAQC,OAAO,UACd7B,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOU,UAAU,eAAeX,SAAA,SAAa,wGAGhDC,IAACI,EAAA,CAAKC,KAAMwB,IACZ7B,EAAAA,IAAC8B,EAAA,CAAaC,GAAG,mBAAmB5B,MAAM,iBAGhD,CAnGAzB,EAAUD,QAAQL"}

package/docs/assets/ImperativeApiRoute-DdlTcZ7C.js

@@ -0,0 +1,2 @@
+import{r as s,j as a,B as n,a as t,C as p}from"./index-3R9tv3eW.js";import{G as e}from"./Grid-Cio8auWD.js";import{B as o}from"./arePropsEqual-MBk0PiJi.js";import{C as l}from"./Code-BJ6U_DpT.js";import{H as i}from"./Header-DM8OHOd_.js";import{L as c}from"./LoadingSpinner-CcA45RYo.js";import{S as r}from"./Select-BtAY4kA-.js";import{C as d}from"./CellComponent.example-ChzwGLAD.js";import{u,C as k,c as h}from"./useContacts-C-Fuwn4U.js";import{C as m}from"./ContinueLink-Mq4XOwMu.js";import"./contacts-Bxrk2JS2.js";const v=s.useRef,g='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">onClick</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">grid</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">gridRef</span><span class="tok-operator">.</span><span class="tok-propertyName">current</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">grid</span><span class="">?.</span><span class="tok-propertyName">scrollToCell</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">behavior</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">columnIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">10</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowAlign</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-string">"auto"</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-comment">// optional</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">rowIndex</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">250</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span></div>',f='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridCallbackRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">grid</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setGrid</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridCallbackRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">useCustomHook</span><span class="tok-punctuation">(</span><span class="tok-variableName">grid</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">setGrid</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',x='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">Example</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">props</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Props</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">gridRef</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useGridRef</span><span class="tok-punctuation">(</span><span class="tok-keyword">null</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">Grid</span><span class=""> </span><span class="tok-propertyName">gridRef</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">gridRef</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">{</span><span class="tok-punctuation">...</span><span class="tok-variableName">props</span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-punctuation">/&#62;</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',y='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">import</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-variableName tok-definition">useGridRef</span><span class=""> </span><span class="tok-punctuation">}</span><span class=""> </span><span class="tok-keyword">from</span><span class=""> </span><span class="tok-string">"react-window"</span><span class="tok-punctuation">;</span></div>',b={label:"",value:""},N=["auto","center","end","smart","start"].map(s=>({label:`align: ${s}`,value:s}));N.unshift(b);const j=["auto","instant","smooth"].map(s=>({label:`behavior: ${s}`,value:s}));j.unshift(b);const w=k.map(s=>({label:s,value:s})).sort((s,a)=>s.label.localeCompare(a.label));function C(){const C=u(),A=s.useMemo(()=>{const s=[];return C&&(C.reduce((s,a)=>(s.includes(a.title)||s.push(a.title),s),new Array).sort().forEach(a=>{s.push({label:a,value:a})}),s.unshift(b)),s},[C]),[I,R]=s.useState(),[G,P]=s.useState(),[S,T]=s.useState(b),[E,H]=s.useState(b),L=v(null);return a.jsxs(n,{direction:"column",gap:4,children:[a.jsx(i,{section:"Grids",title:"Imperative API"}),a.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:"}),a.jsx(l,{html:y}),a.jsx("div",{children:"Attach the ref during render:"}),a.jsx(l,{html:x}),a.jsx("div",{children:"And call API methods in an event handler:"}),a.jsx(l,{html:g}),a.jsx("div",{children:"The form below uses the imperative API to scroll the list:"}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(r,{className:"flex-1",onChange:R,options:N,placeholder:"Align",value:I}),a.jsx(r,{className:"flex-1",onChange:P,options:j,placeholder:"Scroll behavior",value:G})]}),a.jsxs(n,{direction:"row",gap:4,children:[a.jsx(r,{className:"flex-1",onChange:H,options:A,placeholder:"Job title",value:E}),a.jsx(r,{className:"flex-1",onChange:T,options:w,placeholder:"Column",value:S}),a.jsx(t,{className:"shrink-0",disabled:!S.value&&!E.value,onClick:()=>{const s=L.current;if(s){const a=S?.value?k.indexOf(S.value):void 0,n=E?.value?C.findIndex(s=>s.title===E.value):void 0;void 0!==a&&void 0!==n?s.scrollToCell({behavior:G?.value,columnAlign:I?.value,columnIndex:a,rowAlign:I?.value,rowIndex:n}):void 0!==a?s.scrollToColumn({align:I?.value,behavior:G?.value,index:a}):void 0!==n&&s.scrollToRow({align:I?.value,behavior:G?.value,index:n})}},children:"Scroll"})]}),a.jsxs(o,{className:"h-50","data-focus-within":"bold",children:[!C.length&&a.jsx(c,{}),a.jsx(e,{cellComponent:d,cellProps:{contacts:C},columnCount:w.length,columnWidth:h,gridRef:L,rowCount:C.length,rowHeight:25})]}),a.jsxs("div",{children:["The Grid API also provides ",a.jsx("code",{children:"scrollToColumn"})," and"," ",a.jsx("code",{children:"scrollToRow"})," methods for single-axis scrolling."]}),a.jsxs(p,{intent:"primary",children:[a.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."]}),a.jsx(l,{html:f}),a.jsx(m,{to:"/grid/aria-roles",title:"ARIA roles"})]})}export{C as default};
+//# sourceMappingURL=ImperativeApiRoute-DdlTcZ7C.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImperativeApiRoute-DdlTcZ7C.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 gridRefClickEventHandlerMarkdown from \"../../../public/generated/code-snippets/gridRefClickEventHandler.json\";\nimport useGridCallbackRefMarkdown from \"../../../public/generated/code-snippets/useGridCallbackRef.json\";\nimport useGridRefMarkdown from \"../../../public/generated/code-snippets/useGridRef.json\";\nimport useGridRefImportMarkdown from \"../../../public/generated/code-snippets/useGridRefImport.json\";\nimport { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Button } from \"../../components/Button\";\nimport { Callout } from \"../../components/Callout\";\nimport { Code } from \"../../components/code/Code\";\nimport { Header } from \"../../components/Header\";\nimport { LoadingSpinner } from \"../../components/LoadingSpinner\";\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 { ContinueLink } from \"../../components/ContinueLink\";\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      <Code html={useGridRefImportMarkdown.html} />\n      <div>Attach the ref during render:</div>\n      <Code html={useGridRefMarkdown.html} />\n      <div>And call API methods in an event handler:</div>\n      <Code html={gridRefClickEventHandlerMarkdown.html} />\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      <Code html={useGridCallbackRefMarkdown.html} />\n      <ContinueLink to=\"/grid/aria-roles\" title=\"ARIA roles\" />\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","Code","html","useGridRefImportMarkdown","useGridRefMarkdown","gridRefClickEventHandlerMarkdown","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","useGridCallbackRefMarkdown","ContinueLink","to"],"mappings":"kgBAMO,MAAMA,EAAaC,EAAAA,koSCepBC,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,WAEFI,EAAUD,QAAQL,GAElB,MAAMO,EAA4BC,EAAYJ,IAAKK,IAAA,CACjDR,MAAOQ,EACPP,MAAOO,KACLC,KAAK,CAACC,EAAGC,IAAMD,EAAEV,MAAMY,cAAcD,EAAEX,QAE3C,SAAwBa,IACtB,MAAMC,EAAWC,IAEXC,EAAeC,EAAAA,QAA0B,KAC7C,MAAMC,EAA4B,GAoBlC,OAnBIJ,IACFA,EACGK,OAAO,CAACC,EAAOC,KACTD,EAAME,SAASD,EAAQE,QAC1BH,EAAMI,KAAKH,EAAQE,OAEdH,GACN,IAAIK,OACNhB,OACAiB,QAASH,IACRL,EAAQM,KAAK,CACXxB,MAAOuB,EACPtB,MAAOsB,MAIbL,EAAQd,QAAQL,IAGXmB,GACN,CAACJ,KAEGa,EAAOC,GAAYC,cACnBC,EAAUC,GAAeF,cAGzBG,EAAQC,GAAaJ,EAAAA,SAAyB9B,IAC9CwB,EAAOW,GAAYL,EAAAA,SAAyB9B,GAE7CoC,EAAUtC,EAAW,MAqC3B,OACEuC,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BC,SAAA,CAAAC,EAAAA,IAACC,EAAA,CAAOC,QAAQ,QAAQpB,MAAM,qBAC9BkB,IAAC,OAAID,SAAA,wIAILC,IAACG,EAAA,CAAKC,KAAMC,MACZL,IAAC,OAAID,SAAA,oCACLC,IAACG,EAAA,CAAKC,KAAME,MACZN,IAAC,OAAID,SAAA,gDACLC,IAACG,EAAA,CAAKC,KAAMG,MACZP,IAAC,OAAID,SAAA,+DACLJ,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUvB,EACVV,QAAShB,EACTkD,YAAY,QACZnD,MAAO0B,IAETc,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUpB,EACVb,QAASb,EACT+C,YAAY,kBACZnD,MAAO6B,OAGXM,EAAAA,KAACC,EAAA,CAAIC,UAAU,MAAMC,IAAK,EACxBC,SAAA,CAAAC,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUjB,EACVhB,QAASF,EACToC,YAAY,YACZnD,MAAOsB,IAETkB,EAAAA,IAACQ,EAAA,CACCC,UAAU,SACVC,SAAUlB,EACVf,QAASZ,EACT8C,YAAY,SACZnD,MAAO+B,IAETS,EAAAA,IAACY,EAAA,CACCH,UAAU,WACVI,UAAWtB,EAAO/B,QAAUsB,EAAMtB,MAClCsD,QAlFa,KACnB,MAAMC,EAAOrB,EAAQsB,QACrB,GAAID,EAAM,CACR,MAAME,EAAc1B,GAAQ/B,MACxBM,EAAYoD,QAAQ3B,EAAO/B,YAC3B,EAEE2D,EAAWrC,GAAOtB,MACpBa,EAAS+C,UAAWC,GAAQA,EAAIvC,QAAUA,EAAMtB,YAChD,OAEgB,IAAhByD,QAA0C,IAAbE,EAC/BJ,EAAKO,aAAa,CAChBjC,SAAUA,GAAU7B,MACpB+D,YAAarC,GAAO1B,MACpByD,cACAO,SAAUtC,GAAO1B,MACjB2D,kBAEuB,IAAhBF,EACTF,EAAKU,eAAe,CAClBvC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOT,SAEa,IAAbE,GACTJ,EAAKY,YAAY,CACfzC,MAAOA,GAAO1B,MACd6B,SAAUA,GAAU7B,MACpBkE,MAAOP,GAGb,GAmDKpB,SAAA,cAIHJ,EAAAA,KAACiC,EAAA,CAAMnB,UAAU,OAAO,oBAAkB,OACvCV,SAAA,EAAC1B,EAASwD,cAAWC,EAAA,CAAA,GACtB9B,EAAAA,IAAC+B,EAAA,CACCC,cAAeC,EACfC,UAAW,CAAE7D,YACb8D,YAAatE,EAAQgE,OACrBO,cACA1C,UACA2C,SAAUhE,EAASwD,OACnBS,UAAW,eAGd,MAAA,CAAIvC,SAAA,CAAA,gCACwBC,IAAC,QAAKD,SAAA,mBAAqB,OAAK,MAC3DC,IAAC,QAAKD,SAAA,gBAAkB,2CAE1BJ,KAAC4C,EAAA,CAAQC,OAAO,UACdzC,SAAA,CAAAC,EAAAA,IAAC,SAAA,CAAOS,UAAU,eAAeV,SAAA,SAAa,wGAGhDC,IAACG,EAAA,CAAKC,KAAMqC,IACZzC,EAAAA,IAAC0C,EAAA,CAAaC,GAAG,mBAAmB7D,MAAM,iBAGhD"}

package/docs/assets/{List-BgVuV26Q.js → List-B9HC1vRM.js}

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

package/docs/assets/{List-BgVuV26Q.js.map → List-B9HC1vRM.js.map}

@@ -1 +1 @@
-{"version":3,"file":"List-BgVuV26Q.js","sources":["../../lib/components/list/List.tsx"],"sourcesContent":["import {\n  createElement,\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, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { ListProps } from \"./types\";\n\nexport function List<\n  RowProps extends object,\n  TagName extends TagNames = \"div\"\n>({\n  children,\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  tagName = \"div\" as TagName,\n  style,\n  ...rest\n}: ListProps<RowProps, TagName>) {\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    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\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 (startIndexOverscan >= 0 && stopIndexOverscan >= 0 && onRowsRendered) {\n      onRowsRendered(\n        {\n          startIndex: startIndexVisible,\n          stopIndex: stopIndexVisible\n        },\n        {\n          startIndex: startIndexOverscan,\n          stopIndex: stopIndexOverscan\n        }\n      );\n    }\n  }, [\n    onRowsRendered,\n    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\n  ]);\n\n  const rows = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (rowCount > 0) {\n      for (\n        let index = startIndexOverscan;\n        index <= stopIndexOverscan;\n        index++\n      ) {\n        const bounds = getCellBounds(index);\n\n        children.push(\n          <RowComponent\n            {...(rowProps as RowProps)}\n            ariaAttributes={{\n              \"aria-posinset\": index + 1,\n              \"aria-setsize\": rowCount,\n              role: \"listitem\"\n            }}\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  }, [\n    RowComponent,\n    getCellBounds,\n    rowCount,\n    rowProps,\n    startIndexOverscan,\n    stopIndexOverscan\n  ]);\n\n  const sizingElement = (\n    <div\n      aria-hidden\n      style={{\n        height: getEstimatedSize(),\n        width: \"100%\",\n        zIndex: -1\n      }}\n    ></div>\n  );\n\n  return createElement(\n    tagName,\n    {\n      role: \"list\",\n      ...rest,\n      className,\n      ref: setElement,\n      style: {\n        position: \"relative\",\n        maxHeight: \"100%\",\n        flexGrow: 1,\n        overflowY: \"auto\",\n        ...style\n      }\n    },\n    rows,\n    children,\n    sizingElement\n  );\n}\n"],"names":["List","children","className","defaultHeight","listRef","onResize","onRowsRendered","overscanCount","rowComponent","RowComponentProp","rowCount","rowHeight","rowProps","rowPropsUnstable","tagName","style","rest","useMemoizedObject","RowComponent","useMemo","memo","arePropsEqual","element","setElement","useState","getCellBounds","getEstimatedSize","scrollToIndex","startIndexOverscan","startIndexVisible","stopIndexOverscan","stopIndexVisible","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","useImperativeHandle","scrollToRow","align","behavior","index","top","containerScrollOffset","scrollTop","scrollTo","useEffect","startIndex","stopIndex","rows","bounds","push","createElement","ariaAttributes","role","key","position","left","transform","scrollOffset","height","size","width","sizingElement","jsx","zIndex","ref","maxHeight","flexGrow","overflowY"],"mappings":"6GAeO,SAASA,GAGdC,SACAA,EAAAC,UACAA,EAAAC,cACAA,EAAgB,EAAAC,QAChBA,EAAAC,SACAA,EAAAC,eACAA,EAAAC,cACAA,EAAgB,EAChBC,aAAcC,EAAAC,SACdA,EAAAC,UACAA,EACAC,SAAUC,EAAAC,QACVA,EAAU,MAAAC,MACVA,KACGC,IAEH,MAAMJ,EAAWK,EAAkBJ,GAC7BK,EAAeC,EAAAA,QACnB,IAAMC,EAAAA,KAAKX,EAAkBY,GAC7B,CAACZ,KAGIa,EAASC,GAAcC,EAAAA,SAAgC,OAExDC,cACJA,EAAAC,iBACAA,EAAAC,cACAA,EAAAC,mBACAA,EAAAC,kBACAA,EAAAC,kBACAA,EAAAC,iBACAA,GACEC,EAAe,CACjBC,iBAAkBX,EAClBY,qBAAsB/B,EACtBgC,UAAW,WACXC,UAAW1B,EACX2B,UAAWzB,EACX0B,SAAU3B,EACVN,WACAE,kBAGFgC,EAAAA,oBACEnC,EACA,KAAA,CACE,WAAIkB,GACF,OAAOA,CACT,EAEA,WAAAkB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMjB,EAAc,CACxBc,QACAI,sBAAuBvB,GAASwB,WAAa,EAC7CH,UAG+B,mBAAtBrB,GAASyB,UAClBzB,EAAQyB,SAAS,CACfL,WACAE,OAGN,IAEF,CAACtB,EAASK,IAGZqB,EAAAA,UAAU,KACJpB,GAAsB,GAAKE,GAAqB,GAAKxB,GACvDA,EACE,CACE2C,WAAYpB,EACZqB,UAAWnB,GAEb,CACEkB,WAAYrB,EACZsB,UAAWpB,KAIhB,CACDxB,EACAsB,EACAC,EACAC,EACAC,IAGF,MAAMoB,EAAOhC,EAAAA,QAAQ,KACnB,MAAMlB,EAAwB,GAC9B,GAAIS,EAAW,EACb,IAAA,IACMiC,EAAQf,EACZe,GAASb,EACTa,IACA,CACA,MAAMS,EAAS3B,EAAckB,GAE7B1C,EAASoD,KACPC,EAAAA,cAACpC,EAAA,IACMN,EACL2C,eAAgB,CACd,gBAAiBZ,EAAQ,EACzB,eAAgBjC,EAChB8C,KAAM,YAERC,IAAKd,EACLA,QACA5B,MAAO,CACL2C,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcR,EAAOS,kBAChCC,OAAQV,EAAOW,KACfC,MAAO,UAIf,CAEF,OAAO/D,GACN,CACDiB,EACAO,EACAf,EACAE,EACAgB,EACAE,IAGImC,EACJC,EAAAA,IAAC,MAAA,CACC,eAAW,EACXnD,MAAO,CACL+C,OAAQpC,IACRsC,MAAO,OACPG,QAAQ,KAKd,OAAOb,EAAAA,cACLxC,EACA,CACE0C,KAAM,UACHxC,EACHd,YACAkE,IAAK7C,EACLR,MAAO,CACL2C,SAAU,WACVW,UAAW,OACXC,SAAU,EACVC,UAAW,UACRxD,IAGPoC,EACAlD,EACAgE,EAEJ"}
+{"version":3,"file":"List-B9HC1vRM.js","sources":["../../lib/components/list/List.tsx"],"sourcesContent":["import {\n  createElement,\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, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { ListProps } from \"./types\";\n\nexport function List<\n  RowProps extends object,\n  TagName extends TagNames = \"div\"\n>({\n  children,\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  tagName = \"div\" as TagName,\n  style,\n  ...rest\n}: ListProps<RowProps, TagName>) {\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    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\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 (startIndexOverscan >= 0 && stopIndexOverscan >= 0 && onRowsRendered) {\n      onRowsRendered(\n        {\n          startIndex: startIndexVisible,\n          stopIndex: stopIndexVisible\n        },\n        {\n          startIndex: startIndexOverscan,\n          stopIndex: stopIndexOverscan\n        }\n      );\n    }\n  }, [\n    onRowsRendered,\n    startIndexOverscan,\n    startIndexVisible,\n    stopIndexOverscan,\n    stopIndexVisible\n  ]);\n\n  const rows = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (rowCount > 0) {\n      for (\n        let index = startIndexOverscan;\n        index <= stopIndexOverscan;\n        index++\n      ) {\n        const bounds = getCellBounds(index);\n\n        children.push(\n          <RowComponent\n            {...(rowProps as RowProps)}\n            ariaAttributes={{\n              \"aria-posinset\": index + 1,\n              \"aria-setsize\": rowCount,\n              role: \"listitem\"\n            }}\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  }, [\n    RowComponent,\n    getCellBounds,\n    rowCount,\n    rowProps,\n    startIndexOverscan,\n    stopIndexOverscan\n  ]);\n\n  const sizingElement = (\n    <div\n      aria-hidden\n      style={{\n        height: getEstimatedSize(),\n        width: \"100%\",\n        zIndex: -1\n      }}\n    ></div>\n  );\n\n  return createElement(\n    tagName,\n    {\n      role: \"list\",\n      ...rest,\n      className,\n      ref: setElement,\n      style: {\n        position: \"relative\",\n        maxHeight: \"100%\",\n        flexGrow: 1,\n        overflowY: \"auto\",\n        ...style\n      }\n    },\n    rows,\n    children,\n    sizingElement\n  );\n}\n"],"names":["List","children","className","defaultHeight","listRef","onResize","onRowsRendered","overscanCount","rowComponent","RowComponentProp","rowCount","rowHeight","rowProps","rowPropsUnstable","tagName","style","rest","useMemoizedObject","RowComponent","useMemo","memo","arePropsEqual","element","setElement","useState","getCellBounds","getEstimatedSize","scrollToIndex","startIndexOverscan","startIndexVisible","stopIndexOverscan","stopIndexVisible","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","useImperativeHandle","scrollToRow","align","behavior","index","top","containerScrollOffset","scrollTop","scrollTo","useEffect","startIndex","stopIndex","rows","bounds","push","createElement","ariaAttributes","role","key","position","left","transform","scrollOffset","height","size","width","sizingElement","jsx","zIndex","ref","maxHeight","flexGrow","overflowY"],"mappings":"6GAeO,SAASA,GAGdC,SACAA,EAAAC,UACAA,EAAAC,cACAA,EAAgB,EAAAC,QAChBA,EAAAC,SACAA,EAAAC,eACAA,EAAAC,cACAA,EAAgB,EAChBC,aAAcC,EAAAC,SACdA,EAAAC,UACAA,EACAC,SAAUC,EAAAC,QACVA,EAAU,MAAAC,MACVA,KACGC,IAEH,MAAMJ,EAAWK,EAAkBJ,GAC7BK,EAAeC,EAAAA,QACnB,IAAMC,EAAAA,KAAKX,EAAkBY,GAC7B,CAACZ,KAGIa,EAASC,GAAcC,EAAAA,SAAgC,OAExDC,cACJA,EAAAC,iBACAA,EAAAC,cACAA,EAAAC,mBACAA,EAAAC,kBACAA,EAAAC,kBACAA,EAAAC,iBACAA,GACEC,EAAe,CACjBC,iBAAkBX,EAClBY,qBAAsB/B,EACtBgC,UAAW,WACXC,UAAW1B,EACX2B,UAAWzB,EACX0B,SAAU3B,EACVN,WACAE,kBAGFgC,EAAAA,oBACEnC,EACA,KAAA,CACE,WAAIkB,GACF,OAAOA,CACT,EAEA,WAAAkB,EAAYC,MACVA,EAAQ,OAAAC,SACRA,EAAW,OAAAC,MACXA,IAMA,MAAMC,EAAMjB,EAAc,CACxBc,QACAI,sBAAuBvB,GAASwB,WAAa,EAC7CH,UAG+B,mBAAtBrB,GAASyB,UAClBzB,EAAQyB,SAAS,CACfL,WACAE,OAGN,IAEF,CAACtB,EAASK,IAGZqB,EAAAA,UAAU,KACJpB,GAAsB,GAAKE,GAAqB,GAAKxB,GACvDA,EACE,CACE2C,WAAYpB,EACZqB,UAAWnB,GAEb,CACEkB,WAAYrB,EACZsB,UAAWpB,KAIhB,CACDxB,EACAsB,EACAC,EACAC,EACAC,IAGF,MAAMoB,EAAOhC,EAAAA,QAAQ,KACnB,MAAMlB,EAAwB,GAC9B,GAAIS,EAAW,EACb,IAAA,IACMiC,EAAQf,EACZe,GAASb,EACTa,IACA,CACA,MAAMS,EAAS3B,EAAckB,GAE7B1C,EAASoD,KACPC,EAAAA,cAACpC,EAAA,IACMN,EACL2C,eAAgB,CACd,gBAAiBZ,EAAQ,EACzB,eAAgBjC,EAChB8C,KAAM,YAERC,IAAKd,EACLA,QACA5B,MAAO,CACL2C,SAAU,WACVC,KAAM,EACNC,UAAW,cAAcR,EAAOS,kBAChCC,OAAQV,EAAOW,KACfC,MAAO,UAIf,CAEF,OAAO/D,GACN,CACDiB,EACAO,EACAf,EACAE,EACAgB,EACAE,IAGImC,EACJC,EAAAA,IAAC,MAAA,CACC,eAAW,EACXnD,MAAO,CACL+C,OAAQpC,IACRsC,MAAO,OACPG,QAAQ,KAKd,OAAOb,EAAAA,cACLxC,EACA,CACE0C,KAAM,UACHxC,EACHd,YACAkE,IAAK7C,EACLR,MAAO,CACL2C,SAAU,WACVW,UAAW,OACXC,SAAU,EACVC,UAAW,UACRxD,IAGPoC,EACAlD,EACAgE,EAEJ"}

package/docs/assets/{LoadingSpinner-C-xNF7A_.js → LoadingSpinner-CcA45RYo.js}

@@ -1,2 +1,2 @@
-import{r as e,j as a,B as t}from"./index-1kZ13GgQ.js";function l({title:a,titleId:t,...l},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":t},l),a?e.createElement("title",{id:t},a):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(l);function i(){return a.jsxs(t,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[a.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{i as L};
-//# sourceMappingURL=LoadingSpinner-C-xNF7A_.js.map
+import{r as e,j as a,B as t}from"./index-3R9tv3eW.js";function l({title:a,titleId:t,...l},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":t},l),a?e.createElement("title",{id:t},a):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(l);function i(){return a.jsxs(t,{align:"center",className:"text-slate-300",direction:"row",gap:2,children:[a.jsx(n,{className:"size-4 animate-spin"}),"Loading..."]})}export{i as L};
+//# sourceMappingURL=LoadingSpinner-CcA45RYo.js.map

package/docs/assets/{LoadingSpinner-C-xNF7A_.js.map → LoadingSpinner-CcA45RYo.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LoadingSpinner-C-xNF7A_.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../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 { 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","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,GCnB3C,SAASkB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC1B,EAAA,CAAcsB,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}
+{"version":3,"file":"LoadingSpinner-CcA45RYo.js","sources":["../../node_modules/.pnpm/@heroicons+react@2.2.0_react@19.1.0/node_modules/@heroicons/react/20/solid/esm/ArrowPathIcon.js","../../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 { 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","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,GCnB3C,SAASkB,IACd,OACEC,OAACC,GAAIC,MAAM,SAASC,UAAU,iBAAiBC,UAAU,MAAMC,IAAK,EAClEC,SAAA,GAAAC,IAAC1B,EAAA,CAAcsB,UAAU,wBAAwB,eAIvD","x_google_ignoreList":[0]}

package/docs/assets/{PageNotFound-iBStRMG4.js → PageNotFound-BaiFbANH.js}

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

package/docs/assets/{PageNotFound-iBStRMG4.js.map → PageNotFound-BaiFbANH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PageNotFound-iBStRMG4.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-BaiFbANH.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-DSVwe6jK.js → PlatformRequirementsRoute-BfE0JkzC.js}

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

package/docs/assets/{PlatformRequirementsRoute-DSVwe6jK.js.map → PlatformRequirementsRoute-BfE0JkzC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"PlatformRequirementsRoute-DSVwe6jK.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-BfE0JkzC.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"}