@bentoproject/accordion
Version:
Displays content sections that can be collapsed and expanded.
1 lines • 7.42 kB
JavaScript
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{hasOwnProperty:u,toString:l}=Object.prototype;function d(n,t){return Object.keys(n).reduce(((e,r)=>(t.includes(r)||(e[r]=n[r]),e)),{})}import{cloneElement as f,createContext as s,createElement as b,createRef as h}from"react";import{hydrate as p,render as m}from"react-dom";import{useCallback as g,useContext as v,useEffect as y,useImperativeHandle as x,useLayoutEffect as S,useMemo as j,useRef as O,useState as w}from"react";function I(n,t,e){return b.apply(void 0,arguments)}function $(n){return s(n,void 0)}function z(n){return w(n)}function E(n){return O(n)}function M(n,t){y(n,t)}function Y(n,t){S(n,t)}function C(n){return v(n)}function H(n,t){return j(n,t)}function N(n,t){return g(n,t)}import{forwardRef as k}from"react";var P,A,T=["auto","lazy","eager","unload"],W={auto:0,lazy:1,eager:2,unload:3};function q(n,t){const e=W[n]||0,r=W[t]||0,o=Math.max(e,r);return T[o]}function B(){return P||(P=$({renderable:!0,playable:!0,loading:"auto"}))}function D({children:n,loading:t="auto",notify:e,playable:r=!0,renderable:o=!0}){const i=C(B()),c=o&&i.renderable,a=c&&r&&i.playable,u=q(c?"auto":"lazy",q(t,i.loading)),l=e||i.notify,d=H((()=>({renderable:c,playable:a,loading:u,notify:l})),[c,a,u,l]);return I(B().Provider,{children:n,value:d})}var F=["Webkit","webkit","Moz","moz","ms","O","o"];function G(n,t,e){if(Q(t))return t;A||(A=Object.create(null));let r=A[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<F.length;e++){const r=F[e]+t;if(void 0!==n[r])return r}return""}(n,e);void 0!==n[o]&&(r=o)}e||(A[t]=r)}return r}function J(n,t,e,r,o){const i=G(n.style,t,o);if(!i)return;const c=r?e+r:e;Q(i)?n.style.setProperty(i,c):n.style[i]=c}function K(n,t,e){const r=G(n.style,t,e);if(r)return Q(r)?n.style.getPropertyValue(r):n.style[r]}function L(n,t){for(const e in t)J(n,e,t[e])}function Q(n){return n.startsWith("--")}function R(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 U(n){const t=window.innerHeight,e=Math.abs(n)/t*500;return Math.min(Math.max(e,200),500)}var V=["animate","as","children","expandSingleSection","id"],X=["animate","as","children","expanded","id","onExpandStateChange"],Z=$({}),_=$({}),nn={},tn={},en=function(){let n=0;return()=>String(++n)}(),rn=()=>String(Math.floor(1e5*Math.random())),on=k((function(n,t){let{animate:e=!1,as:o="section",children:i,expandSingleSection:u=!1,id:l}=n,f=a(n,V);const[s,b]=z(nn),h=E(tn),[p]=z(rn),m=l||`a${p}`;M((()=>{u&&b((n=>{const t={};let e=0;for(const r in n)t[r]=n[r]&&0==e++;return t}))}),[u]);const g=N(((n,t,{current:e})=>(b((e=>cn(n,t,e,u))),h.current=c(c({},h.current),{},{[n]:e}),()=>{b((t=>d(t,n))),h.current=d(h.current,n)})),[u]),v=N(((n,t)=>{b((e=>{const o=null!=t?t:!e[n],i=cn(n,o,e,u);return r().then((()=>{for(const n in e){const t=h.current[n];t&&e[n]!=i[n]&&t(i[n])}})),i}))}),[u]),y=N(((n,t)=>{var e;return null!==(e=s[n])&&void 0!==e?e:t}),[s]),S=N((n=>{if(n)n in s&&v(n);else if(!u)for(const n in s)v(n)}),[s,v,u]),j=N((n=>{if(n)y(n,!0)||v(n);else if(!u)for(const n in s)y(n,!0)||v(n)}),[s,v,y,u]),O=N((n=>{if(n)y(n,!1)&&v(n);else for(const n in s)y(n,!1)&&v(n)}),[s,v,y]);!function(n,t,e){x(n,(()=>({toggle:S,expand:j,collapse:O})),e)}(t,0,[S,O,j]);const w=H((()=>({registerSection:g,toggleExpanded:v,isExpanded:y,animate:e,prefix:m})),[g,v,y,e,m]);return I(o,c({id:l},f),I(Z.Provider,{value:w},i))}));function cn(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 an(n){let{animate:t=!1,as:e="section",children:o,expanded:i=!1,id:u,onExpandStateChange:l}=n,d=a(n,X);const[f]=z(en),s=u||f,[b]=z(rn),[h,p]=z(i),[m,g]=z(null),[v,y]=z(null),{animate:x,isExpanded:S,prefix:j,registerSection:O,toggleExpanded:w}=C(Z),$=S?S(s,i):h,M=null!=x?x:t,k=m||`${j||"a"}-content-${s}-${b}`,P=v||`${j||"a"}-header-${s}-${b}`,A=E(null);A.current=l,Y((()=>{if(O)return O(s,i,A)}),[O,s,i]);const T=N((n=>{w?w(s,n):p((t=>{const e=null!=n?n:!t;return r().then((()=>{const n=A.current;n&&n(e)})),e}))}),[s,w]),W=H((()=>({animate:M,contentId:k,headerId:P,expanded:$,toggleHandler:T,setContentId:g,setHeaderId:y})),[M,k,P,$,T]);return I(e,c({},d),I(_.Provider,{value:W},o))}function un(n){let t="className",r="tabindex",{as:o="div",children:i,id:u,role:l="button",[t]:d="",[r]:f=0}=n,s=a(n,["as","children","id","role",t,r].map(e));const{contentId:b,expanded:h,headerId:p,setHeaderId:m,toggleHandler:g}=C(_);return Y((()=>{m&&m(u)}),[m,u]),I(o,c(c({},s),{},{id:p,role:l,className:`${d} section-child-00fce3c header-00fce3c`,tabindex:f,"aria-controls":b,onClick:()=>g(),"aria-expanded":String(h)}),i)}function ln(n){let t="className",{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=E(null),s=E(!1),{animate:b,contentId:h,expanded:p,headerId:m,setContentId:g}=C(_);return M((()=>(s.current=!0,()=>s.current=!1)),[]),Y((()=>{g&&g(i)}),[g,i]),Y((()=>{const n=s.current,t=f.current;if(b&&n&&t&&t.animate)return p?function(n){return R(n,(()=>{const t=K(n,"height"),e=K(n,"opacity"),r=K(n,"overflowY");L(n,{height:0,opacity:0,overflowY:"auto"});const o=n.scrollHeight;L(n,{height:t,opacity:e,overflowY:r});const i=U(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 R(n,(()=>{const t=n.offsetHeight,e=U(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)}),[p,b]),I(D,{renderable:p},I(r,c(c({},d),{},{ref:f,className:l+" section-child-00fce3c"+(p?"":" content-hidden-00fce3c"),id:h,"aria-labelledby":m,role:u}),o))}on.displayName="Accordion";export{on as BentoAccordion,ln as BentoAccordionContent,un as BentoAccordionHeader,an as BentoAccordionSection};