@zohodesk/components 1.0.0-test-252 → 1.0.0

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -0,0 +1,435 @@
+.main {
+    z-index: 3;
+    composes: varClass from '../../css/DropBox.module.css';
+}
+
+.container {
+    position: absolute;
+}
+
+.fixedContainer {
+    position: fixed;
+}
+
+.subContainer {
+    position: relative;
+    border-radius: var(--dropbox_border_radius);
+    padding: var(--dropbox_padding);
+    box-shadow: var(--dropbox_box_shadow);
+}
+
+.defaultPalette, .darkPalette {
+    background-color: var(--dropbox_bg_color);
+}
+
+.radius {
+    --dropbox_border_radius: 3px;
+}
+
+.mobRadius {
+    --dropbox_border_radius: 30px 30px 0 0;
+    --dropbox_padding: var(--zd_size10) 0 0 0;
+}
+
+/* sizes */
+.mini {
+    width: var(--zd_size140) ;
+}
+
+.xmini {
+    width: var(--zd_size160) ;
+}
+
+.xsmall {
+    width: var(--zd_size180) ;
+}
+
+.small {
+    width: var(--zd_size200) ;
+}
+
+.medium {
+    width: var(--zd_size220) ;
+}
+
+.large {
+    width: var(--zd_size260) ;
+}
+
+.mlarge {
+    width: var(--zd_size280) ;
+}
+
+.xlarge {
+    width: var(--zd_size304) ;
+}
+
+.xxlarge {
+    width: var(--zd_size364) ;
+}
+
+.default {
+    width: 100% ;
+}
+
+/* shadow */
+.top_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
+}
+
+.left_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
+}
+
+.right_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
+}
+
+.bottom_shadow {
+    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+}
+
+.defaultShadow {
+    box-shadow: var(--zd_bs_dropbox_default);
+}
+
+/* box direction styles */
+.topStart {
+    bottom: 100% ;
+    right: 0 ;
+}
+
+.topEnd {
+    bottom: 100% ;
+    left: 0 ;
+}
+
+.topMid {
+    bottom: 100% ;
+    left: 50% ;
+    transform: translateX(-50%);
+}
+
+.bottomStart {
+    top: 100% ;
+    right: 0 ;
+}
+
+.bottomEnd {
+    top: 100% ;
+    left: 0 ;
+}
+
+.bottomMid {
+    top: 100% ;
+    left: 50% ;
+    transform: translateX(-50%);
+}
+
+.rightStart {
+    left: 100% ;
+    bottom: 0 ;
+}
+
+.rightEnd {
+    left: 100% ;
+    top: 0 ;
+}
+
+.rightMid {
+    left: 100% ;
+    top: 50% ;
+    transform: translateY(-50%);
+}
+
+.leftStart {
+    right: 100% ;
+    bottom: 0 ;
+}
+
+.leftEnd {
+    right: 100% ;
+    top: 0 ;
+}
+
+.leftMid {
+    right: 100% ;
+    top: 50% ;
+    transform: translateY(-50%);
+}
+
+/* space for arrow */
+.arrowtop {
+    padding-bottom: var(--zd_size10) ;
+}
+
+.arrowright {
+    padding-left: var(--zd_size10) ;
+}
+
+.arrowleft {
+    padding-right: var(--zd_size10) ;
+}
+
+.arrowbottom {
+    padding-top: var(--zd_size10) ;
+}
+
+/* space from target */
+.paddingSpace_top {
+    padding-bottom: var(--zd_size5) ;
+}
+
+.paddingSpace_right {
+    padding-left: var(--zd_size5) ;
+}
+
+.paddingSpace_left {
+    padding-right: var(--zd_size5) ;
+}
+
+.paddingSpace_bottom {
+    padding-top: var(--zd_size5) ;
+}
+
+.arrow {
+    position: absolute;
+    height: var(--zd_size34) ;
+    width: var(--zd_size34) ;
+    clip: rect(var(--zd_size3),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size29),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size17),
+ undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined undefined var(--zd_size8)) ;
+    padding: var(--zd_size4) ;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.arrowShape {
+    height: var(--zd_size10) ;
+    width: var(--zd_size10) ;
+    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    background-color: var(--dropbox_bg_color);
+    -webkit-transform: rotateZ(-45deg);
+    transform: rotateZ(-45deg);
+}
+
+/* arrow placement styles */
+.start,
+.end,
+.mid {
+    composes: arrow;
+}
+
+.top .start,
+.top .end,
+.top .mid {
+    bottom: calc( var(--zd_size17) * -1 ) ;
+}
+
+.top .start {
+    left: var(--zd_size28) ;
+}
+
+.top .end {
+    right: var(--zd_size28) ;
+    transform: rotate(180deg) translateX(-50%);
+}
+
+.top .mid {
+    left: 50% ;
+}
+
+.top .start,
+.top .mid {
+    transform: rotate(180deg) translateX(50%);
+}
+
+.bottom .start,
+.bottom .end,
+.bottom .mid {
+    top: calc( var(--zd_size17) * -1 ) ;
+}
+
+.bottom .start {
+    left: var(--zd_size28) ;
+}
+
+.bottom .mid {
+    left: 50% ;
+}
+
+.bottom .end {
+    right: var(--zd_size28) ;
+    transform: translateX(50%);
+}
+
+.bottom .mid,
+.bottom .start {
+    transform: translateX(-50%);
+}
+
+.left .start,
+.left .mid,
+.left .end {
+    right: calc( var(--zd_size17) * -1 ) ;
+}
+
+.left .start {
+    top: var(--zd_size28) ;
+}
+
+.left .end {
+    transform: rotate(90deg) translateX(50%);
+    bottom: var(--zd_size28) ;
+}
+
+.left .mid {
+    top: 50% ;
+}
+
+.left .start,
+.left .mid {
+    transform: rotate(90deg) translateX(-50%);
+}
+
+.right .start,
+.right .mid,
+.right .end {
+    left: calc( var(--zd_size17) * -1 ) ;
+}
+
+.right .start {
+    top: var(--zd_size28) ;
+}
+
+.right .mid {
+    top: 50% ;
+}
+
+.right .start,
+.right .mid {
+    transform: rotate(-90deg) translateX(50%);
+}
+
+.right .end {
+    bottom: var(--zd_size28) ;
+    transform: rotate(-90deg) translateX(-50%);
+}
+.hidden {
+    visibility: hidden;
+    opacity: 0;
+    z-index: 0;
+    pointer-events: none;
+}
+
+.hidden .subContainer {
+    box-shadow: none;
+}
+
+[dir=ltr] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+[dir=rtl] .animationBasic {
+    animation-duration: var(--zd_transition2);
+}
+
+.fadeInScale {
+    composes: animationBasic;
+    composes: fadeInScale modeForward from '../../../common/animation.module.css';
+}
+
+.fadeIn {
+    composes: animationBasic;
+    composes: fadeIn modeForward from '../../../common/animation.module.css';
+}
+.scaleIn {
+    composes: animationBasic;
+    composes: scaleIn from '../../../common/animation.module.css';
+}
+.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);
+}
+
+@keyframes animation {
+    0% {
+        transform: scaleY(0.6) perspective(1px);
+        opacity: 0;
+        transform-origin: top center;
+    }
+
+    100% {
+        transform-origin: top center;
+        opacity: 1;
+        transform: scaleY(1) perspective(1px);
+    }
+}
+
+@keyframes slideUp {
+    0% {
+        transform: translateY(90%) perspective(1px);
+    }
+
+    100% {
+        transform: translateY(0%) perspective(1px);
+    }
+}
+
+.responsive {
+    position: absolute;
+    bottom: 0 ;
+    width: 100% ;
+    max-height: 90% ;
+}
+
+[dir=ltr] .responsive {
+    left: 0 ;
+}
+
+[dir=rtl] .responsive {
+    right: 0 ;
+}
+
+.closeBar {
+  /*  Variable:Ignore  */
+    height: 6px;
+    width: 20% ;
+    border-radius: 5px;
+    background-color: var(--dropbox_mob_close_bg_color);
+    cursor: pointer;
+    margin: 0 auto var(--zd_size10) ;
+}
+
+.boxPadding {
+    --dropbox_padding: var(--zd_size10) 0;
+}
+
+.darkPalette {
+    --dropbox_bg_color: var(--zdt_dropbox_dark_bg);
+}

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

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = cssJSLogic;
+
+var _react = require("react");
+
+var _LibraryContextInit = _interopRequireDefault(require("../../../Provider/LibraryContextInit"));
+
+var _utils = require("../../../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function cssJSLogic(_ref) {
+  var _compileClassNames, _compileClassNames2;
+
+  var props = _ref.props,
+      style = _ref.style,
+      customState = _ref.customState;
+  var DropBoxElementContext = (0, _react.useContext)(_LibraryContextInit["default"]);
+  var boxPosition = customState.boxPosition,
+      boxDirection = customState.boxDirection,
+      boxstyle = customState.boxstyle,
+      needBoxStyle = customState.needBoxStyle,
+      isAbsolute = customState.isAbsolute;
+
+  var _ref2 = DropBoxElementContext || {},
+      isReducedMotion = _ref2.isReducedMotion;
+
+  var isAnimate = props.isAnimate,
+      isArrow = props.isArrow,
+      size = props.size,
+      isRadius = props.isRadius,
+      animationStyle = props.animationStyle,
+      isActive = props.isActive,
+      isModel = props.isModel,
+      isBoxPaddingNeed = props.isBoxPaddingNeed,
+      isPadding = props.isPadding,
+      customClass = props.customClass,
+      positionsOffset = props.positionsOffset,
+      targetOffset = props.targetOffset,
+      zIndexStyle = props.zIndexStyle,
+      customInlineStyle = props.customInlineStyle;
+  var _customClass$customDr = customClass.customDropBox,
+      customDropBox = _customClass$customDr === void 0 ? '' : _customClass$customDr,
+      _customClass$customMo = customClass.customMobileDropBox,
+      customMobileDropBox = _customClass$customMo === void 0 ? '' : _customClass$customMo,
+      _customClass$customDr2 = customClass.customDropBoxWrap,
+      customDropBoxWrap = _customClass$customDr2 === void 0 ? '' : _customClass$customDr2,
+      _customClass$customMo2 = customClass.customMobileDropBoxWrap,
+      customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
+  var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
+
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
+  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
+  var 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: boxClassName,
+    subContainerClass: subContainerClass,
+    inlineStyle: inlineStyle
+  };
+}

package/lib/DropBox/DropBoxElement/props/defaultProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropBoxElementDefaultProps = void 0;
+var DropBoxElementDefaultProps = {
+  animationStyle: 'default',
+  boxPosition: 'bottomLeft',
+  dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
+  isActive: false,
+  isAnimate: false,
+  isArrow: true,
+  isRadius: true,
+  size: 'default',
+  isAbsolutePositioningNeeded: true,
+  isBoxPaddingNeed: false,
+  isPadding: true,
+  customClass: {},
+  a11y: {},
+  palette: 'default',
+  customInlineStyle: false
+};
+exports.DropBoxElementDefaultProps = DropBoxElementDefaultProps;

package/lib/DropBox/DropBoxElement/props/propTypes.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropBoxElementPropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var DropBoxElementPropTypes = {
+  animationStyle: _propTypes["default"].oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
+  arrowBottom: _propTypes["default"].number,
+  arrowLeft: _propTypes["default"].number,
+  arrowPosition: _propTypes["default"].oneOf(['start', 'mid', 'end']),
+  arrowRight: _propTypes["default"].number,
+  arrowTop: _propTypes["default"].number,
+  bottom: _propTypes["default"].number,
+  boxPosition: _propTypes["default"].oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  children: _propTypes["default"].element,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
+  forwardRef: _propTypes["default"].object,
+  getRef: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  isArrow: _propTypes["default"].bool,
+  isBoxPaddingNeed: _propTypes["default"].bool,
+  isPadding: _propTypes["default"].bool,
+  isRadius: _propTypes["default"].bool,
+  left: _propTypes["default"].number,
+  onClick: _propTypes["default"].func,
+  right: _propTypes["default"].number,
+  size: _propTypes["default"].oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  top: _propTypes["default"].number,
+  tourId: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
+  tabIndex: _propTypes["default"].number,
+  customClass: _propTypes["default"].shape({
+    customDropBox: _propTypes["default"].string,
+    customMobileDropBox: _propTypes["default"].string,
+    customDropBoxWrap: _propTypes["default"].string,
+    customMobileDropBoxWrap: _propTypes["default"].string
+  }),
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaMultiselectable: _propTypes["default"].bool,
+    ariaLabelledby: _propTypes["default"].string
+  }),
+  palette: _propTypes["default"].oneOf(['default', 'dark']),
+  customStyle: _propTypes["default"].object,
+  customInlineStyle: _propTypes["default"].bool
+};
+exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = useDropboxPosCalc;
+
+var _Common = require("../../utils/Common");
+
+function useDropboxPosCalc(props) {
+  var right = props.right,
+      left = props.left,
+      top = props.top,
+      arrowRight = props.arrowRight,
+      arrowLeft = props.arrowLeft,
+      arrowTop = props.arrowTop,
+      arrowBottom = props.arrowBottom,
+      bottom = props.bottom,
+      isModel = props.isModel,
+      direction = props.direction;
+  var unit = 'rem';
+  var boxstyle = {};
+  var arrowstyle = {};
+  var needBoxStyle = right || left || top || bottom;
+  var needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
+
+  if (needBoxStyle) {
+    boxstyle = !isModel ? direction === 'rtl' ? {
+      right: [(0, _Common.remConvert)(left)] + unit,
+      left: [(0, _Common.remConvert)(right)] + unit,
+      top: [(0, _Common.remConvert)(top)] + unit,
+      bottom: [(0, _Common.remConvert)(bottom)] + unit
+    } : {
+      right: [(0, _Common.remConvert)(right)] + unit,
+      left: [(0, _Common.remConvert)(left)] + unit,
+      top: [(0, _Common.remConvert)(top)] + unit,
+      bottom: [(0, _Common.remConvert)(bottom)] + unit
+    } : {};
+  }
+
+  if (needArrowStyle) {
+    arrowstyle = !isModel ? direction === 'rtl' ? {
+      right: [(0, _Common.remConvert)(arrowLeft)] + unit,
+      left: [(0, _Common.remConvert)(arrowRight)] + unit,
+      top: [(0, _Common.remConvert)(arrowTop)] + unit,
+      bottom: [(0, _Common.remConvert)(arrowBottom)] + unit
+    } : {
+      right: [(0, _Common.remConvert)(arrowRight)] + unit,
+      left: [(0, _Common.remConvert)(arrowLeft)] + unit,
+      top: [(0, _Common.remConvert)(arrowTop)] + unit,
+      bottom: [(0, _Common.remConvert)(arrowBottom)] + unit
+    } : {};
+  }
+
+  return {
+    needBoxStyle: needBoxStyle,
+    boxstyle: boxstyle,
+    arrowstyle: arrowstyle
+  };
+}

package/lib/DropBox/__tests__/DropBox.spec.js

@@ -1,8 +1,11 @@
 "use strict";
 
 var _react = _interopRequireDefault(require("react"));
+
 var _DropBox = _interopRequireDefault(require("../DropBox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 var defaultProps = {
   onClick: jest.fn()
 };
@@ -25,8 +28,9 @@ describe('DropBox component', function () {
   });
   it('Should call onclick container function', function () {
     var _setup = setup(_DropBox["default"], defaultProps),
-      props = _setup.props,
-      renderedDOM = _setup.renderedDOM;
+        props = _setup.props,
+        renderedDOM = _setup.renderedDOM;
+
     var component = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'dropBox_subcontainer');
     TestUtils.Simulate.click(component);
     expect(props.onClick).toHaveBeenCalled();
@@ -60,7 +64,7 @@ describe('DropBox component', function () {
       isAnimate: true,
       isActive: true
     }));
-    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeIn');
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeInScale');
     expect(x.length).toBe(1);
   });
   it('Should check render proper class name(isAnimate & isActive)', function () {
@@ -69,7 +73,7 @@ describe('DropBox component', function () {
       isAnimate: true,
       isActive: true
     }));
-    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeIn');
+    var x = TestUtils.scryRenderedDOMComponentsWithClass(renderedDOM, 'fadeInScale');
     expect(x.length).toBe(1);
   });
   it('Should check render proper class name(arrowPosition)', function () {