@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-256.1

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DateTimePopupFooter rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="footer flex rowdir vCenter"
+    class="flex row alignItems_center footer"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap

@@ -1,27 +1,27 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DateTimePopupHeader rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="header flex cover rowdir both"
+    class="flex fullSize row alignItems_center justifyContent_center header"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
   >
     <div
-      class="dateText shrinkOff"
+      class="noShrink dateText"
       data-id="selectYear"
       data-selector-id="box"
       data-test-id="selectYear"
     >
       <h2
-        class="reset  thMonYear"
+        class="reset thMonYear"
         tabindex="0"
       />
       <span>
         <i
           aria-hidden="true"
-          class="zd_font_icons basic icon-dropdown  downArrow  "
+          class="zd_font_icons basic icon-dropdown downArrow"
           data-id="fontIcon"
           data-selector-id="fontIcon"
           data-test-id="fontIcon"
@@ -30,14 +30,14 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
       </span>
     </div>
     <div
-      class="grow basis shrinkOff"
+      class="flexible basis_zero noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     />
     <div
       aria-label="prevMonth"
-      class="thArrow grid  shrinkOff"
+      class="noShrink thArrow grid"
       data-id="prevMonth"
       data-selector-id="box"
       data-test-id="prevMonth"
@@ -45,7 +45,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-arrow-left3 fbold   rtl "
+        class="zd_font_icons rtl basic icon-arrow-left3 fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -53,7 +53,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     </div>
     <div
       aria-label="nextMonth"
-      class="thArrow grid navigation shrinkOff"
+      class="noShrink thArrow grid navigation"
       data-id="nextMonth"
       data-selector-id="box"
       data-test-id="nextMonth"
@@ -61,7 +61,7 @@ exports[`DateTimePopupHeader rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-arrow-right3 fbold   rtl "
+        class="zd_font_icons rtl basic icon-arrow-right3 fbold"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DateWidget rendering the defult props 1`] = `
 <DocumentFragment>
@@ -6,23 +6,23 @@ exports[`DateWidget rendering the defult props 1`] = `
     class="container"
   >
     <div
-      class=" textBox  enabled"
+      class="textBox enabled"
       data-id="dateWidget_widget"
       data-test-id="dateWidget_widget"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+        class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container placeHolder"
         data-selector-id="textBoxIcon"
       >
         <div
-          class="grow basis shrinkOff"
+          class="flexible basis_zero noShrink"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <input
             autocomplete="off"
-            class=" pointer container medium  default  effect  borderColor_default  "
+            class="pointer container medium default effect borderColor_default"
             data-id="dateWidget"
             data-selector-id="textBoxIcon"
             data-test-id="dateWidget"
@@ -32,32 +32,32 @@ exports[`DateWidget rendering the defult props 1`] = `
           />
         </div>
         <div
-          class="iconContainer  shrinkOff"
+          class="noShrink iconContainer"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           <div
-            class="flex cover rowdir"
+            class="flex fullSize row"
             data-id="containerComponent"
             data-selector-id="container"
             data-test-id="containerComponent"
           >
             <div
-              class="icon  shrinkOff"
+              class="noShrink icon"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="datePickIcon inflex coldir both"
+                class="inlineFlex column alignItems_center justifyContent_center datePickIcon"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"
               >
                 <i
                   aria-hidden="true"
-                  class="zd_font_icons basic icon-Datepicker    "
+                  class="zd_font_icons basic icon-Datepicker"
                   data-id="fontIcon"
                   data-selector-id="fontIcon"
                   data-test-id="fontIcon"

package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DaysRow rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="days flex cover rowdir"
+    class="flex fullSize row days"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Time rendering the defult props 1`] = `
 <DocumentFragment>
@@ -6,19 +6,19 @@ exports[`Time rendering the defult props 1`] = `
     class="text"
   />
   <div
-    class="timesection flex rowdir vCenter"
+    class="flex row alignItems_center timesection"
     data-id="Time_timeContainer"
     data-selector-id="container"
     data-test-id="Time_timeContainer"
   >
     <div
-      class="dropDownContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -27,11 +27,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -44,7 +44,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="1"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="hourField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="hourField_textBox"
@@ -57,39 +57,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="hourField_downIcon"
                       data-selector-id="container"
                       data-test-id="hourField_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -105,13 +105,13 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="dropDownContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -120,11 +120,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -137,7 +137,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="3"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="minuteField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="minuteField_textBox"
@@ -150,39 +150,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="minuteField_downIcon"
                       data-selector-id="container"
                       data-test-id="minuteField_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"
@@ -198,13 +198,13 @@ exports[`Time rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="dropDownContainer grow basis shrinkOff"
+      class="flexible basis_zero noShrink dropDownContainer"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="container box_small   "
+        class="container box_small"
         data-selector-id="select"
       >
         <div
@@ -213,11 +213,11 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder container input"
             data-selector-id="textBoxIcon"
           >
             <div
-              class="grow basis shrinkOff"
+              class="flexible basis_zero noShrink"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
@@ -230,7 +230,7 @@ exports[`Time rendering the defult props 1`] = `
                 aria-owns="5"
                 aria-readonly="true"
                 autocomplete="off"
-                class=" pointer container xmedium  primary  effect  borderColor_default inputDotted "
+                class="pointer container xmedium primary effect borderColor_default inputDotted"
                 data-id="ampmField_textBox"
                 data-selector-id="textBoxIcon"
                 data-test-id="ampmField_textBox"
@@ -243,39 +243,39 @@ exports[`Time rendering the defult props 1`] = `
               />
             </div>
             <div
-              class="iconContainer  shrinkOff"
+              class="noShrink iconContainer"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover rowdir"
+                class="flex fullSize row"
                 data-id="containerComponent"
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
                 <div
-                  class="icon  shrinkOff"
+                  class="noShrink icon"
                   data-id="boxComponent"
                   data-selector-id="box"
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="rightPlaceholder inflex rowdir both"
+                    class="inlineFlex row alignItems_center justifyContent_center rightPlaceholder"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
                   >
                     <div
                       aria-hidden="true"
-                      class="arrowIcon flex cover coldir both"
+                      class="flex fullSize column alignItems_center justifyContent_center arrowIcon"
                       data-id="ampmField_downIcon"
                       data-selector-id="container"
                       data-test-id="ampmField_downIcon"
                     >
                       <i
                         aria-hidden="true"
-                        class="zd_font_icons basic icon-down    "
+                        class="zd_font_icons basic icon-down"
                         data-id="fontIcon"
                         data-selector-id="fontIcon"
                         data-test-id="fontIcon"

package/lib/DropBox/DropBox.js

@@ -27,6 +27,8 @@ var _Common = require("./../utils/Common");
 
 var _isMobilePopover = _interopRequireDefault(require("./utils/isMobilePopover"));
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxModule = _interopRequireDefault(require("./css/DropBox.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -47,7 +49,14 @@ function DropBox(props) {
       isRestrictScroll = props.isRestrictScroll,
       needFocusScope = props.needFocusScope,
       onClose = props.onClose,
-      customProps = props.customProps;
+      customProps = props.customProps,
+      getSubContainerRef = props.getSubContainerRef;
+
+  var setDropBoxRef = function setDropBoxRef(ele) {
+    getSubContainerRef && getSubContainerRef(ele);
+    dropBoxRef.current = ele;
+  };
+
   var _customProps$focusSco = customProps.focusScopeProps,
       focusScopeProps = _customProps$focusSco === void 0 ? {} : _customProps$focusSco;
   var _focusScopeProps$need = focusScopeProps.needAutoFocus,
@@ -82,10 +91,10 @@ function DropBox(props) {
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle,
-    subContainerRef: dropBoxRef
+    getSubContainerRef: setDropBoxRef
   }))) : /*#__PURE__*/_react["default"].createElement(_DropBoxElement["default"], _extends({
     isModel: isModel,
-    subContainerRef: dropBoxRef,
+    getSubContainerRef: setDropBoxRef,
     direction: direction
   }, props, {
     zIndexStyle: zIndexStyle
@@ -93,13 +102,13 @@ function DropBox(props) {
   return isModel && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["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),
+    className: (0, _cssUtility.cn)("".concat(_DropBoxModule["default"].freezeLayer, " ").concat(_DropBoxModule["default"].freeze)),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }), dropBoxEle)) : !isAbsolutePositioningNeeded && isActive ? /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
     portalId: portalId
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isRestrictScroll ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxModule["default"].freezeLayer,
+    className: (0, _cssUtility.cn)(_DropBoxModule["default"].freezeLayer),
     style: zIndexStyle,
     onClick: _Common.stopPropagation
   }) : null, dropBoxEle)) : dropBoxEle;

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,11 +1,13 @@
 "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"] = DropBoxElement;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"));
 
@@ -19,10 +21,16 @@ var _propTypes = require("./props/propTypes");
 
 var _utils = require("@zohodesk/utils");
 
+var _cssUtility = require("@dot-system/css-utility");
+
 var _DropBoxElementModule = _interopRequireDefault(require("./css/DropBoxElement.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; }
+
 /* eslint-disable react/no-unknown-property */
 function DropBoxElement(props) {
   var children = props.children,
@@ -43,12 +51,14 @@ function DropBoxElement(props) {
       tabIndex = props.tabIndex,
       palette = props.palette,
       subContainerRef = props.subContainerRef,
+      getSubContainerRef = props.getSubContainerRef,
       customStyle = props.customStyle,
       animationStyle = props.animationStyle;
   var isAbsolute = isAbsolutePositioningNeeded;
+  var internalSubContainerRef = (0, _react.useRef)(null);
 
   var FireOnAnimationEnd = function FireOnAnimationEnd() {
-    var eleClassList = subContainerRef && subContainerRef.current.classList;
+    var eleClassList = internalSubContainerRef.current && internalSubContainerRef.current.classList;
     var animationStyles = animationStyle == 'default' ? _DropBoxElementModule["default"].fadeInScale : _DropBoxElementModule["default"][animationStyle];
     animationStyles.split(' ').map(function (rmStyle) {
       if (eleClassList && eleClassList.contains(rmStyle)) {
@@ -67,6 +77,16 @@ function DropBoxElement(props) {
     }
   };
 
+  var setSubContainerRef = (0, _react.useCallback)(function (ele) {
+    internalSubContainerRef.current = ele; // Backward compatability: legacy `subContainerRef`.
+
+    if (subContainerRef) {
+      subContainerRef.current = ele;
+    }
+
+    getSubContainerRef && getSubContainerRef(ele);
+  }, [subContainerRef, getSubContainerRef]);
+
   if (!isAbsolutePositioningNeeded && size === 'default' && !isActive) {
     isAbsolute = true;
   }
@@ -107,7 +127,7 @@ function DropBoxElement(props) {
       inlineStyle = _cssJSLogic.inlineStyle;
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: boxClassName,
+    className: (0, _cssUtility.cn)(boxClassName),
     "data-id": "".concat(dataId),
     "data-test-id": "".concat(dataId),
     "data-selector-id": dataSelectorId,
@@ -127,22 +147,22 @@ function DropBoxElement(props) {
     "dot-ui-element": "dropbox"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     tabIndex: "-1",
-    className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
+    className: (0, _cssUtility.cn)("".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
+    ref: setSubContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].closeBar
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].closeBar)
   }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
-    className: _DropBoxElementModule["default"].arrowPosition,
+    className: (0, _cssUtility.cn)(_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
+    className: (0, _cssUtility.cn)(_DropBoxElementModule["default"].arrowShape)
   })), children));
 }
 

package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropBoxElement rendering the defult props 1`] = `
 <DocumentFragment>

package/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -55,8 +55,8 @@ function cssJSLogic(_ref) {
       customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
   var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style.boxDirection, !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style.arrow, !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style.paddingSpace, !isModel && isActive && !isArrow && isPadding), _compileClassNames));
-  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style.shadow, !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style.boxDirection, !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style.arrow, !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style.paddingSpace, !isModel && isActive && !isArrow && isPadding), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _compileClassNames));
+  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, style.shadow, !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, customDropBox, !isModel), _compileClassNames2));
   var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 
   if (zIndexStyle) {

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

@@ -57,6 +57,7 @@ var DropBoxElementPropTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   zIndexStyle: _propTypes["default"].object,
-  subContainerRef: _propTypes["default"].func
+  subContainerRef: _propTypes["default"].func,
+  getSubContainerRef: _propTypes["default"].func
 };
 exports.DropBoxElementPropTypes = DropBoxElementPropTypes;

package/lib/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DropBox rendering the defult props 1`] = `
 <DocumentFragment>