@commonsku/styles 1.13.1 → 1.13.5

package/dist/index.es.js

@@ -13,7 +13,7 @@ import 'react-datepicker/dist/react-datepicker.css';
 import { useTable, useSortBy, usePagination, useColumnOrder, useBlockLayout, useFlexLayout } from 'react-table';
 import { useSticky } from 'react-table-sticky';
 import { areEqual, FixedSizeList } from 'react-window';
-import { Draggable, DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { Draggable, Droppable, DragDropContext } from 'react-beautiful-dnd';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -4761,7 +4761,7 @@ var CalendarTask = React__default.forwardRef(function (_a, ref) {
     var _e = useState(completed), checked = _e[0], setChecked = _e[1];
     useEffect(function () {
         setChecked(completed);
-    }, [completed]);
+    }, [completed, title, date]);
     return (React__default.createElement(StyledCalendarTaskWrapper, __assign({ backgroundColor: colorType === 'light-red' ? '#ffebf2' : '#01d37417' }, props),
         React__default.createElement(LabeledCheckbox, { ref: ref, stopPropagation: true, checked: checked, checkboxPosition: "top-right", checkboxStyle: {
                 borderColor: checked
@@ -5370,6 +5370,9 @@ var useCalendar = function (_a) {
         else if (action === "next") {
             dt = addMonths(currentMonth, 1);
         }
+        else if (action === "reset") {
+            dt = today;
+        }
         setCurrentMonth(dt);
         onChangeMonth && onChangeMonth({
             action: action,
@@ -5386,6 +5389,9 @@ var useCalendar = function (_a) {
         else if (action === "next") {
             dt = addWeeks(currentMonth, 1);
         }
+        else if (action === "reset") {
+            dt = today;
+        }
         setCurrentMonth(dt);
         var week = getWeek(dt);
         setCurrentWeek(week);
@@ -5405,6 +5411,11 @@ var useCalendar = function (_a) {
             setSelectedDate(day);
         }
     };
+    // reset to today's date
+    var resetToToday = function () {
+        setSelectedDate(today);
+        changeWeek('reset');
+    };
     var onNextWeek = function () { return changeWeek("next"); };
     var onPrevWeek = function () { return changeWeek("prev"); };
     var onNextMonth = function () { return changeMonth("next"); };
@@ -5422,6 +5433,7 @@ var useCalendar = function (_a) {
         onNextMonth: onNextMonth,
         onPrevMonth: onPrevMonth,
         getDatesBetween: getDatesBetween,
+        onReset: resetToToday,
     };
 };
 
@@ -6400,14 +6412,15 @@ function CollapsiblePanels(_a) {
 var templateObject_1$C, templateObject_2$q, templateObject_3$j;
 
 var ProgressWrapper$1 = styled.div(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n  max-width: 100%;\n  width: 100%;\n  height: 48px;\n  background: linear-gradient(180deg, rgba(1, 211, 116, 0.051) 0%, rgba(1, 211, 116, 0.1) 100%);\n  box-shadow: 0px 4px 5px rgba(72, 78, 86, 0.1);\n  border-radius: 50px;\n  \n  ", "\n"], ["\n  max-width: 100%;\n  width: 100%;\n  height: 48px;\n  background: linear-gradient(180deg, rgba(1, 211, 116, 0.051) 0%, rgba(1, 211, 116, 0.1) 100%);\n  box-shadow: 0px 4px 5px rgba(72, 78, 86, 0.1);\n  border-radius: 50px;\n  \n  ", "\n"])), SharedStyles);
-var ProgressBar$1 = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  max-width: 100%;\n  width: ", "%;\n  height: 48px;\n  background: ", ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"], ["\n  max-width: 100%;\n  width: ", "%;\n  height: 48px;\n  background: ",
-    ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"])), function (props) { return 100 * props.value / props.max; }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
+var ProgressBar$1 = styled.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  max-width: 100%;\n  width: ", ";\n  height: 48px;\n  background: ", ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"], ["\n  max-width: 100%;\n  width: ", ";\n  height: 48px;\n  background: ",
+    ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"])), function (p) { return "calc(" + 100 * (!p.max ? 1 : (p.value / p.max)) + "% - (" + (p.left || 0) + "px + 17px))"; }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
 var StyledProgressTitle = styled(Text)(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n  display: inline-block;\n  position: absolute;\n  z-index: 9;\n  vertical-align: middle;\n  padding: 12px;\n  color: #FFFFFF;\n  font-size: 18px;\n  text-shadow: 0px 1px 2px #40B07E;\n"], ["\n  display: inline-block;\n  position: absolute;\n  z-index: 9;\n  vertical-align: middle;\n  padding: 12px;\n  color: #FFFFFF;\n  font-size: 18px;\n  text-shadow: 0px 1px 2px #40B07E;\n"])));
 var LabeledBar = function (props) {
     var width = useWindowSize()[0];
-    var _a = useState({ left: 0, width: 0 }), size = _a[0], setSize = _a[1];
+    var _a = useState({ height: 0, width: 0, x: 0, y: 0, }), size = _a[0], setSize = _a[1];
     var measureRef = useCallback(function (node) {
-        setSize(node === null || node === void 0 ? void 0 : node.getBoundingClientRect());
+        var rect = node === null || node === void 0 ? void 0 : node.getBoundingClientRect();
+        setSize(function (s) { return (rect ? __assign(__assign({}, s), { height: rect.height, x: rect.x, y: rect.y, width: (rect.width > width ? width : rect.width) - rect.x }) : __assign(__assign({}, s), { height: 0, width: 0, x: 0, y: 0 })); });
     }, [width, props.text, props.value]);
     var text = (props.text || '') + '';
     return (React__default.createElement(React__default.Fragment, null,
@@ -6418,33 +6431,32 @@ var LabeledBar = function (props) {
                 zIndex: 9,
                 marginTop: -25,
                 color: '#00d374',
-                width: size.width - 10,
             } }, text),
-        React__default.createElement(ProgressBar$1, __assign({ ref: measureRef }, props))));
+        React__default.createElement(ProgressBar$1, __assign({ ref: measureRef }, props, { left: size.x }))));
 };
-var MultiProgress = function (props) {
-    var max = typeof props.max === 'number'
-        ? props.max
-        : !isNaN(props.max) ? parseInt(props.max) : 0;
+var MultiProgress = function (_a) {
+    var labeled = _a.labeled, error = _a.error, title = _a.title, values = _a.values, maxVal = _a.max, props = __rest(_a, ["labeled", "error", "title", "values", "max"]);
+    var max = typeof maxVal === 'number'
+        ? maxVal
+        : !isNaN(maxVal) ? parseInt(maxVal) : 0;
     return React__default.createElement(ProgressWrapper$1, __assign({}, props),
-        props.title ? React__default.createElement(StyledProgressTitle, null, props.title) : null,
-        props.values.map(function (v, i) {
-            var color = i % 2 === 0 ? 'rgba(1, 211, 116, 0.2)' : '#00d374';
+        title ? React__default.createElement(StyledProgressTitle, null, title) : null,
+        values.map(function (v, i) {
+            var color = v.color || (i % 2 === 0 ? 'rgba(1, 211, 116, 0.2)' : '#00d374');
             var val = typeof v.value === 'number' ? v.value : !isNaN(v.value) ? parseInt(v.value) : 0;
-            return (props.labeled ? React__default.createElement(LabeledBar, { value: val < max ? val : max, max: max, error: props.error, color: color, text: v.text ? v.text(val) : val }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: props.error, color: color }));
+            return (labeled ? React__default.createElement(LabeledBar, { value: val < max ? val : max, max: max, error: error, color: color, text: v.text ? v.text(val) : val, key: "multiprogress-bar-" + val + "-" + i, textColor: v.textColor }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: error, color: color, key: "multiprogress-bar-" + val + "-" + i }));
         }),
-        props.error ? React__default.createElement(Text, { color: "error", bold: true }, props.error) : null);
+        error ? React__default.createElement(Text, { color: "error", bold: true }, error) : null);
 };
 var LabeledMultiProgress = function (props) {
     return React__default.createElement("div", null,
+        React__default.createElement(MultiProgress, __assign({}, props, { labeled: true })),
         React__default.createElement("span", { style: {
                 float: 'right',
                 paddingRight: 8,
             } },
             "Target $",
-            React__default.createElement(Number$1, { commas: true, decimalPoints: 0, num: props.max })),
-        React__default.createElement("br", null),
-        React__default.createElement(MultiProgress, { values: props.values, max: props.max, error: props.error, title: props.title, labeled: true }));
+            React__default.createElement(Number$1, { commas: true, decimalPoints: 0, num: props.max })));
 };
 var templateObject_1$D, templateObject_2$r, templateObject_3$k;
 
@@ -6539,7 +6551,8 @@ var TasksCalendarDayBody = function (_a) {
 
 var WeekNav = styled(Text)(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n  display: inline-block;\n  padding: .9rem .5rem;\n"], ["\n  display: inline-block;\n  padding: .9rem .5rem;\n"])));
 var TasksCalendarHeader = function (_a) {
-    var onPrevWeek = _a.onPrevWeek, onNextWeek = _a.onNextWeek, currentMonth = _a.currentMonth, _b = _a.tabs, tabs = _b === void 0 ? [] : _b, weekendsCheckbox = _a.weekendsCheckbox, _c = _a.showAddTaskBtn, showAddTaskBtn = _c === void 0 ? true : _c, onClickAddTask = _a.onClickAddTask;
+    var onPrevWeek = _a.onPrevWeek, onNextWeek = _a.onNextWeek, currentMonth = _a.currentMonth, currentWeek = _a.currentWeek, onResetDate = _a.onResetDate, selectedDate = _a.selectedDate, _b = _a.tabs, tabs = _b === void 0 ? [] : _b, weekendsCheckbox = _a.weekendsCheckbox, _c = _a.showAddTaskBtn, showAddTaskBtn = _c === void 0 ? true : _c, onClickAddTask = _a.onClickAddTask;
+    var isCurrentWeek = currentWeek === getWeek(selectedDate);
     return (React__default.createElement(HeaderWrapper, { style: { padding: "0.5rem" } },
         React__default.createElement(Col, { start: true, xs: true, md: 7, padded: true },
             React__default.createElement(Tabs, { size: "small", tabs: tabs })),
@@ -6549,7 +6562,17 @@ var TasksCalendarHeader = function (_a) {
                 React__default.createElement(Row, null, weekendsCheckbox)),
             React__default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary, }, onClick: onPrevWeek },
                 React__default.createElement(NextPrevIcon, { color: "#02C0DA", width: ".8rem" })),
-            React__default.createElement(WeekNav, { style: { color: colors.disabledButton, verticalAlign: "middle" } }, currentMonth ? format(currentMonth, "MMM yyyy") : ''),
+            React__default.createElement(WeekNav, { style: { color: colors.disabledButton, verticalAlign: "middle" } },
+                currentMonth ? format(currentMonth, "MMM yyyy") : '',
+                !isCurrentWeek ? React__default.createElement("span", { style: {
+                        display: 'block',
+                        textAlign: 'center',
+                        borderRadius: 5,
+                        background: '#02c0da',
+                        color: '#fff',
+                        padding: 4,
+                        cursor: 'pointer',
+                    }, onClick: function () { return onResetDate(); } }, "Today") : null),
             React__default.createElement(WeekNav, { style: { cursor: 'pointer', color: colors.primary, }, onClick: onNextWeek },
                 React__default.createElement(NextPrevIcon, { color: "#02C0DA", width: ".8rem", next: true })))));
 };
@@ -6617,7 +6640,7 @@ function convertTasksToDays(_a) {
 }
 var TasksCalendar = function (_a) {
     var tasks = _a.tasks, _b = _a.headerTabs, headerTabs = _b === void 0 ? [] : _b, _c = _a.footerTasks, footerTasks = _c === void 0 ? [] : _c, _d = _a.components, props = __rest(_a, ["tasks", "headerTabs", "footerTasks", "components"]);
-    var _e = useCalendar({}), currentMonth = _e.currentMonth, currentWeek = _e.currentWeek, selectedDate = _e.selectedDate, onNextWeek = _e.onNextWeek, onPrevWeek = _e.onPrevWeek, onNextMonth = _e.onNextMonth, onPrevMonth = _e.onPrevMonth, onClickDay = _e.onClickDay;
+    var _e = useCalendar({}), currentMonth = _e.currentMonth, currentWeek = _e.currentWeek, selectedDate = _e.selectedDate, onNextWeek = _e.onNextWeek, onPrevWeek = _e.onPrevWeek, onNextMonth = _e.onNextMonth, onPrevMonth = _e.onPrevMonth, onClickDay = _e.onClickDay, onReset = _e.onReset;
     var _f = useState(convertTasksToDays({ currentMonth: currentMonth, currentWeek: currentWeek, tasks: tasks, })), days = _f[0], setDays = _f[1];
     var headerProps = {
         onNextWeek: onNextWeek,
@@ -6629,7 +6652,7 @@ var TasksCalendar = function (_a) {
         selectedDate: selectedDate,
     };
     return (React__default.createElement(CalendarWrapper, null,
-        React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { tabs: headerTabs, weekendsCheckbox: React__default.createElement("div", null) })),
+        React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { onResetDate: onReset, tabs: headerTabs, weekendsCheckbox: React__default.createElement("div", null) })),
         React__default.createElement(CalendarDaysHeader, { currentMonth: currentMonth, selectedDate: selectedDate, weekendsCheckbox: React__default.createElement("div", null), weekend: true }),
         React__default.createElement(CalendarDaysBody, { currentMonth: currentMonth, selectedDate: selectedDate, onClickDay: onClickDay, dayBodyProps: { tasks: tasks }, components: { DayBody: TasksCalendarDayBody, }, days: days }),
         React__default.createElement(TasksCalendarFooter, __assign({}, headerProps, { tasks: footerTasks }))));
@@ -6651,13 +6674,32 @@ var droppableChildWrapperProps = function (provided, snapshot, props) {
 };
 
 var DraggableCalendarFooterTasks = function (_a) {
-    var currentWeek = _a.currentWeek, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
+    var onClickTask = _a.onClickTask, onUpdateTask = _a.onUpdateTask, _b = _a.tasks, tasks = _b === void 0 ? [] : _b;
     return (React__default.createElement(HeaderWrapper, null,
         React__default.createElement(Col, { start: true, xs: true }, "Overdue: "),
         React__default.createElement(Col, { xs: true },
             React__default.createElement(Row, null, tasks
-                .map(function (t, j) { return (React__default.createElement(Draggable, { key: 'footer-task-' + j, draggableId: 'footer-task-' + j, index: j }, function (provided, snapshot) { return (React__default.createElement(Col, __assign({ xs: true, md: 3, padded: true }, draggableChildWrapperProps(provided, snapshot)),
-                React__default.createElement(CalendarTask, __assign({}, t, { date: undefined })))); })); })))));
+                .map(function (t, j) { return (React__default.createElement(Draggable, { key: 'footer-task-' + j, draggableId: 'footer-task-' + j, index: j }, function (provided, snapshot) { return (React__default.createElement(Col, __assign({ xs: true, md: 3, padded: true }, draggableChildWrapperProps(provided, snapshot), { onClick: function (e) { onClickTask && onClickTask(t); } }),
+                React__default.createElement(CalendarTask, __assign({}, t, { date: undefined, onClickCheckbox: function (completed) {
+                        if (onUpdateTask) {
+                            onUpdateTask(__assign(__assign({}, t), { completed: completed }), {
+                                index: j,
+                                action: 'TOGGLE_CHECKBOX',
+                                oldTask: t,
+                                updatedFields: ['completed'],
+                            });
+                        }
+                        else if (t.onClickCheckbox) {
+                            t.onClickCheckbox(completed);
+                        }
+                    } })))); })); })))));
+};
+
+var DroppableFooter = function (_a) {
+    var tasks = _a.tasks, props = __rest(_a, ["tasks"]);
+    return (React__default.createElement(Droppable, { droppableId: 'footer-droppable', key: 'footer-droppable', isDropDisabled: true }, function (provided, snapshot) { return (React__default.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? { minHeight: 0 } : { minHeight: 0 } })),
+        provided.placeholder,
+        React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
 };
 
 var DraggableTaskBody = function (_a) {
@@ -6677,7 +6719,8 @@ var DraggableTaskBody = function (_a) {
                         task.onClickCheckbox(completed);
                     }
                 } }))))); }));
-};
+};
+
 var DroppableDays = function (_a) {
     var days = _a.days, selectedDate = _a.selectedDate, onUpdateTask = _a.onUpdateTask, onClickDay = _a.onClickDay, onClickTask = _a.onClickTask, weekend = _a.weekend, props = __rest(_a, ["days", "selectedDate", "onUpdateTask", "onClickDay", "onClickTask", "weekend"]);
     return (React__default.createElement(DaysBodyWrapper, __assign({ className: "days-body-wrapper" }, props),
@@ -6692,16 +6735,11 @@ var DroppableDays = function (_a) {
                                     onUpdateTask(newData, __assign(__assign({}, otherData), { day__id: __id__, task__id: t.__id__ }));
                                 } : undefined })); }))); }))) : ""));
         }))));
-};
-var DroppableFooter = function (_a) {
-    var tasks = _a.tasks, props = __rest(_a, ["tasks"]);
-    return (React__default.createElement(Droppable, { droppableId: 'footer-droppable', key: 'footer-droppable', isDropDisabled: true }, function (provided, snapshot) { return (React__default.createElement("div", __assign({}, droppableChildWrapperProps(provided, snapshot, { style: !tasks.length ? { minHeight: 0 } : { minHeight: 0 } })),
-        provided.placeholder,
-        React__default.createElement(DraggableCalendarFooterTasks, __assign({}, props, { tasks: tasks })))); }));
-};
+};
+
 var DraggableTasksCalendar = function (_a) {
     var _b = _a.tasks, tasks = _b === void 0 ? [] : _b, onUpdateTask = _a.onUpdateTask, onClickTask = _a.onClickTask, _c = _a.headerTabs, headerTabs = _c === void 0 ? [] : _c, _d = _a.footerTasks, footerTasks = _d === void 0 ? [] : _d, _e = _a.components, _f = _a.weekend, weekend = _f === void 0 ? false : _f, onChangeWeek = _a.onChangeWeek, onChangeMonth = _a.onChangeMonth, onToggleWeekend = _a.onToggleWeekend, _g = _a.showAddTaskBtn, showAddTaskBtn = _g === void 0 ? true : _g, onClickAddTask = _a.onClickAddTask, _h = _a.loading, loading = _h === void 0 ? false : _h, props = __rest(_a, ["tasks", "onUpdateTask", "onClickTask", "headerTabs", "footerTasks", "components", "weekend", "onChangeWeek", "onChangeMonth", "onToggleWeekend", "showAddTaskBtn", "onClickAddTask", "loading"]);
-    var _j = useCalendar({ onChangeWeek: onChangeWeek, onChangeMonth: onChangeMonth }), currentMonth = _j.currentMonth, currentWeek = _j.currentWeek, selectedDate = _j.selectedDate, onNextWeek = _j.onNextWeek, onPrevWeek = _j.onPrevWeek, onNextMonth = _j.onNextMonth, onPrevMonth = _j.onPrevMonth, onClickDay = _j.onClickDay;
+    var _j = useCalendar({ onChangeWeek: onChangeWeek, onChangeMonth: onChangeMonth }), currentMonth = _j.currentMonth, currentWeek = _j.currentWeek, selectedDate = _j.selectedDate, onNextWeek = _j.onNextWeek, onPrevWeek = _j.onPrevWeek, onNextMonth = _j.onNextMonth, onPrevMonth = _j.onPrevMonth, onClickDay = _j.onClickDay, onReset = _j.onReset;
     var _k = useState({
         days: convertTasksToDays({ currentMonth: currentMonth, currentWeek: currentWeek, tasks: tasks, }).reduce(function (acc, v) {
             var _a;
@@ -6810,7 +6848,7 @@ var DraggableTasksCalendar = function (_a) {
         }); } });
     return (React__default.createElement(DragDropContext, { onDragEnd: function (result) { return onDragEnd(result); } },
         React__default.createElement(CalendarWrapper, null,
-            React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { tabs: headerTabs, weekendsCheckbox: weekendsCheckbox })),
+            React__default.createElement(TasksCalendarHeader, __assign({}, headerProps, { onResetDate: onReset, tabs: headerTabs, weekendsCheckbox: weekendsCheckbox })),
             React__default.createElement("div", { className: "calendar-scroll" },
                 React__default.createElement(CalendarDaysHeader, { currentMonth: currentMonth, selectedDate: selectedDate, weekendsCheckbox: weekendsCheckbox, weekend: showWeekend }),
                 loading ? React__default.createElement("div", { style: { height: 400, paddingTop: 30, } },
@@ -6830,7 +6868,22 @@ var DraggableTasksCalendar = function (_a) {
                             });
                         })();
                     } })),
-            React__default.createElement(DroppableFooter, __assign({ tasks: state.footerTasks }, headerProps)))));
+            React__default.createElement(DroppableFooter, __assign({ tasks: state.footerTasks, onClickTask: onClickTask, onUpdateTask: function (newData, _a) {
+                    var day__id = _a.day__id, task__id = _a.task__id, otherData = __rest(_a, ["day__id", "task__id"]);
+                    _.flowRight(function () {
+                        onUpdateTask(newData, otherData);
+                    }, function () {
+                        if (!day__id) {
+                            return;
+                        }
+                        setState(function (s) {
+                            var _a;
+                            return __assign(__assign({}, s), { days: __assign(__assign({}, s.days), (_a = {}, _a[day__id] = __assign(__assign({}, s.days[day__id]), { tasks: __spreadArrays(s.days[day__id].tasks.slice(0, otherData.index), [
+                                        __assign(__assign({}, s.days[day__id].tasks[otherData.index]), newData)
+                                    ], s.days[day__id].tasks.slice(otherData.index + 1)) }), _a)) });
+                        });
+                    })();
+                } }, headerProps)))));
 };
 
 var scrollbarWidth = function () {
@@ -6846,18 +6899,15 @@ var scrollbarWidth = function () {
 var SimpleWindowedTableStyles = styled.div(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\npadding: 1rem;\n\n.project-table-list-rows {\n  width: 100% !important;\n\n  ", "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  .header.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"], ["\npadding: 1rem;\n\n.project-table-list-rows {\n  width: 100% !important;\n\n  ",
     "\n}\n\n.table {\n  display: inline-block;\n  border-spacing: 0;\n  width: 100%;\n  min-width: 100% !important;\n\n  .header.tr {\n    width: 100% !important;\n    min-width: 100% !important;\n    overflow-x: hidden;\n  }\n\n  .tr {\n    :last-child {\n      .td {\n        border-bottom: 0;\n      }\n    }\n  }\n\n  .th {\n    border-bottom: 2px solid ", ";\n\n    div {\n      display: inline-block;\n    }\n  }\n\n  .td {\n    border-bottom: 1px solid ", ";\n  }\n\n  .th,\n  .td {\n    margin: 0;\n    padding: 0.5rem;\n  }\n}\n"])), function (p) { return p.rowClickable ? "\n    .tr {\n      cursor: pointer;\n    }\n  " : ''; }, colors.disabledButtonBorder, colors.disabledButtonBorder);
 function SimpleWindowedTable(_a) {
-    var columns = _a.columns, data = _a.data, _b = _a.minWidth, minWidth = _b === void 0 ? 140 : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 500 : _c, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll;
+    var columns = _a.columns, data = _a.data, _b = _a.itemSize, itemSize = _b === void 0 ? 80 : _b, _c = _a.height, height = _c === void 0 ? 500 : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 140 : _d, _e = _a.maxWidth, maxWidth = _e === void 0 ? 500 : _e, defaultSort = _a.defaultSort, onClickRow = _a.onClickRow, onScroll = _a.onScroll, onUpdateData = _a.onUpdateData, _f = _a.useTableProps, useTableProps = _f === void 0 ? {} : _f;
     var defaultColumn = React__default.useMemo(function () { return ({
         minWidth: minWidth,
         maxWidth: maxWidth,
     }); }, [minWidth, maxWidth]);
     var scrollBarSize = React__default.useMemo(function () { return scrollbarWidth(); }, []);
-    var _d = useTable({
-        columns: columns,
+    var _g = useTable(__assign({ columns: columns,
         data: data,
-        defaultColumn: defaultColumn,
-        initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})),
-    }, useSortBy, useFlexLayout), getTableProps = _d.getTableProps, getTableBodyProps = _d.getTableBodyProps, headerGroups = _d.headerGroups, rows = _d.rows, totalColumnsWidth = _d.totalColumnsWidth, prepareRow = _d.prepareRow;
+        defaultColumn: defaultColumn, initialState: __assign({}, (defaultSort ? { sortBy: [defaultSort] } : {})), onUpdateData: onUpdateData }, useTableProps), useSortBy, useFlexLayout), getTableProps = _g.getTableProps, getTableBodyProps = _g.getTableBodyProps, headerGroups = _g.headerGroups, rows = _g.rows, totalColumnsWidth = _g.totalColumnsWidth, prepareRow = _g.prepareRow;
     var headerRef = useRef(null);
     var rowsRef = useRef();
     var onListScroll = function (e) {
@@ -6887,7 +6937,7 @@ function SimpleWindowedTable(_a) {
             column.render("Header"),
             React__default.createElement("span", { style: { display: 'inline-block', paddingLeft: 5, verticalAlign: 'text-top' } }, column.isSorted ? (column.isSortedDesc ? React__default.createElement(DownArrowIcon, { width: "15px" }) : React__default.createElement(UpArrowIcon, { width: "15px" })) : React__default.createElement(UpDownArrowsIcon, { width: "15px" })))); }))); })),
         React__default.createElement("div", __assign({}, getTableBodyProps()),
-            React__default.createElement(FixedSizeList, { height: 500, itemCount: rows.length, itemSize: 80, width: totalColumnsWidth + scrollBarSize, className: "project-table-list-rows", outerRef: rowsRef, onScroll: onScroll }, RenderRow))));
+            React__default.createElement(FixedSizeList, { height: height, itemCount: rows.length, itemSize: itemSize, width: totalColumnsWidth + scrollBarSize, className: "project-table-list-rows", outerRef: rowsRef, onScroll: onScroll }, RenderRow))));
 }
 var templateObject_1$L;