react-better-html 1.1.229 → 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;

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;

package/dist/index.js

@@ -3251,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() {
@@ -4798,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}` : "";
@@ -4813,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"}`;
@@ -4881,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,
@@ -4915,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,
@@ -4948,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"}`;
@@ -5011,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,
                     {
@@ -5021,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") })
                     },
@@ -5041,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,
                     {
@@ -5051,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") })
                     },
@@ -5070,7 +5167,8 @@ InputFieldComponent.time = (0, import_react21.forwardRef)(function Time({ ...pro
       ref,
       ...props,
       ...inputFieldProps,
-      minWidth: buttonWidth * 2 + 2
+      minWidth: buttonWidth * 2 + 2,
+      onBlur
     }
   );
 });