@cntrl-site/sdk-nextjs 1.6.11-alpha.0 → 1.6.11

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.
@@ -24,7 +24,7 @@ const useItemPointerEvents_1 = require("../useItemPointerEvents");
24
24
  const useItemArea_1 = require("../useItemArea");
25
25
  const noop = () => null;
26
26
  const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
27
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
27
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
28
28
  const id = (0, react_1.useId)();
29
29
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
30
30
  const layout = (0, useLayoutContext_1.useLayoutContext)();
@@ -33,13 +33,14 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
33
33
  const itemScale = (0, useItemScale_1.useItemScale)(item, sectionId);
34
34
  const interactionCtrl = (0, useItemInteractionCtrl_1.useItemInteractionCtrl)(item.id);
35
35
  const triggers = (0, useItemTriggers_1.useItemTriggers)(interactionCtrl);
36
- const stateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height', 'scale']);
36
+ const wrapperStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['top', 'left', 'width', 'height']);
37
+ const innerStateProps = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['scale']);
37
38
  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
38
39
  const { width, height, top, left } = (0, useItemArea_1.useItemArea)(item, sectionId, {
39
- top: (_c = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
40
- left: (_d = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
41
- width: (_e = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
42
- height: (_f = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _f === void 0 ? void 0 : _f.height
40
+ top: (_c = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _c === void 0 ? void 0 : _c.top,
41
+ left: (_d = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _d === void 0 ? void 0 : _d.left,
42
+ width: (_e = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _e === void 0 ? void 0 : _e.width,
43
+ height: (_f = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.styles) === null || _f === void 0 ? void 0 : _f.height
43
44
  });
44
45
  const isInitialRef = (0, react_1.useRef)(true);
45
46
  const sizingAxis = (0, useSizing_1.useSizing)(item);
@@ -49,7 +50,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
49
50
  }, []);
50
51
  const transformOrigin = compoundSettings ? ScaleAnchorMap_1.ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
51
52
  const isRichText = (0, isItemType_1.isItemType)(item, sdk_1.ArticleItemType.RichText);
52
- const scale = (_h = (_g = stateProps === null || stateProps === void 0 ? void 0 : stateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
53
+ const scale = (_h = (_g = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.styles) === null || _g === void 0 ? void 0 : _g.scale) !== null && _h !== void 0 ? _h : itemScale;
53
54
  const hasClickTriggers = (_j = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getHasTrigger(item.id, 'click')) !== null && _j !== void 0 ? _j : false;
54
55
  if (!item.compoundSettings)
55
56
  return null;
@@ -69,7 +70,7 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
69
70
  ? { height: `${sizingAxis.y === 'manual'
70
71
  ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
71
72
  : 'unset'}` }
72
- : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = stateProps === null || stateProps === void 0 ? void 0 : stateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({}, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
73
+ : {})), (compoundSettings ? { transform: `${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)}` } : {})), { transition: (_k = wrapperStateProps === null || wrapperStateProps === void 0 ? void 0 : wrapperStateProps.transition) !== null && _k !== void 0 ? _k : 'none', cursor: hasClickTriggers ? 'pointer' : 'unset', pointerEvents: allowPointerEvents ? 'auto' : 'none' }) }, triggers, { children: [(0, jsx_runtime_1.jsx)("div", { className: `item-${item.id}-inner`, style: Object.assign({ transition: (_l = innerStateProps === null || innerStateProps === void 0 ? void 0 : innerStateProps.transition) !== null && _l !== void 0 ? _l : 'none' }, (scale !== undefined ? { transform: `scale(${scale})` } : {})), children: (0, jsx_runtime_1.jsx)(RichTextWrapper_1.RichTextWrapper, { isRichText: isRichText, transformOrigin: transformOrigin, children: (0, jsx_runtime_1.jsx)(ItemComponent, { item: item, sectionId: sectionId, interactionCtrl: interactionCtrl, onVisibilityChange: handleVisibilityChange, isInCompound: true }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
73
74
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
74
75
  const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
75
76
  const scaleAnchor = area.scaleAnchor;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.6.11-alpha.0",
3
+ "version": "1.6.11",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -47,13 +47,14 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
47
47
  const itemScale = useItemScale(item, sectionId);
48
48
  const interactionCtrl = useItemInteractionCtrl(item.id);
49
49
  const triggers = useItemTriggers(interactionCtrl);
50
- const stateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height', 'scale']);
50
+ const wrapperStateProps = interactionCtrl?.getState(['top', 'left', 'width', 'height']);
51
+ const innerStateProps = interactionCtrl?.getState(['scale']);
51
52
  const compoundSettings = layout && item.compoundSettings ? item.compoundSettings[layout] : undefined;
52
53
  const { width, height, top, left } = useItemArea(item, sectionId, {
53
- top: stateProps?.styles?.top as number,
54
- left: stateProps?.styles?.left as number,
55
- width: stateProps?.styles?.width as number,
56
- height: stateProps?.styles?.height as number
54
+ top: wrapperStateProps?.styles?.top as number,
55
+ left: wrapperStateProps?.styles?.left as number,
56
+ width: wrapperStateProps?.styles?.width as number,
57
+ height: wrapperStateProps?.styles?.height as number
57
58
  });
58
59
  const isInitialRef = useRef(true);
59
60
  const sizingAxis = useSizing(item);
@@ -65,7 +66,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
65
66
 
66
67
  const transformOrigin = compoundSettings ? ScaleAnchorMap[compoundSettings.positionAnchor] : 'top left';
67
68
  const isRichText = isItemType(item, ArticleItemType.RichText);
68
- const scale = stateProps?.styles?.scale ?? itemScale;
69
+ const scale = innerStateProps?.styles?.scale ?? itemScale;
69
70
  const hasClickTriggers = interactionCtrl?.getHasTrigger(item.id, 'click') ?? false;
70
71
  if (!item.compoundSettings) return null;
71
72
  const layoutValues: Record<string, any>[] = [item.area, item.hidden, item.compoundSettings];
@@ -93,7 +94,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
93
94
  : 'unset'}` }
94
95
  : {}),
95
96
  ...(compoundSettings ? { transform: `${getCompoundTransform(compoundSettings)}` } : {}),
96
- transition: stateProps?.transition ?? 'none',
97
+ transition: wrapperStateProps?.transition ?? 'none',
97
98
  cursor: hasClickTriggers ? 'pointer' : 'unset',
98
99
  pointerEvents: allowPointerEvents ? 'auto' : 'none'
99
100
  }}
@@ -102,6 +103,7 @@ export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVis
102
103
  <div
103
104
  className={`item-${item.id}-inner`}
104
105
  style={{
106
+ transition: innerStateProps?.transition ?? 'none',
105
107
  ...(scale !== undefined ? { transform: `scale(${scale})` } : {}),
106
108
  }}
107
109
  >
Binary file