@pushwoosh/dumb-components 1.1.134 → 1.1.136

package/Tabs/components/TabBarScrollableFrame/TabBarScrollableFrame.d.ts

@@ -1,3 +1,2 @@
-import React from 'react';
 import type { TabsListSlideFrameProps } from './types';
-export declare const TabBarScrollableFrame: React.ForwardRefExoticComponent<TabsListSlideFrameProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TabBarScrollableFrame: import("react").ForwardRefExoticComponent<TabsListSlideFrameProps & import("react").RefAttributes<HTMLDivElement>>;

package/Tabs/components/TabBarScrollableFrame/TabBarScrollableFrame.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import debounce from 'lodash/debounce';
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { ChevronIcon } from '@pushwoosh/kit-icons';
 import { TabBarContent, TabBarFrame, TabBarArrowContainer, TabBarWindow } from './styles';
 import { widthObserver } from '../../helpers';
@@ -44,25 +45,30 @@ export const TabBarScrollableFrame = forwardRef(({
       stopFrameObserver();
     };
   }, [windowRef, setFrameWidth, contentRef, setContentWidth]);
-  return React.createElement(TabBarFrame, {
+  return _jsxs(TabBarFrame, {
     ...props,
-    ref: ref
-  }, React.createElement(TabBarWindow, {
-    ref: windowRef
-  }, React.createElement(TabBarContent, {
-    left: scrollLeft,
-    ref: contentRef
-  }, children)), scrollable && scrollLeft < 0 && React.createElement(TabBarArrowContainer, {
-    "data-left": true,
-    onClick: onClick
-  }, React.createElement(ChevronIcon, {
-    direction: "left",
-    size: "small"
-  })), scrollable && scrollLeft > minLeft && React.createElement(TabBarArrowContainer, {
-    "$right": true,
-    onClick: onClick
-  }, React.createElement(ChevronIcon, {
-    direction: "right",
-    size: "small"
-  })));
+    ref: ref,
+    children: [_jsx(TabBarWindow, {
+      ref: windowRef,
+      children: _jsx(TabBarContent, {
+        left: scrollLeft,
+        ref: contentRef,
+        children: children
+      })
+    }), scrollable && scrollLeft < 0 && _jsx(TabBarArrowContainer, {
+      "data-left": true,
+      onClick: onClick,
+      children: _jsx(ChevronIcon, {
+        direction: "left",
+        size: "small"
+      })
+    }), scrollable && scrollLeft > minLeft && _jsx(TabBarArrowContainer, {
+      "$right": true,
+      onClick: onClick,
+      children: _jsx(ChevronIcon, {
+        direction: "right",
+        size: "small"
+      })
+    })]
+  });
 });

package/Tabs/components/TabBase/TabBase.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-export declare const TabBase: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Readonly<{
+export declare const TabBase: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & Readonly<{
     isActive?: boolean;
     isDisabled?: boolean;
     isNew?: boolean;
-    icon?: React.ReactNode;
+    icon?: import("react").ReactNode;
     className?: string;
     onClick: () => void;
-}> & React.RefAttributes<HTMLDivElement>>;
+}> & import("react").RefAttributes<HTMLDivElement>>;

package/Tabs/components/TabBase/TabBase.js

@@ -1,4 +1,5 @@
-import React, { forwardRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { TabIconBox, TabRedDot, TabBody, TabButtonLabel } from './styles';
 export const TabBase = forwardRef((props, ref) => {
   const {
@@ -9,14 +10,18 @@ export const TabBase = forwardRef((props, ref) => {
     icon,
     ...rest
   } = props;
-  return React.createElement(TabBody, {
+  return _jsxs(TabBody, {
     as: "span",
     "$isActive": isActive,
     "$isDisabled": isDisabled,
     "$hasIcon": !!icon,
     ref: ref,
-    ...rest
-  }, React.createElement(TabButtonLabel, {
-    "$isActive": isActive
-  }, children), icon && React.createElement(TabIconBox, null, icon), isNew && React.createElement(TabRedDot, null));
+    ...rest,
+    children: [_jsx(TabButtonLabel, {
+      "$isActive": isActive,
+      children: children
+    }), icon && _jsx(TabIconBox, {
+      children: icon
+    }), isNew && _jsx(TabRedDot, {})]
+  });
 });

package/Tabs/components/TabPanel/TabPanel.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TabPanelContainer } from './styles';
 import { useTabsContext } from '../../context';
 export const TabPanel = props => {
@@ -14,5 +14,7 @@ export const TabPanel = props => {
     return null;
   }
   const Container = container || TabPanelContainer;
-  return React.createElement(Container, null, children);
+  return _jsx(Container, {
+    children: children
+  });
 };

package/Tabs/components/Tabs/Tabs.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { TabsContainer } from './styles';
 import { TabContext } from '../../context';
 export function Tabs(props) {
@@ -13,7 +14,10 @@ export function Tabs(props) {
     setActiveTabCode
   }), [activeTabCode, setActiveTabCode]);
   const Container = container || TabsContainer;
-  return React.createElement(TabContext.Provider, {
-    value: contextValue
-  }, React.createElement(Container, null, children));
+  return _jsx(TabContext.Provider, {
+    value: contextValue,
+    children: _jsx(Container, {
+      children: children
+    })
+  });
 }

package/Toast/Toast.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
 import { InfoRoundIcon, CheckRoundIcon, WarningRoundIcon, DangerTriangleIcon, CloseIcon } from '@pushwoosh/kit-icons';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
@@ -8,32 +8,32 @@ import { RootBox, IconBox, ContentBox, ButtonBox, CloseBox } from './styles';
 function getIconByType(type) {
   switch (type) {
     case 'info':
-      return React.createElement(InfoRoundIcon, {
+      return _jsx(InfoRoundIcon, {
         view: "filled",
         size: "medium",
         color: TypeColorMap[type]
       });
     case 'success':
-      return React.createElement(CheckRoundIcon, {
+      return _jsx(CheckRoundIcon, {
         view: "filled",
         type: "fill",
         size: "medium",
         color: TypeColorMap[type]
       });
     case 'warning':
-      return React.createElement(WarningRoundIcon, {
+      return _jsx(WarningRoundIcon, {
         view: "filled",
         size: "medium",
         color: TypeColorMap[type]
       });
     case 'error':
-      return React.createElement(DangerTriangleIcon, {
+      return _jsx(DangerTriangleIcon, {
         view: "filled",
         size: "medium",
         color: TypeColorMap[type]
       });
     default:
-      return React.createElement(InfoRoundIcon, {
+      return _jsx(InfoRoundIcon, {
         view: "filled",
         size: "medium",
         color: TypeColorMap[type]
@@ -53,18 +53,31 @@ export function Toast(props) {
     buttonText,
     onButtonClick
   } = toast;
-  return createPortal(React.createElement(RootBox, {
+  return createPortal(_jsxs(RootBox, {
     open: open,
     type: type,
-    "$hasButton": !!(buttonText && onButtonClick)
-  }, React.createElement(IconBox, null, getIconByType(type)), React.createElement(ContentBox, null, React.createElement(H4, null, title), description && React.createElement(Paragraph, null, description)), buttonText && onButtonClick && React.createElement(ButtonBox, null, React.createElement(Button, {
-    view: "ghost",
-    size: "compact",
-    color: "primary",
-    onClick: onButtonClick
-  }, buttonText)), React.createElement(CloseBox, {
-    onClick: onClose
-  }, React.createElement(CloseIcon, {
-    size: "medium"
-  }))), document.body);
+    "$hasButton": !!(buttonText && onButtonClick),
+    children: [_jsx(IconBox, {
+      children: getIconByType(type)
+    }), _jsxs(ContentBox, {
+      children: [_jsx(H4, {
+        children: title
+      }), description && _jsx(Paragraph, {
+        children: description
+      })]
+    }), buttonText && onButtonClick && _jsx(ButtonBox, {
+      children: _jsx(Button, {
+        view: "ghost",
+        size: "compact",
+        color: "primary",
+        onClick: onButtonClick,
+        children: buttonText
+      })
+    }), _jsx(CloseBox, {
+      onClick: onClose,
+      children: _jsx(CloseIcon, {
+        size: "medium"
+      })
+    })]
+  }), document.body);
 }

package/Toast/ToastProvider.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { ToastContextProps, ToastProviderProps } from './types';
-export declare const ToastContext: React.Context<ToastContextProps | null>;
-export declare const ToastProvider: ({ children }: ToastProviderProps) => React.JSX.Element;
+export declare const ToastContext: import("react").Context<ToastContextProps | null>;
+export declare const ToastProvider: ({ children }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;

package/Toast/ToastProvider.js

@@ -1,4 +1,5 @@
-import React, { useState, useMemo, useCallback, createContext } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useMemo, useCallback, createContext } from 'react';
 import { DEFAULT_DURATION } from './constants';
 import { Toast } from './Toast';
 export const ToastContext = createContext(null);
@@ -39,11 +40,12 @@ export const ToastProvider = ({
     openToast,
     closeToast
   }), [openToast, closeToast]);
-  return React.createElement(ToastContext.Provider, {
-    value: contextValue
-  }, children, React.createElement(Toast, {
-    open: open,
-    toast: toast,
-    onClose: closeToast
-  }));
+  return _jsxs(ToastContext.Provider, {
+    value: contextValue,
+    children: [children, _jsx(Toast, {
+      open: open,
+      toast: toast,
+      onClose: closeToast
+    })]
+  });
 };

package/Tooltip/Tooltip.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TooltipPositionToArrowOffsetMap, TooltipPositionToTippyOffsetMap, TooltipPositionToTippyPlacementMap } from './maps';
 import { TooltipBox } from './styles';
 export function Tooltip({
@@ -11,7 +11,7 @@ export function Tooltip({
   isVisible,
   ...rest
 }) {
-  return React.createElement(TooltipBox, {
+  return _jsx(TooltipBox, {
     animation: false,
     delay: 0,
     duration: 0,

package/Tooltip/TooltipTrigger.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { TooltipTriggerViewMap } from './maps';
 import { HelpIconWrapper } from './styles';
 import { Tooltip } from './Tooltip';
@@ -13,14 +13,16 @@ export function TooltipTrigger({
   const {
     icon: Icon
   } = TooltipTriggerViewMap[view];
-  return React.createElement(Tooltip, {
-    ...tooltipProps
-  }, React.createElement(HelpIconWrapper, {
-    "$padding": padding,
-    "$color": TooltipTriggerViewMap[view].color,
-    "$hoverColor": hoverColor
-  }, React.createElement(Icon, {
-    size: size,
-    view: "lined"
-  })));
+  return _jsx(Tooltip, {
+    ...tooltipProps,
+    children: _jsx(HelpIconWrapper, {
+      "$padding": padding,
+      "$color": TooltipTriggerViewMap[view].color,
+      "$hoverColor": hoverColor,
+      children: _jsx(Icon, {
+        size: size,
+        view: "lined"
+      })
+    })
+  });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.134",
+  "version": "1.1.136",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -22,7 +22,7 @@
     "npm": ">= 7"
   },
   "devDependencies": {
-    "@pushwoosh/frontend-builder-engine": "^1.0.21",
+    "@pushwoosh/frontend-builder-engine": "^2.1.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",

package/polyglot/__tests__/render.test.js

@@ -1,6 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
-import React from 'react';
 import { stringToAst } from '../liquid/parser';
 import { renderToString, renderToReact } from '../liquid/render';
 const renderString = (template, values = {}, language = 'en') => {
@@ -139,7 +139,9 @@ describe('renderToReact', () => {
   describe('text rendering', () => {
     test('renders plain text', () => {
       const result = renderReactNodes('Hello World');
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText('Hello World')).toBeInTheDocument();
     });
   });
@@ -148,7 +150,9 @@ describe('renderToReact', () => {
       const result = renderReactNodes('Hello {{ name }}', {
         name: 'John'
       });
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText(/Hello/)).toBeInTheDocument();
       expect(screen.getByText(/John/)).toBeInTheDocument();
     });
@@ -156,14 +160,18 @@ describe('renderToReact', () => {
       const result = renderReactNodes('{{ name | upperCase }}', {
         name: 'john'
       });
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText('JOHN')).toBeInTheDocument();
     });
   });
   describe('HTML tag rendering', () => {
     test('renders strong tag', () => {
       const result = renderReactNodes('<strong>bold text</strong>');
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       const element = screen.getByText('bold text');
       expect(element.tagName).toBe('STRONG');
     });
@@ -171,25 +179,33 @@ describe('renderToReact', () => {
       const result = renderReactNodes('line1<br/>line2');
       const {
         container
-      } = render(React.createElement(React.Fragment, null, result));
+      } = render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(container.querySelector('br')).toBeInTheDocument();
     });
     test('renders img tag with attributes', () => {
       const result = renderReactNodes('<img src="test.png" alt="test image">');
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       const img = screen.getByAltText('test image');
       expect(img).toHaveAttribute('src', 'test.png');
     });
     test('renders anchor tag with href', () => {
       const result = renderReactNodes('<a href="https://example.com">Link</a>');
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       const link = screen.getByText('Link');
       expect(link.tagName).toBe('A');
       expect(link).toHaveAttribute('href', 'https://example.com');
     });
     test('renders anchor tag with multiple attributes', () => {
       const result = renderReactNodes('<a href="https://example.com" target="_blank" rel="noreferrer">External Link</a>');
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       const link = screen.getByText('External Link');
       expect(link).toHaveAttribute('href', 'https://example.com');
       expect(link).toHaveAttribute('target', '_blank');
@@ -199,7 +215,9 @@ describe('renderToReact', () => {
       const result = renderReactNodes('<a href=linkUrl>Custom Link</a>', {
         linkUrl: 'https://custom.com'
       });
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       const link = screen.getByText('Custom Link');
       expect(link).toHaveAttribute('href', 'https://custom.com');
     });
@@ -209,21 +227,27 @@ describe('renderToReact', () => {
       const result = renderReactNodes('{% if active == true %}visible{% endif %}', {
         active: true
       });
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText('visible')).toBeInTheDocument();
     });
     test('renders else block when false', () => {
       const result = renderReactNodes('{% if active == true %}yes{% else %}no{% endif %}', {
         active: false
       });
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText('no')).toBeInTheDocument();
     });
     test('renders for loop', () => {
       const result = renderReactNodes('{% for item in items %}<span>{{ item }}</span>{% endfor %}', {
         items: ['a', 'b', 'c']
       });
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText('a')).toBeInTheDocument();
       expect(screen.getByText('b')).toBeInTheDocument();
       expect(screen.getByText('c')).toBeInTheDocument();
@@ -232,7 +256,9 @@ describe('renderToReact', () => {
   describe('text tag with styles', () => {
     test('renders text tag', () => {
       const result = renderReactNodes('<text>styled text</text>');
-      render(React.createElement(React.Fragment, null, result));
+      render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(screen.getByText('styled text')).toBeInTheDocument();
     });
   });
@@ -241,14 +267,18 @@ describe('renderToReact', () => {
       const result = renderReactNodes('Hello&nbsp;World');
       const {
         container
-      } = render(React.createElement(React.Fragment, null, result));
+      } = render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(container.textContent).toBe('Hello\u00A0World');
     });
     test('decodes numeric entities in React rendering', () => {
       const result = renderReactNodes('Hello&#160;World');
       const {
         container
-      } = render(React.createElement(React.Fragment, null, result));
+      } = render(_jsx(_Fragment, {
+        children: result
+      }));
       expect(container.textContent).toBe('Hello\u00A0World');
     });
   });

package/polyglot/liquid/render.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
+import { type ReactNode } from 'react';
 import { type ASTNodeList, type Context, type ScalarOrVariable } from './types';
 export declare function applyFilter(filterName: string, value: any, args: ScalarOrVariable[], context: Context): any;
 export declare function renderToString(ast: ASTNodeList, context: Context): string;
-export declare function renderToReact(ast: ASTNodeList, context: Context): React.ReactNode[];
+export declare function renderToReact(ast: ASTNodeList, context: Context): ReactNode[];

package/polyglot/liquid/render.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 import { Color } from '@pushwoosh/kit-constants';
 import { variants } from '@pushwoosh/kit-typography/map';
@@ -105,21 +106,21 @@ export function renderToReact(ast, context) {
     const TagName = tagNode.name;
     const props = Object.fromEntries(Object.entries(tagNode.params).map(([key, value]) => [key, unpackScalarOrValue(value, context)]));
     if (TagName === 'text') {
-      return [React.createElement(Txt, {
+      return [_jsx(Txt, {
         "$variant": props.variant,
         "$color": props.color && getColor(props.color),
         "$opacity": props.opacity,
         "$transform": props.transform,
-        key: key
-      }, children)];
+        children: children
+      }, key)];
     }
     if (voidTags.has(TagName)) {
-      return [React.createElement(TagName, {
+      return [_createElement(TagName, {
         ...props,
         key: key
       })];
     }
-    return [React.createElement(TagName, {
+    return [_createElement(TagName, {
       ...props,
       key: key
     }, children)];

package/polyglot/react.js

@@ -1,4 +1,5 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from 'react';
 import { stringToAst } from './liquid/parser';
 import { renderToReact, renderToString } from './liquid/render';
 const createLangPack = (language, timezone) => {
@@ -68,9 +69,10 @@ export const LangProvider = ({
     pack.register(languages);
     return pack;
   }, [languages, language, timezone]);
-  return React.createElement(LangContext.Provider, {
-    value: langFnPack
-  }, children);
+  return _jsx(LangContext.Provider, {
+    value: langFnPack,
+    children: children
+  });
 };
 export const LangBase = props => {
   return useContext(LangContext).langReact(props);
@@ -90,7 +92,7 @@ export const useLangLib = languages => {
   return ctx.lang;
 };
 export const createLang = languages => ({
-  Lang: props => React.createElement(LangLib, {
+  Lang: props => _jsx(LangLib, {
     "$languages": languages,
     ...props
   }),