@commercetools-uikit/time-input 16.0.0 → 16.1.0

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

@@ -52,112 +52,87 @@ var _styled__default = /*#__PURE__*/_interopDefault(_styled);
 const getClearSectionStyles = () => {
   return /*#__PURE__*/react.css("align-items:center;box-sizing:border-box;display:flex;margin:", designSystem.designTokens.spacing10, ";cursor:pointer;& svg *:not([fill='none']){fill:", designSystem.designTokens.iconColorForDatetimeInputIcon, ";}&:hover svg *{fill:", designSystem.designTokens.iconColorForDatetimeInputIconWhenHovered, ";}" + ("" ), "" );
 };
-
 const getClockIconContainerColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.borderColorForInput;
 };
-
 const getClockIconContainerFontColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.fontColorForInput;
 };
-
 const getClockIconContainerStyles = (props, isNewTheme) => {
   return [/*#__PURE__*/react.css("align-items:center;box-sizing:border-box;background:none;background-color:", props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : 'none', ";border:0;border-top-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-bottom-right-radius:", designSystem.designTokens.borderRadiusForInput, ";border-color:", getClockIconContainerColor(props), ";color:", getClockIconContainerFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";height:100%;display:flex;padding:", designSystem.designTokens.spacing10, ";outline:0;transition:color ", designSystem.designTokens.transitionStandard, ",border-color ", designSystem.designTokens.transitionStandard, ";&:hover:not(:disabled):not(:read-only),&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !isNewTheme && /*#__PURE__*/react.css("border-left:1px solid ", getClockIconContainerColor(props), ";" + ("" ), "" )];
 };
-
 const getInputContainerBorderColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.borderColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.borderColorForInputWhenError;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.borderColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.borderColorForInput;
 };
-
 const getInputContainerFontColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.fontColorForInputWhenDisabled;
   }
-
   if (props.hasError) {
     return designSystem.designTokens.fontColorForInputWhenError;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.fontColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.fontColorForInput;
 };
-
 const getInputContainerBackgroundColor = props => {
   if (props.isDisabled) {
     return designSystem.designTokens.backgroundColorForInputWhenDisabled;
   }
-
   if (props.isReadOnly) {
     return designSystem.designTokens.backgroundColorForInputWhenReadonly;
   }
-
   return designSystem.designTokens.backgroundColorForInput;
-}; // This styled component is only useful because it's referenced in the styles below
-
+};
 
+// This styled component is only useful because it's referenced in the styles below
 const StyledClockIconContainer = /*#__PURE__*/_styled__default["default"]("label", {
   target: "e1dwg5ng1"
 } )("" );
-
 const getInputContainerStyles = (props, isNewTheme) => {
   return [/*#__PURE__*/react.css("appearance:none;background-color:", props.isDisabled ? designSystem.designTokens.backgroundColorForInputWhenDisabled : designSystem.designTokens.backgroundColorForInput, ";background-color:", getInputContainerBackgroundColor(props), ";border:1px solid ", getInputContainerBorderColor(props), ";border-radius:", designSystem.designTokens.borderRadiusForInput, ";box-sizing:border-box;color:", getInputContainerFontColor(props), ";cursor:", props.isDisabled ? 'not-allowed' : 'default', ";width:100%;height:", designSystem.designTokens.heightForInput, ";align-items:center;display:flex;font-size:", designSystem.designTokens.fontSizeForInput, ";font-family:inherit;transition:border-color ", designSystem.designTokens.transitionStandard, ",box-shadow ", designSystem.designTokens.transitionStandard, ";svg{fill:", props.isReadOnly ? designSystem.designTokens.fontColorForInputWhenReadonly : 'inherit', ";}&:focus{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), !props.isDisabled && !props.isReadOnly && /*#__PURE__*/react.css("&:hover{background-color:", designSystem.designTokens.backgroundColorForInputWhenHovered, ";}&:focus-within{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, " ", designSystem.designTokens.borderColorForInputWhenFocused, ";&:hover{background-color:", designSystem.designTokens.colorSurface, ";}}" + ("" ), "" ), !isNewTheme && !props.isDisabled && !props.isReadOnly && /*#__PURE__*/react.css(":hover:not(:disabled):not(:read-only){border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}&:hover,&:hover ", StyledClockIconContainer, ",&:focus-within ", StyledClockIconContainer, "{border-color:", designSystem.designTokens.borderColorForInputWhenFocused, ";}" + ("" ), "" ), isNewTheme && props.hasError && /*#__PURE__*/react.css("box-shadow:", designSystem.designTokens.boxShadowForDatetimeInputWhenHovered, ";" + ("" ), "" )];
 };
-
 var _ref = {
   name: "v9rb4r",
   styles: "border:none;box-shadow:none;background:none;&,&:focus,&:focus:not(:read-only){box-shadow:none;}&:focus,&:hover{background-color:transparent!important;}"
 } ;
-
 const getTimeInputStyles = props => {
   const baseStyles = [inputUtils.getInputStyles(props), _ref];
   return baseStyles;
 };
-
 const StyledInputContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1dwg5ng0"
 } )("" );
 
 function ownKeys$1(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context = ownKeys$1(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context2 = ownKeys$1(Object(source))).call(_context2, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const ClearSection = props => {
   return jsxRuntime.jsx(AccessibleButton__default["default"], {
@@ -174,8 +149,7 @@ ClearSection.propTypes = {};
 ClearSection.displayName = 'ClearSection';
 const TimeInputBody = /*#__PURE__*/react$1.forwardRef((props, ref) => {
   const _useTheme = designSystem.useTheme(),
-        isNewTheme = _useTheme.isNewTheme;
-
+    isNewTheme = _useTheme.isNewTheme;
   return jsxRuntime.jsx(Inline__default["default"], {
     alignItems: "center",
     children: jsxRuntime.jsxs(StyledInputContainer, {
@@ -229,55 +203,43 @@ var messages = reactIntl.defineMessages({
 });
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
 const sequentialId = utils.createSequentialId('time-input-');
-
 const leftPad = function (value) {
   var _context;
-
   let length = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
   return _padStartInstanceProperty__default["default"](_context = String(value)).call(_context, length, '0');
 };
-
 const format24hr = _ref => {
   var _context2, _context3, _context4, _context5;
-
   let hours = _ref.hours,
-      minutes = _ref.minutes,
-      seconds = _ref.seconds,
-      milliseconds = _ref.milliseconds;
-
+    minutes = _ref.minutes,
+    seconds = _ref.seconds,
+    milliseconds = _ref.milliseconds;
   const base = _concatInstanceProperty__default["default"](_context2 = "".concat(leftPad(hours), ":")).call(_context2, leftPad(minutes));
-
   if (seconds === 0 && milliseconds === 0) return base;
-  if (milliseconds === 0) return _concatInstanceProperty__default["default"](_context3 = "".concat(base, ":")).call(_context3, leftPad(seconds)); // string representation of a time without timezone in ISO 8601 format
-
+  if (milliseconds === 0) return _concatInstanceProperty__default["default"](_context3 = "".concat(base, ":")).call(_context3, leftPad(seconds));
+  // string representation of a time without timezone in ISO 8601 format
   return _concatInstanceProperty__default["default"](_context4 = _concatInstanceProperty__default["default"](_context5 = "".concat(base, ":")).call(_context5, leftPad(seconds), ".")).call(_context4, leftPad(milliseconds, 3));
 };
+const hasMilliseconds = parsedTime => parsedTime.milliseconds !== 0;
 
-const hasMilliseconds = parsedTime => parsedTime.milliseconds !== 0; // Calling `eventTarget.dispatchEvent` does not natively work in React.
+// 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.
-
-
 const dispatchReactChangeEvent = (node, value) => {
   var _Object$getOwnPropert;
-
   const 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
   }));
 };
-
 const TimeInput = props => {
   const id = hooks.useFieldId(props.id, sequentialId);
   const intl = reactIntl.useIntl();
   const element = react$1.useRef(null);
   const onChange = props.onChange;
-
   if (!props.isReadOnly) ;
-
   const onBlur = props.onBlur;
   const handleBlur = react$1.useCallback(event => {
     const rawValue = event.target.value;
@@ -289,20 +251,20 @@ const TimeInput = props => {
     if (element.current) {
       dispatchReactChangeEvent(element.current, '');
     }
-
     onChange === null || onChange === void 0 ? void 0 : onChange({
       target: {
         value: ''
       }
     });
-  }, [onChange]); // if locale has changed trigger a new change event
+  }, [onChange]);
 
+  // if locale has changed trigger a new change event
   react$1.useEffect(() => {
     if (element.current) {
       dispatchReactChangeEvent(element.current, props.value);
-    } // Only subscribe this effect to `intl.locale` changes.
+    }
+    // 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,
@@ -328,32 +290,34 @@ const TimeInput = props => {
     }))
   });
 };
-
 TimeInput.propTypes = {};
-TimeInput.displayName = 'TimeInput'; // Takes any input like 15:10, 3 AM, 3AM, 3:15AM, 3:5AM and turns it
-// into a 24h format (with seconds and milliseconds if present)
+TimeInput.displayName = 'TimeInput';
 
+// Takes any input like 15:10, 3 AM, 3AM, 3:15AM, 3:5AM and turns it
+// into a 24h format (with seconds and milliseconds if present)
 TimeInput.to24h = time => {
   const parsedTime = utils.parseTime(time);
   return parsedTime ? format24hr(parsedTime) : '';
 };
-
 TimeInput.defaultProps = {
   horizontalConstraint: 'scale'
-}; // Converts any value to either a formatted value or an empty string
+};
+
+// Converts any value to either a formatted value or an empty string
 // The resulting format might use 12h or 24h, unless the time contains
 // milliseconds. If milliseconds are contained, the
 // the 24h format is returned.
 //
 // Returns time in a format suitable for the locale.
-
 TimeInput.toLocaleTime = (time, locale) => {
   const parsedTime = utils.parseTime(time);
   if (!parsedTime) return '';
-  const timeIn24hFormat = format24hr(parsedTime); // return the 24h format, as the time has high precision
+  const timeIn24hFormat = format24hr(parsedTime);
 
-  if (hasMilliseconds(parsedTime)) return timeIn24hFormat; // return the localized time (12h or 24h format)
+  // return the 24h format, as the time has high precision
+  if (hasMilliseconds(parsedTime)) return timeIn24hFormat;
 
+  // return the localized time (12h or 24h format)
   const date = new Date(1970, 0, 1, parsedTime.hours, parsedTime.minutes, parsedTime.seconds, parsedTime.milliseconds);
   const options = {
     hour: 'numeric',
@@ -364,11 +328,10 @@ TimeInput.toLocaleTime = (time, locale) => {
   const isValidDate = !isNaN(date.getTime());
   return isValidDate ? date.toLocaleTimeString(locale, options) : '';
 };
-
 var TimeInput$1 = TimeInput;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "16.0.0";
+var version = "16.1.0";
 
 exports["default"] = TimeInput$1;
 exports.version = version;