@commonsku/styles 1.13.2 → 1.13.3

package/dist/index.js

@@ -5379,6 +5379,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,
@@ -5395,6 +5398,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);
@@ -5414,6 +5420,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"); };
@@ -5431,6 +5442,7 @@ var useCalendar = function (_a) {
         onNextMonth: onNextMonth,
         onPrevMonth: onPrevMonth,
         getDatesBetween: getDatesBetween,
+        onReset: resetToToday,
     };
 };
 
@@ -6409,14 +6421,15 @@ function CollapsiblePanels(_a) {
 var templateObject_1$C, templateObject_2$q, templateObject_3$j;
 
 var ProgressWrapper$1 = styled__default.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__default.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__default.div(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n  max-width: 100%;\n  width: calc(", "% - ", "px);\n  height: 48px;\n  background: ", ";\n  border-radius: 50px;\n  display: inline-block;\n  position: absolute;\n"], ["\n  max-width: 100%;\n  width: calc(", "% - ", "px);\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 (p) { return p.left || 0; }, function (props) { return props.error ? "#B21154" : (props.color || "#00d374"); });
 var StyledProgressTitle = styled__default(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 = React.useState({ left: 0, width: 0 }), size = _a[0], setSize = _a[1];
+    var _a = React.useState({ height: 0, width: 0, x: 0, y: 0, }), size = _a[0], setSize = _a[1];
     var measureRef = React.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,
@@ -6427,9 +6440,9 @@ var LabeledBar = function (props) {
                 zIndex: 9,
                 marginTop: -25,
                 color: '#00d374',
-                width: size.width - 10,
+                width: "calc(" + 100 * props.value / props.max + "% - (" + (size.x || 0) + "px + 30px))",
             } }, 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 (_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"]);
@@ -6439,22 +6452,21 @@ var MultiProgress = function (_a) {
     return React__default.createElement(ProgressWrapper$1, __assign({}, props),
         title ? React__default.createElement(StyledProgressTitle, null, title) : null,
         values.map(function (v, i) {
-            var color = i % 2 === 0 ? 'rgba(1, 211, 116, 0.2)' : '#00d374';
+            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 (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 }) : React__default.createElement(ProgressBar$1, { value: val < max ? val : max, max: max, error: error, color: color, key: "multiprogress-bar-" + val + "-" + i }));
+            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 }));
         }),
         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;
 
@@ -6549,7 +6561,8 @@ var TasksCalendarDayBody = function (_a) {
 
 var WeekNav = styled__default(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 })),
@@ -6559,7 +6572,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 })))));
 };
@@ -6627,7 +6650,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 = React.useState(convertTasksToDays({ currentMonth: currentMonth, currentWeek: currentWeek, tasks: tasks, })), days = _f[0], setDays = _f[1];
     var headerProps = {
         onNextWeek: onNextWeek,
@@ -6639,7 +6662,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 }))));
@@ -6726,7 +6749,7 @@ var DroppableDays = function (_a) {
 
 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 = React.useState({
         days: convertTasksToDays({ currentMonth: currentMonth, currentWeek: currentWeek, tasks: tasks, }).reduce(function (acc, v) {
             var _a;
@@ -6835,7 +6858,7 @@ var DraggableTasksCalendar = function (_a) {
         }); } });
     return (React__default.createElement(reactBeautifulDnd.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, } },