react-better-html 1.1.228 → 1.1.230

package/dist/index.d.mts

@@ -139,6 +139,7 @@ type InputFieldProps = {
     holderRef?: React.ForwardedRef<HTMLDivElement>;
 } & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
 type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
+type InputFieldDateTimeExcludeProps = Pick<InputFieldProps, "min" | "max" | "minLength" | "maxLength">;
 type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
@@ -153,7 +154,9 @@ type InputFieldComponentType = {
         minDate?: Date;
         maxDate?: Date;
     }>) => React.ReactElement;
-    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
+    dateTime: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps> & {
+        hoursToRender?: number[];
+        minutesToRender?: number[];
         minDate?: Date;
         maxDate?: Date;
         /** @default today */
@@ -161,7 +164,14 @@ type InputFieldComponentType = {
         /** @default "00:00" */
         defaultTimeAfterDatePick?: `${number}:${number}`;
     }>) => React.ReactElement;
-    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    time: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps>> & {
+        hoursToRender?: number[];
+        minutesToRender?: number[];
+        /** @default 00:00 */
+        minTime?: string;
+        /** @default 23:59 */
+        maxTime?: string;
+    }) => React.ReactElement;
     color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
@@ -411,6 +421,7 @@ type ImageComponent = {
         /** @default 40 */
         size?: number;
         letters?: string;
+        letterColor?: string;
         backgroundColor?: string;
     }>) => React.ReactElement;
 };

package/dist/index.d.ts

@@ -139,6 +139,7 @@ type InputFieldProps = {
     holderRef?: React.ForwardedRef<HTMLDivElement>;
 } & OmitProps<React.ComponentProps<"input">, "style" | "ref" | "prefix"> & ComponentStyle & ComponentHoverStyle;
 type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
+type InputFieldDateTimeExcludeProps = Pick<InputFieldProps, "min" | "max" | "minLength" | "maxLength">;
 type InputFieldComponentType = {
     (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>): React.ReactElement;
     multiline: (props: ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>) => React.ReactElement;
@@ -153,7 +154,9 @@ type InputFieldComponentType = {
         minDate?: Date;
         maxDate?: Date;
     }>) => React.ReactElement;
-    dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
+    dateTime: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps> & {
+        hoursToRender?: number[];
+        minutesToRender?: number[];
         minDate?: Date;
         maxDate?: Date;
         /** @default today */
@@ -161,7 +164,14 @@ type InputFieldComponentType = {
         /** @default "00:00" */
         defaultTimeAfterDatePick?: `${number}:${number}`;
     }>) => React.ReactElement;
-    time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
+    time: (props: ComponentPropWithRef<HTMLInputElement, OmitProps<InputFieldProps, keyof InputFieldDateTimeExcludeProps>> & {
+        hoursToRender?: number[];
+        minutesToRender?: number[];
+        /** @default 00:00 */
+        minTime?: string;
+        /** @default 23:59 */
+        maxTime?: string;
+    }) => React.ReactElement;
     color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
@@ -411,6 +421,7 @@ type ImageComponent = {
         /** @default 40 */
         size?: number;
         letters?: string;
+        letterColor?: string;
         backgroundColor?: string;
     }>) => React.ReactElement;
 };

package/dist/index.js

@@ -1474,7 +1474,7 @@ var Image = (0, import_react4.forwardRef)(function Image2({ name, src, ...props
     }
   );
 });
-Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size = 40, letters, backgroundColor, ...props }, ref) {
+Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size = 40, letters, letterColor, backgroundColor, ...props }, ref) {
   const theme2 = (0, import_react_better_core4.useTheme)();
   return letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Div_default.row,
@@ -1488,7 +1488,7 @@ Image.profileImage = (0, import_react4.forwardRef)(function ProfileImage({ size
       ...props,
       width: size,
       height: size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, children: letters.toUpperCase().slice(0, 2) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Text_default, { fontSize: size / 2.5, fontWeight: 700, color: letterColor ?? theme2.colors.textPrimary, children: letters.toUpperCase().slice(0, 2) })
     }
   ) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Image,
@@ -2728,25 +2728,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 = (0, import_react12.useCallback)(() => {
     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 = (0, import_react12.useCallback)(() => {
     setIsPaused(true);
@@ -2763,13 +2769,16 @@ function Alert2({ alert }) {
   const onClickAlertModalDone = (0, import_react12.useCallback)(() => {
     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 = (0, import_react12.useMemo)(
     () => ({
@@ -2863,7 +2872,7 @@ function Alert2({ alert }) {
           ),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
             /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { fontSize: 18, fontWeight: 700, children: alertTitle }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
+            alert.message && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Text_default, { color: theme2.colors.textSecondary, children: alert.message })
           ] }),
           pluginConfig.withCloseButton && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Button_default.icon, { icon: "XMark", alignSelf: "flex-start", onClick: onClickCloseAlert })
         ] }),
@@ -3242,6 +3251,18 @@ var decryptString = (text) => {
   });
   return decrypted.toString(import_crypto_js.default.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() {
@@ -4789,13 +4810,29 @@ InputFieldComponent.date = (0, import_react21.forwardRef)(function Date2({ minDa
     }
   );
 });
-InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
+InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime({
+  hoursToRender,
+  minutesToRender,
+  minDate,
+  maxDate,
+  defaultDateAfterTimePick,
+  defaultTimeAfterDatePick = "00:00",
+  ...props
+}, ref) {
   const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const selectedHourRef = (0, import_react21.useRef)(null);
   const selectedMinuteRef = (0, import_react21.useRef)(null);
   const isMobileIOS = isMobileDevice && getBrowser() === "safari";
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
+  const readyHours = (0, import_react21.useMemo)(
+    () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
+    [hoursToRender]
+  );
+  const readyMinutes = (0, import_react21.useMemo)(
+    () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
+    [minutesToRender]
+  );
   const onChange = (0, import_react21.useCallback)(
     (date) => {
       const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
@@ -4804,6 +4841,32 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
     },
     [internalValue, defaultTimeAfterDatePick, inputFieldProps.onChangeValue]
   );
+  const onBlur = (0, import_react21.useCallback)(
+    (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 = (0, import_react21.useCallback)(
     (hour) => {
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
@@ -4872,7 +4935,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                         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__ */ (0, import_jsx_runtime18.jsx)(
                             Div_default.row,
@@ -4906,7 +4969,7 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
                         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__ */ (0, import_jsx_runtime18.jsx)(
                             Div_default.row,
@@ -4939,17 +5002,56 @@ InputFieldComponent.dateTime = (0, import_react21.forwardRef)(function DateTime(
       holderRef,
       ref,
       ...props,
-      ...inputFieldProps
+      ...inputFieldProps,
+      onBlur
     }
   );
 });
-InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...props }, ref) {
+InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ hoursToRender, minutesToRender, minTime, maxTime, ...props }, ref) {
   const theme2 = (0, import_react_better_core19.useTheme)();
   const holderRef = (0, import_react21.useRef)(null);
   const selectedHourRef = (0, import_react21.useRef)(null);
   const selectedMinuteRef = (0, import_react21.useRef)(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 = (0, import_react21.useMemo)(
+    () => hoursToRender?.filter((hour) => hour >= 0 && hour <= 23) ?? hours,
+    [hoursToRender]
+  );
+  const readyMinutes = (0, import_react21.useMemo)(
+    () => minutesToRender?.filter((hour) => hour >= 0 && hour <= 59) ?? minutes,
+    [minutesToRender]
+  );
+  const onBlur = (0, import_react21.useCallback)(
+    (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 = (0, import_react21.useCallback)(
     (hour) => {
       const value = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
@@ -5002,8 +5104,9 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
                 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__ */ (0, import_jsx_runtime18.jsx)(
                     Div_default.row,
                     {
@@ -5012,10 +5115,11 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
                       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__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: hour.toString().padStart(2, "0") })
                     },
@@ -5032,8 +5136,9 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
                 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__ */ (0, import_jsx_runtime18.jsx)(
                     Div_default.row,
                     {
@@ -5042,10 +5147,11 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
                       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__ */ (0, import_jsx_runtime18.jsx)(Text_default, { textAlign: "center", children: minute.toString().padStart(2, "0") })
                     },
@@ -5061,7 +5167,8 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
       ref,
       ...props,
       ...inputFieldProps,
-      minWidth: buttonWidth * 2 + 2
+      minWidth: buttonWidth * 2 + 2,
+      onBlur
     }
   );
 });