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

package/assets/Contrast/defaultContrastLightness.module.css

@@ -0,0 +1,39 @@
+:root [data-mode='default'] {
+   --zd_default_default_lValue: calc(0 * 1%);
+   --zd_default_default_low_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_low_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_lower_lValue: calc(0 * 1%);
+   --zd_default_default_inverse_medium_lValue: calc(0 * 1%);
+   --zd_default_darker_lValue: calc(0 * 1%);
+   --zd_default_darker_low_lValue: calc(0 * 1%);
+   --zd_default_darker_lower_lValue: calc(0 * 1%);
+   --zd_default_darker_lowest_lValue: calc(0 * 1%);
+   --zd_default_lighter_lValue: calc(0 * 1%);
+   --zd_default_lighter_low_lValue: calc(0 * 1%);
+   --zd_default_lighter_lower_lValue: calc(0 * 1%);
+   --zd_default_lighter_medium_lValue: calc(0 * 1%);
+   --zd_default_lighter_high_lValue: calc(0 * 1%);
+   --zd_alpha_high: 0;
+   --zd_alpha_low: 0;
+}
+
+[data-mode='default']:global(.zd-contrast) {
+   --zd_default_default_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_default_default_low_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_default_default_inverse_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_default_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_default_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * -0.10%);
+   --zd_default_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * -1.5%);
+   --zd_default_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_default_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
+   --zd_default_darker_lower_lValue: calc(var(--zd_contrastLevel) * -0.25%);
+   --zd_default_darker_lowest_lValue: calc(var(--zd_contrastLevel) * var(--zd_lightmode_grey_bg));
+   --zd_default_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_default_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
+   --zd_default_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_default_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_default_lighter_high_lValue: calc(var(--zd_contrastLevel) * 20%);
+   --zd_alpha_high: 1;
+   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+}

package/assets/Contrast/pureDarkContrastLightness.module.css

@@ -0,0 +1,39 @@
+:root [data-mode='pureDark'] {
+   --zd_pureDark_default_lValue: calc(0 * 1%);
+   --zd_pureDark_default_low_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_low_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_lower_lValue: calc(0 * 1%);
+   --zd_pureDark_default_inverse_medium_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_low_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lower_lValue: calc(0 * 1%);
+   --zd_pureDark_darker_lowest_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_low_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_lower_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_medium_lValue: calc(0 * 1%);
+   --zd_pureDark_lighter_high_lValue: calc(0 * 1%);
+   --zd_alpha_high: 0;
+   --zd_alpha_low: 0;
+}
+
+[data-mode='pureDark']:global(.zd-contrast) {
+   --zd_pureDark_default_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_default_low_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_default_inverse_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_pureDark_default_inverse_low_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_pureDark_default_inverse_lower_lValue: calc(var(--zd_contrastLevel) * 0.10%);
+   --zd_pureDark_default_inverse_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_pureDark_darker_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_darker_low_lValue: calc(var(--zd_contrastLevel) * -0.50%);
+   --zd_pureDark_darker_lower_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_darker_lowest_lValue: calc(var(--zd_contrastLevel) * -1%);
+   --zd_pureDark_lighter_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_pureDark_lighter_low_lValue: calc(var(--zd_contrastLevel) * 0.50%);
+   --zd_pureDark_lighter_lower_lValue: calc(var(--zd_contrastLevel) * 0.25%);
+   --zd_pureDark_lighter_medium_lValue: calc(var(--zd_contrastLevel) * 1.5%);
+   --zd_pureDark_lighter_high_lValue: calc(var(--zd_contrastLevel) * 1%);
+   --zd_alpha_high: 1;
+   --zd_alpha_low: calc(var(--zd_contrastLevel) * 0.02);
+}

package/es/AppContainer/AppContainer.js

@@ -13,6 +13,7 @@ import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
 import '../common/a11y.module.css';
+import '../common/boxShadow.module.css';
 import style from './AppContainer.module.css';
 import { getLibraryConfig, setLibraryConfig } from '../Provider/Config';
 export default class AppContainer extends React.Component {

package/es/Avatar/Avatar.module.css

@@ -11,6 +11,7 @@
   --avatar_boxshadow: var(--zdt_avatar_default_boxshadow);
   --avatar_text_transform: uppercase;
 }
+
 .avatar {
   composes: varClass;
   position: relative;
@@ -21,15 +22,19 @@
   border-width: var(--avatar_border_width);
   border-style: var(--avatar_border_style);
 }
+
 .border {
   border-color: var(--avatar_border_color);
 }
+
 .borderOnHover:hover, .borderOnActive {
   border-color: var(--avatar_border_hoverColor);
 }
+
 .avatar, .primary {
   background-color: var(--avatar_bg_color);
 }
+
 .shadow {
   position: absolute;
   height: 100%;
@@ -38,104 +43,134 @@
   pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
+
 [dir=ltr] .shadow {
   left: 0;
 }
+
 [dir=rtl] .shadow {
   right: 0;
 }
+
 .shadow.black {
-  box-shadow: inset 0px 0px 5px var(--avatar_boxshadow);
+  box-shadow: var(--zd_bs_avatar_black);
 }
+
 .shadow.white {
-  box-shadow: inset 0px 0px 11px var(--avatar_boxshadow);
+  box-shadow: var(--zd_bs_avatar_white);
 }
+
 .avatar, .circle {
   border-radius: var(--avatar_border_radius);
 }
+
 .border {
   --avatar_border_width: 1px;
 }
+
 .image {
   width: 100%;
   height: 100%;
   position: absolute;
-  top:0;
+  top: 0;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
 }
+
 [dir=ltr] .image {
-  left:0;
+  left: 0;
 }
-[dir=rtl] .image { 
-  right:0;
+
+[dir=rtl] .image {
+  right: 0;
 }
-.animate{
-  composes:fadeIn modeForward from './../common/animation.module.css';
+
+.animate {
+  composes: fadeIn modeForward from './../common/animation.module.css';
 }
-[dir=ltr] .animate{
+
+[dir=ltr] .animate {
   animation-duration: var(--zd_transition2);
 }
-[dir=rtl] .animate{
+
+[dir=rtl] .animate {
   animation-duration: var(--zd_transition2);
 }
-.innerBorder{
+
+.innerBorder {
   border: 1px solid var(--zdt_avatarteam_innerCircle);
 }
+
 .square_small {
   --avatar_border_radius: 4px;
 }
+
 .square_xsmall {
   --avatar_border_radius: 6px;
 }
+
 .square_medium,
 .square_xmedium {
   --avatar_border_radius: 8px;
 }
+
 .square_large,
 .square_xlarge {
   --avatar_border_radius: 10px;
 }
+
 .none {
   display: none;
 }
+
 .default {
   --avatar_border_width: 0;
 }
+
 .secondary {
   --avatar_bg_color: var(--zdt_avatar_secondary_bg);
 }
+
 .info {
   --avatar_bg_color: var(--zdt_avatar_info_bg);
 }
+
 .initial {
   text-transform: var(--avatar_text_transform);
   display: inline-block;
 }
-.xxsmall{
+
+.xxsmall {
   --avatar_font_size: var(--zd_font_size8);
 }
+
 .small {
   --avatar_font_size: var(--zd_font_size9);
 }
+
 .xsmall {
   --avatar_font_size: var(--zd_font_size12);
 }
+
 .medium {
   --avatar_font_size: var(--zd_font_size14);
 }
+
 .xmedium {
   --avatar_font_size: var(--zd_font_size14);
 }
+
 .large {
   --avatar_font_size: var(--zd_font_size18);
 }
+
 .xlarge {
   --avatar_font_size: var(--zd_font_size28);
 }
+
 .white {
   --avatar_text_color: var(--zdt_avatar_white_text);
   --avatar_border_color: var(--zdt_avatar_white_border);
   --avatar_border_hoverColor: var(--zdt_avatar_white_borderHover);
   --avatar_boxshadow: var(--zdt_avatar_white_boxshadow);
-}
+}

package/es/Button/Button.js

@@ -2,59 +2,56 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React from 'react';
 import { defaultProps } from './props/defaultProps';
 import { propTypes } from './props/propTypes';
-import style from './Button.module.css';
+import cssJSLogic from './css/cssJSLogic';
+import { mergeStyle } from './../utils/';
+import style from './css/Button.module.css';
 /*
 Button text and children props?
 use children for both cases
 toLowerCase check needed?
 */
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
-export default class Button extends React.Component {
-  render() {
-    let {
-      text,
-      palette,
-      disabled,
-      size,
-      onClick,
-      rounded,
-      status,
-      children,
-      isBold,
-      dataId,
-      needAppearance,
-      getRef,
-      title,
-      dataSelectorId,
-      customClass,
-      customProps
-    } = this.props;
-    let {
-      customButton = '',
-      customStatus = '',
-      customStatusSize = ''
-    } = customClass;
-    let paletteLower = palette.toLowerCase();
-    let statusLower = status.toLowerCase();
-    let classList = needAppearance ? `${style[paletteLower]} ${rounded ? style.rounded : ''} ${!children ? style[size.toLowerCase()] : `${style[`${size}Btn`]} 
-             ${rounded ? style[`${size}Btn${paletteLower}`] : ''}`} ${statusLower !== 'none' ? style.loader : ''}` : `${style.default}`;
-    return /*#__PURE__*/React.createElement("button", _extends({
-      className: `${customButton} ${classList} ${isBold ? style.bold : ''}  `,
-      "data-id": disabled ? `${dataId}_disabled` : dataId,
-      disabled: disabled || statusLower === 'loading',
-      onClick: onClick,
-      "data-title": title,
-      type: "button",
-      ref: getRef,
-      "data-selector-id": dataSelectorId
-    }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
-      className: style.overlay
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatusSize} ${statusLower === 'loading' ? `${style.loading} ${style[`${size}loading`] ? style[`${size}loading`] : ''}` : style.success}`
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${customStatus} ${statusLower === 'loading' ? `${style.loadingelement} ${style[`${paletteLower}element`] ? style[`${paletteLower}element`] : ''}` : `${style.successelement} ${style[`${paletteLower}success`] ? style[`${paletteLower}success`] : ''}`}`
-    }))));
-  }
+export default function Button(props) {
+  let {
+    text,
+    disabled,
+    onClick,
+    status,
+    children,
+    dataId,
+    needAppearance,
+    getRef,
+    title,
+    dataSelectorId,
+    customProps,
+    customStyle
+  } = props;
+  const finalStyle = mergeStyle(style, customStyle);
+  const {
+    buttonClass,
+    loaderParentClass,
+    loaderChildClass
+  } = cssJSLogic({
+    props,
+    style: finalStyle
+  });
+  let statusLower = status.toLowerCase();
+  return /*#__PURE__*/React.createElement("button", _extends({
+    className: buttonClass,
+    "data-id": disabled ? `${dataId}_disabled` : dataId,
+    disabled: disabled || statusLower === 'loading',
+    onClick: onClick,
+    "data-title": title,
+    type: "button",
+    ref: getRef,
+    "data-selector-id": dataSelectorId
+  }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/React.createElement("div", {
+    className: finalStyle.overlay
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderParentClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: loaderChildClass
+  }))));
 }
 Button.defaultProps = defaultProps;
 Button.propTypes = propTypes;

package/es/Button/{Button.module.css → css/Button.module.css}

@@ -29,8 +29,8 @@
   /* transition: all var(--zd_transition2) ease 0s; */
   letter-spacing: var(--button_letter_spacing);
   opacity: var(--button_opacity);
-  transition-property: background-color, color, border; 
-  transition-duration: var(--zd_transition2); 
+  transition-property: background-color, color, border;
+  transition-duration: var(--zd_transition2);
   transition-timing-function: ease;
   border: 0;
   cursor: var(--button_cursor);
@@ -44,7 +44,7 @@
 
 .container {
   composes: native;
-  composes: dotted from '../common/common.module.css';
+  composes: dotted from '../../common/common.module.css';
   position: relative;
   font-size: var(--button_font_size);
   color: var(--button_text_color);
@@ -63,7 +63,7 @@
 
 .bold {
   --button_font_family: var(--zd_semibold);
-  composes: ftsmooth from '../common/common.module.css';
+  composes: ftsmooth from '../../common/common.module.css';
 }
 
 .rounded {
@@ -110,14 +110,14 @@
 .smallBtnprimaryfilled,
 .mediumBtnprimary,
 .mediumBtnprimaryfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_primary_box_shadow);
+  --button_box_shadow: var(--zd_bs_button_primary);
 }
 
 .smallBtndanger,
 .smallBtndangerfilled,
 .mediumBtndanger,
 .mediumBtndangerfilled {
-  --button_box_shadow: 0 3px 10px var(--zdt_button_danger_box_shadow);
+  --button_box_shadow: var(--zd_bs_button_danger);
 }
 
 .small,

package/es/Button/css/cssJSLogic.js

@@ -0,0 +1,53 @@
+import { compileClassNames } from './../../utils';
+export default function cssJSLogic(_ref) {
+  let {
+    props,
+    style
+  } = _ref;
+  let {
+    customClass,
+    needAppearance,
+    isBold,
+    rounded,
+    size,
+    children,
+    palette,
+    status
+  } = props;
+  let {
+    customButton = '',
+    customStatus = '',
+    customStatusSize = ''
+  } = customClass;
+  let paletteLower = palette.toLowerCase();
+  let statusLower = status.toLowerCase();
+  let buttonClass = compileClassNames({
+    [customButton]: !!customButton,
+    [style.bold]: isBold,
+    [style.default]: !needAppearance,
+    [style[paletteLower]]: needAppearance,
+    [style.rounded]: needAppearance && rounded,
+    [style[size.toLowerCase()]]: needAppearance && !children,
+    [style[`${size}Btn`]]: needAppearance && children,
+    [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
+    [style.loader]: !!needAppearance && statusLower !== 'none'
+  });
+  let loaderParentClass = compileClassNames({
+    [customStatusSize]: !!customStatusSize,
+    [style.loading]: statusLower === 'loading',
+    [style[`${size}loading`]]: statusLower === 'loading',
+    [style.success]: statusLower != 'loading'
+  });
+  let loaderChildClass = compileClassNames({
+    [customStatus]: !!customStatus,
+    [style.loadingelement]: statusLower === 'loading',
+    [style[`${paletteLower}element`]]: statusLower === 'loading',
+    [style.successelement]: statusLower != 'loading',
+    [style[`${paletteLower}success`]]: statusLower != 'loading'
+  });
+  return {
+    buttonClass,
+    loaderParentClass,
+    loaderChildClass
+  };
+}

package/es/Button/index.js

@@ -0,0 +1,2 @@
+export { default as Button } from './Button';
+export { default as ButtonPropTypes } from './props/propTypes';

package/es/Button/props/propTypes.js

@@ -20,5 +20,7 @@ export const propTypes = {
     customStatus: PropTypes.string,
     customStatusSize: PropTypes.string
   }),
+  customStyle: PropTypes.object,
   customProps: PropTypes.object
-};
+};
+export default propTypes;

package/es/Buttongroup/Buttongroup.module.css

@@ -7,6 +7,7 @@
   --buttongroup_border_style: solid;
   --buttongroup_border_color: var(--zdt_buttongroup_default_border);
 }
+
 .buttonGroup {
   composes: varClass;
   composes: cboth from '../common/common.module.css';
@@ -19,71 +20,88 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
+  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
 }
 
 [dir=ltr] .footer {
-  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)/*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)
+    /*rtl: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0*/
+  ;
 }
 
 [dir=rtl] .footer {
-  --buttongroup_padding: var(--zd_size20) var(--zd_size60) var(--zd_size20) 0;
+  --buttongroup_padding: var(--zd_size20) 0 var(--zd_size20) var(--zd_size60)  ;
 }
+
 .header {
   --buttongroup_padding: var(--zd_size12) var(--zd_size20);
   --buttongroup_border_width: 0 0 1px 0;
 }
-[dir=ltr] .tab > div button:first-child {
+
+[dir=ltr] .tab>div button:first-child {
   border-radius: 5px 0 0 5px;
 }
-[dir=rtl] .tab > div button:first-child {
+
+[dir=rtl] .tab>div button:first-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=ltr] .tab > div button:last-child {
+
+[dir=ltr] .tab>div button:last-child {
   border-radius: 0 5px 5px 0;
 }
-[dir=rtl] .tab > div button:last-child {
+
+[dir=rtl] .tab>div button:last-child {
   border-radius: 5px 0 0 5px;
 }
 
 .alignleft {
   composes: fleft from '../common/common.module.css';
 }
+
 .alignright {
   composes: fright from '../common/common.module.css';
 }
+
 .aligncenter {
   composes: tcenter from '../common/common.module.css';
 }
-[dir=ltr] .alignleft > button:first-child {
+
+[dir=ltr] .alignleft>button:first-child {
   margin-left: 0;
 }
-[dir=rtl] .alignleft > button:first-child {
+
+[dir=rtl] .alignleft>button:first-child {
   margin-right: 0;
 }
-[dir=ltr] .alignleft > button {
+
+[dir=ltr] .alignleft>button {
   margin-left: var(--zd_size15);
 }
-[dir=rtl] .alignleft > button {
+
+[dir=rtl] .alignleft>button {
   margin-right: var(--zd_size15);
 }
 
-[dir=ltr] .alignright > button:last-child {
+[dir=ltr] .alignright>button:last-child {
   margin-right: 0;
 }
 
-[dir=rtl] .alignright > button:last-child {
+[dir=rtl] .alignright>button:last-child {
   margin-left: 0;
 }
-[dir=ltr] .alignright > button {
+
+[dir=ltr] .alignright>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .alignright > button {
+
+[dir=rtl] .alignright>button {
   margin-left: var(--zd_size15);
 }
-[dir=ltr] .aligncenter > button {
+
+[dir=ltr] .aligncenter>button {
   margin-right: var(--zd_size15);
 }
-[dir=rtl] .aligncenter > button {
+
+[dir=rtl] .aligncenter>button {
   margin-left: var(--zd_size15);
-}
+}

package/es/DateTime/DateTime.module.css

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

package/es/DropBox/DropBox.js

@@ -59,13 +59,13 @@ export default function DropBox(props) {
   }));
   return isModel && isActive ? /*#__PURE__*/React.createElement(Modal, {
     portalId: portalId
-  }, /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(React.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", {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isRestrictScroll ? /*#__PURE__*/React.createElement("div", {
     className: style.freezeLayer,
     style: zIndexStyle,
     onClick: cancelBubblingEffect

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -28,6 +28,7 @@ export default function DropBoxElement(props) {
     subContainerRef,
     customStyle
   } = props;
+  let isAbsolute = isAbsolutePositioningNeeded;
   const FireOnAnimationEnd = () => {
     let element = subContainerRef && subContainerRef.current.classList;
     (isAnimate ? style.fadeIn : style.bounce).split(' ').map(rmStyle => {
@@ -47,7 +48,7 @@ export default function DropBoxElement(props) {
     }
   };
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
-    isAbsolutePositioningNeeded = true;
+    isAbsolute = true;
   }
   const {
     role,
@@ -56,7 +57,7 @@ export default function DropBoxElement(props) {
   } = a11y;
   boxPosition = boxPosition && boxPosition != 'undefined' ? boxPosition : 'bottomCenter';
   const boxDirection = positionMapping[boxPosition].direction;
-  if (isAbsolutePositioningNeeded) {
+  if (isAbsolute) {
     arrowPosition = arrowPosition ? arrowPosition : positionMapping[boxPosition].arrowPosition;
     boxPosition = positionMapping[boxPosition].positionStyle;
   } else {
@@ -79,7 +80,8 @@ export default function DropBoxElement(props) {
       boxPosition,
       boxDirection,
       boxstyle,
-      needBoxStyle
+      needBoxStyle,
+      isAbsolute
     }
   });
   return /*#__PURE__*/React.createElement("div", {