@box/blueprint-web 13.1.0 → 13.1.2

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.
@@ -49,7 +49,7 @@
49
49
  background-color:var(--ghost-background-color);
50
50
  }
51
51
  }
52
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=false]{
52
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=false]{
53
53
  --notice-border-color:var(--bp-border-inline-notice-border);
54
54
  --notice-border-width:var(--border-1);
55
55
  --notice-radius:var(--radius-2);
@@ -77,7 +77,7 @@
77
77
  --notice-content-align:center;
78
78
  --notice-icon-padding-top:0;
79
79
  }
80
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=false] .bp_base_inline_notice_module_content--683b5{
80
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=false] .bp_base_inline_notice_module_content--ba8f8{
81
81
  font-family:var(--body-default-font-family);
82
82
  font-size:var(--body-default-font-size);
83
83
  font-weight:var(--body-default-font-weight);
@@ -87,7 +87,7 @@
87
87
  text-decoration:var(--body-default-text-decoration);
88
88
  text-transform:var(--body-default-text-case);
89
89
  }
90
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=false] .bp_base_inline_notice_module_title--683b5{
90
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=false] .bp_base_inline_notice_module_title--ba8f8{
91
91
  font-family:var(--body-default-bold-font-family);
92
92
  font-size:var(--body-default-bold-font-size);
93
93
  font-weight:var(--body-default-bold-font-weight);
@@ -98,7 +98,7 @@
98
98
  text-transform:var(--body-default-bold-text-case);
99
99
  }
100
100
 
101
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=true]{
101
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true]{
102
102
  --notice-border-color:var(--bp-border-inline-notice-border);
103
103
  --notice-border-width:var(--bp-border-01);
104
104
  --notice-radius:var(--bp-radius-10);
@@ -126,115 +126,116 @@
126
126
  --notice-content-align:top;
127
127
  --notice-icon-padding-top:var(--bp-space-005);
128
128
  }
129
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=true] .bp_base_inline_notice_module_content--683b5{
129
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_content--ba8f8{
130
130
  font-weight:var(--bp-font-weight-regular);
131
131
  }
132
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=true] .bp_base_inline_notice_module_content--683b5,.bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=true] .bp_base_inline_notice_module_title--683b5{
132
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_content--ba8f8,.bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_title--ba8f8{
133
133
  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
134
134
  font-size:var(--bp-font-size-05);
135
135
  font-style:normal;
136
136
  letter-spacing:var(--bp-font-letter-spacing-01);
137
137
  line-height:var(--bp-font-line-height-04);
138
138
  }
139
- .bp_base_inline_notice_module_noticeWrapper--683b5[data-modern=true] .bp_base_inline_notice_module_title--683b5{
139
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8[data-modern=true] .bp_base_inline_notice_module_title--ba8f8{
140
140
  font-weight:var(--bp-font-weight-bold);
141
141
  }
142
142
 
143
- .bp_base_inline_notice_module_noticeWrapper--683b5{
143
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8{
144
144
  border-radius:var(--notice-radius);
145
145
  display:flex;
146
146
  gap:var(--notice-gap);
147
147
  justify-content:space-between;
148
148
  padding:var(--notice-padding-block) var(--notice-padding-inline);
149
149
  }
150
- .bp_base_inline_notice_module_noticeWrapper--683b5 .bp_base_inline_notice_module_actions--683b5{
150
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_actions--ba8f8{
151
151
  align-self:center;
152
152
  display:flex;
153
153
  gap:var(--notice-gap);
154
154
  justify-content:flex-end;
155
155
  }
156
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundYellow--683b5{
156
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundYellow--ba8f8{
157
157
  background:var(--notice-surface-warning);
158
158
  }
159
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundBlue--683b5{
159
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundBlue--ba8f8{
160
160
  background:var(--notice-surface-info);
161
161
  }
162
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5{
162
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8{
163
163
  background:var(--notice-surface-error);
164
164
  }
165
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonTertiary--683b5{
165
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonTertiary--ba8f8{
166
166
  color:var(--notice-btn-text-error);
167
167
  }
168
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5{
168
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8{
169
169
  background:var(--notice-btn-surface-error);
170
170
  border-color:var(--notice-btn-surface-error);
171
171
  }
172
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):active{
172
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):active{
173
173
  background:var(--notice-btn-surface-error-pressed);
174
174
  }
175
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled)[data-focus-visible]{
175
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled)[data-focus-visible]{
176
176
  background:var(--notice-btn-surface-error-hover);
177
177
  }
178
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):hover{
178
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover{
179
179
  background:var(--notice-btn-surface-error-hover);
180
180
  border-color:var(--notice-btn-surface-error-hover);
181
181
  }
182
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):focus:active,.bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundRed--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):hover:active{
182
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):focus:active,.bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundRed--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover:active{
183
183
  background:var(--notice-btn-surface-error-pressed);
184
184
  }
185
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundGreen--683b5{
185
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundGreen--ba8f8{
186
186
  background:var(--notice-surface-success);
187
187
  }
188
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5{
188
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8{
189
189
  background:var(--notice-surface-promo);
190
190
  }
191
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonTertiary--683b5{
191
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonTertiary--ba8f8{
192
192
  color:var(--notice-btn-text-promo);
193
193
  }
194
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5{
194
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8{
195
195
  background:var(--notice-btn-surface-promo);
196
196
  border-color:var(--notice-btn-surface-promo);
197
197
  }
198
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):active{
198
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):active{
199
199
  background:var(--notice-btn-surface-promo-pressed);
200
200
  }
201
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled)[data-focus-visible]{
201
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled)[data-focus-visible]{
202
202
  background:var(--notice-btn-surface-promo-focus);
203
203
  }
204
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):hover{
204
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover{
205
205
  background:var(--notice-btn-surface-promo-hover);
206
206
  border-color:var(--notice-btn-surface-promo-hover);
207
207
  }
208
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):focus:active{
208
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):focus:active{
209
209
  background:var(--notice-btn-surface-promo-focus-pressed);
210
210
  }
211
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundPurple--683b5 .bp_base_inline_notice_module_actionButtonPrimary--683b5:not(:disabled):hover:active{
211
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundPurple--ba8f8 .bp_base_inline_notice_module_actionButtonPrimary--ba8f8:not(:disabled):hover:active{
212
212
  background:var(--notice-btn-surface-promo-pressed);
213
213
  }
214
- .bp_base_inline_notice_module_noticeWrapper--683b5.bp_base_inline_notice_module_backgroundWhite--683b5{
214
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8.bp_base_inline_notice_module_backgroundWhite--ba8f8{
215
215
  background:var(--notice-surface-note);
216
216
  border:var(--notice-border-width) solid var(--notice-border-color);
217
217
  }
218
- .bp_base_inline_notice_module_noticeWrapper--683b5 .bp_base_inline_notice_module_contentContainer--683b5{
218
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_contentContainer--ba8f8{
219
219
  align-items:var(--notice-content-align);
220
+ align-self:center;
220
221
  display:flex;
221
222
  gap:var(--notice-gap);
222
223
  }
223
- .bp_base_inline_notice_module_noticeWrapper--683b5 .bp_base_inline_notice_module_content--683b5{
224
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_content--ba8f8{
224
225
  color:var(--notice-content-text-color);
225
226
  }
226
- .bp_base_inline_notice_module_noticeWrapper--683b5 .bp_base_inline_notice_module_icon--683b5{
227
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8 .bp_base_inline_notice_module_icon--ba8f8{
227
228
  padding-top:var(--notice-icon-padding-top);
228
229
  }
229
- .bp_base_inline_notice_module_noticeWrapper--683b5 svg{
230
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8 svg{
230
231
  display:block;
231
232
  }
232
233
 
233
234
  @media (max-width: 1023px){
234
- .bp_base_inline_notice_module_actions--683b5{
235
+ .bp_base_inline_notice_module_actions--ba8f8{
235
236
  margin-top:var(--notice-space-3);
236
237
  }
237
- .bp_base_inline_notice_module_noticeWrapper--683b5{
238
+ .bp_base_inline_notice_module_noticeWrapper--ba8f8{
238
239
  display:block;
239
240
  }
240
241
  }
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--683b5","content":"bp_base_inline_notice_module_content--683b5","title":"bp_base_inline_notice_module_title--683b5","actions":"bp_base_inline_notice_module_actions--683b5","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--683b5","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--683b5","backgroundRed":"bp_base_inline_notice_module_backgroundRed--683b5","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--683b5","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--683b5","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--683b5","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--683b5","backgroundWhite":"bp_base_inline_notice_module_backgroundWhite--683b5","contentContainer":"bp_base_inline_notice_module_contentContainer--683b5","icon":"bp_base_inline_notice_module_icon--683b5"};
2
+ var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--ba8f8","content":"bp_base_inline_notice_module_content--ba8f8","title":"bp_base_inline_notice_module_title--ba8f8","actions":"bp_base_inline_notice_module_actions--ba8f8","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--ba8f8","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--ba8f8","backgroundRed":"bp_base_inline_notice_module_backgroundRed--ba8f8","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--ba8f8","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--ba8f8","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--ba8f8","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--ba8f8","backgroundWhite":"bp_base_inline_notice_module_backgroundWhite--ba8f8","contentContainer":"bp_base_inline_notice_module_contentContainer--ba8f8","icon":"bp_base_inline_notice_module_icon--ba8f8"};
3
3
 
4
4
  export { styles as default };
@@ -4,8 +4,9 @@ import { Checkmark } from '@box/blueprint-web-assets/icons/Medium';
4
4
  import { Size5, Size4, bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
5
5
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
6
6
  import clsx from 'clsx';
7
- import { forwardRef } from 'react';
7
+ import { forwardRef, useCallback } from 'react';
8
8
  import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
9
+ import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
9
10
  import styles from './dropdown-menu.module.js';
10
11
  import { useMenuItemVariant } from './menu-item-variant-context.js';
11
12
 
@@ -25,6 +26,7 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
25
26
  const {
26
27
  enableModernizedComponents
27
28
  } = useBlueprintModernization();
29
+ const preventDefault = useCallback(event => event.preventDefault(), []);
28
30
  const isSizeSmall = internalSize === 'small';
29
31
  const checkmarkSize = enableModernizedComponents ? Size5 : Size4;
30
32
  const Checkmark$2 = enableModernizedComponents ? Checkmark : Checkmark$1;
@@ -33,6 +35,9 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
33
35
  ...rest,
34
36
  ref: forwardedRef,
35
37
  className: clsx(styles.item, styles.checkboxItem, className),
38
+ // If click starts at trigger button, and ends on the item, it should not trigger the item.
39
+ // Note: this also has a side effect of not allowing to start click and end on a different time.
40
+ onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
36
41
  children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
37
42
  className: clsx(styles.checkmark, {
38
43
  [styles.mediumSpacing]: !isSizeSmall
@@ -4,8 +4,9 @@ import { Checkmark } from '@box/blueprint-web-assets/icons/Medium';
4
4
  import { Size5, Size4, bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
5
5
  import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
6
6
  import clsx from 'clsx';
7
- import { forwardRef } from 'react';
7
+ import { forwardRef, useCallback } from 'react';
8
8
  import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
9
+ import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
9
10
  import styles from './dropdown-menu.module.js';
10
11
  import { useMenuItemVariant } from './menu-item-variant-context.js';
11
12
 
@@ -25,6 +26,7 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
25
26
  const {
26
27
  enableModernizedComponents
27
28
  } = useBlueprintModernization();
29
+ const preventDefault = useCallback(event => event.preventDefault(), []);
28
30
  const isSizeSmall = internalSize === 'small';
29
31
  const checkmarkSize = enableModernizedComponents ? Size5 : Size4;
30
32
  const Checkmark$2 = enableModernizedComponents ? Checkmark : Checkmark$1;
@@ -34,6 +36,9 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
34
36
  ref: forwardedRef,
35
37
  className: clsx(styles.item, styles.radioItem),
36
38
  value: value,
39
+ // If click starts at trigger button, and ends on the item, it should not trigger the item.
40
+ // Note: this also has a side effect of not allowing to start click and end on a different time.
41
+ onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
37
42
  children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
38
43
  className: clsx(styles.checkmark, {
39
44
  [styles.mediumSpacing]: !isSizeSmall
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "13.1.0",
3
+ "version": "13.1.2",
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.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.101.10",
50
+ "@box/blueprint-web-assets": "^4.101.12",
51
51
  "@internationalized/date": "^3.7.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.16.47",
80
+ "@box/storybook-utils": "^0.16.49",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",