react-better-html 1.1.150 → 1.1.152

package/dist/index.mjs

@@ -2951,13 +2951,17 @@ function useForm(options) {
   const focusField = useCallback4((field) => {
     inputFieldRefs.current[field]?.focus();
   }, []);
+  const validateForm = useCallback4(() => {
+    const validationErrors = validate?.(values) || {};
+    setErrors(validationErrors);
+    return validationErrors;
+  }, [validate, values]);
   const onSubmitFunction = useCallback4(
     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 {
@@ -2968,7 +2972,7 @@ function useForm(options) {
         setIsSubmitting.setFalse();
       }
     },
-    [values, validate, onSubmit, focusField]
+    [values, validateForm, onSubmit, focusField]
   );
   const reset = useCallback4(() => {
     setValues(defaultValues);
@@ -2999,6 +3003,7 @@ function useForm(options) {
     getRadioButtonProps,
     getSwitchProps,
     focusField,
+    validate: validateForm,
     onSubmit: onSubmitFunction,
     reset,
     requiredFields,
@@ -3611,7 +3616,7 @@ var PageHeaderComponent = forwardRef8(function PageHeader({
     {
       alignItems: "center",
       gap: theme2.styles.space,
-      marginBottom: marginBottom ?? theme2.styles.space * 2,
+      marginBottom: marginBottom || theme2.styles.space * 2,
       ref,
       children: [
         imageUrl && /* @__PURE__ */ jsx13(Image_default.profileImage, { src: imageUrl, size: imageSize ?? (mediaQuery.size600 ? 46 : 60) }),
@@ -5396,8 +5401,8 @@ function Label({ text, required, isError, color, htmlFor }) {
 var Label_default = memo15(Label);
 
 // src/components/Dropdown.tsx
-import { forwardRef as forwardRef10, memo as memo16, useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { forwardRef as forwardRef10, Fragment as Fragment3, memo as memo16, useCallback as useCallback7, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var DropdownComponent = forwardRef10(function Dropdown({
   label,
   labelColor,
@@ -5422,6 +5427,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
   onChange,
   onChangeSearch,
   renderOption,
+  renderOptionDivider,
   id,
   ...props
 }, ref) {
@@ -5523,31 +5529,41 @@ var DropdownComponent = forwardRef10(function Dropdown({
   );
   const selectedOption = useMemo4(() => options.find((option) => option.value === value), [options, value]);
   const renderedOptions = useMemo4(
-    () => filteredOptions.map((option, index) => {
-      const isSelected = option.value === value;
-      const isDisabled = option.disabled;
-      const isFocused2 = index === focusedOptionIndex;
-      return /* @__PURE__ */ jsx15(
-        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__ */ jsx15(Text_default, { children: option.label })
-        },
-        JSON.stringify(option)
-      );
-    }),
-    [filteredOptions, value, focusedOptionIndex, theme2.colors, onClickOption, renderOption]
+    () => /* @__PURE__ */ jsxs10(Fragment4, { 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__ */ jsxs10(Fragment3, { children: [
+          /* @__PURE__ */ jsx15(
+            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__ */ jsx15(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]
   );
   useEffect6(() => {
     if (isOpen) {
@@ -5631,7 +5647,7 @@ var DropdownComponent = forwardRef10(function Dropdown({
             transition: theme2.styles.transition,
             role: "listbox",
             "aria-label": label,
-            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx15(Fragment3, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
+            children: isLoadingDebouncedSearchQuery || debounceIsLoading ? /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Loader_default.text, {}) }) : filteredOptions.length ? /* @__PURE__ */ jsx15(Fragment4, { children: (withoutRenderingOptionsWhenClosed ? isOpen || isOpenLate : true) ? renderedOptions : void 0 }) : /* @__PURE__ */ jsx15(Div_default, { padding: `${theme2.styles.space / 2}px ${theme2.styles.space + theme2.styles.gap}px`, children: /* @__PURE__ */ jsx15(Text_default.unknown, { textAlign: "left", children: debounceMinimumSymbolsRequired !== void 0 && searchQuery.length < debounceMinimumSymbolsRequired ? `Enter at least ${debounceMinimumSymbolsRequired} characters` : "No options" }) })
           }
         ),
         role: "combobox",
@@ -6495,7 +6511,7 @@ InputFieldComponent.date = forwardRef11(function Date2({ minDate, maxDate, ...pr
     }
   );
 });
-InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate, ...props }, ref) {
+InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate, defaultDateAfterTimePick, defaultTimeAfterDatePick = "00:00", ...props }, ref) {
   const theme2 = useTheme();
   const holderRef = useRef5(null);
   const selectedHourRef = useRef5(null);
@@ -6504,31 +6520,31 @@ InputFieldComponent.dateTime = forwardRef11(function DateTime({ minDate, maxDate
   const { internalValue, setInternalValue, inputFieldProps, insideInputFieldComponentProps, isOpen } = useComponentInputFieldDateProps(props, holderRef, isMobileIOS);
   const onChange = useCallback9(
     (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 = useCallback9(
     (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 = useCallback9(
     (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]
   );
   useEffect8(() => {
     if (isOpen && selectedHourRef.current)
@@ -7094,7 +7110,7 @@ var ToggleInput_default = {
 };
 
 // src/components/Form.tsx
-import { Children, forwardRef as forwardRef13, Fragment as Fragment4, memo as memo19, useMemo as useMemo7 } from "react";
+import { Children, forwardRef as forwardRef13, Fragment as Fragment5, memo as memo19, useMemo as useMemo7 } from "react";
 import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var FormComponent = forwardRef13(function Form({
   form,
@@ -7124,7 +7140,7 @@ var FormComponent = forwardRef13(function Form({
   const SubmitButtonTag = isDestructive ? Button_default.destructive : Button_default;
   const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
   return /* @__PURE__ */ jsx19(Div_default, { width: "100%", ...props, children: /* @__PURE__ */ jsxs14("form", { onSubmit: onSubmit ?? form?.onSubmit, ref, children: [
-    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs14(Fragment4, { children: [
+    gap !== void 0 || withDividers ? /* @__PURE__ */ jsx19(Div_default.column, { gap: gap ?? (withDividers ? theme2.styles.space : theme2.styles.gap), children: withDividers ? Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs14(Fragment5, { children: [
       child,
       index < Children.toArray(children).length - 1 && /* @__PURE__ */ jsx19(Divider_default.horizontal, {})
     ] }, index)) : children }) : children,
@@ -7348,10 +7364,10 @@ import {
   useImperativeHandle as useImperativeHandle2,
   useRef as useRef6,
   useEffect as useEffect10,
-  Fragment as Fragment5
+  Fragment as Fragment6
 } from "react";
 import styled12, { css as css2 } from "styled-components";
-import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
 var TableStyledComponent = styled12.table.withConfig({
@@ -7567,7 +7583,7 @@ var TableComponent = forwardRef15(function Table({
           return /* @__PURE__ */ jsx22(Text_default, { ...textProps, children: column.format?.(item, itemIndex) ?? String(value ?? "") });
         }
         case "element": {
-          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx22(Fragment6, {});
+          return column.render?.(item, itemIndex) ?? /* @__PURE__ */ jsx22(Fragment7, {});
         }
         case "image": {
           const imageProps = (typeof column.getImageProps === "function" ? column.getImageProps?.(item, itemIndex) : column.getImageProps) ?? {};
@@ -7607,7 +7623,7 @@ var TableComponent = forwardRef15(function Table({
           ) });
         }
         default: {
-          return /* @__PURE__ */ jsx22(Fragment6, {});
+          return /* @__PURE__ */ jsx22(Fragment7, {});
         }
       }
     },
@@ -7880,7 +7896,7 @@ var TableComponent = forwardRef15(function Table({
   );
   const withFooter = pageSize !== void 0 && pageCountInternal > 1;
   const mobileFooterBreakingPoint = mediaQuery.size700 && pageCountInternal > maximumVisiblePages / 1.4;
-  return /* @__PURE__ */ jsxs17(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs17(Fragment7, { children: [
     /* @__PURE__ */ jsx22(
       Div_default,
       {
@@ -7938,7 +7954,7 @@ var TableComponent = forwardRef15(function Table({
                 },
                 column.type + column.label + index
               )) }) }),
-              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs17(Fragment5, { children: [
+              /* @__PURE__ */ jsx22("tbody", { children: isLoading ? /* @__PURE__ */ jsx22("tr", { className: "withoutHover", children: /* @__PURE__ */ jsx22("td", { className: "noData", colSpan: columns.length, children: /* @__PURE__ */ jsx22(Loader_default.box, {}) }) }) : dataAfterPagination.length > 0 ? dataAfterPagination.map((item, rowIndex) => /* @__PURE__ */ jsxs17(Fragment6, { children: [
                 /* @__PURE__ */ jsx22(
                   "tr",
                   {
@@ -8087,10 +8103,10 @@ var TableComponent = forwardRef15(function Table({
             cancelButtonText: "Clear",
             onClickCancel: openedFilterData ? onClickCancelFormFilter : void 0,
             children: [
-              /* @__PURE__ */ jsx22(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs17(Fragment6, { children: [
+              /* @__PURE__ */ jsx22(FormRow_default, { children: openedFilterColumn.filter === "date" ? /* @__PURE__ */ jsxs17(Fragment7, { children: [
                 /* @__PURE__ */ jsx22(InputField_default.date, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ jsx22(InputField_default.date, { label: "Max", ...filterForm.getInputFieldProps("max") })
-              ] }) : /* @__PURE__ */ jsxs17(Fragment6, { children: [
+              ] }) : /* @__PURE__ */ jsxs17(Fragment7, { children: [
                 /* @__PURE__ */ jsx22(InputField_default.dateTime, { label: "Min", ...filterForm.getInputFieldProps("min") }),
                 /* @__PURE__ */ jsx22(InputField_default.dateTime, { label: "Max", ...filterForm.getInputFieldProps("max") })
               ] }) }),