@yamada-ui/modal 1.3.9 → 1.3.10-dev-20240917033401

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.
Files changed (176) hide show
  1. package/dist/chunk-2EF6C34T.mjs +35 -0
  2. package/dist/chunk-2EF6C34T.mjs.map +1 -0
  3. package/dist/chunk-2GGZOTUT.mjs +32 -0
  4. package/dist/chunk-2GGZOTUT.mjs.map +1 -0
  5. package/dist/chunk-2UHL64SV.mjs +150 -0
  6. package/dist/chunk-2UHL64SV.mjs.map +1 -0
  7. package/dist/chunk-2XQPQIQG.mjs +32 -0
  8. package/dist/chunk-2XQPQIQG.mjs.map +1 -0
  9. package/dist/chunk-3CPIBNSS.mjs +32 -0
  10. package/dist/chunk-3CPIBNSS.mjs.map +1 -0
  11. package/dist/chunk-3S4JQQU3.mjs +32 -0
  12. package/dist/chunk-3S4JQQU3.mjs.map +1 -0
  13. package/dist/chunk-4G6PCQ4G.mjs +51 -0
  14. package/dist/chunk-4G6PCQ4G.mjs.map +1 -0
  15. package/dist/chunk-4J4ISPN7.mjs +26 -0
  16. package/dist/chunk-4J4ISPN7.mjs.map +1 -0
  17. package/dist/chunk-5OKOSAXO.mjs +37 -0
  18. package/dist/chunk-5OKOSAXO.mjs.map +1 -0
  19. package/dist/chunk-B2LUOR6L.mjs +32 -0
  20. package/dist/chunk-B2LUOR6L.mjs.map +1 -0
  21. package/dist/chunk-B436JYPR.mjs +34 -0
  22. package/dist/chunk-B436JYPR.mjs.map +1 -0
  23. package/dist/chunk-CW5ZZAAV.mjs +34 -0
  24. package/dist/chunk-CW5ZZAAV.mjs.map +1 -0
  25. package/dist/chunk-DV6BTDBZ.mjs +32 -0
  26. package/dist/chunk-DV6BTDBZ.mjs.map +1 -0
  27. package/dist/chunk-G646NVHY.mjs +176 -0
  28. package/dist/chunk-G646NVHY.mjs.map +1 -0
  29. package/dist/chunk-HM447TIY.mjs +32 -0
  30. package/dist/chunk-HM447TIY.mjs.map +1 -0
  31. package/dist/chunk-I6LPF3F6.mjs +95 -0
  32. package/dist/chunk-I6LPF3F6.mjs.map +1 -0
  33. package/dist/chunk-OFDDT2JT.mjs +32 -0
  34. package/dist/chunk-OFDDT2JT.mjs.map +1 -0
  35. package/dist/chunk-RSAJUBWR.mjs +32 -0
  36. package/dist/chunk-RSAJUBWR.mjs.map +1 -0
  37. package/dist/chunk-WEDZHILB.mjs +29 -0
  38. package/dist/chunk-WEDZHILB.mjs.map +1 -0
  39. package/dist/chunk-Y2QXIJZA.mjs +138 -0
  40. package/dist/chunk-Y2QXIJZA.mjs.map +1 -0
  41. package/dist/chunk-Y5NCRCDU.mjs +32 -0
  42. package/dist/chunk-Y5NCRCDU.mjs.map +1 -0
  43. package/dist/chunk-ZR2AEIGZ.mjs +116 -0
  44. package/dist/chunk-ZR2AEIGZ.mjs.map +1 -0
  45. package/dist/dialog-body.d.mts +8 -0
  46. package/dist/dialog-body.d.ts +8 -0
  47. package/dist/dialog-body.js +94 -0
  48. package/dist/dialog-body.js.map +1 -0
  49. package/dist/dialog-body.mjs +10 -0
  50. package/dist/dialog-body.mjs.map +1 -0
  51. package/dist/dialog-close-button.d.mts +8 -0
  52. package/dist/dialog-close-button.d.ts +8 -0
  53. package/dist/dialog-close-button.js +96 -0
  54. package/dist/dialog-close-button.js.map +1 -0
  55. package/dist/dialog-close-button.mjs +10 -0
  56. package/dist/dialog-close-button.mjs.map +1 -0
  57. package/dist/dialog-footer.d.mts +8 -0
  58. package/dist/dialog-footer.d.ts +8 -0
  59. package/dist/dialog-footer.js +91 -0
  60. package/dist/dialog-footer.js.map +1 -0
  61. package/dist/dialog-footer.mjs +10 -0
  62. package/dist/dialog-footer.mjs.map +1 -0
  63. package/dist/dialog-header.d.mts +8 -0
  64. package/dist/dialog-header.d.ts +8 -0
  65. package/dist/dialog-header.js +91 -0
  66. package/dist/dialog-header.js.map +1 -0
  67. package/dist/dialog-header.mjs +10 -0
  68. package/dist/dialog-header.mjs.map +1 -0
  69. package/dist/dialog-overlay.d.mts +8 -0
  70. package/dist/dialog-overlay.d.ts +8 -0
  71. package/dist/dialog-overlay.js +108 -0
  72. package/dist/dialog-overlay.js.map +1 -0
  73. package/dist/dialog-overlay.mjs +10 -0
  74. package/dist/dialog-overlay.mjs.map +1 -0
  75. package/dist/dialog.d.mts +7 -21
  76. package/dist/dialog.d.ts +7 -21
  77. package/dist/dialog.js +593 -678
  78. package/dist/dialog.js.map +1 -1
  79. package/dist/dialog.mjs +20 -13
  80. package/dist/drawer-body.d.mts +8 -0
  81. package/dist/drawer-body.d.ts +8 -0
  82. package/dist/drawer-body.js +94 -0
  83. package/dist/drawer-body.js.map +1 -0
  84. package/dist/drawer-body.mjs +10 -0
  85. package/dist/drawer-body.mjs.map +1 -0
  86. package/dist/drawer-close-button.d.mts +9 -0
  87. package/dist/drawer-close-button.d.ts +9 -0
  88. package/dist/drawer-close-button.js +96 -0
  89. package/dist/drawer-close-button.js.map +1 -0
  90. package/dist/drawer-close-button.mjs +10 -0
  91. package/dist/drawer-close-button.mjs.map +1 -0
  92. package/dist/drawer-content.d.mts +16 -0
  93. package/dist/drawer-content.d.ts +16 -0
  94. package/dist/drawer-content.js +278 -0
  95. package/dist/drawer-content.js.map +1 -0
  96. package/dist/drawer-content.mjs +12 -0
  97. package/dist/drawer-content.mjs.map +1 -0
  98. package/dist/drawer-drag-bar.d.mts +8 -0
  99. package/dist/drawer-drag-bar.d.ts +8 -0
  100. package/dist/drawer-drag-bar.js +66 -0
  101. package/dist/drawer-drag-bar.js.map +1 -0
  102. package/dist/drawer-drag-bar.mjs +9 -0
  103. package/dist/drawer-drag-bar.mjs.map +1 -0
  104. package/dist/drawer-footer.d.mts +8 -0
  105. package/dist/drawer-footer.d.ts +8 -0
  106. package/dist/drawer-footer.js +91 -0
  107. package/dist/drawer-footer.js.map +1 -0
  108. package/dist/drawer-footer.mjs +10 -0
  109. package/dist/drawer-footer.mjs.map +1 -0
  110. package/dist/drawer-header.d.mts +8 -0
  111. package/dist/drawer-header.d.ts +8 -0
  112. package/dist/drawer-header.js +91 -0
  113. package/dist/drawer-header.js.map +1 -0
  114. package/dist/drawer-header.mjs +10 -0
  115. package/dist/drawer-header.mjs.map +1 -0
  116. package/dist/drawer-overlay.d.mts +8 -0
  117. package/dist/drawer-overlay.d.ts +8 -0
  118. package/dist/drawer-overlay.js +108 -0
  119. package/dist/drawer-overlay.js.map +1 -0
  120. package/dist/drawer-overlay.mjs +10 -0
  121. package/dist/drawer-overlay.mjs.map +1 -0
  122. package/dist/drawer.d.mts +8 -27
  123. package/dist/drawer.d.ts +8 -27
  124. package/dist/drawer.js +405 -640
  125. package/dist/drawer.js.map +1 -1
  126. package/dist/drawer.mjs +14 -17
  127. package/dist/index.d.mts +13 -2
  128. package/dist/index.d.ts +13 -2
  129. package/dist/index.js +492 -413
  130. package/dist/index.js.map +1 -1
  131. package/dist/index.mjs +56 -18
  132. package/dist/modal-body.d.mts +3 -2
  133. package/dist/modal-body.d.ts +3 -2
  134. package/dist/modal-body.js +13 -856
  135. package/dist/modal-body.js.map +1 -1
  136. package/dist/modal-body.mjs +2 -1
  137. package/dist/modal-close-button.d.mts +3 -2
  138. package/dist/modal-close-button.d.ts +3 -2
  139. package/dist/modal-close-button.js +13 -854
  140. package/dist/modal-close-button.js.map +1 -1
  141. package/dist/modal-close-button.mjs +2 -1
  142. package/dist/modal-content.d.mts +9 -0
  143. package/dist/modal-content.d.ts +9 -0
  144. package/dist/modal-content.js +178 -0
  145. package/dist/modal-content.js.map +1 -0
  146. package/dist/modal-content.mjs +11 -0
  147. package/dist/modal-content.mjs.map +1 -0
  148. package/dist/modal-context.d.mts +27 -0
  149. package/dist/modal-context.d.ts +27 -0
  150. package/dist/modal-context.js +54 -0
  151. package/dist/modal-context.js.map +1 -0
  152. package/dist/modal-context.mjs +18 -0
  153. package/dist/modal-context.mjs.map +1 -0
  154. package/dist/modal-footer.d.mts +2 -1
  155. package/dist/modal-footer.d.ts +2 -1
  156. package/dist/modal-footer.js +13 -857
  157. package/dist/modal-footer.js.map +1 -1
  158. package/dist/modal-footer.mjs +2 -1
  159. package/dist/modal-header.d.mts +2 -1
  160. package/dist/modal-header.d.ts +2 -1
  161. package/dist/modal-header.js +13 -857
  162. package/dist/modal-header.js.map +1 -1
  163. package/dist/modal-header.mjs +2 -1
  164. package/dist/modal-overlay.d.mts +2 -1
  165. package/dist/modal-overlay.d.ts +2 -1
  166. package/dist/modal-overlay.js +16 -843
  167. package/dist/modal-overlay.js.map +1 -1
  168. package/dist/modal-overlay.mjs +2 -1
  169. package/dist/modal.d.mts +10 -14
  170. package/dist/modal.d.ts +10 -14
  171. package/dist/modal.js +183 -508
  172. package/dist/modal.js.map +1 -1
  173. package/dist/modal.mjs +13 -5
  174. package/package.json +10 -10
  175. package/dist/chunk-7PS3HWMF.mjs +0 -938
  176. package/dist/chunk-7PS3HWMF.mjs.map +0 -1
@@ -24,871 +24,27 @@ __export(modal_footer_exports, {
24
24
  ModalFooter: () => ModalFooter
25
25
  });
26
26
  module.exports = __toCommonJS(modal_footer_exports);
27
- var import_core7 = require("@yamada-ui/core");
28
- var import_utils8 = require("@yamada-ui/utils");
29
-
30
- // src/modal.tsx
31
- var import_core6 = require("@yamada-ui/core");
32
- var import_focus_lock = require("@yamada-ui/focus-lock");
33
- var import_motion4 = require("@yamada-ui/motion");
34
- var import_portal = require("@yamada-ui/portal");
35
- var import_transitions3 = require("@yamada-ui/transitions");
36
- var import_use_value2 = require("@yamada-ui/use-value");
37
- var import_utils7 = require("@yamada-ui/utils");
38
- var import_react2 = require("react");
39
- var import_react_remove_scroll = require("react-remove-scroll");
40
-
41
- // src/drawer.tsx
42
- var import_core5 = require("@yamada-ui/core");
43
- var import_motion3 = require("@yamada-ui/motion");
44
- var import_transitions2 = require("@yamada-ui/transitions");
45
- var import_use_value = require("@yamada-ui/use-value");
46
- var import_utils6 = require("@yamada-ui/utils");
47
- var import_react = require("react");
48
-
49
- // src/modal-overlay.tsx
50
- var import_motion = require("@yamada-ui/motion");
51
- var import_transitions = require("@yamada-ui/transitions");
52
- var import_utils = require("@yamada-ui/utils");
53
- var import_jsx_runtime = require("react/jsx-runtime");
54
- var ModalOverlay = (0, import_motion.motionForwardRef)(
55
- ({ className, __css, onClick, ...rest }, ref) => {
56
- const {
57
- styles,
58
- closeOnOverlay,
59
- onOverlayClick,
60
- onClose,
61
- animation,
62
- duration
63
- } = useModal();
64
- const css = {
65
- position: "fixed",
66
- top: 0,
67
- left: 0,
68
- w: "100vw",
69
- h: "100vh",
70
- ...__css ? __css : styles.overlay
71
- };
72
- const props = animation !== "none" ? import_transitions.fadeProps : {};
73
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
74
- import_motion.motion.div,
75
- {
76
- ref,
77
- className: (0, import_utils.cx)("ui-modal__overlay", className),
78
- custom: { duration },
79
- __css: css,
80
- onClick: (0, import_utils.handlerAll)(onClick, onOverlayClick, (ev) => {
81
- ev.stopPropagation();
82
- if (closeOnOverlay) onClose == null ? void 0 : onClose();
83
- }),
84
- ...props,
85
- ...rest
86
- }
87
- );
88
- }
89
- );
90
-
91
- // src/modal-close-button.tsx
92
- var import_close_button = require("@yamada-ui/close-button");
93
27
  var import_core = require("@yamada-ui/core");
94
28
  var import_utils2 = require("@yamada-ui/utils");
95
- var import_jsx_runtime2 = require("react/jsx-runtime");
96
- var ModalCloseButton = (0, import_core.forwardRef)(
97
- ({ onClick, __css, ...rest }, ref) => {
98
- const { styles, onClose } = useModal();
99
- const css = {
100
- position: "absolute",
101
- ...__css ? __css : styles.closeButton
102
- };
103
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
104
- import_close_button.CloseButton,
105
- {
106
- ref,
107
- className: (0, import_utils2.cx)("ui-modal__close-button"),
108
- __css: css,
109
- onClick: (0, import_utils2.handlerAll)(onClick, (ev) => {
110
- ev.stopPropagation();
111
- onClose == null ? void 0 : onClose();
112
- }),
113
- ...rest
114
- }
115
- );
116
- }
117
- );
118
-
119
- // src/modal-header.tsx
120
- var import_core2 = require("@yamada-ui/core");
121
- var import_utils3 = require("@yamada-ui/utils");
122
- var import_jsx_runtime3 = require("react/jsx-runtime");
123
- var ModalHeader = (0, import_core2.forwardRef)(
124
- ({ className, __css, ...rest }, ref) => {
125
- const { styles } = useModal();
126
- const css = {
127
- display: "flex",
128
- alignItems: "center",
129
- justifyContent: "flex-start",
130
- ...__css ? __css : styles.header
131
- };
132
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
133
- import_core2.ui.header,
134
- {
135
- ref,
136
- className: (0, import_utils3.cx)("ui-modal__header", className),
137
- __css: css,
138
- ...rest
139
- }
140
- );
141
- }
142
- );
143
-
144
- // src/modal-body.tsx
145
- var import_core3 = require("@yamada-ui/core");
146
- var import_utils4 = require("@yamada-ui/utils");
147
- var import_jsx_runtime4 = require("react/jsx-runtime");
148
- var ModalBody = (0, import_core3.forwardRef)(
149
- ({ className, __css, ...rest }, ref) => {
150
- const { styles, scrollBehavior } = useModal();
151
- const css = {
152
- display: "flex",
153
- flexDirection: "column",
154
- alignItems: "flex-start",
155
- overflow: scrollBehavior === "inside" ? "auto" : void 0,
156
- ...__css ? __css : styles.body
157
- };
158
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
159
- import_core3.ui.div,
160
- {
161
- ref,
162
- className: (0, import_utils4.cx)("ui-modal__body", className),
163
- __css: css,
164
- ...rest
165
- }
166
- );
167
- }
168
- );
169
29
 
170
- // src/dialog.tsx
171
- var import_button = require("@yamada-ui/button");
172
- var import_core4 = require("@yamada-ui/core");
173
- var import_motion2 = require("@yamada-ui/motion");
174
- var import_utils5 = require("@yamada-ui/utils");
175
- var import_jsx_runtime5 = require("react/jsx-runtime");
176
- var [DialogProvider, useDialog] = (0, import_utils5.createContext)({
30
+ // src/modal-context.ts
31
+ var import_utils = require("@yamada-ui/utils");
32
+ var [ModalProvider, useModal] = (0, import_utils.createContext)({
33
+ name: `ModalContext`,
34
+ errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
35
+ });
36
+ var [DialogProvider, useDialog] = (0, import_utils.createContext)({
177
37
  name: `DialogContext`,
178
38
  errorMessage: `useDialog returned is 'undefined'. Seems you forgot to wrap the components in "<Dialog />" `
179
39
  });
180
- var Dialog = (0, import_motion2.motionForwardRef)(
181
- ({ size, ...props }, ref) => {
182
- const [styles, mergedProps] = (0, import_core4.useMultiComponentStyle)("Dialog", {
183
- size,
184
- ...props
185
- });
186
- const {
187
- className,
188
- children,
189
- withOverlay = true,
190
- withCloseButton = true,
191
- header,
192
- footer,
193
- cancel,
194
- other,
195
- success,
196
- onClose,
197
- onCancel,
198
- onOther,
199
- onSuccess,
200
- containerProps,
201
- ...rest
202
- } = (0, import_core4.omitThemeProps)(mergedProps);
203
- const validChildren = (0, import_utils5.getValidChildren)(children);
204
- const [customDialogOverlay] = (0, import_utils5.findChildren)(validChildren, DialogOverlay);
205
- const [customDialogCloseButton] = (0, import_utils5.findChildren)(
206
- validChildren,
207
- DialogCloseButton
208
- );
209
- const [customDialogHeader] = (0, import_utils5.findChildren)(validChildren, DialogHeader);
210
- const [customDialogBody] = (0, import_utils5.findChildren)(validChildren, DialogBody);
211
- const [customDialogFooter] = (0, import_utils5.findChildren)(validChildren, DialogFooter);
212
- const cloneChildren = !(0, import_utils5.isEmpty)(validChildren) ? (0, import_utils5.omitChildren)(
213
- validChildren,
214
- DialogOverlay,
215
- DialogCloseButton,
216
- DialogHeader,
217
- DialogBody,
218
- DialogFooter
219
- ) : children;
220
- const css = { ...styles.container };
221
- const cancelButtonProps = (0, import_utils5.isValidElement)(cancel) ? { children: cancel } : cancel;
222
- const otherButtonProps = (0, import_utils5.isValidElement)(other) ? { children: other } : other;
223
- const successButtonProps = (0, import_utils5.isValidElement)(success) ? { children: success } : success;
224
- if (cancelButtonProps && !cancelButtonProps.variant)
225
- cancelButtonProps.variant = "ghost";
226
- if (otherButtonProps && !otherButtonProps.colorScheme)
227
- otherButtonProps.colorScheme = "secondary";
228
- if (successButtonProps && !successButtonProps.colorScheme)
229
- successButtonProps.colorScheme = "primary";
230
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
231
- Modal,
232
- {
233
- ref,
234
- className: (0, import_utils5.cx)("ui-dialog", className),
235
- __css: css,
236
- ...{
237
- onClose,
238
- withOverlay: false,
239
- withCloseButton: false,
240
- containerProps,
241
- ...rest,
242
- size
243
- },
244
- children: [
245
- customDialogOverlay != null ? customDialogOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogOverlay, {}) : null,
246
- customDialogCloseButton != null ? customDialogCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogCloseButton, {}) : null,
247
- customDialogHeader != null ? customDialogHeader : header ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogHeader, { children: header }) : null,
248
- customDialogBody != null ? customDialogBody : cloneChildren ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogBody, { children: cloneChildren }) : null,
249
- customDialogFooter != null ? customDialogFooter : footer || cancelButtonProps || otherButtonProps || successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DialogFooter, { children: footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
250
- cancelButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
251
- import_button.Button,
252
- {
253
- onClick: () => onCancel == null ? void 0 : onCancel(onClose),
254
- ...cancelButtonProps
255
- }
256
- ) : null,
257
- otherButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
258
- import_button.Button,
259
- {
260
- onClick: () => onOther == null ? void 0 : onOther(onClose),
261
- ...otherButtonProps
262
- }
263
- ) : null,
264
- successButtonProps ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
265
- import_button.Button,
266
- {
267
- onClick: () => onSuccess == null ? void 0 : onSuccess(onClose),
268
- ...successButtonProps
269
- }
270
- ) : null
271
- ] }) }) : null
272
- ]
273
- }
274
- ) });
275
- }
276
- );
277
- var DialogOverlay = (0, import_motion2.motionForwardRef)(
278
- ({ className, ...rest }, ref) => {
279
- const styles = useDialog();
280
- const css = { ...styles.overlay };
281
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
282
- ModalOverlay,
283
- {
284
- ref,
285
- className: (0, import_utils5.cx)("ui-dialog__overlay", className),
286
- __css: css,
287
- ...rest
288
- }
289
- );
290
- }
291
- );
292
- var DialogCloseButton = (0, import_core4.forwardRef)(
293
- ({ className, ...rest }, ref) => {
294
- const styles = useDialog();
295
- const css = { ...styles.closeButton };
296
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
297
- ModalCloseButton,
298
- {
299
- ref,
300
- className: (0, import_utils5.cx)("ui-dialog__close-button", className),
301
- __css: css,
302
- ...rest
303
- }
304
- );
305
- }
306
- );
307
- var DialogHeader = (0, import_core4.forwardRef)(
308
- ({ className, ...rest }, ref) => {
309
- const styles = useDialog();
310
- const css = { ...styles.header };
311
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
312
- ModalHeader,
313
- {
314
- ref,
315
- className: (0, import_utils5.cx)("ui-dialog__header", className),
316
- __css: css,
317
- ...rest
318
- }
319
- );
320
- }
321
- );
322
- var DialogBody = (0, import_core4.forwardRef)(
323
- ({ className, ...rest }, ref) => {
324
- const styles = useDialog();
325
- const css = { ...styles.body };
326
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
327
- ModalBody,
328
- {
329
- ref,
330
- className: (0, import_utils5.cx)("ui-dialog__body", className),
331
- __css: css,
332
- ...rest
333
- }
334
- );
335
- }
336
- );
337
- var DialogFooter = (0, import_core4.forwardRef)(
338
- ({ className, ...rest }, ref) => {
339
- const styles = useDialog();
340
- const css = { ...styles.footer };
341
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
342
- ModalFooter,
343
- {
344
- ref,
345
- className: (0, import_utils5.cx)("ui-dialog__footer", className),
346
- __css: css,
347
- ...rest
348
- }
349
- );
350
- }
351
- );
352
-
353
- // src/drawer.tsx
354
- var import_jsx_runtime6 = require("react/jsx-runtime");
355
- var [DrawerProvider, useDrawer] = (0, import_utils6.createContext)({
40
+ var [DrawerProvider, useDrawer] = (0, import_utils.createContext)({
356
41
  name: `DrawerContext`,
357
42
  errorMessage: `useDrawer returned is 'undefined'. Seems you forgot to wrap the components in "<Drawer />" `
358
43
  });
359
- var Drawer = (0, import_motion3.motionForwardRef)(
360
- ({ size, placement = "right", closeOnDrag = false, ...props }, ref) => {
361
- const [styles, mergedProps] = (0, import_core5.useMultiComponentStyle)("Drawer", {
362
- size,
363
- placement,
364
- closeOnDrag,
365
- ...props
366
- });
367
- const {
368
- children,
369
- isOpen,
370
- onClose,
371
- onOverlayClick,
372
- onEsc,
373
- onCloseComplete,
374
- withCloseButton = !closeOnDrag,
375
- withOverlay = true,
376
- withDragBar = true,
377
- allowPinchZoom,
378
- autoFocus,
379
- restoreFocus,
380
- initialFocusRef,
381
- finalFocusRef,
382
- blockScrollOnMount,
383
- closeOnOverlay,
384
- closeOnEsc,
385
- lockFocusAcrossFrames,
386
- duration = { enter: 0.4, exit: 0.3 },
387
- dragConstraints = 0,
388
- dragElastic = 0.1,
389
- dragOffset = 80,
390
- dragVelocity = 100,
391
- blankForDragProps,
392
- portalProps,
393
- containerProps,
394
- ...rest
395
- } = (0, import_core5.omitThemeProps)(mergedProps, ["isFullHeight"]);
396
- const validChildren = (0, import_utils6.getValidChildren)(children);
397
- const [customDrawerOverlay, ...cloneChildren] = (0, import_utils6.findChildren)(
398
- validChildren,
399
- DrawerOverlay
400
- );
401
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerProvider, { value: styles, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
402
- Modal,
403
- {
404
- ref,
405
- ...{
406
- isOpen,
407
- onClose,
408
- onOverlayClick,
409
- onEsc,
410
- onCloseComplete,
411
- withCloseButton: false,
412
- withOverlay: false,
413
- allowPinchZoom,
414
- autoFocus,
415
- restoreFocus,
416
- initialFocusRef,
417
- finalFocusRef,
418
- blockScrollOnMount,
419
- closeOnOverlay,
420
- closeOnEsc,
421
- lockFocusAcrossFrames,
422
- duration,
423
- portalProps,
424
- containerProps
425
- },
426
- children: [
427
- customDrawerOverlay != null ? customDrawerOverlay : withOverlay ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerOverlay, {}) : null,
428
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
429
- DrawerContent,
430
- {
431
- ...{
432
- dragConstraints,
433
- dragElastic,
434
- dragOffset,
435
- dragVelocity,
436
- withCloseButton,
437
- withDragBar,
438
- blankForDragProps,
439
- ...rest,
440
- placement,
441
- closeOnDrag
442
- },
443
- children: cloneChildren
444
- }
445
- )
446
- ]
447
- }
448
- ) });
449
- }
450
- );
451
- var DrawerContent = (0, import_motion3.motionForwardRef)(
452
- ({
453
- className,
454
- children,
455
- placement: _placement,
456
- withCloseButton,
457
- withDragBar,
458
- closeOnDrag,
459
- dragConstraints,
460
- dragElastic,
461
- dragOffset,
462
- dragVelocity,
463
- blankForDragProps,
464
- ...rest
465
- }, ref) => {
466
- const { isOpen, onClose, duration } = useModal();
467
- const styles = useDrawer();
468
- const placement = (0, import_use_value.useValue)(_placement);
469
- const validChildren = (0, import_utils6.getValidChildren)(children);
470
- const [customDrawerCloseButton, ...cloneChildren] = (0, import_utils6.findChildren)(
471
- validChildren,
472
- DrawerCloseButton
473
- );
474
- const blankForDragBg = (0, import_react.useMemo)(() => {
475
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
476
- const propBg = (_c = (_b = (_a = rest.backgroundColor) != null ? _a : rest.bgColor) != null ? _b : rest.background) != null ? _c : rest.bg;
477
- const styleBg = (_j = (_h = (_f = (_d = styles.container) == null ? void 0 : _d.backgroundColor) != null ? _f : (_e = styles.container) == null ? void 0 : _e.bgColor) != null ? _h : (_g = styles.container) == null ? void 0 : _g.background) != null ? _j : (_i = styles.container) == null ? void 0 : _i.bg;
478
- const computedBg = propBg != null ? propBg : styleBg;
479
- return (0, import_utils6.isArray)(computedBg) ? computedBg : [computedBg];
480
- }, [rest, styles]);
481
- const blankForDrag = (0, import_react.useMemo)(() => {
482
- let position = {};
483
- switch (placement) {
484
- case "top":
485
- position = { top: "calc(-100dvh + 1px)", left: 0, right: 0 };
486
- break;
487
- case "bottom":
488
- position = { bottom: "calc(-100dvh + 1px)", left: 0, right: 0 };
489
- break;
490
- case "left":
491
- position = { left: "calc(-100% + 1px)", top: 0, bottom: 0 };
492
- break;
493
- case "right":
494
- position = { right: "calc(-100% + 1px)", top: 0, bottom: 0 };
495
- break;
496
- }
497
- const [lightBg, darkBg] = blankForDragBg;
498
- return {
499
- _after: {
500
- content: '""',
501
- display: "block",
502
- w: "100%",
503
- h: "100dvh",
504
- bg: lightBg,
505
- position: "absolute",
506
- ...position,
507
- ...blankForDragProps
508
- },
509
- _dark: {
510
- _after: {
511
- bg: darkBg
512
- }
513
- }
514
- };
515
- }, [placement, blankForDragBg, blankForDragProps]);
516
- const css = (0, import_react.useMemo)(
517
- () => ({
518
- display: "flex",
519
- flexDirection: placement === "top" || placement === "bottom" ? "column" : "row",
520
- outline: 0,
521
- ...closeOnDrag ? blankForDrag : {},
522
- ...styles.container
523
- }),
524
- [blankForDrag, closeOnDrag, placement, styles]
525
- );
526
- const getDragDirectionRestriction = (0, import_react.useCallback)(
527
- (value) => {
528
- switch (placement) {
529
- case "top":
530
- return { bottom: value };
531
- case "bottom":
532
- return { top: value };
533
- case "left":
534
- return { right: value };
535
- case "right":
536
- return { left: value };
537
- }
538
- },
539
- [placement]
540
- );
541
- const getDragDirection = (0, import_react.useCallback)(() => {
542
- switch (placement) {
543
- case "top":
544
- case "bottom":
545
- return "y";
546
- case "left":
547
- case "right":
548
- return "x";
549
- }
550
- }, [placement]);
551
- const isCloseByDragInfo = (0, import_react.useCallback)(
552
- (info) => {
553
- switch (placement) {
554
- case "top":
555
- return info.velocity.y <= dragVelocity * -1 || info.offset.y <= dragOffset * -1;
556
- case "bottom":
557
- return info.velocity.y >= dragVelocity || info.offset.y >= dragOffset;
558
- case "left":
559
- return info.velocity.x <= dragVelocity * -1 || info.offset.x <= dragOffset * -1;
560
- case "right":
561
- return info.velocity.x >= dragVelocity || info.offset.x >= dragOffset;
562
- }
563
- },
564
- [placement, dragVelocity, dragOffset]
565
- );
566
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
567
- import_transitions2.Slide,
568
- {
569
- ref,
570
- className: (0, import_utils6.cx)("ui-drawer", className),
571
- isOpen,
572
- placement,
573
- duration,
574
- drag: closeOnDrag ? getDragDirection() : false,
575
- dragConstraints: getDragDirectionRestriction(dragConstraints),
576
- dragElastic: getDragDirectionRestriction(dragElastic),
577
- dragSnapToOrigin: true,
578
- dragMomentum: false,
579
- onDragEnd: (_, info) => {
580
- if (isCloseByDragInfo(info)) onClose == null ? void 0 : onClose();
581
- },
582
- tabIndex: -1,
583
- __css: css,
584
- ...rest,
585
- children: [
586
- customDrawerCloseButton != null ? customDrawerCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerCloseButton, {}) : null,
587
- withDragBar && closeOnDrag && (placement === "bottom" || placement === "right") ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerDragBar, {}) : null,
588
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
589
- import_core5.ui.div,
590
- {
591
- className: "ui-drawer__inner",
592
- __css: { display: "flex", flexDirection: "column", ...styles.inner },
593
- children: cloneChildren
594
- }
595
- ),
596
- withDragBar && closeOnDrag && (placement === "top" || placement === "left") ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DrawerDragBar, {}) : null
597
- ]
598
- }
599
- );
600
- }
601
- );
602
- var DrawerOverlay = (0, import_motion3.motionForwardRef)(
603
- ({ className, ...rest }, ref) => {
604
- const styles = useDrawer();
605
- const css = { ...styles.overlay };
606
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
607
- ModalOverlay,
608
- {
609
- ref,
610
- className: (0, import_utils6.cx)("ui-drawer__overlay", className),
611
- __css: css,
612
- ...rest
613
- }
614
- );
615
- }
616
- );
617
- var DrawerDragBar = ({
618
- className,
619
- ...rest
620
- }) => {
621
- const styles = useDrawer();
622
- const css = { ...styles.dragBar };
623
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
624
- import_core5.ui.div,
625
- {
626
- className: (0, import_utils6.cx)("ui-drawer__drag-bar", className),
627
- __css: css,
628
- ...rest
629
- }
630
- );
631
- };
632
- var DrawerCloseButton = (0, import_core5.forwardRef)(
633
- ({ className, ...rest }, ref) => {
634
- const styles = useDrawer();
635
- const css = { ...styles.closeButton };
636
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
637
- ModalCloseButton,
638
- {
639
- ref,
640
- className: (0, import_utils6.cx)("ui-drawer__close-button", className),
641
- __css: css,
642
- ...rest
643
- }
644
- );
645
- }
646
- );
647
- var DrawerHeader = (0, import_core5.forwardRef)(
648
- ({ className, ...rest }, ref) => {
649
- const styles = useDrawer();
650
- const css = { ...styles.header };
651
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
652
- ModalHeader,
653
- {
654
- ref,
655
- className: (0, import_utils6.cx)("ui-drawer__header", className),
656
- __css: css,
657
- ...rest
658
- }
659
- );
660
- }
661
- );
662
- var DrawerBody = (0, import_core5.forwardRef)(
663
- ({ className, ...rest }, ref) => {
664
- const styles = useDrawer();
665
- const css = { ...styles.body };
666
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
667
- ModalBody,
668
- {
669
- ref,
670
- className: (0, import_utils6.cx)("ui-drawer__body", className),
671
- __css: css,
672
- ...rest
673
- }
674
- );
675
- }
676
- );
677
- var DrawerFooter = (0, import_core5.forwardRef)(
678
- ({ className, ...rest }, ref) => {
679
- const styles = useDrawer();
680
- const css = { ...styles.footer };
681
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
682
- ModalFooter,
683
- {
684
- ref,
685
- className: (0, import_utils6.cx)("ui-drawer__footer", className),
686
- __css: css,
687
- ...rest
688
- }
689
- );
690
- }
691
- );
692
-
693
- // src/modal.tsx
694
- var import_jsx_runtime7 = require("react/jsx-runtime");
695
- var [ModalProvider, useModal] = (0, import_utils7.createContext)({
696
- name: `ModalContext`,
697
- errorMessage: `useModal returned is 'undefined'. Seems you forgot to wrap the components in "<Modal />" `
698
- });
699
- var Modal = (0, import_motion4.motionForwardRef)(
700
- ({ size, ...props }, ref) => {
701
- const [styles, mergedProps] = (0, import_core6.useMultiComponentStyle)("Modal", {
702
- size,
703
- ...props
704
- });
705
- const {
706
- className,
707
- children,
708
- isOpen,
709
- onClose,
710
- onOverlayClick,
711
- onEsc,
712
- onCloseComplete,
713
- placement: _placement = "center",
714
- outside = "fallback(4, 1rem)",
715
- withCloseButton = true,
716
- withOverlay = true,
717
- allowPinchZoom = false,
718
- scrollBehavior = "inside",
719
- autoFocus,
720
- restoreFocus,
721
- initialFocusRef,
722
- finalFocusRef,
723
- blockScrollOnMount = true,
724
- closeOnOverlay = true,
725
- closeOnEsc = true,
726
- lockFocusAcrossFrames = true,
727
- animation = "scale",
728
- duration,
729
- portalProps,
730
- containerProps,
731
- ...rest
732
- } = (0, import_core6.omitThemeProps)(mergedProps);
733
- const onKeyDown = (0, import_react2.useCallback)(
734
- (ev) => {
735
- if (ev.key !== "Escape") return;
736
- ev.stopPropagation();
737
- if (closeOnEsc) onClose == null ? void 0 : onClose();
738
- onEsc == null ? void 0 : onEsc();
739
- },
740
- [closeOnEsc, onClose, onEsc]
741
- );
742
- const validChildren = (0, import_utils7.getValidChildren)(children);
743
- const [customModalOverlay, ...cloneChildren] = (0, import_utils7.findChildren)(
744
- validChildren,
745
- ModalOverlay,
746
- DialogOverlay,
747
- DrawerOverlay
748
- );
749
- let [drawerContent] = (0, import_utils7.findChildren)(validChildren, DrawerContent);
750
- if (drawerContent)
751
- drawerContent = (0, import_react2.cloneElement)(drawerContent, { onKeyDown });
752
- const placement = (0, import_use_value2.useValue)(_placement);
753
- const css = {
754
- position: "fixed",
755
- top: 0,
756
- left: 0,
757
- zIndex: "fallback(jeice, 110)",
758
- w: "100vw",
759
- h: "100dvh",
760
- p: size !== "full" ? outside : void 0,
761
- display: "flex",
762
- justifyContent: placement.includes("left") ? "flex-start" : placement.includes("right") ? "flex-end" : "center",
763
- alignItems: placement.includes("top") ? "flex-start" : placement.includes("bottom") ? "flex-end" : "center"
764
- };
765
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
766
- ModalProvider,
767
- {
768
- value: {
769
- isOpen,
770
- onClose,
771
- onOverlayClick,
772
- withCloseButton,
773
- scrollBehavior,
774
- closeOnOverlay,
775
- animation,
776
- duration,
777
- styles
778
- },
779
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_motion4.AnimatePresence, { onExitComplete: onCloseComplete, children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_portal.Portal, { ...portalProps, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
780
- import_focus_lock.FocusLock,
781
- {
782
- autoFocus,
783
- initialFocusRef,
784
- finalFocusRef,
785
- restoreFocus,
786
- lockFocusAcrossFrames,
787
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
788
- import_react_remove_scroll.RemoveScroll,
789
- {
790
- allowPinchZoom,
791
- enabled: blockScrollOnMount,
792
- forwardProps: true,
793
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core6.ui.div, { __css: css, ...containerProps, children: [
794
- customModalOverlay != null ? customModalOverlay : withOverlay && size !== "full" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalOverlay, {}) : null,
795
- drawerContent != null ? drawerContent : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
796
- ModalContent,
797
- {
798
- ref,
799
- className,
800
- onKeyDown,
801
- ...rest,
802
- children: cloneChildren
803
- }
804
- )
805
- ] })
806
- }
807
- )
808
- }
809
- ) }) : null })
810
- }
811
- );
812
- }
813
- );
814
- var getModalContentProps = (animation = "scale", duration) => {
815
- switch (animation) {
816
- case "scale":
817
- return {
818
- ...import_transitions3.scaleFadeProps,
819
- custom: { scale: 0.95, reverse: true, duration }
820
- };
821
- case "top":
822
- return {
823
- ...import_transitions3.slideFadeProps,
824
- custom: { offsetY: -16, reverse: true, duration }
825
- };
826
- case "right":
827
- return {
828
- ...import_transitions3.slideFadeProps,
829
- custom: { offsetX: 16, reverse: true, duration }
830
- };
831
- case "left":
832
- return {
833
- ...import_transitions3.slideFadeProps,
834
- custom: { offsetX: -16, reverse: true, duration }
835
- };
836
- case "bottom":
837
- return {
838
- ...import_transitions3.slideFadeProps,
839
- custom: { offsetY: 16, reverse: true, duration }
840
- };
841
- }
842
- };
843
- var ModalContent = (0, import_motion4.motionForwardRef)(
844
- ({ className, children, __css, ...rest }, ref) => {
845
- const {
846
- styles,
847
- scrollBehavior,
848
- withCloseButton,
849
- onClose,
850
- animation,
851
- duration
852
- } = useModal();
853
- const validChildren = (0, import_utils7.getValidChildren)(children);
854
- const [customModalCloseButton, ...cloneChildren] = (0, import_utils7.findChildren)(
855
- validChildren,
856
- ModalCloseButton,
857
- DialogCloseButton
858
- );
859
- const props = animation !== "none" ? getModalContentProps(animation, duration) : {};
860
- const css = {
861
- position: "relative",
862
- maxH: "100%",
863
- display: "flex",
864
- flexDirection: "column",
865
- overflow: scrollBehavior === "inside" ? "hidden" : "auto",
866
- outline: 0,
867
- ...__css ? __css : styles.container
868
- };
869
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
870
- import_motion4.motion.section,
871
- {
872
- role: "dialog",
873
- "aria-modal": "true",
874
- ref,
875
- className: (0, import_utils7.cx)("ui-modal", className),
876
- tabIndex: -1,
877
- __css: css,
878
- ...props,
879
- ...rest,
880
- children: [
881
- customModalCloseButton != null ? customModalCloseButton : withCloseButton && onClose ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ModalCloseButton, {}) : null,
882
- cloneChildren
883
- ]
884
- }
885
- );
886
- }
887
- );
888
44
 
889
45
  // src/modal-footer.tsx
890
- var import_jsx_runtime8 = require("react/jsx-runtime");
891
- var ModalFooter = (0, import_core7.forwardRef)(
46
+ var import_jsx_runtime = require("react/jsx-runtime");
47
+ var ModalFooter = (0, import_core.forwardRef)(
892
48
  ({ className, __css, ...rest }, ref) => {
893
49
  const { styles } = useModal();
894
50
  const css = {
@@ -897,11 +53,11 @@ var ModalFooter = (0, import_core7.forwardRef)(
897
53
  justifyContent: "flex-end",
898
54
  ...__css ? __css : styles.footer
899
55
  };
900
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
901
- import_core7.ui.footer,
56
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
57
+ import_core.ui.footer,
902
58
  {
903
59
  ref,
904
- className: (0, import_utils8.cx)("ui-modal__footer", className),
60
+ className: (0, import_utils2.cx)("ui-modal__footer", className),
905
61
  __css: css,
906
62
  ...rest
907
63
  }