react-virtuoso 4.10.0 → 4.10.2

package/dist/index.mjs

@@ -1,4 +1,5 @@
-import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { createElement } from "react";
 import ReactDOM from "react-dom";
 const PUBLISH = 0;
 const SUBSCRIBE = 1;
@@ -322,7 +323,7 @@ function omit(keys, obj) {
   }
   return result;
 }
-const useIsomorphicLayoutEffect$2 = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect$1 = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function systemToComponent(systemSpec, map2, Root) {
   const requiredPropNames = Object.keys(map2.required || {});
   const optionalPropNames = Object.keys(map2.optional || {});
@@ -368,7 +369,7 @@ function systemToComponent(systemSpec, map2, Root) {
       return tap(init(systemSpec), (system22) => applyPropsToSystem(system22, props));
     });
     const [handlers] = React.useState(curry1to0(buildEventHandlers, system2));
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
       for (const eventName of eventNames) {
         if (eventName in props) {
           subscribe(handlers[eventName], props[eventName]);
@@ -378,19 +379,12 @@ function systemToComponent(systemSpec, map2, Root) {
         Object.values(handlers).map(reset);
       };
     }, [props, handlers, system2]);
-    useIsomorphicLayoutEffect$2(() => {
+    useIsomorphicLayoutEffect$1(() => {
       applyPropsToSystem(system2, props);
     });
     React.useImperativeHandle(ref, always(buildMethods(system2)));
-    return React.createElement(
-      Context.Provider,
-      { value: system2 },
-      Root ? React.createElement(
-        Root,
-        omit([...requiredPropNames, ...optionalPropNames, ...eventNames], props),
-        children
-      ) : children
-    );
+    const RootComponent = Root;
+    return /* @__PURE__ */ jsx(Context.Provider, { value: system2, children: Root ? /* @__PURE__ */ jsx(RootComponent, { ...omit([...requiredPropNames, ...optionalPropNames, ...eventNames], props), children }) : children });
   });
   const usePublisher2 = (key) => {
     return React.useCallback(curry2to1(publish, React.useContext(Context)[key]), [key]);
@@ -414,7 +408,7 @@ function systemToComponent(systemSpec, map2, Root) {
     const system2 = React.useContext(Context);
     const source = system2[key];
     const [value, setValue] = React.useState(curry1to0(getValue, source));
-    useIsomorphicLayoutEffect$2(
+    useIsomorphicLayoutEffect$1(
       () => subscribe(source, (next) => {
         if (next !== value) {
           setValue(always(next));
@@ -428,7 +422,7 @@ function systemToComponent(systemSpec, map2, Root) {
   const useEmitter2 = (key, callback) => {
     const context = React.useContext(Context);
     const source = context[key];
-    useIsomorphicLayoutEffect$2(() => subscribe(source, callback), [callback, source]);
+    useIsomorphicLayoutEffect$1(() => subscribe(source, callback), [callback, source]);
   };
   return {
     Component,
@@ -438,7 +432,6 @@ function systemToComponent(systemSpec, map2, Root) {
   };
 }
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
-const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
   LogLevel2[LogLevel2["DEBUG"] = 0] = "DEBUG";
   LogLevel2[LogLevel2["INFO"] = 1] = "INFO";
@@ -768,8 +761,7 @@ function newTree() {
   return NIL_NODE;
 }
 function remove(node, key) {
-  if (empty(node))
-    return NIL_NODE;
+  if (empty(node)) return NIL_NODE;
   const { k, l, r } = node;
   if (key === k) {
     if (empty(l)) {
@@ -3085,7 +3077,7 @@ const listComponentPropsSystem = /* @__PURE__ */ system(() => {
   const groupContent = statefulStream((index) => `Group ${index}`);
   const components = statefulStream({});
   const computeItemKey = statefulStream(identity);
-  const headerFooterTag = statefulStream("div");
+  const HeaderFooterTag = statefulStream("div");
   const scrollerRef = statefulStream(noop);
   const distinctProp = (propName, defaultValue = null) => {
     return statefulStreamFromEmitter(
@@ -3103,7 +3095,7 @@ const listComponentPropsSystem = /* @__PURE__ */ system(() => {
     groupContent,
     components,
     computeItemKey,
-    headerFooterTag,
+    HeaderFooterTag,
     scrollerRef,
     FooterComponent: distinctProp("Footer"),
     HeaderComponent: distinctProp("Header"),
@@ -3119,7 +3111,7 @@ const listComponentPropsSystem = /* @__PURE__ */ system(() => {
 const combinedSystem$2 = /* @__PURE__ */ system(([listSystem2, propsSystem]) => {
   return { ...listSystem2, ...propsSystem };
 }, tup(listSystem, listComponentPropsSystem));
-const DefaultScrollSeekPlaceholder$1 = ({ height }) => /* @__PURE__ */ React.createElement("div", { style: { height } });
+const DefaultScrollSeekPlaceholder$1 = ({ height }) => /* @__PURE__ */ jsx("div", { style: { height } });
 const GROUP_STYLE = { position: positionStickyCssValue(), zIndex: 1, overflowAnchor: "none" };
 const ITEM_STYLE$1 = { overflowAnchor: "none" };
 const HORIZONTAL_ITEM_STYLE = { ...ITEM_STYLE$1, display: "inline-block", height: "100%" };
@@ -3183,59 +3175,62 @@ const Items$1 = /* @__PURE__ */ React.memo(function VirtuosoItems({ showTopList
     ...initialItemFinalLocationReached ? {} : { visibility: "hidden" }
   };
   if (!showTopList && listState.totalCount === 0 && EmptyPlaceholder) {
-    return React.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+    return /* @__PURE__ */ jsx(EmptyPlaceholder, { ...contextPropIfNotDomElement(EmptyPlaceholder, context) });
   }
-  return React.createElement(
+  return /* @__PURE__ */ jsx(
     ListComponent,
     {
       ...contextPropIfNotDomElement(ListComponent, context),
       ref: callbackRef,
       style: containerStyle,
-      "data-testid": showTopList ? "virtuoso-top-item-list" : "virtuoso-item-list"
-    },
-    (showTopList ? listState.topItems : listState.items).map((item) => {
-      const index = item.originalIndex;
-      const key = computeItemKey(index + listState.firstItemIndex, item.data, context);
-      if (isSeeking) {
-        return React.createElement(ScrollSeekPlaceholder, {
-          ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
-          key,
-          index: item.index,
-          height: item.size,
-          type: item.type || "item",
-          ...item.type === "group" ? {} : { groupIndex: item.groupIndex }
-        });
-      }
-      if (item.type === "group") {
-        return React.createElement(
-          GroupComponent,
-          {
-            ...contextPropIfNotDomElement(GroupComponent, context),
-            key,
-            "data-index": index,
-            "data-known-size": item.size,
-            "data-item-index": item.index,
-            style: GROUP_STYLE
-          },
-          groupContent(item.index, context)
-        );
-      } else {
-        return React.createElement(
-          ItemComponent,
-          {
-            ...contextPropIfNotDomElement(ItemComponent, context),
-            ...itemPropIfNotDomElement(ItemComponent, item.data),
-            key,
-            "data-index": index,
-            "data-known-size": item.size,
-            "data-item-index": item.index,
-            "data-item-group-index": item.groupIndex,
-            style: horizontalDirection ? HORIZONTAL_ITEM_STYLE : ITEM_STYLE$1
-          },
-          hasGroups2 ? itemContent(item.index, item.groupIndex, item.data, context) : itemContent(item.index, item.data, context)
-        );
-      }
-    })
+      "data-testid": showTopList ? "virtuoso-top-item-list" : "virtuoso-item-list",
+      children: (showTopList ? listState.topItems : listState.items).map((item) => {
+        const index = item.originalIndex;
+        const key = computeItemKey(index + listState.firstItemIndex, item.data, context);
+        if (isSeeking) {
+          return /* @__PURE__ */ createElement(
+            ScrollSeekPlaceholder,
+            {
+              ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
+              key,
+              index: item.index,
+              height: item.size,
+              type: item.type || "item",
+              ...item.type === "group" ? {} : { groupIndex: item.groupIndex }
+            }
+          );
+        }
+        if (item.type === "group") {
+          return /* @__PURE__ */ createElement(
+            GroupComponent,
+            {
+              ...contextPropIfNotDomElement(GroupComponent, context),
+              key,
+              "data-index": index,
+              "data-known-size": item.size,
+              "data-item-index": item.index,
+              style: GROUP_STYLE
+            },
+            groupContent(item.index, context)
+          );
+        } else {
+          return /* @__PURE__ */ createElement(
+            ItemComponent,
+            {
+              ...contextPropIfNotDomElement(ItemComponent, context),
+              ...itemPropIfNotDomElement(ItemComponent, item.data),
+              key,
+              "data-index": index,
+              "data-known-size": item.size,
+              "data-item-index": item.index,
+              "data-item-group-index": item.groupIndex,
+              style: horizontalDirection ? HORIZONTAL_ITEM_STYLE : ITEM_STYLE$1
+            },
+            hasGroups2 ? itemContent(item.index, item.groupIndex, item.data, context) : itemContent(item.index, item.data, context)
+          );
+        }
+      })
+    }
   );
 });
 const scrollerStyle = {
@@ -3275,26 +3270,26 @@ function itemPropIfNotDomElement(element, item) {
 const Header$1 = /* @__PURE__ */ React.memo(function VirtuosoHeader() {
   const Header2 = useEmitterValue$2("HeaderComponent");
   const headerHeight = usePublisher$2("headerHeight");
-  const headerFooterTag = useEmitterValue$2("headerFooterTag");
+  const HeaderFooterTag = useEmitterValue$2("HeaderFooterTag");
   const ref = useSize(
     React.useMemo(() => (el) => headerHeight(correctItemSize(el, "height")), [headerHeight]),
     true,
     useEmitterValue$2("skipAnimationFrameInResizeObserver")
   );
   const context = useEmitterValue$2("context");
-  return Header2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Header2, contextPropIfNotDomElement(Header2, context))) : null;
+  return Header2 ? /* @__PURE__ */ jsx(HeaderFooterTag, { ref, children: /* @__PURE__ */ jsx(Header2, { ...contextPropIfNotDomElement(Header2, context) }) }) : null;
 });
 const Footer$1 = /* @__PURE__ */ React.memo(function VirtuosoFooter() {
   const Footer2 = useEmitterValue$2("FooterComponent");
   const footerHeight = usePublisher$2("footerHeight");
-  const headerFooterTag = useEmitterValue$2("headerFooterTag");
+  const HeaderFooterTag = useEmitterValue$2("HeaderFooterTag");
   const ref = useSize(
     React.useMemo(() => (el) => footerHeight(correctItemSize(el, "height")), [footerHeight]),
     true,
     useEmitterValue$2("skipAnimationFrameInResizeObserver")
   );
   const context = useEmitterValue$2("context");
-  return Footer2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Footer2, contextPropIfNotDomElement(Footer2, context))) : null;
+  return Footer2 ? /* @__PURE__ */ jsx(HeaderFooterTag, { ref, children: /* @__PURE__ */ jsx(Footer2, { ...contextPropIfNotDomElement(Footer2, context) }) }) : null;
 });
 function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, useEmitterValue: useEmitterValue2 }) {
   const Scroller2 = React.memo(function VirtuosoScroller({ style, children, ...props }) {
@@ -3315,7 +3310,7 @@ function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, u
     useEmitter2("scrollTo", scrollToCallback);
     useEmitter2("scrollBy", scrollByCallback);
     const defaultStyle = horizontalDirection ? horizontalScrollerStyle : scrollerStyle;
-    return React.createElement(
+    return /* @__PURE__ */ jsx(
       ScrollerComponent,
       {
         ref: scrollerRef,
@@ -3324,9 +3319,9 @@ function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, u
         "data-virtuoso-scroller": true,
         tabIndex: 0,
         ...props,
-        ...contextPropIfNotDomElement(ScrollerComponent, context)
-      },
-      children
+        ...contextPropIfNotDomElement(ScrollerComponent, context),
+        children
+      }
     );
   });
   return Scroller2;
@@ -3347,7 +3342,7 @@ function buildWindowScroller({ usePublisher: usePublisher2, useEmitter: useEmitt
       noop,
       customScrollParent
     );
-    useIsomorphicLayoutEffect$1(() => {
+    useIsomorphicLayoutEffect(() => {
       scrollerRef.current = customScrollParent ? customScrollParent : window;
       return () => {
         scrollerRef.current = null;
@@ -3355,15 +3350,15 @@ function buildWindowScroller({ usePublisher: usePublisher2, useEmitter: useEmitt
     }, [scrollerRef, customScrollParent]);
     useEmitter2("windowScrollTo", scrollToCallback);
     useEmitter2("scrollBy", scrollByCallback);
-    return React.createElement(
+    return /* @__PURE__ */ jsx(
       ScrollerComponent,
       {
         style: { position: "relative", ...style, ...totalListHeight !== 0 ? { height: totalListHeight + deviation } : {} },
         "data-virtuoso-scroller": true,
         ...props,
-        ...contextPropIfNotDomElement(ScrollerComponent, context)
-      },
-      children
+        ...contextPropIfNotDomElement(ScrollerComponent, context),
+        children
+      }
     );
   });
   return Scroller2;
@@ -3385,7 +3380,7 @@ const Viewport$2 = ({ children }) => {
       fixedItemHeight(ctx.itemHeight);
     }
   }, [ctx, viewportHeight, fixedItemHeight]);
-  return /* @__PURE__ */ React.createElement("div", { style: viewportStyle(alignToBottom), ref: viewportRef, "data-viewport-type": "element" }, children);
+  return /* @__PURE__ */ jsx("div", { style: viewportStyle(alignToBottom), ref: viewportRef, "data-viewport-type": "element", children });
 };
 const WindowViewport$2 = ({ children }) => {
   const ctx = React.useContext(VirtuosoMockContext);
@@ -3404,14 +3399,14 @@ const WindowViewport$2 = ({ children }) => {
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
     }
   }, [ctx, windowViewportRect, fixedItemHeight]);
-  return /* @__PURE__ */ React.createElement("div", { ref: viewportRef, style: viewportStyle(alignToBottom), "data-viewport-type": "window" }, children);
+  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: viewportStyle(alignToBottom), "data-viewport-type": "window", children });
 };
 const TopItemListContainer = ({ children }) => {
   const TopItemList = useEmitterValue$2("TopItemListComponent") || "div";
   const headerHeight = useEmitterValue$2("headerHeight");
   const style = { ...topItemListStyle, marginTop: `${headerHeight}px` };
   const context = useEmitterValue$2("context");
-  return React.createElement(TopItemList, { style, ...contextPropIfNotDomElement(TopItemList, context) }, children);
+  return /* @__PURE__ */ jsx(TopItemList, { style, ...contextPropIfNotDomElement(TopItemList, context), children });
 };
 const ListRoot = /* @__PURE__ */ React.memo(function VirtuosoRoot(props) {
   const useWindowScroll = useEmitterValue$2("useWindowScroll");
@@ -3419,7 +3414,14 @@ const ListRoot = /* @__PURE__ */ React.memo(function VirtuosoRoot(props) {
   const customScrollParent = useEmitterValue$2("customScrollParent");
   const TheScroller = customScrollParent || useWindowScroll ? WindowScroller$2 : Scroller$2;
   const TheViewport = customScrollParent || useWindowScroll ? WindowViewport$2 : Viewport$2;
-  return /* @__PURE__ */ React.createElement(TheScroller, { ...props }, showTopList && /* @__PURE__ */ React.createElement(TopItemListContainer, null, /* @__PURE__ */ React.createElement(Items$1, { showTopList: true })), /* @__PURE__ */ React.createElement(TheViewport, null, /* @__PURE__ */ React.createElement(Header$1, null), /* @__PURE__ */ React.createElement(Items$1, null), /* @__PURE__ */ React.createElement(Footer$1, null)));
+  return /* @__PURE__ */ jsxs(TheScroller, { ...props, children: [
+    showTopList && /* @__PURE__ */ jsx(TopItemListContainer, { children: /* @__PURE__ */ jsx(Items$1, { showTopList: true }) }),
+    /* @__PURE__ */ jsxs(TheViewport, { children: [
+      /* @__PURE__ */ jsx(Header$1, {}),
+      /* @__PURE__ */ jsx(Items$1, {}),
+      /* @__PURE__ */ jsx(Footer$1, {})
+    ] })
+  ] });
 });
 const {
   Component: List,
@@ -3451,7 +3453,7 @@ const {
       fixedItemHeight: "fixedItemHeight",
       itemSize: "itemSize",
       scrollSeekConfiguration: "scrollSeekConfiguration",
-      headerFooterTag: "headerFooterTag",
+      headerFooterTag: "HeaderFooterTag",
       data: "data",
       initialItemCount: "initialItemCount",
       initialScrollTop: "initialScrollTop",
@@ -3895,8 +3897,11 @@ const gridComponentPropsSystem = /* @__PURE__ */ system(() => {
     );
   };
   const readyStateChanged = statefulStream(false);
+  const reportReadyState = statefulStream(false);
+  connect(duc(reportReadyState), readyStateChanged);
   return {
     readyStateChanged,
+    reportReadyState,
     context,
     itemContent,
     components,
@@ -3932,7 +3937,7 @@ const GridItems = /* @__PURE__ */ React.memo(function GridItems2() {
   const gridGap = usePublisher$1("gap");
   const log = useEmitterValue$1("log");
   const stateRestoreInProgress = useEmitterValue$1("stateRestoreInProgress");
-  const reportReadyState = usePublisher$1("readyStateChanged");
+  const reportReadyState = usePublisher$1("reportReadyState");
   const listRef = useSize(
     React.useMemo(
       () => (el) => {
@@ -3956,59 +3961,67 @@ const GridItems = /* @__PURE__ */ React.memo(function GridItems2() {
   if (stateRestoreInProgress) {
     return null;
   }
-  useIsomorphicLayoutEffect$1(() => {
+  useIsomorphicLayoutEffect(() => {
     if (gridState.itemHeight > 0 && gridState.itemWidth > 0) {
       reportReadyState(true);
     }
   }, [gridState]);
-  return React.createElement(
+  return /* @__PURE__ */ jsx(
     ListComponent,
     {
       ref: listRef,
       className: listClassName,
       ...contextPropIfNotDomElement(ListComponent, context),
       style: { paddingTop: gridState.offsetTop, paddingBottom: gridState.offsetBottom },
-      "data-testid": "virtuoso-item-list"
-    },
-    gridState.items.map((item) => {
-      const key = computeItemKey(item.index, item.data, context);
-      return isSeeking ? React.createElement(ScrollSeekPlaceholder, {
-        key,
-        ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
-        index: item.index,
-        height: gridState.itemHeight,
-        width: gridState.itemWidth
-      }) : React.createElement(
-        ItemComponent,
-        { ...contextPropIfNotDomElement(ItemComponent, context), className: itemClassName, "data-index": item.index, key },
-        itemContent(item.index, item.data, context)
-      );
-    })
+      "data-testid": "virtuoso-item-list",
+      children: gridState.items.map((item) => {
+        const key = computeItemKey(item.index, item.data, context);
+        return isSeeking ? /* @__PURE__ */ jsx(
+          ScrollSeekPlaceholder,
+          {
+            ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
+            index: item.index,
+            height: gridState.itemHeight,
+            width: gridState.itemWidth
+          },
+          key
+        ) : /* @__PURE__ */ createElement(
+          ItemComponent,
+          {
+            ...contextPropIfNotDomElement(ItemComponent, context),
+            className: itemClassName,
+            "data-index": item.index,
+            key
+          },
+          itemContent(item.index, item.data, context)
+        );
+      })
+    }
   );
 });
 const Header = React.memo(function VirtuosoHeader2() {
   const Header2 = useEmitterValue$1("HeaderComponent");
   const headerHeight = usePublisher$1("headerHeight");
-  const headerFooterTag = useEmitterValue$1("headerFooterTag");
+  const HeaderFooterTag = useEmitterValue$1("headerFooterTag");
   const ref = useSize(
     React.useMemo(() => (el) => headerHeight(correctItemSize(el, "height")), [headerHeight]),
     true,
     false
   );
   const context = useEmitterValue$1("context");
-  return Header2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Header2, contextPropIfNotDomElement(Header2, context))) : null;
+  return Header2 ? /* @__PURE__ */ jsx(HeaderFooterTag, { ref, children: /* @__PURE__ */ jsx(Header2, { ...contextPropIfNotDomElement(Header2, context) }) }) : null;
 });
 const Footer = React.memo(function VirtuosoGridFooter() {
   const Footer2 = useEmitterValue$1("FooterComponent");
   const footerHeight = usePublisher$1("footerHeight");
-  const headerFooterTag = useEmitterValue$1("headerFooterTag");
+  const HeaderFooterTag = useEmitterValue$1("headerFooterTag");
   const ref = useSize(
     React.useMemo(() => (el) => footerHeight(correctItemSize(el, "height")), [footerHeight]),
     true,
     false
   );
   const context = useEmitterValue$1("context");
-  return Footer2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Footer2, contextPropIfNotDomElement(Footer2, context))) : null;
+  return Footer2 ? /* @__PURE__ */ jsx(HeaderFooterTag, { ref, children: /* @__PURE__ */ jsx(Footer2, { ...contextPropIfNotDomElement(Footer2, context) }) }) : null;
 });
 const Viewport$1 = ({ children }) => {
   const ctx = React.useContext(VirtuosoGridMockContext);
@@ -4030,7 +4043,7 @@ const Viewport$1 = ({ children }) => {
       itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
     }
   }, [ctx, viewportDimensions, itemDimensions]);
-  return /* @__PURE__ */ React.createElement("div", { style: viewportStyle(false), ref: viewportRef }, children);
+  return /* @__PURE__ */ jsx("div", { style: viewportStyle(false), ref: viewportRef, children });
 };
 const WindowViewport$1 = ({ children }) => {
   const ctx = React.useContext(VirtuosoGridMockContext);
@@ -4044,14 +4057,18 @@ const WindowViewport$1 = ({ children }) => {
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: ctx.viewportWidth });
     }
   }, [ctx, windowViewportRect, itemDimensions]);
-  return /* @__PURE__ */ React.createElement("div", { ref: viewportRef, style: viewportStyle(false) }, children);
+  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: viewportStyle(false), children });
 };
 const GridRoot = /* @__PURE__ */ React.memo(function GridRoot2({ ...props }) {
   const useWindowScroll = useEmitterValue$1("useWindowScroll");
   const customScrollParent = useEmitterValue$1("customScrollParent");
   const TheScroller = customScrollParent || useWindowScroll ? WindowScroller$1 : Scroller$1;
   const TheViewport = customScrollParent || useWindowScroll ? WindowViewport$1 : Viewport$1;
-  return /* @__PURE__ */ React.createElement(TheScroller, { ...props }, /* @__PURE__ */ React.createElement(TheViewport, null, /* @__PURE__ */ React.createElement(Header, null), /* @__PURE__ */ React.createElement(GridItems, null), /* @__PURE__ */ React.createElement(Footer, null)));
+  return /* @__PURE__ */ jsx(TheScroller, { ...props, children: /* @__PURE__ */ jsxs(TheViewport, { children: [
+    /* @__PURE__ */ jsx(Header, {}),
+    /* @__PURE__ */ jsx(GridItems, {}),
+    /* @__PURE__ */ jsx(Footer, {})
+  ] }) });
 });
 const {
   Component: Grid,
@@ -4112,7 +4129,10 @@ function resolveGapValue(property, value, log) {
 }
 const VirtuosoGrid = Grid;
 const tableComponentPropsSystem = /* @__PURE__ */ system(() => {
-  const itemContent = statefulStream((index) => /* @__PURE__ */ React.createElement("td", null, "Item $", index));
+  const itemContent = statefulStream((index) => /* @__PURE__ */ jsxs("td", { children: [
+    "Item $",
+    index
+  ] }));
   const context = statefulStream(null);
   const fixedHeaderContent = statefulStream(null);
   const fixedFooterContent = statefulStream(null);
@@ -4151,8 +4171,8 @@ const tableComponentPropsSystem = /* @__PURE__ */ system(() => {
 const combinedSystem = /* @__PURE__ */ system(([listSystem2, propsSystem]) => {
   return { ...listSystem2, ...propsSystem };
 }, tup(listSystem, tableComponentPropsSystem));
-const DefaultScrollSeekPlaceholder = ({ height }) => /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { style: { height } }));
-const DefaultFillerRow = ({ height }) => /* @__PURE__ */ React.createElement("tr", null, /* @__PURE__ */ React.createElement("td", { style: { height, padding: 0, border: 0 } }));
+const DefaultScrollSeekPlaceholder = ({ height }) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { style: { height } }) });
+const DefaultFillerRow = ({ height }) => /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { style: { height, padding: 0, border: 0 } }) });
 const ITEM_STYLE = { overflowAnchor: "none" };
 const Items = /* @__PURE__ */ React.memo(function VirtuosoItems2() {
   const listState = useEmitterValue("listState");
@@ -4196,25 +4216,28 @@ const Items = /* @__PURE__ */ React.memo(function VirtuosoItems2() {
   const statefulTotalCount = useEmitterValue("statefulTotalCount");
   const context = useEmitterValue("context");
   if (statefulTotalCount === 0 && EmptyPlaceholder) {
-    return React.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+    return /* @__PURE__ */ jsx(EmptyPlaceholder, { ...contextPropIfNotDomElement(EmptyPlaceholder, context) });
   }
   const paddingTop = listState.offsetTop + paddingTopAddition + deviation;
   const paddingBottom = listState.offsetBottom;
-  const paddingTopEl = paddingTop > 0 ? /* @__PURE__ */ React.createElement(FillerRow, { height: paddingTop, key: "padding-top", context }) : null;
-  const paddingBottomEl = paddingBottom > 0 ? /* @__PURE__ */ React.createElement(FillerRow, { height: paddingBottom, key: "padding-bottom", context }) : null;
+  const paddingTopEl = paddingTop > 0 ? /* @__PURE__ */ jsx(FillerRow, { height: paddingTop, context }, "padding-top") : null;
+  const paddingBottomEl = paddingBottom > 0 ? /* @__PURE__ */ jsx(FillerRow, { height: paddingBottom, context }, "padding-bottom") : null;
   const items = listState.items.map((item) => {
     const index = item.originalIndex;
     const key = computeItemKey(index + firstItemIndex, item.data, context);
     if (isSeeking) {
-      return React.createElement(ScrollSeekPlaceholder, {
-        ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
-        key,
-        index: item.index,
-        height: item.size,
-        type: item.type || "item"
-      });
+      return /* @__PURE__ */ createElement(
+        ScrollSeekPlaceholder,
+        {
+          ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
+          key,
+          index: item.index,
+          height: item.size,
+          type: item.type || "item"
+        }
+      );
     }
-    return React.createElement(
+    return /* @__PURE__ */ createElement(
       TableRowComponent,
       {
         ...contextPropIfNotDomElement(TableRowComponent, context),
@@ -4228,11 +4251,11 @@ const Items = /* @__PURE__ */ React.memo(function VirtuosoItems2() {
       itemContent(item.index, item.data, context)
     );
   });
-  return React.createElement(
-    TableBodyComponent,
-    { ref: callbackRef, "data-testid": "virtuoso-item-list", ...contextPropIfNotDomElement(TableBodyComponent, context) },
-    [paddingTopEl, ...items, paddingBottomEl]
-  );
+  return /* @__PURE__ */ jsxs(TableBodyComponent, { ref: callbackRef, "data-testid": "virtuoso-item-list", ...contextPropIfNotDomElement(TableBodyComponent, context), children: [
+    paddingTopEl,
+    items,
+    paddingBottomEl
+  ] });
 });
 const Viewport = ({ children }) => {
   const ctx = React.useContext(VirtuosoMockContext);
@@ -4249,7 +4272,7 @@ const Viewport = ({ children }) => {
       fixedItemHeight(ctx.itemHeight);
     }
   }, [ctx, viewportHeight, fixedItemHeight]);
-  return /* @__PURE__ */ React.createElement("div", { style: viewportStyle(false), ref: viewportRef, "data-viewport-type": "element" }, children);
+  return /* @__PURE__ */ jsx("div", { style: viewportStyle(false), ref: viewportRef, "data-viewport-type": "element", children });
 };
 const WindowViewport = ({ children }) => {
   const ctx = React.useContext(VirtuosoMockContext);
@@ -4267,7 +4290,7 @@ const WindowViewport = ({ children }) => {
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
     }
   }, [ctx, windowViewportRect, fixedItemHeight]);
-  return /* @__PURE__ */ React.createElement("div", { ref: viewportRef, style: viewportStyle(false), "data-viewport-type": "window" }, children);
+  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: viewportStyle(false), "data-viewport-type": "window", children });
 };
 const TableRoot = /* @__PURE__ */ React.memo(function TableVirtuosoRoot(props) {
   const useWindowScroll = useEmitterValue("useWindowScroll");
@@ -4292,31 +4315,31 @@ const TableRoot = /* @__PURE__ */ React.memo(function TableVirtuosoRoot(props) {
   const TheTable = useEmitterValue("TableComponent");
   const TheTHead = useEmitterValue("TableHeadComponent");
   const TheTFoot = useEmitterValue("TableFooterComponent");
-  const theHead = fixedHeaderContent ? React.createElement(
+  const theHead = fixedHeaderContent ? /* @__PURE__ */ jsx(
     TheTHead,
     {
-      key: "TableHead",
       style: { zIndex: 2, position: "sticky", top: 0 },
       ref: theadRef,
-      ...contextPropIfNotDomElement(TheTHead, context)
+      ...contextPropIfNotDomElement(TheTHead, context),
+      children: fixedHeaderContent()
     },
-    fixedHeaderContent()
+    "TableHead"
   ) : null;
-  const theFoot = fixedFooterContent ? React.createElement(
+  const theFoot = fixedFooterContent ? /* @__PURE__ */ jsx(
     TheTFoot,
     {
-      key: "TableFoot",
       style: { zIndex: 1, position: "sticky", bottom: 0 },
       ref: tfootRef,
-      ...contextPropIfNotDomElement(TheTFoot, context)
+      ...contextPropIfNotDomElement(TheTFoot, context),
+      children: fixedFooterContent()
     },
-    fixedFooterContent()
+    "TableFoot"
   ) : null;
-  return /* @__PURE__ */ React.createElement(TheScroller, { ...props }, /* @__PURE__ */ React.createElement(TheViewport, null, React.createElement(
-    TheTable,
-    { style: { borderSpacing: 0, overflowAnchor: "none" }, ...contextPropIfNotDomElement(TheTable, context) },
-    [theHead, /* @__PURE__ */ React.createElement(Items, { key: "TableBody" }), theFoot]
-  )));
+  return /* @__PURE__ */ jsx(TheScroller, { ...props, children: /* @__PURE__ */ jsx(TheViewport, { children: /* @__PURE__ */ jsxs(TheTable, { style: { borderSpacing: 0, overflowAnchor: "none" }, ...contextPropIfNotDomElement(TheTable, context), children: [
+    theHead,
+    /* @__PURE__ */ jsx(Items, {}, "TableBody"),
+    theFoot
+  ] }) }) });
 });
 const {
   Component: Table,