@box/blueprint-web 7.10.3 → 7.11.0

package/lib-esm/index.css

@@ -5285,6 +5285,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/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.11.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": "64f24026d06c71ca4145bf9f77a9adb4acd37787",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {