react-input-chips/dist/index.js

A package with minimum dependencies and maximum customization.

// src/components/InputChip.tsx
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var InputChips = ({
  chips,
  setChips,
  inputValue,
  setInputValue,
  keysToTriggerChipConversion = ["Enter", "Comma"],
  validate,
  disabled = false,
  placeholder,
  nextPlaceholder,
  removeBtnSvg,
  chipStyles,
  containerStyles,
  backspaceToRemoveChip = false,
  errorMsg
}) => {
  const handleInputChange = (e) => {
    const value = e.target.value;
    if (keysToTriggerChipConversion.includes("Space")) {
      setInputValue(value.trim());
    } else {
      setInputValue(value);
    }
  };
  const handleInputKeyDown = (e) => {
    if (backspaceToRemoveChip && e.key === "Backspace" && inputValue.trim() === "") {
      setChips((prevState) => {
        const updatedChips = [...prevState];
        updatedChips.pop();
        return updatedChips;
      });
    }
    const isKeyAllowed = (key) => {
      return keysToTriggerChipConversion.includes(
        key
      );
    };
    if (isKeyAllowed(e.code) && (!validate || validate())) {
      let chip = inputValue.trim();
      if (keysToTriggerChipConversion.some((key) => key.length === 1)) {
        const regex = new RegExp(
          `[${keysToTriggerChipConversion.filter((key) => key.length === 1).map(
            (key) => key.replace(/[-/\\^$*+?.()|[\]{}]/g, "\\$&")
          ).join("")}]`,
          "g"
        );
        chip = chip.replace(regex, "");
      }
      if (chip) {
        setChips([...chips, chip]);
        setInputValue("");
      }
      e.preventDefault();
    }
  };
  const removeChip = (e, chipToRemove) => {
    e.preventDefault();
    const filteredChips = chips.filter(
      (chip, index) => chip + index !== chipToRemove
    );
    setChips(filteredChips);
  };
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      "section",
      {
        className: errorMsg?.length ? "chip-input-wrapper chip-input-wrapper-error" : "chip-input-wrapper",
        style: containerStyles ?? {},
        children: [
          chips.map((chip, index) => /* @__PURE__ */ jsxs(
            "div",
            {
              "data-testid": `input-value-chip-${index}`,
              className: "chip",
              style: chipStyles ?? {},
              children: [
                chip,
                /* @__PURE__ */ jsx(
                  "button",
                  {
                    type: "button",
                    className: "closeBtn",
                    "data-testid": `remove-chip-btn-${index}`,
                    onClick: (e) => removeChip(e, chip + index),
                    children: removeBtnSvg || /* @__PURE__ */ jsxs(
                      "svg",
                      {
                        stroke: "currentColor",
                        fill: "currentColor",
                        strokeWidth: "0",
                        viewBox: "0 0 24 24",
                        height: 15,
                        children: [
                          /* @__PURE__ */ jsx("path", { fill: "none", d: "M0 0h24v24H0z" }),
                          /* @__PURE__ */ jsx("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
                        ]
                      }
                    )
                  }
                )
              ]
            },
            chip + index
          )),
          /* @__PURE__ */ jsx(
            "input",
            {
              className: "chip-input",
              type: "text",
              placeholder: disabled ? "" : chips.length ? nextPlaceholder : placeholder,
              value: inputValue,
              onChange: handleInputChange,
              onKeyDown: handleInputKeyDown,
              disabled
            }
          )
        ]
      }
    ),
    errorMsg?.length && /* @__PURE__ */ jsx("p", { className: "error-msg-wrapper", children: errorMsg })
  ] });
};
var InputChip_default = InputChips;
export {
  InputChip_default as InputChips
};
//# sourceMappingURL=index.js.map