@prosekit/web 0.7.13 → 0.8.0-beta.1

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 ConnectableElement, type ReadonlySignal } from '@aria-ui/core'\nimport { getNearestOverflowAncestor } from '@zag-js/dom-query'\n\nexport function useScrolling(host: ConnectableElement): ReadonlySignal<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    scrollableParent.addEventListener('scroll', handleScroll, { passive: true })\n    window.addEventListener('mousemove', handleMouseMove, { passive: true })\n    window.addEventListener('pointermove', handleMouseMove, { passive: true })\n\n    return () => {\n      scrollableParent.removeEventListener('scroll', handleScroll)\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('pointermove', handleMouseMove)\n    }\n  })\n\n  return scrolling\n}\n"],"mappings":";;;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;;;ACTtC,SAAgB,aAAa,MAAmD;CAC9E,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;;AAGtB,mBAAiB,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;AAC5E,SAAO,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC;AACxE,SAAO,iBAAiB,eAAe,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAE1E,eAAa;AACX,oBAAiB,oBAAoB,UAAU,aAAa;AAC5D,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,eAAe,gBAAgB;;GAE5D;AAEF,QAAO"}
+{"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.7.13",
+  "version": "0.8.0-beta.1",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -46,6 +46,10 @@
       "types": "./dist/prosekit-web-inline-popover.d.ts",
       "default": "./dist/prosekit-web-inline-popover.js"
     },
+    "./menu": {
+      "types": "./dist/prosekit-web-menu.d.ts",
+      "default": "./dist/prosekit-web-menu.js"
+    },
     "./popover": {
       "types": "./dist/prosekit-web-popover.d.ts",
       "default": "./dist/prosekit-web-popover.js"
@@ -68,29 +72,25 @@
     "src"
   ],
   "dependencies": {
-    "@aria-ui/core": "^0.0.22",
-    "@aria-ui/listbox": "^0.0.25",
-    "@aria-ui/menu": "^0.0.21",
-    "@aria-ui/overlay": "^0.0.25",
-    "@aria-ui/popover": "^0.0.28",
-    "@aria-ui/presence": "^0.0.20",
-    "@aria-ui/tooltip": "^0.0.30",
+    "@aria-ui/core": "^0.1.0",
+    "@aria-ui/elements": "^0.1.1",
+    "@aria-ui/utils": "^0.1.0",
     "@floating-ui/dom": "^1.7.6",
     "@ocavue/utils": "^1.6.0",
-    "@zag-js/dom-query": "^1.37.0",
     "prosemirror-tables": "^1.8.5",
-    "@prosekit/core": "^0.11.0",
-    "@prosekit/extensions": "^0.15.0",
-    "@prosekit/pm": "^0.1.15"
+    "@prosekit/core": "^0.12.0-beta.0",
+    "@prosekit/pm": "^0.1.15",
+    "@prosekit/extensions": "^0.16.0-beta.0"
   },
   "devDependencies": {
-    "tsdown": "^0.21.4",
+    "@aria-ui/cli": "^0.1.0",
+    "tsdown": "^0.21.7",
     "type-fest": "^5.5.0",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.1",
+    "vitest": "^4.1.4",
+    "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-ts": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
     "dev": {}
@@ -98,19 +98,21 @@
   "dev": {
     "entry": {
       "prosekit-web": "./src/index.ts",
-      "prosekit-web-autocomplete": "./src/components/autocomplete/index.gen.ts",
-      "prosekit-web-block-handle": "./src/components/block-handle/index.gen.ts",
-      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.gen.ts",
-      "prosekit-web-inline-popover": "./src/components/inline-popover/index.gen.ts",
-      "prosekit-web-popover": "./src/components/popover/index.gen.ts",
-      "prosekit-web-resizable": "./src/components/resizable/index.gen.ts",
-      "prosekit-web-table-handle": "./src/components/table-handle/index.gen.ts",
-      "prosekit-web-tooltip": "./src/components/tooltip/index.gen.ts"
+      "prosekit-web-autocomplete": "./src/components/autocomplete/index.ts",
+      "prosekit-web-block-handle": "./src/components/block-handle/index.ts",
+      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.ts",
+      "prosekit-web-inline-popover": "./src/components/inline-popover/index.ts",
+      "prosekit-web-menu": "./src/components/menu/index.ts",
+      "prosekit-web-popover": "./src/components/popover/index.ts",
+      "prosekit-web-resizable": "./src/components/resizable/index.ts",
+      "prosekit-web-table-handle": "./src/components/table-handle/index.ts",
+      "prosekit-web-tooltip": "./src/components/tooltip/index.ts"
     }
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",
-    "build:tsdown": "tsdown"
+    "build:tsdown": "tsdown",
+    "build:aria-ui": "node build.mjs"
   },
   "types": "./dist/prosekit-web.d.ts",
   "typesVersions": {
@@ -130,6 +132,9 @@
       "inline-popover": [
         "./dist/prosekit-web-inline-popover.d.ts"
       ],
+      "menu": [
+        "./dist/prosekit-web-menu.d.ts"
+      ],
       "popover": [
         "./dist/prosekit-web-popover.d.ts"
       ],

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

@@ -0,0 +1,45 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupListboxEmpty, type ListboxEmptyProps } from '@aria-ui/elements/listbox'
+
+/**
+ * @internal
+ */
+export interface AutocompleteEmptyProps extends ListboxEmptyProps {}
+
+/** @internal */
+export const AutocompleteEmptyPropsDeclaration: PropsDeclaration<AutocompleteEmptyProps> = /* @__PURE__ */ defineProps<
+  AutocompleteEmptyProps
+>({})
+
+/**
+ * @internal
+ */
+export function setupAutocompleteEmpty(
+  host: HostElement,
+  props: State<AutocompleteEmptyProps>,
+): void {
+  setupListboxEmpty(host, props)
+}
+
+const AutocompleteEmptyElementBase: HostElementConstructor<AutocompleteEmptyProps> = defineCustomElement(
+  setupAutocompleteEmpty,
+  AutocompleteEmptyPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompleteEmptyElement extends AutocompleteEmptyElementBase {}
+
+/** @internal */
+export function registerAutocompleteEmptyElement(): void {
+  registerCustomElement('prosekit-autocomplete-empty', AutocompleteEmptyElement)
+}

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

@@ -0,0 +1,65 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { SelectEvent, setupListboxItem, type ListboxItemEvents, type ListboxItemProps } from '@aria-ui/elements/listbox'
+
+import { preventDefault } from '../../utils/prevent-default.ts'
+
+export { SelectEvent }
+
+export interface AutocompleteItemProps extends ListboxItemProps {
+  /**
+   * The value of the item, which will be matched against the query.
+   *
+   * If not provided, the value is the item's text content.
+   *
+   * @default ""
+   */
+  value: string
+}
+
+/** @internal */
+export const AutocompleteItemPropsDeclaration: PropsDeclaration<AutocompleteItemProps> = /* @__PURE__ */ defineProps<AutocompleteItemProps>(
+  {
+    value: { default: '', attribute: 'value', type: 'string' },
+    disabled: { default: false, attribute: 'disabled', type: 'boolean' },
+  },
+)
+
+export interface AutocompleteItemEvents extends ListboxItemEvents {}
+
+/**
+ * @internal
+ */
+export function setupAutocompleteItem(
+  host: HostElement,
+  props: State<AutocompleteItemProps>,
+): void {
+  setupListboxItem(host, props)
+
+  // Prevent the editor from losing focus
+  useEventListener(host, 'pointerdown', preventDefault)
+  useEventListener(host, 'mousedown', preventDefault)
+}
+
+const AutocompleteItemElementBase: HostElementConstructor<AutocompleteItemProps> = defineCustomElement(
+  setupAutocompleteItem,
+  AutocompleteItemPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompleteItemElement extends AutocompleteItemElementBase {}
+
+/** @internal */
+export function registerAutocompleteItemElement(): void {
+  registerCustomElement('prosekit-autocomplete-item', AutocompleteItemElement)
+}

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

@@ -0,0 +1,95 @@
+import {
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type Signal,
+  type State,
+} from '@aria-ui/core'
+import {
+  defaultItemFilter,
+  setupListboxRoot,
+  type ItemFilter,
+  type ListboxRootEvents,
+  type ListboxRootProps,
+} from '@aria-ui/elements/listbox'
+import { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps } from '@aria-ui/elements/overlay'
+
+import { createLazySignal } from '../../utils/lazy-signal.ts'
+import { useNoFocus } from '../../utils/use-no-focus.ts'
+
+import { autocompleteStoreContext } from './context.ts'
+
+/**
+ * @public
+ */
+export interface AutocompletePopupProps extends OverlayPopupProps {}
+
+/**
+ * @public
+ */
+export interface AutocompletePopupEvents extends ListboxRootEvents {}
+
+/** @internal */
+export const AutocompletePopupPropsDeclaration: PropsDeclaration<AutocompletePopupProps> = /* @__PURE__ */ defineProps<
+  AutocompletePopupProps
+>(OverlayPopupPropsDeclaration)
+
+/** @internal */
+export function setupAutocompletePopup(
+  host: HostElement,
+  _props: State<AutocompletePopupProps>,
+): void {
+  const getStore = autocompleteStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.overlayStore
+
+  setupOverlayPopup(host, getOverlayStore)
+
+  const query = createLazySignal<string>(() => getStore()?.query, ' ')
+  const eventTarget = createLazySignal<EventTarget | null>(() => getStore()?.eventTarget, null)
+  const filter = createLazySignal<ItemFilter | null>(() => getStore()?.filter, defaultItemFilter)
+  const getDisabled = () => (!(getOverlayStore()?.getIsOpen?.()))
+  const disabled: Signal<boolean> = { get: getDisabled, set: () => {} }
+  const listboxProps = createPopupListboxProps(filter, query, eventTarget, disabled)
+
+  setupListboxRoot(host, listboxProps)
+  useNoFocus(host)
+}
+
+function createPopupListboxProps(
+  filter: Signal<ItemFilter | null>,
+  query: Signal<string>,
+  eventTarget: Signal<EventTarget | null>,
+  disabled: Signal<boolean>,
+): State<ListboxRootProps> {
+  return {
+    value: createSignal(''),
+    values: createSignal<string[]>([]),
+    multiple: createSignal(false),
+    disabled,
+    orientation: createSignal<'vertical' | 'horizontal'>('vertical'),
+    loop: createSignal(false),
+    autoHighlight: createSignal(true),
+    query,
+    eventTarget,
+    filter,
+  }
+}
+
+const AutocompletePopupElementBase: HostElementConstructor<AutocompletePopupProps> = defineCustomElement(
+  setupAutocompletePopup,
+  AutocompletePopupPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompletePopupElement extends AutocompletePopupElementBase {}
+
+/** @internal */
+export function registerAutocompletePopupElement(): void {
+  registerCustomElement('prosekit-autocomplete-popup', AutocompletePopupElement)
+}

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

@@ -0,0 +1,98 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { OverlayPositionerPropsDeclaration, setupOverlayPositioner, type OverlayPositionerProps } from '@aria-ui/elements/overlay'
+
+import { autocompleteStoreContext } from './context.ts'
+
+const body = typeof document !== 'undefined' && document.querySelector('body')
+const defaultBoundary = body || 'clippingAncestors'
+
+/**
+ * @public
+ */
+export interface AutocompletePositionerProps extends OverlayPositionerProps {
+  /**
+   * The placement of the popover, relative to the text cursor.
+   *
+   * @default "bottom-start"
+   */
+  placement: OverlayPositionerProps['placement']
+
+  /**
+   * The distance between the popover and the hovered block.
+   *
+   * @default 4
+   */
+  offset: OverlayPositionerProps['offset']
+
+  /**
+   * @default true
+   */
+  inline: OverlayPositionerProps['inline']
+
+  /**
+   * @default true
+   */
+  hoist: OverlayPositionerProps['hoist']
+
+  /**
+   * @default true
+   */
+  fitViewport: OverlayPositionerProps['fitViewport']
+
+  /**
+   * @default "The body element"
+   */
+  boundary: OverlayPositionerProps['boundary']
+
+  /**
+   * @default 8
+   */
+  overflowPadding: OverlayPositionerProps['overflowPadding']
+}
+
+/** @internal */
+export const AutocompletePositionerPropsDeclaration: PropsDeclaration<AutocompletePositionerProps> = /* @__PURE__ */ defineProps<
+  AutocompletePositionerProps
+>({
+  ...OverlayPositionerPropsDeclaration,
+  placement: { default: 'bottom-start', attribute: 'placement', type: 'string' },
+  offset: { default: 4, attribute: false, type: 'json' },
+  inline: { default: true, attribute: 'inline', type: 'boolean' },
+  hoist: { default: true, attribute: 'hoist', type: 'boolean' },
+  fitViewport: { default: true, attribute: 'fit-viewport', type: 'boolean' },
+  boundary: { default: defaultBoundary, attribute: false, type: 'json' },
+  overflowPadding: { default: 8, attribute: 'overflow-padding', type: 'number' },
+})
+
+/** @internal */
+export function setupAutocompletePositioner(
+  host: HostElement,
+  props: State<AutocompletePositionerProps>,
+): void {
+  const getStore = autocompleteStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.overlayStore
+  setupOverlayPositioner(host, props as unknown as State<OverlayPositionerProps>, getOverlayStore)
+}
+
+const AutocompletePositionerElementBase: HostElementConstructor<AutocompletePositionerProps> = defineCustomElement(
+  setupAutocompletePositioner,
+  AutocompletePositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompletePositionerElement extends AutocompletePositionerElementBase {}
+
+/** @internal */
+export function registerAutocompletePositionerElement(): void {
+  registerCustomElement('prosekit-autocomplete-positioner', AutocompletePositionerElement)
+}