@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-165

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

@@ -40,8 +40,7 @@ export default function cssJSLogic(_ref) {
     customDropBoxWrap = '',
     customMobileDropBoxWrap = ''
   } = customClass;
-
-  // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
+  const animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
   let boxClassName = compileClassNames({
     [style.main]: true,
@@ -66,21 +65,24 @@ export default function cssJSLogic(_ref) {
     [style[`${boxDirection}_shadow`]]: !isModel,
     [style.boxPadding]: !isModel && isBoxPaddingNeed,
     [style.radius]: !isModel && isRadius,
-    [style.fadeIn]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default',
-    [style.bounce]: !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'
+    [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/props/propTypes.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 export const DropBoxElementPropTypes = {
-  animationStyle: PropTypes.oneOf(['default', 'bounce']),
+  animationStyle: PropTypes.oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
   arrowBottom: PropTypes.number,
   arrowLeft: PropTypes.number,
   arrowPosition: PropTypes.oneOf(['start', 'mid', 'end']),

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/DropBoxPositionMapping.json

@@ -1,145 +1,145 @@
-{
-    "positionMapping": {
-        "bottomCenter": {
-            "direction": "bottom",
-            "arrowPosition": "mid",
-            "positionStyle": "bottomMid"
-        },
-        "bottomLeftToRight": {
-            "direction": "bottom",
-            "arrowPosition": "start",
-            "positionStyle": "bottomEnd"
-        },
-        "bottomCenterToRight": {
-            "direction": "bottom",
-            "arrowPosition": "start",
-            "positionStyle": "bottomEnd"
-        },
-        "bottomRightToLeft": {
-            "direction": "bottom",
-            "arrowPosition": "end",
-            "positionStyle": "bottomStart"
-        },
-        "bottomCenterToLeft": {
-            "direction": "bottom",
-            "arrowPosition": "end",
-            "positionStyle": "bottomStart"
-        },
-        "topCenter": {
-            "direction": "top",
-            "arrowPosition": "mid",
-            "positionStyle": "topMid"
-        },
-        "topLeftToRight": {
-            "direction": "top",
-            "arrowPosition": "start",
-            "positionStyle": "topEnd"
-        },
-        "topCenterToRight": {
-            "direction": "top",
-            "arrowPosition": "start",
-            "positionStyle": "topEnd"
-        },
-        "topRightToLeft": {
-            "direction": "top",
-            "arrowPosition": "end",
-            "positionStyle": "topStart"
-        },
-        "topCenterToLeft": {
-            "direction": "top",
-            "arrowPosition": "end",
-            "positionStyle": "topStart"
-        },
-        "rightCenter": {
-            "direction": "right",
-            "arrowPosition": "mid",
-            "positionStyle": "rightMid"
-        },
-        "rightTopToBottom": {
-            "direction": "right",
-            "arrowPosition": "start",
-            "positionStyle": "rightEnd"
-        },
-        "rightCenterToBottom": {
-            "direction": "right",
-            "arrowPosition": "start",
-            "positionStyle": "rightEnd"
-        },
-        "rightBottomToTop": {
-            "direction": "right",
-            "arrowPosition": "end",
-            "positionStyle": "rightStart"
-        },
-        "rightCenterToTop": {
-            "direction": "right",
-            "arrowPosition": "end",
-            "positionStyle": "rightStart"
-        },
-        "leftCenter": {
-            "direction": "left",
-            "arrowPosition": "mid",
-            "positionStyle": "leftMid"
-        },
-        "leftTopToBottom": {
-            "direction": "left",
-            "arrowPosition": "start",
-            "positionStyle": "leftEnd"
-        },
-        "leftCenterToBottom": {
-            "direction": "left",
-            "arrowPosition": "start",
-            "positionStyle": "leftEnd"
-        },
-        "leftBottomToTop": {
-            "direction": "left",
-            "arrowPosition": "end",
-            "positionStyle": "leftStart"
-        },
-        "leftCenterToTop": {
-            "direction": "left",
-            "arrowPosition": "end",
-            "positionStyle": "leftStart"
-        },
-        "bottomRight": {
-            "direction": "bottom",
-            "arrowPosition": "start",
-            "positionStyle": "bottomEnd"
-        },
-        "bottomLeft": {
-            "direction": "bottom",
-            "arrowPosition": "end",
-            "positionStyle": "bottomStart"
-        },
-        "topRight": {
-            "direction": "top",
-            "arrowPosition": "start",
-            "positionStyle": "topEnd"
-        },
-        "topLeft": {
-            "direction": "top",
-            "arrowPosition": "end",
-            "positionStyle": "topStart"
-        },
-        "rightBottom": {
-            "direction": "right",
-            "arrowPosition": "start",
-            "positionStyle": "rightEnd"
-        },
-        "rightTop": {
-            "direction": "right",
-            "arrowPosition": "end",
-            "positionStyle": "rightStart"
-        },
-        "leftBottom": {
-            "direction": "left",
-            "arrowPosition": "start",
-            "positionStyle": "leftEnd"
-        },
-        "leftTop": {
-            "direction": "left",
-            "arrowPosition": "end",
-            "positionStyle": "leftStart"
-        }
-    }
-}
+{
+    "positionMapping": {
+        "bottomCenter": {
+            "direction": "bottom",
+            "arrowPosition": "mid",
+            "positionStyle": "bottomMid"
+        },
+        "bottomLeftToRight": {
+            "direction": "bottom",
+            "arrowPosition": "start",
+            "positionStyle": "bottomEnd"
+        },
+        "bottomCenterToRight": {
+            "direction": "bottom",
+            "arrowPosition": "start",
+            "positionStyle": "bottomEnd"
+        },
+        "bottomRightToLeft": {
+            "direction": "bottom",
+            "arrowPosition": "end",
+            "positionStyle": "bottomStart"
+        },
+        "bottomCenterToLeft": {
+            "direction": "bottom",
+            "arrowPosition": "end",
+            "positionStyle": "bottomStart"
+        },
+        "topCenter": {
+            "direction": "top",
+            "arrowPosition": "mid",
+            "positionStyle": "topMid"
+        },
+        "topLeftToRight": {
+            "direction": "top",
+            "arrowPosition": "start",
+            "positionStyle": "topEnd"
+        },
+        "topCenterToRight": {
+            "direction": "top",
+            "arrowPosition": "start",
+            "positionStyle": "topEnd"
+        },
+        "topRightToLeft": {
+            "direction": "top",
+            "arrowPosition": "end",
+            "positionStyle": "topStart"
+        },
+        "topCenterToLeft": {
+            "direction": "top",
+            "arrowPosition": "end",
+            "positionStyle": "topStart"
+        },
+        "rightCenter": {
+            "direction": "right",
+            "arrowPosition": "mid",
+            "positionStyle": "rightMid"
+        },
+        "rightTopToBottom": {
+            "direction": "right",
+            "arrowPosition": "start",
+            "positionStyle": "rightEnd"
+        },
+        "rightCenterToBottom": {
+            "direction": "right",
+            "arrowPosition": "start",
+            "positionStyle": "rightEnd"
+        },
+        "rightBottomToTop": {
+            "direction": "right",
+            "arrowPosition": "end",
+            "positionStyle": "rightStart"
+        },
+        "rightCenterToTop": {
+            "direction": "right",
+            "arrowPosition": "end",
+            "positionStyle": "rightStart"
+        },
+        "leftCenter": {
+            "direction": "left",
+            "arrowPosition": "mid",
+            "positionStyle": "leftMid"
+        },
+        "leftTopToBottom": {
+            "direction": "left",
+            "arrowPosition": "start",
+            "positionStyle": "leftEnd"
+        },
+        "leftCenterToBottom": {
+            "direction": "left",
+            "arrowPosition": "start",
+            "positionStyle": "leftEnd"
+        },
+        "leftBottomToTop": {
+            "direction": "left",
+            "arrowPosition": "end",
+            "positionStyle": "leftStart"
+        },
+        "leftCenterToTop": {
+            "direction": "left",
+            "arrowPosition": "end",
+            "positionStyle": "leftStart"
+        },
+        "bottomRight": {
+            "direction": "bottom",
+            "arrowPosition": "start",
+            "positionStyle": "bottomEnd"
+        },
+        "bottomLeft": {
+            "direction": "bottom",
+            "arrowPosition": "end",
+            "positionStyle": "bottomStart"
+        },
+        "topRight": {
+            "direction": "top",
+            "arrowPosition": "start",
+            "positionStyle": "topEnd"
+        },
+        "topLeft": {
+            "direction": "top",
+            "arrowPosition": "end",
+            "positionStyle": "topStart"
+        },
+        "rightBottom": {
+            "direction": "right",
+            "arrowPosition": "start",
+            "positionStyle": "rightEnd"
+        },
+        "rightTop": {
+            "direction": "right",
+            "arrowPosition": "end",
+            "positionStyle": "rightStart"
+        },
+        "leftBottom": {
+            "direction": "left",
+            "arrowPosition": "start",
+            "positionStyle": "leftEnd"
+        },
+        "leftTop": {
+            "direction": "left",
+            "arrowPosition": "end",
+            "positionStyle": "leftStart"
+        }
+    }
+}
   

package/es/DropBox/__tests__/DropBox.spec.js

@@ -58,7 +58,7 @@ describe('DropBox component', () => {
       isAnimate: true,
       isActive: true
     }));
-    let x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeIn');
+    let x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeInScale');
     expect(x.length).toBe(1);
   });
   it('Should check render proper class name(isAnimate & isActive)', () => {
@@ -67,7 +67,7 @@ describe('DropBox component', () => {
       isAnimate: true,
       isActive: true
     }));
-    let x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeIn');
+    let x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeInScale');
     expect(x.length).toBe(1);
   });
   it('Should check render proper class name(arrowPosition)', () => {

package/es/DropBox/css/DropBox.module.css

@@ -1,59 +1,59 @@
-.varClass {
-  /* dropbox default variables */
-  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
-  --dropbox_border_radius: 0;
-  --dropbox_padding: 0;
-  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
-
-  /* dropbox arrow default variables */
-  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
-
-  /* dropbox responsive default variables */
-  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
-  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
-}
-
-.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);
-  animation-name: activateInDelay;
-}
-
-.freezeLayer {
-  position: absolute;
-  top: 0;
-  bottom: 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);
-}
-
-@keyframes activateInDelay {
-  100% {
-    pointer-events: initial;
-  }
+.varClass {
+  /* dropbox default variables */
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_border_radius: 0;
+  --dropbox_padding: 0;
+  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+
+  /* dropbox arrow default variables */
+  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
+
+  /* dropbox responsive default variables */
+  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
+  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
+}
+
+.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);
+  animation-name: activateInDelay;
+}
+
+.freezeLayer {
+  position: absolute;
+  top: 0 ;
+  bottom: 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);
+}
+
+@keyframes activateInDelay {
+  100% {
+    pointer-events: initial;
+  }
 }

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,
@@ -68,9 +71,11 @@ export class DropDownItemContainer extends React.Component {
       className: style.listGroup,
       onScroll: this.onScroll,
       ref: this.getRef,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, children);
   }
+
 }
 DropDownItemContainer.propTypes = DropDownItemContainer_propTypes;
 DropDownItemContainer.defaultProps = DropDownItemContainer_defaultProps;

package/es/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
-.listGroup {
-  max-height: 220px;
-  composes: oflowy from '../common/common.module.css';
-  margin: 8px 0 4px;
-}
+.listGroup {
+  max-height: var(--zd_size220) ;
+  composes: oflowy from '../common/common.module.css';
+  margin: var(--zd_size8) 0 var(--zd_size4) ;
+}

package/es/DropDown/DropDownHeading.js

@@ -28,15 +28,15 @@ export default class DropDownHeading extends React.Component {
       "aria-label": ariaLabel,
       id: htmlId,
       "data-id": dataId,
-      "data-selector-id": dataSelectorId
-      // tabindex='0'
+      "data-test-id": dataId,
+      "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'