@prosekit/web 0.1.0 → 0.1.2

package/dist/_tsup-dts-rollup.d.ts

@@ -10,6 +10,7 @@ import { Editor } from '@prosekit/core';
 import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { FocusChangeHandler } from '@prosekit/core';
+import { ListboxProps } from '@aria-ui/listbox';
 import { Options } from 'tsup';
 import type { OverlayPositionerProps } from '@aria-ui/overlay';
 import type { Placement } from '@floating-ui/dom';
@@ -84,7 +85,7 @@ declare interface AutocompleteListElement extends AutocompleteListProps {
 export { AutocompleteListElement }
 export { AutocompleteListElement as AutocompleteListElement_alias_1 }
 
-declare interface AutocompleteListProps {
+declare interface AutocompleteListProps extends Pick<ListboxProps, 'filter'> {
     editor: Editor | null;
 }
 export { AutocompleteListProps }
@@ -108,11 +109,19 @@ declare interface AutocompletePopoverProps extends OverlayPositionerProps {
      */
     editor: Editor | null;
     /**
-     * The regular expression to match the text to autocomplete.
+     * The regular expression to match the query text to autocomplete.
      *
      * @default null
      */
     regex: RegExp | null;
+    /**
+     * A callback that is called when the query changes.
+     */
+    onQueryChange: ((query: string) => void) | null;
+    /**
+     * A callback that is called when the open state changes.
+     */
+    onOpenChange: ((open: boolean) => void) | null;
     /**
      * The placement of the popover, relative to the text cursor.
      *
@@ -239,6 +248,10 @@ export { defaultAutocompleteItemProps }
 export { defaultAutocompleteItemProps as defaultAutocompleteItemProps_alias_1 }
 
 declare const defaultAutocompleteListProps: {
+    filter: (options: {
+        query: string;
+        value: string;
+    }) => boolean;
     editor: null;
 };
 export { defaultAutocompleteListProps }
@@ -247,6 +260,8 @@ export { defaultAutocompleteListProps as defaultAutocompleteListProps_alias_1 }
 declare const defaultAutocompletePopoverProps: Readonly<{
     editor: null;
     regex: null;
+    onQueryChange: null;
+    onOpenChange: null;
     placement: "bottom-start";
     offset: 4;
     inline: true;

package/dist/prosekit-web-autocomplete.js

@@ -83,7 +83,10 @@ defineCustomElement("prosekit-autocomplete-item", AutocompleteItemElement);
 import { BaseElement as BaseElement3 } from "@aria-ui/core";
 
 // src/components/autocomplete/autocomplete-list/props.ts
+import { defaultListboxProps } from "@aria-ui/listbox";
+var defaultFilter = defaultListboxProps.filter;
 var defaultAutocompleteListProps = {
+  filter: defaultFilter,
   editor: null
 };
 
@@ -91,7 +94,6 @@ var defaultAutocompleteListProps = {
 import {
   assignProps,
   createSignal,
-  mapSignals,
   useEffect as useEffect2
 } from "@aria-ui/core";
 import { useListbox } from "@aria-ui/listbox";
@@ -101,24 +103,27 @@ import {
   withPriority
 } from "@prosekit/core";
 function useAutocompleteList(element, props) {
-  const state = mapSignals(assignProps(defaultAutocompleteListProps, props));
+  const fullProps = assignProps(defaultAutocompleteListProps, props);
+  const editor = createSignal(fullProps.editor);
   const open = openContext.consume(element);
   const query = queryContext.consume(element);
   const onSubmit = onSubmitContext.consume(element);
-  const onKeydownHandlerAdd = useKeyboardHandler(element, open, state.editor);
+  const onKeydownHandlerAdd = useKeyboardHandler(element, open, editor);
+  const onValueChange = (value) => {
+    var _a;
+    if (value) {
+      (_a = onSubmit.peek()) == null ? void 0 : _a();
+    }
+  };
   const {
     query: listboxQuery,
     value: listboxValue,
+    filter,
     autoFocus
   } = useListbox(element, {
     onKeydownHandlerAdd,
-    // This function will be called before `onSubmit()`.
-    onValueChange: (value) => {
-      var _a;
-      if (value) {
-        (_a = onSubmit.value) == null ? void 0 : _a.call(onSubmit);
-      }
-    }
+    onValueChange,
+    filter: fullProps.filter
   });
   useEffect2(element, () => {
     listboxQuery.value = query.value;
@@ -149,7 +154,7 @@ function useAutocompleteList(element, props) {
       };
     }
   });
-  return state;
+  return { editor, filter };
 }
 function useKeyboardHandler(element, open, editor) {
   const keydownHandler = createSignal(
@@ -207,6 +212,8 @@ var defaultAutocompletePopoverProps = Object.freeze({
   ...defaultOverlayPositionerProps,
   editor: null,
   regex: null,
+  onQueryChange: null,
+  onOpenChange: null,
   placement: "bottom-start",
   offset: 4,
   inline: true,
@@ -221,7 +228,7 @@ import {
   assignProps as assignProps2,
   createComputed,
   createSignal as createSignal2,
-  mapSignals as mapSignals2,
+  mapSignals,
   useEffect as useEffect3
 } from "@aria-ui/core";
 import { useOverlayPositionerState } from "@aria-ui/overlay";
@@ -238,7 +245,7 @@ function defaultQueryBuilder(match) {
 
 // src/components/autocomplete/autocomplete-popover/state.ts
 function useAutocompletePopover(host, props) {
-  const state = mapSignals2(assignProps2(defaultAutocompletePopoverProps, props));
+  const state = mapSignals(assignProps2(defaultAutocompletePopoverProps, props));
   useAutocompletePopoverState(host, state);
   return state;
 }
@@ -264,6 +271,18 @@ function useAutocompletePopoverState(host, state) {
   );
   useOverlayPositionerState(host, overlayState, { reference });
   usePresence(host, presence);
+  useEffect3(host, () => {
+    var _a;
+    const queryValue = query.value;
+    if (presence.peek()) {
+      (_a = state.onQueryChange.peek()) == null ? void 0 : _a(queryValue);
+    }
+  });
+  useEffect3(host, () => {
+    var _a;
+    const presenceValue = presence.value;
+    (_a = state.onOpenChange.peek()) == null ? void 0 : _a(presenceValue);
+  });
 }
 function useAutocompleteExtension(host, editor, regex, reference, query, onDismiss, onSubmit) {
   useEffect3(host, () => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -65,8 +65,9 @@
     "dist"
   ],
   "dependencies": {
+    "@aria-ui/collection": "^0.0.3",
     "@aria-ui/core": "^0.0.12",
-    "@aria-ui/listbox": "^0.0.10",
+    "@aria-ui/listbox": "^0.0.11",
     "@aria-ui/overlay": "^0.0.12",
     "@aria-ui/popover": "^0.0.11",
     "@aria-ui/presence": "^0.0.7",