@cntrl-site/sdk-nextjs 1.9.7 → 1.9.9

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 (11) hide show
  1. package/lib/components/Section/useSectionHeightMap.js +2 -2
  2. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +12 -4
  3. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +9 -4
  4. package/lib/components/items/Item.js +6 -4
  5. package/package.json +1 -1
  6. package/src/components/Section/useSectionHeightMap.ts +3 -3
  7. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +11 -3
  8. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +8 -3
  9. package/src/components/items/Item.tsx +6 -4
  10. package/src/components/items/useItemArea.ts +1 -1
  11. package/src/components/items/useStickyItemTop.ts +1 -1
package/lib/components/Section/useSectionHeightMap.js CHANGED
@@ -4,12 +4,12 @@ exports.getSectionHeightMap = exports.useSectionHeightData = void 0;
4
4
  const react_1 = require("react");
5
5
  const CntrlContext_1 = require("../../provider/CntrlContext");
6
6
  const Section_1 = require("./Section");
7
- const useSectionHeightData = (sectionId) => {
7
+ function useSectionHeightData(sectionId) {
8
8
  const sectionHeightContext = (0, react_1.useContext)(CntrlContext_1.CntrlContext);
9
9
  const layouts = sectionHeightContext.layouts;
10
10
  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
11
11
  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
12
- };
12
+ }
13
13
  exports.useSectionHeightData = useSectionHeightData;
14
14
  function getSectionHeightMap(sectionHeight) {
15
15
  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, (0, Section_1.getSectionHeight)(heightData)]));
package/lib/components/items/EmbedVideoItem/VimeoEmbed.js CHANGED
@@ -38,7 +38,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
38
38
  const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
39
39
  const [ref, setRef] = (0, react_1.useState)(null);
40
40
  const [imgRef, setImgRef] = (0, react_1.useState)(null);
41
- const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
41
+ const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(item.commonParams.coverUrl !== null);
42
42
  const layoutValues = [item.area, item.layoutParams];
43
43
  const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
44
44
  const frameStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['radius']);
@@ -68,6 +68,9 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
68
68
  if (layoutParams.play === 'on-click') {
69
69
  setIsCoverVisible(true);
70
70
  }
71
+ if (layoutParams.play === 'auto') {
72
+ setIsCoverVisible(false);
73
+ }
71
74
  vimeoPlayer.on('pause', (e) => {
72
75
  if (e.seconds === 0) {
73
76
  setIsCoverVisible(true);
@@ -117,14 +120,19 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
117
120
  });
118
121
  }, [interactionCtrl, vimeoPlayer]);
119
122
  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
- if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
123
+ if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible)
121
124
  return;
122
125
  vimeoPlayer.play();
123
126
  }, onMouseLeave: () => {
124
127
  if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
125
128
  return;
126
129
  vimeoPlayer.pause();
127
- }, 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: {
130
+ }, children: [item.commonParams.coverUrl && ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: setImgRef }, ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? { onClick: () => onCoverClick() } : {}), ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? { onMouseEnter: () => {
131
+ if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover')
132
+ return;
133
+ setIsCoverVisible(false);
134
+ vimeoPlayer.play();
135
+ } } : {}), { src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
128
136
  display: isCoverVisible ? 'block' : 'none',
129
137
  cursor: 'pointer',
130
138
  position: 'absolute',
@@ -133,7 +141,7 @@ const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibili
133
141
  width: '100%',
134
142
  top: '0',
135
143
  left: '0'
136
- }, alt: "Cover img" })), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
144
+ }, alt: "Cover img" }))), layoutParams && (!layoutParams.controls && (layoutParams.play === 'on-click' || layoutParams.play === 'auto')) && ((0, jsx_runtime_1.jsx)("div", { onClick: handleClick, style: {
137
145
  position: 'absolute',
138
146
  height: '100%',
139
147
  width: '100%',
package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js CHANGED
@@ -29,7 +29,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
29
29
  const YT = (0, useYouTubeIframeApi_1.useYouTubeIframeApi)();
30
30
  const [div, setDiv] = (0, react_1.useState)(null);
31
31
  const [player, setPlayer] = (0, react_1.useState)(undefined);
32
- const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(false);
32
+ const [isCoverVisible, setIsCoverVisible] = (0, react_1.useState)(item.commonParams.coverUrl !== null);
33
33
  const [imgRef, setImgRef] = (0, react_1.useState)(null);
34
34
  const layoutValues = [item.area, item.layoutParams];
35
35
  const wrapperStateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['angle', 'blur', 'opacity']);
@@ -115,14 +115,19 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
115
115
  });
116
116
  }, [interactionCtrl, player]);
117
117
  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-youtube-video-wrapper-${item.id}`, onMouseEnter: () => {
118
- if (!player || !layoutParams || layoutParams.play !== 'on-hover')
118
+ if (!player || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible)
119
119
  return;
120
120
  player.playVideo();
121
121
  }, onMouseLeave: () => {
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)` } : {})), { 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: {
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", Object.assign({ ref: setImgRef }, ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-click' ? { onClick: () => onCoverClick() } : {}), ((layoutParams === null || layoutParams === void 0 ? void 0 : layoutParams.play) === 'on-hover' ? { onMouseEnter: () => {
126
+ if (!player || !layoutParams || layoutParams.play !== 'on-hover')
127
+ return;
128
+ setIsCoverVisible(false);
129
+ player.playVideo();
130
+ } } : {}), { src: (_h = item.commonParams.coverUrl) !== null && _h !== void 0 ? _h : '', style: {
126
131
  display: isCoverVisible ? 'block' : 'none',
127
132
  cursor: 'pointer',
128
133
  position: 'absolute',
@@ -132,7 +137,7 @@ const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibi
132
137
  top: '0',
133
138
  left: '0',
134
139
  zIndex: 1
135
- }, alt: "Cover img" })), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
140
+ }, alt: "Cover img" }))), (0, jsx_runtime_1.jsx)("div", { className: `embed-${item.id}`, ref: setDiv, style: Object.assign(Object.assign({}, (radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {})), { transition: (_j = frameStateParams === null || frameStateParams === void 0 ? void 0 : frameStateParams.transition) !== null && _j !== void 0 ? _j : 'none' }) })] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
136
141
  .embed-youtube-video-wrapper-${item.id},
137
142
  .embed-${item.id} {
138
143
  position: absolute;
package/lib/components/items/Item.js CHANGED
@@ -60,14 +60,16 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
60
60
  width: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.width,
61
61
  height: (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.height
62
62
  });
63
- const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
63
+ const sectionHeightLayoutMap = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
64
+ const sectionHeight = layout && sectionHeightLayoutMap[layout] ? sectionHeightLayoutMap[layout] : '0';
64
65
  const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.top);
65
66
  const layoutValues = [item.area, item.hidden];
66
67
  layoutValues.push(item.sticky);
67
- layoutValues.push(sectionHeight);
68
+ layoutValues.push(sectionHeightLayoutMap);
68
69
  if (item.layoutParams) {
69
70
  layoutValues.push(item.layoutParams);
70
71
  }
72
+ const sticky = layout ? item.sticky[layout] : undefined;
71
73
  const sizingAxis = (0, useSizing_1.useSizing)(item);
72
74
  const ItemComponent = itemsMap_1.itemsMap[item.type] || noop;
73
75
  const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
@@ -117,8 +119,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
117
119
  (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
118
120
  }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left !== undefined ? { left: `${left * 100}vw` } : {})), (top !== undefined ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
119
121
  opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
120
- top: `${stickyTop * 100}vw`,
121
- height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset',
122
+ top: sticky ? (0, getAnchoredItemTop_1.getAnchoredItemTop)(stickyTop, sectionHeight, anchorSide) : 0,
123
+ height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
122
124
  }, children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `item-${item.id}-inner`, ref: itemInnerRef, style: Object.assign(Object.assign(Object.assign({ top: `${position.y}px`, left: `${position.x}px` }, ((width !== undefined && height !== undefined)
123
125
  ? {
124
126
  width: `${sizingAxis.x === 'manual'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.7",
3
+ "version": "1.9.9",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/Section/useSectionHeightMap.ts CHANGED
@@ -3,17 +3,17 @@ import { CntrlContext } from '../../provider/CntrlContext';
3
3
  import { Layout, SectionHeight } from '@cntrl-site/sdk';
4
4
  import { getSectionHeight } from './Section';
5
5
 
6
- export const useSectionHeightData = (sectionId: string): Record<string, string> => {
6
+ export function useSectionHeightData(sectionId: string): Record<string, string> {
7
7
  const sectionHeightContext = useContext(CntrlContext);
8
8
  const layouts = sectionHeightContext.layouts;
9
9
  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
10
10
  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
11
- };
11
+ }
12
12
 
13
13
  export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
14
14
  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
15
15
  }
16
16
 
17
17
  function getDefaultHeightData(layouts: Layout[]) {
18
- return layouts.reduce((acc, layout) => ({...acc, [layout.id]: '0'}), {});
18
+ return layouts.reduce((acc, layout) => ({ ...acc, [layout.id]: '0' }), {});
19
19
  }
package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx CHANGED
@@ -29,7 +29,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
29
29
  const layoutParams = layoutId ? item.layoutParams[layoutId] : null;
30
30
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
31
31
  const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
32
- const [isCoverVisible, setIsCoverVisible] = useState(false);
32
+ const [isCoverVisible, setIsCoverVisible] = useState(item.commonParams.coverUrl !== null);
33
33
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
34
34
  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
35
35
  const frameStateParams = interactionCtrl?.getState<number>(['radius']);
@@ -58,6 +58,9 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
58
58
  if (layoutParams.play === 'on-click') {
59
59
  setIsCoverVisible(true);
60
60
  }
61
+ if (layoutParams.play === 'auto') {
62
+ setIsCoverVisible(false);
63
+ }
61
64
  vimeoPlayer.on('pause', (e) => {
62
65
  if (e.seconds === 0) {
63
66
  setIsCoverVisible(true);
@@ -121,7 +124,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
121
124
  transition: wrapperStateParams?.transition ?? 'none'
122
125
  }}
123
126
  onMouseEnter={() => {
124
- if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
127
+ if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible) return;
125
128
  vimeoPlayer.play();
126
129
  }}
127
130
  onMouseLeave={() => {
@@ -132,7 +135,12 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
132
135
  {item.commonParams.coverUrl && (
133
136
  <img
134
137
  ref={setImgRef}
135
- onClick={() => onCoverClick()}
138
+ {...(layoutParams?.play === 'on-click' ? { onClick: () => onCoverClick() } : {})}
139
+ {...(layoutParams?.play === 'on-hover' ? { onMouseEnter: () => {
140
+ if (!vimeoPlayer || !layoutParams || layoutParams.play !== 'on-hover') return;
141
+ setIsCoverVisible(false);
142
+ vimeoPlayer.play();
143
+ } } : {})}
136
144
  src={item.commonParams.coverUrl ?? ''}
137
145
  style={{
138
146
  display: isCoverVisible ? 'block' : 'none',
package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx CHANGED
@@ -24,7 +24,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
24
24
  const YT = useYouTubeIframeApi();
25
25
  const [div, setDiv] = useState<HTMLDivElement | null>(null);
26
26
  const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
27
- const [isCoverVisible, setIsCoverVisible] = useState(false);
27
+ const [isCoverVisible, setIsCoverVisible] = useState(item.commonParams.coverUrl !== null);
28
28
  const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
29
29
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
30
30
  const wrapperStateParams = interactionCtrl?.getState<number>(['angle', 'blur', 'opacity']);
@@ -114,7 +114,7 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
114
114
  <div
115
115
  className={`embed-youtube-video-wrapper-${item.id}`}
116
116
  onMouseEnter={() => {
117
- if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
117
+ if (!player || !layoutParams || layoutParams.play !== 'on-hover' || isCoverVisible) return;
118
118
  player.playVideo();
119
119
  }}
120
120
  onMouseLeave={() => {
@@ -132,7 +132,12 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
132
132
  {item.commonParams.coverUrl && (
133
133
  <img
134
134
  ref={setImgRef}
135
- onClick={() => onCoverClick()}
135
+ {...(layoutParams?.play === 'on-click' ? { onClick: () => onCoverClick() } : {})}
136
+ {...(layoutParams?.play === 'on-hover' ? { onMouseEnter: () => {
137
+ if (!player || !layoutParams || layoutParams.play !== 'on-hover') return;
138
+ setIsCoverVisible(false);
139
+ player.playVideo();
140
+ } } : {})}
136
141
  src={item.commonParams.coverUrl ?? ''}
137
142
  style={{
138
143
  display: isCoverVisible ? 'block' : 'none',
package/src/components/items/Item.tsx CHANGED
@@ -90,14 +90,16 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
90
90
  width: innerStateProps?.styles?.width as number,
91
91
  height: innerStateProps?.styles?.height as number
92
92
  });
93
- const sectionHeight = useSectionHeightData(sectionId);
93
+ const sectionHeightLayoutMap = useSectionHeightData(sectionId);
94
+ const sectionHeight = layout && sectionHeightLayoutMap[layout] ? sectionHeightLayoutMap[layout] : '0';
94
95
  const stickyTop = useStickyItemTop(item, sectionId, wrapperStateProps?.styles?.top as number);
95
96
  const layoutValues: Record<string, any>[] = [item.area, item.hidden];
96
97
  layoutValues.push(item.sticky);
97
- layoutValues.push(sectionHeight);
98
+ layoutValues.push(sectionHeightLayoutMap);
98
99
  if (item.layoutParams) {
99
100
  layoutValues.push(item.layoutParams);
100
101
  }
102
+ const sticky = layout ? item.sticky[layout] : undefined;
101
103
  const sizingAxis = useSizing(item);
102
104
  const ItemComponent = itemsMap[item.type] || noop;
103
105
  const sectionTop = rectObserver ? rectObserver.getSectionTop(sectionId) : 0;
@@ -161,8 +163,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
161
163
  className={`item-${item.id}`}
162
164
  style={{
163
165
  opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
164
- top: `${stickyTop * 100}vw`,
165
- height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset',
166
+ top: sticky ? getAnchoredItemTop(stickyTop, sectionHeight, anchorSide) : 0,
167
+ height: isRichText && itemHeight !== undefined ? `${itemHeight * 100}vw` : 'unset'
166
168
  }}
167
169
  >
168
170
  <RichTextWrapper isRichText={isRichText}>
package/src/components/items/useItemArea.ts CHANGED
@@ -13,7 +13,7 @@ export function useItemArea(
13
13
  KeyframeType.Position,
14
14
  (item, layoutId) => {
15
15
  if (!layoutId) return;
16
- return item.area[layoutId]
16
+ return item.area[layoutId];
17
17
  },
18
18
  (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
19
19
  sectionId,
package/src/components/items/useStickyItemTop.ts CHANGED
@@ -2,7 +2,7 @@ import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
2
2
  import { useKeyframeValue } from '../../common/useKeyframeValue';
3
3
  import { useLayoutContext } from '../useLayoutContext';
4
4
 
5
- export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
5
+ export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
6
6
  const layoutId = useLayoutContext();
7
7
  const data = useKeyframeValue<{ top: number; left: number } | undefined>(
8
8
  item,