@cntrl-site/sdk-nextjs 1.8.35-alpha.0 → 1.8.36-alpha.0

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 (24) hide show
  1. package/lib/components/Article.js +0 -1
  2. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +2 -2
  3. package/lib/components/items/ComponentItem/ComponentItem.js +2 -2
  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/Article.tsx +0 -1
  13. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +2 -2
  14. package/src/components/items/ComponentItem/ComponentItem.tsx +2 -2
  15. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +2 -2
  16. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +2 -2
  17. package/src/components/items/FileItem/ImageItem.tsx +2 -2
  18. package/src/components/items/FileItem/VideoItem.tsx +2 -2
  19. package/src/components/items/GroupItem/GroupItem.tsx +2 -2
  20. package/src/components/items/RectangleItem/RectangleItem.tsx +2 -2
  21. package/src/components/items/RichTextItem/RichTextItem.tsx +2 -2
  22. package/src/provider/ArticleRectContext.ts +2 -2
  23. package/cntrl-site-sdk-nextjs-1.8.33.tgz +0 -0
  24. package/cntrl-site-sdk-nextjs-1.8.34.tgz +0 -0
package/lib/components/Article.js CHANGED
@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Article = void 0;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- // @ts-nocheck
9
8
  const react_1 = require("react");
10
9
  const style_1 = __importDefault(require("styled-jsx/style"));
11
10
  const Section_1 = require("./Section/Section");
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) 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: `
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: `
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) translateZ(0);
100
+ transform: rotate(${area.angle}deg);
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
@@ -31,7 +31,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
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) 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: `
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: `
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) translateZ(0);
43
+ transform: rotate(${area.angle}deg);
44
44
  opacity: ${layoutParams.opacity};
45
45
  filter: blur(${layoutParams.blur}vw);
46
46
  }
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) 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: () => {
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: () => {
120
120
  if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
121
121
  return;
122
122
  vimeoPlayer.play();
@@ -156,7 +156,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
156
156
  return (`
157
157
  .embed-video-wrapper-${item.id} {
158
158
  opacity: ${layoutParams.opacity};
159
- transform: rotate(${area.angle}deg) translateZ(0);
159
+ transform: rotate(${area.angle}deg);
160
160
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
161
161
  }
162
162
  .embed-video-wrapper-${item.id} .embed-video {
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) 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: {
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: {
126
126
  display: isCoverVisible ? 'block' : 'none',
127
127
  cursor: 'pointer',
128
128
  position: 'absolute',
@@ -152,7 +152,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
152
152
  return (`
153
153
  .embed-youtube-video-wrapper-${item.id} {
154
154
  opacity: ${layoutParams.opacity};
155
- transform: rotate(${area.angle}deg) translateZ(0);
155
+ transform: rotate(${area.angle}deg);
156
156
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
157
157
  }
158
158
  .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) 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
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
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) translateZ(0);
100
+ transform: rotate(${area.angle}deg);
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
@@ -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) 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 && ((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)` } : {})), { 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);
@@ -184,7 +184,7 @@ const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
184
184
  return (`
185
185
  .video-wrapper-${item.id} {
186
186
  opacity: ${layoutParams.opacity};
187
- transform: rotate(${area.angle}deg) translateZ(0);
187
+ transform: rotate(${area.angle}deg);
188
188
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
189
189
  }
190
190
  .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) 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: `
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: `
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) translateZ(0);
48
+ transform: rotate(${area.angle}deg);
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) translateZ(0)` } : {})), (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)` } : {})), (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) translateZ(0);
64
+ transform: rotate(${area.angle}deg);
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) 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]) => {
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]) => {
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) translateZ(0);
70
+ transform: rotate(${area.angle}deg);
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.35-alpha.0",
3
+ "version": "1.8.36-alpha.0",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/Article.tsx CHANGED
@@ -1,4 +1,3 @@
1
- // @ts-nocheck
2
1
  import { FC, useEffect, useId, useMemo, useRef, useState } from 'react';
3
2
  import JSXStyle from 'styled-jsx/style';
4
3
  import { Article as TArticle } from '@cntrl-site/sdk';
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) translateZ(0)` } : {}),
85
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
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) translateZ(0);
125
+ transform: rotate(${area.angle}deg);
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
@@ -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) translateZ(0)` } : {}),
35
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
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) translateZ(0);
56
+ transform: rotate(${area.angle}deg);
57
57
  opacity: ${layoutParams.opacity};
58
58
  filter: blur(${layoutParams.blur}vw);
59
59
  }
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED
@@ -115,7 +115,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
115
115
  ref={setRef}
116
116
  style={{
117
117
  ...(opacity !== undefined ? { opacity } : {}),
118
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
118
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
119
119
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
120
120
  transition: wrapperStateParams?.transition ?? 'none'
121
121
  }}
@@ -189,7 +189,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
189
189
  return (`
190
190
  .embed-video-wrapper-${item.id} {
191
191
  opacity: ${layoutParams.opacity};
192
- transform: rotate(${area.angle}deg) translateZ(0);
192
+ transform: rotate(${area.angle}deg);
193
193
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
194
194
  }
195
195
  .embed-video-wrapper-${item.id} .embed-video {
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED
@@ -123,7 +123,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
123
123
  }}
124
124
  style={{
125
125
  ...(opacity !== undefined ? { opacity } : {}),
126
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
126
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
127
127
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
128
128
  transition: wrapperStateParams?.transition ?? 'none'
129
129
  }}
@@ -176,7 +176,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
176
176
  return (`
177
177
  .embed-youtube-video-wrapper-${item.id} {
178
178
  opacity: ${layoutParams.opacity};
179
- transform: rotate(${area.angle}deg) translateZ(0);
179
+ transform: rotate(${area.angle}deg);
180
180
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
181
181
  }
182
182
  .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) translateZ(0)` } : {}),
88
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
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) translateZ(0);
142
+ transform: rotate(${area.angle}deg);
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
@@ -110,7 +110,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
110
110
  ref={setRef}
111
111
  style={{
112
112
  ...(opacity !== undefined ? { opacity } : {}),
113
- ...(angle !== undefined ? { transform: `rotate(${angle}deg) translateZ(0)` } : {}),
113
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
114
114
  ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
115
115
  transition: wrapperStateParams?.transition ?? 'none'
116
116
  }}
@@ -257,7 +257,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
257
257
  return (`
258
258
  .video-wrapper-${item.id} {
259
259
  opacity: ${layoutParams.opacity};
260
- transform: rotate(${area.angle}deg) translateZ(0);
260
+ transform: rotate(${area.angle}deg);
261
261
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
262
262
  }
263
263
  .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) translateZ(0)` } : {}),
38
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
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) translateZ(0);
71
+ transform: rotate(${area.angle}deg);
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) translateZ(0)` } : {}),
60
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
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) translateZ(0);
84
+ transform: rotate(${area.angle}deg);
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) translateZ(0)` } : {}),
65
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
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) translateZ(0);
91
+ transform: rotate(${area.angle}deg);
92
92
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
93
93
  text-transform: ${layoutParams.textTransform};
94
94
  }
package/src/provider/ArticleRectContext.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { createContext, Context } from 'react';
1
+ import { createContext } from 'react';
2
2
  import { ArticleRectObserver } from '../utils/ArticleRectManager/ArticleRectObserver';
3
3
 
4
- export const ArticleRectContext: Context<ArticleRectObserver | null> = createContext<ArticleRectObserver | null>(null);
4
+ export const ArticleRectContext = createContext<ArticleRectObserver | null>(null);
package/cntrl-site-sdk-nextjs-1.8.33.tgz DELETED
Binary file
package/cntrl-site-sdk-nextjs-1.8.34.tgz DELETED
Binary file