@zohodesk/components 1.0.0-temp-49 → 1.0.0-temp-52

package/es/DateTime/DateWidget.module.css

@@ -3,7 +3,9 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
-.readOnly, .readOnly > input, .disabled {
+.readOnly,
+.readOnly > input,
+.disabled {
   cursor: not-allowed;
 }
 .enabled {
@@ -15,16 +17,10 @@
 .inputLine {
   position: absolute;
   bottom: 0;
-  transition: border var(--zd_transition2) linear 0s;
-  border-bottom: 1px solid var(--zdt_datewidget_input_border);
-}
-[dir=ltr] .inputLine {
   left: 0;
   right: 0;
-}
-[dir=rtl] .inputLine {
-  right: 0;
-  left: 0;
+  border-bottom: 1px solid var(--zdt_datewidget_input_border);
+  transition: border var(--zd_transition2) linear 0s;
 }
 .enabled:hover .inputLine {
   border-bottom-color: var(--zdt_datewidget_enabled_border);

package/es/DateTime/YearView.module.css

@@ -1,30 +1,25 @@
-[dir=ltr] .boxPadding {
+.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 {
-  color: var(--zdt_yearview_currentmonth_text);
-}
-.currentMonth, .currentMonth:hover {
   background-color: var(--zdt_yearview_currentmonth_bg);
+  color: var(--zdt_yearview_currentmonth_text);
 }
 .yearBox {
   border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
@@ -53,13 +48,8 @@
   color: var(--zdt_yearview_year_hover_text);
 }
 .arrowActive {
-  color: var(--zdt_yearview_year_hover_text);
-}
-[dir=ltr] .arrowActive {
   transform: rotate(180deg);
-}
-[dir=rtl] .arrowActive {
-  transform: rotate(-180deg);
+  color: var(--zdt_yearview_year_hover_text);
 }
 .container {
   height: 100%;

package/es/DropBox/DropBox.module.css

@@ -28,7 +28,8 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette, .darkPalette {
+.defaultPalette,
+.darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -83,13 +84,11 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-[dir=ltr] .defaultShadow {
+.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;
@@ -273,6 +272,7 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
+/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,10 +282,7 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-[dir=ltr] .animationBasic {
-  animation-duration: var(--zd_transition2);
-}
-[dir=rtl] .animationBasic {
+.animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .fadeIn {
@@ -294,24 +291,11 @@
 }
 .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);
@@ -341,23 +325,16 @@
 .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);
 }
@@ -369,31 +346,18 @@
 }
 .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;
-  bottom: 0;
-  composes: activateInDelay;
-}
-[dir=ltr] .freezeLayer {
   left: 0;
+  bottom: 0;
   right: 0;
-}
-[dir=rtl] .freezeLayer {
-  right: 0;
-  left: 0;
+  composes: activateInDelay;
 }
 .freeze {
   composes: varClass;

package/es/DropDown/DropDownHeading.module.css

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

package/es/DropDown/DropDownItem.module.css

@@ -6,32 +6,24 @@
 
   /* 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);
-  padding: var(--dropdownitem-padding);
+  border-width: 0 0 0 1px/*rtl: 0 1px 0 0*/;
   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);
@@ -41,27 +33,16 @@
   --dropdownitem-bg-color: var(--zdt_dropdown_listhover_bg);
 }
 
-[dir=ltr] .padding {
+.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';
 }
@@ -70,6 +51,7 @@
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
   opacity: 0;
   visibility: hidden;
@@ -80,14 +62,6 @@
   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/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_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);
 }
-[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/AdvancedGroupMultiSelect.js

@@ -887,7 +887,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, children ? /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -396,7 +396,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",

package/es/MultiSelect/AdvancedMultiSelect.module.css

@@ -1,7 +1,8 @@
 .wrapper {
   position: relative;
 }
-.disabled, .readOnly {
+.disabled,
+.readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -9,9 +10,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 +41,25 @@
 .effect .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 +105,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

@@ -741,7 +741,7 @@ export class MultiSelectComponent extends React.Component {
       defaultDropBoxPosition,
       isReadOnly
     } = this.props;
-    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}Center` : null);
+    !isReadOnly && togglePopup(e, defaultDropBoxPosition ? `${defaultDropBoxPosition}` : null);
   }
 
   handlePopupClose(e) {
@@ -909,7 +909,7 @@ export class MultiSelectComponent extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
-      "data-title": isDisabled ? title : '',
+      "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
@@ -982,7 +982,7 @@ export class MultiSelectComponent extends React.Component {
       dataId: `${dataId}_children`
     }, children) : null)))), !isReadOnly && !isDisabled && !disableAction && isPopupOpen ? /*#__PURE__*/React.createElement(DropBox, {
       animationStyle: animationStyle,
-      boxPosition: position || `${defaultDropBoxPosition}Center`,
+      boxPosition: position || `${defaultDropBoxPosition}`,
       getRef: getContainerRef,
       isActive: isPopupReady,
       isAnimate: isAnimate,
@@ -1041,7 +1041,7 @@ MultiSelectComponent.propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  defaultDropBoxPosition: PropTypes.string,
   disableAction: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string.isRequired,
@@ -1117,7 +1117,6 @@ MultiSelectComponent.propTypes = {
 MultiSelectComponent.defaultProps = {
   animationStyle: 'bounce',
   dataId: 'multiSelect',
-  defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
   isAnimate: true,
   isDisabled: false,