@box/blueprint-web 11.8.0 → 11.8.1
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/lib-esm/index.css
CHANGED
|
@@ -2434,17 +2434,16 @@
|
|
|
2434
2434
|
opacity:.4;
|
|
2435
2435
|
}
|
|
2436
2436
|
|
|
2437
|
-
.bp_main_module_tableSortingContainer--
|
|
2437
|
+
.bp_main_module_tableSortingContainer--d632f{
|
|
2438
2438
|
display:flex;
|
|
2439
2439
|
flex-direction:column;
|
|
2440
|
-
gap:var(--space-4);
|
|
2441
2440
|
min-width:100%;
|
|
2442
2441
|
}
|
|
2443
2442
|
|
|
2444
|
-
.bp_main_module_resizableTableContainer--
|
|
2443
|
+
.bp_main_module_resizableTableContainer--d632f{
|
|
2445
2444
|
min-width:100%;
|
|
2446
2445
|
}
|
|
2447
|
-
.bp_main_module_resizableTableContainer--
|
|
2446
|
+
.bp_main_module_resizableTableContainer--d632f table{
|
|
2448
2447
|
--item-background:var(--background-background);
|
|
2449
2448
|
--outline-offset-focus-row:-.25rem;
|
|
2450
2449
|
--outline-offset-focus-cell:-.1875rem;
|
|
@@ -2458,11 +2457,11 @@
|
|
|
2458
2457
|
border-spacing:0;
|
|
2459
2458
|
width:100% !important;
|
|
2460
2459
|
}
|
|
2461
|
-
.bp_main_module_resizableTableContainer--
|
|
2460
|
+
.bp_main_module_resizableTableContainer--d632f .bp_main_module_resizableTable--d632f{
|
|
2462
2461
|
table-layout:auto !important;
|
|
2463
2462
|
}
|
|
2464
2463
|
|
|
2465
|
-
.bp_main_module_tableHeader--
|
|
2464
|
+
.bp_main_module_tableHeader--d632f tr > th{
|
|
2466
2465
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
2467
2466
|
font-size:.75rem;
|
|
2468
2467
|
font-weight:400;
|
|
@@ -2475,59 +2474,59 @@
|
|
|
2475
2474
|
text-transform:none;
|
|
2476
2475
|
white-space:nowrap;
|
|
2477
2476
|
}
|
|
2478
|
-
.bp_main_module_tableHeader--
|
|
2477
|
+
.bp_main_module_tableHeader--d632f tr > th:first-child{
|
|
2479
2478
|
border-radius:var(--border-radius) 0 0 var(--border-radius);
|
|
2480
2479
|
}
|
|
2481
|
-
.bp_main_module_tableHeader--
|
|
2480
|
+
.bp_main_module_tableHeader--d632f tr > th:last-child{
|
|
2482
2481
|
border-radius:0 var(--border-radius) var(--border-radius) 0;
|
|
2483
2482
|
}
|
|
2484
|
-
.bp_main_module_tableHeader--
|
|
2483
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f{
|
|
2485
2484
|
color:var(--text-text-on-light-secondary);
|
|
2486
2485
|
outline:none;
|
|
2487
2486
|
overflow:visible;
|
|
2488
2487
|
text-align:left;
|
|
2489
2488
|
}
|
|
2490
|
-
.bp_main_module_tableHeader--
|
|
2489
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnNameWrapper--d632f{
|
|
2491
2490
|
align-items:center;
|
|
2492
2491
|
display:flex;
|
|
2493
2492
|
flex:1 0 0;
|
|
2494
2493
|
gap:var(--space-2);
|
|
2495
2494
|
overflow:hidden;
|
|
2496
2495
|
}
|
|
2497
|
-
.bp_main_module_tableHeader--
|
|
2496
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnNameWrapper--d632f .bp_main_module_columnName--d632f{
|
|
2498
2497
|
min-width:0;
|
|
2499
2498
|
overflow:hidden;
|
|
2500
2499
|
text-overflow:ellipsis;
|
|
2501
2500
|
white-space:nowrap;
|
|
2502
2501
|
}
|
|
2503
|
-
.bp_main_module_tableHeader--
|
|
2502
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnNameWrapper--d632f:focus-visible{
|
|
2504
2503
|
outline:none;
|
|
2505
2504
|
}
|
|
2506
|
-
.bp_main_module_tableHeader--
|
|
2505
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnNameWrapper--d632f.bp_main_module_focusVisible--d632f{
|
|
2507
2506
|
outline:var(--border-2) solid var(--outline-focus-color);
|
|
2508
2507
|
outline-offset:var(--outline-offset-focus-header);
|
|
2509
2508
|
}
|
|
2510
|
-
.bp_main_module_tableHeader--
|
|
2509
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f[colspan]{
|
|
2511
2510
|
text-align:center;
|
|
2512
2511
|
}
|
|
2513
|
-
.bp_main_module_tableHeader--
|
|
2512
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_rotateArrow--d632f{
|
|
2514
2513
|
transform:rotateX(180deg);
|
|
2515
2514
|
}
|
|
2516
|
-
.bp_main_module_tableHeader--
|
|
2515
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_sorted--d632f{
|
|
2517
2516
|
color:var(--text-text-on-light);
|
|
2518
2517
|
font-weight:bold;
|
|
2519
2518
|
}
|
|
2520
|
-
.bp_main_module_tableHeader--
|
|
2519
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_sortingFlexWrapper--d632f{
|
|
2521
2520
|
align-items:center;
|
|
2522
2521
|
display:flex;
|
|
2523
2522
|
gap:var(--space-2);
|
|
2524
2523
|
padding:var(--space-2) var(--space-3);
|
|
2525
2524
|
position:relative;
|
|
2526
2525
|
}
|
|
2527
|
-
.bp_main_module_tableHeader--
|
|
2526
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_sortingFlexWrapper--d632f svg{
|
|
2528
2527
|
flex-shrink:0;
|
|
2529
2528
|
}
|
|
2530
|
-
.bp_main_module_tableHeader--
|
|
2529
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnResizer--d632f{
|
|
2531
2530
|
background-color:var(--border-tab-border-hover);
|
|
2532
2531
|
flex:0 0 auto;
|
|
2533
2532
|
height:var(--size-6);
|
|
@@ -2536,47 +2535,51 @@
|
|
|
2536
2535
|
touch-action:none;
|
|
2537
2536
|
width:var(--border-2);
|
|
2538
2537
|
}
|
|
2539
|
-
.bp_main_module_tableHeader--
|
|
2538
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnResizer--d632f[data-resizable-direction=both]{
|
|
2540
2539
|
cursor:ew-resize;
|
|
2541
2540
|
}
|
|
2542
|
-
.bp_main_module_tableHeader--
|
|
2541
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnResizer--d632f[data-resizable-direction=left]{
|
|
2543
2542
|
cursor:e-resize;
|
|
2544
2543
|
}
|
|
2545
|
-
.bp_main_module_tableHeader--
|
|
2544
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnResizer--d632f[data-resizable-direction=right]{
|
|
2546
2545
|
cursor:w-resize;
|
|
2547
2546
|
}
|
|
2548
|
-
.bp_main_module_tableHeader--
|
|
2547
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f .bp_main_module_columnResizer--d632f[data-focus-visible]{
|
|
2549
2548
|
outline:var(--border-2) solid var(--outline-focus-color);
|
|
2550
2549
|
outline-offset:var(--outline-offset-focus-resizer);
|
|
2551
2550
|
}
|
|
2552
|
-
.bp_main_module_tableHeader--
|
|
2551
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f:last-of-type .bp_main_module_columnResizer--d632f{
|
|
2553
2552
|
display:none;
|
|
2554
2553
|
}
|
|
2555
|
-
.bp_main_module_tableHeader--
|
|
2554
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f:hover:not([data-sort-direction])[data-allows-sorting],.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f[data-focus-visible]:not([data-sort-direction])[data-allows-sorting]{
|
|
2556
2555
|
color:var(--text-text-on-light);
|
|
2557
2556
|
font-weight:bold;
|
|
2558
2557
|
}
|
|
2559
|
-
.bp_main_module_tableHeader--
|
|
2558
|
+
.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f:hover:not([data-sort-direction]) svg,.bp_main_module_tableHeader--d632f .bp_main_module_column--d632f[data-focus-visible]:not([data-sort-direction]) svg{
|
|
2560
2559
|
transform:rotateX(180deg);
|
|
2561
2560
|
visibility:visible;
|
|
2562
2561
|
}
|
|
2563
2562
|
|
|
2564
|
-
.
|
|
2563
|
+
.bp_main_module_dropdownHeaderContainer--d632f{
|
|
2564
|
+
margin-bottom:var(--space-4);
|
|
2565
|
+
}
|
|
2566
|
+
|
|
2567
|
+
.bp_main_module_column--d632f.bp_main_module_droppableColumn--d632f{
|
|
2565
2568
|
min-width:160px;
|
|
2566
2569
|
}
|
|
2567
2570
|
|
|
2568
|
-
.bp_main_module_column--
|
|
2571
|
+
.bp_main_module_column--d632f.bp_main_module_actionColumn--d632f{
|
|
2569
2572
|
min-width:1px;
|
|
2570
2573
|
}
|
|
2571
2574
|
|
|
2572
|
-
.bp_main_module_column--
|
|
2575
|
+
.bp_main_module_column--d632f.bp_main_module_hiddenColumn--d632f{
|
|
2573
2576
|
display:none;
|
|
2574
2577
|
}
|
|
2575
2578
|
|
|
2576
|
-
.bp_main_module_tableBody--
|
|
2579
|
+
.bp_main_module_tableBody--d632f[data-empty]{
|
|
2577
2580
|
text-align:center;
|
|
2578
2581
|
}
|
|
2579
|
-
.bp_main_module_tableBody--
|
|
2582
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f{
|
|
2580
2583
|
background:var(--item-background);
|
|
2581
2584
|
border-radius:var(--border-radius);
|
|
2582
2585
|
color:var(--text-text-on-light);
|
|
@@ -2587,7 +2590,7 @@
|
|
|
2587
2590
|
position:relative;
|
|
2588
2591
|
transform:translateZ(0);
|
|
2589
2592
|
}
|
|
2590
|
-
.bp_main_module_tableBody--
|
|
2593
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f::after{
|
|
2591
2594
|
background:#0000;
|
|
2592
2595
|
border-top:var(--border-1) solid var(--gray-10);
|
|
2593
2596
|
box-sizing:border-box;
|
|
@@ -2600,20 +2603,20 @@
|
|
|
2600
2603
|
width:100%;
|
|
2601
2604
|
z-index:999;
|
|
2602
2605
|
}
|
|
2603
|
-
.bp_main_module_tableBody--
|
|
2606
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[aria-selected=true]{
|
|
2604
2607
|
--item-background:var(--box-blue-05);
|
|
2605
2608
|
}
|
|
2606
|
-
.bp_main_module_tableBody--
|
|
2609
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[aria-selected=true]::after{
|
|
2607
2610
|
border:var(--border-2) solid var(--outline-select-color);
|
|
2608
2611
|
border-radius:var(--border-radius);
|
|
2609
2612
|
}
|
|
2610
|
-
.bp_main_module_tableBody--
|
|
2613
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[aria-selected=true] .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f{
|
|
2611
2614
|
opacity:1;
|
|
2612
2615
|
}
|
|
2613
|
-
.bp_main_module_tableBody--
|
|
2616
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[aria-selected=true] .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f .bp_main_module_actionChildren--d632f{
|
|
2614
2617
|
display:none;
|
|
2615
2618
|
}
|
|
2616
|
-
.bp_main_module_tableBody--
|
|
2619
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f{
|
|
2617
2620
|
max-width:0;
|
|
2618
2621
|
outline:none;
|
|
2619
2622
|
overflow:hidden;
|
|
@@ -2623,25 +2626,25 @@
|
|
|
2623
2626
|
transform:translateZ(0);
|
|
2624
2627
|
white-space:nowrap;
|
|
2625
2628
|
}
|
|
2626
|
-
.bp_main_module_tableBody--
|
|
2629
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f[data-focus-visible]{
|
|
2627
2630
|
outline:var(--border-2) solid var(--outline-focus-color);
|
|
2628
2631
|
outline-offset:var(--outline-offset-focus-cell);
|
|
2629
2632
|
position:relative;
|
|
2630
2633
|
}
|
|
2631
|
-
.bp_main_module_tableBody--
|
|
2634
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f:first-child{
|
|
2632
2635
|
border-radius:var(--border-radius) 0 0 var(--border-radius);
|
|
2633
2636
|
}
|
|
2634
|
-
.bp_main_module_tableBody--
|
|
2637
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f:last-child{
|
|
2635
2638
|
border-radius:0 var(--border-radius) var(--border-radius) 0;
|
|
2636
2639
|
}
|
|
2637
|
-
.bp_main_module_tableBody--
|
|
2640
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f.bp_main_module_actions--d632f{
|
|
2638
2641
|
overflow:unset;
|
|
2639
2642
|
padding:0;
|
|
2640
2643
|
position:sticky;
|
|
2641
2644
|
right:0;
|
|
2642
2645
|
width:var(--size-6);
|
|
2643
2646
|
}
|
|
2644
|
-
.bp_main_module_tableBody--
|
|
2647
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f{
|
|
2645
2648
|
align-items:center;
|
|
2646
2649
|
background:var(--item-background);
|
|
2647
2650
|
bottom:0;
|
|
@@ -2655,7 +2658,7 @@
|
|
|
2655
2658
|
right:var(--size-4);
|
|
2656
2659
|
top:0;
|
|
2657
2660
|
}
|
|
2658
|
-
.bp_main_module_tableBody--
|
|
2661
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f::before{
|
|
2659
2662
|
box-shadow:-.25rem 0 .625rem .625rem var(--item-background);
|
|
2660
2663
|
content:"";
|
|
2661
2664
|
display:block;
|
|
@@ -2665,68 +2668,68 @@
|
|
|
2665
2668
|
width:0;
|
|
2666
2669
|
z-index:0;
|
|
2667
2670
|
}
|
|
2668
|
-
.bp_main_module_tableBody--
|
|
2671
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f[data-state=open]{
|
|
2669
2672
|
opacity:1;
|
|
2670
2673
|
}
|
|
2671
|
-
.bp_main_module_tableBody--
|
|
2674
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f[data-state=open] .bp_main_module_actionChildren--d632f{
|
|
2672
2675
|
display:block;
|
|
2673
2676
|
}
|
|
2674
|
-
.bp_main_module_tableBody--
|
|
2677
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f .bp_main_module_cell--d632f.bp_main_module_isCellHidden--d632f{
|
|
2675
2678
|
display:none;
|
|
2676
2679
|
}
|
|
2677
|
-
.bp_main_module_tableBody--
|
|
2680
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-dragging]{
|
|
2678
2681
|
opacity:.5;
|
|
2679
2682
|
transform:translateZ(0);
|
|
2680
2683
|
}
|
|
2681
|
-
.bp_main_module_tableBody--
|
|
2684
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible]{
|
|
2682
2685
|
outline:var(--border-2) solid var(--outline-focus-color);
|
|
2683
2686
|
outline-offset:var(--outline-offset-focus-row);
|
|
2684
2687
|
}
|
|
2685
|
-
.bp_main_module_tableBody--
|
|
2688
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible][aria-selected=true]{
|
|
2686
2689
|
background:var(--item-background);
|
|
2687
2690
|
outline-offset:var(--outline-offset-focus-and-selected-row);
|
|
2688
2691
|
}
|
|
2689
|
-
.bp_main_module_tableBody--
|
|
2692
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:last-child::after{
|
|
2690
2693
|
border-bottom:var(--border-1) solid var(--gray-10);
|
|
2691
2694
|
}
|
|
2692
|
-
.bp_main_module_tableBody--
|
|
2695
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:last-child[aria-selected=true]::after{
|
|
2693
2696
|
border-bottom:var(--border-2) solid var(--outline-select-color);
|
|
2694
2697
|
}
|
|
2695
|
-
.bp_main_module_tableBody--
|
|
2698
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible],.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered]{
|
|
2696
2699
|
z-index:1;
|
|
2697
2700
|
}
|
|
2698
|
-
.bp_main_module_tableBody--
|
|
2701
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within:not([aria-selected=true])::after,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible]:not([aria-selected=true])::after,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered]:not([aria-selected=true])::after{
|
|
2699
2702
|
border-bottom:var(--border-1) solid #0000;
|
|
2700
2703
|
border-radius:var(--border-radius);
|
|
2701
2704
|
border-top:var(--border-1) solid #0000;
|
|
2702
2705
|
box-shadow:var(--dropshadow-2);
|
|
2703
2706
|
}
|
|
2704
|
-
.bp_main_module_tableBody--
|
|
2707
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible]:last-child:not([aria-selected=true])::after,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered]:last-child:not([aria-selected=true])::after{
|
|
2705
2708
|
border-bottom:var(--border-1) solid #0000;
|
|
2706
2709
|
}
|
|
2707
|
-
.bp_main_module_tableBody--
|
|
2710
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after, .bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered] + :not([data-hovered], [data-focus-visible], [aria-selected=true])::after{
|
|
2708
2711
|
border-top:var(--border-1) solid #0000;
|
|
2709
2712
|
}
|
|
2710
|
-
.bp_main_module_tableBody--
|
|
2713
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within[data-dragging] .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within[data-pressed] .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible][data-dragging] .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible][data-pressed] .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered][data-dragging] .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered][data-pressed] .bp_main_module_actionsWrapper--d632f{
|
|
2711
2714
|
opacity:1;
|
|
2712
2715
|
}
|
|
2713
|
-
.bp_main_module_tableBody--
|
|
2716
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible]:not(:is([data-focus-visible], [aria-selected=true]))::after, .bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered]:not(:is([data-focus-visible], [aria-selected=true]))::after{
|
|
2714
2717
|
border:var(--border-1) solid var(--gray-10);
|
|
2715
2718
|
border-radius:var(--border-radius);
|
|
2716
2719
|
}
|
|
2717
|
-
.bp_main_module_tableBody--
|
|
2720
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible] .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered] .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f{
|
|
2718
2721
|
opacity:1;
|
|
2719
2722
|
}
|
|
2720
|
-
.bp_main_module_tableBody--
|
|
2723
|
+
.bp_main_module_tableBody--d632f .bp_main_module_row--d632f:focus-within .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f .bp_main_module_actionChildren--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-focus-visible] .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f .bp_main_module_actionChildren--d632f,.bp_main_module_tableBody--d632f .bp_main_module_row--d632f[data-hovered] .bp_main_module_cell--d632f .bp_main_module_actionsWrapper--d632f .bp_main_module_actionChildren--d632f{
|
|
2721
2724
|
display:block;
|
|
2722
2725
|
}
|
|
2723
2726
|
@supports selector(:has(*)){
|
|
2724
|
-
.bp_main_module_row--
|
|
2727
|
+
.bp_main_module_row--d632f[aria-selected=true] + .bp_main_module_dropIndicator--d632f + [aria-selected=true]::after,.bp_main_module_row--d632f[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--d632f:first-child,.bp_main_module_row--d632f[aria-selected=true] + [aria-selected=true] .bp_main_module_cell--d632f:last-child,.bp_main_module_row--d632f[aria-selected=true] + [aria-selected=true]::after{
|
|
2725
2728
|
border-start-end-radius:0;
|
|
2726
2729
|
border-start-start-radius:0;
|
|
2727
2730
|
border-top-width:var(--border-1);
|
|
2728
2731
|
}
|
|
2729
|
-
.bp_main_module_row--
|
|
2732
|
+
.bp_main_module_row--d632f[aria-selected=true]:has(+ .bp_main_module_dropIndicator--d632f + [aria-selected=true]) .bp_main_module_cell--d632f:last-child,.bp_main_module_row--d632f[aria-selected=true]:has(+ .bp_main_module_dropIndicator--d632f + [aria-selected=true])::after,.bp_main_module_row--d632f[aria-selected=true]:has(+ [aria-selected=true]) .bp_main_module_cell--d632f:first-child,.bp_main_module_row--d632f[aria-selected=true]:has(+ [aria-selected=true])::after{
|
|
2730
2733
|
border-bottom-width:var(--border-1);
|
|
2731
2734
|
border-end-end-radius:0;
|
|
2732
2735
|
border-end-start-radius:0;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--
|
|
2
|
+
var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--d632f","resizableTableContainer":"bp_main_module_resizableTableContainer--d632f","resizableTable":"bp_main_module_resizableTable--d632f","tableHeader":"bp_main_module_tableHeader--d632f","column":"bp_main_module_column--d632f","columnNameWrapper":"bp_main_module_columnNameWrapper--d632f","columnName":"bp_main_module_columnName--d632f","focusVisible":"bp_main_module_focusVisible--d632f","rotateArrow":"bp_main_module_rotateArrow--d632f","sorted":"bp_main_module_sorted--d632f","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--d632f","columnResizer":"bp_main_module_columnResizer--d632f","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--d632f","droppableColumn":"bp_main_module_droppableColumn--d632f","actionColumn":"bp_main_module_actionColumn--d632f","hiddenColumn":"bp_main_module_hiddenColumn--d632f","tableBody":"bp_main_module_tableBody--d632f","row":"bp_main_module_row--d632f","cell":"bp_main_module_cell--d632f","actionsWrapper":"bp_main_module_actionsWrapper--d632f","actionChildren":"bp_main_module_actionChildren--d632f","actions":"bp_main_module_actions--d632f","isCellHidden":"bp_main_module_isCellHidden--d632f","dropIndicator":"bp_main_module_dropIndicator--d632f"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -5,6 +5,7 @@ import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Fill';
|
|
|
5
5
|
import { createPortal } from 'react-dom';
|
|
6
6
|
import { Button } from '../button/button.js';
|
|
7
7
|
import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
|
|
8
|
+
import styles from './main.module.js';
|
|
8
9
|
import { useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
|
|
9
10
|
|
|
10
11
|
const TableHeaderInner = ({
|
|
@@ -34,30 +35,33 @@ const TableHeaderInner = ({
|
|
|
34
35
|
display: 'none'
|
|
35
36
|
},
|
|
36
37
|
children: children
|
|
37
|
-
}), dropdownHeaderContainer && /*#__PURE__*/createPortal(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
38
|
+
}), dropdownHeaderContainer && /*#__PURE__*/createPortal(jsx("div", {
|
|
39
|
+
className: styles.dropdownHeaderContainer,
|
|
40
|
+
children: jsxs(DropdownMenu.Root, {
|
|
41
|
+
children: [jsx(DropdownMenu.Trigger, {
|
|
42
|
+
children: jsx(Button, {
|
|
43
|
+
"aria-label": "sort-by",
|
|
44
|
+
"aria-sort": sortDescriptor.direction === 'ascending' ? 'ascending' : 'descending',
|
|
45
|
+
icon: SortIcon,
|
|
46
|
+
size: "small",
|
|
47
|
+
variant: "secondary",
|
|
48
|
+
children: columnLabel
|
|
49
|
+
})
|
|
50
|
+
}), jsx(DropdownMenu.Content, {
|
|
51
|
+
align: "start",
|
|
52
|
+
children: columnArray?.map(child => {
|
|
53
|
+
if (child.props.actionColumn) {
|
|
54
|
+
return null;
|
|
55
|
+
}
|
|
56
|
+
return jsx(DropdownMenu.Item
|
|
57
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
58
|
+
, {
|
|
59
|
+
onSelect: createSelectHandler(child.props.id),
|
|
60
|
+
children: child.props.children
|
|
61
|
+
}, child.props.__ordinal);
|
|
62
|
+
})
|
|
63
|
+
})]
|
|
64
|
+
})
|
|
61
65
|
}), dropdownHeaderContainer)]
|
|
62
66
|
});
|
|
63
67
|
};
|