@pushwoosh/dumb-components 1.1.95 → 1.1.97

package/Calendar/CalendarDropdown/types.js

@@ -1,5 +1 @@
-;
-;
-;
-;
 export {};

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.js

@@ -6,7 +6,7 @@ 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, NotificationInboxLoadMore, NotificationInboxEmptyText } from './styles';
+import { NotificationInboxContainer, NotificationInboxHeader, NotificationInboxTitle, NotificationInboxList, NotificationItem, NotificationIndicator, NotificationHeader, NotificationActionLink, NotificationInboxEmptyIcon, NotificationInboxEmptyText } from './styles';
 const severityToBadgeColorMap = {
   critical: 'red',
   warning: 'orange',
@@ -98,13 +98,15 @@ export function NotificationInbox({
       "$isRead": isRead
     }), React.createElement(Vertical, {
       "$gap": 8
-    }, React.createElement(NotificationHeader, null, React.createElement(Horizontal, {
+    }, React.createElement(Vertical, null, React.createElement(NotificationHeader, null, React.createElement(Horizontal, {
       "$gap": 4,
       "$alignItems": "center"
     }, React.createElement(Text, {
       "$variant": "footnote",
       "$color": Color.LOCKED
-    }, formatTimestamp(notification.timestamp)), notification.projectName && React.createElement(React.Fragment, null, React.createElement("span", null, "\u2022"), React.createElement(Text, {
+    }, formatTimestamp(notification.timestamp)), notification.projectName && React.createElement(React.Fragment, null, React.createElement(Text, {
+      "$color": Color.LOCKED
+    }, "\u2022"), React.createElement(Text, {
       "$variant": "footnote",
       "$color": Color.LOCKED
     }, notification.projectName))), (notification.severity === 'critical' || notification.severity === 'warning') && React.createElement(Badge, {
@@ -116,9 +118,10 @@ export function NotificationInbox({
     }, notification.title), notification.description && React.createElement(Text, {
       "$variant": "standard",
       "$color": Color.MAIN
-    }, notification.description), (notification.actionButton || notification.expandButton) && React.createElement(Horizontal, {
-      "$gap": 12,
-      "$justifyContent": "start"
+    }, notification.description)), (notification.actionButton || notification.expandButton) && React.createElement(Horizontal, {
+      "$alignItems": "center",
+      "$justifyContent": "start",
+      "$gap": 12
     }, notification.actionButton && React.createElement(NotificationActionLink, {
       "$isPrimary": true,
       onClick: e => {
@@ -133,17 +136,24 @@ export function NotificationInbox({
         (_notification$expandB = notification.expandButton) === null || _notification$expandB === void 0 || _notification$expandB.onClick();
       }
     }, notification.expandButton.label))));
-  }), hasMore && React.createElement(NotificationInboxLoadMore, {
+  }), hasMore && isLoading && React.createElement(Horizontal, {
     ref: loadMoreRef,
+    "$alignItems": "center",
+    "$justifyContent": "center",
+    "$padding": 16,
+    "$gap": 8
+  }, React.createElement(Spinner, {
+    size: "small",
+    color: Color.LOCKED
+  }), React.createElement(Text, {
     "$variant": "footnote",
-    "$color": Color.PHANTOM
-  }, isLoading ? React.createElement(Spinner, {
-    size: "small"
-  }) : 'Loading more...'), isLoading && notifications.length === 0 && !hasMore && React.createElement(Horizontal, {
+    "$color": Color.LOCKED
+  }, "Loading more\u2026")), isLoading && notifications.length === 0 && !hasMore && React.createElement(Horizontal, {
     "$justifyContent": "center",
     "$alignItems": "center",
     "$padding": "16px 0"
   }, React.createElement(Spinner, {
-    size: "medium"
+    size: "medium",
+    color: Color.LOCKED
   }))));
 }

package/NotificationInbox/styles.d.ts

@@ -342,62 +342,6 @@ export declare const NotificationHeader: import("styled-components").StyledCompo
 } & {
     $gridAutoFlow: string;
 }, "$gridAutoFlow">;
-export declare const NotificationActions: import("styled-components").StyledComponent<"div", any, {
-    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $bgColor?: string | undefined;
-    $border?: string | ({
-        top?: string | undefined;
-        right?: string | undefined;
-        bottom?: string | undefined;
-        left?: string | undefined;
-    } | {
-        horizontal: string;
-        top?: string | undefined;
-        bottom?: string | undefined;
-    } | {
-        vertical: string;
-        right?: string | undefined;
-        left?: string | undefined;
-    }) | undefined;
-    $borderRadius?: (string | number) | undefined;
-    $boxShadow?: string | undefined;
-    $gap?: (string | number) | undefined;
-    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
-    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
-    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
-    $margin?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $padding?: (string | number) | ({
-        top?: (string | number) | undefined;
-        right?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    } | {
-        horizontal: string | number;
-        top?: (string | number) | undefined;
-        bottom?: (string | number) | undefined;
-    } | {
-        vertical: string | number;
-        right?: (string | number) | undefined;
-        left?: (string | number) | undefined;
-    }) | undefined;
-    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
-} & {
-    $gridAutoFlow: string;
-}, "$gridAutoFlow">;
 export declare const NotificationActionLink: import("styled-components").StyledComponent<"button", any, {
     $isPrimary?: boolean;
 }, never>;
@@ -408,12 +352,6 @@ export declare const NotificationInboxEmptyText: import("styled-components").Sty
     $ellipsis?: boolean | undefined;
     $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
 }, never>;
-export declare const NotificationInboxLoadMore: import("styled-components").StyledComponent<"span", any, {
-    $color?: string | undefined;
-    $uppercase?: boolean | undefined;
-    $ellipsis?: boolean | undefined;
-    $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
-}, never>;
 export declare const NotificationBarButton: import("styled-components").StyledComponent<"button", any, {
     $type: "important" | "warning" | "notifications" | "no-notifications";
     $isOpened: boolean;

package/NotificationInbox/styles.js

@@ -32,31 +32,23 @@ 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 NotificationActions = styled(Horizontal).withConfig({
-  displayName: "NotificationActions",
-  componentId: "sc-1nrene1-7"
-})(["gap:12px;margin-top:0;flex-wrap:wrap;justify-content:flex-start;width:100%;"]);
 export const NotificationActionLink = styled.button.withConfig({
   displayName: "NotificationActionLink",
-  componentId: "sc-1nrene1-8"
+  componentId: "sc-1nrene1-7"
 })(["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({
   displayName: "NotificationInboxEmptyIcon",
-  componentId: "sc-1nrene1-9"
+  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);
 export const NotificationInboxEmptyText = styled(Text).withConfig({
   displayName: "NotificationInboxEmptyText",
-  componentId: "sc-1nrene1-10"
+  componentId: "sc-1nrene1-9"
 })(["text-align:center;"]);
-export const NotificationInboxLoadMore = styled(NotificationInboxEmptyText).withConfig({
-  displayName: "NotificationInboxLoadMore",
-  componentId: "sc-1nrene1-11"
-})(["padding:16px;"]);
 export const NotificationBarButton = styled.button.withConfig({
   displayName: "NotificationBarButton",
-  componentId: "sc-1nrene1-12"
+  componentId: "sc-1nrene1-10"
 })(["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,
@@ -220,24 +212,24 @@ export const NotificationBarButton = styled.button.withConfig({
 });
 export const NotificationBarIcon = styled.div.withConfig({
   displayName: "NotificationBarIcon",
-  componentId: "sc-1nrene1-13"
+  componentId: "sc-1nrene1-11"
 })(["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-14"
-})(["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);
+  componentId: "sc-1nrene1-12"
+})(["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-15"
+  componentId: "sc-1nrene1-13"
 })(["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-16"
+  componentId: "sc-1nrene1-14"
 })(["text-transform:uppercase;transition:color 0.2s;color:var(--badge-text-color);"]);
 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;color:", ";transition:background-color 0.2s,color 0.2s;&:hover:not(:disabled){background-color:", ";color:", ";}"], ({
+  componentId: "sc-1nrene1-15"
+})(["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, ({
   $isOpened
@@ -248,11 +240,11 @@ export const NotificationBellButton = styled.button.withConfig({
 }) => $isOpened ? Color.CLEAR : Color.PRIMARY_HOVER);
 export const NotificationBellBadge = styled.div.withConfig({
   displayName: "NotificationBellBadge",
-  componentId: "sc-1nrene1-18"
+  componentId: "sc-1nrene1-16"
 })(["position:absolute;right:4px;top:4px;z-index:1;"]);
 export const NotificationBellBadgeDot = styled.div.withConfig({
   displayName: "NotificationBellBadgeDot",
-  componentId: "sc-1nrene1-19"
+  componentId: "sc-1nrene1-17"
 })(["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/package.json

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