@pushwoosh/dumb-components 1.1.88 → 1.1.89

package/NotificationInbox/NotificationBell.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
-import { NotificationBellButton, NotificationBellIcon, NotificationBellBadge, NotificationBellBadgeDot } from './styles';
+import { NotificationBellButton, NotificationBellBadge, NotificationBellBadgeDot } from './styles';
 export function NotificationBell({
   count = 0,
   severity,
@@ -17,25 +17,18 @@ export function NotificationBell({
     if (severity === 'warning') return Color.WARNING;
     return Color.PRIMARY;
   };
-  const getIconColor = () => {
-    if (isOpened) return Color.CLEAR;
-    return Color.MAIN;
-  };
-  const getIconView = () => {
-    return isOpened ? 'filled' : 'lined';
-  };
   return React.createElement(NotificationBellButton, {
     className: className,
     "$isOpened": isOpened,
     onClick: onClick,
     type: "button",
     "aria-label": hasNotifications ? 'You have unread notifications' : 'Notifications'
-  }, React.createElement(NotificationBellIcon, null, React.createElement(NotificationIcon, {
-    size: "small",
-    view: getIconView(),
+  }, React.createElement(NotificationIcon, {
+    size: "medium",
     type: "enabled",
-    color: getIconColor()
-  })), showBadge && React.createElement(NotificationBellBadge, null, React.createElement(NotificationBellBadgeDot, {
+    view: isOpened ? 'filled' : 'lined',
+    color: "currentColor"
+  }), showBadge && React.createElement(NotificationBellBadge, null, React.createElement(NotificationBellBadgeDot, {
     "$color": getBadgeColor(),
     "$isDot": true
   })));

package/NotificationInbox/NotificationInbox.js

@@ -1,7 +1,8 @@
-import React, { useEffect, useRef, useCallback } from 'react';
+import React, { useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
+import { useInfiniteScroll } from './useInfiniteScroll';
 import { Badge } from '../Badge';
 import { Spinner } from '../Spinner';
 import emptyNotificationsIcon from './assets/EmptyNotifications.svg?url';
@@ -33,9 +34,6 @@ export function NotificationInbox({
   emptyStateIcon,
   className
 }) {
-  const listRef = useRef(null);
-  const observerRef = useRef(null);
-  const loadMoreRef = useRef(null);
   const unreadCount = notifications.filter(n => !n.isRead).length;
   const handleNotificationClick = useCallback(notification => {
     if (!notification.isRead && onMarkAsRead) {
@@ -43,31 +41,11 @@ export function NotificationInbox({
     }
     onNotificationClick === null || onNotificationClick === void 0 || onNotificationClick(notification);
   }, [onMarkAsRead, onNotificationClick]);
-  useEffect(() => {
-    if (!hasMore || !onLoadMore || isLoading) {
-      return;
-    }
-    const loadMoreElement = loadMoreRef.current;
-    if (!loadMoreElement) {
-      return;
-    }
-    observerRef.current = new IntersectionObserver(entries => {
-      const [entry] = entries;
-      if (entry !== null && entry !== void 0 && entry.isIntersecting && hasMore && !isLoading) {
-        onLoadMore();
-      }
-    }, {
-      root: listRef.current,
-      rootMargin: '100px',
-      threshold: 0.1
-    });
-    observerRef.current.observe(loadMoreElement);
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [hasMore, onLoadMore, isLoading]);
+  const loadMoreRef = useInfiniteScroll({
+    hasMore,
+    isLoading,
+    onLoadMore
+  });
   if (notifications.length === 0 && !isLoading) {
     return React.createElement(NotificationInboxContainer, {
       className: className
@@ -109,7 +87,7 @@ export function NotificationInbox({
     "$variant": "h4",
     "$color": Color.LOCKED
   }, unreadCount, ' ', "unread")))), React.createElement(NotificationInboxList, {
-    ref: listRef
+    "data-notification-list": true
   }, notifications.map(notification => {
     const isRead = notification.isRead ?? false;
     const badgeColor = severityToBadgeColorMap[notification.severity] || 'gray';
@@ -156,11 +134,12 @@ export function NotificationInbox({
       }
     }, notification.expandButton.label))));
   }), hasMore && React.createElement(NotificationInboxLoadMore, {
+    ref: loadMoreRef,
     "$variant": "footnote",
     "$color": Color.PHANTOM
   }, isLoading ? React.createElement(Spinner, {
     size: "small"
-  }) : 'Loading more...'), isLoading && notifications.length === 0 && React.createElement(Horizontal, {
+  }) : 'Loading more...'), isLoading && notifications.length === 0 && !hasMore && React.createElement(Horizontal, {
     "$justifyContent": "center",
     "$alignItems": "center",
     "$padding": "16px 0"

package/NotificationInbox/styles.d.ts

@@ -431,7 +431,6 @@ export declare const NotificationBarBadgeText: import("styled-components").Style
 export declare const NotificationBellButton: import("styled-components").StyledComponent<"button", any, {
     $isOpened: boolean;
 }, never>;
-export declare const NotificationBellIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NotificationBellBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const NotificationBellBadgeDot: import("styled-components").StyledComponent<"div", any, {
     $color: string;

package/NotificationInbox/styles.js

@@ -1,11 +1,11 @@
 import styled from 'styled-components';
-import { Color, FontSize, FontWeight, FontFamily, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight, FontFamily, ShapeRadius, Shadow } from '@pushwoosh/kit-constants';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { Text } from '@pushwoosh/kit-typography';
 export const NotificationInboxContainer = styled(Vertical).withConfig({
   displayName: "NotificationInboxContainer",
   componentId: "sc-1nrene1-0"
-})(["width:100%;min-width:360px;max-width:360px;max-height:600px;background:", ";border:1px solid ", ";border-radius:", ";overflow:hidden;display:flex;flex-direction:column;"], Color.CLEAR, Color.FORM, ShapeRadius.DIALOG);
+})(["width:100%;min-width:360px;max-width:360px;max-height:600px;background:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";overflow:hidden;display:flex;flex-direction:column;"], Color.CLEAR, Color.FORM, ShapeRadius.DIALOG, Shadow.REGULAR);
 export const NotificationInboxHeader = styled(Horizontal).withConfig({
   displayName: "NotificationInboxHeader",
   componentId: "sc-1nrene1-1"
@@ -237,7 +237,7 @@ export const NotificationBarBadgeText = styled(Text).withConfig({
 export const NotificationBellButton = styled.button.withConfig({
   displayName: "NotificationBellButton",
   componentId: "sc-1nrene1-17"
-})(["position:relative;width:36px;height:36px;padding:6px;border:none;background:", ";border-radius:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s;--icon-color:", ";&:hover:not(:disabled){background-color:", ";--icon-color:", ";}"], ({
+})(["position:relative;width:36px;height:36px;padding:6px;border:none;background:", ";border-radius:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s;color:", ";transition:background-color 0.2s,color 0.2s;&:hover:not(:disabled){background-color:", ";color:", ";}"], ({
   $isOpened
 }) => $isOpened ? Color.MAIN : 'transparent', ShapeRadius.CONTROL, ({
   $isOpened
@@ -246,17 +246,13 @@ export const NotificationBellButton = styled.button.withConfig({
 }) => $isOpened ? Color.MAIN : Color.BRIGHT_LIGHT, ({
   $isOpened
 }) => $isOpened ? Color.CLEAR : Color.PRIMARY_HOVER);
-export const NotificationBellIcon = styled.div.withConfig({
-  displayName: "NotificationBellIcon",
-  componentId: "sc-1nrene1-18"
-})(["width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s;color:var(--icon-color);"]);
 export const NotificationBellBadge = styled.div.withConfig({
   displayName: "NotificationBellBadge",
-  componentId: "sc-1nrene1-19"
+  componentId: "sc-1nrene1-18"
 })(["position:absolute;right:4px;top:4px;z-index:1;"]);
 export const NotificationBellBadgeDot = styled.div.withConfig({
   displayName: "NotificationBellBadgeDot",
-  componentId: "sc-1nrene1-20"
+  componentId: "sc-1nrene1-19"
 })(["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/useInfiniteScroll.d.ts

@@ -0,0 +1,11 @@
+type UseInfiniteScrollOptions = {
+    hasMore: boolean;
+    isLoading: boolean;
+    onLoadMore?: () => void;
+    root?: Element | null;
+    rootMargin?: string;
+    threshold?: number | number[];
+    enabled?: boolean;
+};
+export declare function useInfiniteScroll({ hasMore, isLoading, onLoadMore, root, rootMargin, threshold, enabled, }: UseInfiniteScrollOptions): (node: HTMLDivElement | null) => void;
+export {};

package/NotificationInbox/useInfiniteScroll.js

@@ -0,0 +1,39 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useInfiniteScroll({
+  hasMore,
+  isLoading,
+  onLoadMore,
+  root,
+  rootMargin = '100px',
+  threshold = 0.1,
+  enabled = true
+}) {
+  const elementRef = useRef(null);
+  const observerRef = useRef(null);
+  const setRef = useCallback(node => {
+    elementRef.current = node;
+  }, []);
+  useEffect(() => {
+    var _observerRef$current;
+    const el = elementRef.current;
+    if (!enabled || !el || !hasMore || !onLoadMore) return;
+    const resolvedRoot = root ?? el.closest('[data-notification-list]');
+    (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
+    observerRef.current = new IntersectionObserver(([entry]) => {
+      if (entry !== null && entry !== void 0 && entry.isIntersecting && !isLoading && hasMore) {
+        onLoadMore();
+      }
+    }, {
+      root: resolvedRoot,
+      rootMargin,
+      threshold
+    });
+    observerRef.current.observe(el);
+    return () => {
+      var _observerRef$current2;
+      (_observerRef$current2 = observerRef.current) === null || _observerRef$current2 === void 0 || _observerRef$current2.disconnect();
+      observerRef.current = null;
+    };
+  }, [enabled, hasMore, isLoading, onLoadMore, root, rootMargin, threshold]);
+  return setRef;
+}

package/package.json

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