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

package/es/DropBox/DropBoxElement/useDropboxPosCalc.js

@@ -0,0 +1,51 @@
+import { remConvert } from '../../utils/Common';
+export default function useDropboxPosCalc(props) {
+  let {
+    right,
+    left,
+    top,
+    arrowRight,
+    arrowLeft,
+    arrowTop,
+    arrowBottom,
+    bottom,
+    isModel,
+    direction
+  } = props;
+  const unit = 'rem';
+  let boxstyle = {};
+  let arrowstyle = {};
+  const needBoxStyle = right || left || top || bottom;
+  const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
+  if (needBoxStyle) {
+    boxstyle = !isModel ? direction === 'rtl' ? {
+      right: [remConvert(left)] + unit,
+      left: [remConvert(right)] + unit,
+      top: [remConvert(top)] + unit,
+      bottom: [remConvert(bottom)] + unit
+    } : {
+      right: [remConvert(right)] + unit,
+      left: [remConvert(left)] + unit,
+      top: [remConvert(top)] + unit,
+      bottom: [remConvert(bottom)] + unit
+    } : {};
+  }
+  if (needArrowStyle) {
+    arrowstyle = !isModel ? direction === 'rtl' ? {
+      right: [remConvert(arrowLeft)] + unit,
+      left: [remConvert(arrowRight)] + unit,
+      top: [remConvert(arrowTop)] + unit,
+      bottom: [remConvert(arrowBottom)] + unit
+    } : {
+      right: [remConvert(arrowRight)] + unit,
+      left: [remConvert(arrowLeft)] + unit,
+      top: [remConvert(arrowTop)] + unit,
+      bottom: [remConvert(arrowBottom)] + unit
+    } : {};
+  }
+  return {
+    needBoxStyle,
+    boxstyle,
+    arrowstyle
+  };
+}

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

@@ -0,0 +1,59 @@
+.varClass {
+  /* dropbox default variables */
+  --dropbox_bg_color: var(--zdt_dropbox_default_bg);
+  --dropbox_border_radius: 0;
+  --dropbox_padding: 0;
+  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+
+  /* dropbox arrow default variables */
+  --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);
+
+  /* dropbox responsive default variables */
+  --dropbox_mob_bg_color: var(--zdt_dropbox_mob_bg);
+  --dropbox_mob_close_bg_color: var(--zdt_dropbox_mob_close_bg);
+}
+
+.activateInDelay {
+  composes: modeForward from '../../common/animation.module.css';
+  pointer-events: none;
+}
+
+[dir=ltr] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+[dir=rtl] .activateInDelay {
+  animation-duration: var(--zd_transition1);
+  animation-delay: var(--zd_transition2);
+  animation-name: activateInDelay;
+}
+
+.freezeLayer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  composes: activateInDelay;
+}
+
+[dir=ltr] .freezeLayer {
+  left: 0;
+  right: 0;
+}
+
+[dir=rtl] .freezeLayer {
+  right: 0;
+  left: 0;
+}
+
+.freeze {
+  composes: varClass;
+  background: var(--dropbox_mob_bg_color);
+}
+
+@keyframes activateInDelay {
+  100% {
+    pointer-events: initial;
+  }
+}

package/es/DropBox/css/cssJSLogic.js

@@ -0,0 +1,14 @@
+import { useZIndex } from '../../Provider/ZindexProvider';
+export default function cssJSLogic(props) {
+  const {
+    isActive,
+    needAutoZindex
+  } = props;
+  const zIndex = useZIndex();
+  const zIndexStyle = isActive && needAutoZindex ? {
+    zIndex: zIndex()
+  } : {};
+  return {
+    zIndexStyle
+  };
+}

package/es/DropBox/props/defaultProps.js

@@ -1,22 +1,14 @@
+import { DropBoxElementDefaultProps } from '../DropBoxElement/props/defaultProps';
 export const defaultProps = {
-  animationStyle: 'default',
-  boxPosition: 'bottomLeft',
-  dataId: 'dropBox',
-  dataSelectorId: 'dropBox',
-  isActive: false,
-  isAnimate: false,
-  isArrow: true,
-  isRadius: true,
-  size: 'default',
   needResponsive: true,
-  isAbsolutePositioningNeeded: true,
-  isBoxPaddingNeed: false,
-  isPadding: true,
-  customClass: {},
-  a11y: {},
-  palette: 'default',
-  needAutoZindex: true,
   portalId: 'portal1',
+  isActive: false,
+  isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  needFocusScope: false
+  needFocusScope: false,
+  needAutoZindex: true
+};
+export const DropBoxDefaultProps = {
+  ...DropBoxElementDefaultProps,
+  ...defaultProps
 };

package/es/DropBox/props/propTypes.js

@@ -1,49 +1,15 @@
 import PropTypes from 'prop-types';
+import { DropBoxElementPropTypes } from '../DropBoxElement/props/propTypes';
 export const propTypes = {
-  animationStyle: PropTypes.oneOf(['default', 'bounce']),
-  arrowBottom: PropTypes.number,
-  arrowLeft: PropTypes.number,
-  arrowPosition: PropTypes.oneOf(['start', 'mid', 'end']),
-  arrowRight: PropTypes.number,
-  arrowTop: PropTypes.number,
-  bottom: PropTypes.number,
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  children: PropTypes.element,
-  dataId: PropTypes.string,
-  dataSelectorId: PropTypes.string,
-  forwardRef: PropTypes.object,
-  getRef: PropTypes.func,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isActive: PropTypes.bool,
-  isAnimate: PropTypes.bool,
-  isArrow: PropTypes.bool,
-  isBoxPaddingNeed: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isRadius: PropTypes.bool,
-  left: PropTypes.number,
   needResponsive: PropTypes.bool,
-  onClick: PropTypes.func,
-  needFocusScope: PropTypes.bool,
-  right: PropTypes.number,
-  size: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
-  top: PropTypes.number,
-  tourId: PropTypes.string,
-  htmlId: PropTypes.string,
-  tabIndex: PropTypes.number,
-  customClass: PropTypes.shape({
-    customDropBox: PropTypes.string,
-    customMobileDropBox: PropTypes.string,
-    customDropBoxWrap: PropTypes.string,
-    customMobileDropBoxWrap: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    role: PropTypes.string,
-    ariaMultiselectable: PropTypes.bool,
-    ariaLabelledby: PropTypes.string
-  }),
-  palette: PropTypes.oneOf(['default', 'dark']),
-  needAutoZindex: PropTypes.bool,
   portalId: PropTypes.string,
+  isActive: PropTypes.bool,
+  isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
-  customStyle: PropTypes.object
+  needFocusScope: PropTypes.bool,
+  needAutoZindex: PropTypes.bool
+};
+export const DropBoxPropTypes = {
+  ...DropBoxElementPropTypes,
+  ...propTypes
 };

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/css.js

@@ -31,7 +31,8 @@ import './Tag/Tag.module.css';
 import './Stencils/Stencils.module.css';
 import './PopOver/PopOver.module.css';
 import './DropDown/DropDown.module.css';
-import './DropBox/DropBox.module.css';
+import './DropBox/css/DropBox.module.css';
+import './DropBox/DropBoxElement/css/DropBoxElement.module.css';
 import './DateTime/DateTime.module.css';
 import './DateTime/DateWidget.module.css';
 import './Card/Card.module.css';

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

@@ -3,7 +3,8 @@ const REPLACER_SYMBOL = '$';
 // $ startWith is used for replace the existing style.
 // all other will be append
 
-export default function mergeStyle(defaultStyle, customStyle) {
+export default function mergeStyle(defaultStyle) {
+  let customStyle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let additionalStyle = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
   // if(!Object.keys(defaultStyle).includes('base')) {
   //   throw new Error(`STYLE CUSTOMIZATION RULE - Your style sheet should have "base" class name for customization`);
@@ -17,20 +18,33 @@ export default function mergeStyle(defaultStyle, customStyle) {
         // 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;