react-better-html 1.1.28 → 1.1.30

package/dist/components/Dropdown.d.ts

@@ -23,10 +23,10 @@ export type DropdownProps<Value, Data> = {
     withDebounce?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
-    debounceIsLoading?: number;
+    debounceIsLoading?: boolean;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
-    renderOption?: (option: DropdownOption<Value, Data>, index: number) => React.ReactNode;
+    renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;
 } & OmitProps<DivProps<unknown>, "onChange">;
 type DropdownComponentType = {
     <Value, Data>(props: ComponentPropWithRef<HTMLDivElement, DropdownProps<Value, Data>>): React.ReactElement;

package/dist/components/Dropdown.js

@@ -149,7 +149,7 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
                                     ? theme.colors.textSecondary + "80"
                                     : isSelected
                                         ? theme.colors.base
-                                        : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filter: isFocused ? (isDisabled ? "brightness(0.95)" : "brightness(0.9)") : undefined, filterHover: focusedOptionIndex === undefined && !isDisabled ? "brightness(0.9)" : undefined, cursor: isDisabled ? "not-allowed" : "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: option, onClickWithValue: onClickOption, onMouseMove: () => setFocusedOptionIndex(undefined), role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: renderOption ? renderOption(option, index) : (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label }) }, JSON.stringify(option)));
+                                        : theme.colors.textPrimary, backgroundColor: isSelected ? theme.colors.primary : theme.colors.backgroundContent, filter: isFocused ? (isDisabled ? "brightness(0.95)" : "brightness(0.9)") : undefined, filterHover: focusedOptionIndex === undefined && !isDisabled ? "brightness(0.9)" : undefined, cursor: isDisabled ? "not-allowed" : "pointer", padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, value: option, onClickWithValue: onClickOption, onMouseMove: () => setFocusedOptionIndex(undefined), role: "option", "aria-selected": isSelected, "aria-disabled": isDisabled, children: renderOption ? renderOption(option, index, isSelected) : (0, jsx_runtime_1.jsx)(Text_1.default, { children: option.label }) }, JSON.stringify(option)));
                         })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { padding: `${theme.styles.space / 2}px ${theme.styles.space + theme.styles.gap}px`, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { textAlign: "left", children: "No options" }) })) }), role: "combobox", "aria-expanded": isOpen, "aria-controls": "dropdown-list", "aria-haspopup": "listbox", "aria-label": label, ref: inputRef }), (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "absolute", top: 46 / 2 + (label ? 16 + theme.styles.gap / 2 : 0), right: theme.styles.space + 1, alignItems: "center", gap: theme.styles.gap, transform: "translateY(-50%)", pointerEvents: "none", filter: disabled ? "brightness(0.9)" : undefined, opacity: disabled ? 0.6 : undefined, zIndex: isOpen || isOpenLate ? 1001 : undefined, children: [(0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", position: "relative", size: 10, iconSize: 14, opacity: !withClearButton ? 0 : undefined, pointerEvents: withClearButton ? "all" : undefined, onClick: onClickClearButton, disabled: !withClearButton }), (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "chevronDown", position: "relative", size: 16, color: theme.colors.textSecondary, transform: `rotate(${isOpen ? 180 : 0}deg)`, transition: theme.styles.transition, pointerEvents: "none" })] })] }) }));
 });
 const Dropdown = (0, react_1.memo)(DropdownComponent);

package/dist/components/InputField.d.ts

@@ -23,7 +23,7 @@ type InputFieldComponentType = {
     search: (props: ComponentPropWithRef<HTMLInputElement, InputFieldProps>) => React.ReactElement;
 };
 declare const InputFieldComponent: InputFieldComponentType;
-type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style">;
+export type TextareaFieldProps = OmitProps<InputFieldProps, "type"> & OmitProps<React.ComponentProps<"textarea">, "style" | "ref">;
 declare const InputField: typeof InputFieldComponent & {
     multiline: typeof InputFieldComponent.multiline;
     email: typeof InputFieldComponent.email;

package/dist/utils/hooks.d.ts

@@ -1,7 +1,7 @@
 import { ComponentHoverStyle, ComponentPropWithRef, ComponentStyle } from "../types/components";
 import { Theme } from "../types/theme";
 import { OmitProps, PartialRecord } from "../types/app";
-import { InputFieldProps } from "../components/InputField";
+import { InputFieldProps, TextareaFieldProps } from "../components/InputField";
 import { DropdownProps } from "../components/Dropdown";
 import { ToggleInputProps, ToggleInputRef } from "../components/ToggleInput";
 export declare function useStyledComponentStyles(props: ComponentStyle & ComponentHoverStyle, theme?: Theme, 
@@ -54,6 +54,7 @@ export declare function useForm<FormFields extends Record<string, string | numbe
     setFieldValue: <FieldName extends keyof FormFields>(field: FieldName, value: FormFields[FieldName] | undefined) => void;
     setFieldsValue: (values: Partial<FormFields>) => void;
     getInputFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLInputElement, InputFieldProps>;
+    getTextAreaProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<HTMLTextAreaElement, TextareaFieldProps>;
     getDropdownFieldProps: <FieldName extends keyof FormFields>(field: FieldName) => OmitProps<ComponentPropWithRef<HTMLDivElement, DropdownProps<FormFields[FieldName], unknown>>, "options">;
     getCheckboxProps: <FieldName extends keyof FormFields>(field: FieldName) => ComponentPropWithRef<ToggleInputRef, ToggleInputProps<FormFields[FieldName]>>;
     focusField: (field: keyof FormFields) => void;

package/dist/utils/hooks.js

@@ -205,6 +205,16 @@ function useForm({ defaultValues, onSubmit, validate, }) {
             errorText: errors[field],
         };
     }, [values, setFieldValue, inputTypes, errors]);
+    const getTextAreaProps = (0, react_1.useCallback)((field) => {
+        const type = inputTypes[field] ?? "text";
+        return {
+            value: values[field]?.toString() ?? "",
+            onChangeValue: (newValue) => {
+                setFieldValue(field, newValue);
+            },
+            errorText: errors[field],
+        };
+    }, [values, setFieldValue, inputTypes, errors]);
     const getDropdownFieldProps = (0, react_1.useCallback)((field) => {
         return {
             value: values[field],
@@ -255,6 +265,7 @@ function useForm({ defaultValues, onSubmit, validate, }) {
         setFieldValue,
         setFieldsValue,
         getInputFieldProps,
+        getTextAreaProps,
         getDropdownFieldProps,
         getCheckboxProps,
         focusField,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "react-better-html",
-   "version": "1.1.28",
+   "version": "1.1.30",
    "description": "A component library for react that is as close to plane html as possible",
    "main": "dist/index.js",
    "files": [