@pushwoosh/dumb-components 1.1.181 → 1.1.183

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/NativeRichMediaCoverImg.js

@@ -6,6 +6,7 @@ export function NativeRichMediaCoverImg(props) {
     margin,
     width,
     height,
+    heightRatio,
     borderRadius,
     position,
     inset,
@@ -19,6 +20,7 @@ export function NativeRichMediaCoverImg(props) {
     "$margin": margin,
     "$width": width,
     "$height": height,
+    "$heightRatio": heightRatio,
     "$borderRadius": borderRadius,
     "$position": position,
     "$inset": inset,

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/styles.d.ts

@@ -4,6 +4,7 @@ export declare const CoverBox: import("styled-components").StyledComponent<"div"
     $margin?: string;
     $width?: number;
     $height?: number;
+    $heightRatio?: number;
     $borderRadius?: number;
     $position?: "absolute";
     $inset?: boolean;

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/styles.js

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 export const CoverBox = styled.div.withConfig({
   displayName: "CoverBox",
   componentId: "sc-15zx77-0"
-})(["background-size:cover;background-position:center;background-color:", ";", " ", " ", " ", " ", " ", " ", " ", ""], ({
+})(["background-size:cover;background-position:center;background-color:", ";", " ", " ", " ", " ", " ", " ", " ", " ", ""], ({
   $backgroundColor
 }) => $backgroundColor || 'rgba(116, 116, 128, 0.08)', ({
   $backgroundImage
@@ -13,6 +13,9 @@ export const CoverBox = styled.div.withConfig({
 }) => $width !== undefined ? `width: ${$width}px;` : '', ({
   $height
 }) => $height !== undefined ? `height: ${$height}px;` : '', ({
+  $height,
+  $heightRatio
+}) => $height === undefined && $heightRatio !== undefined ? `aspect-ratio: 1 / ${$heightRatio};` : '', ({
   $borderRadius
 }) => $borderRadius !== undefined ? `border-radius: ${$borderRadius}px;` : '', ({
   $position

package/NativeRichMediaPreview/components/NativeRichMediaCoverImg/types.d.ts

@@ -3,6 +3,7 @@ export type NativeRichMediaCoverImgProps = {
     margin?: string;
     width?: number;
     height?: number;
+    heightRatio?: number;
     borderRadius?: number;
     position?: 'absolute';
     inset?: boolean;

package/NativeRichMediaPreview/components/NativeRichMediaRewardPanel/styles.d.ts

@@ -22,6 +22,7 @@ export declare const RewardTitle: import("styled-components").StyledComponent<"s
     $marginTop?: number;
     $size?: "h3" | "h4";
     $truncate?: boolean;
+    $clamp?: number;
 } & {
     $align: string;
 }, "$align">;

package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.d.ts

@@ -9,4 +9,5 @@ export declare const NativeRichMediaTitle: import("styled-components").StyledCom
     $marginTop?: number;
     $size?: "h3" | "h4";
     $truncate?: boolean;
+    $clamp?: number;
 }, never>;

package/NativeRichMediaPreview/components/NativeRichMediaTitle/styles.js

@@ -7,7 +7,7 @@ export const NativeRichMediaTitle = styled(Text).attrs(({
 })).withConfig({
   displayName: "NativeRichMediaTitle",
   componentId: "sc-1oklc22-0"
-})(["display:block;color:", ";", " ", " ", ""], ({
+})(["display:block;color:", ";", " ", " ", " ", ""], ({
   $color
 }) => $color, ({
   $align
@@ -19,4 +19,11 @@ export const NativeRichMediaTitle = styled(Text).attrs(({
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+  ` : '', ({
+  $clamp
+}) => $clamp ? `
+    display: -webkit-box;
+    -webkit-line-clamp: ${$clamp};
+    -webkit-box-orient: vertical;
+    overflow: hidden;
   ` : '');

package/NativeRichMediaPreview/types.js

@@ -5,4 +5,4 @@ export const NATIVE_RICH_MEDIA_DISPLAY_TYPES = ['modal', 'sheet', 'carousel', 's
  * editor can author. The preview renders every display type, but only these
  * three have an editing UI, so pickers must offer this list and not the full one.
  */
-export const EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES = ['modal', 'stories', 'fullscreen'];
+export const EDITABLE_NATIVE_RICH_MEDIA_DISPLAY_TYPES = ['modal', 'stories', 'fullscreen', 'sheet', 'carousel', 'banner'];

package/NativeRichMediaPreview/views/NativeRichMediaBannerView/styles.js

@@ -3,7 +3,7 @@ import { FontSize, FontWeight } from '@pushwoosh/kit-constants';
 export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-1fs78cm-0"
-})(["margin:0 12px;border-radius:18px;box-shadow:0 16px 28px rgba(0,0,0,0.28);padding:12px 14px;display:flex;align-items:center;gap:12px;background:", ";", " ", ""], ({
+})(["margin:0 12px;border-radius:18px;padding:12px 14px;display:flex;align-items:center;gap:12px;background:", ";", " ", ""], ({
   $background
 }) => $background, ({
   $marginTop

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/NativeRichMediaCarouselView.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Card, Dot, Dots, TextBlock } from './styles';
+import { Card, Dot, Dots, Scrim, TextBlock } from './styles';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
 import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
@@ -20,12 +20,14 @@ export function NativeRichMediaCarouselView(props) {
       url: item.image,
       position: "absolute",
       inset: true
-    }), (title.text || message.text) && _jsxs(TextBlock, {
+    }), _jsx(Scrim, {}), (title.text || message.text) && _jsxs(TextBlock, {
       children: [title.text && _jsx(NativeRichMediaTitle, {
         "$color": title.color,
+        "$clamp": 2,
         children: title.text
       }), message.text && _jsx(NativeRichMediaText, {
         "$color": message.color,
+        "$clamp": 2,
         children: message.text
       })]
     }), items.length > 1 && _jsx(Dots, {

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.d.ts

@@ -1,4 +1,5 @@
 export declare const Card: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Scrim: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TextBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dots: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dot: import("styled-components").StyledComponent<"div", any, {

package/NativeRichMediaPreview/views/NativeRichMediaCarouselView/styles.js

@@ -2,18 +2,22 @@ import styled from 'styled-components';
 export const Card = styled.div.withConfig({
   displayName: "Card",
   componentId: "sc-15b2cux-0"
-})(["position:relative;margin:0 12px;height:461px;border-radius:24px;background:#000;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,0.28);"]);
+})(["position:relative;margin:0 12px;aspect-ratio:1 / 1.32;border-radius:24px;background:#000;overflow:hidden;box-shadow:0 16px 28px rgba(0,0,0,0.28);"]);
+export const Scrim = styled.div.withConfig({
+  displayName: "Scrim",
+  componentId: "sc-15b2cux-1"
+})(["position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0.9) 100%);"]);
 export const TextBlock = styled.div.withConfig({
   displayName: "TextBlock",
-  componentId: "sc-15b2cux-1"
+  componentId: "sc-15b2cux-2"
 })(["position:absolute;left:18px;right:18px;bottom:36px;"]);
 export const Dots = styled.div.withConfig({
   displayName: "Dots",
-  componentId: "sc-15b2cux-2"
+  componentId: "sc-15b2cux-3"
 })(["position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:0;"]);
 export const Dot = styled.div.withConfig({
   displayName: "Dot",
-  componentId: "sc-15b2cux-3"
+  componentId: "sc-15b2cux-4"
 })(["display:inline-block;width:7px;height:7px;border-radius:50%;margin:0 4.5px;background:", ";"], ({
   $active
 }) => $active ? '#FFF' : 'rgba(255,255,255,0.4)');

package/NativeRichMediaPreview/views/NativeRichMediaSheetView/NativeRichMediaSheetView.js

@@ -3,7 +3,7 @@ import { Vertical } from '@pushwoosh/kit-helpers';
 import { Handle, Sheet } from './styles';
 import { NativeRichMediaButtonList } from '../../components/NativeRichMediaButtonList';
 import { NativeRichMediaCloseChip } from '../../components/NativeRichMediaCloseChip';
-import { NativeRichMediaContentImg } from '../../components/NativeRichMediaContentImg';
+import { NativeRichMediaCoverImg } from '../../components/NativeRichMediaCoverImg';
 import { NativeRichMediaText } from '../../components/NativeRichMediaText';
 import { NativeRichMediaTitle } from '../../components/NativeRichMediaTitle';
 import { asButtonList, asTextValue } from '../../helpers';
@@ -17,10 +17,11 @@ export function NativeRichMediaSheetView(props) {
   const message = asTextValue(block.message);
   return _jsxs(Sheet, {
     "$background": block.background,
-    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaContentImg, {
+    children: [_jsx(Handle, {}), block.image && _jsx(NativeRichMediaCoverImg, {
       url: block.image,
       margin: "26px 14px 0",
-      borderRadius: 18
+      borderRadius: 18,
+      heightRatio: 0.58
     }), (title.text || message.text) && _jsxs(Vertical, {
       "$padding": (block.image ? '16px' : '20px') + ' 24px 0',
       "$gap": 4,

package/RichMessageEditor/slate/SlateEditor.styled.d.ts

@@ -8,7 +8,7 @@ export declare const EditableStyled: import("styled-components").StyledComponent
     renderElement?: ((props: import("slate-react").RenderElementProps) => React.JSX.Element) | undefined;
     renderChunk?: ((props: import("slate-react").RenderChunkProps) => React.JSX.Element) | undefined;
     renderLeaf?: ((props: import("slate-react").RenderLeafProps) => React.JSX.Element) | undefined;
-    renderText?: ((props: import("slate-react/dist/components/editable").RenderTextProps) => React.JSX.Element) | undefined;
+    renderText?: ((props: import("slate-react").RenderTextProps) => React.JSX.Element) | undefined;
     renderPlaceholder?: ((props: import("slate-react").RenderPlaceholderProps) => React.JSX.Element) | undefined;
     scrollSelectionIntoView?: ((editor: import("slate-react").ReactEditor, domRange: Range) => void) | undefined;
     as?: React.ElementType<any> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.1.181",
+  "version": "1.1.183",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -62,9 +62,9 @@
     "polished": "^4.3.1",
     "react-select": "^5.10.0",
     "react-transition-group": "^4.4.5",
-    "slate": "^0.124.0",
+    "slate": "^0.126.0",
     "slate-history": "^0.113.1",
-    "slate-react": "^0.124.0"
+    "slate-react": "^0.126.0"
   },
   "peerDependencies": {
     "react": "^16.14.0 || ^18.3.1",