@prosekit/react 0.7.0-beta.0 → 0.7.0-beta.1

package/src/components/menu/menu-root.gen.ts

@@ -0,0 +1,86 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuRootElement, type MenuRootElement, type MenuRootProps as MenuRootElementProps, type MenuRootEvents } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link MenuRoot} React component.
+ *
+ * @public
+ */
+export interface MenuRootProps extends HTMLAttributes<MenuRootElement> {
+  /**
+   * Whether the overlay is initially open.
+   * @default false
+   */
+  defaultOpen?: MenuRootElementProps['defaultOpen'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: MenuRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: MenuRootElementProps['disabled'];
+  /** Emitted when the menu is opened or closed. */
+  onOpenChange?: (event: MenuRootEvents['openChange']) => void;
+}
+
+function MenuRootComponent(props: MenuRootProps, forwardedRef: ForwardedRef<MenuRootElement>) {
+  registerMenuRootElement();
+
+  const elementRef = useRef<MenuRootElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const { defaultOpen: p0, disabled: p1, open: p2, onOpenChange: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { defaultOpen: p0, disabled: p1, open: p2 });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: MenuRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-root` custom element.
+ *
+ * @public
+ */
+export const MenuRoot: ForwardRefExoticComponent<MenuRootProps & RefAttributes<MenuRootElement>> = /* @__PURE__ */ forwardRef(MenuRootComponent);
+
+export type { MenuRootEvents };

package/src/components/menu/menu-submenu-root.gen.ts

@@ -0,0 +1,42 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuSubmenuRootElement, type MenuSubmenuRootElement } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+
+/**
+ * Props for the {@link MenuSubmenuRoot} React component.
+ *
+ * @public
+ */
+export interface MenuSubmenuRootProps extends HTMLAttributes<MenuSubmenuRootElement> {}
+
+function MenuSubmenuRootComponent(props: MenuSubmenuRootProps, forwardedRef: ForwardedRef<MenuSubmenuRootElement>) {
+  registerMenuSubmenuRootElement();
+
+  const elementRef = useRef<MenuSubmenuRootElement>(null);
+
+  const { ...restProps } = props;
+
+  const mergedRef = useCallback(
+    (element: MenuSubmenuRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-submenu-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-submenu-root` custom element.
+ *
+ * @public
+ */
+export const MenuSubmenuRoot: ForwardRefExoticComponent<MenuSubmenuRootProps & RefAttributes<MenuSubmenuRootElement>> = /* @__PURE__ */ forwardRef(MenuSubmenuRootComponent);

package/src/components/menu/menu-submenu-trigger.gen.ts

@@ -0,0 +1,42 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuSubmenuTriggerElement, type MenuSubmenuTriggerElement } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+
+/**
+ * Props for the {@link MenuSubmenuTrigger} React component.
+ *
+ * @public
+ */
+export interface MenuSubmenuTriggerProps extends HTMLAttributes<MenuSubmenuTriggerElement> {}
+
+function MenuSubmenuTriggerComponent(props: MenuSubmenuTriggerProps, forwardedRef: ForwardedRef<MenuSubmenuTriggerElement>) {
+  registerMenuSubmenuTriggerElement();
+
+  const elementRef = useRef<MenuSubmenuTriggerElement>(null);
+
+  const { ...restProps } = props;
+
+  const mergedRef = useCallback(
+    (element: MenuSubmenuTriggerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-submenu-trigger', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-submenu-trigger` custom element.
+ *
+ * @public
+ */
+export const MenuSubmenuTrigger: ForwardRefExoticComponent<MenuSubmenuTriggerProps & RefAttributes<MenuSubmenuTriggerElement>> = /* @__PURE__ */ forwardRef(MenuSubmenuTriggerComponent);

package/src/components/menu/menu-trigger.gen.ts

@@ -0,0 +1,77 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuTriggerElement, type MenuTriggerElement, type MenuTriggerProps as MenuTriggerElementProps, type MenuTriggerEvents } from '@prosekit/web/menu';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link MenuTrigger} React component.
+ *
+ * @public
+ */
+export interface MenuTriggerProps extends HTMLAttributes<MenuTriggerElement> {
+  /**
+   * Whether the component should ignore user interaction.
+   *
+   * @default false
+   */
+  disabled?: MenuTriggerElementProps['disabled'];
+  /** Emitted when the menu is opened or closed. */
+  onOpenChange?: (event: MenuTriggerEvents['openChange']) => void;
+}
+
+function MenuTriggerComponent(props: MenuTriggerProps, forwardedRef: ForwardedRef<MenuTriggerElement>) {
+  registerMenuTriggerElement();
+
+  const elementRef = useRef<MenuTriggerElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const { disabled: p0, onOpenChange: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { disabled: p0 });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: MenuTriggerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-menu-trigger', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-menu-trigger` custom element.
+ *
+ * @public
+ */
+export const MenuTrigger: ForwardRefExoticComponent<MenuTriggerProps & RefAttributes<MenuTriggerElement>> = /* @__PURE__ */ forwardRef(MenuTriggerComponent);
+
+export type { MenuTriggerEvents };

package/src/components/popover/index.gen.ts

@@ -1,5 +1,13 @@
-export { PopoverContent, type PopoverContentProps } from './popover-content.gen.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
 
-export { PopoverRoot, type PopoverRootProps } from './popover-root.gen.ts'
+export { PopoverPopup, type PopoverPopupProps } from './popover-popup.gen.ts';
 
-export { PopoverTrigger, type PopoverTriggerProps } from './popover-trigger.gen.ts'
+export { PopoverPositioner, type PopoverPositionerProps } from './popover-positioner.gen.ts';
+
+export { PopoverRoot, type PopoverRootProps, type PopoverRootEvents } from './popover-root.gen.ts';
+
+export { PopoverTrigger, type PopoverTriggerProps, type PopoverTriggerEvents } from './popover-trigger.gen.ts';
+
+export { OpenChangeEvent } from '@prosekit/web/popover';

package/src/components/popover/index.ts

@@ -0,0 +1,24 @@
+/**
+
+@module
+
+## Anatomy
+
+```jsx
+import {
+  PopoverPopup,
+  PopoverPositioner,
+  PopoverRoot,
+  PopoverTrigger,
+} from 'prosekit/react/popover'
+
+<PopoverRoot>
+  <PopoverTrigger>...</PopoverTrigger>
+  <PopoverPositioner>
+    <PopoverPopup>...</PopoverPopup>
+  </PopoverPositioner>
+</PopoverRoot>
+```
+*/
+
+export * from './index.gen.ts'

package/src/components/popover/popover-popup.gen.ts

@@ -0,0 +1,42 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerPopoverPopupElement, type PopoverPopupElement } from '@prosekit/web/popover';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'react';
+
+/**
+ * Props for the {@link PopoverPopup} React component.
+ *
+ * @public
+ */
+export interface PopoverPopupProps extends HTMLAttributes<PopoverPopupElement> {}
+
+function PopoverPopupComponent(props: PopoverPopupProps, forwardedRef: ForwardedRef<PopoverPopupElement>) {
+  registerPopoverPopupElement();
+
+  const elementRef = useRef<PopoverPopupElement>(null);
+
+  const { ...restProps } = props;
+
+  const mergedRef = useCallback(
+    (element: PopoverPopupElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-popover-popup', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-popover-popup` custom element.
+ *
+ * @public
+ */
+export const PopoverPopup: ForwardRefExoticComponent<PopoverPopupProps & RefAttributes<PopoverPopupElement>> = /* @__PURE__ */ forwardRef(PopoverPopupComponent);

package/src/components/popover/popover-positioner.gen.ts

@@ -0,0 +1,176 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerPopoverPositionerElement, type PopoverPositionerElement, type PopoverPositionerProps as PopoverPositionerElementProps } from '@prosekit/web/popover';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link PopoverPositioner} React component.
+ *
+ * @public
+ */
+export interface PopoverPositionerProps extends HTMLAttributes<PopoverPositionerElement> {
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: PopoverPositionerElementProps['strategy'];
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "top"
+   */
+  placement?: PopoverPositionerElementProps['placement'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: PopoverPositionerElementProps['autoUpdate'];
+  /**
+   * Whether to use the browser Popover API to place the floating element on
+   * top of other page content.
+   *
+   * @default true
+   */
+  hoist?: PopoverPositionerElementProps['hoist'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 6
+   */
+  offset?: PopoverPositionerElementProps['offset'];
+  /**
+   * Whether to flip the `placement` in order to keep it in view when the
+   * preferred placement(s) will overflow the clipping boundary. You can also
+   * provide an array of placements to try sequentially if the preferred
+   * `placement` does not fit.
+   *
+   * @default true
+   */
+  flip?: PopoverPositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: PopoverPositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: PopoverPositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: PopoverPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: PopoverPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: PopoverPositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: PopoverPositionerElementProps['inline'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: PopoverPositionerElementProps['hide'];
+  /**
+   * Describes the clipping element(s) or area that overflow will be checked relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
+   *
+   * @default 'clippingAncestors'
+   */
+  boundary?: PopoverPositionerElementProps['boundary'];
+  /**
+   * Describes the root boundary that the element will be checked for overflow relative to.
+   * Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
+   *
+   * @default 'viewport'
+   */
+  rootBoundary?: PopoverPositionerElementProps['rootBoundary'];
+  /**
+   * Describes the virtual padding around the boundary to check for overflow.
+   * Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
+   *
+   * @default 4
+   */
+  overflowPadding?: PopoverPositionerElementProps['overflowPadding'];
+  /**
+   * The element that will be used to check for overflow. Please see
+   * https://floating-ui.com/docs/detectoverflow#elementcontext for more
+   * information.
+   *
+   * @default 'floating'
+   */
+  elementContext?: PopoverPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: PopoverPositionerElementProps['altBoundary'];
+}
+
+function PopoverPositionerComponent(props: PopoverPositionerProps, forwardedRef: ForwardedRef<PopoverPositionerElement>) {
+  registerPopoverPositionerElement();
+
+  const elementRef = useRef<PopoverPositionerElement>(null);
+
+  const { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { altBoundary: p0, autoUpdate: p1, boundary: p2, elementContext: p3, fitViewport: p4, flip: p5, hide: p6, hoist: p7, inline: p8, offset: p9, overflowPadding: p10, overlap: p11, placement: p12, rootBoundary: p13, sameHeight: p14, sameWidth: p15, shift: p16, strategy: p17 });
+  });
+
+  const mergedRef = useCallback(
+    (element: PopoverPositionerElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-popover-positioner', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
+
+/**
+ * A React component that renders an `prosekit-popover-positioner` custom element.
+ *
+ * @public
+ */
+export const PopoverPositioner: ForwardRefExoticComponent<PopoverPositionerProps & RefAttributes<PopoverPositionerElement>> = /* @__PURE__ */ forwardRef(PopoverPositionerComponent);

package/src/components/popover/popover-root.gen.ts

@@ -1,34 +1,93 @@
-import {
-  type PopoverRootElement,
-  type PopoverRootProps as Props,
-  type PopoverRootEvents as Events,
-  popoverRootProps,
-  popoverRootEvents,
-} from '@prosekit/web/popover'
-import type {
-  ForwardRefExoticComponent,
-  HTMLAttributes,
-  RefAttributes,
-} from 'react'
-
-import { createComponent } from '../create-component.ts'
-import type { CreateProps } from '../create-props.ts'
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerPopoverRootElement, type PopoverRootElement, type PopoverRootProps as PopoverRootElementProps, type PopoverRootEvents } from '@prosekit/web/popover';
+import { createElement, forwardRef, useCallback, useRef, type ForwardedRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes, useLayoutEffect } from 'react';
+
+/**
+ * Props for the {@link PopoverRoot} React component.
+ *
+ * @public
+ */
+export interface PopoverRootProps extends HTMLAttributes<PopoverRootElement> {
+  /**
+   * Whether the popover should be modal.
+   * When true, the popover will trap focus and prevent interaction with the rest of the page.
+   *
+   * @default false
+   */
+  modal?: PopoverRootElementProps['modal'];
+  /**
+   * Whether the overlay is initially open.
+   * @default false
+   */
+  defaultOpen?: PopoverRootElementProps['defaultOpen'];
+  /**
+   * Whether the overlay is currently open.
+   * @default null
+   */
+  open?: PopoverRootElementProps['open'];
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: PopoverRootElementProps['disabled'];
+  /** Emitted when the popover is opened or closed. */
+  onOpenChange?: (event: PopoverRootEvents['openChange']) => void;
+}
+
+function PopoverRootComponent(props: PopoverRootProps, forwardedRef: ForwardedRef<PopoverRootElement>) {
+  registerPopoverRootElement();
+
+  const elementRef = useRef<PopoverRootElement>(null);
+  const handlersRef = useRef<Array<((event: Event) => void) | undefined>>([]);
+
+  const { defaultOpen: p0, disabled: p1, modal: p2, open: p3, onOpenChange: e0, ...restProps } = props;
+
+  useLayoutEffect(() => {
+    const element = elementRef.current as Record<string, unknown> | null;
+    if (!element) return;
+    Object.assign(element, { defaultOpen: p0, disabled: p1, modal: p2, open: p3 });
+    handlersRef.current = [e0] as Array<((event: Event) => void) | undefined>;
+  });
+
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!element) return;
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event: Event) => {
+          handlersRef.current[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  }, []);
+
+  const mergedRef = useCallback(
+    (element: PopoverRootElement | null) => {
+      elementRef.current = element;
+      if (typeof forwardedRef === 'function') {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef],
+  );
+
+  return createElement('prosekit-popover-root', { ...restProps, ref: mergedRef, suppressHydrationWarning: true });
+}
 
 /**
- * Props for the {@link PopoverRoot} component.
+ * A React component that renders an `prosekit-popover-root` custom element.
+ *
+ * @public
  */
-export interface PopoverRootProps extends Partial<CreateProps<Props, Events>> {}
-
-export const PopoverRoot: ForwardRefExoticComponent<
-  PopoverRootProps &
-  RefAttributes<PopoverRootElement> &
-  HTMLAttributes<PopoverRootElement>
-> = createComponent<
-  PopoverRootProps,
-  PopoverRootElement
->(
-  'prosekit-popover-root',
-  'PopoverRoot',
-  Object.keys(popoverRootProps),
-  Object.keys(popoverRootEvents),
-)
+export const PopoverRoot: ForwardRefExoticComponent<PopoverRootProps & RefAttributes<PopoverRootElement>> = /* @__PURE__ */ forwardRef(PopoverRootComponent);
+
+export type { PopoverRootEvents };