@solid2-aria/stately 0.0.0-stage → 0.0.1

package/dist/layout/waterfall-layout.d.ts

@@ -0,0 +1,85 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/layout/WaterfallLayout.ts.
+ * Modified for Solid Aria: adapted imports, collection descriptors, and reactive state APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { Size } from "../virtualizer/size.js";
+import { Rect } from "../virtualizer/rect.js";
+import { LayoutInfo } from "../virtualizer/layout-info.js";
+import { InvalidationContext } from "../virtualizer/types.js";
+import { Layout } from "../virtualizer/layout.js";
+import { DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node } from "@solid2-aria/types-shared";
+export interface WaterfallLayoutOptions {
+  /**
+   * The minimum item size.
+   *
+   * @default 200 x 200
+   */
+  minItemSize?: Size;
+  /**
+   * The maximum item size.
+   *
+   * @default Infinity
+   */
+  maxItemSize?: Size;
+  /**
+   * The minimum space required between items.
+   *
+   * @default 18 x 18
+   */
+  minSpace?: Size;
+  /**
+   * The maximum allowed horizontal space between items.
+   *
+   * @default Infinity
+   */
+  maxHorizontalSpace?: number;
+  /**
+   * The maximum number of columns.
+   *
+   * @default Infinity
+   */
+  maxColumns?: number;
+  /**
+   * The thickness of the drop indicator.
+   *
+   * @default 2
+   */
+  dropIndicatorThickness?: number;
+  /**
+   * The fixed height of a loader element in px. This loader is specifically for "load more"
+   * elements rendered when loading more rows at the root level or inside nested row/sections.
+   *
+   * @default 48
+   */
+  loaderHeight?: number;
+}
+export declare class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {
+  private contentSize;
+  private layoutInfos;
+  protected numColumns: number;
+  protected dropIndicatorThickness: number;
+  private margin;
+  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
+  update(invalidationContext: InvalidationContext<O>): void;
+  getLayoutInfo(key: Key): LayoutInfo | null;
+  getContentSize(): Size;
+  getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+  updateItemSize(key: Key, size: Size): boolean;
+  getKeyRightOf(key: Key): Key | null;
+  getKeyLeftOf(key: Key): Key | null;
+  getKeyRange(from: Key, to: Key): Key[];
+  getDropTargetFromPoint(initialX: number, initialY: number): DropTarget;
+}
+//# sourceMappingURL=waterfall-layout.d.ts.map

package/dist/layout/waterfall-layout.js

@@ -0,0 +1,225 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/layout/WaterfallLayout.ts.
+ * Modified for Solid Aria: adapted imports, collection descriptors, and reactive state APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { getNodeProps } from "../utils/get-node-props.js";
+import { requireValue } from "../utils/require-value.js";
+import { Layout } from "../virtualizer/layout.js";
+import { LayoutInfo } from "../virtualizer/layout-info.js";
+import { Point } from "../virtualizer/point.js";
+import { Rect } from "../virtualizer/rect.js";
+import { Size } from "../virtualizer/size.js";
+// src/layout/waterfall-layout.ts
+var WaterfallLayoutInfo = class WaterfallLayoutInfo extends LayoutInfo {
+	column = 0;
+	index = 0;
+	copy() {
+		const res = Object.assign(new WaterfallLayoutInfo(this.type, this.key, this.rect.copy()), super.copy());
+		res.column = this.column;
+		res.index = this.index;
+		return res;
+	}
+};
+const DEFAULT_OPTIONS = {
+	dropIndicatorThickness: 2,
+	loaderHeight: 48,
+	maxColumns: Infinity,
+	maxItemSize: new Size(Infinity, Infinity),
+	maxSpace: Infinity,
+	minItemSize: new Size(200, 200),
+	minSpace: new Size(18, 18)
+};
+var WaterfallLayout = class extends Layout {
+	contentSize = new Size();
+	layoutInfos = /* @__PURE__ */ new Map();
+	numColumns = 0;
+	dropIndicatorThickness = 2;
+	margin = 0;
+	shouldInvalidateLayoutOptions(newOptions, oldOptions) {
+		return newOptions.maxColumns !== oldOptions.maxColumns || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness || !(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.maxHorizontalSpace !== oldOptions.maxHorizontalSpace || newOptions.loaderHeight !== oldOptions.loaderHeight;
+	}
+	update(invalidationContext) {
+		const measureGrid = () => {
+			const { minItemSize = DEFAULT_OPTIONS.minItemSize, maxItemSize = DEFAULT_OPTIONS.maxItemSize, minSpace = DEFAULT_OPTIONS.minSpace, maxHorizontalSpace = DEFAULT_OPTIONS.maxSpace, maxColumns = DEFAULT_OPTIONS.maxColumns, dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness } = invalidationContext.layoutOptions ?? {};
+			const loaderHeight = invalidationContext.layoutOptions?.loaderHeight ?? DEFAULT_OPTIONS.loaderHeight;
+			this.dropIndicatorThickness = dropIndicatorThickness;
+			const virtualizerWidth = this.attachedVirtualizer.size.width;
+			const maxItemWidth = Math.min(maxItemSize.width, virtualizerWidth);
+			const maxItemHeight = Number.isFinite(maxItemSize.height) ? maxItemSize.height : Math.floor(minItemSize.height / minItemSize.width * maxItemWidth);
+			const columns = Math.floor(virtualizerWidth / (minItemSize.width + minSpace.width));
+			const numColumns = Math.max(1, Math.min(maxColumns, columns));
+			const width = virtualizerWidth - minSpace.width * Math.max(0, numColumns);
+			let itemWidth = Math.floor(width / numColumns);
+			itemWidth = Math.max(minItemSize.width, Math.min(maxItemWidth, itemWidth));
+			const 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));
+			const horizontalSpacing = Math.min(Math.max(maxHorizontalSpace, minSpace.width), Math.floor((virtualizerWidth - numColumns * itemWidth) / (numColumns + 1)));
+			this.margin = Math.floor((virtualizerWidth - numColumns * itemWidth - horizontalSpacing * (numColumns + 1)) / 2);
+			return {
+				horizontalSpacing,
+				itemHeight,
+				itemWidth,
+				loaderHeight,
+				minSpace,
+				numColumns,
+				virtualizerWidth
+			};
+		};
+		const { virtualizerWidth, numColumns, itemWidth, itemHeight, horizontalSpacing, minSpace, loaderHeight: initialLoaderHeight } = measureGrid();
+		let loaderHeight = initialLoaderHeight;
+		const columnHeights = Array.from({ length: numColumns }, () => minSpace.height);
+		const newLayoutInfos = /* @__PURE__ */ new Map();
+		let index = 0;
+		const addNode = (key, node) => {
+			const oldLayoutInfo = this.layoutInfos.get(key);
+			let height = itemHeight;
+			let estimatedSize = true;
+			if (oldLayoutInfo) {
+				height = oldLayoutInfo.rect.height / oldLayoutInfo.rect.width * itemWidth;
+				estimatedSize = invalidationContext.sizeChanged === true || oldLayoutInfo.estimatedSize || oldLayoutInfo.content !== node;
+			}
+			let column = numColumns === this.numColumns && oldLayoutInfo && oldLayoutInfo.index === index && oldLayoutInfo.rect.y < this.attachedVirtualizer.visibleRect.maxY ? oldLayoutInfo.column : void 0;
+			if (column === void 0) {
+				column = 0;
+				let minimumHeight = Infinity;
+				for (const [candidate, columnHeight] of columnHeights.entries()) if (columnHeight < minimumHeight) {
+					column = candidate;
+					minimumHeight = columnHeight;
+				}
+			}
+			const x = horizontalSpacing + column * (itemWidth + horizontalSpacing) + this.margin;
+			const y = requireValue(columnHeights[column], "The selected waterfall column must exist.");
+			const rect = new Rect(x, y, itemWidth, height);
+			const layoutInfo = new WaterfallLayoutInfo(node.type, key, rect);
+			layoutInfo.estimatedSize = estimatedSize;
+			layoutInfo.allowOverflow = true;
+			layoutInfo.content = node;
+			layoutInfo.column = column;
+			layoutInfo.index = index;
+			index += 1;
+			newLayoutInfos.set(key, layoutInfo);
+			columnHeights[column] = y + layoutInfo.rect.height + minSpace.height;
+		};
+		const { collection } = this.attachedVirtualizer;
+		let skeletonCount = 0;
+		for (const node of collection) if (node.type === "skeleton") {
+			const startingHeights = [...columnHeights];
+			while (!columnHeights.every((h, i) => h !== startingHeights[i]) || Math.min(...columnHeights) < this.attachedVirtualizer.size.height) {
+				const key = `${node.key}-${skeletonCount}`;
+				skeletonCount += 1;
+				addNode(key, this.layoutInfos.get(key)?.content ?? { ...node });
+			}
+			break;
+		} else if (node.type !== "loader") addNode(node.key, node);
+		let maxHeight = collection.size === 0 ? 0 : Math.max(...columnHeights);
+		const lastKey = collection.getLastKey();
+		const lastNode = lastKey === null ? null : collection.getItem(lastKey);
+		if (lastNode?.type === "loader") {
+			if (skeletonCount > 0 || !getNodeProps(lastNode).isLoading) loaderHeight = 0;
+			const loaderWidth = virtualizerWidth - horizontalSpacing * 2;
+			const rect = new Rect(horizontalSpacing, maxHeight, loaderWidth, loaderHeight);
+			const layoutInfo = new WaterfallLayoutInfo("loader", lastNode.key, rect);
+			newLayoutInfos.set(lastNode.key, layoutInfo);
+			maxHeight = layoutInfo.rect.maxY;
+		}
+		this.contentSize = new Size(this.attachedVirtualizer.size.width, maxHeight);
+		this.layoutInfos = newLayoutInfos;
+		this.numColumns = numColumns;
+	}
+	getLayoutInfo(key) {
+		return this.layoutInfos.get(key) ?? null;
+	}
+	getContentSize() {
+		return this.contentSize;
+	}
+	getVisibleLayoutInfos(rect) {
+		const layoutInfos = [];
+		for (const layoutInfo of this.layoutInfos.values()) if (layoutInfo.rect.intersects(rect) || this.attachedVirtualizer.isPersistedKey(layoutInfo.key) || layoutInfo.type === "loader") layoutInfos.push(layoutInfo);
+		return layoutInfos;
+	}
+	updateItemSize(key, size) {
+		const layoutInfo = this.layoutInfos.get(key);
+		if (!layoutInfo) return false;
+		if (size.height !== layoutInfo.rect.height) {
+			const newLayoutInfo = layoutInfo.copy();
+			newLayoutInfo.rect.height = size.height;
+			newLayoutInfo.estimatedSize = false;
+			this.layoutInfos.set(key, newLayoutInfo);
+			return true;
+		}
+		return false;
+	}
+	getKeyRightOf(key) {
+		const layoutInfo = this.getLayoutInfo(key);
+		if (!layoutInfo) return null;
+		const rect = new Rect(layoutInfo.rect.maxX, layoutInfo.rect.y, this.attachedVirtualizer.visibleRect.maxX - layoutInfo.rect.maxX, layoutInfo.rect.height);
+		const layoutInfos = this.getVisibleLayoutInfos(rect);
+		let bestKey = null;
+		let bestDistance = Infinity;
+		for (const candidate of layoutInfos) {
+			if (candidate.key === key) continue;
+			const distance = candidate.rect.x - rect.x - (Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y));
+			if (distance < bestDistance) {
+				bestDistance = distance;
+				bestKey = candidate.key;
+			}
+		}
+		return bestKey;
+	}
+	getKeyLeftOf(key) {
+		const layoutInfo = this.getLayoutInfo(key);
+		if (!layoutInfo) return null;
+		const rect = new Rect(0, layoutInfo.rect.y, layoutInfo.rect.x, layoutInfo.rect.height);
+		const layoutInfos = this.getVisibleLayoutInfos(rect);
+		let bestKey = null;
+		let bestDistance = Infinity;
+		for (const candidate of layoutInfos) {
+			if (candidate.key === key) continue;
+			const distance = rect.maxX - candidate.rect.maxX - (Math.min(candidate.rect.maxY, rect.maxY) - Math.max(candidate.rect.y, rect.y));
+			if (distance < bestDistance) {
+				bestDistance = distance;
+				bestKey = candidate.key;
+			}
+		}
+		return bestKey;
+	}
+	getKeyRange(from, to) {
+		const fromLayoutInfo = this.getLayoutInfo(from);
+		const toLayoutInfo = this.getLayoutInfo(to);
+		if (!fromLayoutInfo || !toLayoutInfo) return [];
+		const rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);
+		const keys = [];
+		for (const layoutInfo of this.layoutInfos.values()) if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) keys.push(layoutInfo.key);
+		return keys;
+	}
+	getDropTargetFromPoint(initialX, initialY) {
+		let x = initialX;
+		let y = initialY;
+		if (this.layoutInfos.size === 0) return { type: "root" };
+		x += this.attachedVirtualizer.visibleRect.x;
+		y += this.attachedVirtualizer.visibleRect.y;
+		const key = this.attachedVirtualizer.keyAtPoint(new Point(x, y));
+		if (key === null || key === void 0) return { type: "root" };
+		return {
+			dropPosition: "on",
+			key,
+			type: "item"
+		};
+	}
+};
+export { WaterfallLayout };
+
+//# sourceMappingURL=waterfall-layout.js.map

package/dist/layout/waterfall-layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"waterfall-layout.js","names":[],"sources":["../../src/layout/waterfall-layout.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/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/layout/WaterfallLayout.ts.\n * Modified for Solid Aria: adapted imports, collection descriptors, and reactive state APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport type {\n  DropTarget,\n  DropTargetDelegate,\n  Key,\n  LayoutDelegate,\n  Node,\n} from \"@solid2-aria/types-shared\";\n\nimport { getNodeProps } from \"../utils/get-node-props\";\nimport { requireValue } from \"../utils/require-value\";\nimport { Layout } from \"../virtualizer/layout\";\nimport { LayoutInfo } from \"../virtualizer/layout-info\";\nimport { Point } from \"../virtualizer/point\";\nimport { Rect } from \"../virtualizer/rect\";\nimport { Size } from \"../virtualizer/size\";\nimport type { InvalidationContext } from \"../virtualizer/types\";\n\nexport interface WaterfallLayoutOptions {\n  /**\n   * The minimum item size.\n   *\n   * @default 200 x 200\n   */\n  minItemSize?: Size;\n  /**\n   * The maximum item size.\n   *\n   * @default Infinity\n   */\n  maxItemSize?: Size;\n  /**\n   * The minimum space required between items.\n   *\n   * @default 18 x 18\n   */\n  minSpace?: Size;\n  /**\n   * The maximum allowed horizontal space between items.\n   *\n   * @default Infinity\n   */\n  maxHorizontalSpace?: number;\n  /**\n   * The maximum number of columns.\n   *\n   * @default Infinity\n   */\n  maxColumns?: number;\n  /**\n   * The thickness of the drop indicator.\n   *\n   * @default 2\n   */\n  dropIndicatorThickness?: number;\n  /**\n   * The fixed height of a loader element in px. This loader is specifically for \"load more\"\n   * elements rendered when loading more rows at the root level or inside nested row/sections.\n   *\n   * @default 48\n   */\n  loaderHeight?: number;\n}\n\nclass WaterfallLayoutInfo<T> extends LayoutInfo<Node<T>> {\n  column = 0;\n  index = 0;\n  override copy(): WaterfallLayoutInfo<T> {\n    const res = Object.assign(\n      new WaterfallLayoutInfo<T>(this.type, this.key, this.rect.copy()),\n      super.copy()\n    );\n\n    res.column = this.column;\n    res.index = this.index;\n\n    return res;\n  }\n}\n\nconst DEFAULT_OPTIONS = {\n  dropIndicatorThickness: 2,\n  loaderHeight: 48,\n  maxColumns: Infinity,\n  maxItemSize: new Size(Infinity, Infinity),\n  maxSpace: Infinity,\n  minItemSize: new Size(200, 200),\n  minSpace: new Size(18, 18),\n};\n\nexport class WaterfallLayout<\n  T extends object,\n  O extends WaterfallLayoutOptions = WaterfallLayoutOptions,\n>\n  extends Layout<Node<T>, O>\n  implements LayoutDelegate, DropTargetDelegate\n{\n  private contentSize: Size = new Size();\n  private layoutInfos = new Map<Key, WaterfallLayoutInfo<T>>();\n  protected numColumns = 0;\n  protected dropIndicatorThickness = 2;\n  private margin = 0;\n  override shouldInvalidateLayoutOptions(\n    newOptions: O,\n    oldOptions: O\n  ): boolean {\n    return (\n      newOptions.maxColumns !== oldOptions.maxColumns ||\n      newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness ||\n      !(newOptions.minItemSize ?? DEFAULT_OPTIONS.minItemSize).equals(\n        oldOptions.minItemSize ?? DEFAULT_OPTIONS.minItemSize\n      ) ||\n      !(newOptions.maxItemSize ?? DEFAULT_OPTIONS.maxItemSize).equals(\n        oldOptions.maxItemSize ?? DEFAULT_OPTIONS.maxItemSize\n      ) ||\n      !(newOptions.minSpace ?? DEFAULT_OPTIONS.minSpace).equals(\n        oldOptions.minSpace ?? DEFAULT_OPTIONS.minSpace\n      ) ||\n      newOptions.maxHorizontalSpace !== oldOptions.maxHorizontalSpace ||\n      newOptions.loaderHeight !== oldOptions.loaderHeight\n    );\n  }\n  override update(invalidationContext: InvalidationContext<O>): void {\n    const measureGrid = () => {\n      const {\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\n      const loaderHeight =\n        invalidationContext.layoutOptions?.loaderHeight ??\n        DEFAULT_OPTIONS.loaderHeight;\n\n      this.dropIndicatorThickness = dropIndicatorThickness;\n      const virtualizerWidth = this.attachedVirtualizer.size.width;\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      const maxItemWidth = Math.min(maxItemSize.width, virtualizerWidth);\n\n      const 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      const columns = Math.floor(\n        virtualizerWidth / (minItemSize.width + minSpace.width)\n      );\n\n      const numColumns = Math.max(1, Math.min(maxColumns, columns));\n      // Compute the available width (minus the space between items)\n      const width = virtualizerWidth - minSpace.width * Math.max(0, numColumns);\n      // Compute the item width based on the space available\n      let itemWidth = Math.floor(width / numColumns);\n      itemWidth = Math.max(\n        minItemSize.width,\n        Math.min(maxItemWidth, itemWidth)\n      );\n\n      // Compute the item height, which is proportional to the item width\n      const t =\n        (itemWidth - minItemSize.width) /\n        Math.max(1, maxItemWidth - minItemSize.width);\n\n      let itemHeight =\n        minItemSize.height +\n        Math.floor((maxItemHeight - minItemSize.height) * t);\n\n      itemHeight = Math.max(\n        minItemSize.height,\n        Math.min(maxItemHeight, itemHeight)\n      );\n\n      // Compute the horizontal spacing, content height and horizontal margin\n      const horizontalSpacing = Math.min(\n        Math.max(maxHorizontalSpace, minSpace.width),\n        Math.floor(\n          (virtualizerWidth - numColumns * itemWidth) / (numColumns + 1)\n        )\n      );\n\n      this.margin = Math.floor(\n        (virtualizerWidth -\n          numColumns * itemWidth -\n          horizontalSpacing * (numColumns + 1)) /\n          2\n      );\n\n      return {\n        horizontalSpacing,\n        itemHeight,\n        itemWidth,\n        loaderHeight,\n        minSpace,\n        numColumns,\n        virtualizerWidth,\n      };\n    };\n\n    const {\n      virtualizerWidth,\n      numColumns,\n      itemWidth,\n      itemHeight,\n      horizontalSpacing,\n      minSpace,\n      loaderHeight: initialLoaderHeight,\n    } = measureGrid();\n\n    let loaderHeight = initialLoaderHeight;\n\n    // Setup an array of column heights\n    const columnHeights = Array.from(\n      { length: numColumns },\n      () => minSpace.height\n    );\n\n    const newLayoutInfos = new Map<Key, WaterfallLayoutInfo<T>>();\n    let index = 0;\n\n    const addNode = (key: Key, node: Node<T>) => {\n      const oldLayoutInfo = this.layoutInfos.get(key);\n      let height = itemHeight;\n      let estimatedSize = true;\n\n      if (oldLayoutInfo) {\n        height =\n          (oldLayoutInfo.rect.height / oldLayoutInfo.rect.width) * itemWidth;\n        estimatedSize =\n          invalidationContext.sizeChanged === true ||\n          oldLayoutInfo.estimatedSize ||\n          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      const prevColumn =\n        numColumns === this.numColumns &&\n        oldLayoutInfo &&\n        oldLayoutInfo.index === index &&\n        oldLayoutInfo.rect.y < this.attachedVirtualizer.visibleRect.maxY\n          ? oldLayoutInfo.column\n          : undefined;\n\n      let column = prevColumn;\n\n      if (column === undefined) {\n        column = 0;\n        let minimumHeight = Infinity;\n\n        for (const [candidate, columnHeight] of columnHeights.entries()) {\n          if (columnHeight < minimumHeight) {\n            column = candidate;\n            minimumHeight = columnHeight;\n          }\n        }\n      }\n\n      const x =\n        horizontalSpacing +\n        column * (itemWidth + horizontalSpacing) +\n        this.margin;\n\n      const y = requireValue(\n        columnHeights[column],\n        \"The selected waterfall column must exist.\"\n      );\n\n      const rect = new Rect(x, y, itemWidth, height);\n      const layoutInfo = new WaterfallLayoutInfo<T>(node.type, key, rect);\n      layoutInfo.estimatedSize = estimatedSize;\n      layoutInfo.allowOverflow = true;\n      layoutInfo.content = node;\n      layoutInfo.column = column;\n      layoutInfo.index = index;\n      index += 1;\n      newLayoutInfos.set(key, layoutInfo);\n      columnHeights[column] = y + layoutInfo.rect.height + minSpace.height;\n    };\n\n    const { collection } = this.attachedVirtualizer;\n    let skeletonCount = 0;\n\n    for (const 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        const startingHeights = [...columnHeights];\n\n        while (\n          !columnHeights.every((h, i) => h !== startingHeights[i]) ||\n          Math.min(...columnHeights) < this.attachedVirtualizer.size.height\n        ) {\n          const key = `${node.key}-${skeletonCount}`;\n          skeletonCount += 1;\n          const content = this.layoutInfos.get(key)?.content ?? { ...node };\n          addNode(key, content);\n        }\n\n        break;\n      } else if (node.type !== \"loader\") {\n        addNode(node.key, node);\n      }\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    const isEmptyOrLoading = collection.size === 0;\n\n    let maxHeight = isEmptyOrLoading ? 0 : Math.max(...columnHeights);\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    const lastKey = collection.getLastKey();\n    const lastNode = lastKey === null ? null : collection.getItem(lastKey);\n\n    if (lastNode?.type === \"loader\") {\n      if (skeletonCount > 0 || !getNodeProps(lastNode).isLoading) {\n        loaderHeight = 0;\n      }\n\n      const loaderWidth = virtualizerWidth - horizontalSpacing * 2;\n\n      // Note that if the user provides isLoading to their sentinel during a case where they only want to render the emptyState, this will reserve\n      // room for the loader alongside rendering the emptyState\n      const rect = new Rect(\n        horizontalSpacing,\n        maxHeight,\n        loaderWidth,\n        loaderHeight\n      );\n\n      const layoutInfo = new WaterfallLayoutInfo<T>(\n        \"loader\",\n        lastNode.key,\n        rect\n      );\n\n      newLayoutInfos.set(lastNode.key, layoutInfo);\n      maxHeight = layoutInfo.rect.maxY;\n    }\n\n    this.contentSize = new Size(this.attachedVirtualizer.size.width, maxHeight);\n    this.layoutInfos = newLayoutInfos;\n    this.numColumns = numColumns;\n  }\n  getLayoutInfo(key: Key): LayoutInfo | null {\n    return this.layoutInfos.get(key) ?? null;\n  }\n  getContentSize(): Size {\n    return this.contentSize;\n  }\n  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {\n    const layoutInfos: LayoutInfo[] = [];\n\n    for (const layoutInfo of this.layoutInfos.values()) {\n      if (\n        layoutInfo.rect.intersects(rect) ||\n        this.attachedVirtualizer.isPersistedKey(layoutInfo.key) ||\n        layoutInfo.type === \"loader\"\n      ) {\n        layoutInfos.push(layoutInfo);\n      }\n    }\n\n    return layoutInfos;\n  }\n  override updateItemSize(key: Key, size: Size): boolean {\n    const layoutInfo = this.layoutInfos.get(key);\n\n    if (!layoutInfo) {\n      return false;\n    }\n\n    if (size.height !== layoutInfo.rect.height) {\n      const newLayoutInfo = layoutInfo.copy();\n      newLayoutInfo.rect.height = size.height;\n      newLayoutInfo.estimatedSize = false;\n      this.layoutInfos.set(key, newLayoutInfo);\n\n      return true;\n    }\n\n    return false;\n  }\n  // Override keyboard navigation to work spatially.\n  getKeyRightOf(key: Key): Key | null {\n    const layoutInfo = this.getLayoutInfo(key);\n\n    if (!layoutInfo) {\n      return null;\n    }\n\n    const rect = new Rect(\n      layoutInfo.rect.maxX,\n      layoutInfo.rect.y,\n      this.attachedVirtualizer.visibleRect.maxX - layoutInfo.rect.maxX,\n      layoutInfo.rect.height\n    );\n\n    const layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n\n    for (const 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      const deltaX = candidate.rect.x - rect.x;\n\n      const overlapY =\n        Math.min(candidate.rect.maxY, rect.maxY) -\n        Math.max(candidate.rect.y, rect.y);\n\n      const distance = deltaX - overlapY;\n\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\n  }\n  getKeyLeftOf(key: Key): Key | null {\n    const layoutInfo = this.getLayoutInfo(key);\n\n    if (!layoutInfo) {\n      return null;\n    }\n\n    const rect = new Rect(\n      0,\n      layoutInfo.rect.y,\n      layoutInfo.rect.x,\n      layoutInfo.rect.height\n    );\n\n    const layoutInfos = this.getVisibleLayoutInfos(rect);\n    let bestKey: Key | null = null;\n    let bestDistance = Infinity;\n\n    for (const 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      const deltaX = rect.maxX - candidate.rect.maxX;\n\n      const overlapY =\n        Math.min(candidate.rect.maxY, rect.maxY) -\n        Math.max(candidate.rect.y, rect.y);\n\n      const distance = deltaX - overlapY;\n\n      if (distance < bestDistance) {\n        bestDistance = distance;\n        bestKey = candidate.key;\n      }\n    }\n\n    return bestKey;\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    const fromLayoutInfo = this.getLayoutInfo(from);\n    const toLayoutInfo = this.getLayoutInfo(to);\n\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    const rect = fromLayoutInfo.rect.union(toLayoutInfo.rect);\n    const keys: Key[] = [];\n\n    for (const layoutInfo of this.layoutInfos.values()) {\n      if (rect.intersection(layoutInfo.rect).area > layoutInfo.rect.area / 2) {\n        keys.push(layoutInfo.key);\n      }\n    }\n\n    return keys;\n  }\n  getDropTargetFromPoint(initialX: number, initialY: number): DropTarget {\n    let x = initialX;\n\n    let y = initialY;\n\n    if (this.layoutInfos.size === 0) {\n      return { type: \"root\" };\n    }\n\n    x += this.attachedVirtualizer.visibleRect.x;\n    y += this.attachedVirtualizer.visibleRect.y;\n    const key = this.attachedVirtualizer.keyAtPoint(new Point(x, y));\n\n    if (key === null || key === undefined) {\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      dropPosition: \"on\",\n      key,\n      type: \"item\",\n    };\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgFA,IAAM,sBAAN,MAAM,4BAA+B,WAAoB;CACvD,SAAS;CACT,QAAQ;CACR,OAAwC;EACtC,MAAM,MAAM,OAAO,OACjB,IAAI,oBAAuB,KAAK,MAAM,KAAK,KAAK,KAAK,KAAK,KAAK,CAAC,GAChE,MAAM,KAAK,CACb;EAEA,IAAI,SAAS,KAAK;EAClB,IAAI,QAAQ,KAAK;EAEjB,OAAO;CACT;AACF;AAEA,MAAM,kBAAkB;CACtB,wBAAwB;CACxB,cAAc;CACd,YAAY;CACZ,aAAa,IAAI,KAAK,UAAU,QAAQ;CACxC,UAAU;CACV,aAAa,IAAI,KAAK,KAAK,GAAG;CAC9B,UAAU,IAAI,KAAK,IAAI,EAAE;AAC3B;AAEA,IAAa,kBAAb,cAIU,OAEV;CACE,cAA4B,IAAI,KAAK;CACrC,8BAAsB,IAAI,IAAiC;CAC3D,aAAuB;CACvB,yBAAmC;CACnC,SAAiB;CACjB,8BACE,YACA,YACS;EACT,OACE,WAAW,eAAe,WAAW,cACrC,WAAW,2BAA2B,WAAW,0BACjD,EAAE,WAAW,eAAe,gBAAgB,YAAA,CAAa,OACvD,WAAW,eAAe,gBAAgB,WAC5C,KACA,EAAE,WAAW,eAAe,gBAAgB,YAAA,CAAa,OACvD,WAAW,eAAe,gBAAgB,WAC5C,KACA,EAAE,WAAW,YAAY,gBAAgB,SAAA,CAAU,OACjD,WAAW,YAAY,gBAAgB,QACzC,KACA,WAAW,uBAAuB,WAAW,sBAC7C,WAAW,iBAAiB,WAAW;CAE3C;CACA,OAAgB,qBAAmD;EACjE,MAAM,oBAAoB;GACxB,MAAM,EACJ,cAAc,gBAAgB,aAC9B,cAAc,gBAAgB,aAC9B,WAAW,gBAAgB,UAC3B,qBAAqB,gBAAgB,UACrC,aAAa,gBAAgB,YAC7B,yBAAyB,gBAAgB,2BACvC,oBAAoB,iBAAiB,CAAC;GAE1C,MAAM,eACJ,oBAAoB,eAAe,gBACnC,gBAAgB;GAElB,KAAK,yBAAyB;GAC9B,MAAM,mBAAmB,KAAK,oBAAoB,KAAK;GAGvD,MAAM,eAAe,KAAK,IAAI,YAAY,OAAO,gBAAgB;GAEjE,MAAM,gBAAgB,OAAO,SAAS,YAAY,MAAM,IACpD,YAAY,SACZ,KAAK,MAAO,YAAY,SAAS,YAAY,QAAS,YAAY;GAGtE,MAAM,UAAU,KAAK,MACnB,oBAAoB,YAAY,QAAQ,SAAS,MACnD;GAEA,MAAM,aAAa,KAAK,IAAI,GAAG,KAAK,IAAI,YAAY,OAAO,CAAC;GAE5D,MAAM,QAAQ,mBAAmB,SAAS,QAAQ,KAAK,IAAI,GAAG,UAAU;GAExE,IAAI,YAAY,KAAK,MAAM,QAAQ,UAAU;GAC7C,YAAY,KAAK,IACf,YAAY,OACZ,KAAK,IAAI,cAAc,SAAS,CAClC;GAGA,MAAM,KACH,YAAY,YAAY,SACzB,KAAK,IAAI,GAAG,eAAe,YAAY,KAAK;GAE9C,IAAI,aACF,YAAY,SACZ,KAAK,OAAO,gBAAgB,YAAY,UAAU,CAAC;GAErD,aAAa,KAAK,IAChB,YAAY,QACZ,KAAK,IAAI,eAAe,UAAU,CACpC;GAGA,MAAM,oBAAoB,KAAK,IAC7B,KAAK,IAAI,oBAAoB,SAAS,KAAK,GAC3C,KAAK,OACF,mBAAmB,aAAa,cAAc,aAAa,EAC9D,CACF;GAEA,KAAK,SAAS,KAAK,OAChB,mBACC,aAAa,YACb,qBAAqB,aAAa,MAClC,CACJ;GAEA,OAAO;IACL;IACA;IACA;IACA;IACA;IACA;IACA;GACF;EACF;EAEA,MAAM,EACJ,kBACA,YACA,WACA,YACA,mBACA,UACA,cAAc,wBACZ,YAAY;EAEhB,IAAI,eAAe;EAGnB,MAAM,gBAAgB,MAAM,KAC1B,EAAE,QAAQ,WAAW,SACf,SAAS,MACjB;EAEA,MAAM,iCAAiB,IAAI,IAAiC;EAC5D,IAAI,QAAQ;EAEZ,MAAM,WAAW,KAAU,SAAkB;GAC3C,MAAM,gBAAgB,KAAK,YAAY,IAAI,GAAG;GAC9C,IAAI,SAAS;GACb,IAAI,gBAAgB;GAEpB,IAAI,eAAe;IACjB,SACG,cAAc,KAAK,SAAS,cAAc,KAAK,QAAS;IAC3D,gBACE,oBAAoB,gBAAgB,QACpC,cAAc,iBACd,cAAc,YAAY;GAC9B;GAYA,IAAI,SAPF,eAAe,KAAK,cACpB,iBACA,cAAc,UAAU,SACxB,cAAc,KAAK,IAAI,KAAK,oBAAoB,YAAY,OACxD,cAAc,SACd,KAAA;GAIN,IAAI,WAAW,KAAA,GAAW;IACxB,SAAS;IACT,IAAI,gBAAgB;IAEpB,KAAK,MAAM,CAAC,WAAW,iBAAiB,cAAc,QAAQ,GAC5D,IAAI,eAAe,eAAe;KAChC,SAAS;KACT,gBAAgB;IAClB;GAEJ;GAEA,MAAM,IACJ,oBACA,UAAU,YAAY,qBACtB,KAAK;GAEP,MAAM,IAAI,aACR,cAAc,SACd,2CACF;GAEA,MAAM,OAAO,IAAI,KAAK,GAAG,GAAG,WAAW,MAAM;GAC7C,MAAM,aAAa,IAAI,oBAAuB,KAAK,MAAM,KAAK,IAAI;GAClE,WAAW,gBAAgB;GAC3B,WAAW,gBAAgB;GAC3B,WAAW,UAAU;GACrB,WAAW,SAAS;GACpB,WAAW,QAAQ;GACnB,SAAS;GACT,eAAe,IAAI,KAAK,UAAU;GAClC,cAAc,UAAU,IAAI,WAAW,KAAK,SAAS,SAAS;EAChE;EAEA,MAAM,EAAE,eAAe,KAAK;EAC5B,IAAI,gBAAgB;EAEpB,KAAK,MAAM,QAAQ,YACjB,IAAI,KAAK,SAAS,YAAY;GAE5B,MAAM,kBAAkB,CAAC,GAAG,aAAa;GAEzC,OACE,CAAC,cAAc,OAAO,GAAG,MAAM,MAAM,gBAAgB,EAAE,KACvD,KAAK,IAAI,GAAG,aAAa,IAAI,KAAK,oBAAoB,KAAK,QAC3D;IACA,MAAM,MAAM,GAAG,KAAK,IAAI,GAAG;IAC3B,iBAAiB;IAEjB,QAAQ,KADQ,KAAK,YAAY,IAAI,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,KAAK,CAC5C;GACtB;GAEA;EACF,OAAO,IAAI,KAAK,SAAS,UACvB,QAAQ,KAAK,KAAK,IAAI;EAQ1B,IAAI,YAFqB,WAAW,SAAS,IAEV,IAAI,KAAK,IAAI,GAAG,aAAa;EAGhE,MAAM,UAAU,WAAW,WAAW;EACtC,MAAM,WAAW,YAAY,OAAO,OAAO,WAAW,QAAQ,OAAO;EAErE,IAAI,UAAU,SAAS,UAAU;GAC/B,IAAI,gBAAgB,KAAK,CAAC,aAAa,QAAQ,CAAC,CAAC,WAC/C,eAAe;GAGjB,MAAM,cAAc,mBAAmB,oBAAoB;GAI3D,MAAM,OAAO,IAAI,KACf,mBACA,WACA,aACA,YACF;GAEA,MAAM,aAAa,IAAI,oBACrB,UACA,SAAS,KACT,IACF;GAEA,eAAe,IAAI,SAAS,KAAK,UAAU;GAC3C,YAAY,WAAW,KAAK;EAC9B;EAEA,KAAK,cAAc,IAAI,KAAK,KAAK,oBAAoB,KAAK,OAAO,SAAS;EAC1E,KAAK,cAAc;EACnB,KAAK,aAAa;CACpB;CACA,cAAc,KAA6B;EACzC,OAAO,KAAK,YAAY,IAAI,GAAG,KAAK;CACtC;CACA,iBAAuB;EACrB,OAAO,KAAK;CACd;CACA,sBAAsB,MAA0B;EAC9C,MAAM,cAA4B,CAAC;EAEnC,KAAK,MAAM,cAAc,KAAK,YAAY,OAAO,GAC/C,IACE,WAAW,KAAK,WAAW,IAAI,KAC/B,KAAK,oBAAoB,eAAe,WAAW,GAAG,KACtD,WAAW,SAAS,UAEpB,YAAY,KAAK,UAAU;EAI/B,OAAO;CACT;CACA,eAAwB,KAAU,MAAqB;EACrD,MAAM,aAAa,KAAK,YAAY,IAAI,GAAG;EAE3C,IAAI,CAAC,YACH,OAAO;EAGT,IAAI,KAAK,WAAW,WAAW,KAAK,QAAQ;GAC1C,MAAM,gBAAgB,WAAW,KAAK;GACtC,cAAc,KAAK,SAAS,KAAK;GACjC,cAAc,gBAAgB;GAC9B,KAAK,YAAY,IAAI,KAAK,aAAa;GAEvC,OAAO;EACT;EAEA,OAAO;CACT;CAEA,cAAc,KAAsB;EAClC,MAAM,aAAa,KAAK,cAAc,GAAG;EAEzC,IAAI,CAAC,YACH,OAAO;EAGT,MAAM,OAAO,IAAI,KACf,WAAW,KAAK,MAChB,WAAW,KAAK,GAChB,KAAK,oBAAoB,YAAY,OAAO,WAAW,KAAK,MAC5D,WAAW,KAAK,MAClB;EAEA,MAAM,cAAc,KAAK,sBAAsB,IAAI;EACnD,IAAI,UAAsB;EAC1B,IAAI,eAAe;EAEnB,KAAK,MAAM,aAAa,aAAa;GACnC,IAAI,UAAU,QAAQ,KACpB;GAUF,MAAM,WANS,UAAU,KAAK,IAAI,KAAK,KAGrC,KAAK,IAAI,UAAU,KAAK,MAAM,KAAK,IAAI,IACvC,KAAK,IAAI,UAAU,KAAK,GAAG,KAAK,CAAC;GAInC,IAAI,WAAW,cAAc;IAC3B,eAAe;IACf,UAAU,UAAU;GACtB;EACF;EAEA,OAAO;CACT;CACA,aAAa,KAAsB;EACjC,MAAM,aAAa,KAAK,cAAc,GAAG;EAEzC,IAAI,CAAC,YACH,OAAO;EAGT,MAAM,OAAO,IAAI,KACf,GACA,WAAW,KAAK,GAChB,WAAW,KAAK,GAChB,WAAW,KAAK,MAClB;EAEA,MAAM,cAAc,KAAK,sBAAsB,IAAI;EACnD,IAAI,UAAsB;EAC1B,IAAI,eAAe;EAEnB,KAAK,MAAM,aAAa,aAAa;GACnC,IAAI,UAAU,QAAQ,KACpB;GAUF,MAAM,WANS,KAAK,OAAO,UAAU,KAAK,QAGxC,KAAK,IAAI,UAAU,KAAK,MAAM,KAAK,IAAI,IACvC,KAAK,IAAI,UAAU,KAAK,GAAG,KAAK,CAAC;GAInC,IAAI,WAAW,cAAc;IAC3B,eAAe;IACf,UAAU,UAAU;GACtB;EACF;EAEA,OAAO;CACT;CAGA,YAAY,MAAW,IAAgB;EACrC,MAAM,iBAAiB,KAAK,cAAc,IAAI;EAC9C,MAAM,eAAe,KAAK,cAAc,EAAE;EAE1C,IAAI,CAAC,kBAAkB,CAAC,cACtB,OAAO,CAAC;EAKV,MAAM,OAAO,eAAe,KAAK,MAAM,aAAa,IAAI;EACxD,MAAM,OAAc,CAAC;EAErB,KAAK,MAAM,cAAc,KAAK,YAAY,OAAO,GAC/C,IAAI,KAAK,aAAa,WAAW,IAAI,CAAC,CAAC,OAAO,WAAW,KAAK,OAAO,GACnE,KAAK,KAAK,WAAW,GAAG;EAI5B,OAAO;CACT;CACA,uBAAuB,UAAkB,UAA8B;EACrE,IAAI,IAAI;EAER,IAAI,IAAI;EAER,IAAI,KAAK,YAAY,SAAS,GAC5B,OAAO,EAAE,MAAM,OAAO;EAGxB,KAAK,KAAK,oBAAoB,YAAY;EAC1C,KAAK,KAAK,oBAAoB,YAAY;EAC1C,MAAM,MAAM,KAAK,oBAAoB,WAAW,IAAI,MAAM,GAAG,CAAC,CAAC;EAE/D,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GAC1B,OAAO,EAAE,MAAM,OAAO;EAKxB,OAAO;GACL,cAAc;GACd;GACA,MAAM;EACR;CACF;AACF"}

package/dist/list/create-list-state.d.ts

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/list/useListState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { MultipleSelectionStateProps } from "../selection/create-multiple-selection-state.js";
+import { SelectionManager } from "../selection/selection-manager.js";
+import { Collection, CollectionStateBase, Key, LayoutDelegate, Node } from "@solid2-aria/types-shared";
+export interface ListProps<T> extends CollectionStateBase<T>, MultipleSelectionStateProps {
+  /** Filter function to generate a filtered list of nodes. */
+  filter?: (nodes: Iterable<Node<T>>) => Iterable<Node<T>>;
+  /** @private */
+  suppressTextValueWarning?: boolean;
+  /**
+   * A delegate object that provides layout information for items in the collection.
+   * This can be used to override the behavior of shift selection.
+   */
+  layoutDelegate?: LayoutDelegate;
+}
+export interface ListState<T> {
+  /** A collection of items in the list. */
+  collection: Collection<Node<T>>;
+  /** A set of items that are disabled. */
+  disabledKeys: Set<Key>;
+  /** A selection manager to read and update multiple selection state. */
+  selectionManager: SelectionManager;
+}
+/**
+ * Provides state management for list-like components. Handles building a collection
+ * of items from props, and manages multiple selection state.
+ */
+export declare function createListState<T extends object>(props: ListProps<T>): ListState<T>;
+/**
+ * Filters a collection using the provided filter function and returns a new ListState.
+ */
+export declare function UNSTABLE_createFilteredListState<T>(state: ListState<T>, filterFn: ((nodeValue: string, node: Node<T>) => boolean) | null | undefined): ListState<T>;
+//# sourceMappingURL=create-list-state.d.ts.map

package/dist/list/create-list-state.js

@@ -0,0 +1,123 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/list/useListState.ts.
+ * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createCollection } from "../collections/create-collection.js";
+import { createMultipleSelectionState } from "../selection/create-multiple-selection-state.js";
+import { SelectionManager } from "../selection/selection-manager.js";
+import { ListCollection } from "./list-collection.js";
+import { createMemo, createRenderEffect, untrack } from "solid-js";
+// src/list/create-list-state.ts
+/**
+* Provides state management for list-like components. Handles building a collection
+* of items from props, and manages multiple selection state.
+*/
+function createListState(props) {
+	const filter = createMemo(() => props.filter);
+	const layoutDelegate = createMemo(() => props.layoutDelegate);
+	const selectionState = createMultipleSelectionState(props);
+	const disabledKeys = createMemo(() => props.disabledKeys ? new Set(props.disabledKeys) : /* @__PURE__ */ new Set());
+	const factory = (nodes) => {
+		const currentFilter = filter();
+		return currentFilter ? new ListCollection(currentFilter(nodes)) : new ListCollection(nodes);
+	};
+	const collection = createCollection(props, factory, { get suppressTextValueWarning() {
+		return props.suppressTextValueWarning;
+	} });
+	const selectionManager = createMemo(() => {
+		const currentCollection = collection();
+		const currentLayoutDelegate = layoutDelegate();
+		return new SelectionManager(currentCollection, selectionState, { layoutDelegate: currentLayoutDelegate });
+	});
+	createFocusedKeyReset(collection, selectionManager);
+	return {
+		get collection() {
+			return collection();
+		},
+		get disabledKeys() {
+			return disabledKeys();
+		},
+		get selectionManager() {
+			return selectionManager();
+		}
+	};
+}
+/**
+* Filters a collection using the provided filter function and returns a new ListState.
+*/
+function UNSTABLE_createFilteredListState(state, filterFn) {
+	const collection = createMemo(() => {
+		const current = state.collection;
+		if (!filterFn) return current;
+		if (!current.filter) throw new Error("The collection does not support filtering.");
+		return current.filter(filterFn);
+	});
+	const selectionManager = createMemo(() => state.selectionManager.withCollection(collection()));
+	createFocusedKeyReset(collection, selectionManager);
+	return {
+		get collection() {
+			return collection();
+		},
+		get disabledKeys() {
+			return state.disabledKeys;
+		},
+		get selectionManager() {
+			return selectionManager();
+		}
+	};
+}
+function createFocusedKeyReset(getCollection, getSelectionManager) {
+	let cachedCollection = null;
+	createRenderEffect(() => {
+		const collection = getCollection();
+		const selectionManager = getSelectionManager();
+		const { focusedKey } = selectionManager;
+		let nextFocusedKey;
+		if (focusedKey !== null && !collection.getItem(focusedKey) && cachedCollection) {
+			let key = cachedCollection.getKeyAfter(focusedKey);
+			nextFocusedKey = null;
+			while (key !== null && key !== void 0) {
+				if (collection.getItem(key)?.type === "item" && !selectionManager.isDisabled(key)) {
+					nextFocusedKey = key;
+					break;
+				}
+				key = cachedCollection.getKeyAfter(key);
+			}
+			if (nextFocusedKey === null) {
+				key = cachedCollection.getKeyBefore(focusedKey);
+				while (key !== null && key !== void 0) {
+					if (collection.getItem(key)?.type === "item" && !selectionManager.isDisabled(key)) {
+						nextFocusedKey = key;
+						break;
+					}
+					key = cachedCollection.getKeyBefore(key);
+				}
+			}
+		}
+		return {
+			collection,
+			nextFocusedKey,
+			selectionManager
+		};
+	}, ({ collection, nextFocusedKey, selectionManager }) => {
+		cachedCollection = collection;
+		if (nextFocusedKey !== void 0) untrack(() => {
+			selectionManager.setFocusedKey(nextFocusedKey);
+		});
+	});
+}
+export { UNSTABLE_createFilteredListState, createListState };
+
+//# sourceMappingURL=create-list-state.js.map

package/dist/list/create-list-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-list-state.js","names":[],"sources":["../../src/list/create-list-state.ts"],"sourcesContent":["/*\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 */\n/*\n * Derived from Adobe React Spectrum: packages/react-stately/src/list/useListState.ts.\n * Modified for Solid Aria: adapted reactive state, getters, imports, and APIs for Solid 2.\n * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.\n */\n\nimport type {\n  Collection,\n  CollectionStateBase,\n  Key,\n  LayoutDelegate,\n  Node,\n} from \"@solid2-aria/types-shared\";\nimport { createMemo, createRenderEffect, untrack } from \"solid-js\";\n\nimport { createCollection } from \"../collections/create-collection\";\nimport { createMultipleSelectionState } from \"../selection/create-multiple-selection-state\";\nimport type { MultipleSelectionStateProps } from \"../selection/create-multiple-selection-state\";\nimport { SelectionManager } from \"../selection/selection-manager\";\nimport { ListCollection } from \"./list-collection\";\n\nexport interface ListProps<T>\n  extends CollectionStateBase<T>, MultipleSelectionStateProps {\n  /** Filter function to generate a filtered list of nodes. */\n  filter?: (nodes: Iterable<Node<T>>) => Iterable<Node<T>>;\n  /** @private */\n  suppressTextValueWarning?: boolean;\n  /**\n   * A delegate object that provides layout information for items in the collection.\n   * This can be used to override the behavior of shift selection.\n   */\n  layoutDelegate?: LayoutDelegate;\n}\n\nexport interface ListState<T> {\n  /** A collection of items in the list. */\n  collection: Collection<Node<T>>;\n  /** A set of items that are disabled. */\n  disabledKeys: Set<Key>;\n  /** A selection manager to read and update multiple selection state. */\n  selectionManager: SelectionManager;\n}\n\n/**\n * Provides state management for list-like components. Handles building a collection\n * of items from props, and manages multiple selection state.\n */\nexport function createListState<T extends object>(\n  props: ListProps<T>\n): ListState<T> {\n  const filter = createMemo(() => props.filter);\n  const layoutDelegate = createMemo(() => props.layoutDelegate);\n  const selectionState = createMultipleSelectionState(props);\n\n  const disabledKeys = createMemo(() =>\n    props.disabledKeys ? new Set(props.disabledKeys) : new Set<Key>()\n  );\n\n  const factory = (nodes: Iterable<Node<T>>) => {\n    const currentFilter = filter();\n\n    return currentFilter\n      ? new ListCollection(currentFilter(nodes))\n      : new ListCollection(nodes);\n  };\n\n  const context = {\n    get suppressTextValueWarning() {\n      return props.suppressTextValueWarning;\n    },\n  };\n\n  const collection = createCollection(props, factory, context);\n\n  const selectionManager = createMemo(() => {\n    const currentCollection = collection();\n    const currentLayoutDelegate = layoutDelegate();\n\n    return new SelectionManager(currentCollection, selectionState, {\n      layoutDelegate: currentLayoutDelegate,\n    });\n  });\n\n  createFocusedKeyReset(collection, selectionManager);\n\n  return {\n    get collection() {\n      return collection();\n    },\n    get disabledKeys() {\n      return disabledKeys();\n    },\n    get selectionManager() {\n      return selectionManager();\n    },\n  };\n}\n\n/**\n * Filters a collection using the provided filter function and returns a new ListState.\n */\nexport function UNSTABLE_createFilteredListState<T>(\n  state: ListState<T>,\n  filterFn: ((nodeValue: string, node: Node<T>) => boolean) | null | undefined\n): ListState<T> {\n  const collection = createMemo(() => {\n    const current = state.collection;\n\n    if (!filterFn) {\n      return current;\n    }\n\n    if (!current.filter) {\n      throw new Error(\"The collection does not support filtering.\");\n    }\n\n    return current.filter(filterFn);\n  });\n\n  const selectionManager = createMemo(() =>\n    state.selectionManager.withCollection(collection())\n  );\n\n  createFocusedKeyReset(collection, selectionManager);\n\n  return {\n    get collection() {\n      return collection();\n    },\n    get disabledKeys() {\n      return state.disabledKeys;\n    },\n    get selectionManager() {\n      return selectionManager();\n    },\n  };\n}\n\nfunction createFocusedKeyReset<T>(\n  getCollection: () => Collection<Node<T>>,\n  getSelectionManager: () => SelectionManager\n) {\n  // Reset focused key if that item is deleted from the collection.\n  let cachedCollection: Collection<Node<T>> | null = null;\n  createRenderEffect(\n    () => {\n      const collection = getCollection();\n      const selectionManager = getSelectionManager();\n      const { focusedKey } = selectionManager;\n      let nextFocusedKey: Key | null | undefined;\n\n      if (\n        focusedKey !== null &&\n        !collection.getItem(focusedKey) &&\n        cachedCollection\n      ) {\n        let key = cachedCollection.getKeyAfter(focusedKey);\n        nextFocusedKey = null;\n\n        while (key !== null && key !== undefined) {\n          const node = collection.getItem(key);\n\n          if (node?.type === \"item\" && !selectionManager.isDisabled(key)) {\n            nextFocusedKey = key;\n            break;\n          }\n\n          key = cachedCollection.getKeyAfter(key);\n        }\n\n        if (nextFocusedKey === null) {\n          key = cachedCollection.getKeyBefore(focusedKey);\n\n          while (key !== null && key !== undefined) {\n            const node = collection.getItem(key);\n\n            if (node?.type === \"item\" && !selectionManager.isDisabled(key)) {\n              nextFocusedKey = key;\n              break;\n            }\n\n            key = cachedCollection.getKeyBefore(key);\n          }\n        }\n      }\n\n      return { collection, nextFocusedKey, selectionManager };\n    },\n    ({ collection, nextFocusedKey, selectionManager }) => {\n      cachedCollection = collection;\n\n      if (nextFocusedKey !== undefined) {\n        untrack(() => {\n          selectionManager.setFocusedKey(nextFocusedKey);\n        });\n      }\n    }\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,gBACd,OACc;CACd,MAAM,SAAS,iBAAiB,MAAM,MAAM;CAC5C,MAAM,iBAAiB,iBAAiB,MAAM,cAAc;CAC5D,MAAM,iBAAiB,6BAA6B,KAAK;CAEzD,MAAM,eAAe,iBACnB,MAAM,eAAe,IAAI,IAAI,MAAM,YAAY,oBAAI,IAAI,IAAS,CAClE;CAEA,MAAM,WAAW,UAA6B;EAC5C,MAAM,gBAAgB,OAAO;EAE7B,OAAO,gBACH,IAAI,eAAe,cAAc,KAAK,CAAC,IACvC,IAAI,eAAe,KAAK;CAC9B;CAQA,MAAM,aAAa,iBAAiB,OAAO,SAAS,EALlD,IAAI,2BAA2B;EAC7B,OAAO,MAAM;CACf,EAGwD,CAAC;CAE3D,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,oBAAoB,WAAW;EACrC,MAAM,wBAAwB,eAAe;EAE7C,OAAO,IAAI,iBAAiB,mBAAmB,gBAAgB,EAC7D,gBAAgB,sBAClB,CAAC;CACH,CAAC;CAED,sBAAsB,YAAY,gBAAgB;CAElD,OAAO;EACL,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,aAAa;EACtB;EACA,IAAI,mBAAmB;GACrB,OAAO,iBAAiB;EAC1B;CACF;AACF;;;;AAKA,SAAgB,iCACd,OACA,UACc;CACd,MAAM,aAAa,iBAAiB;EAClC,MAAM,UAAU,MAAM;EAEtB,IAAI,CAAC,UACH,OAAO;EAGT,IAAI,CAAC,QAAQ,QACX,MAAM,IAAI,MAAM,4CAA4C;EAG9D,OAAO,QAAQ,OAAO,QAAQ;CAChC,CAAC;CAED,MAAM,mBAAmB,iBACvB,MAAM,iBAAiB,eAAe,WAAW,CAAC,CACpD;CAEA,sBAAsB,YAAY,gBAAgB;CAElD,OAAO;EACL,IAAI,aAAa;GACf,OAAO,WAAW;EACpB;EACA,IAAI,eAAe;GACjB,OAAO,MAAM;EACf;EACA,IAAI,mBAAmB;GACrB,OAAO,iBAAiB;EAC1B;CACF;AACF;AAEA,SAAS,sBACP,eACA,qBACA;CAEA,IAAI,mBAA+C;CACnD,yBACQ;EACJ,MAAM,aAAa,cAAc;EACjC,MAAM,mBAAmB,oBAAoB;EAC7C,MAAM,EAAE,eAAe;EACvB,IAAI;EAEJ,IACE,eAAe,QACf,CAAC,WAAW,QAAQ,UAAU,KAC9B,kBACA;GACA,IAAI,MAAM,iBAAiB,YAAY,UAAU;GACjD,iBAAiB;GAEjB,OAAO,QAAQ,QAAQ,QAAQ,KAAA,GAAW;IAGxC,IAFa,WAAW,QAAQ,GAEzB,CAAC,EAAE,SAAS,UAAU,CAAC,iBAAiB,WAAW,GAAG,GAAG;KAC9D,iBAAiB;KACjB;IACF;IAEA,MAAM,iBAAiB,YAAY,GAAG;GACxC;GAEA,IAAI,mBAAmB,MAAM;IAC3B,MAAM,iBAAiB,aAAa,UAAU;IAE9C,OAAO,QAAQ,QAAQ,QAAQ,KAAA,GAAW;KAGxC,IAFa,WAAW,QAAQ,GAEzB,CAAC,EAAE,SAAS,UAAU,CAAC,iBAAiB,WAAW,GAAG,GAAG;MAC9D,iBAAiB;MACjB;KACF;KAEA,MAAM,iBAAiB,aAAa,GAAG;IACzC;GACF;EACF;EAEA,OAAO;GAAE;GAAY;GAAgB;EAAiB;CACxD,IACC,EAAE,YAAY,gBAAgB,uBAAuB;EACpD,mBAAmB;EAEnB,IAAI,mBAAmB,KAAA,GACrB,cAAc;GACZ,iBAAiB,cAAc,cAAc;EAC/C,CAAC;CAEL,CACF;AACF"}

package/dist/list/create-single-select-list-state.d.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/list/useSingleSelectListState.ts.
+ * Modified for Solid Aria: adapted imports, collection descriptors, and reactive state APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { ListState } from "./create-list-state.js";
+import { CollectionStateBase, Key, Node, SingleSelection } from "@solid2-aria/types-shared";
+export interface SingleSelectListProps<T> extends CollectionStateBase<T>, Omit<SingleSelection, "disallowEmptySelection"> {
+  /** Filter function to generate a filtered list of nodes. */
+  filter?: (nodes: Iterable<Node<T>>) => Iterable<Node<T>>;
+  /** @private */
+  suppressTextValueWarning?: boolean;
+}
+export interface SingleSelectListState<T> extends ListState<T> {
+  /** The key for the currently selected item. */
+  readonly selectedKey: Key | null;
+  /** Sets the selected key. */
+  setSelectedKey: (key: Key | null) => void;
+  /** The value of the currently selected item. */
+  readonly selectedItem: Node<T> | null;
+}
+/**
+ * Provides state management for list-like components with single selection.
+ * Handles building a collection of items from props, and manages selection state.
+ */
+export declare function createSingleSelectListState<T extends object>(props: SingleSelectListProps<T>): SingleSelectListState<T>;
+//# sourceMappingURL=create-single-select-list-state.d.ts.map

package/dist/list/create-single-select-list-state.js

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+/*
+ * Derived from Adobe React Spectrum: packages/react-stately/src/list/useSingleSelectListState.ts.
+ * Modified for Solid Aria: adapted imports, collection descriptors, and reactive state APIs for Solid 2.
+ * Licensed under Apache-2.0. See LICENSES/Apache-2.0.txt and NOTICE.txt at the repository root.
+ */
+import { createControlledSignal } from "../utils/create-controlled-signal.js";
+import { createListState } from "./create-list-state.js";
+import { merge, untrack } from "solid-js";
+// src/list/create-single-select-list-state.ts
+/**
+* Provides state management for list-like components with single selection.
+* Handles building a collection of items from props, and manages selection state.
+*/
+function createSingleSelectListState(props) {
+	const [selectedKey, setSelectedKey] = createControlledSignal(() => props.selectedKey, untrack(() => props.defaultSelectedKey ?? null), (key) => props.onSelectionChange?.(key));
+	const state = createListState(merge(props, {
+		allowDuplicateSelectionEvents: true,
+		disallowEmptySelection: true,
+		onSelectionChange(keys) {
+			if (keys === "all") return;
+			const key = keys.values().next().value ?? null;
+			if (key === selectedKey()) props.onSelectionChange?.(key);
+			setSelectedKey(key);
+		},
+		get selectedKeys() {
+			const key = selectedKey();
+			return key === null || key === void 0 ? [] : [key];
+		},
+		selectionMode: "single"
+	}));
+	return merge(state, {
+		get selectedItem() {
+			const key = selectedKey();
+			return key === null || key === void 0 ? null : state.collection.getItem(key);
+		},
+		get selectedKey() {
+			return selectedKey();
+		},
+		setSelectedKey
+	});
+}
+export { createSingleSelectListState };
+
+//# sourceMappingURL=create-single-select-list-state.js.map