@pushwoosh/smart-components-kit 1.0.36 → 1.0.38

package/DynamicContentPicker/DynamicContentPicker.d.ts

@@ -5,7 +5,9 @@ type State = Record<string, VariedDynamicContent>;
 type DynamicContentPickerProps = {
     applicationCode: string;
     text: string;
+    icon?: ReactNode;
     title?: string;
+    hintText?: string;
     initState?: State;
     error?: ReactNode;
     renderDynamicContent?: (props: RenderDynamicContentProps) => ReactNode;

package/DynamicContentPicker/DynamicContentPicker.js

@@ -1,7 +1,7 @@
 import { arrow, autoPlacement, offset, useFloating } from '@floating-ui/react-dom';
-import React, { useMemo, useReducer, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 import { Color } from '@pushwoosh/kit-constants';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { elementAddListener, Horizontal, usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { WarningRoundIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { Arrow, FieldPlace, TextPlace } from './styled';
@@ -24,7 +24,9 @@ const reducer = (state, action) => {
 export const DynamicContentPicker = ({
   applicationCode,
   text,
+  icon,
   title,
+  hintText,
   initState,
   error,
   renderDynamicContent
@@ -50,24 +52,44 @@ export const DynamicContentPicker = ({
   const parsedLines = useMemo(() => {
     const lines = text.split('\n');
     return lines.map(line => {
-      return line.split(/\{\{(\d+)}}/g).map((match, index) => {
-        if (index % 2 === 0) {
+      return line.split(/(\{\{[^}]+\}\}|\{[^}]+\})/g).filter(match => match !== '').map(match => {
+        if (!match.includes('{')) {
           return match;
         }
+        const varname = match.replace(/^\{\{?/, '').replace(/\}?\}$/, '').split('|')[0].trim();
         return {
-          varname: match
+          varname
         };
       });
     });
   }, [text]);
+  const onClose = () => {
+    setActiveVar(undefined);
+  };
+  const clickAwayHandler = usePersistentFunction(() => {
+    onClose();
+  });
+  useEffect(() => {
+    if (!activeVar) {
+      return;
+    }
+    return elementAddListener(document, ['mousedown', 'touchstart', 'focusin'], event => {
+      if (refs.floating.current instanceof HTMLElement && !refs.floating.current.contains(event.target)) {
+        clickAwayHandler();
+      }
+    });
+  }, [clickAwayHandler, activeVar, refs.reference, refs.floating]);
   return React.createElement(React.Fragment, null, React.createElement(FieldPlace, {
     ref: refs.setReference
   }, React.createElement(Horizontal, {
     "$padding": "8px 16px",
     "$justifyContent": "space-between"
-  }, React.createElement(Text, {
+  }, React.createElement(Horizontal, {
+    "$alignItems": "center",
+    "$gap": 8
+  }, icon && icon, React.createElement(Text, {
     "$variant": "h4"
-  }, title), error && React.createElement(Horizontal, {
+  }, title)), error && React.createElement(Horizontal, {
     "$alignItems": "center",
     "$gap": 8
   }, React.createElement(WarningRoundIcon, {
@@ -76,8 +98,11 @@ export const DynamicContentPicker = ({
     color: Color.WARNING
   }), React.createElement(Text, {
     "$variant": "footnote",
-    color: Color.WARNING
-  }, error))), React.createElement(Horizontal, {
+    "$color": Color.WARNING
+  }, error)), !error && hintText && React.createElement(Text, {
+    "$variant": "footnote",
+    "$color": Color.LOCKED
+  }, hintText)), React.createElement(Horizontal, {
     "$padding": "12px 16px"
   }, React.createElement(TextPlace, null, parsedLines.map((line, index) => React.createElement(Line, {
     key: index /* eslint-disable-line react/no-array-index-key */,
@@ -95,7 +120,7 @@ export const DynamicContentPicker = ({
       key: activeVar,
       value: newDC
     }),
-    onClose: () => setActiveVar(undefined),
+    onClose,
     update
   }) : React.createElement(VariedDynamicContentPickerFormSmart, {
     key: activeVar,

package/DynamicContentPickerForm/index.d.ts

@@ -1,2 +1,3 @@
 export { SimpleDynamicContentPickerFormSmart } from './SimpleDynamicContentPickerFormSmart';
+export type { VariedDynamicContent } from './types';
 export * from './hooks';

package/index.d.ts

@@ -1,5 +1,6 @@
 export * from './EmailTemplatePreview';
 export * from './context';
+export * from './DynamicContentPicker';
 export * from './DynamicContentPickerForm';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';

package/index.js

@@ -1,5 +1,6 @@
 export * from './EmailTemplatePreview';
 export * from './context';
+export * from './DynamicContentPicker';
 export * from './DynamicContentPickerForm';
 export * from './PlatformsConfigurationDrawer';
 export * from './LanguagesSelector';

package/package.json

@@ -51,5 +51,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "1.0.36"
+  "version": "1.0.38"
 }