@box/blueprint-web 12.106.2 → 12.107.0

package/dist/lib-esm/breadcrumb/breadcrumb.js

@@ -33,11 +33,11 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const breakpoint = useBreakpoint();
   const isMobile = isResponsiveEnabled || breakpoint <= Breakpoint.Medium;
   // If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
-  const shouldTruncateCrumbs = crumbs?.length > 7;
-  const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
+  const shouldTruncateCrumbs = crumbs.length > 7;
+  const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && shouldTruncateCrumbs;
   // Get the current page (last crumb) and all ancestors (all crumbs except last)
-  const currentPage = crumbs?.[crumbs.length - 1];
-  const ancestorCrumbs = crumbs?.slice(0, -1);
+  const currentPage = crumbs[crumbs.length - 1];
+  const ancestorCrumbs = crumbs.slice(0, -1);
   return jsx("nav", {
     ref: forwardedRef,
     "aria-label": breadcrumbAriaLabel,
@@ -57,7 +57,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           width: getSeparatorSize(size)
         })]
       }), isMobile && crumbs && currentPage && jsxs(Fragment, {
-        children: [jsxs("li", {
+        children: [ancestorCrumbs.length > 0 && jsxs("li", {
           className: styles.pageLink,
           children: [jsxs(DropdownMenu.Root, {
             children: [jsx(DropdownMenu.Trigger, {
@@ -68,7 +68,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
               })
             }), jsx(DropdownMenu.Content, {
               align: "start",
-              children: ancestorCrumbs?.map(crumb => jsx(DropdownMenu.Item, {
+              children: ancestorCrumbs.map(crumb => jsx(DropdownMenu.Item, {
                 onSelect: handlePageLinkClick(crumb.id),
                 children: jsx(Text, {
                   as: "span",
@@ -134,7 +134,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           onPageLinkClick: onPageLinkClick,
           size: size
         })]
-      }), !isMobile && !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
+      }), !isMobile && !shouldUseEllipsisTruncation && crumbs.map((crumb, index) => {
         return jsx(PageLink, {
           crumb: crumb,
           isInteractive: isInteractive,

package/dist/lib-esm/index.js

@@ -40,6 +40,7 @@ export { InputChip } from './input-chip/input-chip.js';
 export { LargeList } from './large-list-item/index.js';
 export { ActionCell, Cell, Column, DropIndicator, Row, Table, TableBody, TableHeader } from './list-item/list-item.js';
 export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
+export { AlertModal } from './modal/alert-modal.js';
 export { Modal } from './modal/modal.js';
 export { NavigationMenu } from './navigation-menu/index.js';
 export { Page } from './page/index.js';

package/dist/lib-esm/modal/alert-modal.d.ts

@@ -0,0 +1,20 @@
+import { type AlertModalProps } from './alert-modal.types';
+export declare const AlertModal: {
+    ({ children, closeButtonAriaLabel, container, heading, onOpenChange, open, size, textContent, ...props }: AlertModalProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+} & {
+    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> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "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> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    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> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "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> & {
+        children?: string | string[];
+        icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>>;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+};

package/dist/lib-esm/modal/alert-modal.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId, Children, isValidElement } from 'react';
+import { Modal } from './modal.js';
+import { ModalFooter } from './modal-footer.js';
+
+// Validate that the children are valid AlertModal.SecondaryButton and AlertModal.PrimaryButton
+// If not, throw an error
+const validateChildren = children => {
+  const childrenArray = Children.toArray(children);
+  if (childrenArray.length !== 2) {
+    throw new Error('AlertModal requires exactly two children: AlertModal.SecondaryButton followed by AlertModal.PrimaryButton');
+  }
+  const [firstChild, secondChild] = childrenArray;
+  if (! /*#__PURE__*/isValidElement(firstChild) || firstChild.type !== ModalFooter.SecondaryButton) {
+    throw new Error('AlertModal requires the first child to be AlertModal.SecondaryButton');
+  }
+  if (! /*#__PURE__*/isValidElement(secondChild) || secondChild.type !== ModalFooter.PrimaryButton) {
+    throw new Error('AlertModal requires the second child to be AlertModal.PrimaryButton');
+  }
+};
+/**
+ * AlertModal is a specialized modal component that enforces specific requirements:
+ * - Always has a heading/title (required)
+ * - Always has a primary and secondary button in the footer
+ * - Only accepts text as content
+ * - Has role="alertdialog" for accessibility
+ * - Announces the content of the modal to the user when it is opened
+ * - Always includes a close button with i18n support
+ *
+ * @example
+ * <AlertModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   heading="Delete Item"
+ *   textContent="Are you sure you want to delete this item?"
+ *   closeButtonAriaLabel={formatMessage(commonMessages.closeButtonText)}
+ * >
+ *   <AlertModal.SecondaryButton onClick={() => setIsOpen(false)}>
+ *     Cancel
+ *   </AlertModal.SecondaryButton>
+ *   <AlertModal.PrimaryButton onClick={handleDelete}>
+ *     Delete
+ *   </AlertModal.PrimaryButton>
+ * </AlertModal>
+ */
+const AlertModalComponent = ({
+  children,
+  closeButtonAriaLabel,
+  container,
+  heading,
+  onOpenChange,
+  open,
+  size = 'small',
+  textContent,
+  ...props
+}) => {
+  const textContentId = useId();
+  validateChildren(children);
+  return jsx(Modal, {
+    onOpenChange: onOpenChange,
+    open: open,
+    ...props,
+    children: jsxs(Modal.Content, {
+      "aria-describedby": textContentId,
+      container: container,
+      role: "alertdialog",
+      size: size,
+      children: [jsx(Modal.Header, {
+        children: heading
+      }), jsx(Modal.ScrollableContainer, {
+        children: jsx(Modal.Body, {
+          id: textContentId,
+          children: textContent
+        })
+      }), jsx(Modal.Footer, {
+        children: children
+      }), jsx(Modal.Close, {
+        "aria-label": closeButtonAriaLabel
+      })]
+    })
+  });
+};
+AlertModalComponent.displayName = 'AlertModal';
+const AlertModal = Object.assign(AlertModalComponent, {
+  PrimaryButton: ModalFooter.PrimaryButton,
+  SecondaryButton: ModalFooter.SecondaryButton
+});
+
+export { AlertModal };

package/dist/lib-esm/modal/alert-modal.types.d.ts

@@ -0,0 +1,15 @@
+import { type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
+import { type ReactNode } from 'react';
+import { type ModalContentSize } from './types';
+export interface AlertModalProps extends Omit<DialogProps, 'modal'>, Pick<DialogPortalProps, 'container'> {
+    /** The text content to display in the modal body. Should be an i18n string (e.g., from formatMessage). */
+    textContent: string;
+    /** Heading/title for the modal (required) */
+    heading: string;
+    /** Children must include AlertModal.PrimaryButton and AlertModal.SecondaryButton */
+    children: ReactNode;
+    /** Size of the modal content */
+    size?: ModalContentSize;
+    /** Aria label for the close button. Should be an i18n string. */
+    closeButtonAriaLabel: string;
+}

package/dist/lib-esm/modal/index.d.ts

@@ -1,2 +1,4 @@
+export { AlertModal } from './alert-modal';
+export type { AlertModalProps } from './alert-modal.types';
 export { Modal } from './modal';
 export type { ModalCloseProps, ModalContentProps, ModalLoadingProps, ModalProps, ModalTriggerProps } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.106.2",
+    "version": "12.107.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.88.3",
+        "@box/blueprint-web-assets": "^4.88.4",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.14.31",
+        "@box/storybook-utils": "^0.14.32",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",