@box/blueprint-web 12.106.1 → 12.107.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.
@@ -33,11 +33,11 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
33
33
  const breakpoint = useBreakpoint();
34
34
  const isMobile = isResponsiveEnabled || breakpoint <= Breakpoint.Medium;
35
35
  // If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
36
- const shouldTruncateCrumbs = crumbs?.length > 7;
37
- const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
36
+ const shouldTruncateCrumbs = crumbs.length > 7;
37
+ const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && shouldTruncateCrumbs;
38
38
  // Get the current page (last crumb) and all ancestors (all crumbs except last)
39
- const currentPage = crumbs?.[crumbs.length - 1];
40
- const ancestorCrumbs = crumbs?.slice(0, -1);
39
+ const currentPage = crumbs[crumbs.length - 1];
40
+ const ancestorCrumbs = crumbs.slice(0, -1);
41
41
  return jsx("nav", {
42
42
  ref: forwardedRef,
43
43
  "aria-label": breadcrumbAriaLabel,
@@ -57,7 +57,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
57
57
  width: getSeparatorSize(size)
58
58
  })]
59
59
  }), isMobile && crumbs && currentPage && jsxs(Fragment, {
60
- children: [jsxs("li", {
60
+ children: [ancestorCrumbs.length > 0 && jsxs("li", {
61
61
  className: styles.pageLink,
62
62
  children: [jsxs(DropdownMenu.Root, {
63
63
  children: [jsx(DropdownMenu.Trigger, {
@@ -68,7 +68,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
68
68
  })
69
69
  }), jsx(DropdownMenu.Content, {
70
70
  align: "start",
71
- children: ancestorCrumbs?.map(crumb => jsx(DropdownMenu.Item, {
71
+ children: ancestorCrumbs.map(crumb => jsx(DropdownMenu.Item, {
72
72
  onSelect: handlePageLinkClick(crumb.id),
73
73
  children: jsx(Text, {
74
74
  as: "span",
@@ -134,7 +134,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
134
134
  onPageLinkClick: onPageLinkClick,
135
135
  size: size
136
136
  })]
137
- }), !isMobile && !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
137
+ }), !isMobile && !shouldUseEllipsisTruncation && crumbs.map((crumb, index) => {
138
138
  return jsx(PageLink, {
139
139
  crumb: crumb,
140
140
  isInteractive: isInteractive,
@@ -2087,7 +2087,7 @@
2087
2087
  .bp_dropdown_menu_module_menuCloseButton--6b9f5{
2088
2088
  grid-area:close;
2089
2089
  }
2090
- .bp_icon_button_module_iconButton--06ef3[data-modern=false]{
2090
+ .bp_icon_button_module_iconButton--3acef[data-modern=false]{
2091
2091
  --icon-button-radius:var(--radius-2);
2092
2092
  --icon-button-surface-disabled:var(--surface-cta-surface-icon-disabled);
2093
2093
  --icon-button-gray:var(--gray-50);
@@ -2113,7 +2113,7 @@
2113
2113
  --icon-button-size-x-small:var(--size-6);
2114
2114
  }
2115
2115
 
2116
- .bp_icon_button_module_iconButton--06ef3[data-modern=true]{
2116
+ .bp_icon_button_module_iconButton--3acef[data-modern=true]{
2117
2117
  --icon-button-radius:var(--bp-radius-10);
2118
2118
  --icon-button-surface-disabled:var(--bp-surface-cta-surface-icon);
2119
2119
  --icon-button-gray:var(--bp-gray-50);
@@ -2139,100 +2139,101 @@
2139
2139
  --icon-button-size-x-small:var(--bp-size-060);
2140
2140
  }
2141
2141
 
2142
- .bp_icon_button_module_iconButton--06ef3{
2142
+ .bp_icon_button_module_iconButton--3acef{
2143
2143
  align-items:center;
2144
2144
  border-radius:var(--icon-button-radius);
2145
2145
  border-style:none;
2146
2146
  cursor:pointer;
2147
2147
  display:flex;
2148
+ flex-shrink:0;
2148
2149
  justify-content:center;
2149
2150
  padding:0;
2150
2151
  }
2151
- .bp_icon_button_module_iconButton--06ef3[aria-disabled=true]{
2152
+ .bp_icon_button_module_iconButton--3acef[aria-disabled=true]{
2152
2153
  background:var(--icon-button-surface-disabled);
2153
2154
  opacity:.3;
2154
2155
  }
2155
- .bp_icon_button_module_iconButton--06ef3[aria-disabled=true] .bp_icon_button_module_icon--06ef3 *{
2156
+ .bp_icon_button_module_iconButton--3acef[aria-disabled=true] .bp_icon_button_module_icon--3acef *{
2156
2157
  fill:var(--icon-button-gray);
2157
2158
  }
2158
- .bp_icon_button_module_iconButton--06ef3:focus-visible{
2159
+ .bp_icon_button_module_iconButton--3acef:focus-visible{
2159
2160
  outline:none;
2160
2161
  }
2161
- .bp_icon_button_module_iconButton--06ef3[data-focus-visible]{
2162
+ .bp_icon_button_module_iconButton--3acef[data-focus-visible]{
2162
2163
  outline:var(--icon-button-border) solid var(--icon-button-outline);
2163
2164
  }
2164
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3{
2165
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef{
2165
2166
  background:var(--icon-button-surface);
2166
2167
  }
2167
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3 .bp_icon_button_module_icon--06ef3 *{
2168
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef .bp_icon_button_module_icon--3acef *{
2168
2169
  fill:var(--icon-button-icon);
2169
2170
  }
2170
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-focus-visible]{
2171
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef:hover,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef[data-focus-visible]{
2171
2172
  background:var(--icon-button-surface-hover);
2172
2173
  }
2173
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
2174
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef:hover .bp_icon_button_module_icon--3acef *,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef[data-focus-visible] .bp_icon_button_module_icon--3acef *{
2174
2175
  fill:var(--icon-button-icon-hover);
2175
2176
  }
2176
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-active]{
2177
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef:active,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef[data-active]{
2177
2178
  background:var(--icon-button-surface-pressed);
2178
2179
  }
2179
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_default--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
2180
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef:active .bp_icon_button_module_icon--3acef *,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_default--3acef[data-active] .bp_icon_button_module_icon--3acef *{
2180
2181
  fill:var(--icon-button-icon-pressed);
2181
2182
  }
2182
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3{
2183
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_icon-logo--3acef{
2183
2184
  background:var(--icon-button-surface);
2184
2185
  }
2185
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3[data-focus-visible]{
2186
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_icon-logo--3acef:hover,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_icon-logo--3acef[data-focus-visible]{
2186
2187
  background:var(--icon-button-surface-hover);
2187
2188
  }
2188
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_icon-logo--06ef3[data-active]{
2189
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_icon-logo--3acef:active,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_icon-logo--3acef[data-active]{
2189
2190
  background:var(--icon-button-surface-pressed);
2190
2191
  }
2191
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3{
2192
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef{
2192
2193
  background:var(--icon-button-surface);
2193
2194
  }
2194
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3 .bp_icon_button_module_icon--06ef3 *{
2195
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef .bp_icon_button_module_icon--3acef *{
2195
2196
  fill:var(--icon-button-icon-high-contrast);
2196
2197
  }
2197
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-focus-visible]{
2198
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef:hover,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef[data-focus-visible]{
2198
2199
  background:var(--icon-button-surface-hover);
2199
2200
  }
2200
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
2201
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef:hover .bp_icon_button_module_icon--3acef *,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef[data-focus-visible] .bp_icon_button_module_icon--3acef *{
2201
2202
  fill:var(--icon-button-icon-high-contrast-hover);
2202
2203
  }
2203
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-active]{
2204
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef:active,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef[data-active]{
2204
2205
  background:var(--icon-button-surface-pressed);
2205
2206
  }
2206
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_high-contrast--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
2207
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef:active .bp_icon_button_module_icon--3acef *,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_high-contrast--3acef[data-active] .bp_icon_button_module_icon--3acef *{
2207
2208
  fill:var(--icon-button-icon-high-contrast-pressed);
2208
2209
  }
2209
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3{
2210
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef{
2210
2211
  background:var(--icon-button-surface-utility);
2211
2212
  }
2212
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3 .bp_icon_button_module_icon--06ef3 *{
2213
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef .bp_icon_button_module_icon--3acef *{
2213
2214
  fill:var(--icon-button-icon-utility);
2214
2215
  }
2215
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:hover,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-focus-visible]{
2216
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef:hover,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef[data-focus-visible]{
2216
2217
  background:var(--icon-button-surface-utility-hover);
2217
2218
  }
2218
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:hover .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-focus-visible] .bp_icon_button_module_icon--06ef3 *{
2219
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef:hover .bp_icon_button_module_icon--3acef *,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef[data-focus-visible] .bp_icon_button_module_icon--3acef *{
2219
2220
  fill:var(--icon-button-icon-utility-hover);
2220
2221
  }
2221
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:active,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-active]{
2222
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef:active,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef[data-active]{
2222
2223
  background:var(--icon-button-surface-utility-pressed);
2223
2224
  }
2224
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3:active .bp_icon_button_module_icon--06ef3 *,.bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small-utility--06ef3[data-active] .bp_icon_button_module_icon--06ef3 *{
2225
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef:active .bp_icon_button_module_icon--3acef *,.bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small-utility--3acef[data-active] .bp_icon_button_module_icon--3acef *{
2225
2226
  fill:var(--icon-button-icon-utility-pressed);
2226
2227
  }
2227
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_large--06ef3{
2228
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_large--3acef{
2228
2229
  height:var(--icon-button-size-large);
2229
2230
  width:var(--icon-button-size-large);
2230
2231
  }
2231
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_small--06ef3{
2232
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_small--3acef{
2232
2233
  height:var(--icon-button-size-small);
2233
2234
  width:var(--icon-button-size-small);
2234
2235
  }
2235
- .bp_icon_button_module_iconButton--06ef3.bp_icon_button_module_x-small--06ef3{
2236
+ .bp_icon_button_module_iconButton--3acef.bp_icon_button_module_x-small--3acef{
2236
2237
  height:var(--icon-button-size-x-small);
2237
2238
  width:var(--icon-button-size-x-small);
2238
2239
  }
@@ -40,6 +40,7 @@ export { InputChip } from './input-chip/input-chip.js';
40
40
  export { LargeList } from './large-list-item/index.js';
41
41
  export { ActionCell, Cell, Column, DropIndicator, Row, Table, TableBody, TableHeader } from './list-item/list-item.js';
42
42
  export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
43
+ export { AlertModal } from './modal/alert-modal.js';
43
44
  export { Modal } from './modal/modal.js';
44
45
  export { NavigationMenu } from './navigation-menu/index.js';
45
46
  export { Page } from './page/index.js';
@@ -0,0 +1,20 @@
1
+ import { type AlertModalProps } from './alert-modal.types';
2
+ export declare const AlertModal: {
3
+ ({ children, closeButtonAriaLabel, container, heading, onOpenChange, open, size, textContent, ...props }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
4
+ displayName: string;
5
+ } & {
6
+ PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
7
+ children?: string | string[];
8
+ icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
9
+ }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
10
+ children?: string | string[];
11
+ icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
12
+ }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
13
+ SecondaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
14
+ children?: string | string[];
15
+ icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
16
+ }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof import("../primitives/base-button").Loading, never>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
17
+ children?: string | string[];
18
+ icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
19
+ }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
20
+ };
@@ -0,0 +1,89 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import { useId, Children, isValidElement } from 'react';
3
+ import { Modal } from './modal.js';
4
+ import { ModalFooter } from './modal-footer.js';
5
+
6
+ // Validate that the children are valid AlertModal.SecondaryButton and AlertModal.PrimaryButton
7
+ // If not, throw an error
8
+ const validateChildren = children => {
9
+ const childrenArray = Children.toArray(children);
10
+ if (childrenArray.length !== 2) {
11
+ throw new Error('AlertModal requires exactly two children: AlertModal.SecondaryButton followed by AlertModal.PrimaryButton');
12
+ }
13
+ const [firstChild, secondChild] = childrenArray;
14
+ if (! /*#__PURE__*/isValidElement(firstChild) || firstChild.type !== ModalFooter.SecondaryButton) {
15
+ throw new Error('AlertModal requires the first child to be AlertModal.SecondaryButton');
16
+ }
17
+ if (! /*#__PURE__*/isValidElement(secondChild) || secondChild.type !== ModalFooter.PrimaryButton) {
18
+ throw new Error('AlertModal requires the second child to be AlertModal.PrimaryButton');
19
+ }
20
+ };
21
+ /**
22
+ * AlertModal is a specialized modal component that enforces specific requirements:
23
+ * - Always has a heading/title (required)
24
+ * - Always has a primary and secondary button in the footer
25
+ * - Only accepts text as content
26
+ * - Has role="alertdialog" for accessibility
27
+ * - Announces the content of the modal to the user when it is opened
28
+ * - Always includes a close button with i18n support
29
+ *
30
+ * @example
31
+ * <AlertModal
32
+ * open={isOpen}
33
+ * onOpenChange={setIsOpen}
34
+ * heading="Delete Item"
35
+ * textContent="Are you sure you want to delete this item?"
36
+ * closeButtonAriaLabel={formatMessage(commonMessages.closeButtonText)}
37
+ * >
38
+ * <AlertModal.SecondaryButton onClick={() => setIsOpen(false)}>
39
+ * Cancel
40
+ * </AlertModal.SecondaryButton>
41
+ * <AlertModal.PrimaryButton onClick={handleDelete}>
42
+ * Delete
43
+ * </AlertModal.PrimaryButton>
44
+ * </AlertModal>
45
+ */
46
+ const AlertModalComponent = ({
47
+ children,
48
+ closeButtonAriaLabel,
49
+ container,
50
+ heading,
51
+ onOpenChange,
52
+ open,
53
+ size = 'small',
54
+ textContent,
55
+ ...props
56
+ }) => {
57
+ const textContentId = useId();
58
+ validateChildren(children);
59
+ return jsx(Modal, {
60
+ onOpenChange: onOpenChange,
61
+ open: open,
62
+ ...props,
63
+ children: jsxs(Modal.Content, {
64
+ "aria-describedby": textContentId,
65
+ container: container,
66
+ role: "alertdialog",
67
+ size: size,
68
+ children: [jsx(Modal.Header, {
69
+ children: heading
70
+ }), jsx(Modal.ScrollableContainer, {
71
+ children: jsx(Modal.Body, {
72
+ id: textContentId,
73
+ children: textContent
74
+ })
75
+ }), jsx(Modal.Footer, {
76
+ children: children
77
+ }), jsx(Modal.Close, {
78
+ "aria-label": closeButtonAriaLabel
79
+ })]
80
+ })
81
+ });
82
+ };
83
+ AlertModalComponent.displayName = 'AlertModal';
84
+ const AlertModal = Object.assign(AlertModalComponent, {
85
+ PrimaryButton: ModalFooter.PrimaryButton,
86
+ SecondaryButton: ModalFooter.SecondaryButton
87
+ });
88
+
89
+ export { AlertModal };
@@ -0,0 +1,15 @@
1
+ import { type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
2
+ import { type ReactNode } from 'react';
3
+ import { type ModalContentSize } from './types';
4
+ export interface AlertModalProps extends Omit<DialogProps, 'modal'>, Pick<DialogPortalProps, 'container'> {
5
+ /** The text content to display in the modal body. Should be an i18n string (e.g., from formatMessage). */
6
+ textContent: string;
7
+ /** Heading/title for the modal (required) */
8
+ heading: string;
9
+ /** Children must include AlertModal.PrimaryButton and AlertModal.SecondaryButton */
10
+ children: ReactNode;
11
+ /** Size of the modal content */
12
+ size?: ModalContentSize;
13
+ /** Aria label for the close button. Should be an i18n string. */
14
+ closeButtonAriaLabel: string;
15
+ }
@@ -1,2 +1,4 @@
1
+ export { AlertModal } from './alert-modal';
2
+ export type { AlertModalProps } from './alert-modal.types';
1
3
  export { Modal } from './modal';
2
4
  export type { ModalCloseProps, ModalContentProps, ModalLoadingProps, ModalProps, ModalTriggerProps } from './types';
@@ -1,4 +1,4 @@
1
1
  import '../../index.css';
2
- var styles = {"iconButton":"bp_icon_button_module_iconButton--06ef3","icon":"bp_icon_button_module_icon--06ef3","default":"bp_icon_button_module_default--06ef3","icon-logo":"bp_icon_button_module_icon-logo--06ef3","high-contrast":"bp_icon_button_module_high-contrast--06ef3","small-utility":"bp_icon_button_module_small-utility--06ef3","large":"bp_icon_button_module_large--06ef3","small":"bp_icon_button_module_small--06ef3","x-small":"bp_icon_button_module_x-small--06ef3"};
2
+ var styles = {"iconButton":"bp_icon_button_module_iconButton--3acef","icon":"bp_icon_button_module_icon--3acef","default":"bp_icon_button_module_default--3acef","icon-logo":"bp_icon_button_module_icon-logo--3acef","high-contrast":"bp_icon_button_module_high-contrast--3acef","small-utility":"bp_icon_button_module_small-utility--3acef","large":"bp_icon_button_module_large--3acef","small":"bp_icon_button_module_small--3acef","x-small":"bp_icon_button_module_x-small--3acef"};
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": "12.106.1",
3
+ "version": "12.107.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.88.2",
50
+ "@box/blueprint-web-assets": "^4.88.4",
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.14.30",
80
+ "@box/storybook-utils": "^0.14.32",
81
81
  "@types/react": "^18.0.0",
82
82
  "@types/react-dom": "^18.0.0",
83
83
  "react": "^18.3.0",