// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`With popover opened 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-date-picker"
    style="--pf-v6-c-date-picker__input--c-form-control--width-chars: 10;"
  >
    <div
      class="pf-v6-c-date-picker__input"
    >
      <div
        class="pf-v6-c-input-group"
      >
        <div
          class="pf-v6-c-input-group__item"
        >
          <span
            class="pf-v6-c-form-control"
          >
            <input
              aria-invalid="false"
              aria-label="Date picker"
              data-ouia-component-id="OUIA-Generated-TextInputBase-4"
              data-ouia-component-type="PF6/TextInput"
              data-ouia-safe="true"
              placeholder="YYYY-MM-DD"
              type="text"
              value="2020-03-17"
            />
          </span>
        </div>
        <div
          class="pf-v6-c-input-group__item"
        >
          <button
            aria-disabled="false"
            aria-haspopup="dialog"
            aria-label="Toggle date picker"
            class="pf-v6-c-button pf-m-control"
            data-ouia-component-id="OUIA-Generated-Button-control-4"
            data-ouia-component-type="PF6/Button"
            data-ouia-safe="true"
            type="button"
          >
            <span
              class="pf-v6-c-button__icon"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                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>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      aria-describedby="popover-unique_id_mock-body"
      aria-label=""
      aria-modal="true"
      class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
      data-popper-escaped="true"
      data-popper-placement="bottom"
      data-popper-reference-hidden="true"
      role="dialog"
      style="position: absolute; left: 0px; top: 0px; z-index: 9999; opacity: 1; transition: opacity 300ms cubic-bezier(.54, 1.5, .38, 1.11); min-width: auto; transform: translate(0px, 25px);"
    >
      <div
        class="pf-v6-c-popover__arrow"
      />
      <div
        class="pf-v6-c-popover__content"
      >
        <div
          class="pf-v6-c-popover__body"
          id="popover-unique_id_mock-body"
        >
          <div
            class="pf-v6-c-calendar-month"
          >
            <div
              class="pf-v6-c-calendar-month__header"
            >
              <div
                class="pf-v6-c-calendar-month__header-nav-control pf-m-prev-month"
              >
                <button
                  aria-disabled="false"
                  aria-label="Previous month"
                  class="pf-v6-c-button pf-m-plain"
                  data-ouia-component-id="OUIA-Generated-Button-plain-1"
                  data-ouia-component-type="PF6/Button"
                  data-ouia-safe="true"
                  type="button"
                >
                  <span
                    class="pf-v6-c-button__icon"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      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>
                  </span>
                </button>
              </div>
              <div
                class="pf-v6-c-input-group"
              >
                <div
                  class="pf-v6-c-input-group__item pf-m-fill"
                >
                  <div
                    class="pf-v6-c-calendar-month__header-month"
                  >
                    <span
                      hidden=""
                      id="unique_id_mock"
                    >
                      Month
                    </span>
                    <button
                      aria-expanded="false"
                      class="pf-v6-c-menu-toggle"
                      data-ouia-component-id="OUIA-Generated-MenuToggle-1"
                      data-ouia-component-type="PF6/MenuToggle"
                      data-ouia-safe="true"
                      style="width: 140px;"
                      type="button"
                    >
                      <span
                        class="pf-v6-c-menu-toggle__text"
                      >
                        March
                      </span>
                      <span
                        class="pf-v6-c-menu-toggle__controls"
                      >
                        <span
                          class="pf-v6-c-menu-toggle__toggle-icon"
                        >
                          <svg
                            aria-hidden="true"
                            class="pf-v6-svg"
                            fill="currentColor"
                            height="1em"
                            role="img"
                            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>
                      </span>
                    </button>
                  </div>
                </div>
                <div
                  class="pf-v6-c-input-group__item"
                >
                  <div
                    class="pf-v6-c-calendar-month__header-year"
                  >
                    <span
                      class="pf-v6-c-form-control"
                    >
                      <input
                        aria-invalid="false"
                        aria-label="Select year"
                        data-ouia-component-id="OUIA-Generated-TextInputBase-5"
                        data-ouia-component-type="PF6/TextInput"
                        data-ouia-safe="true"
                        type="number"
                        value="2020"
                      />
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="pf-v6-c-calendar-month__header-nav-control pf-m-next-month"
              >
                <button
                  aria-disabled="false"
                  aria-label="Next month"
                  class="pf-v6-c-button pf-m-plain"
                  data-ouia-component-id="OUIA-Generated-Button-plain-2"
                  data-ouia-component-type="PF6/Button"
                  data-ouia-safe="true"
                  type="button"
                >
                  <span
                    class="pf-v6-c-button__icon"
                  >
                    <svg
                      aria-hidden="true"
                      class="pf-v6-svg"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      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>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="pf-v6-c-calendar-month__calendar"
            >
              <thead
                class="pf-v6-c-calendar-month__days"
              >
                <tr>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Sunday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      S
                    </span>
                  </th>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Monday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      M
                    </span>
                  </th>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Tuesday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      T
                    </span>
                  </th>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Wednesday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      W
                    </span>
                  </th>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Thursday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      T
                    </span>
                  </th>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Friday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      F
                    </span>
                  </th>
                  <th
                    class="pf-v6-c-calendar-month__day"
                    scope="col"
                  >
                    <span
                      class="pf-v6-screen-reader"
                    >
                      Saturday
                    </span>
                    <span
                      aria-hidden="true"
                    >
                      S
                    </span>
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr
                  class="pf-v6-c-calendar-month__dates-row"
                >
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="1 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      1
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="2 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      2
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="3 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      3
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="4 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      4
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="5 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      5
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="6 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      6
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="7 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      7
                    </button>
                  </td>
                </tr>
                <tr
                  class="pf-v6-c-calendar-month__dates-row"
                >
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="8 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      8
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="9 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      9
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="10 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      10
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="11 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      11
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="12 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      12
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="13 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      13
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="14 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      14
                    </button>
                  </td>
                </tr>
                <tr
                  class="pf-v6-c-calendar-month__dates-row"
                >
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="15 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      15
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="16 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      16
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell pf-m-selected"
                  >
                    <button
                      aria-label="17 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="0"
                      type="button"
                    >
                      17
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="18 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      18
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="19 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      19
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="20 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      20
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="21 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      21
                    </button>
                  </td>
                </tr>
                <tr
                  class="pf-v6-c-calendar-month__dates-row"
                >
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="22 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      22
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="23 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      23
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="24 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      24
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="25 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      25
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="26 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      26
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="27 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      27
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="28 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      28
                    </button>
                  </td>
                </tr>
                <tr
                  class="pf-v6-c-calendar-month__dates-row"
                >
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="29 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      29
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="30 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      30
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell"
                  >
                    <button
                      aria-label="31 March 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      31
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month"
                  >
                    <button
                      aria-label="1 April 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      1
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month"
                  >
                    <button
                      aria-label="2 April 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      2
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month"
                  >
                    <button
                      aria-label="3 April 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      3
                    </button>
                  </td>
                  <td
                    class="pf-v6-c-calendar-month__dates-cell pf-m-adjacent-month"
                  >
                    <button
                      aria-label="4 April 2020"
                      class="pf-v6-c-calendar-month__date"
                      tabindex="-1"
                      type="button"
                    >
                      4
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;

exports[`disabled date picker 1`] = `
<DocumentFragment>
  <div
    class="pf-v6-c-date-picker"
    style="--pf-v6-c-date-picker__input--c-form-control--width-chars: 10;"
  >
    <div
      class="pf-v6-c-date-picker__input"
    >
      <div
        class="pf-v6-c-input-group"
      >
        <div
          class="pf-v6-c-input-group__item"
        >
          <span
            class="pf-v6-c-form-control pf-m-disabled"
          >
            <input
              aria-invalid="false"
              aria-label="disabled date picker"
              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
              data-ouia-component-type="PF6/TextInput"
              data-ouia-safe="true"
              disabled=""
              placeholder="YYYY-MM-DD"
              type="text"
              value="2020-11-20"
            />
          </span>
        </div>
        <div
          class="pf-v6-c-input-group__item"
        >
          <button
            aria-disabled="false"
            aria-haspopup="dialog"
            aria-label="Toggle date picker"
            class="pf-v6-c-button pf-m-control"
            data-ouia-component-id="OUIA-Generated-Button-control-1"
            data-ouia-component-type="PF6/Button"
            data-ouia-safe="true"
            disabled=""
            type="button"
          >
            <span
              class="pf-v6-c-button__icon"
            >
              <svg
                aria-hidden="true"
                class="pf-v6-svg"
                fill="currentColor"
                height="1em"
                role="img"
                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>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</DocumentFragment>
`;