@ariakit/react-core 0.2.10 → 0.2.12

package/cjs/__chunks/MCXTUISZ.cjs

@@ -0,0 +1,711 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _ZQAFJQIScjs = require('./ZQAFJQIS.cjs');
+
+
+
+var _CWY2PHPRcjs = require('./CWY2PHPR.cjs');
+
+
+var _BEGWNNXKcjs = require('./BEGWNNXK.cjs');
+
+
+
+
+
+
+
+var _5WLTMVVQcjs = require('./5WLTMVVQ.cjs');
+
+
+
+
+var _72I2GWXFcjs = require('./72I2GWXF.cjs');
+
+// src/collection/collection-renderer.tsx
+
+
+
+
+
+
+
+
+var _react = require('react');
+var _dom = require('@ariakit/core/utils/dom');
+var _misc = require('@ariakit/core/utils/misc');
+var _reactdom = require('react-dom');
+var _jsxruntime = require('react/jsx-runtime');
+var CollectionRendererContext = _react.createContext.call(void 0, null);
+function createTask() {
+  let raf = 0;
+  const run = (cb) => {
+    if (raf)
+      return;
+    raf = requestAnimationFrame(() => {
+      raf = 0;
+      cb();
+    });
+  };
+  const cancel = () => {
+    cancelAnimationFrame(raf);
+    raf = 0;
+  };
+  return { run, cancel };
+}
+function findNearestIndex(items, target, getValue) {
+  let left = 0;
+  let right = getItemsLength(items) - 1;
+  while (left <= right) {
+    const index = (left + right) / 2 | 0;
+    const value = getValue(index);
+    if (value === target)
+      return index;
+    else if (value < target)
+      left = index + 1;
+    else
+      right = index - 1;
+  }
+  if (left > 0)
+    return left - 1;
+  return 0;
+}
+function getItemsLength(items) {
+  return typeof items === "number" ? items : items.length;
+}
+function getItemObject(item) {
+  if (!item || typeof item !== "object") {
+    return { value: item };
+  }
+  return item;
+}
+function getItemId(item, index, baseId) {
+  var _a;
+  _misc.invariant.call(void 0, baseId, "CollectionRenderer must be given an `id` prop.");
+  const defaultId = `${baseId}/${index}`;
+  return (_a = getItemObject(item).id) != null ? _a : defaultId;
+}
+function getItem(items, index) {
+  if (typeof items === "number") {
+    if (index >= items)
+      return null;
+    return {};
+  }
+  const item = items[index];
+  if (!item)
+    return null;
+  if (typeof item === "object")
+    return item;
+  return { value: item };
+}
+function getItemSize(item, horizontal, fallbackElement) {
+  var _a, _b, _c, _d, _e;
+  const itemObject = getItemObject(item);
+  horizontal = itemObject.orientation === "horizontal";
+  const prop = horizontal ? "width" : "height";
+  const style = itemObject.style;
+  if (style) {
+    const size = style[prop];
+    if (typeof size === "number")
+      return size;
+  }
+  const items = itemObject.items;
+  if (items == null ? void 0 : items.length) {
+    const hasSameOrientation = !itemObject.orientation || horizontal && itemObject.orientation === "horizontal" || !horizontal && itemObject.orientation === "vertical";
+    const paddingStart = (_b = (_a = itemObject.paddingStart) != null ? _a : itemObject.padding) != null ? _b : 0;
+    const paddingEnd = (_d = (_c = itemObject.paddingEnd) != null ? _c : itemObject.padding) != null ? _d : 0;
+    const padding = hasSameOrientation ? paddingStart + paddingEnd : 0;
+    const initialSize = ((_e = itemObject.gap) != null ? _e : 0) * (items.length - 1) + padding;
+    if (hasSameOrientation && itemObject.itemSize) {
+      return initialSize + itemObject.itemSize * items.length;
+    }
+    const totalSize = items.reduce(
+      (sum, item2) => sum + getItemSize(item2, horizontal),
+      initialSize
+    );
+    if (totalSize !== initialSize)
+      return totalSize;
+  }
+  const element = fallbackElement !== false ? itemObject.element || fallbackElement : null;
+  if (element == null ? void 0 : element.isConnected) {
+    return element.getBoundingClientRect()[prop];
+  }
+  return 0;
+}
+function getAverageSize(props) {
+  const length = getItemsLength(props.items);
+  let currentIndex = 0;
+  let averageSize = props.estimatedItemSize;
+  const setAverageSize = (size) => {
+    const prevIndex = currentIndex;
+    currentIndex = currentIndex + 1;
+    averageSize = (averageSize * prevIndex + size) / currentIndex;
+  };
+  for (let index = 0; index < length; index += 1) {
+    const item = getItem(props.items, index);
+    const itemId = getItemId(item, index, props.baseId);
+    const itemData = props.data.get(itemId);
+    const fallbackElement = props.elements.get(itemId);
+    const size = getItemSize(item, props.horizontal, fallbackElement);
+    if (size) {
+      setAverageSize(size);
+    } else if (itemData == null ? void 0 : itemData.rendered) {
+      setAverageSize(itemData.end - itemData.start);
+    }
+  }
+  return averageSize;
+}
+function getScrollOffset(scroller, horizontal) {
+  if ("scrollX" in scroller) {
+    return horizontal ? scroller.scrollX : scroller.scrollY;
+  }
+  return horizontal ? scroller.scrollLeft : scroller.scrollTop;
+}
+function getViewport(scroller) {
+  const { defaultView, documentElement } = scroller.ownerDocument;
+  if (scroller === documentElement)
+    return defaultView;
+  return scroller;
+}
+function useScroller(rendererRef) {
+  const [scroller, setScroller] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    const renderer = rendererRef == null ? void 0 : rendererRef.current;
+    if (!renderer)
+      return;
+    const scroller2 = _dom.getScrollingElement.call(void 0, renderer);
+    if (!scroller2)
+      return;
+    setScroller(scroller2);
+  }, [rendererRef]);
+  return scroller;
+}
+function getRendererOffset(renderer, scroller, horizontal) {
+  const win = _dom.getWindow.call(void 0, renderer);
+  const htmlElement = win == null ? void 0 : win.document.documentElement;
+  const rendererRect = renderer.getBoundingClientRect();
+  const rendererOffset = horizontal ? rendererRect.left : rendererRect.top;
+  if (scroller === htmlElement) {
+    const scrollOffset2 = getScrollOffset(win, horizontal);
+    return scrollOffset2 + rendererOffset;
+  }
+  const scrollerRect = scroller.getBoundingClientRect();
+  const scrollerOffset = horizontal ? scrollerRect.left : scrollerRect.top;
+  const scrollOffset = getScrollOffset(scroller, horizontal);
+  return rendererOffset - scrollerOffset + scrollOffset;
+}
+function getOffsets(renderer, scroller, horizontal) {
+  const scrollOffset = getScrollOffset(scroller, horizontal);
+  const rendererOffset = getRendererOffset(renderer, scroller, horizontal);
+  const scrollSize = horizontal ? scroller.clientWidth : scroller.clientHeight;
+  const start = scrollOffset - rendererOffset;
+  const end = start + scrollSize;
+  return { start, end };
+}
+function getItemsEnd(props) {
+  const length = getItemsLength(props.items);
+  const totalPadding = props.paddingStart + props.paddingEnd;
+  if (!length)
+    return totalPadding;
+  const lastIndex = length - 1;
+  const totalGap = lastIndex * props.gap;
+  if (props.itemSize != null) {
+    return length * props.itemSize + totalGap + totalPadding;
+  }
+  const defaultEnd = length * props.estimatedItemSize + totalGap + totalPadding;
+  if (!props.baseId)
+    return defaultEnd;
+  const lastItem = getItem(props.items, lastIndex);
+  const lastItemId = getItemId(lastItem, lastIndex, props.baseId);
+  const lastItemData = props.data.get(lastItemId);
+  if (lastItemData == null ? void 0 : lastItemData.end)
+    return lastItemData.end + props.paddingEnd;
+  if (!Array.isArray(props.items))
+    return defaultEnd;
+  const end = props.items.reduce(
+    (sum, item) => sum + getItemSize(item, props.horizontal, false),
+    0
+  );
+  if (!end)
+    return defaultEnd;
+  return end + totalGap + totalPadding;
+}
+function getData(props) {
+  var _a;
+  const length = getItemsLength(props.items);
+  let nextData;
+  let start = props.paddingStart;
+  const avgSize = getAverageSize(props);
+  for (let index = 0; index < length; index += 1) {
+    const item = getItem(props.items, index);
+    const itemId = getItemId(item, index, props.baseId);
+    const itemData = props.data.get(itemId);
+    const prevRendered = (_a = itemData == null ? void 0 : itemData.rendered) != null ? _a : false;
+    const setSize = (size2, rendered = prevRendered) => {
+      start = start ? start + props.gap : start;
+      const end = start + size2;
+      const nextItemData = { index, rendered, start, end };
+      if (!_misc.shallowEqual.call(void 0, itemData, nextItemData)) {
+        if (!nextData) {
+          nextData = new Map(props.data);
+        }
+        nextData.set(itemId, { index, rendered, start, end });
+      }
+      start = end;
+    };
+    const size = getItemSize(
+      item,
+      props.horizontal,
+      props.elements.get(itemId)
+    );
+    if (size) {
+      setSize(size, true);
+    } else if (itemData == null ? void 0 : itemData.rendered) {
+      setSize(itemData.end - itemData.start, true);
+    } else {
+      setSize(avgSize);
+    }
+  }
+  return nextData;
+}
+function useCollectionRenderer(_a) {
+  var _b = _a, {
+    store,
+    items: itemsProp,
+    initialItems = 0,
+    gap = 0,
+    itemSize,
+    estimatedItemSize = 40,
+    overscan: overscanProp,
+    orientation: orientationProp,
+    padding = 0,
+    paddingStart = padding,
+    paddingEnd = padding,
+    persistentIndices,
+    renderOnScroll = true,
+    renderOnResize = !!renderOnScroll,
+    children: renderItem
+  } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, [
+    "store",
+    "items",
+    "initialItems",
+    "gap",
+    "itemSize",
+    "estimatedItemSize",
+    "overscan",
+    "orientation",
+    "padding",
+    "paddingStart",
+    "paddingEnd",
+    "persistentIndices",
+    "renderOnScroll",
+    "renderOnResize",
+    "children"
+  ]);
+  var _a2, _b2;
+  const context = _react.useContext.call(void 0, _ZQAFJQIScjs.CollectionContext);
+  store = store || context;
+  const items = _BEGWNNXKcjs.useStoreState.call(void 0, store, (state) => itemsProp != null ? itemsProp : state.items) || itemsProp;
+  _misc.invariant.call(void 0, 
+    items != null,
+    process.env.NODE_ENV !== "production" && "CollectionRenderer must be either wrapped in a Collection component or be given an `items` prop."
+  );
+  let parent = _react.useContext.call(void 0, CollectionRendererContext);
+  if (store && (parent == null ? void 0 : parent.store) !== store) {
+    parent = null;
+  }
+  const parentData = parent == null ? void 0 : parent.childrenData;
+  const orientation = (_a2 = orientationProp != null ? orientationProp : parent == null ? void 0 : parent.orientation) != null ? _a2 : "vertical";
+  const overscan = (_b2 = overscanProp != null ? overscanProp : parent == null ? void 0 : parent.overscan) != null ? _b2 : 1;
+  const ref = _react.useRef.call(void 0, null);
+  const baseId = _5WLTMVVQcjs.useId.call(void 0, props.id);
+  const horizontal = orientation === "horizontal";
+  const elements = _react.useMemo.call(void 0, () => /* @__PURE__ */ new Map(), []);
+  const [elementsUpdated, updateElements] = _5WLTMVVQcjs.useForceUpdate.call(void 0, );
+  const [defaultVisibleIndices, setVisibleIndices] = _react.useState.call(void 0, () => {
+    if (!initialItems)
+      return [];
+    const length = getItemsLength(items);
+    const initialLength = Math.min(length, Math.abs(initialItems));
+    return Array.from({ length: initialLength }, (_, index) => {
+      if (initialItems < 0)
+        return length - index - 1;
+      return index;
+    });
+  });
+  const visibleIndices = _react.useMemo.call(void 0, () => {
+    if (!persistentIndices)
+      return defaultVisibleIndices;
+    const nextIndices = defaultVisibleIndices.slice();
+    persistentIndices.forEach((index) => {
+      if (index < 0)
+        return;
+      if (nextIndices.includes(index))
+        return;
+      nextIndices.push(index);
+    });
+    nextIndices.sort((a, b) => a - b);
+    if (_misc.shallowEqual.call(void 0, defaultVisibleIndices, nextIndices)) {
+      return defaultVisibleIndices;
+    }
+    return nextIndices;
+  }, [defaultVisibleIndices, persistentIndices]);
+  const [data, setData] = _react.useState.call(void 0, () => {
+    if (!baseId)
+      return /* @__PURE__ */ new Map();
+    const data2 = (parentData == null ? void 0 : parentData.get(baseId)) || /* @__PURE__ */ new Map();
+    if (itemSize != null)
+      return data2;
+    if (!items)
+      return data2;
+    const nextData = getData({
+      baseId,
+      items,
+      data: data2,
+      gap,
+      elements,
+      horizontal,
+      paddingStart,
+      itemSize,
+      estimatedItemSize
+    });
+    return nextData || data2;
+  });
+  const totalSize = _react.useMemo.call(void 0, () => {
+    return getItemsEnd({
+      baseId,
+      items,
+      data,
+      gap,
+      horizontal,
+      itemSize,
+      estimatedItemSize,
+      paddingStart,
+      paddingEnd
+    });
+  }, [
+    baseId,
+    items,
+    data,
+    gap,
+    horizontal,
+    itemSize,
+    estimatedItemSize,
+    paddingStart,
+    paddingEnd
+  ]);
+  _react.useEffect.call(void 0, () => {
+    if (!baseId)
+      return;
+    parentData == null ? void 0 : parentData.set(baseId, data);
+  }, [baseId, parentData, data]);
+  _react.useEffect.call(void 0, () => {
+    if (itemSize != null)
+      return;
+    if (!baseId)
+      return;
+    if (!items)
+      return;
+    const nextData = getData({
+      baseId,
+      items,
+      data,
+      gap,
+      elements,
+      horizontal,
+      paddingStart,
+      itemSize,
+      estimatedItemSize
+    });
+    if (nextData) {
+      setData(nextData);
+    }
+  }, [
+    elementsUpdated,
+    itemSize,
+    baseId,
+    items,
+    data,
+    gap,
+    elements,
+    horizontal,
+    paddingStart,
+    estimatedItemSize
+  ]);
+  const scroller = useScroller(items ? ref : null);
+  const offsetsRef = _react.useRef.call(void 0, { start: 0, end: 0 });
+  const processVisibleIndices = _react.useCallback.call(void 0, () => {
+    const offsets = offsetsRef.current;
+    if (!items)
+      return;
+    if (!baseId)
+      return;
+    if (!offsets.end)
+      return;
+    if (!data.size && !itemSize)
+      return;
+    const length = getItemsLength(items);
+    const getItemOffset = (index, prop = "start") => {
+      var _a3;
+      if (itemSize) {
+        const start2 = itemSize * index + gap * index + paddingStart;
+        if (prop === "start")
+          return start2;
+        return start2 + itemSize;
+      }
+      const item = getItem(items, index);
+      const itemId = getItemId(item, index, baseId);
+      const itemData = data.get(itemId);
+      return (_a3 = itemData == null ? void 0 : itemData[prop]) != null ? _a3 : 0;
+    };
+    const initialStart = findNearestIndex(items, offsets.start, getItemOffset);
+    let initialEnd = initialStart;
+    while (initialEnd < length && getItemOffset(initialEnd) < offsets.end) {
+      initialEnd += 1;
+    }
+    const finalOverscan = initialEnd - initialStart ? overscan : 0;
+    const start = Math.max(initialStart - finalOverscan, 0);
+    const end = Math.min(initialEnd + finalOverscan, length);
+    const indices = Array.from(
+      { length: end - start },
+      (_, index) => index + start
+    );
+    setVisibleIndices((prevIndices) => {
+      if (_misc.shallowEqual.call(void 0, prevIndices, indices))
+        return prevIndices;
+      return indices;
+    });
+  }, [
+    elementsUpdated,
+    items,
+    baseId,
+    data,
+    itemSize,
+    gap,
+    paddingStart,
+    overscan
+  ]);
+  _react.useEffect.call(void 0, processVisibleIndices, [processVisibleIndices]);
+  const processVisibleIndicesEvent = _5WLTMVVQcjs.useEvent.call(void 0, processVisibleIndices);
+  _react.useEffect.call(void 0, () => {
+    const renderer = ref.current;
+    if (!renderer)
+      return;
+    if (!scroller)
+      return;
+    offsetsRef.current = getOffsets(renderer, scroller, horizontal);
+    processVisibleIndicesEvent();
+  }, [scroller, horizontal, processVisibleIndicesEvent]);
+  const mayRenderOnScroll = !!renderOnScroll;
+  const renderOnScrollProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, renderOnScroll);
+  _react.useEffect.call(void 0, () => {
+    if (!mayRenderOnScroll)
+      return;
+    const renderer = ref.current;
+    if (!renderer)
+      return;
+    if (!scroller)
+      return;
+    const viewport = getViewport(scroller);
+    if (!viewport)
+      return;
+    const task = createTask();
+    const onScroll = (event) => {
+      task.run(() => {
+        if (!renderOnScrollProp(event))
+          return;
+        offsetsRef.current = getOffsets(renderer, scroller, horizontal);
+        processVisibleIndicesEvent();
+      });
+    };
+    viewport.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      task.cancel();
+      viewport.removeEventListener("scroll", onScroll);
+    };
+  }, [
+    mayRenderOnScroll,
+    scroller,
+    renderOnScrollProp,
+    horizontal,
+    processVisibleIndicesEvent
+  ]);
+  const mayRenderOnResize = !!renderOnResize;
+  const renderOnResizeProp = _5WLTMVVQcjs.useBooleanEvent.call(void 0, renderOnResize);
+  _react.useEffect.call(void 0, () => {
+    if (!mayRenderOnResize)
+      return;
+    const renderer = ref.current;
+    if (!renderer)
+      return;
+    if (!scroller)
+      return;
+    const viewport = getViewport(scroller);
+    if (!viewport)
+      return;
+    const task = createTask();
+    if (viewport === scroller) {
+      if (typeof ResizeObserver !== "function")
+        return;
+      let firstRun = true;
+      const observer = new ResizeObserver(() => {
+        if (firstRun) {
+          firstRun = false;
+          return;
+        }
+        task.run(() => {
+          if (!renderOnResizeProp(scroller))
+            return;
+          offsetsRef.current = getOffsets(renderer, scroller, horizontal);
+          processVisibleIndicesEvent();
+        });
+      });
+      observer.observe(scroller);
+      return () => {
+        task.cancel();
+        observer.disconnect();
+      };
+    }
+    const onResize = () => {
+      task.run(() => {
+        if (!renderOnResizeProp(scroller))
+          return;
+        offsetsRef.current = getOffsets(renderer, scroller, horizontal);
+        processVisibleIndicesEvent();
+      });
+    };
+    viewport.addEventListener("resize", onResize, { passive: true });
+    return () => {
+      task.cancel();
+      viewport.removeEventListener("resize", onResize);
+    };
+  }, [
+    mayRenderOnResize,
+    scroller,
+    renderOnResizeProp,
+    horizontal,
+    processVisibleIndicesEvent
+  ]);
+  _react.useEffect.call(void 0, () => {
+    if (typeof IntersectionObserver !== "function")
+      return;
+    const renderer = ref.current;
+    if (!renderer)
+      return;
+    if (!scroller)
+      return;
+    const viewport = getViewport(scroller);
+    if (!viewport)
+      return;
+    const observer = new IntersectionObserver(
+      () => {
+        offsetsRef.current = getOffsets(renderer, scroller, horizontal);
+        processVisibleIndicesEvent();
+      },
+      { root: scroller === viewport ? scroller : null }
+    );
+    observer.observe(renderer);
+    return () => {
+      observer.disconnect();
+    };
+  }, [scroller, processVisibleIndicesEvent]);
+  const elementObserver = _react.useMemo.call(void 0, () => {
+    if (typeof ResizeObserver !== "function")
+      return;
+    return new ResizeObserver(() => {
+      _reactdom.flushSync.call(void 0, updateElements);
+    });
+  }, [updateElements]);
+  const itemRef = _react.useCallback.call(void 0, 
+    (element) => {
+      if (!element)
+        return;
+      if (itemSize)
+        return;
+      updateElements();
+      elements.set(element.id, element);
+      elementObserver == null ? void 0 : elementObserver.observe(element);
+    },
+    [itemSize, elements, updateElements, elementObserver]
+  );
+  const getItemProps = _react.useCallback.call(void 0, 
+    (item, index) => {
+      var _a3, _b3;
+      const itemId = getItemId(item, index, baseId);
+      const offset = itemSize ? paddingStart + itemSize * index + gap * index : (_b3 = (_a3 = data.get(itemId)) == null ? void 0 : _a3.start) != null ? _b3 : 0;
+      const baseItemProps = {
+        id: itemId,
+        ref: itemRef,
+        index,
+        style: {
+          position: "absolute",
+          left: horizontal ? offset : 0,
+          top: horizontal ? 0 : offset
+        }
+      };
+      if (itemSize) {
+        baseItemProps.style[horizontal ? "width" : "height"] = itemSize;
+      }
+      if (item == null)
+        return baseItemProps;
+      const itemProps = getItemObject(item);
+      return _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {}, itemProps), baseItemProps), {
+        style: _72I2GWXFcjs.__spreadValues.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {}, itemProps.style), baseItemProps.style)
+      });
+    },
+    [baseId, data, itemSize, paddingStart, gap, horizontal, itemRef]
+  );
+  const itemsProps = _react.useMemo.call(void 0, () => {
+    return visibleIndices.map((index) => {
+      if (index < 0)
+        return;
+      const item = getItem(items, index);
+      if (!item)
+        return;
+      return getItemProps(item, index);
+    }).filter((value) => value != null);
+  }, [items, visibleIndices, getItemProps]);
+  const children = itemsProps == null ? void 0 : itemsProps.map((itemProps) => {
+    return renderItem == null ? void 0 : renderItem(itemProps);
+  });
+  const styleProp = props.style;
+  const sizeProperty = horizontal ? "width" : "height";
+  const style = _react.useMemo.call(void 0, 
+    () => _72I2GWXFcjs.__spreadValues.call(void 0, {
+      flex: "none",
+      position: "relative",
+      [sizeProperty]: totalSize
+    }, styleProp),
+    [styleProp, sizeProperty, totalSize]
+  );
+  const childrenData = _react.useMemo.call(void 0, () => /* @__PURE__ */ new Map(), []);
+  const providerValue = _react.useMemo.call(void 0, 
+    () => ({ store, orientation, overscan, childrenData }),
+    [store, orientation, overscan, childrenData]
+  );
+  props = _5WLTMVVQcjs.useWrapElement.call(void 0, 
+    props,
+    (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, CollectionRendererContext.Provider, { value: providerValue, children: element }),
+    [providerValue]
+  );
+  props = _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {
+    id: baseId
+  }, props), {
+    style,
+    ref: _5WLTMVVQcjs.useMergeRefs.call(void 0, ref, props.ref)
+  });
+  return _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {}, props), { children });
+}
+var CollectionRenderer = _CWY2PHPRcjs.forwardRef.call(void 0, function CollectionRenderer2(props) {
+  const htmlProps = useCollectionRenderer(props);
+  return _CWY2PHPRcjs.createElement.call(void 0, "div", htmlProps);
+});
+var getCollectionRendererItem = getItem;
+var getCollectionRendererItemId = getItemId;
+
+
+
+
+
+
+exports.useCollectionRenderer = useCollectionRenderer; exports.CollectionRenderer = CollectionRenderer; exports.getCollectionRendererItem = getCollectionRendererItem; exports.getCollectionRendererItemId = getCollectionRendererItemId;