@pushwoosh/dumb-components 2.9.7 → 2.9.9

package/Calendar/CalendarMonth/styles.js

@@ -8,8 +8,8 @@ const periodToCss = css(["border-top-left-radius:0;border-bottom-left-radius:0;"
 const disabledCss = css(["font-weight:", ";color:", ";border:1px solid ", ";background:linear-gradient( to top left,rgba(0,0,0,0) 0%,rgba(0,0,0,0) calc(50% - 0.8px),", " 50%,rgba(0,0,0,0) calc(50% + 0.8px),rgba(0,0,0,0) 100% );pointer-events:none;"], FontWeight.REGULAR, Color.PHANTOM, Color.DIVIDER, Color.DIVIDER);
 const outdatedCss = css(["opacity:0;pointer-events:none;"]);
 const highlightedCss = css(["outline:1px solid ", ";"], Color.SOFT_LIGHT);
-const periodCss = css(["position:relative;z-index:0;:before{content:'';position:absolute;top:0;left:-1px;right:-1px;bottom:0;background:", ";z-index:-1;}"], Color.SOFT_LIGHT);
-const periodOutdatedCss = css(["position:relative;z-index:0;color:transparent;pointer-events:none;:before{content:'';position:absolute;top:0;left:-1px;right:-1px;bottom:0;background:", ";z-index:-1;}"], Color.SOFT_LIGHT);
+const periodCss = css(["position:relative;z-index:0;&:before{content:'';position:absolute;top:0;left:-1px;right:-1px;bottom:0;background:", ";z-index:-1;}"], Color.SOFT_LIGHT);
+const periodOutdatedCss = css(["position:relative;z-index:0;color:transparent;pointer-events:none;&:before{content:'';position:absolute;top:0;left:-1px;right:-1px;bottom:0;background:", ";z-index:-1;}"], Color.SOFT_LIGHT);
 const cssMap = {
   selected: selectedCss,
   selectedDisabled: selectedDisabledCss,

package/Calendar/__tests__/CellBox.test.d.ts

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

package/Calendar/__tests__/CellBox.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { CellBox } from '../CalendarMonth/styles';
+const PERIOD_VARIANTS = ['period', 'periodOutdated'];
+function variantCss(variant) {
+  const {
+    rules
+  } = CellBox.componentStyle;
+  const flatten = part => {
+    if (Array.isArray(part)) return part.map(flatten).join('');
+    return typeof part === 'string' ? part : '';
+  };
+  return rules.filter(rule => typeof rule === 'function').map(rule => flatten(rule({
+    $variant: variant
+  }))).join('');
+}
+describe('CellBox period variants', () => {
+  it.each(PERIOD_VARIANTS)('anchors :before of %s to the cell with &, so stylis 4 does not turn it into a descendant selector', variant => {
+    const css = variantCss(variant);
+    expect(css).toContain('&:before');
+    expect(css).not.toMatch(/(^|[\s;{}])::?before/);
+  });
+  it.each(PERIOD_VARIANTS)('paints the %s background on the cell pseudo-element', variant => {
+    render(_jsx(CellBox, {
+      "data-testid": "cell",
+      "$variant": variant,
+      children: "1"
+    }));
+    const [className] = [...screen.getByTestId('cell').classList].slice(-1);
+    const styles = [...document.querySelectorAll('style')].map(node => node.textContent).join('');
+    expect(styles).toMatch(new RegExp(`\\.${className}:before\\{[^}]*background:`));
+    expect(styles).not.toContain(`.${className} :before`);
+  });
+});

package/RichMessageEditor/{EditorEmojiPicker.js → EditorEmojiPicker/EditorEmojiPicker.js}

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { EditorEmojiPickerStyled } from './EditorEmojiPicker.styles';
-import { EmojiPicker } from '../EmojiPicker';
-import { useThemeName } from '../hooks';
+import { EditorEmojiPickerStyled } from './styles';
+import { EmojiPicker } from '../../EmojiPicker';
+import { useThemeName } from '../../hooks';
 export const EditorEmojiPicker = ({
   onEmojiSelect
 }) => {

package/RichMessageEditor/EditorEmojiPicker/index.d.ts

@@ -0,0 +1 @@
+export * from './EditorEmojiPicker';

package/RichMessageEditor/EditorEmojiPicker/index.js

@@ -0,0 +1 @@
+export * from './EditorEmojiPicker';

package/RichMessageEditor/{EditorEmojiPicker.styles.js → EditorEmojiPicker/styles.js}

@@ -3,7 +3,7 @@ import { Color, getThemeColors, Shadow, ShapeRadius } from '@pushwoosh/kit-const
 import { rgbChannels } from './EditorEmojiPicker.helpers';
 export const EditorEmojiPickerStyled = styled.div.withConfig({
   displayName: "EditorEmojiPickerStyled",
-  componentId: "sc-1jl3t23-0"
+  componentId: "sc-1y0c927-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, ({
   $theme
 }) => rgbChannels(getThemeColors($theme).FROZEN));

package/RichMessageEditor/RichMessageEditor.js

@@ -10,9 +10,9 @@ import EmojiIcon from './assets/EmojiIcon.svg';
 import PersonalizationIcon from './assets/PersonalizationIcon.svg';
 import { EditorEmojiPicker } from './EditorEmojiPicker';
 import { placementToDirection } from './RichMessageEditor.helpers';
-import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styles';
 import { getDcByPath } from './slate/helpers';
 import { SlateEditable, SlateEditor } from './slate/SlateEditor';
+import { Arrow, DropArea, DropContent, ImSpan } from './styles';
 /**
  * Slate-based message editor with optional personalization (dynamic-content) tokens
  * and an emoji picker; serializes to a string via `onChange`. Render the result with

package/RichMessageEditor/slate/SlateEditor.js

@@ -4,8 +4,8 @@ import { Slate } from 'slate-react';
 import { usePersistentFunction } from '@pushwoosh/kit-helpers';
 import { renderElement } from './DynamicContentElement';
 import { content2string, string2content } from './helpers';
-import { EditableStyled } from './SlateEditor.styles';
 import { createMKEditor } from './SlateEditor.utils';
+import { EditableStyled } from './styles';
 export const SlateEditor = ({
   initialValue: initialValueString,
   onChange,

package/RichMessageEditor/slate/{SlateEditor.styles.js → styles.js}

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { Color, FontSize, FontWeight, ShapeRadius } from '@pushwoosh/kit-constants';
 export const EditableStyled = styled(Editable).withConfig({
   displayName: "EditableStyled",
-  componentId: "sc-13jikil-0"
+  componentId: "sc-16lukqt-0"
 })(["font-weight:", ";font-size:", ";line-height:140%;padding:8px;color:", ";background:", ";caret-color:", ";border:1px solid ", ";border-radius:", ";overflow-x:auto;& [data-slate-placeholder='true']{color:", ";opacity:1 !important;}&:focus{border-color:", ";outline:none;}& > p{position:relative;margin:4px 0;&:first-child{margin-top:0;}&:last-child{margin-bottom:0;}}"], FontWeight.REGULAR, FontSize.REGULAR, Color.MAIN, Color.CLEAR, Color.BRIGHT, ({
   $isErrored
 }) => $isErrored ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, Color.PHANTOM, Color.BRIGHT);

package/RichMessageEditor/{RichMessageEditor.styles.js → styles.js}

@@ -3,15 +3,15 @@ import { Color, Shadow, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 export const ImSpan = styled.span.withConfig({
   displayName: "ImSpan",
-  componentId: "sc-1l3r9n8-0"
+  componentId: "sc-1n9vpwc-0"
 })(["color:", ";position:relative;padding-left:20px;font-size:12px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase;cursor:pointer;> svg{position:absolute;left:0;top:-1px;}"], Color.SOFT);
 export const DropArea = styled.div.withConfig({
   displayName: "DropArea",
-  componentId: "sc-1l3r9n8-1"
+  componentId: "sc-1n9vpwc-1"
 })(["z-index:1000;"]);
 export const DropContent = styled.div.withConfig({
   displayName: "DropContent",
-  componentId: "sc-1l3r9n8-2"
+  componentId: "sc-1n9vpwc-2"
 })(["border:1px solid ", ";border-radius:", ";box-shadow:", ";background-color:", ";"], Color.FORM, ShapeRadius.CONTROL, Shadow.REGULAR, Color.FROZEN);
 const transforms = {
   left: 'scaleX(-1)',
@@ -23,7 +23,7 @@ export const Arrow = styled(Horizontal).attrs({
   $placeItems: 'center'
 }).withConfig({
   displayName: "Arrow",
-  componentId: "sc-1l3r9n8-3"
+  componentId: "sc-1n9vpwc-3"
 })(["position:absolute;width:20px;height:20px;transform:", " translateX(11px);", ":0;"], ({
   $direction
 }) => transforms[$direction], ({

package/Skeleton/__tests__/Skeleton.test.d.ts

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

package/Skeleton/__tests__/Skeleton.test.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { CircularSkeleton, RectangularSkeleton } from '../styles';
+describe('RectangularSkeleton', () => {
+  it('keeps style props off the DOM and still paints them', () => {
+    render(_jsx(RectangularSkeleton, {
+      "data-testid": "rect",
+      width: 120,
+      height: 16,
+      color: "red",
+      borderRadius: 4
+    }));
+    const node = screen.getByTestId('rect');
+    expect(node).not.toHaveAttribute('width');
+    expect(node).not.toHaveAttribute('height');
+    expect(node).not.toHaveAttribute('color');
+    expect(node).not.toHaveAttribute('borderradius');
+    expect(getComputedStyle(node)).toMatchObject({
+      width: '120px',
+      height: '16px',
+      backgroundColor: 'rgb(255, 0, 0)',
+      borderRadius: '4px'
+    });
+  });
+  it('still forwards regular attributes', () => {
+    render(_jsx(RectangularSkeleton, {
+      "data-testid": "rect",
+      title: "loading",
+      "aria-busy": "true",
+      width: 1,
+      height: 1
+    }));
+    const node = screen.getByTestId('rect');
+    expect(node).toHaveAttribute('title', 'loading');
+    expect(node).toHaveAttribute('aria-busy', 'true');
+  });
+});
+describe('CircularSkeleton', () => {
+  it('keeps style props off the DOM and still paints them', () => {
+    render(_jsx(CircularSkeleton, {
+      "data-testid": "circle",
+      "aria-label": "avatar",
+      diameter: 32,
+      color: "red"
+    }));
+    const node = screen.getByTestId('circle');
+    expect(node).not.toHaveAttribute('diameter');
+    expect(node).not.toHaveAttribute('color');
+    expect(node).toHaveAttribute('aria-label', 'avatar');
+    expect(getComputedStyle(node)).toMatchObject({
+      width: '32px',
+      height: '32px',
+      backgroundColor: 'rgb(255, 0, 0)'
+    });
+  });
+});

package/Skeleton/styles.js

@@ -15,6 +15,8 @@ const skeletonCommonCss = css(["background-color:", ";animation:", " 1.5s ease-i
 }) => !color && accentCycleCss);
 /** Pulsing rectangular loading placeholder of a fixed `width`/`height`. */
 export const RectangularSkeleton = styled.div.withConfig({
+  shouldForwardProp: prop => !['width', 'height', 'color', 'borderRadius'].includes(prop)
+}).withConfig({
   displayName: "RectangularSkeleton",
   componentId: "sc-mdyfd6-0"
 })(["width:", ";height:", ";", " ", ""], ({
@@ -24,6 +26,8 @@ export const RectangularSkeleton = styled.div.withConfig({
 }) => toCssValue(height), skeletonCommonCss, borderRadiusCss);
 /** Pulsing circular loading placeholder of a given `diameter` (e.g. for avatars). */
 export const CircularSkeleton = styled.div.withConfig({
+  shouldForwardProp: prop => !['diameter', 'color'].includes(prop)
+}).withConfig({
   displayName: "CircularSkeleton",
   componentId: "sc-mdyfd6-1"
 })(["width:", ";height:", ";border-radius:100%;", ""], ({

package/package.json

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