@ledgerhq/react-ui 0.24.0-nightly.2 → 0.24.0-nightly.3

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js

@@ -32,23 +32,63 @@ __export(VirtualList_exports, {
 });
 module.exports = __toCommonJS(VirtualList_exports);
 var import_react = __toESM(require("react"));
-var import_react_window = require("react-window");
-var import_react_virtualized_auto_sizer = __toESM(require("react-virtualized-auto-sizer"));
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_components = require("../../../components");
+const DefaultLoadingComponent = () => /* @__PURE__ */ import_react.default.createElement(import_components.Flex, { justifyContent: "center", alignItems: "center", height: "76px" }, /* @__PURE__ */ import_react.default.createElement(import_components.InfiniteLoader, null));
 const VirtualList = ({
   count,
   itemHeight,
+  overscan = 5,
+  LoadingComponent,
+  isLoading,
+  hasNextPage = false,
+  threshold = 5,
+  onVisibleItemsScrollEnd,
   renderItem
 }) => {
-  return /* @__PURE__ */ import_react.default.createElement(import_react_virtualized_auto_sizer.default, { style: { height: "100%", width: "100%" } }, ({ height }) => /* @__PURE__ */ import_react.default.createElement(
-    import_react_window.FixedSizeList,
+  const parentRef = (0, import_react.useRef)(null);
+  const rowVirtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: hasNextPage ? count + 1 : count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => itemHeight,
+    overscan
+  });
+  (0, import_react.useEffect)(() => {
+    const items = rowVirtualizer.getVirtualItems();
+    if (!items.length)
+      return;
+    const lastItem = items[items.length - 1];
+    if (lastItem.index >= count - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
+      onVisibleItemsScrollEnd();
+    }
+  }, [hasNextPage, onVisibleItemsScrollEnd, count, isLoading, rowVirtualizer.getVirtualItems()]);
+  const showCustomLoadingComponent = !!LoadingComponent;
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto" } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      height,
-      itemCount: count,
-      itemSize: itemHeight,
-      layout: "vertical",
-      width: "100%"
+      style: {
+        height: `${rowVirtualizer.getTotalSize()}px`,
+        width: "100%",
+        position: "relative"
+      }
     },
-    ({ index, style }) => /* @__PURE__ */ import_react.default.createElement("div", { style }, renderItem(index))
-  ));
+    rowVirtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        key: virtualRow.index,
+        "data-index": virtualRow.index,
+        ref: rowVirtualizer.measureElement,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transform: `translateY(${virtualRow.start}px)`,
+          height: `${itemHeight}px`,
+          width: "100%"
+        }
+      },
+      renderItem(virtualRow.index)
+    ))
+  ), isLoading && (showCustomLoadingComponent ? LoadingComponent : /* @__PURE__ */ import_react.default.createElement(DefaultLoadingComponent, null)));
 };
 //# sourceMappingURL=VirtualList.js.map

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],
-  "sourcesContent": ["import React, { ReactNode } from \"react\";\nimport { FixedSizeList as List } from \"react-window\";\nimport AutoSizer from \"react-virtualized-auto-sizer\";\n\nexport const VirtualList = ({\n  count,\n  itemHeight,\n  renderItem,\n}: {\n  count: number;\n  itemHeight: number;\n  renderItem: (index: number) => ReactNode;\n}) => {\n  return (\n    <AutoSizer style={{ height: \"100%\", width: \"100%\" }}>\n      {({ height }: { height: number }) => (\n        <List\n          height={height}\n          itemCount={count}\n          itemSize={itemHeight}\n          layout=\"vertical\"\n          width=\"100%\"\n        >\n          {({ index, style }) => <div style={style}>{renderItem(index)}</div>}\n        </List>\n      )}\n    </AutoSizer>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAiC;AACjC,0BAAsC;AACtC,0CAAsB;AAEf,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,SACE,6BAAAA,QAAA,cAAC,oCAAAC,SAAA,EAAU,OAAO,EAAE,QAAQ,QAAQ,OAAO,OAAO,KAC/C,CAAC,EAAE,OAAO,MACT,6BAAAD,QAAA;AAAA,IAAC,oBAAAE;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX,UAAU;AAAA,MACV,QAAO;AAAA,MACP,OAAM;AAAA;AAAA,IAEL,CAAC,EAAE,OAAO,MAAM,MAAM,6BAAAF,QAAA,cAAC,SAAI,SAAe,WAAW,KAAK,CAAE;AAAA,EAC/D,CAEJ;AAEJ;",
-  "names": ["React", "AutoSizer", "List"]
+  "sourcesContent": ["import React, { useEffect, useRef } from \"react\";\nimport { useVirtualizer } from \"@tanstack/react-virtual\";\nimport { Flex, InfiniteLoader } from \"../../../components\";\n\ninterface VirtualItem {\n  key: string | number | bigint;\n  index: number;\n  start: number;\n  end: number;\n  size: number;\n}\n\n/**\n * Props for the VirtualList component, which efficiently renders large lists\n * by virtualizing DOM nodes to improve performance.\n */\ntype VirtualListProps = {\n  /**\n   * Total number of items in the list.\n   * This is used to calculate the total height of the list.\n   */\n  count: number;\n  /**\n   * Height of each item in the list.\n   * This is used to calculate the total height of the list and the position of each item.\n   */\n  itemHeight: number;\n  /**\n   * Number of extra items to render outside the visible viewport for smoother scrolling.\n   * Defaults to 5.\n   */\n  overscan?: number;\n  /**\n   * React component or node to display when the list is loading additional items.\n   * If not provided, a default loading spinner will be used.\n   */\n  LoadingComponent?: React.ReactNode;\n  /**\n   * Indicates whether new items are currently being loaded.\n   */\n  isLoading?: boolean;\n  /**\n   * Indicates if there are more items to load.\n   */\n  hasNextPage?: boolean;\n  /**\n   * Number of items to check before the end of the list to trigger loading more items.\n   * Defaults to 5.\n   */\n  threshold?: number;\n  /**\n   * Callback function to be called when the user scrolls to the end of the visible items.\n   * This can be used to load more items when the user reaches the end of the list.\n   */\n  onVisibleItemsScrollEnd?: () => void;\n  /**\n   * Function to render each item in the list.\n   * Receives the index of the item as an argument and should return a React node.\n   */\n  renderItem: (index: number) => React.ReactNode;\n};\n\nconst DefaultLoadingComponent = () => (\n  <Flex justifyContent=\"center\" alignItems=\"center\" height=\"76px\">\n    <InfiniteLoader />\n  </Flex>\n);\n\nexport const VirtualList = ({\n  count,\n  itemHeight,\n  overscan = 5,\n  LoadingComponent,\n  isLoading,\n  hasNextPage = false,\n  threshold = 5,\n  onVisibleItemsScrollEnd,\n  renderItem,\n}: VirtualListProps) => {\n  const parentRef = useRef<HTMLDivElement>(null);\n\n  const rowVirtualizer = useVirtualizer({\n    count: hasNextPage ? count + 1 : count,\n    getScrollElement: () => parentRef.current,\n    estimateSize: () => itemHeight,\n    overscan,\n  });\n\n  useEffect(() => {\n    const items = rowVirtualizer.getVirtualItems();\n    if (!items.length) return;\n    const lastItem = items[items.length - 1];\n\n    if (\n      lastItem.index >= count - 1 - threshold &&\n      hasNextPage &&\n      !isLoading &&\n      onVisibleItemsScrollEnd\n    ) {\n      onVisibleItemsScrollEnd();\n    }\n  }, [hasNextPage, onVisibleItemsScrollEnd, count, isLoading, rowVirtualizer.getVirtualItems()]);\n\n  const showCustomLoadingComponent = !!LoadingComponent;\n\n  return (\n    <div ref={parentRef} style={{ width: \"100%\", height: \"100%\", overflow: \"auto\" }}>\n      <div\n        style={{\n          height: `${rowVirtualizer.getTotalSize()}px`,\n          width: \"100%\",\n          position: \"relative\",\n        }}\n      >\n        {rowVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => (\n          <div\n            key={virtualRow.index}\n            data-index={virtualRow.index}\n            ref={rowVirtualizer.measureElement}\n            style={{\n              position: \"absolute\",\n              top: 0,\n              left: 0,\n              transform: `translateY(${virtualRow.start}px)`,\n              height: `${itemHeight}px`,\n              width: \"100%\",\n            }}\n          >\n            {renderItem(virtualRow.index)}\n          </div>\n        ))}\n      </div>\n      {isLoading && (showCustomLoadingComponent ? LoadingComponent : <DefaultLoadingComponent />)}\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyC;AACzC,2BAA+B;AAC/B,wBAAqC;AA4DrC,MAAM,0BAA0B,MAC9B,6BAAAA,QAAA,cAAC,0BAAK,gBAAe,UAAS,YAAW,UAAS,QAAO,UACvD,6BAAAA,QAAA,cAAC,sCAAe,CAClB;AAGK,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,YAAY;AAAA,EACZ;AAAA,EACA;AACF,MAAwB;AACtB,QAAM,gBAAY,qBAAuB,IAAI;AAE7C,QAAM,qBAAiB,qCAAe;AAAA,IACpC,OAAO,cAAc,QAAQ,IAAI;AAAA,IACjC,kBAAkB,MAAM,UAAU;AAAA,IAClC,cAAc,MAAM;AAAA,IACpB;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AACd,UAAM,QAAQ,eAAe,gBAAgB;AAC7C,QAAI,CAAC,MAAM;AAAQ;AACnB,UAAM,WAAW,MAAM,MAAM,SAAS,CAAC;AAEvC,QACE,SAAS,SAAS,QAAQ,IAAI,aAC9B,eACA,CAAC,aACD,yBACA;AACA,8BAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,aAAa,yBAAyB,OAAO,WAAW,eAAe,gBAAgB,CAAC,CAAC;AAE7F,QAAM,6BAA6B,CAAC,CAAC;AAErC,SACE,6BAAAA,QAAA,cAAC,SAAI,KAAK,WAAW,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,UAAU,OAAO,KAC5E,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,GAAG,eAAe,aAAa,CAAC;AAAA,QACxC,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA;AAAA,IAEC,eAAe,gBAAgB,EAAE,IAAI,CAAC,eACrC,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,KAAK,WAAW;AAAA,QAChB,cAAY,WAAW;AAAA,QACvB,KAAK,eAAe;AAAA,QACpB,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAW,cAAc,WAAW,KAAK;AAAA,UACzC,QAAQ,GAAG,UAAU;AAAA,UACrB,OAAO;AAAA,QACT;AAAA;AAAA,MAEC,WAAW,WAAW,KAAK;AAAA,IAC9B,CACD;AAAA,EACH,GACC,cAAc,6BAA6B,mBAAmB,6BAAAA,QAAA,cAAC,6BAAwB,EAC1F;AAEJ;",
+  "names": ["React"]
 }

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js

@@ -30,11 +30,13 @@ var VirtualList_stories_exports = {};
 __export(VirtualList_stories_exports, {
   Default: () => Default,
   TestVirtualList: () => TestVirtualList,
+  WithPagination: () => WithPagination,
   default: () => VirtualList_stories_default
 });
 module.exports = __toCommonJS(VirtualList_stories_exports);
 var import_react = __toESM(require("react"));
 var import_VirtualList = require("./VirtualList");
+var import_addon_actions = require("@storybook/addon-actions");
 var import_test = require("@storybook/test");
 const meta = {
   component: import_VirtualList.VirtualList,
@@ -43,28 +45,123 @@ const meta = {
   ],
   title: "PreLdls/Components/VirtualList",
   tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering."
+      }
+    }
+  },
+  argTypes: {
+    count: {
+      description: "Total number of items in the list."
+    },
+    itemHeight: {
+      description: "Height of each item in the list."
+    },
+    overscan: {
+      description: "Number of extra items to render outside the visible viewport for smoother scrolling.",
+      table: {
+        defaultValue: {
+          summary: "5"
+        }
+      }
+    },
+    LoadingComponent: {
+      description: "React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used."
+    },
+    isLoading: {
+      description: "Indicates whether new items are currently being loaded."
+    },
+    hasNextPage: {
+      description: "Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.",
+      defaultValue: {
+        summary: "false"
+      }
+    },
+    threshold: {
+      description: "Number of items to check before the end of the list to trigger loading more items.",
+      defaultValue: {
+        summary: "5"
+      }
+    },
+    onVisibleItemsScrollEnd: {
+      description: "Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list."
+    },
+    renderItem: {
+      description: "Function to render each item in the list. Receives the index of the item as an argument and should return a React node."
+    }
+  },
   args: {
     itemHeight: 64,
     count: 50,
-    renderItem: (i) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i)
+    LoadingComponent: void 0,
+    isLoading: false,
+    overscan: 5,
+    hasNextPage: false,
+    threshold: 5,
+    onVisibleItemsScrollEnd: () => {
+    },
+    renderItem: (index) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: index }, "Item #", index)
   }
 };
 var VirtualList_stories_default = meta;
-const Default = {};
+const Default = {
+  args: {
+    count: 20,
+    itemHeight: 50,
+    overscan: 5,
+    renderItem: (index) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", index)
+  }
+};
+const WithPagination = {
+  render: (args) => {
+    const [items, setItems] = (0, import_react.useState)(Array.from({ length: args.count }, (_, i) => i));
+    const [isFetching, setIsFetching] = (0, import_react.useState)(false);
+    const handleFetchNextPage = async () => {
+      (0, import_addon_actions.action)("fetchNextPage")();
+      if (isFetching)
+        return;
+      setIsFetching(true);
+      await new Promise((resolve) => setTimeout(resolve, 1e3));
+      setItems((prev) => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);
+      setIsFetching(false);
+    };
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_VirtualList.VirtualList,
+      {
+        ...args,
+        count: items.length,
+        isLoading: isFetching,
+        onVisibleItemsScrollEnd: handleFetchNextPage,
+        hasNextPage: true,
+        renderItem: (index) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", items[index])
+      }
+    );
+  },
+  args: {
+    count: 50,
+    itemHeight: 50,
+    overscan: 5,
+    hasNextPage: true,
+    isLoading: false
+  }
+};
 const TestVirtualList = {
   play: async ({ canvasElement }) => {
     const canvas = (0, import_test.within)(canvasElement);
-    const visible = canvas.getAllByText(/Item #/i);
-    const firstVisible = visible[0];
-    const lastVisible = visible[visible.length - 1];
-    await (0, import_test.expect)(visible.length).toBeLessThanOrEqual(10);
-    await (0, import_test.expect)(firstVisible).toBeInTheDocument();
+    const visibleItems = canvas.getAllByText(/Item #/i);
+    const firstVisibleItem = visibleItems[0];
+    const lastVisibleItem = visibleItems[visibleItems.length - 1];
+    await (0, import_test.expect)(visibleItems.length).toBeLessThanOrEqual(12);
+    await (0, import_test.expect)(firstVisibleItem).toBeInTheDocument();
     await import_test.userEvent.pointer([
-      { keys: "[TouchA>]", target: lastVisible },
-      { target: firstVisible },
+      { keys: "[TouchA>]", target: lastVisibleItem },
+      { target: firstVisibleItem },
       { keys: "[/TouchA]" }
     ]);
-    await (0, import_test.waitFor)(() => (0, import_test.expect)(firstVisible).not.toBeInTheDocument());
+    await (0, import_test.waitFor)(() => (0, import_test.expect)(firstVisibleItem).not.toBeInTheDocument());
   }
 };
 //# sourceMappingURL=VirtualList.stories.js.map

package/lib/cjs/pre-ldls/components/VirtualList/VirtualList.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/pre-ldls/components/VirtualList/VirtualList.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof VirtualList> = {\n  component: VirtualList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/VirtualList\",\n  tags: [\"autodocs\"],\n  args: {\n    itemHeight: 64,\n    count: 50,\n    renderItem: (i: number) => <h1 tabIndex={i}>Item #{i}</h1>,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList>;\n\nexport const Default: Story = {};\n\nexport const TestVirtualList: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const visible = canvas.getAllByText(/Item #/i);\n    const firstVisible = visible[0];\n    const lastVisible = visible[visible.length - 1];\n\n    await expect(visible.length).toBeLessThanOrEqual(10);\n\n    await expect(firstVisible).toBeInTheDocument();\n    await userEvent.pointer([\n      { keys: \"[TouchA>]\", target: lastVisible },\n      { target: firstVisible },\n      { keys: \"[/TouchA]\" },\n    ]);\n    await waitFor(() => expect(firstVisible).not.toBeInTheDocument());\n  },\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAA4B;AAC5B,kBAAmD;AAEnD,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,YAAY;AAAA,IACV,WACE,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,QAAQ,QAAQ,KAC5B,6BAAAA,QAAA,cAAC,WAAM,CACT;AAAA,EAEJ;AAAA,EACA,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,YAAY,CAAC,MAAc,6BAAAA,QAAA,cAAC,QAAG,UAAU,KAAG,UAAO,CAAE;AAAA,EACvD;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,UAAU,OAAO,aAAa,SAAS;AAC7C,UAAM,eAAe,QAAQ,CAAC;AAC9B,UAAM,cAAc,QAAQ,QAAQ,SAAS,CAAC;AAE9C,cAAM,oBAAO,QAAQ,MAAM,EAAE,oBAAoB,EAAE;AAEnD,cAAM,oBAAO,YAAY,EAAE,kBAAkB;AAC7C,UAAM,sBAAU,QAAQ;AAAA,MACtB,EAAE,MAAM,aAAa,QAAQ,YAAY;AAAA,MACzC,EAAE,QAAQ,aAAa;AAAA,MACvB,EAAE,MAAM,YAAY;AAAA,IACtB,CAAC;AACD,cAAM,qBAAQ,UAAM,oBAAO,YAAY,EAAE,IAAI,kBAAkB,CAAC;AAAA,EAClE;AACF;",
+  "sourcesContent": ["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { VirtualList } from \"./VirtualList\";\nimport { action } from \"@storybook/addon-actions\";\nimport { expect, userEvent, waitFor, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof VirtualList> = {\n  component: VirtualList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/VirtualList\",\n  tags: [\"autodocs\"],\n  parameters: {\n    layout: \"fullscreen\",\n    docs: {\n      description: {\n        component:\n          \"A virtualized list component that renders only the visible items in a scrollable container using the `useVirtualizer` hook from `@tanstack/react-virtual`. It supports pagination and custom item rendering.\",\n      },\n    },\n  },\n  argTypes: {\n    count: {\n      description: \"Total number of items in the list.\",\n    },\n    itemHeight: {\n      description: \"Height of each item in the list.\",\n    },\n    overscan: {\n      description:\n        \"Number of extra items to render outside the visible viewport for smoother scrolling.\",\n      table: {\n        defaultValue: {\n          summary: \"5\",\n        },\n      },\n    },\n    LoadingComponent: {\n      description:\n        \"React component or node to display when the list is loading additional items. If not provided, a default loading spinner will be used.\",\n    },\n    isLoading: {\n      description: \"Indicates whether new items are currently being loaded.\",\n    },\n    hasNextPage: {\n      description:\n        \"Indicates if there are more items to load. If true, the list will trigger loading more items when scrolled to the end.\",\n      defaultValue: {\n        summary: \"false\",\n      },\n    },\n    threshold: {\n      description:\n        \"Number of items to check before the end of the list to trigger loading more items.\",\n      defaultValue: {\n        summary: \"5\",\n      },\n    },\n    onVisibleItemsScrollEnd: {\n      description:\n        \"Callback function to be called when the user scrolls to the end of the visible items. This can be used to load more items when the user reaches the end of the list.\",\n    },\n    renderItem: {\n      description:\n        \"Function to render each item in the list. Receives the index of the item as an argument and should return a React node.\",\n    },\n  },\n  args: {\n    itemHeight: 64,\n    count: 50,\n    LoadingComponent: undefined,\n    isLoading: false,\n    overscan: 5,\n    hasNextPage: false,\n    threshold: 5,\n    onVisibleItemsScrollEnd: () => {},\n    renderItem: (index: number) => <h1 tabIndex={index}>Item #{index}</h1>,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof VirtualList>;\n\nexport const Default: Story = {\n  args: {\n    count: 20,\n    itemHeight: 50,\n    overscan: 5,\n    renderItem: (index: number) => (\n      <div style={{ height: 50, backgroundColor: \"lightblue\", border: \"1px solid black\" }}>\n        Item {index}\n      </div>\n    ),\n  },\n};\n\nexport const WithPagination: Story = {\n  render: args => {\n    const [items, setItems] = useState(Array.from({ length: args.count }, (_, i) => i));\n    const [isFetching, setIsFetching] = useState(false);\n\n    const handleFetchNextPage = async () => {\n      action(\"fetchNextPage\")();\n      if (isFetching) return;\n      setIsFetching(true);\n      await new Promise(resolve => setTimeout(resolve, 1000));\n      setItems(prev => [...prev, ...Array.from({ length: 50 }, (_, i) => prev.length + i)]);\n      setIsFetching(false);\n    };\n\n    return (\n      <VirtualList\n        {...args}\n        count={items.length}\n        isLoading={isFetching}\n        onVisibleItemsScrollEnd={handleFetchNextPage}\n        hasNextPage={true}\n        renderItem={index => (\n          <div style={{ height: 50, backgroundColor: \"lightgreen\", border: \"1px solid black\" }}>\n            Item {items[index]}\n          </div>\n        )}\n      />\n    );\n  },\n  args: {\n    count: 50,\n    itemHeight: 50,\n    overscan: 5,\n    hasNextPage: true,\n    isLoading: false,\n  },\n};\n\nexport const TestVirtualList: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const visibleItems = canvas.getAllByText(/Item #/i);\n    const firstVisibleItem = visibleItems[0];\n    const lastVisibleItem = visibleItems[visibleItems.length - 1];\n\n    // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)\n    await expect(visibleItems.length).toBeLessThanOrEqual(12);\n\n    await expect(firstVisibleItem).toBeInTheDocument();\n\n    await userEvent.pointer([\n      { keys: \"[TouchA>]\", target: lastVisibleItem },\n      { target: firstVisibleItem },\n      { keys: \"[/TouchA]\" },\n    ]);\n\n    await waitFor(() => expect(firstVisibleItem).not.toBeInTheDocument());\n  },\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts

@@ -1,7 +1,53 @@
-import React, { ReactNode } from "react";
-export declare const VirtualList: ({ count, itemHeight, renderItem, }: {
+import React from "react";
+/**
+ * Props for the VirtualList component, which efficiently renders large lists
+ * by virtualizing DOM nodes to improve performance.
+ */
+type VirtualListProps = {
+    /**
+     * Total number of items in the list.
+     * This is used to calculate the total height of the list.
+     */
     count: number;
+    /**
+     * Height of each item in the list.
+     * This is used to calculate the total height of the list and the position of each item.
+     */
     itemHeight: number;
-    renderItem: (index: number) => ReactNode;
-}) => React.JSX.Element;
+    /**
+     * Number of extra items to render outside the visible viewport for smoother scrolling.
+     * Defaults to 5.
+     */
+    overscan?: number;
+    /**
+     * React component or node to display when the list is loading additional items.
+     * If not provided, a default loading spinner will be used.
+     */
+    LoadingComponent?: React.ReactNode;
+    /**
+     * Indicates whether new items are currently being loaded.
+     */
+    isLoading?: boolean;
+    /**
+     * Indicates if there are more items to load.
+     */
+    hasNextPage?: boolean;
+    /**
+     * Number of items to check before the end of the list to trigger loading more items.
+     * Defaults to 5.
+     */
+    threshold?: number;
+    /**
+     * Callback function to be called when the user scrolls to the end of the visible items.
+     * This can be used to load more items when the user reaches the end of the list.
+     */
+    onVisibleItemsScrollEnd?: () => void;
+    /**
+     * Function to render each item in the list.
+     * Receives the index of the item as an argument and should return a React node.
+     */
+    renderItem: (index: number) => React.ReactNode;
+};
+export declare const VirtualList: ({ count, itemHeight, overscan, LoadingComponent, isLoading, hasNextPage, threshold, onVisibleItemsScrollEnd, renderItem, }: VirtualListProps) => React.JSX.Element;
+export {};
 //# sourceMappingURL=VirtualList.d.ts.map

package/lib/pre-ldls/components/VirtualList/VirtualList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,eAAO,MAAM,WAAW;WAKf,MAAM;gBACD,MAAM;wBACE,MAAM,KAAK,SAAS;uBAiBzC,CAAC"}
+{"version":3,"file":"VirtualList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAYjD;;;GAGG;AACH,KAAK,gBAAgB,GAAG;IACtB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IACrC;;;OAGG;IACH,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;CAChD,CAAC;AAQF,eAAO,MAAM,WAAW,+HAUrB,gBAAgB,sBAyDlB,CAAC"}

package/lib/pre-ldls/components/VirtualList/VirtualList.js

@@ -1,7 +1,42 @@
-import React from "react";
-import { FixedSizeList as List } from "react-window";
-import AutoSizer from "react-virtualized-auto-sizer";
-export const VirtualList = ({ count, itemHeight, renderItem, }) => {
-    return (React.createElement(AutoSizer, { style: { height: "100%", width: "100%" } }, ({ height }) => (React.createElement(List, { height: height, itemCount: count, itemSize: itemHeight, layout: "vertical", width: "100%" }, ({ index, style }) => React.createElement("div", { style: style }, renderItem(index))))));
+import React, { useEffect, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Flex, InfiniteLoader } from "../../../components";
+const DefaultLoadingComponent = () => (React.createElement(Flex, { justifyContent: "center", alignItems: "center", height: "76px" },
+    React.createElement(InfiniteLoader, null)));
+export const VirtualList = ({ count, itemHeight, overscan = 5, LoadingComponent, isLoading, hasNextPage = false, threshold = 5, onVisibleItemsScrollEnd, renderItem, }) => {
+    const parentRef = useRef(null);
+    const rowVirtualizer = useVirtualizer({
+        count: hasNextPage ? count + 1 : count,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => itemHeight,
+        overscan,
+    });
+    useEffect(() => {
+        const items = rowVirtualizer.getVirtualItems();
+        if (!items.length)
+            return;
+        const lastItem = items[items.length - 1];
+        if (lastItem.index >= count - 1 - threshold &&
+            hasNextPage &&
+            !isLoading &&
+            onVisibleItemsScrollEnd) {
+            onVisibleItemsScrollEnd();
+        }
+    }, [hasNextPage, onVisibleItemsScrollEnd, count, isLoading, rowVirtualizer.getVirtualItems()]);
+    const showCustomLoadingComponent = !!LoadingComponent;
+    return (React.createElement("div", { ref: parentRef, style: { width: "100%", height: "100%", overflow: "auto" } },
+        React.createElement("div", { style: {
+                height: `${rowVirtualizer.getTotalSize()}px`,
+                width: "100%",
+                position: "relative",
+            } }, rowVirtualizer.getVirtualItems().map((virtualRow) => (React.createElement("div", { key: virtualRow.index, "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                transform: `translateY(${virtualRow.start}px)`,
+                height: `${itemHeight}px`,
+                width: "100%",
+            } }, renderItem(virtualRow.index))))),
+        isLoading && (showCustomLoadingComponent ? LoadingComponent : React.createElement(DefaultLoadingComponent, null))));
 };
 //# sourceMappingURL=VirtualList.js.map

package/lib/pre-ldls/components/VirtualList/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,aAAa,IAAI,IAAI,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,SAAS,MAAM,8BAA8B,CAAC;AAErD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,UAAU,GAKX,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,SAAS,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAChD,CAAC,EAAE,MAAM,EAAsB,EAAE,EAAE,CAAC,CACnC,oBAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,KAAK,EAChB,QAAQ,EAAE,UAAU,EACpB,MAAM,EAAC,UAAU,EACjB,KAAK,EAAC,MAAM,IAEX,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,6BAAK,KAAK,EAAE,KAAK,IAAG,UAAU,CAAC,KAAK,CAAC,CAAO,CAC9D,CACR,CACS,CACb,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"VirtualList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/VirtualList/VirtualList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA4D3D,MAAM,uBAAuB,GAAG,GAAG,EAAE,CAAC,CACpC,oBAAC,IAAI,IAAC,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM;IAC7D,oBAAC,cAAc,OAAG,CACb,CACR,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,KAAK,EACL,UAAU,EACV,QAAQ,GAAG,CAAC,EACZ,gBAAgB,EAChB,SAAS,EACT,WAAW,GAAG,KAAK,EACnB,SAAS,GAAG,CAAC,EACb,uBAAuB,EACvB,UAAU,GACO,EAAE,EAAE;IACrB,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE/C,MAAM,cAAc,GAAG,cAAc,CAAC;QACpC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK;QACtC,gBAAgB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,OAAO;QACzC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU;QAC9B,QAAQ;KACT,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,cAAc,CAAC,eAAe,EAAE,CAAC;QAC/C,IAAI,CAAC,KAAK,CAAC,MAAM;YAAE,OAAO;QAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEzC,IACE,QAAQ,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,GAAG,SAAS;YACvC,WAAW;YACX,CAAC,SAAS;YACV,uBAAuB,EACvB,CAAC;YACD,uBAAuB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,uBAAuB,EAAE,KAAK,EAAE,SAAS,EAAE,cAAc,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC;IAE/F,MAAM,0BAA0B,GAAG,CAAC,CAAC,gBAAgB,CAAC;IAEtD,OAAO,CACL,6BAAK,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE;QAC7E,6BACE,KAAK,EAAE;gBACL,MAAM,EAAE,GAAG,cAAc,CAAC,YAAY,EAAE,IAAI;gBAC5C,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,UAAU;aACrB,IAEA,cAAc,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,UAAuB,EAAE,EAAE,CAAC,CACjE,6BACE,GAAG,EAAE,UAAU,CAAC,KAAK,gBACT,UAAU,CAAC,KAAK,EAC5B,GAAG,EAAE,cAAc,CAAC,cAAc,EAClC,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,CAAC;gBACN,IAAI,EAAE,CAAC;gBACP,SAAS,EAAE,cAAc,UAAU,CAAC,KAAK,KAAK;gBAC9C,MAAM,EAAE,GAAG,UAAU,IAAI;gBACzB,KAAK,EAAE,MAAM;aACd,IAEA,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CACzB,CACP,CAAC,CACE;QACL,SAAS,IAAI,CAAC,0BAA0B,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,oBAAC,uBAAuB,OAAG,CAAC,CACvF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.24.0-nightly.2",
+  "version": "0.24.0-nightly.3",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -61,6 +61,7 @@
   ],
   "dependencies": {
     "@floating-ui/react-dom": "^0.4.0",
+    "@tanstack/react-virtual": "3.13.6",
     "@tippyjs/react": "^4.2.6",
     "color": "^4.0.0",
     "embla-carousel-autoplay": "8.4.0",
@@ -71,7 +72,6 @@
     "react-select": "^5.2.1",
     "react-spring": "8.0.27",
     "react-transition-group": "^4.4.2",
-    "react-virtualized-auto-sizer": "1.0.24",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
     "@ledgerhq/crypto-icons-ui": "^1.13.0-nightly.0",