@shopify/shop-minis-react 0.1.4 → 0.1.5

package/src/components/atoms/list.tsx

@@ -1,30 +1,24 @@
-import {ComponentType, useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 
-import {
-  VariableSizeList as _VariableSizeList,
-  VariableSizeListProps,
-} from 'react-window'
+import {Virtuoso, VirtuosoProps} from 'react-virtuoso'
 
 import {cn} from '../../lib/utils'
 import '../../styles/utilities.css'
 
 import {Pagination} from './pagination'
 
-const VariableSizeList =
-  _VariableSizeList as unknown as ComponentType<VariableSizeListProps>
-
 interface Props<T = any>
   extends Omit<
-    VariableSizeListProps<T>,
-    'children' | 'itemCount' | 'width' | 'itemSize' | 'direction'
+    VirtuosoProps<T, unknown>,
+    'data' | 'itemContent' | 'endReached'
   > {
   items: T[]
   renderItem: (item: T, index: number) => React.ReactNode
-  itemSizeForRow: (index: number) => number
   showScrollbar?: boolean
   header?: React.ReactNode
-  headerHeight?: number
   fetchMore?: () => Promise<void>
+  loadingComponent?: React.ReactNode
+  isFetchingMore?: boolean
 }
 
 export function List<T = any>({
@@ -34,18 +28,13 @@ export function List<T = any>({
   className,
   showScrollbar = false,
   header,
-  headerHeight,
-  itemSizeForRow,
   fetchMore,
-  overscanCount,
-  ...listProps
+  loadingComponent,
+  isFetchingMore,
+  ...virtuosoProps
 }: Props<T>) {
   const inFlightFetchMoreRef = useRef<Promise<void> | null>(null)
 
-  // This is workaround to prevent multiple calls to fetchMore
-  // react-window re-renders the rows while scrolling,
-  // and the TrackingPixel could be triggered multiple times
-
   const _fetchMore = useCallback(() => {
     // Dedupe concurrent calls by returning the same in-flight promise
     if (inFlightFetchMoreRef.current) return
@@ -60,62 +49,37 @@ export function List<T = any>({
     inFlightFetchMoreRef.current = current
   }, [fetchMore])
 
-  const rowRenderer = useCallback(
-    ({index, style}: {index: number; style: React.CSSProperties}) => {
-      // prepend the header to the first row if it exists
-      if (header && index === 0) {
-        return (
-          <div style={style}>
-            {header}
-            <div style={{top: headerHeight}}>{renderItem(items[0], 0)}</div>
-          </div>
-        )
-      }
-
-      // append the pagination spinner to the last row if fetchMore exists
-      if (fetchMore && index === items.length - 1) {
-        return (
-          <div style={style}>
-            {renderItem(items[index], index)}
-            <div style={{bottom: 0}}>
-              <Pagination fetchMore={_fetchMore} />
-            </div>
-          </div>
-        )
-      }
-
-      return <div style={style}>{renderItem(items[index], index)}</div>
-    },
-    [items, renderItem, header, headerHeight, _fetchMore, fetchMore]
+  const itemContent = useCallback(
+    (index: number, item: T) => <>{renderItem(item, index)}</>,
+    [renderItem]
   )
 
-  const getItemSize = useCallback(
-    (index: number) => {
-      // include the header height in the first row height
-      if (header && index === 0) {
-        const _headerHeight = headerHeight || 0
-        return _headerHeight + itemSizeForRow(index)
-      }
+  const Footer = useCallback(() => {
+    if (!fetchMore) return null
 
-      return itemSizeForRow(index)
-    },
-    [itemSizeForRow, header, headerHeight]
-  )
+    return (
+      <Pagination
+        fetchMore={_fetchMore}
+        loadingComponent={loadingComponent}
+        isFetchingMore={isFetchingMore}
+      />
+    )
+  }, [_fetchMore, fetchMore, loadingComponent, isFetchingMore])
 
   const classNames = cn(showScrollbar ? undefined : 'no-scrollbars', className)
 
   return (
-    <VariableSizeList
+    <Virtuoso
       className={classNames}
-      height={height}
-      direction="vertical"
-      width="100%"
-      itemCount={items.length}
-      overscanCount={overscanCount}
-      itemSize={getItemSize}
-      {...listProps}
-    >
-      {rowRenderer}
-    </VariableSizeList>
+      style={{height}}
+      data={items}
+      itemContent={itemContent}
+      components={{
+        Header: header ? () => <div>{header}</div> : undefined,
+        Footer,
+      }}
+      endReached={fetchMore ? _fetchMore : undefined}
+      {...virtuosoProps}
+    />
   )
 }

package/src/components/commerce/search.tsx

@@ -13,8 +13,6 @@ import {Input} from '../ui/input'
 import {ProductLink} from './product-link'
 import {ProductLinkSkeleton} from './product-link-skeleton'
 
-const ESTIMATED_PRODUCT_LINK_HEIGHT = 100
-
 interface SearchContextValue {
   query: string
   setQuery: (query: string) => void
@@ -146,10 +144,8 @@ export interface SearchResultsListProps {
 function SearchResultsList({
   height = window.innerHeight,
   renderItem,
-  itemHeight = ESTIMATED_PRODUCT_LINK_HEIGHT,
   initialStateComponent,
   showScrollbar,
-  overscanCount = 5,
 }: SearchResultsListProps) {
   const {query, products, loading, fetchMore, hasNextPage, isTyping} =
     useSearchContext()
@@ -205,10 +201,8 @@ function SearchResultsList({
       items={products || []}
       height={height}
       renderItem={_renderItem}
-      itemSizeForRow={() => itemHeight}
       fetchMore={hasNextPage ? fetchMore : undefined}
       showScrollbar={showScrollbar}
-      overscanCount={overscanCount}
     />
   )
 }

package/src/stories/List.stories.tsx

@@ -19,10 +19,6 @@ const meta = {
       control: 'number',
       description: 'Height of the virtualized list container',
     },
-    itemSizeForRow: {
-      control: 'number',
-      description: 'Height of each item in the list',
-    },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof List>

package/src/test-setup.ts

@@ -1,4 +1,7 @@
 import '@testing-library/jest-dom'
+
+import React from 'react'
+
 import {cleanup} from '@testing-library/react'
 import {afterEach, vi} from 'vitest'
 
@@ -32,3 +35,68 @@ global.IntersectionObserver = vi.fn().mockImplementation(() => ({
   thresholds: [],
   takeRecords: vi.fn(),
 }))
+
+// Mock ResizeObserver (used by react-virtuoso)
+global.ResizeObserver = vi.fn().mockImplementation(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+// Set default window size for virtuoso calculations
+Object.defineProperty(window, 'innerHeight', {
+  writable: true,
+  configurable: true,
+  value: 768,
+})
+
+Object.defineProperty(window, 'innerWidth', {
+  writable: true,
+  configurable: true,
+  value: 1024,
+})
+
+vi.mock('react-virtuoso', () => ({
+  Virtuoso: vi.fn().mockImplementation(props => {
+    const {data, itemContent, style, className, components, endReached} = props
+    const items = data || []
+
+    // Simulating virtualization
+    const maxVisibleItems = 20
+    const visibleItems = items.slice(0, maxVisibleItems)
+
+    React.useEffect(() => {
+      if (endReached && items.length >= maxVisibleItems) {
+        // Simulating reaching the end after a short delay
+        const timer = setTimeout(() => endReached(), 100)
+        return () => clearTimeout(timer)
+      }
+      return undefined
+    }, [endReached, items.length])
+
+    return React.createElement(
+      'div',
+      {
+        className,
+        style,
+        'data-testid': 'virtuoso-scroller',
+        'data-virtuoso-scroller': 'true',
+        'data-item-count': items.length,
+        'data-visible-items': visibleItems.length,
+      },
+      components?.Header && components.Header(),
+      React.createElement(
+        'div',
+        {'data-testid': 'virtuoso-item-list'},
+        visibleItems.map((item: any, index: number) =>
+          React.createElement(
+            'div',
+            {key: `virtuoso-item-${String(item?.id || index)}`},
+            itemContent?.(index, item)
+          )
+        )
+      ),
+      components?.Footer && components.Footer()
+    )
+  }),
+}))

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js

@@ -1,8 +0,0 @@
-function i(e) {
-  if (e === void 0) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-export {
-  i as default
-};
-//# sourceMappingURL=assertThisInitialized.js.map

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"assertThisInitialized.js","sources":["../../../../../../../../../../node_modules/.pnpm/@babel+runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js"],"sourcesContent":["function _assertThisInitialized(e) {\n  if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n  return e;\n}\nexport { _assertThisInitialized as default };"],"names":["_assertThisInitialized"],"mappings":"AAAA,SAASA,EAAuB,GAAG;AACjC,MAAe,MAAX,OAAc,OAAM,IAAI,eAAe,2DAA2D;AACtG,SAAO;AACT;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js

@@ -1,8 +0,0 @@
-import e from "./setPrototypeOf.js";
-function p(o, t) {
-  o.prototype = Object.create(t.prototype), o.prototype.constructor = o, e(o, t);
-}
-export {
-  p as default
-};
-//# sourceMappingURL=inheritsLoose.js.map

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inheritsLoose.js","sources":["../../../../../../../../../../node_modules/.pnpm/@babel+runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/inheritsLoose.js"],"sourcesContent":["import setPrototypeOf from \"./setPrototypeOf.js\";\nfunction _inheritsLoose(t, o) {\n  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, setPrototypeOf(t, o);\n}\nexport { _inheritsLoose as default };"],"names":["_inheritsLoose","t","o","setPrototypeOf"],"mappings":";AACA,SAASA,EAAeC,GAAGC,GAAG;AAC5B,EAAAD,EAAE,YAAY,OAAO,OAAOC,EAAE,SAAS,GAAGD,EAAE,UAAU,cAAcA,GAAGE,EAAeF,GAAGC,CAAC;AAC5F;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js

@@ -1,9 +0,0 @@
-function e(o, r) {
-  return e = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t, n) {
-    return t.__proto__ = n, t;
-  }, e(o, r);
-}
-export {
-  e as default
-};
-//# sourceMappingURL=setPrototypeOf.js.map

package/dist/shop-minis-react/node_modules/.pnpm/@babel_runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"setPrototypeOf.js","sources":["../../../../../../../../../../node_modules/.pnpm/@babel+runtime@7.27.6/node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js"],"sourcesContent":["function _setPrototypeOf(t, e) {\n  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {\n    return t.__proto__ = e, t;\n  }, _setPrototypeOf(t, e);\n}\nexport { _setPrototypeOf as default };"],"names":["_setPrototypeOf","t","e"],"mappings":"AAAA,SAASA,EAAgBC,GAAGC,GAAG;AAC7B,SAAOF,IAAkB,OAAO,iBAAiB,OAAO,eAAe,KAAM,IAAG,SAAU,GAAGE,GAAG;AAC9F,WAAO,EAAE,YAAYA,GAAG;AAAA,EAC5B,GAAKF,EAAgBC,GAAGC,CAAC;AACzB;","x_google_ignoreList":[0]}

package/dist/shop-minis-react/node_modules/.pnpm/memoize-one@5.2.1/node_modules/memoize-one/dist/memoize-one.esm.js

@@ -1,28 +0,0 @@
-var s = Number.isNaN || function(r) {
-  return typeof r == "number" && r !== r;
-};
-function o(e, r) {
-  return !!(e === r || s(e) && s(r));
-}
-function g(e, r) {
-  if (e.length !== r.length)
-    return !1;
-  for (var t = 0; t < e.length; t++)
-    if (!o(e[t], r[t]))
-      return !1;
-  return !0;
-}
-function h(e, r) {
-  r === void 0 && (r = g);
-  var t, f = [], u, l = !1;
-  function i() {
-    for (var n = [], a = 0; a < arguments.length; a++)
-      n[a] = arguments[a];
-    return l && t === this && r(n, f) || (u = e.apply(this, n), l = !0, t = this, f = n), u;
-  }
-  return i;
-}
-export {
-  h as default
-};
-//# sourceMappingURL=memoize-one.esm.js.map

package/dist/shop-minis-react/node_modules/.pnpm/memoize-one@5.2.1/node_modules/memoize-one/dist/memoize-one.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"memoize-one.esm.js","sources":["../../../../../../../../node_modules/.pnpm/memoize-one@5.2.1/node_modules/memoize-one/dist/memoize-one.esm.js"],"sourcesContent":["var safeIsNaN = Number.isNaN ||\n    function ponyfill(value) {\n        return typeof value === 'number' && value !== value;\n    };\nfunction isEqual(first, second) {\n    if (first === second) {\n        return true;\n    }\n    if (safeIsNaN(first) && safeIsNaN(second)) {\n        return true;\n    }\n    return false;\n}\nfunction areInputsEqual(newInputs, lastInputs) {\n    if (newInputs.length !== lastInputs.length) {\n        return false;\n    }\n    for (var i = 0; i < newInputs.length; i++) {\n        if (!isEqual(newInputs[i], lastInputs[i])) {\n            return false;\n        }\n    }\n    return true;\n}\n\nfunction memoizeOne(resultFn, isEqual) {\n    if (isEqual === void 0) { isEqual = areInputsEqual; }\n    var lastThis;\n    var lastArgs = [];\n    var lastResult;\n    var calledOnce = false;\n    function memoized() {\n        var newArgs = [];\n        for (var _i = 0; _i < arguments.length; _i++) {\n            newArgs[_i] = arguments[_i];\n        }\n        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {\n            return lastResult;\n        }\n        lastResult = resultFn.apply(this, newArgs);\n        calledOnce = true;\n        lastThis = this;\n        lastArgs = newArgs;\n        return lastResult;\n    }\n    return memoized;\n}\n\nexport default memoizeOne;\n"],"names":["safeIsNaN","value","isEqual","first","second","areInputsEqual","newInputs","lastInputs","i","memoizeOne","resultFn","lastThis","lastArgs","lastResult","calledOnce","memoized","newArgs","_i"],"mappings":"AAAA,IAAIA,IAAY,OAAO,SACnB,SAAkBC,GAAO;AACrB,SAAO,OAAOA,KAAU,YAAYA,MAAUA;AACjD;AACL,SAASC,EAAQC,GAAOC,GAAQ;AAI5B,SAHI,GAAAD,MAAUC,KAGVJ,EAAUG,CAAK,KAAKH,EAAUI,CAAM;AAI5C;AACA,SAASC,EAAeC,GAAWC,GAAY;AAC3C,MAAID,EAAU,WAAWC,EAAW;AAChC,WAAO;AAEX,WAASC,IAAI,GAAGA,IAAIF,EAAU,QAAQE;AAClC,QAAI,CAACN,EAAQI,EAAUE,CAAC,GAAGD,EAAWC,CAAC,CAAC;AACpC,aAAO;AAGf,SAAO;AACX;AAEA,SAASC,EAAWC,GAAUR,GAAS;AACnC,EAAIA,MAAY,WAAUA,IAAUG;AACpC,MAAIM,GACAC,IAAW,CAAE,GACbC,GACAC,IAAa;AACjB,WAASC,IAAW;AAEhB,aADIC,IAAU,CAAE,GACPC,IAAK,GAAGA,IAAK,UAAU,QAAQA;AACpC,MAAAD,EAAQC,CAAE,IAAI,UAAUA,CAAE;AAE9B,WAAIH,KAAcH,MAAa,QAAQT,EAAQc,GAASJ,CAAQ,MAGhEC,IAAaH,EAAS,MAAM,MAAMM,CAAO,GACzCF,IAAa,IACbH,IAAW,MACXC,IAAWI,IACJH;AAAA,EACf;AACI,SAAOE;AACX;","x_google_ignoreList":[0]}