amis-ui 2.6.0 → 2.7.0

package/esm/node_modules/rc-overflow/es/Overflow.js

@@ -0,0 +1,341 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import _extends from '../../@babel/runtime/helpers/esm/extends.js';
+import _objectSpread2 from '../../@babel/runtime/helpers/esm/objectSpread2.js';
+import _slicedToArray from '../../@babel/runtime/helpers/esm/slicedToArray.js';
+import _objectWithoutProperties from '../../@babel/runtime/helpers/esm/objectWithoutProperties.js';
+import * as React from 'react';
+import { useState, useMemo, useCallback } from 'react';
+import cx from 'classnames';
+import ResizeObserver from '../../rc-resize-observer/es/index.js';
+import useLayoutEffect from '../../rc-util/es/hooks/useLayoutEffect.js';
+import Item from './Item.js';
+import { useBatchFrameState } from './hooks/useBatchFrameState.js';
+import RawItem from './RawItem.js';
+
+var _excluded = ["prefixCls", "data", "renderItem", "renderRawItem", "itemKey", "itemWidth", "ssr", "style", "className", "maxCount", "renderRest", "renderRawRest", "suffix", "component", "itemComponent", "onVisibleChange"];
+var OverflowContext = /*#__PURE__*/React.createContext(null);
+var RESPONSIVE = 'responsive';
+var INVALIDATE = 'invalidate';
+
+function defaultRenderRest(omittedItems) {
+  return "+ ".concat(omittedItems.length, " ...");
+}
+
+function Overflow(props, ref) {
+  var _props$prefixCls = props.prefixCls,
+      prefixCls = _props$prefixCls === void 0 ? 'rc-overflow' : _props$prefixCls,
+      _props$data = props.data,
+      data = _props$data === void 0 ? [] : _props$data,
+      renderItem = props.renderItem,
+      renderRawItem = props.renderRawItem,
+      itemKey = props.itemKey,
+      _props$itemWidth = props.itemWidth,
+      itemWidth = _props$itemWidth === void 0 ? 10 : _props$itemWidth,
+      ssr = props.ssr,
+      style = props.style,
+      className = props.className,
+      maxCount = props.maxCount,
+      renderRest = props.renderRest,
+      renderRawRest = props.renderRawRest,
+      suffix = props.suffix,
+      _props$component = props.component,
+      Component = _props$component === void 0 ? 'div' : _props$component,
+      itemComponent = props.itemComponent,
+      onVisibleChange = props.onVisibleChange,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var createUseState = useBatchFrameState();
+  var fullySSR = ssr === 'full';
+
+  var _createUseState = createUseState(null),
+      _createUseState2 = _slicedToArray(_createUseState, 2),
+      containerWidth = _createUseState2[0],
+      setContainerWidth = _createUseState2[1];
+
+  var mergedContainerWidth = containerWidth || 0;
+
+  var _createUseState3 = createUseState(new Map()),
+      _createUseState4 = _slicedToArray(_createUseState3, 2),
+      itemWidths = _createUseState4[0],
+      setItemWidths = _createUseState4[1];
+
+  var _createUseState5 = createUseState(0),
+      _createUseState6 = _slicedToArray(_createUseState5, 2),
+      prevRestWidth = _createUseState6[0],
+      setPrevRestWidth = _createUseState6[1];
+
+  var _createUseState7 = createUseState(0),
+      _createUseState8 = _slicedToArray(_createUseState7, 2),
+      restWidth = _createUseState8[0],
+      setRestWidth = _createUseState8[1];
+
+  var _createUseState9 = createUseState(0),
+      _createUseState10 = _slicedToArray(_createUseState9, 2),
+      suffixWidth = _createUseState10[0],
+      setSuffixWidth = _createUseState10[1];
+
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      suffixFixedStart = _useState2[0],
+      setSuffixFixedStart = _useState2[1];
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      displayCount = _useState4[0],
+      setDisplayCount = _useState4[1];
+
+  var mergedDisplayCount = React.useMemo(function () {
+    if (displayCount === null && fullySSR) {
+      return Number.MAX_SAFE_INTEGER;
+    }
+
+    return displayCount || 0;
+  }, [displayCount, containerWidth]);
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      restReady = _useState6[0],
+      setRestReady = _useState6[1];
+
+  var itemPrefixCls = "".concat(prefixCls, "-item"); // Always use the max width to avoid blink
+
+  var mergedRestWidth = Math.max(prevRestWidth, restWidth); // ================================= Data =================================
+
+  var isResponsive = maxCount === RESPONSIVE;
+  var shouldResponsive = data.length && isResponsive;
+  var invalidate = maxCount === INVALIDATE;
+  /**
+   * When is `responsive`, we will always render rest node to get the real width of it for calculation
+   */
+
+  var showRest = shouldResponsive || typeof maxCount === 'number' && data.length > maxCount;
+  var mergedData = useMemo(function () {
+    var items = data;
+
+    if (shouldResponsive) {
+      if (containerWidth === null && fullySSR) {
+        items = data;
+      } else {
+        items = data.slice(0, Math.min(data.length, mergedContainerWidth / itemWidth));
+      }
+    } else if (typeof maxCount === 'number') {
+      items = data.slice(0, maxCount);
+    }
+
+    return items;
+  }, [data, itemWidth, containerWidth, maxCount, shouldResponsive]);
+  var omittedItems = useMemo(function () {
+    if (shouldResponsive) {
+      return data.slice(mergedDisplayCount + 1);
+    }
+
+    return data.slice(mergedData.length);
+  }, [data, mergedData, shouldResponsive, mergedDisplayCount]); // ================================= Item =================================
+
+  var getKey = useCallback(function (item, index) {
+    var _ref;
+
+    if (typeof itemKey === 'function') {
+      return itemKey(item);
+    }
+
+    return (_ref = itemKey && (item === null || item === void 0 ? void 0 : item[itemKey])) !== null && _ref !== void 0 ? _ref : index;
+  }, [itemKey]);
+  var mergedRenderItem = useCallback(renderItem || function (item) {
+    return item;
+  }, [renderItem]);
+
+  function updateDisplayCount(count, suffixFixedStartVal, notReady) {
+    // React 18 will sync render even when the value is same in some case.
+    // We take `mergedData` as deps which may cause dead loop if it's dynamic generate.
+    // ref: https://github.com/ant-design/ant-design/issues/36559
+    if (displayCount === count && (suffixFixedStartVal === undefined || suffixFixedStartVal === suffixFixedStart)) {
+      return;
+    }
+
+    setDisplayCount(count);
+
+    if (!notReady) {
+      setRestReady(count < data.length - 1);
+      onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(count);
+    }
+
+    if (suffixFixedStartVal !== undefined) {
+      setSuffixFixedStart(suffixFixedStartVal);
+    }
+  } // ================================= Size =================================
+
+
+  function onOverflowResize(_, element) {
+    setContainerWidth(element.clientWidth);
+  }
+
+  function registerSize(key, width) {
+    setItemWidths(function (origin) {
+      var clone = new Map(origin);
+
+      if (width === null) {
+        clone.delete(key);
+      } else {
+        clone.set(key, width);
+      }
+
+      return clone;
+    });
+  }
+
+  function registerOverflowSize(_, width) {
+    setRestWidth(width);
+    setPrevRestWidth(restWidth);
+  }
+
+  function registerSuffixSize(_, width) {
+    setSuffixWidth(width);
+  } // ================================ Effect ================================
+
+
+  function getItemWidth(index) {
+    return itemWidths.get(getKey(mergedData[index], index));
+  }
+
+  useLayoutEffect(function () {
+    if (mergedContainerWidth && mergedRestWidth && mergedData) {
+      var totalWidth = suffixWidth;
+      var len = mergedData.length;
+      var lastIndex = len - 1; // When data count change to 0, reset this since not loop will reach
+
+      if (!len) {
+        updateDisplayCount(0, null);
+        return;
+      }
+
+      for (var i = 0; i < len; i += 1) {
+        var currentItemWidth = getItemWidth(i); // Fully will always render
+
+        if (fullySSR) {
+          currentItemWidth = currentItemWidth || 0;
+        } // Break since data not ready
+
+
+        if (currentItemWidth === undefined) {
+          updateDisplayCount(i - 1, undefined, true);
+          break;
+        } // Find best match
+
+
+        totalWidth += currentItemWidth;
+
+        if ( // Only one means `totalWidth` is the final width
+        lastIndex === 0 && totalWidth <= mergedContainerWidth || // Last two width will be the final width
+        i === lastIndex - 1 && totalWidth + getItemWidth(lastIndex) <= mergedContainerWidth) {
+          // Additional check if match the end
+          updateDisplayCount(lastIndex, null);
+          break;
+        } else if (totalWidth + mergedRestWidth > mergedContainerWidth) {
+          // Can not hold all the content to show rest
+          updateDisplayCount(i - 1, totalWidth - currentItemWidth - suffixWidth + restWidth);
+          break;
+        }
+      }
+
+      if (suffix && getItemWidth(0) + suffixWidth > mergedContainerWidth) {
+        setSuffixFixedStart(null);
+      }
+    }
+  }, [mergedContainerWidth, itemWidths, restWidth, suffixWidth, getKey, mergedData]); // ================================ Render ================================
+
+  var displayRest = restReady && !!omittedItems.length;
+  var suffixStyle = {};
+
+  if (suffixFixedStart !== null && shouldResponsive) {
+    suffixStyle = {
+      position: 'absolute',
+      left: suffixFixedStart,
+      top: 0
+    };
+  }
+
+  var itemSharedProps = {
+    prefixCls: itemPrefixCls,
+    responsive: shouldResponsive,
+    component: itemComponent,
+    invalidate: invalidate
+  }; // >>>>> Choice render fun by `renderRawItem`
+
+  var internalRenderItemNode = renderRawItem ? function (item, index) {
+    var key = getKey(item, index);
+    return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
+      key: key,
+      value: _objectSpread2(_objectSpread2({}, itemSharedProps), {}, {
+        order: index,
+        item: item,
+        itemKey: key,
+        registerSize: registerSize,
+        display: index <= mergedDisplayCount
+      })
+    }, renderRawItem(item, index));
+  } : function (item, index) {
+    var key = getKey(item, index);
+    return /*#__PURE__*/React.createElement(Item, _extends({}, itemSharedProps, {
+      order: index,
+      key: key,
+      item: item,
+      renderItem: mergedRenderItem,
+      itemKey: key,
+      registerSize: registerSize,
+      display: index <= mergedDisplayCount
+    }));
+  }; // >>>>> Rest node
+
+  var restNode;
+  var restContextProps = {
+    order: displayRest ? mergedDisplayCount : Number.MAX_SAFE_INTEGER,
+    className: "".concat(itemPrefixCls, "-rest"),
+    registerSize: registerOverflowSize,
+    display: displayRest
+  };
+
+  if (!renderRawRest) {
+    var mergedRenderRest = renderRest || defaultRenderRest;
+    restNode = /*#__PURE__*/React.createElement(Item, _extends({}, itemSharedProps, restContextProps), typeof mergedRenderRest === 'function' ? mergedRenderRest(omittedItems) : mergedRenderRest);
+  } else if (renderRawRest) {
+    restNode = /*#__PURE__*/React.createElement(OverflowContext.Provider, {
+      value: _objectSpread2(_objectSpread2({}, itemSharedProps), restContextProps)
+    }, renderRawRest(omittedItems));
+  }
+
+  var overflowNode = /*#__PURE__*/React.createElement(Component, _extends({
+    className: cx(!invalidate && prefixCls, className),
+    style: style,
+    ref: ref
+  }, restProps), mergedData.map(internalRenderItemNode), showRest ? restNode : null, suffix && /*#__PURE__*/React.createElement(Item, _extends({}, itemSharedProps, {
+    responsive: isResponsive,
+    responsiveDisabled: !shouldResponsive,
+    order: mergedDisplayCount,
+    className: "".concat(itemPrefixCls, "-suffix"),
+    registerSize: registerSuffixSize,
+    display: true,
+    style: suffixStyle
+  }), suffix));
+
+  if (isResponsive) {
+    overflowNode = /*#__PURE__*/React.createElement(ResizeObserver, {
+      onResize: onOverflowResize,
+      disabled: !shouldResponsive
+    }, overflowNode);
+  }
+
+  return overflowNode;
+}
+
+var ForwardOverflow = /*#__PURE__*/React.forwardRef(Overflow);
+ForwardOverflow.displayName = 'Overflow';
+ForwardOverflow.Item = RawItem;
+ForwardOverflow.RESPONSIVE = RESPONSIVE;
+ForwardOverflow.INVALIDATE = INVALIDATE; // Convert to generic type
+
+export { OverflowContext, ForwardOverflow as default };

package/esm/node_modules/rc-overflow/es/RawItem.js

@@ -0,0 +1,48 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import _extends from '../../@babel/runtime/helpers/esm/extends.js';
+import _objectWithoutProperties from '../../@babel/runtime/helpers/esm/objectWithoutProperties.js';
+import * as React from 'react';
+import cx from 'classnames';
+import Item from './Item.js';
+import { OverflowContext } from './Overflow.js';
+
+var _excluded = ["component"],
+    _excluded2 = ["className"],
+    _excluded3 = ["className"];
+
+var InternalRawItem = function InternalRawItem(props, ref) {
+  var context = React.useContext(OverflowContext); // Render directly when context not provided
+
+  if (!context) {
+    var _props$component = props.component,
+        Component = _props$component === void 0 ? 'div' : _props$component,
+        _restProps = _objectWithoutProperties(props, _excluded);
+
+    return /*#__PURE__*/React.createElement(Component, _extends({}, _restProps, {
+      ref: ref
+    }));
+  }
+
+  var contextClassName = context.className,
+      restContext = _objectWithoutProperties(context, _excluded2);
+
+  var className = props.className,
+      restProps = _objectWithoutProperties(props, _excluded3); // Do not pass context to sub item to avoid multiple measure
+
+
+  return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
+    value: null
+  }, /*#__PURE__*/React.createElement(Item, _extends({
+    ref: ref,
+    className: cx(contextClassName, className)
+  }, restContext, restProps)));
+};
+
+var RawItem = /*#__PURE__*/React.forwardRef(InternalRawItem);
+RawItem.displayName = 'RawItem';
+
+export { RawItem as default };

package/esm/node_modules/rc-overflow/es/hooks/useBatchFrameState.js

@@ -0,0 +1,51 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import _slicedToArray from '../../../@babel/runtime/helpers/esm/slicedToArray.js';
+import { useRef } from 'react';
+import wrapperRaf from '../../../rc-util/es/raf.js';
+import useSafeState from '../../../rc-util/es/hooks/useState.js';
+
+/**
+ * State generate. Return a `setState` but it will flush all state with one render to save perf.
+ * This is not a realization of `unstable_batchedUpdates`.
+ */
+
+function useBatchFrameState() {
+  var _useState = useSafeState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      forceUpdate = _useState2[1];
+
+  var statesRef = useRef([]);
+  var walkingIndex = 0;
+  var beforeFrameId = 0;
+
+  function createState(defaultValue) {
+    var myIndex = walkingIndex;
+    walkingIndex += 1; // Fill value if not exist yet
+
+    if (statesRef.current.length < myIndex + 1) {
+      statesRef.current[myIndex] = defaultValue;
+    } // Return filled as `setState`
+
+
+    var value = statesRef.current[myIndex];
+
+    function setValue(val) {
+      statesRef.current[myIndex] = typeof val === 'function' ? val(statesRef.current[myIndex]) : val;
+      wrapperRaf.cancel(beforeFrameId); // Flush with batch
+
+      beforeFrameId = wrapperRaf(function () {
+        forceUpdate({}, true);
+      });
+    }
+
+    return [value, setValue];
+  }
+
+  return createState;
+}
+
+export { useBatchFrameState };

package/esm/node_modules/rc-overflow/es/index.js

@@ -0,0 +1,7 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import ForwardOverflow from './Overflow.js';
+export { default } from './Overflow.js';

package/esm/node_modules/rc-resize-observer/es/Collection.js

@@ -0,0 +1,41 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import * as React from 'react';
+
+var CollectionContext = /*#__PURE__*/React.createContext(null);
+/**
+ * Collect all the resize event from children ResizeObserver
+ */
+
+function Collection(_ref) {
+  var children = _ref.children,
+      onBatchResize = _ref.onBatchResize;
+  var resizeIdRef = React.useRef(0);
+  var resizeInfosRef = React.useRef([]);
+  var onCollectionResize = React.useContext(CollectionContext);
+  var onResize = React.useCallback(function (size, element, data) {
+    resizeIdRef.current += 1;
+    var currentId = resizeIdRef.current;
+    resizeInfosRef.current.push({
+      size: size,
+      element: element,
+      data: data
+    });
+    Promise.resolve().then(function () {
+      if (currentId === resizeIdRef.current) {
+        onBatchResize === null || onBatchResize === void 0 ? void 0 : onBatchResize(resizeInfosRef.current);
+        resizeInfosRef.current = [];
+      }
+    }); // Continue bubbling if parent exist
+
+    onCollectionResize === null || onCollectionResize === void 0 ? void 0 : onCollectionResize(size, element, data);
+  }, [onBatchResize, onCollectionResize]);
+  return /*#__PURE__*/React.createElement(CollectionContext.Provider, {
+    value: onResize
+  }, children);
+}
+
+export { Collection, CollectionContext };

package/esm/node_modules/rc-resize-observer/es/SingleObserver/DomWrapper.js

@@ -0,0 +1,37 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import _classCallCheck from '../../../@babel/runtime/helpers/esm/classCallCheck.js';
+import _createClass from '../../../@babel/runtime/helpers/esm/createClass.js';
+import _inherits from '../../../@babel/runtime/helpers/esm/inherits.js';
+import _createSuper from '../../../@babel/runtime/helpers/esm/createSuper.js';
+import * as React from 'react';
+
+/**
+ * Fallback to findDOMNode if origin ref do not provide any dom element
+ */
+
+var DomWrapper = /*#__PURE__*/function (_React$Component) {
+  _inherits(DomWrapper, _React$Component);
+
+  var _super = _createSuper(DomWrapper);
+
+  function DomWrapper() {
+    _classCallCheck(this, DomWrapper);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(DomWrapper, [{
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return DomWrapper;
+}(React.Component);
+
+export { DomWrapper as default };

package/esm/node_modules/rc-resize-observer/es/SingleObserver/index.js

@@ -0,0 +1,108 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import _objectSpread2 from '../../../@babel/runtime/helpers/esm/objectSpread2.js';
+import { supportRef, composeRef } from '../../../rc-util/es/ref.js';
+import * as React from 'react';
+import findDOMNode from '../../../rc-util/es/Dom/findDOMNode.js';
+import { observe, unobserve } from '../utils/observerUtil.js';
+import DomWrapper from './DomWrapper.js';
+import { CollectionContext } from '../Collection.js';
+
+function SingleObserver(props) {
+  var children = props.children,
+      disabled = props.disabled;
+  var elementRef = React.useRef(null);
+  var wrapperRef = React.useRef(null);
+  var onCollectionResize = React.useContext(CollectionContext); // =========================== Children ===========================
+
+  var isRenderProps = typeof children === 'function';
+  var mergedChildren = isRenderProps ? children(elementRef) : children; // ============================= Size =============================
+
+  var sizeRef = React.useRef({
+    width: -1,
+    height: -1,
+    offsetWidth: -1,
+    offsetHeight: -1
+  }); // ============================= Ref ==============================
+
+  var canRef = !isRenderProps && /*#__PURE__*/React.isValidElement(mergedChildren) && supportRef(mergedChildren);
+  var originRef = canRef ? mergedChildren.ref : null;
+  var mergedRef = React.useMemo(function () {
+    return composeRef(originRef, elementRef);
+  }, [originRef, elementRef]); // =========================== Observe ============================
+
+  var propsRef = React.useRef(props);
+  propsRef.current = props; // Handler
+
+  var onInternalResize = React.useCallback(function (target) {
+    var _propsRef$current = propsRef.current,
+        onResize = _propsRef$current.onResize,
+        data = _propsRef$current.data;
+
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+        width = _target$getBoundingCl.width,
+        height = _target$getBoundingCl.height;
+
+    var offsetWidth = target.offsetWidth,
+        offsetHeight = target.offsetHeight;
+    /**
+     * Resize observer trigger when content size changed.
+     * In most case we just care about element size,
+     * let's use `boundary` instead of `contentRect` here to avoid shaking.
+     */
+
+    var fixedWidth = Math.floor(width);
+    var fixedHeight = Math.floor(height);
+
+    if (sizeRef.current.width !== fixedWidth || sizeRef.current.height !== fixedHeight || sizeRef.current.offsetWidth !== offsetWidth || sizeRef.current.offsetHeight !== offsetHeight) {
+      var size = {
+        width: fixedWidth,
+        height: fixedHeight,
+        offsetWidth: offsetWidth,
+        offsetHeight: offsetHeight
+      };
+      sizeRef.current = size; // IE is strange, right?
+
+      var mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
+      var mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
+
+      var sizeInfo = _objectSpread2(_objectSpread2({}, size), {}, {
+        offsetWidth: mergedOffsetWidth,
+        offsetHeight: mergedOffsetHeight
+      }); // Let collection know what happened
+
+
+      onCollectionResize === null || onCollectionResize === void 0 ? void 0 : onCollectionResize(sizeInfo, target, data);
+
+      if (onResize) {
+        // defer the callback but not defer to next frame
+        Promise.resolve().then(function () {
+          onResize(sizeInfo, target);
+        });
+      }
+    }
+  }, []); // Dynamic observe
+
+  React.useEffect(function () {
+    var currentElement = findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current);
+
+    if (currentElement && !disabled) {
+      observe(currentElement, onInternalResize);
+    }
+
+    return function () {
+      return unobserve(currentElement, onInternalResize);
+    };
+  }, [elementRef.current, disabled]); // ============================ Render ============================
+
+  return /*#__PURE__*/React.createElement(DomWrapper, {
+    ref: wrapperRef
+  }, canRef ? /*#__PURE__*/React.cloneElement(mergedChildren, {
+    ref: mergedRef
+  }) : mergedChildren);
+}
+
+export { SingleObserver as default };

package/esm/node_modules/rc-resize-observer/es/index.js

@@ -0,0 +1,37 @@
+/**
+ * amis-ui v2.7.0
+ * Copyright 2018-2023 fex
+ */
+
+import _extends from '../../@babel/runtime/helpers/esm/extends.js';
+import * as React from 'react';
+import toArray from '../../rc-util/es/Children/toArray.js';
+import { warning } from '../../rc-util/es/warning.js';
+import SingleObserver from './SingleObserver/index.js';
+import { Collection } from './Collection.js';
+
+var INTERNAL_PREFIX_KEY = 'rc-observer-key';
+
+function ResizeObserver(props) {
+  var children = props.children;
+  var childNodes = typeof children === 'function' ? [children] : toArray(children);
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (childNodes.length > 1) {
+      warning(false, 'Find more than one child node with `children` in ResizeObserver. Please use ResizeObserver.Collection instead.');
+    } else if (childNodes.length === 0) {
+      warning(false, '`children` of ResizeObserver is empty. Nothing is in observe.');
+    }
+  }
+
+  return childNodes.map(function (child, index) {
+    var key = (child === null || child === void 0 ? void 0 : child.key) || "".concat(INTERNAL_PREFIX_KEY, "-").concat(index);
+    return /*#__PURE__*/React.createElement(SingleObserver, _extends({}, props, {
+      key: key
+    }), child);
+  });
+}
+
+ResizeObserver.Collection = Collection;
+
+export { ResizeObserver as default };