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

React component - Side pane

/** @license React SidePane v2.4.6
 * react-side-pane.cjs.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.
 */
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),t=require("react"),r=require("react-focus-lock"),n=require("body-scroll-lock"),a=require("react-dom"),o=require("prop-types"),i=require("@babel/runtime/helpers/defineProperty"),d=require("react-transition-group");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(e),u=c(t),s=c(r),f=c(o),b=c(i);function p(e,t,r){var n=0;return n=t&&(t>=e||e-t<r)?t+r:e,Math.min(n,100)}function y(e){return{WebkitTransition:"opacity ".concat(e,"ms ease-out"),OTransition:"opacity ".concat(e,"ms ease-out"),transition:"opacity ".concat(e,"ms ease-out")}}function m(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){b.default(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],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.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 P={transform:"translateX(100%)"},O={entering:{transform:"translateX(100%)"},entered:{transform:"translateX(0%)"},exiting:{transform:"translateX(100%)"},exited:{transform:"translateX(100%)"}},E=u.default.forwardRef((function(e,t){var r=e.ariaLabel,n=e.ariaLabelledby,a=e.ariaDescribedBy,o=e.autoWidth,i=e.children,c=e.className,l=e.duration,s=e.onEnter,f=e.onEntered,b=e.onExited,p=e.onExiting,y=e.open,h=e.style,v=e.translateValue,g=e.width,E=k(k({},O),{},{entered:{transform:"translateX(+100%) translateX(-".concat(v,"vw)")}});return u.default.createElement(d.Transition,{mountOnEnter:!0,in:y,timeout:{appear:0,enter:0,exit:l},onEnter:s,onEntered:f,onExited:b,onExiting:p},(function(e){return u.default.createElement("div",{ref:t,"aria-describedby":a||null,"aria-label":r||"side pane","aria-labelledby":n||null,"aria-modal":"true",className:"".concat(_," ").concat(c),role:"dialog",style:k(k(k(k(k({},P),E[e]),m(l)),h),{},{width:o?"auto":"".concat(Math.min(g,100),"%")})},i)}))}));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){b.default(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 r=e.children,n=e.className,a=e.disableBackdropClick,o=e.duration,i=e.hideBackdrop,d=e.onClose,c=e.style,l=t.useRef(null);return u.default.createElement("div",{ref:l,"aria-label":"backdrop",className:"".concat(v," ").concat(n),"data-disable-backdrop":a,"data-hide-backdrop":i,role:"presentation",style:j(j({},y(o)),c),onClick:function(e){var t=e.target,r=l.current;a||t!==r||d()}},r)}var S=function(e,t){var r=document.getElementById(e);r&&r.getAttribute("aria-hidden")!==t&&r.setAttribute("aria-hidden",t)};function R(e){var r=e.appNodeId,o=void 0===r?"root":r,i=e["aria-describedby"],d=void 0===i?"":i,c=e["aria-label"],f=void 0===c?"side pane":c,b=e["aria-labelledby"],y=void 0===b?"":b,m=e.autoWidth,v=void 0!==m&&m,_=e.backdropClassName,g=void 0===_?"":_,k=e.backdropStyle,P=void 0===k?{}:k,O=e.children,w=e.className,j=void 0===w?"":w,R=e.containerId,B=void 0===R?"":R,C=e.disableBackdropClick,N=void 0!==C&&C,D=e.disableEscapeKeyDown,q=void 0!==D&&D,T=e.disableRestoreFocus,W=void 0!==T&&T,A=e.duration,X=void 0===A?250:A,I=e.hideBackdrop,K=void 0!==I&&I,L=e.offset,U=void 0===L?10:L,Y=e.onActive,F=void 0===Y?null:Y,M=e.onClose,V=e.open,Z=void 0!==V&&V,z=e.style,G=void 0===z?{}:z,H=e.width,J=void 0===H?0:H,Q=t.useRef(null),$=t.useRef(null),ee=t.useRef(null),te=t.useRef(J),re=t.useRef(p(te.current,0,U)),ne=t.useState(!1),ae=l.default(ne,2),oe=ae[0],ie=ae[1],de=t.useMemo((function(){return B?document.getElementById(B):document.body}),[B]);t.useEffect((function(){var e=Q.current,t=function(e){var t=e.code,r=e.key,n=e.keyCode,a=t||r||n;["Escape","Esc",27].some((function(e){return e===a}))&&"function"==typeof M&&M()};return!q&&oe&&(null==e||e.addEventListener("keydown",t)),function(){null==e||e.removeEventListener("keydown",t)}}),[oe,q,M]),t.useEffect((function(){var e=Q.current;Z||oe?n.disableBodyScroll(e):n.enableBodyScroll(e)}),[Z,oe]);var ce,le=t.useCallback((function(e){re.current=e,$.current.style.transform="translateX(+100%) translateX(-".concat(e,"vw)"),"function"==typeof F&&F(e)}),[F]),ue=t.useCallback((function(e){var t;S(o,"true"),null===(t=Q.current)||void 0===t||t.setAttribute("aria-hidden",(!!e).toString()),le(p(te.current,e,U))}),[o,U,le]),se=Z||oe,fe=(ce={onActive:ue},v&&(ce.ref=ee),ce);return a.createPortal(u.default.createElement(s.default,{autoFocus:!0,disabled:!se,returnFocus:!W,shards:[Q.current],whiteList:function(e){return de.contains(e)}},u.default.createElement("div",{ref:Q,className:h,open:se,tabIndex:-1},u.default.createElement(x,{className:g||"",disableBackdropClick:N,duration:X,hideBackdrop:K,style:P||{},onClose:M},u.default.createElement(E,{ref:$,ariaDescribedBy:d,ariaLabel:f,ariaLabelledby:y,autoWidth:v,className:j||"",duration:X,open:Z,style:G||{},translateValue:re.current,width:J,onEnter:function(){S(o,"true"),Q.current.focus(),ie(!0)},onEntered:function(){if(v){var e=(ee.current?ee.current.getBoundingClientRect().width:0)/document.body.clientWidth*100;te.current=e}else te.current=J;le(p(te.current,0,U))},onExited:function(){return ie(!1)},onExiting:function(){"function"==typeof F?F(0):S(o,"false")}},oe&&("function"==typeof O?O({onActive:ue}):u.default.cloneElement(u.default.Children.only(O),fe)))))),de)}R.propTypes="production"!==process.env.NODE_ENV?{appNodeId:f.default.string,"aria-describedby":f.default.string,"aria-label":f.default.string,"aria-labelledby":f.default.string,autoWidth:f.default.bool,backdropClassName:f.default.string,backdropStyle:f.default.object,children:f.default.oneOfType([f.default.func,f.default.element]).isRequired,className:f.default.string,containerId:f.default.string,disableBackdropClick:f.default.bool,disableEscapeKeyDown:f.default.bool,disableRestoreFocus:f.default.bool,duration:f.default.number,hideBackdrop:f.default.bool,offset:f.default.number,onActive:f.default.func,onClose:f.default.func.isRequired,open:f.default.bool.isRequired,style:f.default.object,width:f.default.number}:{},exports.SidePane=R;