@box/blueprint-web 14.21.0 → 14.22.0

package/dist/lib-esm/combobox/types.d.ts

@@ -140,6 +140,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * The name of the combobox. Submitted with its owning form as part of a name/value pair.
      */
     name?: string;
+    /**
+     * When `true`, the combobox input will be focused on mount.
+     */
+    autoFocus?: boolean;
     /**
      * When `true`, prevents the user from interacting with combobox.
      */

package/dist/lib-esm/index.css

@@ -12106,7 +12106,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_trigger_button_module_triggerButton--b9e51.bp_trigger_button_module_large--b9e51.bp_trigger_button_module_startIcon--b9e51{
   padding-left:.625rem;
 }
-.bp_styles_module_splitButton--b9938[data-modern=false]{
+.bp_styles_module_splitButton--a3588[data-modern=false]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
   --split-button-left-skip-right-border-border-inline-end-color:#0000;
@@ -12124,7 +12124,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --split-button-right-element-secondary-backdrop-filter:none;
 }
 
-.bp_styles_module_splitButton--b9938[data-modern=true]{
+.bp_styles_module_splitButton--a3588[data-modern=true]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--bp-space-005)/2);
   --split-button-left-skip-right-border-border-inline-end-color:#0000;
@@ -12140,67 +12140,75 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --split-button-right-element-secondary-backdrop-filter:blur(16px);
 }
 
-.bp_styles_module_dropdown--b9938[data-modern=false],.bp_styles_module_dropdown--b9938[data-modern=true]{
+.bp_styles_module_dropdown--a3588[data-modern=false],.bp_styles_module_dropdown--a3588[data-modern=true]{
   --split-button-dropdown-min-width:160px;
 }
 
-.bp_styles_module_splitButton--b9938{
+.bp_styles_module_splitButton--a3588{
   display:inline-flex;
   position:relative;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588{
   border-bottom-right-radius:0;
   border-top-right-radius:0;
   padding:var(--split-button-left-element-padding);
   width:var(--split-button-left-width);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938.bp_styles_module_gap--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588.bp_styles_module_gap--a3588{
   margin-inline-end:var(--split-button-left-gap-margin-inline-end);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938:focus-visible{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938.bp_styles_module_skipRightBorder--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588.bp_styles_module_skipRightBorder--a3588{
   border-inline-end-color:var(--split-button-left-skip-right-border-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonLeft--b9938.bp_styles_module_skipRightBorder--b9938:focus-visible{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonLeft--a3588.bp_styles_module_skipRightBorder--a3588:focus-visible{
   border-inline-end-color:var(--split-button-left-skip-right-border-focus-visible-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_loadingButton--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_loadingButton--a3588{
   width:100%;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588{
   border-end-start-radius:0;
   border-start-start-radius:0;
   padding:var(--split-button-right-element-padding) !important;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938 svg{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588 svg{
   height:var(--split-button-right-svg-height);
   width:var(--split-button-right-svg-width);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938:focus-visible{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588{
   backdrop-filter:var(--split-button-right-element-secondary-backdrop-filter);
   background:var(--split-button-right-element-secondary-background);
   border-color:var(--split-button-right-element-border-color);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938:focus-visible,.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938:hover{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588:focus-visible,.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588:hover{
   background:var(--split-button-right-element-secondary-focus-or-hover-background);
 }
-.bp_styles_module_splitButton--b9938 .bp_styles_module_splitButtonRight--b9938.bp_styles_module_secondary--b9938:active{
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588.bp_styles_module_secondary--a3588:active{
   background:var(--split-button-right-element-secondary-active-background);
 }
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588[data-bp-animated=true] svg{
+  transition-duration:var(--bp-duration-short);
+  transition-property:transform;
+  transition-timing-function:var(--bp-curve-small-on);
+}
+.bp_styles_module_splitButton--a3588 .bp_styles_module_splitButtonRight--a3588[data-bp-animated=true]:not(:disabled):hover svg{
+  transform:translateY(2px);
+}
 
-.bp_styles_module_invisible--b9938{
+.bp_styles_module_invisible--a3588{
   left:0;
   position:absolute;
   top:0;
   visibility:hidden;
 }
 
-.bp_styles_module_dropdown--b9938{
+.bp_styles_module_dropdown--a3588{
   min-width:var(--split-button-dropdown-min-width);
 }
 .bp_switch_module_option--e6150[data-modern=false]{

package/dist/lib-esm/split-button/SplitTriggerButton.d.ts

@@ -1,6 +1,5 @@
 interface SplitTriggerButtonProps {
     ariaLabel: string;
-    isOpened: boolean;
     disabled: boolean;
     size: 'small' | 'large';
     variant: 'primary' | 'secondary';

package/dist/lib-esm/split-button/SplitTriggerButton.js

@@ -1,6 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import '../blueprint-configuration-context/blueprint-configuration-context.js';
+import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
 import { TriggerButton } from '../trigger-button/trigger-button.js';
 import styles from './styles.module.js';
 
@@ -8,16 +10,16 @@ const SplitTriggerButton = /*#__PURE__*/forwardRef((props, ref) => {
   const {
     isInvisible,
     ariaLabel: dropdownTriggerAriaLabel,
-    isOpened,
     disabled,
     size,
     variant,
     ...rest
   } = props;
+  const isAnimationEnabled = useBlueprintConfiguration().componentsWithAnimationEnabled.includes('SplitButton');
   return jsx(TriggerButton, {
     ref: ref,
     "aria-label": dropdownTriggerAriaLabel,
-    caretDirection: isOpened ? 'up' : 'down',
+    caretDirection: "down",
     className: clsx(styles.splitButtonRight, styles[`${variant}`], {
       [styles.invisible]: isInvisible,
       [styles.gap]: variant === 'primary'
@@ -25,6 +27,7 @@ const SplitTriggerButton = /*#__PURE__*/forwardRef((props, ref) => {
     disabled: disabled,
     size: size,
     variant: variant,
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     ...rest
   });
 });

package/dist/lib-esm/split-button/split-button.js

@@ -109,7 +109,6 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           "data-resin-target": splitTriggerResinTarget,
           disabled: !!disabled,
           isInvisible: loading,
-          isOpened: open,
           size: size,
           variant: variant
         })

package/dist/lib-esm/split-button/styles.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"splitButton":"bp_styles_module_splitButton--b9938","dropdown":"bp_styles_module_dropdown--b9938","splitButtonLeft":"bp_styles_module_splitButtonLeft--b9938","gap":"bp_styles_module_gap--b9938","skipRightBorder":"bp_styles_module_skipRightBorder--b9938","loadingButton":"bp_styles_module_loadingButton--b9938","splitButtonRight":"bp_styles_module_splitButtonRight--b9938","secondary":"bp_styles_module_secondary--b9938","invisible":"bp_styles_module_invisible--b9938"};
+var styles = {"splitButton":"bp_styles_module_splitButton--a3588","dropdown":"bp_styles_module_dropdown--a3588","splitButtonLeft":"bp_styles_module_splitButtonLeft--a3588","gap":"bp_styles_module_gap--a3588","skipRightBorder":"bp_styles_module_skipRightBorder--a3588","loadingButton":"bp_styles_module_loadingButton--a3588","splitButtonRight":"bp_styles_module_splitButtonRight--a3588","secondary":"bp_styles_module_secondary--a3588","invisible":"bp_styles_module_invisible--a3588"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.21.0",
+    "version": "14.22.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.115.7",
+        "@box/blueprint-web-assets": "^4.115.9",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.18.7",
+        "@box/storybook-utils": "^0.18.9",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",