@prosekit/lit 0.1.3 → 0.1.5

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

@@ -10,11 +10,10 @@ import { PropertyValues } from 'lit';
 import { ReactiveController } from 'lit';
 import { ReactiveControllerHost } from 'lit';
 import { TemplateResult } from 'lit';
-import { UserProjectConfigExport } from 'vitest/dist/config.js';
 import { VirtualElement } from '@floating-ui/dom';
 
 export declare class AutocompleteEmpty extends LightElement implements AutocompleteEmptyProps {
-    listContext?: AutocompleteListContext;
+    private listContext;
     connectedCallback(): void;
     protected willUpdate(_changedProperties: PropertyValues<this>): void;
 }
@@ -28,11 +27,28 @@ export declare interface AutocompleteEmptyProps {
  * from the rendered item's `textContent`.
  */
 declare class AutocompleteItem extends LightElement implements Partial<AutocompleteItemProps> {
+    private listContext;
+    /**
+     * @hidden
+     */
+    static properties: {
+        value: {
+            type: StringConstructor;
+            reflect: true;
+            attribute: string;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: true;
+            attribute: string;
+        };
+        onSelect: {
+            attribute: false;
+        };
+    };
     value: string;
     selected: boolean;
-    /** @hidden */
     onSelect?: VoidFunction;
-    listContext?: AutocompleteListContext;
     get content(): string;
     connectedCallback(): void;
     protected willUpdate(): void;
@@ -49,19 +65,33 @@ export { AutocompleteItemProps }
 export { AutocompleteItemProps as AutocompleteItemProps_alias_1 }
 
 declare class AutocompleteList extends LightElement implements Partial<AutocompleteListProps> {
-    /** @hidden */
+    /**
+     * @hidden
+     */
     private listManager;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     private controller;
+    private popoverContext;
     private get active();
+    /**
+     * @hidden
+     */
+    static properties: {
+        editor: {
+            attribute: false;
+        };
+    };
     editor?: Editor;
-    popoverContext: AutocompletePopoverContext | null;
-    context: AutocompleteListContext;
+    private context;
     connectedCallback(): void;
     private get items();
     selectFirstItem(): void;
     private updateValue;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     willUpdate(changedProperties: PropertyValues<this>): void;
 }
 export { AutocompleteList }
@@ -73,6 +103,10 @@ export declare interface AutocompleteListContext {
     selectedReason: 'mouse' | 'keyboard';
 }
 
+export declare const autocompleteListContext: {
+    __context__: AutocompleteListContext;
+};
+
 export declare class AutocompleteListController implements ReactiveController {
     private host;
     private keymap;
@@ -91,19 +125,62 @@ export { AutocompleteListProps }
 export { AutocompleteListProps as AutocompleteListProps_alias_1 }
 
 export declare class AutocompletePopover extends Popover implements Partial<AutocompletePopoverProps> {
-    /** @hidden */
+    /**
+     * @hidden
+     */
     private controller;
+    /**
+     * @hidden
+     */
+    static properties: {
+        editor: {
+            attribute: false;
+        };
+        regex: {
+            attribute: false;
+        };
+        popoverOptions: {
+            attribute: false;
+        };
+        onSelect: {
+            attribute: false;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        reference: {
+            attribute: false;
+        };
+        options: {
+            attribute: false;
+        };
+        autoUpdate: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        autoUpdateOptions: {
+            type: ObjectConstructor;
+        };
+        dismiss: {
+            type: StringConstructor;
+            reflect: true;
+        };
+    };
     editor?: Editor;
     regex?: RegExp;
     popoverOptions: PopoverOptions;
-    context: AutocompletePopoverContext;
-    /** @hidden */
     onSelect?: VoidFunction;
+    private context;
     private get list();
     private updateContext;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     willUpdate(changedProperties: PropertyValues<this>): void;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     hide(): void;
 }
 
@@ -114,6 +191,10 @@ export declare interface AutocompletePopoverContext {
     handleSubmit: VoidFunction;
 }
 
+export declare const autocompletePopoverContext: {
+    __context__: AutocompletePopoverContext;
+};
+
 export declare class AutocompletePopoverController implements ReactiveController {
     private host;
     private onChange;
@@ -140,10 +221,53 @@ export { AutoUpdateOptions }
 
 export declare const blockComponentStyles: CSSResult;
 
+/**
+ * If the browser supports the Popover API, we use the body as the boundary
+ * since we don't need to worry about the popover overflowing the parent
+ * element.
+ */
+export declare const boundary: HTMLElement | undefined;
+
 export declare class ComboBox extends Popover {
+    /**
+     * @hidden
+     */
+    static properties: {
+        onDismiss: {
+            attribute: false;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        reference: {
+            attribute: false;
+        };
+        options: {
+            attribute: false;
+        };
+        autoUpdate: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        autoUpdateOptions: {
+            type: ObjectConstructor;
+        };
+        dismiss: {
+            type: StringConstructor;
+            reflect: true;
+        };
+    };
     onDismiss?: VoidFunction;
     private listManager;
-    context: ComboBoxContext;
+    /**
+     * @hidden
+     */
+    hide(): void;
+    private context;
+    private getContext;
+    private setInputValue;
+    private setSelectedValue;
     get items(): ComboBoxItem[];
 }
 
@@ -151,7 +275,7 @@ export declare interface ComboBoxContext {
     inputValue: string;
     setInputValue: (val: string) => void;
     selectedValue: string;
-    setSelectedValue: (val: string) => void;
+    selectedReason: 'mouse' | 'keyboard';
     listManager: ListManager<ComboBoxItem>;
 }
 
@@ -160,13 +284,26 @@ export declare const comboBoxContext: {
 };
 
 export declare class ComboBoxInput extends LightElement {
+    /**
+     * @hidden
+     */
+    static properties: {
+        placeholder: {
+            attribute: true;
+        };
+    };
     placeholder: string;
-    comboBoxContext: ComboBoxContext | null;
+    private comboBoxContext;
     private visible;
     private handleKeydown;
     private handleInput;
+    /**
+     * @hidden
+     */
     protected firstUpdated(): void;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     render(): TemplateResult<1>;
 }
 
@@ -175,12 +312,30 @@ export declare interface ComboBoxInputProps {
 }
 
 declare class ComboBoxItem extends LightElement {
+    /**
+     * @hidden
+     */
+    static properties: {
+        editor: {
+            attribute: false;
+        };
+        selected: {
+            type: BooleanConstructor;
+            reflect: true;
+            attribute: string;
+        };
+        onSelect: {
+            attribute: false;
+        };
+    };
     editor?: Editor;
     selected: boolean;
-    comboBoxContext?: ComboBoxContext;
-    /** @hidden */
     onSelect?: VoidFunction;
-    protected updated(): void;
+    private comboBoxContext;
+    /**
+     * @hidden
+     */
+    protected updated(changedProperties: PropertyValues<this>): void;
 }
 export { ComboBoxItem }
 export { ComboBoxItem as ComboBoxItem_alias_1 }
@@ -192,7 +347,7 @@ export { ComboBoxItemProps }
 export { ComboBoxItemProps as ComboBoxItemProps_alias_1 }
 
 declare class ComboBoxList extends LightElement {
-    comboBoxContext: ComboBoxContext | null;
+    private comboBoxContext;
     connectedCallback(): void;
 }
 export { ComboBoxList }
@@ -208,14 +363,6 @@ export declare interface ComboBoxProps extends PopoverProps {
     onDismiss?: VoidFunction;
 }
 
-export declare const commandListContext: {
-    __context__: AutocompleteListContext;
-};
-
-export declare const commandPopoverContext: {
-    __context__: AutocompletePopoverContext;
-};
-
 declare type CommandScore = (item: string, query: string) => number;
 
 export declare const commandScore: CommandScore;
@@ -224,7 +371,11 @@ export declare const componentStyles: CSSResult;
 
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
-export declare const default_alias_1: UserProjectConfigExport;
+export declare const default_alias_1: {
+    test: {
+        environment: "jsdom";
+    };
+};
 
 /**
  * Default popover options.
@@ -240,17 +391,57 @@ export declare const defaultPopoverOptions_alias_2: PopoverOptions;
 
 export declare function defaultQueryBuilder(match: RegExpExecArray): string;
 
+export declare function defineCustomElement(name: string, constructor: CustomElementConstructor, options?: ElementDefinitionOptions): void;
+
 export declare function getVirtualSelectionElement(view: EditorView): Range | undefined;
 
 export declare class InlinePopover extends Popover implements Partial<InlinePopoverProps> {
-    /** @hidden */
-    private controller;
+    /**
+     * @hidden
+     */
+    static properties: {
+        editor: {
+            attribute: false;
+        };
+        popoverOptions: {
+            attribute: false;
+        };
+        active: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        reference: {
+            attribute: false;
+        };
+        options: {
+            attribute: false;
+        };
+        autoUpdate: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        autoUpdateOptions: {
+            type: ObjectConstructor;
+        };
+        dismiss: {
+            type: StringConstructor;
+            reflect: true;
+        };
+    };
     editor?: Editor;
     popoverOptions: PopoverOptions;
-    constructor();
-    /** @hidden */
+    dismiss: "escape";
+    /**
+     * @hidden
+     */
+    private controller;
+    /**
+     * @hidden
+     */
     willUpdate(): void;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     hide(): void;
 }
 
@@ -283,6 +474,10 @@ export declare function isComboBoxItem(element?: Element | null): element is Com
 export declare function isComboBoxList(element?: Element | null): element is ComboBoxList;
 
 export declare class LightElement extends LitElement {
+    /**
+     * @hidden
+     */
+    constructor();
     createRenderRoot(): this;
     setHidden(hidden: boolean): void;
 }
@@ -310,6 +505,7 @@ export declare class ListManager<Item extends {
         onSelect: (item?: Item | null) => void;
     });
     get items(): Item[];
+    get active(): boolean;
     get availableItems(): Item[];
     get firstItem(): Item | null;
     get selectedItem(): Item | null;
@@ -330,37 +526,67 @@ export declare class ListManager<Item extends {
  * A custom element that displays a popover anchored to a reference element.
  */
 export declare class Popover extends LightElement implements Partial<PopoverProps> {
-    /** @hidden */
-    constructor();
     /**
-     * Controls the visibility of the popover element. When set to `true`, the popover is displayed and positioned
-     * relative to its reference element. When set to `false`, the popover is hidden and its positioning logic is
+     * @hidden
+     */
+    static properties: {
+        active: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        reference: {
+            attribute: false;
+        };
+        options: {
+            attribute: false;
+        };
+        autoUpdate: {
+            type: BooleanConstructor;
+            reflect: true;
+        };
+        autoUpdateOptions: {
+            type: ObjectConstructor;
+        };
+        dismiss: {
+            type: StringConstructor;
+            reflect: true;
+        };
+    };
+    /**
+     * Controls the visibility of the popover element. When set to `true`, the
+     * popover is displayed and positioned relative to its reference element. When
+     * set to `false`, the popover is hidden and its positioning logic is
      * deactivated.
      */
     active: boolean;
     /**
-     * The element that the popover is anchored to. This can be either a DOM element or an object that implements the
-     * virtual element interface from Floating UI.
+     * The element that the popover is anchored to. This can be either a DOM
+     * element or an object that implements the virtual element interface from
+     * Floating UI.
      */
     reference?: Element | VirtualElement;
     /**
-     * The options that are passed to the `computePosition` function from Floating UI. These options are used to
-     * configure the positioning of the popover element relative to its reference element. For more information on the
+     * The options that are passed to the `computePosition` function from Floating
+     * UI. These options are used to configure the positioning of the popover
+     * element relative to its reference element. For more information on the
      * available options, please refer to the Floating UI documentation.
      */
     options?: PopoverOptions;
     /**
-     * Controls whether the popover position is automatically updated when the reference element changes position. When
-     * set to `true`, the popover position is updated automatically. When set to `false`, the popover position is only
-     * updated when the given properties are changed.
+     * Controls whether the popover position is automatically updated when the
+     * reference element changes position. When set to `true`, the popover
+     * position is updated automatically. When set to `false`, the popover
+     * position is only updated when the given properties are changed.
      *
      * @default false
      */
     autoUpdate: boolean;
     /**
-     * The options that are passed to the `autoUpdate` function from Floating UI. These options are used to configure the
-     * automatic update behavior of the popover position. For more information on the available options, please refer to
-     * the Floating UI documentation. This property is only used when the `autoUpdate` property is set to `true`.
+     * The options that are passed to the `autoUpdate` function from Floating UI.
+     * These options are used to configure the automatic update behavior of the
+     * popover position. For more information on the available options, please
+     * refer to the Floating UI documentation. This property is only used when the
+     * `autoUpdate` property is set to `true`.
      */
     autoUpdateOptions?: AutoUpdateOptions;
     /**
@@ -375,27 +601,48 @@ export declare class Popover extends LightElement implements Partial<PopoverProp
      *
      * @default "on"
      */
-    dismiss: string;
-    /** @hidden */
+    dismiss: 'off' | 'on' | 'click' | 'escape';
+    /**
+     * @hidden
+     */
     private disposeAutoUpdate?;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     private disposeEventListeners?;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     connectedCallback(): void;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     disconnectedCallback(): void;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     protected updated(changedProperties: PropertyValues<this>): void;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     private start;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     private compute;
-    /** @hidden */
+    /**
+     * @hidden
+     */
     hide(): void;
     private handleDocumentMouseDown;
     private handleDocumentKeyDown;
 }
 
+/**
+ * Whether the browser supports the [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).
+ */
+export declare const popoverAvailable: boolean;
+
 /**
  * The `PopoverOptions` interface defines the options that can be passed to the
  * `computePosition` function from Floating UI. These options are used to
@@ -429,7 +676,7 @@ declare const propNames_3: readonly ["editor"];
 export { propNames_3 as propNames_alias_3 }
 export { propNames_3 as propNames_alias_4 }
 
-declare const propNames_4: never[];
+declare const propNames_4: readonly ["onSelect"];
 export { propNames_4 as propNames_alias_8 }
 export { propNames_4 as propNames_alias_9 }
 

package/dist/{chunk-6P3YKUWI.js → chunk-5CI65R73.js}

@@ -1,9 +1,9 @@
 // src/components/autocomplete-list/context.ts
 import { createContext } from "@lit/context";
-var commandListContext = createContext(
+var autocompleteListContext = createContext(
   "prosekit-autocomplete-list-context"
 );
 
 export {
-  commandListContext
+  autocompleteListContext
 };

package/dist/chunk-7RGGPFFK.js

@@ -0,0 +1,51 @@
+import {
+  comboBoxContext
+} from "./chunk-C4MW43I4.js";
+import {
+  LightElement,
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
+
+// src/components/combo-box-item/component.ts
+import { ContextConsumer } from "@lit/context";
+var propNames = ["onSelect"];
+var ComboBoxItem = class extends LightElement {
+  constructor() {
+    super(...arguments);
+    this.selected = false;
+    this.comboBoxContext = new ContextConsumer(this, {
+      context: comboBoxContext,
+      subscribe: true
+    });
+  }
+  /**
+   * @hidden
+   */
+  updated(changedProperties) {
+    var _a, _b, _c, _d, _e;
+    super.updated(changedProperties);
+    const content = ((_a = this.textContent) != null ? _a : "").trim();
+    const query = ((_c = (_b = this.comboBoxContext.value) == null ? void 0 : _b.inputValue) != null ? _c : "").trim();
+    const match = content.toLowerCase().includes(query.toLowerCase());
+    this.selected = match && content === ((_d = this.comboBoxContext.value) == null ? void 0 : _d.selectedValue);
+    this.ariaSelected = String(this.selected);
+    this.setHidden(!match);
+    if (this.selected && changedProperties.has("selected") && !changedProperties.get("selected") && ((_e = this.comboBoxContext.value) == null ? void 0 : _e.selectedReason) === "keyboard") {
+      this.scrollIntoView({ block: "nearest" });
+    }
+  }
+};
+/**
+ * @hidden
+ */
+ComboBoxItem.properties = {
+  editor: { attribute: false },
+  selected: { type: Boolean, reflect: true, attribute: "data-selected" },
+  onSelect: { attribute: false }
+};
+defineCustomElement("prosekit-combo-box-item", ComboBoxItem);
+
+export {
+  propNames,
+  ComboBoxItem
+};

package/dist/{chunk-IDDQA3VV.js → chunk-GZRUCYLP.js}

@@ -14,6 +14,9 @@ var ListManager = class {
   get items() {
     return this.getItems();
   }
+  get active() {
+    return this.getActive();
+  }
   get availableItems() {
     var _a, _b;
     return (_b = (_a = this.items) == null ? void 0 : _a.filter((item) => !item.hidden)) != null ? _b : [];
@@ -49,9 +52,12 @@ var ListManager = class {
     this.setSelectedValue(this.getItemValue(item), reason);
   }
   selectFirstItem() {
+    if (!this.active)
+      return;
     const item = this.firstItem;
     const value = item ? this.getItemValue(item) : "";
     this.setSelectedValue(value, "keyboard");
+    item == null ? void 0 : item.scrollIntoView({ block: "nearest" });
   }
   handleMouseMove(_event) {
     this.lastMouseMoveTime = Date.now();
@@ -79,25 +85,25 @@ var ListManager = class {
     }
   }
   handleArrowUp() {
-    if (!this.getActive())
+    if (!this.active)
       return false;
     this.updateSelectedByChange(-1);
     return true;
   }
   handleArrowDown() {
-    if (!this.getActive())
+    if (!this.active)
       return false;
     this.updateSelectedByChange(1);
     return true;
   }
   handleEscape() {
-    if (!this.getActive())
+    if (!this.active)
       return false;
     this.onDismiss();
     return true;
   }
   handleEnter() {
-    if (!this.getActive())
+    if (!this.active)
       return false;
     this.onSelect(this.selectedItem);
     return true;