intelicoreact 1.0.90 → 1.0.92

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.js

@@ -0,0 +1,277 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactFeather = require("react-feather");
+
+var _useDebounce = require("../../../Functions/useDebounce");
+
+var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+
+var _Spinner = _interopRequireDefault(require("../../Layout/Spinner/Spinner"));
+
+require("./DropdownLiveSearch.scss");
+
+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 || _typeof3(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; }
+
+var RC = 'dropdown-live-search';
+
+var DropdownLiveSearch = function DropdownLiveSearch(_ref) {
+  var value = _ref.value,
+      error = _ref.error,
+      disabled = _ref.disabled,
+      onChange = _ref.onChange,
+      placeholder = _ref.placeholder,
+      className = _ref.className,
+      isSearchable = _ref.isSearchable,
+      scrollReactionObj = _ref.scrollReactionObj,
+      testId = _ref.testId,
+      doRequest = _ref.doRequest,
+      isLoading = _ref.isLoading,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      fieldKey = _ref.fieldKey,
+      id = _ref.id,
+      _ref$isNotValidateASC = _ref.isNotValidateASCII,
+      isNotValidateASCII = _ref$isNotValidateASC === void 0 ? false : _ref$isNotValidateASC,
+      _ref$noOptionsText = _ref.noOptionsText,
+      noOptionsText = _ref$noOptionsText === void 0 ? 'No options available' : _ref$noOptionsText;
+  var dropdownId = fieldKey || id;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      isValueDeleted = _useState4[0],
+      setIsValueDeleted = _useState4[1];
+
+  var labelByValue = (0, _react.useMemo)(function () {
+    var _options$find;
+
+    return (options === null || options === void 0 ? void 0 : (_options$find = options.find(function (item) {
+      return item.value === value;
+    })) === null || _options$find === void 0 ? void 0 : _options$find.label) || '';
+  }, [value]);
+
+  var _useState5 = (0, _react.useState)(labelByValue),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      searchValue = _useState6[0],
+      setSearchValue = _useState6[1];
+
+  var dropdownLiveSearchRef = (0, _react.useRef)(null);
+  var dropdownListBoxRef = (0, _react.useRef)(null);
+  var dropdownListRef = (0, _react.useRef)(null);
+  var searchInputRef = (0, _react.useRef)(null);
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      isFocusedByClick = _useState8[0],
+      setIsFocusedByClick = _useState8[1];
+
+  var debouncedSearchTerm = (0, _useDebounce.useDebounce)({
+    searchValue: searchValue,
+    delay: 600
+  });
+  if (!options) return null;
+
+  var handleClickOutside = function handleClickOutside(event) {
+    if (!dropdownLiveSearchRef.current.contains(event.target)) setIsOpen(false);
+  };
+
+  var highlightedText = function highlightedText(text, postfix) {
+    var _text;
+
+    var prepare = function prepare(text) {
+      return text === null || text === void 0 ? void 0 : text.replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');
+    };
+
+    text = text.replace(/["&<>]/g, function (a) {
+      return {
+        '"': '&quot;',
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;'
+      }[a];
+    });
+    var main = searchValue ? (_text = text) === null || _text === void 0 ? void 0 : _text.replace(new RegExp(prepare(searchValue), 'i'), function (match) {
+      return "<span class=\"bg--yellow\">".concat(match, "</span>");
+    }) : text;
+    var postfixPart = postfix ? "<span class=\"dropdown__list-item-postfix\">".concat(postfix, "</span>") : '';
+    return main + postfixPart;
+  };
+
+  var getMarkupForElement = function getMarkupForElement(item, index, optTestId) {
+    var _item$value, _item$value$toString, _item$value2, _item$value2$toString, _cn;
+
+    var lowerLabel = item.label.toLowerCase();
+    var lowerSearchValue = searchValue.toLowerCase();
+    return /*#__PURE__*/_react.default.createElement("button", {
+      "data-testid": "dropdown-live-search--button--key-".concat(optTestId || (item === null || item === void 0 ? void 0 : (_item$value = item.value) === null || _item$value === void 0 ? void 0 : (_item$value$toString = _item$value.toString()) === null || _item$value$toString === void 0 ? void 0 : _item$value$toString.replace(/\s/, '-')) || (item === null || item === void 0 ? void 0 : item.key) || 'item', "--option"),
+      key: (_item$value2 = item.value) === null || _item$value2 === void 0 ? void 0 : (_item$value2$toString = _item$value2.toString()) === null || _item$value2$toString === void 0 ? void 0 : _item$value2$toString.replace(/ /g, '_'),
+      onClick: function onClick() {
+        onChange(item.value);
+        setIsOpen(false);
+        setSearchValue(item.label);
+      },
+      className: (0, _classnames.default)("".concat(RC, "__list-item"), (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-item_active"), item.value === value), (0, _defineProperty2.default)(_cn, "".concat(RC, "__list-item_disabled"), item.disabled), _cn), item.className)
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), lowerLabel === lowerSearchValue))
+    }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: item.labelClassName || '',
+      dangerouslySetInnerHTML: {
+        __html: highlightedText(item.label, item.postfix)
+      }
+    }));
+  };
+
+  var getListMarkUp = function getListMarkUp() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      id: "dropdown-live-search-list",
+      className: (0, _classnames.default)("".concat(RC, "__container")),
+      ref: dropdownListBoxRef
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: (0, _classnames.default)("".concat(RC, "__list"), {
+        disabled: isLoading
+      }),
+      ref: dropdownListRef
+    }, options.map(function (option) {
+      return getMarkupForElement(option);
+    }), !options.length && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(RC, "__list-item ").concat(RC, "__list-item--no-options")
+    }, noOptionsText)), isLoading && isOpen && /*#__PURE__*/_react.default.createElement(_Spinner.default, {
+      size: options.length <= 3 ? 'small' : null
+    }));
+  };
+
+  var getListContainer = function getListContainer() {
+    return document.getElementById(dropdownId);
+  };
+
+  (0, _react.useEffect)(function () {
+    document.addEventListener('click', handleClickOutside, true);
+    return function () {
+      return document.removeEventListener('click', handleClickOutside, true);
+    };
+  }, [value]);
+
+  var searchableInputFocus = function searchableInputFocus(e) {
+    if (!isOpen) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+  };
+
+  var handle = {
+    onInputClick: function onInputClick(e) {
+      if (!isOpen) setIsOpen(true);
+      e.target.select();
+    },
+    onInputChange: function onInputChange(e) {
+      var inputValue = e.target.value;
+      if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+      setSearchValue(inputValue);
+      if (searchValue && !e.target.value) setIsValueDeleted(true);else setIsValueDeleted(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (isSearchable && debouncedSearchTerm || isValueDeleted) {
+      doRequest(debouncedSearchTerm);
+    }
+  }, [debouncedSearchTerm, isValueDeleted]);
+
+  var closeListViaEsc = function closeListViaEsc(e) {
+    if ([27].includes(e.keyCode)) setIsOpen(false);
+  };
+
+  (0, _react.useLayoutEffect)(function () {
+    window.addEventListener('keyup', closeListViaEsc);
+    return function () {
+      window.removeEventListener('keyup', closeListViaEsc);
+    };
+  }, [getListContainer]);
+  (0, _react.useLayoutEffect)(function () {
+    var list = document.getElementById('dropdown-live-search-list');
+
+    if (list || isOpen) {
+      var _dropdownLiveSearchRe;
+
+      var dropdownWidth = dropdownLiveSearchRef === null || dropdownLiveSearchRef === void 0 ? void 0 : (_dropdownLiveSearchRe = dropdownLiveSearchRef.current) === null || _dropdownLiveSearchRe === void 0 ? void 0 : _dropdownLiveSearchRe.clientWidth;
+      list.style.width = "".concat(dropdownWidth, "px");
+    }
+  }, [dropdownLiveSearchRef, isOpen]);
+  var doScrollCallback = (0, _react.useCallback)(function (e) {
+    if (doRequest && typeof doRequest === 'function') {
+      if (Math.round(e.target.clientHeight + e.target.scrollTop) == e.target.scrollHeight) {
+        doRequest(searchValue);
+      }
+    }
+  }, [options]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen) setIsFocusedByClick(false);
+
+    if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object' && isOpen && dropdownListRef && dropdownListRef.current) {
+      dropdownListRef.current.addEventListener('scroll', doScrollCallback);
+    }
+
+    return function () {
+      if (scrollReactionObj && (0, _typeof2.default)(scrollReactionObj) === 'object') removeEventListener('scroll', doScrollCallback);
+    };
+  }, [isOpen, dropdownListRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, className, disabled),
+    ref: dropdownLiveSearchRef
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": "dropdown-live-search--".concat(testId || '', "--container"),
+    className: "".concat(RC, "__trigger input__wrap ").concat(isOpen ? 'input__wrap--focus' : '', " ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
+    onClick: function onClick() {
+      return !isSearchable ? setIsOpen(!isOpen) : null;
+    },
+    onMouseDown: function onMouseDown() {
+      return setIsFocusedByClick(true);
+    },
+    onFocus: function onFocus() {
+      return !isFocusedByClick ? setIsOpen(true) : null;
+    }
+  }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
+    ref: searchInputRef,
+    className: "".concat(RC, "__input"),
+    value: searchValue,
+    onChange: handle.onInputChange,
+    placeholder: placeholder,
+    onFocus: searchableInputFocus,
+    onClick: handle.onInputClick
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "text"
+  }, labelByValue || placeholder)), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && getListMarkUp());
+};
+
+var _default = DropdownLiveSearch;
+exports.default = _default;

package/dist/Atomic/FormElements/DropdownLiveSearch/DropdownLiveSearch.scss

@@ -0,0 +1,193 @@
+@import "../../../scss/vars";
+
+.dropdown-live-search {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+  border-radius: 7px;
+
+  &__trigger {
+    position: relative;
+    display: block;
+    align-items: center;
+    box-sizing: border-box;
+    width: 100%;
+    height: 28px;
+    cursor: pointer;
+    text-align: left;
+    border: 1px solid #E2E5EC;
+    border-radius: 3px;
+    background: #FFF;
+    font-weight: 400;
+
+    .text {
+      overflow: hidden;
+      max-width: calc(100% - 5px);
+      padding: 0 16px 0 8px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    &.error {
+      border-color: $color--secondary;
+    }
+
+    &.placeholder .text {
+      opacity: 0.7;
+    }
+  }
+
+  &__input {
+    width: 100%;
+    height: 100%;
+    padding: 0 16px 0 8px;
+    text-overflow: ellipsis;
+    border: none;
+    background: none;
+    font-weight: 400;
+    box-sizing: border-box;
+  }
+
+  &__list {
+    position: relative;
+    z-index: 6;
+    top: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    min-width: 100%;
+    max-height: 320px;
+    margin-top: 4px;
+    padding: 5px 0;
+    border: 1px solid #E2E5EC;
+    background: #FFF;
+    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 4px;
+      background: $color--gray--dark;
+    }
+
+    &-top {
+      top: auto;
+      bottom: calc(100% + 4px);
+      box-shadow: 0 -3px 10px rgb(0 0 0 / 15%);
+    }
+
+    &-item {
+      position: relative;
+      display: flex;
+      overflow: hidden;
+      align-items: center;
+      width: 100%;
+      height: 24px;
+      padding: 0 20px 0 30px;
+      cursor: pointer;
+      white-space: nowrap;
+      color: $color--dark;
+      border: none;
+      background: transparent;
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 24px;
+
+      &--modal {
+        position: relative;
+        width: 100%;
+        text-align: left;
+        letter-spacing: 0.2px;
+        color: #1F7499;
+        font-size: 14px;
+        line-height: 20px;
+
+        &::after {
+          position: absolute;
+          bottom: -2px;
+          width: 300%;
+          height: 1px;
+          content: "";
+          transform: translateX(-50%);
+          background-color: #E8E9EC;
+        }
+      }
+
+      &--no-options {
+        box-sizing: border-box;
+      }
+
+      &:hover,
+      &_active {
+        background: $color--gray--gentle;
+      }
+
+      &_disabled {
+        pointer-events: none;
+        opacity: 0.3;
+      }
+
+      &-postfix {
+        margin-left: 5px;
+      }
+    }
+
+    &--with-label {
+      top: 45px;
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    display: flex;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    transform: translate(0, -50%);
+
+    & svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+
+  &__active-icon {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 9px;
+    display: none;
+    align-items: center;
+    margin: auto;
+
+    &_active {
+      display: flex;
+
+      & svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  &__container {
+    position: fixed;
+    z-index: 99999;
+    display: block;
+    box-sizing: border-box;
+    top: 43px;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}

package/dist/Atomic/FormElements/Input/Input.js

@@ -293,7 +293,8 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var uniProps = _objectSpread(_objectSpread({
     name: inputName,
     className: (0, _classnames.default)('input', className, {
-      'input--with-icon': icon
+      'input--with-icon': icon,
+      'input--with-delete': withDelete
     }),
     placeholder: placeholder,
     value: formatedValue,

package/dist/Functions/useDebounce.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDebounce = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+var useDebounce = function useDebounce(_ref) {
+  var searchValue = _ref.searchValue,
+      delay = _ref.delay;
+
+  var _useState = (0, _react.useState)(searchValue),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      debouncedValue = _useState2[0],
+      setDebouncedValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var handler = setTimeout(function () {
+      setDebouncedValue(searchValue);
+    }, delay);
+    return function () {
+      clearTimeout(handler);
+    };
+  }, [searchValue, delay]);
+  return debouncedValue;
+};
+
+exports.useDebounce = useDebounce;

package/package.json

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