@zohodesk/components 1.0.0-alpha-271 → 1.0.0-alpha-272

package/es/DateTime/validator.js

@@ -11,17 +11,21 @@ const validator = {
     let newValidationRules = validationRules ? validationRules : {};
     let checkPropsRules = defaultCheckPropsRules;
     let checkPropsOrder = [];
+
     for (let i = 0; i < checkPropsRules.length; i++) {
       let prop = checkPropsRules[i];
+
       if (Object.prototype.hasOwnProperty.call(currentProps, prop)) {
         if (newValidationRulesOrder.indexOf(prop) === -1) {
           checkPropsOrder.push(prop);
         }
+
         if (!Object.prototype.hasOwnProperty.call(newValidationRules, prop)) {
           newValidationRules[prop] = currentProps[prop];
         }
       }
     }
+
     newValidationRulesOrder = !Object.prototype.hasOwnProperty.call(newValidation, 'rulesOrder') ? checkPropsOrder.concat(newValidationRulesOrder) : validationRulesOrder;
     let isRulesFound = Object.keys(newValidationRules).length;
     newValidationRules = isRulesFound ? validator.composeRulesForValidation(newType, defaultValidateRules, newValidationRules) : newValidationRules;
@@ -47,22 +51,28 @@ const validator = {
       onFailValidation
     } = validationObj;
     let skipIfEmptyField = null;
+
     if (validationRules.required === false && (fieldType !== 'radio' || fieldType !== 'checkbox')) {
       skipIfEmptyField = val => {
         if (fieldType === 'onegroup' || fieldType === 'multigroup') {
           return !val || !(val.length > 0);
         }
+
         let value = (val || '').trim();
         return value.length < 1;
       };
     }
+
     if (skipIfEmptyField === null || skipIfEmptyField(text) === false) {
       for (let i = 0, len = validationRulesOrder.length; i < len; i++) {
         let rule = validationRulesOrder[i];
+
         if (!validationRules[rule] || !typeChecker.isFunction(validationRules[rule])) {
           continue;
         }
+
         let isInValid = validationRules[rule](text, inputTag);
+
         if (isInValid) {
           let message = validationMessages[rule] && typeChecker.isFunction(validationMessages[rule]) ? validationMessages[rule](text, inputTag) : validationMessages[rule];
           onFailValidation && onFailValidation(rule, message, inputTag);
@@ -70,52 +80,66 @@ const validator = {
         }
       }
     }
+
     onPassValidation && onPassValidation(text, inputTag);
   },
   composeRulesForValidation: (type, defaultValidateRules, newValidationRules) => {
     let defaultPatterns = validator.regexs;
+
     for (let i = 0, len = defaultValidateRules.length; i < len; i++) {
       let rule = defaultValidateRules[i];
       let ruleInfo = newValidationRules[rule] || '';
+
       if (ruleInfo && !typeChecker.isFunction(ruleInfo)) {
         if (rule === 'required' && ruleInfo === true) {
           newValidationRules[rule] = (val, el) => {
             if (el.willValidate && el.validity.valueMissing) {
               return true;
             }
+
             if (type === 'radio' || type === 'checkbox') {
               return el.checked === false;
             }
+
             if (type === 'onegroup' || type === 'multigroup') {
               return !val || val.length < 1;
             }
+
             let value = (val || '').replace(/\s{2,}/g, ' ').trim();
             return value.length < 1;
           };
         } else if (rule === 'maxLength' && !Number.isNaN(ruleInfo) && Number.isFinite(ruleInfo)) {
           let maxLength = Number(ruleInfo);
+
           newValidationRules[rule] = (val, el) => {
             if (el.willValidate && el.validity.tooLong) {
               return true;
             }
+
             let value = val || '';
+
             if (type !== 'multigroup') {
               value = val.trim();
             }
+
             return !(value.length <= maxLength);
           };
         } else if (rule === 'minLength' && !Number.isNaN(ruleInfo) && Number.isFinite(ruleInfo)) {
           let minLength = Number(ruleInfo);
+
           newValidationRules[rule] = val => {
             let value = val || '';
+
             if (type !== 'multigroup') {
               value = val.trim();
             }
+
             return !(value.length >= minLength);
           };
         } else if (rule === 'rangeLength' && /^([-+\d]+)*([,]{1,1}([-+\d]+))$/.test(ruleInfo) === true) {
           let rangeLength = ruleInfo;
           rangeLength = rangeLength.split(',').map(a => Number(a));
+
           newValidationRules[rule] = val => {
             let value = (val || '').trim();
             return !(value.length >= rangeLength[0] && value.length <= rangeLength[1]);
@@ -123,119 +147,146 @@ const validator = {
         } else if (rule === 'step' && ruleInfo) {
           let step = Number(ruleInfo);
           let stepTypes = ['number', 'range', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
+
           newValidationRules[rule] = (val, el) => {
             if (stepTypes.indexOf(type) !== -1) {
               if (el.willValidate && el.validity.stepMismatch) {
                 return true;
               }
+
               return false;
             }
+
             let value = (val || '').trim();
             value = Number(value);
+
             if (Number.isNaN(value) || !Number.isFinite(value) || Number.isNaN(step) || !Number.isFinite(step)) {
               return true;
             }
+
             return !(value % step === 0);
           };
         } else if (rule === 'max') {
           let max = Number(ruleInfo);
           let maxTypes = ['number', 'range', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
+
           newValidationRules[rule] = (val, el) => {
             if (maxTypes.indexOf(type) !== -1) {
               if (el.willValidate && el.validity.rangeOverflow) {
                 return true;
               }
+
               return false;
             }
+
             let value = (val || '').trim();
             value = Number(value);
+
             if (Number.isNaN(value) || !Number.isFinite(value) || Number.isNaN(max) || !Number.isFinite(max)) {
               return true;
             }
+
             return !(value <= max);
           };
         } else if (rule === 'min') {
           let min = Number(ruleInfo);
           let minTypes = ['number', 'range', 'date', 'datetime', 'datetime-local', 'month', 'time', 'week'];
+
           newValidationRules[rule] = (val, el) => {
             if (minTypes.indexOf(type) !== -1) {
               if (el.willValidate && el.validity.rangeUnderflow) {
                 return true;
               }
+
               return false;
             }
+
             let value = (val || '').trim();
             value = Number(value);
+
             if (Number.isNaN(value) || !Number.isFinite(value) || Number.isNaN(min) || !Number.isFinite(min)) {
               return true;
             }
+
             return !(value >= min);
           };
         } else if (rule === 'range' && /^([-+\d]+)*([,]{1,1}([-+\d]+))$/.test(ruleInfo) === true) {
           let ranges;
           ranges = ranges.split(',').map(a => Number(a));
+
           newValidationRules[rule] = val => {
             let value = (val || '').trim();
             value = Number(value);
+
             if (Number.isNaN(value) || !Number.isFinite(value)) {
               return true;
             }
+
             return !(value >= ranges[0] && value <= ranges[1]);
           };
         } else if ((rule === 'digits' || rule === 'integer' || rule === 'double') && ruleInfo === true) {
           newValidationRules[rule] = val => {
             let value = (val || '').trim();
             value = Number(value);
+
             if (Number.isNaN(value) || !Number.isFinite(value)) {
               return true;
             }
+
             let condition = true;
+
             if (rule === 'integer') {
               condition = Number.isSafeInteger(value);
             }
+
             if (rule === 'double') {
               condition = -Number.MAX_VALUE <= value && Number.MAX_VALUE >= value;
             }
+
             return !defaultPatterns[rule].test(value) && condition;
           };
         } else if ((rule === 'timezonedate' || rule === 'datetimezone' || rule === 'date' || rule === 'datetime') && ruleInfo === true) {
           newValidationRules[rule] = val => {
             let value = (val || '').trim();
+
             if (!defaultPatterns[rule].test(value)) {
               return true;
             }
+
             if (rule === 'datetime') {
               let index = 0;
-              value = value.split('T')[index];
-              //let timings = value[1].replace("Z","").split(":")
+              value = value.split('T')[index]; //let timings = value[1].replace("Z","").split(":")
               //let
               //if( !defaultPatterns[rule].test(value); )
             }
 
             value = value.replace('/', '-');
             value = value.replace(':', '-');
-            let values = value.split('-');
+            let values = value.split('-'); // Extract the string into month, date and year
 
-            // Extract the string into month, date and year
             let yy = parseInt(values[0]);
             let mm = parseInt(values[1]);
-            let dd = parseInt(values[2]);
+            let dd = parseInt(values[2]); // Create list of days of a month [assume there is no leap year by default]
 
-            // Create list of days of a month [assume there is no leap year by default]
             let ListofDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
+
             if (mm === 1 || mm > 2) {
               if (dd > ListofDays[mm - 1]) {
                 return true;
               }
             }
+
             if (mm === 2) {
               let lyear = false;
+
               if (!(yy % 4) && yy % 100 || !(yy % 400)) {
                 lyear = true;
               }
+
               if (lyear === false && dd >= 29) {
                 return true;
               }
+
               if (lyear === true && dd > 29) {
                 return true;
               }
@@ -254,6 +305,7 @@ const validator = {
         }
       }
     }
+
     return newValidationRules;
   },
   regexs: {

package/es/DropBox/DropBox.js

@@ -1,4 +1,5 @@
 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, { useRef, Fragment, useContext } from 'react';
 import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 import Modal from '../Modal/Modal';
@@ -26,14 +27,17 @@ export default function DropBox(props) {
     direction
   } = DropBoxContext || {};
   let windowWidth,
-    mobileWidth = getLibraryConfig('mobileWidth'),
-    isModel = false;
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
+
   if (needResponsive) {
     windowWidth = window.innerWidth;
+
     if (windowWidth <= mobileWidth) {
       isModel = true;
     }
   }
+
   const {
     zIndexStyle
   } = cssJSLogic(props);

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -30,6 +30,7 @@ export default function DropBoxElement(props) {
     animationStyle
   } = props;
   let isAbsolute = isAbsolutePositioningNeeded;
+
   const FireOnAnimationEnd = () => {
     let eleClassList = subContainerRef && subContainerRef.current.classList;
     let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
@@ -39,19 +40,23 @@ export default function DropBoxElement(props) {
       }
     });
   };
+
   const getRef = ele => {
     const {
       getRef,
       forwardRef
     } = props;
     getRef && getRef(ele);
+
     if (forwardRef) {
       forwardRef.current = ele;
     }
   };
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
+
   const {
     role,
     ariaMultiselectable,
@@ -59,12 +64,14 @@ export default function DropBoxElement(props) {
   } = a11y;
   boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
   const boxDirection = positionMapping[boxPosition].direction;
+
   if (isAbsolute) {
     arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
     boxPosition = positionMapping[boxPosition].positionStyle;
   } else {
     arrowPosition = positionMapping[boxPosition].arrowPosition;
   }
+
   const {
     arrowstyle,
     boxstyle,

package/es/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -40,9 +40,7 @@ export default function cssJSLogic(_ref) {
     customDropBoxWrap = '',
     customMobileDropBoxWrap = ''
   } = customClass;
-  const animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle;
-
-  // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
+  const animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
   let boxClassName = compileClassNames({
     [style.main]: true,
@@ -70,17 +68,21 @@ export default function cssJSLogic(_ref) {
     [style[animationValue]]: !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle
   });
   let inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
+
   if (zIndexStyle) {
     inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
   }
+
   if (!isModel && !isAbsolute && size === 'default' && targetOffset && isActive) {
     inlineStyle = Object.assign({}, inlineStyle, {
       width: targetOffset.width
     });
   }
+
   if (customInlineStyle) {
     inlineStyle = Object.assign({}, inlineStyle, customInlineStyle);
   }
+
   return {
     boxClassName,
     subContainerClass,

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -17,6 +17,7 @@ export default function useDropboxPosCalc(props) {
   let arrowstyle = {};
   const needBoxStyle = right || left || top || bottom;
   const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
+
   if (needBoxStyle) {
     boxstyle = !isModel ? direction === 'rtl' ? {
       right: [remConvert(left)] + unit,
@@ -30,6 +31,7 @@ export default function useDropboxPosCalc(props) {
       bottom: [remConvert(bottom)] + unit
     } : {};
   }
+
   if (needArrowStyle) {
     arrowstyle = !isModel ? direction === 'rtl' ? {
       right: [remConvert(arrowLeft)] + unit,
@@ -43,6 +45,7 @@ export default function useDropboxPosCalc(props) {
       bottom: [remConvert(arrowBottom)] + unit
     } : {};
   }
+
   return {
     needBoxStyle,
     boxstyle,

package/es/DropBox/props/defaultProps.js

@@ -8,7 +8,6 @@ export const defaultProps = {
   needFocusScope: false,
   needAutoZindex: true
 };
-export const DropBoxDefaultProps = {
-  ...DropBoxElementDefaultProps,
+export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
   ...defaultProps
 };

package/es/DropBox/props/propTypes.js

@@ -9,7 +9,6 @@ export const propTypes = {
   needFocusScope: PropTypes.bool,
   needAutoZindex: PropTypes.bool
 };
-export const DropBoxPropTypes = {
-  ...DropBoxElementPropTypes,
+export const DropBoxPropTypes = { ...DropBoxElementPropTypes,
   ...propTypes
 };

package/es/DropDown/DropDown.js

@@ -3,7 +3,6 @@ import { DropDown_propTypes, DropDownTarget_propTypes, DropDownContainer_propTyp
 import { DropDownItemContainer_defaultProps } from './props/defaultProps';
 import style from './DropDown.module.css';
 import PopOver, { PopOverTarget, PopOverContainer } from '../PopOver/PopOver';
-
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['dropdown', 'shadow', 'target', 'menu', 'header', 'headertext', 'list', 'padding', 'listHover', 'active', 'children', 'user', 'footer', 'separator', 'small', 'search', 'medium', 'heading'] }] */
 
 export default class DropDown extends React.Component {
@@ -13,10 +12,9 @@ export default class DropDown extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(PopOver, this.props, /*#__PURE__*/React.createElement(PopOverTarget, null, children[0]), /*#__PURE__*/React.createElement(PopOverContainer, null, children[1]));
   }
-}
-DropDown.propTypes = DropDown_propTypes;
 
-// if (__DOCS__) {
+}
+DropDown.propTypes = DropDown_propTypes; // if (__DOCS__) {
 //   DropDown.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
@@ -30,6 +28,7 @@ export class DropDownTarget extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", null, children);
   }
+
 }
 DropDownTarget.propTypes = DropDownTarget_propTypes;
 export class DropDownContainer extends React.Component {
@@ -39,6 +38,7 @@ export class DropDownContainer extends React.Component {
     } = this.props;
     return /*#__PURE__*/React.createElement("div", null, " ", children, " ");
   }
+
 }
 DropDownContainer.propTypes = DropDownContainer_propTypes;
 export class DropDownItemContainer extends React.Component {
@@ -47,18 +47,21 @@ export class DropDownItemContainer extends React.Component {
     this.getRef = this.getRef.bind(this);
     this.onScroll = this.onScroll.bind(this);
   }
+
   onScroll(e) {
     let {
       onScroll
     } = this.props;
     onScroll && onScroll(e);
   }
+
   getRef(ele) {
     let {
       getRef
     } = this.props;
     getRef && getRef(ele);
   }
+
   render() {
     let {
       children,
@@ -71,6 +74,7 @@ export class DropDownItemContainer extends React.Component {
       "data-id": dataId
     }, children);
   }
+
 }
 DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
 DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/DropDown/DropDownHeading.js

@@ -28,15 +28,14 @@ export default class DropDownHeading extends React.Component {
       "aria-label": ariaLabel,
       id: htmlId,
       "data-id": dataId,
-      "data-selector-id": dataSelectorId
-      // tabindex='0'
+      "data-selector-id": dataSelectorId // tabindex='0'
+
     }, text, children);
   }
+
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
-DropDownHeading.defaultProps = DropDownHeading_defaultProps;
-
-// if (__DOCS__) {
+DropDownHeading.defaultProps = DropDownHeading_defaultProps; // if (__DOCS__) {
 //   DropDownHeading.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'

package/es/DropDown/DropDownItem.js

@@ -10,6 +10,7 @@ export default class DropDownItem extends React.Component {
     this.getSelectedElement = this.getSelectedElement.bind(this);
     this.onHover = this.onHover.bind(this);
   }
+
   getRef(ele) {
     this.ele = ele;
     let {
@@ -18,9 +19,11 @@ export default class DropDownItem extends React.Component {
     } = this.props;
     getRef && getRef(ele, index);
   }
+
   getSelectedElement() {
     return this.ele ? this.ele : null;
   }
+
   onClick(e) {
     let {
       onClick,
@@ -30,6 +33,7 @@ export default class DropDownItem extends React.Component {
     } = this.props;
     onClick && onClick(id, value, index, e);
   }
+
   onHover(e) {
     let {
       onHover,
@@ -39,6 +43,7 @@ export default class DropDownItem extends React.Component {
     } = this.props;
     onHover && onHover(id, value, index, e);
   }
+
   render() {
     let {
       value,
@@ -64,6 +69,7 @@ export default class DropDownItem extends React.Component {
       className: style.user
     }, " ", children[1], " ") : '');
   }
+
 }
 DropDownItem.propTypes = DropDownItem_propTypes;
 DropDownItem.defaultProps = DropDownItem_defaultProps;

package/es/DropDown/DropDownSearch.js

@@ -10,11 +10,13 @@ export default class DropDownSearch extends React.Component {
     super(props);
     this.getRef = this.getRef.bind(this);
   }
+
   componentDidMount() {
     this.input && this.input.focus({
       preventScroll: true
     });
   }
+
   getRef(ele) {
     let {
       getRef
@@ -22,6 +24,7 @@ export default class DropDownSearch extends React.Component {
     this.input = ele;
     getRef && getRef(ele);
   }
+
   render() {
     let {
       name,
@@ -56,6 +59,7 @@ export default class DropDownSearch extends React.Component {
       customClass: customTextBox
     }));
   }
+
 }
 DropDownSearch.defaultProps = DropDownSearch_defaultProps;
 DropDownSearch.propTypes = DropDownSearch_propTypes;

package/es/DropDown/DropDownSeparator.js

@@ -10,5 +10,6 @@ export default class DropDownSeparator extends React.Component {
       className: `${style.separator} ${customClass}`
     });
   }
+
 }
 DropDownSeparator.propTypes = DropDownSeparator_propTypes;

package/es/DropDown/__tests__/DropDown.spec.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { DropDownItemContainer, DropDownContainer, DropDownTarget } from '../DropDown';
-// import renderer from 'react-test-renderer';
+import { DropDownItemContainer, DropDownContainer, DropDownTarget } from '../DropDown'; // import renderer from 'react-test-renderer';
 
 const defaultProps = {
   onScroll: jest.fn(),

package/es/Heading/Heading.js

@@ -23,11 +23,10 @@ export default class Heading extends React.Component {
       ...a11y
     }, title);
   }
+
 }
 Heading.propTypes = propTypes;
-Heading.defaultProps = defaultProps;
-
-// if (__DOCS__) {
+Heading.defaultProps = defaultProps; // if (__DOCS__) {
 //   Heading.docs = {
 //     folderName: 'Style Guide',
 //     componentGroup: 'Accessibility'

package/es/Label/Label.js

@@ -34,11 +34,10 @@ export default class Label extends React.Component {
       id: id
     }, text);
   }
+
 }
 Label.defaultProps = defaultProps;
-Label.propTypes = propTypes;
-
-// if (__DOCS__) {
+Label.propTypes = propTypes; // if (__DOCS__) {
 //   Label.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'