@kerfjs/ui 5.0.0-beta.6 → 5.0.0-beta.61

package/dist/chunk-A3CKOW2R.js

@@ -0,0 +1,622 @@
+import { readTokenSearchField, placeTokenSearchCaret } from './chunk-RRB26JRJ.js';
+import { delegate, delegateCapture, signal } from 'kerfjs';
+
+function editorFromEvent(root, event) {
+  const target = event.target;
+  if (!(target instanceof Element)) return;
+  const editor = target.closest("[data-token-search-editor]");
+  return editor && root.contains(editor) ? editor : void 0;
+}
+function caretQueryOffset(editor) {
+  const selection = editor.ownerDocument.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const selectionRange = selection.getRangeAt(0);
+  if (!editor.contains(selectionRange.startContainer)) return;
+  const prefixRange = editor.ownerDocument.createRange();
+  prefixRange.selectNodeContents(editor);
+  prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
+  const prefix = editor.ownerDocument.createElement("div");
+  prefix.append(prefixRange.cloneContents());
+  return readTokenSearchField(prefix).query.length;
+}
+function replacementEditor(root, id) {
+  return [
+    ...root.querySelectorAll("[data-token-search-editor]")
+  ].find((editor) => editor.dataset.tokenSearchEditor === id);
+}
+function editorIsEmpty(editor) {
+  const value = readTokenSearchField(editor);
+  return value.query.length === 0 && value.tokens.length === 0;
+}
+function selectionCoversEditor(editor) {
+  const selected = editor.ownerDocument.getSelection().getRangeAt(0);
+  if (selected.collapsed || !editor.contains(selected.commonAncestorContainer))
+    return false;
+  const selectedHost = editor.ownerDocument.createElement("div");
+  selectedHost.append(selected.cloneContents());
+  const fullValue = readTokenSearchField(editor);
+  const selectedValue = readTokenSearchField(selectedHost);
+  return selectedValue.query === fullValue.query && selectedValue.tokens.length === fullValue.tokens.length && selectedValue.tokens.every(
+    (token, index) => token.value === fullValue.tokens[index]?.value
+  );
+}
+var TOKEN_SELECTOR = '[data-component="token-search-token"]';
+var TEXT_SELECTOR = "[data-token-search-text]";
+var stripZwsp = (text) => text.replaceAll("\u200B", "");
+function normalizeEmptiedEditor(editor, selectedAll = false) {
+  const lineBreaks = editor.querySelectorAll("br");
+  if (lineBreaks.length === 0 && !selectedAll) return;
+  for (const lineBreak of lineBreaks) lineBreak.remove();
+  if (!selectedAll && editor.querySelector(TOKEN_SELECTOR)) return;
+  if (!selectedAll && stripZwsp(editor.textContent ?? "") !== "") return;
+  const doc = editor.ownerDocument;
+  const span = doc.createElement("span");
+  span.setAttribute("data-token-search-text", "");
+  span.setAttribute("data-empty", "true");
+  editor.replaceChildren(span);
+  if (doc.activeElement !== editor) return;
+  const selection = doc.getSelection();
+  const range = doc.createRange();
+  range.setStart(span, 0);
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function collapsedCaret(editor) {
+  const selection = editor.ownerDocument.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (!range.collapsed || !editor.contains(range.startContainer)) return;
+  return range;
+}
+function topBlock(editor, node) {
+  let current = node;
+  while (current.parentNode && current.parentNode !== editor)
+    current = current.parentNode;
+  return current.parentNode === editor ? current : null;
+}
+function isBlankText(node) {
+  if (node.nodeType === Node.TEXT_NODE)
+    return stripZwsp(node.data) === "";
+  return node instanceof Element && node.matches(TEXT_SELECTOR) && stripZwsp(node.textContent ?? "") === "";
+}
+function meaningfulSibling(block, direction) {
+  let sibling = direction === "backward" ? block.previousSibling : block.nextSibling;
+  while (sibling && isBlankText(sibling))
+    sibling = direction === "backward" ? sibling.previousSibling : sibling.nextSibling;
+  return sibling;
+}
+function caretSideNode(editor, range, direction) {
+  const { startContainer: container, startOffset: offset } = range;
+  if (container.nodeType === Node.TEXT_NODE) {
+    const text = container.data;
+    const side = direction === "backward" ? text.slice(0, offset) : text.slice(offset);
+    if (stripZwsp(side).length > 0) return null;
+    return meaningfulSibling(topBlock(editor, container), direction);
+  }
+  const child = container.childNodes[direction === "backward" ? offset - 1 : offset];
+  if (child) {
+    const block2 = topBlock(editor, child);
+    return isBlankText(child) ? meaningfulSibling(block2, direction) : block2;
+  }
+  const block = topBlock(editor, container);
+  return block ? meaningfulSibling(block, direction) : null;
+}
+function adjacentToken(editor, direction) {
+  const range = collapsedCaret(editor);
+  if (!range) return;
+  const node = caretSideNode(editor, range, direction);
+  if (!node) return;
+  const base = node instanceof Element ? node : node.parentElement;
+  const chip = base?.closest(TOKEN_SELECTOR) ?? null;
+  return chip && editor.contains(chip) ? chip : void 0;
+}
+function placeCaretAfterToken(editor, chip) {
+  const selection = editor.ownerDocument.getSelection();
+  const range = editor.ownerDocument.createRange();
+  range.setStartAfter(topBlock(editor, chip));
+  range.collapse(true);
+  selection.removeAllRanges();
+  selection.addRange(range);
+  editor.focus({ preventScroll: true });
+}
+function wireTokenSearchFields(root, {
+  models = {},
+  onSubmit,
+  onEdit,
+  collapsible = true,
+  keyboard = false
+} = {}) {
+  const managed = collapsible !== false;
+  const config = typeof collapsible === "object" ? collapsible : {};
+  const expandOnActivate = managed && (config.expandOnActivate ?? true);
+  const collapseOnEmptyBlur = managed && (config.collapseOnEmptyBlur ?? true);
+  const collapseOnEscape = managed && (config.collapseOnEscape ?? true);
+  const manageFocus = managed && (config.manageFocus ?? true);
+  const keepOpenOn = config.keepOpenOn;
+  const keyboardOn = keyboard !== false || Object.keys(models).length > 0;
+  const keyboardConfig = typeof keyboard === "object" ? keyboard : void 0;
+  const removeAdjacentToken = keyboardOn && (keyboardConfig?.removeAdjacentToken ?? true);
+  const moveCaretPastToken = keyboardOn && (keyboardConfig?.moveCaretPastToken ?? true);
+  const onRemoveToken = keyboardConfig?.onRemoveToken;
+  const adopted = config.signals ?? {};
+  const created = /* @__PURE__ */ new Map();
+  let disposed = false;
+  let pointerActivationTarget = null;
+  const isExemptTarget = (element) => {
+    if (!element) return false;
+    if (element.closest("[data-token-search-keep-open]")) return true;
+    return keepOpenOn ? keepOpenOn(element) : false;
+  };
+  const trackPointerActivation = (event) => {
+    pointerActivationTarget = event.target instanceof Element ? event.target : null;
+  };
+  const clearPointerActivation = () => {
+    pointerActivationTarget = null;
+  };
+  const clearPointerActivationAfterDefault = () => {
+    view().queueMicrotask(clearPointerActivation);
+  };
+  const signalFor = (id) => {
+    const own = adopted[id];
+    if (own) return own;
+    let field = created.get(id);
+    if (!field) {
+      field = signal(false);
+      created.set(id, field);
+    }
+    return field;
+  };
+  const setExpanded = (id, next) => {
+    const state = signalFor(id);
+    if (state.value !== next) state.value = next;
+  };
+  const view = () => root.ownerDocument.defaultView;
+  const focusAfterRender = (id, selector) => {
+    view().requestAnimationFrame(() => {
+      if (disposed) return;
+      const target = root.querySelector(
+        `[data-component="token-search-field"][data-token-search-id="${CSS.escape(id)}"] ${selector}`
+      );
+      if (!target) return;
+      if (target.matches("[data-token-search-editor]"))
+        placeTokenSearchCaret(target);
+      else target.focus();
+    });
+  };
+  const openField = (id) => {
+    setExpanded(id, true);
+    if (manageFocus) focusAfterRender(id, "[data-token-search-editor]");
+  };
+  const closeField = (id) => {
+    setExpanded(id, false);
+    if (manageFocus) focusAfterRender(id, ".kui-token-search__expand");
+  };
+  const clearing = /* @__PURE__ */ new Map();
+  const pending = /* @__PURE__ */ new Map();
+  const deleting = /* @__PURE__ */ new Map();
+  const selectAllIntents = /* @__PURE__ */ new WeakSet();
+  const intentId = (editor) => editor.dataset.tokenSearchEditor;
+  const captureDeletion = (editor, selectedAll) => {
+    if (editor.ownerDocument.activeElement !== editor) return;
+    const field = editor.closest(
+      '[data-component="token-search-field"]'
+    );
+    const id = field?.dataset.tokenSearchId;
+    const offset = selectedAll ? 0 : caretQueryOffset(editor);
+    if (!id || offset === void 0 || field?.dataset.disabled === "true")
+      return;
+    pending.set(id, {
+      id,
+      offset,
+      tokenCount: editor.querySelectorAll(
+        '[data-component="token-search-token"]'
+      ).length,
+      selectedAll: selectedAll ?? selectionCoversEditor(editor)
+    });
+  };
+  const onBeforeInput = (event) => {
+    const editor = editorFromEvent(root, event);
+    if (editor && event.inputType.startsWith("delete"))
+      captureDeletion(editor);
+  };
+  const restoreDeletion = (editor, deletion) => {
+    deleting.get(deletion.id)?.();
+    const stop = () => {
+      observer.disconnect();
+      view().clearTimeout(timeout);
+      deleting.delete(deletion.id);
+    };
+    const restore = () => {
+      const replacement = replacementEditor(root, deletion.id);
+      if (!replacement || replacement === editor) return;
+      stop();
+      const active = replacement.ownerDocument.activeElement;
+      if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body)
+        return;
+      placeTokenSearchCaret(replacement, deletion.offset);
+    };
+    const observer = new MutationObserver(restore);
+    observer.observe(root, { childList: true, subtree: true });
+    const timeout = view().setTimeout(stop, 0);
+    deleting.set(deletion.id, stop);
+  };
+  const onInput = (event) => {
+    const editor = editorFromEvent(root, event);
+    if (!editor) return;
+    const editorId = intentId(editor);
+    const inputType = event.inputType;
+    if (!inputType.startsWith("delete")) selectAllIntents.delete(editor);
+    const deletion = pending.get(editorId);
+    if (inputType.startsWith("delete"))
+      normalizeEmptiedEditor(editor, deletion?.selectedAll);
+    const restore = deletion && (deletion.selectedAll || editor.querySelectorAll(TOKEN_SELECTOR).length < deletion.tokenCount);
+    if (restore) {
+      restoreDeletion(editor, deletion);
+      if (manageFocus && editor.closest('[data-component="token-search-field"]')?.dataset.collapsible === "true")
+        setExpanded(editorId, true);
+    }
+    const field = editor.closest(
+      '[data-component="token-search-field"]'
+    );
+    const id = field?.dataset.tokenSearchId;
+    if (id && field?.dataset.disabled !== "true") {
+      const model = models[id];
+      if (model) {
+        const before = editor.querySelectorAll(TOKEN_SELECTOR).length;
+        const current = readTokenSearchField(editor, model.state.value.tokens);
+        const input = event;
+        const commit = typeof input.data === "string" && /\s$/.test(input.data) || input.inputType === "insertFromPaste" && /\s$/.test(current.query);
+        model.edit(current, commit);
+        if (model.state.value.tokens.length > before)
+          focusAfterRender(id, "[data-token-search-editor]");
+      }
+      if (onEdit) onEdit({ id, editor, event });
+    }
+    pending.delete(editorId);
+  };
+  root.addEventListener("beforeinput", onBeforeInput, true);
+  root.addEventListener("input", onInput, true);
+  const clearSelectAllIntent = (event) => {
+    const editor = editorFromEvent(root, event);
+    if (editor) selectAllIntents.delete(editor);
+  };
+  const trackSelectAllIntent = (event) => {
+    const keyboardEvent = event;
+    const editor = editorFromEvent(root, event);
+    if (!editor || keyboardEvent.isComposing) return;
+    const fullDeletionInputType = keyboardEvent.key === "Backspace" ? "deleteContentBackward" : keyboardEvent.key === "Delete" ? "deleteContentForward" : void 0;
+    if (keyboardEvent.key.toLowerCase() === "a" && (keyboardEvent.ctrlKey || keyboardEvent.metaKey) && !keyboardEvent.altKey && !keyboardEvent.shiftKey) {
+      selectAllIntents.add(editor);
+      return;
+    }
+    if (fullDeletionInputType && selectAllIntents.delete(editor)) {
+      if (editor.parentElement?.dataset.disabled === "true") return;
+      keyboardEvent.preventDefault();
+      captureDeletion(editor, true);
+      normalizeEmptiedEditor(editor, true);
+      editor.dispatchEvent(
+        new InputEvent("input", {
+          bubbles: true,
+          inputType: fullDeletionInputType
+        })
+      );
+      return;
+    }
+    if (!fullDeletionInputType) selectAllIntents.delete(editor);
+  };
+  root.addEventListener("keydown", trackSelectAllIntent, true);
+  root.addEventListener("pointerdown", clearSelectAllIntent, true);
+  root.addEventListener("focusout", clearSelectAllIntent, true);
+  const disposers = [
+    () => {
+      pending.clear();
+      for (const stop of deleting.values()) stop();
+    },
+    () => root.removeEventListener("beforeinput", onBeforeInput, true),
+    () => root.removeEventListener("input", onInput, true),
+    () => root.removeEventListener("keydown", trackSelectAllIntent, true),
+    () => root.removeEventListener("pointerdown", clearSelectAllIntent, true),
+    () => root.removeEventListener("focusout", clearSelectAllIntent, true)
+  ];
+  disposers.push(
+    delegate(
+      root,
+      "keydown",
+      "[data-token-search-editor]",
+      (event, element) => {
+        const keyboardEvent = event;
+        const editor = element;
+        if (keyboardEvent.isComposing) return;
+        const field = editor.closest(
+          '[data-component="token-search-field"]'
+        );
+        const id = field?.dataset.tokenSearchId;
+        if (!id || field?.dataset.disabled === "true") return;
+        const keyboardForField = keyboard !== false || Boolean(models[id]);
+        if (keyboardEvent.key === "Enter") {
+          keyboardEvent.preventDefault();
+          const model = models[id];
+          if (model)
+            model.submit(
+              readTokenSearchField(editor, model.state.value.tokens)
+            );
+          onSubmit?.({ id, editor });
+          return;
+        }
+        if (models[id] && keyboardEvent.key === "ArrowDown") {
+          const first = field.querySelector(
+            "[data-token-search-suggestion]"
+          );
+          if (first) {
+            keyboardEvent.preventDefault();
+            first.focus();
+            return;
+          }
+        }
+        if (models[id] && keyboardEvent.key === "Escape") models[id].dismiss();
+        if (keyboardForField && removeAdjacentToken && (keyboardEvent.key === "Backspace" || keyboardEvent.key === "Delete")) {
+          const direction = keyboardEvent.key === "Backspace" ? "backward" : "forward";
+          const chip = adjacentToken(editor, direction);
+          if (chip) {
+            keyboardEvent.preventDefault();
+            const removal = {
+              id,
+              value: chip.dataset.tokenValue ?? "",
+              editor,
+              direction
+            };
+            models[id]?.remove(removal.value);
+            onRemoveToken?.(removal);
+            return;
+          }
+        }
+        if (keyboardForField && moveCaretPastToken && keyboardEvent.key === "ArrowRight") {
+          const chip = adjacentToken(editor, "forward");
+          if (chip) {
+            keyboardEvent.preventDefault();
+            placeCaretAfterToken(editor, chip);
+            return;
+          }
+        }
+        if (collapseOnEscape && keyboardEvent.key === "Escape" && field?.dataset.collapsible === "true" && editorIsEmpty(editor)) {
+          keyboardEvent.preventDefault();
+          closeField(id);
+        }
+      }
+    )
+  );
+  if (Object.keys(models).length > 0) {
+    disposers.push(
+      delegate(
+        root,
+        "keydown",
+        "[data-token-search-suggestion]",
+        (event, element) => {
+          const keyboard2 = event;
+          const button = element;
+          const buttons = [
+            ...button.parentElement.querySelectorAll(
+              "[data-token-search-suggestion]"
+            )
+          ];
+          const index = buttons.indexOf(button);
+          if (keyboard2.key === "Escape") {
+            keyboard2.preventDefault();
+            button.closest('[data-component="token-search-field"]')?.querySelector("[data-token-search-editor]")?.focus();
+          } else if (keyboard2.key === "ArrowDown" || keyboard2.key === "ArrowUp") {
+            keyboard2.preventDefault();
+            buttons[(index + (keyboard2.key === "ArrowDown" ? 1 : buttons.length - 1)) % buttons.length]?.focus();
+          }
+        }
+      ),
+      delegate(
+        root,
+        "click",
+        "[data-token-search-suggestion]",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="token-search-field"]'
+          );
+          const id = field?.dataset.tokenSearchId;
+          const value = element.dataset.tokenSearchSuggestion;
+          if (!id || !value || field?.dataset.disabled === "true") return;
+          models[id]?.choose(value);
+          focusAfterRender(id, "[data-token-search-editor]");
+        }
+      ),
+      delegate(
+        root,
+        "click",
+        ".kui-token-search__token-edit",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="token-search-field"]'
+          );
+          const id = field?.dataset.tokenSearchId;
+          const value = element.dataset.tokenValue;
+          if (!id || !value || field?.dataset.disabled === "true" || !models[id])
+            return;
+          models[id].expandToken(value);
+          focusAfterRender(id, "[data-token-search-editor]");
+        }
+      ),
+      delegate(
+        root,
+        "click",
+        ".kui-token-search__token-remove",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="token-search-field"]'
+          );
+          const id = field?.dataset.tokenSearchId;
+          const value = element.dataset.tokenValue;
+          if (id && value && field?.dataset.disabled !== "true")
+            models[id]?.remove(value);
+        }
+      ),
+      delegate(root, "click", ".kui-token-search__clear", (_event, element) => {
+        const field = element.closest(
+          '[data-component="token-search-field"]'
+        );
+        const id = field?.dataset.tokenSearchId;
+        if (id && field?.dataset.disabled !== "true") models[id]?.clear();
+      })
+    );
+  }
+  if (expandOnActivate) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        ".kui-token-search__expand",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="token-search-field"]'
+          );
+          const id = field?.dataset.tokenSearchId;
+          if (id && field?.dataset.disabled !== "true") openField(id);
+        }
+      )
+    );
+  }
+  if (manageFocus) {
+    disposers.push(
+      () => {
+        for (const stop of clearing.values()) stop();
+      },
+      delegateCapture(
+        root,
+        "click",
+        ".kui-token-search__clear",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="token-search-field"]'
+          );
+          const id = field?.dataset.tokenSearchId;
+          if (!id || field.dataset.collapsible !== "true" || field.dataset.disabled === "true")
+            return;
+          const editor = replacementEditor(root, id);
+          clearing.get(id)?.();
+          const stop = () => {
+            observer.disconnect();
+            view().clearTimeout(timeout);
+            clearing.delete(id);
+          };
+          const ownsFocus = (replacement) => {
+            const active = root.ownerDocument.activeElement;
+            return active === editor || active === element || active === replacement || active === root.ownerDocument.body;
+          };
+          const observer = new MutationObserver(() => {
+            const replacement = replacementEditor(root, id);
+            if (!replacement || replacement === editor) return;
+            stop();
+            if (ownsFocus(replacement)) placeTokenSearchCaret(replacement);
+          });
+          observer.observe(root, { childList: true, subtree: true });
+          const timeout = view().setTimeout(stop, 0);
+          clearing.set(id, stop);
+          setExpanded(id, true);
+          const current = replacementEditor(root, id);
+          if (current && ownsFocus(current)) placeTokenSearchCaret(current);
+        }
+      )
+    );
+  }
+  if (collapseOnEmptyBlur) {
+    root.ownerDocument.addEventListener(
+      "pointerdown",
+      trackPointerActivation,
+      true
+    );
+    root.ownerDocument.addEventListener(
+      "pointerup",
+      clearPointerActivationAfterDefault,
+      true
+    );
+    root.ownerDocument.addEventListener(
+      "pointercancel",
+      clearPointerActivation,
+      true
+    );
+    root.ownerDocument.addEventListener("click", clearPointerActivation, true);
+    disposers.push(
+      () => root.ownerDocument.removeEventListener(
+        "pointerdown",
+        trackPointerActivation,
+        true
+      ),
+      () => root.ownerDocument.removeEventListener(
+        "pointerup",
+        clearPointerActivationAfterDefault,
+        true
+      ),
+      () => root.ownerDocument.removeEventListener(
+        "pointercancel",
+        clearPointerActivation,
+        true
+      ),
+      () => root.ownerDocument.removeEventListener(
+        "click",
+        clearPointerActivation,
+        true
+      )
+    );
+    disposers.push(
+      delegate(
+        root,
+        "mousedown",
+        '[data-component="token-search-field"][data-collapsible="true"] button',
+        (event) => {
+          event.preventDefault();
+        }
+      )
+    );
+    disposers.push(
+      delegate(
+        root,
+        "focusout",
+        "[data-token-search-editor]",
+        (event, element) => {
+          const editor = element;
+          const field = editor.closest(
+            '[data-component="token-search-field"]'
+          );
+          const id = field?.dataset.tokenSearchId;
+          if (!id || field?.dataset.collapsible !== "true" || field.dataset.disabled === "true")
+            return;
+          const relatedTarget = event.relatedTarget;
+          const next = relatedTarget instanceof Element ? relatedTarget : pointerActivationTarget;
+          if (!next && (clearing.has(id) || manageFocus && deleting.has(id)))
+            return;
+          if (next instanceof Node && field.contains(next)) return;
+          if (isExemptTarget(next instanceof Element ? next : null)) return;
+          if (!editorIsEmpty(editor)) return;
+          view().queueMicrotask(() => {
+            const active = field.ownerDocument.activeElement;
+            if (!field.contains(active) && !isExemptTarget(active))
+              setExpanded(id, false);
+          });
+        }
+      )
+    );
+  }
+  const dispose = () => {
+    disposed = true;
+    for (const stop of disposers.splice(0)) stop();
+  };
+  const handle = (() => dispose());
+  handle.dispose = dispose;
+  handle.expanded = (id) => managed ? signalFor(id) : void 0;
+  handle.open = (id) => {
+    if (managed && !disposed) openField(id);
+  };
+  handle.close = (id) => {
+    if (managed && !disposed) closeField(id);
+  };
+  return handle;
+}
+
+export { wireTokenSearchFields };
+
+//# sourceMappingURL=chunk-A3CKOW2R.js.map