@gem-sdk/components 20.0.0 → 20.0.1

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");exports.default=o=>{let{width:s,position:l}=o??{},{desktop:r,tablet:i,mobile:b}=o?.display||{},p=e.makeStyleResponsive("w",s),a=e.usePageStore(e=>"interaction"===e.sidebarMode),u=e.useCurrentDevice(),[d,n]=t.useState(!1),m=e.useStickyStore(e=>e.getFirstVisibleElement(u)),k=(e,t)=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),c=t.useMemo(()=>({...k(l?.desktop,""),...k(l?.tablet??l?.desktop,"-tablet"),...k(l?.mobile??l?.tablet??l?.desktop,"-mobile")}),[l?.desktop,l?.mobile,l?.tablet]),f=t.useMemo(()=>{if(a&&l?.[u]==="top")return"40px"},[u,a,l]),x=t.useMemo(()=>{let e=e=>"after-first-cart-button"!==e||d?"block":"none";return{"--d":e(r),"--d-tablet":e(i??r),"--d-mobile":e(b??i??r)}},[r,i,b,d]),M=t.useMemo(()=>({"--top":f??"auto","--top-tablet":f??"auto","--top-mobile":f??"auto",[`--${l?.desktop}`]:f??"0px",[`--${l?.tablet??l?.desktop}-tablet`]:f??"0px",[`--${l?.mobile??l?.tablet??l?.desktop}-mobile`]:f??"0px"}),[f,l?.desktop,l?.mobile,l?.tablet]),v=e=>"top"==e?"sticky":"fixed",g=t.useMemo(()=>({"--pos":v(l?.desktop),"--pos-tablet":v(l?.tablet??l?.desktop),"--pos-mobile":v(l?.mobile??l?.tablet??l?.desktop)}),[l?.desktop,l?.mobile,l?.tablet]);return t.useEffect(()=>{if(!m)return;let e=new IntersectionObserver(([e])=>{e&&n(e.isIntersecting||e.boundingClientRect.top<=0)});return e.observe(m),()=>e.disconnect()},[m]),t.useEffect(()=>{n(!1)},[u]),{w:p,displayStyle:M,positionStyle:g,getCSSAlign:c,makeDisplaySettingStyles:x}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@gem-sdk/core"),t=require("react");exports.default=o=>{let{width:l,position:s}=o??{},{desktop:i,tablet:r,mobile:a}=o?.display||{},n=e.makeStyleResponsive("w",l),p=e.usePageStore(e=>"interaction"===e.sidebarMode),u=e.useCurrentDevice(),[b,d]=t.useState(!1),m=e.useStickyStore(e=>e.getFirstVisibleElement(u)),k=(e,t)=>({[`--left${t}`]:"top"==e?"0":"50%",[`--t${t}`]:"top"==e?"unset":"translateX(-50%)"}),c=t.useMemo(()=>({...k(s?.desktop,""),...k(s?.tablet??s?.desktop,"-tablet"),...k(s?.mobile??s?.tablet??s?.desktop,"-mobile")}),[s?.desktop,s?.mobile,s?.tablet]),f=t.useMemo(()=>{if(p&&s?.[u]==="top")return"40px"},[u,p,s]),v=t.useMemo(()=>{let e=e=>"after-first-cart-button"!==e||b?"block":"none";return{"--d":e(i),"--d-tablet":e(r??i),"--d-mobile":e(a??r??i)}},[i,r,a,b]),x=t.useMemo(()=>({"--top":f??"auto","--top-tablet":f??"auto","--top-mobile":f??"auto",[`--${s?.desktop}`]:f??"0px",[`--${s?.tablet??s?.desktop}-tablet`]:f??"0px",[`--${s?.mobile??s?.tablet??s?.desktop}-mobile`]:f??"0px"}),[f,s?.desktop,s?.mobile,s?.tablet]),M=e=>"top"==e?"sticky":"fixed",g=t.useMemo(()=>({"--pos":M(s?.desktop),"--pos-tablet":M(s?.tablet??s?.desktop),"--pos-mobile":M(s?.mobile??s?.tablet??s?.desktop)}),[s?.desktop,s?.mobile,s?.tablet]);return t.useEffect(()=>{if(!m)return;let e=null,t=()=>{e=null,d(m.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)}},[m]),t.useEffect(()=>{d(!1)},[u]),{w:n,displayStyle:x,positionStyle:g,getCSSAlign:c,makeDisplaySettingStyles:v}};

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

@@ -1 +1 @@
-import{makeStyleResponsive as t,usePageStore as e,useCurrentDevice as o,useStickyStore as l}from"@gem-sdk/core";import{useState as b,useMemo as i,useEffect as s}from"react";let p=p=>{let{width:r,position:a}=p??{},{desktop:d,tablet:n,mobile:m}=p?.display||{},k=t("w",r),u=e(t=>"interaction"===t.sidebarMode),c=o(),[f,x]=b(!1),$=l(t=>t.getFirstVisibleElement(c)),g=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),y=i(()=>({...g(a?.desktop,""),...g(a?.tablet??a?.desktop,"-tablet"),...g(a?.mobile??a?.tablet??a?.desktop,"-mobile")}),[a?.desktop,a?.mobile,a?.tablet]),v=i(()=>{if(u&&a?.[c]==="top")return"40px"},[c,u,a]),w=i(()=>{let t=t=>"after-first-cart-button"!==t||f?"block":"none";return{"--d":t(d),"--d-tablet":t(n??d),"--d-mobile":t(m??n??d)}},[d,n,m,f]),I=i(()=>({"--top":v??"auto","--top-tablet":v??"auto","--top-mobile":v??"auto",[`--${a?.desktop}`]:v??"0px",[`--${a?.tablet??a?.desktop}-tablet`]:v??"0px",[`--${a?.mobile??a?.tablet??a?.desktop}-mobile`]:v??"0px"}),[v,a?.desktop,a?.mobile,a?.tablet]),C=t=>"top"==t?"sticky":"fixed",E=i(()=>({"--pos":C(a?.desktop),"--pos-tablet":C(a?.tablet??a?.desktop),"--pos-mobile":C(a?.mobile??a?.tablet??a?.desktop)}),[a?.desktop,a?.mobile,a?.tablet]);return s(()=>{if(!$)return;let t=new IntersectionObserver(([t])=>{t&&x(t.isIntersecting||t.boundingClientRect.top<=0)});return t.observe($),()=>t.disconnect()},[$]),s(()=>{x(!1)},[c]),{w:k,displayStyle:I,positionStyle:E,getCSSAlign:y,makeDisplaySettingStyles:w}};export{p as default};
+import{makeStyleResponsive as t,usePageStore as e,useCurrentDevice as o,useStickyStore as l}from"@gem-sdk/core";import{useState as i,useMemo as a,useEffect as s}from"react";let p=p=>{let{width:r,position:b}=p??{},{desktop:n,tablet:d,mobile:m}=p?.display||{},u=t("w",r),k=e(t=>"interaction"===t.sidebarMode),c=o(),[f,x]=i(!1),w=l(t=>t.getFirstVisibleElement(c)),$=(t,e)=>({[`--left${e}`]:"top"==t?"0":"50%",[`--t${e}`]:"top"==t?"unset":"translateX(-50%)"}),g=a(()=>({...$(b?.desktop,""),...$(b?.tablet??b?.desktop,"-tablet"),...$(b?.mobile??b?.tablet??b?.desktop,"-mobile")}),[b?.desktop,b?.mobile,b?.tablet]),v=a(()=>{if(k&&b?.[c]==="top")return"40px"},[c,k,b]),y=a(()=>{let t=t=>"after-first-cart-button"!==t||f?"block":"none";return{"--d":t(n),"--d-tablet":t(d??n),"--d-mobile":t(m??d??n)}},[n,d,m,f]),E=a(()=>({"--top":v??"auto","--top-tablet":v??"auto","--top-mobile":v??"auto",[`--${b?.desktop}`]:v??"0px",[`--${b?.tablet??b?.desktop}-tablet`]:v??"0px",[`--${b?.mobile??b?.tablet??b?.desktop}-mobile`]:v??"0px"}),[v,b?.desktop,b?.mobile,b?.tablet]),F=t=>"top"==t?"sticky":"fixed",A=a(()=>({"--pos":F(b?.desktop),"--pos-tablet":F(b?.tablet??b?.desktop),"--pos-mobile":F(b?.mobile??b?.tablet??b?.desktop)}),[b?.desktop,b?.mobile,b?.tablet]);return s(()=>{if(!w)return;let t=null,e=()=>{t=null,x(w.getBoundingClientRect().top<=0)},o=()=>{null===t&&(t=requestAnimationFrame(e))};return e(),window.addEventListener("scroll",o,{passive:!0}),()=>{window.removeEventListener("scroll",o),null!==t&&cancelAnimationFrame(t)}},[w]),s(()=>{x(!1)},[c]),{w:u,displayStyle:E,positionStyle:A,getCSSAlign:g,makeDisplaySettingStyles:y}};export{p as default};

package/package.json

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