@overmap-ai/core 1.0.38-component-fields.1 → 1.0.38-component-fields.2

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.
@@ -4,7 +4,6 @@ interface FieldWithActionsProps {
4
4
  field: ISerializedField;
5
5
  index: number;
6
6
  sectionIndex: number;
7
- takenLabels: string[];
8
7
  remove: () => void;
9
8
  }
10
9
  export declare const FieldWithActions: import("react").MemoExoticComponent<(props: FieldWithActionsProps) => import("react/jsx-runtime").JSX.Element>;
@@ -6,6 +6,11 @@ interface FormBuilderProps {
6
6
  onSave: FormBuilderSaveHandler;
7
7
  /** A revision of an existing form to edit. To create a new form, pass `undefined`. */
8
8
  revision?: UserFormRevision;
9
+ initialTitle?: string;
10
+ /** @default true */
11
+ showExplainerText?: boolean;
12
+ /** @default false */
13
+ showSectionsOnly?: boolean;
9
14
  }
10
15
  export declare const FormBuilder: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<FormBuilderProps & import("react").RefAttributes<HTMLDivElement>>>;
11
16
  export {};
@@ -13,8 +13,6 @@ export declare function remove<T>(list: T[], index: number): T[];
13
13
  export declare const makeIdentifier: (existing: unknown, label: string) => string;
14
14
  export declare const findFieldByIdentifier: (fields: ISerializedField[], identifier?: string) => ISerializedField | null;
15
15
  export declare const makeConditionalSourceFields: (sections: SerializedFieldSection[], index: number) => (import("../typings").SerializedTextField | import("../typings").SerializedBooleanField | import("../typings").SerializedNumberField | import("../typings").SerializedDateField | import("../typings").SerializedStringField | import("../typings").SerializedSelectField | import("../typings").SerializedMultiStringField | import("../typings").SerializedMultiSelectField | import("../typings").SerializedUploadField)[];
16
- export declare const getTakenFieldLabels: (fields: SerializedFieldSection[]) => string[];
17
- export declare const incrementFieldLabel: (label: string, takenLabels: string[]) => string;
18
16
  export type NewFieldInitialValues = Omit<ISerializedField, "identifier"> & {
19
17
  label: string;
20
18
  };
@@ -9070,21 +9070,10 @@ const findFieldByIdentifier = (fields, identifier) => {
9070
9070
  const makeConditionalSourceFields = (sections, index2) => {
9071
9071
  return sections.filter((_, i) => i < index2).flatMap((field) => field.fields);
9072
9072
  };
9073
- const getTakenFieldLabels = (fields) => {
9074
- return fields.flatMap((field) => [...field.fields.map((f) => f.label), field.label]).filter((id) => id !== null);
9075
- };
9076
- const incrementFieldLabel = (label, takenLabels) => {
9077
- let count = 1;
9078
- let newLabel = `${label} (${count})`;
9079
- while (takenLabels.includes(newLabel)) {
9080
- newLabel = `${label} (${++count})`;
9081
- }
9082
- return newLabel;
9083
- };
9084
- const createNewField = (parentPath, index2, initialValues2, values, setFieldValue) => {
9085
- const { label } = initialValues2;
9073
+ const createNewField = (parentPath, index2, initialValues, values, setFieldValue) => {
9074
+ const { label } = initialValues;
9086
9075
  const newField = {
9087
- ...initialValues2,
9076
+ ...initialValues,
9088
9077
  identifier: makeIdentifier(null, label)
9089
9078
  };
9090
9079
  const parent = get(values, parentPath);
@@ -9098,11 +9087,11 @@ const createNewField = (parentPath, index2, initialValues2, values, setFieldValu
9098
9087
  void setFieldValue(parentPath, updatedFields).then();
9099
9088
  };
9100
9089
  const createNewEmptySection = (index2, values, setFieldValue) => {
9101
- const initialValues2 = {
9090
+ const initialValues = {
9102
9091
  ...emptySection(),
9103
9092
  label: ""
9104
9093
  };
9105
- createNewField("fields", index2, initialValues2, values, setFieldValue);
9094
+ createNewField("fields", index2, initialValues, values, setFieldValue);
9106
9095
  };
9107
9096
  const useFieldReordering = () => {
9108
9097
  const { showError } = useToast();
@@ -10590,19 +10579,19 @@ PatchField.displayName = "PatchField";
10590
10579
  const PatchFormProvider = memo(
10591
10580
  forwardRef((props, ref) => {
10592
10581
  const { children, schema, values, onPatch, onError, requiresDiff = true, onDirtyChange, ...rest } = props;
10593
- const initialValues2 = useMemo(() => initialFormValues(schema.fields, values), [schema.fields, values]);
10582
+ const initialValues = useMemo(() => initialFormValues(schema.fields, values), [schema.fields, values]);
10594
10583
  const getDiff = useCallback(
10595
10584
  (values2) => {
10596
10585
  const diff = {};
10597
10586
  for (const key in values2) {
10598
10587
  const value = values2[key];
10599
- if (value !== initialValues2[key] && value !== void 0) {
10588
+ if (value !== initialValues[key] && value !== void 0) {
10600
10589
  diff[key] = value;
10601
10590
  }
10602
10591
  }
10603
10592
  return diff;
10604
10593
  },
10605
- [initialValues2]
10594
+ [initialValues]
10606
10595
  );
10607
10596
  const handlePatch = useCallback(
10608
10597
  (values2) => {
@@ -10628,7 +10617,7 @@ const PatchFormProvider = memo(
10628
10617
  [schema, onDirtyChange, onError, getDiff]
10629
10618
  );
10630
10619
  const formik = useFormik({
10631
- initialValues: initialValues2,
10620
+ initialValues,
10632
10621
  onSubmit: handlePatch,
10633
10622
  validate,
10634
10623
  // only validate the entire form on submit
@@ -10646,9 +10635,9 @@ const PatchFormProvider = memo(
10646
10635
  const { errors, resetForm } = formik;
10647
10636
  useEffect(() => {
10648
10637
  if (hasKeys(errors)) {
10649
- resetForm({ values: initialValues2, errors: {} });
10638
+ resetForm({ values: initialValues, errors: {} });
10650
10639
  }
10651
- }, [errors, initialValues2, resetForm]);
10640
+ }, [errors, initialValues, resetForm]);
10652
10641
  return /* @__PURE__ */ jsx(FormikProvider, { value: formik, children: /* @__PURE__ */ jsx("form", { ...rest, ref, onSubmit: formik.handleSubmit, onChange: handleChange, children }) });
10653
10642
  })
10654
10643
  );
@@ -11097,7 +11086,7 @@ const FieldBuilder = memo((props) => {
11097
11086
  });
11098
11087
  FieldBuilder.displayName = "FieldBuilder";
11099
11088
  const FieldWithActions = memo((props) => {
11100
- const { field, index: index2, sectionIndex, takenLabels, remove: remove2 } = props;
11089
+ const { field, index: index2, sectionIndex, remove: remove2 } = props;
11101
11090
  const { setFieldValue, values } = useFormikContext();
11102
11091
  const { reorderField } = useFieldReordering();
11103
11092
  const { showError } = useToast();
@@ -11114,10 +11103,10 @@ const FieldWithActions = memo((props) => {
11114
11103
  const label = field.label ?? "Unlabelled field";
11115
11104
  const duplicatedField = {
11116
11105
  ...field,
11117
- label: incrementFieldLabel(label, takenLabels)
11106
+ label
11118
11107
  };
11119
11108
  createNewField(parentPath, index2 + 1, duplicatedField, values, setFieldValue);
11120
- }, [field, takenLabels, parentPath, index2, values, setFieldValue]);
11109
+ }, [field, parentPath, index2, values, setFieldValue]);
11121
11110
  const moveField = useCallback(
11122
11111
  (direction) => {
11123
11112
  const srcSectionIndex = sectionIndex;
@@ -11204,7 +11193,6 @@ const FieldSectionWithActions = memo((props) => {
11204
11193
  const { setFieldValue, values } = useFormikContext();
11205
11194
  const alertDialog = useAlertDialog();
11206
11195
  const { reorderSection } = useFieldReordering();
11207
- const takenFieldLabels = getTakenFieldLabels(values.fields);
11208
11196
  const removeSectionConditions = useCallback(
11209
11197
  (sectionsToUpdate, allSections) => {
11210
11198
  for (const section of sectionsToUpdate) {
@@ -11308,18 +11296,15 @@ const FieldSectionWithActions = memo((props) => {
11308
11296
  );
11309
11297
  const duplicateSection = useCallback(() => {
11310
11298
  const fieldLabel = field.label ?? "Untitled section";
11311
- const newSectionLabel = incrementFieldLabel(fieldLabel, takenFieldLabels);
11312
- const newFields = field.fields.map((f) => {
11313
- const newLabel = incrementFieldLabel(f.label, takenFieldLabels);
11299
+ const newFields = field.fields.map((oldField) => {
11314
11300
  return {
11315
- ...f,
11316
- label: newLabel,
11317
- identifier: makeIdentifier(null, newLabel)
11301
+ ...oldField,
11302
+ identifier: makeIdentifier(null, oldField.label)
11318
11303
  };
11319
11304
  });
11320
- const duplicatedField = { ...field, label: newSectionLabel, fields: newFields };
11305
+ const duplicatedField = { ...field, label: fieldLabel, fields: newFields };
11321
11306
  createNewField("fields", sectionIndex + 1, duplicatedField, values, setFieldValue);
11322
- }, [field, takenFieldLabels, sectionIndex, values, setFieldValue]);
11307
+ }, [field, sectionIndex, values, setFieldValue]);
11323
11308
  const handleCreateField = useCallback(
11324
11309
  (type) => {
11325
11310
  createNewField(
@@ -11366,8 +11351,7 @@ const FieldSectionWithActions = memo((props) => {
11366
11351
  sectionIndex,
11367
11352
  remove: () => {
11368
11353
  removeField(i);
11369
- },
11370
- takenLabels: takenFieldLabels
11354
+ }
11371
11355
  },
11372
11356
  child.identifier
11373
11357
  )),
@@ -11542,17 +11526,12 @@ const FieldsEditor = memo(() => {
11542
11526
  ) }) });
11543
11527
  });
11544
11528
  FieldsEditor.displayName = "FieldsEditor";
11545
- const initialValues = {
11546
- title: "",
11547
- description: "",
11548
- fields: [{ ...emptySection(makeIdentifier(null, "")), label: "" }]
11549
- };
11550
11529
  const previewSubmit = () => {
11551
11530
  alert("This is a form preview, your data will not be saved.");
11552
11531
  };
11553
11532
  const FormBuilder = memo(
11554
11533
  forwardRef((props, ref) => {
11555
- const { onCancel, onSave, revision } = props;
11534
+ const { onCancel, onSave, revision, initialTitle, showExplainerText = true, showSectionsOnly = false } = props;
11556
11535
  const { showError } = useToast();
11557
11536
  const validate = useCallback(
11558
11537
  (form) => {
@@ -11598,6 +11577,14 @@ const FormBuilder = memo(
11598
11577
  },
11599
11578
  [showError]
11600
11579
  );
11580
+ const initialValues = useMemo(
11581
+ () => ({
11582
+ title: initialTitle ?? "",
11583
+ description: "",
11584
+ fields: [{ ...emptySection(makeIdentifier(null, "")), label: "" }]
11585
+ }),
11586
+ [initialTitle]
11587
+ );
11601
11588
  const formik = useFormik({
11602
11589
  initialValues: wrapRootFieldsWithFieldSection(revision) ?? initialValues,
11603
11590
  validate,
@@ -11618,7 +11605,7 @@ const FormBuilder = memo(
11618
11605
  ] }) })
11619
11606
  ] }),
11620
11607
  /* @__PURE__ */ jsxs(Tabs.Content, { value: "edit", children: [
11621
- /* @__PURE__ */ jsxs(Text, { children: [
11608
+ showExplainerText && /* @__PURE__ */ jsxs(Text, { children: [
11622
11609
  "Create your form using various field types. Sections can be",
11623
11610
  " ",
11624
11611
  /* @__PURE__ */ jsx("strong", { children: "conditionally rendered" }),
@@ -11628,55 +11615,57 @@ const FormBuilder = memo(
11628
11615
  ] }),
11629
11616
  /* @__PURE__ */ jsx(Flex, { asChild: true, direction: "column", gap: "2", mt: "3", children: /* @__PURE__ */ jsxs("form", { id: formId, onSubmit: formik.handleSubmit, children: [
11630
11617
  /* @__PURE__ */ jsxs(FormikProvider, { value: formik, children: [
11631
- /* @__PURE__ */ jsx(
11632
- PatchField,
11633
- {
11634
- name: "title",
11635
- render: ({ setValue, value, meta }) => /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: meta.error ?? null, children: /* @__PURE__ */ jsx(
11636
- Input,
11637
- {
11638
- className: classNames$1(styles$7.title, {
11639
- [styles$7.error]: meta.error
11640
- }),
11641
- placeholder: "Form title",
11642
- value,
11643
- onChange: (event) => {
11644
- setValue(event.target.value);
11645
- },
11646
- maxLength: 100,
11647
- showInputLength: false,
11648
- variant: "ghost",
11649
- size: "large"
11650
- }
11651
- ) })
11652
- }
11653
- ),
11654
- /* @__PURE__ */ jsx(
11655
- PatchField,
11656
- {
11657
- name: "description",
11658
- render: ({ setValue, value }) => /* @__PURE__ */ jsx(
11659
- TextArea,
11660
- {
11661
- className: styles$7.description,
11662
- placeholder: "Explain the purpose of this form",
11663
- value,
11664
- onChange: (event) => {
11665
- setValue(event.target.value);
11666
- },
11667
- resize: "vertical",
11668
- maxLength: 1e3,
11669
- showInputLength: false,
11670
- variant: "ghost"
11671
- }
11672
- )
11673
- }
11674
- ),
11618
+ !showSectionsOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
11619
+ /* @__PURE__ */ jsx(
11620
+ PatchField,
11621
+ {
11622
+ name: "title",
11623
+ render: ({ setValue, value, meta }) => /* @__PURE__ */ jsx(InputWithHelpText, { severity: "danger", helpText: meta.error ?? null, children: /* @__PURE__ */ jsx(
11624
+ Input,
11625
+ {
11626
+ className: classNames$1(styles$7.title, {
11627
+ [styles$7.error]: meta.error
11628
+ }),
11629
+ placeholder: "Form title",
11630
+ value,
11631
+ onChange: (event) => {
11632
+ setValue(event.target.value);
11633
+ },
11634
+ maxLength: 100,
11635
+ showInputLength: false,
11636
+ variant: "ghost",
11637
+ size: "large"
11638
+ }
11639
+ ) })
11640
+ }
11641
+ ),
11642
+ /* @__PURE__ */ jsx(
11643
+ PatchField,
11644
+ {
11645
+ name: "description",
11646
+ render: ({ setValue, value }) => /* @__PURE__ */ jsx(
11647
+ TextArea,
11648
+ {
11649
+ className: styles$7.description,
11650
+ placeholder: "Explain the purpose of this form",
11651
+ value,
11652
+ onChange: (event) => {
11653
+ setValue(event.target.value);
11654
+ },
11655
+ resize: "vertical",
11656
+ maxLength: 1e3,
11657
+ showInputLength: false,
11658
+ variant: "ghost"
11659
+ }
11660
+ )
11661
+ }
11662
+ )
11663
+ ] }),
11675
11664
  /* @__PURE__ */ jsx(FieldsEditor, {}),
11676
11665
  /* @__PURE__ */ jsx(Text, { severity: "danger", size: "1", children: typeof formik.errors.fields === "string" && formik.errors.fields })
11677
11666
  ] }),
11678
11667
  /* @__PURE__ */ jsxs(Flex, { className: styles$7.floatingButtonContainer, align: "center", justify: "end", gap: "2", children: [
11679
- /* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
11668
+ onCancel && /* @__PURE__ */ jsx(Button, { type: "button", variant: "solid", severity: "info", onClick: onCancel, children: "Cancel" }),
11680
11669
  /* @__PURE__ */ jsx(Button, { type: "submit", children: "Save form" })
11681
11670
  ] })
11682
11671
  ] }) })