@box/blueprint-web 12.31.0 → 12.32.0

package/dist/lib-esm/index.css

@@ -7115,52 +7115,76 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_styles_module_splitButton--2a32d{
+.bp_styles_module_splitButton--f7401[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;
+  --split-button-left-skip-right-border-focus-visible-border-inline-end-color:var(--border-cta-border-secondary-hover);
+  --split-button-right-element-padding:0 var(--size-4);
+  --split-button-right-svg-width:var(--size-3);
+  --split-button-right-svg-height:var(--size-3);
+}
+
+.bp_styles_module_splitButton--f7401[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;
+  --split-button-left-skip-right-border-focus-visible-border-inline-end-color:var(--bp-border-cta-border-secondary-hover);
+  --split-button-right-element-padding:var(--bp-size-030) var(--bp-size-040) var(--bp-size-030) var(--bp-size-030);
+  --split-button-right-svg-width:var(--bp-size-030);
+  --split-button-right-svg-height:var(--bp-size-030);
+}
+
+.bp_styles_module_dropdown--f7401[data-modern=false],.bp_styles_module_dropdown--f7401[data-modern=true]{
+  --split-button-dropdown-min-width:160px;
+}
+
+.bp_styles_module_splitButton--f7401{
   display:inline-flex;
   position:relative;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401{
   border-bottom-right-radius:0;
   border-top-right-radius:0;
-  width:100%;
+  width:var(--split-button-left-width);
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_gap--2a32d{
-  margin-inline-end:1px;
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401.bp_styles_module_gap--f7401{
+  margin-inline-end:var(--split-button-left-gap-margin-inline-end);
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d:focus-visible{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_skipRightBorder--2a32d{
-  border-inline-end-color:#0000 !important;
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401.bp_styles_module_skipRightBorder--f7401{
+  border-inline-end-color:var(--split-button-left-skip-right-border-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_skipRightBorder--2a32d:focus-visible{
-  border-inline-end-color:var(--border-cta-border-secondary-hover) !important;
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonLeft--f7401.bp_styles_module_skipRightBorder--f7401:focus-visible{
+  border-inline-end-color:var(--split-button-left-skip-right-border-focus-visible-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_loadingButton--2a32d{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_loadingButton--f7401{
   width:100%;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonRight--f7401{
   border-end-start-radius:0;
   border-start-start-radius:0;
-  padding:0 var(--size-4) !important;
+  padding:var(--split-button-right-element-padding) !important;
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d svg{
-  height:var(--size-3);
-  width:var(--size-3);
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonRight--f7401 svg{
+  height:var(--split-button-right-svg-height);
+  width:var(--split-button-right-svg-width);
 }
-.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d:focus-visible{
+.bp_styles_module_splitButton--f7401 .bp_styles_module_splitButtonRight--f7401:focus-visible{
   z-index:1;
 }
 
-.bp_styles_module_invisible--2a32d{
+.bp_styles_module_invisible--f7401{
   left:0;
   position:absolute;
   top:0;
   visibility:hidden;
 }
 
-.bp_styles_module_dropdown--2a32d{
-  min-width:160px;
+.bp_styles_module_dropdown--f7401{
+  min-width:var(--split-button-dropdown-min-width);
 }
 
 .bp_switch_module_option--1f7a2{

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useState, useRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Button } from '../button/button.js';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 import { useControllableState } from '../utils/useControllableState.js';
@@ -44,6 +45,9 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onChange: onOpenChange,
     defaultProp: defaultOpen
   });
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const localLeftRef = useRef(null);
   const onLeftButtonMountCallback = useCallback(button => {
     if (button?.offsetWidth) {
@@ -83,6 +87,7 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     open: open,
     children: [jsxs("span", {
       className: styles.splitButton,
+      "data-modern": enableModernizedComponents,
       children: [jsx(Button, {
         ...rest,
         ref: onLeftButtonMountCallback,
@@ -110,6 +115,7 @@ const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     }), jsx(DropdownMenu.Content, {
       className: styles.dropdown,
       container: container,
+      "data-modern": enableModernizedComponents,
       ...alignOpts,
       children: children
     })]

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.31.0",
+    "version": "12.32.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {