@zohodesk/components 1.0.0-alpha-270 → 1.0.0-alpha-271

package/README.md

@@ -32,6 +32,18 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-271
+
+- **Tabs** - DropBox position RTL fix.
+
+- `stopPropagation` method added in common utils.
+
+- **DropBox** 
+  
+  cancelBubblingEffect fix.
+
+  `fadeIn` and `scaleIn` animations added.
+
 # 1.0.0-alpha-270
 
 - **Tabs** - DropBox position RTL fix

package/es/DropBox/DropBox.js

@@ -8,7 +8,7 @@ import cssJSLogic from './css/cssJSLogic';
 import DropBoxElement from './DropBoxElement/DropBoxElement';
 import { DropBoxDefaultProps } from './props/defaultProps';
 import { DropBoxPropTypes } from './props/propTypes';
-import { cancelBubblingEffect } from './../utils/Common';
+import { stopPropagation } from './../utils/Common';
 import style from './css/DropBox.module.css';
 export default function DropBox(props) {
   const focusRef = useRef(null);
@@ -62,13 +62,13 @@ export default function DropBox(props) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${style.freezeLayer} ${style.freeze}`,
     style: zIndexStyle,
-    onClick: cancelBubblingEffect
+    onClick: stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
     className: style.freezeLayer,
     style: zIndexStyle,
-    onClick: cancelBubblingEffect
+    onClick: stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;
 }
 DropBox.propTypes = DropBoxPropTypes;

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -26,14 +26,16 @@ export default function DropBoxElement(props) {
     tabIndex,
     palette,
     subContainerRef,
-    customStyle
+    customStyle,
+    animationStyle
   } = props;
   let isAbsolute = isAbsolutePositioningNeeded;
   const FireOnAnimationEnd = () => {
-    let element = subContainerRef && subContainerRef.current.classList;
-    (isAnimate ? style.fadeIn : style.bounce).split(' ').map(rmStyle => {
-      if (element && element.contains(rmStyle)) {
-        element.remove(rmStyle);
+    let eleClassList = subContainerRef && subContainerRef.current.classList;
+    let animationStyles = animationStyle == 'default' ? style.fadeInScale : style[animationStyle];
+    animationStyles.split(' ').map(rmStyle => {
+      if (eleClassList && eleClassList.contains(rmStyle)) {
+        eleClassList.remove(rmStyle);
       }
     });
   };
@@ -97,7 +99,7 @@ export default function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd
   }, /*#__PURE__*/React.createElement("div", {
     tabIndex: "-1",
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,

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

@@ -336,20 +336,26 @@
     animation-duration: var(--zd_transition2);
 }
 
-.fadeIn {
+.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);

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

@@ -40,6 +40,7 @@ export default function cssJSLogic(_ref) {
     customDropBoxWrap = '',
     customMobileDropBoxWrap = ''
   } = customClass;
+  const animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle;
 
   // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
@@ -66,8 +67,7 @@ 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) {

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/__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/Tab/Tabs.module.css

@@ -120,34 +120,16 @@
 .menuBox {
   max-height: 220px;
 }
-
-
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-}
-
-
-[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
-}
-
-
-[dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
-  left: calc(var(--tab_position_gap) * -1);
+  right: calc(var(--tab_position_gap) * -1); 
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-}
-
-[dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1);
-}
-
-[dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
-  right: calc(var(--tab_position_gap) * -1);
+  left: calc(var(--tab_position_gap) * -1); 
 }
 
 .hidden {

package/es/utils/Common.js

@@ -9,6 +9,10 @@ export const getTotalDimension = (elem, align) => {
   const style = window.getComputedStyle(elem);
   return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
 };
+export function stopPropagation(e) {
+  e && e.stopPropagation && e.stopPropagation();
+}
+;
 export const stopAllEventPropagation = e => {
   e.stopPropagation && e.stopPropagation();
   e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();

package/lib/DropBox/DropBox.js

@@ -68,13 +68,13 @@ function DropBox(props) {
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
     style: zIndexStyle,
-    onClick: _Common.cancelBubblingEffect
+    onClick: _Common.stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxModule["default"].freezeLayer,
     style: zIndexStyle,
-    onClick: _Common.cancelBubblingEffect
+    onClick: _Common.stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;
 }
 DropBox.propTypes = _propTypes.DropBoxPropTypes;

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -32,13 +32,15 @@ function DropBoxElement(props) {
     tabIndex = props.tabIndex,
     palette = props.palette,
     subContainerRef = props.subContainerRef,
-    customStyle = props.customStyle;
+    customStyle = props.customStyle,
+    animationStyle = props.animationStyle;
   var isAbsolute = isAbsolutePositioningNeeded;
   var FireOnAnimationEnd = function FireOnAnimationEnd() {
-    var element = subContainerRef && subContainerRef.current.classList;
-    (isAnimate ? _DropBoxElementModule["default"].fadeIn : _DropBoxElementModule["default"].bounce).split(' ').map(function (rmStyle) {
-      if (element && element.contains(rmStyle)) {
-        element.remove(rmStyle);
+    var eleClassList = subContainerRef && subContainerRef.current.classList;
+    var animationStyles = animationStyle == 'default' ? _DropBoxElementModule["default"].fadeInScale : _DropBoxElementModule["default"][animationStyle];
+    animationStyles.split(' ').map(function (rmStyle) {
+      if (eleClassList && eleClassList.contains(rmStyle)) {
+        eleClassList.remove(rmStyle);
       }
     });
   };
@@ -96,7 +98,7 @@ function DropBoxElement(props) {
     "aria-multiselectable": ariaMultiselectable,
     "aria-labelledby": ariaLabelledby,
     tabIndex: tabIndex,
-    onAnimationEnd: FireOnAnimationEnd
+    onAnimationEnd: isAnimate && FireOnAnimationEnd
   }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
     className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),

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

@@ -336,20 +336,26 @@
     animation-duration: var(--zd_transition2);
 }
 
-.fadeIn {
+.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);

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

@@ -47,11 +47,12 @@ function cssJSLogic(_ref) {
     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.fadeIn, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'default'), _defineProperty(_compileClassNames2, style.bounce, !isModel && isAnimate && !isReducedMotion && isActive && animationStyle === 'bounce'), _compileClassNames2));
+  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);

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

@@ -7,7 +7,7 @@ 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']),
+  animationStyle: _propTypes["default"].oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
   arrowBottom: _propTypes["default"].number,
   arrowLeft: _propTypes["default"].number,
   arrowPosition: _propTypes["default"].oneOf(['start', 'mid', 'end']),

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

@@ -60,7 +60,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 +69,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 () {

package/lib/Tab/Tabs.module.css

@@ -120,34 +120,16 @@
 .menuBox {
   max-height: 220px;
 }
-
-
 .bottomRightToLeft,
 .topRightToLeft,
 .bottomCenterToLeft {
-}
-
-
-[dir=ltr] .bottomRightToLeft, [dir=ltr] .topRightToLeft, [dir=ltr] .bottomCenterToLeft {
-  right: calc(var(--tab_position_gap) * -1);
-}
-
-
-[dir=rtl] .bottomRightToLeft, [dir=rtl] .topRightToLeft, [dir=rtl] .bottomCenterToLeft {
-  left: calc(var(--tab_position_gap) * -1);
+  right: calc(var(--tab_position_gap) * -1); 
 }
 
 .bottomLeftToRight,
 .topLeftToRight,
 .bottomCenterToRight {
-}
-
-[dir=ltr] .bottomLeftToRight, [dir=ltr] .topLeftToRight, [dir=ltr] .bottomCenterToRight {
-  left: calc(var(--tab_position_gap) * -1);
-}
-
-[dir=rtl] .bottomLeftToRight, [dir=rtl] .topLeftToRight, [dir=rtl] .bottomCenterToRight {
-  right: calc(var(--tab_position_gap) * -1);
+  left: calc(var(--tab_position_gap) * -1); 
 }
 
 .hidden {

package/lib/utils/Common.js

@@ -32,7 +32,9 @@ exports.mapValues = mapValues;
 exports.merge = merge;
 exports.parseDecimal = void 0;
 exports.remConvert = remConvert;
-exports.throttle = exports.stopAllEventPropagation = exports.scrollTo = void 0;
+exports.stopAllEventPropagation = exports.scrollTo = void 0;
+exports.stopPropagation = stopPropagation;
+exports.throttle = void 0;
 var _viewPort = _interopRequireDefault(require("../Popup/viewPort"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 //$Id$//
@@ -53,6 +55,10 @@ var getTotalDimension = function getTotalDimension(elem, align) {
   return align === 'vertical' ? elem.offsetWidth + parseDecimal(style.marginLeft) + parseDecimal(style.marginRight) : elem.offsetHeight + parseDecimal(style.marginTop) + parseDecimal(style.marginBottom);
 };
 exports.getTotalDimension = getTotalDimension;
+function stopPropagation(e) {
+  e && e.stopPropagation && e.stopPropagation();
+}
+;
 var stopAllEventPropagation = function stopAllEventPropagation(e) {
   e.stopPropagation && e.stopPropagation();
   e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-270",
+  "version": "1.0.0-alpha-271",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,