@ledgerhq/react-ui 0.45.0 → 0.46.0-nightly.20260214030108

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

@@ -1,185 +1,594 @@
+(() => {
 "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 VirtualList_stories_exports = {};
-__export(VirtualList_stories_exports, {
-  Default: () => Default,
-  TestVirtualList: () => TestVirtualList,
-  WithCustomLastRow: () => WithCustomLastRow,
-  WithPagination: () => WithPagination,
-  default: () => VirtualList_stories_default
+var __webpack_modules__ = ({
+3696(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
 });
-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 items = Array.from({ length: 50 }, (_, i) => ({ i }));
-const meta = {
-  component: import_VirtualList.VirtualList,
-  decorators: [
-    (Story) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: "400px" } }, /* @__PURE__ */ import_react.default.createElement(Story, null))
-  ],
-  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."
-      }
+/* import */ var _styled__rspack_import_0 = __webpack_require__(7680);
+
+const FlexBox = _styled__rspack_import_0["default"].div.attrs({
+    display: "flex"
+})``;
+/* export default */ const __rspack_default_export = (FlexBox);
+
+
+},
+1422(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (InfiniteLoader)
+});
+/* import */ var react__rspack_import_0 = __webpack_require__(2015);
+/* import */ var react__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(react__rspack_import_0);
+/* import */ var styled_components__rspack_import_1 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_1);
+/* import */ var styled_system__rspack_import_2 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_2_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_2);
+
+
+
+const rotate = (0,styled_components__rspack_import_1.keyframes)`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+const Loader = (styled_components__rspack_import_1_default().svg)`
+  animation: ${rotate} 1s linear infinite;
+  ${styled_system__rspack_import_2.size}
+  ${(0,styled_system__rspack_import_2.system)({
+    stroke: {
+        property: "stroke",
+        scale: "colors"
     }
-  },
-  argTypes: {
-    gap: { description: "Gap between items in the list.", defaultValue: { summary: 0 } },
-    itemHeight: {
-      description: "Height of each item in the list."
+})}
+`;
+function InfiniteLoader({ size = 38, color = "primary.c50", ...extraProps }) {
+    return /*#__PURE__*/ react__rspack_import_0_default().createElement(Loader, {
+        size: size,
+        stroke: color,
+        viewBox: "0 0 38 38",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        ...extraProps
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("linearGradient", {
+        id: "gradient-start",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "rotate(-20)"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "0",
+        stopColor: "white",
+        stopOpacity: "0.5"
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "1",
+        stopColor: "white",
+        stopOpacity: "1"
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement("linearGradient", {
+        id: "gradient-end",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "rotate(-20)"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "0",
+        stopColor: "white",
+        stopOpacity: "0.5"
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement("stop", {
+        offset: "1",
+        stopColor: "white",
+        stopOpacity: "0"
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement("mask", {
+        id: "gradient-mask",
+        maskUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ react__rspack_import_0_default().createElement("rect", {
+        x: "-0",
+        y: "-4",
+        width: "44",
+        height: "22",
+        strokeWidth: "0",
+        fill: "url(#gradient-start)",
+        transform: "rotate(10)"
+    }), /*#__PURE__*/ react__rspack_import_0_default().createElement("rect", {
+        x: "0",
+        y: "18",
+        width: "44",
+        height: "21",
+        strokeWidth: "0",
+        fill: "url(#gradient-end)",
+        transform: "rotate(10)"
+    })), /*#__PURE__*/ react__rspack_import_0_default().createElement("path", {
+        d: "M34.8807 20.9499C35.3608 17.0398 34.3815 13.09 32.1304 9.85712C29.8793 6.6242 26.5146 4.33541 22.6808 3.42914C18.847 2.52287 14.8136 3.06283 11.3532 4.94559C7.89277 6.82836 5.24858 9.92158 3.92708 13.6328C2.60558 17.344 2.69968 21.4123 4.19135 25.0584C5.68302 28.7045 8.4674 31.6722 12.0112 33.3929C15.5549 35.1137 19.609 35.4666 23.3968 34.384C27.1846 33.3015 30.4398 30.8596 32.5391 27.526",
+        strokeWidth: "6",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        mask: "url(#gradient-mask)"
+    }));
+}
+
+
+},
+7680(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var _styles_system_gaps__rspack_import_2 = __webpack_require__(4182);
+/* import */ var styled_components__rspack_import_0 = __webpack_require__(2770);
+/* import */ var styled_components__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_components__rspack_import_0);
+/* import */ var styled_system__rspack_import_1 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_1_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_1);
+
+
+
+const baseStyles = (0,styled_system__rspack_import_1.compose)(styled_system__rspack_import_1.flexbox, styled_system__rspack_import_1.space, styled_system__rspack_import_1.position, styled_system__rspack_import_1.color, styled_system__rspack_import_1.layout, styled_system__rspack_import_1.overflow, _styles_system_gaps__rspack_import_2["default"], styled_system__rspack_import_1.border);
+const proxyStyled = new Proxy((styled_components__rspack_import_0_default()), {
+    apply (target, thisArg, argumentsList) {
+        return styled_components__rspack_import_0_default()(target.apply(thisArg, argumentsList)(baseStyles));
     },
-    overscan: {
-      description: "Number of extra items to render outside the visible viewport for smoother scrolling.",
-      table: {
-        defaultValue: {
-          summary: "5"
+    get (target, property) {
+        if (typeof target[property] === "function") {
+            return styled_components__rspack_import_0_default()(target[property].apply((styled_components__rspack_import_0_default()), [
+                baseStyles
+            ]));
         }
-      }
-    },
-    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"
-      }
+        return target[property];
+    }
+});
+/* export default */ const __rspack_default_export = (proxyStyled);
+
+
+},
+1878(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  VirtualList: () => (/* binding */ VirtualList)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+;// CONCATENATED MODULE: external "@tanstack/react-virtual"
+const react_virtual_namespaceObject = require("@tanstack/react-virtual");
+// EXTERNAL MODULE: ./src/components/layout/Flex/index.ts
+var Flex = __webpack_require__(3696);
+// EXTERNAL MODULE: ./src/components/loaders/InfiniteLoader/index.tsx
+var InfiniteLoader = __webpack_require__(1422);
+;// CONCATENATED MODULE: ./src/pre-ldls/components/VirtualList/VirtualList.tsx
+
+
+
+const DefaultLoadingComponent = ()=>/*#__PURE__*/ external_react_default().createElement(Flex["default"], {
+        justifyContent: "center",
+        alignItems: "center",
+        height: "76px"
+    }, /*#__PURE__*/ external_react_default().createElement(InfiniteLoader["default"], null));
+function easeInOutCubic(t) {
+    return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+}
+const VirtualList = ({ gap, hasNextPage = false, isLoading, itemHeight, items, LoadingComponent, onVisibleItemsScrollEnd, overscan = 5, renderItem, scrollToTop = false, bottomComponent, threshold = 5 })=>{
+    const parentRef = (0,external_react_.useRef)(null);
+    const scrollToFn = (0,external_react_.useCallback)((offset, options, instance)=>{
+        const element = instance.scrollElement;
+        if (!element) return;
+        const duration = options.behavior === "smooth" ? 100 : 0;
+        if (duration === 0) {
+            element.scrollTop = offset;
+            return;
+        }
+        const startTime = performance.now();
+        const startTop = element.scrollTop;
+        const distanceToScroll = offset - startTop;
+        const scrollStep = (currentTime)=>{
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / duration, 1);
+            const easedProgress = easeInOutCubic(progress);
+            element.scrollTop = startTop + distanceToScroll * easedProgress;
+            if (progress < 1) {
+                requestAnimationFrame(scrollStep);
+            }
+        };
+        requestAnimationFrame(scrollStep);
+    }, []);
+    const rowVirtualizer = (0,react_virtual_namespaceObject.useVirtualizer)({
+        gap,
+        count: hasNextPage ? items.length + 1 : items.length,
+        overscan,
+        getScrollElement: ()=>parentRef.current,
+        estimateSize: ()=>itemHeight,
+        scrollToFn
+    });
+    (0,external_react_.useEffect)(()=>{
+        if (scrollToTop && parentRef.current) {
+            scrollToFn(0, {
+                behavior: "smooth"
+            }, {
+                scrollElement: parentRef.current
+            });
+        }
+    }, [
+        scrollToTop,
+        scrollToFn
+    ]);
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    (0,external_react_.useEffect)(()=>{
+        if (!virtualItems.length) return;
+        const lastItem = virtualItems[virtualItems.length - 1];
+        if (lastItem.index >= items.length - 1 - threshold && hasNextPage && !isLoading && onVisibleItemsScrollEnd) {
+            onVisibleItemsScrollEnd();
+        }
+    }, [
+        hasNextPage,
+        onVisibleItemsScrollEnd,
+        items.length,
+        isLoading,
+        threshold,
+        virtualItems
+    ]);
+    const showCustomLoadingComponent = !!LoadingComponent;
+    const Loading = (0,external_react_.useCallback)(()=>showCustomLoadingComponent ? LoadingComponent : /*#__PURE__*/ external_react_default().createElement(DefaultLoadingComponent, null), [
+        showCustomLoadingComponent,
+        LoadingComponent
+    ]);
+    return /*#__PURE__*/ external_react_default().createElement("div", {
+        ref: parentRef,
+        style: {
+            width: "100%",
+            height: "100%",
+            overflow: "auto",
+            scrollbarWidth: "none"
+        }
+    }, /*#__PURE__*/ external_react_default().createElement("div", {
+        style: {
+            height: `${rowVirtualizer.getTotalSize()}px`,
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            position: "relative"
+        }
+    }, rowVirtualizer.getVirtualItems().map((virtualRow)=>{
+        const item = items[virtualRow.index];
+        return /*#__PURE__*/ external_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%"
+            }
+        }, item ? renderItem(item) : /*#__PURE__*/ external_react_default().createElement(Loading, null));
+    }), bottomComponent && /*#__PURE__*/ external_react_default().createElement("div", {
+        style: {
+            position: "absolute",
+            top: `${rowVirtualizer.getTotalSize()}px`,
+            left: 0,
+            width: "100%"
+        }
+    }, bottomComponent)), isLoading && /*#__PURE__*/ external_react_default().createElement(Loading, null));
+};
+
+
+},
+4182(__unused_rspack_module, __webpack_exports__, __webpack_require__) {
+__webpack_require__.d(__webpack_exports__, {
+  "default": () => (__rspack_default_export)
+});
+/* import */ var styled_system__rspack_import_0 = __webpack_require__(9351);
+/* import */ var styled_system__rspack_import_0_default = /*#__PURE__*/__webpack_require__.n(styled_system__rspack_import_0);
+
+const gaps = (0,styled_system__rspack_import_0.system)({
+    rowGap: {
+        property: "rowGap",
+        scale: "space"
     },
-    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."
+    columnGap: {
+        property: "columnGap",
+        scale: "space"
+    }
+});
+/* export default */ const __rspack_default_export = (gaps);
+
+
+},
+2015(module) {
+module.exports = require("react");
+
+},
+2770(module) {
+module.exports = require("styled-components");
+
+},
+9351(module) {
+module.exports = require("styled-system");
+
+},
+
+});
+// The module cache
+var __webpack_module_cache__ = {};
+
+// The require function
+function __webpack_require__(moduleId) {
+
+// Check if module is in cache
+var cachedModule = __webpack_module_cache__[moduleId];
+if (cachedModule !== undefined) {
+return cachedModule.exports;
+}
+// Create a new module (and put it into the cache)
+var module = (__webpack_module_cache__[moduleId] = {
+exports: {}
+});
+// Execute the module function
+__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+
+// Return the exports of the module
+return module.exports;
+
+}
+
+// webpack/runtime/compat_get_default_export
+(() => {
+// getDefaultExport function for compatibility with non-ESM modules
+__webpack_require__.n = (module) => {
+	var getter = module && module.__esModule ?
+		() => (module['default']) :
+		() => (module);
+	__webpack_require__.d(getter, { a: getter });
+	return getter;
+};
+
+})();
+// webpack/runtime/define_property_getters
+(() => {
+__webpack_require__.d = (exports, definition) => {
+	for(var key in definition) {
+        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+        }
+    }
+};
+})();
+// webpack/runtime/has_own_property
+(() => {
+__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+})();
+// webpack/runtime/make_namespace_object
+(() => {
+// define __esModule on exports
+__webpack_require__.r = (exports) => {
+	if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+		Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+	}
+	Object.defineProperty(exports, '__esModule', { value: true });
+};
+})();
+var __webpack_exports__ = {};
+// This entry needs to be wrapped in an IIFE because it needs to be isolated against other modules in the chunk.
+(() => {
+// ESM COMPAT FLAG
+__webpack_require__.r(__webpack_exports__);
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  WithCustomLastRow: () => (/* binding */ WithCustomLastRow),
+  TestVirtualList: () => (/* binding */ TestVirtualList),
+  "default": () => (/* binding */ VirtualList_stories),
+  Default: () => (/* binding */ Default),
+  WithPagination: () => (/* binding */ WithPagination)
+});
+
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(2015);
+var external_react_default = /*#__PURE__*/__webpack_require__.n(external_react_);
+// EXTERNAL MODULE: ./src/pre-ldls/components/VirtualList/VirtualList.tsx + 1 modules
+var VirtualList = __webpack_require__(1878);
+;// CONCATENATED MODULE: external "@storybook/test"
+const test_namespaceObject = require("@storybook/test");
+;// CONCATENATED MODULE: ./src/pre-ldls/components/VirtualList/VirtualList.stories.tsx
+
+
+
+const VirtualList_stories_items = Array.from({
+    length: 50
+}, (_, i)=>({
+        i
+    }));
+const meta = {
+    component: VirtualList.VirtualList,
+    decorators: [
+        (Story)=>/*#__PURE__*/ external_react_default().createElement("div", {
+                style: {
+                    height: "400px"
+                }
+            }, /*#__PURE__*/ external_react_default().createElement(Story, null))
+    ],
+    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."
+            }
+        }
     },
-    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."
+    argTypes: {
+        gap: {
+            description: "Gap between items in the list.",
+            defaultValue: {
+                summary: 0
+            }
+        },
+        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."
+        },
+        scrollToTop: {
+            description: "When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position."
+        }
     },
-    scrollToTop: {
-      description: "When set to true, the list will scroll to the top. This is useful when the items change and you want to reset the scroll position."
+    args: {
+        gap: 0,
+        itemHeight: 64,
+        LoadingComponent: undefined,
+        isLoading: false,
+        overscan: 5,
+        hasNextPage: false,
+        threshold: 5,
+        onVisibleItemsScrollEnd: ()=>{},
+        items: VirtualList_stories_items,
+        renderItem: ({ i })=>/*#__PURE__*/ external_react_default().createElement("h1", {
+                tabIndex: i
+            }, "Item #", i),
+        scrollToTop: false
     }
-  },
-  args: {
-    gap: 0,
-    itemHeight: 64,
-    LoadingComponent: void 0,
-    isLoading: false,
-    overscan: 5,
-    hasNextPage: false,
-    threshold: 5,
-    onVisibleItemsScrollEnd: () => {
-    },
-    items,
-    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("h1", { tabIndex: i }, "Item #", i),
-    scrollToTop: false
-  }
 };
-var VirtualList_stories_default = meta;
+/* export default */ const VirtualList_stories = (meta);
 const Default = {
-  args: {
-    itemHeight: 50,
-    overscan: 5,
-    items,
-    renderItem: ({ i }) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightblue", border: "1px solid black" } }, "Item ", i)
-  }
+    args: {
+        itemHeight: 50,
+        overscan: 5,
+        items: VirtualList_stories_items,
+        renderItem: ({ i })=>/*#__PURE__*/ external_react_default().createElement("div", {
+                style: {
+                    height: 50,
+                    backgroundColor: "lightblue",
+                    border: "1px solid black"
+                }
+            }, "Item ", i)
+    }
 };
 const WithCustomLastRow = {
-  render: (args) => {
-    const items2 = Array.from({ length: 5 }, (_, i) => i + 1);
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_VirtualList.VirtualList,
-      {
-        ...args,
-        items: items2,
-        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item),
-        bottomComponent: /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightcoral" } }, "End of List")
-      }
-    );
-  }
+    render: (args)=>{
+        const items = Array.from({
+            length: 5
+        }, (_, i)=>i + 1);
+        return /*#__PURE__*/ external_react_default().createElement(VirtualList.VirtualList, {
+            ...args,
+            items: items,
+            renderItem: (item)=>/*#__PURE__*/ external_react_default().createElement("div", {
+                    style: {
+                        height: 50,
+                        backgroundColor: "lightgreen",
+                        border: "1px solid black"
+                    }
+                }, "Item ", item),
+            bottomComponent: /*#__PURE__*/ external_react_default().createElement("div", {
+                style: {
+                    height: 50,
+                    backgroundColor: "lightcoral"
+                }
+            }, "End of List")
+        });
+    }
 };
 const WithPagination = {
-  render: (args) => {
-    const [items2, setItems] = (0, import_react.useState)(Array.from({ length: 50 }, (_, 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,
-        isLoading: isFetching,
-        onVisibleItemsScrollEnd: handleFetchNextPage,
+    render: (args)=>{
+        const [items, setItems] = (0,external_react_.useState)(Array.from({
+            length: 50
+        }, (_, i)=>i));
+        const [isFetching, setIsFetching] = (0,external_react_.useState)(false);
+        const handleFetchNextPage = async ()=>{
+            const logFetchNextPage = ()=>{};
+            logFetchNextPage();
+            if (isFetching) return;
+            setIsFetching(true);
+            await new Promise((resolve)=>setTimeout(resolve, 1000));
+            setItems((prev)=>[
+                    ...prev,
+                    ...Array.from({
+                        length: 50
+                    }, (_, i)=>prev.length + i)
+                ]);
+            setIsFetching(false);
+        };
+        return /*#__PURE__*/ external_react_default().createElement(VirtualList.VirtualList, {
+            ...args,
+            isLoading: isFetching,
+            onVisibleItemsScrollEnd: handleFetchNextPage,
+            hasNextPage: true,
+            items: items,
+            renderItem: (item)=>/*#__PURE__*/ external_react_default().createElement("div", {
+                    style: {
+                        height: 50,
+                        backgroundColor: "lightgreen",
+                        border: "1px solid black"
+                    }
+                }, "Item ", item)
+        });
+    },
+    args: {
+        itemHeight: 50,
+        overscan: 5,
         hasNextPage: true,
-        items: items2,
-        renderItem: (item) => /* @__PURE__ */ import_react.default.createElement("div", { style: { height: 50, backgroundColor: "lightgreen", border: "1px solid black" } }, "Item ", item)
-      }
-    );
-  },
-  args: {
-    itemHeight: 50,
-    overscan: 5,
-    hasNextPage: true,
-    isLoading: false
-  }
+        isLoading: false
+    }
 };
 const TestVirtualList = {
-  play: async ({ canvasElement }) => {
-    const canvas = (0, import_test.within)(canvasElement);
-    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: lastVisibleItem },
-      { target: firstVisibleItem },
-      { keys: "[/TouchA]" }
-    ]);
-    await (0, import_test.waitFor)(() => (0, import_test.expect)(firstVisibleItem).not.toBeInTheDocument());
-  }
+    play: async ({ canvasElement })=>{
+        const canvas = (0,test_namespaceObject.within)(canvasElement);
+        const visibleItems = canvas.getAllByText(/Item #/i);
+        const firstVisibleItem = visibleItems[0];
+        const lastVisibleItem = visibleItems[visibleItems.length - 1];
+        // need to add 5 due to the overscan set to 5 (it renders 5 items before and after the visible items)
+        await (0,test_namespaceObject.expect)(visibleItems.length).toBeLessThanOrEqual(12);
+        await (0,test_namespaceObject.expect)(firstVisibleItem).toBeInTheDocument();
+        await test_namespaceObject.userEvent.pointer([
+            {
+                keys: "[TouchA>]",
+                target: lastVisibleItem
+            },
+            {
+                target: firstVisibleItem
+            },
+            {
+                keys: "[/TouchA]"
+            }
+        ]);
+        await (0,test_namespaceObject.waitFor)(()=>(0,test_namespaceObject.expect)(firstVisibleItem).not.toBeInTheDocument());
+    }
 };
-//# sourceMappingURL=VirtualList.stories.js.map
+
+})();
+
+module.exports = __webpack_exports__;
+})()
+;
+//# sourceMappingURL=VirtualList.stories.js.map