@box/blueprint-web 17.22.0 → 17.22.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.
- package/dist/lib-esm/components.css +154 -106
- package/dist/lib-esm/index.css +154 -106
- package/dist/lib-esm/modal/index.d.ts +1 -1
- package/dist/lib-esm/modal/modal-description.d.ts +5 -0
- package/dist/lib-esm/modal/modal-description.js +17 -0
- package/dist/lib-esm/modal/modal-header.js +71 -24
- package/dist/lib-esm/modal/modal.module.js +1 -1
- package/dist/lib-esm/modal/types.d.ts +13 -3
- package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js +1 -1
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { AlertModal } from './alert-modal';
|
|
2
2
|
export type { AlertModalProps } from './alert-modal.types';
|
|
3
3
|
export { Modal } from './modal';
|
|
4
|
-
export type { ModalCloseProps, ModalContentProps, ModalLoadingProps, ModalProps, ModalTriggerProps } from './types';
|
|
4
|
+
export type { ModalCloseProps, ModalContentProps, ModalHeaderProps, ModalHeaderTitleAddonRenderProps, ModalLoadingProps, ModalProps, ModalTriggerProps, } from './types';
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { type ModalDescriptionProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* An accessible description to be announced along with the modal title.
|
|
4
|
+
*/
|
|
5
|
+
export declare const ModalDescription: import("react").ForwardRefExoticComponent<ModalDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import * as RadixDialog from '@radix-ui/react-dialog';
|
|
3
|
+
import { forwardRef } from 'react';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* An accessible description to be announced along with the modal title.
|
|
7
|
+
*/
|
|
8
|
+
const ModalDescription = /*#__PURE__*/forwardRef(({
|
|
9
|
+
children,
|
|
10
|
+
...props
|
|
11
|
+
}, forwardedRef) => jsx(RadixDialog.Description, {
|
|
12
|
+
...props,
|
|
13
|
+
ref: forwardedRef,
|
|
14
|
+
children: children
|
|
15
|
+
}));
|
|
16
|
+
|
|
17
|
+
export { ModalDescription };
|
|
@@ -1,51 +1,98 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef, cloneElement } from 'react';
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useRef, cloneElement } from 'react';
|
|
3
3
|
import { clsx } from 'clsx';
|
|
4
4
|
import { useScrollContext } from '../utils/scroll-context.js';
|
|
5
|
+
import { TooltipWrapper } from '../utils/TooltipWrapper.js';
|
|
6
|
+
import { useIsEllipsized } from '../utils/useIsEllipsized.js';
|
|
5
7
|
import { Text } from '../text/text.js';
|
|
8
|
+
import { ModalDescription } from './modal-description.js';
|
|
6
9
|
import { ModalTitle } from './modal-title.js';
|
|
7
10
|
import styles from './modal.module.js';
|
|
8
11
|
|
|
12
|
+
/**
|
|
13
|
+
* Title clamped next to an addon. When it gets cut off, it becomes focusable and reveals the full title in a tooltip.
|
|
14
|
+
* Rendered only with an addon, so modals without one don't observe the title size.
|
|
15
|
+
*/
|
|
16
|
+
const ModalHeaderTruncatableTitle = ({
|
|
17
|
+
children,
|
|
18
|
+
className
|
|
19
|
+
}) => {
|
|
20
|
+
const titleTextRef = useRef(null);
|
|
21
|
+
const isTitleEllipsized = useIsEllipsized(titleTextRef);
|
|
22
|
+
return jsx(TooltipWrapper, {
|
|
23
|
+
tooltipContent: children,
|
|
24
|
+
withTooltip: isTitleEllipsized,
|
|
25
|
+
children: jsx(Text, {
|
|
26
|
+
ref: titleTextRef,
|
|
27
|
+
as: "h2",
|
|
28
|
+
className: className,
|
|
29
|
+
color: "textOnLightDefault",
|
|
30
|
+
variant: "titleLarge",
|
|
31
|
+
children: children
|
|
32
|
+
})
|
|
33
|
+
});
|
|
34
|
+
};
|
|
9
35
|
/**
|
|
10
36
|
* Header of the Modal
|
|
11
37
|
*/
|
|
12
38
|
const ModalHeader = /*#__PURE__*/forwardRef(({
|
|
39
|
+
backButton,
|
|
13
40
|
children,
|
|
14
41
|
className,
|
|
42
|
+
renderTitleAddon,
|
|
15
43
|
subtitle,
|
|
16
|
-
backButton,
|
|
17
44
|
...rest
|
|
18
45
|
}, forwardedRef) => {
|
|
19
46
|
const {
|
|
20
47
|
isScrolledUnderHeader
|
|
21
48
|
} = useScrollContext();
|
|
49
|
+
const titleContainerRef = useRef(null);
|
|
22
50
|
const headerClasses = clsx({
|
|
23
|
-
[styles.headerDividerLine]: isScrolledUnderHeader
|
|
51
|
+
[styles.headerDividerLine]: isScrolledUnderHeader,
|
|
52
|
+
[styles.modalHeaderWithAddon]: renderTitleAddon
|
|
24
53
|
}, styles.modalHeader);
|
|
54
|
+
const title = jsx(ModalTitle, {
|
|
55
|
+
...rest,
|
|
56
|
+
ref: forwardedRef,
|
|
57
|
+
asChild: true,
|
|
58
|
+
children: jsxs("div", {
|
|
59
|
+
className: renderTitleAddon ? styles.modalTitleLabel : styles.modalTitle,
|
|
60
|
+
children: [renderTitleAddon ? jsx(ModalHeaderTruncatableTitle, {
|
|
61
|
+
className: clsx(styles.modalTitleText, className),
|
|
62
|
+
children: children
|
|
63
|
+
}) : jsx(Text, {
|
|
64
|
+
as: "h2",
|
|
65
|
+
className: className,
|
|
66
|
+
color: "textOnLightDefault",
|
|
67
|
+
variant: "titleLarge",
|
|
68
|
+
children: children
|
|
69
|
+
}), subtitle && jsx(Text, {
|
|
70
|
+
as: "h3",
|
|
71
|
+
color: "textOnLightSecondary",
|
|
72
|
+
variant: "subtitle",
|
|
73
|
+
children: subtitle
|
|
74
|
+
})]
|
|
75
|
+
})
|
|
76
|
+
});
|
|
25
77
|
return jsxs("div", {
|
|
26
78
|
className: headerClasses,
|
|
27
79
|
children: [backButton ? /*#__PURE__*/cloneElement(backButton, {
|
|
28
80
|
className: styles.backButton
|
|
29
|
-
}) : null,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
className:
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
})
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
variant: "subtitle",
|
|
45
|
-
children: subtitle
|
|
46
|
-
})]
|
|
47
|
-
})
|
|
48
|
-
})]
|
|
81
|
+
}) : null, renderTitleAddon ? jsxs("div", {
|
|
82
|
+
ref: titleContainerRef,
|
|
83
|
+
className: clsx(styles.modalTitle, styles.modalTitleWithAddon, {
|
|
84
|
+
[styles.modalTitleWithSubtitle]: subtitle
|
|
85
|
+
}),
|
|
86
|
+
children: [title, jsx(ModalDescription, {
|
|
87
|
+
asChild: true,
|
|
88
|
+
children: jsx("div", {
|
|
89
|
+
className: styles.modalTitleAddon,
|
|
90
|
+
children: renderTitleAddon({
|
|
91
|
+
containerRef: titleContainerRef
|
|
92
|
+
})
|
|
93
|
+
})
|
|
94
|
+
})]
|
|
95
|
+
}) : title]
|
|
49
96
|
});
|
|
50
97
|
});
|
|
51
98
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"overlay":"bp_modal_module_overlay--
|
|
2
|
+
var styles = {"overlay":"bp_modal_module_overlay--aa987","headerDividerLine":"bp_modal_module_headerDividerLine--aa987","footerDividerLine":"bp_modal_module_footerDividerLine--aa987","content":"bp_modal_module_content--aa987","smallSizeModal":"bp_modal_module_smallSizeModal--aa987","mediumSizeModal":"bp_modal_module_mediumSizeModal--aa987","largeSizeModal":"bp_modal_module_largeSizeModal--aa987","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--aa987","loadingContainerActive":"bp_modal_module_loadingContainerActive--aa987","popup_bounce_in":"bp_modal_module_popup_bounce_in--aa987","bpModalEnter":"bp_modal_module_bpModalEnter--aa987","bpModalExit":"bp_modal_module_bpModalExit--aa987","scrollableContainer":"bp_modal_module_scrollableContainer--aa987","close":"bp_modal_module_close--aa987","onColor":"bp_modal_module_onColor--aa987","backButton":"bp_modal_module_backButton--aa987","modalHeader":"bp_modal_module_modalHeader--aa987","modalTitle":"bp_modal_module_modalTitle--aa987","modalHeaderWithAddon":"bp_modal_module_modalHeaderWithAddon--aa987","modalTitleWithAddon":"bp_modal_module_modalTitleWithAddon--aa987","modalTitleLabel":"bp_modal_module_modalTitleLabel--aa987","modalTitleAddon":"bp_modal_module_modalTitleAddon--aa987","modalTitleText":"bp_modal_module_modalTitleText--aa987","modalTitleWithSubtitle":"bp_modal_module_modalTitleWithSubtitle--aa987","body":"bp_modal_module_body--aa987","footer":"bp_modal_module_footer--aa987","footerButton":"bp_modal_module_footerButton--aa987","loadingContainer":"bp_modal_module_loadingContainer--aa987","loading":"bp_modal_module_loading--aa987","loadingOverlay":"bp_modal_module_loadingOverlay--aa987","loadingContent":"bp_modal_module_loadingContent--aa987","loadingContentVisible":"bp_modal_module_loadingContentVisible--aa987"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { type DialogContentProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
|
|
2
|
-
import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
|
|
1
|
+
import { type DialogContentProps, type DialogDescriptionProps, type DialogPortalProps, type DialogProps, type DialogTitleProps } from '@radix-ui/react-dialog';
|
|
2
|
+
import { type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type ReactElement, type ReactNode, type RefObject, type SVGProps } from 'react';
|
|
3
3
|
import { type LoadingIndicatorProps } from '../loading-indicator/loading-indicator';
|
|
4
4
|
import { type IconButtonProps } from '../primitives/icon-button';
|
|
5
5
|
export type ModalProps = DialogProps;
|
|
@@ -38,6 +38,10 @@ export interface ModalTitleProps extends DialogTitleProps {
|
|
|
38
38
|
/** Specifies if title should be visually hidden */
|
|
39
39
|
visuallyHidden?: boolean;
|
|
40
40
|
}
|
|
41
|
+
export interface ModalDescriptionProps extends DialogDescriptionProps {
|
|
42
|
+
/** Content of the Description element */
|
|
43
|
+
children: ReactNode;
|
|
44
|
+
}
|
|
41
45
|
export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
|
|
42
46
|
/** Content of the Body element */
|
|
43
47
|
children: ReactNode;
|
|
@@ -50,11 +54,17 @@ export interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
50
54
|
/** Content of the Footer element */
|
|
51
55
|
children: ReactNode;
|
|
52
56
|
}
|
|
57
|
+
export interface ModalHeaderTitleAddonRenderProps {
|
|
58
|
+
/** Ref to the title area container, for observing changes to its size. */
|
|
59
|
+
containerRef: RefObject<HTMLDivElement>;
|
|
60
|
+
}
|
|
53
61
|
export interface ModalHeaderProps extends HTMLAttributes<HTMLHeadingElement> {
|
|
54
62
|
backButton?: ReactElement;
|
|
55
63
|
/** Content of the Header element */
|
|
56
64
|
children: ReactNode;
|
|
57
|
-
/**
|
|
65
|
+
/** Renders noninteractive content adjacent to, or below, the modal title. */
|
|
66
|
+
renderTitleAddon?: (props: ModalHeaderTitleAddonRenderProps) => ReactNode;
|
|
67
|
+
/** Content of the Subtitle element */
|
|
58
68
|
subtitle?: ReactNode;
|
|
59
69
|
}
|
|
60
70
|
export interface ModalLoadingProps extends HTMLAttributes<HTMLDivElement> {
|
|
@@ -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--93197","withLabel":"bp_select_menu_grid_option_module_withLabel--93197","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--93197","optionButton":"bp_select_menu_grid_option_module_optionButton--93197","labeled":"bp_select_menu_grid_option_module_labeled--93197","labelContent":"bp_select_menu_grid_option_module_labelContent--93197","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--93197","text":"bp_select_menu_grid_option_module_text--93197","text--large":"bp_select_menu_grid_option_module_text--large--93197","text--default":"bp_select_menu_grid_option_module_text--default--93197","description":"bp_select_menu_grid_option_module_description--93197","iconContainer":"bp_select_menu_grid_option_module_iconContainer--93197","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--93197","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--93197","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--93197","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--93197","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--93197","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--93197","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--93197","active":"bp_select_menu_grid_option_module_active--93197","dragging":"bp_select_menu_grid_option_module_dragging--93197","labeled--large":"bp_select_menu_grid_option_module_labeled--large--93197","disabled":"bp_select_menu_grid_option_module_disabled--93197","square":"bp_select_menu_grid_option_module_square--93197","outlineHost":"bp_select_menu_grid_option_module_outlineHost--93197","circle":"bp_select_menu_grid_option_module_circle--93197","loading":"bp_select_menu_grid_option_module_loading--93197","color":"bp_select_menu_grid_option_module_color--93197","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--93197"};
|
|
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.22.
|
|
3
|
+
"version": "17.22.2",
|
|
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.11.
|
|
58
|
+
"@box/blueprint-web-assets": "^5.11.11",
|
|
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.4.
|
|
89
|
+
"@box/storybook-utils": "^1.4.6",
|
|
90
90
|
"@figma/code-connect": "1.4.4",
|
|
91
91
|
"@playwright/test": "1.46.1",
|
|
92
92
|
"@types/js-yaml": "^4.0.9",
|