@indico-data/design-system 2.42.0 → 2.43.0

package/lib/index.esm.css

@@ -1,4 +1,3 @@
-@import 'react-day-picker/style.css';
 @import './assets/fonts/mulish/mulish.css';
 :root {
   --pf-font-family-base: "Mulish", sans-serif;
@@ -943,14 +942,33 @@ a:hover, .link:hover {
 }
 
 .table {
-  background-color: var(--pf-table-background-color);
-  color: var(--pf-table-font-color);
   border-radius: var(--pf-rounded);
-  border: 1px solid var(--pf-table-border-color);
+  border: var(--pf-border-sm) solid var(--pf-table-border-color);
   /* Striped: alternating background */
   /* Checked: Precedence over striped */
   /* Highlighted: Precedence over checked */
 }
+.table--full-height {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+}
+.table-body {
+  background-color: var(--pf-table-background-color);
+  color: var(--pf-table-font-color);
+  border-radius: var(--pf-rounded) !important;
+  border: var(--pf-border-sm) solid var(--pf-table-border-color);
+}
+.table > *:nth-child(3) {
+  margin-top: auto;
+  background-color: transparent;
+  border: none;
+}
+.table > *:nth-child(3) .rdt_Pagination {
+  background-color: transparent;
+  border: none;
+}
 .table .rdt_Table,
 .table .rdt_TableRow,
 .table .rdt_TableCol,
@@ -976,10 +994,6 @@ a:hover, .link:hover {
   border-radius: var(--pf-rounded) 0;
   border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
-.table .rdt_TableHeadRow,
-.table .rdt_TableRow {
-  border-bottom: none !important;
-}
 .table .rdt_TableHeadRow > :first-child,
 .table .rdt_TableRow > :first-child {
   padding-left: var(--pf-padding-4);
@@ -987,7 +1001,8 @@ a:hover, .link:hover {
   justify-content: left;
 }
 .table .rdt_TableRow {
-  border-top: none;
+  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
+  border-bottom: var(--pf-border-sm) solid var(--pf-table-border-color);
 }
 .table .rdt_TableRow:hover .rdt_TableCell {
   background-color: var(--pf-table-hover-color) !important;
@@ -1018,10 +1033,6 @@ a:hover, .link:hover {
   border-top: var(--pf-border-md) solid var(--pf-table-highlighted-color);
   background-color: var(--pf-table-highlighted-color) !important;
 }
-.table .rdt_Pagination {
-  border-top: var(--pf-border-sm) solid var(--pf-table-border-color);
-  border-radius: 0 0 var(--pf-rounded) var(--pf-rounded);
-}
 
 :root,
 :root [data-theme=light],
@@ -5003,4 +5014,309 @@ p,
   100% {
     transform: rotate(360deg);
   }
-}
+}
+/* Variables declaration */
+/* prettier-ignore */
+.rdp-root {
+  --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
+  --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
+  --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
+
+  --rdp-day-font: inherit; /* The font used for the day cells. */
+  --rdp-day-height: 2.75rem; /* The height of the day cells. */
+  --rdp-day-width: 2.75rem; /* The width of the day cells. */
+  
+  --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
+  --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
+  --rdp-day_button-height: var(--rdp-day-width); /* The height of the day cells. */
+  --rdp-day_button-width: var(--rdp-day-height); /* The width of the day cells. */
+  
+  --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
+  --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
+  --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
+  --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
+  --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
+  
+  --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
+  
+  --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
+  --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
+  
+  --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
+  --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
+  --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
+  --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
+  
+  --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
+  --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
+  --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
+  --rdp-range_middle-color: inherit;/* The color of the range text. */
+  
+  --rdp-range_start-color: white; /* The color of the range text. */
+  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
+  --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
+  
+  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
+  --rdp-range_end-color: white;/* The color of the range text. */
+  --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
+  
+  --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
+  --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
+  --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
+  --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
+  --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
+  --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
+  --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
+  --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
+  --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
+  --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
+
+  --rdp-gradient-direction: 90deg;
+}
+
+.rdp-root[dir="rtl"] {
+  --rdp-gradient-direction: -90deg;
+}
+
+/* Root of the component. */
+.rdp-root {
+  position: relative; /* Required to position the navigation toolbar. */
+  box-sizing: border-box;
+}
+
+.rdp-root * {
+  box-sizing: border-box;
+}
+
+.rdp-day {
+  width: var(--rdp-day-width);
+  height: var(--rdp-day-height);
+  font: var(--rdp-day-font);
+  text-align: center;
+}
+
+.rdp-day_button {
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  width: var(--rdp-day_button-width);
+  height: var(--rdp-day_button-height);
+  border: var(--rdp-day_button-border);
+  border-radius: var(--rdp-day_button-border-radius);
+}
+
+.rdp-day_button:disabled {
+  cursor: revert;
+}
+
+.rdp-caption_label {
+  z-index: 1;
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+
+  white-space: nowrap;
+  border: 0;
+}
+
+.rdp-button_next,
+.rdp-button_previous {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  appearance: none;
+
+  width: var(--rdp-nav_button-width);
+  height: var(--rdp-nav_button-height);
+}
+
+.rdp-button_next:disabled,
+.rdp-button_previous:disabled {
+  cursor: revert;
+
+  opacity: var(--rdp-nav_button-disabled-opacity);
+}
+
+.rdp-chevron {
+  display: inline-block;
+  fill: var(--rdp-accent-color);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+}
+
+.rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
+  transform: rotate(180deg);
+  transform-origin: 50%;
+}
+
+.rdp-dropdowns {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--rdp-dropdown-gap);
+}
+.rdp-dropdown {
+  z-index: 2;
+
+  /* Reset */
+  opacity: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: inherit;
+  border: none;
+  line-height: inherit;
+}
+
+.rdp-dropdown_root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-month_caption {
+  display: flex;
+  align-content: center;
+  height: var(--rdp-nav-height);
+  font: var(--rdp-month_caption-font);
+}
+
+.rdp-months {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rdp-months-gap);
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+.rdp-month_grid {
+  border-collapse: collapse;
+}
+
+.rdp-nav {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+
+  display: flex;
+  align-items: center;
+
+  height: var(--rdp-nav-height);
+}
+
+.rdp-weekday {
+  opacity: var(--rdp-weekday-opacity);
+  padding: var(--rdp-weekday-padding);
+  font: var(--rdp-weekday-font);
+  text-align: var(--rdp-weekday-text-align);
+  text-transform: var(--rdp-weekday-text-transform);
+}
+
+.rdp-week_number {
+  opacity: var(--rdp-week_number-opacity);
+  font: var(--rdp-week_number-font);
+  height: var(--rdp-week_number-height);
+  width: var(--rdp-week_number-width);
+  border: var(--rdp-week_number-border);
+  border-radius: var(--rdp-week_number-border-radius);
+  text-align: var(--rdp-weeknumber-text-align);
+}
+
+/* DAY MODIFIERS */
+.rdp-today:not(.rdp-outside) {
+  color: var(--rdp-today-color);
+}
+
+.rdp-selected {
+  font: var(--rdp-selected-font);
+}
+
+.rdp-selected .rdp-day_button {
+  border: var(--rdp-selected-border);
+}
+
+.rdp-outside {
+  opacity: var(--rdp-outside-opacity);
+}
+
+.rdp-disabled {
+  opacity: var(--rdp-disabled-opacity);
+}
+
+.rdp-hidden {
+  visibility: hidden;
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_start {
+  background: var(--rdp-range_start-background);
+}
+
+.rdp-range_start .rdp-day_button {
+  background-color: var(--rdp-range_start-date-background-color);
+  color: var(--rdp-range_start-color);
+}
+
+.rdp-range_middle {
+  background-color: var(--rdp-range_middle-background-color);
+  font: var(--rdp-range_middle-font);
+}
+
+.rdp-range_middle .rdp-day_button {
+  border-color: transparent;
+  border: unset;
+  border-radius: unset;
+  color: var(--rdp-range_middle-color);
+}
+
+.rdp-range_end {
+  background: var(--rdp-range_end-background);
+  color: var(--rdp-range_end-color);
+}
+
+.rdp-range_end .rdp-day_button {
+  color: var(--rdp-range_start-color);
+  background-color: var(--rdp-range_end-date-background-color);
+}
+
+.rdp-range_start.rdp-range_end {
+  background: revert;
+}
+
+.rdp-focusable {
+  cursor: pointer;
+}

package/lib/index.esm.js

@@ -5611,6 +5611,7 @@ const indicons = {
     'gen-ai': (jsx("svg", { viewBox: "0 0 20 23", fill: "currentColor", children: jsx("path", { d: "M9.304 4.9c.124 0 .186-.07.218-.18.32-1.685.3-1.725 2.103-2.058.124-.02.197-.09.197-.212 0-.12-.073-.191-.197-.211-1.793-.353-1.74-.394-2.103-2.057C9.49.07 9.428 0 9.304 0s-.187.07-.218.182c-.362 1.663-.3 1.704-2.103 2.057-.114.02-.197.09-.197.211s.083.192.197.212c1.803.353 1.782.373 2.103 2.057.031.111.094.182.218.182M4.29 11.839c.196 0 .331-.121.352-.303.373-2.692.466-2.692 3.325-3.226.187-.03.322-.151.322-.343 0-.182-.135-.313-.322-.343-2.859-.383-2.963-.474-3.325-3.216a.34.34 0 0 0-.352-.313c-.187 0-.322.131-.342.323C3.606 7.119 3.46 7.109.622 7.623c-.187.04-.321.161-.321.343 0 .202.134.312.362.343 2.818.443 2.943.514 3.285 3.206.02.202.155.323.342.323M11.314 23c.27 0 .466-.192.518-.464.735-5.525 1.533-6.362 7.148-6.967.29-.03.487-.242.487-.504 0-.263-.196-.464-.486-.505-5.616-.605-6.414-1.442-7.15-6.967-.05-.272-.248-.454-.517-.454-.27 0-.466.182-.508.454-.735 5.525-1.543 6.362-7.148 6.967-.3.04-.498.242-.498.505 0 .262.197.474.498.504 5.594.716 6.371 1.452 7.148 6.967.042.272.239.464.508.464" }) })),
     graphiql: (jsx("svg", { viewBox: "0 0 102 102", fill: "currentColor", children: jsx("path", { d: "M90,62.8c-0.8-0.4-1.5-0.7-2.3-0.9V38.1c0.8-0.2,1.6-0.5,2.4-0.9c4.3-2.5,5.7-7.9,3.3-12.2c-2.5-4.3-7.9-5.7-12.2-3.3  c-0.8,0.4-1.4,1-2,1.6L58.5,11.5c0.2-0.8,0.4-1.7,0.4-2.5C58.9,4,54.9,0,50,0s-8.9,4-8.9,8.9c0,0.9,0.1,1.7,0.4,2.5L20.9,23.3  c-0.6-0.6-1.2-1.1-2-1.6c-4.3-2.5-9.7-1-12.2,3.3c-2.5,4.3-1,9.7,3.3,12.2c0.8,0.4,1.6,0.7,2.4,0.9v23.8c-0.8,0.2-1.6,0.5-2.3,0.9  C5.7,65.3,4.3,70.7,6.7,75s7.9,5.7,12.2,3.3c0.8-0.4,1.4-1,2-1.6l20.6,11.9c-0.2,0.8-0.4,1.6-0.4,2.5c0,4.9,4,8.9,8.9,8.9  s8.9-4,8.9-8.9c0-1-0.2-1.9-0.5-2.8l20.4-11.8c0.6,0.7,1.4,1.3,2.2,1.8c4.3,2.5,9.7,1,12.2-3.3C95.8,70.7,94.3,65.3,90,62.8z   M23.1,68.4c-0.2-0.8-0.5-1.6-0.9-2.3c-0.4-0.8-1-1.4-1.6-2l26.9-46.6c0.8,0.2,1.6,0.4,2.5,0.4c0.9,0,1.7-0.1,2.5-0.4l26.9,46.6  c-0.6,0.6-1.1,1.2-1.6,2c-0.4,0.8-0.7,1.5-0.9,2.3H23.1z M77,27c-0.6,2.2-0.4,4.7,0.8,6.9c1.3,2.2,3.3,3.6,5.6,4.2v23.8  c-0.1,0-0.2,0.1-0.3,0.1L56.2,15.4c0.1-0.1,0.2-0.2,0.2-0.2L77,27z M43.6,15.1c0.1,0.1,0.2,0.2,0.3,0.3L16.9,62  c-0.1,0-0.2-0.1-0.3-0.1V38.1c2.3-0.6,4.3-2,5.6-4.2c1.3-2.2,1.5-4.7,0.8-6.9L43.6,15.1z M56.6,85.1c-1.6-1.8-4-2.9-6.6-2.9  c-2.5,0-4.8,1-6.4,2.7L23,73c0-0.1,0.1-0.2,0.1-0.3h53.8c0,0.2,0.1,0.4,0.2,0.6L56.6,85.1z" }) })),
     'grid-view': (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: jsx("path", { d: "M8.9 2.4v6.5H2.4V2.4zM9.4 0H1.9C.9 0 0 .9 0 1.9v7.4c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9V1.9c.1-1-.8-1.9-1.8-1.9m12.2 2.4v6.5h-6.5V2.4zm.5-2.4h-7.4c-1.1 0-1.9.9-1.9 1.9v7.4c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9V1.9c0-1-.9-1.9-1.9-1.9M8.9 15.1v6.5H2.4v-6.5zm.5-2.4H1.9c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 2 1.9 2h7.4c1.1 0 1.9-.9 1.9-1.9v-7.4c.1-1.1-.8-2-1.8-2m12.2 2.4v6.5h-6.5v-6.5zm.5-2.4h-7.4c-1.1 0-1.9.9-1.9 1.9V22c0 1.1.9 1.9 1.9 1.9h7.4c1.1 0 1.9-.9 1.9-1.9v-7.4c0-1-.9-1.9-1.9-1.9" }) })),
+    guidewire: (jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", children: [jsx("path", { d: "M21.963 6.006V2H2v20h11.967v-4.006h-7.97V6.006z" }), jsx("path", { d: "M21.962 10.01V22h-3.998v-8.01H9.97v-3.98z" })] })),
     happy: (jsx("svg", { viewBox: "0 0 100 100", fill: "currentColor", children: jsx("path", { d: "M100 50c0 27.6-22.4 50-50 50S0 77.6 0 50 22.4 0 50 0s50 22.4 50 50zm-78.6-7.4c-.1-3.1 2.5-5.7 5.7-5.7 3.1 0 5.7 2.6 5.7 5.7 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5C37.7 36.7 32.8 32 27 32s-10.6 4.8-10.6 10.6c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5zM73 32c-5.9 0-10.6 4.8-10.6 10.6 0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5c0-3.1 2.6-5.7 5.7-5.7s5.7 2.6 5.7 5.7c0 1.4 1.1 2.5 2.5 2.5s2.5-1.1 2.5-2.5C83.7 36.7 78.9 32 73 32zm4.8 24.6c-1.4-.6-3 0-3.5 1.4-4.2 9.7-13.7 16-24.3 16-10.6 0-20.1-6.3-24.3-16.1-.6-1.4-2.1-2-3.5-1.4-1.4.6-2 2.1-1.4 3.5 5.1 11.7 16.5 19.3 29.3 19.3 12.7 0 24.2-7.5 29.1-19.3.6-1.2-.1-2.8-1.4-3.4z" }) })),
     'help-solid': (jsx("svg", { viewBox: "0 0 100 100", fill: "currentColor", children: jsx("path", { d: "M50 0C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm9.4 80.2c0 5.2-4.3 9.5-9.5 9.5s-9.5-4.3-9.5-9.5 4.3-9.5 9.5-9.5 9.5 4.2 9.5 9.5zM72.7 32c0 11.5-7.5 16.9-11.1 19.5l-.2.1c-3.5 2.5-4 4.6-4 6.4 0 4.2-3.5 5.9-7.8 5.9-4.2 0-7.5-1.8-7.5-6 0-7.6 3.6-14.1 10.4-18.7 3.7-2.6 4.8-4.2 4.8-7.2 0-.6-.2-5.3-7.6-5.3-3.7 0-6.3 1.5-7.4 5.1-1.3 4-4.4 6.2-8.2 6.2-5.7 0-7.8-4.4-6.7-9.1 2.3-10.2 11.4-17.3 22.5-17.3 16.7-.3 22.8 12 22.8 20.4z" }) })),
     help: (jsx("svg", { viewBox: "0 0 100 100", fill: "currentColor", children: jsx("path", { d: "M50 10c22.1 0 40 17.9 40 40S72.1 90 50 90 10 72.1 10 50s17.9-40 40-40m0-10C22.4 0 0 22.4 0 50s22.4 50 50 50 50-22.4 50-50S77.6 0 50 0zm0 18.4c-9.5 0-17.4 6-19.2 14.6-.3 1.3.3 4.9 4.9 4.9 3 0 4.4-1.2 4.9-2.9 1.1-3.8 4.7-6.7 9.3-6.7 9.1 0 9.4 6.6 9.4 7.2 0 4-2 6.1-5.5 8.6C48 48.3 45 53.7 45 60.3c0 2.8 2.3 4.1 5 4.1 2.9 0 5.1-1.2 5.1-4 0-2 .5-4.8 4.7-7.8 3.1-2.3 9.8-6.8 9.8-16.8-.1-7.1-5.3-17.4-19.6-17.4zm0 51c-3.5 0-6.4 2.8-6.4 6.4s2.8 6.4 6.4 6.4c3.5 0 6.4-2.8 6.4-6.4s-2.9-6.4-6.4-6.4z" }) })),
@@ -6101,11 +6102,15 @@ const LoadingComponent = () => {
 };
 
 const Table = (props) => {
-    const { responsive = true, direction = 'auto', keyField = 'id', striped = true, noDataComponent = 'built-in', isDisabled, isLoading, subHeaderAlign = 'left', className } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "subHeaderAlign", "className"]);
+    const { responsive = true, direction = 'auto', keyField = 'id', striped = false, noDataComponent = 'built-in', isDisabled, isLoading, isFullHeight = false, subHeaderAlign = 'left', className } = props, rest = __rest(props, ["responsive", "direction", "keyField", "striped", "noDataComponent", "isDisabled", "isLoading", "isFullHeight", "subHeaderAlign", "className"]);
     const combinedClassName = classNames(className, {
         'table--striped': striped,
+        'table-body': true,
     });
-    return (jsx("div", { className: "table", children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
+    const tableWrapperClassName = classNames('table', {
+        'table--full-height': isFullHeight,
+    });
+    return (jsx("div", { className: tableWrapperClassName, children: jsx(Xe, Object.assign({ responsive: responsive, direction: direction, subHeaderAlign: subHeaderAlign, keyField: keyField, striped: striped, className: combinedClassName, disabled: isDisabled, noDataComponent: noDataComponent, progressPending: isLoading, progressComponent: jsx(LoadingComponent, {}) }, rest)) }));
 };
 
 const Label = ({ label, name, isRequired }) => {
@@ -13946,29 +13951,35 @@ const getCommonProps = (props) => {
 
 const DatePicker = (props) => {
     const { mode = 'single', className, captionLayout = 'dropdown', selected, id, month, defaultMonth, startMonth, endMonth, components, numberOfMonths, isDisabled, formatters, weekStartsOn, firstWeekContainsDate, today, isRequired, min, max, onSelect, onMonthChange, onNextClick, onPrevClick, onDayClick } = props, rest = __rest(props, ["mode", "className", "captionLayout", "selected", "id", "month", "defaultMonth", "startMonth", "endMonth", "components", "numberOfMonths", "isDisabled", "formatters", "weekStartsOn", "firstWeekContainsDate", "today", "isRequired", "min", "max", "onSelect", "onMonthChange", "onNextClick", "onPrevClick", "onDayClick"]);
-    const commonProps = getCommonProps(props);
+    const futureDateByYear = (year) => new Date(new Date().getFullYear() + year, 11, 31);
+    const endMonthDefault = endMonth !== null && endMonth !== void 0 ? endMonth : futureDateByYear(5);
     const modeMap = {
         single: {
             mode: 'single',
             numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
             selected: selected,
             onSelect: onSelect,
+            endMonth: endMonthDefault,
         },
         multiple: {
             mode: 'multiple',
             numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 1,
             selected: selected,
             onSelect: onSelect,
+            endMonth: endMonthDefault,
         },
         range: {
             mode: 'range',
             numberOfMonths: numberOfMonths !== null && numberOfMonths !== void 0 ? numberOfMonths : 2,
             selected: selected,
             onSelect: onSelect,
+            endMonth: endMonthDefault,
         },
     };
     const modeProps = modeMap[mode];
-    return jsx(DayPicker, Object.assign({}, modeProps, commonProps, rest));
+    const commonProps = getCommonProps(props);
+    const finalProps = Object.assign(Object.assign(Object.assign({}, commonProps), rest), modeProps);
+    return jsx(DayPicker, Object.assign({}, finalProps));
 };
 
 const IconTriggerDatePicker = (props) => {