react-virtuoso 4.0.5 → 4.0.7

package/dist/index.mjs

@@ -1,6 +1,5 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { createContext, forwardRef, useState, useImperativeHandle, createElement, useLayoutEffect, useEffect, useCallback, useContext, useRef, memo } from "react";
-import { flushSync } from "react-dom";
+import React from "react";
+import ReactDOM from "react-dom";
 const PUBLISH = 0;
 const SUBSCRIBE = 1;
 const RESET = 2;
@@ -320,13 +319,13 @@ function omit(keys, obj) {
   }
   return result;
 }
-const useIsomorphicLayoutEffect$2 = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$2 = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
 function systemToComponent(systemSpec, map2, Root) {
   const requiredPropNames = Object.keys(map2.required || {});
   const optionalPropNames = Object.keys(map2.optional || {});
   const methodNames = Object.keys(map2.methods || {});
   const eventNames = Object.keys(map2.events || {});
-  const Context = createContext({});
+  const Context = React.createContext({});
   function applyPropsToSystem(system2, props) {
     if (system2["propsReady"]) {
       publish(system2["propsReady"], false);
@@ -360,12 +359,12 @@ function systemToComponent(systemSpec, map2, Root) {
       return handlers;
     }, {});
   }
-  const Component = forwardRef((propsWithChildren, ref) => {
+  const Component = React.forwardRef((propsWithChildren, ref) => {
     const { children, ...props } = propsWithChildren;
-    const [system2] = useState(() => {
+    const [system2] = React.useState(() => {
       return tap(init(systemSpec), (system22) => applyPropsToSystem(system22, props));
     });
-    const [handlers] = useState(curry1to0(buildEventHandlers, system2));
+    const [handlers] = React.useState(curry1to0(buildEventHandlers, system2));
     useIsomorphicLayoutEffect$2(() => {
       for (const eventName of eventNames) {
         if (eventName in props) {
@@ -379,11 +378,11 @@ function systemToComponent(systemSpec, map2, Root) {
     useIsomorphicLayoutEffect$2(() => {
       applyPropsToSystem(system2, props);
     });
-    useImperativeHandle(ref, always(buildMethods(system2)));
-    return createElement(
+    React.useImperativeHandle(ref, always(buildMethods(system2)));
+    return React.createElement(
       Context.Provider,
       { value: system2 },
-      Root ? createElement(
+      Root ? React.createElement(
         Root,
         omit([...requiredPropNames, ...optionalPropNames, ...eventNames], props),
         children
@@ -391,12 +390,12 @@ function systemToComponent(systemSpec, map2, Root) {
     );
   });
   const usePublisher2 = (key) => {
-    return useCallback(curry2to1(publish, useContext(Context)[key]), [key]);
+    return React.useCallback(curry2to1(publish, React.useContext(Context)[key]), [key]);
   };
   const useEmitterValue2 = (key) => {
-    const system2 = useContext(Context);
+    const system2 = React.useContext(Context);
     const source = system2[key];
-    const [value, setValue] = useState(curry1to0(getValue, source));
+    const [value, setValue] = React.useState(curry1to0(getValue, source));
     useIsomorphicLayoutEffect$2(
       () => subscribe(source, (next) => {
         if (next !== value) {
@@ -408,7 +407,7 @@ function systemToComponent(systemSpec, map2, Root) {
     return value;
   };
   const useEmitter2 = (key, callback) => {
-    const context = useContext(Context);
+    const context = React.useContext(Context);
     const source = context[key];
     useIsomorphicLayoutEffect$2(() => subscribe(source, callback), [callback, source]);
   };
@@ -419,7 +418,7 @@ function systemToComponent(systemSpec, map2, Root) {
     useEmitter: useEmitter2
   };
 }
-const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? React.useLayoutEffect : React.useEffect;
 const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
 var LogLevel = /* @__PURE__ */ ((LogLevel2) => {
   LogLevel2[LogLevel2["DEBUG"] = 0] = "DEBUG";
@@ -459,7 +458,7 @@ const loggerSystem = system(
   { singleton: true }
 );
 function useSizeWithElRef(callback, enabled = true) {
-  const ref = useRef(null);
+  const ref = React.useRef(null);
   let callbackRef = (_el) => {
   };
   if (typeof ResizeObserver !== "undefined") {
@@ -553,10 +552,10 @@ function approximatelyEqual(num1, num2) {
   return Math.abs(num1 - num2) < 1.01;
 }
 function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, scrollerElement, scrollerRefCallback = noop, customScrollParent) {
-  const scrollerRef = useRef(null);
-  const scrollTopTarget = useRef(null);
-  const timeoutRef = useRef(null);
-  const handler = useCallback(
+  const scrollerRef = React.useRef(null);
+  const scrollTopTarget = React.useRef(null);
+  const timeoutRef = React.useRef(null);
+  const handler = React.useCallback(
     (ev) => {
       const el = ev.target;
       const windowScroll = el === window || el === document;
@@ -573,7 +572,7 @@ function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, s
       if (ev.suppressFlushSync) {
         call2();
       } else {
-        flushSync(call2);
+        ReactDOM.flushSync(call2);
       }
       if (scrollTopTarget.current !== null) {
         if (scrollTop === scrollTopTarget.current || scrollTop <= 0 || scrollTop === scrollHeight - viewportHeight) {
@@ -588,7 +587,7 @@ function useScrollTop(scrollContainerStateCallback, smoothScrollTargetReached, s
     },
     [scrollContainerStateCallback, smoothScrollTargetReached]
   );
-  useEffect(() => {
+  React.useEffect(() => {
     const localRef = customScrollParent ? customScrollParent : scrollerRef.current;
     scrollerRefCallback(customScrollParent ? customScrollParent : scrollerRef.current);
     handler({ target: localRef, suppressFlushSync: true });
@@ -2670,8 +2669,8 @@ const positionStickyCssValue = simpleMemoize(() => {
   return node.style.position === WEBKIT_STICKY ? WEBKIT_STICKY : STICKY;
 });
 function useWindowViewportRectRef(callback, customScrollParent) {
-  const viewportInfo = useRef(null);
-  const calculateInfo = useCallback(
+  const viewportInfo = React.useRef(null);
+  const calculateInfo = React.useCallback(
     (element) => {
       if (element === null || !element.offsetParent) {
         return;
@@ -2698,10 +2697,10 @@ function useWindowViewportRectRef(callback, customScrollParent) {
     [callback, customScrollParent]
   );
   const { callbackRef, ref } = useSizeWithElRef(calculateInfo);
-  const scrollAndResizeEventHandler = useCallback(() => {
+  const scrollAndResizeEventHandler = React.useCallback(() => {
     calculateInfo(ref.current);
   }, [calculateInfo, ref]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (customScrollParent) {
       customScrollParent.addEventListener("scroll", scrollAndResizeEventHandler);
       const observer = new ResizeObserver(scrollAndResizeEventHandler);
@@ -2721,8 +2720,8 @@ function useWindowViewportRectRef(callback, customScrollParent) {
   }, [scrollAndResizeEventHandler, customScrollParent]);
   return callbackRef;
 }
-const VirtuosoMockContext = createContext(void 0);
-const VirtuosoGridMockContext = createContext(void 0);
+const VirtuosoMockContext = React.createContext(void 0);
+const VirtuosoGridMockContext = React.createContext(void 0);
 function identity(value) {
   return value;
 }
@@ -2766,10 +2765,10 @@ const listComponentPropsSystem = /* @__PURE__ */ system(() => {
 const combinedSystem$2 = /* @__PURE__ */ system(([listSystem2, propsSystem]) => {
   return { ...listSystem2, ...propsSystem };
 }, tup(listSystem, listComponentPropsSystem));
-const DefaultScrollSeekPlaceholder$1 = ({ height }) => /* @__PURE__ */ jsx("div", { style: { height } });
+const DefaultScrollSeekPlaceholder$1 = ({ height }) => /* @__PURE__ */ React.createElement("div", { style: { height } });
 const GROUP_STYLE = { position: positionStickyCssValue(), zIndex: 1, overflowAnchor: "none" };
 const ITEM_STYLE = { overflowAnchor: "none" };
-const Items$1 = /* @__PURE__ */ memo(function VirtuosoItems({ showTopList = false }) {
+const Items$1 = /* @__PURE__ */ React.memo(function VirtuosoItems({ showTopList = false }) {
   const listState = useEmitterValue$2("listState");
   const sizeRanges = usePublisher$2("sizeRanges");
   const useWindowScroll = useEmitterValue$2("useWindowScroll");
@@ -2793,7 +2792,7 @@ const Items$1 = /* @__PURE__ */ memo(function VirtuosoItems({ showTopList = fals
     listGap,
     customScrollParent
   );
-  const [deviation, setDeviation] = useState(0);
+  const [deviation, setDeviation] = React.useState(0);
   useEmitter$2("deviation", (value) => {
     if (deviation !== value) {
       setDeviation(value);
@@ -2815,9 +2814,9 @@ const Items$1 = /* @__PURE__ */ memo(function VirtuosoItems({ showTopList = fals
     marginTop: deviation
   };
   if (!showTopList && listState.totalCount === 0 && EmptyPlaceholder) {
-    return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+    return React.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
   }
-  return createElement(
+  return React.createElement(
     ListComponent,
     {
       ...contextPropIfNotDomElement(ListComponent, context),
@@ -2829,7 +2828,7 @@ const Items$1 = /* @__PURE__ */ memo(function VirtuosoItems({ showTopList = fals
       const index = item.originalIndex;
       const key = computeItemKey(index + listState.firstItemIndex, item.data, context);
       if (isSeeking) {
-        return createElement(ScrollSeekPlaceholder, {
+        return React.createElement(ScrollSeekPlaceholder, {
           ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
           key,
           index: item.index,
@@ -2839,7 +2838,7 @@ const Items$1 = /* @__PURE__ */ memo(function VirtuosoItems({ showTopList = fals
         });
       }
       if (item.type === "group") {
-        return createElement(
+        return React.createElement(
           GroupComponent,
           {
             ...contextPropIfNotDomElement(GroupComponent, context),
@@ -2852,7 +2851,7 @@ const Items$1 = /* @__PURE__ */ memo(function VirtuosoItems({ showTopList = fals
           groupContent(item.index)
         );
       } else {
-        return createElement(
+        return React.createElement(
           ItemComponent,
           {
             ...contextPropIfNotDomElement(ItemComponent, context),
@@ -2895,24 +2894,24 @@ function contextPropIfNotDomElement(element, context) {
   }
   return { context };
 }
-const Header$1 = /* @__PURE__ */ memo(function VirtuosoHeader() {
+const Header$1 = /* @__PURE__ */ React.memo(function VirtuosoHeader() {
   const Header2 = useEmitterValue$2("HeaderComponent");
   const headerHeight = usePublisher$2("headerHeight");
   const headerFooterTag = useEmitterValue$2("headerFooterTag");
   const ref = useSize((el) => headerHeight(correctItemSize(el, "height")));
   const context = useEmitterValue$2("context");
-  return Header2 ? createElement(headerFooterTag, { ref }, createElement(Header2, contextPropIfNotDomElement(Header2, context))) : null;
+  return Header2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Header2, contextPropIfNotDomElement(Header2, context))) : null;
 });
-const Footer$1 = /* @__PURE__ */ memo(function VirtuosoFooter() {
+const Footer$1 = /* @__PURE__ */ React.memo(function VirtuosoFooter() {
   const Footer2 = useEmitterValue$2("FooterComponent");
   const footerHeight = usePublisher$2("footerHeight");
   const headerFooterTag = useEmitterValue$2("headerFooterTag");
   const ref = useSize((el) => footerHeight(correctItemSize(el, "height")));
   const context = useEmitterValue$2("context");
-  return Footer2 ? createElement(headerFooterTag, { ref }, createElement(Footer2, contextPropIfNotDomElement(Footer2, context))) : null;
+  return Footer2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Footer2, contextPropIfNotDomElement(Footer2, context))) : null;
 });
 function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, useEmitterValue: useEmitterValue2 }) {
-  const Scroller2 = memo(function VirtuosoScroller({ style, children, ...props }) {
+  const Scroller2 = React.memo(function VirtuosoScroller({ style, children, ...props }) {
     const scrollContainerStateCallback = usePublisher2("scrollContainerState");
     const ScrollerComponent = useEmitterValue2("ScrollerComponent");
     const smoothScrollTargetReached = usePublisher2("smoothScrollTargetReached");
@@ -2926,7 +2925,7 @@ function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, u
     );
     useEmitter2("scrollTo", scrollToCallback);
     useEmitter2("scrollBy", scrollByCallback);
-    return createElement(
+    return React.createElement(
       ScrollerComponent,
       {
         ref: scrollerRef,
@@ -2943,7 +2942,7 @@ function buildScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, u
   return Scroller2;
 }
 function buildWindowScroller({ usePublisher: usePublisher2, useEmitter: useEmitter2, useEmitterValue: useEmitterValue2 }) {
-  const Scroller2 = memo(function VirtuosoWindowScroller({ style, children, ...props }) {
+  const Scroller2 = React.memo(function VirtuosoWindowScroller({ style, children, ...props }) {
     const scrollContainerStateCallback = usePublisher2("windowScrollContainerState");
     const ScrollerComponent = useEmitterValue2("ScrollerComponent");
     const smoothScrollTargetReached = usePublisher2("smoothScrollTargetReached");
@@ -2966,7 +2965,7 @@ function buildWindowScroller({ usePublisher: usePublisher2, useEmitter: useEmitt
     }, [scrollerRef, customScrollParent]);
     useEmitter2("windowScrollTo", scrollToCallback);
     useEmitter2("scrollBy", scrollByCallback);
-    return createElement(
+    return React.createElement(
       ScrollerComponent,
       {
         style: { position: "relative", ...style, ...totalListHeight !== 0 ? { height: totalListHeight + deviation } : {} },
@@ -2980,53 +2979,46 @@ function buildWindowScroller({ usePublisher: usePublisher2, useEmitter: useEmitt
   return Scroller2;
 }
 const Viewport$2 = ({ children }) => {
-  const ctx = useContext(VirtuosoMockContext);
+  const ctx = React.useContext(VirtuosoMockContext);
   const viewportHeight = usePublisher$2("viewportHeight");
   const fixedItemHeight = usePublisher$2("fixedItemHeight");
   const viewportRef = useSize(compose(viewportHeight, (el) => correctItemSize(el, "height")));
-  useEffect(() => {
+  React.useEffect(() => {
     if (ctx) {
       viewportHeight(ctx.viewportHeight);
       fixedItemHeight(ctx.itemHeight);
     }
   }, [ctx, viewportHeight, fixedItemHeight]);
-  return /* @__PURE__ */ jsx("div", { style: viewportStyle, ref: viewportRef, "data-viewport-type": "element", children });
+  return /* @__PURE__ */ React.createElement("div", { style: viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children);
 };
 const WindowViewport$2 = ({ children }) => {
-  const ctx = useContext(VirtuosoMockContext);
+  const ctx = React.useContext(VirtuosoMockContext);
   const windowViewportRect = usePublisher$2("windowViewportRect");
   const fixedItemHeight = usePublisher$2("fixedItemHeight");
   const customScrollParent = useEmitterValue$2("customScrollParent");
   const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
-  useEffect(() => {
+  React.useEffect(() => {
     if (ctx) {
       fixedItemHeight(ctx.itemHeight);
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
     }
   }, [ctx, windowViewportRect, fixedItemHeight]);
-  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window", children });
+  return /* @__PURE__ */ React.createElement("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window" }, children);
 };
 const TopItemListContainer = ({ children }) => {
   const TopItemList = useEmitterValue$2("TopItemListComponent");
   const headerHeight = useEmitterValue$2("headerHeight");
   const style = { ...topItemListStyle, marginTop: `${headerHeight}px` };
   const context = useEmitterValue$2("context");
-  return createElement(TopItemList || "div", { style, context }, children);
+  return React.createElement(TopItemList || "div", { style, context }, children);
 };
-const ListRoot = /* @__PURE__ */ memo(function VirtuosoRoot(props) {
+const ListRoot = /* @__PURE__ */ React.memo(function VirtuosoRoot(props) {
   const useWindowScroll = useEmitterValue$2("useWindowScroll");
   const showTopList = useEmitterValue$2("topItemsIndexes").length > 0;
   const customScrollParent = useEmitterValue$2("customScrollParent");
   const TheScroller = customScrollParent || useWindowScroll ? WindowScroller$2 : Scroller$2;
   const TheViewport = customScrollParent || useWindowScroll ? WindowViewport$2 : Viewport$2;
-  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, {})
-    ] })
-  ] });
+  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)));
 });
 const {
   Component: List,
@@ -3125,6 +3117,9 @@ function buildItems(startIndex, endIndex, data) {
 function gapComparator(prev, next) {
   return prev && prev.column === next.column && prev.row === next.row;
 }
+function dimensionComparator(prev, next) {
+  return prev && prev.width === next.width && prev.height === next.height;
+}
 const gridSystem = /* @__PURE__ */ system(
   ([
     { overscan, visibleRange, listBoundary },
@@ -3169,11 +3164,11 @@ const gridSystem = /* @__PURE__ */ system(
           duc(totalCount),
           visibleRange,
           duc(gap, gapComparator),
-          duc(itemDimensions, (prev, next) => prev && prev.width === next.width && prev.height === next.height),
+          duc(itemDimensions, dimensionComparator),
+          duc(viewportDimensions, dimensionComparator),
           data
         ),
-        withLatestFrom(viewportDimensions),
-        map(([[totalCount2, [startOffset, endOffset], gap2, item, data2], viewport]) => {
+        map(([totalCount2, [startOffset, endOffset], gap2, item, viewport, data2]) => {
           const { row: rowGap, column: columnGap } = gap2;
           const { height: itemHeight, width: itemWidth } = item;
           const { width: viewportWidth } = viewport;
@@ -3393,7 +3388,7 @@ const gridComponentPropsSystem = /* @__PURE__ */ system(() => {
 const combinedSystem$1 = /* @__PURE__ */ system(([gridSystem2, gridComponentPropsSystem2]) => {
   return { ...gridSystem2, ...gridComponentPropsSystem2 };
 }, tup(gridSystem, gridComponentPropsSystem));
-const GridItems = /* @__PURE__ */ memo(function GridItems2() {
+const GridItems = /* @__PURE__ */ React.memo(function GridItems2() {
   const gridState = useEmitterValue$1("gridState");
   const listClassName = useEmitterValue$1("listClassName");
   const itemClassName = useEmitterValue$1("itemClassName");
@@ -3420,7 +3415,7 @@ const GridItems = /* @__PURE__ */ memo(function GridItems2() {
       column: resolveGapValue("column-gap", getComputedStyle(el).columnGap, log)
     });
   });
-  return createElement(
+  return React.createElement(
     ListComponent,
     {
       ref: listRef,
@@ -3431,13 +3426,13 @@ const GridItems = /* @__PURE__ */ memo(function GridItems2() {
     },
     gridState.items.map((item) => {
       const key = computeItemKey(item.index, item.data, context);
-      return isSeeking ? createElement(ScrollSeekPlaceholder, {
+      return isSeeking ? React.createElement(ScrollSeekPlaceholder, {
         key,
         ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
         index: item.index,
         height: gridState.itemHeight,
         width: gridState.itemWidth
-      }) : createElement(
+      }) : React.createElement(
         ItemComponent,
         { ...contextPropIfNotDomElement(ItemComponent, context), className: itemClassName, "data-index": item.index, key },
         itemContent(item.index, item.data, context)
@@ -3445,61 +3440,57 @@ const GridItems = /* @__PURE__ */ memo(function GridItems2() {
     })
   );
 });
-const Header = memo(function VirtuosoHeader2() {
+const Header = React.memo(function VirtuosoHeader2() {
   const Header2 = useEmitterValue$1("HeaderComponent");
   const headerHeight = usePublisher$1("headerHeight");
   const headerFooterTag = useEmitterValue$1("headerFooterTag");
   const ref = useSize((el) => headerHeight(correctItemSize(el, "height")));
   const context = useEmitterValue$1("context");
-  return Header2 ? createElement(headerFooterTag, { ref }, createElement(Header2, contextPropIfNotDomElement(Header2, context))) : null;
+  return Header2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Header2, contextPropIfNotDomElement(Header2, context))) : null;
 });
-const Footer = memo(function VirtuosoGridFooter() {
+const Footer = React.memo(function VirtuosoGridFooter() {
   const Footer2 = useEmitterValue$1("FooterComponent");
   const footerHeight = usePublisher$1("footerHeight");
   const headerFooterTag = useEmitterValue$1("headerFooterTag");
   const ref = useSize((el) => footerHeight(correctItemSize(el, "height")));
   const context = useEmitterValue$1("context");
-  return Footer2 ? createElement(headerFooterTag, { ref }, createElement(Footer2, contextPropIfNotDomElement(Footer2, context))) : null;
+  return Footer2 ? React.createElement(headerFooterTag, { ref }, React.createElement(Footer2, contextPropIfNotDomElement(Footer2, context))) : null;
 });
 const Viewport$1 = ({ children }) => {
-  const ctx = useContext(VirtuosoGridMockContext);
+  const ctx = React.useContext(VirtuosoGridMockContext);
   const itemDimensions = usePublisher$1("itemDimensions");
   const viewportDimensions = usePublisher$1("viewportDimensions");
   const viewportRef = useSize((el) => {
     viewportDimensions(el.getBoundingClientRect());
   });
-  useEffect(() => {
+  React.useEffect(() => {
     if (ctx) {
       viewportDimensions({ height: ctx.viewportHeight, width: ctx.viewportWidth });
       itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
     }
   }, [ctx, viewportDimensions, itemDimensions]);
-  return /* @__PURE__ */ jsx("div", { style: viewportStyle, ref: viewportRef, children });
+  return /* @__PURE__ */ React.createElement("div", { style: viewportStyle, ref: viewportRef }, children);
 };
 const WindowViewport$1 = ({ children }) => {
-  const ctx = useContext(VirtuosoGridMockContext);
+  const ctx = React.useContext(VirtuosoGridMockContext);
   const windowViewportRect = usePublisher$1("windowViewportRect");
   const itemDimensions = usePublisher$1("itemDimensions");
   const customScrollParent = useEmitterValue$1("customScrollParent");
   const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
-  useEffect(() => {
+  React.useEffect(() => {
     if (ctx) {
       itemDimensions({ height: ctx.itemHeight, width: ctx.itemWidth });
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: ctx.viewportWidth });
     }
   }, [ctx, windowViewportRect, itemDimensions]);
-  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: viewportStyle, children });
+  return /* @__PURE__ */ React.createElement("div", { ref: viewportRef, style: viewportStyle }, children);
 };
-const GridRoot = /* @__PURE__ */ memo(function GridRoot2({ ...props }) {
+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__ */ jsx(TheScroller, { ...props, children: /* @__PURE__ */ jsxs(TheViewport, { children: [
-    /* @__PURE__ */ jsx(Header, {}),
-    /* @__PURE__ */ jsx(GridItems, {}),
-    /* @__PURE__ */ jsx(Footer, {})
-  ] }) });
+  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)));
 });
 const {
   Component: Grid,
@@ -3555,10 +3546,7 @@ function resolveGapValue(property, value, log) {
 }
 const VirtuosoGrid = Grid;
 const tableComponentPropsSystem = /* @__PURE__ */ system(() => {
-  const itemContent = statefulStream((index) => /* @__PURE__ */ jsxs("td", { children: [
-    "Item $",
-    index
-  ] }));
+  const itemContent = statefulStream((index) => /* @__PURE__ */ React.createElement("td", null, "Item $", index));
   const context = statefulStream(null);
   const fixedHeaderContent = statefulStream(null);
   const fixedFooterContent = statefulStream(null);
@@ -3597,9 +3585,9 @@ const tableComponentPropsSystem = /* @__PURE__ */ system(() => {
 const combinedSystem = /* @__PURE__ */ system(([listSystem2, propsSystem]) => {
   return { ...listSystem2, ...propsSystem };
 }, tup(listSystem, tableComponentPropsSystem));
-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 Items = /* @__PURE__ */ memo(function VirtuosoItems2() {
+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 Items = /* @__PURE__ */ React.memo(function VirtuosoItems2() {
   const listState = useEmitterValue("listState");
   const sizeRanges = usePublisher("sizeRanges");
   const useWindowScroll = useEmitterValue("useWindowScroll");
@@ -3620,7 +3608,7 @@ const Items = /* @__PURE__ */ memo(function VirtuosoItems2() {
     void 0,
     customScrollParent
   );
-  const [deviation, setDeviation] = useState(0);
+  const [deviation, setDeviation] = React.useState(0);
   useEmitter("deviation", (value) => {
     if (deviation !== value) {
       ref.current.style.marginTop = `${value}px`;
@@ -3639,17 +3627,17 @@ const Items = /* @__PURE__ */ memo(function VirtuosoItems2() {
   const statefulTotalCount = useEmitterValue("statefulTotalCount");
   const context = useEmitterValue("context");
   if (statefulTotalCount === 0 && EmptyPlaceholder) {
-    return createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
+    return React.createElement(EmptyPlaceholder, contextPropIfNotDomElement(EmptyPlaceholder, context));
   }
   const paddingTop = listState.offsetTop + paddingTopAddition + deviation;
   const paddingBottom = listState.offsetBottom;
-  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 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 items = listState.items.map((item) => {
     const index = item.originalIndex;
     const key = computeItemKey(index + firstItemIndex, item.data, context);
     if (isSeeking) {
-      return createElement(ScrollSeekPlaceholder, {
+      return React.createElement(ScrollSeekPlaceholder, {
         ...contextPropIfNotDomElement(ScrollSeekPlaceholder, context),
         key,
         index: item.index,
@@ -3657,7 +3645,7 @@ const Items = /* @__PURE__ */ memo(function VirtuosoItems2() {
         type: item.type || "item"
       });
     }
-    return createElement(
+    return React.createElement(
       TableRowComponent,
       {
         ...contextPropIfNotDomElement(TableRowComponent, context),
@@ -3671,40 +3659,40 @@ const Items = /* @__PURE__ */ memo(function VirtuosoItems2() {
       itemContent(item.index, item.data, context)
     );
   });
-  return createElement(
+  return React.createElement(
     TableBodyComponent,
     { ref: callbackRef, "data-test-id": "virtuoso-item-list", ...contextPropIfNotDomElement(TableBodyComponent, context) },
     [paddingTopEl, ...items, paddingBottomEl]
   );
 });
 const Viewport = ({ children }) => {
-  const ctx = useContext(VirtuosoMockContext);
+  const ctx = React.useContext(VirtuosoMockContext);
   const viewportHeight = usePublisher("viewportHeight");
   const fixedItemHeight = usePublisher("fixedItemHeight");
   const viewportRef = useSize(compose(viewportHeight, (el) => correctItemSize(el, "height")));
-  useEffect(() => {
+  React.useEffect(() => {
     if (ctx) {
       viewportHeight(ctx.viewportHeight);
       fixedItemHeight(ctx.itemHeight);
     }
   }, [ctx, viewportHeight, fixedItemHeight]);
-  return /* @__PURE__ */ jsx("div", { style: viewportStyle, ref: viewportRef, "data-viewport-type": "element", children });
+  return /* @__PURE__ */ React.createElement("div", { style: viewportStyle, ref: viewportRef, "data-viewport-type": "element" }, children);
 };
 const WindowViewport = ({ children }) => {
-  const ctx = useContext(VirtuosoMockContext);
+  const ctx = React.useContext(VirtuosoMockContext);
   const windowViewportRect = usePublisher("windowViewportRect");
   const fixedItemHeight = usePublisher("fixedItemHeight");
   const customScrollParent = useEmitterValue("customScrollParent");
   const viewportRef = useWindowViewportRectRef(windowViewportRect, customScrollParent);
-  useEffect(() => {
+  React.useEffect(() => {
     if (ctx) {
       fixedItemHeight(ctx.itemHeight);
       windowViewportRect({ offsetTop: 0, visibleHeight: ctx.viewportHeight, visibleWidth: 100 });
     }
   }, [ctx, windowViewportRect, fixedItemHeight]);
-  return /* @__PURE__ */ jsx("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window", children });
+  return /* @__PURE__ */ React.createElement("div", { ref: viewportRef, style: viewportStyle, "data-viewport-type": "window" }, children);
 };
-const TableRoot = /* @__PURE__ */ memo(function TableVirtuosoRoot(props) {
+const TableRoot = /* @__PURE__ */ React.memo(function TableVirtuosoRoot(props) {
   const useWindowScroll = useEmitterValue("useWindowScroll");
   const customScrollParent = useEmitterValue("customScrollParent");
   const fixedHeaderHeight = usePublisher("fixedHeaderHeight");
@@ -3719,7 +3707,7 @@ const TableRoot = /* @__PURE__ */ memo(function TableVirtuosoRoot(props) {
   const TheTable = useEmitterValue("TableComponent");
   const TheTHead = useEmitterValue("TableHeadComponent");
   const TheTFoot = useEmitterValue("TableFooterComponent");
-  const theHead = fixedHeaderContent ? createElement(
+  const theHead = fixedHeaderContent ? React.createElement(
     TheTHead,
     {
       key: "TableHead",
@@ -3729,7 +3717,7 @@ const TableRoot = /* @__PURE__ */ memo(function TableVirtuosoRoot(props) {
     },
     fixedHeaderContent()
   ) : null;
-  const theFoot = fixedFooterContent ? createElement(
+  const theFoot = fixedFooterContent ? React.createElement(
     TheTFoot,
     {
       key: "TableFoot",
@@ -3739,11 +3727,11 @@ const TableRoot = /* @__PURE__ */ memo(function TableVirtuosoRoot(props) {
     },
     fixedFooterContent()
   ) : null;
-  return /* @__PURE__ */ jsx(TheScroller, { ...props, children: /* @__PURE__ */ jsx(TheViewport, { children: createElement(TheTable, { style: { borderSpacing: 0 }, ...contextPropIfNotDomElement(TheTable, context) }, [
+  return /* @__PURE__ */ React.createElement(TheScroller, { ...props }, /* @__PURE__ */ React.createElement(TheViewport, null, React.createElement(TheTable, { style: { borderSpacing: 0 }, ...contextPropIfNotDomElement(TheTable, context) }, [
     theHead,
-    /* @__PURE__ */ jsx(Items, {}, "TableBody"),
+    /* @__PURE__ */ React.createElement(Items, { key: "TableBody" }),
     theFoot
-  ]) }) });
+  ])));
 });
 const {
   Component: Table,

package/dist/react-urx/index.d.ts

@@ -27,7 +27,7 @@
  *
  * @packageDocumentation
  */
-import { ComponentType, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import React from 'react';
 import * as u from '../urx';
 import type { Emitter, Publisher, AnySystemSpec, SR, Stream } from '../urx';
 /** @internal */
@@ -86,7 +86,7 @@ export type MethodsFromPropMap<E extends AnySystemSpec, M extends SystemPropsMap
  *
  * @typeParam T the type of the component
  */
-export type RefHandle<T> = T extends ForwardRefExoticComponent<RefAttributes<infer Handle>> ? Handle : never;
+export type RefHandle<T> = T extends React.ForwardRefExoticComponent<React.RefAttributes<infer Handle>> ? Handle : never;
 /**
  * Converts a system spec to React component by mapping the system streams to component properties, events and methods. Returns hooks for querying and modifying
  * the system streams from the component's child components.
@@ -101,9 +101,9 @@ export type RefHandle<T> = T extends ForwardRefExoticComponent<RefAttributes<inf
  *  <hr />
  */
 export declare function systemToComponent<SS extends AnySystemSpec, M extends SystemPropsMap<SS>, S extends SR<SS>, R>(systemSpec: SS, map: M, Root?: R): {
-    Component: ForwardRefExoticComponent<import("react").PropsWithoutRef<{ [K in Extract<keyof M["required"], string>]: M["required"][K] extends string ? ReturnType<SS["constructor"]>[M["required"][K]] extends Observable<infer R_1> ? R_1 : never : never; } & { [K_1 in Extract<keyof M["optional"], string>]?: (M["optional"][K_1] extends string ? ReturnType<SS["constructor"]>[M["optional"][K_1]] extends Observable<infer R_2> ? R_2 : never : never) | undefined; } & { [K_2 in Extract<keyof M["events"], string>]?: (M["events"][K_2] extends string ? ReturnType<SS["constructor"]>[M["events"][K_2]] extends Observable<infer R_3> ? (value: R_3) => void : never : never) | undefined; } & (R extends ComponentType<infer RP> ? RP : {
-        children?: ReactNode;
-    })> & RefAttributes<MethodsFromPropMap<SS, M>>>;
+    Component: React.ForwardRefExoticComponent<React.PropsWithoutRef<{ [K in Extract<keyof M["required"], string>]: M["required"][K] extends string ? ReturnType<SS["constructor"]>[M["required"][K]] extends Observable<infer R_1> ? R_1 : never : never; } & { [K_1 in Extract<keyof M["optional"], string>]?: (M["optional"][K_1] extends string ? ReturnType<SS["constructor"]>[M["optional"][K_1]] extends Observable<infer R_2> ? R_2 : never : never) | undefined; } & { [K_2 in Extract<keyof M["events"], string>]?: (M["events"][K_2] extends string ? ReturnType<SS["constructor"]>[M["events"][K_2]] extends Observable<infer R_3> ? (value: R_3) => void : never : never) | undefined; } & (R extends React.ComponentType<infer RP> ? RP : {
+        children?: React.ReactNode;
+    })> & React.RefAttributes<MethodsFromPropMap<SS, M>>>;
     usePublisher: <K_3 extends keyof S>(key: K_3) => (value: S[K_3] extends u.Stream<infer R_4> ? R_4 : never) => void;
     useEmitterValue: <K_4 extends keyof S, V = S[K_4] extends u.StatefulStream<infer R_5> ? R_5 : never>(key: K_4) => V;
     useEmitter: <K_5 extends keyof S, V_1 = S[K_5] extends u.Stream<infer R_6> ? R_6 : never>(key: K_5, callback: (value: V_1) => void) => void;