{"version":3,"file":"index12.mjs","sources":["../src/components/action-sheet/index.tsx"],"sourcesContent":["import { FunctionComponent, ReactNode, useState, useEffect } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport bottomStyles from \"./styles/ActionSheetBottomSheet.module.css\";\nimport sideStyles from \"./styles/ActionSheetSideSheet.module.css\";\nimport { LabelPairedXmarkMdBoldIcon } from \"@deriv/quill-icons\";\nimport SearchField from \"../input/search-field\";\nimport { useDevice } from \"../../hooks/useDevice\";\nimport useScrollDisable from \"../../hooks/useScrollDisable\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport BasicButton, { BasicButtonType } from \"../buttons/basic\";\nimport IconButton, { IconButtonType } from \"../buttons/icon\";\n\nexport type ActionSheetType = {\n  className?: string;\n  description?: string;\n  title?: string;\n  showButtonClose?: boolean;\n  controller?: ReactNode;\n  content?: ReactNode;\n  showHandleBar?: boolean;\n  showHeader?: boolean;\n  showSearchBar?: boolean;\n\n  /* Button props */\n  buttonPrimary?: BasicButtonType;\n  buttonSecondary?: BasicButtonType;\n\n  /* Event handlers */\n  onClose?: () => void;\n  onSearch?: (searchValue: string) => void;\n\n  /* Search props */\n  searchValue?: string;\n  searchPlaceholder?: string;\n\n  /* Icon props */\n  buttonIcon?: IconButtonType;\n\n  /** Variant props */\n  type?: \"auto\" | \"bottom\" | \"side\";\n\n  /** Display props */\n  show?: boolean;\n};\n\nconst getStyleForType = (type: string) => {\n  return type === \"side\" ? sideStyles : bottomStyles;\n};\n\nexport const ActionSheet: FunctionComponent<ActionSheetType> = ({\n  className = \"\",\n  type: defaultType = \"auto\",\n  description = \"Description\",\n  title = \"Title\",\n  showButtonClose = true,\n  controller,\n  content,\n  showHandleBar = true,\n  showHeader = true,\n  showSearchBar = true,\n  buttonPrimary,\n  buttonSecondary,\n  onClose,\n  onSearch,\n  searchValue: externalSearchValue,\n  searchPlaceholder = \"Search\",\n  buttonIcon,\n  show = true,\n}) => {\n  const { isDesktop, isDeviceDetected } = useDevice();\n  const [type, setType] = useState(defaultType);\n  const [searchValue, setSearchValue] = useState(externalSearchValue || \"\");\n  const styles = getStyleForType(type);\n\n  // Update search value if external value changes\n  useEffect(() => {\n    if (externalSearchValue !== undefined) {\n      setSearchValue(externalSearchValue);\n    }\n  }, [externalSearchValue]);\n\n  // Update type based on device and defaultType\n  useEffect(() => {\n    if (isDeviceDetected) {\n      if (defaultType === \"auto\") {\n        setType(isDesktop ? \"side\" : \"bottom\");\n      } else if (defaultType !== type) {\n        setType(defaultType);\n      }\n    }\n  }, [isDesktop, isDeviceDetected, defaultType]);\n\n  // Disable body scrolling when the action sheet is shown\n  useScrollDisable(show);\n\n  // If show is false, don't render anything\n  if (!show) {\n    return null;\n  }\n\n  const actionSheetContent = (\n    <motion.div\n      className={[\n        type === \"bottom\" ? styles.typehugContent : styles.actionSheetSideSheet,\n        className,\n        type === \"side\" ? \"quill-ui-next-actionsheet-full-height\" : \"\",\n        type === \"bottom\" ? \"quill-ui-next-actionsheet-full-width\" : \"\",\n      ].join(\" \")}\n      data-type={type}\n      {...(type === \"bottom\"\n        ? {\n            initial: { y: \"100%\" },\n            animate: { y: 0 },\n            exit: { y: \"100%\" },\n            transition: {\n              type: \"spring\",\n              damping: 30,\n              stiffness: 1000,\n              mass: 0.1,\n              duration: 0.3,\n            },\n            drag: \"y\" as const,\n            dragConstraints: { top: 0, bottom: 0 },\n            dragElastic: { top: 0, bottom: 0.5 },\n            onDragEnd: (_, info: any) => {\n              if (info.offset.y > 150 && onClose) {\n                onClose();\n              }\n            },\n          }\n        : {})}\n    >\n      {showHandleBar && type === \"bottom\" && (\n        <div className={styles.containerHandleBar}>\n          <div className={styles.handleBar} />\n        </div>\n      )}\n      {showHeader && (\n        <div className={styles.containerHeader}>\n          {type === \"side\" && (\n            <div className={styles.iconTitleCancel}>\n              <div className={styles.containerButtonIcon}>\n              {buttonIcon && (\n                  <IconButton\n                    {...buttonIcon}\n                    onClick={onClose}\n                    color=\"blackWhite\"\n                    size=\"lg\"\n                    style=\"tertiary\"\n                  />\n                )}\n              </div>\n              <div className={styles.title}>{title}</div>\n              <div className={styles.containerButtonClose}>\n                {showButtonClose && (\n                  <IconButton\n                    icon={<LabelPairedXmarkMdBoldIcon />}\n                    onClick={onClose}\n                    color=\"blackWhite\"\n                    size=\"lg\"\n                    style=\"tertiary\"\n                  />\n                )}\n              </div>\n            </div>\n          )}\n          {type === \"bottom\" && (\n            <div className={styles.titleIcon}>\n              <div className={styles.spacer} />\n              <div className={styles.title}>{title}</div>\n              <div className={styles.containerButtonIcon}>\n                {buttonIcon && (\n                  <IconButton\n                    {...buttonIcon}\n                    onClick={onClose}\n                    color=\"blackWhite\"\n                    size=\"lg\"\n                    style=\"tertiary\"\n                  />\n                )}\n              </div>\n            </div>\n          )}\n          {description && (\n            <div className={styles.containerDescription}>\n              <div className={styles.description}>{description}</div>\n            </div>\n          )}\n        </div>\n      )}\n      {showSearchBar && (\n        <div className={styles.containerSearchBar}>\n          <div className={styles.searchBar}>\n            <SearchField\n              placeholder={searchPlaceholder}\n              value={searchValue}\n              onChange={(value) => {\n                setSearchValue(value.toString());\n                onSearch?.(value.toString());\n              }}\n              className=\"quill-ui-next-actionsheet-input\"\n              size=\"sm\"\n            />\n          </div>\n        </div>\n      )}\n      {controller && (\n        <div className={styles.containerController}>\n          <div\n            className={`${styles.controller} quill-ui-next-actionsheet-content`}\n          >\n            {controller}\n          </div>\n        </div>\n      )}\n      {content && (\n        <div\n          className={`${styles.containerContent} quill-ui-next-actionsheet-content-container`}\n        >\n          <div\n            className={`${styles.content} quill-ui-next-actionsheet-content`}\n          >\n            {content}\n          </div>\n        </div>\n      )}\n      {(buttonPrimary || buttonSecondary) && (\n        <div className={styles.actionButtons}>\n          {buttonPrimary && (\n            <BasicButton\n              {...buttonPrimary}\n              style=\"primary\"\n              width=\"fill container\"\n              color=\"blackWhite\"\n            />\n          )}\n          {buttonSecondary && (\n            <BasicButton\n              {...buttonSecondary}\n              style=\"secondary\"\n              width=\"fill container\"\n              color=\"blackWhite\"\n            />\n          )}\n        </div>\n      )}\n    </motion.div>\n  );\n\n  const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (e.target === e.currentTarget) {\n      onClose?.();\n    }\n  };\n\n  return createPortal(\n    <AnimatePresence mode=\"wait\">\n      <div\n        className={`quill-ui-next-overlay type-${type}`}\n        onClick={handleOverlayClick}\n      >\n        {actionSheetContent}\n      </div>\n    </AnimatePresence>,\n    document.body\n  );\n};\n\nActionSheet.displayName = \"ActionSheet\";\n\nexport default ActionSheet;\n\n\n"],"names":[],"mappings":"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"}