{"version":3,"file":"js/styleguide-components-Modal-Modal-cb73a983e247b1735351.chunk.js","mappings":"slBAyBA,QAfoB,SAAHA,GAAA,IAAMC,EAAQD,EAARC,SAAaC,EAAKC,EAAAH,EAAAI,GAAA,OACvCC,EAAAA,cAAAA,EAAAA,SAAA,KACEA,EAAAA,cAAA,YACAA,EAAAA,cAAA,OAAKC,UAAWC,ICVX,kCDU+BL,EAAMI,YACxCD,EAAAA,cAACG,EAAAA,EAAKC,UAAS,CAACH,UCbb,iCDcDD,EAAAA,cAACG,EAAAA,EAAI,CAACF,UCbL,2BDa0BI,WAAS,GAClCL,EAAAA,cAACG,EAAAA,EAAKG,IAAG,CAACL,UCZX,2BDaGD,EAAAA,cAACG,EAAAA,EAAKI,IAAG,KAAEX,OAKlB,E,g8DEfL,IAAMY,EAAkC,CACtCC,SAAU,QACVC,OAAQ,KACRC,IAAK,EACLC,OAAQ,EACRC,KAAM,EACNC,MAAO,GAGHC,EAAW,SAAAlB,GAAK,OAEpBG,EAAAA,cAAA,MAAAgB,OAAAC,OAAA,CAAKhB,UAAU,0CAA6CJ,GAAa,EA6G3E,QA7Fc,SAAHF,GAUG,IATZuB,EAAKvB,EAALuB,MACAtB,EAAQD,EAARC,SACAuB,EAAOxB,EAAPwB,QACAC,EAAKzB,EAALyB,MACAC,EAAM1B,EAAN0B,OACAC,EAAS3B,EAAT2B,UACAC,EAAU5B,EAAV4B,WACAC,EAAmB7B,EAAnB6B,oBACG3B,EAAKC,EAAAH,EAAAI,GAEiD0B,EAAAC,EAArB1B,EAAAA,UAAe,GAAM,GAAlD2B,EAAUF,EAAA,GAAEG,EAAaH,EAAA,GAE1BI,EAAiB7B,EAAAA,aAAkB,SAAA8B,GAAa,OAAI9B,EAAAA,cAACe,EAAae,EAAiB,GAAE,IAErFC,EAAY,WAChBH,GAAc,GACVT,GACFA,GAEJ,EAEMa,EAAqB,SAAAC,GACzB,IAAIC,GAAuB,EAC3BC,SAASC,iBAAiB,2BAA2BC,SAAQ,SAAAC,GAI3D,GAHIA,EAAQC,SAASN,EAAMO,UACzBN,GAAuB,GAErBI,EAAS,CACX,IAAMG,EAAOH,EAAQI,wBAEnBT,EAAMU,SAAWF,EAAK5B,MACtBoB,EAAMU,SAAWF,EAAK3B,OACtBmB,EAAMW,SAAWH,EAAK9B,KACtBsB,EAAMW,SAAWH,EAAK7B,SAEtBsB,GAAuB,EAE3B,CACF,IAEKA,GACCf,IAAYK,GACdL,GAGN,EAWA,OATAnB,EAAAA,WAAgB,WAId,OAHAmC,SAASU,iBAAiB,YAAab,GACvCJ,EAAcV,GAEP,WACLiB,SAASW,oBAAoB,YAAad,EAC5C,CACF,GAAG,CAACd,IAGFlB,EAAAA,cAAC+C,EAAAA,EAAO,CACN,kBAAgB,cAEhBC,MAAOxC,EACPyC,KAAMtB,EACNE,eAAgBA,EAChBqB,gBAAiBnB,GAEjB/B,EAAAA,cAAA,OACEC,UAAWC,ICnGV,uBDmGyBL,EAAMI,YAAaqB,GAAa,yBAC1D,aAAW,SAEXtB,EAAAA,cAACmD,EAAAA,GAAS,CAACC,KAAK,KAAKnD,UCvGpB,sBDuG0CoD,QAAStB,EAAW,UAAQ,oBACpEX,GAASA,EACZpB,EAAAA,cAAA,OACEC,UAAWC,ICxGZ,8BDwGkCmB,GAAU,UAAWC,GAAa,qBAAoBgC,EAAA,GCtGxF,oCDuG8B/B,KAG7BvB,EAAAA,cAAA,OACEC,UAAWC,IC5Gd,kCD8GKqB,EAAa,kBAAoB,iBAChCF,GAAU,UACTC,GAAa,uBAGhB1B,MAGFyB,GAAUrB,EAAAA,cAACuD,EAAW,KAAElC,IAInC,C","sources":["webpack://printivity/./client/app/styleguide/components/Modal/ModalFooter/ModalFooter.tsx","webpack://printivity/./client/app/styleguide/components/Modal/ModalFooter/ModalFooter.scss?7944","webpack://printivity/./client/app/styleguide/components/Modal/Modal.tsx","webpack://printivity/./client/app/styleguide/components/Modal/Modal.scss?367c"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as css from './ModalFooter.scss';\nimport Grid from 'styleguide/components/Grid/Grid';\n\ninterface Props {\n  className?: string;\n  children: React.ReactNode;\n}\n\nconst ModalFooter = ({ children, ...props }: Props) => (\n  <>\n    <div />\n    <div className={cn(css.modalFooter, props.className)}>\n      <Grid.Container className={css.container}>\n        <Grid className={css.grid} noPadding>\n          <Grid.Row className={css.row}>\n            <Grid.Col>{children}</Grid.Col>\n          </Grid.Row>\n        </Grid>\n      </Grid.Container>\n    </div>\n  </>\n);\n\nexport default ModalFooter;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"ModalFooter__container__MKZJX\";\nvar _2 = \"ModalFooter__grid__sNUZ0\";\nvar _3 = \"ModalFooter__modalFooter__GA678\";\nvar _4 = \"ModalFooter__row__AeHth\";\nexport { _1 as \"container\", _2 as \"grid\", _3 as \"modalFooter\", _4 as \"row\" }\n","import * as React from 'react';\nimport ROModal from 'react-overlays/Modal';\nimport cn from 'classnames';\nimport * as css from './Modal.scss';\nimport { IconClose } from 'styleguide/icons';\nimport ModalFooter from './ModalFooter/ModalFooter';\n\nconst modalStyle: React.CSSProperties = {\n  position: 'fixed',\n  zIndex: 1040,\n  top: 0,\n  bottom: 0,\n  left: 0,\n  right: 0,\n};\n\nconst Backdrop = props => (\n  // eslint-disable-next-line react/self-closing-comp\n  <div className=\"fixed inset-0 z-40 bg-black opacity-50\" {...props}></div>\n);\n\n// TODO: pulkit. types should be in sync with FileStatus.tsx and Modal.stories\ninterface Props {\n  children?: React.ReactNode;\n  onClose?: () => void;\n  shown?: boolean;\n  className?: string;\n  title?: React.ReactNode;\n  footer?: React.ReactNode;\n  fullWidth?: boolean;\n  hideScroll?: boolean;\n  disableClickOutside?: boolean;\n}\n\nconst Modal = ({\n  shown,\n  children,\n  onClose,\n  title,\n  footer,\n  fullWidth,\n  hideScroll,\n  disableClickOutside,\n  ...props\n}: Props) => {\n  const [modalShown, setModalShown] = React.useState(false);\n\n  const renderBackdrop = React.useCallback(backdropProps => <Backdrop {...backdropProps} />, []);\n\n  const hideModal = () => {\n    setModalShown(false);\n    if (onClose) {\n      onClose();\n    }\n  };\n\n  const handleClickOutside = event => {\n    let clickInsideSomeModal = false;\n    document.querySelectorAll('div[data-modal=\"modal\"]').forEach(element => {\n      if (element.contains(event.target)) {\n        clickInsideSomeModal = true;\n      }\n      if (element) {\n        const rect = element.getBoundingClientRect();\n        const isInModal =\n          event.clientX >= rect.left &&\n          event.clientX <= rect.right &&\n          event.clientY >= rect.top &&\n          event.clientY <= rect.bottom;\n        if (isInModal) {\n          clickInsideSomeModal = true;\n        }\n      }\n    });\n\n    if (!clickInsideSomeModal) {\n      if (onClose && !disableClickOutside) {\n        onClose();\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    document.addEventListener('mousedown', handleClickOutside);\n    setModalShown(shown);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClickOutside);\n    };\n  }, [shown]);\n\n  return (\n    <ROModal\n      aria-labelledby=\"modal-label\"\n      // @ts-ignore\n      style={modalStyle}\n      show={modalShown}\n      renderBackdrop={renderBackdrop}\n      onEscapeKeyDown={hideModal}\n    >\n      <div\n        className={cn(css.dialog, props.className, !!fullWidth && '!h-[95%] !max-w-[95%]')}\n        data-modal=\"modal\"\n      >\n        <IconClose size=\"xs\" className={css.close} onClick={hideModal} data-cy=\"closeModalBtn\" />\n        {!!title && title}\n        <div\n          className={cn(css.modalContent, !footer && '!pb-0', !!fullWidth && 'h-full !max-h-full', {\n            [css.modalContentScroll]: !hideScroll,\n          })}\n        >\n          <div\n            className={cn(\n              css.modalContentInner,\n              hideScroll ? 'overflow-hidden' : 'overflow-auto',\n              !footer && '!pb-0',\n              !!fullWidth && 'h-full !max-h-full',\n            )}\n          >\n            {children}\n          </div>\n        </div>\n        {!!footer && <ModalFooter>{footer}</ModalFooter>}\n      </div>\n    </ROModal>\n  );\n};\nexport default Modal;\n","// extracted by mini-css-extract-plugin\nvar _1 = \"Modal__close__wvOKL\";\nvar _2 = \"Modal__dialog__iECyz\";\nvar _3 = \"Modal__modalContent__J8MQ6\";\nvar _4 = \"Modal__modalContentInner__MP1xZ\";\nvar _5 = \"Modal__modalContentScroll__OnT0q\";\nexport { _1 as \"close\", _2 as \"dialog\", _3 as \"modalContent\", _4 as \"modalContentInner\", _5 as \"modalContentScroll\" }\n"],"names":["_ref","children","props","_objectWithoutProperties","_excluded","React","className","cn","Grid","Container","noPadding","Row","Col","modalStyle","position","zIndex","top","bottom","left","right","Backdrop","Object","assign","shown","onClose","title","footer","fullWidth","hideScroll","disableClickOutside","_React$useState2","_slicedToArray","modalShown","setModalShown","renderBackdrop","backdropProps","hideModal","handleClickOutside","event","clickInsideSomeModal","document","querySelectorAll","forEach","element","contains","target","rect","getBoundingClientRect","clientX","clientY","addEventListener","removeEventListener","ROModal","style","show","onEscapeKeyDown","IconClose","size","onClick","_defineProperty","ModalFooter"],"sourceRoot":""}