@pushwoosh/dumb-components 1.1.96 → 1.1.98

package/NotificationInbox/NotificationBar.js

@@ -2,8 +2,9 @@ import React from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
 import { NotificationBarButton, NotificationBarIcon, NotificationBarBadge, NotificationBarText, NotificationBarBadgeText } from './styles';
-function getIconView(isOpened, filled) {
-  if (isOpened) return 'lined';
+function getIconView(isOpened, filled, hasNotifications) {
+  if (isOpened && !hasNotifications) return 'lined';
+  if (isOpened) return 'filled';
   if (filled) return 'filled';
   return 'lined';
 }
@@ -15,7 +16,7 @@ export function NotificationBar({
   onClick,
   className
 }) {
-  const showBadge = count > 0 && type !== 'no-notifications';
+  const hasNotifications = count > 0 && type !== 'no-notifications';
   const shouldUseFilledIcon = !isOpened && (!read && type !== 'no-notifications' || read);
   const getIconColor = () => {
     if (isOpened) return Color.CLEAR;
@@ -38,9 +39,9 @@ export function NotificationBar({
   }, React.createElement(NotificationBarIcon, null, React.createElement(NotificationIcon, {
     type: "enabled",
     size: "small",
-    view: getIconView(isOpened, shouldUseFilledIcon),
+    view: getIconView(isOpened, shouldUseFilledIcon, hasNotifications),
     color: getIconColor()
-  })), React.createElement(NotificationBarText, null, "Notification center"), showBadge && React.createElement(NotificationBarBadge, null, React.createElement(NotificationBarBadgeText, {
+  })), React.createElement(NotificationBarText, null, "Notification center"), hasNotifications && React.createElement(NotificationBarBadge, null, React.createElement(NotificationBarBadgeText, {
     "$variant": "h5"
   }, count)));
 }

package/NotificationInbox/NotificationInbox.d.ts

@@ -1,3 +1,3 @@
 import { type ReactElement } from 'react';
 import type { NotificationInboxProps } from './types';
-export declare function NotificationInbox({ notifications, isLoading, hasMore, onLoadMore, onNotificationClick, onMarkAsRead, emptyStateTitle, emptyStateDescription, emptyStateIcon, className, }: NotificationInboxProps): ReactElement;
+export declare function NotificationInbox({ notifications, isLoading, hasMore, onLoadMore, onNotificationClick, onMarkAsRead, emptyStateTitle, emptyStateDescription, className, }: NotificationInboxProps): ReactElement;

package/NotificationInbox/NotificationInbox.js

@@ -1,27 +1,14 @@
-import React, { useCallback } from 'react';
+import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
+import { VISIBLE_LINES, badgeColorMap } from './constants';
+import { formatTimestamp } from './helpers';
 import { useInfiniteScroll } from './useInfiniteScroll';
 import { Badge } from '../Badge';
 import { Spinner } from '../Spinner';
 import emptyNotificationsIcon from './assets/EmptyNotifications.svg?url';
-import { NotificationInboxContainer, NotificationInboxHeader, NotificationInboxTitle, NotificationInboxList, NotificationItem, NotificationIndicator, NotificationHeader, NotificationActionLink, NotificationInboxEmptyIcon, NotificationInboxEmptyText } from './styles';
-const severityToBadgeColorMap = {
-  critical: 'red',
-  warning: 'orange',
-  info: 'gray'
-};
-function formatTimestamp(timestamp) {
-  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
-  const day = date.getDate();
-  const month = date.toLocaleString('en-US', {
-    month: 'short'
-  });
-  const hours = date.getHours();
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  return `${day} ${month}, ${hours}:${minutes}`;
-}
+import { NotificationInboxContainer, NotificationInboxHeader, NotificationInboxTitle, NotificationInboxList, NotificationItem, NotificationIndicator, NotificationHeader, NotificationDescription, NotificationActionLink, NotificationInboxEmptyIcon, NotificationInboxEmptyText } from './styles';
 export function NotificationInbox({
   notifications,
   isLoading = false,
@@ -31,10 +18,14 @@ export function NotificationInbox({
   onMarkAsRead,
   emptyStateTitle = 'No notifications yet',
   emptyStateDescription = 'You\'ll see updates and alerts here once something requires your attention.',
-  emptyStateIcon,
   className
 }) {
-  const unreadCount = notifications.filter(n => !n.isRead).length;
+  const descriptionRefs = useRef({});
+  const [expandedId, setExpandedId] = useState(null);
+  const [showExpandMap, setShowExpandMap] = useState({});
+  const unreadCount = notifications.filter(({
+    isRead
+  }) => !isRead).length;
   const handleNotificationClick = useCallback(notification => {
     if (!notification.isRead && onMarkAsRead) {
       onMarkAsRead(notification.id);
@@ -46,6 +37,17 @@ export function NotificationInbox({
     isLoading,
     onLoadMore
   });
+  useLayoutEffect(() => {
+    const newMap = {};
+    notifications.forEach(n => {
+      const element = descriptionRefs.current[n.id];
+      if (!element) return;
+      const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
+      const maxHeight = lineHeight * VISIBLE_LINES;
+      newMap[n.id] = element.scrollHeight > maxHeight + 1;
+    });
+    setShowExpandMap(newMap);
+  }, [notifications]);
   if (notifications.length === 0 && !isLoading) {
     return React.createElement(NotificationInboxContainer, {
       className: className
@@ -56,14 +58,10 @@ export function NotificationInbox({
       "$alignItems": "center",
       "$gap": 24,
       "$padding": "24px"
-    }, emptyStateIcon ? React.createElement(NotificationInboxEmptyIcon, null, emptyStateIcon) : React.createElement(NotificationInboxEmptyIcon, null, React.createElement("img", {
-      src: emptyNotificationsIcon,
-      alt: "No notifications",
-      style: {
-        width: '120px',
-        height: '120px'
-      }
-    })), React.createElement(Vertical, {
+    }, React.createElement(NotificationInboxEmptyIcon, {
+      alt: emptyStateTitle,
+      src: emptyNotificationsIcon
+    }), React.createElement(Vertical, {
       "$alignItems": "center",
       "$gap": 6,
       "$padding": "24px",
@@ -90,7 +88,8 @@ export function NotificationInbox({
     "data-notification-list": true
   }, notifications.map(notification => {
     const isRead = notification.isRead ?? false;
-    const badgeColor = severityToBadgeColorMap[notification.severity] || 'gray';
+    const badgeColor = badgeColorMap[notification.severity] || 'gray';
+    const showExpandButton = showExpandMap[notification.id] ?? false;
     return React.createElement(NotificationItem, {
       key: notification.id,
       onClick: () => handleNotificationClick(notification)
@@ -115,10 +114,14 @@ export function NotificationInbox({
     }, notification.severity.toUpperCase())), React.createElement(Text, {
       "$variant": "h4",
       "$color": Color.MAIN
-    }, notification.title), notification.description && React.createElement(Text, {
+    }, notification.title), notification.description && React.createElement(NotificationDescription, {
+      as: "div",
+      ref: element => descriptionRefs.current[notification.id] = element || null,
       "$variant": "standard",
-      "$color": Color.MAIN
-    }, notification.description)), (notification.actionButton || notification.expandButton) && React.createElement(Horizontal, {
+      "$color": Color.MAIN,
+      "$visibleLines": VISIBLE_LINES,
+      "$expanded": expandedId === notification.id
+    }, notification.description)), (notification.actionButton || showExpandButton) && React.createElement(Horizontal, {
       "$alignItems": "center",
       "$justifyContent": "start",
       "$gap": 12
@@ -129,17 +132,16 @@ export function NotificationInbox({
         e.stopPropagation();
         (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
       }
-    }, notification.actionButton.label), notification.expandButton && React.createElement(NotificationActionLink, {
+    }, notification.actionButton.label), showExpandButton && React.createElement(NotificationActionLink, {
       onClick: e => {
-        var _notification$expandB;
         e.stopPropagation();
-        (_notification$expandB = notification.expandButton) === null || _notification$expandB === void 0 || _notification$expandB.onClick();
+        setExpandedId(prev => prev === notification.id ? null : notification.id);
       }
-    }, notification.expandButton.label))));
+    }, expandedId === notification.id ? 'Collapse' : 'Expand'))));
   }), hasMore && isLoading && React.createElement(Horizontal, {
     ref: loadMoreRef,
     "$alignItems": "center",
-    "$justifyContent": "start",
+    "$justifyContent": "center",
     "$padding": 16,
     "$gap": 8
   }, React.createElement(Spinner, {

package/NotificationInbox/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const VISIBLE_LINES = 3;
+export declare const badgeColorMap: Record<string, 'red' | 'orange' | 'gray'>;

package/NotificationInbox/constants.js

@@ -0,0 +1,6 @@
+export const VISIBLE_LINES = 3;
+export const badgeColorMap = {
+  critical: 'red',
+  warning: 'orange',
+  info: 'gray'
+};

package/NotificationInbox/helpers.d.ts

@@ -0,0 +1 @@
+export declare function formatTimestamp(timestamp: string | Date): string;

package/NotificationInbox/helpers.js

@@ -0,0 +1,10 @@
+export function formatTimestamp(timestamp) {
+  const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
+  const day = date.getDate();
+  const month = date.toLocaleString('en-US', {
+    month: 'short'
+  });
+  const hours = date.getHours();
+  const minutes = date.getMinutes().toString().padStart(2, '0');
+  return `${day} ${month}, ${hours}:${minutes}`;
+}

package/NotificationInbox/styles.d.ts

@@ -342,10 +342,19 @@ export declare const NotificationHeader: import("styled-components").StyledCompo
 } & {
     $gridAutoFlow: string;
 }, "$gridAutoFlow">;
+export declare const NotificationDescription: import("styled-components").StyledComponent<"span", any, {
+    $color?: string | undefined;
+    $uppercase?: boolean | undefined;
+    $ellipsis?: boolean | undefined;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
+} & {
+    $expanded?: boolean;
+    $visibleLines: number;
+}, never>;
 export declare const NotificationActionLink: import("styled-components").StyledComponent<"button", any, {
     $isPrimary?: boolean;
 }, never>;
-export declare const NotificationInboxEmptyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NotificationInboxEmptyIcon: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const NotificationInboxEmptyText: import("styled-components").StyledComponent<"span", any, {
     $color?: string | undefined;
     $uppercase?: boolean | undefined;

package/NotificationInbox/styles.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Color, FontSize, FontWeight, FontFamily, ShapeRadius, Shadow } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
@@ -32,23 +32,30 @@ export const NotificationHeader = styled(Horizontal).withConfig({
   displayName: "NotificationHeader",
   componentId: "sc-1nrene1-6"
 })(["justify-content:space-between;align-items:center;width:100%;gap:4px;height:20px;"]);
+export const NotificationDescription = styled(Text).withConfig({
+  displayName: "NotificationDescription",
+  componentId: "sc-1nrene1-7"
+})(["display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;", ""], ({
+  $expanded,
+  $visibleLines
+}) => !$expanded && css(["-webkit-line-clamp:", ";text-overflow:ellipsis;"], $visibleLines));
 export const NotificationActionLink = styled.button.withConfig({
   displayName: "NotificationActionLink",
-  componentId: "sc-1nrene1-7"
+  componentId: "sc-1nrene1-8"
 })(["background:none;border:none;padding:0;margin:0;font-size:12px;font-family:", ";font-weight:", ";line-height:1.3;color:", ";text-decoration:none;text-transform:uppercase;cursor:pointer;transition:opacity 0.2s;white-space:nowrap;&:hover{opacity:0.8;}&:active{opacity:0.6;}"], FontFamily.MAIN, FontWeight.BOLD, ({
   $isPrimary
 }) => $isPrimary ? Color.PRIMARY : Color.SOFT);
-export const NotificationInboxEmptyIcon = styled.div.withConfig({
+export const NotificationInboxEmptyIcon = styled.img.withConfig({
   displayName: "NotificationInboxEmptyIcon",
-  componentId: "sc-1nrene1-8"
-})(["width:120px;height:120px;display:flex;align-items:center;justify-content:center;color:", ";margin:0 auto;img{width:100%;height:100%;object-fit:contain;}"], Color.PHANTOM);
+  componentId: "sc-1nrene1-9"
+})(["display:flex;align-items:center;justify-content:center;width:120px;height:120px;margin:0 auto;object-fit:contain;"]);
 export const NotificationInboxEmptyText = styled(Text).withConfig({
   displayName: "NotificationInboxEmptyText",
-  componentId: "sc-1nrene1-9"
+  componentId: "sc-1nrene1-10"
 })(["text-align:center;"]);
 export const NotificationBarButton = styled.button.withConfig({
   displayName: "NotificationBarButton",
-  componentId: "sc-1nrene1-10"
+  componentId: "sc-1nrene1-11"
 })(["display:flex;gap:8px;align-items:center;padding:8px 16px 8px 12px;width:260px;border:none;border-top:1px solid ", ";border-bottom:0;border-left:0;border-right:0;cursor:pointer;transition:background-color 0.2s,opacity 0.2s;background-color:", ";--icon-color:", ";--text-color:", ";--badge-bg:", ";--badge-text-color:", ";&:hover:not(:disabled){background-color:", ";--icon-color:", ";--text-color:", ";--badge-bg:", ";--badge-text-color:", ";}&:active:not(:disabled){opacity:0.5;--icon-color:", ";--text-color:", ";--badge-bg:", ";}"], Color.FORM, ({
   $type,
   $isOpened,
@@ -212,23 +219,23 @@ export const NotificationBarButton = styled.button.withConfig({
 });
 export const NotificationBarIcon = styled.div.withConfig({
   displayName: "NotificationBarIcon",
-  componentId: "sc-1nrene1-11"
+  componentId: "sc-1nrene1-12"
 })(["width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color 0.2s;color:var(--icon-color);"]);
 export const NotificationBarText = styled.div.withConfig({
   displayName: "NotificationBarText",
-  componentId: "sc-1nrene1-12"
+  componentId: "sc-1nrene1-13"
 })(["display:flex;align-items:center;justify-content:start;flex:1 0 0;font-size:", ";font-family:", ";font-weight:", ";line-height:1.4;transition:color 0.2s;color:var(--text-color);white-space:pre-wrap;"], FontSize.REGULAR, FontFamily.MAIN, FontWeight.MEDIUM);
 export const NotificationBarBadge = styled.div.withConfig({
   displayName: "NotificationBarBadge",
-  componentId: "sc-1nrene1-13"
+  componentId: "sc-1nrene1-14"
 })(["flex-shrink:0;transition:background-color 0.2s;background-color:var(--badge-bg);border-radius:", ";padding:2px 6px;display:flex;align-items:center;justify-content:center;"], ShapeRadius.CONTROL);
 export const NotificationBarBadgeText = styled(Text).withConfig({
   displayName: "NotificationBarBadgeText",
-  componentId: "sc-1nrene1-14"
+  componentId: "sc-1nrene1-15"
 })(["text-transform:uppercase;transition:color 0.2s;color:var(--badge-text-color);"]);
 export const NotificationBellButton = styled.button.withConfig({
   displayName: "NotificationBellButton",
-  componentId: "sc-1nrene1-15"
+  componentId: "sc-1nrene1-16"
 })(["position:relative;width:36px;height:36px;padding:6px;border:none;background:", ";border-radius:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;color:", ";transition:background-color 0.2s,color 0.2s;&:hover:not(:disabled){background-color:", ";color:", ";}"], ({
   $isOpened
 }) => $isOpened ? Color.MAIN : 'transparent', ShapeRadius.CONTROL, ({
@@ -240,11 +247,11 @@ export const NotificationBellButton = styled.button.withConfig({
 }) => $isOpened ? Color.CLEAR : Color.PRIMARY_HOVER);
 export const NotificationBellBadge = styled.div.withConfig({
   displayName: "NotificationBellBadge",
-  componentId: "sc-1nrene1-16"
+  componentId: "sc-1nrene1-17"
 })(["position:absolute;right:4px;top:4px;z-index:1;"]);
 export const NotificationBellBadgeDot = styled.div.withConfig({
   displayName: "NotificationBellBadgeDot",
-  componentId: "sc-1nrene1-17"
+  componentId: "sc-1nrene1-18"
 })(["background-color:", ";border-radius:100px;", " display:flex;align-items:center;justify-content:center;font-size:10px;font-family:", ";font-weight:", ";line-height:1;color:", ";white-space:nowrap;"], ({
   $color
 }) => $color, ({

package/NotificationInbox/types.d.ts

@@ -1,4 +1,3 @@
-import type { ReactNode } from 'react';
 export type NotificationSeverity = 'critical' | 'warning' | 'info';
 export interface Notification {
     readonly id: string;
@@ -12,10 +11,6 @@ export interface Notification {
         readonly label: string;
         readonly onClick: () => void;
     };
-    readonly expandButton?: {
-        readonly label: string;
-        readonly onClick: () => void;
-    };
 }
 export interface NotificationInboxProps {
     readonly notifications: Notification[];
@@ -26,7 +21,6 @@ export interface NotificationInboxProps {
     readonly onMarkAsRead?: (notificationId: string) => void;
     readonly emptyStateTitle?: string;
     readonly emptyStateDescription?: string;
-    readonly emptyStateIcon?: ReactNode;
     readonly className?: string;
 }
 export type NotificationBarType = 'important' | 'warning' | 'notifications' | 'no-notifications';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.96",
+  "version": "1.1.98",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",