@saas-ui/modals 2.4.2 → 3.0.0-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -5
- package/dist/index.cjs +206 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +182 -0
- package/dist/index.d.ts +110 -185
- package/dist/index.js +86 -531
- package/dist/index.js.map +1 -1
- package/package.json +15 -33
- package/src/alert-dialog.tsx +156 -0
- package/src/default-modals.ts +3 -7
- package/src/drawer.tsx +46 -60
- package/src/form.tsx +15 -22
- package/src/index.ts +22 -38
- package/src/modal.tsx +43 -52
- package/src/types.ts +46 -33
- package/dist/chunk-FRC2HTO7.mjs +0 -154
- package/dist/chunk-FRC2HTO7.mjs.map +0 -1
- package/dist/form-BtCUKHAs.d.mts +0 -82
- package/dist/form-BtCUKHAs.d.ts +0 -82
- package/dist/index.d.mts +0 -257
- package/dist/index.mjs +0 -469
- package/dist/index.mjs.map +0 -1
- package/dist/yup/index.d.mts +0 -15
- package/dist/yup/index.d.ts +0 -15
- package/dist/yup/index.js +0 -165
- package/dist/yup/index.js.map +0 -1
- package/dist/yup/index.mjs +0 -20
- package/dist/yup/index.mjs.map +0 -1
- package/dist/zod/index.d.mts +0 -15
- package/dist/zod/index.d.ts +0 -15
- package/dist/zod/index.js +0 -165
- package/dist/zod/index.js.map +0 -1
- package/dist/zod/index.mjs +0 -20
- package/dist/zod/index.mjs.map +0 -1
- package/src/create-modals.tsx +0 -30
- package/src/dialog.tsx +0 -151
- package/src/menu.tsx +0 -107
- package/src/provider.tsx +0 -357
package/CHANGELOG.md
CHANGED
@@ -1,13 +1,19 @@
|
|
1
1
|
# @saas-ui/modals
|
2
2
|
|
3
|
-
##
|
3
|
+
## 3.0.0-alpha.0
|
4
|
+
|
5
|
+
### Major Changes
|
6
|
+
|
7
|
+
- v3 alpha release
|
4
8
|
|
5
9
|
### Patch Changes
|
6
10
|
|
7
|
-
-
|
8
|
-
-
|
9
|
-
- @saas-ui/
|
10
|
-
- @saas-ui/
|
11
|
+
- Updated dependencies
|
12
|
+
- @saas-ui/modals-provider@1.0.0-alpha.0
|
13
|
+
- @saas-ui/forms@3.0.0-alpha.0
|
14
|
+
- @saas-ui/hooks@3.0.0-alpha.0
|
15
|
+
- @saas-ui/react@3.0.0-alpha.0
|
16
|
+
- @saas-ui/core@3.0.0-alpha.0
|
11
17
|
|
12
18
|
## 2.4.1
|
13
19
|
|
package/dist/index.cjs
ADDED
@@ -0,0 +1,206 @@
|
|
1
|
+
'use client'
|
2
|
+
"use strict";
|
3
|
+
var __create = Object.create;
|
4
|
+
var __defProp = Object.defineProperty;
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
9
|
+
var __export = (target, all) => {
|
10
|
+
for (var name in all)
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
12
|
+
};
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
15
|
+
for (let key of __getOwnPropNames(from))
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
18
|
+
}
|
19
|
+
return to;
|
20
|
+
};
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
27
|
+
mod
|
28
|
+
));
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
30
|
+
|
31
|
+
// src/index.ts
|
32
|
+
var src_exports = {};
|
33
|
+
__export(src_exports, {
|
34
|
+
AlertDialog: () => AlertDialog,
|
35
|
+
Drawer: () => Drawer,
|
36
|
+
Modal: () => Modal,
|
37
|
+
ModalsProvider: () => ModalsProvider,
|
38
|
+
useModals: () => useModals
|
39
|
+
});
|
40
|
+
module.exports = __toCommonJS(src_exports);
|
41
|
+
var import_modals_provider = require("@saas-ui/modals-provider");
|
42
|
+
|
43
|
+
// src/alert-dialog.tsx
|
44
|
+
var React = __toESM(require("react"), 1);
|
45
|
+
var import_react = require("@chakra-ui/react");
|
46
|
+
var import_utils = require("@saas-ui/core/utils");
|
47
|
+
var import_dialog = require("@saas-ui/react/dialog");
|
48
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
49
|
+
var AlertDialog = (props) => {
|
50
|
+
var _a, _b, _c, _d;
|
51
|
+
const {
|
52
|
+
title,
|
53
|
+
translations,
|
54
|
+
slotProps,
|
55
|
+
open,
|
56
|
+
closeOnCancel = true,
|
57
|
+
closeOnConfirm = true,
|
58
|
+
leastDestructiveFocus = "cancel",
|
59
|
+
onOpenChange,
|
60
|
+
onCancel,
|
61
|
+
onConfirm,
|
62
|
+
children,
|
63
|
+
...rest
|
64
|
+
} = props;
|
65
|
+
const cancelRef = React.useRef(null);
|
66
|
+
const confirmRef = React.useRef(null);
|
67
|
+
const [isLoading, setIsLoading] = React.useState(false);
|
68
|
+
const handleConfirm = async () => {
|
69
|
+
try {
|
70
|
+
const result = onConfirm == null ? void 0 : onConfirm();
|
71
|
+
if (typeof (result == null ? void 0 : result.then) === "function") {
|
72
|
+
setIsLoading(true);
|
73
|
+
await result;
|
74
|
+
}
|
75
|
+
closeOnConfirm && onOpenChange({ open: false });
|
76
|
+
} catch (e) {
|
77
|
+
throw e;
|
78
|
+
} finally {
|
79
|
+
setIsLoading(false);
|
80
|
+
}
|
81
|
+
};
|
82
|
+
const titleId = React.useId();
|
83
|
+
const contentId = React.useId();
|
84
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
85
|
+
import_dialog.Dialog.Root,
|
86
|
+
{
|
87
|
+
open,
|
88
|
+
onOpenChange,
|
89
|
+
size: "sm",
|
90
|
+
"aria-labelledby": titleId,
|
91
|
+
"aria-describedby": contentId,
|
92
|
+
...rest,
|
93
|
+
initialFocusEl: () => leastDestructiveFocus === "cancel" ? cancelRef.current : confirmRef.current,
|
94
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Content, { children: [
|
95
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Title, { id: titleId, children: title }) }),
|
96
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_dialog.Dialog.Body, { id: contentId, children }),
|
97
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dialog.Dialog.Footer, { ...slotProps == null ? void 0 : slotProps.footer, children: [
|
98
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
99
|
+
import_react.Button,
|
100
|
+
{
|
101
|
+
ref: cancelRef,
|
102
|
+
variant: "ghost",
|
103
|
+
colorPalette: "gray",
|
104
|
+
...slotProps == null ? void 0 : slotProps.cancel,
|
105
|
+
onClick: (0, import_utils.callAll)((_a = slotProps == null ? void 0 : slotProps.cancel) == null ? void 0 : _a.onClick, () => {
|
106
|
+
onCancel == null ? void 0 : onCancel();
|
107
|
+
closeOnCancel && onOpenChange({ open: false });
|
108
|
+
}),
|
109
|
+
children: ((_b = slotProps == null ? void 0 : slotProps.cancel) == null ? void 0 : _b.children) || (translations == null ? void 0 : translations.cancel) || "Cancel"
|
110
|
+
}
|
111
|
+
),
|
112
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
113
|
+
import_react.Button,
|
114
|
+
{
|
115
|
+
ref: confirmRef,
|
116
|
+
variant: "solid",
|
117
|
+
disabled: isLoading,
|
118
|
+
...slotProps == null ? void 0 : slotProps.confirm,
|
119
|
+
onClick: (0, import_utils.callAll)(handleConfirm, (_c = slotProps == null ? void 0 : slotProps.confirm) == null ? void 0 : _c.onClick),
|
120
|
+
children: ((_d = slotProps == null ? void 0 : slotProps.confirm) == null ? void 0 : _d.children) || (translations == null ? void 0 : translations.confirm) || "OK"
|
121
|
+
}
|
122
|
+
)
|
123
|
+
] })
|
124
|
+
] })
|
125
|
+
}
|
126
|
+
);
|
127
|
+
};
|
128
|
+
|
129
|
+
// src/drawer.tsx
|
130
|
+
var import_utils2 = require("@saas-ui/core/utils");
|
131
|
+
var import_drawer = require("@saas-ui/react/drawer");
|
132
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
133
|
+
var Drawer = (props) => {
|
134
|
+
const {
|
135
|
+
title,
|
136
|
+
children,
|
137
|
+
footer,
|
138
|
+
open,
|
139
|
+
onOpenChange,
|
140
|
+
hideCloseButton,
|
141
|
+
hideBackdrop,
|
142
|
+
headerProps,
|
143
|
+
contentProps,
|
144
|
+
bodyProps,
|
145
|
+
footerProps,
|
146
|
+
...rest
|
147
|
+
} = props;
|
148
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_drawer.Drawer.Root, { open, onOpenChange, ...rest, children: [
|
149
|
+
!hideBackdrop && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Backdrop, {}),
|
150
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_drawer.Drawer.Content, { ...contentProps, children: [
|
151
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Header, { ...headerProps, children: title }),
|
152
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.CloseTrigger, {}),
|
153
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Body, { ...bodyProps, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Context, { children: ({ open: open2, setOpen }) => (0, import_utils2.runIfFn)(children, { open: open2, setOpen }) }) }),
|
154
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_drawer.Drawer.Footer, { ...footerProps, children: footer })
|
155
|
+
] })
|
156
|
+
] });
|
157
|
+
};
|
158
|
+
|
159
|
+
// src/modal.tsx
|
160
|
+
var import_utils3 = require("@saas-ui/core/utils");
|
161
|
+
var import_dialog2 = require("@saas-ui/react/dialog");
|
162
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
163
|
+
var Modal = (props) => {
|
164
|
+
const {
|
165
|
+
title,
|
166
|
+
footer,
|
167
|
+
children,
|
168
|
+
open,
|
169
|
+
onOpenChange,
|
170
|
+
hideCloseButton,
|
171
|
+
hideBackdrop,
|
172
|
+
headerProps,
|
173
|
+
contentProps,
|
174
|
+
bodyProps,
|
175
|
+
footerProps,
|
176
|
+
...rest
|
177
|
+
} = props;
|
178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Root, { open, onOpenChange, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_dialog2.Dialog.Content, { ...contentProps, children: [
|
179
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Header, { ...headerProps, children: title }),
|
180
|
+
!hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.CloseTrigger, {}),
|
181
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Body, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Context, { children: ({ open: open2, setOpen }) => (0, import_utils3.runIfFn)(children, { open: open2, setOpen }) }) }),
|
182
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_dialog2.Dialog.Footer, { ...footerProps, children: footer })
|
183
|
+
] }) });
|
184
|
+
};
|
185
|
+
|
186
|
+
// src/default-modals.ts
|
187
|
+
var defaultModals = {
|
188
|
+
alert: AlertDialog,
|
189
|
+
confirm: AlertDialog,
|
190
|
+
drawer: Drawer,
|
191
|
+
modal: Modal
|
192
|
+
};
|
193
|
+
|
194
|
+
// src/index.ts
|
195
|
+
var { useModals, ModalsProvider } = (0, import_modals_provider.createModals)({
|
196
|
+
modals: defaultModals
|
197
|
+
});
|
198
|
+
// Annotate the CommonJS export names for ESM import in node:
|
199
|
+
0 && (module.exports = {
|
200
|
+
AlertDialog,
|
201
|
+
Drawer,
|
202
|
+
Modal,
|
203
|
+
ModalsProvider,
|
204
|
+
useModals
|
205
|
+
});
|
206
|
+
//# sourceMappingURL=index.cjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/alert-dialog.tsx","../src/drawer.tsx","../src/modal.tsx","../src/default-modals.ts"],"sourcesContent":["import { createModals } from '@saas-ui/modals-provider'\n\nimport { defaultModals } from './default-modals.ts'\n\n// Exporting from './dialog'\nexport { AlertDialog } from './alert-dialog.tsx'\nexport type { AlertDialogProps } from './alert-dialog.tsx'\n\n// Exporting from './drawer'\nexport { Drawer } from './drawer'\nexport type { DrawerProps } from './drawer'\n\n// Exporting from './modal'\nexport { Modal } from './modal'\nexport type { ModalProps } from './modal'\n\n// Exporting from './form'\n// export { FormDialog, createFormDialog } from './form'\n// export type {\n// DefaultFormType,\n// FormDialogFieldOverrides,\n// FormDialogProps,\n// } from './form'\n\n// Exporting from './provider'\n\nconst { useModals, ModalsProvider } = createModals({\n modals: defaultModals,\n})\n\nexport { ModalsProvider, useModals }\n","import * as React from 'react'\n\nimport { Button, ButtonProps, type HTMLChakraProps } from '@chakra-ui/react'\nimport { callAll } from '@saas-ui/core/utils'\nimport { Dialog } from '@saas-ui/react/dialog'\n\nexport interface AlertDialogProps\n extends Omit<\n Dialog.RootProps,\n 'leastDestructiveRef' | 'onOpenChange' | 'open'\n > {\n /**\n * Whether the dialog is open\n */\n open: boolean\n /**\n * Callback when the dialog is opened or closed\n */\n onOpenChange: (details: { open: boolean }) => void\n /**\n * The dialog title\n */\n title?: React.ReactNode\n translations?: {\n cancel?: React.ReactNode\n confirm?: React.ReactNode\n close?: React.ReactNode\n }\n slotProps?: {\n cancel?: ButtonProps\n confirm?: ButtonProps\n footer?: HTMLChakraProps<'div'>\n }\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 * Hide the backdrop\n */\n backdrop?: boolean\n /**\n * Hide the close button\n */\n hideCloseButton?: 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?: () => Promise<void> | void\n}\n\nexport const AlertDialog: React.FC<AlertDialogProps> = (props) => {\n const {\n title,\n translations,\n slotProps,\n open,\n closeOnCancel = true,\n closeOnConfirm = true,\n leastDestructiveFocus = 'cancel',\n onOpenChange,\n onCancel,\n onConfirm,\n children,\n ...rest\n } = props\n\n const cancelRef = React.useRef(null)\n const confirmRef = React.useRef(null)\n const [isLoading, setIsLoading] = React.useState(false)\n\n const handleConfirm = async () => {\n try {\n const result = onConfirm?.()\n if (typeof result?.then === 'function') {\n setIsLoading(true)\n await result\n }\n\n closeOnConfirm && onOpenChange({ open: false })\n /* eslint-disable no-useless-catch */\n } catch (e: any) {\n throw e\n } finally {\n setIsLoading(false)\n }\n /* eslint-enable */\n }\n\n const titleId = React.useId()\n const contentId = React.useId()\n\n return (\n <Dialog.Root\n open={open}\n onOpenChange={onOpenChange}\n size=\"sm\"\n aria-labelledby={titleId}\n aria-describedby={contentId}\n {...rest}\n initialFocusEl={() =>\n leastDestructiveFocus === 'cancel'\n ? cancelRef.current\n : confirmRef.current\n }\n >\n <Dialog.Content>\n <Dialog.Header>\n <Dialog.Title id={titleId}>{title}</Dialog.Title>\n </Dialog.Header>\n\n <Dialog.Body id={contentId}>{children}</Dialog.Body>\n\n <Dialog.Footer {...slotProps?.footer}>\n <Button\n ref={cancelRef}\n variant=\"ghost\"\n colorPalette=\"gray\"\n {...slotProps?.cancel}\n onClick={callAll(slotProps?.cancel?.onClick, () => {\n onCancel?.()\n\n closeOnCancel && onOpenChange({ open: false })\n })}\n >\n {slotProps?.cancel?.children || translations?.cancel || 'Cancel'}\n </Button>\n <Button\n ref={confirmRef}\n variant=\"solid\"\n disabled={isLoading}\n {...slotProps?.confirm}\n onClick={callAll(handleConfirm, slotProps?.confirm?.onClick)}\n >\n {slotProps?.confirm?.children || translations?.confirm || 'OK'}\n </Button>\n </Dialog.Footer>\n </Dialog.Content>\n </Dialog.Root>\n )\n}\n","import * as React from 'react'\n\nimport { type HTMLChakraProps } from '@chakra-ui/react'\nimport { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'\nimport { Drawer as BaseDrawer } from '@saas-ui/react/drawer'\n\nexport interface DrawerProps extends Omit<BaseDrawer.RootProps, 'children'> {\n /**\n * The drawer title\n */\n title: React.ReactNode\n /**\n * Whether the modal is open\n */\n open: boolean\n /**\n * Callback when the drawer is opened or closed\n */\n onOpenChange: (details: { open: boolean }) => void\n /**\n * The drawer children\n */\n children: MaybeRenderProp<{\n open: boolean\n setOpen: (open: boolean) => void\n }>\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the backdrop\n */\n hideBackdrop?: boolean\n /**\n * Props for the modal header\n */\n headerProps?: HTMLChakraProps<'div'>\n /**\n * Props for the modal content\n */\n contentProps?: BaseDrawer.ContentProps\n /**\n * Props for the modal footer\n */\n footerProps?: HTMLChakraProps<'div'>\n /**\n * Props for the modal body\n */\n bodyProps?: HTMLChakraProps<'div'>\n}\n\nexport const Drawer: React.FC<DrawerProps> = (props) => {\n const {\n title,\n children,\n footer,\n open,\n onOpenChange,\n hideCloseButton,\n hideBackdrop,\n headerProps,\n contentProps,\n bodyProps,\n footerProps,\n ...rest\n } = props\n return (\n <BaseDrawer.Root open={open} onOpenChange={onOpenChange} {...rest}>\n {!hideBackdrop && <BaseDrawer.Backdrop />}\n <BaseDrawer.Content {...contentProps}>\n {title && (\n <BaseDrawer.Header {...headerProps}>{title}</BaseDrawer.Header>\n )}\n {!hideCloseButton && <BaseDrawer.CloseTrigger />}\n <BaseDrawer.Body {...bodyProps}>\n <BaseDrawer.Context>\n {({ open, setOpen }) => runIfFn(children, { open, setOpen })}\n </BaseDrawer.Context>\n </BaseDrawer.Body>\n {footer && (\n <BaseDrawer.Footer {...footerProps}>{footer}</BaseDrawer.Footer>\n )}\n </BaseDrawer.Content>\n </BaseDrawer.Root>\n )\n}\n","import * as React from 'react'\n\nimport type { HTMLChakraProps } from '@chakra-ui/react'\nimport { MaybeRenderProp, runIfFn } from '@saas-ui/core/utils'\nimport { Dialog as BaseDialog } from '@saas-ui/react/dialog'\n\nexport interface ModalProps extends Omit<BaseDialog.RootProps, 'children'> {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * Whether the modal is open\n */\n open: boolean\n /**\n * Callback when the modal is opened or closed\n */\n onOpenChange: (details: { open: boolean }) => void\n /**\n * The modal children\n */\n children: MaybeRenderProp<{\n open: boolean\n setOpen: (open: boolean) => void\n }>\n /**\n * The modal footer\n */\n footer?: React.ReactNode\n /**\n * Hide the close button\n */\n hideCloseButton?: boolean\n /**\n * Hide the overlay\n */\n hideBackdrop?: boolean\n /**\n * Props for the modal header\n */\n headerProps?: HTMLChakraProps<'div'>\n /**\n * Props for the modal content\n */\n contentProps?: HTMLChakraProps<'div'>\n /**\n * Props for the modal body\n */\n bodyProps?: HTMLChakraProps<'div'>\n /**\n * Props for the modal footer\n */\n footerProps?: HTMLChakraProps<'div'>\n}\n\nexport const Modal: React.FC<ModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n open,\n onOpenChange,\n hideCloseButton,\n hideBackdrop,\n headerProps,\n contentProps,\n bodyProps,\n footerProps,\n ...rest\n } = props\n return (\n <BaseDialog.Root open={open} onOpenChange={onOpenChange} {...rest}>\n <BaseDialog.Content {...contentProps}>\n {title && (\n <BaseDialog.Header {...headerProps}>{title}</BaseDialog.Header>\n )}\n {!hideCloseButton && <BaseDialog.CloseTrigger />}\n <BaseDialog.Body>\n <BaseDialog.Context>\n {({ open, setOpen }) => runIfFn(children, { open, setOpen })}\n </BaseDialog.Context>\n </BaseDialog.Body>\n {footer && (\n <BaseDialog.Footer {...footerProps}>{footer}</BaseDialog.Footer>\n )}\n </BaseDialog.Content>\n </BaseDialog.Root>\n )\n}\n","import { AlertDialog } from './alert-dialog'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: AlertDialog,\n confirm: AlertDialog,\n drawer: Drawer,\n modal: Modal,\n}\n"],"mappings":"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","names":["import_utils","import_jsx_runtime","BaseDrawer","open","import_utils","import_dialog","import_jsx_runtime","BaseDialog","open"]}
|
package/dist/index.d.cts
ADDED
@@ -0,0 +1,182 @@
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
2
|
+
import * as _saas_ui_modals_provider from '@saas-ui/modals-provider';
|
3
|
+
import * as React from 'react';
|
4
|
+
import { HTMLChakraProps, ButtonProps } from '@chakra-ui/react';
|
5
|
+
import { MaybeRenderProp } from '@saas-ui/core/utils';
|
6
|
+
import { Dialog } from '@saas-ui/react/dialog';
|
7
|
+
import { Drawer as Drawer$1 } from '@saas-ui/react/drawer';
|
8
|
+
|
9
|
+
interface ModalProps extends Omit<Dialog.RootProps, 'children'> {
|
10
|
+
/**
|
11
|
+
* The modal title
|
12
|
+
*/
|
13
|
+
title?: React.ReactNode;
|
14
|
+
/**
|
15
|
+
* Whether the modal is open
|
16
|
+
*/
|
17
|
+
open: boolean;
|
18
|
+
/**
|
19
|
+
* Callback when the modal is opened or closed
|
20
|
+
*/
|
21
|
+
onOpenChange: (details: {
|
22
|
+
open: boolean;
|
23
|
+
}) => void;
|
24
|
+
/**
|
25
|
+
* The modal children
|
26
|
+
*/
|
27
|
+
children: MaybeRenderProp<{
|
28
|
+
open: boolean;
|
29
|
+
setOpen: (open: boolean) => void;
|
30
|
+
}>;
|
31
|
+
/**
|
32
|
+
* The modal footer
|
33
|
+
*/
|
34
|
+
footer?: React.ReactNode;
|
35
|
+
/**
|
36
|
+
* Hide the close button
|
37
|
+
*/
|
38
|
+
hideCloseButton?: boolean;
|
39
|
+
/**
|
40
|
+
* Hide the overlay
|
41
|
+
*/
|
42
|
+
hideBackdrop?: boolean;
|
43
|
+
/**
|
44
|
+
* Props for the modal header
|
45
|
+
*/
|
46
|
+
headerProps?: HTMLChakraProps<'div'>;
|
47
|
+
/**
|
48
|
+
* Props for the modal content
|
49
|
+
*/
|
50
|
+
contentProps?: HTMLChakraProps<'div'>;
|
51
|
+
/**
|
52
|
+
* Props for the modal body
|
53
|
+
*/
|
54
|
+
bodyProps?: HTMLChakraProps<'div'>;
|
55
|
+
/**
|
56
|
+
* Props for the modal footer
|
57
|
+
*/
|
58
|
+
footerProps?: HTMLChakraProps<'div'>;
|
59
|
+
}
|
60
|
+
declare const Modal: React.FC<ModalProps>;
|
61
|
+
|
62
|
+
interface DrawerProps extends Omit<Drawer$1.RootProps, 'children'> {
|
63
|
+
/**
|
64
|
+
* The drawer title
|
65
|
+
*/
|
66
|
+
title: React.ReactNode;
|
67
|
+
/**
|
68
|
+
* Whether the modal is open
|
69
|
+
*/
|
70
|
+
open: boolean;
|
71
|
+
/**
|
72
|
+
* Callback when the drawer is opened or closed
|
73
|
+
*/
|
74
|
+
onOpenChange: (details: {
|
75
|
+
open: boolean;
|
76
|
+
}) => void;
|
77
|
+
/**
|
78
|
+
* The drawer children
|
79
|
+
*/
|
80
|
+
children: MaybeRenderProp<{
|
81
|
+
open: boolean;
|
82
|
+
setOpen: (open: boolean) => void;
|
83
|
+
}>;
|
84
|
+
/**
|
85
|
+
* The modal footer
|
86
|
+
*/
|
87
|
+
footer?: React.ReactNode;
|
88
|
+
/**
|
89
|
+
* Hide the close button
|
90
|
+
*/
|
91
|
+
hideCloseButton?: boolean;
|
92
|
+
/**
|
93
|
+
* Hide the backdrop
|
94
|
+
*/
|
95
|
+
hideBackdrop?: boolean;
|
96
|
+
/**
|
97
|
+
* Props for the modal header
|
98
|
+
*/
|
99
|
+
headerProps?: HTMLChakraProps<'div'>;
|
100
|
+
/**
|
101
|
+
* Props for the modal content
|
102
|
+
*/
|
103
|
+
contentProps?: Drawer$1.ContentProps;
|
104
|
+
/**
|
105
|
+
* Props for the modal footer
|
106
|
+
*/
|
107
|
+
footerProps?: HTMLChakraProps<'div'>;
|
108
|
+
/**
|
109
|
+
* Props for the modal body
|
110
|
+
*/
|
111
|
+
bodyProps?: HTMLChakraProps<'div'>;
|
112
|
+
}
|
113
|
+
declare const Drawer: React.FC<DrawerProps>;
|
114
|
+
|
115
|
+
interface AlertDialogProps extends Omit<Dialog.RootProps, 'leastDestructiveRef' | 'onOpenChange' | 'open'> {
|
116
|
+
/**
|
117
|
+
* Whether the dialog is open
|
118
|
+
*/
|
119
|
+
open: boolean;
|
120
|
+
/**
|
121
|
+
* Callback when the dialog is opened or closed
|
122
|
+
*/
|
123
|
+
onOpenChange: (details: {
|
124
|
+
open: boolean;
|
125
|
+
}) => void;
|
126
|
+
/**
|
127
|
+
* The dialog title
|
128
|
+
*/
|
129
|
+
title?: React.ReactNode;
|
130
|
+
translations?: {
|
131
|
+
cancel?: React.ReactNode;
|
132
|
+
confirm?: React.ReactNode;
|
133
|
+
close?: React.ReactNode;
|
134
|
+
};
|
135
|
+
slotProps?: {
|
136
|
+
cancel?: ButtonProps;
|
137
|
+
confirm?: ButtonProps;
|
138
|
+
footer?: HTMLChakraProps<'div'>;
|
139
|
+
};
|
140
|
+
/**
|
141
|
+
* Close the dialog on cancel
|
142
|
+
* @default true
|
143
|
+
*/
|
144
|
+
closeOnCancel?: boolean;
|
145
|
+
/**
|
146
|
+
* Close the dialog on confirm
|
147
|
+
* @default true
|
148
|
+
*/
|
149
|
+
closeOnConfirm?: boolean;
|
150
|
+
/**
|
151
|
+
* Hide the backdrop
|
152
|
+
*/
|
153
|
+
backdrop?: boolean;
|
154
|
+
/**
|
155
|
+
* Hide the close button
|
156
|
+
*/
|
157
|
+
hideCloseButton?: boolean;
|
158
|
+
/**
|
159
|
+
* Defines which button gets initial focus
|
160
|
+
* https://www.w3.org/TR/wai-aria-practices/#alertdialog
|
161
|
+
*/
|
162
|
+
leastDestructiveFocus?: 'cancel' | 'confirm';
|
163
|
+
/**
|
164
|
+
* Function that's called when cancel is clicked
|
165
|
+
*/
|
166
|
+
onCancel?: () => void;
|
167
|
+
/**
|
168
|
+
* Function that's called when confirm is clicked.
|
169
|
+
*/
|
170
|
+
onConfirm?: () => Promise<void> | void;
|
171
|
+
}
|
172
|
+
declare const AlertDialog: React.FC<AlertDialogProps>;
|
173
|
+
|
174
|
+
declare const useModals: () => _saas_ui_modals_provider.ModalsContextValue<{
|
175
|
+
alert: React.FC<AlertDialogProps>;
|
176
|
+
confirm: React.FC<AlertDialogProps>;
|
177
|
+
drawer: React.FC<DrawerProps>;
|
178
|
+
modal: React.FC<ModalProps>;
|
179
|
+
}, "alert" | "drawer" | "modal" | "confirm">;
|
180
|
+
declare const ModalsProvider: (props: Omit<_saas_ui_modals_provider.ModalsProviderProps, "modals">) => react_jsx_runtime.JSX.Element;
|
181
|
+
|
182
|
+
export { AlertDialog, type AlertDialogProps, Drawer, type DrawerProps, Modal, type ModalProps, ModalsProvider, useModals };
|