react-better-html 1.1.44 → 1.1.45

package/dist/components/Dropdown.d.ts

@@ -23,11 +23,11 @@ export type DropdownProps<Value, Data> = {
     inputFieldClassName?: string;
     withSearch?: boolean;
     withDebounce?: boolean;
-    withoutClearButton?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
     debounceIsLoading?: boolean;
     debounceMinimumSymbolsRequired?: number;
+    withoutClearButton?: boolean;
     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

@@ -14,7 +14,7 @@ const Icon_1 = __importDefault(require("./Icon"));
 const Button_1 = __importDefault(require("./Button"));
 const Loader_1 = __importDefault(require("./Loader"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
-const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder = "Select an option", leftIcon, inputFieldClassName, withSearch, withDebounce, withoutClearButton, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, onChange, onChangeSearch, renderOption, ...props }, ref) {
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder = "Select an option", leftIcon, inputFieldClassName, withSearch, withDebounce, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, withoutClearButton, 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);

package/dist/components/Form.js

@@ -18,10 +18,10 @@ function Form({ form, submitButtonText, submitButtonLoaderName, submitButtonId,
     }, [form]);
     const SubmitButtonTag = isDestructive ? Button_1.default.destructive : Button_1.default;
     const submitButtonIsDisabledFinal = submitButtonIsDisabled || submitButtonIsDisabledInternal;
-    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"
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { ...props, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: onSubmit ?? form?.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, disabled: submitButtonIsDisabledFinal, 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 || form?.isSubmitting, loaderName: submitButtonLoaderName, disabled: submitButtonIsDisabledFinal, id: submitButtonId, isSubmit: true })] }))] }) }));
 }
 exports.default = (0, react_1.memo)(Form);

package/dist/components/ToggleInput.js

@@ -10,8 +10,8 @@ const hooks_1 = require("../utils/hooks");
 const Text_1 = __importDefault(require("./Text"));
 const Div_1 = __importDefault(require("./Div"));
 const Icon_1 = __importDefault(require("./Icon"));
-const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const Label_1 = __importDefault(require("./Label"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 const componentSize = 26;
 const switchComponentBallGap = 3;
 const switchComponentMouseDownDifference = 4;

package/dist/constants/countries.js

@@ -672,6 +672,7 @@ exports.countries = [
         code: "IT",
         timeZone: "Europe/Rome",
         phoneNumberExtension: "39",
+        phoneNumberFormat: "XXX XXX XXXX",
     },
     {
         name: "Jamaica",

package/dist/index.d.ts

@@ -17,7 +17,7 @@ import Label from "./components/Label";
 import FormRow from "./components/FormRow";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
 import { usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
-import { generateRandomString, getBrowser, formatPhoneNumber } from "./utils/functions";
+import { generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject } from "./utils/functions";
 import { type OmitProps, type ExcludeOptions, type PickValue, type PartialRecord, type DeepPartialRecord, type PickAllRequired } from "./types/app";
 import { type AppConfig, type BetterHtmlConfig } from "./types/config";
 import { type AssetName, type AssetsConfig } from "./types/asset";
@@ -25,6 +25,7 @@ import { type IconName, type IconsConfig } from "./types/icon";
 import { type LoaderName, type LoaderConfig } from "./types/loader";
 import { type PluginName, type BetterHtmlPlugin } from "./types/plugin";
 import { type Color, type ColorName, type ColorTheme, type Colors, type Styles, type Theme, type ThemeConfig } from "./types/theme";
+import { type BrowserName } from "./types/other";
 import { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, PageHeader, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, FormRow, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, isMobileDevice, };
+export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, PageHeader, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, FormRow, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, OmitProps, ExcludeOptions, PickValue, PartialRecord, DeepPartialRecord, PickAllRequired, AppConfig, BetterHtmlConfig, AssetName, AssetsConfig, IconName, IconsConfig, LoaderName, PluginName, BetterHtmlPlugin, LoaderConfig, Color, ColorName, ColorTheme, Colors, Styles, Theme, ThemeConfig, BrowserName, isMobileDevice, };

package/dist/index.js

@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isMobileDevice = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageScroll = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
+exports.isMobileDevice = exports.getFormErrorObject = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageScroll = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.FormRow = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = exports.PageHeader = exports.PageHolder = exports.Modal = exports.Divider = exports.Button = exports.Image = exports.Icon = exports.Loader = exports.Text = exports.Div = exports.BetterHtmlProvider = void 0;
 const Div_1 = __importDefault(require("./components/Div"));
 exports.Div = Div_1.default;
 const Text_1 = __importDefault(require("./components/Text"));
@@ -92,6 +92,7 @@ const functions_1 = require("./utils/functions");
 Object.defineProperty(exports, "generateRandomString", { enumerable: true, get: function () { return functions_1.generateRandomString; } });
 Object.defineProperty(exports, "getBrowser", { enumerable: true, get: function () { return functions_1.getBrowser; } });
 Object.defineProperty(exports, "formatPhoneNumber", { enumerable: true, get: function () { return functions_1.formatPhoneNumber; } });
+Object.defineProperty(exports, "getFormErrorObject", { enumerable: true, get: function () { return functions_1.getFormErrorObject; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
 __exportStar(require("./plugins"), exports);

package/dist/types/other.d.ts

@@ -0,0 +1 @@
+export type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";

package/dist/types/other.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/utils/functions.d.ts

@@ -1,3 +1,16 @@
-export declare const generateRandomString: (stringLength: number) => string;
-export declare const getBrowser: () => "firefox" | "chrome" | "safari" | "edge" | "opera" | undefined;
+import { PartialRecord } from "../types/app";
+import { BrowserName } from "../types/other";
+import { useForm } from "./hooks";
+export declare const generateRandomString: (stringLength: number, options?: {
+    /** @default true */
+    includeCapitalLetters?: boolean;
+    /** @default true */
+    includeLowerLetters?: boolean;
+    /** @default true */
+    includeNumbers?: boolean;
+    /** @default 1 */
+    dashSections?: number;
+}) => string;
+export declare const getBrowser: () => BrowserName | undefined;
 export declare const formatPhoneNumber: (phoneNumber: string) => string;
+export declare const getFormErrorObject: <FormFields extends ReturnType<typeof useForm>["values"]>(formValues: FormFields) => PartialRecord<keyof FormFields, string>;

package/dist/utils/functions.js

@@ -1,12 +1,34 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = void 0;
+exports.getFormErrorObject = exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = void 0;
 const countries_1 = require("../constants/countries");
-const generateRandomString = (stringLength) => {
-    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const generateRandomString = (stringLength, options) => {
+    const capitals = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+    const lowers = "abcdefghijklmnopqrstuvwxyz";
+    const numbers = "0123456789";
+    const includes = [];
+    if (options?.includeCapitalLetters !== false)
+        includes.push(capitals);
+    if (options?.includeLowerLetters !== false)
+        includes.push(lowers);
+    if (options?.includeNumbers !== false)
+        includes.push(numbers);
+    const characters = includes.join("");
+    const dashSections = Math.max(1, options?.dashSections ?? 1);
+    const dashSectionLength = Math.floor(stringLength / dashSections);
+    if (stringLength < dashSections)
+        return "";
     let result = "";
-    for (let index = 0; index < stringLength; index++) {
-        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    let currentSectionLength = 0;
+    while (result.length < stringLength) {
+        if (currentSectionLength >= dashSectionLength) {
+            result += "-";
+            currentSectionLength = 0;
+        }
+        if (result.length < stringLength) {
+            result += characters.charAt(Math.floor(Math.random() * characters.length));
+            currentSectionLength += 1;
+        }
     }
     return result;
 };
@@ -49,3 +71,7 @@ const formatPhoneNumber = (phoneNumber) => {
     return `+${country.phoneNumberExtension} ${phonNumberRest}`;
 };
 exports.formatPhoneNumber = formatPhoneNumber;
+const getFormErrorObject = (formValues) => {
+    return {};
+};
+exports.getFormErrorObject = getFormErrorObject;

package/dist/utils/hooks.d.ts

@@ -47,7 +47,7 @@ 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, requiredFields, onSubmit, validate, }: {
+export declare function useForm<FormFields extends Record<string, string | number | boolean | undefined>>(options: {
     defaultValues: FormFields;
     requiredFields?: (keyof FormFields)[];
     onSubmit?: (values: FormFields) => void | Promise<void>;

package/dist/utils/hooks.js

@@ -175,7 +175,8 @@ function useDebounceState(initialValue, delay = 0.5) {
     }, [value, delay]);
     return [value, debouncedValue, setValue, isLoading];
 }
-function useForm({ defaultValues, requiredFields, onSubmit, validate, }) {
+function useForm(options) {
+    const { defaultValues, requiredFields, onSubmit, validate } = options;
     const inputFieldRefs = (0, react_1.useRef)({});
     const [inputTypes, setInputTypes] = (0, react_1.useState)({});
     const [values, setValues] = (0, react_1.useState)(defaultValues);

package/package.json

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