fix waterfall layout options

Author: devongovett

packages/@react-stately/layout/src/WaterfallLayout.ts

@@ -11,9 +11,36 @@
  */
 
 import {DropTarget, DropTargetDelegate, Key, LayoutDelegate, Node} from '@react-types/shared';
-import {GridLayoutOptions} from './GridLayout';
 import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
 
+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
+}
+
 class WaterfallLayoutInfo extends LayoutInfo {
   column = 0;
 
@@ -32,7 +59,7 @@ const DEFAULT_OPTIONS = {
   dropIndicatorThickness: 2
 };
 
-export class WaterfallLayout<T extends object, O extends GridLayoutOptions = GridLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {
+export class WaterfallLayout<T extends object, O extends WaterfallLayoutOptions = WaterfallLayoutOptions> extends Layout<Node<T>, O> implements LayoutDelegate, DropTargetDelegate {
   private contentSize: Size = new Size();
   private layoutInfos: Map<Key, WaterfallLayoutInfo> = new Map();
   protected numColumns = 0;

packages/@react-stately/layout/src/index.ts

@@ -12,6 +12,7 @@
 export type {GridLayoutOptions} from './GridLayout';
 export type {ListLayoutOptions, LayoutNode} from './ListLayout';
 export type {TableLayoutProps} from './TableLayout';
+export type {WaterfallLayoutOptions} from './WaterfallLayout';
 export {GridLayout} from './GridLayout';
 export {ListLayout} from './ListLayout';
 export {TableLayout} from './TableLayout';

packages/react-aria-components/docs/Virtualizer.mdx

@@ -277,7 +277,7 @@ function Example() {
 `WaterfallLayout` arranges variable height items in a column layout. The columns are sized between a minimum and maximum size depending on the width of the container. It supports the following options:
 
 <TypeContext.Provider value={docs.links}>
-  <InterfaceType {...docs.exports.GridLayoutOptions} />
+  <InterfaceType {...docs.exports.WaterfallLayoutOptions} />
 </TypeContext.Provider>
 
 ```tsx import

packages/react-aria-components/src/index.ts

@@ -149,4 +149,4 @@ export type {DirectoryDropItem, DraggableCollectionEndEvent, DraggableCollection
 export type {Key, Selection, SortDescriptor, SortDirection, SelectionMode} from 'react-stately';
 export type {ValidationResult, RouterConfig} from '@react-types/shared';
 export type {Color, ColorSpace, ColorFormat} from '@react-types/color';
-export type {ListLayoutOptions, GridLayoutOptions} from '@react-stately/layout';
+export type {ListLayoutOptions, GridLayoutOptions, WaterfallLayoutOptions} from '@react-stately/layout';