@react-spectrum/card 3.0.0-nightly.3734 → 3.0.0-nightly.3741
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/import.mjs +38 -25
- package/dist/main.js +38 -25
- package/dist/main.js.map +1 -1
- package/dist/module.js +38 -25
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +14 -14
- package/dist/types.d.ts.map +1 -1
- package/package.json +22 -22
- package/src/BaseLayout.tsx +12 -11
- package/src/GridLayout.tsx +5 -2
- package/src/WaterfallLayout.tsx +5 -2
package/dist/module.js
CHANGED
|
@@ -14,6 +14,7 @@ import {getFocusableTreeWalker as $8EWFi$getFocusableTreeWalker, FocusRing as $8
|
|
|
14
14
|
import {useHover as $8EWFi$useHover, useFocusWithin as $8EWFi$useFocusWithin} from "@react-aria/interactions";
|
|
15
15
|
import {Size as $8EWFi$Size, Rect as $8EWFi$Rect, LayoutInfo as $8EWFi$LayoutInfo, Layout as $8EWFi$Layout} from "@react-stately/virtualizer";
|
|
16
16
|
import $8EWFi$swchelperssrc_define_propertymjs from "@swc/helpers/src/_define_property.mjs";
|
|
17
|
+
import {getFirstItem as $8EWFi$getFirstItem, getChildNodes as $8EWFi$getChildNodes} from "@react-stately/collections";
|
|
17
18
|
|
|
18
19
|
function $parcel$interopDefault(a) {
|
|
19
20
|
return a && a.__esModule ? a.default : a;
|
|
@@ -819,6 +820,7 @@ function $81a52da995c19652$var$InternalCard(props) {
|
|
|
819
820
|
* governing permissions and limitations under the License.
|
|
820
821
|
*/
|
|
821
822
|
|
|
823
|
+
|
|
822
824
|
class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
823
825
|
validate(invalidationContext) {
|
|
824
826
|
this.collection = this.virtualizer.collection;
|
|
@@ -881,31 +883,32 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
|
881
883
|
return best || null;
|
|
882
884
|
}
|
|
883
885
|
getKeyBelow(key) {
|
|
884
|
-
var _this__findClosest,
|
|
886
|
+
var _this__findClosest, _getFirstItem;
|
|
885
887
|
// Expected key is the currently focused cell so we need the parent row key
|
|
886
888
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
887
889
|
let layoutInfo = this.getLayoutInfo(parentRowKey);
|
|
888
890
|
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x, layoutInfo.rect.maxY + 1, layoutInfo.rect.width, this.virtualizer.visibleRect.height);
|
|
889
891
|
let closestRow = this.collection.getItem((_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key);
|
|
890
|
-
return (
|
|
892
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(closestRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
891
893
|
}
|
|
892
894
|
getKeyAbove(key) {
|
|
893
|
-
var _this__findClosest,
|
|
895
|
+
var _this__findClosest, _getFirstItem;
|
|
894
896
|
// Expected key is the currently focused cell so we need the parent row key
|
|
895
897
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
896
898
|
let layoutInfo = this.getLayoutInfo(parentRowKey);
|
|
897
899
|
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x, 0, layoutInfo.rect.width, layoutInfo.rect.y - 1);
|
|
898
900
|
let closestRow = this.collection.getItem((_this__findClosest = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest === void 0 ? void 0 : _this__findClosest.key);
|
|
899
|
-
return (
|
|
901
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(closestRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
900
902
|
}
|
|
901
903
|
getKeyRightOf(key) {
|
|
902
904
|
// Expected key is the currently focused cell so we need the parent row key
|
|
903
905
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
904
906
|
key = this.direction === "rtl" ? this.collection.getKeyBefore(parentRowKey) : this.collection.getKeyAfter(parentRowKey);
|
|
905
907
|
while(key != null){
|
|
908
|
+
var _getFirstItem;
|
|
906
909
|
let item = this.collection.getItem(key);
|
|
907
910
|
// Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
|
|
908
|
-
if (item.type === "item") return item.
|
|
911
|
+
if (item.type === "item") return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
909
912
|
key = this.direction === "rtl" ? this.collection.getKeyBefore(key) : this.collection.getKeyAfter(key);
|
|
910
913
|
}
|
|
911
914
|
}
|
|
@@ -914,19 +917,22 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
|
914
917
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
915
918
|
key = this.direction === "rtl" ? this.collection.getKeyAfter(parentRowKey) : this.collection.getKeyBefore(parentRowKey);
|
|
916
919
|
while(key != null){
|
|
920
|
+
var _getFirstItem;
|
|
917
921
|
let item = this.collection.getItem(key);
|
|
918
922
|
// Don't check if item is disabled because we want to be able to focus disabled items in a grid (double check this)
|
|
919
|
-
if (item.type === "item") return item.
|
|
923
|
+
if (item.type === "item") return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
920
924
|
key = this.direction === "rtl" ? this.collection.getKeyAfter(key) : this.collection.getKeyBefore(key);
|
|
921
925
|
}
|
|
922
926
|
}
|
|
923
927
|
getFirstKey() {
|
|
928
|
+
var _getFirstItem;
|
|
924
929
|
let firstRow = this.collection.getItem(this.collection.getFirstKey());
|
|
925
|
-
return firstRow.
|
|
930
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(firstRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
926
931
|
}
|
|
927
932
|
getLastKey() {
|
|
933
|
+
var _getFirstItem;
|
|
928
934
|
let lastRow = this.collection.getItem(this.collection.getLastKey());
|
|
929
|
-
return lastRow.
|
|
935
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(lastRow, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
930
936
|
}
|
|
931
937
|
// TODO: pretty unwieldy because it needs to bounce back and forth between the parent key and the child key
|
|
932
938
|
// Perhaps have layoutInfo store childKey as well so we don't need to do this? Or maybe make the layoutInfos be the cells instead of the rows?
|
|
@@ -942,13 +948,14 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
|
942
948
|
let keyAbove = (_this_collection_getItem = this.collection.getItem(this.getKeyAbove(key))) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.parentKey;
|
|
943
949
|
layoutInfo = this.getLayoutInfo(keyAbove);
|
|
944
950
|
if (layoutInfo && layoutInfo.rect.y > pageY) while(layoutInfo && layoutInfo.rect.y > pageY){
|
|
945
|
-
var _this_collection_getItem1;
|
|
946
|
-
let childKey = this.collection.getItem(layoutInfo.key).
|
|
951
|
+
var _getFirstItem, _this_collection_getItem1;
|
|
952
|
+
let childKey = (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
947
953
|
let keyAbove1 = (_this_collection_getItem1 = this.collection.getItem(this.getKeyAbove(childKey))) === null || _this_collection_getItem1 === void 0 ? void 0 : _this_collection_getItem1.parentKey;
|
|
948
954
|
layoutInfo = this.getLayoutInfo(keyAbove1);
|
|
949
955
|
}
|
|
950
956
|
if (layoutInfo) {
|
|
951
|
-
|
|
957
|
+
var _getFirstItem1;
|
|
958
|
+
let childKey1 = (_getFirstItem1 = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem1 === void 0 ? void 0 : _getFirstItem1.key;
|
|
952
959
|
return childKey1;
|
|
953
960
|
}
|
|
954
961
|
}
|
|
@@ -968,13 +975,14 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
|
968
975
|
let keyBelow = (_this_collection_getItem = this.collection.getItem(this.getKeyBelow(key))) === null || _this_collection_getItem === void 0 ? void 0 : _this_collection_getItem.parentKey;
|
|
969
976
|
layoutInfo = this.getLayoutInfo(keyBelow);
|
|
970
977
|
if (layoutInfo && layoutInfo.rect.y < pageY) while(layoutInfo && layoutInfo.rect.y < pageY){
|
|
971
|
-
var _this_collection_getItem1;
|
|
972
|
-
let childKey = this.collection.getItem(layoutInfo.key).
|
|
978
|
+
var _getFirstItem, _this_collection_getItem1;
|
|
979
|
+
let childKey = (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
973
980
|
let keyBelow1 = (_this_collection_getItem1 = this.collection.getItem(this.getKeyBelow(childKey))) === null || _this_collection_getItem1 === void 0 ? void 0 : _this_collection_getItem1.parentKey;
|
|
974
981
|
layoutInfo = this.getLayoutInfo(keyBelow1);
|
|
975
982
|
}
|
|
976
983
|
if (layoutInfo) {
|
|
977
|
-
|
|
984
|
+
var _getFirstItem1;
|
|
985
|
+
let childKey1 = (_getFirstItem1 = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(this.collection.getItem(layoutInfo.key), this.collection))) === null || _getFirstItem1 === void 0 ? void 0 : _getFirstItem1.key;
|
|
978
986
|
return childKey1;
|
|
979
987
|
}
|
|
980
988
|
}
|
|
@@ -989,10 +997,9 @@ class $3d424c147206bac9$export$64943d2e59d72a29 extends (0, $8EWFi$Layout) {
|
|
|
989
997
|
while(key != null){
|
|
990
998
|
let item = collection.getItem(key);
|
|
991
999
|
if (item.textValue) {
|
|
1000
|
+
var _getFirstItem;
|
|
992
1001
|
let substring = item.textValue.slice(0, search.length);
|
|
993
|
-
if (this.collator.compare(substring, search) === 0) return
|
|
994
|
-
...item.childNodes
|
|
995
|
-
][0].key;
|
|
1002
|
+
if (this.collator.compare(substring, search) === 0) return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
996
1003
|
}
|
|
997
1004
|
key = this.collection.getKeyAfter(key);
|
|
998
1005
|
}
|
|
@@ -1230,6 +1237,7 @@ function $c0ba81539c443916$var$linearPartition(seq, k) {
|
|
|
1230
1237
|
* governing permissions and limitations under the License.
|
|
1231
1238
|
*/
|
|
1232
1239
|
|
|
1240
|
+
|
|
1233
1241
|
const $ed42fd44b9b9b664$var$DEFAULT_OPTIONS = {
|
|
1234
1242
|
S: {
|
|
1235
1243
|
itemPadding: 20,
|
|
@@ -1365,24 +1373,26 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends (0, $3d424c147206bac9$ex
|
|
|
1365
1373
|
// then return the key that occupies the row + column below. This can be done by figuring out how many cards exist per column then dividing the
|
|
1366
1374
|
// collection contents by that number (which will give us the row distribution)
|
|
1367
1375
|
getKeyBelow(key) {
|
|
1368
|
-
var
|
|
1376
|
+
var _getFirstItem;
|
|
1369
1377
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1370
1378
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1371
1379
|
let indexRowBelow;
|
|
1372
1380
|
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey);
|
|
1373
1381
|
if (index !== -1) indexRowBelow = index + this.numColumns;
|
|
1374
1382
|
else return null;
|
|
1375
|
-
|
|
1383
|
+
let row = this.collection.rows[indexRowBelow];
|
|
1384
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(row, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
1376
1385
|
}
|
|
1377
1386
|
getKeyAbove(key) {
|
|
1378
|
-
var
|
|
1387
|
+
var _getFirstItem;
|
|
1379
1388
|
// Expected key is the currently focused cell so we need the parent row key
|
|
1380
1389
|
let parentRowKey = this.collection.getItem(key).parentKey;
|
|
1381
1390
|
let indexRowAbove;
|
|
1382
1391
|
let index = this.collection.rows.findIndex((card)=>card.key === parentRowKey);
|
|
1383
1392
|
if (index !== -1) indexRowAbove = index - this.numColumns;
|
|
1384
1393
|
else return null;
|
|
1385
|
-
|
|
1394
|
+
let row = this.collection.rows[indexRowAbove];
|
|
1395
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(row, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
1386
1396
|
}
|
|
1387
1397
|
constructor(options = {}){
|
|
1388
1398
|
super(options);
|
|
@@ -1414,6 +1424,7 @@ class $ed42fd44b9b9b664$export$7d2b12578154a735 extends (0, $3d424c147206bac9$ex
|
|
|
1414
1424
|
* governing permissions and limitations under the License.
|
|
1415
1425
|
*/
|
|
1416
1426
|
|
|
1427
|
+
|
|
1417
1428
|
class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$export$64943d2e59d72a29) {
|
|
1418
1429
|
get layoutType() {
|
|
1419
1430
|
return "waterfall";
|
|
@@ -1514,7 +1525,7 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
1514
1525
|
return minIndex;
|
|
1515
1526
|
}
|
|
1516
1527
|
getClosestRight(key) {
|
|
1517
|
-
var _this__findClosest,
|
|
1528
|
+
var _this__findClosest, _getFirstItem;
|
|
1518
1529
|
let layoutInfo = this.getLayoutInfo(key);
|
|
1519
1530
|
// Refactored from v2. Current strategy is to find the closest card in the adjacent column.
|
|
1520
1531
|
// This prevent the issue where it was possible that the closest layoutInfo would be two columns over due to the middle card being exceptionally tall
|
|
@@ -1527,10 +1538,11 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
1527
1538
|
rect = new (0, $8EWFi$Rect)(layoutInfo.rect.maxX + 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1528
1539
|
key = (_this__findClosest1 = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest1 === void 0 ? void 0 : _this__findClosest1.key;
|
|
1529
1540
|
}
|
|
1530
|
-
|
|
1541
|
+
let item = this.collection.getItem(key);
|
|
1542
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
1531
1543
|
}
|
|
1532
1544
|
getClosestLeft(key) {
|
|
1533
|
-
var _this__findClosest,
|
|
1545
|
+
var _this__findClosest, _getFirstItem;
|
|
1534
1546
|
let layoutInfo = this.getLayoutInfo(key);
|
|
1535
1547
|
// First look for a card to the immediate left of the current card. If we can't find any, look for the nearest card in the entire column to the left of the card
|
|
1536
1548
|
let rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, layoutInfo.rect.y, layoutInfo.rect.width + this.horizontalSpacing, layoutInfo.rect.height);
|
|
@@ -1540,7 +1552,8 @@ class $03278f8d0f6860bb$export$e9f7cda058ba8df8 extends (0, $3d424c147206bac9$ex
|
|
|
1540
1552
|
rect = new (0, $8EWFi$Rect)(layoutInfo.rect.x - layoutInfo.rect.width - this.horizontalSpacing - 1, 0, layoutInfo.rect.width + this.horizontalSpacing, this.virtualizer.contentSize.height);
|
|
1541
1553
|
key = (_this__findClosest1 = this._findClosest(layoutInfo.rect, rect)) === null || _this__findClosest1 === void 0 ? void 0 : _this__findClosest1.key;
|
|
1542
1554
|
}
|
|
1543
|
-
|
|
1555
|
+
let item = this.collection.getItem(key);
|
|
1556
|
+
return (_getFirstItem = (0, $8EWFi$getFirstItem)((0, $8EWFi$getChildNodes)(item, this.collection))) === null || _getFirstItem === void 0 ? void 0 : _getFirstItem.key;
|
|
1544
1557
|
}
|
|
1545
1558
|
getKeyRightOf(key) {
|
|
1546
1559
|
// Expected key is the currently focused cell so we need the parent row key
|