@zohodesk/components 1.0.0-temp-79 → 1.0.0-temp-81

package/es/Switch/Switch.js

@@ -1,5 +1,4 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -11,7 +10,6 @@ export default class Switch extends React.Component {
     super(props);
     this.onChange = this.onChange.bind(this);
   }
-
   onChange(e) {
     let {
       onChange,
@@ -19,7 +17,6 @@ export default class Switch extends React.Component {
     } = this.props;
     onChange && onChange(!checked, e);
   }
-
   render() {
     let {
       id,
@@ -58,7 +55,8 @@ export default class Switch extends React.Component {
       "data-title": disabled ? disableTitle : title,
       "aria-checked": checked,
       role: "switch",
-      tabIndex: isReadOnly || disabled ? '-1' : '0'
+      tabIndex: isReadOnly || disabled ? '-1' : '0',
+      onClick: !disabled || !isReadOnly ? this.onChange : null
     }, SwitchProps), /*#__PURE__*/React.createElement(Box, {
       className: `${style[size]} ${customSwitchSize}`
     }, /*#__PURE__*/React.createElement("input", {
@@ -69,8 +67,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,
@@ -80,16 +78,15 @@ 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)));
   }
-
 }
 Switch.defaultProps = defaultProps;
 Switch.propTypes = propTypes;
-
 if (false) {
   Switch.docs = {
     componentGroup: 'Form Elements',

package/es/Switch/Switch.module.css

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

@@ -4,18 +4,18 @@ import styles from '../../common/docStyle.module.css';
 export default class Switch__custom extends React.Component {
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderBottom: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderBottom: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -141,9 +141,7 @@ export default class Switch__custom extends React.Component {
       text: "Disabled"
     }))));
   }
-
 }
-
 if (false) {
   Switch__custom.docs = {
     componentGroup: 'Form Elements',

package/es/Switch/docs/Switch__default.docs.js

@@ -3,18 +3,18 @@ import Switch from '../Switch';
 export default class Switch__default extends React.Component {
   render() {
     let style = {
-      margin: '10px'
-    },
-        titleStyle = {
-      fontSize: '13px',
-      padding: '15px 0',
-      textTransform: 'upperCase',
-      borderBottom: '1px solid #e3e6eb'
-    },
-        spanStyle = {
-      display: 'inline-block',
-      margin: '10px 10px 10px 0'
-    };
+        margin: '10px'
+      },
+      titleStyle = {
+        fontSize: '13px',
+        padding: '15px 0',
+        textTransform: 'upperCase',
+        borderBottom: '1px solid #e3e6eb'
+      },
+      spanStyle = {
+        display: 'inline-block',
+        margin: '10px 10px 10px 0'
+      };
     return /*#__PURE__*/React.createElement("div", {
       style: style
     }, /*#__PURE__*/React.createElement("div", {
@@ -95,9 +95,7 @@ export default class Switch__default extends React.Component {
       text: "Disabled"
     }))));
   }
-
 }
-
 if (false) {
   Switch__default.docs = {
     componentGroup: 'Form Elements',

package/es/Tab/Tab.js

@@ -1,8 +1,7 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* eslint-disable react/forbid-component-props */
-
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'zetaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta', 'tabZeta', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'zetaActive_border', 'deltaActive_border'] }] */
+
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';
 import { Tab_propTypes } from './props/propTypes';
@@ -55,7 +54,6 @@ export default function Tab(_ref) {
       event && event.stopPropagation();
       return;
     }
-
     event && event.preventDefault();
     onSelect(id);
     onClick && onClick(event);
@@ -101,7 +99,6 @@ export default function Tab(_ref) {
 }
 Tab.defaultProps = Tab_defaultProps;
 Tab.propTypes = Tab_propTypes;
-
 if (false) {
   Tab.docs = {
     componentGroup: 'Tab',

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

@@ -18,11 +18,10 @@ const TabContent = _ref => {
     dataId: `${dataId}_TabContent`,
     isScrollAttribute: true,
     "aria-labelledby": id,
-    tabindex: "0",
+    tabindex: "-1",
     role: "tabpanel"
   }, children);
 };
-
 TabContent.defaultProps = TabContent_defaultProps;
 TabContent.propTypes = TabContent_propTypes;
 export default TabContent;

package/es/Tab/TabContentWrapper.js

@@ -3,7 +3,6 @@ import { TabContentWrapper_defaultProps } from './props/defaultProps';
 import { TabContentWrapper_propTypes } from './props/propTypes';
 import { Box } from '../Layout';
 /* eslint-disable react/forbid-component-props */
-
 const TabContentWrapper = _ref => {
   let {
     style,
@@ -21,7 +20,6 @@ const TabContentWrapper = _ref => {
     onScroll: onScroll
   }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
 };
-
 TabContentWrapper.defaultProps = TabContentWrapper_defaultProps;
 TabContentWrapper.propTypes = TabContentWrapper_propTypes;
 export default TabContentWrapper;

package/es/Tab/TabWrapper.js

@@ -1,10 +1,8 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useState, useCallback } from 'react';
 import { TabWrapper_defaultProps } from './props/defaultProps';
 import { TabWrapper_propTypes } from './props/propTypes';
 import { Container } from '../Layout';
-
 function TabWrapper(_ref) {
   let {
     defaultTab,
@@ -25,7 +23,6 @@ function TabWrapper(_ref) {
     if (!hookToDisableInternalState) {
       setSelected(id);
     }
-
     onSelect && onSelect(id);
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/React.createElement(Container, {
@@ -34,7 +31,8 @@ function TabWrapper(_ref) {
   }, React.Children.map(children, child => {
     let TabsChild = child.type;
     let selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;
-    return /*#__PURE__*/React.createElement(TabsChild // eslint-disable-next-line react/no-array-index-key
+    return /*#__PURE__*/React.createElement(TabsChild
+    // eslint-disable-next-line react/no-array-index-key
     , _extends({}, child.props, {
       selectedTab: selectedTab,
       onSelect: setSelectedTab,
@@ -49,7 +47,6 @@ function TabWrapper(_ref) {
     }));
   }));
 }
-
 TabWrapper.propTypes = TabWrapper_propTypes;
 TabWrapper.defaultProps = TabWrapper_defaultProps;
 export default TabWrapper;