@epam/uui 5.5.0 → 5.5.2

package/components/datePickers/__tests__/__snapshots__/RangeDatePickerBody.test.tsx.snap

@@ -0,0 +1,1231 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RangeDatePickerBody should be rendered correctly 1`] = `
+<div
+  className="root uui-datepicker-container"
+>
+  <div
+    className="uui-flex-row root size-36 daySelection container container align-items-top"
+    style={
+      Object {
+        "columnGap": undefined,
+        "rowGap": undefined,
+      }
+    }
+  >
+    <div
+      className="flexCell"
+      style={
+        Object {
+          "alignSelf": undefined,
+          "flexBasis": "auto",
+          "flexGrow": undefined,
+          "flexShrink": undefined,
+          "minWidth": 0,
+          "textAlign": undefined,
+        }
+      }
+    >
+      <div
+        className="uui-flex-row root size-36 container align-items-center"
+        style={
+          Object {
+            "columnGap": undefined,
+            "rowGap": undefined,
+          }
+        }
+      >
+        <div
+          className="uui-flex-row root size-36 bodesWrapper container align-items-top"
+          style={
+            Object {
+              "columnGap": undefined,
+              "rowGap": undefined,
+            }
+          }
+        >
+          <div
+            className="uui-datepicker-container fromPicker"
+          >
+            <div
+              className="root uui-datepickerBody-wrapper fromPicker"
+            >
+              <div
+                className="container uui-datepickerheader-container"
+              >
+                <header
+                  className="uui-datepickerheader-header"
+                >
+                  <button
+                    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-left"
+                    onClick={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <div
+                      className="container uui-icon uui-enabled"
+                      style={Object {}}
+                    >
+                      <svg
+                        className=""
+                      />
+                    </div>
+                  </button>
+                  <button
+                    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepickerheader-nav-title"
+                    onClick={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <div
+                      className="uui-caption"
+                    >
+                      September 2020
+                    </div>
+                  </button>
+                  <button
+                    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-right"
+                    onClick={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <div
+                      className="container uui-icon uui-enabled"
+                      style={Object {}}
+                    >
+                      <svg
+                        className=""
+                      />
+                    </div>
+                  </button>
+                </header>
+              </div>
+              <div
+                className="container uui-calendar-container root"
+              >
+                <div
+                  className="uui-calendar-content"
+                >
+                  <div
+                    className="uui-calendar-weekdays-container"
+                  >
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Mon
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Tue
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Wed
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Thu
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Fri
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Sat
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Sun
+                    </div>
+                  </div>
+                  <div
+                    className="uui-calendar-days"
+                    style={
+                      Object {
+                        "height": "180px",
+                      }
+                    }
+                  >
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      />
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            1
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            2
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            3
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            4
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            5
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            6
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            7
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            8
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            9
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            10
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            11
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            12
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            13
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            14
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            15
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            16
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            17
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            18
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            19
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            20
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            21
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            22
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            23
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            24
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            25
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            26
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            27
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            28
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            29
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            30
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            className="uui-datepicker-container toPicker"
+          >
+            <div
+              className="root uui-datepickerBody-wrapper toPicker"
+            >
+              <div
+                className="container uui-datepickerheader-container"
+              >
+                <header
+                  className="uui-datepickerheader-header"
+                >
+                  <button
+                    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-left"
+                    onClick={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <div
+                      className="container uui-icon uui-enabled"
+                      style={Object {}}
+                    >
+                      <svg
+                        className=""
+                      />
+                    </div>
+                  </button>
+                  <button
+                    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-primary uui-size-36 uui-datepickerheader-nav-title"
+                    onClick={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <div
+                      className="uui-caption"
+                    >
+                      October 2020
+                    </div>
+                  </button>
+                  <button
+                    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-ghost uui-color-secondary uui-size-36 uui-datepickerheader-nav-icon-right"
+                    onClick={[Function]}
+                    tabIndex={0}
+                    type="button"
+                  >
+                    <div
+                      className="container uui-icon uui-enabled"
+                      style={Object {}}
+                    >
+                      <svg
+                        className=""
+                      />
+                    </div>
+                  </button>
+                </header>
+              </div>
+              <div
+                className="container uui-calendar-container root"
+              >
+                <div
+                  className="uui-calendar-content"
+                >
+                  <div
+                    className="uui-calendar-weekdays-container"
+                  >
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Mon
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Tue
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Wed
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Thu
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Fri
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Sat
+                    </div>
+                    <div
+                      className="uui-calendar-weekday"
+                    >
+                      Sun
+                    </div>
+                  </div>
+                  <div
+                    className="uui-calendar-days"
+                    style={
+                      Object {
+                        "height": "180px",
+                      }
+                    }
+                  >
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      />
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      />
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      />
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            1
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            2
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            3
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            4
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            5
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            6
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            7
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            8
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            9
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            10
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            11
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            12
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            13
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            14
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            15
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            16
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            17
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            18
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            19
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            20
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            21
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            22
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            23
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            24
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            25
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            26
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            27
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            28
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            29
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            30
+                          </div>
+                        </div>
+                      </div>
+                      <div
+                        className="uui-calendar-day-cell"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="uui-calendar-clickable-day -clickable uui-calendar-day-wrapper uui-calendar-day-holiday"
+                          onClick={[Function]}
+                        >
+                          <div
+                            className="uui-calendar-day"
+                          >
+                            31
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;