@pushwoosh/dumb-components 1.1.218 → 1.1.220

package/EmojiPicker/EmojiPicker.js

@@ -1,27 +1,37 @@
 import { Picker } from 'emoji-mart';
 import { createElement, useEffect, useRef } from 'react';
+import { useThemeName } from '../hooks';
 async function data() {
   const response = await fetch('https://cdn.jsdelivr.net/npm/@emoji-mart/data');
   return response.json();
 }
-export const EmojiPicker = props => {
+export const EmojiPicker = ({
+  theme,
+  ...props
+}) => {
   const ref = useRef(null);
   const instance = useRef(null);
+  const themeOfBuiltPicker = useRef(null);
+  const observedTheme = useThemeName(ref, !theme);
+  const pickerTheme = theme ?? observedTheme;
   useEffect(() => {
-    if (instance.current) {
+    const isThemeAlreadyBuilt = instance.current && themeOfBuiltPicker.current === pickerTheme;
+    if (isThemeAlreadyBuilt) {
       instance.current.update({
         data,
         ...props
       });
-    } else {
-      const PickerElement = window?.customElements.get('em-emoji-picker');
-      instance.current = new (PickerElement || Picker)({
-        data,
-        ...props,
-        ref
-      });
+      return;
     }
-  }, [props]);
+    const PickerElement = window?.customElements.get('em-emoji-picker');
+    instance.current = new (PickerElement || Picker)({
+      data,
+      ...props,
+      theme: pickerTheme,
+      ref
+    });
+    themeOfBuiltPicker.current = pickerTheme;
+  }, [props, pickerTheme]);
   return createElement('div', {
     ref
   });

package/EmojiPicker/types.d.ts

@@ -3,5 +3,6 @@ export type EmojiPickerProps = {
     onEmojiSelect: (emoji: {
         native: string;
     }) => void;
+    /** Pin the picker to one palette; omit it to follow the theme of the surface it opens on. */
     theme?: 'light' | 'dark';
 };

package/RichMessageEditor/EditorEmojiPicker.helpers.d.ts

@@ -0,0 +1,2 @@
+/** Splits a hex colour into the bare `r, g, b` channels that `rgb(var(--…))` needs. */
+export declare function rgbChannels(hex: string): string;

package/RichMessageEditor/EditorEmojiPicker.helpers.js

@@ -0,0 +1,5 @@
+/** Splits a hex colour into the bare `r, g, b` channels that `rgb(var(--…))` needs. */
+export function rgbChannels(hex) {
+  const value = parseInt(hex.replace('#', '').slice(0, 6), 16);
+  return [value >> 16 & 255, value >> 8 & 255, value & 255].join(', ');
+}

package/RichMessageEditor/EditorEmojiPicker.js

@@ -1,15 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { EditorEmojiPickerStyled } from './EditorEmojiPicker.styled';
 import { EmojiPicker } from '../EmojiPicker';
+import { useThemeName } from '../hooks';
 export const EditorEmojiPicker = ({
   onEmojiSelect
 }) => {
+  const ref = useRef(null);
+  const theme = useThemeName(ref);
   return _jsx(EditorEmojiPickerStyled, {
+    ref: ref,
+    "$theme": theme,
     children: _jsx(EmojiPicker, {
+      theme: theme,
       onEmojiSelect: emoji => {
         onEmojiSelect(emoji.native);
-      },
-      theme: "light"
+      }
     })
   });
 };

package/RichMessageEditor/EditorEmojiPicker.styled.d.ts

@@ -1 +1,4 @@
-export declare const EditorEmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+import { type ThemeName } from '@pushwoosh/kit-constants';
+export declare const EditorEmojiPickerStyled: import("styled-components").StyledComponent<"div", any, {
+    $theme: ThemeName;
+}, never>;

package/RichMessageEditor/EditorEmojiPicker.styled.js

@@ -1,6 +1,9 @@
 import styled from 'styled-components';
-import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Color, getThemeColors, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
+import { rgbChannels } from './EditorEmojiPicker.helpers';
 export const EditorEmojiPickerStyled = styled.div.withConfig({
   displayName: "EditorEmojiPickerStyled",
   componentId: "sc-sdjrip-0"
-})(["min-width:352px;em-emoji-picker{border:1px solid ", ";--border-radius:", ";--shadow:", ";background-color:", ";--rgb-background:", ";}"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN, Color.FROZEN);
+})(["min-width:352px;em-emoji-picker{border:1px solid ", ";--border-radius:", ";--shadow:", ";background-color:", ";--rgb-background:", ";}"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN, ({
+  $theme
+}) => rgbChannels(getThemeColors($theme).FROZEN));

package/RichMessageEditor/slate/DynamicContentElement.js

@@ -3,6 +3,7 @@ import { Transforms } from 'slate';
 import { useSelected, useSlateStatic } from 'slate-react';
 import { findPath } from './helpers';
 import { Chip } from '../../Chip';
+import { isResolvableDc } from '../../shared/dynamicContent';
 const DynamicContentElementComponent = ({
   attributes,
   element,
@@ -14,11 +15,12 @@ const DynamicContentElementComponent = ({
   const {
     tagName
   } = element.dc;
+  const isResolvable = isResolvableDc(element.dc);
   return _jsxs(Chip, {
     ...attributes,
     as: "span",
     contentEditable: false,
-    "$variant": tagName ? 'primary' : 'danger',
+    "$variant": isResolvable ? 'primary' : 'danger',
     "$selected": selected,
     "$onClose": event => {
       event.preventDefault();

package/RichMessageEditor/slate/helpers.d.ts

@@ -41,7 +41,7 @@ export declare function string2content(value: string): SlateEditorContent;
  */
 export declare function content2string(state: SlateEditorContent): string;
 /**
- * Validates if the content has valid dynamic content elements
+ * Validates that every dynamic content element is one the sender can substitute
  * @param value - The Slate editor content to validate
  * @returns True if all dynamic content elements are valid, false otherwise
  */

package/RichMessageEditor/slate/helpers.js

@@ -1,4 +1,4 @@
-import { parseDc, splitDynamicContent, stringifyDc } from '../../shared/dynamicContent';
+import { isResolvableDc, parseDc, splitDynamicContent, stringifyDc } from '../../shared/dynamicContent';
 /**
  * Checks if a Slate node is a custom element
  * @param x - The node to check
@@ -127,14 +127,14 @@ export function content2string(state) {
   }).join('\n');
 }
 /**
- * Validates if the content has valid dynamic content elements
+ * Validates that every dynamic content element is one the sender can substitute
  * @param value - The Slate editor content to validate
  * @returns True if all dynamic content elements are valid, false otherwise
  */
 export function validateContent(value) {
   for (const el of value) {
     if (isElement(el)) {
-      if (el.type === 'dc' && !el.dc.tagName) {
+      if (el.type === 'dc' && !isResolvableDc(el.dc)) {
         return false;
       }
       if (!validateContent(el.children)) {

package/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './useOnClickOutside';
 export * from './useElementWidth';
 export * from './useLayer';
+export * from './useThemeName';

package/hooks/index.js

@@ -1,3 +1,4 @@
 export * from './useOnClickOutside';
 export * from './useElementWidth';
-export * from './useLayer';
+export * from './useLayer';
+export * from './useThemeName';

package/hooks/useThemeName.d.ts

@@ -0,0 +1,6 @@
+import { type RefObject } from 'react';
+import { type ThemeName } from '@pushwoosh/kit-constants';
+/** Current theme as a value, for widgets that cannot read `var(--pw-color-*)` — canvas, shadow DOM.
+ * @param ref - element inside the theme scope, so a light island wins over the document theme
+ * @param isEnabled - pass `false` when the caller already knows the theme and needs no observer */
+export declare function useThemeName(ref?: RefObject<Element>, isEnabled?: boolean): ThemeName;

package/hooks/useThemeName.js

@@ -0,0 +1,30 @@
+import { useLayoutEffect, useState } from 'react';
+import { DEFAULT_THEME, THEME_ATTRIBUTE } from '@pushwoosh/kit-constants';
+function readThemeName(element) {
+  if (typeof document === 'undefined') {
+    return DEFAULT_THEME;
+  }
+  const scope = element?.closest(`[${THEME_ATTRIBUTE}]`) ?? document.documentElement;
+  return scope.getAttribute(THEME_ATTRIBUTE) === 'dark' ? 'dark' : DEFAULT_THEME;
+}
+/** Current theme as a value, for widgets that cannot read `var(--pw-color-*)` — canvas, shadow DOM.
+ * @param ref - element inside the theme scope, so a light island wins over the document theme
+ * @param isEnabled - pass `false` when the caller already knows the theme and needs no observer */
+export function useThemeName(ref, isEnabled = true) {
+  const [themeName, setThemeName] = useState(() => readThemeName(ref?.current ?? null));
+  useLayoutEffect(() => {
+    if (!isEnabled) {
+      return undefined;
+    }
+    const syncThemeName = () => setThemeName(readThemeName(ref?.current ?? null));
+    syncThemeName();
+    const observer = new MutationObserver(syncThemeName);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [THEME_ATTRIBUTE],
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [ref, isEnabled]);
+  return themeName;
+}

package/package.json

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

package/shared/dynamicContent/__tests__/token.test.d.ts

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

package/shared/dynamicContent/__tests__/token.test.js

@@ -0,0 +1,32 @@
+import { validateContentSting } from '../../../RichMessageEditor/slate/helpers';
+import { isResolvableDc, parseDc } from '../token';
+// The lists below mirror channels/publisher
+// internal/services/dynamiccontentreplacer/constants.go — keep them in sync.
+const caseInsensitiveModifiers = ['capitalizefirst', 'capitalizeallfirst', 'uppercase', 'lowercase', 'regular', 'base64', 'cent', 'dollar', 'comma', 'euro', 'jpy', 'lira'];
+const dateModifiers = ['M-d-y', 'm-d-y', 'M d y', 'M d Y', 'l', 'M d', 'H:i', 'm-d-y H:i'];
+describe('isResolvableDc', () => {
+  test.each(caseInsensitiveModifiers)('accepts %s', modifier => {
+    expect(isResolvableDc(parseDc(`{Name|${modifier}}`))).toBe(true);
+  });
+  test.each(caseInsensitiveModifiers)('accepts %s whatever the case', modifier => {
+    expect(isResolvableDc(parseDc(`{Name|${modifier.toUpperCase()}}`))).toBe(true);
+  });
+  test.each(dateModifiers)('accepts the date modifier %s', modifier => {
+    expect(isResolvableDc(parseDc(`{Name|${modifier}}`))).toBe(true);
+  });
+  test('rejects a date modifier in the wrong case, as the sender does', () => {
+    expect(isResolvableDc(parseDc('{Name|m d y}'))).toBe(false);
+  });
+  test.each([['{Name|}', 'no modifier at all'], ['{Name|nope}', 'a modifier outside the list'], ['{|regular}', 'no tag name']])('rejects %s (%s)', token => {
+    expect(isResolvableDc(parseDc(token))).toBe(false);
+  });
+  test('keeps a default value out of the verdict', () => {
+    expect(isResolvableDc(parseDc('{WalletPassLink|regular|no pass}'))).toBe(true);
+    expect(isResolvableDc(parseDc('{WalletPassLink||no pass}'))).toBe(false);
+  });
+});
+describe('validateContentSting', () => {
+  test.each([['Tap here!\n{WalletSerialNo|regular}', true], ['Tap here!\n{WalletSerialNo|}', false], ['{WalletSerialNo|regular}{WalletPassLink|}', false], ['Hi {{ user.name | upcase }}, plain liquid is not a token', true], ['no tokens at all', true], ['', true]])('%s -> %s', (content, expected) => {
+    expect(validateContentSting(content)).toBe(expected);
+  });
+});

package/shared/dynamicContent/index.d.ts

@@ -1,5 +1,5 @@
 export { DynamicContentChip, type DynamicContentChipProps } from './DynamicContentChip';
 export { DynamicContentText, type DynamicContentTextProps } from './DynamicContentText';
-export { parseDc, splitDynamicContent, stringifyDc } from './token';
+export { isResolvableDc, parseDc, splitDynamicContent, stringifyDc } from './token';
 export { Paragraph } from './styles';
 export type { DynamicContent, DynamicContentPart, DynamicContentTone } from './types';

package/shared/dynamicContent/index.js

@@ -1,4 +1,4 @@
 export { DynamicContentChip } from './DynamicContentChip';
 export { DynamicContentText } from './DynamicContentText';
-export { parseDc, splitDynamicContent, stringifyDc } from './token';
+export { isResolvableDc, parseDc, splitDynamicContent, stringifyDc } from './token';
 export { Paragraph } from './styles';

package/shared/dynamicContent/token.d.ts

@@ -18,3 +18,5 @@ export declare function splitDynamicContent(text: string): DynamicContentPart[];
 export declare function parseDc(value: string): DynamicContent;
 /** Serializes a token back to `{tagName|modifier|defaultValue}`. */
 export declare function stringifyDc(dc: DynamicContent): string;
+/** Whether the sender substitutes this token, or ships it verbatim (dates are case-sensitive, other modifiers are not). */
+export declare function isResolvableDc(dc: DynamicContent): boolean;

package/shared/dynamicContent/token.js

@@ -42,4 +42,14 @@ export function stringifyDc(dc) {
     defaultValue
   } = dc;
   return `{${tagName}|${modifier}${defaultValue ? `|${defaultValue}` : ''}}`;
+}
+const CASE_INSENSITIVE_MODIFIERS = ['capitalizefirst', 'capitalizeallfirst', 'uppercase', 'lowercase', 'regular', 'base64', 'cent', 'dollar', 'comma', 'euro', 'jpy', 'lira'];
+const DATE_MODIFIERS = ['M-d-y', 'm-d-y', 'M d y', 'M d Y', 'l', 'M d', 'H:i', 'm-d-y H:i'];
+/** Whether the sender substitutes this token, or ships it verbatim (dates are case-sensitive, other modifiers are not). */
+export function isResolvableDc(dc) {
+  const {
+    tagName,
+    modifier
+  } = dc;
+  return Boolean(tagName) && (CASE_INSENSITIVE_MODIFIERS.includes(modifier.toLowerCase()) || DATE_MODIFIERS.includes(modifier));
 }