@box/blueprint-web 6.12.0 → 6.14.0

package/lib-esm/combobox/combobox.js

@@ -100,7 +100,14 @@ const RootInner = ({
     }
     return getSelectedOptionValues(valueProp);
   }, [getSelectedOptionValues, valueProp]);
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
   const setValue = newSelectedValue => {
+    // Move focus back to input for single selects
+    if (!Array.isArray(newSelectedValue)) {
+      focusInput();
+    }
     if (!onValueChange) {
       return;
     }
@@ -141,9 +148,6 @@ const RootInner = ({
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
   [displayAvatar]);
-  const focusInput = useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
   const renderSelectItemOption = useCallback(option => {
     const value = getOptionValue(option);
     return jsxs(OptionWithIndicator, {
@@ -162,10 +166,8 @@ const RootInner = ({
       setInputValue('');
     } else if (selectedValueMemoized) {
       setInputValue(getDisplayValueFromOptionValue(selectedValueMemoized));
-      // Also focus input for single-select variant
-      focusInput();
     }
-  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue, focusInput]);
+  }, [selectedValueMemoized, getDisplayValueFromOptionValue, setInputValue]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {

package/lib-esm/index.css

@@ -5610,28 +5610,30 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.toolbar_module_root--7d3d8{
+.toolbar_module_toolbarRoot--66b77{
+  align-items:center;
   background:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-4);
   box-shadow:var(--dropshadow-3);
   display:flex;
   gap:var(--space-1);
-  padding:var(--space-1);
+  padding:calc(var(--space-1) - var(--border-1));
 }
 
-.toolbar_module_separator--7d3d8{
+.toolbar_module_separator--66b77{
   background-color:var(--border-divider-border);
   border-radius:var(--radius-2);
+  height:var(--size-6);
   width:1px;
 }
 
-.toolbar_module_toggleGroup--7d3d8,.toolbar_module_toolbarItem--7d3d8{
+.toolbar_module_toggleGroup--66b77,.toolbar_module_toolbarItem--66b77{
   display:flex;
   gap:var(--space-1);
 }
 
-.toolbar_module_toolbarItem--7d3d8{
+.toolbar_module_toolbarItem--66b77{
   align-items:center;
   background:var(--toolbar-button-color, var(--surface-toggle-surface));
   border:var(--border-1) solid #0000;
@@ -5641,38 +5643,47 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   min-height:var(--size-8);
   min-width:var(--size-8);
   outline:none;
-  padding:calc(var(--space-1) - var(--border-1));
+  padding-inline:calc(var(--space-1) - var(--border-1));
+  text-indent:var(--space-1);
   -webkit-user-select:none;
           user-select:none;
 }
-.toolbar_module_toolbarItem--7d3d8[data-disabled]{
+.toolbar_module_toolbarItem--66b77[data-disabled]{
   background:var(--surface-toggle-surface);
   opacity:.3;
   pointer-events:none;
 }
-.toolbar_module_toolbarItem--7d3d8:not([data-disabled]):focus{
+.toolbar_module_toolbarItem--66b77:not([data-disabled]):focus-visible{
   box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
 }
-.toolbar_module_toolbarItem--7d3d8:not([data-disabled]):hover{
+.toolbar_module_toolbarItem--66b77: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--7d3d8[data-state=on]{
+.toolbar_module_toolbarToggle--66b77[data-state=on]{
   background:var(--surface-toggle-surface-pressed);
 }
-.toolbar_module_toolbarToggle--7d3d8[data-state=on] svg *{
+.toolbar_module_toolbarToggle--66b77[data-state=on] svg *{
   fill:var(--icon-icon-on-dark);
 }
-.toolbar_module_toolbarToggle--7d3d8[data-state=on]:not([data-disabled]):hover{
+.toolbar_module_toolbarToggle--66b77[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--7d3d8{
+.toolbar_module_invertDropdownIndicator--66b77{
   transform:rotate(.5turn);
 }
 
-.toolbar_module_triggerButtonSelectedWithColor--7d3d8[data-state=on]:hover{
+.toolbar_module_triggerButtonSelectedWithColor--66b77[data-state=on]:hover{
   opacity:.7;
+}
+
+.toolbar_module_toolbarIcon--66b77{
+  align-items:center;
+  display:flex;
+  height:var(--size-5);
+  justify-content:center;
+  width:var(--size-5);
 }

package/lib-esm/toolbar/index.d.ts

@@ -15,7 +15,7 @@ export { type ToolbarButtonProps, type ToolbarIconProps, type ToolbarProps, type
  *       </Toolbar.Button>
  *       <Toolbar.Separator />
  *
- *       <Toolbar.Button aria-label="delete" >
+ *       <Toolbar.Button>
  *           Upload <Toolbar.DropdownIndicator direction="down" />
  *       </Toolbar.Button>
  *   </Toolbar.Root>
@@ -40,7 +40,7 @@ export declare const Toolbar: {
     /**
      * SVG element used to render icon in buttons.
      */
-    Icon: import("react").ForwardRefExoticComponent<import("./types").ToolbarIconProps & import("react").RefAttributes<SVGSVGElement>>;
+    Icon: import("react").ForwardRefExoticComponent<import("./types").ToolbarIconProps & import("react").RefAttributes<HTMLSpanElement>>;
     /**
      * A button item.
      */

package/lib-esm/toolbar/index.js

@@ -22,7 +22,7 @@ import { ToolbarTriggerButton } from './toolbar-trigger-button.js';
  *       </Toolbar.Button>
  *       <Toolbar.Separator />
  *
- *       <Toolbar.Button aria-label="delete" >
+ *       <Toolbar.Button>
  *           Upload <Toolbar.DropdownIndicator direction="down" />
  *       </Toolbar.Button>
  *   </Toolbar.Root>

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

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Caret } from '@box/blueprint-web-assets/icons/Fill';
-import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size2 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import styles from './toolbar.module.js';
@@ -16,9 +16,9 @@ const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
       [styles.invertDropdownIndicator]: direction === 'up'
     }, className),
     color: color,
-    height: Size3,
+    height: Size2,
     role: "presentation",
-    width: Size3
+    width: Size2
   });
 });
 

package/lib-esm/toolbar/toolbar-icon.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { type ToolbarIconProps } from './types';
-export declare const ToolbarIcon: React.ForwardRefExoticComponent<ToolbarIconProps & React.RefAttributes<SVGSVGElement>>;
+export declare const ToolbarIcon: React.ForwardRefExoticComponent<ToolbarIconProps & React.RefAttributes<HTMLSpanElement>>;

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

@@ -1,5 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
 import { Size5, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
 import React__default, { forwardRef } from 'react';
+import styles from './toolbar.module.js';
 
 const ToolbarIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -7,13 +10,15 @@ const ToolbarIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     color = IconIconOnLight
   } = props;
-  return /*#__PURE__*/React__default.createElement(icon, {
+  return jsx("span", {
     ref: forwardedRef,
-    width: Size5,
-    height: Size5,
-    role: 'presentation',
-    className,
-    color
+    className: clsx(styles.toolbarIcon, className),
+    children: /*#__PURE__*/React__default.createElement(icon, {
+      width: Size5,
+      height: Size5,
+      role: 'presentation',
+      color
+    })
   });
 });
 

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

@@ -13,7 +13,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(ToolbarPrimitive.Root, {
     ...rest,
     ref: forwardedRef,
-    className: clsx(styles.root, className),
+    className: clsx(styles.toolbarRoot, className),
     children: children
   });
 });

package/lib-esm/toolbar/toolbar-toggle-item.js

@@ -1,5 +1,5 @@
 import { jsxs } from 'react/jsx-runtime';
-import { Size6, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size5, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
@@ -17,8 +17,8 @@ const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, styles.toolbarToggle),
     children: [children, /*#__PURE__*/createElement(icon, {
-      height: Size6,
-      width: Size6,
+      height: Size5,
+      width: Size5,
       role: 'presentation',
       color
     })]

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"root":"toolbar_module_root--7d3d8","separator":"toolbar_module_separator--7d3d8","toggleGroup":"toolbar_module_toggleGroup--7d3d8","toolbarItem":"toolbar_module_toolbarItem--7d3d8","toolbarToggle":"toolbar_module_toolbarToggle--7d3d8","invertDropdownIndicator":"toolbar_module_invertDropdownIndicator--7d3d8","triggerButtonSelectedWithColor":"toolbar_module_triggerButtonSelectedWithColor--7d3d8"};
+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"};
 
 export { styles as default };

package/lib-esm/toolbar/types.d.ts

@@ -23,6 +23,7 @@ export interface ToolbarToggleItemProps extends ToolbarPrimitiveToggleItemProps
     'aria-label': NonNullable<HTMLAttributes<HTMLButtonElement>['aria-label']>;
 }
 export type ToolbarIconProps = {
+    /** Color of rendered icon. */
     color?: React.SVGProps<SVGSVGElement>['color'];
     className?: string;
     /** Icon rendered by the component. */
@@ -33,6 +34,7 @@ export type ToolbarDropdownIndicatorProps = {
      * @default 'down'
      */
     direction?: 'up' | 'down';
+    /** Color of rendered icon. */
     color?: React.SVGProps<SVGSVGElement>['color'];
     className?: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.12.0",
+    "version": "6.14.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "4a5f48c4af9b588fc94d41fd0cff52d44b20e471",
+    "gitHead": "070975e63431ea3fc2f4f2d0cad78571a0533a5f",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {