@cntrl-site/sdk-nextjs 1.8.2 → 1.8.4

package/lib/components/items/CompoundItem/CompoundChild.js

@@ -17,7 +17,7 @@ const ScaleAnchorMap_1 = require("../../../utils/ScaleAnchorMap");
 const isItemType_1 = require("../../../utils/isItemType");
 const RichTextWrapper_1 = require("../RichTextWrapper");
 const itemsMap_1 = require("../itemsMap");
-const getCompoundBondaryStyles_1 = require("../../../utils/getCompoundBondaryStyles");
+const getCompoundBoundaryStyles_1 = require("../../../utils/getCompoundBoundaryStyles");
 const useItemTriggers_1 = require("../useItemTriggers");
 const useSizing_1 = require("../useSizing");
 const useItemPointerEvents_1 = require("../useItemPointerEvents");
@@ -62,15 +62,15 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             var _a;
             e.stopPropagation();
             (_a = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.handleTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(interactionCtrl, e.propertyName);
-        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined && compoundSettings ? { top: (0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, top) } : {})), (left !== undefined && compoundSettings ? { left: (0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, left) } : {})), (width !== undefined && compoundSettings
+        }, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (top !== undefined && compoundSettings ? { top: (0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, top) } : {})), (left !== undefined && compoundSettings ? { left: (0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, left) } : {})), (width !== undefined && compoundSettings
             ? { width: `${sizingAxis.x === 'manual'
-                    ? (0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
+                    ? (0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, width, isRichText, exemplary)
                     : 'max-content'}` }
             : {})), (height !== undefined && compoundSettings
             ? { height: `${sizingAxis.y === 'manual'
-                    ? (0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, height)
+                    ? (0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, height)
                     : 'unset'}` }
-            : {})), (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: `
+            : {})), (compoundSettings ? { transform: `${(0, getCompoundBoundaryStyles_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: `
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, hidden, compoundSettings, layoutParams]) => {
                     const sizingAxis = (0, useSizing_1.parseSizing)(layoutParams.sizing);
                     const scaleAnchor = area.scaleAnchor;
@@ -83,15 +83,15 @@ const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
             }
             .item-${item.id} {
               position: absolute;
-              top: ${(0, getCompoundBondaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
-              left: ${(0, getCompoundBondaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
+              top: ${(0, getCompoundBoundaryStyles_1.getCompoundTop)(compoundSettings, area.top)};
+              left: ${(0, getCompoundBoundaryStyles_1.getCompoundLeft)(compoundSettings, area.left)};
               transition: opacity 0.2s linear 0.1s;
               display: ${hidden ? 'none' : 'block'};
               width: ${sizingAxis.x === 'manual'
-                        ? `${(0, getCompoundBondaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
+                        ? `${(0, getCompoundBoundaryStyles_1.getCompoundWidth)(compoundSettings, area.width, isRichText)}`
                         : 'max-content'};
-              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBondaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
-              transform: ${(0, getCompoundBondaryStyles_1.getCompoundTransform)(compoundSettings)};
+              height: ${sizingAxis.y === 'manual' ? `${(0, getCompoundBoundaryStyles_1.getCompoundHeight)(compoundSettings, area.height)}` : 'unset'};
+              transform: ${(0, getCompoundBoundaryStyles_1.getCompoundTransform)(compoundSettings)};
               z-index: ${area.zIndex};
             }
           `);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.2",
+  "version": "1.8.4",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.22.2",
+    "@cntrl-site/sdk": "^1.22.4",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/CompoundItem/CompoundChild.tsx

@@ -21,7 +21,7 @@ import {
   getCompoundTop,
   getCompoundTransform,
   getCompoundWidth
-} from '../../../utils/getCompoundBondaryStyles';
+} from '../../../utils/getCompoundBoundaryStyles';
 import { useItemTriggers } from '../useItemTriggers';
 import { parseSizing, useSizing } from '../useSizing';
 import { useItemPointerEvents } from '../useItemPointerEvents';

package/src/utils/{getCompoundBondaryStyles.ts → getCompoundBoundaryStyles.ts}

@@ -1,5 +1,4 @@
-import { AreaAnchor } from '@cntrl-site/sdk';
-import { DimensionMode } from '@cntrl-site/sdk/dist/types/article/ItemArea';
+import { AreaAnchor, DimensionMode } from '@cntrl-site/sdk';
 
 const positionMatrix: Record<AreaAnchor, [number, number]> = {
   [AreaAnchor.TopLeft]: [0, 0],

package/src/utils/isItemType.ts

@@ -1,5 +1,4 @@
-import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
-import { Item as TItem } from '@cntrl-site/sdk/dist/types/article/Item';
+import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
 
 export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
   return item.type === itemType;