@focus-reactive/payload-plugin-comments 1.0.3 → 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.
@@ -1,6 +1,6 @@
1
1
  interface Props {
2
2
  className?: string;
3
- onMention: (e: React.MouseEvent) => void;
3
+ onMention: () => void;
4
4
  onAddComment: () => void;
5
5
  }
6
6
  export declare function ActionPanel({ className, onMention, onAddComment }: Props): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- {"version":3,"file":"ActionPanel.d.ts","sourceRoot":"","sources":["../../../src/components/CommentEditor/ActionPanel.tsx"],"names":[],"mappings":"AAKA,UAAU,KAAK;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,KAAK,2CAgBxE"}
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
- return /* @__PURE__ */ jsxs("div", { className: cn("flex justify-end items-center gap-1 pt-2", className), "data-popup-prevent-close": true, children: [
9
- /* @__PURE__ */ jsx(IconButton, { title: "Mention user", onClick: onMention, children: /* @__PURE__ */ jsx(AtSign, { size: 16 }) }),
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"), onClick: onAddComment, children: /* @__PURE__ */ jsx(SendHorizontal, { size: 16 }) })
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: (e: React.MouseEvent) => void;\n onAddComment: () => void;\n}\n\nexport function ActionPanel({ className, onMention, onAddComment }: Props) {\n const { t } = useTranslation();\n\n return (\n <div className={cn(\"flex justify-end items-center gap-1 pt-2\", className)} data-popup-prevent-close>\n <IconButton title=\"Mention user\" onClick={onMention}>\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)} onClick={onAddComment}>\n <SendHorizontal size={16} />\n </IconButton>\n </div>\n );\n}\n"],"mappings":"AAeI,SAEI,KAFJ;AAfJ,SAAS,QAAQ,sBAAsB;AACvC,SAAS,kBAAkB;AAC3B,SAAS,sBAAsB;AAC/B,SAAS,UAAU;AAQZ,SAAS,YAAY,EAAE,WAAW,WAAW,aAAa,GAAU;AACzE,QAAM,EAAE,EAAE,IAAI,eAAe;AAE7B,SACE,qBAAC,SAAI,WAAW,GAAG,4CAA4C,SAAS,GAAG,4BAAwB,MACjG;AAAA,wBAAC,cAAW,OAAM,gBAAe,SAAS,WACxC,8BAAC,UAAO,MAAM,IAAI,GACpB;AAAA,IAEA,oBAAC,QAAG,WAAU,gDAA+C;AAAA,IAE7D,oBAAC,cAAW,SAAQ,WAAU,OAAO,EAAE,kBAA2B,GAAG,SAAS,cAC5E,8BAAC,kBAAe,MAAM,IAAI,GAC5B;AAAA,KACF;AAEJ;","names":[]}
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":"AddCommentPopup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,2CA0C1E"}
1
+ {"version":3,"file":"AddCommentPopup.d.ts","sourceRoot":"","sources":["../../../src/components/FieldCommentLabel/AddCommentPopup.tsx"],"names":[],"mappings":"AAUA,UAAU,KAAK;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAyC1E"}
@@ -35,7 +35,6 @@ function AddCommentPopup({ fieldPath, showTrigger, onToggle }) {
35
35
  ref: editorAPI,
36
36
  fieldPath,
37
37
  globalSlug: mode === "global-document" ? globalSlug ?? void 0 : void 0,
38
- autoFocus: true,
39
38
  onSuccessAddComment: close,
40
39
  onEscapePress: close,
41
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 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 autoFocus\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,WAAS;AAAA,YACT,qBAAqB;AAAA,YACrB,eAAe;AAAA,YACf,aAAa,GAAG,EAAE,uBAAgC,CAAC;AAAA;AAAA,QACrD;AAAA,SACF;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
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":[]}
@@ -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;IACb,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,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,KAAK,2CAYjG"}
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({ className, title, children, variant, size, onClick, tabIndex }) {
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({ className, title, children, variant, size, onClick, tabIndex }: 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 {children}\n </button>\n );\n}\n"],"mappings":"AAkCI;AAlCJ,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,EAAE,WAAW,OAAO,UAAU,SAAS,MAAM,SAAS,SAAS,GAAU;AAClG,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;AAAA;AAAA,EACH;AAEJ;","names":[]}
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@focus-reactive/payload-plugin-comments",
3
- "version": "1.0.3",
3
+ "version": "1.1.1",
4
4
  "license": "MIT",
5
5
  "author": "FocusReactive <ship@focusreactive.com>",
6
6
  "keywords": [