@box/blueprint-web 12.5.0 → 12.6.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/avatar/avatar.module.js +1 -1
- package/dist/lib-esm/badge/base-badge.module.js +1 -1
- package/dist/lib-esm/badge/icon-badge.d.ts +9 -0
- package/dist/lib-esm/badge/icon-badge.js +45 -15
- package/dist/lib-esm/card-tooltip/card-tooltip.module.js +1 -1
- package/dist/lib-esm/card-tooltip-v2/card-tooltip-v2.module.js +1 -1
- package/dist/lib-esm/checkbox/checkbox.module.js +1 -1
- package/dist/lib-esm/combobox/combobox.module.js +1 -1
- package/dist/lib-esm/combobox-group/combobox-group.module.js +1 -1
- package/dist/lib-esm/content-card/content-card.module.js +1 -1
- package/dist/lib-esm/data-table/cell/sticky-cell.module.js +1 -1
- package/dist/lib-esm/data-table/data-table.module.js +1 -1
- package/dist/lib-esm/date-picker/date-picker.module.js +1 -1
- package/dist/lib-esm/ellipsizable-text/ellipsizable-text.js +2 -20
- package/dist/lib-esm/empty-state/empty-state.module.js +1 -1
- package/dist/lib-esm/index.css +691 -659
- package/dist/lib-esm/loading-indicator/loading-indicator.module.js +1 -1
- package/dist/lib-esm/modal/modal.module.js +1 -1
- package/dist/lib-esm/page-section/page-section.module.js +1 -1
- package/dist/lib-esm/password-input/password-input.module.js +1 -1
- package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js +1 -1
- package/dist/lib-esm/primitives/calendar/calendar.module.js +1 -1
- package/dist/lib-esm/primitives/context-menu/context-menu.module.js +1 -1
- package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js +1 -1
- package/dist/lib-esm/primitives/notification/notification.module.js +1 -1
- package/dist/lib-esm/primitives/popover/popover.module.js +1 -1
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js +1 -1
- package/dist/lib-esm/primitives/tabs/tabs.module.js +1 -1
- package/dist/lib-esm/radio-group/radio-group.module.js +1 -1
- package/dist/lib-esm/select/select.module.js +1 -1
- package/dist/lib-esm/side-panel/side-panel.module.js +1 -1
- package/dist/lib-esm/switch/switch.module.js +1 -1
- package/dist/lib-esm/text/text.module.js +1 -1
- package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js +1 -1
- package/dist/lib-esm/text-area/text-area.module.js +1 -1
- package/dist/lib-esm/text-button/text-button.module.js +1 -1
- package/dist/lib-esm/text-input/text-input.module.js +1 -1
- package/dist/lib-esm/toolbar/toolbar.module.js +1 -1
- package/dist/lib-esm/util-components/interactive-icon/interactive-icon.module.js +1 -1
- package/dist/lib-esm/utils/TooltipWrapper.d.ts +7 -0
- package/dist/lib-esm/utils/TooltipWrapper.js +23 -0
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"avatar":"bp_avatar_module_avatar--
|
|
2
|
+
var styles = {"avatar":"bp_avatar_module_avatar--e0424","text":"bp_avatar_module_text--e0424","small":"bp_avatar_module_small--e0424","length-1":"bp_avatar_module_length-1--e0424","length-2":"bp_avatar_module_length-2--e0424","medium":"bp_avatar_module_medium--e0424","large":"bp_avatar_module_large--e0424","length-3":"bp_avatar_module_length-3--e0424","length-4":"bp_avatar_module_length-4--e0424","xlarge":"bp_avatar_module_xlarge--e0424","xxlarge":"bp_avatar_module_xxlarge--e0424","badge":"bp_avatar_module_badge--e0424","image":"bp_avatar_module_image--e0424","loading":"bp_avatar_module_loading--e0424","anonymousAvatar":"bp_avatar_module_anonymousAvatar--e0424"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--
|
|
2
|
+
var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--0697a","badge":"bp_base_badge_module_badge--0697a","smallSizeBadge":"bp_base_badge_module_smallSizeBadge--0697a","mediumSizeBadge":"bp_base_badge_module_mediumSizeBadge--0697a","largeSizeBadge":"bp_base_badge_module_largeSizeBadge--0697a","xlargeSizeBadge":"bp_base_badge_module_xlargeSizeBadge--0697a","xxlargeSizeBadge":"bp_base_badge_module_xxlargeSizeBadge--0697a","iconBadge":"bp_base_badge_module_iconBadge--0697a","interactiveWrapper":"bp_base_badge_module_interactiveWrapper--0697a","statusBadge":"bp_base_badge_module_statusBadge--0697a","numericBadge":"bp_base_badge_module_numericBadge--0697a","numericBadgeSingleDigit":"bp_base_badge_module_numericBadgeSingleDigit--0697a","numericBadgeMoreDigits":"bp_base_badge_module_numericBadgeMoreDigits--0697a"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
import { type BadgeProps } from './types';
|
|
2
|
+
export interface TooltipConfig {
|
|
3
|
+
tooltipContent: string | number;
|
|
4
|
+
tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
|
|
5
|
+
tooltipAriaLabel?: string;
|
|
6
|
+
}
|
|
2
7
|
export interface IconBadgeProps extends BadgeProps {
|
|
3
8
|
/** The variant of the icon badge. */
|
|
4
9
|
variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'alert-error' | 'status-pending';
|
|
10
|
+
/** Whether to show the tooltip when hovering over the badge. */
|
|
11
|
+
showTooltipOnBadge?: boolean;
|
|
12
|
+
/** The configuration for the tooltip, required if showTooltipOnBadge is true. */
|
|
13
|
+
tooltipConfig?: TooltipConfig;
|
|
5
14
|
}
|
|
6
15
|
export declare const IconBadgeVariants: Array<IconBadgeProps["variant"]>;
|
|
7
16
|
export declare const IconBadge: (props: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { FilePdf, FileDocs, FileSheets, FileImage, FileCanvas, FilePages, FileKeynote, FileBoxNote, FileVideo, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader, Alert } from '@box/blueprint-web-assets/icons/Fill';
|
|
3
3
|
import { ClockBadge } from '@box/blueprint-web-assets/icons/Line';
|
|
4
4
|
import { SurfaceBadgePdfSurface, GrayWhite, SurfaceBadgeDocsSurface, SurfaceBadgeSheetsSurface, SurfaceBadgeImageSurface, SurfaceBadgeCanvasSurface, SurfaceBadgePagesSurface, SurfaceBadgeKeynoteSurface, SurfaceBadgeBoxnoteSurface, Gray100, SurfaceBadgeVideoSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeRelaySurface, SurfaceBadgeMentionSurface, SurfaceBadgeTaskSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeExternalSurface, SurfaceBadgeAdminSurface, SurfaceBadgeCoadminSurface, SurfaceBadgePinSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgeOfflineSurface, SurfaceBadgeProgressSurface, SurfaceBadgeErrorSurface, Yellorange50 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
5
|
+
import clsx from 'clsx';
|
|
6
|
+
import mapValues from 'lodash/mapValues';
|
|
5
7
|
import { createElement } from 'react';
|
|
8
|
+
import { TooltipWrapper } from '../utils/TooltipWrapper.js';
|
|
6
9
|
import { BaseBadge } from './base-badge.js';
|
|
7
10
|
import styles from './base-badge.module.js';
|
|
8
11
|
import { useSingleChildCheck } from './utils/useSingleChildCheck.js';
|
|
@@ -159,7 +162,9 @@ const IconBadge = props => {
|
|
|
159
162
|
size,
|
|
160
163
|
variant,
|
|
161
164
|
children,
|
|
162
|
-
offset
|
|
165
|
+
offset,
|
|
166
|
+
showTooltipOnBadge,
|
|
167
|
+
tooltipConfig
|
|
163
168
|
} = props;
|
|
164
169
|
const {
|
|
165
170
|
backgroundColor,
|
|
@@ -169,21 +174,46 @@ const IconBadge = props => {
|
|
|
169
174
|
} = badgeVariantToIconProps[variant];
|
|
170
175
|
const iconSize = badgeSizeToIconSize[size];
|
|
171
176
|
useSingleChildCheck(children);
|
|
177
|
+
const offsetStyle = mapValues(offset, value => {
|
|
178
|
+
const num = Number(value);
|
|
179
|
+
return Number.isInteger(num) ? `${num - 1}px` : '0';
|
|
180
|
+
});
|
|
181
|
+
const badge = jsx(BaseBadge, {
|
|
182
|
+
backgroundColor: backgroundColor,
|
|
183
|
+
className: styles.iconBadge,
|
|
184
|
+
offset: showTooltipOnBadge ? undefined : offset,
|
|
185
|
+
size: size,
|
|
186
|
+
children: /*#__PURE__*/createElement(icon, {
|
|
187
|
+
color: iconColor,
|
|
188
|
+
height: iconSize,
|
|
189
|
+
width: iconSize,
|
|
190
|
+
role: 'presentation',
|
|
191
|
+
style: iconStyle || {}
|
|
192
|
+
})
|
|
193
|
+
});
|
|
194
|
+
if (showTooltipOnBadge && tooltipConfig) {
|
|
195
|
+
return jsxs("div", {
|
|
196
|
+
className: styles.badgeContainer,
|
|
197
|
+
children: [children, jsx(TooltipWrapper, {
|
|
198
|
+
tooltipContent: tooltipConfig.tooltipContent,
|
|
199
|
+
tooltipSide: tooltipConfig.tooltipSide,
|
|
200
|
+
withTooltip: showTooltipOnBadge,
|
|
201
|
+
children: jsx("div", {
|
|
202
|
+
"aria-label": tooltipConfig.tooltipAriaLabel,
|
|
203
|
+
className: clsx(styles.interactiveWrapper, styles[`${size}SizeBadge`]),
|
|
204
|
+
role: "button",
|
|
205
|
+
style: {
|
|
206
|
+
...offsetStyle
|
|
207
|
+
},
|
|
208
|
+
tabIndex: 0,
|
|
209
|
+
children: badge
|
|
210
|
+
})
|
|
211
|
+
})]
|
|
212
|
+
});
|
|
213
|
+
}
|
|
172
214
|
return jsxs("div", {
|
|
173
215
|
className: styles.badgeContainer,
|
|
174
|
-
children: [children,
|
|
175
|
-
backgroundColor: backgroundColor,
|
|
176
|
-
className: styles.iconBadge,
|
|
177
|
-
offset: offset,
|
|
178
|
-
size: size,
|
|
179
|
-
children: /*#__PURE__*/createElement(icon, {
|
|
180
|
-
color: iconColor,
|
|
181
|
-
height: iconSize,
|
|
182
|
-
width: iconSize,
|
|
183
|
-
role: 'presentation',
|
|
184
|
-
style: iconStyle || {}
|
|
185
|
-
})
|
|
186
|
-
})]
|
|
216
|
+
children: [children, badge]
|
|
187
217
|
});
|
|
188
218
|
};
|
|
189
219
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"content":"bp_card_tooltip_module_content--
|
|
2
|
+
var styles = {"content":"bp_card_tooltip_module_content--065eb","card":"bp_card_tooltip_module_card--065eb","slideDownAndFade":"bp_card_tooltip_module_slideDownAndFade--065eb","slideLeftAndFade":"bp_card_tooltip_module_slideLeftAndFade--065eb","slideUpAndFade":"bp_card_tooltip_module_slideUpAndFade--065eb","slideRightAndFade":"bp_card_tooltip_module_slideRightAndFade--065eb"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"content":"bp_card_tooltip_v2_module_content--
|
|
2
|
+
var styles = {"content":"bp_card_tooltip_v2_module_content--c9bf1","slideDownAndFade":"bp_card_tooltip_v2_module_slideDownAndFade--c9bf1","slideLeftAndFade":"bp_card_tooltip_v2_module_slideLeftAndFade--c9bf1","slideUpAndFade":"bp_card_tooltip_v2_module_slideUpAndFade--c9bf1","slideRightAndFade":"bp_card_tooltip_v2_module_slideRightAndFade--c9bf1"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"option":"bp_checkbox_module_option--
|
|
2
|
+
var styles = {"option":"bp_checkbox_module_option--41ccd","checkbox":"bp_checkbox_module_checkbox--41ccd","indicator":"bp_checkbox_module_indicator--41ccd","label":"bp_checkbox_module_label--41ccd","description":"bp_checkbox_module_description--41ccd","disabled":"bp_checkbox_module_disabled--41ccd"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_combobox_module_container--
|
|
2
|
+
var styles = {"container":"bp_combobox_module_container--25995","disabled":"bp_combobox_module_disabled--25995","label":"bp_combobox_module_label--25995","hiddenLabel":"bp_combobox_module_hiddenLabel--25995","comboboxContainer":"bp_combobox_module_comboboxContainer--25995","withComboboxButtons":"bp_combobox_module_withComboboxButtons--25995","error":"bp_combobox_module_error--25995","textInputWrapper":"bp_combobox_module_textInputWrapper--25995","textInput":"bp_combobox_module_textInput--25995","errorIcon":"bp_combobox_module_errorIcon--25995","comboboxButtons":"bp_combobox_module_comboboxButtons--25995","withChips":"bp_combobox_module_withChips--25995","inlineError":"bp_combobox_module_inlineError--25995","popover":"bp_combobox_module_popover--25995","option":"bp_combobox_module_option--25995","indicator":"bp_combobox_module_indicator--25995","indicatorIcon":"bp_combobox_module_indicatorIcon--25995","optionWithIndicator":"bp_combobox_module_optionWithIndicator--25995","loadingIndicator":"bp_combobox_module_loadingIndicator--25995","noResultOption":"bp_combobox_module_noResultOption--25995"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"container":"bp_combobox_group_module_container--
|
|
2
|
+
var styles = {"container":"bp_combobox_group_module_container--1671d","comboboxGroupcontainer":"bp_combobox_group_module_comboboxGroupcontainer--1671d","disabled":"bp_combobox_group_module_disabled--1671d","label":"bp_combobox_group_module_label--1671d","trailing":"bp_combobox_group_module_trailing--1671d","leading":"bp_combobox_group_module_leading--1671d","errorCombobox":"bp_combobox_group_module_errorCombobox--1671d","errorSelect":"bp_combobox_group_module_errorSelect--1671d","selectHasFocus":"bp_combobox_group_module_selectHasFocus--1671d","comboboxHasFocus":"bp_combobox_group_module_comboboxHasFocus--1671d"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"card":"bp_content_card_module_card--
|
|
2
|
+
var styles = {"card":"bp_content_card_module_card--c7d8a","cardContent":"bp_content_card_module_cardContent--c7d8a","cardTitle":"bp_content_card_module_cardTitle--c7d8a","cardTitleText":"bp_content_card_module_cardTitleText--c7d8a","cardBody":"bp_content_card_module_cardBody--c7d8a","cardBodyText":"bp_content_card_module_cardBodyText--c7d8a","cardIcon":"bp_content_card_module_cardIcon--c7d8a","cardBackground":"bp_content_card_module_cardBackground--c7d8a","image":"bp_content_card_module_image--c7d8a","ghostCard":"bp_content_card_module_ghostCard--c7d8a","iconGhost":"bp_content_card_module_iconGhost--c7d8a","titleGhost":"bp_content_card_module_titleGhost--c7d8a","bodyGhost":"bp_content_card_module_bodyGhost--c7d8a","pillGhostContainer":"bp_content_card_module_pillGhostContainer--c7d8a","pillGhost":"bp_content_card_module_pillGhost--c7d8a"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"stickyCell":"bp_sticky_cell_module_stickyCell--
|
|
2
|
+
var styles = {"stickyCell":"bp_sticky_cell_module_stickyCell--eef75","childrenWrapper":"bp_sticky_cell_module_childrenWrapper--eef75","verticalBar":"bp_sticky_cell_module_verticalBar--eef75","isScrolledX":"bp_sticky_cell_module_isScrolledX--eef75","stickyCellBelow":"bp_sticky_cell_module_stickyCellBelow--eef75","stickyCellOuterLeft":"bp_sticky_cell_module_stickyCellOuterLeft--eef75"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--
|
|
2
|
+
var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--2887a","isScrolledX":"bp_data_table_module_isScrolledX--2887a","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--2887a"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"datePicker":"bp_date_picker_module_datePicker--
|
|
2
|
+
var styles = {"datePicker":"bp_date_picker_module_datePicker--6c238","disabled":"bp_date_picker_module_disabled--6c238","label":"bp_date_picker_module_label--6c238","group":"bp_date_picker_module_group--6c238","groupContainer":"bp_date_picker_module_groupContainer--6c238","error":"bp_date_picker_module_error--6c238","groupContainerInput":"bp_date_picker_module_groupContainerInput--6c238","groupContainerInputSegment":"bp_date_picker_module_groupContainerInputSegment--6c238","button":"bp_date_picker_module_button--6c238","clear":"bp_date_picker_module_clear--6c238","inlineError":"bp_date_picker_module_inlineError--6c238","datePickerPopoverContent":"bp_date_picker_module_datePickerPopoverContent--6c238","slide":"bp_date_picker_module_slide--6c238"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,28 +1,10 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef, createRef } from 'react';
|
|
3
|
-
import { Focusable } from '../focusable/focusable.js';
|
|
4
3
|
import { Text } from '../text/text.js';
|
|
5
|
-
import {
|
|
4
|
+
import { TooltipWrapper } from '../utils/TooltipWrapper.js';
|
|
6
5
|
import { useForkRef } from '../utils/useForkRef.js';
|
|
7
6
|
import { useIsEllipsized } from '../utils/useIsEllipsized.js';
|
|
8
7
|
|
|
9
|
-
const Wrapper = ({
|
|
10
|
-
children,
|
|
11
|
-
withTooltip,
|
|
12
|
-
tooltipContent,
|
|
13
|
-
tooltipSide
|
|
14
|
-
}) => {
|
|
15
|
-
if (withTooltip) {
|
|
16
|
-
return jsx(Tooltip, {
|
|
17
|
-
content: tooltipContent,
|
|
18
|
-
side: tooltipSide,
|
|
19
|
-
children: jsx(Focusable, {
|
|
20
|
-
children: children
|
|
21
|
-
})
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
return children;
|
|
25
|
-
};
|
|
26
8
|
const EllipsizableText = /*#__PURE__*/forwardRef(({
|
|
27
9
|
children,
|
|
28
10
|
lineClamp,
|
|
@@ -32,7 +14,7 @@ const EllipsizableText = /*#__PURE__*/forwardRef(({
|
|
|
32
14
|
}, forwardedRef) => {
|
|
33
15
|
const textRef = /*#__PURE__*/createRef();
|
|
34
16
|
const isEllipsized = useIsEllipsized(textRef);
|
|
35
|
-
return jsx(
|
|
17
|
+
return jsx(TooltipWrapper, {
|
|
36
18
|
tooltipContent: children,
|
|
37
19
|
tooltipSide: tooltipSide,
|
|
38
20
|
withTooltip: isEllipsized,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"emptyState":"bp_empty_state_module_emptyState--
|
|
2
|
+
var styles = {"emptyState":"bp_empty_state_module_emptyState--9e914","illustration":"bp_empty_state_module_illustration--9e914","body":"bp_empty_state_module_body--9e914","heading":"bp_empty_state_module_heading--9e914","button":"bp_empty_state_module_button--9e914","small":"bp_empty_state_module_small--9e914"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|