@box/blueprint-web 13.17.1 → 13.19.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 +262 -187
- package/dist/lib-esm/primitives/base-button/base-button.js +7 -0
- package/dist/lib-esm/primitives/base-button/base-button.module.js +1 -1
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js +6 -6
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js +4 -4
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js +6 -6
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js +1 -1
- package/dist/lib-esm/select/select.js +2 -6
- package/dist/lib-esm/select/select.module.js +1 -1
- package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.module.js +1 -1
- package/package.json +3 -3
|
@@ -2,6 +2,8 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import { Button } from '@ariakit/react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { forwardRef, useRef, useMemo } from 'react';
|
|
5
|
+
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
6
|
+
import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
|
|
5
7
|
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
8
|
import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
|
|
7
9
|
import { getButtonOptions } from '../../utils/getButtonOptions.js';
|
|
@@ -35,6 +37,10 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
35
37
|
const {
|
|
36
38
|
enableModernizedComponents
|
|
37
39
|
} = useBlueprintModernization();
|
|
40
|
+
const {
|
|
41
|
+
componentsWithAnimationEnabled
|
|
42
|
+
} = useBlueprintConfiguration();
|
|
43
|
+
const isAnimationEnabled = componentsWithAnimationEnabled.includes('Button');
|
|
38
44
|
const ref = useRef(null);
|
|
39
45
|
const buttonType = useMemo(() => getButtonTypeFromChildren(children, BaseButtonIcon, BaseButtonLabel), [children]);
|
|
40
46
|
const context = useMemo(() => ({
|
|
@@ -50,6 +56,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
50
56
|
"aria-label": loading ? undefined : ariaLabel,
|
|
51
57
|
className: getButtonClassName(variant, size, buttonType, loading, className),
|
|
52
58
|
"data-modern": enableModernizedComponents ? 'true' : 'false',
|
|
59
|
+
"data-bp-animated": isAnimationEnabled ? 'true' : 'false',
|
|
53
60
|
children: jsxs(BaseButtonContext.Provider, {
|
|
54
61
|
value: context,
|
|
55
62
|
children: [children, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"button":"bp_base_button_module_button--
|
|
2
|
+
var styles = {"button":"bp_base_button_module_button--04b55","primary":"bp_base_button_module_primary--04b55","secondary":"bp_base_button_module_secondary--04b55","tertiary":"bp_base_button_module_tertiary--04b55","quaternary":"bp_base_button_module_quaternary--04b55","tertiary-destructive":"bp_base_button_module_tertiary-destructive--04b55","destructive":"bp_base_button_module_destructive--04b55","outline":"bp_base_button_module_outline--04b55","small":"bp_base_button_module_small--04b55","isIconButton":"bp_base_button_module_isIconButton--04b55","isTextWithIconEndButton":"bp_base_button_module_isTextWithIconEndButton--04b55","isTextWithIconStartButton":"bp_base_button_module_isTextWithIconStartButton--04b55","isTextWithStartAndEndIconButton":"bp_base_button_module_isTextWithStartAndEndIconButton--04b55","large":"bp_base_button_module_large--04b55","icon":"bp_base_button_module_icon--04b55","hide":"bp_base_button_module_hide--04b55"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -38,7 +38,12 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
|
|
|
38
38
|
// If click starts at trigger button, and ends on the item, it should not trigger the item.
|
|
39
39
|
// Note: this also has a side effect of not allowing to start click and end on a different time.
|
|
40
40
|
onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
|
|
41
|
-
children: [jsx(
|
|
41
|
+
children: [jsx("span", {
|
|
42
|
+
className: clsx(styles.itemBody, {
|
|
43
|
+
[styles.checkboxItemMediumSpacing]: !isSizeSmall
|
|
44
|
+
}),
|
|
45
|
+
children: children
|
|
46
|
+
}), jsx(DropdownMenuPrimitive.ItemIndicator, {
|
|
42
47
|
className: clsx(styles.checkmark, {
|
|
43
48
|
[styles.mediumSpacing]: !isSizeSmall
|
|
44
49
|
}),
|
|
@@ -48,11 +53,6 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
|
|
|
48
53
|
role: "presentation",
|
|
49
54
|
width: checkmarkSize
|
|
50
55
|
})
|
|
51
|
-
}), jsx("span", {
|
|
52
|
-
className: clsx(styles.ellipsis, {
|
|
53
|
-
[styles.checkboxItemMediumSpacing]: !isSizeSmall
|
|
54
|
-
}),
|
|
55
|
-
children: children
|
|
56
56
|
})]
|
|
57
57
|
});
|
|
58
58
|
});
|
|
@@ -23,7 +23,7 @@ const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
23
23
|
const {
|
|
24
24
|
internalSize
|
|
25
25
|
} = useMenuItemVariant();
|
|
26
|
-
const sizeStyles = internalSize === 'small' ? styles.
|
|
26
|
+
const sizeStyles = internalSize === 'small' ? styles.itemOverflow : styles.mediumItemLayout;
|
|
27
27
|
const preventDefault = useCallback(event => event.preventDefault(), []);
|
|
28
28
|
return jsx(ItemVariantContext.Provider, {
|
|
29
29
|
value: variant,
|
|
@@ -58,15 +58,15 @@ const MenuItemMainContent = /*#__PURE__*/forwardRef(({
|
|
|
58
58
|
return jsx("div", {
|
|
59
59
|
...rest,
|
|
60
60
|
ref: ref,
|
|
61
|
-
className: clsx(styles.menuItemMainContent, styles.
|
|
62
|
-
children: children
|
|
61
|
+
className: clsx(styles.menuItemMainContent, children !== undefined && styles.menuItemMainContent_directChild, className),
|
|
62
|
+
children: children !== undefined ? children : jsxs(Fragment, {
|
|
63
63
|
children: [jsx(Text, {
|
|
64
64
|
as: "span",
|
|
65
65
|
className: styles.ellipsis,
|
|
66
66
|
variant: labelVariant,
|
|
67
67
|
children: label
|
|
68
68
|
}), caption ? jsx("div", {
|
|
69
|
-
className: styles.
|
|
69
|
+
className: styles.menuItemCaption,
|
|
70
70
|
children: jsx(Text, {
|
|
71
71
|
as: "span",
|
|
72
72
|
color: "textOnLightSecondary",
|
|
@@ -39,7 +39,12 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
|
|
|
39
39
|
// If click starts at trigger button, and ends on the item, it should not trigger the item.
|
|
40
40
|
// Note: this also has a side effect of not allowing to start click and end on a different time.
|
|
41
41
|
onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
|
|
42
|
-
children: [jsx(
|
|
42
|
+
children: [jsx("span", {
|
|
43
|
+
className: clsx(styles.itemBody, {
|
|
44
|
+
[styles.radioItemMediumSpacing]: !isSizeSmall
|
|
45
|
+
}),
|
|
46
|
+
children: children ?? value
|
|
47
|
+
}), jsx(DropdownMenuPrimitive.ItemIndicator, {
|
|
43
48
|
className: clsx(styles.checkmark, {
|
|
44
49
|
[styles.mediumSpacing]: !isSizeSmall
|
|
45
50
|
}),
|
|
@@ -49,11 +54,6 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
|
|
|
49
54
|
role: "presentation",
|
|
50
55
|
width: checkmarkSize
|
|
51
56
|
})
|
|
52
|
-
}), jsx("span", {
|
|
53
|
-
className: clsx(styles.ellipsis, {
|
|
54
|
-
[styles.radioItemMediumSpacing]: !isSizeSmall
|
|
55
|
-
}),
|
|
56
|
-
children: children ?? value
|
|
57
57
|
})]
|
|
58
58
|
});
|
|
59
59
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"content":"bp_dropdown_menu_module_content--
|
|
2
|
+
var styles = {"content":"bp_dropdown_menu_module_content--83ff8","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--83ff8","subheader":"bp_dropdown_menu_module_subheader--83ff8","uppercased":"bp_dropdown_menu_module_uppercased--83ff8","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--83ff8","ellipsis":"bp_dropdown_menu_module_ellipsis--83ff8","itemBody":"bp_dropdown_menu_module_itemBody--83ff8","itemOverflow":"bp_dropdown_menu_module_itemOverflow--83ff8","menuItemCaption":"bp_dropdown_menu_module_menuItemCaption--83ff8","checkmark":"bp_dropdown_menu_module_checkmark--83ff8","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--83ff8","item":"bp_dropdown_menu_module_item--83ff8","radioItem":"bp_dropdown_menu_module_radioItem--83ff8","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--83ff8","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--83ff8","checkboxItem":"bp_dropdown_menu_module_checkboxItem--83ff8","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--83ff8","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--83ff8","startElement":"bp_dropdown_menu_module_startElement--83ff8","menuItemMainContent_directChild":"bp_dropdown_menu_module_menuItemMainContent_directChild--83ff8","endElement":"bp_dropdown_menu_module_endElement--83ff8","destructive":"bp_dropdown_menu_module_destructive--83ff8","menuHeader":"bp_dropdown_menu_module_menuHeader--83ff8","headerTextContent":"bp_dropdown_menu_module_headerTextContent--83ff8","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--83ff8","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--83ff8"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -268,15 +268,11 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
268
268
|
children: [jsx(SelectPrimitive.ItemText, {
|
|
269
269
|
children: text
|
|
270
270
|
}), !!secondaryText && jsx("span", {
|
|
271
|
-
className:
|
|
272
|
-
[styles.ellipsis]: truncateText
|
|
273
|
-
}),
|
|
271
|
+
className: styles.secondaryText,
|
|
274
272
|
children: secondaryText
|
|
275
273
|
})]
|
|
276
274
|
}), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
|
|
277
|
-
className:
|
|
278
|
-
[styles.indicatorRight]: hasLeftElement
|
|
279
|
-
}),
|
|
275
|
+
className: styles.indicator,
|
|
280
276
|
children: jsx(Checkmark, {})
|
|
281
277
|
})]
|
|
282
278
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_select_module_container--
|
|
2
|
+
var styles = {"container":"bp_select_module_container--aba58","label":"bp_select_module_label--aba58","triggerBtn":"bp_select_module_triggerBtn--aba58","ellipsis":"bp_select_module_ellipsis--aba58","disabled":"bp_select_module_disabled--aba58","triggerValue":"bp_select_module_triggerValue--aba58","triggerLeftElement":"bp_select_module_triggerLeftElement--aba58","readonly":"bp_select_module_readonly--aba58","error":"bp_select_module_error--aba58","iconWrapper":"bp_select_module_iconWrapper--aba58","iconCaret":"bp_select_module_iconCaret--aba58","iconPencilCrossed":"bp_select_module_iconPencilCrossed--aba58","content":"bp_select_module_content--aba58","viewport":"bp_select_module_viewport--aba58","option":"bp_select_module_option--aba58","secondaryText":"bp_select_module_secondaryText--aba58","textWrapper":"bp_select_module_textWrapper--aba58","leftElement":"bp_select_module_leftElement--aba58","hasLeftElement":"bp_select_module_hasLeftElement--aba58","indicator":"bp_select_module_indicator--aba58","separator":"bp_select_module_separator--aba58","withTruncatedText":"bp_select_module_withTruncatedText--aba58"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"menuItemMainContent":"bp_menu_item_sections_module_menuItemMainContent--
|
|
2
|
+
var styles = {"menuItemMainContent":"bp_menu_item_sections_module_menuItemMainContent--dd1ef","label":"bp_menu_item_sections_module_label--dd1ef","bold":"bp_menu_item_sections_module_bold--dd1ef","description":"bp_menu_item_sections_module_description--dd1ef","menuItemSideContent":"bp_menu_item_sections_module_menuItemSideContent--dd1ef","textOnLightSecondary":"bp_menu_item_sections_module_textOnLightSecondary--dd1ef"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.19.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.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.111.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.111.14",
|
|
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.17.
|
|
80
|
+
"@box/storybook-utils": "^0.17.14",
|
|
81
81
|
"@figma/code-connect": "1.3.12",
|
|
82
82
|
"@types/react": "^18.0.0",
|
|
83
83
|
"@types/react-dom": "^18.0.0",
|