{"version":3,"file":"index18.mjs","sources":["../src/components/notification/NotificationItem/index.tsx"],"sourcesContent":["import { FunctionComponent, useState, useEffect } from \"react\";\nimport desktopStyles from \"./styles/NotificationDesktopItem.module.css\";\nimport mobileStyles from \"./styles/NotificationMobileItem.module.css\";\nimport NotificationStatusIcon from \"../NotificationStatusIcon\";\nimport {\n  LabelPairedCheckMdRegularIcon,\n  LabelPairedTrashSmRegularIcon,\n} from \"@deriv/quill-icons\";\nimport { useHorizontalSwipe } from \"../../../hooks/useHorizontalSwipe\";\nimport { useDevice } from \"../../../hooks/useDevice\";\nimport { useFocusHandling } from \"../../../hooks/useFocusHandling\";\n\nexport type NotificationItemType = {\n  className?: string;\n  date?: string;\n  time?: string;\n  title?: string;\n  message?: string;\n  timeFormat?: string;\n  showDivider?: boolean;\n  showFocusRing?: boolean;\n\n  /** Variant props */\n  variant?: \"desktop\" | \"mobile\" | \"auto\";\n  state?: \"default\" | \"swipe\";\n  type?: \"informative\" | \"success\" | \"warning\" | \"danger\";\n\n  /** Action handlers */\n  onMarkAsRead?: () => void;\n  onDelete?: () => void;\n};\n\nexport const NotificationItem: FunctionComponent<NotificationItemType> = ({\n  className = \"\",\n  variant = \"auto\",\n  state = \"default\",\n  date = \"1 Jan 2023\",\n  time = \"00:00\",\n  title = \"Title\",\n  message = \"Message goes here\",\n  timeFormat = \"UTC\",\n  showDivider = false,\n  showFocusRing = false,\n  type = \"informative\",\n  onMarkAsRead,\n  onDelete,\n}) => {\n  // Determine which variant to use based on device if set to auto\n  const { isMobile } = useDevice();\n  const currentVariant =\n    variant === \"auto\" ? (isMobile ? \"mobile\" : \"desktop\") : variant;\n\n  // Select the appropriate styles based on variant\n  const styles = currentVariant === \"desktop\" ? desktopStyles : mobileStyles;\n\n  // Generate a unique ID for the component\n  const notificationId = `notification-${currentVariant}-item-${type}`;\n\n  // Mobile-specific swipe handling\n  const { isSwiped, resetSwipe, swipeHandlers } = useHorizontalSwipe({\n    initialState: state === \"swipe\",\n    threshold: 30,\n  });\n\n  const displayState = isSwiped ? \"swipe\" : \"default\";\n\n  // Track if the notification has been clicked/read\n  const [isRead, setIsRead] = useState(false);\n\n  // Track focus state for keyboard navigation\n  const [focus, setFocus] = useState(showFocusRing);\n\n  // Handle focus events\n  const { handleFocus, handleBlur } = useFocusHandling({\n    isDisabled: false,\n    setHighlight: setFocus,\n  });\n\n  // Reset isRead state when state prop changes (for Storybook controls)\n  useEffect(() => {\n    if (state === \"default\") {\n      setIsRead(false);\n    }\n  }, [state]);\n\n  // Handle notification click or mark as read\n  const handleNotificationClick = (readButton = false) => {\n    setIsRead(true);\n    if (onMarkAsRead) {\n      // Call onMarkAsRead if it's from the button or not in swipe state\n      if (readButton || displayState !== \"swipe\") {\n        onMarkAsRead();\n      }\n    }\n    // Reset swipe if action came from button\n    if (readButton && currentVariant === \"mobile\") {\n      resetSwipe();\n    }\n  };\n\n  // Handle item click\n  const handleItemClick = () => {\n    handleNotificationClick(false);\n  };\n\n  // Render desktop variant\n  if (currentVariant === \"desktop\") {\n    return (\n      <div\n        className={[\n          styles.root,\n          className,\n          \"quill-ui-next-pointer\",\n          \"quill-ui-next-component\",\n        ].join(\" \")}\n        data-state={state}\n        data-id={notificationId}\n        onClick={handleItemClick}\n        onFocus={handleFocus}\n        onBlur={handleBlur}\n        tabIndex={0}\n      >\n        <div className={styles.containerStatusbadge}>\n          <NotificationStatusIcon type={type} showBadge={!isRead} />\n        </div>\n        <div className={styles.detailsActionButtons}>\n          <div className={styles.details}>\n            <div className={styles.titleDescription}>\n              <b className={styles.title}>{title}</b>\n              <div className={styles.message}>{message}</div>\n            </div>\n            <div className={styles.dateTime}>\n              <div className={styles.date}>{date}</div>\n              <div className={styles.timeTimeFormat}>\n                <div className={styles.time}>{time}</div>\n                <div className={styles.timeFormat}>{timeFormat}</div>\n              </div>\n            </div>\n          </div>\n          <div className={styles.containerActionButtons}>\n            <div\n              className={styles.buttonMarkAsRead}\n              onClick={() => handleNotificationClick(true)}\n              role={onMarkAsRead ? \"button\" : undefined}\n              tabIndex={onMarkAsRead ? 0 : undefined}\n            >\n              <div className={`${styles.icon2} action-button-icon`}>\n                <LabelPairedCheckMdRegularIcon />\n              </div>\n              <div className={styles.bgFocus} />\n            </div>\n            <div\n              className={styles.buttonDelete}\n              onClick={() => onDelete?.()}\n              role={onDelete ? \"button\" : undefined}\n              tabIndex={onDelete ? 0 : undefined}\n            >\n              <div className={`${styles.icon4} action-button-icon`}>\n                <LabelPairedTrashSmRegularIcon />\n              </div>\n              <div className={styles.bgFocus1} />\n            </div>\n          </div>\n        </div>\n        {showDivider && <div className={styles.divider} />}\n        {focus && <div className={styles.bgFocus2} />}\n      </div>\n    );\n  }\n\n  // Render mobile variant\n  return (\n    <div\n      className={[styles.root, className, \"quill-ui-next-pointer\"].join(\" \")}\n      data-state={displayState}\n      data-id={notificationId}\n      {...swipeHandlers}\n    >\n      <div className={styles.item} onClick={handleItemClick}>\n        <div className={styles.containerStatusbadge}>\n          <NotificationStatusIcon type={type} showBadge={!isRead} />\n        </div>\n        <div className={styles.details}>\n          <div className={styles.titleDescription}>\n            <b className={styles.title}>{title}</b>\n            <div className={styles.message}>{message}</div>\n          </div>\n          <div className={styles.dateTime}>\n            <div className={styles.date}>{date}</div>\n            <div className={styles.timeTimeFormat}>\n              <div className={styles.time}>{time}</div>\n              <div className={styles.timeFormat}>{timeFormat}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div\n        className={`${styles.buttonMarkAsRead} quill-ui-next-pointer`}\n        onClick={() => {\n          if (displayState === \"swipe\") {\n            handleNotificationClick(true);\n          }\n        }}\n        role={onMarkAsRead && displayState === \"swipe\" ? \"button\" : undefined}\n        tabIndex={onMarkAsRead && displayState === \"swipe\" ? 0 : undefined}\n      >\n        <div className=\"action-button-icon\">\n          <LabelPairedCheckMdRegularIcon />\n        </div>\n      </div>\n      <div\n        className={`${styles.buttonDelete} quill-ui-next-pointer`}\n        onClick={() => {\n          if (displayState === \"swipe\" && onDelete) {\n            onDelete();\n            resetSwipe();\n          }\n        }}\n        role={onDelete && displayState === \"swipe\" ? \"button\" : undefined}\n        tabIndex={onDelete && displayState === \"swipe\" ? 0 : undefined}\n      >\n        <div className=\"action-button-icon\">\n          <LabelPairedTrashSmRegularIcon />\n        </div>\n      </div>\n      {showDivider && <div className={styles.divider} />}\n    </div>\n  );\n};\n\nexport default NotificationItem;\n"],"names":[],"mappings":"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"}