{"version":3,"file":"index107.cjs","sources":["../src/components/modal/base/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport modalStyle from \"./styles/Modal.module.css\";\nimport modalBottomStyle from \"./styles/ModalBottom.module.css\";\nimport { LabelPairedXmarkMdBoldIcon } from \"@deriv/quill-icons\";\nimport { useDevice } from \"../../../hooks/useDevice\";\nimport { useDragToClose } from \"../../../hooks/useDragToClose\";\nimport useScrollDisable from \"../../../hooks/useScrollDisable\";\nimport BasicButton, { BasicButtonType } from \"../../buttons/basic\";\n\nconst getStyleForType = (type: string) => {\n  return type === \"bottom\" ? modalBottomStyle : modalStyle;\n};\n\nexport type BaseModalType = {\n  className?: string;\n  description?: string;\n  title?: string;\n\n  /** Variant props */\n  height?: \"hug-content\" | \"fill-container\";\n  type?: \"auto\" | \"bottom\" | \"overlay\";\n\n  /* Custom props */\n  buttonPrimary?: BasicButtonType;\n  buttonSecondary?: BasicButtonType;\n  show: boolean;\n  onClose?: () => void;\n  customIcon?: ReactNode;\n  customImage?: string;\n\n  /** Display props */\n  showCloseButton?: boolean;\n  showHandleBar?: boolean;\n\n  /** Content prop */\n  content?: ReactNode;\n};\n\nconst ModalBase: FunctionComponent<BaseModalType> = ({\n  className = \"\",\n  height = \"hug-content\",\n  description = \"Add the content here\",\n  title = \"Title\",\n  buttonPrimary,\n  buttonSecondary,\n  show = false,\n  type: defaultType = \"auto\",\n  onClose,\n  showCloseButton = true,\n  showHandleBar = true,\n  customIcon,\n  customImage,\n  content,\n}) => {\n  const [type, setType] = useState(defaultType);\n  const styles = getStyleForType(type);\n  const modalId = `quill-modal-${type}`;\n\n  const { isDesktop, isDeviceDetected } = useDevice();\n\n  // Use the drag to close hook\n  const { dragHandlers, dragStyles } = useDragToClose({\n    isEnabled: type === \"bottom\",\n    onClose,\n    threshold: 150,\n  });\n\n  // Disable body scrolling when the modal is shown\n  useScrollDisable(show);\n\n  // Update type based on device and defaultType\n  useEffect(() => {\n    if (isDeviceDetected) {\n      if (defaultType === \"auto\") {\n        setType(isDesktop ? \"overlay\" : \"bottom\");\n      } else if (defaultType !== type) {\n        setType(defaultType);\n      }\n    }\n  }, [isDesktop, isDeviceDetected, defaultType]);\n\n  const modalContent = (\n    <div\n      className={[\n        styles.root,\n        className,\n        \"quill-ui-next-component\",\n        type === \"bottom\" ? \"quill-ui-next-actionsheet-full-width\" : \"\",\n      ].join(\" \")}\n      data-height={height}\n      data-type={type}\n      data-id={modalId}\n      style={dragStyles}\n    >\n      {customImage && (\n        <img className={styles.containerImage} alt=\"\" src={customImage} />\n      )}\n      {customIcon && (\n        <div className={styles.containerIcon}>\n          <div className={styles.customIcon}>\n            <div className={styles.icon}>{customIcon}</div>\n          </div>\n        </div>\n      )}\n      <div className={styles.titledescriptioncontent}>\n        <div className={styles.title}>{title}</div>\n        {description && <div className={styles.description}>{description}</div>}\n\n        {content &&\n          (type === \"bottom\" ? (\n            <div\n              className={`${styles.containerContent} quill-modal-bottom-container`}\n            >\n              <div className=\"quill-ui-next-modal-bottom-content\">\n                {content}\n              </div>\n            </div>\n          ) : (\n            <div\n              className={`${styles.containerContent} quill-ui-next-modal-content`}\n            >\n              {content}\n            </div>\n          ))}\n      </div>\n      <div\n        className={\n          type === \"bottom\" ? styles.containerAction : styles.containerButtons\n        }\n      >\n        <div className={styles.actionButtons}>\n          {buttonPrimary && (\n            <BasicButton\n              color=\"blackWhite\"\n              {...buttonPrimary}\n              style=\"primary\"\n              width=\"fill container\"\n            />\n          )}\n          {buttonSecondary && (\n            <BasicButton\n              color=\"blackWhite\"\n              {...buttonSecondary}\n              style=\"secondary\"\n              width=\"fill container\"\n            />\n          )}\n        </div>\n      </div>\n\n      {showCloseButton && type === \"overlay\" && (\n        <div className={styles.containerButtonClose}>\n          <div className={styles.buttonClose}>\n            <div className={styles.iconCustom}>\n              <div\n                className={`${styles.icon7} quill-ui-next-pointer`}\n                onClick={onClose}\n              >\n                <LabelPairedXmarkMdBoldIcon />\n              </div>\n            </div>\n            <div className={styles.bgFocus2} />\n            <div className={styles.iconColorReference}>Label</div>\n          </div>\n        </div>\n      )}\n\n      {showHandleBar && type === \"bottom\" && (\n        <div className={styles.containerHandleBar} {...dragHandlers}>\n          <div className={styles.handleBar} />\n        </div>\n      )}\n    </div>\n  );\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (e.target === e.currentTarget) {\n      onClose?.();\n    }\n  };\n\n  if (!show) {\n    return null;\n  }\n\n  return createPortal(\n    <div\n      className={`quill-ui-next-overlay type-${type}`}\n      onClick={handleOverlayClick}\n    >\n      {modalContent}\n    </div>,\n    document.body\n  );\n};\n\nexport default ModalBase;\n"],"names":["modalBottomStyle","modalStyle","useState","useDevice","useDragToClose","useEffect","jsxs","jsx","BasicButton","LabelPairedXmarkMdBoldIcon","createPortal"],"mappings":"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"}