@zohodesk/components 1.2.55 → 1.2.57

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-.top_shadow {
+[data-box-direction="top"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-.left_shadow {
+[data-box-direction="left"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-.right_shadow {
+[data-box-direction="right"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-.bottom_shadow {
+[data-box-direction="bottom"]>.shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,37 +158,37 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow */
-.arrowtop {
+/* space for arrow using data-box-direction attribute*/
+.arrow[data-box-direction="top"] {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrowright {
+.arrow[data-box-direction="right"] {
     padding-left: var(--zd_size10) ;
 }
 
-.arrowleft {
+.arrow[data-box-direction="left"] {
     padding-right: var(--zd_size10) ;
 }
 
-.arrowbottom {
+.arrow[data-box-direction="bottom"] {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target */
-.paddingSpace_top {
+/* space from target using data-box-direction attribute*/
+.paddingSpace[data-box-direction="top"] {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace_right {
+.paddingSpace[data-box-direction="right"] {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace_left {
+.paddingSpace[data-box-direction="left"] {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace_bottom {
+.paddingSpace[data-box-direction="bottom"] {
     padding-top: var(--zd_size5) ;
 }
 
@@ -213,107 +213,106 @@
 }
 
 /* arrow placement styles */
-.start,
-.end,
-.mid {
+.arrowPosition {
     composes: arrow;
 }
 
-.top .start,
-.top .end,
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.top .start {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition {
     left: var(--zd_size28) ;
 }
 
-.top .end {
+.boxDirection[data-box-direction="top"][data-arrow-position="end"] .arrowPosition {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     left: 50% ;
 }
 
-.top .start,
-.top .mid {
+.boxDirection[data-box-direction="top"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="top"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(180deg) translateX(50%);
 }
 
-.bottom .start,
-.bottom .end,
-.bottom .mid {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.bottom .start {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
     left: var(--zd_size28) ;
 }
 
-.bottom .mid {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition {
     left: 50% ;
 }
 
-.bottom .end {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="end"] .arrowPosition {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.bottom .mid,
-.bottom .start {
+.boxDirection[data-box-direction="bottom"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="bottom"][data-arrow-position="start"] .arrowPosition {
     transform: translateX(-50%);
 }
 
-.left .start,
-.left .mid,
-.left .end {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.left .start {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition {
     top: var(--zd_size28) ;
 }
 
-.left .end {
+.boxDirection[data-box-direction="left"][data-arrow-position="end"] .arrowPosition {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.left .mid {
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
     top: 50% ;
 }
 
-.left .start,
-.left .mid {
+.boxDirection[data-box-direction="left"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="left"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.right .start,
-.right .mid,
-.right .end {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.right .start {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition {
     top: var(--zd_size28) ;
 }
 
-.right .mid {
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
     top: 50% ;
 }
 
-.right .start,
-.right .mid {
+.boxDirection[data-box-direction="right"][data-arrow-position="start"] .arrowPosition,
+.boxDirection[data-box-direction="right"][data-arrow-position="mid"] .arrowPosition {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.right .end {
+.boxDirection[data-box-direction="right"][data-arrow-position="end"] .arrowPosition {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
+[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -321,7 +320,7 @@
     pointer-events: none;
 }
 
-.hidden .subContainer {
+[data-visible="hidden"] .subContainer, .hidden .subContainer {
     box-shadow: none;
 }
 
@@ -342,17 +341,21 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
+
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
+
 .bounce {
     composes: animationBasic;
 }
+
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
+
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -414,7 +417,7 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
+    /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

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".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !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["".concat(boxDirection, "_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, 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 inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 
   if (zIndexStyle) {

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

@@ -5,6 +5,8 @@ exports[`DropBox rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
+    data-arrow-position="end"
+    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -12,14 +14,14 @@ exports[`DropBox rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer bottom_shadow radius defaultPalette"
+      class="subContainer shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="end"
+        class="arrowPosition"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"

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

@@ -15,6 +15,8 @@ exports[`DropDown rendering the defult props 1`] = `
     <div
       class="main hidden container bottomMid default"
       data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
       data-id="dropBox"
       data-position="bottomMid"
       data-selector-id="dropBox"
@@ -22,7 +24,7 @@ exports[`DropDown rendering the defult props 1`] = `
       dot-ui-element="dropbox"
     >
       <div
-        class="subContainer bottom_shadow radius defaultPalette"
+        class="subContainer shadow radius defaultPalette"
         data-id="dropBox_subcontainer"
         data-selector-id="dropBox_subcontainer"
         data-test-id="dropBox_subcontainer"