@cashub/ui 0.17.12 → 0.18.1

package/datetimePicker/DatePickerV2.js

@@ -15,6 +15,8 @@ var _reactOutsideClickHandler = _interopRequireDefault(require("react-outside-cl
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _md = require("react-icons/md");
+
 var _hooks = require("@cashub/hooks");
 
 var _utils = require("@cashub/utils");
@@ -29,11 +31,11 @@ var _Year = _interopRequireDefault(require("./accordion/Year"));
 
 var _DateTimePickerContext = _interopRequireDefault(require("./subComponent/DateTimePickerContext"));
 
-var _GMTDate = _interopRequireDefault(require("./utils/GMTDate"));
+var _toUTC = _interopRequireDefault(require("./utils/toUTC0"));
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -69,11 +71,14 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var DEFAULT_TIME = '00:00:00';
+
 var DatePickerV2 = function DatePickerV2(_ref) {
   var selected = _ref.selected,
       fixedYear = _ref.fixedYear,
-      maxDate = _ref.maxDate,
+      allowClear = _ref.allowClear,
       minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
       onConfirm = _ref.onConfirm,
       disabled = _ref.disabled;
 
@@ -85,17 +90,20 @@ var DatePickerV2 = function DatePickerV2(_ref) {
       toggleElement = _useState2[0],
       setToggleElement = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : ''),
+  var _useState3 = (0, _react.useState)(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
+      contentElement = _useState4[0],
+      setContentElement = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)((0, _GMTDate.default)(selected)) : (0, _utils.datetimeTFormat)((0, _GMTDate.default)(new Date()))),
+  var _useState5 = (0, _react.useState)(function () {
+    var defaultDate = selected ? new Date(selected) : new Date();
+    return "".concat((0, _utils.formatDate)((0, _toUTC.default)(defaultDate), 'date'), " ").concat(DEFAULT_TIME);
+  }),
       _useState6 = _slicedToArray(_useState5, 2),
       selectedDate = _useState6[0],
       setSelectedDate = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : ''),
+  var _useState7 = (0, _react.useState)(selected ? (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date') : ''),
       _useState8 = _slicedToArray(_useState7, 2),
       confirmDate = _useState8[0],
       setConfirmDate = _useState8[1];
@@ -107,13 +115,24 @@ var DatePickerV2 = function DatePickerV2(_ref) {
 
   var _useState11 = (0, _react.useState)(null),
       _useState12 = _slicedToArray(_useState11, 2),
-      contentElement = _useState12[0],
-      setContentElement = _useState12[1];
+      accordionCurrentDisplayType = _useState12[0],
+      setAccordionCurrentDisplayType = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(null),
-      _useState14 = _slicedToArray(_useState13, 2),
-      accordionCurrentDisplayType = _useState14[0],
-      setAccordionCurrentDisplayType = _useState14[1];
+  var weeks = (0, _react.useMemo)(function () {
+    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(function (week) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
+        children: week
+      }, week);
+    });
+  }, []);
+  var minDateWithTime = (0, _react.useMemo)(function () {
+    if (!minDate) return;
+    return "".concat(minDate, " 00:00:00");
+  }, [minDate]);
+  var maxDateWithTime = (0, _react.useMemo)(function () {
+    if (!maxDate) return;
+    return "".concat(maxDate, " 00:00:00");
+  }, [maxDate]);
 
   var _useCustomPopper = (0, _hooks.useCustomPopper)(toggleElement, contentElement, {
     strategy: 'absolute',
@@ -125,14 +144,12 @@ var DatePickerV2 = function DatePickerV2(_ref) {
       update = _useCustomPopper.update;
 
   var context = {
-    inputValue: inputValue,
+    fixedYear: fixedYear,
+    minDate: minDateWithTime,
+    maxDate: maxDateWithTime,
     selectedDate: selectedDate,
     setSelectedDate: setSelectedDate,
-    minDate: minDate,
-    maxDate: maxDate,
-    fixedYear: fixedYear,
-    setAccordionCurrentDisplayType: setAccordionCurrentDisplayType,
-    setInputValue: setInputValue
+    setAccordionCurrentDisplayType: setAccordionCurrentDisplayType
   };
 
   var handleToggle = function handleToggle() {
@@ -140,49 +157,21 @@ var DatePickerV2 = function DatePickerV2(_ref) {
     update();
   };
 
-  var _handleDisplayAccordionContent = (0, _react.useCallback)(function (type) {
+  var changeDisplayAccordion = (0, _react.useCallback)(function (type) {
     if (accordionCurrentDisplayType === type) {
       setAccordionCurrentDisplayType(null);
     } else {
       setAccordionCurrentDisplayType(type);
     }
   }, [accordionCurrentDisplayType]);
-
-  var handleChangeYear = function handleChangeYear(selected) {
-    var date = new Date(selectedDate);
-
-    if (selected === 'previous') {
-      if (date.getFullYear() > 1) {
-        date.setFullYear(date.getFullYear() - 1);
-      }
-    } else if (selected === 'next') {
-      date.setFullYear(date.getFullYear() + 1);
-    }
-
-    setSelectedDate((0, _utils.datetimeTFormat)(date));
-    setAccordionCurrentDisplayType(null);
-  };
-
-  var handleChangeMonth = function handleChangeMonth(selected) {
-    var date = new Date(selectedDate);
-
-    if (selected === 'previous') {
-      date.setMonth(date.getMonth() <= 0 ? 11 : date.getMonth() - 1);
-    } else if (selected === 'next') {
-      date.setMonth(date.getMonth() >= 11 ? 0 : date.getMonth() + 1);
+  var handleConfirm = (0, _react.useCallback)(function () {
+    if (confirmDate) {
+      onConfirm(confirmDate);
     }
 
-    setSelectedDate((0, _utils.datetimeTFormat)(date));
-    setAccordionCurrentDisplayType(null);
-  };
-
-  var handleConfirm = (0, _react.useCallback)(function () {
-    if (!confirmDate) return;
-    setSelectedDate(confirmDate);
-    onConfirm("".concat(inputValue, " 00:00:00"));
     setDisplayPicker(false);
     setAccordionCurrentDisplayType(null);
-  }, [confirmDate, inputValue, onConfirm]);
+  }, [confirmDate, onConfirm]);
   var handleChangeDate = (0, _react.useCallback)(function (daysOfMonthForSelectedDate, firstWeekOfMonth, dayIndex, day) {
     var date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
@@ -208,8 +197,6 @@ var DatePickerV2 = function DatePickerV2(_ref) {
       }
 
       date.setDate(day);
-      setSelectedDate((0, _utils.datetimeTFormat)(date));
-      setConfirmDate((0, _utils.datetimeTFormat)(date));
     } else if (fixedYear) {
       if (dayIndex < firstWeekOfMonth) {
         if (selectedMonth === 0) {
@@ -226,17 +213,20 @@ var DatePickerV2 = function DatePickerV2(_ref) {
       }
 
       date.setDate(day);
-      setSelectedDate((0, _utils.datetimeTFormat)(date));
-      setConfirmDate((0, _utils.datetimeTFormat)(date));
     }
+
+    var formattedDate = (0, _utils.formatDate)(date, 'date');
+    setSelectedDate("".concat(formattedDate, " ").concat(DEFAULT_TIME));
+    setConfirmDate(formattedDate);
   }, [fixedYear, selectedDate]);
-  var handleDisabled = (0, _react.useCallback)(function (firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
+  var handleDisabled = (0, _react.useCallback)(function (firstDayOfMonth, lastDayOfMonth, daysOfMonthForSelectedDate, dayIndex, day) {
     var _selectedDate$split = selectedDate.split('-'),
         _selectedDate$split2 = _slicedToArray(_selectedDate$split, 2),
         year = _selectedDate$split2[0],
-        month = _selectedDate$split2[1];
+        month = _selectedDate$split2[1]; // disabled date before first month of first year
 
-    if (year === '0001' && month === '01' && firstWeekOfMonth >= dayIndex + 1) {
+
+    if (year === '0001' && month === '01' && dayIndex < firstDayOfMonth) {
       return true;
     }
 
@@ -244,56 +234,61 @@ var DatePickerV2 = function DatePickerV2(_ref) {
     if (myDay.length === 1) myDay = "0".concat(myDay);
 
     if (fixedYear) {
-      if (month === '01' && dayIndex + 1 <= firstWeekOfMonth) {
-        // disabled date in january
-        return dayIndex < firstWeekOfMonth;
-      } else if (month === '12' && day + firstWeekOfMonth < dayIndex + 1) {
+      if (month === '01') {
+        // disabled date before first month
+        return dayIndex < firstDayOfMonth;
+      } else if (month === '12') {
         // disabled date in december
-        return dayIndex >= daysOfMonthForSelectedDate + firstWeekOfMonth;
+        return dayIndex >= daysOfMonthForSelectedDate + firstDayOfMonth;
       }
-    }
+    } // previous year's date
+
+
+    if (month === '01' && firstDayOfMonth !== 0 && dayIndex + 1 <= firstDayOfMonth) {
+      year = +year - 1;
+    } // next year's date
 
-    if (month === '01' && firstWeekOfMonth !== 0 && dayIndex + 1 <= firstWeekOfMonth) {
-      year = (+year - 1).toString();
-    } else if (month === '12' && lastWeekOfMonth !== 6 && day + firstWeekOfMonth < dayIndex + 1) {
-      year = (+year + 1).toString();
+
+    if (month === '12' && lastDayOfMonth !== 6 && day + firstDayOfMonth < dayIndex + 1) {
+      year = +year + 1;
     }
 
-    month = firstWeekOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstWeekOfMonth < dayIndex + 1 ? +month + 1 : +month;
+    month = firstDayOfMonth >= dayIndex + 1 ? +month - 1 : daysOfMonthForSelectedDate + firstDayOfMonth < dayIndex + 1 ? +month + 1 : +month;
 
-    if (month === 0) {
+    if (month < 1) {
       month = 12;
-    } else if (month === 13) {
+    } else if (month > 12) {
       month = 1;
     }
 
-    if (month.toString().length === 1) month = "0".concat(month);else month = month.toString();
+    month = month.toString();
+
+    if (month.length === 1) {
+      month = "0".concat(month);
+    }
+
+    year = year.toString();
     if (year.length === 1) year = "000".concat(year);
     if (year.length === 2) year = "00".concat(year);
     if (year.length === 3) year = "0".concat(year);
-    var compareMinDateDate = (0, _utils.formatDate)((0, _utils.datetimeTFormat)(new Date((0, _GMTDate.default)((0, _utils.formatDate)(new Date("".concat(year, "-").concat(month, "-").concat(myDay))), 'date')).setHours(23, 59, 59, 59)));
-    var compareMaxDateDate = (0, _utils.formatDate)((0, _utils.datetimeTFormat)(new Date((0, _GMTDate.default)((0, _utils.formatDate)(new Date("".concat(year, "-").concat(month, "-").concat(myDay))), 'date')).setHours(0, 0, 0, 0)));
+    var currentDate = "".concat(year, "-").concat(month, "-").concat(myDay, " ").concat(DEFAULT_TIME);
 
-    if (minDate && !maxDate && minDate > compareMinDateDate) {
+    if (minDateWithTime && currentDate < minDateWithTime) {
       return true;
     }
 
-    if (maxDate && !minDate && maxDate < compareMaxDateDate) {
-      return true;
-    }
-
-    if (maxDate && minDate && (minDate > compareMinDateDate || maxDate < compareMaxDateDate)) {
+    if (maxDateWithTime && currentDate > maxDateWithTime) {
       return true;
     }
 
     return false;
-  }, [fixedYear, minDate, maxDate, selectedDate]);
-  var handleSelectedDay = (0, _react.useCallback)(function (day, index, firstWeekOfMonth, lastWeekOfMonth, totalDays) {
+  }, [fixedYear, minDateWithTime, maxDateWithTime, selectedDate]);
+  var isSelectedDay = (0, _react.useCallback)(function (day, index, firstDayOfMonth, daysOfMonthForSelectedDate) {
     var selectedDateObj = new Date(selectedDate);
-    var confirmDateObj = new Date(confirmDate);
+    var confirmDateObj = (0, _toUTC.default)(new Date(confirmDate));
 
     if (confirmDateObj.getFullYear() === selectedDateObj.getFullYear() && confirmDateObj.getMonth() === selectedDateObj.getMonth() && confirmDateObj.getDate() === day) {
-      if (index + 1 > firstWeekOfMonth && index < totalDays - (6 - lastWeekOfMonth)) {
+      if (index + 1 > firstDayOfMonth && index < daysOfMonthForSelectedDate + firstDayOfMonth) {
         return true;
       }
 
@@ -302,36 +297,35 @@ var DatePickerV2 = function DatePickerV2(_ref) {
 
     return false;
   }, [selectedDate, confirmDate]);
-  var days = (0, _react.useMemo)(function () {
+
+  var getLastDateOfMonth = function getLastDateOfMonth(selectedDate) {
     var date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
     date.setMonth(date.getMonth() + 1);
     date.setDate(0);
-    var daysOfMonthForSelectedDate = date.getDate();
-    date = new Date(selectedDate);
+    return date;
+  };
+
+  var days = (0, _react.useMemo)(function () {
+    var lastDateOfSelectedDate = getLastDateOfMonth(selectedDate);
+    var daysOfMonthForSelectedDate = lastDateOfSelectedDate.getDate();
+    var lastDayOfMonth = lastDateOfSelectedDate.getDay();
+    var date = new Date(selectedDate);
     date.setMonth(date.getMonth() + 1 - 1);
     date.setDate(0);
     var daysOfPrevioueMonthForSelectedDate = date.getDate();
     date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
 
     date.setDate(1);
-    var firstWeekOfMonth = date.getDay();
-    date = new Date(selectedDate); // 先把日期設定成所有月分都有的日期，設定月份時才不會設定到非預期的date
-
-    date.setDate(1);
-    date.setMonth(date.getMonth() + 1);
-    date.setDate(0);
-    var lastWeekOfMonth = date.getDay();
-    var days = [];
+    var firstDayOfMonth = date.getDay();
 
-    for (var _i2 = 0, _arr2 = _toConsumableArray(Array(daysOfMonthForSelectedDate).keys()); _i2 < _arr2.length; _i2++) {
-      var day = _arr2[_i2];
-      days.push(day + 1);
-    }
+    var days = _toConsumableArray(Array(daysOfMonthForSelectedDate)).map(function (value, index) {
+      return index + 1;
+    });
 
-    if (firstWeekOfMonth !== 0) {
-      for (var index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstWeekOfMonth; index -= 1) {
+    if (firstDayOfMonth !== 0) {
+      for (var index = daysOfPrevioueMonthForSelectedDate; index > daysOfPrevioueMonthForSelectedDate - firstDayOfMonth; index -= 1) {
         if (date.getFullYear() === 1 && date.getMonth() === 0) {
           days.unshift(null);
         } else {
@@ -340,50 +334,50 @@ var DatePickerV2 = function DatePickerV2(_ref) {
       }
     }
 
-    if (lastWeekOfMonth !== 6) {
-      for (var _index = 1; _index <= 6 - lastWeekOfMonth; _index += 1) {
+    if (lastDayOfMonth !== 6) {
+      for (var _index = 1; _index <= 6 - lastDayOfMonth; _index += 1) {
         days.push(_index);
       }
     }
 
-    return days.map(function (day, index, arr) {
+    return days.map(function (day, index) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(Day, {
-        disabled: handleDisabled(firstWeekOfMonth, lastWeekOfMonth, daysOfMonthForSelectedDate, index, day),
+        disabled: handleDisabled(firstDayOfMonth, lastDayOfMonth, daysOfMonthForSelectedDate, index, day),
         onClick: function onClick() {
-          handleChangeDate(daysOfMonthForSelectedDate, firstWeekOfMonth, index, day);
+          handleChangeDate(daysOfMonthForSelectedDate, firstDayOfMonth, index, day);
         },
-        selected: handleSelectedDay(day, index, firstWeekOfMonth, lastWeekOfMonth, arr.length, daysOfMonthForSelectedDate),
+        selected: isSelectedDay(day, index, firstDayOfMonth, daysOfMonthForSelectedDate),
         children: day
       }, index);
     });
-  }, [selectedDate, handleChangeDate, handleSelectedDay, handleDisabled]);
-  var weeks = (0, _react.useMemo)(function () {
-    return ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].map(function (week) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Week, {
-        children: week
-      }, week);
-    });
-  }, []);
+  }, [selectedDate, handleChangeDate, isSelectedDay, handleDisabled]);
   (0, _react.useEffect)(function () {
-    if (!selected) return;
-    setSelectedDate((0, _utils.datetimeTFormat)(selected));
-    setConfirmDate((0, _utils.datetimeTFormat)(selected));
+    if (selected) {
+      var formattedDate = (0, _utils.formatDate)((0, _toUTC.default)(selected), 'date');
+      setSelectedDate("".concat(formattedDate, " ").concat(DEFAULT_TIME));
+      setConfirmDate(formattedDate);
+    } else {
+      setConfirmDate('');
+    }
   }, [selected]);
-  (0, _react.useEffect)(function () {
-    if (!confirmDate) return;
-    setInputValue((0, _utils.formatDate)(confirmDate, 'date'));
-  }, [confirmDate]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateTimePickerContext.default.Provider, {
     value: context,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactOutsideClickHandler.default, {
       onOutsideClick: handleConfirm,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(PickerInput, {
-        disabled: disabled,
-        ref: setToggleElement,
-        value: inputValue,
-        onClick: handleToggle,
-        readOnly: true
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, attributes.popper), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+          disabled: disabled,
+          ref: setToggleElement,
+          value: confirmDate,
+          onClick: handleToggle,
+          readOnly: true
+        }), confirmDate && !disabled && allowClear && /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseButton, {
+          onClick: function onClick() {
+            setConfirmDate('');
+            onConfirm('');
+          }
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Picker, _objectSpread(_objectSpread({}, attributes.popper), {}, {
         style: styles.popper,
         placement: state && state.placement,
         ref: setContentElement,
@@ -391,16 +385,14 @@ var DatePickerV2 = function DatePickerV2(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
           accordionCurrentDisplayType: accordionCurrentDisplayType,
           children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Year.default, {
-            handleChangeTitle: handleChangeYear,
             expand: accordionCurrentDisplayType === 'year',
             handleDisplayAccordionContent: function handleDisplayAccordionContent() {
-              _handleDisplayAccordionContent('year');
+              changeDisplayAccordion('year');
             }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Month.default, {
-            handleChangeTitle: handleChangeMonth,
             expand: accordionCurrentDisplayType === 'month',
             handleDisplayAccordionContent: function handleDisplayAccordionContent() {
-              _handleDisplayAccordionContent('month');
+              changeDisplayAccordion('month');
             },
             confirmDate: confirmDate
           }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(DateContent, {
@@ -419,36 +411,39 @@ var DatePickerV2 = function DatePickerV2(_ref) {
   });
 };
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), function (_ref2) {
+var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n"])));
+
+var CloseButton = (0, _styledComponents.default)(_md.MdClose)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--font-on-background);\n  font-size: var(--font-body1);\n  right: var(--spacing-s);\n  cursor: pointer;\n"])));
+CloseButton.displayName = 'CloseButton';
+
+var Picker = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding-bottom: var(--spacing-s);\n  background: var(--color-background1);\n  border-radius: var(--border-radius);\n  border: var(--border-width) solid var(--border-color);\n  box-shadow: var(--box-shadow);\n  overflow: hidden;\n  width: 286px;\n  z-index: 1;\n  color: var(--font-on-background);\n\n  display: ", ";\n"])), function (_ref2) {
   var displayPicker = _ref2.displayPicker;
   return displayPicker ? 'block' : 'none';
 });
 
-var Week = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
+var Week = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n"])));
 
-var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), function (_ref3) {
+var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n\n  overflow: hidden;\n  padding: ", ";\n"])), function (_ref3) {
   var accordionCurrentDisplayType = _ref3.accordionCurrentDisplayType;
-  return accordionCurrentDisplayType && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      height: 216px;\n    "])));
+  return accordionCurrentDisplayType && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      height: 216px;\n    "])));
 }, function (_ref4) {
   var accordionCurrentDisplayType = _ref4.accordionCurrentDisplayType;
   return accordionCurrentDisplayType === 'year' ? ' 0 4px var(--spacing-s) var(--spacing-s)' : '0 var(--spacing-s) 0 var(--spacing-s)';
 });
 
-var Footer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
-
-var PickerInput = (0, _styledComponents.default)(_Input.default)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n"])));
+var Footer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  padding: 0 var(--spacing-s);\n"])));
 
-var Day = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
+var Day = _styledComponents.default.button(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: calc(100% / 7);\n  height: 36px;\n  border-radius: var(--border-radius-s);\n  line-height: 36px;\n  text-align: center;\n  padding: 0;\n  border: 0;\n  background: var(--color-background1);\n  color: var(--font-on-background);\n  &:hover {\n    background: var(--color-primary);\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref5) {
   var selected = _ref5.selected;
   return selected && 'background: var(--color-hover);';
 }, function (_ref6) {
   var disabled = _ref6.disabled;
-  return disabled && (0, _styledComponents.css)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));
+  return disabled && (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n      color: var(--font-on-mute);\n      background: none;\n      &:hover {\n        background: none;\n      }\n    "])));
 });
 
-var ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
+var ConfirmButton = (0, _styledComponents.default)(_Button.default)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin: 16px auto 0;\n"])));
 
-var DateContent = _styledComponents.default.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
+var DateContent = _styledComponents.default.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n"])));
 
 var _default = DatePickerV2;
 exports.default = _default;

package/datetimePicker/DatetimePickerV2.js

@@ -74,8 +74,8 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var DatetimePickerV2 = function DatetimePickerV2(_ref) {
   var selected = _ref.selected,
       fixedYear = _ref.fixedYear,
-      maxDate = _ref.maxDate,
       minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
       onConfirm = _ref.onConfirm,
       disabled = _ref.disabled,
       onBlur = _ref.onBlur;
@@ -88,30 +88,30 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       toggleElement = _useState2[0],
       setToggleElement = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : ''),
+  var _useState3 = (0, _react.useState)(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      inputValue = _useState4[0],
-      setInputValue = _useState4[1];
+      contentElement = _useState4[0],
+      setContentElement = _useState4[1];
 
-  var _useState5 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)((0, _GMTDate.default)(selected)) : (0, _utils.datetimeTFormat)((0, _GMTDate.default)(new Date()))),
+  var _useState5 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : ''),
       _useState6 = _slicedToArray(_useState5, 2),
-      selectedDate = _useState6[0],
-      setSelectedDate = _useState6[1];
+      inputValue = _useState6[0],
+      setInputValue = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : ''),
+  var _useState7 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)((0, _GMTDate.default)(selected)) : (0, _utils.datetimeTFormat)((0, _GMTDate.default)(new Date()))),
       _useState8 = _slicedToArray(_useState7, 2),
-      confirmDate = _useState8[0],
-      setConfirmDate = _useState8[1];
+      selectedDate = _useState8[0],
+      setSelectedDate = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(false),
+  var _useState9 = (0, _react.useState)(selected ? (0, _utils.datetimeTFormat)(selected) : ''),
       _useState10 = _slicedToArray(_useState9, 2),
-      displayPicker = _useState10[0],
-      setDisplayPicker = _useState10[1];
+      confirmDate = _useState10[0],
+      setConfirmDate = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(null),
+  var _useState11 = (0, _react.useState)(false),
       _useState12 = _slicedToArray(_useState11, 2),
-      contentElement = _useState12[0],
-      setContentElement = _useState12[1];
+      displayPicker = _useState12[0],
+      setDisplayPicker = _useState12[1];
 
   var _useState13 = (0, _react.useState)(function () {
     var date = new Date((0, _utils.datetimeTFormat)(selected ? selected : (0, _utils.formatDate)(new Date())));
@@ -137,14 +137,12 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
       update = _useCustomPopper.update;
 
   var context = {
-    inputValue: inputValue,
-    selectedDate: selectedDate,
-    setSelectedDate: setSelectedDate,
+    fixedYear: fixedYear,
     minDate: minDate,
     maxDate: maxDate,
-    fixedYear: fixedYear,
-    setAccordionCurrentDisplayType: setAccordionCurrentDisplayType,
-    setInputValue: setInputValue
+    selectedDate: selectedDate,
+    setSelectedDate: setSelectedDate,
+    setAccordionCurrentDisplayType: setAccordionCurrentDisplayType
   };
 
   var handleToggle = function handleToggle() {
@@ -164,34 +162,6 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
     }
   }, [accordionCurrentDisplayType]);
 
-  var handleChangeYear = function handleChangeYear(selected) {
-    var date = new Date(selectedDate);
-
-    if (selected === 'previous') {
-      if (date.getFullYear() > 1) {
-        date.setFullYear(date.getFullYear() - 1);
-      }
-    } else if (selected === 'next') {
-      date.setFullYear(date.getFullYear() + 1);
-    }
-
-    setSelectedDate((0, _utils.datetimeTFormat)(date));
-    setAccordionCurrentDisplayType(null);
-  };
-
-  var handleChangeMonth = function handleChangeMonth(selected) {
-    var date = new Date(selectedDate);
-
-    if (selected === 'previous') {
-      date.setMonth(date.getMonth() <= 0 ? 11 : date.getMonth() - 1);
-    } else if (selected === 'next') {
-      date.setMonth(date.getMonth() >= 11 ? 0 : date.getMonth() + 1);
-    }
-
-    setSelectedDate((0, _utils.datetimeTFormat)(date));
-    setAccordionCurrentDisplayType(null);
-  };
-
   var handleConfirm = (0, _react.useCallback)(function () {
     if (!confirmDate) return;
     setSelectedDate(confirmDate);
@@ -419,13 +389,11 @@ var DatetimePickerV2 = function DatetimePickerV2(_ref) {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
           accordionCurrentDisplayType: accordionCurrentDisplayType,
           children: [!fixedYear && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Year.default, {
-            handleChangeTitle: handleChangeYear,
             expand: accordionCurrentDisplayType === 'year',
             handleDisplayAccordionContent: function handleDisplayAccordionContent() {
               _handleDisplayAccordionContent('year');
             }
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Month.default, {
-            handleChangeTitle: handleChangeMonth,
             expand: accordionCurrentDisplayType === 'month',
             handleDisplayAccordionContent: function handleDisplayAccordionContent() {
               _handleDisplayAccordionContent('month');

package/datetimePicker/accordion/Month.js

@@ -35,8 +35,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var Month = function Month(_ref) {
   var expand = _ref.expand,
-      handleDisplayAccordionContent = _ref.handleDisplayAccordionContent,
-      handleChangeTitle = _ref.handleChangeTitle;
+      handleDisplayAccordionContent = _ref.handleDisplayAccordionContent;
 
   var _useContext = (0, _react.useContext)(_DateTimePickerContext.default),
       selectedDate = _useContext.selectedDate,
@@ -47,14 +46,22 @@ var Month = function Month(_ref) {
       setAccordionCurrentDisplayType = _useContext.setAccordionCurrentDisplayType;
 
   var handleChangeMonth = (0, _react.useCallback)(function (month) {
-    setSelectedDate(function () {
-      var date = new Date(selectedDate);
-      date.setDate(1);
-      date.setMonth(month);
-      return (0, _utils.datetimeTFormat)(date);
-    });
+    var date = new Date(selectedDate);
+    date.setMonth(month);
+    setSelectedDate((0, _utils.datetimeTFormat)(date));
     setAccordionCurrentDisplayType(null);
   }, [setAccordionCurrentDisplayType, setSelectedDate, selectedDate]);
+
+  var changeToPreviousMonth = function changeToPreviousMonth() {
+    var date = new Date(selectedDate);
+    handleChangeMonth(date.getMonth() <= 0 ? 11 : date.getMonth() - 1);
+  };
+
+  var changeToNextMonth = function changeToNextMonth() {
+    var date = new Date(selectedDate);
+    handleChangeMonth(date.getMonth() >= 11 ? 0 : date.getMonth() + 1);
+  };
+
   var handleMonthItemDisable = (0, _react.useCallback)(function (month) {
     var minDayDate;
     var maxDayDate;
@@ -129,17 +136,13 @@ var Month = function Month(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        onClick: function onClick() {
-          handleChangeTitle('previous');
-        },
+        onClick: changeToPreviousMonth,
         disabled: handleDisableArrow('previous'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowBackIosNew, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: _constant.MONTH[new Date(selectedDate).getMonth()].text
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        onClick: function onClick() {
-          handleChangeTitle('next');
-        },
+        onClick: changeToNextMonth,
         disabled: handleDisableArrow('next'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowForwardIos, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {

package/datetimePicker/accordion/Year.js

@@ -55,15 +55,14 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var Year = function Year(_ref) {
   var expand = _ref.expand,
-      handleDisplayAccordionContent = _ref.handleDisplayAccordionContent,
-      handleChangeTitle = _ref.handleChangeTitle;
+      handleDisplayAccordionContent = _ref.handleDisplayAccordionContent;
 
   var _useContext = (0, _react.useContext)(_DateTimePickerContext.default),
-      selectedDate = _useContext.selectedDate,
-      setSelectedDate = _useContext.setSelectedDate,
+      fixedYear = _useContext.fixedYear,
       minDate = _useContext.minDate,
       maxDate = _useContext.maxDate,
-      fixedYear = _useContext.fixedYear,
+      selectedDate = _useContext.selectedDate,
+      setSelectedDate = _useContext.setSelectedDate,
       setAccordionCurrentDisplayType = _useContext.setAccordionCurrentDisplayType;
 
   var bodyRef = (0, _react.useRef)(null);
@@ -77,11 +76,22 @@ var Year = function Year(_ref) {
   var minYear = minDate ? new Date((0, _utils.datetimeTFormat)(minDate)).getFullYear() : 1;
   var maxYear = maxDate ? new Date((0, _utils.datetimeTFormat)(maxDate)).getFullYear() : null;
   var handleChangeYear = (0, _react.useCallback)(function (year) {
-    var data = new Date(selectedDate);
-    data.setFullYear(year);
-    setSelectedDate((0, _utils.datetimeTFormat)(data));
+    var date = new Date(selectedDate);
+    date.setFullYear(year);
+    setSelectedDate((0, _utils.datetimeTFormat)(date));
     setAccordionCurrentDisplayType(null);
   }, [selectedDate, setAccordionCurrentDisplayType, setSelectedDate]);
+  var changeToPreviousYear = (0, _react.useCallback)(function () {
+    var date = new Date(selectedDate);
+
+    if (date.getFullYear() > 1) {
+      handleChangeYear(date.getFullYear() - 1);
+    }
+  }, [selectedDate, handleChangeYear]);
+  var changeToNextYear = (0, _react.useCallback)(function () {
+    var date = new Date(selectedDate);
+    handleChangeYear(date.getFullYear() + 1);
+  }, [selectedDate, handleChangeYear]);
   var handleYearItemDisable = (0, _react.useCallback)(function (year) {
     if (minDate !== undefined && maxDate !== undefined) {
       return !(minYear <= year && year <= maxYear);
@@ -182,17 +192,13 @@ var Year = function Year(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Header, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        onClick: function onClick() {
-          handleChangeTitle('previous');
-        },
+        onClick: changeToPreviousYear,
         disabled: handleDisableArrow('previous'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowBackIosNew, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: new Date(selectedDate).getFullYear()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
-        onClick: function onClick() {
-          handleChangeTitle('next');
-        },
+        onClick: changeToNextYear,
         disabled: handleDisableArrow('next'),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_md.MdArrowForwardIos, {})
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
@@ -221,12 +227,12 @@ var IconButton = _styledComponents.default.button(_templateObject2 || (_template
   return right && "\n    position: absolute;\n    right: 0;\n    ".concat(rotate && (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        transform: rotate(180deg);\n      "]))), "\n  ");
 });
 
-var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex-wrap: wrap;\n  height: 0;\n  width: 100%;\n  display: ", ";\n\n  ", "\n\n  transition: 0.3s;\n"])), function (_ref4) {
+var Body = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  flex-wrap: wrap;\n  height: 0;\n  width: 100%;\n  display: ", ";\n  transition: 0.3s;\n  overflow-y: scroll;\n  gap: 12px 0;\n  ", "\n\n  ", "\n"])), function (_ref4) {
   var expand = _ref4.expand;
   return expand ? 'flex' : 'none';
-}, function (_ref5) {
+}, _scrollbar.default, function (_ref5) {
   var fixedYear = _ref5.fixedYear;
-  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    min-height: ", "px};\n    transition: .3s;\n    overflow-y: scroll;\n    gap: 12px 0;\n    ", "\n  "])), fixedYear ? '144' : '192', _scrollbar.default);
+  return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      height: ", "px};\n    "])), fixedYear ? '144' : '192');
 });
 
 var Item = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: calc(100% / 3);\n  height: 36px;\n  line-height: 36px;\n  text-align: center;\n  border-radius: var(--border-radius-s);\n  padding: 0;\n  border: none;\n  color: var(--font-on-background);\n  background: var(--color-background1);\n\n  &:hover {\n    ", "\n  }\n\n  ", "\n\n  ", "\n"])), function (_ref6) {

package/datetimePicker/utils/toUTC0.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var toUTC0 = function toUTC0(date) {
+  if (!date) return;
+  var newDate = new Date(date);
+  newDate.setTime(newDate.getTime() + newDate.getTimezoneOffset() * 60 * 1000);
+  return newDate;
+};
+
+var _default = toUTC0;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.17.12",
+  "version": "0.18.1",
   "private": false,
   "author": "CASHUB Team",
   "description": "CASHUB UI components library",