@prosekit/web 0.8.0-beta.3 → 0.8.0-beta.4

package/dist/prosekit-web.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-web.js","names":[],"sources":["../src/queue-extension.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\n\n/**\n\n  @internal\n\n  Queues an extension to be added to the editor in the next task. Returns a\n  dispose function that can be used to remove the extension in the next task.\n\n  Why?\n\n  Let's take React as an example.\n\n  `editor.use(extension)` is synchronous. If the extension adds a node view that\n  is controlled by `@prosemirror-adapter/react`, adding this extension will\n  cause `prosemirror-adapter` to set UI state synchronously (e.g. `setState`\n  returned by `useState` in React).\n\n  ProseMirror is a sync-based framework. When updating node view, ProseMirror\n  will first stop DOMObserver, then update the DOM, then resume DOMObserver.\n  `prosemirror-adapter` needs to call `React.flushSync()` to update the DOM\n  synchronously right after React state is updated, before ProseMirror resumes\n  DOMObserver.\n\n  If we call `editor.use(extension)` directly in `useEffect`, we eventually are\n  doing something like this:\n\n  ```ts\n  React.useEffect(() => {\n    React.flushSync(() => {\n      setState(newState)\n    })\n  }, [])\n  ```\n\n  This breaks the async nature of React, and causes the following React\n  warning:\n\n  ```\n  flushSync was called from inside a lifecycle method. React cannot flush when\n  React is already rendering. Consider moving this call to a scheduler task or\n  micro task.\n  ```\n\n  To fix this, we need to queue the extension addition to the editor in the next\n  task or in the next microtask.\n\n  ```ts\n  // In the next microtask\n  React.useEffect(() => {\n    queueMicrotask(() => {\n      React.flushSync(() => {\n        setState(newState)\n      })\n    })\n  }, [])\n\n  // In the next task\n  React.useEffect(() => {\n    setTimeout(() => {\n      React.flushSync(() => {\n        setState(newState)\n      })\n    })\n  }, [])\n  ```\n\n  I chose to use `setTimeout` instead of `queueMicrotask` because\n  `queueMicrotask` causes another React act warning `An update to %s inside a\n  test was not wrapped in act(...)` during testing.\n\n  Although the example above is based on React, this is a general pattern for\n  any async based UI framework, including Svelte.\n\n */\nexport function queueExtension(editor: Editor, extension: Extension): VoidFunction {\n  let canceled = false\n  let dispose: VoidFunction | undefined\n  const timeout = setTimeout(() => {\n    if (canceled) return\n    dispose?.()\n    dispose = editor.use(extension)\n  })\n\n  return () => {\n    canceled = true\n    clearTimeout(timeout)\n    setTimeout(() => {\n      dispose?.()\n      dispose = undefined\n    })\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,eAAe,QAAgB,WAAoC;CACjF,IAAI,WAAW;CACf,IAAI;CACJ,MAAM,UAAU,iBAAiB;AAC/B,MAAI,SAAU;AACd,aAAW;AACX,YAAU,OAAO,IAAI,UAAU;GAC/B;AAEF,cAAa;AACX,aAAW;AACX,eAAa,QAAQ;AACrB,mBAAiB;AACf,cAAW;AACX,aAAU,KAAA;IACV"}
+{"version":3,"file":"prosekit-web.js","names":[],"sources":["../src/queue-extension.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\n\n/**\n\n  @internal\n\n  Queues an extension to be added to the editor in the next task. Returns a\n  dispose function that can be used to remove the extension in the next task.\n\n  Why?\n\n  Let's take React as an example.\n\n  `editor.use(extension)` is synchronous. If the extension adds a node view that\n  is controlled by `@prosemirror-adapter/react`, adding this extension will\n  cause `prosemirror-adapter` to set UI state synchronously (e.g. `setState`\n  returned by `useState` in React).\n\n  ProseMirror is a sync-based framework. When updating node view, ProseMirror\n  will first stop DOMObserver, then update the DOM, then resume DOMObserver.\n  `prosemirror-adapter` needs to call `React.flushSync()` to update the DOM\n  synchronously right after React state is updated, before ProseMirror resumes\n  DOMObserver.\n\n  If we call `editor.use(extension)` directly in `useEffect`, we eventually are\n  doing something like this:\n\n  ```ts\n  React.useEffect(() => {\n    React.flushSync(() => {\n      setState(newState)\n    })\n  }, [])\n  ```\n\n  This breaks the async nature of React, and causes the following React\n  warning:\n\n  ```\n  flushSync was called from inside a lifecycle method. React cannot flush when\n  React is already rendering. Consider moving this call to a scheduler task or\n  micro task.\n  ```\n\n  To fix this, we need to queue the extension addition to the editor in the next\n  task or in the next microtask.\n\n  ```ts\n  // In the next microtask\n  React.useEffect(() => {\n    queueMicrotask(() => {\n      React.flushSync(() => {\n        setState(newState)\n      })\n    })\n  }, [])\n\n  // In the next task\n  React.useEffect(() => {\n    setTimeout(() => {\n      React.flushSync(() => {\n        setState(newState)\n      })\n    })\n  }, [])\n  ```\n\n  I chose to use `setTimeout` instead of `queueMicrotask` because\n  `queueMicrotask` causes another React act warning `An update to %s inside a\n  test was not wrapped in act(...)` during testing.\n\n  Although the example above is based on React, this is a general pattern for\n  any async based UI framework, including Svelte.\n\n */\nexport function queueExtension(editor: Editor, extension: Extension): VoidFunction {\n  let canceled = false\n  let dispose: VoidFunction | undefined\n  const timeout = setTimeout(() => {\n    if (canceled) return\n    dispose?.()\n    dispose = editor.use(extension)\n  })\n\n  return () => {\n    canceled = true\n    clearTimeout(timeout)\n    setTimeout(() => {\n      dispose?.()\n      dispose = undefined\n    })\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,eAAe,QAAgB,WAAoC;CACjF,IAAI,WAAW;CACf,IAAI;CACJ,MAAM,UAAU,iBAAiB;AAC/B,MAAI,SAAU;AACd,aAAW;AACX,YAAU,OAAO,IAAI,UAAU;GAC/B;AAEF,cAAa;AACX,aAAW;AACX,eAAa,QAAQ;AACrB,mBAAiB;AACf,cAAW;AACX,aAAU,KAAA;IACV"}

package/dist/use-editor-extension.js

@@ -1,11 +1,9 @@
 import { useEffect } from "@aria-ui/core";
-//#region src/hooks/use-editor-extension.ts
 function useEditorExtension(host, getEditor, extension) {
 	useEffect(host, () => {
 		return getEditor()?.use(extension);
 	});
 }
-//#endregion
 export { useEditorExtension as t };
 
 //# sourceMappingURL=use-editor-extension.js.map

package/dist/use-editor-extension.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-editor-extension.js","names":[],"sources":["../src/hooks/use-editor-extension.ts"],"sourcesContent":["import { useEffect, type HostElement } from '@aria-ui/core'\nimport type { Editor, Extension } from '@prosekit/core'\n\nexport function useEditorExtension(\n  host: HostElement,\n  getEditor: () => Editor | null,\n  extension: Extension,\n): void {\n  useEffect(host, () => {\n    return getEditor()?.use(extension)\n  })\n}\n"],"mappings":";;AAGA,SAAgB,mBACd,MACA,WACA,WACM;AACN,WAAU,YAAY;AACpB,SAAO,WAAW,EAAE,IAAI,UAAU;GAClC"}
+{"version":3,"file":"use-editor-extension.js","names":[],"sources":["../src/hooks/use-editor-extension.ts"],"sourcesContent":["import { useEffect, type HostElement } from '@aria-ui/core'\nimport type { Editor, Extension } from '@prosekit/core'\n\nexport function useEditorExtension(\n  host: HostElement,\n  getEditor: () => Editor | null,\n  extension: Extension,\n): void {\n  useEffect(host, () => {\n    return getEditor()?.use(extension)\n  })\n}\n"],"mappings":";AAGA,SAAgB,mBACd,MACA,WACA,WACM;AACN,WAAU,YAAY;AACpB,SAAO,WAAW,EAAE,IAAI,UAAU;GAClC"}

package/dist/use-scrolling.js

@@ -1,14 +1,11 @@
 import { createSignal, useEffect } from "@aria-ui/core";
 import { getNearestOverflowAncestor } from "@aria-ui/utils";
-//#region src/utils/assign-styles.ts
 /**
 * A type-safe version of `Object.assign` for `element.style`.
 */
 function assignStyles(element, styles) {
 	Object.assign(element.style, styles);
 }
-//#endregion
-//#region src/hooks/use-scrolling.ts
 function useScrolling(host) {
 	const scrolling = createSignal(false);
 	useEffect(host, () => {
@@ -39,7 +36,6 @@ function useScrolling(host) {
 	});
 	return scrolling.get;
 }
-//#endregion
 export { assignStyles as n, useScrolling as t };
 
 //# sourceMappingURL=use-scrolling.js.map

package/dist/use-scrolling.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scrolling.js","names":[],"sources":["../src/utils/assign-styles.ts","../src/hooks/use-scrolling.ts"],"sourcesContent":["import type { ConditionalPick } from 'type-fest'\n\n// Only include CSS properties whose value type is `string`\ntype StringStyleDeclaration = Partial<ConditionalPick<CSSStyleDeclaration, string>>\n\n/**\n * A type-safe version of `Object.assign` for `element.style`.\n */\nexport function assignStyles(\n  element: HTMLElement | SVGElement | MathMLElement,\n  styles: StringStyleDeclaration,\n): void {\n  Object.assign(element.style, styles)\n}\n","import { createSignal, useEffect, type HostElement } from '@aria-ui/core'\nimport { getNearestOverflowAncestor } from '@aria-ui/utils'\n\nexport function useScrolling(host: HostElement): () => boolean {\n  const scrolling = createSignal(false)\n\n  useEffect(host, () => {\n    const scrollableParent = getNearestOverflowAncestor(host)\n\n    const handleScroll = () => {\n      scrolling.set(true)\n    }\n\n    const handleMouseMove = () => {\n      scrolling.set(false)\n    }\n\n    const abortController = new AbortController()\n    const abortSignal = abortController.signal\n\n    scrollableParent.addEventListener('scroll', handleScroll, { passive: true, signal: abortSignal })\n    window.addEventListener('mousemove', handleMouseMove, { passive: true, signal: abortSignal })\n    window.addEventListener('pointermove', handleMouseMove, { passive: true, signal: abortSignal })\n\n    return () => {\n      abortController.abort()\n    }\n  })\n\n  return scrolling.get\n}\n"],"mappings":";;;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;;;ACTtC,SAAgB,aAAa,MAAkC;CAC7D,MAAM,YAAY,aAAa,MAAM;AAErC,WAAU,YAAY;EACpB,MAAM,mBAAmB,2BAA2B,KAAK;EAEzD,MAAM,qBAAqB;AACzB,aAAU,IAAI,KAAK;;EAGrB,MAAM,wBAAwB;AAC5B,aAAU,IAAI,MAAM;;EAGtB,MAAM,kBAAkB,IAAI,iBAAiB;EAC7C,MAAM,cAAc,gBAAgB;AAEpC,mBAAiB,iBAAiB,UAAU,cAAc;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AACjG,SAAO,iBAAiB,aAAa,iBAAiB;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AAC7F,SAAO,iBAAiB,eAAe,iBAAiB;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AAE/F,eAAa;AACX,mBAAgB,OAAO;;GAEzB;AAEF,QAAO,UAAU"}
+{"version":3,"file":"use-scrolling.js","names":[],"sources":["../src/utils/assign-styles.ts","../src/hooks/use-scrolling.ts"],"sourcesContent":["import type { ConditionalPick } from 'type-fest'\n\n// Only include CSS properties whose value type is `string`\ntype StringStyleDeclaration = Partial<ConditionalPick<CSSStyleDeclaration, string>>\n\n/**\n * A type-safe version of `Object.assign` for `element.style`.\n */\nexport function assignStyles(\n  element: HTMLElement | SVGElement | MathMLElement,\n  styles: StringStyleDeclaration,\n): void {\n  Object.assign(element.style, styles)\n}\n","import { createSignal, useEffect, type HostElement } from '@aria-ui/core'\nimport { getNearestOverflowAncestor } from '@aria-ui/utils'\n\nexport function useScrolling(host: HostElement): () => boolean {\n  const scrolling = createSignal(false)\n\n  useEffect(host, () => {\n    const scrollableParent = getNearestOverflowAncestor(host)\n\n    const handleScroll = () => {\n      scrolling.set(true)\n    }\n\n    const handleMouseMove = () => {\n      scrolling.set(false)\n    }\n\n    const abortController = new AbortController()\n    const abortSignal = abortController.signal\n\n    scrollableParent.addEventListener('scroll', handleScroll, { passive: true, signal: abortSignal })\n    window.addEventListener('mousemove', handleMouseMove, { passive: true, signal: abortSignal })\n    window.addEventListener('pointermove', handleMouseMove, { passive: true, signal: abortSignal })\n\n    return () => {\n      abortController.abort()\n    }\n  })\n\n  return scrolling.get\n}\n"],"mappings":";;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;ACTtC,SAAgB,aAAa,MAAkC;CAC7D,MAAM,YAAY,aAAa,MAAM;AAErC,WAAU,YAAY;EACpB,MAAM,mBAAmB,2BAA2B,KAAK;EAEzD,MAAM,qBAAqB;AACzB,aAAU,IAAI,KAAK;;EAGrB,MAAM,wBAAwB;AAC5B,aAAU,IAAI,MAAM;;EAGtB,MAAM,kBAAkB,IAAI,iBAAiB;EAC7C,MAAM,cAAc,gBAAgB;AAEpC,mBAAiB,iBAAiB,UAAU,cAAc;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AACjG,SAAO,iBAAiB,aAAa,iBAAiB;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AAC7F,SAAO,iBAAiB,eAAe,iBAAiB;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AAE/F,eAAa;AACX,mBAAgB,OAAO;;GAEzB;AAEF,QAAO,UAAU"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.8.0-beta.3",
+  "version": "0.8.0-beta.4",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -72,9 +72,9 @@
     "src"
   ],
   "dependencies": {
-    "@aria-ui/core": "^0.1.0",
-    "@aria-ui/elements": "^0.1.2",
-    "@aria-ui/utils": "^0.1.0",
+    "@aria-ui/core": "^0.1.1",
+    "@aria-ui/elements": "^0.1.4",
+    "@aria-ui/utils": "^0.1.1",
     "@floating-ui/dom": "^1.7.6",
     "@ocavue/utils": "^1.6.0",
     "prosemirror-tables": "^1.8.5",
@@ -83,14 +83,14 @@
     "@prosekit/pm": "^0.1.15"
   },
   "devDependencies": {
-    "@aria-ui/cli": "^0.1.3",
+    "@aria-ui/cli": "^0.1.5",
     "tsdown": "^0.21.7",
     "type-fest": "^5.5.0",
     "typescript": "~5.9.3",
     "vitest": "^4.1.4",
-    "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-ts": "0.0.0"
   },
   "publishConfig": {
     "dev": {}

package/src/components/autocomplete/autocomplete-empty.ts

@@ -9,9 +9,6 @@ import {
 } from '@aria-ui/core'
 import { setupListboxEmpty, type ListboxEmptyProps } from '@aria-ui/elements/listbox'
 
-/**
- * @internal
- */
 export interface AutocompleteEmptyProps extends ListboxEmptyProps {}
 
 /** @internal */
@@ -35,7 +32,9 @@ const AutocompleteEmptyElementBase: HostElementConstructor<AutocompleteEmptyProp
 )
 
 /**
- * @public
+ * `<prosekit-autocomplete-empty>` custom element.
+ *
+ * Properties: {@link AutocompleteEmptyProps}
  */
 export class AutocompleteEmptyElement extends AutocompleteEmptyElementBase {}
 

package/src/components/autocomplete/autocomplete-item.ts

@@ -55,7 +55,17 @@ const AutocompleteItemElementBase: HostElementConstructor<AutocompleteItemProps>
 )
 
 /**
- * @public
+ * `<prosekit-autocomplete-item>` custom element.
+ *
+ * Properties: {@link AutocompleteItemProps}
+ *
+ * Events: {@link AutocompleteItemEvents}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-highlighted` | Present when the item is the currently highlighted option |
  */
 export class AutocompleteItemElement extends AutocompleteItemElementBase {}
 

package/src/components/autocomplete/autocomplete-popup.ts

@@ -85,7 +85,17 @@ const AutocompletePopupElementBase: HostElementConstructor<AutocompletePopupProp
 )
 
 /**
- * @public
+ * `<prosekit-autocomplete-popup>` custom element.
+ *
+ * Properties: {@link AutocompletePopupProps}
+ *
+ * Events: {@link AutocompletePopupEvents}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the autocomplete is visible, `"closed"` otherwise |
  */
 export class AutocompletePopupElement extends AutocompletePopupElementBase {}
 

package/src/components/autocomplete/autocomplete-positioner.ts

@@ -88,7 +88,23 @@ const AutocompletePositionerElementBase: HostElementConstructor<AutocompletePosi
 )
 
 /**
- * @public
+ * `<prosekit-autocomplete-positioner>` custom element.
+ *
+ * Properties: {@link AutocompletePositionerProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the autocomplete is visible, `"closed"` otherwise |
+ * | `data-side` | The side of the anchor element the positioner is on |
+ * | `data-align` | The alignment of the positioner relative to the anchor element |
+ *
+ * CSS variables:
+ *
+ * | Variable | Description |
+ * | --- | --- |
+ * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |
  */
 export class AutocompletePositionerElement extends AutocompletePositionerElementBase {}
 

package/src/components/autocomplete/autocomplete-root.ts

@@ -270,7 +270,11 @@ const AutocompleteRootElementBase: HostElementConstructor<AutocompleteRootProps>
 )
 
 /**
- * @public
+ * `<prosekit-autocomplete-root>` custom element.
+ *
+ * Properties: {@link AutocompleteRootProps}
+ *
+ * Events: {@link AutocompleteRootEvents}
  */
 export class AutocompleteRootElement extends AutocompleteRootElementBase {}
 

package/src/components/block-handle/block-handle-add.ts

@@ -61,7 +61,9 @@ const BlockHandleAddElementBase: HostElementConstructor<BlockHandleAddProps> = d
 )
 
 /**
- * @public
+ * `<prosekit-block-handle-add>` custom element.
+ *
+ * Properties: {@link BlockHandleAddProps}
  */
 export class BlockHandleAddElement extends BlockHandleAddElementBase {}
 

package/src/components/block-handle/block-handle-draggable.ts

@@ -148,7 +148,15 @@ const BlockHandleDraggableElementBase: HostElementConstructor<BlockHandleDraggab
 )
 
 /**
- * @public
+ * `<prosekit-block-handle-draggable>` custom element.
+ *
+ * Properties: {@link BlockHandleDraggableProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-dragging` | Present when the element is being dragged |
  */
 export class BlockHandleDraggableElement extends BlockHandleDraggableElementBase {}
 

package/src/components/block-handle/block-handle-popup.ts

@@ -33,7 +33,15 @@ const BlockHandlePopupElementBase: HostElementConstructor<BlockHandlePopupProps>
 )
 
 /**
- * @public
+ * `<prosekit-block-handle-popup>` custom element.
+ *
+ * Properties: {@link BlockHandlePopupProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the block handle is visible, `"closed"` otherwise |
  */
 export class BlockHandlePopupElement extends BlockHandlePopupElementBase {}
 

package/src/components/block-handle/block-handle-positioner.ts

@@ -79,7 +79,23 @@ const BlockHandlePositionerElementBase: HostElementConstructor<BlockHandlePositi
 )
 
 /**
- * @public
+ * `<prosekit-block-handle-positioner>` custom element.
+ *
+ * Properties: {@link BlockHandlePositionerProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the block handle is visible, `"closed"` otherwise |
+ * | `data-side` | The side of the anchor element the positioner is on |
+ * | `data-align` | The alignment of the positioner relative to the anchor element |
+ *
+ * CSS variables:
+ *
+ * | Variable | Description |
+ * | --- | --- |
+ * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |
  */
 export class BlockHandlePositionerElement extends BlockHandlePositionerElementBase {}
 

package/src/components/block-handle/block-handle-root.ts

@@ -106,7 +106,11 @@ const BlockHandleRootElementBase: HostElementConstructor<BlockHandleRootProps> =
 )
 
 /**
- * @public
+ * `<prosekit-block-handle-root>` custom element.
+ *
+ * Properties: {@link BlockHandleRootProps}
+ *
+ * Events: {@link BlockHandleRootEvents}
  */
 export class BlockHandleRootElement extends BlockHandleRootElementBase {}
 

package/src/components/drop-indicator/drop-indicator.ts

@@ -116,7 +116,9 @@ const DropIndicatorElementBase: HostElementConstructor<DropIndicatorProps> = def
 )
 
 /**
- * @public
+ * `<prosekit-drop-indicator>` custom element.
+ *
+ * Properties: {@link DropIndicatorProps}
  */
 export class DropIndicatorElement extends DropIndicatorElementBase {}
 

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

@@ -42,7 +42,15 @@ const InlinePopoverPopupElementBase: HostElementConstructor<InlinePopoverPopupPr
 )
 
 /**
- * @public
+ * `<prosekit-inline-popover-popup>` custom element.
+ *
+ * Properties: {@link InlinePopoverPopupProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the inline popover is visible, `"closed"` otherwise |
  */
 export class InlinePopoverPopupElement extends InlinePopoverPopupElementBase {}
 

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

@@ -108,7 +108,23 @@ const InlinePopoverPositionerElementBase: HostElementConstructor<InlinePopoverPo
 )
 
 /**
- * @public
+ * `<prosekit-inline-popover-positioner>` custom element.
+ *
+ * Properties: {@link InlinePopoverPositionerProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the inline popover is visible, `"closed"` otherwise |
+ * | `data-side` | The side of the anchor element the positioner is on |
+ * | `data-align` | The alignment of the positioner relative to the anchor element |
+ *
+ * CSS variables:
+ *
+ * | Variable | Description |
+ * | --- | --- |
+ * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |
  */
 export class InlinePopoverPositionerElement extends InlinePopoverPositionerElementBase {}
 

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

@@ -115,7 +115,11 @@ const InlinePopoverRootElementBase: HostElementConstructor<InlinePopoverRootProp
 )
 
 /**
- * @public
+ * `<prosekit-inline-popover-root>` custom element.
+ *
+ * Properties: {@link InlinePopoverRootProps}
+ *
+ * Events: {@link InlinePopoverRootEvents}
  */
 export class InlinePopoverRootElement extends InlinePopoverRootElementBase {}
 

package/src/components/menu/index.ts

@@ -24,50 +24,135 @@
 ```
 */
 
-import { registerCustomElement } from '@aria-ui/core'
-import {
-  MenuItemElement,
-  MenuPopupElement,
-  MenuPositionerElement,
-  MenuRootElement,
-  MenuSubmenuRootElement,
-  MenuSubmenuTriggerElement,
-  MenuTriggerElement,
-} from '@aria-ui/elements/menu'
+import { registerCustomElement, type PropsDeclaration } from '@aria-ui/core'
+import * as Base from '@aria-ui/elements/menu'
 
-export {
-  MenuItemElement,
-  MenuItemPropsDeclaration,
-  MenuPopupElement,
-  MenuPopupPropsDeclaration,
-  MenuPositionerElement,
-  MenuPositionerPropsDeclaration,
-  MenuRootElement,
-  MenuRootPropsDeclaration,
-  MenuSubmenuRootElement,
-  MenuSubmenuRootPropsDeclaration,
-  MenuSubmenuTriggerElement,
-  MenuSubmenuTriggerPropsDeclaration,
-  MenuTriggerElement,
-  MenuTriggerPropsDeclaration,
-  OpenChangeEvent,
-  SelectEvent,
-  setupMenuItem,
-  setupMenuPopup,
-  setupMenuPositioner,
-  setupMenuRoot,
-  setupMenuSubmenuRoot,
-  setupMenuSubmenuTrigger,
-  setupMenuTrigger,
-  type MenuItemEvents,
-  type MenuItemProps,
-  type MenuPopupProps,
-  type MenuPositionerProps,
-  type MenuRootEvents,
-  type MenuRootProps,
-  type MenuTriggerEvents,
-  type MenuTriggerProps,
-} from '@aria-ui/elements/menu'
+/**
+ * `<prosekit-menu-item>` custom element.
+ *
+ * Properties: {@link MenuItemProps}
+ *
+ * Events: {@link MenuItemEvents}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-highlighted` | Present when the item is the currently highlighted option |
+ */
+export class MenuItemElement extends Base.MenuItemElement {}
+
+/**
+ * `<prosekit-menu-popup>` custom element.
+ *
+ * Properties: {@link MenuPopupProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the menu is visible, `"closed"` otherwise |
+ */
+export class MenuPopupElement extends Base.MenuPopupElement {}
+
+/**
+ * `<prosekit-menu-positioner>` custom element.
+ *
+ * Properties: {@link MenuPositionerProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-state` | `"open"` when the menu is visible, `"closed"` otherwise |
+ *
+ * CSS variables:
+ *
+ * | Variable | Description |
+ * | --- | --- |
+ * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |
+ */
+export class MenuPositionerElement extends Base.MenuPositionerElement {}
+
+/**
+ * `<prosekit-menu-root>` custom element.
+ *
+ * Properties: {@link MenuRootProps}
+ *
+ * Events: {@link MenuRootEvents}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-menu-root` | Always present on the element |
+ */
+export class MenuRootElement extends Base.MenuRootElement {}
+
+/**
+ * `<prosekit-menu-submenu-root>` custom element.
+ *
+ * Properties: {@link MenuSubmenuRootProps}
+ *
+ * Events: {@link MenuSubmenuRootEvents}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-menu-submenu-root` | Always present on the element |
+ */
+export class MenuSubmenuRootElement extends Base.MenuSubmenuRootElement {}
+
+/**
+ * `<prosekit-menu-submenu-trigger>` custom element.
+ *
+ * Properties: {@link MenuSubmenuTriggerProps}
+ *
+ * Data attributes:
+ *
+ * | Attribute | Description |
+ * | --- | --- |
+ * | `data-highlighted` | Present when the item is the currently highlighted option |
+ */
+export class MenuSubmenuTriggerElement extends Base.MenuSubmenuTriggerElement {}
+
+/**
+ * `<prosekit-menu-trigger>` custom element.
+ *
+ * Properties: {@link MenuTriggerProps}
+ *
+ * Events: {@link MenuTriggerEvents}
+ */
+export class MenuTriggerElement extends Base.MenuTriggerElement {}
+
+export interface MenuItemProps extends Base.MenuItemProps {}
+export interface MenuPopupProps extends Base.MenuPopupProps {}
+export interface MenuPositionerProps extends Base.MenuPositionerProps {}
+export interface MenuRootProps extends Base.MenuRootProps {}
+export interface MenuSubmenuRootProps extends Base.MenuSubmenuRootProps {}
+export interface MenuSubmenuTriggerProps extends Base.MenuSubmenuTriggerProps {}
+export interface MenuTriggerProps extends Base.MenuTriggerProps {}
+
+export interface MenuItemEvents extends Base.MenuItemEvents {}
+export interface MenuRootEvents extends Base.MenuRootEvents {}
+export interface MenuSubmenuRootEvents extends Base.MenuSubmenuRootEvents {}
+export interface MenuTriggerEvents extends Base.MenuTriggerEvents {}
+
+/** @internal */
+export const MenuItemPropsDeclaration: PropsDeclaration<MenuItemProps> = Base.MenuItemPropsDeclaration
+/** @internal */
+export const MenuPopupPropsDeclaration: PropsDeclaration<MenuPopupProps> = Base.MenuPopupPropsDeclaration
+/** @internal */
+export const MenuPositionerPropsDeclaration: PropsDeclaration<MenuPositionerProps> = Base.MenuPositionerPropsDeclaration
+/** @internal */
+export const MenuRootPropsDeclaration: PropsDeclaration<MenuRootProps> = Base.MenuRootPropsDeclaration
+/** @internal */
+export const MenuSubmenuRootPropsDeclaration: PropsDeclaration<MenuSubmenuRootProps> = Base.MenuSubmenuRootPropsDeclaration
+/** @internal */
+export const MenuSubmenuTriggerPropsDeclaration: PropsDeclaration<MenuSubmenuTriggerProps> = Base.MenuSubmenuTriggerPropsDeclaration
+/** @internal */
+export const MenuTriggerPropsDeclaration: PropsDeclaration<MenuTriggerProps> = Base.MenuTriggerPropsDeclaration
 
 export function registerMenuRootElement(): void {
   registerCustomElement('prosekit-menu-root', MenuRootElement)
@@ -90,3 +175,15 @@ export function registerMenuSubmenuRootElement(): void {
 export function registerMenuSubmenuTriggerElement(): void {
   registerCustomElement('prosekit-menu-submenu-trigger', MenuSubmenuTriggerElement)
 }
+
+export {
+  OpenChangeEvent,
+  SelectEvent,
+  setupMenuItem,
+  setupMenuPopup,
+  setupMenuPositioner,
+  setupMenuRoot,
+  setupMenuSubmenuRoot,
+  setupMenuSubmenuTrigger,
+  setupMenuTrigger,
+} from '@aria-ui/elements/menu'