react-better-html 1.1.30 → 1.1.32

package/dist/components/Div.js

@@ -39,11 +39,11 @@ const DivComponent = (0, react_1.forwardRef)(function Div({ value, as, isTabAcce
     }, [onKeyDown, isTabAccessed]);
     return ((0, jsx_runtime_1.jsx)(DivStyledComponent, { as: as, tabIndex: isTabAccessed && !constants_1.isMobileDevice ? 0 : undefined, role: role ?? (onClick ? "button" : undefined), onClick: onClickElement, onKeyDown: onKeyDownElement, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, ref: ref, children: children }));
 });
-DivComponent.row = (0, react_1.forwardRef)(function Row(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: props.invertFlexDirection ? "column" : "row", ref: ref, ...props }));
+DivComponent.row = (0, react_1.forwardRef)(function Row({ invertFlexDirection, ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "column" : "row", ref: ref, ...props });
 });
-DivComponent.column = (0, react_1.forwardRef)(function Column(props, ref) {
-    return ((0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: props.invertFlexDirection ? "row" : "column", ref: ref, ...props }));
+DivComponent.column = (0, react_1.forwardRef)(function Column({ invertFlexDirection, ...props }, ref) {
+    return (0, jsx_runtime_1.jsx)(DivComponent, { display: "flex", flexDirection: invertFlexDirection ? "row" : "column", ref: ref, ...props });
 });
 DivComponent.grid = (0, react_1.forwardRef)(function Grid(props, ref) {
     return (0, jsx_runtime_1.jsx)(DivComponent, { display: "grid", ref: ref, ...props });

package/dist/components/Dropdown.d.ts

@@ -24,6 +24,7 @@ export type DropdownProps<Value, Data> = {
     /** @default 0.5s */
     debounceDelay?: number;
     debounceIsLoading?: boolean;
+    debounceMinimumSymbolsRequired?: number;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;
     renderOption?: (option: DropdownOption<Value, Data>, index: number, isSelected: boolean) => React.ReactNode;

package/dist/components/Dropdown.js

@@ -12,9 +12,9 @@ const Div_1 = __importDefault(require("./Div"));
 const InputField_1 = __importDefault(require("./InputField"));
 const Icon_1 = __importDefault(require("./Icon"));
 const Button_1 = __importDefault(require("./Button"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const Loader_1 = __importDefault(require("./Loader"));
-const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, placeholder = "Select an option", leftIcon, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, onChange, onChangeSearch, renderOption, ...props }, ref) {
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, placeholder = "Select an option", leftIcon, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, onChange, onChangeSearch, renderOption, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const dropdownHolderRef = (0, react_1.useRef)(null);
     const inputRef = (0, react_1.useRef)(null);
@@ -150,7 +150,10 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
                                     : 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, 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" })] })] }) }));
+                        })) : ((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: debounceMinimumSymbolsRequired !== undefined &&
+                                    searchQuery.length < debounceMinimumSymbolsRequired
+                                    ? `Enter at least ${debounceMinimumSymbolsRequired} characters`
+                                    : "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);
 exports.default = Dropdown;

package/dist/components/Form.d.ts

@@ -1,7 +1,9 @@
 import { ComponentMarginProps } from "../types/components";
 import { LoaderName } from "../types/loader";
-import { AnyOtherString } from "../types/app";
+import { AnyOtherString, OmitProps } from "../types/app";
+import { useForm } from "../utils/hooks";
 type FormProps = {
+    form?: OmitProps<ReturnType<typeof useForm>, "focusField">;
     submitButtonText?: string;
     submitButtonLoaderName?: LoaderName | AnyOtherString;
     submitButtonId?: string;
@@ -14,6 +16,6 @@ type FormProps = {
     onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;
     children?: React.ReactNode;
 } & ComponentMarginProps;
-declare function Form({ submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
+declare function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation, gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }: FormProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof Form>;
 export default _default;

package/dist/components/Form.js

@@ -8,13 +8,19 @@ const react_1 = require("react");
 const Div_1 = __importDefault(require("./Div"));
 const Button_1 = __importDefault(require("./Button"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-function Form({ submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation = "right", gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }) {
+function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId, actionButtonsLocation = "right", gap, isSubmitting, isDestructive, onClickCancel, onSubmit, children, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const submitIsDisabled = (0, react_1.useMemo)(() => {
+        if (!form || !form.requiredFields)
+            return false;
+        return Object.entries(form.values).some(([key, value]) => form.requiredFields?.includes(key) &&
+            (value === undefined || value === null || value?.toString().trim() === ""));
+    }, [form]);
     const SubmitButtonTag = isDestructive ? Button_1.default.destructive : Button_1.default;
     return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit, children: [gap !== undefined ? (0, jsx_runtime_1.jsx)(Div_1.default.column, { gap: gap, children: children }) : children, submitButtonText && ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: actionButtonsLocation === "left"
                         ? "flex-start"
                         : actionButtonsLocation === "center"
                             ? "center"
-                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: submitButtonText, isLoading: isSubmitting, loaderName: submitButtonLoaderName, id: submitButtonId, isSubmit: true })] }))] }) }));
+                            : "flex-end", gap: theme.styles.gap, marginTop: theme.styles.space, children: [onClickCancel && (0, jsx_runtime_1.jsx)(Button_1.default.secondary, { text: "Cancel", onClick: onClickCancel }), (0, jsx_runtime_1.jsx)(SubmitButtonTag, { text: submitButtonText, isLoading: isSubmitting, loaderName: submitButtonLoaderName, disabled: submitIsDisabled, id: submitButtonId, isSubmit: true })] }))] }) }));
 }
 exports.default = (0, react_1.memo)(Form);

package/dist/utils/hooks.d.ts

@@ -43,8 +43,9 @@ export declare function useBooleanState(initialValue?: boolean): [
     }
 ];
 export declare function useDebounceState<Value>(initialValue: Value, delay?: number): [value: Value, debouncedValue: Value, setValue: React.Dispatch<React.SetStateAction<Value>>, isLoading: boolean];
-export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>({ defaultValues, onSubmit, validate, }: {
+export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>({ defaultValues, requiredFields, onSubmit, validate, }: {
     defaultValues: FormFields;
+    requiredFields?: (keyof FormFields)[];
     onSubmit?: (values: FormFields) => void | Promise<void>;
     validate?: (values: FormFields) => PartialRecord<keyof FormFields, string>;
 }): {
@@ -60,6 +61,7 @@ export declare function useForm<FormFields extends Record<string, string | numbe
     focusField: (field: keyof FormFields) => void;
     onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
     reset: () => void;
+    requiredFields: (keyof FormFields)[] | undefined;
 };
 export declare function useUrlQuery(): {
     setQuery: (query: Record<string, string>, keepHistory?: boolean) => void;

package/dist/utils/hooks.js

@@ -156,7 +156,7 @@ function useDebounceState(initialValue, delay = 0.5) {
     }, [value, delay]);
     return [value, debouncedValue, setValue, isLoading];
 }
-function useForm({ defaultValues, onSubmit, validate, }) {
+function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
     const inputFieldRefs = (0, react_1.useRef)({});
     const [inputTypes, setInputTypes] = (0, react_1.useState)({});
     const [values, setValues] = (0, react_1.useState)(defaultValues);
@@ -271,6 +271,7 @@ function useForm({ defaultValues, onSubmit, validate, }) {
         focusField,
         onSubmit: onSubmitFunction,
         reset,
+        requiredFields,
     };
 }
 function useUrlQuery() {

package/package.json

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