@kerfjs/ui 5.0.0-beta.103 → 5.0.0-beta.105

package/dist/{chunk-PKL6QJKK.js → chunk-UMNHJSIO.js}

@@ -1,11 +1,11 @@
-import { readTokenSearchField, placeTokenSearchCaret } from './chunk-MF6ZUUJZ.js';
+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-token-search-editor]");
+  const editor = target.closest("[data-search-field-editor]");
   return editor && root.contains(editor) ? editor : void 0;
 }
 function caretQueryOffset(editor) {
@@ -18,15 +18,15 @@ function caretQueryOffset(editor) {
   prefixRange.setEnd(selectionRange.startContainer, selectionRange.startOffset);
   const prefix = editor.ownerDocument.createElement("div");
   prefix.append(prefixRange.cloneContents());
-  return readTokenSearchField(prefix).query.length;
+  return readSearchField(prefix).query.length;
 }
 function replacementEditor(root, id) {
   return [
-    ...root.querySelectorAll("[data-token-search-editor]")
-  ].find((editor) => editor.dataset.tokenSearchEditor === id);
+    ...root.querySelectorAll("[data-search-field-editor]")
+  ].find((editor) => editor.dataset.searchFieldEditor === id);
 }
 function editorIsEmpty(editor) {
-  const value = readTokenSearchField(editor);
+  const value = readSearchField(editor);
   return value.query.length === 0 && value.tokens.length === 0;
 }
 function selectionCoversEditor(editor) {
@@ -35,14 +35,14 @@ function selectionCoversEditor(editor) {
     return false;
   const selectedHost = editor.ownerDocument.createElement("div");
   selectedHost.append(selected.cloneContents());
-  const fullValue = readTokenSearchField(editor);
-  const selectedValue = readTokenSearchField(selectedHost);
+  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="token-search-token"]';
-var TEXT_SELECTOR = "[data-token-search-text]";
+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");
@@ -52,7 +52,7 @@ function normalizeEmptiedEditor(editor, selectedAll = false) {
   if (!selectedAll && stripZwsp(editor.textContent ?? "") !== "") return;
   const doc = editor.ownerDocument;
   const span = doc.createElement("span");
-  span.setAttribute("data-token-search-text", "");
+  span.setAttribute("data-search-field-text", "");
   span.setAttribute("data-empty", "true");
   editor.replaceChildren(span);
   if (doc.activeElement !== editor) return;
@@ -121,7 +121,7 @@ function placeCaretAfterToken(editor, chip) {
   selection.addRange(range);
   editor.focus({ preventScroll: true });
 }
-function wireTokenSearchFields(root, {
+function wireSearchFields(root, {
   models = {},
   onSubmit,
   onEdit,
@@ -149,7 +149,7 @@ function wireTokenSearchFields(root, {
   const positionedSuggestions = /* @__PURE__ */ new Map();
   const syncSuggestions = () => {
     const current = new Set(
-      root.querySelectorAll(".kui-token-search__suggestions")
+      root.querySelectorAll(".kui-search-field__suggestions")
     );
     for (const [popup, stop] of positionedSuggestions) {
       if (current.has(popup)) continue;
@@ -159,7 +159,7 @@ function wireTokenSearchFields(root, {
     for (const popup of current) {
       if (positionedSuggestions.has(popup)) continue;
       const field = popup.closest(
-        '[data-component="token-search-field"]'
+        '[data-component="search-field"]'
       );
       if (!field) continue;
       let active = true;
@@ -217,10 +217,26 @@ function wireTokenSearchFields(root, {
   };
   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-token-search-keep-open]")) return true;
+    if (element.closest("[data-search-field-keep-open]")) return true;
     return keepOpenOn ? keepOpenOn(element) : false;
   };
   const trackPointerActivation = (event) => {
@@ -291,7 +307,7 @@ function wireTokenSearchFields(root, {
     const restore = () => {
       if (disposed) return stop();
       const field = root.querySelector(
-        `[data-component="token-search-field"][data-token-search-id="${CSS.escape(id)}"]`
+        `[data-component="search-field"][data-search-field-id="${CSS.escape(id)}"]`
       );
       const target = field?.querySelector(selector);
       if (!field || !target) return;
@@ -299,8 +315,8 @@ function wireTokenSearchFields(root, {
       if (guardMovedFocus && active !== field.ownerDocument.body && active !== target && !field.contains(active))
         return stop();
       stop();
-      if (target.matches("[data-token-search-editor]"))
-        placeTokenSearchCaret(target);
+      if (target.matches("[data-search-field-editor]"))
+        placeSearchFieldCaret(target);
       else target.focus();
     };
     const observer = new MutationObserver(restore);
@@ -315,24 +331,24 @@ function wireTokenSearchFields(root, {
   };
   const openField = (id) => {
     setExpanded(id, true);
-    if (manageFocus) focusAfterRender(id, "[data-token-search-editor]");
+    if (manageFocus) focusAfterRender(id, "[data-search-field-editor]");
   };
   const closeField = (id) => {
     setExpanded(id, false);
-    if (manageFocus) focusAfterRender(id, ".kui-token-search__expand");
+    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.tokenSearchEditor;
+  const intentId = (editor) => editor.dataset.searchFieldEditor;
   const captureDeletion = (editor, selectedAll) => {
     if (editor.ownerDocument.activeElement !== editor) return;
     const field = editor.closest(
-      '[data-component="token-search-field"]'
+      '[data-component="search-field"]'
     );
-    const id = field?.dataset.tokenSearchId;
+    const id = field?.dataset.searchFieldId;
     const offset2 = selectedAll ? 0 : caretQueryOffset(editor);
     if (!id || offset2 === void 0 || field?.dataset.disabled === "true")
       return;
@@ -340,7 +356,7 @@ function wireTokenSearchFields(root, {
       id,
       offset: offset2,
       tokenCount: editor.querySelectorAll(
-        '[data-component="token-search-token"]'
+        '[data-component="search-field-token"]'
       ).length,
       selectedAll: selectedAll ?? selectionCoversEditor(editor)
     });
@@ -364,7 +380,7 @@ function wireTokenSearchFields(root, {
       const active = replacement.ownerDocument.activeElement;
       if (active !== editor && active !== replacement && active !== replacement.ownerDocument.body)
         return;
-      placeTokenSearchCaret(
+      placeSearchFieldCaret(
         replacement,
         typeof deletion.offset === "number" ? deletion.offset : deletion.offset(replacement)
       );
@@ -378,12 +394,12 @@ function wireTokenSearchFields(root, {
     if (editor.ownerDocument.activeElement !== editor) return;
     const offset2 = caretQueryOffset(editor);
     if (offset2 === void 0) return;
-    const before = readTokenSearchField(editor).query.length;
+    const before = readSearchField(editor).query.length;
     restoreDeletion(editor, {
       id,
       offset: (replacement) => {
         if (offset2 >= before) return void 0;
-        const after = readTokenSearchField(replacement).query.length;
+        const after = readSearchField(replacement).query.length;
         return Math.min(after, Math.max(0, offset2 - (before - after)));
       }
     });
@@ -400,27 +416,27 @@ function wireTokenSearchFields(root, {
     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")
+      if (manageFocus && editor.closest('[data-component="search-field"]')?.dataset.collapsible === "true")
         setExpanded(editorId, true);
     }
     const field = editor.closest(
-      '[data-component="token-search-field"]'
+      '[data-component="search-field"]'
     );
     if (field)
       field.dataset.placeholderVisible = String(
-        !editor.querySelector(TOKEN_SELECTOR) && readTokenSearchField(editor).query.length === 0
+        !editor.querySelector(TOKEN_SELECTOR) && readSearchField(editor).query.length === 0
       );
-    const id = field?.dataset.tokenSearchId;
+    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 = readTokenSearchField(editor, model.state.value.tokens);
+        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-token-search-editor]", true);
+          focusAfterRender(id, "[data-search-field-editor]", true);
       }
       if (onEdit) {
         if (!restore && !model && !deleting.has(id)) handOffAppEdit(editor, id);
@@ -477,13 +493,13 @@ function wireTokenSearchFields(root, {
     delegate(
       root,
       "click",
-      "[data-token-search-form-label]",
+      "[data-search-field-form-label]",
       (_event, label) => {
         const field = label.parentElement?.querySelector(
-          '[data-component="token-search-field"]'
+          '[data-component="search-field"]'
         );
         if (field?.dataset.disabled === "true") return;
-        field?.querySelector("[data-token-search-editor]")?.focus();
+        field?.querySelector("[data-search-field-editor]")?.focus();
       }
     )
   );
@@ -491,30 +507,28 @@ function wireTokenSearchFields(root, {
     delegate(
       root,
       "keydown",
-      "[data-token-search-editor]",
+      "[data-search-field-editor]",
       (event, element) => {
         const keyboardEvent = event;
         const editor = element;
         if (keyboardEvent.isComposing) return;
         const field = editor.closest(
-          '[data-component="token-search-field"]'
+          '[data-component="search-field"]'
         );
-        const id = field?.dataset.tokenSearchId;
+        const id = field?.dataset.searchFieldId;
         if (!id || field?.dataset.disabled === "true") return;
-        const keyboardForField = keyboard !== false || Boolean(models[id]);
+        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(
-              readTokenSearchField(editor, model.state.value.tokens)
-            );
+            model.submit(readSearchField(editor, model.state.value.tokens));
           onSubmit?.({ id, editor });
           return;
         }
         if (models[id] && keyboardEvent.key === "ArrowDown") {
           const first = field.querySelector(
-            "[data-token-search-suggestion]"
+            "[data-search-field-suggestion]"
           );
           if (first) {
             keyboardEvent.preventDefault();
@@ -561,19 +575,19 @@ function wireTokenSearchFields(root, {
       delegate(
         root,
         "keydown",
-        "[data-token-search-suggestion]",
+        "[data-search-field-suggestion]",
         (event, element) => {
           const keyboard2 = event;
           const button = element;
           const buttons = [
             ...button.parentElement.querySelectorAll(
-              "[data-token-search-suggestion]"
+              "[data-search-field-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();
+            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();
@@ -583,53 +597,53 @@ function wireTokenSearchFields(root, {
       delegate(
         root,
         "click",
-        "[data-token-search-suggestion]",
+        "[data-search-field-suggestion]",
         (_event, element) => {
           const field = element.closest(
-            '[data-component="token-search-field"]'
+            '[data-component="search-field"]'
           );
-          const id = field?.dataset.tokenSearchId;
-          const value = element.dataset.tokenSearchSuggestion;
+          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-token-search-editor]", true);
+          focusAfterRender(id, "[data-search-field-editor]", true);
         }
       ),
       delegate(
         root,
         "click",
-        ".kui-token-search__token-edit",
+        ".kui-search-field__token-edit",
         (_event, element) => {
           const field = element.closest(
-            '[data-component="token-search-field"]'
+            '[data-component="search-field"]'
           );
-          const id = field?.dataset.tokenSearchId;
+          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-token-search-editor]", true);
+          focusAfterRender(id, "[data-search-field-editor]", true);
         }
       ),
       delegate(
         root,
         "click",
-        ".kui-token-search__token-remove",
+        ".kui-search-field__token-remove",
         (_event, element) => {
           const field = element.closest(
-            '[data-component="token-search-field"]'
+            '[data-component="search-field"]'
           );
-          const id = field?.dataset.tokenSearchId;
+          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-token-search__clear", (_event, element) => {
+      delegate(root, "click", ".kui-search-field__clear", (_event, element) => {
         const field = element.closest(
-          '[data-component="token-search-field"]'
+          '[data-component="search-field"]'
         );
-        const id = field?.dataset.tokenSearchId;
+        const id = field?.dataset.searchFieldId;
         if (id && field?.dataset.disabled !== "true") models[id]?.clear();
       })
     );
@@ -639,12 +653,12 @@ function wireTokenSearchFields(root, {
       delegate(
         root,
         "click",
-        ".kui-token-search__expand",
+        ".kui-search-field__expand",
         (_event, element) => {
           const field = element.closest(
-            '[data-component="token-search-field"]'
+            '[data-component="search-field"]'
           );
-          const id = field?.dataset.tokenSearchId;
+          const id = field?.dataset.searchFieldId;
           if (id && field?.dataset.disabled !== "true") openField(id);
         }
       )
@@ -658,11 +672,9 @@ function wireTokenSearchFields(root, {
       delegateCapture(
         root,
         "pointerdown",
-        ".kui-token-search__clear",
+        ".kui-search-field__clear",
         (_event, element) => {
-          const field = element.closest(
-            '[data-component="token-search-field"]'
-          );
+          const field = element.closest('[data-component="search-field"]');
           focusAtClearPress.set(
             element,
             !!field?.contains(root.ownerDocument.activeElement)
@@ -672,12 +684,12 @@ function wireTokenSearchFields(root, {
       delegateCapture(
         root,
         "click",
-        ".kui-token-search__clear",
+        ".kui-search-field__clear",
         (_event, element) => {
           const field = element.closest(
-            '[data-component="token-search-field"]'
+            '[data-component="search-field"]'
           );
-          const id = field?.dataset.tokenSearchId;
+          const id = field?.dataset.searchFieldId;
           if (!id || field.dataset.collapsible !== "true" && !models[id] || field.dataset.disabled === "true")
             return;
           const editor = replacementEditor(root, id);
@@ -704,7 +716,7 @@ function wireTokenSearchFields(root, {
             if (!replacement || replacement === editor) return;
             stop();
             if (!focusedBefore) collapseIfEmpty();
-            else if (ownsFocus(replacement)) placeTokenSearchCaret(replacement);
+            else if (ownsFocus(replacement)) placeSearchFieldCaret(replacement);
           });
           observer.observe(root, { childList: true, subtree: true });
           const timeout = view().setTimeout(() => {
@@ -715,7 +727,7 @@ function wireTokenSearchFields(root, {
           if (!focusedBefore) return;
           if (field.dataset.collapsible === "true") setExpanded(id, true);
           const current = replacementEditor(root, id);
-          if (current && ownsFocus(current)) placeTokenSearchCaret(current);
+          if (current && ownsFocus(current)) placeSearchFieldCaret(current);
         }
       )
     );
@@ -767,7 +779,7 @@ function wireTokenSearchFields(root, {
       delegate(
         root,
         "mousedown",
-        '[data-component="token-search-field"][data-collapsible="true"] button',
+        '[data-component="search-field"][data-collapsible="true"] button',
         (event) => {
           event.preventDefault();
         }
@@ -777,13 +789,13 @@ function wireTokenSearchFields(root, {
       delegate(
         root,
         "focusout",
-        "[data-token-search-editor]",
+        "[data-search-field-editor]",
         (event, element) => {
           const editor = element;
           const field = editor.closest(
-            '[data-component="token-search-field"]'
+            '[data-component="search-field"]'
           );
-          const id = field?.dataset.tokenSearchId;
+          const id = field?.dataset.searchFieldId;
           if (!id || field?.dataset.collapsible !== "true" || field.dataset.disabled === "true")
             return;
           const relatedTarget = event.relatedTarget;
@@ -813,6 +825,7 @@ function wireTokenSearchFields(root, {
     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();
@@ -830,6 +843,6 @@ function wireTokenSearchFields(root, {
   return handle;
 }
 
-export { wireTokenSearchFields };
+export { wireSearchFields };
 
-//# sourceMappingURL=chunk-PKL6QJKK.js.map
+//# sourceMappingURL=chunk-UMNHJSIO.js.map