@zohodesk/components 1.0.0-alpha-264 → 1.0.0-alpha-265

package/README.md

@@ -33,6 +33,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - Tooltip
 
 
+# 1.0.0-alpha-265
+
+- **mergeStyle** - Logic Issue Fixed
+- **Tab** - State Restricted Names Check added
+- **cancelBubblingEffect** function added in utils/Common
+
 # 1.0.0-alpha-264
 
 - **DropBox** - customStyle renamed to customInlineStyle and migrarted to functional UCL component

package/es/DateTime/DateTime.js

@@ -15,9 +15,8 @@ import { formatDate, getMonthEnd } from '../utils/datetime/common';
 import { getIsEmptyValue } from '../utils/Common';
 import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import { Box } from '../Layout';
-import { getHourDetails } from './dateFormatUtils';
+import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from './dateFormatUtils';
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   const HeadingText = `${monthNames[month] || ''} ${year}`;
@@ -48,26 +47,6 @@ export default class DateTime extends React.PureComponent {
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
-    const {
-      startPoint: hourStart,
-      endPoint: hourEnd
-    } = getHourDetails(props.is24Hour);
-    this.hourSuggestions = (() => {
-      const hourArr = [];
-      for (let hour = hourStart; hour <= hourEnd; hour++) {
-        const htxt = hour < 10 ? `0${hour}` : `${hour}`;
-        hourArr.push(htxt);
-      }
-      return hourArr;
-    })();
-    this.minSuggestions = (() => {
-      const minArr = [];
-      for (let minute = 0; minute <= 59; minute++) {
-        const mtxt = minute < 10 ? `0${minute}` : `${minute}`;
-        minArr.push(mtxt);
-      }
-      return minArr;
-    })();
     this.ampmSuggestions = (() => {
       const ampmSuggestions = [];
       ampmText.forEach((text, index) => {
@@ -140,7 +119,7 @@ export default class DateTime extends React.PureComponent {
     year = dateObj.getFullYear();
     hours = defaultHour ? defaultHour : dateObj.getHours();
     mins = !getIsEmptyValue(defaultMin) ? defaultMin : dateObj.getMinutes();
-    mins = mins < 10 ? `0${mins}` : mins;
+    mins = addZeroIfNeeded(mins);
     amPm = defaultAmPm ? defaultAmPm : hours < 12 ? 'AM' : 'PM';
     hours = this.getHours(hours, is24Hour);
     return {
@@ -164,7 +143,7 @@ export default class DateTime extends React.PureComponent {
         hours -= 12;
       }
     }
-    hours = hours < 10 ? `0${hours}` : hours;
+    hours = addZeroIfNeeded(hours);
     return hours;
   }
   handleGetSelectedDate() {
@@ -563,16 +542,6 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
   render() {
     const {
       date,
@@ -653,12 +622,12 @@ export default class DateTime extends React.PureComponent {
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,
-      hourSuggestions: this.hourSuggestions,
+      hourSuggestions: getHourSuggestions(),
       onHourSelect: this.hoursSelect,
       hours: hours,
       hourEmptyText: hourEmptyText,
       needResponsive: needResponsive,
-      minSuggestions: this.minSuggestions,
+      minSuggestions: getMinuteSuggestions(),
       onMinutesSelect: this.minutesSelect,
       mins: mins,
       minuteEmptyText: minuteEmptyText,
@@ -686,35 +655,27 @@ export default class DateTime extends React.PureComponent {
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
       "data-id": `${dataId}_dateBoxContainer`
-    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        size: boxSize,
-        boxPosition: position,
-        isActive: isActive,
-        isArrow: false,
-        isAnimate: isAnimate,
-        animationStyle: "bounce",
-        getRef: getRef,
-        onClick: onClick,
-        dataId: `${dataId}_dateBoxContainer`,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolute,
-        customClass: {
-          customDropBoxWrap: className
-        },
-        isPadding: isPadding,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        portalId: dropBoxPortalId
-      }, /*#__PURE__*/React.createElement(Box, null, childEle));
-    }) : null;
+    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      size: boxSize,
+      boxPosition: position,
+      isActive: isActive,
+      isArrow: false,
+      isAnimate: isAnimate,
+      animationStyle: "bounce",
+      getRef: getRef,
+      onClick: onClick,
+      dataId: `${dataId}_dateBoxContainer`,
+      needResponsive: needResponsive,
+      isAbsolutePositioningNeeded: isAbsolute,
+      customClass: {
+        customDropBoxWrap: className
+      },
+      isPadding: isPadding,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      portalId: dropBoxPortalId
+    }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }
 }
 DateTime.propTypes = DateTime_propTypes;

package/es/DateTime/dateFormatUtils/dateFormats.js

@@ -0,0 +1,43 @@
+// Date Pattern Letters And its Meanings :-
+// 1. d/D: day without 0 prefix on single digit.
+// 2. dd/DD: day with 0 prefix if single digit.
+// 3. M: Month without 0 prefix on single digit.
+// 4. MM: Month with 0 prefix if single digit.
+// 5. yy/YY: Last two digit of year.
+// 6. yyyy/YYYY: represents full year.
+// 7. HH: 24 hour based hour. ie. 13:00. **H** will display hour without prefix 0 if single digit
+// 8. hh: 12 hour based hour. ie. 01:00. **h** will display hour without prefix 0 if single digit
+// 9. m: minute without 0 prefix on single digit.
+// 10.mm: minute with 0 prefix if single digit.
+// 11.s: second without 0 prefix on single digit.
+// 12.ss: second with 0 prefix if single digit.
+// 13.S: milliseconds with 0 prefix if single digit.
+// 14.a: represent the AM or PM
+// 15.A: represent the AM or PM
+// 16.Z: represent the timezone (Asia/Kolkata)
+// 17. (O) : Offset Of the timezone (GMT+00:00)
+
+export const dateSymbols = {
+  d: 'date',
+  dd: 'date',
+  DD: 'date',
+  M: 'month',
+  MM: 'month',
+  yy: 'year',
+  YY: 'year',
+  YYYY: 'year',
+  yyyy: 'year',
+  h: 'hour',
+  hh: 'hour',
+  H: 'hour',
+  HH: 'hour',
+  m: 'minute',
+  mm: 'minute',
+  s: 'second',
+  ss: 'second',
+  S: 'millisecond',
+  a: 'AMPM',
+  Z: 'timezone',
+  O: 'offset'
+};
+export const dataFormatList = ['yyyy/MM/dd', 'yyyy-MM-dd', 'yyyy.MM.dd', 'yyyy MM dd', 'MM/dd/yyyy', 'MM-dd-yyyy', 'MM.dd.yyyy', 'MM dd yyyy', 'dd/MM/yyyy', 'dd-MM-yyyy', 'dd.MM.yyyy', 'dd MM yyyy', 'yyyy/MMM/dd', 'yyyy-MMM-dd', 'yyyy.MMM.dd', 'yyyy MMM dd', 'MMM/dd/yyyy', 'MMM-dd-yyyy', 'MMM.dd.yyyy', 'MMM dd yyyy', 'dd/MMM/yyyy', 'dd-MMM-yyyy', 'dd.MMM.yyyy', 'dd MMM yyyy', 'dd/MMMM/yyyy', 'dd-MMMM-yyyy', 'dd-MMMM-yyyy', 'dd MMMM yyyy', 'MMMM/dd/yyyy', 'MMMM-dd-yyyy', 'MMMM.dd.yyyy', 'MMMM dd yyyy', 'yyyy/MMMM/dd', 'yyyy-MMMM-dd', 'yyyy.MMMM.dd', 'yyyy MMMM dd', 'dd/MM/YY', 'dd-MM-YY', 'dd.MM.YY', 'dd MM YY', 'MM/dd/YY', 'MM-dd-YY', 'MM.dd.YY', 'MM dd YY', 'YY/MM/dd', 'YY-MM-dd', 'YY.MM.dd', 'YY MM dd', 'dd/MMM/YY', 'dd-MMM-YY', 'dd.MMM.YY', 'dd MMM YY', 'MMM/dd/YY', 'MMM-dd-YY', 'MMM.dd.YY', 'MMM dd YY', 'YY/MMM/dd', 'YY-MMM-dd', 'YY.MMM.dd', 'YY MMM dd', 'dd/MMMM/YY', 'dd-MMMM-YY', 'dd.MMMM.YY', 'dd MMMM YY', 'MMMM/dd/YY', 'MMMM-dd-YY', 'MMMM.dd.YY', 'MMMM dd YY', 'YY/MMMM/dd', 'YY-MMMM-dd', 'YY.MMMM.dd', 'YY MMMM dd'];

package/es/DateTime/dateFormatUtils/index.js

@@ -109,12 +109,39 @@ export function getHourDetails(is24Hour) {
     endPoint: is24Hour ? 23 : 12
   };
 }
+export function getHourSuggestions(is24Hour) {
+  const {
+    startPoint,
+    endPoint
+  } = getHourDetails(is24Hour);
+  const hourArr = [];
+  for (let hour = startPoint; hour <= endPoint; hour++) {
+    const htxt = addZeroIfNeeded(hour);
+    hourArr.push(htxt);
+  }
+  return hourArr;
+}
 export function getMinuteDetails() {
   return {
     startPoint: 0,
     endPoint: 59
   };
 }
+export function getMinuteSuggestions() {
+  const {
+    startPoint,
+    endPoint
+  } = getMinuteDetails();
+  const minArr = [];
+  for (let minute = startPoint; minute <= endPoint; minute++) {
+    const mtxt = addZeroIfNeeded(minute);
+    minArr.push(mtxt);
+  }
+  return minArr;
+}
+export function addZeroIfNeeded(value) {
+  return value < 10 ? `0${value}` : value;
+}
 export function getIsNoonValueTyped(event) {
   const {
     keyCode

package/es/DateTime/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { dataFormatList } from '../dateFormatUtils/dateFormats';
 export const CalendarView_propTypes = {
   dataId: PropTypes.string,
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -71,7 +72,7 @@ export const DateWidget_propTypes = {
   className: PropTypes.string,
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  dateFormat: PropTypes.oneOf(['yyyy/MM/dd', 'MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy-MM-dd', 'MM-dd-yyyy', 'dd-MM-yyyy', 'yyyy.MM.dd', 'MM.dd.yyyy', 'dd.MM.yyyy', 'dd/MMMM/YY', 'dd/MMM/YY']),
+  dateFormat: PropTypes.oneOf([...dataFormatList]),
   defaultPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
   defaultTime: PropTypes.string,
   getContainerRef: PropTypes.func,

package/es/DropBox/DropBox.js

@@ -8,13 +8,11 @@ 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 style from './css/DropBox.module.css';
 export default function DropBox(props) {
   const focusRef = useRef(null);
   const DropBoxContext = useContext(LibraryContext);
-  const onFreezeClick = e => {
-    e && e.stopPropagation();
-  };
   const {
     needResponsive,
     portalId,
@@ -64,13 +62,13 @@ export default function DropBox(props) {
   }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: `${style.freezeLayer} ${style.freeze}`,
     style: zIndexStyle,
-    onClick: onFreezeClick
+    onClick: cancelBubblingEffect
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
   }, /*#__PURE__*/React.createElement(Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
     className: style.freezeLayer,
     style: zIndexStyle,
-    onClick: onFreezeClick
+    onClick: cancelBubblingEffect
   }) : null, dropBoxEle)) : dropBoxEle;
 }
 DropBox.propTypes = DropBoxPropTypes;

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -125,9 +125,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } else {
       this.handleChange([...selectedOptions, option], e);
     }
-    // e && e.stopPropagation && this.handlePopupClose(e);
   }
-
   handleFormatOptions(props) {
     const {
       options,

package/es/MultiSelect/MultiSelect.js

@@ -469,10 +469,7 @@ export class MultiSelectComponent extends React.Component {
     } else {
       this.handleChange([...selectedOptions, option], e);
     }
-
-    // e && e.stopPropagation && this.handlePopupClose(e);
   }
-
   handleRemoveOption(options) {
     const newOptions = !getIsEmptyValue(options) && !Array.isArray(options) ? [options] : options;
     const {

package/es/Popup/Popup.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import hoistStatics from 'hoist-non-react-statics';
 
 /**** Methods ****/
-import { debounce, isDescendant, isTextSelected } from '../utils/Common.js';
+import { debounce, isDescendant, isTextSelected, cancelBubblingEffect } from '../utils/Common.js';
 import viewPort from './viewPort';
 import { absolutePositionMapping, rtlAbsolutePositionMapping, rtlFixedPositionMapping } from './PositionMapping.json';
 import ResizeObserver from '@zohodesk/virtualizer/lib/commons/ResizeObserver.js';
@@ -376,8 +376,7 @@ const Popup = function (Component) {
     }
     removeClose(e) {
       // e && e.preventDefault && e.preventDefault();
-      e && e.stopPropagation && e.stopPropagation();
-      e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+      cancelBubblingEffect(e);
     }
     handlePopupPosition() {
       let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';

package/es/Tab/Tab.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /* eslint-disable react/forbid-component-props */
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'zetaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta', 'tabZeta', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'zetaActive_border', 'deltaActive_border'] }] */
+/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['text', 'tabAlpha', 'alphaActive', 'gammaActive', 'betaActive', 'deltaActive', 'tabGamma', 'tabBeta', 'tabDelta',', 'specialActive', 'tabSpecial', 'alphaActive_border', 'gammaActive_border', 'betaActive_border', 'deltaActive_border'] }] */
 
 import React, { useMemo, useCallback } from 'react';
 import { Tab_defaultProps } from './props/defaultProps';

package/es/Tab/Tabs.js

@@ -2,8 +2,8 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 /* eslint-disable react/forbid-component-props */
 /* eslint css-modules/no-unused-class: [2, {
       markAsUsed: [
-          'hidden','alpha','gamma','beta','delta','zeta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','zetaActive','deltaActive','tabGamma','tabBeta','tabDelta','tabZeta','specialActive','tabSpecial',
-          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','zeta_padding','zeta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','zetaActive_border','deltaActive_border'
+          'hidden','alpha','gamma','beta','delta','special','text','maxWidth','widgetList','menuContainer','border','tabText','block','tabAlpha','alphaActive','gammaActive','betaActive','deltaActive','tabGamma','tabBeta','tabDelta','specialActive','tabSpecial',
+          'alpha_padding','alpha_border','gamma_padding','gamma_border','beta_padding','beta_border','delta_padding','delta_border','textContainer','disabled','alphaActive_border','gammaActive_border','betaActive_border','deltaActive_border'
         ]
     }]
 */
@@ -11,7 +11,7 @@ import React from 'react';
 import Tab from './Tab';
 import { Tabs_defaultProps } from './props/defaultProps';
 import { Tabs_propTypes } from './props/propTypes';
-import { remConvert, getTotalDimension, cs, bind, throttle } from '../utils/Common';
+import { remConvert, getTotalDimension, cs, bind, throttle, cancelBubblingEffect } from '../utils/Common';
 import { Box, Container } from '../Layout';
 import ResizeObserver from '../Responsive/ResizeObserver';
 import ListItem from '../ListItem/ListItem';
@@ -59,9 +59,14 @@ class Tabs extends React.Component {
     let totalDimension = this.getTotalDimension();
     let tabDimensions = this.getTabDimensions();
     let tabKeys = [];
+    let restrictedKeys = ['state', 'props', 'refs', 'context'];
     React.Children.toArray(children).forEach(child => {
       if (child && child.props.id && child.type === childType) {
-        tabKeys.push(child.props.id);
+        if (restrictedKeys.includes(child.props.id)) {
+          throw new Error('Restricted id name found in Tabs, Please avoid these names => ' + restrictedKeys.toString());
+        } else {
+          tabKeys.push(child.props.id);
+        }
       }
     });
     this.setState({
@@ -329,7 +334,7 @@ class Tabs extends React.Component {
       onSelect
     } = this.props;
     if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-      e && e.stopPropagation();
+      cancelBubblingEffect(e);
       return;
     }
     e.preventDefault();

package/es/Tab/__tests__/Tab.spec.js

@@ -45,17 +45,11 @@ describe('Tab Component', () => {
     });
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabDelta')).toBe(true);
   });
-  it('Is Contains zeta class', () => {
-    const {
-      props,
-      renderedDOM
-    } = setup(Tab, {
-      type: 'zeta',
-      needAppearance: true,
-      getActiveRef: () => {}
-    });
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
-  });
+  // it('Is Contains zeta class', () => {
+  //   const { props, renderedDOM } = setup(Tab, { type: 'zeta', needAppearance: true, getActiveRef: () => { } });
+  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
+
+  // });
   // it('Is Contains special class', () => {
   //   const { props, renderedDOM } = setup(Tab, { type: 'special', getActiveRef: () => {} });
   //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('special')).toBe(true);

package/es/Tab/props/propTypes.js

@@ -102,6 +102,6 @@ export const TabWrapper_propTypes = {
   needPadding: PropTypes.bool,
   needTabBorder: PropTypes.bool,
   onSelect: PropTypes.func,
-  type: PropTypes.oneOf(['alpha', 'beta', 'zeta']),
+  type: PropTypes.oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: PropTypes.string
 };

package/es/utils/Common.js

@@ -13,6 +13,10 @@ export const stopAllEventPropagation = e => {
   e.stopPropagation && e.stopPropagation();
   e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
 };
+export function cancelBubblingEffect(e) {
+  e && e.stopPropagation && e.stopPropagation();
+  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+}
 
 // export function getCommentsDetails(
 //   commentIds = [],

package/es/utils/css/mergeStyle.js

@@ -18,20 +18,33 @@ export default function mergeStyle(defaultStyle) {
         // return res;
         throw new Error(`UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${styleName}" is not available in that component style`);
       }
-      let val = defaultStyle[styleName];
-      Object.keys(res).map(keyName => {
-        let styleKey = res[keyName];
-        if (styleKey.includes(val)) {
-          res[keyName] = styleKey.replace(val, styleValue);
-        }
-      });
-    } else if (defaultStyle[next] || additionalStyle.includes(next)) {
+      if (additionalStyle.includes(styleName)) {
+        res[styleName] = styleValue;
+      } else {
+        let val = defaultStyle[styleName];
+        Object.keys(res).map(keyName => {
+          let styleKey = res[keyName];
+          let styleClasses = styleKey.split(' ');
+          let ind = styleClasses.indexOf(val);
+          if (ind !== -1) {
+            styleClasses[ind] = styleValue;
+            res[keyName] = styleClasses.join(' ');
+          }
+        });
+      }
+    } else if (defaultStyle[next]) {
       let val = defaultStyle[next];
       Object.keys(res).map(keyName => {
-        if (res[keyName].includes(val)) {
-          res[keyName] = res[keyName] + ' ' + customStyle[next];
+        let styleKey = res[keyName];
+        let styleClasses = styleKey.split(' ');
+        let ind = styleClasses.indexOf(val);
+        if (ind !== -1) {
+          styleClasses[ind] = styleClasses[ind] + ' ' + customStyle[next];
+          res[keyName] = styleClasses.join(' ');
         }
       });
+    } else if (additionalStyle.includes(next)) {
+      res[next] = customStyle[next];
     } else if (!defaultStyle[next] && !additionalStyle.includes(next)) {
       // res[next] = customStyle[next];
       `UNKNOWN CLASSNAME DETECTED - Given customStyle's key "${next}" is not available in that component style`;

package/lib/DateTime/DateTime.js

@@ -19,7 +19,6 @@ var _common = require("../utils/datetime/common");
 var _Common = require("../utils/Common");
 var _constants = require("./constants");
 var _ResponsiveDropBox = _interopRequireDefault(require("../ResponsiveDropBox/ResponsiveDropBox"));
-var _CustomResponsive = require("../Responsive/CustomResponsive");
 var _Layout = require("../Layout");
 var _dateFormatUtils = require("./dateFormatUtils");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,25 +73,6 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
     _this.handleYearViewToggle = _this.handleYearViewToggle.bind(_assertThisInitialized(_this));
     var _props$i18nKeys$ampmT = props.i18nKeys.ampmText,
       ampmText = _props$i18nKeys$ampmT === void 0 ? _constants.ampmTextDefault : _props$i18nKeys$ampmT;
-    var _getHourDetails = (0, _dateFormatUtils.getHourDetails)(props.is24Hour),
-      hourStart = _getHourDetails.startPoint,
-      hourEnd = _getHourDetails.endPoint;
-    _this.hourSuggestions = function () {
-      var hourArr = [];
-      for (var hour = hourStart; hour <= hourEnd; hour++) {
-        var htxt = hour < 10 ? "0".concat(hour) : "".concat(hour);
-        hourArr.push(htxt);
-      }
-      return hourArr;
-    }();
-    _this.minSuggestions = function () {
-      var minArr = [];
-      for (var minute = 0; minute <= 59; minute++) {
-        var mtxt = minute < 10 ? "0".concat(minute) : "".concat(minute);
-        minArr.push(mtxt);
-      }
-      return minArr;
-    }();
     _this.ampmSuggestions = function () {
       var ampmSuggestions = [];
       ampmText.forEach(function (text, index) {
@@ -175,7 +155,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       year = dateObj.getFullYear();
       hours = defaultHour ? defaultHour : dateObj.getHours();
       mins = !(0, _Common.getIsEmptyValue)(defaultMin) ? defaultMin : dateObj.getMinutes();
-      mins = mins < 10 ? "0".concat(mins) : mins;
+      mins = (0, _dateFormatUtils.addZeroIfNeeded)(mins);
       amPm = defaultAmPm ? defaultAmPm : hours < 12 ? 'AM' : 'PM';
       hours = this.getHours(hours, is24Hour);
       return {
@@ -201,7 +181,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           hours -= 12;
         }
       }
-      hours = hours < 10 ? "0".concat(hours) : hours;
+      hours = (0, _dateFormatUtils.addZeroIfNeeded)(hours);
       return hours;
     }
   }, {
@@ -613,16 +593,6 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
         isMonthOpen: false
       });
     }
-  }, {
-    key: "responsiveFunc",
-    value: function responsiveFunc(_ref3) {
-      var mediaQueryOR = _ref3.mediaQueryOR;
-      return {
-        tabletMode: mediaQueryOR([{
-          maxWidth: 700
-        }])
-      };
-    }
   }, {
     key: "render",
     value: function render() {
@@ -712,12 +682,12 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       }), isDateTimeField ? /*#__PURE__*/_react["default"].createElement(_Time["default"], {
         timeText: timeText,
         dataId: dataId,
-        hourSuggestions: this.hourSuggestions,
+        hourSuggestions: (0, _dateFormatUtils.getHourSuggestions)(),
         onHourSelect: this.hoursSelect,
         hours: hours,
         hourEmptyText: hourEmptyText,
         needResponsive: needResponsive,
-        minSuggestions: this.minSuggestions,
+        minSuggestions: (0, _dateFormatUtils.getMinuteSuggestions)(),
         onMinutesSelect: this.minutesSelect,
         mins: mins,
         minuteEmptyText: minuteEmptyText,
@@ -745,33 +715,27 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
         "data-id": "".concat(dataId, "_dateBoxContainer")
-      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
-        query: this.responsiveFunc,
-        responsiveId: "Helmet"
-      }, function (_ref4) {
-        var tabletMode = _ref4.tabletMode;
-        return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
-          size: boxSize,
-          boxPosition: position,
-          isActive: isActive,
-          isArrow: false,
-          isAnimate: isAnimate,
-          animationStyle: "bounce",
-          getRef: getRef,
-          onClick: onClick,
-          dataId: "".concat(dataId, "_dateBoxContainer"),
-          needResponsive: needResponsive,
-          isAbsolutePositioningNeeded: isAbsolute,
-          customClass: {
-            customDropBoxWrap: className
-          },
-          isPadding: isPadding,
-          positionsOffset: positionsOffset,
-          targetOffset: targetOffset,
-          isRestrictScroll: isRestrictScroll,
-          portalId: dropBoxPortalId
-        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle));
-      }) : null;
+      }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
+        size: boxSize,
+        boxPosition: position,
+        isActive: isActive,
+        isArrow: false,
+        isAnimate: isAnimate,
+        animationStyle: "bounce",
+        getRef: getRef,
+        onClick: onClick,
+        dataId: "".concat(dataId, "_dateBoxContainer"),
+        needResponsive: needResponsive,
+        isAbsolutePositioningNeeded: isAbsolute,
+        customClass: {
+          customDropBoxWrap: className
+        },
+        isPadding: isPadding,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll,
+        portalId: dropBoxPortalId
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle)) : null;
     }
   }]);
   return DateTime;

package/lib/DateTime/dateFormatUtils/dateFormats.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dateSymbols = exports.dataFormatList = void 0;
+// Date Pattern Letters And its Meanings :-
+// 1. d/D: day without 0 prefix on single digit.
+// 2. dd/DD: day with 0 prefix if single digit.
+// 3. M: Month without 0 prefix on single digit.
+// 4. MM: Month with 0 prefix if single digit.
+// 5. yy/YY: Last two digit of year.
+// 6. yyyy/YYYY: represents full year.
+// 7. HH: 24 hour based hour. ie. 13:00. **H** will display hour without prefix 0 if single digit
+// 8. hh: 12 hour based hour. ie. 01:00. **h** will display hour without prefix 0 if single digit
+// 9. m: minute without 0 prefix on single digit.
+// 10.mm: minute with 0 prefix if single digit.
+// 11.s: second without 0 prefix on single digit.
+// 12.ss: second with 0 prefix if single digit.
+// 13.S: milliseconds with 0 prefix if single digit.
+// 14.a: represent the AM or PM
+// 15.A: represent the AM or PM
+// 16.Z: represent the timezone (Asia/Kolkata)
+// 17. (O) : Offset Of the timezone (GMT+00:00)
+
+var dateSymbols = {
+  d: 'date',
+  dd: 'date',
+  DD: 'date',
+  M: 'month',
+  MM: 'month',
+  yy: 'year',
+  YY: 'year',
+  YYYY: 'year',
+  yyyy: 'year',
+  h: 'hour',
+  hh: 'hour',
+  H: 'hour',
+  HH: 'hour',
+  m: 'minute',
+  mm: 'minute',
+  s: 'second',
+  ss: 'second',
+  S: 'millisecond',
+  a: 'AMPM',
+  Z: 'timezone',
+  O: 'offset'
+};
+exports.dateSymbols = dateSymbols;
+var dataFormatList = ['yyyy/MM/dd', 'yyyy-MM-dd', 'yyyy.MM.dd', 'yyyy MM dd', 'MM/dd/yyyy', 'MM-dd-yyyy', 'MM.dd.yyyy', 'MM dd yyyy', 'dd/MM/yyyy', 'dd-MM-yyyy', 'dd.MM.yyyy', 'dd MM yyyy', 'yyyy/MMM/dd', 'yyyy-MMM-dd', 'yyyy.MMM.dd', 'yyyy MMM dd', 'MMM/dd/yyyy', 'MMM-dd-yyyy', 'MMM.dd.yyyy', 'MMM dd yyyy', 'dd/MMM/yyyy', 'dd-MMM-yyyy', 'dd.MMM.yyyy', 'dd MMM yyyy', 'dd/MMMM/yyyy', 'dd-MMMM-yyyy', 'dd-MMMM-yyyy', 'dd MMMM yyyy', 'MMMM/dd/yyyy', 'MMMM-dd-yyyy', 'MMMM.dd.yyyy', 'MMMM dd yyyy', 'yyyy/MMMM/dd', 'yyyy-MMMM-dd', 'yyyy.MMMM.dd', 'yyyy MMMM dd', 'dd/MM/YY', 'dd-MM-YY', 'dd.MM.YY', 'dd MM YY', 'MM/dd/YY', 'MM-dd-YY', 'MM.dd.YY', 'MM dd YY', 'YY/MM/dd', 'YY-MM-dd', 'YY.MM.dd', 'YY MM dd', 'dd/MMM/YY', 'dd-MMM-YY', 'dd.MMM.YY', 'dd MMM YY', 'MMM/dd/YY', 'MMM-dd-YY', 'MMM.dd.YY', 'MMM dd YY', 'YY/MMM/dd', 'YY-MMM-dd', 'YY.MMM.dd', 'YY MMM dd', 'dd/MMMM/YY', 'dd-MMMM-YY', 'dd.MMMM.YY', 'dd MMMM YY', 'MMMM/dd/YY', 'MMMM-dd-YY', 'MMMM.dd.YY', 'MMMM dd YY', 'YY/MMMM/dd', 'YY-MMMM-dd', 'YY.MMMM.dd', 'YY MMMM dd'];
+exports.dataFormatList = dataFormatList;

package/lib/DateTime/dateFormatUtils/index.js

@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.addZero = addZero;
+exports.addZeroIfNeeded = addZeroIfNeeded;
 exports.arrayIsNotEqual = arrayIsNotEqual;
 exports.convertTwoDigitToYear = convertTwoDigitToYear;
 exports.convertYearToTwoDigit = convertYearToTwoDigit;
 exports.getDayDetails = getDayDetails;
 exports.getDayEnd = getDayEnd;
 exports.getHourDetails = getHourDetails;
+exports.getHourSuggestions = getHourSuggestions;
 exports.getIsCurrentYear = getIsCurrentYear;
 exports.getIsDeleteTyped = getIsDeleteTyped;
 exports.getIsEmptyHour = getIsEmptyHour;
@@ -19,6 +21,7 @@ exports.getIsNoonValueTyped = getIsNoonValueTyped;
 exports.getIsNumberTyped = getIsNumberTyped;
 exports.getIsSupportedKey = getIsSupportedKey;
 exports.getMinuteDetails = getMinuteDetails;
+exports.getMinuteSuggestions = getMinuteSuggestions;
 exports.getMonthDetails = getMonthDetails;
 exports.getNoonDetails = getNoonDetails;
 exports.getYearDetails = getYearDetails;
@@ -130,12 +133,37 @@ function getHourDetails(is24Hour) {
     endPoint: is24Hour ? 23 : 12
   };
 }
+function getHourSuggestions(is24Hour) {
+  var _getHourDetails = getHourDetails(is24Hour),
+    startPoint = _getHourDetails.startPoint,
+    endPoint = _getHourDetails.endPoint;
+  var hourArr = [];
+  for (var hour = startPoint; hour <= endPoint; hour++) {
+    var htxt = addZeroIfNeeded(hour);
+    hourArr.push(htxt);
+  }
+  return hourArr;
+}
 function getMinuteDetails() {
   return {
     startPoint: 0,
     endPoint: 59
   };
 }
+function getMinuteSuggestions() {
+  var _getMinuteDetails = getMinuteDetails(),
+    startPoint = _getMinuteDetails.startPoint,
+    endPoint = _getMinuteDetails.endPoint;
+  var minArr = [];
+  for (var minute = startPoint; minute <= endPoint; minute++) {
+    var mtxt = addZeroIfNeeded(minute);
+    minArr.push(mtxt);
+  }
+  return minArr;
+}
+function addZeroIfNeeded(value) {
+  return value < 10 ? "0".concat(value) : value;
+}
 function getIsNoonValueTyped(event) {
   var keyCode = event.keyCode;
   if (keyCode === 65 || keyCode === 77 || keyCode === 80) {
@@ -178,9 +206,9 @@ function getIsEmptyValue(value, startPoint, endPoint) {
   return true;
 }
 function getIsEmptyHour(value, is24Hour) {
-  var _getHourDetails = getHourDetails(is24Hour),
-    startPoint = _getHourDetails.startPoint,
-    endPoint = _getHourDetails.endPoint;
+  var _getHourDetails2 = getHourDetails(is24Hour),
+    startPoint = _getHourDetails2.startPoint,
+    endPoint = _getHourDetails2.endPoint;
   return getIsEmptyValue(value, startPoint, endPoint);
 }
 function getIsEmptyYear(value, yearLength) {

package/lib/DateTime/props/propTypes.js

@@ -5,7 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.YearView_propTypes = exports.Span_propTypes = exports.DateWidget_propTypes = exports.DateTime_propTypes = exports.CalendarView_propTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _dateFormats = require("../dateFormatUtils/dateFormats");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var CalendarView_propTypes = {
   dataId: _propTypes["default"].string,
   date: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
@@ -81,7 +88,7 @@ var DateWidget_propTypes = {
   className: _propTypes["default"].string,
   closePopupOnly: _propTypes["default"].func,
   dataId: _propTypes["default"].string,
-  dateFormat: _propTypes["default"].oneOf(['yyyy/MM/dd', 'MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy-MM-dd', 'MM-dd-yyyy', 'dd-MM-yyyy', 'yyyy.MM.dd', 'MM.dd.yyyy', 'dd.MM.yyyy', 'dd/MMMM/YY', 'dd/MMM/YY']),
+  dateFormat: _propTypes["default"].oneOf(_toConsumableArray(_dateFormats.dataFormatList)),
   defaultPosition: _propTypes["default"].oneOf(['top', 'bottom', 'right', 'left']),
   defaultTime: _propTypes["default"].string,
   getContainerRef: _propTypes["default"].func,

package/lib/DropBox/DropBox.js

@@ -14,6 +14,7 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 var _DropBoxElement = _interopRequireDefault(require("./DropBoxElement/DropBoxElement"));
 var _defaultProps = require("./props/defaultProps");
 var _propTypes = require("./props/propTypes");
+var _Common = require("./../utils/Common");
 var _DropBoxModule = _interopRequireDefault(require("./css/DropBox.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -22,9 +23,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function DropBox(props) {
   var focusRef = (0, _react.useRef)(null);
   var DropBoxContext = (0, _react.useContext)(_LibraryContextInit["default"]);
-  var onFreezeClick = function onFreezeClick(e) {
-    e && e.stopPropagation();
-  };
   var needResponsive = props.needResponsive,
     portalId = props.portalId,
     isActive = props.isActive,
@@ -70,13 +68,13 @@ function DropBox(props) {
   }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
     style: zIndexStyle,
-    onClick: onFreezeClick
+    onClick: _Common.cancelBubblingEffect
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxModule["default"].freezeLayer,
     style: zIndexStyle,
-    onClick: onFreezeClick
+    onClick: _Common.cancelBubblingEffect
   }) : null, dropBoxEle)) : dropBoxEle;
 }
 DropBox.propTypes = _propTypes.DropBoxPropTypes;

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -147,7 +147,6 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       } else {
         this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
       }
-      // e && e.stopPropagation && this.handlePopupClose(e);
     }
   }, {
     key: "handleFormatOptions",

package/lib/MultiSelect/MultiSelect.js

@@ -492,8 +492,6 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       } else {
         this.handleChange([].concat(_toConsumableArray(selectedOptions), [option]), e);
       }
-
-      // e && e.stopPropagation && this.handlePopupClose(e);
     }
   }, {
     key: "handleRemoveOption",

package/lib/Popup/Popup.js

@@ -415,8 +415,7 @@ var Popup = function Popup(Component) {
       key: "removeClose",
       value: function removeClose(e) {
         // e && e.preventDefault && e.preventDefault();
-        e && e.stopPropagation && e.stopPropagation();
-        e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+        (0, _Common.cancelBubblingEffect)(e);
       }
     }, {
       key: "handlePopupPosition",

package/lib/Tab/Tabs.js

@@ -79,9 +79,14 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       var totalDimension = this.getTotalDimension();
       var tabDimensions = this.getTabDimensions();
       var tabKeys = [];
+      var restrictedKeys = ['state', 'props', 'refs', 'context'];
       _react["default"].Children.toArray(children).forEach(function (child) {
         if (child && child.props.id && child.type === childType) {
-          tabKeys.push(child.props.id);
+          if (restrictedKeys.includes(child.props.id)) {
+            throw new Error('Restricted id name found in Tabs, Please avoid these names => ' + restrictedKeys.toString());
+          } else {
+            tabKeys.push(child.props.id);
+          }
         }
       });
       this.setState({
@@ -362,7 +367,7 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
     value: function moreTabSelect(tab, value, index, e) {
       var onSelect = this.props.onSelect;
       if (e && e.target && e.target.parentElement.tagName === 'A' && (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey)) {
-        e && e.stopPropagation();
+        (0, _Common.cancelBubblingEffect)(e);
         return;
       }
       e.preventDefault();

package/lib/Tab/__tests__/Tab.spec.js

@@ -44,16 +44,11 @@ describe('Tab Component', function () {
       renderedDOM = _setup4.renderedDOM;
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tabDelta')).toBe(true);
   });
-  it('Is Contains zeta class', function () {
-    var _setup5 = setup(_Tab["default"], {
-        type: 'zeta',
-        needAppearance: true,
-        getActiveRef: function getActiveRef() {}
-      }),
-      props = _setup5.props,
-      renderedDOM = _setup5.renderedDOM;
-    expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
-  });
+  // it('Is Contains zeta class', () => {
+  //   const { props, renderedDOM } = setup(Tab, { type: 'zeta', needAppearance: true, getActiveRef: () => { } });
+  //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('tab')).toBe(true);
+
+  // });
   // it('Is Contains special class', () => {
   //   const { props, renderedDOM } = setup(Tab, { type: 'special', getActiveRef: () => {} });
   //   expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('special')).toBe(true);
@@ -61,7 +56,7 @@ describe('Tab Component', function () {
   // });
 
   it('Is Contains active class', function () {
-    var _setup6 = setup(_Tab["default"], {
+    var _setup5 = setup(_Tab["default"], {
         type: 'alpha',
         needAppearance: true,
         id: '0',
@@ -69,31 +64,31 @@ describe('Tab Component', function () {
         isActive: true,
         getActiveRef: function getActiveRef() {}
       }),
-      props = _setup6.props,
-      renderedDOM = _setup6.renderedDOM;
+      props = _setup5.props,
+      renderedDOM = _setup5.renderedDOM;
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive')).toBe(true);
   });
   it('Is Contains border class', function () {
-    var _setup7 = setup(_Tab["default"], {
+    var _setup6 = setup(_Tab["default"], {
         isActive: true,
         type: 'alpha',
         needAppearance: true,
         needBorder: true,
         getActiveRef: function getActiveRef() {}
       }),
-      props = _setup7.props,
-      renderedDOM = _setup7.renderedDOM;
+      props = _setup6.props,
+      renderedDOM = _setup6.renderedDOM;
     expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab').className.contains('alphaActive_border')).toBe(true);
   });
   it('Is call onClick', function () {
-    var _setup8 = setup(_Tab["default"], {
+    var _setup7 = setup(_Tab["default"], {
         id: '2',
         onClick: jest.fn(),
         onSelect: jest.fn(),
         getActiveRef: function getActiveRef() {}
       }),
-      renderedDOM = _setup8.renderedDOM,
-      props = _setup8.props;
+      renderedDOM = _setup7.renderedDOM,
+      props = _setup7.props;
     var tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'tabMenu_Tab');
     TestUtils.Simulate.click(tabElement, {
       currentTarget: {
@@ -105,14 +100,14 @@ describe('Tab Component', function () {
     expect(props.onSelect).toHaveBeenLastCalledWith('2');
   });
   it('is render text span', function () {
-    var _setup9 = setup(_Tab["default"], {
+    var _setup8 = setup(_Tab["default"], {
         type: 'alpha',
         dataId: 'taskSubtab1',
         text: 'Tab1',
         getActiveRef: function getActiveRef() {}
       }),
-      renderedDOM = _setup9.renderedDOM,
-      props = _setup9.props;
+      renderedDOM = _setup8.renderedDOM,
+      props = _setup8.props;
     var tabElement = TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'taskSubtab1_Tab');
     expect(tabElement.getAttribute('data-id')).toBe('taskSubtab1_Tab');
   });

package/lib/Tab/props/propTypes.js

@@ -113,7 +113,7 @@ var TabWrapper_propTypes = {
   needPadding: _propTypes["default"].bool,
   needTabBorder: _propTypes["default"].bool,
   onSelect: _propTypes["default"].func,
-  type: _propTypes["default"].oneOf(['alpha', 'beta', 'zeta']),
+  type: _propTypes["default"].oneOf(['alpha', 'beta', 'delta']),
   dataSelectorId: _propTypes["default"].string
 };
 exports.TabWrapper_propTypes = TabWrapper_propTypes;

package/lib/utils/Common.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
+exports.cancelBubblingEffect = cancelBubblingEffect;
 exports.capitalize = capitalize;
 exports.checkIsImageFile = checkIsImageFile;
 exports.debounce = exports.cs = void 0;
@@ -56,6 +57,11 @@ var stopAllEventPropagation = function stopAllEventPropagation(e) {
   e.stopPropagation && e.stopPropagation();
   e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
 };
+exports.stopAllEventPropagation = stopAllEventPropagation;
+function cancelBubblingEffect(e) {
+  e && e.stopPropagation && e.stopPropagation();
+  e && e.nativeEvent && e.nativeEvent.stopImmediatePropagation && e.nativeEvent.stopImmediatePropagation();
+}
 
 // export function getCommentsDetails(
 //   commentIds = [],
@@ -70,7 +76,7 @@ var stopAllEventPropagation = function stopAllEventPropagation(e) {
 //     }) || []
 //   );
 // }
-exports.stopAllEventPropagation = stopAllEventPropagation;
+
 function encodeForHtml(str) {
   if (/<|>|&|"|'|\\/g.test(str) == true) {
     str = str.replace(/&/g, '&amp;');

package/lib/utils/css/mergeStyle.js

@@ -30,20 +30,33 @@ function mergeStyle(defaultStyle) {
         // return res;
         throw new Error("UNKNOWN CLASSNAME DETECTED - Given customStyle's key \"".concat(styleName, "\" is not available in that component style"));
       }
-      var val = defaultStyle[styleName];
-      Object.keys(res).map(function (keyName) {
-        var styleKey = res[keyName];
-        if (styleKey.includes(val)) {
-          res[keyName] = styleKey.replace(val, styleValue);
-        }
-      });
-    } else if (defaultStyle[next] || additionalStyle.includes(next)) {
+      if (additionalStyle.includes(styleName)) {
+        res[styleName] = styleValue;
+      } else {
+        var val = defaultStyle[styleName];
+        Object.keys(res).map(function (keyName) {
+          var styleKey = res[keyName];
+          var styleClasses = styleKey.split(' ');
+          var ind = styleClasses.indexOf(val);
+          if (ind !== -1) {
+            styleClasses[ind] = styleValue;
+            res[keyName] = styleClasses.join(' ');
+          }
+        });
+      }
+    } else if (defaultStyle[next]) {
       var _val = defaultStyle[next];
       Object.keys(res).map(function (keyName) {
-        if (res[keyName].includes(_val)) {
-          res[keyName] = res[keyName] + ' ' + customStyle[next];
+        var styleKey = res[keyName];
+        var styleClasses = styleKey.split(' ');
+        var ind = styleClasses.indexOf(_val);
+        if (ind !== -1) {
+          styleClasses[ind] = styleClasses[ind] + ' ' + customStyle[next];
+          res[keyName] = styleClasses.join(' ');
         }
       });
+    } else if (additionalStyle.includes(next)) {
+      res[next] = customStyle[next];
     } else if (!defaultStyle[next] && !additionalStyle.includes(next)) {
       // res[next] = customStyle[next];
       "UNKNOWN CLASSNAME DETECTED - Given customStyle's key \"".concat(next, "\" is not available in that component style");

package/package.json

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