Selection Toolbar (Base UI)

1"use client";
2 
3import { Toolbar as ToolbarPrimitive } from "@base-ui/react/toolbar";
4import * as React from "react";
5import { createPortal } from "react-dom";
6 
7import {
8  getSelectionToolbarButtonClassName,
9  getSelectionToolbarShortcutLabel,
10  isSelectionToolbarCommandActive,
11  type SelectionToolbarItem,
12  type SelectionToolbarProps,
13  selectionToolbarStyles,
14  useSelectionToolbar,
15} from "./selectiontoolbar";
16 
17export type {
18  SelectionToolbarCommand,
19  SelectionToolbarItem,
20  SelectionToolbarProps,
21} from "./selectiontoolbar";
22 
23type ToolbarButtonProps = {
24  active?: boolean;
25  children: React.ReactNode;
26  className?: string;
27  disabled?: boolean;
28  label: string;
29  onMouseDown: (event: React.MouseEvent<HTMLButtonElement>) => void;
30  shortcut?: string;
31  tabIndex?: number;
32};
33 
34const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(
35  function ToolbarButton(
36    {
37      active = false,
38      children,
39      className,
40      disabled = false,
41      label,
42      onMouseDown,
43      shortcut,
44      tabIndex = -1,
45    },
46    ref
47  ) {
48    return (
49      <ToolbarPrimitive.Button
50        aria-keyshortcuts={shortcut}
51        aria-label={shortcut ? `${label} (${shortcut})` : label}
52        aria-pressed={active}
53        className={getSelectionToolbarButtonClassName({ active, className })}
54        disabled={disabled}
55        onMouseDown={onMouseDown}
56        ref={ref}
57        tabIndex={tabIndex}
58        title={shortcut ? `${label} (${shortcut})` : label}
59        type="button"
60      >
61        <span className={selectionToolbarStyles.toolbarButtonIconClassName}>
62          {children}
63        </span>
64      </ToolbarPrimitive.Button>
65    );
66  }
67);
68 
69ToolbarButton.displayName = "SelectionToolbarButton";
70 
71function renderToolbarItems({
72  active,
73  buttonRefs,
74  disabled,
75  focusedIndex,
76  handleItemAction,
77  items,
78}: {
79  active: ReturnType<typeof useSelectionToolbar>["active"];
80  buttonRefs: ReturnType<typeof useSelectionToolbar>["buttonRefs"];
81  disabled: boolean;
82  focusedIndex: number;
83  handleItemAction: (item: SelectionToolbarItem) => void;
84  items: SelectionToolbarItem[];
85}) {
86  return items.map((item, index) => (
87    <ToolbarButton
88      active={
89        item.command
90          ? isSelectionToolbarCommandActive(item.command, active)
91          : false
92      }
93      disabled={disabled || item.disabled}
94      key={item.id}
95      label={item.label}
96      onMouseDown={(event) => {
97        event.preventDefault();
98        handleItemAction(item);
99// … truncated