@zohodesk/components 1.2.21 → 1.2.23

package/es/Select/SelectWithIcon.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { SelectWithIcon_defaultProps } from './props/defaultProps';
 import { SelectWithIcon_propTypes } from './props/propTypes';
 /**** Components ****/
-
 import Popup from '../Popup/Popup';
 import TextBoxIcon from '../TextBoxIcon/TextBoxIcon';
 import { Icon } from '@zohodesk/icons';
@@ -15,12 +14,9 @@ import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
 /**** Methods ****/
-
 import { scrollTo, findScrollEnd } from '../utils/Common.js';
 /**** CSS ****/
-
 import style from './Select.module.css';
-
 class SelectWithIcon extends Component {
   constructor(props) {
     super(props);
@@ -46,43 +42,34 @@ class SelectWithIcon extends Component {
     this.handleGetNextOptions = this.handleGetNextOptions.bind(this);
     this.handleFetchOptions = this.handleFetchOptions.bind(this);
   }
-
   componentDidMount() {
     this._isMounted = true;
   }
-
   componentWillUnmount() {
     this._isMounted = false;
   }
-
   inputRef(el) {
     this.input = el;
   }
-
   itemRef(ele, index, id) {
     this[`suggestion_${id}`] = ele;
   }
-
   searchInputRef(el) {
     this.searchInput = el;
   }
-
   scrollContentRef(el) {
     let {
       isPopupOpen
     } = this.props;
-
     if (isPopupOpen) {
       this.optionsContainer = el;
     }
   }
-
   handleMouseEnter(id, value, index, e) {
     this.setState({
       selectedIndex: index
     });
   }
-
   handleKeyDown(e) {
     let {
       keyCode
@@ -97,12 +84,10 @@ class SelectWithIcon extends Component {
       isPopupOpen,
       selectedId
     } = this.props;
-
     if (isPopupOpen && (keyCode === 38 || keyCode === 40) && e.preventDefault) {
       e.preventDefault(); //prevent body scroll
     } else if (!isPopupOpen && (keyCode === 40 || keyCode === 13)) {
       e.preventDefault(); //prevent body scroll
-
       this.togglePopup(e);
       options.map((list, index) => {
         if (list.id === selectedId) {
@@ -112,7 +97,6 @@ class SelectWithIcon extends Component {
         }
       });
     }
-
     if (isPopupOpen) {
       switch (keyCode) {
         case 40:
@@ -124,14 +108,11 @@ class SelectWithIcon extends Component {
             if (selectedIndex === options.length - 3) {
               this.handleGetNextOptions();
             }
-
             this.setState({
               selectedIndex: selectedIndex + 1
             });
           }
-
           break;
-
         case 38:
           if (selectedIndex === 0) {
             this.setState({
@@ -142,9 +123,7 @@ class SelectWithIcon extends Component {
               selectedIndex: selectedIndex - 1
             });
           }
-
           break;
-
         case 13:
           let option = options[selectedIndex];
           this.handleChange && this.handleChange(option[idKey], option[valueKey], selectedIndex, e);
@@ -152,7 +131,6 @@ class SelectWithIcon extends Component {
       }
     }
   }
-
   componentDidUpdate(prevProps) {
     let {
       idKey,
@@ -163,7 +141,6 @@ class SelectWithIcon extends Component {
       selectedIndex,
       options
     } = this.state;
-
     if (prevProps.isPopupOpen != isPopupOpen) {
       setTimeout(() => {
         isPopupOpen ? needSearch ? this.searchInput.focus({
@@ -175,39 +152,32 @@ class SelectWithIcon extends Component {
         });
       }, 10);
     }
-
     let option = options[selectedIndex];
     let id = option && option[idKey] || {};
     let selSuggestion = this[`suggestion_${id}`];
-
     if (isPopupOpen) {
       this.optionsContainer && scrollTo(this.optionsContainer, selSuggestion);
     }
   }
-
   searchList(searchValue) {
     let datas = [];
     let {
       options,
       valueKey
     } = this.props;
-
     if (options.length) {
       datas = options.filter(obj => obj[valueKey].toLowerCase().includes(searchValue.toLowerCase()));
     }
-
     return datas;
   }
-
   onSearchClear() {
-    let options = this.searchList(''); // this.searchInput.focus({preventScroll:false});
-
+    let options = this.searchList('');
+    // this.searchInput.focus({preventScroll:false});
     this.setState({
       searchValue: '',
       options
     });
   }
-
   onSearch(searchValue) {
     let options = this.searchList(searchValue);
     this.setState({
@@ -216,7 +186,6 @@ class SelectWithIcon extends Component {
       options
     });
   }
-
   togglePopup(e) {
     let {
       togglePopup,
@@ -225,7 +194,6 @@ class SelectWithIcon extends Component {
     } = this.props;
     !isReadOnly && togglePopup(e, boxPosition);
   }
-
   handleChange(id, value, index, e) {
     let {
       onChange,
@@ -234,13 +202,11 @@ class SelectWithIcon extends Component {
     !isReadOnly && onChange && onChange(id, value, index, e);
     this.togglePopup(e);
   }
-
   handleScroll(e) {
     let ele = e.target;
     let isScrollReachedBottom = findScrollEnd(ele);
     isScrollReachedBottom && this.handleGetNextOptions();
   }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.options.length != this.props.options.length) {
       this.setState({
@@ -248,7 +214,6 @@ class SelectWithIcon extends Component {
       });
     }
   }
-
   handleGetNextOptions() {
     let {
       isNextOptions,
@@ -259,7 +224,6 @@ class SelectWithIcon extends Component {
     } = this.state;
     isNextOptions && getNextOptions && this.handleFetchOptions(getNextOptions, searchValue);
   }
-
   handleFetchOptions(APICall) {
     let searchValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
     let {
@@ -268,12 +232,10 @@ class SelectWithIcon extends Component {
     let {
       _isMounted
     } = this;
-
     if (!isFetchingOptions && APICall) {
       this.setState({
         isFetchingOptions: true
       });
-
       try {
         return APICall(searchValue).then(() => {
           _isMounted && this.setState({
@@ -291,7 +253,6 @@ class SelectWithIcon extends Component {
       }
     }
   }
-
   responsiveFunc(_ref) {
     let {
       mediaQueryOR
@@ -302,7 +263,6 @@ class SelectWithIcon extends Component {
       }])
     };
   }
-
   render() {
     let {
       animationStyle,
@@ -516,18 +476,17 @@ class SelectWithIcon extends Component {
       }, /*#__PURE__*/React.createElement(Loader, null))))));
     }) : null);
   }
-
 }
-
 SelectWithIcon.propTypes = SelectWithIcon_propTypes;
 SelectWithIcon.defaultProps = SelectWithIcon_defaultProps;
 const SelectWithIconComponent = Popup(SelectWithIcon);
 SelectWithIconComponent.defaultProps = SelectWithIcon.defaultProps;
-SelectWithIconComponent.propTypes = SelectWithIcon.propTypes; // if (__DOCS__) {
+SelectWithIconComponent.propTypes = SelectWithIcon.propTypes;
+
+// if (__DOCS__) {
 //   SelectWithIcon.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
 // }
-
 export default SelectWithIconComponent;

package/es/Select/props/propTypes.js

@@ -151,7 +151,6 @@ export const GroupSelect_propTypes = {
   getFooter: PropTypes.func,
   htmlId: PropTypes.string,
   iconOnHover: PropTypes.bool,
-
   /**** Popup Props ****/
   isPopupOpen: PropTypes.bool,
   isPopupReady: PropTypes.bool,
@@ -171,7 +170,8 @@ export const GroupSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isDefaultSelectValue: PropTypes.bool
 };
-export const SelectWithAvatar_propTypes = { ...Select_propTypes,
+export const SelectWithAvatar_propTypes = {
+  ...Select_propTypes,
   textBoxClass: PropTypes.string,
   imageField: PropTypes.string,
   animationStyle: PropTypes.string,

package/es/Stencils/Stencils.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: [primary, secondary, small, default, medium, large, clarge, cmedium, cdefault, csmall] }] */
-
 import style from './Stencils.module.css';
 export default class Stencils extends React.PureComponent {
   render() {
@@ -18,10 +17,11 @@ export default class Stencils extends React.PureComponent {
       className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
     });
   }
-
 }
 Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps; // if (__DOCS__) {
+Stencils.defaultProps = defaultProps;
+
+// if (__DOCS__) {
 //   Stencils.docs = {
 //     componentGroup: 'Atom',
 //     folderName: 'Style Guide',

package/es/Stencils/Stencils.module.css

@@ -1,6 +1,6 @@
 .varClass {
   /* stencils default variables */
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_width: 100%;
   --stencil_border_radius: 5px;
 }
@@ -48,7 +48,7 @@
 
 .rectangular {
   composes: stencil;
-  --stencil_height: var(--zd_size9);
+  --stencil_height: 9px;
   --stencil_border_radius: 5px;
 }
 .primary {
@@ -65,16 +65,16 @@
 }
 
 .small {
-  --stencil_width: var(--zd_size110);
+  --stencil_width: 110px;
 }
 .default {
   --stencil_width: 100%;
 }
 .medium {
-  --stencil_width: var(--zd_size170);
+  --stencil_width: 170px;
 }
 .large {
-  --stencil_width: var(--zd_size220);
+  --stencil_width: 220px;
 }
 
 .circle {
@@ -82,15 +82,15 @@
   --stencil_border_radius: 50%;
 }
 .clarge {
-  --stencil_width: var(--zd_size42);
-  --stencil_height: var(--zd_size42);
+  --stencil_width: 42px;
+  --stencil_height: 42px;
 }
 .cmedium,
 .cdefault {
-  --stencil_width: var(--zd_size30);
-  --stencil_height: var(--zd_size30);
+  --stencil_width: 30px;
+  --stencil_height: 30px;
 }
 .csmall {
-  --stencil_width: var(--zd_size20);
-  --stencil_height: var(--zd_size20);
+  --stencil_width: 20px;
+  --stencil_height: 20px;
 }

package/es/Switch/Switch.js

@@ -1,5 +1,4 @@
 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,
@@ -88,10 +85,11 @@ export default class Switch extends React.Component {
       customClass: customLabel
     }, LabelProps)));
   }
-
 }
 Switch.defaultProps = defaultProps;
-Switch.propTypes = propTypes; // if (__DOCS__) {
+Switch.propTypes = propTypes;
+
+// if (__DOCS__) {
 //   Switch.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/Switch/Switch.module.css

@@ -42,7 +42,7 @@
   content: '';
   display: block;
   position: absolute;
-  right: 50% ;
+  right: 50%;
   transition: all var(--zd_transition2);
   box-shadow: var(--switch_cricle_box_shadow);
   /* css:theme-validation:ignore */
@@ -55,7 +55,7 @@
 }
 
 .checked+.label:after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: -1px;
 }
 
 .input {
@@ -63,35 +63,35 @@
 }
 
 .small {
-  height: var(--zd_size14) ;
-  width: var(--zd_size28) ;
+  height: 14px;
+  width: 28px;
 }
 .switch_smallLabel {
-  height: var(--zd_size9) ;
-  width: var(--zd_size22) ;
-  top: calc( var(--zd_size2) * -1 ) ;
-  left: var(--zd_size2) ;
+  height: 9px;
+  width: 22px;
+  top: -2px;
+  left: 2px;
 }
 .switch_smallLabel:after {
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: calc( var(--zd_size2) * -1 ) ;
+  width: 12px;
+  height: 12px;
+  top: -2px;
 }
 
 .medium {
-  height: var(--zd_size18) ;
-  width: var(--zd_size34) ;
+  height: 18px;
+  width: 34px;
 }
 .switch_mediumLabel {
-  height: var(--zd_size13) ;
-  width: var(--zd_size31) ;
-  top: var(--zd_size2) ;
-  left: var(--zd_size2) ;
+  height: 13px;
+  width: 31px;
+  top: 2px;
+  left: 2px;
 }
 .switch_mediumLabel:after {
-  width: var(--zd_size18) ;
-  height: var(--zd_size18) ;
-  top: calc( var(--zd_size3) * -1 ) ;
+  width: 18px;
+  height: 18px;
+  top: -3px;
 }
 
 .input:disabled+.label {
@@ -118,13 +118,13 @@
 
 .switch+label {
   position: relative;
-  top: calc( var(--zd_size1) * -1 ) ;
+  top: -1px;
 }
 
 [dir=ltr] .switch+label {
-  margin-left: var(--zd_size12) ;
+  margin-left: 12px;
 }
 
 [dir=rtl] .switch+label {
-  margin-right: var(--zd_size12) ;
+  margin-right: 12px;
 }

package/es/Tab/Tab.js

@@ -1,8 +1,7 @@
 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', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
+
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';
 import { Tab_propTypes } from './props/propTypes';
@@ -56,7 +55,6 @@ export default function Tab(_ref) {
       event && event.stopPropagation();
       return;
     }
-
     event && event.preventDefault();
     onSelect(id);
     onClick && onClick(event);
@@ -102,7 +100,9 @@ export default function Tab(_ref) {
   }, children) : null));
 }
 Tab.defaultProps = Tab_defaultProps;
-Tab.propTypes = Tab_propTypes; // if (__DOCS__) {
+Tab.propTypes = Tab_propTypes;
+
+// if (__DOCS__) {
 //   Tab.docs = {
 //     componentGroup: 'Tab',
 //     folderName: 'Style Guide'

package/es/Tab/Tab.module.css

@@ -5,15 +5,15 @@
   cursor: pointer;
 }
 .vertical {
-  height: 100% ;
+  height: 100%;
 }
 .horizontal {
-  width: 100% ;
-  max-width: 100% ;
+  width: 100%;
+  max-width: 100%;
 }
 .textContainer,
 .tabText {
-  max-width: inherit ;
+  max-width: inherit;
 }
 .tabText {
   composes: dotted from '../common/common.module.css';
@@ -31,9 +31,9 @@
   transition: all var(--zd_transition2);
 }
 .alpha {
-  font-size: var(--zd_font_size11) ;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size18) ;
+  padding: 0 18px;
 }
 .tabAlpha {
   composes: alpha;
@@ -54,16 +54,16 @@
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
-  font-size: var(--zd_font_size14) ;
+  font-size: 14px;
   line-height: 4.2857;
   text-transform: capitalize;
-  padding: 0 var(--zd_size4) ;
+  padding: 0 4px;
 }
 [dir=ltr] .beta {
-  margin-right: var(--zd_size40) ;
+  margin-right: 40px;
 }
 [dir=rtl] .beta {
-  margin-left: var(--zd_size40) ;
+  margin-left: 40px;
 }
 .tabBeta {
   composes: beta;
@@ -77,15 +77,15 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
-  font-size: var(--zd_font_size11) ;
+  font-size: 11px;
   line-height: 3;
-  padding: 0 var(--zd_size4) ;
+  padding: 0 4px;
 }
 [dir=ltr] .delta {
-  margin-right: var(--zd_size10) ;
+  margin-right: 10px;
 }
 [dir=rtl] .delta {
-  margin-left: var(--zd_size10) ;
+  margin-left: 10px;
 }
 .tabDelta {
   composes: delta;

package/es/Tab/TabContent.js

@@ -24,7 +24,6 @@ const TabContent = _ref => {
     dataSelectorId: dataSelectorId
   }, children);
 };
-
 TabContent.defaultProps = TabContent_defaultProps;
 TabContent.propTypes = TabContent_propTypes;
 export default TabContent;

package/es/Tab/TabContentWrapper.js

@@ -1,9 +1,9 @@
+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 { 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,
@@ -12,18 +12,20 @@ const TabContentWrapper = _ref => {
     dataId,
     selectedTab,
     onScroll,
-    dataSelectorId
+    dataSelectorId,
+    tagName,
+    a11y
   } = _ref;
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _extends({
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
     onScroll: onScroll,
-    dataSelectorId: dataSelectorId
-  }, React.Children.map(children, child => /*#__PURE__*/React.isValidElement(child) && child.props.id === selectedTab ? child : null));
+    dataSelectorId: dataSelectorId,
+    tagName: tagName
+  }, a11y), 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 ? 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,
@@ -26,7 +24,6 @@ function TabWrapper(_ref) {
     if (!hookToDisableInternalState) {
       setSelected(id);
     }
-
     onSelect && onSelect(id);
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/React.createElement(Container, {
@@ -36,7 +33,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,
@@ -51,7 +49,6 @@ function TabWrapper(_ref) {
     }));
   }));
 }
-
 TabWrapper.propTypes = TabWrapper_propTypes;
 TabWrapper.defaultProps = TabWrapper_defaultProps;
 export default TabWrapper;