@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/lib/v1/DateTime/props/defaultProps.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YearView_defaultProps = exports.Time_defaultProps = exports.Span_defaultProps = exports.DateWidget_defaultProps = exports.DateTime_defaultProps = exports.DateTimePopupFooter_defaultProps = exports.CalendarView_defaultProps = void 0;
+var CalendarView_defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
+exports.CalendarView_defaultProps = CalendarView_defaultProps;
+var Span_defaultProps = {
+  dataId: 'calendar-view'
+};
+exports.Span_defaultProps = Span_defaultProps;
+var 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,
+  customDateFormat: null
+};
+exports.DateTime_defaultProps = DateTime_defaultProps;
+var DateWidget_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
+};
+exports.DateWidget_defaultProps = DateWidget_defaultProps;
+var YearView_defaultProps = {
+  dataId: 'dateContainer',
+  needBorder: true
+};
+exports.YearView_defaultProps = YearView_defaultProps;
+var DateTimePopupFooter_defaultProps = {
+  dataId: 'DateTimePopupFooter'
+};
+exports.DateTimePopupFooter_defaultProps = DateTimePopupFooter_defaultProps;
+var Time_defaultProps = {
+  dataId: 'Time'
+};
+exports.Time_defaultProps = Time_defaultProps;

package/lib/v1/DateTime/props/propTypes.js

@@ -0,0 +1,227 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.YearView_propTypes = exports.Time_propTypes = exports.Span_propTypes = exports.DaysRow_propTypes = exports.DateWidget_propTypes = exports.DateTime_propTypes = exports.DateTimePopupHeader_propTypes = exports.DateTimePopupFooter_propTypes = exports.CalendarView_propTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _dateFormats = require("../../../DateTime/dateFormatUtils/dateFormats");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var CalendarView_propTypes = {
+  dataId: _propTypes["default"].string,
+  date: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  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]),
+  dayNames: _propTypes["default"].array,
+  dayNamesShort: _propTypes["default"].array,
+  todayMonth: _propTypes["default"].string,
+  todayDate: _propTypes["default"].string,
+  todayYear: _propTypes["default"].string,
+  startDate: _propTypes["default"].string,
+  endDate: _propTypes["default"].string
+};
+exports.CalendarView_propTypes = CalendarView_propTypes;
+var 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,
+  isToday: _propTypes["default"].bool,
+  startDate: _propTypes["default"].string,
+  endDate: _propTypes["default"].string
+};
+exports.Span_propTypes = Span_propTypes;
+var 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,
+  customDateFormat: _propTypes["default"].string,
+  positionsOffset: _propTypes["default"].array,
+  targetOffset: _propTypes["default"].string,
+  isRestrictScroll: _propTypes["default"].bool,
+  dropBoxPortalId: _propTypes["default"].string,
+  startDate: _propTypes["default"].string,
+  endDate: _propTypes["default"].string
+};
+exports.DateTime_propTypes = DateTime_propTypes;
+var DateWidget_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(_toConsumableArray(_dateFormats.dataFormatList)),
+  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,
+  boxSize: _propTypes["default"].string,
+  onError: _propTypes["default"].func,
+  isAbsolutePositioningNeeded: _propTypes["default"].bool,
+  positionsOffset: _propTypes["default"].array,
+  targetOffset: _propTypes["default"].array,
+  isRestrictScroll: _propTypes["default"].bool,
+  dropBoxPortalId: _propTypes["default"].string,
+  a11y: _propTypes["default"].object,
+  startDate: _propTypes["default"].string,
+  endDate: _propTypes["default"].string
+};
+exports.DateWidget_propTypes = DateWidget_propTypes;
+var YearView_propTypes = {
+  onSelectMonth: _propTypes["default"].func,
+  onSelectYear: _propTypes["default"].func,
+  viewedYear: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+  viewedMonth: _propTypes["default"].string,
+  monthNamesShort: _propTypes["default"].array,
+  isMonthOpen: _propTypes["default"].bool
+};
+exports.YearView_propTypes = YearView_propTypes;
+var DateTimePopupFooter_propTypes = {
+  submitText: _propTypes["default"].string,
+  onSubmit: _propTypes["default"].func,
+  cancelText: _propTypes["default"].string,
+  onCancel: _propTypes["default"].func,
+  dataId: _propTypes["default"].string
+};
+exports.DateTimePopupFooter_propTypes = DateTimePopupFooter_propTypes;
+var DateTimePopupHeader_propTypes = {
+  onOpenYearView: _propTypes["default"].func,
+  showMonthTxt: _propTypes["default"].string,
+  isYearView: _propTypes["default"].bool,
+  prevMonthTitleText: _propTypes["default"].string,
+  nextMonthTitleText: _propTypes["default"].string,
+  onModifyCalendar: _propTypes["default"].func
+};
+exports.DateTimePopupHeader_propTypes = DateTimePopupHeader_propTypes;
+var DaysRow_propTypes = {
+  dayNames: _propTypes["default"].array,
+  dayNamesShort: _propTypes["default"].object
+};
+exports.DaysRow_propTypes = DaysRow_propTypes;
+var Time_propTypes = {
+  timeText: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  hourSuggestions: _propTypes["default"].array,
+  onHourSelect: _propTypes["default"].func,
+  hours: _propTypes["default"].string,
+  hourEmptyText: _propTypes["default"].string,
+  needResponsive: _propTypes["default"].bool,
+  minSuggestions: _propTypes["default"].array,
+  onMinutesSelect: _propTypes["default"].func,
+  mins: _propTypes["default"].string,
+  minuteEmptyText: _propTypes["default"].string,
+  ampmSuggestions: _propTypes["default"].array,
+  onAmPmSelect: _propTypes["default"].func,
+  amPm: _propTypes["default"].string,
+  is24Hour: _propTypes["default"].bool
+};
+exports.Time_propTypes = Time_propTypes;

package/lib/v1/DropBox/DropBox.js

@@ -0,0 +1,109 @@
+"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"] = DropBox;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _FocusScope = _interopRequireDefault(require("@zohodesk/a11y/es/FocusScope/FocusScope"));
+
+var _Modal = _interopRequireDefault(require("../Modal/Modal"));
+
+var _LibraryContextInit = _interopRequireDefault(require("../../Provider/LibraryContextInit"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("../../DropBox/css/cssJSLogic"));
+
+var _DropBoxElement = _interopRequireDefault(require("./DropBoxElement/DropBoxElement"));
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _Common = require("../../utils/Common");
+
+var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
+
+var _DropBoxModule = _interopRequireDefault(require("../../DropBox/css/DropBox.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 _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); }
+
+function DropBox(props) {
+  var dropBoxRef = (0, _react.useRef)(null);
+  var DropBoxContext = (0, _react.useContext)(_LibraryContextInit["default"]);
+  var needResponsive = props.needResponsive,
+      portalId = props.portalId,
+      isActive = props.isActive,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      isRestrictScroll = props.isRestrictScroll,
+      needFocusScope = props.needFocusScope,
+      onClose = props.onClose,
+      customProps = props.customProps;
+  var _customProps$focusSco = customProps.focusScopeProps,
+      focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
+  var _focusScopeProps$need = focusScopeProps.needAutoFocus,
+      needAutoFocus = _focusScopeProps$need === void 0 ? true : _focusScopeProps$need,
+      _focusScopeProps$need2 = focusScopeProps.needRestoreFocus,
+      needRestoreFocus = _focusScopeProps$need2 === void 0 ? true : _focusScopeProps$need2,
+      _focusScopeProps$need3 = focusScopeProps.needListNavigation,
+      needListNavigation = _focusScopeProps$need3 === void 0 ? true : _focusScopeProps$need3,
+      _focusScopeProps$need4 = focusScopeProps.needFocusLoop,
+      needFocusLoop = _focusScopeProps$need4 === void 0 ? false : _focusScopeProps$need4,
+      _focusScopeProps$need5 = focusScopeProps.needEnterAction,
+      needEnterAction = _focusScopeProps$need5 === void 0 ? true : _focusScopeProps$need5;
+
+  var _ref = DropBoxContext || {},
+      direction = _ref.direction;
+
+  var isModel = (0, _isMobilePopover["default"])(needResponsive);
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])(props),
+      zIndexStyle = _cssJSLogic.zIndexStyle;
+
+  var dropBoxEle = needFocusScope ? /*#__PURE__*/_react["default"].createElement(_FocusScope["default"], _extends({
+    onClose: onClose,
+    elementRef: dropBoxRef,
+    needAutoFocus: needAutoFocus,
+    needRestoreFocus: needRestoreFocus,
+    needListNavigation: needListNavigation,
+    needFocusLoop: needFocusLoop,
+    needEnterAction: needEnterAction
+  }, focusScopeProps), /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
+    isModel: isModel,
+    direction: direction
+  }, props, {
+    zIndexStyle: zIndexStyle,
+    subContainerRef: dropBoxRef
+  }))) : /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
+    isModel: isModel,
+    subContainerRef: dropBoxRef,
+    direction: direction
+  }, props, {
+    zIndexStyle: zIndexStyle
+  }));
+  return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+    portalId: portalId
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze),
+    style: zIndexStyle,
+    onClick: _Common.stopPropagation
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Modal["default"], {
+    portalId: portalId
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _DropBoxModule["default"].freezeLayer,
+    style: zIndexStyle,
+    onClick: _Common.stopPropagation
+  }) : null, dropBoxEle)) : dropBoxEle;
+}
+
+DropBox.propTypes = _propTypes.DropBoxPropTypes;
+DropBox.defaultProps = _defaultProps.DropBoxDefaultProps;

package/lib/v1/DropBox/DropBoxElement/DropBoxElement.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = DropBoxElement;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _useDropboxPosCalc2 = _interopRequireDefault(require("../../../DropBox/DropBoxElement/useDropboxPosCalc"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("../../../DropBox/DropBoxElement/css/cssJSLogic"));
+
+var _DropBoxPositionMapping = require("../../../DropBox/DropBoxPositionMapping.json");
+
+var _defaultProps = require("./props/defaultProps");
+
+var _propTypes = require("./props/propTypes");
+
+var _utils = require("@zohodesk/utils");
+
+var _DropBoxElementModule = _interopRequireDefault(require("../../../DropBox/DropBoxElement/css/DropBoxElement.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function DropBoxElement(props) {
+  var children = props.children,
+      isAnimate = props.isAnimate,
+      isArrow = props.isArrow,
+      arrowPosition = props.arrowPosition,
+      boxPosition = props.boxPosition,
+      size = props.size,
+      onClick = props.onClick,
+      isActive = props.isActive,
+      dataId = props.dataId,
+      dataSelectorId = props.dataSelectorId,
+      isModel = props.isModel,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      tourId = props.tourId,
+      htmlId = props.htmlId,
+      a11y = props.a11y,
+      tabIndex = props.tabIndex,
+      palette = props.palette,
+      subContainerRef = props.subContainerRef,
+      customStyle = props.customStyle,
+      animationStyle = props.animationStyle;
+  var isAbsolute = isAbsolutePositioningNeeded;
+
+  var FireOnAnimationEnd = function FireOnAnimationEnd() {
+    var eleClassList = subContainerRef && subContainerRef.current.classList;
+    var animationStyles = animationStyle == 'default' ? _DropBoxElementModule["default"].fadeInScale : _DropBoxElementModule["default"][animationStyle];
+    animationStyles.split(' ').map(function (rmStyle) {
+      if (eleClassList && eleClassList.contains(rmStyle)) {
+        eleClassList.remove(rmStyle);
+      }
+    });
+  };
+
+  var getRef = function getRef(ele) {
+    var getRef = props.getRef,
+        forwardRef = props.forwardRef;
+    getRef && getRef(ele);
+
+    if (forwardRef) {
+      forwardRef.current = ele;
+    }
+  };
+
+  if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
+    isAbsolute = true;
+  }
+
+  var role = a11y.role,
+      ariaMultiselectable = a11y.ariaMultiselectable,
+      ariaLabelledby = a11y.ariaLabelledby;
+  boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
+  var boxDirection = _DropBoxPositionMapping.positionMapping[boxPosition].direction;
+
+  if (isAbsolute) {
+    arrowPosition = arrowPosition ? arrowPosition : _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
+    boxPosition = _DropBoxPositionMapping.positionMapping[boxPosition].positionStyle;
+  } else {
+    arrowPosition = _DropBoxPositionMapping.positionMapping[boxPosition].arrowPosition;
+  }
+
+  var _useDropboxPosCalc = (0, _useDropboxPosCalc2["default"])(props),
+      arrowstyle = _useDropboxPosCalc.arrowstyle,
+      boxstyle = _useDropboxPosCalc.boxstyle,
+      needBoxStyle = _useDropboxPosCalc.needBoxStyle;
+
+  var mergedStyle = (0, _utils.mergeStyle)(_DropBoxElementModule["default"], customStyle);
+
+  var _cssJSLogic = (0, _cssJSLogic2["default"])({
+    props: props,
+    style: mergedStyle,
+    customState: {
+      boxPosition: boxPosition,
+      boxDirection: boxDirection,
+      boxstyle: boxstyle,
+      needBoxStyle: needBoxStyle,
+      isAbsolute: isAbsolute
+    }
+  }),
+      boxClassName = _cssJSLogic.boxClassName,
+      subContainerClass = _cssJSLogic.subContainerClass,
+      inlineStyle = _cssJSLogic.inlineStyle;
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: boxClassName,
+    "data-id": "".concat(dataId),
+    "data-test-id": "".concat(dataId),
+    "data-selector-id": dataSelectorId,
+    ref: getRef,
+    style: inlineStyle,
+    "data-tour": tourId,
+    "data-position": boxPosition,
+    id: htmlId,
+    role: role,
+    "aria-multiselectable": ariaMultiselectable,
+    "aria-labelledby": ariaLabelledby,
+    tabIndex: tabIndex,
+    onAnimationEnd: isAnimate && FireOnAnimationEnd,
+    "data-a11y-focus-main-area": true
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    tabIndex: "-1",
+    className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
+    onClick: onClick,
+    "data-id": "".concat(dataId, "_subcontainer"),
+    "data-test-id": "".concat(dataId, "_subcontainer"),
+    "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
+    ref: subContainerRef
+  }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: _DropBoxElementModule["default"].closeBar
+  }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
+    className: _DropBoxElementModule["default"][arrowPosition],
+    style: arrowstyle,
+    "data-id": "".concat(dataId, "_arrow"),
+    "data-test-id": "".concat(dataId, "_arrow"),
+    "data-selector-id": "".concat(dataSelectorId, "_arrow")
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _DropBoxElementModule["default"].arrowShape
+  })), children));
+}
+
+DropBoxElement.propTypes = _propTypes.DropBoxElementPropTypes;
+DropBoxElement.defaultProps = _defaultProps.DropBoxElementDefaultProps;

package/lib/v1/DropBox/DropBoxElement/props/defaultProps.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropBoxElementDefaultProps = void 0;
+var DropBoxElementDefaultProps = {
+  animationStyle: 'default',
+  boxPosition: 'bottomLeft',
+  dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
+  isActive: false,
+  isAnimate: false,
+  isArrow: true,
+  isRadius: true,
+  size: 'default',
+  isAbsolutePositioningNeeded: true,
+  isBoxPaddingNeed: false,
+  isPadding: true,
+  customClass: {},
+  a11y: {},
+  palette: 'default',
+  customInlineStyle: false
+};
+exports.DropBoxElementDefaultProps = DropBoxElementDefaultProps;

package/lib/v1/DropBox/DropBoxElement/props/propTypes.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropBoxElementPropTypes = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var DropBoxElementPropTypes = {
+  animationStyle: _propTypes["default"].oneOf(['default', 'bounce', 'fadeIn', 'scaleIn']),
+  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,
+  dataSelectorId: _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,
+  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']),
+  customStyle: _propTypes["default"].object,
+  customInlineStyle: _propTypes["default"].bool,
+  isModel: _propTypes["default"].bool,
+  direction: _propTypes["default"].string,
+  positionsOffset: _propTypes["default"].object,
+  targetOffset: _propTypes["default"].object,
+  zIndexStyle: _propTypes["default"].object,
+  subContainerRef: _propTypes["default"].func
+};
+exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/v1/DropBox/props/defaultProps.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultProps = exports.DropBoxDefaultProps = void 0;
+
+var _defaultProps = require("../DropBoxElement/props/defaultProps");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var defaultProps = {
+  needResponsive: true,
+  portalId: 'portal1',
+  isActive: false,
+  isAbsolutePositioningNeeded: true,
+  isRestrictScroll: false,
+  needFocusScope: false,
+  needAutoZindex: true,
+  customProps: {}
+};
+exports.defaultProps = defaultProps;
+
+var DropBoxDefaultProps = _objectSpread(_objectSpread({}, _defaultProps.DropBoxElementDefaultProps), defaultProps);
+
+exports.DropBoxDefaultProps = DropBoxDefaultProps;