@bonlineza/luxity-lib 2.36.1-beta.1 → 2.36.1-beta.3

package/CommunicationPreferenceSection.js

@@ -8,66 +8,38 @@
   var styled__default = 'default' in styled ? styled['default'] : styled;
 
   function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
+    return _extends = Object.assign ? Object.assign.bind() : function (n) {
+      for (var e = 1; e < arguments.length; e++) {
+        var t = arguments[e];
+        for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
       }
-
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
-  function _objectWithoutPropertiesLoose(source, excluded) {
-    if (source == null) return {};
-    var target = {};
-    var sourceKeys = Object.keys(source);
-    var key, i;
-
-    for (i = 0; i < sourceKeys.length; i++) {
-      key = sourceKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      target[key] = source[key];
-    }
-
-    return target;
+      return n;
+    }, _extends.apply(null, arguments);
   }
-
-  function _objectWithoutProperties(source, excluded) {
-    if (source == null) return {};
-
-    var target = _objectWithoutPropertiesLoose(source, excluded);
-
-    var key, i;
-
+  function _objectWithoutProperties(e, t) {
+    if (null == e) return {};
+    var o,
+      r,
+      i = _objectWithoutPropertiesLoose(e, t);
     if (Object.getOwnPropertySymbols) {
-      var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-      for (i = 0; i < sourceSymbolKeys.length; i++) {
-        key = sourceSymbolKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-      }
+      var n = Object.getOwnPropertySymbols(e);
+      for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
     }
-
-    return target;
+    return i;
   }
-
-  function _taggedTemplateLiteral(strings, raw) {
-    if (!raw) {
-      raw = strings.slice(0);
+  function _objectWithoutPropertiesLoose(r, e) {
+    if (null == r) return {};
+    var t = {};
+    for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+      if (-1 !== e.indexOf(n)) continue;
+      t[n] = r[n];
     }
-
-    return Object.freeze(Object.defineProperties(strings, {
+    return t;
+  }
+  function _taggedTemplateLiteral(e, t) {
+    return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, {
       raw: {
-        value: Object.freeze(raw)
+        value: Object.freeze(t)
       }
     }));
   }
@@ -170,13 +142,14 @@
   function cloneObject(data) {
       let copy;
       const isArray = Array.isArray(data);
+      const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
       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)) &&
+      else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
           (isArray || isObject(data))) {
           copy = isArray ? [] : {};
           if (!isArray && !isPlainObject(data)) {
@@ -200,18 +173,50 @@
 
   var isUndefined = (val) => val === undefined;
 
-  var get = (obj, path, defaultValue) => {
-      if (!path || !isObject(obj)) {
+  var get = (object, path, defaultValue) => {
+      if (!path || !isObject(object)) {
           return defaultValue;
       }
-      const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], obj);
-      return isUndefined(result) || result === obj
-          ? isUndefined(obj[path])
+      const result = compact(path.split(/[,[\].]+?/)).reduce((result, key) => isNullOrUndefined(result) ? result : result[key], object);
+      return isUndefined(result) || result === object
+          ? isUndefined(object[path])
               ? defaultValue
-              : obj[path]
+              : object[path]
           : result;
   };
 
+  var isBoolean = (value) => typeof value === 'boolean';
+
+  var isKey = (value) => /^\w*$/.test(value);
+
+  var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
+
+  var set = (object, path, value) => {
+      let index = -1;
+      const tempPath = isKey(path) ? [path] : stringToPath(path);
+      const length = tempPath.length;
+      const lastIndex = length - 1;
+      while (++index < length) {
+          const key = tempPath[index];
+          let newValue = value;
+          if (index !== lastIndex) {
+              const objValue = object[key];
+              newValue =
+                  isObject(objValue) || Array.isArray(objValue)
+                      ? objValue
+                      : !isNaN(+tempPath[index + 1])
+                          ? []
+                          : {};
+          }
+          if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+              return;
+          }
+          object[key] = newValue;
+          object = object[key];
+      }
+      return object;
+  };
+
   const EVENTS = {
       BLUR: 'blur',
       FOCUS_OUT: 'focusout',
@@ -290,15 +295,13 @@
 
   var convertToArrayPayload = (value) => (Array.isArray(value) ? value : [value]);
 
-  var shouldSubscribeByName = (name, signalName, exact) => exact && signalName
-      ? name === signalName ||
-          (Array.isArray(name) &&
-              name.some((currentName) => currentName && exact && currentName === signalName))
-      : !name ||
-          !signalName ||
-          name === signalName ||
-          convertToArrayPayload(name).some((currentName) => currentName &&
-              (currentName.startsWith(signalName) ||
+  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) {
@@ -356,6 +359,7 @@
           isLoading: false,
           dirtyFields: false,
           touchedFields: false,
+          validatingFields: false,
           isValidating: false,
           isValid: false,
           errors: false,
@@ -380,7 +384,7 @@
               _mounted.current = false;
           };
       }, [control]);
-      return getProxyFormState(formState, control, _localProxyFormState.current, false);
+      return React__default.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
   }
 
   var isString = (value) => typeof value === 'string';
@@ -406,7 +410,7 @@
    *
    * @example
    * ```tsx
-   * const { watch } = useForm();
+   * const { control } = useForm();
    * const values = useWatch({
    *   name: "fieldName"
    *   control,
@@ -432,33 +436,6 @@
       return value;
   }
 
-  var isKey = (value) => /^\w*$/.test(value);
-
-  var stringToPath = (input) => compact(input.replace(/["|']|\]/g, '').split(/\.|\[/));
-
-  function set(object, path, value) {
-      let index = -1;
-      const tempPath = isKey(path) ? [path] : stringToPath(path);
-      const length = tempPath.length;
-      const lastIndex = length - 1;
-      while (++index < length) {
-          const key = tempPath[index];
-          let newValue = value;
-          if (index !== lastIndex) {
-              const objValue = object[key];
-              newValue =
-                  isObject(objValue) || Array.isArray(objValue)
-                      ? objValue
-                      : !isNaN(+tempPath[index + 1])
-                          ? []
-                          : {};
-          }
-          object[key] = newValue;
-          object = object[key];
-      }
-      return object;
-  }
-
   /**
    * Custom hook to work with controlled component, this function provide you with both form and field level state. Re-render is isolated at the hook level.
    *
@@ -496,17 +473,79 @@
       const formState = useFormState({
           control,
           name,
+          exact: true,
       });
       const _registerProps = React__default.useRef(control.register(name, {
           ...props.rules,
           value,
+          ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
       }));
-      _registerProps.current = control.register(name, props.rules);
+      const fieldState = React__default.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 field = React__default.useMemo(() => ({
+          name,
+          value,
+          ...(isBoolean(disabled) || formState.disabled
+              ? { disabled: formState.disabled || disabled }
+              : {}),
+          onChange: (event) => _registerProps.current.onChange({
+              target: {
+                  value: getEventValue(event),
+                  name: name,
+              },
+              type: EVENTS.CHANGE,
+          }),
+          onBlur: () => _registerProps.current.onBlur({
+              target: {
+                  value: get(control._formValues, name),
+                  name: name,
+              },
+              type: EVENTS.BLUR,
+          }),
+          ref: (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(),
+                  };
+              }
+          },
+      }), [
+          name,
+          control._formValues,
+          disabled,
+          formState.disabled,
+          value,
+          control._fields,
+      ]);
       React__default.useEffect(() => {
           const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
           const updateMounted = (name, value) => {
               const field = get(control._fields, name);
-              if (field) {
+              if (field && field._f) {
                   field._f.mount = value;
               }
           };
@@ -518,6 +557,7 @@
                   set(control._formValues, name, value);
               }
           }
+          !isArrayField && control.register(name);
           return () => {
               (isArrayField
                   ? _shouldUnregisterField && !control._state.action
@@ -533,57 +573,11 @@
               name,
           });
       }, [disabled, name, control]);
-      return {
-          field: {
-              name,
-              value,
-              disabled,
-              onChange: React__default.useCallback((event) => _registerProps.current.onChange({
-                  target: {
-                      value: getEventValue(event),
-                      name: name,
-                  },
-                  type: EVENTS.CHANGE,
-              }), [name]),
-              onBlur: React__default.useCallback(() => _registerProps.current.onBlur({
-                  target: {
-                      value: get(control._formValues, name),
-                      name: name,
-                  },
-                  type: EVENTS.BLUR,
-              }), [name, control]),
-              ref: (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(),
-                      };
-                  }
-              },
-          },
+      return React__default.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),
-              },
-              error: {
-                  enumerable: true,
-                  get: () => get(formState.errors, name),
-              },
-          }),
-      };
+          fieldState,
+      }), [field, formState, fieldState]);
   }
 
   var _templateObject;
@@ -610,31 +604,27 @@
   });
 
   var _excluded = ["ref"];
-
   var _templateObject$5, _templateObject2;
   var OptionsRow = styled__default.div(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n"])));
   var Options = styled__default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: row;\n  flex-basis: 60%;\n"])));
-
   var CommunicationPreferenceOptionsRenderer = function CommunicationPreferenceOptionsRenderer(_ref) {
     var control = _ref.control,
-        name = _ref.name,
-        isDisabled = _ref.isDisabled,
-        options = _ref.options,
-        defaultValue = _ref.defaultValue,
-        setValue = _ref.setValue;
-
+      name = _ref.name,
+      isDisabled = _ref.isDisabled,
+      options = _ref.options,
+      defaultValue = _ref.defaultValue,
+      setValue = _ref.setValue;
     var _useController = useController({
-      name: name,
-      control: control,
-      defaultValue: defaultValue
-    }),
-        _useController$field = _useController.field,
-        ref = _useController$field.ref,
-        inputProps = _objectWithoutProperties(_useController$field, _excluded),
-        _useController$fieldS = _useController.fieldState,
-        invalid = _useController$fieldS.invalid,
-        error = _useController$fieldS.error;
-
+        name: name,
+        control: control,
+        defaultValue: defaultValue
+      }),
+      _useController$field = _useController.field,
+      ref = _useController$field.ref,
+      inputProps = _objectWithoutProperties(_useController$field, _excluded),
+      _useController$fieldS = _useController.fieldState,
+      invalid = _useController$fieldS.invalid,
+      error = _useController$fieldS.error;
     React.useEffect(function () {
       if (defaultValue) {
         setValue(name, defaultValue);
@@ -664,16 +654,15 @@
     return props.theme.colors.primary;
   });
   var SectionHeading = styled__default.div(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\n  padding: 5px 10px;\n"])));
-
   var CommunicationPreferenceSection = function CommunicationPreferenceSection(_ref) {
     var section_heading = _ref.section_heading,
-        description = _ref.description,
-        control = _ref.control,
-        name = _ref.name,
-        isDisabled = _ref.isDisabled,
-        options = _ref.options,
-        defaultValue = _ref.defaultValue,
-        setValue = _ref.setValue;
+      description = _ref.description,
+      control = _ref.control,
+      name = _ref.name,
+      isDisabled = _ref.isDisabled,
+      options = _ref.options,
+      defaultValue = _ref.defaultValue,
+      setValue = _ref.setValue;
     return /*#__PURE__*/React__default.createElement(SectionContainer, null, /*#__PURE__*/React__default.createElement(SectionHeading, null, section_heading), /*#__PURE__*/React__default.createElement(CommunicationPreferenceOptionsRenderer, {
       description: description,
       control: control,
@@ -684,7 +673,6 @@
       setValue: setValue
     }));
   };
-
   var index = themed(CommunicationPreferenceSection);
 
   return index;