@indico-data/design-system 2.42.1 → 2.43.1

package/lib/components/icons/indicons.d.ts

@@ -71,6 +71,7 @@ declare const indicons: {
     'gen-ai': import("react/jsx-runtime").JSX.Element;
     graphiql: import("react/jsx-runtime").JSX.Element;
     'grid-view': import("react/jsx-runtime").JSX.Element;
+    guidewire: import("react/jsx-runtime").JSX.Element;
     happy: import("react/jsx-runtime").JSX.Element;
     'help-solid': import("react/jsx-runtime").JSX.Element;
     help: import("react/jsx-runtime").JSX.Element;

package/lib/components/table/types.d.ts

@@ -7,4 +7,5 @@ export type TableProps<T> = Omit<RDTTableProps<T>, 'disabled' | 'progressPending
     isLoading?: boolean;
     direction?: Direction;
     subHeaderAlign?: Alignment;
+    isFullHeight?: boolean;
 };

package/lib/index.css

@@ -942,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,
@@ -975,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);
@@ -986,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;
@@ -1017,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],

package/lib/index.d.ts

@@ -865,6 +865,7 @@ type TableProps<T> = Omit<TableProps$1<T>, 'disabled' | 'progressPending' | 'dir
     isLoading?: boolean;
     direction?: Direction;
     subHeaderAlign?: Alignment;
+    isFullHeight?: boolean;
 };
 
 type PillSize = 'sm' | 'md' | 'lg';
@@ -957,6 +958,7 @@ declare const indicons: {
     'gen-ai': react_jsx_runtime.JSX.Element;
     graphiql: react_jsx_runtime.JSX.Element;
     'grid-view': react_jsx_runtime.JSX.Element;
+    guidewire: react_jsx_runtime.JSX.Element;
     happy: react_jsx_runtime.JSX.Element;
     'help-solid': react_jsx_runtime.JSX.Element;
     help: react_jsx_runtime.JSX.Element;

package/lib/index.esm.css

@@ -942,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,
@@ -975,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);
@@ -986,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;
@@ -1017,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],

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) => {