@pushwoosh/dumb-components 1.1.135 → 1.1.136

package/Modal/components/ModalConfirm/ModalConfirmProvider.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactElement, type PropsWithChildren } from 'react';
+import { type ReactElement, type PropsWithChildren } from 'react';
 import type { ModalConfirmContextProps } from './types';
-export declare const ModalConfirmContext: React.Context<ModalConfirmContextProps | null>;
+export declare const ModalConfirmContext: import("react").Context<ModalConfirmContextProps | null>;
 export declare function ModalConfirmProvider(props: PropsWithChildren): ReactElement;

package/Modal/components/ModalConfirm/ModalConfirmProvider.js

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, createContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, createContext } from 'react';
 import { ModalConfirm } from './ModalConfirm';
 export const ModalConfirmContext = createContext(null);
 export function ModalConfirmProvider(props) {
@@ -27,9 +28,10 @@ export function ModalConfirmProvider(props) {
       closeModalConfirm
     };
   }, []);
-  return React.createElement(ModalConfirmContext.Provider, {
-    value: contextValue
-  }, children, React.createElement(ModalConfirm, {
-    ...modalConfirmParams
-  }));
+  return _jsxs(ModalConfirmContext.Provider, {
+    value: contextValue,
+    children: [children, _jsx(ModalConfirm, {
+      ...modalConfirmParams
+    })]
+  });
 }

package/Modal/components/ModalTitle/ModalTitle.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CloseIcon } from '@pushwoosh/kit-icons';
 import { ModalTitleBox } from './styles';
 import { GhostButton } from '../../../Button';
@@ -8,11 +8,13 @@ export function ModalTitle(props) {
     onClose,
     ...rest
   } = props;
-  return React.createElement(ModalTitleBox, {
-    ...rest
-  }, children, onClose && React.createElement(GhostButton, {
-    onClick: onClose
-  }, React.createElement(CloseIcon, {
-    size: "medium"
-  })));
+  return _jsxs(ModalTitleBox, {
+    ...rest,
+    children: [children, onClose && _jsx(GhostButton, {
+      onClick: onClose,
+      children: _jsx(CloseIcon, {
+        size: "medium"
+      })
+    })]
+  });
 }

package/NotificationInbox/NotificationBar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
 import { NotificationBarButton, NotificationBarIcon, NotificationBarBadge, NotificationBarText, NotificationBarBadgeText } from './styles';
@@ -28,18 +28,26 @@ export function NotificationBar({
     if (type === 'no-notifications') return Color.MAIN;
     return Color.CLEAR;
   };
-  return React.createElement(NotificationBarButton, {
+  return _jsxs(NotificationBarButton, {
     "$type": type,
     "$isOpened": isOpened,
     "$read": read,
     onClick: onClick,
-    type: "button"
-  }, React.createElement(NotificationBarIcon, null, React.createElement(NotificationIcon, {
-    type: "enabled",
-    size: "small",
-    view: getIconView(isOpened, shouldUseFilledIcon, hasNotifications),
-    color: getIconColor()
-  })), React.createElement(NotificationBarText, null, "Notification center"), hasNotifications && React.createElement(NotificationBarBadge, null, React.createElement(NotificationBarBadgeText, {
-    "$variant": "h5"
-  }, count)));
+    type: "button",
+    children: [_jsx(NotificationBarIcon, {
+      children: _jsx(NotificationIcon, {
+        type: "enabled",
+        size: "small",
+        view: getIconView(isOpened, shouldUseFilledIcon, hasNotifications),
+        color: getIconColor()
+      })
+    }), _jsx(NotificationBarText, {
+      children: "Notification center"
+    }), hasNotifications && _jsx(NotificationBarBadge, {
+      children: _jsx(NotificationBarBadgeText, {
+        "$variant": "h5",
+        children: count
+      })
+    })]
+  });
 }

package/NotificationInbox/NotificationBell.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Color } from '@pushwoosh/kit-constants';
 import { NotificationIcon } from '@pushwoosh/kit-icons';
 import { useLang } from './polyglot';
@@ -18,7 +18,7 @@ export function NotificationBell({
     if (severity === 'warning') return Color.WARNING;
     return Color.PRIMARY;
   };
-  return React.createElement(NotificationBellButton, {
+  return _jsxs(NotificationBellButton, {
     "$isOpened": isOpened,
     onClick: onClick,
     type: "button",
@@ -26,14 +26,17 @@ export function NotificationBell({
       message: 'DUMB.NOTIFICATION_INBOX.BELL_ARIA_UNREAD'
     }) : lang({
       message: 'DUMB.NOTIFICATION_INBOX.TITLE'
-    })
-  }, React.createElement(NotificationIcon, {
-    size: "medium",
-    type: "enabled",
-    view: isOpened ? 'filled' : 'lined',
-    color: "currentColor"
-  }), showBadge && React.createElement(NotificationBellBadge, null, React.createElement(NotificationBellBadgeDot, {
-    "$color": getBadgeColor(),
-    "$isDot": true
-  })));
+    }),
+    children: [_jsx(NotificationIcon, {
+      size: "medium",
+      type: "enabled",
+      view: isOpened ? 'filled' : 'lined',
+      color: "currentColor"
+    }), showBadge && _jsx(NotificationBellBadge, {
+      children: _jsx(NotificationBellBadgeDot, {
+        "$color": getBadgeColor(),
+        "$isDot": true
+      })
+    })]
+  });
 }

package/NotificationInbox/NotificationInbox.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useLayoutEffect, useCallback } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { 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';
@@ -49,122 +50,162 @@ export function NotificationInbox({
     setShowExpandMap(newMap);
   }, [notifications]);
   if (notifications.length === 0 && !isLoading) {
-    return React.createElement(NotificationInboxContainer, null, React.createElement(NotificationInboxHeader, null, React.createElement(NotificationInboxTitle, {
-      "$variant": "h4",
-      "$color": Color.MAIN
-    }, React.createElement(Lang, {
-      message: "DUMB.NOTIFICATION_INBOX.TITLE"
-    }))), React.createElement(Vertical, {
-      "$alignItems": "center",
-      "$gap": 24,
-      "$padding": "24px"
-    }, React.createElement(NotificationInboxEmptyIcon, {
-      alt: emptyStateTitle,
-      src: emptyNotificationsIcon
-    }), React.createElement(Vertical, {
-      "$alignItems": "center",
-      "$gap": 6,
-      "$padding": "24px",
-      "$justifyContent": "center",
-      "$justifyItems": "center",
-      "$alignContent": "center"
-    }, React.createElement(NotificationInboxEmptyText, {
-      "$variant": "h4",
-      "$color": Color.LOCKED
-    }, emptyStateTitle), React.createElement(NotificationInboxEmptyText, {
-      "$variant": "footnote",
-      "$color": Color.LOCKED
-    }, emptyStateDescription))));
+    return _jsxs(NotificationInboxContainer, {
+      children: [_jsx(NotificationInboxHeader, {
+        children: _jsx(NotificationInboxTitle, {
+          "$variant": "h4",
+          "$color": Color.MAIN,
+          children: _jsx(Lang, {
+            message: "DUMB.NOTIFICATION_INBOX.TITLE"
+          })
+        })
+      }), _jsxs(Vertical, {
+        "$alignItems": "center",
+        "$gap": 24,
+        "$padding": "24px",
+        children: [_jsx(NotificationInboxEmptyIcon, {
+          alt: emptyStateTitle,
+          src: emptyNotificationsIcon
+        }), _jsxs(Vertical, {
+          "$alignItems": "center",
+          "$gap": 6,
+          "$padding": "24px",
+          "$justifyContent": "center",
+          "$justifyItems": "center",
+          "$alignContent": "center",
+          children: [_jsx(NotificationInboxEmptyText, {
+            "$variant": "h4",
+            "$color": Color.LOCKED,
+            children: emptyStateTitle
+          }), _jsx(NotificationInboxEmptyText, {
+            "$variant": "footnote",
+            "$color": Color.LOCKED,
+            children: emptyStateDescription
+          })]
+        })]
+      })]
+    });
   }
-  return React.createElement(NotificationInboxContainer, null, React.createElement(NotificationInboxHeader, null, React.createElement(NotificationInboxTitle, {
-    "$variant": "h4",
-    "$color": Color.MAIN
-  }, React.createElement("span", null, React.createElement(Lang, {
-    message: "DUMB.NOTIFICATION_INBOX.TITLE"
-  })), unreadCount > 0 && React.createElement(React.Fragment, null, ' ', React.createElement(Text, {
-    "$variant": "h4",
-    "$color": Color.LOCKED
-  }, React.createElement(Lang, {
-    message: "DUMB.NOTIFICATION_INBOX.UNREAD",
-    count: unreadCount
-  }))))), React.createElement(NotificationInboxList, {
-    "data-notification-list": true
-  }, notifications.map(notification => {
-    const isRead = notification.isRead ?? false;
-    const badgeColor = badgeColorMap[notification.severity] || 'gray';
-    const showExpandButton = showExpandMap[notification.id] ?? false;
-    return React.createElement(NotificationItem, {
-      key: notification.id,
-      onClick: () => handleNotificationClick(notification)
-    }, React.createElement(NotificationIndicator, {
-      "$isRead": isRead
-    }), React.createElement(Vertical, {
-      "$gap": 8
-    }, 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(Text, {
-      "$color": Color.LOCKED
-    }, "\u2022"), React.createElement(Text, {
-      "$variant": "footnote",
-      "$color": Color.LOCKED
-    }, notification.projectName))), (notification.severity === 'critical' || notification.severity === 'warning') && React.createElement(Badge, {
-      color: badgeColor,
-      isSaturated: false
-    }, notification.severity.toUpperCase())), React.createElement(Text, {
-      "$variant": "h4",
-      "$color": Color.MAIN
-    }, notification.title), notification.description && React.createElement(NotificationDescription, {
-      as: "div",
-      ref: element => descriptionRefs.current[notification.id] = element || null,
-      "$variant": "standard",
-      "$color": Color.MAIN,
-      "$visibleLines": VISIBLE_LINES,
-      "$expanded": expandedId === notification.id
-    }, notification.description)), (notification.actionButton || showExpandButton) && React.createElement(Horizontal, {
-      "$alignItems": "center",
-      "$justifyContent": "start",
-      "$gap": 12
-    }, notification.actionButton && React.createElement(NotificationActionLink, {
-      "$isPrimary": true,
-      onClick: e => {
-        var _notification$actionB;
-        e.stopPropagation();
-        (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
-      }
-    }, notification.actionButton.label), showExpandButton && React.createElement(NotificationActionLink, {
-      onClick: e => {
-        e.stopPropagation();
-        setExpandedId(prev => prev === notification.id ? null : notification.id);
-      }
-    }, expandedId === notification.id ? React.createElement(Lang, {
-      message: "DUMB.NOTIFICATION_INBOX.COLLAPSE"
-    }) : React.createElement(Lang, {
-      message: "DUMB.NOTIFICATION_INBOX.EXPAND"
-    })))));
-  }), 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.LOCKED
-  }, React.createElement(Lang, {
-    message: "DUMB.NOTIFICATION_INBOX.LOADING_MORE"
-  }))), isLoading && notifications.length === 0 && !hasMore && React.createElement(Horizontal, {
-    "$justifyContent": "center",
-    "$alignItems": "center",
-    "$padding": "16px 0"
-  }, React.createElement(Spinner, {
-    size: "medium",
-    color: Color.LOCKED
-  }))));
+  return _jsxs(NotificationInboxContainer, {
+    children: [_jsx(NotificationInboxHeader, {
+      children: _jsxs(NotificationInboxTitle, {
+        "$variant": "h4",
+        "$color": Color.MAIN,
+        children: [_jsx("span", {
+          children: _jsx(Lang, {
+            message: "DUMB.NOTIFICATION_INBOX.TITLE"
+          })
+        }), unreadCount > 0 && _jsxs(_Fragment, {
+          children: [' ', _jsx(Text, {
+            "$variant": "h4",
+            "$color": Color.LOCKED,
+            children: _jsx(Lang, {
+              message: "DUMB.NOTIFICATION_INBOX.UNREAD",
+              count: unreadCount
+            })
+          })]
+        })]
+      })
+    }), _jsxs(NotificationInboxList, {
+      "data-notification-list": true,
+      children: [notifications.map(notification => {
+        const isRead = notification.isRead ?? false;
+        const badgeColor = badgeColorMap[notification.severity] || 'gray';
+        const showExpandButton = showExpandMap[notification.id] ?? false;
+        return _jsxs(NotificationItem, {
+          onClick: () => handleNotificationClick(notification),
+          children: [_jsx(NotificationIndicator, {
+            "$isRead": isRead
+          }), _jsxs(Vertical, {
+            "$gap": 8,
+            children: [_jsxs(Vertical, {
+              children: [_jsxs(NotificationHeader, {
+                children: [_jsxs(Horizontal, {
+                  "$gap": 4,
+                  "$alignItems": "center",
+                  children: [_jsx(Text, {
+                    "$variant": "footnote",
+                    "$color": Color.LOCKED,
+                    children: formatTimestamp(notification.timestamp)
+                  }), notification.projectName && _jsxs(_Fragment, {
+                    children: [_jsx(Text, {
+                      "$color": Color.LOCKED,
+                      children: "\u2022"
+                    }), _jsx(Text, {
+                      "$variant": "footnote",
+                      "$color": Color.LOCKED,
+                      children: notification.projectName
+                    })]
+                  })]
+                }), (notification.severity === 'critical' || notification.severity === 'warning') && _jsx(Badge, {
+                  color: badgeColor,
+                  isSaturated: false,
+                  children: notification.severity.toUpperCase()
+                })]
+              }), _jsx(Text, {
+                "$variant": "h4",
+                "$color": Color.MAIN,
+                children: notification.title
+              }), notification.description && _jsx(NotificationDescription, {
+                as: "div",
+                ref: element => descriptionRefs.current[notification.id] = element || null,
+                "$variant": "standard",
+                "$color": Color.MAIN,
+                "$visibleLines": VISIBLE_LINES,
+                "$expanded": expandedId === notification.id,
+                children: notification.description
+              })]
+            }), (notification.actionButton || showExpandButton) && _jsxs(Horizontal, {
+              "$alignItems": "center",
+              "$justifyContent": "start",
+              "$gap": 12,
+              children: [notification.actionButton && _jsx(NotificationActionLink, {
+                "$isPrimary": true,
+                onClick: e => {
+                  var _notification$actionB;
+                  e.stopPropagation();
+                  (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
+                },
+                children: notification.actionButton.label
+              }), showExpandButton && _jsx(NotificationActionLink, {
+                onClick: e => {
+                  e.stopPropagation();
+                  setExpandedId(prev => prev === notification.id ? null : notification.id);
+                },
+                children: expandedId === notification.id ? _jsx(Lang, {
+                  message: "DUMB.NOTIFICATION_INBOX.COLLAPSE"
+                }) : _jsx(Lang, {
+                  message: "DUMB.NOTIFICATION_INBOX.EXPAND"
+                })
+              })]
+            })]
+          })]
+        }, notification.id);
+      }), hasMore && isLoading && _jsxs(Horizontal, {
+        ref: loadMoreRef,
+        "$alignItems": "center",
+        "$justifyContent": "center",
+        "$padding": 16,
+        "$gap": 8,
+        children: [_jsx(Spinner, {
+          size: "small",
+          color: Color.LOCKED
+        }), _jsx(Text, {
+          "$variant": "footnote",
+          "$color": Color.LOCKED,
+          children: _jsx(Lang, {
+            message: "DUMB.NOTIFICATION_INBOX.LOADING_MORE"
+          })
+        })]
+      }), isLoading && notifications.length === 0 && !hasMore && _jsx(Horizontal, {
+        "$justifyContent": "center",
+        "$alignItems": "center",
+        "$padding": "16px 0",
+        children: _jsx(Spinner, {
+          size: "medium",
+          color: Color.LOCKED
+        })
+      })]
+    })]
+  });
 }

package/NumberPicker/NumberPicker.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { Vertical, useMount, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { AutosizeInput } from './components/AutosizeInput';
@@ -77,50 +78,58 @@ export function NumberPicker({
   };
   const resetAutoDiff = () => setAutoDiff(0);
   const InputComponent = autoSize ? AutosizeInput : InputStyled;
-  return React.createElement(SingleInputFrame, {
+  return _jsxs(SingleInputFrame, {
     ref: ref,
     "$hasHint": !!hint,
-    "$isDisabled": isDisabled
-  }, React.createElement(InputComponent, {
-    value: localValue,
-    placeholder: placeholder,
-    isDisabled: isDisabled,
-    disabled: isDisabled,
-    onChange: handleChange,
-    onKeyDown: handleKeyDown,
-    onKeyUp: resetAutoDiff,
-    onBlur: event => {
-      if (!event.target.value && value === undefined) {
-        return;
+    "$isDisabled": isDisabled,
+    children: [_jsx(InputComponent, {
+      value: localValue,
+      placeholder: placeholder,
+      isDisabled: isDisabled,
+      disabled: isDisabled,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      onKeyUp: resetAutoDiff,
+      onBlur: event => {
+        if (!event.target.value && value === undefined) {
+          return;
+        }
+        let blurValue = intVal(event.target.value);
+        const minValueValid = minValue === undefined || blurValue >= minValue;
+        const maxValueValid = maxValue === undefined || blurValue <= maxValue;
+        if (!maxValueValid) {
+          blurValue = maxValue;
+        } else if (!minValueValid) {
+          blurValue = minValue;
+        }
+        onChange(blurValue);
+        setLocalValue(`${blurValue}`);
       }
-      let blurValue = intVal(event.target.value);
-      const minValueValid = minValue === undefined || blurValue >= minValue;
-      const maxValueValid = maxValue === undefined || blurValue <= maxValue;
-      if (!maxValueValid) {
-        blurValue = maxValue;
-      } else if (!minValueValid) {
-        blurValue = minValue;
-      }
-      onChange(blurValue);
-      setLocalValue(`${blurValue}`);
-    }
-  }), hint && React.createElement(Hint, null, hint), React.createElement(Vertical, {
-    "$gap": 1
-  }, React.createElement("div", null, React.createElement(ChevronIcon, {
-    direction: "up",
-    size: "small",
-    "aria-disabled": "true",
-    onClick: () => onChangeDiff(step),
-    onMouseDown: () => setAutoDiff(step),
-    onMouseUp: resetAutoDiff,
-    onMouseLeave: resetAutoDiff
-  })), React.createElement("div", null, React.createElement(ChevronIcon, {
-    size: "small",
-    direction: "down",
-    "aria-disabled": isDisabled,
-    onClick: () => onChangeDiff(-1 * step),
-    onMouseDown: () => setAutoDiff(-1 * step),
-    onMouseUp: resetAutoDiff,
-    onMouseLeave: resetAutoDiff
-  }))));
+    }), hint && _jsx(Hint, {
+      children: hint
+    }), _jsxs(Vertical, {
+      "$gap": 1,
+      children: [_jsx("div", {
+        children: _jsx(ChevronIcon, {
+          direction: "up",
+          size: "small",
+          "aria-disabled": "true",
+          onClick: () => onChangeDiff(step),
+          onMouseDown: () => setAutoDiff(step),
+          onMouseUp: resetAutoDiff,
+          onMouseLeave: resetAutoDiff
+        })
+      }), _jsx("div", {
+        children: _jsx(ChevronIcon, {
+          size: "small",
+          direction: "down",
+          "aria-disabled": isDisabled,
+          onClick: () => onChangeDiff(-1 * step),
+          onMouseDown: () => setAutoDiff(-1 * step),
+          onMouseUp: resetAutoDiff,
+          onMouseLeave: resetAutoDiff
+        })
+      })]
+    })]
+  });
 }

package/NumberPicker/components/AutosizeInput/AutosizeInput.js

@@ -1,4 +1,5 @@
-import React, { useRef, useState, useEffect } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from 'react';
 import { minimalWidth } from './constants';
 import { Hidden } from './styles';
 import { InputStyled } from '../../styles';
@@ -20,18 +21,21 @@ export function AutosizeInput(props) {
     } = hiddenRef.current;
     setWidth(hiddenWidth + minimalWidth);
   }, [value]);
-  return React.createElement(React.Fragment, null, React.createElement(InputStyled, {
-    style: {
-      width
-    },
-    value: value,
-    placeholder: placeholder,
-    disabled: isDisabled,
-    onChange: onChange,
-    onKeyUp: onKeyUp,
-    onKeyDown: onKeyDown,
-    onBlur: onBlur
-  }), React.createElement(Hidden, {
-    ref: hiddenRef
-  }, value || placeholder));
+  return _jsxs(_Fragment, {
+    children: [_jsx(InputStyled, {
+      style: {
+        width
+      },
+      value: value,
+      placeholder: placeholder,
+      disabled: isDisabled,
+      onChange: onChange,
+      onKeyUp: onKeyUp,
+      onKeyDown: onKeyDown,
+      onBlur: onBlur
+    }), _jsx(Hidden, {
+      ref: hiddenRef,
+      children: value || placeholder
+    })]
+  });
 }