@box/blueprint-web 6.17.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);
 }

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/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.17.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": "27a55b8816fa467409faedf10420e08d5f2004cf",
+    "gitHead": "712a73b1a539afe140ea0623caf6f168a4fe2099",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {