@yamada-ui/notice 1.1.5-next-20241005220055 → 1.1.5-next-20241008193728

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,7 +1,7 @@
1
1
  "use client"
2
2
  import {
3
3
  noticeStore
4
- } from "./chunk-D5QBPLL6.mjs";
4
+ } from "./chunk-SAIMVHSM.mjs";
5
5
 
6
6
  // src/notice-provider.tsx
7
7
  import { ui } from "@yamada-ui/core";
@@ -12,12 +12,12 @@ import { cx, runIfFunc, useUpdateEffect } from "@yamada-ui/utils";
12
12
  import { memo, useEffect, useState, useSyncExternalStore } from "react";
13
13
  import { jsx } from "react/jsx-runtime";
14
14
  var NoticeProvider = ({
15
- variants,
16
- gap = "fallback(4, 1rem)",
17
15
  appendToParentPortal,
18
- listProps,
16
+ containerRef,
17
+ gap = "fallback(4, 1rem)",
18
+ variants,
19
19
  itemProps,
20
- containerRef
20
+ listProps
21
21
  }) => {
22
22
  const state = useSyncExternalStore(
23
23
  noticeStore.subscribe,
@@ -30,17 +30,17 @@ var NoticeProvider = ({
30
30
  const right = !placement.includes("left") ? "env(safe-area-inset-right, 0px)" : void 0;
31
31
  const left = !placement.includes("right") ? "env(safe-area-inset-left, 0px)" : void 0;
32
32
  const css = {
33
- position: "fixed",
34
- zIndex: "fallback(zarbon, 160)",
35
- pointerEvents: "none",
33
+ bottom,
36
34
  display: "flex",
37
35
  flexDirection: "column",
38
- margin: gap,
39
36
  gap,
40
- top,
41
- bottom,
37
+ left,
38
+ margin: gap,
39
+ pointerEvents: "none",
40
+ position: "fixed",
42
41
  right,
43
- left
42
+ top,
43
+ zIndex: "fallback(zarbon, 160)"
44
44
  };
45
45
  return /* @__PURE__ */ jsx(
46
46
  ui.ul,
@@ -71,19 +71,15 @@ var NoticeProvider = ({
71
71
  );
72
72
  };
73
73
  var defaultVariants = {
74
- initial: ({ placement }) => ({
75
- opacity: 0,
76
- [["top", "bottom"].includes(placement) ? "y" : "x"]: (placement === "bottom" ? 1 : placement.includes("right") ? 1 : -1) * 24
77
- }),
78
74
  animate: {
79
75
  opacity: 1,
80
- y: 0,
81
- x: 0,
82
76
  scale: 1,
83
77
  transition: {
84
78
  duration: 0.4,
85
79
  ease: [0.4, 0, 0.2, 1]
86
- }
80
+ },
81
+ x: 0,
82
+ y: 0
87
83
  },
88
84
  exit: {
89
85
  opacity: 0,
@@ -92,19 +88,23 @@ var defaultVariants = {
92
88
  duration: 0.2,
93
89
  ease: [0.4, 0, 1, 1]
94
90
  }
95
- }
91
+ },
92
+ initial: ({ placement }) => ({
93
+ [["bottom", "top"].includes(placement) ? "y" : "x"]: (placement === "bottom" ? 1 : placement.includes("right") ? 1 : -1) * 24,
94
+ opacity: 0
95
+ })
96
96
  };
97
97
  var NoticeComponent = memo(
98
98
  ({
99
- variants = defaultVariants,
100
- itemProps,
101
- placement,
99
+ style,
102
100
  duration = 5e3,
101
+ isDelete = false,
103
102
  message,
103
+ placement,
104
+ variants = defaultVariants,
105
+ itemProps,
104
106
  onCloseComplete,
105
- isDelete = false,
106
- onDelete,
107
- style
107
+ onDelete
108
108
  }) => {
109
109
  const [delay, setDelay] = useState(duration);
110
110
  const isPresent = useIsPresent();
@@ -124,27 +124,27 @@ var NoticeComponent = memo(
124
124
  }, [isPresent, isDelete, onDelete]);
125
125
  useTimeout(onClose, delay);
126
126
  const css = {
127
- pointerEvents: "auto",
128
127
  maxW: "36rem",
129
128
  minW: "20rem",
129
+ pointerEvents: "auto",
130
130
  ...style
131
131
  };
132
132
  return /* @__PURE__ */ jsx(
133
133
  motion.li,
134
134
  {
135
- layout: true,
136
135
  className: "ui-notice__list__item",
137
- variants,
138
- initial: "initial",
139
- animate: "animate",
140
- exit: "exit",
141
- onHoverStart: onMouseEnter,
142
- onHoverEnd: onMouseLeave,
143
- custom: { placement },
144
136
  style: {
145
137
  display: "flex",
146
138
  justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center"
147
139
  },
140
+ animate: "animate",
141
+ custom: { placement },
142
+ exit: "exit",
143
+ initial: "initial",
144
+ layout: true,
145
+ variants,
146
+ onHoverEnd: onMouseLeave,
147
+ onHoverStart: onMouseEnter,
148
148
  ...itemProps,
149
149
  children: /* @__PURE__ */ jsx(ui.div, { className: "ui-notice__list__item__inner", __css: css, children: runIfFunc(message, { onClose }) })
150
150
  }
@@ -156,4 +156,4 @@ NoticeComponent.displayName = "NoticeComponent";
156
156
  export {
157
157
  NoticeProvider
158
158
  };
159
- //# sourceMappingURL=chunk-TNXAE4RC.mjs.map
159
+ //# sourceMappingURL=chunk-OWEFOXHK.mjs.map
@@ -0,0 +1 @@
1
+ {"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 { 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 { memo, 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\"\n"],"mappings":"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","names":[]}
@@ -16,7 +16,7 @@ var findId = (options, id) => options.find((notice) => notice.id === id);
16
16
  var findNotice = (state, id) => {
17
17
  const placement = getNoticePlacement(state, id);
18
18
  const index = placement ? state[placement].findIndex((notice) => notice.id === id) : -1;
19
- return { placement, index };
19
+ return { index, placement };
20
20
  };
21
21
  var getNoticePlacement = (state, id) => {
22
22
  for (const [placement, values] of Object.entries(state)) {
@@ -26,24 +26,24 @@ var getNoticePlacement = (state, id) => {
26
26
  var counter = 0;
27
27
  var createNotice = (message, {
28
28
  id,
29
- placement = "top",
29
+ style,
30
30
  duration,
31
- onCloseComplete,
31
+ placement = "top",
32
32
  status,
33
- style
33
+ onCloseComplete
34
34
  }) => {
35
35
  counter += 1;
36
36
  id != null ? id : id = counter;
37
37
  return {
38
38
  id,
39
- placement,
40
- status,
39
+ style,
41
40
  duration,
42
- message,
43
- onDelete: () => noticeStore.remove(String(id), placement),
44
41
  isDelete: false,
42
+ message,
43
+ placement,
44
+ status,
45
45
  onCloseComplete,
46
- style
46
+ onDelete: () => noticeStore.remove(String(id), placement)
47
47
  };
48
48
  };
49
49
  var createRender = (options) => {
@@ -83,12 +83,12 @@ var useNotice = (defaultOptions) => {
83
83
  );
84
84
  };
85
85
  var initialState = {
86
- top: [],
87
- "top-left": [],
88
- "top-right": [],
89
86
  bottom: [],
90
87
  "bottom-left": [],
91
- "bottom-right": []
88
+ "bottom-right": [],
89
+ top: [],
90
+ "top-left": [],
91
+ "top-right": []
92
92
  };
93
93
  var createNoticeStore = (initialState2) => {
94
94
  let state = initialState2;
@@ -98,27 +98,47 @@ var createNoticeStore = (initialState2) => {
98
98
  storeChangeCache.forEach((onStoreChange) => onStoreChange());
99
99
  };
100
100
  return {
101
- getSnapshot: () => state,
102
- subscribe: (onStoreChange) => {
103
- storeChangeCache.add(onStoreChange);
104
- return () => {
105
- setState(() => initialState2);
106
- storeChangeCache.delete(onStoreChange);
107
- };
101
+ close: (id) => {
102
+ setState((prev) => {
103
+ const placement = getNoticePlacement(prev, id);
104
+ if (!placement) return prev;
105
+ return {
106
+ ...prev,
107
+ [placement]: prev[placement].map(
108
+ (notice) => notice.id == id ? { ...notice, isDelete: true } : notice
109
+ )
110
+ };
111
+ });
108
112
  },
109
- remove: (id, placement) => {
110
- setState((prevState) => ({
111
- ...prevState,
112
- [placement]: prevState[placement].filter((notice) => notice.id != id)
113
- }));
113
+ closeAll: ({ placement } = {}) => {
114
+ setState((prev) => {
115
+ let placements = [
116
+ "bottom",
117
+ "bottom-right",
118
+ "bottom-left",
119
+ "top",
120
+ "top-left",
121
+ "top-right"
122
+ ];
123
+ if (placement) placements = placement;
124
+ return placements.reduce(
125
+ (acc, placement2) => {
126
+ acc[placement2] = prev[placement2].map((notice) => ({
127
+ ...notice,
128
+ isDelete: true
129
+ }));
130
+ return acc;
131
+ },
132
+ { ...prev }
133
+ );
134
+ });
114
135
  },
115
136
  create: (message, options) => {
116
137
  const limit = options.limit;
117
138
  const notice = createNotice(message, options);
118
- const { placement, id } = notice;
139
+ const { id, placement } = notice;
119
140
  setState((prev) => {
120
- var _a;
121
- let prevNotices = (_a = prev[placement]) != null ? _a : [];
141
+ let prevNotices = prev[placement];
122
142
  if (limit !== void 0 && limit > 0 && prevNotices.length > limit - 1) {
123
143
  const n = prevNotices.length - (limit - 1);
124
144
  const notices2 = placement.includes("top") ? prevNotices.slice(n * -1) : prevNotices.slice(0, n);
@@ -132,11 +152,26 @@ var createNoticeStore = (initialState2) => {
132
152
  });
133
153
  return id;
134
154
  },
155
+ getSnapshot: () => state,
156
+ isActive: (id) => Boolean(findNotice(noticeStore.getSnapshot(), id).placement),
157
+ remove: (id, placement) => {
158
+ setState((prevState) => ({
159
+ ...prevState,
160
+ [placement]: prevState[placement].filter((notice) => notice.id != id)
161
+ }));
162
+ },
163
+ subscribe: (onStoreChange) => {
164
+ storeChangeCache.add(onStoreChange);
165
+ return () => {
166
+ setState(() => initialState2);
167
+ storeChangeCache.delete(onStoreChange);
168
+ };
169
+ },
135
170
  update: (id, options) => {
136
171
  setState((prev) => {
137
172
  const next = { ...prev };
138
- const { placement, index } = findNotice(next, id);
139
- if (placement && index !== -1) {
173
+ const { index, placement } = findNotice(next, id);
174
+ if (placement && index !== -1 && next[placement][index]) {
140
175
  next[placement][index] = {
141
176
  ...next[placement][index],
142
177
  ...options,
@@ -145,56 +180,20 @@ var createNoticeStore = (initialState2) => {
145
180
  }
146
181
  return next;
147
182
  });
148
- },
149
- closeAll: ({ placement } = {}) => {
150
- setState((prev) => {
151
- let placements = [
152
- "bottom",
153
- "bottom-right",
154
- "bottom-left",
155
- "top",
156
- "top-left",
157
- "top-right"
158
- ];
159
- if (placement) placements = placement;
160
- return placements.reduce(
161
- (acc, placement2) => {
162
- acc[placement2] = prev[placement2].map((notice) => ({
163
- ...notice,
164
- isDelete: true
165
- }));
166
- return acc;
167
- },
168
- { ...prev }
169
- );
170
- });
171
- },
172
- close: (id) => {
173
- setState((prev) => {
174
- const placement = getNoticePlacement(prev, id);
175
- if (!placement) return prev;
176
- return {
177
- ...prev,
178
- [placement]: prev[placement].map(
179
- (notice) => notice.id == id ? { ...notice, isDelete: true } : notice
180
- )
181
- };
182
- });
183
- },
184
- isActive: (id) => Boolean(findNotice(noticeStore.getSnapshot(), id).placement)
183
+ }
185
184
  };
186
185
  };
187
186
  var noticeStore = createNoticeStore(initialState);
188
187
  var Notice = ({
189
- variant = "basic",
188
+ className,
190
189
  colorScheme,
191
- status,
192
- icon,
193
- title,
190
+ variant = "basic",
191
+ closeStrategy = "button",
194
192
  description,
193
+ icon,
195
194
  isClosable,
196
- closeStrategy = "button",
197
- className,
195
+ status,
196
+ title,
198
197
  onClose
199
198
  }) => {
200
199
  const isButtonClosable = isClosable && (closeStrategy === "button" || closeStrategy === "both");
@@ -202,20 +201,20 @@ var Notice = ({
202
201
  return /* @__PURE__ */ jsxs(
203
202
  Alert,
204
203
  {
205
- status,
206
- variant,
204
+ className: cx("ui-notice", className),
207
205
  colorScheme,
206
+ variant,
208
207
  alignItems: "start",
209
208
  boxShadow: "fallback(lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05))",
210
- className: cx("ui-notice", className),
211
209
  pe: isButtonClosable ? 8 : void 0,
210
+ status,
212
211
  onClick: isElementClosable ? onClose : void 0,
213
212
  children: [
214
213
  /* @__PURE__ */ jsx(
215
214
  AlertIcon,
216
215
  {
217
- variant: icon == null ? void 0 : icon.variant,
218
216
  className: "ui-notice__icon",
217
+ variant: icon == null ? void 0 : icon.variant,
219
218
  ...(icon == null ? void 0 : icon.color) ? { color: icon.color } : {},
220
219
  children: icon == null ? void 0 : icon.children
221
220
  }
@@ -229,13 +228,13 @@ var Notice = ({
229
228
  {
230
229
  className: "ui-notice__close-button",
231
230
  size: "sm",
231
+ position: "absolute",
232
+ right: 2,
233
+ top: 2,
232
234
  onClick: (ev) => {
233
235
  ev.stopPropagation();
234
236
  onClose == null ? void 0 : onClose();
235
- },
236
- position: "absolute",
237
- top: 2,
238
- right: 2
237
+ }
239
238
  }
240
239
  ) : null
241
240
  ]
@@ -247,4 +246,4 @@ export {
247
246
  useNotice,
248
247
  noticeStore
249
248
  };
250
- //# sourceMappingURL=chunk-D5QBPLL6.mjs.map
249
+ //# sourceMappingURL=chunk-SAIMVHSM.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/notice.tsx"],"sourcesContent":["import type { AlertProps } from \"@yamada-ui/alert\"\nimport type {\n CSSUIObject,\n NoticeComponentProps,\n NoticeConfigOptions,\n NoticePlacement,\n StyledTheme,\n} from \"@yamada-ui/core\"\nimport type { FC, ReactNode } from \"react\"\nimport {\n Alert,\n AlertDescription,\n AlertIcon,\n AlertTitle,\n} from \"@yamada-ui/alert\"\nimport { CloseButton } from \"@yamada-ui/close-button\"\nimport { ui, useTheme } from \"@yamada-ui/core\"\nimport { cx, merge } from \"@yamada-ui/utils\"\nimport { useMemo } from \"react\"\n\nexport interface UseNoticeOptions extends NoticeConfigOptions {}\n\nexport interface NoticeOptions {\n id: number | string\n duration: UseNoticeOptions[\"duration\"]\n message: (props: NoticeComponentProps) => ReactNode\n placement: NoticePlacement\n status: UseNoticeOptions[\"status\"]\n onDelete: () => void\n style?: CSSUIObject\n isDelete?: boolean\n onCloseComplete?: () => void\n}\n\nconst findId = (\n options: NoticeOptions[],\n id: number | string,\n): NoticeOptions | undefined => options.find((notice) => notice.id === id)\n\nconst findNotice = (\n state: State,\n id: number | string,\n): {\n index: number\n placement: NoticePlacement | undefined\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 { index, placement }\n}\n\nconst getNoticePlacement = (\n state: State,\n id: number | string,\n): NoticePlacement | undefined => {\n for (const [placement, values] of Object.entries(state)) {\n if (findId(values, id)) return placement as NoticePlacement\n }\n}\n\ninterface CreateNoticeOptions\n extends Partial<\n Pick<\n NoticeOptions,\n \"duration\" | \"id\" | \"onCloseComplete\" | \"placement\" | \"status\" | \"style\"\n >\n > {}\n\nlet counter = 0\n\nconst createNotice = (\n message: (props: NoticeComponentProps) => ReactNode,\n {\n id,\n style,\n duration,\n placement = \"top\",\n status,\n onCloseComplete,\n }: CreateNoticeOptions,\n) => {\n counter += 1\n\n id ??= counter\n\n return {\n id,\n style,\n duration,\n isDelete: false,\n message,\n placement,\n status,\n onCloseComplete,\n onDelete: () => noticeStore.remove(String(id), placement),\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 })\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: number | string,\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\ninterface Store {\n close: (id: number | string) => void\n closeAll: (options?: { placement?: NoticePlacement[] }) => void\n create: (\n message: (props: NoticeComponentProps) => ReactNode,\n options: UseNoticeOptions,\n ) => number | string\n getSnapshot: () => State\n isActive: (id: number | string) => boolean\n remove: (id: number | string, placement: NoticePlacement) => void\n subscribe: (onStoreChange: () => void) => () => void\n update: (id: number | string, options: Omit<UseNoticeOptions, \"id\">) => void\n}\n\nconst initialState = {\n bottom: [],\n \"bottom-left\": [],\n \"bottom-right\": [],\n top: [],\n \"top-left\": [],\n \"top-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 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 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 create: (message, options) => {\n const limit = options.limit\n\n const notice = createNotice(message, options)\n const { id, placement } = 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 getSnapshot: () => state,\n\n isActive: (id) =>\n Boolean(findNotice(noticeStore.getSnapshot(), id).placement),\n\n remove: (id, placement) => {\n setState((prevState) => ({\n ...prevState,\n [placement]: prevState[placement].filter((notice) => notice.id != id),\n }))\n },\n\n subscribe: (onStoreChange) => {\n storeChangeCache.add(onStoreChange)\n\n return () => {\n setState(() => initialState)\n storeChangeCache.delete(onStoreChange)\n }\n },\n\n update: (id, options) => {\n setState((prev) => {\n const next = { ...prev }\n const { index, placement } = findNotice(next, id)\n\n if (placement && index !== -1 && next[placement][index]) {\n next[placement][index] = {\n ...next[placement][index],\n ...options,\n message: createRender(options),\n }\n }\n\n return next\n })\n },\n }\n}\n\nexport const noticeStore = createNoticeStore(initialState)\n\nexport interface NoticeProps\n extends Omit<AlertProps, keyof UseNoticeOptions>,\n UseNoticeOptions {\n onClose?: () => void\n}\n\nconst Notice: FC<NoticeProps> = ({\n className,\n colorScheme,\n variant = \"basic\",\n closeStrategy = \"button\",\n description,\n icon,\n isClosable,\n status,\n title,\n onClose,\n}) => {\n const isButtonClosable =\n isClosable && (closeStrategy === \"button\" || closeStrategy === \"both\")\n const isElementClosable =\n isClosable && (closeStrategy === \"element\" || closeStrategy === \"both\")\n\n return (\n <Alert\n className={cx(\"ui-notice\", className)}\n colorScheme={colorScheme}\n variant={variant}\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 pe={isButtonClosable ? 8 : undefined}\n status={status}\n onClick={isElementClosable ? onClose : undefined}\n >\n <AlertIcon\n className=\"ui-notice__icon\"\n variant={icon?.variant}\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 {isButtonClosable ? (\n <CloseButton\n className=\"ui-notice__close-button\"\n size=\"sm\"\n position=\"absolute\"\n right={2}\n top={2}\n onClick={(ev) => {\n ev.stopPropagation()\n\n onClose?.()\n }}\n />\n ) : null}\n </Alert>\n )\n}\n"],"mappings":"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","names":["initialState","placement","notices","id","notice"]}