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

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/Stencils/__tests__/Stencils.spec.js

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

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.js

@@ -22,32 +22,33 @@ const tabTypes = {
     tab: 'tabDelta'
   }
 };
-export default function Tab({
-  id,
-  style,
-  text,
-  children,
-  className,
-  dataId,
-  title,
-  titlePosition,
-  activeClass,
-  href,
-  isLink,
-  isDisabled,
-  tourId,
-  onClick,
-  isActive,
-  getTabRef,
-  onSelect,
-  type,
-  isAnimate,
-  needBorder,
-  needAppearance,
-  align,
-  isVirtual,
-  customProps
-}) {
+export default function Tab(_ref) {
+  let {
+    id,
+    style,
+    text,
+    children,
+    className,
+    dataId,
+    title,
+    titlePosition,
+    activeClass,
+    href,
+    isLink,
+    isDisabled,
+    tourId,
+    onClick,
+    isActive,
+    getTabRef,
+    onSelect,
+    type,
+    isAnimate,
+    needBorder,
+    needAppearance,
+    align,
+    isVirtual,
+    customProps
+  } = _ref;
   let clickListener = useCallback(event => {
     if (isLink && event && (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)) {
       event && event.stopPropagation();

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/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/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) {