@overmap-ai/forms 1.0.32-react-flow-david-fixes.9 → 1.0.32-react-flow-david-fixes.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/dist/form/builder/Root.d.ts +2 -0
- package/dist/form/builder/context.d.ts +2 -0
- package/dist/form/utils.d.ts +1 -1
- package/dist/forms.js +79 -87
- package/dist/forms.umd.cjs +79 -87
- package/package.json +1 -1
|
@@ -7,6 +7,8 @@ export interface FormBuilderRootProps extends PropsWithChildren {
|
|
|
7
7
|
initialFields?: SerializedFieldSection[];
|
|
8
8
|
onSave: FormBuilderSaveHandler;
|
|
9
9
|
onCancel?: () => void;
|
|
10
|
+
hideTitle?: boolean;
|
|
11
|
+
hideDescription?: boolean;
|
|
10
12
|
enableReinitialize?: boolean;
|
|
11
13
|
disableRequiredFields?: boolean;
|
|
12
14
|
}
|
package/dist/form/utils.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import { FormBuilderValues } from './builder';
|
|
|
3
3
|
import { AnyFormElement, FieldValue, SerializedFieldSection } from './fields';
|
|
4
4
|
import { FieldValues } from './typings';
|
|
5
5
|
export declare const hasKeys: (errors: object) => boolean;
|
|
6
|
-
export declare const validateFields: (fields: AnyFormElement[], values: FieldValues
|
|
6
|
+
export declare const validateFields: (fields: AnyFormElement[], values: FieldValues) => FormikErrors<FieldValues | FormBuilderValues> | undefined;
|
|
7
7
|
export declare const initializeFieldValues: (fields: AnyFormElement[], values: FieldValues) => FieldValues;
|
|
8
8
|
export declare const changedFieldValues: (fields: AnyFormElement[], values1: FieldValues, values2: FieldValues) => FieldValues;
|
|
9
9
|
export declare const separateFilesFromFieldValues: (values: FieldValues) => {
|
package/dist/forms.js
CHANGED
|
@@ -34498,9 +34498,9 @@ const validateFields = (fields, values) => {
|
|
|
34498
34498
|
for (const field of fields) {
|
|
34499
34499
|
if (field instanceof FieldSection) {
|
|
34500
34500
|
const conditionalSections = sectionElements.filter((section) => field.identifier in section.conditions);
|
|
34501
|
-
const conditionMet = conditionalSections.some(
|
|
34502
|
-
(conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier),
|
|
34503
|
-
);
|
|
34501
|
+
const conditionMet = conditionalSections.length > 0 ? conditionalSections.some(
|
|
34502
|
+
(conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier), values)
|
|
34503
|
+
) : true;
|
|
34504
34504
|
if (!conditionMet) continue;
|
|
34505
34505
|
Object.assign(errors, field.getErrors(values));
|
|
34506
34506
|
} else {
|
|
@@ -35484,9 +35484,12 @@ const getLayoutedElements = (nodes, edges, direction) => {
|
|
|
35484
35484
|
edges
|
|
35485
35485
|
];
|
|
35486
35486
|
};
|
|
35487
|
+
const proOptions = {
|
|
35488
|
+
hideAttribution: true
|
|
35489
|
+
};
|
|
35487
35490
|
const FormBuilderFlowBuilder = memo(() => {
|
|
35488
35491
|
const { handleSubmit, errors } = useFormikContext();
|
|
35489
|
-
const { onCancel } = use(FormBuilderContext);
|
|
35492
|
+
const { hideTitle, hideDescription, onCancel } = use(FormBuilderContext);
|
|
35490
35493
|
const fieldSchema = use(FieldSchemaContext);
|
|
35491
35494
|
const ref = useRef(null);
|
|
35492
35495
|
const [reactFlow, setReactFlow] = useState();
|
|
@@ -35577,7 +35580,7 @@ const FormBuilderFlowBuilder = memo(() => {
|
|
|
35577
35580
|
const [titleFieldProps, titleMeta, titleHelpers] = useField("title");
|
|
35578
35581
|
const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = useField("description");
|
|
35579
35582
|
return /* @__PURE__ */ jsxs("form", { className: "size-full flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
|
|
35580
|
-
/* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
|
|
35583
|
+
!hideTitle && /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
|
|
35581
35584
|
Input.Root,
|
|
35582
35585
|
{
|
|
35583
35586
|
variant: "outline",
|
|
@@ -35596,7 +35599,7 @@ const FormBuilderFlowBuilder = memo(() => {
|
|
|
35596
35599
|
)
|
|
35597
35600
|
}
|
|
35598
35601
|
) }),
|
|
35599
|
-
/* @__PURE__ */ jsx(
|
|
35602
|
+
!hideDescription && /* @__PURE__ */ jsx(
|
|
35600
35603
|
TextArea,
|
|
35601
35604
|
{
|
|
35602
35605
|
className: "field-sizing-content",
|
|
@@ -35626,7 +35629,8 @@ const FormBuilderFlowBuilder = memo(() => {
|
|
|
35626
35629
|
attributionPosition: "bottom-left",
|
|
35627
35630
|
fitView: true,
|
|
35628
35631
|
minZoom: 0,
|
|
35629
|
-
isValidConnection: handleValidConnection
|
|
35632
|
+
isValidConnection: handleValidConnection,
|
|
35633
|
+
proOptions
|
|
35630
35634
|
}
|
|
35631
35635
|
),
|
|
35632
35636
|
/* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsx(ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "surface", onClick: handleAddSection, children: [
|
|
@@ -35667,79 +35671,69 @@ const FormBuilderFlowBuilder = memo(() => {
|
|
|
35667
35671
|
FormBuilderFlowBuilder.displayName = "FormBuilderFlowBuilder";
|
|
35668
35672
|
const FormBuilderListBuilder = memo(() => {
|
|
35669
35673
|
const { handleSubmit, errors } = useFormikContext();
|
|
35670
|
-
const { onCancel } = use(FormBuilderContext);
|
|
35674
|
+
const { hideTitle, hideDescription, onCancel } = use(FormBuilderContext);
|
|
35671
35675
|
const fieldSchema = use(FieldSchemaContext);
|
|
35672
35676
|
const handleCreateEmptySection = useCallback(() => {
|
|
35673
35677
|
fieldSchema.addField(new FieldSection({ identifier: v4(), fields: [] }));
|
|
35674
35678
|
}, [fieldSchema]);
|
|
35675
35679
|
const [titleFieldProps, titleMeta, titleHelpers] = useField("title");
|
|
35676
35680
|
const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = useField("description");
|
|
35677
|
-
return /* @__PURE__ */ jsxs("
|
|
35678
|
-
/* @__PURE__ */ jsx(
|
|
35679
|
-
|
|
35680
|
-
|
|
35681
|
-
|
|
35682
|
-
|
|
35683
|
-
|
|
35684
|
-
|
|
35685
|
-
|
|
35686
|
-
children: /* @__PURE__ */ jsx(
|
|
35687
|
-
Input.Field,
|
|
35688
|
-
{
|
|
35689
|
-
placeholder: "Enter a title",
|
|
35690
|
-
value: titleFieldProps.value ?? "",
|
|
35691
|
-
onChange: (event) => {
|
|
35692
|
-
void titleHelpers.setValue(event.target.value);
|
|
35693
|
-
},
|
|
35694
|
-
maxLength: 100
|
|
35695
|
-
}
|
|
35696
|
-
)
|
|
35697
|
-
}
|
|
35698
|
-
) }),
|
|
35699
|
-
/* @__PURE__ */ jsx(
|
|
35700
|
-
TextArea,
|
|
35701
|
-
{
|
|
35702
|
-
className: "field-sizing-content",
|
|
35703
|
-
placeholder: "Explain a description",
|
|
35704
|
-
value: descriptionFieldProps.value ?? "",
|
|
35705
|
-
onChange: (event) => {
|
|
35706
|
-
void descriptionHelpers.setValue(event.target.value);
|
|
35707
|
-
},
|
|
35708
|
-
resize: "vertical",
|
|
35709
|
-
maxLength: 1e3,
|
|
35710
|
-
size: "md"
|
|
35711
|
-
}
|
|
35712
|
-
),
|
|
35713
|
-
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
35714
|
-
fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsx(
|
|
35715
|
-
FieldSectionWithActions,
|
|
35716
|
-
{
|
|
35717
|
-
fieldSection,
|
|
35718
|
-
index
|
|
35719
|
-
},
|
|
35720
|
-
fieldSection.identifier
|
|
35721
|
-
)),
|
|
35722
|
-
/* @__PURE__ */ jsxs(
|
|
35723
|
-
Button,
|
|
35681
|
+
return /* @__PURE__ */ jsxs("form", { className: "flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
|
|
35682
|
+
!hideTitle && /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsx(
|
|
35683
|
+
Input.Root,
|
|
35684
|
+
{
|
|
35685
|
+
variant: "outline",
|
|
35686
|
+
size: "md",
|
|
35687
|
+
accentColor: titleMeta.error ? SEVERITY_COLOR_MAPPING.danger : "primary",
|
|
35688
|
+
children: /* @__PURE__ */ jsx(
|
|
35689
|
+
Input.Field,
|
|
35724
35690
|
{
|
|
35725
|
-
|
|
35726
|
-
|
|
35727
|
-
|
|
35728
|
-
|
|
35729
|
-
|
|
35730
|
-
|
|
35731
|
-
children: [
|
|
35732
|
-
/* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
|
|
35733
|
-
" Add section"
|
|
35734
|
-
]
|
|
35691
|
+
placeholder: "Enter a title",
|
|
35692
|
+
value: titleFieldProps.value ?? "",
|
|
35693
|
+
onChange: (event) => {
|
|
35694
|
+
void titleHelpers.setValue(event.target.value);
|
|
35695
|
+
},
|
|
35696
|
+
maxLength: 100
|
|
35735
35697
|
}
|
|
35736
35698
|
)
|
|
35737
|
-
|
|
35738
|
-
|
|
35739
|
-
|
|
35740
|
-
|
|
35741
|
-
|
|
35742
|
-
|
|
35699
|
+
}
|
|
35700
|
+
) }),
|
|
35701
|
+
!hideDescription && /* @__PURE__ */ jsx(
|
|
35702
|
+
TextArea,
|
|
35703
|
+
{
|
|
35704
|
+
className: "field-sizing-content",
|
|
35705
|
+
placeholder: "Explain a description",
|
|
35706
|
+
value: descriptionFieldProps.value ?? "",
|
|
35707
|
+
onChange: (event) => {
|
|
35708
|
+
void descriptionHelpers.setValue(event.target.value);
|
|
35709
|
+
},
|
|
35710
|
+
resize: "vertical",
|
|
35711
|
+
maxLength: 1e3,
|
|
35712
|
+
size: "md"
|
|
35713
|
+
}
|
|
35714
|
+
),
|
|
35715
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
35716
|
+
fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
|
|
35717
|
+
/* @__PURE__ */ jsxs(
|
|
35718
|
+
Button,
|
|
35719
|
+
{
|
|
35720
|
+
className: "mb-4",
|
|
35721
|
+
type: "button",
|
|
35722
|
+
variant: "soft",
|
|
35723
|
+
accentColor: "base",
|
|
35724
|
+
size: "sm",
|
|
35725
|
+
onClick: handleCreateEmptySection,
|
|
35726
|
+
children: [
|
|
35727
|
+
/* @__PURE__ */ jsx(LuIcon, { icon: "plus" }),
|
|
35728
|
+
" Add section"
|
|
35729
|
+
]
|
|
35730
|
+
}
|
|
35731
|
+
)
|
|
35732
|
+
] }),
|
|
35733
|
+
!!errors.fields && /* @__PURE__ */ jsx(Text, { size: "xs", accentColor: "danger", children: typeof errors.fields === "string" && errors.fields }),
|
|
35734
|
+
/* @__PURE__ */ jsxs(ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: [
|
|
35735
|
+
onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "soft", accentColor: "base", onClick: onCancel, children: "Cancel" }),
|
|
35736
|
+
/* @__PURE__ */ jsx(Button, { type: "submit", variant: "surface", children: "Save" })
|
|
35743
35737
|
] })
|
|
35744
35738
|
] });
|
|
35745
35739
|
});
|
|
@@ -35841,20 +35835,10 @@ const FormRenderer = memo(
|
|
|
35841
35835
|
]
|
|
35842
35836
|
}
|
|
35843
35837
|
),
|
|
35844
|
-
/* @__PURE__ */ jsxs(
|
|
35845
|
-
|
|
35846
|
-
|
|
35847
|
-
|
|
35848
|
-
type: "submit",
|
|
35849
|
-
disabled: !formik.isValid,
|
|
35850
|
-
accentColor: "primary",
|
|
35851
|
-
variant: "surface",
|
|
35852
|
-
children: [
|
|
35853
|
-
/* @__PURE__ */ jsx(LuIcon, { icon: "check" }),
|
|
35854
|
-
submitText
|
|
35855
|
-
]
|
|
35856
|
-
}
|
|
35857
|
-
)
|
|
35838
|
+
/* @__PURE__ */ jsxs(Button, { ...buttonProps, type: "submit", accentColor: "primary", variant: "surface", children: [
|
|
35839
|
+
/* @__PURE__ */ jsx(LuIcon, { icon: "check" }),
|
|
35840
|
+
submitText
|
|
35841
|
+
] })
|
|
35858
35842
|
] })
|
|
35859
35843
|
]
|
|
35860
35844
|
}
|
|
@@ -35886,6 +35870,8 @@ const FormBuilderRoot = memo((props) => {
|
|
|
35886
35870
|
initialFields,
|
|
35887
35871
|
onSave,
|
|
35888
35872
|
onCancel,
|
|
35873
|
+
hideTitle = false,
|
|
35874
|
+
hideDescription = false,
|
|
35889
35875
|
enableReinitialize = false,
|
|
35890
35876
|
disableRequiredFields = false
|
|
35891
35877
|
} = props;
|
|
@@ -35947,7 +35933,11 @@ const FormBuilderRoot = memo((props) => {
|
|
|
35947
35933
|
}
|
|
35948
35934
|
fieldsToValidate = [...fieldsToValidate, ...fieldSettings];
|
|
35949
35935
|
}
|
|
35950
|
-
const
|
|
35936
|
+
const values = {};
|
|
35937
|
+
for (const field of fieldsToValidate) {
|
|
35938
|
+
values[field.identifier] = get(form, field.identifier);
|
|
35939
|
+
}
|
|
35940
|
+
const fieldErrors = validateFields(fieldsToValidate, values);
|
|
35951
35941
|
if (fieldErrors) {
|
|
35952
35942
|
errors.fields = fieldErrors.fields;
|
|
35953
35943
|
}
|
|
@@ -35990,10 +35980,12 @@ const FormBuilderRoot = memo((props) => {
|
|
|
35990
35980
|
}, [formik.values.fields, observer]);
|
|
35991
35981
|
const contextValue = useMemo(() => {
|
|
35992
35982
|
return {
|
|
35983
|
+
hideTitle,
|
|
35984
|
+
hideDescription,
|
|
35993
35985
|
disableRequiredFields,
|
|
35994
35986
|
onCancel
|
|
35995
35987
|
};
|
|
35996
|
-
}, [disableRequiredFields, onCancel]);
|
|
35988
|
+
}, [disableRequiredFields, hideDescription, hideTitle, onCancel]);
|
|
35997
35989
|
return /* @__PURE__ */ jsx(FormBuilderContext, { value: contextValue, children: /* @__PURE__ */ jsx(FieldSchemaContext, { value: schema, children: /* @__PURE__ */ jsx(FormikProvider, { value: formik, children }) }) });
|
|
35998
35990
|
});
|
|
35999
35991
|
FormBuilderRoot.displayName = "FormBuilderRoot";
|
package/dist/forms.umd.cjs
CHANGED
|
@@ -34500,9 +34500,9 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
34500
34500
|
for (const field of fields) {
|
|
34501
34501
|
if (field instanceof FieldSection) {
|
|
34502
34502
|
const conditionalSections = sectionElements.filter((section) => field.identifier in section.conditions);
|
|
34503
|
-
const conditionMet = conditionalSections.some(
|
|
34504
|
-
(conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier),
|
|
34505
|
-
);
|
|
34503
|
+
const conditionMet = conditionalSections.length > 0 ? conditionalSections.some(
|
|
34504
|
+
(conditionalSection) => applyConditions(conditionalSection.getConditions(field.identifier), values)
|
|
34505
|
+
) : true;
|
|
34506
34506
|
if (!conditionMet) continue;
|
|
34507
34507
|
Object.assign(errors, field.getErrors(values));
|
|
34508
34508
|
} else {
|
|
@@ -35486,9 +35486,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35486
35486
|
edges
|
|
35487
35487
|
];
|
|
35488
35488
|
};
|
|
35489
|
+
const proOptions = {
|
|
35490
|
+
hideAttribution: true
|
|
35491
|
+
};
|
|
35489
35492
|
const FormBuilderFlowBuilder = React.memo(() => {
|
|
35490
35493
|
const { handleSubmit, errors } = formik.useFormikContext();
|
|
35491
|
-
const { onCancel } = React.use(FormBuilderContext);
|
|
35494
|
+
const { hideTitle, hideDescription, onCancel } = React.use(FormBuilderContext);
|
|
35492
35495
|
const fieldSchema = React.use(FieldSchemaContext);
|
|
35493
35496
|
const ref = React.useRef(null);
|
|
35494
35497
|
const [reactFlow, setReactFlow] = React.useState();
|
|
@@ -35579,7 +35582,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35579
35582
|
const [titleFieldProps, titleMeta, titleHelpers] = formik.useField("title");
|
|
35580
35583
|
const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = formik.useField("description");
|
|
35581
35584
|
return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "size-full flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
|
|
35582
|
-
/* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35585
|
+
!hideTitle && /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35583
35586
|
blocks.Input.Root,
|
|
35584
35587
|
{
|
|
35585
35588
|
variant: "outline",
|
|
@@ -35598,7 +35601,7 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35598
35601
|
)
|
|
35599
35602
|
}
|
|
35600
35603
|
) }),
|
|
35601
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
35604
|
+
!hideDescription && /* @__PURE__ */ jsxRuntime.jsx(
|
|
35602
35605
|
blocks.TextArea,
|
|
35603
35606
|
{
|
|
35604
35607
|
className: "field-sizing-content",
|
|
@@ -35628,7 +35631,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35628
35631
|
attributionPosition: "bottom-left",
|
|
35629
35632
|
fitView: true,
|
|
35630
35633
|
minZoom: 0,
|
|
35631
|
-
isValidConnection: handleValidConnection
|
|
35634
|
+
isValidConnection: handleValidConnection,
|
|
35635
|
+
proOptions
|
|
35632
35636
|
}
|
|
35633
35637
|
),
|
|
35634
35638
|
/* @__PURE__ */ jsxRuntime.jsx(react.Panel, { position: "top-left", children: /* @__PURE__ */ jsxRuntime.jsx(blocks.ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { type: "button", variant: "surface", onClick: handleAddSection, children: [
|
|
@@ -35669,79 +35673,69 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35669
35673
|
FormBuilderFlowBuilder.displayName = "FormBuilderFlowBuilder";
|
|
35670
35674
|
const FormBuilderListBuilder = React.memo(() => {
|
|
35671
35675
|
const { handleSubmit, errors } = formik.useFormikContext();
|
|
35672
|
-
const { onCancel } = React.use(FormBuilderContext);
|
|
35676
|
+
const { hideTitle, hideDescription, onCancel } = React.use(FormBuilderContext);
|
|
35673
35677
|
const fieldSchema = React.use(FieldSchemaContext);
|
|
35674
35678
|
const handleCreateEmptySection = React.useCallback(() => {
|
|
35675
35679
|
fieldSchema.addField(new FieldSection({ identifier: uuid.v4(), fields: [] }));
|
|
35676
35680
|
}, [fieldSchema]);
|
|
35677
35681
|
const [titleFieldProps, titleMeta, titleHelpers] = formik.useField("title");
|
|
35678
35682
|
const [descriptionFieldProps, _descriptionMeta, descriptionHelpers] = formik.useField("description");
|
|
35679
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("
|
|
35680
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
35681
|
-
|
|
35682
|
-
|
|
35683
|
-
|
|
35684
|
-
|
|
35685
|
-
|
|
35686
|
-
|
|
35687
|
-
|
|
35688
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35689
|
-
blocks.Input.Field,
|
|
35690
|
-
{
|
|
35691
|
-
placeholder: "Enter a title",
|
|
35692
|
-
value: titleFieldProps.value ?? "",
|
|
35693
|
-
onChange: (event) => {
|
|
35694
|
-
void titleHelpers.setValue(event.target.value);
|
|
35695
|
-
},
|
|
35696
|
-
maxLength: 100
|
|
35697
|
-
}
|
|
35698
|
-
)
|
|
35699
|
-
}
|
|
35700
|
-
) }),
|
|
35701
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
35702
|
-
blocks.TextArea,
|
|
35703
|
-
{
|
|
35704
|
-
className: "field-sizing-content",
|
|
35705
|
-
placeholder: "Explain a description",
|
|
35706
|
-
value: descriptionFieldProps.value ?? "",
|
|
35707
|
-
onChange: (event) => {
|
|
35708
|
-
void descriptionHelpers.setValue(event.target.value);
|
|
35709
|
-
},
|
|
35710
|
-
resize: "vertical",
|
|
35711
|
-
maxLength: 1e3,
|
|
35712
|
-
size: "md"
|
|
35713
|
-
}
|
|
35714
|
-
),
|
|
35715
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
35716
|
-
fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
35717
|
-
FieldSectionWithActions,
|
|
35718
|
-
{
|
|
35719
|
-
fieldSection,
|
|
35720
|
-
index
|
|
35721
|
-
},
|
|
35722
|
-
fieldSection.identifier
|
|
35723
|
-
)),
|
|
35724
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
35725
|
-
blocks.Button,
|
|
35683
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("form", { className: "flex flex-col gap-4", id: formId, onSubmit: handleSubmit, children: [
|
|
35684
|
+
!hideTitle && /* @__PURE__ */ jsxRuntime.jsx(InputWithHelpText, { severity: "danger", helpText: titleMeta.error ?? null, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35685
|
+
blocks.Input.Root,
|
|
35686
|
+
{
|
|
35687
|
+
variant: "outline",
|
|
35688
|
+
size: "md",
|
|
35689
|
+
accentColor: titleMeta.error ? SEVERITY_COLOR_MAPPING.danger : "primary",
|
|
35690
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
35691
|
+
blocks.Input.Field,
|
|
35726
35692
|
{
|
|
35727
|
-
|
|
35728
|
-
|
|
35729
|
-
|
|
35730
|
-
|
|
35731
|
-
|
|
35732
|
-
|
|
35733
|
-
children: [
|
|
35734
|
-
/* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
|
|
35735
|
-
" Add section"
|
|
35736
|
-
]
|
|
35693
|
+
placeholder: "Enter a title",
|
|
35694
|
+
value: titleFieldProps.value ?? "",
|
|
35695
|
+
onChange: (event) => {
|
|
35696
|
+
void titleHelpers.setValue(event.target.value);
|
|
35697
|
+
},
|
|
35698
|
+
maxLength: 100
|
|
35737
35699
|
}
|
|
35738
35700
|
)
|
|
35739
|
-
|
|
35740
|
-
|
|
35741
|
-
|
|
35742
|
-
|
|
35743
|
-
|
|
35744
|
-
|
|
35701
|
+
}
|
|
35702
|
+
) }),
|
|
35703
|
+
!hideDescription && /* @__PURE__ */ jsxRuntime.jsx(
|
|
35704
|
+
blocks.TextArea,
|
|
35705
|
+
{
|
|
35706
|
+
className: "field-sizing-content",
|
|
35707
|
+
placeholder: "Explain a description",
|
|
35708
|
+
value: descriptionFieldProps.value ?? "",
|
|
35709
|
+
onChange: (event) => {
|
|
35710
|
+
void descriptionHelpers.setValue(event.target.value);
|
|
35711
|
+
},
|
|
35712
|
+
resize: "vertical",
|
|
35713
|
+
maxLength: 1e3,
|
|
35714
|
+
size: "md"
|
|
35715
|
+
}
|
|
35716
|
+
),
|
|
35717
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
|
|
35718
|
+
fieldSchema.fields.map((fieldSection, index) => /* @__PURE__ */ jsxRuntime.jsx(FieldSectionWithActions, { fieldSection, index }, fieldSection.identifier)),
|
|
35719
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
35720
|
+
blocks.Button,
|
|
35721
|
+
{
|
|
35722
|
+
className: "mb-4",
|
|
35723
|
+
type: "button",
|
|
35724
|
+
variant: "soft",
|
|
35725
|
+
accentColor: "base",
|
|
35726
|
+
size: "sm",
|
|
35727
|
+
onClick: handleCreateEmptySection,
|
|
35728
|
+
children: [
|
|
35729
|
+
/* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "plus" }),
|
|
35730
|
+
" Add section"
|
|
35731
|
+
]
|
|
35732
|
+
}
|
|
35733
|
+
)
|
|
35734
|
+
] }),
|
|
35735
|
+
!!errors.fields && /* @__PURE__ */ jsxRuntime.jsx(blocks.Text, { size: "xs", accentColor: "danger", children: typeof errors.fields === "string" && errors.fields }),
|
|
35736
|
+
/* @__PURE__ */ jsxRuntime.jsxs(blocks.ButtonGroup, { className: "flex items-center justify-end gap-2", size: "sm", children: [
|
|
35737
|
+
onCancel && /* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "button", variant: "soft", accentColor: "base", onClick: onCancel, children: "Cancel" }),
|
|
35738
|
+
/* @__PURE__ */ jsxRuntime.jsx(blocks.Button, { type: "submit", variant: "surface", children: "Save" })
|
|
35745
35739
|
] })
|
|
35746
35740
|
] });
|
|
35747
35741
|
});
|
|
@@ -35843,20 +35837,10 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35843
35837
|
]
|
|
35844
35838
|
}
|
|
35845
35839
|
),
|
|
35846
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
35847
|
-
blocks.
|
|
35848
|
-
|
|
35849
|
-
|
|
35850
|
-
type: "submit",
|
|
35851
|
-
disabled: !formik$1.isValid,
|
|
35852
|
-
accentColor: "primary",
|
|
35853
|
-
variant: "surface",
|
|
35854
|
-
children: [
|
|
35855
|
-
/* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "check" }),
|
|
35856
|
-
submitText
|
|
35857
|
-
]
|
|
35858
|
-
}
|
|
35859
|
-
)
|
|
35840
|
+
/* @__PURE__ */ jsxRuntime.jsxs(blocks.Button, { ...buttonProps, type: "submit", accentColor: "primary", variant: "surface", children: [
|
|
35841
|
+
/* @__PURE__ */ jsxRuntime.jsx(blocks.LuIcon, { icon: "check" }),
|
|
35842
|
+
submitText
|
|
35843
|
+
] })
|
|
35860
35844
|
] })
|
|
35861
35845
|
]
|
|
35862
35846
|
}
|
|
@@ -35888,6 +35872,8 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35888
35872
|
initialFields,
|
|
35889
35873
|
onSave,
|
|
35890
35874
|
onCancel,
|
|
35875
|
+
hideTitle = false,
|
|
35876
|
+
hideDescription = false,
|
|
35891
35877
|
enableReinitialize = false,
|
|
35892
35878
|
disableRequiredFields = false
|
|
35893
35879
|
} = props;
|
|
@@ -35949,7 +35935,11 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35949
35935
|
}
|
|
35950
35936
|
fieldsToValidate = [...fieldsToValidate, ...fieldSettings];
|
|
35951
35937
|
}
|
|
35952
|
-
const
|
|
35938
|
+
const values = {};
|
|
35939
|
+
for (const field of fieldsToValidate) {
|
|
35940
|
+
values[field.identifier] = get(form, field.identifier);
|
|
35941
|
+
}
|
|
35942
|
+
const fieldErrors = validateFields(fieldsToValidate, values);
|
|
35953
35943
|
if (fieldErrors) {
|
|
35954
35944
|
errors.fields = fieldErrors.fields;
|
|
35955
35945
|
}
|
|
@@ -35992,10 +35982,12 @@ For more information, see https://radix-ui.com/primitives/docs/components/${titl
|
|
|
35992
35982
|
}, [formik$1.values.fields, observer]);
|
|
35993
35983
|
const contextValue = React.useMemo(() => {
|
|
35994
35984
|
return {
|
|
35985
|
+
hideTitle,
|
|
35986
|
+
hideDescription,
|
|
35995
35987
|
disableRequiredFields,
|
|
35996
35988
|
onCancel
|
|
35997
35989
|
};
|
|
35998
|
-
}, [disableRequiredFields, onCancel]);
|
|
35990
|
+
}, [disableRequiredFields, hideDescription, hideTitle, onCancel]);
|
|
35999
35991
|
return /* @__PURE__ */ jsxRuntime.jsx(FormBuilderContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(FieldSchemaContext, { value: schema, children: /* @__PURE__ */ jsxRuntime.jsx(formik.FormikProvider, { value: formik$1, children }) }) });
|
|
36000
35992
|
});
|
|
36001
35993
|
FormBuilderRoot.displayName = "FormBuilderRoot";
|