{
  "version": 3,
  "sources": ["../../src/ui/comments-list.tsx"],
  "sourcesContent": ["import { Avatar, type CommentAuthor } from '@tldraw/mentions'\nimport { Fragment, MouseEvent, ReactNode } from 'react'\nimport { useTranslation } from 'tldraw'\nimport { Byline } from './byline'\nimport { CheckIcon } from './icons'\nimport { Reactions, type ReactionSummary } from './reactions'\nimport { replyCountLabel } from './reply-count'\n\n/** @public */\nexport interface CommentListItemProps {\n\tid: string\n\tauthor: CommentAuthor\n\t/** A short preview of the thread \u2014 e.g. the first comment's body. */\n\tpreview: ReactNode\n\t/** ISO datetime of the thread's first comment. */\n\tdate: string\n\tresolved?: boolean\n\t/** Name of the page the thread lives on, shown as a small label. Omit to hide. */\n\tpage?: string\n\t/** Total comments in the thread. */\n\tcount?: number\n\t/** Whether this thread is the open one. */\n\tselected?: boolean\n\t/** Tallied reactions for the row (a thread's, or a single comment's when the row is one\n\t *  comment), shown as inert pills under the preview. Omit to hide. */\n\treactions?: ReactionSummary[]\n\t/**\n\t * Link target for the item. When set, the row renders as an anchor so browser affordances\n\t * (ctrl/cmd-click, middle-click) open it in a new tab; a plain click still calls `onSelect`.\n\t */\n\thref?: string\n}\n\n/**\n * What a row is rendered with: the item, plus the list-level wiring it needs to be interactive.\n * A custom row gets the same props the default `<CommentListItem>` does, so it can wrap the\n * default rather than reimplement it.\n *\n * @public\n */\nexport interface CommentListItemRenderProps extends CommentListItemProps {\n\t/** Label for a resolved thread's marker on its row. */\n\tresolvedLabel?: string\n\t/** Called with the thread id when the row is chosen. */\n\tonSelect?(id: string): void\n}\n\n/** @public */\nexport interface CommentsListProps {\n\titems: CommentListItemProps[]\n\t/** Called with a thread id when an item is chosen. */\n\tonSelect?(id: string): void\n\t/** Shown above the list (e.g. \"Comments\"). Omit for none. */\n\theader?: ReactNode\n\t/** Rendered at the right of the header row \u2014 e.g. a filter menu. */\n\theaderAction?: ReactNode\n\t/** Shown in place of the list when there are no threads. */\n\tempty?: ReactNode\n\t/** Label for a resolved thread's marker on its row. Defaults to \"Resolved\". */\n\tresolvedLabel?: string\n\t/**\n\t * Override how each item renders. Defaults to `<CommentListItem>`, which is exported \u2014 so a\n\t * row that only adds something can spread these props into it rather than start over. The list\n\t * supplies the key, so a custom row doesn't need one.\n\t */\n\trenderItem?(props: CommentListItemRenderProps): ReactNode\n}\n\n/**\n * A scrollable list of comment threads \u2014 each an avatar, byline, and a one-line preview.\n * Presentational: you supply the items (already summarised) and an `onSelect` handler; the canvas\n * `CanvasCommentsSidebar` wires it to the store, but a consumer can build their own list from this.\n * @public @react\n */\nexport function CommentsList({\n\titems,\n\tonSelect,\n\theader,\n\theaderAction,\n\tempty,\n\tresolvedLabel,\n\trenderItem,\n}: CommentsListProps) {\n\treturn (\n\t\t<div className=\"tlui-cmt-list\">\n\t\t\t{(header !== undefined || headerAction) && (\n\t\t\t\t<div className=\"tlui-cmt-list__header\">\n\t\t\t\t\t{header !== undefined && <span className=\"tlui-cmt-list__header-title\">{header}</span>}\n\t\t\t\t\t{headerAction}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{items.length === 0 ? (\n\t\t\t\t<div className=\"tlui-cmt-list__empty\">{empty}</div>\n\t\t\t) : (\n\t\t\t\t<div className=\"tlui-cmt-list__items\">\n\t\t\t\t\t{items.map((item) => {\n\t\t\t\t\t\tconst props: CommentListItemRenderProps = { ...item, resolvedLabel, onSelect }\n\t\t\t\t\t\t// A custom row is wrapped rather than keyed directly: it's the consumer's element,\n\t\t\t\t\t\t// and requiring them to remember a key is the kind of thing that only shows up as a\n\t\t\t\t\t\t// console warning in someone else's app.\n\t\t\t\t\t\treturn renderItem ? (\n\t\t\t\t\t\t\t<Fragment key={item.id}>{renderItem(props)}</Fragment>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<CommentListItem key={item.id} {...props} />\n\t\t\t\t\t\t)\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\n/** One thread's row in a {@link CommentsList}. @public @react */\nexport function CommentListItem({\n\tid,\n\tauthor,\n\tpreview,\n\tdate,\n\tresolved,\n\tpage,\n\tcount,\n\tselected,\n\treactions,\n\thref,\n\tresolvedLabel = 'Resolved',\n\tonSelect,\n}: CommentListItemRenderProps) {\n\tconst msg = useTranslation()\n\tconst handleClick = (e: MouseEvent) => {\n\t\tif (href && isOpenInNewTabClick(e)) return\n\t\te.preventDefault()\n\t\tif (onSelect) onSelect(id)\n\t}\n\tconst Tag = href ? 'a' : 'button'\n\t// `count` is the thread's total comments; a reply is every comment after the opening one.\n\tconst replies = count !== undefined ? replyCountLabel(msg, count - 1) : null\n\treturn (\n\t\t<Tag\n\t\t\t{...(href ? { href } : { type: 'button' })}\n\t\t\tclassName={\n\t\t\t\tselected ? 'tlui-cmt-list__item tlui-cmt-list__item--selected' : 'tlui-cmt-list__item'\n\t\t\t}\n\t\t\tdata-resolved={resolved || undefined}\n\t\t\tonClick={handleClick}\n\t\t>\n\t\t\t<Avatar author={author} />\n\t\t\t<div className=\"tlui-cmt-list__item-body\">\n\t\t\t\t<Byline author={author} date={date} />\n\t\t\t\t<div className=\"tlui-cmt-list__item-preview\">{preview}</div>\n\t\t\t\t{reactions && <Reactions reactions={reactions} canReact={false} enableHoverList={false} />}\n\t\t\t\t{(resolved || page !== undefined || replies) && (\n\t\t\t\t\t<div className=\"tlui-cmt-list__item-meta\">\n\t\t\t\t\t\t{resolved && (\n\t\t\t\t\t\t\t<span className=\"tlui-cmt-list__item-resolved\">\n\t\t\t\t\t\t\t\t<CheckIcon />\n\t\t\t\t\t\t\t\t{resolvedLabel}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{page !== undefined && <span className=\"tlui-cmt-list__item-page\">{page}</span>}\n\t\t\t\t\t\t{replies && <span className=\"tlui-cmt-list__item-replies\">{replies}</span>}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</Tag>\n\t)\n}\n\n/**\n * Whether a click should be left to the browser's link handling (new tab, new window, or download).\n * @public\n */\nexport function isOpenInNewTabClick(e: MouseEvent) {\n\treturn e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0\n}\n"],
  "mappings": "AAsFI,SAC0B,KAD1B;AAtFJ,SAAS,cAAkC;AAC3C,SAAS,gBAAuC;AAChD,SAAS,sBAAsB;AAC/B,SAAS,cAAc;AACvB,SAAS,iBAAiB;AAC1B,SAAS,iBAAuC;AAChD,SAAS,uBAAuB;AAoEzB,SAAS,aAAa;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAsB;AACrB,SACC,qBAAC,SAAI,WAAU,iBACZ;AAAA,gBAAW,UAAa,iBACzB,qBAAC,SAAI,WAAU,yBACb;AAAA,iBAAW,UAAa,oBAAC,UAAK,WAAU,+BAA+B,kBAAO;AAAA,MAC9E;AAAA,OACF;AAAA,IAEA,MAAM,WAAW,IACjB,oBAAC,SAAI,WAAU,wBAAwB,iBAAM,IAE7C,oBAAC,SAAI,WAAU,wBACb,gBAAM,IAAI,CAAC,SAAS;AACpB,YAAM,QAAoC,EAAE,GAAG,MAAM,eAAe,SAAS;AAI7E,aAAO,aACN,oBAAC,YAAwB,qBAAW,KAAK,KAA1B,KAAK,EAAuB,IAE3C,oBAAC,mBAA+B,GAAG,SAAb,KAAK,EAAe;AAAA,IAE5C,CAAC,GACF;AAAA,KAEF;AAEF;AAGO,SAAS,gBAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAA+B;AAC9B,QAAM,MAAM,eAAe;AAC3B,QAAM,cAAc,CAAC,MAAkB;AACtC,QAAI,QAAQ,oBAAoB,CAAC,EAAG;AACpC,MAAE,eAAe;AACjB,QAAI,SAAU,UAAS,EAAE;AAAA,EAC1B;AACA,QAAM,MAAM,OAAO,MAAM;AAEzB,QAAM,UAAU,UAAU,SAAY,gBAAgB,KAAK,QAAQ,CAAC,IAAI;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAI,OAAO,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS;AAAA,MACxC,WACC,WAAW,sDAAsD;AAAA,MAElE,iBAAe,YAAY;AAAA,MAC3B,SAAS;AAAA,MAET;AAAA,4BAAC,UAAO,QAAgB;AAAA,QACxB,qBAAC,SAAI,WAAU,4BACd;AAAA,8BAAC,UAAO,QAAgB,MAAY;AAAA,UACpC,oBAAC,SAAI,WAAU,+BAA+B,mBAAQ;AAAA,UACrD,aAAa,oBAAC,aAAU,WAAsB,UAAU,OAAO,iBAAiB,OAAO;AAAA,WACtF,YAAY,SAAS,UAAa,YACnC,qBAAC,SAAI,WAAU,4BACb;AAAA,wBACA,qBAAC,UAAK,WAAU,gCACf;AAAA,kCAAC,aAAU;AAAA,cACV;AAAA,eACF;AAAA,YAEA,SAAS,UAAa,oBAAC,UAAK,WAAU,4BAA4B,gBAAK;AAAA,YACvE,WAAW,oBAAC,UAAK,WAAU,+BAA+B,mBAAQ;AAAA,aACpE;AAAA,WAEF;AAAA;AAAA;AAAA,EACD;AAEF;AAMO,SAAS,oBAAoB,GAAe;AAClD,SAAO,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW;AACzE;",
  "names": []
}