@medusajs/dashboard 3.0.0-snapshot-20251214110905 → 3.0.0-snapshot-20251215162333

package/src/components/data-grid/components/data-grid-root.tsx

@@ -51,7 +51,7 @@ import { isCellMatch, isSpecialFocusKey } from "../utils"
 import { DataGridKeyboardShortcutModal } from "./data-grid-keyboard-shortcut-modal"
 export interface DataGridRootProps<
   TData,
-  TFieldValues extends FieldValues = FieldValues,
+  TFieldValues extends FieldValues = FieldValues
 > {
   data?: TData[]
   columns: ColumnDef<TData>[]
@@ -60,6 +60,19 @@ export interface DataGridRootProps<
   onEditingChange?: (isEditing: boolean) => void
   disableInteractions?: boolean
   multiColumnSelection?: boolean
+  /**
+   * Lazy loading props - when totalRowCount is provided, the grid enters lazy loading mode.
+   * In this mode, the virtualizer will size based on totalRowCount and trigger onFetchMore
+   * when the user scrolls near the end of loaded data.
+   */
+  /** Total count of rows for scroll sizing (enables lazy loading mode when provided) */
+  totalRowCount?: number
+  /** Called when more data should be fetched */
+  onFetchMore?: () => void
+  /** Whether more data is currently being fetched */
+  isFetchingMore?: boolean
+  /** Whether there is more data to fetch */
+  hasNextPage?: boolean
 }
 
 const ROW_HEIGHT = 40
@@ -97,7 +110,7 @@ const getCommonPinningStyles = <TData,>(
 
 export const DataGridRoot = <
   TData,
-  TFieldValues extends FieldValues = FieldValues,
+  TFieldValues extends FieldValues = FieldValues
 >({
   data = [],
   columns,
@@ -106,7 +119,13 @@ export const DataGridRoot = <
   onEditingChange,
   disableInteractions,
   multiColumnSelection = false,
+  totalRowCount,
+  onFetchMore,
+  isFetchingMore,
+  hasNextPage,
 }: DataGridRootProps<TData, TFieldValues>) => {
+  // TODO: remove once everything is lazy loaded
+  const isLazyMode = totalRowCount !== undefined
   const containerRef = useRef<HTMLDivElement>(null)
 
   const { redo, undo, execute } = useCommandHistory()
@@ -163,8 +182,10 @@ export const DataGridRoot = <
   )
   const visibleColumns = grid.getVisibleLeafColumns()
 
+  const effectiveRowCount = isLazyMode ? totalRowCount! : visibleRows.length
+
   const rowVirtualizer = useVirtualizer({
-    count: visibleRows.length,
+    count: effectiveRowCount,
     estimateSize: () => ROW_HEIGHT,
     getScrollElement: () => containerRef.current,
     overscan: 5,
@@ -189,6 +210,76 @@ export const DataGridRoot = <
   })
   const virtualRows = rowVirtualizer.getVirtualItems()
 
+  /**
+   * Lazy loading scroll detection.
+   * When the user scrolls near the end of loaded data, trigger onFetchMore.
+   * We use refs to get latest values in the scroll handler without re-attaching.
+   */
+  const lazyLoadingRefs = useRef({
+    onFetchMore,
+    hasNextPage,
+    isFetchingMore,
+    loadedRowCount: visibleRows.length,
+  })
+
+  // Keep refs updated
+  useEffect(() => {
+    lazyLoadingRefs.current = {
+      onFetchMore,
+      hasNextPage,
+      isFetchingMore,
+      loadedRowCount: visibleRows.length,
+    }
+  }, [onFetchMore, hasNextPage, isFetchingMore, visibleRows.length])
+
+  const hasData = visibleRows.length > 0
+
+  const handleScroll = useCallback(() => {
+    const { onFetchMore, hasNextPage, isFetchingMore, loadedRowCount } =
+      lazyLoadingRefs.current
+
+    if (!onFetchMore || !hasNextPage || isFetchingMore) {
+      return
+    }
+
+    const scrollElement = containerRef.current
+
+    const { scrollTop, clientHeight } = scrollElement!
+    const loadedHeight = loadedRowCount * ROW_HEIGHT
+    const viewportBottom = scrollTop + clientHeight
+    const fetchThreshold = loadedHeight - ROW_HEIGHT * 10
+
+    if (viewportBottom >= fetchThreshold) {
+      onFetchMore()
+    }
+  }, [lazyLoadingRefs, containerRef])
+
+  useEffect(() => {
+    if (!isLazyMode || !hasData) {
+      return
+    }
+
+    const container = containerRef.current
+    if (!container) {
+      return
+    }
+
+    const timeoutId = setTimeout(() => {
+      const scrollElement: HTMLElement | null = containerRef.current
+      if (!scrollElement) {
+        return
+      }
+
+      scrollElement.addEventListener("scroll", handleScroll)
+    }, 100)
+
+    return () => {
+      clearTimeout(timeoutId)
+      const scrollElement = containerRef.current
+      scrollElement?.removeEventListener("scroll", handleScroll)
+    }
+  }, [isLazyMode, hasData])
+
   const columnVirtualizer = useVirtualizer({
     count: visibleColumns.length,
     estimateSize: (index) => visibleColumns[index].getSize(),
@@ -650,6 +741,20 @@ export const DataGridRoot = <
               >
                 {virtualRows.map((virtualRow) => {
                   const row = visibleRows[virtualRow.index] as Row<TData>
+
+                  // In lazy mode, rows beyond loaded data show as skeleton
+                  if (!row) {
+                    return (
+                      <DataGridRowSkeleton
+                        key={`skeleton-${virtualRow.index}`}
+                        virtualRow={virtualRow}
+                        virtualColumns={virtualColumns}
+                        virtualPaddingLeft={virtualPaddingLeft}
+                        virtualPaddingRight={virtualPaddingRight}
+                      />
+                    )
+                  }
+
                   const rowIndex = flatRows.findIndex((r) => r.id === row.id)
 
                   return (
@@ -861,10 +966,10 @@ const DataGridCell = <TData,>({
 type DataGridRowProps<TData> = {
   row: Row<TData>
   rowIndex: number
-  virtualRow: VirtualItem<Element>
+  virtualRow: VirtualItem
   virtualPaddingLeft?: number
   virtualPaddingRight?: number
-  virtualColumns: VirtualItem<Element>[]
+  virtualColumns: VirtualItem[]
   flatColumns: Column<TData, unknown>[]
   anchor: DataGridCoordinates | null
   onDragToFillStart: (e: React.MouseEvent<HTMLElement>) => void
@@ -943,3 +1048,77 @@ const DataGridRow = <TData,>({
     </div>
   )
 }
+
+/**
+ * Skeleton row component for lazy loading.
+ * Displays placeholder cells while data is being fetched.
+ */
+type DataGridRowSkeletonProps = {
+  virtualRow: VirtualItem
+  virtualPaddingLeft?: number
+  virtualPaddingRight?: number
+  virtualColumns: VirtualItem[]
+}
+
+const DataGridRowSkeleton = ({
+  virtualRow,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  virtualColumns,
+}: DataGridRowSkeletonProps) => {
+  return (
+    <div
+      role="row"
+      aria-rowindex={virtualRow.index}
+      style={{
+        transform: `translateY(${virtualRow.start}px)`,
+      }}
+      className="bg-ui-bg-subtle txt-compact-small absolute flex h-10 w-full"
+    >
+      {virtualPaddingLeft ? (
+        <div
+          role="presentation"
+          style={{ display: "flex", width: virtualPaddingLeft }}
+        />
+      ) : null}
+      {virtualColumns.map((vc, index, array) => {
+        const previousVC = array[index - 1]
+        const elements: ReactNode[] = []
+
+        if (previousVC && vc.index !== previousVC.index + 1) {
+          elements.push(
+            <div
+              key={`padding-${previousVC.index}-${vc.index}`}
+              role="presentation"
+              style={{
+                display: "flex",
+                width: `${vc.start - previousVC.end}px`,
+              }}
+            />
+          )
+        }
+
+        elements.push(
+          <div
+            key={`skeleton-cell-${vc.index}`}
+            role="gridcell"
+            style={{ width: vc.size }}
+            className="relative flex items-center border-b border-r p-0 outline-none"
+          >
+            <div className="flex h-full w-full items-center px-4">
+              <div className="bg-ui-bg-component h-4 w-3/4 animate-pulse rounded" />
+            </div>
+          </div>
+        )
+
+        return elements
+      })}
+      {virtualPaddingRight ? (
+        <div
+          role="presentation"
+          style={{ display: "flex", width: virtualPaddingRight }}
+        />
+      ) : null}
+    </div>
+  )
+}

package/src/components/data-grid/data-grid.tsx

@@ -19,6 +19,11 @@ interface DataGridProps<TData, TFieldValues extends FieldValues = FieldValues>
 
 const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
   isLoading,
+  // Lazy loading props - passed through to DataGridRoot
+  totalRowCount,
+  onFetchMore,
+  isFetchingMore,
+  hasNextPage,
   ...props
 }: DataGridProps<TData, TFieldValues>) => {
   return isLoading ? (
@@ -29,7 +34,13 @@ const _DataGrid = <TData, TFieldValues extends FieldValues = FieldValues>({
       }
     />
   ) : (
-    <DataGridRoot {...props} />
+    <DataGridRoot
+      {...props}
+      totalRowCount={totalRowCount}
+      onFetchMore={onFetchMore}
+      isFetchingMore={isFetchingMore}
+      hasNextPage={hasNextPage}
+    />
   )
 }
 

package/src/components/data-grid/helpers/create-data-grid-column-helper.ts

@@ -36,6 +36,18 @@ type DataGridHelperColumnsProps<TData, TFieldValues extends FieldValues> = {
    * @default false
    */
   disableHiding?: boolean
+  /**
+   * The size of the column in pixels.
+   */
+  size?: number
+  /**
+   * The minimum size of the column in pixels.
+   */
+  minSize?: number
+  /**
+   * The maximum size of the column in pixels.
+   */
+  maxSize?: number
 } & (
   | {
       field: FieldFunction<TData, TFieldValues>
@@ -59,12 +71,18 @@ export function createDataGridHelper<
       disableHiding = false,
       field,
       type,
+      size,
+      minSize,
+      maxSize,
     }: DataGridHelperColumnsProps<TData, TFieldValues>) =>
       columnHelper.display({
         id,
         header,
         cell,
         enableHiding: !disableHiding,
+        size,
+        minSize,
+        maxSize,
         meta: {
           name,
           field,

package/src/components/data-grid/hooks/use-data-grid-cell.tsx

@@ -202,7 +202,7 @@ export const useDataGridCell = <TData, TValue>({
 
   useEffect(() => {
     if (isAnchor && !containerRef.current?.contains(document.activeElement)) {
-      containerRef.current?.focus()
+      containerRef.current?.focus({ preventScroll: true })
     }
   }, [isAnchor])
 

package/src/hooks/api/categories.tsx

@@ -1,7 +1,9 @@
 import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import {
+  InfiniteData,
   QueryKey,
+  UseInfiniteQueryOptions,
   UseMutationOptions,
   UseQueryOptions,
   useMutation,
@@ -11,6 +13,7 @@ import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { productsQueryKeys } from "./products"
+import { useInfiniteList } from "../use-infinite-list"
 
 const CATEGORIES_QUERY_KEY = "categories" as const
 export const categoriesQueryKeys = queryKeysFactory(CATEGORIES_QUERY_KEY)
@@ -58,6 +61,35 @@ export const useProductCategories = (
   return { ...data, ...rest }
 }
 
+export const useInfiniteCategories = (
+  query?: Omit<HttpTypes.AdminProductCategoryListParams, "offset" | "limit"> & {
+    limit?: number
+  },
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      HttpTypes.AdminProductCategoryListResponse,
+      FetchError,
+      InfiniteData<HttpTypes.AdminProductCategoryListResponse, number>,
+      HttpTypes.AdminProductCategoryListResponse,
+      QueryKey,
+      number
+    >,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
+  >
+) => {
+  return useInfiniteList<
+    HttpTypes.AdminProductCategoryListResponse,
+    HttpTypes.AdminProductCategoryListParams,
+    FetchError,
+    QueryKey
+  >({
+    queryKey: (params) => categoriesQueryKeys.list(params),
+    queryFn: (params) => sdk.admin.productCategory.list(params),
+    query,
+    options,
+  })
+}
+
 export const useCreateProductCategory = (
   options?: UseMutationOptions<
     HttpTypes.AdminProductCategoryResponse,

package/src/hooks/api/collections.tsx

@@ -1,7 +1,9 @@
 import { FetchError } from "@medusajs/js-sdk"
 import { FindParams, HttpTypes, PaginatedResponse } from "@medusajs/types"
 import {
+  InfiniteData,
   QueryKey,
+  UseInfiniteQueryOptions,
   UseMutationOptions,
   UseQueryOptions,
   useMutation,
@@ -11,6 +13,7 @@ import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { productsQueryKeys } from "./products"
+import { useInfiniteList } from "../use-infinite-list"
 
 const COLLECTION_QUERY_KEY = "collections" as const
 export const collectionsQueryKeys = queryKeysFactory(COLLECTION_QUERY_KEY)
@@ -57,6 +60,34 @@ export const useCollections = (
   return { ...data, ...rest }
 }
 
+export const useInfiniteCollections = (
+  query?: Omit<HttpTypes.AdminCollectionListParams, "offset" | "limit"> & {
+    limit?: number
+  },
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      HttpTypes.AdminCollectionListResponse,
+      FetchError,
+      InfiniteData<HttpTypes.AdminCollectionListResponse, number>,
+      HttpTypes.AdminCollectionListResponse,
+      QueryKey,
+      number
+    >,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
+  >
+) => {
+  return useInfiniteList<
+    HttpTypes.AdminCollectionListResponse,
+    HttpTypes.AdminCollectionListParams,
+    FetchError,
+    QueryKey
+  >({
+    queryKey: (params) => collectionsQueryKeys.list(params),
+    queryFn: (params) => sdk.admin.productCollection.list(params),
+    query,
+    options,
+  })
+}
 export const useUpdateCollection = (
   id: string,
   options?: UseMutationOptions<

package/src/hooks/api/product-types.tsx

@@ -1,7 +1,9 @@
 import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import {
+  InfiniteData,
   QueryKey,
+  UseInfiniteQueryOptions,
   UseMutationOptions,
   UseQueryOptions,
   useMutation,
@@ -10,6 +12,7 @@ import {
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
+import { useInfiniteList } from "../use-infinite-list"
 
 const PRODUCT_TYPES_QUERY_KEY = "product_types" as const
 export const productTypesQueryKeys = queryKeysFactory(PRODUCT_TYPES_QUERY_KEY)
@@ -57,6 +60,35 @@ export const useProductTypes = (
   return { ...data, ...rest }
 }
 
+export const useInfiniteProductTypes = (
+  query?: Omit<HttpTypes.AdminProductTypeListParams, "offset" | "limit"> & {
+    limit?: number
+  },
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      HttpTypes.AdminProductTypeListResponse,
+      FetchError,
+      InfiniteData<HttpTypes.AdminProductTypeListResponse, number>,
+      HttpTypes.AdminProductTypeListResponse,
+      QueryKey,
+      number
+    >,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
+  >
+) => {
+  return useInfiniteList<
+    HttpTypes.AdminProductTypeListResponse,
+    HttpTypes.AdminProductTypeListParams,
+    FetchError,
+    QueryKey
+  >({
+    queryKey: (params) => productTypesQueryKeys.list(params),
+    queryFn: (params) => sdk.admin.productType.list(params),
+    query,
+    options,
+  })
+}
+
 export const useCreateProductType = (
   options?: UseMutationOptions<
     HttpTypes.AdminProductTypeResponse,

package/src/hooks/api/product-variants.tsx

@@ -1,8 +1,15 @@
-import { QueryKey, useQuery, UseQueryOptions } from "@tanstack/react-query"
+import {
+  QueryKey,
+  UseInfiniteQueryOptions,
+  useQuery,
+  UseQueryOptions,
+} from "@tanstack/react-query"
+import { InfiniteData } from "@tanstack/query-core"
 import { sdk } from "../../lib/client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
+import { useInfiniteList } from "../use-infinite-list"
 
 const PRODUCT_VARIANT_QUERY_KEY = "product_variant" as const
 export const productVariantQueryKeys = queryKeysFactory(
@@ -10,7 +17,7 @@ export const productVariantQueryKeys = queryKeysFactory(
 )
 
 export const useVariants = (
-  query?: Record<string, any>,
+  query?: HttpTypes.AdminProductVariantParams,
   options?: Omit<
     UseQueryOptions<
       HttpTypes.AdminProductVariantListResponse,
@@ -29,3 +36,34 @@ export const useVariants = (
 
   return { ...data, ...rest }
 }
+
+export const useInfiniteVariants = (
+  query?: Omit<HttpTypes.AdminProductVariantParams, "offset" | "limit"> & {
+    limit?: number
+  },
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      HttpTypes.AdminProductVariantListResponse,
+      FetchError,
+      InfiniteData<HttpTypes.AdminProductVariantListResponse, number>,
+      HttpTypes.AdminProductVariantListResponse,
+      QueryKey,
+      number
+    >,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
+  >
+) => {
+  return useInfiniteList<
+    HttpTypes.AdminProductVariantListResponse,
+    HttpTypes.AdminProductVariantParams,
+    FetchError,
+    QueryKey
+  >({
+    queryKey: (params) => productVariantQueryKeys.list(params),
+    queryFn: async (params) => {
+      return await sdk.admin.productVariant.list(params)
+    },
+    query,
+    options,
+  })
+}

package/src/hooks/api/products.tsx

@@ -2,15 +2,18 @@ import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import {
   QueryKey,
+  UseInfiniteQueryOptions,
   useMutation,
   UseMutationOptions,
   useQuery,
   UseQueryOptions,
 } from "@tanstack/react-query"
+import { InfiniteData } from "@tanstack/query-core"
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
 import { inventoryItemsQueryKeys } from "./inventory.tsx"
+import { useInfiniteList } from "../use-infinite-list.tsx"
 
 const PRODUCTS_QUERY_KEY = "products" as const
 export const productsQueryKeys = queryKeysFactory(PRODUCTS_QUERY_KEY)
@@ -310,6 +313,32 @@ export const useProducts = (
   return { ...data, ...rest }
 }
 
+export const useInfiniteProducts = (
+  query?: HttpTypes.AdminProductListParams,
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      HttpTypes.AdminProductListResponse,
+      FetchError,
+      InfiniteData<HttpTypes.AdminProductListResponse, number>,
+      HttpTypes.AdminProductListResponse,
+      QueryKey,
+      number
+    >,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
+  >
+) => {
+  return useInfiniteList<
+    HttpTypes.AdminProductListResponse,
+    HttpTypes.AdminProductListParams,
+    FetchError,
+    QueryKey
+  >({
+    queryKey: (params) => productsQueryKeys.list(params),
+    queryFn: (params) => sdk.admin.product.list(params),
+    query,
+    options,
+  })
+}
 export const useCreateProduct = (
   options?: UseMutationOptions<
     HttpTypes.AdminProductResponse,

package/src/hooks/api/tags.tsx

@@ -1,7 +1,9 @@
 import { FetchError } from "@medusajs/js-sdk"
 import { HttpTypes } from "@medusajs/types"
 import {
+  InfiniteData,
   QueryKey,
+  UseInfiniteQueryOptions,
   UseMutationOptions,
   UseQueryOptions,
   useMutation,
@@ -10,6 +12,7 @@ import {
 import { sdk } from "../../lib/client"
 import { queryClient } from "../../lib/query-client"
 import { queryKeysFactory } from "../../lib/query-key-factory"
+import { useInfiniteList } from "../use-infinite-list"
 
 const TAGS_QUERY_KEY = "tags" as const
 export const productTagsQueryKeys = queryKeysFactory(TAGS_QUERY_KEY)
@@ -57,6 +60,35 @@ export const useProductTags = (
   return { ...data, ...rest }
 }
 
+export const useInfiniteProductTags = (
+  query?: Omit<HttpTypes.AdminProductTagListParams, "offset" | "limit"> & {
+    limit?: number
+  },
+  options?: Omit<
+    UseInfiniteQueryOptions<
+      HttpTypes.AdminProductTagListResponse,
+      FetchError,
+      InfiniteData<HttpTypes.AdminProductTagListResponse, number>,
+      HttpTypes.AdminProductTagListResponse,
+      QueryKey,
+      number
+    >,
+    "queryFn" | "queryKey" | "initialPageParam" | "getNextPageParam"
+  >
+) => {
+  return useInfiniteList<
+    HttpTypes.AdminProductTagListResponse,
+    HttpTypes.AdminProductTagListParams,
+    FetchError,
+    QueryKey
+  >({
+    queryKey: (params) => productTagsQueryKeys.list(params),
+    queryFn: (params) => sdk.admin.productTag.list(params),
+    query,
+    options,
+  })
+}
+
 export const useCreateProductTag = (
   query?: HttpTypes.AdminProductTagParams,
   options?: UseMutationOptions<