@yamada-ui/notice/dist/chunk-G23NRPG6.mjs.map

Yamada UI notice component

{"version":3,"sources":["../src/notice-provider.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport type { MotionStyle, MotionVariants } from \"@yamada-ui/motion\"\nimport type { FC } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { memo, ui } from \"@yamada-ui/core\"\nimport { AnimatePresence, motion, useIsPresent } from \"@yamada-ui/motion\"\nimport { Portal } from \"@yamada-ui/portal\"\nimport { useTimeout } from \"@yamada-ui/use-timeout\"\nimport { cx, runIfFunc, useUpdateEffect } from \"@yamada-ui/utils\"\nimport { useEffect, useState, useSyncExternalStore } from \"react\"\nimport { noticeStore } from \"./notice\"\n\nexport interface NoticeProviderProps\n  extends Omit<Required<ThemeConfig>[\"notice\"], \"options\"> {}\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n  appendToParentPortal,\n  containerRef,\n  gap = \"fallback(4, 1rem)\",\n  variants,\n  itemProps,\n  listProps,\n}) => {\n  const state = useSyncExternalStore(\n    noticeStore.subscribe,\n    noticeStore.getSnapshot,\n    noticeStore.getSnapshot,\n  )\n\n  const components = Object.entries(state).map(([placement, notices]) => {\n    const top = placement.includes(\"top\")\n      ? \"env(safe-area-inset-top, 0px)\"\n      : undefined\n    const bottom = placement.includes(\"bottom\")\n      ? \"env(safe-area-inset-bottom, 0px)\"\n      : undefined\n    const right = !placement.includes(\"left\")\n      ? \"env(safe-area-inset-right, 0px)\"\n      : undefined\n    const left = !placement.includes(\"right\")\n      ? \"env(safe-area-inset-left, 0px)\"\n      : undefined\n\n    const css: CSSUIObject = {\n      bottom,\n      display: \"flex\",\n      flexDirection: \"column\",\n      gap,\n      left,\n      margin: gap,\n      pointerEvents: \"none\",\n      position: \"fixed\",\n      right,\n      top,\n      zIndex: \"fallback(zarbon, 160)\",\n    }\n\n    return (\n      <ui.ul\n        key={placement}\n        className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n        __css={css}\n        {...listProps}\n      >\n        <AnimatePresence initial={false}>\n          {notices.map((notice) => (\n            <NoticeComponent\n              key={notice.id}\n              variants={variants}\n              itemProps={itemProps}\n              {...notice}\n            />\n          ))}\n        </AnimatePresence>\n      </ui.ul>\n    )\n  })\n\n  return (\n    <Portal\n      appendToParentPortal={appendToParentPortal}\n      containerRef={containerRef}\n    >\n      {components}\n    </Portal>\n  )\n}\n\nconst defaultVariants: MotionVariants = {\n  animate: {\n    opacity: 1,\n    scale: 1,\n    transition: {\n      duration: 0.4,\n      ease: [0.4, 0, 0.2, 1],\n    },\n    x: 0,\n    y: 0,\n  },\n  exit: {\n    opacity: 0,\n    scale: 0.95,\n    transition: {\n      duration: 0.2,\n      ease: [0.4, 0, 1, 1],\n    },\n  },\n  initial: ({ placement }) => ({\n    [[\"bottom\", \"top\"].includes(placement) ? \"y\" : \"x\"]:\n      (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n    opacity: 0,\n  }),\n}\n\ninterface NoticeComponentProps\n  extends NoticeOptions,\n    Pick<NoticeProviderProps, \"itemProps\" | \"variants\"> {}\n\nconst NoticeComponent = memo(\n  ({\n    style,\n    duration = 5000,\n    isDelete = false,\n    message,\n    placement,\n    variants = defaultVariants,\n    itemProps,\n    onCloseComplete,\n    onDelete,\n  }: NoticeComponentProps) => {\n    const [delay, setDelay] = useState(duration)\n    const isPresent = useIsPresent()\n\n    useUpdateEffect(() => {\n      if (!isPresent) onCloseComplete?.()\n    }, [isPresent])\n\n    useUpdateEffect(() => {\n      setDelay(duration)\n    }, [duration])\n\n    const onMouseEnter = () => setDelay(null)\n    const onMouseLeave = () => setDelay(duration)\n\n    const onClose = () => {\n      if (isPresent) onDelete()\n    }\n\n    useEffect(() => {\n      if (isPresent && isDelete) onDelete()\n    }, [isPresent, isDelete, onDelete])\n\n    useTimeout(onClose, delay)\n\n    const css: CSSUIObject = {\n      maxW: \"36rem\",\n      minW: \"20rem\",\n      pointerEvents: \"auto\",\n      ...style,\n    }\n\n    return (\n      <motion.li\n        className=\"ui-notice__list__item\"\n        style={\n          {\n            display: \"flex\",\n            justifyContent: placement.includes(\"left\")\n              ? \"flex-start\"\n              : placement.includes(\"right\")\n                ? \"flex-end\"\n                : \"center\",\n          } as MotionStyle\n        }\n        animate=\"animate\"\n        custom={{ placement }}\n        exit=\"exit\"\n        initial=\"initial\"\n        layout\n        variants={variants}\n        onHoverEnd={onMouseLeave}\n        onHoverStart={onMouseEnter}\n        {...itemProps}\n      >\n        <ui.div className=\"ui-notice__list__item__inner\" __css={css}>\n          {runIfFunc(message, { onClose })}\n        </ui.div>\n      </motion.li>\n    )\n  },\n)\n\nNoticeComponent.displayName = \"NoticeComponent\"\nNoticeComponent.__ui__ = \"NoticeComponent\"\n"],"mappings":"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","names":[]}