@zohodesk/components 1.0.0-temp-202 → 1.0.0-temp-203

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

@@ -28,10 +28,10 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
         >
           <h2
             class="reset thMonYear"
-            data-title="July 2024"
+            data-title="July 2023"
             tabindex="0"
           >
-            July 2024
+            July 2023
           </h2>
           <span>
             <i
@@ -177,11 +177,56 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             data-test-id="containerComponent"
           >
             <div
-              aria-label="30"
+              aria-label="25"
               class="datesStr grid sunday invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
+            >
+              25
+            </div>
+            <div
+              aria-label="26"
+              class="datesStr grid invalidDate   shrinkOff"
+              data-id="dateTime_invalidDate"
+              data-selector-id="box"
+              data-test-id="dateTime_invalidDate"
+            >
+              26
+            </div>
+            <div
+              aria-label="27"
+              class="datesStr grid invalidDate   shrinkOff"
+              data-id="dateTime_invalidDate"
+              data-selector-id="box"
+              data-test-id="dateTime_invalidDate"
+            >
+              27
+            </div>
+            <div
+              aria-label="28"
+              class="datesStr grid invalidDate   shrinkOff"
+              data-id="dateTime_invalidDate"
+              data-selector-id="box"
+              data-test-id="dateTime_invalidDate"
+            >
+              28
+            </div>
+            <div
+              aria-label="29"
+              class="datesStr grid invalidDate   shrinkOff"
+              data-id="dateTime_invalidDate"
+              data-selector-id="box"
+              data-test-id="dateTime_invalidDate"
+            >
+              29
+            </div>
+            <div
+              aria-label="30"
+              class="datesStr grid invalidDate   shrinkOff"
+              data-id="dateTime_invalidDate"
+              data-selector-id="box"
+              data-test-id="dateTime_invalidDate"
             >
               30
             </div>
@@ -194,9 +239,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               1
             </div>
+          </div>
+          <div
+            class="dateRow flex rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
             <div
               aria-label="2"
-              class="datesStr grid   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -239,16 +291,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               6
             </div>
-          </div>
-          <div
-            class="dateRow flex rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
             <div
               aria-label="7"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -264,9 +309,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               8
             </div>
+          </div>
+          <div
+            class="dateRow flex rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
             <div
               aria-label="9"
-              class="datesStr grid   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -309,16 +361,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               13
             </div>
-          </div>
-          <div
-            class="dateRow flex rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
             <div
               aria-label="14"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -334,9 +379,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               15
             </div>
+          </div>
+          <div
+            class="dateRow flex rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
             <div
               aria-label="16"
-              class="datesStr grid   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -379,16 +431,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               20
             </div>
-          </div>
-          <div
-            class="dateRow flex rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
             <div
               aria-label="21"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -404,9 +449,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               22
             </div>
+          </div>
+          <div
+            class="dateRow flex rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
             <div
               aria-label="23"
-              class="datesStr grid   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -449,16 +501,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               27
             </div>
-          </div>
-          <div
-            class="dateRow flex rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
             <div
               aria-label="28"
-              class="datesStr grid sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -474,9 +519,16 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               29
             </div>
+          </div>
+          <div
+            class="dateRow flex rowdir"
+            data-id="containerComponent"
+            data-selector-id="container"
+            data-test-id="containerComponent"
+          >
             <div
               aria-label="30"
-              class="datesStr grid   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -519,16 +571,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               3
             </div>
-          </div>
-          <div
-            class="dateRow flex rowdir"
-            data-id="containerComponent"
-            data-selector-id="container"
-            data-test-id="containerComponent"
-          >
             <div
               aria-label="4"
-              class="datesStr grid sunday  invalidDate   shrinkOff"
+              class="datesStr grid  invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -544,51 +589,6 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             >
               5
             </div>
-            <div
-              aria-label="6"
-              class="datesStr grid  invalidDate   shrinkOff"
-              data-id="dateTime_invalidDate"
-              data-selector-id="box"
-              data-test-id="dateTime_invalidDate"
-            >
-              6
-            </div>
-            <div
-              aria-label="7"
-              class="datesStr grid  invalidDate   shrinkOff"
-              data-id="dateTime_invalidDate"
-              data-selector-id="box"
-              data-test-id="dateTime_invalidDate"
-            >
-              7
-            </div>
-            <div
-              aria-label="8"
-              class="datesStr grid  invalidDate   shrinkOff"
-              data-id="dateTime_invalidDate"
-              data-selector-id="box"
-              data-test-id="dateTime_invalidDate"
-            >
-              8
-            </div>
-            <div
-              aria-label="9"
-              class="datesStr grid  invalidDate   shrinkOff"
-              data-id="dateTime_invalidDate"
-              data-selector-id="box"
-              data-test-id="dateTime_invalidDate"
-            >
-              9
-            </div>
-            <div
-              aria-label="10"
-              class="datesStr grid  invalidDate   shrinkOff"
-              data-id="dateTime_invalidDate"
-              data-selector-id="box"
-              data-test-id="dateTime_invalidDate"
-            >
-              10
-            </div>
           </div>
         </div>
         <span

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

@@ -53,9 +53,9 @@ exports[`DateWidget rendering the defult props 1`] = `
             >
               <div
                 class="flex cover coldir both"
-                data-id="containerComponent"
+                data-id="dateWidget_datePicker"
                 data-selector-id="container"
-                data-test-id="containerComponent"
+                data-test-id="dateWidget_datePicker"
               >
                 <i
                   aria-hidden="true"

package/lib/DropBox/DropBoxPositionMapping.json

@@ -1,145 +1,145 @@
-{
-    "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"
-        }
-    }
-}
+{
+    "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/lib/DropDown/DropDown.module.css

@@ -1,5 +1,5 @@
-.listGroup {
-  max-height: var(--zd_size220) ;
-  composes: oflowy from '../common/common.module.css';
-  margin: var(--zd_size8) 0 var(--zd_size4) ;
-}
+.listGroup {
+  max-height: var(--zd_size220) ;
+  composes: oflowy from '../common/common.module.css';
+  margin: var(--zd_size8) 0 var(--zd_size4) ;
+}

package/lib/DropDown/DropDownSearch.js

@@ -83,13 +83,16 @@ var DropDownSearch = /*#__PURE__*/function (_React$Component) {
           size = _this$props.size,
           textBoxSize = _this$props.textBoxSize,
           placeHolder = _this$props.placeHolder,
-          customClass = _this$props.customClass;
+          customClass = _this$props.customClass,
+          dataId = _this$props.dataId;
       var _customClass$searchCl = customClass.searchClass,
           searchClass = _customClass$searchCl === void 0 ? '' : _customClass$searchCl,
           _customClass$customTe = customClass.customTextBox,
           customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass)
+        className: "".concat(_DropDownSearchModule["default"].search, " ").concat(_DropDownSearchModule["default"]["".concat(size, "Search")], " ").concat(searchClass),
+        "data-id": dataId,
+        "data-test-id": dataId
       }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         id: id,
         inputRef: this.getRef,

package/lib/DropDown/DropDownSearch.module.css

@@ -1,14 +1,14 @@
-.varClass {
-  /* dropdownsearch default variables */
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
-}
-.search {
-  composes: varClass;
-  padding: var(--dropdownsearch-padding);
-}
-.smallSearch {
-  --dropdownsearch-padding: 0 var(--zd_size5) 0;
-}
-.mediumSearch {
-  --dropdownsearch-padding: 0 var(--zd_size15) 0;
-}
+.varClass {
+  /* dropdownsearch default variables */
+  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+}
+.search {
+  composes: varClass;
+  padding: var(--dropdownsearch-padding);
+}
+.smallSearch {
+  --dropdownsearch-padding: 0 var(--zd_size5) 0;
+}
+.mediumSearch {
+  --dropdownsearch-padding: 0 var(--zd_size15) 0;
+}