react-better-html 1.1.151 → 1.1.153

package/dist/index.d.mts

@@ -479,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;
@@ -560,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;
@@ -994,4 +996,4 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -479,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;
@@ -560,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;
@@ -994,4 +996,4 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, desaturateColor, formatPhoneNumber, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

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,
@@ -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) {