@zohodesk/components 1.0.0-alpha-198 → 1.0.0-alpha-199

package/es/ListItem/ListItem.module.css

@@ -4,6 +4,8 @@
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_border_width: 0;
   --listitem_border_color: var(--zdt_listitem_default_border);
+  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
+    /*rtl: 0 0 0 var(--zd_size15)*/;
   --listitem_bg_color: var(--zdt_listitem_default_bg);
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_height: auto;
@@ -14,11 +16,6 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
-    /*rtl: 0 0 0 var(--zd_size15)*/;
-}[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
   composes: varClass;
@@ -26,49 +23,40 @@
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--zd_size13);
-  height: var(--listitem_height);
-  min-height: var(--listitem_min_height);
-  text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
   border-style: solid;
   border-color: var(--listitem_border_color);
+  height: var(--listitem_height);
+  min-height: var(--listitem_min_height);
   cursor: pointer;
+  text-decoration: none;
 }
-.list, .default, .secondary {
+.list,
+.default,
+.secondary {
   background-color: var(--listitem_bg_color);
 }
-[dir=ltr] .withBorder {
+.withBorder {
   --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-[dir=rtl] .withBorder {
-  --listitem_border_width: 0 1px 0 0;
-}
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-[dir=ltr] .small {
+.small {
   --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
 }
-[dir=rtl] .small {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
-}
 .medium {
   --listitem_padding: var(--zd_size9) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
 .large {
-  --listitem_height: var(--zd_size48);
-}
-[dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
-}
-[dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
+  --listitem_height: var(--zd_size48);
 }
 
 .value,
@@ -77,13 +65,8 @@
 }
 .iconBox {
   width: var(--zd_size20);
-  text-align: center;
-}
-[dir=ltr] .iconBox {
   margin-right: var(--zd_size10);
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size10);
+  text-align: center;
 }
 .iconBox,
 .leftAvatar {
@@ -93,17 +76,15 @@
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover,
+.primaryHover,
+.secondaryHover,
+.darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
-  --listitem_border_color: var(--zdt_listitem_active_border);
-}
-[dir=ltr] .activewithBorder {
   --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
-}
-[dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 1px 0 0;
+  --listitem_border_color: var(--zdt_listitem_active_border);
 }
 
 .defaultHover,
@@ -130,7 +111,10 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault,
+.activeprimary,
+.activesecondary,
+.activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -156,15 +140,8 @@
 .darkTick {
   position: absolute;
   color: var(--listitem_tickicon_color);
-}
-
-[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
   right: var(--zd_size20);
 }
-
-[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
-  left: var(--zd_size20);
-}
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
@@ -174,27 +151,18 @@
 .defaultTick > i {
   display: block;
 }
-[dir=ltr] .smallwithTick {
+.smallwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size5)
     /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
 }
-[dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
-}
-[dir=ltr] .mediumwithTick {
+.mediumwithTick {
   --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
     var(--zd_size20)
     /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30)*/;
 }
-[dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size30);
-}
-[dir=ltr] .largewithTick {
+.largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
     var(--zd_size25)
     /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
 }
-[dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
-}

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -9,9 +9,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_advancedmultiselect_transparent_border);
@@ -40,40 +40,25 @@
 .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-[dir=ltr] .container.medium {
+.container.medium {
   padding: 0 var(--zd_size34) var(--zd_size7) 0;
 }
-[dir=rtl] .container.medium {
-  padding: 0 0 var(--zd_size7) var(--zd_size34);
-}
 .container.xmedium {
-  min-height: var(--zd_size30);
-}
-[dir=ltr] .container.xmedium {
   padding: 0 var(--zd_size34) var(--zd_size1) 0;
-}
-[dir=rtl] .container.xmedium {
-  padding: 0 0 var(--zd_size1) var(--zd_size34);
+  min-height: var(--zd_size30);
 }
 
 .delete {
   position: absolute;
   bottom: 0;
-  color: var(--zdt_advancedmultiselect_delete_text);
+  right: var(--zd_size15);
   padding-bottom: var(--zd_size10);
+  color: var(--zdt_advancedmultiselect_delete_text);
   cursor: pointer;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }
 
-[dir=ltr] .delete {
-  right: var(--zd_size15);
-}
-
-[dir=rtl] .delete {
-  left: var(--zd_size15);
-}
-
 .delete:hover {
   color: var(--zdt_advancedmultiselect_delete_hover_text);
 }
@@ -119,9 +104,9 @@
 .more {
   font-size: var(--zd_font_size14);
   color: var(--zdt_advancedmultiselect_more_text);
-  font-family: inherit;
   cursor: pointer;
   margin-top: var(--zd_size5);
+  font-family: inherit;
   background-color: var(--zdt_advancedmultiselect_delete_bg);
   border: 0;
 }

package/es/MultiSelect/MultiSelect.js

@@ -96,41 +96,41 @@ export class MultiSelectComponent extends React.Component {
 
     if (selectedOptions !== oldProps.selectedOptions || options !== oldProps.options || valueField !== oldProps.valueField || textField !== oldProps.textField || prefixText !== oldProps.prefixText //For GroupMultiSelect component
     ) {
+      const {
+        allOptions,
+        normalizedAllOptions,
+        normalizedFormatOptions
+      } = this.handleFormatOptions(nextProps);
+      const {
+        allSelectedOptionsDetails: oldAllSelectedOptionsDetails
+      } = this;
+      const optionsDetails = Object.assign({}, oldAllSelectedOptionsDetails, normalizedFormatOptions);
+      const {
+        formatSelectedOptions,
+        normalizedSelectedOptions,
+        selectedOptionIds
+      } = this.handleGetSelectedOptions(selectedOptions, optionsDetails, nextProps);
+      this.allSelectedOptionsDetails = Object.assign(oldAllSelectedOptionsDetails, normalizedSelectedOptions);
+      this.setState({
+        options: allOptions,
+        optionsNormalize: normalizedAllOptions,
+        selectedOptions: formatSelectedOptions,
+        selectedOptionIds
+      }, () => {
         const {
-          allOptions,
-          normalizedAllOptions,
-          normalizedFormatOptions
-        } = this.handleFormatOptions(nextProps);
-        const {
-          allSelectedOptionsDetails: oldAllSelectedOptionsDetails
-        } = this;
-        const optionsDetails = Object.assign({}, oldAllSelectedOptionsDetails, normalizedFormatOptions);
+          hoverOption
+        } = this.state;
+        const suggestions = this.handleFilterSuggestions();
+        const suggestionsLen = suggestions.length;
         const {
-          formatSelectedOptions,
-          normalizedSelectedOptions,
-          selectedOptionIds
-        } = this.handleGetSelectedOptions(selectedOptions, optionsDetails, nextProps);
-        this.allSelectedOptionsDetails = Object.assign(oldAllSelectedOptionsDetails, normalizedSelectedOptions);
+          id
+        } = suggestions[hoverOption] || {};
+        const newHoverOption = !getIsEmptyValue(id) ? hoverOption : suggestionsLen ? suggestionsLen - 1 : 0;
         this.setState({
-          options: allOptions,
-          optionsNormalize: normalizedAllOptions,
-          selectedOptions: formatSelectedOptions,
-          selectedOptionIds
-        }, () => {
-          const {
-            hoverOption
-          } = this.state;
-          const suggestions = this.handleFilterSuggestions();
-          const suggestionsLen = suggestions.length;
-          const {
-            id
-          } = suggestions[hoverOption] || {};
-          const newHoverOption = !getIsEmptyValue(id) ? hoverOption : suggestionsLen ? suggestionsLen - 1 : 0;
-          this.setState({
-            hoverOption: newHoverOption
-          });
+          hoverOption: newHoverOption
         });
-      }
+      });
+    }
   }
 
   componentDidUpdate(prevProps, prevState) {

package/es/MultiSelect/MultiSelect.module.css

@@ -15,9 +15,9 @@
   composes: oflowy from '../common/common.module.css';
 }
 .hasBorder {
-  transition: border var(--zd_transition2) linear 0s;
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  transition: border var(--zd_transition2) linear 0s;
 }
 .borderColor_transparent {
   border-bottom-color: var(--zdt_multiselect_transparent_border);
@@ -52,16 +52,16 @@
 }
 
 .container.xmedium {
-  min-height: var(--zd_size30);
   padding-bottom: var(--zd_size3);
+  min-height: var(--zd_size30);
 }
 
 .delete {
-  font: inherit;
   padding: var(--zd_size2) var(--zd_size6);
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
+  font: inherit;
 }
 .delete,
 .defaultDelete {
@@ -91,22 +91,14 @@
   max-width: 100%;
 }
 
-[dir=ltr] .container.xmedium .tag {
+.container.xmedium .tag {
   margin: var(--zd_size2) var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10);
-}
-
-[dir=ltr] .container.medium .tag {
+.container.medium .tag {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
 
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}
-
 .box {
   background: var(--zdt_multiselect_box_bg);
 }
@@ -142,10 +134,8 @@
 }
 .dark,
 .darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
   background: var(--zdt_multiselect_darkmsg_bg);
+  color: var(--zdt_multiselect_darkmsg_text);
 }
 
 .hide {
@@ -170,13 +160,8 @@
 .custmInputWrapper {
   position: absolute;
   top: 0;
-  width: 100%;
-}
-[dir=ltr] .custmInputWrapper {
   left: 0;
-}
-[dir=rtl] .custmInputWrapper {
-  right: 0;
+  width: 100%;
 }
 .title {
   margin-bottom: var(--zd_size6);
@@ -190,9 +175,6 @@
 .iconContainer {
   padding-top: var(--zd_size3)
 }
-[dir=ltr] .clearIconSpace {
+.clearIconSpace {
   padding-right: var(--zd_size37)
 }
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37)
-}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,9 @@
 .tag {
   max-width: 100%;
 }
-[dir=ltr] .xmedium {
+.xmedium {
   margin: 0 var(--zd_size10) var(--zd_size2) 0;
 }
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10);
-}
-[dir=ltr] .medium {
+.medium {
   margin: var(--zd_size5) var(--zd_size10) 0 0;
 }
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10);
-}

package/es/PopOver/PopOver.module.css

@@ -3,6 +3,6 @@
   background-color: var(--dot_bg_white);
 }
 .target {
-  composes: offSelection from '../common/common.module.css';
   cursor: pointer;
+  composes: offSelection from '../common/common.module.css';
 }

package/es/Popup/Popup.js

@@ -362,8 +362,8 @@ const Popup = function (Component, group = 'global', needResizeHandling = true,
 
           if (!isDropBoxChild && !isTargetChild // && isPopupMassUpdateChild
           ) {
-              needPrevent = true;
-            }
+            needPrevent = true;
+          }
         }
       }
 

package/es/Provider/Config.js

@@ -2,8 +2,7 @@ let id = {
   mobileWidth: 640,
   zindexCounter: 3,
   idCounter: 0,
-  idPrefix: 'ZD',
-  scrollFetchLimit: 80
+  idPrefix: 'ZD'
 };
 export function getLibraryConfig(key) {
   return id[key];

package/es/Provider.js

@@ -144,9 +144,7 @@ export default class Provider extends React.Component {
       title: "Yellow Theme",
       style: Object.assign({}, themeClass, yellow),
       onClick: () => this.setTheme('yellow')
-    }))), /*#__PURE__*/React.createElement("div", {
-      "data-portal": "portal1"
-    }));
+    }))));
   }
 
 }

package/es/Radio/Radio.module.css

@@ -7,10 +7,7 @@
   --radio_stroke_color: var(--zdt_radio_default_stroke);
   --radio_fill: none;
   --radio_inner_stroke_width: 0;
-}[dir=ltr] .varClass {
   --radio_label_margin: 0 0 0 var(--zd_size6)/*rtl: 0 var(--zd_size6) 0 0*/;
-}[dir=rtl] .varClass {
-  --radio_label_margin: 0 var(--zd_size6) 0 0;
 }
 .container {
   composes: varClass;
@@ -25,9 +22,9 @@
   composes: offSelection from '../common/common.module.css';
   width: var(--radio_width);
   height: var(--radio_height);
-  stroke: var(--radio_stroke_color);
   background: var(--radio_bg_color);
   border-radius: 50%;
+  stroke: var(--radio_stroke_color);
 }
 .radio,
 .centerPath {
@@ -57,13 +54,10 @@
 }
 .centerPath {
   --radio_fill: inherit;
-  stroke-width: var(--radio_inner_stroke_width);
   transform-origin: center;
+  stroke-width: var(--radio_inner_stroke_width);
 }
-[dir=ltr] .checked .centerPath {
-  animation: circleAnimate 0.3s ease forwards;
-}
-[dir=rtl] .checked .centerPath {
+.checked .centerPath {
   animation: circleAnimate 0.3s ease forwards;
 }
 .rdBoxprimary,