@commercetools-uikit/time-input 14.0.3 → 14.0.4

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

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 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');
@@ -34,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);
@@ -275,17 +274,24 @@ 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 element = react$1.useRef(null); // Keep internal state to allow clearing the value manually (`onClear`).
-
-  var _useState = react$1.useState(props.value),
-      _useState2 = _slicedToArray(_useState, 2),
-      controlledValue = _useState2[0],
-      setControlledValue = _useState2[1];
+  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;
@@ -295,7 +301,6 @@ var TimeInput = function TimeInput(props) {
       onChange = props.onChange;
   var handleChange = react$1.useCallback(function (event) {
     var rawValue = event.target.value;
-    setControlledValue(rawValue);
     var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
     event.target.value = formattedValue;
     onChange === null || onChange === void 0 ? void 0 : onChange(event);
@@ -307,16 +312,17 @@ var TimeInput = function TimeInput(props) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [intl.locale, onBlur]);
   var handleClear = react$1.useCallback(function () {
-    var _element$current;
-
-    setControlledValue('');
-    (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.dispatchEvent(new Event('change'));
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, '');
+    }
   }, []); // if locale has changed trigger a new change event
 
   react$1.useEffect(function () {
-    var _element$current2;
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, props.value);
+    } // Only subscribe this effect to `intl.locale` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.dispatchEvent(new Event('change'));
   }, [intl.locale]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
@@ -325,7 +331,7 @@ var TimeInput = function TimeInput(props) {
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
-      value: controlledValue,
+      value: props.value,
       onChange: handleChange,
       onBlur: handleBlur,
       onFocus: props.onFocus,
@@ -398,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.3";
+var version = "14.0.4";
 
 exports["default"] = TimeInput$1;
 exports.version = version;

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

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
 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 +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);
@@ -256,17 +255,24 @@ 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 element = react$1.useRef(null); // Keep internal state to allow clearing the value manually (`onClear`).
-
-  var _useState = react$1.useState(props.value),
-      _useState2 = _slicedToArray(_useState, 2),
-      controlledValue = _useState2[0],
-      setControlledValue = _useState2[1];
+  var element = react$1.useRef(null);
 
   if (!props.isReadOnly) ;
 
@@ -274,7 +280,6 @@ var TimeInput = function TimeInput(props) {
       onChange = props.onChange;
   var handleChange = react$1.useCallback(function (event) {
     var rawValue = event.target.value;
-    setControlledValue(rawValue);
     var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
     event.target.value = formattedValue;
     onChange === null || onChange === void 0 ? void 0 : onChange(event);
@@ -286,16 +291,17 @@ var TimeInput = function TimeInput(props) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [intl.locale, onBlur]);
   var handleClear = react$1.useCallback(function () {
-    var _element$current;
-
-    setControlledValue('');
-    (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.dispatchEvent(new Event('change'));
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, '');
+    }
   }, []); // if locale has changed trigger a new change event
 
   react$1.useEffect(function () {
-    var _element$current2;
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, props.value);
+    } // Only subscribe this effect to `intl.locale` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.dispatchEvent(new Event('change'));
   }, [intl.locale]);
   return jsxRuntime.jsx(Constraints__default["default"].Horizontal, {
     max: props.horizontalConstraint,
@@ -304,7 +310,7 @@ var TimeInput = function TimeInput(props) {
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
-      value: controlledValue,
+      value: props.value,
       onChange: handleChange,
       onBlur: handleBlur,
       onFocus: props.onFocus,
@@ -361,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.3";
+var version = "14.0.4";
 
 exports["default"] = TimeInput$1;
 exports.version = version;

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

@@ -1,17 +1,16 @@
 import _defineProperty from '@babel/runtime-corejs3/helpers/esm/defineProperty';
-import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
 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 { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
+import { forwardRef, useRef, useCallback, useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import Constraints from '@commercetools-uikit/constraints';
 import { filterDataAttributes, createSequentialId, warning, parseTime } from '@commercetools-uikit/utils';
@@ -253,17 +252,24 @@ 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 element = useRef(null); // Keep internal state to allow clearing the value manually (`onClear`).
-
-  var _useState = useState(props.value),
-      _useState2 = _slicedToArray(_useState, 2),
-      controlledValue = _useState2[0],
-      setControlledValue = _useState2[1];
+  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;
@@ -273,7 +279,6 @@ var TimeInput = function TimeInput(props) {
       onChange = props.onChange;
   var handleChange = useCallback(function (event) {
     var rawValue = event.target.value;
-    setControlledValue(rawValue);
     var formattedValue = TimeInput.toLocaleTime(rawValue, intl.locale);
     event.target.value = formattedValue;
     onChange === null || onChange === void 0 ? void 0 : onChange(event);
@@ -285,16 +290,17 @@ var TimeInput = function TimeInput(props) {
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
   }, [intl.locale, onBlur]);
   var handleClear = useCallback(function () {
-    var _element$current;
-
-    setControlledValue('');
-    (_element$current = element.current) === null || _element$current === void 0 ? void 0 : _element$current.dispatchEvent(new Event('change'));
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, '');
+    }
   }, []); // if locale has changed trigger a new change event
 
   useEffect(function () {
-    var _element$current2;
+    if (element.current) {
+      dispatchReactChangeEvent(element.current, props.value);
+    } // Only subscribe this effect to `intl.locale` changes.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
 
-    (_element$current2 = element.current) === null || _element$current2 === void 0 ? void 0 : _element$current2.dispatchEvent(new Event('change'));
   }, [intl.locale]);
   return jsx(Constraints.Horizontal, {
     max: props.horizontalConstraint,
@@ -303,7 +309,7 @@ var TimeInput = function TimeInput(props) {
       id: id,
       name: props.name,
       autoComplete: props.autoComplete,
-      value: controlledValue,
+      value: props.value,
       onChange: handleChange,
       onBlur: handleBlur,
       onFocus: props.onFocus,
@@ -376,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.3";
+var version = "14.0.4";
 
 export { TimeInput$1 as default, version };

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.3",
+  "version": "14.0.4",
   "bugs": "https://github.com/commercetools/ui-kit/issues",
   "repository": {
     "type": "git",