@cntrl-site/sdk-nextjs 1.7.0-alpha.10 → 1.7.0-alpha.12

package/lib/components/items/ComponentItem/ComponentItem.js

@@ -5,18 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ComponentItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const react_1 = require("react");
 const useCntrlContext_1 = require("../../../provider/useCntrlContext");
 const useComponentItem_1 = require("./useComponentItem");
 const useItemAngle_1 = require("../useItemAngle");
-const style_1 = __importDefault(require("styled-jsx/style"));
 const useRegisterResize_1 = require("../../../common/useRegisterResize");
 const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
 const useLayoutContext_1 = require("../../useLayoutContext");
 const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     var _a, _b, _c;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const id = (0, react_1.useId)();
     const { layouts } = sdk;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
     const layout = (0, useLayoutContext_1.useLayoutContext)();
@@ -32,15 +33,20 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
         return null;
     const Element = component.element;
     const parameters = item.layoutParams[layout].parameters;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: (0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters)) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
-                    return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              opacity: ${layoutParams.opacity};
-              width: 100%;
-              height: 100%;
-            }
-          `);
-                })}` })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: (0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters)) }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [" ", `
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+      }
+      ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            width: 100%;
+            height: 100%;
+          }
+        `);
+                    })}`] })] }));
 };
 exports.ComponentItem = ComponentItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.7.0-alpha.10",
+  "version": "1.7.0-alpha.12",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",

package/src/components/items/ComponentItem/ComponentItem.tsx

@@ -1,16 +1,17 @@
+import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { ComponentItem as TComponentItem, getLayoutStyles } from '@cntrl-site/sdk';
-import { FC, useState } from 'react';
+import { FC, useId, useState } from 'react';
 import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { useComponentItem } from './useComponentItem';
 import { useItemAngle } from '../useItemAngle';
-import JSXStyle from 'styled-jsx/style';
 import { useRegisterResize } from '../../../common/useRegisterResize';
 import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 import { useLayoutContext } from '../../useLayoutContext';
 
 export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
   const sdk = useCntrlContext();
+  const id = useId();
   const { layouts } = sdk;
   const itemAngle = useItemAngle(item, sectionId);
   const layout = useLayoutContext();
@@ -41,17 +42,21 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
           {...parameters}
         />
       </div>
-      <JSXStyle id={item.id}>
-        {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
-          return (`
-            .custom-component-${item.id} {
-              transform: rotate(${area.angle}deg);
-              opacity: ${layoutParams.opacity};
-              width: 100%;
-              height: 100%;
-            }
-          `);
-        })}`}
+      <JSXStyle id={id}> {`
+      .custom-component-${item.id} {
+        width: 100%;
+        height: 100%;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
+        return (`
+          .custom-component-${item.id} {
+            transform: rotate(${area.angle}deg);
+            opacity: ${layoutParams.opacity};
+            width: 100%;
+            height: 100%;
+          }
+        `);
+      })}`}
       </JSXStyle>
     </>
   );