td-stylekit 28.30.1 → 28.30.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [28.30.3](https://github.com/treasure-data/td-stylekit/compare/v28.30.2...v28.30.3) (2023-12-18)
+
+
+### Bug Fixes
+
+* **CON-11008:** Properly fix migration to date-fns in `TimeControl` ([#1518](https://github.com/treasure-data/td-stylekit/issues/1518)) ([53bf9fe](https://github.com/treasure-data/td-stylekit/commit/53bf9fe))
+
+## [28.30.2](https://github.com/treasure-data/td-stylekit/compare/v28.30.1...v28.30.2) (2023-12-15)
+
+
+### Bug Fixes
+
+* **CON-11008:** Fix issue in TimeControl ([#1517](https://github.com/treasure-data/td-stylekit/issues/1517)) ([85fdca4](https://github.com/treasure-data/td-stylekit/commit/85fdca4))
+
 ## [28.30.1](https://github.com/treasure-data/td-stylekit/compare/v28.30.0...v28.30.1) (2023-12-14)
 
 

package/dist/es/TimeControl/utils.js

@@ -7,6 +7,8 @@ exports.useDisplayValue = useDisplayValue;
 
 var _react = require("react");
 
+var _DatePicker = require("../DatePicker");
+
 var _dateFns = require("date-fns");
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -23,10 +25,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 if (typeof window !== "undefined" && !window.gs) window.gs = function () {};
 if (typeof window !== "undefined" && !window.gsC) window.gsC = function () {};
-var TIME_FORMAT_24 = 'hh:mm:ss';
-var TIME_FORMAT_12 = 'hh:mm:ss A';
+var isStringCorrectFormat = _DatePicker.DatePickerUtils.isStringCorrectFormat;
+var TIME_FORMAT_24 = 'HH:mm:ss';
+var TIME_FORMAT_12 = 'hh:mm:ss a';
 var TIME_FORMAT_MS = ':mm:ss';
-var TIME_FORMAT_HM = 'hh:mm'; // This hook contains all the logic needed to handle user input
+var TIME_FORMAT_HM = 'HH:mm'; // This hook contains all the logic needed to handle user input
 // and the editing mode for the TimeControl component.
 // TODO: as soon as we find a nice way to test hooks we can test all
 // this logic without any UI interaction directly in our unit tests.
@@ -66,9 +69,14 @@ function useDisplayValue(time, editor, onChange) {
   }, [period, editor]);
 
   var reconcileShadowValue = function reconcileShadowValue() {
-    if (time && (0, _dateFns.isValid)(new Date(time))) {
-      var twentyFourHourTime = (0, _dateFns.format)(new Date(time !== null && time !== void 0 ? time : '00:00'), TIME_FORMAT_24);
-      setShadowValue((0, _dateFns.format)(new Date(twentyFourHourTime), displayFormat));
+    var referenceDate = new Date();
+    var date = (0, _dateFns.parse)(time !== null && time !== void 0 ? time : '00:00:00', TIME_FORMAT_24, referenceDate);
+
+    if (time && (0, _dateFns.isValid)(date)) {
+      setShadowValue((0, _dateFns.format)(date, displayFormat));
+    } else {
+      var defaultDate = new Date(referenceDate.getFullYear(), referenceDate.getMonth(), referenceDate.getMinutes(), 0, 0, 0);
+      setShadowValue((0, _dateFns.format)(defaultDate, displayFormat));
     }
   }; // If we do not have an initial value then we use the current time (when editing
   // hh:mm:ss) or always 00:00 when editing mm:ss. We override default behaviour of TimePicker.
@@ -111,9 +119,9 @@ function useDisplayValue(time, editor, onChange) {
       return;
     }
 
-    var date = new Date(value);
+    var date = (0, _dateFns.parse)(value, displayFormat, new Date());
 
-    if ((0, _dateFns.isValid)(date)) {
+    if ((0, _dateFns.isValid)(date) && isStringCorrectFormat(value, displayFormat)) {
       setErrors(undefined);
       onChange((0, _dateFns.format)(date, TIME_FORMAT_24)); // Editing the value from AM to PM (or vice-versa) causes the default
       // period in the TimePicker to change (we do not want to always have 24h if user
@@ -140,7 +148,7 @@ function useDisplayValue(time, editor, onChange) {
       setErrors(undefined);
       onChange(value);
     }
-  }; // Display value is (rougly...) the shadow value when editing
+  }; // Display value is (roughly...) the shadow value when editing
   // or the input value formatted according to the `period`.
   // I18N: note that for a truly internationalized control the 12 format
   // is not always `TIME_FORMAT_12` because different countries (Japan, for example)
@@ -152,7 +160,7 @@ function useDisplayValue(time, editor, onChange) {
       return shadowValue;
     }
 
-    var date = new Date(time);
+    var date = (0, _dateFns.parse)(time, displayFormat, Date.now());
     return (0, _dateFns.isValid)(date) ? (0, _dateFns.format)(date, displayFormat) : ''; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [time, shadowValue, errors, isEditing, displayFormat]);
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "td-stylekit",
-  "version": "28.30.1",
+  "version": "28.30.3",
   "main": "dist/es/index.js",
   "module": "dist/es/index.js",
   "types": "dist/es/index.d.ts",