@cntrl-site/sdk-nextjs 1.8.35 → 1.8.36-alpha.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.
@@ -85,7 +85,6 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
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} {
@@ -36,7 +36,6 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
36
36
  width: 100%;
37
37
  height: 100%;
38
38
  pointer-events: auto;
39
- will-change: transform;
40
39
  }
41
40
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
42
41
  return (`
@@ -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%;
@@ -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
  }
@@ -72,7 +72,6 @@ const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
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
  }
@@ -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;
@@ -40,7 +40,6 @@ const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityCha
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 (`
@@ -160,7 +160,6 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
160
160
  .item-wrapper-${item.id} {
161
161
  position: ${area.positionType === sdk_1.PositionType.ScreenBased ? 'fixed' : 'absolute'};
162
162
  z-index: ${area.zIndex};
163
- ${!isInGroup && stickyFix}
164
163
  pointer-events: none;
165
164
  bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
166
165
  top: ${isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(area.top, area.anchorSide)};
@@ -62,7 +62,6 @@ 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'};
67
66
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
68
67
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
@@ -68,7 +68,6 @@ 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};
74
73
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.35",
3
+ "version": "1.8.36-alpha.1",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -110,7 +110,6 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
110
110
  .embed-wrapper-${item.id} {
111
111
  position: absolute;
112
112
  width: 100%;
113
- will-change: transform;
114
113
  height: 100%;
115
114
  }
116
115
  .embed-${item.id} {
@@ -49,7 +49,6 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
49
49
  width: 100%;
50
50
  height: 100%;
51
51
  pointer-events: auto;
52
- will-change: transform;
53
52
  }
54
53
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
55
54
  return (`
@@ -177,7 +177,6 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
177
177
  position: absolute;
178
178
  width: 100%;
179
179
  height: 100%;
180
- will-change: transform;
181
180
  }
182
181
  .embed-video {
183
182
  width: 100%;
@@ -160,7 +160,6 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
160
160
  .embed-youtube-video-wrapper-${item.id},
161
161
  .embed-${item.id} {
162
162
  position: absolute;
163
- will-change: transform;
164
163
  width: 100%;
165
164
  height: 100%;
166
165
  }
@@ -114,7 +114,6 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize
114
114
  position: absolute;
115
115
  width: 100%;
116
116
  height: 100%;
117
- will-change: transform;
118
117
  box-sizing: border-box;
119
118
  display: flex;
120
119
  }
@@ -211,7 +211,6 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
211
211
  height: 100%;
212
212
  box-sizing: border-box;
213
213
  opacity: ${opacity};
214
- will-change: transform;
215
214
  }
216
215
  .video-overlay-${item.id} {
217
216
  position: absolute;
@@ -63,7 +63,6 @@ export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize
63
63
  width: 100%;
64
64
  height: 100%;
65
65
  box-sizing: border-box;
66
- will-change: transform;
67
66
  }
68
67
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
69
68
  return (`
@@ -236,7 +236,6 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
236
236
  .item-wrapper-${item.id} {
237
237
  position: ${area.positionType === PositionType.ScreenBased ? 'fixed' : 'absolute'};
238
238
  z-index: ${area.zIndex};
239
- ${!isInGroup && stickyFix}
240
239
  pointer-events: none;
241
240
  bottom: ${isScreenBasedBottom ? `${-area.top * 100}vw` : 'unset'};
242
241
  top: ${isScreenBasedBottom ? 'unset' : getItemTopStyle(area.top, area.anchorSide)};
@@ -82,7 +82,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
82
82
  border-radius: ${layoutParams.radius * 100}vw;
83
83
  border-width: ${layoutParams.strokeWidth * 100}vw;
84
84
  transform: rotate(${area.angle}deg);
85
- will-change: transform;
86
85
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
87
86
  backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
88
87
  -webkit-backdrop-filter: ${layoutParams.backdropBlur !== 0 ? `blur(${layoutParams.backdropBlur * 100}vw)` : 'unset'};
@@ -89,7 +89,6 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
89
89
  font-variant: ${layoutParams.fontVariant};
90
90
  color: ${color.fmt('rgba')};
91
91
  transform: rotate(${area.angle}deg);
92
- will-change: transform;
93
92
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
94
93
  text-transform: ${layoutParams.textTransform};
95
94
  }