@box/blueprint-web 7.36.1 → 7.36.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib-esm/index.css +64 -54
- package/lib-esm/search-input/search-input-controlled/search-input-controlled.js +1 -1
- package/lib-esm/search-input/search-input.js +1 -1
- package/lib-esm/search-input/search.module.js +1 -1
- package/lib-esm/side-panel/side-panel.module.js +1 -1
- package/lib-esm/split-button/split-button.js +18 -10
- package/package.json +2 -2
package/lib-esm/index.css
CHANGED
|
@@ -4857,7 +4857,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4857
4857
|
background-color:var(--surface-radio-surface-selected-hover);
|
|
4858
4858
|
}
|
|
4859
4859
|
|
|
4860
|
-
.bp_search_module_search--
|
|
4860
|
+
.bp_search_module_search--b65f4{
|
|
4861
4861
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
4862
4862
|
font-size:.875rem;
|
|
4863
4863
|
font-weight:400;
|
|
@@ -4870,7 +4870,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4870
4870
|
text-transform:none;
|
|
4871
4871
|
width:100%;
|
|
4872
4872
|
}
|
|
4873
|
-
.bp_search_module_search--
|
|
4873
|
+
.bp_search_module_search--b65f4.bp_search_module_disabled--b65f4{
|
|
4874
|
+
opacity:.3;
|
|
4875
|
+
}
|
|
4876
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchIcon--b65f4{
|
|
4874
4877
|
height:var(--size-4);
|
|
4875
4878
|
left:var(--space-2);
|
|
4876
4879
|
pointer-events:none;
|
|
@@ -4879,12 +4882,13 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4879
4882
|
transform:translateY(-50%);
|
|
4880
4883
|
width:var(--size-4);
|
|
4881
4884
|
}
|
|
4882
|
-
.bp_search_module_search--
|
|
4885
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchIcon--b65f4.bp_search_module_global--b65f4{
|
|
4883
4886
|
height:var(--size-5);
|
|
4884
4887
|
left:var(--space-4);
|
|
4885
4888
|
width:var(--size-5);
|
|
4886
4889
|
}
|
|
4887
|
-
.bp_search_module_search--
|
|
4890
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4{
|
|
4891
|
+
-webkit-font-smoothing:auto;
|
|
4888
4892
|
background-color:var(--surface-search-surface);
|
|
4889
4893
|
border:var(--border-1) solid #0000;
|
|
4890
4894
|
border-radius:var(--radius-2);
|
|
@@ -4905,45 +4909,51 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4905
4909
|
transition:border-color .15s ease,background-color .15s ease;
|
|
4906
4910
|
width:100%;
|
|
4907
4911
|
}
|
|
4908
|
-
.bp_search_module_search--
|
|
4912
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4.bp_search_module_global--b65f4{
|
|
4909
4913
|
border-radius:var(--radius-7);
|
|
4910
4914
|
height:var(--size-12);
|
|
4911
4915
|
padding-inline:var(--space-12) var(--space-2);
|
|
4912
4916
|
}
|
|
4913
|
-
.bp_search_module_search--
|
|
4917
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4::-webkit-search-cancel-button,.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4::-webkit-search-decoration,.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4::-webkit-search-results-button,.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4::-webkit-search-results-decoration{
|
|
4914
4918
|
appearance:none;
|
|
4915
4919
|
}
|
|
4916
|
-
.bp_search_module_search--
|
|
4920
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:disabled{
|
|
4921
|
+
background-color:var(--surface-search-surface);
|
|
4922
|
+
border-color:#0000;
|
|
4923
|
+
box-shadow:unset;
|
|
4924
|
+
color:var(--text-text-on-light);
|
|
4925
|
+
}
|
|
4926
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:hover{
|
|
4917
4927
|
box-shadow:unset;
|
|
4918
4928
|
}
|
|
4919
|
-
.bp_search_module_search--
|
|
4929
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4 .bp_search_module_firefoxDefaultOpacityFix--b65f4,.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4 .bp_search_module_searchInput--b65f4::placeholder{
|
|
4920
4930
|
opacity:1;
|
|
4921
4931
|
}
|
|
4922
|
-
.bp_search_module_search--
|
|
4932
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4::placeholder{
|
|
4923
4933
|
color:var(--text-text-on-light-secondary);
|
|
4924
4934
|
}
|
|
4925
|
-
.bp_search_module_search--
|
|
4935
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:not(:placeholder-shown){
|
|
4926
4936
|
padding-inline-end:var(--space-8);
|
|
4927
4937
|
}
|
|
4928
|
-
.bp_search_module_search--
|
|
4938
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:not(:placeholder-shown).bp_search_module_global--b65f4{
|
|
4929
4939
|
padding-inline-end:calc(var(--size-8)*2 + var(--space-6));
|
|
4930
4940
|
}
|
|
4931
|
-
.bp_search_module_search--
|
|
4941
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:not(:placeholder-shown).bp_search_module_global--b65f4.bp_search_module_withoutActionButton--b65f4{
|
|
4932
4942
|
padding-inline-end:calc(var(--size-8) + var(--space-3));
|
|
4933
4943
|
}
|
|
4934
|
-
.bp_search_module_search--
|
|
4944
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:focus-visible{
|
|
4935
4945
|
background-color:var(--surface-search-surface-focused);
|
|
4936
4946
|
border:var(--border-2) solid #2486fc;
|
|
4937
4947
|
padding-inline-start:calc(var(--space-8) - var(--border-1));
|
|
4938
4948
|
}
|
|
4939
|
-
.bp_search_module_search--
|
|
4949
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:focus-visible.bp_search_module_global--b65f4{
|
|
4940
4950
|
padding-inline-start:calc(var(--space-12) - var(--border-1));
|
|
4941
4951
|
}
|
|
4942
|
-
.bp_search_module_search--
|
|
4952
|
+
.bp_search_module_search--b65f4 .bp_search_module_searchInput--b65f4:not(:focus-visible):not(:disabled):hover{
|
|
4943
4953
|
background-color:var(--surface-search-surface-hover);
|
|
4944
4954
|
border-color:#6f6f6f;
|
|
4945
4955
|
}
|
|
4946
|
-
.bp_search_module_search--
|
|
4956
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4{
|
|
4947
4957
|
background:var(--surface-cta-surface-icon);
|
|
4948
4958
|
height:var(--size-4);
|
|
4949
4959
|
position:absolute;
|
|
@@ -4952,31 +4962,31 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
4952
4962
|
transform:translateY(-50%);
|
|
4953
4963
|
width:var(--size-4);
|
|
4954
4964
|
}
|
|
4955
|
-
.bp_search_module_search--
|
|
4965
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4.bp_search_module_global--b65f4{
|
|
4956
4966
|
height:var(--size-8);
|
|
4957
4967
|
right:calc(var(--space-12) + var(--space-1));
|
|
4958
4968
|
width:var(--size-8);
|
|
4959
4969
|
}
|
|
4960
|
-
.bp_search_module_search--
|
|
4970
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4.bp_search_module_withoutActionButton--b65f4{
|
|
4961
4971
|
right:var(--space-3);
|
|
4962
4972
|
}
|
|
4963
|
-
.bp_search_module_search--
|
|
4973
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4 *{
|
|
4964
4974
|
fill:var(--icon-cta-icon);
|
|
4965
4975
|
}
|
|
4966
|
-
.bp_search_module_search--
|
|
4976
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4:focus-visible{
|
|
4967
4977
|
background:var(--surface-cta-surface-icon-hover);
|
|
4968
4978
|
outline:var(--border-2) solid var(--outline-focus-on-light);
|
|
4969
4979
|
}
|
|
4970
|
-
.bp_search_module_search--
|
|
4980
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4:focus-visible *{
|
|
4971
4981
|
fill:var(--icon-cta-icon-hover);
|
|
4972
4982
|
}
|
|
4973
|
-
.bp_search_module_search--
|
|
4983
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4:hover{
|
|
4974
4984
|
background:var(--surface-cta-surface-icon-hover);
|
|
4975
4985
|
}
|
|
4976
|
-
.bp_search_module_search--
|
|
4986
|
+
.bp_search_module_search--b65f4 .bp_search_module_clearSearchIcon--b65f4:hover *{
|
|
4977
4987
|
fill:var(--icon-cta-icon-hover);
|
|
4978
4988
|
}
|
|
4979
|
-
.bp_search_module_search--
|
|
4989
|
+
.bp_search_module_search--b65f4 .bp_search_module_actionButton--b65f4{
|
|
4980
4990
|
position:absolute;
|
|
4981
4991
|
right:var(--space-4);
|
|
4982
4992
|
top:50%;
|
|
@@ -5142,7 +5152,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5142
5152
|
margin-block:var(--space-2);
|
|
5143
5153
|
}
|
|
5144
5154
|
|
|
5145
|
-
.bp_side_panel_module_content--
|
|
5155
|
+
.bp_side_panel_module_content--4e61a{
|
|
5146
5156
|
background-color:var(--gray-white);
|
|
5147
5157
|
border-inline-start:var(--border-1) solid var(--border-divider-border);
|
|
5148
5158
|
display:flex;
|
|
@@ -5151,15 +5161,15 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5151
5161
|
height:100%;
|
|
5152
5162
|
margin-inline-start:auto;
|
|
5153
5163
|
max-width:100%;
|
|
5154
|
-
min-width:
|
|
5164
|
+
min-width:100%;
|
|
5155
5165
|
overflow:hidden;
|
|
5156
5166
|
}
|
|
5157
|
-
@media only screen and (
|
|
5158
|
-
.bp_side_panel_module_content--
|
|
5159
|
-
min-width:
|
|
5167
|
+
@media only screen and (width > 374px){
|
|
5168
|
+
.bp_side_panel_module_content--4e61a{
|
|
5169
|
+
min-width:320px;
|
|
5160
5170
|
}
|
|
5161
5171
|
}
|
|
5162
|
-
.bp_side_panel_module_content--
|
|
5172
|
+
.bp_side_panel_module_content--4e61a .bp_side_panel_module_header--4e61a{
|
|
5163
5173
|
align-items:center;
|
|
5164
5174
|
background-color:var(--surface-surface);
|
|
5165
5175
|
border-bottom:var(--border-1) solid var(--border-divider-border);
|
|
@@ -5174,68 +5184,68 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5174
5184
|
transition-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
5175
5185
|
word-break:break-word;
|
|
5176
5186
|
}
|
|
5177
|
-
.bp_side_panel_module_content--
|
|
5187
|
+
.bp_side_panel_module_content--4e61a .bp_side_panel_module_header--4e61a,.bp_side_panel_module_content--4e61a .bp_side_panel_module_header--4e61a.bp_side_panel_module_headerMobile--4e61a{
|
|
5178
5188
|
font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
5179
5189
|
font-weight:700;
|
|
5180
5190
|
letter-spacing:.01875rem;
|
|
5181
5191
|
text-decoration:none;
|
|
5182
5192
|
text-transform:none;
|
|
5183
5193
|
}
|
|
5184
|
-
.bp_side_panel_module_content--
|
|
5194
|
+
.bp_side_panel_module_content--4e61a .bp_side_panel_module_header--4e61a.bp_side_panel_module_headerMobile--4e61a{
|
|
5185
5195
|
font-size:.9375rem;
|
|
5186
5196
|
line-height:1.25rem;
|
|
5187
5197
|
}
|
|
5188
|
-
.bp_side_panel_module_content--
|
|
5198
|
+
.bp_side_panel_module_content--4e61a .bp_side_panel_module_headerShadow--4e61a{
|
|
5189
5199
|
box-shadow:var(--dropshadow-3);
|
|
5190
5200
|
}
|
|
5191
5201
|
|
|
5192
|
-
.bp_side_panel_module_persistentContent--
|
|
5202
|
+
.bp_side_panel_module_persistentContent--4e61a{
|
|
5193
5203
|
position:relative;
|
|
5194
5204
|
}
|
|
5195
5205
|
|
|
5196
|
-
.bp_side_panel_module_contentAnimatedSlideIn--
|
|
5206
|
+
.bp_side_panel_module_contentAnimatedSlideIn--4e61a{
|
|
5197
5207
|
animation-duration:.2s;
|
|
5198
|
-
animation-name:bp_side_panel_module_slideIn--
|
|
5208
|
+
animation-name:bp_side_panel_module_slideIn--4e61a;
|
|
5199
5209
|
animation-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
5200
5210
|
}
|
|
5201
5211
|
|
|
5202
|
-
.bp_side_panel_module_contentAnimatedSlideOut--
|
|
5212
|
+
.bp_side_panel_module_contentAnimatedSlideOut--4e61a[data-state=closed]{
|
|
5203
5213
|
animation-duration:.2s;
|
|
5204
|
-
animation-name:bp_side_panel_module_slideOut--
|
|
5214
|
+
animation-name:bp_side_panel_module_slideOut--4e61a;
|
|
5205
5215
|
animation-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
5206
5216
|
}
|
|
5207
5217
|
|
|
5208
|
-
.bp_side_panel_module_contentNormal--
|
|
5218
|
+
.bp_side_panel_module_contentNormal--4e61a{
|
|
5209
5219
|
width:360px;
|
|
5210
5220
|
}
|
|
5211
5221
|
|
|
5212
|
-
.bp_side_panel_module_contentLarge--
|
|
5222
|
+
.bp_side_panel_module_contentLarge--4e61a{
|
|
5213
5223
|
width:420px;
|
|
5214
5224
|
}
|
|
5215
5225
|
|
|
5216
|
-
.bp_side_panel_module_dropShadowContent--
|
|
5226
|
+
.bp_side_panel_module_dropShadowContent--4e61a{
|
|
5217
5227
|
box-shadow:var(--dropshadow-3);
|
|
5218
5228
|
}
|
|
5219
5229
|
|
|
5220
|
-
.bp_side_panel_module_content--
|
|
5230
|
+
.bp_side_panel_module_content--4e61a .bp_side_panel_module_close--4e61a{
|
|
5221
5231
|
color:var(--gray-65);
|
|
5222
5232
|
position:absolute;
|
|
5223
5233
|
right:var(--space-4);
|
|
5224
5234
|
top:var(--space-5);
|
|
5225
5235
|
}
|
|
5226
5236
|
|
|
5227
|
-
.bp_side_panel_module_overlayContent--
|
|
5237
|
+
.bp_side_panel_module_overlayContent--4e61a{
|
|
5228
5238
|
box-shadow:var(--dropshadow-3);
|
|
5229
5239
|
position:fixed;
|
|
5230
5240
|
right:0;
|
|
5231
5241
|
top:0;
|
|
5232
5242
|
z-index:300;
|
|
5233
5243
|
}
|
|
5234
|
-
.bp_side_panel_module_overlayContent--
|
|
5244
|
+
.bp_side_panel_module_overlayContent--4e61a .bp_side_panel_module_header--4e61a{
|
|
5235
5245
|
padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
|
|
5236
5246
|
}
|
|
5237
5247
|
|
|
5238
|
-
.bp_side_panel_module_overlay--
|
|
5248
|
+
.bp_side_panel_module_overlay--4e61a{
|
|
5239
5249
|
background-color:var(--black-opacity-80);
|
|
5240
5250
|
bottom:0;
|
|
5241
5251
|
display:flex;
|
|
@@ -5246,20 +5256,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5246
5256
|
top:0;
|
|
5247
5257
|
z-index:300;
|
|
5248
5258
|
}
|
|
5249
|
-
.bp_side_panel_module_overlay--
|
|
5259
|
+
.bp_side_panel_module_overlay--4e61a .bp_side_panel_module_content--4e61a .bp_side_panel_module_header--4e61a{
|
|
5250
5260
|
padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
|
|
5251
5261
|
}
|
|
5252
5262
|
|
|
5253
|
-
.bp_side_panel_module_dropShadowOverlay--
|
|
5263
|
+
.bp_side_panel_module_dropShadowOverlay--4e61a{
|
|
5254
5264
|
background-color:initial;
|
|
5255
5265
|
}
|
|
5256
5266
|
|
|
5257
|
-
.bp_side_panel_module_scrollableContainer--
|
|
5267
|
+
.bp_side_panel_module_scrollableContainer--4e61a{
|
|
5258
5268
|
flex-grow:1;
|
|
5259
5269
|
overflow-y:auto;
|
|
5260
5270
|
}
|
|
5261
5271
|
|
|
5262
|
-
.bp_side_panel_module_footer--
|
|
5272
|
+
.bp_side_panel_module_footer--4e61a{
|
|
5263
5273
|
background-color:var(--surface-surface);
|
|
5264
5274
|
display:flex;
|
|
5265
5275
|
justify-content:flex-end;
|
|
@@ -5269,19 +5279,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5269
5279
|
transition-timing-function:cubic-bezier(0, 0, .6, 1);
|
|
5270
5280
|
}
|
|
5271
5281
|
|
|
5272
|
-
.bp_side_panel_module_footerShadow--
|
|
5282
|
+
.bp_side_panel_module_footerShadow--4e61a{
|
|
5273
5283
|
box-shadow:var(--dropshadow-3-inverse);
|
|
5274
5284
|
}
|
|
5275
5285
|
|
|
5276
|
-
.bp_side_panel_module_footerButton--
|
|
5286
|
+
.bp_side_panel_module_footerButton--4e61a{
|
|
5277
5287
|
margin-inline-start:var(--space-2);
|
|
5278
5288
|
}
|
|
5279
5289
|
|
|
5280
|
-
.bp_side_panel_module_footerButton--
|
|
5290
|
+
.bp_side_panel_module_footerButton--4e61a + .bp_side_panel_module_footerButton--4e61a{
|
|
5281
5291
|
margin-inline-start:var(--space-3);
|
|
5282
5292
|
}
|
|
5283
5293
|
|
|
5284
|
-
@keyframes bp_side_panel_module_slideIn--
|
|
5294
|
+
@keyframes bp_side_panel_module_slideIn--4e61a{
|
|
5285
5295
|
from{
|
|
5286
5296
|
inset-inline-end:-100%;
|
|
5287
5297
|
}
|
|
@@ -5289,7 +5299,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
|
|
|
5289
5299
|
inset-inline-end:0;
|
|
5290
5300
|
}
|
|
5291
5301
|
}
|
|
5292
|
-
@keyframes bp_side_panel_module_slideOut--
|
|
5302
|
+
@keyframes bp_side_panel_module_slideOut--4e61a{
|
|
5293
5303
|
from{
|
|
5294
5304
|
inset-inline-end:0;
|
|
5295
5305
|
}
|
|
@@ -68,7 +68,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
68
68
|
size: 'x-small'
|
|
69
69
|
}), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton]);
|
|
70
70
|
return jsxs("div", {
|
|
71
|
-
className: clsx(styles.search, className),
|
|
71
|
+
className: clsx(styles.search, disabled && styles.disabled, className),
|
|
72
72
|
children: [jsx(Search, {
|
|
73
73
|
"aria-hidden": "true",
|
|
74
74
|
className: clsx(styles.searchIcon, isGlobal && styles.global),
|
|
@@ -69,7 +69,7 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
69
69
|
const isGlobal = variant === 'global';
|
|
70
70
|
const showActionButton = Children.count(children) > 0;
|
|
71
71
|
return jsxs("div", {
|
|
72
|
-
className: clsx(styles.search, className),
|
|
72
|
+
className: clsx(styles.search, disabled && styles.disabled, className),
|
|
73
73
|
children: [jsx(Search, {
|
|
74
74
|
"aria-hidden": "true",
|
|
75
75
|
className: clsx(styles.searchIcon, isGlobal && styles.global),
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"search":"bp_search_module_search--
|
|
2
|
+
var styles = {"search":"bp_search_module_search--b65f4","disabled":"bp_search_module_disabled--b65f4","searchIcon":"bp_search_module_searchIcon--b65f4","global":"bp_search_module_global--b65f4","searchInput":"bp_search_module_searchInput--b65f4","firefoxDefaultOpacityFix":"bp_search_module_firefoxDefaultOpacityFix--b65f4","withoutActionButton":"bp_search_module_withoutActionButton--b65f4","clearSearchIcon":"bp_search_module_clearSearchIcon--b65f4","actionButton":"bp_search_module_actionButton--b65f4"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"content":"bp_side_panel_module_content--
|
|
2
|
+
var styles = {"content":"bp_side_panel_module_content--4e61a","header":"bp_side_panel_module_header--4e61a","headerMobile":"bp_side_panel_module_headerMobile--4e61a","headerShadow":"bp_side_panel_module_headerShadow--4e61a","persistentContent":"bp_side_panel_module_persistentContent--4e61a","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--4e61a","slideIn":"bp_side_panel_module_slideIn--4e61a","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--4e61a","slideOut":"bp_side_panel_module_slideOut--4e61a","contentNormal":"bp_side_panel_module_contentNormal--4e61a","contentLarge":"bp_side_panel_module_contentLarge--4e61a","dropShadowContent":"bp_side_panel_module_dropShadowContent--4e61a","close":"bp_side_panel_module_close--4e61a","overlayContent":"bp_side_panel_module_overlayContent--4e61a","overlay":"bp_side_panel_module_overlay--4e61a","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--4e61a","scrollableContainer":"bp_side_panel_module_scrollableContainer--4e61a","footer":"bp_side_panel_module_footer--4e61a","footerShadow":"bp_side_panel_module_footerShadow--4e61a","footerButton":"bp_side_panel_module_footerButton--4e61a"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { forwardRef, useState, useCallback } from 'react';
|
|
3
|
+
import { forwardRef, useState, useRef, useCallback } from 'react';
|
|
4
4
|
import { Button } from '../button/button.js';
|
|
5
5
|
import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
|
|
6
6
|
import { useControllableState } from '../utils/useControllableState.js';
|
|
@@ -10,6 +10,16 @@ import styles from './styles.module.js';
|
|
|
10
10
|
const getLeftButtonWidth = (loading, leftButtonSize, rightButtonSize) => {
|
|
11
11
|
return loading && leftButtonSize && rightButtonSize ? leftButtonSize + rightButtonSize : undefined;
|
|
12
12
|
};
|
|
13
|
+
const updateForwardedRef = (forwardedRef, button) => {
|
|
14
|
+
if (!forwardedRef) {
|
|
15
|
+
return;
|
|
16
|
+
}
|
|
17
|
+
if (typeof forwardedRef === 'function') {
|
|
18
|
+
forwardedRef(button);
|
|
19
|
+
} else {
|
|
20
|
+
forwardedRef.current = button;
|
|
21
|
+
}
|
|
22
|
+
};
|
|
13
23
|
const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
14
24
|
const {
|
|
15
25
|
align = 'end',
|
|
@@ -34,19 +44,14 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
34
44
|
onChange: onOpenChange,
|
|
35
45
|
defaultProp: defaultOpen
|
|
36
46
|
});
|
|
47
|
+
const localLeftRef = useRef(null);
|
|
37
48
|
const onLeftButtonMountCallback = useCallback(button => {
|
|
38
49
|
if (button?.offsetWidth) {
|
|
39
50
|
setLeftButtonSize(button?.offsetWidth);
|
|
40
51
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
if (typeof forwardedRef === 'function') {
|
|
45
|
-
forwardedRef(button);
|
|
46
|
-
} else {
|
|
47
|
-
forwardedRef.current = button;
|
|
48
|
-
}
|
|
49
|
-
}, [forwardedRef]);
|
|
52
|
+
localLeftRef.current = button;
|
|
53
|
+
updateForwardedRef(forwardedRef, button);
|
|
54
|
+
}, [forwardedRef, setLeftButtonSize]);
|
|
50
55
|
const onRightButtonMountCallback = useCallback(button => {
|
|
51
56
|
if (button?.offsetWidth) {
|
|
52
57
|
setRightButtonSize(button.offsetWidth);
|
|
@@ -56,6 +61,9 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
56
61
|
if (disabled) {
|
|
57
62
|
return;
|
|
58
63
|
}
|
|
64
|
+
if (localLeftRef.current?.offsetWidth) {
|
|
65
|
+
setLeftButtonSize(localLeftRef.current.offsetWidth);
|
|
66
|
+
}
|
|
59
67
|
setOpen(!open);
|
|
60
68
|
}, [disabled, open, setOpen]);
|
|
61
69
|
const shouldAlignToLeft = align === 'start' && leftButtonSize;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "7.36.
|
|
3
|
+
"version": "7.36.3",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
"react-stately": "^3.31.1",
|
|
64
64
|
"tsx": "^4.16.5"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "cb9d1103ad345206637fdc35e1650751ae752a0a",
|
|
67
67
|
"module": "lib-esm/index.js",
|
|
68
68
|
"main": "lib-esm/index.js",
|
|
69
69
|
"exports": {
|