@zohodesk/components 1.0.0-temp-46 → 1.0.0-temp-47

package/es/RippleEffect/RippleEffect.module.css

@@ -8,67 +8,43 @@
 .default.defaultHover {
   border-color: var(--zdt_rippleeffect_hover_border);
 }
-.hoverEffect:hover.primary.defaultHover,
-.hoverEffect:focus.primary.defaultHover,
-.hoverEffect:hover.primary.borderHover,
-.hoverEffect:focus.primary.borderHover {
+.hoverEffect:hover.primary.defaultHover, .hoverEffect:focus.primary.defaultHover, .hoverEffect:hover.primary.borderHover, .hoverEffect:focus.primary.borderHover {
   border-color: var(--zdt_rippleeffect_primary_border);
 }
-.primary.defaultHover,
-.hoverEffect:hover.primary.active.border,
-.hoverEffect:focus.primary.active.border {
+.primary.defaultHover, .hoverEffect:hover.primary.active.border, .hoverEffect:focus.primary.active.border {
   border-color: var(--zdt_rippleeffect_primary_active_border);
 }
-.primaryLight.defaultHover,
-.hoverEffect:hover.primaryLight.borderHover,
-.hoverEffect:focus.primaryLight.borderHover {
+.primaryLight.defaultHover, .hoverEffect:hover.primaryLight.borderHover, .hoverEffect:focus.primaryLight.borderHover {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
-.green.defaultHover,
-.hoverEffect:hover.green.borderHover,
-.hoverEffect:focus.green.borderHover {
+.green.defaultHover, .hoverEffect:hover.green.borderHover, .hoverEffect:focus.green.borderHover {
   border-color: var(--zdt_rippleeffect_green_border);
 }
-.hoverEffect:hover.default.defaultHover,
-.hoverEffect:focus.default.defaultHover {
+.hoverEffect:hover.default.defaultHover, .hoverEffect:focus.default.defaultHover {
   border-color: var(--zdt_rippleeffect_slate_border);
 }
-.hoverEffect:hover.default.borderHover,
-.hoverEffect:focus.default.borderHover {
+.hoverEffect:hover.default.borderHover, .hoverEffect:focus.default.borderHover {
   border-color: var(--zdt_rippleeffect_navy_border);
 }
-.hoverEffect:hover.default.bgHover,
-.hoverEffect:focus.default.bgHover {
+.hoverEffect:hover.default.bgHover, .hoverEffect:focus.default.bgHover {
   background-color: var(--zdt_rippleeffect_hover_bg);
 }
-.hoverEffect:hover.primaryLight.bgHover,
-.hoverEffect:focus.primaryLight.bgHover {
+.hoverEffect:hover.primaryLight.bgHover, .hoverEffect:focus.primaryLight.bgHover {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
 .primaryFilled {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.hoverEffect:hover.primaryFilled,
-.hoverEffect:focus.primaryFilled,
-.primaryFilled.active {
+.hoverEffect:hover.primaryFilled, .hoverEffect:focus.primaryFilled, .primaryFilled.active {
   background-color: var(--zdt_rippleeffect_primaryfilled_bg);
 }
-.hoverEffect:hover.green.bgHover,
-.hoverEffect:focus.green.bgHover {
+.hoverEffect:hover.green.bgHover, .hoverEffect:focus.green.bgHover {
   background-color: var(--zdt_rippleeffect_green_bg);
 }
-.default.active,
-.hoverEffect:hover.default.active,
-.hoverEffect:focus.default.active,
-.primaryLight.active,
-.primaryDark.active {
+.default.active, .hoverEffect:hover.default.active, .hoverEffect:focus.default.active, .primaryLight.active, .primaryDark.active {
   background-color: var(--zdt_rippleeffect_primary_light_bg);
 }
-.default.active.border,
-.hoverEffect:hover.default.active.border,
-.hoverEffect:focus.default.active.border,
-.primaryLight.active.border,
-.primaryDark.active.border {
+.default.active.border, .hoverEffect:hover.default.active.border, .hoverEffect:focus.default.active.border, .primaryLight.active.border, .primaryDark.active.border {
   border-color: var(--zdt_rippleeffect_primary_light_border);
 }
 .green.active {
@@ -80,17 +56,15 @@
 .primary.active {
   background-color: var(--zdt_rippleeffect_primary_bg);
 }
-.danger.defaultHover,
-.hoverEffect:hover.danger.borderHover,
-.hoverEffect:focus.danger.borderHover {
+.danger.defaultHover, .hoverEffect:hover.danger.borderHover, .hoverEffect:focus.danger.borderHover {
   border-color: var(--zdt_rippleeffect_danger_border);
 }
-.hoverEffect:hover.danger.bgHover,
-.hoverEffect:focus.danger.bgHover,
-.danger.active {
+.hoverEffect:hover.danger.bgHover, .hoverEffect:focus.danger.bgHover, .danger.active {
   background-color: var(--zdt_rippleeffect_danger_bg);
 }
-.hoverEffect:hover.primaryDark.bgHover,
-.hoverEffect:focus.primaryDark.bgHover {
+.hoverEffect:hover.primaryDark.bgHover, .hoverEffect:focus.primaryDark.bgHover {
   background-color: var(--zdt_rippleeffect_primary_dark_bg);
 }
+.notAllowed {
+  cursor: not-allowed;
+}

package/es/Select/Select.module.css

@@ -29,7 +29,7 @@
 }
 .arrowIcon {
   height: var(--zd_size8);
-  line-height: 0.5;
+  line-height: var(--zd_size8);
 }
 .small.search {
   padding: 0 var(--zd_size5);
@@ -47,7 +47,7 @@
   padding: var(--zd_size10) 0;
 }
 .readonly {
-  composes: readonly from '../common/common.module.css';
+  --textboxicon_icon_cursor: not-allowed;
 }
 .transparentContainer .arrowIcon {
   opacity: 0;
@@ -65,12 +65,22 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  left: 0;
   width: var(--zd_size30);
 }
-.iconSelect {
+
+[dir=ltr] .leftIcon {
+  left: 0;
+}
+
+[dir=rtl] .leftIcon {
+  right: 0;
+}
+[dir=ltr] .iconSelect {
   padding-left: var(--zd_size30);
 }
+[dir=rtl] .iconSelect {
+  padding-right: var(--zd_size30);
+}
 
 .dropBoxList {
   padding: var(--zd_size10) 0;

package/es/Select/SelectWithAvatar.js

@@ -141,7 +141,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       tagSize,
       groupName,
       i18nKeys,
-      htmlId
+      htmlId,
+      needEffect
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -164,7 +165,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let setAriaId = this.getNextAriaId();
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${className ? className : ''}`,
+      className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : ''
     }, /*#__PURE__*/React.createElement(Container, {
@@ -342,7 +343,8 @@ SelectWithAvatarComponent.propTypes = {
   title: PropTypes.string,
   togglePopup: PropTypes.func,
   valueField: PropTypes.string,
-  htmlId: PropTypes.string
+  htmlId: PropTypes.string,
+  needEffect: PropTypes.bool
 };
 SelectWithAvatarComponent.defaultProps = {
   animationStyle: 'bounce',
@@ -363,7 +365,8 @@ SelectWithAvatarComponent.defaultProps = {
   dataId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
-  i18nKeys: {}
+  i18nKeys: {},
+  needEffect: true
 };
 SelectWithAvatarComponent.displayName = 'SelectWithAvatar';
 let SelectWithAvatar = Popup(SelectWithAvatarComponent);

package/es/Stencils/Stencils.module.css

@@ -11,19 +11,23 @@
   border-radius: var(--stencil_border_radius);
 }
 .stencil {
+  background-size: 800px 1px;
+}
+[dir=ltr] .stencil {
+  animation-name:  placeHolderShimmer-ltr ;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
+  animation-timing-function: linear;
+}
+[dir=rtl] .stencil {
+  animation-name:  placeHolderShimmer-rtl ;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name: placeHolderShimmer;
+  animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name: placeHolderShimmer;
-  -webkit-animation-timing-function: linear;
-  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer {
+@keyframes placeHolderShimmer-ltr {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -32,6 +36,15 @@
     background-position: var(--zd_size468) 0;
   }
 }
+@keyframes placeHolderShimmer-rtl {
+  0% {
+    background-position: calc(100% - (var(--zd_size468) * -1)) 0;
+  }
+
+  100% {
+    background-position: var(--zd_size468) 100%;
+  }
+}
 
 .rectangular {
   composes: stencil;

package/es/Switch/Switch.module.css

@@ -30,7 +30,6 @@
 .effect:focus .label {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
@@ -47,7 +46,6 @@
 .checked + .label:after {
   right: calc(var(--zd_size1) * -1);
 }
-/*rtl:end:ignore*/
 
 .input {
   display: none;
@@ -56,14 +54,12 @@
   height: var(--zd_size14);
   width: var(--zd_size28);
 }
-/*rtl:begin:ignore*/
 .switch_smallLabel {
   height: var(--zd_size9);
   width: var(--zd_size22);
   top: calc(var(--zd_size2) * -1);
   left: var(--zd_size2);
 }
-/*rtl:end:ignore*/
 .switch_smallLabel:after {
   width: var(--zd_size12);
   height: var(--zd_size12);
@@ -73,23 +69,21 @@
   height: var(--zd_size18);
   width: var(--zd_size34);
 }
-/*rtl:begin:ignore*/
 .switch_mediumLabel {
   height: var(--zd_size13);
   width: var(--zd_size31);
   top: var(--zd_size2);
   left: var(--zd_size2);
 }
-/*rtl:end:ignore*/
 .switch_mediumLabel:after {
   width: var(--zd_size18);
   height: var(--zd_size18);
   top: calc(var(--zd_size3) * -1);
 }
 .input:disabled + .label {
+  opacity: 0.4;
   border-color: var(--zdt_switch_default_off_bg);
   cursor: not-allowed;
-  opacity: 0.4;
 }
 .switch {
   display: inline-block;
@@ -107,5 +101,10 @@
 .switch + label {
   position: relative;
   top: calc(var(--zd_size1) * -1);
+}
+[dir=ltr] .switch + label {
   margin-left: var(--zd_size12);
+}
+[dir=rtl] .switch + label {
+  margin-right: var(--zd_size12);
 }

package/es/Tab/Tab.module.css

@@ -1,9 +1,9 @@
 .tab {
   text-transform: uppercase;
-  cursor: pointer;
   composes: offSelection from '../common/common.module.css';
   letter-spacing: 0.6px;
   text-decoration: none;
+  cursor: pointer;
 }
 .vertical {
   height: 100%;
@@ -32,9 +32,9 @@
   transition: all var(--zd_transition2);
 }
 .alpha {
-  padding: 0 var(--zd_size18);
   font-size: var(--zd_font_size11);
-  line-height: 3;
+  line-height: var(--zd_size33);
+  padding: 0 var(--zd_size18);
 }
 .tabAlpha {
   composes: alpha;
@@ -48,19 +48,23 @@
   composes: alpha;
   color: var(--zdt_tab_alpha_active_text);
 }
-.alphaActive_border,
-.betaActive_border {
+.alphaActive_border, .betaActive_border {
   border-color: var(--zdt_tab_alpha_active_border);
 }
 .deltaActive_border {
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
-  padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size14);
-  line-height: 4.28;
-  margin-right: var(--zd_size40);
+  line-height: var(--zd_size60);
   text-transform: capitalize;
+  padding: 0 var(--zd_size4);
+}
+[dir=ltr] .beta {
+  margin-right: var(--zd_size40);
+}
+[dir=rtl] .beta {
+  margin-left: var(--zd_size40);
 }
 .tabBeta {
   composes: beta;
@@ -74,11 +78,16 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
-  padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size11);
-  line-height: 3;
+  line-height: var(--zd_size33);
+  padding: 0 var(--zd_size4);
+}
+[dir=ltr] .delta {
   margin-right: var(--zd_size10);
 }
+[dir=rtl] .delta {
+  margin-left: var(--zd_size10);
+}
 .tabDelta {
   composes: delta;
   color: var(--zdt_tab_alpha_text);

package/es/Tab/Tabs.module.css

@@ -9,10 +9,14 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.alpha_padding {
+[dir=ltr] .alpha_padding {
   padding-left: var(--zd_size15);
 }
 
+[dir=rtl] .alpha_padding {
+  padding-right: var(--zd_size15);
+}
+
 .alpha_border {
   border-width: 0 0 1px 0;
   border-color: var(--zdt_tabs_alpha_border);
@@ -26,20 +30,34 @@
   width: 76%;
   bottom: 0;
   height: var(--zd_size10);
-  left: 12%;
   border-radius: 100px / 5px;
   box-shadow: 0 -2px 9px var(--zdt_tabs_alpha_box_shadow);
 }
 
+[dir=ltr] .alpha::after {
+  left: 12%;
+}
+
+[dir=rtl] .alpha::after {
+  right: 12%;
+}
+
 .alpha:before {
   content: '';
   position: absolute;
   z-index: -1;
   width: 100%;
-  background: inherit;
   height: 100%;
-  left: 0;
   top: 0;
+  background: inherit;
+}
+
+[dir=ltr] .alpha:before {
+  left: 0;
+}
+
+[dir=rtl] .alpha:before {
+  right: 0;
 }
 
 .beta {
@@ -47,10 +65,14 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.beta_padding {
+[dir=ltr] .beta_padding {
   padding-left: var(--zd_size13);
 }
 
+[dir=rtl] .beta_padding {
+  padding-right: var(--zd_size13);
+}
+
 .beta_border {
   border-bottom: 1px solid var(--zdt_tabs_alpha_border);
 }
@@ -60,10 +82,14 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-.delta_padding {
+[dir=ltr] .delta_padding {
   padding-left: var(--zd_size10);
 }
 
+[dir=rtl] .delta_padding {
+  padding-right: var(--zd_size10);
+}
+
 .delta_border {
   border-bottom: 1px dotted var(--zdt_tabs_alpha_border);
 }
@@ -95,12 +121,19 @@
   composes: oflowy from '../common/common.module.css';
 }
 
-.bottomRightToLeft, .topRightToLeft, .bottomCenterToLeft {
+[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
-.bottomLeftToRight, .topLeftToRight, .bottomCenterToRight {
+
+[dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
+  left: calc(var(--tab_position_gap) * -1);
+}
+[dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
   left: calc(var(--tab_position_gap) * -1);
 }
+[dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
+  right: calc(var(--tab_position_gap) * -1);
+}
 
 .hidden{
   visibility: hidden;

package/es/Tag/Tag.js

@@ -78,7 +78,9 @@ export default class Tag extends PureComponent {
       tooltip,
       avatarPalette,
       customClass,
-      a11y
+      a11y,
+      needEffect,
+      isReadOnly
     } = this.props;
     let {
       customTag = '',
@@ -93,7 +95,7 @@ export default class Tag extends PureComponent {
     } = a11y;
     let isDarkPalette = palette === 'dark';
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
+      className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
@@ -148,7 +150,9 @@ Tag.defaultProps = {
   size: 'medium',
   dataId: 'tag',
   customClass: {},
-  a11y: {}
+  a11y: {},
+  needEffect: true,
+  isReadOnly: false
 };
 Tag.propTypes = {
   active: PropTypes.bool,
@@ -179,7 +183,9 @@ Tag.propTypes = {
   }),
   a11y: PropTypes.shape({
     clearLabel: PropTypes.string
-  })
+  }),
+  needEffect: PropTypes.bool,
+  isReadOnly: PropTypes.bool
 };
 
 if (false) {