@sunggang/ui-lib 0.4.3 → 0.4.4

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/index.esm.esm.js CHANGED
@@ -1,4 +1,3 @@
1
- import * as React from 'react';
2
1
  import React__default from 'react';
3
2
 
4
3
  function _array_like_to_array(arr, len) {
@@ -304,10 +303,8 @@ function cloneObject(data) {
304
303
  var isFileListInstance = typeof FileList !== "undefined" ? _instanceof(data, FileList) : false;
305
304
  if (_instanceof(data, Date)) {
306
305
  copy = new Date(data);
307
- } else if (_instanceof(data, Set)) {
308
- copy = new Set(data);
309
306
  } else if (!(isWeb && (_instanceof(data, Blob) || isFileListInstance)) && (isArray || isObject(data))) {
310
- copy = isArray ? [] : {};
307
+ copy = isArray ? [] : Object.create(Object.getPrototypeOf(data));
311
308
  if (!isArray && !isPlainObject(data)) {
312
309
  copy = data;
313
310
  } else {
@@ -322,17 +319,25 @@ function cloneObject(data) {
322
319
  }
323
320
  return copy;
324
321
  }
325
- var compact = function(value1) {
326
- return Array.isArray(value1) ? value1.filter(Boolean) : [];
322
+ var isKey = function(value1) {
323
+ return /^\w*$/.test(value1);
327
324
  };
328
325
  var isUndefined = function(val) {
329
326
  return val === undefined;
330
327
  };
328
+ var compact = function(value1) {
329
+ return Array.isArray(value1) ? value1.filter(Boolean) : [];
330
+ };
331
+ var stringToPath = function(input) {
332
+ return compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
333
+ };
331
334
  var get = function(object, path, defaultValue) {
332
335
  if (!path || !isObject(object)) {
333
336
  return defaultValue;
334
337
  }
335
- var result = compact(path.split(/[,[\].]+?/)).reduce(function(result, key) {
338
+ var result = (isKey(path) ? [
339
+ path
340
+ ] : stringToPath(path)).reduce(function(result, key) {
336
341
  return isNullOrUndefined(result) ? result : result[key];
337
342
  }, object);
338
343
  return isUndefined(result) || result === object ? isUndefined(object[path]) ? defaultValue : object[path] : result;
@@ -340,12 +345,6 @@ var get = function(object, path, defaultValue) {
340
345
  var isBoolean = function(value1) {
341
346
  return typeof value1 === "boolean";
342
347
  };
343
- var isKey = function(value1) {
344
- return /^\w*$/.test(value1);
345
- };
346
- var stringToPath = function(input) {
347
- return compact(input.replace(/["|']|\]/g, "").split(/\.|\[/));
348
- };
349
348
  var set = function(object, path, value1) {
350
349
  var index = -1;
351
350
  var tempPath = isKey(path) ? [
@@ -389,6 +388,7 @@ var INPUT_VALIDATION_RULES = {
389
388
  validate: "validate"
390
389
  };
391
390
  var HookFormContext = React__default.createContext(null);
391
+ HookFormContext.displayName = "HookFormContext";
392
392
  /**
393
393
  * This custom hook allows you to access the form context. useFormContext is intended to be used in deeply nested structures, where it would become inconvenient to pass the context as a prop. To be used with {@link FormProvider}.
394
394
  *
@@ -478,7 +478,7 @@ var getProxyFormState = function(formState, control, localProxyFormState) {
478
478
  for(var key in formState)_loop(key);
479
479
  return result;
480
480
  };
481
- var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
481
+ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__default.useLayoutEffect : React__default.useEffect;
482
482
  /**
483
483
  * This custom hook allows you to subscribe to each form state, and isolate the re-render at the custom hook level. It has its scope in terms of form state subscription, so it would not affect other useFormState and useForm. Using this hook can reduce the re-render impact on large and complex form application.
484
484
  *
@@ -511,7 +511,7 @@ var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutE
511
511
  */ function useFormState(props) {
512
512
  var methods = useFormContext();
513
513
  var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, disabled = _ref.disabled, name = _ref.name, exact = _ref.exact;
514
- var _React__default_useState = _sliced_to_array(React__default.useState(control._formState), 2), formState = _React__default_useState[0], updateFormState = _React__default_useState[1];
514
+ var _React_useState = _sliced_to_array(React__default.useState(control._formState), 2), formState = _React_useState[0], updateFormState = _React_useState[1];
515
515
  var _localProxyFormState = React__default.useRef({
516
516
  isDirty: false,
517
517
  isLoading: false,
@@ -564,6 +564,58 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
564
564
  isGlobal && (_names.watchAll = true);
565
565
  return formValues;
566
566
  };
567
+ var isPrimitive = function(value1) {
568
+ return isNullOrUndefined(value1) || !isObjectType(value1);
569
+ };
570
+ function deepEqual(object1, object2) {
571
+ var _internal_visited = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : new WeakSet();
572
+ if (isPrimitive(object1) || isPrimitive(object2)) {
573
+ return object1 === object2;
574
+ }
575
+ if (isDateObject(object1) && isDateObject(object2)) {
576
+ return object1.getTime() === object2.getTime();
577
+ }
578
+ var keys1 = Object.keys(object1);
579
+ var keys2 = Object.keys(object2);
580
+ if (keys1.length !== keys2.length) {
581
+ return false;
582
+ }
583
+ if (_internal_visited.has(object1) || _internal_visited.has(object2)) {
584
+ return true;
585
+ }
586
+ _internal_visited.add(object1);
587
+ _internal_visited.add(object2);
588
+ var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
589
+ try {
590
+ for(var _iterator = keys1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
591
+ var key = _step.value;
592
+ var val1 = object1[key];
593
+ if (!keys2.includes(key)) {
594
+ return false;
595
+ }
596
+ if (key !== "ref") {
597
+ var val2 = object2[key];
598
+ if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2, _internal_visited) : val1 !== val2) {
599
+ return false;
600
+ }
601
+ }
602
+ }
603
+ } catch (err) {
604
+ _didIteratorError = true;
605
+ _iteratorError = err;
606
+ } finally{
607
+ try {
608
+ if (!_iteratorNormalCompletion && _iterator.return != null) {
609
+ _iterator.return();
610
+ }
611
+ } finally{
612
+ if (_didIteratorError) {
613
+ throw _iteratorError;
614
+ }
615
+ }
616
+ }
617
+ return true;
618
+ }
567
619
  /**
568
620
  * Custom hook to subscribe to field change and isolate re-rendering at the component level.
569
621
  *
@@ -581,9 +633,18 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
581
633
  * ```
582
634
  */ function useWatch(props) {
583
635
  var methods = useFormContext();
584
- var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, name = _ref.name, defaultValue = _ref.defaultValue, disabled = _ref.disabled, exact = _ref.exact;
636
+ var _ref = props || {}, _ref_control = _ref.control, control = _ref_control === void 0 ? methods.control : _ref_control, name = _ref.name, defaultValue = _ref.defaultValue, disabled = _ref.disabled, exact = _ref.exact, compute = _ref.compute;
585
637
  var _defaultValue = React__default.useRef(defaultValue);
586
- var _React__default_useState = _sliced_to_array(React__default.useState(control._getWatch(name, _defaultValue.current)), 2), value1 = _React__default_useState[0], updateValue = _React__default_useState[1];
638
+ var _compute = React__default.useRef(compute);
639
+ var _computeFormValues = React__default.useRef(undefined);
640
+ _compute.current = compute;
641
+ var defaultValueMemo = React__default.useMemo(function() {
642
+ return control._getWatch(name, _defaultValue.current);
643
+ }, [
644
+ control,
645
+ name
646
+ ]);
647
+ var _React_useState = _sliced_to_array(React__default.useState(_compute.current ? _compute.current(defaultValueMemo) : defaultValueMemo), 2), value1 = _React_useState[0], updateValue = _React_useState[1];
587
648
  useIsomorphicLayoutEffect(function() {
588
649
  return control._subscribe({
589
650
  name: name,
@@ -592,13 +653,24 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
592
653
  },
593
654
  exact: exact,
594
655
  callback: function(formState) {
595
- return !disabled && updateValue(generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current));
656
+ if (!disabled) {
657
+ var formValues = generateWatchOutput(name, control._names, formState.values || control._formValues, false, _defaultValue.current);
658
+ if (_compute.current) {
659
+ var computedFormValues = _compute.current(formValues);
660
+ if (!deepEqual(computedFormValues, _computeFormValues.current)) {
661
+ updateValue(computedFormValues);
662
+ _computeFormValues.current = computedFormValues;
663
+ }
664
+ } else {
665
+ updateValue(formValues);
666
+ }
667
+ }
596
668
  }
597
669
  });
598
670
  }, [
599
- name,
600
671
  control,
601
672
  disabled,
673
+ name,
602
674
  exact
603
675
  ]);
604
676
  React__default.useEffect(function() {
@@ -631,12 +703,19 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
631
703
  * ```
632
704
  */ function useController(props) {
633
705
  var methods = useFormContext();
634
- var name = props.name, disabled = props.disabled, _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, shouldUnregister = props.shouldUnregister;
706
+ var name = props.name, disabled = props.disabled, _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, shouldUnregister = props.shouldUnregister, defaultValue = props.defaultValue;
635
707
  var isArrayField = isNameInFieldArray(control._names.array, name);
708
+ var defaultValueMemo = React__default.useMemo(function() {
709
+ return get(control._formValues, name, get(control._defaultValues, name, defaultValue));
710
+ }, [
711
+ control,
712
+ name,
713
+ defaultValue
714
+ ]);
636
715
  var value1 = useWatch({
637
716
  control: control,
638
717
  name: name,
639
- defaultValue: get(control._formValues, name, get(control._defaultValues, name, props.defaultValue)),
718
+ defaultValue: defaultValueMemo,
640
719
  exact: true
641
720
  });
642
721
  var formState = useFormState({
@@ -650,6 +729,7 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
650
729
  }), isBoolean(props.disabled) ? {
651
730
  disabled: props.disabled
652
731
  } : {})));
732
+ _props.current = props;
653
733
  var fieldState = React__default.useMemo(function() {
654
734
  return Object.defineProperties({}, {
655
735
  invalid: {
@@ -715,10 +795,10 @@ var generateWatchOutput = function(names, _names, formValues, isGlobal, defaultV
715
795
  if (field && elm) {
716
796
  field._f.ref = {
717
797
  focus: function() {
718
- return elm.focus();
798
+ return elm.focus && elm.focus();
719
799
  },
720
800
  select: function() {
721
- return elm.select();
801
+ return elm.select && elm.select();
722
802
  },
723
803
  setCustomValidity: function(message) {
724
804
  return elm.setCustomValidity(message);
@@ -903,52 +983,6 @@ var createSubject = function() {
903
983
  unsubscribe: unsubscribe
904
984
  };
905
985
  };
906
- var isPrimitive = function(value1) {
907
- return isNullOrUndefined(value1) || !isObjectType(value1);
908
- };
909
- function deepEqual(object1, object2) {
910
- if (isPrimitive(object1) || isPrimitive(object2)) {
911
- return object1 === object2;
912
- }
913
- if (isDateObject(object1) && isDateObject(object2)) {
914
- return object1.getTime() === object2.getTime();
915
- }
916
- var keys1 = Object.keys(object1);
917
- var keys2 = Object.keys(object2);
918
- if (keys1.length !== keys2.length) {
919
- return false;
920
- }
921
- var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
922
- try {
923
- for(var _iterator = keys1[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
924
- var key = _step.value;
925
- var val1 = object1[key];
926
- if (!keys2.includes(key)) {
927
- return false;
928
- }
929
- if (key !== "ref") {
930
- var val2 = object2[key];
931
- if (isDateObject(val1) && isDateObject(val2) || isObject(val1) && isObject(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual(val1, val2) : val1 !== val2) {
932
- return false;
933
- }
934
- }
935
- }
936
- } catch (err) {
937
- _didIteratorError = true;
938
- _iteratorError = err;
939
- } finally{
940
- try {
941
- if (!_iteratorNormalCompletion && _iterator.return != null) {
942
- _iterator.return();
943
- }
944
- } finally{
945
- if (_didIteratorError) {
946
- throw _iteratorError;
947
- }
948
- }
949
- }
950
- return true;
951
- }
952
986
  var isEmptyObject = function(value1) {
953
987
  return isObject(value1) && !Object.keys(value1).length;
954
988
  };
@@ -1241,6 +1275,12 @@ function schemaErrorLookup(errors, _fields, name) {
1241
1275
  error: foundError
1242
1276
  };
1243
1277
  }
1278
+ if (foundError && foundError.root && foundError.root.type) {
1279
+ return {
1280
+ name: "".concat(fieldName, ".root"),
1281
+ error: foundError.root
1282
+ };
1283
+ }
1244
1284
  names.pop();
1245
1285
  }
1246
1286
  return {
@@ -2018,7 +2058,7 @@ function createFormControl() {
2018
2058
  return;
2019
2059
  }
2020
2060
  var fieldValue = value1[fieldKey];
2021
- var fieldName = "".concat(name, ".").concat(fieldKey);
2061
+ var fieldName = name + "." + fieldKey;
2022
2062
  var field = get(_fields, fieldName);
2023
2063
  (_names.array.has(name) || isObject(fieldValue) || field && !field._f) && !isDateObject(fieldValue) ? setValues(fieldName, fieldValue, options) : setFieldValue(fieldName, fieldValue, options);
2024
2064
  }
@@ -2044,7 +2084,9 @@ function createFormControl() {
2044
2084
  } else {
2045
2085
  field && !field._f && !isNullOrUndefined(cloneValue) ? setValues(name, cloneValue, options) : setFieldValue(name, cloneValue, options);
2046
2086
  }
2047
- isWatched(name, _names) && _subjects.state.next(_object_spread({}, _formState));
2087
+ isWatched(name, _names) && _subjects.state.next(_object_spread_props(_object_spread({}, _formState), {
2088
+ name: name
2089
+ }));
2048
2090
  _subjects.state.next({
2049
2091
  name: _state.mount ? name : undefined,
2050
2092
  values: cloneObject(_formValues)
@@ -2076,8 +2118,10 @@ function createFormControl() {
2076
2118
  watched = isWatched(name, _names, isBlurEvent);
2077
2119
  set(_formValues, name, fieldValue);
2078
2120
  if (isBlurEvent) {
2079
- field._f.onBlur && field._f.onBlur(event);
2080
- delayErrorCallback && delayErrorCallback(0);
2121
+ if (!target || !target.readOnly) {
2122
+ field._f.onBlur && field._f.onBlur(event);
2123
+ delayErrorCallback && delayErrorCallback(0);
2124
+ }
2081
2125
  } else if (field._f.onChange) {
2082
2126
  field._f.onChange(event);
2083
2127
  }
@@ -2333,7 +2377,7 @@ function createFormControl() {
2333
2377
  var watch = function(name, defaultValue) {
2334
2378
  return isFunction(name) ? _subjects.state.subscribe({
2335
2379
  next: function(payload) {
2336
- return name(_getWatch(undefined, defaultValue), payload);
2380
+ return "values" in payload && name(_getWatch(undefined, defaultValue), payload);
2337
2381
  }
2338
2382
  }) : _getWatch(name, defaultValue, true);
2339
2383
  };
@@ -2341,9 +2385,11 @@ function createFormControl() {
2341
2385
  return _subjects.state.subscribe({
2342
2386
  next: function(formState) {
2343
2387
  if (shouldSubscribeByName(props.name, formState.name, props.exact) && shouldRenderFormState(formState, props.formState || _proxyFormState, _setFormState, props.reRenderRoot)) {
2344
- props.callback(_object_spread({
2388
+ props.callback(_object_spread_props(_object_spread({
2345
2389
  values: _object_spread({}, _formValues)
2346
- }, _formState, formState));
2390
+ }, _formState, formState), {
2391
+ defaultValues: _defaultValues
2392
+ }));
2347
2393
  }
2348
2394
  }
2349
2395
  }).unsubscribe;
@@ -2523,7 +2569,7 @@ function createFormControl() {
2523
2569
  case 1:
2524
2570
  _ref = _state.sent(), errors = _ref.errors, values = _ref.values;
2525
2571
  _formState.errors = errors;
2526
- fieldValues = values;
2572
+ fieldValues = cloneObject(values);
2527
2573
  return [
2528
2574
  3,
2529
2575
  4
@@ -2542,7 +2588,7 @@ function createFormControl() {
2542
2588
  try {
2543
2589
  for(_iterator = _names.disabled[Symbol.iterator](); !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
2544
2590
  name = _step.value;
2545
- set(fieldValues, name, undefined);
2591
+ unset(fieldValues, name);
2546
2592
  }
2547
2593
  } catch (err) {
2548
2594
  _didIteratorError = true;
@@ -2723,28 +2769,32 @@ function createFormControl() {
2723
2769
  }
2724
2770
  }
2725
2771
  }
2726
- var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = undefined;
2727
- try {
2728
- for(var _iterator2 = _names.mount[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true){
2729
- var fieldName1 = _step2.value;
2730
- setValue(fieldName1, get(values, fieldName1));
2731
- }
2732
- } catch (err) {
2733
- _didIteratorError2 = true;
2734
- _iteratorError2 = err;
2735
- } finally{
2772
+ if (keepStateOptions.keepFieldsRef) {
2773
+ var _iteratorNormalCompletion2 = true, _didIteratorError2 = false, _iteratorError2 = undefined;
2736
2774
  try {
2737
- if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
2738
- _iterator2.return();
2775
+ for(var _iterator2 = _names.mount[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true){
2776
+ var fieldName1 = _step2.value;
2777
+ setValue(fieldName1, get(values, fieldName1));
2739
2778
  }
2779
+ } catch (err) {
2780
+ _didIteratorError2 = true;
2781
+ _iteratorError2 = err;
2740
2782
  } finally{
2741
- if (_didIteratorError2) {
2742
- throw _iteratorError2;
2783
+ try {
2784
+ if (!_iteratorNormalCompletion2 && _iterator2.return != null) {
2785
+ _iterator2.return();
2786
+ }
2787
+ } finally{
2788
+ if (_didIteratorError2) {
2789
+ throw _iteratorError2;
2790
+ }
2743
2791
  }
2744
2792
  }
2793
+ } else {
2794
+ _fields = {};
2745
2795
  }
2746
2796
  }
2747
- _formValues = cloneObject(values);
2797
+ _formValues = _options.shouldUnregister ? keepStateOptions.keepDefaultValues ? cloneObject(_defaultValues) : {} : cloneObject(values);
2748
2798
  _subjects.array.next({
2749
2799
  values: _object_spread({}, values)
2750
2800
  });
@@ -2771,7 +2821,8 @@ function createFormControl() {
2771
2821
  touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
2772
2822
  errors: keepStateOptions.keepErrors ? _formState.errors : {},
2773
2823
  isSubmitSuccessful: keepStateOptions.keepIsSubmitSuccessful ? _formState.isSubmitSuccessful : false,
2774
- isSubmitting: false
2824
+ isSubmitting: false,
2825
+ defaultValues: _defaultValues
2775
2826
  });
2776
2827
  };
2777
2828
  var reset = function(formValues, keepStateOptions) {
@@ -2809,6 +2860,7 @@ function createFormControl() {
2809
2860
  setError: setError,
2810
2861
  _subscribe: _subscribe,
2811
2862
  _runSchema: _runSchema,
2863
+ _focusError: _focusError,
2812
2864
  _getWatch: _getWatch,
2813
2865
  _getDirty: _getDirty,
2814
2866
  _setValid: _setValid,
@@ -2873,6 +2925,9 @@ function createFormControl() {
2873
2925
  });
2874
2926
  }
2875
2927
  var generateId = function() {
2928
+ if (typeof crypto !== "undefined" && crypto.randomUUID) {
2929
+ return crypto.randomUUID();
2930
+ }
2876
2931
  var d = typeof performance === "undefined" ? Date.now() : performance.now() * 1000;
2877
2932
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
2878
2933
  var r = (Math.random() * 16 + d) % 16 | 0;
@@ -2988,21 +3043,25 @@ var updateAt = function(fieldValues, index, value1) {
2988
3043
  */ function useFieldArray(props) {
2989
3044
  var methods = useFormContext();
2990
3045
  var _props_control = props.control, control = _props_control === void 0 ? methods.control : _props_control, name = props.name, _props_keyName = props.keyName, keyName = _props_keyName === void 0 ? "id" : _props_keyName, shouldUnregister = props.shouldUnregister, rules = props.rules;
2991
- var _React__default_useState = _sliced_to_array(React__default.useState(control._getFieldArray(name)), 2), fields = _React__default_useState[0], setFields = _React__default_useState[1];
3046
+ var _React_useState = _sliced_to_array(React__default.useState(control._getFieldArray(name)), 2), fields = _React_useState[0], setFields = _React_useState[1];
2992
3047
  var ids = React__default.useRef(control._getFieldArray(name).map(generateId));
2993
3048
  var _fieldIds = React__default.useRef(fields);
2994
- var _name = React__default.useRef(name);
2995
3049
  var _actioned = React__default.useRef(false);
2996
- _name.current = name;
2997
3050
  _fieldIds.current = fields;
2998
3051
  control._names.array.add(name);
2999
- rules && control.register(name, rules);
3000
- React__default.useEffect(function() {
3052
+ React__default.useMemo(function() {
3053
+ return rules && control.register(name, rules);
3054
+ }, [
3055
+ control,
3056
+ rules,
3057
+ name
3058
+ ]);
3059
+ useIsomorphicLayoutEffect(function() {
3001
3060
  return control._subjects.array.subscribe({
3002
3061
  next: function(param) {
3003
3062
  var values = param.values, fieldArrayName = param.name;
3004
- if (fieldArrayName === _name.current || !fieldArrayName) {
3005
- var fieldValues = get(values, _name.current);
3063
+ if (fieldArrayName === name || !fieldArrayName) {
3064
+ var fieldValues = get(values, name);
3006
3065
  if (Array.isArray(fieldValues)) {
3007
3066
  setFields(fieldValues);
3008
3067
  ids.current = fieldValues.map(generateId);
@@ -3011,7 +3070,8 @@ var updateAt = function(fieldValues, index, value1) {
3011
3070
  }
3012
3071
  }).unsubscribe;
3013
3072
  }, [
3014
- control
3073
+ control,
3074
+ name
3015
3075
  ]);
3016
3076
  var updateValues = React__default.useCallback(function(updatedFieldArrayValues) {
3017
3077
  _actioned.current = true;
@@ -3255,7 +3315,7 @@ var updateAt = function(fieldValues, index, value1) {
3255
3315
  var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
3256
3316
  var _formControl = React__default.useRef(undefined);
3257
3317
  var _values = React__default.useRef(undefined);
3258
- var _React__default_useState = _sliced_to_array(React__default.useState({
3318
+ var _React_useState = _sliced_to_array(React__default.useState({
3259
3319
  isDirty: false,
3260
3320
  isValidating: false,
3261
3321
  isLoading: isFunction(props.defaultValues),
@@ -3271,13 +3331,22 @@ var updateAt = function(fieldValues, index, value1) {
3271
3331
  disabled: props.disabled || false,
3272
3332
  isReady: false,
3273
3333
  defaultValues: isFunction(props.defaultValues) ? undefined : props.defaultValues
3274
- }), 2), formState = _React__default_useState[0], updateFormState = _React__default_useState[1];
3334
+ }), 2), formState = _React_useState[0], updateFormState = _React_useState[1];
3275
3335
  if (!_formControl.current) {
3276
- _formControl.current = _object_spread_props(_object_spread({}, props.formControl ? props.formControl : createFormControl(props)), {
3277
- formState: formState
3278
- });
3279
- if (props.formControl && props.defaultValues && !isFunction(props.defaultValues)) {
3280
- props.formControl.reset(props.defaultValues, props.resetOptions);
3336
+ if (props.formControl) {
3337
+ _formControl.current = _object_spread_props(_object_spread({}, props.formControl), {
3338
+ formState: formState
3339
+ });
3340
+ if (props.defaultValues && !isFunction(props.defaultValues)) {
3341
+ props.formControl.reset(props.defaultValues, props.resetOptions);
3342
+ }
3343
+ } else {
3344
+ var _createFormControl = createFormControl(props); _createFormControl.formControl; var rest = _object_without_properties(_createFormControl, [
3345
+ "formControl"
3346
+ ]);
3347
+ _formControl.current = _object_spread_props(_object_spread({}, rest), {
3348
+ formState: formState
3349
+ });
3281
3350
  }
3282
3351
  }
3283
3352
  var control = _formControl.current.control;
@@ -3313,15 +3382,20 @@ var updateAt = function(fieldValues, index, value1) {
3313
3382
  if (props.reValidateMode) {
3314
3383
  control._options.reValidateMode = props.reValidateMode;
3315
3384
  }
3316
- if (props.errors && !isEmptyObject(props.errors)) {
3317
- control._setErrors(props.errors);
3318
- }
3319
3385
  }, [
3320
3386
  control,
3321
- props.errors,
3322
3387
  props.mode,
3323
3388
  props.reValidateMode
3324
3389
  ]);
3390
+ React__default.useEffect(function() {
3391
+ if (props.errors) {
3392
+ control._setErrors(props.errors);
3393
+ control._focusError();
3394
+ }
3395
+ }, [
3396
+ control,
3397
+ props.errors
3398
+ ]);
3325
3399
  React__default.useEffect(function() {
3326
3400
  props.shouldUnregister && control._subjects.state.next({
3327
3401
  values: control._getWatch()
@@ -3345,7 +3419,9 @@ var updateAt = function(fieldValues, index, value1) {
3345
3419
  ]);
3346
3420
  React__default.useEffect(function() {
3347
3421
  if (props.values && !deepEqual(props.values, _values.current)) {
3348
- control._reset(props.values, control._options.resetOptions);
3422
+ control._reset(props.values, _object_spread({
3423
+ keepFieldsRef: true
3424
+ }, control._options.resetOptions));
3349
3425
  _values.current = props.values;
3350
3426
  updateFormState(function(state) {
3351
3427
  return _object_spread({}, state);
package/index.esm.js CHANGED
@@ -35,6 +35,9 @@ import './_tslib.esm.js';
35
35
  import './_commonjsHelpers.esm.js';
36
36
  import './Modal.esm.js';
37
37
  import '@radix-ui/react-select';
38
+ import 'flatpickr';
39
+ import 'flatpickr/dist/l10n/zh-tw.js';
40
+ import 'flatpickr/dist/flatpickr.min.css';
38
41
 
39
42
  function _define_property$7(obj, key, value) {
40
43
  if (key in obj) {