@zohodesk/components 1.0.0-alpha-238 → 1.0.0-alpha-241

package/lib/DateTime/DateTime.js

@@ -15,8 +15,6 @@ var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
 var _CalendarView = _interopRequireDefault(require("./CalendarView"));
 
-var _DropBox = _interopRequireDefault(require("../DropBox/DropBox"));
-
 var _YearView = _interopRequireDefault(require("./YearView"));
 
 var _DateTimePopupHeader = _interopRequireDefault(require("./DateTimePopupHeader"));
@@ -33,6 +31,12 @@ 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 }; }
@@ -688,6 +692,16 @@ 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() {
@@ -718,7 +732,10 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           isPadding = _this$props7.isPadding,
           i18nKeys = _this$props7.i18nKeys,
           is24Hour = _this$props7.is24Hour,
-          isDefaultPosition = _this$props7.isDefaultPosition;
+          isDefaultPosition = _this$props7.isDefaultPosition,
+          positionsOffset = _this$props7.positionsOffset,
+          targetOffset = _this$props7.targetOffset,
+          isRestrictScroll = _this$props7.isRestrictScroll;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -802,23 +819,32 @@ 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(_DropBox["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
-      }, childEle) : null;
+      }, 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
+        }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, childEle));
+      }) : null;
     }
   }]);
 

package/lib/DateTime/DateWidget.js

@@ -1002,7 +1002,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           needErrorOnBlur = _this$props11.needErrorOnBlur,
           htmlId = _this$props11.htmlId,
           iconOnHover = _this$props11.iconOnHover,
-          is24Hour = _this$props11.is24Hour;
+          is24Hour = _this$props11.is24Hour,
+          isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
+          positionsOffset = _this$props11.positionsOffset,
+          targetOffset = _this$props11.targetOffset,
+          isRestrictScroll = _this$props11.isRestrictScroll;
       var _this$state5 = this.state,
           _this$state5$selected = _this$state5.selected,
           value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
@@ -1081,7 +1085,11 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         needAction: isDateTime,
         onDateSelect: !isDateTime ? this.handleSelect : null,
         i18nKeys: i18nKeys,
-        is24Hour: is24Hour
+        is24Hour: is24Hour,
+        isAbsolute: isAbsolutePositioningNeeded,
+        positionsOffset: positionsOffset,
+        targetOffset: targetOffset,
+        isRestrictScroll: isRestrictScroll
       }));
     }
   }]);

package/lib/DateTime/DateWidget.module.css

@@ -36,7 +36,3 @@
 .placeHolder input {
   color: var(--zdt_datewidget_placeholder_text);
 }
-.placeHolder input::selection {
-  color: var(--zdt_datewidget_placeholder_selection_text);
-  background: var(--zdt_datewidget_placeholder_selection_bg);
-}

package/lib/DateTime/docs/DateTime__default.docs.js

@@ -0,0 +1,142 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DateTime = _interopRequireDefault(require("../DateTime"));
+
+var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
+
+var _timezonedata = _interopRequireDefault(require("./timezonedata.json"));
+
+var _CodeExtractor = _interopRequireDefault(require("@zohodesk/docstool/lib/CodeExtractor/CodeExtractor"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var DateTime__default = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateTime__default, _React$Component);
+
+  var _super = _createSuper(DateTime__default);
+
+  function DateTime__default(props) {
+    var _this;
+
+    _classCallCheck(this, DateTime__default);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      dateTime: '2019-01-01T00:00:00.000',
+      date: '2019-01-01',
+      dateTimeformattedValue: '',
+      dateFormattedValue: ''
+    };
+    _this.handleDateTimeChange = _this.handleDateTimeChange.bind(_assertThisInitialized(_this));
+    _this.handleGetMethods = _this.handleGetMethods.bind(_assertThisInitialized(_this));
+    _this.handleDateChange = _this.handleDateChange.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(DateTime__default, [{
+    key: "handleDateTimeChange",
+    value: function handleDateTimeChange(dateTime, dateTimeformattedValue) {
+      this.setState({
+        dateTime: dateTime,
+        dateTimeformattedValue: dateTimeformattedValue
+      });
+    }
+  }, {
+    key: "handleDateChange",
+    value: function handleDateChange(date, dateFormattedValue) {
+      this.setState({
+        date: date,
+        dateFormattedValue: dateFormattedValue
+      });
+    }
+  }, {
+    key: "handleGetMethods",
+    value: function handleGetMethods(methods) {
+      var resetLocalDate = methods.resetLocalDate;
+      this.resetLocalDate = resetLocalDate;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+          dateTime = _this$state.dateTime,
+          date = _this$state.date,
+          dateFormattedValue = _this$state.dateFormattedValue,
+          dateTimeformattedValue = _this$state.dateTimeformattedValue;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          width: '370px',
+          height: '1000px',
+          padding: '30px'
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", null, dateFormattedValue), /*#__PURE__*/_react["default"].createElement(_CodeExtractor["default"], null, /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+        value: date,
+        onChange: this.handleDateChange,
+        dateFormat: "MM.DD.YYYY",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+        isAbsolute: false,
+        needAction: false,
+        isDateTimeField: false // onSelect={this.handleDateTimeChange}
+        ,
+        getMethods: this.handleGetMethods // onError={() => {
+        //   this.resetLocalDate();
+        // }}
+        ,
+        isDefaultPosition: true
+      })), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("div", null, dateTimeformattedValue), /*#__PURE__*/_react["default"].createElement(_CodeExtractor["default"], null, /*#__PURE__*/_react["default"].createElement(_DateTime["default"], {
+        value: dateTime,
+        onChange: this.handleDateTimeChange,
+        dateFormat: "MM.DD.YYYY",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+        isAbsolute: false,
+        needAction: false,
+        getMethods: this.handleGetMethods,
+        isDateTimeField: true // onError={() => {
+        //   this.resetLocalDate();
+        // }}
+        ,
+        isDefaultPosition: true
+      })));
+    }
+  }]);
+
+  return DateTime__default;
+}(_react["default"].Component);
+
+exports["default"] = DateTime__default;
+
+if (false) {
+  DateTime__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/lib/DateTime/docs/DateWidget__default.docs.js

@@ -0,0 +1,240 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DateWidget = _interopRequireDefault(require("../DateWidget"));
+
+var _CodeExtractor = _interopRequireDefault(require("@zohodesk/docstool/lib/CodeExtractor/CodeExtractor"));
+
+var _timezonedata = _interopRequireDefault(require("./timezonedata.json"));
+
+var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
+
+var _Layout = require("../../Layout");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var DateWidget__default = /*#__PURE__*/function (_React$Component) {
+  _inherits(DateWidget__default, _React$Component);
+
+  var _super = _createSuper(DateWidget__default);
+
+  function DateWidget__default(props) {
+    var _this;
+
+    _classCallCheck(this, DateWidget__default);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      dateTime: '2021-08-13T20:00:00.000Z',
+      date: '1999-04-03'
+    };
+    _this.handleDateChange = _this.handleDateChange.bind(_assertThisInitialized(_this));
+    _this.handleDateTimeChange = _this.handleDateTimeChange.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(DateWidget__default, [{
+    key: "handleDateChange",
+    value: function handleDateChange(date) {
+      this.setState({
+        date: date
+      });
+    }
+  }, {
+    key: "handleDateTimeChange",
+    value: function handleDateTimeChange(dateTime) {
+      this.setState({
+        dateTime: dateTime
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var i18nKey = {
+        submitText: 'OK',
+        cancelText: 'Close',
+        timeText: 'Choose Time',
+        nextMonthTitleText: 'Go Next',
+        prevMonthTitleText: 'Go Prev',
+        monthNames: ['ஜனவரி', 'பிப்ரவரி', 'மார்ச்', 'ஏப்ரல்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆகஸ்ட்', 'செப்டம்பர்', 'அக்டோபர்', 'நவம்பர்', 'டிசம்பர்'],
+        monthNamesShort: ['ஜன', 'பிப்', 'மார்', 'ஏப்', 'மே', 'ஜூன்', 'ஜூலை', 'ஆக', 'செப்', 'அக்', 'நவ', 'டிச'],
+        dayNames: ['ஞாயிறு', 'திங்கள்', 'செவ்வாய்', 'புதன்', 'வியாழன்', 'வெள்ளி', 'சனி'],
+        dayNamesShort: ['ஞா', 'தி', 'செ', 'பு', 'வி', 'வெ', 'ச'],
+        ampmText: ['மு.ப', 'பி.ப']
+      };
+      var dataFormats = ['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'];
+      var _this$state = this.state,
+          date = _this$state.date,
+          dateTime = _this$state.dateTime;
+      var boxStyle = {
+        padding: '10px',
+        border: '1px solid #000',
+        margin: '5px',
+        minWidth: '300px'
+      };
+      var headingStyle = {
+        fontSize: '14px',
+        textDecoration: 'underline',
+        marginBottom: '10px'
+      };
+      return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        alignBox: "row",
+        wrap: "wrap"
+      }, /*#__PURE__*/_react["default"].createElement(_CodeExtractor["default"], null, dataFormats.map(function (format) {
+        return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          flexible: true,
+          style: boxStyle
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: headingStyle
+        }, format), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+          textBoxSize: "xmedium",
+          textBoxVariant: "primary",
+          value: dateTime,
+          onSelect: _this2.handleDateTimeChange,
+          isDateTime: true,
+          position: "bottomLeft",
+          dateFormat: format,
+          timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+          isEditable: true,
+          is24Hour: false,
+          i18nKeys: i18nKey
+        }));
+      }), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: headingStyle
+      }, "24 Hours"), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+        textBoxSize: "xmedium",
+        textBoxVariant: "primary",
+        value: dateTime,
+        onSelect: this.handleDateTimeChange,
+        isDateTime: true,
+        position: "bottomLeft",
+        dateFormat: "MMM-dd-yyyy",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+        needDefaultTime: true,
+        is24Hour: true
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: headingStyle
+      }, "Default Time"), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+        textBoxSize: "xmedium",
+        textBoxVariant: "primary",
+        value: dateTime,
+        onSelect: this.handleDateTimeChange,
+        isDateTime: true,
+        position: "bottomLeft",
+        dateFormat: "MMM-dd-yyyy",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+        needDefaultTime: true
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: headingStyle
+      }, "ReadOnly"), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+        textBoxSize: "xmedium",
+        textBoxVariant: "primary",
+        value: dateTime,
+        onSelect: this.handleDateTimeChange,
+        isDateTime: true,
+        position: "bottomLeft",
+        dateFormat: "yyyy.MM.dd",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+        needDefaultTime: false,
+        isReadOnly: true
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: headingStyle
+      }, "Without Time"), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+        textBoxSize: "xmedium",
+        textBoxVariant: "primary",
+        value: date,
+        onSelect: this.handleDateChange,
+        isDateTime: false,
+        position: "bottomLeft",
+        dateFormat: "yyyy.MM.dd",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone)
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: headingStyle
+      }, "Disabled"), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+        textBoxSize: "xmedium",
+        textBoxVariant: "primary",
+        value: date,
+        onSelect: this.handleDateChange,
+        isDateTime: false,
+        position: "bottomLeft",
+        dateFormat: "MM-dd-yyyy",
+        isDisabled: true,
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone)
+      })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        flexible: true,
+        style: boxStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: headingStyle
+      }, "Hide Current Year"), /*#__PURE__*/_react["default"].createElement(_DateWidget["default"], {
+        textBoxSize: "xmedium",
+        textBoxVariant: "primary",
+        value: dateTime,
+        onSelect: this.handleDateTimeChange,
+        isDateTime: true,
+        position: "bottomLeft",
+        dateFormat: "MMM-dd-yyyy",
+        timeZone: _datetimejs["default"].tz.unpack(_timezonedata["default"].timezone),
+        needDefaultTime: true,
+        is24Hour: true,
+        isEditable: true,
+        isHideCurrentYear: true
+      })))));
+    }
+  }]);
+
+  return DateWidget__default;
+}(_react["default"].Component);
+
+exports["default"] = DateWidget__default;
+
+if (false) {
+  DateWidget__default.docs = {
+    componentGroup: 'Form Elements',
+    folderName: 'Style Guide'
+  };
+}

package/lib/DateTime/docs/timezonedata.json

@@ -0,0 +1 @@
+{ "timezone": "7Q.W 80 70 70 70|0121213412121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121212121|-3tFE0 1nEe0 1nX0 11B0 1nX0 SgN0 8x10 iy0 5Wp1 1VaX 3dA0 WM0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1o00 11A0 1qM0 WM0 1qM0 1cM0 1cM0 1cM0 1cM0 1cM0 1cM0 1fA0 1a00 1fA0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1cN0 1cL0 1cN0 1cL0 s10 1Vz0 LB0 1BX0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 1cN0 1fz0 1a10 1fz0 1cN0 1cL0 1cN0 1cL0 1cN0 1cL0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 14p0 1lb0 14p0 1lb0 14p0 1nX0 11B0 1nX0 11B0 1nX0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Rd0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0 Op0 1zb0|15e6" }

package/lib/DropBox/docs/DropBox__custom.docs.js

@@ -0,0 +1,122 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _DropBox = _interopRequireDefault(require("../DropBox"));
+
+var _docStyleModule = _interopRequireDefault(require("../../common/docStyle.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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+var DropBox__custom = /*#__PURE__*/function (_Component) {
+  _inherits(DropBox__custom, _Component);
+
+  var _super = _createSuper(DropBox__custom);
+
+  function DropBox__custom() {
+    _classCallCheck(this, DropBox__custom);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(DropBox__custom, [{
+    key: "render",
+    value: function render() {
+      var style = {
+        height: '80px',
+        width: '100px',
+        position: 'relative',
+        display: 'inline-block',
+        background: '#e6e5e5',
+        fontSize: '14px'
+      },
+          boxstyle = {
+        height: '100px',
+        textAlign: 'center',
+        fontSize: 'var(--zd_size20)'
+      },
+          containerStyle = {
+        display: 'inline-block',
+        verticalAlign: 'top',
+        width: 'calc(33.3333333% - 300px)',
+        marginBottom: '150px',
+        marginLeft: '275px'
+      },
+          dropBoxStyle = {
+        display: 'flex',
+        flexWrap: 'wrap',
+        flexDirection: 'row',
+        justifyContent: 'right'
+      };
+      var sizes = ['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default'];
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          dropBoxStyle: dropBoxStyle
+        }
+      }, sizes.map(function (size, i) {
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          style: containerStyle,
+          key: i
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: style
+        }, /*#__PURE__*/_react["default"].createElement(_DropBox["default"], {
+          size: size,
+          isActive: true,
+          isModel: false,
+          customClass: {
+            customDropBox: _docStyleModule["default"].customDropbox,
+            customDropBoxWrap: _docStyleModule["default"].dropboxSize,
+            customMobileDropBox: _docStyleModule["default"].mobDropbox,
+            customMobileDropBoxWrap: _docStyleModule["default"].mobBg
+          }
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          style: boxstyle
+        }, /*#__PURE__*/_react["default"].createElement("li", null, "DropBox"), /*#__PURE__*/_react["default"].createElement("li", null, "Size - ", size)))));
+      }));
+    }
+  }]);
+
+  return DropBox__custom;
+}(_react.Component);
+
+exports["default"] = DropBox__custom;
+
+if (false) {
+  DropBox__custom.docs = {
+    componentGroup: 'Atom',
+    folderName: 'Style Guide',
+    external: true,
+    description: ' '
+  };
+}