@kerfjs/ui 5.0.0-beta.11 → 5.0.0-beta.110

package/dist/chunk-UMNHJSIO.js

@@ -0,0 +1,848 @@
+import { readSearchField, placeSearchFieldCaret } from './chunk-VEME3D7K.js';
+import { autoUpdate, computePosition, offset, flip, shift, size } from '@floating-ui/dom';
+import { delegate, delegateCapture, signal } from 'kerfjs';
+
+function editorFromEvent(root, event) {
+  const target = event.target;
+  if (!(target instanceof Element)) return;
+  const editor = target.closest("[data-search-field-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 readSearchField(prefix).query.length;
+}
+function replacementEditor(root, id) {
+  return [
+    ...root.querySelectorAll("[data-search-field-editor]")
+  ].find((editor) => editor.dataset.searchFieldEditor === id);
+}
+function editorIsEmpty(editor) {
+  const value = readSearchField(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 = readSearchField(editor);
+  const selectedValue = readSearchField(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="search-field-token"]';
+var TEXT_SELECTOR = "[data-search-field-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-search-field-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: offset2 } = range;
+  if (container.nodeType === Node.TEXT_NODE) {
+    const text = container.data;
+    const side = direction === "backward" ? text.slice(0, offset2) : text.slice(offset2);
+    if (stripZwsp(side).length > 0) return null;
+    return meaningfulSibling(topBlock(editor, container), direction);
+  }
+  const child = container.childNodes[direction === "backward" ? offset2 - 1 : offset2];
+  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 wireSearchFields(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 pendingPointerBlurCollapses = /* @__PURE__ */ new Map();
+  let pointerReleaseTimer;
+  const positionedSuggestions = /* @__PURE__ */ new Map();
+  const syncSuggestions = () => {
+    const current = new Set(
+      root.querySelectorAll(".kui-search-field__suggestions")
+    );
+    for (const [popup, stop] of positionedSuggestions) {
+      if (current.has(popup)) continue;
+      stop();
+      positionedSuggestions.delete(popup);
+    }
+    for (const popup of current) {
+      if (positionedSuggestions.has(popup)) continue;
+      const field = popup.closest(
+        '[data-component="search-field"]'
+      );
+      if (!field) continue;
+      let active = true;
+      popup.style.position = "absolute";
+      popup.style.insetBlockStart = "auto";
+      popup.style.insetInlineStart = "auto";
+      popup.style.left = "0";
+      popup.style.top = "0";
+      popup.style.visibility = "hidden";
+      const update = async () => {
+        const width = Math.min(
+          Math.max(field.getBoundingClientRect().width, 240),
+          Math.max(0, field.ownerDocument.defaultView.innerWidth - 16)
+        );
+        popup.style.width = `${width}px`;
+        const position = await computePosition(field, popup, {
+          strategy: "absolute",
+          placement: "bottom-start",
+          middleware: [
+            offset(4),
+            flip({ padding: 8 }),
+            shift({ padding: 8 }),
+            size({
+              padding: 8,
+              apply({ availableHeight }) {
+                popup.style.maxHeight = `${Math.max(0, Math.min(240, availableHeight))}px`;
+              }
+            })
+          ]
+        });
+        if (!active || disposed || !popup.isConnected) return;
+        popup.style.left = `${position.x}px`;
+        popup.style.top = `${position.y}px`;
+        popup.style.visibility = "visible";
+      };
+      const stopAutoUpdate = autoUpdate(field, popup, () => void update(), {
+        layoutShift: false
+      });
+      positionedSuggestions.set(popup, () => {
+        active = false;
+        stopAutoUpdate();
+        for (const property of [
+          "position",
+          "inset-block-start",
+          "inset-inline-start",
+          "left",
+          "top",
+          "visibility",
+          "width",
+          "max-height"
+        ])
+          popup.style.removeProperty(property);
+      });
+    }
+  };
+  const suggestionsObserver = new MutationObserver(syncSuggestions);
+  suggestionsObserver.observe(root, { childList: true, subtree: true });
+  const placeholderObserver = new MutationObserver((records) => {
+    for (const record of records) {
+      const field = record.target;
+      if (field.dataset.placeholderVisible !== "true") continue;
+      const editor = field.querySelector(
+        ":scope > .kui-search-field__editor"
+      );
+      if (editor && (editor.querySelector(TOKEN_SELECTOR) || readSearchField(editor).query.length > 0))
+        field.dataset.placeholderVisible = "false";
+    }
+  });
+  placeholderObserver.observe(root, {
+    attributes: true,
+    attributeFilter: ["data-placeholder-visible"],
+    subtree: true
+  });
+  syncSuggestions();
+  const isExemptTarget = (element) => {
+    if (!element) return false;
+    if (element.closest("[data-search-field-keep-open]")) return true;
+    return keepOpenOn ? keepOpenOn(element) : false;
+  };
+  const trackPointerActivation = (event) => {
+    if (pointerReleaseTimer !== void 0)
+      view().clearTimeout(pointerReleaseTimer);
+    pointerReleaseTimer = void 0;
+    pointerActivationTarget = event.target instanceof Element ? event.target : null;
+  };
+  const flushPointerBlurCollapses = () => {
+    if (pointerReleaseTimer !== void 0)
+      view().clearTimeout(pointerReleaseTimer);
+    pointerReleaseTimer = void 0;
+    for (const collapse of pendingPointerBlurCollapses.values()) collapse();
+    pendingPointerBlurCollapses.clear();
+  };
+  const flushAfterClickDispatch = () => {
+    view().queueMicrotask(flushPointerBlurCollapses);
+  };
+  const flushAfterPointerClick = () => {
+    if (pendingPointerBlurCollapses.size === 0) return;
+    if (pointerReleaseTimer !== void 0)
+      view().clearTimeout(pointerReleaseTimer);
+    pointerReleaseTimer = view().setTimeout(flushPointerBlurCollapses, 0);
+  };
+  const clearPointerActivation = () => {
+    pointerActivationTarget = null;
+  };
+  const clearPointerActivationAfterDefault = () => {
+    view().queueMicrotask(clearPointerActivation);
+    flushAfterPointerClick();
+  };
+  const clearPointerActivationAfterClick = () => {
+    clearPointerActivation();
+    flushAfterPointerClick();
+    if (pendingPointerBlurCollapses.size > 0)
+      view().addEventListener("click", flushAfterClickDispatch, {
+        once: true
+      });
+  };
+  const cancelPointerActivation = () => {
+    clearPointerActivation();
+    flushAfterPointerClick();
+  };
+  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 focusing = /* @__PURE__ */ new Map();
+  const focusAfterRender = (id, selector, guardMovedFocus = false) => {
+    focusing.get(id)?.();
+    let frame;
+    const stop = () => {
+      observer.disconnect();
+      if (frame !== void 0) view().cancelAnimationFrame(frame);
+      if (focusing.get(id) === stop) focusing.delete(id);
+    };
+    const restore = () => {
+      if (disposed) return stop();
+      const field = root.querySelector(
+        `[data-component="search-field"][data-search-field-id="${CSS.escape(id)}"]`
+      );
+      const target = field?.querySelector(selector);
+      if (!field || !target) return;
+      const active = field.ownerDocument.activeElement;
+      if (guardMovedFocus && active !== field.ownerDocument.body && active !== target && !field.contains(active))
+        return stop();
+      stop();
+      if (target.matches("[data-search-field-editor]"))
+        placeSearchFieldCaret(target);
+      else target.focus();
+    };
+    const observer = new MutationObserver(restore);
+    observer.observe(root, { childList: true, subtree: true });
+    focusing.set(id, stop);
+    view().queueMicrotask(restore);
+    frame = view().requestAnimationFrame(() => {
+      frame = void 0;
+      restore();
+      stop();
+    });
+  };
+  const openField = (id) => {
+    setExpanded(id, true);
+    if (manageFocus) focusAfterRender(id, "[data-search-field-editor]");
+  };
+  const closeField = (id) => {
+    setExpanded(id, false);
+    if (manageFocus) focusAfterRender(id, ".kui-search-field__expand");
+  };
+  const clearing = /* @__PURE__ */ new Map();
+  const focusAtClearPress = /* @__PURE__ */ new WeakMap();
+  const pending = /* @__PURE__ */ new Map();
+  const deleting = /* @__PURE__ */ new Map();
+  const selectAllIntents = /* @__PURE__ */ new WeakSet();
+  const intentId = (editor) => editor.dataset.searchFieldEditor;
+  const captureDeletion = (editor, selectedAll) => {
+    if (editor.ownerDocument.activeElement !== editor) return;
+    const field = editor.closest(
+      '[data-component="search-field"]'
+    );
+    const id = field?.dataset.searchFieldId;
+    const offset2 = selectedAll ? 0 : caretQueryOffset(editor);
+    if (!id || offset2 === void 0 || field?.dataset.disabled === "true")
+      return;
+    pending.set(id, {
+      id,
+      offset: offset2,
+      tokenCount: editor.querySelectorAll(
+        '[data-component="search-field-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;
+      placeSearchFieldCaret(
+        replacement,
+        typeof deletion.offset === "number" ? deletion.offset : deletion.offset(replacement)
+      );
+    };
+    const observer = new MutationObserver(restore);
+    observer.observe(root, { childList: true, subtree: true });
+    const timeout = view().setTimeout(stop, 0);
+    deleting.set(deletion.id, stop);
+  };
+  const handOffAppEdit = (editor, id) => {
+    if (editor.ownerDocument.activeElement !== editor) return;
+    const offset2 = caretQueryOffset(editor);
+    if (offset2 === void 0) return;
+    const before = readSearchField(editor).query.length;
+    restoreDeletion(editor, {
+      id,
+      offset: (replacement) => {
+        if (offset2 >= before) return void 0;
+        const after = readSearchField(replacement).query.length;
+        return Math.min(after, Math.max(0, offset2 - (before - after)));
+      }
+    });
+  };
+  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="search-field"]')?.dataset.collapsible === "true")
+        setExpanded(editorId, true);
+    }
+    const field = editor.closest(
+      '[data-component="search-field"]'
+    );
+    if (field)
+      field.dataset.placeholderVisible = String(
+        !editor.querySelector(TOKEN_SELECTOR) && readSearchField(editor).query.length === 0
+      );
+    const id = field?.dataset.searchFieldId;
+    if (id && field?.dataset.disabled !== "true") {
+      const model = models[id];
+      if (model) {
+        const before = editor.querySelectorAll(TOKEN_SELECTOR).length;
+        const current = readSearchField(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-search-field-editor]", true);
+      }
+      if (onEdit) {
+        if (!restore && !model && !deleting.has(id)) handOffAppEdit(editor, id);
+        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,
+      "click",
+      "[data-search-field-form-label]",
+      (_event, label) => {
+        const field = label.parentElement?.querySelector(
+          '[data-component="search-field"]'
+        );
+        if (field?.dataset.disabled === "true") return;
+        field?.querySelector("[data-search-field-editor]")?.focus();
+      }
+    )
+  );
+  disposers.push(
+    delegate(
+      root,
+      "keydown",
+      "[data-search-field-editor]",
+      (event, element) => {
+        const keyboardEvent = event;
+        const editor = element;
+        if (keyboardEvent.isComposing) return;
+        const field = editor.closest(
+          '[data-component="search-field"]'
+        );
+        const id = field?.dataset.searchFieldId;
+        if (!id || field?.dataset.disabled === "true") return;
+        const keyboardForField = !editor.closest('[data-component="tag-field"]') && (keyboard !== false || Boolean(models[id]));
+        if (keyboardEvent.key === "Enter") {
+          keyboardEvent.preventDefault();
+          const model = models[id];
+          if (model)
+            model.submit(readSearchField(editor, model.state.value.tokens));
+          onSubmit?.({ id, editor });
+          return;
+        }
+        if (models[id] && keyboardEvent.key === "ArrowDown") {
+          const first = field.querySelector(
+            "[data-search-field-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
+            };
+            const offset2 = caretQueryOffset(editor);
+            if (offset2 !== void 0) restoreDeletion(editor, { id, offset: offset2 });
+            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-search-field-suggestion]",
+        (event, element) => {
+          const keyboard2 = event;
+          const button = element;
+          const buttons = [
+            ...button.parentElement.querySelectorAll(
+              "[data-search-field-suggestion]"
+            )
+          ];
+          const index = buttons.indexOf(button);
+          if (keyboard2.key === "Escape") {
+            keyboard2.preventDefault();
+            button.closest('[data-component="search-field"]')?.querySelector("[data-search-field-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-search-field-suggestion]",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="search-field"]'
+          );
+          const id = field?.dataset.searchFieldId;
+          const value = element.dataset.searchFieldSuggestion;
+          if (!id || !value || field?.dataset.disabled === "true") return;
+          models[id]?.choose(value);
+          focusAfterRender(id, "[data-search-field-editor]", true);
+        }
+      ),
+      delegate(
+        root,
+        "click",
+        ".kui-search-field__token-edit",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="search-field"]'
+          );
+          const id = field?.dataset.searchFieldId;
+          const value = element.dataset.tokenValue;
+          if (!id || !value || field?.dataset.disabled === "true" || !models[id])
+            return;
+          models[id].expandToken(value);
+          focusAfterRender(id, "[data-search-field-editor]", true);
+        }
+      ),
+      delegate(
+        root,
+        "click",
+        ".kui-search-field__token-remove",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="search-field"]'
+          );
+          const id = field?.dataset.searchFieldId;
+          const value = element.dataset.tokenValue;
+          if (id && value && field?.dataset.disabled !== "true")
+            models[id]?.remove(value);
+        }
+      ),
+      delegate(root, "click", ".kui-search-field__clear", (_event, element) => {
+        const field = element.closest(
+          '[data-component="search-field"]'
+        );
+        const id = field?.dataset.searchFieldId;
+        if (id && field?.dataset.disabled !== "true") models[id]?.clear();
+      })
+    );
+  }
+  if (expandOnActivate) {
+    disposers.push(
+      delegate(
+        root,
+        "click",
+        ".kui-search-field__expand",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="search-field"]'
+          );
+          const id = field?.dataset.searchFieldId;
+          if (id && field?.dataset.disabled !== "true") openField(id);
+        }
+      )
+    );
+  }
+  if (manageFocus) {
+    disposers.push(
+      () => {
+        for (const stop of clearing.values()) stop();
+      },
+      delegateCapture(
+        root,
+        "pointerdown",
+        ".kui-search-field__clear",
+        (_event, element) => {
+          const field = element.closest('[data-component="search-field"]');
+          focusAtClearPress.set(
+            element,
+            !!field?.contains(root.ownerDocument.activeElement)
+          );
+        }
+      ),
+      delegateCapture(
+        root,
+        "click",
+        ".kui-search-field__clear",
+        (_event, element) => {
+          const field = element.closest(
+            '[data-component="search-field"]'
+          );
+          const id = field?.dataset.searchFieldId;
+          if (!id || field.dataset.collapsible !== "true" && !models[id] || field.dataset.disabled === "true")
+            return;
+          const editor = replacementEditor(root, id);
+          clearing.get(id)?.();
+          const pressed = focusAtClearPress.get(element);
+          focusAtClearPress.delete(element);
+          const focusedBefore = pressed ?? field.contains(root.ownerDocument.activeElement);
+          const collapseIfEmpty = () => {
+            const current2 = replacementEditor(root, id);
+            if (field.dataset.collapsible === "true" && current2 && editorIsEmpty(current2))
+              setExpanded(id, false);
+          };
+          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 (!focusedBefore) collapseIfEmpty();
+            else if (ownsFocus(replacement)) placeSearchFieldCaret(replacement);
+          });
+          observer.observe(root, { childList: true, subtree: true });
+          const timeout = view().setTimeout(() => {
+            stop();
+            if (!focusedBefore) collapseIfEmpty();
+          }, 0);
+          clearing.set(id, stop);
+          if (!focusedBefore) return;
+          if (field.dataset.collapsible === "true") setExpanded(id, true);
+          const current = replacementEditor(root, id);
+          if (current && ownsFocus(current)) placeSearchFieldCaret(current);
+        }
+      )
+    );
+  }
+  if (collapseOnEmptyBlur) {
+    root.ownerDocument.addEventListener(
+      "pointerdown",
+      trackPointerActivation,
+      true
+    );
+    root.ownerDocument.addEventListener(
+      "pointerup",
+      clearPointerActivationAfterDefault,
+      true
+    );
+    root.ownerDocument.addEventListener(
+      "pointercancel",
+      cancelPointerActivation,
+      true
+    );
+    root.ownerDocument.addEventListener(
+      "click",
+      clearPointerActivationAfterClick,
+      true
+    );
+    disposers.push(
+      () => root.ownerDocument.removeEventListener(
+        "pointerdown",
+        trackPointerActivation,
+        true
+      ),
+      () => root.ownerDocument.removeEventListener(
+        "pointerup",
+        clearPointerActivationAfterDefault,
+        true
+      ),
+      () => root.ownerDocument.removeEventListener(
+        "pointercancel",
+        cancelPointerActivation,
+        true
+      ),
+      () => root.ownerDocument.removeEventListener(
+        "click",
+        clearPointerActivationAfterClick,
+        true
+      )
+    );
+    disposers.push(
+      delegate(
+        root,
+        "mousedown",
+        '[data-component="search-field"][data-collapsible="true"] button',
+        (event) => {
+          event.preventDefault();
+        }
+      )
+    );
+    disposers.push(
+      delegate(
+        root,
+        "focusout",
+        "[data-search-field-editor]",
+        (event, element) => {
+          const editor = element;
+          const field = editor.closest(
+            '[data-component="search-field"]'
+          );
+          const id = field?.dataset.searchFieldId;
+          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;
+          const collapseIfStillEmptyAndBlurred = () => {
+            if (disposed || !editorIsEmpty(editor)) return;
+            const active = field.ownerDocument.activeElement;
+            if (!field.contains(active) && !isExemptTarget(active))
+              setExpanded(id, false);
+          };
+          if (pointerActivationTarget)
+            pendingPointerBlurCollapses.set(id, collapseIfStillEmptyAndBlurred);
+          else view().queueMicrotask(collapseIfStillEmptyAndBlurred);
+        }
+      )
+    );
+  }
+  const dispose = () => {
+    disposed = true;
+    if (pointerReleaseTimer !== void 0)
+      view().clearTimeout(pointerReleaseTimer);
+    view().removeEventListener("click", flushAfterClickDispatch);
+    pendingPointerBlurCollapses.clear();
+    suggestionsObserver.disconnect();
+    placeholderObserver.disconnect();
+    for (const stop of positionedSuggestions.values()) stop();
+    positionedSuggestions.clear();
+    for (const stop of focusing.values()) stop();
+    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 { wireSearchFields };
+
+//# sourceMappingURL=chunk-UMNHJSIO.js.map