@prosekit/solid 0.7.0-beta.0 → 0.7.0-beta.2

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

@@ -0,0 +1,192 @@
+/**
+ * This file is auto-generated by the "@aria-ui/cli" tool. Do not edit this file directly.
+ */
+
+import { registerMenuPositionerElement, type MenuPositionerElement, type MenuPositionerProps as MenuPositionerElementProps } from '@prosekit/web/menu';
+import { createEffect, createSignal, mergeProps, splitProps } from 'solid-js';
+import type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link MenuPositioner} Solid component.
+ *
+ * @public
+ */
+export interface MenuPositionerProps extends JSX.HTMLAttributes<MenuPositionerElement> {
+  /**
+   * The initial placement of the floating element
+   *
+   * @default "bottom-start"
+   */
+  placement?: MenuPositionerElementProps['placement'];
+  /**
+   * The strategy to use for positioning
+   *
+   * @default "absolute"
+   */
+  strategy?: MenuPositionerElementProps['strategy'];
+  /**
+   * Options to activate auto-update listeners
+   *
+   * @see https://floating-ui.com/docs/autoUpdate
+   *
+   * @default true
+   */
+  autoUpdate?: MenuPositionerElementProps['autoUpdate'];
+  /**
+   * Whether to use the browser Popover API to place the floating element on
+   * top of other page content.
+   *
+   * @default true
+   */
+  hoist?: MenuPositionerElementProps['hoist'];
+  /**
+   * The distance between the reference and floating element.
+   *
+   * @default 6
+   */
+  offset?: MenuPositionerElementProps['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?: MenuPositionerElementProps['flip'];
+  /**
+   * Whether the floating element should shift to keep it in view.
+   *
+   * @default true
+   */
+  shift?: MenuPositionerElementProps['shift'];
+  /**
+   * Whether the floating element can overlap the reference element to keep it
+   * in view.
+   *
+   * @default false
+   */
+  overlap?: MenuPositionerElementProps['overlap'];
+  /**
+   * Whether to constrain the floating element's width and height to not exceed
+   * the viewport.
+   *
+   * @default false
+   */
+  fitViewport?: MenuPositionerElementProps['fitViewport'];
+  /**
+   * Whether to constrain the floating element's width so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameWidth?: MenuPositionerElementProps['sameWidth'];
+  /**
+   * Whether to constrain the floating element's height so that it matches the
+   * reference element.
+   *
+   * @default false
+   */
+  sameHeight?: MenuPositionerElementProps['sameHeight'];
+  /**
+   * Whether to improve positioning for inline reference elements that span over
+   * multiple lines.
+   *
+   * @default false
+   */
+  inline?: MenuPositionerElementProps['inline'];
+  /**
+   * Whether to hide the floating element when the reference element or the
+   * floating element is fully clipped.
+   *
+   * @default false
+   */
+  hide?: MenuPositionerElementProps['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?: MenuPositionerElementProps['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?: MenuPositionerElementProps['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?: MenuPositionerElementProps['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?: MenuPositionerElementProps['elementContext'];
+  /**
+   * Whether to check the alternate elementContext's boundary. Please see
+   * https://floating-ui.com/docs/detectoverflow#altboundary for more
+   * information.
+   *
+   * @default false
+   */
+  altBoundary?: MenuPositionerElementProps['altBoundary'];
+}
+
+/**
+ * A Solid component that renders an `prosekit-menu-positioner` custom element.
+ *
+ * @public
+ */
+export const MenuPositioner: Component<MenuPositionerProps> = (props): any => {
+  registerMenuPositionerElement();
+
+  const [getElement, setElement] = createSignal<MenuPositionerElement | null>(null);
+
+  const [elementProps, restProps] = splitProps(props, ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy']);
+
+  createEffect(() => {
+    const element = getElement();
+    if (!element) return;
+
+    Object.assign(element, {
+      altBoundary: elementProps.altBoundary,
+      autoUpdate: elementProps.autoUpdate,
+      boundary: elementProps.boundary,
+      elementContext: elementProps.elementContext,
+      fitViewport: elementProps.fitViewport,
+      flip: elementProps.flip,
+      hide: elementProps.hide,
+      hoist: elementProps.hoist,
+      inline: elementProps.inline,
+      offset: elementProps.offset,
+      overflowPadding: elementProps.overflowPadding,
+      overlap: elementProps.overlap,
+      placement: elementProps.placement,
+      rootBoundary: elementProps.rootBoundary,
+      sameHeight: elementProps.sameHeight,
+      sameWidth: elementProps.sameWidth,
+      shift: elementProps.shift,
+      strategy: elementProps.strategy,
+    });
+  });
+
+  return () =>
+    h(
+      'prosekit-menu-positioner',
+      mergeProps(restProps, {
+        ref: (el: MenuPositionerElement | null) => {
+          setElement(el);
+        },
+      }),
+    );
+};

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 MenuRootEvents, type MenuRootProps as MenuRootElementProps } from '@prosekit/web/menu';
+import { createEffect, createSignal, mergeProps, splitProps } from 'solid-js';
+import type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link MenuRoot} Solid component.
+ *
+ * @public
+ */
+export interface MenuRootProps extends JSX.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;
+}
+
+/**
+ * A Solid component that renders an `prosekit-menu-root` custom element.
+ *
+ * @public
+ */
+export const MenuRoot: Component<MenuRootProps> = (props): any => {
+  registerMenuRootElement();
+
+  const [getElement, setElement] = createSignal<MenuRootElement | null>(null);
+  const handlers: Array<((event: any) => void) | undefined> = [];
+
+  const [elementProps, eventHandlers, restProps] = splitProps(props, ['defaultOpen', 'disabled', 'open'], ['onOpenChange']);
+
+  createEffect(() => {
+    const element = getElement();
+    if (!element) return;
+
+    Object.assign(element, { defaultOpen: elementProps.defaultOpen, disabled: elementProps.disabled, open: elementProps.open });
+
+    handlers.length = 0;
+    handlers.push(eventHandlers.onOpenChange);
+  });
+
+  createEffect(() => {
+    const element = getElement();
+    if (!element) return;
+
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event) => {
+          handlers[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  });
+
+  return () =>
+    h(
+      'prosekit-menu-root',
+      mergeProps(restProps, {
+        ref: (el: MenuRootElement | null) => {
+          setElement(el);
+        },
+      }),
+    );
+};
+
+export type { MenuRootEvents };

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

@@ -0,0 +1,27 @@
+/**
+ * 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 type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link MenuSubmenuRoot} Solid component.
+ *
+ * @public
+ */
+export interface MenuSubmenuRootProps extends JSX.HTMLAttributes<MenuSubmenuRootElement> {}
+
+/**
+ * A Solid component that renders an `prosekit-menu-submenu-root` custom element.
+ *
+ * @public
+ */
+export const MenuSubmenuRoot: Component<MenuSubmenuRootProps> = (props): any => {
+  registerMenuSubmenuRootElement();
+
+  const restProps = props;
+
+  return () => h('prosekit-menu-submenu-root', restProps);
+};

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

@@ -0,0 +1,27 @@
+/**
+ * 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 type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link MenuSubmenuTrigger} Solid component.
+ *
+ * @public
+ */
+export interface MenuSubmenuTriggerProps extends JSX.HTMLAttributes<MenuSubmenuTriggerElement> {}
+
+/**
+ * A Solid component that renders an `prosekit-menu-submenu-trigger` custom element.
+ *
+ * @public
+ */
+export const MenuSubmenuTrigger: Component<MenuSubmenuTriggerProps> = (props): any => {
+  registerMenuSubmenuTriggerElement();
+
+  const restProps = props;
+
+  return () => h('prosekit-menu-submenu-trigger', restProps);
+};

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 MenuTriggerEvents, type MenuTriggerProps as MenuTriggerElementProps } from '@prosekit/web/menu';
+import { createEffect, createSignal, mergeProps, splitProps } from 'solid-js';
+import type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link MenuTrigger} Solid component.
+ *
+ * @public
+ */
+export interface MenuTriggerProps extends JSX.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;
+}
+
+/**
+ * A Solid component that renders an `prosekit-menu-trigger` custom element.
+ *
+ * @public
+ */
+export const MenuTrigger: Component<MenuTriggerProps> = (props): any => {
+  registerMenuTriggerElement();
+
+  const [getElement, setElement] = createSignal<MenuTriggerElement | null>(null);
+  const handlers: Array<((event: any) => void) | undefined> = [];
+
+  const [elementProps, eventHandlers, restProps] = splitProps(props, ['disabled'], ['onOpenChange']);
+
+  createEffect(() => {
+    const element = getElement();
+    if (!element) return;
+
+    Object.assign(element, { disabled: elementProps.disabled });
+
+    handlers.length = 0;
+    handlers.push(eventHandlers.onOpenChange);
+  });
+
+  createEffect(() => {
+    const element = getElement();
+    if (!element) return;
+
+    const ac = new AbortController();
+    for (const [index, eventName] of ['openChange'].entries()) {
+      element.addEventListener(
+        eventName,
+        (event) => {
+          handlers[index]?.(event);
+        },
+        { signal: ac.signal },
+      );
+    }
+    return () => ac.abort();
+  });
+
+  return () =>
+    h(
+      'prosekit-menu-trigger',
+      mergeProps(restProps, {
+        ref: (el: MenuTriggerElement | null) => {
+          setElement(el);
+        },
+      }),
+    );
+};
+
+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/solid/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,27 @@
+/**
+ * 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 type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link PopoverPopup} Solid component.
+ *
+ * @public
+ */
+export interface PopoverPopupProps extends JSX.HTMLAttributes<PopoverPopupElement> {}
+
+/**
+ * A Solid component that renders an `prosekit-popover-popup` custom element.
+ *
+ * @public
+ */
+export const PopoverPopup: Component<PopoverPopupProps> = (props): any => {
+  registerPopoverPopupElement();
+
+  const restProps = props;
+
+  return () => h('prosekit-popover-popup', restProps);
+};

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

@@ -0,0 +1,192 @@
+/**
+ * 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 { createEffect, createSignal, mergeProps, splitProps } from 'solid-js';
+import type { Component, JSX } from 'solid-js';
+import h from 'solid-js/h';
+
+/**
+ * Props for the {@link PopoverPositioner} Solid component.
+ *
+ * @public
+ */
+export interface PopoverPositionerProps extends JSX.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'];
+}
+
+/**
+ * A Solid component that renders an `prosekit-popover-positioner` custom element.
+ *
+ * @public
+ */
+export const PopoverPositioner: Component<PopoverPositionerProps> = (props): any => {
+  registerPopoverPositionerElement();
+
+  const [getElement, setElement] = createSignal<PopoverPositionerElement | null>(null);
+
+  const [elementProps, restProps] = splitProps(props, ['altBoundary', 'autoUpdate', 'boundary', 'elementContext', 'fitViewport', 'flip', 'hide', 'hoist', 'inline', 'offset', 'overflowPadding', 'overlap', 'placement', 'rootBoundary', 'sameHeight', 'sameWidth', 'shift', 'strategy']);
+
+  createEffect(() => {
+    const element = getElement();
+    if (!element) return;
+
+    Object.assign(element, {
+      altBoundary: elementProps.altBoundary,
+      autoUpdate: elementProps.autoUpdate,
+      boundary: elementProps.boundary,
+      elementContext: elementProps.elementContext,
+      fitViewport: elementProps.fitViewport,
+      flip: elementProps.flip,
+      hide: elementProps.hide,
+      hoist: elementProps.hoist,
+      inline: elementProps.inline,
+      offset: elementProps.offset,
+      overflowPadding: elementProps.overflowPadding,
+      overlap: elementProps.overlap,
+      placement: elementProps.placement,
+      rootBoundary: elementProps.rootBoundary,
+      sameHeight: elementProps.sameHeight,
+      sameWidth: elementProps.sameWidth,
+      shift: elementProps.shift,
+      strategy: elementProps.strategy,
+    });
+  });
+
+  return () =>
+    h(
+      'prosekit-popover-positioner',
+      mergeProps(restProps, {
+        ref: (el: PopoverPositionerElement | null) => {
+          setElement(el);
+        },
+      }),
+    );
+};