@zohodesk/components 1.0.0-temp-40 → 1.0.0-temp-44

package/es/RippleEffect/RippleEffect.module.css

@@ -8,43 +8,67 @@
 .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 {
@@ -56,12 +80,17 @@
 .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);
 }

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

@@ -441,8 +441,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

@@ -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 {
+  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

@@ -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(
@@ -266,13 +265,14 @@ class Tabs extends React.Component {
     let {
       children,
       maxTabsCount,
-      minTabsCount
+      minTabsCount,
+      isResponsive
     } = this.props;
     let mainTabs = [],
         moreTabs = [],
         otherTabs = [];
 
-    if (totalDimension) {
+    if (totalDimension && isResponsive) {
       let {
         childType,
         selectedTab
@@ -318,6 +318,17 @@ class Tabs extends React.Component {
         mainTabs = newTabs; */
         this.setMaxDim(totalDimension);
       }
+    } else if (!isResponsive) {
+      let {
+        childType
+      } = this.props;
+      React.Children.forEach(children, child => {
+        if (child && child.type === childType && child.props.id) {
+          mainTabs.push(child);
+        } else {
+          otherTabs.push(child);
+        }
+      });
     } else {
       moreTabs = children;
     }

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';