@commercetools-uikit/time-input 14.0.1 → 14.0.4

package/README.md

@@ -49,23 +49,15 @@ export default Example;
 | `name`                 | `string`                                                                                              |          |           | Used as HTML name of the input component.                                                      |
 | `autoComplete`         | `string`                                                                                              |          |           | Used as HTML autocomplete of the input component.                                              |
 | `value`                | `string`                                                                                              |          |           | Value of the input                                                                             |
-| `onChange`             | `Function`<br/>[See signature.](#signature-onChange)                                                  |    ✅    |           | Called with an event holding the new value.                                                    |
-| `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred&#xA;<br/>                                                         |
-| `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused&#xA;<br/>&#xA;Signature: `(event) => void`                        |
+| `onChange`             | `ChangeEventHandler`                                                                                  |          |           | Called with an event holding the new value.                                                    |
+| `onBlur`               | `FocusEventHandler`                                                                                   |          |           | Called when input is blurred                                                                   |
+| `onFocus`              | `FocusEventHandler`                                                                                   |          |           | Called when input is focused                                                                   |
 | `isAutofocussed`       | `boolean`                                                                                             |          |           | Focus the input on initial render                                                              |
 | `isDisabled`           | `boolean`                                                                                             |          |           | Indicates that the input cannot be modified (e.g not authorized, or changes currently saving). |
 | `placeholder`          | `string`                                                                                              |          |           | Placeholder text for the input                                                                 |
 | `hasError`             | `boolean`                                                                                             |          |           | Indicates if the input has invalid values                                                      |
 | `isReadOnly`           | `boolean`                                                                                             |          |           | Indicates that the field is displaying read-only content                                       |
 
-## Signatures
-
-### Signature `onChange`
-
-```ts
-(event: TEvent) => void
-```
-
 ## `value`
 
 The value after the field has been blurred is always either valid or an empty string. The input automatically formats the value on blur by calling `onChange` with the formatted value - or with an empty value in case the input was not a valid time.

package/dist/commercetools-uikit-time-input.cjs.dev.js

@@ -6,10 +6,10 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _pt = require('prop-types');
 var _padStartInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/pad-start');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
@@ -33,10 +33,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 var _pt__default = /*#__PURE__*/_interopDefault(_pt);
 var _padStartInstanceProperty__default = /*#__PURE__*/_interopDefault(_padStartInstanceProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
-var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
 var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
@@ -190,14 +190,14 @@ ClearSection.propTypes = process.env.NODE_ENV !== "production" ? {
   onClear: _pt__default["default"].func.isRequired
 } : {};
 ClearSection.displayName = 'ClearSection';
-
-var TimeInputBody = function TimeInputBody(props) {
+var TimeInputBody = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   var theme = react.useTheme();
   return jsxRuntime.jsx(Inline__default["default"], {
     alignItems: "center",
     children: jsxRuntime.jsxs(StyledInputContainer, {
       css: getInputContainerStyles(props, theme),
       children: [jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1({
+        ref: ref,
         css: getTimeInputStyles(props),
         id: props.id,
         name: props.name,
@@ -232,11 +232,7 @@ var TimeInputBody = function TimeInputBody(props) {
       })]
     })
   });
-};
-
-TimeInputBody.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClear: _pt__default["default"].func.isRequired
-} : {};
+});
 TimeInputBody.displayName = 'TimeInputBody';
 var TimeInputBody$1 = TimeInputBody;
 
@@ -278,56 +274,72 @@ var format24hr = function format24hr(_ref) {
 
 var hasMilliseconds = function hasMilliseconds(parsedTime) {
   return parsedTime.milliseconds !== 0;
+}; // Calling `eventTarget.dispatchEvent` does not natively work in React.
+// Instead, we need to grab the element value setter, set the value, and dispatch a change event.
+
+
+var dispatchReactChangeEvent = function dispatchReactChangeEvent(node, value) {
+  var _Object$getOwnPropert;
+
+  var setValue = (_Object$getOwnPropert = _Object$getOwnPropertyDescriptor__default["default"](node.constructor.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+  setValue === null || setValue === void 0 ? void 0 : setValue.call(node, value);
+  node.dispatchEvent(new Event('change', {
+    bubbles: true
+  }));
 };
 
 var TimeInput = function TimeInput(props) {
   var id = hooks.useFieldId(props.id, sequentialId);
   var intl = reactIntl.useIntl();
-  var prevLocale = hooks.usePrevious(intl.locale);
-  var name = props.name,
-      value = props.value,
-      onBlur = props.onBlur,
-      onChange = props.onChange;
-  var emitChange = react$1.useCallback(function (nextValue) {
-    var event = {
-      target: {
-        id: id,
-        name: name,
-        value: nextValue
-      }
-    };
-    onChange(event);
-  }, [id, name, onChange]);
-  var handleBlur = react$1.useCallback(function (event) {
-    // check formatting and reformat when necessary
-    var formattedTime = value && TimeInput.toLocaleTime(value, intl.locale);
-    if (formattedTime !== value) emitChange(formattedTime); // forward the onBlur call
-
-    if (onBlur) onBlur(event);
-  }, [intl.locale, value, onBlur, emitChange]);
-  var onClear = react$1.useCallback(function () {
-    return emitChange('');
-  }, [emitChange]); // if locale has changed
-
-  if (typeof prevLocale !== 'undefined' && prevLocale !== intl.locale) {
-    emitChange(TimeInput.toLocaleTime(value, intl.locale));
+  var element = react$1.useRef(null);
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? utils.warning(typeof props.onChange === 'function', 'TimeInput: `onChange` is required when input is not read only.') : void 0;
   }
 
+  var onBlur = props.onBlur,
+      onChange = props.onChange;
+  var handleChange = react$1.useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [intl.locale, onChange]);
+  var handleBlur = react$1.useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  }, [intl.locale, onBlur]);
+  var handleClear = react$1.useCallback(function () {
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, '');
+    }
+  }, []); // if locale has changed trigger a new change event
+
+  react$1.useEffect(function () {
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, props.value);
+    } // Only subscribe this effect to `intl.locale` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [intl.locale]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx(TimeInputBody$1, _objectSpread(_objectSpread({
+      ref: element,
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
       value: props.value,
-      onChange: props.onChange,
-      onFocus: props.onFocus,
+      onChange: handleChange,
       onBlur: handleBlur,
+      onFocus: props.onFocus,
       isAutofocussed: props.isAutofocussed,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
       isReadOnly: props.isReadOnly,
-      onClear: onClear,
+      onClear: handleClear,
       placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
     }, utils.filterDataAttributes(props)), {}, {
       /* ARIA */
@@ -345,7 +357,7 @@ TimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
   name: _pt__default["default"].string,
   autoComplete: _pt__default["default"].string,
   value: _pt__default["default"].string,
-  onChange: _pt__default["default"].func.isRequired,
+  onChange: _pt__default["default"].func,
   onBlur: _pt__default["default"].func,
   onFocus: _pt__default["default"].func,
   isAutofocussed: _pt__default["default"].bool,
@@ -392,7 +404,7 @@ TimeInput.toLocaleTime = function (time, locale) {
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "14.0.4";
 
 exports["default"] = TimeInput$1;
 exports.version = version;

package/dist/commercetools-uikit-time-input.cjs.prod.js

@@ -6,10 +6,10 @@ var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 require('prop-types');
 var _padStartInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/pad-start');
 var _concatInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/concat');
+var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
 var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
-var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
@@ -32,10 +32,10 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e };
 
 var _padStartInstanceProperty__default = /*#__PURE__*/_interopDefault(_padStartInstanceProperty);
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
+var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
 var _Object$keys__default = /*#__PURE__*/_interopDefault(_Object$keys);
 var _Object$getOwnPropertySymbols__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertySymbols);
 var _filterInstanceProperty__default = /*#__PURE__*/_interopDefault(_filterInstanceProperty);
-var _Object$getOwnPropertyDescriptor__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptor);
 var _forEachInstanceProperty__default = /*#__PURE__*/_interopDefault(_forEachInstanceProperty);
 var _Object$getOwnPropertyDescriptors__default = /*#__PURE__*/_interopDefault(_Object$getOwnPropertyDescriptors);
 var _Object$defineProperties__default = /*#__PURE__*/_interopDefault(_Object$defineProperties);
@@ -171,14 +171,14 @@ var ClearSection = function ClearSection(props) {
 };
 ClearSection.propTypes = {};
 ClearSection.displayName = 'ClearSection';
-
-var TimeInputBody = function TimeInputBody(props) {
+var TimeInputBody = /*#__PURE__*/react$1.forwardRef(function (props, ref) {
   var theme = react.useTheme();
   return jsxRuntime.jsx(Inline__default["default"], {
     alignItems: "center",
     children: jsxRuntime.jsxs(StyledInputContainer, {
       css: getInputContainerStyles(props, theme),
       children: [jsxRuntime.jsx("input", _objectSpread$1(_objectSpread$1({
+        ref: ref,
         css: getTimeInputStyles(props),
         id: props.id,
         name: props.name,
@@ -213,9 +213,7 @@ var TimeInputBody = function TimeInputBody(props) {
       })]
     })
   });
-};
-
-TimeInputBody.propTypes = {};
+});
 TimeInputBody.displayName = 'TimeInputBody';
 var TimeInputBody$1 = TimeInputBody;
 
@@ -257,56 +255,70 @@ var format24hr = function format24hr(_ref) {
 
 var hasMilliseconds = function hasMilliseconds(parsedTime) {
   return parsedTime.milliseconds !== 0;
+}; // Calling `eventTarget.dispatchEvent` does not natively work in React.
+// Instead, we need to grab the element value setter, set the value, and dispatch a change event.
+
+
+var dispatchReactChangeEvent = function dispatchReactChangeEvent(node, value) {
+  var _Object$getOwnPropert;
+
+  var setValue = (_Object$getOwnPropert = _Object$getOwnPropertyDescriptor__default["default"](node.constructor.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+  setValue === null || setValue === void 0 ? void 0 : setValue.call(node, value);
+  node.dispatchEvent(new Event('change', {
+    bubbles: true
+  }));
 };
 
 var TimeInput = function TimeInput(props) {
   var id = hooks.useFieldId(props.id, sequentialId);
   var intl = reactIntl.useIntl();
-  var prevLocale = hooks.usePrevious(intl.locale);
-  var name = props.name,
-      value = props.value,
-      onBlur = props.onBlur,
+  var element = react$1.useRef(null);
+
+  if (!props.isReadOnly) ;
+
+  var onBlur = props.onBlur,
       onChange = props.onChange;
-  var emitChange = react$1.useCallback(function (nextValue) {
-    var event = {
-      target: {
-        id: id,
-        name: name,
-        value: nextValue
-      }
-    };
-    onChange(event);
-  }, [id, name, onChange]);
+  var handleChange = react$1.useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [intl.locale, onChange]);
   var handleBlur = react$1.useCallback(function (event) {
-    // check formatting and reformat when necessary
-    var formattedTime = value && TimeInput.toLocaleTime(value, intl.locale);
-    if (formattedTime !== value) emitChange(formattedTime); // forward the onBlur call
-
-    if (onBlur) onBlur(event);
-  }, [intl.locale, value, onBlur, emitChange]);
-  var onClear = react$1.useCallback(function () {
-    return emitChange('');
-  }, [emitChange]); // if locale has changed
-
-  if (typeof prevLocale !== 'undefined' && prevLocale !== intl.locale) {
-    emitChange(TimeInput.toLocaleTime(value, intl.locale));
-  }
-
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  }, [intl.locale, onBlur]);
+  var handleClear = react$1.useCallback(function () {
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, '');
+    }
+  }, []); // if locale has changed trigger a new change event
+
+  react$1.useEffect(function () {
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, props.value);
+    } // Only subscribe this effect to `intl.locale` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [intl.locale]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
     children: jsxRuntime.jsx(TimeInputBody$1, _objectSpread(_objectSpread({
+      ref: element,
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
       value: props.value,
-      onChange: props.onChange,
-      onFocus: props.onFocus,
+      onChange: handleChange,
       onBlur: handleBlur,
+      onFocus: props.onFocus,
       isAutofocussed: props.isAutofocussed,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
       isReadOnly: props.isReadOnly,
-      onClear: onClear,
+      onClear: handleClear,
       placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
     }, utils.filterDataAttributes(props)), {}, {
       /* ARIA */
@@ -355,7 +367,7 @@ TimeInput.toLocaleTime = function (time, locale) {
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "14.0.4";
 
 exports["default"] = TimeInput$1;
 exports.version = version;

package/dist/commercetools-uikit-time-input.esm.js

@@ -2,19 +2,19 @@ import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
 import _pt from 'prop-types';
 import _padStartInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/pad-start';
 import _concatInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/concat';
+import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
 import _Object$keys from '@babel/runtime-corejs3/core-js-stable/object/keys';
 import _Object$getOwnPropertySymbols from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols';
 import _filterInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/filter';
-import _Object$getOwnPropertyDescriptor from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor';
 import _forEachInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/for-each';
 import _Object$getOwnPropertyDescriptors from '@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors';
 import _Object$defineProperties from '@babel/runtime-corejs3/core-js-stable/object/define-properties';
 import _Object$defineProperty from '@babel/runtime-corejs3/core-js-stable/object/define-property';
-import { useCallback } from 'react';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Constraints from '@commercetools-uikit/constraints';
-import { filterDataAttributes, createSequentialId, parseTime } from '@commercetools-uikit/utils';
-import { useFieldId, usePrevious } from '@commercetools-uikit/hooks';
+import { filterDataAttributes, createSequentialId, warning, parseTime } from '@commercetools-uikit/utils';
+import { useFieldId } from '@commercetools-uikit/hooks';
 import { css, useTheme } from '@emotion/react';
 import { ClockIcon, CloseIcon } from '@commercetools-uikit/icons';
 import Inline from '@commercetools-uikit/spacings-inline';
@@ -168,14 +168,14 @@ ClearSection.propTypes = process.env.NODE_ENV !== "production" ? {
   onClear: _pt.func.isRequired
 } : {};
 ClearSection.displayName = 'ClearSection';
-
-var TimeInputBody = function TimeInputBody(props) {
+var TimeInputBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var theme = useTheme();
   return jsx(Inline, {
     alignItems: "center",
     children: jsxs(StyledInputContainer, {
       css: getInputContainerStyles(props, theme),
       children: [jsx("input", _objectSpread$1(_objectSpread$1({
+        ref: ref,
         css: getTimeInputStyles(props),
         id: props.id,
         name: props.name,
@@ -210,11 +210,7 @@ var TimeInputBody = function TimeInputBody(props) {
       })]
     })
   });
-};
-
-TimeInputBody.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClear: _pt.func.isRequired
-} : {};
+});
 TimeInputBody.displayName = 'TimeInputBody';
 var TimeInputBody$1 = TimeInputBody;
 
@@ -256,56 +252,72 @@ var format24hr = function format24hr(_ref) {
 
 var hasMilliseconds = function hasMilliseconds(parsedTime) {
   return parsedTime.milliseconds !== 0;
+}; // Calling `eventTarget.dispatchEvent` does not natively work in React.
+// Instead, we need to grab the element value setter, set the value, and dispatch a change event.
+
+
+var dispatchReactChangeEvent = function dispatchReactChangeEvent(node, value) {
+  var _Object$getOwnPropert;
+
+  var setValue = (_Object$getOwnPropert = _Object$getOwnPropertyDescriptor(node.constructor.prototype, 'value')) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set;
+  setValue === null || setValue === void 0 ? void 0 : setValue.call(node, value);
+  node.dispatchEvent(new Event('change', {
+    bubbles: true
+  }));
 };
 
 var TimeInput = function TimeInput(props) {
   var id = useFieldId(props.id, sequentialId);
   var intl = useIntl();
-  var prevLocale = usePrevious(intl.locale);
-  var name = props.name,
-      value = props.value,
-      onBlur = props.onBlur,
-      onChange = props.onChange;
-  var emitChange = useCallback(function (nextValue) {
-    var event = {
-      target: {
-        id: id,
-        name: name,
-        value: nextValue
-      }
-    };
-    onChange(event);
-  }, [id, name, onChange]);
-  var handleBlur = useCallback(function (event) {
-    // check formatting and reformat when necessary
-    var formattedTime = value && TimeInput.toLocaleTime(value, intl.locale);
-    if (formattedTime !== value) emitChange(formattedTime); // forward the onBlur call
-
-    if (onBlur) onBlur(event);
-  }, [intl.locale, value, onBlur, emitChange]);
-  var onClear = useCallback(function () {
-    return emitChange('');
-  }, [emitChange]); // if locale has changed
-
-  if (typeof prevLocale !== 'undefined' && prevLocale !== intl.locale) {
-    emitChange(TimeInput.toLocaleTime(value, intl.locale));
+  var element = useRef(null);
+
+  if (!props.isReadOnly) {
+    process.env.NODE_ENV !== "production" ? warning(typeof props.onChange === 'function', 'TimeInput: `onChange` is required when input is not read only.') : void 0;
   }
 
+  var onBlur = props.onBlur,
+      onChange = props.onChange;
+  var handleChange = useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+  }, [intl.locale, onChange]);
+  var handleBlur = useCallback(function (event) {
+    var rawValue = event.target.value;
+    var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
+    event.target.value = formattedValue;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+  }, [intl.locale, onBlur]);
+  var handleClear = useCallback(function () {
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, '');
+    }
+  }, []); // if locale has changed trigger a new change event
+
+  useEffect(function () {
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, props.value);
+    } // Only subscribe this effect to `intl.locale` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [intl.locale]);
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
     children: jsx(TimeInputBody$1, _objectSpread(_objectSpread({
+      ref: element,
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
       value: props.value,
-      onChange: props.onChange,
-      onFocus: props.onFocus,
+      onChange: handleChange,
       onBlur: handleBlur,
+      onFocus: props.onFocus,
       isAutofocussed: props.isAutofocussed,
       isDisabled: props.isDisabled,
       hasError: props.hasError,
       isReadOnly: props.isReadOnly,
-      onClear: onClear,
+      onClear: handleClear,
       placeholder: typeof props.placeholder === 'string' ? props.placeholder : intl.formatMessage(messages.placeholder)
     }, filterDataAttributes(props)), {}, {
       /* ARIA */
@@ -323,7 +335,7 @@ TimeInput.propTypes = process.env.NODE_ENV !== "production" ? {
   name: _pt.string,
   autoComplete: _pt.string,
   value: _pt.string,
-  onChange: _pt.func.isRequired,
+  onChange: _pt.func,
   onBlur: _pt.func,
   onFocus: _pt.func,
   isAutofocussed: _pt.bool,
@@ -370,6 +382,6 @@ TimeInput.toLocaleTime = function (time, locale) {
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "14.0.1";
+var version = "14.0.4";
 
 export { TimeInput$1 as default, version };

package/dist/declarations/src/time-input-body.d.ts

@@ -1,8 +1,5 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
+import { type KeyboardEvent, type MouseEvent } from 'react';
 import type { TTimeInputProps } from './time-input';
-declare type TTimeInputBodyProps = TTimeInputProps & {
-    onClear: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
-};
 declare type TClearSectionProps = {
     isDisabled?: boolean;
     hasError?: boolean;
@@ -13,8 +10,7 @@ export declare const ClearSection: {
     (props: TClearSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-declare const TimeInputBody: {
-    (props: TTimeInputBodyProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TimeInputBody: import("react").ForwardRefExoticComponent<TTimeInputProps & {
+    onClear: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
+} & import("react").RefAttributes<HTMLInputElement>>;
 export default TimeInputBody;

package/dist/declarations/src/time-input.d.ts

@@ -1,11 +1,4 @@
-import { type FocusEventHandler } from 'react';
-declare type TEvent = {
-    target: {
-        id: string;
-        name?: string;
-        value: unknown;
-    };
-};
+import { type FocusEventHandler, type ChangeEventHandler } from 'react';
 export declare type TTimeInputProps = {
     id?: string;
     'aria-invalid'?: boolean;
@@ -14,9 +7,9 @@ export declare type TTimeInputProps = {
     name?: string;
     autoComplete?: string;
     value?: string;
-    onChange: (event: TEvent) => void;
-    onBlur?: FocusEventHandler;
-    onFocus?: FocusEventHandler;
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
     isAutofocussed?: boolean;
     isDisabled?: boolean;
     placeholder?: string;
@@ -30,6 +23,6 @@ declare const TimeInput: {
     defaultProps: {
         horizontalConstraint: string;
     };
-    toLocaleTime(time: string, locale: string): string;
+    toLocaleTime(time: string | undefined, locale: string): string;
 };
 export default TimeInput;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@commercetools-uikit/time-input",
   "description": "The TimeInput component allows the user to select a time.",
-  "version": "14.0.1",
+  "version": "14.0.4",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",
@@ -24,9 +24,9 @@
     "@commercetools-uikit/accessible-button": "14.0.1",
     "@commercetools-uikit/constraints": "14.0.1",
     "@commercetools-uikit/design-system": "14.0.0",
-    "@commercetools-uikit/hooks": "14.0.1",
+    "@commercetools-uikit/hooks": "14.0.3",
     "@commercetools-uikit/icons": "14.0.1",
-    "@commercetools-uikit/input-utils": "14.0.1",
+    "@commercetools-uikit/input-utils": "14.0.2",
     "@commercetools-uikit/spacings-inline": "14.0.1",
     "@commercetools-uikit/utils": "14.0.1",
     "@emotion/is-prop-valid": "1.1.2",