@box/blueprint-web 6.26.4 → 6.27.0
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/lib-esm/index.css +134 -132
- package/lib-esm/index.d.ts +1 -0
- package/lib-esm/index.js +1 -0
- package/lib-esm/primitives/chips/chip.module.js +1 -1
- package/lib-esm/toolbar/toolbar.module.js +1 -1
- package/lib-esm/util-components/base-grid-list-item/base-grid-list-item.js +5 -2
- package/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js +1 -1
- package/lib-esm/util-components/base-grid-list-item/base-grid-list.d.ts +2 -0
- package/lib-esm/util-components/base-grid-list-item/base-grid-list.js +10 -4
- package/lib-esm/util-components/base-grid-list-item/index.d.ts +2 -0
- package/lib-esm/util-components/base-grid-list-item/static-grid-list-item.d.ts +3 -0
- package/lib-esm/util-components/base-grid-list-item/static-grid-list-item.js +40 -0
- package/lib-esm/util-components/base-grid-list-item/static-grid-list.d.ts +3 -0
- package/lib-esm/util-components/base-grid-list-item/static-grid-list.js +23 -0
- package/lib-esm/util-components/base-grid-list-item/types.d.ts +10 -1
- package/lib-esm/utils/filterNonHtmlProps.d.ts +2 -0
- package/lib-esm/utils/filterNonHtmlProps.js +12 -0
- package/lib-esm/utils/keyboardUtils.d.ts +4 -1
- package/lib-esm/utils/keyboardUtils.js +6 -1
- package/package.json +2 -2
package/lib-esm/index.css
CHANGED
|
@@ -1261,7 +1261,7 @@
|
|
|
1261
1261
|
transform:translateY(0);
|
|
1262
1262
|
}
|
|
1263
1263
|
}
|
|
1264
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1264
|
+
.bp_base_grid_list_item_module_smallList--b640d{
|
|
1265
1265
|
box-sizing:border-box;
|
|
1266
1266
|
display:flex;
|
|
1267
1267
|
flex-direction:column;
|
|
@@ -1272,7 +1272,7 @@
|
|
|
1272
1272
|
padding:var(--space-1);
|
|
1273
1273
|
width:auto;
|
|
1274
1274
|
}
|
|
1275
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1275
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d{
|
|
1276
1276
|
--actions-opacity:0;
|
|
1277
1277
|
--thumbnail-size:var(--size-9);
|
|
1278
1278
|
--item-background:var(--surface-item-small-surface);
|
|
@@ -1291,11 +1291,11 @@
|
|
|
1291
1291
|
transform:translateZ(0);
|
|
1292
1292
|
width:auto;
|
|
1293
1293
|
}
|
|
1294
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1294
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1295
1295
|
grid-template-columns:var(--thumbnail-size) auto 0;
|
|
1296
1296
|
grid-template-rows:100% 0;
|
|
1297
1297
|
}
|
|
1298
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1298
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d{
|
|
1299
1299
|
align-items:center;
|
|
1300
1300
|
aspect-ratio:1;
|
|
1301
1301
|
display:flex;
|
|
@@ -1304,19 +1304,19 @@
|
|
|
1304
1304
|
overflow:hidden;
|
|
1305
1305
|
z-index:1;
|
|
1306
1306
|
}
|
|
1307
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1307
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d img,.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d svg{
|
|
1308
1308
|
height:100%;
|
|
1309
1309
|
object-fit:cover;
|
|
1310
1310
|
object-position:left;
|
|
1311
1311
|
width:100%;
|
|
1312
1312
|
}
|
|
1313
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1313
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d.bp_base_grid_list_item_module_customSize--b640d img,.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d.bp_base_grid_list_item_module_customSize--b640d svg{
|
|
1314
1314
|
height:unset;
|
|
1315
1315
|
max-height:100%;
|
|
1316
1316
|
max-width:100%;
|
|
1317
1317
|
width:unset;
|
|
1318
1318
|
}
|
|
1319
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1319
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_header--b640d{
|
|
1320
1320
|
color:var(--text-text-on-light);
|
|
1321
1321
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1322
1322
|
font-size:.875rem;
|
|
@@ -1327,11 +1327,11 @@
|
|
|
1327
1327
|
text-decoration:none;
|
|
1328
1328
|
text-transform:none;
|
|
1329
1329
|
}
|
|
1330
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1330
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_header--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1331
1331
|
align-items:center;
|
|
1332
1332
|
display:flex;
|
|
1333
1333
|
}
|
|
1334
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1334
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_subtitle--b640d{
|
|
1335
1335
|
color:var(--text-text-on-light-secondary);
|
|
1336
1336
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1337
1337
|
font-size:.75rem;
|
|
@@ -1342,17 +1342,17 @@
|
|
|
1342
1342
|
text-decoration:none;
|
|
1343
1343
|
text-transform:none;
|
|
1344
1344
|
}
|
|
1345
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1345
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_header--b640d,.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_subtitle--b640d{
|
|
1346
1346
|
display:inline-block;
|
|
1347
1347
|
overflow:hidden;
|
|
1348
1348
|
text-overflow:ellipsis;
|
|
1349
1349
|
white-space:nowrap;
|
|
1350
1350
|
}
|
|
1351
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1351
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d:not(:has(.bp_base_grid_list_item_module_header--b640d)),.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d:not(:has(.bp_base_grid_list_item_module_subtitle--b640d)){
|
|
1352
1352
|
grid-template-rows:100% 0;
|
|
1353
1353
|
row-gap:0;
|
|
1354
1354
|
}
|
|
1355
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1355
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d{
|
|
1356
1356
|
align-items:center;
|
|
1357
1357
|
display:flex;
|
|
1358
1358
|
grid-area:actions;
|
|
@@ -1362,11 +1362,11 @@
|
|
|
1362
1362
|
padding-right:0;
|
|
1363
1363
|
}
|
|
1364
1364
|
@media (pointer: coarse){
|
|
1365
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1365
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d{
|
|
1366
1366
|
--actions-opacity:1;
|
|
1367
1367
|
}
|
|
1368
1368
|
}
|
|
1369
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1369
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_selection--b640d{
|
|
1370
1370
|
align-items:center;
|
|
1371
1371
|
background:var(--item-background);
|
|
1372
1372
|
border-radius:var(--radius-2);
|
|
@@ -1375,10 +1375,10 @@
|
|
|
1375
1375
|
justify-content:center;
|
|
1376
1376
|
width:var(--space-8);
|
|
1377
1377
|
}
|
|
1378
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1378
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_selection--b640d:hover{
|
|
1379
1379
|
background:var(--surface-cta-surface-icon-hover);
|
|
1380
1380
|
}
|
|
1381
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1381
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d{
|
|
1382
1382
|
align-items:center;
|
|
1383
1383
|
border-radius:var(--radius-2);
|
|
1384
1384
|
display:flex;
|
|
@@ -1386,18 +1386,18 @@
|
|
|
1386
1386
|
justify-content:flex-end;
|
|
1387
1387
|
margin-inline-end:var(--space-2);
|
|
1388
1388
|
}
|
|
1389
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1389
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d:last-child{
|
|
1390
1390
|
margin-inline-end:0;
|
|
1391
1391
|
}
|
|
1392
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1392
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_actionsCheckboxWrapper--b640d{
|
|
1393
1393
|
background:var(--item-hover);
|
|
1394
1394
|
display:flex;
|
|
1395
1395
|
}
|
|
1396
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1396
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d[data-active-item],.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d[data-focus-visible],.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d[data-focused],.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d[data-hovered]{
|
|
1397
1397
|
--actions-opacity:1;
|
|
1398
1398
|
background:var(--item-hover);
|
|
1399
1399
|
}
|
|
1400
|
-
.bp_base_grid_list_item_module_smallList--
|
|
1400
|
+
.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d[data-active-item]::before,.bp_base_grid_list_item_module_smallList--b640d .bp_base_grid_list_item_module_smallListItem--b640d[data-focus-visible]::before{
|
|
1401
1401
|
--actions-opacity:1;
|
|
1402
1402
|
border-radius:.875rem;
|
|
1403
1403
|
content:"";
|
|
@@ -1411,7 +1411,7 @@
|
|
|
1411
1411
|
width:100%;
|
|
1412
1412
|
}
|
|
1413
1413
|
|
|
1414
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1414
|
+
.bp_base_grid_list_item_module_largeList--b640d{
|
|
1415
1415
|
box-sizing:border-box;
|
|
1416
1416
|
display:flex;
|
|
1417
1417
|
flex-direction:column;
|
|
@@ -1421,7 +1421,7 @@
|
|
|
1421
1421
|
overflow:auto;
|
|
1422
1422
|
padding:var(--space-1);
|
|
1423
1423
|
}
|
|
1424
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1424
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d{
|
|
1425
1425
|
--thumbnail-size:10rem;
|
|
1426
1426
|
--actions-opacity:0;
|
|
1427
1427
|
--item-background:var(--gray-white);
|
|
@@ -1438,18 +1438,18 @@
|
|
|
1438
1438
|
position:relative;
|
|
1439
1439
|
transform:translateZ(0);
|
|
1440
1440
|
}
|
|
1441
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1441
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1442
1442
|
grid-template-rows:1fr 1fr 1fr;
|
|
1443
1443
|
}
|
|
1444
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1444
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d:focus-within{
|
|
1445
1445
|
--actions-opacity:1;
|
|
1446
1446
|
}
|
|
1447
1447
|
@media (max-width: 374px){
|
|
1448
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1448
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d{
|
|
1449
1449
|
--thumbnail-size:7.5rem;
|
|
1450
1450
|
}
|
|
1451
1451
|
}
|
|
1452
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1452
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d{
|
|
1453
1453
|
aspect-ratio:4/3;
|
|
1454
1454
|
border:var(--border-1) solid var(--gray-10);
|
|
1455
1455
|
border-radius:var(--radius-3);
|
|
@@ -1457,24 +1457,24 @@
|
|
|
1457
1457
|
overflow:hidden;
|
|
1458
1458
|
z-index:1;
|
|
1459
1459
|
}
|
|
1460
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1460
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d img{
|
|
1461
1461
|
height:100%;
|
|
1462
1462
|
object-fit:cover;
|
|
1463
1463
|
object-position:left;
|
|
1464
1464
|
width:100%;
|
|
1465
1465
|
}
|
|
1466
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1466
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1467
1467
|
border:none;
|
|
1468
1468
|
}
|
|
1469
1469
|
@media (max-width: 374px){
|
|
1470
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1470
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d{
|
|
1471
1471
|
aspect-ratio:1/1;
|
|
1472
1472
|
}
|
|
1473
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1473
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d img{
|
|
1474
1474
|
object-fit:contain;
|
|
1475
1475
|
}
|
|
1476
1476
|
}
|
|
1477
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1477
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d{
|
|
1478
1478
|
align-items:center;
|
|
1479
1479
|
display:flex;
|
|
1480
1480
|
height:var(--space-6);
|
|
@@ -1486,11 +1486,11 @@
|
|
|
1486
1486
|
top:.875rem;
|
|
1487
1487
|
}
|
|
1488
1488
|
@media (pointer: coarse){
|
|
1489
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1489
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d{
|
|
1490
1490
|
--actions-opacity:1;
|
|
1491
1491
|
}
|
|
1492
1492
|
}
|
|
1493
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1493
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_selection--b640d{
|
|
1494
1494
|
align-items:center;
|
|
1495
1495
|
background:var(--item-background);
|
|
1496
1496
|
border-radius:var(--radius-2);
|
|
@@ -1499,15 +1499,15 @@
|
|
|
1499
1499
|
justify-content:center;
|
|
1500
1500
|
width:var(--space-8);
|
|
1501
1501
|
}
|
|
1502
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1502
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_selection--b640d:hover{
|
|
1503
1503
|
background:var(--surface-cta-surface-icon-hover);
|
|
1504
1504
|
}
|
|
1505
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1505
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_fade--b640d{
|
|
1506
1506
|
align-self:stretch;
|
|
1507
1507
|
background:linear-gradient(270deg, #fff 0, #fff0 100%);
|
|
1508
1508
|
width:var(--size-8);
|
|
1509
1509
|
}
|
|
1510
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1510
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d{
|
|
1511
1511
|
align-items:center;
|
|
1512
1512
|
background:var(--item-background);
|
|
1513
1513
|
border-radius:var(--radius-2);
|
|
@@ -1516,14 +1516,14 @@
|
|
|
1516
1516
|
justify-content:flex-end;
|
|
1517
1517
|
margin-inline-end:var(--space-2);
|
|
1518
1518
|
}
|
|
1519
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1519
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d:last-child{
|
|
1520
1520
|
margin-inline-end:0;
|
|
1521
1521
|
}
|
|
1522
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1522
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_actionsCheckboxWrapper--b640d{
|
|
1523
1523
|
background:var(--item-background);
|
|
1524
1524
|
display:flex;
|
|
1525
1525
|
}
|
|
1526
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1526
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_header--b640d{
|
|
1527
1527
|
align-items:center;
|
|
1528
1528
|
color:var(--text-text-on-light);
|
|
1529
1529
|
display:inline-flex;
|
|
@@ -1540,7 +1540,7 @@
|
|
|
1540
1540
|
text-transform:none;
|
|
1541
1541
|
white-space:nowrap;
|
|
1542
1542
|
}
|
|
1543
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1543
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_subtitle--b640d{
|
|
1544
1544
|
align-items:center;
|
|
1545
1545
|
color:var(--text-text-on-light-secondary);
|
|
1546
1546
|
display:flex;
|
|
@@ -1555,7 +1555,7 @@
|
|
|
1555
1555
|
text-transform:none;
|
|
1556
1556
|
white-space:nowrap;
|
|
1557
1557
|
}
|
|
1558
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1558
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_description--b640d{
|
|
1559
1559
|
-webkit-box-orient:vertical;
|
|
1560
1560
|
-webkit-line-clamp:3;
|
|
1561
1561
|
color:var(--text-text-on-light);
|
|
@@ -1573,13 +1573,13 @@
|
|
|
1573
1573
|
text-decoration:none;
|
|
1574
1574
|
text-transform:none;
|
|
1575
1575
|
}
|
|
1576
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1576
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_snippet--b640d{
|
|
1577
1577
|
grid-area:description;
|
|
1578
1578
|
margin:0;
|
|
1579
1579
|
margin-block-end:var(--space-1);
|
|
1580
1580
|
margin-block-start:var(--space-3);
|
|
1581
1581
|
}
|
|
1582
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1582
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d .bp_base_grid_list_item_module_snippet--b640d .bp_base_grid_list_item_module_snippetContent--b640d{
|
|
1583
1583
|
-webkit-box-orient:vertical;
|
|
1584
1584
|
-webkit-line-clamp:2;
|
|
1585
1585
|
border:0 0 0 var(--space-05);
|
|
@@ -1598,12 +1598,12 @@
|
|
|
1598
1598
|
text-decoration:none;
|
|
1599
1599
|
text-transform:none;
|
|
1600
1600
|
}
|
|
1601
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1601
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[data-active-item],.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[data-focus-visible],.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[data-focused],.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[data-hovered]{
|
|
1602
1602
|
--actions-opacity:1;
|
|
1603
1603
|
box-shadow:var(--dropshadow-2);
|
|
1604
1604
|
outline:var(--border-1) solid var(--border-card-border);
|
|
1605
1605
|
}
|
|
1606
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1606
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[data-active-item]::before,.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[data-focus-visible]::before{
|
|
1607
1607
|
border-radius:.875rem;
|
|
1608
1608
|
content:"";
|
|
1609
1609
|
display:block;
|
|
@@ -1615,31 +1615,31 @@
|
|
|
1615
1615
|
top:0;
|
|
1616
1616
|
width:100%;
|
|
1617
1617
|
}
|
|
1618
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1618
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true]{
|
|
1619
1619
|
--actions-opacity:1;
|
|
1620
1620
|
--item-background:var(--box-blue-05);
|
|
1621
1621
|
outline:var(--border-2) solid var(--border-card-border-focus);
|
|
1622
1622
|
z-index:2;
|
|
1623
1623
|
}
|
|
1624
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1624
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true] .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_fade--b640d{
|
|
1625
1625
|
background:linear-gradient(270deg, #f2f7fd 0, #f2f7fd00 100%);
|
|
1626
1626
|
}
|
|
1627
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1627
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused]) .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d{
|
|
1628
1628
|
display:none;
|
|
1629
1629
|
}
|
|
1630
1630
|
@supports selector(:has(.foo)){
|
|
1631
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1631
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true]:has(+ .bp_base_grid_list_item_module_react-aria-DropIndicator--b640d + [aria-selected=true]),.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true]:has(+ [aria-selected=true]){
|
|
1632
1632
|
border-end-end-radius:0;
|
|
1633
1633
|
border-end-start-radius:0;
|
|
1634
1634
|
}
|
|
1635
|
-
.bp_base_grid_list_item_module_largeList--
|
|
1635
|
+
.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true] + .bp_base_grid_list_item_module_react-aria-DropIndicator--b640d + [aria-selected=true],.bp_base_grid_list_item_module_largeList--b640d .bp_base_grid_list_item_module_largeListItem--b640d[aria-selected=true] + [aria-selected=true]{
|
|
1636
1636
|
border-start-end-radius:0;
|
|
1637
1637
|
border-start-start-radius:0;
|
|
1638
1638
|
border-top:none;
|
|
1639
1639
|
}
|
|
1640
1640
|
}
|
|
1641
1641
|
|
|
1642
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1642
|
+
.bp_base_grid_list_item_module_gridList--b640d{
|
|
1643
1643
|
box-sizing:border-box;
|
|
1644
1644
|
display:grid;
|
|
1645
1645
|
gap:var(--space-2);
|
|
@@ -1649,7 +1649,7 @@
|
|
|
1649
1649
|
overflow:auto;
|
|
1650
1650
|
padding:var(--space-1);
|
|
1651
1651
|
}
|
|
1652
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1652
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d{
|
|
1653
1653
|
--actions-opacity:0;
|
|
1654
1654
|
--item-background:var(--gray-white);
|
|
1655
1655
|
--row-gap:var(--space-2);
|
|
@@ -1667,15 +1667,15 @@
|
|
|
1667
1667
|
row-gap:var(--row-gap);
|
|
1668
1668
|
transform:translateZ(0);
|
|
1669
1669
|
}
|
|
1670
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1670
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d:focus-within{
|
|
1671
1671
|
--actions-opacity:1;
|
|
1672
1672
|
}
|
|
1673
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1673
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_statusPin--b640d{
|
|
1674
1674
|
left:var(--space-3);
|
|
1675
1675
|
position:absolute;
|
|
1676
1676
|
top:var(--space-3);
|
|
1677
1677
|
}
|
|
1678
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1678
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d{
|
|
1679
1679
|
aspect-ratio:4/3;
|
|
1680
1680
|
background:var(--gray-white);
|
|
1681
1681
|
border:var(--border-1) solid var(--border-gridthumbnail-border);
|
|
@@ -1683,25 +1683,25 @@
|
|
|
1683
1683
|
grid-area:thumbnail;
|
|
1684
1684
|
overflow:hidden;
|
|
1685
1685
|
}
|
|
1686
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1686
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d img{
|
|
1687
1687
|
height:100%;
|
|
1688
1688
|
object-fit:contain;
|
|
1689
1689
|
width:100%;
|
|
1690
1690
|
}
|
|
1691
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1691
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1692
1692
|
border:none;
|
|
1693
1693
|
}
|
|
1694
1694
|
@media (pointer: coarse){
|
|
1695
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1695
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_thumbnail--b640d{
|
|
1696
1696
|
margin-block-end:var(--space-1);
|
|
1697
1697
|
}
|
|
1698
1698
|
}
|
|
1699
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1699
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_actions--b640d{
|
|
1700
1700
|
grid-area:subtitle;
|
|
1701
1701
|
margin-block-start:-.25rem;
|
|
1702
1702
|
opacity:var(--actions-opacity);
|
|
1703
1703
|
}
|
|
1704
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1704
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_selection--b640d{
|
|
1705
1705
|
align-items:center;
|
|
1706
1706
|
border-radius:var(--radius-2);
|
|
1707
1707
|
display:flex;
|
|
@@ -1712,10 +1712,10 @@
|
|
|
1712
1712
|
top:var(--space-2);
|
|
1713
1713
|
width:var(--space-8);
|
|
1714
1714
|
}
|
|
1715
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1715
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_selection--b640d:hover{
|
|
1716
1716
|
background:var(--surface-cta-surface-icon-hover);
|
|
1717
1717
|
}
|
|
1718
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1718
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d{
|
|
1719
1719
|
align-items:center;
|
|
1720
1720
|
background:var(--item-background);
|
|
1721
1721
|
border-radius:var(--radius-2);
|
|
@@ -1724,12 +1724,12 @@
|
|
|
1724
1724
|
justify-content:center;
|
|
1725
1725
|
}
|
|
1726
1726
|
@media (pointer: coarse){
|
|
1727
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1727
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_actions--b640d{
|
|
1728
1728
|
grid-area:actions;
|
|
1729
1729
|
margin-block-start:0;
|
|
1730
1730
|
}
|
|
1731
1731
|
}
|
|
1732
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1732
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_header--b640d{
|
|
1733
1733
|
-webkit-box-orient:vertical;
|
|
1734
1734
|
-webkit-line-clamp:2;
|
|
1735
1735
|
color:var(--text-text-on-light);
|
|
@@ -1746,11 +1746,11 @@
|
|
|
1746
1746
|
text-decoration:none;
|
|
1747
1747
|
text-transform:none;
|
|
1748
1748
|
}
|
|
1749
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1749
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_header--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1750
1750
|
align-items:center;
|
|
1751
1751
|
display:flex;
|
|
1752
1752
|
}
|
|
1753
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1753
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_subtitle--b640d{
|
|
1754
1754
|
color:var(--text-text-on-light-secondary);
|
|
1755
1755
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1756
1756
|
font-size:.75rem;
|
|
@@ -1766,15 +1766,15 @@
|
|
|
1766
1766
|
text-transform:none;
|
|
1767
1767
|
white-space:nowrap;
|
|
1768
1768
|
}
|
|
1769
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1769
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d .bp_base_grid_list_item_module_subtitle--b640d.bp_base_grid_list_item_module_loading--b640d{
|
|
1770
1770
|
height:1.25rem;
|
|
1771
1771
|
}
|
|
1772
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1772
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d.bp_base_grid_list_item_module_isItemInteracted--b640d,.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-active-item],.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-focus-visible],.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-focused],.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-hovered]{
|
|
1773
1773
|
--actions-opacity:1;
|
|
1774
1774
|
box-shadow:var(--dropshadow-2);
|
|
1775
1775
|
outline:var(--border-1) solid var(--border-card-border);
|
|
1776
1776
|
}
|
|
1777
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1777
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-active-item]::before,.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-focus-visible]::before{
|
|
1778
1778
|
border-radius:var(--radius-3);
|
|
1779
1779
|
content:"";
|
|
1780
1780
|
display:block;
|
|
@@ -1786,7 +1786,7 @@
|
|
|
1786
1786
|
top:0;
|
|
1787
1787
|
width:100%;
|
|
1788
1788
|
}
|
|
1789
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1789
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-active-item]::after,.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[data-focus-visible]::after{
|
|
1790
1790
|
border-radius:var(--radius-3);
|
|
1791
1791
|
content:"";
|
|
1792
1792
|
display:block;
|
|
@@ -1798,16 +1798,16 @@
|
|
|
1798
1798
|
top:0;
|
|
1799
1799
|
width:100%;
|
|
1800
1800
|
}
|
|
1801
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1801
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[aria-selected=true]{
|
|
1802
1802
|
--actions-opacity:1;
|
|
1803
1803
|
--item-background:var(--box-blue-05);
|
|
1804
1804
|
outline:var(--border-2) solid var(--border-card-border-focus);
|
|
1805
1805
|
}
|
|
1806
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1806
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d[aria-selected=true]:not([data-hovered], [data-focus-visible], [data-focused], .bp_base_grid_list_item_module_isItemInteracted--b640d) .bp_base_grid_list_item_module_actions--b640d .bp_base_grid_list_item_module_inner--b640d{
|
|
1807
1807
|
opacity:0;
|
|
1808
1808
|
}
|
|
1809
1809
|
@media (pointer: coarse){
|
|
1810
|
-
.bp_base_grid_list_item_module_gridList--
|
|
1810
|
+
.bp_base_grid_list_item_module_gridList--b640d .bp_base_grid_list_item_module_gridListItem--b640d{
|
|
1811
1811
|
--row-gap:var(--space-1);
|
|
1812
1812
|
--actions-opacity:1;
|
|
1813
1813
|
grid-template-areas:"thumbnail" "head" "subtitle" "actions";
|
|
@@ -1815,7 +1815,7 @@
|
|
|
1815
1815
|
}
|
|
1816
1816
|
}
|
|
1817
1817
|
|
|
1818
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1818
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d{
|
|
1819
1819
|
background-color:var(--surface-tooltip-surface);
|
|
1820
1820
|
border:var(--border-1) solid var(--surface-tooltip-surface);
|
|
1821
1821
|
border-radius:var(--radius-1);
|
|
@@ -1833,26 +1833,30 @@
|
|
|
1833
1833
|
word-break:break-word;
|
|
1834
1834
|
z-index:2147483647;
|
|
1835
1835
|
}
|
|
1836
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1836
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d .bp_base_grid_list_item_module_tooltipArrow--b640d svg{
|
|
1837
1837
|
display:block;
|
|
1838
1838
|
height:.5rem;
|
|
1839
1839
|
width:1rem;
|
|
1840
1840
|
}
|
|
1841
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1841
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d[data-placement=top]{
|
|
1842
1842
|
margin-block-end:var(--space-2);
|
|
1843
1843
|
}
|
|
1844
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1844
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d[data-placement=top] .bp_base_grid_list_item_module_tooltipArrow--b640d svg{
|
|
1845
1845
|
transform:rotate(180deg);
|
|
1846
1846
|
}
|
|
1847
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1847
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d[data-placement=bottom]{
|
|
1848
1848
|
margin-block-start:var(--space-2);
|
|
1849
1849
|
}
|
|
1850
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1850
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d[data-placement=right]{
|
|
1851
1851
|
margin-inline-start:var(--space-2);
|
|
1852
1852
|
}
|
|
1853
|
-
.bp_base_grid_list_item_module_tooltipContent--
|
|
1853
|
+
.bp_base_grid_list_item_module_tooltipContent--b640d[data-placement=left]{
|
|
1854
1854
|
margin-inline-end:var(--space-2);
|
|
1855
1855
|
}
|
|
1856
|
+
|
|
1857
|
+
.bp_base_grid_list_item_module_staticList--b640d .bp_base_grid_list_item_module_staticListItem--b640d{
|
|
1858
|
+
display:contents;
|
|
1859
|
+
}
|
|
1856
1860
|
.bp_list_checkbox_module_selection--d79fa{
|
|
1857
1861
|
align-items:center;
|
|
1858
1862
|
background:var(--surface-cta-surface-icon);
|
|
@@ -3665,8 +3669,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3665
3669
|
transform:scaleX(1);
|
|
3666
3670
|
}
|
|
3667
3671
|
}
|
|
3668
|
-
|
|
3669
|
-
.bp_chip_module_chip--0d399{
|
|
3672
|
+
.bp_chip_module_chip--20c4b{
|
|
3670
3673
|
align-items:center;
|
|
3671
3674
|
border:none;
|
|
3672
3675
|
border-radius:var(--radius-half);
|
|
@@ -3683,19 +3686,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3683
3686
|
text-decoration:none;
|
|
3684
3687
|
text-transform:none;
|
|
3685
3688
|
}
|
|
3686
|
-
.bp_chip_module_chip--
|
|
3689
|
+
.bp_chip_module_chip--20c4b .bp_chip_module_labelText--20c4b:first-child{
|
|
3687
3690
|
margin-inline-start:var(--space-4);
|
|
3688
3691
|
}
|
|
3689
|
-
.bp_chip_module_chip--
|
|
3692
|
+
.bp_chip_module_chip--20c4b .bp_chip_module_labelText--20c4b:last-child{
|
|
3690
3693
|
margin-inline-end:var(--space-4);
|
|
3691
3694
|
}
|
|
3692
|
-
.bp_chip_module_chip--
|
|
3695
|
+
.bp_chip_module_chip--20c4b .bp_chip_module_chipStatus--20c4b:first-child,.bp_chip_module_chip--20c4b svg:first-child{
|
|
3693
3696
|
margin-inline-start:var(--space-2);
|
|
3694
3697
|
}
|
|
3695
|
-
.bp_chip_module_chip--
|
|
3698
|
+
.bp_chip_module_chip--20c4b .bp_chip_module_chipStatus--20c4b:last-child,.bp_chip_module_chip--20c4b svg:last-child{
|
|
3696
3699
|
margin-inline-end:var(--space-2);
|
|
3697
3700
|
}
|
|
3698
|
-
.bp_chip_module_chip--
|
|
3701
|
+
.bp_chip_module_chip--20c4b .bp_chip_module_chipStatus--20c4b{
|
|
3699
3702
|
align-items:center;
|
|
3700
3703
|
background-color:var(--gray-10);
|
|
3701
3704
|
border-radius:var(--radius-half);
|
|
@@ -3714,10 +3717,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3714
3717
|
text-decoration:none;
|
|
3715
3718
|
text-transform:none;
|
|
3716
3719
|
}
|
|
3717
|
-
.bp_chip_module_chip--
|
|
3720
|
+
.bp_chip_module_chip--20c4b .bp_chip_module_labelText--20c4b{
|
|
3718
3721
|
white-space:nowrap;
|
|
3719
3722
|
}
|
|
3720
|
-
.bp_chip_module_chip--
|
|
3723
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b{
|
|
3721
3724
|
background-color:var(--surface-chip-button-surface);
|
|
3722
3725
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
3723
3726
|
font-size:.875rem;
|
|
@@ -3727,48 +3730,50 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3727
3730
|
text-decoration:none;
|
|
3728
3731
|
text-transform:none;
|
|
3729
3732
|
}
|
|
3730
|
-
.bp_chip_module_chip--
|
|
3733
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b:focus-visible{
|
|
3734
|
+
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
3735
|
+
outline:none;
|
|
3731
3736
|
overflow:visible;
|
|
3732
3737
|
}
|
|
3733
|
-
.bp_chip_module_chip--
|
|
3738
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b .bp_chip_module_chipStatus--20c4b{
|
|
3734
3739
|
background-color:var(--box-blue-100);
|
|
3735
3740
|
color:var(--text-text-on-dark);
|
|
3736
3741
|
}
|
|
3737
|
-
.bp_chip_module_chip--
|
|
3742
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b:focus-visible,.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b[data-active-item]{
|
|
3738
3743
|
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
3739
3744
|
outline:none;
|
|
3740
3745
|
}
|
|
3741
|
-
.bp_chip_module_chip--
|
|
3746
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b:disabled{
|
|
3742
3747
|
pointer-events:none;
|
|
3743
3748
|
}
|
|
3744
|
-
.bp_chip_module_chip--
|
|
3749
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b:disabled .bp_chip_module_chipStatus--20c4b{
|
|
3745
3750
|
opacity:.4;
|
|
3746
3751
|
}
|
|
3747
|
-
.bp_chip_module_chip--
|
|
3752
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_chipButton--20c4b:hover:enabled{
|
|
3748
3753
|
background-color:var(--surface-chip-button-surface-hover);
|
|
3749
3754
|
}
|
|
3750
|
-
.bp_chip_module_chip--
|
|
3755
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b{
|
|
3751
3756
|
background-color:var(--surface-filterchip-surface-single);
|
|
3752
3757
|
}
|
|
3753
|
-
.bp_chip_module_chip--
|
|
3758
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b[data-state=on]{
|
|
3754
3759
|
background-color:var(--surface-filterchip-surface-single-on);
|
|
3755
3760
|
color:var(--text-text-on-dark);
|
|
3756
3761
|
}
|
|
3757
|
-
.bp_chip_module_chip--
|
|
3762
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b[data-state=on]:hover{
|
|
3758
3763
|
background-color:var(--surface-filterchip-surface-single-on-hover);
|
|
3759
3764
|
}
|
|
3760
|
-
.bp_chip_module_chip--
|
|
3765
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b[data-state=on] .bp_chip_module_chipStatus--20c4b{
|
|
3761
3766
|
color:var(--text-text-on-light);
|
|
3762
3767
|
}
|
|
3763
|
-
.bp_chip_module_chip--
|
|
3768
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b:focus-visible,.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b[data-active-item]{
|
|
3764
3769
|
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
3765
3770
|
outline:var(--border-1) solid var(--gray-white);
|
|
3766
3771
|
outline-offset:calc(var(--border-1)*-1);
|
|
3767
3772
|
}
|
|
3768
|
-
.bp_chip_module_chip--
|
|
3773
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_singleSelectChip--20c4b:hover:not([data-state=on]){
|
|
3769
3774
|
background-color:var(--surface-filterchip-surface-single-hover);
|
|
3770
3775
|
}
|
|
3771
|
-
.bp_chip_module_chip--
|
|
3776
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b{
|
|
3772
3777
|
background-color:var(--surface-filterchip-surface-multi);
|
|
3773
3778
|
border:var(--border-1) solid var(--surface-filterchip-surface-multi);
|
|
3774
3779
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
@@ -3779,10 +3784,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3779
3784
|
text-decoration:none;
|
|
3780
3785
|
text-transform:none;
|
|
3781
3786
|
}
|
|
3782
|
-
.bp_chip_module_chip--
|
|
3787
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b path{
|
|
3783
3788
|
fill:var(--icon-icon-on-light);
|
|
3784
3789
|
}
|
|
3785
|
-
.bp_chip_module_chip--
|
|
3790
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-state=on]{
|
|
3786
3791
|
background-color:var(--surface-filterchip-surface-multi-on);
|
|
3787
3792
|
border:var(--border-1) solid var(--border-filterchip-border-multi-on);
|
|
3788
3793
|
color:var(--text-cta-link);
|
|
@@ -3794,32 +3799,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3794
3799
|
text-decoration:none;
|
|
3795
3800
|
text-transform:none;
|
|
3796
3801
|
}
|
|
3797
|
-
.bp_chip_module_chip--
|
|
3802
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-state=on] path{
|
|
3798
3803
|
fill:var(--text-cta-link);
|
|
3799
3804
|
}
|
|
3800
|
-
.bp_chip_module_chip--
|
|
3805
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-state=on]:hover{
|
|
3801
3806
|
background-color:var(--surface-filterchip-surface-multi-on-hover);
|
|
3802
3807
|
}
|
|
3803
|
-
.bp_chip_module_chip--
|
|
3808
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-state=on]:focus-visible,.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-state=on][data-active-item]{
|
|
3804
3809
|
border:var(--border-1) solid var(--gray-white);
|
|
3805
3810
|
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
3806
3811
|
outline:var(--border-1) solid var(--border-filterchip-border-multi-on);
|
|
3807
3812
|
outline-offset:calc(var(--border-2)*-1);
|
|
3808
3813
|
}
|
|
3809
|
-
.bp_chip_module_chip--
|
|
3814
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-state=on] .bp_chip_module_chipStatus--20c4b{
|
|
3810
3815
|
background-color:var(--box-blue-100);
|
|
3811
3816
|
color:var(--text-text-on-dark);
|
|
3812
3817
|
}
|
|
3813
|
-
.bp_chip_module_chip--
|
|
3818
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b:focus-visible:not([data-state=on]),.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b[data-active-item]:not([data-state=on]){
|
|
3814
3819
|
box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
|
|
3815
3820
|
outline:var(--border-1) solid var(--gray-white);
|
|
3816
3821
|
outline-offset:calc(var(--border-1)*-1);
|
|
3817
3822
|
}
|
|
3818
|
-
.bp_chip_module_chip--
|
|
3823
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b:hover:not([data-state=on]){
|
|
3819
3824
|
background-color:var(--surface-filterchip-surface-multi-hover);
|
|
3820
3825
|
border:var(--border-1) solid var(--surface-filterchip-surface-multi-hover);
|
|
3821
3826
|
}
|
|
3822
|
-
.bp_chip_module_chip--
|
|
3827
|
+
.bp_chip_module_chip--20c4b.bp_chip_module_multiSelectChip--20c4b span::before{
|
|
3823
3828
|
content:attr(data-text);
|
|
3824
3829
|
display:block;
|
|
3825
3830
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
@@ -3834,20 +3839,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
3834
3839
|
visibility:hidden;
|
|
3835
3840
|
}
|
|
3836
3841
|
|
|
3837
|
-
.bp_chip_module_chipsGroup--
|
|
3842
|
+
.bp_chip_module_chipsGroup--20c4b{
|
|
3838
3843
|
display:flex;
|
|
3839
3844
|
flex-wrap:wrap;
|
|
3840
3845
|
gap:var(--space-2);
|
|
3841
3846
|
}
|
|
3842
3847
|
@media (max-width: 1023px){
|
|
3843
|
-
.bp_chip_module_chipsGroup--
|
|
3848
|
+
.bp_chip_module_chipsGroup--20c4b{
|
|
3844
3849
|
-ms-overflow-style:none;
|
|
3845
3850
|
flex-wrap:nowrap;
|
|
3846
3851
|
overflow-x:scroll;
|
|
3847
3852
|
padding:var(--space-05);
|
|
3848
3853
|
scrollbar-width:none;
|
|
3849
3854
|
}
|
|
3850
|
-
.bp_chip_module_chipsGroup--
|
|
3855
|
+
.bp_chip_module_chipsGroup--20c4b::-webkit-scrollbar{
|
|
3851
3856
|
display:none;
|
|
3852
3857
|
}
|
|
3853
3858
|
}
|
|
@@ -5688,7 +5693,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5688
5693
|
--z-index-card-tooltip:2147483647;
|
|
5689
5694
|
}
|
|
5690
5695
|
|
|
5691
|
-
.bp_toolbar_module_toolbarRoot--
|
|
5696
|
+
.bp_toolbar_module_toolbarRoot--86f1f{
|
|
5692
5697
|
align-items:center;
|
|
5693
5698
|
background:var(--surface-surface);
|
|
5694
5699
|
border:var(--border-1) solid var(--border-card-border);
|
|
@@ -5699,19 +5704,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5699
5704
|
padding:calc(var(--space-1) - var(--border-1));
|
|
5700
5705
|
}
|
|
5701
5706
|
|
|
5702
|
-
.bp_toolbar_module_separator--
|
|
5707
|
+
.bp_toolbar_module_separator--86f1f{
|
|
5703
5708
|
background-color:var(--border-divider-border);
|
|
5704
5709
|
border-radius:var(--radius-2);
|
|
5705
5710
|
height:var(--size-6);
|
|
5706
5711
|
width:1px;
|
|
5707
5712
|
}
|
|
5708
5713
|
|
|
5709
|
-
.bp_toolbar_module_toggleGroup--
|
|
5714
|
+
.bp_toolbar_module_toggleGroup--86f1f{
|
|
5710
5715
|
display:flex;
|
|
5711
5716
|
gap:var(--space-1);
|
|
5712
5717
|
}
|
|
5713
5718
|
|
|
5714
|
-
.bp_toolbar_module_toolbarItem--
|
|
5719
|
+
.bp_toolbar_module_toolbarItem--86f1f{
|
|
5715
5720
|
--toolbar-item-hover-opacity:0.3;
|
|
5716
5721
|
align-items:center;
|
|
5717
5722
|
background:var(--toolbar-button-color, var(--surface-toggle-surface));
|
|
@@ -5729,48 +5734,45 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5729
5734
|
-webkit-user-select:none;
|
|
5730
5735
|
user-select:none;
|
|
5731
5736
|
}
|
|
5732
|
-
.bp_toolbar_module_toolbarItem--
|
|
5737
|
+
.bp_toolbar_module_toolbarItem--86f1f[data-disabled]{
|
|
5733
5738
|
background:var(--surface-toggle-surface);
|
|
5734
5739
|
opacity:var(--toolbar-item-hover-opacity);
|
|
5735
5740
|
pointer-events:none;
|
|
5736
5741
|
}
|
|
5737
|
-
.bp_toolbar_module_toolbarItem--
|
|
5742
|
+
.bp_toolbar_module_toolbarItem--86f1f:not([data-disabled]):focus-visible{
|
|
5738
5743
|
box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
|
|
5739
5744
|
}
|
|
5740
|
-
.bp_toolbar_module_toolbarItem--
|
|
5745
|
+
.bp_toolbar_module_toolbarItem--86f1f:not([data-disabled]):hover{
|
|
5741
5746
|
background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
|
|
5742
5747
|
border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
|
|
5743
5748
|
}
|
|
5744
5749
|
|
|
5745
|
-
.bp_toolbar_module_toolbarToggle--
|
|
5750
|
+
.bp_toolbar_module_toolbarToggle--86f1f[data-state=on]{
|
|
5746
5751
|
background:var(--surface-toggle-surface-pressed);
|
|
5747
5752
|
}
|
|
5748
|
-
.bp_toolbar_module_toolbarToggle--
|
|
5753
|
+
.bp_toolbar_module_toolbarToggle--86f1f[data-state=on] svg *{
|
|
5749
5754
|
fill:var(--icon-icon-on-dark);
|
|
5750
5755
|
}
|
|
5751
|
-
.bp_toolbar_module_toolbarToggle--
|
|
5756
|
+
.bp_toolbar_module_toolbarToggle--86f1f[data-state=on]:not([data-disabled]):hover{
|
|
5752
5757
|
background:var(--surface-toggle-surface-on-hover);
|
|
5753
5758
|
border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
|
|
5754
5759
|
}
|
|
5755
5760
|
|
|
5756
|
-
.bp_toolbar_module_dropdownIndicator--
|
|
5761
|
+
.bp_toolbar_module_dropdownIndicator--86f1f.bp_toolbar_module_invertCaret--86f1f{
|
|
5757
5762
|
transform:rotate(.5turn);
|
|
5758
5763
|
}
|
|
5759
5764
|
|
|
5760
|
-
.bp_toolbar_module_triggerButtonSelectedWithColor--
|
|
5765
|
+
.bp_toolbar_module_triggerButtonSelectedWithColor--86f1f{
|
|
5761
5766
|
--trigger-button-hover-opacity:0.7;
|
|
5762
5767
|
}
|
|
5763
|
-
.bp_toolbar_module_triggerButtonSelectedWithColor--
|
|
5768
|
+
.bp_toolbar_module_triggerButtonSelectedWithColor--86f1f[data-state=on] .bp_toolbar_module_dropdownIndicator--86f1f path{
|
|
5764
5769
|
fill:var(--icon-icon-on-light);
|
|
5765
5770
|
}
|
|
5766
|
-
.bp_toolbar_module_triggerButtonSelectedWithColor--
|
|
5771
|
+
.bp_toolbar_module_triggerButtonSelectedWithColor--86f1f[data-state=on]:hover{
|
|
5767
5772
|
opacity:var(--trigger-button-hover-opacity);
|
|
5768
5773
|
}
|
|
5769
|
-
.bp_toolbar_module_triggerButtonSelectedWithColor--76448[data-state=on] [data-disabled] .bp_toolbar_module_dropdownIndicator--76448 path,.bp_toolbar_module_triggerButtonSelectedWithColor--76448[data-state=on]:focus-visible .bp_toolbar_module_dropdownIndicator--76448 path,.bp_toolbar_module_triggerButtonSelectedWithColor--76448[data-state=on]:hover .bp_toolbar_module_dropdownIndicator--76448 path{
|
|
5770
|
-
fill:var(--icon-icon-on-light-tertiary);
|
|
5771
|
-
}
|
|
5772
5774
|
|
|
5773
|
-
.bp_toolbar_module_toolbarIcon--
|
|
5775
|
+
.bp_toolbar_module_toolbarIcon--86f1f{
|
|
5774
5776
|
align-items:center;
|
|
5775
5777
|
display:flex;
|
|
5776
5778
|
height:var(--size-5);
|
package/lib-esm/index.d.ts
CHANGED
package/lib-esm/index.js
CHANGED
|
@@ -68,5 +68,6 @@ export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
|
|
|
68
68
|
export { TriggerButton } from './trigger-button/trigger-button.js';
|
|
69
69
|
export { ScrollContext, ScrollableContainer, useScroll, useScrollContext } from './util-components/scrollable-container/scrollable-container.js';
|
|
70
70
|
export { Breakpoint, useBreakpoint } from './utils/useBreakpoint.js';
|
|
71
|
+
export { isCtrlKeyPressed, isDeleteKeyPressed, keys } from './utils/keyboardUtils.js';
|
|
71
72
|
export { useNotification } from './primitives/notification/notification-provider.js';
|
|
72
73
|
export { useTabs } from './primitives/tabs/use-tabs.js';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"chip":"bp_chip_module_chip--
|
|
2
|
+
var styles = {"chip":"bp_chip_module_chip--20c4b","labelText":"bp_chip_module_labelText--20c4b","chipStatus":"bp_chip_module_chipStatus--20c4b","chipButton":"bp_chip_module_chipButton--20c4b","singleSelectChip":"bp_chip_module_singleSelectChip--20c4b","multiSelectChip":"bp_chip_module_multiSelectChip--20c4b","chipsGroup":"bp_chip_module_chipsGroup--20c4b"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--
|
|
2
|
+
var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--86f1f","separator":"bp_toolbar_module_separator--86f1f","toggleGroup":"bp_toolbar_module_toggleGroup--86f1f","toolbarItem":"bp_toolbar_module_toolbarItem--86f1f","toolbarToggle":"bp_toolbar_module_toolbarToggle--86f1f","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--86f1f","invertCaret":"bp_toolbar_module_invertCaret--86f1f","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--86f1f","toolbarIcon":"bp_toolbar_module_toolbarIcon--86f1f"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -4,6 +4,7 @@ import noop from 'lodash/noop';
|
|
|
4
4
|
import { forwardRef, useState, useMemo, createContext, useContext } from 'react';
|
|
5
5
|
import { GridListItem } from 'react-aria-components';
|
|
6
6
|
import { useDebounce } from '../../utils/use-debounce.js';
|
|
7
|
+
import { StaticGridListItem } from './static-grid-list-item.js';
|
|
7
8
|
import { useBaseGridListContext } from './base-grid-list.js';
|
|
8
9
|
import styles from './base-grid-list-item.module.js';
|
|
9
10
|
|
|
@@ -27,7 +28,8 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
|
|
|
27
28
|
...rest
|
|
28
29
|
} = props;
|
|
29
30
|
const {
|
|
30
|
-
layout
|
|
31
|
+
layout,
|
|
32
|
+
isInteractive
|
|
31
33
|
} = useBaseGridListContext();
|
|
32
34
|
const textValue = typeof rest.textValue === 'string' ? rest.textValue : undefined;
|
|
33
35
|
const [isItemInteracted, setIsItemInteracted] = useState(false);
|
|
@@ -51,7 +53,8 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
|
|
|
51
53
|
case 'small-list':
|
|
52
54
|
layoutStyle = styles.smallListItem;
|
|
53
55
|
}
|
|
54
|
-
|
|
56
|
+
const GridListItem$1 = isInteractive ? GridListItem : StaticGridListItem;
|
|
57
|
+
return jsx(GridListItem$1, {
|
|
55
58
|
...rest,
|
|
56
59
|
ref: forwardedRef,
|
|
57
60
|
className: clsx(layoutStyle, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"smallList":"bp_base_grid_list_item_module_smallList--
|
|
2
|
+
var styles = {"smallList":"bp_base_grid_list_item_module_smallList--b640d","smallListItem":"bp_base_grid_list_item_module_smallListItem--b640d","loading":"bp_base_grid_list_item_module_loading--b640d","thumbnail":"bp_base_grid_list_item_module_thumbnail--b640d","customSize":"bp_base_grid_list_item_module_customSize--b640d","header":"bp_base_grid_list_item_module_header--b640d","subtitle":"bp_base_grid_list_item_module_subtitle--b640d","actions":"bp_base_grid_list_item_module_actions--b640d","selection":"bp_base_grid_list_item_module_selection--b640d","inner":"bp_base_grid_list_item_module_inner--b640d","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--b640d","largeList":"bp_base_grid_list_item_module_largeList--b640d","largeListItem":"bp_base_grid_list_item_module_largeListItem--b640d","fade":"bp_base_grid_list_item_module_fade--b640d","description":"bp_base_grid_list_item_module_description--b640d","snippet":"bp_base_grid_list_item_module_snippet--b640d","snippetContent":"bp_base_grid_list_item_module_snippetContent--b640d","react-aria-DropIndicator":"bp_base_grid_list_item_module_react-aria-DropIndicator--b640d","gridList":"bp_base_grid_list_item_module_gridList--b640d","gridListItem":"bp_base_grid_list_item_module_gridListItem--b640d","statusPin":"bp_base_grid_list_item_module_statusPin--b640d","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--b640d","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--b640d","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--b640d","staticList":"bp_base_grid_list_item_module_staticList--b640d","staticListItem":"bp_base_grid_list_item_module_staticListItem--b640d"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -3,4 +3,6 @@ import { type BaseGridListProps } from './types';
|
|
|
3
3
|
export declare const useBaseGridListContext: () => BaseGridListProps;
|
|
4
4
|
export declare const BaseGridList: import("react").ForwardRefExoticComponent<import("react-aria-components").GridListProps<BaseGridListProps> & {
|
|
5
5
|
layout: "grid" | "list" | "small-list";
|
|
6
|
+
} & {
|
|
7
|
+
isInteractive?: boolean | undefined;
|
|
6
8
|
} & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -4,6 +4,7 @@ import noop from 'lodash/noop';
|
|
|
4
4
|
import { forwardRef, useMemo, createContext, useContext } from 'react';
|
|
5
5
|
import { GridList } from 'react-aria-components';
|
|
6
6
|
import { isCtrlKeyPressed } from '../../utils/keyboardUtils.js';
|
|
7
|
+
import { StaticGridList } from './static-grid-list.js';
|
|
7
8
|
import styles from './base-grid-list-item.module.js';
|
|
8
9
|
|
|
9
10
|
const BaseGridListContext = /*#__PURE__*/createContext({
|
|
@@ -25,14 +26,18 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
|
|
|
25
26
|
children,
|
|
26
27
|
onAction,
|
|
27
28
|
className,
|
|
29
|
+
isInteractive = true,
|
|
28
30
|
layout,
|
|
29
31
|
...rest
|
|
30
32
|
} = props;
|
|
33
|
+
const handleOnAction = onAction || noop;
|
|
31
34
|
const context = useMemo(() => ({
|
|
32
35
|
selectionMode: rest.selectionMode,
|
|
33
36
|
selectionBehavior: rest.selectionBehavior,
|
|
34
|
-
layout
|
|
35
|
-
|
|
37
|
+
layout,
|
|
38
|
+
isInteractive,
|
|
39
|
+
onAction: handleOnAction
|
|
40
|
+
}), [rest.selectionMode, rest.selectionBehavior, layout, isInteractive, handleOnAction]);
|
|
36
41
|
let layoutStyle;
|
|
37
42
|
switch (layout) {
|
|
38
43
|
case 'list':
|
|
@@ -44,15 +49,16 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
|
|
|
44
49
|
case 'small-list':
|
|
45
50
|
layoutStyle = styles.smallList;
|
|
46
51
|
}
|
|
52
|
+
const GridList$1 = isInteractive ? GridList : StaticGridList;
|
|
47
53
|
return jsx("div", {
|
|
48
54
|
onKeyDownCapture: stopPropagationForNonSpecialKeys,
|
|
49
55
|
children: jsx(BaseGridListContext.Provider, {
|
|
50
56
|
value: context,
|
|
51
|
-
children: jsx(GridList, {
|
|
57
|
+
children: jsx(GridList$1, {
|
|
52
58
|
...rest,
|
|
53
59
|
ref: forwardedRef,
|
|
54
60
|
className: clsx(layoutStyle, className),
|
|
55
|
-
onAction:
|
|
61
|
+
onAction: handleOnAction,
|
|
56
62
|
children: children
|
|
57
63
|
})
|
|
58
64
|
})
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
*/
|
|
7
7
|
export declare const BaseGridList: import("react").ForwardRefExoticComponent<import("react-aria-components").GridListProps<import("./types").BaseGridListProps> & {
|
|
8
8
|
layout: "grid" | "list" | "small-list";
|
|
9
|
+
} & {
|
|
10
|
+
isInteractive?: boolean | undefined;
|
|
9
11
|
} & import("react").RefAttributes<HTMLDivElement>> & {
|
|
10
12
|
/**
|
|
11
13
|
* An individual item in the list.
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { mergeProps } from 'react-aria';
|
|
4
|
+
import { useBaseGridListContext } from './base-grid-list.js';
|
|
5
|
+
import styles from './base-grid-list-item.module.js';
|
|
6
|
+
import { filterNonHtmlProps } from '../../utils/filterNonHtmlProps.js';
|
|
7
|
+
|
|
8
|
+
const StaticGridListItem = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
9
|
+
const {
|
|
10
|
+
children,
|
|
11
|
+
id,
|
|
12
|
+
textValue,
|
|
13
|
+
...rest
|
|
14
|
+
} = props;
|
|
15
|
+
const {
|
|
16
|
+
onAction
|
|
17
|
+
} = useBaseGridListContext();
|
|
18
|
+
const handleOnClick = () => {
|
|
19
|
+
if (onAction && id) {
|
|
20
|
+
onAction(id);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
const mergedProps = mergeProps(rest, {
|
|
24
|
+
onClick: handleOnClick,
|
|
25
|
+
role: 'row',
|
|
26
|
+
'aria-label': textValue
|
|
27
|
+
});
|
|
28
|
+
return jsx("div", {
|
|
29
|
+
ref: ref,
|
|
30
|
+
...filterNonHtmlProps(mergedProps),
|
|
31
|
+
children: jsx("div", {
|
|
32
|
+
"aria-colindex": 1,
|
|
33
|
+
className: styles.staticListItem,
|
|
34
|
+
role: "gridcell",
|
|
35
|
+
children: children
|
|
36
|
+
})
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
export { StaticGridListItem };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React__default from 'react';
|
|
3
|
+
import { mergeProps } from 'react-aria';
|
|
4
|
+
import styles from './base-grid-list-item.module.js';
|
|
5
|
+
import { filterNonHtmlProps } from '../../utils/filterNonHtmlProps.js';
|
|
6
|
+
|
|
7
|
+
const StaticGridList = /*#__PURE__*/React__default.forwardRef((props, ref) => {
|
|
8
|
+
const {
|
|
9
|
+
children,
|
|
10
|
+
...rest
|
|
11
|
+
} = props;
|
|
12
|
+
const mergedProps = mergeProps(rest, {
|
|
13
|
+
role: 'grid',
|
|
14
|
+
className: styles.staticList
|
|
15
|
+
});
|
|
16
|
+
return jsx("div", {
|
|
17
|
+
ref: ref,
|
|
18
|
+
...filterNonHtmlProps(mergedProps),
|
|
19
|
+
children: children
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
export { StaticGridList };
|
|
@@ -22,7 +22,16 @@ export type BaseGridListActionsProps = Modify<ComponentPropsWithRef<'div'>, {
|
|
|
22
22
|
children: ReactNode | ((setIsInteracted: (open: boolean) => void) => ReactNode);
|
|
23
23
|
}>;
|
|
24
24
|
export type BaseGridListActionIconButtonProps = IconButtonProps;
|
|
25
|
-
export type BaseGridListProps = RAGridListProps<BaseGridListProps> & BaseGridListLayoutProp
|
|
25
|
+
export type BaseGridListProps = RAGridListProps<BaseGridListProps> & BaseGridListLayoutProp & {
|
|
26
|
+
/**
|
|
27
|
+
* This flag allows the consumer to opt-out of the default
|
|
28
|
+
* accessiblity and keyboard handling provided by React Aria.
|
|
29
|
+
* See the Quick Search component in group shared features
|
|
30
|
+
* for an example of usage.
|
|
31
|
+
* @param {boolean} isInteractive
|
|
32
|
+
*/
|
|
33
|
+
isInteractive?: boolean;
|
|
34
|
+
};
|
|
26
35
|
export type BaseGridListItemContextType = {
|
|
27
36
|
loading?: boolean;
|
|
28
37
|
pinned?: boolean;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
const filterNonHtmlProps = restProps => {
|
|
2
|
+
const div = document.createElement('div');
|
|
3
|
+
return Object.fromEntries(Object.entries(restProps).filter(([prop, value]) => {
|
|
4
|
+
const exceptions = new Set(['aria-selected', 'aria-label', 'data-active-item']);
|
|
5
|
+
const isDivProperty = (prop in div);
|
|
6
|
+
const isHtmlProperty = (prop.toLowerCase().replace('capture', '') in HTMLElement.prototype);
|
|
7
|
+
const isException = exceptions.has(prop);
|
|
8
|
+
return isDivProperty || isHtmlProperty || isException;
|
|
9
|
+
}));
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
export { filterNonHtmlProps };
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { type KeyboardEvent } from 'react';
|
|
2
2
|
export declare enum keys {
|
|
3
|
-
ESCAPE = "Escape"
|
|
3
|
+
ESCAPE = "Escape",
|
|
4
|
+
BACKSPACE = "Backspace",
|
|
5
|
+
DELETE = "Delete"
|
|
4
6
|
}
|
|
5
7
|
export declare function isCtrlKeyPressed(e: KeyboardEvent<HTMLDivElement>): boolean;
|
|
8
|
+
export declare function isDeleteKeyPressed(e: KeyboardEvent<HTMLDivElement>): boolean;
|
|
@@ -3,6 +3,8 @@ import { isMac } from '@react-aria/utils';
|
|
|
3
3
|
var keys;
|
|
4
4
|
(function (keys) {
|
|
5
5
|
keys["ESCAPE"] = "Escape";
|
|
6
|
+
keys["BACKSPACE"] = "Backspace";
|
|
7
|
+
keys["DELETE"] = "Delete";
|
|
6
8
|
})(keys || (keys = {}));
|
|
7
9
|
function isCtrlKeyPressed(e) {
|
|
8
10
|
if (isMac()) {
|
|
@@ -10,5 +12,8 @@ function isCtrlKeyPressed(e) {
|
|
|
10
12
|
}
|
|
11
13
|
return e.ctrlKey;
|
|
12
14
|
}
|
|
15
|
+
function isDeleteKeyPressed(e) {
|
|
16
|
+
return e.code === keys.BACKSPACE || e.code === keys.DELETE;
|
|
17
|
+
}
|
|
13
18
|
|
|
14
|
-
export { isCtrlKeyPressed, keys };
|
|
19
|
+
export { isCtrlKeyPressed, isDeleteKeyPressed, keys };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.27.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"devDependencies": {
|
|
58
58
|
"@box/storybook-utils": "^0.0.6"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "365af60fdb1d77011f2266c6dbdcc1a3142fa22d",
|
|
61
61
|
"module": "lib-esm/index.js",
|
|
62
62
|
"main": "lib-esm/index.js",
|
|
63
63
|
"exports": {
|