react-better-html 1.1.229 → 1.1.230

package/dist/index.mjs

@@ -3188,6 +3188,18 @@ var decryptString = (text) => {
   });
   return decrypted.toString(CryptoJS.enc.Utf8);
 };
+function findClosestNumber(numbers, target) {
+  let closest = numbers[0];
+  let minDistance = Math.abs(target - numbers[0]);
+  for (let index = 1; index < numbers.length; index++) {
+    const distance = Math.abs(target - numbers[index]);
+    if (distance < minDistance || distance === minDistance && numbers[index] < closest) {
+      closest = numbers[index];
+      minDistance = distance;
+    }
+  }
+  return closest;
+}
 
 // src/utils/localStorage.ts
 function generateLocalStorage() {
@@ -4749,13 +4761,29 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
     }
   );
 });
-InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
+InputFieldComponent.dateTime = forwardRef11(function DateTime({
+  hoursToRender,
+  minutesToRender,
+  minDate,
+  maxDate,
+  defaultDateAfterTimePick,
+  defaultTimeAfterDatePick = "00:00",
+  ...props
+}, ref) {
   const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
   const selectedMinuteRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const readyHours = useMemo6(
+    () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
+    [hoursToRender]
+  );
+  const readyMinutes = useMemo6(
+    () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
+    [minutesToRender]
+  );
   const onChange = useCallback10(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
@@ -4764,6 +4792,32 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
     },
     [internalValue, defaultTimeAfterDatePick, inputFieldProps.onChangeValue]
   );
+  const onBlur = useCallback10(
+    (event) => {
+      if (hoursToRender || minutesToRender) {
+        const value = event.target.value;
+        const hours2 = parseInt(value.split(":")[0] || "0");
+        const minutes2 = parseInt(value.split(":")[1] || "0");
+        const readyHour = readyHours.includes(hours2) ? hours2 : findClosestNumber(readyHours, hours2);
+        const readyMinute = readyMinutes.includes(minutes2) ? minutes2 : findClosestNumber(readyMinutes, minutes2);
+        const newTime = `${readyHour.toString().padStart(2, "0")}:${readyMinute.toString().padStart(2, "0")}`;
+        const today = defaultDateAfterTimePick ?? `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().toString().padStart(2, "0")}`;
+        const newValue = `${(internalValue.trim() || today)?.toString().split("T")[0]}T${newTime}`;
+        inputFieldProps.onChangeValue?.(newValue);
+      }
+      inputFieldProps.onBlur?.(event);
+    },
+    [
+      defaultDateAfterTimePick,
+      internalValue,
+      hoursToRender,
+      minutesToRender,
+      readyHours,
+      readyMinutes,
+      inputFieldProps.onChangeValue,
+      inputFieldProps.onBlur
+    ]
+  );
   const onClickHour = useCallback10(
     (hour) => {
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
@@ -4832,7 +4886,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
                         tabIndex: -1,
-                        children: hours.map((hour) => {
+                        children: readyHours.map((hour) => {
                           const isSelected = hour.toString() === valueHour;
                           return /* @__PURE__ */ jsx17(
                             Div_default.row,
@@ -4866,7 +4920,7 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
                         height: `calc(100% - ${16 + theme2.styles.gap / 2}px)`,
                         overflowY: "auto",
                         tabIndex: -1,
-                        children: minutes.map((minute) => {
+                        children: readyMinutes.map((minute) => {
                           const isSelected = minute.toString() === valueMinute;
                           return /* @__PURE__ */ jsx17(
                             Div_default.row,
@@ -4899,17 +4953,56 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps
+      ...inputFieldProps,
+      onBlur
     }
   );
 });
-InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
+InputFieldComponent.time = forwardRef11(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...props }, ref) {
   const theme2 = useTheme19();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
   const selectedMinuteRef = useRef5(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
+  const minHours = minTime ? parseInt(minTime.split(":")[0]) : void 0;
+  const minMinutes = minTime ? parseInt(minTime.split(":")[1]) : void 0;
+  const maxHours = maxTime ? parseInt(maxTime.split(":")[0]) : void 0;
+  const maxMinutes = maxTime ? parseInt(maxTime.split(":")[1]) : void 0;
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const readyHours = useMemo6(
+    () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
+    [hoursToRender]
+  );
+  const readyMinutes = useMemo6(
+    () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
+    [minutesToRender]
+  );
+  const onBlur = useCallback10(
+    (event) => {
+      if (!!minHours || !!maxHours || !!minMinutes || !!maxMinutes || hoursToRender || minutesToRender) {
+        const value = event.target.value;
+        const hours2 = parseInt(value.split(":")[0] || "0");
+        const minutes2 = parseInt(value.split(":")[1] || "0");
+        const readyHour = readyHours.includes(hours2) ? hours2 : findClosestNumber(readyHours, hours2);
+        const readyMinute = readyMinutes.includes(minutes2) ? minutes2 : findClosestNumber(readyMinutes, minutes2);
+        const newValue = `${(minHours && readyHour < minHours ? minHours : maxHours && readyHour > maxHours ? maxHours : readyHour).toString().padStart(2, "0")}:${(minMinutes && readyMinute < minMinutes ? minMinutes : maxHours && readyMinute > maxHours ? maxHours : readyMinute).toString().padStart(2, "0")}`;
+        inputFieldProps.onChangeValue?.(newValue);
+      }
+      inputFieldProps.onBlur?.(event);
+    },
+    [
+      minHours,
+      maxHours,
+      minMinutes,
+      maxMinutes,
+      hoursToRender,
+      minutesToRender,
+      readyHours,
+      readyMinutes,
+      inputFieldProps.onChangeValue,
+      inputFieldProps.onBlur
+    ]
+  );
   const onClickHour = useCallback10(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
@@ -4962,8 +5055,9 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
                 height: "100%",
                 overflowY: "auto",
                 tabIndex: -1,
-                children: hours.map((hour) => {
+                children: readyHours.map((hour) => {
                   const isSelected = hour.toString() === valueHour;
+                  const isDisabled = minHours && hour < minHours || maxHours && hour > maxHours;
                   return /* @__PURE__ */ jsx17(
                     Div_default.row,
                     {
@@ -4972,10 +5066,11 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
                       color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
                       backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
                       filterHover: "brightness(0.9)",
-                      cursor: "pointer",
+                      cursor: isDisabled ? "not-allowed" : "pointer",
                       padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      opacity: isDisabled ? 0.6 : void 0,
                       value: hour,
-                      onClickWithValue: onClickHour,
+                      onClickWithValue: !isDisabled ? onClickHour : void 0,
                       ref: isSelected ? selectedHourRef : void 0,
                       children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                     },
@@ -4992,8 +5087,9 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
                 height: "100%",
                 overflowY: "auto",
                 tabIndex: -1,
-                children: minutes.map((minute) => {
+                children: readyMinutes.map((minute) => {
                   const isSelected = minute.toString() === valueMinute;
+                  const isDisabled = minMinutes && minute < minMinutes || maxMinutes && minute > maxMinutes;
                   return /* @__PURE__ */ jsx17(
                     Div_default.row,
                     {
@@ -5002,10 +5098,11 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
                       color: isSelected ? theme2.colors.base : theme2.colors.textPrimary,
                       backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
                       filterHover: "brightness(0.9)",
-                      cursor: "pointer",
+                      cursor: isDisabled ? "not-allowed" : "pointer",
                       padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+                      opacity: isDisabled ? 0.6 : void 0,
                       value: minute,
-                      onClickWithValue: onClickMinute,
+                      onClickWithValue: !isDisabled ? onClickMinute : void 0,
                       ref: isSelected ? selectedMinuteRef : void 0,
                       children: /* @__PURE__ */ jsx17(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                     },
@@ -5021,7 +5118,8 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
       ref,
       ...props,
       ...inputFieldProps,
-      minWidth: buttonWidth * 2 + 2
+      minWidth: buttonWidth * 2 + 2,
+      onBlur
     }
   );
 });