@chayns-components/core 5.0.0-beta.997 → 5.0.0

package/lib/cjs/components/mention-finder/MentionFinder.js

@@ -4,38 +4,65 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _framerMotion = require("framer-motion");
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("motion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _mentionFinder = require("../../constants/mentionFinder");
 var _MentionFinderItem = _interopRequireDefault(require("./mention-finder-item/MentionFinderItem"));
 var _MentionFinder = require("./MentionFinder.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DRAG_CLOSE_THRESHOLD_IN_PX = 60;
+const findTouchByIdentifier = (touchList, identifier) => {
+  if (identifier === null) {
+    return null;
+  }
+  for (let i = 0; i < touchList.length; i += 1) {
+    const touch = touchList.item(i);
+    if (touch && touch.identifier === identifier) {
+      return touch;
+    }
+  }
+  return null;
+};
 const MentionFinder = ({
   inputValue,
   members,
   onSelect,
-  popupAlignment
+  popupAlignment,
+  enableDragHandle = false,
+  dragCloseThresholdInPx = DRAG_CLOSE_THRESHOLD_IN_PX,
+  overlayContainerSelector
 }) => {
-  const [activeMember, setActiveMember] = (0, _react.useState)(members[0]);
-  const [focusedIndex, setFocusedIndex] = (0, _react.useState)(0);
-  const ref = (0, _react.useRef)(null);
-  const [fullMatch, searchString] = (0, _react.useMemo)(() => {
+  const [activeMember, setActiveMember] = (0, _react2.useState)(members[0]);
+  const [focusedIndex, setFocusedIndex] = (0, _react2.useState)(0);
+  const [shouldShowPopup, setShouldShowPopup] = (0, _react2.useState)(true);
+  const popupRef = (0, _react2.useRef)(null);
+  const listRef = (0, _react2.useRef)(null);
+  const dragStartYRef = (0, _react2.useRef)(null);
+  const hasTriggeredDragCloseRef = (0, _react2.useRef)(false);
+  const activePointerIdRef = (0, _react2.useRef)(null);
+  const activeTouchIdRef = (0, _react2.useRef)(null);
+  const [isDraggingHandle, setIsDraggingHandle] = (0, _react2.useState)(false);
+  const [dragOffset, setDragOffset] = (0, _react2.useState)(0);
+  const [dragProgress, setDragProgress] = (0, _react2.useState)(0);
+  const [overlayContainer, setOverlayContainer] = (0, _react2.useState)(null);
+  const [fullMatch, searchString] = (0, _react2.useMemo)(() => {
     var _regExpMatchArray$;
     // eslint-disable-next-line no-irregular-whitespace
-    const regExpMatchArray = inputValue.match(/@([^\s​]*)/);
+    const regExpMatchArray = inputValue.match(/@(?!\s)([^\s​]*)/);
     return [regExpMatchArray === null || regExpMatchArray === void 0 ? void 0 : regExpMatchArray[0], (regExpMatchArray === null || regExpMatchArray === void 0 || (_regExpMatchArray$ = regExpMatchArray[1]) === null || _regExpMatchArray$ === void 0 ? void 0 : _regExpMatchArray$.toLowerCase()) ?? ''];
   }, [inputValue]);
-  const filteredMembers = (0, _react.useMemo)(() => searchString !== '' ? members.filter(({
+  const filteredMembers = (0, _react2.useMemo)(() => searchString !== '' ? members.filter(({
     id,
     info,
     name
-  }) => id.toLowerCase().includes(searchString) || info.replace('chayns', '').toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
-  const handleKeyDown = (0, _react.useCallback)(event => {
-    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-      var _ref$current;
+  }) => id.toLowerCase().includes(searchString) || (info === null || info === void 0 ? void 0 : info.replace('chayns', '').toLowerCase().includes(searchString)) || name.toLowerCase().includes(searchString)) : members, [members, searchString]);
+  const handleKeyDown = (0, _react2.useCallback)(event => {
+    if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && shouldRenderPopup) {
+      var _listRef$current;
       event.preventDefault();
-      const children = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.children;
+      const children = (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.children;
       if (children && children.length > 0) {
         const newIndex = focusedIndex !== null ? (focusedIndex + (event.key === 'ArrowUp' ? -1 : 1) + children.length) % children.length : 0;
         if (focusedIndex !== null) {
@@ -49,7 +76,7 @@ const MentionFinder = ({
         newElement.tabIndex = 0;
         newElement.focus();
       }
-    } else if (event.key === 'Enter') {
+    } else if (event.key === 'Enter' && shouldRenderPopup) {
       event.preventDefault();
       event.stopPropagation();
       if (fullMatch && activeMember) {
@@ -60,7 +87,7 @@ const MentionFinder = ({
       }
     }
   }, [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect]);
-  const handleMemberClick = (0, _react.useCallback)(member => {
+  const handleMemberClick = (0, _react2.useCallback)(member => {
     if (fullMatch) {
       onSelect({
         fullMatch,
@@ -68,10 +95,10 @@ const MentionFinder = ({
       });
     }
   }, [fullMatch, onSelect]);
-  const handleMemberHover = (0, _react.useCallback)(member => {
+  const handleMemberHover = (0, _react2.useCallback)(member => {
     setActiveMember(member);
   }, []);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
     if (filteredMembers.length > 0) {
       const isActiveMemberShown = filteredMembers.some(({
         id
@@ -81,15 +108,20 @@ const MentionFinder = ({
       }
     }
   }, [activeMember === null || activeMember === void 0 ? void 0 : activeMember.id, filteredMembers]);
-  const items = (0, _react.useMemo)(() => filteredMembers.map(member => /*#__PURE__*/_react.default.createElement(_MentionFinderItem.default, {
+  const items = (0, _react2.useMemo)(() => filteredMembers.map(member => /*#__PURE__*/_react2.default.createElement(_MentionFinderItem.default, {
     isActive: member.id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id),
     key: member.id,
     member: member,
     onClick: handleMemberClick,
     onHover: handleMemberHover
   })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
-  const shouldShowPopup = (0, _react.useMemo)(() => fullMatch && items.length > 0, [fullMatch, items.length]);
-  (0, _react.useEffect)(() => {
+  (0, _react2.useEffect)(() => {
+    setDragOffset(0);
+    setDragProgress(0);
+    hasTriggeredDragCloseRef.current = false;
+    setShouldShowPopup(true);
+  }, [inputValue]);
+  (0, _react2.useEffect)(() => {
     if (shouldShowPopup) {
       window.addEventListener('keydown', handleKeyDown, true);
     }
@@ -97,15 +129,209 @@ const MentionFinder = ({
       window.removeEventListener('keydown', handleKeyDown, true);
     };
   }, [handleKeyDown, shouldShowPopup]);
-  return /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMentionFinder, {
+  const closePopupViaDrag = (0, _react2.useCallback)(() => {
+    if (hasTriggeredDragCloseRef.current) {
+      return;
+    }
+    hasTriggeredDragCloseRef.current = true;
+    setDragOffset(0);
+    setDragProgress(0);
+    setShouldShowPopup(false);
+  }, []);
+  const handleOverlayClick = (0, _react2.useCallback)(() => {
+    closePopupViaDrag();
+  }, [closePopupViaDrag]);
+  const updateDragByClientY = (0, _react2.useCallback)(clientY => {
+    if (dragStartYRef.current === null) {
+      return false;
+    }
+    const closingDirectionMultiplier = popupAlignment === _mentionFinder.MentionFinderPopupAlignment.Bottom ? -1 : 1;
+    const rawDelta = clientY - dragStartYRef.current;
+    const normalizedDelta = rawDelta * closingDirectionMultiplier;
+    const positiveDelta = Math.max(0, normalizedDelta);
+    const limitedDelta = Math.min(positiveDelta, dragCloseThresholdInPx);
+    setDragOffset(limitedDelta * closingDirectionMultiplier);
+    setDragProgress(Math.min(positiveDelta / dragCloseThresholdInPx, 1));
+    if (positiveDelta >= dragCloseThresholdInPx) {
+      dragStartYRef.current = null;
+      setIsDraggingHandle(false);
+      closePopupViaDrag();
+      return true;
+    }
+    return false;
+  }, [closePopupViaDrag, dragCloseThresholdInPx, popupAlignment]);
+  const handleDragPointerDown = (0, _react2.useCallback)(event => {
+    if (event.pointerType === 'touch') {
+      return;
+    }
+    if (event.pointerType === 'mouse' && event.button !== 0) {
+      return;
+    }
+    if (dragStartYRef.current !== null) {
+      return;
+    }
+    activePointerIdRef.current = event.pointerId;
+    dragStartYRef.current = event.clientY;
+    hasTriggeredDragCloseRef.current = false;
+    setDragOffset(0);
+    setDragProgress(0);
+    setIsDraggingHandle(true);
+    event.currentTarget.setPointerCapture(event.pointerId);
+    event.stopPropagation();
+  }, []);
+  const handleDragPointerMove = (0, _react2.useCallback)(event => {
+    if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {
+      return;
+    }
+    if (dragStartYRef.current === null) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    const hasClosed = updateDragByClientY(event.clientY);
+    if (hasClosed) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+      activePointerIdRef.current = null;
+    }
+  }, [updateDragByClientY]);
+  const resetDragState = (0, _react2.useCallback)((shouldClose = false) => {
+    dragStartYRef.current = null;
+    setIsDraggingHandle(false);
+    if (shouldClose) {
+      closePopupViaDrag();
+    } else {
+      setDragOffset(0);
+      setDragProgress(0);
+    }
+  }, [closePopupViaDrag]);
+  const handleDragPointerUp = (0, _react2.useCallback)(event => {
+    if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {
+      return;
+    }
+    event.stopPropagation();
+    const shouldClose = dragProgress >= 1;
+    resetDragState(shouldClose);
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    activePointerIdRef.current = null;
+  }, [dragProgress, resetDragState]);
+  const handleDragPointerCancel = (0, _react2.useCallback)(event => {
+    if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {
+      return;
+    }
+    event.stopPropagation();
+    resetDragState();
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    activePointerIdRef.current = null;
+  }, [resetDragState]);
+  const handleDragTouchStart = (0, _react2.useCallback)(event => {
+    if (event.touches.length === 0 || dragStartYRef.current !== null) {
+      return;
+    }
+    const touch = event.touches[0];
+    if (!touch) return;
+    activeTouchIdRef.current = touch.identifier;
+    dragStartYRef.current = touch.clientY;
+    hasTriggeredDragCloseRef.current = false;
+    setDragOffset(0);
+    setDragProgress(0);
+    setIsDraggingHandle(true);
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+  const handleDragTouchMove = (0, _react2.useCallback)(event => {
+    if (dragStartYRef.current === null || activeTouchIdRef.current === null) {
+      return;
+    }
+    const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current) ?? findTouchByIdentifier(event.touches, activeTouchIdRef.current);
+    if (!touch) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const hasClosed = updateDragByClientY(touch.clientY);
+    if (hasClosed) {
+      activeTouchIdRef.current = null;
+    }
+  }, [updateDragByClientY]);
+  const handleDragTouchEnd = (0, _react2.useCallback)(event => {
+    if (activeTouchIdRef.current === null) return;
+    const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);
+    if (!touch) return;
+    event.preventDefault();
+    event.stopPropagation();
+    activeTouchIdRef.current = null;
+    const shouldClose = dragProgress >= 1;
+    resetDragState(shouldClose);
+  }, [dragProgress, resetDragState]);
+  const handleDragTouchCancel = (0, _react2.useCallback)(event => {
+    if (activeTouchIdRef.current === null) return;
+    const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);
+    if (!touch) return;
+    event.preventDefault();
+    event.stopPropagation();
+    activeTouchIdRef.current = null;
+    resetDragState();
+  }, [resetDragState]);
+  const dragHandle = (0, _react2.useMemo)(() => {
+    if (!enableDragHandle) {
+      return null;
+    }
+    return /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMentionFinderDragHandle, {
+      $alignment: popupAlignment
+    }, /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMentionFinderDragHandleInner, {
+      $alignment: popupAlignment,
+      $dragOffset: dragOffset,
+      $dragProgress: dragProgress,
+      $isDragging: isDraggingHandle,
+      onPointerDown: handleDragPointerDown,
+      onPointerMove: handleDragPointerMove,
+      onPointerUp: handleDragPointerUp,
+      onPointerCancel: handleDragPointerCancel,
+      onTouchStart: handleDragTouchStart,
+      onTouchMove: handleDragTouchMove,
+      onTouchEnd: handleDragTouchEnd,
+      onTouchCancel: handleDragTouchCancel
+    }));
+  }, [enableDragHandle, popupAlignment, dragOffset, dragProgress, isDraggingHandle, handleDragPointerDown, handleDragPointerMove, handleDragPointerUp, handleDragPointerCancel, handleDragTouchStart, handleDragTouchMove, handleDragTouchEnd, handleDragTouchCancel]);
+  const shouldRenderPopup = shouldShowPopup && fullMatch && items.length > 0;
+  (0, _react2.useEffect)(() => {
+    var _popupRef$current;
+    if (!enableDragHandle || !shouldRenderPopup) {
+      setOverlayContainer(null);
+      return;
+    }
+    const container = (_popupRef$current = popupRef.current) === null || _popupRef$current === void 0 ? void 0 : _popupRef$current.closest(overlayContainerSelector ?? '.dialog-inner, .chayns-threads, .page-provider, .tapp');
+    if (container) {
+      setOverlayContainer(container);
+      return;
+    }
+    if (typeof document !== 'undefined') {
+      setOverlayContainer(document.body);
+    }
+  }, [enableDragHandle, overlayContainerSelector, shouldRenderPopup]);
+  const overlayPortal = overlayContainer && enableDragHandle ? /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
+    initial: false
+  }, shouldRenderPopup && /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMentionFinderOverlay, {
+    key: "mention-finder-overlay",
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 0
+    },
+    onClick: handleOverlayClick
+  })), overlayContainer) : null;
+  return /*#__PURE__*/_react2.default.createElement(_react2.default.Fragment, null, overlayPortal, /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMentionFinder, {
     className: "beta-chayns-mention-finder"
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+  }, /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
     initial: false
-  }, shouldShowPopup && /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMotionMentionFinderPopup, {
-    ref: ref,
+  }, shouldRenderPopup && /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMotionMentionFinderPopup, {
+    ref: popupRef,
     animate: {
       height: 'auto',
-      opacity: 1
+      opacity: 1,
+      y: dragOffset
     },
     className: "prevent-lose-focus",
     exit: {
@@ -117,11 +343,14 @@ const MentionFinder = ({
       opacity: 0
     },
     $popupAlignment: popupAlignment,
+    $isDragging: enableDragHandle,
     transition: {
       duration: 0.15
     },
     tabIndex: 0
-  }, items)));
+  }, enableDragHandle && popupAlignment === _mentionFinder.MentionFinderPopupAlignment.Top && dragHandle, /*#__PURE__*/_react2.default.createElement(_MentionFinder.StyledMentionFinderItemList, {
+    ref: listRef
+  }, items), enableDragHandle && popupAlignment === _mentionFinder.MentionFinderPopupAlignment.Bottom && dragHandle))));
 };
 MentionFinder.displayName = 'MentionFinder';
 var _default = exports.default = MentionFinder;

package/lib/cjs/components/mention-finder/MentionFinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"MentionFinder.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_MentionFinderItem","_interopRequireDefault","_MentionFinder","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","MentionFinder","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","useState","focusedIndex","setFocusedIndex","ref","useRef","fullMatch","searchString","useMemo","_regExpMatchArray$","regExpMatchArray","match","toLowerCase","filteredMembers","filter","id","info","name","includes","replace","handleKeyDown","useCallback","event","key","_ref$current","preventDefault","children","current","length","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","handleMemberClick","handleMemberHover","useEffect","isActiveMemberShown","some","items","map","createElement","isActive","onClick","onHover","shouldShowPopup","window","addEventListener","removeEventListener","StyledMentionFinder","className","AnimatePresence","initial","StyledMotionMentionFinderPopup","animate","height","opacity","exit","$popupAlignment","transition","duration","displayName","_default","exports"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport type { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info: string;\n    imageUrl: string;\n    name: string;\n    shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString),\n                  )\n                : members,\n        [members, searchString],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n                event.preventDefault();\n\n                const children = ref.current?.children;\n\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex +\n                                  (event.key === 'ArrowUp' ? -1 : 1) +\n                                  children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const member = filteredMembers[newIndex];\n\n                    setActiveMember(member);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (event.key === 'Enter') {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n                }\n            }\n        },\n        [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect],\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect],\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n    );\n\n    const shouldShowPopup = useMemo(() => fullMatch && items.length > 0, [fullMatch, items.length]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {shouldShowPopup && (\n                    <StyledMotionMentionFinderPopup\n                        ref={ref}\n                        animate={{ height: 'auto', opacity: 1 }}\n                        className=\"prevent-lose-focus\"\n                        exit={{ height: 0, opacity: 0 }}\n                        initial={{ height: 0, opacity: 0 }}\n                        $popupAlignment={popupAlignment}\n                        transition={{ duration: 0.15 }}\n                        tabIndex={0}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MentionFinder.js","names":["_react","require","_react2","_interopRequireWildcard","_reactDom","_mentionFinder","_MentionFinderItem","_interopRequireDefault","_MentionFinder","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DRAG_CLOSE_THRESHOLD_IN_PX","findTouchByIdentifier","touchList","identifier","length","touch","item","MentionFinder","inputValue","members","onSelect","popupAlignment","enableDragHandle","dragCloseThresholdInPx","overlayContainerSelector","activeMember","setActiveMember","useState","focusedIndex","setFocusedIndex","shouldShowPopup","setShouldShowPopup","popupRef","useRef","listRef","dragStartYRef","hasTriggeredDragCloseRef","activePointerIdRef","activeTouchIdRef","isDraggingHandle","setIsDraggingHandle","dragOffset","setDragOffset","dragProgress","setDragProgress","overlayContainer","setOverlayContainer","fullMatch","searchString","useMemo","_regExpMatchArray$","regExpMatchArray","match","toLowerCase","filteredMembers","filter","id","info","name","includes","replace","handleKeyDown","useCallback","event","key","shouldRenderPopup","_listRef$current","preventDefault","children","current","newIndex","prevElement","tabIndex","member","newElement","focus","stopPropagation","handleMemberClick","handleMemberHover","useEffect","isActiveMemberShown","some","items","map","createElement","isActive","onClick","onHover","window","addEventListener","removeEventListener","closePopupViaDrag","handleOverlayClick","updateDragByClientY","clientY","closingDirectionMultiplier","MentionFinderPopupAlignment","Bottom","rawDelta","normalizedDelta","positiveDelta","Math","max","limitedDelta","min","handleDragPointerDown","pointerType","button","pointerId","currentTarget","setPointerCapture","handleDragPointerMove","hasClosed","releasePointerCapture","resetDragState","shouldClose","handleDragPointerUp","handleDragPointerCancel","handleDragTouchStart","touches","handleDragTouchMove","changedTouches","handleDragTouchEnd","handleDragTouchCancel","dragHandle","StyledMentionFinderDragHandle","$alignment","StyledMentionFinderDragHandleInner","$dragOffset","$dragProgress","$isDragging","onPointerDown","onPointerMove","onPointerUp","onPointerCancel","onTouchStart","onTouchMove","onTouchEnd","onTouchCancel","_popupRef$current","container","closest","document","body","overlayPortal","createPortal","AnimatePresence","initial","StyledMentionFinderOverlay","animate","opacity","exit","Fragment","StyledMentionFinder","className","StyledMotionMentionFinderPopup","ref","height","y","$popupAlignment","transition","duration","Top","StyledMentionFinderItemList","displayName","_default","exports"],"sources":["../../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    PointerEvent,\n    TouchList,\n    TouchEvent,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { MentionFinderPopupAlignment } from '../../constants/mentionFinder';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport {\n    StyledMentionFinder,\n    StyledMentionFinderDragHandle,\n    StyledMentionFinderDragHandleInner,\n    StyledMentionFinderItemList,\n    StyledMentionFinderOverlay,\n    StyledMotionMentionFinderPopup,\n} from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info?: string;\n    imageUrl: string;\n    name: string;\n    shouldShowRoundImage?: boolean;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n    /**\n     * Enables the optional drag handle inside the popup\n     */\n    enableDragHandle?: boolean;\n    /**\n     * Threshold in pixels to drag to close the popup\n     */\n    dragCloseThresholdInPx?: number;\n    /**\n     * Selector for the container to render the overlay into (defaults to closest dialog, thread, page provider or tapp)\n     */\n    overlayContainerSelector?: string;\n};\n\nconst DRAG_CLOSE_THRESHOLD_IN_PX = 60;\n\nconst findTouchByIdentifier = (touchList: TouchList, identifier: number | null) => {\n    if (identifier === null) {\n        return null;\n    }\n\n    for (let i = 0; i < touchList.length; i += 1) {\n        const touch = touchList.item(i);\n        if (touch && touch.identifier === identifier) {\n            return touch;\n        }\n    }\n\n    return null;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n    enableDragHandle = false,\n    dragCloseThresholdInPx = DRAG_CLOSE_THRESHOLD_IN_PX,\n    overlayContainerSelector,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const [shouldShowPopup, setShouldShowPopup] = useState(true);\n\n    const popupRef = useRef<HTMLDivElement>(null);\n    const listRef = useRef<HTMLDivElement>(null);\n    const dragStartYRef = useRef<number | null>(null);\n    const hasTriggeredDragCloseRef = useRef(false);\n    const activePointerIdRef = useRef<number | null>(null);\n    const activeTouchIdRef = useRef<number | null>(null);\n\n    const [isDraggingHandle, setIsDraggingHandle] = useState(false);\n    const [dragOffset, setDragOffset] = useState(0);\n    const [dragProgress, setDragProgress] = useState(0);\n    const [overlayContainer, setOverlayContainer] = useState<Element | null>(null);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        // eslint-disable-next-line no-irregular-whitespace\n        const regExpMatchArray = inputValue.match(/@(?!\\s)([^\\s​]*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info?.replace('chayns', '').toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString),\n                  )\n                : members,\n        [members, searchString],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && shouldRenderPopup) {\n                event.preventDefault();\n\n                const children = listRef.current?.children;\n\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex +\n                                  (event.key === 'ArrowUp' ? -1 : 1) +\n                                  children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const member = filteredMembers[newIndex];\n\n                    setActiveMember(member);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (event.key === 'Enter' && shouldRenderPopup) {\n                event.preventDefault();\n                event.stopPropagation();\n\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n                }\n            }\n        },\n        [activeMember, filteredMembers, focusedIndex, fullMatch, onSelect],\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect],\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover],\n    );\n\n    useEffect(() => {\n        setDragOffset(0);\n        setDragProgress(0);\n        hasTriggeredDragCloseRef.current = false;\n        setShouldShowPopup(true);\n    }, [inputValue]);\n\n    useEffect(() => {\n        if (shouldShowPopup) {\n            window.addEventListener('keydown', handleKeyDown, true);\n        }\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown, true);\n        };\n    }, [handleKeyDown, shouldShowPopup]);\n\n    const closePopupViaDrag = useCallback(() => {\n        if (hasTriggeredDragCloseRef.current) {\n            return;\n        }\n        hasTriggeredDragCloseRef.current = true;\n        setDragOffset(0);\n        setDragProgress(0);\n        setShouldShowPopup(false);\n    }, []);\n\n    const handleOverlayClick = useCallback(() => {\n        closePopupViaDrag();\n    }, [closePopupViaDrag]);\n\n    const updateDragByClientY = useCallback(\n        (clientY: number) => {\n            if (dragStartYRef.current === null) {\n                return false;\n            }\n\n            const closingDirectionMultiplier =\n                popupAlignment === MentionFinderPopupAlignment.Bottom ? -1 : 1;\n            const rawDelta = clientY - dragStartYRef.current;\n            const normalizedDelta = rawDelta * closingDirectionMultiplier;\n            const positiveDelta = Math.max(0, normalizedDelta);\n            const limitedDelta = Math.min(positiveDelta, dragCloseThresholdInPx);\n\n            setDragOffset(limitedDelta * closingDirectionMultiplier);\n            setDragProgress(Math.min(positiveDelta / dragCloseThresholdInPx, 1));\n\n            if (positiveDelta >= dragCloseThresholdInPx) {\n                dragStartYRef.current = null;\n                setIsDraggingHandle(false);\n                closePopupViaDrag();\n                return true;\n            }\n\n            return false;\n        },\n        [closePopupViaDrag, dragCloseThresholdInPx, popupAlignment],\n    );\n\n    const handleDragPointerDown = useCallback((event: PointerEvent<HTMLDivElement>) => {\n        if (event.pointerType === 'touch') {\n            return;\n        }\n        if (event.pointerType === 'mouse' && event.button !== 0) {\n            return;\n        }\n        if (dragStartYRef.current !== null) {\n            return;\n        }\n        activePointerIdRef.current = event.pointerId;\n        dragStartYRef.current = event.clientY;\n        hasTriggeredDragCloseRef.current = false;\n        setDragOffset(0);\n        setDragProgress(0);\n        setIsDraggingHandle(true);\n        event.currentTarget.setPointerCapture(event.pointerId);\n        event.stopPropagation();\n    }, []);\n\n    const handleDragPointerMove = useCallback(\n        (event: PointerEvent<HTMLDivElement>) => {\n            if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n                return;\n            }\n            if (dragStartYRef.current === null) {\n                return;\n            }\n\n            event.preventDefault();\n            event.stopPropagation();\n\n            const hasClosed = updateDragByClientY(event.clientY);\n\n            if (hasClosed) {\n                event.currentTarget.releasePointerCapture(event.pointerId);\n                activePointerIdRef.current = null;\n            }\n        },\n        [updateDragByClientY],\n    );\n\n    const resetDragState = useCallback(\n        (shouldClose = false) => {\n            dragStartYRef.current = null;\n            setIsDraggingHandle(false);\n            if (shouldClose) {\n                closePopupViaDrag();\n            } else {\n                setDragOffset(0);\n                setDragProgress(0);\n            }\n        },\n        [closePopupViaDrag],\n    );\n\n    const handleDragPointerUp = useCallback(\n        (event: PointerEvent<HTMLDivElement>) => {\n            if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n                return;\n            }\n            event.stopPropagation();\n            const shouldClose = dragProgress >= 1;\n            resetDragState(shouldClose);\n            event.currentTarget.releasePointerCapture(event.pointerId);\n            activePointerIdRef.current = null;\n        },\n        [dragProgress, resetDragState],\n    );\n\n    const handleDragPointerCancel = useCallback(\n        (event: PointerEvent<HTMLDivElement>) => {\n            if (event.pointerType === 'touch' || activePointerIdRef.current !== event.pointerId) {\n                return;\n            }\n            event.stopPropagation();\n            resetDragState();\n            event.currentTarget.releasePointerCapture(event.pointerId);\n            activePointerIdRef.current = null;\n        },\n        [resetDragState],\n    );\n\n    const handleDragTouchStart = useCallback((event: TouchEvent<HTMLDivElement>) => {\n        if (event.touches.length === 0 || dragStartYRef.current !== null) {\n            return;\n        }\n\n        const touch = event.touches[0];\n\n        if (!touch) return;\n\n        activeTouchIdRef.current = touch.identifier;\n        dragStartYRef.current = touch.clientY;\n        hasTriggeredDragCloseRef.current = false;\n        setDragOffset(0);\n        setDragProgress(0);\n        setIsDraggingHandle(true);\n        event.preventDefault();\n        event.stopPropagation();\n    }, []);\n\n    const handleDragTouchMove = useCallback(\n        (event: TouchEvent<HTMLDivElement>) => {\n            if (dragStartYRef.current === null || activeTouchIdRef.current === null) {\n                return;\n            }\n            const touch =\n                findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current) ??\n                findTouchByIdentifier(event.touches, activeTouchIdRef.current);\n\n            if (!touch) return;\n\n            event.preventDefault();\n            event.stopPropagation();\n            const hasClosed = updateDragByClientY(touch.clientY);\n            if (hasClosed) {\n                activeTouchIdRef.current = null;\n            }\n        },\n        [updateDragByClientY],\n    );\n\n    const handleDragTouchEnd = useCallback(\n        (event: TouchEvent<HTMLDivElement>) => {\n            if (activeTouchIdRef.current === null) return;\n\n            const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);\n\n            if (!touch) return;\n\n            event.preventDefault();\n            event.stopPropagation();\n            activeTouchIdRef.current = null;\n            const shouldClose = dragProgress >= 1;\n            resetDragState(shouldClose);\n        },\n        [dragProgress, resetDragState],\n    );\n\n    const handleDragTouchCancel = useCallback(\n        (event: TouchEvent<HTMLDivElement>) => {\n            if (activeTouchIdRef.current === null) return;\n\n            const touch = findTouchByIdentifier(event.changedTouches, activeTouchIdRef.current);\n\n            if (!touch) return;\n\n            event.preventDefault();\n            event.stopPropagation();\n            activeTouchIdRef.current = null;\n            resetDragState();\n        },\n        [resetDragState],\n    );\n\n    const dragHandle = useMemo(() => {\n        if (!enableDragHandle) {\n            return null;\n        }\n\n        return (\n            <StyledMentionFinderDragHandle $alignment={popupAlignment}>\n                <StyledMentionFinderDragHandleInner\n                    $alignment={popupAlignment}\n                    $dragOffset={dragOffset}\n                    $dragProgress={dragProgress}\n                    $isDragging={isDraggingHandle}\n                    onPointerDown={handleDragPointerDown}\n                    onPointerMove={handleDragPointerMove}\n                    onPointerUp={handleDragPointerUp}\n                    onPointerCancel={handleDragPointerCancel}\n                    onTouchStart={handleDragTouchStart}\n                    onTouchMove={handleDragTouchMove}\n                    onTouchEnd={handleDragTouchEnd}\n                    onTouchCancel={handleDragTouchCancel}\n                />\n            </StyledMentionFinderDragHandle>\n        );\n    }, [\n        enableDragHandle,\n        popupAlignment,\n        dragOffset,\n        dragProgress,\n        isDraggingHandle,\n        handleDragPointerDown,\n        handleDragPointerMove,\n        handleDragPointerUp,\n        handleDragPointerCancel,\n        handleDragTouchStart,\n        handleDragTouchMove,\n        handleDragTouchEnd,\n        handleDragTouchCancel,\n    ]);\n\n    const shouldRenderPopup = shouldShowPopup && fullMatch && items.length > 0;\n\n    useEffect(() => {\n        if (!enableDragHandle || !shouldRenderPopup) {\n            setOverlayContainer(null);\n            return;\n        }\n\n        const container = popupRef.current?.closest(\n            overlayContainerSelector ?? '.dialog-inner, .chayns-threads, .page-provider, .tapp',\n        );\n\n        if (container) {\n            setOverlayContainer(container);\n            return;\n        }\n\n        if (typeof document !== 'undefined') {\n            setOverlayContainer(document.body);\n        }\n    }, [enableDragHandle, overlayContainerSelector, shouldRenderPopup]);\n\n    const overlayPortal =\n        overlayContainer && enableDragHandle\n            ? createPortal(\n                  <AnimatePresence initial={false}>\n                      {shouldRenderPopup && (\n                          <StyledMentionFinderOverlay\n                              key=\"mention-finder-overlay\"\n                              animate={{ opacity: 1 }}\n                              exit={{ opacity: 0 }}\n                              initial={{ opacity: 0 }}\n                              onClick={handleOverlayClick}\n                          />\n                      )}\n                  </AnimatePresence>,\n                  overlayContainer,\n              )\n            : null;\n\n    return (\n        <>\n            {overlayPortal}\n            <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n                <AnimatePresence initial={false}>\n                    {shouldRenderPopup && (\n                        <StyledMotionMentionFinderPopup\n                            ref={popupRef}\n                            animate={{\n                                height: 'auto',\n                                opacity: 1,\n                                y: dragOffset,\n                            }}\n                            className=\"prevent-lose-focus\"\n                            exit={{ height: 0, opacity: 0 }}\n                            initial={{ height: 0, opacity: 0 }}\n                            $popupAlignment={popupAlignment}\n                            $isDragging={enableDragHandle}\n                            transition={{ duration: 0.15 }}\n                            tabIndex={0}\n                        >\n                            {enableDragHandle &&\n                                popupAlignment === MentionFinderPopupAlignment.Top &&\n                                dragHandle}\n                            <StyledMentionFinderItemList ref={listRef}>\n                                {items}\n                            </StyledMentionFinderItemList>\n                            {enableDragHandle &&\n                                popupAlignment === MentionFinderPopupAlignment.Bottom &&\n                                dragHandle}\n                        </StyledMotionMentionFinderPopup>\n                    )}\n                </AnimatePresence>\n            </StyledMentionFinder>\n        </>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/mention-finder/MentionFinder.styles.js

@@ -3,25 +3,115 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionMentionFinderPopup = exports.StyledMentionFinder = void 0;
-var _framerMotion = require("framer-motion");
+exports.StyledMotionMentionFinderPopup = exports.StyledMentionFinderOverlay = exports.StyledMentionFinderItemList = exports.StyledMentionFinderDragHandleInner = exports.StyledMentionFinderDragHandle = exports.StyledMentionFinder = void 0;
+var _react = require("motion/react");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _mentionFinder = require("../../constants/mentionFinder");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const StyledMentionFinder = exports.StyledMentionFinder = _styledComponents.default.div`
     position: relative;
+    z-index: 2;
 `;
-const StyledMotionMentionFinderPopup = exports.StyledMotionMentionFinderPopup = (0, _styledComponents.default)(_framerMotion.motion.div)`
+const StyledMentionFinderDragHandle = exports.StyledMentionFinderDragHandle = _styledComponents.default.div`
+    align-items: center;
     background-color: ${({
   theme
-}) => theme['001']};
+}) => theme['000']};
+    border: 0;
+    cursor: grab;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    padding: 8px 0;
+    pointer-events: none;
+    position: sticky;
+    width: 100%;
+    z-index: 2;
+
+    ${({
+  $alignment
+}) => $alignment === _mentionFinder.MentionFinderPopupAlignment.Top ? (0, _styledComponents.css)`
+                  border-bottom: 0;
+                  top: 0;
+              ` : (0, _styledComponents.css)`
+                  border-top: 0;
+                  bottom: 0;
+              `}
+`;
+const StyledMentionFinderDragHandleInner = exports.StyledMentionFinderDragHandleInner = _styledComponents.default.div`
+    background-color: ${({
+  theme
+}) => theme['005']};
+    border: 0;
+    border-radius: 2px;
+    cursor: ${({
+  $isDragging
+}) => $isDragging ? 'grabbing' : 'grab'};
+    display: flex;
+    height: 4px;
+    justify-content: center;
+    margin: 0 auto;
+    pointer-events: auto;
+    position: relative;
+    touch-action: none;
+    user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    width: 50px;
+
+    &::before {
+        content: '';
+        height: 36px;
+        left: 50%;
+        pointer-events: auto;
+        position: absolute;
+        top: 50%;
+        touch-action: none;
+        user-select: none;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        transform: translate(-50%, -50%);
+        width: 120px;
+    }
+`;
+const StyledMotionMentionFinderPopup = exports.StyledMotionMentionFinderPopup = (0, _styledComponents.default)(_react.motion.div)`
+    background-color: ${({
+  theme
+}) => theme['000']};
     border: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 0;
     border-radius: 3px;
+    display: flex;
+    flex-direction: column;
+
+    ${({
+  $isDragging,
+  $popupAlignment
+}) => {
+  if (!$isDragging) return (0, _styledComponents.css)`
+                z-index: 5;
+            `;
+  switch ($popupAlignment) {
+    case _mentionFinder.MentionFinderPopupAlignment.Bottom:
+      return (0, _styledComponents.css)`
+                    border-bottom-left-radius: 15px;
+                    border-bottom-right-radius: 15px;
+                    z-index: 2;
+                `;
+    case _mentionFinder.MentionFinderPopupAlignment.Top:
+      return (0, _styledComponents.css)`
+                    border-top-left-radius: 15px;
+                    border-top-right-radius: 15px;
+                    z-index: 2;
+                `;
+    default:
+      return (0, _styledComponents.css)``;
+  }
+}}
     box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
     left: 0;
     max-height: 275px;
-    overflow-y: scroll;
+    overflow: hidden;
     position: absolute;
     width: 100%;
 
@@ -41,6 +131,11 @@ const StyledMotionMentionFinderPopup = exports.StyledMotionMentionFinderPopup =
       return undefined;
   }
 }}
+`;
+const StyledMentionFinderItemList = exports.StyledMentionFinderItemList = _styledComponents.default.div`
+    flex: 1 1 auto;
+    max-height: inherit;
+    overflow-y: auto;
 
     // Styles for custom scrollbar
     &::-webkit-scrollbar {
@@ -79,4 +174,14 @@ const StyledMotionMentionFinderPopup = exports.StyledMotionMentionFinderPopup =
         scrollbar-width: thin;
     }
 `;
+const StyledMentionFinderOverlay = exports.StyledMentionFinderOverlay = (0, _styledComponents.default)(_react.motion.div)`
+    -webkit-backdrop-filter: blur(5px);
+    backdrop-filter: blur(5px);
+    background: radial-gradient(#000000a6 0, #000000bf 100%);
+    inset: 0;
+    opacity: 0;
+    pointer-events: all;
+    position: absolute;
+    z-index: 1;
+`;
 //# sourceMappingURL=MentionFinder.styles.js.map