@prosekit/lit 0.1.9 → 0.2.0

package/dist/chunk-OZUEYWYU.js

@@ -0,0 +1,365 @@
+import {
+  LightElement,
+  defineCustomElement
+} from "./chunk-S32IZIQF.js";
+
+// src/components/popover/index.ts
+import "@floating-ui/dom";
+
+// src/controllers/use-dismissable.ts
+import { trackDismissableElement } from "@zag-js/dismissable";
+
+// src/utils/get-reference-context-element.ts
+import { isHTMLElement } from "@zag-js/dom-query";
+function getReferenceContextElement(reference) {
+  if (!reference) {
+    return null;
+  }
+  if (isHTMLElement(reference)) {
+    return reference;
+  }
+  const contextElement = reference.contextElement;
+  if (isHTMLElement(contextElement)) {
+    return contextElement;
+  }
+  return null;
+}
+
+// src/controllers/use-dismissable.ts
+function useDismissable(host, {
+  onEscapeKeyDown,
+  onPointerDownOutside,
+  onDismiss,
+  getReference
+}) {
+  let cleanup;
+  const hostConnected = () => {
+    cleanup == null ? void 0 : cleanup();
+    cleanup = trackDismissableElement(host, {
+      defer: false,
+      pointerBlocking: false,
+      exclude: () => {
+        return getReferenceContextElement(getReference == null ? void 0 : getReference());
+      },
+      onDismiss: () => {
+        onDismiss == null ? void 0 : onDismiss();
+      },
+      onEscapeKeyDown: (event) => {
+        onEscapeKeyDown(event);
+      },
+      onPointerDownOutside: (event) => {
+        onPointerDownOutside(event);
+      }
+    });
+  };
+  const hostDisconnected = () => {
+    cleanup == null ? void 0 : cleanup();
+    cleanup = void 0;
+  };
+  host.addController({ hostConnected, hostDisconnected });
+}
+
+// src/controllers/use-effect.ts
+function useEffect(host, getValue, onChange) {
+  let value = getValue();
+  const hostUpdated = () => {
+    const v = getValue();
+    if (v !== value) {
+      value = v;
+      onChange(value);
+    }
+  };
+  host.addController({ hostUpdated });
+}
+
+// src/utils/popover-api.ts
+var popoverAvailable = typeof HTMLElement !== "undefined" && HTMLElement.prototype.hasOwnProperty("popover");
+var defaultBoundary = popoverAvailable && typeof document !== "undefined" && document.body || void 0;
+
+// src/components/popover/get-placement.ts
+import {
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  inline,
+  offset,
+  shift,
+  size
+} from "@floating-ui/dom";
+import { getWindow } from "@zag-js/dom-query";
+import { runIfFn } from "@zag-js/utils";
+function dpr(win, value) {
+  const dpr2 = win.devicePixelRatio || 1;
+  return Math.round(value * dpr2) / dpr2;
+}
+function _boundary(opts) {
+  return runIfFn(opts.boundary);
+}
+function _offset(opts) {
+  if (opts.offset == null)
+    return;
+  return offset(opts.offset);
+}
+function _flip(opts) {
+  if (!opts.flip)
+    return;
+  return flip({
+    boundary: _boundary(opts),
+    padding: opts.overflowPadding,
+    altBoundary: true,
+    fallbackPlacements: opts.flip === true ? void 0 : opts.flip
+  });
+}
+function _shift(opts) {
+  if (!opts.shift)
+    return;
+  return shift({
+    boundary: _boundary(opts),
+    padding: opts.overflowPadding,
+    altBoundary: true,
+    mainAxis: opts.shift,
+    crossAxis: opts.overlap
+  });
+}
+function _size(opts) {
+  return size({
+    boundary: _boundary(opts),
+    padding: opts.overflowPadding,
+    altBoundary: true,
+    apply({ elements, rects, availableHeight, availableWidth }) {
+      const floating = elements.floating;
+      const referenceWidth = Math.round(rects.reference.width);
+      availableWidth = Math.floor(availableWidth);
+      availableHeight = Math.floor(availableHeight);
+      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+      floating.style.setProperty("--available-width", `${availableWidth}px`);
+      floating.style.setProperty("--available-height", `${availableHeight}px`);
+    }
+  });
+}
+function _inline(opts) {
+  if (!opts.inline)
+    return;
+  return inline();
+}
+function _hide(opts) {
+  if (!opts.hide)
+    return;
+  return hide({
+    padding: opts.overflowPadding,
+    elementContext: "reference"
+  });
+}
+function getPlacement(reference, floating, options) {
+  if (!floating || !reference)
+    return;
+  const middleware = [
+    _offset(options),
+    _flip(options),
+    _shift(options),
+    _size(options),
+    _inline(options),
+    _hide(options)
+  ];
+  const { placement, strategy } = options;
+  const update = async () => {
+    var _a, _b, _c;
+    if (!reference || !floating)
+      return;
+    const pos = await computePosition(reference, floating, {
+      placement,
+      middleware,
+      strategy
+    });
+    const hidden = ((_a = pos.middlewareData.hide) == null ? void 0 : _a.escaped) || ((_b = pos.middlewareData.hide) == null ? void 0 : _b.referenceHidden);
+    (_c = options.onComplete) == null ? void 0 : _c.call(options, pos);
+    const win = getWindow(floating);
+    const x = dpr(win, pos.x);
+    const y = dpr(win, pos.y);
+    floating.style.setProperty("--x", `${x}px`);
+    floating.style.setProperty("--y", `${y}px`);
+    floating.style.setProperty("opacity", hidden ? "0" : "1");
+    const contentEl = floating.firstElementChild;
+    if (contentEl) {
+      const zIndex = win.getComputedStyle(contentEl).zIndex;
+      floating.style.setProperty("--z-index", zIndex);
+    }
+  };
+  const autoUpdateOptions = typeof options.autoUpdate === "boolean" ? void 0 : options.autoUpdate;
+  const cancelAutoUpdate = options.autoUpdate ? autoUpdate(reference, floating, update, autoUpdateOptions) : void 0;
+  void update();
+  return () => {
+    var _a;
+    cancelAutoUpdate == null ? void 0 : cancelAutoUpdate();
+    (_a = options.onCleanup) == null ? void 0 : _a.call(options);
+  };
+}
+
+// src/components/popover/options.ts
+var defaultOptions = {
+  strategy: "absolute",
+  placement: "bottom",
+  autoUpdate: true,
+  overflowPadding: 10,
+  flip: true,
+  shift: true,
+  overlap: false,
+  inline: false,
+  hide: true,
+  sameWidth: false,
+  fitViewport: false,
+  offset: 8,
+  boundary: defaultBoundary
+};
+
+// src/components/popover/set-floating-styles.ts
+function setFloatingStyles(element, options) {
+  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
+  element.style.position = strategy;
+  element.style.isolation = "isolate";
+  element.style.minWidth = sameWidth ? "" : "max-content";
+  element.style.width = sameWidth ? "var(--reference-width)" : "";
+  element.style.maxWidth = fitViewport ? "var(--available-width)" : "";
+  element.style.maxHeight = fitViewport ? "var(--available-height)" : "";
+  element.style.top = "0px";
+  element.style.left = "0px";
+  element.style.transform = placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)";
+  element.style.zIndex = "var(--z-index)";
+}
+
+// src/components/popover/use-popover.ts
+function usePopover(host, getReference, getPositioning) {
+  let cleanup;
+  const hostUpdated = () => {
+    const reference = getReference();
+    const positioning = { ...defaultOptions, ...getPositioning() };
+    cleanup == null ? void 0 : cleanup();
+    cleanup = getPlacement(reference, host, {
+      ...positioning,
+      onComplete: (data) => {
+        var _a;
+        (_a = positioning == null ? void 0 : positioning.onComplete) == null ? void 0 : _a.call(positioning, data);
+        setFloatingStyles(host, { ...positioning, placement: data.placement });
+      }
+    });
+  };
+  const hostDisconnected = () => {
+    cleanup == null ? void 0 : cleanup();
+    cleanup = void 0;
+  };
+  host.addController({ hostUpdated, hostDisconnected });
+}
+
+// src/components/popover/index.ts
+var popoverPropsNames = [
+  "open",
+  "onOpenChange",
+  "reference",
+  "positioning"
+];
+var Popover = class extends LightElement {
+  /**
+   * @hidden
+   */
+  constructor() {
+    super();
+    useDismissable(this, {
+      onPointerDownOutside: (event) => {
+        var _a, _b;
+        (_b = (_a = this.positioning) == null ? void 0 : _a.onPointerDownOutside) == null ? void 0 : _b.call(_a, event);
+        if (!event.defaultPrevented) {
+          this.requestUpdate();
+        }
+      },
+      onEscapeKeyDown: (event) => {
+        var _a, _b;
+        (_b = (_a = this.positioning) == null ? void 0 : _a.onEscapeKeyDown) == null ? void 0 : _b.call(_a, event);
+        if (!event.defaultPrevented) {
+          this.requestUpdate();
+        }
+      },
+      getReference: () => {
+        return this.reference;
+      }
+    });
+    useEffect(
+      this,
+      () => {
+        var _a;
+        return (_a = this.open) != null ? _a : false;
+      },
+      (open) => {
+        var _a;
+        return (_a = this.onOpenChange) == null ? void 0 : _a.call(this, open);
+      }
+    );
+    usePopover(
+      this,
+      () => {
+        var _a;
+        return (_a = this.reference) != null ? _a : null;
+      },
+      () => {
+        var _a;
+        return (_a = this.positioning) != null ? _a : null;
+      }
+    );
+  }
+  /**
+   * @hidden
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this.tabIndex = -1;
+    this.role = "dialog";
+    this.updatePopoverAttribute();
+    this.updateDateAttributes();
+  }
+  updatePopoverAttribute() {
+    var _a;
+    if (!popoverAvailable) {
+      return;
+    }
+    this.setAttribute("popover", "manual");
+    (_a = this.showPopover) == null ? void 0 : _a.call(this);
+    this.style.setProperty("margin", "unset");
+  }
+  updateDateAttributes() {
+    this.setAttribute("data-state", this.open ? "open" : "closed");
+    if (this.open) {
+      this.setAttribute("data-expanded", "");
+    } else {
+      this.removeAttribute("data-expanded");
+    }
+  }
+  /**
+   * @hidden
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.setHidden(!this.open);
+    this.updateDateAttributes();
+  }
+  /**
+   * @hidden
+   */
+  hide() {
+    this.open = false;
+  }
+};
+/**
+ * @hidden
+ */
+Popover.properties = {
+  reference: { attribute: false },
+  open: { type: Boolean, reflect: false, attribute: false },
+  onOpenChange: { attribute: false },
+  positioning: { type: Object, reflect: false, attribute: false }
+};
+defineCustomElement("prosekit-popover", Popover);
+
+export {
+  popoverPropsNames,
+  Popover
+};

package/dist/prosekit-lit-autocomplete-popover.d.ts

@@ -1,4 +1,4 @@
-export { PopoverOptions } from './_tsup-dts-rollup';
+export { PositioningOptions } from './_tsup-dts-rollup';
 export { propNames_alias_5 as propNames } from './_tsup-dts-rollup';
 export { AutocompletePopoverProps } from './_tsup-dts-rollup';
 export { AutocompletePopover } from './_tsup-dts-rollup';

package/dist/prosekit-lit-autocomplete-popover.js

@@ -4,9 +4,8 @@ import {
 import "./chunk-MLUELLVA.js";
 import "./chunk-5CI65R73.js";
 import {
-  Popover,
-  boundary
-} from "./chunk-CUH6G34Q.js";
+  Popover
+} from "./chunk-OZUEYWYU.js";
 import "./chunk-GZRUCYLP.js";
 import {
   defineCustomElement
@@ -105,68 +104,8 @@ var AutocompletePopoverController = class {
   }
 };
 
-// src/components/autocomplete-popover/default-popover-options.ts
-import {
-  flip,
-  inline,
-  offset,
-  shift,
-  size
-} from "@floating-ui/dom";
-var defaultDetectOverflowOptions = {
-  padding: 8,
-  boundary
-};
-var defaultPopoverOptions = {
-  // The main axis is the y axis, and we place the popover at the bottom of the
-  // reference element.
-  //
-  // The cross axis is the x axis, and we place the popover at the start of the
-  // reference element. The reference element and the popover are left-aligned.
-  placement: "bottom-start",
-  middleware: [
-    // Use the text caret as the reference point
-    inline(),
-    offset({
-      // Move down the popover by 4px
-      mainAxis: 4
-    }),
-    // Flip the popover to the top if it's overflowing the viewport
-    //
-    // When `flipAlignment` is true, which is the default, ensure `flip() `is
-    // placed before `shift()` in your middleware array.
-    //
-    // https://floating-ui.com/docs/flip#flipalignment
-    flip({
-      // Flip the popover to the top if necessary.
-      mainAxis: true,
-      // We don't want to flip the popover to the left or right, since `shift()`
-      // will handle this.
-      crossAxis: false,
-      ...defaultDetectOverflowOptions
-    }),
-    // We need to place `shift()` after `flip()`. See https://floating-ui.com/docs/flip#flipalignment
-    shift({
-      ...defaultDetectOverflowOptions
-    }),
-    size({
-      apply: ({ availableWidth, availableHeight, elements }) => {
-        elements.floating.style.setProperty(
-          "max-width",
-          `${Math.floor(availableWidth)}px`
-        );
-        elements.floating.style.setProperty(
-          "max-height",
-          `${Math.floor(availableHeight)}px`
-        );
-      },
-      ...defaultDetectOverflowOptions
-    })
-  ]
-};
-
 // src/components/autocomplete-popover/index.ts
-var propNames = ["editor", "regex", "popoverOptions"];
+var propNames = ["editor", "regex", "positioning"];
 var AutocompletePopover = class extends Popover {
   constructor() {
     super(...arguments);
@@ -177,7 +116,12 @@ var AutocompletePopover = class extends Popover {
       this,
       this.updateContext.bind(this)
     );
-    this.popoverOptions = defaultPopoverOptions;
+    this.positioning = {
+      strategy: "fixed",
+      placement: "bottom-start",
+      flip: false,
+      inline: true
+    };
     this.context = new ContextProvider(this, {
       context: autocompletePopoverContext,
       initialValue: {
@@ -222,9 +166,8 @@ var AutocompletePopover = class extends Popover {
     if (this.regex) {
       this.controller.setRegex(this.regex);
     }
-    this.active = !!((_a = this.controller) == null ? void 0 : _a.reference);
+    this.open = !!((_a = this.controller) == null ? void 0 : _a.reference);
     this.reference = (_b = this.controller.reference) != null ? _b : void 0;
-    this.options = this.popoverOptions;
   }
   /**
    * @hidden
@@ -243,10 +186,9 @@ var AutocompletePopover = class extends Popover {
  */
 AutocompletePopover.properties = {
   ...Popover.properties,
-  editor: { attribute: false },
+  editor: { type: Object, reflect: false, attribute: false },
   regex: { attribute: false },
-  popoverOptions: { attribute: false },
-  onSelect: { attribute: false }
+  positioning: { type: Object, reflect: false, attribute: false }
 };
 defineCustomElement("prosekit-autocomplete-popover", AutocompletePopover);
 export {

package/dist/prosekit-lit-combo-box.js

@@ -1,6 +1,6 @@
 import {
   Popover
-} from "./chunk-CUH6G34Q.js";
+} from "./chunk-OZUEYWYU.js";
 import {
   ListManager
 } from "./chunk-GZRUCYLP.js";

package/dist/prosekit-lit-inline-popover.d.ts

@@ -1,4 +1,4 @@
-export { PopoverOptions_alias_1 as PopoverOptions } from './_tsup-dts-rollup';
+export { PositioningOptions_alias_1 as PositioningOptions } from './_tsup-dts-rollup';
 export { propNames_alias_12 as propNames } from './_tsup-dts-rollup';
 export { InlinePopoverProps } from './_tsup-dts-rollup';
 export { InlinePopover } from './_tsup-dts-rollup';