@box/blueprint-web 7.4.5 → 7.6.0

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

@@ -67,6 +67,6 @@ export declare const GridList: import("react").ForwardRefExoticComponent<import(
      * Styled wrapper over an icon button.
      * Ensures proper behaviour when used in a grid list item.
      */
-    ActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    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 { GridListActionIconButtonProps, GridListActionsProps, GridListDescriptionProps, GridListHeaderProps, GridListItemProps, GridListProps, GridListSubtitleProps, GridListThumbnailProps, } from './types';

package/lib-esm/index.css

@@ -1066,7 +1066,7 @@
   cursor:default;
 }
 
-.bp_icon_button_module_iconButton--12d63{
+.bp_icon_button_module_iconButton--a3df7{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border:0;
@@ -1077,64 +1077,82 @@
   justify-content:center;
   padding:0;
 }
-.bp_icon_button_module_iconButton--12d63 .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--icon-cta-icon);
 }
-.bp_icon_button_module_iconButton--12d63[aria-disabled=true]{
+.bp_icon_button_module_iconButton--a3df7[aria-disabled=true]{
   background:var(--surface-cta-surface-icon-disabled);
   opacity:.3;
 }
-.bp_icon_button_module_iconButton--12d63[aria-disabled=true] .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7[aria-disabled=true] .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--gray-50);
 }
-.bp_icon_button_module_iconButton--12d63:focus-visible{
+.bp_icon_button_module_iconButton--a3df7:focus-visible{
   outline:none;
 }
-.bp_icon_button_module_iconButton--12d63[data-focus-visible]{
+.bp_icon_button_module_iconButton--a3df7[data-focus-visible]{
   outline:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_icon_button_module_iconButton--12d63:hover,.bp_icon_button_module_iconButton--12d63[data-focus-visible]{
+.bp_icon_button_module_iconButton--a3df7:hover,.bp_icon_button_module_iconButton--a3df7[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--12d63:hover .bp_icon_button_module_iconColor--12d63 *,.bp_icon_button_module_iconButton--12d63[data-focus-visible] .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_icon_button_module_iconButton--12d63:active,.bp_icon_button_module_iconButton--12d63[data-active]{
+.bp_icon_button_module_iconButton--a3df7:active,.bp_icon_button_module_iconButton--a3df7[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--12d63:active .bp_icon_button_module_iconColor--12d63 *,.bp_icon_button_module_iconButton--12d63[data-active] .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--icon-cta-icon-pressed);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_large--12d63{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_large--a3df7{
   height:var(--size-10);
   width:var(--size-10);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_small--12d63{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small--a3df7{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_x-small--12d63{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_x-small--a3df7{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7{
   background:var(--surface-cta-surface-icon);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63 .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--icon-cta-icon-on-color);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63:hover,.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63[data-focus-visible]{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:hover,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63:hover .bp_icon_button_module_iconColor--12d63 *,.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63[data-focus-visible] .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--icon-cta-icon-on-color-hover);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63:active,.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63[data-active]{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:active,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63:active .bp_icon_button_module_iconColor--12d63 *,.bp_icon_button_module_iconButton--12d63.bp_icon_button_module_highContrast--12d63[data-active] .bp_icon_button_module_iconColor--12d63 *{
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
   fill:var(--icon-cta-icon-on-color-pressed);
 }
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7{
+  background:var(--surface-cta-surface-icon-utility);
+}
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
+  fill:var(--icon-cta-icon-utility);
+}
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:hover,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-focus-visible]{
+  background:var(--surface-cta-surface-icon-utility-hover);
+}
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+  fill:var(--icon-cta-icon-utility-hover);
+}
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:active,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-active]{
+  background:var(--surface-cta-surface-icon-utility-pressed);
+}
+.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+  fill:var(--icon-cta-icon-utility-pressed);
+}
 
 .bp_collapsible_section_module_collapsibleSection--f411c{
   width:100%;

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

@@ -81,6 +81,6 @@ export declare const LargeList: import("react").ForwardRefExoticComponent<import
      * Styled wrapper over an icon button.
      * Ensures proper behaviour when used in a large list item.
      */
-    ActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    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 { LargeListActionIconButtonProps, LargeListActionsProps, LargeListDescriptionProps, LargeListHeaderProps, LargeListItemProps, LargeListProps, LargeListSubtitleProps, LargeListThumbnailProps, LargeListSnippetProps, } from './types';

package/lib-esm/primitives/icon-button/icon-button.d.ts

@@ -1,3 +1,2 @@
 /// <reference types="react" />
-import { type IconButtonProps } from './types';
-export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+export declare const IconButton: import("react").ForwardRefExoticComponent<(Omit<import("./types").IconButtonVariantsProps, "ref"> | Omit<import("./types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLElement>>;

package/lib-esm/primitives/icon-button/icon-button.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { forwardRef, useRef, createElement } from 'react';
 import { useForkRef } from '../../utils/useForkRef.js';
 import styles from './icon-button.module.js';
-import { iconSizeMap } from './utils.js';
+import { getIconSize } from './utils.js';
 
 const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -17,13 +17,11 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Button, {
     ...rest,
     ref: useForkRef(ref, forwardedRef),
-    className: clsx([styles.iconButton, styles[size], {
-      [styles.highContrast]: variant === 'high-contrast'
-    }], props.className),
+    className: clsx([styles.iconButton, styles[size], styles[variant]], props.className),
     children: /*#__PURE__*/createElement(icon, {
       className: styles.iconColor,
-      height: iconSizeMap[size],
-      width: iconSizeMap[size],
+      height: getIconSize(props),
+      width: getIconSize(props),
       role: 'presentation'
     })
   });

package/lib-esm/primitives/icon-button/icon-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"iconButton":"bp_icon_button_module_iconButton--12d63","iconColor":"bp_icon_button_module_iconColor--12d63","large":"bp_icon_button_module_large--12d63","small":"bp_icon_button_module_small--12d63","x-small":"bp_icon_button_module_x-small--12d63","highContrast":"bp_icon_button_module_highContrast--12d63"};
+var styles = {"iconButton":"bp_icon_button_module_iconButton--a3df7","iconColor":"bp_icon_button_module_iconColor--a3df7","large":"bp_icon_button_module_large--a3df7","small":"bp_icon_button_module_small--a3df7","x-small":"bp_icon_button_module_x-small--a3df7","high-contrast":"bp_icon_button_module_high-contrast--a3df7","small-utility":"bp_icon_button_module_small-utility--a3df7"};
 
 export { styles as default };

package/lib-esm/primitives/icon-button/types.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
 import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
-export interface IconButtonProps extends AriakitButtonProps {
+interface IconButtonCommonProps extends AriakitButtonProps {
     /**
      * Accessible label for the button.
      */
@@ -9,16 +9,30 @@ export interface IconButtonProps extends AriakitButtonProps {
      * Icon that will be rendered.
      */
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+}
+export interface IconButtonVariantsProps extends IconButtonCommonProps {
+    /**
+     * The variant of the button.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'high-contrast';
     /**
      * Size of the button.
      *
      * @default 'small'
      */
     size?: 'x-small' | 'small' | 'large';
+}
+export interface IconButtonSmallUtilityVariantProps extends IconButtonCommonProps {
     /**
      * The variant of the button.
-     *
-     * @default 'default'
      */
-    variant?: 'default' | 'high-contrast';
+    variant: 'small-utility';
+    /**
+     * The only acceptable size for the small-utility variant is 'small'.
+     */
+    size: 'small';
 }
+export type IconButtonProps = IconButtonVariantsProps | IconButtonSmallUtilityVariantProps;
+export {};

package/lib-esm/primitives/icon-button/utils.d.ts

@@ -1,3 +1,3 @@
 import { type IconButtonProps } from './types';
-declare const iconSizeMap: Record<NonNullable<IconButtonProps['size']>, string>;
-export { iconSizeMap };
+declare function getIconSize(props: IconButtonProps): string;
+export { getIconSize };

package/lib-esm/primitives/icon-button/utils.js

@@ -5,5 +5,11 @@ const iconSizeMap = {
   small: Size5,
   large: Size6
 };
+function getIconSize(props) {
+  if (props.variant === 'small-utility') {
+    return Size4;
+  }
+  return iconSizeMap[props.size || 'small'];
+}
 
-export { iconSizeMap };
+export { getIconSize };

package/lib-esm/search-input/index.d.ts

@@ -3,7 +3,11 @@ export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit
     /**
      * Styled wrapper over an icon button.
      */
-    ActionButton: import("react").ForwardRefExoticComponent<Omit<import("./types").SearchInputActionButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    ActionButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/icon-button/types").IconButtonVariantsProps & {
+        searchInputActionButtonTooltip?: string | undefined;
+    }, "ref"> | Omit<import("../primitives/icon-button/types").IconButtonSmallUtilityVariantProps & {
+        searchInputActionButtonTooltip?: string | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     Controlled: import("react").ForwardRefExoticComponent<Omit<import("./search-input-controlled").SearchInputControlledProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 };
 export type { SearchInputActionButtonProps, SearchInputProps } from './types';

package/lib-esm/search-input/search-input-action-button.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-import { type SearchInputActionButtonProps } from './types';
-export declare const SearchInputActionButton: import("react").ForwardRefExoticComponent<Omit<SearchInputActionButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const SearchInputActionButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/icon-button/types").IconButtonVariantsProps & {
+    searchInputActionButtonTooltip?: string | undefined;
+}, "ref"> | Omit<import("../primitives/icon-button/types").IconButtonSmallUtilityVariantProps & {
+    searchInputActionButtonTooltip?: string | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -56,6 +56,6 @@ export declare const SmallList: import("react").ForwardRefExoticComponent<import
     /**
      * Styled wrapper over an icon button.
      */
-    ActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    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 { SmallListActionIconButtonProps, SmallListActionsProps, SmallListHeaderProps, SmallListItemProps, SmallListProps, SmallListSubtitleProps, SmallListThumbnailProps, } from './types';

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { type BaseGridListActionsProps } from './types';
-export declare const BaseGridListActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../../primitives/icon-button").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const BaseGridListActionIconButton: import("react").ForwardRefExoticComponent<(Omit<import("../../primitives/icon-button/types").IconButtonVariantsProps, "ref"> | Omit<import("../../primitives/icon-button/types").IconButtonSmallUtilityVariantProps, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
 export declare const BaseGridListActions: import("react").ForwardRefExoticComponent<Omit<BaseGridListActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -79,7 +79,8 @@ const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridLi
     ...props,
     ref: forwardedRef,
     render: render,
-    size: size
+    size: size,
+    variant: "default"
   });
 });
 const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions(props, forwardedRef) {

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

@@ -34,6 +34,6 @@ export declare const BaseGridList: import("react").ForwardRefExoticComponent<imp
      * Styled wrapper over an icon button.
      * Ensures proper behaviour when used in a grid list item.
      */
-    ActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    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, } from './types';

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

@@ -21,6 +21,7 @@ const StaticGridListItem = /*#__PURE__*/React__default.forwardRef((props, ref) =
     }
   };
   const mergedProps = mergeProps(rest, {
+    id,
     onClick: handleOnClick,
     role: 'row',
     'aria-label': textValue

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.4.5",
+    "version": "7.6.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -58,7 +58,7 @@
         "@box/storybook-utils": "^0.2.1",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "d498500e2ffb80ee401773086c239139b62c8e0d",
+    "gitHead": "c9bbabf657c8ecd41c1fc8e4a7f4c958ec4d2ad3",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {