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

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

@@ -38,7 +38,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
     const commonParameters = item.commonParams.parameters;
     const parameters = layoutParameters ? Object.assign(Object.assign({}, layoutParameters), { settings: Object.assign(Object.assign({}, layoutParameters.settings), commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.settings) }) : undefined;
-    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_f = item.link) === null || _f === void 0 ? void 0 : _f.url, target: (_g = item.link) === null || _g === void 0 ? void 0 : _g.target, children: (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(Object.assign({}, (opacity !== undefined
+    return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_f = item.link) === null || _f === void 0 ? void 0 : _f.url, target: (_g = item.link) === null || _g === void 0 ? void 0 : _g.target, pointerEvents: "none", children: (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(Object.assign({}, (opacity !== undefined
                         ? { opacity: layout == null ? 0 : opacity }
                         : layout == null ? { opacity: 0 } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition: (_h = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _h !== void 0 ? _h : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
                             itemId: item.id,
@@ -47,7 +47,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
         .custom-component-${item.id} {
           width: 100%;
           height: 100%;
-          pointer-events: auto;
+          pointer-events: none;
         }
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
                         return (`

package/lib/components/items/LinkWrapper.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const LinkWrapper = ({ url, children, target }) => {
+const LinkWrapper = ({ url, children, target, pointerEvents }) => {
     const validUrl = url && buildValidUrl(url);
     const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
-    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+    return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { style: pointerEvents !== undefined ? { pointerEvents } : undefined, children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 };
 exports.LinkWrapper = LinkWrapper;
 function buildValidUrl(url) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.93-0",
+  "version": "1.9.93-1",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
   "dependencies": {
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
-    "@cntrl-site/components": "^1.0.43-alpha.2",
+    "@cntrl-site/components": "^1.0.43-alpha.3",
     "@cntrl-site/effects": "^1.4.2",
     "@cntrl-site/sdk": "^1.28.0",
     "@types/vimeo__player": "^2.18.0",

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

@@ -37,7 +37,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   } : undefined;
 
   return (
-    <LinkWrapper url={item.link?.url} target={item.link?.target}>
+    <LinkWrapper url={item.link?.url} target={item.link?.target} pointerEvents="none">
       <>
         <div
           className={`custom-component-${item.id}`}
@@ -69,7 +69,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
         .custom-component-${item.id} {
           width: 100%;
           height: 100%;
-          pointer-events: auto;
+          pointer-events: none;
         }
         ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
         return (`

package/src/components/items/LinkWrapper.tsx

@@ -1,18 +1,20 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { CSSProperties, ReactElement, ReactNode } from 'react';
 
 interface Props {
   url?: string;
   children: ReactElement | ReactNode[];
   target?: string;
+  pointerEvents?: CSSProperties['pointerEvents'];
 }
 
-export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
+export const LinkWrapper: React.FC<Props> = ({ url, children, target, pointerEvents }) => {
   const validUrl = url && buildValidUrl(url);
   const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
   return url ? (
     <a
       href={validUrl}
       {...targetParams}
+      style={pointerEvents !== undefined ? { pointerEvents } : undefined}
     >
       {children}
     </a>