react-window 2.1.2 → 2.2.0-alpha.0

package/docs/assets/useCitiesByState-DF2_rnmt.js

@@ -1,2 +0,0 @@
-import{j as t,c as e,r as s}from"./index-Cnm6lMUF.js";import{L as i}from"./List-CB_lBMmJ.js";import{j as a}from"./addresses-CDQyd4n9.js";function r({items:e}){return t.jsx(i,{rowComponent:o,rowCount:e.length,rowHeight:n,rowProps:{items:e}})}function n(t,{items:e}){switch(e[t].type){case"state":return 30;case"zip":return 25}}function o({index:s,items:i,style:a}){const r=i[s],n=function(t){return e("flex items-center justify-between gap-2",{"text-3xl text-sky-300":"state"===t.type})}(r);return t.jsxs("div",{className:n,style:a,children:["state"===r.type?t.jsx("span",{children:r.state}):t.jsxs("span",{children:[r.city,", ",r.zip]}),t.jsx("div",{className:"text-slate-500 text-xs",children:`${s+1} of ${i.length}`})]})}function c(){return s.useMemo(()=>{const t=[];if(a){let e="";a.sort((t,e)=>t.state!==e.state?t.state.localeCompare(e.state):t.city!==e.city?t.city.localeCompare(e.city):t.zip.localeCompare(e.zip)).forEach(s=>{s.state!==e&&(e=s.state,t.push({type:"state",state:s.state})),t.push({type:"zip",city:s.city,zip:s.zip})})}return t},[])}export{r as E,o as R,c as u};
-//# sourceMappingURL=useCitiesByState-DF2_rnmt.js.map

package/docs/assets/useCitiesByState-DF2_rnmt.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCitiesByState-DF2_rnmt.js","sources":["../../src/routes/list/examples/ListVariableRowHeights.example.tsx","../../src/routes/list/hooks/useCitiesByState.ts"],"sourcesContent":["import { type Ref } from \"react\";\nimport { cn } from \"../../../utils/cn\";\n\n// <begin>\n\nimport {\n  List,\n  type ListImperativeAPI,\n  type RowComponentProps\n} from \"react-window\";\n\ntype Item =\n  | { type: \"state\"; state: string }\n  | { type: \"zip\"; city: string; zip: string };\n\ntype RowProps = {\n  items: Item[];\n};\n\nfunction Example({ items }: { items: Item[] }) {\n  return (\n    <List<RowProps>\n      rowComponent={RowComponent}\n      rowCount={items.length}\n      rowHeight={rowHeight}\n      rowProps={{ items }}\n    />\n  );\n}\n\nfunction rowHeight(index: number, { items }: RowProps) {\n  switch (items[index].type) {\n    case \"state\": {\n      return 30;\n    }\n    case \"zip\": {\n      return 25;\n    }\n  }\n}\n\nfunction RowComponent({ index, items, style }: RowComponentProps<RowProps>) {\n  const item = items[index];\n\n  const className = getClassName(item);\n\n  return (\n    <div className={className} style={style}>\n      {item.type === \"state\" ? (\n        <span>{item.state}</span>\n      ) : (\n        <span>\n          {item.city}, {item.zip}\n        </span>\n      )}\n      <div className=\"text-slate-500 text-xs\">{`${index + 1} of ${items.length}`}</div>\n    </div>\n  );\n}\n\n// <end>\n\nfunction ExampleWithRef({\n  items,\n  listRef\n}: {\n  items: Item[];\n  listRef: Ref<ListImperativeAPI>;\n}) {\n  return (\n    <List\n      listRef={listRef}\n      rowComponent={RowComponent}\n      rowCount={items.length}\n      rowHeight={rowHeight}\n      rowProps={{ items }}\n    />\n  );\n}\n\nfunction getClassName(item: Item) {\n  return cn(\"flex items-center justify-between gap-2\", {\n    \"text-3xl text-sky-300\": item.type === \"state\"\n  });\n}\n\nexport { Example, ExampleWithRef, RowComponent };\nexport type { Item, RowProps };\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/addresses.json\";\n\ntype Item =\n  | { type: \"state\"; state: string }\n  | { type: \"zip\"; city: string; zip: string };\n\nexport function useCitiesByState(): Item[] {\n  return useMemo(() => {\n    const items: Item[] = [];\n\n    if (json) {\n      let currentState: string = \"\";\n\n      json\n        .sort((a, b) => {\n          if (a.state !== b.state) {\n            return a.state.localeCompare(b.state);\n          } else if (a.city !== b.city) {\n            return a.city.localeCompare(b.city);\n          } else {\n            return a.zip.localeCompare(b.zip);\n          }\n        })\n        .forEach((address) => {\n          if (address.state !== currentState) {\n            currentState = address.state;\n\n            items.push({\n              type: \"state\",\n              state: address.state\n            });\n          }\n\n          items.push({\n            type: \"zip\",\n            city: address.city,\n            zip: address.zip\n          });\n        });\n    }\n\n    return items;\n  }, []);\n}\n"],"names":["Example","items","jsx","List","rowComponent","RowComponent","rowCount","length","rowHeight","rowProps","index","type","style","item","className","cn","getClassName","jsxs","children","state","city","zip","useCitiesByState","useMemo","json","currentState","sort","a","b","localeCompare","forEach","address","push"],"mappings":"yIAmBA,SAASA,GAAQC,MAAEA,IACjB,OACEC,EAAAA,IAACC,EAAA,CACCC,aAAcC,EACdC,SAAUL,EAAMM,OAChBC,YACAC,SAAU,CAAER,UAGlB,CAEA,SAASO,EAAUE,GAAeT,MAAEA,IAClC,OAAQA,EAAMS,GAAOC,MACnB,IAAK,QACH,OAAO,GAET,IAAK,MACH,OAAO,GAGb,CAEA,SAASN,GAAaK,MAAEA,EAAAT,MAAOA,EAAAW,MAAOA,IACpC,MAAMC,EAAOZ,EAAMS,GAEbI,EAoCR,SAAsBD,GACpB,OAAOE,EAAG,0CAA2C,CACnD,wBAAuC,UAAdF,EAAKF,MAElC,CAxCoBK,CAAaH,GAE/B,SACEI,KAAC,MAAA,CAAIH,YAAsBF,QACxBM,SAAA,CAAc,UAAdL,EAAKF,KACJT,EAAAA,IAAC,OAAA,CAAMgB,WAAKC,eAEX,OAAA,CACED,SAAA,CAAAL,EAAKO,KAAK,KAAGP,EAAKQ,OAGvBnB,EAAAA,IAAC,MAAA,CAAIY,UAAU,yBAA0BI,SAAA,GAAGR,EAAQ,QAAQT,EAAMM,aAGxE,CCnDO,SAASe,IACd,OAAOC,EAAAA,QAAQ,KACb,MAAMtB,EAAgB,GAEtB,GAAIuB,EAAM,CACR,IAAIC,EAAuB,GAE3BD,EACGE,KAAK,CAACC,EAAGC,IACJD,EAAER,QAAUS,EAAET,MACTQ,EAAER,MAAMU,cAAcD,EAAET,OACtBQ,EAAEP,OAASQ,EAAER,KACfO,EAAEP,KAAKS,cAAcD,EAAER,MAEvBO,EAAEN,IAAIQ,cAAcD,EAAEP,MAGhCS,QAASC,IACJA,EAAQZ,QAAUM,IACpBA,EAAeM,EAAQZ,MAEvBlB,EAAM+B,KAAK,CACTrB,KAAM,QACNQ,MAAOY,EAAQZ,SAInBlB,EAAM+B,KAAK,CACTrB,KAAM,MACNS,KAAMW,EAAQX,KACdC,IAAKU,EAAQV,OAGrB,CAEA,OAAOpB,GACN,GACL"}

package/docs/assets/useContacts-X0AOlpLx.js

@@ -1,2 +0,0 @@
-import{r as e}from"./index-Cnm6lMUF.js";import{j as t}from"./contacts-Bxrk2JS2.js";const a=["title","first_name","last_name","email","gender","address","city","state","zip","timezone","company","job_title"];function r(e){return a[e]}function s(e){switch(r(e)){case"address":return 250;case"email":return 300;case"job_title":return 150;case"timezone":return 200;case"zip":return 75;default:return 100}}function n(){return e.useMemo(()=>t?t.sort((e,t)=>e.title!==t.title?e.title.localeCompare(t.title):e.first_name!==t.first_name?e.first_name.localeCompare(t.first_name):e.last_name.localeCompare(t.last_name)):[],[])}export{a as C,s as c,r as i,n as u};
-//# sourceMappingURL=useContacts-X0AOlpLx.js.map

package/docs/assets/useContacts-X0AOlpLx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useContacts-X0AOlpLx.js","sources":["../../src/routes/grid/examples/shared.ts","../../src/routes/grid/examples/columnWidth.example.ts","../../src/routes/grid/hooks/useContacts.ts"],"sourcesContent":["import type { Contact } from \"./Grid.example\";\n\nexport const COLUMN_KEYS: (keyof Contact)[] = [\n  \"title\",\n  \"first_name\",\n  \"last_name\",\n  \"email\",\n  \"gender\",\n  \"address\",\n  \"city\",\n  \"state\",\n  \"zip\",\n  \"timezone\",\n  \"company\",\n  \"job_title\"\n];\n\nexport function indexToColumn(columnIndex: number): keyof Contact {\n  return COLUMN_KEYS[columnIndex];\n}\n","import { indexToColumn } from \"./shared\";\n\n// <begin>\n\nfunction columnWidth(index: number) {\n  switch (indexToColumn(index)) {\n    case \"address\": {\n      return 250;\n    }\n    case \"email\": {\n      return 300;\n    }\n    case \"job_title\": {\n      return 150;\n    }\n    case \"timezone\": {\n      return 200;\n    }\n    case \"zip\": {\n      return 75;\n    }\n    default: {\n      return 100;\n    }\n  }\n}\n\n// <end>\n\nexport { columnWidth };\n","import { useMemo } from \"react\";\nimport json from \"../../../../public/data/contacts.json\";\n\ntype Contact = (typeof json)[0];\n\nexport function useContacts(): Contact[] {\n  return useMemo(() => {\n    if (json) {\n      return json.sort((a, b) => {\n        if (a.title !== b.title) {\n          return a.title.localeCompare(b.title);\n        } else if (a.first_name !== b.first_name) {\n          return a.first_name.localeCompare(b.first_name);\n        } else {\n          return a.last_name.localeCompare(b.last_name);\n        }\n      });\n    }\n\n    return [];\n  }, []);\n}\n"],"names":["COLUMN_KEYS","indexToColumn","columnIndex","columnWidth","index","useContacts","useMemo","json","sort","a","b","title","localeCompare","first_name","last_name"],"mappings":"mFAEO,MAAMA,EAAiC,CAC5C,QACA,aACA,YACA,QACA,SACA,UACA,OACA,QACA,MACA,WACA,UACA,aAGK,SAASC,EAAcC,GAC5B,OAAOF,EAAYE,EACrB,CCfA,SAASC,EAAYC,GACnB,OAAQH,EAAcG,IACpB,IAAK,UACH,OAAO,IAET,IAAK,QACH,OAAO,IAET,IAAK,YACH,OAAO,IAET,IAAK,WACH,OAAO,IAET,IAAK,MACH,OAAO,GAET,QACE,OAAO,IAGb,CCpBO,SAASC,IACd,OAAOC,EAAAA,QAAQ,IACTC,EACKA,EAAKC,KAAK,CAACC,EAAGC,IACfD,EAAEE,QAAUD,EAAEC,MACTF,EAAEE,MAAMC,cAAcF,EAAEC,OACtBF,EAAEI,aAAeH,EAAEG,WACrBJ,EAAEI,WAAWD,cAAcF,EAAEG,YAE7BJ,EAAEK,UAAUF,cAAcF,EAAEI,YAKlC,GACN,GACL"}