@charcoal-ui/react 6.0.0 → 6.1.0-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/Pagination/index2.js +52 -60
- package/dist/components/Pagination/index2.js.map +1 -1
- package/dist/components/Snackbar/index.d.ts +52 -0
- package/dist/components/Snackbar/index.d.ts.map +1 -0
- package/dist/components/Snackbar/index2.cjs +268 -0
- package/dist/components/Snackbar/index2.cjs.map +1 -0
- package/dist/components/Snackbar/index2.js +263 -0
- package/dist/components/Snackbar/index2.js.map +1 -0
- package/dist/index.cjs +3 -0
- package/dist/index.css +1050 -939
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/layered.css +1050 -939
- package/dist/layered.css.map +1 -1
- package/package.json +5 -5
- package/src/components/LoadingSpinner/__snapshots__/index.css.snap +1 -1
- package/src/components/LoadingSpinner/index.css +1 -1
- package/src/components/Pagination/__snapshots__/index.css.snap +1 -1
- package/src/components/Pagination/index.css +1 -1
- package/src/components/Snackbar/__snapshots__/index.css.snap +110 -0
- package/src/components/Snackbar/index.css +110 -0
- package/src/components/Snackbar/index.story.tsx +184 -0
- package/src/components/Snackbar/index.test.tsx +294 -0
- package/src/components/Snackbar/index.tsx +455 -0
- package/src/index.ts +7 -0
|
@@ -0,0 +1,263 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { useClassNames } from "../../_lib/useClassNames.js";
|
|
3
|
+
import Button from "../Button/index2.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from "react";
|
|
6
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
import { Overlay } from "react-aria/Overlay";
|
|
8
|
+
import { c } from "react-compiler-runtime";
|
|
9
|
+
import { useToast, useToastRegion } from "react-aria/useToast";
|
|
10
|
+
import { useToastState } from "react-stately/useToastState";
|
|
11
|
+
|
|
12
|
+
//#region src/components/Snackbar/index.tsx
|
|
13
|
+
const DEFAULT_DURATION_MS = 5e3;
|
|
14
|
+
const DEFAULT_Z_INDEX = 20;
|
|
15
|
+
const ENTER_ANIMATION_DURATION_MS = 300;
|
|
16
|
+
const Snackbar = forwardRef(function Snackbar({ position = "bottom", offset = 16, dim = false, zIndex = DEFAULT_Z_INDEX, portalContainer, className }, ref) {
|
|
17
|
+
"use memo";
|
|
18
|
+
const snackbarRef = useRef(null);
|
|
19
|
+
const queueRef = useRef([]);
|
|
20
|
+
const isShowingRef = useRef(false);
|
|
21
|
+
const hoverRef = useRef({
|
|
22
|
+
active: false,
|
|
23
|
+
pending: void 0
|
|
24
|
+
});
|
|
25
|
+
const playNextRef = useRef(void 0);
|
|
26
|
+
const state = useToastState({
|
|
27
|
+
maxVisibleToasts: 1,
|
|
28
|
+
wrapUpdate: useCallback(function wrapToastUpdate(update, action) {
|
|
29
|
+
if (action !== "remove") {
|
|
30
|
+
update();
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
function finish() {
|
|
34
|
+
update();
|
|
35
|
+
playNextRef.current?.();
|
|
36
|
+
}
|
|
37
|
+
if (hoverRef.current.active) {
|
|
38
|
+
hoverRef.current.pending = () => wrapToastUpdate(update, "remove");
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
if (snackbarRef.current === null) {
|
|
42
|
+
finish();
|
|
43
|
+
return;
|
|
44
|
+
}
|
|
45
|
+
const snackbar = snackbarRef.current;
|
|
46
|
+
snackbar.dataset.exiting = "true";
|
|
47
|
+
let completed = false;
|
|
48
|
+
let fallbackTimer = 0;
|
|
49
|
+
function handleAnimationEnd(event) {
|
|
50
|
+
if (event.target === snackbar && event.animationName === "charcoal-snackbar-exit") complete();
|
|
51
|
+
}
|
|
52
|
+
function complete() {
|
|
53
|
+
if (completed) return;
|
|
54
|
+
completed = true;
|
|
55
|
+
snackbar.removeEventListener("animationend", handleAnimationEnd);
|
|
56
|
+
window.clearTimeout(fallbackTimer);
|
|
57
|
+
finish();
|
|
58
|
+
}
|
|
59
|
+
snackbar.addEventListener("animationend", handleAnimationEnd);
|
|
60
|
+
fallbackTimer = window.setTimeout(complete, 400);
|
|
61
|
+
if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) complete();
|
|
62
|
+
}, [])
|
|
63
|
+
});
|
|
64
|
+
useEffect(() => {
|
|
65
|
+
return () => {
|
|
66
|
+
queueRef.current = [];
|
|
67
|
+
isShowingRef.current = false;
|
|
68
|
+
};
|
|
69
|
+
}, []);
|
|
70
|
+
function playNext() {
|
|
71
|
+
const next = queueRef.current.shift();
|
|
72
|
+
if (next === void 0) {
|
|
73
|
+
isShowingRef.current = false;
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
const { duration, ...content } = next;
|
|
77
|
+
isShowingRef.current = true;
|
|
78
|
+
const enterMs = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? 0 : ENTER_ANIMATION_DURATION_MS;
|
|
79
|
+
state.add(content, { timeout: Math.max(1, duration + enterMs) });
|
|
80
|
+
}
|
|
81
|
+
playNextRef.current = playNext;
|
|
82
|
+
function show(message, options = {}) {
|
|
83
|
+
const { duration: durationOption = DEFAULT_DURATION_MS, button } = options;
|
|
84
|
+
const duration_0 = typeof durationOption === "number" && Number.isFinite(durationOption) ? Math.max(0, durationOption) : DEFAULT_DURATION_MS;
|
|
85
|
+
queueRef.current.push({
|
|
86
|
+
message,
|
|
87
|
+
button,
|
|
88
|
+
duration: duration_0
|
|
89
|
+
});
|
|
90
|
+
if (!isShowingRef.current) playNext();
|
|
91
|
+
}
|
|
92
|
+
useImperativeHandle(ref, () => ({ show }));
|
|
93
|
+
return /* @__PURE__ */ jsx(SnackbarRegion, {
|
|
94
|
+
state,
|
|
95
|
+
position,
|
|
96
|
+
offset,
|
|
97
|
+
dim,
|
|
98
|
+
zIndex,
|
|
99
|
+
portalContainer,
|
|
100
|
+
className,
|
|
101
|
+
snackbarRef,
|
|
102
|
+
onHoverStart: () => {
|
|
103
|
+
hoverRef.current.active = true;
|
|
104
|
+
},
|
|
105
|
+
onHoverEnd: () => {
|
|
106
|
+
hoverRef.current.active = false;
|
|
107
|
+
const pending = hoverRef.current.pending;
|
|
108
|
+
hoverRef.current.pending = void 0;
|
|
109
|
+
pending?.();
|
|
110
|
+
},
|
|
111
|
+
onActionClose: () => {
|
|
112
|
+
hoverRef.current.active = false;
|
|
113
|
+
hoverRef.current.pending = void 0;
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
});
|
|
117
|
+
function useSnackbar(t0) {
|
|
118
|
+
"use memo";
|
|
119
|
+
const $ = c(12);
|
|
120
|
+
let t1;
|
|
121
|
+
if ($[0] !== t0) {
|
|
122
|
+
t1 = t0 === void 0 ? {} : t0;
|
|
123
|
+
$[0] = t0;
|
|
124
|
+
$[1] = t1;
|
|
125
|
+
} else t1 = $[1];
|
|
126
|
+
const { position, offset, dim, zIndex, portalContainer, className } = t1;
|
|
127
|
+
const snackbarHandlerRef = useRef(null);
|
|
128
|
+
let t2;
|
|
129
|
+
if ($[2] !== className || $[3] !== dim || $[4] !== offset || $[5] !== portalContainer || $[6] !== position || $[7] !== zIndex) {
|
|
130
|
+
t2 = /* @__PURE__ */ jsx(Snackbar, {
|
|
131
|
+
ref: snackbarHandlerRef,
|
|
132
|
+
position,
|
|
133
|
+
offset,
|
|
134
|
+
dim,
|
|
135
|
+
zIndex,
|
|
136
|
+
portalContainer,
|
|
137
|
+
className
|
|
138
|
+
});
|
|
139
|
+
$[2] = className;
|
|
140
|
+
$[3] = dim;
|
|
141
|
+
$[4] = offset;
|
|
142
|
+
$[5] = portalContainer;
|
|
143
|
+
$[6] = position;
|
|
144
|
+
$[7] = zIndex;
|
|
145
|
+
$[8] = t2;
|
|
146
|
+
} else t2 = $[8];
|
|
147
|
+
const element = t2;
|
|
148
|
+
let t3;
|
|
149
|
+
if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
|
|
150
|
+
t3 = function show(message, options) {
|
|
151
|
+
snackbarHandlerRef.current?.show(message, options);
|
|
152
|
+
};
|
|
153
|
+
$[9] = t3;
|
|
154
|
+
} else t3 = $[9];
|
|
155
|
+
const show = t3;
|
|
156
|
+
let t4;
|
|
157
|
+
if ($[10] !== element) {
|
|
158
|
+
t4 = [element, show];
|
|
159
|
+
$[10] = element;
|
|
160
|
+
$[11] = t4;
|
|
161
|
+
} else t4 = $[11];
|
|
162
|
+
return t4;
|
|
163
|
+
}
|
|
164
|
+
function SnackbarRegion({ state, position, offset, dim, zIndex, portalContainer, className, snackbarRef, onHoverStart, onHoverEnd, onActionClose }) {
|
|
165
|
+
const regionRef = useRef(null);
|
|
166
|
+
const pausedByFocusRef = useRef(false);
|
|
167
|
+
const { regionProps } = useToastRegion({}, {
|
|
168
|
+
...state,
|
|
169
|
+
pauseAll() {
|
|
170
|
+
if (regionRef.current?.contains(document.activeElement)) {
|
|
171
|
+
pausedByFocusRef.current = true;
|
|
172
|
+
state.pauseAll();
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
resumeAll() {
|
|
176
|
+
if (pausedByFocusRef.current) {
|
|
177
|
+
pausedByFocusRef.current = false;
|
|
178
|
+
state.resumeAll();
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}, regionRef);
|
|
182
|
+
const classNames = useClassNames("charcoal-snackbar-region", className);
|
|
183
|
+
if (state.visibleToasts.length === 0) return null;
|
|
184
|
+
const effectivePosition = state.visibleToasts.some((toast) => toast.content.button !== void 0) ? "bottom" : position;
|
|
185
|
+
return /* @__PURE__ */ jsx(Overlay, {
|
|
186
|
+
disableFocusManagement: true,
|
|
187
|
+
portalContainer,
|
|
188
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
189
|
+
...regionProps,
|
|
190
|
+
ref: regionRef,
|
|
191
|
+
className: classNames,
|
|
192
|
+
"data-position": effectivePosition,
|
|
193
|
+
style: {
|
|
194
|
+
zIndex,
|
|
195
|
+
"--charcoal-snackbar-offset": `${offset}px`
|
|
196
|
+
},
|
|
197
|
+
children: state.visibleToasts.map((toast) => /* @__PURE__ */ jsx(SnackbarItem, {
|
|
198
|
+
toast,
|
|
199
|
+
state,
|
|
200
|
+
dim,
|
|
201
|
+
snackbarRef,
|
|
202
|
+
onHoverStart,
|
|
203
|
+
onHoverEnd,
|
|
204
|
+
onActionClose: () => {
|
|
205
|
+
onActionClose();
|
|
206
|
+
state.close(toast.key);
|
|
207
|
+
}
|
|
208
|
+
}, toast.key))
|
|
209
|
+
})
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
function SnackbarItem({ toast, state, dim, snackbarRef, onHoverStart, onHoverEnd, onActionClose }) {
|
|
213
|
+
const { toastProps, contentProps, titleProps } = useToast({ toast }, state, snackbarRef);
|
|
214
|
+
const { message, button } = toast.content;
|
|
215
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
216
|
+
...toastProps,
|
|
217
|
+
ref: snackbarRef,
|
|
218
|
+
className: "charcoal-snackbar",
|
|
219
|
+
"data-dim": dim,
|
|
220
|
+
"data-with-button": button !== void 0,
|
|
221
|
+
onPointerEnter: onHoverStart,
|
|
222
|
+
onPointerLeave: onHoverEnd,
|
|
223
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
224
|
+
...contentProps,
|
|
225
|
+
role: "status",
|
|
226
|
+
className: "charcoal-snackbar-content",
|
|
227
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
228
|
+
...titleProps,
|
|
229
|
+
className: "charcoal-snackbar-label",
|
|
230
|
+
children: message
|
|
231
|
+
})
|
|
232
|
+
}), button !== void 0 && /* @__PURE__ */ jsx(SnackbarAction, {
|
|
233
|
+
button,
|
|
234
|
+
dim,
|
|
235
|
+
onClose: onActionClose
|
|
236
|
+
})]
|
|
237
|
+
});
|
|
238
|
+
}
|
|
239
|
+
function SnackbarAction({ button, dim, onClose }) {
|
|
240
|
+
const { onClick, variant, children: buttonChildren, ...buttonProps } = button;
|
|
241
|
+
function handleButtonClick(event) {
|
|
242
|
+
onClick?.(event);
|
|
243
|
+
onClose();
|
|
244
|
+
}
|
|
245
|
+
return /* @__PURE__ */ jsx(PolymorphicButton, {
|
|
246
|
+
...buttonProps,
|
|
247
|
+
size: "S",
|
|
248
|
+
variant: variant ?? (dim ? "Navigation" : void 0),
|
|
249
|
+
onClick: handleButtonClick,
|
|
250
|
+
children: buttonChildren
|
|
251
|
+
});
|
|
252
|
+
}
|
|
253
|
+
function PolymorphicButton({ component, ...props }) {
|
|
254
|
+
if (component === void 0 || component === "button") return /* @__PURE__ */ jsx(Button, { ...props });
|
|
255
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
256
|
+
...props,
|
|
257
|
+
component
|
|
258
|
+
});
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
//#endregion
|
|
262
|
+
export { Snackbar as default, useSnackbar };
|
|
263
|
+
//# sourceMappingURL=index2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index2.js","names":["wrapToastUpdate","duration","snackbarHandlerRef","position","offset","dim","zIndex","portalContainer","className"],"sources":["../../../src/components/Snackbar/index.tsx"],"sourcesContent":["import './index.css'\n\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n} from 'react'\nimport type { ElementType, ReactNode, RefObject } from 'react'\nimport { Overlay } from 'react-aria/Overlay'\nimport { useToast, useToastRegion } from 'react-aria/useToast'\nimport {\n useToastState,\n type QueuedToast,\n type ToastState,\n} from 'react-stately/useToastState'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport Button, { type ButtonProps } from '../Button'\n\nconst DEFAULT_DURATION_MS = 5000\nconst DEFAULT_Z_INDEX = 20\nconst ENTER_ANIMATION_DURATION_MS = 300\nconst EXIT_ANIMATION_DURATION_MS = 300\n\ntype SnackbarPosition = 'top' | 'bottom'\n\ntype SnackbarButtonOption<T extends ElementType = 'button'> = Omit<\n ButtonProps<T>,\n 'component' | 'className' | 'size'\n> & {\n /**\n * ボタンのルート要素として使用するコンポーネント。ページ遷移を伴う場合は `Link` を指定する\n * @default 'button'\n * @example 'Link'\n */\n component?: T\n} & ('button' extends T ? unknown : { component: T })\n\nexport type SnackbarShowOptions<T extends ElementType = 'button'> = {\n /**\n * Snackbar を表示する時間(ミリ秒)。負の値は 0、数値でない値は 5000 として扱う\n * @default 5000\n */\n duration?: number\n /**\n * Snackbar の右側に表示するボタン\n */\n button?: SnackbarButtonOption<T>\n}\n\nexport type SnackbarHandler = {\n show: <T extends ElementType = 'button'>(\n message: ReactNode,\n options?: SnackbarShowOptions<T>,\n ) => void\n}\n\nexport type SnackbarProps = {\n /**\n * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される\n * @default 'bottom'\n */\n position?: SnackbarPosition\n /**\n * 画面端からの距離(ピクセル)\n * @default 16\n */\n offset?: number\n /**\n * 暗い背景色\n * @default false\n */\n dim?: boolean\n zIndex?: number\n portalContainer?: HTMLElement\n className?: string\n}\n\ntype SnackbarContent = {\n message: ReactNode\n button?: SnackbarButtonContent\n}\n\ntype QueuedSnackbar = SnackbarContent & {\n duration: number\n}\n\ntype SnackbarButtonContent = Omit<SnackbarButtonOption, 'component'> & {\n component?: ElementType\n}\n\nconst Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(\n {\n position = 'bottom',\n offset = 16,\n dim = false,\n zIndex = DEFAULT_Z_INDEX,\n portalContainer,\n className,\n },\n ref,\n) {\n 'use memo'\n\n const snackbarRef = useRef<HTMLDivElement>(null)\n const queueRef = useRef<QueuedSnackbar[]>([])\n const isShowingRef = useRef(false)\n const hoverRef = useRef({\n active: false,\n pending: undefined as (() => void) | undefined,\n })\n // wrapUpdate を固定したまま、後から定義する playNext の最新版を呼ぶ\n const playNextRef = useRef<(() => void) | undefined>(undefined)\n\n // wrapUpdate の参照が変わると useToastState が ToastQueue を作り直すため useCallback で固定する\n const wrapToastUpdate = useCallback(function wrapToastUpdate(\n update: () => void,\n action: 'add' | 'remove' | 'clear',\n ) {\n if (action !== 'remove') {\n update()\n return\n }\n\n function finish() {\n update()\n playNextRef.current?.()\n }\n\n if (hoverRef.current.active) {\n hoverRef.current.pending = () => wrapToastUpdate(update, 'remove')\n return\n }\n\n if (snackbarRef.current === null) {\n finish()\n return\n }\n const snackbar: HTMLDivElement = snackbarRef.current\n\n // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ\n snackbar.dataset.exiting = 'true'\n let completed = false\n let fallbackTimer = 0 // complete 内で clearTimeout(setTimeout(...)) すると新規タイマーを即キャンセルしてしまう\n function handleAnimationEnd(event: AnimationEvent) {\n if (\n event.target === snackbar &&\n event.animationName === 'charcoal-snackbar-exit'\n ) {\n complete()\n }\n }\n function complete() {\n if (completed) return\n completed = true\n snackbar.removeEventListener('animationend', handleAnimationEnd)\n window.clearTimeout(fallbackTimer)\n finish()\n }\n snackbar.addEventListener('animationend', handleAnimationEnd)\n fallbackTimer = window.setTimeout(\n complete,\n EXIT_ANIMATION_DURATION_MS + 100,\n )\n if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {\n complete()\n }\n }, [])\n\n const state = useToastState<SnackbarContent>({\n maxVisibleToasts: 1,\n wrapUpdate: wrapToastUpdate,\n })\n\n useEffect(() => {\n return () => {\n queueRef.current = []\n isShowingRef.current = false\n }\n }, [])\n\n function playNext() {\n const next = queueRef.current.shift()\n if (next === undefined) {\n isShowingRef.current = false\n return\n }\n\n const { duration, ...content } = next\n isShowingRef.current = true\n const enterMs = window.matchMedia?.('(prefers-reduced-motion: reduce)')\n .matches\n ? 0\n : ENTER_ANIMATION_DURATION_MS\n state.add(content, {\n // react-stately は 0 を「タイマーなし」と扱うため、最小の正数を渡す\n timeout: Math.max(1, duration + enterMs),\n })\n }\n playNextRef.current = playNext\n\n function show<T extends ElementType = 'button'>(\n message: ReactNode,\n options: SnackbarShowOptions<T> = {},\n ) {\n const { duration: durationOption = DEFAULT_DURATION_MS, button } = options\n const duration =\n typeof durationOption === 'number' && Number.isFinite(durationOption)\n ? Math.max(0, durationOption)\n : DEFAULT_DURATION_MS\n\n queueRef.current.push({\n message,\n button: button as SnackbarButtonContent | undefined,\n duration,\n })\n if (!isShowingRef.current) {\n playNext()\n }\n }\n\n useImperativeHandle(ref, () => ({ show }))\n\n return (\n <SnackbarRegion\n state={state}\n position={position}\n offset={offset}\n dim={dim}\n zIndex={zIndex}\n portalContainer={portalContainer}\n className={className}\n snackbarRef={snackbarRef}\n onHoverStart={() => {\n hoverRef.current.active = true\n }}\n onHoverEnd={() => {\n hoverRef.current.active = false\n const pending = hoverRef.current.pending\n hoverRef.current.pending = undefined\n pending?.()\n }}\n onActionClose={() => {\n hoverRef.current.active = false\n hoverRef.current.pending = undefined\n }}\n />\n )\n})\n\nexport default Snackbar\n\nexport function useSnackbar(props: SnackbarProps = {}) {\n 'use memo'\n\n const { position, offset, dim, zIndex, portalContainer, className } = props\n const snackbarHandlerRef = useRef<SnackbarHandler>(null)\n const element = (\n <Snackbar\n ref={snackbarHandlerRef}\n position={position}\n offset={offset}\n dim={dim}\n zIndex={zIndex}\n portalContainer={portalContainer}\n className={className}\n />\n )\n function show<T extends ElementType = 'button'>(\n message: ReactNode,\n options?: SnackbarShowOptions<T>,\n ) {\n snackbarHandlerRef.current?.show(message, options)\n }\n return [element, show] as const\n}\n\nfunction SnackbarRegion({\n state,\n position,\n offset,\n dim,\n zIndex,\n portalContainer,\n className,\n snackbarRef,\n onHoverStart,\n onHoverEnd,\n onActionClose,\n}: {\n state: ToastState<SnackbarContent>\n position: SnackbarPosition\n offset: number\n dim: boolean\n zIndex: number\n portalContainer?: HTMLElement\n className?: string\n snackbarRef: RefObject<HTMLDivElement>\n onHoverStart: () => void\n onHoverEnd: () => void\n onActionClose: () => void\n}) {\n const regionRef = useRef<HTMLDivElement>(null)\n const pausedByFocusRef = useRef(false)\n const timerState: ToastState<SnackbarContent> = {\n ...state,\n pauseAll() {\n if (regionRef.current?.contains(document.activeElement)) {\n pausedByFocusRef.current = true\n state.pauseAll()\n }\n },\n resumeAll() {\n if (pausedByFocusRef.current) {\n pausedByFocusRef.current = false\n state.resumeAll()\n }\n },\n }\n const { regionProps } = useToastRegion({}, timerState, regionRef)\n const classNames = useClassNames('charcoal-snackbar-region', className)\n\n if (state.visibleToasts.length === 0) {\n return null\n }\n\n // ボタン付きの Snackbar は常に下部に表示される\n const hasButton = state.visibleToasts.some(\n (toast) => toast.content.button !== undefined,\n )\n const effectivePosition = hasButton ? 'bottom' : position\n\n return (\n <Overlay disableFocusManagement portalContainer={portalContainer}>\n <div\n {...regionProps}\n ref={regionRef}\n className={classNames}\n data-position={effectivePosition}\n style={{\n zIndex,\n '--charcoal-snackbar-offset': `${offset}px`,\n }}\n >\n {state.visibleToasts.map((toast) => (\n <SnackbarItem\n key={toast.key}\n toast={toast}\n state={state}\n dim={dim}\n snackbarRef={snackbarRef}\n onHoverStart={onHoverStart}\n onHoverEnd={onHoverEnd}\n onActionClose={() => {\n onActionClose()\n state.close(toast.key)\n }}\n />\n ))}\n </div>\n </Overlay>\n )\n}\n\nfunction SnackbarItem({\n toast,\n state,\n dim,\n snackbarRef,\n onHoverStart,\n onHoverEnd,\n onActionClose,\n}: {\n toast: QueuedToast<SnackbarContent>\n state: ToastState<SnackbarContent>\n dim: boolean\n snackbarRef: RefObject<HTMLDivElement>\n onHoverStart: () => void\n onHoverEnd: () => void\n onActionClose: () => void\n}) {\n const { toastProps, contentProps, titleProps } = useToast(\n { toast },\n state,\n snackbarRef,\n )\n const { message, button } = toast.content\n\n return (\n <div\n {...toastProps}\n ref={snackbarRef}\n className=\"charcoal-snackbar\"\n data-dim={dim}\n data-with-button={button !== undefined}\n onPointerEnter={onHoverStart}\n onPointerLeave={onHoverEnd}\n >\n <div\n {...contentProps}\n role=\"status\"\n className=\"charcoal-snackbar-content\"\n >\n <div {...titleProps} className=\"charcoal-snackbar-label\">\n {message}\n </div>\n </div>\n {button !== undefined && (\n <SnackbarAction button={button} dim={dim} onClose={onActionClose} />\n )}\n </div>\n )\n}\n\nfunction SnackbarAction({\n button,\n dim,\n onClose,\n}: {\n button: SnackbarButtonContent\n dim: boolean\n onClose: () => void\n}) {\n const { onClick, variant, children: buttonChildren, ...buttonProps } = button\n\n function handleButtonClick(\n event: Parameters<NonNullable<ButtonProps<'button'>['onClick']>>[0],\n ) {\n onClick?.(event)\n onClose()\n }\n\n return (\n <PolymorphicButton\n {...buttonProps}\n size=\"S\"\n variant={variant ?? (dim ? 'Navigation' : undefined)}\n onClick={handleButtonClick}\n >\n {buttonChildren}\n </PolymorphicButton>\n )\n}\n\nfunction PolymorphicButton({\n component,\n ...props\n}: Omit<ButtonProps, 'component'> & { component?: ElementType }) {\n if (component === undefined || component === 'button') {\n return <Button {...props} />\n }\n\n return <Button {...props} component={component} />\n}\n"],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -27,6 +27,7 @@ const require_index$19 = require('./components/HintText/index2.cjs');
|
|
|
27
27
|
const require_index$20 = require('./components/TextEllipsis/index2.cjs');
|
|
28
28
|
const require_index$21 = require('./components/Pagination/index2.cjs');
|
|
29
29
|
const require_index$22 = require('./components/Carousel/index2.cjs');
|
|
30
|
+
const require_index$23 = require('./components/Snackbar/index2.cjs');
|
|
30
31
|
require('./components/FocusRing/index.cjs');
|
|
31
32
|
let react_aria_private_overlays_useModal = require("react-aria/private/overlays/useModal");
|
|
32
33
|
|
|
@@ -74,6 +75,8 @@ exports.makeSetThemeScriptCode = require_SetThemeScript.makeSetThemeScriptCode;
|
|
|
74
75
|
exports.prefersColorScheme = require_themeHelper.prefersColorScheme;
|
|
75
76
|
exports.themeSelector = require_themeHelper.themeSelector;
|
|
76
77
|
exports.themeSetter = require_themeHelper.themeSetter;
|
|
78
|
+
exports.unstable_Snackbar = require_index$23.default;
|
|
79
|
+
exports.unstable_useSnackbar = require_index$23.useSnackbar;
|
|
77
80
|
exports.useLocalStorage = require_themeHelper.useLocalStorage;
|
|
78
81
|
exports.useMedia = require_themeHelper.useMedia;
|
|
79
82
|
exports.useTheme = require_themeHelper.useTheme;
|