@zohodesk/components 1.0.0-temp-56 → 1.0.0-temp-58

package/es/DateTime/YearView.module.css

@@ -1,26 +1,31 @@
-.boxPadding {
+[dir=ltr] .boxPadding {
   padding-right: var(--zd_size19);
   padding-left: var(--zd_size19);
+}[dir=rtl] .boxPadding {
+  padding-left: var(--zd_size19);
+  padding-right: var(--zd_size19);
 }
 .month {
   width: 30.333%;
+  font-size: var(--zd_font_size12);
+  line-height: var(--zd_size26);
+  height: var(--zd_size26);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;
   background-color: var(--zdt_yearview_month_bg);
   border-radius: 20px;
-  font-size: var(--zd_font_size12);
-  line-height: var(--zd_size26);
-  height: var(--zd_size26);
 }
 .month:hover {
   background-color: var(--zdt_yearview_month_hover_bg);
 }
 .currentMonth,
 .currentMonth:hover {
-  background-color: var(--zdt_yearview_currentmonth_bg);
   color: var(--zdt_yearview_currentmonth_text);
 }
+.currentMonth, .currentMonth:hover {
+  background-color: var(--zdt_yearview_currentmonth_bg);
+}
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
 }
@@ -48,9 +53,14 @@
   color: var(--zdt_yearview_year_hover_text);
 }
 .arrowActive {
-  transform: rotate(180deg);
   color: var(--zdt_yearview_year_hover_text);
 }
+[dir=ltr] .arrowActive {
+  transform: rotate(180deg);
+}
+[dir=rtl] .arrowActive {
+  transform: rotate(-180deg);
+}
 .container {
   height: 100%;
   overflow-y: auto;

package/es/DropBox/DropBox.js

@@ -117,7 +117,7 @@ export class DropBoxElement extends React.Component {
       } : {};
     }
 
-    boxPosition = boxPosition ? boxPosition : 'bottomCenter';
+    boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
     const boxDirection = positionMapping[boxPosition].direction;
     /*getting box direction*/
 

package/es/DropBox/DropBox.module.css

@@ -28,8 +28,7 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette,
-.darkPalette {
+.defaultPalette, .darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -84,11 +83,13 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-.defaultShadow {
+[dir=ltr] .defaultShadow {
   box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
+[dir=rtl] .defaultShadow {
+  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
 /* box direction styles */
-/*rtl:begin:ignore*/
 .topStart {
   bottom: 100%;
   right: 0;
@@ -272,7 +273,6 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
-/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,7 +282,10 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-.animationBasic {
+[dir=ltr] .animationBasic {
+  animation-duration: var(--zd_transition2);
+}
+[dir=rtl] .animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .fadeIn {
@@ -291,11 +294,24 @@
 }
 .bounce {
   composes: animationBasic;
+}
+[dir=ltr] .bounce {
+  animation-name: animation;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
   animation-name: animation;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
 .slideUp {
   composes: modeForward from '../common/animation.module.css';
+}
+[dir=ltr] .slideUp {
+  animation-duration: var(--zd_transition3);
+  animation-name: slideUp;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+[dir=rtl] .slideUp {
   animation-duration: var(--zd_transition3);
   animation-name: slideUp;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -325,16 +341,23 @@
 .responsive {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 100%;
   max-height: 90%;
 }
 
+[dir=ltr] .responsive {
+  left: 0;
+}
+
+[dir=rtl] .responsive {
+  right: 0;
+}
+
 .closeBar {
   height: 6px;
+  width: 20%;
   border-radius: 5px;
   background-color: var(--dropbox_mob_close_bg_color);
-  width: 20%;
   cursor: pointer;
   margin: 0 auto var(--zd_size10);
 }
@@ -346,19 +369,32 @@
 }
 .activateInDelay {
   composes: modeForward from '../common/animation.module.css';
+  pointer-events: none;
+}
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+[dir=rtl] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
-  pointer-events: none;
   animation-name: activateInDelay;
 }
 .freezeLayer {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
-  right: 0;
   composes: activateInDelay;
 }
+[dir=ltr] .freezeLayer {
+  left: 0;
+  right: 0;
+}
+[dir=rtl] .freezeLayer {
+  right: 0;
+  left: 0;
+}
 .freeze {
   composes: varClass;
   background: var(--dropbox_mob_bg_color);

package/es/DropDown/DropDownHeading.module.css

@@ -33,11 +33,15 @@
 .light {
   composes: default;
 }
-.light::after,
-.dark::after {
-  left: var(--dropdownheading_underline_left);
+.light::after, .dark::after {
   background-color: var(--dropdownheading_underline_bg_color);
 }
+[dir=ltr] .light::after, [dir=ltr] .dark::after {
+  left: var(--dropdownheading_underline_left);
+}
+[dir=rtl] .light::after, [dir=rtl] .dark::after {
+  right: var(--dropdownheading_underline_left);
+}
 
 .dark {
   composes: default;

package/es/DropDown/DropDownItem.module.css

@@ -6,24 +6,32 @@
 
   /* dropdownitem user default variables */
   --dropdownitem-user-width: var(--zd_size42);
-  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   --dropdownitem-user-border-style: solid;
   --dropdownitem-user-border-color: var(--zdt_dropdown_user_default_border);
   --dropdownitem-user-cursor: pointer;
+}[dir=ltr] .varClass {
+  --dropdownitem-user-border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}[dir=rtl] .varClass {
+  --dropdownitem-user-border-width: 0 1px 0 0;
 }
 .list {
   composes: varClass;
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
-  padding: var(--dropdownitem-padding);
   color: var(--zdt_dropdown_default_text);
   font-size: var(--zd_font_size13);
-  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+  padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
   cursor: pointer;
   background-color: var(--dropdownitem-bg-color);
 }
+[dir=ltr] .list {
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
+}
+[dir=rtl] .list {
+  border-width: 0 1px 0 0;
+}
 
 .listActive {
   --dropdownitem-border-color: var(--zdt_dropdown_listactive_border);
@@ -33,16 +41,27 @@
   --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
 }
 
-.padding {
+[dir=ltr] .padding {
   --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
 }
 
+[dir=rtl] .padding {
+  --dropdownitem-padding: 0 0 0 var(--zd_size50);
+}
+
 .children {
-  margin-right: var(--zd_size10);
   display: inline-block;
   font-size: 0;
 }
 
+[dir=ltr] .children {
+  margin-right: var(--zd_size10);
+}
+
+[dir=rtl] .children {
+  margin-left: var(--zd_size10);
+}
+
 .value {
   composes: dotted flexgrow from '../common/common.module.css';
 }
@@ -51,7 +70,6 @@
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
   top: 0;
-  right: 0;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
@@ -62,6 +80,14 @@
   cursor: var(--dropdownitem-user-cursor);
 }
 
+[dir=ltr] .user {
+  right: 0;
+}
+
+[dir=rtl] .user {
+  left: 0;
+}
+
 .list:hover .user {
   opacity: 1;
   visibility: visible;

package/es/ListItem/ListContainer.js

@@ -35,16 +35,19 @@ const ListContainer = props => {
   } = props;
   const responsiveFunc = useCallback(_ref => {
     let {
-      mediaQueryOR
+      mediaQueryOR,
+      isTouchDevice
     } = _ref;
     return {
       mobileToTab: mediaQueryOR([{
         maxWidth: 700
-      }])
+      }]),
+      isTouchDevice: isTouchDevice
     };
   }, []);
   const {
-    mobileToTab
+    mobileToTab,
+    isTouchDevice
   } = useResponsiveReceiver('Helmet', responsiveFunc);
   const {
     role,
@@ -71,7 +74,7 @@ const ListContainer = props => {
     isCover: false,
     align: "vertical",
     alignBox: "row",
-    className: `${style.list}  ${mobileToTab ? style.responsiveHeight : ''} ${style[size]} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
+    className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,

package/es/ListItem/ListItem.js

@@ -94,7 +94,7 @@ export default class ListItem extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${customListItem}`,
+      customClass: customListItem,
       dataId: dataIdString,
       isLink: isLink,
       href: href,

package/es/ListItem/ListItem.module.css

@@ -4,8 +4,6 @@
   --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;
@@ -16,6 +14,11 @@
 
   /* 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;
@@ -23,40 +26,49 @@
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--zd_font_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);
 }
-.withBorder {
+[dir=ltr] .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);
 }
-.small {
+[dir=ltr] .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)*/;
-  --listitem_height: var(--zd_size48);
+}
+[dir=rtl] .large {
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
 .value,
 .children {
@@ -64,9 +76,14 @@
 }
 .iconBox {
   width: var(--zd_size20);
-  margin-right: var(--zd_size10);
   text-align: center;
 }
+[dir=ltr] .iconBox {
+  margin-right: var(--zd_size10);
+}
+[dir=rtl] .iconBox {
+  margin-left: var(--zd_size10);
+}
 .iconBox,
 .leftAvatar {
   font-size: 0;
@@ -75,16 +92,18 @@
   margin: var(--listitem_avatar_margin);
 }
 
-.defaultHover,
-.primaryHover,
-.secondaryHover,
-.darkHover {
+.defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
-  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
   --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;
+}
 
 .defaultHover,
 .defaultEffect:hover,
@@ -110,10 +129,7 @@
   --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,
@@ -139,8 +155,15 @@
 .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);
 }
@@ -150,24 +173,33 @@
 .defaultTick > i {
   display: block;
 }
-.smallwithTick {
+[dir=ltr] .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)*/;
 }
-.mediumwithTick {
+[dir=rtl] .smallwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .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)*/;
+    /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
 }
-.largewithTick {
+[dir=rtl] .mediumwithTick {
+  --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
+}
+[dir=ltr] .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);
+}
 .responsiveHeight {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
-    var(--zd_size20)
-    /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
   --listitem_height: var(--zd_size45);
+  font-size: var(--zd_font_size15);
+  padding-top: var(--zd_size10);
+  padding-bottom: var(--zd_size10);
 }

package/es/ListItem/ListItemWithAvatar.js

@@ -99,7 +99,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,

package/es/ListItem/ListItemWithCheckBox.js

@@ -77,7 +77,7 @@ export default class ListItemWithCheckBox extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
-      customClass: `${customListItem}`,
+      customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
       onClick: this.onClick,
       onMouseOver: this.onHover,

package/es/ListItem/ListItemWithIcon.js

@@ -89,7 +89,7 @@ export default class ListItemWithIcon extends React.Component {
       autoHover: autoHover,
       needTick: needTick,
       needBorder: needBorder,
-      customClass: `${customClass}`,
+      customClass: customClass,
       dataId: dataIdString,
       isLink: isLink,
       href: href,

package/es/ListItem/ListItemWithRadio.js

@@ -78,7 +78,7 @@ export default class ListItemWithRadio extends React.Component {
       isDisabled: isDisabled,
       active: active,
       autoHover: autoHover,
-      customClass: `${customListItem}`,
+      customClass: customListItem,
       dataId: dataId,
       onClick: this.onClick,
       onMouseOver: this.onHover,

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,8 +1,7 @@
 .wrapper {
   position: relative;
 }
-.disabled,
-.readOnly {
+.disabled, .readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -10,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);
@@ -41,25 +40,40 @@
 .effect .borderColor_dark.active {
   border-bottom-color: var(--zdt_advancedmultiselect_dark_active_border);
 }
-.container.medium {
+[dir=ltr] .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 {
-  padding: 0 var(--zd_size34) var(--zd_size1) 0;
   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);
+}
 
 .delete {
   position: absolute;
   bottom: 0;
-  right: var(--zd_size15);
-  padding-bottom: var(--zd_size10);
   color: var(--zdt_advancedmultiselect_delete_text);
+  padding-bottom: var(--zd_size10);
   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);
 }
@@ -105,9 +119,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

@@ -422,11 +422,6 @@ export class MultiSelectComponent extends React.Component {
       }
     } else if (keyCode === 27) {// this.handlePopupClose(e);
     } else if (keyCode === 9) {
-      const selectedOption = suggestions[hoverOption] || {};
-      const {
-        id
-      } = selectedOption;
-      isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, e);
       this.handlePopupClose(e);
     }
   }