@pushwoosh/smart-components-kit 1.3.20 → 1.3.22

package/DynamicContentPickerForm/SimpleDynamicContentPickerFormSmart.js

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from 'react';
-import { FieldBox, NativeInput, Select, Spinner } from '@pushwoosh/dumb-components';
+import { Combobox, FieldBox, NativeInput, Spinner } from '@pushwoosh/dumb-components';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { useDynamicContentTags } from './hooks';
 import { useLang } from './polyglot';
 import { SimpleTagPickerDiv } from './styled';
-import { buildOptions } from './utils';
+import { allDynamicContentModifiers, buildOptions } from './utils';
+const defaultModifier = 'regular';
+const matchesQuery = (value, query) => value.toLowerCase().includes(query.trim().toLowerCase());
 const defaultDynamicContent = {
   tagName: '',
-  modifier: 'regular',
+  modifier: defaultModifier,
   defaultValue: ''
 };
 export const SimpleDynamicContentPickerFormSmart = ({
@@ -37,10 +39,19 @@ export const SimpleDynamicContentPickerFormSmart = ({
     });
   }
   const options = buildOptions(systemVariables ?? [], asyncResult.value || []);
-  const selectedTag = options.find(option => option.name === dc.tagName) || {
-    name: '',
-    label: '',
-    modifiers: ['regular']
+  const pickedOption = options.find(option => option.name === dc.tagName);
+  const modifiers = pickedOption?.modifiers ?? allDynamicContentModifiers;
+  const isEmpty = !dc.tagName.trim();
+  const labelOf = name => options.find(option => option.name === name)?.label ?? name;
+  const changeTagName = (tagName, isPicked) => {
+    const option = options.find(item => item.name === tagName);
+    const nextModifiers = option?.modifiers ?? allDynamicContentModifiers;
+    const keepModifier = !isPicked && nextModifiers.includes(dc.modifier);
+    onChange({
+      tagName,
+      modifier: keepModifier ? dc.modifier : nextModifiers[0] ?? defaultModifier,
+      defaultValue: isPicked ? '' : dc.defaultValue
+    });
   };
   return _jsxs(SimpleTagPickerDiv, {
     children: [_jsx(FieldBox, {
@@ -49,43 +60,30 @@ export const SimpleDynamicContentPickerFormSmart = ({
       }),
       children: _jsxs(Vertical, {
         "$gap": 8,
-        children: [_jsx(Select, {
-          width: "auto",
-          menuPlacement: "auto",
-          value: {
-            value: dc.tagName,
-            label: selectedTag.name ? selectedTag.label : dc.tagName
-          },
-          onChange: option => {
-            const picked = options.find(item => item.name === option.value);
-            onChange({
-              tagName: option.value,
-              modifier: picked?.modifiers[0] ?? 'regular',
-              defaultValue: ''
-            });
-          },
-          options: options.map(option => ({
-            value: option.name,
-            label: option.label
-          }))
-        }), _jsx(Select, {
-          width: "auto",
-          menuPlacement: "auto",
-          value: {
-            value: dc.modifier,
-            label: dc.modifier
-          },
-          onChange: option => {
+        children: [_jsx(Combobox, {
+          value: dc.tagName,
+          onChange: (value, meta) => changeTagName(value, meta.source === 'select'),
+          items: options.map(option => option.name),
+          getLabel: name => name,
+          renderItem: name => labelOf(name),
+          filter: (name, query) => matchesQuery(name, query) || matchesQuery(labelOf(name), query),
+          placeholder: lang({
+            message: 'SMART.DYNAMIC_CONTENT_PICKER_FORM.TAG.PLACEHOLDER'
+          }),
+          fullWidth: true
+        }), _jsx(Combobox, {
+          select: true,
+          value: dc.modifier || null,
+          onChange: modifier => {
             onChange({
               ...dc,
-              modifier: option.value
+              modifier: modifier ?? ''
             });
           },
-          options: selectedTag.modifiers.map(modifier => ({
-            value: modifier,
-            label: modifier
-          })),
-          isDisabled: !selectedTag.name
+          items: modifiers,
+          getLabel: modifier => modifier,
+          disabled: isEmpty,
+          fullWidth: true
         })]
       })
     }), _jsx(FieldBox, {
@@ -100,7 +98,7 @@ export const SimpleDynamicContentPickerFormSmart = ({
             defaultValue: e.target.value
           });
         },
-        disabled: !selectedTag.name
+        disabled: isEmpty
       })
     }), children]
   });

package/DynamicContentPickerForm/utils.d.ts

@@ -1,3 +1,4 @@
 import { type FullTagData, type PickerOption, type SystemVariable, type VariedDynamicContent } from './types';
 export declare function buildOptions(systemVariables: SystemVariable[], tags: FullTagData[]): PickerOption[];
 export declare function createDefaultDynamicContent(kind: 'tag' | 'event' | 'customText'): VariedDynamicContent;
+export declare const allDynamicContentModifiers: string[];

package/DynamicContentPickerForm/utils.js

@@ -1,3 +1,4 @@
+import { DynamicContentModifiers } from '@pushwoosh/kit-constants';
 export function buildOptions(systemVariables, tags) {
   const taken = new Set(systemVariables.map(v => v.name));
   const system = systemVariables.map(v => ({
@@ -40,4 +41,5 @@ export function createDefaultDynamicContent(kind) {
         }
       };
   }
-}
+}
+export const allDynamicContentModifiers = [...DynamicContentModifiers.string, ...DynamicContentModifiers.integer.filter(modifier => !DynamicContentModifiers.string.includes(modifier))];

package/ProductUpdates/styles.d.ts

@@ -1,4 +1,11 @@
 export declare const CardImage: import("styled-components").StyledComponent<"img", any, {}, never>;
 export declare const ContentBox: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"span", any, {
+    $color?: string;
+    $uppercase?: boolean;
+    $ellipsis?: boolean;
+    $variant?: import("@pushwoosh/kit-typography").TypographyVariant;
+} & {
+    as: string;
+}, "as">;
 export declare const Bold: import("styled-components").StyledComponent<"strong", any, {}, never>;

package/ProductUpdates/styles.js

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Text } from '@pushwoosh/kit-typography';
 // The only rule kit-helpers cannot express: object-fit has no prop there, and it is
 // what keeps a wrongly proportioned upload from stretching the card.
 export const CardImage = styled.img.withConfig({
@@ -12,7 +13,11 @@ export const ContentBox = styled.div.withConfig({
   displayName: "ContentBox",
   componentId: "sc-11vonu6-1"
 })(["> * + *{margin-top:0.5em;}"]);
-export const List = styled.ul.withConfig({
+// Built on Text, not on a bare <ul>: the paragraph typography lives in that variant, and
+// a plain list would keep the surrounding font size — 16px next to the card's 14px.
+export const List = styled(Text).attrs({
+  as: 'ul'
+}).withConfig({
   displayName: "List",
   componentId: "sc-11vonu6-2"
 })(["margin:0;padding-left:1.25em;list-style:disc outside;li + li{margin-top:0.25em;}"]);

package/RichMessageEditorSmart/NewDynamicContentForm.js

@@ -21,7 +21,7 @@ export const NewDynamicContentForm = ({
       children: _jsx(Button, {
         color: "secondary",
         onClick: () => onSubmit(dc),
-        isDisabled: !dc,
+        isDisabled: !dc?.tagName.trim(),
         children: lang({
           message: 'SMART.RICH_MESSAGE_EDITOR.INSERT'
         })

package/package.json

@@ -54,5 +54,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.3.20"
+  "version": "1.3.22"
 }