Release/v3.11.2

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### 3.11.2 (2024-11-22)
+
 ## 3.11.0 (2024-10-25)
 
 ### 3.10.3 (2024-10-18)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "3.11.0",
+  "version": "3.11.2",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"

src/core/components/GalleryGrid/TruncatedGrid.tsx

@@ -34,7 +34,9 @@ import Square from '~/core/components/Square';
   => ((100% / 3) / .75)
 */
 
-const Gallery = styled.div<{ count?: number; grid?: boolean }>`
+const Gallery = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'grid',
+})<{ count?: number; grid?: boolean }>`
   display: grid;
   width: 100%;
 

src/core/components/SideMenuActionItem/styles.tsx

@@ -34,7 +34,9 @@ export const ButtonActionItem = styled(SecondaryButton)`
   width: 100%;
 `;
 
-export const AnchorActionItem = styled.a<{ active?: boolean }>`
+export const AnchorActionItem = styled.a.withConfig({
+  shouldForwardProp: (prop) => prop !== 'active',
+})<{ active?: boolean }>`
   cursor: pointer;
   border-radius: 4px;
   ${actionItemContainerStyles}

src/social/components/post/TextContent/index.tsx

@@ -9,7 +9,12 @@ import MentionHighlightTag from '~/core/components/MentionHighlightTag';
 import { Mentioned, findChunks } from '~/helpers/utils';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
 
-export const PostContent = styled.div<{ isExpanded: boolean; postMaxLines: number }>`
+export const PostContent = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'isExpanded' && prop !== 'postMaxLines',
+})<{
+  isExpanded: boolean;
+  postMaxLines: number;
+}>`
   overflow-wrap: break-word;
   color: ${({ theme }) => theme.palette.neutral.main};
   white-space: pre-wrap;

src/v4/core/AdEngine.ts

@@ -18,7 +18,8 @@ class SeenRecencyCache {
     return JSON.parse(window.localStorage.getItem(this.#persistentCacheKey) || '{}');
   }
 
-  getSeenRecencyByAdId(adId: string): number {
+  getSeenRecencyByAdId(adId?: string): number | undefined {
+    if (!adId) return;
     return this.#getSeenRecencyCache()[adId];
   }
 
@@ -82,7 +83,7 @@ export class AdEngine {
     }
   }
 
-  getLastSeen(adId: string) {
+  getLastSeen(adId?: string) {
     return SeenRecencyCache.instance.getSeenRecencyByAdId(adId);
   }
 

src/v4/core/AdSupplier.ts

@@ -41,12 +41,15 @@ export class AdSupplier {
 
   #calculateImpressionAges(ads: Amity.Ad[]) {
     const recencySortedAds = ads.sort((ad1, ad2) => {
-      return AdEngine.instance.getLastSeen(ad2.adId) - AdEngine.instance.getLastSeen(ad1.adId);
+      const ad1ID = AdEngine.instance.getLastSeen(ad1.adId) ?? 0;
+      const ad2ID = AdEngine.instance.getLastSeen(ad2.adId) ?? 0;
+      return ad2ID - ad1ID;
     });
 
     const impressionAges = new Map<string, number>();
+
     const minLastSeen = AdEngine.instance.getLastSeen(
-      recencySortedAds[recencySortedAds.length - 1].adId,
+      recencySortedAds?.[recencySortedAds.length - 1]?.adId,
     );
     const maxLastSeen = AdEngine.instance.getLastSeen(recencySortedAds[0].adId);
 

src/v4/icons/AngleRight.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 
 const AngleRight = (props: React.SVGProps<SVGSVGElement>) => (
   <svg
-    width="6"
-    height="9"
+    width="100%"
+    height="100%"
     viewBox="0 0 6 9"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"

src/v4/social/elements/CommunityAvatar/CommunityAvatar.tsx

@@ -4,14 +4,14 @@ import { useAmityElement } from '~/v4/core/hooks/uikit';
 import styles from './CommunityAvatar.module.css';
 import clsx from 'clsx';
 
-const CommunityAvatarSvg = (props: React.SVGProps<SVGSVGElement>) => (
+const CommunityAvatarSvg = ({ className, ...props }: React.SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width="64"
-    height="64"
+    width="100%"
+    height="100%"
     viewBox="0 0 64 64"
     fill="none"
-    className={styles.communityAvatar__placeholder}
+    className={clsx(styles.communityAvatar__placeholder, className)}
     {...props}
   >
     <rect width="64" height="64" rx="32" className={styles.communityAvatar__placeholder__rect} />
@@ -46,7 +46,7 @@ export function CommunityAvatar({
 
   if (isExcluded) return null;
 
-  if (avatarFile == null) return <CommunityAvatarSvg style={themeStyles} />;
+  if (avatarFile == null) return <CommunityAvatarSvg style={themeStyles} className={className} />;
 
   return (
     <object
@@ -56,7 +56,7 @@ export function CommunityAvatar({
       data-qa-anchor={accessibilityId}
       className={clsx(styles.communityAvatar__image, className)}
     >
-      <CommunityAvatarSvg />
+      <CommunityAvatarSvg className={className} />
     </object>
   );
 }

src/v4/social/elements/ShareStoryButton/ShareStoryButton.module.css

@@ -1,7 +1,6 @@
 .shareStoryButton {
   display: inline-flex;
-  height: 2.5rem;
-  padding: 0.375rem 0.5rem 0.375rem 0.25rem;
+  padding: 0.25rem 0.5rem 0.25rem 0.25rem;
   align-items: center;
   gap: var(--asc-spacing-s1);
   flex-shrink: 0;

src/v4/social/hooks/useVisibilitySensor.tsx

@@ -0,0 +1,34 @@
+import { RefObject, useEffect, useState } from 'react';
+
+interface UseVisibilitySensorProps {
+  threshold: number;
+  elementRef: RefObject<HTMLDivElement>;
+}
+
+export const useVisibilitySensor = ({ threshold, elementRef }: UseVisibilitySensorProps) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (!elementRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const isIntersecting = entry.isIntersecting;
+          setIsVisible(isIntersecting);
+        });
+      },
+      {
+        threshold: threshold,
+      },
+    );
+
+    observer.observe(elementRef.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [threshold, elementRef]);
+
+  return { isVisible };
+};

src/v4/social/internal-components/ImageViewer/ImageViewer.tsx

@@ -1,24 +1,12 @@
 import React, { useState } from 'react';
 import useImage from '~/core/hooks/useImage';
-import usePostByIds from '~/social/hooks/usePostByIds';
 import { useAmityElement } from '~/v4/core/hooks/uikit';
 import { ClearButton } from '~/v4/social/elements/ClearButton';
-
 import styles from './ImageViewer.module.css';
+import AngleRight from '~/v4/icons/AngleRight';
+import usePost from '~/v4/core/hooks/objects/usePost';
 
-const AngleRight = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    width="6"
-    height="9"
-    viewBox="0 0 6 9"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    {...props}
-  >
-    <path d="M5.13281 4.71094L1.71094 8.17969C1.59375 8.29688 1.40625 8.29688 1.3125 8.17969L0.84375 7.71094C0.726562 7.59375 0.726562 7.42969 0.84375 7.3125L3.60938 4.5L0.84375 1.71094C0.726562 1.59375 0.726562 1.40625 0.84375 1.3125L1.3125 0.84375C1.40625 0.726562 1.59375 0.726562 1.71094 0.84375L5.13281 4.3125C5.25 4.42969 5.25 4.59375 5.13281 4.71094Z" />
-  </svg>
-);
-
+//TODO: After SDK update getPostChildren should be used instead of usePost
 interface ImageViewerProps {
   pageId?: string;
   componentId?: string;
@@ -36,18 +24,14 @@ export function ImageViewer({
   initialImageIndex,
   onClose,
 }: ImageViewerProps) {
-  const { themeStyles } = useAmityElement({ pageId, componentId, elementId });
+  const { themeStyles, accessibilityId } = useAmityElement({ pageId, componentId, elementId });
 
   const [selectedImageIndex, setSelectedImageIndex] = useState(initialImageIndex);
 
-  const posts = usePostByIds(post?.children || []);
-
-  const imagePosts = posts.filter((post) => post.dataType === 'image');
-
-  const selectedPost = imagePosts[selectedImageIndex];
+  const { post: imagePost } = usePost(post?.children[selectedImageIndex]);
 
-  const imageUrl = useImage({ fileId: selectedPost?.data?.fileId });
-  const hasNext = selectedImageIndex < imagePosts.length - 1;
+  const imageUrl = useImage({ fileId: imagePost?.data?.fileId });
+  const hasNext = selectedImageIndex < post?.children.length - 1;
   const hasPrev = selectedImageIndex > 0;
 
   const next = () => {
@@ -65,10 +49,10 @@ export function ImageViewer({
   };
 
   return (
-    <div style={themeStyles}>
+    <div style={themeStyles} data-qa-anchor={accessibilityId}>
       <div className={styles.modal} onClick={onClose}>
         <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
-          <img src={imageUrl} alt={selectedPost?.data?.fileId || ''} className={styles.fullImage} />
+          <img src={imageUrl} alt={imageUrl || ''} className={styles.fullImage} />
           <div className={styles.overlayPanel}>
             {hasPrev && (
               <div className={styles.overlayPanel__prev} onClick={prev}>