@saas-ui/modals 0.1.0 → 0.1.1

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.
@@ -1,6 +1,6 @@
1
- @saas-ui/modals:build: cache hit, replaying output f5b977178f13472a
1
+ @saas-ui/modals:build: cache hit, replaying output c20143510457fd4d
2
2
  @saas-ui/modals:build: Build "@saas-ui/modals" to dist:
3
- @saas-ui/modals:build:  1777 B: index.js.gz
4
- @saas-ui/modals:build:  1596 B: index.js.br
5
- @saas-ui/modals:build:  1760 B: index.esm.js.gz
6
- @saas-ui/modals:build:  1587 B: index.esm.js.br
3
+ @saas-ui/modals:build:  1.82 kB: index.js.gz
4
+ @saas-ui/modals:build:  1.63 kB: index.js.br
5
+ @saas-ui/modals:build:  1696 B: index.modern.js.gz
6
+ @saas-ui/modals:build:  1529 B: index.modern.js.br
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @saas-ui/modals
2
2
 
3
+ ## 0.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - Fix modals build script
8
+
3
9
  ## 0.1.0
4
10
 
5
11
  ### Minor Changes
package/dist/index.js CHANGED
@@ -1,2 +1,354 @@
1
- var e=require("react"),n=require("@chakra-ui/react"),r=require("@saas-ui/button");function o(e){if(e&&e.__esModule)return e;var n=Object.create(null);return e&&Object.keys(e).forEach(function(r){if("default"!==r){var o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:function(){return e[r]}})}}),n.default=e,n}var t=/*#__PURE__*/o(e);function l(){return l=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},l.apply(this,arguments)}function i(e,n){if(null==e)return{};var r,o,t={},l=Object.keys(e);for(o=0;o<l.length;o++)n.indexOf(r=l[o])>=0||(t[r]=e[r]);return t}var u=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],a=function(e){var o=e.title,a=e.cancelProps,c=e.confirmProps,s=e.buttonGroupProps,d=e.isOpen,f=e.closeOnCancel,p=void 0===f||f,v=e.closeOnConfirm,C=void 0===v||v,O=e.leastDestructiveFocus,y=void 0===O?"cancel":O,m=e.onClose,D=e.onCancel,b=e.onConfirm,M=e.children,P=i(e,u),w=t.useRef(null),g=t.useRef(null);return h(n.AlertDialog,l({isOpen:d,onClose:m},P,{leastDestructiveRef:"cancel"===y?w:g}),h(n.AlertDialogOverlay,null,h(n.AlertDialogContent,null,h(n.AlertDialogHeader,null,o),h(n.AlertDialogBody,null,M),h(n.AlertDialogFooter,null,h(r.ButtonGroup,s,h(r.Button,l({ref:w},a,{onClick:function(){null==D||D(),p&&m()}}),"Cancel"),h(r.Button,l({ref:g},c,{onClick:function(){null==b||b(),C&&m()}}),"Confirm"))))))},c=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],s=["footer","children"],d=function(e){var r=e.title,o=e.children,t=e.isOpen,u=e.onClose,a=e.hideCloseButton,s=e.hideOverlay,d=i(e,c);return h(n.Drawer,l({isOpen:t,onClose:u},d),!s&&h(n.DrawerOverlay,null),h(n.DrawerContent,null,h(n.DrawerHeader,null,r),!a&&h(n.DrawerCloseButton,null),o))},f=function(e){var r=e.footer,o=e.children,t=i(e,s);return h(d,t,h(n.DrawerBody,null,o),r&&h(n.DrawerFooter,null,r))},p=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],v=["children","footer"],C=function(e){var r=e.title,o=e.children,t=e.isOpen,u=e.onClose,a=e.hideCloseButton,c=e.hideOverlay,s=i(e,p);return h(n.Modal,l({isOpen:t,onClose:u},s),!c&&h(n.ModalOverlay,null),h(n.ModalContent,null,h(n.ModalHeader,null,r),!a&&h(n.ModalCloseButton,null),o))},O=function(e){var r=e.children,o=e.footer,t=i(e,v);return h(C,t,h(n.ModalBody,null,r),o&&h(n.ModalFooter,null,o))},y=["id","type","scope"],m=["title","children"],D=t.createContext({}),b={id:null,props:null,type:"modal"},M={alert:a,confirm:a,drawer:f,modal:O},P=function(){return t.useContext(D)};exports.BaseDrawer=d,exports.BaseModal=C,exports.ConfirmDialog=a,exports.Drawer=f,exports.Modal=O,exports.ModalsContext=D,exports.ModalsProvider=function(e){var n=e.children,r=e.modals,o=t.useMemo(function(){return new Set},[]),u=t.useState({modal:b}),a=u[0],c=u[1],s=t.useMemo(function(){var e=l({},M,r);return function(n){return void 0===n&&(n="modal"),e[n]||e.modal}},[r]),d=function(e,n){if(!n)return c({modal:e});c(function(r){var o;return l({},r,((o={})[n]=e,o))})},f=function(e){var n=e.id,r=void 0===n?o.size+1:n,t=e.type,u=void 0===t?"modal":t,a=e.scope,c=void 0===a?"modal":a,s=i(e,y),f={id:r,props:l({},s,{children:s.body||s.children}),type:u,scope:c};return o.add(f),d(f,c),r},p=function(e,n){try{var r,t=[].concat(o),l=t.filter(function(n){return n.id===e})[0];return l?Promise.resolve(null==(r=l.props)||null==r.onClose?void 0:r.onClose({force:n})).then(function(e){if(!1!==e){o.delete(l);var n=t.filter(function(e){return e.scope===l.scope});d(n[n.length-2]||{id:null,props:null,type:l.type},l.scope)}}):Promise.resolve()}catch(e){return Promise.reject(e)}},v={open:f,drawer:function(e){return f(l({},e,{type:"drawer"}))},alert:function(e){return f(l({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"}))},confirm:function(e){return f(l({},e,{scope:"alert",type:"confirm"}))},close:p,closeAll:function(){o.forEach(function(e){var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),o.clear(),d(b)}},C=Object.entries(a).map(function(e){var n=e[0],r=e[1],t=s(r.type),u=r.props||{},a=u.title,c=u.children,d=i(u,m);return h(t,l({key:n,title:a,children:c},d,{isOpen:!(!r.id||!o.size),onClose:function(){return p(r.id)}}))});return h(D.Provider,{value:v},C,n)},exports.useModals=function(){return P()},exports.useModalsContext=P;
1
+ var e = require('react'),
2
+ n = require('@chakra-ui/react'),
3
+ r = require('@saas-ui/button')
4
+ function t(e) {
5
+ if (e && e.__esModule) return e
6
+ var n = Object.create(null)
7
+ return (
8
+ e &&
9
+ Object.keys(e).forEach(function (r) {
10
+ if ('default' !== r) {
11
+ var t = Object.getOwnPropertyDescriptor(e, r)
12
+ Object.defineProperty(
13
+ n,
14
+ r,
15
+ t.get
16
+ ? t
17
+ : {
18
+ enumerable: !0,
19
+ get: function () {
20
+ return e[r]
21
+ },
22
+ }
23
+ )
24
+ }
25
+ }),
26
+ (n.default = e),
27
+ n
28
+ )
29
+ }
30
+ var o = /*#__PURE__*/ t(e)
31
+ function l() {
32
+ return (
33
+ (l =
34
+ Object.assign ||
35
+ function (e) {
36
+ for (var n = 1; n < arguments.length; n++) {
37
+ var r = arguments[n]
38
+ for (var t in r)
39
+ Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t])
40
+ }
41
+ return e
42
+ }),
43
+ l.apply(this, arguments)
44
+ )
45
+ }
46
+ function a(e, n) {
47
+ if (null == e) return {}
48
+ var r,
49
+ t,
50
+ o = {},
51
+ l = Object.keys(e)
52
+ for (t = 0; t < l.length; t++) n.indexOf((r = l[t])) >= 0 || (o[r] = e[r])
53
+ return o
54
+ }
55
+ var c = [
56
+ 'title',
57
+ 'cancelLabel',
58
+ 'confirmLabel',
59
+ 'cancelProps',
60
+ 'confirmProps',
61
+ 'buttonGroupProps',
62
+ 'isOpen',
63
+ 'closeOnCancel',
64
+ 'closeOnConfirm',
65
+ 'leastDestructiveFocus',
66
+ 'onClose',
67
+ 'onCancel',
68
+ 'onConfirm',
69
+ 'children',
70
+ ],
71
+ i = function (e) {
72
+ var t = e.title,
73
+ i = e.cancelProps,
74
+ u = e.confirmProps,
75
+ s = e.buttonGroupProps,
76
+ d = e.isOpen,
77
+ f = e.closeOnCancel,
78
+ p = void 0 === f || f,
79
+ m = e.closeOnConfirm,
80
+ v = void 0 === m || m,
81
+ C = e.leastDestructiveFocus,
82
+ h = void 0 === C ? 'cancel' : C,
83
+ O = e.onClose,
84
+ y = e.onCancel,
85
+ E = e.onConfirm,
86
+ D = e.children,
87
+ b = a(e, c),
88
+ M = o.useRef(null),
89
+ P = o.useRef(null)
90
+ /*#__PURE__*/ return o.createElement(
91
+ n.AlertDialog,
92
+ l({ isOpen: d, onClose: O }, b, {
93
+ leastDestructiveRef: 'cancel' === h ? M : P,
94
+ }),
95
+ /*#__PURE__*/ o.createElement(
96
+ n.AlertDialogOverlay,
97
+ null,
98
+ /*#__PURE__*/ o.createElement(
99
+ n.AlertDialogContent,
100
+ null,
101
+ /*#__PURE__*/ o.createElement(n.AlertDialogHeader, null, t),
102
+ /*#__PURE__*/ o.createElement(n.AlertDialogBody, null, D),
103
+ /*#__PURE__*/ o.createElement(
104
+ n.AlertDialogFooter,
105
+ null,
106
+ /*#__PURE__*/ o.createElement(
107
+ r.ButtonGroup,
108
+ s,
109
+ /*#__PURE__*/ o.createElement(
110
+ r.Button,
111
+ l({ ref: M }, i, {
112
+ onClick: function () {
113
+ null == y || y(), p && O()
114
+ },
115
+ }),
116
+ 'Cancel'
117
+ ),
118
+ /*#__PURE__*/ o.createElement(
119
+ r.Button,
120
+ l({ ref: P }, u, {
121
+ onClick: function () {
122
+ null == E || E(), v && O()
123
+ },
124
+ }),
125
+ 'Confirm'
126
+ )
127
+ )
128
+ )
129
+ )
130
+ )
131
+ )
132
+ },
133
+ u = [
134
+ 'title',
135
+ 'children',
136
+ 'isOpen',
137
+ 'onClose',
138
+ 'hideCloseButton',
139
+ 'hideOverlay',
140
+ ],
141
+ s = ['footer', 'children'],
142
+ d = function (e) {
143
+ var r = e.title,
144
+ t = e.children,
145
+ c = e.isOpen,
146
+ i = e.onClose,
147
+ s = e.hideCloseButton,
148
+ d = e.hideOverlay,
149
+ f = a(e, u)
150
+ /*#__PURE__*/ return o.createElement(
151
+ n.Drawer,
152
+ l({ isOpen: c, onClose: i }, f),
153
+ !d && /*#__PURE__*/ o.createElement(n.DrawerOverlay, null),
154
+ /*#__PURE__*/ o.createElement(
155
+ n.DrawerContent,
156
+ null,
157
+ /*#__PURE__*/ o.createElement(n.DrawerHeader, null, r),
158
+ !s && /*#__PURE__*/ o.createElement(n.DrawerCloseButton, null),
159
+ t
160
+ )
161
+ )
162
+ },
163
+ f = function (e) {
164
+ var r = e.footer,
165
+ t = e.children,
166
+ l = a(e, s)
167
+ /*#__PURE__*/ return o.createElement(
168
+ d,
169
+ l,
170
+ /*#__PURE__*/ o.createElement(n.DrawerBody, null, t),
171
+ r && /*#__PURE__*/ o.createElement(n.DrawerFooter, null, r)
172
+ )
173
+ },
174
+ p = [
175
+ 'title',
176
+ 'children',
177
+ 'isOpen',
178
+ 'onClose',
179
+ 'hideCloseButton',
180
+ 'hideOverlay',
181
+ ],
182
+ m = ['children', 'footer'],
183
+ v = function (e) {
184
+ var r = e.title,
185
+ t = e.children,
186
+ c = e.isOpen,
187
+ i = e.onClose,
188
+ u = e.hideCloseButton,
189
+ s = e.hideOverlay,
190
+ d = a(e, p)
191
+ /*#__PURE__*/ return o.createElement(
192
+ n.Modal,
193
+ l({ isOpen: c, onClose: i }, d),
194
+ !s && /*#__PURE__*/ o.createElement(n.ModalOverlay, null),
195
+ /*#__PURE__*/ o.createElement(
196
+ n.ModalContent,
197
+ null,
198
+ /*#__PURE__*/ o.createElement(n.ModalHeader, null, r),
199
+ !u && /*#__PURE__*/ o.createElement(n.ModalCloseButton, null),
200
+ t
201
+ )
202
+ )
203
+ },
204
+ C = function (e) {
205
+ var r = e.children,
206
+ t = e.footer,
207
+ l = a(e, m)
208
+ /*#__PURE__*/ return o.createElement(
209
+ v,
210
+ l,
211
+ /*#__PURE__*/ o.createElement(n.ModalBody, null, r),
212
+ t && /*#__PURE__*/ o.createElement(n.ModalFooter, null, t)
213
+ )
214
+ },
215
+ h = ['id', 'type', 'scope'],
216
+ O = ['title', 'children'],
217
+ y = o.createContext({}),
218
+ E = { id: null, props: null, type: 'modal' },
219
+ D = { alert: i, confirm: i, drawer: f, modal: C },
220
+ b = function () {
221
+ return o.useContext(y)
222
+ }
223
+ ;(exports.BaseDrawer = d),
224
+ (exports.BaseModal = v),
225
+ (exports.ConfirmDialog = i),
226
+ (exports.Drawer = f),
227
+ (exports.Modal = C),
228
+ (exports.ModalsContext = y),
229
+ (exports.ModalsProvider = function (e) {
230
+ var n = e.children,
231
+ r = e.modals,
232
+ t = o.useMemo(function () {
233
+ return new Set()
234
+ }, []),
235
+ c = o.useState({ modal: E }),
236
+ i = c[0],
237
+ u = c[1],
238
+ s = o.useMemo(
239
+ function () {
240
+ var e = l({}, D, r)
241
+ return function (n) {
242
+ return void 0 === n && (n = 'modal'), e[n] || e.modal
243
+ }
244
+ },
245
+ [r]
246
+ ),
247
+ d = function (e, n) {
248
+ if (!n) return u({ modal: e })
249
+ u(function (r) {
250
+ var t
251
+ return l({}, r, (((t = {})[n] = e), t))
252
+ })
253
+ },
254
+ f = function (e) {
255
+ var n = e.id,
256
+ r = void 0 === n ? t.size + 1 : n,
257
+ o = e.type,
258
+ c = void 0 === o ? 'modal' : o,
259
+ i = e.scope,
260
+ u = void 0 === i ? 'modal' : i,
261
+ s = a(e, h),
262
+ f = {
263
+ id: r,
264
+ props: l({}, s, { children: s.body || s.children }),
265
+ type: c,
266
+ scope: u,
267
+ }
268
+ return t.add(f), d(f, u), r
269
+ },
270
+ p = function (e, n) {
271
+ try {
272
+ var r,
273
+ o = [].concat(t),
274
+ l = o.filter(function (n) {
275
+ return n.id === e
276
+ })[0]
277
+ return l
278
+ ? Promise.resolve(
279
+ null == (r = l.props) || null == r.onClose
280
+ ? void 0
281
+ : r.onClose({ force: n })
282
+ ).then(function (e) {
283
+ if (!1 !== e) {
284
+ t.delete(l)
285
+ var n = o.filter(function (e) {
286
+ return e.scope === l.scope
287
+ })
288
+ d(
289
+ n[n.length - 2] || { id: null, props: null, type: l.type },
290
+ l.scope
291
+ )
292
+ }
293
+ })
294
+ : Promise.resolve()
295
+ } catch (e) {
296
+ return Promise.reject(e)
297
+ }
298
+ },
299
+ m = {
300
+ open: f,
301
+ drawer: function (e) {
302
+ return f(l({}, e, { type: 'drawer' }))
303
+ },
304
+ alert: function (e) {
305
+ return f(
306
+ l({}, e, {
307
+ scope: 'alert',
308
+ type: 'alert',
309
+ cancelProps: { display: 'none' },
310
+ confirmProps: { label: 'OK' },
311
+ leastDestructiveFocus: 'confirm',
312
+ })
313
+ )
314
+ },
315
+ confirm: function (e) {
316
+ return f(l({}, e, { scope: 'alert', type: 'confirm' }))
317
+ },
318
+ close: p,
319
+ closeAll: function () {
320
+ t.forEach(function (e) {
321
+ var n
322
+ return null == (n = e.props) || null == n.onClose
323
+ ? void 0
324
+ : n.onClose({ force: !0 })
325
+ }),
326
+ t.clear(),
327
+ d(E)
328
+ },
329
+ },
330
+ v = Object.entries(i).map(function (e) {
331
+ var n = e[0],
332
+ r = e[1],
333
+ c = s(r.type),
334
+ i = r.props || {},
335
+ u = i.title,
336
+ d = i.children,
337
+ f = a(i, O)
338
+ /*#__PURE__*/ return o.createElement(
339
+ c,
340
+ l({ key: n, title: u, children: d }, f, {
341
+ isOpen: !(!r.id || !t.size),
342
+ onClose: function () {
343
+ return p(r.id)
344
+ },
345
+ })
346
+ )
347
+ })
348
+ /*#__PURE__*/ return o.createElement(y.Provider, { value: m }, v, n)
349
+ }),
350
+ (exports.useModals = function () {
351
+ return b()
352
+ }),
353
+ (exports.useModalsContext = b)
2
354
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n <ModalHeader>{title}</ModalHeader>\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport interface ModalProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n const { children, footer, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport { Modal, ModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\n\nexport interface ModalsContextValue {\n open?: (options: OpenOptions) => ModalId\n drawer?: (options: ModalOptions) => ModalId\n alert?: (options: ModalOptions) => ModalId\n confirm?: (options: ModalOptions) => ModalId\n close?: (id: ModalId) => void\n closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<\n (ModalProps & DrawerProps & ConfirmDialogProps) & {\n body?: React.ReactNode\n },\n 'onClose' | 'isOpen' | 'children'\n > {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm'\n\nexport interface ModalConfig {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: ModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes | string\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = (options: OpenOptions): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig = {\n id,\n props: {\n ...props,\n children: props.body || props.children,\n },\n type,\n scope,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [..._instances]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n close,\n closeAll,\n }\n\n const content = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","h","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","Modal","ModalBody","ModalFooter","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","useModalsContext","useContext","modals","_instances","useMemo","Set","useState","activeModals","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","force","filter","_modal$props","shouldClose","scoped","length","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","value"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n <ModalHeader>{title}</ModalHeader>\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport interface ModalProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n const { children, footer, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport { Modal, ModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\n\nexport interface ModalsContextValue {\n open?: (options: OpenOptions) => ModalId\n drawer?: (options: ModalOptions) => ModalId\n alert?: (options: ModalOptions) => ModalId\n confirm?: (options: ModalOptions) => ModalId\n close?: (id: ModalId) => void\n closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<\n (ModalProps & DrawerProps & ConfirmDialogProps) & {\n body?: React.ReactNode\n },\n 'onClose' | 'isOpen' | 'children'\n > {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm'\n\nexport interface ModalConfig {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: ModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes | string\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = (options: OpenOptions): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig = {\n id,\n props: {\n ...props,\n children: props.body || props.children,\n },\n type,\n scope,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [..._instances]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n close,\n closeAll,\n }\n\n const content = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","Modal","ModalBody","ModalFooter","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","useModalsContext","useContext","modals","_instances","useMemo","Set","useState","activeModals","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","force","filter","_modal$props","shouldClose","scoped","length","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","value"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import*as e from"react";import{AlertDialog as n,AlertDialogOverlay as l,AlertDialogContent as t,AlertDialogHeader as r,AlertDialogBody as o,AlertDialogFooter as c,Drawer as a,DrawerOverlay as s,DrawerContent as i,DrawerHeader as u,DrawerCloseButton as p,DrawerBody as m,DrawerFooter as d,Modal as f,ModalOverlay as C,ModalContent as h,ModalHeader as E,ModalCloseButton as O,ModalBody as y,ModalFooter as v}from"@chakra-ui/react";import{ButtonGroup as b,Button as P}from"@saas-ui/button";function w(){return w=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var l=arguments[n];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e},w.apply(this,arguments)}function k(e,n){if(null==e)return{};var l,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n.indexOf(l=o[t])>=0||(r[l]=e[l]);return r}const D=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],g=a=>{const{title:s,cancelLabel:i="Cancel",confirmLabel:u="Confirm",cancelProps:p,confirmProps:m,buttonGroupProps:d,isOpen:f,closeOnCancel:C=!0,closeOnConfirm:h=!0,leastDestructiveFocus:E="cancel",onClose:O,onCancel:y,onConfirm:v,children:g}=a,j=k(a,D),x=e.useRef(null),B=e.useRef(null);/*#__PURE__*/return e.createElement(n,w({isOpen:f,onClose:O},j,{leastDestructiveRef:"cancel"===E?x:B}),/*#__PURE__*/e.createElement(l,null,/*#__PURE__*/e.createElement(t,null,/*#__PURE__*/e.createElement(r,null,s),/*#__PURE__*/e.createElement(o,null,g),/*#__PURE__*/e.createElement(c,null,/*#__PURE__*/e.createElement(b,d,/*#__PURE__*/e.createElement(P,w({ref:x},p,{onClick:()=>{null==y||y(),C&&O()}}),"Cancel"),/*#__PURE__*/e.createElement(P,w({ref:B},m,{onClick:()=>{null==v||v(),h&&O()}}),"Confirm"))))))},j=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],x=["footer","children"],B=n=>{const{title:l,children:t,isOpen:r,onClose:o,hideCloseButton:c,hideOverlay:m}=n,d=k(n,j);/*#__PURE__*/return e.createElement(a,w({isOpen:r,onClose:o},d),!m&&/*#__PURE__*/e.createElement(s,null),/*#__PURE__*/e.createElement(i,null,/*#__PURE__*/e.createElement(u,null,l),!c&&/*#__PURE__*/e.createElement(p,null),t))},L=n=>{const{footer:l,children:t}=n,r=k(n,x);/*#__PURE__*/return e.createElement(B,r,/*#__PURE__*/e.createElement(m,null,t),l&&/*#__PURE__*/e.createElement(d,null,l))},F=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],M=["children","footer"],R=n=>{const{title:l,children:t,isOpen:r,onClose:o,hideCloseButton:c,hideOverlay:a}=n,s=k(n,F);/*#__PURE__*/return e.createElement(f,w({isOpen:r,onClose:o},s),!a&&/*#__PURE__*/e.createElement(C,null),/*#__PURE__*/e.createElement(h,null,/*#__PURE__*/e.createElement(E,null,l),!c&&/*#__PURE__*/e.createElement(O,null),t))},z=n=>{const{children:l,footer:t}=n,r=k(n,M);/*#__PURE__*/return e.createElement(R,r,/*#__PURE__*/e.createElement(y,null,l),t&&/*#__PURE__*/e.createElement(v,null,t))},G=["id","type","scope"],S=["title","children"],A=e.createContext({}),K={id:null,props:null,type:"modal"},q={alert:g,confirm:g,drawer:L,modal:z};function H({children:n,modals:l}){const t=e.useMemo(()=>new Set,[]),[r,o]=e.useState({modal:K}),c=e.useMemo(()=>{const e=w({},q,l);return(n="modal")=>e[n]||e.modal},[l]),a=(e,n)=>{if(!n)return o({modal:e});o(l=>w({},l,{[n]:e}))},s=e=>{const{id:n=t.size+1,type:l="modal",scope:r="modal"}=e,o=k(e,G),c={id:n,props:w({},o,{children:o.body||o.children}),type:l,scope:r};return t.add(c),a(c,r),n},i=async(e,n)=>{var l;const r=[...t],o=r.filter(n=>n.id===e)[0];if(!o)return;if(!1===await(null==(l=o.props)||null==l.onClose?void 0:l.onClose({force:n})))return;t.delete(o);const c=r.filter(({scope:e})=>e===o.scope);a(c[c.length-2]||{id:null,props:null,type:o.type},o.scope)},u={open:s,drawer:e=>s(w({},e,{type:"drawer"})),alert:e=>s(w({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"})),confirm:e=>s(w({},e,{scope:"alert",type:"confirm"})),close:i,closeAll:()=>{t.forEach(e=>{var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),t.clear(),a(K)}},p=Object.entries(r).map(([n,l])=>{const r=c(l.type),o=l.props||{},{title:a,children:s}=o,u=k(o,S);/*#__PURE__*/return e.createElement(r,w({key:n,title:a,children:s},u,{isOpen:!(!l.id||!t.size),onClose:()=>i(l.id)}))});/*#__PURE__*/return e.createElement(A.Provider,{value:u},p,n)}const I=()=>e.useContext(A),J=()=>I();export{B as BaseDrawer,R as BaseModal,g as ConfirmDialog,L as Drawer,z as Modal,A as ModalsContext,H as ModalsProvider,J as useModals,I as useModalsContext};
2
+ //# sourceMappingURL=index.modern.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.modern.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n <ModalHeader>{title}</ModalHeader>\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport interface ModalProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n const { children, footer, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport { Modal, ModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\n\nexport interface ModalsContextValue {\n open?: (options: OpenOptions) => ModalId\n drawer?: (options: ModalOptions) => ModalId\n alert?: (options: ModalOptions) => ModalId\n confirm?: (options: ModalOptions) => ModalId\n close?: (id: ModalId) => void\n closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<\n (ModalProps & DrawerProps & ConfirmDialogProps) & {\n body?: React.ReactNode\n },\n 'onClose' | 'isOpen' | 'children'\n > {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm'\n\nexport interface ModalConfig {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: ModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes | string\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = (options: OpenOptions): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig = {\n id,\n props: {\n ...props,\n children: props.body || props.children,\n },\n type,\n scope,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [..._instances]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n close,\n closeAll,\n }\n\n const content = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","Modal","ModalBody","ModalFooter","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","ModalsProvider","modals","_instances","useMemo","Set","activeModals","setActiveModals","useState","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","async","force","filter","_modal$props","delete","scoped","length","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","value","useModalsContext","useContext","useModals"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@saas-ui/modals",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "A modal manager for Chakra UI",
5
5
  "source": "src/index.ts",
6
6
  "exports": {
@@ -12,12 +12,12 @@
12
12
  "default": "./src/index.ts"
13
13
  }
14
14
  },
15
- "main": "./dist/index.cjs",
16
- "module": "./dist/index.esm.js",
15
+ "main": "./dist/index.js",
16
+ "module": "./dist/index.modern.js",
17
17
  "types": "./dist/index.d.ts",
18
18
  "scripts": {
19
- "prebuild": "rimraf dist",
20
- "build": "microbundle --tsconfig ./tsconfig.json -f cjs,es --compress",
19
+ "clean": "rimraf dist",
20
+ "build": "yarn clean && cross-env NODE_ENV=production microbundle --tsconfig ./tsconfig.json --jsx React.createElement --jsxFragment React.Fragment -f cjs,modern --compress",
21
21
  "lint": "eslint src --ext .ts,.tsx,.js,.jsx --config ../../.eslintrc.js",
22
22
  "lint:staged": "lint-staged --allow-empty --config ../../lint-staged.config.js",
23
23
  "typecheck": "tsc --noEmit"
package/dist/index.esm.js DELETED
@@ -1,2 +0,0 @@
1
- import*as e from"react";import{AlertDialog as n,AlertDialogOverlay as r,AlertDialogContent as o,AlertDialogHeader as l,AlertDialogBody as t,AlertDialogFooter as i,Drawer as u,DrawerOverlay as c,DrawerContent as s,DrawerHeader as a,DrawerCloseButton as f,DrawerBody as p,DrawerFooter as d,Modal as v,ModalOverlay as m,ModalContent as C,ModalHeader as O,ModalCloseButton as y,ModalBody as P,ModalFooter as b}from"@chakra-ui/react";import{ButtonGroup as w,Button as j}from"@saas-ui/button";function k(){return k=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var r=arguments[n];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e},k.apply(this,arguments)}function D(e,n){if(null==e)return{};var r,o,l={},t=Object.keys(e);for(o=0;o<t.length;o++)n.indexOf(r=t[o])>=0||(l[r]=e[r]);return l}var g=["title","cancelLabel","confirmLabel","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children"],x=function(u){var c=u.title,s=u.cancelProps,a=u.confirmProps,f=u.buttonGroupProps,p=u.isOpen,d=u.closeOnCancel,v=void 0===d||d,m=u.closeOnConfirm,C=void 0===m||m,O=u.leastDestructiveFocus,y=void 0===O?"cancel":O,P=u.onClose,b=u.onCancel,x=u.onConfirm,B=u.children,F=D(u,g),M=e.useRef(null),R=e.useRef(null);return h(n,k({isOpen:p,onClose:P},F,{leastDestructiveRef:"cancel"===y?M:R}),h(r,null,h(o,null,h(l,null,c),h(t,null,B),h(i,null,h(w,f,h(j,k({ref:M},s,{onClick:function(){null==b||b(),v&&P()}}),"Cancel"),h(j,k({ref:R},a,{onClick:function(){null==x||x(),C&&P()}}),"Confirm"))))))},B=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],F=["footer","children"],M=function(e){var n=e.title,r=e.children,o=e.isOpen,l=e.onClose,t=e.hideCloseButton,i=e.hideOverlay,p=D(e,B);return h(u,k({isOpen:o,onClose:l},p),!i&&h(c,null),h(s,null,h(a,null,n),!t&&h(f,null),r))},R=function(e){var n=e.footer,r=e.children,o=D(e,F);return h(M,o,h(p,null,r),n&&h(d,null,n))},z=["title","children","isOpen","onClose","hideCloseButton","hideOverlay"],G=["children","footer"],L=function(e){var n=e.title,r=e.children,o=e.isOpen,l=e.onClose,t=e.hideCloseButton,i=e.hideOverlay,u=D(e,z);return h(v,k({isOpen:o,onClose:l},u),!i&&h(m,null),h(C,null,h(O,null,n),!t&&h(y,null),r))},S=function(e){var n=e.children,r=e.footer,o=D(e,G);return h(L,o,h(P,null,n),r&&h(b,null,r))},A=["id","type","scope"],E=["title","children"],K=e.createContext({}),q={id:null,props:null,type:"modal"},H={alert:x,confirm:x,drawer:R,modal:S};function I(n){var r=n.children,o=n.modals,l=e.useMemo(function(){return new Set},[]),t=e.useState({modal:q}),i=t[0],u=t[1],c=e.useMemo(function(){var e=k({},H,o);return function(n){return void 0===n&&(n="modal"),e[n]||e.modal}},[o]),s=function(e,n){if(!n)return u({modal:e});u(function(r){var o;return k({},r,((o={})[n]=e,o))})},a=function(e){var n=e.id,r=void 0===n?l.size+1:n,o=e.type,t=void 0===o?"modal":o,i=e.scope,u=void 0===i?"modal":i,c=D(e,A),a={id:r,props:k({},c,{children:c.body||c.children}),type:t,scope:u};return l.add(a),s(a,u),r},f=function(e,n){try{var r,o=[].concat(l),t=o.filter(function(n){return n.id===e})[0];return t?Promise.resolve(null==(r=t.props)||null==r.onClose?void 0:r.onClose({force:n})).then(function(e){if(!1!==e){l.delete(t);var n=o.filter(function(e){return e.scope===t.scope});s(n[n.length-2]||{id:null,props:null,type:t.type},t.scope)}}):Promise.resolve()}catch(e){return Promise.reject(e)}},p={open:a,drawer:function(e){return a(k({},e,{type:"drawer"}))},alert:function(e){return a(k({},e,{scope:"alert",type:"alert",cancelProps:{display:"none"},confirmProps:{label:"OK"},leastDestructiveFocus:"confirm"}))},confirm:function(e){return a(k({},e,{scope:"alert",type:"confirm"}))},close:f,closeAll:function(){l.forEach(function(e){var n;return null==(n=e.props)||null==n.onClose?void 0:n.onClose({force:!0})}),l.clear(),s(q)}},d=Object.entries(i).map(function(e){var n=e[0],r=e[1],o=c(r.type),t=r.props||{},i=t.title,u=t.children,s=D(t,E);return h(o,k({key:n,title:i,children:u},s,{isOpen:!(!r.id||!l.size),onClose:function(){return f(r.id)}}))});return h(K.Provider,{value:p},d,r)}var J=function(){return e.useContext(K)},N=function(){return J()};export{M as BaseDrawer,L as BaseModal,x as ConfirmDialog,R as Drawer,S as Modal,K as ModalsContext,I as ModalsProvider,N as useModals,J as useModalsContext};
2
- //# sourceMappingURL=index.esm.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.esm.js","sources":["../src/dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/provider.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n} from '@chakra-ui/react'\n\nimport {\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@saas-ui/button'\n\nexport interface ConfirmDialogProps\n extends Omit<AlertDialogProps, 'leastDestructiveRef'> {\n /**\n * The dialog title\n */\n title?: React.ReactNode\n /**\n * The cancel button label\n */\n cancelLabel?: React.ReactNode\n /**\n * The confirm button label\n */\n confirmLabel?: React.ReactNode\n /**\n * The cancel button props\n */\n cancelProps?: ButtonProps\n /**\n * The confirm button props\n */\n confirmProps?: ButtonProps\n /**\n * The button group props\n */\n buttonGroupProps?: ButtonGroupProps\n /**\n * Close the dialog on cancel\n * @default true\n */\n closeOnCancel?: boolean\n /**\n * Close the dialog on confirm\n * @default true\n */\n closeOnConfirm?: boolean\n /**\n * Defines which button gets initial focus\n * https://www.w3.org/TR/wai-aria-practices/#alertdialog\n */\n leastDestructiveFocus?: 'cancel' | 'confirm'\n /**\n * Function that's called when cancel is clicked\n */\n onCancel?: () => void\n /**\n * Function that's called when confirm is clicked\n */\n onConfirm?: () => void\n}\n\nexport const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {\n const {\n title,\n cancelLabel = 'Cancel',\n confirmLabel = 'Confirm',\n cancelProps,\n confirmProps,\n buttonGroupProps,\n isOpen,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onClose,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n\n return (\n <AlertDialog\n isOpen={isOpen}\n onClose={onClose}\n {...rest}\n leastDestructiveRef={\n leastDestructiveFocus === 'cancel' ? cancelRef : confirmRef\n }\n >\n <AlertDialogOverlay>\n <AlertDialogContent>\n <AlertDialogHeader>{title}</AlertDialogHeader>\n\n <AlertDialogBody>{children}</AlertDialogBody>\n\n <AlertDialogFooter>\n <ButtonGroup {...buttonGroupProps}>\n <Button\n ref={cancelRef}\n {...cancelProps}\n onClick={() => {\n onCancel?.()\n\n closeOnCancel && onClose()\n }}\n >\n Cancel\n </Button>\n <Button\n ref={confirmRef}\n {...confirmProps}\n onClick={() => {\n onConfirm?.()\n\n closeOnConfirm && onClose()\n }}\n >\n Confirm\n </Button>\n </ButtonGroup>\n </AlertDialogFooter>\n </AlertDialogContent>\n </AlertDialogOverlay>\n </AlertDialog>\n )\n}\n","import * as React from 'react'\n\nimport {\n Drawer as ChakraDrawer,\n DrawerOverlay,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerBody,\n DrawerCloseButton,\n DrawerProps as ChakraDrawerProps,\n} from '@chakra-ui/react'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overflow\n */\n hideOverlay?: boolean\n children?: React.ReactNode\n}\n\nexport const BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent>\n <DrawerHeader>{title}</DrawerHeader>\n {!hideCloseButton && <DrawerCloseButton />}\n {children}\n </DrawerContent>\n </ChakraDrawer>\n )\n}\n\nexport interface DrawerProps extends BaseDrawerProps {\n /**\n * Drawer footer content, wrapped with `DrawerFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const { footer, children, ...rest } = props\n return (\n <BaseDrawer {...rest}>\n <DrawerBody>{children}</DrawerBody>\n\n {footer && <DrawerFooter>{footer}</DrawerFooter>}\n </BaseDrawer>\n )\n}\n","import * as React from 'react'\n\nimport {\n Modal as ChakraModal,\n ModalOverlay,\n ModalContent,\n ModalHeader,\n ModalFooter,\n ModalBody,\n ModalCloseButton,\n ModalProps as ChakraModalProps,\n} from '@chakra-ui/react'\n\nexport interface BaseModalProps extends ChakraModalProps {\n /**\n * The modal title\n */\n title: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideOverlay?: boolean\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent>\n <ModalHeader>{title}</ModalHeader>\n {!hideCloseButton && <ModalCloseButton />}\n {children}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport interface ModalProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n const { children, footer, ...rest } = props\n return (\n <BaseModal {...rest}>\n <ModalBody>{children}</ModalBody>\n\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport { Modal, ModalProps } from './modal'\nimport { Drawer, DrawerProps } from './drawer'\nimport { ConfirmDialog, ConfirmDialogProps } from './dialog'\n\nexport interface ModalsContextValue {\n open?: (options: OpenOptions) => ModalId\n drawer?: (options: ModalOptions) => ModalId\n alert?: (options: ModalOptions) => ModalId\n confirm?: (options: ModalOptions) => ModalId\n close?: (id: ModalId) => void\n closeAll?: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue>({})\n\ninterface ModalsProviderProps {\n children: React.ReactNode\n modals?: Record<string, React.FC<any>>\n}\n\nexport type ModalId = string | number\n\ninterface ModalOptions\n extends Omit<\n (ModalProps & DrawerProps & ConfirmDialogProps) & {\n body?: React.ReactNode\n },\n 'onClose' | 'isOpen' | 'children'\n > {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n children?: React.ReactNode\n}\n\nexport interface OpenOptions extends ModalOptions {\n type?: ModalTypes | string\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport type ModalTypes = 'modal' | 'drawer' | 'alert' | 'confirm'\n\nexport interface ModalConfig {\n /**\n * The modal id, autogenerated when not set.\n * Can be used to close modals.\n */\n id?: ModalId | null\n /**\n * The modal props\n */\n props?: ModalOptions | null\n /**\n * The modal scope\n * Modals can only have one level per scope.\n * The default scopes are 'modal' and 'alert', alerts can be openend above modals.\n */\n scope?: ModalScopes | string\n /**\n * The modal type to open.\n * Build in types are 'modal', 'drawer', 'alert', 'confirm'\n *\n * Custom types can be configured using the `modals` prop of `ModalProvider`\n */\n type?: ModalTypes | string\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: 'modal',\n}\n\nconst defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n}\n\nexport function ModalsProvider({ children, modals }: ModalsProviderProps) {\n // Note that updating the Set doesn't trigger a re-render,\n // use in conjuction with setActiveModals\n const _instances = React.useMemo(() => new Set<ModalConfig>(), [])\n\n const [activeModals, setActiveModals] = React.useState<\n Record<string, ModalConfig>\n >({\n modal: initialModalState,\n })\n\n const getModalComponent = React.useMemo(() => {\n const _modals = {\n ...defaultModals,\n ...modals,\n }\n\n return (type = 'modal') => {\n const component = _modals[type] || _modals.modal\n\n return component\n }\n }, [modals])\n\n const setActiveModal = (modal: ModalConfig, scope?: string) => {\n if (!scope) {\n return setActiveModals({\n modal,\n })\n }\n setActiveModals((prevState) => ({\n ...prevState,\n [scope]: modal,\n }))\n }\n\n const open = (options: OpenOptions): ModalId => {\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n ...props\n } = options\n\n const modal: ModalConfig = {\n id,\n props: {\n ...props,\n children: props.body || props.children,\n },\n type,\n scope,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'alert',\n cancelProps: {\n display: 'none',\n },\n confirmProps: {\n label: 'OK',\n },\n leastDestructiveFocus: 'confirm',\n })\n }\n\n const confirm = (options: ModalOptions): ModalId => {\n return open({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [..._instances]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n if (!modal) {\n return\n }\n\n const shouldClose = await modal.props?.onClose?.({ force })\n if (shouldClose === false) {\n return\n }\n\n _instances.delete(modal)\n\n const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n setActiveModal(\n scoped[scoped.length - 2] || {\n id: null,\n props: null,\n type: modal.type, // Keep type same as last modal type to make sure the animation isn't interrupted\n },\n modal.scope\n )\n }\n\n const closeAll = () => {\n _instances.forEach((modal) => modal.props?.onClose?.({ force: true }))\n _instances.clear()\n\n setActiveModal(initialModalState)\n }\n\n const context = {\n open,\n drawer,\n alert,\n confirm,\n close,\n closeAll,\n }\n\n const content = Object.entries(activeModals).map(([scope, config]) => {\n const Component = getModalComponent(config.type)\n\n const { title, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={children}\n {...props}\n isOpen={!!(config.id && _instances.size)}\n onClose={() => close(config.id)}\n />\n )\n })\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = (): ModalsContextValue =>\n React.useContext(ModalsContext)\n\nexport const useModals = () => {\n return useModalsContext()\n}\n"],"names":["ConfirmDialog","props","title","cancelProps","confirmProps","buttonGroupProps","isOpen","closeOnCancel","closeOnConfirm","leastDestructiveFocus","onClose","onCancel","onConfirm","children","rest","cancelRef","React","useRef","confirmRef","AlertDialog","leastDestructiveRef","h","AlertDialogOverlay","AlertDialogContent","AlertDialogHeader","AlertDialogBody","AlertDialogFooter","ButtonGroup","Button","ref","onClick","BaseDrawer","hideCloseButton","hideOverlay","ChakraDrawer","DrawerOverlay","DrawerContent","DrawerHeader","DrawerCloseButton","Drawer","footer","DrawerBody","DrawerFooter","BaseModal","ChakraModal","ModalOverlay","ModalContent","ModalHeader","ModalCloseButton","Modal","ModalBody","ModalFooter","ModalsContext","createContext","initialModalState","id","type","defaultModals","alert","confirm","drawer","modal","ModalsProvider","modals","_instances","useMemo","Set","useState","activeModals","setActiveModals","getModalComponent","_modals","setActiveModal","scope","prevState","open","options","size","body","add","close","force","filter","_modal$props","shouldClose","scoped","length","context","display","label","closeAll","forEach","_modal$props2","clear","content","Object","entries","map","config","Component","key","Provider","value","useModalsContext","useContext","useModals"],"mappings":"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"}