function useMasonry(_ref) {
    var positioner = _ref.positioner,
      resizeObserver = _ref.resizeObserver,
      items = _ref.items,
      _ref$as = _ref.as,
      ContainerComponent = _ref$as === void 0 ? 'div' : _ref$as,
      id = _ref.id,
      className = _ref.className,
      style = _ref.style,
      _ref$role = _ref.role,
      role = _ref$role === void 0 ? 'grid' : _ref$role,
      _ref$tabIndex = _ref.tabIndex,
      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
      containerRef = _ref.containerRef,
      _ref$itemAs = _ref.itemAs,
      ItemComponent = _ref$itemAs === void 0 ? 'div' : _ref$itemAs,
      itemStyle = _ref.itemStyle,
      _ref$itemHeightEstima = _ref.itemHeightEstimate,
      itemHeightEstimate =
        _ref$itemHeightEstima === void 0 ? 300 : _ref$itemHeightEstima,
      _ref$itemKey = _ref.itemKey,
      itemKey = _ref$itemKey === void 0 ? defaultGetItemKey : _ref$itemKey,
      _ref$overscanBy = _ref.overscanBy,
      overscanBy = _ref$overscanBy === void 0 ? 2 : _ref$overscanBy,
      scrollTop = _ref.scrollTop,
      isScrolling = _ref.isScrolling,
      height = _ref.height,
      RenderComponent = _ref.render,
      onRender = _ref.onRender
    var startIndex = 0
    var stopIndex
    var forceUpdate = useForceUpdate()
    var setItemRef = getRefSetter(positioner, resizeObserver)
    var itemCount = items.length
    var columnWidth = positioner.columnWidth,
      columnCount = positioner.columnCount,
      range = positioner.range,
      estimateHeight = positioner.estimateHeight,
      size = positioner.size,
      shortestColumn = positioner.shortestColumn
    var measuredCount = size()
    var shortestColumnSize = shortestColumn()
    var children = []
    var itemRole =
      role === 'list' ? 'listitem' : role === 'grid' ? 'gridcell' : undefined
    var storedOnRender = useLatest$4(onRender)
    overscanBy = height * overscanBy
    var rangeEnd = scrollTop + overscanBy
    var needsFreshBatch =
      shortestColumnSize < rangeEnd && measuredCount < itemCount
    range(
      // We overscan in both directions because users scroll both ways,
      // though one must admit scrolling down is more common and thus
      // we only overscan by half the downward overscan amount
      Math.max(0, scrollTop - overscanBy / 2),
      rangeEnd,
      function (index, left, top) {
        var data = items[index]
        var key = itemKey(data, index)
        var phaseTwoStyle = {
          top: top,
          left: left,
          width: columnWidth,
          writingMode: 'horizontal-tb',
          position: 'absolute',
        }
        /* istanbul ignore next */

        if (typeof process !== 'undefined' && 'production' !== 'production') {
          throwWithoutData(data, index)
        }

        children.push(
          /*#__PURE__*/ __reactCreateElement__(
            ItemComponent,
            {
              key: key,
              ref: setItemRef(index),
              role: itemRole,
              style:
                typeof itemStyle === 'object' && itemStyle !== null
                  ? _extends({}, phaseTwoStyle, itemStyle)
                  : phaseTwoStyle,
            },
            createRenderElement(RenderComponent, index, data, columnWidth)
          )
        )

        if (stopIndex === void 0) {
          startIndex = index
          stopIndex = index
        } else {
          startIndex = Math.min(startIndex, index)
          stopIndex = Math.max(stopIndex, index)
        }
      }
    )

    if (needsFreshBatch) {
      var batchSize = Math.min(
        itemCount - measuredCount,
        Math.ceil(
          ((scrollTop + overscanBy - shortestColumnSize) / itemHeightEstimate) *
            columnCount
        )
      )
      var _index = measuredCount
      var phaseOneStyle = getCachedSize(columnWidth)

      for (; _index < measuredCount + batchSize; _index++) {
        var _data = items[_index]
        var key = itemKey(_data, _index)
        /* istanbul ignore next */

        if (typeof process !== 'undefined' && 'production' !== 'production') {
          throwWithoutData(_data, _index)
        }

        children.push(
          /*#__PURE__*/ __reactCreateElement__(
            ItemComponent,
            {
              key: key,
              ref: setItemRef(_index),
              role: itemRole,
              style:
                typeof itemStyle === 'object'
                  ? _extends({}, phaseOneStyle, itemStyle)
                  : phaseOneStyle,
            },
            createRenderElement(RenderComponent, _index, _data, columnWidth)
          )
        )
      }
    } // Calls the onRender callback if the rendered indices changed

    React.useEffect(
      function () {
        if (
          typeof storedOnRender.current === 'function' &&
          stopIndex !== void 0
        )
          storedOnRender.current(startIndex, stopIndex, items)
        didEverMount = '1'
      },
      [startIndex, stopIndex, items, storedOnRender]
    ) // If we needed a fresh batch we should reload our components with the measured
    // sizes

    React.useEffect(
      function () {
        if (needsFreshBatch) forceUpdate() // eslint-disable-next-line
      },
      [needsFreshBatch]
    ) // gets the container style object based upon the estimated height and whether or not
    // the page is being scrolled

    var containerStyle = getContainerStyle(
      isScrolling,
      estimateHeight(itemCount, itemHeightEstimate)
    )
    return /*#__PURE__*/ __reactCreateElement__(ContainerComponent, {
      ref: containerRef,
      key: didEverMount,
      id: id,
      role: role,
      className: className,
      tabIndex: tabIndex,
      style:
        typeof style === 'object'
          ? assignUserStyle(containerStyle, style)
          : containerStyle,
      children: children,
    })
  }
/**
   * This hook handles the render phases of the masonry layout and returns the grid as a React element.
   *
   * @param options Options for configuring the masonry layout renderer. See `UseMasonryOptions`.
   */
This hook handles the render phases of the masonry layout and returns the grid as a React element.
@param options Options for configuring the masonry layout renderer.
This hook handles the render phases of the masonry layout and returns the grid as a React element . @param options Options for configuring the masonry layout renderer .
function useMasonry(_ref) {
    var positioner = _ref.positioner,
      resizeObserver = _ref.resizeObserver,
      items = _ref.items,
      _ref$as = _ref.as,
      ContainerComponent = _ref$as === void 0 ? 'div' : _ref$as,
      id = _ref.id,
      className = _ref.className,
      style = _ref.style,
      _ref$role = _ref.role,
      role = _ref$role === void 0 ? 'grid' : _ref$role,
      _ref$tabIndex = _ref.tabIndex,
      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
      containerRef = _ref.containerRef,
      _ref$itemAs = _ref.itemAs,
      ItemComponent = _ref$itemAs === void 0 ? 'div' : _ref$itemAs,
      itemStyle = _ref.itemStyle,
      _ref$itemHeightEstima = _ref.itemHeightEstimate,
      itemHeightEstimate =
        _ref$itemHeightEstima === void 0 ? 300 : _ref$itemHeightEstima,
      _ref$itemKey = _ref.itemKey,
      itemKey = _ref$itemKey === void 0 ? defaultGetItemKey : _ref$itemKey,
      _ref$overscanBy = _ref.overscanBy,
      overscanBy = _ref$overscanBy === void 0 ? 2 : _ref$overscanBy,
      scrollTop = _ref.scrollTop,
      isScrolling = _ref.isScrolling,
      height = _ref.height,
      RenderComponent = _ref.render,
      onRender = _ref.onRender
    var startIndex = 0
    var stopIndex
    var forceUpdate = useForceUpdate()
    var setItemRef = getRefSetter(positioner, resizeObserver)
    var itemCount = items.length
    var columnWidth = positioner.columnWidth,
      columnCount = positioner.columnCount,
      range = positioner.range,
      estimateHeight = positioner.estimateHeight,
      size = positioner.size,
      shortestColumn = positioner.shortestColumn
    var measuredCount = size()
    var shortestColumnSize = shortestColumn()
    var children = []
    var itemRole =
      role === 'list' ? 'listitem' : role === 'grid' ? 'gridcell' : undefined
    var storedOnRender = useLatest$4(onRender)
    overscanBy = height * overscanBy
    var rangeEnd = scrollTop + overscanBy
    var needsFreshBatch =
      shortestColumnSize < rangeEnd && measuredCount < itemCount
    range(
      Math.max(0, scrollTop - overscanBy / 2),
      rangeEnd,
      function (index, left, top) {
        var data = items[index]
        var key = itemKey(data, index)
        var phaseTwoStyle = {
          top: top,
          left: left,
          width: columnWidth,
          writingMode: 'horizontal-tb',
          position: 'absolute',
        }
        if (typeof process !== 'undefined' && 'production' !== 'production') {
          throwWithoutData(data, index)
        }
        children.push(
           __reactCreateElement__(
            ItemComponent,
            {
              key: key,
              ref: setItemRef(index),
              role: itemRole,
              style:
                typeof itemStyle === 'object' && itemStyle !== null
                  ? _extends({}, phaseTwoStyle, itemStyle)
                  : phaseTwoStyle,
            },
            createRenderElement(RenderComponent, index, data, columnWidth)
          )
        )
        if (stopIndex === void 0) {
          startIndex = index
          stopIndex = index
        } else {
          startIndex = Math.min(startIndex, index)
          stopIndex = Math.max(stopIndex, index)
        }
      }
    )
    if (needsFreshBatch) {
      var batchSize = Math.min(
        itemCount - measuredCount,
        Math.ceil(
          ((scrollTop + overscanBy - shortestColumnSize) / itemHeightEstimate) *
            columnCount
        )
      )
      var _index = measuredCount
      var phaseOneStyle = getCachedSize(columnWidth)
      for (; _index < measuredCount + batchSize; _index++) {
        var _data = items[_index]
        var key = itemKey(_data, _index)
        if (typeof process !== 'undefined' && 'production' !== 'production') {
          throwWithoutData(_data, _index)
        }
        children.push(
           __reactCreateElement__(
            ItemComponent,
            {
              key: key,
              ref: setItemRef(_index),
              role: itemRole,
              style:
                typeof itemStyle === 'object'
                  ? _extends({}, phaseOneStyle, itemStyle)
                  : phaseOneStyle,
            },
            createRenderElement(RenderComponent, _index, _data, columnWidth)
          )
        )
      }
    } 
    React.useEffect(
      function () {
        if (
          typeof storedOnRender.current === 'function' &&
          stopIndex !== void 0
        )
          storedOnRender.current(startIndex, stopIndex, items)
        didEverMount = '1'
      },
      [startIndex, stopIndex, items, storedOnRender]
    ) 
    React.useEffect(
      function () {
        if (needsFreshBatch) forceUpdate() 
      },
      [needsFreshBatch]
    ) 
    var containerStyle = getContainerStyle(
      isScrolling,
      estimateHeight(itemCount, itemHeightEstimate)
    )
    return  __reactCreateElement__(ContainerComponent, {
      ref: containerRef,
      key: didEverMount,
      id: id,
      role: role,
      className: className,
      tabIndex: tabIndex,
      style:
        typeof style === 'object'
          ? assignUserStyle(containerStyle, style)
          : containerStyle,
      children: children,
    })
  }
function useMasonry ( _ref ) { var positioner = _ref . positioner , resizeObserver = _ref . resizeObserver , items = _ref . items , _ref$as = _ref . as , ContainerComponent = _ref$as === void 0 ? 'div' : _ref$as , id = _ref . id , className = _ref . className , style = _ref . style , _ref$role = _ref . role , role = _ref$role === void 0 ? 'grid' : _ref$role , _ref$tabIndex = _ref . tabIndex , tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex , containerRef = _ref . containerRef , _ref$itemAs = _ref . itemAs , ItemComponent = _ref$itemAs === void 0 ? 'div' : _ref$itemAs , itemStyle = _ref . itemStyle , _ref$itemHeightEstima = _ref . itemHeightEstimate , itemHeightEstimate = _ref$itemHeightEstima === void 0 ? 300 : _ref$itemHeightEstima , _ref$itemKey = _ref . itemKey , itemKey = _ref$itemKey === void 0 ? defaultGetItemKey : _ref$itemKey , _ref$overscanBy = _ref . overscanBy , overscanBy = _ref$overscanBy === void 0 ? 2 : _ref$overscanBy , scrollTop = _ref . scrollTop , isScrolling = _ref . isScrolling , height = _ref . height , RenderComponent = _ref . render , onRender = _ref . onRender var startIndex = 0 var stopIndex var forceUpdate = useForceUpdate ( ) var setItemRef = getRefSetter ( positioner , resizeObserver ) var itemCount = items . length var columnWidth = positioner . columnWidth , columnCount = positioner . columnCount , range = positioner . range , estimateHeight = positioner . estimateHeight , size = positioner . size , shortestColumn = positioner . shortestColumn var measuredCount = size ( ) var shortestColumnSize = shortestColumn ( ) var children = [ ] var itemRole = role === 'list' ? 'listitem' : role === 'grid' ? 'gridcell' : undefined var storedOnRender = useLatest$4 ( onRender ) overscanBy = height * overscanBy var rangeEnd = scrollTop + overscanBy var needsFreshBatch = shortestColumnSize < rangeEnd && measuredCount < itemCount range ( Math . max ( 0 , scrollTop - overscanBy / 2 ) , rangeEnd , function ( index , left , top ) { var data = items [ index ] var key = itemKey ( data , index ) var phaseTwoStyle = { top : top , left : left , width : columnWidth , writingMode : 'horizontal-tb' , position : 'absolute' , } if ( typeof process !== 'undefined' && 'production' !== 'production' ) { throwWithoutData ( data , index ) } children . push ( __reactCreateElement__ ( ItemComponent , { key : key , ref : setItemRef ( index ) , role : itemRole , style : typeof itemStyle === 'object' && itemStyle !== null ? _extends ( { } , phaseTwoStyle , itemStyle ) : phaseTwoStyle , } , createRenderElement ( RenderComponent , index , data , columnWidth ) ) ) if ( stopIndex === void 0 ) { startIndex = index stopIndex = index } else { startIndex = Math . min ( startIndex , index ) stopIndex = Math . max ( stopIndex , index ) } } ) if ( needsFreshBatch ) { var batchSize = Math . min ( itemCount - measuredCount , Math . ceil ( ( ( scrollTop + overscanBy - shortestColumnSize ) / itemHeightEstimate ) * columnCount ) ) var _index = measuredCount var phaseOneStyle = getCachedSize ( columnWidth ) for ( ; _index < measuredCount + batchSize ; _index ++ ) { var _data = items [ _index ] var key = itemKey ( _data , _index ) if ( typeof process !== 'undefined' && 'production' !== 'production' ) { throwWithoutData ( _data , _index ) } children . push ( __reactCreateElement__ ( ItemComponent , { key : key , ref : setItemRef ( _index ) , role : itemRole , style : typeof itemStyle === 'object' ? _extends ( { } , phaseOneStyle , itemStyle ) : phaseOneStyle , } , createRenderElement ( RenderComponent , _index , _data , columnWidth ) ) ) } } React . useEffect ( function ( ) { if ( typeof storedOnRender . current === 'function' && stopIndex !== void 0 ) storedOnRender . current ( startIndex , stopIndex , items ) didEverMount = '1' } , [ startIndex , stopIndex , items , storedOnRender ] ) React . useEffect ( function ( ) { if ( needsFreshBatch ) forceUpdate ( ) } , [ needsFreshBatch ] ) var containerStyle = getContainerStyle ( isScrolling , estimateHeight ( itemCount , itemHeightEstimate ) ) return __reactCreateElement__ ( ContainerComponent , { ref : containerRef , key : didEverMount , id : id , role : role , className : className , tabIndex : tabIndex , style : typeof style === 'object' ? assignUserStyle ( containerStyle , style ) : containerStyle , children : children , } ) }
This hook handles the render phases of the masonry layout and returns the grid as a React element.
This hook handles the render phases of the masonry layout and returns the grid as a React element .
// We overscan in both directions because users scroll both ways, // though one must admit scrolling down is more common and thus // we only overscan by half the downward overscan amount /* istanbul ignore next */ /*#__PURE__*/ /* istanbul ignore next */ /*#__PURE__*/ // Calls the onRender callback if the rendered indices changed // If we needed a fresh batch we should reload our components with the measured // sizes // eslint-disable-next-line // gets the container style object based upon the estimated height and whether or not // the page is being scrolled /*#__PURE__*/