@zohodesk/components 1.0.0-test-252 → 1.0.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/__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);
+  max-height: var(--zd_size220) ;
   composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4);
+  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'
+//   };
+// }

package/es/DropDown/DropDownHeading.module.css

@@ -7,7 +7,7 @@
 
   /* dropdownheading underline default variables */
   --dropdownheading_underline_width: var(--zd_size20);
-  --dropdownheading_underline_height: 1px;
+  --dropdownheading_underline_height: var(--zd_size1);
   --dropdownheading_underline_bg_color: var(--zdt_dropdown_default_bg);
   --dropdownheading_underline_left: var(--zd_size20);
 }
@@ -15,7 +15,7 @@
   composes: dotted semibold from '../common/common.module.css';
   composes: varClass;
   position: relative;
-  font-size: var(--zd_font_size11);
+  font-size: var(--zd_font_size11) ;
   letter-spacing: 0.6px;
   text-transform: var(--dropdownheading_text_transform);
   color: var(--dropdownheading_text_color);
@@ -25,7 +25,7 @@
 .default::after {
   position: absolute;
   content: '';
-  bottom: var(--zd_size2);
+  bottom: var(--zd_size2) ;
   width: var(--dropdownheading_underline_width);
   height: var(--dropdownheading_underline_height);
 }

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,
@@ -53,7 +58,8 @@ export default class DropDownItem extends React.Component {
       onClick: this.onClick,
       onMouseOver: this.onHover,
       ref: this.getRef,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, children && children[0] ? /*#__PURE__*/React.createElement("span", {
       className: style.children
     }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {
@@ -64,6 +70,7 @@ export default class DropDownItem extends React.Component {
       className: style.user
     }, " ", children[1], " ") : '');
   }
+
 }
 DropDownItem.propTypes = DropDownItem_propTypes;
 DropDownItem.defaultProps = DropDownItem_defaultProps;

package/es/DropDown/DropDownItem.module.css

@@ -19,7 +19,7 @@
   composes: dflex alignVertical from '../common/common.module.css';
   position: relative;
   color: var(--zdt_dropdown_default_text);
-  font-size: var(--zd_font_size13);
+  font-size: var(--zd_font_size13) ;
   padding: var(--dropdownitem-padding);
   border-style: solid;
   border-color: var(--dropdownitem-border-color);
@@ -42,7 +42,7 @@
 }
 
 [dir=ltr] .padding {
-  --dropdownitem-padding: 0 var(--zd_size50) 0 0/*rtl: 0 0 0 var(--zd_size50)*/;
+  --dropdownitem-padding: 0 var(--zd_size50) 0 0;
 }
 
 [dir=rtl] .padding {
@@ -51,15 +51,15 @@
 
 .children {
   display: inline-block;
-  font-size: 0;
+  font-size: 0 ;
 }
 
 [dir=ltr] .children {
-  margin-right: var(--zd_size10);
+  margin-right: var(--zd_size10) ;
 }
 
 [dir=rtl] .children {
-  margin-left: var(--zd_size10);
+  margin-left: var(--zd_size10) ;
 }
 
 .value {
@@ -69,8 +69,8 @@
 .user {
   composes: dflex alignVertical alignHorizontal from '../common/common.module.css';
   position: absolute;
-  top: 0;
-  bottom: 0;
+  top: 0 ;
+  bottom: 0 ;
   opacity: 0;
   visibility: hidden;
   width: var(--dropdownitem-user-width);
@@ -81,11 +81,11 @@
 }
 
 [dir=ltr] .user {
-  right: 0;
+  right: 0 ;
 }
 
 [dir=rtl] .user {
-  left: 0;
+  left: 0 ;
 }
 
 .list:hover .user {

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/DropDownSeparator.module.css

@@ -1,7 +1,7 @@
 .separator {
-  height: var(--zd_size1);
+  height: var(--zd_size1) ;
   border-width: 0 0 1px 0;
   border-style: solid;
   border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0;
+  margin: var(--zd_size5) 0 ;
 }

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/DropDown/index.js

@@ -0,0 +1,7 @@
+export { default as DropDown } from './DropDown';
+export { DropDownTarget } from './DropDown';
+export { DropDownItemContainer } from './DropDown';
+export { default as DropDownHeading } from './DropDownHeading';
+export { default as DropDownItem } from './DropDownItem';
+export { default as DropDownSearch } from './DropDownSearch';
+export { default as DropDownSeparator } from './DropDownSeparator';

package/es/DropDown/props/defaultProps.js

@@ -5,7 +5,9 @@ export const DropDownHeading_defaultProps = {
   customClass: '',
   children: null,
   palette: 'light',
-  a11y: {}
+  a11y: {},
+  dataId: 'DropDownHeading',
+  dataSelectorId: 'dropdownHeading'
 };
 export const DropDownItem_defaultProps = {
   active: false,

package/es/DropDown/props/propTypes.js

@@ -38,7 +38,8 @@ export const DropDownHeading_propTypes = {
   htmlId: PropTypes.string,
   a11y: PropTypes.shape({
     role: PropTypes.string,
-    ariaLabelledby: PropTypes.string
+    ariaLabelledby: PropTypes.string,
+    ariaLabel: PropTypes.string
   })
 };
 export const DropDownItem_propTypes = {

package/es/Heading/Heading.js

@@ -20,15 +20,16 @@ export default class Heading extends React.Component {
       onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
+      'data-test-id': dataId,
       ...a11y
     }, title);
   }
+
 }
 Heading.propTypes = propTypes;
-Heading.defaultProps = defaultProps;
-if (false) {
-  Heading.docs = {
-    folderName: 'Style Guide',
-    componentGroup: 'Accessibility'
-  };
-}
+Heading.defaultProps = defaultProps; // if (__DOCS__) {
+//   Heading.docs = {
+//     folderName: 'Style Guide',
+//     componentGroup: 'Accessibility'
+//   };
+// }

package/es/Heading/Heading.module.css

@@ -1,5 +1,5 @@
 .reset {
-  font-size: initial;
+  font-size: initial ;
   font-weight: initial;
-  margin: initial;
+  margin: initial ;
 }

package/es/Label/Label.js

@@ -18,8 +18,10 @@ export default class Label extends React.Component {
       title,
       onClick,
       dataId,
+      dataSelectorId,
       variant,
-      customClass
+      customClass,
+      id
     } = this.props;
     return /*#__PURE__*/React.createElement("label", {
       className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
@@ -27,15 +29,18 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
-      onClick: onClick
+      "data-test-id": dataId,
+      "data-selector-id": dataSelectorId,
+      onClick: onClick,
+      id: id
     }, text);
   }
+
 }
 Label.defaultProps = defaultProps;
-Label.propTypes = propTypes;
-if (false) {
-  Label.docs = {
-    componentGroup: 'Form Elements',
-    folderName: 'Style Guide'
-  };
-}
+Label.propTypes = propTypes; // if (__DOCS__) {
+//   Label.docs = {
+//     componentGroup: 'Form Elements',
+//     folderName: 'Style Guide'
+//   };
+// }