@gem-sdk/components 19.1.0-staging.15 → 19.1.0-staging.16

package/dist/cjs/sticky/hooks/useSticky.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react"),o=require("../common/helper.js");exports.default=i=>{let{width:s,position:n,display:l,scrollPercent:r,showFrom:a,hideFrom:c}=i??{},d=e.makeStyleResponsive("w",s),b=e.usePageStore(e=>"interaction"===e.sidebarMode),u=e.useCurrentDevice(),p=e.useEditorMode(),[m,k]=t.useState(!1),f=e.useStickyStore(e=>e.getFirstVisibleElement(u)),w=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),v=t.useMemo(()=>({...w({position:n?.desktop,device:""}),...w({position:n?.tablet??n?.desktop,device:"-tablet"}),...w({position:n?.mobile??n?.tablet??n?.desktop,device:"-mobile"})}),[n?.desktop,n?.mobile,n?.tablet]),S=t.useMemo(()=>{if(b&&n?.[u]==="top")return"40px"},[u,b,n]),[h,E]=t.useState(null),V=a?.link,g=c?.link;t.useEffect(()=>{if(E(null),"edit"===p)return;let e=[l?.desktop,l?.tablet,l?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let i=()=>({isScrollPercentReached:o.getScrollPercent()>=(r??0),isBetweenSectionsVisible:o.isVisibleBetweenSections({showFrom:{link:V},hideFrom:{link:g}})}),s=()=>{let e=i();E(t=>t&&t.isScrollPercentReached===e.isScrollPercentReached&&t.isBetweenSectionsVisible===e.isBetweenSectionsVisible?t:e)};s();let n=0,a=()=>{n||(n=requestAnimationFrame(()=>{n=0,s()}))};return window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a),window.addEventListener("orientationchange",a),()=>{n&&cancelAnimationFrame(n),window.removeEventListener("scroll",a),window.removeEventListener("resize",a),window.removeEventListener("orientationchange",a)}},[p,l?.desktop,l?.tablet,l?.mobile,V,g,r]);let M=t.useMemo(()=>{let e=({displayValue:e})=>{switch(e){case"after-first-cart-button":return m?"block":"none";case"after-first-scroll":if(!h)return"none";return h.isScrollPercentReached?"block":"none";case"between-sections":if(!h)return o.hasSectionValue({value:a})?"none":"block";return h.isBetweenSectionsVisible?"block":"none";default:return"block"}},t=l?.desktop,i=l?.tablet??t,s=l?.mobile??i;return{"--d":e({displayValue:t}),"--d-tablet":e({displayValue:i}),"--d-mobile":e({displayValue:s})}},[l?.desktop,l?.mobile,l?.tablet,g,V,h,m]),x=t.useMemo(()=>({"--top":S??"auto","--top-tablet":S??"auto","--top-mobile":S??"auto",[`--${n?.desktop}`]:S??"0px",[`--${n?.tablet??n?.desktop}-tablet`]:S??"0px",[`--${n?.mobile??n?.tablet??n?.desktop}-mobile`]:S??"0px"}),[S,n?.desktop,n?.mobile,n?.tablet]),y=({position:e})=>"top"==e?"sticky":"fixed",P=t.useMemo(()=>({"--pos":y({position:n?.desktop}),"--pos-tablet":y({position:n?.tablet??n?.desktop}),"--pos-mobile":y({position:n?.mobile??n?.tablet??n?.desktop})}),[n?.desktop,n?.mobile,n?.tablet]);return t.useEffect(()=>{if(!f)return;let e=new IntersectionObserver(([e])=>{e&&k(e.isIntersecting||e.boundingClientRect.top<=0)});return e.observe(f),()=>e.disconnect()},[f]),t.useEffect(()=>{k(!1)},[u]),{w:d,displayStyle:x,positionStyle:P,getCSSAlign:v,makeDisplaySettingStyles:M}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react"),o=require("../common/helper.js");exports.default=i=>{let{width:n,position:s,display:l,scrollPercent:r,showFrom:a,hideFrom:c}=i??{},d=e.makeStyleResponsive("w",n),u=e.usePageStore(e=>"interaction"===e.sidebarMode),b=e.useCurrentDevice(),p=e.useEditorMode(),[m,k]=t.useState(!1),w=e.useStickyStore(e=>e.getFirstVisibleElement(b)),f=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),v=t.useMemo(()=>({...f({position:s?.desktop,device:""}),...f({position:s?.tablet??s?.desktop,device:"-tablet"}),...f({position:s?.mobile??s?.tablet??s?.desktop,device:"-mobile"})}),[s?.desktop,s?.mobile,s?.tablet]),S=t.useMemo(()=>{if(u&&s?.[b]==="top")return"40px"},[b,u,s]),[E,h]=t.useState(null),V=a?.link,g=c?.link;t.useEffect(()=>{if(h(null),"edit"===p)return;let e=[l?.desktop,l?.tablet,l?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let i=()=>({isScrollPercentReached:o.getScrollPercent()>=(r??0),isBetweenSectionsVisible:o.isVisibleBetweenSections({showFrom:{link:V},hideFrom:{link:g}})}),n=()=>{let e=i();h(t=>t&&t.isScrollPercentReached===e.isScrollPercentReached&&t.isBetweenSectionsVisible===e.isBetweenSectionsVisible?t:e)};n();let s=0,a=()=>{s||(s=requestAnimationFrame(()=>{s=0,n()}))};return window.addEventListener("scroll",a,{passive:!0}),window.addEventListener("resize",a),window.addEventListener("orientationchange",a),()=>{s&&cancelAnimationFrame(s),window.removeEventListener("scroll",a),window.removeEventListener("resize",a),window.removeEventListener("orientationchange",a)}},[p,l?.desktop,l?.tablet,l?.mobile,V,g,r]);let L=t.useMemo(()=>{let e=({displayValue:e})=>{switch(e){case"after-first-cart-button":return m?"block":"none";case"after-first-scroll":if(!E)return"none";return E.isScrollPercentReached?"block":"none";case"between-sections":if(!E)return o.hasSectionValue({value:a})?"none":"block";return E.isBetweenSectionsVisible?"block":"none";default:return"block"}},t=l?.desktop,i=l?.tablet??t,n=l?.mobile??i;return{"--d":e({displayValue:t}),"--d-tablet":e({displayValue:i}),"--d-mobile":e({displayValue:n})}},[l?.desktop,l?.mobile,l?.tablet,g,V,E,m]),M=t.useMemo(()=>({"--top":S??"auto","--top-tablet":S??"auto","--top-mobile":S??"auto",[`--${s?.desktop}`]:S??"0px",[`--${s?.tablet??s?.desktop}-tablet`]:S??"0px",[`--${s?.mobile??s?.tablet??s?.desktop}-mobile`]:S??"0px"}),[S,s?.desktop,s?.mobile,s?.tablet]),x=({position:e})=>"top"==e?"sticky":"fixed",y=t.useMemo(()=>({"--pos":x({position:s?.desktop}),"--pos-tablet":x({position:s?.tablet??s?.desktop}),"--pos-mobile":x({position:s?.mobile??s?.tablet??s?.desktop})}),[s?.desktop,s?.mobile,s?.tablet]);return t.useEffect(()=>{if(!w)return;let e=null,t=()=>{e=null,k(w.getBoundingClientRect().top<=0)},o=()=>{null===e&&(e=requestAnimationFrame(t))};return t(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==e&&cancelAnimationFrame(e)}},[w]),t.useEffect(()=>{k(!1)},[b]),{w:d,displayStyle:M,positionStyle:y,getCSSAlign:v,makeDisplaySettingStyles:L}};

package/dist/esm/sticky/hooks/useSticky.js

@@ -1 +1 @@
-import{makeStyleResponsive as e,usePageStore as t,useCurrentDevice as o,useEditorMode as i,useStickyStore as n}from"@gem-sdk/core";import{useState as l,useMemo as s,useEffect as r}from"react";import{hasSectionValue as a,isVisibleBetweenSections as d,getScrollPercent as b}from"../common/helper.js";let c=c=>{let{width:p,position:m,display:u,scrollPercent:k,showFrom:w,hideFrom:f}=c??{},v=e("w",p),h=t(e=>"interaction"===e.sidebarMode),S=o(),V=i(),[E,g]=l(!1),x=n(e=>e.getFirstVisibleElement(S)),L=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),y=s(()=>({...L({position:m?.desktop,device:""}),...L({position:m?.tablet??m?.desktop,device:"-tablet"}),...L({position:m?.mobile??m?.tablet??m?.desktop,device:"-mobile"})}),[m?.desktop,m?.mobile,m?.tablet]),F=s(()=>{if(h&&m?.[S]==="top")return"40px"},[S,h,m]),[R,$]=l(null),B=w?.link,P=f?.link;r(()=>{if($(null),"edit"===V)return;let e=[u?.desktop,u?.tablet,u?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let o=()=>({isScrollPercentReached:b()>=(k??0),isBetweenSectionsVisible:d({showFrom:{link:B},hideFrom:{link:P}})}),i=()=>{let e=o();$(t=>t&&t.isScrollPercentReached===e.isScrollPercentReached&&t.isBetweenSectionsVisible===e.isBetweenSectionsVisible?t:e)};i();let n=0,l=()=>{n||(n=requestAnimationFrame(()=>{n=0,i()}))};return window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l),window.addEventListener("orientationchange",l),()=>{n&&cancelAnimationFrame(n),window.removeEventListener("scroll",l),window.removeEventListener("resize",l),window.removeEventListener("orientationchange",l)}},[V,u?.desktop,u?.tablet,u?.mobile,B,P,k]);let z=s(()=>{let e=({displayValue:e})=>{switch(e){case"after-first-cart-button":return E?"block":"none";case"after-first-scroll":if(!R)return"none";return R.isScrollPercentReached?"block":"none";case"between-sections":if(!R)return a({value:w})?"none":"block";return R.isBetweenSectionsVisible?"block":"none";default:return"block"}},t=u?.desktop,o=u?.tablet??t,i=u?.mobile??o;return{"--d":e({displayValue:t}),"--d-tablet":e({displayValue:o}),"--d-mobile":e({displayValue:i})}},[u?.desktop,u?.mobile,u?.tablet,P,B,R,E]),A=s(()=>({"--top":F??"auto","--top-tablet":F??"auto","--top-mobile":F??"auto",[`--${m?.desktop}`]:F??"0px",[`--${m?.tablet??m?.desktop}-tablet`]:F??"0px",[`--${m?.mobile??m?.tablet??m?.desktop}-mobile`]:F??"0px"}),[F,m?.desktop,m?.mobile,m?.tablet]),I=({position:e})=>"top"==e?"sticky":"fixed",j=s(()=>({"--pos":I({position:m?.desktop}),"--pos-tablet":I({position:m?.tablet??m?.desktop}),"--pos-mobile":I({position:m?.mobile??m?.tablet??m?.desktop})}),[m?.desktop,m?.mobile,m?.tablet]);return r(()=>{if(!x)return;let e=new IntersectionObserver(([e])=>{e&&g(e.isIntersecting||e.boundingClientRect.top<=0)});return e.observe(x),()=>e.disconnect()},[x]),r(()=>{g(!1)},[S]),{w:v,displayStyle:A,positionStyle:j,getCSSAlign:y,makeDisplaySettingStyles:z}};export{c as default};
+import{makeStyleResponsive as e,usePageStore as t,useCurrentDevice as o,useEditorMode as i,useStickyStore as n}from"@gem-sdk/core";import{useState as l,useMemo as s,useEffect as r}from"react";import{hasSectionValue as a,isVisibleBetweenSections as d,getScrollPercent as c}from"../common/helper.js";let b=b=>{let{width:p,position:m,display:u,scrollPercent:k,showFrom:w,hideFrom:f}=b??{},v=e("w",p),h=t(e=>"interaction"===e.sidebarMode),E=o(),S=i(),[L,V]=l(!1),F=n(e=>e.getFirstVisibleElement(E)),g=({position:e,device:t})=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),x=s(()=>({...g({position:m?.desktop,device:""}),...g({position:m?.tablet??m?.desktop,device:"-tablet"}),...g({position:m?.mobile??m?.tablet??m?.desktop,device:"-mobile"})}),[m?.desktop,m?.mobile,m?.tablet]),y=s(()=>{if(h&&m?.[E]==="top")return"40px"},[E,h,m]),[B,R]=l(null),$=w?.link,A=f?.link;r(()=>{if(R(null),"edit"===S)return;let e=[u?.desktop,u?.tablet,u?.mobile],t=e.some(e=>"after-first-scroll"===e||"between-sections"===e);if(!t)return;let o=()=>({isScrollPercentReached:c()>=(k??0),isBetweenSectionsVisible:d({showFrom:{link:$},hideFrom:{link:A}})}),i=()=>{let e=o();R(t=>t&&t.isScrollPercentReached===e.isScrollPercentReached&&t.isBetweenSectionsVisible===e.isBetweenSectionsVisible?t:e)};i();let n=0,l=()=>{n||(n=requestAnimationFrame(()=>{n=0,i()}))};return window.addEventListener("scroll",l,{passive:!0}),window.addEventListener("resize",l),window.addEventListener("orientationchange",l),()=>{n&&cancelAnimationFrame(n),window.removeEventListener("scroll",l),window.removeEventListener("resize",l),window.removeEventListener("orientationchange",l)}},[S,u?.desktop,u?.tablet,u?.mobile,$,A,k]);let P=s(()=>{let e=({displayValue:e})=>{switch(e){case"after-first-cart-button":return L?"block":"none";case"after-first-scroll":if(!B)return"none";return B.isScrollPercentReached?"block":"none";case"between-sections":if(!B)return a({value:w})?"none":"block";return B.isBetweenSectionsVisible?"block":"none";default:return"block"}},t=u?.desktop,o=u?.tablet??t,i=u?.mobile??o;return{"--d":e({displayValue:t}),"--d-tablet":e({displayValue:o}),"--d-mobile":e({displayValue:i})}},[u?.desktop,u?.mobile,u?.tablet,A,$,B,L]),q=s(()=>({"--top":y??"auto","--top-tablet":y??"auto","--top-mobile":y??"auto",[`--${m?.desktop}`]:y??"0px",[`--${m?.tablet??m?.desktop}-tablet`]:y??"0px",[`--${m?.mobile??m?.tablet??m?.desktop}-mobile`]:y??"0px"}),[y,m?.desktop,m?.mobile,m?.tablet]),z=({position:e})=>"top"==e?"sticky":"fixed",j=s(()=>({"--pos":z({position:m?.desktop}),"--pos-tablet":z({position:m?.tablet??m?.desktop}),"--pos-mobile":z({position:m?.mobile??m?.tablet??m?.desktop})}),[m?.desktop,m?.mobile,m?.tablet]);return r(()=>{if(!F)return;let e=null,t=()=>{e=null,V(F.getBoundingClientRect().top<=0)},o=()=>{null===e&&(e=requestAnimationFrame(t))};return t(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==e&&cancelAnimationFrame(e)}},[F]),r(()=>{V(!1)},[E]),{w:v,displayStyle:q,positionStyle:j,getCSSAlign:x,makeDisplaySettingStyles:P}};export{b as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gem-sdk/components",
-  "version": "19.1.0-staging.15",
+  "version": "19.1.0-staging.16",
   "license": "MIT",
   "sideEffects": false,
   "main": "dist/cjs/index.js",