@zohodesk/components 1.0.0-temp-146 → 1.0.0-temp-147

package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css

@@ -1,10 +1,10 @@
 [data-mode='pureDark'][data-theme='yellow'] {
-	--zdt_cta_primary_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_primary_hover_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
+	--zdt_cta_primary_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_text: hsla(37, 66%, calc(65% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_bg: hsla(37, 67%, calc(53% + var(--zd_pureDark_darker_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_primary_hover_bg: hsla(39, 90%, calc(32% + var(--zd_pureDark_darker_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_primary_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_primary_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_primary_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_primary_box_shadow: rgba(232, 185, 35, 0.2);
 	--zdt_cta_primary_hover_box_shadow: rgba(181, 145, 0, 0.25);
 	--zdt_cta_primary_light_bg: hsla(35, 15%, calc(16% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
@@ -14,21 +14,21 @@
 	--zdt_cta_secondary_text: hsla(0, 0%, calc(100% + var(--zd_pureDark_lighter_high_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_secondary_border: hsla(0, 0%, calc(100% + var(--zd_pureDark_default_inverse_medium_lValue)), calc( 0.15 + var(--zd_alpha_low)));
 	--zdt_cta_secondary_light_border: hsla(38, 30%, calc(21% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_alpha_hover_text: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_alpha_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_alpha_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_text: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_hover_text: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_alpha_hover_border: hsla(39, 90%, calc(32% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_alpha_bg: hsla(220, 3%, calc(21% + var(--zd_pureDark_default_lValue)), calc(1 + var(--zd_alpha_high)));
-	--zdt_cta_beta_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_10_bg: hsla(0, 0%, calc(15% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_beta_border: hsla(37, 67%, calc(53% + var(--zd_pureDark_default_inverse_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_10_bg: hsla(0, 0%, calc(15% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_10_border: hsla(0, 0%, calc(15% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_15_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_15_bg: hsla(0, 2%, calc(8% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_15_border: hsla(0, 2%, calc(8% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_20_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_35_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_20_bg: hsla(217, 23%, calc(11% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_35_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_35_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_35_border: hsla(0, 0%, calc(22% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)));
-	--zdt_cta_grey_40_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_darker_low_lValue)), calc(1 + var(--zd_alpha_low)));
+	--zdt_cta_grey_40_bg: hsla(0, 0%, calc(35% + var(--zd_pureDark_darker_lower_lValue)), calc(1 + var(--zd_alpha_low)));
 	--zdt_cta_grey_40_text: hsla(0, 0%, calc(35% + var(--zd_pureDark_default_inverse_lValue)), calc(1 + var(--zd_alpha_high)));
 	--zdt_cta_grey_40_border: hsla(0, 0%, calc(35% + var(--zd_pureDark_default_inverse_medium_lValue)), calc(1 + var(--zd_alpha_low)))
 }

package/assets/Contrast/darkContrastLightness.module.css

@@ -6,6 +6,7 @@
    --zd_dark_default_inverse_medium_lValue: calc(0 * 1%);
    --zd_dark_darker_lValue: calc(0 * 1%);
    --zd_dark_darker_low_lValue: calc(0 * 1%);
+   --zd_dark_darker_lower_lValue: calc(0 * 1%);
    --zd_dark_lighter_lValue: calc(0 * 1%);
    --zd_dark_lighter_medium_lValue: calc(0 * 1%);
    --zd_dark_lighter_high_lValue: calc(0 * 1%);
@@ -22,6 +23,7 @@
    --zd_dark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
    --zd_dark_darker_lValue: calc(var(--zd_contrastLevel) * -0.80%);
    --zd_dark_darker_low_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_dark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
    --zd_dark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
    --zd_dark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
    --zd_dark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);

package/assets/Contrast/defaultContrastLightness.module.css

@@ -6,6 +6,7 @@
    --zd_default_default_inverse_medium_lValue: calc(0 * 1%);
    --zd_default_darker_lValue: calc(0 * 1%);
    --zd_default_darker_low_lValue: calc(0 * 1%);
+   --zd_default_darker_lower_lValue: calc(0 * 1%);
    --zd_default_lighter_lValue: calc(0 * 1%);
    --zd_default_lighter_medium_lValue: calc(0 * 1%);
    --zd_default_lighter_high_lValue: calc(0 * 1%);
@@ -21,7 +22,8 @@
    --zd_default_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
    --zd_default_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * -1.5%);
    --zd_default_darker_lValue: calc(var(--zd_contrastLevel) * -0.80%);
-   --zd_default_darker_low_lValue: calc(var(--zd_contrastLevel) * -0%);
+   --zd_default_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_default_darker_lower_lValue: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
    --zd_default_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
    --zd_default_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
    --zd_default_lighter_high_lValue: calc(var(--zd_contrastLevel) * 20%);

package/assets/Contrast/pureDarkContrastLightness.module.css

@@ -6,6 +6,7 @@
    --zd_pureDark_default_inverse_medium_lValue: calc(0 * 1%);
    --zd_pureDark_darker_lValue: calc(0 * 1%);
    --zd_pureDark_darker_low_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lower_lValue: calc(0 * 1%);
    --zd_pureDark_lighter_lValue: calc(0 * 1%);
    --zd_pureDark_lighter_medium_lValue: calc(0 * 1%);
    --zd_pureDark_lighter_high_lValue: calc(0 * 1%);
@@ -22,6 +23,7 @@
    --zd_pureDark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
    --zd_pureDark_darker_lValue: calc(var(--zd_contrastLevel) * -0.80%);
    --zd_pureDark_darker_low_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
    --zd_pureDark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
    --zd_pureDark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
    --zd_pureDark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);

package/es/DateTime/DateTime.js

@@ -15,7 +15,6 @@ 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';
 function title(date, year, month) {
@@ -563,16 +562,6 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
   render() {
     const {
       date,
@@ -686,35 +675,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,42 @@
+// 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.Z: represent the timezone (Asia/Kolkata)
+// 16. (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/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/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'
         ]
     }]
 */
@@ -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({

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/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 }; }
@@ -613,16 +612,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() {
@@ -745,33 +734,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,50 @@
+"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.Z: represent the timezone (Asia/Kolkata)
+// 16. (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/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/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({

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-146",
+  "version": "1.0.0-temp-147",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -52,7 +52,7 @@
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/svg": "1.0.0-temp.51",
+    "@zohodesk/svg": "1.0.0-temp.52",
     "@zohodesk/a11y": "1.3.7"
   },
   "dependencies": {
@@ -64,7 +64,7 @@
   "peerDependencies": {
     "@zohodesk/icons": "1.0.0-beta.119",
     "@zohodesk/variables": "1.0.0-beta.30",
-    "@zohodesk/svg": "1.0.0-temp.51",
+    "@zohodesk/svg": "1.0.0-temp.52",
     "@zohodesk/virtualizer": "1.0.3",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",