@mieweb/ui 0.8.0-dev.23 → 0.8.0-dev.24

package/dist/{chunk-AZLDTPYK.js → chunk-O6GJ4IYS.js}

@@ -1,9 +1,9 @@
 import { cn } from './chunk-TQONQSJO.js';
 import { useAnchoredPosition } from './chunk-WSNMQQ4P.js';
-import * as React2 from 'react';
+import * as React3 from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { createPortal } from 'react-dom';
 import { cva } from 'class-variance-authority';
+import { createPortal } from 'react-dom';
 
 function getFileType(mimeType) {
   if (mimeType.startsWith("image/")) return "image";
@@ -249,7 +249,7 @@ function AttachmentPreviewItem({
   );
 }
 AttachmentPreviewItem.displayName = "AttachmentPreviewItem";
-var AttachmentPicker = React2.forwardRef(
+var AttachmentPicker = React3.forwardRef(
   ({
     onFilesSelected,
     acceptedTypes = ["image/*", "video/*", ".pdf", ".doc", ".docx"],
@@ -262,8 +262,8 @@ var AttachmentPicker = React2.forwardRef(
     className,
     children
   }, ref) => {
-    const inputRef = React2.useRef(null);
-    React2.useImperativeHandle(ref, () => inputRef.current);
+    const inputRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => inputRef.current);
     const handleClick = () => {
       inputRef.current?.click();
     };
@@ -352,11 +352,12 @@ function DragDropZone({
   maxFiles = 10,
   disabled = false,
   onError,
+  overlayLabel = "Drop files here",
   children,
   className
 }) {
-  const [isDragging, setIsDragging] = React2.useState(false);
-  const dragCounterRef = React2.useRef(0);
+  const [isDragging, setIsDragging] = React3.useState(false);
+  const dragCounterRef = React3.useRef(0);
   const handleDragEnter = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -443,7 +444,7 @@ function DragDropZone({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: "Drop files here" })
+              /* @__PURE__ */ jsx("p", { className: "text-primary-700 dark:text-primary-300 mt-2 text-sm font-medium", children: overlayLabel })
             ] })
           }
         )
@@ -458,7 +459,7 @@ function CameraButton({
   disabled = false,
   className
 }) {
-  const inputRef = React2.useRef(null);
+  const inputRef = React3.useRef(null);
   const handleClick = () => {
     inputRef.current?.click();
   };
@@ -543,6 +544,162 @@ function activeMentionQuery(value, caret) {
   const query = match[2];
   return { query, start: caret - query.length - 1 };
 }
+function useMentionAutocomplete({
+  options,
+  value,
+  setValue,
+  textareaRef
+}) {
+  const enabled = !!options && options.length > 0;
+  const [mention, setMention] = React3.useState(null);
+  const [highlight, setHighlight] = React3.useState(0);
+  const listId = React3.useId();
+  const optionId = React3.useCallback(
+    (index) => `${listId}-option-${index}`,
+    [listId]
+  );
+  const suggestions = React3.useMemo(() => {
+    if (!mention || !options) return [];
+    const q = mention.query.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+  }, [mention, options]);
+  const menuOpen = enabled && mention !== null && suggestions.length > 0;
+  const {
+    anchorRef,
+    floatingRef,
+    style: menuStyle
+  } = useAnchoredPosition({
+    open: menuOpen,
+    placement: "top-start",
+    maxHeight: 224
+  });
+  const clampedHighlight = menuOpen ? Math.min(highlight, suggestions.length - 1) : -1;
+  const activeOptionId = menuOpen ? optionId(clampedHighlight) : void 0;
+  const sync = React3.useCallback(
+    (nextValue, caret) => {
+      if (!enabled) return;
+      setMention(activeMentionQuery(nextValue, caret));
+      setHighlight(0);
+    },
+    [enabled]
+  );
+  const insert = (option) => {
+    if (!mention) return;
+    const insertValue = option.value ?? option.label.split(" ")[0];
+    const before = value.slice(0, mention.start);
+    const after = value.slice(mention.start + 1 + mention.query.length);
+    const insertText = `@${insertValue} `;
+    setValue(before + insertText + after);
+    setMention(null);
+    const caret = before.length + insertText.length;
+    requestAnimationFrame(() => {
+      const el = textareaRef.current;
+      if (el) {
+        el.focus();
+        el.setSelectionRange(caret, caret);
+      }
+    });
+  };
+  const handleKeyDown = (event) => {
+    if (!menuOpen) return false;
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      setHighlight(
+        (h) => (Math.min(h, suggestions.length - 1) + 1) % suggestions.length
+      );
+      return true;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlight(
+        (h) => (Math.min(h, suggestions.length - 1) - 1 + suggestions.length) % suggestions.length
+      );
+      return true;
+    }
+    if (event.key === "Enter" || event.key === "Tab") {
+      event.preventDefault();
+      const chosen = suggestions[clampedHighlight];
+      if (chosen) insert(chosen);
+      return true;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setMention(null);
+      return true;
+    }
+    return false;
+  };
+  const inputProps = enabled ? {
+    "aria-controls": menuOpen ? listId : void 0,
+    "aria-activedescendant": activeOptionId,
+    "aria-autocomplete": "list"
+  } : {};
+  return {
+    enabled,
+    menuOpen,
+    suggestions,
+    highlight: clampedHighlight,
+    listId,
+    optionId,
+    anchorRef,
+    floatingRef,
+    menuStyle,
+    sync,
+    insert,
+    setHighlight,
+    handleKeyDown,
+    inputProps
+  };
+}
+function MentionMenu({
+  mention,
+  label = "Mention",
+  dataSlot = "composer-mention-list"
+}) {
+  if (!mention.menuOpen) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: mention.floatingRef,
+        style: mention.menuStyle,
+        id: mention.listId,
+        role: "listbox",
+        "aria-label": label,
+        "data-slot": dataSlot,
+        className: "w-64 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
+        children: mention.suggestions.map((option, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            id: mention.optionId(i),
+            role: "option",
+            "aria-selected": i === mention.highlight,
+            onMouseDown: (e) => {
+              e.preventDefault();
+              mention.insert(option);
+            },
+            onMouseEnter: () => mention.setHighlight(i),
+            className: cn(
+              "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
+              i === mention.highlight ? "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100" : "text-neutral-700 dark:text-neutral-200"
+            ),
+            children: [
+              option.icon,
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label }),
+                option.description && /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs text-neutral-400", children: option.description })
+              ] }),
+              option.meta && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
+            ]
+          }
+        ) }, option.id))
+      }
+    ),
+    document.body
+  );
+}
+MentionMenu.displayName = "MentionMenu";
 function isFileAccepted(file, accepted) {
   if (!accepted || accepted.length === 0) return true;
   const mime = file.type;
@@ -614,7 +771,7 @@ var sendButtonVariants = cva(
     }
   }
 );
-var SendButton = React2.forwardRef(
+var SendButton = React3.forwardRef(
   ({ className, variant, canSend, isLoading, disabled, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -679,7 +836,7 @@ var SendButton = React2.forwardRef(
   }
 );
 SendButton.displayName = "SendButton";
-var MessageComposer = React2.forwardRef(
+var MessageComposer = React3.forwardRef(
   ({
     onSend,
     onTypingStart,
@@ -705,11 +862,11 @@ var MessageComposer = React2.forwardRef(
     mentionOptions,
     className
   }, ref) => {
-    const textareaRef = React2.useRef(null);
-    const [internalContent, setInternalContent] = React2.useState("");
+    const textareaRef = React3.useRef(null);
+    const [internalContent, setInternalContent] = React3.useState("");
     const isControlled = controlledValue !== void 0;
     const content = isControlled ? controlledValue : internalContent;
-    const setContent = React2.useCallback(
+    const setContent = React3.useCallback(
       (val) => {
         if (isControlled) {
           const newVal = typeof val === "function" ? val(controlledValue) : val;
@@ -720,20 +877,20 @@ var MessageComposer = React2.forwardRef(
       },
       [isControlled, controlledValue, onValueChange]
     );
-    const [attachments, setAttachments] = React2.useState(
+    const [attachments, setAttachments] = React3.useState(
       []
     );
-    const [isTyping, setIsTyping] = React2.useState(false);
-    const typingTimeoutRef = React2.useRef(null);
-    React2.useImperativeHandle(ref, () => textareaRef.current);
-    React2.useEffect(() => {
+    const [isTyping, setIsTyping] = React3.useState(false);
+    const typingTimeoutRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => textareaRef.current);
+    React3.useEffect(() => {
       const textarea = textareaRef.current;
       if (textarea) {
         textarea.style.height = "auto";
         textarea.style.height = `${Math.min(textarea.scrollHeight, 150)}px`;
       }
     }, [content]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (content.length > 0 && !isTyping) {
         setIsTyping(true);
         onTypingStart?.();
@@ -753,63 +910,22 @@ var MessageComposer = React2.forwardRef(
         }
       };
     }, [content, isTyping, onTypingStart, onTypingStop]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (autoFocus) {
         textareaRef.current?.focus();
       }
     }, [autoFocus]);
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       if (replyTo) {
         textareaRef.current?.focus();
       }
     }, [replyTo]);
-    const mentionsEnabled = !!mentionOptions && mentionOptions.length > 0;
-    const [mention, setMention] = React2.useState(null);
-    const [mentionHighlight, setMentionHighlight] = React2.useState(0);
-    const mentionListId = React2.useId();
-    const mentionOptionId = (i) => `${mentionListId}-option-${i}`;
-    const mentionSuggestions = React2.useMemo(() => {
-      if (!mention || !mentionOptions) return [];
-      const q = mention.query.toLowerCase();
-      return mentionOptions.filter((o) => o.label.toLowerCase().includes(q));
-    }, [mention, mentionOptions]);
-    const mentionMenuOpen = mentionsEnabled && mention !== null && mentionSuggestions.length > 0;
-    const {
-      anchorRef: mentionAnchorRef,
-      floatingRef: mentionFloatingRef,
-      style: mentionStyle
-    } = useAnchoredPosition({
-      open: mentionMenuOpen,
-      placement: "top-start",
-      maxHeight: 224
+    const mention = useMentionAutocomplete({
+      options: mentionOptions,
+      value: content,
+      setValue: setContent,
+      textareaRef
     });
-    const clampedMentionHighlight = mentionMenuOpen ? Math.min(mentionHighlight, mentionSuggestions.length - 1) : -1;
-    const activeMentionOptionId = mentionMenuOpen ? mentionOptionId(clampedMentionHighlight) : void 0;
-    const syncMention = React2.useCallback(
-      (value, caret) => {
-        if (!mentionsEnabled) return;
-        setMention(activeMentionQuery(value, caret));
-        setMentionHighlight(0);
-      },
-      [mentionsEnabled]
-    );
-    const insertMention = (option) => {
-      if (!mention) return;
-      const insertValue = option.value ?? option.label.split(" ")[0];
-      const before = content.slice(0, mention.start);
-      const after = content.slice(mention.start + 1 + mention.query.length);
-      const insert = `@${insertValue} `;
-      setContent(before + insert + after);
-      setMention(null);
-      const caret = before.length + insert.length;
-      requestAnimationFrame(() => {
-        const el = textareaRef.current;
-        if (el) {
-          el.focus();
-          el.setSelectionRange(caret, caret);
-        }
-      });
-    };
     const canSend = (content.trim().length > 0 || attachments.length > 0) && content.length <= maxLength && !disabled && !isSending;
     const handleSubmit = async (event) => {
       event.preventDefault();
@@ -831,31 +947,7 @@ var MessageComposer = React2.forwardRef(
       }
     };
     const handleKeyDown = (event) => {
-      if (mentionMenuOpen) {
-        if (event.key === "ArrowDown") {
-          event.preventDefault();
-          setMentionHighlight((h) => (h + 1) % mentionSuggestions.length);
-          return;
-        }
-        if (event.key === "ArrowUp") {
-          event.preventDefault();
-          setMentionHighlight(
-            (h) => (h - 1 + mentionSuggestions.length) % mentionSuggestions.length
-          );
-          return;
-        }
-        if (event.key === "Enter" || event.key === "Tab") {
-          event.preventDefault();
-          const chosen = mentionSuggestions[mentionHighlight] ?? mentionSuggestions[0];
-          if (chosen) insertMention(chosen);
-          return;
-        }
-        if (event.key === "Escape") {
-          event.preventDefault();
-          setMention(null);
-          return;
-        }
-      }
+      if (mention.handleKeyDown(event)) return;
       if (event.key === "Enter" && !event.shiftKey) {
         event.preventDefault();
         if (canSend) {
@@ -901,7 +993,7 @@ var MessageComposer = React2.forwardRef(
         return prev.filter((a) => a.id !== attachmentId);
       });
     };
-    React2.useEffect(() => {
+    React3.useEffect(() => {
       const currentAttachments = attachments;
       return () => {
         currentAttachments.forEach((a) => {
@@ -1032,49 +1124,9 @@ var MessageComposer = React2.forwardRef(
                       {
                         "data-slot": "composer-input-wrapper",
                         className: "relative flex-1",
-                        ref: mentionAnchorRef,
+                        ref: mention.anchorRef,
                         children: [
-                          mentionMenuOpen && createPortal(
-                            /* @__PURE__ */ jsx(
-                              "ul",
-                              {
-                                ref: mentionFloatingRef,
-                                style: mentionStyle,
-                                id: mentionListId,
-                                role: "listbox",
-                                "aria-label": "Mention",
-                                "data-slot": "composer-mention-list",
-                                className: "w-64 overflow-y-auto rounded-lg border border-neutral-200 bg-white py-1 shadow-lg dark:border-neutral-700 dark:bg-neutral-800",
-                                children: mentionSuggestions.map((option, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-                                  "button",
-                                  {
-                                    type: "button",
-                                    id: mentionOptionId(i),
-                                    role: "option",
-                                    "aria-selected": i === clampedMentionHighlight,
-                                    onMouseDown: (e) => {
-                                      e.preventDefault();
-                                      insertMention(option);
-                                    },
-                                    onMouseEnter: () => setMentionHighlight(i),
-                                    className: cn(
-                                      "flex w-full items-center gap-2 px-3 py-1.5 text-start text-sm",
-                                      i === clampedMentionHighlight ? "bg-primary-100 text-primary-900 dark:bg-primary-900/40 dark:text-primary-100" : "text-neutral-700 dark:text-neutral-200"
-                                    ),
-                                    children: [
-                                      option.icon,
-                                      /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
-                                        /* @__PURE__ */ jsx("span", { className: "font-medium", children: option.label }),
-                                        option.description && /* @__PURE__ */ jsx("span", { className: "ms-1 text-xs text-neutral-400", children: option.description })
-                                      ] }),
-                                      option.meta && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-neutral-400", children: option.meta })
-                                    ]
-                                  }
-                                ) }, option.id))
-                              }
-                            ),
-                            document.body
-                          ),
+                          /* @__PURE__ */ jsx(MentionMenu, { mention }),
                           /* @__PURE__ */ jsx(
                             "textarea",
                             {
@@ -1083,14 +1135,14 @@ var MessageComposer = React2.forwardRef(
                               value: content,
                               onChange: (e) => {
                                 setContent(e.target.value);
-                                syncMention(
+                                mention.sync(
                                   e.target.value,
                                   e.target.selectionStart ?? e.target.value.length
                                 );
                               },
                               onClick: (e) => {
                                 const el = e.currentTarget;
-                                syncMention(el.value, el.selectionStart ?? el.value.length);
+                                mention.sync(el.value, el.selectionStart ?? el.value.length);
                               },
                               onKeyDown: handleKeyDown,
                               onPaste: handlePaste,
@@ -1110,11 +1162,7 @@ var MessageComposer = React2.forwardRef(
                               ),
                               "aria-label": "Message",
                               "aria-describedby": showCharacterCount ? "char-count" : void 0,
-                              ...mentionsEnabled ? {
-                                "aria-controls": mentionMenuOpen ? mentionListId : void 0,
-                                "aria-activedescendant": activeMentionOptionId,
-                                "aria-autocomplete": "list"
-                              } : {}
+                              ...mention.inputProps
                             }
                           ),
                           inputTrailing && /* @__PURE__ */ jsx(
@@ -1157,6 +1205,6 @@ var MessageComposer = React2.forwardRef(
 );
 MessageComposer.displayName = "MessageComposer";
 
-export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, validateFile };
-//# sourceMappingURL=chunk-AZLDTPYK.js.map
-//# sourceMappingURL=chunk-AZLDTPYK.js.map
+export { AttachmentPicker, AttachmentPreviewItem, CameraButton, CharacterCounter, DragDropZone, MentionMenu, MessageComposer, SendButton, generateAttachmentId, getFileType, sendButtonVariants, useMentionAutocomplete, validateFile };
+//# sourceMappingURL=chunk-O6GJ4IYS.js.map
+//# sourceMappingURL=chunk-O6GJ4IYS.js.map