@saas-ui/modals 2.1.40 → 2.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +19 -0
- package/dist/chunk-I63K4ILP.mjs +154 -0
- package/dist/chunk-I63K4ILP.mjs.map +1 -0
- package/dist/form-Cdu466OH.d.mts +82 -0
- package/dist/form-Cdu466OH.d.ts +82 -0
- package/dist/index.d.mts +10 -85
- package/dist/index.d.ts +10 -85
- package/dist/index.mjs +17 -156
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.d.mts +15 -0
- package/dist/yup/index.d.ts +15 -0
- package/dist/yup/index.js +165 -0
- package/dist/yup/index.js.map +1 -0
- package/dist/yup/index.mjs +20 -0
- package/dist/yup/index.mjs.map +1 -0
- package/dist/zod/index.d.mts +15 -0
- package/dist/zod/index.d.ts +15 -0
- package/dist/zod/index.js +165 -0
- package/dist/zod/index.js.map +1 -0
- package/dist/zod/index.mjs +20 -0
- package/dist/zod/index.mjs.map +1 -0
- package/package.json +39 -6
- package/src/yup/create-yup-form-dialog.ts +18 -0
- package/src/yup/index.ts +6 -0
- package/src/zod/create-zod-form-dialog.ts +17 -0
- package/src/zod/index.ts +6 -0
package/CHANGELOG.md
CHANGED
@@ -1,5 +1,24 @@
|
|
1
1
|
# @saas-ui/modals
|
2
2
|
|
3
|
+
## 2.2.0
|
4
|
+
|
5
|
+
### Minor Changes
|
6
|
+
|
7
|
+
- 2ac496a: Upgraded to Chakra UI v2.9.3
|
8
|
+
|
9
|
+
### Patch Changes
|
10
|
+
|
11
|
+
- Updated dependencies [2ac496a]
|
12
|
+
- @saas-ui/react-utils@2.1.0
|
13
|
+
- @saas-ui/forms@2.7.0
|
14
|
+
- @saas-ui/hooks@2.1.0
|
15
|
+
|
16
|
+
## 2.1.41
|
17
|
+
|
18
|
+
### Patch Changes
|
19
|
+
|
20
|
+
- @saas-ui/forms@2.6.11
|
21
|
+
|
3
22
|
## 2.1.40
|
4
23
|
|
5
24
|
### Patch Changes
|
@@ -0,0 +1,154 @@
|
|
1
|
+
'use client'
|
2
|
+
|
3
|
+
// src/modal.tsx
|
4
|
+
import {
|
5
|
+
Modal as ChakraModal,
|
6
|
+
ModalOverlay,
|
7
|
+
ModalContent,
|
8
|
+
ModalHeader,
|
9
|
+
ModalFooter,
|
10
|
+
ModalBody,
|
11
|
+
ModalCloseButton
|
12
|
+
} from "@chakra-ui/react";
|
13
|
+
import { runIfFn } from "@chakra-ui/utils";
|
14
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
15
|
+
var BaseModal = (props) => {
|
16
|
+
const {
|
17
|
+
title,
|
18
|
+
footer,
|
19
|
+
children,
|
20
|
+
isOpen,
|
21
|
+
onClose,
|
22
|
+
hideCloseButton,
|
23
|
+
hideOverlay,
|
24
|
+
headerProps,
|
25
|
+
contentProps,
|
26
|
+
footerProps,
|
27
|
+
...rest
|
28
|
+
} = props;
|
29
|
+
return /* @__PURE__ */ jsxs(ChakraModal, { isOpen, onClose, ...rest, children: [
|
30
|
+
!hideOverlay && /* @__PURE__ */ jsx(ModalOverlay, {}),
|
31
|
+
/* @__PURE__ */ jsxs(ModalContent, { ...contentProps, children: [
|
32
|
+
title && /* @__PURE__ */ jsx(ModalHeader, { ...headerProps, children: title }),
|
33
|
+
!hideCloseButton && /* @__PURE__ */ jsx(ModalCloseButton, {}),
|
34
|
+
runIfFn(children, {
|
35
|
+
isOpen,
|
36
|
+
onClose
|
37
|
+
}),
|
38
|
+
footer && /* @__PURE__ */ jsx(ModalFooter, { ...footerProps, children: footer })
|
39
|
+
] })
|
40
|
+
] });
|
41
|
+
};
|
42
|
+
var Modal = (props) => {
|
43
|
+
const { children, isOpen, onClose, ...rest } = props;
|
44
|
+
return /* @__PURE__ */ jsx(BaseModal, { ...rest, isOpen, onClose, children: /* @__PURE__ */ jsx(ModalBody, { children: runIfFn(children, {
|
45
|
+
isOpen,
|
46
|
+
onClose
|
47
|
+
}) }) });
|
48
|
+
};
|
49
|
+
|
50
|
+
// src/form.tsx
|
51
|
+
import {
|
52
|
+
ModalBody as ModalBody2,
|
53
|
+
ModalFooter as ModalFooter2,
|
54
|
+
Button,
|
55
|
+
forwardRef
|
56
|
+
} from "@chakra-ui/react";
|
57
|
+
import { runIfFn as runIfFn2 } from "@saas-ui/react-utils";
|
58
|
+
import {
|
59
|
+
Form,
|
60
|
+
AutoFields,
|
61
|
+
SubmitButton
|
62
|
+
} from "@saas-ui/forms";
|
63
|
+
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
64
|
+
var useFormProps = (props) => {
|
65
|
+
const {
|
66
|
+
schema,
|
67
|
+
resolver,
|
68
|
+
fieldResolver,
|
69
|
+
defaultValues,
|
70
|
+
values,
|
71
|
+
context,
|
72
|
+
onChange,
|
73
|
+
onSubmit,
|
74
|
+
onError,
|
75
|
+
mode,
|
76
|
+
reValidateMode,
|
77
|
+
shouldFocusError = true,
|
78
|
+
shouldUnregister,
|
79
|
+
shouldUseNativeValidation,
|
80
|
+
criteriaMode,
|
81
|
+
delayError = 100,
|
82
|
+
fields,
|
83
|
+
formRef,
|
84
|
+
...modalProps
|
85
|
+
} = props;
|
86
|
+
const formProps = {
|
87
|
+
schema,
|
88
|
+
resolver,
|
89
|
+
defaultValues,
|
90
|
+
values,
|
91
|
+
context,
|
92
|
+
onChange,
|
93
|
+
onSubmit,
|
94
|
+
onError,
|
95
|
+
mode,
|
96
|
+
reValidateMode,
|
97
|
+
shouldFocusError,
|
98
|
+
shouldUnregister,
|
99
|
+
shouldUseNativeValidation,
|
100
|
+
criteriaMode,
|
101
|
+
delayError,
|
102
|
+
fields,
|
103
|
+
formRef
|
104
|
+
};
|
105
|
+
return { modalProps, formProps, fields };
|
106
|
+
};
|
107
|
+
function createFormDialog(Form2) {
|
108
|
+
const Dialog = forwardRef((props, ref) => {
|
109
|
+
const { isOpen, onClose, footer, children, ...rest } = props;
|
110
|
+
const { modalProps, formProps, fields } = useFormProps(rest);
|
111
|
+
return /* @__PURE__ */ jsx2(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ jsx2(
|
112
|
+
Form2,
|
113
|
+
{
|
114
|
+
ref,
|
115
|
+
...formProps,
|
116
|
+
flex: "1",
|
117
|
+
minHeight: "0px",
|
118
|
+
display: "flex",
|
119
|
+
flexDirection: "column",
|
120
|
+
children: (form) => {
|
121
|
+
var _a, _b;
|
122
|
+
return /* @__PURE__ */ jsxs2(Fragment, { children: [
|
123
|
+
/* @__PURE__ */ jsx2(ModalBody2, { height: "100%", children: runIfFn2(children, form) || /* @__PURE__ */ jsx2(AutoFields, {}) }),
|
124
|
+
footer || /* @__PURE__ */ jsxs2(ModalFooter2, { children: [
|
125
|
+
/* @__PURE__ */ jsx2(
|
126
|
+
Button,
|
127
|
+
{
|
128
|
+
variant: "ghost",
|
129
|
+
mr: 3,
|
130
|
+
onClick: onClose,
|
131
|
+
...fields == null ? void 0 : fields.cancel,
|
132
|
+
children: (_b = (_a = fields == null ? void 0 : fields.cancel) == null ? void 0 : _a.children) != null ? _b : "Cancel"
|
133
|
+
}
|
134
|
+
),
|
135
|
+
/* @__PURE__ */ jsx2(SubmitButton, { ...fields == null ? void 0 : fields.submit })
|
136
|
+
] })
|
137
|
+
] });
|
138
|
+
}
|
139
|
+
}
|
140
|
+
) });
|
141
|
+
});
|
142
|
+
Dialog.displayName = `${Form2.displayName || Form2.name}Dialog`;
|
143
|
+
Dialog.id = Form2.id;
|
144
|
+
return Dialog;
|
145
|
+
}
|
146
|
+
var FormDialog = createFormDialog(Form);
|
147
|
+
|
148
|
+
export {
|
149
|
+
BaseModal,
|
150
|
+
Modal,
|
151
|
+
createFormDialog,
|
152
|
+
FormDialog
|
153
|
+
};
|
154
|
+
//# sourceMappingURL=chunk-I63K4ILP.mjs.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["../src/modal.tsx","../src/form.tsx"],"sourcesContent":["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 ModalContentProps,\n ModalHeaderProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseModalProps extends Omit<ChakraModalProps, 'children'> {\n /**\n * The modal title\n */\n title?: React.ReactNode\n /**\n * The modal children\n */\n children: MaybeRenderProp<{\n isOpen: boolean\n onClose: () => 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 hideOverlay?: boolean\n /**\n * Props for the modal header\n */\n headerProps?: ModalHeaderProps\n /**\n * Props for the modal content\n */\n contentProps?: ModalContentProps\n /**\n * Props for the modal footer\n */\n footerProps?: ModalFooterProps\n}\n\nexport const BaseModal: React.FC<BaseModalProps> = (props) => {\n const {\n title,\n footer,\n children,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraModal isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <ModalOverlay />}\n <ModalContent {...contentProps}>\n {title && <ModalHeader {...headerProps}>{title}</ModalHeader>}\n {!hideCloseButton && <ModalCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <ModalFooter {...footerProps}>{footer}</ModalFooter>}\n </ModalContent>\n </ChakraModal>\n )\n}\n\nexport const Modal: React.FC<BaseModalProps> = (props) => {\n const { children, isOpen, onClose, ...rest } = props\n return (\n <BaseModal {...rest} isOpen={isOpen} onClose={onClose}>\n <ModalBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </ModalBody>\n </BaseModal>\n )\n}\n","import * as React from 'react'\n\nimport {\n ModalBody,\n ModalFooter,\n Button,\n forwardRef,\n ButtonProps,\n} from '@chakra-ui/react'\nimport { runIfFn } from '@saas-ui/react-utils'\n\nimport {\n Form,\n AutoFields,\n SubmitButton,\n FormProps,\n FieldValues,\n FieldResolver,\n FieldProps,\n FormType,\n DefaultFieldOverrides,\n} from '@saas-ui/forms'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nexport type FormDialogFieldOverrides = DefaultFieldOverrides & {\n cancel?: ButtonProps\n}\n\nexport interface FormDialogProps<\n TSchema = any,\n TFieldValues extends FieldValues = FieldValues,\n TContext extends object = object,\n TExtraFieldProps extends object = object,\n TFieldTypes = FieldProps<TFieldValues>,\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>,\n | 'schema'\n | 'defaultValues'\n | 'values'\n | 'context'\n | 'onChange'\n | 'onSubmit'\n | 'onError'\n | 'resolver'\n | 'mode'\n | 'reValidateMode'\n | 'shouldFocusError'\n | 'shouldUnregister'\n | 'shouldUseNativeValidation'\n | 'criteriaMode'\n | 'delayError'\n | 'resetOptions'\n | 'formRef'\n | 'children'\n > {\n /**\n * The modal footer, will be wrapped with `ModalFooter`.\n * Defaults to a cancel and submit button.\n */\n footer?: React.ReactNode\n /**\n * A schema field resolver used to auto generate form fields.\n */\n fieldResolver?: FieldResolver\n /**\n * Field overrides\n */\n fields?: FormDialogFieldOverrides\n}\n\nconst useFormProps = (props: FormDialogProps) => {\n const {\n schema,\n resolver,\n fieldResolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError = true,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError = 100,\n fields,\n formRef,\n ...modalProps\n } = props\n\n const formProps = {\n schema,\n resolver,\n defaultValues,\n values,\n context,\n onChange,\n onSubmit,\n onError,\n mode,\n reValidateMode,\n shouldFocusError,\n shouldUnregister,\n shouldUseNativeValidation,\n criteriaMode,\n delayError,\n fields,\n formRef,\n }\n\n return { modalProps, formProps, fields }\n}\n\n/**\n * @todo make this dynamic to support other schema types\n */\ntype MergeDialogProps<T> =\n T extends FormType<\n infer FieldDefs,\n infer ExtraProps,\n infer ExtraFieldProps,\n infer ExtraOverrides\n >\n ? FormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraFieldProps,\n ExtraOverrides & FormDialogFieldOverrides\n >\n : never\n\ntype IsSchemaType<T, Schema, FieldDefs> =\n T extends DefaultFormType<FieldDefs>\n ? T extends (\n props: FormProps<infer TSchema, infer TFieldValues, infer TContext>\n ) => any\n ? Schema extends TSchema\n ? true\n : false\n : false\n : false\n\nexport type DefaultFormType<\n FieldDefs = any,\n ExtraProps = object,\n ExtraFieldProps extends object = object,\n ExtraOverrides = FormDialogFieldOverrides,\n> = (<\n TSchema = unknown,\n TFieldValues extends Record<string, any> = any,\n TContext extends object = object,\n>(\n props: any\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport function createFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraFieldProps extends object = object,\n ExtraOverrides = FormDialogFieldOverrides,\n TFormType extends DefaultFormType<\n FieldDefs,\n ExtraProps,\n ExtraFieldProps,\n ExtraOverrides\n > = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>,\n>(Form: TFormType) {\n const Dialog = forwardRef<any, 'div'>((props, ref) => {\n const { isOpen, onClose, footer, children, ...rest } = props\n const { modalProps, formProps, fields } = useFormProps(rest)\n return (\n <BaseModal {...modalProps} isOpen={isOpen} onClose={onClose}>\n <Form\n ref={ref}\n {...(formProps as any)}\n flex=\"1\"\n minHeight=\"0px\"\n display=\"flex\"\n flexDirection=\"column\"\n >\n {(form: any) => (\n <>\n <ModalBody height=\"100%\">\n {runIfFn(children, form) || <AutoFields />}\n </ModalBody>\n\n {footer || (\n <ModalFooter>\n <Button\n variant=\"ghost\"\n mr={3}\n onClick={onClose}\n {...fields?.cancel}\n >\n {fields?.cancel?.children ?? 'Cancel'}\n </Button>\n <SubmitButton {...fields?.submit} />\n </ModalFooter>\n )}\n </>\n )}\n </Form>\n </BaseModal>\n )\n }) as MergeDialogProps<TFormType>\n\n Dialog.displayName = `${Form.displayName || Form.name}Dialog`\n Dialog.id = Form.id\n\n return Dialog\n}\n\n/**\n * Can be used to quickly request information from people without leaving the current page.\n *\n * @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog\n */\nexport const FormDialog = createFormDialog(Form)\n"],"mappings":"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","names":["ModalBody","ModalFooter","runIfFn","jsx","jsxs","Form","ModalBody","runIfFn","ModalFooter"]}
|
@@ -0,0 +1,82 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, ButtonProps } from '@chakra-ui/react';
|
3
|
+
import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType } from '@saas-ui/forms';
|
4
|
+
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
5
|
+
|
6
|
+
interface BaseModalProps extends Omit<ModalProps, 'children'> {
|
7
|
+
/**
|
8
|
+
* The modal title
|
9
|
+
*/
|
10
|
+
title?: React.ReactNode;
|
11
|
+
/**
|
12
|
+
* The modal children
|
13
|
+
*/
|
14
|
+
children: MaybeRenderProp<{
|
15
|
+
isOpen: boolean;
|
16
|
+
onClose: () => void;
|
17
|
+
}>;
|
18
|
+
/**
|
19
|
+
* The modal footer
|
20
|
+
*/
|
21
|
+
footer?: React.ReactNode;
|
22
|
+
/**
|
23
|
+
* Hide the close button
|
24
|
+
*/
|
25
|
+
hideCloseButton?: boolean;
|
26
|
+
/**
|
27
|
+
* Hide the overlay
|
28
|
+
*/
|
29
|
+
hideOverlay?: boolean;
|
30
|
+
/**
|
31
|
+
* Props for the modal header
|
32
|
+
*/
|
33
|
+
headerProps?: ModalHeaderProps;
|
34
|
+
/**
|
35
|
+
* Props for the modal content
|
36
|
+
*/
|
37
|
+
contentProps?: ModalContentProps;
|
38
|
+
/**
|
39
|
+
* Props for the modal footer
|
40
|
+
*/
|
41
|
+
footerProps?: ModalFooterProps;
|
42
|
+
}
|
43
|
+
declare const BaseModal: React.FC<BaseModalProps>;
|
44
|
+
declare const Modal: React.FC<BaseModalProps>;
|
45
|
+
|
46
|
+
type FormDialogFieldOverrides = DefaultFieldOverrides & {
|
47
|
+
cancel?: ButtonProps;
|
48
|
+
};
|
49
|
+
interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
|
50
|
+
/**
|
51
|
+
* The modal footer, will be wrapped with `ModalFooter`.
|
52
|
+
* Defaults to a cancel and submit button.
|
53
|
+
*/
|
54
|
+
footer?: React.ReactNode;
|
55
|
+
/**
|
56
|
+
* A schema field resolver used to auto generate form fields.
|
57
|
+
*/
|
58
|
+
fieldResolver?: FieldResolver;
|
59
|
+
/**
|
60
|
+
* Field overrides
|
61
|
+
*/
|
62
|
+
fields?: FormDialogFieldOverrides;
|
63
|
+
}
|
64
|
+
/**
|
65
|
+
* @todo make this dynamic to support other schema types
|
66
|
+
*/
|
67
|
+
type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
|
68
|
+
type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React.ReactElement) & {
|
69
|
+
displayName?: string;
|
70
|
+
id?: string;
|
71
|
+
};
|
72
|
+
declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
|
73
|
+
/**
|
74
|
+
* Can be used to quickly request information from people without leaving the current page.
|
75
|
+
*
|
76
|
+
* @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
|
77
|
+
*/
|
78
|
+
declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
|
79
|
+
cancel?: ButtonProps;
|
80
|
+
}>;
|
81
|
+
|
82
|
+
export { type BaseModalProps as B, type DefaultFormType as D, type FormDialogFieldOverrides as F, Modal as M, type FormDialogProps as a, BaseModal as b, FormDialog as c, createFormDialog as d };
|
@@ -0,0 +1,82 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { ModalProps, ModalHeaderProps, ModalContentProps, ModalFooterProps, ButtonProps } from '@chakra-ui/react';
|
3
|
+
import { DefaultFieldOverrides, FieldValues, FieldProps, FormProps, FieldResolver, FormType } from '@saas-ui/forms';
|
4
|
+
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
5
|
+
|
6
|
+
interface BaseModalProps extends Omit<ModalProps, 'children'> {
|
7
|
+
/**
|
8
|
+
* The modal title
|
9
|
+
*/
|
10
|
+
title?: React.ReactNode;
|
11
|
+
/**
|
12
|
+
* The modal children
|
13
|
+
*/
|
14
|
+
children: MaybeRenderProp<{
|
15
|
+
isOpen: boolean;
|
16
|
+
onClose: () => void;
|
17
|
+
}>;
|
18
|
+
/**
|
19
|
+
* The modal footer
|
20
|
+
*/
|
21
|
+
footer?: React.ReactNode;
|
22
|
+
/**
|
23
|
+
* Hide the close button
|
24
|
+
*/
|
25
|
+
hideCloseButton?: boolean;
|
26
|
+
/**
|
27
|
+
* Hide the overlay
|
28
|
+
*/
|
29
|
+
hideOverlay?: boolean;
|
30
|
+
/**
|
31
|
+
* Props for the modal header
|
32
|
+
*/
|
33
|
+
headerProps?: ModalHeaderProps;
|
34
|
+
/**
|
35
|
+
* Props for the modal content
|
36
|
+
*/
|
37
|
+
contentProps?: ModalContentProps;
|
38
|
+
/**
|
39
|
+
* Props for the modal footer
|
40
|
+
*/
|
41
|
+
footerProps?: ModalFooterProps;
|
42
|
+
}
|
43
|
+
declare const BaseModal: React.FC<BaseModalProps>;
|
44
|
+
declare const Modal: React.FC<BaseModalProps>;
|
45
|
+
|
46
|
+
type FormDialogFieldOverrides = DefaultFieldOverrides & {
|
47
|
+
cancel?: ButtonProps;
|
48
|
+
};
|
49
|
+
interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
|
50
|
+
/**
|
51
|
+
* The modal footer, will be wrapped with `ModalFooter`.
|
52
|
+
* Defaults to a cancel and submit button.
|
53
|
+
*/
|
54
|
+
footer?: React.ReactNode;
|
55
|
+
/**
|
56
|
+
* A schema field resolver used to auto generate form fields.
|
57
|
+
*/
|
58
|
+
fieldResolver?: FieldResolver;
|
59
|
+
/**
|
60
|
+
* Field overrides
|
61
|
+
*/
|
62
|
+
fields?: FormDialogFieldOverrides;
|
63
|
+
}
|
64
|
+
/**
|
65
|
+
* @todo make this dynamic to support other schema types
|
66
|
+
*/
|
67
|
+
type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
|
68
|
+
type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React.ReactElement) & {
|
69
|
+
displayName?: string;
|
70
|
+
id?: string;
|
71
|
+
};
|
72
|
+
declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
|
73
|
+
/**
|
74
|
+
* Can be used to quickly request information from people without leaving the current page.
|
75
|
+
*
|
76
|
+
* @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
|
77
|
+
*/
|
78
|
+
declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
|
79
|
+
cancel?: ButtonProps;
|
80
|
+
}>;
|
81
|
+
|
82
|
+
export { type BaseModalProps as B, type DefaultFormType as D, type FormDialogFieldOverrides as F, Modal as M, type FormDialogProps as a, BaseModal as b, FormDialog as c, createFormDialog as d };
|
package/dist/index.d.mts
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import * as React$1 from 'react';
|
2
2
|
import * as _chakra_ui_react from '@chakra-ui/react';
|
3
|
-
import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps,
|
3
|
+
import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
|
4
4
|
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
5
|
-
import
|
6
|
-
|
5
|
+
import { B as BaseModalProps, F as FormDialogFieldOverrides, a as FormDialogProps } from './form-Cdu466OH.mjs';
|
6
|
+
export { b as BaseModal, D as DefaultFormType, c as FormDialog, M as Modal, d as createFormDialog } from './form-Cdu466OH.mjs';
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
8
|
-
import * as
|
8
|
+
import * as _saas_ui_forms from '@saas-ui/forms';
|
9
|
+
import { FormType, WithFields, FormProps, FieldValues } from '@saas-ui/forms';
|
9
10
|
import { YupFormType, AnyObjectSchema } from '@saas-ui/forms/yup';
|
10
11
|
import { z } from 'zod';
|
11
12
|
import { InferType } from 'yup';
|
@@ -108,46 +109,6 @@ interface DrawerProps extends BaseDrawerProps {
|
|
108
109
|
}
|
109
110
|
declare const Drawer: React$1.FC<DrawerProps>;
|
110
111
|
|
111
|
-
interface BaseModalProps extends Omit<ModalProps, 'children'> {
|
112
|
-
/**
|
113
|
-
* The modal title
|
114
|
-
*/
|
115
|
-
title?: React$1.ReactNode;
|
116
|
-
/**
|
117
|
-
* The modal children
|
118
|
-
*/
|
119
|
-
children: MaybeRenderProp<{
|
120
|
-
isOpen: boolean;
|
121
|
-
onClose: () => void;
|
122
|
-
}>;
|
123
|
-
/**
|
124
|
-
* The modal footer
|
125
|
-
*/
|
126
|
-
footer?: React$1.ReactNode;
|
127
|
-
/**
|
128
|
-
* Hide the close button
|
129
|
-
*/
|
130
|
-
hideCloseButton?: boolean;
|
131
|
-
/**
|
132
|
-
* Hide the overlay
|
133
|
-
*/
|
134
|
-
hideOverlay?: boolean;
|
135
|
-
/**
|
136
|
-
* Props for the modal header
|
137
|
-
*/
|
138
|
-
headerProps?: ModalHeaderProps;
|
139
|
-
/**
|
140
|
-
* Props for the modal content
|
141
|
-
*/
|
142
|
-
contentProps?: ModalContentProps;
|
143
|
-
/**
|
144
|
-
* Props for the modal footer
|
145
|
-
*/
|
146
|
-
footerProps?: ModalFooterProps;
|
147
|
-
}
|
148
|
-
declare const BaseModal: React$1.FC<BaseModalProps>;
|
149
|
-
declare const Modal: React$1.FC<BaseModalProps>;
|
150
|
-
|
151
112
|
interface MenuDialogProps extends BaseModalProps {
|
152
113
|
/**
|
153
114
|
* The modal footer, wrapped with `ModalFooter`
|
@@ -159,42 +120,6 @@ interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose'
|
|
159
120
|
}
|
160
121
|
declare const MenuDialogList: _chakra_ui_react.ComponentWithAs<"div", MenuDialogListProps>;
|
161
122
|
|
162
|
-
type FormDialogFieldOverrides = DefaultFieldOverrides & {
|
163
|
-
cancel?: ButtonProps;
|
164
|
-
};
|
165
|
-
interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
|
166
|
-
/**
|
167
|
-
* The modal footer, will be wrapped with `ModalFooter`.
|
168
|
-
* Defaults to a cancel and submit button.
|
169
|
-
*/
|
170
|
-
footer?: React$1.ReactNode;
|
171
|
-
/**
|
172
|
-
* A schema field resolver used to auto generate form fields.
|
173
|
-
*/
|
174
|
-
fieldResolver?: FieldResolver;
|
175
|
-
/**
|
176
|
-
* Field overrides
|
177
|
-
*/
|
178
|
-
fields?: FormDialogFieldOverrides;
|
179
|
-
}
|
180
|
-
/**
|
181
|
-
* @todo make this dynamic to support other schema types
|
182
|
-
*/
|
183
|
-
type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
|
184
|
-
type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React$1.ReactElement) & {
|
185
|
-
displayName?: string;
|
186
|
-
id?: string;
|
187
|
-
};
|
188
|
-
declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
|
189
|
-
/**
|
190
|
-
* Can be used to quickly request information from people without leaving the current page.
|
191
|
-
*
|
192
|
-
* @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
|
193
|
-
*/
|
194
|
-
declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
|
195
|
-
cancel?: ButtonProps;
|
196
|
-
}>;
|
197
|
-
|
198
123
|
type FormDialogHandler<T> = T extends YupFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'yup'> ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends ZodFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'zod'> ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides> ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : never;
|
199
124
|
type ZodHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'zod' = 'zod'> = <TSchema extends z.AnyZodObject = z.AnyZodObject, TFieldValues extends z.infer<TSchema> = z.infer<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
|
200
125
|
ref?: React.ForwardedRef<HTMLFormElement>;
|
@@ -228,7 +153,7 @@ declare const ModalsContext: React$1.Context<ModalsContextValue<{
|
|
228
153
|
modal: React$1.FC<BaseModalProps>;
|
229
154
|
menu: React$1.FC<MenuDialogProps>;
|
230
155
|
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
231
|
-
cancel?:
|
156
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
232
157
|
}>;
|
233
158
|
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
|
234
159
|
interface ModalsProviderProps<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>> {
|
@@ -298,7 +223,7 @@ declare const useModalsContext: () => ModalsContextValue<{
|
|
298
223
|
modal: React$1.FC<BaseModalProps>;
|
299
224
|
menu: React$1.FC<MenuDialogProps>;
|
300
225
|
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
301
|
-
cancel?:
|
226
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
302
227
|
}>;
|
303
228
|
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null;
|
304
229
|
declare const useModals: () => ModalsContextValue<{
|
@@ -308,7 +233,7 @@ declare const useModals: () => ModalsContextValue<{
|
|
308
233
|
modal: React$1.FC<BaseModalProps>;
|
309
234
|
menu: React$1.FC<MenuDialogProps>;
|
310
235
|
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
311
|
-
cancel?:
|
236
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
312
237
|
}>;
|
313
238
|
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer">;
|
314
239
|
|
@@ -324,9 +249,9 @@ declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(o
|
|
324
249
|
modal: React$1.FC<BaseModalProps>;
|
325
250
|
menu: React$1.FC<MenuDialogProps>;
|
326
251
|
form: _saas_ui_forms.FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
327
|
-
cancel?:
|
252
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
328
253
|
}>;
|
329
254
|
} & TModalDefs>;
|
330
255
|
};
|
331
256
|
|
332
|
-
export { BaseDrawer, type BaseDrawerProps,
|
257
|
+
export { BaseDrawer, type BaseDrawerProps, BaseModalProps, ConfirmDialog, type ConfirmDialogOptions, type ConfirmDialogProps, type CreateModalsOptions, Drawer, type DrawerOptions, type DrawerProps, FormDialogFieldOverrides, type FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, type MenuDialogListProps, type MenuDialogOptions, type MenuDialogProps, type ModalConfig, type ModalId, type ModalScopes, ModalsContext, type ModalsContextValue, ModalsProvider, type ModalsProviderProps, type OpenOptions, createModals, useModals, useModalsContext };
|
package/dist/index.d.ts
CHANGED
@@ -1,11 +1,12 @@
|
|
1
1
|
import * as React$1 from 'react';
|
2
2
|
import * as _chakra_ui_react from '@chakra-ui/react';
|
3
|
-
import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps,
|
3
|
+
import { AlertDialogProps, ButtonProps, ButtonGroupProps, DrawerProps as DrawerProps$1, ModalHeaderProps, ModalContentProps, ModalFooterProps, MenuListProps } from '@chakra-ui/react';
|
4
4
|
import { MaybeRenderProp } from '@chakra-ui/react-utils';
|
5
|
-
import
|
6
|
-
|
5
|
+
import { B as BaseModalProps, F as FormDialogFieldOverrides, a as FormDialogProps } from './form-Cdu466OH.js';
|
6
|
+
export { b as BaseModal, D as DefaultFormType, c as FormDialog, M as Modal, d as createFormDialog } from './form-Cdu466OH.js';
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
8
|
-
import * as
|
8
|
+
import * as _saas_ui_forms from '@saas-ui/forms';
|
9
|
+
import { FormType, WithFields, FormProps, FieldValues } from '@saas-ui/forms';
|
9
10
|
import { YupFormType, AnyObjectSchema } from '@saas-ui/forms/yup';
|
10
11
|
import { z } from 'zod';
|
11
12
|
import { InferType } from 'yup';
|
@@ -108,46 +109,6 @@ interface DrawerProps extends BaseDrawerProps {
|
|
108
109
|
}
|
109
110
|
declare const Drawer: React$1.FC<DrawerProps>;
|
110
111
|
|
111
|
-
interface BaseModalProps extends Omit<ModalProps, 'children'> {
|
112
|
-
/**
|
113
|
-
* The modal title
|
114
|
-
*/
|
115
|
-
title?: React$1.ReactNode;
|
116
|
-
/**
|
117
|
-
* The modal children
|
118
|
-
*/
|
119
|
-
children: MaybeRenderProp<{
|
120
|
-
isOpen: boolean;
|
121
|
-
onClose: () => void;
|
122
|
-
}>;
|
123
|
-
/**
|
124
|
-
* The modal footer
|
125
|
-
*/
|
126
|
-
footer?: React$1.ReactNode;
|
127
|
-
/**
|
128
|
-
* Hide the close button
|
129
|
-
*/
|
130
|
-
hideCloseButton?: boolean;
|
131
|
-
/**
|
132
|
-
* Hide the overlay
|
133
|
-
*/
|
134
|
-
hideOverlay?: boolean;
|
135
|
-
/**
|
136
|
-
* Props for the modal header
|
137
|
-
*/
|
138
|
-
headerProps?: ModalHeaderProps;
|
139
|
-
/**
|
140
|
-
* Props for the modal content
|
141
|
-
*/
|
142
|
-
contentProps?: ModalContentProps;
|
143
|
-
/**
|
144
|
-
* Props for the modal footer
|
145
|
-
*/
|
146
|
-
footerProps?: ModalFooterProps;
|
147
|
-
}
|
148
|
-
declare const BaseModal: React$1.FC<BaseModalProps>;
|
149
|
-
declare const Modal: React$1.FC<BaseModalProps>;
|
150
|
-
|
151
112
|
interface MenuDialogProps extends BaseModalProps {
|
152
113
|
/**
|
153
114
|
* The modal footer, wrapped with `ModalFooter`
|
@@ -159,42 +120,6 @@ interface MenuDialogListProps extends Omit<BaseModalProps, 'isOpen' | 'onClose'
|
|
159
120
|
}
|
160
121
|
declare const MenuDialogList: _chakra_ui_react.ComponentWithAs<"div", MenuDialogListProps>;
|
161
122
|
|
162
|
-
type FormDialogFieldOverrides = DefaultFieldOverrides & {
|
163
|
-
cancel?: ButtonProps;
|
164
|
-
};
|
165
|
-
interface FormDialogProps<TSchema = any, TFieldValues extends FieldValues = FieldValues, TContext extends object = object, TExtraFieldProps extends object = object, TFieldTypes = FieldProps<TFieldValues>> extends Omit<BaseModalProps, 'children'>, Pick<FormProps<TSchema, TFieldValues, TContext, TExtraFieldProps, TFieldTypes>, 'schema' | 'defaultValues' | 'values' | 'context' | 'onChange' | 'onSubmit' | 'onError' | 'resolver' | 'mode' | 'reValidateMode' | 'shouldFocusError' | 'shouldUnregister' | 'shouldUseNativeValidation' | 'criteriaMode' | 'delayError' | 'resetOptions' | 'formRef' | 'children'> {
|
166
|
-
/**
|
167
|
-
* The modal footer, will be wrapped with `ModalFooter`.
|
168
|
-
* Defaults to a cancel and submit button.
|
169
|
-
*/
|
170
|
-
footer?: React$1.ReactNode;
|
171
|
-
/**
|
172
|
-
* A schema field resolver used to auto generate form fields.
|
173
|
-
*/
|
174
|
-
fieldResolver?: FieldResolver;
|
175
|
-
/**
|
176
|
-
* Field overrides
|
177
|
-
*/
|
178
|
-
fields?: FormDialogFieldOverrides;
|
179
|
-
}
|
180
|
-
/**
|
181
|
-
* @todo make this dynamic to support other schema types
|
182
|
-
*/
|
183
|
-
type MergeDialogProps<T> = T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraFieldProps, infer ExtraOverrides> ? FormType<FieldDefs, ExtraProps & Omit<BaseModalProps, 'children'>, ExtraFieldProps, ExtraOverrides & FormDialogFieldOverrides> : never;
|
184
|
-
type DefaultFormType<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides> = (<TSchema = unknown, TFieldValues extends Record<string, any> = any, TContext extends object = object>(props: any) => React$1.ReactElement) & {
|
185
|
-
displayName?: string;
|
186
|
-
id?: string;
|
187
|
-
};
|
188
|
-
declare function createFormDialog<FieldDefs = any, ExtraProps = object, ExtraFieldProps extends object = object, ExtraOverrides = FormDialogFieldOverrides, TFormType extends DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides> = DefaultFormType<FieldDefs, ExtraProps, ExtraFieldProps, ExtraOverrides>>(Form: TFormType): MergeDialogProps<TFormType>;
|
189
|
-
/**
|
190
|
-
* Can be used to quickly request information from people without leaving the current page.
|
191
|
-
*
|
192
|
-
* @see Docs https://saas-ui.dev/docs/components/overlay/form-dialog
|
193
|
-
*/
|
194
|
-
declare const FormDialog: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & DefaultFieldOverrides & {
|
195
|
-
cancel?: ButtonProps;
|
196
|
-
}>;
|
197
|
-
|
198
123
|
type FormDialogHandler<T> = T extends YupFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'yup'> ? YupHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends ZodFormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides, 'zod'> ? ZodHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : T extends FormType<infer FieldDefs, infer ExtraProps, infer ExtraOverrides> ? FormHandler<FieldDefs, object, ExtraOverrides & FormDialogFieldOverrides> : never;
|
199
124
|
type ZodHandler<FieldDefs, ExtraProps = object, ExtraOverrides = object, Type extends 'zod' = 'zod'> = <TSchema extends z.AnyZodObject = z.AnyZodObject, TFieldValues extends z.infer<TSchema> = z.infer<TSchema>, TContext extends object = object>(props: WithFields<FormProps<TSchema, TFieldValues, TContext>, FieldDefs, ExtraOverrides> & {
|
200
125
|
ref?: React.ForwardedRef<HTMLFormElement>;
|
@@ -228,7 +153,7 @@ declare const ModalsContext: React$1.Context<ModalsContextValue<{
|
|
228
153
|
modal: React$1.FC<BaseModalProps>;
|
229
154
|
menu: React$1.FC<MenuDialogProps>;
|
230
155
|
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
231
|
-
cancel?:
|
156
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
232
157
|
}>;
|
233
158
|
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null>;
|
234
159
|
interface ModalsProviderProps<TModals extends Record<string, React$1.FC<any>> = Record<string, React$1.FC<any>>> {
|
@@ -298,7 +223,7 @@ declare const useModalsContext: () => ModalsContextValue<{
|
|
298
223
|
modal: React$1.FC<BaseModalProps>;
|
299
224
|
menu: React$1.FC<MenuDialogProps>;
|
300
225
|
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
301
|
-
cancel?:
|
226
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
302
227
|
}>;
|
303
228
|
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer"> | null;
|
304
229
|
declare const useModals: () => ModalsContextValue<{
|
@@ -308,7 +233,7 @@ declare const useModals: () => ModalsContextValue<{
|
|
308
233
|
modal: React$1.FC<BaseModalProps>;
|
309
234
|
menu: React$1.FC<MenuDialogProps>;
|
310
235
|
form: FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
311
|
-
cancel?:
|
236
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
312
237
|
}>;
|
313
238
|
}, "confirm" | "form" | "menu" | "alert" | "modal" | "drawer">;
|
314
239
|
|
@@ -324,9 +249,9 @@ declare const createModals: <TModalDefs extends Record<string, React.FC<any>>>(o
|
|
324
249
|
modal: React$1.FC<BaseModalProps>;
|
325
250
|
menu: React$1.FC<MenuDialogProps>;
|
326
251
|
form: _saas_ui_forms.FormType<unknown, object & Omit<BaseModalProps, "children">, any, object & _saas_ui_forms.DefaultFieldOverrides & {
|
327
|
-
cancel?:
|
252
|
+
cancel?: _chakra_ui_react.ButtonProps;
|
328
253
|
}>;
|
329
254
|
} & TModalDefs>;
|
330
255
|
};
|
331
256
|
|
332
|
-
export { BaseDrawer, type BaseDrawerProps,
|
257
|
+
export { BaseDrawer, type BaseDrawerProps, BaseModalProps, ConfirmDialog, type ConfirmDialogOptions, type ConfirmDialogProps, type CreateModalsOptions, Drawer, type DrawerOptions, type DrawerProps, FormDialogFieldOverrides, type FormDialogOptions, FormDialogProps, MenuDialog, MenuDialogList, type MenuDialogListProps, type MenuDialogOptions, type MenuDialogProps, type ModalConfig, type ModalId, type ModalScopes, ModalsContext, type ModalsContextValue, ModalsProvider, type ModalsProviderProps, type OpenOptions, createModals, useModals, useModalsContext };
|