UNPKG

@bentoproject/accordion

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