@box/blueprint-web 6.7.0 → 6.8.0

package/lib-esm/basics/grid-list-item/index.d.ts

@@ -47,9 +47,7 @@ export declare const GridList: import("react").ForwardRefExoticComponent<import(
     /**
      * Styled wrapper over and image or icon.
      */
-    Thumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumbnail: import("react").ForwardRefExoticComponent<Omit<import("../../util-components/base-grid-list-item").BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Styled wrapper over the title of an item and potential Status components.
      */

package/lib-esm/basics/large-list-item/index.d.ts

@@ -51,9 +51,7 @@ export declare const LargeList: import("react").ForwardRefExoticComponent<import
     /**
      * Styled wrapper over an image or icon.
      */
-    Thumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumbnail: import("react").ForwardRefExoticComponent<Omit<import("../../util-components/base-grid-list-item").BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Styled wrapper over the title of an item and potential Status components.
      */

package/lib-esm/basics/small-list-item/index.d.ts

@@ -10,15 +10,23 @@
                 <SmallList.Thumbnail>
                     <img/>
                 </SmallList.Thumbnail>
-                
+
                 <SmallList.Header>
                     Title Placeholder
                 </SmallList.Header>
-                
+
                 <SmallList.Subtitle>
                     Subtitle Placeholder
                 </SmallList.Subtitle>
 
+                <SmallList.Actions>
+                    <SmallList.ActionIconButton
+                        aria-label="delete item"
+                        icon={XMark}
+                        onClick={e => console.log('Event is clicked', e)}
+                    />
+                </SmallList.Actions>
+
             </SmallList.Item>
         </SmallList>
  */
@@ -30,9 +38,7 @@ export declare const SmallList: import("react").ForwardRefExoticComponent<import
     /**
      * Styled wrapper over an image or icon.
      */
-    Thumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumbnail: import("react").ForwardRefExoticComponent<Omit<import("../../util-components/base-grid-list-item").BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Styled wrapper over the title of an item.
      */
@@ -43,5 +49,13 @@ export declare const SmallList: import("react").ForwardRefExoticComponent<import
     Subtitle: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
         ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    /**
+     * Styled wrapper over the actions of an item.
+     */
+    Actions: import("react").ForwardRefExoticComponent<Omit<import("../../util-components/base-grid-list-item").BaseGridListActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Styled wrapper over an icon button.
+     */
+    ActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
-export type { SmallListProps, SmallListHeaderProps, SmallListSubtitleProps, SmallListThumbnailProps, SmallListItemProps, } from './types';
+export type { SmallListActionIconButtonProps, SmallListActionsProps, SmallListHeaderProps, SmallListItemProps, SmallListProps, SmallListSubtitleProps, SmallListThumbnailProps, } from './types';

package/lib-esm/basics/small-list-item/index.js

@@ -12,15 +12,23 @@ import { SmallList as SmallList$1 } from './small-list.js';
                 <SmallList.Thumbnail>
                     <img/>
                 </SmallList.Thumbnail>
-                
+
                 <SmallList.Header>
                     Title Placeholder
                 </SmallList.Header>
-                
+
                 <SmallList.Subtitle>
                     Subtitle Placeholder
                 </SmallList.Subtitle>
 
+                <SmallList.Actions>
+                    <SmallList.ActionIconButton
+                        aria-label="delete item"
+                        icon={XMark}
+                        onClick={e => console.log('Event is clicked', e)}
+                    />
+                </SmallList.Actions>
+
             </SmallList.Item>
         </SmallList>
  */
@@ -40,7 +48,15 @@ const SmallList = Object.assign(SmallList$1, {
   /**
    * Styled wrapper over the subtitle of an item.
    */
-  Subtitle: BaseGridList.Subtitle
+  Subtitle: BaseGridList.Subtitle,
+  /**
+   * Styled wrapper over the actions of an item.
+   */
+  Actions: BaseGridList.Actions,
+  /**
+   * Styled wrapper over an icon button.
+   */
+  ActionIconButton: BaseGridList.ActionIconButton
 });
 
 export { SmallList };

package/lib-esm/basics/small-list-item/types.d.ts

@@ -1,4 +1,6 @@
-import { type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../../util-components/base-grid-list-item';
+import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../../util-components/base-grid-list-item';
+export type SmallListActionIconButtonProps = BaseGridListActionIconButtonProps;
+export type SmallListActionsProps = BaseGridListActionsProps;
 export type SmallListHeaderProps = BaseGridListHeaderProps;
 export type SmallListThumbnailProps = BaseGridListThumbnailProps;
 export type SmallListSubtitleProps = BaseGridListSubtitleProps;

package/lib-esm/index.css

@@ -1260,16 +1260,18 @@
   width:auto;
 }
 .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw{
+  --actions-opacity:0;
   --thumbnail-size:var(--size-9);
   --item-background:var(--surface-item-small-surface);
   --item-hover:var(--surface-item-small-surface-hover);
+  align-items:center;
   background:var(--item-background);
   border-radius:var(--radius-4);
   column-gap:var(--space-3);
   cursor:default;
   display:grid;
-  grid-template-areas:"thumbnail head" "thumbnail subtitle";
-  grid-template-columns:var(--thumbnail-size) auto;
+  grid-template-areas:"thumbnail head actions" "thumbnail subtitle actions";
+  grid-template-columns:var(--thumbnail-size) auto auto;
   outline:none;
   padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3);
   position:relative;
@@ -1277,11 +1279,13 @@
   width:auto;
 }
 .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw.base-grid-list-item-module_loading__u4wHh{
+  grid-template-columns:var(--thumbnail-size) auto 0;
   grid-template-rows:100% 0;
 }
 .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_thumbnail__hzNRu{
   align-items:center;
   aspect-ratio:1;
+  display:flex;
   grid-area:thumbnail;
   justify-content:center;
   overflow:hidden;
@@ -1293,6 +1297,12 @@
   object-position:left;
   width:100%;
 }
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_thumbnail__hzNRu.base-grid-list-item-module_customSize__eWPZX img,.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_thumbnail__hzNRu.base-grid-list-item-module_customSize__eWPZX svg{
+  height:unset;
+  max-height:100%;
+  max-width:100%;
+  width:unset;
+}
 .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_header__8Cd7A{
   color:var(--text-text-on-light);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -1325,10 +1335,57 @@
   text-overflow:ellipsis;
   white-space:nowrap;
 }
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw:not(:has(.base-grid-list-item-module_header__8Cd7A)),.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw:not(:has(.base-grid-list-item-module_subtitle__NKkK0)){
+  grid-template-rows:100% 0;
+  row-gap:0;
+}
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J{
+  align-items:center;
+  display:flex;
+  grid-area:actions;
+  height:var(--space-6);
+  justify-content:flex-end;
+  opacity:var(--actions-opacity);
+  padding-right:0;
+}
+@media (pointer: coarse){
+  .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J{
+    --actions-opacity:1;
+  }
+}
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J .base-grid-list-item-module_selection__hs7YE{
+  align-items:center;
+  background:var(--item-background);
+  border-radius:var(--radius-2);
+  display:flex;
+  height:var(--space-8);
+  justify-content:center;
+  width:var(--space-8);
+}
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J .base-grid-list-item-module_selection__hs7YE:hover{
+  background:var(--surface-cta-surface-icon-hover);
+}
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J .base-grid-list-item-module_inner__rLb2D{
+  align-items:center;
+  border-radius:var(--radius-2);
+  display:flex;
+  gap:var(--space-2);
+  justify-content:flex-end;
+  margin-inline-end:var(--space-2);
+}
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J .base-grid-list-item-module_inner__rLb2D:last-child{
+  margin-inline-end:0;
+}
+.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw .base-grid-list-item-module_actions__tlu5J .base-grid-list-item-module_actionsCheckboxWrapper__51sTV{
+  background:var(--item-hover);
+  display:flex;
+}
 .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw[data-focus-visible],.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw[data-focused],.base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw[data-hovered]{
+  --actions-opacity:1;
   background:var(--item-hover);
 }
 .base-grid-list-item-module_smallList__8lWoC .base-grid-list-item-module_smallListItem__MAhGw[data-focus-visible]::before{
+  --actions-opacity:1;
   border-radius:.875rem;
   content:"";
   display:block;

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

@@ -14,7 +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 LargeListActions = ({
+const BaseListActions = ({
   children,
   selectionEnabled
 }) => {
@@ -49,6 +49,7 @@ const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridLi
   // DOM props are e.g handlers passed from DropdownTrigger
   const {
     onClick,
+    size = 'small',
     ...domProps
   } = props;
   const render = useCallback(ariakitProps => {
@@ -78,7 +79,7 @@ const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridLi
     ...props,
     ref: forwardedRef,
     render: render,
-    size: "small"
+    size: size
   });
 });
 const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions(props, forwardedRef) {
@@ -102,7 +103,7 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
   if (loading) {
     return null;
   }
-  const isList = layout === 'list';
+  const isList = layout === 'list' || layout === 'small-list';
   const isSelectionEnabled = selectionMode === 'multiple';
   const isRenderPropUsed = typeof children === 'function';
   return jsxs(Fragment, {
@@ -110,7 +111,7 @@ const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions
       ...rest,
       ref: forkRef,
       className: clsx(styles.actions, className),
-      children: isList ? jsx(LargeListActions, {
+      children: isList ? jsx(BaseListActions, {
         selectionEnabled: isSelectionEnabled,
         children: isRenderPropUsed ? children(setIsItemInteracted) : children
       }) : jsx(GridListActions, {

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

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-export declare const BaseGridListThumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+import { type BaseGridListThumbnailProps } from './types';
+export declare const BaseGridListThumbnail: import("react").ForwardRefExoticComponent<Omit<BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -9,6 +9,7 @@ const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumb
   const {
     children,
     className,
+    hasCustomSize,
     ...rest
   } = props;
   const {
@@ -19,6 +20,8 @@ const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumb
     ref: forwardedRef,
     className: clsx(styles.thumbnail, {
       [styles.loading]: loading
+    }, {
+      [styles.customSize]: hasCustomSize
     }, className),
     children: loading ? jsx(Ghost, {
       borderRadius: "0.5rem",

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"smallList":"base-grid-list-item-module_smallList__8lWoC","smallListItem":"base-grid-list-item-module_smallListItem__MAhGw","loading":"base-grid-list-item-module_loading__u4wHh","thumbnail":"base-grid-list-item-module_thumbnail__hzNRu","header":"base-grid-list-item-module_header__8Cd7A","subtitle":"base-grid-list-item-module_subtitle__NKkK0","largeList":"base-grid-list-item-module_largeList__RTycT","largeListItem":"base-grid-list-item-module_largeListItem__ikeWj","actions":"base-grid-list-item-module_actions__tlu5J","selection":"base-grid-list-item-module_selection__hs7YE","fade":"base-grid-list-item-module_fade__iMTDj","inner":"base-grid-list-item-module_inner__rLb2D","actionsCheckboxWrapper":"base-grid-list-item-module_actionsCheckboxWrapper__51sTV","description":"base-grid-list-item-module_description__peDK8","snippet":"base-grid-list-item-module_snippet__DyZBh","snippetContent":"base-grid-list-item-module_snippetContent__98AuK","react-aria-DropIndicator":"base-grid-list-item-module_react-aria-DropIndicator__KtS-o","gridList":"base-grid-list-item-module_gridList__9TIux","gridListItem":"base-grid-list-item-module_gridListItem__CIHkV","statusPin":"base-grid-list-item-module_statusPin__UPlTb","isItemInteracted":"base-grid-list-item-module_isItemInteracted__FbAYE","tooltipContent":"base-grid-list-item-module_tooltipContent__8oeUV","tooltipArrow":"base-grid-list-item-module_tooltipArrow__xIXK-"};
+var styles = {"smallList":"base-grid-list-item-module_smallList__8lWoC","smallListItem":"base-grid-list-item-module_smallListItem__MAhGw","loading":"base-grid-list-item-module_loading__u4wHh","thumbnail":"base-grid-list-item-module_thumbnail__hzNRu","customSize":"base-grid-list-item-module_customSize__eWPZX","header":"base-grid-list-item-module_header__8Cd7A","subtitle":"base-grid-list-item-module_subtitle__NKkK0","actions":"base-grid-list-item-module_actions__tlu5J","selection":"base-grid-list-item-module_selection__hs7YE","inner":"base-grid-list-item-module_inner__rLb2D","actionsCheckboxWrapper":"base-grid-list-item-module_actionsCheckboxWrapper__51sTV","largeList":"base-grid-list-item-module_largeList__RTycT","largeListItem":"base-grid-list-item-module_largeListItem__ikeWj","fade":"base-grid-list-item-module_fade__iMTDj","description":"base-grid-list-item-module_description__peDK8","snippet":"base-grid-list-item-module_snippet__DyZBh","snippetContent":"base-grid-list-item-module_snippetContent__98AuK","react-aria-DropIndicator":"base-grid-list-item-module_react-aria-DropIndicator__KtS-o","gridList":"base-grid-list-item-module_gridList__9TIux","gridListItem":"base-grid-list-item-module_gridListItem__CIHkV","statusPin":"base-grid-list-item-module_statusPin__UPlTb","isItemInteracted":"base-grid-list-item-module_isItemInteracted__FbAYE","tooltipContent":"base-grid-list-item-module_tooltipContent__8oeUV","tooltipArrow":"base-grid-list-item-module_tooltipArrow__xIXK-"};
 
 export { styles as default };

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

@@ -14,9 +14,7 @@ export declare const BaseGridList: import("react").ForwardRefExoticComponent<imp
     /**
      * Styled wrapper over and image or icon.
      */
-    Thumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Thumbnail: import("react").ForwardRefExoticComponent<Omit<import("./types").BaseGridListThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * Styled wrapper over the title of an item and potential Status components.
      */

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

@@ -13,7 +13,9 @@ export declare enum ListLayout {
 export type BaseGridListHeaderProps = ComponentPropsWithRef<'span'> & {
     textValue?: string;
 };
-export type BaseGridListThumbnailProps = ComponentPropsWithRef<'div'>;
+export type BaseGridListThumbnailProps = ComponentPropsWithRef<'div'> & {
+    hasCustomSize?: boolean;
+};
 export type BaseGridListSubtitleProps = ComponentPropsWithRef<'span'>;
 export type BaseGridListDescriptionProps = ComponentPropsWithRef<'p'>;
 export type BaseGridListActionsProps = Modify<ComponentPropsWithRef<'div'>, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.7.0",
+    "version": "6.8.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -56,7 +56,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "0ea8e47adeb6bd6eac16828ed06540ffda462f80",
+    "gitHead": "b85b77d7dd12faeedf014cbd0e92159e49ec6530",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {