react-collapsed/dist/index.cjs.prod.js

A React custom-hook for creating flexible and accessible expand/collapse components.

"use strict";var ye=Object.create;var P=Object.defineProperty,he=Object.defineProperties,xe=Object.getOwnPropertyDescriptor,be=Object.getOwnPropertyDescriptors,Ee=Object.getOwnPropertyNames,H=Object.getOwnPropertySymbols,Re=Object.getPrototypeOf,$=Object.prototype.hasOwnProperty,ee=Object.prototype.propertyIsEnumerable;var Z=(e,t,n)=>t in e?P(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,s=(e,t)=>{for(var n in t||(t={}))$.call(t,n)&&Z(e,n,t[n]);if(H)for(var n of H(t))ee.call(t,n)&&Z(e,n,t[n]);return e},te=(e,t)=>he(e,be(t));var F=(e,t)=>{var n={};for(var r in e)$.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&H)for(var r of H(e))t.indexOf(r)<0&&ee.call(e,r)&&(n[r]=e[r]);return n};var Te=(e,t)=>{for(var n in t)P(e,n,{get:t[n],enumerable:!0})},ne=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of Ee(t))!$.call(e,o)&&o!==n&&P(e,o,{get:()=>t[o],enumerable:!(r=xe(t,o))||r.enumerable});return e};var re=(e,t,n)=>(n=e!=null?ye(Re(e)):{},ne(t||!e||!e.__esModule?P(n,"default",{value:e,enumerable:!0}):n,e)),ve=e=>ne(P({},"__esModule",{value:!0}),e);var Le={};Te(Le,{useCollapse:()=>Ke});module.exports=ve(Le);var c=require("react");var ae=require("react");var oe=re(require("tiny-warning")),K=class extends Error{constructor(t){super(`react-collapsed: ${t}`)}},v=(...e)=>(0,oe.default)(e[0],`[react-collapsed] -- ${e[1]}`);var w=require("react");function I(e){let t=(0,w.useRef)(e);return(0,w.useEffect)(()=>{t.current=e}),(0,w.useCallback)((...n)=>{var r;return(r=t.current)==null?void 0:r.call(t,...n)},[])}var h=require("react");function V(e,t,n){let[r,o]=(0,h.useState)(t),d=(0,h.useRef)(typeof e!="undefined"),b=d.current?e:r,E=I(n),N=(0,h.useCallback)(R=>{let x=typeof R=="function"?R(b):R;d.current||o(x),E==null||E(x)},[E,b]);return(0,h.useEffect)(()=>{v(!(d.current&&e==null),"`isExpanded` state is changing from controlled to uncontrolled. useCollapse should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop."),v(!(!d.current&&e!=null),"`isExpanded` state is changing from uncontrolled to controlled. useCollapse should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled collapse for the lifetime of the component. Check the `isExpanded` prop.")},[e]),[b,N]}var L=require("react"),we="(prefers-reduced-motion: reduce)";function q(){let[e,t]=(0,L.useState)(!1);return(0,L.useEffect)(()=>{if(typeof window=="undefined"||typeof window.matchMedia!="function")return;let n=window.matchMedia(we);t(n.matches);let r=o=>{t(o.matches)};if(n.addEventListener)return n.addEventListener("change",r),()=>{n.removeEventListener("change",r)};if(n.addListener)return n.addListener(r),()=>{n.removeListener(r)}},[]),e}var g=re(require("react")),Ce=g.useId||(()=>{});function Se(){let e=Ce();return e!=null?e:""}var Ae=typeof window!="undefined"?g.useLayoutEffect:g.useEffect,j=!1,Pe=0,ie=()=>++Pe;function Ie(e){let t=e||(j?ie():null),[n,r]=g.useState(t);return Ae(()=>{n===null&&r(ie())},[]),g.useEffect(()=>{j===!1&&(j=!0)},[]),n!=null?String(n):void 0}function O(e){let t=Se(),n=Ie(e);return typeof e=="string"?e:typeof t=="string"?t:n}function se(e,t){let n=performance.now(),r={};function o(){r.id=requestAnimationFrame(d=>{d-n>t?e():o()})}return o(),r}function B(e){e.id&&cancelAnimationFrame(e.id)}function U(e){return e!=null&&e.current?e.current.scrollHeight:(v(!0,"Was not able to find a ref to the collapse element via `getCollapseProps`. Ensure that the element exposes its `ref` prop. If it exposes the ref prop under a different name (like `innerRef`), use the `refKey` property to change it. Example:\n\nconst collapseProps = getCollapseProps({refKey: 'innerRef'})"),0)}function le(e){if(!e||typeof e=="string")return 0;let t=e/36;return Math.round((4+15*t**.25+t/5)*10)}function Me(e,t){if(e!=null)if(typeof e=="function")e(t);else try{e.current=t}catch(n){throw new K(`Cannot assign value "${t}" to ref "${e}"`)}}function D(...e){return e.every(t=>t==null)?null:t=>{e.forEach(n=>{Me(n,t)})}}function ue(e){let t=n=>{};!1!=="production"&&(t=n=>{if(!(n!=null&&n.current))return;let{paddingTop:r,paddingBottom:o}=window.getComputedStyle(n.current);v(!(r&&r!=="0px"||o&&o!=="0px"),`Padding applied to the collapse element will cause the animation to break and not perform as expected. To fix, apply equivalent padding to the direct descendent of the collapse element. Example:

Before:   <div {...getCollapseProps({style: {padding: 10}})}>{children}</div>

After:   <div {...getCollapseProps()}>
             <div style={{padding: 10}}>
                 {children}
             </div>
          </div>`)}),(0,ae.useEffect)(()=>{t(e)},[e])}var He=typeof window=="undefined"?c.useEffect:c.useLayoutEffect;function Ke(N={}){var R=N,{duration:e,easing:t="cubic-bezier(0.4, 0, 0.2, 1)",onTransitionStateChange:n=()=>{},isExpanded:r,defaultExpanded:o=!1,hasDisabledAnimation:d,id:b}=R,E=F(R,["duration","easing","onTransitionStateChange","isExpanded","defaultExpanded","hasDisabledAnimation","id"]);let y=I(n),x=O(b?`${b}`:void 0),[f,W]=V(r,o),Q=(0,c.useRef)(f),[ce,_]=(0,c.useState)(!1),de=q(),z=d!=null?d:de,T=(0,c.useRef)(),C=(0,c.useRef)(),p=(0,c.useRef)(null),[Y,fe]=(0,c.useState)(null);ue(p);let S=`${E.collapsedHeight||0}px`;function A(a){if(!p.current)return;let l=p.current;for(let u in a){let m=a[u];m?l.style[u]=m:l.style.removeProperty(u)}}return He(()=>{if(!p.current||f===Q.current)return;Q.current=f;function l(i){return z?0:e!=null?e:le(i)}let u=i=>`height ${l(i)}ms ${t}`,m=i=>{function M(){f?(A({height:"",overflow:"",transition:"",display:""}),y("expandEnd")):(A({transition:""}),y("collapseEnd")),_(!1)}C.current&&B(C.current),C.current=se(M,i)};return _(!0),f?T.current=requestAnimationFrame(()=>{y("expandStart"),A({display:"block",overflow:"hidden",height:S}),T.current=requestAnimationFrame(()=>{y("expanding");let i=U(p);m(l(i)),p.current&&(p.current.style.transition=u(i),p.current.style.height=`${i}px`)})}):T.current=requestAnimationFrame(()=>{y("collapseStart");let i=U(p);m(l(i)),A({transition:u(i),height:`${i}px`}),T.current=requestAnimationFrame(()=>{y("collapsing"),A({height:S,overflow:"hidden"})})}),()=>{T.current&&cancelAnimationFrame(T.current),C.current&&B(C.current)}},[f,S,z,e,t,y]),{isExpanded:f,setExpanded:W,getToggleProps(a){let X=s({refKey:"ref",onClick(){},disabled:!1},a),{disabled:l,onClick:u,refKey:m}=X,i=F(X,["disabled","onClick","refKey"]),M=Y?Y.tagName==="BUTTON":void 0,pe=a==null?void 0:a[m||"ref"],k={id:`react-collapsed-toggle-${x}`,"aria-controls":`react-collapsed-panel-${x}`,"aria-expanded":f,onClick(me){l||(u==null||u(me),W(ge=>!ge))},[m||"ref"]:D(pe,fe)},G={type:"button",disabled:l?!0:void 0},J={"aria-disabled":l?!0:void 0,role:"button",tabIndex:l?-1:0};return s(M===!1?s(s({},k),J):M===!0?s(s({},k),G):s(s(s({},k),G),J),i)},getCollapseProps(a){let{style:l,refKey:u}=s({refKey:"ref",style:{}},a),m=a==null?void 0:a[u||"ref"];return te(s({id:`react-collapsed-panel-${x}`,"aria-hidden":!f,"aria-labelledby":`react-collapsed-toggle-${x}`,role:"region"},a),{[u||"ref"]:D(p,m),style:s(s({boxSizing:"border-box"},!ce&&!f?{display:S==="0px"?"none":"block",height:S,overflow:"hidden"}:{}),l)})}}}0&&(module.exports={useCollapse});