react-better-html 1.1.150 → 1.1.152

package/dist/index.d.mts

@@ -410,6 +410,10 @@ type InputFieldComponentType = {
     dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
         minDate?: Date;
         maxDate?: Date;
+        /** @default today */
+        defaultDateAfterTimePick?: `${number}-${number}-${number}`;
+        /** @default "00:00" */
+        defaultTimeAfterDatePick?: `${number}:${number}`;
     }>) => React.ReactElement;
     time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
@@ -475,6 +479,7 @@ type DropdownProps<Value, Data = unknown> = {
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
+    renderOptionDivider?: (previousOption: DropdownOption<Value, Data> | undefined, nextOption: DropdownOption<Value, Data> | undefined, previousOptionIndex: number, nextOptionIndex: number) => React.ReactNode;
 } & OmitProps<DivProps, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
@@ -556,6 +561,7 @@ declare function useForm<FormFields extends Record<string | number, string | num
     getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     focusField: (field: keyof FormFields) => void;
+    validate: () => {};
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     reset: () => void;
     requiredFields: (keyof FormFields)[] | undefined;

package/dist/index.d.ts

@@ -410,6 +410,10 @@ type InputFieldComponentType = {
     dateTime: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps & {
         minDate?: Date;
         maxDate?: Date;
+        /** @default today */
+        defaultDateAfterTimePick?: `${number}-${number}-${number}`;
+        /** @default "00:00" */
+        defaultTimeAfterDatePick?: `${number}:${number}`;
     }>) => React.ReactElement;
     time: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
     color: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
@@ -475,6 +479,7 @@ type DropdownProps<Value, Data = unknown> = {
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
+    renderOptionDivider?: (previousOption: DropdownOption<Value, Data> | undefined, nextOption: DropdownOption<Value, Data> | undefined, previousOptionIndex: number, nextOptionIndex: number) => React.ReactNode;
 } & OmitProps<DivProps, "onChange" | "defaultChecked">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;
@@ -556,6 +561,7 @@ declare function useForm<FormFields extends Record<string | number, string | num
     getRadioButtonProps: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName]) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     getSwitchProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     focusField: (field: keyof FormFields) => void;
+    validate: () => {};
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     reset: () => void;
     requiredFields: (keyof FormFields)[] | undefined;

package/dist/index.js

@@ -3037,13 +3037,17 @@ function useForm(options) {
   const focusField = (0, import_react10.useCallback)((field) => {
     inputFieldRefs.current[field]?.focus();
   }, []);
+  const validateForm = (0, import_react10.useCallback)(() => {
+    const validationErrors = validate?.(values) || {};
+    setErrors(validationErrors);
+    return validationErrors;
+  }, [validate, values]);
   const onSubmitFunction = (0, import_react10.useCallback)(
     async (event) => {
       event.preventDefault();
       setIsSubmitting.setTrue();
       try {
-        const validationErrors = validate?.(values) || {};
-        setErrors(validationErrors);
+        const validationErrors = validateForm();
         if (Object.keys(validationErrors).length === 0) {
           await onSubmit?.(values);
         } else {
@@ -3054,7 +3058,7 @@ function useForm(options) {
         setIsSubmitting.setFalse();
       }
     },
-    [values, validate, onSubmit, focusField]
+    [values, validateForm, onSubmit, focusField]
   );
   const reset = (0, import_react10.useCallback)(() => {
     setValues(defaultValues);
@@ -3085,6 +3089,7 @@ function useForm(options) {
     getRadioButtonProps,
     getSwitchProps,
     focusField,
+    validate: validateForm,
     onSubmit: onSubmitFunction,
     reset,
     requiredFields,
@@ -3697,7 +3702,7 @@ var PageHeaderComponent = (0, import_react15.forwardRef)(function PageHeader({
     {
       alignItems: "center",
       gap: theme2.styles.space,
-      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      marginBottom: marginBottom || theme2.styles.space * 2,
       ref,
       children: [
         imageUrl && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
@@ -5508,6 +5513,7 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
   onChange,
   onChangeSearch,
   renderOption,
+  renderOptionDivider,
   id,
   ...props
 }, ref) {
@@ -5609,31 +5615,41 @@ var DropdownComponent = (0, import_react18.forwardRef)(function Dropdown({
   );
   const selectedOption = (0, import_react18.useMemo)(() => options.find((option) => option.value === value), [options, value]);
   const renderedOptions = (0, import_react18.useMemo)(
-    () => filteredOptions.map((option, index) => {
-      const isSelected = option.value === value;
-      const isDisabled = option.disabled;
-      const isFocused2 = index === focusedOptionIndex;
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        Div_default,
-        {
-          color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
-          backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
-          filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
-          filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
-          cursor: isDisabled ? "not-allowed" : "pointer",
-          padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
-          value: option,
-          onClickWithValue: onClickOption,
-          onMouseMove: () => setFocusedOptionIndex(void 0),
-          role: "option",
-          "aria-selected": isSelected,
-          "aria-disabled": isDisabled,
-          children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label })
-        },
-        JSON.stringify(option)
-      );
-    }),
-    [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption]
+    () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+      renderOptionDivider ? renderOptionDivider(void 0, filteredOptions[0], -1, 0) : void 0,
+      filteredOptions.map((option, index) => {
+        const isSelected = option.value === value;
+        const isDisabled = option.disabled;
+        const isFocused2 = index === focusedOptionIndex;
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react18.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Div_default,
+            {
+              color: isDisabled ? theme2.colors.textSecondary + "80" : isSelected ? theme2.colors.base : theme2.colors.textPrimary,
+              backgroundColor: isSelected ? theme2.colors.primary : theme2.colors.backgroundContent,
+              filter: isFocused2 ? isDisabled ? "brightness(0.95)" : "brightness(0.9)" : void 0,
+              filterHover: focusedOptionIndex === void 0 && !isDisabled ? "brightness(0.9)" : void 0,
+              cursor: isDisabled ? "not-allowed" : "pointer",
+              padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`,
+              value: option,
+              onClickWithValue: onClickOption,
+              onMouseMove: () => setFocusedOptionIndex(void 0),
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": isDisabled,
+              children: renderOption ? renderOption(option, index, isSelected) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Text_default, { children: option.label })
+            }
+          ),
+          renderOptionDivider ? renderOptionDivider(
+            option,
+            filteredOptions[index + 1],
+            index,
+            filteredOptions[index + 1] ? index + 1 : -1
+          ) : void 0
+        ] }, JSON.stringify(option));
+      })
+    ] }),
+    [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption, renderOptionDivider]
   );
   (0, import_react18.useEffect)(() => {
     if (isOpen) {
@@ -6581,7 +6597,7 @@ InputFieldComponent.date = (0, import_react20.forwardRef)(function Date2({ minDa
     }
   );
 });
-InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = (0, import_react20.useRef)(null);
   const selectedHourRef = (0, import_react20.useRef)(null);
@@ -6590,31 +6606,31 @@ InputFieldComponent.dateTime = (0, import_react20.forwardRef)(function DateTime(
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const onChange = (0, import_react20.useCallback)(
     (date) => {
-      const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? "00:00"}` : "";
+      const newValue = date ? `${date}T${internalValue?.toString().split("T")[1] ?? defaultTimeAfterDatePick}` : "";
       inputFieldProps.onChangeValue?.(newValue);
       setInternalValue(newValue);
     },
-    [internalValue, inputFieldProps.onChangeValue]
+    [internalValue, defaultTimeAfterDatePick, inputFieldProps.onChangeValue]
   );
   const onClickHour = (0, import_react20.useCallback)(
     (hour) => {
       const newTime = `${hour.toString().padStart(2, "0")}:${internalValue?.toString().split(":")[1] || "00"}`;
-      const today = `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().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);
       setInternalValue(newValue);
     },
-    [internalValue, inputFieldProps.onChangeValue]
+    [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
   );
   const onClickMinute = (0, import_react20.useCallback)(
     (minute) => {
       const newTime = `${internalValue?.toString().split("T")?.[1]?.split(":")[0] || "00"}:${minute.toString().padStart(2, "0")}`;
-      const today = `${(/* @__PURE__ */ new Date()).getFullYear()}-${((/* @__PURE__ */ new Date()).getMonth() + 1).toString().padStart(2, "0")}-${(/* @__PURE__ */ new Date()).getDate().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);
       setInternalValue(newValue);
     },
-    [internalValue, inputFieldProps.onChangeValue]
+    [defaultDateAfterTimePick, internalValue, inputFieldProps.onChangeValue]
   );
   (0, import_react20.useEffect)(() => {
     if (isOpen && selectedHourRef.current)