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

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,63 +23,50 @@
   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)*/;
+  --listitem_height: var(--zd_size48);
 }
-[dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
-}
+
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
 .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 {
@@ -92,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,
@@ -129,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,
@@ -155,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);
 }
@@ -173,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

@@ -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) {
@@ -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,

package/es/MultiSelect/MultiSelect.module.css

@@ -2,7 +2,8 @@
   position: relative;
 }
 
-.disabled, .readOnly {
+.disabled,
+.readOnly {
   cursor: not-allowed;
 }
 .container {
@@ -10,9 +11,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);
@@ -47,16 +48,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 {
@@ -86,22 +87,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);
 }
@@ -137,10 +130,8 @@
 }
 .dark,
 .darkBox {
-  color: var(--zdt_multiselect_darkmsg_text);
-}
-.dark, .darkBox {
   background: var(--zdt_multiselect_darkmsg_bg);
+  color: var(--zdt_multiselect_darkmsg_text);
 }
 
 .hide {
@@ -165,13 +156,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);
@@ -185,9 +171,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_white);
 }
 .target {
-  composes: offSelection from '../common/common.module.css';
   cursor: pointer;
+  composes: offSelection from '../common/common.module.css';
 }

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;
@@ -18,16 +15,16 @@
 .pointer {
   cursor: pointer;
 }
-.readonly, .disabled {
+.readonly,.disabled {
   cursor: not-allowed;
 }
 .radio {
   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 var(--zd_transition3) ease forwards;
-}
-[dir=rtl] .checked .centerPath {
+.checked .centerPath {
   animation: circleAnimate var(--zd_transition3) ease forwards;
 }
 .rdBoxprimary,