@cntrl-site/sdk-nextjs 1.8.36 → 1.8.38-0

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/RichTextItem/RichTextItem.js +2 -2
  2. package/lib/provider/InteractionsContext.js +12 -2
  3. package/package.json +1 -1
  4. package/src/components/items/RichTextItem/RichTextItem.tsx +2 -1
  5. package/src/provider/InteractionsContext.tsx +12 -2
package/lib/components/items/RichTextItem/RichTextItem.js CHANGED
@@ -53,7 +53,7 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
53
53
  (0, react_1.useEffect)(() => {
54
54
  onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
55
55
  }, [isInteractive, onVisibilityChange]);
56
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
56
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), (blur !== 0 && blur !== undefined ? { willChange: 'transform' } : {})), { transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
57
57
  const color = color_1.CntrlColor.parse(layoutParams.color);
58
58
  return (`
59
59
  .rich-text-wrapper-${item.id} {
@@ -68,9 +68,9 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
68
68
  font-variant: ${layoutParams.fontVariant};
69
69
  color: ${color.fmt('rgba')};
70
70
  transform: rotate(${area.angle}deg);
71
- will-change: transform;
72
71
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
73
72
  text-transform: ${layoutParams.textTransform};
73
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
74
74
  }
75
75
  @supports not (color: oklch(42% 0.3 90 / 1)) {
76
76
  .rich-text-wrapper-${item.id} {
package/lib/provider/InteractionsContext.js CHANGED
@@ -27,10 +27,20 @@ const InteractionsProvider = ({ article, children }) => {
27
27
  const notifyLoad = (0, react_1.useCallback)(() => {
28
28
  if (!registry)
29
29
  return;
30
- registry.notifyLoad();
30
+ requestAnimationFrame(() => {
31
+ setTimeout(() => {
32
+ registry.notifyLoad();
33
+ }, 0);
34
+ });
31
35
  }, [registry]);
32
36
  (0, react_1.useEffect)(() => {
33
- notifyLoad();
37
+ if (document.readyState === 'complete') {
38
+ notifyLoad();
39
+ }
40
+ else {
41
+ window.addEventListener('load', notifyLoad);
42
+ }
43
+ return () => window.removeEventListener('load', notifyLoad);
34
44
  }, [notifyLoad]);
35
45
  return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
36
46
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.8.36",
3
+ "version": "1.8.38-0",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
package/src/components/items/RichTextItem/RichTextItem.tsx CHANGED
@@ -67,6 +67,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
67
67
  ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
68
68
  ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
69
69
  ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
70
+ ...(blur !== 0 && blur !== undefined ? { willChange: 'transform' } : {}),
70
71
  transition
71
72
  }}
72
73
  >
@@ -89,9 +90,9 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
89
90
  font-variant: ${layoutParams.fontVariant};
90
91
  color: ${color.fmt('rgba')};
91
92
  transform: rotate(${area.angle}deg);
92
- will-change: transform;
93
93
  filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
94
94
  text-transform: ${layoutParams.textTransform};
95
+ ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
95
96
  }
96
97
  @supports not (color: oklch(42% 0.3 90 / 1)) {
97
98
  .rich-text-wrapper-${item.id} {
package/src/provider/InteractionsContext.tsx CHANGED
@@ -29,11 +29,21 @@ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, ch
29
29
 
30
30
  const notifyLoad = useCallback(() => {
31
31
  if (!registry) return;
32
- registry.notifyLoad();
32
+ requestAnimationFrame(() => {
33
+ setTimeout(() => {
34
+ registry.notifyLoad();
35
+ }, 0);
36
+ });
33
37
  }, [registry]);
34
38
 
35
39
  useEffect(() => {
36
- notifyLoad();
40
+ if (document.readyState === 'complete') {
41
+ notifyLoad();
42
+ } else {
43
+ window.addEventListener('load', notifyLoad);
44
+ }
45
+
46
+ return () => window.removeEventListener('load', notifyLoad);
37
47
  }, [notifyLoad]);
38
48
 
39
49
  return (