@pushwoosh/dumb-components 1.1.87 → 1.1.89

package/FrequencyCapping/FrequencyCappingEdit.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import { type ReactElement } from 'react';
 import { type CappingBase, type FrequencyCappingEditProps } from './types';
-export declare function FrequencyCappingEdit<T extends CappingBase>({ capping, globalCapping, onChange, applicationCode, editGlobalClicked, isInJourney, }: FrequencyCappingEditProps<T>): React.JSX.Element;
+export declare function FrequencyCappingEdit<T extends CappingBase>({ capping, globalCapping, onChange, applicationCode, editGlobalClicked, isInJourney, isDisabled, }: FrequencyCappingEditProps<T>): ReactElement;

package/FrequencyCapping/FrequencyCappingEdit.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
 import { Vertical } from '@pushwoosh/kit-helpers';
 import { OpenIcon } from '@pushwoosh/kit-icons';
@@ -17,7 +17,8 @@ export function FrequencyCappingEdit({
   onChange,
   applicationCode,
   editGlobalClicked,
-  isInJourney = false
+  isInJourney = false,
+  isDisabled = false
 }) {
   const {
     enabled,
@@ -28,7 +29,7 @@ export function FrequencyCappingEdit({
   const cappingOption = getCappingOption(enabled, ignoreGlobalCapping);
   const isGlobalCappingDisabled = globalCapping.count === 0 && globalCapping.days === 0;
   const globalCappingLinkText = isGlobalCappingDisabled ? 'Set up' : 'Settings';
-  const onChangeFrequencyCapping = React.useCallback(value => {
+  const onChangeFrequencyCapping = useCallback(value => {
     if (value === CappingTypes.IGNORE) {
       onChange({
         ...capping,
@@ -53,7 +54,7 @@ export function FrequencyCappingEdit({
       });
     }
   }, [capping, onChange]);
-  const onSettingsChange = React.useCallback((messages, days) => {
+  const onSettingsChange = useCallback((messages, days) => {
     onChange({
       ...capping,
       messages,
@@ -70,6 +71,7 @@ export function FrequencyCappingEdit({
     title: "Frequency capping"
   }, React.createElement(Select, {
     name: "cappingOption",
+    isDisabled: isDisabled,
     options: cappingOptions,
     value: cappingOptions.find(option => option.value === cappingOption),
     onChange: newValue => onChangeFrequencyCapping(newValue.value)
@@ -79,15 +81,15 @@ export function FrequencyCappingEdit({
     days: globalCapping.days,
     isInJourney: isInJourney
   }, cappingOption === CappingTypes.GLOBAL && React.createElement(Link, {
+    target: "_blank",
     href: `/applications/${applicationCode}/message-delivery?tab=capping`,
     title: globalCappingLinkText,
-    target: "_blank",
     onClick: editGlobalClicked
   }, React.createElement(LinkWrapper, null, globalCappingLinkText, React.createElement(OpenIcon, {
     size: "small",
     view: "lined",
     as: "span"
-  })))), cappingOption === CappingTypes.CUSTOM && React.createElement(EditCappingSettings, {
+  })))), cappingOption === CappingTypes.CUSTOM && !isDisabled && React.createElement(EditCappingSettings, {
     messages: messages,
     days: days,
     onChange: onSettingsChange

package/FrequencyCapping/components/Settings/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-type Props = {
+import { type ReactElement } from 'react';
+type EditCappingSettingsProps = {
     messages: number;
     days: number;
     onChange: (messages: number, days: number) => void;
 };
-export declare function EditCappingSettings(props: Props): React.JSX.Element;
+export declare function EditCappingSettings(props: EditCappingSettingsProps): ReactElement;
 export {};

package/FrequencyCapping/components/Settings/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Paragraph } from '@pushwoosh/kit-typography';
 import { NumberPicker } from '../../../NumberPicker';
@@ -8,10 +8,10 @@ export function EditCappingSettings(props) {
     days,
     onChange
   } = props;
-  const onMessagesChange = React.useCallback(value => {
+  const onMessagesChange = useCallback(value => {
     onChange(value, days);
   }, [days, onChange]);
-  const onDaysChange = React.useCallback(value => {
+  const onDaysChange = useCallback(value => {
     onChange(messages, value);
   }, [messages, onChange]);
   return React.createElement(Horizontal, {
@@ -20,15 +20,15 @@ export function EditCappingSettings(props) {
     style: {
       gridTemplateColumns: '145px 70px 90px 70px 40px'
     }
-  }, React.createElement(Paragraph, null, "Limit to a maximum of"), React.createElement(NumberPicker, {
-    onChange: value => onMessagesChange(value),
+  }, React.createElement(Paragraph, null, "Limit to a\u00A0maximum\u00A0of"), React.createElement(NumberPicker, {
     value: messages,
     minValue: 1,
-    maxValue: 1000
+    maxValue: 1000,
+    onChange: value => onMessagesChange(value)
   }), React.createElement(Paragraph, null, "messages per"), React.createElement(NumberPicker, {
     maxValue: 30,
     minValue: 1,
-    onChange: value => onDaysChange(value),
-    value: days
+    value: days,
+    onChange: value => onDaysChange(value)
   }), React.createElement(Paragraph, null, "day(s)"));
 }

package/FrequencyCapping/types.d.ts

@@ -23,6 +23,7 @@ export type FrequencyCappingEditProps<T extends CappingBase> = {
     editGlobalClicked: () => void;
     applicationCode: string;
     isInJourney?: boolean;
+    isDisabled?: boolean;
 };
 export type FrequencyCappingReadonlyProps<T extends CappingBase> = {
     capping: T;

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/RadioCard/RadioCard.d.ts

@@ -0,0 +1,3 @@
+import { type ReactElement } from 'react';
+import type { RadioCardProps } from './types';
+export declare function RadioCard(props: RadioCardProps): ReactElement;

package/RadioCard/RadioCard.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
+import { H4, Paragraph } from '@pushwoosh/kit-typography';
+import { Radio } from '../Radio';
+import { RootBox } from './styled';
+export function RadioCard(props) {
+  const {
+    title,
+    description,
+    isActive,
+    onClick,
+    children
+  } = props;
+  return React.createElement(RootBox, {
+    isActive: isActive,
+    onClick: onClick
+  }, React.createElement(Vertical, null, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$justifyContent": "space-between"
+  }, React.createElement(H4, null, title), React.createElement(Radio, {
+    isChecked: isActive
+  })), React.createElement(Paragraph, null, description)), children);
+}

package/RadioCard/index.d.ts

@@ -0,0 +1 @@
+export { RadioCard } from './RadioCard';

package/RadioCard/index.js

@@ -0,0 +1 @@
+export { RadioCard } from './RadioCard';

package/RadioCard/styled.d.ts

@@ -0,0 +1,65 @@
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+export declare const RootBox: 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;
+} & {
+    $padding: number;
+    $alignItems: string;
+    $bgColor: Color;
+    $borderRadius: ShapeRadius;
+    $gap: number;
+} & {
+    isActive?: boolean;
+}, "$gridAutoFlow" | "$alignItems" | "$bgColor" | "$borderRadius" | "$gap" | "$padding">;

package/RadioCard/styled.js

@@ -0,0 +1,15 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const RootBox = styled(Vertical).attrs({
+  $padding: 16,
+  $alignItems: 'start',
+  $bgColor: Color.CLEAR,
+  $borderRadius: ShapeRadius.SECTION,
+  $gap: 12
+}).withConfig({
+  displayName: "RootBox",
+  componentId: "sc-tkztr1-0"
+})(["width:262px;height:100%;border:", ";box-sizing:border-box;cursor:pointer;"], ({
+  isActive
+}) => isActive ? `2px solid ${Color.PRIMARY}` : `1px solid ${Color.DIVIDER}`);

package/RadioCard/types.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode } from 'react';
+export interface RadioCardProps {
+    title: string;
+    description: string;
+    isActive?: boolean;
+    children?: ReactNode;
+    onClick: () => void;
+}

package/RadioCard/types.js

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

package/index.d.ts

@@ -16,6 +16,7 @@ export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
 export { Radio } from './Radio';
+export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton, type SortButtonParams } from './SortButton';

package/index.js

@@ -16,6 +16,7 @@ export { Pagination } from './Pagination';
 export { ProgressBar } from './ProgressBar';
 export { Popover } from './Popover';
 export { Radio } from './Radio';
+export { RadioCard } from './RadioCard';
 export { ReCaptcha, useRecaptcha, asyncScriptLoad } from './ReCaptcha';
 export { Spinner } from './Spinner';
 export { SortButton } from './SortButton';

package/package.json

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