@box/blueprint-web 18.5.6 → 18.7.0

package/dist/lib-esm/large-list-v2/index.d.ts

@@ -1,4 +1,4 @@
-export type { LargeListV2ActionIconButtonProps, LargeListV2ActionsProps, LargeListV2HeaderProps, LargeListV2ItemProps, LargeListV2Props, LargeListV2SubtitleProps, LargeListV2ThumbnailProps, } from './types';
+export type { LargeListV2ActionIconButtonProps, LargeListV2ActionsProps, LargeListV2DescriptionProps, LargeListV2HeaderProps, LargeListV2ItemProps, LargeListV2Props, LargeListV2SubtitleProps, LargeListV2ThumbnailProps, } from './types';
 /**
  * LargeListV2 - A modernized horizontal list component for displaying items in a compact row layout.
  *
@@ -31,6 +31,10 @@ export declare const LargeListV2: import("react").ForwardRefExoticComponent<impo
     }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /** Title/name of the item (15px/20px). */
     Header: import("react").ForwardRefExoticComponent<Omit<import("../util-components/base-grid-list-item").BaseGridListHeaderProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    /** Text between the title and subtitle. Wraps to three lines. */
+    Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /** Secondary text below the header (13px/20px). */
     Subtitle: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;

package/dist/lib-esm/large-list-v2/index.js

@@ -5,6 +5,7 @@ import { BaseGridListSubtitle } from '../util-components/base-grid-list-item/bas
 import { BaseGridListThumbnail } from '../util-components/base-grid-list-item/base-grid-list-item-thumbnail.js';
 import { LargeListV2Root } from './large-list-v2.js';
 import { LargeListV2Content } from './large-list-v2-content.js';
+import { LargeListV2Description } from './large-list-v2-description.js';
 
 /**
  * LargeListV2 - A modernized horizontal list component for displaying items in a compact row layout.
@@ -36,6 +37,8 @@ const LargeListV2 = Object.assign(LargeListV2Root, {
   Content: LargeListV2Content,
   /** Title/name of the item (15px/20px). */
   Header: BaseGridListHeader,
+  /** Text between the title and subtitle. Wraps to three lines. */
+  Description: LargeListV2Description,
   /** Secondary text below the header (13px/20px). */
   Subtitle: BaseGridListSubtitle,
   /** Container for action buttons and selection checkbox. */

package/dist/lib-esm/large-list-v2/large-list-v2-content.d.ts

@@ -1,6 +1,6 @@
 /**
  * Content wrapper for LargeListV2 items.
- * Groups the header and subtitle in a vertical stack.
+ * Renders with `display: contents`, so its children are laid out by the item grid.
  */
 export declare const LargeListV2Content: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;

package/dist/lib-esm/large-list-v2/large-list-v2-content.js

@@ -4,7 +4,7 @@ import styles from '../util-components/base-grid-list-item/base-grid-list-item.m
 
 /**
  * Content wrapper for LargeListV2 items.
- * Groups the header and subtitle in a vertical stack.
+ * Renders with `display: contents`, so its children are laid out by the item grid.
  */
 const LargeListV2Content = /*#__PURE__*/forwardRef(function LargeListV2Content(props, ref) {
   const {

package/dist/lib-esm/large-list-v2/large-list-v2-description.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Secondary content between the header and subtitle, e.g. breadcrumbs or a search snippet.
+ */
+export declare const LargeListV2Description: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/large-list-v2/large-list-v2-description.js

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Ghost } from '../ghost/ghost.js';
+import { useBaseGridListItemContext } from '../util-components/base-grid-list-item/base-grid-list-item.js';
+import styles from '../util-components/base-grid-list-item/base-grid-list-item.module.js';
+
+/**
+ * Secondary content between the header and subtitle, e.g. breadcrumbs or a search snippet.
+ */
+const LargeListV2Description = /*#__PURE__*/forwardRef(function LargeListV2Description(props, ref) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    loading
+  } = useBaseGridListItemContext();
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.listV2Description, {
+      [styles.loading]: loading
+    }, className),
+    children: loading ? jsx(Ghost, {
+      variant: "rectangle",
+      width: "25%"
+    }) : children
+  });
+});
+
+export { LargeListV2Description };

package/dist/lib-esm/large-list-v2/large-list-v2.figma.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib-esm/large-list-v2/types.d.ts

@@ -1,8 +1,9 @@
-import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../util-components/base-grid-list-item/types';
+import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps, type BaseGridListV2DescriptionProps } from '../util-components/base-grid-list-item/types';
 export type LargeListV2Props = Omit<BaseGridListProps, 'layoutStyle' | 'centerText' | 'variant'>;
 export type LargeListV2ItemProps = BaseGridListItemProps;
 export type LargeListV2ThumbnailProps = BaseGridListThumbnailProps;
 export type LargeListV2HeaderProps = BaseGridListHeaderProps;
 export type LargeListV2SubtitleProps = BaseGridListSubtitleProps;
+export type LargeListV2DescriptionProps = BaseGridListV2DescriptionProps;
 export type LargeListV2ActionsProps = BaseGridListActionsProps;
 export type LargeListV2ActionIconButtonProps = BaseGridListActionIconButtonProps;

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

@@ -14,6 +14,7 @@ import styles from './base-grid-list-item.module.js';
 import { RACButton } from './utils/rac-button.js';
 import { RACTooltip } from './utils/rac-tooltip.js';
 
+const hasChildren = children => children !== null && children !== undefined && children !== false;
 const BaseListActions = ({
   children,
   selectionEnabled,
@@ -24,10 +25,10 @@ const BaseListActions = ({
       className: styles.fade
     }), jsxs("div", {
       className: styles.actionsCheckboxWrapper,
-      children: [jsx("div", {
+      children: [hasChildren(children) ? jsx("div", {
         className: styles.inner,
         children: children
-      }), selectionEnabled && jsx(ListCheckbox, {
+      }) : null, selectionEnabled && jsx(ListCheckbox, {
         className: styles.selection,
         isDisabled: isSelectionCheckboxDisabled
       })]
@@ -41,11 +42,10 @@ const GridListActions = ({
   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]);
+    setHasActions(hasChildren(children));
+  }, [children, setHasActions]);
   return jsxs(Fragment, {
     children: [selectionEnabled && jsx(ListCheckbox, {
       className: styles.selection,

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

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, GridV2Variant, } from './types';
+export type { BaseGridListActionIconButtonProps, BaseGridListActionsProps, BaseGridListDescriptionProps, BaseGridListV2DescriptionProps, BaseGridListHeaderProps, BaseGridListItemProps, BaseGridListProps, BaseGridListSubtitleProps, BaseGridListThumbnailProps, GridV2Variant, } from './types';

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

@@ -129,6 +129,8 @@ export type BaseGridListThumbnailProps = ComponentPropsWithRef<'div'> & {
 };
 export type BaseGridListSubtitleProps = ComponentPropsWithRef<'span'>;
 export type BaseGridListDescriptionProps = ComponentPropsWithRef<'p'>;
+/** LargeListV2 description. A div so it can wrap non-phrasing content (v1 uses `p`). */
+export type BaseGridListV2DescriptionProps = ComponentPropsWithRef<'div'>;
 export type BaseGridListActionsProps = Modify<ComponentPropsWithRef<'div'>, {
     children: ReactNode | ((setIsInteracted: (open: boolean) => void) => ReactNode);
     isSelectionCheckboxDisabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.5.6",
+    "version": "18.7.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.13.3",
+        "@box/blueprint-web-assets": "^5.13.5",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -85,7 +85,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.22",
+        "@box/storybook-utils": "^1.4.24",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",