@zag-js/tags-input/dist/tags-input.connect.js

Core logic for the tags-input widget implemented as a state machine

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/tags-input.connect.ts
var tags_input_connect_exports = {};
__export(tags_input_connect_exports, {
  connect: () => connect
});
module.exports = __toCommonJS(tags_input_connect_exports);
var import_dom_query = require("@zag-js/dom-query");
var import_tags_input = require("./tags-input.anatomy.js");
var dom = __toESM(require("./tags-input.dom.js"));
function connect(service, normalize) {
  const { state, send, computed, prop, scope, context } = service;
  const interactive = computed("isInteractive");
  const disabled = !!prop("disabled");
  const readOnly = !!prop("readOnly");
  const required = !!prop("required");
  const invalid = prop("invalid") || computed("isOverflowing");
  const translations = prop("translations");
  const focused = state.hasTag("focused");
  const editingTag = state.matches("editing:tag");
  const empty = computed("count") === 0;
  function getItemState(options) {
    const id = dom.getItemId(scope, options);
    const editedTagId = context.get("editedTagId");
    const highlightedTagId = context.get("highlightedTagId");
    return {
      id,
      editing: editingTag && editedTagId === id,
      highlighted: id === highlightedTagId,
      disabled: Boolean(options.disabled || disabled)
    };
  }
  return {
    empty,
    inputValue: context.get("inputValue"),
    value: context.get("value"),
    valueAsString: computed("valueAsString"),
    count: computed("count"),
    atMax: computed("isAtMax"),
    setValue(value) {
      send({ type: "SET_VALUE", value });
    },
    clearValue(id) {
      if (id) {
        send({ type: "CLEAR_TAG", id });
      } else {
        send({ type: "CLEAR_VALUE" });
      }
    },
    addValue(value) {
      send({ type: "ADD_TAG", value });
    },
    setValueAtIndex(index, value) {
      send({ type: "SET_VALUE_AT_INDEX", index, value });
    },
    setInputValue(value) {
      send({ type: "SET_INPUT_VALUE", value });
    },
    clearInputValue() {
      send({ type: "SET_INPUT_VALUE", value: "" });
    },
    focus() {
      dom.getInputEl(scope)?.focus();
    },
    getItemState,
    getRootProps() {
      return normalize.element({
        dir: prop("dir"),
        ...import_tags_input.parts.root.attrs,
        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
        "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
        "data-focus": (0, import_dom_query.dataAttr)(focused),
        "data-empty": (0, import_dom_query.dataAttr)(empty),
        id: dom.getRootId(scope),
        onPointerDown() {
          if (!interactive) return;
          send({ type: "POINTER_DOWN" });
        }
      });
    },
    getLabelProps() {
      return normalize.label({
        ...import_tags_input.parts.label.attrs,
        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
        "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
        "data-required": (0, import_dom_query.dataAttr)(required),
        id: dom.getLabelId(scope),
        dir: prop("dir"),
        htmlFor: dom.getInputId(scope)
      });
    },
    getControlProps() {
      return normalize.element({
        id: dom.getControlId(scope),
        ...import_tags_input.parts.control.attrs,
        dir: prop("dir"),
        tabIndex: readOnly ? 0 : void 0,
        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
        "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
        "data-focus": (0, import_dom_query.dataAttr)(focused)
      });
    },
    getInputProps() {
      return normalize.input({
        ...import_tags_input.parts.input.attrs,
        dir: prop("dir"),
        "data-invalid": (0, import_dom_query.dataAttr)(invalid),
        "aria-invalid": (0, import_dom_query.ariaAttr)(invalid),
        "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
        "data-empty": (0, import_dom_query.dataAttr)(empty),
        maxLength: prop("maxLength"),
        id: dom.getInputId(scope),
        defaultValue: context.get("inputValue"),
        autoComplete: "off",
        autoCorrect: "off",
        autoCapitalize: "none",
        enterKeyHint: "done",
        disabled: disabled || readOnly,
        placeholder: empty ? prop("placeholder") : void 0,
        onInput(event) {
          const evt = (0, import_dom_query.getNativeEvent)(event);
          const value = event.currentTarget.value;
          if (evt.inputType === "insertFromPaste") {
            send({ type: "PASTE", value });
            return;
          }
          if (endsWith(value, prop("delimiter"))) {
            send({ type: "DELIMITER_KEY" });
            return;
          }
          send({ type: "TYPE", value, key: evt.inputType });
        },
        onFocus() {
          queueMicrotask(() => {
            send({ type: "FOCUS" });
          });
        },
        onKeyDown(event) {
          if (event.defaultPrevented) return;
          if ((0, import_dom_query.isComposingEvent)(event)) return;
          const target = event.currentTarget;
          const isCombobox = target.getAttribute("role") === "combobox";
          const isExpanded = target.ariaExpanded === "true";
          const keyMap = {
            ArrowDown() {
              send({ type: "ARROW_DOWN" });
            },
            ArrowLeft() {
              if (isCombobox && isExpanded) return;
              send({ type: "ARROW_LEFT" });
            },
            ArrowRight(event2) {
              if (context.get("highlightedTagId")) {
                event2.preventDefault();
              }
              if (isCombobox && isExpanded) return;
              send({ type: "ARROW_RIGHT" });
            },
            Escape(event2) {
              event2.preventDefault();
              send({ type: "ESCAPE" });
            },
            Backspace() {
              send({ type: "BACKSPACE" });
            },
            Delete() {
              send({ type: "DELETE" });
            },
            Enter(event2) {
              const hasHighlightedItem = target.getAttribute("aria-activedescendant");
              if (isCombobox && isExpanded && hasHighlightedItem) return;
              send({ type: "ENTER" });
              event2.preventDefault();
            }
          };
          const key = (0, import_dom_query.getEventKey)(event, { dir: prop("dir") });
          const exec = keyMap[key];
          if (exec) {
            exec(event);
            return;
          }
        }
      });
    },
    getHiddenInputProps() {
      return normalize.input({
        type: "text",
        hidden: true,
        name: prop("name"),
        form: prop("form"),
        disabled,
        readOnly,
        required: prop("required"),
        id: dom.getHiddenInputId(scope),
        defaultValue: computed("valueAsString")
      });
    },
    getItemProps(props) {
      return normalize.element({
        ...import_tags_input.parts.item.attrs,
        dir: prop("dir"),
        "data-value": props.value,
        "data-disabled": (0, import_dom_query.dataAttr)(disabled)
      });
    },
    getItemPreviewProps(props) {
      const itemState = getItemState(props);
      return normalize.element({
        ...import_tags_input.parts.itemPreview.attrs,
        id: itemState.id,
        dir: prop("dir"),
        hidden: itemState.editing,
        "data-value": props.value,
        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
        "data-highlighted": (0, import_dom_query.dataAttr)(itemState.highlighted),
        onPointerDown(event) {
          if (!interactive || itemState.disabled) return;
          if (!(0, import_dom_query.isLeftClick)(event)) return;
          event.preventDefault();
          send({ type: "POINTER_DOWN_TAG", id: itemState.id });
        },
        onDoubleClick() {
          if (!interactive || itemState.disabled) return;
          send({ type: "DOUBLE_CLICK_TAG", id: itemState.id });
        }
      });
    },
    getItemTextProps(props) {
      const itemState = getItemState(props);
      return normalize.element({
        ...import_tags_input.parts.itemText.attrs,
        dir: prop("dir"),
        "data-disabled": (0, import_dom_query.dataAttr)(disabled),
        "data-highlighted": (0, import_dom_query.dataAttr)(itemState.highlighted)
      });
    },
    getItemInputProps(props) {
      const itemState = getItemState(props);
      return normalize.input({
        ...import_tags_input.parts.itemInput.attrs,
        dir: prop("dir"),
        "aria-label": translations?.tagEdited?.(props.value),
        disabled,
        id: dom.getItemInputId(scope, props),
        tabIndex: -1,
        hidden: !itemState.editing,
        maxLength: prop("maxLength"),
        defaultValue: itemState.editing ? context.get("editedTagValue") : "",
        onInput(event) {
          send({ type: "TAG_INPUT_TYPE", value: event.currentTarget.value });
        },
        onBlur(event) {
          queueMicrotask(() => {
            send({ type: "TAG_INPUT_BLUR", target: event.relatedTarget, id: itemState.id });
          });
        },
        onKeyDown(event) {
          if (event.defaultPrevented) return;
          if ((0, import_dom_query.isComposingEvent)(event)) return;
          const keyMap = {
            Enter() {
              send({ type: "TAG_INPUT_ENTER" });
            },
            Escape() {
              send({ type: "TAG_INPUT_ESCAPE" });
            }
          };
          const exec = keyMap[event.key];
          if (exec) {
            event.preventDefault();
            exec(event);
          }
        }
      });
    },
    getItemDeleteTriggerProps(props) {
      const itemState = getItemState(props);
      return normalize.button({
        ...import_tags_input.parts.itemDeleteTrigger.attrs,
        dir: prop("dir"),
        "data-disabled": (0, import_dom_query.dataAttr)(itemState.disabled),
        "aria-disabled": itemState.disabled,
        "data-highlighted": (0, import_dom_query.dataAttr)(itemState.highlighted),
        id: dom.getItemDeleteTriggerId(scope, props),
        type: "button",
        disabled: itemState.disabled,
        "aria-label": translations?.deleteTagTriggerLabel?.(props.value),
        tabIndex: -1,
        onPointerDown(event) {
          if (!(0, import_dom_query.isLeftClick)(event)) return;
          if (!interactive) {
            event.preventDefault();
          }
        },
        onPointerMove(event) {
          if (!interactive) return;
          dom.setHoverIntent(event.currentTarget);
        },
        onPointerLeave(event) {
          if (!interactive) return;
          dom.clearHoverIntent(event.currentTarget);
        },
        onClick(event) {
          if (event.defaultPrevented) return;
          if (!interactive) return;
          send({ type: "CLICK_DELETE_TAG", id: itemState.id });
        }
      });
    },
    getClearTriggerProps() {
      return normalize.button({
        ...import_tags_input.parts.clearTrigger.attrs,
        dir: prop("dir"),
        id: dom.getClearTriggerId(scope),
        type: "button",
        "data-readonly": (0, import_dom_query.dataAttr)(readOnly),
        disabled,
        "aria-label": translations?.clearTriggerLabel,
        hidden: empty,
        onClick() {
          if (!interactive) return;
          send({ type: "CLEAR_VALUE" });
        }
      });
    }
  };
}
function endsWith(str, del) {
  if (!del) return false;
  if (typeof del === "string") return str.endsWith(del);
  return new RegExp(`${del.source}$`).test(str);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  connect
});