intelicoreact 1.0.76 → 1.0.78

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -364,9 +364,11 @@ var Dropdown = function Dropdown(_ref) {
   (0, _react.useLayoutEffect)(function () {
     window.addEventListener('resize', setListContainerStyles);
     window.addEventListener('mousewheel', closeList);
+    window.addEventListener('touchmove', closeList);
     return function () {
       window.removeEventListener('resize', setListContainerStyles);
       window.removeEventListener('mousewheel', closeList);
+      window.removeEventListener('touchmove', closeList);
     };
   }, [getListContainer]);
   (0, _react.useEffect)(function () {
@@ -401,6 +403,9 @@ var Dropdown = function Dropdown(_ref) {
     setIsOpen(true);
   };
 
+  (0, _react.useEffect)(function () {
+    if (isOpen && isSearching) setSearchValue(selectedLabel);
+  }, [isSearching]);
   var postfixText = selectedLabel && ((_filteredOptions$find = filteredOptions.find(function (option) {
     return option.value === value;
   })) === null || _filteredOptions$find === void 0 ? void 0 : _filteredOptions$find.postfix) || null;
@@ -429,12 +434,15 @@ var Dropdown = function Dropdown(_ref) {
     className: "".concat(RC, "__input"),
     value: isSearching ? searchValue !== null && searchValue !== void 0 ? searchValue : '' : selectedLabel || '',
     onChange: function onChange(e) {
+      console.log({
+        searchValue: searchValue,
+        selectedLabel: selectedLabel
+      });
+      setIsSearching(true);
       onSearchHandler(e.target.value);
     },
     placeholder: placeholder,
     onFocus: function onFocus(e) {
-      setSearchValue(selectedLabel);
-      setIsSearching(true);
       e.target.select();
     },
     onBlur: function onBlur() {

package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+require("./FileLoaderLocal.scss");
+
+var FileLoaderLocal = function FileLoaderLocal(_ref) {
+  var id = _ref.id,
+      label = _ref.label,
+      error = _ref.error,
+      isRequired = _ref.isRequired,
+      accept = _ref.accept,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      value = _ref.value,
+      isNoTrashIcon = _ref.isNoTrashIcon;
+
+  var getFileName = function getFileName(value) {
+    var result = value.match(/[^\\]+$/);
+    return onChange({
+      value: result[0],
+      id: id
+    });
+  };
+
+  var renderRequiredLabel = function renderRequiredLabel() {
+    if (!value) {
+      if (isRequired) return /*#__PURE__*/_react.default.createElement("div", {
+        className: "file-loader-local--required"
+      }, "Required");else return /*#__PURE__*/_react.default.createElement("div", {
+        className: "file-loader-local--optional"
+      }, "Optional");
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('file-loader-local', className)
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    onChange: function onChange(e) {
+      return getFileName(e.target.value);
+    },
+    className: "file-loader-local__file-input",
+    id: "file-input-".concat(id),
+    type: "file",
+    name: "file",
+    required: isRequired,
+    accept: accept
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    className: "file-loader-local__label-box",
+    htmlFor: "file-input-".concat(id)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "j4"
+  }, !value && /*#__PURE__*/_react.default.createElement(_reactFeather.Download, {
+    className: "file-loader-local__upload-icon"
+  }), value && /*#__PURE__*/_react.default.createElement(_reactFeather.Paperclip, {
+    className: "file-loader-local__upload-icon"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('file-loader-local__label', {
+      'file-loader-local__label-filled': value
+    })
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "file-loader-local__label-text"
+  }, value || label), error && /*#__PURE__*/_react.default.createElement("span", {
+    className: "file-loader-local__error"
+  }, error))), value && !isNoTrashIcon && /*#__PURE__*/_react.default.createElement(_reactFeather.Trash2, {
+    className: "file-loader-local__trash-icon",
+    onClick: function onClick() {
+      return onChange({
+        id: id
+      });
+    }
+  }), renderRequiredLabel()));
+};
+
+var _default = FileLoaderLocal;
+exports.default = _default;

package/dist/Atomic/FormElements/FileLoaderLocal/FileLoaderLocal.scss

@@ -0,0 +1,84 @@
+.file-loader-local {
+  display: flex;
+  align-items: center;
+  background-color: #FFFFFF;
+  position: relative;
+  box-sizing: border-box;
+  min-height: 50px;
+  border-radius: 8px;
+  box-shadow: 0px 2px 8px rgb(39 73 113 / 15%);
+
+  &__file-input {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    position: absolute;
+    z-index: -10;
+  }
+
+  &__label-box {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+    font-family: Sarabun;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 20px;
+    color: #1F7499;
+    padding: 15px 18px 15px 16px;
+    width: 100%;
+    max-height: 50px;
+    box-sizing: border-box;
+  }
+
+  &__upload-icon {
+    transform: rotate(180deg);
+    min-height: 16px;
+    max-height: 16px;
+    min-width: 16px;
+    max-width: 16px;
+    stroke-width: 1.5px;
+    margin-right: 8px;
+    color: #A0A4B0;
+  }
+
+  &__trash-icon {
+    min-height: 16px;
+    max-height: 16px;
+    min-width: 16px;
+    max-width: 16px;
+    color: #F06D8D;
+  }
+
+  &__label {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__label-text {
+    white-space: nowrap;
+    word-break: break-word;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    width: 200px;
+  }
+
+  &__label-filled {
+    color: #171D33;
+  }
+
+  &__error {
+    color: #F06D8D;
+    font-size: 12px;
+  }
+
+  &--required {
+    color: #F06D8D;
+  }
+
+  &--optional {
+    color: #757F8C;
+  }
+}

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

@@ -87,7 +87,8 @@ var InputDateRange = function InputDateRange(props) {
       isCompare = _useState4[0],
       setIsCompare = _useState4[1];
 
-  var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff) : (0, _react.useRef)(null);
+  var dropdownContainers = document.getElementsByClassName('dropdown__container');
+  var ref = !isUseAbs ? (0, _dependencies.useClickOutside)(toggleOff, dropdownContainers) : (0, _react.useRef)(null);
   var internalContainerRef = (0, _react.useRef)(null);
 
   var handleChange = function handleChange(input) {

package/dist/Atomic/FormElements/InputDateRange/dependencies.js

@@ -31,9 +31,23 @@ var useClickOutside = function useClickOutside(hideComponent, additionalComponen
   var ref = (0, _react.useRef)(null);
 
   var checkCondition = function checkCondition(target) {
-    var _ref$current, _ref$current2;
+    if (additionalComponent) {
+      if (additionalComponent !== null && additionalComponent !== void 0 && additionalComponent.length) {
+        var _ref$current, _Array$from;
 
-    return additionalComponent ? !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && !(additionalComponent !== null && additionalComponent !== void 0 && additionalComponent.contains(target)) : !((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(target));
+        return !((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && !((_Array$from = Array.from(additionalComponent)) !== null && _Array$from !== void 0 && _Array$from.some(function (item) {
+          return item === null || item === void 0 ? void 0 : item.contains(target);
+        }));
+      } else {
+        var _ref$current2;
+
+        return !((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(target)) && !(additionalComponent !== null && additionalComponent !== void 0 && additionalComponent.contains(target));
+      }
+    } else {
+      var _ref$current3;
+
+      return !((_ref$current3 = ref.current) !== null && _ref$current3 !== void 0 && _ref$current3.contains(target));
+    }
   };
 
   var handleClickOutside = (0, _react.useCallback)(function (_ref) {

package/dist/Atomic/FormElements/RangeList/RangeList.js

@@ -55,6 +55,8 @@ var RangeList = function RangeList(props) {
       error = props.error,
       defaultErrorText = props.defaultErrorText,
       nullValueText = props.nullValueText,
+      _props$isOnlyOneRow = props.isOnlyOneRow,
+      isOnlyOneRow = _props$isOnlyOneRow === void 0 ? false : _props$isOnlyOneRow,
       testId = props.testId;
   var NULL_VALUE_TEXT = nullValueText !== null && nullValueText !== void 0 ? nullValueText : 'No data';
 
@@ -76,6 +78,7 @@ var RangeList = function RangeList(props) {
   var inputFromRef = (0, _react.useRef)(null);
   var inputToRef = (0, _react.useRef)(null);
   var isValidRange = !!(state !== null && state !== void 0 && state.from && state !== null && state !== void 0 && state.to && +(state === null || state === void 0 ? void 0 : state.from) <= +(state === null || state === void 0 ? void 0 : state.to));
+  var isShowRow = isOnlyOneRow && (value === null || value === void 0 ? void 0 : value.length) === 0 || !isOnlyOneRow;
   var handle = {
     inputsChange: function inputsChange(val, prop) {
       return setState(_objectSpread(_objectSpread({}, state), {}, (0, _defineProperty2.default)({}, prop, val)));
@@ -126,6 +129,60 @@ var RangeList = function RangeList(props) {
       if (code === 13) inputToRef.current.blur();
     }
   };
+
+  var renderInputsAndAddButtonRow = function renderInputsAndAddButtonRow() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__inputs"))
+    }, /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
+      className: "".concat(RC, "__cell-input")
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      testId: "range-list".concat(testId && "--".concat(testId), "-from"),
+      ref: inputFromRef,
+      onlyNumbers: isFloatValues ? {
+        type: 'float',
+        decimalPlaces: decimalPlaces || 0
+      } : {
+        type: 'int'
+      },
+      value: state.from,
+      onBlur: function onBlur(e) {
+        return handle.rangeValidation(e, 'from');
+      },
+      onChange: function onChange(val) {
+        return handle.inputsChange(val, 'from');
+      },
+      onKeyUp: function onKeyUp(code) {
+        return handle.onKeyUpFromInput(code);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
+      className: "".concat(RC, "__cell-input")
+    }, /*#__PURE__*/_react.default.createElement(_Input.default, {
+      testId: "range-list".concat(testId && "--".concat(testId), "-to"),
+      ref: inputToRef,
+      onlyNumbers: isFloatValues ? {
+        type: 'float',
+        decimalPlaces: decimalPlaces || 0
+      } : {
+        type: 'int'
+      },
+      value: state.to,
+      onBlur: function onBlur(e) {
+        return handle.rangeValidation(e, 'to');
+      },
+      onChange: function onChange(val) {
+        return handle.inputsChange(val, 'to');
+      },
+      onKeyUp: function onKeyUp(code) {
+        return handle.onKeyUpToInput(code);
+      }
+    })), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
+      className: "".concat(RC, "__cell-button")
+    }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      testId: "range-list".concat(testId && "--".concat(testId), "-button"),
+      onClick: handle.addRange
+    }, "Add")));
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(RC, className, (0, _defineProperty2.default)({}, "".concat(RC, "_disabled"), disabled))
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -134,56 +191,7 @@ var RangeList = function RangeList(props) {
     className: "".concat(RC, "__cell-label")
   }, "From"), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
     className: "".concat(RC, "__cell-label")
-  }, "To")), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__inputs"))
-  }, /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
-    className: "".concat(RC, "__cell-input")
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    testId: "range-list".concat(testId && "--".concat(testId), "-from"),
-    ref: inputFromRef,
-    onlyNumbers: isFloatValues ? {
-      type: 'float',
-      decimalPlaces: decimalPlaces || 0
-    } : {
-      type: 'int'
-    },
-    value: state.from,
-    onBlur: function onBlur(e) {
-      return handle.rangeValidation(e, 'from');
-    },
-    onChange: function onChange(val) {
-      return handle.inputsChange(val, 'from');
-    },
-    onKeyUp: function onKeyUp(code) {
-      return handle.onKeyUpFromInput(code);
-    }
-  })), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
-    className: "".concat(RC, "__cell-input")
-  }, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    testId: "range-list".concat(testId && "--".concat(testId), "-to"),
-    ref: inputToRef,
-    onlyNumbers: isFloatValues ? {
-      type: 'float',
-      decimalPlaces: decimalPlaces || 0
-    } : {
-      type: 'int'
-    },
-    value: state.to,
-    onBlur: function onBlur(e) {
-      return handle.rangeValidation(e, 'to');
-    },
-    onChange: function onChange(val) {
-      return handle.inputsChange(val, 'to');
-    },
-    onKeyUp: function onKeyUp(code) {
-      return handle.onKeyUpToInput(code);
-    }
-  })), /*#__PURE__*/_react.default.createElement(_RangeListRow.RangeListCell, {
-    className: "".concat(RC, "__cell-button")
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    testId: "range-list".concat(testId && "--".concat(testId), "-button"),
-    onClick: handle.addRange
-  }, "Add"))), (innerError || outerError || error) && /*#__PURE__*/_react.default.createElement("span", {
+  }, "To")), isShowRow && renderInputsAndAddButtonRow(), (innerError || outerError || error) && /*#__PURE__*/_react.default.createElement("span", {
     className: "".concat(RC, "__error")
   }, innerError || error || outerError), !(value !== null && value !== void 0 && value.length) && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)("".concat(RC, "__row"), "".concat(RC, "__values"), "".concat(RC, "__null-value"))

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.js

@@ -196,7 +196,9 @@ var TieredCheckboxes = function TieredCheckboxes(_ref) {
         var disabled = _ref4.disabled;
         return disabled === true;
       }) || parent.disabled
-    }), renderInner(parent));
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__parent__children"))
+    }, renderInner(parent)));
   }));
 };
 

package/dist/Atomic/FormElements/TieredCheckboxes/TieredCheckboxes.scss

@@ -1,6 +1,10 @@
 .tiered-checkboxes {
   &__parents {
     margin-bottom: 25px;
+
+    & > label {
+      display: inline-flex;
+    }
   }
 
   &__children {

package/dist/Atomic/UI/Box/Box.js

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./Box.scss");
+
+// global
+// styles
+var directionVariants = {
+  column: 'column',
+  row: 'row'
+};
+var sizes = {
+  none: 'none',
+  xs: 'xs',
+  s: 's',
+  m: 'm',
+  l: 'l',
+  xl: 'xl'
+};
+
+var Box = function Box(_ref) {
+  var children = _ref.children,
+      _ref$paddingVariant = _ref.paddingVariant,
+      paddingVariant = _ref$paddingVariant === void 0 ? sizes.m : _ref$paddingVariant,
+      _ref$radiiVariant = _ref.radiiVariant,
+      radiiVariant = _ref$radiiVariant === void 0 ? sizes.s : _ref$radiiVariant,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? directionVariants.column : _ref$direction,
+      className = _ref.className;
+  var styles = {
+    flexDirection: direction
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: styles,
+    className: (0, _classnames.default)('box', "box--padding-".concat(paddingVariant), "box--radii-".concat(radiiVariant), className, {
+      df: direction === directionVariants.row,
+      'dfc-jc': direction === directionVariants.column
+    })
+  }, children);
+};
+
+var _default = Box;
+exports.default = _default;

package/dist/Atomic/UI/Box/Box.scss

@@ -0,0 +1,58 @@
+@import '../../../scss/_vars';
+
+.box {
+  box-sizing: border-box;
+  height: fit-content;
+
+  border: 1px solid #E1E8F1;
+
+  &--radii-none {
+    border-radius: 0;
+  }
+
+
+  &--radii-xs {
+    border-radius: $radii-xs;
+  }
+
+  &--radii-s {
+    border-radius: $radii-s;
+  }
+
+  &--radii-m {
+    border-radius: $radii-m;
+  }
+
+  &--radii-l {
+    border-radius: $radii-l;
+  }
+
+  &--radii-xl {
+    border-radius: $radii-xl;
+  }
+
+  &--padding-none {
+    padding: 0;
+  }
+
+
+  &--padding-xs {
+    padding: $spacing-xs;
+  }
+
+  &--padding-s {
+    padding: $spacing-s;
+  }
+
+  &--padding-m {
+    padding: $spacing-m;
+  }
+
+  &--padding-l {
+    padding: $spacing-l;
+  }
+
+  &--padding-xl {
+    padding: $spacing-xl;
+  }
+}

package/dist/scss/_vars.scss

@@ -2,6 +2,19 @@
 //@import "anme/scss/anme-vars";
 @import "~anme/scss/anme-vars";
 
+$radii-xs: 4px;
+$radii-s: 8px;
+$radii-m: 16px;
+$radii-l: 24px;
+$radii-xl: 32px;
+
+
+$spacing-xs: 4px;
+$spacing-s: 8px;
+$spacing-m: 16px;
+$spacing-l: 24px;
+$spacing-xl: 32px;
+
 /* THEME COLORS */
 
 $color--secondary: #F06D8D;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.0.76",
+  "version": "1.0.78",
   "description": "",
   "main": "dist/index.js",
   "files": [