@zohodesk/components 1.0.0-test-252 → 1.1.0

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -0,0 +1,54 @@
+import { remConvert } from '../../utils/Common';
+export default function useDropboxPosCalc(props) {
+  let {
+    right,
+    left,
+    top,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    bottom,
+    isModel,
+    direction
+  } = props;
+  const unit = 'rem';
+  let boxstyle = {};
+  let arrowstyle = {};
+  const needBoxStyle = right || left || top || bottom;
+  const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
+
+  if (needBoxStyle) {
+    boxstyle = !isModel ? direction === 'rtl' ? {
+      right: [remConvert(left)] + unit,
+      left: [remConvert(right)] + unit,
+      top: [remConvert(top)] + unit,
+      bottom: [remConvert(bottom)] + unit
+    } : {
+      right: [remConvert(right)] + unit,
+      left: [remConvert(left)] + unit,
+      top: [remConvert(top)] + unit,
+      bottom: [remConvert(bottom)] + unit
+    } : {};
+  }
+
+  if (needArrowStyle) {
+    arrowstyle = !isModel ? direction === 'rtl' ? {
+      right: [remConvert(arrowLeft)] + unit,
+      left: [remConvert(arrowRight)] + unit,
+      top: [remConvert(arrowTop)] + unit,
+      bottom: [remConvert(arrowBottom)] + unit
+    } : {
+      right: [remConvert(arrowRight)] + unit,
+      left: [remConvert(arrowLeft)] + unit,
+      top: [remConvert(arrowTop)] + unit,
+      bottom: [remConvert(arrowBottom)] + unit
+    } : {};
+  }
+
+  return {
+    needBoxStyle,
+    boxstyle,
+    arrowstyle
+  };
+}

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

@@ -0,0 +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;
+  }
+}

package/es/DropBox/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+import { useZIndex } from '../../Provider/ZindexProvider';
+export default function cssJSLogic(props) {
+  const {
+    isActive,
+    needAutoZindex
+  } = props;
+  const zIndex = useZIndex();
+  const zIndexStyle = isActive && needAutoZindex ? {
+    zIndex: zIndex()
+  } : {};
+  return {
+    zIndexStyle
+  };
+}

package/es/DropBox/props/defaultProps.js

@@ -1,20 +1,14 @@
+import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
 export const defaultProps = {
-  animationStyle: 'default',
-  boxPosition: 'bottomLeft',
-  dataId: 'dropBox',
-  isActive: false,
-  isAnimate: false,
-  isArrow: true,
-  isRadius: true,
-  size: 'default',
   needResponsive: true,
+  portalId: 'portal1',
+  isActive: false,
   isAbsolutePositioningNeeded: true,
-  isBoxPaddingNeed: false,
-  isPadding: true,
-  customClass: {},
-  a11y: {},
-  palette: 'default',
+  isRestrictScroll: false,
+  needFocusScope: false,
   needAutoZindex: true,
-  portalId: 'portal1',
-  isRestrictScroll: false
+  customProps: {}
+};
+export const DropBoxDefaultProps = { ...DropBoxElementDefaultProps,
+  ...defaultProps
 };

package/es/DropBox/props/propTypes.js

@@ -1,47 +1,15 @@
 import PropTypes from 'prop-types';
+import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
 export const propTypes = {
-  animationStyle: PropTypes.oneOf(['default', 'bounce']),
-  arrowBottom: PropTypes.number,
-  arrowLeft: PropTypes.number,
-  arrowPosition: PropTypes.oneOf(['start', 'mid', 'end']),
-  arrowRight: PropTypes.number,
-  arrowTop: PropTypes.number,
-  bottom: PropTypes.number,
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  children: PropTypes.element,
-  dataId: PropTypes.string,
-  forwardRef: PropTypes.object,
-  getRef: PropTypes.func,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isAnimate: PropTypes.bool,
-  isArrow: PropTypes.bool,
-  isBoxPaddingNeed: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isRadius: PropTypes.bool,
-  left: PropTypes.number,
   needResponsive: PropTypes.bool,
-  onClick: PropTypes.func,
-  right: PropTypes.number,
-  size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
-  top: PropTypes.number,
-  tourId: PropTypes.string,
-  htmlId: PropTypes.string,
-  tabIndex: PropTypes.number,
-  customClass: PropTypes.shape({
-    customDropBox: PropTypes.string,
-    customMobileDropBox: PropTypes.string,
-    customDropBoxWrap: PropTypes.string,
-    customMobileDropBoxWrap: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaMultiselectable: PropTypes.bool,
-    ariaLabelledby: PropTypes.string
-  }),
-  palette: PropTypes.oneOf(['default', 'dark']),
-  needAutoZindex: PropTypes.bool,
   portalId: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
-  customStyle: PropTypes.object
+  needFocusScope: PropTypes.bool,
+  needAutoZindex: PropTypes.bool,
+  customProps: PropTypes.object
+};
+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,14 +12,15 @@ 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'
-  };
-}
+DropDown.propTypes = DropDown_propTypes; // if (__DOCS__) {
+//   DropDown.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }
+
 export class DropDownTarget extends React.Component {
   render() {
     let {
@@ -28,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 {
@@ -37,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 {
@@ -45,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,
@@ -66,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: var(--zd_size220);
-  composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4);
-}
+.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

@@ -11,27 +11,34 @@ export default class DropDownHeading extends React.Component {
       customClass,
       palette,
       htmlId,
-      a11y
+      a11y,
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       role,
-      ariaLabelledby
+      ariaLabelledby,
+      ariaLabel
     } = a11y;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style[palette]} ${customClass}`,
       "data-title": title,
       role: role,
       "aria-labelledby": ariaLabelledby,
-      id: htmlId
-      // tabindex='0'
+      "aria-label": ariaLabel,
+      id: htmlId,
+      "data-id": dataId,
+      "data-test-id": dataId,
+      "data-selector-id": dataSelectorId // tabindex='0'
+
     }, text, children);
   }
+
 }
 DropDownHeading.propTypes = DropDownHeading_propTypes;
-DropDownHeading.defaultProps = DropDownHeading_defaultProps;
-if (false) {
-  DropDownHeading.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+DropDownHeading.defaultProps = DropDownHeading_defaultProps; // if (__DOCS__) {
+//   DropDownHeading.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }