@box/blueprint-web 12.119.0 → 12.121.0

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

@@ -1,4 +1,4 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import noop from 'lodash/noop';
 import { forwardRef, useState, useMemo, createContext, useContext } from 'react';
@@ -53,12 +53,15 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     setIsItemInteracted,
     hasActions,
     setHasActions
-  }), [loading, pinned, pinAriaLabel, isItemInteracted, hasActions]);
+  }), [loading, pinned, pinAriaLabel, isItemInteracted, setIsItemInteracted, hasActions, setHasActions]);
   let layoutStyleClass;
   switch (layoutStyle) {
     case 'list':
       layoutStyleClass = styles.largeListItem;
       break;
+    case 'list-v2':
+      layoutStyleClass = styles.listV2Item;
+      break;
     case 'grid':
       layoutStyleClass = styles.gridListItem;
       break;
@@ -70,13 +73,15 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
   }
   const GridListItem$1 = isInteractive ? GridListItem : StaticGridListItem;
   const isGridV2 = layoutStyle === 'grid-v2';
+  const isListV2 = layoutStyle === 'list-v2';
+  const isV2Layout = isGridV2 || isListV2;
   /**
-   * Grid-v2 click behavior fix:
+   * V2 click behavior fix (applies to both grid-v2 and list-v2):
    *
    * 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.
+   * the selection and focus outline states which uses pseudo elements to create the outline.
    *
    * WHAT THIS DOES:
    * - Checkbox clicks: propagate → toggle selection
@@ -96,8 +101,8 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
       onAction(itemKey);
     }
   };
-  // Only apply pointer handler for grid-v2 in interactive mode
-  const pointerDownHandler = isGridV2 && isInteractive ? handleContentPointerDown : undefined;
+  // Only apply pointer handler for V2 layouts in interactive mode
+  const pointerDownHandler = isV2Layout && isInteractive ? handleContentPointerDown : undefined;
   return jsx(GridListItem$1, {
     ...rest,
     ref: forwardedRef,
@@ -106,18 +111,21 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     }, {
       [styles.isItemInteracted]: isItemInteracted || debouncedIsItemInteracted
     },
-    // In grid-v2, keep subtitle visible on hover/focus when there are no action buttons
+    // In V2 layouts, keep subtitle visible on hover/focus when there are no action buttons
     {
-      [styles.noActions]: isGridV2 && !hasActions
+      [styles.noActions]: isV2Layout && !hasActions
     }, className),
     textValue: textValue,
-    children: jsx(BaseGridListItemContext.Provider, {
+    children: jsxs(BaseGridListItemContext.Provider, {
       value: context,
-      children: pointerDownHandler ? jsx("div", {
-        className: styles.gridV2ClickShield,
+      children: [isListV2 && jsx("div", {
+        "aria-hidden": "true",
+        className: styles.listV2Divider
+      }), pointerDownHandler ? jsx("div", {
+        className: isGridV2 ? styles.gridV2ClickShield : styles.listV2ClickShield,
         onPointerDownCapture: pointerDownHandler,
         children: 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--f67a7","smallListItem":"bp_base_grid_list_item_module_smallListItem--f67a7","header":"bp_base_grid_list_item_module_header--f67a7","subtitle":"bp_base_grid_list_item_module_subtitle--f67a7","loading":"bp_base_grid_list_item_module_loading--f67a7","thumbnail":"bp_base_grid_list_item_module_thumbnail--f67a7","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--f67a7","actions":"bp_base_grid_list_item_module_actions--f67a7","selection":"bp_base_grid_list_item_module_selection--f67a7","inner":"bp_base_grid_list_item_module_inner--f67a7","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--f67a7","largeList":"bp_base_grid_list_item_module_largeList--f67a7","largeListItem":"bp_base_grid_list_item_module_largeListItem--f67a7","fade":"bp_base_grid_list_item_module_fade--f67a7","description":"bp_base_grid_list_item_module_description--f67a7","snippet":"bp_base_grid_list_item_module_snippet--f67a7","snippetContent":"bp_base_grid_list_item_module_snippetContent--f67a7","gridList":"bp_base_grid_list_item_module_gridList--f67a7","gridListItem":"bp_base_grid_list_item_module_gridListItem--f67a7","statusPin":"bp_base_grid_list_item_module_statusPin--f67a7","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--f67a7","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--f67a7","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--f67a7","gridListV2":"bp_base_grid_list_item_module_gridListV2--f67a7","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--f67a7","noActions":"bp_base_grid_list_item_module_noActions--f67a7","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--f67a7","statusBadge":"bp_base_grid_list_item_module_statusBadge--f67a7","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--f67a7","textCentered":"bp_base_grid_list_item_module_textCentered--f67a7","innerCentered":"bp_base_grid_list_item_module_innerCentered--f67a7","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--f67a7","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--f67a7","staticList":"bp_base_grid_list_item_module_staticList--f67a7","staticListItem":"bp_base_grid_list_item_module_staticListItem--f67a7"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--98669","smallListItem":"bp_base_grid_list_item_module_smallListItem--98669","header":"bp_base_grid_list_item_module_header--98669","subtitle":"bp_base_grid_list_item_module_subtitle--98669","loading":"bp_base_grid_list_item_module_loading--98669","thumbnail":"bp_base_grid_list_item_module_thumbnail--98669","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--98669","actions":"bp_base_grid_list_item_module_actions--98669","selection":"bp_base_grid_list_item_module_selection--98669","inner":"bp_base_grid_list_item_module_inner--98669","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--98669","largeList":"bp_base_grid_list_item_module_largeList--98669","largeListItem":"bp_base_grid_list_item_module_largeListItem--98669","fade":"bp_base_grid_list_item_module_fade--98669","description":"bp_base_grid_list_item_module_description--98669","snippet":"bp_base_grid_list_item_module_snippet--98669","snippetContent":"bp_base_grid_list_item_module_snippetContent--98669","gridList":"bp_base_grid_list_item_module_gridList--98669","gridListItem":"bp_base_grid_list_item_module_gridListItem--98669","statusPin":"bp_base_grid_list_item_module_statusPin--98669","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--98669","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--98669","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--98669","gridListV2":"bp_base_grid_list_item_module_gridListV2--98669","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--98669","noActions":"bp_base_grid_list_item_module_noActions--98669","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--98669","statusBadge":"bp_base_grid_list_item_module_statusBadge--98669","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--98669","textCentered":"bp_base_grid_list_item_module_textCentered--98669","innerCentered":"bp_base_grid_list_item_module_innerCentered--98669","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--98669","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--98669","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--98669","listV2":"bp_base_grid_list_item_module_listV2--98669","listV2Item":"bp_base_grid_list_item_module_listV2Item--98669","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--98669","content":"bp_base_grid_list_item_module_content--98669","staticList":"bp_base_grid_list_item_module_staticList--98669","staticListItem":"bp_base_grid_list_item_module_staticListItem--98669"};
 
 export { styles as default };

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

@@ -53,6 +53,10 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
       layoutStyleClass = styles.largeList;
       layoutFinal = 'stack';
       break;
+    case 'list-v2':
+      layoutStyleClass = styles.listV2;
+      layoutFinal = 'stack';
+      break;
     case 'grid':
       layoutStyleClass = styles.gridList;
       layoutFinal = 'grid';

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

@@ -5,7 +5,7 @@ import { type FileCategory } from '../../types/file-category';
 import { type Modify } from '../../types/modify';
 export type { FileCategory };
 export interface BaseGridListLayoutProp {
-    layoutStyle: 'grid' | 'grid-v2' | 'list' | 'small-list';
+    layoutStyle: 'grid' | 'grid-v2' | 'list' | 'list-v2' | 'small-list';
 }
 /**
  * Size variant for grid-v2 layout.
@@ -43,6 +43,7 @@ export declare enum ListLayout {
     GRID = "Grid List",
     GRID_V2 = "Grid List V2",
     LARGE_LIST = "Large List",
+    LARGE_LIST_V2 = "Large List V2",
     SMALL_LIST = "Small List"
 }
 export type BaseGridListHeaderProps = ComponentPropsWithRef<'span'> & {

package/dist/lib-esm/utils/fast-context.d.ts

@@ -4,5 +4,7 @@ export declare function createFastContext<Store>(initialState: Store): {
         children: React.ReactNode;
     }) => import("react/jsx-runtime").JSX.Element;
     useStore: <SelectorOutput>(selector: (store: Store) => SelectorOutput) => [SelectorOutput, (value: Partial<Store>) => void];
+    useStoreSafe: <SelectorOutput>(selector: (store: Store) => SelectorOutput) => [SelectorOutput, (value: Partial<Store>) => void] | null;
     useStoreSetter: () => (value: Partial<Store>) => void;
+    useStoreSetterSafe: () => ((value: Partial<Store>) => void) | null;
 };

package/dist/lib-esm/utils/fast-context.js

@@ -58,10 +58,40 @@ function createFastContext(initialState) {
     }
     return store.set;
   }
+  /**
+   * Same as useStoreSetter but returns null if no Provider is found.
+   * Use this when the component should work both with and without a Provider.
+   */
+  function useStoreSetterSafe() {
+    const store = useContext(StoreContext);
+    return store?.set ?? null;
+  }
+  /**
+   * Same as useStore but returns null if no Provider is found.
+   * Use this when the component should work both with and without a Provider.
+   */
+  function useStoreSafe(selector) {
+    const store = useContext(StoreContext);
+    const [state, setState] = useState(() => store ? selector(store.get()) : selector(initialState));
+    useEffect(() => {
+      if (!store) {
+        return undefined;
+      }
+      return store.subscribe(() => {
+        setState(selector(store.get()));
+      });
+    }, [selector, store]);
+    if (!store) {
+      return null;
+    }
+    return [state, store.set];
+  }
   return {
     Provider,
     useStore,
-    useStoreSetter
+    useStoreSafe,
+    useStoreSetter,
+    useStoreSetterSafe
   };
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.119.0",
+    "version": "12.121.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.94.1",
+        "@box/blueprint-web-assets": "^4.94.3",
         "@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.16.5",
+        "@box/storybook-utils": "^0.16.7",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",