tycho-components 0.40.9 → 0.41.1

package/dist/features/Comments/CommentThread.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import UsabilityUtils from '../../functions/UsabilityUtils';
+import CommentInfo from './CommentInfo';
+export default function CommentThread({ comments, hasEditAccess, onRemove, onUpdate, onEdit, onReply, }) {
+    const hasReplies = (thisComment) => comments.some((c) => c.reply === thisComment.id);
+    const getReplies = (thisComment) => comments.filter((c) => c.reply === thisComment.id);
+    return (_jsx(_Fragment, { children: comments.map((el, idx) => (_jsxs("div", { className: "thread", children: [!el.reply && (_jsx(CommentInfo, { comment: el, hasEditAccess: hasEditAccess, onRemove: () => onRemove(el.id), onUpdate: onUpdate, onEdit: () => {
+                        onEdit(el);
+                        UsabilityUtils.goToAnchor('comment-top');
+                    }, onReply: () => {
+                        onReply(el);
+                        UsabilityUtils.goToAnchor('comment-top');
+                    } })), hasReplies(el) && (_jsx("div", { className: "replies", children: getReplies(el).map((rel, idy) => (_jsx(CommentInfo, { comment: rel, hasEditAccess: hasEditAccess, onRemove: () => onRemove(rel.id), onUpdate: onUpdate, onEdit: () => onEdit(rel), onReply: () => onReply(rel) }, `${idx}_${idy}`))) }))] }, idx.valueOf()))) }));
+}

package/dist/features/Comments/CommentUtils.d.ts

@@ -0,0 +1,24 @@
+export type DockPosition = 'left' | 'right' | 'bottom' | 'undocked';
+export type DockedPosition = Exclude<DockPosition, 'undocked'>;
+declare const CommentUtils: {
+    isDockPosition: (value: string | null) => value is DockPosition;
+    isDockedPosition: (value: DockPosition) => value is DockedPosition;
+    clampDrawerWidth: (width: number) => number;
+    clampDrawerHeight: (height: number) => number;
+    readStoredDrawerWidth: () => number;
+    readStoredDrawerHeight: () => number;
+    persistDrawerWidth: (width: number) => void;
+    persistDrawerHeight: (height: number) => void;
+    readStoredDockPosition: () => DockPosition;
+    persistDockPosition: (position: DockedPosition) => void;
+    getUndockedPopupSize: () => {
+        width: number;
+        height: number;
+    };
+    copyStylesToPopup: (popup: Window) => void;
+    openCommentsPopup: () => {
+        popup: Window;
+        container: HTMLElement;
+    } | null;
+};
+export default CommentUtils;

package/dist/features/Comments/CommentUtils.js

@@ -0,0 +1,175 @@
+const DRAWER_WIDTH_STORAGE_KEY = 'tycho-comments-drawer-width';
+const DRAWER_HEIGHT_STORAGE_KEY = 'tycho-comments-drawer-height';
+const DOCK_POSITION_STORAGE_KEY = 'tycho-comments-dock-position';
+const DRAWER_MIN_WIDTH = 320;
+const DRAWER_MIN_HEIGHT = 200;
+const POPUP_NAME = 'tycho-comments';
+const POPUP_MIN_WIDTH = 960;
+const POPUP_MIN_HEIGHT = 720;
+const isDockPosition = (value) => value === 'left' ||
+    value === 'right' ||
+    value === 'bottom' ||
+    value === 'undocked';
+const isDockedPosition = (value) => value !== 'undocked';
+const getDefaultDrawerWidth = () => {
+    if (typeof window === 'undefined')
+        return 480;
+    const { innerWidth } = window;
+    if (innerWidth <= 767)
+        return Math.round(innerWidth * 0.9);
+    if (innerWidth <= 768)
+        return Math.round(innerWidth * 0.6);
+    return Math.round(innerWidth * 0.4);
+};
+const getDefaultDrawerHeight = () => {
+    if (typeof window === 'undefined')
+        return 360;
+    return Math.round(window.innerHeight * 0.4);
+};
+const clampDrawerWidth = (width) => {
+    if (typeof window === 'undefined')
+        return width;
+    const maxWidth = Math.min(Math.round(window.innerWidth * 0.9), window.innerWidth - 48);
+    return Math.min(Math.max(width, DRAWER_MIN_WIDTH), maxWidth);
+};
+const clampDrawerHeight = (height) => {
+    if (typeof window === 'undefined')
+        return height;
+    const maxHeight = Math.min(Math.round(window.innerHeight * 0.9), window.innerHeight - 48);
+    return Math.min(Math.max(height, DRAWER_MIN_HEIGHT), maxHeight);
+};
+const readStoredDrawerWidth = () => {
+    try {
+        const stored = localStorage.getItem(DRAWER_WIDTH_STORAGE_KEY);
+        if (stored) {
+            const parsed = Number(stored);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+                return clampDrawerWidth(parsed);
+            }
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return clampDrawerWidth(getDefaultDrawerWidth());
+};
+const readStoredDrawerHeight = () => {
+    try {
+        const stored = localStorage.getItem(DRAWER_HEIGHT_STORAGE_KEY);
+        if (stored) {
+            const parsed = Number(stored);
+            if (!Number.isNaN(parsed) && parsed > 0) {
+                return clampDrawerHeight(parsed);
+            }
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return clampDrawerHeight(getDefaultDrawerHeight());
+};
+const persistDrawerWidth = (width) => {
+    try {
+        localStorage.setItem(DRAWER_WIDTH_STORAGE_KEY, String(width));
+    }
+    catch {
+        // ignore storage access errors
+    }
+};
+const persistDrawerHeight = (height) => {
+    try {
+        localStorage.setItem(DRAWER_HEIGHT_STORAGE_KEY, String(height));
+    }
+    catch {
+        // ignore storage access errors
+    }
+};
+const readStoredDockPosition = () => {
+    try {
+        const stored = localStorage.getItem(DOCK_POSITION_STORAGE_KEY);
+        if (isDockPosition(stored) && stored !== 'undocked') {
+            return stored;
+        }
+    }
+    catch {
+        // ignore storage access errors
+    }
+    return 'right';
+};
+const persistDockPosition = (position) => {
+    try {
+        localStorage.setItem(DOCK_POSITION_STORAGE_KEY, position);
+    }
+    catch {
+        // ignore storage access errors
+    }
+};
+const getUndockedPopupSize = () => {
+    if (typeof window === 'undefined') {
+        return { width: POPUP_MIN_WIDTH, height: POPUP_MIN_HEIGHT };
+    }
+    const availWidth = window.screen.availWidth || window.outerWidth;
+    const availHeight = window.screen.availHeight || window.outerHeight;
+    const width = Math.min(Math.max(Math.round(availWidth * 0.75), POPUP_MIN_WIDTH), availWidth - 40);
+    const height = Math.min(Math.max(Math.round(availHeight * 0.85), POPUP_MIN_HEIGHT), availHeight - 40);
+    return { width, height };
+};
+const copyStylesToPopup = (popup) => {
+    const { document: popupDoc } = popup;
+    popupDoc.head.innerHTML = '';
+    popupDoc.title = document.title;
+    document.querySelectorAll('link[rel="stylesheet"], style').forEach((node) => {
+        popupDoc.head.appendChild(node.cloneNode(true));
+    });
+    popupDoc.body.className = document.body.className;
+    popupDoc.body.style.margin = '0';
+    popupDoc.body.style.height = '100%';
+    popupDoc.documentElement.style.height = '100%';
+    popupDoc.documentElement.style.overflow = 'hidden';
+};
+const openCommentsPopup = () => {
+    if (typeof window === 'undefined')
+        return null;
+    const { width, height } = getUndockedPopupSize();
+    const left = Math.round(window.screenX + (window.outerWidth - width) / 2);
+    const top = Math.round(window.screenY + (window.outerHeight - height) / 2);
+    const features = [
+        'popup=yes',
+        `width=${width}`,
+        `height=${height}`,
+        `left=${left}`,
+        `top=${top}`,
+    ].join(',');
+    const popup = window.open('', POPUP_NAME, features);
+    if (!popup)
+        return null;
+    try {
+        popup.resizeTo(width, height);
+        popup.moveTo(left, top);
+    }
+    catch {
+        // some browsers block resize/move on already-open named windows
+    }
+    copyStylesToPopup(popup);
+    const container = popup.document.createElement('div');
+    container.id = 'tycho-comments-root';
+    container.style.height = '100%';
+    popup.document.body.appendChild(container);
+    return { popup, container };
+};
+const CommentUtils = {
+    isDockPosition,
+    isDockedPosition,
+    clampDrawerWidth,
+    clampDrawerHeight,
+    readStoredDrawerWidth,
+    readStoredDrawerHeight,
+    persistDrawerWidth,
+    persistDrawerHeight,
+    readStoredDockPosition,
+    persistDockPosition,
+    getUndockedPopupSize,
+    copyStylesToPopup,
+    openCommentsPopup,
+};
+export default CommentUtils;

package/dist/features/Comments/Comments.d.ts

@@ -7,6 +7,8 @@ type Props = {
     onClose: () => void;
     mode: 'lexicon' | 'corpus' | 'parser';
     onChange?: (a: Comment[]) => void;
+    /** Opens the add-comment panel on mount (useful in Storybook). */
+    initialOpenAdd?: boolean;
 };
-export default function Comments({ uid, keywords, references, mode, onClose, onChange, }: Props): import("react").JSX.Element;
+export default function Comments({ uid, keywords, references, mode, onClose, onChange, initialOpenAdd, }: Props): import("react").JSX.Element;
 export {};

package/dist/features/Comments/Comments.js

@@ -1,23 +1,53 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Drawer } from '@mui/material';
-import { useEffect, useMemo, useState } from 'react';
+import cx from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
-import { Button, IconButton } from 'tycho-storybook';
+import { Button, DropdownMenu, IconButton } from 'tycho-storybook';
 import AppLoading from '../../common/AppLoading';
 import AppPlaceholder from '../../common/AppPlaceholder';
 import SecurityUtils from '../../functions/SecurityUtils';
-import UsabilityUtils from '../../functions/UsabilityUtils';
 import CommentAdd from './CommentAdd';
-import CommentInfo from './CommentInfo';
 import CommentService from './CommentService';
+import CommentThread from './CommentThread';
+import CommentUtils from './CommentUtils';
 import './style.scss';
-export default function Comments({ uid, keywords, references, mode, onClose, onChange, }) {
+function CommentsPanel({ dockPosition, showResizeHandle, onResizePointerDown, children, }) {
+    const isHorizontal = dockPosition === 'bottom';
+    return (_jsxs("div", { className: cx('comments-container', {
+            'dock-left': dockPosition === 'left',
+            'dock-right': dockPosition === 'right',
+            'dock-bottom': dockPosition === 'bottom',
+            'dock-undocked': dockPosition === 'undocked',
+        }), id: "comment-top", children: [showResizeHandle && (_jsx("div", { className: "comments-resize-handle", onPointerDown: onResizePointerDown, role: "separator", "aria-orientation": isHorizontal ? 'horizontal' : 'vertical', "aria-label": "Resize comments panel" })), children] }));
+}
+function CommentsHeader({ hasEditAccess, onToggleAdd, onClose, dockMenuOptions, }) {
+    const { t } = useTranslation('comments');
+    return (_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsxs("div", { className: "actions", children: [hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: onToggleAdd })), _jsx(DropdownMenu, { list: dockMenuOptions })] })] }));
+}
+export default function Comments({ uid, keywords, references, mode, onClose, onChange, initialOpenAdd = false, }) {
     const { t } = useTranslation('comments');
-    const [openAddComment, setOpenAddComment] = useState(false);
+    const [openAddComment, setOpenAddComment] = useState(initialOpenAdd);
     const [comment, setComment] = useState();
     const [comments, setComments] = useState();
     const [users, setUsers] = useState([]);
     const [reply, setReply] = useState();
+    const [drawerWidth, setDrawerWidth] = useState(CommentUtils.readStoredDrawerWidth);
+    const [drawerHeight, setDrawerHeight] = useState(CommentUtils.readStoredDrawerHeight);
+    const [dockPosition, setDockPosition] = useState(CommentUtils.readStoredDockPosition);
+    const [externalContainer, setExternalContainer] = useState(null);
+    const commentAddRef = useRef(null);
+    const popupRef = useRef(null);
+    const popupPollRef = useRef(null);
+    const ignorePopupCloseRef = useRef(false);
+    const lastDockedRef = useRef(null);
+    if (lastDockedRef.current === null) {
+        const initial = CommentUtils.readStoredDockPosition();
+        lastDockedRef.current = CommentUtils.isDockedPosition(initial)
+            ? initial
+            : 'right';
+    }
     const load = async () => {
         try {
             const [commentsResponse, usersResponse] = await Promise.all([
@@ -29,21 +59,216 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
         }
         catch (error) {
             console.error('Error loading comments or users', error);
-            // optionally handle specific error state here
         }
     };
     const hasEditAccess = useMemo(() => {
         return SecurityUtils.hasAccess(uid, ['ADMIN', 'EDITOR'], mode);
     }, [uid, mode]);
-    const hasReplies = (thisComment) => comments && comments.some((c) => c.reply === thisComment.id);
-    const getReplies = (thisComment) => comments?.filter((c) => c.reply === thisComment.id) || [];
+    const clearPopupPoll = useCallback(() => {
+        if (popupPollRef.current != null) {
+            window.clearInterval(popupPollRef.current);
+            popupPollRef.current = null;
+        }
+    }, []);
+    const redockFromPopup = useCallback(() => {
+        clearPopupPoll();
+        popupRef.current = null;
+        setExternalContainer(null);
+        if (ignorePopupCloseRef.current) {
+            ignorePopupCloseRef.current = false;
+            return;
+        }
+        setDockPosition((prev) => {
+            if (prev !== 'undocked')
+                return prev;
+            const next = lastDockedRef.current ?? 'right';
+            CommentUtils.persistDockPosition(next);
+            return next;
+        });
+    }, [clearPopupPoll]);
+    const closePopup = useCallback(() => {
+        clearPopupPoll();
+        const popup = popupRef.current;
+        if (popup && !popup.closed) {
+            ignorePopupCloseRef.current = true;
+            popup.close();
+        }
+        popupRef.current = null;
+        setExternalContainer(null);
+    }, [clearPopupPoll]);
+    const handleClose = useCallback(() => {
+        closePopup();
+        onClose();
+    }, [closePopup, onClose]);
+    const openUndockedWindow = useCallback(() => {
+        const existing = popupRef.current;
+        if (existing && !existing.closed) {
+            existing.focus();
+            setDockPosition('undocked');
+            return;
+        }
+        const opened = CommentUtils.openCommentsPopup();
+        if (!opened)
+            return;
+        const { popup, container } = opened;
+        ignorePopupCloseRef.current = false;
+        popupRef.current = popup;
+        setExternalContainer(container);
+        setDockPosition('undocked');
+        popup.addEventListener('beforeunload', () => {
+            redockFromPopup();
+        });
+        clearPopupPoll();
+        popupPollRef.current = window.setInterval(() => {
+            if (!popupRef.current || popupRef.current.closed) {
+                redockFromPopup();
+            }
+        }, 500);
+    }, [clearPopupPoll, redockFromPopup]);
+    const setDockedPosition = useCallback((position) => {
+        lastDockedRef.current = position;
+        CommentUtils.persistDockPosition(position);
+        closePopup();
+        setDockPosition(position);
+    }, [closePopup]);
+    const dockMenuOptions = useMemo(() => [
+        {
+            label: t('menu.undock'),
+            icon: 'open_in_new',
+            disabled: dockPosition === 'undocked',
+            onClick: () => {
+                if (dockPosition === 'undocked')
+                    return;
+                openUndockedWindow();
+            },
+        },
+        {
+            label: t('menu.dock.left'),
+            icon: 'dock_to_left',
+            disabled: dockPosition === 'left',
+            onClick: () => {
+                if (dockPosition === 'left')
+                    return;
+                setDockedPosition('left');
+            },
+        },
+        {
+            label: t('menu.dock.bottom'),
+            icon: 'dock_to_bottom',
+            disabled: dockPosition === 'bottom',
+            onClick: () => {
+                if (dockPosition === 'bottom')
+                    return;
+                setDockedPosition('bottom');
+            },
+        },
+        {
+            label: t('menu.dock.right'),
+            icon: 'dock_to_right',
+            disabled: dockPosition === 'right',
+            onClick: () => {
+                if (dockPosition === 'right')
+                    return;
+                setDockedPosition('right');
+            },
+        },
+    ], [dockPosition, openUndockedWindow, setDockedPosition, t]);
     useEffect(() => {
         load();
     }, []);
-    return (_jsx(Drawer, { anchor: "right", open: true, onClose: onClose, children: !comments ? (_jsx(AppLoading, {})) : (_jsxs("div", { className: "comments-container", id: "comment-top", children: [_jsxs("div", { className: "header", children: [_jsx(IconButton, { name: "close", size: "small", mode: "ghost", onClick: onClose }), _jsx("span", { className: "title", children: t('label.title.comments') }), _jsx("div", { className: "actions", children: hasEditAccess && (_jsx(Button, { text: t('button.add'), icon: "add", mode: "outlined", size: "small", className: "edit-button", onClick: () => {
-                                    setComment(undefined);
-                                    setOpenAddComment(!openAddComment);
-                                } })) })] }), _jsxs("div", { className: "body", children: [hasEditAccess && openAddComment && (_jsx(CommentAdd, { uid: uid, mode: mode, users: users, references: references, keywords: keywords, comment: comment, reply: reply, onClose: () => {
+    useEffect(() => {
+        if (!openAddComment || !comments)
+            return;
+        const frame = requestAnimationFrame(() => {
+            commentAddRef.current?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest',
+            });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [openAddComment, comments, comment, reply]);
+    useEffect(() => {
+        const onHostUnload = () => {
+            closePopup();
+        };
+        window.addEventListener('pagehide', onHostUnload);
+        window.addEventListener('beforeunload', onHostUnload);
+        return () => {
+            window.removeEventListener('pagehide', onHostUnload);
+            window.removeEventListener('beforeunload', onHostUnload);
+            closePopup();
+        };
+    }, [closePopup]);
+    const handleResizePointerDown = useCallback((event) => {
+        event.preventDefault();
+        const handle = event.currentTarget;
+        handle.setPointerCapture(event.pointerId);
+        const previousUserSelect = document.body.style.userSelect;
+        const previousCursor = document.body.style.cursor;
+        const isBottom = dockPosition === 'bottom';
+        const isLeft = dockPosition === 'left';
+        document.body.style.userSelect = 'none';
+        document.body.style.cursor = isBottom ? 'row-resize' : 'col-resize';
+        const computeSize = (clientX, clientY) => {
+            if (isBottom) {
+                return CommentUtils.clampDrawerHeight(window.innerHeight - clientY);
+            }
+            if (isLeft) {
+                return CommentUtils.clampDrawerWidth(clientX);
+            }
+            return CommentUtils.clampDrawerWidth(window.innerWidth - clientX);
+        };
+        const onPointerMove = (moveEvent) => {
+            const next = computeSize(moveEvent.clientX, moveEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+            }
+        };
+        const onPointerUp = (upEvent) => {
+            const next = computeSize(upEvent.clientX, upEvent.clientY);
+            if (isBottom) {
+                setDrawerHeight(next);
+                CommentUtils.persistDrawerHeight(next);
+            }
+            else {
+                setDrawerWidth(next);
+                CommentUtils.persistDrawerWidth(next);
+            }
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.cursor = previousCursor;
+            handle.releasePointerCapture(upEvent.pointerId);
+            handle.removeEventListener('pointermove', onPointerMove);
+            handle.removeEventListener('pointerup', onPointerUp);
+            handle.removeEventListener('pointercancel', onPointerUp);
+        };
+        handle.addEventListener('pointermove', onPointerMove);
+        handle.addEventListener('pointerup', onPointerUp);
+        handle.addEventListener('pointercancel', onPointerUp);
+    }, [dockPosition]);
+    const paperStyle = dockPosition === 'bottom'
+        ? { height: drawerHeight, width: '100%' }
+        : { width: drawerWidth };
+    const content = !comments ? (_jsx(AppLoading, { pageLoading: true })) : (_jsxs(_Fragment, { children: [_jsx(CommentsHeader, { hasEditAccess: hasEditAccess, onToggleAdd: () => {
+                    setComment(undefined);
+                    setOpenAddComment(!openAddComment);
+                }, onClose: handleClose, dockMenuOptions: dockMenuOptions }), _jsxs("div", { className: "body", children: [comments.length === 0 && !openAddComment && (_jsx(AppPlaceholder, { text: t('placeholder.comments.empty'), useMarginTop: true })), _jsx(CommentThread, { comments: comments, hasEditAccess: hasEditAccess, onRemove: (id) => {
+                            const updated = comments.filter((c) => c.id !== id);
+                            setComments(updated);
+                            onChange?.(updated);
+                        }, onUpdate: (thisComment) => {
+                            const updated = comments.map((c) => c.id === thisComment.id ? { ...c, ...thisComment } : c);
+                            setComments(updated);
+                            onChange?.(updated);
+                        }, onEdit: (el) => {
+                            setComment(el);
+                            setOpenAddComment(true);
+                        }, onReply: (el) => {
+                            setReply(el);
+                            setOpenAddComment(true);
+                        } }), hasEditAccess && openAddComment && (_jsx("div", { ref: commentAddRef, children: _jsx(CommentAdd, { uid: uid, mode: mode, users: users, references: references, keywords: keywords, comment: comment, reply: reply, onClose: () => {
                                 setComment(undefined);
                                 setReply(undefined);
                                 setOpenAddComment(false);
@@ -54,42 +279,22 @@ export default function Comments({ uid, keywords, references, mode, onClose, onC
                                     onChange?.(updated);
                                 }
                                 else {
-                                    const updated = comments?.map((c) => (c.id === comment.id ? el : c)) ||
-                                        [];
+                                    const updated = comments?.map((c) => (c.id === comment.id ? el : c)) || [];
                                     setComments(updated);
                                     onChange?.(updated);
                                 }
-                            } })), comments?.length === 0 && (_jsx(AppPlaceholder, { text: t('placeholder.comments.empty') })), comments?.map((el, idx) => (_jsxs("div", { className: "thread", children: [!el.reply && (_jsx(CommentInfo, { comment: el, hasEditAccess: hasEditAccess, onRemove: () => {
-                                        const updated = comments?.filter((c) => c.id !== el.id);
-                                        setComments(updated);
-                                        onChange && onChange(updated || []);
-                                    }, onUpdate: (thisComment) => {
-                                        const updated = comments?.map((c) => c.id === thisComment.id ? { ...c, ...thisComment } : c) || [];
-                                        setComments(updated);
-                                        onChange?.(updated);
-                                    }, onEdit: () => {
-                                        setComment(el);
-                                        setOpenAddComment(true);
-                                        UsabilityUtils.goToAnchor('comment-top');
-                                    }, onReply: () => {
-                                        setReply(el);
-                                        setOpenAddComment(true);
-                                        UsabilityUtils.goToAnchor('comment-top');
-                                    } })), hasReplies(el) && (_jsx("div", { className: "replies", children: getReplies(el).map((rel, idy) => (_jsx(CommentInfo, { comment: rel, hasEditAccess: hasEditAccess, onRemove: () => {
-                                            const updated = comments?.filter((c) => c.id !== rel.id);
-                                            setComments(updated);
-                                            onChange && onChange(updated || []);
-                                        }, onUpdate: (thisComment) => {
-                                            const updated = comments?.map((c) => c.id === thisComment.id
-                                                ? { ...c, ...thisComment }
-                                                : c) || [];
-                                            setComments(updated);
-                                            onChange?.(updated);
-                                        }, onEdit: () => {
-                                            setComment(rel);
-                                            setOpenAddComment(true);
-                                        }, onReply: () => {
-                                            setReply(rel);
-                                            setOpenAddComment(true);
-                                        } }, `${idx}_${idy}`))) }))] }, idx.valueOf())))] })] })) }));
+                            } }) }))] })] }));
+    const panel = (_jsx(CommentsPanel, { dockPosition: dockPosition, showResizeHandle: CommentUtils.isDockedPosition(dockPosition), onResizePointerDown: handleResizePointerDown, children: content }));
+    const isDocked = CommentUtils.isDockedPosition(dockPosition);
+    const drawerAnchor = isDocked
+        ? dockPosition
+        : (lastDockedRef.current ?? 'right');
+    return (_jsxs(_Fragment, { children: [_jsx(Drawer, { anchor: drawerAnchor, open: isDocked, onClose: handleClose, slotProps: {
+                    backdrop: { invisible: true },
+                }, PaperProps: {
+                    className: cx('comments-drawer-paper', `dock-${drawerAnchor}`),
+                    style: paperStyle,
+                }, children: isDocked ? panel : null }), dockPosition === 'undocked' &&
+                externalContainer &&
+                createPortal(_jsx("div", { className: "comments-undocked-root", children: panel }), externalContainer)] }));
 }