@zohodesk/components 1.0.0-alpha-249 → 1.0.0-alpha-252

package/es/DropBox/DropBox.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, { Fragment } from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
@@ -15,19 +14,16 @@ export class DropBoxElement extends React.Component {
     super(props);
     this.getRef = this.getRef.bind(this);
   }
-
   getRef(ele) {
     const {
       getRef,
       forwardRef
     } = this.props;
     getRef && getRef(ele);
-
     if (forwardRef) {
       forwardRef.current = ele;
     }
   }
-
   render() {
     let {
       children,
@@ -68,11 +64,9 @@ export class DropBoxElement extends React.Component {
     let {
       isReducedMotion
     } = this.context || {};
-
     if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
       isAbsolutePositioningNeeded = true;
     }
-
     const {
       role,
       ariaMultiselectable,
@@ -89,7 +83,6 @@ export class DropBoxElement extends React.Component {
     let arrowstyle = {};
     const needBoxStyle = right || left || top || bottom;
     const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
-
     if (needBoxStyle) {
       boxstyle = !isModel ? direction === 'rtl' ? {
         right: [remConvert(left)] + unit,
@@ -103,7 +96,6 @@ export class DropBoxElement extends React.Component {
         bottom: [remConvert(bottom)] + unit
       } : {};
     }
-
     if (needArrowStyle) {
       arrowstyle = !isModel ? direction === 'rtl' ? {
         right: [remConvert(arrowLeft)] + unit,
@@ -117,37 +109,30 @@ export class DropBoxElement extends React.Component {
         bottom: [remConvert(arrowBottom)] + unit
       } : {};
     }
-
     boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
-    const boxDirection = positionMapping[boxPosition].direction;
-    /*getting box direction*/
-
+    const boxDirection = positionMapping[boxPosition].direction; /*getting box direction*/
     if (isAbsolutePositioningNeeded) {
       arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
       boxPosition = positionMapping[boxPosition].positionStyle;
     } else {
       arrowPosition = positionMapping[boxPosition].arrowPosition;
     }
-
     const boxClassName = `${style.main} ${!isActive ? style.hidden : ''} ${isModel ? `${style.responsive} ${customMobileDropBoxWrap}` : `${customDropBoxWrap} ${size ? style[size] : ''} ${isActive ? `${isArrow ? `${style[boxDirection]} ${isAbsolutePositioningNeeded ? style[`arrow${boxDirection}`] : ''}` : isPadding ? style[`paddingSpace_${boxDirection}`] : ''}` : ''} ${isAbsolutePositioningNeeded ? `${style.container} ${style[boxPosition]}` : style.fixedContainer}`}`;
-    const subContainerClass = `${style.subContainer} ${isModel ? ` ${customMobileDropBox} ${style.mobRadius} ${isActive ? style.slideUp : ''} ` : `${customDropBox} ${style[`${boxDirection}_shadow`]} ${isRadius ? style.radius : ''} ${isAnimate && !isReducedMotion && isActive ? animationStyle === 'default' ? style.fadeIn : style.bounce : ''} ${isBoxPaddingNeed ? style.boxPadding : ''}`}`; // setting inlineStyle for dropbox
+    const subContainerClass = `${style.subContainer} ${isModel ? ` ${customMobileDropBox} ${style.mobRadius} ${isActive ? style.slideUp : ''} ` : `${customDropBox} ${style[`${boxDirection}_shadow`]} ${isRadius ? style.radius : ''} ${isAnimate && !isReducedMotion && isActive ? animationStyle === 'default' ? style.fadeIn : style.bounce : ''} ${isBoxPaddingNeed ? style.boxPadding : ''}`}`;
 
+    // setting inlineStyle for dropbox
     let inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
-
     if (zIndexStyle) {
       inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
     }
-
     if (!isModel && !isAbsolutePositioningNeeded && size === 'default' && targetOffset && isActive) {
       inlineStyle = Object.assign({}, inlineStyle, {
         width: targetOffset.width
       });
     }
-
     if (customStyle) {
       inlineStyle = Object.assign({}, inlineStyle, customStyle);
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: boxClassName,
       "data-id": `${dataId}`,
@@ -174,7 +159,6 @@ export class DropBoxElement extends React.Component {
       className: style.arrowShape
     })), children));
   }
-
 }
 export default class DropBox extends React.Component {
   constructor(props) {
@@ -182,11 +166,9 @@ export default class DropBox extends React.Component {
     this.getNextIndex = getZIndex(this);
     this.onFreezeClick = this.onFreezeClick.bind(this);
   }
-
   onFreezeClick(e) {
     e && e.stopPropagation();
   }
-
   render() {
     const {
       needResponsive,
@@ -197,17 +179,14 @@ export default class DropBox extends React.Component {
       isRestrictScroll
     } = this.props;
     let windowWidth,
-        mobileWidth = getLibraryConfig('mobileWidth'),
-        isModel = false;
-
+      mobileWidth = getLibraryConfig('mobileWidth'),
+      isModel = false;
     if (needResponsive) {
       windowWidth = window.innerWidth;
-
       if (windowWidth <= mobileWidth) {
         isModel = true;
       }
     }
-
     const zIndexStyle = isActive && needAutoZindex ? {
       zIndex: this.getNextIndex()
     } : {};
@@ -234,12 +213,10 @@ export default class DropBox extends React.Component {
       onClick: this.onFreezeClick
     }) : null, dropBoxEle)) : dropBoxEle;
   }
-
 }
 DropBox.propTypes = propTypes;
 DropBox.contextType = LibraryContext;
 DropBox.defaultProps = defaultProps;
-
 if (false) {
   DropBox.docs = {
     componentGroup: 'Atom',

package/es/DropBox/DropBox.module.css

@@ -28,8 +28,7 @@
   padding: var(--dropbox_padding);
   box-shadow: var(--dropbox_box_shadow);
 }
-.defaultPalette,
-.darkPalette {
+.defaultPalette, .darkPalette {
   background-color: var(--dropbox_bg_color);
 }
 .radius {
@@ -84,11 +83,13 @@
 .bottom_shadow {
   --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
-.defaultShadow {
+[dir=ltr] .defaultShadow {
   box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
+[dir=rtl] .defaultShadow {
+  box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
 /* box direction styles */
-/*rtl:begin:ignore*/
 .topStart {
   bottom: 100%;
   right: 0;
@@ -272,7 +273,6 @@
   bottom: var(--zd_size28);
   transform: rotate(-90deg) translateX(-50%);
 }
-/*rtl:end:ignore*/
 .hidden {
   visibility: hidden;
   opacity: 0;
@@ -282,7 +282,10 @@
 .hidden .subContainer {
   box-shadow: none;
 }
-.animationBasic {
+[dir=ltr] .animationBasic {
+  animation-duration: var(--zd_transition2);
+}
+[dir=rtl] .animationBasic {
   animation-duration: var(--zd_transition2);
 }
 .fadeIn {
@@ -291,11 +294,24 @@
 }
 .bounce {
   composes: animationBasic;
+}
+[dir=ltr] .bounce {
+  animation-name: animation;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
+}
+[dir=rtl] .bounce {
   animation-name: animation;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
 .slideUp {
   composes: modeForward from '../common/animation.module.css';
+}
+[dir=ltr] .slideUp {
+  animation-duration: var(--zd_transition3);
+  animation-name: slideUp;
+  animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
+}
+[dir=rtl] .slideUp {
   animation-duration: var(--zd_transition3);
   animation-name: slideUp;
   animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1);
@@ -325,16 +341,23 @@
 .responsive {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 100%;
   max-height: 90%;
 }
 
+[dir=ltr] .responsive {
+  left: 0;
+}
+
+[dir=rtl] .responsive {
+  right: 0;
+}
+
 .closeBar {
   height: 6px;
+  width: 20%;
   border-radius: 5px;
   background-color: var(--dropbox_mob_close_bg_color);
-  width: 20%;
   cursor: pointer;
   margin: 0 auto var(--zd_size10);
 }
@@ -346,19 +369,32 @@
 }
 .activateInDelay {
   composes: modeForward from '../common/animation.module.css';
+  pointer-events: none;
+}
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+[dir=rtl] .activateInDelay {
   animation-duration: var(--zd_transition1);
   animation-delay: var(--zd_transition2);
-  pointer-events: none;
   animation-name: activateInDelay;
 }
 .freezeLayer {
   position: absolute;
   top: 0;
-  left: 0;
   bottom: 0;
-  right: 0;
   composes: activateInDelay;
 }
+[dir=ltr] .freezeLayer {
+  left: 0;
+  right: 0;
+}
+[dir=rtl] .freezeLayer {
+  right: 0;
+  left: 0;
+}
 .freeze {
   composes: varClass;
   background: var(--dropbox_mob_bg_color);

package/es/DropBox/docs/DropBox__custom.docs.js

@@ -4,31 +4,31 @@ import styles from '../../common/docStyle.module.css';
 export default class DropBox__custom extends Component {
   render() {
     let style = {
-      height: '80px',
-      width: '100px',
-      position: 'relative',
-      display: 'inline-block',
-      background: '#e6e5e5',
-      fontSize: '14px'
-    },
-        boxstyle = {
-      height: '100px',
-      textAlign: 'center',
-      fontSize: 'var(--zd_size20)'
-    },
-        containerStyle = {
-      display: 'inline-block',
-      verticalAlign: 'top',
-      width: 'calc(33.3333333% - 300px)',
-      marginBottom: '150px',
-      marginLeft: '275px'
-    },
-        dropBoxStyle = {
-      display: 'flex',
-      flexWrap: 'wrap',
-      flexDirection: 'row',
-      justifyContent: 'right'
-    };
+        height: '80px',
+        width: '100px',
+        position: 'relative',
+        display: 'inline-block',
+        background: '#e6e5e5',
+        fontSize: '14px'
+      },
+      boxstyle = {
+        height: '100px',
+        textAlign: 'center',
+        fontSize: 'var(--zd_size20)'
+      },
+      containerStyle = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: 'calc(33.3333333% - 300px)',
+        marginBottom: '150px',
+        marginLeft: '275px'
+      },
+      dropBoxStyle = {
+        display: 'flex',
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        justifyContent: 'right'
+      };
     let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -53,9 +53,7 @@ export default class DropBox__custom extends Component {
       style: boxstyle
     }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
   }
-
 }
-
 if (false) {
   DropBox__custom.docs = {
     componentGroup: 'Atom',

package/es/DropBox/docs/DropBox__customOrder.docs.js

@@ -1,20 +1,17 @@
 import React, { Component, Fragment } from 'react';
 import Popup from '../../Popup/Popup';
 import DropBox from '../DropBox';
-
 class DropBox__customOrderComp extends Component {
   constructor(props) {
     super(props);
     this.togglePopup = this.togglePopup.bind(this);
   }
-
   togglePopup(e) {
     let {
       togglePopup
     } = this.props;
     togglePopup && togglePopup(e, 'bottomLeftToRight');
   }
-
   render() {
     let layoutStyle = {
       padding: 20
@@ -70,16 +67,13 @@ class DropBox__customOrderComp extends Component {
       "data-portal": "portal1"
     }));
   }
-
 }
-
 DropBox__customOrderComp.displayName = 'DropBox__customOrder';
 let DropBox__customOrder = Popup(DropBox__customOrderComp);
 DropBox__customOrder.defaultProps = {
   isAbsolutePositioningNeeded: false,
   customOrder: ['bottomCenter', 'bottomLeftToRight', 'bottomRightToLeft', 'topLeftToRight', 'topRightToLeft', 'rightCenter', 'rightBottomToTop', 'leftTopToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop']
 };
-
 if (false) {
   DropBox__customOrder.docs = {
     componentGroup: 'Atom',
@@ -88,5 +82,4 @@ if (false) {
     description: ' '
   };
 }
-
 export default DropBox__customOrder;

package/es/DropBox/docs/DropBox__fixedPosition.docs.js

@@ -1,20 +1,17 @@
 import React, { Component, Fragment } from 'react';
 import Popup from '../../Popup/Popup';
 import DropBox from '../DropBox';
-
 class DropBox__fixedPositionComp extends Component {
   constructor(props) {
     super(props);
     this.togglePopup = this.togglePopup.bind(this);
   }
-
   togglePopup(e) {
     let {
       togglePopup
     } = this.props;
     togglePopup && togglePopup(e);
   }
-
   render() {
     let layoutStyle = {
       padding: 20
@@ -70,15 +67,12 @@ class DropBox__fixedPositionComp extends Component {
       "data-portal": "portal1"
     }));
   }
-
 }
-
 DropBox__fixedPositionComp.displayName = 'DropBox__fixedPosition';
 let DropBox__fixedPosition = Popup(DropBox__fixedPositionComp);
 DropBox__fixedPosition.defaultProps = {
   isAbsolutePositioningNeeded: false
 };
-
 if (false) {
   DropBox__fixedPosition.docs = {
     componentGroup: 'Atom',
@@ -87,5 +81,4 @@ if (false) {
     description: ' '
   };
 }
-
 export default DropBox__fixedPosition;

package/es/DropBox/docs/DropBox__position.docs.js

@@ -3,41 +3,41 @@ import DropBox from '../DropBox';
 export default class DropBox__position extends Component {
   render() {
     let style = {
-      height: '80px',
-      width: '100px',
-      position: 'relative',
-      display: 'inline-block',
-      background: '#e6e5e5',
-      fontSize: '14px'
-    },
-        boxstyle = {
-      height: '100px',
-      listStyleType: 'none',
-      padding: '5px 10px',
-      margin: 0
-    },
-        direction = {
-      display: 'flex',
-      flexDirection: 'column'
-    },
-        position = {
-      display: 'flex',
-      justifyContent: 'space-around',
-      height: '300px',
-      alignItems: 'center'
-    },
-        containerStyle = {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-        title = {
-      fontSize: '25px',
-      color: 'rgba(0, 0, 0, 0.7)',
-      textAlign: 'center',
-      padding: '0 15px',
-      margin: '15px 0'
-    };
+        height: '80px',
+        width: '100px',
+        position: 'relative',
+        display: 'inline-block',
+        background: '#e6e5e5',
+        fontSize: '14px'
+      },
+      boxstyle = {
+        height: '100px',
+        listStyleType: 'none',
+        padding: '5px 10px',
+        margin: 0
+      },
+      direction = {
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      position = {
+        display: 'flex',
+        justifyContent: 'space-around',
+        height: '300px',
+        alignItems: 'center'
+      },
+      containerStyle = {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      title = {
+        fontSize: '25px',
+        color: 'rgba(0, 0, 0, 0.7)',
+        textAlign: 'center',
+        padding: '0 15px',
+        margin: '15px 0'
+      };
     let directions = [{
       direction: 'Bottom',
       position: ['bottomLeft', 'bottomCenter', 'bottomRight']
@@ -74,9 +74,7 @@ export default class DropBox__position extends Component {
       }, /*#__PURE__*/React.createElement("li", null, "boxPosition - ", boxPos)))));
     })))));
   }
-
 }
-
 if (false) {
   DropBox__position.docs = {
     componentGroup: 'Atom',

package/es/DropBox/docs/DropBox__size.docs.js

@@ -3,34 +3,34 @@ import DropBox from '../DropBox';
 export default class DropBox__size extends Component {
   render() {
     let style = {
-      height: '80px',
-      width: '100px',
-      position: 'relative',
-      display: 'inline-block',
-      background: '#e6e5e5',
-      fontSize: '14px'
-    },
-        boxstyle = {
-      height: '100px',
-      textAlign: 'center',
-      fontSize: 'var(--zd_size20)',
-      listStyleType: 'none',
-      padding: 0,
-      margin: 0
-    },
-        containerStyle = {
-      display: 'inline-block',
-      verticalAlign: 'top',
-      width: 'calc(33.3333333% - 300px)',
-      marginBottom: '150px',
-      marginLeft: '275px'
-    },
-        dropBoxStyle = {
-      display: 'flex',
-      flexWrap: 'wrap',
-      flexDirection: 'row',
-      justifyContent: 'right'
-    };
+        height: '80px',
+        width: '100px',
+        position: 'relative',
+        display: 'inline-block',
+        background: '#e6e5e5',
+        fontSize: '14px'
+      },
+      boxstyle = {
+        height: '100px',
+        textAlign: 'center',
+        fontSize: 'var(--zd_size20)',
+        listStyleType: 'none',
+        padding: 0,
+        margin: 0
+      },
+      containerStyle = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: 'calc(33.3333333% - 300px)',
+        marginBottom: '150px',
+        marginLeft: '275px'
+      },
+      dropBoxStyle = {
+        display: 'flex',
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        justifyContent: 'right'
+      };
     let sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'default'];
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -48,9 +48,7 @@ export default class DropBox__size extends Component {
       style: boxstyle
     }, /*#__PURE__*/React.createElement("li", null, "DropBox"), /*#__PURE__*/React.createElement("li", null, "Size - ", size)))))));
   }
-
 }
-
 if (false) {
   DropBox__size.docs = {
     componentGroup: 'Atom',

package/es/DropDown/DropDown.js

@@ -3,6 +3,7 @@ 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 {
@@ -12,17 +13,14 @@ 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 (false) {
   DropDown.docs = {
     componentGroup: 'Form Elements',
     folderName: 'Style Guide'
   };
 }
-
 export class DropDownTarget extends React.Component {
   render() {
     let {
@@ -30,7 +28,6 @@ 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 {
@@ -40,7 +37,6 @@ 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 {
@@ -49,21 +45,18 @@ 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,
@@ -76,7 +69,6 @@ export class DropDownItemContainer extends React.Component {
       "data-id": dataId
     }, children);
   }
-
 }
 DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
 DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/DropDown/DropDownHeading.js

@@ -22,15 +22,13 @@ export default class DropDownHeading extends React.Component {
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,
-      id: htmlId // tabindex='0'
-
+      id: htmlId
+      // tabindex='0'
     }, text, children);
   }
-
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
 DropDownHeading.defaultProps = DropDownHeading_defaultProps;
-
 if (false) {
   DropDownHeading.docs = {
     componentGroup: 'Form Elements',