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

package/es/RippleEffect/docs/RippleEffect__default.docs.js

@@ -86,7 +86,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -100,7 +100,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
+        color: 'var(--dot_brightRed)'
       }
     }, "Danger")))), /*#__PURE__*/React.createElement("div", {
       style: boxStyle
@@ -162,7 +162,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -177,7 +177,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
+        color: 'var(--dot_brightRed)'
       }
     }, "Danger")))), /*#__PURE__*/React.createElement("div", {
       style: boxStyle
@@ -223,7 +223,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -238,7 +238,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_brightRed)'
+        color: 'var(--dot_brightRed)'
       }
     }, "Danger"))), /*#__PURE__*/React.createElement("div", {
       style: {
@@ -328,7 +328,7 @@ export default class RippleEffect__default extends React.Component {
       style: {
         fontSize: '13px',
         padding: '4px 9px 7px',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green")))), /*#__PURE__*/React.createElement("div", {
       style: boxStyle
@@ -405,7 +405,7 @@ export default class RippleEffect__default extends React.Component {
         fontSize: '13px',
         padding: '4px 9px 7px',
         cursor: 'pointer',
-        color: 'var(--dot_text_strongGreen)'
+        color: 'var(--dot_strongGreen)'
       }
     }, "Green"))), /*#__PURE__*/React.createElement("div", {
       style: {

package/es/Select/GroupSelect.js

@@ -489,8 +489,7 @@ export class GroupSelectComponent extends PureComponent {
     }
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.js

@@ -455,8 +455,7 @@ export class SelectComponent extends Component {
     }
   }
 
-  handleFetchOptions(APICall) {
-    let searchStr = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  handleFetchOptions(APICall, searchStr = '') {
     // let funcArgs = args.slice(1, args.length);
     let {
       isFetchingOptions = false

package/es/Select/Select.module.css

@@ -29,7 +29,7 @@
 }
 .arrowIcon {
   height: var(--zd_size8);
-  line-height: var(--zd_size8);
+  line-height: 0.5;
 }
 .small.search {
   padding: 0 var(--zd_size5);
@@ -65,22 +65,12 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  width: var(--zd_size30);
-}
-
-[dir=ltr] .leftIcon {
   left: 0;
+  width: var(--zd_size30);
 }
-
-[dir=rtl] .leftIcon {
-  right: 0;
-}
-[dir=ltr] .iconSelect {
+.iconSelect {
   padding-left: var(--zd_size30);
 }
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30);
-}
 
 .dropBoxList {
   padding: var(--zd_size10) 0;

package/es/Select/docs/Select__default.docs.js

@@ -87,8 +87,7 @@ export default class Select__default extends React.Component {
     });
   }
 
-  customChildren() {
-    let serach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  customChildren(serach = {}) {
     return /*#__PURE__*/React.createElement("div", null, serach.searchString, "Custom Children");
   }
 

package/es/Stencils/Stencils.module.css

@@ -11,33 +11,19 @@
   border-radius: var(--stencil_border_radius);
 }
 .stencil {
-  background-size: 800px 1px;
-}
-[dir=ltr] .stencil {
-  animation-duration: var(--zd_transition10);
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-ltr ;
-  animation-timing-function: linear;
-  -webkit-animation-duration: var(--zd_transition10);
-  -webkit-animation-fill-mode: forwards;
-  -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-ltr ;
-  -webkit-animation-timing-function: linear;
-}
-[dir=rtl] .stencil {
   animation-duration: var(--zd_transition10);
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name:  placeHolderShimmer-rtl ;
+  animation-name: placeHolderShimmer;
   animation-timing-function: linear;
   -webkit-animation-duration: var(--zd_transition10);
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-iteration-count: infinite;
-  -webkit-animation-name:  placeHolderShimmer-rtl ;
+  -webkit-animation-name: placeHolderShimmer;
   -webkit-animation-timing-function: linear;
+  background-size: 800px 1px;
 }
-@keyframes placeHolderShimmer-ltr {
+@keyframes placeHolderShimmer {
   0% {
     background-position: calc(var(--zd_size468) * -1) 0;
   }
@@ -46,15 +32,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/Stencils/__tests__/Stencils.spec.js

@@ -1,3 +1,4 @@
+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,6 +30,7 @@
 .effect:focus .label {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
+/*rtl:begin:ignore*/
 .label:after {
   content: '';
   display: block;
@@ -46,6 +47,7 @@
 .checked + .label:after {
   right: calc(var(--zd_size1) * -1);
 }
+/*rtl:end:ignore*/
 
 .input {
   display: none;
@@ -54,12 +56,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);
@@ -69,21 +73,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;
@@ -101,10 +107,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

@@ -22,33 +22,32 @@ const tabTypes = {
     tab: 'tabDelta'
   }
 };
-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;
+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
+}) {
   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 {
-  font-size: var(--zd_font_size11);
-  line-height: var(--zd_size33);
   padding: 0 var(--zd_size18);
+  font-size: var(--zd_font_size11);
+  line-height: 3;
 }
 .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 {
-  font-size: var(--zd_font_size14);
-  line-height: var(--zd_size60);
-  text-transform: capitalize;
   padding: 0 var(--zd_size4);
-}
-[dir=ltr] .beta {
+  font-size: var(--zd_font_size14);
+  line-height: 4.28;
   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 {
-  font-size: var(--zd_font_size11);
-  line-height: var(--zd_size33);
   padding: 0 var(--zd_size4);
-}
-[dir=ltr] .delta {
+  font-size: var(--zd_font_size11);
+  line-height: 3;
   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,23 +4,20 @@ import { Container } from '../Layout';
 import style from './TabContent.module.css';
 /* eslint-disable react/forbid-component-props */
 
-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);
-};
+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);
 
 TabContent.defaultProps = {
   dataId: 'tabContent'

package/es/Tab/TabContentWrapper.js

@@ -3,23 +3,20 @@ import { PropTypes } from 'prop-types';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
 
-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));
-};
+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));
 
 TabContentWrapper.defaultProps = {
   children: []

package/es/Tab/TabWrapper.js

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

package/es/Tab/Tabs.js

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

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,19 +95,12 @@
   composes: oflowy from '../common/common.module.css';
 }
 
-[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/Tab__default.docs.js

@@ -1,3 +1,4 @@
+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;
-  font-size: 12px;
   padding: 10px;
+  font-size: 12px;
 }
 
 .itemActive {