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

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/DateTime.module.css

@@ -231,6 +231,6 @@
 .dropBox {
   width: 100%;
   border-radius: 3px;
-  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+  box-shadow: var(--zd_bs_dropbox_bottom);
   background-color: var(--zdt_dropbox_default_bg);
 }

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/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -74,27 +74,23 @@
 
 /* shadow */
 .top_shadow {
-    --dropbox_box_shadow: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
 .left_shadow {
-    --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
 .right_shadow {
-    --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
 .bottom_shadow {
-    --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
-[dir=ltr] .defaultShadow {
-    box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
-}
-
-[dir=rtl] .defaultShadow {
-    box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
+.defaultShadow {
+    box-shadow: var(--zd_bs_dropbox_default);
 }
 
 /* box direction styles */

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

@@ -3,7 +3,7 @@
   --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_box_shadow: var(--zd_bs_dropbox_bottom);
 
   /* dropbox arrow default variables */
   --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);

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';