@box/blueprint-web 18.0.0 → 18.2.0

package/dist/lib-esm/list-item/main.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--17b22","resizableTableContainer":"bp_main_module_resizableTableContainer--17b22","resizableTable":"bp_main_module_resizableTable--17b22","tableHeader":"bp_main_module_tableHeader--17b22","column":"bp_main_module_column--17b22","columnNameWrapper":"bp_main_module_columnNameWrapper--17b22","columnName":"bp_main_module_columnName--17b22","focusVisible":"bp_main_module_focusVisible--17b22","sorted":"bp_main_module_sorted--17b22","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--17b22","columnResizer":"bp_main_module_columnResizer--17b22","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--17b22","droppableColumn":"bp_main_module_droppableColumn--17b22","actionColumn":"bp_main_module_actionColumn--17b22","hiddenColumn":"bp_main_module_hiddenColumn--17b22","tableBody":"bp_main_module_tableBody--17b22","row":"bp_main_module_row--17b22","cell":"bp_main_module_cell--17b22","actionsWrapper":"bp_main_module_actionsWrapper--17b22","actionChildren":"bp_main_module_actionChildren--17b22","actions":"bp_main_module_actions--17b22","alwaysShowSelection":"bp_main_module_alwaysShowSelection--17b22","isCellHidden":"bp_main_module_isCellHidden--17b22","droppableTarget":"bp_main_module_droppableTarget--17b22","rowDraggingHighlighted":"bp_main_module_rowDraggingHighlighted--17b22"};
+var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--e8456","resizableTableContainer":"bp_main_module_resizableTableContainer--e8456","resizableTable":"bp_main_module_resizableTable--e8456","tableHeader":"bp_main_module_tableHeader--e8456","column":"bp_main_module_column--e8456","columnNameWrapper":"bp_main_module_columnNameWrapper--e8456","columnName":"bp_main_module_columnName--e8456","focusVisible":"bp_main_module_focusVisible--e8456","sorted":"bp_main_module_sorted--e8456","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--e8456","columnResizer":"bp_main_module_columnResizer--e8456","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--e8456","droppableColumn":"bp_main_module_droppableColumn--e8456","actionColumn":"bp_main_module_actionColumn--e8456","hiddenColumn":"bp_main_module_hiddenColumn--e8456","tableBody":"bp_main_module_tableBody--e8456","row":"bp_main_module_row--e8456","cell":"bp_main_module_cell--e8456","actionsWrapper":"bp_main_module_actionsWrapper--e8456","actionChildren":"bp_main_module_actionChildren--e8456","actions":"bp_main_module_actions--e8456","alwaysShowSelection":"bp_main_module_alwaysShowSelection--e8456","isCellHidden":"bp_main_module_isCellHidden--e8456","droppableTarget":"bp_main_module_droppableTarget--e8456","rowDraggingHighlighted":"bp_main_module_rowDraggingHighlighted--e8456"};
 
 export { styles as default };

package/dist/lib-esm/list-item/row.d.ts

@@ -2,8 +2,7 @@ import { type ForwardedRef } from 'react';
 import { type RowProps as PrimitiveRowProps } from 'react-aria-components';
 export type RowProps<T> = PrimitiveRowProps<T> & {
     /**
-     * Whether another row can be dropped onto this row. When `false`, the row fades to 50% opacity
-     * while another row in the table is dragged.
+     * Set to `false` to style this item as an invalid drop target.
      */
     isDroppableTarget?: boolean;
 };

package/dist/lib-esm/list-item/table.d.ts

@@ -39,8 +39,8 @@ export type TableProps = PrimitiveTableProps & {
      */
     selectionVisibility?: SelectionVisibility;
     /**
-     * Changes visual styles for drag and drop. When `true`, the dragged row and the row being dropped
-     * onto are highlighted with grey, instead of the dragged row fading to 50% opacity.
+     * Changes visual styles for drag and drop. When `true`, rows will have reduced opacity
+     * when being dragged, and drop targets will have a colored background.
      */
     isRowDraggingHighlighted?: boolean;
 };
@@ -86,8 +86,8 @@ export declare const Table: import("react").ForwardRefExoticComponent<PrimitiveT
      */
     selectionVisibility?: SelectionVisibility;
     /**
-     * Changes visual styles for drag and drop. When `true`, the dragged row and the row being dropped
-     * onto are highlighted with grey, instead of the dragged row fading to 50% opacity.
+     * Changes visual styles for drag and drop. When `true`, rows will have reduced opacity
+     * when being dragged, and drop targets will have a colored background.
      */
     isRowDraggingHighlighted?: boolean;
 } & import("react").RefAttributes<HTMLTableElement>>;

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

@@ -1,6 +1,11 @@
 export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarProps, type ToolbarSeparatorProps, type ToolbarToggleGroupProps, type ToolbarToggleItemProps, type ToolbarTriggerButtonProps, type ToolbarTextToggleItemProps, } from './types';
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
+ *
+ * `Toolbar.Root` accepts an optional `colorScheme` (`light` | `dark`). Dark is a
+ * STOPGAP for Preview Context Toolbar only — see the dark remap block at the end of
+ * `toolbar.module.scss`. Do not treat this as Blueprint app-wide theming.
+ *
  * @example
  *   <Toolbar.Root>
  *       <Toolbar.ToggleGroup type="single">
@@ -21,10 +26,18 @@ export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarInputProps,
  *           Upload <Toolbar.DropdownIndicator direction="down" />
  *       </Toolbar.Button>
  *   </Toolbar.Root>
+ *
+ * @example Dark scheme (Preview Context Toolbar stopgap)
+ *   <Toolbar.Root colorScheme="dark" aria-label="Annotations">
+ *       <Toolbar.ToggleGroup type="single" value="markup">
+ *           <Toolbar.ToggleItem aria-label="markup" icon={Pencil} value="markup" />
+ *       </Toolbar.ToggleGroup>
+ *   </Toolbar.Root>
  */
 export declare const Toolbar: {
     /**
      * Contains all parts of the toolbar component.
+     * Optional `colorScheme` is a Preview stopgap — see module docs above.
      */
     Root: import("react").ForwardRefExoticComponent<import("./types").ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;
     /**

package/dist/lib-esm/toolbar/index.js

@@ -12,6 +12,11 @@ import { ToolbarTextToggleItem } from './toolbar-text-toggle-item.js';
 
 /**
  * A container for grouping a set of controls, such as buttons, toggle groups or dropdowns.
+ *
+ * `Toolbar.Root` accepts an optional `colorScheme` (`light` | `dark`). Dark is a
+ * STOPGAP for Preview Context Toolbar only — see the dark remap block at the end of
+ * `toolbar.module.scss`. Do not treat this as Blueprint app-wide theming.
+ *
  * @example
  *   <Toolbar.Root>
  *       <Toolbar.ToggleGroup type="single">
@@ -32,10 +37,18 @@ import { ToolbarTextToggleItem } from './toolbar-text-toggle-item.js';
  *           Upload <Toolbar.DropdownIndicator direction="down" />
  *       </Toolbar.Button>
  *   </Toolbar.Root>
+ *
+ * @example Dark scheme (Preview Context Toolbar stopgap)
+ *   <Toolbar.Root colorScheme="dark" aria-label="Annotations">
+ *       <Toolbar.ToggleGroup type="single" value="markup">
+ *           <Toolbar.ToggleItem aria-label="markup" icon={Pencil} value="markup" />
+ *       </Toolbar.ToggleGroup>
+ *   </Toolbar.Root>
  */
 const Toolbar = {
   /**
    * Contains all parts of the toolbar component.
+   * Optional `colorScheme` is a Preview stopgap — see module docs above.
    */
   Root: ToolbarRoot,
   /**

package/dist/lib-esm/toolbar/toolbar-dropdown-indicator.js

@@ -5,10 +5,12 @@ import clsx from 'clsx';
 import { forwardRef } from 'react';
 import styles from './toolbar.module.js';
 
-const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
+const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef((
+// CSS var keeps light carets at gray-50 (#909090); dark remaps the var on the scheme root.
+{
   direction = 'down',
   className,
-  color
+  color = 'var(--toolbar-dropdown-indicator-color)'
 }, forwardedRef) => {
   return jsx(ChevronDown, {
     ref: forwardedRef,

package/dist/lib-esm/toolbar/toolbar-icon.js

@@ -1,14 +1,15 @@
 import { jsx } from 'react/jsx-runtime';
-import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef } from 'react';
 import styles from './toolbar.module.js';
 
 const ToolbarIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  // Inherit from Toolbar item text color so light/dark schemes both work without a hardcoded fill.
   const {
     icon,
     className,
-    color = IconIconOnLight
+    color = 'currentColor'
   } = props;
   return jsx("span", {
     ref: forwardedRef,

package/dist/lib-esm/toolbar/toolbar-root.d.ts

@@ -1,2 +1,11 @@
 import { type ToolbarProps } from './types';
+/**
+ * Context Toolbar root.
+ *
+ * STOPGAP EXCEPTION — DO NOT COPY to other components.
+ * `colorScheme` is consumer-selected light|dark for Toolbar only until Launchpad
+ * ships a real theme/mode service (LXP-75). Expanding theming means rewriting,
+ * not cloning this prop + SCSS remap pattern. Figma drift risk is owned by Preview;
+ * keep dark/light VRTs green when changing remaps in `toolbar.module.scss`.
+ */
 export declare const ToolbarRoot: import("react").ForwardRefExoticComponent<ToolbarProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/toolbar/toolbar-root.js

@@ -6,6 +6,15 @@ import { ToolbarScrollableContainer } from './toolbar-scrollable-container.js';
 import styles from './toolbar.module.js';
 import { HorizontalScrollProvider } from './utils/horizontal-scroll-context.js';
 
+/**
+ * Context Toolbar root.
+ *
+ * STOPGAP EXCEPTION — DO NOT COPY to other components.
+ * `colorScheme` is consumer-selected light|dark for Toolbar only until Launchpad
+ * ships a real theme/mode service (LXP-75). Expanding theming means rewriting,
+ * not cloning this prop + SCSS remap pattern. Figma drift risk is owned by Preview;
+ * keep dark/light VRTs green when changing remaps in `toolbar.module.scss`.
+ */
 const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
@@ -16,13 +25,17 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ariaLabelPrevButton,
     maxWidth,
     scrollStep,
+    colorScheme = 'light',
     ...rest
   } = props;
+  // Emit the attribute only in dark mode so light Toolbars keep the same DOM as master.
+  const dataColorScheme = colorScheme === 'dark' ? colorScheme : undefined;
   if (scrollable) {
     return jsx(ToolbarPrimitive.Root, {
       ...rest,
       ref: forwardedRef,
       className: clsx(styles.toolbarRoot, styles.ScrollableToolbarWithReducedPadding, className),
+      "data-color-scheme": dataColorScheme,
       style: {
         ...style,
         maxWidth
@@ -32,6 +45,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         children: jsx(ToolbarScrollableContainer, {
           ariaLabelNextButton: ariaLabelNextButton,
           ariaLabelPrevButton: ariaLabelPrevButton,
+          colorScheme: colorScheme,
           children: children
         })
       })
@@ -41,6 +55,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarRoot, className),
+    "data-color-scheme": dataColorScheme,
     style: style,
     children: children
   });

package/dist/lib-esm/toolbar/toolbar-scrollable-container.d.ts

@@ -1,7 +1,9 @@
+import { type ToolbarColorScheme } from './types';
 interface ScrollableContainerProps {
     children: React.ReactNode;
     ariaLabelPrevButton: string;
     ariaLabelNextButton: string;
+    colorScheme?: ToolbarColorScheme;
 }
 export declare const ToolbarScrollableContainer: import("react").ForwardRefExoticComponent<ScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/lib-esm/toolbar/toolbar-scrollable-container.js

@@ -13,7 +13,8 @@ const ScrollButton = ({
   ariaLabel,
   onClick,
   icon: Icon,
-  separatorPosition
+  separatorPosition,
+  variant
 }) => jsxs("div", {
   className: clsx(styles.scrollButtonWrapper, {
     [styles.hidden]: hidden
@@ -21,14 +22,16 @@ const ScrollButton = ({
   children: [separatorPosition === 'before' && jsx(ToolbarSeparator, {}), jsx(IconButton, {
     "aria-label": ariaLabel,
     icon: Icon,
-    onClick: onClick
+    onClick: onClick,
+    variant: variant
   }), separatorPosition === 'after' && jsx(ToolbarSeparator, {})]
 });
 const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     ariaLabelPrevButton,
-    ariaLabelNextButton
+    ariaLabelNextButton,
+    colorScheme = 'light'
   } = props;
   const {
     scrollPosition,
@@ -36,6 +39,7 @@ const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef)
     scrollRight,
     onAttach
   } = useScrollContext();
+  const scrollButtonVariant = colorScheme === 'dark' ? 'on-dark' : 'default';
   const onMountRef = useRefWithEffectMemoized(forwardedRef, node => {
     onAttach(node);
   });
@@ -45,7 +49,8 @@ const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef)
       hidden: scrollPosition === 'start' || scrollPosition === 'none',
       icon: PointerChevronLeft,
       onClick: scrollLeft,
-      separatorPosition: "after"
+      separatorPosition: "after",
+      variant: scrollButtonVariant
     }), jsx("div", {
       ref: onMountRef,
       className: clsx(styles.scrollableChildrenWrapper),
@@ -56,7 +61,8 @@ const ToolbarScrollableContainer = /*#__PURE__*/forwardRef((props, forwardedRef)
       hidden: scrollPosition === 'end' || scrollPosition === 'none',
       icon: PointerChevronRight,
       onClick: scrollRight,
-      separatorPosition: "before"
+      separatorPosition: "before",
+      variant: scrollButtonVariant
     })]
   });
 });

package/dist/lib-esm/toolbar/toolbar-toggle-item.js

@@ -1,15 +1,16 @@
 import { jsxs } from 'react/jsx-runtime';
-import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
 import styles from './toolbar.module.js';
 
 const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  // Inherit from Toolbar item text color so light/dark schemes both work without a hardcoded fill.
   const {
     children,
     icon,
-    color = IconIconOnLight,
+    color = 'currentColor',
     ...rest
   } = props;
   return jsxs(ToolbarPrimitive.ToggleItem, {

package/dist/lib-esm/toolbar/toolbar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--eb4ca","invertCaret":"bp_toolbar_module_invertCaret--eb4ca","toolbarRoot":"bp_toolbar_module_toolbarRoot--eb4ca","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--eb4ca","toolbarItem":"bp_toolbar_module_toolbarItem--eb4ca","toolbarButton":"bp_toolbar_module_toolbarButton--eb4ca","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--eb4ca","toolbarLink":"bp_toolbar_module_toolbarLink--eb4ca","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--eb4ca","hidden":"bp_toolbar_module_hidden--eb4ca","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--eb4ca","separator":"bp_toolbar_module_separator--eb4ca","toggleGroup":"bp_toolbar_module_toggleGroup--eb4ca","toolbarToggle":"bp_toolbar_module_toolbarToggle--eb4ca","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--eb4ca","toolbarIcon":"bp_toolbar_module_toolbarIcon--eb4ca","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--eb4ca","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--eb4ca","toolbarInput":"bp_toolbar_module_toolbarInput--eb4ca","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--eb4ca","toolbarInputError":"bp_toolbar_module_toolbarInputError--eb4ca","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--eb4ca"};
+var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--36b15","invertCaret":"bp_toolbar_module_invertCaret--36b15","toolbarRoot":"bp_toolbar_module_toolbarRoot--36b15","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--36b15","toolbarItem":"bp_toolbar_module_toolbarItem--36b15","toolbarButton":"bp_toolbar_module_toolbarButton--36b15","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--36b15","toolbarLink":"bp_toolbar_module_toolbarLink--36b15","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--36b15","hidden":"bp_toolbar_module_hidden--36b15","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--36b15","separator":"bp_toolbar_module_separator--36b15","toggleGroup":"bp_toolbar_module_toggleGroup--36b15","toolbarToggle":"bp_toolbar_module_toolbarToggle--36b15","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--36b15","toolbarIcon":"bp_toolbar_module_toolbarIcon--36b15","toolbarLinkText":"bp_toolbar_module_toolbarLinkText--36b15","toolbarInputContainer":"bp_toolbar_module_toolbarInputContainer--36b15","toolbarInput":"bp_toolbar_module_toolbarInput--36b15","toolbarInputErrorIcon":"bp_toolbar_module_toolbarInputErrorIcon--36b15","toolbarInputError":"bp_toolbar_module_toolbarInputError--36b15","toolbarInputErrorIconHidden":"bp_toolbar_module_toolbarInputErrorIconHidden--36b15"};
 
 export { styles as default };

package/dist/lib-esm/toolbar/types.d.ts

@@ -1,5 +1,16 @@
 import { type ToolbarButtonProps as ToolbarPrimitiveButtonProps, type ToolbarLinkProps as ToolbarPrimitiveLinkProps, type ToolbarProps as ToolbarPrimitiveProps, type ToolbarSeparatorProps as ToolbarPrimitiveSeparatorProps, type ToolbarToggleItemProps as ToolbarPrimitiveToggleItemProps, type ToggleGroupProps as ToolbarToggleGroupPrimitiveProps } from '@radix-ui/react-toolbar';
 import { type CSSProperties, type FunctionComponent, type HTMLAttributes, type PropsWithChildren, type SVGProps } from 'react';
+/** Toolbar-only stopgap; not exported from the package root. */
+export type ToolbarColorScheme = 'light' | 'dark';
+interface ColorSchemeProps {
+    /**
+     * Color scheme of the toolbar. Independent of the page theme; the consumer chooses.
+     * Light remains the default so existing consumers are unchanged.
+     *
+     * @default 'light'
+     */
+    colorScheme?: ToolbarColorScheme;
+}
 interface ToolbarWithoutScrollProps {
     scrollable?: false;
 }
@@ -20,9 +31,9 @@ interface ToolbarWithScrollProps extends ToolbarScrollOptions {
     scrollable: true;
 }
 type ScrollProps = ToolbarWithoutScrollProps | ToolbarWithScrollProps;
-export type ToolbarProps = ToolbarPrimitiveProps & ScrollProps;
+export type ToolbarProps = ToolbarPrimitiveProps & ColorSchemeProps & ScrollProps;
 /** Scroll options can still be present at runtime when `scrollable` is falsy, e.g. `scrollable={isNarrow}`. */
-export type ToolbarRootRuntimeProps = ToolbarPrimitiveProps & ((ToolbarWithoutScrollProps & Partial<ToolbarScrollOptions>) | ToolbarWithScrollProps);
+export type ToolbarRootRuntimeProps = ToolbarPrimitiveProps & ColorSchemeProps & ((ToolbarWithoutScrollProps & Partial<ToolbarScrollOptions>) | ToolbarWithScrollProps);
 export type ToolbarSeparatorProps = ToolbarPrimitiveSeparatorProps;
 export type ToolbarToggleGroupProps = ToolbarToggleGroupPrimitiveProps;
 interface ToolbarButtonCSS extends CSSProperties {

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

@@ -25,6 +25,7 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
   const {
     children,
     className,
+    isDroppableTarget = true,
     loading = false,
     pinned = false,
     pinAriaLabel,
@@ -131,6 +132,8 @@ const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props
     // In V2 layouts, keep subtitle visible on hover/focus when there are no action buttons
     {
       [styles.noActions]: isV2Layout && !hasActions
+    }, {
+      [styles.droppableTarget]: isDroppableTarget
     }, className),
     textValue: textValue,
     children: jsxs(BaseGridListItemContext.Provider, {

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

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

@@ -139,5 +139,9 @@ export interface BaseGridListItemContextType {
 }
 export interface BaseGridListItemProps extends GridListItemProps, Omit<BaseGridListItemContextType, 'isItemInteracted' | 'setIsItemInteracted' | 'hasActions' | 'setHasActions'> {
     children?: ReactNode;
+    /**
+     * Set to `false` to style this item as an invalid drop target.
+     */
+    isDroppableTarget?: boolean;
 }
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.0.0",
+    "version": "18.2.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.11.14",
+        "@box/blueprint-web-assets": "^5.11.16",
         "@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.9",
+        "@box/storybook-utils": "^1.4.11",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",