@ledgerhq/react-ui 0.24.0-next.0 → 0.24.0-nightly.3

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

@@ -0,0 +1,90 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NetworkItem_exports = {};
+__export(NetworkItem_exports, {
+  NetworkItem: () => NetworkItem
+});
+module.exports = __toCommonJS(NetworkItem_exports);
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_libs = require("../../libs");
+var import_components = require("../../../components");
+const TempAssetBadge = () => (
+  // TODO: To be replaced with LIVE-18221
+  /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react.default.createElement(
+    "span",
+    {
+      style: {
+        height: 48,
+        width: 48,
+        borderRadius: 48,
+        backgroundColor: "grey",
+        display: "inline-block"
+      }
+    }
+  ))
+);
+const Wrapper = import_styled_components.default.div`
+  ${(0, import_libs.withTokens)(
+  "spacing-xs",
+  "marging-s",
+  "colors-content-default-default",
+  "colors-surface-transparent-hover",
+  "colors-surface-transparent-pressed"
+)}
+  display: flex;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+const InfoWrapper = import_styled_components.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: var(--marging-s);
+`;
+const NetworkItem = ({ name, onClick }) => {
+  return /* @__PURE__ */ import_react.default.createElement(Wrapper, { onClick }, /* @__PURE__ */ import_react.default.createElement(TempAssetBadge, null), /* @__PURE__ */ import_react.default.createElement(InfoWrapper, null, /* @__PURE__ */ import_react.default.createElement(
+    import_components.Text,
+    {
+      variant: "largeLineHeight",
+      fontWeight: "semiBold",
+      color: "var(--colors-content-default-default)"
+    },
+    name
+  )));
+};
+//# sourceMappingURL=NetworkItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport styled from \"styled-components\";\nimport { withTokens } from \"../../libs\";\nimport { Text } from \"../../../components\";\n\ntype NetworkItemProps = {\n  name: string;\n  onClick: () => void;\n};\n\nconst TempAssetBadge = () => (\n  // TODO: To be replaced with LIVE-18221\n  <div style={{ display: \"flex\", alignItems: \"center\" }}>\n    <span\n      style={{\n        height: 48,\n        width: 48,\n        borderRadius: 48,\n        backgroundColor: \"grey\",\n        display: \"inline-block\",\n      }}\n    />\n  </div>\n);\n\nconst Wrapper = styled.div`\n  ${withTokens(\n    \"spacing-xs\",\n    \"marging-s\",\n    \"colors-content-default-default\",\n    \"colors-surface-transparent-hover\",\n    \"colors-surface-transparent-pressed\",\n  )}\n  display: flex;\n  padding: var(--spacing-xs);\n  cursor: pointer;\n\n  :hover {\n    background-color: var(--colors-surface-transparent-hover);\n  }\n\n  :active {\n    background-color: var(--colors-surface-transparent-pressed);\n  }\n`;\n\nconst InfoWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: var(--marging-s);\n`;\n\nexport const NetworkItem = ({ name, onClick }: NetworkItemProps) => {\n  return (\n    <Wrapper onClick={onClick}>\n      <TempAssetBadge />\n      <InfoWrapper>\n        <Text\n          variant=\"largeLineHeight\"\n          fontWeight=\"semiBold\"\n          color=\"var(--colors-content-default-default)\"\n        >\n          {name}\n        </Text>\n      </InfoWrapper>\n    </Wrapper>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,+BAAmB;AACnB,kBAA2B;AAC3B,wBAAqB;AAOrB,MAAM,iBAAiB;AAAA;AAAA,EAErB,6BAAAA,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,KAClD,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX;AAAA;AAAA,EACF,CACF;AAAA;AAGF,MAAM,UAAU,yBAAAC,QAAO;AAAA,QACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcH,MAAM,cAAc,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOpB,MAAM,cAAc,CAAC,EAAE,MAAM,QAAQ,MAAwB;AAClE,SACE,6BAAAD,QAAA,cAAC,WAAQ,WACP,6BAAAA,QAAA,cAAC,oBAAe,GAChB,6BAAAA,QAAA,cAAC,mBACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,OAAM;AAAA;AAAA,IAEL;AAAA,EACH,CACF,CACF;AAEJ;",
+  "names": ["React", "styled"]
+}

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

@@ -0,0 +1,43 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NetworkItem_stories_exports = {};
+__export(NetworkItem_stories_exports, {
+  Default: () => Default,
+  TestNetworkItem: () => TestNetworkItem,
+  default: () => NetworkItem_stories_default
+});
+module.exports = __toCommonJS(NetworkItem_stories_exports);
+var import_NetworkItem = require("./NetworkItem");
+var import_test = require("@storybook/test");
+const meta = {
+  component: import_NetworkItem.NetworkItem,
+  title: "PreLdls/Components/NetworkItem",
+  tags: ["autodocs"],
+  args: { name: "Bitcoin" }
+};
+var NetworkItem_stories_default = meta;
+const Default = {};
+const TestNetworkItem = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const name = canvas.getByText("Bitcoin");
+    await (0, import_test.expect)(name).toBeInTheDocument();
+  }
+};
+//# sourceMappingURL=NetworkItem.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/NetworkItem/NetworkItem.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkItem } from \"./NetworkItem\";\nimport { expect, within } from \"@storybook/test\";\n\nconst meta: Meta<typeof NetworkItem> = {\n  component: NetworkItem,\n  title: \"PreLdls/Components/NetworkItem\",\n  tags: [\"autodocs\"],\n  args: { name: \"Bitcoin\" },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkItem>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkItem: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n\n    const name = canvas.getByText(\"Bitcoin\");\n\n    await expect(name).toBeInTheDocument();\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAA4B;AAC5B,kBAA+B;AAE/B,MAAM,OAAiC;AAAA,EACrC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,EAAE,MAAM,UAAU;AAC1B;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,kBAAyB;AAAA,EACpC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AAEnC,UAAM,OAAO,OAAO,UAAU,SAAS;AAEvC,cAAM,oBAAO,IAAI,EAAE,kBAAkB;AAAA,EACvC;AACF;",
+  "names": []
+}

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

@@ -0,0 +1,50 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NetworkList_exports = {};
+__export(NetworkList_exports, {
+  NetworkList: () => NetworkList
+});
+module.exports = __toCommonJS(NetworkList_exports);
+var import_react = __toESM(require("react"));
+var import_NetworkItem = require("../NetworkItem/NetworkItem");
+var import_VirtualList = require("../VirtualList/VirtualList");
+const NetworkList = ({
+  networks,
+  onClick
+}) => {
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_VirtualList.VirtualList,
+    {
+      itemHeight: 64,
+      count: networks.length,
+      renderItem: (i) => /* @__PURE__ */ import_react.default.createElement(import_NetworkItem.NetworkItem, { name: networks[i].name, onClick: () => onClick(networks[i].id) })
+    }
+  );
+};
+//# sourceMappingURL=NetworkList.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport { NetworkItem } from \"../NetworkItem/NetworkItem\";\nimport { VirtualList } from \"../VirtualList/VirtualList\";\n\nexport const NetworkList = ({\n  networks,\n  onClick,\n}: {\n  networks: { name: string; id: string }[];\n  onClick: (networkId: string) => void;\n}) => {\n  return (\n    <VirtualList\n      itemHeight={64}\n      count={networks.length}\n      renderItem={(i: number) => (\n        <NetworkItem name={networks[i].name} onClick={() => onClick(networks[i].id)} />\n      )}\n    />\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAA4B;AAC5B,yBAA4B;AAErB,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AACF,MAGM;AACJ,SACE,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,YAAY;AAAA,MACZ,OAAO,SAAS;AAAA,MAChB,YAAY,CAAC,MACX,6BAAAA,QAAA,cAAC,kCAAY,MAAM,SAAS,CAAC,EAAE,MAAM,SAAS,MAAM,QAAQ,SAAS,CAAC,EAAE,EAAE,GAAG;AAAA;AAAA,EAEjF;AAEJ;",
+  "names": ["React"]
+}

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

@@ -0,0 +1,62 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var NetworkList_stories_exports = {};
+__export(NetworkList_stories_exports, {
+  Default: () => Default,
+  TestNetworkClick: () => TestNetworkClick,
+  default: () => NetworkList_stories_default
+});
+module.exports = __toCommonJS(NetworkList_stories_exports);
+var import_react = __toESM(require("react"));
+var import_NetworkList = require("./NetworkList");
+var import_test = require("@storybook/test");
+const testFn = (0, import_test.fn)();
+const meta = {
+  component: import_NetworkList.NetworkList,
+  decorators: [
+    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "400px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
+  ],
+  title: "PreLdls/Components/NetworkList",
+  tags: ["autodocs"],
+  args: {
+    networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),
+    onClick: testFn
+  }
+};
+var NetworkList_stories_default = meta;
+const Default = {};
+const TestNetworkClick = {
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const input = canvas.getByText("Bitcoin 1");
+    await import_test.userEvent.click(input);
+    await (0, import_test.expect)(testFn).toHaveBeenCalledWith("btc1");
+  }
+};
+//# sourceMappingURL=NetworkList.stories.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/pre-ldls/components/NetworkList/NetworkList.stories.tsx"],
+  "sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { NetworkList } from \"./NetworkList\";\nimport { expect, fn, userEvent, within } from \"@storybook/test\";\n\nconst testFn = fn();\n\nconst meta: Meta<typeof NetworkList> = {\n  component: NetworkList,\n  decorators: [\n    Story => (\n      <div style={{ height: \"400px\" }}>\n        <Story />\n      </div>\n    ),\n  ],\n  title: \"PreLdls/Components/NetworkList\",\n  tags: [\"autodocs\"],\n  args: {\n    networks: Array.from({ length: 50 }, (_, i) => ({ name: `Bitcoin ${i}`, id: `btc${i}` })),\n    onClick: testFn,\n  },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NetworkList>;\n\nexport const Default: Story = {};\n\nexport const TestNetworkClick: Story = {\n  play: async ({ canvasElement }) => {\n    const canvas = within(canvasElement);\n    const input = canvas.getByText(\"Bitcoin 1\");\n    await userEvent.click(input);\n    await expect(testFn).toHaveBeenCalledWith(\"btc1\");\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,yBAA4B;AAC5B,kBAA8C;AAE9C,MAAM,aAAS,gBAAG;AAElB,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,UAAU,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE,MAAM,WAAW,CAAC,IAAI,IAAI,MAAM,CAAC,GAAG,EAAE;AAAA,IACxF,SAAS;AAAA,EACX;AACF;AACA,IAAO,8BAAQ;AAIR,MAAM,UAAiB,CAAC;AAExB,MAAM,mBAA0B;AAAA,EACrC,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,WAAW;AAC1C,UAAM,sBAAU,MAAM,KAAK;AAC3B,cAAM,oBAAO,MAAM,EAAE,qBAAqB,MAAM;AAAA,EAClD;AACF;",
+  "names": ["React"]
+}

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/cjs/pre-ldls/components/index.js

@@ -18,6 +18,8 @@ module.exports = __toCommonJS(components_exports);
 __reExport(components_exports, require("./AssetItem/AssetItem"), module.exports);
 __reExport(components_exports, require("./AssetList/AssetList"), module.exports);
 __reExport(components_exports, require("./Input/Input"), module.exports);
+__reExport(components_exports, require("./NetworkItem/NetworkItem"), module.exports);
+__reExport(components_exports, require("./NetworkList/NetworkList"), module.exports);
 __reExport(components_exports, require("./Search/Search"), module.exports);
 __reExport(components_exports, require("./VirtualList/VirtualList"), module.exports);
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/pre-ldls/components/index.ts"],
-  "sourcesContent": ["export * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./Input/Input\";\nexport * from \"./Search/Search\";\nexport * from \"./VirtualList/VirtualList\";\n"],
-  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,kCAAd;AACA,+BAAc,kCADd;AAEA,+BAAc,0BAFd;AAGA,+BAAc,4BAHd;AAIA,+BAAc,sCAJd;",
+  "sourcesContent": ["export * from \"./AssetItem/AssetItem\";\nexport * from \"./AssetList/AssetList\";\nexport * from \"./Input/Input\";\nexport * from \"./NetworkItem/NetworkItem\";\nexport * from \"./NetworkList/NetworkList\";\nexport * from \"./Search/Search\";\nexport * from \"./VirtualList/VirtualList\";\n"],
+  "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,kCAAd;AACA,+BAAc,kCADd;AAEA,+BAAc,0BAFd;AAGA,+BAAc,sCAHd;AAIA,+BAAc,sCAJd;AAKA,+BAAc,4BALd;AAMA,+BAAc,sCANd;",
   "names": []
 }

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

@@ -0,0 +1,8 @@
+import React from "react";
+type NetworkItemProps = {
+    name: string;
+    onClick: () => void;
+};
+export declare const NetworkItem: ({ name, onClick }: NetworkItemProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=NetworkItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkItem.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA6CF,eAAO,MAAM,WAAW,sBAAuB,gBAAgB,sBAe9D,CAAC"}

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

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { withTokens } from "../../libs";
+import { Text } from "../../../components";
+const TempAssetBadge = () => (
+// TODO: To be replaced with LIVE-18221
+React.createElement("div", { style: { display: "flex", alignItems: "center" } },
+    React.createElement("span", { style: {
+            height: 48,
+            width: 48,
+            borderRadius: 48,
+            backgroundColor: "grey",
+            display: "inline-block",
+        } })));
+const Wrapper = styled.div `
+  ${withTokens("spacing-xs", "marging-s", "colors-content-default-default", "colors-surface-transparent-hover", "colors-surface-transparent-pressed")}
+  display: flex;
+  padding: var(--spacing-xs);
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--colors-surface-transparent-hover);
+  }
+
+  :active {
+    background-color: var(--colors-surface-transparent-pressed);
+  }
+`;
+const InfoWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-left: var(--marging-s);
+`;
+export const NetworkItem = ({ name, onClick }) => {
+    return (React.createElement(Wrapper, { onClick: onClick },
+        React.createElement(TempAssetBadge, null),
+        React.createElement(InfoWrapper, null,
+            React.createElement(Text, { variant: "largeLineHeight", fontWeight: "semiBold", color: "var(--colors-content-default-default)" }, name))));
+};
+//# sourceMappingURL=NetworkItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkItem.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkItem/NetworkItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;AAO3C,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC;AAC3B,uCAAuC;AACvC,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE;IACnD,8BACE,KAAK,EAAE;YACL,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,YAAY,EAAE,EAAE;YAChB,eAAe,EAAE,MAAM;YACvB,OAAO,EAAE,cAAc;SACxB,GACD,CACE,CACP,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,UAAU,CACV,YAAY,EACZ,WAAW,EACX,gCAAgC,EAChC,kCAAkC,EAClC,oCAAoC,CACrC;;;;;;;;;;;;CAYF,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK7B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE;IACjE,OAAO,CACL,oBAAC,OAAO,IAAC,OAAO,EAAE,OAAO;QACvB,oBAAC,cAAc,OAAG;QAClB,oBAAC,WAAW;YACV,oBAAC,IAAI,IACH,OAAO,EAAC,iBAAiB,EACzB,UAAU,EAAC,UAAU,EACrB,KAAK,EAAC,uCAAuC,IAE5C,IAAI,CACA,CACK,CACN,CACX,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,9 @@
+import React from "react";
+export declare const NetworkList: ({ networks, onClick, }: {
+    networks: {
+        name: string;
+        id: string;
+    }[];
+    onClick: (networkId: string) => void;
+}) => React.JSX.Element;
+//# sourceMappingURL=NetworkList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkList.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,WAAW;cAIZ;QAAE,MAAM,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE;yBACnB,MAAM,KAAK,IAAI;uBAWrC,CAAC"}

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { NetworkItem } from "../NetworkItem/NetworkItem";
+import { VirtualList } from "../VirtualList/VirtualList";
+export const NetworkList = ({ networks, onClick, }) => {
+    return (React.createElement(VirtualList, { itemHeight: 64, count: networks.length, renderItem: (i) => (React.createElement(NetworkItem, { name: networks[i].name, onClick: () => onClick(networks[i].id) })) }));
+};
+//# sourceMappingURL=NetworkList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NetworkList.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/NetworkList/NetworkList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAEzD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,GAIR,EAAE,EAAE;IACH,OAAO,CACL,oBAAC,WAAW,IACV,UAAU,EAAE,EAAE,EACd,KAAK,EAAE,QAAQ,CAAC,MAAM,EACtB,UAAU,EAAE,CAAC,CAAS,EAAE,EAAE,CAAC,CACzB,oBAAC,WAAW,IAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,GAAI,CAChF,GACD,CACH,CAAC;AACJ,CAAC,CAAC"}

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/lib/pre-ldls/components/index.d.ts

@@ -1,6 +1,8 @@
 export * from "./AssetItem/AssetItem";
 export * from "./AssetList/AssetList";
 export * from "./Input/Input";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetworkList/NetworkList";
 export * from "./Search/Search";
 export * from "./VirtualList/VirtualList";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

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

@@ -1,6 +1,8 @@
 export * from "./AssetItem/AssetItem";
 export * from "./AssetList/AssetList";
 export * from "./Input/Input";
+export * from "./NetworkItem/NetworkItem";
+export * from "./NetworkList/NetworkList";
 export * from "./Search/Search";
 export * from "./VirtualList/VirtualList";
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.24.0-next.0",
+  "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,11 +72,10 @@
     "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-next.0",
-    "@ledgerhq/icons-ui": "^0.10.0-next.0",
+    "@ledgerhq/crypto-icons-ui": "^1.13.0-nightly.0",
+    "@ledgerhq/icons-ui": "^0.10.0-nightly.0",
     "@ledgerhq/ui-shared": "^0.3.0"
   },
   "peerDependencies": {