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

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 2023"
+            data-title="July 2024"
             tabindex="0"
           >
-            July 2023
+            July 2024
           </h2>
           <span>
             <i
@@ -176,54 +176,9 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
             data-selector-id="container"
             data-test-id="containerComponent"
           >
-            <div
-              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"
+              class="datesStr grid sunday invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -239,16 +194,9 @@ 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 sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -291,9 +239,16 @@ 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   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -309,16 +264,9 @@ 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 sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -361,9 +309,16 @@ 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   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -379,16 +334,9 @@ 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 sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -431,9 +379,16 @@ 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   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -449,16 +404,9 @@ 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 sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -501,9 +449,16 @@ 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   shrinkOff"
+              class="datesStr grid sunday   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -519,16 +474,9 @@ 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 sunday   shrinkOff"
+              class="datesStr grid   shrinkOff"
               data-id="dateTime_date"
               data-selector-id="box"
               data-test-id="dateTime_date"
@@ -571,9 +519,16 @@ 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  invalidDate   shrinkOff"
+              class="datesStr grid sunday  invalidDate   shrinkOff"
               data-id="dateTime_invalidDate"
               data-selector-id="box"
               data-test-id="dateTime_invalidDate"
@@ -589,6 +544,51 @@ 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="dateWidget_datePicker"
+                data-id="containerComponent"
                 data-selector-id="container"
-                data-test-id="dateWidget_datePicker"
+                data-test-id="containerComponent"
               >
                 <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.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;
+}

package/lib/DropDown/DropDownSeparator.module.css

@@ -1,7 +1,7 @@
-.separator {
-  height: var(--zd_size1) ;
-  border-width: 0 0 1px 0;
-  border-style: solid;
-  border-color: var(--zdt_dropdown_user_default_border);
-  margin: var(--zd_size5) 0 ;
-}
+.separator {
+  height: var(--zd_size1) ;
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: var(--zdt_dropdown_user_default_border);
+  margin: var(--zd_size5) 0 ;
+}

package/lib/Heading/Heading.module.css

@@ -1,5 +1,5 @@
-.reset {
-  font-size: inherit ;
-  font-weight: initial;
-  margin: initial ;
+.reset {
+  font-size: inherit ;
+  font-weight: initial;
+  margin: initial ;
 }