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

package/README.md

@@ -32,6 +32,17 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+
+# 1.0.0-alpha-265
+
+- **mergeStyle** - Logic Issue Fixed
+- **Tab** - State Restricted Names Check added
+- **cancelBubblingEffect** function added in utils/Common
+
+# 1.0.0-alpha-264
+
+- **DropBox** - customStyle renamed to customInlineStyle and migrarted to functional UCL component
+
 # 1.0.0-alpha-263
 
 - **ListItem, ListItemWithAvatar, ListItemWithCheckbox, ListItemWithIcon, ListItemWithRadio**  - Line height changed 20px and Padding also changed.

package/css_error.log

@@ -0,0 +1 @@
+Component Package error log:

package/es/DateTime/DateTime.js

@@ -15,9 +15,8 @@ import { formatDate, getMonthEnd } from '../utils/datetime/common';
 import { getIsEmptyValue } from '../utils/Common';
 import { monthNamesDefault, monthNamesShortDefault, dayNamesDefault, dayNamesShortDefault, ampmTextDefault } from './constants';
 import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../Responsive/CustomResponsive';
 import { Box } from '../Layout';
-import { getHourDetails } from './dateFormatUtils';
+import { getHourSuggestions, getMinuteSuggestions, addZeroIfNeeded } from './dateFormatUtils';
 function title(date, year, month) {
   let monthNames = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
   const HeadingText = `${monthNames[month] || ''} ${year}`;
@@ -48,26 +47,6 @@ export default class DateTime extends React.PureComponent {
     const {
       ampmText = ampmTextDefault
     } = props.i18nKeys;
-    const {
-      startPoint: hourStart,
-      endPoint: hourEnd
-    } = getHourDetails(props.is24Hour);
-    this.hourSuggestions = (() => {
-      const hourArr = [];
-      for (let hour = hourStart; hour <= hourEnd; hour++) {
-        const htxt = hour < 10 ? `0${hour}` : `${hour}`;
-        hourArr.push(htxt);
-      }
-      return hourArr;
-    })();
-    this.minSuggestions = (() => {
-      const minArr = [];
-      for (let minute = 0; minute <= 59; minute++) {
-        const mtxt = minute < 10 ? `0${minute}` : `${minute}`;
-        minArr.push(mtxt);
-      }
-      return minArr;
-    })();
     this.ampmSuggestions = (() => {
       const ampmSuggestions = [];
       ampmText.forEach((text, index) => {
@@ -140,7 +119,7 @@ export default class DateTime extends React.PureComponent {
     year = dateObj.getFullYear();
     hours = defaultHour ? defaultHour : dateObj.getHours();
     mins = !getIsEmptyValue(defaultMin) ? defaultMin : dateObj.getMinutes();
-    mins = mins < 10 ? `0${mins}` : mins;
+    mins = addZeroIfNeeded(mins);
     amPm = defaultAmPm ? defaultAmPm : hours < 12 ? 'AM' : 'PM';
     hours = this.getHours(hours, is24Hour);
     return {
@@ -164,7 +143,7 @@ export default class DateTime extends React.PureComponent {
         hours -= 12;
       }
     }
-    hours = hours < 10 ? `0${hours}` : hours;
+    hours = addZeroIfNeeded(hours);
     return hours;
   }
   handleGetSelectedDate() {
@@ -563,16 +542,6 @@ export default class DateTime extends React.PureComponent {
       isMonthOpen: false
     });
   }
-  responsiveFunc(_ref) {
-    let {
-      mediaQueryOR
-    } = _ref;
-    return {
-      tabletMode: mediaQueryOR([{
-        maxWidth: 700
-      }])
-    };
-  }
   render() {
     const {
       date,
@@ -653,12 +622,12 @@ export default class DateTime extends React.PureComponent {
     }), isDateTimeField ? /*#__PURE__*/React.createElement(Time, {
       timeText: timeText,
       dataId: dataId,
-      hourSuggestions: this.hourSuggestions,
+      hourSuggestions: getHourSuggestions(),
       onHourSelect: this.hoursSelect,
       hours: hours,
       hourEmptyText: hourEmptyText,
       needResponsive: needResponsive,
-      minSuggestions: this.minSuggestions,
+      minSuggestions: getMinuteSuggestions(),
       onMinutesSelect: this.minutesSelect,
       mins: mins,
       minuteEmptyText: minuteEmptyText,
@@ -686,35 +655,27 @@ export default class DateTime extends React.PureComponent {
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
       "data-id": `${dataId}_dateBoxContainer`
-    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveReceiver, {
-      query: this.responsiveFunc,
-      responsiveId: "Helmet"
-    }, _ref2 => {
-      let {
-        tabletMode
-      } = _ref2;
-      return /*#__PURE__*/React.createElement(ResponsiveDropBox, {
-        size: boxSize,
-        boxPosition: position,
-        isActive: isActive,
-        isArrow: false,
-        isAnimate: isAnimate,
-        animationStyle: "bounce",
-        getRef: getRef,
-        onClick: onClick,
-        dataId: `${dataId}_dateBoxContainer`,
-        needResponsive: needResponsive,
-        isAbsolutePositioningNeeded: isAbsolute,
-        customClass: {
-          customDropBoxWrap: className
-        },
-        isPadding: isPadding,
-        positionsOffset: positionsOffset,
-        targetOffset: targetOffset,
-        isRestrictScroll: isRestrictScroll,
-        portalId: dropBoxPortalId
-      }, /*#__PURE__*/React.createElement(Box, null, childEle));
-    }) : null;
+    }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
+      size: boxSize,
+      boxPosition: position,
+      isActive: isActive,
+      isArrow: false,
+      isAnimate: isAnimate,
+      animationStyle: "bounce",
+      getRef: getRef,
+      onClick: onClick,
+      dataId: `${dataId}_dateBoxContainer`,
+      needResponsive: needResponsive,
+      isAbsolutePositioningNeeded: isAbsolute,
+      customClass: {
+        customDropBoxWrap: className
+      },
+      isPadding: isPadding,
+      positionsOffset: positionsOffset,
+      targetOffset: targetOffset,
+      isRestrictScroll: isRestrictScroll,
+      portalId: dropBoxPortalId
+    }, /*#__PURE__*/React.createElement(Box, null, childEle)) : null;
   }
 }
 DateTime.propTypes = DateTime_propTypes;

package/es/DateTime/dateFormatUtils/dateFormats.js

@@ -0,0 +1,43 @@
+// Date Pattern Letters And its Meanings :-
+// 1. d/D: day without 0 prefix on single digit.
+// 2. dd/DD: day with 0 prefix if single digit.
+// 3. M: Month without 0 prefix on single digit.
+// 4. MM: Month with 0 prefix if single digit.
+// 5. yy/YY: Last two digit of year.
+// 6. yyyy/YYYY: represents full year.
+// 7. HH: 24 hour based hour. ie. 13:00. **H** will display hour without prefix 0 if single digit
+// 8. hh: 12 hour based hour. ie. 01:00. **h** will display hour without prefix 0 if single digit
+// 9. m: minute without 0 prefix on single digit.
+// 10.mm: minute with 0 prefix if single digit.
+// 11.s: second without 0 prefix on single digit.
+// 12.ss: second with 0 prefix if single digit.
+// 13.S: milliseconds with 0 prefix if single digit.
+// 14.a: represent the AM or PM
+// 15.A: represent the AM or PM
+// 16.Z: represent the timezone (Asia/Kolkata)
+// 17. (O) : Offset Of the timezone (GMT+00:00)
+
+export const dateSymbols = {
+  d: 'date',
+  dd: 'date',
+  DD: 'date',
+  M: 'month',
+  MM: 'month',
+  yy: 'year',
+  YY: 'year',
+  YYYY: 'year',
+  yyyy: 'year',
+  h: 'hour',
+  hh: 'hour',
+  H: 'hour',
+  HH: 'hour',
+  m: 'minute',
+  mm: 'minute',
+  s: 'second',
+  ss: 'second',
+  S: 'millisecond',
+  a: 'AMPM',
+  Z: 'timezone',
+  O: 'offset'
+};
+export const dataFormatList = ['yyyy/MM/dd', 'yyyy-MM-dd', 'yyyy.MM.dd', 'yyyy MM dd', 'MM/dd/yyyy', 'MM-dd-yyyy', 'MM.dd.yyyy', 'MM dd yyyy', 'dd/MM/yyyy', 'dd-MM-yyyy', 'dd.MM.yyyy', 'dd MM yyyy', 'yyyy/MMM/dd', 'yyyy-MMM-dd', 'yyyy.MMM.dd', 'yyyy MMM dd', 'MMM/dd/yyyy', 'MMM-dd-yyyy', 'MMM.dd.yyyy', 'MMM dd yyyy', 'dd/MMM/yyyy', 'dd-MMM-yyyy', 'dd.MMM.yyyy', 'dd MMM yyyy', 'dd/MMMM/yyyy', 'dd-MMMM-yyyy', 'dd-MMMM-yyyy', 'dd MMMM yyyy', 'MMMM/dd/yyyy', 'MMMM-dd-yyyy', 'MMMM.dd.yyyy', 'MMMM dd yyyy', 'yyyy/MMMM/dd', 'yyyy-MMMM-dd', 'yyyy.MMMM.dd', 'yyyy MMMM dd', 'dd/MM/YY', 'dd-MM-YY', 'dd.MM.YY', 'dd MM YY', 'MM/dd/YY', 'MM-dd-YY', 'MM.dd.YY', 'MM dd YY', 'YY/MM/dd', 'YY-MM-dd', 'YY.MM.dd', 'YY MM dd', 'dd/MMM/YY', 'dd-MMM-YY', 'dd.MMM.YY', 'dd MMM YY', 'MMM/dd/YY', 'MMM-dd-YY', 'MMM.dd.YY', 'MMM dd YY', 'YY/MMM/dd', 'YY-MMM-dd', 'YY.MMM.dd', 'YY MMM dd', 'dd/MMMM/YY', 'dd-MMMM-YY', 'dd.MMMM.YY', 'dd MMMM YY', 'MMMM/dd/YY', 'MMMM-dd-YY', 'MMMM.dd.YY', 'MMMM dd YY', 'YY/MMMM/dd', 'YY-MMMM-dd', 'YY.MMMM.dd', 'YY MMMM dd'];

package/es/DateTime/dateFormatUtils/index.js

@@ -109,12 +109,39 @@ export function getHourDetails(is24Hour) {
     endPoint: is24Hour ? 23 : 12
   };
 }
+export function getHourSuggestions(is24Hour) {
+  const {
+    startPoint,
+    endPoint
+  } = getHourDetails(is24Hour);
+  const hourArr = [];
+  for (let hour = startPoint; hour <= endPoint; hour++) {
+    const htxt = addZeroIfNeeded(hour);
+    hourArr.push(htxt);
+  }
+  return hourArr;
+}
 export function getMinuteDetails() {
   return {
     startPoint: 0,
     endPoint: 59
   };
 }
+export function getMinuteSuggestions() {
+  const {
+    startPoint,
+    endPoint
+  } = getMinuteDetails();
+  const minArr = [];
+  for (let minute = startPoint; minute <= endPoint; minute++) {
+    const mtxt = addZeroIfNeeded(minute);
+    minArr.push(mtxt);
+  }
+  return minArr;
+}
+export function addZeroIfNeeded(value) {
+  return value < 10 ? `0${value}` : value;
+}
 export function getIsNoonValueTyped(event) {
   const {
     keyCode

package/es/DateTime/props/propTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { dataFormatList } from '../dateFormatUtils/dateFormats';
 export const CalendarView_propTypes = {
   dataId: PropTypes.string,
   date: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -71,7 +72,7 @@ export const DateWidget_propTypes = {
   className: PropTypes.string,
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  dateFormat: PropTypes.oneOf(['yyyy/MM/dd', 'MM/dd/yyyy', 'dd/MM/yyyy', 'yyyy-MM-dd', 'MM-dd-yyyy', 'dd-MM-yyyy', 'yyyy.MM.dd', 'MM.dd.yyyy', 'dd.MM.yyyy', 'dd/MMMM/YY', 'dd/MMM/YY']),
+  dateFormat: PropTypes.oneOf([...dataFormatList]),
   defaultPosition: PropTypes.oneOf(['top', 'bottom', 'right', 'left']),
   defaultTime: PropTypes.string,
   getContainerRef: PropTypes.func,

package/es/DropBox/DropBox.js

@@ -1,251 +1,75 @@
 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); }
-import React, { Fragment } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { remConvert } from '../utils/Common';
+import React, { useRef, Fragment, useContext } from 'react';
+import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
 import Modal from '../Modal/Modal';
-import style from './DropBox.module.css';
-import { positionMapping } from './DropBoxPositionMapping.json';
-import { getZIndex } from '../Provider/ZindexProvider';
 import { getLibraryConfig } from '../Provider/Config';
 import LibraryContext from '../Provider/LibraryContextInit';
-import FocusScope from '@zohodesk/a11y/es/FocusScope/FocusScope';
-export class DropBoxElement extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getRef = this.getRef.bind(this);
-  }
-  getRef(ele) {
-    const {
-      getRef,
-      forwardRef
-    } = this.props;
-    getRef && getRef(ele);
-    if (forwardRef) {
-      forwardRef.current = ele;
-    }
-  }
-  render() {
-    let {
-      children,
-      isAnimate,
-      isArrow,
-      arrowPosition,
-      boxPosition,
-      size,
-      right,
-      left,
-      top,
-      arrowRight,
-      arrowLeft,
-      arrowTop,
-      arrowBottom,
-      bottom,
-      onClick,
-      isRadius,
-      animationStyle,
-      isActive,
-      dataId,
-      dataSelectorId,
-      isModel,
-      isAbsolutePositioningNeeded,
-      tourId,
-      isBoxPaddingNeed,
-      isPadding,
-      customClass,
-      htmlId,
-      a11y,
-      direction,
-      tabIndex,
-      palette,
-      positionsOffset,
-      targetOffset,
-      zIndexStyle,
-      customStyle,
-      subContainerRef
-    } = this.props;
-    let {
-      isReducedMotion
-    } = this.context || {};
-    if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
-      isAbsolutePositioningNeeded = true;
-    }
-    const {
-      role,
-      ariaMultiselectable,
-      ariaLabelledby
-    } = a11y;
-    const {
-      customDropBox = '',
-      customMobileDropBox = '',
-      customDropBoxWrap = '',
-      customMobileDropBoxWrap = ''
-    } = customClass;
-    const unit = 'rem';
-    let boxstyle = {};
-    let arrowstyle = {};
-    const needBoxStyle = right || left || top || bottom;
-    const needArrowStyle = arrowLeft || arrowRight || arrowTop || arrowBottom;
-    if (needBoxStyle) {
-      boxstyle = !isModel ? direction === 'rtl' ? {
-        right: [remConvert(left)] + unit,
-        left: [remConvert(right)] + unit,
-        top: [remConvert(top)] + unit,
-        bottom: [remConvert(bottom)] + unit
-      } : {
-        right: [remConvert(right)] + unit,
-        left: [remConvert(left)] + unit,
-        top: [remConvert(top)] + unit,
-        bottom: [remConvert(bottom)] + unit
-      } : {};
-    }
-    if (needArrowStyle) {
-      arrowstyle = !isModel ? direction === 'rtl' ? {
-        right: [remConvert(arrowLeft)] + unit,
-        left: [remConvert(arrowRight)] + unit,
-        top: [remConvert(arrowTop)] + unit,
-        bottom: [remConvert(arrowBottom)] + unit
-      } : {
-        right: [remConvert(arrowRight)] + unit,
-        left: [remConvert(arrowLeft)] + unit,
-        top: [remConvert(arrowTop)] + unit,
-        bottom: [remConvert(arrowBottom)] + unit
-      } : {};
-    }
-    boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
-    const boxDirection = positionMapping[boxPosition].direction; /*getting box direction*/
-    if (isAbsolutePositioningNeeded) {
-      arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
-      boxPosition = positionMapping[boxPosition].positionStyle;
-    } else {
-      arrowPosition = positionMapping[boxPosition].arrowPosition;
-    }
-    const boxClassName = `${style.main} ${!isActive ? style.hidden : ''} ${isModel ? `${style.responsive} ${customMobileDropBoxWrap}` : `${customDropBoxWrap} ${size ? style[size] : ''} ${isActive ? `${isArrow ? `${style[boxDirection]} ${isAbsolutePositioningNeeded ? style[`arrow${boxDirection}`] : ''}` : isPadding ? style[`paddingSpace_${boxDirection}`] : ''}` : ''} ${isAbsolutePositioningNeeded ? `${style.container} ${style[boxPosition]}` : style.fixedContainer}`}`;
-    const subContainerClass = `${style.subContainer} ${isModel ? ` ${customMobileDropBox} ${style.mobRadius} ${isActive ? style.slideUp : ''} ` : `${customDropBox} ${style[`${boxDirection}_shadow`]} ${isRadius ? style.radius : ''} ${isAnimate && !isReducedMotion && isActive ? animationStyle === 'default' ? style.fadeIn : style.bounce : ''} ${isBoxPaddingNeed ? style.boxPadding : ''}`}`;
-
-    // setting inlineStyle for dropbox
-    let inlineStyle = !isModel ? isAbsolutePositioningNeeded ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
-    if (zIndexStyle) {
-      inlineStyle = Object.assign({}, inlineStyle, zIndexStyle);
-    }
-    if (!isModel && !isAbsolutePositioningNeeded && size === 'default' && targetOffset && isActive) {
-      inlineStyle = Object.assign({}, inlineStyle, {
-        width: targetOffset.width
-      });
-    }
-    if (customStyle) {
-      inlineStyle = Object.assign({}, inlineStyle, customStyle);
-    }
-    return /*#__PURE__*/React.createElement("div", {
-      className: boxClassName,
-      "data-id": `${dataId}`,
-      "data-selector-id": dataSelectorId,
-      ref: this.getRef,
-      style: inlineStyle,
-      "data-tour": tourId,
-      "data-position": boxPosition,
-      id: htmlId,
-      role: role,
-      "aria-multiselectable": ariaMultiselectable,
-      "aria-labelledby": ariaLabelledby,
-      tabIndex: tabIndex
-    }, /*#__PURE__*/React.createElement("div", {
-      tabIndex: "-1",
-      className: `${subContainerClass} ${style[`${palette}Palette`]}`,
-      onClick: onClick,
-      "data-id": `${dataId}_subcontainer`,
-      "data-selector-id": `${dataSelectorId}_subcontainer`,
-      ref: subContainerRef
-    }, isModel ? /*#__PURE__*/React.createElement("div", {
-      className: style.closeBar
-    }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-      className: style[arrowPosition],
-      style: needArrowStyle && arrowstyle,
-      "data-id": `${dataId}_arrow`,
-      "data-selector-id": `${dataSelectorId}_arrow`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.arrowShape
-    })), children));
-  }
-}
-export default class DropBox extends React.Component {
-  constructor(props) {
-    super(props);
-    this.getNextIndex = getZIndex(this);
-    this.onFreezeClick = this.onFreezeClick.bind(this);
-    this.createRef = /*#__PURE__*/React.createRef();
-  }
-  onFreezeClick(e) {
-    e && e.stopPropagation();
-  }
-  render() {
-    const {
-      needResponsive,
-      portalId,
-      isActive,
-      isAbsolutePositioningNeeded,
-      needAutoZindex,
-      isRestrictScroll,
-      needFocusScope,
-      onClose
-    } = this.props;
-    let windowWidth,
-      mobileWidth = getLibraryConfig('mobileWidth'),
-      isModel = false;
-    if (needResponsive) {
-      windowWidth = window.innerWidth;
-      if (windowWidth <= mobileWidth) {
-        isModel = true;
-      }
+import cssJSLogic from './css/cssJSLogic';
+import DropBoxElement from './DropBoxElement/DropBoxElement';
+import { DropBoxDefaultProps } from './props/defaultProps';
+import { DropBoxPropTypes } from './props/propTypes';
+import { cancelBubblingEffect } from './../utils/Common';
+import style from './css/DropBox.module.css';
+export default function DropBox(props) {
+  const focusRef = useRef(null);
+  const DropBoxContext = useContext(LibraryContext);
+  const {
+    needResponsive,
+    portalId,
+    isActive,
+    isAbsolutePositioningNeeded,
+    isRestrictScroll,
+    needFocusScope,
+    onClose
+  } = props;
+  const {
+    direction
+  } = DropBoxContext || {};
+  let windowWidth,
+    mobileWidth = getLibraryConfig('mobileWidth'),
+    isModel = false;
+  if (needResponsive) {
+    windowWidth = window.innerWidth;
+    if (windowWidth <= mobileWidth) {
+      isModel = true;
     }
-    const zIndexStyle = isActive && needAutoZindex ? {
-      zIndex: this.getNextIndex()
-    } : {};
-    const {
-      direction
-    } = this.context || {};
-    const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
-      focusClose: onClose,
-      elementRef: this.createRef,
-      autoFocus: true,
-      restoreFocus: true,
-      focusArrowLoop: true,
-      enableEnterAction: true
-    }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
-      isModel: isModel,
-      direction: direction
-    }, this.props, {
-      zIndexStyle: zIndexStyle,
-      subContainerRef: this.createRef
-    }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
-      isModel: isModel,
-      direction: direction
-    }, this.props, {
-      zIndexStyle: zIndexStyle
-    }));
-    return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
-      portalId: portalId
-    }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
-      className: `${style.freezeLayer} ${style.freeze}`,
-      style: zIndexStyle,
-      onClick: this.onFreezeClick
-    }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
-      portalId: portalId
-    }, /*#__PURE__*/React.createElement(Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
-      className: style.freezeLayer,
-      style: zIndexStyle,
-      onClick: this.onFreezeClick
-    }) : null, dropBoxEle)) : dropBoxEle;
   }
+  const {
+    zIndexStyle
+  } = cssJSLogic(props);
+  const dropBoxEle = needFocusScope ? /*#__PURE__*/React.createElement(FocusScope, {
+    focusClose: onClose,
+    elementRef: focusRef,
+    autoFocus: true,
+    restoreFocus: true,
+    focusArrowLoop: true,
+    enableEnterAction: true
+  }, /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    isModel: isModel,
+    direction: direction
+  }, props, {
+    zIndexStyle: zIndexStyle,
+    subContainerRef: focusRef
+  }))) : /*#__PURE__*/React.createElement(DropBoxElement, _extends({
+    isModel: isModel,
+    subContainerRef: focusRef,
+    direction: direction
+  }, props, {
+    zIndexStyle: zIndexStyle
+  }));
+  return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `${style.freezeLayer} ${style.freeze}`,
+    style: zIndexStyle,
+    onClick: cancelBubblingEffect
+  }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/React.createElement(Modal, {
+    portalId: portalId
+  }, /*#__PURE__*/React.createElement(Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
+    className: style.freezeLayer,
+    style: zIndexStyle,
+    onClick: cancelBubblingEffect
+  }) : null, dropBoxEle)) : dropBoxEle;
 }
-DropBox.propTypes = propTypes;
-DropBox.contextType = LibraryContext;
-DropBox.defaultProps = defaultProps;
-// if (__DOCS__) {
-//   DropBox.docs = {
-//     componentGroup: 'Atom',
-//     folderName: 'Style Guide',
-//     external: true,
-//     description: ' '
-//   };
-// }
+DropBox.propTypes = DropBoxPropTypes;
+DropBox.defaultProps = DropBoxDefaultProps;