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

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.
Files changed (5) hide show
  1. package/lib/components/items/ComponentItem/ComponentItem.js +8 -4
  2. package/lib/components/items/LinkWrapper.js +2 -2
  3. package/package.json +1 -1
  4. package/src/components/items/ComponentItem/ComponentItem.tsx +10 -2
  5. package/src/components/items/LinkWrapper.tsx +3 -3
package/lib/components/items/ComponentItem/ComponentItem.js CHANGED
@@ -17,7 +17,7 @@ const useLayoutContext_1 = require("../../useLayoutContext");
17
17
  const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
18
18
  const LinkWrapper_1 = require("../LinkWrapper");
19
19
  const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
20
- var _a, _b, _c, _d, _e, _f, _g, _h;
20
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
21
21
  const sdk = (0, useCntrlContext_1.useCntrlContext)();
22
22
  const { layouts } = sdk;
23
23
  const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -38,16 +38,20 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
38
38
  const layoutParameters = effectiveLayout ? (_e = item.layoutParams[effectiveLayout]) === null || _e === void 0 ? void 0 : _e.parameters : undefined;
39
39
  const commonParameters = item.commonParams.parameters;
40
40
  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;
41
- 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
41
+ const hasLink = Boolean((_f = item.link) === null || _f === void 0 ? void 0 : _f.url);
42
+ return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: (_g = item.link) === null || _g === void 0 ? void 0 : _g.url, target: (_h = item.link) === null || _h === void 0 ? void 0 : _h.target,
43
+ // Let the component define its own hit area (e.g. rounded button),
44
+ // so empty space around it does not activate the link.
45
+ style: hasLink ? { pointerEvents: 'none' } : undefined, 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
42
46
  ? { opacity: layout == null ? 0 : opacity }
43
- : 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: {
47
+ : 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: (_j = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _j !== void 0 ? _j : 'none' }), children: parameters && Element && ((0, jsx_runtime_1.jsx)(Element, Object.assign({ metadata: {
44
48
  itemId: item.id,
45
49
  submitUrl: sdk.getSubmitUrl(commonParameters === null || commonParameters === void 0 ? void 0 : commonParameters.pluginConfigId)
46
50
  }, portalId: "component-portal", content: item.commonParams.content }, parameters))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
47
51
  .custom-component-${item.id} {
48
52
  width: 100%;
49
53
  height: 100%;
50
- pointer-events: none;
54
+ pointer-events: ${hasLink ? 'none' : 'auto'};
51
55
  }
52
56
  ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
53
57
  return (`
package/lib/components/items/LinkWrapper.js CHANGED
@@ -2,10 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.LinkWrapper = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const LinkWrapper = ({ url, children, target, pointerEvents }) => {
5
+ const LinkWrapper = ({ url, children, target, style }) => {
6
6
  const validUrl = url && buildValidUrl(url);
7
7
  const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
8
- 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 }));
8
+ return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl, style: style }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
9
9
  };
10
10
  exports.LinkWrapper = LinkWrapper;
11
11
  function buildValidUrl(url) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.9.93-1",
3
+ "version": "1.9.93-3",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/ComponentItem/ComponentItem.tsx CHANGED
@@ -36,8 +36,16 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
36
36
  settings: { ...layoutParameters.settings, ...commonParameters?.settings }
37
37
  } : undefined;
38
38
 
39
+ const hasLink = Boolean(item.link?.url);
40
+
39
41
  return (
40
- <LinkWrapper url={item.link?.url} target={item.link?.target} pointerEvents="none">
42
+ <LinkWrapper
43
+ url={item.link?.url}
44
+ target={item.link?.target}
45
+ // Let the component define its own hit area (e.g. rounded button),
46
+ // so empty space around it does not activate the link.
47
+ style={hasLink ? { pointerEvents: 'none' } : undefined}
48
+ >
41
49
  <>
42
50
  <div
43
51
  className={`custom-component-${item.id}`}
@@ -69,7 +77,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
69
77
  .custom-component-${item.id} {
70
78
  width: 100%;
71
79
  height: 100%;
72
- pointer-events: none;
80
+ pointer-events: ${hasLink ? 'none' : 'auto'};
73
81
  }
74
82
  ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
75
83
  return (`
package/src/components/items/LinkWrapper.tsx CHANGED
@@ -4,17 +4,17 @@ interface Props {
4
4
  url?: string;
5
5
  children: ReactElement | ReactNode[];
6
6
  target?: string;
7
- pointerEvents?: CSSProperties['pointerEvents'];
7
+ style?: CSSProperties;
8
8
  }
9
9
 
10
- export const LinkWrapper: React.FC<Props> = ({ url, children, target, pointerEvents }) => {
10
+ export const LinkWrapper: React.FC<Props> = ({ url, children, target, style }) => {
11
11
  const validUrl = url && buildValidUrl(url);
12
12
  const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
13
13
  return url ? (
14
14
  <a
15
15
  href={validUrl}
16
+ style={style}
16
17
  {...targetParams}
17
- style={pointerEvents !== undefined ? { pointerEvents } : undefined}
18
18
  >
19
19
  {children}
20
20
  </a>