@box/blueprint-web 12.114.0 → 12.115.0

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

@@ -25,6 +25,7 @@ export * from './empty-state';
 export * from './focusable';
 export * from './ghost';
 export * from './grid-list-item';
+export * from './grid-list-v2';
 export * from './guided-tooltip';
 export * from './icon-dual-state-button';
 export * from './icon-toggle-button';

package/dist/lib-esm/index.js

@@ -32,6 +32,7 @@ export { EmptyState } from './empty-state/empty-state.js';
 export { Focusable } from './focusable/focusable.js';
 export { Ghost } from './ghost/ghost.js';
 export { GridList } from './grid-list-item/index.js';
+export { GridListV2 } from './grid-list-v2/index.js';
 export { GuidedTooltip } from './guided-tooltip/guided-tooltip.js';
 export { GuidedTooltipContext } from './guided-tooltip/utils/guided-tooltip-context.js';
 export { IconDualStateButton } from './icon-dual-state-button/icon-dual-state-button.js';

package/dist/lib-esm/types/file-category.d.ts

@@ -0,0 +1,11 @@
+/**
+ * File category type for categorizing files by their type/format.
+ *
+ * These categories match those returned by `getFileIconType` from `@box/item-icon`.
+ * Due to circular dependency constraints, `@box/blueprint-web` cannot directly import
+ * `@box/item-icon`, so consumers should use `getFileIconType` in their own code to
+ * map file extensions to categories.
+ *
+ * @see {@link https://git.dev.box.net/Box/frontend-mono/tree/master/packages/group-shared-features/item-icon | @box/item-icon}
+ */
+export type FileCategory = 'audio' | 'boxcanvas' | 'boxnote' | 'code' | 'document' | 'docuworks-binder' | 'docuworks-file' | 'dwg' | 'excel-spreadsheet' | 'google-docs' | 'google-sheets' | 'google-slides' | 'illustrator' | 'image' | 'indesign' | 'keynote' | 'numbers' | 'pages' | 'pdf' | 'photoshop' | 'powerpoint-presentation' | 'presentation' | 'spreadsheet' | 'text' | 'threed' | 'vector' | 'video' | 'word-document' | 'zip';

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Pin } from '@box/blueprint-web-assets/icons/Fill';
 import clsx from 'clsx';
-import { forwardRef, useCallback, useRef } from 'react';
+import { forwardRef, useCallback, useRef, useEffect } from 'react';
 import { mergeProps } from 'react-aria';
 import { TooltipTrigger } from 'react-aria-components';
 import { IconButton } from '../../primitives/icon-button/icon-button.js';
@@ -37,14 +37,23 @@ const BaseListActions = ({
 const GridListActions = ({
   children,
   selectionEnabled,
-  isSelectionCheckboxDisabled
+  isSelectionCheckboxDisabled,
+  centerText,
+  setHasActions
 }) => {
+  const hasChildren = children !== null && children !== undefined && children !== false;
+  // Communicate action button presence to parent context for subtitle visibility logic
+  useEffect(() => {
+    setHasActions(hasChildren);
+  }, [hasChildren, setHasActions]);
   return jsxs(Fragment, {
     children: [selectionEnabled && jsx(ListCheckbox, {
       className: styles.selection,
       isDisabled: isSelectionCheckboxDisabled
     }), jsx("div", {
-      className: styles.inner,
+      className: clsx(styles.inner, {
+        [styles.innerCentered]: centerText
+      }),
       children: children
     })]
   });
@@ -90,7 +99,8 @@ const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridLi
 const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions(props, forwardedRef) {
   const {
     layoutStyle,
-    selectionMode
+    selectionMode,
+    centerText
   } = useBaseGridListContext();
   const {
     children,
@@ -102,7 +112,8 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
     loading,
     pinned,
     pinAriaLabel,
-    setIsItemInteracted
+    setIsItemInteracted,
+    setHasActions
   } = useBaseGridListItemContext();
   const divRef = useRef(null);
   const forkRef = useForkRef(divRef, forwardedRef);
@@ -110,6 +121,7 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
     return null;
   }
   const isList = layoutStyle === 'list' || layoutStyle === 'small-list';
+  const isGridV2 = layoutStyle === 'grid-v2';
   const isSelectionEnabled = selectionMode === 'multiple';
   const isRenderPropUsed = typeof children === 'function';
   return jsxs(Fragment, {
@@ -122,8 +134,10 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
         selectionEnabled: isSelectionEnabled,
         children: isRenderPropUsed ? children(setIsItemInteracted) : children
       }) : jsx(GridListActions, {
+        centerText: isGridV2 && centerText,
         isSelectionCheckboxDisabled: isSelectionCheckboxDisabled,
         selectionEnabled: isSelectionEnabled,
+        setHasActions: setHasActions,
         children: isRenderPropUsed ? children(setIsItemInteracted) : children
       })
     }), pinned && jsx(Status, {

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

@@ -20,7 +20,8 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
     loading
   } = useBaseGridListItemContext();
   const {
-    layoutStyle
+    layoutStyle,
+    centerText
   } = useBaseGridListContext();
   const {
     Wrapper,
@@ -33,6 +34,7 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
   });
   const isLargeItem = layoutStyle === 'list';
   const isSmallListItem = layoutStyle === 'small-list';
+  const isGridV2 = layoutStyle === 'grid-v2';
   return (
     // @ts-expect-error Fix this type error
     jsx(Wrapper, {
@@ -41,7 +43,8 @@ const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(p
         ...rest,
         ref: useForkRef(ref, forwardedRef),
         className: clsx(styles.header, {
-          [styles.loading]: loading
+          [styles.loading]: loading,
+          [styles.textCentered]: isGridV2 && centerText
         }, className),
         children: loading ? jsx(Ghost, {
           borderRadius: isSmallListItem ? '2rem' : undefined,

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

@@ -19,7 +19,8 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
     loading
   } = useBaseGridListItemContext();
   const {
-    layoutStyle
+    layoutStyle,
+    centerText
   } = useBaseGridListContext();
   const {
     Wrapper,
@@ -30,6 +31,7 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
     skipOverflowCheck: loading
   });
   const isGridItem = layoutStyle === 'grid';
+  const isGridV2 = layoutStyle === 'grid-v2';
   const isSmallListItem = layoutStyle === 'small-list';
   const forkRef = useForkRef(ref, forwardedRef);
   if (isSmallListItem && loading) {
@@ -44,7 +46,8 @@ const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtit
         ...rest,
         ref: forkRef,
         className: clsx(styles.subtitle, {
-          [styles.loading]: loading
+          [styles.loading]: loading,
+          [styles.textCentered]: isGridV2 && centerText
         }, className),
         children: loading ? jsx(Ghost, {
           variant: "rectangle",

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

@@ -1,21 +1,108 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Ghost } from '../../ghost/ghost.js';
+import { Text } from '../../text/text.js';
 import { useBaseGridListItemContext } from './base-grid-list-item.js';
 import styles from './base-grid-list-item.module.js';
 
+// Color tokens grouped by visual color to minimize bundle size
+// Each token uses Blueprint variable with legacy fallback
+const C = {
+  // Watermelon Red 120 (#BE2C46) - pdf, powerpoint-presentation, code
+  red: 'var(--bp-watermelon-red-120, var(--watermelon-red-120))',
+  // Orange 130 (#A95A12) - boxcanvas, threed, vector, pages, google-slides, illustrator, presentation
+  orange: 'var(--bp-orange-130, var(--orange-120))',
+  // Green Light 135 (#197E54) - image, excel-spreadsheet, numbers, google-sheets, spreadsheet
+  green: 'var(--bp-green-light-135, var(--green-light-120))',
+  // Light Blue 115 (#1F72D6) - photoshop, dwg, keynote, video
+  lightBlue: 'var(--bp-light-blue-115, var(--light-blue-110))',
+  // Light Blue 135 (#1757A4) - word-document, google-docs, text
+  darkBlue: 'var(--bp-light-blue-135, var(--light-blue-120))',
+  // Purple Rain 100 (#9F3FED) - audio
+  purple: 'var(--bp-purple-rain-100, var(--purple-rain-100))',
+  // Text on Light (#222222) - default for unspecified categories
+  gray: 'var(--bp-gray-100, var(--gray-100))'
+};
+/** Color mapping for file categories, optimized for bundle size */
+const FILE_CATEGORY_COLORS = {
+  // Purple Rain 100
+  audio: C.purple,
+  // Orange 130
+  boxcanvas: C.orange,
+  // Default (text-on-light)
+  boxnote: C.gray,
+  // Watermelon Red 120
+  code: C.red,
+  // Default (text-on-light)
+  document: C.gray,
+  // Default (text-on-light)
+  'docuworks-binder': C.gray,
+  // Green Light 135
+  'docuworks-file': C.green,
+  // Light Blue 115
+  dwg: C.lightBlue,
+  // Green Light 135
+  'excel-spreadsheet': C.green,
+  // Light Blue 135
+  'google-docs': C.darkBlue,
+  // Green Light 135
+  'google-sheets': C.green,
+  // Orange 130
+  'google-slides': C.orange,
+  // Orange 130
+  illustrator: C.orange,
+  // Green Light 135
+  image: C.green,
+  // Default (text-on-light)
+  indesign: C.gray,
+  // Light Blue 115
+  keynote: C.lightBlue,
+  // Green Light 135
+  numbers: C.green,
+  // Orange 130
+  pages: C.orange,
+  // Watermelon Red 120
+  pdf: C.red,
+  // Light Blue 115
+  photoshop: C.lightBlue,
+  // Watermelon Red 120
+  'powerpoint-presentation': C.red,
+  // Orange 130
+  presentation: C.orange,
+  // Green Light 135
+  spreadsheet: C.green,
+  // Light Blue 135
+  text: C.darkBlue,
+  // Orange 130
+  threed: C.orange,
+  // Orange 130
+  vector: C.orange,
+  // Light Blue 115
+  video: C.lightBlue,
+  // Light Blue 135
+  'word-document': C.darkBlue,
+  // Default (text-on-light)
+  zip: C.gray
+};
 const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumbnail(props, forwardedRef) {
   const {
     children,
     className,
     hasCustomSize,
+    fileExtension,
+    fileCategory,
+    statusBadge,
     ...rest
   } = props;
   const {
     loading
   } = useBaseGridListItemContext();
-  return jsx("div", {
+  // Normalize file extension to uppercase for display (e.g., "pdf" → "PDF")
+  const normalizedExtension = fileExtension?.toUpperCase();
+  const extensionColor = fileCategory ? FILE_CATEGORY_COLORS[fileCategory] : undefined;
+  const hasBadges = !loading && (statusBadge || normalizedExtension);
+  return jsxs("div", {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.thumbnail, {
@@ -23,10 +110,25 @@ const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumb
     }, {
       [styles.thumbnailContent]: !hasCustomSize
     }, className),
-    children: loading ? jsx(Ghost, {
+    children: [loading ? jsx(Ghost, {
       borderRadius: "0.5rem",
       height: "100%"
-    }) : children
+    }) : children, hasBadges && jsxs("div", {
+      className: styles.thumbnailBadges,
+      children: [statusBadge && jsx("span", {
+        className: styles.statusBadge,
+        children: statusBadge
+      }), normalizedExtension && jsx(Text, {
+        as: "span",
+        className: styles.fileTypePill,
+        "data-file-type": normalizedExtension,
+        style: extensionColor ? {
+          color: extensionColor
+        } : undefined,
+        variant: "caption",
+        children: normalizedExtension
+      })]
+    })]
   });
 });
 

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

@@ -4,20 +4,28 @@ import noop from 'lodash/noop';
 import { forwardRef, useState, useMemo, createContext, useContext } from 'react';
 import { GridListItem } from 'react-aria-components';
 import { useDebounce } from '../../utils/use-debounce.js';
-import { StaticGridListItem } from './static-grid-list-item.js';
 import { useBaseGridListContext } from './base-grid-list.js';
 import styles from './base-grid-list-item.module.js';
+import { StaticGridListItem } from './static-grid-list-item.js';
 
 const BaseGridListItemContext = /*#__PURE__*/createContext({
   loading: false,
   pinned: false,
   pinAriaLabel: undefined,
   setIsItemInteracted: noop,
-  isItemInteracted: false
+  isItemInteracted: false,
+  hasActions: false,
+  setHasActions: noop
 });
 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,
@@ -29,10 +37,12 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
   } = props;
   const {
     layoutStyle,
-    isInteractive
+    isInteractive,
+    onAction
   } = useBaseGridListContext();
   const textValue = typeof rest.textValue === 'string' ? rest.textValue : undefined;
   const [isItemInteracted, setIsItemInteracted] = useState(false);
+  const [hasActions, setHasActions] = useState(false);
   // Use debounce with a small delay to make sure there is style flashing finishing interaction (e.g. closing dropdown)
   const debouncedIsItemInteracted = useDebounce(isItemInteracted, 50);
   const context = useMemo(() => ({
@@ -40,8 +50,10 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     pinned,
     pinAriaLabel,
     isItemInteracted,
-    setIsItemInteracted
-  }), [loading, pinned, pinAriaLabel, isItemInteracted]);
+    setIsItemInteracted,
+    hasActions,
+    setHasActions
+  }), [loading, pinned, pinAriaLabel, isItemInteracted, hasActions]);
   let layoutStyleClass;
   switch (layoutStyle) {
     case 'list':
@@ -50,10 +62,42 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     case 'grid':
       layoutStyleClass = styles.gridListItem;
       break;
+    case 'grid-v2':
+      layoutStyleClass = styles.gridListV2Item;
+      break;
     case 'small-list':
       layoutStyleClass = styles.smallListItem;
   }
   const GridListItem$1 = isInteractive ? GridListItem : StaticGridListItem;
+  const isGridV2 = layoutStyle === 'grid-v2';
+  /**
+   * Grid-v2 click behavior fix:
+   *
+   * WHY V2 NEEDS THIS BUT V1 DOESN'T:
+   * V1's CSS uses minmax() for grid rows, so content fills most of the clickable area.
+   * V2 has explicit padding creating empty space that triggers unwanted selection. This padding is needed to make space for
+   * the seclection and focus outline states which uses psuedo elements to create the outline.
+   *
+   * WHAT THIS DOES:
+   * - Checkbox clicks: propagate → toggle selection
+   * - Action buttons: propagate → button handlers fire
+   * - Content/empty space: stop propagation, trigger onAction
+   */
+  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)) {
+      return;
+    }
+    // Stop propagation for content clicks, then trigger onAction
+    e.stopPropagation();
+    const itemKey = rest.id ?? textValue;
+    if (onAction && itemKey) {
+      onAction(itemKey);
+    }
+  };
+  // Only apply pointer handler for grid-v2 in interactive mode
+  const pointerDownHandler = isGridV2 && isInteractive ? handleContentPointerDown : undefined;
   return jsx(GridListItem$1, {
     ...rest,
     ref: forwardedRef,
@@ -61,11 +105,19 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
       [styles.loading]: loading
     }, {
       [styles.isItemInteracted]: isItemInteracted || debouncedIsItemInteracted
+    },
+    // In grid-v2, keep subtitle visible on hover/focus when there are no action buttons
+    {
+      [styles.noActions]: isGridV2 && !hasActions
     }, className),
     textValue: textValue,
     children: jsx(BaseGridListItemContext.Provider, {
       value: context,
-      children: children
+      children: pointerDownHandler ? jsx("div", {
+        className: styles.gridV2ClickShield,
+        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--66d6c","smallListItem":"bp_base_grid_list_item_module_smallListItem--66d6c","header":"bp_base_grid_list_item_module_header--66d6c","subtitle":"bp_base_grid_list_item_module_subtitle--66d6c","loading":"bp_base_grid_list_item_module_loading--66d6c","thumbnail":"bp_base_grid_list_item_module_thumbnail--66d6c","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--66d6c","actions":"bp_base_grid_list_item_module_actions--66d6c","selection":"bp_base_grid_list_item_module_selection--66d6c","inner":"bp_base_grid_list_item_module_inner--66d6c","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--66d6c","largeList":"bp_base_grid_list_item_module_largeList--66d6c","largeListItem":"bp_base_grid_list_item_module_largeListItem--66d6c","fade":"bp_base_grid_list_item_module_fade--66d6c","description":"bp_base_grid_list_item_module_description--66d6c","snippet":"bp_base_grid_list_item_module_snippet--66d6c","snippetContent":"bp_base_grid_list_item_module_snippetContent--66d6c","gridList":"bp_base_grid_list_item_module_gridList--66d6c","gridListItem":"bp_base_grid_list_item_module_gridListItem--66d6c","statusPin":"bp_base_grid_list_item_module_statusPin--66d6c","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--66d6c","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--66d6c","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--66d6c","staticList":"bp_base_grid_list_item_module_staticList--66d6c","staticListItem":"bp_base_grid_list_item_module_staticListItem--66d6c"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--33914","smallListItem":"bp_base_grid_list_item_module_smallListItem--33914","header":"bp_base_grid_list_item_module_header--33914","subtitle":"bp_base_grid_list_item_module_subtitle--33914","loading":"bp_base_grid_list_item_module_loading--33914","thumbnail":"bp_base_grid_list_item_module_thumbnail--33914","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--33914","actions":"bp_base_grid_list_item_module_actions--33914","selection":"bp_base_grid_list_item_module_selection--33914","inner":"bp_base_grid_list_item_module_inner--33914","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--33914","largeList":"bp_base_grid_list_item_module_largeList--33914","largeListItem":"bp_base_grid_list_item_module_largeListItem--33914","fade":"bp_base_grid_list_item_module_fade--33914","description":"bp_base_grid_list_item_module_description--33914","snippet":"bp_base_grid_list_item_module_snippet--33914","snippetContent":"bp_base_grid_list_item_module_snippetContent--33914","gridList":"bp_base_grid_list_item_module_gridList--33914","gridListItem":"bp_base_grid_list_item_module_gridListItem--33914","statusPin":"bp_base_grid_list_item_module_statusPin--33914","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--33914","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--33914","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--33914","gridListV2":"bp_base_grid_list_item_module_gridListV2--33914","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--33914","noActions":"bp_base_grid_list_item_module_noActions--33914","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--33914","statusBadge":"bp_base_grid_list_item_module_statusBadge--33914","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--33914","textCentered":"bp_base_grid_list_item_module_textCentered--33914","innerCentered":"bp_base_grid_list_item_module_innerCentered--33914","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--33914","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--33914","staticList":"bp_base_grid_list_item_module_staticList--33914","staticListItem":"bp_base_grid_list_item_module_staticListItem--33914"};
 
 export { styles as default };

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

@@ -29,6 +29,8 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     className,
     isInteractive = true,
     layoutStyle,
+    centerText = false,
+    variant = 'large',
     ...rest
   } = props;
   const {
@@ -40,8 +42,10 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     selectionBehavior: rest.selectionBehavior,
     layoutStyle,
     isInteractive,
+    centerText,
+    variant,
     onAction: handleOnAction
-  }), [rest.selectionMode, rest.selectionBehavior, layoutStyle, isInteractive, handleOnAction]);
+  }), [rest.selectionMode, rest.selectionBehavior, layoutStyle, isInteractive, centerText, variant, handleOnAction]);
   let layoutStyleClass;
   let layoutFinal;
   switch (layoutStyle) {
@@ -53,12 +57,18 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
       layoutStyleClass = styles.gridList;
       layoutFinal = 'grid';
       break;
+    case 'grid-v2':
+      layoutStyleClass = styles.gridListV2;
+      layoutFinal = 'grid';
+      break;
     case 'small-list':
       layoutFinal = 'stack';
       layoutStyleClass = styles.smallList;
       break;
   }
   const GridList$1 = isInteractive ? GridList : StaticGridList;
+  const isGridV2 = layoutStyle === 'grid-v2';
+  const variantClass = isGridV2 && variant === 'small' ? styles.gridListV2Small : undefined;
   return jsx("div", {
     onKeyDownCapture: stopPropagationForNonSpecialKeys,
     children: jsx(BaseGridListContext.Provider, {
@@ -66,7 +76,7 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
       children: jsx(GridList$1, {
         ...rest,
         ref: forwardedRef,
-        className: clsx(layoutStyleClass, className),
+        className: clsx(layoutStyleClass, variantClass, className),
         "data-modern": enableModernizedComponents ? 'true' : 'false',
         layout: layoutFinal,
         onAction: handleOnAction,

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

@@ -33,4 +33,4 @@ export declare const BaseGridList: import("react").ForwardRefExoticComponent<imp
      */
     ActionIconButton: import("react").ForwardRefExoticComponent<(Omit<import("../../primitives/icon-button/types").IconButtonVariantsProps, "ref"> | Omit<import("../../primitives/icon-button/types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 };
-export type { BaseGridListActionIconButtonProps, BaseGridListActionsProps, BaseGridListDescriptionProps, BaseGridListHeaderProps, BaseGridListItemProps, BaseGridListProps, BaseGridListSubtitleProps, BaseGridListThumbnailProps, } from './types';
+export type { BaseGridListActionIconButtonProps, BaseGridListActionsProps, BaseGridListDescriptionProps, BaseGridListHeaderProps, BaseGridListItemProps, BaseGridListProps, BaseGridListSubtitleProps, BaseGridListThumbnailProps, FileCategory, GridV2Variant, } from './types';

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

@@ -1,10 +1,18 @@
 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 FileCategory } from '../../types/file-category';
 import { type Modify } from '../../types/modify';
+export type { FileCategory };
 export interface BaseGridListLayoutProp {
-    layoutStyle: 'grid' | 'list' | 'small-list';
+    layoutStyle: 'grid' | 'grid-v2' | 'list' | 'small-list';
 }
+/**
+ * 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
+ */
+export type GridV2Variant = 'large' | 'small';
 interface CustomGridListProps extends BaseGridListLayoutProp {
     /**
      * This flag allows the consumer to opt-out of the default
@@ -14,17 +22,95 @@ interface CustomGridListProps extends BaseGridListLayoutProp {
      * @param {boolean} isInteractive
      */
     isInteractive?: boolean;
+    /**
+     * Centers the text in the Header and Subtitle components.
+     * Only applies to grid-v2 layout. Has no effect on other layouts.
+     * Useful for folder-like items or centered layouts.
+     */
+    centerText?: boolean;
+    /**
+     * Size variant for grid-v2 layout. Controls minimum item width.
+     * - 'large': Min width 375px (~23.4rem), max 1fr - good for detailed thumbnails
+     * - 'small': Min width 250px (~15.6rem), max 1fr - good for compact grids
+     *
+     * Items will expand to fill available space (like grid-v1).
+     * Only applies to grid-v2 layout. Has no effect on other layouts.
+     * @default 'large'
+     */
+    variant?: GridV2Variant;
 }
 export declare enum ListLayout {
     GRID = "Grid List",
+    GRID_V2 = "Grid List V2",
     LARGE_LIST = "Large List",
     SMALL_LIST = "Small List"
 }
 export type BaseGridListHeaderProps = ComponentPropsWithRef<'span'> & {
     textValue?: string;
 };
+/**
+ * Props for the GridListV2 Thumbnail component.
+ *
+ * The thumbnail supports displaying a file type pill badge that shows the file extension
+ * with a color based on the file category. To use this feature:
+ *
+ * 1. Pass `fileExtension` - the file's extension (e.g., "pdf", "docx", "mp4")
+ * 2. Pass `fileCategory` - determines the pill's text color (use `getFileIconType` from `@box/item-icon`)
+ *
+ * @example
+ * ```tsx
+ * import { getFileIconType } from '@box/item-icon';
+ *
+ * // Get the category for color mapping
+ * const category = getFileIconType('docx'); // returns 'word-document'
+ *
+ * <GridListV2.Thumbnail fileExtension="docx" fileCategory={category}>
+ *     <img src={thumbnailUrl} alt={fileName} />
+ * </GridListV2.Thumbnail>
+ * ```
+ */
 export type BaseGridListThumbnailProps = ComponentPropsWithRef<'div'> & {
+    /** When true, the thumbnail will not apply default sizing styles. */
     hasCustomSize?: boolean;
+    /**
+     * File extension to display in the file type pill (e.g., "pdf", "docx", "mp4").
+     * Will be normalized to uppercase for display (e.g., "pdf" → "PDF").
+     */
+    fileExtension?: string;
+    /**
+     * File category that determines the pill's text color.
+     * Use `getFileIconType(extension)` from `@box/item-icon` to get this value.
+     * If not provided, the pill will use the default black text color.
+     *
+     * @example
+     * ```tsx
+     * import { getFileIconType } from '@box/item-icon';
+     *
+     * const fileCategory = getFileIconType('docx'); // returns 'word-document'
+     * // The pill will display "DOCX" with blue text (word-document color)
+     * ```
+     */
+    fileCategory?: FileCategory;
+    /**
+     * Optional status badge element to render on the thumbnail (left of the file type pill).
+     * Typically used for classification badges with tooltips.
+     *
+     * @example
+     * ```tsx
+     * <GridListV2.Thumbnail
+     *     fileExtension="xlsx"
+     *     fileCategory="excel-spreadsheet"
+     *     statusBadge={
+     *         <CardTooltipV2 content="Classification: Confidential">
+     *             <Status colorIndex={2} hideText icon={Shield} text="Confidential" />
+     *         </CardTooltipV2>
+     *     }
+     * >
+     *     <img src={thumbnailUrl} alt={fileName} />
+     * </GridListV2.Thumbnail>
+     * ```
+     */
+    statusBadge?: ReactNode;
 };
 export type BaseGridListSubtitleProps = ComponentPropsWithRef<'span'>;
 export type BaseGridListDescriptionProps = ComponentPropsWithRef<'p'>;
@@ -41,8 +127,10 @@ export interface BaseGridListItemContextType {
     pinAriaLabel?: string;
     isItemInteracted: boolean;
     setIsItemInteracted: (isInteracted: boolean) => void;
+    /** Whether the item has action buttons. Used to keep subtitle visible when no actions exist. */
+    hasActions: boolean;
+    setHasActions: (hasActions: boolean) => void;
 }
-export interface BaseGridListItemProps extends GridListItemProps, Omit<BaseGridListItemContextType, 'isItemInteracted' | 'setIsItemInteracted'> {
+export interface BaseGridListItemProps extends GridListItemProps, Omit<BaseGridListItemContextType, 'isItemInteracted' | 'setIsItemInteracted' | 'hasActions' | 'setHasActions'> {
     children?: ReactNode;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.114.0",
+    "version": "12.115.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.91.5",
+        "@box/blueprint-web-assets": "^4.91.6",
         "@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.15.5",
+        "@box/storybook-utils": "^0.15.6",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",