react-side-pane/dist/react-side-pane.es.js

React component - Side pane

/** @license React SidePane v2.4.6
 * react-side-pane.es.js
 *
 * Copyright (c) Romain Coudour
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
import e from"@babel/runtime/helpers/slicedToArray";import t,{useRef as r,useState as n,useMemo as o,useEffect as a,useCallback as i}from"react";import c from"react-focus-lock";import{disableBodyScroll as d,enableBodyScroll as s}from"body-scroll-lock";import{createPortal as l}from"react-dom";import u from"prop-types";import p from"@babel/runtime/helpers/defineProperty";import{Transition as f}from"react-transition-group";function b(e,t,r){var n=0;return n=t&&(t>=e||e-t<r)?t+r:e,Math.min(n,100)}function m(e){return{WebkitTransition:"opacity ".concat(e,"ms ease-out"),OTransition:"opacity ".concat(e,"ms ease-out"),transition:"opacity ".concat(e,"ms ease-out")}}function y(e){return{WebkitTransition:"-webkit-transform ".concat(e,"ms ease-out"),OTransition:"transform ".concat(e,"ms ease-out"),transition:"transform ".concat(e,"ms ease-out, -webkit-transform ").concat(e,"ms ease-out")}}var h="SidePane_sidePane__2RWR-",v="SidePane_sidePane__backdrop__7KcYU",_="SidePane_sidePane__pane__9tRBZ";function g(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function k(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?g(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):g(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===r&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}(".SidePane_sidePane__2RWR-{bottom:0;height:100%;left:0;outline:none;position:fixed;right:0;top:0;width:100%;z-index:1000}.SidePane_sidePane__2RWR-:not([open]){display:none}.SidePane_sidePane__backdrop__7KcYU{background-color:rgba(0,0,0,.2);cursor:pointer;display:flex;flex-direction:row;height:inherit;justify-content:flex-end;pointer-events:auto;transition:opacity .25s ease-out;width:inherit;will-change:opacity}.SidePane_sidePane__backdrop__7KcYU[data-hide-backdrop=true]{background-color:transparent}.SidePane_sidePane__backdrop__7KcYU[data-disable-backdrop=true]{cursor:default}.SidePane_sidePane__pane__9tRBZ{background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,.5);cursor:default;height:100%;max-height:100%;max-width:100%;overflow:hidden;pointer-events:auto;transition:transform .25s ease-out;will-change:transform}@media (prefers-reduced-motion:reduce){.SidePane_sidePane__backdrop__7KcYU,.SidePane_sidePane__pane__9tRBZ{transition:none}}");var O={transform:"translateX(100%)"},P={entering:{transform:"translateX(100%)"},entered:{transform:"translateX(0%)"},exiting:{transform:"translateX(100%)"},exited:{transform:"translateX(100%)"}},E=t.forwardRef((function(e,r){var n=e.ariaLabel,o=e.ariaLabelledby,a=e.ariaDescribedBy,i=e.autoWidth,c=e.children,d=e.className,s=e.duration,l=e.onEnter,u=e.onEntered,p=e.onExited,b=e.onExiting,m=e.open,h=e.style,v=e.translateValue,g=e.width,E=k(k({},P),{},{entered:{transform:"translateX(+100%) translateX(-".concat(v,"vw)")}});return t.createElement(f,{mountOnEnter:!0,in:m,timeout:{appear:0,enter:0,exit:s},onEnter:l,onEntered:u,onExited:p,onExiting:b},(function(e){return t.createElement("div",{ref:r,"aria-describedby":a||null,"aria-label":n||"side pane","aria-labelledby":o||null,"aria-modal":"true",className:"".concat(_," ").concat(d),role:"dialog",style:k(k(k(k(k({},O),E[e]),y(s)),h),{},{width:i?"auto":"".concat(Math.min(g,100),"%")})},c)}))}));function w(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?w(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function x(e){var n=e.children,o=e.className,a=e.disableBackdropClick,i=e.duration,c=e.hideBackdrop,d=e.onClose,s=e.style,l=r(null);return t.createElement("div",{ref:l,"aria-label":"backdrop",className:"".concat(v," ").concat(o),"data-disable-backdrop":a,"data-hide-backdrop":c,role:"presentation",style:j(j({},m(i)),s),onClick:function(e){var t=e.target,r=l.current;a||t!==r||d()}},n)}var S=function(e,t){var r=document.getElementById(e);r&&r.getAttribute("aria-hidden")!==t&&r.setAttribute("aria-hidden",t)};function B(u){var p=u.appNodeId,f=void 0===p?"root":p,m=u["aria-describedby"],y=void 0===m?"":m,v=u["aria-label"],_=void 0===v?"side pane":v,g=u["aria-labelledby"],k=void 0===g?"":g,O=u.autoWidth,P=void 0!==O&&O,w=u.backdropClassName,j=void 0===w?"":w,B=u.backdropStyle,C=void 0===B?{}:B,N=u.children,R=u.className,D=void 0===R?"":R,T=u.containerId,W=void 0===T?"":T,A=u.disableBackdropClick,X=void 0!==A&&A,I=u.disableEscapeKeyDown,K=void 0!==I&&I,L=u.disableRestoreFocus,U=void 0!==L&&L,Y=u.duration,F=void 0===Y?250:Y,q=u.hideBackdrop,V=void 0!==q&&q,Z=u.offset,M=void 0===Z?10:Z,z=u.onActive,G=void 0===z?null:z,H=u.onClose,J=u.open,Q=void 0!==J&&J,$=u.style,ee=void 0===$?{}:$,te=u.width,re=void 0===te?0:te,ne=r(null),oe=r(null),ae=r(null),ie=r(re),ce=r(b(ie.current,0,M)),de=n(!1),se=e(de,2),le=se[0],ue=se[1],pe=o((function(){return W?document.getElementById(W):document.body}),[W]);a((function(){var e=ne.current,t=function(e){var t=e.code,r=e.key,n=e.keyCode,o=t||r||n;["Escape","Esc",27].some((function(e){return e===o}))&&"function"==typeof H&&H()};return!K&&le&&(null==e||e.addEventListener("keydown",t)),function(){null==e||e.removeEventListener("keydown",t)}}),[le,K,H]),a((function(){var e=ne.current;Q||le?d(e):s(e)}),[Q,le]);var fe,be=i((function(e){ce.current=e,oe.current.style.transform="translateX(+100%) translateX(-".concat(e,"vw)"),"function"==typeof G&&G(e)}),[G]),me=i((function(e){var t;S(f,"true"),null===(t=ne.current)||void 0===t||t.setAttribute("aria-hidden",(!!e).toString()),be(b(ie.current,e,M))}),[f,M,be]),ye=Q||le,he=(fe={onActive:me},P&&(fe.ref=ae),fe);return l(t.createElement(c,{autoFocus:!0,disabled:!ye,returnFocus:!U,shards:[ne.current],whiteList:function(e){return pe.contains(e)}},t.createElement("div",{ref:ne,className:h,open:ye,tabIndex:-1},t.createElement(x,{className:j||"",disableBackdropClick:X,duration:F,hideBackdrop:V,style:C||{},onClose:H},t.createElement(E,{ref:oe,ariaDescribedBy:y,ariaLabel:_,ariaLabelledby:k,autoWidth:P,className:D||"",duration:F,open:Q,style:ee||{},translateValue:ce.current,width:re,onEnter:function(){S(f,"true"),ne.current.focus(),ue(!0)},onEntered:function(){if(P){var e=(ae.current?ae.current.getBoundingClientRect().width:0)/document.body.clientWidth*100;ie.current=e}else ie.current=re;be(b(ie.current,0,M))},onExited:function(){return ue(!1)},onExiting:function(){"function"==typeof G?G(0):S(f,"false")}},le&&("function"==typeof N?N({onActive:me}):t.cloneElement(t.Children.only(N),he)))))),pe)}B.propTypes="production"!==process.env.NODE_ENV?{appNodeId:u.string,"aria-describedby":u.string,"aria-label":u.string,"aria-labelledby":u.string,autoWidth:u.bool,backdropClassName:u.string,backdropStyle:u.object,children:u.oneOfType([u.func,u.element]).isRequired,className:u.string,containerId:u.string,disableBackdropClick:u.bool,disableEscapeKeyDown:u.bool,disableRestoreFocus:u.bool,duration:u.number,hideBackdrop:u.bool,offset:u.number,onActive:u.func,onClose:u.func.isRequired,open:u.bool.isRequired,style:u.object,width:u.number}:{};export{B as SidePane};