react-better-html 1.1.151 → 1.1.152

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;

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;

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