@mailstep/design-system 0.7.36-beta.0 → 0.7.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.7.36-beta.0",
+  "version": "0.7.37",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Elements/DatePicker/Datetime/components/DateRepeater.js

@@ -27,5 +27,5 @@ export var DateRepeater = function (_a) {
         }
         onChangeOthers === null || onChangeOthers === void 0 ? void 0 : onChangeOthers(__assign(__assign({}, others), { dateTypeRepeater: dateTypeRepeater }));
     }, [onChangeOthers, reset, others]);
-    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "right", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, border: "none", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
+    return (_jsx(x.div, { borderTop: "1px solid", borderColor: "lightGray2", mt: "8px", pt: "8px", mb: "8px", children: _jsxs(FooterRow, { children: [_jsxs(x.div, { display: "flex", alignItems: "center", flex: "1", children: [_jsx(Icon, { icon: "calendar" }), _jsx(FooterRowLabel, { children: i18n._({ id: 'dataGrid.repeat', message: 'Repeat' }) })] }), _jsxs(x.select, { textAlign: "center", onChange: handleChange, value: others === null || others === void 0 ? void 0 : others.dateTypeRepeater, border: "1px solid lightgray", borderRadius: "6px", padding: "2px", background: "white", cursor: "pointer", children: [_jsx("option", { value: "", children: i18n._({ id: 'dataGrid.noRepeat', message: 'No repeat' }) }), _jsx("option", { value: DatePickerRepeat.EVERY_TODAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_TODAY] }), _jsx("option", { value: DatePickerRepeat.EVERY_YESTERDAY, children: DatePickerRepeatTrans[DatePickerRepeat.EVERY_YESTERDAY] })] })] }) }));
 };

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -10,26 +10,26 @@ var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateOb
 var TimeWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"], ["\n  display: flex;\n  align-items: baseline;\n  justify-content: center;\n  border: 1px solid ", ";\n  border-radius: 0.7rem;\n  padding: 4px 10px;\n  margin: 0 10px;\n"])), th('colors.lightGray2'));
 var Hours = styled.input(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 22px;\n  font-weight: 700;\n  width: 30px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-size: 22px;\n  font-weight: 700;\n  width: 30px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
 var Minutes = styled.input(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: 700;\n  font-size: 16px;\n  width: 25px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"], ["\n  font-weight: 700;\n  font-size: 16px;\n  width: 25px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  outline: none;\n  &:disabled {\n    opacity: 0.5;\n  }\n"])));
+var regExp = '^[0-9]*$';
 export var Timepicker = function (_a) {
     var _b, _c, _d, _e;
     var setTime = _a.setTime, value = _a.value, disabled = _a.disabled;
     var initialHours = (_c = (_b = value === null || value === void 0 ? void 0 : value.getHours) === null || _b === void 0 ? void 0 : _b.call(value)) !== null && _c !== void 0 ? _c : 0;
     var initialMinutes = (_e = (_d = value === null || value === void 0 ? void 0 : value.getMinutes) === null || _d === void 0 ? void 0 : _d.call(value)) !== null && _e !== void 0 ? _e : 0;
-    var regExp = '^[0-9]*$';
     var _f = useState(initialHours), hours = _f[0], setHours = _f[1];
     var _g = useState(initialMinutes), minutes = _g[0], setMinutes = _g[1];
     var increaseHour = useCallback(function () {
-        hours === 23 ? setHours(0) : setHours(hours + 1);
-    }, [hours]);
+        setHours(function (prev) { return (prev + 1) % 24; });
+    }, []);
     var decreaseHour = useCallback(function () {
-        hours === 0 ? setHours(23) : setHours(hours - 1);
-    }, [hours]);
+        setHours(function (prev) { return (prev === 0 ? 23 : prev - 1); });
+    }, []);
     var increaseMinutes = useCallback(function () {
-        minutes >= 55 ? setMinutes(minutes - 55) : setMinutes(minutes + 5);
-    }, [minutes]);
+        setMinutes(function (prev) { return (prev + 5) % 60; });
+    }, []);
     var decreaseMinutes = useCallback(function () {
-        minutes <= 5 ? setMinutes(minutes + 55) : setMinutes(minutes - 5);
-    }, [minutes]);
+        setMinutes(function (prev) { return (prev === 0 ? 55 : prev - 5); });
+    }, []);
     var onHoursChange = useCallback(function (e) {
         if (e.target.value.match(regExp) && Number(e.target.value) <= 23) {
             setHours(Number(e.target.value));
@@ -52,6 +52,6 @@ export var Timepicker = function (_a) {
     useEffect(function () {
         !!value && setTime('minutes', minutes);
     }, [minutes]);
-    return (_jsx("td", { colSpan: 7, children: _jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "1rem", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: hours < 10 ? "0".concat(hours) : hours, disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: minutes < 10 ? "0".concat(minutes) : minutes, disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, type: "button", children: "\u203A" })] })] }) }) }));
+    return (_jsx(x.div, { display: "flex", flexDirection: "column", alignItems: "flex-start", pt: "4px", w: "fit-content", children: _jsxs(x.div, { display: "flex", alignItems: "center", children: [_jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseHour, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseHour, type: "button", children: "\u203A" })] }), _jsxs(TimeWrapper, { children: [_jsx(Hours, { value: String(hours).padStart(2, '0'), disabled: disabled, onChange: onHoursChange }), _jsx(x.div, { mx: "7px", color: "lightGray4", children: "|" }), _jsx(Minutes, { value: String(minutes).padStart(2, '0'), disabled: disabled, onChange: onMinutesChange })] }), _jsxs(x.div, { display: "flex", flexDirection: "column", children: [_jsx(Btn, { disabled: disabled, onClick: increaseMinutes, type: "button", children: "\u2039" }), _jsx(Btn, { disabled: disabled, onClick: decreaseMinutes, type: "button", children: "\u203A" })] })] }) }));
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;