@cntrl-site/sdk-nextjs 1.8.37 → 1.8.38-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +2 -2
  2. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +2 -2
  3. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +2 -2
  4. package/lib/components/items/FileItem/ImageItem.js +2 -2
  5. package/lib/components/items/FileItem/VideoItem.js +2 -2
  6. package/lib/components/items/GroupItem/GroupItem.js +2 -2
  7. package/lib/components/items/RectangleItem/RectangleItem.js +2 -2
  8. package/lib/components/items/RichTextItem/RichTextItem.js +2 -2
  9. package/package.json +1 -1
  10. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +2 -1
  11. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +2 -1
  12. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +2 -1
  13. package/src/components/items/FileItem/ImageItem.tsx +2 -1
  14. package/src/components/items/FileItem/VideoItem.tsx +2 -1
  15. package/src/components/items/GroupItem/GroupItem.tsx +3 -2
  16. package/src/components/items/RectangleItem/RectangleItem.tsx +2 -1
  17. package/src/components/items/RichTextItem/RichTextItem.tsx +2 -1
package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js CHANGED
@@ -81,11 +81,10 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
81
81
  (0, react_1.useEffect)(() => {
82
82
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
83
83
  }, [isInteractive, onVisibilityChange]);
84
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
84
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_h = item.link) === null || _h === void 0 ? void 0 : _h.url, target: (_j = item.link) === null || _j === void 0 ? void 0 : _j.target, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (opacity !== undefined ? { opacity } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_k = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _k !== void 0 ? _k : 'none' }), ref: setRef, children: item.commonParams.iframe ? ((0, jsx_runtime_1.jsx)("iframe", { "data-embed": item.id, className: `embed-${item.id}`, style: Object.assign(Object.assign({}, pos), { border: 'unset' }) })) : ((0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, style: Object.assign({}, pos), dangerouslySetInnerHTML: { __html: html } })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
85
85
  .embed-wrapper-${item.id} {
86
86
  position: absolute;
87
87
  width: 100%;
88
- will-change: transform;
89
88
  height: 100%;
90
89
  }
91
90
  .embed-${item.id} {
@@ -100,6 +99,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
100
99
  opacity: ${layoutParams.opacity};
101
100
  transform: rotate(${area.angle}deg);
102
101
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
102
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
103
103
  }
104
104
  .embed-${item.id} {
105
105
  width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js CHANGED
@@ -116,7 +116,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
116
116
  }
117
117
  });
118
118
  }, [interactionCtrl, vimeoPlayer]);
119
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
119
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_e = item.link) === null || _e === void 0 ? void 0 : _e.url, target: (_f = item.link) === null || _f === void 0 ? void 0 : _f.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `embed-video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), onMouseEnter: () => {
120
120
  if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
121
121
  return;
122
122
  vimeoPlayer.play();
@@ -144,7 +144,6 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
144
144
  position: absolute;
145
145
  width: 100%;
146
146
  height: 100%;
147
- will-change: transform;
148
147
  }
149
148
  .embed-video {
150
149
  width: 100%;
@@ -159,6 +158,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
159
158
  opacity: ${layoutParams.opacity};
160
159
  transform: rotate(${area.angle}deg);
161
160
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
161
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
162
162
  }
163
163
  .embed-video-wrapper-${item.id} .embed-video {
164
164
  border-radius: ${layoutParams.radius * 100}vw;
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js CHANGED
@@ -122,7 +122,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
122
122
  if (!player || !layoutParams || layoutParams.play !== 'on-hover')
123
123
  return;
124
124
  player.pauseVideo();
125
- }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
125
+ }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_g = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _g !== void 0 ? _g : 'none' }), children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", { ref: setImgRef, onClick: () => onCoverClick(), src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
126
126
  display: isCoverVisible ? 'block' : 'none',
127
127
  cursor: 'pointer',
128
128
  position: 'absolute',
@@ -136,7 +136,6 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
136
136
  .embed-youtube-video-wrapper-${item.id},
137
137
  .embed-${item.id} {
138
138
  position: absolute;
139
- will-change: transform;
140
139
  width: 100%;
141
140
  height: 100%;
142
141
  }
@@ -155,6 +154,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
155
154
  opacity: ${layoutParams.opacity};
156
155
  transform: rotate(${area.angle}deg);
157
156
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
157
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
158
158
  }
159
159
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
160
160
  border-radius: ${layoutParams.radius * 100}vw;
package/lib/components/items/FileItem/ImageItem.js CHANGED
@@ -65,14 +65,13 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
65
65
  (0, react_1.useEffect)(() => {
66
66
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
67
67
  }, [isInteractive, onVisibilityChange]);
68
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
68
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, ref: setWrapperRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: hasGLEffect && isFXAllowed
69
69
  ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `img-canvas image-${item.id}`, width: rectWidth, height: rectHeight }))
70
70
  : ((0, jsx_runtime_1.jsx)("img", { alt: "", className: `image image-${item.id}`, style: inlineStyles, src: item.commonParams.url })) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
71
71
  .image-wrapper-${item.id} {
72
72
  position: absolute;
73
73
  width: 100%;
74
74
  height: 100%;
75
- will-change: transform;
76
75
  box-sizing: border-box;
77
76
  display: flex;
78
77
  }
@@ -100,6 +99,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
100
99
  opacity: ${layoutParams.opacity};
101
100
  transform: rotate(${area.angle}deg);
102
101
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
102
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
103
103
  }
104
104
  .image-${item.id} {
105
105
  border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -92,7 +92,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
92
92
  observer.observe(ref);
93
93
  return () => observer.disconnect();
94
94
  }, [layoutParams, videoRef, ref, userPaused, isVideoInteracted]);
95
- return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
95
+ return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: (_l = item.link) === null || _l === void 0 ? void 0 : _l.url, target: (_m = item.link) === null || _m === void 0 ? void 0 : _m.target, children: [(0, jsx_runtime_1.jsxs)("div", { className: `video-wrapper-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_o = wrapperStateParams === null || wrapperStateParams === void 0 ? void 0 : wrapperStateParams.transition) !== null && _o !== void 0 ? _o : 'none' }), children: [hasScrollPlayback && ((0, jsx_runtime_1.jsx)(ScrollPlaybackVideo_1.ScrollPlaybackVideo, { sectionId: sectionId, src: item.commonParams.url, playbackParams: scrollPlayback, style: inlineStyles, className: `video video-playback-wrapper video-${item.id}` })), hasGLEffect && isFXAllowed && ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight })), !hasScrollPlayback && !hasGLEffect && layoutParams && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("video", { poster: (_p = item.commonParams.coverUrl) !== null && _p !== void 0 ? _p : '', ref: setVideoRef, autoPlay: layoutParams.play === 'auto', preload: "auto", onClick: () => {
96
96
  setIsVideoInteracted(true);
97
97
  }, muted: layoutParams.muted, onPlay: () => {
98
98
  setIsVideoPlaying(true);
@@ -138,7 +138,6 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
138
138
  height: 100%;
139
139
  box-sizing: border-box;
140
140
  opacity: ${opacity};
141
- will-change: transform;
142
141
  }
143
142
  .video-overlay-${item.id} {
144
143
  position: absolute;
@@ -187,6 +186,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
187
186
  opacity: ${layoutParams.opacity};
188
187
  transform: rotate(${area.angle}deg);
189
188
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
189
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
190
190
  }
191
191
  .video-${item.id} {
192
192
  border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
package/lib/components/items/GroupItem/GroupItem.js CHANGED
@@ -34,18 +34,18 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
34
34
  (0, react_1.useEffect)(() => {
35
35
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
36
36
  }, [isInteractive, onVisibilityChange]);
37
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
37
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_d = item.link) === null || _d === void 0 ? void 0 : _d.url, target: (_e = item.link) === null || _e === void 0 ? void 0 : _e.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `group-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_f = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _f !== void 0 ? _f : 'none', willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), children: items && items.map(item => isInCompound ? ((0, jsx_runtime_1.jsx)(CompoundChild_1.CompoundChild, { item: item, sectionId: sectionId, isParentVisible: isInteractive }, item.id)) : ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item, sectionId: sectionId, isParentVisible: isInteractive, isInGroup: true }, item.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
38
38
  .group-${item.id} {
39
39
  position: absolute;
40
40
  width: 100%;
41
41
  height: 100%;
42
42
  box-sizing: border-box;
43
- will-change: transform;
44
43
  }
45
44
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
46
45
  return (`
47
46
  .group-${item.id} {
48
47
  opacity: ${layoutParams.opacity};
48
+ filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
49
49
  transform: rotate(${area.angle}deg);
50
50
  }
51
51
  `);
package/lib/components/items/RectangleItem/RectangleItem.js CHANGED
@@ -44,7 +44,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
44
44
  (0, react_1.useEffect)(() => {
45
45
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
46
46
  }, [isInteractive, onVisibilityChange]);
47
- return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (backdropFilterValue !== undefined
47
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_b = item.link) === null || _b === void 0 ? void 0 : _b.url, target: (_c = item.link) === null || _c === void 0 ? void 0 : _c.target, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `rectangle-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {})), (borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {})), (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), (strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset' }), (backdropFilterValue !== undefined
48
48
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
49
49
  : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
50
50
  .rectangle-${item.id} {
@@ -62,8 +62,8 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
62
62
  border-radius: ${layoutParams.radius * 100}vw;
63
63
  border-width: ${layoutParams.strokeWidth * 100}vw;
64
64
  transform: rotate(${area.angle}deg);
65
- will-change: transform;
66
65
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
66
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
67
67
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
68
68
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
69
69
  }
package/lib/components/items/RichTextItem/RichTextItem.js CHANGED
@@ -53,7 +53,7 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
53
53
  (0, react_1.useEffect)(() => {
54
54
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
55
55
  }, [isInteractive, onVisibilityChange]);
56
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
56
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
57
57
  const color = color_1.CntrlColor.parse(layoutParams.color);
58
58
  return (`
59
59
  .rich-text-wrapper-${item.id} {
@@ -68,9 +68,9 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
68
68
  font-variant: ${layoutParams.fontVariant};
69
69
  color: ${color.fmt('rgba')};
70
70
  transform: rotate(${area.angle}deg);
71
- will-change: transform;
72
71
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
73
72
  text-transform: ${layoutParams.textTransform};
73
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
74
74
  }
75
75
  @supports not (color: oklch(42% 0.3 90 / 1)) {
76
76
  .rich-text-wrapper-${item.id} {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.37",
3
+ "version": "1.8.38-1",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx CHANGED
@@ -85,6 +85,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
85
85
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
86
86
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
87
87
  ...(opacity !== undefined ? { opacity } : {}),
88
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
88
89
  transition: stateParams?.transition ?? 'none'
89
90
  }}
90
91
  ref={setRef}
@@ -110,7 +111,6 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
110
111
  .embed-wrapper-${item.id} {
111
112
  position: absolute;
112
113
  width: 100%;
113
- will-change: transform;
114
114
  height: 100%;
115
115
  }
116
116
  .embed-${item.id} {
@@ -125,6 +125,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
125
125
  opacity: ${layoutParams.opacity};
126
126
  transform: rotate(${area.angle}deg);
127
127
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
128
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
128
129
  }
129
130
  .embed-${item.id} {
130
131
  width: ${item.commonParams.scale ? `${area.width * exemplary}px` : '100%'};
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED
@@ -117,6 +117,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
117
117
  ...(opacity !== undefined ? { opacity } : {}),
118
118
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
119
119
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
120
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
120
121
  transition: wrapperStateParams?.transition ?? 'none'
121
122
  }}
122
123
  onMouseEnter={() => {
@@ -177,7 +178,6 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
177
178
  position: absolute;
178
179
  width: 100%;
179
180
  height: 100%;
180
- will-change: transform;
181
181
  }
182
182
  .embed-video {
183
183
  width: 100%;
@@ -192,6 +192,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
192
192
  opacity: ${layoutParams.opacity};
193
193
  transform: rotate(${area.angle}deg);
194
194
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
195
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
195
196
  }
196
197
  .embed-video-wrapper-${item.id} .embed-video {
197
198
  border-radius: ${layoutParams.radius * 100}vw;
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED
@@ -125,6 +125,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
125
125
  ...(opacity !== undefined ? { opacity } : {}),
126
126
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
127
127
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
128
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
128
129
  transition: wrapperStateParams?.transition ?? 'none'
129
130
  }}
130
131
  >
@@ -160,7 +161,6 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
160
161
  .embed-youtube-video-wrapper-${item.id},
161
162
  .embed-${item.id} {
162
163
  position: absolute;
163
- will-change: transform;
164
164
  width: 100%;
165
165
  height: 100%;
166
166
  }
@@ -179,6 +179,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
179
179
  opacity: ${layoutParams.opacity};
180
180
  transform: rotate(${area.angle}deg);
181
181
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
182
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
182
183
  }
183
184
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
184
185
  border-radius: ${layoutParams.radius * 100}vw;
package/src/components/items/FileItem/ImageItem.tsx CHANGED
@@ -87,6 +87,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
87
87
  ...(opacity !== undefined ? { opacity } : {}),
88
88
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
89
89
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
90
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
90
91
  transition: wrapperStateParams?.transition ?? 'none'
91
92
  }}
92
93
  >
@@ -114,7 +115,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
114
115
  position: absolute;
115
116
  width: 100%;
116
117
  height: 100%;
117
- will-change: transform;
118
118
  box-sizing: border-box;
119
119
  display: flex;
120
120
  }
@@ -142,6 +142,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
142
142
  opacity: ${layoutParams.opacity};
143
143
  transform: rotate(${area.angle}deg);
144
144
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
145
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
145
146
  }
146
147
  .image-${item.id} {
147
148
  border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -112,6 +112,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
112
112
  ...(opacity !== undefined ? { opacity } : {}),
113
113
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
114
114
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
115
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
115
116
  transition: wrapperStateParams?.transition ?? 'none'
116
117
  }}
117
118
  >
@@ -211,7 +212,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
211
212
  height: 100%;
212
213
  box-sizing: border-box;
213
214
  opacity: ${opacity};
214
- will-change: transform;
215
215
  }
216
216
  .video-overlay-${item.id} {
217
217
  position: absolute;
@@ -260,6 +260,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
260
260
  opacity: ${layoutParams.opacity};
261
261
  transform: rotate(${area.angle}deg);
262
262
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
263
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
263
264
  }
264
265
  .video-${item.id} {
265
266
  border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
package/src/components/items/GroupItem/GroupItem.tsx CHANGED
@@ -37,7 +37,8 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
37
37
  ...(opacity !== undefined ? { opacity } : {}),
38
38
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
39
39
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
40
- transition: stateParams?.transition ?? 'none'
40
+ transition: stateParams?.transition ?? 'none',
41
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
41
42
  }}
42
43
  >
43
44
  {items && items.map(item => isInCompound ? (
@@ -63,12 +64,12 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
63
64
  width: 100%;
64
65
  height: 100%;
65
66
  box-sizing: border-box;
66
- will-change: transform;
67
67
  }
68
68
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
69
69
  return (`
70
70
  .group-${item.id} {
71
71
  opacity: ${layoutParams.opacity};
72
+ filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
72
73
  transform: rotate(${area.angle}deg);
73
74
  }
74
75
  `);
package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED
@@ -59,6 +59,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
59
59
  ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
60
60
  ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
61
61
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
62
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
62
63
  ...(backdropFilterValue !== undefined
63
64
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
64
65
  : {}
@@ -82,8 +83,8 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
82
83
  border-radius: ${layoutParams.radius * 100}vw;
83
84
  border-width: ${layoutParams.strokeWidth * 100}vw;
84
85
  transform: rotate(${area.angle}deg);
85
- will-change: transform;
86
86
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
87
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
87
88
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
88
89
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
89
90
  }
package/src/components/items/RichTextItem/RichTextItem.tsx CHANGED
@@ -67,6 +67,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
67
67
  ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
68
68
  ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
69
69
  ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
70
+ willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
70
71
  transition
71
72
  }}
72
73
  >
@@ -89,9 +90,9 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
89
90
  font-variant: ${layoutParams.fontVariant};
90
91
  color: ${color.fmt('rgba')};
91
92
  transform: rotate(${area.angle}deg);
92
- will-change: transform;
93
93
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
94
94
  text-transform: ${layoutParams.textTransform};
95
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
95
96
  }
96
97
  @supports not (color: oklch(42% 0.3 90 / 1)) {
97
98
  .rich-text-wrapper-${item.id} {