lecom-ui 5.3.85 → 5.3.86

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -0,0 +1,714 @@
+import * as React from 'react';
+import { GripVertical, X } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+import { Tag } from '../Tag/Tag.js';
+import { textareaVariants } from '../Textarea/Textarea.js';
+import { Typography } from '../Typography/Typography.js';
+
+const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
+  item,
+  index,
+  onRemove,
+  onEdit,
+  readOnly,
+  enableReorder,
+  onDragStart,
+  onDragOver,
+  onDrag,
+  onDragEnd,
+  isDragging,
+  onMouseDown
+}) {
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [editValue, setEditValue] = React.useState(item.label);
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [isEditing]);
+  const handleClick = React.useCallback(() => {
+    if (!readOnly) {
+      setIsEditing(true);
+      setEditValue(item.label);
+    }
+  }, [readOnly, item.label]);
+  const handleRemove = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onRemove(item.id);
+    },
+    [item.id, onRemove]
+  );
+  const handleSave = React.useCallback(() => {
+    const trimmedValue = editValue.trim();
+    if (trimmedValue && trimmedValue !== item.label) {
+      onEdit(item.id, trimmedValue);
+    }
+    setIsEditing(false);
+  }, [editValue, item.id, item.label, onEdit]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSave();
+      } else if (e.key === "Escape") {
+        setIsEditing(false);
+        setEditValue(item.label);
+      }
+    },
+    [handleSave, item.label]
+  );
+  const handleBlur = React.useCallback(() => {
+    handleSave();
+  }, [handleSave]);
+  const handleDragStart = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      onDragStart(index);
+    },
+    [index, onDragStart]
+  );
+  const handleDragOver = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDragOver(index);
+    },
+    [index, onDragOver]
+  );
+  if (isEditing) {
+    return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "px-2 py-0 max-w-[15.625rem]" }, /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: editValue,
+        onChange: (e) => setEditValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        className: "bg-transparent border-none outline-none text-blue-700 body-small-400 min-w-[60px] w-full",
+        onClick: (e) => e.stopPropagation(),
+        style: { width: `${Math.min(Math.max(editValue.length * 8, 60), 250)}px` }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React.createElement(
+    Tag,
+    {
+      "data-tag": "true",
+      color: "blue",
+      className: cn(
+        "cursor-pointer group max-w-[15.625rem]",
+        isDragging && "opacity-30 scale-95 transition-all",
+        enableReorder && "cursor-grab active:cursor-grabbing"
+      ),
+      draggable: enableReorder && !readOnly,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDrag,
+      onDragEnd,
+      onMouseDown
+    },
+    enableReorder && !readOnly && /* @__PURE__ */ React.createElement(
+      GripVertical,
+      {
+        className: "w-4 h-4 opacity-100 transition-all cursor-grab flex-shrink-0 stroke-blue-600 fill-none hover:stroke-blue-800 hover:scale-110",
+        onMouseDown: (e) => e.stopPropagation(),
+        strokeWidth: 2
+      }
+    ),
+    /* @__PURE__ */ React.createElement(
+      Typography,
+      {
+        variant: "body-small-400",
+        className: "truncate flex-1 min-w-0",
+        textColor: "text-blue-700",
+        onClick: handleClick
+      },
+      item.label
+    ),
+    !readOnly && /* @__PURE__ */ React.createElement(
+      X,
+      {
+        className: "w-4 h-4 cursor-pointer flex-shrink-0 stroke-blue-600 stroke-2 outline-none hover:stroke-blue-800 hover:scale-110 transition-all",
+        onClick: handleRemove,
+        "aria-label": `Remover ${item.label}`,
+        tabIndex: 0
+      }
+    )
+  );
+});
+const TagItemWrapper = React.memo(function TagItemWrapper2({
+  item,
+  index,
+  insertAtIndex,
+  draggedIndex,
+  dragOverIndex,
+  readOnly,
+  enableReorder,
+  inlinePlaceholder,
+  onRemove,
+  onEdit,
+  onDragStart,
+  onDragOver,
+  onDrag,
+  onDragEnd,
+  onInlineAdd,
+  onInlineCancel,
+  onSpacerClick,
+  onMouseDown
+}) {
+  const showInlineInput = insertAtIndex === index;
+  const showDragIndicator = dragOverIndex === index && draggedIndex !== null && draggedIndex !== index;
+  const showSpacer = !readOnly && insertAtIndex !== index + 1;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, showInlineInput && /* @__PURE__ */ React.createElement(
+    InlineInput,
+    {
+      onAdd: onInlineAdd,
+      onCancel: onInlineCancel,
+      placeholder: inlinePlaceholder
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-0.5 relative" }, /* @__PURE__ */ React.createElement(
+    CustomTagItemComponent,
+    {
+      item,
+      index,
+      onRemove,
+      onEdit,
+      readOnly,
+      enableReorder,
+      onDragStart,
+      onDragOver,
+      onDrag,
+      onDragEnd,
+      isDragging: draggedIndex === index,
+      onMouseDown
+    }
+  ), showDragIndicator && /* @__PURE__ */ React.createElement("div", { className: "w-1 h-6 bg-blue-500 rounded-full animate-pulse self-center" }), showSpacer && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "w-1 h-6 hover:bg-blue-200 rounded cursor-pointer transition-colors self-center",
+      onClick: (e) => {
+        e.stopPropagation();
+        onSpacerClick(index + 1);
+      },
+      "data-inline-input": "true"
+    }
+  )));
+});
+const InlineInput = React.memo(function InlineInput2({ onAdd, onCancel, placeholder }) {
+  const [value, setValue] = React.useState("");
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === ";") {
+        e.preventDefault();
+        const trimmed = value.trim();
+        if (trimmed) {
+          onAdd(trimmed);
+          setValue("");
+        }
+      } else if (e.key === "Escape") {
+        onCancel();
+      }
+    },
+    [value, onAdd, onCancel]
+  );
+  const handleBlur = React.useCallback(() => {
+    const trimmed = value.trim();
+    if (trimmed) {
+      onAdd(trimmed);
+    } else {
+      onCancel();
+    }
+  }, [value, onAdd, onCancel]);
+  return /* @__PURE__ */ React.createElement(Tag, { "data-tag": "true", color: "blue", className: "px-2 py-0 max-w-[15.625rem]", "data-inline-input": "true" }, /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      placeholder,
+      className: "bg-transparent border-none outline-none text-blue-700 body-small-400 min-w-[3.75rem] w-full px-1",
+      onClick: (e) => e.stopPropagation(),
+      style: { width: `${Math.min(Math.max(value.length * 8, 60), 250)}px` }
+    }
+  ));
+});
+function useTagManagement(value, onChange, allowDuplicates) {
+  const isDuplicateTag = React.useCallback(
+    (label) => value.some(
+      (item) => item.label.toLowerCase() === label.toLowerCase()
+    ),
+    [value]
+  );
+  const createTagItem = React.useCallback(
+    (label) => ({
+      id: typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`,
+      label
+    }),
+    []
+  );
+  const addTagAtPosition = React.useCallback(
+    (newItem, atIndex) => {
+      if (atIndex !== void 0) {
+        const newValue = [...value];
+        newValue.splice(atIndex, 0, newItem);
+        onChange(newValue);
+      } else {
+        onChange([...value, newItem]);
+      }
+    },
+    [value, onChange]
+  );
+  const handleAddTag = React.useCallback(
+    (newLabel, atIndex) => {
+      const trimmedValue = newLabel.trim();
+      if (!trimmedValue) return;
+      if (!allowDuplicates && isDuplicateTag(trimmedValue)) {
+        return;
+      }
+      const newItem = createTagItem(trimmedValue);
+      addTagAtPosition(newItem, atIndex);
+    },
+    [allowDuplicates, isDuplicateTag, addTagAtPosition, createTagItem]
+  );
+  const handleAddMultipleTags = React.useCallback(
+    (labels) => {
+      const newItems = labels.map((label) => label.trim()).filter((label) => {
+        if (!label) return false;
+        if (!allowDuplicates && isDuplicateTag(label)) {
+          return false;
+        }
+        return true;
+      }).map((label) => createTagItem(label));
+      if (newItems.length > 0) {
+        onChange([...value, ...newItems]);
+      }
+    },
+    [value, onChange, allowDuplicates, isDuplicateTag, createTagItem]
+  );
+  const handleRemove = React.useCallback(
+    (id) => {
+      onChange(value.filter((item) => item.id !== id));
+    },
+    [value, onChange]
+  );
+  return { handleAddTag, handleAddMultipleTags, handleRemove };
+}
+function useDragAndDrop(value, onChange, containerRef) {
+  const [draggedIndex, setDraggedIndex] = React.useState(null);
+  const [dragOverIndex, setDragOverIndex] = React.useState(null);
+  const scrollIntervalRef = React.useRef(null);
+  const isDraggingRef = React.useRef(false);
+  const wheelHandlerRef = React.useRef(null);
+  const handleMouseDown = React.useCallback((e) => {
+    const target = e.target;
+    const isDraggableTag = target.closest('[draggable="true"]');
+    if (!isDraggableTag) return;
+    const handleWheel = (e2) => {
+      e2.preventDefault();
+      e2.stopImmediatePropagation();
+      if (containerRef.current) {
+        containerRef.current.scrollTop += e2.deltaY;
+      }
+    };
+    wheelHandlerRef.current = handleWheel;
+    document.body.addEventListener("wheel", handleWheel, { passive: false, capture: true });
+    const cleanup = () => {
+      if (wheelHandlerRef.current) {
+        document.body.removeEventListener("wheel", wheelHandlerRef.current, true);
+        wheelHandlerRef.current = null;
+      }
+      document.removeEventListener("mouseup", cleanup);
+      document.removeEventListener("dragend", cleanup);
+    };
+    document.addEventListener("mouseup", cleanup);
+    document.addEventListener("dragend", cleanup);
+  }, [containerRef]);
+  const handleDragStart = React.useCallback((index) => {
+    setDraggedIndex(index);
+    isDraggingRef.current = true;
+  }, []);
+  const handleDragOver = React.useCallback(
+    (index) => {
+      const shouldUpdateDragOver = draggedIndex !== null && draggedIndex !== index;
+      if (shouldUpdateDragOver) {
+        setDragOverIndex(index);
+      }
+    },
+    [draggedIndex]
+  );
+  const handleDrag = React.useCallback(
+    (e) => {
+      if (!containerRef.current) return;
+      const container = containerRef.current;
+      const rect = container.getBoundingClientRect();
+      const scrollThreshold = 80;
+      const maxScrollSpeed = 15;
+      const minScrollSpeed = 3;
+      const mouseY = e.clientY;
+      const distanceFromTop = mouseY - rect.top;
+      const distanceFromBottom = rect.bottom - mouseY;
+      if (scrollIntervalRef.current) {
+        clearInterval(scrollIntervalRef.current);
+        scrollIntervalRef.current = null;
+      }
+      if (distanceFromTop < scrollThreshold && distanceFromTop > 0) {
+        const speedFactor = 1 - distanceFromTop / scrollThreshold;
+        const scrollSpeed = minScrollSpeed + (maxScrollSpeed - minScrollSpeed) * speedFactor;
+        scrollIntervalRef.current = window.setInterval(() => {
+          if (container.scrollTop > 0) {
+            container.scrollTop -= scrollSpeed;
+          }
+        }, 16);
+      } else if (distanceFromBottom < scrollThreshold && distanceFromBottom > 0) {
+        const speedFactor = 1 - distanceFromBottom / scrollThreshold;
+        const scrollSpeed = minScrollSpeed + (maxScrollSpeed - minScrollSpeed) * speedFactor;
+        scrollIntervalRef.current = window.setInterval(() => {
+          if (container.scrollTop < container.scrollHeight - container.clientHeight) {
+            container.scrollTop += scrollSpeed;
+          }
+        }, 16);
+      }
+    },
+    [containerRef]
+  );
+  const resetDragState = () => {
+    setDraggedIndex(null);
+    setDragOverIndex(null);
+    isDraggingRef.current = false;
+    if (scrollIntervalRef.current) {
+      clearInterval(scrollIntervalRef.current);
+      scrollIntervalRef.current = null;
+    }
+  };
+  const reorderItems = React.useCallback(
+    (fromIndex, toIndex) => {
+      const newValue = [...value];
+      const [removed] = newValue.splice(fromIndex, 1);
+      newValue.splice(toIndex, 0, removed);
+      onChange(newValue);
+    },
+    [value, onChange]
+  );
+  const handleDragEnd = React.useCallback(() => {
+    const canReorder = draggedIndex !== null && dragOverIndex !== null;
+    if (canReorder) {
+      reorderItems(draggedIndex, dragOverIndex);
+    }
+    resetDragState();
+  }, [draggedIndex, dragOverIndex, reorderItems]);
+  return {
+    draggedIndex,
+    dragOverIndex,
+    handleDragStart,
+    handleDragOver,
+    handleDrag,
+    handleDragEnd,
+    handleMouseDown
+  };
+}
+function useInlineInputHandlers(insertAtIndex, setInsertAtIndex, handleAddTag, readOnly, disabled) {
+  const handleInlineAdd = React.useCallback(
+    (newLabel) => {
+      if (insertAtIndex !== null) {
+        handleAddTag(newLabel, insertAtIndex);
+        setInsertAtIndex(null);
+      }
+    },
+    [insertAtIndex, handleAddTag, setInsertAtIndex]
+  );
+  const handleInlineCancel = React.useCallback(() => {
+    setInsertAtIndex(null);
+  }, [setInsertAtIndex]);
+  const handleSpacerClick = React.useCallback(
+    (index) => {
+      const canInsert = !readOnly && !disabled;
+      if (canInsert) {
+        setInsertAtIndex(index);
+      }
+    },
+    [readOnly, disabled, setInsertAtIndex]
+  );
+  return { handleInlineAdd, handleInlineCancel, handleSpacerClick };
+}
+function useInputHandlers(inputValue, setInputValue, value, onChange, handleAddTag, handleAddMultipleTags, inputRef) {
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      const isSubmitKey = e.key === "Enter" || e.key === ";";
+      const isDeleteKey = e.key === "Backspace";
+      if (isSubmitKey) {
+        e.preventDefault();
+        const currentValue = e.target.textContent || "";
+        if (currentValue.trim()) {
+          handleAddTag(currentValue.trim());
+          if (inputRef.current) {
+            inputRef.current.textContent = "";
+          }
+          setInputValue("");
+        }
+      } else if (isDeleteKey && !inputValue && value.length > 0) {
+        onChange(value.slice(0, -1));
+      }
+    },
+    [inputValue, value, onChange, handleAddTag, setInputValue, inputRef]
+  );
+  const handlePaste = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      const pastedText = e.clipboardData.getData("text/plain") || e.clipboardData.getData("text");
+      if (!pastedText) return;
+      if (pastedText.includes(";")) {
+        const items = pastedText.split(";").map((item) => item.trim()).filter((item) => item.length > 0);
+        handleAddMultipleTags(items);
+      } else {
+        const trimmedText = pastedText.trim();
+        if (trimmedText) {
+          handleAddMultipleTags([trimmedText]);
+        }
+      }
+      setTimeout(() => {
+        if (inputRef.current) {
+          inputRef.current.textContent = "";
+        }
+        setInputValue("");
+      }, 0);
+    },
+    [handleAddMultipleTags, setInputValue, inputRef]
+  );
+  return { handleKeyDown, handlePaste };
+}
+function useTagEditHandler(value, onChange, onTagEdit) {
+  const handleEdit = React.useCallback(
+    (id, newLabel) => {
+      const updatedItems = value.map(
+        (item) => item.id === id ? { ...item, label: newLabel } : item
+      );
+      onChange(updatedItems);
+      const editedItem = updatedItems.find((item) => item.id === id);
+      if (editedItem && onTagEdit) {
+        onTagEdit(editedItem);
+      }
+    },
+    [value, onChange, onTagEdit]
+  );
+  return { handleEdit };
+}
+function useContainerClickHandler(disabled, inputRef) {
+  const handleContainerClick = React.useCallback(
+    (e) => {
+      const target = e.target;
+      const isClickOnTag = target.closest('[data-tag="true"]');
+      const isClickOnInlineInput = target.closest('[data-inline-input="true"]');
+      if (isClickOnTag || isClickOnInlineInput) return;
+      if (disabled || !inputRef.current) return;
+      inputRef.current.focus();
+    },
+    [disabled, inputRef]
+  );
+  return { handleContainerClick };
+}
+function useContainerStyles(variant, radius, disabled, className, maxHeight) {
+  const textareaRadius = radius === "full" ? "large" : radius;
+  const containerClassNames = cn(
+    textareaVariants({ variant, radius: textareaRadius }),
+    "min-h-10 cursor-text overflow-hidden pr-0.5 py-1",
+    disabled && "opacity-50 pointer-events-none cursor-not-allowed",
+    className
+  );
+  const containerStyles = React.useMemo(
+    () => ({
+      maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight
+    }),
+    [maxHeight]
+  );
+  return { containerClassNames, containerStyles };
+}
+function CustomTagInputRenderer({
+  value,
+  insertAtIndex,
+  draggedIndex,
+  dragOverIndex,
+  readOnly,
+  enableReorder,
+  inlinePlaceholder,
+  inputRef,
+  disabled,
+  placeholder,
+  handleRemove,
+  handleEdit,
+  handleDragStart,
+  handleDragOver,
+  handleDrag,
+  handleDragEnd,
+  handleInlineAdd,
+  handleInlineCancel,
+  handleSpacerClick,
+  handleKeyDown,
+  handlePaste,
+  setInputValue,
+  handleMouseDown
+}) {
+  const showFinalInlineInput = insertAtIndex === value.length;
+  const inputPlaceholder = value.length === 0 ? placeholder : "";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, value.map((item, index) => /* @__PURE__ */ React.createElement(
+    TagItemWrapper,
+    {
+      key: item.id,
+      item,
+      index,
+      insertAtIndex,
+      draggedIndex,
+      dragOverIndex,
+      readOnly,
+      enableReorder,
+      inlinePlaceholder,
+      onRemove: handleRemove,
+      onEdit: handleEdit,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDrag: handleDrag,
+      onDragEnd: handleDragEnd,
+      onInlineAdd: handleInlineAdd,
+      onInlineCancel: handleInlineCancel,
+      onSpacerClick: handleSpacerClick,
+      onMouseDown: handleMouseDown
+    }
+  )), showFinalInlineInput && /* @__PURE__ */ React.createElement(
+    InlineInput,
+    {
+      onAdd: handleInlineAdd,
+      onCancel: handleInlineCancel,
+      placeholder: inlinePlaceholder
+    }
+  ), !readOnly && /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref: inputRef,
+      contentEditable: !disabled,
+      suppressContentEditableWarning: true,
+      onInput: (e) => {
+        const target = e.target;
+        setInputValue(target.textContent || "");
+      },
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      "data-placeholder": inputPlaceholder,
+      className: "bg-transparent border-none outline-none body-small-400 text-grey-800 min-h-[1.5rem] empty:before:content-[attr(data-placeholder)] empty:before:text-grey-400 leading-6",
+      style: { flex: "1 1 auto", minWidth: "3.75rem", wordBreak: "break-word" }
+    }
+  ));
+}
+function CustomTagInput(props) {
+  const {
+    value,
+    onChange,
+    maxHeight = "200px",
+    placeholder = "Digite e pressione Enter para adicionar",
+    inlinePlaceholder = "Digite...",
+    disabled = false,
+    readOnly = false,
+    className = "",
+    variant = "default",
+    radius = "default",
+    allowDuplicates = false,
+    enableReorder = true,
+    onTagEdit,
+    ...restProps
+  } = props;
+  const [inputValue, setInputValue] = React.useState("");
+  const [insertAtIndex, setInsertAtIndex] = React.useState(null);
+  const inputRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const { handleAddTag, handleAddMultipleTags, handleRemove } = useTagManagement(
+    value,
+    onChange,
+    allowDuplicates
+  );
+  const { draggedIndex, dragOverIndex, handleDragStart, handleDragOver, handleDrag, handleDragEnd, handleMouseDown } = useDragAndDrop(value, onChange, containerRef);
+  const { handleKeyDown, handlePaste } = useInputHandlers(
+    inputValue,
+    setInputValue,
+    value,
+    onChange,
+    handleAddTag,
+    handleAddMultipleTags,
+    inputRef
+  );
+  const { handleEdit } = useTagEditHandler(value, onChange, onTagEdit);
+  const { handleContainerClick } = useContainerClickHandler(disabled, inputRef);
+  const { handleInlineAdd, handleInlineCancel, handleSpacerClick } = useInlineInputHandlers(
+    insertAtIndex,
+    setInsertAtIndex,
+    handleAddTag,
+    readOnly,
+    disabled
+  );
+  const { containerClassNames, containerStyles } = useContainerStyles(
+    variant,
+    radius,
+    disabled,
+    className,
+    maxHeight
+  );
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: containerClassNames,
+      tabIndex: 0,
+      role: "textbox",
+      "aria-multiline": "true",
+      "aria-disabled": disabled,
+      "aria-readonly": readOnly,
+      ...restProps
+    },
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: containerRef,
+        className: "flex flex-wrap content-start items-start w-full h-full gap-1 pr-3 pl-0 py-0 overflow-y-auto overflow-x-hidden [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400",
+        style: containerStyles,
+        onClick: handleContainerClick
+      },
+      /* @__PURE__ */ React.createElement(
+        CustomTagInputRenderer,
+        {
+          value,
+          insertAtIndex,
+          draggedIndex,
+          dragOverIndex,
+          readOnly,
+          enableReorder,
+          inlinePlaceholder,
+          inputRef,
+          disabled,
+          placeholder,
+          handleRemove,
+          handleEdit,
+          handleDragStart,
+          handleDragOver,
+          handleDrag,
+          handleDragEnd,
+          handleInlineAdd,
+          handleInlineCancel,
+          handleSpacerClick,
+          handleKeyDown,
+          handlePaste,
+          setInputValue,
+          handleMouseDown
+        }
+      )
+    )
+  );
+}
+
+export { CustomTagInput };