@coreui/react-pro 5.24.1 → 5.26.0

package/src/components/date-picker/__tests__/__snapshots__/CDatePicker.spec.tsx.snap

@@ -3,652 +3,24 @@
 exports[`loads and displays CDatePicker component 1`] = `
 <div>
   <div
-    class="dropdown picker date-picker"
+    class="date-picker"
   >
     <div
-      aria-expanded="false"
-      class="input-group picker-input-group"
-    >
-      <input
-        autocomplete="off"
-        class="form-control"
-        placeholder="Select date"
-        type="text"
-      />
-      <span
-        class="input-group-text"
-      >
-        <span
-          class="picker-input-group-indicator"
-        >
-          <span
-            class="picker-input-group-icon date-picker-input-icon"
-          />
-        </span>
-      </span>
-    </div>
-    <div
-      aria-hidden="true"
-      class="dropdown-menu"
-      role="menu"
+      class="date-picker-input-group"
     >
       <div
-        class="date-picker-body"
+        class="date-picker-input-wrapper"
       >
-        <div
-          class="calendars date-picker-calendars"
-        >
-          <div
-            class="calendar days"
-          >
-            <div
-              class="calendar-nav"
-            >
-              <div
-                class="calendar-nav-prev"
-              >
-                <button
-                  class="btn btn-transparent btn-sm"
-                  type="button"
-                >
-                  <span
-                    class="calendar-nav-icon calendar-nav-icon-double-prev"
-                  />
-                </button>
-                <button
-                  class="btn btn-transparent btn-sm"
-                  type="button"
-                >
-                  <span
-                    class="calendar-nav-icon calendar-nav-icon-prev"
-                  />
-                </button>
-              </div>
-              <div
-                class="calendar-nav-date"
-              >
-                <button
-                  class="btn btn-transparent btn-sm"
-                  type="button"
-                >
-                  kwiecień
-                </button>
-                <button
-                  class="btn btn-transparent btn-sm"
-                  type="button"
-                >
-                  2023
-                </button>
-              </div>
-              <div
-                class="calendar-nav-next"
-              >
-                <button
-                  class="btn btn-transparent btn-sm"
-                  type="button"
-                >
-                  <span
-                    class="calendar-nav-icon calendar-nav-icon-next"
-                  />
-                </button>
-                <button
-                  class="btn btn-transparent btn-sm"
-                  type="button"
-                >
-                  <span
-                    class="calendar-nav-icon calendar-nav-icon-double-next"
-                  />
-                </button>
-              </div>
-            </div>
-            <table>
-              <thead>
-                <tr>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      po
-                    </div>
-                  </th>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      wt
-                    </div>
-                  </th>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      śr
-                    </div>
-                  </th>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      cz
-                    </div>
-                  </th>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      pi
-                    </div>
-                  </th>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      so
-                    </div>
-                  </th>
-                  <th
-                    class="calendar-cell"
-                  >
-                    <div
-                      class="calendar-header-cell-inner"
-                    >
-                      ni
-                    </div>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr>
-                  <td
-                    class="calendar-cell previous"
-                    tabindex="-1"
-                    title="27.03.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      27
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell previous"
-                    tabindex="-1"
-                    title="28.03.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      28
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell previous"
-                    tabindex="-1"
-                    title="29.03.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      29
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell previous"
-                    tabindex="-1"
-                    title="30.03.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      30
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell previous last"
-                    tabindex="-1"
-                    title="31.03.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      31
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="1.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      1
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="2.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      2
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="3.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      3
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="4.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      4
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="5.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      5
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="6.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      6
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="7.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      7
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="8.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      8
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="9.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      9
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="10.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      10
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="11.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      11
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="12.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      12
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell today current"
-                    tabindex="0"
-                    title="13.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      13
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="14.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      14
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="15.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      15
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="16.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      16
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="17.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      17
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="18.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      18
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="19.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      19
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="20.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      20
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="21.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      21
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="22.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      22
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="23.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      23
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="24.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      24
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="25.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      25
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="26.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      26
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="27.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      27
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="28.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      28
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current"
-                    tabindex="0"
-                    title="29.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      29
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell current last"
-                    tabindex="0"
-                    title="30.04.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      30
-                    </div>
-                  </td>
-                </tr>
-                <tr>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="1.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      1
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="2.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      2
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="3.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      3
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="4.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      4
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="5.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      5
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="6.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      6
-                    </div>
-                  </td>
-                  <td
-                    class="calendar-cell next"
-                    tabindex="-1"
-                    title="7.05.2023"
-                  >
-                    <div
-                      class="calendar-cell-inner"
-                    >
-                      7
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
+        <input
+          autocomplete="off"
+          class="date-picker-input"
+          placeholder="Select date"
+        />
       </div>
+      <div
+        class="date-picker-indicator"
+        tabindex="0"
+      />
     </div>
   </div>
 </div>

package/src/components/date-range-picker/CDateRangePicker.tsx

@@ -669,6 +669,8 @@ export const CDateRangePicker = forwardRef<HTMLDivElement | HTMLLIElement, CDate
           toggler={toggler ?? InputGroup()}
           portal={portal}
           onHide={() => {
+            setInputStartHoverValue(null)
+            setInputEndHoverValue(null)
             setVisible(false)
             onHide?.()
           }}

package/src/components/date-range-picker/__tests__/CDateRangePicker.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { CDateRangePicker } from '../CDateRangePicker'
 
 test('loads and displays CDateRangePicker component', async () => {