@react-stately/layout 4.1.0 → 4.2.0

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import { DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, Collection } from "@react-types/shared";
-import { Layout, LayoutInfo, Rect, Size, InvalidationContext } from "@react-stately/virtualizer";
+import { DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node, Collection, LayoutDelegate } from "@react-types/shared";
+import { InvalidationContext, Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
 import { GridNode } from "@react-types/grid";
 import { TableCollection } from "@react-types/table";
 export interface GridLayoutOptions {
@@ -13,6 +13,13 @@ export interface GridLayoutOptions {
      * @default Infinity
      */
     maxItemSize?: Size;
+    /**
+     * Whether to preserve the aspect ratio of the `minItemSize`.
+     * By default, grid rows may have variable heights. When `preserveAspectRatio`
+     * is true, all rows will have equal heights.
+     * @default false
+     */
+    preserveAspectRatio?: boolean;
     /**
      * The minimum space required between items.
      * @default 18 x 18
@@ -29,41 +36,61 @@ export interface GridLayoutOptions {
      */
     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;
+/**
+ * GridLayout is a virtualizer Layout implementation
+ * that arranges its items in a grid.
+ * The items are sized between a minimum and maximum size
+ * depending on the width of the container.
+ */
+export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
+    protected gap: Size;
     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;
+    shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
+    update(invalidationContext: InvalidationContext<O>): void;
+    getLayoutInfo(key: Key): LayoutInfo;
     getContentSize(): Size;
+    getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+    updateItemSize(key: Key, size: Size): boolean;
     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. */
+    /**
+     * The fixed height of a row in px.
+     * @default 48
+     */
     rowHeight?: number;
     /** The estimated height of a row, when row heights are variable. */
     estimatedRowHeight?: number;
-    /** The fixed height of a section header in px. */
+    /**
+     * The fixed height of a section header in px.
+     * @default 48
+     */
     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
+    /**
+     * 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;
-    /** The thickness of the drop indicator. */
+    /**
+     * The thickness of the drop indicator.
+     * @default 2
+     */
     dropIndicatorThickness?: number;
+    /**
+     * The gap between items.
+     * @default 0
+     */
+    gap?: number;
+    /**
+     * The padding around the list.
+     * @default 0
+     */
+    padding?: number;
 }
 export interface LayoutNode {
     node?: Node<unknown>;
@@ -73,20 +100,19 @@ export interface LayoutNode {
     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).
+ * ListLayout is a virtualizer Layout implementation
+ * that arranges its items in a vertical stack. It supports both fixed
+ * and variable height items.
  */
-export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTargetDelegate {
+export class ListLayout<T, O extends ListLayoutOptions = ListLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
     protected rowHeight: number | null;
     protected estimatedRowHeight: number | null;
     protected headingHeight: number | null;
     protected estimatedHeadingHeight: number | null;
     protected loaderHeight: number | null;
     protected dropIndicatorThickness: number;
+    protected gap: number;
+    protected padding: number;
     protected layoutNodes: Map<Key, LayoutNode>;
     protected contentSize: Size;
     protected lastCollection: Collection<Node<T>> | null;
@@ -106,6 +132,7 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     protected layoutIfNeeded(rect: Rect): void;
     protected isVisible(node: LayoutNode, rect: Rect): boolean;
     protected shouldInvalidateEverything(invalidationContext: InvalidationContext<O>): boolean;
+    shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
     update(invalidationContext: InvalidationContext<O>): void;
     protected buildCollection(y?: number): LayoutNode[];
     protected isValid(node: Node<T>, y: number): boolean | undefined;
@@ -120,13 +147,18 @@ export class ListLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
     getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null;
     getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
 }
-export interface TableLayoutProps {
+export interface TableLayoutProps extends ListLayoutOptions {
     columnWidths?: Map<Key, number>;
 }
+/**
+ * TableLayout is a virtualizer Layout implementation that arranges
+ * items in rows and columns.
+ */
 export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> extends ListLayout<T, O> {
     protected lastCollection: TableCollection<T> | null;
-    constructor(options: ListLayoutOptions);
+    constructor(options?: ListLayoutOptions);
     protected get collection(): TableCollection<T>;
+    shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
     update(invalidationContext: InvalidationContext<O>): void;
     protected buildCollection(): LayoutNode[];
     protected buildTableHeader(): LayoutNode;
@@ -142,5 +174,46 @@ export class TableLayout<T, O extends TableLayoutProps = TableLayoutProps> exten
     getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget | null;
     getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
 }
+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 number of columns.
+     * @default Infinity
+     */
+    maxColumns?: number;
+    /**
+     * The thickness of the drop indicator.
+     * @default 2
+     */
+    dropIndicatorThickness?: number;
+}
+export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {
+    protected numColumns: number;
+    protected dropIndicatorThickness: number;
+    shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean;
+    update(invalidationContext: InvalidationContext<O>): void;
+    getLayoutInfo(key: Key): LayoutInfo;
+    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(x: number, y: number): DropTarget;
+}
 
 //# sourceMappingURL=types.d.ts.map

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/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"}
+{"mappings":";;;;AAeA;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAWD;;;;;GAKG;AACH,wBAAwB,CAAC,EAAE,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,CAAE,SAAQ,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAE,YAAW,kBAAkB;IAClI,SAAS,CAAC,GAAG,EAAE,IAAI,CAA4B;IAC/C,SAAS,CAAC,sBAAsB,SAAK;IACrC,SAAS,CAAC,UAAU,EAAE,MAAM,CAAK;IAIjC,6BAA6B,CAAC,UAAU,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO;IASpE,MAAM,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,GAAG,IAAI;IAqGzD,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,UAAU;IAInC,cAAc,IAAI,IAAI;IAItB,qBAAqB,CAAC,IAAI,EAAE,IAAI,GAAG,UAAU,EAAE;IAU/C,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;IAiBnC,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,GAAG,UAAU;IA4C5G,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;CA0B5D;AC/QD;IACE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oEAAoE;IACpE,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6EAA6E;IAC7E,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAGD;IACE,IAAI,CAAC,EAAE,KAAK,OAAO,CAAC,CAAC;IACrB,UAAU,EAAE,UAAU,CAAC;IACvB,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,SAAS,EAAE,IAAI,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAID;;;;GAIG;AACH,wBAAwB,CAAC,EAAE,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,CAAE,SAAQ,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAE,YAAW,kBAAkB;IAClI,SAAS,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACnC,SAAS,CAAC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5C,SAAS,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,SAAS,CAAC,sBAAsB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChD,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;IACtC,SAAS,CAAC,sBAAsB,EAAE,MAAM,CAAC;IACzC,SAAS,CAAC,GAAG,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,OAAO,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,WAAW,EAAE,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;IAC5C,SAAS,CAAC,WAAW,EAAE,IAAI,CAAC;IAC5B,SAAS,CAAC,cAAc,EAAE,WAAW,KAAK,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IACrD,SAAS,CAAC,SAAS,EAAE,UAAU,EAAE,CAAC;IAElC,6DAA6D;IAC7D,SAAS,CAAC,SAAS,EAAE,IAAI,CAAC;IAC1B,sDAAsD;IACtD,SAAS,CAAC,aAAa,EAAE,IAAI,CAAC;IAE9B;;;OAGG;gBACS,OAAO,GAAE,iBAAsB;IAoB3C,SAAS,KAAK,UAAU,IAAI,WAAW,KAAK,CAAC,CAAC,CAAC,CAE9C;IAED,aAAa,CAAC,GAAG,EAAE,GAAG;IAKtB,qBAAqB,CAAC,IAAI,EAAE,IAAI;IA+BhC,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,IAAI;IAgCnC,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,IAAI;IAIhD,SAAS,CAAC,0BAA0B,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,GAAG,OAAO;IAa1F,6BAA6B,CAAC,UAAU,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO;IAWpE,MAAM,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC;IAwClD,SAAS,CAAC,eAAe,CAAC,CAAC,SAAe,GAAG,UAAU,EAAE;IA8BzD,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM;IAY1C,SAAS,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,GAAG,GAAG,IAAI,GAAG,UAAU;IAY5F,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAepE,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAYtE,SAAS,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAyCvE,SAAS,CAAC,kBAAkB,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAsC7E,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAmCpE,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;IAmDnC,cAAc;IAId,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,GAAG,UAAU,GAAG,IAAI;IAuCnH,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;CAa5D;ACvhBD,iCAAkC,SAAQ,iBAAiB;IACzD,YAAY,CAAC,EAAE,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;CAChC;AAID;;;GAGG;AACH,yBAAyB,CAAC,EAAE,CAAC,SAAS,gBAAgB,GAAG,gBAAgB,CAAE,SAAQ,WAAW,CAAC,EAAE,CAAC,CAAC;IACjG,SAAS,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC,GAAG,IAAI,CAAQ;gBAM/C,OAAO,CAAC,EAAE,iBAAiB;IAMvC,SAAS,KAAK,UAAU,IAAI,gBAAgB,CAAC,CAAC,CAE7C;IAcD,6BAA6B,CAAC,UAAU,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO;IAKpE,MAAM,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,GAAG,IAAI;IAmBzD,SAAS,CAAC,eAAe,IAAI,UAAU,EAAE;IAyBzC,SAAS,CAAC,gBAAgB,IAAI,UAAU;IA8BxC,SAAS,CAAC,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IA8ElF,SAAS,CAAC,qBAAqB,IAAI,MAAM;IAIzC,SAAS,CAAC,WAAW,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAmB1E,SAAS,CAAC,cAAc,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAI1C,SAAS,CAAC,SAAS,CAAC,CAAC,EAAE,MAAM,GAAG,UAAU;IAiD1C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAkBxE,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IA0CvE,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;IAiBxE,qBAAqB,CAAC,IAAI,EAAE,IAAI;IA2KhC,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,iBAAiB,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,OAAO,GAAG,UAAU,GAAG,IAAI;IAoDnH,uBAAuB,CAAC,MAAM,EAAE,cAAc,GAAG,UAAU;CAK5D;ACtkBD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,IAAI,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAA;CAChC;AAoBD,6BAA6B,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,sBAAsB,GAAG,sBAAsB,CAAE,SAAQ,OAAO,KAAK,CAAC,CAAC,EAAE,CAAC,CAAE,YAAW,cAAc,EAAE,kBAAkB;IAGhL,SAAS,CAAC,UAAU,SAAK;IACzB,SAAS,CAAC,sBAAsB,SAAK;IAErC,6BAA6B,CAAC,UAAU,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC,GAAG,OAAO;IAQpE,MAAM,CAAC,mBAAmB,EAAE,oBAAoB,CAAC,CAAC,GAAG,IAAI;IA6FzD,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,UAAU;IAInC,cAAc,IAAI,IAAI;IAItB,qBAAqB,CAAC,IAAI,EAAE,IAAI,GAAG,UAAU,EAAE;IAU/C,cAAc,CAAC,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI;IAkBnC,aAAa,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI;IA4BnC,YAAY,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI;IA8BlC,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,GAAG,GAAG,EAAE;IAmBtC,sBAAsB,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,UAAU;CAoBzD","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.1.0",
+  "version": "4.2.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,19 +22,20 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-stately/collections": "^3.12.0",
-    "@react-stately/table": "^3.13.0",
-    "@react-stately/virtualizer": "^4.2.0",
-    "@react-types/grid": "^3.2.10",
-    "@react-types/shared": "^3.26.0",
-    "@react-types/table": "^3.10.3",
+    "@react-stately/collections": "^3.12.2",
+    "@react-stately/table": "^3.14.0",
+    "@react-stately/virtualizer": "^4.3.0",
+    "@react-types/grid": "^3.3.0",
+    "@react-types/shared": "^3.28.0",
+    "@react-types/table": "^3.11.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

package/src/GridLayout.ts

@@ -11,7 +11,7 @@
  */
 
 import {DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
-import {Layout, LayoutInfo, Rect, Size} from '@react-stately/virtualizer';
+import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
 
 export interface GridLayoutOptions {
   /**
@@ -24,6 +24,13 @@ export interface GridLayoutOptions {
    * @default Infinity
    */
   maxItemSize?: Size,
+  /**
+   * Whether to preserve the aspect ratio of the `minItemSize`.
+   * By default, grid rows may have variable heights. When `preserveAspectRatio`
+   * is true, all rows will have equal heights.
+   * @default false
+   */
+  preserveAspectRatio?: boolean,
   /**
    * The minimum space required between items.
    * @default 18 x 18
@@ -41,129 +48,187 @@ export interface GridLayoutOptions {
   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 = new Size();
+const DEFAULT_OPTIONS = {
+  minItemSize: new Size(200, 200),
+  maxItemSize: new Size(Infinity, Infinity),
+  preserveAspectRatio: false,
+  minSpace: new Size(18, 18),
+  maxColumns: Infinity,
+  dropIndicatorThickness: 2
+};
+
+/**
+ * GridLayout is a virtualizer Layout implementation
+ * that arranges its items in a grid. 
+ * The items are sized between a minimum and maximum size
+ * depending on the width of the container.
+ */
+export class GridLayout<T, O extends GridLayoutOptions = GridLayoutOptions> extends Layout<Node<T>, O> implements DropTargetDelegate {
+  protected gap: Size = DEFAULT_OPTIONS.minSpace;
+  protected dropIndicatorThickness = 2;
   protected numColumns: number = 0;
-  protected horizontalSpacing: number = 0;
-  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;
+  private contentSize: Size = new Size();
+  private layoutInfos: Map<Key, LayoutInfo> = new Map();
+
+  shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
+    return newOptions.maxColumns !== oldOptions.maxColumns
+      || newOptions.dropIndicatorThickness !== oldOptions.dropIndicatorThickness
+      || 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));
   }
 
-  update(): void {
+  update(invalidationContext: InvalidationContext<O>): void {
+    let {
+      minItemSize = DEFAULT_OPTIONS.minItemSize,
+      maxItemSize = DEFAULT_OPTIONS.maxItemSize,
+      preserveAspectRatio = DEFAULT_OPTIONS.preserveAspectRatio,
+      minSpace = DEFAULT_OPTIONS.minSpace,
+      maxColumns = DEFAULT_OPTIONS.maxColumns,
+      dropIndicatorThickness = DEFAULT_OPTIONS.dropIndicatorThickness
+    } = invalidationContext.layoutOptions || {};
+    this.dropIndicatorThickness = dropIndicatorThickness;
+
     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);
+    let maxItemWidth = Math.min(maxItemSize.width, visibleWidth);
+    let maxItemHeight = Number.isFinite(maxItemSize.height)
+      ? maxItemSize.height
+      : Math.floor((minItemSize.height / 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));
+    let columns = Math.floor(visibleWidth / (minItemSize.width + minSpace.width));
+    let numColumns = Math.max(1, Math.min(maxColumns, columns));
 
     // Compute the available width (minus the space between items)
-    let width = visibleWidth - (this.minSpace.width * Math.max(0, this.numColumns));
+    let width = visibleWidth - (minSpace.width * Math.max(0, 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));
+    let itemWidth = Math.floor(width / numColumns);
+    itemWidth = Math.max(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);
+    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
-    this.horizontalSpacing = Math.floor((visibleWidth - this.numColumns * this.itemSize.width) / (this.numColumns + 1));
+    let horizontalSpacing = Math.floor((visibleWidth - numColumns * itemWidth) / (numColumns + 1));
+    this.gap = new Size(horizontalSpacing, minSpace.height);
 
-    this.layoutInfos = [];
-    for (let node of this.virtualizer!.collection) {
-      this.layoutInfos.push(this.getLayoutInfoForNode(node));
-    }
-  }
+    let rows = Math.ceil(this.virtualizer!.collection.size / numColumns);
+    let iterator = this.virtualizer!.collection[Symbol.iterator]();
+    let y = rows > 0 ? minSpace.height : 0;
+    let newLayoutInfos = new Map();
+    let skeleton: Node<T> | null = null;
+    let skeletonCount = 0;
+    for (let row = 0; row < rows; row++) {
+      let maxHeight = 0;
+      let rowLayoutInfos: LayoutInfo[] = [];
+      for (let col = 0; col < numColumns; col++) {
+        // Repeat skeleton until the end of the current row.
+        let node = skeleton || iterator.next().value;
+        if (!node) {
+          break;
+        }
 
-  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);
+        if (node.type === 'skeleton') {
+          skeleton = node;
+        }
+
+        let key = skeleton ? `${skeleton.key}-${skeletonCount++}` : node.key;
+        let oldLayoutInfo = this.layoutInfos.get(key);
+        let content = node;
+        if (skeleton) {
+          content = oldLayoutInfo && oldLayoutInfo.content.key === key ? oldLayoutInfo.content : {...skeleton, key};
+        }
+        let x = horizontalSpacing + col * (itemWidth + horizontalSpacing);
+        let height = itemHeight;
+        let estimatedSize = !preserveAspectRatio;
+        if (oldLayoutInfo && estimatedSize) {
+          height = oldLayoutInfo.rect.height;
+          estimatedSize = invalidationContext.layoutOptionsChanged || invalidationContext.sizeChanged || oldLayoutInfo.estimatedSize || (oldLayoutInfo.content !== content);
+        }
+
+        let rect = new Rect(x, y, itemWidth, height);
+        let layoutInfo = new LayoutInfo(node.type, key, rect);
+        layoutInfo.estimatedSize = estimatedSize;
+        layoutInfo.allowOverflow = true;
+        layoutInfo.content = content;
+        newLayoutInfos.set(key, layoutInfo);
+        rowLayoutInfos.push(layoutInfo);
+
+        maxHeight = Math.max(maxHeight, layoutInfo.rect.height);
       }
-    }
-    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]);
+
+      for (let layoutInfo of rowLayoutInfos) {
+        layoutInfo.rect.height = maxHeight;
+      }
+
+      y += maxHeight + minSpace.height;
+
+      // Keep adding skeleton rows until we fill the viewport
+      if (skeleton && row === rows - 1 && y < this.virtualizer!.visibleRect.height) {
+        rows++;
       }
     }
-    result.unshift(...persistedBefore);
-    return result;
+
+    this.layoutInfos = newLayoutInfos;
+    this.contentSize = new Size(this.virtualizer!.visibleRect.width, y);
   }
 
-  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 {
+    return this.layoutInfos.get(key)!;
   }
 
-  getLayoutInfo(key: Key): LayoutInfo | null {
-    let node = this.virtualizer!.collection.getItem(key);
-    return node ? this.layoutInfos[node.index] : null;
+  getContentSize(): Size {
+    return this.contentSize;
   }
 
-  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);
+  getVisibleLayoutInfos(rect: Rect): LayoutInfo[] {
+    let layoutInfos: LayoutInfo[] = [];
+    for (let layoutInfo of this.layoutInfos.values()) {
+      if (layoutInfo.rect.intersects(rect) || this.virtualizer!.isPersistedKey(layoutInfo.key)) {
+        layoutInfos.push(layoutInfo);
+      }
+    }
+    return layoutInfos;
   }
 
-  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);
+  updateItemSize(key: Key, size: Size) {
+    let layoutInfo = this.layoutInfos.get(key);
+    if (!size || !layoutInfo) {
+      return false;
+    }
+
+    if (size.height !== layoutInfo.rect.height) {
+      let newLayoutInfo = layoutInfo.copy();
+      newLayoutInfo.rect.height = size.height;
+      newLayoutInfo.estimatedSize = false;
+      this.layoutInfos.set(key, newLayoutInfo);
+      return true;
+    }
+
+    return false;
   }
 
   getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget {
-    if (this.layoutInfos.length === 0) {
+    if (this.layoutInfos.size === 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 key = this.virtualizer!.keyAtPoint(new Point(x, y));
+    let layoutInfo = key != null ? this.getLayoutInfo(key) : null;
+    if (!layoutInfo) {
+      return {type: 'root'};
+    }
+
     let target: DropTarget =  {
       type: 'item',
       key: layoutInfo.key,
@@ -202,16 +267,16 @@ export class GridLayout<T, O = any> extends Layout<Node<T>, O> implements DropTa
       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.y - this.gap.height / 2 - this.dropIndicatorThickness / 2
+          : layoutInfo.rect.maxY + this.gap.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.x - this.gap.width / 2 - this.dropIndicatorThickness / 2 
+          : layoutInfo.rect.maxX + this.gap.width / 2 - this.dropIndicatorThickness / 2,
         layoutInfo.rect.y,
         this.dropIndicatorThickness,
         layoutInfo.rect.height