@gem-sdk/components 17.0.0-dev.83 → 17.0.0-dev.84

package/dist/cjs/grid/components/row/Row.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("next/head"),t=require("../ChildrenDroppable.js"),i=require("../../../video/components/HTML5Embed.js"),l=require("../../../video/common/helpers.js"),o=require("../../../video/components/LiteYouTubeEmbed.js"),a=require("@gem-sdk/system"),d=require("../../hooks/useRowSetting.js"),n=require("./common/attrs.js"),m=require("./common/classes.js"),u=require("./common/styles.js"),c=require("./common/helpers.js"),p=require("@gem-sdk/core"),y=require("../section/lazyload/LazySectionWrapper.js");exports.default=j=>{let{styles:h,setting:g,children:x}=j,{isSection:v,priority:f,as:q="div"}=g??{},k=p.useBuilderStore(e=>e.sectionIndex),{background:b}=h??{},{builderAttrs:C,bgVideo:E,isRowEmpty:w,rowClassEditorOnly:N,isRenderPlaceholderViewBox:H,isPostPurchase:R,ref:S,postPurchaseVerticalAlign:T}=d.useRowSettings(j),{rowStyle:V,backgroundBoxStyle:P,embedVideoStyle:z,sectionStyle:B}=u.getRowStyle({rowProps:j,isPostPurchase:R,type:"React"}),{rowAttr:I}=n.getAttr(j),{rowClass:L,backgroundBoxClass:M,backgroundBoxInnerClass:A,sectionClass:F,wrapperYoutubeClasses:Y,iframeYoutubeClasses:$}=m.getClass(j),_=a.createClass({[L]:!0,[N]:!0}),D=r.useMemo(()=>{if(!c.checkHasBackgroundVideo(b))return;if(E?.videoType==="html5"&&!E.videoHtml5||E?.videoType==="youtube"&&!E.video)return null;if(E?.videoType==="html5"&&E.videoHtml5)return e.jsx(i.default,{muted:!0,loop:E.loop,controls:!1,autoplay:!0,src:E.videoHtml5,title:"Video",className:"gp-relative",style:z});let r=E?.video??"",s=l.getYoutubeVideoId(r);if(!l.youtubeVideoRegex.test(r)||!s)return;let t=`&loop=${E?.loop?1:0}&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return e.jsx(o.default,{id:s,autoplay:!0,title:"",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:!1,style:z,wrapperClass:Y,iframeClass:$})},[b,E,z,$,Y]),O=r.Children.map(x,e=>!!p.isEmptyChildren(e)),W=e.jsxs("div",{ref:S,...C,...I,style:V(R),className:_,children:[!!D&&e.jsx("div",{className:M,style:P,children:e.jsx("div",{className:A,children:D})}),H?e.jsx(e.Fragment,{}):w?e.jsx(t.default,{}):r.Children.map(x,e=>r.isValidElement(e)?r.createElement(e.type,{hiddenEmptyCol:j.hiddenEmptyCol&&!p.isEmptyChildren(e)&&!O,...e.props,key:e.key,order:g?.order,layout:g?.layout,justifyContent:R?T():g?.verticalAlign}):null)]});return e.jsxs(e.Fragment,{children:[!!h?.preloadBgImage&&e.jsxs(s,{children:[!!b?.desktop?.image?.src&&e.jsx("link",{rel:"preload",href:b.desktop.image.src,as:"image"}),!!b?.tablet?.image?.src&&e.jsx("link",{rel:"preload",href:b.tablet.image.src,as:"image"}),!!b?.mobile?.image?.src&&e.jsx("link",{rel:"preload",href:b.mobile.image.src,as:"image"})]}),v?e.jsx(y.default,{priority:f||0===k,children:e.jsx(q,{className:F,style:B,children:W})}):W]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),s=require("next/head"),t=require("../ChildrenDroppable.js"),l=require("../../../video/components/HTML5Embed.js"),i=require("../../../video/common/helpers.js"),o=require("../../../video/components/LiteYouTubeEmbed.js"),a=require("@gem-sdk/system"),d=require("../../hooks/useRowSetting.js"),m=require("./common/attrs.js"),n=require("./common/classes.js"),u=require("./common/styles.js"),c=require("./common/helpers.js"),p=require("@gem-sdk/core"),y=require("../section/lazyload/LazySectionWrapper.js");exports.default=j=>{let{styles:h,setting:g,children:v}=j,{isSection:x,as:f="div"}=g??{},{background:q}=h??{},{builderAttrs:k,bgVideo:b,isRowEmpty:C,rowClassEditorOnly:E,isRenderPlaceholderViewBox:w,isPostPurchase:N,ref:H,postPurchaseVerticalAlign:R}=d.useRowSettings(j),{rowStyle:T,backgroundBoxStyle:V,embedVideoStyle:P,sectionStyle:S}=u.getRowStyle({rowProps:j,isPostPurchase:N,type:"React"}),{rowAttr:z}=m.getAttr(j),{rowClass:L,backgroundBoxClass:M,backgroundBoxInnerClass:A,sectionClass:B,wrapperYoutubeClasses:F,iframeYoutubeClasses:I}=n.getClass(j),Y=a.createClass({[L]:!0,[E]:!0}),$=r.useMemo(()=>{if(!c.checkHasBackgroundVideo(q))return;if(b?.videoType==="html5"&&!b.videoHtml5||b?.videoType==="youtube"&&!b.video)return null;if(b?.videoType==="html5"&&b.videoHtml5)return e.jsx(l.default,{muted:!0,loop:b.loop,controls:!1,autoplay:!0,src:b.videoHtml5,title:"Video",className:"gp-relative",style:P});let r=b?.video??"",s=i.getYoutubeVideoId(r);if(!i.youtubeVideoRegex.test(r)||!s)return;let t=`&loop=${b?.loop?1:0}&playlist=${s}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return e.jsx(o.default,{id:s,autoplay:!0,title:"",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:!1,style:P,wrapperClass:F,iframeClass:I})},[q,b,P,I,F]),_=r.Children.map(v,e=>!!p.isEmptyChildren(e)),D=e.jsxs("div",{ref:H,...k,...z,style:T(N),className:Y,children:[!!$&&e.jsx("div",{className:M,style:V,children:e.jsx("div",{className:A,children:$})}),w?e.jsx(e.Fragment,{}):C?e.jsx(t.default,{}):r.Children.map(v,e=>r.isValidElement(e)?r.createElement(e.type,{hiddenEmptyCol:j.hiddenEmptyCol&&!p.isEmptyChildren(e)&&!_,...e.props,key:e.key,order:g?.order,layout:g?.layout,justifyContent:N?R():g?.verticalAlign}):null)]});return e.jsxs(e.Fragment,{children:[!!h?.preloadBgImage&&e.jsxs(s,{children:[!!q?.desktop?.image?.src&&e.jsx("link",{rel:"preload",href:q.desktop.image.src,as:"image"}),!!q?.tablet?.image?.src&&e.jsx("link",{rel:"preload",href:q.tablet.image.src,as:"image"}),!!q?.mobile?.image?.src&&e.jsx("link",{rel:"preload",href:q.mobile.image.src,as:"image"})]}),x?e.jsx(y.default,{children:e.jsx(f,{className:B,style:S,children:D})}):D]})};

package/dist/cjs/grid/components/section/lazyload/LazySectionWrapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("./lazyInteractionTrigger.js"),i=require("./lazySectionCoordinator.js");exports.default=({children:n,priority:u})=>{let a=!!u,[s,c]=t.useState(()=>a||r.isInteracted()),o=t.useRef(null);return(t.useEffect(()=>{a&&requestAnimationFrame(()=>{i.startCascade(o.current?.clientHeight??0)})},[a]),t.useEffect(()=>{s&&!a&&requestAnimationFrame(()=>{i.notifySectionRendered(o.current?.clientHeight??0)})},[s,a]),t.useEffect(()=>{if(s||a)return;let e=i.enqueueSection(()=>c(!0)),t=r.subscribeInteraction(()=>c(!0));return()=>{e(),t()}},[s,a]),s)?e.jsx("div",{ref:o,children:n}):e.jsx("div",{"data-lazyload-section":!0})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@gem-sdk/core"),i=require("./lazyInteractionTrigger.js"),n=require("./lazySectionCoordinator.js");const s=({children:t,isFirst:s})=>{let[u,a]=r.useState(()=>s||i.isInteracted()),c=r.useRef(null);return(r.useEffect(()=>{s&&requestAnimationFrame(()=>{n.startCascade(c.current?.clientHeight??0)})},[s]),r.useEffect(()=>{u&&!s&&requestAnimationFrame(()=>{n.notifySectionRendered(c.current?.clientHeight??0)})},[u,s]),r.useEffect(()=>{if(u||s)return;let e=n.enqueueSection(()=>a(!0)),r=i.subscribeInteraction(()=>a(!0));return()=>{e(),r()}},[u,s]),u)?r.isValidElement(t)?r.cloneElement(t,{ref:c}):e.jsx(e.Fragment,{children:t}):e.jsx("div",{"data-lazyload-section":!0})};exports.default=({children:r})=>{let i=t.useEditorMode(),n=t.useLazyPriority();return"edit"===i||null===n?e.jsx(e.Fragment,{children:r}):e.jsx(s,{isFirst:n,children:r})};

package/dist/esm/grid/components/row/Row.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o,Fragment as r}from"react/jsx-runtime";import{useMemo as t,Children as i,isValidElement as m,createElement as l}from"react";import s from"next/head";import a from"../ChildrenDroppable.js";import p from"../../../video/components/HTML5Embed.js";import{getYoutubeVideoId as d,youtubeVideoRegex as n}from"../../../video/common/helpers.js";import c from"../../../video/components/LiteYouTubeEmbed.js";import{createClass as f}from"@gem-sdk/system";import{useRowSettings as y}from"../../hooks/useRowSetting.js";import{getAttr as u}from"./common/attrs.js";import{getClass as h}from"./common/classes.js";import{getRowStyle as v}from"./common/styles.js";import{checkHasBackgroundVideo as g}from"./common/helpers.js";import{useBuilderStore as j,isEmptyChildren as k}from"@gem-sdk/core";import b from"../section/lazyload/LazySectionWrapper.js";let C=C=>{let{styles:w,setting:N,children:T}=C,{isSection:x,priority:E,as:H="div"}=N??{},z=j(e=>e.sectionIndex),{background:L}=w??{},{builderAttrs:P,bgVideo:R,isRowEmpty:I,rowClassEditorOnly:S,isRenderPlaceholderViewBox:$,isPostPurchase:A,ref:B,postPurchaseVerticalAlign:D}=y(C),{rowStyle:M,backgroundBoxStyle:V,embedVideoStyle:W,sectionStyle:Y}=v({rowProps:C,isPostPurchase:A,type:"React"}),{rowAttr:q}=u(C),{rowClass:F,backgroundBoxClass:G,backgroundBoxInnerClass:J,sectionClass:K,wrapperYoutubeClasses:O,iframeYoutubeClasses:Q}=h(C),U=f({[F]:!0,[S]:!0}),X=t(()=>{if(!g(L))return;if(R?.videoType==="html5"&&!R.videoHtml5||R?.videoType==="youtube"&&!R.video)return null;if(R?.videoType==="html5"&&R.videoHtml5)return e(p,{muted:!0,loop:R.loop,controls:!1,autoplay:!0,src:R.videoHtml5,title:"Video",className:"gp-relative",style:W});let o=R?.video??"",r=d(o);if(!n.test(o)||!r)return;let t=`&loop=${R?.loop?1:0}&playlist=${r}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return e(c,{id:r,autoplay:!0,title:"",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:!1,style:W,wrapperClass:O,iframeClass:Q})},[L,R,W,Q,O]),Z=i.map(T,e=>!!k(e)),_=o("div",{ref:B,...P,...q,style:M(A),className:U,children:[!!X&&e("div",{className:G,style:V,children:e("div",{className:J,children:X})}),$?e(r,{}):I?e(a,{}):i.map(T,e=>m(e)?l(e.type,{hiddenEmptyCol:C.hiddenEmptyCol&&!k(e)&&!Z,...e.props,key:e.key,order:N?.order,layout:N?.layout,justifyContent:A?D():N?.verticalAlign}):null)]});return o(r,{children:[!!w?.preloadBgImage&&o(s,{children:[!!L?.desktop?.image?.src&&e("link",{rel:"preload",href:L.desktop.image.src,as:"image"}),!!L?.tablet?.image?.src&&e("link",{rel:"preload",href:L.tablet.image.src,as:"image"}),!!L?.mobile?.image?.src&&e("link",{rel:"preload",href:L.mobile.image.src,as:"image"})]}),x?e(b,{priority:E||0===z,children:e(H,{className:K,style:Y,children:_})}):_]})};export{C as default};
+import{jsx as e,jsxs as o,Fragment as r}from"react/jsx-runtime";import{useMemo as t,Children as m,isValidElement as i,createElement as l}from"react";import s from"next/head";import a from"../ChildrenDroppable.js";import p from"../../../video/components/HTML5Embed.js";import{getYoutubeVideoId as d,youtubeVideoRegex as n}from"../../../video/common/helpers.js";import c from"../../../video/components/LiteYouTubeEmbed.js";import{createClass as f}from"@gem-sdk/system";import{useRowSettings as y}from"../../hooks/useRowSetting.js";import{getAttr as u}from"./common/attrs.js";import{getClass as h}from"./common/classes.js";import{getRowStyle as v}from"./common/styles.js";import{checkHasBackgroundVideo as g}from"./common/helpers.js";import{isEmptyChildren as j}from"@gem-sdk/core";import k from"../section/lazyload/LazySectionWrapper.js";let b=b=>{let{styles:C,setting:w,children:N}=b,{isSection:T,as:E="div"}=w??{},{background:H}=C??{},{builderAttrs:x,bgVideo:z,isRowEmpty:L,rowClassEditorOnly:P,isRenderPlaceholderViewBox:R,isPostPurchase:S,ref:$,postPurchaseVerticalAlign:A}=y(b),{rowStyle:B,backgroundBoxStyle:D,embedVideoStyle:I,sectionStyle:M}=v({rowProps:b,isPostPurchase:S,type:"React"}),{rowAttr:V}=u(b),{rowClass:W,backgroundBoxClass:Y,backgroundBoxInnerClass:q,sectionClass:F,wrapperYoutubeClasses:G,iframeYoutubeClasses:J}=h(b),K=f({[W]:!0,[P]:!0}),O=t(()=>{if(!g(H))return;if(z?.videoType==="html5"&&!z.videoHtml5||z?.videoType==="youtube"&&!z.video)return null;if(z?.videoType==="html5"&&z.videoHtml5)return e(p,{muted:!0,loop:z.loop,controls:!1,autoplay:!0,src:z.videoHtml5,title:"Video",className:"gp-relative",style:I});let o=z?.video??"",r=d(o);if(!n.test(o)||!r)return;let t=`&loop=${z?.loop?1:0}&playlist=${r}&showinfo=0&rel=0&fs=0&enablejsapi=1`;return e(c,{id:r,autoplay:!0,title:"",controls:!1,params:t,adNetwork:!1,noCookie:!0,muted:!0,lazy:!1,style:I,wrapperClass:G,iframeClass:J})},[H,z,I,J,G]),Q=m.map(N,e=>!!j(e)),U=o("div",{ref:$,...x,...V,style:B(S),className:K,children:[!!O&&e("div",{className:Y,style:D,children:e("div",{className:q,children:O})}),R?e(r,{}):L?e(a,{}):m.map(N,e=>i(e)?l(e.type,{hiddenEmptyCol:b.hiddenEmptyCol&&!j(e)&&!Q,...e.props,key:e.key,order:w?.order,layout:w?.layout,justifyContent:S?A():w?.verticalAlign}):null)]});return o(r,{children:[!!C?.preloadBgImage&&o(s,{children:[!!H?.desktop?.image?.src&&e("link",{rel:"preload",href:H.desktop.image.src,as:"image"}),!!H?.tablet?.image?.src&&e("link",{rel:"preload",href:H.tablet.image.src,as:"image"}),!!H?.mobile?.image?.src&&e("link",{rel:"preload",href:H.mobile.image.src,as:"image"})]}),T?e(k,{children:e(E,{className:F,style:M,children:U})}):U]})};export{b as default};

package/dist/esm/grid/components/section/lazyload/LazySectionWrapper.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{useState as t,useRef as e,useEffect as i}from"react";import{isInteracted as n,subscribeInteraction as o}from"./lazyInteractionTrigger.js";import{startCascade as a,notifySectionRendered as l,enqueueSection as m}from"./lazySectionCoordinator.js";let c=({children:c,priority:u})=>{let d=!!u,[f,p]=t(()=>d||n()),s=e(null);return(i(()=>{d&&requestAnimationFrame(()=>{a(s.current?.clientHeight??0)})},[d]),i(()=>{f&&!d&&requestAnimationFrame(()=>{l(s.current?.clientHeight??0)})},[f,d]),i(()=>{if(f||d)return;let r=m(()=>p(!0)),t=o(()=>p(!0));return()=>{r(),t()}},[f,d]),f)?r("div",{ref:s,children:c}):r("div",{"data-lazyload-section":!0})};export{c as default};
+import{jsx as r,Fragment as e}from"react/jsx-runtime";import{useState as t,useRef as i,useEffect as n,isValidElement as o,cloneElement as a}from"react";import{useEditorMode as l,useLazyPriority as m}from"@gem-sdk/core";import{isInteracted as c,subscribeInteraction as u}from"./lazyInteractionTrigger.js";import{startCascade as d,notifySectionRendered as s,enqueueSection as f}from"./lazySectionCoordinator.js";let p=({children:t})=>{let i=l(),n=m();return"edit"===i||null===n?r(e,{children:t}):r(g,{isFirst:n,children:t})},g=({children:l,isFirst:m})=>{let[p,g]=t(()=>m||c()),h=i(null);return(n(()=>{m&&requestAnimationFrame(()=>{d(h.current?.clientHeight??0)})},[m]),n(()=>{p&&!m&&requestAnimationFrame(()=>{s(h.current?.clientHeight??0)})},[p,m]),n(()=>{if(p||m)return;let r=f(()=>g(!0)),e=u(()=>g(!0));return()=>{r(),e()}},[p,m]),p)?o(l)?a(l,{ref:h}):r(e,{children:l}):r("div",{"data-lazyload-section":!0})};export{p as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "17.0.0-dev.83",
+  "version": "17.0.0-dev.84",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",
@@ -26,9 +26,9 @@
     "i18n:extract": "rollup -c ./scripts/rollup.config.settings.mjs && node ./scripts/translate/extract-texts-to-locales.js && node ./scripts/translate/en-keys-usage.js"
   },
   "devDependencies": {
-    "@gem-sdk/core": "17.0.0-dev.83",
-    "@gem-sdk/styles": "17.0.0-dev.83",
-    "@gem-sdk/system": "17.0.0-dev.83",
+    "@gem-sdk/core": "17.0.0-dev.84",
+    "@gem-sdk/styles": "17.0.0-dev.84",
+    "@gem-sdk/system": "17.0.0-dev.84",
     "@types/react-transition-group": "^4.4.12",
     "postcss-import": "16.1.1",
     "@thedutchcoder/postcss-rem-to-px": "0.0.2",