react-window 2.1.1 → 2.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-window",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [

package/docs/assets/CellComponent.example-ChzwGLAD.js

@@ -1,2 +0,0 @@
-import{j as s}from"./index-3R9tv3eW.js";import{i as t}from"./useContacts-C-Fuwn4U.js";function n({contacts:n,columnIndex:e,rowIndex:o,style:r}){const c=n[o][t(e)];return s.jsx("div",{className:"truncate",style:r,children:c})}export{n as C};
-//# sourceMappingURL=CellComponent.example-ChzwGLAD.js.map

package/docs/assets/ContinueLink-Mq4XOwMu.js

@@ -1,2 +0,0 @@
-import{j as t,L as i}from"./index-3R9tv3eW.js";function n({title:n,to:o}){return t.jsxs("div",{children:["Continue to ",t.jsx(i,{to:o,children:n}),"…"]})}export{n as C};
-//# sourceMappingURL=ContinueLink-Mq4XOwMu.js.map

package/docs/assets/Grid-Cio8auWD.js

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Grid-Cio8auWD.js","sources":["../../lib/components/grid/Grid.tsx","../../lib/core/useIsRtl.ts","../../lib/utils/isRtl.ts"],"sourcesContent":["import {\n  createElement,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useState,\n  type ReactNode\n} from \"react\";\nimport { useIsRtl } from \"../../core/useIsRtl\";\nimport { useVirtualizer } from \"../../core/useVirtualizer\";\nimport { useMemoizedObject } from \"../../hooks/useMemoizedObject\";\nimport type { Align, TagNames } from \"../../types\";\nimport { arePropsEqual } from \"../../utils/arePropsEqual\";\nimport type { GridProps } from \"./types\";\n\nexport function Grid<\n  CellProps extends object,\n  TagName extends TagNames = \"div\"\n>({\n  cellComponent: CellComponentProp,\n  cellProps: cellPropsUnstable,\n  children,\n  className,\n  columnCount,\n  columnWidth,\n  defaultHeight = 0,\n  defaultWidth = 0,\n  dir,\n  gridRef,\n  onCellsRendered,\n  onResize,\n  overscanCount = 3,\n  rowCount,\n  rowHeight,\n  style,\n  tagName = \"div\" as TagName,\n  ...rest\n}: GridProps<CellProps, TagName>) {\n  const cellProps = useMemoizedObject(cellPropsUnstable);\n  const CellComponent = useMemo(\n    () => memo(CellComponentProp, arePropsEqual),\n    [CellComponentProp]\n  );\n\n  const [element, setElement] = useState<HTMLDivElement | null>(null);\n\n  const isRtl = useIsRtl(element, dir);\n\n  const {\n    getCellBounds: getColumnBounds,\n    getEstimatedSize: getEstimatedWidth,\n    startIndexOverscan: columnStartIndexOverscan,\n    startIndexVisible: columnStartIndexVisible,\n    scrollToIndex: scrollToColumnIndex,\n    stopIndexOverscan: columnStopIndexOverscan,\n    stopIndexVisible: columnStopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultWidth,\n    direction: \"horizontal\",\n    isRtl,\n    itemCount: columnCount,\n    itemProps: cellProps,\n    itemSize: columnWidth,\n    onResize,\n    overscanCount\n  });\n\n  const {\n    getCellBounds: getRowBounds,\n    getEstimatedSize: getEstimatedHeight,\n    startIndexOverscan: rowStartIndexOverscan,\n    startIndexVisible: rowStartIndexVisible,\n    scrollToIndex: scrollToRowIndex,\n    stopIndexOverscan: rowStopIndexOverscan,\n    stopIndexVisible: rowStopIndexVisible\n  } = useVirtualizer({\n    containerElement: element,\n    defaultContainerSize: defaultHeight,\n    direction: \"vertical\",\n    itemCount: rowCount,\n    itemProps: cellProps,\n    itemSize: rowHeight,\n    onResize,\n    overscanCount\n  });\n\n  useImperativeHandle(\n    gridRef,\n    () => ({\n      get element() {\n        return element;\n      },\n\n      scrollToCell({\n        behavior = \"auto\",\n        columnAlign = \"auto\",\n        columnIndex,\n        rowAlign = \"auto\",\n        rowIndex\n      }: {\n        behavior?: ScrollBehavior;\n        columnAlign?: Align;\n        columnIndex: number;\n        rowAlign?: Align;\n        rowIndex: number;\n      }) {\n        const left = scrollToColumnIndex({\n          align: columnAlign,\n          containerScrollOffset: element?.scrollLeft ?? 0,\n          index: columnIndex\n        });\n        const top = scrollToRowIndex({\n          align: rowAlign,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index: rowIndex\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            left,\n            top\n          });\n        }\n      },\n\n      scrollToColumn({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const left = scrollToColumnIndex({\n          align,\n          containerScrollOffset: element?.scrollLeft ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            left\n          });\n        }\n      },\n\n      scrollToRow({\n        align = \"auto\",\n        behavior = \"auto\",\n        index\n      }: {\n        align?: Align;\n        behavior?: ScrollBehavior;\n        index: number;\n      }) {\n        const top = scrollToRowIndex({\n          align,\n          containerScrollOffset: element?.scrollTop ?? 0,\n          index\n        });\n\n        if (typeof element?.scrollTo === \"function\") {\n          element.scrollTo({\n            behavior,\n            top\n          });\n        }\n      }\n    }),\n    [element, scrollToColumnIndex, scrollToRowIndex]\n  );\n\n  useEffect(() => {\n    if (\n      columnStartIndexOverscan >= 0 &&\n      columnStopIndexOverscan >= 0 &&\n      rowStartIndexOverscan >= 0 &&\n      rowStopIndexOverscan >= 0 &&\n      onCellsRendered\n    ) {\n      onCellsRendered(\n        {\n          columnStartIndex: columnStartIndexVisible,\n          columnStopIndex: columnStopIndexVisible,\n          rowStartIndex: rowStartIndexVisible,\n          rowStopIndex: rowStopIndexVisible\n        },\n        {\n          columnStartIndex: columnStartIndexOverscan,\n          columnStopIndex: columnStopIndexOverscan,\n          rowStartIndex: rowStartIndexOverscan,\n          rowStopIndex: rowStopIndexOverscan\n        }\n      );\n    }\n  }, [\n    onCellsRendered,\n    columnStartIndexOverscan,\n    columnStartIndexVisible,\n    columnStopIndexOverscan,\n    columnStopIndexVisible,\n    rowStartIndexOverscan,\n    rowStartIndexVisible,\n    rowStopIndexOverscan,\n    rowStopIndexVisible\n  ]);\n\n  const cells = useMemo(() => {\n    const children: ReactNode[] = [];\n    if (columnCount > 0 && rowCount > 0) {\n      for (\n        let rowIndex = rowStartIndexOverscan;\n        rowIndex <= rowStopIndexOverscan;\n        rowIndex++\n      ) {\n        const rowBounds = getRowBounds(rowIndex);\n\n        const columns: ReactNode[] = [];\n\n        for (\n          let columnIndex = columnStartIndexOverscan;\n          columnIndex <= columnStopIndexOverscan;\n          columnIndex++\n        ) {\n          const columnBounds = getColumnBounds(columnIndex);\n\n          columns.push(\n            <CellComponent\n              {...(cellProps as CellProps)}\n              ariaAttributes={{\n                \"aria-colindex\": columnIndex + 1,\n                role: \"gridcell\"\n              }}\n              columnIndex={columnIndex}\n              key={columnIndex}\n              rowIndex={rowIndex}\n              style={{\n                position: \"absolute\",\n                left: isRtl ? undefined : 0,\n                right: isRtl ? 0 : undefined,\n                transform: `translate(${isRtl ? -columnBounds.scrollOffset : columnBounds.scrollOffset}px, ${rowBounds.scrollOffset}px)`,\n                height: rowBounds.size,\n                width: columnBounds.size\n              }}\n            />\n          );\n        }\n\n        children.push(\n          <div key={rowIndex} role=\"row\" aria-rowindex={rowIndex + 1}>\n            {columns}\n          </div>\n        );\n      }\n    }\n    return children;\n  }, [\n    CellComponent,\n    cellProps,\n    columnCount,\n    columnStartIndexOverscan,\n    columnStopIndexOverscan,\n    getColumnBounds,\n    getRowBounds,\n    isRtl,\n    rowCount,\n    rowStartIndexOverscan,\n    rowStopIndexOverscan\n  ]);\n\n  const sizingElement = (\n    <div\n      aria-hidden\n      style={{\n        height: getEstimatedHeight(),\n        width: getEstimatedWidth(),\n        zIndex: -1\n      }}\n    ></div>\n  );\n\n  return createElement(\n    tagName,\n    {\n      \"aria-colcount\": columnCount,\n      \"aria-rowcount\": rowCount,\n      role: \"grid\",\n      ...rest,\n      className,\n      dir,\n      ref: setElement,\n      style: {\n        position: \"relative\",\n        width: \"100%\",\n        height: \"100%\",\n        maxHeight: \"100%\",\n        maxWidth: \"100%\",\n        flexGrow: 1,\n        overflow: \"auto\",\n        ...style\n      }\n    },\n    cells,\n    children,\n    sizingElement\n  );\n}\n","import { useLayoutEffect, useState, type HTMLAttributes } from \"react\";\nimport { isRtl } from \"../utils/isRtl\";\n\nexport function useIsRtl(\n  element: HTMLElement | null,\n  dir: HTMLAttributes<HTMLElement>[\"dir\"]\n) {\n  const [value, setValue] = useState(dir === \"rtl\");\n\n  useLayoutEffect(() => {\n    if (element) {\n      if (!dir) {\n        setValue(isRtl(element));\n      }\n    }\n  }, [dir, element]);\n\n  return value;\n}\n","export function isRtl(element: HTMLElement) {\n  let currentElement: HTMLElement | null = element;\n  while (currentElement) {\n    if (currentElement.dir) {\n      return currentElement.dir === \"rtl\";\n    }\n\n    currentElement = currentElement.parentElement;\n  }\n\n  return false;\n}\n"],"names":["Grid","cellComponent","CellComponentProp","cellProps","cellPropsUnstable","children","className","columnCount","columnWidth","defaultHeight","defaultWidth","dir","gridRef","onCellsRendered","onResize","overscanCount","rowCount","rowHeight","style","tagName","rest","useMemoizedObject","CellComponent","useMemo","memo","arePropsEqual","element","setElement","useState","isRtl","value","setValue","useLayoutEffect","currentElement","parentElement","useIsRtl","getCellBounds","getColumnBounds","getEstimatedSize","getEstimatedWidth","startIndexOverscan","columnStartIndexOverscan","startIndexVisible","columnStartIndexVisible","scrollToIndex","scrollToColumnIndex","stopIndexOverscan","columnStopIndexOverscan","stopIndexVisible","columnStopIndexVisible","useVirtualizer","containerElement","defaultContainerSize","direction","itemCount","itemProps","itemSize","getRowBounds","getEstimatedHeight","rowStartIndexOverscan","rowStartIndexVisible","scrollToRowIndex","rowStopIndexOverscan","rowStopIndexVisible","useImperativeHandle","scrollToCell","behavior","columnAlign","columnIndex","rowAlign","rowIndex","left","align","containerScrollOffset","scrollLeft","index","top","scrollTop","scrollTo","scrollToColumn","scrollToRow","useEffect","columnStartIndex","columnStopIndex","rowStartIndex","rowStopIndex","cells","rowBounds","columns","columnBounds","push","createElement","ariaAttributes","role","key","position","right","transform","scrollOffset","height","size","width","jsx","sizingElement","zIndex","ref","maxHeight","maxWidth","flexGrow","overflow"],"mappings":"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"}

package/docs/assets/HorizontalListsRoute-Dk2qJcyq.js

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

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

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

package/docs/assets/List-B9HC1vRM.js

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

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

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

package/docs/assets/RTLGridsRoute-BiJ_ARQb.js

@@ -1,2 +0,0 @@
-import{j as s,B as a,E as n}from"./index-3R9tv3eW.js";import{B as t}from"./arePropsEqual-MBk0PiJi.js";import{C as p}from"./Code-BJ6U_DpT.js";import{L as c}from"./LoadingSpinner-CcA45RYo.js";import{c as e,i as o,u as i}from"./useContacts-C-Fuwn4U.js";import{G as l}from"./Grid-Cio8auWD.js";import"./contacts-Bxrk2JS2.js";const 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-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">RtlExample</span><span class="tok-punctuation">(</span><span class="tok-punctuation">{</span><span class=""> </span><span class="tok-propertyName">contacts</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">contacts</span><span class="tok-punctuation">:</span><span class=""> </span><span class="tok-typeName">Contact</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">contacts</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-number">10</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-variableName">columnWidth</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">dir</span><span class="tok-operator">=</span><span class="tok-string">"rtl"</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowCount</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-variableName">contacts</span><span class="tok-operator">.</span><span class="tok-propertyName">length</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 8ch; text-indent: -2ch;"><span class=""></span><span class="tok-propertyName">rowHeight</span><span class="tok-operator">=</span><span class="tok-punctuation">{</span><span class="tok-number">35</span><span class="tok-punctuation">}</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 6ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">/&#62;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 4ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">)</span><span class="tok-punctuation">;</span><span class=""></span></div>\n<div style="min-height: 1rem; padding-left: 2ch; text-indent: -2ch;"><span class=""></span><span class="tok-punctuation">}</span></div>';function d({contacts:a}){return s.jsx(l,{cellComponent:u,cellProps:{contacts:a},columnCount:10,columnWidth:e,dir:"rtl",rowCount:a.length,rowHeight:35})}function u({contacts:a,columnIndex:n,rowIndex:t,style:p}){const c=a[t][o(n)];return s.jsxs("div",{className:"truncate leading-none",style:p,children:[s.jsx("div",{children:c}),s.jsxs("small",{className:"text-slate-400",children:["row ",t,", col ",n]})]})}function h(){const e=i();return s.jsxs(a,{direction:"column",gap:4,children:[s.jsxs("div",{children:["Grids can also display right to left languages (like Arabic). The grid components check the"," ",s.jsxs(n,{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir",children:[s.jsx("code",{children:"dir"})," attribute"]})," ","to determine content directionality."]}),s.jsx("div",{children:"Using the same data as from the previous example, here is a grid rendered right to left."}),s.jsxs(t,{className:"h-50 overflow-auto","data-focus-within":"bold",children:[!e.length&&s.jsx(c,{}),s.jsx(d,{contacts:e})]}),s.jsx(p,{html:r})]})}export{h as default};
-//# sourceMappingURL=RTLGridsRoute-BiJ_ARQb.js.map

package/docs/assets/RTLGridsRoute-BiJ_ARQb.js.map

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

package/docs/assets/ScratchpadRoute-wzxynGR2.js

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