@box/blueprint-web 17.11.5 → 17.12.1
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/avatar/avatar.js +2 -3
- package/dist/lib-esm/avatar/avatar.module.js +1 -1
- package/dist/lib-esm/avatar/consts.js +17 -17
- package/dist/lib-esm/components.css +364 -652
- package/dist/lib-esm/data-table/data-table.module.js +1 -1
- package/dist/lib-esm/index.css +364 -652
- package/dist/lib-esm/list-item/main.module.js +1 -1
- package/dist/lib-esm/primitives/notification/notification.module.js +1 -1
- package/dist/lib-esm/primitives/notification/private-notification-element.d.ts +2 -3
- package/dist/lib-esm/primitives/notification/private-notification-element.js +2 -6
- package/dist/lib-esm/status/consts.js +17 -17
- package/dist/lib-esm/status/status.js +0 -1
- package/dist/lib-esm/status/status.module.js +1 -1
- package/dist/lib-esm/tooltip/tooltip.js +4 -5
- package/dist/lib-esm/tooltip/tooltip.module.js +1 -1
- package/dist/lib-esm/tooltip/types.d.ts +0 -3
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--
|
|
2
|
+
var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--ec435","resizableTableContainer":"bp_main_module_resizableTableContainer--ec435","resizableTable":"bp_main_module_resizableTable--ec435","tableHeader":"bp_main_module_tableHeader--ec435","column":"bp_main_module_column--ec435","columnNameWrapper":"bp_main_module_columnNameWrapper--ec435","columnName":"bp_main_module_columnName--ec435","focusVisible":"bp_main_module_focusVisible--ec435","sorted":"bp_main_module_sorted--ec435","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--ec435","columnResizer":"bp_main_module_columnResizer--ec435","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--ec435","droppableColumn":"bp_main_module_droppableColumn--ec435","actionColumn":"bp_main_module_actionColumn--ec435","hiddenColumn":"bp_main_module_hiddenColumn--ec435","tableBody":"bp_main_module_tableBody--ec435","row":"bp_main_module_row--ec435","cell":"bp_main_module_cell--ec435","actionsWrapper":"bp_main_module_actionsWrapper--ec435","actionChildren":"bp_main_module_actionChildren--ec435","actions":"bp_main_module_actions--ec435","isCellHidden":"bp_main_module_isCellHidden--ec435"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"viewport":"bp_notification_module_viewport--
|
|
2
|
+
var styles = {"viewport":"bp_notification_module_viewport--595c9","root":"bp_notification_module_root--595c9","container":"bp_notification_module_container--595c9","messageRow":"bp_notification_module_messageRow--595c9","withButtons":"bp_notification_module_withButtons--595c9","info":"bp_notification_module_info--595c9","success":"bp_notification_module_success--595c9","warning":"bp_notification_module_warning--595c9","error":"bp_notification_module_error--595c9","typeIconContainer":"bp_notification_module_typeIconContainer--595c9","typeIcon":"bp_notification_module_typeIcon--595c9","text":"bp_notification_module_text--595c9","contentButtonSection":"bp_notification_module_contentButtonSection--595c9","contentButtons":"bp_notification_module_contentButtons--595c9","closeButtonSection":"bp_notification_module_closeButtonSection--595c9","closeButton":"bp_notification_module_closeButton--595c9"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
|
|
2
2
|
import * as Toast from '@radix-ui/react-toast';
|
|
3
3
|
import { type ToastProps } from '@radix-ui/react-toast';
|
|
4
4
|
import { type ComponentProps, type ReactNode } from 'react';
|
|
@@ -27,8 +27,7 @@ export interface PrivateNotificationElementProps extends ToastProps {
|
|
|
27
27
|
/** This props should be Notification.Buttons only */
|
|
28
28
|
children?: ReactNode;
|
|
29
29
|
}
|
|
30
|
-
export declare const
|
|
31
|
-
export declare const createIconProps: (iconLabel: string) => ComponentProps<typeof AlertBadge>;
|
|
30
|
+
export declare const createIconProps: (iconLabel: string) => ComponentProps<typeof AlertCircle>;
|
|
32
31
|
export declare const getIcon: (iconLabel: string, variant: PrivateNotificationElementProps["variant"]) => ReactNode;
|
|
33
32
|
/**
|
|
34
33
|
* A base component mounted on a page when addNotification is invoked.
|
|
@@ -1,6 +1,4 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import '@box/blueprint-web-assets/icons/Fill';
|
|
3
|
-
import '@box/blueprint-web-assets/icons/Line';
|
|
4
2
|
import { XMark, AlertTriangle, InformationCircle, CheckmarkCircle, AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
|
|
5
3
|
import { bpIconIconOnLight, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
6
4
|
import * as Toast from '@radix-ui/react-toast';
|
|
@@ -59,12 +57,10 @@ function PrivateNotificationElement(props) {
|
|
|
59
57
|
children,
|
|
60
58
|
...rest
|
|
61
59
|
} = props;
|
|
62
|
-
const
|
|
63
|
-
const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant) , [typeIconAriaLabel, variant, enableModernizedComponents]);
|
|
60
|
+
const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant]);
|
|
64
61
|
return jsx(Toast.Root, {
|
|
65
62
|
...rest,
|
|
66
63
|
className: clsx(styles.root, styles[variant]),
|
|
67
|
-
"data-modern": 'true' ,
|
|
68
64
|
onOpenChange: onClose,
|
|
69
65
|
open: open,
|
|
70
66
|
type: sensitivity,
|
|
@@ -96,7 +92,7 @@ function PrivateNotificationElement(props) {
|
|
|
96
92
|
children: jsx(IconButton, {
|
|
97
93
|
"aria-label": closeButtonAriaLabel,
|
|
98
94
|
className: styles.closeButton,
|
|
99
|
-
icon: XMark
|
|
95
|
+
icon: XMark,
|
|
100
96
|
onClick: onClose
|
|
101
97
|
})
|
|
102
98
|
})
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { bpSurfaceStatusSurfaceGreen, bpSurfaceStatusSurfaceDarkBlue, bpSurfaceStatusSurfaceLightBlue, bpSurfaceStatusSurfacePurple, bpSurfaceStatusSurfaceRed, bpSurfaceStatusSurfaceOrange, bpSurfaceStatusSurfaceYellow, bpSurfaceStatusSurfaceGray } from '@box/blueprint-web-assets/tokens/tokens';
|
|
2
2
|
|
|
3
3
|
const colorsMap = {
|
|
4
|
-
SurfaceStatusSurfaceGray,
|
|
5
|
-
SurfaceStatusSurfaceYellow,
|
|
6
|
-
SurfaceStatusSurfaceOrange,
|
|
7
|
-
SurfaceStatusSurfaceRed,
|
|
8
|
-
SurfaceStatusSurfacePurple,
|
|
9
|
-
SurfaceStatusSurfaceLightBlue,
|
|
10
|
-
SurfaceStatusSurfaceDarkBlue,
|
|
11
|
-
SurfaceStatusSurfaceGreen
|
|
4
|
+
SurfaceStatusSurfaceGray: bpSurfaceStatusSurfaceGray,
|
|
5
|
+
SurfaceStatusSurfaceYellow: bpSurfaceStatusSurfaceYellow,
|
|
6
|
+
SurfaceStatusSurfaceOrange: bpSurfaceStatusSurfaceOrange,
|
|
7
|
+
SurfaceStatusSurfaceRed: bpSurfaceStatusSurfaceRed,
|
|
8
|
+
SurfaceStatusSurfacePurple: bpSurfaceStatusSurfacePurple,
|
|
9
|
+
SurfaceStatusSurfaceLightBlue: bpSurfaceStatusSurfaceLightBlue,
|
|
10
|
+
SurfaceStatusSurfaceDarkBlue: bpSurfaceStatusSurfaceDarkBlue,
|
|
11
|
+
SurfaceStatusSurfaceGreen: bpSurfaceStatusSurfaceGreen
|
|
12
12
|
};
|
|
13
13
|
const colorToTokenMap = {
|
|
14
|
-
[
|
|
15
|
-
[
|
|
16
|
-
[
|
|
17
|
-
[
|
|
18
|
-
[
|
|
19
|
-
[
|
|
20
|
-
[
|
|
21
|
-
[
|
|
14
|
+
[bpSurfaceStatusSurfaceGray]: 'SurfaceStatusSurfaceGray',
|
|
15
|
+
[bpSurfaceStatusSurfaceYellow]: 'SurfaceStatusSurfaceYellow',
|
|
16
|
+
[bpSurfaceStatusSurfaceOrange]: 'SurfaceStatusSurfaceOrange',
|
|
17
|
+
[bpSurfaceStatusSurfaceRed]: 'SurfaceStatusSurfaceRed',
|
|
18
|
+
[bpSurfaceStatusSurfacePurple]: 'SurfaceStatusSurfacePurple',
|
|
19
|
+
[bpSurfaceStatusSurfaceLightBlue]: 'SurfaceStatusSurfaceLightBlue',
|
|
20
|
+
[bpSurfaceStatusSurfaceDarkBlue]: 'SurfaceStatusSurfaceDarkBlue',
|
|
21
|
+
[bpSurfaceStatusSurfaceGreen]: 'SurfaceStatusSurfaceGreen'
|
|
22
22
|
};
|
|
23
23
|
const colors = Object.values(colorsMap);
|
|
24
24
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"status":"bp_status_module_status--
|
|
2
|
+
var styles = {"status":"bp_status_module_status--8267f","reverse":"bp_status_module_reverse--8267f","circle":"bp_status_module_circle--8267f","text":"bp_status_module_text--8267f","maxContainer":"bp_status_module_maxContainer--8267f","interactiveStatus":"bp_status_module_interactiveStatus--8267f","colorSurfaceStatusSurfaceGray":"bp_status_module_colorSurfaceStatusSurfaceGray--8267f","colorSurfaceStatusSurfaceYellow":"bp_status_module_colorSurfaceStatusSurfaceYellow--8267f","colorSurfaceStatusSurfaceOrange":"bp_status_module_colorSurfaceStatusSurfaceOrange--8267f","colorSurfaceStatusSurfaceRed":"bp_status_module_colorSurfaceStatusSurfaceRed--8267f","colorSurfaceStatusSurfacePurple":"bp_status_module_colorSurfaceStatusSurfacePurple--8267f","colorSurfaceStatusSurfaceLightBlue":"bp_status_module_colorSurfaceStatusSurfaceLightBlue--8267f","colorSurfaceStatusSurfaceDarkBlue":"bp_status_module_colorSurfaceStatusSurfaceDarkBlue--8267f","colorSurfaceStatusSurfaceGreen":"bp_status_module_colorSurfaceStatusSurfaceGreen--8267f"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { bpSpace040 } from '@box/blueprint-web-assets/tokens/px-tokens';
|
|
3
3
|
import * as RadixTooltip from '@radix-ui/react-tooltip';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import React__default, { useContext } from 'react';
|
|
@@ -18,7 +18,7 @@ import styles from './tooltip.module.js';
|
|
|
18
18
|
* **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement, HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
|
|
19
19
|
*
|
|
20
20
|
*/
|
|
21
|
-
const defaultCollisionPadding = parseInt(
|
|
21
|
+
const defaultCollisionPadding = parseInt(bpSpace040, 10);
|
|
22
22
|
const Tooltip = props => {
|
|
23
23
|
const {
|
|
24
24
|
children,
|
|
@@ -90,14 +90,13 @@ const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, r
|
|
|
90
90
|
className,
|
|
91
91
|
...rest
|
|
92
92
|
} = props;
|
|
93
|
-
return
|
|
93
|
+
return jsx(RadixTooltip.Content, {
|
|
94
94
|
...rest,
|
|
95
95
|
ref: ref,
|
|
96
96
|
className: clsx(styles.content, styles[variant], className),
|
|
97
97
|
collisionPadding: collisionPadding,
|
|
98
|
-
"data-modern": 'true' ,
|
|
99
98
|
sideOffset: 3,
|
|
100
|
-
children:
|
|
99
|
+
children: children
|
|
101
100
|
});
|
|
102
101
|
});
|
|
103
102
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"content":"bp_tooltip_module_content--
|
|
2
|
+
var styles = {"content":"bp_tooltip_module_content--733b4","standard":"bp_tooltip_module_standard--733b4","error":"bp_tooltip_module_error--733b4","bpTooltipTopSlideEnter":"bp_tooltip_module_bpTooltipTopSlideEnter--733b4","bpTooltipFadeIn":"bp_tooltip_module_bpTooltipFadeIn--733b4","bpTooltipRightSlideEnter":"bp_tooltip_module_bpTooltipRightSlideEnter--733b4","bpTooltipBottomSlideEnter":"bp_tooltip_module_bpTooltipBottomSlideEnter--733b4","bpTooltipLeftSlideEnter":"bp_tooltip_module_bpTooltipLeftSlideEnter--733b4","bpTooltipTopSlideExit":"bp_tooltip_module_bpTooltipTopSlideExit--733b4","bpTooltipFadeOut":"bp_tooltip_module_bpTooltipFadeOut--733b4","bpTooltipRightSlideExit":"bp_tooltip_module_bpTooltipRightSlideExit--733b4","bpTooltipBottomSlideExit":"bp_tooltip_module_bpTooltipBottomSlideExit--733b4","bpTooltipLeftSlideExit":"bp_tooltip_module_bpTooltipLeftSlideExit--733b4"};
|
|
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.12.1",
|
|
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.10.
|
|
58
|
+
"@box/blueprint-web-assets": "^5.10.14",
|
|
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.2.
|
|
89
|
+
"@box/storybook-utils": "^1.2.58",
|
|
90
90
|
"@figma/code-connect": "1.4.4",
|
|
91
91
|
"@playwright/test": "1.46.1",
|
|
92
92
|
"@types/js-yaml": "^4.0.9",
|