@box/blueprint-web 7.32.0 → 7.33.0

package/lib-esm/index.css

@@ -5374,6 +5374,53 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   position:relative;
   width:100%;
 }
+.bp_styles_module_splitButton--2a32d{
+  display:inline-flex;
+  position:relative;
+}
+.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d{
+  border-bottom-right-radius:0;
+  border-top-right-radius:0;
+  width:100%;
+}
+.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d.bp_styles_module_gap--2a32d{
+  margin-inline-end:1px;
+}
+.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonLeft--2a32d: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--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--2a32d .bp_styles_module_loadingButton--2a32d{
+  width:100%;
+}
+.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d{
+  border-end-start-radius:0;
+  border-start-start-radius:0;
+  padding:0 var(--size-4) !important;
+}
+.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d svg{
+  height:var(--size-3);
+  width:var(--size-3);
+}
+.bp_styles_module_splitButton--2a32d .bp_styles_module_splitButtonRight--2a32d:focus-visible{
+  z-index:1;
+}
+
+.bp_styles_module_invisible--2a32d{
+  left:0;
+  position:absolute;
+  top:0;
+  visibility:hidden;
+}
+
+.bp_styles_module_dropdown--2a32d{
+  min-width:160px;
+}
 
 .bp_switch_module_option--db15a{
   display:flex;

package/lib-esm/index.d.ts

@@ -50,6 +50,7 @@ export * from './select';
 export * from './side-panel';
 export * from './slider';
 export * from './small-list-item';
+export * from './split-button';
 export * from './status';
 export * from './switch';
 export * from './text';
@@ -62,6 +63,7 @@ export * from './tooltip';
 export * from './trigger-button';
 export * from './util-components/focus-trap';
 export * from './util-components/interactive-icon';
+export * from './util-components/labelable/types';
 export * from './util-components/scrollable-container/scrollable-container';
 export * from './util-components/text-with-info-badge';
 export * from './utils/keyboardUtils';

package/lib-esm/index.js

@@ -65,6 +65,7 @@ export { SELECT_EMPTY_VALUE, Select } from './select/select.js';
 export { SidePanel } from './side-panel/side-panel.js';
 export { Slider } from './slider/slider.js';
 export { SmallList } from './small-list-item/index.js';
+export { SplitButton } from './split-button/split-button.js';
 export { Status } from './status/status.js';
 export { Switch } from './switch/index.js';
 export { Text } from './text/text.js';

package/lib-esm/primitives/dropdown-menu/dropdown-menu-group.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+/**
+ * Based on Radix-UI Group
+ * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#group
+ */
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/dropdown-menu/dropdown-menu-group.js

@@ -0,0 +1,17 @@
+import { jsx } from 'react/jsx-runtime';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+
+/**
+ * Based on Radix-UI Group
+ * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#group
+ */
+const DropdownMenuGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  return jsx(DropdownMenuPrimitive.Group, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+DropdownMenuGroup.displayName = 'DropdownMenuGroup';
+
+export { DropdownMenuGroup };

package/lib-esm/primitives/dropdown-menu/index.d.ts

@@ -4,6 +4,7 @@ export declare const DropdownMenu: {
         (props: import("@radix-ui/react-dropdown-menu").DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
         displayName: string;
     };
+    Group: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
     RadioGroup: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
     Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
     RadioSelectItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/dropdown-menu/index.js

@@ -1,5 +1,6 @@
 import { DropdownMenuCheckboxItem } from './dropdown-menu-checkbox-item.js';
 import { DropdownMenuContent } from './dropdown-menu-content.js';
+import { DropdownMenuGroup } from './dropdown-menu-group.js';
 import { DropdownMenuItem } from './dropdown-menu-item.js';
 import { DropdownMenuRadioGroup } from './dropdown-menu-radio-group.js';
 import { DropdownMenuRadioSelectItem } from './dropdown-menu-radio-select-item.js';
@@ -12,6 +13,7 @@ import { DropdownMenuTrigger } from './dropdown-menu-trigger.js';
 
 const DropdownMenu = {
   Root: DropdownMenuRoot,
+  Group: DropdownMenuGroup,
   RadioGroup: DropdownMenuRadioGroup,
   Trigger: DropdownMenuTrigger,
   RadioSelectItem: DropdownMenuRadioSelectItem,

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface SplitTriggerButtonProps {
+    ariaLabel: string;
+    isOpened: boolean;
+    disabled: boolean;
+    size: 'small' | 'large';
+    variant: 'primary' | 'secondary';
+    isInvisible?: boolean;
+}
+export declare const SplitTriggerButton: import("react").ForwardRefExoticComponent<SplitTriggerButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { TriggerButton } from '../trigger-button/trigger-button.js';
+import styles from './styles.module.js';
+
+const SplitTriggerButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    isInvisible,
+    ariaLabel: dropdownTriggerAriaLabel,
+    isOpened,
+    disabled,
+    size,
+    variant,
+    ...rest
+  } = props;
+  return jsx(TriggerButton, {
+    ref: ref,
+    "aria-label": dropdownTriggerAriaLabel,
+    caretDirection: isOpened ? 'up' : 'down',
+    className: clsx(styles.splitButtonRight, {
+      [styles.invisible]: isInvisible,
+      [styles.gap]: variant === 'primary'
+    }),
+    disabled: disabled,
+    size: size,
+    variant: variant,
+    ...rest
+  });
+});
+
+export { SplitTriggerButton };

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

@@ -0,0 +1,2 @@
+export { SplitButton } from './split-button';
+export { type SplitButtonProps } from './types';

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type SplitButtonProps } from './types';
+export declare const SplitButton: import("react").ForwardRefExoticComponent<SplitButtonProps & import("react").RefAttributes<unknown>>;

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

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useState, useCallback } from 'react';
+import { Button } from '../button/button.js';
+import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
+import { useControllableState } from '../utils/useControllableState.js';
+import { SplitTriggerButton } from './SplitTriggerButton.js';
+import styles from './styles.module.js';
+
+const SplitButton = /*#__PURE__*/forwardRef(props => {
+  const {
+    align = 'end',
+    children,
+    disabled,
+    dropdownTriggerAriaLabel,
+    label,
+    loading,
+    loadingAriaLabel,
+    open: openProp,
+    onOpenChange,
+    defaultOpen = false,
+    size = 'large',
+    variant = 'primary'
+  } = props;
+  const [leftButtonSize, setLeftButtonSize] = useState(undefined);
+  const [rightButtonSize, setRightButtonSize] = useState(undefined);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    onChange: onOpenChange,
+    defaultProp: defaultOpen
+  });
+  const onLeftButtonMountCallback = useCallback(button => {
+    const buttonWidth = button?.offsetWidth;
+    if (buttonWidth) {
+      setLeftButtonSize(buttonWidth);
+    }
+  }, []);
+  const onRightButtonMountCallback = useCallback(button => {
+    const buttonWidth = button?.offsetWidth;
+    if (buttonWidth) {
+      setRightButtonSize(buttonWidth);
+    }
+  }, []);
+  const onOpenChangeLocal = useCallback(() => {
+    if (!disabled) {
+      setOpen(!open);
+    }
+  }, [disabled, open, setOpen]);
+  const alignOpts = {
+    align,
+    ...(align === 'start' && leftButtonSize && {
+      alignOffset: -leftButtonSize
+    })
+  };
+  return jsxs(DropdownMenu.Root, {
+    onOpenChange: onOpenChangeLocal,
+    open: open,
+    children: [jsxs("span", {
+      className: styles.splitButton,
+      children: [jsx(Button, {
+        ref: onLeftButtonMountCallback,
+        className: loading ? styles.loadingButton : clsx(styles.splitButtonLeft, {
+          [styles.gap]: variant === 'primary',
+          [styles.skipRightBorder]: variant !== 'primary'
+        }),
+        disabled: disabled,
+        loading: loading,
+        loadingAriaLabel: loadingAriaLabel,
+        size: size,
+        style: {
+          width: loading && leftButtonSize && rightButtonSize ? leftButtonSize + rightButtonSize : undefined
+        },
+        variant: variant,
+        children: label
+      }), jsx(DropdownMenu.Trigger, {
+        children: jsx(SplitTriggerButton, {
+          ref: onRightButtonMountCallback,
+          ariaLabel: dropdownTriggerAriaLabel,
+          disabled: !!disabled,
+          isInvisible: loading,
+          isOpened: open,
+          size: size,
+          variant: variant
+        })
+      })]
+    }), jsx(DropdownMenu.Content, {
+      className: styles.dropdown,
+      ...alignOpts,
+      children: children
+    })]
+  });
+});
+SplitButton.displayName = 'SplitButton';
+
+export { SplitButton };

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

@@ -0,0 +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"};
+
+export { styles as default };

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

@@ -0,0 +1,40 @@
+import { type ReactNode } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
+interface Loading {
+    /** Whether the button is loading. */
+    loading?: boolean;
+    /** The aria-label for the loading indicator. */
+    loadingAriaLabel?: string;
+}
+export interface BasicSplitButtonProps {
+    /** Contents of the dropdown */
+    children: ReactNode;
+    /** The text of the left button */
+    label: string;
+    /** Aria-label of the right button, a.k.a DropdownMenu Trigger */
+    dropdownTriggerAriaLabel: string;
+    /** The start is the leftmost edge of the left button, end is the rightmost edge of the right button. default: end */
+    align?: 'start' | 'end' | 'center';
+    /** The size of the button. default: large */
+    size?: 'small' | 'large';
+    /** The visual style of the button. default: primary */
+    variant?: 'primary' | 'secondary';
+    /**
+     * The uncontrolled pressed state of the split button when initially rendered. Use `defaultOpened`
+     * if you do not need to control the state of the button.
+     * @defaultValue false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled state of the split button.
+     */
+    open?: boolean;
+    /**
+     * The callback that fires when the state of the dropdown menu changes.
+     */
+    onOpenChange?(pressed: boolean): void;
+    /** Should both buttons be disabled */
+    disabled?: boolean;
+}
+export type SplitButtonProps = BasicSplitButtonProps & RequireAllOrNone<Loading, keyof Loading>;
+export {};

package/lib-esm/text-area/text-area.d.ts

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<import("../util-components/labelable/types").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
+export declare const TextArea: import("react").ForwardRefExoticComponent<(Omit<import("../..").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
     hideLabel?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;
     error?: import("react").ReactNode;
-} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<import("../util-components/labelable/types").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
+} & Required<Pick<import("./types").Loading, keyof import("./types").Loading>> & Omit<import("./types").Loading, keyof import("./types").Loading>, "ref"> | Omit<import("../..").Labelable & Omit<import("./text-area-autosize/types").TextareaAutosizeProps, "hasError"> & {
     hideLabel?: boolean | undefined;
     disabled?: boolean | undefined;
     required?: boolean | undefined;

package/package.json

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