@select-org/post-components 2.0.0 → 2.1.1

package/dist/index.d.ts

@@ -47,8 +47,17 @@ interface PostCardProps {
         priority?: boolean;
         className?: string;
     }>;
+    /** Author's role in the group — drives the owner crown / admin shield badge. */
     isAdmin?: boolean;
+    /** Author's role in the group — drives the owner crown / admin shield badge. */
     isOwner?: boolean;
+    /**
+     * Whether the *viewer* is the post's author. Lets the author preview their own
+     * poll results before voting. Distinct from `isOwner` (which is the author's
+     * group role, for the badge) — pass it explicitly. When omitted, the author
+     * preview is simply off (the author sees results after voting, like anyone).
+     */
+    isPostOwner?: boolean;
     isPostPreview?: boolean;
     isPrivate?: boolean;
     membersCount?: number;
@@ -75,7 +84,7 @@ interface PostCardProps {
         onSend: (emoji: string) => void;
     }) => React.ReactNode;
     onNavigate?: (href: string, isInternal: boolean) => void;
-    supportDeepviewDomain?: string;
+    supportDeepviewDomain?: string | string[];
     labels?: {
         cancelPost?: string;
         sending?: string;
@@ -122,6 +131,7 @@ interface PostHeaderProps {
     }) => string;
     isFeatured?: boolean;
     isPostPreview?: boolean;
+    isPostDetail?: boolean;
     isAdmin?: boolean;
     isOwner?: boolean;
     onErasePress?: () => void;
@@ -155,7 +165,12 @@ interface Props$a {
     hideEmailDescription?: boolean;
     isEmailPost?: boolean;
     onNavigate?: (href: string, isInternal: boolean) => void;
-    supportDeepviewDomain?: string;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    supportDeepviewDomain?: string | string[];
 }
 declare const PostBody: React.FC<Props$a>;
 
@@ -168,6 +183,17 @@ interface PostFooterProps {
     footerLinkHref?: string;
     isSnoozed?: boolean;
     onSnoozeToggle?: () => void;
+    /**
+     * Custom link renderer (e.g. Next.js `<Link>`) for the comment and footer
+     * links. Falls back to a native `<a>`. Passing this is important inside SPAs:
+     * a native `<a>` triggers a full-page reload, whereas the consumer's router
+     * link performs a soft client-side navigation.
+     */
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
     renderReactionTrigger?: (props: {
         onOpen: () => void;
     }) => React.ReactNode;
@@ -193,6 +219,13 @@ interface Props$9 {
         className?: string;
     }>;
     mediaItemStatuses?: Record<string, MediaUploadStatus>;
+    onNavigate?: (href: string, isInternal: boolean) => void;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    supportDeepviewDomain?: string | string[];
 }
 declare const PostItemsView: React.FC<Props$9>;
 
@@ -220,6 +253,13 @@ interface Props$6 {
     textItems: TextItemContent['items'];
     showFullText: boolean;
     isPostDetail: boolean;
+    onNavigate?: (href: string, isInternal: boolean) => void;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    supportDeepviewDomain?: string | string[];
 }
 declare const PostTextItem: React.FC<Props$6>;
 
@@ -227,6 +267,22 @@ interface Props$5 {
     sections: SectionItem$1[];
     isPostDetail: boolean;
     onCardPress: () => void;
+    onNavigate?: (href: string, isInternal: boolean) => void;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    supportDeepviewDomain?: string | string[];
+    imageComponent?: React.ComponentType<{
+        src: string;
+        alt: string;
+        fill?: boolean;
+        placeholder?: 'blur' | 'empty';
+        blurDataURL?: string;
+        priority?: boolean;
+        className?: string;
+    }>;
 }
 declare const PostSectionsView: React.FC<Props$5>;
 
@@ -236,6 +292,15 @@ interface Props$4 {
         username: string;
         url: string;
     };
+    imageComponent?: React.ComponentType<{
+        src: string;
+        alt: string;
+        fill?: boolean;
+        placeholder?: 'blur' | 'empty';
+        blurDataURL?: string;
+        priority?: boolean;
+        className?: string;
+    }>;
 }
 declare const PostSectionSourceInfoView: React.FC<Props$4>;
 
@@ -255,7 +320,7 @@ interface PostLinkItemProps {
     }>;
     onCloseClick?: () => void;
     type?: 'preview' | 'display';
-    supportDeepviewDomain?: string;
+    supportDeepviewDomain?: string | string[];
 }
 declare const PostLinkItem: React.FC<PostLinkItemProps>;
 
@@ -306,7 +371,12 @@ interface AutoLinkProps {
     text: string;
     mentionData?: MentionData[];
     onNavigate?: (href: string, isInternal: boolean) => void;
-    supportDeepviewDomain?: string;
+    linkComponent?: React.ComponentType<{
+        href: string;
+        children: React.ReactNode;
+        className?: string;
+    }>;
+    supportDeepviewDomain?: string | string[];
     phone?: any;
     email?: any;
     stripPrefix?: boolean;
@@ -315,7 +385,7 @@ interface AutoLinkProps {
     className?: string;
 }
 declare const AutoLink: {
-    ({ text: textProp, mentionData, onNavigate, supportDeepviewDomain, phone, email, stripPrefix, style, mentionClassName: mentionClassNameProp, className, }: AutoLinkProps): React.JSX.Element | null;
+    ({ text: textProp, mentionData, onNavigate, linkComponent, supportDeepviewDomain, phone, email, stripPrefix, style, mentionClassName: mentionClassNameProp, className, }: AutoLinkProps): React.JSX.Element | null;
     truncate: (text: string, { truncate: len, truncateChars, truncateLocation }?: TruncateOptions) => string;
 };
 

package/dist/index.js

@@ -241,6 +241,7 @@ var PostHeader = ({
   translate,
   isFeatured = false,
   isPostPreview = false,
+  isPostDetail = false,
   isAdmin = false,
   isOwner = false,
   onErasePress,
@@ -283,7 +284,7 @@ var PostHeader = ({
     LinkComponent,
     {
       href: groupHref,
-      className: "text-action-primary font-medium hover:underline cursor-pointer bg-transparent border-none p-0",
+      className: "text-action-primary font-medium no-underline hover:underline cursor-pointer bg-transparent border-none p-0",
       children: [
         "#",
         group.name
@@ -294,7 +295,7 @@ var PostHeader = ({
     {
       href: groupHref,
       onClick: (e) => e.stopPropagation(),
-      className: "text-action-primary font-medium hover:underline cursor-pointer bg-transparent border-none p-0",
+      className: "text-action-primary font-medium no-underline hover:underline cursor-pointer bg-transparent border-none p-0",
       title: group.name,
       "aria-label": `View group ${group.name}`,
       children: [
@@ -328,7 +329,7 @@ var PostHeader = ({
       ),
       /* @__PURE__ */ jsxs("section", { className: "flex flex-1 flex-col justify-center min-w-0", children: [
         /* @__PURE__ */ jsx2("section", { className: "flex items-baseline justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-w-0", children: [
-          /* @__PURE__ */ jsx2("div", { className: "font-semibold text-foreground truncate", children: authorNameNode }),
+          isPostDetail ? /* @__PURE__ */ jsx2("h2", { className: "font-semibold text-foreground truncate", children: authorNameNode }) : /* @__PURE__ */ jsx2("div", { className: "font-semibold text-foreground truncate", children: authorNameNode }),
           isFeatured && /* @__PURE__ */ jsx2(
             "svg",
             {
@@ -479,7 +480,8 @@ var checkMentionDataIndex = (mentionData = [], copyMentionData = [], body = "")
 };
 var isLinkInternal = (url, supportDeepviewDomain) => {
   if (!url) return false;
-  return supportDeepviewDomain.length > 0 && url.includes(supportDeepviewDomain);
+  const domains = Array.isArray(supportDeepviewDomain) ? supportDeepviewDomain : supportDeepviewDomain ? [supportDeepviewDomain] : [];
+  return domains.some((d) => d.length > 0 && url.includes(d));
 };
 var getUrl = (match, phone) => {
   const type = match.getType();
@@ -523,6 +525,7 @@ var AutoLink = ({
   text: textProp,
   mentionData = [],
   onNavigate,
+  linkComponent,
   supportDeepviewDomain = "",
   phone = true,
   email = true,
@@ -572,7 +575,7 @@ var AutoLink = ({
   const renderLink = useCallback(
     (text, match, index) => {
       const [url] = getUrl(match, phone);
-      if (supportDeepviewDomain && url.includes(supportDeepviewDomain)) {
+      if (isLinkInternal(url, supportDeepviewDomain)) {
         const internal = true;
         return /* @__PURE__ */ jsx3(
           "a",
@@ -596,10 +599,25 @@ var AutoLink = ({
   const renderMentionData = useCallback(
     (fmData, key) => {
       const href = fmData.type === MENTION_TYPE.HASHTAG ? `/groups/${fmData.data.selectId}` : `/users/${fmData.data.selectId || fmData.data.id}`;
+      const className2 = `no-underline hover:underline context-menu-ios-disable cursor-pointer ${mentionClassName}`;
+      if (linkComponent) {
+        const LinkComponent = linkComponent;
+        return /* @__PURE__ */ jsx3(
+          "span",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              e.nativeEvent.stopImmediatePropagation();
+            },
+            children: /* @__PURE__ */ jsx3(LinkComponent, { href, className: className2, children: fmData.name })
+          },
+          key + fmData.index
+        );
+      }
       return /* @__PURE__ */ jsx3(
         "a",
         {
-          className: `context-menu-ios-disable cursor-pointer ${mentionClassName}`,
+          className: className2,
           href,
           onClick: (e) => {
             e.stopPropagation();
@@ -611,7 +629,7 @@ var AutoLink = ({
         key + fmData.index
       );
     },
-    [mentionClassName, handleNavigate]
+    [mentionClassName, handleNavigate, linkComponent]
   );
   const renderTextNodes = useCallback(() => {
     let text = textProp;
@@ -1009,6 +1027,7 @@ var PostBody = ({
   hideEmailDescription = false,
   isEmailPost = false,
   onNavigate,
+  linkComponent,
   supportDeepviewDomain
 }) => {
   const { plain, html, truncatedPlain, mentionData } = textContent;
@@ -1069,6 +1088,7 @@ var PostBody = ({
         text: displayText,
         mentionData,
         onNavigate,
+        linkComponent,
         supportDeepviewDomain,
         className: "whitespace-normal px-4 pb-4 leading-relaxed text-gray-800",
         style: {
@@ -1102,6 +1122,7 @@ var PostBody = ({
           text: displayText,
           mentionData,
           onNavigate,
+          linkComponent,
           supportDeepviewDomain,
           className: "whitespace-normal leading-relaxed text-gray-600 line-clamp-3",
           style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }
@@ -1442,7 +1463,7 @@ var MediaView = ({
     return /* @__PURE__ */ jsx8(
       "div",
       {
-        onClick: handleLightbox,
+        onClick: onCardPress,
         className: textViewClass,
         style: {
           backgroundColor: item.option_color
@@ -1828,7 +1849,13 @@ var PostPollView_default = PostPollView;
 
 // src/components/PostTextItem.tsx
 import { jsx as jsx14 } from "react/jsx-runtime";
-var PostTextItem = ({ textItems, showFullText }) => {
+var PostTextItem = ({
+  textItems,
+  showFullText,
+  onNavigate,
+  linkComponent,
+  supportDeepviewDomain
+}) => {
   return /* @__PURE__ */ jsx14("div", { className: "flex-1", children: /* @__PURE__ */ jsx14("div", { children: textItems.map((item, index) => {
     const text = "text" in item ? item.text ?? "" : "";
     const key = "key" in item ? item.key : index;
@@ -1838,6 +1865,9 @@ var PostTextItem = ({ textItems, showFullText }) => {
       {
         text: showFullText ? text : TruncateText(text, 300),
         mentionData,
+        onNavigate,
+        linkComponent,
+        supportDeepviewDomain,
         className: "whitespace-normal px-4 pb-4 leading-relaxed text-gray-800",
         style: {
           whiteSpace: "pre-wrap",
@@ -1862,7 +1892,8 @@ var getHostFromUrl = (url) => {
   }
 };
 var getLinkRel = (host, supportDeepviewDomain = "") => {
-  const isInternal = supportDeepviewDomain.length > 0 && host.includes(supportDeepviewDomain);
+  const domains = Array.isArray(supportDeepviewDomain) ? supportDeepviewDomain : supportDeepviewDomain ? [supportDeepviewDomain] : [];
+  const isInternal = domains.some((d) => d.length > 0 && host.includes(d));
   return isInternal ? "noreferrer" : "noreferrer nofollow";
 };
 var PostLinkItem = ({
@@ -2226,7 +2257,10 @@ var PostItemsView = ({
   parentId,
   isCommentScope,
   imageComponent,
-  mediaItemStatuses
+  mediaItemStatuses,
+  onNavigate,
+  linkComponent,
+  supportDeepviewDomain
 }) => {
   if (!primaryContent) return null;
   switch (primaryContent.type) {
@@ -2258,7 +2292,8 @@ var PostItemsView = ({
               type: "linkItem"
             }
           ],
-          imageComponent
+          imageComponent,
+          supportDeepviewDomain
         }
       );
     case "media":
@@ -2278,7 +2313,10 @@ var PostItemsView = ({
         {
           textItems: primaryContent.items,
           showFullText: isPostDetail,
-          isPostDetail
+          isPostDetail,
+          onNavigate,
+          linkComponent,
+          supportDeepviewDomain
         }
       );
     default:
@@ -2354,20 +2392,27 @@ var contentTypeConstants = {
 };
 
 // src/components/PostSectionSourceInfoView.tsx
+import { Avatar as Avatar2, AvatarImage as AvatarImage2, AvatarFallback as AvatarFallback2 } from "@select-org/ui";
 import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
-var PostSectionSourceInfoView = ({ sourceInfo }) => {
+var PostSectionSourceInfoView = ({
+  sourceInfo,
+  imageComponent
+}) => {
   if (!sourceInfo) {
     return null;
   }
   return /* @__PURE__ */ jsx20("div", { className: "mx-4 mb-3 mt-3 border-b border-gray-100 pb-3", children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-row items-center", children: [
-    /* @__PURE__ */ jsx20("div", { className: "size-7 shrink-0 rounded-full overflow-hidden border border-border-subtle bg-muted flex items-center justify-center", children: sourceInfo.avatar ? /* @__PURE__ */ jsx20(
-      "img",
-      {
-        src: sourceInfo.avatar,
-        alt: sourceInfo.username,
-        className: "size-full object-cover"
-      }
-    ) : /* @__PURE__ */ jsx20("span", { className: "text-xs font-semibold text-muted-foreground", children: sourceInfo.username?.charAt(0)?.toUpperCase() ?? "?" }) }),
+    /* @__PURE__ */ jsxs11(Avatar2, { size: "sm", className: "shrink-0 ring-1 ring-border-subtle", children: [
+      /* @__PURE__ */ jsx20(
+        AvatarImage2,
+        {
+          src: sourceInfo.avatar,
+          alt: sourceInfo.username,
+          imageComponent
+        }
+      ),
+      /* @__PURE__ */ jsx20(AvatarFallback2, { name: sourceInfo.username, className: "text-xs" })
+    ] }),
     /* @__PURE__ */ jsxs11("div", { className: "ml-2 flex-col justify-center flex", children: [
       /* @__PURE__ */ jsx20("div", { className: "text-sm font-semibold text-foreground leading-none", children: sourceInfo.username }),
       /* @__PURE__ */ jsx20("div", { className: "text-xs text-muted-foreground mt-1 leading-none", children: sourceInfo.url })
@@ -2381,7 +2426,11 @@ import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var PostSectionsView = ({
   sections,
   isPostDetail,
-  onCardPress
+  onCardPress,
+  onNavigate,
+  linkComponent,
+  supportDeepviewDomain,
+  imageComponent
 }) => {
   const renderSectionItem = useCallback3(
     (section, index) => {
@@ -2396,14 +2445,23 @@ var PostSectionsView = ({
               whiteSpace: "pre-wrap",
               wordBreak: "break-word"
             },
-            mentionData: data.mentionData
+            mentionData: data.mentionData,
+            onNavigate,
+            linkComponent,
+            supportDeepviewDomain
           },
           `${index} - ${data.body}`
         );
       }
       if (type === contentTypeConstants.NEW_POST_MEDIA) {
         return /* @__PURE__ */ jsxs12("div", { className: "my-3", children: [
-          data.sourceInfo && /* @__PURE__ */ jsx21(PostSectionSourceInfoView_default, { sourceInfo: data.sourceInfo }),
+          data.sourceInfo && /* @__PURE__ */ jsx21(
+            PostSectionSourceInfoView_default,
+            {
+              sourceInfo: data.sourceInfo,
+              imageComponent
+            }
+          ),
           data.body && /* @__PURE__ */ jsx21(
             AutoLink_default,
             {
@@ -2413,7 +2471,10 @@ var PostSectionsView = ({
                 whiteSpace: "pre-wrap",
                 wordBreak: "break-word"
               },
-              mentionData: data.mentionData
+              mentionData: data.mentionData,
+              onNavigate,
+              linkComponent,
+              supportDeepviewDomain
             },
             `${index} - ${data.body}`
           ),
@@ -2429,7 +2490,7 @@ var PostSectionsView = ({
       }
       return null;
     },
-    [isPostDetail, onCardPress]
+    [isPostDetail, onCardPress, onNavigate, supportDeepviewDomain, imageComponent]
   );
   if (!sections || sections.length === 0) {
     return null;
@@ -2453,6 +2514,7 @@ var PostFooter = ({
   footerLinkHref = "/",
   isSnoozed = false,
   onSnoozeToggle,
+  linkComponent: LinkComponent,
   renderReactionTrigger,
   renderReactionModal
 }) => {
@@ -2512,7 +2574,18 @@ var PostFooter = ({
         }
       }) })
     ] }),
-    /* @__PURE__ */ jsx22("div", { className: "relative flex items-center ml-auto", children: postHref ? /* @__PURE__ */ jsxs13(
+    /* @__PURE__ */ jsx22("div", { className: "relative flex items-center ml-auto", children: postHref ? LinkComponent ? /* @__PURE__ */ jsxs13(
+      LinkComponent,
+      {
+        href: postHref,
+        className: cn(commentButtonClass, "no-underline"),
+        children: [
+          /* @__PURE__ */ jsx22(AppIcon, { name: "messageCircleMore", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx22("span", { className: "sr-only", children: commentAriaLabel }),
+          commentBadge
+        ]
+      }
+    ) : /* @__PURE__ */ jsxs13(
       "a",
       {
         href: postHref,
@@ -2530,14 +2603,10 @@ var PostFooter = ({
       /* @__PURE__ */ jsx22(AppIcon, { name: "messageCircleMore", "aria-hidden": "true" }),
       commentBadge
     ] }) }),
-    showFooterLink && /* @__PURE__ */ jsx22("section", { className: "flex justify-center -mx-5 -mb-2.5 mt-2.5", children: /* @__PURE__ */ jsx22(
-      "a",
-      {
-        href: footerLinkHref,
-        className: "bg-action-primary/5 hover:bg-action-primary/10 transition-colors w-full text-center py-3 text-sm font-medium text-action-primary no-underline rounded-b-xl border-t border-action-primary/10",
-        children: footerLinkLabel
-      }
-    ) })
+    showFooterLink && /* @__PURE__ */ (() => {
+      const footerLinkClass = "bg-action-primary/5 hover:bg-action-primary/10 transition-colors w-full text-center py-3 text-sm font-medium text-action-primary no-underline rounded-b-xl border-t border-action-primary/10";
+      return /* @__PURE__ */ jsx22("section", { className: "flex justify-center -mx-5 -mb-2.5 mt-2.5", children: LinkComponent ? /* @__PURE__ */ jsx22(LinkComponent, { href: footerLinkHref, className: footerLinkClass, children: footerLinkLabel }) : /* @__PURE__ */ jsx22("a", { href: footerLinkHref, className: footerLinkClass, children: footerLinkLabel }) });
+    })()
   ] });
 };
 var PostFooter_default = PostFooter;
@@ -2758,6 +2827,7 @@ var PostCard = ({
   imageComponent,
   isAdmin,
   isOwner,
+  isPostOwner,
   isPostPreview,
   isPrivate,
   membersCount,
@@ -2891,6 +2961,7 @@ var PostCard = ({
               postType: post.postType,
               isFeatured: post.isFeatured,
               isPostPreview,
+              isPostDetail,
               isAdmin,
               isOwner,
               isPrivate,
@@ -2916,6 +2987,7 @@ var PostCard = ({
               isEmailPost,
               hideEmailDescription: isEmailPost && !isPostDetail && resolvedContent.primaryContent?.type === "media",
               onNavigate,
+              linkComponent,
               supportDeepviewDomain
             }
           ),
@@ -2925,7 +2997,11 @@ var PostCard = ({
               sections: resolvedContent.sections.sections,
               isPostDetail,
               onCardPress: onCardPress ?? (() => {
-              })
+              }),
+              onNavigate,
+              linkComponent,
+              supportDeepviewDomain,
+              imageComponent
             }
           ),
           /* @__PURE__ */ jsx25(
@@ -2937,11 +3013,14 @@ var PostCard = ({
               }),
               onVotePress: onVotePress ?? (() => {
               }),
-              isPostOwner: isOwner,
+              isPostOwner,
               parentId: post.context_id,
               isCommentScope: false,
               imageComponent,
-              mediaItemStatuses
+              mediaItemStatuses,
+              onNavigate,
+              linkComponent,
+              supportDeepviewDomain
             }
           ),
           /* @__PURE__ */ jsx25(
@@ -2966,6 +3045,7 @@ var PostCard = ({
             showFooterLink,
             footerLinkLabel,
             footerLinkHref,
+            linkComponent,
             renderReactionTrigger,
             renderReactionModal
           }