@blocknote/ariakit 0.13.0

package/src/suggestionMenu/SuggestionMenu.tsx

@@ -0,0 +1,24 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SuggestionMenu = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Root"]
+>((props, ref) => {
+  const { className, children, id, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <Ariakit.Group
+      className={mergeCSSClasses("bn-ak-menu", className || "")}
+      id={id}
+      role="listbox"
+      ref={ref}>
+      {children}
+    </Ariakit.Group>
+  );
+});

package/src/suggestionMenu/SuggestionMenuEmptyItem.tsx

@@ -0,0 +1,20 @@
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SuggestionMenuEmptyItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["EmptyItem"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      className={mergeCSSClasses("bn-ak-menu-item", className || "")}
+      ref={ref}>
+      <div className="bn-ak-suggestion-menu-item-label">{children}</div>
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuItem.tsx

@@ -0,0 +1,43 @@
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SuggestionMenuItem = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Item"]
+>((props, ref) => {
+  const { className, item, isSelected, onClick, id, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      className={mergeCSSClasses("bn-ak-menu-item", className || "")}
+      ref={ref}
+      id={id}
+      onClick={onClick}
+      role="option"
+      aria-selected={isSelected || undefined}>
+      {item.icon && (
+        <div
+          className="bn-ak-suggestion-menu-item-section"
+          data-position="left">
+          {item.icon}
+        </div>
+      )}
+      <div className="bn-ak-suggestion-menu-item-body">
+        <div className="bn-ak-suggestion-menu-item-title">{item.title}</div>
+        <div className="bn-ak-suggestion-menu-item-subtitle">
+          {item.subtext}
+        </div>
+      </div>
+      {item.badge && (
+        <div
+          data-position="right"
+          className="bn-ak-suggestion-menu-item-section">
+          <div>{item.badge}</div>
+        </div>
+      )}
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuLabel.tsx

@@ -0,0 +1,20 @@
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SuggestionMenuLabel = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Label"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div
+      className={mergeCSSClasses("bn-ak-group-label", className || "")}
+      ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/suggestionMenu/SuggestionMenuLoader.tsx

@@ -0,0 +1,18 @@
+import { assertEmpty } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const SuggestionMenuLoader = forwardRef<
+  HTMLDivElement,
+  ComponentProps["SuggestionMenu"]["Loader"]
+>((props, ref) => {
+  const { className, children, ...rest } = props;
+
+  assertEmpty(rest);
+
+  return (
+    <div className={className} ref={ref}>
+      {children}
+    </div>
+  );
+});

package/src/tableHandle/TableHandle.tsx

@@ -0,0 +1,42 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const TableHandle = forwardRef<
+  HTMLButtonElement,
+  ComponentProps["TableHandle"]["Root"]
+>((props, ref) => {
+  const {
+    className,
+    children,
+    draggable,
+    onDragStart,
+    onDragEnd,
+    style,
+    label,
+    ...rest
+  } = props;
+
+  // false, because rest props can be added by ariakit when button is used as a trigger
+  // assertEmpty in this case is only used at typescript level, not runtime level
+  assertEmpty(rest, false);
+
+  return (
+    <Ariakit.Button
+      className={mergeCSSClasses(
+        "bn-ak-button bn-ak-secondary",
+        className || ""
+      )}
+      ref={ref}
+      aria-label={label}
+      draggable={draggable}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      style={style}
+      {...rest}>
+      {children}
+    </Ariakit.Button>
+  );
+});

package/src/toolbar/Toolbar.tsx

@@ -0,0 +1,26 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+type ToolbarProps = ComponentProps["FormattingToolbar"]["Root"] &
+  ComponentProps["LinkToolbar"]["Root"];
+
+export const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(
+  (props, ref) => {
+    const { className, children, onMouseEnter, onMouseLeave, ...rest } = props;
+
+    assertEmpty(rest);
+
+    return (
+      <Ariakit.Toolbar
+        className={mergeCSSClasses("bn-ak-toolbar", className || "")}
+        ref={ref}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}>
+        {children}
+      </Ariakit.Toolbar>
+    );
+  }
+);

package/src/toolbar/ToolbarButton.tsx

@@ -0,0 +1,73 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, isSafari, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] &
+  ComponentProps["LinkToolbar"]["Button"];
+
+/**
+ * Helper for basic buttons that show in the formatting toolbar.
+ */
+export const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(
+  (props, ref) => {
+    const {
+      className,
+      children,
+      mainTooltip,
+      secondaryTooltip,
+      icon,
+      isSelected,
+      isDisabled,
+      onClick,
+      label,
+      ...rest
+    } = props;
+
+    // false, because rest props can be added by ariakit when button is used as a trigger
+    // assertEmpty in this case is only used at typescript level, not runtime level
+    assertEmpty(rest, false);
+
+    return (
+      <Ariakit.TooltipProvider>
+        <Ariakit.TooltipAnchor
+          className="link"
+          render={
+            <Ariakit.ToolbarItem
+              aria-label={label}
+              className={mergeCSSClasses(
+                "bn-ak-button bn-ak-secondary",
+                className || ""
+              )}
+              // Needed as Safari doesn't focus button elements on mouse down
+              // unlike other browsers.
+              onMouseDown={(e) => {
+                if (isSafari()) {
+                  (e.currentTarget as HTMLButtonElement).focus();
+                }
+              }}
+              onClick={onClick}
+              aria-pressed={isSelected}
+              data-selected={isSelected ? "true" : undefined}
+              data-test={
+                props.mainTooltip.slice(0, 1).toLowerCase() +
+                props.mainTooltip.replace(/\s+/g, "").slice(1)
+              }
+              //   size={"xs"}
+              disabled={isDisabled || false}
+              ref={ref}
+              {...rest}>
+              {icon}
+              {children}
+            </Ariakit.ToolbarItem>
+          }
+        />
+        <Ariakit.Tooltip className="bn-ak-tooltip">
+          <span>{mainTooltip}</span>
+          {secondaryTooltip && <span>{secondaryTooltip}</span>}
+        </Ariakit.Tooltip>
+      </Ariakit.TooltipProvider>
+    );
+  }
+);

package/src/toolbar/ToolbarSelect.tsx

@@ -0,0 +1,47 @@
+import * as Ariakit from "@ariakit/react";
+
+import { assertEmpty, mergeCSSClasses } from "@blocknote/core";
+import { ComponentProps } from "@blocknote/react";
+import { forwardRef } from "react";
+
+export const ToolbarSelect = forwardRef<
+  HTMLDivElement,
+  ComponentProps["FormattingToolbar"]["Select"]
+>((props, ref) => {
+  const { className, items, isDisabled, ...rest } = props;
+
+  assertEmpty(rest);
+
+  const selectedItem = props.items.filter((p) => p.isSelected)[0];
+
+  const setValue = (value: string) => {
+    items.find((item) => item.text === value)!.onClick?.();
+  };
+
+  return (
+    <Ariakit.SelectProvider value={selectedItem.text} setValue={setValue}>
+      <Ariakit.Select
+        className={"bn-ak-button bn-ak-secondary"}
+        disabled={isDisabled}
+        aria-label="Text alignment"
+        render={<Ariakit.ToolbarItem />}>
+        {selectedItem.icon} {selectedItem.text} <Ariakit.SelectArrow />
+      </Ariakit.Select>
+      <Ariakit.SelectPopover
+        className={mergeCSSClasses("bn-ak-popover", className || "")}
+        ref={ref}
+        gutter={4}>
+        {items.map((option) => (
+          <Ariakit.SelectItem
+            className={"bn-ak-select-item"}
+            key={option.text}
+            value={option.text}>
+            {option.icon}
+            {option.text}
+            {option.text === selectedItem.text && <Ariakit.SelectItemCheck />}
+          </Ariakit.SelectItem>
+        ))}
+      </Ariakit.SelectPopover>
+    </Ariakit.SelectProvider>
+  );
+});

package/types/src/index.d.ts

@@ -0,0 +1,6 @@
+import { InlineContentSchema, StyleSchema } from "@blocknote/core";
+import { BlockNoteViewRaw, Components } from "@blocknote/react";
+import { ComponentProps } from "react";
+import "./style.css";
+export declare const components: Components;
+export declare const BlockNoteView: <BSchema extends Record<string, import("@blocknote/core").BlockConfig>, ISchema extends InlineContentSchema, SSchema extends StyleSchema>(props: ComponentProps<typeof BlockNoteViewRaw<BSchema, ISchema, SSchema>>) => import("react/jsx-runtime").JSX.Element;

package/types/src/input/Form.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from "@blocknote/react";
+export declare const Form: (props: ComponentProps["Generic"]["Form"]["Root"]) => import("react/jsx-runtime").JSX.Element;

package/types/src/input/TextInput.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const TextInput: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    name: string;
+    label?: string | undefined;
+    icon: import("react").ReactNode;
+    autoFocus?: boolean | undefined;
+    placeholder: string;
+    value: string;
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLInputElement>) => void;
+    onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onSubmit?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/menu/Menu.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { ComponentProps } from "@blocknote/react";
+export declare const Menu: (props: ComponentProps["Generic"]["Menu"]["Root"]) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuDropdown: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    sub?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    subTrigger?: boolean | undefined;
+    icon?: import("react").ReactNode;
+    checked?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuLabel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuTrigger: (props: ComponentProps["Generic"]["Menu"]["Trigger"]) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;
+export declare const MenuDivider: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+} & import("react").RefAttributes<HTMLHRElement>>;

package/types/src/panel/Panel.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const Panel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    tabs: {
+        name: string;
+        tabPanel: import("react").ReactNode;
+    }[];
+    openTab: string;
+    setOpenTab: (name: string) => void;
+    defaultOpenTab: string;
+    loading: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/panel/PanelButton.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export declare const PanelButton: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    onClick: () => void;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/panel/PanelFileInput.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const PanelFileInput: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: File | null;
+    placeholder: string;
+    onChange: (payload: File | null) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/panel/PanelTab.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PanelTab: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/panel/PanelTextInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const PanelTextInput: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: string;
+    placeholder: string;
+    onChange: (event: import("react").ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (event: import("react").KeyboardEvent<Element>) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/types/src/popover/Popover.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ComponentProps } from "@blocknote/react";
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContent: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    variant: "form-popover" | "panel-popover";
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Popover: (props: ComponentProps["Generic"]["Popover"]["Root"]) => import("react/jsx-runtime").JSX.Element;

package/types/src/sideMenu/SideMenu.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SideMenu: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/sideMenu/SideMenuButton.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const SideMenuButton: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    onClick?: ((e: import("react").MouseEvent<Element, MouseEvent>) => void) | undefined;
+    icon?: import("react").ReactNode;
+    onDragStart?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    onDragEnd?: ((e: import("react").DragEvent<Element>) => void) | undefined;
+    draggable?: boolean | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/suggestionMenu/SuggestionMenu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const SuggestionMenu: import("react").ForwardRefExoticComponent<{
+    id: string;
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuEmptyItem.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SuggestionMenuEmptyItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuItem.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const SuggestionMenuItem: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    id: string;
+    isSelected: boolean;
+    onClick: () => void;
+    item: import("@blocknote/react").DefaultReactSuggestionItem;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLabel.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SuggestionMenuLabel: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/suggestionMenu/SuggestionMenuLoader.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SuggestionMenuLoader: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/tableHandle/TableHandle.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export declare const TableHandle: import("react").ForwardRefExoticComponent<({
+    className?: string | undefined;
+    draggable: boolean;
+    onDragStart: (e: import("react").DragEvent<Element>) => void;
+    onDragEnd: () => void;
+    style?: import("react").CSSProperties | undefined;
+} & ({
+    children: import("react").ReactNode;
+    label?: string | undefined;
+} | {
+    children?: undefined;
+    label: string;
+})) & import("react").RefAttributes<HTMLButtonElement>>;

package/types/src/toolbar/Toolbar.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export declare const Toolbar: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    children?: import("react").ReactNode;
+    onMouseEnter?: (() => void) | undefined;
+    onMouseLeave?: (() => void) | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/toolbar/ToolbarButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ComponentProps } from "@blocknote/react";
+type ToolbarButtonProps = ComponentProps["FormattingToolbar"]["Button"] & ComponentProps["LinkToolbar"]["Button"];
+/**
+ * Helper for basic buttons that show in the formatting toolbar.
+ */
+export declare const ToolbarButton: import("react").ForwardRefExoticComponent<ToolbarButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/types/src/toolbar/ToolbarSelect.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const ToolbarSelect: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    items: {
+        text: string;
+        icon: import("react").ReactNode;
+        onClick: () => void;
+        isSelected: boolean;
+        isDisabled?: boolean | undefined;
+    }[];
+    isDisabled?: boolean | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;