intelicoreact 0.1.15 → 0.1.18

package/dist/Atomic/FormElements/AdvancedStatus/AdvancedStatus.stories.js

@@ -43,7 +43,6 @@ var Template = function Template(args) {
     if (value === null) setTimeout(function () {
       return setValue(args.value);
     }, 1500);
-    console.log(value);
   }, [value]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AdvancedStatus.default, (0, _extends2.default)({}, args, {
     value: value,

package/dist/Atomic/FormElements/InputDateRange/InputDateRange.scss

@@ -2,9 +2,9 @@
   --input-height: 28px;
   --label-line-height: 16px;
   // --border-color: rgba(0, 0, 0, 0.3);
-  --border-color: #E2E5EC;
+  --border-color: #e2e5ec;
   --calendar-range-point-color: #6b81dd;
-  --font-family: 'Roboto';
+  --font-family: "Roboto";
   --font-size: 13px;
   --line-height: 20px;
   --border-radius: 3px;
@@ -22,7 +22,7 @@
 
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
-      -webkit-appearance: none;
+    -webkit-appearance: none;
   }
 
   &__label {
@@ -42,27 +42,21 @@
   &__absolut-wraper {
     width: 100%;
     height: fit-content;
-
-    position: absolute;
-    top: 0;
-    left: 0;
+    position: relative;
     display: flex;
     flex-flow: column nowrap;
     justify-content: flex-start;
     align-items: flex-start;
-
     background: transparent;
     z-index: 1;
 
-
     &_right-position {
       left: auto;
       right: 0;
     }
-
   }
 
-  &__static-part{
+  &__static-part {
     box-sizing: border-box;
     width: 100%;
     height: var(--input-height);
@@ -73,7 +67,7 @@
     justify-content: flex-end;
     align-items: flex-start;
 
-    background: #FFFFFF;
+    background: #ffffff;
     border: 1px solid var(--border-color);
   }
 
@@ -107,7 +101,7 @@
     pointer-events: none;
   }
 
-  &__range{
+  &__range {
     display: inline-block;
     pointer-events: none;
     word-wrap: break-word;
@@ -130,7 +124,7 @@
     }
   }
 
-  &__arrows-block{
+  &__arrows-block {
     box-sizing: border-box;
     width: fit-content;
     height: 100%;
@@ -164,7 +158,7 @@
 
   &_error {
     .date-range-input__wraper {
-      border-color: #FA564C;
+      border-color: #fa564c;
     }
   }
 
@@ -185,18 +179,21 @@
     bottom: -20px;
     font-size: var(--font-size);
     line-height: var(--line-height);
-    color: #FA564C;
+    color: #fa564c;
   }
 
   &__opened-part {
     width: fit-content;
     height: fit-content;
-    padding-top: 6px;
     background-color: transparent;
   }
 }
 
 .opened-part {
+  position: absolute;
+  top: 31px;
+  left: 0;
+
   &__wrapper {
     display: flex;
     flex-flow: row nowrap;
@@ -204,7 +201,7 @@
     align-items: stretch;
     border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    background: #FFFFFF;
+    background: #ffffff;
     box-shadow: 0 4px 25px rgba(0, 0, 0, 0.25);
     &_right-position-once-element {
       justify-content: flex-end;
@@ -240,7 +237,7 @@
 
     &:hover {
       // background-color: rgba(128, 128, 128, 0.1);
-      background-color: #F2F2F8;
+      background-color: #f2f2f8;
     }
     &_active {
       background: #f2f2f8;
@@ -262,6 +259,23 @@
     width: fit-content;
     border: none;
   }
+
+  &--left {
+    left: auto;
+    right: 0
+  }
+
+  &--top {
+    top: auto;
+    bottom: 31px;
+  }
+
+  &--top-left {
+    left: auto;
+    top: auto;
+    bottom: 31px;
+    right: 0;
+  }
 }
 
 .date-picker {
@@ -276,7 +290,7 @@
     height: fit-content;
     padding: 7.5px 15px;
     border: none;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     display: flex;
     flex-flow: column nowrap;
@@ -294,7 +308,7 @@
     font-size: var(--font-size);
     line-height: var(--line-height);
 
-    &>div:not(.date-picker__inputs-separator) {
+    & > div:not(.date-picker__inputs-separator) {
       width: 110px;
       min-height: 100%;
       margin-right: 9px;
@@ -318,7 +332,7 @@
       }
     }
 
-    &>div.dropdown {
+    & > div.dropdown {
       width: 80px;
       border-radius: var(--border-radius);
     }
@@ -352,7 +366,7 @@
     height: fit-content;
     border-radius: var(--border-radius);
 
-    &>.dropdown__trigger {
+    & > .dropdown__trigger {
       width: 100%;
       height: 28px;
       padding-left: 10px;
@@ -371,7 +385,7 @@
       border: none;
     }
 
-    & .dropdown__list-item{
+    & .dropdown__list-item {
       font-family: inherit;
       font-style: inherit;
       font-weight: inherit;
@@ -393,7 +407,7 @@
     padding: 10px 16px;
     border-top: 1px solid var(--border-color);
     border-bottom: 1px solid var(--border-color);
-    background-color: #FFFFFF;
+    background-color: #ffffff;
 
     display: flex;
     flex-flow: row nowrap;
@@ -410,7 +424,7 @@
     }
 
     .date-picker__calendar {
-      &:first-child{
+      &:first-child {
         margin-right: 10px;
       }
     }
@@ -438,7 +452,8 @@
           text-align: center;
         }
 
-        &__next, &__prev {
+        &__next,
+        &__prev {
           background-color: transparent;
           cursor: pointer;
         }
@@ -474,7 +489,7 @@
           cursor: pointer;
 
           &:hover {
-            background: #E2E6F8;
+            background: #e2e6f8;
           }
         }
 
@@ -513,30 +528,31 @@
         //   }
         // }
 
-        &--range-start, &--range-end {
+        &--range-start,
+        &--range-end {
           background: var(--calendar-range-point-color);
           border: 1px solid var(--calendar-range-point-color);
           box-sizing: border-box;
           border-radius: var(--border-radius);
-          color: #F8FBFF;
+          color: #f8fbff;
 
           &:hover {
             background: var(--calendar-range-point-color);
-            color: #F8FBFF;
+            color: #f8fbff;
           }
         }
 
         &--range-inside {
-          background: #EAF2FF;
+          background: #eaf2ff;
         }
 
         &--prev-range-end {
-          background: #E2E5EC;
+          background: #e2e5ec;
           border-radius: var(--border-radius);
         }
 
         &--prev-range-inside {
-          background: #F7F8FA;
+          background: #f7f8fa;
         }
 
         &--title {
@@ -557,14 +573,14 @@
     padding: 8px 16px;
     border-radius: 0 0 var(--border-radius) 0;
     border: none;
-    background-color: #F7FAFC;
+    background-color: #f7fafc;
 
     display: flex;
     flex-flow: row nowrap;
     justify-content: space-between;
     align-items: center;
 
-    &_once-element{
+    &_once-element {
       justify-content: flex-end;
     }
   }
@@ -581,8 +597,8 @@
     &:first-child {
       width: 80px;
       margin-right: 16px;
-      background-color: #FFFFFF;
-      border: 1px solid #A6ACB1;
+      background-color: #ffffff;
+      border: 1px solid #a6acb1;
       border-radius: var(--border-radius);
     }
 
@@ -611,14 +627,14 @@
   }
 
   .date-picker__header {
-    flex-flow: row wrap
+    flex-flow: row wrap;
   }
   .date-picker__calendars-wrapper {
     display: block;
     margin: auto;
   }
   .date-picker__calendars .range-calendar {
-    margin: 0!important;
+    margin: 0 !important;
     width: 100%;
   }
 }

package/dist/Atomic/FormElements/InputDateRange/components/OpenedPart.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
@@ -27,6 +27,8 @@ var _SelectItem = _interopRequireDefault(require("./SelectItem"));
 
 var _Datepicker = _interopRequireDefault(require("./Datepicker"));
 
+var _utils = require("../../../../Functions/utils");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,6 +37,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
+var classNames = require('classnames');
+
 var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var txt = props.txt,
       buttonsTypes = props.buttonsTypes,
@@ -64,12 +68,23 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       momentMaxDate = props.momentMaxDate,
       isDontLimitFuture = props.isDontLimitFuture;
 
-  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
+  var boxRef = (0, _react.useRef)();
 
-  var _useState = (0, _react.useState)(actualValues.intervalKey),
+  var _useState = (0, _react.useState)(''),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      activeInterval = _useState2[0],
-      setActiveInterval = _useState2[1];
+      elemPosition = _useState2[0],
+      setElemPosition = _useState2[1];
+
+  var openedPartClass = classNames('date-range-input__opened-part', 'opened-part', (0, _defineProperty2.default)({}, "opened-part--".concat(elemPosition), elemPosition));
+  var openedPartWrapperClass = classNames('opened-part__wrapper', {
+    'opened-part__wrapper_right-position-once-element': isOptionsRight && (isCompact || isIntervalsHidden)
+  });
+  var items = isCompact ? (0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)) : [].concat((0, _toConsumableArray2.default)(Object.keys(_dependencies.INTERVALS)), [_dependencies.CUSTOM_INTERVAL_KEY]);
+
+  var _useState3 = (0, _react.useState)(actualValues.intervalKey),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      activeInterval = _useState4[0],
+      setActiveInterval = _useState4[1];
 
   var handleItemClick = function handleItemClick(item) {
     if (item !== _dependencies.CUSTOM_INTERVAL_KEY) {
@@ -107,13 +122,14 @@ var OpenedPart = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return _dependencies.CUSTOM_INTERVAL_KEY;
   };
 
+  (0, _react.useLayoutEffect)(function () {
+    setElemPosition((0, _utils.defineBoxPositionByScreen)(boxRef));
+  }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('date-range-input__opened-part', 'opened-part') // style={styles}
-
+    className: openedPartClass,
+    ref: boxRef
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)('opened-part__wrapper', {
-      'opened-part__wrapper_right-position-once-element': isOptionsRight && (isCompact || isIntervalsHidden)
-    })
+    className: openedPartWrapperClass
   }, !isIntervalsHidden && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('opened-part__intervals-list' // 'form-select-options',
     // { 'form-select-options--short': short },

package/dist/Atomic/FormElements/NumericInput/NumericInput.js

@@ -252,6 +252,7 @@ var NumericInput = function NumericInput(_ref) {
     } : {});
 
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, uniProps, {
+      value: value,
       ref: inputRef,
       type: "text"
     })), /*#__PURE__*/_react.default.createElement("div", {

package/dist/Functions/useFormTools.js

@@ -0,0 +1,429 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useFormTools;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function useFormTools(_ref) {
+  var form = _ref.form,
+      setForm = _ref.setForm,
+      FormType = _ref.FormType,
+      FormFields = _ref.FormFields;
+
+  ///////////////////////////////////////////////////////////////
+  //--- OnChange Observer ---//--- START ---//
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      onChangeObservers = _useState2[0],
+      setOnChangeObservers = _useState2[1];
+
+  var addOnChangeObserver = function addOnChangeObserver(key, cb) {
+    var observerId = null;
+    setOnChangeObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) state[key] = {};
+      observerId = state[key].length;
+      state[key][observerId] = cb;
+      return state;
+    });
+    return observerId;
+  };
+
+  var removeOnChangeObserver = function removeOnChangeObserver(key, id) {
+    setOnChangeObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) return state;
+      state[key] = Object.keys(state).filter(function (cbId) {
+        return cbId !== id;
+      }).map(function (cbId) {
+        return state[key][cbId];
+      });
+      return state;
+    });
+  };
+
+  var onChangeObserver = function onChangeObserver(key, value) {
+    if (!onChangeObservers[key] || (0, _typeof2.default)(onChangeObservers[key]) !== 'object') return;
+    var Observers = onChangeObservers[key];
+    Object.values(Observers).map(function (cb) {
+      cb({
+        value: value,
+        form: form
+      });
+      return null;
+    });
+  };
+
+  var onFieldChange = function onFieldChange(key, value) {
+    var _form$fields$key;
+
+    if (value === (form === null || form === void 0 ? void 0 : (_form$fields$key = form.fields[key]) === null || _form$fields$key === void 0 ? void 0 : _form$fields$key.value)) return false;
+    onChangeObserver(key, value);
+    setForm(function (form) {
+      return _objectSpread(_objectSpread({}, form), {}, {
+        fields: _objectSpread(_objectSpread({}, form.fields), {}, (0, _defineProperty2.default)({}, key, _objectSpread(_objectSpread({}, form.fields[key]), {}, {
+          error: '',
+          value: value
+        })))
+      });
+    });
+  }; //--- OnChange Observer ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Form Submit Blocker ---//--- START ---//
+
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      formSubmitBlockers = _useState4[0],
+      setFormSubmitBlockers = _useState4[1];
+
+  var toggleFormSubmitBlock = function toggleFormSubmitBlock(key, value) {
+    setFormSubmitBlockers(function (state) {
+      return state.includes(key) || !value ? (0, _toConsumableArray2.default)(state.filter(function (k) {
+        return k !== key;
+      })) : [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+  };
+
+  var clearFormSubmitBlockers = function clearFormSubmitBlockers() {
+    return setFormSubmitBlockers([]);
+  }; //--- Form Submit Blocker ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Property Observer Blocker ---//--- START ---//
+  // const [propertyObservers, setPropertyObservers] = useState({});
+  // function addPropertyObserver () {
+  // };
+  //--- Property Observer Blocker ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Render Fields Controller ---//--- START ---//
+
+
+  var _useState5 = (0, _react.useState)([]),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      renderFormFields = _useState6[0],
+      setRenderFormFields = _useState6[1];
+
+  var addRenderFields = function addRenderFields(fields) {
+    setForm(function (state) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        fields: _objectSpread(_objectSpread({}, state.fields), fields.reduce(function (result, fieldKey) {
+          result[fieldKey] = FormFields[fieldKey];
+          return result;
+        }, {}))
+      });
+    });
+    setRenderFormFields(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), (0, _toConsumableArray2.default)(fields));
+    });
+  };
+
+  var removeRenderFields = function removeRenderFields(fields) {
+    setRenderFormFields(function (state) {
+      return state.filter(function (field) {
+        return !fields.includes(field);
+      });
+    });
+  }; //On Render Fields Change
+
+
+  (0, _react.useEffect)(function () {
+    //Add Form Fields
+    setForm(function (state) {
+      var fields = _objectSpread({}, state.fields);
+
+      renderFormFields.forEach(function (key) {
+        var _FormFields$key2;
+
+        if (!fields[key]) {
+          var _fields$key$className;
+
+          fields[key] = FormFields[key]; // eslint-disable-next-line no-use-before-define
+
+          if (!fields[key].className || ((_fields$key$className = fields[key].className) === null || _fields$key$className === void 0 ? void 0 : _fields$key$className.indexOf(getFieldClassName(key, FormType))) === -1) {
+            var _FormFields$key;
+
+            fields[key].className = "".concat((_FormFields$key = FormFields[key]) === null || _FormFields$key === void 0 ? void 0 : _FormFields$key.className, " ").concat(getFieldClassName(key, FormType));
+          }
+        }
+
+        if ((0, _typeof2.default)((_FormFields$key2 = FormFields[key]) === null || _FormFields$key2 === void 0 ? void 0 : _FormFields$key2.label) === 'object') {
+          fields[key].label = FormFields[key].label[FormType] || FormFields[key].label.default;
+        } // (node, key) => { refs.current[key] = node); }
+
+
+        fields[key].ref = /*#__PURE__*/(0, _react.createRef)();
+      });
+      return _objectSpread(_objectSpread({}, state), {}, {
+        fields: fields
+      });
+    });
+  }, [renderFormFields]); //--- Render Fields Controller ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- START ---//
+
+  var hightliteErrorLabels = function hightliteErrorLabels() {
+    var filtered = Object.keys(form.fields).reduce(function (result, field) {
+      var _form$fields$field;
+
+      if ((_form$fields$field = form.fields[field]) !== null && _form$fields$field !== void 0 && _form$fields$field.errorLabelHightlite) {
+        // eslint-disable-next-line no-use-before-define
+        result.push(_objectSpread(_objectSpread({}, form.fields[field]), {}, {
+          className: getFieldClassName(field, FormType)
+        }));
+      }
+
+      return result;
+    }, []);
+    filtered.map(function (field) {
+      var formField = document.querySelector(".".concat(field === null || field === void 0 ? void 0 : field.className));
+      if (!formField) return null;
+      formField.classList.remove('errorLabelHightlite');
+
+      if (field !== null && field !== void 0 && field.error) {
+        formField.classList.add('errorLabelHightlite');
+      }
+
+      return null;
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    hightliteErrorLabels();
+  }, [form]); //--- HIGHTLIGHT LABELS IF FIELD WITH ERROR ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- Fields Focus Controller ---//--- START ---//
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isInitFocused = _useState8[0],
+      setIsInitFocused = _useState8[1];
+
+  var initFocused = function initFocused() {
+    return setIsInitFocused(true);
+  };
+
+  var resetIsInitFocused = function resetIsInitFocused() {
+    return setIsInitFocused(false);
+  };
+
+  var setFieldFocus = function setFieldFocus(_ref2) {
+    var key = _ref2.key,
+        _ref2$cb = _ref2.cb,
+        cb = _ref2$cb === void 0 ? function () {} : _ref2$cb,
+        argForm = _ref2.form;
+    if (!key) return null;
+    if (!argForm) argForm = form;
+    var formField = argForm.fields[key];
+
+    if (!formField || !formField.ref) {
+      return false;
+    }
+
+    setTimeout(function () {
+      formField.ref.current.querySelector((formField === null || formField === void 0 ? void 0 : formField.focusSelector) || 'input').focus();
+      cb();
+    }, 1);
+  };
+
+  var setFirstFieldFocus = function setFirstFieldFocus() {
+    var _renderFormFields = (0, _slicedToArray2.default)(renderFormFields, 1),
+        firstField = _renderFormFields[0];
+
+    setFieldFocus({
+      key: firstField,
+      cb: initFocused,
+      form: form
+    });
+  };
+
+  var _useState9 = (0, _react.useState)([]),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      focusOnRenderFields = _useState10[0],
+      setFocusOnRenderFields = _useState10[1];
+
+  var addFocusFieldOnRender = function addFocusFieldOnRender(key) {
+    setFocusOnRenderFields(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+  };
+
+  var removeFocusFieldOnRender = function removeFocusFieldOnRender(key) {
+    setFocusOnRenderFields(function (state) {
+      return state.filter(function (field) {
+        return field !== key;
+      });
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    Object.keys(form === null || form === void 0 ? void 0 : form.fields).map(function (field) {
+      if (focusOnRenderFields.includes(field)) {
+        setFieldFocus({
+          key: field,
+          form: form,
+          cb: function cb() {
+            return removeFocusFieldOnRender(field);
+          }
+        });
+      }
+
+      return null;
+    });
+  }, [form.fields]); //--- Fields Focus Controller ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+  //--- OnFieldRendered Observer ---//--- START ---//
+
+  var _useState11 = (0, _react.useState)({}),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      onFieldRenderedObservers = _useState12[0],
+      setOnFieldRenderedObservers = _useState12[1];
+
+  var _useState13 = (0, _react.useState)([]),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      workedOutFieldRenderedObservers = _useState14[0],
+      setWorkedOutFieldRenderedObservers = _useState14[1];
+
+  var addWorkedOutField = function addWorkedOutField(key) {
+    return setWorkedOutFieldRenderedObservers(function (state) {
+      return [].concat((0, _toConsumableArray2.default)(state), [key]);
+    });
+  };
+
+  var addOnFieldRenderedObserver = function addOnFieldRenderedObserver(key, cb) {
+    var isOnceCallable = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var observerId = null;
+    setOnFieldRenderedObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) state[key] = {};
+      observerId = Object.keys(state[key]).length || 0;
+      state[key][observerId] = {
+        f: cb,
+        isOnceCallable: isOnceCallable
+      };
+      return state;
+    });
+    return observerId;
+  };
+
+  var removeOnFieldRenderedObserver = function removeOnFieldRenderedObserver(key, id) {
+    setOnFieldRenderedObservers(function (state) {
+      //Set Default Value
+      if (!state[key]) return state;
+      state[key] = Object.keys(state).filter(function (cbId) {
+        return cbId !== id;
+      }).map(function (cbId) {
+        return state[key][cbId];
+      });
+      return state;
+    });
+  };
+
+  var onFieldRenderedObserver = function onFieldRenderedObserver(key) {
+    if (!onFieldRenderedObservers[key] || (0, _typeof2.default)(onFieldRenderedObservers[key]) !== 'object') return;
+    var Observers = onFieldRenderedObservers[key];
+    Object.values(Observers).map(function (_ref3) {
+      var f = _ref3.f,
+          isOnceCallable = _ref3.isOnceCallable;
+      f();
+      if (isOnceCallable) addWorkedOutField(key);
+      return null;
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    Object.keys(form.fields).map(function (key) {
+      //OnFieldRendered
+      if (!workedOutFieldRenderedObservers.includes(key)) onFieldRenderedObserver(key);
+      return null;
+    });
+  }, [form.fields]); //--- OnFieldRendered Observer ---//--- END ---//
+  ///////////////////////////////////////////////////////////////
+  ///////////////////////////////////////////////////////////////
+
+  var getFieldClassName = function getFieldClassName(key, type) {
+    return "form-".concat(type, "_field-").concat(key);
+  }; //Detect What Changed || TRY TO DO
+  // const compare = async (prev, current) => {
+  //   if (!prev) return current;
+  //   return new Promise((resolve) => {
+  //     Object.keys(current).reduce((result, key, i, arr) => {
+  //       //If PROPERTY is NOT EXISTS BEFORE
+  //       if ([null, undefined].includes(prev[key])) {
+  //         result[key] = current[key];
+  //       }
+  //       //If PROPERTY is AN OBJECT
+  //       else if (typeof current[key] === 'object') {
+  //         //If PROPERTY is EXISTS BEFORE
+  //         const innerCompare = compare(prev[key], current[key]);
+  //         // //If SOMETHING CHANGED
+  //         if (innerCompare?.length) result[key] = innerCompare;
+  //       }
+  //       //If PROPERTY is AN SIMPLE VALUE and PROPERTY CHANGED
+  //       else if (prev[key] !== current[key]) {
+  //         result[key] = current[key];
+  //       }
+  //       if (i === arr.length-1) {
+  //         resolve(result);
+  //       }
+  //       return result;
+  //     }, {});
+  //   });
+  // };
+
+
+  return {
+    //OnChangeObserver
+    addOnChangeObserver: addOnChangeObserver,
+    removeOnChangeObserver: removeOnChangeObserver,
+    onChangeObservers: onChangeObservers,
+    //OnChangeHandler
+    onFieldChange: onFieldChange,
+    //Form Submit Blocker
+    toggleFormSubmitBlock: toggleFormSubmitBlock,
+    clearFormSubmitBlockers: clearFormSubmitBlockers,
+    isFormSubmitBlocked: Boolean(formSubmitBlockers.length),
+    //Property Observers
+    // addPropertyObserver,
+    //Render Fields
+    renderFormFields: renderFormFields,
+    setRenderFormFields: setRenderFormFields,
+    addRenderFields: addRenderFields,
+    removeRenderFields: removeRenderFields,
+    getFieldClassName: getFieldClassName,
+    //Field Focus Controller
+    isInitFocused: isInitFocused,
+    initFocused: initFocused,
+    resetIsInitFocused: resetIsInitFocused,
+    setFieldFocus: setFieldFocus,
+    setFirstFieldFocus: setFirstFieldFocus,
+    addFocusFieldOnRender: addFocusFieldOnRender,
+    removeFocusFieldOnRender: removeFocusFieldOnRender,
+    //Field Render Controller
+    addOnFieldRenderedObserver: addOnFieldRenderedObserver,
+    removeOnFieldRenderedObserver: removeOnFieldRenderedObserver,
+    onFieldRenderedObservers: onFieldRenderedObservers
+  };
+}

package/dist/Functions/useLocationParams.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLocationParams;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function useLocationParams() {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      params = _useState2[0],
+      setParams = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setParams(function (state) {
+      var arr = window.location.search.replace('?', '').split('&');
+      return _objectSpread(_objectSpread({}, state), arr.reduce(function (obj, item) {
+        var keyVal = item.split('=');
+        var key = keyVal[0];
+        var value = keyVal[1];
+        return _objectSpread(_objectSpread({}, obj), {}, (0, _defineProperty2.default)({}, key, value));
+      }, {}));
+    });
+  }, [window.location.search]);
+  return params;
+}

package/dist/Functions/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
+exports.defineBoxPositionByScreen = exports.getStyles = exports.logout = exports.useOutsideToggle = exports.handleObjectChange = void 0;
 
 var _react = require("react");
 
@@ -63,4 +63,21 @@ var getStyles = function getStyles(el, prop) {
   return window.getComputedStyle(el).getPropertyValue(prop);
 };
 
-exports.getStyles = getStyles;
+exports.getStyles = getStyles;
+
+var defineBoxPositionByScreen = function defineBoxPositionByScreen(ref) {
+  var elemRightPosition = ref.current.getBoundingClientRect().right;
+  var elemBottomPosition = ref.current.getBoundingClientRect().bottom;
+  var screenWidth = document.documentElement.clientWidth;
+  var screenHeight = document.documentElement.clientHeight;
+
+  if (elemRightPosition > screenWidth && elemBottomPosition < screenHeight) {
+    return 'left';
+  } else if (elemBottomPosition > screenHeight && elemRightPosition < screenWidth) {
+    return 'top';
+  } else if (elemRightPosition > screenWidth && elemBottomPosition > screenHeight) {
+    return 'top-left';
+  }
+};
+
+exports.defineBoxPositionByScreen = defineBoxPositionByScreen;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "intelicoreact",
-  "version": "0.1.15",
-  "description": "add postfix in dropdown",
+  "version": "0.1.18",
+  "description": "add useFormTools hook",
   "main": "dist/index.js",
   "files": ["dist/*", "node_modules/anme/*", "node_modules/moment/*", "node_modules/moment-timezone/*"],
   "scripts": {