react-better-html 1.1.37 → 1.1.38

package/dist/components/Divider.d.ts

@@ -1,10 +1,10 @@
+import { ComponentMarginProps } from "../types/components";
 type DividerProps = {
     /** @default 1 */
     width?: number;
     /** @default border */
     backgroundColor?: string;
-    paddingBlock?: number;
-};
+} & ComponentMarginProps;
 type VerticalDividerProps = DividerProps & {
     /** @default "100%" */
     height?: number;

package/dist/components/Divider.js

@@ -9,12 +9,12 @@ const Div_1 = __importDefault(require("./Div"));
 const Text_1 = __importDefault(require("./Text"));
 const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
 exports.default = {
-    vertical: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, paddingBlock, height }) {
+    vertical: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, height, ...props }) {
         const theme = (0, BetterHtmlProvider_1.useTheme)();
-        return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: width, height: height ?? "100%", flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border, paddingBlock: paddingBlock }));
+        return ((0, jsx_runtime_1.jsx)(Div_1.default, { width: width, height: height ?? "100%", flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border, ...props }));
     }),
-    horizontal: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, paddingBlock, text, textColor, }) {
+    horizontal: (0, react_1.memo)(function Divider({ width = 1, backgroundColor, text, textColor, ...props }) {
         const theme = (0, BetterHtmlProvider_1.useTheme)();
-        return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: text ? theme.styles.space : undefined, paddingBlock: paddingBlock, children: [(0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { color: textColor ?? theme.colors.textSecondary, children: text }), (0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })] }));
+        return ((0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: text ? theme.styles.space : undefined, ...props, children: [(0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border }), text && (0, jsx_runtime_1.jsx)(Text_1.default, { color: textColor ?? theme.colors.textSecondary, children: text }), (0, jsx_runtime_1.jsx)(Div_1.default, { flex: 1, height: width, flexShrink: 0, backgroundColor: backgroundColor ?? theme.colors.border })] }));
     }),
 };

package/dist/components/Dropdown.js

@@ -141,7 +141,7 @@ const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, err
     }, [withDebounce, onChangeSearch, debouncedSearchQuery]);
     const displayValue = withSearch && isFocused ? searchQuery : selectedOption?.label ?? "";
     const withClearButton = isOpen && selectedOption;
-    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, placeholder: withSearch ? (selectedOption ? selectedOption.label : placeholder) : placeholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, zIndex: isOpen || isOpenLate ? 1001 : undefined, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((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)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
+    return ((0, jsx_runtime_1.jsx)(Div_1.default.column, { width: "100%", position: "relative", userSelect: "none", ...props, ref: dropdownHolderRef, children: (0, jsx_runtime_1.jsxs)(Div_1.default.row, { position: "relative", width: "100%", children: [(0, jsx_runtime_1.jsx)(InputField_1.default, { label: label, errorText: errorText, infoText: infoText, required: required, disabled: disabled, readOnly: !withSearch, value: displayValue, placeholder: withSearch ? (selectedOption ? selectedOption.label : placeholder) : placeholder, leftIcon: leftIcon, className: `react-better-html-dropdown${isOpen ? " react-better-html-dropdown-open" : ""}${isOpenLate ? " react-better-html-dropdown-open-late" : ""}${inputFieldClassName ? ` ${inputFieldClassName}` : ""}`, onClick: !disabled ? setIsOpen.toggle : undefined, onFocus: setIsFocused.setTrue, onBlur: setIsFocused.setFalse, onKeyDown: onKeyDownInputField, onChangeValue: withSearch ? onChangeValue : undefined, insideInputFieldComponent: (0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: "100%", left: 0, width: "100%", maxHeight: 300, backgroundColor: theme.colors.backgroundContent, border: `1px solid ${isFocused ? theme.colors.primary : theme.colors.border}`, borderTop: "none", borderBottomLeftRadius: theme.styles.borderRadius, borderBottomRightRadius: theme.styles.borderRadius, boxShadow: "0px 10px 20px #00000020", zIndex: 1000, overflowY: "auto", opacity: !isOpen ? 0 : undefined, pointerEvents: !isOpen ? "none" : undefined, transform: `translateY(${!isOpen ? -10 : 0}px)`, transition: theme.styles.transition, role: "listbox", "aria-label": label, children: isLoadingDebouncedSearchQuery || debounceIsLoading ? ((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)(Loader_1.default.text, {}) })) : filteredOptions.length ? (filteredOptions.map((option, index) => {
                             const isSelected = option.value === value;
                             const isDisabled = option.disabled;
                             const isFocused = index === focusedOptionIndex;

package/dist/components/InputField.js

@@ -65,6 +65,10 @@ const InputElement = styled_components_1.default.input.withConfig({
          border-bottom-left-radius: 0px;
          border-bottom-right-radius: 0px;
       }
+
+      &.react-better-html-dropdown-open-late {
+         z-index: 1001;
+      }
    }
 
    ${(props) => props.normalStyle}

package/dist/index.d.ts

@@ -15,6 +15,7 @@ import Form from "./components/Form";
 import Label from "./components/Label";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls } from "./components/BetterHtmlProvider";
 import { usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
+import { generateRandomString, getBrowser, formatPhoneNumber } 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";
@@ -24,4 +25,4 @@ 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 { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, Div, Text, Loader, Icon, Image, Button, Divider, Modal, ModalRef, PageHolder, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, 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, Chip, InputField, Dropdown, DropdownOption, ToggleInput, Form, Label, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, 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, };

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.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = 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.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = exports.useUrlQuery = exports.useForm = exports.useDebounceState = exports.useBooleanState = exports.useMediaQuery = exports.usePageResize = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.Label = exports.Form = exports.ToggleInput = exports.Dropdown = exports.InputField = exports.Chip = 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"));
@@ -83,6 +83,10 @@ Object.defineProperty(exports, "useBooleanState", { enumerable: true, get: funct
 Object.defineProperty(exports, "useDebounceState", { enumerable: true, get: function () { return hooks_1.useDebounceState; } });
 Object.defineProperty(exports, "useForm", { enumerable: true, get: function () { return hooks_1.useForm; } });
 Object.defineProperty(exports, "useUrlQuery", { enumerable: true, get: function () { return hooks_1.useUrlQuery; } });
+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; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
 __exportStar(require("./plugins"), exports);

package/dist/utils/functions.d.ts

@@ -1 +1,3 @@
-export {};
+export declare const generateRandomString: (stringLength: number) => string;
+export declare const getBrowser: () => "firefox" | "chrome" | "safari" | "edge" | "opera" | undefined;
+export declare const formatPhoneNumber: (phoneNumber: string) => string;

package/dist/utils/functions.js

@@ -1,2 +1,51 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatPhoneNumber = exports.getBrowser = exports.generateRandomString = void 0;
+const countries_1 = require("../constants/countries");
+const generateRandomString = (stringLength) => {
+    const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+    let result = "";
+    for (let index = 0; index < stringLength; index++) {
+        result += characters.charAt(Math.floor(Math.random() * characters.length));
+    }
+    return result;
+};
+exports.generateRandomString = generateRandomString;
+const getBrowser = () => {
+    const userAgent = navigator.userAgent.toLowerCase();
+    if (userAgent.includes("firefox"))
+        return "firefox";
+    if (userAgent.includes("chrome") && !userAgent.includes("edg"))
+        return "chrome";
+    if (userAgent.includes("safari") && !userAgent.includes("chrome"))
+        return "safari";
+    if (userAgent.includes("edg"))
+        return "edge";
+    if (userAgent.includes("opr") || userAgent.includes("opera"))
+        return "opera";
+    return;
+};
+exports.getBrowser = getBrowser;
+const formatPhoneNumber = (phoneNumber) => {
+    const cleanPhoneNumber = phoneNumber.replace(/\D/g, "");
+    const country = countries_1.countries.find((country) => country.phoneNumberExtension === cleanPhoneNumber.slice(0, country.phoneNumberExtension.length));
+    if (!country)
+        return phoneNumber;
+    let phonNumberRest = cleanPhoneNumber.slice(country.phoneNumberExtension.length);
+    if (country.phoneNumberFormat) {
+        let formattedNumber = "";
+        let index = 0;
+        for (const char of country.phoneNumberFormat) {
+            if (char === "X" && index < phonNumberRest.length) {
+                formattedNumber += phonNumberRest[index];
+                index++;
+            }
+            else {
+                formattedNumber += char;
+            }
+        }
+        phonNumberRest = formattedNumber.replace(/X/g, "").trim();
+    }
+    return `+${country.phoneNumberExtension} ${phonNumberRest}`;
+};
+exports.formatPhoneNumber = formatPhoneNumber;

package/package.json

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