@box/blueprint-web 11.7.1 → 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 +89 -85
- package/dist/lib-esm/index.d.ts +1 -0
- package/dist/lib-esm/index.js +1 -0
- package/dist/lib-esm/list-item/main.module.js +1 -1
- package/dist/lib-esm/list-item/table-header-dropdown.js +28 -24
- package/dist/lib-esm/primitives/base-text-input/base-text-input.js +19 -15
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/package.json +1 -1
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;
|
|
@@ -4638,12 +4641,13 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4638
4641
|
background:none;
|
|
4639
4642
|
}
|
|
4640
4643
|
|
|
4641
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4644
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f{
|
|
4645
|
+
--disabled-opacity:var(--text-input-disabled-opacity-api, 60%);
|
|
4642
4646
|
display:flex;
|
|
4643
4647
|
flex-direction:column;
|
|
4644
4648
|
font-weight:400;
|
|
4645
4649
|
}
|
|
4646
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4650
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_label--8647f{
|
|
4647
4651
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4648
4652
|
font-size:.875rem;
|
|
4649
4653
|
letter-spacing:.01875rem;
|
|
@@ -4651,22 +4655,22 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4651
4655
|
text-decoration:none;
|
|
4652
4656
|
text-transform:none;
|
|
4653
4657
|
}
|
|
4654
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4658
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_label--8647f{
|
|
4655
4659
|
color:#222;
|
|
4656
4660
|
flex:0 0 fit-content;
|
|
4657
4661
|
font-weight:700;
|
|
4658
4662
|
width:-moz-fit-content;
|
|
4659
4663
|
width:fit-content;
|
|
4660
4664
|
}
|
|
4661
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4665
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_label--8647f:not(.bp_base_text_input_module_hidden--8647f){
|
|
4662
4666
|
margin-block-end:var(--space-2);
|
|
4663
4667
|
}
|
|
4664
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4668
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f{
|
|
4665
4669
|
display:flex;
|
|
4666
4670
|
height:2.5rem;
|
|
4667
4671
|
position:relative;
|
|
4668
4672
|
}
|
|
4669
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4673
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f{
|
|
4670
4674
|
background:#fff;
|
|
4671
4675
|
border:.0625rem solid #909090;
|
|
4672
4676
|
border-radius:.375rem;
|
|
@@ -4685,74 +4689,74 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4685
4689
|
text-transform:none;
|
|
4686
4690
|
width:100%;
|
|
4687
4691
|
}
|
|
4688
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4692
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:hover{
|
|
4689
4693
|
box-shadow:var(--innershadow-1);
|
|
4690
4694
|
}
|
|
4691
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4695
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f::placeholder,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f::placeholder,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f::placeholder{
|
|
4692
4696
|
color:#6f6f6f;
|
|
4693
4697
|
opacity:1;
|
|
4694
4698
|
}
|
|
4695
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4699
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f{
|
|
4696
4700
|
background:#fff;
|
|
4697
4701
|
border:.125rem solid #ed3757;
|
|
4698
4702
|
outline:0;
|
|
4699
4703
|
padding-inline-start:.6875rem;
|
|
4700
4704
|
}
|
|
4701
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4705
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f{
|
|
4702
4706
|
border-color:var(--border-collapsible-border);
|
|
4703
4707
|
box-shadow:var(--innershadow-1);
|
|
4704
4708
|
color:var(--text-text-on-light-secondary);
|
|
4705
4709
|
}
|
|
4706
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4710
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:focus-visible{
|
|
4707
4711
|
border:.125rem solid #2486fc;
|
|
4708
4712
|
}
|
|
4709
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4713
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_readOnly--8647f:hover{
|
|
4710
4714
|
cursor:default;
|
|
4711
4715
|
}
|
|
4712
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4716
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:disabled,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:disabled,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:disabled{
|
|
4713
4717
|
background:var(--surface-input-surface);
|
|
4714
4718
|
border-color:var(--border-input-border);
|
|
4715
4719
|
box-shadow:var(--innershadow-1);
|
|
4716
4720
|
color:var(--text-text-on-light);
|
|
4717
4721
|
}
|
|
4718
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4722
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:disabled:hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:disabled:hover{
|
|
4719
4723
|
border-color:var(--border-input-border);
|
|
4720
4724
|
}
|
|
4721
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4725
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:focus-visible,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:focus-visible{
|
|
4722
4726
|
background:#fff;
|
|
4723
4727
|
border:.125rem solid #2486fc;
|
|
4724
4728
|
outline:0;
|
|
4725
4729
|
padding-inline-start:.6875rem;
|
|
4726
4730
|
}
|
|
4727
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4731
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:has(+ .bp_base_text_input_module_endIcon--8647f),.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:has(+ .bp_base_text_input_module_endIcon--8647f),.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:has(+ .bp_base_text_input_module_endIcon--8647f){
|
|
4728
4732
|
padding-inline-end:calc(1.25rem + var(--end-icon-width));
|
|
4729
4733
|
}
|
|
4730
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4734
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_textInput--8647f:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--8647f):hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=number].bp_base_text_input_module_textInput--8647f:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--8647f):hover,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f input[type=text].bp_base_text_input_module_textInput--8647f:not(:disabled):not(:focus-visible):not(.bp_base_text_input_module_error--8647f):hover{
|
|
4731
4735
|
background:#fff;
|
|
4732
4736
|
border:.0625rem solid #6f6f6f;
|
|
4733
4737
|
}
|
|
4734
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4738
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f{
|
|
4735
4739
|
left:.8125rem;
|
|
4736
4740
|
position:absolute;
|
|
4737
4741
|
top:50%;
|
|
4738
4742
|
transform:translateY(-50%);
|
|
4739
4743
|
}
|
|
4740
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4744
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f + input.bp_base_text_input_module_textInput--8647f{
|
|
4741
4745
|
padding-inline-start:calc(1.25rem + var(--start-icon-width));
|
|
4742
4746
|
}
|
|
4743
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4747
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f + input.bp_base_text_input_module_textInput--8647f.bp_base_text_input_module_error--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_startIcon--8647f + input.bp_base_text_input_module_textInput--8647f:focus-visible{
|
|
4744
4748
|
padding-inline-start:calc(1.1875rem + var(--start-icon-width));
|
|
4745
4749
|
}
|
|
4746
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4750
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_textInputContainer--8647f .bp_base_text_input_module_endIcon--8647f{
|
|
4747
4751
|
position:absolute;
|
|
4748
4752
|
right:.8125rem;
|
|
4749
4753
|
top:50%;
|
|
4750
4754
|
transform:translateY(-50%);
|
|
4751
4755
|
}
|
|
4752
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4753
|
-
opacity:
|
|
4756
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f.bp_base_text_input_module_disabled--8647f{
|
|
4757
|
+
opacity:var(--disabled-opacity);
|
|
4754
4758
|
}
|
|
4755
|
-
.bp_base_text_input_module_textInputContainerOuter--
|
|
4759
|
+
.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_inlineError--8647f,.bp_base_text_input_module_textInputContainerOuter--8647f .bp_base_text_input_module_subtext--8647f{
|
|
4756
4760
|
margin-block-start:var(--space-2);
|
|
4757
4761
|
}
|
|
4758
4762
|
.bp_chip_module_chip--728a9{
|
package/dist/lib-esm/index.d.ts
CHANGED
|
@@ -64,6 +64,7 @@ export * from './text';
|
|
|
64
64
|
export * from './text-area';
|
|
65
65
|
export * from './text-button';
|
|
66
66
|
export * from './text-input';
|
|
67
|
+
export * from './primitives/base-text-input';
|
|
67
68
|
export * from './text-toggle-button';
|
|
68
69
|
export * from './toolbar';
|
|
69
70
|
export * from './tooltip';
|
package/dist/lib-esm/index.js
CHANGED
|
@@ -81,6 +81,7 @@ export { Text } from './text/text.js';
|
|
|
81
81
|
export { TextArea } from './text-area/text-area.js';
|
|
82
82
|
export { TextButton } from './text-button/text-button.js';
|
|
83
83
|
export { TextInput } from './text-input/text-input.js';
|
|
84
|
+
export { BaseTextInput } from './primitives/base-text-input/base-text-input.js';
|
|
84
85
|
export { TextToggleButton } from './text-toggle-button/text-toggle-button.js';
|
|
85
86
|
export { Toolbar } from './toolbar/index.js';
|
|
86
87
|
export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
|
|
@@ -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
|
};
|
|
@@ -7,6 +7,11 @@ import { useUniqueId } from '../../utils/useUniqueId.js';
|
|
|
7
7
|
import { InlineError } from '../inline-error/inline-error.js';
|
|
8
8
|
import styles from './base-text-input.module.js';
|
|
9
9
|
|
|
10
|
+
const setValueUsing = setter => node => {
|
|
11
|
+
if (node) {
|
|
12
|
+
setter(node.getBoundingClientRect().width);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
10
15
|
/**
|
|
11
16
|
* This extends a default HTML <input/> and accepts the same props as well as some custom ones listed below.<br/>
|
|
12
17
|
*
|
|
@@ -35,29 +40,28 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
35
40
|
const inlineErrorId = useUniqueId('inline-error-');
|
|
36
41
|
const subtextId = useUniqueId('subtext-');
|
|
37
42
|
const hasError = !!error && !disabled;
|
|
43
|
+
const hasSubtext = !error && !!subtext;
|
|
44
|
+
const hasDescribedByText = hasError || hasSubtext;
|
|
45
|
+
let describedByText = '';
|
|
46
|
+
if (hasError) {
|
|
47
|
+
describedByText = inlineErrorId;
|
|
48
|
+
} else if (hasSubtext) {
|
|
49
|
+
describedByText = subtextId;
|
|
50
|
+
}
|
|
38
51
|
const shouldMarkError = (!!error || invalid) && !disabled;
|
|
39
52
|
const ariaDescribedBy = clsx(rest['aria-describedby'], {
|
|
40
|
-
[
|
|
53
|
+
[describedByText]: hasDescribedByText
|
|
41
54
|
});
|
|
42
55
|
const [startIconWidth, setStartIconWidth] = useState(null);
|
|
43
56
|
const [endIconWidth, setEndIconWidth] = useState(null);
|
|
44
57
|
const StartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
|
|
45
|
-
ref:
|
|
46
|
-
if (node) {
|
|
47
|
-
setStartIconWidth(node.getBoundingClientRect().width);
|
|
48
|
-
}
|
|
49
|
-
},
|
|
58
|
+
ref: setValueUsing(setStartIconWidth),
|
|
50
59
|
className: clsx(startIcon.props?.className, styles.startIcon)
|
|
51
60
|
}), [startIcon]);
|
|
52
61
|
const EndIconComponent = useMemo(() => endIcon && /*#__PURE__*/cloneElement(endIcon, {
|
|
53
|
-
ref:
|
|
54
|
-
if (node) {
|
|
55
|
-
setEndIconWidth(node.getBoundingClientRect().width);
|
|
56
|
-
}
|
|
57
|
-
},
|
|
62
|
+
ref: setValueUsing(setEndIconWidth),
|
|
58
63
|
className: clsx(endIcon.props?.className, styles.endIcon)
|
|
59
64
|
}), [endIcon]);
|
|
60
|
-
const hasSubtext = !error && !!subtext;
|
|
61
65
|
const Label = useLabelable(label, inputId, required);
|
|
62
66
|
return jsxs("div", {
|
|
63
67
|
className: clsx([styles.textInputContainerOuter], {
|
|
@@ -78,7 +82,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
78
82
|
children: [StartIconComponent, jsx("input", {
|
|
79
83
|
...rest,
|
|
80
84
|
ref: forwardedRef,
|
|
81
|
-
"aria-describedby": ariaDescribedBy,
|
|
85
|
+
"aria-describedby": ariaDescribedBy || undefined,
|
|
82
86
|
"aria-invalid": shouldMarkError,
|
|
83
87
|
"aria-required": required,
|
|
84
88
|
className: clsx([styles.textInput], {
|
|
@@ -91,11 +95,11 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
91
95
|
required: required,
|
|
92
96
|
type: type
|
|
93
97
|
}), EndIconComponent]
|
|
94
|
-
}), jsx(InlineError, {
|
|
98
|
+
}), hasError ? jsx(InlineError, {
|
|
95
99
|
className: styles.inlineError,
|
|
96
100
|
id: inlineErrorId,
|
|
97
101
|
children: error
|
|
98
|
-
})
|
|
102
|
+
}) : hasSubtext && jsx(Text, {
|
|
99
103
|
as: "p",
|
|
100
104
|
className: styles.subtext,
|
|
101
105
|
color: "textOnLightSecondary",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--
|
|
2
|
+
var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--8647f","label":"bp_base_text_input_module_label--8647f","hidden":"bp_base_text_input_module_hidden--8647f","textInputContainer":"bp_base_text_input_module_textInputContainer--8647f","textInput":"bp_base_text_input_module_textInput--8647f","error":"bp_base_text_input_module_error--8647f","readOnly":"bp_base_text_input_module_readOnly--8647f","endIcon":"bp_base_text_input_module_endIcon--8647f","startIcon":"bp_base_text_input_module_startIcon--8647f","disabled":"bp_base_text_input_module_disabled--8647f","inlineError":"bp_base_text_input_module_inlineError--8647f","subtext":"bp_base_text_input_module_subtext--8647f"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|