@zohodesk/components 1.0.0-temp-203.2 → 1.0.0-temp-205

package/es/Button/css/Button.module.css

@@ -25,6 +25,7 @@
   /* button success status default variable */
   --button_success_border_color: var(--zdt_button_success_default_border);
 }
+
 .native {
   composes: varClass;
   /* transition: all var(--zd_transition2) ease 0s; */
@@ -111,14 +112,14 @@
 .smallBtnprimaryfilled,
 .mediumBtnprimary,
 .mediumBtnprimaryfilled {
-  --button_box_shadow: var(--zd_bs_button_primary);
+  --button_box_shadow: 0 3px 10px var(--zdt_button_primary_box_shadow);
 }
 
 .smallBtndanger,
 .smallBtndangerfilled,
 .mediumBtndanger,
 .mediumBtndangerfilled {
-  --button_box_shadow: var(--zd_bs_button_danger);
+  --button_box_shadow: 0 3px 10px var(--zdt_button_danger_box_shadow);
 }
 
 .small,
@@ -136,6 +137,7 @@
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainprimary:hover {
   --button_text_color: var(--zdt_button_plainprimary_hover_text);
 }
@@ -146,6 +148,7 @@
   --button_min_width: initial;
   --button_bg_color: var(--zdt_button_default_bg);
 }
+
 .plainsecondary:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -160,6 +163,7 @@
 .tertiaryfilled {
   --button_border_width: 1px;
 }
+
 .primary:hover {
   --button_border_color: var(--zdt_button_primary_hover_border);
   --button_text_color: var(--zdt_button_primary_hover_text);
@@ -170,6 +174,7 @@
   --button_bg_color: var(--zdt_button_primaryfill_bg);
   --button_text_color: var(--zdt_button_primaryfill_text);
 }
+
 .primaryfilled:hover {
   --button_bg_color: var(--zdt_button_primaryfill_hover_bg);
 }
@@ -179,6 +184,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_danger_text);
 }
+
 .danger:hover {
   --button_border_color: var(--zdt_button_danger_hover_border);
   --button_text_color: var(--zdt_button_danger_hover_text);
@@ -189,6 +195,7 @@
   --button_bg_color: var(--zdt_button_dangerfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .dangerfilled:hover {
   --button_bg_color: var(--zdt_button_dangerfill_hover_bg);
 }
@@ -198,6 +205,7 @@
   --button_bg_color: var(--zdt_button_default_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondary:hover {
   --button_border_color: var(--zdt_button_secondary_hover_border);
   --button_text_color: var(--zdt_button_secondary_hover_text);
@@ -208,6 +216,7 @@
   --button_bg_color: var(--zdt_button_secondaryfill_bg);
   --button_text_color: var(--zdt_button_secondary_text);
 }
+
 .secondaryfilled:hover {
   --button_text_color: var(--zdt_button_secondary_hover_text);
 }
@@ -217,6 +226,7 @@
   --button_bg_color: var(--zdt_button_successfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .successfilled:hover {
   --button_border_color: var(--zdt_button_successfill_hover_border);
   --button_bg_color: var(--zdt_button_successfill_hover_bg);
@@ -227,6 +237,7 @@
   --button_bg_color: var(--zdt_button_tertiaryfill_bg);
   --button_text_color: var(--zdt_button_dangerfill_text);
 }
+
 .tertiaryfilled:hover {
   --button_bg_color: var(--zdt_button_tertiaryfill_hover_bg);
 }
@@ -326,18 +337,23 @@
 .loadingelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .primaryelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .primaryfilledelement {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
 }
+
 .dangerelement {
   --button_loading_bg_color: var(--zdt_button_loading_default_bg);
 }
+
 .dangerfilledelement {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
@@ -366,13 +382,13 @@
 
 .primaryelement:before {
   --button_loading_bg_color: var(--zdt_button_primaryfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_primary_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_primary_linear_gradient);
   transform: rotateX(180deg);
 }
 
 .dangerelement:before {
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
-  --zdt_button_loading_linear_gradient:var(--zdt_button_loading_danger_linear_gradient);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_danger_linear_gradient);
   transform: rotateX(180deg);
 }
 
@@ -523,6 +539,6 @@
   }
 }
 
-.loader{
-  color:var(--dot_mirror)
+.loader {
+  color: var(--dot_mirror)
 }

package/es/Buttongroup/Buttongroup.module.css

@@ -20,7 +20,7 @@
 }
 
 .footer {
-  --buttongroup_box_shadow: var(--zd_bs_buttongroup_footer);
+  --buttongroup_box_shadow: 0 -4px 5px -3px var(--zdt_buttongroup_footer_box_shadow);
 }
 
 [dir=ltr] .footer {

package/es/CheckBox/CheckBox.js

@@ -52,7 +52,8 @@ export default class CheckBox extends React.Component {
       a11y,
       customClass,
       customProps,
-      dataSelectorId
+      dataSelectorId,
+      renderRightPlaceholderNode
     } = this.props;
     let {
       CheckBoxProps = {},
@@ -157,7 +158,7 @@ export default class CheckBox extends React.Component {
                             ${accessMode} ${customLabel}`,
       title: toolTip ? toolTip : text,
       ...LabelProps
-    })));
+    })), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
   }
 
 }

package/es/CheckBox/props/propTypes.js

@@ -37,5 +37,6 @@ export const propTypes = {
   customProps: PropTypes.shape({
     CheckBoxProps: PropTypes.object,
     LabelProps: PropTypes.object
-  })
+  }),
+  renderRightPlaceholderNode: PropTypes.node
 };

package/es/DateTime/DateTime.module.css

@@ -122,7 +122,8 @@
   color: var(--zdt_datetime_invalid_text);
 }
 
-.invalidDate.sunday,.inActiveDate.sunday:hover {
+.invalidDate.sunday,
+.inActiveDate.sunday:hover {
   color: var(--zdt_datetime_invaliddate_text);
 }
 
@@ -147,15 +148,17 @@
   background-color: var(--zdt_datetime_selected_bg);
   border-radius: 50%;
 }
-.inActiveDate{
-color: var(--zdt_datetime_invalid_text);
-cursor: no-drop;
+
+.inActiveDate {
+  color: var(--zdt_datetime_invalid_text);
+  cursor: no-drop;
 }
-.inActiveDate:hover
-{
+
+.inActiveDate:hover {
   color: var(--zdt_datetime_invalid_text);
 }
-.inActiveDate:hover, .inActiveDate.sunday:hover{
+
+.inActiveDate:hover, .inActiveDate.sunday:hover {
   background-color: var(--zdt_datetime_inactivedate_hover_bg);
 
 }
@@ -244,6 +247,6 @@ cursor: no-drop;
 .dropBox {
   width: 100% ;
   border-radius: 3px;
-  box-shadow: var(--zd_bs_dropbox_bottom);
+  box-shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
   background-color: var(--zdt_dropbox_default_bg);
 }

package/es/DateTime/DateWidget.js

@@ -1008,7 +1008,8 @@ class DateWidgetComponent extends React.Component {
     } = this.props;
     const {
       DateTimeProps = {},
-      TextBoxProps = {}
+      TextBoxProps = {},
+      TextBoxIconProps = {}
     } = customProps;
     const {
       selected: value = '',
@@ -1062,11 +1063,15 @@ class DateWidgetComponent extends React.Component {
       isFocus: isPopupReady,
       autoComplete: false,
       a11y: a11y,
-      customProps: TextBoxProps
+      customProps: TextBoxProps,
+      ...TextBoxIconProps
     }, /*#__PURE__*/React.createElement(Container, {
+      isInline: true,
       align: "both",
+      isCover: false,
       onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
-      dataId: `${dataId}_datePicker`
+      dataId: `${dataId}_datePicker`,
+      className: style.datePickIcon
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-datepicker",
       size: "12"

package/es/DateTime/DateWidget.module.css

@@ -3,6 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
+.datePickIcon{height:100% }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }

package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -670,7 +670,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -770,7 +770,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -870,7 +870,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"

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

@@ -52,7 +52,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="datePickIcon inflex coldir both"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"

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

@@ -77,7 +77,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -175,7 +175,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -273,7 +273,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import useDropboxPosCalc from './useDropboxPosCalc';
 import cssJSLogic from './css/cssJSLogic';
-import { positionMapping } from '../DropBoxPositionMapping.json';
+import { positionMapping } from '../DropBoxPositionMapping.js';
 import { DropBoxElementDefaultProps } from './props/defaultProps';
 import { DropBoxElementPropTypes } from './props/propTypes';
 import { mergeStyle } from '@zohodesk/utils';

package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -18,6 +18,11 @@
     box-shadow: var(--dropbox_box_shadow);
 }
 
+.defaultPalette,
+.darkPalette {
+  /* css:theme-validation:ignore */
+}
+
 .defaultPalette, .darkPalette {
     background-color: var(--dropbox_bg_color);
 }
@@ -74,23 +79,27 @@
 
 /* shadow */
 .top_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_top);
+    --dropbox_box_shadow: 0 -3px 30px var(--zdt_dropbox_default_box_shadow);
 }
 
 .left_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_left);
+    --dropbox_box_shadow: -4px 0 30px var(--zdt_dropbox_default_box_shadow);
 }
 
 .right_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_right);
+    --dropbox_box_shadow: 4px 0 30px var(--zdt_dropbox_default_box_shadow);
 }
 
 .bottom_shadow {
-    --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+    --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
+}
+
+[dir=ltr] .defaultShadow {
+    box-shadow: 4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
 
-.defaultShadow {
-    box-shadow: var(--zd_bs_dropbox_default);
+[dir=rtl] .defaultShadow {
+    box-shadow: -4px 3px 30px var(--zdt_dropbox_default_box_shadow);
 }
 
 /* box direction styles */
@@ -206,7 +215,8 @@
 .arrowShape {
     height: var(--zd_size10) ;
     width: var(--zd_size10) ;
-    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+    box-shadow: 1px -1px 2px 0 var(--dropbox_arrow_box_shadow_color);
+  /* css:theme-validation:ignore */
     background-color: var(--dropbox_bg_color);
     -webkit-transform: rotateZ(-45deg);
     transform: rotateZ(-45deg);
@@ -342,17 +352,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,8 +428,9 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
-    height: 6px;
+    /*  Variable:Ignore  */
+    height: 6px;
+  /* css:theme-validation:ignore */
     width: 20% ;
     border-radius: 5px;
     background-color: var(--dropbox_mob_close_bg_color);

package/es/DropBox/DropBoxPositionMapping.js

@@ -0,0 +1,142 @@
+export const positionMapping = {
+  "bottomCenter": {
+    "direction": "bottom",
+    "arrowPosition": "mid",
+    "positionStyle": "bottomMid"
+  },
+  "bottomLeftToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomCenterToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomRightToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "bottomCenterToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topCenter": {
+    "direction": "top",
+    "arrowPosition": "mid",
+    "positionStyle": "topMid"
+  },
+  "topLeftToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topCenterToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topRightToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "topCenterToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightCenter": {
+    "direction": "right",
+    "arrowPosition": "mid",
+    "positionStyle": "rightMid"
+  },
+  "rightTopToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightCenterToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightBottomToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "rightCenterToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftCenter": {
+    "direction": "left",
+    "arrowPosition": "mid",
+    "positionStyle": "leftMid"
+  },
+  "leftTopToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftCenterToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftBottomToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "leftCenterToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "bottomRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  }
+};

package/es/DropBox/css/DropBox.module.css

@@ -3,7 +3,7 @@
   --dropbox_bg_color: var(--zdt_dropbox_default_bg);
   --dropbox_border_radius: 0;
   --dropbox_padding: 0;
-  --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
+  --dropbox_box_shadow: 0 3px 30px var(--zdt_dropbox_default_box_shadow);
 
   /* dropbox arrow default variables */
   --dropbox_arrow_box_shadow_color: var(--zdt_dropbox_arrow_shadow);