@manafishrov/ui 1.2.5 → 1.2.7

package/dist/node_modules/.bun/@zag-js_tags-input@1.35.3/node_modules/@zag-js/tags-input/dist/tags-input.machine.js

@@ -0,0 +1,629 @@
+import { trackInteractOutside as A } from "../../../../../@zag-js_interact-outside@1.35.3/node_modules/@zag-js/interact-outside/dist/index.js";
+import { createLiveRegion as L } from "../../../../../@zag-js_live-region@1.35.3/node_modules/@zag-js/live-region/dist/index.js";
+import { getIndexOfId as o, getEditInputEl as I, getInputEl as c, getTagElAtIndex as O, getPrevEl as R, getLastEl as P, getFirstEl as _, getNextEl as y, dispatchInputEvent as C, getTagInputEl as S, getHiddenInputEl as H, getItemId as v, getItemEls as D } from "./tags-input.dom.js";
+import { isCaretAtStart as N } from "../../../../../@zag-js_dom-query@1.35.3/node_modules/@zag-js/dom-query/dist/caret.js";
+import { uniq as p, removeAt as E } from "../../../../../@zag-js_utils@1.35.3/node_modules/@zag-js/utils/dist/array.js";
+import { autoResizeInput as x } from "../../../../../@zag-js_auto-resize@1.35.3/node_modules/@zag-js/auto-resize/dist/autoresize-input.js";
+import { createMachine as F, createGuards as U } from "../../../../../@zag-js_core@1.35.3/node_modules/@zag-js/core/dist/create-machine.js";
+import { raf as r } from "../../../../../@zag-js_dom-query@1.35.3/node_modules/@zag-js/dom-query/dist/raf.js";
+import { setElementValue as f, trackFormControl as B } from "../../../../../@zag-js_dom-query@1.35.3/node_modules/@zag-js/dom-query/dist/form.js";
+import { warn as w } from "../../../../../@zag-js_utils@1.35.3/node_modules/@zag-js/utils/dist/warning.js";
+import { isEqual as k } from "../../../../../@zag-js_utils@1.35.3/node_modules/@zag-js/utils/dist/equal.js";
+import { contains as G } from "../../../../../@zag-js_dom-query@1.35.3/node_modules/@zag-js/dom-query/dist/node.js";
+var { and: h, not: s, or: b } = U(), ee = F({
+  props({ props: e }) {
+    return {
+      dir: "ltr",
+      addOnPaste: !1,
+      editable: !0,
+      validate: () => !0,
+      delimiter: ",",
+      defaultValue: [],
+      defaultInputValue: "",
+      max: 1 / 0,
+      ...e,
+      translations: {
+        clearTriggerLabel: "Clear all tags",
+        deleteTagTriggerLabel: (t) => `Delete tag ${t}`,
+        tagAdded: (t) => `Added tag ${t}`,
+        tagsPasted: (t) => `Pasted ${t.length} tags`,
+        tagEdited: (t) => `Editing tag ${t}. Press enter to save or escape to cancel.`,
+        tagUpdated: (t) => `Tag update to ${t}`,
+        tagDeleted: (t) => `Tag ${t} deleted`,
+        tagSelected: (t) => `Tag ${t} selected. Press enter to edit, delete or backspace to remove.`,
+        ...e.translations
+      }
+    };
+  },
+  initialState({ prop: e }) {
+    return e("autoFocus") ? "focused:input" : "idle";
+  },
+  refs() {
+    return {
+      liveRegion: null,
+      log: { current: null, prev: null }
+    };
+  },
+  context({ bindable: e, prop: t }) {
+    return {
+      value: e(() => ({
+        defaultValue: t("defaultValue"),
+        value: t("value"),
+        isEqual: k,
+        hash(a) {
+          return a.join(", ");
+        },
+        onChange(a) {
+          t("onValueChange")?.({ value: a });
+        }
+      })),
+      inputValue: e(() => ({
+        sync: !0,
+        defaultValue: t("defaultInputValue"),
+        value: t("inputValue"),
+        onChange(a) {
+          t("onInputValueChange")?.({ inputValue: a });
+        }
+      })),
+      fieldsetDisabled: e(() => ({ defaultValue: !1 })),
+      editedTagValue: e(() => ({ defaultValue: "" })),
+      editedTagId: e(() => ({ defaultValue: null })),
+      editedTagIndex: e(() => ({
+        defaultValue: null,
+        sync: !0
+      })),
+      highlightedTagId: e(() => ({
+        defaultValue: null,
+        sync: !0,
+        onChange(a) {
+          t("onHighlightChange")?.({ highlightedValue: a });
+        }
+      }))
+    };
+  },
+  computed: {
+    count: ({ context: e }) => e.get("value").length,
+    valueAsString: ({ context: e }) => e.hash("value"),
+    trimmedInputValue: ({ context: e }) => e.get("inputValue").trim(),
+    isDisabled: ({ prop: e }) => !!e("disabled"),
+    isInteractive: ({ prop: e }) => !(e("readOnly") || e("disabled")),
+    isAtMax: ({ context: e, prop: t }) => e.get("value").length === t("max"),
+    isOverflowing: ({ context: e, prop: t }) => e.get("value").length > t("max")
+  },
+  watch({ track: e, context: t, action: a, computed: g, refs: i }) {
+    e([() => t.get("editedTagValue")], () => {
+      a(["syncEditedTagInputValue"]);
+    }), e([() => t.get("inputValue")], () => {
+      a(["syncInputValue"]);
+    }), e([() => t.get("highlightedTagId")], () => {
+      a(["logHighlightedTag"]);
+    }), e([() => g("isOverflowing")], () => {
+      a(["invokeOnInvalid"]);
+    }), e([() => JSON.stringify(i.get("log"))], () => {
+      a(["announceLog"]);
+    });
+  },
+  effects: ["trackLiveRegion", "trackFormControlState"],
+  exit: ["clearLog"],
+  on: {
+    DOUBLE_CLICK_TAG: {
+      // internal: true,
+      guard: "isTagEditable",
+      target: "editing:tag",
+      actions: ["setEditedId"]
+    },
+    POINTER_DOWN_TAG: {
+      // internal: true,
+      target: "navigating:tag",
+      actions: ["highlightTag", "focusInput"]
+    },
+    CLICK_DELETE_TAG: {
+      target: "focused:input",
+      actions: ["deleteTag"]
+    },
+    SET_INPUT_VALUE: {
+      actions: ["setInputValue"]
+    },
+    SET_VALUE: {
+      actions: ["setValue"]
+    },
+    CLEAR_TAG: {
+      actions: ["deleteTag"]
+    },
+    SET_VALUE_AT_INDEX: {
+      actions: ["setValueAtIndex"]
+    },
+    CLEAR_VALUE: {
+      actions: ["clearTags", "clearInputValue", "focusInput"]
+    },
+    ADD_TAG: {
+      actions: ["addTag"]
+    },
+    INSERT_TAG: {
+      // (!isAtMax || allowOverflow) && !inputValueIsEmpty
+      guard: h(b(s("isAtMax"), "allowOverflow"), s("isInputValueEmpty")),
+      actions: ["addTag", "clearInputValue"]
+    },
+    EXTERNAL_BLUR: [
+      { guard: "addOnBlur", actions: ["raiseInsertTagEvent"] },
+      { guard: "clearOnBlur", actions: ["clearInputValue"] }
+    ]
+  },
+  states: {
+    idle: {
+      on: {
+        FOCUS: {
+          target: "focused:input"
+        },
+        POINTER_DOWN: {
+          guard: s("hasHighlightedTag"),
+          target: "focused:input"
+        }
+      }
+    },
+    "focused:input": {
+      tags: ["focused"],
+      entry: ["focusInput", "clearHighlightedId"],
+      effects: ["trackInteractOutside"],
+      on: {
+        TYPE: {
+          actions: ["setInputValue"]
+        },
+        BLUR: [
+          {
+            guard: "addOnBlur",
+            target: "idle",
+            actions: ["raiseInsertTagEvent"]
+          },
+          {
+            guard: "clearOnBlur",
+            target: "idle",
+            actions: ["clearInputValue"]
+          },
+          { target: "idle" }
+        ],
+        ENTER: {
+          actions: ["raiseInsertTagEvent"]
+        },
+        DELIMITER_KEY: {
+          actions: ["raiseInsertTagEvent"]
+        },
+        ARROW_LEFT: {
+          guard: h("hasTags", "isCaretAtStart"),
+          target: "navigating:tag",
+          actions: ["highlightLastTag"]
+        },
+        BACKSPACE: {
+          target: "navigating:tag",
+          guard: h("hasTags", "isCaretAtStart"),
+          actions: ["highlightLastTag"]
+        },
+        DELETE: {
+          guard: "hasHighlightedTag",
+          actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+        },
+        PASTE: [
+          {
+            guard: "addOnPaste",
+            actions: ["setInputValue", "addTagFromPaste"]
+          },
+          {
+            actions: ["setInputValue"]
+          }
+        ]
+      }
+    },
+    "navigating:tag": {
+      tags: ["focused"],
+      effects: ["trackInteractOutside"],
+      on: {
+        ARROW_RIGHT: [
+          {
+            guard: h("hasTags", "isCaretAtStart", s("isLastTagHighlighted")),
+            actions: ["highlightNextTag"]
+          },
+          { target: "focused:input" }
+        ],
+        ARROW_LEFT: [
+          {
+            guard: s("isCaretAtStart"),
+            target: "focused:input"
+          },
+          {
+            actions: ["highlightPrevTag"]
+          }
+        ],
+        BLUR: {
+          target: "idle",
+          actions: ["clearHighlightedId"]
+        },
+        ENTER: {
+          guard: h("isTagEditable", "hasHighlightedTag"),
+          target: "editing:tag",
+          actions: ["setEditedId", "focusEditedTagInput"]
+        },
+        ARROW_DOWN: {
+          target: "focused:input"
+        },
+        ESCAPE: {
+          target: "focused:input"
+        },
+        TYPE: {
+          target: "focused:input",
+          actions: ["setInputValue"]
+        },
+        BACKSPACE: [
+          {
+            guard: s("isCaretAtStart"),
+            target: "focused:input"
+          },
+          {
+            guard: "isFirstTagHighlighted",
+            actions: ["deleteHighlightedTag", "highlightFirstTag"]
+          },
+          {
+            guard: "hasHighlightedTag",
+            actions: ["deleteHighlightedTag", "highlightPrevTag"]
+          },
+          {
+            actions: ["highlightLastTag"]
+          }
+        ],
+        DELETE: [
+          {
+            guard: s("isCaretAtStart"),
+            target: "focused:input"
+          },
+          {
+            target: "focused:input",
+            actions: ["deleteHighlightedTag", "highlightTagAtIndex"]
+          }
+        ],
+        PASTE: [
+          {
+            guard: "addOnPaste",
+            target: "focused:input",
+            actions: ["setInputValue", "addTagFromPaste"]
+          },
+          {
+            target: "focused:input",
+            actions: ["setInputValue"]
+          }
+        ]
+      }
+    },
+    "editing:tag": {
+      tags: ["editing", "focused"],
+      entry: ["focusEditedTagInput"],
+      effects: ["autoResize"],
+      on: {
+        TAG_INPUT_TYPE: {
+          actions: ["setEditedTagValue"]
+        },
+        TAG_INPUT_ESCAPE: {
+          target: "navigating:tag",
+          actions: ["clearEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
+        },
+        TAG_INPUT_BLUR: [
+          {
+            guard: "isInputRelatedTarget",
+            target: "navigating:tag",
+            actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId"]
+          },
+          {
+            target: "idle",
+            actions: ["clearEditedTagValue", "clearHighlightedId", "clearEditedId", "raiseExternalBlurEvent"]
+          }
+        ],
+        TAG_INPUT_ENTER: [
+          {
+            guard: "isEditedTagEmpty",
+            target: "navigating:tag",
+            actions: ["deleteHighlightedTag", "focusInput", "clearEditedId", "highlightTagAtIndex"]
+          },
+          {
+            target: "navigating:tag",
+            actions: ["submitEditedTagValue", "focusInput", "clearEditedId", "highlightTagAtIndex"]
+          }
+        ]
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      isInputRelatedTarget: ({ scope: e, event: t }) => t.relatedTarget === c(e),
+      isAtMax: ({ computed: e }) => e("isAtMax"),
+      hasHighlightedTag: ({ context: e }) => e.get("highlightedTagId") != null,
+      isFirstTagHighlighted: ({ context: e, scope: t }) => {
+        const a = e.get("value");
+        return v(t, { value: a[0], index: 0 }) === e.get("highlightedTagId");
+      },
+      isEditedTagEmpty: ({ context: e }) => e.get("editedTagValue").trim() === "",
+      isLastTagHighlighted: ({ context: e, scope: t }) => {
+        const a = e.get("value"), g = a.length - 1;
+        return v(t, { value: a[g], index: g }) === e.get("highlightedTagId");
+      },
+      isInputValueEmpty: ({ context: e }) => e.get("inputValue").trim().length === 0,
+      hasTags: ({ context: e }) => e.get("value").length > 0,
+      allowOverflow: ({ prop: e }) => !!e("allowOverflow"),
+      autoFocus: ({ prop: e }) => !!e("autoFocus"),
+      addOnBlur: ({ prop: e }) => e("blurBehavior") === "add",
+      clearOnBlur: ({ prop: e }) => e("blurBehavior") === "clear",
+      addOnPaste: ({ prop: e }) => !!e("addOnPaste"),
+      isTagEditable: ({ prop: e }) => !!e("editable"),
+      isCaretAtStart: ({ scope: e }) => N(c(e))
+    },
+    effects: {
+      trackInteractOutside({ scope: e, prop: t, send: a }) {
+        return A(c(e), {
+          exclude(g) {
+            return D(e).some((l) => G(l, g));
+          },
+          onFocusOutside: t("onFocusOutside"),
+          onPointerDownOutside: t("onPointerDownOutside"),
+          onInteractOutside(g) {
+            t("onInteractOutside")?.(g), !g.defaultPrevented && a({ type: "BLUR", src: "interact-outside" });
+          }
+        });
+      },
+      trackFormControlState({ context: e, send: t, scope: a }) {
+        return B(H(a), {
+          onFieldsetDisabledChange(g) {
+            e.set("fieldsetDisabled", g);
+          },
+          onFormReset() {
+            const g = e.initial("value");
+            t({ type: "SET_VALUE", value: g, src: "form-reset" });
+          }
+        });
+      },
+      autoResize({ context: e, prop: t, scope: a }) {
+        let g;
+        return queueMicrotask(() => {
+          const i = e.get("editedTagValue"), l = e.get("editedTagIndex");
+          if (!i || l == null || !t("editable")) return;
+          const d = S(a, {
+            value: i,
+            index: l
+          });
+          g = x(d);
+        }), () => {
+          g?.();
+        };
+      },
+      trackLiveRegion({ scope: e, refs: t }) {
+        const a = L({
+          level: "assertive",
+          document: e.getDoc()
+        });
+        return t.set("liveRegion", a), () => a.destroy();
+      }
+    },
+    actions: {
+      raiseInsertTagEvent({ send: e }) {
+        e({ type: "INSERT_TAG" });
+      },
+      raiseExternalBlurEvent({ send: e, event: t }) {
+        e({ type: "EXTERNAL_BLUR", id: t.id });
+      },
+      dispatchChangeEvent({ scope: e, computed: t }) {
+        C(e, t("valueAsString"));
+      },
+      highlightNextTag({ context: e, scope: t }) {
+        const a = e.get("highlightedTagId");
+        if (a == null) return;
+        const g = y(t, a);
+        e.set("highlightedTagId", g?.id ?? null);
+      },
+      highlightFirstTag({ context: e, scope: t }) {
+        r(() => {
+          const a = _(t);
+          e.set("highlightedTagId", a?.id ?? null);
+        });
+      },
+      highlightLastTag({ context: e, scope: t }) {
+        const a = P(t);
+        e.set("highlightedTagId", a?.id ?? null);
+      },
+      highlightPrevTag({ context: e, scope: t }) {
+        const a = e.get("highlightedTagId");
+        if (a == null) return;
+        const g = R(t, a);
+        e.set("highlightedTagId", g?.id ?? null);
+      },
+      highlightTag({ context: e, event: t }) {
+        e.set("highlightedTagId", t.id);
+      },
+      highlightTagAtIndex({ context: e, scope: t }) {
+        r(() => {
+          const a = e.get("editedTagIndex");
+          if (a == null) return;
+          const g = O(t, a);
+          g != null && (e.set("highlightedTagId", g.id), e.set("editedTagIndex", null));
+        });
+      },
+      deleteTag({ context: e, scope: t, event: a, refs: g }) {
+        const i = o(t, a.id), l = e.get("value")[i], d = g.get("log");
+        g.set("log", {
+          prev: d.current,
+          current: { type: "delete", value: l }
+        }), e.set("value", (n) => E(n, i));
+      },
+      deleteHighlightedTag({ context: e, scope: t, refs: a }) {
+        const g = e.get("highlightedTagId");
+        if (g == null) return;
+        const i = o(t, g);
+        e.set("editedTagIndex", i);
+        const l = e.get("value"), d = a.get("log");
+        a.set("log", {
+          prev: d.current,
+          current: { type: "delete", value: l[i] }
+        }), e.set("value", (n) => E(n, i));
+      },
+      setEditedId({ context: e, event: t, scope: a }) {
+        const g = e.get("highlightedTagId"), i = t.id ?? g;
+        e.set("editedTagId", i);
+        const l = o(a, i), d = e.get("value")[l];
+        e.set("editedTagIndex", l), e.set("editedTagValue", d);
+      },
+      clearEditedId({ context: e }) {
+        e.set("editedTagId", null);
+      },
+      clearEditedTagValue({ context: e }) {
+        e.set("editedTagValue", "");
+      },
+      setEditedTagValue({ context: e, event: t }) {
+        e.set("editedTagValue", t.value);
+      },
+      submitEditedTagValue({ context: e, scope: t, refs: a }) {
+        const g = e.get("editedTagId");
+        if (!g) return;
+        const i = o(t, g);
+        e.set("value", (d) => {
+          const n = d.slice();
+          return n[i] = e.get("editedTagValue"), n;
+        });
+        const l = a.get("log");
+        a.set("log", {
+          prev: l.current,
+          current: { type: "update", value: e.get("editedTagValue") }
+        });
+      },
+      setValueAtIndex({ context: e, event: t, refs: a }) {
+        if (t.value) {
+          e.set("value", (i) => {
+            const l = i.slice();
+            return l[t.index] = t.value, l;
+          });
+          const g = a.get("log");
+          a.set("log", {
+            prev: g.current,
+            current: { type: "update", value: t.value }
+          });
+        } else
+          w("You need to provide a value for the tag");
+      },
+      focusEditedTagInput({ context: e, scope: t }) {
+        r(() => {
+          const a = e.get("editedTagId");
+          if (!a) return;
+          I(t, a)?.select();
+        });
+      },
+      setInputValue({ context: e, event: t }) {
+        e.set("inputValue", t.value);
+      },
+      clearHighlightedId({ context: e }) {
+        e.set("highlightedTagId", null);
+      },
+      focusInput({ scope: e }) {
+        r(() => {
+          c(e)?.focus();
+        });
+      },
+      clearInputValue({ context: e }) {
+        r(() => {
+          e.set("inputValue", "");
+        });
+      },
+      syncInputValue({ context: e, scope: t }) {
+        const a = c(t);
+        a && f(a, e.get("inputValue"));
+      },
+      syncEditedTagInputValue({ context: e, event: t, scope: a }) {
+        const g = e.get("editedTagId") || e.get("highlightedTagId") || t.id;
+        if (g == null) return;
+        const i = I(a, g);
+        i && f(i, e.get("editedTagValue"));
+      },
+      addTag({ context: e, event: t, computed: a, prop: g, refs: i }) {
+        const l = t.value ?? a("trimmedInputValue"), d = e.get("value");
+        if (g("validate")?.({ inputValue: l, value: Array.from(d) })) {
+          const u = p(d.concat(l));
+          e.set("value", u);
+          const T = i.get("log");
+          i.set("log", {
+            prev: T.current,
+            current: { type: "add", value: l }
+          });
+        } else
+          g("onValueInvalid")?.({ reason: "invalidTag" });
+      },
+      addTagFromPaste({ context: e, computed: t, prop: a, refs: g }) {
+        r(() => {
+          const i = t("trimmedInputValue"), l = e.get("value");
+          if (a("validate")?.({
+            inputValue: i,
+            value: Array.from(l)
+          })) {
+            const n = a("delimiter"), u = n ? i.split(n).map((m) => m.trim()) : [i], T = p(l.concat(...u));
+            e.set("value", T);
+            const V = g.get("log");
+            g.set("log", {
+              prev: V.current,
+              current: { type: "paste", values: u }
+            });
+          } else
+            a("onValueInvalid")?.({ reason: "invalidTag" });
+          e.set("inputValue", "");
+        });
+      },
+      clearTags({ context: e, refs: t }) {
+        e.set("value", []);
+        const a = t.get("log");
+        t.set("log", {
+          prev: a.current,
+          current: { type: "clear" }
+        });
+      },
+      setValue({ context: e, event: t }) {
+        e.set("value", t.value);
+      },
+      invokeOnInvalid({ prop: e, computed: t }) {
+        t("isOverflowing") && e("onValueInvalid")?.({ reason: "rangeOverflow" });
+      },
+      clearLog({ refs: e }) {
+        const t = e.get("log");
+        t.prev = t.current = null;
+      },
+      logHighlightedTag({ refs: e, context: t, scope: a }) {
+        const g = t.get("highlightedTagId"), i = e.get("log");
+        if (g == null || !i.current) return;
+        const l = o(a, g), d = t.get("value")[l], n = e.get("log");
+        e.set("log", {
+          prev: n.current,
+          current: { type: "select", value: d }
+        });
+      },
+      // queue logs with screen reader and get it announced
+      announceLog({ refs: e, prop: t }) {
+        const a = e.get("liveRegion"), g = t("translations"), i = e.get("log");
+        if (!i.current || a == null) return;
+        const l = a, { current: d, prev: n } = i;
+        let u;
+        switch (d.type) {
+          case "add":
+            u = g.tagAdded(d.value);
+            break;
+          case "delete":
+            u = g.tagDeleted(d.value);
+            break;
+          case "update":
+            u = g.tagUpdated(d.value);
+            break;
+          case "paste":
+            u = g.tagsPasted(d.values);
+            break;
+          case "select":
+            u = g.tagSelected(d.value), n?.type === "delete" ? u = `${g.tagDeleted(n.value)}. ${u}` : n?.type === "update" && (u = `${g.tagUpdated(n.value)}. ${u}`);
+            break;
+        }
+        u && l.announce(u);
+      }
+    }
+  }
+});
+export {
+  ee as machine
+};
+//# sourceMappingURL=tags-input.machine.js.map