@box/blueprint-web 7.33.0 → 7.33.3

package/lib-esm/index.css

@@ -4086,7 +4086,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .bp_base_text_input_module_inlineError--3320c{
   margin-block-start:var(--space-2);
 }
-.bp_chip_module_chip--5ce57{
+.bp_chip_module_chip--45a2c{
   align-items:center;
   border:none;
   border-radius:var(--radius-half);
@@ -4103,19 +4103,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--5ce57 .bp_chip_module_labelText--5ce57:first-child{
+.bp_chip_module_chip--45a2c .bp_chip_module_labelText--45a2c:first-child{
   margin-inline-start:var(--space-4);
 }
-.bp_chip_module_chip--5ce57 .bp_chip_module_labelText--5ce57:last-child{
+.bp_chip_module_chip--45a2c .bp_chip_module_labelText--45a2c:last-child{
   margin-inline-end:var(--space-4);
 }
-.bp_chip_module_chip--5ce57 .bp_chip_module_chipStatus--5ce57:first-child,.bp_chip_module_chip--5ce57 svg:first-child{
+.bp_chip_module_chip--45a2c .bp_chip_module_chipStatus--45a2c:first-child,.bp_chip_module_chip--45a2c svg:first-child{
   margin-inline-start:var(--space-2);
 }
-.bp_chip_module_chip--5ce57 .bp_chip_module_chipStatus--5ce57:last-child,.bp_chip_module_chip--5ce57 svg:last-child{
+.bp_chip_module_chip--45a2c .bp_chip_module_chipStatus--45a2c:last-child,.bp_chip_module_chip--45a2c svg:last-child{
   margin-inline-end:var(--space-2);
 }
-.bp_chip_module_chip--5ce57 .bp_chip_module_chipStatus--5ce57{
+.bp_chip_module_chip--45a2c .bp_chip_module_chipStatus--45a2c{
   align-items:center;
   background-color:var(--gray-10);
   border-radius:var(--radius-half);
@@ -4134,10 +4134,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--5ce57 .bp_chip_module_labelText--5ce57{
+.bp_chip_module_chip--45a2c .bp_chip_module_labelText--45a2c{
   white-space:nowrap;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c{
   background-color:var(--surface-chip-button-surface);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -4147,50 +4147,50 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57:focus-visible{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c:focus-visible{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
   overflow:visible;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57 .bp_chip_module_chipStatus--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c .bp_chip_module_chipStatus--45a2c{
   background-color:var(--box-blue-100);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57:focus-visible,.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57[data-active-item]{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c:focus-visible,.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57:disabled{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c:disabled{
   pointer-events:none;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57:disabled .bp_chip_module_chipStatus--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c:disabled .bp_chip_module_chipStatus--45a2c{
   opacity:.4;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_chipButton--5ce57:hover:enabled{
+.bp_chip_module_chip--45a2c.bp_chip_module_chipButton--45a2c:hover:enabled{
   background-color:var(--surface-chip-button-surface-hover);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c{
   background-color:var(--surface-filterchip-surface-single);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57[data-state=on]{
+.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c[data-state=on]{
   background-color:var(--surface-filterchip-surface-single-on);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57[data-state=on]:hover{
+.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c[data-state=on]:hover{
   background-color:var(--surface-filterchip-surface-single-on-hover);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57[data-state=on] .bp_chip_module_chipStatus--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c[data-state=on] .bp_chip_module_chipStatus--45a2c{
   color:var(--text-text-on-light);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57:focus-visible,.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57[data-active-item]{
+.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c:focus-visible,.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_singleSelectChip--5ce57:hover:not([data-state=on]){
+.bp_chip_module_chip--45a2c.bp_chip_module_singleSelectChip--45a2c:hover:not([data-state=on]){
   background-color:var(--surface-filterchip-surface-single-hover);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c{
   background-color:var(--surface-filterchip-surface-multi);
   border:var(--border-1) solid var(--surface-filterchip-surface-multi);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4201,10 +4201,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57 path{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c path{
   fill:var(--icon-icon-on-light);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-state=on]{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-state=on]{
   background-color:var(--surface-filterchip-surface-multi-on);
   border:var(--border-1) solid var(--border-filterchip-border-multi-on);
   color:var(--text-cta-link);
@@ -4216,32 +4216,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-state=on] path{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-state=on] path{
   fill:var(--text-cta-link);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-state=on]:hover{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-state=on]:hover{
   background-color:var(--surface-filterchip-surface-multi-on-hover);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-state=on]:focus-visible,.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-state=on][data-active-item]{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-state=on]:focus-visible,.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-state=on][data-active-item]{
   border:var(--border-1) solid var(--gray-white);
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--border-filterchip-border-multi-on);
   outline-offset:calc(var(--border-2)*-1);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-state=on] .bp_chip_module_chipStatus--5ce57{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-state=on] .bp_chip_module_chipStatus--45a2c{
   background-color:var(--box-blue-100);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57:focus-visible:not([data-state=on]),.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57[data-active-item]:not([data-state=on]){
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c:focus-visible:not([data-state=on]),.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c[data-active-item]:not([data-state=on]){
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57:hover:not([data-state=on]){
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c:hover:not([data-state=on]){
   background-color:var(--surface-filterchip-surface-multi-hover);
   border:var(--border-1) solid var(--surface-filterchip-surface-multi-hover);
 }
-.bp_chip_module_chip--5ce57.bp_chip_module_multiSelectChip--5ce57 span::before{
+.bp_chip_module_chip--45a2c.bp_chip_module_multiSelectChip--45a2c span::before{
   content:attr(data-text);
   display:block;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4256,20 +4256,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   visibility:hidden;
 }
 
-.bp_chip_module_chipsGroup--5ce57{
+.bp_chip_module_chipsGroup--45a2c{
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-2);
 }
-@media (max-width: 1023px){
-  .bp_chip_module_chipsGroup--5ce57{
+@media (max-width: 767px){
+  .bp_chip_module_chipsGroup--45a2c{
     -ms-overflow-style:none;
     flex-wrap:nowrap;
     overflow-x:scroll;
     padding:var(--space-05);
     scrollbar-width:none;
   }
-  .bp_chip_module_chipsGroup--5ce57::-webkit-scrollbar{
+  .bp_chip_module_chipsGroup--45a2c::-webkit-scrollbar{
     display:none;
   }
 }

package/lib-esm/primitives/chips/chip.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"chip":"bp_chip_module_chip--5ce57","labelText":"bp_chip_module_labelText--5ce57","chipStatus":"bp_chip_module_chipStatus--5ce57","chipButton":"bp_chip_module_chipButton--5ce57","singleSelectChip":"bp_chip_module_singleSelectChip--5ce57","multiSelectChip":"bp_chip_module_multiSelectChip--5ce57","chipsGroup":"bp_chip_module_chipsGroup--5ce57"};
+var styles = {"chip":"bp_chip_module_chip--45a2c","labelText":"bp_chip_module_labelText--45a2c","chipStatus":"bp_chip_module_chipStatus--45a2c","chipButton":"bp_chip_module_chipButton--45a2c","singleSelectChip":"bp_chip_module_singleSelectChip--45a2c","multiSelectChip":"bp_chip_module_multiSelectChip--45a2c","chipsGroup":"bp_chip_module_chipsGroup--45a2c"};
 
 export { styles as default };

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

@@ -78,6 +78,11 @@ export interface SelectContentProps extends React.ComponentPropsWithRef<'div'> {
      * The DOM element where the COntent should be portal-ed into. If not provided, the Content will be appended to the document body.
      */
     container?: HTMLElement;
+    /**
+     * Event handler called when the escape key is down.
+     * Can be prevented.
+     */
+    onEscapeKeyDown?: RadixSelectContentProps['onEscapeKeyDown'];
 }
 export interface SelectOptionProps extends React.ComponentPropsWithRef<'div'> {
     /**

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

@@ -1,3 +1,26 @@
 /// <reference types="react" />
-import { type SplitButtonProps } from './types';
-export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<unknown>>;
+export declare const SplitButton: import("react").ForwardRefExoticComponent<(Omit<Omit<import("../button").ButtonProps, "children"> & {
+    children: import("react").ReactNode;
+    label: string;
+    dropdownTriggerAriaLabel: string;
+    align?: "center" | "start" | "end" | undefined;
+    size?: "small" | "large" | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    onOpenChange?(pressed: boolean): void;
+    disabled?: boolean | undefined;
+    container?: HTMLElement | null | undefined;
+} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<Omit<import("../button").ButtonProps, "children"> & {
+    children: import("react").ReactNode;
+    label: string;
+    dropdownTriggerAriaLabel: string;
+    align?: "center" | "start" | "end" | undefined;
+    size?: "small" | "large" | undefined;
+    variant?: "primary" | "secondary" | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    onOpenChange?(pressed: boolean): void;
+    disabled?: boolean | undefined;
+    container?: HTMLElement | null | undefined;
+} & Partial<Record<keyof import("./types").Loading, never>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -7,9 +7,13 @@ import { useControllableState } from '../utils/useControllableState.js';
 import { SplitTriggerButton } from './SplitTriggerButton.js';
 import styles from './styles.module.js';
 
-const SplitButton = /*#__PURE__*/forwardRef(props => {
+const getLeftButtonWidth = (loading, leftButtonSize, rightButtonSize) => {
+  return loading && leftButtonSize && rightButtonSize ? leftButtonSize + rightButtonSize : undefined;
+};
+const SplitButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     align = 'end',
+    container,
     children,
     disabled,
     dropdownTriggerAriaLabel,
@@ -20,7 +24,8 @@ const SplitButton = /*#__PURE__*/forwardRef(props => {
     onOpenChange,
     defaultOpen = false,
     size = 'large',
-    variant = 'primary'
+    variant = 'primary',
+    ...rest
   } = props;
   const [leftButtonSize, setLeftButtonSize] = useState(undefined);
   const [rightButtonSize, setRightButtonSize] = useState(undefined);
@@ -30,45 +35,56 @@ const SplitButton = /*#__PURE__*/forwardRef(props => {
     defaultProp: defaultOpen
   });
   const onLeftButtonMountCallback = useCallback(button => {
-    const buttonWidth = button?.offsetWidth;
-    if (buttonWidth) {
-      setLeftButtonSize(buttonWidth);
+    if (button?.offsetWidth) {
+      setLeftButtonSize(button?.offsetWidth);
     }
-  }, []);
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(button);
+    } else {
+      forwardedRef.current = button;
+    }
+  }, [forwardedRef]);
   const onRightButtonMountCallback = useCallback(button => {
-    const buttonWidth = button?.offsetWidth;
-    if (buttonWidth) {
-      setRightButtonSize(buttonWidth);
+    if (button?.offsetWidth) {
+      setRightButtonSize(button.offsetWidth);
     }
   }, []);
   const onOpenChangeLocal = useCallback(() => {
-    if (!disabled) {
-      setOpen(!open);
+    if (disabled) {
+      return;
     }
+    setOpen(!open);
   }, [disabled, open, setOpen]);
+  const shouldAlignToLeft = align === 'start' && leftButtonSize;
   const alignOpts = {
     align,
-    ...(align === 'start' && leftButtonSize && {
+    ...(shouldAlignToLeft ? {
       alignOffset: -leftButtonSize
-    })
+    } : {})
   };
+  const className = loading ? styles.loadingButton : clsx(styles.splitButtonLeft, {
+    [styles.gap]: variant === 'primary',
+    [styles.skipRightBorder]: variant !== 'primary'
+  });
+  const leftButtonWidth = getLeftButtonWidth(loading, leftButtonSize, rightButtonSize);
   return jsxs(DropdownMenu.Root, {
     onOpenChange: onOpenChangeLocal,
     open: open,
     children: [jsxs("span", {
       className: styles.splitButton,
       children: [jsx(Button, {
+        ...rest,
         ref: onLeftButtonMountCallback,
-        className: loading ? styles.loadingButton : clsx(styles.splitButtonLeft, {
-          [styles.gap]: variant === 'primary',
-          [styles.skipRightBorder]: variant !== 'primary'
-        }),
+        className: className,
         disabled: disabled,
         loading: loading,
         loadingAriaLabel: loadingAriaLabel,
         size: size,
         style: {
-          width: loading && leftButtonSize && rightButtonSize ? leftButtonSize + rightButtonSize : undefined
+          width: leftButtonWidth
         },
         variant: variant,
         children: label
@@ -85,6 +101,7 @@ const SplitButton = /*#__PURE__*/forwardRef(props => {
       })]
     }), jsx(DropdownMenu.Content, {
       className: styles.dropdown,
+      container: container,
       ...alignOpts,
       children: children
     })]

package/lib-esm/split-button/types.d.ts

@@ -1,14 +1,16 @@
-import { type ReactNode } from 'react';
+/// <reference types="react" />
 import { type RequireAllOrNone } from 'type-fest';
-interface Loading {
+import { type ButtonProps } from '../button/index';
+import { type DropdownMenuContentProps } from '../primitives/dropdown-menu/index';
+export interface Loading {
     /** Whether the button is loading. */
     loading?: boolean;
     /** The aria-label for the loading indicator. */
     loadingAriaLabel?: string;
 }
-export interface BasicSplitButtonProps {
+export type BasicSplitButtonProps = Omit<ButtonProps, 'children'> & {
     /** Contents of the dropdown */
-    children: ReactNode;
+    children: React.ReactNode;
     /** The text of the left button */
     label: string;
     /** Aria-label of the right button, a.k.a DropdownMenu Trigger */
@@ -35,6 +37,8 @@ export interface BasicSplitButtonProps {
     onOpenChange?(pressed: boolean): void;
     /** Should both buttons be disabled */
     disabled?: boolean;
-}
+    /** Specify a container element to portal the content into. */
+    /** @default document.body */
+    container?: DropdownMenuContentProps['container'];
+};
 export type SplitButtonProps = BasicSplitButtonProps & RequireAllOrNone<Loading, keyof Loading>;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.33.0",
+    "version": "7.33.3",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "655a58b8accd00ab49186551834a7a0c7b9237f4",
+    "gitHead": "a8f9386f6254e765ed5bd9014080891c913384c6",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {