@digigov/form 2.0.0-a594a958 → 2.0.0-a64dc016

package/FieldArray/FormDialog/index.js

@@ -1,110 +1,98 @@
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState
-} from "react";
+import react, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useFieldArray } from "react-hook-form";
-import { ArrayDisplay } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay";
-import { ArrayEditModal } from "@digigov/form/FieldArray/FormDialog/ArrayEditModal";
-import { useFormContext } from "@digigov/form/FormContext";
-import { useModal } from "@digigov/ui/app/Modal";
-import { Button } from "@digigov/ui/form/Button";
-import { Hint } from "@digigov/ui/typography/Hint";
-const FormDialog = React.forwardRef(
-  ({
-    name: fieldArrayName,
-    control,
-    error,
-    getValues,
-    Field,
-    sortable,
-    ...customField
-  }, ref) => {
+import { ArrayDisplay } from "./ArrayDisplay/index.js";
+import { ArrayEditModal } from "./ArrayEditModal.js";
+import { useFormContext } from "../../FormContext.js";
+import { useModal } from "@digigov/ui/app/Modal/index.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const FormDialog = /*#__PURE__*/ react.forwardRef(({ name: fieldArrayName, control, error, getValues, Field, sortable, ...customField }, ref)=>{
     const [isAppending, setIsAppending] = useState(false);
     const [editingIndex, setEditingIndex] = useState(0);
     const { fields, append, remove, update, move } = useFieldArray({
-      control,
-      name: fieldArrayName
+        control,
+        name: fieldArrayName
     });
     const { open, close, registerModal } = useModal();
     const currentLength = fields.length;
     const arrayItemName = isAppending ? `${fieldArrayName}.${currentLength}` : `${fieldArrayName}.${editingIndex}`;
-    useEffect(() => {
-      if (isAppending) {
-        open(`modal-${fieldArrayName}`);
-      }
-    }, [isAppending, fieldArrayName, open]);
+    useEffect(()=>{
+        if (isAppending) open(`modal-${fieldArrayName}`);
+    }, [
+        isAppending,
+        fieldArrayName,
+        open
+    ]);
     const fieldArrayValues = getValues(fieldArrayName);
-    const ofField = useMemo(
-      () => ({
-        ...customField.extra?.of,
-        name: arrayItemName
-      }),
-      [arrayItemName, customField.extra?.of]
-    );
-    if (ofField.type !== "object") {
-      ofField.name = ofField.key ?? fieldArrayName;
-      ofField.key = ofField.key ?? fieldArrayName;
+    const ofField = useMemo(()=>({
+            ...customField.extra?.of,
+            name: arrayItemName
+        }), [
+        arrayItemName,
+        customField.extra?.of
+    ]);
+    if ('object' !== ofField.type) {
+        ofField.name = ofField.key ?? fieldArrayName;
+        ofField.key = ofField.key ?? fieldArrayName;
     }
-    const defaultValue = useMemo(() => {
-      if (isAppending) {
-        if (ofField.type === "object") return ofField.defaultValue;
-        else return { [ofField.name]: ofField.defaultValue };
-      }
-      if (ofField.type === "object") return getValues(ofField.name);
-      else return { [ofField.name]: fieldArrayValues?.[editingIndex] };
+    const defaultValue = useMemo(()=>{
+        if (isAppending) if ('object' === ofField.type) return ofField.defaultValue;
+        else return {
+            [ofField.name]: ofField.defaultValue
+        };
+        if ('object' === ofField.type) return getValues(ofField.name);
+        return {
+            [ofField.name]: fieldArrayValues?.[editingIndex]
+        };
     }, [
-      editingIndex,
-      fieldArrayValues,
-      getValues,
-      isAppending,
-      ofField.defaultValue,
-      ofField.name,
-      ofField.type
+        editingIndex,
+        fieldArrayValues,
+        getValues,
+        isAppending,
+        ofField.defaultValue,
+        ofField.name,
+        ofField.type
     ]);
     const hasCommitedValues = fields.length > 0 || !!fieldArrayValues?.length;
-    const title = useMemo(() => {
-      if (!customField.extra?.label.object.title) return null;
-      let title2 = customField.extra.label.object.title;
-      if (customField.extra.label.object.titleNumbering)
-        title2 += ` ${currentLength + 1}`;
-      return title2;
+    const title = useMemo(()=>{
+        if (!customField.extra?.label.object.title) return null;
+        let title = customField.extra.label.object.title;
+        if (customField.extra.label.object.titleNumbering) title += ` ${currentLength + 1}`;
+        return title;
     }, [
-      currentLength,
-      customField.extra?.label.object.title,
-      customField.extra?.label.object.titleNumbering
+        currentLength,
+        customField.extra?.label.object.title,
+        customField.extra?.label.object.titleNumbering
     ]);
     const focusReturnRef = useRef(null);
-    const closeModal = useCallback(() => {
-      close();
-      if (focusReturnRef.current) {
-        focusReturnRef.current.focus();
-        focusReturnRef.current = null;
-      }
-    }, [close]);
+    const closeModal = useCallback(()=>{
+        close();
+        if (focusReturnRef.current) {
+            focusReturnRef.current.focus();
+            focusReturnRef.current = null;
+        }
+    }, [
+        close
+    ]);
     const { clearErrors, setError } = useFormContext();
-    const handleEditOrAppend = useCallback(
-      (data) => {
+    const handleEditOrAppend = useCallback((data)=>{
         if (isAppending) {
-          setIsAppending(false);
-          if (ofField.type === "object") append(data);
-          else if (data) {
-            const submittedValue = data[ofField.key ?? fieldArrayName];
-            if (submittedValue) append(submittedValue);
-          }
+            setIsAppending(false);
+            if ('object' === ofField.type) append(data);
+            else if (data) {
+                const submittedValue = data[ofField.key ?? fieldArrayName];
+                if (submittedValue) append(submittedValue);
+            }
         } else {
-          clearErrors(`${fieldArrayName}.${editingIndex}`);
-          if (ofField.type === "object") update(editingIndex, data);
-          else if (data) {
-            const submittedValue = data[ofField.key ?? fieldArrayName];
-            if (submittedValue) update(editingIndex, submittedValue);
-          }
+            clearErrors(`${fieldArrayName}.${editingIndex}`);
+            if ('object' === ofField.type) update(editingIndex, data);
+            else if (data) {
+                const submittedValue = data[ofField.key ?? fieldArrayName];
+                if (submittedValue) update(editingIndex, submittedValue);
+            }
         }
         closeModal();
-      },
-      [
+    }, [
         clearErrors,
         append,
         closeModal,
@@ -114,121 +102,98 @@ const FormDialog = React.forwardRef(
         ofField.key,
         ofField.type,
         update
-      ]
-    );
-    const handleCancel = useCallback(() => {
-      if (isAppending) setIsAppending(false);
-      closeModal();
-    }, [closeModal, isAppending]);
-    const handleOpenEditModal = useCallback(
-      (index) => {
-        if (document.activeElement instanceof HTMLElement) {
-          focusReturnRef.current = document.activeElement;
-        }
+    ]);
+    const handleCancel = useCallback(()=>{
+        if (isAppending) setIsAppending(false);
+        closeModal();
+    }, [
+        closeModal,
+        isAppending
+    ]);
+    const handleOpenEditModal = useCallback((index)=>{
+        if (document.activeElement instanceof HTMLElement) focusReturnRef.current = document.activeElement;
         setEditingIndex(index);
         open(`modal-${fieldArrayName}`);
-      },
-      [fieldArrayName, open]
-    );
-    const handleAddClick = useCallback((ev) => {
-      ev.preventDefault();
-      if (document.activeElement instanceof HTMLElement) {
-        focusReturnRef.current = document.activeElement;
-      }
-      setIsAppending(true);
+    }, [
+        fieldArrayName,
+        open
+    ]);
+    const handleAddClick = useCallback((ev)=>{
+        ev.preventDefault();
+        if (document.activeElement instanceof HTMLElement) focusReturnRef.current = document.activeElement;
+        setIsAppending(true);
     }, []);
-    const handleRemove = useCallback(
-      (index) => {
+    const handleRemove = useCallback((index)=>{
         remove(index);
         if (error) {
-          for (let i = index; i < fields.length - 1; i++) {
-            clearErrors(`${fieldArrayName}.${i}`);
-            if (error[i + 1]) {
-              Object.keys(error[i + 1]).forEach((fieldName) => {
-                setError(
-                  `${fieldArrayName}.${i}.${fieldName}`,
-                  error[i + 1][fieldName]
-                );
-              });
+            for(let i = index; i < fields.length - 1; i++){
+                clearErrors(`${fieldArrayName}.${i}`);
+                if (error[i + 1]) Object.keys(error[i + 1]).forEach((fieldName)=>{
+                    setError(`${fieldArrayName}.${i}.${fieldName}`, error[i + 1][fieldName]);
+                });
             }
-          }
-          clearErrors(`${fieldArrayName}.${fields.length - 1}`);
+            clearErrors(`${fieldArrayName}.${fields.length - 1}`);
         }
-      },
-      [clearErrors, error, fieldArrayName, fields.length, remove, setError]
-    );
-    const handleMove = useCallback(
-      (from, to) => {
+    }, [
+        clearErrors,
+        error,
+        fieldArrayName,
+        fields.length,
+        remove,
+        setError
+    ]);
+    const handleMove = useCallback((from, to)=>{
         if (error && (error[from] || error[to])) {
-          const temp = error[from];
-          error[from] = error[to];
-          error[to] = temp;
+            const temp = error[from];
+            error[from] = error[to];
+            error[to] = temp;
         }
         move(from, to);
-      },
-      [error, move]
-    );
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, !hasCommitedValues && /* @__PURE__ */ React.createElement(Hint, { ...customField.extra?.label.object?.nothing_added_props }, customField.extra?.label.object?.nothing_added), /* @__PURE__ */ React.createElement(
-      ArrayEditModal,
-      {
+    }, [
+        error,
+        move
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, !hasCommitedValues && /*#__PURE__*/ react.createElement(Hint, customField.extra?.label.object?.nothing_added_props, customField.extra?.label.object?.nothing_added), /*#__PURE__*/ react.createElement(ArrayEditModal, {
         editOrAppend: handleEditOrAppend,
         cancel: handleCancel,
-        type: isAppending ? "append" : "edit",
+        type: isAppending ? 'append' : 'edit',
         appendLabel: customField.extra?.label.object.append.label,
         appendProps: customField.extra?.label.object.append.props,
         editLabel: customField.extra?.label.object.edit.label,
         editProps: customField.extra?.label.object.edit.props,
         cancelLabel: customField.extra?.label.object.cancel.label,
         cancelProps: customField.extra?.label.object.cancel.props,
-        ofField,
-        title,
+        ofField: ofField,
+        title: title,
         hint: customField.label?.secondary,
         name: fieldArrayName,
         defaultValue: defaultValue || void 0,
-        Field,
+        Field: Field,
         error: error?.[editingIndex] ? error[editingIndex] : void 0,
         ...registerModal(`modal-${fieldArrayName}`)
-      }
-    ), hasCommitedValues && /* @__PURE__ */ React.createElement(
-      ArrayDisplay,
-      {
-        fieldArrayName,
-        fieldArrayValues,
-        ofField,
-        customField,
+    }), hasCommitedValues && /*#__PURE__*/ react.createElement(ArrayDisplay, {
+        fieldArrayName: fieldArrayName,
+        fieldArrayValues: fieldArrayValues,
+        ofField: ofField,
+        customField: customField,
         onEdit: handleOpenEditModal,
         onRemove: handleRemove,
         move: handleMove,
-        sortable,
-        error
-      }
-    ), customField.extra?.editVariant !== "display" && // add noAdd: necessary for dilosi's 'fixed' fieldsets
-    !customField.extra?.noAdd && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: customField.extra?.label.object?.addButtonVariant === "link" ? "my-2 px-2 py-2 bg-gray-200 border-t border-b border-gray-400" : "",
+        sortable: sortable,
+        error: error
+    }), customField.extra?.editVariant !== 'display' && !customField.extra?.noAdd && /*#__PURE__*/ react.createElement("div", {
+        className: customField.extra?.label.object?.addButtonVariant === 'link' ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400' : '',
         ...customField?.extra?.label.object?.buttonGroup
-      },
-      /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          ref,
-          type: "button",
-          name: `${fieldArrayName}-add-object`,
-          color: "secondary",
-          variant: customField.extra?.label.object?.addButtonVariant,
-          onClick: handleAddClick,
-          disabled: customField?.editable === false || customField.extra?.editVariant === "noinput" || fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
-        },
-        customField.extra?.label.object?.add
-      )
-    ));
-  }
-);
-FormDialog.displayName = "FormDialog";
-var FormDialog_default = FormDialog;
-export {
-  FormDialog,
-  FormDialog_default as default
-};
-//# sourceMappingURL=index.js.map
+    }, /*#__PURE__*/ react.createElement(Button, {
+        ref: ref,
+        type: "button",
+        name: `${fieldArrayName}-add-object`,
+        color: "secondary",
+        variant: customField.extra?.label.object?.addButtonVariant,
+        onClick: handleAddClick,
+        disabled: customField?.editable === false || customField.extra?.editVariant === 'noinput' || fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
+    }, customField.extra?.label.object?.add)));
+});
+FormDialog.displayName = 'FormDialog';
+const FieldArray_FormDialog = FormDialog;
+export { FormDialog, FieldArray_FormDialog as default };

package/FieldArray/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ErrorOption, UseFormReturn } from 'react-hook-form';
-import type { FieldProps } from '@digigov/form/Field/types';
-import type { registerFieldFocus } from '@digigov/form/types';
+import type { FieldProps } from '../Field/types.js';
+import type { registerFieldFocus } from '../types.js';
 export interface FieldArrayProps extends FieldProps {
     control: UseFormReturn['control'];
     trigger: UseFormReturn['trigger'];

package/FieldArray/index.js

@@ -1,93 +1,66 @@
-import React, { useEffect, useRef } from "react";
-import { FieldBaseContainer } from "@digigov/form/Field/FieldBaseContainer";
-import BaseFieldArray from "@digigov/form/FieldArray/BaseFieldArray";
-import { FormDialog } from "@digigov/form/FieldArray/FormDialog";
-const FieldArray = ({
-  name,
-  trigger,
-  register,
-  clearErrors,
-  control,
-  formState,
-  error,
-  getValues,
-  setValue,
-  layout,
-  reset,
-  resetField,
-  label,
-  Field,
-  registerFieldFocus,
-  ...customField
-}) => {
-  const buttonRef = useRef(null);
-  useEffect(() => {
-    let unregister = () => {
-    };
-    if (buttonRef.current) {
-      unregister = registerFieldFocus(name, buttonRef.current);
-    }
-    return () => {
-      unregister(name);
-    };
-  }, [name, registerFieldFocus]);
-  const hasItemErrors = !!error && Object.keys(error).some((key) => /^\d+$/.test(key));
-  useEffect(() => {
-    if (!hasItemErrors) clearErrors(name);
-  }, [clearErrors, hasItemErrors, name]);
-  return /* @__PURE__ */ React.createElement(
-    FieldBaseContainer,
-    {
-      label,
-      layout,
-      register,
-      error: error?.message ? error : void 0,
-      hasError: !!error,
-      wrapper: "fieldset",
-      name,
-      labelSize: customField.extra?.labelSize,
-      controlled: true
-    },
-    customField.extra?.variant === "dialog" ? /* @__PURE__ */ React.createElement(
-      FormDialog,
-      {
-        ref: buttonRef,
+import react, { useEffect, useRef } from "react";
+import { FieldBaseContainer } from "../Field/FieldBaseContainer.js";
+import BaseFieldArray from "./BaseFieldArray.js";
+import { FormDialog } from "./FormDialog/index.js";
+const FieldArray = ({ name, trigger, register, clearErrors, control, formState, error, getValues, setValue, layout, reset, resetField, label, Field, registerFieldFocus, ...customField })=>{
+    const buttonRef = useRef(null);
+    useEffect(()=>{
+        let unregister = ()=>{};
+        if (buttonRef.current) unregister = registerFieldFocus(name, buttonRef.current);
+        return ()=>{
+            unregister(name);
+        };
+    }, [
         name,
-        trigger,
-        register,
+        registerFieldFocus
+    ]);
+    const hasItemErrors = !!error && Object.keys(error).some((key)=>/^\d+$/.test(key));
+    useEffect(()=>{
+        if (!hasItemErrors) clearErrors(name);
+    }, [
         clearErrors,
-        control,
-        formState,
-        error,
-        getValues,
-        setValue,
-        layout,
-        label,
-        Field,
-        reset,
-        resetField,
+        hasItemErrors,
+        name
+    ]);
+    return /*#__PURE__*/ react.createElement(FieldBaseContainer, {
+        label: label,
+        layout: layout,
+        register: register,
+        error: error?.message ? error : void 0,
+        hasError: !!error,
+        wrapper: "fieldset",
+        name: name,
+        labelSize: customField.extra?.labelSize,
+        controlled: true
+    }, customField.extra?.variant === 'dialog' ? /*#__PURE__*/ react.createElement(FormDialog, {
+        ref: buttonRef,
+        name: name,
+        trigger: trigger,
+        register: register,
+        clearErrors: clearErrors,
+        control: control,
+        formState: formState,
+        error: error,
+        getValues: getValues,
+        setValue: setValue,
+        layout: layout,
+        label: label,
+        Field: Field,
+        reset: reset,
+        resetField: resetField,
         sortable: customField.extra.sortable,
         ...customField
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      BaseFieldArray,
-      {
+    }) : /*#__PURE__*/ react.createElement(BaseFieldArray, {
         ref: buttonRef,
-        name,
-        register,
-        control,
-        formState,
-        error,
-        getValues,
-        Field,
+        name: name,
+        register: register,
+        control: control,
+        formState: formState,
+        error: error,
+        getValues: getValues,
+        Field: Field,
         ...customField
-      }
-    )
-  );
-};
-var FieldArray_default = FieldArray;
-export {
-  FieldArray,
-  FieldArray_default as default
+    }));
 };
-//# sourceMappingURL=index.js.map
+const src_FieldArray = FieldArray;
+export { FieldArray, src_FieldArray as default };

package/FieldObject/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ErrorOption, UseFormReturn } from 'react-hook-form';
-import type { FieldProps } from '@digigov/form/Field/types';
-import type { FieldSpec } from '@digigov/form/types';
+import type { FieldProps } from '../Field/types.js';
+import type { FieldSpec } from '../types.js';
 export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
     control: UseFormReturn['control'];
     register: UseFormReturn['register'];