@cntrl-site/sdk-nextjs 1.8.10 → 1.8.12

package/lib/common/useRegisterResize.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRegisterResize = void 0;
 const react_1 = require("react");
 const resize_observer_polyfill_1 = __importDefault(require("resize-observer-polyfill"));
-const useRegisterResize = (ref, onResize) => {
+function useRegisterResize(ref, onResize) {
     (0, react_1.useEffect)(() => {
         if (!ref || !onResize)
             return;
@@ -19,5 +19,5 @@ const useRegisterResize = (ref, onResize) => {
             observer.unobserve(ref);
         };
     }, [ref, onResize]);
-};
+}
 exports.useRegisterResize = useRegisterResize;

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

@@ -66,7 +66,12 @@ const CodeEmbedItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilit
       ${fontGoogleTags}
       ${fontAdobeTags}
       <style>
-        ${fontCustomTags}
+      ${fontCustomTags}
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
       </style>
       ${item.commonParams.html}
     `;

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

@@ -15,7 +15,7 @@ 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;
+    var _a, _b, _c, _d;
     const sdk = (0, useCntrlContext_1.useCntrlContext)();
     const { layouts } = sdk;
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
@@ -23,14 +23,15 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
     const layoutValues = [item.area, item.layoutParams];
     const component = sdk.getComponent(item.commonParams.componentId);
     const [ref, setRef] = (0, react_1.useState)(null);
-    const { opacity: itemOpacity } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
+    const { opacity: itemOpacity, blur: itemBlur } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
+    const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle, blur']);
     const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
     const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
+    const blur = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _c === void 0 ? void 0 : _c.blur, itemBlur);
     const Element = component ? component.element : undefined;
     const parameters = layout ? item.layoutParams[layout].parameters : undefined;
-    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: parameters && Element && ((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: `
+    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(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), { transition: (_d = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _d !== void 0 ? _d : 'none' }), children: parameters && Element && ((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: `
       .custom-component-${item.id} {
         width: 100%;
         height: 100%;
@@ -41,6 +42,7 @@ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
           .custom-component-${item.id} {
             transform: rotate(${area.angle}deg);
             opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
           }
         `);
                 })}` })] }));

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

@@ -12,8 +12,15 @@ function useComponentItem(item, sectionId) {
         const layoutParams = item.layoutParams[layoutId];
         return 'opacity' in layoutParams ? layoutParams.opacity : 1;
     }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
+    const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
+        if (!layoutId)
+            return;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'blur' in layoutParams ? layoutParams.blur : 0;
+    }, (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined, sectionId, [layoutId]);
     return {
-        opacity
+        opacity,
+        blur
     };
 }
 exports.useComponentItem = useComponentItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.10",
+  "version": "1.8.12",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.22.13",
+    "@cntrl-site/sdk": "^1.22.15",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/common/useRegisterResize.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: number) => void) => {
+export function useRegisterResize(ref: HTMLElement | null, onResize?: (height: number) => void) {
   useEffect(() => {
     if (!ref || !onResize) return;
     const observer = new ResizeObserver((entries) => {
@@ -13,5 +13,4 @@ export const useRegisterResize = (ref: HTMLElement | null, onResize?: (height: n
       observer.unobserve(ref);
     };
   }, [ref, onResize]);
-};
-
+}

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

@@ -60,7 +60,12 @@ export const CodeEmbedItem: FC<ItemProps<TCodeEmbedItem>> = ({ item, sectionId,
       ${fontGoogleTags}
       ${fontAdobeTags}
       <style>
-        ${fontCustomTags}
+      ${fontCustomTags}
+        html, body {
+          height: 100%;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
       </style>
       ${item.commonParams.html}
     `;

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

@@ -17,11 +17,12 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const component = sdk.getComponent(item.commonParams.componentId);
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  const { opacity: itemOpacity } = useComponentItem(item, sectionId);
+  const { opacity: itemOpacity, blur: itemBlur } = useComponentItem(item, sectionId);
   useRegisterResize(ref, onResize);
-  const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
+  const stateParams = interactionCtrl?.getState(['opacity', 'angle, blur']);
   const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
   const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
+  const blur = getStyleFromItemStateAndParams(stateParams?.styles?.blur, itemBlur);
   const Element = component ? component.element : undefined;
   const parameters = layout ? item.layoutParams[layout].parameters : undefined;
   return (
@@ -32,6 +33,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
         style={{
           ...(opacity !== undefined ? { opacity } : {}),
           ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
+          ...(blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {}),
           transition: stateParams?.transition ?? 'none'
         }}
       >
@@ -53,6 +55,7 @@ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId,
           .custom-component-${item.id} {
             transform: rotate(${area.angle}deg);
             opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
           }
         `);
     })}`}

package/src/components/items/ComponentItem/useComponentItem.ts

@@ -16,8 +16,20 @@ export function useComponentItem(item: ComponentItem, sectionId: string) {
     sectionId,
     [layoutId]
   );
-
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
   return {
-    opacity
+    opacity,
+    blur
   };
 }