@react-stately/layout 4.3.1 → 4.5.0

package/dist/WaterfallLayout.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/layout/src/WaterfallLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node} from '@react-types/shared';\nimport {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface WaterfallLayoutOptions {\n  /**\n   * The minimum item size.\n   * @default 200 x 200\n   */\n  minItemSize?: Size,\n  /**\n   * The maximum item size.\n   * @default Infinity\n   */\n  maxItemSize?: Size,\n  /**\n   * The minimum space required between items.\n   * @default 18 x 18\n   */\n  minSpace?: Size,\n  /**\n   * The maximum number of columns.\n   * @default Infinity\n   */\n  maxColumns?: number,\n  /**\n   * The thickness of the drop indicator.\n   * @default 2\n   */\n  dropIndicatorThickness?: number\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n  column = 0;\n\n  copy(): WaterfallLayoutInfo {\n    let res = super.copy() as WaterfallLayoutInfo;\n    res.column = this.column;\n    return res;\n  }\n}\n\nconst DEFAULT_OPTIONS = {\n  minItemSize: new Size(200, 200),\n  maxItemSize: new Size(Infinity, Infinity),\n  minSpace: new Size(18, 18),\n  maxColumns: Infinity,\n  dropIndicatorThickness: 2\n};\n\nexport class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {\n  private contentSize: Size = new Size();\n  private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n  protected numColumns = 0;\n  protected dropIndicatorThickness = 2;\n\n  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {\n    return newOptions.maxColumns !== oldOptions.maxColumns\n      || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness\n      || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))\n      || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))\n      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace));\n  }\n\n  update(invalidationContext: InvalidationContext<O>): void {\n    let {\n      minItemSize = DEFAULT_OPTIONS.minItemSize,\n      maxItemSize = DEFAULT_OPTIONS.maxItemSize,\n      minSpace = DEFAULT_OPTIONS.minSpace,\n      maxColumns = DEFAULT_OPTIONS.maxColumns,\n      dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness\n    } = invalidationContext.layoutOptions || {};\n    this.dropIndicatorThickness = dropIndicatorThickness;\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n      let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;\n      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let collection = this.virtualizer!.collection;\n    let skeletonCount = 0;\n    for (let node of collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else if (node.type !== 'loader') {\n        addNode(node.key, node);\n      }\n    }\n\n    // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.\n    // Add it under the first column for simplicity\n    let lastNode = collection.getItem(collection.getLastKey()!);\n    if (lastNode?.type === 'loader') {\n      let rect = new Rect(horizontalSpacing, columnHeights[0], itemWidth, 0);\n      let layoutInfo = new LayoutInfo('loader', lastNode.key, rect);\n      newLayoutInfos.set(lastNode.key, layoutInfo);\n    }\n\n    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render\n    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');\n    let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size): boolean {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spatially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spatially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle\n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n\n  getDropTargetFromPoint(x: number, y: number): DropTarget {\n    if (this.layoutInfos.size === 0) {\n      return {type: 'root'};\n    }\n\n    x += this.virtualizer!.visibleRect.x;\n    y += this.virtualizer!.visibleRect.y;\n    let key = this.virtualizer!.keyAtPoint(new Point(x, y));\n    if (key == null) {\n      return {type: 'root'};\n    }\n\n    // Only support \"on\" drop position in waterfall layout.\n    // Reordering doesn't make sense because the items don't have a deterministic order.\n    return {\n      type: 'item',\n      key,\n      dropPosition: 'on'\n    };\n  }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.main.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/layout/src/WaterfallLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node} from '@react-types/shared';\nimport {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface WaterfallLayoutOptions {\n  /**\n   * The minimum item size.\n   * @default 200 x 200\n   */\n  minItemSize?: Size,\n  /**\n   * The maximum item size.\n   * @default Infinity\n   */\n  maxItemSize?: Size,\n  /**\n   * The minimum space required between items.\n   * @default 18 x 18\n   */\n  minSpace?: Size,\n  /**\n   * The maximum allowed horizontal space between items.\n   * @default Infinity\n   */\n  maxHorizontalSpace?: number,\n  /**\n   * The maximum number of columns.\n   * @default Infinity\n   */\n  maxColumns?: number,\n  /**\n   * The thickness of the drop indicator.\n   * @default 2\n   */\n  dropIndicatorThickness?: number\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n  column = 0;\n\n  copy(): WaterfallLayoutInfo {\n    let res = super.copy() as WaterfallLayoutInfo;\n    res.column = this.column;\n    return res;\n  }\n}\n\nconst DEFAULT_OPTIONS = {\n  minItemSize: new Size(200, 200),\n  maxItemSize: new Size(Infinity, Infinity),\n  minSpace: new Size(18, 18),\n  maxSpace: Infinity,\n  maxColumns: Infinity,\n  dropIndicatorThickness: 2\n};\n\nexport class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {\n  private contentSize: Size = new Size();\n  private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n  protected numColumns = 0;\n  protected dropIndicatorThickness = 2;\n  private margin: number = 0;\n\n  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {\n    return newOptions.maxColumns !== oldOptions.maxColumns\n      || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness\n      || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))\n      || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))\n      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace))\n      || (newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace);\n  }\n\n  update(invalidationContext: InvalidationContext<O>): void {\n    let {\n      minItemSize = DEFAULT_OPTIONS.minItemSize,\n      maxItemSize = DEFAULT_OPTIONS.maxItemSize,\n      minSpace = DEFAULT_OPTIONS.minSpace,\n      maxHorizontalSpace = DEFAULT_OPTIONS.maxSpace,\n      maxColumns = DEFAULT_OPTIONS.maxColumns,\n      dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness\n    } = invalidationContext.layoutOptions || {};\n    this.dropIndicatorThickness = dropIndicatorThickness;\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing, content height and horizontal margin\n    let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));\n    this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n      let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;\n      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let collection = this.virtualizer!.collection;\n    let skeletonCount = 0;\n    for (let node of collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else if (node.type !== 'loader') {\n        addNode(node.key, node);\n      }\n    }\n\n    // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.\n    // Add it under the first column for simplicity\n    let lastNode = collection.getItem(collection.getLastKey()!);\n    if (lastNode?.type === 'loader') {\n      let rect = new Rect(horizontalSpacing, columnHeights[0], itemWidth, 0);\n      let layoutInfo = new LayoutInfo('loader', lastNode.key, rect);\n      newLayoutInfos.set(lastNode.key, layoutInfo);\n    }\n\n    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,\n    // except if we are performing skeleton loading\n    let isEmptyOrLoading = collection?.size === 0 && collection.getItem(collection.getFirstKey()!)?.type !== 'skeleton';\n    let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size): boolean {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spatially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spatially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle\n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n\n  getDropTargetFromPoint(x: number, y: number): DropTarget {\n    if (this.layoutInfos.size === 0) {\n      return {type: 'root'};\n    }\n\n    x += this.virtualizer!.visibleRect.x;\n    y += this.virtualizer!.visibleRect.y;\n    let key = this.virtualizer!.keyAtPoint(new Point(x, y));\n    if (key == null) {\n      return {type: 'root'};\n    }\n\n    // Only support \"on\" drop position in waterfall layout.\n    // Reordering doesn't make sense because the items don't have a deterministic order.\n    return {\n      type: 'item',\n      key,\n      dropPosition: 'on'\n    };\n  }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.main.js.map"}

package/dist/WaterfallLayout.mjs

@@ -25,15 +25,17 @@ const $f483179558aa907f$var$DEFAULT_OPTIONS = {
     minItemSize: new (0, $lFzwI$Size)(200, 200),
     maxItemSize: new (0, $lFzwI$Size)(Infinity, Infinity),
     minSpace: new (0, $lFzwI$Size)(18, 18),
+    maxSpace: Infinity,
     maxColumns: Infinity,
     dropIndicatorThickness: 2
 };
 class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
     shouldInvalidateLayoutOptions(newOptions, oldOptions) {
-        return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(newOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace);
+        return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(newOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace) || newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace;
     }
     update(invalidationContext) {
-        let { minItemSize: minItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize, minSpace: minSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace, maxColumns: maxColumns = $f483179558aa907f$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $f483179558aa907f$var$DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions || {};
+        var _collection_getItem;
+        let { minItemSize: minItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize, minSpace: minSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace, maxHorizontalSpace: maxHorizontalSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.maxSpace, maxColumns: maxColumns = $f483179558aa907f$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $f483179558aa907f$var$DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions || {};
         this.dropIndicatorThickness = dropIndicatorThickness;
         let visibleWidth = this.virtualizer.visibleRect.width;
         // The max item width is always the entire viewport.
@@ -52,8 +54,9 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
         let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
         let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
         itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
-        // Compute the horizontal spacing and content height
-        let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+        // Compute the horizontal spacing, content height and horizontal margin
+        let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));
+        this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
         // Setup an array of column heights
         let columnHeights = Array(numColumns).fill(minSpace.height);
         let newLayoutInfos = new Map();
@@ -69,7 +72,7 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
             // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
             let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer.visibleRect.maxY ? oldLayoutInfo.column : undefined;
             let column = prevColumn !== null && prevColumn !== void 0 ? prevColumn : columnHeights.reduce((minIndex, h, i)=>h < columnHeights[minIndex] ? i : minIndex, 0);
-            let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
+            let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
             let y = columnHeights[column];
             let rect = new (0, $lFzwI$Rect)(x, y, itemWidth, height);
             let layoutInfo = new $f483179558aa907f$var$WaterfallLayoutInfo(node.type, key, rect);
@@ -107,8 +110,9 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
             let layoutInfo = new (0, $lFzwI$LayoutInfo)('loader', lastNode.key, rect);
             newLayoutInfos.set(lastNode.key, layoutInfo);
         }
-        // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render
-        let isEmptyOrLoading = (collection === null || collection === void 0 ? void 0 : collection.size) === 0 || collection.size === 1 && collection.getItem(collection.getFirstKey()).type === 'loader';
+        // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
+        // except if we are performing skeleton loading
+        let isEmptyOrLoading = (collection === null || collection === void 0 ? void 0 : collection.size) === 0 && ((_collection_getItem = collection.getItem(collection.getFirstKey())) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.type) !== 'skeleton';
         let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
         this.contentSize = new (0, $lFzwI$Size)(this.virtualizer.visibleRect.width, maxHeight);
         this.layoutInfos = newLayoutInfos;
@@ -210,7 +214,7 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
         };
     }
     constructor(...args){
-        super(...args), this.contentSize = new (0, $lFzwI$Size)(), this.layoutInfos = new Map(), this.numColumns = 0, this.dropIndicatorThickness = 2;
+        super(...args), this.contentSize = new (0, $lFzwI$Size)(), this.layoutInfos = new Map(), this.numColumns = 0, this.dropIndicatorThickness = 2, this.margin = 0;
     }
 }
 

package/dist/WaterfallLayout.module.js

@@ -25,15 +25,17 @@ const $f483179558aa907f$var$DEFAULT_OPTIONS = {
     minItemSize: new (0, $lFzwI$Size)(200, 200),
     maxItemSize: new (0, $lFzwI$Size)(Infinity, Infinity),
     minSpace: new (0, $lFzwI$Size)(18, 18),
+    maxSpace: Infinity,
     maxColumns: Infinity,
     dropIndicatorThickness: 2
 };
 class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
     shouldInvalidateLayoutOptions(newOptions, oldOptions) {
-        return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(newOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace);
+        return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(newOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize) || !(newOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize) || !(newOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace) || newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace;
     }
     update(invalidationContext) {
-        let { minItemSize: minItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize, minSpace: minSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace, maxColumns: maxColumns = $f483179558aa907f$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $f483179558aa907f$var$DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions || {};
+        var _collection_getItem;
+        let { minItemSize: minItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.minItemSize, maxItemSize: maxItemSize = $f483179558aa907f$var$DEFAULT_OPTIONS.maxItemSize, minSpace: minSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.minSpace, maxHorizontalSpace: maxHorizontalSpace = $f483179558aa907f$var$DEFAULT_OPTIONS.maxSpace, maxColumns: maxColumns = $f483179558aa907f$var$DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness: dropIndicatorThickness = $f483179558aa907f$var$DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions || {};
         this.dropIndicatorThickness = dropIndicatorThickness;
         let visibleWidth = this.virtualizer.visibleRect.width;
         // The max item width is always the entire viewport.
@@ -52,8 +54,9 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
         let t = (itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width);
         let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
         itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
-        // Compute the horizontal spacing and content height
-        let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+        // Compute the horizontal spacing, content height and horizontal margin
+        let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));
+        this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
         // Setup an array of column heights
         let columnHeights = Array(numColumns).fill(minSpace.height);
         let newLayoutInfos = new Map();
@@ -69,7 +72,7 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
             // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.
             let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer.visibleRect.maxY ? oldLayoutInfo.column : undefined;
             let column = prevColumn !== null && prevColumn !== void 0 ? prevColumn : columnHeights.reduce((minIndex, h, i)=>h < columnHeights[minIndex] ? i : minIndex, 0);
-            let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);
+            let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
             let y = columnHeights[column];
             let rect = new (0, $lFzwI$Rect)(x, y, itemWidth, height);
             let layoutInfo = new $f483179558aa907f$var$WaterfallLayoutInfo(node.type, key, rect);
@@ -107,8 +110,9 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
             let layoutInfo = new (0, $lFzwI$LayoutInfo)('loader', lastNode.key, rect);
             newLayoutInfos.set(lastNode.key, layoutInfo);
         }
-        // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render
-        let isEmptyOrLoading = (collection === null || collection === void 0 ? void 0 : collection.size) === 0 || collection.size === 1 && collection.getItem(collection.getFirstKey()).type === 'loader';
+        // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,
+        // except if we are performing skeleton loading
+        let isEmptyOrLoading = (collection === null || collection === void 0 ? void 0 : collection.size) === 0 && ((_collection_getItem = collection.getItem(collection.getFirstKey())) === null || _collection_getItem === void 0 ? void 0 : _collection_getItem.type) !== 'skeleton';
         let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);
         this.contentSize = new (0, $lFzwI$Size)(this.virtualizer.visibleRect.width, maxHeight);
         this.layoutInfos = newLayoutInfos;
@@ -210,7 +214,7 @@ class $f483179558aa907f$export$e9f7cda058ba8df8 extends (0, $lFzwI$Layout) {
         };
     }
     constructor(...args){
-        super(...args), this.contentSize = new (0, $lFzwI$Size)(), this.layoutInfos = new Map(), this.numColumns = 0, this.dropIndicatorThickness = 2;
+        super(...args), this.contentSize = new (0, $lFzwI$Size)(), this.layoutInfos = new Map(), this.numColumns = 0, this.dropIndicatorThickness = 2, this.margin = 0;
     }
 }
 

package/dist/WaterfallLayout.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/layout/src/WaterfallLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node} from '@react-types/shared';\nimport {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface WaterfallLayoutOptions {\n  /**\n   * The minimum item size.\n   * @default 200 x 200\n   */\n  minItemSize?: Size,\n  /**\n   * The maximum item size.\n   * @default Infinity\n   */\n  maxItemSize?: Size,\n  /**\n   * The minimum space required between items.\n   * @default 18 x 18\n   */\n  minSpace?: Size,\n  /**\n   * The maximum number of columns.\n   * @default Infinity\n   */\n  maxColumns?: number,\n  /**\n   * The thickness of the drop indicator.\n   * @default 2\n   */\n  dropIndicatorThickness?: number\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n  column = 0;\n\n  copy(): WaterfallLayoutInfo {\n    let res = super.copy() as WaterfallLayoutInfo;\n    res.column = this.column;\n    return res;\n  }\n}\n\nconst DEFAULT_OPTIONS = {\n  minItemSize: new Size(200, 200),\n  maxItemSize: new Size(Infinity, Infinity),\n  minSpace: new Size(18, 18),\n  maxColumns: Infinity,\n  dropIndicatorThickness: 2\n};\n\nexport class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {\n  private contentSize: Size = new Size();\n  private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n  protected numColumns = 0;\n  protected dropIndicatorThickness = 2;\n\n  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {\n    return newOptions.maxColumns !== oldOptions.maxColumns\n      || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness\n      || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))\n      || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))\n      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace));\n  }\n\n  update(invalidationContext: InvalidationContext<O>): void {\n    let {\n      minItemSize = DEFAULT_OPTIONS.minItemSize,\n      maxItemSize = DEFAULT_OPTIONS.maxItemSize,\n      minSpace = DEFAULT_OPTIONS.minSpace,\n      maxColumns = DEFAULT_OPTIONS.maxColumns,\n      dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness\n    } = invalidationContext.layoutOptions || {};\n    this.dropIndicatorThickness = dropIndicatorThickness;\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing and content height\n    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n      let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;\n      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing);\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let collection = this.virtualizer!.collection;\n    let skeletonCount = 0;\n    for (let node of collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else if (node.type !== 'loader') {\n        addNode(node.key, node);\n      }\n    }\n\n    // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.\n    // Add it under the first column for simplicity\n    let lastNode = collection.getItem(collection.getLastKey()!);\n    if (lastNode?.type === 'loader') {\n      let rect = new Rect(horizontalSpacing, columnHeights[0], itemWidth, 0);\n      let layoutInfo = new LayoutInfo('loader', lastNode.key, rect);\n      newLayoutInfos.set(lastNode.key, layoutInfo);\n    }\n\n    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render\n    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');\n    let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size): boolean {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spatially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spatially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle\n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n\n  getDropTargetFromPoint(x: number, y: number): DropTarget {\n    if (this.layoutInfos.size === 0) {\n      return {type: 'root'};\n    }\n\n    x += this.virtualizer!.visibleRect.x;\n    y += this.virtualizer!.visibleRect.y;\n    let key = this.virtualizer!.keyAtPoint(new Point(x, y));\n    if (key == null) {\n      return {type: 'root'};\n    }\n\n    // Only support \"on\" drop position in waterfall layout.\n    // Reordering doesn't make sense because the items don't have a deterministic order.\n    return {\n      type: 'item',\n      key,\n      dropPosition: 'on'\n    };\n  }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.module.js.map"}
+{"mappings":"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","sources":["packages/@react-stately/layout/src/WaterfallLayout.ts"],"sourcesContent":["/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node} from '@react-types/shared';\nimport {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';\n\nexport interface WaterfallLayoutOptions {\n  /**\n   * The minimum item size.\n   * @default 200 x 200\n   */\n  minItemSize?: Size,\n  /**\n   * The maximum item size.\n   * @default Infinity\n   */\n  maxItemSize?: Size,\n  /**\n   * The minimum space required between items.\n   * @default 18 x 18\n   */\n  minSpace?: Size,\n  /**\n   * The maximum allowed horizontal space between items.\n   * @default Infinity\n   */\n  maxHorizontalSpace?: number,\n  /**\n   * The maximum number of columns.\n   * @default Infinity\n   */\n  maxColumns?: number,\n  /**\n   * The thickness of the drop indicator.\n   * @default 2\n   */\n  dropIndicatorThickness?: number\n}\n\nclass WaterfallLayoutInfo extends LayoutInfo {\n  column = 0;\n\n  copy(): WaterfallLayoutInfo {\n    let res = super.copy() as WaterfallLayoutInfo;\n    res.column = this.column;\n    return res;\n  }\n}\n\nconst DEFAULT_OPTIONS = {\n  minItemSize: new Size(200, 200),\n  maxItemSize: new Size(Infinity, Infinity),\n  minSpace: new Size(18, 18),\n  maxSpace: Infinity,\n  maxColumns: Infinity,\n  dropIndicatorThickness: 2\n};\n\nexport class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {\n  private contentSize: Size = new Size();\n  private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();\n  protected numColumns = 0;\n  protected dropIndicatorThickness = 2;\n  private margin: number = 0;\n\n  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {\n    return newOptions.maxColumns !== oldOptions.maxColumns\n      || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness\n      || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))\n      || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))\n      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace))\n      || (newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace);\n  }\n\n  update(invalidationContext: InvalidationContext<O>): void {\n    let {\n      minItemSize = DEFAULT_OPTIONS.minItemSize,\n      maxItemSize = DEFAULT_OPTIONS.maxItemSize,\n      minSpace = DEFAULT_OPTIONS.minSpace,\n      maxHorizontalSpace = DEFAULT_OPTIONS.maxSpace,\n      maxColumns = DEFAULT_OPTIONS.maxColumns,\n      dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness\n    } = invalidationContext.layoutOptions || {};\n    this.dropIndicatorThickness = dropIndicatorThickness;\n    let visibleWidth = this.virtualizer!.visibleRect.width;\n\n    // The max item width is always the entire viewport.\n    // If the max item height is infinity, scale in proportion to the max width.\n    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);\n    let maxItemHeight = Number.isFinite(maxItemSize.height)\n      ? maxItemSize.height\n      : Math.floor((minItemSize.height / minItemSize.width) * maxItemWidth);\n\n    // Compute the number of rows and columns needed to display the content\n    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));\n    let numColumns = Math.max(1, Math.min(maxColumns, columns));\n\n    // Compute the available width (minus the space between items)\n    let width = visibleWidth - (minSpace.width * Math.max(0, numColumns));\n\n    // Compute the item width based on the space available\n    let itemWidth = Math.floor(width / numColumns);\n    itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));\n\n    // Compute the item height, which is proportional to the item width\n    let t = ((itemWidth - minItemSize.width) / Math.max(1, maxItemWidth - minItemSize.width));\n    let itemHeight = minItemSize.height +  Math.floor((maxItemHeight - minItemSize.height) * t);\n    itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));\n\n    // Compute the horizontal spacing, content height and horizontal margin\n    let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));\n    this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);\n\n    // Setup an array of column heights\n    let columnHeights = Array(numColumns).fill(minSpace.height);\n    let newLayoutInfos = new Map();\n    let addNode = (key: Key, node: Node<T>) => {\n      let oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n      if (oldLayoutInfo) {\n        height = oldLayoutInfo.rect.height;\n        estimatedSize = invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;\n      }\n\n      // Figure out which column to place the item in, and compute its position.\n      // Preserve the previous column index so items don't jump around during resizing unless the number of columns changed.\n      let prevColumn = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.rect.y < this.virtualizer!.visibleRect.maxY ? oldLayoutInfo.column : undefined;\n      let column = prevColumn ?? columnHeights.reduce((minIndex, h, i) => h < columnHeights[minIndex] ? i : minIndex, 0);\n      let x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;\n      let y = columnHeights[column];\n\n      let rect = new Rect(x, y, itemWidth, height);\n      let layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      newLayoutInfos.set(key, layoutInfo);\n\n      columnHeights[column] += layoutInfo.rect.height + minSpace.height;\n    };\n\n    let collection = this.virtualizer!.collection;\n    let skeletonCount = 0;\n    for (let node of collection) {\n      if (node.type === 'skeleton') {\n        // Add skeleton cards until every column has at least one, and we fill the viewport.\n        let startingHeights = [...columnHeights];\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.virtualizer!.visibleRect.height\n        ) {\n          let key = `${node.key}-${skeletonCount++}`;\n          let content = this.layoutInfos.get(key)?.content || {...node};\n          addNode(key, content);\n        }\n        break;\n      } else if (node.type !== 'loader') {\n        addNode(node.key, node);\n      }\n    }\n\n    // Always add the loader sentinel if present in the collection so we can make sure it is never virtualized out.\n    // Add it under the first column for simplicity\n    let lastNode = collection.getItem(collection.getLastKey()!);\n    if (lastNode?.type === 'loader') {\n      let rect = new Rect(horizontalSpacing, columnHeights[0], itemWidth, 0);\n      let layoutInfo = new LayoutInfo('loader', lastNode.key, rect);\n      newLayoutInfos.set(lastNode.key, layoutInfo);\n    }\n\n    // Reset all columns to the maximum for the next section. If loading, set to 0 so virtualizer doesn't render its body since there aren't items to render,\n    // except if we are performing skeleton loading\n    let isEmptyOrLoading = collection?.size === 0 && collection.getItem(collection.getFirstKey()!)?.type !== 'skeleton';\n    let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);\n    this.contentSize = new Size(this.virtualizer!.visibleRect.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n\n  getLayoutInfo(key: Key): LayoutInfo {\n    return this.layoutInfos.get(key)!;\n  }\n\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    let layoutInfos: LayoutInfo[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key) || layoutInfo.type === 'loader') {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n    return layoutInfos;\n  }\n\n  updateItemSize(key: Key, size: Size): boolean {\n    let layoutInfo = this.layoutInfos.get(key);\n    if (!size || !layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      let newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n      return true;\n    }\n\n    return false;\n  }\n\n  // Override keyboard navigation to work spatially.\n  getKeyRightOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.virtualizer!.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = candidate.rect.x - rect.x;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  getKeyLeftOf(key: Key): Key | null {\n    let layoutInfo = this.getLayoutInfo(key);\n    if (!layoutInfo) {\n      return null;\n    }\n\n    let rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);\n    let layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n    for (let candidate of layoutInfos) {\n      if (candidate.key === key) {\n        continue;\n      }\n\n      // Find the closest item in the x direction with the most overlap in the y direction.\n      let deltaX = rect.maxX - candidate.rect.maxX;\n      let overlapY = Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y);\n      let distance = deltaX - overlapY;\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n\n  // This overrides the default behavior of shift selection to work spatially\n  // rather than following the order of the items in the collection (which may appear unpredictable).\n  getKeyRange(from: Key, to: Key): Key[] {\n    let fromLayoutInfo = this.getLayoutInfo(from);\n    let toLayoutInfo = this.getLayoutInfo(to);\n    if (!fromLayoutInfo || !toLayoutInfo) {\n      return [];\n    }\n\n    // Find items where half of the area intersects the rectangle\n    // formed from the first item to the last item in the range.\n    let rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    let keys: Key[] = [];\n    for (let layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n    return keys;\n  }\n\n  getDropTargetFromPoint(x: number, y: number): DropTarget {\n    if (this.layoutInfos.size === 0) {\n      return {type: 'root'};\n    }\n\n    x += this.virtualizer!.visibleRect.x;\n    y += this.virtualizer!.visibleRect.y;\n    let key = this.virtualizer!.keyAtPoint(new Point(x, y));\n    if (key == null) {\n      return {type: 'root'};\n    }\n\n    // Only support \"on\" drop position in waterfall layout.\n    // Reordering doesn't make sense because the items don't have a deterministic order.\n    return {\n      type: 'item',\n      key,\n      dropPosition: 'on'\n    };\n  }\n}\n"],"names":[],"version":3,"file":"WaterfallLayout.module.js.map"}

package/dist/types.d.ts

@@ -25,6 +25,11 @@ export interface GridLayoutOptions {
      * @default 18 x 18
      */
     minSpace?: Size;
+    /**
+     * The maximum allowed horizontal space between items.
+     * @default Infinity
+     */
+    maxHorizontalSpace?: number;
     /**
      * The maximum number of columns.
      * @default Infinity
@@ -190,6 +195,11 @@ export interface WaterfallLayoutOptions {
      * @default 18 x 18
      */
     minSpace?: Size;
+    /**
+     * The maximum allowed horizontal space between items.
+     * @default Infinity
+     */
+    maxHorizontalSpace?: number;
     /**
      * The maximum number of columns.
      * @default Infinity

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-stately/layout/src/packages/@react-stately/layout/src/GridLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/ListLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/TableLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/WaterfallLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/index.ts","packages/@react-stately/layout/src/index.ts"],"sourcesContent":[null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {GridLayoutOptions} from './GridLayout';\nexport type {ListLayoutOptions, LayoutNode} from './ListLayout';\nexport type {TableLayoutProps} from './TableLayout';\nexport type {WaterfallLayoutOptions} from './WaterfallLayout';\nexport {GridLayout} from './GridLayout';\nexport {ListLayout} from './ListLayout';\nexport {TableLayout} from './TableLayout';\nexport {WaterfallLayout} from './WaterfallLayout';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-stately/layout/src/packages/@react-stately/layout/src/GridLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/ListLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/TableLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/WaterfallLayout.ts","packages/@react-stately/layout/src/packages/@react-stately/layout/src/index.ts","packages/@react-stately/layout/src/index.ts"],"sourcesContent":[null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport type {GridLayoutOptions} from './GridLayout';\nexport type {ListLayoutOptions, LayoutNode} from './ListLayout';\nexport type {TableLayoutProps} from './TableLayout';\nexport type {WaterfallLayoutOptions} from './WaterfallLayout';\nexport {GridLayout} from './GridLayout';\nexport {ListLayout} from './ListLayout';\nexport {TableLayout} from './TableLayout';\nexport {WaterfallLayout} from './WaterfallLayout';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/layout",
-  "version": "4.3.1",
+  "version": "4.5.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -26,12 +26,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-stately/collections": "^3.12.5",
-    "@react-stately/table": "^3.14.3",
-    "@react-stately/virtualizer": "^4.4.1",
-    "@react-types/grid": "^3.3.3",
-    "@react-types/shared": "^3.30.0",
-    "@react-types/table": "^3.13.1",
+    "@react-stately/collections": "^3.12.7",
+    "@react-stately/table": "^3.15.0",
+    "@react-stately/virtualizer": "^4.4.3",
+    "@react-types/grid": "^3.3.5",
+    "@react-types/shared": "^3.32.0",
+    "@react-types/table": "^3.13.3",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "265b4d7f107905ee1c6e87a8af1613ab440a6849"
+  "gitHead": "2c58ed3ddd9be9100af9b1d0cfd137fcdc95ba2d"
 }

package/src/GridLayout.ts

@@ -36,6 +36,11 @@ export interface GridLayoutOptions {
    * @default 18 x 18
    */
   minSpace?: Size,
+  /**
+   * The maximum allowed horizontal space between items.
+   * @default Infinity
+   */
+  maxHorizontalSpace?: number,
   /**
    * The maximum number of columns.
    * @default Infinity
@@ -53,6 +58,7 @@ const DEFAULT_OPTIONS = {
   maxItemSize: new Size(Infinity, Infinity),
   preserveAspectRatio: false,
   minSpace: new Size(18, 18),
+  maxSpace: Infinity,
   maxColumns: Infinity,
   dropIndicatorThickness: 2
 };
@@ -69,6 +75,7 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
   protected numColumns: number = 0;
   private contentSize: Size = new Size();
   private layoutInfos: Map<Key, LayoutInfo> = new Map();
+  private margin: number = 0;
 
   shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
     return newOptions.maxColumns !== oldOptions.maxColumns
@@ -76,7 +83,8 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
       || newOptions.preserveAspectRatio !== oldOptions.preserveAspectRatio
       || (!(newOptions.minItemSize || DEFAULT_OPTIONS.minItemSize).equals(oldOptions.minItemSize || DEFAULT_OPTIONS.minItemSize))
       || (!(newOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize).equals(oldOptions.maxItemSize || DEFAULT_OPTIONS.maxItemSize))
-      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace));
+      || (!(newOptions.minSpace || DEFAULT_OPTIONS.minSpace).equals(oldOptions.minSpace || DEFAULT_OPTIONS.minSpace))
+      || newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace;
   }
 
   update(invalidationContext: InvalidationContext<O>): void {
@@ -85,6 +93,7 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
       maxItemSize = DEFAULT_OPTIONS.maxItemSize,
       preserveAspectRatio = DEFAULT_OPTIONS.preserveAspectRatio,
       minSpace = DEFAULT_OPTIONS.minSpace,
+      maxHorizontalSpace = DEFAULT_OPTIONS.maxSpace,
       maxColumns = DEFAULT_OPTIONS.maxColumns,
       dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness
     } = invalidationContext.layoutOptions || {};
@@ -116,15 +125,26 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
     let itemHeight = minItemSize.height + Math.floor((maxItemHeight - minItemSize.height) * t);
     itemHeight = Math.max(minItemSize.height, Math.min(maxItemHeight, itemHeight));
 
-    // Compute the horizontal spacing and content height
-    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+    // Compute the horizontal spacing, content height and horizontal margin
+    let horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1)));
     this.gap = new Size(horizontalSpacing, minSpace.height);
+    this.margin = Math.floor((visibleWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
 
+    // If there is a skeleton loader within the last 2 items in the collection, increment the collection size
+    // so that an additional row is added for the skeletons.
     let collection = this.virtualizer!.collection;
-    // Make sure to set rows to 0 if we performing a first time load or are rendering the empty state so that Virtualizer
-    // won't try to render its body
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
-    let rows = isEmptyOrLoading ? 0 : Math.ceil(collection.size / numColumns);
+    let collectionSize = collection.size;
+    let lastKey = collection.getLastKey();
+    for (let i = 0; i < 2 && lastKey != null; i++) {
+      let item = collection.getItem(lastKey);
+      if (item?.type === 'skeleton') {
+        collectionSize++;
+        break;
+      }
+      lastKey = collection.getKeyBefore(lastKey);
+    }
+
+    let rows = Math.ceil(collectionSize / numColumns);
     let iterator = collection[Symbol.iterator]();
     let y = rows > 0 ? minSpace.height : 0;
     let newLayoutInfos = new Map();
@@ -155,7 +175,7 @@ export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> exte
         if (skeleton) {
           content = oldLayoutInfo && oldLayoutInfo.content.key === key ? oldLayoutInfo.content : {...skeleton, key};
         }
-        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
+        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing) + this.margin;
         let height = itemHeight;
         let estimatedSize = !preserveAspectRatio;
         if (oldLayoutInfo && estimatedSize) {

package/src/ListLayout.ts

@@ -251,43 +251,49 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     this.validRect = this.requestedRect.copy();
   }
 
-  protected buildCollection(y = this.padding): LayoutNode[] {
+  protected buildCollection(y: number = this.padding): LayoutNode[] {
     let collection = this.virtualizer!.collection;
-    let skipped = 0;
+    let collectionNodes = [...collection];
+    let loaderNodes = collectionNodes.filter(node => node.type === 'loader');
     let nodes: LayoutNode[] = [];
-    let isEmptyOrLoading = collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader');
+    let isEmptyOrLoading = collection?.size === 0;
     if (isEmptyOrLoading) {
       y = 0;
     }
 
-    for (let node of collection) {
+    for (let node of collectionNodes) {
       let rowHeight = (this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT) + this.gap;
       // Skip rows before the valid rectangle unless they are already cached.
       if (node.type === 'item' && y + rowHeight < this.requestedRect.y && !this.isValid(node, y)) {
         y += rowHeight;
-        skipped++;
         continue;
       }
 
       let layoutNode = this.buildChild(node, this.padding, y, null);
       y = layoutNode.layoutInfo.rect.maxY + this.gap;
       nodes.push(layoutNode);
-      if (node.type === 'item' && y > this.requestedRect.maxY) {
-        let itemsAfterRect = collection.size - (nodes.length + skipped);
-        let lastNode = collection.getItem(collection.getLastKey()!);
-        if (lastNode?.type === 'loader') {
-          itemsAfterRect--;
-        }
-
-        y += itemsAfterRect * rowHeight;
+      if (node.type === 'loader') {
+        let index = loaderNodes.indexOf(node);
+        loaderNodes.splice(index, 1);
+      }
 
-        // Always add the loader sentinel if present. This assumes the loader is the last option/row
-        // will need to refactor when handling multi section loading
-        if (lastNode?.type === 'loader' && nodes.at(-1)?.layoutInfo.type !== 'loader') {
-          let loader = this.buildChild(lastNode, this.padding, y, null);
+      // Build each loader that exists in the collection that is outside the visible rect so that they are persisted
+      // at the proper estimated location. If the node.type is "section" then we don't do this shortcut since we have to
+      // build the sections to see how tall they are.
+      if ((node.type === 'item' || node.type === 'loader') && y > this.requestedRect.maxY) {
+        let lastProcessedIndex = collectionNodes.indexOf(node);
+        for (let loaderNode of loaderNodes) {
+          let loaderNodeIndex = collectionNodes.indexOf(loaderNode);
+          // Subtract by an additional 1 since we've already added the current item's height to y
+          y += (loaderNodeIndex - lastProcessedIndex - 1) * rowHeight;
+          let loader = this.buildChild(loaderNode, this.padding, y, null);
           nodes.push(loader);
           y = loader.layoutInfo.rect.maxY;
+          lastProcessedIndex = loaderNodeIndex;
         }
+
+        // Account for the rest of the items after the last loader spinner, subtract by 1 since we've processed the current node's height already
+        y += (collectionNodes.length - lastProcessedIndex - 1) * rowHeight;
         break;
       }
     }
@@ -585,8 +591,24 @@ export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> exte
     let layoutInfo = this.getLayoutInfo(target.key)!;
     let rect: Rect;
     if (target.dropPosition === 'before') {
-      rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+      rect = new Rect(layoutInfo.rect.x, Math.max(0, layoutInfo.rect.y - this.dropIndicatorThickness / 2), layoutInfo.rect.width, this.dropIndicatorThickness);
     } else if (target.dropPosition === 'after') {
+      // Render after last visible descendant of the drop target.
+      let targetNode = this.collection.getItem(target.key);
+      if (targetNode) {
+        let targetLevel = targetNode.level ?? 0;
+        let currentKey = this.collection.getKeyAfter(target.key);
+
+        while (currentKey != null) {
+          let node = this.collection.getItem(currentKey);
+          if (!node || node.level <= targetLevel) {
+            break;
+          }
+
+          layoutInfo = this.getLayoutInfo(currentKey) || layoutInfo;
+          currentKey = this.collection.getKeyAfter(currentKey);
+        }
+      }
       rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
     } else {
       rect = layoutInfo.rect;