@cntrl-site/sdk-nextjs 1.3.1 → 1.3.3

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 (9) hide show
  1. package/cntrl-site-sdk-nextjs-1.2.0.tgz +0 -0
  2. package/cntrl-site-sdk-nextjs-1.3.3.tgz +0 -0
  3. package/lib/components/items/Item.js +6 -6
  4. package/lib/components/items/useStickyItemTop.js +2 -2
  5. package/package.json +2 -2
  6. package/src/components/items/Item.tsx +1 -1
  7. package/src/components/items/useStickyItemTop.ts +2 -2
  8. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  9. package/.idea/inspectionProfiles/Project_Default.xml +0 -15
package/cntrl-site-sdk-nextjs-1.2.0.tgz ADDED
Binary file
package/cntrl-site-sdk-nextjs-1.3.3.tgz ADDED
Binary file
package/lib/components/items/Item.js CHANGED
@@ -33,7 +33,7 @@ const stickyFix = `
33
33
  `;
34
34
  const noop = () => null;
35
35
  const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGroup = false }) => {
36
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
36
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
37
37
  const itemWrapperRef = (0, react_1.useRef)(null);
38
38
  const itemInnerRef = (0, react_1.useRef)(null);
39
39
  const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
@@ -58,7 +58,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
58
58
  height: (_d = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _d === void 0 ? void 0 : _d.height
59
59
  });
60
60
  const sectionHeight = (0, useSectionHeightMap_1.useSectionHeightData)(sectionId);
61
- const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionHeight, sectionId);
61
+ const stickyTop = (0, useStickyItemTop_1.useStickyItemTop)(item, sectionId, (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.top);
62
62
  const layoutValues = [item.area, item.hidden];
63
63
  layoutValues.push(item.sticky);
64
64
  layoutValues.push(sectionHeight);
@@ -89,13 +89,13 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
89
89
  const anchorSide = layout ? item.area[layout].anchorSide : sdk_1.AnchorSide.Top;
90
90
  const positionType = layout ? item.area[layout].positionType : sdk_1.PositionType.ScreenBased;
91
91
  const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
92
- const scale = (_f = (_e = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _e === void 0 ? void 0 : _e.scale) !== null && _f !== void 0 ? _f : itemScale;
93
- const hasClickTriggers = (_g = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _g !== void 0 ? _g : false;
92
+ const scale = (_g = (_f = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _f === void 0 ? void 0 : _f.scale) !== null && _g !== void 0 ? _g : itemScale;
93
+ const hasClickTriggers = (_h = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _h !== void 0 ? _h : false;
94
94
  return ((0, jsx_runtime_1.jsxs)("div", { className: `item-wrapper-${item.id}`, ref: itemWrapperRef, onTransitionEnd: (e) => {
95
95
  var _a;
96
96
  e.stopPropagation();
97
97
  (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
98
- }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_h = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _h !== void 0 ? _h : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
98
+ }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top ? { top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide) } : {})), (left ? { left: `${left * 100}vw` } : {})), (top ? { bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset' } : {})), (wrapperHeight !== undefined ? { height: `${wrapperHeight * 100}vw` } : {})), { transition: (_j = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _j !== void 0 ? _j : 'none' }), children: [(0, jsx_runtime_1.jsx)("div", { suppressHydrationWarning: true, className: `item-${item.id}`, style: {
99
99
  opacity: (keyframes.length !== 0 && !layout) ? 0 : 1,
100
100
  top: `${stickyTop * 100}vw`,
101
101
  height: isRichText && itemHeight ? `${itemHeight * 100}vw` : 'unset',
@@ -106,7 +106,7 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
106
106
  : `${width * 100}vw`
107
107
  : 'max-content'}`,
108
108
  height: `${sizingAxis.y === 'manual' ? `${height * 100}vw` : 'unset'}`
109
- } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_j = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _j !== void 0 ? _j : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
109
+ } : {})), (scale !== undefined ? { transform: `scale(${scale})`, 'WebkitTransform': `scale(${scale})` } : {})), { transition: (_k = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, onResize: handleItemResize, articleHeight: articleHeight, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange }) })) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
110
110
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, sticky, sectionHeight, layoutParams]) => {
111
111
  const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
112
112
  const isScreenBasedBottom = area.positionType === sdk_1.PositionType.ScreenBased && area.anchorSide === sdk_1.AnchorSide.Bottom;
package/lib/components/items/useStickyItemTop.js CHANGED
@@ -4,7 +4,7 @@ exports.useStickyItemTop = void 0;
4
4
  const sdk_1 = require("@cntrl-site/sdk");
5
5
  const useKeyframeValue_1 = require("../../common/useKeyframeValue");
6
6
  const useLayoutContext_1 = require("../useLayoutContext");
7
- function useStickyItemTop(item, sectionHeightMap, sectionId) {
7
+ function useStickyItemTop(item, sectionId, stateTop) {
8
8
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
9
9
  const data = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
10
10
  if (!layoutId)
@@ -13,6 +13,6 @@ function useStickyItemTop(item, sectionHeightMap, sectionId) {
13
13
  }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
14
14
  const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
15
15
  const sticky = layoutId ? item.sticky[layoutId] : undefined;
16
- return sticky ? top - sticky.from : 0;
16
+ return sticky ? (stateTop !== null && stateTop !== void 0 ? stateTop : top) - sticky.from : 0;
17
17
  }
18
18
  exports.useStickyItemTop = useStickyItemTop;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.3.1",
3
+ "version": "1.3.3",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -30,7 +30,7 @@
30
30
  "dependencies": {
31
31
  "@antfu/eslint-config": "^3.8.0",
32
32
  "@cntrl-site/color": "^1.0.0",
33
- "@cntrl-site/effects": "^1.3.1",
33
+ "@cntrl-site/effects": "^1.3.2",
34
34
  "@cntrl-site/sdk": "^1.15.0",
35
35
  "@types/vimeo__player": "^2.18.0",
36
36
  "@vimeo/player": "^2.25.0",
package/src/components/items/Item.tsx CHANGED
@@ -84,7 +84,7 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
84
84
  height: innerStateProps?.styles?.height as number
85
85
  });
86
86
  const sectionHeight = useSectionHeightData(sectionId);
87
- const stickyTop = useStickyItemTop(item, sectionHeight, sectionId);
87
+ const stickyTop = useStickyItemTop(item, sectionId, wrapperStateProps?.styles?.top as number);
88
88
  const layoutValues: Record<string, any>[] = [item.area, item.hidden];
89
89
  layoutValues.push(item.sticky);
90
90
  layoutValues.push(sectionHeight);
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, sectionHeightMap: Record<string, string>, sectionId: string) {
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,
@@ -17,5 +17,5 @@ export function useStickyItemTop(item: ItemAny, sectionHeightMap: Record<string,
17
17
  );
18
18
  const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
19
19
  const sticky = layoutId ? item.sticky[layoutId] : undefined;
20
- return sticky ? top - sticky.from : 0;
20
+ return sticky ? (stateTop ?? top) - sticky.from : 0;
21
21
  }
package/.idea/codeStyles/codeStyleConfig.xml DELETED
@@ -1,5 +0,0 @@
1
- <component name="ProjectCodeStyleConfiguration">
2
- <state>
3
- <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
- </state>
5
- </component>
package/.idea/inspectionProfiles/Project_Default.xml DELETED
@@ -1,15 +0,0 @@
1
- <component name="InspectionProjectProfileManager">
2
- <profile version="1.0">
3
- <option name="myName" value="Project Default" />
4
- <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
5
- <option name="myValues">
6
- <value>
7
- <list size="1">
8
- <item index="0" class="java.lang.String" itemvalue="jsx" />
9
- </list>
10
- </value>
11
- </option>
12
- <option name="myCustomValuesEnabled" value="true" />
13
- </inspection_tool>
14
- </profile>
15
- </component>