@zohodesk/components 1.0.0-alpha-211 → 1.0.0-alpha-215

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,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: var(--zd_size60);
-  margin-right: var(--zd_size40);
   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: 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

@@ -4,20 +4,23 @@ import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
-const TabContent = ({
-  children,
-  scroll,
-  dataId,
-  id
-}) => /*#__PURE__*/React.createElement(Container, {
-  className: style.container,
-  scroll: scroll,
-  dataId: `${dataId}_TabContent`,
-  isScrollAttribute: true,
-  "aria-labelledby": id,
-  tabindex: "0",
-  role: "tabpanel"
-}, children);
+const TabContent = _ref => {
+  let {
+    children,
+    scroll,
+    dataId,
+    id
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Container, {
+    className: style.container,
+    scroll: scroll,
+    dataId: `${dataId}_TabContent`,
+    isScrollAttribute: true,
+    "aria-labelledby": id,
+    tabindex: "0",
+    role: "tabpanel"
+  }, children);
+};
 
 TabContent.defaultProps = {
   dataId: 'tabContent'

package/es/Tab/TabContentWrapper.js

@@ -3,20 +3,23 @@ import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
-const TabContentWrapper = ({
-  style,
-  className,
-  children,
-  dataId,
-  selectedTab,
-  onScroll
-}) => /*#__PURE__*/React.createElement(Box, {
-  flexible: true,
-  style: style,
-  dataId: dataId,
-  className: className,
-  onScroll: onScroll
-}, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+const TabContentWrapper = _ref => {
+  let {
+    style,
+    className,
+    children,
+    dataId,
+    selectedTab,
+    onScroll
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Box, {
+    flexible: true,
+    style: style,
+    dataId: dataId,
+    className: className,
+    onScroll: onScroll
+  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+};
 
 TabContentWrapper.defaultProps = {
   children: []

package/es/Tab/TabWrapper.js

@@ -4,20 +4,21 @@ import React, { useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Container } from '../Layout';
 
-function TabWrapper({
-  defaultTab,
-  hookToDisableInternalState,
-  onSelect,
-  type,
-  isAnimate,
-  needTabBorder,
-  needBorder,
-  needPadding,
-  needAppearance,
-  align,
-  dataId,
-  children
-}) {
+function TabWrapper(_ref) {
+  let {
+    defaultTab,
+    hookToDisableInternalState,
+    onSelect,
+    type,
+    isAnimate,
+    needTabBorder,
+    needBorder,
+    needPadding,
+    needAppearance,
+    align,
+    dataId,
+    children
+  } = _ref;
   let [selectedTabInternal, setSelected] = useState(!hookToDisableInternalState ? defaultTab || 0 : null);
   const setSelectedTab = useCallback(id => {
     if (!hookToDisableInternalState) {

package/es/Tab/Tabs.js

@@ -95,7 +95,8 @@ class Tabs extends React.Component {
     }
   }
 
-  setMaxDim(totalDimension = 0) {
+  setMaxDim() {
+    let totalDimension = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     let {
       selectedTab
     } = this.props; // let actual = Object.keys(tabDimensions).reduce(

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/Tab/docs/Tab__default.docs.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace";
 import React from 'react';
 import { TabWrapper, Tabs, Tab, TabContentWrapper, TabContent } from '../';
 import { Container, Box } from '../../Layout';

package/es/Tab/docs/tabdocs.module.css

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

package/es/Tag/Tag.module.css

@@ -14,16 +14,21 @@
   --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_margin: 0 0 0 var(--zd_size5) /*rtl: 0 var(--zd_size5) 0 0*/;
   --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;
 }
 .container {
   composes: varClass;
@@ -31,17 +36,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);
-  border-radius: var(--tag_border_radius);
   height: var(--tag_height);
+  max-width: 100%;
+  background-color: var(--tag_bg_color);
+  border-radius: var(--tag_border_radius);
   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;
@@ -62,18 +67,24 @@
 }
 .smalltext,
 .mediumtext {
-  padding: var(--tag_inner_text_padding);
   font-size: var(--tag_font_size);
 }
+.smalltext, .mediumtext {
+  padding: var(--tag_inner_text_padding);
+}
 .small {
   --tag_height: var(--zd_size20);
   --tag_padding: var(--zd_size1);
   --tag_inner_text_padding: 0 var(--zd_size7);
 }
-.small .avatar {
+[dir=ltr] .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);
 }
@@ -109,23 +120,34 @@
   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);
 }
-.lgRadiusClose {
+[dir=ltr] .close {
+  right: 0;
+}
+[dir=rtl] .close {
+  left: 0;
+}
+[dir=ltr] .lgRadiusClose {
   --tag_closeicon_border_radius: 0 12px 12px 0 /*rtl: 12px 0 0 12px*/;
 }
-.smRadiusClose {
+[dir=rtl] .lgRadiusClose {
+  --tag_closeicon_border_radius: 12px 0 0 12px;
+}
+[dir=ltr] .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,21 +82,17 @@
   --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/TextBox/__tests__/TextBox.spec.js

@@ -1,4 +1,3 @@
-import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBox from '../TextBox';
 import renderer from 'react-test-renderer';

package/es/TextBoxIcon/TextBoxIcon.module.css

@@ -33,15 +33,20 @@
 .line {
   position: absolute;
   bottom: 0;
-  left: 0;
-  right: 0;
   min-height: 1px;
   transition: var(--zd_transition2);
-  transform: perspective(1px);
   height: var(--textboxicon_line_height);
+  transform: perspective(1px);
+}
+[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/TextBoxIcon/__tests__/TextBoxIcon.spec.js

@@ -1,4 +1,3 @@
-import "core-js/modules/web.url.to-json";
 import React from 'react';
 import TextBoxIcon from '../TextBoxIcon';
 import renderer from 'react-test-renderer'; // children: PropTypes.node,

package/es/Textarea/Textarea.module.css

@@ -19,11 +19,10 @@
   appearance: none;
   outline: 0;
   letter-spacing: 0.1px;
-  cursor: var(--textarea_cursor);
   color: var(--textarea_text_color);
+  cursor: var(--textarea_cursor);
 }
-.basic,
-.noBorder {
+.basic, .noBorder {
   border-width: var(--textarea_border_width);
 }
 .basic::placeholder {
@@ -61,20 +60,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/Textarea/__tests__/Textarea.spec.js

@@ -1,4 +1,3 @@
-import "core-js/modules/web.url.to-json";
 import React from 'react';
 import Textarea from '../Textarea';
 import renderer from 'react-test-renderer';

package/es/Tooltip/Tooltip.js

@@ -1,4 +1,3 @@
-import "core-js/modules/es.string.replace";
 import React from 'react';
 import PropTypes from 'prop-types';
 import style from './Tooltip.module.css';

package/es/Tooltip/Tooltip.module.css

@@ -1,28 +1,30 @@
 .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);
   white-space: normal;
   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);
 }
-/*rtl:begin:ignore*/
 .tooltiparrow {
   content: '';
   position: absolute;
@@ -68,7 +70,6 @@
 .arrowRight {
   transform: rotate(135deg) translateY(50%);
 }
-/*rtl:end:ignore*/
 @keyframes tooltip-grow {
   from {
     opacity: 0;

package/es/a11y/FocusScope/FocusScope.js

@@ -225,7 +225,9 @@ function useFocusContainment(scopeRef, contain) {
   }, [raf]);
 }
 
-function isElementInAnyScope(element, scopes = []) {
+function isElementInAnyScope(element) {
+  let scopes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
   for (let scope of scopes.values()) {
     if (isElementInScope(element, scope.current)) {
       return true;
@@ -235,11 +237,14 @@ function isElementInAnyScope(element, scopes = []) {
   return false;
 }
 
-function isElementInScope(element, scope = []) {
+function isElementInScope(element) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   return scope.some(node => node.contains(element));
 }
 
-function focusElement(element = null) {
+function focusElement() {
+  let element = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+
   if (element != null) {
     element.focus();
   }
@@ -259,7 +264,8 @@ function findElement(elements) {
   return ele.length ? ele[0] : null;
 }
 
-function focusFirstInScope(scope = []) {
+function focusFirstInScope() {
+  let scope = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   let elements = getFocusableElementsInScope(scope, {
     tabbable: true
   });

package/es/beta/FocusRing/FocusRing.js

@@ -16,7 +16,10 @@ const FOCUS_VISIBLE_INPUT_KEYS = {
   Escape: false
 };
 
-function triggerChangeHandlers(evType = eventFrom, e = eventType) {
+function triggerChangeHandlers() {
+  let evType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : eventFrom;
+  let e = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : eventType;
+
   for (let handler of changeHandlers) {
     handler(evType, e);
   }