@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 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--f146a{
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--f146a .bp_search_module_searchIcon--f146a{
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--f146a .bp_search_module_searchIcon--f146a.bp_search_module_global--f146a{
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--f146a .bp_search_module_searchInput--f146a{
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--f146a .bp_search_module_searchInput--f146a.bp_search_module_global--f146a{
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--f146a .bp_search_module_searchInput--f146a::-webkit-search-cancel-button,.bp_search_module_search--f146a .bp_search_module_searchInput--f146a::-webkit-search-decoration,.bp_search_module_search--f146a .bp_search_module_searchInput--f146a::-webkit-search-results-button,.bp_search_module_search--f146a .bp_search_module_searchInput--f146a::-webkit-search-results-decoration{
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--f146a .bp_search_module_searchInput--f146a:hover{
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--f146a .bp_search_module_searchInput--f146a .bp_search_module_firefoxDefaultOpacityFix--f146a,.bp_search_module_search--f146a .bp_search_module_searchInput--f146a .bp_search_module_searchInput--f146a::placeholder{
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--f146a .bp_search_module_searchInput--f146a::placeholder{
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--f146a .bp_search_module_searchInput--f146a:not(:placeholder-shown){
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--f146a .bp_search_module_searchInput--f146a:not(:placeholder-shown).bp_search_module_global--f146a{
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--f146a .bp_search_module_searchInput--f146a:not(:placeholder-shown).bp_search_module_global--f146a.bp_search_module_withoutActionButton--f146a{
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--f146a .bp_search_module_searchInput--f146a:focus-visible{
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--f146a .bp_search_module_searchInput--f146a:focus-visible.bp_search_module_global--f146a{
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--f146a .bp_search_module_searchInput--f146a:not(:focus-visible):not(:disabled):hover{
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--f146a .bp_search_module_clearSearchIcon--f146a{
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--f146a .bp_search_module_clearSearchIcon--f146a.bp_search_module_global--f146a{
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--f146a .bp_search_module_clearSearchIcon--f146a.bp_search_module_withoutActionButton--f146a{
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--f146a .bp_search_module_clearSearchIcon--f146a *{
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--f146a .bp_search_module_clearSearchIcon--f146a:focus-visible{
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--f146a .bp_search_module_clearSearchIcon--f146a:focus-visible *{
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--f146a .bp_search_module_clearSearchIcon--f146a:hover{
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--f146a .bp_search_module_clearSearchIcon--f146a:hover *{
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--f146a .bp_search_module_actionButton--f146a{
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--9d0c1{
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:320px;
5164
+ min-width:100%;
5155
5165
  overflow:hidden;
5156
5166
  }
5157
- @media only screen and (max-width: 374px){
5158
- .bp_side_panel_module_content--9d0c1{
5159
- min-width:100%;
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--9d0c1 .bp_side_panel_module_header--9d0c1{
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--9d0c1 .bp_side_panel_module_header--9d0c1,.bp_side_panel_module_content--9d0c1 .bp_side_panel_module_header--9d0c1.bp_side_panel_module_headerMobile--9d0c1{
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--9d0c1 .bp_side_panel_module_header--9d0c1.bp_side_panel_module_headerMobile--9d0c1{
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--9d0c1 .bp_side_panel_module_headerShadow--9d0c1{
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--9d0c1{
5202
+ .bp_side_panel_module_persistentContent--4e61a{
5193
5203
  position:relative;
5194
5204
  }
5195
5205
 
5196
- .bp_side_panel_module_contentAnimatedSlideIn--9d0c1{
5206
+ .bp_side_panel_module_contentAnimatedSlideIn--4e61a{
5197
5207
  animation-duration:.2s;
5198
- animation-name:bp_side_panel_module_slideIn--9d0c1;
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--9d0c1[data-state=closed]{
5212
+ .bp_side_panel_module_contentAnimatedSlideOut--4e61a[data-state=closed]{
5203
5213
  animation-duration:.2s;
5204
- animation-name:bp_side_panel_module_slideOut--9d0c1;
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--9d0c1{
5218
+ .bp_side_panel_module_contentNormal--4e61a{
5209
5219
  width:360px;
5210
5220
  }
5211
5221
 
5212
- .bp_side_panel_module_contentLarge--9d0c1{
5222
+ .bp_side_panel_module_contentLarge--4e61a{
5213
5223
  width:420px;
5214
5224
  }
5215
5225
 
5216
- .bp_side_panel_module_dropShadowContent--9d0c1{
5226
+ .bp_side_panel_module_dropShadowContent--4e61a{
5217
5227
  box-shadow:var(--dropshadow-3);
5218
5228
  }
5219
5229
 
5220
- .bp_side_panel_module_content--9d0c1 .bp_side_panel_module_close--9d0c1{
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--9d0c1{
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--9d0c1 .bp_side_panel_module_header--9d0c1{
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--9d0c1{
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--9d0c1 .bp_side_panel_module_content--9d0c1 .bp_side_panel_module_header--9d0c1{
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--9d0c1{
5263
+ .bp_side_panel_module_dropShadowOverlay--4e61a{
5254
5264
  background-color:initial;
5255
5265
  }
5256
5266
 
5257
- .bp_side_panel_module_scrollableContainer--9d0c1{
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--9d0c1{
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--9d0c1{
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--9d0c1{
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--9d0c1 + .bp_side_panel_module_footerButton--9d0c1{
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--9d0c1{
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--9d0c1{
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--f146a","searchIcon":"bp_search_module_searchIcon--f146a","global":"bp_search_module_global--f146a","searchInput":"bp_search_module_searchInput--f146a","firefoxDefaultOpacityFix":"bp_search_module_firefoxDefaultOpacityFix--f146a","withoutActionButton":"bp_search_module_withoutActionButton--f146a","clearSearchIcon":"bp_search_module_clearSearchIcon--f146a","actionButton":"bp_search_module_actionButton--f146a"};
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--9d0c1","header":"bp_side_panel_module_header--9d0c1","headerMobile":"bp_side_panel_module_headerMobile--9d0c1","headerShadow":"bp_side_panel_module_headerShadow--9d0c1","persistentContent":"bp_side_panel_module_persistentContent--9d0c1","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--9d0c1","slideIn":"bp_side_panel_module_slideIn--9d0c1","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--9d0c1","slideOut":"bp_side_panel_module_slideOut--9d0c1","contentNormal":"bp_side_panel_module_contentNormal--9d0c1","contentLarge":"bp_side_panel_module_contentLarge--9d0c1","dropShadowContent":"bp_side_panel_module_dropShadowContent--9d0c1","close":"bp_side_panel_module_close--9d0c1","overlayContent":"bp_side_panel_module_overlayContent--9d0c1","overlay":"bp_side_panel_module_overlay--9d0c1","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--9d0c1","scrollableContainer":"bp_side_panel_module_scrollableContainer--9d0c1","footer":"bp_side_panel_module_footer--9d0c1","footerShadow":"bp_side_panel_module_footerShadow--9d0c1","footerButton":"bp_side_panel_module_footerButton--9d0c1"};
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
- if (!forwardedRef) {
42
- return;
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.1",
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": "36614341a1bf61c7180c7f08e3cd523db717fa3d",
66
+ "gitHead": "cb9d1103ad345206637fdc35e1650751ae752a0a",
67
67
  "module": "lib-esm/index.js",
68
68
  "main": "lib-esm/index.js",
69
69
  "exports": {