@pushwoosh/dumb-components 2.9.8 → 2.9.10

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/package.json

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

package/shared/dropdownField/__tests__/useDropdownPosition.test.d.ts

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

package/shared/dropdownField/__tests__/useDropdownPosition.test.js

@@ -0,0 +1,60 @@
+import { renderHook } from '@testing-library/react';
+import { useDropdownPosition } from '../useDropdownPosition';
+const floating = {
+  middleware: []
+};
+jest.mock('@floating-ui/react-dom', () => ({
+  ...jest.requireActual('@floating-ui/react-dom'),
+  size: options => ({
+    name: 'size',
+    options
+  }),
+  useFloating: config => {
+    floating.middleware = config.middleware;
+    return {
+      refs: {
+        reference: {
+          current: null
+        },
+        floating: {
+          current: null
+        },
+        setReference: jest.fn(),
+        setFloating: jest.fn()
+      },
+      floatingStyles: {}
+    };
+  }
+}));
+const maxHeightFor = availableHeight => {
+  renderHook(() => useDropdownPosition({
+    isOpen: true
+  }));
+  const style = {};
+  floating.middleware.find(m => m.name === 'size').options.apply({
+    rects: {
+      reference: {
+        width: 200
+      }
+    },
+    elements: {
+      floating: {
+        style
+      }
+    },
+    availableWidth: 1000,
+    availableHeight
+  });
+  return style.maxHeight;
+};
+describe('useDropdownPosition max height', () => {
+  it('caps the dropdown at 300px when there is more room', () => {
+    expect(maxHeightFor(1200)).toBe('300px');
+  });
+  it('shrinks to the room below the field when it is less than the cap', () => {
+    expect(maxHeightFor(200)).toBe('192px');
+  });
+  it('never goes negative', () => {
+    expect(maxHeightFor(4)).toBe('0px');
+  });
+});

package/shared/dropdownField/constants.d.ts

@@ -1,7 +1,7 @@
 import { Color } from '@pushwoosh/kit-constants';
 export declare const LOADING_BORDER_COLORS: readonly [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export declare const LOADING_BORDER_ANIMATION_MS = 3000;
-export declare const DROPDOWN_MAX_HEIGHT = 280;
+export declare const DROPDOWN_MAX_HEIGHT = 300;
 /** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
 export declare const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */

package/shared/dropdownField/constants.js

@@ -1,7 +1,7 @@
 import { Color } from '@pushwoosh/kit-constants';
 export const LOADING_BORDER_COLORS = [Color.PRIMARY, Color.BRIGHT, Color.BRAND_GREEN, Color.EXCEPTIONAL];
 export const LOADING_BORDER_ANIMATION_MS = 3000;
-export const DROPDOWN_MAX_HEIGHT = 280;
+export const DROPDOWN_MAX_HEIGHT = 300;
 /** Default dropdown width cap. A field wider than this stretches the dropdown to its own width only when the field opts in via `fullWidth`; otherwise the dropdown stays capped here. */
 export const DROPDOWN_DEFAULT_WIDTH = 320;
 /** Default debounce (ms) before an async `loadItems` call fires after the query changes. */

package/shared/dropdownField/useDropdownPosition.js

@@ -1,5 +1,5 @@
 import { autoUpdate, flip, offset, size, useFloating } from '@floating-ui/react-dom';
-import { DROPDOWN_DEFAULT_WIDTH } from './constants';
+import { DROPDOWN_DEFAULT_WIDTH, DROPDOWN_MAX_HEIGHT } from './constants';
 import { useOnClickOutside } from '../../hooks';
 /**
  * Positions the dropdown relative to the field via floating-ui (flip, offset,
@@ -32,7 +32,7 @@ export function useDropdownPosition({
         Object.assign(elements.floating.style, {
           minWidth: `${minWidth}px`,
           maxWidth: `${maxWidth}px`,
-          maxHeight: `${Math.max(0, availableHeight - 8)}px`
+          maxHeight: `${Math.max(0, Math.min(DROPDOWN_MAX_HEIGHT, availableHeight - 8))}px`
         });
       }
     })],