@box/blueprint-web 7.10.3 → 7.13.0

package/lib-esm/index.css

@@ -1134,10 +1134,8 @@
   cursor:default;
 }
 
-.bp_icon_button_module_iconButton--a3df7{
+.bp_icon_button_module_iconButton--b6e1c{
   align-items:center;
-  background:var(--surface-cta-surface-icon);
-  border:0;
   border-radius:var(--radius-2);
   border-style:none;
   cursor:pointer;
@@ -1145,82 +1143,94 @@
   justify-content:center;
   padding:0;
 }
-.bp_icon_button_module_iconButton--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
-  fill:var(--icon-cta-icon);
-}
-.bp_icon_button_module_iconButton--a3df7[aria-disabled=true]{
+.bp_icon_button_module_iconButton--b6e1c[aria-disabled=true]{
   background:var(--surface-cta-surface-icon-disabled);
   opacity:.3;
 }
-.bp_icon_button_module_iconButton--a3df7[aria-disabled=true] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c[aria-disabled=true] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--gray-50);
 }
-.bp_icon_button_module_iconButton--a3df7:focus-visible{
+.bp_icon_button_module_iconButton--b6e1c:focus-visible{
   outline:none;
 }
-.bp_icon_button_module_iconButton--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c[data-focus-visible]{
   outline:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_icon_button_module_iconButton--a3df7:hover,.bp_icon_button_module_iconButton--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c{
+  background:var(--surface-cta-surface-icon);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c .bp_icon_button_module_icon--b6e1c *{
+  fill:var(--icon-cta-icon);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:hover .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-focus-visible] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7:active,.bp_icon_button_module_iconButton--a3df7[data-active]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c:active .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_default--b6e1c[data-active] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_large--a3df7{
-  height:var(--size-10);
-  width:var(--size-10);
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c{
+  background:var(--surface-cta-surface-icon);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small--a3df7{
-  height:var(--size-8);
-  width:var(--size-8);
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c[data-focus-visible]{
+  background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_x-small--a3df7{
-  height:var(--size-6);
-  width:var(--size-6);
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_icon-logo--b6e1c[data-active]{
+  background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c{
   background:var(--surface-cta-surface-icon);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-on-color);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:hover,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:hover .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-focus-visible] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-on-color-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:active,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-active]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_high-contrast--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c:active .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_high-contrast--b6e1c[data-active] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-on-color-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c{
   background:var(--surface-cta-surface-icon-utility);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7 .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-utility);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:hover,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-focus-visible]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:hover,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-focus-visible]{
   background:var(--surface-cta-surface-icon-utility-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:hover .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-focus-visible] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:hover .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-focus-visible] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-utility-hover);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:active,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-active]{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:active,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-active]{
   background:var(--surface-cta-surface-icon-utility-pressed);
 }
-.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7:active .bp_icon_button_module_iconColor--a3df7 *,.bp_icon_button_module_iconButton--a3df7.bp_icon_button_module_small-utility--a3df7[data-active] .bp_icon_button_module_iconColor--a3df7 *{
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c:active .bp_icon_button_module_icon--b6e1c *,.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small-utility--b6e1c[data-active] .bp_icon_button_module_icon--b6e1c *{
   fill:var(--icon-cta-icon-utility-pressed);
 }
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_large--b6e1c{
+  height:var(--size-10);
+  width:var(--size-10);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_small--b6e1c{
+  height:var(--size-8);
+  width:var(--size-8);
+}
+.bp_icon_button_module_iconButton--b6e1c.bp_icon_button_module_x-small--b6e1c{
+  height:var(--size-6);
+  width:var(--size-6);
+}
 
 .bp_collapsible_section_module_collapsibleSection--f411c{
   width:100%;
@@ -5285,6 +5295,50 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .bp_text_input_module_textInput--3c0cc input:has(+ .bp_text_input_module_iconLoading--3c0cc){
   padding-inline-end:1.875rem;
 }
+
+.bp_text_toggle_button_module_textToggleButton--527c5{
+  background:var(--surface-toggle-surface);
+  border:var(--border-1) solid var(--border-switch-border);
+  border-radius:var(--radius-2);
+  color:var(--text-text-on-light);
+  cursor:pointer;
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:400;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  min-height:var(--size-8);
+  outline:0;
+  padding-inline:var(--space-2);
+  text-decoration:none;
+  text-transform:none;
+  -webkit-user-select:none;
+          user-select:none;
+  white-space:nowrap;
+}
+.bp_text_toggle_button_module_textToggleButton--527c5:disabled{
+  opacity:.3;
+  pointer-events:none;
+}
+.bp_text_toggle_button_module_textToggleButton--527c5[data-focus-visible]{
+  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+}
+.bp_text_toggle_button_module_textToggleButton--527c5:active,.bp_text_toggle_button_module_textToggleButton--527c5[data-focus-visible]{
+  background:var(--surface-switch-surface-hover);
+  border:var(--border-1) solid var(--border-switch-border-hover);
+}
+.bp_text_toggle_button_module_textToggleButton--527c5:hover{
+  background:var(--surface-toggle-surface-hover);
+}
+.bp_text_toggle_button_module_textToggleButton--527c5[aria-pressed=true]{
+  background:var(--surface-toggle-surface-pressed);
+  border:var(--border-1) solid var(--surface-toggle-surface-pressed);
+  color:var(--text-text-on-dark);
+}
+.bp_text_toggle_button_module_textToggleButton--527c5[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--527c5[aria-pressed=true]:hover,.bp_text_toggle_button_module_textToggleButton--527c5[aria-pressed=true][data-focus-visible]{
+  background:var(--surface-toggle-surface-pressed-hover);
+  border:var(--border-1) solid var(--surface-toggle-surface-pressed-hover);
+}
 :root{
   --notification-default-paragraph-indent:0rem;
   --notification-default-paragraph-spacing:0;

package/lib-esm/index.d.ts

@@ -54,6 +54,7 @@ export * from './text';
 export * from './text-area';
 export * from './text-button';
 export * from './text-input';
+export * from './text-toggle-button';
 export * from './toolbar';
 export * from './tooltip';
 export * from './trigger-button';

package/lib-esm/index.js

@@ -69,6 +69,7 @@ export { Text } from './text/text.js';
 export { TextArea } from './text-area/text-area.js';
 export { TextButton } from './text-button/text-button.js';
 export { TextInput } from './text-input/text-input.js';
+export { TextToggleButton } from './text-toggle-button/text-toggle-button.js';
 export { Toolbar } from './toolbar/index.js';
 export { Tooltip, TooltipProvider } from './tooltip/tooltip.js';
 export { TriggerButton } from './trigger-button/trigger-button.js';

package/lib-esm/primitives/icon-button/icon-button.js

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 import { forwardRef, useRef, createElement } from 'react';
 import { useForkRef } from '../../utils/useForkRef.js';
 import styles from './icon-button.module.js';
-import { getIconSize } from './utils.js';
+import { iconSizeMap } from './utils.js';
 
 const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -17,11 +17,11 @@ const IconButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   return jsx(Button, {
     ...rest,
     ref: useForkRef(ref, forwardedRef),
-    className: clsx([styles.iconButton, styles[size], styles[variant]], props.className),
+    className: clsx(styles.iconButton, styles[variant], styles[size], props.className),
     children: /*#__PURE__*/createElement(icon, {
-      className: styles.iconColor,
-      height: getIconSize(props),
-      width: getIconSize(props),
+      className: styles.icon,
+      height: iconSizeMap[size],
+      width: iconSizeMap[size],
       role: 'presentation'
     })
   });

package/lib-esm/primitives/icon-button/icon-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"iconButton":"bp_icon_button_module_iconButton--a3df7","iconColor":"bp_icon_button_module_iconColor--a3df7","large":"bp_icon_button_module_large--a3df7","small":"bp_icon_button_module_small--a3df7","x-small":"bp_icon_button_module_x-small--a3df7","high-contrast":"bp_icon_button_module_high-contrast--a3df7","small-utility":"bp_icon_button_module_small-utility--a3df7"};
+var styles = {"iconButton":"bp_icon_button_module_iconButton--b6e1c","icon":"bp_icon_button_module_icon--b6e1c","default":"bp_icon_button_module_default--b6e1c","icon-logo":"bp_icon_button_module_icon-logo--b6e1c","high-contrast":"bp_icon_button_module_high-contrast--b6e1c","small-utility":"bp_icon_button_module_small-utility--b6e1c","large":"bp_icon_button_module_large--b6e1c","small":"bp_icon_button_module_small--b6e1c","x-small":"bp_icon_button_module_x-small--b6e1c"};
 
 export { styles as default };

package/lib-esm/primitives/icon-button/types.d.ts

@@ -10,29 +10,33 @@ interface IconButtonCommonProps extends AriakitButtonProps {
      */
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
 }
+export declare const IconButtonSizes: readonly ["x-small", "small", "large"];
+export type IconButtonSize = (typeof IconButtonSizes)[number];
+export declare const IconButtonVariants: readonly ["default", "high-contrast", "icon-logo", "small-utility"];
+export type IconButtonVariant = (typeof IconButtonVariants)[number];
 export interface IconButtonVariantsProps extends IconButtonCommonProps {
     /**
      * The variant of the button.
      *
      * @default 'default'
      */
-    variant?: 'default' | 'high-contrast';
+    variant?: Exclude<IconButtonVariant, 'small-utility'>;
     /**
      * Size of the button.
      *
      * @default 'small'
      */
-    size?: 'x-small' | 'small' | 'large';
+    size?: IconButtonSize;
 }
 export interface IconButtonSmallUtilityVariantProps extends IconButtonCommonProps {
     /**
      * The variant of the button.
      */
-    variant: 'small-utility';
+    variant: Extract<IconButtonVariant, 'small-utility'>;
     /**
-     * The only acceptable size for the small-utility variant is 'small'.
+     * The only acceptable size for the 'small-utility' variant is 'small'.
      */
-    size: 'small';
+    size: Extract<IconButtonSize, 'small'>;
 }
 export type IconButtonProps = IconButtonVariantsProps | IconButtonSmallUtilityVariantProps;
 export {};

package/lib-esm/primitives/icon-button/utils.d.ts

@@ -1,3 +1,3 @@
 import { type IconButtonProps } from './types';
-declare function getIconSize(props: IconButtonProps): string;
-export { getIconSize };
+declare const iconSizeMap: Record<NonNullable<IconButtonProps['size']>, string>;
+export { iconSizeMap };

package/lib-esm/primitives/icon-button/utils.js

@@ -5,11 +5,5 @@ const iconSizeMap = {
   small: Size5,
   large: Size6
 };
-function getIconSize(props) {
-  if (props.variant === 'small-utility') {
-    return Size4;
-  }
-  return iconSizeMap[props.size || 'small'];
-}
 
-export { getIconSize };
+export { iconSizeMap };

package/lib-esm/text-toggle-button/index.d.ts

@@ -0,0 +1,2 @@
+export { TextToggleButton } from './text-toggle-button';
+export type { TextToggleButtonProps } from './types';

package/lib-esm/text-toggle-button/text-toggle-button.d.ts

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

package/lib-esm/text-toggle-button/text-toggle-button.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { composeEventHandlers } from '../utils/composeEventHandlers.js';
+import { useControllableState } from '../utils/useControllableState.js';
+import styles from './text-toggle-button.module.js';
+
+const TextToggleButton = /*#__PURE__*/forwardRef(({
+  pressed: pressedProp,
+  defaultPressed = false,
+  onPressedChange,
+  disabled,
+  onClick,
+  className,
+  ...rest
+}, ref) => {
+  const [pressed = false, setPressed] = useControllableState({
+    prop: pressedProp,
+    onChange: onPressedChange,
+    defaultProp: defaultPressed
+  });
+  return jsx(Button, {
+    "aria-pressed": pressed,
+    "data-disabled": disabled ? '' : undefined,
+    "data-state": pressed ? 'on' : 'off',
+    ...rest,
+    ref: ref,
+    className: clsx(styles.textToggleButton, className),
+    disabled: disabled,
+    onClick: composeEventHandlers(onClick, () => {
+      if (!disabled) {
+        setPressed(!pressed);
+      }
+    })
+  });
+});
+TextToggleButton.displayName = 'TextToggleButton';
+
+export { TextToggleButton };

package/lib-esm/text-toggle-button/text-toggle-button.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--527c5"};
+
+export { styles as default };

package/lib-esm/text-toggle-button/types.d.ts

@@ -0,0 +1,21 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+export interface TextToggleButtonProps extends AriakitButtonProps {
+    /**
+     * The text content of the button.
+     */
+    children: string;
+    /**
+     * The controlled state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * The state of the toggle when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the toggle.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The callback that fires when the state of the toggle changes.
+     */
+    onPressedChange?(pressed: boolean): void;
+}

package/lib-esm/utils/composeEventHandlers.d.ts

@@ -0,0 +1,4 @@
+declare function composeEventHandlers<E>(originalEventHandler?: (event: E) => void, ourEventHandler?: (event: E) => void, { checkForDefaultPrevented }?: {
+    checkForDefaultPrevented?: boolean | undefined;
+}): (event: E) => void;
+export { composeEventHandlers };

package/lib-esm/utils/composeEventHandlers.js

@@ -0,0 +1,13 @@
+// copy of radix function: https://github.com/radix-ui/primitives/blob/main/packages/core/primitive/src/primitive.tsx
+function composeEventHandlers(originalEventHandler, ourEventHandler, {
+  checkForDefaultPrevented = true
+} = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      ourEventHandler?.(event);
+    }
+  };
+}
+
+export { composeEventHandlers };

package/lib-esm/utils/useCallbackRef.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+declare function useCallbackRef<T extends (...args: any[]) => any>(callback: T | undefined): T;
+export { useCallbackRef };

package/lib-esm/utils/useCallbackRef.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+// copy of radix hook: https://github.com/radix-ui/primitives/blob/main/packages/react/use-callback-ref/src/useCallbackRef.tsx
+/**
+ * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a
+ * prop or avoid re-executing effects when passed as a dependency
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function useCallbackRef(callback) {
+  const callbackRef = React.useRef(callback);
+  React.useEffect(() => {
+    callbackRef.current = callback;
+  });
+  // https://github.com/facebook/react/issues/19240
+  return React.useMemo(() => (...args) => callbackRef.current?.(...args), []);
+}
+
+export { useCallbackRef };

package/lib-esm/utils/useControllableState.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface UseControllableStateParams<T> {
+    prop?: T | undefined;
+    defaultProp?: T | undefined;
+    onChange?: (state: T) => void;
+}
+declare function useControllableState<T>({ prop, defaultProp, onChange }: UseControllableStateParams<T>): readonly [T | undefined, React.Dispatch<React.SetStateAction<T | undefined>>];
+export { useControllableState };

package/lib-esm/utils/useControllableState.js

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { useCallbackRef } from './useCallbackRef.js';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {}
+}) {
+  const [uncontrolledProp, setUncontrolledProp] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  const handleChange = useCallbackRef(onChange);
+  const setValue = React.useCallback(nextValue => {
+    if (isControlled) {
+      const setter = nextValue;
+      // renamed variable since it overlapped with variable "value" in the outer scope of hook
+      const internalValue = typeof nextValue === 'function' ? setter(prop) : nextValue;
+      if (internalValue !== prop) {
+        handleChange(internalValue);
+      }
+    } else {
+      setUncontrolledProp(nextValue);
+    }
+  }, [isControlled, prop, setUncontrolledProp, handleChange]);
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const uncontrolledState = React.useState(defaultProp);
+  const [value] = uncontrolledState;
+  const prevValueRef = React.useRef(value);
+  const handleChange = useCallbackRef(onChange);
+  React.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      handleChange(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef, handleChange]);
+  return uncontrolledState;
+}
+
+export { useControllableState };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.10.3",
+    "version": "7.13.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -54,10 +54,10 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.2.1",
+        "@box/storybook-utils": "^0.3.0",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "cee165a16c1efc58afcc1e3ccba2f7ccc1f555e0",
+    "gitHead": "4291826556f62c20172aa6e6f4d6274071000aac",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {