@box/blueprint-web 6.16.0 → 6.18.0

package/lib-esm/index.css

@@ -791,7 +791,7 @@
   top:0;
 }
 
-.icon_button_module_iconButton--19afc{
+.icon_button_module_iconButton--5ec37{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border:0;
@@ -802,44 +802,47 @@
   justify-content:center;
   padding:0;
 }
-.icon_button_module_iconButton--19afc .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37 .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon);
 }
-.icon_button_module_iconButton--19afc[aria-disabled=true]{
+.icon_button_module_iconButton--5ec37[aria-disabled=true]{
   background:var(--surface-cta-surface-icon-disabled);
   opacity:.3;
 }
-.icon_button_module_iconButton--19afc[aria-disabled=true] .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37[aria-disabled=true] .icon_button_module_iconColor--5ec37 *{
   fill:var(--gray-50);
 }
-.icon_button_module_iconButton--19afc:focus-visible,.icon_button_module_iconButton--19afc[data-focus-visible]{
+.icon_button_module_iconButton--5ec37:focus-visible{
+  outline:none;
+}
+.icon_button_module_iconButton--5ec37[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
   outline:var(--border-2) solid var(--outline-focus-on-light);
 }
-.icon_button_module_iconButton--19afc:focus-visible .icon_button_module_iconColor--19afc *,.icon_button_module_iconButton--19afc[data-focus-visible] .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37[data-focus-visible] .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon-hover);
 }
-.icon_button_module_iconButton--19afc:hover{
+.icon_button_module_iconButton--5ec37:hover{
   background:var(--surface-cta-surface-icon-hover);
 }
-.icon_button_module_iconButton--19afc:hover .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37:hover .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon-hover);
 }
-.icon_button_module_iconButton--19afc:active,.icon_button_module_iconButton--19afc[data-active]{
+.icon_button_module_iconButton--5ec37:active,.icon_button_module_iconButton--5ec37[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.icon_button_module_iconButton--19afc:active .icon_button_module_iconColor--19afc *,.icon_button_module_iconButton--19afc[data-active] .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37:active .icon_button_module_iconColor--5ec37 *,.icon_button_module_iconButton--5ec37[data-active] .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon-pressed);
 }
-.icon_button_module_iconButton--19afc.icon_button_module_large--19afc{
+.icon_button_module_iconButton--5ec37.icon_button_module_large--5ec37{
   height:var(--size-10);
   width:var(--size-10);
 }
-.icon_button_module_iconButton--19afc.icon_button_module_small--19afc{
+.icon_button_module_iconButton--5ec37.icon_button_module_small--5ec37{
   height:var(--size-8);
   width:var(--size-8);
 }
-.icon_button_module_iconButton--19afc.icon_button_module_x-small--19afc{
+.icon_button_module_iconButton--5ec37.icon_button_module_x-small--5ec37{
   height:var(--size-6);
   width:var(--size-6);
 }
@@ -5610,7 +5613,7 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.toolbar_module_toolbarRoot--66b77{
+.toolbar_module_toolbarRoot--d025f{
   align-items:center;
   background:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
@@ -5621,19 +5624,20 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding:calc(var(--space-1) - var(--border-1));
 }
 
-.toolbar_module_separator--66b77{
+.toolbar_module_separator--d025f{
   background-color:var(--border-divider-border);
   border-radius:var(--radius-2);
   height:var(--size-6);
   width:1px;
 }
 
-.toolbar_module_toggleGroup--66b77,.toolbar_module_toolbarItem--66b77{
+.toolbar_module_toggleGroup--d025f,.toolbar_module_toolbarItem--d025f{
   display:flex;
   gap:var(--space-1);
 }
 
-.toolbar_module_toolbarItem--66b77{
+.toolbar_module_toolbarItem--d025f{
+  --toolbar-item-hover-opacity:0.3;
   align-items:center;
   background:var(--toolbar-button-color, var(--surface-toggle-surface));
   border:var(--border-1) solid #0000;
@@ -5648,39 +5652,48 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   -webkit-user-select:none;
           user-select:none;
 }
-.toolbar_module_toolbarItem--66b77[data-disabled]{
+.toolbar_module_toolbarItem--d025f[data-disabled]{
   background:var(--surface-toggle-surface);
-  opacity:.3;
+  opacity:var(--toolbar-item-hover-opacity);
   pointer-events:none;
 }
-.toolbar_module_toolbarItem--66b77:not([data-disabled]):focus-visible{
+.toolbar_module_toolbarItem--d025f:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.toolbar_module_toolbarItem--66b77:not([data-disabled]):hover{
+.toolbar_module_toolbarItem--d025f:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
   border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
 }
 
-.toolbar_module_toolbarToggle--66b77[data-state=on]{
+.toolbar_module_toolbarToggle--d025f[data-state=on]{
   background:var(--surface-toggle-surface-pressed);
 }
-.toolbar_module_toolbarToggle--66b77[data-state=on] svg *{
+.toolbar_module_toolbarToggle--d025f[data-state=on] svg *{
   fill:var(--icon-icon-on-dark);
 }
-.toolbar_module_toolbarToggle--66b77[data-state=on]:not([data-disabled]):hover{
+.toolbar_module_toolbarToggle--d025f[data-state=on]:not([data-disabled]):hover{
   background:var(--surface-toggle-surface-on-hover);
   border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
 }
 
-.toolbar_module_invertDropdownIndicator--66b77{
+.toolbar_module_dropdownIndicator--d025f.toolbar_module_invertCaret--d025f{
   transform:rotate(.5turn);
 }
 
-.toolbar_module_triggerButtonSelectedWithColor--66b77[data-state=on]:hover{
-  opacity:.7;
+.toolbar_module_triggerButtonSelectedWithColor--d025f{
+  --trigger-button-hover-opacity:0.7;
+}
+.toolbar_module_triggerButtonSelectedWithColor--d025f[data-state=on] .toolbar_module_dropdownIndicator--d025f path{
+  fill:var(--icon-icon-on-light);
+}
+.toolbar_module_triggerButtonSelectedWithColor--d025f[data-state=on]:hover{
+  opacity:var(--trigger-button-hover-opacity);
+}
+.toolbar_module_triggerButtonSelectedWithColor--d025f[data-state=on] [data-disabled] .toolbar_module_dropdownIndicator--d025f path,.toolbar_module_triggerButtonSelectedWithColor--d025f[data-state=on]:focus-visible .toolbar_module_dropdownIndicator--d025f path,.toolbar_module_triggerButtonSelectedWithColor--d025f[data-state=on]:hover .toolbar_module_dropdownIndicator--d025f path{
+  fill:var(--icon-icon-on-light-tertiary);
 }
 
-.toolbar_module_toolbarIcon--66b77{
+.toolbar_module_toolbarIcon--d025f{
   align-items:center;
   display:flex;
   height:var(--size-5);

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"iconButton":"icon_button_module_iconButton--19afc","iconColor":"icon_button_module_iconColor--19afc","large":"icon_button_module_large--19afc","small":"icon_button_module_small--19afc","x-small":"icon_button_module_x-small--19afc"};
+var styles = {"iconButton":"icon_button_module_iconButton--5ec37","iconColor":"icon_button_module_iconColor--5ec37","large":"icon_button_module_large--5ec37","small":"icon_button_module_small--5ec37","x-small":"icon_button_module_x-small--5ec37"};
 
 export { styles as default };

package/lib-esm/primitives/select-menu-grid/index.d.ts

@@ -1,5 +1,6 @@
 import { SelectMenuGrid } from './select-menu-grid';
 import { SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare } from './select-menu-grid-option';
+export { type SelectMenuGridProps, type SelectMenuOptionProps } from './types';
 type SelectMenuOption = typeof SelectMenuGridOption & {
     Square: typeof SelectMenuGridSquare;
     ColorCircle: typeof SelectMenuGridColorCircle;
@@ -9,4 +10,3 @@ type SelectMenuType = {
     Grid: typeof SelectMenuGrid;
 };
 export declare const SelectMenu: SelectMenuType;
-export {};

package/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button } from '@ariakit/react';
+import { CompositeItem, Button } from '@ariakit/react';
 import clsx from 'clsx';
 import Color from 'color';
 import { forwardRef } from 'react';
@@ -33,22 +33,24 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const isButtonActive = !disabled && !loading && active;
   const shouldShowTooltip = !isButtonDisabled;
   // TODO: [DSYS-764] use IconButton instead of AriakitButton
-  const button = jsxs(Button, {
-    ...restProps,
-    ref: forwardedRef,
-    "aria-label": loading ? loadingAriaLabel : ariaLabel,
-    className: clsx(styles.optionButton, className, {
-      [styles.loading]: loading,
-      [styles.active]: isButtonActive
-    }),
-    disabled: isButtonDisabled,
-    children: [variant === 'colorCircle' && jsx(ColorSwatch, {
-      color: color || '',
-      loading: !!loading
-    }), variant === 'square' && jsx(Icon, {
-      loading: !!loading,
-      children: children
-    })]
+  const button = jsx(CompositeItem, {
+    render: jsxs(Button, {
+      ...restProps,
+      ref: forwardedRef,
+      "aria-label": loading ? loadingAriaLabel : ariaLabel,
+      className: clsx(styles.optionButton, className, {
+        [styles.loading]: loading,
+        [styles.active]: isButtonActive
+      }),
+      disabled: isButtonDisabled,
+      children: [variant === 'colorCircle' && jsx(ColorSwatch, {
+        color: color || '',
+        loading: !!loading
+      }), variant === 'square' && jsx(Icon, {
+        loading: !!loading,
+        children: children
+      })]
+    })
   });
   return jsxs("div", {
     className: styles.buttonWrapper,

package/lib-esm/primitives/select-menu-grid/select-menu-grid.d.ts

@@ -2,4 +2,8 @@
 export declare const SelectMenuGrid: import("react").ForwardRefExoticComponent<Omit<{
     children: import("react").ReactNode;
     columns: number;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+} & import("@ariakit/react").CompositeOptions<"div"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@ariakit/react").CompositeOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/select-menu-grid/select-menu-grid.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
+import { CompositeProvider, Composite, CompositeRow } from '@ariakit/react';
 import clsx from 'clsx';
 import chunk from 'lodash/chunk';
 import { forwardRef, Children } from 'react';
 import styles from './select-menu-grid.module.js';
 
-const Row = props => jsx("div", {
+const Row = props => jsx(CompositeRow, {
   ...props,
   className: styles.row,
   role: "row"
@@ -17,14 +18,16 @@ const SelectMenuGrid = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const childrenByColumns = chunk(Children.toArray(children), columns);
-  return jsx("div", {
-    ...rest,
-    ref: forwardedRef,
-    className: clsx(styles.grid, className),
-    role: "grid",
-    children: childrenByColumns.map((row, i) => jsx(Row, {
-      children: row
-    }, row[0]?.key || i))
+  return jsx(CompositeProvider, {
+    children: jsx(Composite, {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(styles.grid, className),
+      role: "grid",
+      children: childrenByColumns.map((row, i) => jsx(Row, {
+        children: row
+      }, row[0]?.key || i))
+    })
   });
 });
 

package/lib-esm/primitives/select-menu-grid/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type ButtonProps as AriakitButtonProps, type CompositeProps, type CompositeRowProps } from '@ariakit/react';
 import { type RequireAllOrNone, type SetOptional } from 'type-fest';
 type Loading = {
     /** Loading state of the grid option. Ghost section is displaying as a placeholder. When this is true `loadingAriaLabel` must also be provided. */
@@ -23,13 +23,14 @@ export type SelectMenuGridColorCircleProps = CommonOptionProps & {
     /** The color of the swatch  */
     color: string;
 };
-export type SelectMenuGridOptionProps = SetOptional<SelectMenuGridSquareProps, keyof SelectMenuGridSquareProps> & SetOptional<SelectMenuGridColorCircleProps, keyof SelectMenuGridColorCircleProps> & {
+export type SelectMenuOptionProps = SetOptional<SelectMenuGridSquareProps, keyof SelectMenuGridSquareProps> & SetOptional<SelectMenuGridColorCircleProps, keyof SelectMenuGridColorCircleProps> & {
     variant: 'square' | 'colorCircle';
 };
+export type SelectMenuGridRowProps = CompositeRowProps;
 export type SelectMenuGridProps = {
     /** The grid options to render */
     children: React.ReactNode;
     /** The number of columns to slice the grid options into */
     columns: number;
-} & React.ComponentProps<'div'>;
+} & CompositeProps;
 export {};

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

@@ -13,8 +13,8 @@ const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
   return jsx(Caret, {
     ref: forwardedRef,
     className: clsx({
-      [styles.invertDropdownIndicator]: direction === 'up'
-    }, className),
+      [styles.invertCaret]: direction === 'up'
+    }, styles.dropdownIndicator, className),
     color: color,
     height: Size2,
     role: "presentation",

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"toolbarRoot":"toolbar_module_toolbarRoot--66b77","separator":"toolbar_module_separator--66b77","toggleGroup":"toolbar_module_toggleGroup--66b77","toolbarItem":"toolbar_module_toolbarItem--66b77","toolbarToggle":"toolbar_module_toolbarToggle--66b77","invertDropdownIndicator":"toolbar_module_invertDropdownIndicator--66b77","triggerButtonSelectedWithColor":"toolbar_module_triggerButtonSelectedWithColor--66b77","toolbarIcon":"toolbar_module_toolbarIcon--66b77"};
+var styles = {"toolbarRoot":"toolbar_module_toolbarRoot--d025f","separator":"toolbar_module_separator--d025f","toggleGroup":"toolbar_module_toggleGroup--d025f","toolbarItem":"toolbar_module_toolbarItem--d025f","toolbarToggle":"toolbar_module_toolbarToggle--d025f","dropdownIndicator":"toolbar_module_dropdownIndicator--d025f","invertCaret":"toolbar_module_invertCaret--d025f","triggerButtonSelectedWithColor":"toolbar_module_triggerButtonSelectedWithColor--d025f","toolbarIcon":"toolbar_module_toolbarIcon--d025f"};
 
 export { styles as default };

package/lib-esm/util-components/focus-trap/focus-trap.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { type FocusTrapProps } from './types';
 export declare const FocusTrap: ({ containerRef, children, customInitialFocus }: FocusTrapProps) => JSX.Element;

package/lib-esm/utils/testStories.utils.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare function sleep(ms: number): Promise<unknown>;
 export declare const docsDisabledNotice: {
     docs: {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.16.0",
+    "version": "6.18.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "9a36d6187370a2d8c3e2c80c3bdc15a267d92e7b",
+    "gitHead": "712a73b1a539afe140ea0623caf6f168a4fe2099",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {