uikit-react-public 0.11.20 → 0.11.24

package/lib/components/Datepicker/__tests__/__snapshots__/Datepicker.test.tsx.snap

@@ -1,212 +1,28 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Datepicker > Snapshot: date provided 1`] = `
-<div
-  class="css-1q58hts"
-  data-testid="ucl-datepicker"
-  tabindex="0"
->
-  <div
-    aria-label="Date input"
-    class="css-1jl4u9h"
-    data-testid="ucl-datepicker-date-field"
-    role="group"
-  >
-    <div>
-      <input
-        aria-label="Date"
-        class="css-1gbj3xb"
-        data-testid="ucl-datepicker-input"
-        inputmode="numeric"
-        placeholder="DD/MM/YYYY"
-        type="text"
-        value="04/02/2025"
-      />
-    </div>
-    <svg
-      class="ucl-uikit-icon css-148hpxb"
-      data-testid="ucl-datepicker-calendar-icon"
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        height="18"
-        rx="2"
-        ry="2"
-        width="18"
-        x="3"
-        y="4"
-      />
-      <line
-        x1="16"
-        x2="16"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="8"
-        x2="8"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="10"
-        y2="10"
-      />
-    </svg>
-  </div>
-</div>
-`;
-
 exports[`Datepicker > Snapshot: no date provided 1`] = `
 <div
-  class="css-1q58hts"
-  data-testid="ucl-datepicker"
-  tabindex="0"
->
-  <div
-    aria-label="Date input"
-    class="css-1jl4u9h"
-    data-testid="ucl-datepicker-date-field"
-    role="group"
-  >
-    <div>
-      <input
-        aria-label="Date"
-        class="css-1gbj3xb"
-        data-testid="ucl-datepicker-input"
-        inputmode="numeric"
-        placeholder="DD/MM/YYYY"
-        type="text"
-        value=""
-      />
-    </div>
-    <svg
-      class="ucl-uikit-icon css-148hpxb"
-      data-testid="ucl-datepicker-calendar-icon"
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        height="18"
-        rx="2"
-        ry="2"
-        width="18"
-        x="3"
-        y="4"
-      />
-      <line
-        x1="16"
-        x2="16"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="8"
-        x2="8"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="10"
-        y2="10"
-      />
-    </svg>
-  </div>
-</div>
-`;
-
-exports[`Datepicker > Snapshot: with :focus & date provided 1`] = `
-<div
-  class="css-1q58hts"
-  data-testid="abc"
-  tabindex="0"
+  class="ucl-uikit-datepicker css-fhsq0i"
+  data-testid="ucl-uikit-datepicker"
 >
   <div
-    aria-label="Date input"
-    class="css-1jl4u9h"
-    data-testid="abc-date-field"
-    role="group"
-  >
-    <div>
-      <input
-        aria-label="Date"
-        class="css-1gbj3xb"
-        data-testid="abc-input"
-        inputmode="numeric"
-        placeholder="DD/MM/YYYY"
-        type="text"
-        value="04/02/2025"
-      />
-    </div>
-    <svg
-      class="ucl-uikit-icon css-148hpxb"
-      data-testid="abc-calendar-icon"
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect
-        height="18"
-        rx="2"
-        ry="2"
-        width="18"
-        x="3"
-        y="4"
-      />
-      <line
-        x1="16"
-        x2="16"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="8"
-        x2="8"
-        y1="2"
-        y2="6"
-      />
-      <line
-        x1="3"
-        x2="21"
-        y1="10"
-        y2="10"
-      />
-    </svg>
-  </div>
-  <div
-    class="css-1ulc5lv"
-    data-testid="abc-calendar-menu"
+    class="ucl-uikit-datepicker__visible-field css-e3vwui"
+    data-testid="ucl-uikit-datepicker__visible-field"
   >
+    <input
+      aria-label="Currently selected date: "
+      class="ucl-uikit-datepicker__input css-1k3pose"
+      data-testid="ucl-uikit-datepicker__input"
+      inputmode="numeric"
+      placeholder="DD/MM/YYYY"
+      type="text"
+      value=""
+    />
     <div
-      class="css-ae7n9c"
+      class="css-3tb0p0"
     >
       <svg
-        class="ucl-uikit-icon css-stisf5"
+        class="ucl-uikit-icon css-1u4xgls"
         data-testid="ucl-uikit-icon"
         fill="none"
         height="24"
@@ -218,22 +34,61 @@ exports[`Datepicker > Snapshot: with :focus & date provided 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <polyline
-          points="15 18 9 12 15 6"
+        <rect
+          height="18"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="4"
+        />
+        <line
+          x1="16"
+          x2="16"
+          y1="2"
+          y2="6"
+        />
+        <line
+          x1="8"
+          x2="8"
+          y1="2"
+          y2="6"
+        />
+        <line
+          x1="3"
+          x2="21"
+          y1="10"
+          y2="10"
         />
       </svg>
-      <span
-        class="css-m9j3hv"
-      >
-        <span>
-          February
-        </span>
-        <span>
-          2025
-        </span>
-      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Datepicker > Snapshot: with date provided 1`] = `
+<div
+  class="ucl-uikit-datepicker css-fhsq0i"
+  data-testid="ucl-uikit-datepicker"
+>
+  <div
+    class="ucl-uikit-datepicker__visible-field css-e3vwui"
+    data-testid="ucl-uikit-datepicker__visible-field"
+  >
+    <input
+      aria-label="Currently selected date: 10/03/2025"
+      class="ucl-uikit-datepicker__input css-1k3pose"
+      data-testid="ucl-uikit-datepicker__input"
+      inputmode="numeric"
+      placeholder="DD/MM/YYYY"
+      type="text"
+      value="10/03/2025"
+    />
+    <div
+      class="css-3tb0p0"
+    >
       <svg
-        class="ucl-uikit-icon css-stisf5"
+        class="ucl-uikit-icon css-1u4xgls"
         data-testid="ucl-uikit-icon"
         fill="none"
         height="24"
@@ -245,544 +100,34 @@ exports[`Datepicker > Snapshot: with :focus & date provided 1`] = `
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <polyline
-          points="9 18 15 12 9 6"
+        <rect
+          height="18"
+          rx="2"
+          ry="2"
+          width="18"
+          x="3"
+          y="4"
+        />
+        <line
+          x1="16"
+          x2="16"
+          y1="2"
+          y2="6"
+        />
+        <line
+          x1="8"
+          x2="8"
+          y1="2"
+          y2="6"
+        />
+        <line
+          x1="3"
+          x2="21"
+          y1="10"
+          y2="10"
         />
       </svg>
     </div>
-    <div
-      class="css-1yuhkwf"
-    >
-      <div
-        class="css-10gjhii"
-      >
-        <div
-          class="css-76sg87"
-        >
-          M
-        </div>
-        <div
-          class="css-76sg87"
-        >
-          T
-        </div>
-        <div
-          class="css-76sg87"
-        >
-          W
-        </div>
-        <div
-          class="css-76sg87"
-        >
-          T
-        </div>
-        <div
-          class="css-76sg87"
-        >
-          F
-        </div>
-        <div
-          class="css-ie1qp6"
-        >
-          S
-        </div>
-        <div
-          class="css-ie1qp6"
-        >
-          S
-        </div>
-        <div
-          aria-label="Select Mon Jan 27 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            27
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Tue Jan 28 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            28
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Wed Jan 29 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            29
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Thu Jan 30 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            30
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Fri Jan 31 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            31
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sat Feb 01 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            1
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sun Feb 02 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            2
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Mon Feb 03 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            3
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Tue Feb 04 2025"
-          class="css-qwztjp"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            4
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Wed Feb 05 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            5
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Thu Feb 06 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            6
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Fri Feb 07 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            7
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sat Feb 08 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            8
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sun Feb 09 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            9
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Mon Feb 10 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            10
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Tue Feb 11 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            11
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Wed Feb 12 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            12
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Thu Feb 13 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            13
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Fri Feb 14 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            14
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sat Feb 15 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            15
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sun Feb 16 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            16
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Mon Feb 17 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            17
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Tue Feb 18 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            18
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Wed Feb 19 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            19
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Thu Feb 20 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            20
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Fri Feb 21 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            21
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sat Feb 22 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            22
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sun Feb 23 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            23
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Mon Feb 24 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            24
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Tue Feb 25 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            25
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Wed Feb 26 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            26
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Thu Feb 27 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            27
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Fri Feb 28 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-1n0xgdm"
-          >
-            28
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sat Mar 01 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            1
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-        <div
-          aria-label="Select Sun Mar 02 2025"
-          class="css-1wigzpm"
-          role="button"
-        >
-          <div
-            class="css-6lpfgq"
-          >
-            2
-          </div>
-          <div
-            class="css-1dq26wd"
-          />
-        </div>
-      </div>
-    </div>
   </div>
 </div>
 `;