@yamada-ui/notice 1.0.26 → 2.0.0-next-20240519094303
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/{chunk-BRYEVEUJ.mjs → chunk-LZF7OFWA.mjs} +3 -3
- package/dist/{chunk-BRYEVEUJ.mjs.map → chunk-LZF7OFWA.mjs.map} +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/notice-provider.js +2 -2
- package/dist/notice-provider.js.map +1 -1
- package/dist/notice-provider.mjs +1 -1
- package/package.json +1 -1
@@ -124,7 +124,7 @@ var NoticeComponent = memo(
|
|
124
124
|
motion.li,
|
125
125
|
{
|
126
126
|
layout: true,
|
127
|
-
className: "ui-
|
127
|
+
className: "ui-notice__item",
|
128
128
|
variants,
|
129
129
|
initial: "initial",
|
130
130
|
animate: "animate",
|
@@ -136,7 +136,7 @@ var NoticeComponent = memo(
|
|
136
136
|
display: "flex",
|
137
137
|
justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
|
138
138
|
},
|
139
|
-
children: /* @__PURE__ */ jsx(ui.div, { className: "ui-
|
139
|
+
children: /* @__PURE__ */ jsx(ui.div, { className: "ui-notice__item-inner", __css: css, children: runIfFunc(message, { onClose }) })
|
140
140
|
}
|
141
141
|
);
|
142
142
|
}
|
@@ -146,4 +146,4 @@ NoticeComponent.displayName = "NoticeComponent";
|
|
146
146
|
export {
|
147
147
|
NoticeProvider
|
148
148
|
};
|
149
|
-
//# sourceMappingURL=chunk-
|
149
|
+
//# sourceMappingURL=chunk-LZF7OFWA.mjs.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/notice-provider.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { MotionVariants, MotionStyle } from \"@yamada-ui/motion\"\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 type { FC } from \"react\"\nimport { memo, useEffect, useState, useSyncExternalStore } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { noticeStore } from \"./notice\"\n\nexport type NoticeProviderProps = Omit<\n Required<ThemeConfig>[\"notice\"],\n \"options\"\n>\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n variants,\n gap = \"fallback(4, 1rem)\",\n appendToParentPortal,\n containerRef,\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 position: \"fixed\",\n zIndex: \"fallback(zarbon, 160)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin: gap,\n gap,\n top,\n bottom,\n right,\n left,\n }\n\n return (\n <ui.ul\n key={placement}\n className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n __css={css}\n >\n <AnimatePresence initial={false}>\n {notices.map((notice) => (\n <NoticeComponent key={notice.id} variants={variants} {...notice} />\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 initial: ({ placement }) => ({\n opacity: 0,\n [[\"top\", \"bottom\"].includes(placement) ? \"y\" : \"x\"]:\n (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n }),\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1],\n },\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}\n\ntype NoticeComponentProps = NoticeOptions &\n Pick<NoticeProviderProps, \"variants\">\n\nconst NoticeComponent = memo(\n ({\n variants = defaultVariants,\n placement,\n duration = 5000,\n message,\n onCloseComplete,\n isDelete = false,\n onDelete,\n style,\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 pointerEvents: \"auto\",\n maxW: \"36rem\",\n minW: \"20rem\",\n ...style,\n }\n\n return (\n <motion.li\n layout\n className=\"ui-
|
1
|
+
{"version":3,"sources":["../src/notice-provider.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { MotionVariants, MotionStyle } from \"@yamada-ui/motion\"\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 type { FC } from \"react\"\nimport { memo, useEffect, useState, useSyncExternalStore } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { noticeStore } from \"./notice\"\n\nexport type NoticeProviderProps = Omit<\n Required<ThemeConfig>[\"notice\"],\n \"options\"\n>\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n variants,\n gap = \"fallback(4, 1rem)\",\n appendToParentPortal,\n containerRef,\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 position: \"fixed\",\n zIndex: \"fallback(zarbon, 160)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin: gap,\n gap,\n top,\n bottom,\n right,\n left,\n }\n\n return (\n <ui.ul\n key={placement}\n className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n __css={css}\n >\n <AnimatePresence initial={false}>\n {notices.map((notice) => (\n <NoticeComponent key={notice.id} variants={variants} {...notice} />\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 initial: ({ placement }) => ({\n opacity: 0,\n [[\"top\", \"bottom\"].includes(placement) ? \"y\" : \"x\"]:\n (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n }),\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1],\n },\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}\n\ntype NoticeComponentProps = NoticeOptions &\n Pick<NoticeProviderProps, \"variants\">\n\nconst NoticeComponent = memo(\n ({\n variants = defaultVariants,\n placement,\n duration = 5000,\n message,\n onCloseComplete,\n isDelete = false,\n onDelete,\n style,\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 pointerEvents: \"auto\",\n maxW: \"36rem\",\n minW: \"20rem\",\n ...style,\n }\n\n return (\n <motion.li\n layout\n className=\"ui-notice__item\"\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n onHoverStart={onMouseEnter}\n onHoverEnd={onMouseLeave}\n custom={{ placement }}\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 >\n <ui.div className=\"ui-notice__item-inner\" __css={css}>\n {runIfFunc(message, { onClose })}\n </ui.div>\n </motion.li>\n )\n },\n)\n\nNoticeComponent.displayName = \"NoticeComponent\"\n"],"mappings":"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","names":[]}
|
package/dist/index.js
CHANGED
@@ -382,7 +382,7 @@ var NoticeComponent = (0, import_react2.memo)(
|
|
382
382
|
import_motion.motion.li,
|
383
383
|
{
|
384
384
|
layout: true,
|
385
|
-
className: "ui-
|
385
|
+
className: "ui-notice__item",
|
386
386
|
variants,
|
387
387
|
initial: "initial",
|
388
388
|
animate: "animate",
|
@@ -394,7 +394,7 @@ var NoticeComponent = (0, import_react2.memo)(
|
|
394
394
|
display: "flex",
|
395
395
|
justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
|
396
396
|
},
|
397
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-
|
397
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice__item-inner", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
|
398
398
|
}
|
399
399
|
);
|
400
400
|
}
|
package/dist/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/notice.tsx","../src/notice-provider.tsx"],"sourcesContent":["export { useNotice, noticeStore } from \"./notice\"\nexport type { NoticeProps, NoticeOptions, UseNoticeOptions } from \"./notice\"\nexport * from \"./notice-provider\"\n","import type { AlertProps } from \"@yamada-ui/alert\"\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n} from \"@yamada-ui/alert\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type {\n CSSUIObject,\n NoticePlacement,\n NoticeComponentProps,\n NoticeConfigOptions,\n StyledTheme,\n} from \"@yamada-ui/core\"\nimport { ui, useTheme } from \"@yamada-ui/core\"\nimport { cx, merge } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport { useMemo } from \"react\"\n\nexport type UseNoticeOptions = NoticeConfigOptions\n\nexport type NoticeOptions = {\n id: string | number\n placement: NoticePlacement\n duration: UseNoticeOptions[\"duration\"]\n status: UseNoticeOptions[\"status\"]\n message: (props: NoticeComponentProps) => ReactNode\n isDelete?: boolean\n onDelete: () => void\n onCloseComplete?: () => void\n style?: CSSUIObject\n}\n\nconst findId = (\n options: NoticeOptions[],\n id: string | number,\n): NoticeOptions | undefined => options.find((notice) => notice.id === id)\n\nconst findNotice = (\n state: State,\n id: string | number,\n): {\n placement: NoticePlacement | undefined\n index: number\n} => {\n const placement = getNoticePlacement(state, id)\n\n const index = placement\n ? state[placement].findIndex((notice) => notice.id === id)\n : -1\n\n return { placement, index }\n}\n\nconst getNoticePlacement = (\n state: State,\n id: string | number,\n): NoticePlacement | undefined => {\n for (const [placement, values] of Object.entries(state)) {\n if (findId(values, id)) return placement as NoticePlacement\n }\n}\n\ntype CreateNoticeOptions = Partial<\n Pick<\n NoticeOptions,\n \"id\" | \"placement\" | \"status\" | \"duration\" | \"onCloseComplete\" | \"style\"\n >\n>\n\nlet counter = 0\n\nconst createNotice = (\n message: (props: NoticeComponentProps) => ReactNode,\n {\n id,\n placement = \"top\",\n duration,\n onCloseComplete,\n status,\n style,\n }: CreateNoticeOptions,\n) => {\n counter += 1\n\n id ??= counter\n\n return {\n id,\n placement,\n status,\n duration,\n message,\n onDelete: () => noticeStore.remove(String(id), placement),\n isDelete: false,\n onCloseComplete,\n style,\n }\n}\n\nconst createRender = (options: UseNoticeOptions): FC<NoticeComponentProps> => {\n const { component } = options\n\n const Render: FC<NoticeComponentProps> = (props) => {\n if (typeof component === \"function\") {\n return component({ ...props, ...options }) as JSX.Element\n } else {\n return <Notice {...props} {...options} />\n }\n }\n\n return Render\n}\n\nconst createNoticeFunc = (\n defaultOptions: UseNoticeOptions,\n theme: StyledTheme,\n) => {\n const themeOptions = theme.__config.notice?.options ?? {}\n\n const computedOptions = (options: UseNoticeOptions) =>\n merge(themeOptions, merge(defaultOptions, options))\n\n const notice = (options: UseNoticeOptions = {}) => {\n options = computedOptions(options)\n\n const message = createRender(options)\n\n return noticeStore.create(message, options)\n }\n\n notice.update = (\n id: string | number,\n options: Omit<UseNoticeOptions, \"id\">,\n ) => {\n options = computedOptions(options)\n\n noticeStore.update(id, options)\n }\n\n notice.closeAll = noticeStore.closeAll\n notice.close = noticeStore.close\n notice.isActive = noticeStore.isActive\n\n return notice\n}\n\ntype CreateNoticeReturn = ReturnType<typeof createNoticeFunc>\n\n/**\n * `useNotice` is a custom hook that controls the notifications of the application.\n *\n * @see Docs https://yamada-ui.com/hooks/use-notice\n */\nexport const useNotice = (\n defaultOptions?: UseNoticeOptions,\n): CreateNoticeReturn => {\n const { theme } = useTheme()\n\n return useMemo(\n () => createNoticeFunc(defaultOptions ?? {}, theme),\n [defaultOptions, theme],\n )\n}\n\ntype State = {\n [K in NoticePlacement]: NoticeOptions[]\n}\n\ntype Store = {\n subscribe: (onStoreChange: () => void) => () => void\n getSnapshot: () => State\n create: (\n message: (props: NoticeComponentProps) => ReactNode,\n options: UseNoticeOptions,\n ) => string | number\n close: (id: string | number) => void\n closeAll: (options?: { placement?: NoticePlacement[] }) => void\n update: (id: string | number, options: Omit<UseNoticeOptions, \"id\">) => void\n remove: (id: string | number, placement: NoticePlacement) => void\n isActive: (id: string | number) => boolean\n}\n\nconst initialState = {\n top: [],\n \"top-left\": [],\n \"top-right\": [],\n bottom: [],\n \"bottom-left\": [],\n \"bottom-right\": [],\n}\n\nconst createNoticeStore = (initialState: State): Store => {\n let state = initialState\n const storeChangeCache = new Set<() => void>()\n\n const setState = (setStateFunc: (values: State) => State) => {\n state = setStateFunc(state)\n storeChangeCache.forEach((onStoreChange) => onStoreChange())\n }\n\n return {\n getSnapshot: () => state,\n\n subscribe: (onStoreChange) => {\n storeChangeCache.add(onStoreChange)\n\n return () => {\n setState(() => initialState)\n storeChangeCache.delete(onStoreChange)\n }\n },\n\n remove: (id, placement) => {\n setState((prevState) => ({\n ...prevState,\n [placement]: prevState[placement].filter((notice) => notice.id != id),\n }))\n },\n\n create: (message, options) => {\n const limit = options.limit\n\n const notice = createNotice(message, options)\n const { placement, id } = notice\n\n setState((prev) => {\n let prevNotices = prev[placement] ?? []\n\n if (\n limit !== undefined &&\n limit > 0 &&\n prevNotices.length > limit - 1\n ) {\n const n = prevNotices.length - (limit - 1)\n const notices = placement.includes(\"top\")\n ? prevNotices.slice(n * -1)\n : prevNotices.slice(0, n)\n\n const ids = notices.map(({ id }) => id)\n\n prevNotices = prevNotices.map((notice) =>\n ids.includes(notice.id) ? { ...notice, isDelete: true } : notice,\n )\n }\n\n const notices = placement.includes(\"top\")\n ? [notice, ...prevNotices]\n : [...prevNotices, notice]\n\n return { ...prev, [placement]: notices }\n })\n\n return id\n },\n\n update: (id, options) => {\n setState((prev) => {\n const next = { ...prev }\n const { placement, index } = findNotice(next, id)\n\n if (placement && index !== -1) {\n next[placement][index] = {\n ...next[placement][index],\n ...options,\n message: createRender(options),\n }\n }\n\n return next\n })\n },\n\n closeAll: ({ placement } = {}) => {\n setState((prev) => {\n let placements: NoticePlacement[] = [\n \"bottom\",\n \"bottom-right\",\n \"bottom-left\",\n \"top\",\n \"top-left\",\n \"top-right\",\n ]\n\n if (placement) placements = placement\n\n return placements.reduce(\n (acc, placement) => {\n acc[placement] = prev[placement].map((notice) => ({\n ...notice,\n isDelete: true,\n }))\n\n return acc\n },\n { ...prev },\n )\n })\n },\n\n close: (id) => {\n setState((prev) => {\n const placement = getNoticePlacement(prev, id)\n\n if (!placement) return prev\n\n return {\n ...prev,\n [placement]: prev[placement].map((notice) =>\n notice.id == id ? { ...notice, isDelete: true } : notice,\n ),\n }\n })\n },\n\n isActive: (id) =>\n Boolean(findNotice(noticeStore.getSnapshot(), id).placement),\n }\n}\n\nexport const noticeStore = createNoticeStore(initialState)\n\nexport type NoticeProps = Omit<AlertProps, keyof UseNoticeOptions> &\n UseNoticeOptions & {\n onClose?: () => void\n }\n\nconst Notice: FC<NoticeProps> = ({\n variant = \"basic\",\n colorScheme,\n status,\n icon,\n title,\n description,\n isClosable,\n className,\n onClose,\n}) => {\n return (\n <Alert\n status={status}\n variant={variant}\n colorScheme={colorScheme}\n alignItems=\"start\"\n boxShadow=\"fallback(lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))\"\n className={cx(\"ui-notice\", className)}\n pe={isClosable ? 8 : undefined}\n >\n <AlertIcon\n variant={icon?.variant}\n className=\"ui-notice__icon\"\n {...(icon?.color ? { color: icon.color } : {})}\n >\n {icon?.children}\n </AlertIcon>\n\n <ui.div flex=\"1\">\n {title ? (\n <AlertTitle className=\"ui-notice__title\" lineClamp={1}>\n {title}\n </AlertTitle>\n ) : null}\n {description ? (\n <AlertDescription className=\"ui-notice__desc\" lineClamp={3}>\n {description}\n </AlertDescription>\n ) : null}\n </ui.div>\n\n {isClosable ? (\n <CloseButton\n className=\"ui-notice__close-button\"\n size=\"sm\"\n onClick={onClose}\n position=\"absolute\"\n top={2}\n right={2}\n />\n ) : null}\n </Alert>\n )\n}\n","import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { MotionVariants, MotionStyle } from \"@yamada-ui/motion\"\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 type { FC } from \"react\"\nimport { memo, useEffect, useState, useSyncExternalStore } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { noticeStore } from \"./notice\"\n\nexport type NoticeProviderProps = Omit<\n Required<ThemeConfig>[\"notice\"],\n \"options\"\n>\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n variants,\n gap = \"fallback(4, 1rem)\",\n appendToParentPortal,\n containerRef,\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 position: \"fixed\",\n zIndex: \"fallback(zarbon, 160)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin: gap,\n gap,\n top,\n bottom,\n right,\n left,\n }\n\n return (\n <ui.ul\n key={placement}\n className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n __css={css}\n >\n <AnimatePresence initial={false}>\n {notices.map((notice) => (\n <NoticeComponent key={notice.id} variants={variants} {...notice} />\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 initial: ({ placement }) => ({\n opacity: 0,\n [[\"top\", \"bottom\"].includes(placement) ? \"y\" : \"x\"]:\n (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n }),\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1],\n },\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}\n\ntype NoticeComponentProps = NoticeOptions &\n Pick<NoticeProviderProps, \"variants\">\n\nconst NoticeComponent = memo(\n ({\n variants = defaultVariants,\n placement,\n duration = 5000,\n message,\n onCloseComplete,\n isDelete = false,\n onDelete,\n style,\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 pointerEvents: \"auto\",\n maxW: \"36rem\",\n minW: \"20rem\",\n ...style,\n }\n\n return (\n <motion.li\n layout\n className=\"ui-notice__list__item\"\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n onHoverStart={onMouseEnter}\n onHoverEnd={onMouseLeave}\n custom={{ placement }}\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 >\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\"\n"],"mappings":"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","names":["initialState","notices","id","notice","placement","import_core","import_utils","import_react","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/notice.tsx","../src/notice-provider.tsx"],"sourcesContent":["export { useNotice, noticeStore } from \"./notice\"\nexport type { NoticeProps, NoticeOptions, UseNoticeOptions } from \"./notice\"\nexport * from \"./notice-provider\"\n","import type { AlertProps } from \"@yamada-ui/alert\"\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n} from \"@yamada-ui/alert\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type {\n CSSUIObject,\n NoticePlacement,\n NoticeComponentProps,\n NoticeConfigOptions,\n StyledTheme,\n} from \"@yamada-ui/core\"\nimport { ui, useTheme } from \"@yamada-ui/core\"\nimport { cx, merge } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport { useMemo } from \"react\"\n\nexport type UseNoticeOptions = NoticeConfigOptions\n\nexport type NoticeOptions = {\n id: string | number\n placement: NoticePlacement\n duration: UseNoticeOptions[\"duration\"]\n status: UseNoticeOptions[\"status\"]\n message: (props: NoticeComponentProps) => ReactNode\n isDelete?: boolean\n onDelete: () => void\n onCloseComplete?: () => void\n style?: CSSUIObject\n}\n\nconst findId = (\n options: NoticeOptions[],\n id: string | number,\n): NoticeOptions | undefined => options.find((notice) => notice.id === id)\n\nconst findNotice = (\n state: State,\n id: string | number,\n): {\n placement: NoticePlacement | undefined\n index: number\n} => {\n const placement = getNoticePlacement(state, id)\n\n const index = placement\n ? state[placement].findIndex((notice) => notice.id === id)\n : -1\n\n return { placement, index }\n}\n\nconst getNoticePlacement = (\n state: State,\n id: string | number,\n): NoticePlacement | undefined => {\n for (const [placement, values] of Object.entries(state)) {\n if (findId(values, id)) return placement as NoticePlacement\n }\n}\n\ntype CreateNoticeOptions = Partial<\n Pick<\n NoticeOptions,\n \"id\" | \"placement\" | \"status\" | \"duration\" | \"onCloseComplete\" | \"style\"\n >\n>\n\nlet counter = 0\n\nconst createNotice = (\n message: (props: NoticeComponentProps) => ReactNode,\n {\n id,\n placement = \"top\",\n duration,\n onCloseComplete,\n status,\n style,\n }: CreateNoticeOptions,\n) => {\n counter += 1\n\n id ??= counter\n\n return {\n id,\n placement,\n status,\n duration,\n message,\n onDelete: () => noticeStore.remove(String(id), placement),\n isDelete: false,\n onCloseComplete,\n style,\n }\n}\n\nconst createRender = (options: UseNoticeOptions): FC<NoticeComponentProps> => {\n const { component } = options\n\n const Render: FC<NoticeComponentProps> = (props) => {\n if (typeof component === \"function\") {\n return component({ ...props, ...options }) as JSX.Element\n } else {\n return <Notice {...props} {...options} />\n }\n }\n\n return Render\n}\n\nconst createNoticeFunc = (\n defaultOptions: UseNoticeOptions,\n theme: StyledTheme,\n) => {\n const themeOptions = theme.__config.notice?.options ?? {}\n\n const computedOptions = (options: UseNoticeOptions) =>\n merge(themeOptions, merge(defaultOptions, options))\n\n const notice = (options: UseNoticeOptions = {}) => {\n options = computedOptions(options)\n\n const message = createRender(options)\n\n return noticeStore.create(message, options)\n }\n\n notice.update = (\n id: string | number,\n options: Omit<UseNoticeOptions, \"id\">,\n ) => {\n options = computedOptions(options)\n\n noticeStore.update(id, options)\n }\n\n notice.closeAll = noticeStore.closeAll\n notice.close = noticeStore.close\n notice.isActive = noticeStore.isActive\n\n return notice\n}\n\ntype CreateNoticeReturn = ReturnType<typeof createNoticeFunc>\n\n/**\n * `useNotice` is a custom hook that controls the notifications of the application.\n *\n * @see Docs https://yamada-ui.com/hooks/use-notice\n */\nexport const useNotice = (\n defaultOptions?: UseNoticeOptions,\n): CreateNoticeReturn => {\n const { theme } = useTheme()\n\n return useMemo(\n () => createNoticeFunc(defaultOptions ?? {}, theme),\n [defaultOptions, theme],\n )\n}\n\ntype State = {\n [K in NoticePlacement]: NoticeOptions[]\n}\n\ntype Store = {\n subscribe: (onStoreChange: () => void) => () => void\n getSnapshot: () => State\n create: (\n message: (props: NoticeComponentProps) => ReactNode,\n options: UseNoticeOptions,\n ) => string | number\n close: (id: string | number) => void\n closeAll: (options?: { placement?: NoticePlacement[] }) => void\n update: (id: string | number, options: Omit<UseNoticeOptions, \"id\">) => void\n remove: (id: string | number, placement: NoticePlacement) => void\n isActive: (id: string | number) => boolean\n}\n\nconst initialState = {\n top: [],\n \"top-left\": [],\n \"top-right\": [],\n bottom: [],\n \"bottom-left\": [],\n \"bottom-right\": [],\n}\n\nconst createNoticeStore = (initialState: State): Store => {\n let state = initialState\n const storeChangeCache = new Set<() => void>()\n\n const setState = (setStateFunc: (values: State) => State) => {\n state = setStateFunc(state)\n storeChangeCache.forEach((onStoreChange) => onStoreChange())\n }\n\n return {\n getSnapshot: () => state,\n\n subscribe: (onStoreChange) => {\n storeChangeCache.add(onStoreChange)\n\n return () => {\n setState(() => initialState)\n storeChangeCache.delete(onStoreChange)\n }\n },\n\n remove: (id, placement) => {\n setState((prevState) => ({\n ...prevState,\n [placement]: prevState[placement].filter((notice) => notice.id != id),\n }))\n },\n\n create: (message, options) => {\n const limit = options.limit\n\n const notice = createNotice(message, options)\n const { placement, id } = notice\n\n setState((prev) => {\n let prevNotices = prev[placement] ?? []\n\n if (\n limit !== undefined &&\n limit > 0 &&\n prevNotices.length > limit - 1\n ) {\n const n = prevNotices.length - (limit - 1)\n const notices = placement.includes(\"top\")\n ? prevNotices.slice(n * -1)\n : prevNotices.slice(0, n)\n\n const ids = notices.map(({ id }) => id)\n\n prevNotices = prevNotices.map((notice) =>\n ids.includes(notice.id) ? { ...notice, isDelete: true } : notice,\n )\n }\n\n const notices = placement.includes(\"top\")\n ? [notice, ...prevNotices]\n : [...prevNotices, notice]\n\n return { ...prev, [placement]: notices }\n })\n\n return id\n },\n\n update: (id, options) => {\n setState((prev) => {\n const next = { ...prev }\n const { placement, index } = findNotice(next, id)\n\n if (placement && index !== -1) {\n next[placement][index] = {\n ...next[placement][index],\n ...options,\n message: createRender(options),\n }\n }\n\n return next\n })\n },\n\n closeAll: ({ placement } = {}) => {\n setState((prev) => {\n let placements: NoticePlacement[] = [\n \"bottom\",\n \"bottom-right\",\n \"bottom-left\",\n \"top\",\n \"top-left\",\n \"top-right\",\n ]\n\n if (placement) placements = placement\n\n return placements.reduce(\n (acc, placement) => {\n acc[placement] = prev[placement].map((notice) => ({\n ...notice,\n isDelete: true,\n }))\n\n return acc\n },\n { ...prev },\n )\n })\n },\n\n close: (id) => {\n setState((prev) => {\n const placement = getNoticePlacement(prev, id)\n\n if (!placement) return prev\n\n return {\n ...prev,\n [placement]: prev[placement].map((notice) =>\n notice.id == id ? { ...notice, isDelete: true } : notice,\n ),\n }\n })\n },\n\n isActive: (id) =>\n Boolean(findNotice(noticeStore.getSnapshot(), id).placement),\n }\n}\n\nexport const noticeStore = createNoticeStore(initialState)\n\nexport type NoticeProps = Omit<AlertProps, keyof UseNoticeOptions> &\n UseNoticeOptions & {\n onClose?: () => void\n }\n\nconst Notice: FC<NoticeProps> = ({\n variant = \"basic\",\n colorScheme,\n status,\n icon,\n title,\n description,\n isClosable,\n className,\n onClose,\n}) => {\n return (\n <Alert\n status={status}\n variant={variant}\n colorScheme={colorScheme}\n alignItems=\"start\"\n boxShadow=\"fallback(lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))\"\n className={cx(\"ui-notice\", className)}\n pe={isClosable ? 8 : undefined}\n >\n <AlertIcon\n variant={icon?.variant}\n className=\"ui-notice__icon\"\n {...(icon?.color ? { color: icon.color } : {})}\n >\n {icon?.children}\n </AlertIcon>\n\n <ui.div flex=\"1\">\n {title ? (\n <AlertTitle className=\"ui-notice__title\" lineClamp={1}>\n {title}\n </AlertTitle>\n ) : null}\n {description ? (\n <AlertDescription className=\"ui-notice__desc\" lineClamp={3}>\n {description}\n </AlertDescription>\n ) : null}\n </ui.div>\n\n {isClosable ? (\n <CloseButton\n className=\"ui-notice__close-button\"\n size=\"sm\"\n onClick={onClose}\n position=\"absolute\"\n top={2}\n right={2}\n />\n ) : null}\n </Alert>\n )\n}\n","import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { MotionVariants, MotionStyle } from \"@yamada-ui/motion\"\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 type { FC } from \"react\"\nimport { memo, useEffect, useState, useSyncExternalStore } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { noticeStore } from \"./notice\"\n\nexport type NoticeProviderProps = Omit<\n Required<ThemeConfig>[\"notice\"],\n \"options\"\n>\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n variants,\n gap = \"fallback(4, 1rem)\",\n appendToParentPortal,\n containerRef,\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 position: \"fixed\",\n zIndex: \"fallback(zarbon, 160)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin: gap,\n gap,\n top,\n bottom,\n right,\n left,\n }\n\n return (\n <ui.ul\n key={placement}\n className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n __css={css}\n >\n <AnimatePresence initial={false}>\n {notices.map((notice) => (\n <NoticeComponent key={notice.id} variants={variants} {...notice} />\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 initial: ({ placement }) => ({\n opacity: 0,\n [[\"top\", \"bottom\"].includes(placement) ? \"y\" : \"x\"]:\n (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n }),\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1],\n },\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}\n\ntype NoticeComponentProps = NoticeOptions &\n Pick<NoticeProviderProps, \"variants\">\n\nconst NoticeComponent = memo(\n ({\n variants = defaultVariants,\n placement,\n duration = 5000,\n message,\n onCloseComplete,\n isDelete = false,\n onDelete,\n style,\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 pointerEvents: \"auto\",\n maxW: \"36rem\",\n minW: \"20rem\",\n ...style,\n }\n\n return (\n <motion.li\n layout\n className=\"ui-notice__item\"\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n onHoverStart={onMouseEnter}\n onHoverEnd={onMouseLeave}\n custom={{ placement }}\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 >\n <ui.div className=\"ui-notice__item-inner\" __css={css}>\n {runIfFunc(message, { onClose })}\n </ui.div>\n </motion.li>\n )\n },\n)\n\nNoticeComponent.displayName = \"NoticeComponent\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,mBAKO;AACP,0BAA4B;AAQ5B,kBAA6B;AAC7B,mBAA0B;AAE1B,mBAAwB;AA0FX;AA1Eb,IAAM,SAAS,CACb,SACA,OAC8B,QAAQ,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAEzE,IAAM,aAAa,CACjB,OACA,OAIG;AACH,QAAM,YAAY,mBAAmB,OAAO,EAAE;AAE9C,QAAM,QAAQ,YACV,MAAM,SAAS,EAAE,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE,IACvD;AAEJ,SAAO,EAAE,WAAW,MAAM;AAC5B;AAEA,IAAM,qBAAqB,CACzB,OACA,OACgC;AAChC,aAAW,CAAC,WAAW,MAAM,KAAK,OAAO,QAAQ,KAAK,GAAG;AACvD,QAAI,OAAO,QAAQ,EAAE;AAAG,aAAO;AAAA,EACjC;AACF;AASA,IAAI,UAAU;AAEd,IAAM,eAAe,CACnB,SACA;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MACG;AACH,aAAW;AAEX,yBAAO;AAEP,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU,MAAM,YAAY,OAAO,OAAO,EAAE,GAAG,SAAS;AAAA,IACxD,UAAU;AAAA,IACV;AAAA,IACA;AAAA,EACF;AACF;AAEA,IAAM,eAAe,CAAC,YAAwD;AAC5E,QAAM,EAAE,UAAU,IAAI;AAEtB,QAAM,SAAmC,CAAC,UAAU;AAClD,QAAI,OAAO,cAAc,YAAY;AACnC,aAAO,UAAU,EAAE,GAAG,OAAO,GAAG,QAAQ,CAAC;AAAA,IAC3C,OAAO;AACL,aAAO,4CAAC,UAAQ,GAAG,OAAQ,GAAG,SAAS;AAAA,IACzC;AAAA,EACF;AAEA,SAAO;AACT;AAEA,IAAM,mBAAmB,CACvB,gBACA,UACG;AAtHL;AAuHE,QAAM,gBAAe,iBAAM,SAAS,WAAf,mBAAuB,YAAvB,YAAkC,CAAC;AAExD,QAAM,kBAAkB,CAAC,gBACvB,oBAAM,kBAAc,oBAAM,gBAAgB,OAAO,CAAC;AAEpD,QAAM,SAAS,CAAC,UAA4B,CAAC,MAAM;AACjD,cAAU,gBAAgB,OAAO;AAEjC,UAAM,UAAU,aAAa,OAAO;AAEpC,WAAO,YAAY,OAAO,SAAS,OAAO;AAAA,EAC5C;AAEA,SAAO,SAAS,CACd,IACA,YACG;AACH,cAAU,gBAAgB,OAAO;AAEjC,gBAAY,OAAO,IAAI,OAAO;AAAA,EAChC;AAEA,SAAO,WAAW,YAAY;AAC9B,SAAO,QAAQ,YAAY;AAC3B,SAAO,WAAW,YAAY;AAE9B,SAAO;AACT;AASO,IAAM,YAAY,CACvB,mBACuB;AACvB,QAAM,EAAE,MAAM,QAAI,sBAAS;AAE3B,aAAO;AAAA,IACL,MAAM,iBAAiB,0CAAkB,CAAC,GAAG,KAAK;AAAA,IAClD,CAAC,gBAAgB,KAAK;AAAA,EACxB;AACF;AAoBA,IAAM,eAAe;AAAA,EACnB,KAAK,CAAC;AAAA,EACN,YAAY,CAAC;AAAA,EACb,aAAa,CAAC;AAAA,EACd,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAAA,EAChB,gBAAgB,CAAC;AACnB;AAEA,IAAM,oBAAoB,CAACA,kBAA+B;AACxD,MAAI,QAAQA;AACZ,QAAM,mBAAmB,oBAAI,IAAgB;AAE7C,QAAM,WAAW,CAAC,iBAA2C;AAC3D,YAAQ,aAAa,KAAK;AAC1B,qBAAiB,QAAQ,CAAC,kBAAkB,cAAc,CAAC;AAAA,EAC7D;AAEA,SAAO;AAAA,IACL,aAAa,MAAM;AAAA,IAEnB,WAAW,CAAC,kBAAkB;AAC5B,uBAAiB,IAAI,aAAa;AAElC,aAAO,MAAM;AACX,iBAAS,MAAMA,aAAY;AAC3B,yBAAiB,OAAO,aAAa;AAAA,MACvC;AAAA,IACF;AAAA,IAEA,QAAQ,CAAC,IAAI,cAAc;AACzB,eAAS,CAAC,eAAe;AAAA,QACvB,GAAG;AAAA,QACH,CAAC,SAAS,GAAG,UAAU,SAAS,EAAE,OAAO,CAAC,WAAW,OAAO,MAAM,EAAE;AAAA,MACtE,EAAE;AAAA,IACJ;AAAA,IAEA,QAAQ,CAAC,SAAS,YAAY;AAC5B,YAAM,QAAQ,QAAQ;AAEtB,YAAM,SAAS,aAAa,SAAS,OAAO;AAC5C,YAAM,EAAE,WAAW,GAAG,IAAI;AAE1B,eAAS,CAAC,SAAS;AAnOzB;AAoOQ,YAAI,eAAc,UAAK,SAAS,MAAd,YAAmB,CAAC;AAEtC,YACE,UAAU,UACV,QAAQ,KACR,YAAY,SAAS,QAAQ,GAC7B;AACA,gBAAM,IAAI,YAAY,UAAU,QAAQ;AACxC,gBAAMC,WAAU,UAAU,SAAS,KAAK,IACpC,YAAY,MAAM,IAAI,EAAE,IACxB,YAAY,MAAM,GAAG,CAAC;AAE1B,gBAAM,MAAMA,SAAQ,IAAI,CAAC,EAAE,IAAAC,IAAG,MAAMA,GAAE;AAEtC,wBAAc,YAAY;AAAA,YAAI,CAACC,YAC7B,IAAI,SAASA,QAAO,EAAE,IAAI,EAAE,GAAGA,SAAQ,UAAU,KAAK,IAAIA;AAAA,UAC5D;AAAA,QACF;AAEA,cAAM,UAAU,UAAU,SAAS,KAAK,IACpC,CAAC,QAAQ,GAAG,WAAW,IACvB,CAAC,GAAG,aAAa,MAAM;AAE3B,eAAO,EAAE,GAAG,MAAM,CAAC,SAAS,GAAG,QAAQ;AAAA,MACzC,CAAC;AAED,aAAO;AAAA,IACT;AAAA,IAEA,QAAQ,CAAC,IAAI,YAAY;AACvB,eAAS,CAAC,SAAS;AACjB,cAAM,OAAO,EAAE,GAAG,KAAK;AACvB,cAAM,EAAE,WAAW,MAAM,IAAI,WAAW,MAAM,EAAE;AAEhD,YAAI,aAAa,UAAU,IAAI;AAC7B,eAAK,SAAS,EAAE,KAAK,IAAI;AAAA,YACvB,GAAG,KAAK,SAAS,EAAE,KAAK;AAAA,YACxB,GAAG;AAAA,YACH,SAAS,aAAa,OAAO;AAAA,UAC/B;AAAA,QACF;AAEA,eAAO;AAAA,MACT,CAAC;AAAA,IACH;AAAA,IAEA,UAAU,CAAC,EAAE,UAAU,IAAI,CAAC,MAAM;AAChC,eAAS,CAAC,SAAS;AACjB,YAAI,aAAgC;AAAA,UAClC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAEA,YAAI;AAAW,uBAAa;AAE5B,eAAO,WAAW;AAAA,UAChB,CAAC,KAAKC,eAAc;AAClB,gBAAIA,UAAS,IAAI,KAAKA,UAAS,EAAE,IAAI,CAAC,YAAY;AAAA,cAChD,GAAG;AAAA,cACH,UAAU;AAAA,YACZ,EAAE;AAEF,mBAAO;AAAA,UACT;AAAA,UACA,EAAE,GAAG,KAAK;AAAA,QACZ;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,OAAO,CAAC,OAAO;AACb,eAAS,CAAC,SAAS;AACjB,cAAM,YAAY,mBAAmB,MAAM,EAAE;AAE7C,YAAI,CAAC;AAAW,iBAAO;AAEvB,eAAO;AAAA,UACL,GAAG;AAAA,UACH,CAAC,SAAS,GAAG,KAAK,SAAS,EAAE;AAAA,YAAI,CAAC,WAChC,OAAO,MAAM,KAAK,EAAE,GAAG,QAAQ,UAAU,KAAK,IAAI;AAAA,UACpD;AAAA,QACF;AAAA,MACF,CAAC;AAAA,IACH;AAAA,IAEA,UAAU,CAAC,OACT,QAAQ,WAAW,YAAY,YAAY,GAAG,EAAE,EAAE,SAAS;AAAA,EAC/D;AACF;AAEO,IAAM,cAAc,kBAAkB,YAAY;AAOzD,IAAM,SAA0B,CAAC;AAAA,EAC/B,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAW;AAAA,MACX,WAAU;AAAA,MACV,eAAW,iBAAG,aAAa,SAAS;AAAA,MACpC,IAAI,aAAa,IAAI;AAAA,MAErB;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,6BAAM;AAAA,YACf,WAAU;AAAA,YACT,IAAI,6BAAM,SAAQ,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;AAAA,YAE3C,uCAAM;AAAA;AAAA,QACT;AAAA,QAEA,6CAAC,eAAG,KAAH,EAAO,MAAK,KACV;AAAA,kBACC,4CAAC,2BAAW,WAAU,oBAAmB,WAAW,GACjD,iBACH,IACE;AAAA,UACH,cACC,4CAAC,iCAAiB,WAAU,mBAAkB,WAAW,GACtD,uBACH,IACE;AAAA,WACN;AAAA,QAEC,aACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,MAAK;AAAA,YACL,SAAS;AAAA,YACT,UAAS;AAAA,YACT,KAAK;AAAA,YACL,OAAO;AAAA;AAAA,QACT,IACE;AAAA;AAAA;AAAA,EACN;AAEJ;;;AC7XA,IAAAC,eAAmB;AAEnB,oBAAsD;AACtD,oBAAuB;AACvB,yBAA2B;AAC3B,IAAAC,gBAA+C;AAE/C,IAAAC,gBAAgE;AAyDpD,IAAAC,sBAAA;AAhDL,IAAM,iBAA0C,CAAC;AAAA,EACtD;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AACF,MAAM;AACJ,QAAM,YAAQ;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY;AAAA,EACd;AAEA,QAAM,aAAa,OAAO,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,WAAW,OAAO,MAAM;AACrE,UAAM,MAAM,UAAU,SAAS,KAAK,IAChC,kCACA;AACJ,UAAM,SAAS,UAAU,SAAS,QAAQ,IACtC,qCACA;AACJ,UAAM,QAAQ,CAAC,UAAU,SAAS,MAAM,IACpC,oCACA;AACJ,UAAM,OAAO,CAAC,UAAU,SAAS,OAAO,IACpC,mCACA;AAEJ,UAAM,MAAmB;AAAA,MACvB,UAAU;AAAA,MACV,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,MACT,eAAe;AAAA,MACf,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAEA,WACE;AAAA,MAAC,gBAAG;AAAA,MAAH;AAAA,QAEC,eAAW,kBAAG,mBAAmB,oBAAoB,SAAS,EAAE;AAAA,QAChE,OAAO;AAAA,QAEP,uDAAC,iCAAgB,SAAS,OACvB,kBAAQ,IAAI,CAAC,WACZ,6CAAC,mBAAgC,UAAqB,GAAG,UAAnC,OAAO,EAAoC,CAClE,GACH;AAAA;AAAA,MARK;AAAA,IASP;AAAA,EAEJ,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;AAEA,IAAM,kBAAkC;AAAA,EACtC,SAAS,CAAC,EAAE,UAAU,OAAO;AAAA,IAC3B,SAAS;AAAA,IACT,CAAC,CAAC,OAAO,QAAQ,EAAE,SAAS,SAAS,IAAI,MAAM,GAAG,IAC/C,cAAc,WAAW,IAAI,UAAU,SAAS,OAAO,IAAI,IAAI,MAAM;AAAA,EAC1E;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,GAAG;AAAA,IACH,GAAG;AAAA,IACH,OAAO;AAAA,IACP,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;AAAA,IACvB;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,MACV,UAAU;AAAA,MACV,MAAM,CAAC,KAAK,GAAG,GAAG,CAAC;AAAA,IACrB;AAAA,EACF;AACF;AAKA,IAAM,sBAAkB;AAAA,EACtB,CAAC;AAAA,IACC,WAAW;AAAA,IACX;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,EACF,MAA4B;AAC1B,UAAM,CAAC,OAAO,QAAQ,QAAI,wBAAS,QAAQ;AAC3C,UAAM,gBAAY,4BAAa;AAE/B,uCAAgB,MAAM;AACpB,UAAI,CAAC;AAAW;AAAA,IAClB,GAAG,CAAC,SAAS,CAAC;AAEd,uCAAgB,MAAM;AACpB,eAAS,QAAQ;AAAA,IACnB,GAAG,CAAC,QAAQ,CAAC;AAEb,UAAM,eAAe,MAAM,SAAS,IAAI;AACxC,UAAM,eAAe,MAAM,SAAS,QAAQ;AAE5C,UAAM,UAAU,MAAM;AACpB,UAAI;AAAW,iBAAS;AAAA,IAC1B;AAEA,iCAAU,MAAM;AACd,UAAI,aAAa;AAAU,iBAAS;AAAA,IACtC,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AAElC,uCAAW,SAAS,KAAK;AAEzB,UAAM,MAAmB;AAAA,MACvB,eAAe;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,MACN,GAAG;AAAA,IACL;AAEA,WACE;AAAA,MAAC,qBAAO;AAAA,MAAP;AAAA,QACC,QAAM;AAAA,QACN,WAAU;AAAA,QACV;AAAA,QACA,SAAQ;AAAA,QACR,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,cAAc;AAAA,QACd,YAAY;AAAA,QACZ,QAAQ,EAAE,UAAU;AAAA,QACpB,OACE;AAAA,UACE,SAAS;AAAA,UACT,gBAAgB,UAAU,SAAS,MAAM,IACrC,eACA,UAAU,SAAS,OAAO,IACxB,aACA;AAAA,QACR;AAAA,QAGF,uDAAC,gBAAG,KAAH,EAAO,WAAU,yBAAwB,OAAO,KAC9C,uCAAU,SAAS,EAAE,QAAQ,CAAC,GACjC;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,gBAAgB,cAAc;","names":["initialState","notices","id","notice","placement","import_core","import_utils","import_react","import_jsx_runtime"]}
|
package/dist/index.mjs
CHANGED
package/dist/notice-provider.js
CHANGED
@@ -355,7 +355,7 @@ var NoticeComponent = (0, import_react2.memo)(
|
|
355
355
|
import_motion.motion.li,
|
356
356
|
{
|
357
357
|
layout: true,
|
358
|
-
className: "ui-
|
358
|
+
className: "ui-notice__item",
|
359
359
|
variants,
|
360
360
|
initial: "initial",
|
361
361
|
animate: "animate",
|
@@ -367,7 +367,7 @@ var NoticeComponent = (0, import_react2.memo)(
|
|
367
367
|
display: "flex",
|
368
368
|
justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
|
369
369
|
},
|
370
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-
|
370
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.ui.div, { className: "ui-notice__item-inner", __css: css, children: (0, import_utils2.runIfFunc)(message, { onClose }) })
|
371
371
|
}
|
372
372
|
);
|
373
373
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../src/notice-provider.tsx","../src/notice.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { MotionVariants, MotionStyle } from \"@yamada-ui/motion\"\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 type { FC } from \"react\"\nimport { memo, useEffect, useState, useSyncExternalStore } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { noticeStore } from \"./notice\"\n\nexport type NoticeProviderProps = Omit<\n Required<ThemeConfig>[\"notice\"],\n \"options\"\n>\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n variants,\n gap = \"fallback(4, 1rem)\",\n appendToParentPortal,\n containerRef,\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 position: \"fixed\",\n zIndex: \"fallback(zarbon, 160)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin: gap,\n gap,\n top,\n bottom,\n right,\n left,\n }\n\n return (\n <ui.ul\n key={placement}\n className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n __css={css}\n >\n <AnimatePresence initial={false}>\n {notices.map((notice) => (\n <NoticeComponent key={notice.id} variants={variants} {...notice} />\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 initial: ({ placement }) => ({\n opacity: 0,\n [[\"top\", \"bottom\"].includes(placement) ? \"y\" : \"x\"]:\n (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n }),\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1],\n },\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}\n\ntype NoticeComponentProps = NoticeOptions &\n Pick<NoticeProviderProps, \"variants\">\n\nconst NoticeComponent = memo(\n ({\n variants = defaultVariants,\n placement,\n duration = 5000,\n message,\n onCloseComplete,\n isDelete = false,\n onDelete,\n style,\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 pointerEvents: \"auto\",\n maxW: \"36rem\",\n minW: \"20rem\",\n ...style,\n }\n\n return (\n <motion.li\n layout\n className=\"ui-notice__list__item\"\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n onHoverStart={onMouseEnter}\n onHoverEnd={onMouseLeave}\n custom={{ placement }}\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 >\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\"\n","import type { AlertProps } from \"@yamada-ui/alert\"\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n} from \"@yamada-ui/alert\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type {\n CSSUIObject,\n NoticePlacement,\n NoticeComponentProps,\n NoticeConfigOptions,\n StyledTheme,\n} from \"@yamada-ui/core\"\nimport { ui, useTheme } from \"@yamada-ui/core\"\nimport { cx, merge } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport { useMemo } from \"react\"\n\nexport type UseNoticeOptions = NoticeConfigOptions\n\nexport type NoticeOptions = {\n id: string | number\n placement: NoticePlacement\n duration: UseNoticeOptions[\"duration\"]\n status: UseNoticeOptions[\"status\"]\n message: (props: NoticeComponentProps) => ReactNode\n isDelete?: boolean\n onDelete: () => void\n onCloseComplete?: () => void\n style?: CSSUIObject\n}\n\nconst findId = (\n options: NoticeOptions[],\n id: string | number,\n): NoticeOptions | undefined => options.find((notice) => notice.id === id)\n\nconst findNotice = (\n state: State,\n id: string | number,\n): {\n placement: NoticePlacement | undefined\n index: number\n} => {\n const placement = getNoticePlacement(state, id)\n\n const index = placement\n ? state[placement].findIndex((notice) => notice.id === id)\n : -1\n\n return { placement, index }\n}\n\nconst getNoticePlacement = (\n state: State,\n id: string | number,\n): NoticePlacement | undefined => {\n for (const [placement, values] of Object.entries(state)) {\n if (findId(values, id)) return placement as NoticePlacement\n }\n}\n\ntype CreateNoticeOptions = Partial<\n Pick<\n NoticeOptions,\n \"id\" | \"placement\" | \"status\" | \"duration\" | \"onCloseComplete\" | \"style\"\n >\n>\n\nlet counter = 0\n\nconst createNotice = (\n message: (props: NoticeComponentProps) => ReactNode,\n {\n id,\n placement = \"top\",\n duration,\n onCloseComplete,\n status,\n style,\n }: CreateNoticeOptions,\n) => {\n counter += 1\n\n id ??= counter\n\n return {\n id,\n placement,\n status,\n duration,\n message,\n onDelete: () => noticeStore.remove(String(id), placement),\n isDelete: false,\n onCloseComplete,\n style,\n }\n}\n\nconst createRender = (options: UseNoticeOptions): FC<NoticeComponentProps> => {\n const { component } = options\n\n const Render: FC<NoticeComponentProps> = (props) => {\n if (typeof component === \"function\") {\n return component({ ...props, ...options }) as JSX.Element\n } else {\n return <Notice {...props} {...options} />\n }\n }\n\n return Render\n}\n\nconst createNoticeFunc = (\n defaultOptions: UseNoticeOptions,\n theme: StyledTheme,\n) => {\n const themeOptions = theme.__config.notice?.options ?? {}\n\n const computedOptions = (options: UseNoticeOptions) =>\n merge(themeOptions, merge(defaultOptions, options))\n\n const notice = (options: UseNoticeOptions = {}) => {\n options = computedOptions(options)\n\n const message = createRender(options)\n\n return noticeStore.create(message, options)\n }\n\n notice.update = (\n id: string | number,\n options: Omit<UseNoticeOptions, \"id\">,\n ) => {\n options = computedOptions(options)\n\n noticeStore.update(id, options)\n }\n\n notice.closeAll = noticeStore.closeAll\n notice.close = noticeStore.close\n notice.isActive = noticeStore.isActive\n\n return notice\n}\n\ntype CreateNoticeReturn = ReturnType<typeof createNoticeFunc>\n\n/**\n * `useNotice` is a custom hook that controls the notifications of the application.\n *\n * @see Docs https://yamada-ui.com/hooks/use-notice\n */\nexport const useNotice = (\n defaultOptions?: UseNoticeOptions,\n): CreateNoticeReturn => {\n const { theme } = useTheme()\n\n return useMemo(\n () => createNoticeFunc(defaultOptions ?? {}, theme),\n [defaultOptions, theme],\n )\n}\n\ntype State = {\n [K in NoticePlacement]: NoticeOptions[]\n}\n\ntype Store = {\n subscribe: (onStoreChange: () => void) => () => void\n getSnapshot: () => State\n create: (\n message: (props: NoticeComponentProps) => ReactNode,\n options: UseNoticeOptions,\n ) => string | number\n close: (id: string | number) => void\n closeAll: (options?: { placement?: NoticePlacement[] }) => void\n update: (id: string | number, options: Omit<UseNoticeOptions, \"id\">) => void\n remove: (id: string | number, placement: NoticePlacement) => void\n isActive: (id: string | number) => boolean\n}\n\nconst initialState = {\n top: [],\n \"top-left\": [],\n \"top-right\": [],\n bottom: [],\n \"bottom-left\": [],\n \"bottom-right\": [],\n}\n\nconst createNoticeStore = (initialState: State): Store => {\n let state = initialState\n const storeChangeCache = new Set<() => void>()\n\n const setState = (setStateFunc: (values: State) => State) => {\n state = setStateFunc(state)\n storeChangeCache.forEach((onStoreChange) => onStoreChange())\n }\n\n return {\n getSnapshot: () => state,\n\n subscribe: (onStoreChange) => {\n storeChangeCache.add(onStoreChange)\n\n return () => {\n setState(() => initialState)\n storeChangeCache.delete(onStoreChange)\n }\n },\n\n remove: (id, placement) => {\n setState((prevState) => ({\n ...prevState,\n [placement]: prevState[placement].filter((notice) => notice.id != id),\n }))\n },\n\n create: (message, options) => {\n const limit = options.limit\n\n const notice = createNotice(message, options)\n const { placement, id } = notice\n\n setState((prev) => {\n let prevNotices = prev[placement] ?? []\n\n if (\n limit !== undefined &&\n limit > 0 &&\n prevNotices.length > limit - 1\n ) {\n const n = prevNotices.length - (limit - 1)\n const notices = placement.includes(\"top\")\n ? prevNotices.slice(n * -1)\n : prevNotices.slice(0, n)\n\n const ids = notices.map(({ id }) => id)\n\n prevNotices = prevNotices.map((notice) =>\n ids.includes(notice.id) ? { ...notice, isDelete: true } : notice,\n )\n }\n\n const notices = placement.includes(\"top\")\n ? [notice, ...prevNotices]\n : [...prevNotices, notice]\n\n return { ...prev, [placement]: notices }\n })\n\n return id\n },\n\n update: (id, options) => {\n setState((prev) => {\n const next = { ...prev }\n const { placement, index } = findNotice(next, id)\n\n if (placement && index !== -1) {\n next[placement][index] = {\n ...next[placement][index],\n ...options,\n message: createRender(options),\n }\n }\n\n return next\n })\n },\n\n closeAll: ({ placement } = {}) => {\n setState((prev) => {\n let placements: NoticePlacement[] = [\n \"bottom\",\n \"bottom-right\",\n \"bottom-left\",\n \"top\",\n \"top-left\",\n \"top-right\",\n ]\n\n if (placement) placements = placement\n\n return placements.reduce(\n (acc, placement) => {\n acc[placement] = prev[placement].map((notice) => ({\n ...notice,\n isDelete: true,\n }))\n\n return acc\n },\n { ...prev },\n )\n })\n },\n\n close: (id) => {\n setState((prev) => {\n const placement = getNoticePlacement(prev, id)\n\n if (!placement) return prev\n\n return {\n ...prev,\n [placement]: prev[placement].map((notice) =>\n notice.id == id ? { ...notice, isDelete: true } : notice,\n ),\n }\n })\n },\n\n isActive: (id) =>\n Boolean(findNotice(noticeStore.getSnapshot(), id).placement),\n }\n}\n\nexport const noticeStore = createNoticeStore(initialState)\n\nexport type NoticeProps = Omit<AlertProps, keyof UseNoticeOptions> &\n UseNoticeOptions & {\n onClose?: () => void\n }\n\nconst Notice: FC<NoticeProps> = ({\n variant = \"basic\",\n colorScheme,\n status,\n icon,\n title,\n description,\n isClosable,\n className,\n onClose,\n}) => {\n return (\n <Alert\n status={status}\n variant={variant}\n colorScheme={colorScheme}\n alignItems=\"start\"\n boxShadow=\"fallback(lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))\"\n className={cx(\"ui-notice\", className)}\n pe={isClosable ? 8 : undefined}\n >\n <AlertIcon\n variant={icon?.variant}\n className=\"ui-notice__icon\"\n {...(icon?.color ? { color: icon.color } : {})}\n >\n {icon?.children}\n </AlertIcon>\n\n <ui.div flex=\"1\">\n {title ? (\n <AlertTitle className=\"ui-notice__title\" lineClamp={1}>\n {title}\n </AlertTitle>\n ) : null}\n {description ? (\n <AlertDescription className=\"ui-notice__desc\" lineClamp={3}>\n {description}\n </AlertDescription>\n ) : null}\n </ui.div>\n\n {isClosable ? (\n <CloseButton\n className=\"ui-notice__close-button\"\n size=\"sm\"\n onClick={onClose}\n position=\"absolute\"\n top={2}\n right={2}\n />\n ) : null}\n </Alert>\n )\n}\n"],"mappings":"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","names":["import_core","import_utils","import_react","initialState","notices","id","notice","placement","import_jsx_runtime"]}
|
1
|
+
{"version":3,"sources":["../src/notice-provider.tsx","../src/notice.tsx"],"sourcesContent":["import type { CSSUIObject, ThemeConfig } from \"@yamada-ui/core\"\nimport { ui } from \"@yamada-ui/core\"\nimport type { MotionVariants, MotionStyle } from \"@yamada-ui/motion\"\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 type { FC } from \"react\"\nimport { memo, useEffect, useState, useSyncExternalStore } from \"react\"\nimport type { NoticeOptions } from \"./notice\"\nimport { noticeStore } from \"./notice\"\n\nexport type NoticeProviderProps = Omit<\n Required<ThemeConfig>[\"notice\"],\n \"options\"\n>\n\nexport const NoticeProvider: FC<NoticeProviderProps> = ({\n variants,\n gap = \"fallback(4, 1rem)\",\n appendToParentPortal,\n containerRef,\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 position: \"fixed\",\n zIndex: \"fallback(zarbon, 160)\",\n pointerEvents: \"none\",\n display: \"flex\",\n flexDirection: \"column\",\n margin: gap,\n gap,\n top,\n bottom,\n right,\n left,\n }\n\n return (\n <ui.ul\n key={placement}\n className={cx(\"ui-notice__list\", `ui-notice__list--${placement}`)}\n __css={css}\n >\n <AnimatePresence initial={false}>\n {notices.map((notice) => (\n <NoticeComponent key={notice.id} variants={variants} {...notice} />\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 initial: ({ placement }) => ({\n opacity: 0,\n [[\"top\", \"bottom\"].includes(placement) ? \"y\" : \"x\"]:\n (placement === \"bottom\" ? 1 : placement.includes(\"right\") ? 1 : -1) * 24,\n }),\n animate: {\n opacity: 1,\n y: 0,\n x: 0,\n scale: 1,\n transition: {\n duration: 0.4,\n ease: [0.4, 0, 0.2, 1],\n },\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}\n\ntype NoticeComponentProps = NoticeOptions &\n Pick<NoticeProviderProps, \"variants\">\n\nconst NoticeComponent = memo(\n ({\n variants = defaultVariants,\n placement,\n duration = 5000,\n message,\n onCloseComplete,\n isDelete = false,\n onDelete,\n style,\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 pointerEvents: \"auto\",\n maxW: \"36rem\",\n minW: \"20rem\",\n ...style,\n }\n\n return (\n <motion.li\n layout\n className=\"ui-notice__item\"\n variants={variants}\n initial=\"initial\"\n animate=\"animate\"\n exit=\"exit\"\n onHoverStart={onMouseEnter}\n onHoverEnd={onMouseLeave}\n custom={{ placement }}\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 >\n <ui.div className=\"ui-notice__item-inner\" __css={css}>\n {runIfFunc(message, { onClose })}\n </ui.div>\n </motion.li>\n )\n },\n)\n\nNoticeComponent.displayName = \"NoticeComponent\"\n","import type { AlertProps } from \"@yamada-ui/alert\"\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n} from \"@yamada-ui/alert\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport type {\n CSSUIObject,\n NoticePlacement,\n NoticeComponentProps,\n NoticeConfigOptions,\n StyledTheme,\n} from \"@yamada-ui/core\"\nimport { ui, useTheme } from \"@yamada-ui/core\"\nimport { cx, merge } from \"@yamada-ui/utils\"\nimport type { FC, ReactNode } from \"react\"\nimport { useMemo } from \"react\"\n\nexport type UseNoticeOptions = NoticeConfigOptions\n\nexport type NoticeOptions = {\n id: string | number\n placement: NoticePlacement\n duration: UseNoticeOptions[\"duration\"]\n status: UseNoticeOptions[\"status\"]\n message: (props: NoticeComponentProps) => ReactNode\n isDelete?: boolean\n onDelete: () => void\n onCloseComplete?: () => void\n style?: CSSUIObject\n}\n\nconst findId = (\n options: NoticeOptions[],\n id: string | number,\n): NoticeOptions | undefined => options.find((notice) => notice.id === id)\n\nconst findNotice = (\n state: State,\n id: string | number,\n): {\n placement: NoticePlacement | undefined\n index: number\n} => {\n const placement = getNoticePlacement(state, id)\n\n const index = placement\n ? state[placement].findIndex((notice) => notice.id === id)\n : -1\n\n return { placement, index }\n}\n\nconst getNoticePlacement = (\n state: State,\n id: string | number,\n): NoticePlacement | undefined => {\n for (const [placement, values] of Object.entries(state)) {\n if (findId(values, id)) return placement as NoticePlacement\n }\n}\n\ntype CreateNoticeOptions = Partial<\n Pick<\n NoticeOptions,\n \"id\" | \"placement\" | \"status\" | \"duration\" | \"onCloseComplete\" | \"style\"\n >\n>\n\nlet counter = 0\n\nconst createNotice = (\n message: (props: NoticeComponentProps) => ReactNode,\n {\n id,\n placement = \"top\",\n duration,\n onCloseComplete,\n status,\n style,\n }: CreateNoticeOptions,\n) => {\n counter += 1\n\n id ??= counter\n\n return {\n id,\n placement,\n status,\n duration,\n message,\n onDelete: () => noticeStore.remove(String(id), placement),\n isDelete: false,\n onCloseComplete,\n style,\n }\n}\n\nconst createRender = (options: UseNoticeOptions): FC<NoticeComponentProps> => {\n const { component } = options\n\n const Render: FC<NoticeComponentProps> = (props) => {\n if (typeof component === \"function\") {\n return component({ ...props, ...options }) as JSX.Element\n } else {\n return <Notice {...props} {...options} />\n }\n }\n\n return Render\n}\n\nconst createNoticeFunc = (\n defaultOptions: UseNoticeOptions,\n theme: StyledTheme,\n) => {\n const themeOptions = theme.__config.notice?.options ?? {}\n\n const computedOptions = (options: UseNoticeOptions) =>\n merge(themeOptions, merge(defaultOptions, options))\n\n const notice = (options: UseNoticeOptions = {}) => {\n options = computedOptions(options)\n\n const message = createRender(options)\n\n return noticeStore.create(message, options)\n }\n\n notice.update = (\n id: string | number,\n options: Omit<UseNoticeOptions, \"id\">,\n ) => {\n options = computedOptions(options)\n\n noticeStore.update(id, options)\n }\n\n notice.closeAll = noticeStore.closeAll\n notice.close = noticeStore.close\n notice.isActive = noticeStore.isActive\n\n return notice\n}\n\ntype CreateNoticeReturn = ReturnType<typeof createNoticeFunc>\n\n/**\n * `useNotice` is a custom hook that controls the notifications of the application.\n *\n * @see Docs https://yamada-ui.com/hooks/use-notice\n */\nexport const useNotice = (\n defaultOptions?: UseNoticeOptions,\n): CreateNoticeReturn => {\n const { theme } = useTheme()\n\n return useMemo(\n () => createNoticeFunc(defaultOptions ?? {}, theme),\n [defaultOptions, theme],\n )\n}\n\ntype State = {\n [K in NoticePlacement]: NoticeOptions[]\n}\n\ntype Store = {\n subscribe: (onStoreChange: () => void) => () => void\n getSnapshot: () => State\n create: (\n message: (props: NoticeComponentProps) => ReactNode,\n options: UseNoticeOptions,\n ) => string | number\n close: (id: string | number) => void\n closeAll: (options?: { placement?: NoticePlacement[] }) => void\n update: (id: string | number, options: Omit<UseNoticeOptions, \"id\">) => void\n remove: (id: string | number, placement: NoticePlacement) => void\n isActive: (id: string | number) => boolean\n}\n\nconst initialState = {\n top: [],\n \"top-left\": [],\n \"top-right\": [],\n bottom: [],\n \"bottom-left\": [],\n \"bottom-right\": [],\n}\n\nconst createNoticeStore = (initialState: State): Store => {\n let state = initialState\n const storeChangeCache = new Set<() => void>()\n\n const setState = (setStateFunc: (values: State) => State) => {\n state = setStateFunc(state)\n storeChangeCache.forEach((onStoreChange) => onStoreChange())\n }\n\n return {\n getSnapshot: () => state,\n\n subscribe: (onStoreChange) => {\n storeChangeCache.add(onStoreChange)\n\n return () => {\n setState(() => initialState)\n storeChangeCache.delete(onStoreChange)\n }\n },\n\n remove: (id, placement) => {\n setState((prevState) => ({\n ...prevState,\n [placement]: prevState[placement].filter((notice) => notice.id != id),\n }))\n },\n\n create: (message, options) => {\n const limit = options.limit\n\n const notice = createNotice(message, options)\n const { placement, id } = notice\n\n setState((prev) => {\n let prevNotices = prev[placement] ?? []\n\n if (\n limit !== undefined &&\n limit > 0 &&\n prevNotices.length > limit - 1\n ) {\n const n = prevNotices.length - (limit - 1)\n const notices = placement.includes(\"top\")\n ? prevNotices.slice(n * -1)\n : prevNotices.slice(0, n)\n\n const ids = notices.map(({ id }) => id)\n\n prevNotices = prevNotices.map((notice) =>\n ids.includes(notice.id) ? { ...notice, isDelete: true } : notice,\n )\n }\n\n const notices = placement.includes(\"top\")\n ? [notice, ...prevNotices]\n : [...prevNotices, notice]\n\n return { ...prev, [placement]: notices }\n })\n\n return id\n },\n\n update: (id, options) => {\n setState((prev) => {\n const next = { ...prev }\n const { placement, index } = findNotice(next, id)\n\n if (placement && index !== -1) {\n next[placement][index] = {\n ...next[placement][index],\n ...options,\n message: createRender(options),\n }\n }\n\n return next\n })\n },\n\n closeAll: ({ placement } = {}) => {\n setState((prev) => {\n let placements: NoticePlacement[] = [\n \"bottom\",\n \"bottom-right\",\n \"bottom-left\",\n \"top\",\n \"top-left\",\n \"top-right\",\n ]\n\n if (placement) placements = placement\n\n return placements.reduce(\n (acc, placement) => {\n acc[placement] = prev[placement].map((notice) => ({\n ...notice,\n isDelete: true,\n }))\n\n return acc\n },\n { ...prev },\n )\n })\n },\n\n close: (id) => {\n setState((prev) => {\n const placement = getNoticePlacement(prev, id)\n\n if (!placement) return prev\n\n return {\n ...prev,\n [placement]: prev[placement].map((notice) =>\n notice.id == id ? { ...notice, isDelete: true } : notice,\n ),\n }\n })\n },\n\n isActive: (id) =>\n Boolean(findNotice(noticeStore.getSnapshot(), id).placement),\n }\n}\n\nexport const noticeStore = createNoticeStore(initialState)\n\nexport type NoticeProps = Omit<AlertProps, keyof UseNoticeOptions> &\n UseNoticeOptions & {\n onClose?: () => void\n }\n\nconst Notice: FC<NoticeProps> = ({\n variant = \"basic\",\n colorScheme,\n status,\n icon,\n title,\n description,\n isClosable,\n className,\n onClose,\n}) => {\n return (\n <Alert\n status={status}\n variant={variant}\n colorScheme={colorScheme}\n alignItems=\"start\"\n boxShadow=\"fallback(lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))\"\n className={cx(\"ui-notice\", className)}\n pe={isClosable ? 8 : undefined}\n >\n <AlertIcon\n variant={icon?.variant}\n className=\"ui-notice__icon\"\n {...(icon?.color ? { color: icon.color } : {})}\n >\n {icon?.children}\n </AlertIcon>\n\n <ui.div flex=\"1\">\n {title ? (\n <AlertTitle className=\"ui-notice__title\" lineClamp={1}>\n {title}\n </AlertTitle>\n ) : null}\n {description ? (\n <AlertDescription className=\"ui-notice__desc\" lineClamp={3}>\n {description}\n </AlertDescription>\n ) : null}\n </ui.div>\n\n {isClosable ? (\n <CloseButton\n className=\"ui-notice__close-button\"\n size=\"sm\"\n onClick={onClose}\n position=\"absolute\"\n top={2}\n right={2}\n />\n ) : null}\n </Alert>\n )\n}\n"],"mappings":"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","names":["import_core","import_utils","import_react","initialState","notices","id","notice","placement","import_jsx_runtime"]}
|
package/dist/notice-provider.mjs
CHANGED