@cntrl-site/sdk-nextjs 1.9.53-0 → 1.9.53-1

package/lib/components/Section/Section.js

@@ -18,7 +18,8 @@ const checkOverflowClipSupport_1 = require("../../utils/checkOverflowClipSupport
 const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const Section = ({ section, data, children, zIndex }) => {
     var _a;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-section-${section.id}`;
     const sectionRef = (0, react_1.useRef)(null);
     const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js

@@ -27,7 +27,8 @@ const stylesMap = {
 };
 const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-codeembed-${item.id}`;
     const { layouts, fonts } = (0, useCntrlContext_1.useCntrlContext)();
     const fontGoogleTags = fonts === null || fonts === void 0 ? void 0 : fonts.google;
     const fontAdobeTags = fonts === null || fonts === void 0 ? void 0 : fonts.adobe;

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

@@ -25,7 +25,8 @@ const useItemArea_1 = require("../useItemArea");
 const noop = () => null;
 const CompoundChild = ({ item, sectionId, isParentVisible = true }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-compound-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();
     const exemplary = (0, useExemplary_1.useExemplary)();

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

@@ -19,7 +19,8 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ItemGeometryContext_1 = require("../../../ItemGeometry/ItemGeometryContext");
 const CompoundItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-compounditem-${item.id}`;
     const { items } = item;
     const itemIds = items ? items.map(item => item.id) : [];
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/components/items/EmbedVideoItem/VimeoEmbed.js

@@ -28,7 +28,8 @@ const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const VimeoEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-vimeo-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { radius: itemRadius, blur: itemBlur, opacity: itemOpacity } = (0, useEmbedVideoItem_1.useEmbedVideoItem)(item, sectionId);
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js

@@ -20,7 +20,8 @@ const useLayoutContext_1 = require("../../useLayoutContext");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const YoutubeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-youtube-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { url } = item.commonParams;
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/FileItem/ImageItem.js

@@ -22,7 +22,8 @@ const getFill_1 = require("../../../utils/getFill");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ImageItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-image-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, opacity: itemOpacity, strokeFill: itemStrokeFill, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);

package/lib/components/items/FileItem/VideoItem.js

@@ -23,7 +23,8 @@ const getFill_1 = require("../../../utils/getFill");
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const VideoItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-video-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, opacity: itemOpacity, blur: itemBlur } = (0, useFileItem_1.useFileItem)(item, sectionId);

package/lib/components/items/GroupItem/GroupItem.js

@@ -20,7 +20,8 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const ItemGeometryContext_1 = require("../../../ItemGeometry/ItemGeometryContext");
 const GroupItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
     var _a, _b, _c, _d, _e, _f;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-group-${item.id}`;
     const { items } = item;
     const itemIds = items ? items.map(item => item.id) : [];
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/components/items/Item.js

@@ -40,7 +40,8 @@ const Item = ({ item, sectionId, articleHeight, isParentVisible = true, isInGrou
     const itemInnerRef = (0, react_1.useRef)(null);
     const rectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const keyframesRepo = (0, react_1.useContext)(KeyframesContext_1.KeyframesContext);
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-item-${item.id}`;
     const keyframes = (0, react_1.useMemo)(() => keyframesRepo.getItemKeyframes(item.id), [keyframesRepo, item.id]);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const layout = (0, useLayoutContext_1.useLayoutContext)();

package/lib/components/items/RectangleItem/RectangleItem.js

@@ -20,7 +20,8 @@ const areFillsVisible_1 = require("../../../utils/areFillsVisible/areFillsVisibl
 const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RectangleItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-rect-${item.id}`;
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const { fill: itemFill, radius: itemRadius, strokeWidth: itemStrokeWidth, strokeFill: itemStrokeFill, blur: itemBlur, backdropBlur: itemBackdropBlur } = (0, useRectangleItem_1.useRectangleItem)(item, sectionId);
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -22,7 +22,8 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RichTextGeometryController_1 = require("../../../ItemGeometry/RichTextGeometryController");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d;
-    const id = (0, react_1.useId)();
+    const reactId = (0, react_1.useId)();
+    const id = `${reactId}-richtext-${item.id}`;
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);

package/package.json

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

package/src/components/Section/Section.tsx

@@ -26,7 +26,8 @@ interface Props {
 }
 
 export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-section-${section.id}`;
   const sectionRef = useRef<HTMLDivElement | null>(null);
   const { layouts, customSections } = useCntrlContext();
   const layout = useLayoutContext();

package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx

@@ -22,7 +22,8 @@ const stylesMap = {
 };
 
 export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-codeembed-${item.id}`;
   const { layouts, fonts } = useCntrlContext();
   const fontGoogleTags = fonts?.google;
   const fontAdobeTags = fonts?.adobe;

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

@@ -36,7 +36,8 @@ interface ChildItemProps {
 const noop = () => null;
 
 export const CompoundChild: FC<ChildItemProps> = ({ item, sectionId, isParentVisible = true }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-compound-${item.id}`;
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();
   const exemplary = useExemplary();

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

@@ -13,7 +13,8 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
 
 export const CompoundItem: FC<ItemProps<TCompoundItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-compounditem-${item.id}`;
   const { items } = item;
   const itemIds = items ? items.map(item => item.id) : [];
   const itemAngle = useItemAngle(item, sectionId);

package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx

@@ -15,7 +15,8 @@ import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-vimeo-${item.id}`;
   const { layouts } = useCntrlContext();
   const {
     radius: itemRadius,

package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx

@@ -15,7 +15,8 @@ import { useLayoutContext } from '../../useLayoutContext';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-youtube-${item.id}`;
   const { layouts } = useCntrlContext();
   const { url } = item.commonParams;
   const layoutId = useLayoutContext();

package/src/components/items/FileItem/ImageItem.tsx

@@ -16,7 +16,8 @@ import { getFill } from '../../../utils/getFill';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-image-${item.id}`;
   const { layouts } = useCntrlContext();
   const layoutId = useLayoutContext();
   const {

package/src/components/items/FileItem/VideoItem.tsx

@@ -17,7 +17,8 @@ import { getFill } from '../../../utils/getFill';
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-video-${item.id}`;
   const { layouts } = useCntrlContext();
   const layoutId = useLayoutContext();
   const {

package/src/components/items/GroupItem/GroupItem.tsx

@@ -13,7 +13,8 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { ItemGeometryContext } from '../../../ItemGeometry/ItemGeometryContext';
 
 export const GroupItem: FC<ItemProps<TGroupItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange, isInCompound }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-group-${item.id}`;
   const { items } = item;
   const itemIds = items ? items.map(item => item.id) : [];
   const itemAngle = useItemAngle(item, sectionId);

package/src/components/items/Item.tsx

@@ -68,7 +68,8 @@ export const Item: FC<ItemWrapperProps> = ({ item, sectionId, articleHeight, isP
   const itemInnerRef = useRef<HTMLDivElement | null>(null);
   const rectObserver = useContext(ArticleRectContext);
   const keyframesRepo = useContext(KeyframesContext);
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-item-${item.id}`;
   const keyframes = useMemo(() => keyframesRepo.getItemKeyframes(item.id), [keyframesRepo, item.id]);
   const { layouts } = useCntrlContext();
   const layout = useLayoutContext();

package/src/components/items/RectangleItem/RectangleItem.tsx

@@ -14,7 +14,8 @@ import { areFillsVisible } from '../../../utils/areFillsVisible/areFillsVisible'
 import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-rect-${item.id}`;
   const { layouts } = useCntrlContext();
   const {
     fill: itemFill,

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -16,7 +16,8 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
-  const id = useId();
+  const reactId = useId();
+  const id = `${reactId}-richtext-${item.id}`;
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
   const itemAngle = useItemAngle(item, sectionId);