{"version":3,"file":"DDXModal-B3IhhHks-chunk.js","sources":["../../../src/components/ddx-modal/DDXModal.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\ninterface DDXModalProps {\n\tclassName?: string;\n\tchildren: React.ReactElement;\n\thandleCloseModal: Function;\n\tshowModal: boolean;\n\tariaLabelledBy?: string;\n\tariaModal?: boolean;\n\tariaLabel?: string;\n\tforceInlineModal?: boolean;\n}\n\nexport const DDXModal: React.FC<DDXModalProps> = ({\n\tclassName,\n\tchildren,\n\thandleCloseModal,\n\tshowModal,\n\tariaLabel,\n\tariaLabelledBy,\n\tariaModal,\n\tforceInlineModal = false\n}) => {\n\tconst dialogRef = useRef<HTMLDialogElement>(null);\n\tconst dialogBackdropRef = useRef<HTMLDivElement>(null);\n\tconst [openModal, setOpenModal] = useState(showModal);\n\n\tuseEffect(() => {\n\t\tsetOpenModal(showModal);\n\t}, [showModal]);\n\n\tuseEffect(() => {\n\t\tconst dialog = dialogRef.current;\n\t\tconst dialogBackdrop = dialogBackdropRef.current;\n\n\t\tconst handleKeyDown = (event: KeyboardEvent): void => {\n\t\t\tconst allowedKeys: Set<string> = new Set([\"Escape\"]);\n\t\t\tif (!allowedKeys.has(event.code) || !event.composed) return;\n\t\t\tevent.preventDefault();\n\t\t\thandleCloseModal();\n\t\t};\n\n\t\tif (dialog && dialogBackdrop) {\n\t\t\t// This prevents the close button from being focused as soon as the dialog opens. Safari doesn't fall for blur trap so this is the easiest way to achieve this.\n\t\t\tdialog.querySelector(\":last-child\")?.setAttribute(\"tabIndex\", \"0\");\n\t\t\tdialogBackdrop.addEventListener(\"click\", () => handleCloseModal());\n\t\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\n\t\t\tif (openModal) {\n\t\t\t\tforceInlineModal ? dialog.show() : dialog.showModal();\n\t\t\t}\n\t\t}\n\n\t\treturn () => {\n\t\t\tdialogBackdrop?.removeEventListener(\"click\", () => handleCloseModal());\n\t\t\twindow.removeEventListener(\"keydown\", handleKeyDown);\n\t\t};\n\t}, [dialogRef, dialogBackdropRef, handleCloseModal, openModal, forceInlineModal]);\n\n\treturn openModal ? (\n\t\t<dialog\n\t\t\tclassName={`ddx-modal ${className} ${openModal ? \"\" : \"closed\"}${forceInlineModal ? \" ddx-modal-inline\" : \"\"}`}\n\t\t\tref={dialogRef}\n\t\t\taria-labelledby={ariaLabelledBy}\n\t\t\taria-modal={ariaModal}\n\t\t\taria-label={ariaLabel}\n\t\t>\n\t\t\t<div className={`ddx-modal-backdrop ${className}-backdrop`} ref={dialogBackdropRef} />\n\t\t\t{children}\n\t\t</dialog>\n\t) : null;\n};\n"],"names":["DDXModal","className","children","handleCloseModal","showModal","ariaLabel","ariaLabelledBy","ariaModal","forceInlineModal","dialogRef","useRef","dialogBackdropRef","openModal","setOpenModal","useState","useEffect","dialog","dialogBackdrop","handleKeyDown","event","_a","jsxs","jsx"],"mappings":"8CAaO,MAAMA,EAAoC,CAAC,CACjD,UAAAC,EACA,SAAAC,EACA,iBAAAC,EACA,UAAAC,EACA,UAAAC,EACA,eAAAC,EACA,UAAAC,EACA,iBAAAC,EAAmB,EACpB,IAAM,CACC,MAAAC,EAAYC,SAA0B,IAAI,EAC1CC,EAAoBD,SAAuB,IAAI,EAC/C,CAACE,EAAWC,CAAY,EAAIC,EAAAA,SAASV,CAAS,EAEpDW,OAAAA,EAAAA,UAAU,IAAM,CACfF,EAAaT,CAAS,CAAA,EACpB,CAACA,CAAS,CAAC,EAEdW,EAAAA,UAAU,IAAM,OACf,MAAMC,EAASP,EAAU,QACnBQ,EAAiBN,EAAkB,QAEnCO,EAAiBC,GAA+B,CAEjD,CAD6B,IAAI,IAAI,CAAC,QAAQ,CAAC,EAClC,IAAIA,EAAM,IAAI,GAAK,CAACA,EAAM,WAC3CA,EAAM,eAAe,EACJhB,EAAA,EAClB,EAEA,OAAIa,GAAUC,KAEbG,EAAAJ,EAAO,cAAc,aAAa,IAAlC,MAAAI,EAAqC,aAAa,WAAY,KAC9DH,EAAe,iBAAiB,QAAS,IAAMd,EAAA,CAAkB,EAC1D,OAAA,iBAAiB,UAAWe,CAAa,EAE5CN,IACHJ,EAAmBQ,EAAO,OAASA,EAAO,UAAU,IAI/C,IAAM,CACZC,GAAA,MAAAA,EAAgB,oBAAoB,QAAS,IAAMd,EAAA,GAC5C,OAAA,oBAAoB,UAAWe,CAAa,CACpD,CAAA,EACE,CAACT,EAAWE,EAAmBR,EAAkBS,EAAWJ,CAAgB,CAAC,EAEzEI,EACNS,EAAA,KAAC,SAAA,CACA,UAAW,aAAapB,CAAS,IAAIW,EAAY,GAAK,QAAQ,GAAGJ,EAAmB,oBAAsB,EAAE,GAC5G,IAAKC,EACL,kBAAiBH,EACjB,aAAYC,EACZ,aAAYF,EAEZ,SAAA,CAAAiB,MAAC,OAAI,UAAW,sBAAsBrB,CAAS,YAAa,IAAKU,EAAmB,EACnFT,CAAA,CAAA,CAAA,EAEC,IACL"}