@pushwoosh/dumb-components 2.8.2 → 2.9.1

package/RadioCard/RadioCard.js

@@ -3,7 +3,7 @@ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
 import { H4, Paragraph } from '@pushwoosh/kit-typography';
 import { Radio } from '../Radio';
 import { TooltipTrigger } from '../Tooltip';
-import { RootBox } from './styled';
+import { RootBox } from './styles';
 /**
  * Selectable card with a title, optional description and a radio indicator — a richer
  * alternative to {@link Radio} for choosing one option among cards.

package/RadioCard/{styled.js → styles.js}

@@ -9,7 +9,7 @@ export const RootBox = styled(Vertical).attrs({
   $gap: 0
 }).withConfig({
   displayName: "RootBox",
-  componentId: "sc-tkztr1-0"
+  componentId: "sc-1woucxa-0"
 })(["width:", ";height:100%;box-sizing:border-box;outline:", ";cursor:", ";opacity:", ";pointer-events:", ";&:hover{background:", ";}"], ({
   $width
 }) => toCssValue($width), ({

package/RichMessageEditor/EditorEmojiPicker.js

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

package/RichMessageEditor/{EditorEmojiPicker.styled.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-sdjrip-0"
+  componentId: "sc-1jl3t23-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,7 +10,7 @@ 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.styled';
+import { Arrow, DropArea, DropContent, ImSpan } from './RichMessageEditor.styles';
 import { getDcByPath } from './slate/helpers';
 import { SlateEditable, SlateEditor } from './slate/SlateEditor';
 /**

package/RichMessageEditor/{RichMessageEditor.styled.js → RichMessageEditor.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-kdvgj9-0"
+  componentId: "sc-1l3r9n8-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-kdvgj9-1"
+  componentId: "sc-1l3r9n8-1"
 })(["z-index:1000;"]);
 export const DropContent = styled.div.withConfig({
   displayName: "DropContent",
-  componentId: "sc-kdvgj9-2"
+  componentId: "sc-1l3r9n8-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-kdvgj9-3"
+  componentId: "sc-1l3r9n8-3"
 })(["position:absolute;width:20px;height:20px;transform:", " translateX(11px);", ":0;"], ({
   $direction
 }) => transforms[$direction], ({

package/RichMessageEditor/slate/SlateEditor.js

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

package/RichMessageEditor/slate/{SlateEditor.styled.js → SlateEditor.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-1frhl1f-0"
+  componentId: "sc-13jikil-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/package.json

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

package/polyglot/__tests__/filters.test.js

@@ -72,6 +72,35 @@ describe('filters', () => {
       expect(filters.pluralize('not a number', [scalar('a'), scalar('b')], createContext())).toBe('not a number');
     });
   });
+  describe('pluralize with CLDR forms', () => {
+    const arabic = ['صفر', 'صف', 'صفان', 'صفوف', 'صفًا', 'صف*'].map(scalar);
+    test('picks each of the six Arabic forms', () => {
+      const ctx = createContext('ar');
+      expect(filters.pluralize(0, arabic, ctx)).toBe('صفر');
+      expect(filters.pluralize(1, arabic, ctx)).toBe('صف');
+      expect(filters.pluralize(2, arabic, ctx)).toBe('صفان');
+      expect(filters.pluralize(3, arabic, ctx)).toBe('صفوف');
+      expect(filters.pluralize(10, arabic, ctx)).toBe('صفوف');
+      expect(filters.pluralize(11, arabic, ctx)).toBe('صفًا');
+      expect(filters.pluralize(99, arabic, ctx)).toBe('صفًا');
+      expect(filters.pluralize(100, arabic, ctx)).toBe('صف*');
+      expect(filters.pluralize(103, arabic, ctx)).toBe('صفوف');
+    });
+    test('keeps the legacy one/other split when fewer forms are given', () => {
+      const ctx = createContext('ar');
+      expect(filters.pluralize(1, [scalar('صف'), scalar('صفوف')], ctx)).toBe('صف');
+      expect(filters.pluralize(0, [scalar('صف'), scalar('صفوف')], ctx)).toBe('صفوف');
+      expect(filters.pluralize(2, [scalar('صف'), scalar('صفوف')], ctx)).toBe('صفوف');
+    });
+    test('Russian three-form rule matches CLDR one/few/many for integers', () => {
+      const ctx = createContext('ru');
+      const forms = [scalar('one'), scalar('few'), scalar('many')];
+      const rules = new Intl.PluralRules('ru');
+      for (let n = 0; n <= 1000; n += 1) {
+        expect(filters.pluralize(n, forms, ctx)).toBe(rules.select(n));
+      }
+    });
+  });
   describe('formatNumber', () => {
     test('formats integer with spaces', () => {
       expect(filters.formatNumber('1000000', [], createContext())).toBe('1 000 000');

package/polyglot/liquid/filters.js

@@ -15,6 +15,20 @@ const pluralizers = {
   de: universalPluralize,
   es: universalPluralize
 };
+const CLDR_CATEGORY_ORDER = ['zero', 'one', 'two', 'few', 'many', 'other'];
+const cldrPluralize = (language, num, plurals) => {
+  let rules;
+  try {
+    rules = new Intl.PluralRules(language);
+  } catch {
+    return undefined;
+  }
+  const categories = CLDR_CATEGORY_ORDER.filter(c => rules.resolvedOptions().pluralCategories.includes(c));
+  if (categories.length < 2 || plurals.length < categories.length) {
+    return undefined;
+  }
+  return plurals[categories.indexOf(rules.select(num))];
+};
 export const filters = {
   capitalize: value => typeof value === 'string' ? value.charAt(0).toUpperCase() + value.slice(1) : value,
   upperCase: value => typeof value === 'string' ? value.toUpperCase() : value,
@@ -24,6 +38,10 @@ export const filters = {
       return value;
     }
     const variants = args.map(arg => unpackScalarOrValue(arg, context));
+    const cldr = cldrPluralize(context.language, value, variants);
+    if (cldr !== undefined) {
+      return cldr;
+    }
     const pluralizer = pluralizers[context.language] || universalPluralize;
     return pluralizer(value, variants);
   },