@select-org/post-components 2.1.3 → 2.1.5

package/dist/index.d.ts

@@ -4,6 +4,35 @@ export { FormatMentionData, ImageInfo, PostAuthor, PostDataMetaData } from './ty
 import { ResolvedTextContent, PrimaryContent, EmbedContent, TextItemContent, SectionItem as SectionItem$1 } from './resolver.js';
 export { LinkContent, MediaContent, PollContent, ResolvePostContentMode, ResolvedPostContent, SectionsContent, hasMeaningfulHtml, resolvePostContent } from './resolver.js';
 
+/**
+ * i18n seam. The design system stays string-agnostic — consumers inject
+ * already-localized copy. When omitted, English defaults are used so the
+ * component still renders standalone.
+ */
+interface EraseConfirmModalLabels {
+    /** First-step action row, e.g. "Erase post" / "Erase comment". */
+    erase?: string;
+    /** Cancel affordance (both steps). */
+    cancel?: string;
+    /** Confirmation heading, e.g. "Are you sure you want to erase this post?". */
+    confirmTitle?: string;
+    /** Confirmation body, e.g. "This action cannot be undone.". */
+    confirmBody?: string;
+    /** Destructive confirm button. */
+    confirmErase?: string;
+}
+interface Props$a {
+    backgroundColor?: string;
+    onYesPress: (e?: React.MouseEvent) => void;
+    onNoPress: (e?: React.MouseEvent) => void;
+    fontColor?: string;
+    itemType?: string;
+    isOpen: boolean;
+    handleClose: () => void;
+    labels?: EraseConfirmModalLabels;
+}
+declare const EraseConfirmModal: React.FC<Props$a>;
+
 interface PostCardProps {
     post: {
         context_id: string;
@@ -91,6 +120,8 @@ interface PostCardProps {
         uploadingRemaining?: string;
         uploadingDone?: string;
     };
+    /** Localized copy for the erase-confirmation modal. English defaults when omitted. */
+    eraseLabels?: EraseConfirmModalLabels;
     mode?: 'feed' | 'detail' | 'inbox' | 'draft';
     commentCount?: number;
     unreadCommentCount?: number;
@@ -135,6 +166,8 @@ interface PostHeaderProps {
     isAdmin?: boolean;
     isOwner?: boolean;
     onErasePress?: () => void;
+    /** Accessible label for the built-in delete affordance. Defaults to "Delete post". */
+    deleteLabel?: string;
     onCancelPost?: () => void;
     renderActionsMenu?: () => React.ReactNode;
     linkComponent?: React.ComponentType<{
@@ -157,7 +190,7 @@ interface PostHeaderProps {
 }
 declare const PostHeader: React.FC<PostHeaderProps>;
 
-interface Props$a {
+interface Props$9 {
     textContent: ResolvedTextContent;
     showFull?: boolean;
     isPostDetail: boolean;
@@ -172,7 +205,7 @@ interface Props$a {
     }>;
     supportDeepviewDomain?: string | string[];
 }
-declare const PostBody: React.FC<Props$a>;
+declare const PostBody: React.FC<Props$9>;
 
 interface PostFooterProps {
     postHref?: string;
@@ -205,7 +238,7 @@ interface PostFooterProps {
 }
 declare const PostFooter: React.FC<PostFooterProps>;
 
-interface Props$9 {
+interface Props$8 {
     primaryContent: PrimaryContent;
     isPostDetail: boolean;
     onCardPress: () => void;
@@ -227,18 +260,18 @@ interface Props$9 {
     }>;
     supportDeepviewDomain?: string | string[];
 }
-declare const PostItemsView: React.FC<Props$9>;
+declare const PostItemsView: React.FC<Props$8>;
 
-interface Props$8 {
+interface Props$7 {
     embed: EmbedContent;
 }
-declare const PostEmbedView: React.FC<Props$8>;
+declare const PostEmbedView: React.FC<Props$7>;
 
 declare const PostEmail: React.FC<{
     html: string;
 }>;
 
-interface Props$7 {
+interface Props$6 {
     items: PollItemData[];
     voteResult: PollResult | null;
     onVotePress: (item: PollItemData) => void;
@@ -247,9 +280,9 @@ interface Props$7 {
     isInboxCard?: boolean;
     isPostOwner?: boolean;
 }
-declare const PostPollView: React.FC<Props$7>;
+declare const PostPollView: React.FC<Props$6>;
 
-interface Props$6 {
+interface Props$5 {
     textItems: TextItemContent['items'];
     showFullText: boolean;
     isPostDetail: boolean;
@@ -261,9 +294,9 @@ interface Props$6 {
     }>;
     supportDeepviewDomain?: string | string[];
 }
-declare const PostTextItem: React.FC<Props$6>;
+declare const PostTextItem: React.FC<Props$5>;
 
-interface Props$5 {
+interface Props$4 {
     sections: SectionItem$1[];
     isPostDetail: boolean;
     onCardPress: () => void;
@@ -284,9 +317,9 @@ interface Props$5 {
         className?: string;
     }>;
 }
-declare const PostSectionsView: React.FC<Props$5>;
+declare const PostSectionsView: React.FC<Props$4>;
 
-interface Props$4 {
+interface Props$3 {
     sourceInfo?: {
         avatar: string;
         username: string;
@@ -302,14 +335,22 @@ interface Props$4 {
         className?: string;
     }>;
 }
-declare const PostSectionSourceInfoView: React.FC<Props$4>;
+declare const PostSectionSourceInfoView: React.FC<Props$3>;
 
-interface Props$3 {
+interface Props$2 {
     fontColor?: string;
     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[];
 }
-declare const PostSectionsSummaryView: React.FC<Props$3>;
+declare const PostSectionsSummaryView: React.FC<Props$2>;
 
 interface PostLinkItemProps {
     linkItems: LinkItemMetaData[];
@@ -333,14 +374,14 @@ interface PostMediaLayoutProps {
 }
 declare const PostMediaLayoutCore: React.FC<PostMediaLayoutProps>;
 
-interface Props$2 {
+interface Props$1 {
     status?: MediaUploadStatus;
     /** Tile width in px. Status text is hidden when < 100. */
     tileWidth?: number;
 }
-declare const MediaUploadStatusOverlay: React.FC<Props$2>;
+declare const MediaUploadStatusOverlay: React.FC<Props$1>;
 
-interface Props$1 {
+interface Props {
     statuses?: Record<string, MediaUploadStatus>;
     labels?: {
         /** Template with `{count}` replaced by the remaining in-flight number. */
@@ -349,7 +390,7 @@ interface Props$1 {
         uploadingDone?: string;
     };
 }
-declare const PostUploadStrip: React.FC<Props$1>;
+declare const PostUploadStrip: React.FC<Props>;
 
 /*!
  * React Native Autolink
@@ -416,15 +457,4 @@ interface ReactionModalProps {
 }
 declare const ReactionModal: ({ isOpen, close, sendReaction, onAnalyticsEvent }: ReactionModalProps) => React.JSX.Element | null;
 
-interface Props {
-    backgroundColor?: string;
-    onYesPress: (e?: React.MouseEvent) => void;
-    onNoPress: (e?: React.MouseEvent) => void;
-    fontColor?: string;
-    itemType?: string;
-    isOpen: boolean;
-    handleClose: () => void;
-}
-declare const EraseConfirmModal: React.FC<Props>;
-
 export { AutoLink, EmbedContent, EraseConfirmModal, ItemData, LinkItemMetaData, MediaUploadStatus, MediaUploadStatusOverlay, MentionData, POST_TYPE_HINT_DEFAULTS, PollItemData, PollResult, PostBody, PostCard, type PostCardProps, PostEmail, PostEmbedView, PostFooter, PostHeader, type PostHeaderProps, PostItemsView, PostLinkItem, PostMediaLayoutCore, PostPollView, PostSectionSourceInfoView, PostSectionsSummaryView, PostSectionsView, PostTextItem, type PostTypeHint, type PostTypeHintContext, PostUploadStrip, PrimaryContent, ReactionModal, ResolvedTextContent, SectionItem, TextItemContent, TipTapDocument, getPostTypeHint };

package/dist/index.js

@@ -245,6 +245,7 @@ var PostHeader = ({
   isAdmin = false,
   isOwner = false,
   onErasePress,
+  deleteLabel,
   onCancelPost,
   renderActionsMenu,
   linkComponent: LinkComponent,
@@ -317,7 +318,7 @@ var PostHeader = ({
               AvatarImage,
               {
                 src: author.avatar,
-                alt: `${author.name}'s profile picture`,
+                alt: `${author.name}'s profile picture on Select App`,
                 placeholder: author.avatarPlaceholder,
                 imageComponent
               }
@@ -347,7 +348,7 @@ var PostHeader = ({
             /* @__PURE__ */ jsx2(
               "time",
               {
-                title: postedAt,
+                title: formatRelativeTime(postedAt, locale ?? "en"),
                 className: "text-xs text-muted-foreground whitespace-nowrap shrink-0",
                 dateTime: postedAt,
                 children: formatRelativeTime(postedAt, locale ?? "en")
@@ -411,7 +412,7 @@ var PostHeader = ({
           e.stopPropagation();
           onErasePress();
         },
-        "aria-label": "Delete post",
+        "aria-label": deleteLabel ?? "Delete post",
         className: "absolute right-4 top-4 leading-none rounded-full p-1.5 transition-colors hover:bg-feedback-danger/10 hover:text-feedback-danger",
         children: /* @__PURE__ */ jsx2(AppIcon, { name: "chatErase", width: 16, height: 16, strokeWidth: 1.75 })
       }
@@ -1100,7 +1101,7 @@ var PostBody = ({
   };
   if (isPostDetail) {
     if (isEmailPost && html) {
-      return /* @__PURE__ */ jsxs2("div", { className: "relative flex-1 max-h-screen w-full overflow-x-hidden overflow-y-auto xl:px-0 px-5", children: [
+      return /* @__PURE__ */ jsxs2("div", { className: "relative flex-1 max-h-full w-full overflow-x-hidden overflow-y-auto xl:px-0 px-5", children: [
         /* @__PURE__ */ jsx5("h1", { className: "text-2xl font-semibold text-gray-900 leading-snug mt-5 mb-3 px-5", children: subject }),
         /* @__PURE__ */ jsx5(PostEmail_default, { html })
       ] });
@@ -2695,7 +2696,8 @@ var EraseConfirmModal = ({
   onNoPress,
   itemType = "comment",
   isOpen,
-  handleClose
+  handleClose,
+  labels
 }) => {
   const [first, setFirst] = useState4(true);
   const [second, setSecond] = useState4(false);
@@ -2726,9 +2728,11 @@ var EraseConfirmModal = ({
     setFirst(true);
     setSecond(false);
   };
-  const eraseLabel = itemType === "Post" ? "Erase post" : "Erase comment";
-  const confirmTitle = itemType === "Post" ? "Are you sure you want to erase this post?" : "Are you sure you want to erase this comment?";
-  const confirmBody = itemType === "Post" ? "This action cannot be undone." : "This action cannot be undone.";
+  const eraseLabel = labels?.erase ?? (itemType === "Post" ? "Erase post" : "Erase comment");
+  const cancelLabel = labels?.cancel ?? "Cancel";
+  const confirmTitle = labels?.confirmTitle ?? (itemType === "Post" ? "Are you sure you want to erase this post?" : "Are you sure you want to erase this comment?");
+  const confirmBody = labels?.confirmBody ?? "This action cannot be undone.";
+  const confirmEraseLabel = labels?.confirmErase ?? "Erase";
   return /* @__PURE__ */ jsxs15("div", { children: [
     /* @__PURE__ */ jsx24("div", { className: "fixed left-0 top-0 z-50 h-screen w-full bg-black/50" }),
     /* @__PURE__ */ jsx24(
@@ -2765,7 +2769,7 @@ var EraseConfirmModal = ({
                     onClick: handleNoPress,
                     children: [
                       /* @__PURE__ */ jsx24("div", { children: /* @__PURE__ */ jsx24(AppIcon, { name: "cancel", className: "cursor-pointer size-6" }) }),
-                      /* @__PURE__ */ jsx24("p", { className: "ml-3 text-lg", children: "Cancel" })
+                      /* @__PURE__ */ jsx24("p", { className: "ml-3 text-lg", children: cancelLabel })
                     ]
                   }
                 )
@@ -2788,7 +2792,7 @@ var EraseConfirmModal = ({
                     {
                       className: "mr-6 py-2 text-muted-foreground",
                       onClick: handleNoPress,
-                      children: "Cancel"
+                      children: cancelLabel
                     }
                   ),
                   /* @__PURE__ */ jsx24(
@@ -2797,7 +2801,7 @@ var EraseConfirmModal = ({
                       className: "rounded-3xl bg-action-primary px-6 py-2 font-semibold text-white",
                       onClick: onYesPress,
                       "data-testid": "confirm-modal-erase",
-                      children: "Erase"
+                      children: confirmEraseLabel
                     }
                   )
                 ] })
@@ -2848,6 +2852,7 @@ var PostCard = ({
   isSnoozed = false,
   onSnoozeToggle,
   mediaItemStatuses,
+  eraseLabels,
   showFooterLink = false,
   footerLinkLabel,
   footerLinkHref,
@@ -2931,9 +2936,10 @@ var PostCard = ({
           "div",
           {
             className: "h-1 w-full overflow-hidden rounded bg-muted",
+            role: "progressbar",
             "aria-label": sendingLabel,
             "data-testid": "post-loader",
-            children: /* @__PURE__ */ jsx25("div", { className: "h-full animate-pulse bg-action-primary" })
+            children: /* @__PURE__ */ jsx25("div", { className: "animate-indeterminate h-full w-1/3 rounded bg-action-primary" })
           }
         ) }),
         !isPending && eraseModalOpen && /* @__PURE__ */ jsx25(
@@ -2943,7 +2949,8 @@ var PostCard = ({
             itemType: "Post",
             onYesPress: handleEraseConfirm,
             onNoPress: handleEraseCancel,
-            handleClose: handleEraseCancel
+            handleClose: handleEraseCancel,
+            labels: eraseLabels
           }
         ),
         /* @__PURE__ */ jsxs16("div", { className: cn(isPending && "opacity-50"), children: [
@@ -2971,7 +2978,8 @@ var PostCard = ({
               renderActionsMenu,
               linkComponent,
               imageComponent,
-              labels
+              labels,
+              deleteLabel: eraseLabels?.erase
             }
           ),
           /* @__PURE__ */ jsx25(
@@ -3060,7 +3068,11 @@ var BODY_SIZE = 80;
 var PostSectionsSummaryView = ({
   sections,
   fontColor,
-  onCardPress
+  isPostDetail,
+  onCardPress,
+  onNavigate,
+  linkComponent,
+  supportDeepviewDomain
 }) => {
   const imageItems = useMemo8(() => {
     if (!sections || sections.length === 0) return [];
@@ -3095,14 +3107,17 @@ var PostSectionsSummaryView = ({
               whiteSpace: "pre-wrap",
               wordBreak: "break-word"
             },
-            mentionData: data.mentionData
+            mentionData: data.mentionData,
+            onNavigate,
+            linkComponent,
+            supportDeepviewDomain
           },
           `${index} - ${data.body}`
         );
       }
       return null;
     },
-    [fontColor]
+    [fontColor, onNavigate, linkComponent, supportDeepviewDomain]
   );
   if (!sections || sections.length === 0) {
     return null;
@@ -3121,14 +3136,19 @@ var PostSectionsSummaryView = ({
           whiteSpace: "pre-wrap",
           wordBreak: "break-word"
         },
-        mentionData: []
+        mentionData: [],
+        onNavigate,
+        linkComponent,
+        supportDeepviewDomain
       },
       "body"
     ),
     /* @__PURE__ */ jsx26(
       PostMediaLayoutCore_default,
       {
-        items: imageItems
+        items: imageItems,
+        isPostDetail,
+        onCardPress
       }
     )
   ] });