snapshot of https://github.com/excalidraw/excalidraw.git (master, 2026-09-16; blobs > 131072B omitted)

packages/excalidraw/components/IconButton.tsx

@@ -0,0 +1,202 @@
+import clsx from "clsx";
+import React, { useEffect, useRef, useState } from "react";
+
+import { isPromiseLike } from "@excalidraw/common";
+
+import type { PointerType } from "@excalidraw/element/types";
+
+import { AbortError } from "../errors";
+
+import "./ToolIcon.scss";
+
+import Spinner from "./Spinner";
+
+import type { CSSProperties } from "react";
+
+export type IconButtonSize = "small" | "medium";
+
+type IconButtonBaseProps = {
+  icon?: React.ReactNode;
+  "aria-label": string;
+  "aria-keyshortcuts"?: string;
+  "data-testid"?: string;
+  label?: string;
+  title?: string;
+  size?: IconButtonSize;
+  keyBindingLabel?: string | null;
+  showAriaLabel?: boolean;
+  hidden?: boolean;
+  visible?: boolean;
+  disabled?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  isLoading?: boolean;
+};
+
+type IconButtonProps =
+  | (IconButtonBaseProps & {
+      type: "button";
+      children?: React.ReactNode;
+      onClick?(event: React.MouseEvent): void;
+    })
+  | (IconButtonBaseProps & {
+      type: "icon";
+      children?: React.ReactNode;
+      onClick?(): void;
+    })
+  // a stateful (pressed/unpressed) tool button
+  | (IconButtonBaseProps & {
+      type: "toggle";
+      checked: boolean;
+      /**
+       * Fired on activation — a completed pointer gesture (via `click`, so a
+       * press canceled by sliding off the button doesn't select) or
+       * keyboard/AT activation, in which case pointerType is null.
+       * pointerType is captured on pointer-down, where it's reliable
+       * (unlike the click event's own pointerType on iOS).
+       */
+      onSelect?(data: { pointerType: PointerType | null }): void;
+      /** the press that may become a click — e.g. to arm a drag out of the toolbar */
+      onPointerDown?(event: React.PointerEvent<HTMLButtonElement>): void;
+    });
+
+export const IconButton = React.forwardRef(
+  (
+    {
+      size = "medium",
+      visible = true,
+      className = "",
+      ...props
+    }: IconButtonProps,
+    ref,
+  ) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current);
+    const sizeCn = `ToolIcon_size_${size}`;
+
+    const [isLoading, setIsLoading] = useState(false);
+
+    const isMountedRef = useRef(true);
+
+    const onClick = async (event: React.MouseEvent) => {
+      const ret = "onClick" in props && props.onClick?.(event);
+
+      if (isPromiseLike(ret)) {
+        try {
+          setIsLoading(true);
+          await ret;
+        } catch (error: any) {
+          if (!(error instanceof AbortError)) {
+            throw error;
+          } else {
+            console.warn(error);
+          }
+        } finally {
+          if (isMountedRef.current) {
+            setIsLoading(false);
+          }
+        }
+      }
+    };
+
+    useEffect(() => {
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+      };
+    }, []);
+
+    const lastPointerTypeRef = useRef<PointerType | null>(null);
+
+    if (props.type === "button" || props.type === "icon") {
+      return (
+        <button
+          className={clsx(
+            "ToolIcon_type_button",
+            sizeCn,
+            className,
+            visible && !props.hidden
+              ? "ToolIcon_type_button--show"
+              : "ToolIcon_type_button--hide",
+            {
+              ToolIcon: !props.hidden,
+              "ToolIcon--plain": props.type === "icon",
+            },
+          )}
+          style={props.style}
+          data-testid={props["data-testid"]}
+          hidden={props.hidden}
+          title={props.title}
+          aria-label={props["aria-label"]}
+          type="button"
+          onClick={onClick}
+          ref={innerRef}
+          disabled={isLoading || props.isLoading || !!props.disabled}
+        >
+          {(props.icon || props.label) && (
+            <div
+              className="ToolIcon__icon"
+              aria-hidden="true"
+              aria-disabled={!!props.disabled}
+            >
+              {props.icon || props.label}
+              {props.keyBindingLabel && (
+                <span className="ToolIcon__keybinding">
+                  {props.keyBindingLabel}
+                </span>
+              )}
+              {props.isLoading && <Spinner />}
+            </div>
+          )}
+          {props.showAriaLabel && (
+            <div className="ToolIcon__label">
+              {props["aria-label"]} {isLoading && <Spinner />}
+            </div>
+          )}
+          {props.children}
+        </button>
+      );
+    }
+
+    return (
+      <button
+        className={clsx("ToolIcon", "ToolIcon_type_toggle", sizeCn, className, {
+          "ToolIcon--checked": props.checked,
+        })}
+        type="button"
+        style={props.style}
+        title={props.title}
+        aria-label={props["aria-label"]}
+        aria-keyshortcuts={props["aria-keyshortcuts"]}
+        aria-pressed={props.checked}
+        data-testid={props["data-testid"]}
+        disabled={!!props.disabled}
+        aria-disabled={!!props.disabled}
+        onPointerDown={(event) => {
+          lastPointerTypeRef.current = event.pointerType || null;
+          props.onPointerDown?.(event);
+        }}
+        onPointerUp={() => {
+          requestAnimationFrame(() => {
+            lastPointerTypeRef.current = null;
+          });
+        }}
+        onClick={() => {
+          props.onSelect?.({ pointerType: lastPointerTypeRef.current });
+        }}
+        ref={innerRef}
+      >
+        <div className="ToolIcon__icon">
+          {props.icon}
+          {props.keyBindingLabel && (
+            <span className="ToolIcon__keybinding">
+              {props.keyBindingLabel}
+            </span>
+          )}
+        </div>
+      </button>
+    );
+  },
+);
+
+IconButton.displayName = "IconButton";