@react-stately/layout 3.0.0-nightly-641446f65-240905

package/dist/types.d.ts

@@ -0,0 +1,144 @@
+import { DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, Collection } from "@react-types/shared";
+import { Layout, LayoutInfo, Rect, Size, InvalidationContext } from "@react-stately/virtualizer";
+import { GridNode } from "@react-types/grid";
+import { TableCollection } from "@react-types/table";
+export interface GridLayoutOptions {
+    /**
+     * 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 number of columns.
+     * @default Infinity
+     */
+    maxColumns?: number;
+    /**
+     * The thickness of the drop indicator.
+     * @default 2
+     */
+    dropIndicatorThickness?: number;
+}
+export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
+    protected minItemSize: Size;
+    protected maxItemSize: Size;
+    protected minSpace: Size;
+    protected maxColumns: number;
+    protected dropIndicatorThickness: number;
+    protected itemSize: Size;
+    protected numColumns: number;
+    protected horizontalSpacing: number;
+    protected layoutInfos: LayoutInfo[];
+    constructor(options: GridLayoutOptions);
+    update(): void;
+    getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    protected getIndexAtPoint(x: number, y: number): number;
+    getLayoutInfo(key: Key): LayoutInfo | null;
+    protected getLayoutInfoForNode(node: Node<T>): LayoutInfo;
+    getContentSize(): Size;
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
+}
+export interface ListLayoutOptions {
+    /** The fixed height of a row in px. */
+    rowHeight?: number;
+    /** The estimated height of a row, when row heights are variable. */
+    estimatedRowHeight?: number;
+    /** The fixed height of a section header in px. */
+    headingHeight?: number;
+    /** The estimated height of a section header, when the height is variable. */
+    estimatedHeadingHeight?: 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.
+     */
+    loaderHeight?: number;
+    /** The thickness of the drop indicator. */
+    dropIndicatorThickness?: number;
+}
+export interface LayoutNode {
+    node?: Node<unknown>;
+    layoutInfo: LayoutInfo;
+    children?: LayoutNode[];
+    validRect: Rect;
+    index?: number;
+}
+/**
+ * The ListLayout class is an implementation of a virtualizer {@link Layout}.
+ * To configure a ListLayout, you can use the properties to define the
+ * layouts and/or use the method for defining indentation.
+ * The {@link ListKeyboardDelegate} extends the existing virtualizer
+ * delegate with an additional method to do this (it uses the same delegate object as
+ * the virtualizer itself).
+ */
+export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
+    protected rowHeight: number;
+    protected estimatedRowHeight: number;
+    protected headingHeight: number;
+    protected estimatedHeadingHeight: number;
+    protected loaderHeight: number;
+    protected dropIndicatorThickness: number;
+    protected layoutNodes: Map<Key, LayoutNode>;
+    protected contentSize: Size;
+    protected collection: Collection<Node<T>>;
+    protected rootNodes: LayoutNode[];
+    /** The rectangle containing currently valid layout infos. */
+    protected validRect: Rect;
+    /** The rectangle of requested layout infos so far. */
+    protected requestedRect: Rect;
+    /**
+     * Creates a new ListLayout with options. See the list of properties below for a description
+     * of the options that can be provided.
+     */
+    constructor(options?: ListLayoutOptions);
+    getLayoutInfo(key: Key): LayoutInfo;
+    getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    protected layoutIfNeeded(rect: Rect): void;
+    protected isVisible(node: LayoutNode, rect: Rect): boolean;
+    protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>): boolean;
+    update(invalidationContext: InvalidationContext<O>): void;
+    protected buildCollection(y?: number): LayoutNode[];
+    protected isValid(node: Node<T>, y: number): boolean;
+    protected buildChild(node: Node<T>, x: number, y: number, parentKey: Key | null): LayoutNode;
+    protected buildNode(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildLoader(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildSection(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildSectionHeader(node: Node<T>, x: number, y: number): LayoutNode;
+    protected buildItem(node: Node<T>, x: number, y: number): LayoutNode;
+    updateItemSize(key: Key, size: Size): boolean;
+    getContentSize(): Size;
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
+}
+export interface TableLayoutProps {
+    columnWidths?: Map<Key, number>;
+}
+export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
+    protected collection: TableCollection<T>;
+    constructor(options: ListLayoutOptions);
+    update(invalidationContext: InvalidationContext<O>): void;
+    protected buildCollection(): LayoutNode[];
+    protected buildTableHeader(): LayoutNode;
+    protected buildHeaderRow(headerRow: GridNode<T>, x: number, y: number): LayoutNode;
+    protected getEstimatedRowHeight(): number;
+    protected buildColumn(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected isStickyColumn(node: GridNode<T>): boolean;
+    protected buildBody(y: number): LayoutNode;
+    protected buildNode(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildRow(node: GridNode<T>, x: number, y: number): LayoutNode;
+    protected buildCell(node: GridNode<T>, x: number, y: number): LayoutNode;
+    getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
+}
+
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +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/index.ts","packages/@react-stately/layout/src/index.ts"],"sourcesContent":[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 {GridLayout} from './GridLayout';\nexport {ListLayout} from './ListLayout';\nexport {TableLayout} from './TableLayout';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@react-stately/layout",
+  "version": "3.0.0-nightly-641446f65-240905",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@react-stately/collections": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/table": "^3.0.0-nightly-641446f65-240905",
+    "@react-stately/virtualizer": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/grid": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/shared": "^3.0.0-nightly-641446f65-240905",
+    "@react-types/table": "^3.0.0-nightly-641446f65-240905",
+    "@swc/helpers": "^0.5.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "stableVersion": "4.0.2"
+}

package/src/GridLayout.ts

@@ -0,0 +1,223 @@
+/*
+ * 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.
+ */
+
+import {DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
+import {Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+
+export interface GridLayoutOptions {
+  /**
+   * 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 number of columns.
+   * @default Infinity
+   */
+  maxColumns?: number,
+  /**
+   * The thickness of the drop indicator.
+   * @default 2
+   */
+  dropIndicatorThickness?: number
+}
+
+export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
+  protected minItemSize: Size;
+  protected maxItemSize: Size;
+  protected minSpace: Size;
+  protected maxColumns: number;
+  protected dropIndicatorThickness: number;
+  protected itemSize: Size;
+  protected numColumns: number;
+  protected horizontalSpacing: number;
+  protected layoutInfos: LayoutInfo[];
+
+  constructor(options: GridLayoutOptions) {
+    super();
+    this.minItemSize = options.minItemSize || new Size(200, 200);
+    this.maxItemSize = options.maxItemSize || new Size(Infinity, Infinity);
+    this.minSpace = options.minSpace || new Size(18, 18);
+    this.maxColumns = options.maxColumns || Infinity;
+    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
+  }
+
+  update(): void {
+    let visibleWidth = this.virtualizer.visibleRect.width;
+
+    // The max item width is always the entire viewport.
+    // If the max item height is infinity, scale in proportion to the max width.
+    let maxItemWidth = Math.min(this.maxItemSize.width, visibleWidth);
+    let maxItemHeight = Number.isFinite(this.maxItemSize.height) 
+      ? this.maxItemSize.height
+      : Math.floor((this.minItemSize.height / this.minItemSize.width) * maxItemWidth);
+
+    // Compute the number of rows and columns needed to display the content
+    let columns = Math.floor(visibleWidth / (this.minItemSize.width + this.minSpace.width));
+    this.numColumns = Math.max(1, Math.min(this.maxColumns, columns));
+
+    // Compute the available width (minus the space between items)
+    let width = visibleWidth - (this.minSpace.width * Math.max(0, this.numColumns));
+
+    // Compute the item width based on the space available
+    let itemWidth = Math.floor(width / this.numColumns);
+    itemWidth = Math.max(this.minItemSize.width, Math.min(maxItemWidth, itemWidth));
+
+    // Compute the item height, which is proportional to the item width
+    let t = ((itemWidth - this.minItemSize.width) / Math.max(1, maxItemWidth - this.minItemSize.width));
+    let itemHeight = this.minItemSize.height +  Math.floor((maxItemHeight - this.minItemSize.height) * t);
+    itemHeight = Math.max(this.minItemSize.height, Math.min(maxItemHeight, itemHeight));
+    this.itemSize = new Size(itemWidth, itemHeight);
+
+    // Compute the horizontal spacing and content height
+    this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
+
+    this.layoutInfos = [];
+    for (let node of this.virtualizer.collection) {
+      this.layoutInfos.push(this.getLayoutInfoForNode(node));
+    }
+  }
+
+  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
+    let firstVisibleItem = this.getIndexAtPoint(rect.x, rect.y);
+    let lastVisibleItem = this.getIndexAtPoint(rect.maxX, rect.maxY);
+    let result = this.layoutInfos.slice(firstVisibleItem, lastVisibleItem + 1);
+    let persistedIndices: number[] = [];
+    for (let key of this.virtualizer.persistedKeys) {
+      let item = this.virtualizer.collection.getItem(key);
+      if (item?.index != null) {
+        persistedIndices.push(item.index);
+      }
+    }
+    persistedIndices.sort((a, b) => a - b);
+    
+    let persistedBefore: LayoutInfo[] = [];
+    for (let index of persistedIndices) {
+      if (index < firstVisibleItem) {
+        persistedBefore.push(this.layoutInfos[index]);
+      } else if (index > lastVisibleItem) {
+        result.push(this.layoutInfos[index]);
+      }
+    }
+    result.unshift(...persistedBefore);
+    return result;
+  }
+
+  protected getIndexAtPoint(x: number, y: number) {
+    let itemHeight = this.itemSize.height + this.minSpace.height;
+    let itemWidth = this.itemSize.width + this.horizontalSpacing;
+    return Math.max(0,
+      Math.min(
+        this.virtualizer.collection.size - 1,
+        Math.floor(y / itemHeight) * this.numColumns + Math.floor((x - this.horizontalSpacing) / itemWidth)
+      )
+    );
+  }
+
+  getLayoutInfo(key: Key): LayoutInfo | null {
+    let node = this.virtualizer.collection.getItem(key);
+    return node ? this.layoutInfos[node.index] : null;
+  }
+
+  protected getLayoutInfoForNode(node: Node<T>): LayoutInfo {
+    let idx = node.index;
+    let row = Math.floor(idx / this.numColumns);
+    let column = idx % this.numColumns;
+    let x = this.horizontalSpacing + column * (this.itemSize.width + this.horizontalSpacing);
+    let y = this.minSpace.height + row * (this.itemSize.height + this.minSpace.height);
+    let rect = new Rect(x, y, this.itemSize.width, this.itemSize.height);
+    return new LayoutInfo(node.type, node.key, rect);
+  }
+
+  getContentSize(): Size {
+    let numRows = Math.ceil(this.virtualizer.collection.size / this.numColumns);
+    let contentHeight = this.minSpace.height + numRows * (this.itemSize.height + this.minSpace.height);  
+    return new Size(this.virtualizer.visibleRect.width, contentHeight);
+  }
+
+  getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
+    if (this.layoutInfos.length === 0) {
+      return {type: 'root'};
+    }
+
+    x += this.virtualizer.visibleRect.x;
+    y += this.virtualizer.visibleRect.y;
+    let index = this.getIndexAtPoint(x, y);
+
+    let layoutInfo = this.layoutInfos[index];
+    let target: DropTarget =  {
+      type: 'item',
+      key: layoutInfo.key,
+      dropPosition: 'on'
+    };
+
+    let pos = this.numColumns === 1 ? y : x;
+    let layoutInfoPos = this.numColumns === 1 ? layoutInfo.rect.y : layoutInfo.rect.x;
+    let size = this.numColumns === 1 ? layoutInfo.rect.height : layoutInfo.rect.width;
+    if (isValidDropTarget(target)) {
+      // If dropping on the item is accepted, try the before/after positions
+      // if within 5px of the start or end of the item.
+      if (pos < layoutInfoPos + 5) {
+        target.dropPosition = 'before';
+      } else if (pos > layoutInfoPos + size - 5) {
+        target.dropPosition = 'after';
+      }
+    } else {
+      // If dropping on the item isn't accepted, try the target before or after depending on the position.
+      let mid = layoutInfoPos + size / 2;
+      if (pos <= mid && isValidDropTarget({...target, dropPosition: 'before'})) {
+        target.dropPosition = 'before';
+      } else if (pos >= mid && isValidDropTarget({...target, dropPosition: 'after'})) {
+        target.dropPosition = 'after';
+      }
+    }
+
+    return target;
+  }
+
+  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
+    let layoutInfo = this.getLayoutInfo(target.key);
+    let rect: Rect;
+    if (this.numColumns === 1) {
+      // Flip from vertical to horizontal if only one column is visible.
+      rect = new Rect(
+        layoutInfo.rect.x,
+        target.dropPosition === 'before' 
+          ? layoutInfo.rect.y - this.minSpace.height / 2 - this.dropIndicatorThickness / 2
+          : layoutInfo.rect.maxY + this.minSpace.height / 2 - this.dropIndicatorThickness / 2,
+        layoutInfo.rect.width,
+        this.dropIndicatorThickness
+      );
+    } else {
+      rect = new Rect(
+        target.dropPosition === 'before' 
+          ? layoutInfo.rect.x - this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2 
+          : layoutInfo.rect.maxX + this.horizontalSpacing / 2 - this.dropIndicatorThickness / 2,
+        layoutInfo.rect.y,
+        this.dropIndicatorThickness,
+        layoutInfo.rect.height
+      );
+    }
+
+    return new LayoutInfo('dropIndicator', target.key + ':' + target.dropPosition, rect);
+  }
+}