@saas-ui/forms 2.3.8 → 2.3.10
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 +21 -5
- package/dist/index.js +4 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +10 -5
- package/dist/index.mjs.map +1 -1
- package/dist/yup/index.js +7 -232
- package/dist/yup/index.js.map +1 -1
- package/dist/yup/index.mjs +9 -286
- package/dist/yup/index.mjs.map +1 -1
- package/dist/zod/index.js +9 -234
- package/dist/zod/index.js.map +1 -1
- package/dist/zod/index.mjs +9 -286
- package/dist/zod/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/layout.tsx +9 -3
- package/src/submit-button.tsx +2 -2
package/dist/zod/index.mjs
CHANGED
@@ -1,21 +1,4 @@
|
|
1
1
|
'use client'
|
2
|
-
var __defProp = Object.defineProperty;
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
6
|
-
var __export = (target, all) => {
|
7
|
-
for (var name in all)
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
9
|
-
};
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
12
|
-
for (let key of __getOwnPropNames(from))
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
15
|
-
}
|
16
|
-
return to;
|
17
|
-
};
|
18
|
-
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
19
2
|
|
20
3
|
// zod/src/zod-resolver.ts
|
21
4
|
import { zodResolver } from "@hookform/resolvers/zod";
|
@@ -117,272 +100,12 @@ var createZodForm = (options) => {
|
|
117
100
|
return ZodForm;
|
118
101
|
};
|
119
102
|
|
120
|
-
// ../saas-ui-modals/dist/index.mjs
|
121
|
-
import * as React3 from "react";
|
122
|
-
import {
|
123
|
-
AlertDialog,
|
124
|
-
AlertDialogBody,
|
125
|
-
AlertDialogFooter,
|
126
|
-
AlertDialogHeader,
|
127
|
-
AlertDialogContent,
|
128
|
-
AlertDialogOverlay,
|
129
|
-
ButtonGroup,
|
130
|
-
Button
|
131
|
-
} from "@chakra-ui/react";
|
132
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
133
|
-
import {
|
134
|
-
Drawer as ChakraDrawer,
|
135
|
-
DrawerOverlay,
|
136
|
-
DrawerContent,
|
137
|
-
DrawerHeader,
|
138
|
-
DrawerFooter,
|
139
|
-
DrawerBody,
|
140
|
-
DrawerCloseButton
|
141
|
-
} from "@chakra-ui/react";
|
142
|
-
import { runIfFn } from "@chakra-ui/utils";
|
143
|
-
import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
144
|
-
import {
|
145
|
-
Modal as ChakraModal,
|
146
|
-
ModalOverlay,
|
147
|
-
ModalContent,
|
148
|
-
ModalHeader,
|
149
|
-
ModalFooter,
|
150
|
-
ModalBody,
|
151
|
-
ModalCloseButton
|
152
|
-
} from "@chakra-ui/react";
|
153
|
-
import { runIfFn as runIfFn2 } from "@chakra-ui/utils";
|
154
|
-
import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
155
|
-
import {
|
156
|
-
ModalFooter as ModalFooter2,
|
157
|
-
chakra,
|
158
|
-
forwardRef,
|
159
|
-
useMenuContext,
|
160
|
-
useMenuList,
|
161
|
-
createStylesContext,
|
162
|
-
useMultiStyleConfig,
|
163
|
-
Menu,
|
164
|
-
useBreakpointValue as useBreakpointValue2
|
165
|
-
} from "@chakra-ui/react";
|
166
|
-
import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
|
167
|
-
import {
|
168
|
-
ModalBody as ModalBody2,
|
169
|
-
ModalFooter as ModalFooter3,
|
170
|
-
Button as Button2,
|
171
|
-
forwardRef as forwardRef2
|
172
|
-
} from "@chakra-ui/react";
|
173
|
-
|
174
|
-
// ../saas-ui-react-utils/dist/index.mjs
|
175
|
-
var dist_exports = {};
|
176
|
-
__export(dist_exports, {
|
177
|
-
getChildOfType: () => getChildOfType,
|
178
|
-
getChildrenOfType: () => getChildrenOfType,
|
179
|
-
useResponsiveValue: () => useResponsiveValue
|
180
|
-
});
|
181
|
-
__reExport(dist_exports, utils_star);
|
182
|
-
import * as React from "react";
|
183
|
-
import * as React2 from "react";
|
184
|
-
import {
|
185
|
-
useTheme,
|
186
|
-
useBreakpointValue
|
187
|
-
} from "@chakra-ui/react";
|
188
|
-
import * as utils_star from "@chakra-ui/utils";
|
189
|
-
function getChildOfType(children, type) {
|
190
|
-
return React.Children.toArray(children).find(
|
191
|
-
(item) => item.type === type
|
192
|
-
);
|
193
|
-
}
|
194
|
-
function getChildrenOfType(children, type) {
|
195
|
-
return React2.Children.toArray(children).filter(
|
196
|
-
(item) => Array.isArray(type) ? type.some((component) => component === item.type) : item.type === type
|
197
|
-
);
|
198
|
-
}
|
199
|
-
var normalize = (variant, toArray) => {
|
200
|
-
if (Array.isArray(variant))
|
201
|
-
return variant;
|
202
|
-
else if (typeof variant === "object")
|
203
|
-
return toArray == null ? void 0 : toArray(variant);
|
204
|
-
if (variant != null)
|
205
|
-
return [variant];
|
206
|
-
return [];
|
207
|
-
};
|
208
|
-
var useResponsiveValue = (value, options) => {
|
209
|
-
var _a;
|
210
|
-
const theme = useTheme();
|
211
|
-
const normalized = normalize(value, (_a = theme.__breakpoints) == null ? void 0 : _a.toArrayValue);
|
212
|
-
return useBreakpointValue(normalized, options);
|
213
|
-
};
|
214
|
-
|
215
|
-
// ../saas-ui-modals/dist/index.mjs
|
216
|
-
import {
|
217
|
-
Form,
|
218
|
-
AutoFields,
|
219
|
-
SubmitButton
|
220
|
-
} from "@saas-ui/forms";
|
221
|
-
import { Fragment, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
222
|
-
import * as React22 from "react";
|
223
|
-
import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
|
224
|
-
import { jsx as jsx7 } from "react/jsx-runtime";
|
225
|
-
var BaseModal = (props) => {
|
226
|
-
const {
|
227
|
-
title,
|
228
|
-
footer,
|
229
|
-
children,
|
230
|
-
isOpen,
|
231
|
-
onClose,
|
232
|
-
hideCloseButton,
|
233
|
-
hideOverlay,
|
234
|
-
headerProps,
|
235
|
-
contentProps,
|
236
|
-
footerProps,
|
237
|
-
...rest
|
238
|
-
} = props;
|
239
|
-
return /* @__PURE__ */ jsxs3(ChakraModal, { isOpen, onClose, ...rest, children: [
|
240
|
-
!hideOverlay && /* @__PURE__ */ jsx3(ModalOverlay, {}),
|
241
|
-
/* @__PURE__ */ jsxs3(ModalContent, { ...contentProps, children: [
|
242
|
-
title && /* @__PURE__ */ jsx3(ModalHeader, { ...headerProps, children: title }),
|
243
|
-
!hideCloseButton && /* @__PURE__ */ jsx3(ModalCloseButton, {}),
|
244
|
-
runIfFn2(children, {
|
245
|
-
isOpen,
|
246
|
-
onClose
|
247
|
-
}),
|
248
|
-
footer && /* @__PURE__ */ jsx3(ModalFooter, { ...footerProps, children: footer })
|
249
|
-
] })
|
250
|
-
] });
|
251
|
-
};
|
252
|
-
var [StylesProvider] = createStylesContext("SuiMenuDialog");
|
253
|
-
var MenuDialogList = forwardRef(
|
254
|
-
(props, forwardedRef) => {
|
255
|
-
const {
|
256
|
-
rootProps,
|
257
|
-
title,
|
258
|
-
footer,
|
259
|
-
initialFocusRef,
|
260
|
-
hideCloseButton,
|
261
|
-
motionPreset = "slideInBottom",
|
262
|
-
isCentered: isCenteredProp,
|
263
|
-
...rest
|
264
|
-
} = props;
|
265
|
-
const { isOpen, onClose, menuRef } = useMenuContext();
|
266
|
-
const { ref, ...ownProps } = useMenuList(rest, forwardedRef);
|
267
|
-
const styles = useMultiStyleConfig("Menu", props);
|
268
|
-
const isCentered = useBreakpointValue2({ base: true, md: false });
|
269
|
-
return /* @__PURE__ */ jsxs4(
|
270
|
-
BaseModal,
|
271
|
-
{
|
272
|
-
isOpen,
|
273
|
-
onClose,
|
274
|
-
initialFocusRef: initialFocusRef || menuRef,
|
275
|
-
title,
|
276
|
-
hideCloseButton,
|
277
|
-
motionPreset,
|
278
|
-
isCentered: isCenteredProp != null ? isCenteredProp : isCentered,
|
279
|
-
contentProps: { mx: 4 },
|
280
|
-
children: [
|
281
|
-
/* @__PURE__ */ jsx4(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx4(
|
282
|
-
chakra.div,
|
283
|
-
{
|
284
|
-
...ownProps,
|
285
|
-
ref,
|
286
|
-
__css: {
|
287
|
-
outline: 0,
|
288
|
-
maxHeight: "80vh",
|
289
|
-
// can override this in theme
|
290
|
-
overflowY: "auto",
|
291
|
-
// can override this in theme
|
292
|
-
...styles.list,
|
293
|
-
boxShadow: "none",
|
294
|
-
border: 0,
|
295
|
-
_dark: {
|
296
|
-
/* @ts-expect-error */
|
297
|
-
...styles.list._dark || {},
|
298
|
-
boxShadow: "none"
|
299
|
-
}
|
300
|
-
}
|
301
|
-
}
|
302
|
-
) }),
|
303
|
-
footer && /* @__PURE__ */ jsx4(ModalFooter2, { children: footer })
|
304
|
-
]
|
305
|
-
}
|
306
|
-
);
|
307
|
-
}
|
308
|
-
);
|
309
|
-
var useFormProps = (props) => {
|
310
|
-
const {
|
311
|
-
schema,
|
312
|
-
resolver,
|
313
|
-
fieldResolver,
|
314
|
-
defaultValues,
|
315
|
-
values,
|
316
|
-
context,
|
317
|
-
onChange,
|
318
|
-
onSubmit,
|
319
|
-
onError,
|
320
|
-
mode,
|
321
|
-
reValidateMode,
|
322
|
-
shouldFocusError = true,
|
323
|
-
shouldUnregister,
|
324
|
-
shouldUseNativeValidation,
|
325
|
-
criteriaMode,
|
326
|
-
delayError = 100,
|
327
|
-
fields,
|
328
|
-
formRef,
|
329
|
-
...modalProps
|
330
|
-
} = props;
|
331
|
-
const formProps = {
|
332
|
-
schema,
|
333
|
-
resolver,
|
334
|
-
defaultValues,
|
335
|
-
values,
|
336
|
-
context,
|
337
|
-
onChange,
|
338
|
-
onSubmit,
|
339
|
-
onError,
|
340
|
-
mode,
|
341
|
-
reValidateMode,
|
342
|
-
shouldFocusError,
|
343
|
-
shouldUnregister,
|
344
|
-
shouldUseNativeValidation,
|
345
|
-
criteriaMode,
|
346
|
-
delayError,
|
347
|
-
fields,
|
348
|
-
formRef
|
349
|
-
};
|
350
|
-
return { modalProps, formProps, fields };
|
351
|
-
};
|
352
|
-
function createFormDialog(Form22) {
|
353
|
-
const Dialog = forwardRef2((props, ref) => {
|
354
|
-
const { isOpen, onClose, footer, children, ...rest } = props;
|
355
|
-
const { modalProps, formProps, fields } = useFormProps(rest);
|
356
|
-
return /* @__PURE__ */ jsx5(BaseModal, { ...modalProps, isOpen, onClose, children: /* @__PURE__ */ jsx5(Form22, { ref, ...formProps, children: (form) => {
|
357
|
-
var _a, _b;
|
358
|
-
return /* @__PURE__ */ jsxs5(Fragment, { children: [
|
359
|
-
/* @__PURE__ */ jsx5(ModalBody2, { children: (0, dist_exports.runIfFn)(children, form) || /* @__PURE__ */ jsx5(AutoFields, {}) }),
|
360
|
-
footer || /* @__PURE__ */ jsxs5(ModalFooter3, { children: [
|
361
|
-
/* @__PURE__ */ jsx5(
|
362
|
-
Button2,
|
363
|
-
{
|
364
|
-
variant: "ghost",
|
365
|
-
mr: 3,
|
366
|
-
onClick: onClose,
|
367
|
-
...fields == null ? void 0 : fields.cancel,
|
368
|
-
children: (_b = (_a = fields == null ? void 0 : fields.cancel) == null ? void 0 : _a.children) != null ? _b : "Cancel"
|
369
|
-
}
|
370
|
-
),
|
371
|
-
/* @__PURE__ */ jsx5(SubmitButton, { ...fields == null ? void 0 : fields.submit })
|
372
|
-
] })
|
373
|
-
] });
|
374
|
-
} }) });
|
375
|
-
});
|
376
|
-
Dialog.displayName = `${Form22.displayName || Form22.name}Dialog`;
|
377
|
-
Dialog.id = Form22.id;
|
378
|
-
return Dialog;
|
379
|
-
}
|
380
|
-
var FormDialog = createFormDialog(Form);
|
381
|
-
var ModalsContext = React22.createContext(null);
|
382
|
-
|
383
103
|
// zod/src/create-zod-dialog.ts
|
384
|
-
|
385
|
-
|
104
|
+
import {
|
105
|
+
createFormDialog
|
106
|
+
} from "@saas-ui/modals";
|
107
|
+
function createZodFormDialog(Form2) {
|
108
|
+
return createFormDialog(Form2);
|
386
109
|
}
|
387
110
|
|
388
111
|
// zod/src/create-zod-step-form.ts
|
@@ -401,12 +124,12 @@ var createZodStepForm = (options) => {
|
|
401
124
|
};
|
402
125
|
|
403
126
|
// zod/src/index.ts
|
404
|
-
var
|
127
|
+
var Form = createZodForm();
|
405
128
|
var StepForm = createZodStepForm();
|
406
|
-
var
|
129
|
+
var FormDialog = createZodFormDialog(Form);
|
407
130
|
export {
|
408
|
-
|
409
|
-
|
131
|
+
Form,
|
132
|
+
FormDialog,
|
410
133
|
StepForm,
|
411
134
|
createZodForm,
|
412
135
|
createZodFormDialog,
|
package/dist/zod/index.mjs.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../../saas-ui-modals/src/dialog.tsx","../../../saas-ui-modals/src/drawer.tsx","../../../saas-ui-modals/src/modal.tsx","../../../saas-ui-modals/src/menu.tsx","../../../saas-ui-modals/src/form.tsx","../../../saas-ui-modals/src/provider.tsx","../../../saas-ui-modals/src/default-modals.ts","../../../saas-ui-modals/src/create-modals.tsx","../../../saas-ui-react-utils/src/get-child-of-type.ts","../../../saas-ui-react-utils/src/get-children-of-type.ts","../../../saas-ui-react-utils/src/use-responsive-value.ts","../../../saas-ui-react-utils/src/index.ts","../../zod/src/create-zod-dialog.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.ts"],"sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type ExtraProps = {\n min?: number\n max?: number\n options?: { label: string; value: string }[]\n}\n\nconst getType = (\n field: z.ZodTypeAny\n): 'array' | 'object' | 'number' | 'date' | 'select' | 'text' => {\n if (field._def.typeName === 'ZodDefault') {\n return getType(field._def.innerType)\n }\n\n switch (field._def.typeName) {\n case 'ZodArray':\n return 'array'\n case 'ZodObject':\n return 'object'\n case 'ZodNumber':\n return 'number'\n case 'ZodDate':\n return 'date'\n case 'ZodEnum':\n return 'select'\n case 'ZodString':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n const fields: FieldProps[] = []\n\n let schemaFields: Record<string, any> = {}\n if (schema._def.typeName === 'ZodArray') {\n schemaFields = schema._def.type.shape\n } else if (schema._def.typeName === 'ZodObject') {\n schemaFields = schema._def.shape()\n } else {\n return fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const def =\n field._def.typeName === 'ZodDefault'\n ? field._def.innerType._def\n : field._def\n\n const props: ExtraProps = {}\n if (def.typeName === 'ZodArray') {\n props.min = getArrayOption(field, 'minLength')\n props.max = getArrayOption(field, 'maxLength')\n } else if (def.typeName === 'ZodEnum') {\n props.options = def.values.map((value: string) => {\n return { label: value, value }\n })\n }\n\n const meta = field.description && zodParseMeta(field.description)\n\n fields.push({\n name,\n label: meta?.label || field.description || name,\n type: meta?.type || getType(field),\n defaultValue: field._def.defaultValue?.(),\n ...props,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport interface ZodMeta {\n /**\n * The label of the field\n */\n label: string\n /**\n * The type of the field\n */\n type?: string\n /**\n * Object field column count\n */\n columns?: number\n /**\n * Array field min rows\n */\n min?: number\n /**\n * Array field max rows\n */\n max?: number\n [key: string]: any\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n try {\n return JSON.parse(meta)\n } catch (e) {\n return meta\n }\n}\n","import {\n createForm,\n CreateFormProps,\n WithFields,\n FormProps,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport type ZodFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object,\n Type extends 'zod' = 'zod'\n> = (<\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,\n TContext extends object = object\n>(\n props: WithFields<\n FormProps<TSchema, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n const ZodForm = createForm({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodForm.displayName = 'ZodForm'\n ZodForm.id = 'ZodForm'\n\n return ZodForm as ZodFormType<FieldDefs>\n}\n","import * as React from 'react'\n\nimport {\n AlertDialog,\n AlertDialogBody,\n AlertDialogFooter,\n AlertDialogHeader,\n AlertDialogContent,\n AlertDialogOverlay,\n AlertDialogProps,\n ButtonGroup,\n ButtonGroupProps,\n Button,\n ButtonProps,\n} from '@chakra-ui/react'\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?: () => Promise<void> | 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 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 && onClose()\n /* eslint-disable no-useless-catch */\n } catch (e: any) {\n throw e\n } finally {\n setIsLoading(false)\n }\n /* eslint-enable */\n }\n console.log(isLoading)\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 {cancelProps?.children || cancelLabel}\n </Button>\n <Button\n ref={confirmRef}\n isLoading={isLoading}\n {...confirmProps}\n onClick={handleConfirm}\n >\n {confirmProps?.children || confirmLabel}\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 ModalHeaderProps,\n ModalContentProps,\n ModalFooterProps,\n} from '@chakra-ui/react'\nimport { MaybeRenderProp } from '@chakra-ui/react-utils'\nimport { runIfFn } from '@chakra-ui/utils'\n\nexport interface BaseDrawerProps extends Omit<ChakraDrawerProps, 'children'> {\n /**\n * The drawer 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 overflow\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 BaseDrawer: React.FC<BaseDrawerProps> = (props) => {\n const {\n title,\n children,\n footer,\n isOpen,\n onClose,\n hideCloseButton,\n hideOverlay,\n headerProps,\n contentProps,\n footerProps,\n ...rest\n } = props\n return (\n <ChakraDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n {!hideOverlay && <DrawerOverlay />}\n <DrawerContent {...contentProps}>\n {title && <DrawerHeader {...headerProps}>{title}</DrawerHeader>}\n {!hideCloseButton && <DrawerCloseButton />}\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n {footer && <DrawerFooter {...footerProps}>{footer}</DrawerFooter>}\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 { children, isOpen, onClose, ...rest } = props\n return (\n <BaseDrawer isOpen={isOpen} onClose={onClose} {...rest}>\n <DrawerBody>\n {runIfFn(children, {\n isOpen,\n onClose,\n })}\n </DrawerBody>\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 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 ModalFooter,\n chakra,\n forwardRef,\n useMenuContext,\n useMenuList,\n createStylesContext,\n useMultiStyleConfig,\n Menu,\n MenuListProps,\n useBreakpointValue,\n} from '@chakra-ui/react'\n\nimport { BaseModal, BaseModalProps } from './modal'\n\nconst [StylesProvider] = createStylesContext('SuiMenuDialog')\n\nexport interface MenuDialogProps extends BaseModalProps {\n /**\n * The modal footer, wrapped with `ModalFooter`\n */\n footer?: React.ReactNode\n}\n\nexport const MenuDialog: React.FC<MenuDialogProps> = (props) => {\n const { onClose, onCloseComplete, ...rest } = props\n\n return (\n <Menu\n variant=\"dialog\"\n onClose={() => {\n onClose?.()\n // Not supported in Menu, so we call it here instead\n // @todo Refactor this in v2?\n onCloseComplete?.()\n }}\n {...rest}\n />\n )\n}\n\nexport interface MenuDialogListProps\n extends Omit<\n BaseModalProps,\n 'isOpen' | 'onClose' | 'children' | 'scrollBehavior'\n >,\n Omit<MenuListProps, 'title'> {}\n\nexport const MenuDialogList = forwardRef<MenuDialogListProps, 'div'>(\n (props, forwardedRef) => {\n const {\n rootProps,\n title,\n footer,\n initialFocusRef,\n hideCloseButton,\n motionPreset = 'slideInBottom',\n isCentered: isCenteredProp,\n ...rest\n } = props\n\n const { isOpen, onClose, menuRef } = useMenuContext()\n\n const { ref, ...ownProps } = useMenuList(rest, forwardedRef)\n\n const styles = useMultiStyleConfig('Menu', props)\n\n const isCentered = useBreakpointValue({ base: true, md: false })\n\n return (\n <BaseModal\n isOpen={isOpen}\n onClose={onClose}\n initialFocusRef={initialFocusRef || menuRef}\n title={title}\n hideCloseButton={hideCloseButton}\n motionPreset={motionPreset}\n isCentered={isCenteredProp ?? isCentered}\n contentProps={{ mx: 4 }}\n >\n {/* We forward the styles again, otherwise the modal styles will be picked up */}\n <StylesProvider value={styles}>\n <chakra.div\n {...ownProps}\n ref={ref as React.Ref<HTMLDivElement>}\n __css={{\n outline: 0,\n maxHeight: '80vh', // can override this in theme\n overflowY: 'auto', // can override this in theme\n ...styles.list,\n boxShadow: 'none',\n border: 0,\n _dark: {\n /* @ts-expect-error */\n ...(styles.list._dark || {}),\n boxShadow: 'none',\n },\n }}\n />\n </StylesProvider>\n {footer && <ModalFooter>{footer}</ModalFooter>}\n </BaseModal>\n )\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 TFieldTypes = FieldProps<TFieldValues>\n> extends Omit<BaseModalProps, 'children'>,\n Pick<\n FormProps<TSchema, TFieldValues, TContext, 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> = T extends FormType<\n infer FieldDefs,\n infer ExtraProps,\n infer ExtraOverrides\n>\n ? FormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n : never\n\ntype IsSchemaType<T, Schema, FieldDefs> = 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 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 ExtraOverrides = FormDialogFieldOverrides,\n TFormType extends DefaultFormType<\n FieldDefs,\n ExtraProps,\n ExtraOverrides\n > = DefaultFormType<FieldDefs, ExtraProps, 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 ref={ref} {...(formProps as any)}>\n {(form: any) => (\n <>\n <ModalBody>{runIfFn(children, form) || <AutoFields />}</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","import * as React from 'react'\n\nimport { BaseModalProps } from './modal'\nimport { DrawerProps } from './drawer'\nimport { ConfirmDialogProps } from './dialog'\nimport { MenuDialogProps } from './menu'\nimport { FormDialogProps } from './form'\nimport { defaultModals } from './default-modals'\nimport { FieldValues, FormType } from '@saas-ui/forms'\nimport { FormDialogHandler, FormHandler } from './types'\n\nexport interface ModalsContextValue<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>,\n TTypes extends Extract<keyof TModals, string> = Extract<keyof TModals, string>\n> {\n open: <T extends OpenOptions<TTypes>>(\n componentOrOptions: T extends {\n component: infer TComponent extends React.FC<any>\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TComponent>>\n : T extends {\n type: infer TType extends keyof TModals\n }\n ? WithModalOptions<React.ComponentPropsWithRef<TModals[TType]>>\n : T,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ) => ModalId\n drawer: (options: DrawerOptions) => ModalId\n alert: (options: ConfirmDialogOptions) => ModalId\n confirm: (options: ConfirmDialogOptions) => ModalId\n menu: (options: MenuDialogOptions) => ModalId\n form: FormDialogHandler<TModals['form']>\n close: (id: ModalId) => void\n closeAll: () => void\n}\n\nexport const ModalsContext = React.createContext<ModalsContextValue<\n typeof defaultModals\n> | null>(null)\n\nexport interface ModalsProviderProps<\n TModals extends Record<string, React.FC<any>> = Record<string, React.FC<any>>\n> {\n children: React.ReactNode\n modals?: TModals\n}\n\nexport type ModalId = string | number\n\ntype WithModalOptions<T> = Omit<T, 'isOpen' | 'onClose'> & ModalOptions\n\ninterface ModalOptions\n extends Omit<BaseModalProps, 'isOpen' | 'onClose' | 'children'> {\n onClose?: (args: { force?: boolean }) => Promise<boolean | undefined> | void\n [key: string]: any\n}\n\nexport interface DrawerOptions\n extends ModalOptions,\n Omit<DrawerProps, 'onClose' | 'isOpen' | 'children' | 'title' | 'size'> {}\n\nexport interface ConfirmDialogOptions\n extends ModalOptions,\n Omit<ConfirmDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface MenuDialogOptions\n extends ModalOptions,\n Omit<MenuDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface FormDialogOptions\n extends ModalOptions,\n Omit<FormDialogProps, 'onClose' | 'isOpen' | 'children'> {}\n\nexport interface OpenOptions<TModalTypes extends string> extends ModalOptions {\n type?: TModalTypes\n scope?: ModalScopes\n}\n\nexport type ModalScopes = 'modal' | 'alert'\n\nexport interface ModalConfig<\n TModalOptions extends ModalOptions = ModalOptions,\n TModalTypes extends string = string\n> {\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?: TModalOptions | 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?: TModalTypes\n /**\n * Render a custom modal component.\n * This will ignore the `type` param.\n */\n component?: React.FC<BaseModalProps>\n /**\n * Whether the modal is open or not.\n * This is used internally to keep track of the modal state.\n */\n isOpen?: boolean\n}\n\nconst initialModalState: ModalConfig = {\n id: null,\n props: null,\n type: '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: Record<string, React.FC<any>> = {\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 = <T extends OpenOptions<any>>(\n componentOrOptions: any,\n options?: T extends React.FC<any>\n ? WithModalOptions<React.ComponentPropsWithRef<T>>\n : never\n ): ModalId => {\n let _options: ModalOptions\n if (typeof componentOrOptions === 'function') {\n _options = {\n component: componentOrOptions,\n ...options,\n } as unknown as T\n } else {\n _options = componentOrOptions\n }\n\n const {\n id = _instances.size + 1,\n type = 'modal',\n scope = 'modal',\n component,\n ...props\n } = _options\n\n const modal: ModalConfig<T> = {\n id,\n props: props as T,\n type,\n scope,\n component,\n isOpen: true,\n }\n\n _instances.add(modal)\n setActiveModal(modal, scope)\n\n return id\n }\n\n const drawer = (options: DrawerOptions) => {\n return open<DrawerOptions>({\n ...options,\n type: 'drawer',\n })\n }\n\n const alert = (options: ConfirmDialogOptions) => {\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: ConfirmDialogOptions) => {\n return open<ConfirmDialogOptions>({\n ...options,\n scope: 'alert',\n type: 'confirm',\n })\n }\n\n const menu = (options: MenuDialogOptions) => {\n return open<MenuDialogOptions>({\n ...options,\n type: 'menu',\n })\n }\n\n const form = (options: any) => {\n return open({\n ...options,\n type: 'form',\n })\n }\n\n const close = async (id?: ModalId | null, force?: boolean) => {\n const modals = [...Array.from(_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 const scoped = modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped.length === 1) {\n setActiveModal(\n {\n ...modal,\n isOpen: false,\n },\n modal.scope\n )\n } else if (scoped.length > 1) {\n setActiveModal(scoped[scoped.length - 2], modal.scope)\n } else {\n setActiveModal(\n {\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 // @todo this is not ideal, but not all modals support onCloseComplete\n setTimeout(() => closeComplete(id), 200)\n }\n\n const closeComplete = (id?: ModalId | null) => {\n const modals = [...Array.from(_instances)]\n const modal = modals.filter((modal) => modal.id === id)[0]\n\n _instances.delete(modal)\n\n const scoped = modal && modals.filter(({ scope }) => scope === modal.scope)\n\n if (scoped?.length === 1) {\n setActiveModal(initialModalState, 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 menu,\n form,\n close,\n closeAll,\n }\n\n const content = React.useMemo(\n () =>\n Object.entries(activeModals).map(([scope, config]) => {\n const Component = config.component || getModalComponent(config.type)\n\n const { title, body, children, ...props } = config.props || {}\n\n return (\n <Component\n key={scope}\n title={title}\n children={body || children}\n {...props}\n isOpen={!!config.isOpen}\n onClose={() => close(config.id)}\n onCloseComplete={() => closeComplete(config.id)}\n />\n )\n }),\n [activeModals]\n )\n\n return (\n <ModalsContext.Provider value={context}>\n {content}\n {children}\n </ModalsContext.Provider>\n )\n}\n\nexport const useModalsContext = () => React.useContext(ModalsContext)\n\nexport const useModals = () => {\n const modals = useModalsContext()\n\n if (!modals) {\n throw new Error('useModals must be used within a ModalsProvider')\n }\n\n return modals\n}\n","import { ConfirmDialog } from './dialog'\nimport { MenuDialog } from './menu'\nimport { FormDialog } from './form'\nimport { Drawer } from './drawer'\nimport { Modal } from './modal'\n\nexport const defaultModals = {\n alert: ConfirmDialog,\n confirm: ConfirmDialog,\n drawer: Drawer,\n modal: Modal,\n menu: MenuDialog,\n form: FormDialog,\n}\n","import { defaultModals } from './default-modals'\nimport {\n ModalsContextValue,\n ModalsProvider,\n ModalsProviderProps,\n useModals,\n} from './provider'\n\nexport interface CreateModalsOptions<\n TModalDefs extends Record<string, React.FC<any>>\n> {\n modals: TModalDefs\n}\n\nexport const createModals = <TModalDefs extends Record<string, React.FC<any>>>(\n options: CreateModalsOptions<TModalDefs>\n) => {\n const modals = {\n ...defaultModals,\n ...options.modals,\n }\n const Provider = (props: Omit<ModalsProviderProps, 'modals'>) => {\n return <ModalsProvider children={props.children} modals={modals} />\n }\n\n return {\n ModalsProvider: Provider,\n useModals: useModals as () => ModalsContextValue<typeof modals>,\n }\n}\n","import * as React from 'react'\n\n/**\n * Get the first child of a specific type.\n * @param children The children\n * @param type The component type\n */\nexport function getChildOfType(\n children: React.ReactNode,\n type: React.JSXElementConstructor<any>\n) {\n return (React.Children.toArray(children) as React.ReactElement[]).find(\n (item) => item.type === type\n )\n}\n","import * as React from 'react'\n\n/**\n * Get all children of a specific type.\n * @param children The children\n * @param type The component type\n */\nexport function getChildrenOfType(\n children: React.ReactNode,\n type: React.JSXElementConstructor<any> | React.JSXElementConstructor<any>[]\n) {\n return (React.Children.toArray(children) as React.ReactElement[]).filter(\n (item) =>\n Array.isArray(type)\n ? type.some((component) => component === item.type)\n : item.type === type\n )\n}\n","import {\n ResponsiveValue,\n UseBreakpointOptions,\n useTheme,\n useBreakpointValue,\n} from '@chakra-ui/react'\n\nconst normalize = (variant: any, toArray?: (value: any) => any) => {\n if (Array.isArray(variant)) return variant\n else if (typeof variant === 'object') return toArray?.(variant)\n if (variant != null) return [variant]\n return []\n}\n\nexport const useResponsiveValue = (\n value: ResponsiveValue<any>,\n options?: UseBreakpointOptions\n) => {\n const theme = useTheme()\n const normalized = normalize(value, theme.__breakpoints?.toArrayValue)\n return useBreakpointValue(normalized, options)\n}\n","export { getChildOfType } from './get-child-of-type'\nexport { getChildrenOfType } from './get-children-of-type'\nexport { useResponsiveValue } from './use-responsive-value'\n\nexport * from '@chakra-ui/utils'\n","import {\n createFormDialog,\n BaseModalProps,\n FormDialogFieldOverrides,\n} from '@saas-ui/modals'\nimport { ZodFormType } from './create-zod-form'\n\nexport function createZodFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraOverrides = object\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraOverrides>) {\n return createFormDialog(Form) as unknown as ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n}\n","import {\n CreateStepFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n WithStepFields,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { AnyZodObject, z } from 'zod'\nimport React from 'react'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodStepFormProps<FieldDefs>\n extends CreateStepFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\ntype InferStepType<T extends Required<StepsOptions<AnyZodObject>>> = T extends [\n infer Step,\n ...infer Rest\n]\n ? Step extends { schema: AnyZodObject }\n ? z.infer<Step['schema']> &\n (Rest extends Required<StepsOptions<AnyZodObject>>\n ? InferStepType<Rest>\n : object)\n : object\n : object\n\ntype ZodStepFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object\n> = (<\n TSteps extends Required<StepsOptions<AnyZodObject>> = Required<\n StepsOptions<AnyZodObject>\n >,\n TFieldValues extends InferStepType<TSteps> = InferStepType<TSteps>,\n TContext extends object = object\n>(\n props: WithStepFields<\n UseStepFormProps<TSteps, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n options?: CreateZodStepFormProps<FieldDefs>\n) => {\n const ZodStepForm = createStepForm<any, any, any>({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodStepForm.displayName = 'ZodStepForm'\n ZodStepForm.id = 'ZodStepForm'\n\n return ZodStepForm as ZodStepFormType<FieldDefs>\n}\n","export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\nexport { createZodFormDialog } from './create-zod-dialog'\nexport { createZodStepForm } from './create-zod-step-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\nimport { createZodFormDialog } from './create-zod-dialog'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n\nexport const FormDialog = createZodFormDialog(Form)\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAWpB,IAAM,UAAU,CACd,UAC+D;AAC/D,MAAI,MAAM,KAAK,aAAa,cAAc;AACxC,WAAO,QAAQ,MAAM,KAAK,SAAS;AAAA,EACrC;AAEA,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AArCrD;AAsCE,UAAO,WAAM,KAAK,IAAI,MAAf,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AA/C3E;AAgDE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,MACJ,MAAM,KAAK,aAAa,eACpB,MAAM,KAAK,UAAU,OACrB,MAAM;AAEZ,UAAM,QAAoB,CAAC;AAC3B,QAAI,IAAI,aAAa,YAAY;AAC/B,YAAM,MAAM,eAAe,OAAO,WAAW;AAC7C,YAAM,MAAM,eAAe,OAAO,WAAW;AAAA,IAC/C,WAAW,IAAI,aAAa,WAAW;AACrC,YAAM,UAAU,IAAI,OAAO,IAAI,CAAC,UAAkB;AAChD,eAAO,EAAE,OAAO,OAAO,MAAM;AAAA,MAC/B,CAAC;AAAA,IACH;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,eAAc,iBAAM,MAAK,iBAAX;AAAA,MACd,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AA0BO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;AC3IA;AAAA,EACE;AAAA,OAIK;AAkCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACrDA,YAAYA,YAAW;AAEvB;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;OAEK;AAyGG,SAAA,KAKE,YALF;ACrHV;EACE,UAAU;EACV;EACA;EACA;EACA;EACA;EACA;OAKK;AAEP,SAAS,eAAe;AAwDD,SAAA,OAAAC,MACjB,QAAAC,aADiB;ACtEvB;EACE,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;OAKK;AAEP,SAAS,WAAAC,gBAAe;AAwDD,SAAA,OAAAF,MACjB,QAAAC,aADiB;ACtEvB;EACE,eAAAE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,sBAAAC;OACK;AAiBH,SAAA,OAAAJ,MA0CE,QAAAC,aA1CF;AC5BJ;EACE,aAAAI;EACA,eAAAF;EACA,UAAAG;EACA,cAAAC;OAEK;;;;;;;;;;;;;EMRP;EAGE;OACA;;AFJF,SAAA,eAAuB,UAAA,MAAA;AAOhB,SAAS,eACd,QAAA,QAEA,EAAA;IACA,CAAA,SAAc,KAAA,SAAS;EAA2C;AACxC;ACZ5B,SAAA,kBAAuB,UAAA,MAAA;AAOhB,SAAS,gBAAA,QACd,QACA,EACA;IACA,CAAA,SAAc,MAAA,QAAS,IAAA,IAAQ,KAAQ,KAA2B,CAAA,cAAA,cAAA,KAAA,IAAA,IAAA,KAAA,SAAA;EAAA;AAI5C;ACXtB,IAAA,YACK,CAAA,SAAA,YAAA;AAEP,MAAM,MAAA,QAAa,OAAc;AAC/B,WAAI;WAA+B,OAAA,YAAA;AAAA,WAC1B,WAAO,OAAA,SAAY,QAAA,OAAA;AAAU,MAAA,WAAO;AAC7C,WAAI,CAAA,OAAW;AAAM,SAAA,CAAA;AACrB;AACF,IAAA,qBAAA,CAAA,OAAA,YAAA;AAEO,MAAM;AAdb,QAAA,QAAA,SAAA;AAkBE,QAAM,aAAQ,UAAS,QAAA,KAAA,MAAA,kBAAA,OAAA,SAAA,GAAA,YAAA;AACvB,SAAM,mBAAa,YAAiB,OAAA;AACpC;;;ANTF;EACE;EACA;EACA;OAOK;AAyJK,SAAA,UACyC,OAAAC,MAGrC,QAAAC,aAJJ;AC9KZ,YAAYC,aAAW;AAoUb,SAAA,OAAAF,MAeN,QAAAC,aAfM;AE9SC,SAAA,OAAAD,YAAA;ALkCJ,IAAM,YAAsC,CAAC,UAAU;AAC5D,QAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,GAAG;EACL,IAAI;AACJ,SACEG,sBAAC,aAAA,EAAY,QAAgB,SAAmB,GAAG,MAChD,UAAA;IAAA,CAAC,eAAeC,qBAAC,cAAA,CAAA,CAAa;IAC/BD,sBAAC,cAAA,EAAc,GAAG,cACf,UAAA;MAAA,SAASC,qBAAC,aAAA,EAAa,GAAG,aAAc,UAAA,MAAA,CAAM;MAC9C,CAAC,mBAAmBA,qBAAC,kBAAA,CAAA,CAAiB;MACtCC,SAAQ,UAAU;QACjB;QACA;MACF,CAAC;MACA,UAAUD,qBAAC,aAAA,EAAa,GAAG,aAAc,UAAA,OAAA,CAAO;IAAA,EAAA,CACnD;EAAA,EAAA,CACF;AAEJ;ACnEA,IAAM,CAAC,cAAc,IAAI,oBAAoB,eAAe;AAiCrD,IAAM,iBAAiB;EAC5B,CAAC,OAAO,iBAAiB;AACvB,UAAM;MACJ;MACA;MACA;MACA;MACA;MACA,eAAe;MACf,YAAY;MACZ,GAAG;IACL,IAAI;AAEJ,UAAM,EAAE,QAAQ,SAAS,QAAQ,IAAI,eAAe;AAEpD,UAAM,EAAE,KAAK,GAAG,SAAS,IAAI,YAAY,MAAM,YAAY;AAE3D,UAAM,SAAS,oBAAoB,QAAQ,KAAK;AAEhD,UAAM,aAAaE,oBAAmB,EAAE,MAAM,MAAM,IAAI,MAAM,CAAC;AAE/D,WACEC;MAAC;MAAA;QACC;QACA;QACA,iBAAiB,mBAAmB;QACpC;QACA;QACA;QACA,YAAY,kBAAA,OAAA,iBAAkB;QAC9B,cAAc,EAAE,IAAI,EAAE;QAGtB,UAAA;UAAAC,qBAAC,gBAAA,EAAe,OAAO,QACrB,UAAAA;YAAC,OAAO;YAAP;cACE,GAAG;cACJ;cACA,OAAO;gBACL,SAAS;gBACT,WAAW;;gBACX,WAAW;;gBACX,GAAG,OAAO;gBACV,WAAW;gBACX,QAAQ;gBACR,OAAO;;kBAEL,GAAI,OAAO,KAAK,SAAS,CAAC;kBAC1B,WAAW;gBACb;cACF;YAAA;UACF,EAAA,CACF;UACC,UAAUA,qBAACC,cAAA,EAAa,UAAA,OAAA,CAAO;QAAA;MAAA;IAClC;EAEJ;AACF;ACnCA,IAAM,eAAe,CAAC,UAA2B;AAC/C,QAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,mBAAmB;IACnB;IACA;IACA;IACA,aAAa;IACb;IACA;IACA,GAAG;EACL,IAAI;AAEJ,QAAM,YAAY;IAChB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;EACF;AAEA,SAAO,EAAE,YAAY,WAAW,OAAO;AACzC;AA0CO,SAAS,iBASdC,QAAiB;AACjB,QAAM,SAASC,YAAuB,CAAC,OAAO,QAAQ;AACpD,UAAM,EAAE,QAAQ,SAAS,QAAQ,UAAU,GAAG,KAAK,IAAI;AACvD,UAAM,EAAE,YAAY,WAAW,OAAO,IAAI,aAAa,IAAI;AAC3D,WACEH,qBAAC,WAAA,EAAW,GAAG,YAAY,QAAgB,SACzC,UAAAA,qBAACE,QAAA,EAAK,KAAW,GAAI,WAClB,UAAA,CAAC,SAAW;AA7KvB,UAAA,IAAA;AA8KY,aAAAH,sBAAA,UAAA,EACE,UAAA;QAAAC,qBAACI,YAAA,EAAW,cAAAC,aAAAA,SAAQ,UAAU,IAAI,KAAKL,qBAAC,YAAA,CAAA,CAAW,EAAA,CAAG;QAErD,UACCD,sBAACE,cAAA,EACC,UAAA;UAAAD;YAACM;YAAA;cACC,SAAQ;cACR,IAAI;cACJ,SAAS;cACR,GAAG,UAAA,OAAA,SAAA,OAAQ;cAEX,WAAA,MAAA,KAAA,UAAA,OAAA,SAAA,OAAQ,WAAR,OAAA,SAAA,GAAgB,aAAhB,OAAA,KAA4B;YAAA;UAC/B;UACAN,qBAAC,cAAA,EAAc,GAAG,UAAA,OAAA,SAAA,OAAQ,OAAA,CAAQ;QAAA,EAAA,CACpC;MAAA,EAAA,CAEJ;IAAA,EAAA,CAEJ,EAAA,CACF;EAEJ,CAAC;AAED,SAAO,cAAc,GAAGE,OAAK,eAAeA,OAAK;AACjD,SAAO,KAAKA,OAAK;AAEjB,SAAO;AACT;AAOO,IAAM,aAAa,iBAAiB,IAAI;AC1KxC,IAAM,gBAAsB,sBAEzB,IAAI;;;AOjCP,SAAS,oBAIdK,OAA0D;AAC1D,SAAO,iBAAiBA,KAAI;AAK9B;;;ACjBA;AAAA,EAEE;AAAA,OAIK;AAiDA,IAAM,oBAAoB,CAC/B,YACG;AACH,QAAM,cAAc,eAA8B;AAAA,IAChD,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,KAAK;AAEjB,SAAO;AACT;;;ACpDO,IAAMC,QAAO,cAAc;AAE3B,IAAM,WAAW,kBAAkB;AAEnC,IAAMC,cAAa,oBAAoBD,KAAI;","names":["React","jsx","jsxs","runIfFn","ModalFooter","useBreakpointValue","ModalBody","Button","forwardRef","jsx","jsxs","React","jsxs","jsx","runIfFn","useBreakpointValue","jsxs","jsx","ModalFooter","Form","forwardRef","ModalBody","runIfFn","Button","Form","Form","FormDialog"]}
|
1
|
+
{"version":3,"sources":["../../zod/src/zod-resolver.ts","../../zod/src/create-zod-form.ts","../../zod/src/create-zod-dialog.ts","../../zod/src/create-zod-step-form.ts","../../zod/src/index.ts"],"sourcesContent":["import * as z from 'zod'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport { get } from '@chakra-ui/utils'\nimport { FieldProps } from '@saas-ui/forms'\n\nexport { zodResolver }\n\nexport type ExtraProps = {\n min?: number\n max?: number\n options?: { label: string; value: string }[]\n}\n\nconst getType = (\n field: z.ZodTypeAny\n): 'array' | 'object' | 'number' | 'date' | 'select' | 'text' => {\n if (field._def.typeName === 'ZodDefault') {\n return getType(field._def.innerType)\n }\n\n switch (field._def.typeName) {\n case 'ZodArray':\n return 'array'\n case 'ZodObject':\n return 'object'\n case 'ZodNumber':\n return 'number'\n case 'ZodDate':\n return 'date'\n case 'ZodEnum':\n return 'select'\n case 'ZodString':\n default:\n return 'text'\n }\n}\n\nconst getArrayOption = (field: any, name: string) => {\n return field._def[name]?.value\n}\n\n/**\n * A helper function to render forms automatically based on a Yup schema\n *\n * @param schema The Yup schema\n * @returns {FieldProps[]}\n */\nexport const getFieldsFromSchema = (schema: z.ZodTypeAny): FieldProps[] => {\n const fields: FieldProps[] = []\n\n let schemaFields: Record<string, any> = {}\n if (schema._def.typeName === 'ZodArray') {\n schemaFields = schema._def.type.shape\n } else if (schema._def.typeName === 'ZodObject') {\n schemaFields = schema._def.shape()\n } else {\n return fields\n }\n\n for (const name in schemaFields) {\n const field = schemaFields[name]\n\n const def =\n field._def.typeName === 'ZodDefault'\n ? field._def.innerType._def\n : field._def\n\n const props: ExtraProps = {}\n if (def.typeName === 'ZodArray') {\n props.min = getArrayOption(field, 'minLength')\n props.max = getArrayOption(field, 'maxLength')\n } else if (def.typeName === 'ZodEnum') {\n props.options = def.values.map((value: string) => {\n return { label: value, value }\n })\n }\n\n const meta = field.description && zodParseMeta(field.description)\n\n fields.push({\n name,\n label: meta?.label || field.description || name,\n type: meta?.type || getType(field),\n defaultValue: field._def.defaultValue?.(),\n ...props,\n })\n }\n return fields\n}\n\nexport const getNestedSchema = (schema: z.ZodTypeAny, path: string) => {\n return get(schema._def.shape(), path)\n}\n\nexport const zodFieldResolver = <T extends z.ZodTypeAny>(schema: T) => {\n return {\n getFields() {\n return getFieldsFromSchema(schema)\n },\n getNestedFields(name: string) {\n return getFieldsFromSchema(getNestedSchema(schema, name))\n },\n }\n}\n\nexport interface ZodMeta {\n /**\n * The label of the field\n */\n label: string\n /**\n * The type of the field\n */\n type?: string\n /**\n * Object field column count\n */\n columns?: number\n /**\n * Array field min rows\n */\n min?: number\n /**\n * Array field max rows\n */\n max?: number\n [key: string]: any\n}\n\nexport const zodMeta = (meta: ZodMeta) => {\n return JSON.stringify(meta)\n}\n\nexport const zodParseMeta = (meta: string) => {\n try {\n return JSON.parse(meta)\n } catch (e) {\n return meta\n }\n}\n","import {\n createForm,\n CreateFormProps,\n WithFields,\n FormProps,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { z } from 'zod'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodFormProps<FieldDefs>\n extends CreateFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\nexport type ZodFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object,\n Type extends 'zod' = 'zod'\n> = (<\n TSchema extends z.AnyZodObject = z.AnyZodObject,\n TFieldValues extends z.infer<TSchema> = z.infer<TSchema>,\n TContext extends object = object\n>(\n props: WithFields<\n FormProps<TSchema, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodForm = <FieldDefs>(\n options?: CreateZodFormProps<FieldDefs>\n) => {\n const ZodForm = createForm({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodForm.displayName = 'ZodForm'\n ZodForm.id = 'ZodForm'\n\n return ZodForm as ZodFormType<FieldDefs>\n}\n","import {\n createFormDialog,\n BaseModalProps,\n FormDialogFieldOverrides,\n} from '@saas-ui/modals'\nimport { ZodFormType } from './create-zod-form'\n\nexport function createZodFormDialog<\n FieldDefs = any,\n ExtraProps = object,\n ExtraOverrides = object\n>(Form: ZodFormType<FieldDefs, ExtraProps, ExtraOverrides>) {\n return createFormDialog(Form) as unknown as ZodFormType<\n FieldDefs,\n ExtraProps & Omit<BaseModalProps, 'children'>,\n ExtraOverrides & FormDialogFieldOverrides\n >\n}\n","import {\n CreateStepFormProps,\n createStepForm,\n StepsOptions,\n UseStepFormProps,\n WithStepFields,\n} from '@saas-ui/forms'\nimport { zodFieldResolver, zodResolver } from './zod-resolver'\nimport { AnyZodObject, z } from 'zod'\nimport React from 'react'\n\ntype ResolverArgs = Parameters<typeof zodResolver>\n\nexport interface CreateZodStepFormProps<FieldDefs>\n extends CreateStepFormProps<FieldDefs> {\n schemaOptions?: ResolverArgs[1]\n resolverOptions?: ResolverArgs[2]\n}\n\ntype InferStepType<T extends Required<StepsOptions<AnyZodObject>>> = T extends [\n infer Step,\n ...infer Rest\n]\n ? Step extends { schema: AnyZodObject }\n ? z.infer<Step['schema']> &\n (Rest extends Required<StepsOptions<AnyZodObject>>\n ? InferStepType<Rest>\n : object)\n : object\n : object\n\ntype ZodStepFormType<\n FieldDefs,\n ExtraProps = object,\n ExtraOverrides = object\n> = (<\n TSteps extends Required<StepsOptions<AnyZodObject>> = Required<\n StepsOptions<AnyZodObject>\n >,\n TFieldValues extends InferStepType<TSteps> = InferStepType<TSteps>,\n TContext extends object = object\n>(\n props: WithStepFields<\n UseStepFormProps<TSteps, TFieldValues, TContext>,\n FieldDefs,\n ExtraOverrides\n > & {\n steps: TSteps\n ref?: React.ForwardedRef<HTMLFormElement>\n } & ExtraProps\n) => React.ReactElement) & {\n displayName?: string\n id?: string\n}\n\nexport const createZodStepForm = <FieldDefs>(\n options?: CreateZodStepFormProps<FieldDefs>\n) => {\n const ZodStepForm = createStepForm<any, any, any>({\n resolver: (schema: any) =>\n zodResolver(schema, options?.schemaOptions, options?.resolverOptions),\n fieldResolver: zodFieldResolver,\n ...options,\n })\n\n ZodStepForm.displayName = 'ZodStepForm'\n ZodStepForm.id = 'ZodStepForm'\n\n return ZodStepForm as ZodStepFormType<FieldDefs>\n}\n","export {\n zodResolver,\n getFieldsFromSchema,\n getNestedSchema,\n zodFieldResolver,\n zodMeta,\n zodParseMeta,\n} from './zod-resolver'\nexport type { ZodMeta } from './zod-resolver'\nexport { createZodForm, type ZodFormType } from './create-zod-form'\nexport { createZodFormDialog } from './create-zod-dialog'\nexport { createZodStepForm } from './create-zod-step-form'\n\nimport { createZodForm } from './create-zod-form'\nimport { createZodStepForm } from './create-zod-step-form'\nimport { createZodFormDialog } from './create-zod-dialog'\n\nexport const Form = createZodForm()\n\nexport const StepForm = createZodStepForm()\n\nexport const FormDialog = createZodFormDialog(Form)\n"],"mappings":";;;AACA,SAAS,mBAAmB;AAC5B,SAAS,WAAW;AAWpB,IAAM,UAAU,CACd,UAC+D;AAC/D,MAAI,MAAM,KAAK,aAAa,cAAc;AACxC,WAAO,QAAQ,MAAM,KAAK,SAAS;AAAA,EACrC;AAEA,UAAQ,MAAM,KAAK,UAAU;AAAA,IAC3B,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,iBAAiB,CAAC,OAAY,SAAiB;AArCrD;AAsCE,UAAO,WAAM,KAAK,IAAI,MAAf,mBAAkB;AAC3B;AAQO,IAAM,sBAAsB,CAAC,WAAuC;AA/C3E;AAgDE,QAAM,SAAuB,CAAC;AAE9B,MAAI,eAAoC,CAAC;AACzC,MAAI,OAAO,KAAK,aAAa,YAAY;AACvC,mBAAe,OAAO,KAAK,KAAK;AAAA,EAClC,WAAW,OAAO,KAAK,aAAa,aAAa;AAC/C,mBAAe,OAAO,KAAK,MAAM;AAAA,EACnC,OAAO;AACL,WAAO;AAAA,EACT;AAEA,aAAW,QAAQ,cAAc;AAC/B,UAAM,QAAQ,aAAa,IAAI;AAE/B,UAAM,MACJ,MAAM,KAAK,aAAa,eACpB,MAAM,KAAK,UAAU,OACrB,MAAM;AAEZ,UAAM,QAAoB,CAAC;AAC3B,QAAI,IAAI,aAAa,YAAY;AAC/B,YAAM,MAAM,eAAe,OAAO,WAAW;AAC7C,YAAM,MAAM,eAAe,OAAO,WAAW;AAAA,IAC/C,WAAW,IAAI,aAAa,WAAW;AACrC,YAAM,UAAU,IAAI,OAAO,IAAI,CAAC,UAAkB;AAChD,eAAO,EAAE,OAAO,OAAO,MAAM;AAAA,MAC/B,CAAC;AAAA,IACH;AAEA,UAAM,OAAO,MAAM,eAAe,aAAa,MAAM,WAAW;AAEhE,WAAO,KAAK;AAAA,MACV;AAAA,MACA,QAAO,6BAAM,UAAS,MAAM,eAAe;AAAA,MAC3C,OAAM,6BAAM,SAAQ,QAAQ,KAAK;AAAA,MACjC,eAAc,iBAAM,MAAK,iBAAX;AAAA,MACd,GAAG;AAAA,IACL,CAAC;AAAA,EACH;AACA,SAAO;AACT;AAEO,IAAM,kBAAkB,CAAC,QAAsB,SAAiB;AACrE,SAAO,IAAI,OAAO,KAAK,MAAM,GAAG,IAAI;AACtC;AAEO,IAAM,mBAAmB,CAAyB,WAAc;AACrE,SAAO;AAAA,IACL,YAAY;AACV,aAAO,oBAAoB,MAAM;AAAA,IACnC;AAAA,IACA,gBAAgB,MAAc;AAC5B,aAAO,oBAAoB,gBAAgB,QAAQ,IAAI,CAAC;AAAA,IAC1D;AAAA,EACF;AACF;AA0BO,IAAM,UAAU,CAAC,SAAkB;AACxC,SAAO,KAAK,UAAU,IAAI;AAC5B;AAEO,IAAM,eAAe,CAAC,SAAiB;AAC5C,MAAI;AACF,WAAO,KAAK,MAAM,IAAI;AAAA,EACxB,SAAS,GAAP;AACA,WAAO;AAAA,EACT;AACF;;;AC3IA;AAAA,EACE;AAAA,OAIK;AAkCA,IAAM,gBAAgB,CAC3B,YACG;AACH,QAAM,UAAU,WAAW;AAAA,IACzB,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,UAAQ,cAAc;AACtB,UAAQ,KAAK;AAEb,SAAO;AACT;;;ACrDA;AAAA,EACE;AAAA,OAGK;AAGA,SAAS,oBAIdA,OAA0D;AAC1D,SAAO,iBAAiBA,KAAI;AAK9B;;;ACjBA;AAAA,EAEE;AAAA,OAIK;AAiDA,IAAM,oBAAoB,CAC/B,YACG;AACH,QAAM,cAAc,eAA8B;AAAA,IAChD,UAAU,CAAC,WACT,YAAY,QAAQ,mCAAS,eAAe,mCAAS,eAAe;AAAA,IACtE,eAAe;AAAA,IACf,GAAG;AAAA,EACL,CAAC;AAED,cAAY,cAAc;AAC1B,cAAY,KAAK;AAEjB,SAAO;AACT;;;ACpDO,IAAM,OAAO,cAAc;AAE3B,IAAM,WAAW,kBAAkB;AAEnC,IAAM,aAAa,oBAAoB,IAAI;","names":["Form"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@saas-ui/forms",
|
3
|
-
"version": "2.3.
|
3
|
+
"version": "2.3.10",
|
4
4
|
"description": "Fully functional forms for Chakra UI.",
|
5
5
|
"source": "src/index.ts",
|
6
6
|
"exports": {
|
@@ -104,7 +104,7 @@
|
|
104
104
|
"@chakra-ui/react-utils": "^2.0.12",
|
105
105
|
"@chakra-ui/utils": "^2.0.15",
|
106
106
|
"@hookform/resolvers": "^3.3.1",
|
107
|
-
"@saas-ui/core": "2.3.
|
107
|
+
"@saas-ui/core": "2.3.5",
|
108
108
|
"react-hook-form": "^7.46.1"
|
109
109
|
},
|
110
110
|
"peerDependencies": {
|
package/src/layout.tsx
CHANGED
@@ -1,6 +1,12 @@
|
|
1
1
|
import * as React from 'react'
|
2
2
|
|
3
|
-
import {
|
3
|
+
import {
|
4
|
+
chakra,
|
5
|
+
omitThemingProps,
|
6
|
+
SimpleGrid,
|
7
|
+
SimpleGridProps,
|
8
|
+
useTheme,
|
9
|
+
} from '@chakra-ui/react'
|
4
10
|
import { cx } from '@chakra-ui/utils'
|
5
11
|
|
6
12
|
export interface FormLayoutProps extends SimpleGridProps {}
|
@@ -31,10 +37,10 @@ export const FormLayout = ({ children, ...props }: FormLayoutProps) => {
|
|
31
37
|
spacing: 4,
|
32
38
|
}
|
33
39
|
|
34
|
-
const gridProps = {
|
40
|
+
const gridProps = omitThemingProps({
|
35
41
|
...defaultProps,
|
36
42
|
...props,
|
37
|
-
}
|
43
|
+
})
|
38
44
|
|
39
45
|
return (
|
40
46
|
<SimpleGrid
|
package/src/submit-button.tsx
CHANGED
@@ -48,13 +48,13 @@ export const SubmitButton = forwardRef<SubmitButtonProps, 'button'>(
|
|
48
48
|
|
49
49
|
return (
|
50
50
|
<Button
|
51
|
-
{...rest}
|
52
|
-
{...field}
|
53
51
|
ref={ref}
|
54
52
|
variant={variant}
|
55
53
|
type="submit"
|
56
54
|
isLoading={formState.isSubmitting || isLoading}
|
57
55
|
isDisabled={isDisabled}
|
56
|
+
{...rest}
|
57
|
+
{...field}
|
58
58
|
>
|
59
59
|
{children}
|
60
60
|
</Button>
|