@zohodesk/components 1.0.0-temp-83 → 1.0.0-temp-107

package/es/Stencils/Stencils.module.css

@@ -11,23 +11,14 @@
   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-name: placeHolderShimmer;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
   animation-duration: var(--zd_transition10);
   animation-timing-function: linear;
+  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer-ltr {
+@keyframes placeHolderShimmer {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -36,15 +27,6 @@
     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.js

@@ -55,8 +55,7 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0',
-      onClick: !disabled || !isReadOnly ? this.onChange : null
+      tabIndex: isReadOnly || disabled ? '-1' : '0'
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -67,8 +66,8 @@ export default class Switch extends React.Component {
       value: value,
       checked: checked,
       disabled: disabled,
-      readOnly: isReadOnly
-      // onClick={!disabled || !isReadOnly ? this.onChange : null}
+      readOnly: isReadOnly,
+      onClick: !disabled || !isReadOnly ? this.onChange : null
     }), /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       "data-id": dataId,
@@ -78,9 +77,8 @@ export default class Switch extends React.Component {
       palette: labelPalette,
       id: id,
       size: labelSize,
-      type: "subtitle"
-      // onClick={!disabled || !isReadOnly ? this.onChange : null}
-      ,
+      type: "subtitle",
+      onClick: !disabled || !isReadOnly ? this.onChange : null,
       customClass: customLabel
     }, LabelProps)));
   }

package/es/Switch/Switch.module.css

@@ -31,6 +31,7 @@
  {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
+/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
@@ -47,6 +48,7 @@
 .checked + .label:after {
   right: calc(var(--zd_size1) * -1);
 }
+/*rtl:end:ignore*/
 
 .input {
   display: none;
@@ -55,12 +57,14 @@
   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);
@@ -70,21 +74,23 @@
   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;
@@ -102,10 +108,5 @@
 .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.js

@@ -47,7 +47,8 @@ export default function Tab(_ref) {
     needAppearance,
     align,
     isVirtual,
-    customProps
+    customProps,
+    ariaLabel
   } = _ref;
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {

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: var(--zd_size33);
-  padding: 0 var(--zd_size18);
 }
 .tabAlpha {
   composes: alpha;
@@ -48,23 +48,19 @@
   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: 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);
+  text-transform: capitalize;
 }
 .tabBeta {
   composes: beta;
@@ -78,16 +74,11 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
+  padding: 0 var(--zd_size4);
   font-size: var(--zd_font_size11);
   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/TabContent.js

@@ -18,7 +18,7 @@ const TabContent = _ref => {
     dataId: `${dataId}_TabContent`,
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "-1",
+    tabindex: "0",
     role: "tabpanel"
   }, children);
 };

package/es/Tab/Tabs.js

@@ -20,7 +20,7 @@ import tabsStyle from './Tabs.module.css';
 import Popup from '../Popup/Popup';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
-import btnStyle from '../semantic/Button/semanticButton.module.css';
+import btnstyle from '../semantic/Button/semanticButton.module.css';
 class Tabs extends React.Component {
   constructor(props) {
     super(props);
@@ -424,15 +424,16 @@ class Tabs extends React.Component {
       }, classProps));
     }), React.Children.count(moreTabs) ? /*#__PURE__*/React.createElement(Box, {
       className: `${tabsStyle.menu} `
-    }, /*#__PURE__*/React.createElement(Container, _extends({
-      tabIndex: 0,
-      className: `${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''} ${btnStyle.buttonReset}`,
+    }, /*#__PURE__*/React.createElement("button", _extends({
+      className: `${btnstyle.buttonReset} ${moreButtonClass} ${isPopupOpen ? moreButtonActiveClass : ''}`,
       align: "both",
       onClick: this.togglePopup,
       dataId: "moreTabs",
-      eleRef: getTargetRef,
-      tagName: "button"
-    }, MoreButtonProps), /*#__PURE__*/React.createElement(Icon, {
+      eleRef: getTargetRef
+    }, MoreButtonProps, {
+      "aria-label": "MoreTabs",
+      role: "tab"
+    }), /*#__PURE__*/React.createElement(Icon, {
       name: iconName,
       size: iconSize
     })), isPopupOpen && /*#__PURE__*/React.createElement(ResponsiveReceiver, {
@@ -454,9 +455,7 @@ class Tabs extends React.Component {
         isBoxPaddingNeed: true,
         isArrow: false
       }, DropBoxProps, {
-        isResponsivePadding: true,
-        needFocusScope: true,
-        onClose: this.togglePopup
+        isResponsivePadding: true
       }), getCustomDropBoxHeaderPlaceHolder && getCustomDropBoxHeaderPlaceHolder(this.props), /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         shrink: true,

package/es/Tab/Tabs.module.css

@@ -9,14 +9,10 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .alpha_padding {
+.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);
@@ -30,34 +26,20 @@
   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%;
-  height: 100%;
-  top: 0;
   background: inherit;
-}
-
-[dir=ltr] .alpha:before {
+  height: 100%;
   left: 0;
-}
-
-[dir=rtl] .alpha:before {
-  right: 0;
+  top: 0;
 }
 
 .beta {
@@ -65,14 +47,10 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .beta_padding {
+.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);
 }
@@ -82,14 +60,10 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .delta_padding {
+.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);
 }
@@ -121,20 +95,12 @@
 }
 
 
-[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
+.bottomRightToLeft, .topRightToLeft, .bottomCenterToLeft {
   right: calc(var(--tab_position_gap) * -1);
 }
-
-
-[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 {
+.bottomLeftToRight, .topLeftToRight, .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/Tab/docs/tabdocs.module.css

@@ -4,8 +4,8 @@
 }
 .item {
   color: #fff;
-  font-size: 12px;
   padding: 10px;
+  font-size: 12px;
 }
 
 .itemActive {

package/es/Tag/Tag.module.css

@@ -14,21 +14,16 @@
   --tag_cursor: auto;
 
   /* tag close icon default variables */
+  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
   --tag_closeicon_color: var(--zdt_tag_secondary_text);
+  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6)
+    /*rtl: 0 var(--zd_size6) 0 var(--zd_size7)*/;
   --tag_closeicon_cursor: pointer;
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 
   /* tag normal icon default variables */
-  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
-}[dir=ltr] .varClass {
-  --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
-  --tag_closeicon_padding: 0 var(--zd_size7) 0 var(--zd_size6)
-    /*rtl: 0 var(--zd_size6) 0 var(--zd_size7)*/;
   --tag_icon_margin: 0 0 0 var(--zd_size5) /*rtl: 0 var(--zd_size5) 0 0*/;
-}[dir=rtl] .varClass {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-  --tag_closeicon_padding: 0 var(--zd_size6) 0 var(--zd_size7);
-  --tag_icon_margin: 0 var(--zd_size5) 0 0;
+  --tag_icon_bg_color: var(--zdt_tag_icon_bg);
 }
 .container {
   composes: varClass;
@@ -36,17 +31,17 @@
   position: relative;
   vertical-align: middle;
   color: var(--tag_text_color);
+  background-color: var(--tag_bg_color);
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
-  height: var(--tag_height);
-  max-width: 100%;
-  background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
+  height: var(--tag_height);
   border-width: var(--tag_border_width);
   border-style: var(--tag_border_style);
   border-color: var(--tag_border_color);
   padding: var(--tag_padding);
   cursor: var(--tag_cursor);
+  max-width: 100%;
 }
 .disabled {
   pointer-events: none;
@@ -70,24 +65,18 @@
 }
 .smalltext,
 .mediumtext {
-  font-size: var(--tag_font_size);
-}
-.smalltext, .mediumtext {
   padding: var(--tag_inner_text_padding);
+  font-size: var(--tag_font_size);
 }
 .small {
   --tag_height: var(--zd_size20);
   --tag_padding: var(--zd_size1);
   --tag_inner_text_padding: 0 var(--zd_size7);
 }
-[dir=ltr] .small .avatar {
+.small .avatar {
   transform: scale(0.8) translateX(-2px);
   margin-right: calc(var(--zd_size8) * -1);
 }
-[dir=rtl] .small .avatar {
-  transform: scale(0.8) translateX(2px);
-  margin-left: calc(var(--zd_size8) * -1);
-}
 .smalltext {
   --tag_font_size: var(--zd_font_size12);
 }
@@ -123,34 +112,23 @@
   display: block;
 }
 .close {
+  padding: var(--tag_closeicon_padding);
+  cursor: var(--tag_closeicon_cursor);
   color: var(--tag_closeicon_color);
   display: none;
   position: absolute;
   top: 0;
+  right: 0;
   bottom: 0;
-  padding: var(--tag_closeicon_padding);
-  cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
   background: var(--tag_closeicon_bg_color);
 }
-[dir=ltr] .close {
-  right: 0;
-}
-[dir=rtl] .close {
-  left: 0;
-}
-[dir=ltr] .lgRadiusClose {
+.lgRadiusClose {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
 }
-[dir=rtl] .lgRadiusClose {
-  --tag_closeicon_border_radius: 12px 0 0 12px;
-}
-[dir=ltr] .smRadiusClose {
+.smRadiusClose {
   --tag_closeicon_border_radius: 0 3px 3px 0 /*rtl: 3px 0 0 3px*/;
 }
-[dir=rtl] .smRadiusClose {
-  --tag_closeicon_border_radius: 3px 0 0 3px;
-}
 .closedanger {
   --tag_closeicon_bg_color: var(--zdt_tag_closedanger_bg);
 }

package/es/TextBox/TextBox.module.css

@@ -41,20 +41,20 @@
 }
 .container {
   composes: basic;
+  background-color: var(--textbox_bg_color);
   transition: border var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s;
   width: var(--textbox_width);
+  padding: var(--textbox_padding);
   color: var(--textbox_text_color);
   font-size: var(--textbox_font_size);
   height: var(--textbox_height);
-  line-height: var(--textbox_line_height);
-  background-color: var(--textbox_bg_color);
-  -webkit-transition: border var(--zd_transition2) linear 0s;
-  padding: var(--textbox_padding);
   border-radius: var(--textbox_border_radius);
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
   border-color: var(--textbox_border_color);
+  line-height: var(--textbox_line_height);
 }
 .basic:disabled,
 .container:disabled,
@@ -82,17 +82,21 @@
   --textbox_cursor: pointer;
 }
 /* Need Border */
-.border, .effect:hover, .effect:focus {
+.border,
+.effect:hover,
+.effect:focus {
   border-width: var(--textbox_border_width);
   border-style: var(--textbox_border_style);
 }
-.effect:hover, .effect:focus {
+.effect:hover,
+.effect:focus {
   border-color: var(--textbox_border_color);
 }
 .border {
   --textbox_border_width: 0 0 1px 0;
 }
-.borderColor_transparent, .borderColor_default {
+.borderColor_transparent,
+.borderColor_default {
   border-color: var(--textbox_border_color);
 }
 .borderColor_transparent {

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -14,8 +14,6 @@
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;
-}
-.disabled, .readonly {
   cursor: not-allowed;
 }
 .icon {
@@ -36,20 +34,15 @@
 .line {
   position: absolute;
   bottom: 0;
+  left: 0;
+  right: 0;
   min-height: 1px;
   transition: var(--zd_transition2);
-  height: var(--textboxicon_line_height);
   transform: perspective(1px);
+  height: var(--textboxicon_line_height);
 }
-[dir=ltr] .line {
-  left: 0;
-  right: 0;
-}
-[dir=rtl] .line {
-  right: 0;
-  left: 0;
-}
-.line, .borderColor_default {
+.line,
+.borderColor_default {
   background-color: var(--textboxicon_line_color);
 }
 .borderColor_transparent {

package/es/Textarea/Textarea.module.css

@@ -19,10 +19,11 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
+  color: var(--textarea_text_color);
 }
-.basic, .noBorder {
+.basic,
+.noBorder {
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
@@ -60,20 +61,20 @@
   composes: basic;
   transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
+  -webkit-transition: border var(--zd_transition2) linear 0s,
+    height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   width: 100%;
   max-width: 100%;
   min-width: 100px;
+  border-style: solid;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
-  height: var(--textarea_height);
-  -webkit-transition: border var(--zd_transition2) linear 0s,
-    height var(--zd_transition2) linear 0s;
-  border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
+  height: var(--textarea_height);
 }
 .needBorder {
   --textarea_border_width: 0 0 1px 0;

package/es/Tooltip/Tooltip.module.css

@@ -1,28 +1,25 @@
 .tooltiptext {
   position: fixed;
   z-index: 9999999; /*Hook for editor alert*/
+  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
   pointer-events: none;
   box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
   border-radius: var(--zd_size4);
-}[dir=ltr] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
-}[dir=rtl] .tooltiptext {
-  animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
 }
 .tooltipcont {
+  background-color: var(--zdt_tooltip_default_bg);
   color: var(--zdt_tooltip_default_text);
+  padding: 0 var(--zd_size10);
   font-size: var(--zd_font_size13);
   font-family: var(--zd_semibold);
   word-break: break-word;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--zd_size4);
   max-width: 420px;
   line-height: var(--zd_size20);
   min-height: var(--zd_size24);
   overflow: hidden;
-  background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10);
-  border-style: solid;
-  border-color: transparent;
-  border-radius: var(--zd_size4);
 }
 .tooltipWrapCont {
   white-space: pre-wrap;
@@ -30,6 +27,7 @@
 .tooltipNormalCont {
   white-space: normal;
 }
+/*rtl:begin:ignore*/
 .tooltiparrow {
   content: '';
   position: absolute;
@@ -75,6 +73,7 @@
 .arrowRight {
   transform: rotate(135deg) translateY(50%);
 }
+/*rtl:end:ignore*/
 @keyframes tooltip-grow {
   from {
     opacity: 0;