@pushwoosh/dumb-components 1.1.218 → 1.1.219

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/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.219",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",