@box/blueprint-web 17.17.0 → 17.18.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/accordion/accordion.js +2 -6
- package/dist/lib-esm/accordion/accordion.module.js +1 -1
- package/dist/lib-esm/accordion/types.d.ts +2 -5
- package/dist/lib-esm/card/card.js +0 -1
- package/dist/lib-esm/card/card.module.js +1 -1
- package/dist/lib-esm/collapsible/collapsible-section.js +8 -11
- package/dist/lib-esm/collapsible/collapsible-section.module.js +1 -1
- package/dist/lib-esm/components.css +453 -776
- package/dist/lib-esm/content-card/content-card-body.js +2 -4
- package/dist/lib-esm/content-card/content-card.js +0 -2
- package/dist/lib-esm/content-card/content-card.module.js +1 -1
- package/dist/lib-esm/index.css +453 -776
- package/dist/lib-esm/page/page-root.js +0 -1
- package/dist/lib-esm/page/page.module.js +1 -1
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js +4 -5
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.js +0 -1
- package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js +1 -1
- package/dist/lib-esm/primitives/inline-error/inline-error.js +9 -23
- package/dist/lib-esm/primitives/inline-error/inline-error.module.js +1 -1
- package/dist/lib-esm/primitives/page-header/page-header.js +0 -2
- package/dist/lib-esm/primitives/page-header/page-header.module.js +1 -1
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js +1 -1
- package/dist/lib-esm/side-panel/side-panel-close.js +2 -7
- package/dist/lib-esm/side-panel/side-panel-content.js +0 -2
- package/dist/lib-esm/side-panel/side-panel-overlay.js +0 -1
- package/dist/lib-esm/side-panel/side-panel.module.js +1 -1
- package/package.json +3 -3
|
@@ -64,7 +64,6 @@ const PageLayout = /*#__PURE__*/forwardRef(({
|
|
|
64
64
|
[styles.pageNavigationXXLargeCollapsed]: xxLargeBreakpointActive && !navigationExpanded,
|
|
65
65
|
[styles.pageMediumOrLessViewport]: breakpoint <= Breakpoint.Medium
|
|
66
66
|
}, className),
|
|
67
|
-
"data-modern": 'true' ,
|
|
68
67
|
children: [Slots.Navigation, jsxs("div", {
|
|
69
68
|
className: styles.pageBody,
|
|
70
69
|
children: [Slots.SidePanel, jsxs("div", {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"page":"bp_page_module_page--
|
|
2
|
+
var styles = {"page":"bp_page_module_page--c633d","pageBody":"bp_page_module_pageBody--c633d","pageBodyContent":"bp_page_module_pageBodyContent--c633d","sidePanel":"bp_page_module_sidePanel--c633d","expanded":"bp_page_module_expanded--c633d","globalHeader":"bp_page_module_globalHeader--c633d","sideContentContainer":"bp_page_module_sideContentContainer--c633d","searchContainer":"bp_page_module_searchContainer--c633d","pageMain":"bp_page_module_pageMain--c633d","topSection":"bp_page_module_topSection--c633d","mainSection":"bp_page_module_mainSection--c633d","content":"bp_page_module_content--c633d","paddingWithSidebarVisible":"bp_page_module_paddingWithSidebarVisible--c633d","sidebar":"bp_page_module_sidebar--c633d","navigationPortal":"bp_page_module_navigationPortal--c633d","navigationContent":"bp_page_module_navigationContent--c633d","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--c633d","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--c633d","hide":"bp_page_module_hide--c633d","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--c633d","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--c633d","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--c633d","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--c633d","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--c633d","portalEntry":"bp_page_module_portalEntry--c633d"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -3,7 +3,7 @@ import { bpSize050, bpIconIconOnLightSecondary, bpIconIconOnLight } from '@box/b
|
|
|
3
3
|
import { forwardRef, createElement } from 'react';
|
|
4
4
|
import styles from './base-inline-notice.module.js';
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const IconColorMap = {
|
|
7
7
|
IconIconOnLight: bpIconIconOnLight,
|
|
8
8
|
IconIconOnLightSecondary: bpIconIconOnLightSecondary
|
|
9
9
|
};
|
|
@@ -17,11 +17,10 @@ const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
17
17
|
if (!icon) {
|
|
18
18
|
return null;
|
|
19
19
|
}
|
|
20
|
-
const color = IconColorModernizedMap[iconColor] ;
|
|
21
20
|
const iconElement = /*#__PURE__*/createElement(icon, {
|
|
22
|
-
color,
|
|
23
|
-
width: bpSize050
|
|
24
|
-
height: bpSize050
|
|
21
|
+
color: IconColorMap[iconColor],
|
|
22
|
+
width: bpSize050,
|
|
23
|
+
height: bpSize050,
|
|
25
24
|
'aria-label': iconAriaLabel
|
|
26
25
|
});
|
|
27
26
|
return jsx("span", {
|
|
@@ -16,7 +16,6 @@ const BaseInlineNotice = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
16
16
|
ref: forwardedRef,
|
|
17
17
|
className: clsx(styles.noticeWrapper, styles[backgroundColor], className),
|
|
18
18
|
"data-container-query-layout": enableContainerQueryLayout ? 'true' : 'false',
|
|
19
|
-
"data-modern": 'true' ,
|
|
20
19
|
children: children
|
|
21
20
|
});
|
|
22
21
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--
|
|
2
|
+
var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--dc878","actions":"bp_base_inline_notice_module_actions--dc878","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--dc878","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--dc878","backgroundRed":"bp_base_inline_notice_module_backgroundRed--dc878","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--dc878","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--dc878","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--dc878","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--dc878","backgroundWhite":"bp_base_inline_notice_module_backgroundWhite--dc878","backgroundGray":"bp_base_inline_notice_module_backgroundGray--dc878","contentContainer":"bp_base_inline_notice_module_contentContainer--dc878","content":"bp_base_inline_notice_module_content--dc878","title":"bp_base_inline_notice_module_title--dc878","icon":"bp_base_inline_notice_module_icon--dc878"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
2
|
import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
|
-
import {
|
|
3
|
+
import { bpSize050, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
|
|
5
4
|
import clsx from 'clsx';
|
|
6
5
|
import { forwardRef, useCallback } from 'react';
|
|
7
6
|
import '../../blueprint-configuration-context/blueprint-configuration-context.js';
|
|
@@ -10,15 +9,7 @@ import { useBlueprintConfiguration } from '../../blueprint-configuration-context
|
|
|
10
9
|
import { useInlineErrorPresence } from './utils/use-inline-error-presence.js';
|
|
11
10
|
import styles from './inline-error.module.js';
|
|
12
11
|
|
|
13
|
-
const renderErrorContent = (content,
|
|
14
|
-
children: [jsx(AlertBadge, {
|
|
15
|
-
className: errorIconClassName,
|
|
16
|
-
color: IconIconErrorOnLight,
|
|
17
|
-
height: Size4,
|
|
18
|
-
role: "presentation",
|
|
19
|
-
width: Size4
|
|
20
|
-
}), content]
|
|
21
|
-
}) : jsxs(Fragment, {
|
|
12
|
+
const renderErrorContent = (content, errorIconClassName) => content && jsxs(Fragment, {
|
|
22
13
|
children: [jsx(AlertCircle, {
|
|
23
14
|
className: errorIconClassName,
|
|
24
15
|
color: IconIconErrorOnLight,
|
|
@@ -26,7 +17,7 @@ const renderErrorContent = (content, enableModernizedComponents, errorIconClassN
|
|
|
26
17
|
role: "presentation",
|
|
27
18
|
width: bpSize050
|
|
28
19
|
}), content]
|
|
29
|
-
})
|
|
20
|
+
});
|
|
30
21
|
/** Renders an inline error message and icon, used to show error state in form elements. */
|
|
31
22
|
const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
32
23
|
const {
|
|
@@ -35,13 +26,11 @@ const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
35
26
|
onAnimationEnd: onAnimationEndProp,
|
|
36
27
|
...rest
|
|
37
28
|
} = props;
|
|
38
|
-
const enableModernizedComponents = true;
|
|
39
29
|
const {
|
|
40
30
|
componentsWithAnimationEnabled
|
|
41
31
|
} = useBlueprintConfiguration();
|
|
42
32
|
const isAnimationEnabled = componentsWithAnimationEnabled.includes('InlineError');
|
|
43
|
-
const
|
|
44
|
-
const presence = useInlineErrorPresence(children, useModernizedAnimation);
|
|
33
|
+
const presence = useInlineErrorPresence(children, isAnimationEnabled);
|
|
45
34
|
const {
|
|
46
35
|
onAnimationEnd: onPresenceAnimationEnd
|
|
47
36
|
} = presence;
|
|
@@ -49,21 +38,19 @@ const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
49
38
|
onPresenceAnimationEnd(event);
|
|
50
39
|
onAnimationEndProp?.(event);
|
|
51
40
|
}, [onPresenceAnimationEnd, onAnimationEndProp]);
|
|
52
|
-
/**
|
|
53
|
-
if (!
|
|
41
|
+
/** When animation is off: no mount/unmount. Hide the empty slot with `.empty` + `display: none`. */
|
|
42
|
+
if (!isAnimationEnabled) {
|
|
54
43
|
return jsx("span", {
|
|
55
44
|
...rest,
|
|
56
45
|
ref: forwardedRef,
|
|
57
46
|
className: clsx([className, styles.inlineError, {
|
|
58
47
|
[styles.empty]: !children
|
|
59
48
|
}]),
|
|
60
|
-
"data-modern": 'true' ,
|
|
61
49
|
onAnimationEnd: onAnimationEndProp,
|
|
62
|
-
children: renderErrorContent(children,
|
|
50
|
+
children: renderErrorContent(children, styles.errorIcon)
|
|
63
51
|
});
|
|
64
52
|
}
|
|
65
|
-
/**
|
|
66
|
-
message — layout matches legacy (legacy hides the same slot via `.empty` + `display: none`). */
|
|
53
|
+
/** Unmount when there is no error and we are not in the exit phase, so there is no visible slot. */
|
|
67
54
|
if (!presence.isMounted) {
|
|
68
55
|
return null;
|
|
69
56
|
}
|
|
@@ -72,10 +59,9 @@ const InlineError = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
72
59
|
ref: forwardedRef,
|
|
73
60
|
className: clsx([className, styles.inlineError, styles.animated]),
|
|
74
61
|
"data-bp-animated": "true",
|
|
75
|
-
"data-modern": "true",
|
|
76
62
|
"data-state": presence.presenceState,
|
|
77
63
|
onAnimationEnd: handleAnimationEnd,
|
|
78
|
-
children: renderErrorContent(presence.content,
|
|
64
|
+
children: renderErrorContent(presence.content, styles.errorIcon)
|
|
79
65
|
});
|
|
80
66
|
});
|
|
81
67
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"inlineError":"bp_inline_error_module_inlineError--
|
|
2
|
+
var styles = {"inlineError":"bp_inline_error_module_inlineError--b8255","empty":"bp_inline_error_module_empty--b8255","errorIcon":"bp_inline_error_module_errorIcon--b8255","animated":"bp_inline_error_module_animated--b8255"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -13,11 +13,9 @@ const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
13
13
|
sticky = true,
|
|
14
14
|
...rest
|
|
15
15
|
} = props;
|
|
16
|
-
const enableModernizedComponents = true;
|
|
17
16
|
return /*#__PURE__*/createElement(as, {
|
|
18
17
|
...rest,
|
|
19
18
|
ref: forwardedRef,
|
|
20
|
-
'data-modern': enableModernizedComponents,
|
|
21
19
|
className: clsx(styles.pageHeader, className, {
|
|
22
20
|
[styles.default]: variant === 'default'
|
|
23
21
|
}, {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"pageHeader":"bp_page_header_module_pageHeader--
|
|
2
|
+
var styles = {"pageHeader":"bp_page_header_module_pageHeader--28bdc","inline":"bp_page_header_module_inline--28bdc","sticky":"bp_page_header_module_sticky--28bdc","default":"bp_page_header_module_default--28bdc","corner":"bp_page_header_module_corner--28bdc","startElements":"bp_page_header_module_startElements--28bdc","endElements":"bp_page_header_module_endElements--28bdc"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -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--fd3e3","withLabel":"bp_select_menu_grid_option_module_withLabel--fd3e3","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--fd3e3","optionButton":"bp_select_menu_grid_option_module_optionButton--fd3e3","labeled":"bp_select_menu_grid_option_module_labeled--fd3e3","labelContent":"bp_select_menu_grid_option_module_labelContent--fd3e3","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--fd3e3","text":"bp_select_menu_grid_option_module_text--fd3e3","text--large":"bp_select_menu_grid_option_module_text--large--fd3e3","text--default":"bp_select_menu_grid_option_module_text--default--fd3e3","description":"bp_select_menu_grid_option_module_description--fd3e3","iconContainer":"bp_select_menu_grid_option_module_iconContainer--fd3e3","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--fd3e3","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--fd3e3","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--fd3e3","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--fd3e3","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--fd3e3","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--fd3e3","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--fd3e3","active":"bp_select_menu_grid_option_module_active--fd3e3","dragging":"bp_select_menu_grid_option_module_dragging--fd3e3","labeled--large":"bp_select_menu_grid_option_module_labeled--large--fd3e3","disabled":"bp_select_menu_grid_option_module_disabled--fd3e3","square":"bp_select_menu_grid_option_module_square--fd3e3","outlineHost":"bp_select_menu_grid_option_module_outlineHost--fd3e3","circle":"bp_select_menu_grid_option_module_circle--fd3e3","loading":"bp_select_menu_grid_option_module_loading--fd3e3","color":"bp_select_menu_grid_option_module_color--fd3e3","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--fd3e3"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import '@box/blueprint-web-assets/icons/Fill';
|
|
3
2
|
import { XMark } from '@box/blueprint-web-assets/icons/Medium';
|
|
4
3
|
import * as RadixDialog from '@radix-ui/react-dialog';
|
|
5
|
-
import { forwardRef
|
|
4
|
+
import { forwardRef } from 'react';
|
|
6
5
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
7
6
|
import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
|
|
8
7
|
import styles from './side-panel.module.js';
|
|
@@ -20,11 +19,7 @@ const SidePanelClose = /*#__PURE__*/forwardRef(({
|
|
|
20
19
|
}, forwardedRef) => {
|
|
21
20
|
const breakpoint = useBreakpoint();
|
|
22
21
|
const smallBreakpointActive = breakpoint === Breakpoint.Small;
|
|
23
|
-
const enableModernizedComponents = true;
|
|
24
22
|
const finalProps = smallBreakpointActive ? smallViewportProps : {};
|
|
25
|
-
const closeIcon = useMemo(() => {
|
|
26
|
-
return XMark ;
|
|
27
|
-
}, [enableModernizedComponents]);
|
|
28
23
|
return jsx(RadixDialog.Close, {
|
|
29
24
|
ref: forwardedRef,
|
|
30
25
|
asChild: true,
|
|
@@ -32,7 +27,7 @@ const SidePanelClose = /*#__PURE__*/forwardRef(({
|
|
|
32
27
|
...rest,
|
|
33
28
|
"aria-label": ariaLabel,
|
|
34
29
|
className: styles.close,
|
|
35
|
-
icon: icon ||
|
|
30
|
+
icon: icon || XMark,
|
|
36
31
|
...finalProps
|
|
37
32
|
})
|
|
38
33
|
});
|
|
@@ -37,7 +37,6 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
|
|
|
37
37
|
[styles.dropShadowContent]: variant === 'dropShadowOverlay',
|
|
38
38
|
[styles.overlayContent]: isOverlayVariant
|
|
39
39
|
}, className),
|
|
40
|
-
"data-modern": 'true' ,
|
|
41
40
|
onInteractOutside: handleInteractOutside,
|
|
42
41
|
children: children
|
|
43
42
|
})
|
|
@@ -54,7 +53,6 @@ const SidePanelPersistentContent = /*#__PURE__*/forwardRef(({
|
|
|
54
53
|
return jsx("div", {
|
|
55
54
|
ref: forwardedRef,
|
|
56
55
|
className: clsx(styles.content, styles.contentNormal, styles.persistentContent, className),
|
|
57
|
-
"data-modern": 'true' ,
|
|
58
56
|
...props,
|
|
59
57
|
children: children
|
|
60
58
|
});
|
|
@@ -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--e8fc3","header":"bp_side_panel_module_header--e8fc3","headerShadow":"bp_side_panel_module_headerShadow--e8fc3","scrollableContainer":"bp_side_panel_module_scrollableContainer--e8fc3","persistentContent":"bp_side_panel_module_persistentContent--e8fc3","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--e8fc3","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--e8fc3","contentNormal":"bp_side_panel_module_contentNormal--e8fc3","contentLarge":"bp_side_panel_module_contentLarge--e8fc3","dropShadowContent":"bp_side_panel_module_dropShadowContent--e8fc3","close":"bp_side_panel_module_close--e8fc3","overlayContent":"bp_side_panel_module_overlayContent--e8fc3","overlay":"bp_side_panel_module_overlay--e8fc3","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--e8fc3","footer":"bp_side_panel_module_footer--e8fc3","footerShadow":"bp_side_panel_module_footerShadow--e8fc3","footerButton":"bp_side_panel_module_footerButton--e8fc3"};
|
|
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": "17.
|
|
3
|
+
"version": "17.18.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"dependencies": {
|
|
56
56
|
"@ariakit/react": "0.4.21",
|
|
57
57
|
"@ariakit/react-core": "0.4.21",
|
|
58
|
-
"@box/blueprint-web-assets": "^5.
|
|
58
|
+
"@box/blueprint-web-assets": "^5.11.0",
|
|
59
59
|
"@internationalized/date": "^3.12.0",
|
|
60
60
|
"@radix-ui/react-accordion": "1.1.2",
|
|
61
61
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
"devDependencies": {
|
|
87
87
|
"@box/box-test-client": "^3.2.7",
|
|
88
88
|
"@box/playwright-utils": "^2.8.5",
|
|
89
|
-
"@box/storybook-utils": "^1.
|
|
89
|
+
"@box/storybook-utils": "^1.3.0",
|
|
90
90
|
"@figma/code-connect": "1.4.4",
|
|
91
91
|
"@playwright/test": "1.46.1",
|
|
92
92
|
"@types/js-yaml": "^4.0.9",
|