@box/blueprint-web 15.3.0 → 15.5.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/dist/lib-esm/index.css +71 -50
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.d.ts +55 -57
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js +32 -7
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js +1 -1
- package/dist/lib-esm/primitives/select-menu-grid/types.d.ts +15 -6
- package/dist/lib-esm/select/select.figma.d.ts +1 -0
- package/dist/lib-esm/time-picker/time-picker.figma.d.ts +1 -0
- package/package.json +3 -3
package/dist/lib-esm/index.css
CHANGED
|
@@ -11479,7 +11479,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11479
11479
|
display:flex;
|
|
11480
11480
|
flex-direction:row;
|
|
11481
11481
|
}
|
|
11482
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11482
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151[data-modern=false]{
|
|
11483
11483
|
--select-menu-grid-option-labeled-margin-small-breakpoint:var(--space-05) 0;
|
|
11484
11484
|
--select-menu-grid-option-labeled-margin:var(--space-05);
|
|
11485
11485
|
--select-menu-grid-option-labeled-max-width:calc(50% - var(--space-1));
|
|
@@ -11487,7 +11487,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11487
11487
|
--select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
|
|
11488
11488
|
}
|
|
11489
11489
|
|
|
11490
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11490
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151[data-modern=true]{
|
|
11491
11491
|
--select-menu-grid-option-labeled-margin-small-breakpoint:var(--bp-space-005) 0;
|
|
11492
11492
|
--select-menu-grid-option-labeled-margin:var(--bp-space-005);
|
|
11493
11493
|
--select-menu-grid-option-labeled-max-width:calc(50% - var(--bp-size-010));
|
|
@@ -11495,27 +11495,27 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11495
11495
|
--select-menu-grid-option-labeled-max-width-last-child-margin-right:0;
|
|
11496
11496
|
}
|
|
11497
11497
|
|
|
11498
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11498
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--1b151{
|
|
11499
11499
|
flex:1 1 0;
|
|
11500
11500
|
margin:var(--select-menu-grid-option-labeled-margin-small-breakpoint);
|
|
11501
11501
|
}
|
|
11502
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11502
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151{
|
|
11503
11503
|
max-width:100%;
|
|
11504
11504
|
}
|
|
11505
11505
|
@media only screen and (width > 374px){
|
|
11506
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11506
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151{
|
|
11507
11507
|
margin:var(--select-menu-grid-option-labeled-margin);
|
|
11508
11508
|
max-width:var(--select-menu-grid-option-labeled-max-width);
|
|
11509
11509
|
}
|
|
11510
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11510
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151:first-child{
|
|
11511
11511
|
margin-left:var(--select-menu-grid-option-labeled-max-width-first-child-margin-left);
|
|
11512
11512
|
}
|
|
11513
|
-
.bp_select_menu_grid_option_module_buttonWrapper--
|
|
11513
|
+
.bp_select_menu_grid_option_module_buttonWrapper--1b151.bp_select_menu_grid_option_module_withLabel--default--1b151:last-child{
|
|
11514
11514
|
margin-right:var(--select-menu-grid-option-labeled-max-width-last-child-margin-right);
|
|
11515
11515
|
}
|
|
11516
11516
|
}
|
|
11517
11517
|
|
|
11518
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11518
|
+
.bp_select_menu_grid_option_module_optionButton--1b151[data-modern=false]{
|
|
11519
11519
|
--select-menu-grid-option-background-color:#0000;
|
|
11520
11520
|
--select-menu-grid-option-labeled-background-color-hover:var(--surface-surface-secondary);
|
|
11521
11521
|
--select-menu-grid-option-labeled-background-color-active:var(--surface-surface-secondary);
|
|
@@ -11531,6 +11531,8 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11531
11531
|
--select-menu-grid-option-labeled-border-radius:var(--radius-3);
|
|
11532
11532
|
--select-menu-grid-option-labeled-transition:background-color var(--animation-duration-2);
|
|
11533
11533
|
--select-menu-grid-option-labeled-text-max-height:var(--size-8);
|
|
11534
|
+
--select-menu-grid-option-labeled-label-content-gap:var(--space-05);
|
|
11535
|
+
--select-menu-grid-option-labeled-label-content-optical-offset:var(--border-1);
|
|
11534
11536
|
--select-menu-grid-option-labeled-text-color:var(--text-text-on-light);
|
|
11535
11537
|
--select-menu-grid-option-labeled-icon-border-radius:var(--radius-3);
|
|
11536
11538
|
--select-menu-grid-option-labeled-icon-default-size:var(--size-8);
|
|
@@ -11573,7 +11575,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11573
11575
|
--select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--border-1) var(--gray-white), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
11574
11576
|
}
|
|
11575
11577
|
|
|
11576
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11578
|
+
.bp_select_menu_grid_option_module_optionButton--1b151[data-modern=true]{
|
|
11577
11579
|
--select-menu-grid-option-background-color:#0000;
|
|
11578
11580
|
--select-menu-grid-option-labeled-background-color-hover:var(--bp-surface-surface-secondary);
|
|
11579
11581
|
--select-menu-grid-option-labeled-background-color-active:var(--bp-surface-surface-secondary);
|
|
@@ -11589,6 +11591,8 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11589
11591
|
--select-menu-grid-option-labeled-border-radius:var(--bp-radius-06);
|
|
11590
11592
|
--select-menu-grid-option-labeled-transition:background-color var(--animation-duration-2);
|
|
11591
11593
|
--select-menu-grid-option-labeled-text-max-height:var(--bp-size-080);
|
|
11594
|
+
--select-menu-grid-option-labeled-label-content-gap:var(--bp-space-005);
|
|
11595
|
+
--select-menu-grid-option-labeled-label-content-optical-offset:var(--bp-border-01);
|
|
11592
11596
|
--select-menu-grid-option-labeled-text-color:var(--bp-text-text-on-light);
|
|
11593
11597
|
--select-menu-grid-option-labeled-icon-border-radius:var(--bp-radius-04);
|
|
11594
11598
|
--select-menu-grid-option-labeled-icon-default-size:var(--bp-size-080);
|
|
@@ -11631,7 +11635,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11631
11635
|
--select-menu-grid-option-circle-box-shadow-focus-active:0 0 0 var(--bp-border-01) var(--bp-gray-white), 0 0 0 var(--bp-border-03) var(--bp-border-input-border-focus);
|
|
11632
11636
|
}
|
|
11633
11637
|
|
|
11634
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11638
|
+
.bp_select_menu_grid_option_module_optionButton--1b151{
|
|
11635
11639
|
align-items:center;
|
|
11636
11640
|
background-color:var(--select-menu-grid-option-background-color);
|
|
11637
11641
|
border:none;
|
|
@@ -11641,13 +11645,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11641
11645
|
-webkit-user-select:none;
|
|
11642
11646
|
user-select:none;
|
|
11643
11647
|
}
|
|
11644
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11648
|
+
.bp_select_menu_grid_option_module_optionButton--1b151:not(.bp_select_menu_grid_option_module_labeled--1b151){
|
|
11645
11649
|
height:var(--select-menu-grid-option-not-labeled-height);
|
|
11646
11650
|
justify-content:center;
|
|
11647
11651
|
padding:var(--select-menu-grid-option-not-labeled-padding);
|
|
11648
11652
|
width:var(--select-menu-grid-option-not-labeled-width);
|
|
11649
11653
|
}
|
|
11650
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11654
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151{
|
|
11651
11655
|
border-radius:var(--select-menu-grid-option-labeled-border-radius);
|
|
11652
11656
|
gap:var(--select-menu-grid-option-labeled-gap);
|
|
11653
11657
|
min-width:var(--select-menu-grid-option-labeled-min-width);
|
|
@@ -11655,24 +11659,41 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11655
11659
|
transition:var(--select-menu-grid-option-labeled-transition);
|
|
11656
11660
|
width:100%;
|
|
11657
11661
|
}
|
|
11658
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11662
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_labelContent--1b151{
|
|
11663
|
+
display:flex;
|
|
11664
|
+
flex:1;
|
|
11665
|
+
flex-direction:column;
|
|
11666
|
+
justify-content:center;
|
|
11667
|
+
min-width:0;
|
|
11668
|
+
text-align:left;
|
|
11669
|
+
}
|
|
11670
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_labelContent--withDescription--1b151{
|
|
11671
|
+
gap:var(--select-menu-grid-option-labeled-label-content-gap);
|
|
11672
|
+
margin-top:calc(var(--select-menu-grid-option-labeled-label-content-optical-offset)*-1);
|
|
11673
|
+
}
|
|
11674
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_text--1b151{
|
|
11659
11675
|
color:var(--select-menu-grid-option-labeled-text-color);
|
|
11660
11676
|
max-height:var(--select-menu-grid-option-labeled-text-max-height);
|
|
11661
|
-
text-align:left;
|
|
11662
11677
|
}
|
|
11663
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11678
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_text--large--1b151{
|
|
11664
11679
|
-webkit-box-orient:vertical;
|
|
11665
11680
|
-webkit-line-clamp:1;
|
|
11666
11681
|
display:-webkit-box;
|
|
11667
11682
|
overflow:hidden;
|
|
11668
11683
|
}
|
|
11669
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11684
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_text--default--1b151{
|
|
11670
11685
|
-webkit-box-orient:vertical;
|
|
11671
11686
|
-webkit-line-clamp:2;
|
|
11672
11687
|
display:-webkit-box;
|
|
11673
11688
|
overflow:hidden;
|
|
11674
11689
|
}
|
|
11675
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11690
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_description--1b151{
|
|
11691
|
+
-webkit-box-orient:vertical;
|
|
11692
|
+
-webkit-line-clamp:1;
|
|
11693
|
+
display:-webkit-box;
|
|
11694
|
+
overflow:hidden;
|
|
11695
|
+
}
|
|
11696
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--1b151{
|
|
11676
11697
|
align-items:center;
|
|
11677
11698
|
background:var(--icon-background);
|
|
11678
11699
|
border-radius:var(--select-menu-grid-option-labeled-icon-border-radius);
|
|
@@ -11680,80 +11701,80 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11680
11701
|
flex-shrink:0;
|
|
11681
11702
|
justify-content:center;
|
|
11682
11703
|
}
|
|
11683
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11704
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--size-default--1b151{
|
|
11684
11705
|
height:var(--select-menu-grid-option-labeled-icon-default-size);
|
|
11685
11706
|
width:var(--select-menu-grid-option-labeled-icon-default-size);
|
|
11686
11707
|
}
|
|
11687
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11708
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--size-large--1b151{
|
|
11688
11709
|
height:var(--select-menu-grid-option-labeled-icon-large-size);
|
|
11689
11710
|
width:var(--select-menu-grid-option-labeled-icon-large-size);
|
|
11690
11711
|
}
|
|
11691
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11712
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--default--1b151{
|
|
11692
11713
|
--icon-background:var(--select-menu-grid-option-labeled-icon-default-background);
|
|
11693
11714
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-default-background-dark);
|
|
11694
11715
|
}
|
|
11695
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11716
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--box--1b151{
|
|
11696
11717
|
--icon-background:var(--select-menu-grid-option-labeled-icon-box-background);
|
|
11697
11718
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-box-background-dark);
|
|
11698
11719
|
}
|
|
11699
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11720
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--docgen--1b151{
|
|
11700
11721
|
--icon-background:var(--select-menu-grid-option-labeled-icon-docgen-background);
|
|
11701
11722
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-docgen-background-dark);
|
|
11702
11723
|
}
|
|
11703
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11724
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--forms--1b151{
|
|
11704
11725
|
--icon-background:var(--select-menu-grid-option-labeled-icon-forms-background);
|
|
11705
11726
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-forms-background-dark);
|
|
11706
11727
|
}
|
|
11707
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11728
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151 .bp_select_menu_grid_option_module_iconContainer--sign--1b151{
|
|
11708
11729
|
--icon-background:var(--select-menu-grid-option-labeled-icon-sign-background);
|
|
11709
11730
|
--icon-background-dark:var(--select-menu-grid-option-labeled-icon-sign-background-dark);
|
|
11710
11731
|
}
|
|
11711
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11732
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:hover{
|
|
11712
11733
|
background:var(--select-menu-grid-option-labeled-background-color-hover);
|
|
11713
11734
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
|
|
11714
11735
|
cursor:grab;
|
|
11715
11736
|
}
|
|
11716
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11737
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_active--1b151,.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151,.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:active{
|
|
11717
11738
|
background:var(--select-menu-grid-option-labeled-background-color-active);
|
|
11718
11739
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow);
|
|
11719
11740
|
}
|
|
11720
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11741
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_iconContainer--1b151,.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:active .bp_select_menu_grid_option_module_iconContainer--1b151{
|
|
11721
11742
|
background-color:var(--icon-background);
|
|
11722
11743
|
}
|
|
11723
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11744
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151{
|
|
11724
11745
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow-dragging);
|
|
11725
11746
|
}
|
|
11726
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11747
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151 .bp_select_menu_grid_option_module_iconContainer--1b151{
|
|
11727
11748
|
background-color:var(--icon-background-dark);
|
|
11728
11749
|
}
|
|
11729
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11750
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151.bp_select_menu_grid_option_module_dragging--1b151:hover{
|
|
11730
11751
|
cursor:grabbing;
|
|
11731
11752
|
}
|
|
11732
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11753
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151:hover:not(.bp_select_menu_grid_option_module_disabled--1b151) .bp_select_menu_grid_option_module_iconContainer--1b151{
|
|
11733
11754
|
background-color:var(--icon-background-dark);
|
|
11734
11755
|
transition:var(--select-menu-grid-option-labeled-transition);
|
|
11735
11756
|
}
|
|
11736
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11757
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151[data-focus-visible]{
|
|
11737
11758
|
box-shadow:var(--select-menu-grid-option-labeled-box-shadow-focus);
|
|
11738
11759
|
}
|
|
11739
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11760
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_labeled--1b151[data-focus-visible]:active{
|
|
11740
11761
|
background:var(--select-menu-grid-option-labeled-background-color-active);
|
|
11741
11762
|
}
|
|
11742
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11763
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151{
|
|
11743
11764
|
height:var(--select-menu-grid-option-square-height);
|
|
11744
11765
|
width:var(--select-menu-grid-option-square-width);
|
|
11745
11766
|
}
|
|
11746
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11767
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151,.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151 .bp_select_menu_grid_option_module_outlineHost--1b151{
|
|
11747
11768
|
align-items:center;
|
|
11748
11769
|
border-radius:var(--select-menu-grid-option-square-border-radius);
|
|
11749
11770
|
display:flex;
|
|
11750
11771
|
justify-content:center;
|
|
11751
11772
|
}
|
|
11752
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11773
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_square--1b151 .bp_select_menu_grid_option_module_outlineHost--1b151{
|
|
11753
11774
|
height:var(--select-menu-grid-option-square-outline-host-height);
|
|
11754
11775
|
width:var(--select-menu-grid-option-square-outline-host-width);
|
|
11755
11776
|
}
|
|
11756
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11777
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151{
|
|
11757
11778
|
align-items:center;
|
|
11758
11779
|
background-clip:content-box;
|
|
11759
11780
|
background-color:var(--select-menu-grid-option-circle-background-color);
|
|
@@ -11765,10 +11786,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11765
11786
|
justify-content:center;
|
|
11766
11787
|
width:var(--select-menu-grid-option-circle-width);
|
|
11767
11788
|
}
|
|
11768
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11789
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151.bp_select_menu_grid_option_module_loading--1b151{
|
|
11769
11790
|
border-color:var(--select-menu-grid-option-circle-border-color-loading);
|
|
11770
11791
|
}
|
|
11771
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11792
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151 .bp_select_menu_grid_option_module_color--1b151{
|
|
11772
11793
|
background-color:var(--circleColor);
|
|
11773
11794
|
border:var(--select-menu-grid-option-circle-inner-border-width) solid var(--circleBorderColor);
|
|
11774
11795
|
border-radius:var(--select-menu-grid-option-circle-inner-border-radius);
|
|
@@ -11776,10 +11797,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11776
11797
|
height:var(--select-menu-grid-option-circle-inner-height);
|
|
11777
11798
|
width:var(--select-menu-grid-option-circle-inner-width);
|
|
11778
11799
|
}
|
|
11779
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11800
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151 .bp_select_menu_grid_option_module_strikeThrough--1b151{
|
|
11780
11801
|
position:relative;
|
|
11781
11802
|
}
|
|
11782
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11803
|
+
.bp_select_menu_grid_option_module_optionButton--1b151 .bp_select_menu_grid_option_module_circle--1b151 .bp_select_menu_grid_option_module_strikeThrough--1b151::after{
|
|
11783
11804
|
background-color:var(--select-menu-grid-option-circle-strikethrough-background-color);
|
|
11784
11805
|
border-radius:var(--select-menu-grid-option-circle-strikethrough-border-radius);
|
|
11785
11806
|
content:"";
|
|
@@ -11790,32 +11811,32 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
11790
11811
|
transform:rotate(-45deg);
|
|
11791
11812
|
width:90%;
|
|
11792
11813
|
}
|
|
11793
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11814
|
+
.bp_select_menu_grid_option_module_optionButton--1b151:hover .bp_select_menu_grid_option_module_square--1b151,.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_square--1b151{
|
|
11794
11815
|
background-color:var(--select-menu-grid-option-square-background-color-hover);
|
|
11795
11816
|
}
|
|
11796
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11817
|
+
.bp_select_menu_grid_option_module_optionButton--1b151:hover .bp_select_menu_grid_option_module_circle--1b151,.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_circle--1b151{
|
|
11797
11818
|
background-color:var(--select-menu-grid-option-circle-background-color-hover);
|
|
11798
11819
|
}
|
|
11799
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11820
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_square--1b151,.bp_select_menu_grid_option_module_optionButton--1b151:active .bp_select_menu_grid_option_module_square--1b151{
|
|
11800
11821
|
background-color:var(--select-menu-grid-option-square-background-color-active);
|
|
11801
11822
|
}
|
|
11802
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11823
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_circle--1b151,.bp_select_menu_grid_option_module_optionButton--1b151:active .bp_select_menu_grid_option_module_circle--1b151{
|
|
11803
11824
|
border:var(--select-menu-grid-option-circle-inner-border-width-active) solid var(--circleColor);
|
|
11804
11825
|
}
|
|
11805
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11826
|
+
.bp_select_menu_grid_option_module_optionButton--1b151.bp_select_menu_grid_option_module_loading--1b151,.bp_select_menu_grid_option_module_optionButton--1b151:disabled{
|
|
11806
11827
|
cursor:default;
|
|
11807
11828
|
}
|
|
11808
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11829
|
+
.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_outlineHost--1b151{
|
|
11809
11830
|
box-shadow:var(--select-menu-grid-option-circle-outline-host-box-shadow-focus);
|
|
11810
11831
|
}
|
|
11811
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11832
|
+
.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible] .bp_select_menu_grid_option_module_circle--1b151{
|
|
11812
11833
|
border-color:var(--select-menu-grid-option-circle-border-color-hover);
|
|
11813
11834
|
}
|
|
11814
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11835
|
+
.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible].bp_select_menu_grid_option_module_active--1b151 .bp_select_menu_grid_option_module_circle--1b151,.bp_select_menu_grid_option_module_optionButton--1b151[data-focus-visible]:active .bp_select_menu_grid_option_module_circle--1b151{
|
|
11815
11836
|
border:var(--select-menu-grid-option-circle-border-width-focus-active) solid var(--circleColor);
|
|
11816
11837
|
box-shadow:var(--select-menu-grid-option-circle-box-shadow-focus-active);
|
|
11817
11838
|
}
|
|
11818
|
-
.bp_select_menu_grid_option_module_optionButton--
|
|
11839
|
+
.bp_select_menu_grid_option_module_optionButton--1b151:disabled:not(.bp_select_menu_grid_option_module_loading--1b151){
|
|
11819
11840
|
opacity:.3;
|
|
11820
11841
|
}
|
|
11821
11842
|
|
|
@@ -42,17 +42,33 @@ export declare const SelectMenuGridColorCircle: import("react").ForwardRefExotic
|
|
|
42
42
|
color: string;
|
|
43
43
|
}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
|
|
44
44
|
export declare const SelectMenuGridWithLabel: import("react").ForwardRefExoticComponent<(Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
45
|
-
size: "default" | "large";
|
|
46
45
|
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
47
46
|
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
48
47
|
label: string;
|
|
49
|
-
} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging
|
|
50
|
-
size: "default"
|
|
48
|
+
} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
49
|
+
size: "default";
|
|
50
|
+
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
51
|
+
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
52
|
+
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
53
|
+
label: string;
|
|
54
|
+
} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
55
|
+
size: "default";
|
|
56
|
+
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
57
|
+
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
58
|
+
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
59
|
+
label: string;
|
|
60
|
+
} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
61
|
+
size: "large";
|
|
62
|
+
description?: string;
|
|
63
|
+
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
51
64
|
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
52
65
|
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
53
66
|
label: string;
|
|
54
|
-
} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging
|
|
55
|
-
|
|
67
|
+
} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
68
|
+
size: "large";
|
|
69
|
+
description?: string;
|
|
70
|
+
}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
|
|
71
|
+
export declare const SelectMenuGridOption: import("react").ForwardRefExoticComponent<(Omit<{
|
|
56
72
|
'aria-label': string;
|
|
57
73
|
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
58
74
|
active?: boolean;
|
|
@@ -62,41 +78,9 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
|
|
|
62
78
|
[index: `data-${string}`]: unknown;
|
|
63
79
|
} & {
|
|
64
80
|
children: React.ReactNode;
|
|
65
|
-
}> & Partial<{
|
|
66
|
-
'aria-label': string;
|
|
67
|
-
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
68
|
-
active?: boolean;
|
|
69
|
-
} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
70
|
-
ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
71
|
-
}, keyof import("@ariakit/react").ButtonOptions<T>> & {
|
|
72
|
-
[index: `data-${string}`]: unknown;
|
|
73
81
|
} & {
|
|
74
|
-
|
|
75
|
-
}>
|
|
76
|
-
variant: "square" | "colorCircle";
|
|
77
|
-
}, "ref"> | Omit<Partial<{
|
|
78
|
-
'aria-label': string;
|
|
79
|
-
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
80
|
-
active?: boolean;
|
|
81
|
-
} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
82
|
-
ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
83
|
-
}, keyof import("@ariakit/react").ButtonOptions<T>> & {
|
|
84
|
-
[index: `data-${string}`]: unknown;
|
|
85
|
-
} & {
|
|
86
|
-
children: React.ReactNode;
|
|
87
|
-
}> & Partial<{
|
|
88
|
-
'aria-label': string;
|
|
89
|
-
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
90
|
-
active?: boolean;
|
|
91
|
-
} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
92
|
-
ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
93
|
-
}, keyof import("@ariakit/react").ButtonOptions<T>> & {
|
|
94
|
-
[index: `data-${string}`]: unknown;
|
|
95
|
-
} & {
|
|
96
|
-
color: string;
|
|
97
|
-
}> & {
|
|
98
|
-
variant: "square" | "colorCircle";
|
|
99
|
-
}, "ref"> | Omit<Partial<{
|
|
82
|
+
variant: "square";
|
|
83
|
+
}, "ref"> | Omit<{
|
|
100
84
|
'aria-label': string;
|
|
101
85
|
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
102
86
|
active?: boolean;
|
|
@@ -106,7 +90,9 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
|
|
|
106
90
|
[index: `data-${string}`]: unknown;
|
|
107
91
|
} & {
|
|
108
92
|
children: React.ReactNode;
|
|
109
|
-
}
|
|
93
|
+
} & {
|
|
94
|
+
variant: "square";
|
|
95
|
+
}, "ref"> | Omit<{
|
|
110
96
|
'aria-label': string;
|
|
111
97
|
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
112
98
|
active?: boolean;
|
|
@@ -116,19 +102,9 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
|
|
|
116
102
|
[index: `data-${string}`]: unknown;
|
|
117
103
|
} & {
|
|
118
104
|
color: string;
|
|
119
|
-
}> & {
|
|
120
|
-
variant: "square" | "colorCircle";
|
|
121
|
-
}, "ref"> | Omit<Partial<{
|
|
122
|
-
'aria-label': string;
|
|
123
|
-
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
124
|
-
active?: boolean;
|
|
125
|
-
} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading> & import("@ariakit/react").ButtonOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
126
|
-
ref?: ((instance: HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLButtonElement> | null | undefined;
|
|
127
|
-
}, keyof import("@ariakit/react").ButtonOptions<T>> & {
|
|
128
|
-
[index: `data-${string}`]: unknown;
|
|
129
105
|
} & {
|
|
130
|
-
|
|
131
|
-
}>
|
|
106
|
+
variant: "colorCircle";
|
|
107
|
+
}, "ref"> | Omit<{
|
|
132
108
|
'aria-label': string;
|
|
133
109
|
tooltipSide?: "top" | "bottom" | "left" | "right";
|
|
134
110
|
active?: boolean;
|
|
@@ -138,21 +114,43 @@ export declare const SelectMenuGridOption: import("react").ForwardRefExoticCompo
|
|
|
138
114
|
[index: `data-${string}`]: unknown;
|
|
139
115
|
} & {
|
|
140
116
|
color: string;
|
|
141
|
-
}
|
|
142
|
-
variant: "
|
|
117
|
+
} & {
|
|
118
|
+
variant: "colorCircle";
|
|
143
119
|
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
144
|
-
size: "default" | "large";
|
|
145
120
|
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
146
121
|
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
147
122
|
label: string;
|
|
148
123
|
} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
124
|
+
size: "default";
|
|
125
|
+
} & {
|
|
149
126
|
variant: "labeled";
|
|
150
127
|
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
151
|
-
size: "default" | "large";
|
|
152
128
|
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
153
129
|
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
154
130
|
label: string;
|
|
155
131
|
} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
132
|
+
size: "default";
|
|
133
|
+
} & {
|
|
134
|
+
variant: "labeled";
|
|
135
|
+
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
136
|
+
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
137
|
+
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
138
|
+
label: string;
|
|
139
|
+
} & Required<Pick<import("./types").Dragging, keyof import("./types").Dragging>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
140
|
+
size: "large";
|
|
141
|
+
description?: string;
|
|
142
|
+
} & {
|
|
143
|
+
variant: "labeled";
|
|
144
|
+
}, "ref"> | Omit<Omit<import("./types").CommonOptionProps, "draggable" | "aria-label" | "tooltipSide"> & {
|
|
145
|
+
colorVariant: "default" | "box" | "forms" | "docgen" | "sign";
|
|
146
|
+
icon: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
|
|
147
|
+
label: string;
|
|
148
|
+
} & Partial<Record<keyof import("./types").Dragging, never>> & Omit<import("./types").Dragging, keyof import("./types").Dragging> & {
|
|
149
|
+
size: "large";
|
|
150
|
+
description?: string;
|
|
151
|
+
} & {
|
|
156
152
|
variant: "labeled";
|
|
157
153
|
}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
|
|
158
|
-
export declare const ItemWithLabel: ({ size, colorVariant, label, icon, }: Pick<SelectMenuGridWithLabelProps, "
|
|
154
|
+
export declare const ItemWithLabel: ({ size, colorVariant, label, description, icon, }: Pick<SelectMenuGridWithLabelProps, "colorVariant" | "icon" | "label" | "size"> & {
|
|
155
|
+
description?: string;
|
|
156
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -46,8 +46,21 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
46
46
|
const isButtonActive = !disabled && !loading && active;
|
|
47
47
|
const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
|
|
48
48
|
const shouldShowTooltip = !isButtonDisabled && !isWithLabel;
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
let ariaLabel;
|
|
50
|
+
if (variant === 'labeled') {
|
|
51
|
+
const {
|
|
52
|
+
label,
|
|
53
|
+
size
|
|
54
|
+
} = props;
|
|
55
|
+
if (size === 'large' && props.description) {
|
|
56
|
+
ariaLabel = `${label}. ${props.description}`;
|
|
57
|
+
} else {
|
|
58
|
+
ariaLabel = label;
|
|
59
|
+
}
|
|
60
|
+
} else {
|
|
61
|
+
ariaLabel = props['aria-label'];
|
|
62
|
+
}
|
|
63
|
+
const buttonProps = isWithLabel ? omit(restProps, ['colorVariant', 'icon', 'dragging', 'label', 'description']) : restProps;
|
|
51
64
|
// TODO: [DSYS-764] use IconButton instead of AriakitButton
|
|
52
65
|
const button = jsx(CompositeItem, {
|
|
53
66
|
render: jsxs(Button, {
|
|
@@ -153,6 +166,7 @@ const ItemWithLabel = ({
|
|
|
153
166
|
size,
|
|
154
167
|
colorVariant,
|
|
155
168
|
label,
|
|
169
|
+
description,
|
|
156
170
|
icon
|
|
157
171
|
}) => {
|
|
158
172
|
const {
|
|
@@ -168,11 +182,22 @@ const ItemWithLabel = ({
|
|
|
168
182
|
children: [jsx("div", {
|
|
169
183
|
className: clsx(styles.iconContainer, styles[`iconContainer--${colorVariant}`], styles[`iconContainer--size-${size}`]),
|
|
170
184
|
children: iconElement
|
|
171
|
-
}),
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
children:
|
|
185
|
+
}), jsxs("div", {
|
|
186
|
+
className: clsx(styles.labelContent, {
|
|
187
|
+
[styles['labelContent--withDescription']]: description
|
|
188
|
+
}),
|
|
189
|
+
children: [jsx(Text, {
|
|
190
|
+
as: "span",
|
|
191
|
+
className: clsx(styles.text, styles[`text--${size}`]),
|
|
192
|
+
variant: size === 'default' ? 'caption' : 'bodyDefaultBold',
|
|
193
|
+
children: label
|
|
194
|
+
}), description && jsx(Text, {
|
|
195
|
+
as: "span",
|
|
196
|
+
className: styles.description,
|
|
197
|
+
color: "textOnLightSecondary",
|
|
198
|
+
variant: "caption",
|
|
199
|
+
children: description
|
|
200
|
+
})]
|
|
176
201
|
})]
|
|
177
202
|
});
|
|
178
203
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--
|
|
2
|
+
var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--1b151","withLabel":"bp_select_menu_grid_option_module_withLabel--1b151","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--1b151","optionButton":"bp_select_menu_grid_option_module_optionButton--1b151","labeled":"bp_select_menu_grid_option_module_labeled--1b151","labelContent":"bp_select_menu_grid_option_module_labelContent--1b151","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--1b151","text":"bp_select_menu_grid_option_module_text--1b151","text--large":"bp_select_menu_grid_option_module_text--large--1b151","text--default":"bp_select_menu_grid_option_module_text--default--1b151","description":"bp_select_menu_grid_option_module_description--1b151","iconContainer":"bp_select_menu_grid_option_module_iconContainer--1b151","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--1b151","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--1b151","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--1b151","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--1b151","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--1b151","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--1b151","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--1b151","active":"bp_select_menu_grid_option_module_active--1b151","dragging":"bp_select_menu_grid_option_module_dragging--1b151","disabled":"bp_select_menu_grid_option_module_disabled--1b151","square":"bp_select_menu_grid_option_module_square--1b151","outlineHost":"bp_select_menu_grid_option_module_outlineHost--1b151","circle":"bp_select_menu_grid_option_module_circle--1b151","loading":"bp_select_menu_grid_option_module_loading--1b151","color":"bp_select_menu_grid_option_module_color--1b151","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--1b151"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type ButtonProps as AriakitButtonProps, type CompositeProps, type CompositeRowProps } from '@ariakit/react';
|
|
2
|
-
import { type RequireAllOrNone } from 'type-fest';
|
|
3
2
|
import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
|
|
3
|
+
import { type RequireAllOrNone } from 'type-fest';
|
|
4
4
|
export interface Loading {
|
|
5
5
|
/** Loading state of the grid option. Ghost section is displaying as a placeholder. When this is true `loadingAriaLabel` must also be provided. */
|
|
6
6
|
loading: boolean;
|
|
@@ -27,15 +27,23 @@ export type SelectMenuGridColorCircleProps = CommonOptionProps & {
|
|
|
27
27
|
/** The color of the swatch */
|
|
28
28
|
color: string;
|
|
29
29
|
};
|
|
30
|
-
|
|
31
|
-
size: 'default' | 'large';
|
|
30
|
+
type SelectMenuGridWithLabelBase = Omit<CommonOptionProps, 'aria-label' | 'tooltipSide' | 'draggable'> & {
|
|
32
31
|
colorVariant: 'default' | 'box' | 'forms' | 'docgen' | 'sign';
|
|
33
32
|
icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
|
|
34
33
|
label: string;
|
|
35
34
|
} & RequireAllOrNone<Dragging, keyof Dragging>;
|
|
36
|
-
export type
|
|
37
|
-
|
|
38
|
-
}
|
|
35
|
+
export type SelectMenuGridWithLabelProps = (SelectMenuGridWithLabelBase & {
|
|
36
|
+
size: 'default';
|
|
37
|
+
}) | (SelectMenuGridWithLabelBase & {
|
|
38
|
+
/** Secondary text shown below the label. Only supported when `size` is `large`. */
|
|
39
|
+
size: 'large';
|
|
40
|
+
description?: string;
|
|
41
|
+
});
|
|
42
|
+
export type SelectMenuOptionIconsProps = (SelectMenuGridSquareProps & {
|
|
43
|
+
variant: 'square';
|
|
44
|
+
}) | (SelectMenuGridColorCircleProps & {
|
|
45
|
+
variant: 'colorCircle';
|
|
46
|
+
});
|
|
39
47
|
export type SelectMenuOptionProps = SelectMenuOptionIconsProps | (SelectMenuGridWithLabelProps & {
|
|
40
48
|
variant: 'labeled';
|
|
41
49
|
});
|
|
@@ -46,3 +54,4 @@ export type SelectMenuGridProps = {
|
|
|
46
54
|
/** The number of columns to slice the grid options into */
|
|
47
55
|
columns: number;
|
|
48
56
|
} & CompositeProps;
|
|
57
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "15.
|
|
3
|
+
"version": "15.5.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.21",
|
|
49
49
|
"@ariakit/react-core": "0.4.21",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.121.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.121.8",
|
|
51
51
|
"@internationalized/date": "^3.12.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.20.
|
|
80
|
+
"@box/storybook-utils": "^0.20.8",
|
|
81
81
|
"@figma/code-connect": "1.4.4",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|