@box/blueprint-web 18.2.1 → 18.3.0

package/dist/lib-esm/primitives/notification/private-notification-element-animated.js

@@ -0,0 +1,198 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { XMark } from '@box/blueprint-web-assets/icons/Medium';
+import { bpDurationLong } from '@box/blueprint-web-assets/tokens/tokens';
+import * as Toast from '@radix-ui/react-toast';
+import clsx from 'clsx';
+import { useMemo, useCallback, useRef, useEffect, useState } from 'react';
+import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
+import { IconButton } from '../icon-button/icon-button.js';
+import { useNotificationExitAnimation, handleNotificationExitTransitionEnd } from './hooks/use-notification-exit-animation.js';
+import { isOpenNotification } from './notification-stack-utils.js';
+import stackStyles from './notification-stack.module.js';
+import styles from './notification.module.js';
+import { getIcon } from './private-notification-element.js';
+import { truncateNotificationCopy } from './truncate-notification-copy.js';
+
+/**
+ * Stacked-deck toast. Loaded only from the animated viewport chunk so the flat
+ * Notification path stays off the first-paint graph.
+ */
+function AnimatedPrivateNotificationElement(props) {
+  const {
+    variant,
+    styledText,
+    sensitivity,
+    open,
+    onClose,
+    closeButtonAriaLabel,
+    typeIconAriaLabel,
+    children,
+    isAnimationEnabled = false,
+    isEntering = false,
+    depth = 0,
+    expandOffset = 0,
+    isBeyondVisibleDepth = false,
+    layerRef,
+    stackId,
+    onExitStart,
+    onEscapeKeyDown,
+    onTransitionEnd,
+    style,
+    ...rest
+  } = props;
+  const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant]);
+  // Radix's own viewport-wide pause-on-hover/focus (`Toast.Provider`'s `toast.viewportPause`/
+  // `viewportResume` events) already covers pausing auto-dismiss while the user is interacting
+  // with the stack — no bespoke pause context is ported from EndUserApp here.
+  const setOpen = useCallback(nextOpen => {
+    const resolved = typeof nextOpen === 'function' ? nextOpen(open) : nextOpen;
+    if (!resolved) {
+      onClose?.();
+    }
+  }, [onClose, open]);
+  // Snapshot layout before the viewport pops this layer out of flow (it re-renders with offset 0).
+  const liveLayoutRef = useRef({
+    depth,
+    expandOffset
+  });
+  const frozenLayoutRef = useRef({
+    depth,
+    expandOffset
+  });
+  liveLayoutRef.current = {
+    depth,
+    expandOffset
+  };
+  const notifyExitStart = useCallback(() => {
+    frozenLayoutRef.current = liveLayoutRef.current;
+    if (stackId) {
+      onExitStart?.(stackId);
+    }
+  }, [onExitStart, stackId]);
+  const {
+    radixOpen,
+    isExiting,
+    hasExitStyles,
+    completeExit,
+    handleOpenChange
+  } = useNotificationExitAnimation({
+    open: open ?? true,
+    setOpen,
+    isAnimationEnabled,
+    onExitStart: notifyExitStart
+  });
+  // Esc fires Radix's own onEscapeKeyDown before handleClose runs, so this reliably
+  // captures intent even though Esc and the close button both end up at the same
+  // onOpenChange(false) call. Reset once the exit styles clear so the next dismissal
+  // (of a different kind) isn't misattributed. Composes with the caller-provided
+  // onEscapeKeyDown (pulled out of `rest` so it isn't clobbered by this one) — it runs
+  // first and can call preventDefault() to suppress both Radix's close and this attribution.
+  const exitReasonRef = useRef(null);
+  const handleEscapeKeyDown = useCallback(event => {
+    onEscapeKeyDown?.(event);
+    if (!event.defaultPrevented) {
+      exitReasonRef.current = 'escape';
+    }
+  }, [onEscapeKeyDown]);
+  useEffect(() => {
+    if (!hasExitStyles) {
+      exitReasonRef.current = null;
+    }
+  }, [hasExitStyles]);
+  const layoutDepth = isExiting ? frozenLayoutRef.current.depth : depth;
+  const layoutExpandOffset = isExiting ? frozenLayoutRef.current.expandOffset : expandOffset;
+  // `data-entering` is the "from" state; one frame later it flips off so CSS can transition in.
+  // `isEnterTransitioning` stays true through --bp-duration-long so the destination uses that duration.
+  const [hasEntered, setHasEntered] = useState(!isEntering);
+  const [isEnterTransitioning, setIsEnterTransitioning] = useState(isEntering);
+  useEffect(() => {
+    // If this toast stops being the entering one before the rAF, settle immediately
+    // so it isn't stranded in the off-screen "from" state.
+    if (!isEntering) {
+      setHasEntered(true);
+      return undefined;
+    }
+    const frame = requestAnimationFrame(() => setHasEntered(true));
+    return () => cancelAnimationFrame(frame);
+  }, [isEntering]);
+  useEffect(() => {
+    if (!isEnterTransitioning || !hasEntered) {
+      return undefined;
+    }
+    const timeout = window.setTimeout(() => setIsEnterTransitioning(false), Number.parseFloat(bpDurationLong));
+    return () => window.clearTimeout(timeout);
+  }, [hasEntered, isEnterTransitioning]);
+  // Exit completion must not be blockable by a consumer `preventDefault()`.
+  const handleTransitionEnd = useMemo(() => composeEventHandlers(onTransitionEnd, event => handleNotificationExitTransitionEnd(event, isExiting, completeExit), {
+    checkForDefaultPrevented: false
+  }), [completeExit, isExiting, onTransitionEnd]);
+  const layerStyle = isAnimationEnabled ? {
+    '--notification-stack-depth': layoutDepth,
+    '--notification-stack-expand-offset': `${layoutExpandOffset}px`
+  } : undefined;
+  return jsx(Toast.Root, {
+    ...rest,
+    ref: layerRef,
+    className: clsx(styles.root, styles[variant], {
+      [stackStyles.stackLayer]: isAnimationEnabled
+    }),
+    "data-beyond-visible-depth": isAnimationEnabled && isOpenNotification({
+      open
+    }) && isBeyondVisibleDepth ? 'true' : undefined,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
+    "data-front": isAnimationEnabled && isOpenNotification({
+      open
+    }) && layoutDepth === 0 ? 'true' : undefined,
+    "data-bp-exiting": hasExitStyles ? 'true' : undefined,
+    "data-bp-exit-reason": hasExitStyles ? exitReasonRef.current ?? undefined : undefined,
+    "data-enter-transition": isAnimationEnabled && isEnterTransitioning ? 'true' : undefined,
+    "data-entering": isAnimationEnabled && !hasEntered ? 'true' : undefined,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onTransitionEnd: handleTransitionEnd,
+    onOpenChange: handleOpenChange,
+    open: radixOpen,
+    style: {
+      ...style,
+      ...layerStyle
+    },
+    // Override Toast.Root's tabIndex={0} so a pointer hit cannot leave focus on the
+    // <li> and permanently pause TTL. Close / Action stay tabbable.
+    tabIndex: -1,
+    type: sensitivity,
+    children: jsxs("div", {
+      className: styles.container,
+      children: [jsx("div", {
+        className: styles.typeIconContainer,
+        children: iconComponent
+      }), jsxs("div", {
+        className: clsx(styles.messageRow, {
+          [styles.withButtons]: children
+        }),
+        children: [jsx("div", {
+          className: styles.text,
+          children: jsx(Toast.Description, {
+            children: truncateNotificationCopy(styledText)
+          })
+        }), jsx("div", {
+          className: styles.contentButtonSection,
+          children: jsx("div", {
+            className: styles.contentButtons,
+            children: children
+          })
+        })]
+      }), jsx("div", {
+        className: styles.closeButtonSection,
+        children: jsx(Toast.Close, {
+          asChild: true,
+          children: jsx(IconButton, {
+            "aria-label": closeButtonAriaLabel,
+            className: styles.closeButton,
+            icon: XMark
+          })
+        })
+      })]
+    })
+  });
+}
+
+export { AnimatedPrivateNotificationElement };

package/dist/lib-esm/primitives/notification/private-notification-element.d.ts

@@ -36,5 +36,8 @@ export declare const getIcon: (iconLabel: string, variant: PrivateNotificationEl
  * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/toast)
  *
  * **IMPORTANT**: Must be placed inside a single <b><NotificationProvider></b> singleton component provided by the app
+ *
+ * The stacked-deck motion variant lives in `private-notification-element-animated.tsx`
+ * and is loaded only after first paint when Notification animation is on.
  */
 export declare function PrivateNotificationElement(props: PrivateNotificationElementProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/primitives/notification/private-notification-element.js

@@ -44,6 +44,9 @@ const getIcon = (iconLabel, variant) => {
  * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/toast)
  *
  * **IMPORTANT**: Must be placed inside a single <b><NotificationProvider></b> singleton component provided by the app
+ *
+ * The stacked-deck motion variant lives in `private-notification-element-animated.tsx`
+ * and is loaded only after first paint when Notification animation is on.
  */
 function PrivateNotificationElement(props) {
   const {

package/dist/lib-esm/small-list-item/types.d.ts

@@ -4,5 +4,5 @@ export type SmallListActionsProps = BaseGridListActionsProps;
 export type SmallListHeaderProps = BaseGridListHeaderProps;
 export type SmallListThumbnailProps = BaseGridListThumbnailProps;
 export type SmallListSubtitleProps = BaseGridListSubtitleProps;
-export type SmallListProps = Omit<BaseGridListProps, 'layoutStyle'>;
+export type SmallListProps = Omit<BaseGridListProps, 'layoutStyle' | 'selectionVisibility'>;
 export type SmallListItemProps = BaseGridListItemProps;

package/dist/lib-esm/types/selection-visibility.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Whether a multi-select checkbox stays visible, or shows with the action buttons on hover.
+ */
+export type SelectionVisibility = 'hover' | 'always';

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item-actions.js

@@ -105,7 +105,8 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
   const {
     layoutStyle,
     selectionMode,
-    centerText
+    centerText,
+    selectionVisibility
   } = useBaseGridListContext();
   const {
     children,
@@ -129,11 +130,12 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
   const isGridV2 = layoutStyle === 'grid-v2';
   const isSelectionEnabled = selectionMode === 'multiple';
   const isRenderPropUsed = typeof children === 'function';
+  const alwaysShowSelection = selectionVisibility === 'always' && isSelectionEnabled;
   return jsxs(Fragment, {
     children: [jsx("div", {
       ...rest,
       ref: forkRef,
-      className: clsx(styles.actions, className),
+      className: clsx(styles.actions, alwaysShowSelection && styles.alwaysShowSelection, className),
       children: isList ? jsx(BaseListActions, {
         isSelectionCheckboxDisabled: isSelectionCheckboxDisabled,
         selectionEnabled: isSelectionEnabled,

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"smallList":"bp_base_grid_list_item_module_smallList--1ce37","smallListItem":"bp_base_grid_list_item_module_smallListItem--1ce37","loading":"bp_base_grid_list_item_module_loading--1ce37","thumbnail":"bp_base_grid_list_item_module_thumbnail--1ce37","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--1ce37","header":"bp_base_grid_list_item_module_header--1ce37","subtitle":"bp_base_grid_list_item_module_subtitle--1ce37","actions":"bp_base_grid_list_item_module_actions--1ce37","selection":"bp_base_grid_list_item_module_selection--1ce37","inner":"bp_base_grid_list_item_module_inner--1ce37","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--1ce37","largeList":"bp_base_grid_list_item_module_largeList--1ce37","largeListItem":"bp_base_grid_list_item_module_largeListItem--1ce37","fade":"bp_base_grid_list_item_module_fade--1ce37","description":"bp_base_grid_list_item_module_description--1ce37","snippet":"bp_base_grid_list_item_module_snippet--1ce37","snippetContent":"bp_base_grid_list_item_module_snippetContent--1ce37","gridList":"bp_base_grid_list_item_module_gridList--1ce37","gridListItem":"bp_base_grid_list_item_module_gridListItem--1ce37","statusPin":"bp_base_grid_list_item_module_statusPin--1ce37","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--1ce37","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--1ce37","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--1ce37","gridListV2":"bp_base_grid_list_item_module_gridListV2--1ce37","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--1ce37","droppableTarget":"bp_base_grid_list_item_module_droppableTarget--1ce37","noActions":"bp_base_grid_list_item_module_noActions--1ce37","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--1ce37","statusBadge":"bp_base_grid_list_item_module_statusBadge--1ce37","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--1ce37","textCentered":"bp_base_grid_list_item_module_textCentered--1ce37","innerCentered":"bp_base_grid_list_item_module_innerCentered--1ce37","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--1ce37","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--1ce37","gridListV2XSmallBordered":"bp_base_grid_list_item_module_gridListV2XSmallBordered--1ce37","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--1ce37","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--1ce37","listV2":"bp_base_grid_list_item_module_listV2--1ce37","listV2Item":"bp_base_grid_list_item_module_listV2Item--1ce37","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--1ce37","content":"bp_base_grid_list_item_module_content--1ce37","staticList":"bp_base_grid_list_item_module_staticList--1ce37","staticListItem":"bp_base_grid_list_item_module_staticListItem--1ce37"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--a9a55","smallListItem":"bp_base_grid_list_item_module_smallListItem--a9a55","loading":"bp_base_grid_list_item_module_loading--a9a55","thumbnail":"bp_base_grid_list_item_module_thumbnail--a9a55","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--a9a55","header":"bp_base_grid_list_item_module_header--a9a55","subtitle":"bp_base_grid_list_item_module_subtitle--a9a55","actions":"bp_base_grid_list_item_module_actions--a9a55","selection":"bp_base_grid_list_item_module_selection--a9a55","inner":"bp_base_grid_list_item_module_inner--a9a55","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--a9a55","largeList":"bp_base_grid_list_item_module_largeList--a9a55","largeListItem":"bp_base_grid_list_item_module_largeListItem--a9a55","fade":"bp_base_grid_list_item_module_fade--a9a55","description":"bp_base_grid_list_item_module_description--a9a55","snippet":"bp_base_grid_list_item_module_snippet--a9a55","snippetContent":"bp_base_grid_list_item_module_snippetContent--a9a55","gridList":"bp_base_grid_list_item_module_gridList--a9a55","gridListItem":"bp_base_grid_list_item_module_gridListItem--a9a55","statusPin":"bp_base_grid_list_item_module_statusPin--a9a55","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--a9a55","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--a9a55","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--a9a55","gridListV2":"bp_base_grid_list_item_module_gridListV2--a9a55","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--a9a55","droppableTarget":"bp_base_grid_list_item_module_droppableTarget--a9a55","noActions":"bp_base_grid_list_item_module_noActions--a9a55","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--a9a55","statusBadge":"bp_base_grid_list_item_module_statusBadge--a9a55","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--a9a55","alwaysShowSelection":"bp_base_grid_list_item_module_alwaysShowSelection--a9a55","textCentered":"bp_base_grid_list_item_module_textCentered--a9a55","innerCentered":"bp_base_grid_list_item_module_innerCentered--a9a55","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--a9a55","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--a9a55","gridListV2XSmallBordered":"bp_base_grid_list_item_module_gridListV2XSmallBordered--a9a55","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--a9a55","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--a9a55","listV2":"bp_base_grid_list_item_module_listV2--a9a55","listV2Item":"bp_base_grid_list_item_module_listV2Item--a9a55","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--a9a55","content":"bp_base_grid_list_item_module_content--a9a55","staticList":"bp_base_grid_list_item_module_staticList--a9a55","staticListItem":"bp_base_grid_list_item_module_staticListItem--a9a55"};
 
 export { styles as default };

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list.js

@@ -31,6 +31,7 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     layoutStyle,
     centerText = false,
     variant = 'large',
+    selectionVisibility = 'hover',
     ...rest
   } = props;
   const handleOnAction = onAction || noop;
@@ -45,8 +46,9 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     isInteractive,
     centerText,
     variant,
+    selectionVisibility,
     onAction: handleOnAction
-  }), [rest.selectionMode, rest.selectionBehavior, layoutStyle, isInteractive, centerText, variant, handleOnAction]);
+  }), [rest.selectionMode, rest.selectionBehavior, layoutStyle, isInteractive, centerText, variant, selectionVisibility, handleOnAction]);
   let layoutStyleClass;
   let layoutFinal;
   switch (layoutStyle) {

package/dist/lib-esm/util-components/base-grid-list-item/types.d.ts

@@ -2,6 +2,7 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import { type GridListItemProps, type GridListProps as RAGridListProps } from 'react-aria-components';
 import { type IconButtonProps } from '../../primitives/icon-button';
 import { type Modify } from '../../types/modify';
+import { type SelectionVisibility } from '../../types/selection-visibility';
 export interface BaseGridListLayoutProp {
     layoutStyle: 'grid' | 'grid-v2' | 'list' | 'list-v2' | 'small-list';
 }
@@ -44,6 +45,14 @@ interface CustomGridListProps extends BaseGridListLayoutProp {
      * @default 'large'
      */
     variant?: GridV2Variant;
+    /**
+     * Whether the multi-select checkbox stays visible, or shows with the action buttons.
+     * `always` keeps the checkbox visible. Action buttons still wait for hover, focus, selection, or an open menu.
+     * `hover` shows the checkbox and action buttons together on hover, focus, and selection.
+     * `always` is not supported with `selectionMode` `single`.
+     * @default 'hover'
+     */
+    selectionVisibility?: SelectionVisibility;
 }
 export declare enum ListLayout {
     GRID = "Grid List",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.2.1",
+    "version": "18.3.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.12.0",
+        "@box/blueprint-web-assets": "^5.12.2",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.12",
+        "@box/storybook-utils": "^1.4.14",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",