{"version":3,"sources":["../src/components/modal/modal.tsx","../src/components/modal/dialog.tsx"],"names":["React","ModalDialog","id","children","classes","modalRef","openOnMount","props","ui_default","e","dialog_default","Modal","openChild","closeChild","modalHeader","modalFooter","showOpen","dialogRef","openModal","closeModal","Button"],"mappings":"kFAAA,OAAOA,MAAW,QCClB,OAAOA,MAAW,QAmBX,IAAMC,EAAc,CAAC,CAC1B,GAAAC,EACA,SAAAC,EACA,QAAAC,EACA,SAAAC,EACA,YAAAC,EACA,GAAGC,CACL,IAQIP,EAAA,cAACQ,EAAA,CACC,GAAG,SACH,GAAIN,EACJ,QAASE,EACT,IAAKC,EACL,KAAMC,EACN,QAbsBG,GAA+C,CACnEA,EAAE,gBAAkBA,EAAE,QACxBA,EAAE,cAAc,MAAM,CAE1B,EAUK,GAAGF,GAEHJ,CACH,EAIGO,EAAQV,EAAM,KAAKC,CAAW,EACrCA,EAAY,YAAc,SDnBnB,IAAMU,EAAQ,CAAC,CACpB,UAAAC,EACA,WAAAC,EACA,YAAAC,EACA,YAAAC,EACA,SAAAZ,EACA,SAAAa,EAAW,GACX,GAAGT,CACL,IAAkB,CAChB,IAAMU,EAAYjB,EAAM,OAA0B,IAAI,EAChDkB,EAAY,IAAY,CACxBD,EAAU,UACRD,EAAUC,EAAU,QAAQ,KAAK,EAChCA,EAAU,QAAQ,UAAU,EAErC,EACME,EAAa,IAAM,CACnBF,EAAU,SACZA,EAAU,QAAQ,MAAM,CAE5B,EAEA,OACEjB,EAAA,cAAAA,EAAA,cACEA,EAAA,cAACC,EAAA,CAAY,SAAUgB,EAAW,YAAaD,EAAW,GAAGT,GAC3DP,EAAA,cAAC,eACEc,EACAX,EACAY,GACCf,EAAA,cAAC,WACCA,EAAA,cAACoB,EAAA,CACC,KAAK,SACL,YAAa,IAAM,CACjBD,EAAW,CACb,GAECN,GAAc,OACjB,EAAU,GACZ,CAEJ,CACF,EACC,CAACG,GACAhB,EAAA,cAACoB,EAAA,CAAO,KAAK,SAAS,YAAaF,GAChCN,GAAa,YAChB,CAEJ,CAEJ,EAEAD,EAAM,YAAc","sourcesContent":["import React from \"react\";\nimport { ComponentProps } from \"../../types\";\nimport { Button } from \"../buttons/button\";\nimport { ModalDialog } from \"./dialog\";\n\nexport interface ModalProps extends ComponentProps {\n  /**\n   * The child component/content for open button\n   */\n  openChild?: React.ReactNode;\n  /**\n   * The child component/content for close button\n   */\n  closeChild?: React.ReactNode;\n  /**\n   * The child component/content for modal header\n   */\n  modalHeader?: React.ReactNode;\n  /**\n   * The child component/content for modal footer\n   */\n  modalFooter?: React.ReactNode;\n  /**\n   * The child component/content for modal body\n   */\n  children: React.ReactNode;\n  /**\n   * Open modal on mount when set to true\n   */\n  showOpen?: boolean;\n}\nexport const Modal = ({\n  openChild,\n  closeChild,\n  modalHeader,\n  modalFooter,\n  children,\n  showOpen = false,\n  ...props\n}: ModalProps) => {\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n  const openModal = (): void => {\n    if (dialogRef.current) {\n      if (showOpen) dialogRef.current.show();\n      else dialogRef.current.showModal();\n    }\n  };\n  const closeModal = () => {\n    if (dialogRef.current) {\n      dialogRef.current.close();\n    }\n  };\n\n  return (\n    <>\n      <ModalDialog modalRef={dialogRef} openOnMount={showOpen} {...props}>\n        <section>\n          {modalHeader}\n          {children}\n          {modalFooter ?? (\n            <div>\n              <Button\n                type=\"button\"\n                pointerDown={() => {\n                  closeModal();\n                }}\n              >\n                {closeChild || \"Close\"}\n              </Button>{\" \"}\n            </div>\n          )}\n        </section>\n      </ModalDialog>\n      {!showOpen && (\n        <Button type=\"button\" pointerDown={openModal}>\n          {openChild || \"Open Modal\"}\n        </Button>\n      )}\n    </>\n  );\n};\n\nModal.displayName = \"Modal\";\n","import UI from \"../ui\";\nimport React from \"react\";\n\nexport type DialogProps = {\n  /**\n   * React ref for dialog element\n   */\n  modalRef: React.RefObject<HTMLDialogElement>;\n  /**\n   * Handle close modal event\n   */\n  closeModal?: (e: React.SyntheticEvent<HTMLDialogElement>) => void;\n  /**\n   * open modal on mount\n   */\n  openOnMount?: boolean;\n} & React.ComponentProps<typeof UI>;\n/**\n * Dialog component\n */\nexport const ModalDialog = ({\n  id,\n  children,\n  classes,\n  modalRef,\n  openOnMount,\n  ...props\n}: DialogProps) => {\n  const handleCloseModal = (e: React.SyntheticEvent<HTMLDialogElement>) => {\n    if (e.currentTarget === e.target) {\n      e.currentTarget.close();\n    }\n  };\n\n  return (\n    <UI\n      as=\"dialog\"\n      id={id}\n      classes={classes}\n      ref={modalRef}\n      open={openOnMount}\n      onClick={handleCloseModal}\n      {...props}\n    >\n      {children}\n    </UI>\n  );\n};\n\nexport default React.memo(ModalDialog);\nModalDialog.displayName = \"Dialog\";\n"]}