@box/blueprint-web 16.20.6 → 16.20.7

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

@@ -59,10 +59,15 @@ const GridListActions = ({
   });
 };
 const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridListActionIconButton(props, forwardedRef) {
+  const {
+    layoutStyle,
+    variant
+  } = useBaseGridListContext();
+  const defaultSize = layoutStyle === 'grid-v2' && variant === 'x-small' ? 'x-small' : 'small';
   // DOM props are e.g handlers passed from DropdownTrigger
   const {
     onClick,
-    size = 'small',
+    size = defaultSize,
     ...domProps
   } = props;
   const render = useCallback(ariakitProps => {

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

@@ -6,6 +6,7 @@ import { noop } from '../../utils/noop.js';
 import { useDebounce } from '../../utils/use-debounce.js';
 import { useBaseGridListContext } from './base-grid-list.js';
 import styles from './base-grid-list-item.module.js';
+import { isGridV2SingleSelect, GRID_LIST_ITEM_NUMERIC_KEY_ATTR, isGridListContentTarget, getGridListItemKeyFromTarget } from './grid-list-interaction-utils.js';
 import { StaticGridListItem } from './static-grid-list-item.js';
 
 const BaseGridListItemContext = /*#__PURE__*/createContext({
@@ -20,12 +21,6 @@ const BaseGridListItemContext = /*#__PURE__*/createContext({
 const useBaseGridListItemContext = () => {
   return useContext(BaseGridListItemContext);
 };
-/**
- * CSS selectors for grid-v2 click handling (defined outside component to save bundle size).
- * Combined into single strings to reduce .closest() calls.
- */
-const CHECKBOX_SELECTOR = '[class*="selection"], input[type="checkbox"]';
-const INTERACTIVE_SELECTOR = 'button, a, input, [role="button"], [class*="actions"]';
 const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props, forwardedRef) {
   const {
     children,
@@ -38,7 +33,8 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
   const {
     layoutStyle,
     isInteractive,
-    onAction
+    onAction,
+    selectionMode
   } = useBaseGridListContext();
   const textValue = typeof rest.textValue === 'string' ? rest.textValue : undefined;
   const [isItemInteracted, setIsItemInteracted] = useState(false);
@@ -75,6 +71,15 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
   const isGridV2 = layoutStyle === 'grid-v2';
   const isListV2 = layoutStyle === 'list-v2';
   const isV2Layout = isGridV2 || isListV2;
+  const ownsAction = isGridV2SingleSelect(selectionMode, layoutStyle);
+  const fireAction = itemKey => {
+    // 0 is a valid React Aria key, so this cannot be a truthiness check. An empty string is
+    // still rejected: it only ever comes from a blank textValue fallback, never a real key.
+    if (!onAction || itemKey == null || itemKey === '') {
+      return;
+    }
+    onAction(itemKey);
+  };
   /**
    * V2 click behavior fix (applies to both grid-v2 and list-v2):
    *
@@ -87,24 +92,36 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
    * - Checkbox clicks: propagate → toggle selection
    * - Action buttons: propagate → button handlers fire
    * - Content/empty space: stop propagation, trigger onAction
+   *
+   * Grid-v2 single-select is the exception: content clicks propagate so React Aria selects the
+   * item, and onAction fires afterwards from handleContentClick.
    */
   const handleContentPointerDown = e => {
-    const target = e.target;
-    // Allow checkbox and interactive element clicks to propagate normally
-    if (target.closest(CHECKBOX_SELECTOR) || target.closest(INTERACTIVE_SELECTOR)) {
+    if (!isGridListContentTarget(e.target) || ownsAction) {
       return;
     }
     // Stop propagation for content clicks, then trigger onAction
     e.stopPropagation();
-    const itemKey = rest.id ?? textValue;
-    if (onAction && itemKey) {
-      onAction(itemKey);
+    fireAction(rest.id ?? textValue);
+  };
+  // Only single-select resolves keys through the DOM, so the marker is scoped to that path.
+  const numericKeyProps = ownsAction && typeof rest.id === 'number' ? {
+    [GRID_LIST_ITEM_NUMERIC_KEY_ATTR]: ''
+  } : {};
+  // Click runs after React Aria's press handling, so selection is already committed by now.
+  // The key comes from the DOM so that onAction and onSelectionChange always report the same
+  // React Aria collection key, including when the consumer relies on an auto-generated one.
+  const handleContentClick = e => {
+    if (!ownsAction || !isGridListContentTarget(e.target)) {
+      return;
     }
+    fireAction(getGridListItemKeyFromTarget(e.target) ?? rest.id ?? textValue);
   };
   // Only apply pointer handler for V2 layouts in interactive mode
   const pointerDownHandler = isV2Layout && isInteractive ? handleContentPointerDown : undefined;
   return jsx(GridListItem$1, {
     ...rest,
+    ...numericKeyProps,
     ref: forwardedRef,
     className: clsx(layoutStyleClass, {
       [styles.loading]: loading
@@ -121,8 +138,13 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
       children: [isListV2 && jsx("div", {
         "aria-hidden": "true",
         className: styles.listV2Divider
-      }), pointerDownHandler ? jsx("div", {
+      }), pointerDownHandler ?
+      // Not an independent control: keyboard activation is handled on BaseGridList,
+      // and a role/tabIndex here would add a competing tab stop inside the row.
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+      jsx("div", {
         className: isGridV2 ? styles.gridV2ClickShield : styles.listV2ClickShield,
+        onClick: handleContentClick,
         onPointerDownCapture: pointerDownHandler,
         children: children
       }) : children]

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--cebbc","smallListItem":"bp_base_grid_list_item_module_smallListItem--cebbc","header":"bp_base_grid_list_item_module_header--cebbc","subtitle":"bp_base_grid_list_item_module_subtitle--cebbc","loading":"bp_base_grid_list_item_module_loading--cebbc","thumbnail":"bp_base_grid_list_item_module_thumbnail--cebbc","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--cebbc","actions":"bp_base_grid_list_item_module_actions--cebbc","selection":"bp_base_grid_list_item_module_selection--cebbc","inner":"bp_base_grid_list_item_module_inner--cebbc","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--cebbc","largeList":"bp_base_grid_list_item_module_largeList--cebbc","largeListItem":"bp_base_grid_list_item_module_largeListItem--cebbc","fade":"bp_base_grid_list_item_module_fade--cebbc","description":"bp_base_grid_list_item_module_description--cebbc","snippet":"bp_base_grid_list_item_module_snippet--cebbc","snippetContent":"bp_base_grid_list_item_module_snippetContent--cebbc","gridList":"bp_base_grid_list_item_module_gridList--cebbc","gridListItem":"bp_base_grid_list_item_module_gridListItem--cebbc","statusPin":"bp_base_grid_list_item_module_statusPin--cebbc","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--cebbc","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--cebbc","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--cebbc","gridListV2":"bp_base_grid_list_item_module_gridListV2--cebbc","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--cebbc","noActions":"bp_base_grid_list_item_module_noActions--cebbc","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--cebbc","statusBadge":"bp_base_grid_list_item_module_statusBadge--cebbc","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--cebbc","textCentered":"bp_base_grid_list_item_module_textCentered--cebbc","innerCentered":"bp_base_grid_list_item_module_innerCentered--cebbc","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--cebbc","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--cebbc","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--cebbc","listV2":"bp_base_grid_list_item_module_listV2--cebbc","listV2Item":"bp_base_grid_list_item_module_listV2Item--cebbc","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--cebbc","content":"bp_base_grid_list_item_module_content--cebbc","staticList":"bp_base_grid_list_item_module_staticList--cebbc","staticListItem":"bp_base_grid_list_item_module_staticListItem--cebbc"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--84f7a","smallListItem":"bp_base_grid_list_item_module_smallListItem--84f7a","header":"bp_base_grid_list_item_module_header--84f7a","subtitle":"bp_base_grid_list_item_module_subtitle--84f7a","loading":"bp_base_grid_list_item_module_loading--84f7a","thumbnail":"bp_base_grid_list_item_module_thumbnail--84f7a","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--84f7a","actions":"bp_base_grid_list_item_module_actions--84f7a","selection":"bp_base_grid_list_item_module_selection--84f7a","inner":"bp_base_grid_list_item_module_inner--84f7a","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--84f7a","largeList":"bp_base_grid_list_item_module_largeList--84f7a","largeListItem":"bp_base_grid_list_item_module_largeListItem--84f7a","fade":"bp_base_grid_list_item_module_fade--84f7a","description":"bp_base_grid_list_item_module_description--84f7a","snippet":"bp_base_grid_list_item_module_snippet--84f7a","snippetContent":"bp_base_grid_list_item_module_snippetContent--84f7a","gridList":"bp_base_grid_list_item_module_gridList--84f7a","gridListItem":"bp_base_grid_list_item_module_gridListItem--84f7a","statusPin":"bp_base_grid_list_item_module_statusPin--84f7a","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--84f7a","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--84f7a","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--84f7a","gridListV2":"bp_base_grid_list_item_module_gridListV2--84f7a","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--84f7a","noActions":"bp_base_grid_list_item_module_noActions--84f7a","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--84f7a","statusBadge":"bp_base_grid_list_item_module_statusBadge--84f7a","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--84f7a","textCentered":"bp_base_grid_list_item_module_textCentered--84f7a","innerCentered":"bp_base_grid_list_item_module_innerCentered--84f7a","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--84f7a","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--84f7a","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--84f7a","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--84f7a","listV2":"bp_base_grid_list_item_module_listV2--84f7a","listV2Item":"bp_base_grid_list_item_module_listV2Item--84f7a","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--84f7a","content":"bp_base_grid_list_item_module_content--84f7a","staticList":"bp_base_grid_list_item_module_staticList--84f7a","staticListItem":"bp_base_grid_list_item_module_staticListItem--84f7a"};
 
 export { styles as default };

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

@@ -6,6 +6,7 @@ import { noop } from '../../utils/noop.js';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { isCtrlKeyPressed } from '../../utils/keyboardUtils.js';
 import styles from './base-grid-list-item.module.js';
+import { isGridV2SingleSelect, isGridListContentTarget, getGridListItemKeyFromTarget } from './grid-list-interaction-utils.js';
 import { StaticGridList } from './static-grid-list.js';
 
 const BaseGridListContext = /*#__PURE__*/createContext({
@@ -37,6 +38,10 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     enableModernizedComponents
   } = useBlueprintModernization();
   const handleOnAction = onAction || noop;
+  // In grid-v2 single-select, React Aria must only ever select on press: passing it onAction would
+  // make it treat rows as actionable and swallow the selection. Blueprint fires onAction itself,
+  // from the item's click shield and from the Enter handler below.
+  const ownsAction = isGridV2SingleSelect(rest.selectionMode, layoutStyle);
   const context = useMemo(() => ({
     selectionMode: rest.selectionMode,
     selectionBehavior: rest.selectionBehavior,
@@ -72,9 +77,33 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
   }
   const GridList$1 = isInteractive ? GridList : StaticGridList;
   const isGridV2 = layoutStyle === 'grid-v2';
-  const variantClass = isGridV2 && variant === 'small' ? styles.gridListV2Small : undefined;
+  let variantClass;
+  if (isGridV2) {
+    if (variant === 'small') {
+      variantClass = styles.gridListV2Small;
+    } else if (variant === 'x-small') {
+      variantClass = styles.gridListV2XSmall;
+    }
+  }
+  // React Aria's GridListItem filters onKeyDown out of its DOM props, so Enter -> onAction for
+  // grid-v2 single-select is handled here. It has to run on capture because React Aria's own
+  // press handling stops propagation, which would keep the event from bubbling back up. Selection
+  // is committed during that bubble phase, so onAction is deferred to a microtask to stay ordered
+  // after it.
+  const handleKeyDownCapture = e => {
+    stopPropagationForNonSpecialKeys(e);
+    if (!ownsAction || e.key !== 'Enter' || !isGridListContentTarget(e.target)) {
+      return;
+    }
+    const key = getGridListItemKeyFromTarget(e.target);
+    if (key != null) {
+      queueMicrotask(() => {
+        handleOnAction(key);
+      });
+    }
+  };
   return jsx("div", {
-    onKeyDownCapture: stopPropagationForNonSpecialKeys,
+    onKeyDownCapture: handleKeyDownCapture,
     children: jsx(BaseGridListContext.Provider, {
       value: context,
       children: jsx(GridList$1, {
@@ -83,7 +112,9 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
         className: clsx(layoutStyleClass, variantClass, className),
         "data-modern": enableModernizedComponents ? 'true' : 'false',
         layout: layoutFinal,
-        onAction: handleOnAction,
+        ...(ownsAction ? {} : {
+          onAction: handleOnAction
+        }),
         children: children
       })
     })

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

@@ -0,0 +1,32 @@
+import { type BaseGridListLayoutProp, type BaseGridListProps } from './types';
+/**
+ * Shared click/keyboard target helpers for BaseGridList and BaseGridListItem.
+ * Kept in a separate module because BaseGridListItem already imports from BaseGridList,
+ * so putting them in either file would create a circular import.
+ */
+/**
+ * React Aria's useSelectableItem stamps the collection key on every selectable row as `data-key`.
+ * The list-level Enter handler reads it back to resolve which row was activated.
+ */
+export declare const GRID_LIST_ITEM_DATA_KEY_ATTR = "data-key";
+/**
+ * `data-key` can only ever be read back as a string, but React Aria keeps numeric keys numeric in
+ * onSelectionChange. BaseGridListItem stamps this marker on rows whose key is a number so the
+ * activation handlers can restore the original type and report keys consistently across both props.
+ */
+export declare const GRID_LIST_ITEM_NUMERIC_KEY_ATTR = "data-grid-list-numeric-key";
+/**
+ * React Aria treats an item with an onAction as "actionable", which makes a press run the action
+ * instead of selecting. GridListV2 single-select needs the press to select, so Blueprint withholds
+ * onAction from React Aria there and fires it itself. Every other layout and selection mode keeps
+ * React Aria's own onAction forwarding.
+ */
+export declare const isGridV2SingleSelect: (selectionMode: BaseGridListProps["selectionMode"], layoutStyle: BaseGridListLayoutProp["layoutStyle"] | undefined) => boolean;
+/** Whether a click/keyboard target is item content rather than the checkbox or an action control. */
+export declare const isGridListContentTarget: (target: EventTarget | null) => boolean;
+/**
+ * Resolve the React Aria collection key of the row containing `target`, restoring a numeric key's
+ * original type when the row is marked as numeric. Auto-generated keys have no representation other
+ * than the `data-key` string, so those stay strings.
+ */
+export declare const getGridListItemKeyFromTarget: (target: EventTarget | null) => string | number | null;

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

@@ -0,0 +1,55 @@
+/**
+ * Shared click/keyboard target helpers for BaseGridList and BaseGridListItem.
+ * Kept in a separate module because BaseGridListItem already imports from BaseGridList,
+ * so putting them in either file would create a circular import.
+ */
+/**
+ * React Aria's useSelectableItem stamps the collection key on every selectable row as `data-key`.
+ * The list-level Enter handler reads it back to resolve which row was activated.
+ */
+const GRID_LIST_ITEM_DATA_KEY_ATTR = 'data-key';
+/**
+ * `data-key` can only ever be read back as a string, but React Aria keeps numeric keys numeric in
+ * onSelectionChange. BaseGridListItem stamps this marker on rows whose key is a number so the
+ * activation handlers can restore the original type and report keys consistently across both props.
+ */
+const GRID_LIST_ITEM_NUMERIC_KEY_ATTR = 'data-grid-list-numeric-key';
+/**
+ * CSS selectors for grid-v2 click handling (defined outside the components to save bundle size).
+ * Combined into single strings to reduce .closest() calls.
+ */
+const CHECKBOX_SELECTOR = '[class*="selection"], input[type="checkbox"]';
+const INTERACTIVE_SELECTOR = 'button, a, input, [role="button"], [class*="actions"]';
+/**
+ * React Aria treats an item with an onAction as "actionable", which makes a press run the action
+ * instead of selecting. GridListV2 single-select needs the press to select, so Blueprint withholds
+ * onAction from React Aria there and fires it itself. Every other layout and selection mode keeps
+ * React Aria's own onAction forwarding.
+ */
+const isGridV2SingleSelect = (selectionMode, layoutStyle) => selectionMode === 'single' && layoutStyle === 'grid-v2';
+/** Whether a click/keyboard target is item content rather than the checkbox or an action control. */
+const isGridListContentTarget = target => {
+  // SVG thumbnails are SVGElement rather than HTMLElement; Element covers both.
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  return !target.closest(CHECKBOX_SELECTOR) && !target.closest(INTERACTIVE_SELECTOR);
+};
+/**
+ * Resolve the React Aria collection key of the row containing `target`, restoring a numeric key's
+ * original type when the row is marked as numeric. Auto-generated keys have no representation other
+ * than the `data-key` string, so those stay strings.
+ */
+const getGridListItemKeyFromTarget = target => {
+  if (!(target instanceof Element)) {
+    return null;
+  }
+  const row = target.closest(`[${GRID_LIST_ITEM_DATA_KEY_ATTR}]`);
+  const key = row?.getAttribute(GRID_LIST_ITEM_DATA_KEY_ATTR);
+  if (key == null) {
+    return null;
+  }
+  return row?.hasAttribute(GRID_LIST_ITEM_NUMERIC_KEY_ATTR) ? Number(key) : key;
+};
+
+export { GRID_LIST_ITEM_DATA_KEY_ATTR, GRID_LIST_ITEM_NUMERIC_KEY_ATTR, getGridListItemKeyFromTarget, isGridListContentTarget, isGridV2SingleSelect };

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

@@ -9,8 +9,12 @@ export interface BaseGridListLayoutProp {
  * Size variant for grid-v2 layout.
  * - 'large': Min width 375px, good for detailed thumbnails (default)
  * - 'small': Min width 250px, good for compact grids with more items
+ * - 'x-small': Min width 140px narrow packing; same typography as large/small, with 24px action
+ *   buttons and selection checkbox. Tiles are too narrow for a row of action buttons, so `Actions`
+ *   should render a single overflow-menu trigger (`ActionIconButton` + `DropdownMenu`) whose
+ *   items are the actions, rather than several inline `ActionIconButton`s.
  */
-export type GridV2Variant = 'large' | 'small';
+export type GridV2Variant = 'large' | 'small' | 'x-small';
 interface CustomGridListProps extends BaseGridListLayoutProp {
     /**
      * This flag allows the consumer to opt-out of the default
@@ -27,9 +31,13 @@ interface CustomGridListProps extends BaseGridListLayoutProp {
      */
     centerText?: boolean;
     /**
-     * Size variant for grid-v2 layout. Controls minimum item width.
+     * Size variant for grid-v2 layout.
      * - 'large': Min width 375px (~23.4rem), max 1fr - good for detailed thumbnails
-     * - 'small': Min width 250px (~15.6rem), max 1fr - good for compact grids
+     * - 'small': Min width 250px (~15.6rem), max 1fr - good for compact grids (column packing only)
+     * - 'x-small': Min width 140px (~8.75rem), max 1fr - narrow packing for rails. Typography
+     *   matches large/small; only the action buttons and selection checkbox shrink to 24px.
+     *   `Actions` should render a single overflow-menu trigger whose items are the actions,
+     *   rather than several inline `ActionIconButton`s.
      *
      * Items will expand to fill available space (like grid-v1).
      * Only applies to grid-v2 layout. Has no effect on other layouts.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "16.20.6",
+    "version": "16.20.7",
     "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.7.13",
+        "@box/blueprint-web-assets": "^5.7.14",
         "@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.2.22",
+        "@box/storybook-utils": "^1.2.23",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",