react-better-html 1.1.228 → 1.1.230

package/dist/index.mjs

@@ -1403,7 +1403,7 @@ var Image = forwardRef3(function Image2({ name, src, ...props }, ref) {
     }
   );
 });
-Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
+Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...props }, ref) {
   const theme2 = useTheme4();
   return letters ? /* @__PURE__ */ jsx3(
     Div_default.row,
@@ -1417,7 +1417,7 @@ Image.profileImage = forwardRef3(function ProfileImage({ size = 40, letters, bac
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ jsx3(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ jsx3(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ jsx3(
     Image,
@@ -2665,25 +2665,31 @@ function Alert2({ alert }) {
         if (intervalRef.current) clearInterval(intervalRef.current);
         if (defaultAlertDisplay === "prominent") return;
         setIsRemoved(true);
-        setTimeout(() => {
-          alertControls2.removeAlert(alert.id);
-          if (!calledOnCloseRef.current) {
-            alert.onClose?.(alert);
-            calledOnCloseRef.current = true;
-          }
-        }, 0.2 * 1e3 - 10);
+        setTimeout(
+          () => {
+            alertControls2.removeAlert(alert.id);
+            if (!calledOnCloseRef.current) {
+              alert.onClose?.(alert);
+              calledOnCloseRef.current = true;
+            }
+          },
+          0.2 * 1e3 - 10
+        );
       }
     }, updateInterval);
   }, [alert, progress, defaultAlertDisplay]);
   const onClickCloseAlert = useCallback5(() => {
     setIsRemoved(true);
-    setTimeout(() => {
-      alertControls2.removeAlert(alert.id);
-      if (!calledOnCloseRef.current) {
-        alert.onClose?.(alert);
-        calledOnCloseRef.current = true;
-      }
-    }, 0.2 * 1e3 - 10);
+    setTimeout(
+      () => {
+        alertControls2.removeAlert(alert.id);
+        if (!calledOnCloseRef.current) {
+          alert.onClose?.(alert);
+          calledOnCloseRef.current = true;
+        }
+      },
+      0.2 * 1e3 - 10
+    );
   }, [alert]);
   const onMouseEnter = useCallback5(() => {
     setIsPaused(true);
@@ -2700,13 +2706,16 @@ function Alert2({ alert }) {
   const onClickAlertModalDone = useCallback5(() => {
     setIsRemoved(true);
     modalRef.current?.close();
-    setTimeout(() => {
-      alertControls2.removeAlert(alert.id);
-      if (!calledOnCloseRef.current) {
-        alert.onClose?.(alert);
-        calledOnCloseRef.current = true;
-      }
-    }, 0.2 * 1e3 - 10);
+    setTimeout(
+      () => {
+        alertControls2.removeAlert(alert.id);
+        if (!calledOnCloseRef.current) {
+          alert.onClose?.(alert);
+          calledOnCloseRef.current = true;
+        }
+      },
+      0.2 * 1e3 - 10
+    );
   }, [alert]);
   const alertData = useMemo2(
     () => ({
@@ -2800,7 +2809,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ jsxs7(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ jsx10(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
-            /* @__PURE__ */ jsx10(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
+            alert.message && /* @__PURE__ */ jsx10(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ jsx10(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -3179,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() {
@@ -4740,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}` : "";
@@ -4755,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"}`;
@@ -4823,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,
@@ -4857,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,
@@ -4890,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"}`;
@@ -4953,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,
                     {
@@ -4963,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") })
                     },
@@ -4983,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,
                     {
@@ -4993,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") })
                     },
@@ -5012,7 +5118,8 @@ InputFieldComponent.time = forwardRef11(function Time({ ...props }, ref) {
       ref,
       ...props,
       ...inputFieldProps,
-      minWidth: buttonWidth * 2 + 2
+      minWidth: buttonWidth * 2 + 2,
+      onBlur
     }
   );
 });