@bigbinary/neetoui 6.5.8 → 6.5.9

package/dist/cjs/index.js

@@ -5794,6 +5794,21 @@ var HoverIcon = function HoverIcon(_ref) {
   }));
 };
 
+// A wrapper hook around useState, that updates a ref as well, useful when dealing directly with dom event listeners.
+var useRefState = function useRefState(val) {
+  // eslint-disable-next-line react/hook-use-state
+  var _useState = React$3.useState(val),
+    _useState2 = Typography._slicedToArray(_useState, 2),
+    value = _useState2[0],
+    _setValue = _useState2[1];
+  var valueRef = React$3.useRef(value);
+  var setValue = function setValue(val) {
+    valueRef.current = val;
+    _setValue(val);
+  };
+  return [value, valueRef, setValue];
+};
+
 var FORMAT = "HH:mm";
 var getFormattedTime = function getFormattedTime(value) {
   if (Typography.dayjs.isDayjs(value)) {
@@ -5815,8 +5830,39 @@ var toDayJs = function toDayJs(value) {
   });
   return Typography.dayjs(value, FORMAT);
 };
+var isValidTime = function isValidTime(minTime, maxTime, value) {
+  if (neetoCist.isPresent(minTime) && toDayJs(value).isBefore(toDayJs(minTime))) {
+    return false;
+  }
+  return !(neetoCist.isPresent(maxTime) && toDayJs(value).isAfter(toDayJs(maxTime)));
+};
+var isValidRange = function isValidRange(minTime, maxTime, value) {
+  return value.every(function (item) {
+    return isValid(minTime, maxTime, item);
+  });
+};
+var isValid = function isValid(minTime, maxTime, value) {
+  return (Array.isArray(value) ? isValidRange : isValidTime)(minTime, maxTime, value);
+};
+var getValidTime = function getValidTime(minTime, maxTime, value) {
+  if (neetoCist.isPresent(minTime) && toDayJs(value).isBefore(toDayJs(minTime))) {
+    return minTime;
+  }
+  if (neetoCist.isPresent(maxTime) && toDayJs(value).isAfter(toDayJs(maxTime))) {
+    return maxTime;
+  }
+  return value;
+};
+var getValidRange = function getValidRange(minTime, maxTime, value) {
+  return value.map(function (item) {
+    return getValidTime(minTime, maxTime, item);
+  });
+};
+var getValid = function getValid(minTime, maxTime, value) {
+  return (Array.isArray(value) ? getValidRange : getValidTime)(minTime, maxTime, value);
+};
 
-var _excluded$f = ["type", "className", "label", "labelProps", "size", "nakedInput", "required", "value", "defaultValue", "onChange", "error", "onBlur"];
+var _excluded$f = ["type", "className", "label", "labelProps", "size", "nakedInput", "required", "value", "defaultValue", "onChange", "error", "onBlur", "minTime", "maxTime"];
 function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { Typography._defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 Typography.dayjs.extend(customParseFormat);
@@ -5850,11 +5896,15 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     error = _ref$error === void 0 ? "" : _ref$error,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? Typography.noop : _ref$onBlur,
+    minTime = _ref.minTime,
+    maxTime = _ref.maxTime,
     otherProps = Typography._objectWithoutProperties(_ref, _excluded$f);
-  var _useState = React$3.useState(null),
-    _useState2 = Typography._slicedToArray(_useState, 2),
-    value = _useState2[0],
-    setValue = _useState2[1];
+  var _useRefState = useRefState(null),
+    _useRefState2 = Typography._slicedToArray(_useRefState, 3),
+    value = _useRefState2[0],
+    valueRef = _useRefState2[1],
+    setValue = _useRefState2[2];
+  var componentRef = React$3.useRef(null);
   var id = TreeSelect.useId(otherProps.id);
   var errorId = "error_".concat(id);
   React$3.useEffect(function () {
@@ -5863,16 +5913,43 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
   }, [type, inputValue]);
   var handleChange = function handleChange(newValue) {
     setValue(newValue);
-    onChange(toDayJs(newValue), newValue);
+    if (isValid(minTime, maxTime, newValue)) {
+      onChange(toDayJs(newValue), newValue);
+    }
   };
-  var handleShouldCloseClock = function handleShouldCloseClock() {
-    onBlur(toDayJs(value), value);
+  var onBlurHandle = function onBlurHandle() {
+    var value = valueRef.current;
+    if (isValid(minTime, maxTime, value)) {
+      onBlur(toDayJs(value), value);
+    } else {
+      var validValue = getValid(minTime, maxTime, value);
+      setValue(validValue);
+      onChange(toDayJs(validValue), validValue);
+      onBlur(toDayJs(validValue), validValue);
+    }
     return true;
   };
+
+  // If you just make amPm select change, onBlurHandle is not triggering. A work around
+  React$3.useEffect(function () {
+    var _document$getElementB;
+    var amPmChange = function amPmChange() {
+      return setTimeout(onBlurHandle);
+    };
+    var selectElements = (_document$getElementB = document.getElementById(id)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.querySelectorAll("[name='amPm']");
+    selectElements === null || selectElements === void 0 || selectElements.forEach(function (element) {
+      return element.addEventListener("change", amPmChange);
+    });
+    return function () {
+      selectElements === null || selectElements === void 0 || selectElements.forEach(function (element) {
+        return element.removeEventListener("change", amPmChange);
+      });
+    };
+  }, [value]);
   var handleKeyDown = function handleKeyDown(_ref2) {
     var code = _ref2.code;
     if (code !== "Enter") return;
-    onBlur(toDayJs(value), value);
+    onBlurHandle();
   };
   var Component = timeComponents[type];
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -5890,8 +5967,9 @@ var TimePickerInput = /*#__PURE__*/React$3.forwardRef(function (_ref, ref) {
     format: "hh:mm a",
     hourPlaceholder: "HH",
     minutePlaceholder: "mm",
+    ref: componentRef,
     secondAriaLabel: "ss",
-    shouldCloseClock: handleShouldCloseClock,
+    shouldCloseClock: onBlurHandle,
     className: Typography.classnames("neeto-ui-time-picker", [className], {
       "neeto-ui-time-picker--small": size === "small",
       "neeto-ui-time-picker--medium": size === "medium",
@@ -5928,6 +6006,9 @@ var getAllowedTime = function getAllowedTime(date, time, minDateTime, maxDateTim
   }
   return newTime;
 };
+var getTime = function getTime(date) {
+  return date === null || date === void 0 ? void 0 : date.format(TIME_FORMAT);
+};
 
 function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { Typography._defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -6030,7 +6111,7 @@ var DateTimePicker = function DateTimePicker(_ref) {
     error: error,
     nakedInput: nakedInput,
     size: size
-  }, "error", !!error), "maxTime", (date === null || date === void 0 ? void 0 : date.isSame(maxDateTime, "day")) && (maxDateTime === null || maxDateTime === void 0 ? void 0 : maxDateTime.toDate())), "minTime", (date === null || date === void 0 ? void 0 : date.isSame(minDateTime, "day")) && (minDateTime === null || minDateTime === void 0 ? void 0 : minDateTime.toDate())), "ref", timeRef), "value", time), "onBlur", handleTimeBlur), "onChange", handleTimeChange), timePickerProps))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
+  }, "error", !!error), "maxTime", (date === null || date === void 0 ? void 0 : date.isSame(maxDateTime, "day")) && getTime(maxDateTime)), "minTime", (date === null || date === void 0 ? void 0 : date.isSame(minDateTime, "day")) && getTime(minDateTime)), "ref", timeRef), "value", time), "onBlur", handleTimeBlur), "onChange", handleTimeChange), timePickerProps))), !!error && /*#__PURE__*/React__default["default"].createElement("p", {
     className: "neeto-ui-input__error",
     "data-cy": "".concat(Typography.hyphenize(label), "-input-error"),
     id: errorId