@cntrl-site/sdk-nextjs 1.8.12 → 1.8.14

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 (20) hide show
  1. package/cntrl-site-sdk-nextjs-1.8.14.tgz +0 -0
  2. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +2 -2
  3. package/lib/components/items/ComponentItem/ComponentItem.js +3 -3
  4. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +2 -2
  5. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +2 -2
  6. package/lib/components/items/FileItem/ImageItem.js +2 -2
  7. package/lib/components/items/FileItem/VideoItem.js +2 -2
  8. package/lib/components/items/GroupItem/GroupItem.js +2 -2
  9. package/lib/components/items/RectangleItem/RectangleItem.js +2 -2
  10. package/lib/components/items/RichTextItem/RichTextItem.js +2 -2
  11. package/package.json +1 -1
  12. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +2 -2
  13. package/src/components/items/ComponentItem/ComponentItem.tsx +3 -3
  14. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +2 -2
  15. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +2 -2
  16. package/src/components/items/FileItem/ImageItem.tsx +2 -2
  17. package/src/components/items/FileItem/VideoItem.tsx +2 -2
  18. package/src/components/items/GroupItem/GroupItem.tsx +2 -2
  19. package/src/components/items/RectangleItem/RectangleItem.tsx +2 -2
  20. package/src/components/items/RichTextItem/RichTextItem.tsx +2 -2
package/cntrl-site-sdk-nextjs-1.8.14.tgz ADDED
Binary file
package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js CHANGED
@@ -81,7 +81,7 @@ 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) translateZ(0)` } : {})), (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: `
85
85
  .embed-wrapper-${item.id} {
86
86
  position: absolute;
87
87
  width: 100%;
@@ -97,7 +97,7 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
97
97
  return (`
98
98
  .embed-wrapper-${item.id} {
99
99
  opacity: ${layoutParams.opacity};
100
- transform: rotate(${area.angle}deg);
100
+ transform: rotate(${area.angle}deg) translateZ(0);
101
101
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
102
102
  }
103
103
  .embed-${item.id} {
package/lib/components/items/ComponentItem/ComponentItem.js CHANGED
@@ -25,13 +25,13 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
25
25
  const [ref, setRef] = (0, react_1.useState)(null);
26
26
  const { opacity: itemOpacity, blur: itemBlur } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
27
27
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
28
- const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle, blur']);
28
+ const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle', 'blur']);
29
29
  const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
30
30
  const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
31
31
  const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
32
32
  const Element = component ? component.element : undefined;
33
33
  const parameters = layout ? item.layoutParams[layout].parameters : undefined;
34
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${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: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
34
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
35
35
  .custom-component-${item.id} {
36
36
  width: 100%;
37
37
  height: 100%;
@@ -40,7 +40,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
40
40
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
41
41
  return (`
42
42
  .custom-component-${item.id} {
43
- transform: rotate(${area.angle}deg);
43
+ transform: rotate(${area.angle}deg) translateZ(0);
44
44
  opacity: ${layoutParams.opacity};
45
45
  filter: blur(${layoutParams.blur}vw);
46
46
  }
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js CHANGED
@@ -112,7 +112,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
112
112
  }
113
113
  });
114
114
  }, [interactionCtrl, vimeoPlayer]);
115
- 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: () => {
115
+ 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) translateZ(0)` } : {})), (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: () => {
116
116
  if (!vimeoPlayer || play !== 'on-hover')
117
117
  return;
118
118
  vimeoPlayer.play();
@@ -152,7 +152,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
152
152
  return (`
153
153
  .embed-video-wrapper-${item.id} {
154
154
  opacity: ${layoutParams.opacity};
155
- transform: rotate(${area.angle}deg);
155
+ transform: rotate(${area.angle}deg) translateZ(0);
156
156
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
157
157
  }
158
158
  .embed-video-wrapper-${item.id} .embed-video {
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js CHANGED
@@ -118,7 +118,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
118
118
  if (!player || play !== 'on-hover')
119
119
  return;
120
120
  player.pauseVideo();
121
- }, 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: {
121
+ }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {})), (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: {
122
122
  display: isCoverVisible ? 'block' : 'none',
123
123
  cursor: 'pointer',
124
124
  position: 'absolute',
@@ -148,7 +148,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
148
148
  return (`
149
149
  .embed-youtube-video-wrapper-${item.id} {
150
150
  opacity: ${layoutParams.opacity};
151
- transform: rotate(${area.angle}deg);
151
+ transform: rotate(${area.angle}deg) translateZ(0);
152
152
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
153
153
  }
154
154
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
package/lib/components/items/FileItem/ImageItem.js CHANGED
@@ -65,7 +65,7 @@ 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) translateZ(0)` } : {})), (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
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} {
@@ -97,7 +97,7 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
97
97
  return (`
98
98
  .image-wrapper-${item.id} {
99
99
  opacity: ${layoutParams.opacity};
100
- transform: rotate(${area.angle}deg);
100
+ transform: rotate(${area.angle}deg) translateZ(0);
101
101
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
102
102
  }
103
103
  .image-${item.id} {
package/lib/components/items/FileItem/VideoItem.js CHANGED
@@ -69,7 +69,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
69
69
  (0, react_1.useEffect)(() => {
70
70
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
71
71
  }, [isInteractive, onVisibilityChange]);
72
- 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.jsx)("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
72
+ 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.jsx)("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) translateZ(0)` } : {})), (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
73
73
  ? ((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}` }))
74
74
  : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: hasGLEffect && isFXAllowed
75
75
  ? ((0, jsx_runtime_1.jsx)("canvas", { style: inlineStyles, ref: fxCanvas, className: `video-canvas video-${item.id}`, width: rectWidth, height: rectHeight }))
@@ -110,7 +110,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
110
110
  return (`
111
111
  .video-wrapper-${item.id} {
112
112
  opacity: ${layoutParams.opacity};
113
- transform: rotate(${area.angle}deg);
113
+ transform: rotate(${area.angle}deg) translateZ(0);
114
114
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
115
115
  }
116
116
  .video-${item.id} {
package/lib/components/items/GroupItem/GroupItem.js CHANGED
@@ -34,7 +34,7 @@ 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) translateZ(0)` } : {})), (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: `
38
38
  .group-${item.id} {
39
39
  position: absolute;
40
40
  width: 100%;
@@ -45,7 +45,7 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
45
45
  return (`
46
46
  .group-${item.id} {
47
47
  opacity: ${layoutParams.opacity};
48
- transform: rotate(${area.angle}deg);
48
+ transform: rotate(${area.angle}deg) translateZ(0);
49
49
  }
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({}, (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) translateZ(0)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (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} {
@@ -61,7 +61,7 @@ const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
61
61
  border-color: ${color_1.CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
62
62
  border-radius: ${layoutParams.radius * 100}vw;
63
63
  border-width: ${layoutParams.strokeWidth * 100}vw;
64
- transform: rotate(${area.angle}deg);
64
+ transform: rotate(${area.angle}deg) translateZ(0);
65
65
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
66
66
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
67
67
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
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) translateZ(0)` } : {})), (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]) => {
57
57
  const color = color_1.CntrlColor.parse(layoutParams.color);
58
58
  return (`
59
59
  .rich-text-wrapper-${item.id} {
@@ -67,7 +67,7 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
67
67
  vertical-align: ${layoutParams.verticalAlign};
68
68
  font-variant: ${layoutParams.fontVariant};
69
69
  color: ${color.fmt('rgba')};
70
- transform: rotate(${area.angle}deg);
70
+ transform: rotate(${area.angle}deg) translateZ(0);
71
71
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
72
72
  text-transform: ${layoutParams.textTransform};
73
73
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.12",
3
+ "version": "1.8.14",
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
@@ -82,7 +82,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
82
82
  <div
83
83
  className={`embed-wrapper-${item.id}`}
84
84
  style={{
85
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
85
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
86
86
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
87
87
  ...(opacity !== undefined ? { opacity } : {}),
88
88
  transition: stateParams?.transition ?? 'none'
@@ -122,7 +122,7 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
122
122
  return (`
123
123
  .embed-wrapper-${item.id} {
124
124
  opacity: ${layoutParams.opacity};
125
- transform: rotate(${area.angle}deg);
125
+ transform: rotate(${area.angle}deg) translateZ(0);
126
126
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
127
127
  }
128
128
  .embed-${item.id} {
package/src/components/items/ComponentItem/ComponentItem.tsx CHANGED
@@ -19,7 +19,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
19
19
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
20
20
  const { opacity: itemOpacity, blur: itemBlur } = useComponentItem(item, sectionId);
21
21
  useRegisterResize(ref, onResize);
22
- const stateParams = interactionCtrl?.getState(['opacity', 'angle, blur']);
22
+ const stateParams = interactionCtrl?.getState(['opacity', 'angle', 'blur']);
23
23
  const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
24
24
  const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
25
25
  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
@@ -32,7 +32,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
32
32
  ref={setRef}
33
33
  style={{
34
34
  ...(opacity !== undefined ? { opacity } : {}),
35
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
35
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
36
36
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
37
37
  transition: stateParams?.transition ?? 'none'
38
38
  }}
@@ -53,7 +53,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
53
53
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
54
54
  return (`
55
55
  .custom-component-${item.id} {
56
- transform: rotate(${area.angle}deg);
56
+ transform: rotate(${area.angle}deg) translateZ(0);
57
57
  opacity: ${layoutParams.opacity};
58
58
  filter: blur(${layoutParams.blur}vw);
59
59
  }
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED
@@ -113,7 +113,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
113
113
  ref={setRef}
114
114
  style={{
115
115
  ...(opacity !== undefined ? { opacity } : {}),
116
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
116
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
117
117
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
118
118
  transition: wrapperStateParams?.transition ?? 'none'
119
119
  }}
@@ -187,7 +187,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
187
187
  return (`
188
188
  .embed-video-wrapper-${item.id} {
189
189
  opacity: ${layoutParams.opacity};
190
- transform: rotate(${area.angle}deg);
190
+ transform: rotate(${area.angle}deg) translateZ(0);
191
191
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
192
192
  }
193
193
  .embed-video-wrapper-${item.id} .embed-video {
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED
@@ -119,7 +119,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
119
119
  }}
120
120
  style={{
121
121
  ...(opacity !== undefined ? { opacity } : {}),
122
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
122
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
123
123
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
124
124
  transition: wrapperStateParams?.transition ?? 'none'
125
125
  }}
@@ -172,7 +172,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
172
172
  return (`
173
173
  .embed-youtube-video-wrapper-${item.id} {
174
174
  opacity: ${layoutParams.opacity};
175
- transform: rotate(${area.angle}deg);
175
+ transform: rotate(${area.angle}deg) translateZ(0);
176
176
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
177
177
  }
178
178
  .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
package/src/components/items/FileItem/ImageItem.tsx CHANGED
@@ -85,7 +85,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
85
85
  ref={setWrapperRef}
86
86
  style={{
87
87
  ...(opacity !== undefined ? { opacity } : {}),
88
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
88
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
89
89
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
90
90
  transition: wrapperStateParams?.transition ?? 'none'
91
91
  }}
@@ -139,7 +139,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
139
139
  return (`
140
140
  .image-wrapper-${item.id} {
141
141
  opacity: ${layoutParams.opacity};
142
- transform: rotate(${area.angle}deg);
142
+ transform: rotate(${area.angle}deg) translateZ(0);
143
143
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
144
144
  }
145
145
  .image-${item.id} {
package/src/components/items/FileItem/VideoItem.tsx CHANGED
@@ -87,7 +87,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
87
87
  ref={setRef}
88
88
  style={{
89
89
  ...(opacity !== undefined ? { opacity } : {}),
90
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
90
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
91
91
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
92
92
  transition: wrapperStateParams?.transition ?? 'none'
93
93
  }}
@@ -169,7 +169,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
169
169
  return (`
170
170
  .video-wrapper-${item.id} {
171
171
  opacity: ${layoutParams.opacity};
172
- transform: rotate(${area.angle}deg);
172
+ transform: rotate(${area.angle}deg) translateZ(0);
173
173
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
174
174
  }
175
175
  .video-${item.id} {
package/src/components/items/GroupItem/GroupItem.tsx CHANGED
@@ -35,7 +35,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
35
35
  ref={setRef}
36
36
  style={{
37
37
  ...(opacity !== undefined ? { opacity } : {}),
38
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
38
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
39
39
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
40
40
  transition: stateParams?.transition ?? 'none'
41
41
  }}
@@ -68,7 +68,7 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
68
68
  return (`
69
69
  .group-${item.id} {
70
70
  opacity: ${layoutParams.opacity};
71
- transform: rotate(${area.angle}deg);
71
+ transform: rotate(${area.angle}deg) translateZ(0);
72
72
  }
73
73
  `);
74
74
  })}
package/src/components/items/RectangleItem/RectangleItem.tsx CHANGED
@@ -57,7 +57,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
57
57
  ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
58
58
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
59
59
  ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
60
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
60
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
61
61
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
62
62
  ...(backdropFilterValue !== undefined
63
63
  ? { backdropFilter: backdropFilterValue, WebkitBackdropFilter: backdropFilterValue }
@@ -81,7 +81,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
81
81
  border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
82
82
  border-radius: ${layoutParams.radius * 100}vw;
83
83
  border-width: ${layoutParams.strokeWidth * 100}vw;
84
- transform: rotate(${area.angle}deg);
84
+ transform: rotate(${area.angle}deg) translateZ(0);
85
85
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
86
86
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
87
87
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
package/src/components/items/RichTextItem/RichTextItem.tsx CHANGED
@@ -62,7 +62,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
62
62
  style={{
63
63
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
64
64
  ...(textColor ? { color: `${textColor.fmt('rgba')}` } : {}),
65
- ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
65
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
66
66
  ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
67
67
  ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
68
68
  ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
@@ -88,7 +88,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
88
88
  vertical-align: ${layoutParams.verticalAlign};
89
89
  font-variant: ${layoutParams.fontVariant};
90
90
  color: ${color.fmt('rgba')};
91
- transform: rotate(${area.angle}deg);
91
+ transform: rotate(${area.angle}deg) translateZ(0);
92
92
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
93
93
  text-transform: ${layoutParams.textTransform};
94
94
  }