@box/blueprint-web 12.113.0 → 12.115.0

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.113.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.4",
+        "@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.4",
+        "@box/storybook-utils": "^0.15.6",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",