@patternfly/react-core 5.0.0-alpha.10 → 5.0.0-alpha.12

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -1,5 +1,773 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`With popover opened 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-c-date-picker"
+    style="--pf-c-date-picker__input--c-form-control--width-chars: 10;"
+  >
+    <div
+      style="display: contents;"
+    >
+      <div
+        class="pf-c-date-picker__input"
+      >
+        <div
+          class="pf-c-input-group"
+        >
+          <input
+            aria-invalid="false"
+            aria-label="Date picker"
+            class="pf-c-form-control"
+            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+            data-ouia-component-type="PF4/TextInput"
+            data-ouia-safe="true"
+            placeholder="YYYY-MM-DD"
+            type="text"
+            value=""
+          />
+          <button
+            aria-label="Toggle date picker"
+            class="pf-c-button pf-m-control"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 448 512"
+              width="1em"
+            >
+              <path
+                d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      style="display: contents;"
+    >
+      <div
+        aria-describedby="popover-unique_id_mock-body"
+        aria-label=""
+        aria-modal="true"
+        class="pf-c-popover pf-m-no-padding pf-m-width-auto pf-m-top"
+        role="dialog"
+        style="opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); position: absolute; left: 0px; top: 0px; z-index: 9999;"
+      >
+        <div
+          class="pf-c-popover__arrow"
+        />
+        <div
+          class="pf-c-popover__content"
+        >
+          <div
+            class="pf-c-popover__body"
+            id="popover-unique_id_mock-body"
+          >
+            <div
+              class="pf-c-calendar-month"
+            >
+              <div
+                class="pf-c-calendar-month__header"
+              >
+                <div
+                  class="pf-c-calendar-month__header-nav-control pf-m-prev-month"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Previous month"
+                    class="pf-c-button pf-m-plain"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+                    data-ouia-component-type="PF4/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <div
+                  class="pf-c-input-group"
+                >
+                  <div
+                    class="pf-c-calendar-month__header-month"
+                  >
+                    <span
+                      hidden=""
+                      id="unique_id_mock"
+                    >
+                      Month
+                    </span>
+                    <div
+                      class="pf-c-select"
+                      data-ouia-component-id="OUIA-Generated-Select-single-1"
+                      data-ouia-component-type="PF4/Select"
+                      data-ouia-safe="true"
+                      style="width: 140px;"
+                    >
+                      <button
+                        aria-expanded="false"
+                        aria-haspopup="listbox"
+                        aria-label="Options menu"
+                        aria-labelledby="unique_id_mock pf-select-toggle-id-0"
+                        class="pf-c-select__toggle"
+                        id="pf-select-toggle-id-0"
+                        type="button"
+                      >
+                        <div
+                          class="pf-c-select__toggle-wrapper"
+                        >
+                          <span
+                            class="pf-c-select__toggle-text"
+                          >
+                            December
+                          </span>
+                        </div>
+                        <span
+                          class="pf-c-select__toggle-arrow"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            style="vertical-align: -0.125em;"
+                            viewBox="0 0 320 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                          </svg>
+                        </span>
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="pf-c-calendar-month__header-year"
+                  >
+                    <input
+                      aria-invalid="false"
+                      aria-label="Select year"
+                      class="pf-c-form-control"
+                      data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+                      data-ouia-component-type="PF4/TextInput"
+                      data-ouia-safe="true"
+                      type="number"
+                      value="1969"
+                    />
+                  </div>
+                </div>
+                <div
+                  class="pf-c-calendar-month__header-nav-control pf-m-next-month"
+                >
+                  <button
+                    aria-disabled="false"
+                    aria-label="Next month"
+                    class="pf-c-button pf-m-plain"
+                    data-ouia-component-id="OUIA-Generated-Button-plain-2"
+                    data-ouia-component-type="PF4/Button"
+                    data-ouia-safe="true"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      fill="currentColor"
+                      height="1em"
+                      role="img"
+                      style="vertical-align: -0.125em;"
+                      viewBox="0 0 256 512"
+                      width="1em"
+                    >
+                      <path
+                        d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+              <table
+                class="pf-c-calendar-month__calendar"
+              >
+                <thead
+                  class="pf-c-calendar-month__days"
+                >
+                  <tr>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Sunday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        S
+                      </span>
+                    </th>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Monday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        M
+                      </span>
+                    </th>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Tuesday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        T
+                      </span>
+                    </th>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Wednesday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        W
+                      </span>
+                    </th>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Thursday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        T
+                      </span>
+                    </th>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Friday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        F
+                      </span>
+                    </th>
+                    <th
+                      class="pf-c-calendar-month__day"
+                      scope="col"
+                    >
+                      <span
+                        class="pf-screen-reader"
+                      >
+                        Saturday
+                      </span>
+                      <span
+                        aria-hidden="true"
+                      >
+                        S
+                      </span>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr
+                    class="pf-c-calendar-month__dates-row"
+                  >
+                    <td
+                      class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+                    >
+                      <button
+                        aria-label="30 November 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        30
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="1 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        1
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="2 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        2
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="3 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        3
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="4 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        4
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="5 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        5
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="6 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        6
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="pf-c-calendar-month__dates-row"
+                  >
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="7 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        7
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="8 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        8
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="9 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        9
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="10 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        10
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="11 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        11
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="12 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        12
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="13 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        13
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="pf-c-calendar-month__dates-row"
+                  >
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="14 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        14
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="15 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        15
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="16 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        16
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="17 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        17
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="18 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        18
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="19 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        19
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="20 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        20
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="pf-c-calendar-month__dates-row"
+                  >
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="21 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        21
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="22 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        22
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="23 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        23
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="24 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        24
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="25 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        25
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="26 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        26
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="27 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        27
+                      </button>
+                    </td>
+                  </tr>
+                  <tr
+                    class="pf-c-calendar-month__dates-row"
+                  >
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="28 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        28
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="29 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        29
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="30 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        30
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell"
+                    >
+                      <button
+                        aria-label="31 December 1969"
+                        class="pf-c-calendar-month__date"
+                        tabindex="0"
+                        type="button"
+                      >
+                        31
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+                    >
+                      <button
+                        aria-label="1 January 1970"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        1
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+                    >
+                      <button
+                        aria-label="2 January 1970"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        2
+                      </button>
+                    </td>
+                    <td
+                      class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+                    >
+                      <button
+                        aria-label="3 January 1970"
+                        class="pf-c-calendar-month__date"
+                        tabindex="-1"
+                        type="button"
+                      >
+                        3
+                      </button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`disabled date picker 1`] = `
 <DocumentFragment>
   <div