@zohodesk/components 1.0.0-temp-48 → 1.0.0-temp-51

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -945,7 +945,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           i18nKeys = _this$props8.i18nKeys,
           a11y = _this$props8.a11y,
           isSearchClearOnSelect = _this$props8.isSearchClearOnSelect,
-          palette = _this$props8.palette;
+          palette = _this$props8.palette,
+          needEffect = _this$props8.needEffect;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -973,9 +974,9 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
@@ -1150,7 +1151,8 @@ AdvancedGroupMultiSelect.defaultProps = {
   isPadding: false,
   i18nKeys: {},
   a11y: {},
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: _propTypes["default"].bool
 };
 AdvancedGroupMultiSelect.propTypes = {
   animationStyle: _propTypes["default"].string,
@@ -1200,7 +1202,8 @@ AdvancedGroupMultiSelect.propTypes = {
   variant: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
-  palette: _propTypes["default"].oneOf(['default', 'dark'])
+  palette: _propTypes["default"].oneOf(['default', 'dark']),
+  needEffect: true
 };
 
 if (false) {

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -110,6 +110,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
     _this.state = Object.assign({}, oldState, {
       showedSelectedOptionsCount: !(0, _Common.getIsEmptyValue)(selectedOptionsLimit) && selectedOptionsLen > selectedOptionsLimit ? selectedOptionsLimit : selectedOptionsLen
     });
+    _this.getIsShowClearIcon = (0, _dropDownUtils.makeGetIsShowClearIcon)();
     _this.handleFilterSuggestions = _this.handleFilterSuggestions.bind(_assertThisInitialized(_this));
     _this.handleChange = _this.handleChange.bind(_assertThisInitialized(_this));
     _this.handleSelectOption = _this.handleSelectOption.bind(_assertThisInitialized(_this));
@@ -257,7 +258,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           imageField = props.imageField,
           optionType = props.optionType,
           iconName = props.iconName,
-          iconSize = props.iconSize;
+          iconSize = props.iconSize,
+          disabledOptions = props.disabledOptions;
       return this.formatSelectedOptions({
         options: selectedOptionDetails,
         valueField: valueField,
@@ -265,7 +267,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         imageField: imageField,
         optionType: optionType,
         iconName: iconName,
-        iconSize: iconSize
+        iconSize: iconSize,
+        disabledOptions: disabledOptions
       });
     }
   }, {
@@ -411,7 +414,9 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           borderColor = _this$props5.borderColor,
           isBoxPaddingNeed = _this$props5.isBoxPaddingNeed,
           getFooter = _this$props5.getFooter,
-          customProps = _this$props5.customProps;
+          customProps = _this$props5.customProps,
+          needEffect = _this$props5.needEffect,
+          disabledOptions = _this$props5.disabledOptions;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
@@ -440,10 +445,18 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       var moreCount = allselectedOptionIdsLen - showedSelectedOptionsCount;
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
+
+      var _this$getIsShowClearI = this.getIsShowClearIcon({
+        selectedOptions: selectedOptions,
+        disabledOptions: disabledOptions
+      }),
+          isShowClear = _this$getIsShowClearI.isShowClearIcon;
+
+      var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_AdvancedMultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _AdvancedMultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _AdvancedMultiSelectModule["default"].transparentContainer : ''),
+        className: "".concat(_AdvancedMultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _AdvancedMultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _AdvancedMultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _AdvancedMultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
@@ -489,7 +502,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           ariaDescribedby: ariaErrorId
         },
         autoComplete: false
-      })), !isReadOnly && !isDisabled && selectedOptions.length > 1 ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      })), isShowClearIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AdvancedMultiSelectModule["default"]["delete"],
         dataId: dataIdClearIcon,
         "data-title": clearText,
@@ -588,6 +601,7 @@ AdvancedMultiSelectComponent.propTypes = {
   //For grouping multiSelect
   getPublicMethods: _propTypes["default"].func,
   optionType: _propTypes["default"].oneOf(['default', 'avatar', 'icon']),
+  needEffect: _propTypes["default"].bool,
   animationStyle: _propTypes["default"].string,
   defaultDropBoxPosition: _propTypes["default"].oneOf(['bottom', 'top', 'left', 'right']),
   dropBoxSize: _propTypes["default"].oneOf(['small', 'medium', 'large']),
@@ -662,7 +676,8 @@ AdvancedMultiSelectComponent.defaultProps = {
   borderColor: 'default',
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
-  customProps: {}
+  customProps: {},
+  needEffect: true
 };
 AdvancedMultiSelectComponent.displayName = 'AdvancedMultiSelect';
 var AdvancedMultiSelect = (0, _Popup["default"])(AdvancedMultiSelectComponent);

package/lib/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,8 +1,8 @@
 .wrapper {
   position: relative;
 }
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
 .container {
   max-height: var(--zd_size120);
@@ -16,28 +16,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_advancedmultiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_advancedmultiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
 [dir=ltr] .container.medium {

package/lib/MultiSelect/MultiSelect.js

@@ -106,7 +106,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
     _this.getNextAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     _this.getFilterSuggestions = (0, _dropDownUtils.makeGetMultiSelectFilterSuggestions)();
     _this.formatOptions = (0, _dropDownUtils.makeFormatOptions)();
-    _this.getSelectedOptions = (0, _dropDownUtils.makeGetMultiSelectSelectedOptions)(); //Use in AdvancedMultiSelect component
+    _this.getSelectedOptions = (0, _dropDownUtils.makeGetMultiSelectSelectedOptions)();
+    _this.getIsShowClearIcon = (0, _dropDownUtils.makeGetIsShowClearIcon)(); //Use in AdvancedMultiSelect component
 
     _this.objectConcat = (0, _dropDownUtils.makeObjectConcat)();
     _this.formatSelectedOptions = (0, _dropDownUtils.makeFormatOptions)();
@@ -367,7 +368,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           onKeyDown = _this$props5.onKeyDown;
       var highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
-      if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27)) {
+      if (isPopupOpen && (keyCode === 38 || keyCode === 40 || keyCode === 13 || keyCode === 27 || keyCode === 9)) {
         suggestions = this.handleFilterSuggestions();
       }
 
@@ -510,6 +511,12 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           });
         }
       } else if (keyCode === 27) {// this.handlePopupClose(e);
+      } else if (keyCode === 9) {
+        var _selectedOption = suggestions[hoverOption] || {};
+
+        var _id = _selectedOption.id;
+        isPopupOpen && !(0, _Common.getIsEmptyValue)(_id) && this.handleSelectOption(_id, e);
+        this.handlePopupClose(e);
       }
     }
   }, {
@@ -936,7 +943,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props13.a11y,
           children = _this$props13.children,
           customChildrenClass = _this$props13.customChildrenClass,
-          getFooter = _this$props13.getFooter;
+          getFooter = _this$props13.getFooter,
+          needEffect = _this$props13.needEffect,
+          disabledOptions = _this$props13.disabledOptions;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText,
@@ -960,11 +969,18 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var suggestions = this.handleFilterSuggestions();
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
-      var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
+
+      var _this$getIsShowClearI = this.getIsShowClearIcon({
+        selectedOptions: selectedOptions,
+        disabledOptions: disabledOptions
+      }),
+          isShowClear = _this$getIsShowClearI.isShowClearIcon;
+
+      var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && isShowClear;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
@@ -1169,7 +1185,8 @@ MultiSelectComponent.propTypes = {
   children: _propTypes["default"].node,
   customChildrenClass: _propTypes["default"].string,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  getFooter: _propTypes["default"].func
+  getFooter: _propTypes["default"].func,
+  needEffect: _propTypes["default"].bool
 };
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -1199,7 +1216,8 @@ MultiSelectComponent.defaultProps = {
   a11y: {},
   textBoxClass: '',
   palette: 'default',
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 
 if (false) {

package/lib/MultiSelect/MultiSelect.module.css

@@ -2,14 +2,9 @@
   position: relative;
 }
 
-.disabled {
-  composes: disabled from '../common/common.module.css';
+.disabled, .readOnly {
+  cursor: not-allowed;
 }
-
-.readOnly {
-  composes: readonly from '../common/common.module.css';
-}
-
 .container {
   max-height: var(--zd_size120);
   composes: oflowy from '../common/common.module.css';
@@ -22,28 +17,28 @@
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
 }
-.borderColor_transparent:hover {
+.effect .borderColor_transparent:hover {
   border-bottom-color: var(--zdt_multiselect_transparent_hover_border);
 }
-.borderColor_transparent.active {
+.effect .borderColor_transparent.active {
   border-bottom-color: var(--zdt_multiselect_transparent_active_border);
 }
 .borderColor_default {
   border-bottom-color: var(--zdt_multiselect_default_border);
 }
-.borderColor_default:hover {
+.effect .borderColor_default:hover {
   border-bottom-color: var(--zdt_multiselect_default_hover_border);
 }
-.borderColor_default.active {
+.effect .borderColor_default.active {
   border-bottom-color: var(--zdt_multiselect_default_active_border);
 }
 .borderColor_dark {
   border-bottom-color: var(--zdt_multiselect_dark_border);
 }
-.borderColor_dark:hover {
+.effect .borderColor_dark:hover {
   border-bottom-color: var(--zdt_multiselect_dark_hover_border);
 }
-.borderColor_dark.active {
+.effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_multiselect_dark_active_border);
 }
 

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -140,7 +140,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
           a11y = _this$props.a11y,
           children = _this$props.children,
           customChildrenClass = _this$props.customChildrenClass,
-          isBoxPaddingNeed = _this$props.isBoxPaddingNeed;
+          isBoxPaddingNeed = _this$props.isBoxPaddingNeed,
+          needEffect = _this$props.needEffect;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -165,9 +166,9 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       var popUpState = !isReadOnly && !isDisabled && !disableAction && isPopupOpen;
       var isShowClearIcon = !isReadOnly && !isDisabled && !disableAction && selectedOptions.length > 1;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : ''),
+        className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : '',
+        "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
@@ -339,6 +340,7 @@ MultiSelectWithAvatarComponent.propTypes = {
   palette: _propTypes["default"].oneOf(['default', 'dark']),
   htmlId: _propTypes["default"].string,
   isBoxPaddingNeed: _propTypes["default"].bool,
+  needEffect: _propTypes["default"].bool,
 
   /**** Popup props ****/
   isPopupOpen: _propTypes["default"].bool,
@@ -388,7 +390,8 @@ MultiSelectWithAvatarComponent.defaultProps = {
   a11y: {},
   palette: 'default',
   isBoxPaddingNeed: true,
-  isSearchClearOnSelect: true
+  isSearchClearOnSelect: true,
+  needEffect: true
 };
 MultiSelectWithAvatarComponent.displayName = 'MultiSelectWithAvatar';
 var MultiSelectWithAvatar = (0, _Popup["default"])(MultiSelectWithAvatarComponent);

package/lib/MultiSelect/SelectedOptions.js

@@ -76,13 +76,14 @@ var SelectedOptions = /*#__PURE__*/function (_React$PureComponent) {
             isDisabled = option.isDisabled;
         var commonProps = {
           disabled: isDisabled,
-          onRemove: isDisabled ? null : onRemove,
+          onRemove: isDisabled || isReadOnly ? null : onRemove,
           text: value,
           palette: isDarkPalette,
           onSelectTag: isReadOnly ? null : onSelect,
           getRef: getRef,
           initial: value,
-          id: id
+          id: id,
+          isReadOnly: isReadOnly
         };
 
         if (optionType === 'avatar') {

package/lib/PopOver/PopOver.js

@@ -184,26 +184,25 @@ PopOver.propTypes = {
   size: _propTypes["default"].string,
   togglePopup: _propTypes["default"].func,
   top: _propTypes["default"].string
-};
-PopOver.propTypesDescription = {
-  right: ' ',
-  left: ' ',
-  top: ' ',
-  bottom: ' ',
-  arrowRight: ' ',
-  arrowLeft: ' ',
-  arrowTop: ' ',
-  arrowBottom: ' ',
-  arrowPosition: ' ',
-  boxPosition: ' ',
-  size: ' ',
-  children: ' ',
-  onPopupOpen: ' ',
-  isPopupOpen: ' ',
-  onPopupClose: ' ',
-  getTargetRef: ' ',
-  getContainerRef: ' '
-};
+}; // PopOver.propTypesDescription = {
+//   right: ' ',
+//   left: ' ',
+//   top: ' ',
+//   bottom: ' ',
+//   arrowRight: ' ',
+//   arrowLeft: ' ',
+//   arrowTop: ' ',
+//   arrowBottom: ' ',
+//   arrowPosition: ' ',
+//   boxPosition: ' ',
+//   size: ' ',
+//   children: ' ',
+//   onPopupOpen: ' ',
+//   isPopupOpen: ' ',
+//   onPopupClose: ' ',
+//   getTargetRef: ' ',
+//   getContainerRef: ' '
+// };
 
 if (false) {
   PopOver.docs = {

package/lib/PopOver/PopOver.module.css

@@ -1,6 +1,6 @@
 .popup {
   position: relative;
-  background-color: var(--dot_bg_white);
+  background-color: var(--dot_white);
 }
 .target {
   composes: offSelection from '../common/common.module.css';

package/lib/Popup/Popup.js

@@ -476,8 +476,11 @@ var Popup = function Popup(Component) {
 
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isResizeHandling = arguments.length > 1 ? arguments[1] : undefined;
+
         // isResizeHandling --->>> Window resize and dropBox resize
-        var direction = this.context.direction;
+        var _ref3 = this.context || {},
+            direction = _ref3.direction;
+
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
         var needArrow = this.getNeedArrow(this);
@@ -513,12 +516,12 @@ var Popup = function Popup(Component) {
               customOrder: customOrder
             });
 
-            var _ref3 = betterPosition || {},
-                view = _ref3.view,
-                views = _ref3.views,
-                viewsOffset = _ref3.viewsOffset,
-                targetOffset = _ref3.targetOffset,
-                popupOffset = _ref3.popupOffset;
+            var _ref4 = betterPosition || {},
+                view = _ref4.view,
+                views = _ref4.views,
+                viewsOffset = _ref4.viewsOffset,
+                targetOffset = _ref4.targetOffset,
+                popupOffset = _ref4.popupOffset;
 
             if (position !== view || !isPopupReady) {
               _this4.setState({
@@ -576,25 +579,25 @@ var Popup = function Popup(Component) {
                     customOrder: customOrder
                   });
 
-                  var _ref4 = betterPosition || {},
-                      view = _ref4.view,
-                      views = _ref4.views,
-                      _ref4$viewsOffset = _ref4.viewsOffset,
-                      viewsOffset = _ref4$viewsOffset === void 0 ? {} : _ref4$viewsOffset,
-                      targetOffset = _ref4.targetOffset,
-                      popupOffset = _ref4.popupOffset;
-
-                  var _ref5 = positionsOffset[position] || {},
-                      _ref5$left = _ref5.left,
-                      oldLeft = _ref5$left === void 0 ? '' : _ref5$left,
-                      _ref5$top = _ref5.top,
-                      oldTop = _ref5$top === void 0 ? '' : _ref5$top;
-
-                  var _ref6 = viewsOffset[view] || {},
+                  var _ref5 = betterPosition || {},
+                      view = _ref5.view,
+                      views = _ref5.views,
+                      _ref5$viewsOffset = _ref5.viewsOffset,
+                      viewsOffset = _ref5$viewsOffset === void 0 ? {} : _ref5$viewsOffset,
+                      targetOffset = _ref5.targetOffset,
+                      popupOffset = _ref5.popupOffset;
+
+                  var _ref6 = positionsOffset[position] || {},
                       _ref6$left = _ref6.left,
-                      left = _ref6$left === void 0 ? '' : _ref6$left,
+                      oldLeft = _ref6$left === void 0 ? '' : _ref6$left,
                       _ref6$top = _ref6.top,
-                      top = _ref6$top === void 0 ? '' : _ref6$top;
+                      oldTop = _ref6$top === void 0 ? '' : _ref6$top;
+
+                  var _ref7 = viewsOffset[view] || {},
+                      _ref7$left = _ref7.left,
+                      left = _ref7$left === void 0 ? '' : _ref7$left,
+                      _ref7$top = _ref7.top,
+                      top = _ref7$top === void 0 ? '' : _ref7$top;
 
                   var changeState = isAbsolute ? position !== view : oldLeft !== left || oldTop !== top; // let isInViewPort = viewPort.isInViewPort(
                   //   placeHolderElement,
@@ -658,11 +661,11 @@ var Popup = function Popup(Component) {
         var height = popupSize.height,
             width = popupSize.width;
 
-        var _ref7 = this.size || {},
-            _ref7$height = _ref7.height,
-            oldHeight = _ref7$height === void 0 ? 0 : _ref7$height,
-            _ref7$width = _ref7.width,
-            oldWidth = _ref7$width === void 0 ? 0 : _ref7$width;
+        var _ref8 = this.size || {},
+            _ref8$height = _ref8.height,
+            oldHeight = _ref8$height === void 0 ? 0 : _ref8$height,
+            _ref8$width = _ref8.width,
+            oldWidth = _ref8$width === void 0 ? 0 : _ref8$width;
 
         var _this$state = this.state,
             isPopupReady = _this$state.isPopupReady,

package/lib/Provider/Config.js

@@ -12,7 +12,8 @@ var id = {
   idPrefix: 'ZD',
   scrollFetchLimit: 80,
   isReducedMotion: false,
-  direction: 'ltr'
+  direction: 'ltr',
+  tooltipDebounce: 175
 };
 
 function getLibraryConfig(key) {

package/lib/Provider.js

@@ -15,49 +15,49 @@ var _Layout = require("./Layout");
 
 var _Switch = _interopRequireDefault(require("./Switch/Switch"));
 
-require("./Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css");
 
-require("./Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/red/redDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css");
 
-require("./Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
+require("../assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css");
 
-require("./Appearance/default/mode/defaultMode.module.css");
+require("../assets/Appearance/default/mode/defaultMode.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css");
 
-require("./Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/red/redDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css");
 
-require("./Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
+require("../assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css");
 
-require("./Appearance/dark/mode/darkMode.module.css");
+require("../assets/Appearance/dark/mode/darkMode.module.css");
 
 var _LibraryContextInit = _interopRequireDefault(require("./Provider/LibraryContextInit"));
 

package/lib/Radio/Radio.js

@@ -15,8 +15,6 @@ var _Label = _interopRequireDefault(require("../Label/Label"));
 
 var _Layout = require("../Layout");
 
-var _CssProvider = _interopRequireDefault(require("../Provider/CssProvider"));
-
 var _RadioModule = _interopRequireDefault(require("./Radio.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -92,7 +90,7 @@ var Radio = /*#__PURE__*/function (_React$Component) {
           customRadio = _customClass$customRa2 === void 0 ? '' : _customClass$customRa2,
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
-      var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? (0, _CssProvider["default"])('isDisabled') : _RadioModule["default"].pointer;
+      var accessMode = isReadOnly ? _RadioModule["default"].readonly : disabled ? _RadioModule["default"].disabled : _RadioModule["default"].pointer;
       var toolTip = disabled ? disabledTitle : title ? title : null;
       var ariaHidden = a11y.ariaHidden,
           _a11y$role = a11y.role,

package/lib/Radio/Radio.module.css

@@ -18,8 +18,8 @@
 .pointer {
   cursor: pointer;
 }
-.readonly {
-  cursor: default;
+.readonly, .disabled {
+  cursor: not-allowed;
 }
 .radio {
   composes: offSelection from '../common/common.module.css';

package/lib/Responsive/ResizeComponent.js

@@ -97,7 +97,7 @@ var ResizeComponent = /*#__PURE__*/function (_React$Component) {
               var newAdded = false;
               mutation.addedNodes.forEach(function (mut) {
                 // Here we can listen for icon nodes. Confirm with bk
-                if (mut.attributes['data-responsive'] && (childrenList.length !== _this2.querySelector().length || _this2.childrenCurrentList.length !== _this2.querySelector().length)) {
+                if (mut.attributes && mut.attributes['data-responsive'] && (childrenList.length !== _this2.querySelector().length || _this2.childrenCurrentList.length !== _this2.querySelector().length)) {
                   newAdded = true;
                 }
               });