react-window 2.1.1 → 2.1.2

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

@@ -0,0 +1 @@
+{"version":3,"file":"Grid-BjC_BndR.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    containerStyle: style,\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    containerStyle: style,\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","containerStyle","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,eAAgBlC,EAChBmC,qBAAsB3C,EACtB4C,UAAW,aACXzB,MAAAA,EACA0B,UAAWhD,EACXiD,UAAWrD,EACXsD,SAAUjD,EACVM,WACAC,mBAIAqB,cAAesB,EACfpB,iBAAkBqB,EAClBnB,mBAAoBoB,EACpBlB,kBAAmBmB,EACnBjB,cAAekB,EACfhB,kBAAmBiB,EACnBf,iBAAkBgB,GAChBd,EAAe,CACjBC,iBAAkBzB,EAClB0B,eAAgBlC,EAChBmC,qBAAsB5C,EACtB6C,UAAW,WACXC,UAAWvC,EACXwC,UAAWrD,EACXsD,SAAUxC,EACVH,WACAC,kBAGFkD,EAAAA,oBACErD,EACA,KAAA,CACE,WAAIc,GACF,OAAOA,CACT,EAEA,YAAAwC,EAAaC,SACXA,EAAW,OAAAC,YACXA,EAAc,OAAAC,YACdA,EAAAC,SACAA,EAAW,OAAAC,SACXA,IAQA,MAAMC,EAAO3B,EAAoB,CAC/B4B,MAAOL,EACPM,sBAAuBhD,GAASiD,YAAc,EAC9CC,MAAOP,IAEHQ,EAAMf,EAAiB,CAC3BW,MAAOH,EACPI,sBAAuBhD,GAASoD,WAAa,EAC7CF,MAAOL,IAGwB,mBAAtB7C,GAASqD,UAClBrD,EAAQqD,SAAS,CACfZ,WACAK,OACAK,OAGN,EAEA,cAAAG,EAAeP,MACbA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMJ,EAAO3B,EAAoB,CAC/B4B,QACAC,sBAAuBhD,GAASiD,YAAc,EAC9CC,UAG+B,mBAAtBlD,GAASqD,UAClBrD,EAAQqD,SAAS,CACfZ,WACAK,QAGN,EAEA,WAAAS,EAAYR,MACVA,EAAQ,OAAAN,SACRA,EAAW,OAAAS,MACXA,IAMA,MAAMC,EAAMf,EAAiB,CAC3BW,QACAC,sBAAuBhD,GAASoD,WAAa,EAC7CF,UAG+B,mBAAtBlD,GAASqD,UAClBrD,EAAQqD,SAAS,CACfZ,WACAU,OAGN,IAEF,CAACnD,EAASmB,EAAqBiB,IAGjCoB,EAAAA,UAAU,KAENzC,GAA4B,GAC5BM,GAA2B,GAC3Ba,GAAyB,GACzBG,GAAwB,GACxBlD,GAEAA,EACE,CACEsE,iBAAkBxC,EAClByC,gBAAiBnC,EACjBoC,cAAexB,EACfyB,aAActB,GAEhB,CACEmB,iBAAkB1C,EAClB2C,gBAAiBrC,EACjBsC,cAAezB,EACf0B,aAAcvB,KAInB,CACDlD,EACA4B,EACAE,EACAI,EACAE,EACAW,EACAC,EACAE,EACAC,IAGF,MAAMuB,EAAQhE,EAAAA,QAAQ,KACpB,MAAMlB,EAAwB,GAC9B,GAAIE,EAAc,GAAKS,EAAW,EAChC,IAAA,IACMuD,EAAWX,EACfW,GAAYR,EACZQ,IACA,CACA,MAAMiB,EAAY9B,EAAaa,GAEzBkB,EAAuB,GAE7B,IAAA,IACMpB,EAAc5B,EAClB4B,GAAetB,EACfsB,IACA,CACA,MAAMqB,EAAerD,EAAgBgC,GAErCoB,EAAQE,KACNC,EAAAA,cAACtE,EAAA,IACMnB,EACL0F,eAAgB,CACd,gBAAiBxB,EAAc,EAC/ByB,KAAM,YAERzB,cACA0B,IAAK1B,EACLE,WACArD,MAAO,CACL8E,SAAU,WACVxB,KAAM3C,OAAQ,EAAY,EAC1BoE,MAAOpE,EAAQ,OAAI,EACnBqE,UAAW,aAAarE,GAAS6D,EAAaS,aAAeT,EAAaS,mBAAmBX,EAAUW,kBACvGC,OAAQZ,EAAUa,KAClBC,MAAOZ,EAAaW,QAI5B,CAEAhG,EAASsF,KACPY,EAAAA,IAAC,OAAmBT,KAAK,MAAM,gBAAevB,EAAW,EACtDlE,YADOkE,GAId,CAEF,OAAOlE,GACN,CACDiB,EACAnB,EACAI,EACAkC,EACAM,EACAV,EACAqB,EACA7B,EACAb,EACA4C,EACAG,IAGIyC,EACJD,EAAAA,IAAC,MAAA,CACC,eAAW,EACXrF,MAAO,CACLkF,OAAQzC,IACR2C,MAAO/D,IACPkE,QAAQ,KAKd,OAAOb,EAAAA,cACLzE,EACA,CACE,gBAAiBZ,EACjB,gBAAiBS,EACjB8E,KAAM,UACH1E,EACHd,YACAK,MACA+F,IAAK/E,EACLT,MAAO,CACL8E,SAAU,WACVM,MAAO,OACPF,OAAQ,OACRO,UAAW,OACXC,SAAU,OACVC,SAAU,EACVC,SAAU,UACP5F,IAGPqE,EACAlF,EACAmG,EAEJ"}

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

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

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"Header-CWpEkQSA.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-CIfKb2Dg.js

@@ -0,0 +1,2 @@
+import{j as s,c as a,r as n,B as p}from"./index-Cnm6lMUF.js";import{B as t}from"./arePropsEqual-CaQN03VG.js";import{C as c}from"./Code-r2plEB3N.js";import{H as e}from"./Header-CWpEkQSA.js";import{L as l}from"./LoadingSpinner-D94ZhMZx.js";import{G as i}from"./Grid-BjC_BndR.js";import{j as o}from"./contacts-Bxrk2JS2.js";const 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-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>',r='<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 u({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 h({emails:a}){return s.jsx(i,{cellComponent:u,cellProps:{emails:a},columnCount:a.length,columnWidth:150,rowCount:1,rowHeight:"100%"})}function m(){const a=n.useMemo(()=>o?o.map(s=>s.email).sort((s,a)=>s.localeCompare(a)):[],[]);return s.jsxs(p,{direction:"column",gap:4,children:[s.jsx(e,{section:"Other",title:"Horizontal lists"}),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(l,{}),s.jsx(h,{emails:a})]}),s.jsx("div",{children:"Here's what the configuration for the grid above looks like:"}),s.jsx(c,{html:d}),s.jsx("div",{children:"And here's the cell renderer:"}),s.jsx(c,{html:r})]})}export{m as default};
+//# sourceMappingURL=HorizontalListsRoute-CIfKb2Dg.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalListsRoute-CIfKb2Dg.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 { Header } from \"../../components/Header\";\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      <Header section=\"Other\" title=\"Horizontal lists\" />\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","Header","section","title","Block","LoadingSpinner","Code","html","HorizontalListMarkdown","HorizontalListCellRendererMarkdown"],"mappings":"6mUAMA,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,CCPA,SAAwBC,IACtB,MAAMf,ECPCgB,EAAAA,QAAQ,IACTC,EACKA,EACJC,IAAKC,GAAYA,EAAQC,OACzBC,KAAK,CAACC,EAAGC,IAAMD,EAAEE,cAAcD,IAG7B,GACN,IDCH,OACEE,EAAAA,KAACC,EAAA,CAAIC,UAAU,SAASC,IAAK,EAC3BvB,SAAA,CAAAH,EAAAA,IAAC2B,EAAA,CAAOC,QAAQ,QAAQC,MAAM,uBAC9B7B,IAAC,OAAIG,SAAA,0DACLH,IAAC,OAAIG,SAAA,wDACLoB,EAAAA,KAACO,EAAA,CAAM7B,UAAU,OAAO,oBAAkB,OACvCE,SAAA,EAACL,EAAOW,cAAWsB,EAAA,CAAA,GACpB/B,MAACI,GAAeN,gBAElBE,IAAC,OAAIG,SAAA,mEACLH,IAACgC,EAAA,CAAKC,KAAMC,MACZlC,IAAC,OAAIG,SAAA,oCACLH,IAACgC,EAAA,CAAKC,KAAME,MAGlB"}

package/docs/assets/ImagesRoute-jiaLWXKV.js

@@ -0,0 +1,2 @@
+import{j as s,B as a,r as n}from"./index-Cnm6lMUF.js";import{B as p}from"./arePropsEqual-CaQN03VG.js";import{C as t}from"./Code-r2plEB3N.js";import{H as e}from"./Header-CWpEkQSA.js";import{L as c}from"./List-CB_lBMmJ.js";function i({cache:a,index:n,images:p,style:t}){const e=p[n],c=!!a.getImageSize(n);return s.jsxs("div",{style:t,children:[c||s.jsx(l,{}),s.jsx("img",{className:c?void 0:"opacity-0",onLoad:s=>{a.setImageSize(n,{height:s.currentTarget.naturalHeight,width:s.currentTarget.naturalWidth})},src:e})]})}function l(){return s.jsx(a,{align:"center",className:"h-full color-slate-700",direction:"column",justify:"center",children:"Loading..."})}function o({images:a}){const[p,t]=n.useState({height:0,width:0}),e=function(){const[s,a]=n.useState(new Map),p=n.useCallback(()=>{let a=0,n=0;return s.forEach(s=>{a+=s.height,n+=s.width}),0===a?{height:1,width:1}:{height:a/s.size,width:n/s.size}},[s]),t=n.useCallback(a=>s.get(a),[s]),e=n.useCallback((s,n)=>{a(a=>{const p=new Map(a);return p.set(s,n),p})},[]);return n.useMemo(()=>({getAverageSize:p,getImageSize:t,setImageSize:e}),[p,t,e])}(),l=n.useCallback(s=>{const a=e.getImageSize(s)??e.getAverageSize();return p.width*(a.height/a.width)},[e,p]);return s.jsx(c,{onResize:t,rowComponent:i,rowCount:a.length,rowHeight:l,rowProps:{cache:e,images:a}})}const d=["/images/animal-3546613_1280.jpg","/images/ball-bearings-1958083_1280.jpg","/images/bourke-luck-potholes-163065_1280.jpg","/images/child-1439468_1280.jpg","/images/digiart-3405596_1280.jpg","/images/electrical-cable-mess-2654084_1280.jpg","/images/elephant-8608983_1280.jpg","/images/fema-4987740_1280.jpg","/images/log-3135150_1280.jpg","/images/man-1838330_1280.jpg","/images/manipulation-2735724_1280.jpg","/images/newborn-6467761_1280.jpg","/images/old-farm-house-2096642_1280.jpg","/images/people-2557534_1280.jpg","/images/photo-1516712109157-6a67f5d73fa1.jpg","/images/photo-1562123408-fbf8cbf92c03.jpg","/images/sculpture-99484_1280.jpg","/images/sport-4765008_1280.jpg","/images/styrofoam-19493_1280.jpg","/images/trabi-328402_1280.jpg","/images/trailers-5073244_1280.jpg","/images/tub-114349_1280.jpg","/images/venus-fly-trap-3684935_1280.jpg","/images/web-5013633_1280.jpg","/images/winter-1675197_1280.jpg","/images/woman-1838149_1280.jpg"];function k(){return s.jsx(o,{images:d})}const r={html:'<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">type</span><span class=""> </span><span class="tok-typeName">RowProps</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">cache</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Cache</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">images</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="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">cache</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">images</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-typeName">RowProps</span><span class="">&#62;</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">url</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">images</span><span class="tok-punctuation">[</span><span class="tok-variableName">index</span><span class="tok-punctuation">]</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">isCached</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-operator">!</span><span class="tok-operator">!</span><span class="tok-variableName">cache</span><span class="tok-operator">.</span><span class="tok-propertyName">getImageSize</span><span class="tok-punctuation">(</span><span class="tok-variableName">index</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">div</span><span class=""> </span><span class="tok-propertyName">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">isCached</span><span class=""> </span><span class="tok-operator">||</span><span class=""> </span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">LoadingSpinner</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">img</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; 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">isCached</span><span class=""> </span><span class="tok-operator">?</span><span class=""> </span><span class="tok-variableName">undefined</span><span class=""> </span><span class="tok-operator">:</span><span class=""> </span><span class="tok-string">"opacity-0"</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-propertyName">onLoad</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">event</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: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Update the cache with image dimensions once it\'s loaded</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">cache</span><span class="tok-operator">.</span><span class="tok-propertyName">setImageSize</span><span class="tok-punctuation">(</span><span class="tok-variableName">index</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: 14ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">height</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">event</span><span class="tok-operator">.</span><span class="tok-propertyName">currentTarget</span><span class="tok-operator">.</span><span class="tok-propertyName">naturalHeight</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 14ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">event</span><span class="tok-operator">.</span><span class="tok-propertyName">currentTarget</span><span class="tok-operator">.</span><span class="tok-propertyName">naturalWidth</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 12ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</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-propertyName">src</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">url</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">/&#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>'},u='<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">useCallback</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">useState</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"</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-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">images</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">images</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">const</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName tok-definition">listSize</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setListSize</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="">&#60;</span><span class="tok-typeName">Size</span><span class="">&#62;</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName tok-definition">height</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">0</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName tok-definition">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">0</span><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></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Rows will lazily register image sizes in this cache</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">cache</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useImageSizeCache</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></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">rowHeight</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useCallback</span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">size</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">cache</span><span class="tok-operator">.</span><span class="tok-propertyName">getImageSize</span><span class="tok-punctuation">(</span><span class="tok-variableName">index</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-operator">??</span><span class=""> </span><span class="tok-variableName">cache</span><span class="tok-operator">.</span><span class="tok-propertyName">getAverageSize</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></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-comment">// Scale the image to fit within the list</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-variableName">listSize</span><span class="tok-operator">.</span><span class="tok-propertyName">width</span><span class=""> </span><span class="tok-operator">*</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">size</span><span class="tok-operator">.</span><span class="tok-propertyName">height</span><span class=""> </span><span class="tok-operator">/</span><span class=""> </span><span class="tok-variableName">size</span><span class="tok-operator">.</span><span class="tok-propertyName">width</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">}</span><span class="tok-punctuation">,</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">[</span><span class="tok-variableName">cache</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName">listSize</span><span class="tok-punctuation">]</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">&#60;</span><span class="tok-typeName">List</span><span class="tok-operator">&#60;</span><span class="tok-variableName">RowProps</span><span class="tok-operator">&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">onResize</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">setListSize</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowComponent</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName">RowComponent</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">images</span><span class="">.length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-propertyName tok-definition">rowHeight</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">rowProps</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">cache</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-propertyName">images</span><span class=""> </span><span class="tok-punctuation">}</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-string2">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>',h='<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class="tok-keyword">type</span><span class=""> </span><span class="tok-typeName">Size</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">height</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</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">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">type</span><span class=""> </span><span class="tok-typeName">Cache</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">getAverageSize</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Size</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">getImageSize</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">)</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Size</span><span class=""> </span><span class="tok-operator">|</span><span class=""> </span><span class="tok-typeName">undefined</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">setImageSize</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Size</span><span class="tok-punctuation">)</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-keyword">void</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">function</span><span class=""> </span><span class="tok-variableName tok-definition">useImageSizeCache</span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Cache</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">cachedRowHeights</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">setCachedRowHeights</span><span class="tok-punctuation">]</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useState</span><span class="">&#60;</span><span class="tok-typeName">Map</span><span class="">&#60;</span><span class="tok-typeName">number</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-typeName">Size</span><span class="">&#62;&#62;</span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">new</span><span class=""> </span><span class="tok-className">Map</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-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">getAverageSize</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useCallback</span><span class="tok-punctuation">(</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">let</span><span class=""> </span><span class="tok-variableName tok-definition">totalHeight</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-number">0</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">let</span><span class=""> </span><span class="tok-variableName tok-definition">totalWidth</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-number">0</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">cachedRowHeights</span><span class="tok-operator">.</span><span class="tok-propertyName">forEach</span><span class="tok-punctuation">(</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">totalHeight</span><span class=""> </span><span class="tok-operator">+=</span><span class=""> </span><span class="tok-variableName">size</span><span class="tok-operator">.</span><span class="tok-propertyName">height</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">totalWidth</span><span class=""> </span><span class="tok-operator">+=</span><span class=""> </span><span class="tok-variableName">size</span><span class="tok-operator">.</span><span class="tok-propertyName">width</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">if</span><span class=""> </span><span class="tok-punctuation">(</span><span class="tok-variableName">totalHeight</span><span class=""> </span><span class="tok-operator">===</span><span class=""> </span><span class="tok-number">0</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">return</span><span class=""> </span><span class="tok-punctuation">{</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 10ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">height</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">1</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-propertyName tok-definition">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-number">1</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; 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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName tok-definition">height</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">totalHeight</span><span class=""> </span><span class="tok-operator">/</span><span class=""> </span><span class="tok-variableName">cachedRowHeights</span><span class="tok-operator">.</span><span class="tok-propertyName">size</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 tok-definition">width</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-variableName">totalWidth</span><span class=""> </span><span class="tok-operator">/</span><span class=""> </span><span class="tok-variableName">cachedRowHeights</span><span class="tok-operator">.</span><span class="tok-propertyName">size</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-punctuation">[</span><span class="tok-variableName">cachedRowHeights</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></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">getImageSize</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useCallback</span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</span><span class=""> </span><span class="tok-variableName">cachedRowHeights</span><span class="tok-operator">.</span><span class="tok-propertyName">get</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">[</span><span class="tok-variableName">cachedRowHeights</span><span class="tok-punctuation">]</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">setImageSize</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-variableName">useCallback</span><span class="tok-punctuation">(</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">index</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">number</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName tok-definition">size</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Size</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: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-variableName">setCachedRowHeights</span><span class="tok-punctuation">(</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">prevMap</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: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-keyword">const</span><span class=""> </span><span class="tok-variableName tok-definition">clonedMap</span><span class=""> </span><span class="tok-operator">=</span><span class=""> </span><span class="tok-keyword">new</span><span class=""> </span><span class="tok-className">Map</span><span class="tok-punctuation">(</span><span class="tok-variableName">prevMap</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-variableName">clonedMap</span><span class="tok-operator">.</span><span class="tok-propertyName">set</span><span class="tok-punctuation">(</span><span class="tok-variableName">index</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName">size</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-keyword">return</span><span class=""> </span><span class="tok-variableName">clonedMap</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="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-punctuation">}</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-punctuation">[</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></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-variableName">useMemo</span><span class="tok-punctuation">(</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">(</span><span class="tok-punctuation">)</span><span class=""> </span><span class="tok-punctuation">=&#62;</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 tok-definition">getAverageSize</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 tok-definition">getImageSize</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 tok-definition">setImageSize</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span><span class="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">[</span><span class="tok-variableName">getAverageSize</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName">getImageSize</span><span class="tok-punctuation">,</span><span class=""> </span><span class="tok-variableName">setImageSize</span><span class="tok-punctuation">]</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="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 m(){return s.jsxs(a,{direction:"column",gap:4,children:[s.jsx(e,{section:"Other",title:"Variable size images"}),s.jsx("div",{children:"Lists can be used to render content of unknown sizes, though it requires a user-provided cache."}),s.jsx("div",{children:"Here's an example of a list of images of varying sizes:"}),s.jsx(p,{className:"h-150","data-focus-within":"bold",children:s.jsx(k,{})}),s.jsx("div",{children:"First, let's look at the custom cache we'll use to store image sizes."}),s.jsx(t,{html:h}),s.jsx("div",{children:"When a row is rendered for the first time, it should record the image size in the cache."}),s.jsx(t,{html:r.html}),s.jsx("div",{children:"The list can use the cache to determine the size of each row."}),s.jsx(t,{html:u})]})}export{m as default};
+//# sourceMappingURL=ImagesRoute-jiaLWXKV.js.map

package/docs/assets/ImagesRoute-jiaLWXKV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImagesRoute-jiaLWXKV.js","sources":["../../src/routes/list/examples/ImageRow.example.tsx","../../src/routes/list/examples/Images.example.tsx","../../src/routes/list/examples/useImageSizeCache.example.ts","../../src/routes/list/ImagesRoute.tsx"],"sourcesContent":["import { Box } from \"../../../components/Box\";\nimport type { Cache } from \"./useImageSizeCache.example\";\n\n// <begin>\n\nimport { type RowComponentProps } from \"react-window\";\n\ntype RowProps = {\n  cache: Cache;\n  images: string[];\n};\n\nfunction RowComponent({\n  cache,\n  index,\n  images,\n  style\n}: RowComponentProps<RowProps>) {\n  const url = images[index];\n\n  const isCached = !!cache.getImageSize(index);\n\n  return (\n    <div style={style}>\n      {isCached || <LoadingSpinner />}\n      <img\n        className={isCached ? undefined : \"opacity-0\"}\n        onLoad={(event) => {\n          // Update the cache with image dimensions once it's loaded\n          cache.setImageSize(index, {\n            height: event.currentTarget.naturalHeight,\n            width: event.currentTarget.naturalWidth\n          });\n        }}\n        src={url}\n      />\n    </div>\n  );\n}\n\n// <end>\n\nfunction LoadingSpinner() {\n  return (\n    <Box\n      align=\"center\"\n      className=\"h-full color-slate-700\"\n      direction=\"column\"\n      justify=\"center\"\n    >\n      Loading...\n    </Box>\n  );\n}\n\nexport { RowComponent };\nexport type { RowProps };\n","import { RowComponent, type RowProps } from \"./ImageRow.example\";\nimport type { Size } from \"./useImageSizeCache.example\";\nimport { useImageSizeCache } from \"./useImageSizeCache.example\";\n\n// <begin>\n\nimport { useCallback, useState } from \"react\";\nimport { List } from \"react-window\";\n\nfunction Example({ images }: { images: string[] }) {\n  const [listSize, setListSize] = useState<Size>({ height: 0, width: 0 });\n\n  // Rows will lazily register image sizes in this cache\n  const cache = useImageSizeCache();\n\n  const rowHeight = useCallback(\n    (index: number) => {\n      const size = cache.getImageSize(index) ?? cache.getAverageSize();\n\n      // Scale the image to fit within the list\n      return listSize.width * (size.height / size.width);\n    },\n    [cache, listSize]\n  );\n\n  return (\n    <List<RowProps>\n      onResize={setListSize}\n      rowComponent={RowComponent}\n      rowCount={images.length}\n      rowHeight={rowHeight}\n      rowProps={{ cache, images }}\n    />\n  );\n}\n\n// <end>\n\nconst IMAGES: string[] = [\n  \"/images/animal-3546613_1280.jpg\",\n  \"/images/ball-bearings-1958083_1280.jpg\",\n  \"/images/bourke-luck-potholes-163065_1280.jpg\",\n  \"/images/child-1439468_1280.jpg\",\n  \"/images/digiart-3405596_1280.jpg\",\n  \"/images/electrical-cable-mess-2654084_1280.jpg\",\n  \"/images/elephant-8608983_1280.jpg\",\n  \"/images/fema-4987740_1280.jpg\",\n  \"/images/log-3135150_1280.jpg\",\n  \"/images/man-1838330_1280.jpg\",\n  \"/images/manipulation-2735724_1280.jpg\",\n  \"/images/newborn-6467761_1280.jpg\",\n  \"/images/old-farm-house-2096642_1280.jpg\",\n  \"/images/people-2557534_1280.jpg\",\n  \"/images/photo-1516712109157-6a67f5d73fa1.jpg\",\n  \"/images/photo-1562123408-fbf8cbf92c03.jpg\",\n  \"/images/sculpture-99484_1280.jpg\",\n  \"/images/sport-4765008_1280.jpg\",\n  \"/images/styrofoam-19493_1280.jpg\",\n  \"/images/trabi-328402_1280.jpg\",\n  \"/images/trailers-5073244_1280.jpg\",\n  \"/images/tub-114349_1280.jpg\",\n  \"/images/venus-fly-trap-3684935_1280.jpg\",\n  \"/images/web-5013633_1280.jpg\",\n  \"/images/winter-1675197_1280.jpg\",\n  \"/images/woman-1838149_1280.jpg\"\n];\n\nfunction ExampleWithImages() {\n  return <Example images={IMAGES} />;\n}\n\nexport { ExampleWithImages, RowComponent };\nexport type { Size };\n","import { useCallback, useMemo, useState } from \"react\";\n\n// <begin>\n\ntype Size = {\n  height: number;\n  width: number;\n};\n\ntype Cache = {\n  getAverageSize(): Size;\n  getImageSize(index: number): Size | undefined;\n  setImageSize(index: number, size: Size): void;\n};\n\nfunction useImageSizeCache(): Cache {\n  const [cachedRowHeights, setCachedRowHeights] = useState<Map<number, Size>>(\n    new Map()\n  );\n\n  const getAverageSize = useCallback(() => {\n    let totalHeight = 0;\n    let totalWidth = 0;\n\n    cachedRowHeights.forEach((size) => {\n      totalHeight += size.height;\n      totalWidth += size.width;\n    });\n\n    if (totalHeight === 0) {\n      return {\n        height: 1,\n        width: 1\n      };\n    }\n\n    return {\n      height: totalHeight / cachedRowHeights.size,\n      width: totalWidth / cachedRowHeights.size\n    };\n  }, [cachedRowHeights]);\n\n  const getImageSize = useCallback(\n    (index: number) => cachedRowHeights.get(index),\n    [cachedRowHeights]\n  );\n\n  const setImageSize = useCallback((index: number, size: Size) => {\n    setCachedRowHeights((prevMap) => {\n      const clonedMap = new Map(prevMap);\n      clonedMap.set(index, size);\n      return clonedMap;\n    });\n  }, []);\n\n  return useMemo(\n    () => ({\n      getAverageSize,\n      getImageSize,\n      setImageSize\n    }),\n    [getAverageSize, getImageSize, setImageSize]\n  );\n}\n\n// <end>\n\nexport { useImageSizeCache };\nexport type { Cache, Size };\n","import { Block } from \"../../components/Block\";\nimport { Box } from \"../../components/Box\";\nimport { Code } from \"../../components/code/Code\";\nimport { Header } from \"../../components/Header\";\nimport { ExampleWithImages } from \"./examples/Images.example\";\nimport ImageRowMarkdown from \"../../../public/generated/code-snippets/ImageRow.json\";\nimport ImagesMarkdown from \"../../../public/generated/code-snippets/Images.json\";\nimport useImageSizeCacheMarkdown from \"../../../public/generated/code-snippets/useImageSizeCache.json\";\n\nexport default function ImagesRoute() {\n  return (\n    <Box direction=\"column\" gap={4}>\n      <Header section=\"Other\" title=\"Variable size images\" />\n      <div>\n        Lists can be used to render content of unknown sizes, though it requires\n        a user-provided cache.\n      </div>\n      <div>Here's an example of a list of images of varying sizes:</div>\n      <Block className=\"h-150\" data-focus-within=\"bold\">\n        <ExampleWithImages />\n      </Block>\n      <div>\n        First, let's look at the custom cache we'll use to store image sizes.\n      </div>\n      <Code html={useImageSizeCacheMarkdown.html} />\n      <div>\n        When a row is rendered for the first time, it should record the image\n        size in the cache.\n      </div>\n      <Code html={ImageRowMarkdown.html} />\n      <div>The list can use the cache to determine the size of each row.</div>\n      <Code html={ImagesMarkdown.html} />\n    </Box>\n  );\n}\n"],"names":["RowComponent","cache","index","images","style","url","isCached","getImageSize","jsxs","children","LoadingSpinner","jsx","className","onLoad","event","setImageSize","height","currentTarget","naturalHeight","width","naturalWidth","src","Box","align","direction","justify","Example","listSize","setListSize","useState","cachedRowHeights","setCachedRowHeights","Map","getAverageSize","useCallback","totalHeight","totalWidth","forEach","size","get","prevMap","clonedMap","set","useMemo","useImageSizeCache","rowHeight","List","onResize","rowComponent","rowCount","length","rowProps","IMAGES","ExampleWithImages","ImagesRoute","gap","Header","section","title","Block","Code","html","useImageSizeCacheMarkdown","ImageRowMarkdown","ImagesMarkdown"],"mappings":"6NAYA,SAASA,GAAaC,MACpBA,EAAAC,MACAA,EAAAC,OACAA,EAAAC,MACAA,IAEA,MAAMC,EAAMF,EAAOD,GAEbI,IAAaL,EAAMM,aAAaL,GAEtC,OACEM,OAAC,OAAIJ,QACFK,SAAA,CAAAH,SAAaI,EAAA,IACdC,EAAAA,IAAC,MAAA,CACCC,UAAWN,OAAW,EAAY,YAClCO,OAASC,IAEPb,EAAMc,aAAab,EAAO,CACxBc,OAAQF,EAAMG,cAAcC,cAC5BC,MAAOL,EAAMG,cAAcG,gBAG/BC,IAAKhB,MAIb,CAIA,SAASK,IACP,OACEC,EAAAA,IAACW,EAAA,CACCC,MAAM,SACNX,UAAU,yBACVY,UAAU,SACVC,QAAQ,SACThB,SAAA,cAIL,CC5CA,SAASiB,GAAQvB,OAAEA,IACjB,MAAOwB,EAAUC,GAAeC,EAAAA,SAAe,CAAEb,OAAQ,EAAGG,MAAO,IAG7DlB,ECER,WACE,MAAO6B,EAAkBC,GAAuBF,EAAAA,aAC1CG,KAGAC,EAAiBC,EAAAA,YAAY,KACjC,IAAIC,EAAc,EACdC,EAAa,EAOjB,OALAN,EAAiBO,QAASC,IACxBH,GAAeG,EAAKtB,OACpBoB,GAAcE,EAAKnB,QAGD,IAAhBgB,EACK,CACLnB,OAAQ,EACRG,MAAO,GAIJ,CACLH,OAAQmB,EAAcL,EAAiBQ,KACvCnB,MAAOiB,EAAaN,EAAiBQ,OAEtC,CAACR,IAEEvB,EAAe2B,EAAAA,YAClBhC,GAAkB4B,EAAiBS,IAAIrC,GACxC,CAAC4B,IAGGf,EAAemB,EAAAA,YAAY,CAAChC,EAAeoC,KAC/CP,EAAqBS,IACnB,MAAMC,EAAY,IAAIT,IAAIQ,GAE1B,OADAC,EAAUC,IAAIxC,EAAOoC,GACdG,KAER,IAEH,OAAOE,EAAAA,QACL,KAAA,CACEV,iBACA1B,eACAQ,iBAEF,CAACkB,EAAgB1B,EAAcQ,GAEnC,CDlDgB6B,GAERC,EAAYX,EAAAA,YACfhC,IACC,MAAMoC,EAAOrC,EAAMM,aAAaL,IAAUD,EAAMgC,iBAGhD,OAAON,EAASR,OAASmB,EAAKtB,OAASsB,EAAKnB,QAE9C,CAAClB,EAAO0B,IAGV,OACEhB,EAAAA,IAACmC,EAAA,CACCC,SAAUnB,EACVoB,aAAchD,EACdiD,SAAU9C,EAAO+C,OACjBL,YACAM,SAAU,CAAElD,QAAOE,WAGzB,CAIA,MAAMiD,EAAmB,CACvB,kCACA,yCACA,+CACA,iCACA,mCACA,iDACA,oCACA,gCACA,+BACA,+BACA,wCACA,mCACA,0CACA,kCACA,+CACA,4CACA,mCACA,iCACA,mCACA,gCACA,oCACA,8BACA,0CACA,+BACA,kCACA,kCAGF,SAASC,IACP,SAAO1C,IAACe,EAAA,CAAQvB,OAAQiD,GAC1B,81xCE5DA,SAAwBE,IACtB,OACE9C,EAAAA,KAACc,EAAA,CAAIE,UAAU,SAAS+B,IAAK,EAC3B9C,SAAA,CAAAE,EAAAA,IAAC6C,EAAA,CAAOC,QAAQ,QAAQC,MAAM,2BAC9B/C,IAAC,OAAIF,SAAA,sGAILE,IAAC,OAAIF,SAAA,4DACLE,EAAAA,IAACgD,GAAM/C,UAAU,QAAQ,oBAAkB,OACzCH,WAAAE,IAAC0C,UAEH1C,IAAC,OAAIF,SAAA,4EAGLE,IAACiD,EAAA,CAAKC,KAAMC,MACZnD,IAAC,OAAIF,SAAA,+FAILE,IAACiD,EAAA,CAAKC,KAAME,EAAiBF,SAC7BlD,IAAC,OAAIF,SAAA,oEACLE,IAACiD,EAAA,CAAKC,KAAMG,MAGlB"}

package/docs/assets/{ImperativeApiRoute-BdK7xl-u.js → ImperativeApiRoute-DRVezybQ.js}

@@ -1,2 +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
+import{r as s,j as a,B as n,a as t,C as p}from"./index-Cnm6lMUF.js";import{L as e}from"./List-CB_lBMmJ.js";import{B as i}from"./arePropsEqual-CaQN03VG.js";import{C as o}from"./Code-r2plEB3N.js";import{H as l}from"./Header-CWpEkQSA.js";import{L as c}from"./LoadingSpinner-D94ZhMZx.js";import{S as r}from"./Select-D7Hzggtt.js";import{u as d,R as u}from"./useCitiesByState-DF2_rnmt.js";import{C as k}from"./ContinueLink-BDXFlJ2t.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-DRVezybQ.js.map

package/docs/assets/{ImperativeApiRoute-BdK7xl-u.js.map → ImperativeApiRoute-DRVezybQ.js.map}

@@ -1 +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"}
+{"version":3,"file":"ImperativeApiRoute-DRVezybQ.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 → ImperativeApiRoute-DXzOo4Dn.js}

@@ -1,2 +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
+import{r as s,j as a,B as n,a as t,C as p}from"./index-Cnm6lMUF.js";import{G as e}from"./Grid-BjC_BndR.js";import{B as o}from"./arePropsEqual-CaQN03VG.js";import{C as l}from"./Code-r2plEB3N.js";import{H as i}from"./Header-CWpEkQSA.js";import{L as c}from"./LoadingSpinner-D94ZhMZx.js";import{S as r}from"./Select-D7Hzggtt.js";import{C as d}from"./CellComponent.example-uUYIhpiW.js";import{u,C as k,c as h}from"./useContacts-X0AOlpLx.js";import{C as m}from"./ContinueLink-BDXFlJ2t.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-DXzOo4Dn.js.map