UNPKG

@bentoproject/accordion

Version:
3 lines 6.99 kB
; var n;function t(n){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(n){return typeof n}:function(n){return n&&"function"==typeof Symbol&&n.constructor===Symbol&&n!==Symbol.prototype?"symbol":typeof n})(n)}function e(n){var e=function(n,e){if("object"!==t(n)||null===n)return n;var r=n[Symbol.toPrimitive];if(void 0!==r){var o=r.call(n,"string");if("object"!==t(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(n)}(n);return"symbol"===t(e)?e:String(e)}function r(){return n||(n=Promise.resolve(void 0))}function o(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function i(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,r)}return e}function c(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?i(Object(e),!0).forEach((function(t){o(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):i(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function a(n,t){if(null==n)return{};var e,r,o={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],t.indexOf(e)>=0||(o[e]=n[e]);return o}var u,{hasOwnProperty:l,toString:d}=Object.prototype;function f(n,t){return Object.keys(n).reduce(((e,r)=>(t.includes(r)||(e[r]=n[r]),e)),{})}import{createContext as s,createElement as p}from"@bentoproject/core/preact";import{useCallback as b,useContext as h,useEffect as m,useImperativeHandle as g,useLayoutEffect as v,useMemo as y,useRef as j,useState as x}from"@bentoproject/core/preact";import{forwardRef as S}from"@bentoproject/core/preact";import{WithAmpContext as O}from"@bentoproject/core/preact";import{useCallback as w,useLayoutEffect as I}from"@bentoproject/core/preact";import{useAmpContext as $}from"@bentoproject/core/preact";function E(n,t=0){var e,r;return null!==(e=null!==(r=n.tabindex)&&void 0!==r?r:n.tabIndex)&&void 0!==e?e:t}var Y=["Webkit","webkit","Moz","moz","ms","O","o"];function C(n,t,e){if(H(t))return t;u||(u=Object.create(null));let r=u[t];if(!r||e){if(r=t,void 0===n[t]){const e=function(n){return n.charAt(0).toUpperCase()+n.slice(1)}(t),o=function(n,t){for(let e=0;e<Y.length;e++){const r=Y[e]+t;if(void 0!==n[r])return r}return""}(n,e);void 0!==n[o]&&(r=o)}e||(u[t]=r)}return r}function M(n,t,e,r,o){const i=C(n.style,t,o);if(!i)return;const c=r?e+r:e;n.style.setProperty(function(n){const t=n.replace(/[A-Z]/g,(n=>"-"+n.toLowerCase()));return Y.some((n=>t.startsWith(n+"-")))?`-${t}`:t}(i),c)}function k(n,t,e){const r=C(n.style,t,e);if(r)return H(r)?n.style.getPropertyValue(r):n.style[r]}function z(n,t){for(const e in t)M(n,e,t[e])}function H(n){return n.startsWith("--")}function P(n,t,e){n.classList.add("i-amphtml-animating");let r=t();return r.onfinish=r.oncancel=()=>{r=null,e&&e(),n.classList.remove("i-amphtml-animating")},()=>{r&&r.cancel()}}function A(n){const t=window.innerHeight,e=Math.abs(n)/t*500;return Math.min(Math.max(e,200),500)}var L=["animate","as","children","expandSingleSection","id"],T=["animate","as","children","expanded","id","onExpandStateChange"],W=s({}),Z=s({}),q={},B={},D=function(){let n=0;return()=>String(++n)}(),F=()=>String(Math.floor(1e5*Math.random())),G=S((function(n,t){let{animate:e=!1,as:o="section",children:i,expandSingleSection:u=!1,id:l}=n,d=a(n,L);const[s,h]=x(q),v=j(B),[S]=x(F),O=l||`a${S}`;m((()=>{u&&h((n=>{const t={};let e=0;for(const r in n)t[r]=n[r]&&0==e++;return t}))}),[u]);const w=b(((n,t,{current:e})=>(h((e=>J(n,t,e,u))),v.current=c(c({},v.current),{},{[n]:e}),()=>{h((t=>f(t,n))),v.current=f(v.current,n)})),[u]),I=b(((n,t)=>{h((e=>{const o=null!=t?t:!e[n],i=J(n,o,e,u);return r().then((()=>{for(const n in e){const t=v.current[n];t&&e[n]!=i[n]&&t(i[n])}})),i}))}),[u]),$=b(((n,t)=>{var e;return null!==(e=s[n])&&void 0!==e?e:t}),[s]),E=b((n=>{if(n)n in s&&I(n);else if(!u)for(const n in s)I(n)}),[s,I,u]),Y=b((n=>{if(n)$(n,!0)||I(n);else if(!u)for(const n in s)$(n,!0)||I(n)}),[s,I,$,u]),C=b((n=>{if(n)$(n,!1)&&I(n);else for(const n in s)$(n,!1)&&I(n)}),[s,I,$]);g(t,(()=>({toggle:E,expand:Y,collapse:C})),[E,C,Y]);const M=y((()=>({registerSection:w,toggleExpanded:I,isExpanded:$,animate:e,prefix:O})),[w,I,$,e,O]);return p(o,c({id:l},d),p(W.Provider,{value:M},i))}));function J(n,t,e,r){let o;if(r&&t){o={[n]:t};for(const t in e)t!=n&&(o[t]=!1)}else o=c(c({},e),{},{[n]:t});return o}function K(n){let{animate:t=!1,as:e="section",children:o,expanded:i=!1,id:u,onExpandStateChange:l}=n,d=a(n,T);const[f]=x(D),s=u||f,[m]=x(F),[g,S]=x(i),[O,w]=x(null),[I,$]=x(null),{animate:E,isExpanded:Y,prefix:C,registerSection:M,toggleExpanded:k}=h(W),z=Y?Y(s,i):g,H=null!=E?E:t,P=O||`${C||"a"}-content-${s}-${m}`,A=I||`${C||"a"}-header-${s}-${m}`,L=j(null);L.current=l,v((()=>{if(M)return M(s,i,L)}),[M,s,i]);const q=b((n=>{k?k(s,n):S((t=>{const e=null!=n?n:!t;return r().then((()=>{const n=L.current;n&&n(e)})),e}))}),[s,k]),B=y((()=>({animate:H,contentId:P,headerId:A,expanded:z,toggleHandler:q,setContentId:w,setHeaderId:$})),[H,P,A,z,q]);return p(e,c({},d),p(Z.Provider,{value:B},o))}function N(n){let t="class",{as:r="div",children:o,id:i,role:u="button",[t]:l=""}=n,d=a(n,["as","children","id","role",t].map(e));const{contentId:f,expanded:s,headerId:b,setHeaderId:m,toggleHandler:g}=h(Z);return v((()=>{m&&m(i)}),[m,i]),p(r,c(c({},d),{},{id:b,role:u,class:`${l} section-child-76fac82 header-76fac82`,tabindex:E(d),"aria-controls":f,onClick:()=>g(),"aria-expanded":String(s)}),o)}function Q(n){let t="class",{as:r="div",children:o,id:i,role:u="region",[t]:l=""}=n,d=a(n,["as","children","id","role",t].map(e));const f=j(null),s=j(!1),{animate:b,contentId:g,expanded:y,headerId:x,setContentId:S}=h(Z);return m((()=>(s.current=!0,()=>s.current=!1)),[]),v((()=>{S&&S(i)}),[S,i]),v((()=>{const n=s.current,t=f.current;if(b&&n&&t&&t.animate)return y?function(n){return P(n,(()=>{const t=k(n,"height"),e=k(n,"opacity"),r=k(n,"overflowY");z(n,{height:0,opacity:0,overflowY:"auto"});const o=n.scrollHeight;z(n,{height:t,opacity:e,overflowY:r});const i=A(o);return n.animate([{height:0,opacity:0,overflowY:"hidden"},{height:o+"px",opacity:1,overflowY:"hidden"}],{easing:"cubic-bezier(0.47, 0, 0.745, 0.715)",duration:i})}))}(t):function(n){return P(n,(()=>{const t=n.offsetHeight,e=A(t);return n.animate([{height:t+"px",opacity:1,overflowY:"hidden"},{height:"0",opacity:0,overflowY:"hidden"}],{easing:"cubic-bezier(0.39, 0.575, 0.565, 1)",duration:e})}))}(t)}),[y,b]),p(O,{renderable:y},p(r,c(c({},d),{},{ref:f,class:l+" section-child-76fac82"+(y?"":" content-hidden-76fac82"),id:g,"aria-labelledby":x,role:u}),o))}G.displayName="Accordion";export{G as BentoAccordion,Q as BentoAccordionContent,N as BentoAccordionHeader,K as BentoAccordionSection}; //# sourceMappingURL=component-preact.module.js.map