@zohodesk/components 1.0.0-temp-70 → 1.0.0-temp-71

package/lib/CheckBox/CheckBox.module.css

@@ -101,17 +101,15 @@
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
 }
-.primary:hover
-/* .primary:focus  */
-{
+.primary:hover,
+.primary:focus {
   --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
 .checkedprimary {
   --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
 }
-.danger:hover
-/* .danger:focus */
- {
+.danger:hover,
+.danger:focus {
   --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
 }
 .checkeddanger {
@@ -122,17 +120,15 @@
 .checkeddangerLabel {
   color: var(--checkbox_checked_active_color);
 }
-.activeprimaryLabel:hover
-/* .activeprimaryLabel:focus  */
-{
+.activeprimaryLabel:hover,
+.activeprimaryLabel:focus {
   --label_text_color: var(--zdt_checkbox_label_primary_text);
 }
 .checkedprimaryLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
 }
-.activedangerLabel:hover
-/* .activedangerLabel:focus  */
-{
+.activedangerLabel:hover,
+.activedangerLabel:focus {
   --label_text_color: var(--zdt_checkbox_label_danger_text);
 }
 .checkeddangerLabel {

package/lib/DateTime/CalendarView.js

@@ -9,9 +9,7 @@ exports["default"] = exports.Span = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Layout = require("../Layout");
 
@@ -212,8 +210,18 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 exports["default"] = CalendarView;
-CalendarView.propTypes = _propTypes.CalendarView_propTypes;
-CalendarView.defaultProps = _defaultProps.CalendarView_defaultProps;
+CalendarView.propTypes = {
+  dataId: _propTypes["default"].string,
+  date: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  month: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  needBorder: _propTypes["default"].bool,
+  onSelect: _propTypes["default"].func,
+  year: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+};
+CalendarView.defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
 
 var Span = /*#__PURE__*/function (_React$PureComponent2) {
   _inherits(Span, _React$PureComponent2);
@@ -262,5 +270,16 @@ var Span = /*#__PURE__*/function (_React$PureComponent2) {
 }(_react["default"].PureComponent);
 
 exports.Span = Span;
-Span.propTypes = _propTypes.Span_propTypes;
-Span.defaultProps = _defaultProps.Span_defaultProps;
+Span.propTypes = {
+  dataId: _propTypes["default"].string,
+  handleSelect: _propTypes["default"].func,
+  i: _propTypes["default"].number,
+  incremday: _propTypes["default"].number,
+  isActive: _propTypes["default"].bool,
+  tdclass: _propTypes["default"].string,
+  userSeeMonth: _propTypes["default"].number,
+  userSeeYear: _propTypes["default"].number
+};
+Span.defaultProps = {
+  dataId: 'calendar-view'
+};

package/lib/DateTime/DateTime.js

@@ -9,14 +9,14 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 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,12 +33,6 @@ 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 }; }
@@ -694,16 +688,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() {
@@ -734,11 +718,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
           isPadding = _this$props7.isPadding,
           i18nKeys = _this$props7.i18nKeys,
           is24Hour = _this$props7.is24Hour,
-          isDefaultPosition = _this$props7.isDefaultPosition,
-          positionsOffset = _this$props7.positionsOffset,
-          targetOffset = _this$props7.targetOffset,
-          isRestrictScroll = _this$props7.isRestrictScroll,
-          dropBoxPortalId = _this$props7.dropBoxPortalId;
+          isDefaultPosition = _this$props7.isDefaultPosition;
       var _i18nKeys$timeText = i18nKeys.timeText,
           timeText = _i18nKeys$timeText === void 0 ? 'Time' : _i18nKeys$timeText,
           _i18nKeys$submitText = i18nKeys.submitText,
@@ -822,33 +802,23 @@ 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(_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;
     }
   }]);
 
@@ -856,5 +826,64 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
 }(_react["default"].PureComponent);
 
 exports["default"] = DateTime;
-DateTime.propTypes = _propTypes.DateTime_propTypes;
-DateTime.defaultProps = _defaultProps.DateTime_defaultProps;
+DateTime.propTypes = {
+  boxSize: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dateFormat: _propTypes["default"].string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  defaultTime: _propTypes["default"].string,
+  getMethods: _propTypes["default"].func,
+  getRef: _propTypes["default"].func,
+  i18nKeys: _propTypes["default"].shape({
+    timeText: _propTypes["default"].string.isRequired,
+    submitText: _propTypes["default"].string.isRequired,
+    cancelText: _propTypes["default"].string.isRequired,
+    hourEmptyText: _propTypes["default"].string.isRequired,
+    minuteEmptyText: _propTypes["default"].string.isRequired,
+    nextMonthTitleText: _propTypes["default"].string.isRequired,
+    prevMonthTitleText: _propTypes["default"].string.isRequired
+  }),
+  innerClass: _propTypes["default"].string,
+  isAbsolute: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  isDateTimeField: _propTypes["default"].bool,
+  isPadding: _propTypes["default"].bool,
+  isReady: _propTypes["default"].bool,
+  max: _propTypes["default"].string,
+  maxErrorText: _propTypes["default"].string,
+  min: _propTypes["default"].string,
+  minErrorText: _propTypes["default"].string,
+  // eslint-disable-next-line react/no-unused-prop-types
+  needAction: _propTypes["default"].bool,
+  needDefaultTime: _propTypes["default"].bool,
+  needResponsive: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  onClear: _propTypes["default"].func,
+  onClick: _propTypes["default"].func,
+  onDateSelect: _propTypes["default"].func,
+  onError: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  position: _propTypes["default"].string,
+  timeZone: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  is24Hour: _propTypes["default"].bool,
+  isDefaultPosition: _propTypes["default"].bool
+};
+DateTime.defaultProps = {
+  isDateTimeField: true,
+  dataId: 'dateTime',
+  needDefaultTime: true,
+  isAbsolute: true,
+  isAnimate: true,
+  needAction: true,
+  boxSize: 'large',
+  className: '',
+  innerClass: '',
+  dateFormat: 'dd/MM/yyyy',
+  isPadding: false,
+  i18nKeys: {},
+  is24Hour: false,
+  isDefaultPosition: false
+};

package/lib/DateTime/DateTime.module.css

@@ -25,6 +25,7 @@
 }
 
 .datesStr {
+  color: var(--zdt_datetime_datestr_text);
   font-family: var(--zd_regular);
 }
 .grid {
@@ -38,7 +39,6 @@
 .thArrow,
 .datesStr {
   font-size: var(--zd_font_size13);
-  color: var(--zdt_datetime_datestr_text);
 }
 .thArrow, .datesStr {
   cursor: pointer;

package/lib/DateTime/DateWidget.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _datetimejs = _interopRequireDefault(require("@zohodesk/datetimejs"));
 
@@ -1004,12 +1002,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
           needErrorOnBlur = _this$props11.needErrorOnBlur,
           htmlId = _this$props11.htmlId,
           iconOnHover = _this$props11.iconOnHover,
-          is24Hour = _this$props11.is24Hour,
-          isAbsolutePositioningNeeded = _this$props11.isAbsolutePositioningNeeded,
-          positionsOffset = _this$props11.positionsOffset,
-          targetOffset = _this$props11.targetOffset,
-          isRestrictScroll = _this$props11.isRestrictScroll,
-          dropBoxPortalId = _this$props11.dropBoxPortalId;
+          is24Hour = _this$props11.is24Hour;
       var _this$state5 = this.state,
           _this$state5$selected = _this$state5.selected,
           value = _this$state5$selected === void 0 ? '' : _this$state5$selected,
@@ -1088,12 +1081,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         needAction: isDateTime,
         onDateSelect: !isDateTime ? this.handleSelect : null,
         i18nKeys: i18nKeys,
-        is24Hour: is24Hour,
-        isAbsolute: isAbsolutePositioningNeeded,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        dropBoxPortalId: dropBoxPortalId
+        is24Hour: is24Hour
       }));
     }
   }]);
@@ -1101,8 +1089,88 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
   return DateWidgetComponent;
 }(_react["default"].Component);
 
-DateWidgetComponent.defaultProps = _defaultProps.DateWidget_defaultProps;
-DateWidgetComponent.propTypes = _propTypes.DateWidget_propTypes;
+DateWidgetComponent.defaultProps = {
+  borderColor: 'default',
+  dataId: 'dateWidget',
+  dateFormat: 'MM/dd/yyyy',
+  isDateTime: false,
+  isDisabled: false,
+  isPopupOpenOnEnter: false,
+  isReadOnly: false,
+  needBorder: true,
+  needDefaultTime: true,
+  placeholder: '-None-',
+  textBoxSize: 'medium',
+  textBoxVariant: 'default',
+  timeZone: null,
+  isPopupOpenOnClick: true,
+  isPopupCloseOnClick: false,
+  cantEditOnPopupOpen: true,
+  i18nKeys: {},
+  needErrorOnBlur: false,
+  isEditable: false,
+  iconOnHover: false,
+  is24Hour: false
+};
+DateWidgetComponent.propTypes = {
+  borderColor: _propTypes["default"].oneOf(['transparent', 'default']),
+  cantEditOnPopupOpen: _propTypes["default"].bool,
+  children: _propTypes["default"].object,
+  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']),
+  defaultPosition: _propTypes["default"].oneOf(['top', 'bottom', 'right', 'left']),
+  defaultTime: _propTypes["default"].string,
+  getContainerRef: _propTypes["default"].func,
+  getMethods: _propTypes["default"].func,
+  getRef: _propTypes["default"].func,
+  getTargetRef: _propTypes["default"].func,
+  i18nKeys: _propTypes["default"].object,
+  id: _propTypes["default"].string,
+  isDateTime: _propTypes["default"].bool,
+  isDisabled: _propTypes["default"].bool,
+  isEditable: _propTypes["default"].bool,
+  isPopupCloseOnClick: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  isPopupOpenOnClick: _propTypes["default"].bool,
+  isPopupOpenOnEnter: _propTypes["default"].bool,
+  isPopupReady: _propTypes["default"].bool,
+  isReadOnly: _propTypes["default"].bool,
+  max: _propTypes["default"].string,
+  maxErrorText: _propTypes["default"].string,
+  min: _propTypes["default"].string,
+  minErrorText: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
+  needDefaultTime: _propTypes["default"].bool,
+  needErrorOnBlur: _propTypes["default"].bool,
+  needResponsive: _propTypes["default"].bool,
+  onFailValidation: _propTypes["default"].func,
+  onKeyDown: _propTypes["default"].func,
+  onPassValidation: _propTypes["default"].func,
+  onSelect: _propTypes["default"].func,
+  placeholder: _propTypes["default"].string,
+  position: _propTypes["default"].string,
+  removeClose: _propTypes["default"].func,
+  textBoxSize: _propTypes["default"].string,
+  textBoxVariant: _propTypes["default"].string,
+  timeZone: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  togglePopup: _propTypes["default"].func,
+  validation: _propTypes["default"].shape({
+    validate: _propTypes["default"].bool,
+    validateOn: _propTypes["default"].string,
+    rulesOrder: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    rules: _propTypes["default"].object,
+    messages: _propTypes["default"].object
+  }),
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  htmlId: _propTypes["default"].string,
+  iconOnHover: _propTypes["default"].bool,
+  is24Hour: _propTypes["default"].bool,
+  isHideCurrentYear: _propTypes["default"].bool,
+  onFocus: _propTypes["default"].func,
+  onBlur: _propTypes["default"].func
+};
 var DateWidget = (0, _Popup["default"])(DateWidgetComponent);
 DateWidget.defaultProps = DateWidgetComponent.defaultProps; // eslint-disable-next-line no-undef
 

package/lib/DateTime/DateWidget.module.css

@@ -36,3 +36,7 @@
 .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/YearView.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _virtualizer = require("@zohodesk/virtualizer");
 
@@ -313,5 +311,14 @@ var YearView = /*#__PURE__*/function (_React$PureComponent3) {
 }(_react["default"].PureComponent);
 
 exports["default"] = YearView;
-YearView.propTypes = _propTypes.YearView_propTypes;
-YearView.defaultProps = _defaultProps.YearView_defaultProps;
+YearView.propTypes = {
+  dataId: _propTypes["default"].string,
+  needBorder: _propTypes["default"].bool,
+  onSelectMonth: _propTypes["default"].func,
+  onSelectYear: _propTypes["default"].func,
+  viewedYear: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+};
+YearView.defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};

package/lib/DateTime/YearView.module.css

@@ -10,7 +10,6 @@
   font-size: var(--zd_font_size12);
   line-height: var(--zd_size26);
   height: var(--zd_size26);
-  color: var(--zdt_yearview_month_text);
   text-align: center;
   margin: 0 0 var(--zd_size1);
   cursor: pointer;

package/lib/DropBox/DropBox.js

@@ -9,9 +9,7 @@ exports["default"] = exports.DropBoxElement = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _defaultProps = require("./props/defaultProps");
-
-var _propTypes = require("./props/propTypes");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Common = require("../utils/Common");
 
@@ -173,7 +171,7 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         } : {};
       }
 
-      boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+      boxPosition = boxPosition ? boxPosition : 'bottomCenter';
       var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
       /*getting box direction*/
 
@@ -313,9 +311,77 @@ var DropBox = /*#__PURE__*/function (_React$Component2) {
 }(_react["default"].Component);
 
 exports["default"] = DropBox;
-DropBox.propTypes = _propTypes.propTypes;
+DropBox.propTypes = {
+  animationStyle: _propTypes["default"].oneOf(['default', 'bounce']),
+  arrowBottom: _propTypes["default"].number,
+  arrowLeft: _propTypes["default"].number,
+  arrowPosition: _propTypes["default"].oneOf(['start', 'mid', 'end']),
+  arrowRight: _propTypes["default"].number,
+  arrowTop: _propTypes["default"].number,
+  bottom: _propTypes["default"].number,
+  boxPosition: _propTypes["default"].oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
+  children: _propTypes["default"].element,
+  dataId: _propTypes["default"].string,
+  forwardRef: _propTypes["default"].object,
+  getRef: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  isAnimate: _propTypes["default"].bool,
+  isArrow: _propTypes["default"].bool,
+  isBoxPaddingNeed: _propTypes["default"].bool,
+  isPadding: _propTypes["default"].bool,
+  isRadius: _propTypes["default"].bool,
+  left: _propTypes["default"].number,
+  needResponsive: _propTypes["default"].bool,
+  onClick: _propTypes["default"].func,
+  right: _propTypes["default"].number,
+  size: _propTypes["default"].oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
+  top: _propTypes["default"].number,
+  tourId: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
+  tabIndex: _propTypes["default"].number,
+  customClass: _propTypes["default"].shape({
+    customDropBox: _propTypes["default"].string,
+    customMobileDropBox: _propTypes["default"].string,
+    customDropBoxWrap: _propTypes["default"].string,
+    customMobileDropBoxWrap: _propTypes["default"].string
+  }),
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaMultiselectable: _propTypes["default"].bool,
+    ariaLabelledby: _propTypes["default"].string
+  }),
+  palette: _propTypes["default"].oneOf(['default', 'dark']),
+  needAutoZindex: _propTypes["default"].bool,
+  portalId: _propTypes["default"].string,
+  isRestrictScroll: _propTypes["default"].bool,
+  customStyle: _propTypes["default"].object
+};
+DropBox.contextTypes = {
+  direction: _propTypes["default"].string,
+  isReducedMotion: _propTypes["default"].bool
+};
 DropBox.contextType = _LibraryContextInit["default"];
-DropBox.defaultProps = _defaultProps.defaultProps;
+DropBox.defaultProps = {
+  animationStyle: 'default',
+  boxPosition: 'bottomLeft',
+  dataId: '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',
+  isRestrictScroll: false
+};
 
 if (false) {
   DropBox.docs = {

package/lib/DropDown/DropDown.js

@@ -9,9 +9,7 @@ exports["default"] = exports.DropDownTarget = exports.DropDownItemContainer = ex
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _DropDownModule = _interopRequireDefault(require("./DropDown.module.css"));
 
@@ -67,7 +65,24 @@ var DropDown = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = DropDown;
-DropDown.propTypes = _propTypes.DropDown_propTypes;
+DropDown.propTypes = {
+  arrowBottom: _propTypes["default"].string,
+  arrowLeft: _propTypes["default"].string,
+  arrowPosition: _propTypes["default"].string,
+  arrowRight: _propTypes["default"].string,
+  arrowTop: _propTypes["default"].string,
+  bottom: _propTypes["default"].string,
+  boxPosition: _propTypes["default"].string,
+  children: _propTypes["default"].node,
+  isAnimate: _propTypes["default"].bool,
+  isArrow: _propTypes["default"].bool,
+  isPopupOpen: _propTypes["default"].bool,
+  left: _propTypes["default"].string,
+  onClick: _propTypes["default"].func,
+  right: _propTypes["default"].string,
+  size: _propTypes["default"].string,
+  top: _propTypes["default"].string
+};
 
 if (false) {
   DropDown.docs = {
@@ -99,7 +114,9 @@ var DropDownTarget = /*#__PURE__*/function (_React$Component2) {
 }(_react["default"].Component);
 
 exports.DropDownTarget = DropDownTarget;
-DropDownTarget.propTypes = _propTypes.DropDownTarget_propTypes;
+DropDownTarget.propTypes = {
+  children: _propTypes["default"].node
+};
 
 var DropDownContainer = /*#__PURE__*/function (_React$Component3) {
   _inherits(DropDownContainer, _React$Component3);
@@ -124,7 +141,9 @@ var DropDownContainer = /*#__PURE__*/function (_React$Component3) {
 }(_react["default"].Component);
 
 exports.DropDownContainer = DropDownContainer;
-DropDownContainer.propTypes = _propTypes.DropDownContainer_propTypes;
+DropDownContainer.propTypes = {
+  children: _propTypes["default"].node
+};
 
 var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
   _inherits(DropDownItemContainer, _React$Component4);
@@ -173,5 +192,12 @@ var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
 }(_react["default"].Component);
 
 exports.DropDownItemContainer = DropDownItemContainer;
-DropDownItemContainer.propTypes = _propTypes.DropDownItemContainer_propTypes;
-DropDownItemContainer.defaultProps = _defaultProps.DropDownItemContainer_defaultProps;
+DropDownItemContainer.propTypes = {
+  children: _propTypes["default"].node,
+  dataId: _propTypes["default"].string,
+  getRef: _propTypes["default"].func,
+  onScroll: _propTypes["default"].func
+};
+DropDownItemContainer.defaultProps = {
+  dataId: 'drpdwnItemContainer'
+};

package/lib/DropDown/DropDownHeading.js

@@ -9,9 +9,7 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _propTypes = require("./props/propTypes");
-
-var _defaultProps = require("./props/defaultProps");
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _DropDownHeadingModule = _interopRequireDefault(require("./DropDownHeading.module.css"));
 
@@ -77,8 +75,24 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
 }(_react["default"].Component);
 
 exports["default"] = DropDownHeading;
-DropDownHeading.propTypes = _propTypes.DropDownHeading_propTypes;
-DropDownHeading.defaultProps = _defaultProps.DropDownHeading_defaultProps;
+DropDownHeading.propTypes = {
+  children: _propTypes["default"].node,
+  customClass: _propTypes["default"].string,
+  palette: _propTypes["default"].oneOf(['light', 'dark']),
+  text: _propTypes["default"].string,
+  title: _propTypes["default"].string,
+  htmlId: _propTypes["default"].string,
+  a11y: _propTypes["default"].shape({
+    role: _propTypes["default"].string,
+    ariaLabelledby: _propTypes["default"].string
+  })
+};
+DropDownHeading.defaultProps = {
+  customClass: '',
+  children: null,
+  palette: 'light',
+  a11y: {}
+};
 
 if (false) {
   DropDownHeading.docs = {