@focus-reactive/payload-plugin-comments 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -6
- package/dist/components/CommentEditor/ActionPanel.d.ts +1 -1
- package/dist/components/CommentEditor/ActionPanel.d.ts.map +1 -1
- package/dist/components/CommentEditor/ActionPanel.js +18 -3
- package/dist/components/CommentEditor/ActionPanel.js.map +1 -1
- package/dist/components/CommentsPanel/components/DocumentView.d.ts.map +1 -1
- package/dist/components/CommentsPanel/components/DocumentView.js +10 -2
- package/dist/components/CommentsPanel/components/DocumentView.js.map +1 -1
- package/dist/components/CommentsPanel/components/GlobalDocumentView.js +2 -2
- package/dist/components/CommentsPanel/components/GlobalDocumentView.js.map +1 -1
- package/dist/components/FieldCommentLabel/AddCommentPopup.js +1 -1
- package/dist/components/FieldCommentLabel/AddCommentPopup.js.map +1 -1
- package/dist/components/FieldCommentLabel/index.d.ts +1 -1
- package/dist/components/FieldCommentLabel/index.d.ts.map +1 -1
- package/dist/components/FieldCommentLabel/index.js +2 -1
- package/dist/components/FieldCommentLabel/index.js.map +1 -1
- package/dist/components/FieldCommentLabel/types.d.ts +1 -1
- package/dist/components/FieldCommentLabel/types.d.ts.map +1 -1
- package/dist/components/IconButton/index.d.ts +2 -2
- package/dist/components/IconButton/index.d.ts.map +1 -1
- package/dist/components/IconButton/index.js +11 -1
- package/dist/components/IconButton/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
# @focus-reactive/payload-plugin-comments
|
|
2
2
|
|
|
3
|
+
|
|
3
4
|
[](https://www.npmjs.com/package/@focus-reactive/payload-plugin-comments)
|
|
4
5
|
|
|
5
6
|
A collaborative commenting plugin for [Payload CMS](https://payloadcms.com/) v3. Adds a full-featured comments system to the Payload admin panel — supporting document-level and field-level comments on both collections and globals, @mentions with email notifications, comment resolution, multi-tenancy, and locale-aware filtering.
|
|
@@ -145,27 +146,28 @@ RESEND_FROM_EMAIL=comments@yourdomain.com
|
|
|
145
146
|
|
|
146
147
|
A header button in the Payload admin opens a drawer listing all comments across every document and collection.
|
|
147
148
|
|
|
148
|
-
|
|
149
150
|
|
|
150
151
|
### Document Comments Panel
|
|
151
152
|
|
|
152
153
|
When viewing a document, a side panel shows all comments scoped to that document with filter tabs (Open / Resolved / Mentioned me).
|
|
153
154
|
|
|
154
|
-
|
|
155
156
|
|
|
156
157
|
### Field Comment Popup
|
|
157
158
|
|
|
158
159
|
Clicking the comment badge on a field label opens a popup where you can write and post a new comment for that specific field.
|
|
159
160
|
|
|
160
|
-
|
|
161
162
|
|
|
162
163
|
### Field Label Button — Two States
|
|
163
164
|
|
|
164
165
|
The comment button embedded in the field label has two visual states: no comments (inactive, appears on hover) and one or more open comments (active, showing the count badge).
|
|
165
166
|
|
|
166
|
-
| Inactive (no comments)
|
|
167
|
-
|
|
|
168
|
-
|  | Active (has comments) |
|
|
168
|
+
| ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
|
|
169
|
+
|  |  |
|
|
170
|
+
| |
|
|
169
171
|
|
|
170
172
|
---
|
|
171
173
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ActionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"names":[],"mappings":"AAMA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,KAAK,2CAqCxE"}
|
|
@@ -1,14 +1,29 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { AtSign, SendHorizontal } from "lucide-react";
|
|
3
|
+
import { useRef, useEffect } from "react";
|
|
3
4
|
import { IconButton } from "../IconButton";
|
|
4
5
|
import { useTranslation } from "@payloadcms/ui";
|
|
5
6
|
import { cn } from "../../utils/general/cn";
|
|
6
7
|
function ActionPanel({ className, onMention, onAddComment }) {
|
|
7
8
|
const { t } = useTranslation();
|
|
8
|
-
|
|
9
|
-
|
|
9
|
+
const wrapperRef = useRef(null);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const wrapper = wrapperRef.current;
|
|
12
|
+
if (!wrapper) return;
|
|
13
|
+
const handleClick = (e) => {
|
|
14
|
+
e.stopPropagation();
|
|
15
|
+
const target = e.target;
|
|
16
|
+
const action = target.closest("[data-action]")?.getAttribute("data-action");
|
|
17
|
+
if (action === "mention") onMention();
|
|
18
|
+
if (action === "add-comment") onAddComment();
|
|
19
|
+
};
|
|
20
|
+
wrapper.addEventListener("click", handleClick);
|
|
21
|
+
return () => wrapper.removeEventListener("click", handleClick);
|
|
22
|
+
}, [onMention, onAddComment]);
|
|
23
|
+
return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: cn("flex justify-end items-center gap-1 pt-2", className), children: [
|
|
24
|
+
/* @__PURE__ */ jsx(IconButton, { title: "Mention user", "data-action": "mention", children: /* @__PURE__ */ jsx(AtSign, { size: 16 }) }),
|
|
10
25
|
/* @__PURE__ */ jsx("hr", { className: "w-px h-[20px] bg-(--theme-elevation-150) m-0" }),
|
|
11
|
-
/* @__PURE__ */ jsx(IconButton, { variant: "primary", title: t("comments:comment"),
|
|
26
|
+
/* @__PURE__ */ jsx(IconButton, { variant: "primary", title: t("comments:comment"), "data-action": "add-comment", children: /* @__PURE__ */ jsx(SendHorizontal, { size: 16 }) })
|
|
12
27
|
] });
|
|
13
28
|
}
|
|
14
29
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"sourcesContent":["import { AtSign, SendHorizontal } from \"lucide-react\";\nimport { IconButton } from \"../IconButton\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\n\ninterface Props {\n className?: string;\n onMention: (
|
|
1
|
+
{"version":3,"sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"sourcesContent":["import { AtSign, SendHorizontal } from \"lucide-react\";\nimport { useRef, useEffect } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { useTranslation } from \"@payloadcms/ui\";\nimport { cn } from \"../../utils/general/cn\";\n\ninterface Props {\n className?: string;\n onMention: () => void;\n onAddComment: () => void;\n}\n\nexport function ActionPanel({ className, onMention, onAddComment }: Props) {\n const { t } = useTranslation();\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n const wrapper = wrapperRef.current;\n if (!wrapper) return;\n\n const handleClick = (e: MouseEvent) => {\n e.stopPropagation();\n\n const target = e.target as HTMLElement;\n\n const action = target.closest(\"[data-action]\")?.getAttribute(\"data-action\");\n\n if (action === \"mention\") onMention();\n if (action === \"add-comment\") onAddComment();\n };\n\n wrapper.addEventListener(\"click\", handleClick);\n\n return () => wrapper.removeEventListener(\"click\", handleClick);\n }, [onMention, onAddComment]);\n\n return (\n <div ref={wrapperRef} className={cn(\"flex justify-end items-center gap-1 pt-2\", className)}>\n <IconButton title=\"Mention user\" data-action=\"mention\">\n <AtSign size={16} />\n </IconButton>\n\n <hr className=\"w-px h-[20px] bg-(--theme-elevation-150) m-0\" />\n\n <IconButton variant=\"primary\" title={t(\"comments:comment\" as never)} data-action=\"add-comment\">\n <SendHorizontal size={16} />\n </IconButton>\n </div>\n );\n}\n"],"mappings":"AAqCI,SAEI,KAFJ;AArCJ,SAAS,QAAQ,sBAAsB;AACvC,SAAS,QAAQ,iBAAiB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAQZ,SAAS,YAAY,EAAE,WAAW,WAAW,aAAa,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,aAAa,OAAuB,IAAI;AAE9C,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS;AAEd,UAAM,cAAc,CAAC,MAAkB;AACrC,QAAE,gBAAgB;AAElB,YAAM,SAAS,EAAE;AAEjB,YAAM,SAAS,OAAO,QAAQ,eAAe,GAAG,aAAa,aAAa;AAE1E,UAAI,WAAW,UAAW,WAAU;AACpC,UAAI,WAAW,cAAe,cAAa;AAAA,IAC7C;AAEA,YAAQ,iBAAiB,SAAS,WAAW;AAE7C,WAAO,MAAM,QAAQ,oBAAoB,SAAS,WAAW;AAAA,EAC/D,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,SACE,qBAAC,SAAI,KAAK,YAAY,WAAW,GAAG,4CAA4C,SAAS,GACvF;AAAA,wBAAC,cAAW,OAAM,gBAAe,eAAY,WAC3C,8BAAC,UAAO,MAAM,IAAI,GACpB;AAAA,IAEA,oBAAC,QAAG,WAAU,gDAA+C;AAAA,IAE7D,oBAAC,cAAW,SAAQ,WAAU,OAAO,EAAE,kBAA2B,GAAG,eAAY,eAC/E,8BAAC,kBAAe,MAAM,IAAI,GAC5B;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"DocumentView.d.ts","sourceRoot":"","sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAM9C,UAAU,KAAK;IACb,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,KAAK,2CAsBlE"}
|
|
@@ -7,11 +7,19 @@ import { FILTER_NO_COMMENTS_KEYS } from "../constants";
|
|
|
7
7
|
import { FieldGroupSection } from "./FieldGroupSection";
|
|
8
8
|
function DocumentView({ comments, userId, className }) {
|
|
9
9
|
const { t } = useTranslation();
|
|
10
|
-
const { filter } = useComments();
|
|
10
|
+
const { filter, collectionSlug, documentId } = useComments();
|
|
11
11
|
const fields = groupCommentsByFieldPath(comments);
|
|
12
12
|
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
13
13
|
comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0", children: t(FILTER_NO_COMMENTS_KEYS[filter]) }),
|
|
14
|
-
/* @__PURE__ */ jsx(
|
|
14
|
+
/* @__PURE__ */ jsx(
|
|
15
|
+
FieldGroupSection,
|
|
16
|
+
{
|
|
17
|
+
fields,
|
|
18
|
+
userId,
|
|
19
|
+
collectionSlug: collectionSlug ?? void 0,
|
|
20
|
+
documentId: documentId ?? void 0
|
|
21
|
+
}
|
|
22
|
+
)
|
|
15
23
|
] });
|
|
16
24
|
}
|
|
17
25
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n comments: Comment[];\n userId: number | null;\n className: string;\n}\n\nexport function DocumentView({ comments, userId, className }: Props) {\n const { t } = useTranslation();\n const { filter } = useComments();\n\n const fields = groupCommentsByFieldPath(comments);\n\n return (\n <div className={className}>\n {comments.length === 0 && (\n <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n </p>\n )}\n\n <FieldGroupSection
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CommentsPanel/components/DocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n comments: Comment[];\n userId: number | null;\n className: string;\n}\n\nexport function DocumentView({ comments, userId, className }: Props) {\n const { t } = useTranslation();\n const { filter, collectionSlug, documentId } = useComments();\n\n const fields = groupCommentsByFieldPath(comments);\n\n return (\n <div className={className}>\n {comments.length === 0 && (\n <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n </p>\n )}\n\n <FieldGroupSection\n fields={fields}\n userId={userId}\n collectionSlug={collectionSlug ?? undefined}\n documentId={documentId ?? undefined}\n />\n </div>\n );\n}\n"],"mappings":";AAsBI,SAEI,KAFJ;AApBJ,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAQ3B,SAAS,aAAa,EAAE,UAAU,QAAQ,UAAU,GAAU;AACnE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,QAAQ,gBAAgB,WAAW,IAAI,YAAY;AAE3D,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGF;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,gBAAgB,kBAAkB;AAAA,QAClC,YAAY,cAAc;AAAA;AAAA,IAC5B;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -7,11 +7,11 @@ import { FILTER_NO_COMMENTS_KEYS } from "../constants";
|
|
|
7
7
|
import { FieldGroupSection } from "./FieldGroupSection";
|
|
8
8
|
function GlobalDocumentView({ comments, userId, className }) {
|
|
9
9
|
const { t } = useTranslation();
|
|
10
|
-
const { filter } = useComments();
|
|
10
|
+
const { filter, globalSlug } = useComments();
|
|
11
11
|
const fields = groupCommentsByFieldPath(comments);
|
|
12
12
|
return /* @__PURE__ */ jsxs("div", { className, children: [
|
|
13
13
|
comments.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-(--theme-elevation-450) text-[13px] text-center py-6 m-0", children: t(FILTER_NO_COMMENTS_KEYS[filter]) }),
|
|
14
|
-
/* @__PURE__ */ jsx(FieldGroupSection, { fields, userId })
|
|
14
|
+
/* @__PURE__ */ jsx(FieldGroupSection, { fields, userId, globalSlug: globalSlug ?? void 0 })
|
|
15
15
|
] });
|
|
16
16
|
}
|
|
17
17
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n comments: Comment[];\n userId: number | null;\n className: string;\n}\n\nexport function GlobalDocumentView({ comments, userId, className }: Props) {\n const { t } = useTranslation();\n const { filter } = useComments();\n\n const fields = groupCommentsByFieldPath(comments);\n\n return (\n <div className={className}>\n {comments.length === 0 && (\n <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n </p>\n )}\n\n <FieldGroupSection fields={fields} userId={userId} />\n </div>\n );\n}\n"],"mappings":";AAsBI,SAEI,KAFJ;AApBJ,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAQ3B,SAAS,mBAAmB,EAAE,UAAU,QAAQ,UAAU,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/CommentsPanel/components/GlobalDocumentView.tsx"],"sourcesContent":["\"use client\";\n\nimport { useTranslation } from \"@payloadcms/ui\";\nimport type { Comment } from \"../../../types\";\nimport { useComments } from \"../../../providers/CommentsProvider\";\nimport { groupCommentsByFieldPath } from \"../utils/groupCommentsByFieldPath\";\nimport { FILTER_NO_COMMENTS_KEYS } from \"../constants\";\nimport { FieldGroupSection } from \"./FieldGroupSection\";\n\ninterface Props {\n comments: Comment[];\n userId: number | null;\n className: string;\n}\n\nexport function GlobalDocumentView({ comments, userId, className }: Props) {\n const { t } = useTranslation();\n const { filter, globalSlug } = useComments();\n\n const fields = groupCommentsByFieldPath(comments);\n\n return (\n <div className={className}>\n {comments.length === 0 && (\n <p className=\"text-(--theme-elevation-450) text-[13px] text-center py-6 m-0\">\n {t(FILTER_NO_COMMENTS_KEYS[filter] as never)}\n </p>\n )}\n\n <FieldGroupSection fields={fields} userId={userId} globalSlug={globalSlug ?? undefined} />\n </div>\n );\n}\n"],"mappings":";AAsBI,SAEI,KAFJ;AApBJ,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB;AAC5B,SAAS,gCAAgC;AACzC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAQ3B,SAAS,mBAAmB,EAAE,UAAU,QAAQ,UAAU,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,QAAQ,WAAW,IAAI,YAAY;AAE3C,QAAM,SAAS,yBAAyB,QAAQ;AAEhD,SACE,qBAAC,SAAI,WACF;AAAA,aAAS,WAAW,KACnB,oBAAC,OAAE,WAAU,iEACV,YAAE,wBAAwB,MAAM,CAAU,GAC7C;AAAA,IAGF,oBAAC,qBAAkB,QAAgB,QAAgB,YAAY,cAAc,QAAW;AAAA,KAC1F;AAEJ;","names":[]}
|
|
@@ -24,6 +24,7 @@ function AddCommentPopup({ fieldPath, showTrigger, onToggle }) {
|
|
|
24
24
|
setTimeout(() => editorAPI.current?.focus());
|
|
25
25
|
},
|
|
26
26
|
onToggleClose: () => {
|
|
27
|
+
onToggle(false);
|
|
27
28
|
editorAPI.current?.clear();
|
|
28
29
|
},
|
|
29
30
|
render: ({ close }) => /* @__PURE__ */ jsxs("div", { className: "w-80", children: [
|
|
@@ -34,7 +35,6 @@ function AddCommentPopup({ fieldPath, showTrigger, onToggle }) {
|
|
|
34
35
|
ref: editorAPI,
|
|
35
36
|
fieldPath,
|
|
36
37
|
globalSlug: mode === "global-document" ? globalSlug ?? void 0 : void 0,
|
|
37
|
-
autoFocus: true,
|
|
38
38
|
onSuccessAddComment: close,
|
|
39
39
|
onEscapePress: close,
|
|
40
40
|
placeholder: `${t("comments:writeComment")}\u2026`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popup, useTranslation } from \"@payloadcms/ui\";\nimport { IconButton } from \"../IconButton\";\nimport { cn } from \"../../utils/general/cn\";\nimport { MessageSquarePlus } from \"lucide-react\";\nimport { CommentEditor, type CommentEditorHandle } from \"../CommentEditor\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { useRef } from \"react\";\n\ninterface Props {\n fieldPath: string;\n showTrigger: boolean;\n onToggle: (isOpen: boolean) => void;\n}\n\nexport function AddCommentPopup({ fieldPath, showTrigger, onToggle }: Props) {\n const { t } = useTranslation();\n const { mode, globalSlug } = useComments();\n const editorAPI = useRef<CommentEditorHandle | null>(null);\n\n const trigger = (\n <IconButton className={cn(showTrigger ? \"opacity-100\" : \"opacity-0\")} size=\"sm\" title={t(\"comments:add\" as never)}>\n <MessageSquarePlus size={14} />\n </IconButton>\n );\n\n return (\n <Popup\n buttonType=\"custom\"\n button={trigger}\n horizontalAlign=\"right\"\n size=\"fit-content\"\n onToggleOpen={(active: boolean) => {\n onToggle(active);\n setTimeout(() => editorAPI.current?.focus());\n }}\n onToggleClose={() => {\n editorAPI.current?.clear();\n }}\n render={({ close }) => (\n <div className=\"w-80\">\n <p className=\"m-0 mb-3 text-[14px] font-semibold text-(--theme-text)\">{t(\"comments:add\" as never)}</p>\n\n <CommentEditor\n ref={editorAPI}\n fieldPath={fieldPath}\n globalSlug={mode === \"global-document\" ? (globalSlug ?? undefined) : undefined}\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"sourcesContent":["\"use client\";\n\nimport { Popup, useTranslation } from \"@payloadcms/ui\";\nimport { IconButton } from \"../IconButton\";\nimport { cn } from \"../../utils/general/cn\";\nimport { MessageSquarePlus } from \"lucide-react\";\nimport { CommentEditor, type CommentEditorHandle } from \"../CommentEditor\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport { useRef } from \"react\";\n\ninterface Props {\n fieldPath: string;\n showTrigger: boolean;\n onToggle: (isOpen: boolean) => void;\n}\n\nexport function AddCommentPopup({ fieldPath, showTrigger, onToggle }: Props) {\n const { t } = useTranslation();\n const { mode, globalSlug } = useComments();\n const editorAPI = useRef<CommentEditorHandle | null>(null);\n\n const trigger = (\n <IconButton className={cn(showTrigger ? \"opacity-100\" : \"opacity-0\")} size=\"sm\" title={t(\"comments:add\" as never)}>\n <MessageSquarePlus size={14} />\n </IconButton>\n );\n\n return (\n <Popup\n buttonType=\"custom\"\n button={trigger}\n horizontalAlign=\"right\"\n size=\"fit-content\"\n onToggleOpen={(active: boolean) => {\n onToggle(active);\n setTimeout(() => editorAPI.current?.focus());\n }}\n onToggleClose={() => {\n onToggle(false);\n editorAPI.current?.clear();\n }}\n render={({ close }) => (\n <div className=\"w-80\">\n <p className=\"m-0 mb-3 text-[14px] font-semibold text-(--theme-text)\">{t(\"comments:add\" as never)}</p>\n\n <CommentEditor\n ref={editorAPI}\n fieldPath={fieldPath}\n globalSlug={mode === \"global-document\" ? (globalSlug ?? undefined) : undefined}\n onSuccessAddComment={close}\n onEscapePress={close}\n placeholder={`${t(\"comments:writeComment\" as never)}…`}\n />\n </div>\n )}\n />\n );\n}\n"],"mappings":";AAuBM,cAmBE,YAnBF;AArBN,SAAS,OAAO,sBAAsB;AACtC,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AACnB,SAAS,yBAAyB;AAClC,SAAS,qBAA+C;AACxD,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AAQhB,SAAS,gBAAgB,EAAE,WAAW,aAAa,SAAS,GAAU;AAC3E,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,MAAM,WAAW,IAAI,YAAY;AACzC,QAAM,YAAY,OAAmC,IAAI;AAEzD,QAAM,UACJ,oBAAC,cAAW,WAAW,GAAG,cAAc,gBAAgB,WAAW,GAAG,MAAK,MAAK,OAAO,EAAE,cAAuB,GAC9G,8BAAC,qBAAkB,MAAM,IAAI,GAC/B;AAGF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,YAAW;AAAA,MACX,QAAQ;AAAA,MACR,iBAAgB;AAAA,MAChB,MAAK;AAAA,MACL,cAAc,CAAC,WAAoB;AACjC,iBAAS,MAAM;AACf,mBAAW,MAAM,UAAU,SAAS,MAAM,CAAC;AAAA,MAC7C;AAAA,MACA,eAAe,MAAM;AACnB,iBAAS,KAAK;AACd,kBAAU,SAAS,MAAM;AAAA,MAC3B;AAAA,MACA,QAAQ,CAAC,EAAE,MAAM,MACf,qBAAC,SAAI,WAAU,QACb;AAAA,4BAAC,OAAE,WAAU,0DAA0D,YAAE,cAAuB,GAAE;AAAA,QAElG;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL;AAAA,YACA,YAAY,SAAS,oBAAqB,cAAc,SAAa;AAAA,YACrE,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,aAAa,GAAG,EAAE,uBAAgC,CAAC;AAAA;AAAA,QACrD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -6,6 +6,6 @@ interface Props extends FieldLabelClientProps {
|
|
|
6
6
|
required?: boolean;
|
|
7
7
|
};
|
|
8
8
|
}
|
|
9
|
-
export declare function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props): import("react/jsx-runtime").JSX.Element | null;
|
|
10
10
|
export {};
|
|
11
11
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQrC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,GAAG;QACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AACrD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAQrC,UAAU,KAAM,SAAQ,qBAAqB;IAC3C,KAAK,EAAE,qBAAqB,CAAC,OAAO,CAAC,GAAG;QACtC,KAAK,CAAC,EAAE,KAAK,CAAC;QACd,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,KAAK,kDAwD3E"}
|
|
@@ -30,6 +30,7 @@ function FieldCommentLabel({ field, htmlFor, path: fieldPath }) {
|
|
|
30
30
|
const handleToggle = (isOpen) => {
|
|
31
31
|
setIsPopupOpen(isOpen);
|
|
32
32
|
};
|
|
33
|
+
if (!resolvedLabel) return null;
|
|
33
34
|
return /* @__PURE__ */ jsxs(
|
|
34
35
|
"div",
|
|
35
36
|
{
|
|
@@ -37,7 +38,7 @@ function FieldCommentLabel({ field, htmlFor, path: fieldPath }) {
|
|
|
37
38
|
onMouseEnter: () => setIsHovered(true),
|
|
38
39
|
onMouseLeave: () => setIsHovered(false),
|
|
39
40
|
children: [
|
|
40
|
-
|
|
41
|
+
/* @__PURE__ */ jsxs("label", { className: "field-label p-0", htmlFor, children: [
|
|
41
42
|
resolvedLabel,
|
|
42
43
|
required && /* @__PURE__ */ jsx("span", { className: "required", children: "*" })
|
|
43
44
|
] }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FieldCommentLabel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useTranslation, useLocale } from \"@payloadcms/ui\";\nimport { MessageSquareIcon } from \"lucide-react\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport type { FieldLabelClientProps } from \"payload\";\nimport type { Label } from \"./types\";\nimport { resolveLabel } from \"./utils/resolveLabel\";\nimport { excludeComments } from \"./utils/exludeComments\";\nimport { useStablePath } from \"./hooks/useStablePath\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\nimport { AddCommentPopup } from \"./AddCommentPopup\";\n\ninterface Props extends FieldLabelClientProps {\n field: FieldLabelClientProps[\"field\"] & {\n label?: Label;\n required?: boolean;\n };\n}\n\nexport function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props) {\n const { label, required } = field;\n\n const { t } = useTranslation();\n const { code: locale } = useLocale();\n const { open: openDrawer, setScrollTargetPath } = useCommentsDrawer();\n const { visibleComments, setFilter, mode } = useComments();\n\n const [isHovered, setIsHovered] = useState(false);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const resolvedLabel = resolveLabel(label, locale);\n const stablePath = useStablePath(fieldPath ?? \"\");\n const fieldComments = excludeComments(visibleComments, stablePath || undefined, locale);\n const openCommentsCount = fieldComments.length;\n\n const handleOpenDrawer = () => {\n setFilter(\"open\");\n setScrollTargetPath(stablePath || null);\n openDrawer();\n };\n\n const handleToggle = (isOpen: boolean) => {\n setIsPopupOpen(isOpen);\n };\n\n return (\n <div\n className=\"flex items-center gap-1.5 pb-1.25\"\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}>\n
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FieldCommentLabel/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport { useTranslation, useLocale } from \"@payloadcms/ui\";\nimport { MessageSquareIcon } from \"lucide-react\";\nimport { useComments } from \"../../providers/CommentsProvider\";\nimport type { FieldLabelClientProps } from \"payload\";\nimport type { Label } from \"./types\";\nimport { resolveLabel } from \"./utils/resolveLabel\";\nimport { excludeComments } from \"./utils/exludeComments\";\nimport { useStablePath } from \"./hooks/useStablePath\";\nimport { useCommentsDrawer } from \"../../providers/CommentsDrawerProvider\";\nimport { IconButton } from \"../IconButton\";\nimport { AddCommentPopup } from \"./AddCommentPopup\";\n\ninterface Props extends FieldLabelClientProps {\n field: FieldLabelClientProps[\"field\"] & {\n label?: Label;\n required?: boolean;\n };\n}\n\nexport function FieldCommentLabel({ field, htmlFor, path: fieldPath }: Props) {\n const { label, required } = field;\n\n const { t } = useTranslation();\n const { code: locale } = useLocale();\n const { open: openDrawer, setScrollTargetPath } = useCommentsDrawer();\n const { visibleComments, setFilter, mode } = useComments();\n\n const [isHovered, setIsHovered] = useState(false);\n const [isPopupOpen, setIsPopupOpen] = useState(false);\n\n const resolvedLabel = resolveLabel(label, locale);\n const stablePath = useStablePath(fieldPath ?? \"\");\n const fieldComments = excludeComments(visibleComments, stablePath || undefined, locale);\n const openCommentsCount = fieldComments.length;\n\n const handleOpenDrawer = () => {\n setFilter(\"open\");\n setScrollTargetPath(stablePath || null);\n openDrawer();\n };\n\n const handleToggle = (isOpen: boolean) => {\n setIsPopupOpen(isOpen);\n };\n\n if (!resolvedLabel) return null;\n\n return (\n <div\n className=\"flex items-center gap-1.5 pb-1.25\"\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}>\n <label className=\"field-label p-0\" htmlFor={htmlFor}>\n {resolvedLabel}\n\n {required && <span className=\"required\">*</span>}\n </label>\n\n {fieldPath && (mode === \"document\" || mode === \"global-document\") && (\n <div className=\"relative flex items-center\">\n {openCommentsCount > 0 ?\n <IconButton\n className=\"w-auto px-1 gap-1 text-[12px] font-semibold leading-none\"\n size=\"sm\"\n title={t(\"comments:openComments\" as never, { count: openCommentsCount })}\n onClick={handleOpenDrawer}>\n <MessageSquareIcon size={14} />\n\n {openCommentsCount}\n </IconButton>\n : <AddCommentPopup fieldPath={stablePath} showTrigger={isHovered || isPopupOpen} onToggle={handleToggle} />}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":";AAuDM,SAGe,KAHf;AArDN,SAAS,gBAAgB;AACzB,SAAS,gBAAgB,iBAAiB;AAC1C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAG5B,SAAS,oBAAoB;AAC7B,SAAS,uBAAuB;AAChC,SAAS,qBAAqB;AAC9B,SAAS,yBAAyB;AAClC,SAAS,kBAAkB;AAC3B,SAAS,uBAAuB;AASzB,SAAS,kBAAkB,EAAE,OAAO,SAAS,MAAM,UAAU,GAAU;AAC5E,QAAM,EAAE,OAAO,SAAS,IAAI;AAE5B,QAAM,EAAE,EAAE,IAAI,eAAe;AAC7B,QAAM,EAAE,MAAM,OAAO,IAAI,UAAU;AACnC,QAAM,EAAE,MAAM,YAAY,oBAAoB,IAAI,kBAAkB;AACpE,QAAM,EAAE,iBAAiB,WAAW,KAAK,IAAI,YAAY;AAEzD,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,KAAK;AAEpD,QAAM,gBAAgB,aAAa,OAAO,MAAM;AAChD,QAAM,aAAa,cAAc,aAAa,EAAE;AAChD,QAAM,gBAAgB,gBAAgB,iBAAiB,cAAc,QAAW,MAAM;AACtF,QAAM,oBAAoB,cAAc;AAExC,QAAM,mBAAmB,MAAM;AAC7B,cAAU,MAAM;AAChB,wBAAoB,cAAc,IAAI;AACtC,eAAW;AAAA,EACb;AAEA,QAAM,eAAe,CAAC,WAAoB;AACxC,mBAAe,MAAM;AAAA,EACvB;AAEA,MAAI,CAAC,cAAe,QAAO;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,cAAc,MAAM,aAAa,IAAI;AAAA,MACrC,cAAc,MAAM,aAAa,KAAK;AAAA,MACtC;AAAA,6BAAC,WAAM,WAAU,mBAAkB,SAChC;AAAA;AAAA,UAEA,YAAY,oBAAC,UAAK,WAAU,YAAW,eAAC;AAAA,WAC3C;AAAA,QAEC,cAAc,SAAS,cAAc,SAAS,sBAC7C,oBAAC,SAAI,WAAU,8BACZ,8BAAoB,IACnB;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,OAAO,EAAE,yBAAkC,EAAE,OAAO,kBAAkB,CAAC;AAAA,YACvE,SAAS;AAAA,YACT;AAAA,kCAAC,qBAAkB,MAAM,IAAI;AAAA,cAE5B;AAAA;AAAA;AAAA,QACH,IACA,oBAAC,mBAAgB,WAAW,YAAY,aAAa,aAAa,aAAa,UAAU,cAAc,GAC3G;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/types.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC"}
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/types.ts"],"names":[],"mappings":"AAAA,KAAK,WAAW,GAAG,MAAM,GAAG,SAAS,CAAC;AAEtC,MAAM,MAAM,KAAK,GAAG,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
interface Props {
|
|
1
|
+
interface Props extends React.HTMLAttributes<HTMLButtonElement> {
|
|
2
2
|
className?: string;
|
|
3
3
|
title?: string;
|
|
4
4
|
children: React.ReactNode;
|
|
@@ -7,6 +7,6 @@ interface Props {
|
|
|
7
7
|
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
|
8
8
|
tabIndex?: number;
|
|
9
9
|
}
|
|
10
|
-
export declare function IconButton({ className, title, children, variant, size, onClick, tabIndex }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function IconButton({ className, title, children, variant, size, onClick, tabIndex, ...nativeButtonProps }: Props): import("react/jsx-runtime").JSX.Element;
|
|
11
11
|
export {};
|
|
12
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAK;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AAsBA,UAAU,KAAM,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,SAAS,CAAC;IACrD,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,iBAAiB,EACrB,EAAE,KAAK,2CAaP"}
|
|
@@ -18,7 +18,16 @@ const variants = cva("flex justify-center items-center p-0 rounded border-none t
|
|
|
18
18
|
size: "md"
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
|
-
function IconButton({
|
|
21
|
+
function IconButton({
|
|
22
|
+
className,
|
|
23
|
+
title,
|
|
24
|
+
children,
|
|
25
|
+
variant,
|
|
26
|
+
size,
|
|
27
|
+
onClick,
|
|
28
|
+
tabIndex,
|
|
29
|
+
...nativeButtonProps
|
|
30
|
+
}) {
|
|
22
31
|
return /* @__PURE__ */ jsx(
|
|
23
32
|
"button",
|
|
24
33
|
{
|
|
@@ -28,6 +37,7 @@ function IconButton({ className, title, children, variant, size, onClick, tabInd
|
|
|
28
37
|
"aria-label": title,
|
|
29
38
|
onClick,
|
|
30
39
|
tabIndex,
|
|
40
|
+
...nativeButtonProps,
|
|
31
41
|
children
|
|
32
42
|
}
|
|
33
43
|
);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { cn } from \"../../utils/general/cn\";\n\nconst variants = cva(\"flex justify-center items-center p-0 rounded border-none transition-colors cursor-pointer\", {\n variants: {\n variant: {\n neutral: \"bg-transparent hover:bg-(--theme-elevation-50) text-(--theme-elevation-450) hover:text-(--theme-text)\",\n neutralSecondary:\n \"bg-(--theme-elevation-100) hover:bg-(--theme-elevation-150) text-(--theme-elevation-600) hover:text-(--theme-text)\",\n primary: \"bg-(--theme-elevation-1000) hover:bg-(--theme-elevation-800) text-(--theme-elevation-0)\",\n },\n size: {\n sm: \"w-[20px] h-[20px]\",\n md: \"w-[24px] h-[24px]\",\n },\n },\n defaultVariants: {\n variant: \"neutral\",\n size: \"md\",\n },\n});\n\ninterface Props {\n className?: string;\n title?: string;\n children: React.ReactNode;\n variant?: \"neutral\" | \"neutralSecondary\" | \"primary\";\n size?: \"sm\" | \"md\";\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n tabIndex?: number;\n}\n\nexport function IconButton({
|
|
1
|
+
{"version":3,"sources":["../../../src/components/IconButton/index.tsx"],"sourcesContent":["import { cva } from \"class-variance-authority\";\nimport { cn } from \"../../utils/general/cn\";\n\nconst variants = cva(\"flex justify-center items-center p-0 rounded border-none transition-colors cursor-pointer\", {\n variants: {\n variant: {\n neutral: \"bg-transparent hover:bg-(--theme-elevation-50) text-(--theme-elevation-450) hover:text-(--theme-text)\",\n neutralSecondary:\n \"bg-(--theme-elevation-100) hover:bg-(--theme-elevation-150) text-(--theme-elevation-600) hover:text-(--theme-text)\",\n primary: \"bg-(--theme-elevation-1000) hover:bg-(--theme-elevation-800) text-(--theme-elevation-0)\",\n },\n size: {\n sm: \"w-[20px] h-[20px]\",\n md: \"w-[24px] h-[24px]\",\n },\n },\n defaultVariants: {\n variant: \"neutral\",\n size: \"md\",\n },\n});\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n className?: string;\n title?: string;\n children: React.ReactNode;\n variant?: \"neutral\" | \"neutralSecondary\" | \"primary\";\n size?: \"sm\" | \"md\";\n onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n tabIndex?: number;\n}\n\nexport function IconButton({\n className,\n title,\n children,\n variant,\n size,\n onClick,\n tabIndex,\n ...nativeButtonProps\n}: Props) {\n return (\n <button\n className={cn(variants({ variant, size }), className)}\n type=\"button\"\n title={title}\n aria-label={title}\n onClick={onClick}\n tabIndex={tabIndex}\n {...nativeButtonProps}>\n {children}\n </button>\n );\n}\n"],"mappings":"AA2CI;AA3CJ,SAAS,WAAW;AACpB,SAAS,UAAU;AAEnB,MAAM,WAAW,IAAI,6FAA6F;AAAA,EAChH,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,kBACE;AAAA,MACF,SAAS;AAAA,IACX;AAAA,IACA,MAAM;AAAA,MACJ,IAAI;AAAA,MACJ,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,MAAM;AAAA,EACR;AACF,CAAC;AAYM,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAU;AACR,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,MACpD,MAAK;AAAA,MACL;AAAA,MACA,cAAY;AAAA,MACZ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACH;AAAA;AAAA,EACH;AAEJ;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@focus-reactive/payload-plugin-comments",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"license": "MIT",
|
|
5
|
-
"author": "
|
|
5
|
+
"author": "FocusReactive <ship@focusreactive.com>",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"payload",
|
|
8
8
|
"payloadcms",
|