@dmsi/wedgekit-react 0.0.79 → 0.0.81

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.
@@ -0,0 +1,252 @@
1
+ import {
2
+ useMounted
3
+ } from "./chunk-4RJKB7LC.js";
4
+ import {
5
+ ModalButtons
6
+ } from "./chunk-QUPHLL7D.js";
7
+ import {
8
+ ModalContent
9
+ } from "./chunk-FWPJ73IK.js";
10
+ import {
11
+ ModalHeader
12
+ } from "./chunk-TVDFTRGL.js";
13
+ import {
14
+ ModalScrim
15
+ } from "./chunk-4JLU7TAC.js";
16
+ import {
17
+ useMatchesMobile
18
+ } from "./chunk-SWA5WVQO.js";
19
+ import {
20
+ findDocumentRoot
21
+ } from "./chunk-4T7F5BZZ.js";
22
+
23
+ // src/components/Modal.tsx
24
+ import clsx from "clsx";
25
+ import { useCallback, useEffect, useRef } from "react";
26
+ import { createPortal } from "react-dom";
27
+ import { usePrevious } from "react-use";
28
+ import { jsx, jsxs } from "react/jsx-runtime";
29
+ var fadeInScale = (element, duration = 300) => element.animate(
30
+ [
31
+ { opacity: 0, transform: "scale(0.95)" },
32
+ { opacity: 1, transform: "scale(1)" }
33
+ ],
34
+ {
35
+ duration,
36
+ easing: "cubic-bezier(0.4, 0, 0.2, 1)",
37
+ fill: "both"
38
+ }
39
+ );
40
+ var fadeOutScale = (element, duration = 200) => element.animate(
41
+ [
42
+ { opacity: 1, transform: "scale(1)" },
43
+ { opacity: 0, transform: "scale(0.95)" }
44
+ ],
45
+ {
46
+ duration,
47
+ easing: "ease-in-out",
48
+ fill: "both"
49
+ }
50
+ );
51
+ var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
52
+ duration,
53
+ easing: "cubic-bezier(0.4, 0, 0.2, 1)",
54
+ fill: "both"
55
+ });
56
+ var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
57
+ duration,
58
+ easing: "ease-in-out",
59
+ fill: "both"
60
+ });
61
+ var whenAllAnimationsFinish = (animations, callback) => {
62
+ let finishedCount = 0;
63
+ animations.forEach((animation) => {
64
+ animation.onfinish = () => {
65
+ finishedCount += 1;
66
+ if (finishedCount === animations.length) {
67
+ callback();
68
+ }
69
+ };
70
+ });
71
+ };
72
+ var sizes = {
73
+ small: {
74
+ sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
75
+ },
76
+ medium: {
77
+ sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
78
+ },
79
+ large: {
80
+ sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
81
+ },
82
+ "x-large": {
83
+ sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
84
+ }
85
+ };
86
+ var Modal = ({
87
+ id,
88
+ title,
89
+ open = false,
90
+ size = "small",
91
+ className,
92
+ children,
93
+ onClose,
94
+ onContinue,
95
+ closeOnBackdropClick = true,
96
+ showButtons = false,
97
+ hideCloseIcon = false,
98
+ headerIcon,
99
+ fixedHeightScrolling = false,
100
+ customActions
101
+ }) => {
102
+ var _a;
103
+ const mounted = useMounted();
104
+ const modalRef = useRef(null);
105
+ const bgRef = useRef(null);
106
+ const wasOpen = usePrevious(open);
107
+ const isMobile = useMatchesMobile();
108
+ const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
109
+ useEffect(() => {
110
+ if (!mounted) return;
111
+ if (!modalRef.current || !bgRef.current) {
112
+ console.error("Modal or background reference is not set.");
113
+ return;
114
+ }
115
+ if (wasOpen === void 0) return;
116
+ if (wasOpen && !open) {
117
+ const modalAnimation = fadeOutScale(modalRef.current);
118
+ const bgAnimation = bgFadeOut(bgRef.current);
119
+ whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
120
+ if (onClose) {
121
+ onClose();
122
+ }
123
+ });
124
+ } else if (!wasOpen && open) {
125
+ fadeInScale(modalRef.current);
126
+ bgFadeIn(bgRef.current);
127
+ }
128
+ }, [mounted, open]);
129
+ const handleKeyDown = useCallback(
130
+ (e) => {
131
+ if (e.key === "Escape") {
132
+ if (onClose) {
133
+ e.preventDefault();
134
+ onClose();
135
+ }
136
+ }
137
+ },
138
+ [onClose, bgRef, modalRef]
139
+ );
140
+ const handleClose = useCallback(() => {
141
+ if (onClose) {
142
+ onClose();
143
+ }
144
+ }, [onClose]);
145
+ useEffect(() => {
146
+ if (open) {
147
+ document.addEventListener("keyup", handleKeyDown);
148
+ }
149
+ return () => {
150
+ document.removeEventListener("keyup", handleKeyDown);
151
+ };
152
+ }, [open, handleKeyDown]);
153
+ useEffect(() => {
154
+ if (!open) return;
155
+ const scrollY = window.scrollY;
156
+ const body = document.body;
157
+ body.style.position = "fixed";
158
+ body.style.top = `-${scrollY}px`;
159
+ body.style.left = "0";
160
+ body.style.right = "0";
161
+ body.style.overflow = "hidden";
162
+ body.style.width = "100%";
163
+ return () => {
164
+ body.style.position = "";
165
+ body.style.top = "";
166
+ body.style.left = "";
167
+ body.style.right = "";
168
+ body.style.overflow = "";
169
+ body.style.width = "";
170
+ window.scrollTo(0, scrollY);
171
+ };
172
+ }, [open]);
173
+ const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
174
+ const backgroundClickHandler = useCallback(
175
+ (e) => {
176
+ const target = e.target;
177
+ const currentTarget = e.currentTarget;
178
+ if (currentTarget.contains(target) && currentTarget !== target) {
179
+ e.stopPropagation();
180
+ return;
181
+ }
182
+ if (open && closeOnBackdropClick) {
183
+ handleClose();
184
+ }
185
+ },
186
+ [open, closeOnBackdropClick, handleClose]
187
+ );
188
+ if (!mounted) {
189
+ return null;
190
+ }
191
+ return createPortal(
192
+ /* @__PURE__ */ jsx(
193
+ ModalScrim,
194
+ {
195
+ id: id ? `${id}-scrim` : void 0,
196
+ size,
197
+ ref: bgRef,
198
+ show: open,
199
+ onClick: backgroundClickHandler,
200
+ children: /* @__PURE__ */ jsxs(
201
+ "div",
202
+ {
203
+ id,
204
+ ref: modalRef,
205
+ className: clsx(
206
+ "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
207
+ computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
208
+ className,
209
+ sizeClass
210
+ ),
211
+ onClick: (e) => e.stopPropagation(),
212
+ children: [
213
+ /* @__PURE__ */ jsx(
214
+ ModalHeader,
215
+ {
216
+ id: id ? `${id}-header` : void 0,
217
+ title,
218
+ onClose: handleClose,
219
+ hideCloseIcon,
220
+ headerIcon
221
+ }
222
+ ),
223
+ children && /* @__PURE__ */ jsx(
224
+ ModalContent,
225
+ {
226
+ id: id ? `${id}-content` : void 0,
227
+ fixedHeightScrolling: computedFixedHeightScrolling,
228
+ children
229
+ }
230
+ ),
231
+ showButtons && /* @__PURE__ */ jsx(
232
+ ModalButtons,
233
+ {
234
+ id: id ? `${id}-buttons` : void 0,
235
+ onClose: handleClose,
236
+ onContinue,
237
+ customActions
238
+ }
239
+ )
240
+ ]
241
+ }
242
+ )
243
+ }
244
+ ),
245
+ findDocumentRoot(bgRef.current)
246
+ );
247
+ };
248
+ Modal.displayName = "Modal";
249
+
250
+ export {
251
+ Modal
252
+ };
@@ -1,10 +1,10 @@
1
1
  "use client";
2
- import {
3
- Tooltip
4
- } from "../chunk-QZGUMB7T.js";
5
2
  import {
6
3
  useInfiniteScroll
7
4
  } from "../chunk-AWQSSKCK.js";
5
+ import {
6
+ Tooltip
7
+ } from "../chunk-QZGUMB7T.js";
8
8
  import {
9
9
  Select
10
10
  } from "../chunk-2BVSUYXU.js";
@@ -1,257 +1,19 @@
1
1
  "use client";
2
2
  import {
3
- useMounted
4
- } from "../chunk-4RJKB7LC.js";
5
- import {
6
- ModalButtons
7
- } from "../chunk-QUPHLL7D.js";
8
- import {
9
- ModalContent
10
- } from "../chunk-FWPJ73IK.js";
11
- import {
12
- ModalHeader
13
- } from "../chunk-TVDFTRGL.js";
14
- import {
15
- ModalScrim
16
- } from "../chunk-4JLU7TAC.js";
3
+ Modal
4
+ } from "../chunk-2DCVAATK.js";
5
+ import "../chunk-4RJKB7LC.js";
6
+ import "../chunk-QUPHLL7D.js";
7
+ import "../chunk-FWPJ73IK.js";
8
+ import "../chunk-TVDFTRGL.js";
9
+ import "../chunk-4JLU7TAC.js";
17
10
  import "../chunk-J6LETUNM.js";
18
- import {
19
- useMatchesMobile
20
- } from "../chunk-SWA5WVQO.js";
21
- import {
22
- findDocumentRoot
23
- } from "../chunk-4T7F5BZZ.js";
11
+ import "../chunk-SWA5WVQO.js";
12
+ import "../chunk-4T7F5BZZ.js";
24
13
  import "../chunk-MZJS2ZAU.js";
25
14
  import "../chunk-IGQVA7SC.js";
26
15
  import "../chunk-RDLEIAQU.js";
27
16
  import "../chunk-ORMEWXMH.js";
28
-
29
- // src/components/Modal.tsx
30
- import clsx from "clsx";
31
- import { useCallback, useEffect, useRef } from "react";
32
- import { createPortal } from "react-dom";
33
- import { usePrevious } from "react-use";
34
- import { jsx, jsxs } from "react/jsx-runtime";
35
- var fadeInScale = (element, duration = 300) => element.animate(
36
- [
37
- { opacity: 0, transform: "scale(0.95)" },
38
- { opacity: 1, transform: "scale(1)" }
39
- ],
40
- {
41
- duration,
42
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
43
- fill: "both"
44
- }
45
- );
46
- var fadeOutScale = (element, duration = 200) => element.animate(
47
- [
48
- { opacity: 1, transform: "scale(1)" },
49
- { opacity: 0, transform: "scale(0.95)" }
50
- ],
51
- {
52
- duration,
53
- easing: "ease-in-out",
54
- fill: "both"
55
- }
56
- );
57
- var bgFadeIn = (element, duration = 300) => element.animate([{ opacity: 0 }, { opacity: 1 }], {
58
- duration,
59
- easing: "cubic-bezier(0.4, 0, 0.2, 1)",
60
- fill: "both"
61
- });
62
- var bgFadeOut = (element, duration = 200) => element.animate([{ opacity: 1 }, { opacity: 0 }], {
63
- duration,
64
- easing: "ease-in-out",
65
- fill: "both"
66
- });
67
- var whenAllAnimationsFinish = (animations, callback) => {
68
- let finishedCount = 0;
69
- animations.forEach((animation) => {
70
- animation.onfinish = () => {
71
- finishedCount += 1;
72
- if (finishedCount === animations.length) {
73
- callback();
74
- }
75
- };
76
- });
77
- };
78
- var sizes = {
79
- small: {
80
- sizeClass: "max-h-screen desktop:max-w-120 rounded-sm"
81
- },
82
- medium: {
83
- sizeClass: "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
84
- },
85
- large: {
86
- sizeClass: "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
87
- },
88
- "x-large": {
89
- sizeClass: "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240"
90
- }
91
- };
92
- var Modal = ({
93
- id,
94
- title,
95
- open = false,
96
- size = "small",
97
- className,
98
- children,
99
- onClose,
100
- onContinue,
101
- closeOnBackdropClick = true,
102
- showButtons = false,
103
- hideCloseIcon = false,
104
- headerIcon,
105
- fixedHeightScrolling = false,
106
- customActions
107
- }) => {
108
- var _a;
109
- const mounted = useMounted();
110
- const modalRef = useRef(null);
111
- const bgRef = useRef(null);
112
- const wasOpen = usePrevious(open);
113
- const isMobile = useMatchesMobile();
114
- const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
115
- useEffect(() => {
116
- if (!mounted) return;
117
- if (!modalRef.current || !bgRef.current) {
118
- console.error("Modal or background reference is not set.");
119
- return;
120
- }
121
- if (wasOpen === void 0) return;
122
- if (wasOpen && !open) {
123
- const modalAnimation = fadeOutScale(modalRef.current);
124
- const bgAnimation = bgFadeOut(bgRef.current);
125
- whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
126
- if (onClose) {
127
- onClose();
128
- }
129
- });
130
- } else if (!wasOpen && open) {
131
- fadeInScale(modalRef.current);
132
- bgFadeIn(bgRef.current);
133
- }
134
- }, [mounted, open]);
135
- const handleKeyDown = useCallback(
136
- (e) => {
137
- if (e.key === "Escape") {
138
- if (onClose) {
139
- e.preventDefault();
140
- onClose();
141
- }
142
- }
143
- },
144
- [onClose, bgRef, modalRef]
145
- );
146
- const handleClose = useCallback(() => {
147
- if (onClose) {
148
- onClose();
149
- }
150
- }, [onClose]);
151
- useEffect(() => {
152
- if (open) {
153
- document.addEventListener("keyup", handleKeyDown);
154
- }
155
- return () => {
156
- document.removeEventListener("keyup", handleKeyDown);
157
- };
158
- }, [open, handleKeyDown]);
159
- useEffect(() => {
160
- if (!open) return;
161
- const scrollY = window.scrollY;
162
- const body = document.body;
163
- body.style.position = "fixed";
164
- body.style.top = `-${scrollY}px`;
165
- body.style.left = "0";
166
- body.style.right = "0";
167
- body.style.overflow = "hidden";
168
- body.style.width = "100%";
169
- return () => {
170
- body.style.position = "";
171
- body.style.top = "";
172
- body.style.left = "";
173
- body.style.right = "";
174
- body.style.overflow = "";
175
- body.style.width = "";
176
- window.scrollTo(0, scrollY);
177
- };
178
- }, [open]);
179
- const { sizeClass } = (_a = sizes[size]) != null ? _a : sizes.small;
180
- const backgroundClickHandler = useCallback(
181
- (e) => {
182
- const target = e.target;
183
- const currentTarget = e.currentTarget;
184
- if (currentTarget.contains(target) && currentTarget !== target) {
185
- e.stopPropagation();
186
- return;
187
- }
188
- if (open && closeOnBackdropClick) {
189
- handleClose();
190
- }
191
- },
192
- [open, closeOnBackdropClick, handleClose]
193
- );
194
- if (!mounted) {
195
- return null;
196
- }
197
- return createPortal(
198
- /* @__PURE__ */ jsx(
199
- ModalScrim,
200
- {
201
- id: id ? `${id}-scrim` : void 0,
202
- size,
203
- ref: bgRef,
204
- show: open,
205
- onClick: backgroundClickHandler,
206
- children: /* @__PURE__ */ jsxs(
207
- "div",
208
- {
209
- id,
210
- ref: modalRef,
211
- className: clsx(
212
- "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
213
- computedFixedHeightScrolling && "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
214
- className,
215
- sizeClass
216
- ),
217
- onClick: (e) => e.stopPropagation(),
218
- children: [
219
- /* @__PURE__ */ jsx(
220
- ModalHeader,
221
- {
222
- id: id ? `${id}-header` : void 0,
223
- title,
224
- onClose: handleClose,
225
- hideCloseIcon,
226
- headerIcon
227
- }
228
- ),
229
- children && /* @__PURE__ */ jsx(
230
- ModalContent,
231
- {
232
- id: id ? `${id}-content` : void 0,
233
- fixedHeightScrolling: computedFixedHeightScrolling,
234
- children
235
- }
236
- ),
237
- showButtons && /* @__PURE__ */ jsx(
238
- ModalButtons,
239
- {
240
- id: id ? `${id}-buttons` : void 0,
241
- onClose: handleClose,
242
- onContinue,
243
- customActions
244
- }
245
- )
246
- ]
247
- }
248
- )
249
- }
250
- ),
251
- findDocumentRoot(bgRef.current)
252
- );
253
- };
254
- Modal.displayName = "Modal";
255
17
  export {
256
18
  Modal
257
19
  };