@react-stately/layout - npm Package Compare versions

Comparing version 3.13.10-nightly.4691 to 3.13.10-nightly.4694

dist/ListLayout.main.js

@@ -312,2 +312,10 @@ var $iId4j$reactstatelycollections = require("@react-stately/collections");
     }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = this.getLayoutInfo(target.key);
+        let rect;
+        if (target.dropPosition === 'before') rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+        else if (target.dropPosition === 'after') rect = new (0, $iId4j$reactstatelyvirtualizer.Rect)(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+        else rect = layoutInfo.rect;
+        return new (0, $iId4j$reactstatelyvirtualizer.LayoutInfo)('dropIndicator', target.key + ':' + target.dropPosition, rect);
+    }
     /**
@@ -322,2 +330,3 @@ * Creates a new ListLayout with options. See the list of properties below for a description
         this.estimatedHeadingHeight = options.estimatedHeadingHeight;
+        this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
         this.layoutNodes = new Map();
@@ -324,0 +333,0 @@ this.rootNodes = [];

dist/ListLayout.module.js

@@ -306,2 +306,10 @@ import {getChildNodes as $img26$getChildNodes} from "@react-stately/collections";
     }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = this.getLayoutInfo(target.key);
+        let rect;
+        if (target.dropPosition === 'before') rect = new (0, $img26$Rect)(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+        else if (target.dropPosition === 'after') rect = new (0, $img26$Rect)(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+        else rect = layoutInfo.rect;
+        return new (0, $img26$LayoutInfo)('dropIndicator', target.key + ':' + target.dropPosition, rect);
+    }
     /**
@@ -316,2 +324,3 @@ * Creates a new ListLayout with options. See the list of properties below for a description
         this.estimatedHeadingHeight = options.estimatedHeadingHeight;
+        this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
         this.layoutNodes = new Map();
@@ -318,0 +327,0 @@ this.rootNodes = [];

dist/main.js

@@ -0,1 +1,2 @@
+var $1f7773ceb2a3b9a6$exports = require("./GridLayout.main.js");
 var $fe69e47e38ed0ac4$exports = require("./ListLayout.main.js");
@@ -9,2 +10,3 @@ var $67c493497dcda343$exports = require("./TableLayout.main.js");
 
+$parcel$export(module.exports, "GridLayout", () => $1f7773ceb2a3b9a6$exports.GridLayout);
 $parcel$export(module.exports, "ListLayout", () => $fe69e47e38ed0ac4$exports.ListLayout);
@@ -26,2 +28,3 @@ $parcel$export(module.exports, "TableLayout", () => $67c493497dcda343$exports.TableLayout);
 
+
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -0,1 +1,2 @@
+import {GridLayout as $a58592d295a170a4$export$7d2b12578154a735} from "./GridLayout.module.js";
 import {ListLayout as $61ef60fc9b1041f4$export$cacbb3924155d68e} from "./ListLayout.module.js";
@@ -18,3 +19,4 @@ import {TableLayout as $a152112e902709bf$export$62444c3c724b1b20} from "./TableLayout.module.js";
 
-export {$61ef60fc9b1041f4$export$cacbb3924155d68e as ListLayout, $a152112e902709bf$export$62444c3c724b1b20 as TableLayout};
+
+export {$a58592d295a170a4$export$7d2b12578154a735 as GridLayout, $61ef60fc9b1041f4$export$cacbb3924155d68e as ListLayout, $a152112e902709bf$export$62444c3c724b1b20 as TableLayout};
 //# sourceMappingURL=module.js.map

dist/TableLayout.main.js

@@ -404,7 +404,4 @@ var $fe69e47e38ed0ac4$exports = require("./ListLayout.main.js");
     getDropTargetFromPoint(x, y, isValidDropTarget) {
-        var _this_virtualizer_layout_getVisibleLayoutInfos_find;
         x += this.virtualizer.visibleRect.x;
         y += this.virtualizer.visibleRect.y;
-        // Offset for height of header row
-        y -= (_this_virtualizer_layout_getVisibleLayoutInfos_find = this.virtualizer.layout.getVisibleLayoutInfos(new (0, $9lycG$reactstatelyvirtualizer.Rect)(x, y, 1, 1)).find((info)=>info.type === 'headerrow')) === null || _this_virtualizer_layout_getVisibleLayoutInfos_find === void 0 ? void 0 : _this_virtualizer_layout_getVisibleLayoutInfos_find.rect.height;
         // Custom variation of this.virtualizer.keyAtPoint that ignores body
@@ -450,2 +447,7 @@ let key;
     }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.parentKey = this.collection.body.key;
+        return layoutInfo;
+    }
     constructor(options){
@@ -452,0 +454,0 @@ super(options);

dist/TableLayout.module.js

@@ -398,7 +398,4 @@ import {ListLayout as $61ef60fc9b1041f4$export$cacbb3924155d68e} from "./ListLayout.module.js";
     getDropTargetFromPoint(x, y, isValidDropTarget) {
-        var _this_virtualizer_layout_getVisibleLayoutInfos_find;
         x += this.virtualizer.visibleRect.x;
         y += this.virtualizer.visibleRect.y;
-        // Offset for height of header row
-        y -= (_this_virtualizer_layout_getVisibleLayoutInfos_find = this.virtualizer.layout.getVisibleLayoutInfos(new (0, $bmsJv$Rect)(x, y, 1, 1)).find((info)=>info.type === 'headerrow')) === null || _this_virtualizer_layout_getVisibleLayoutInfos_find === void 0 ? void 0 : _this_virtualizer_layout_getVisibleLayoutInfos_find.rect.height;
         // Custom variation of this.virtualizer.keyAtPoint that ignores body
@@ -444,2 +441,7 @@ let key;
     }
+    getDropTargetLayoutInfo(target) {
+        let layoutInfo = super.getDropTargetLayoutInfo(target);
+        layoutInfo.parentKey = this.collection.body.key;
+        return layoutInfo;
+    }
     constructor(options){
@@ -446,0 +448,0 @@ super(options);

dist/types.d.ts

@@ -1,5 +0,52 @@
-import { Collection, DropTarget, DropTargetDelegate, Key, Node } from "@react-types/shared";
-import { InvalidationContext, Layout, LayoutInfo, Rect, Size } from "@react-stately/virtualizer";
+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);
+    validate(): 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 {
@@ -14,2 +61,4 @@ /** The fixed height of a row in px. */
     estimatedHeadingHeight?: number;
+    /** The thickness of the drop indicator. */
+    dropIndicatorThickness?: number;
 }
@@ -36,2 +85,3 @@ export interface LayoutNode {
     protected estimatedHeadingHeight: number;
+    protected dropIndicatorThickness: number;
     protected layoutNodes: Map<Key, LayoutNode>;
@@ -66,2 +116,3 @@ protected contentSize: Size;
     getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
 }
@@ -87,4 +138,5 @@ export interface TableLayoutProps {
     getDropTargetFromPoint(x: number, y: number, isValidDropTarget: (target: DropTarget) => boolean): DropTarget;
+    getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo;
 }
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-stately/layout",
-  "version": "3.13.10-nightly.4691+fabca84b9",
+  "version": "3.13.10-nightly.4694+b46d23b99",
   "description": "Spectrum UI components in React",
@@ -25,8 +25,8 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-stately/collections": "3.0.0-nightly.2979+fabca84b9",
-    "@react-stately/table": "3.11.9-nightly.4691+fabca84b9",
-    "@react-stately/virtualizer": "3.7.2-nightly.4691+fabca84b9",
-    "@react-types/grid": "3.2.7-nightly.4691+fabca84b9",
-    "@react-types/shared": "3.0.0-nightly.2979+fabca84b9",
-    "@react-types/table": "3.9.6-nightly.4691+fabca84b9",
+    "@react-stately/collections": "3.0.0-nightly.2982+b46d23b99",
+    "@react-stately/table": "3.11.9-nightly.4694+b46d23b99",
+    "@react-stately/virtualizer": "3.7.2-nightly.4694+b46d23b99",
+    "@react-types/grid": "3.2.7-nightly.4694+b46d23b99",
+    "@react-types/shared": "3.0.0-nightly.2982+b46d23b99",
+    "@react-types/table": "3.9.6-nightly.4694+b46d23b99",
     "@swc/helpers": "^0.5.0"
@@ -40,3 +40,3 @@ },
   },
-  "gitHead": "fabca84b95c9c61f9062d5f1e66ebe2c920a2a5d"
+  "gitHead": "b46d23b9919eaec8ab1f621b52beced82e88b6ca"
 }

src/index.ts

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

src/ListLayout.ts

@@ -13,3 +13,3 @@ /*
 
-import {Collection, DropTarget, DropTargetDelegate, Key, Node} from '@react-types/shared';
+import {Collection, DropTarget, DropTargetDelegate, ItemDropTarget, Key, Node} from '@react-types/shared';
 import {getChildNodes} from '@react-stately/collections';
@@ -26,3 +26,5 @@ import {InvalidationContext, Layout, LayoutInfo, Point, Rect, Size} from '@react-stately/virtualizer';
   /** The estimated height of a section header, when the height is variable. */
-  estimatedHeadingHeight?: number
+  estimatedHeadingHeight?: number,
+  /** The thickness of the drop indicator. */
+  dropIndicatorThickness?: number
 }
@@ -54,2 +56,3 @@
   protected estimatedHeadingHeight: number;
+  protected dropIndicatorThickness: number;
   protected layoutNodes: Map<Key, LayoutNode>;
@@ -77,2 +80,3 @@ protected contentSize: Size;
     this.estimatedHeadingHeight = options.estimatedHeadingHeight;
+    this.dropIndicatorThickness = options.dropIndicatorThickness || 2;
     this.layoutNodes = new Map();
@@ -454,2 +458,16 @@ this.rootNodes = [];
   }
+
+  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
+    let layoutInfo = this.getLayoutInfo(target.key);
+    let rect: Rect;
+    if (target.dropPosition === 'before') {
+      rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.y - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+    } else if (target.dropPosition === 'after') {
+      rect = new Rect(layoutInfo.rect.x, layoutInfo.rect.maxY - this.dropIndicatorThickness / 2, layoutInfo.rect.width, this.dropIndicatorThickness);
+    } else {
+      rect = layoutInfo.rect;
+    }
+
+    return new LayoutInfo('dropIndicator', target.key + ':' + target.dropPosition, rect);
+  }
 }

src/TableLayout.ts

@@ -13,3 +13,3 @@ /*
 
-import {DropTarget, Key} from '@react-types/shared';
+import {DropTarget, ItemDropTarget, Key} from '@react-types/shared';
 import {getChildNodes} from '@react-stately/collections';
@@ -512,5 +512,2 @@ import {GridNode} from '@react-types/grid';
 
-    // Offset for height of header row
-    y -= this.virtualizer.layout.getVisibleLayoutInfos(new Rect(x, y, 1, 1)).find(info => info.type === 'headerrow')?.rect.height;
-
     // Custom variation of this.virtualizer.keyAtPoint that ignores body
@@ -559,2 +556,8 @@ let key: Key;
   }
+
+  getDropTargetLayoutInfo(target: ItemDropTarget): LayoutInfo {
+    let layoutInfo = super.getDropTargetLayoutInfo(target);
+    layoutInfo.parentKey = this.collection.body.key;
+    return layoutInfo;
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

374124

increased by23.34%

Number of package files

29

increased by26.09%

Lines of code

4033

increased by20.78%

Dependency changes

• Updated@react-stately/collections@3.0.0-nightly.2982+b46d23b99

• Updated@react-stately/table@3.11.9-nightly.4694+b46d23b99

• Updated@react-stately/virtualizer@3.7.2-nightly.4694+b46d23b99

• Updated@react-types/grid@3.2.7-nightly.4694+b46d23b99

• Updated@react-types/shared@3.0.0-nightly.2982+b46d23b99

• Updated@react-types/table@3.9.6-nightly.4694+b46d23b99