@geowiki/design-system 0.16.9-dev.14 → 0.16.9-dev.16

package/dist/index.mjs

@@ -1200,48 +1200,48 @@ var isNullOrUndefined = (value) => value == null;
 var isObjectType = (value) => typeof value === "object";
 var isObject = (value) => !isNullOrUndefined(value) && !Array.isArray(value) && isObjectType(value) && !isDateObject(value);
 var getEventValue = (event) => isObject(event) && event.target ? isCheckBoxInput(event.target) ? event.target.checked : event.target.value : event;
-var getNodeParentName = (name) => name.substring(0, name.search(/\.\d+(\.|$)/)) || name;
-var isNameInFieldArray = (names, name) => names.has(getNodeParentName(name));
+var isNameInFieldArray = (names, name) => name.split(".").some((part, index, arr) => !isNaN(Number(part)) && names.has(arr.slice(0, index).join(".")));
 var isPlainObject = (tempObject) => {
   const prototypeCopy = tempObject.constructor && tempObject.constructor.prototype;
   return isObject(prototypeCopy) && prototypeCopy.hasOwnProperty("isPrototypeOf");
 };
 var isWeb = typeof window !== "undefined" && typeof window.HTMLElement !== "undefined" && typeof document !== "undefined";
 function cloneObject(data) {
-  let copy;
-  const isArray = Array.isArray(data);
   if (data instanceof Date) {
-    copy = new Date(data);
-  } else if (data instanceof Set) {
-    copy = new Set(data);
-  } else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) && (isArray || isObject(data))) {
-    copy = isArray ? [] : {};
-    if (!isArray && !isPlainObject(data)) {
-      copy = data;
-    } else {
-      for (const key in data) {
-        if (data.hasOwnProperty(key)) {
-          copy[key] = cloneObject(data[key]);
-        }
-      }
-    }
-  } else {
+    return new Date(data);
+  }
+  const isFileListInstance = typeof FileList !== "undefined" && data instanceof FileList;
+  if (isWeb && (data instanceof Blob || isFileListInstance)) {
     return data;
   }
+  const isArray = Array.isArray(data);
+  if (!isArray && !(isObject(data) && isPlainObject(data))) {
+    return data;
+  }
+  const copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
+  for (const key in data) {
+    if (Object.prototype.hasOwnProperty.call(data, key)) {
+      copy[key] = cloneObject(data[key]);
+    }
+  }
   return copy;
 }
-var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var isKey = (value) => /^\w*$/.test(value);
 var isUndefined = (val) => val === void 0;
+var compact = (value) => Array.isArray(value) ? value.filter(Boolean) : [];
+var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
 var get = (object, path, defaultValue) => {
   if (!path || !isObject(object)) {
     return defaultValue;
   }
-  const result = compact(path.split(/[,[\].]+?/)).reduce((result2, key) => isNullOrUndefined(result2) ? result2 : result2[key], object);
+  const paths = isKey(path) ? [path] : stringToPath(path);
+  const result = paths.reduce((result2, key) => {
+    return isNullOrUndefined(result2) ? void 0 : result2[key];
+  }, object);
   return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
 };
 var isBoolean = (value) => typeof value === "boolean";
-var isKey = (value) => /^\w*$/.test(value);
-var stringToPath = (input) => compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
+var isFunction = (value) => typeof value === "function";
 var set = (object, path, value) => {
   let index = -1;
   const tempPath = isKey(path) ? [path] : stringToPath(path);
@@ -1254,18 +1254,20 @@ var set = (object, path, value) => {
       const objValue = object[key];
       newValue = isObject(objValue) || Array.isArray(objValue) ? objValue : !isNaN(+tempPath[index + 1]) ? [] : {};
     }
-    if (key === "__proto__") {
+    if (key === "__proto__" || key === "constructor" || key === "prototype") {
       return;
     }
     object[key] = newValue;
     object = object[key];
   }
-  return object;
 };
 var EVENTS = {
   BLUR: "blur",
   FOCUS_OUT: "focusout",
-  CHANGE: "change"
+  CHANGE: "change",
+  SUBMIT: "submit",
+  TRIGGER: "trigger",
+  VALID: "valid"
 };
 var VALIDATION_MODE = {
   onBlur: "onBlur",
@@ -1274,16 +1276,11 @@ var VALIDATION_MODE = {
   onTouched: "onTouched",
   all: "all"
 };
-var HookFormContext = React12.createContext(null);
-var useFormContext = () => React12.useContext(HookFormContext);
-var FormProvider = (props) => {
-  const _a = props, { children } = _a, data = __objRest(_a, ["children"]);
-  return React12.createElement(HookFormContext.Provider, { value: data }, children);
-};
+var HookFormControlContext = React12.createContext(null);
+HookFormControlContext.displayName = "HookFormControlContext";
+var useFormControlContext = () => React12.useContext(HookFormControlContext);
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
-  const result = {
-    defaultValues: control._defaultValues
-  };
+  const result = {};
   for (const key in formState) {
     Object.defineProperty(result, key, {
       get: () => {
@@ -1298,31 +1295,13 @@ var getProxyFormState = (formState, control, localProxyFormState, isRoot = true)
   }
   return result;
 };
-var isEmptyObject = (value) => isObject(value) && !Object.keys(value).length;
-var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, isRoot) => {
-  updateFormState(formStateData);
-  const _a = formStateData, { name } = _a, formState = __objRest(_a, ["name"]);
-  return isEmptyObject(formState) || Object.keys(formState).length >= Object.keys(_proxyFormState).length || Object.keys(formState).find((key) => _proxyFormState[key] === (!isRoot || VALIDATION_MODE.all));
-};
-var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
-var shouldSubscribeByName = (name, signalName, exact) => !name || !signalName || name === signalName || convertToArrayPayload(name).some((currentName) => currentName && (exact ? currentName === signalName : currentName.startsWith(signalName) || signalName.startsWith(currentName)));
-function useSubscribe(props) {
-  const _props = React12.useRef(props);
-  _props.current = props;
-  React12.useEffect(() => {
-    const subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
-      next: _props.current.next
-    });
-    return () => {
-      subscription && subscription.unsubscribe();
-    };
-  }, [props.disabled]);
-}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React12.useLayoutEffect : React12.useEffect;
 function useFormState(props) {
-  const methods = useFormContext();
-  const { control = methods.control, disabled, name, exact } = props || {};
-  const [formState, updateFormState] = React12.useState(control._formState);
-  const _mounted = React12.useRef(true);
+  const formControl = useFormControlContext();
+  const { control = formControl, disabled, name, exact } = props || {};
+  const [formState, updateFormState] = React12.useState(() => __spreadProps(__spreadValues({}, control._formState), {
+    defaultValues: control._defaultValues
+  }));
   const _localProxyFormState = React12.useRef({
     isDirty: false,
     isLoading: false,
@@ -1333,21 +1312,20 @@ function useFormState(props) {
     isValid: false,
     errors: false
   });
-  const _name = React12.useRef(name);
-  _name.current = name;
-  useSubscribe({
-    disabled,
-    next: (value) => _mounted.current && shouldSubscribeByName(_name.current, value.name, exact) && shouldRenderFormState(value, _localProxyFormState.current, control._updateFormState) && updateFormState(__spreadValues(__spreadValues({}, control._formState), value)),
-    subject: control._subjects.state
-  });
+  useIsomorphicLayoutEffect(() => control._subscribe({
+    name,
+    formState: _localProxyFormState.current,
+    exact,
+    callback: (formState2) => {
+      !disabled && updateFormState(__spreadProps(__spreadValues(__spreadValues({}, control._formState), formState2), {
+        defaultValues: control._defaultValues
+      }));
+    }
+  }), [name, disabled, exact]);
   React12.useEffect(() => {
-    _mounted.current = true;
-    _localProxyFormState.current.isValid && control._updateValid(true);
-    return () => {
-      _mounted.current = false;
-    };
+    _localProxyFormState.current.isValid && control._setValid(true);
   }, [control]);
-  return getProxyFormState(formState, control, _localProxyFormState.current, false);
+  return React12.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
 }
 var isString = (value) => typeof value === "string";
 var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) => {
@@ -1361,129 +1339,261 @@ var generateWatchOutput = (names, _names, formValues, isGlobal, defaultValue) =>
   isGlobal && (_names.watchAll = true);
   return formValues;
 };
-function useWatch(props) {
-  const methods = useFormContext();
-  const { control = methods.control, name, defaultValue, disabled, exact } = props || {};
-  const _name = React12.useRef(name);
-  _name.current = name;
-  useSubscribe({
-    disabled,
-    subject: control._subjects.values,
-    next: (formState) => {
-      if (shouldSubscribeByName(_name.current, formState.name, exact)) {
-        updateValue(cloneObject(generateWatchOutput(_name.current, control._names, formState.values || control._formValues, false, defaultValue)));
+var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
+function deepEqual(object1, object2, visited = /* @__PURE__ */ new WeakSet()) {
+  if (object1 === object2) {
+    return true;
+  }
+  if (isPrimitive(object1) || isPrimitive(object2)) {
+    return Object.is(object1, object2);
+  }
+  if (isDateObject(object1) && isDateObject(object2)) {
+    return Object.is(object1.getTime(), object2.getTime());
+  }
+  const keys1 = Object.keys(object1);
+  const keys2 = Object.keys(object2);
+  if (keys1.length !== keys2.length) {
+    return false;
+  }
+  if (visited.has(object1) || visited.has(object2)) {
+    return true;
+  }
+  visited.add(object1);
+  visited.add(object2);
+  for (const key of keys1) {
+    const val1 = object1[key];
+    if (!(key in object2)) {
+      return false;
+    }
+    if (key !== "ref") {
+      const val2 = object2[key];
+      if (isDateObject(val1) && isDateObject(val2) || (isObject(val1) || Array.isArray(val1)) && (isObject(val2) || Array.isArray(val2)) ? !deepEqual(val1, val2, visited) : !Object.is(val1, val2)) {
+        return false;
       }
     }
+  }
+  return true;
+}
+function useWatch(props) {
+  const formControl = useFormControlContext();
+  const { control = formControl, name, defaultValue, disabled, exact, compute } = props || {};
+  const _defaultValue = React12.useRef(defaultValue);
+  const _compute = React12.useRef(compute);
+  const _computeFormValues = React12.useRef(void 0);
+  const _prevControl = React12.useRef(control);
+  const _prevName = React12.useRef(name);
+  _compute.current = compute;
+  const [value, updateValue] = React12.useState(() => {
+    const defaultValue2 = control._getWatch(name, _defaultValue.current);
+    return _compute.current ? _compute.current(defaultValue2) : defaultValue2;
   });
-  const [value, updateValue] = React12.useState(control._getWatch(name, defaultValue));
+  const getCurrentOutput = React12.useCallback((values) => {
+    const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+    return _compute.current ? _compute.current(formValues) : formValues;
+  }, [control._formValues, control._names, name]);
+  const refreshValue = React12.useCallback((values) => {
+    if (!disabled) {
+      const formValues = generateWatchOutput(name, control._names, values || control._formValues, false, _defaultValue.current);
+      if (_compute.current) {
+        const computedFormValues = _compute.current(formValues);
+        if (!deepEqual(computedFormValues, _computeFormValues.current)) {
+          updateValue(computedFormValues);
+          _computeFormValues.current = computedFormValues;
+        }
+      } else {
+        updateValue(formValues);
+      }
+    }
+  }, [control._formValues, control._names, disabled, name]);
+  useIsomorphicLayoutEffect(() => {
+    if (_prevControl.current !== control || !deepEqual(_prevName.current, name)) {
+      _prevControl.current = control;
+      _prevName.current = name;
+      refreshValue();
+    }
+    return control._subscribe({
+      name,
+      formState: {
+        values: true
+      },
+      exact,
+      callback: (formState) => {
+        refreshValue(formState.values);
+      }
+    });
+  }, [control, exact, name, refreshValue]);
   React12.useEffect(() => control._removeUnmounted());
-  return value;
+  const controlChanged = _prevControl.current !== control;
+  const prevName = _prevName.current;
+  const computedOutput = React12.useMemo(() => {
+    if (disabled) {
+      return null;
+    }
+    const nameChanged = !controlChanged && !deepEqual(prevName, name);
+    const shouldReturnImmediate = controlChanged || nameChanged;
+    return shouldReturnImmediate ? getCurrentOutput() : null;
+  }, [disabled, controlChanged, name, prevName, getCurrentOutput]);
+  return computedOutput !== null ? computedOutput : value;
 }
 function useController(props) {
-  const methods = useFormContext();
-  const { name, disabled, control = methods.control, shouldUnregister } = props;
+  const formControl = useFormControlContext();
+  const { name, disabled, control = formControl, shouldUnregister, defaultValue, exact = true } = props;
   const isArrayField = isNameInFieldArray(control._names.array, name);
+  const defaultValueMemo = React12.useMemo(() => get(control._formValues, name, get(control._defaultValues, name, defaultValue)), [control, name, defaultValue]);
   const value = useWatch({
     control,
     name,
-    defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
-    exact: true
+    defaultValue: defaultValueMemo,
+    exact
   });
   const formState = useFormState({
     control,
     name,
-    exact: true
+    exact
   });
+  const _props = React12.useRef(props);
   const _registerProps = React12.useRef(control.register(name, __spreadValues(__spreadProps(__spreadValues({}, props.rules), {
     value
   }), isBoolean(props.disabled) ? { disabled: props.disabled } : {})));
+  _props.current = props;
+  const fieldState = React12.useMemo(() => Object.defineProperties({}, {
+    invalid: {
+      enumerable: true,
+      get: () => !!get(formState.errors, name)
+    },
+    isDirty: {
+      enumerable: true,
+      get: () => !!get(formState.dirtyFields, name)
+    },
+    isTouched: {
+      enumerable: true,
+      get: () => !!get(formState.touchedFields, name)
+    },
+    isValidating: {
+      enumerable: true,
+      get: () => !!get(formState.validatingFields, name)
+    },
+    error: {
+      enumerable: true,
+      get: () => get(formState.errors, name)
+    }
+  }), [formState, name]);
+  const onChange = React12.useCallback((event) => _registerProps.current.onChange({
+    target: {
+      value: getEventValue(event),
+      name
+    },
+    type: EVENTS.CHANGE
+  }), [name]);
+  const onBlur = React12.useCallback(() => _registerProps.current.onBlur({
+    target: {
+      value: get(control._formValues, name),
+      name
+    },
+    type: EVENTS.BLUR
+  }), [name, control._formValues]);
+  const ref = React12.useCallback((elm) => {
+    const field2 = get(control._fields, name);
+    if (field2 && field2._f && elm) {
+      field2._f.ref = {
+        focus: () => isFunction(elm.focus) && elm.focus(),
+        select: () => isFunction(elm.select) && elm.select(),
+        setCustomValidity: (message) => isFunction(elm.setCustomValidity) && elm.setCustomValidity(message),
+        reportValidity: () => isFunction(elm.reportValidity) && elm.reportValidity()
+      };
+    }
+  }, [control._fields, name]);
+  const field = React12.useMemo(() => __spreadProps(__spreadValues({
+    name,
+    value
+  }, isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {}), {
+    onChange,
+    onBlur,
+    ref
+  }), [name, disabled, formState.disabled, onChange, onBlur, ref, value]);
   React12.useEffect(() => {
     const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
+    control.register(name, __spreadValues(__spreadValues({}, _props.current.rules), isBoolean(_props.current.disabled) ? { disabled: _props.current.disabled } : {}));
     const updateMounted = (name2, value2) => {
-      const field = get(control._fields, name2);
-      if (field && field._f) {
-        field._f.mount = value2;
+      const field2 = get(control._fields, name2);
+      if (field2 && field2._f) {
+        field2._f.mount = value2;
       }
     };
     updateMounted(name, true);
     if (_shouldUnregisterField) {
-      const value2 = cloneObject(get(control._options.defaultValues, name));
+      const value2 = cloneObject(get(control._options.defaultValues, name, _props.current.defaultValue));
       set(control._defaultValues, name, value2);
       if (isUndefined(get(control._formValues, name))) {
         set(control._formValues, name, value2);
       }
     }
+    !isArrayField && control.register(name);
     return () => {
       (isArrayField ? _shouldUnregisterField && !control._state.action : _shouldUnregisterField) ? control.unregister(name) : updateMounted(name, false);
     };
   }, [name, control, isArrayField, shouldUnregister]);
   React12.useEffect(() => {
-    if (get(control._fields, name)) {
-      control._updateDisabledField({
-        disabled,
-        fields: control._fields,
-        name,
-        value: get(control._fields, name)._f.value
-      });
-    }
+    control._setDisabledField({
+      disabled,
+      name
+    });
   }, [disabled, name, control]);
-  return {
-    field: __spreadProps(__spreadValues({
-      name,
-      value
-    }, isBoolean(disabled) || formState.disabled ? { disabled: formState.disabled || disabled } : {}), {
-      onChange: React12.useCallback((event) => _registerProps.current.onChange({
-        target: {
-          value: getEventValue(event),
-          name
-        },
-        type: EVENTS.CHANGE
-      }), [name]),
-      onBlur: React12.useCallback(() => _registerProps.current.onBlur({
-        target: {
-          value: get(control._formValues, name),
-          name
-        },
-        type: EVENTS.BLUR
-      }), [name, control]),
-      ref: React12.useCallback((elm) => {
-        const field = get(control._fields, name);
-        if (field && elm) {
-          field._f.ref = {
-            focus: () => elm.focus(),
-            select: () => elm.select(),
-            setCustomValidity: (message) => elm.setCustomValidity(message),
-            reportValidity: () => elm.reportValidity()
-          };
-        }
-      }, [control._fields, name])
-    }),
+  return React12.useMemo(() => ({
+    field,
     formState,
-    fieldState: Object.defineProperties({}, {
-      invalid: {
-        enumerable: true,
-        get: () => !!get(formState.errors, name)
-      },
-      isDirty: {
-        enumerable: true,
-        get: () => !!get(formState.dirtyFields, name)
-      },
-      isTouched: {
-        enumerable: true,
-        get: () => !!get(formState.touchedFields, name)
-      },
-      isValidating: {
-        enumerable: true,
-        get: () => !!get(formState.validatingFields, name)
-      },
-      error: {
-        enumerable: true,
-        get: () => get(formState.errors, name)
-      }
-    })
-  };
+    fieldState
+  }), [field, formState, fieldState]);
 }
 var Controller = (props) => props.render(useController(props));
+var HookFormContext = React12.createContext(null);
+HookFormContext.displayName = "HookFormContext";
+var useFormContext = () => React12.useContext(HookFormContext);
+var FormProvider = (props) => {
+  const { children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, handleSubmit, unregister, control, register, setFocus, subscribe } = props;
+  const memoizedValue = React12.useMemo(() => ({
+    watch,
+    getValues,
+    getFieldState,
+    setError,
+    clearErrors,
+    setValue,
+    setValues,
+    trigger,
+    formState,
+    resetField,
+    reset,
+    handleSubmit,
+    unregister,
+    control,
+    register,
+    setFocus,
+    subscribe
+  }), [
+    clearErrors,
+    control,
+    formState,
+    getFieldState,
+    getValues,
+    handleSubmit,
+    register,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+    setValue,
+    setValues,
+    subscribe,
+    trigger,
+    unregister,
+    watch
+  ]);
+  return React12.createElement(
+    HookFormContext.Provider,
+    { value: memoizedValue },
+    React12.createElement(HookFormControlContext.Provider, { value: memoizedValue.control }, children)
+  );
+};
 var defaultOptions = {
   mode: VALIDATION_MODE.onSubmit,
   reValidateMode: VALIDATION_MODE.onChange,