react-better-html 1.1.56 → 1.1.58

package/dist/components/BetterHtmlProvider.d.ts

@@ -1,7 +1,12 @@
 import { BetterHtmlConfig } from "../types/config";
 import { AnyOtherString, DeepPartialRecord, OmitProps } from "../types/app";
-import { LoaderName } from "../types/loader";
+import { LoaderConfig, LoaderName } from "../types/loader";
 import { BetterHtmlPlugin, PluginName } from "../types/plugin";
+export type BetterHtmlInternalConfig = BetterHtmlConfig & {
+    setLoaders: React.Dispatch<React.SetStateAction<Partial<LoaderConfig>>>;
+    plugins: BetterHtmlPlugin[];
+};
+export declare let externalBetterHtmlContextValue: BetterHtmlInternalConfig | undefined;
 export declare const useBetterHtmlContext: () => BetterHtmlConfig;
 export declare const useTheme: () => {
     colors: import("../types/theme").Colors;

package/dist/components/BetterHtmlProvider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.usePlugin = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = void 0;
+exports.usePlugin = exports.useLoaderControls = exports.useLoader = exports.useTheme = exports.useBetterHtmlContext = exports.externalBetterHtmlContextValue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const styled_components_1 = require("styled-components");
@@ -151,6 +151,7 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
             observer.disconnect();
         };
     }, []);
+    exports.externalBetterHtmlContextValue = readyValue;
     return ((0, jsx_runtime_1.jsx)(betterHtmlContext.Provider, { value: readyValue, children: (0, jsx_runtime_1.jsx)(BetterHtmlProviderContent, { children: children }) }));
 }
 exports.default = (0, react_1.memo)(BetterHtmlProvider);

package/dist/components/Button.d.ts

@@ -5,10 +5,11 @@ import { LoaderName } from "../types/loader";
 import { AnyOtherString, OmitProps } from "../types/app";
 import { ComponentHoverStyle, ComponentStyle } from "../types/components";
 export type ButtonProps<Value> = {
-    href?: string;
     text?: string;
     value?: Value;
+    href?: string;
     download?: string;
+    target?: React.ComponentProps<"a">["target"];
     icon?: IconName | AnyOtherString;
     /** @default "left" */
     iconPosition?: "left" | "right";

package/dist/components/Button.js

@@ -104,7 +104,7 @@ const ButtonElement = styled_components_1.default.button.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-const ButtonComponent = function Button({ href, text, value, download, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
+const ButtonComponent = function Button({ href, text, value, download, target, icon, iconPosition = "left", iconColor, iconSize, image, imagePosition = "left", imageWidth, imageHeight, loaderName, loaderSize, isLoading, disabled, isSmall, isSubmit, onClick, onClickWithValue, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();
     const isLoadingHook = (0, BetterHtmlProvider_1.useLoader)(loaderName);
     const betterHtmlContext = (0, BetterHtmlProvider_1.useBetterHtmlContext)();
@@ -122,7 +122,7 @@ const ButtonComponent = function Button({ href, text, value, download, icon, ico
     }, [onClick, onClickWithValue, value]);
     const iconComponent = icon ? ((0, jsx_runtime_1.jsx)(Div_1.default.row, { height: 20, alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: icon, color: iconColor ?? props.color ?? theme.colors.base, size: iconSize ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16") }) })) : undefined;
     const imageComponent = image ? ((0, jsx_runtime_1.jsx)(Image_1.default, { name: image, color: iconColor ?? props.color ?? theme.colors.base, width: imageWidth ?? parseInt(styledComponentStyles.normalStyle.fontSize?.toString() ?? "16"), height: imageHeight })) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, download: download, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ButtonElement, { as: (href ? "a" : "button"), theme: theme, isSmall: isSmall, withText: text !== undefined, isLoading: isLoadingElement, disabled: disabled, href: href, download: download, target: target, type: isSubmit && !isLoadingElement ? "submit" : "button", onClick: !disabled && !isLoadingElement ? onClickElement : undefined, ...styledComponentStyles, ...dataProps, ...ariaProps, ...restProps, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", justifyContent: "center", gap: 10, pointerEvents: "none", opacity: isLoadingElement ? 0 : 1, transition: theme.styles.transition, children: [iconPosition === "left" && iconComponent, imagePosition === "left" && imageComponent, text, iconPosition === "right" && iconComponent, imagePosition === "right" && imageComponent] }), (0, jsx_runtime_1.jsx)(Div_1.default.row, { position: "absolute", width: "100%", height: "100%", top: 0, left: 0, pointerEvents: "none", alignItems: "center", justifyContent: "center", opacity: isLoadingElement ? 1 : 0, transition: theme.styles.transition, children: (0, jsx_runtime_1.jsx)(Loader_1.default, { color: props.color ?? theme.colors.base, size: loaderSize, disabled: !isLoadingElement }) })] }));
 };
 ButtonComponent.secondary = function Secondary({ className, ...props }) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/ColorThemeSwitch.d.ts

@@ -1,5 +1,6 @@
 import { ComponentMarginProps } from "../types/components";
 export type ColorThemeSwitchProps = {
+    /** @default false */
     withMoon?: boolean;
     className?: string;
 } & ComponentMarginProps;

package/dist/components/Div.d.ts

@@ -5,6 +5,7 @@ export type DivProps<Value> = {
     value?: Value;
     /** @default "div" */
     as?: WebTarget;
+    /** @default false */
     isTabAccessed?: boolean;
     onClickWithValue?: (value: Value) => void;
 } & OmitProps<React.ComponentProps<"div">, "style" | "defaultValue"> & ComponentStyle & ComponentHoverStyle;

package/dist/components/Dropdown.d.ts

@@ -5,6 +5,7 @@ import { DivProps } from "./Div";
 export type DropdownOption<Value, Data = unknown> = {
     value: Value;
     label: string;
+    /** @default false */
     disabled?: boolean;
     searchValues?: string[];
     data?: Data;
@@ -13,7 +14,9 @@ export type DropdownProps<Value, Data = unknown> = {
     label?: string;
     errorText?: string;
     infoText?: string;
+    /** @default false */
     required?: boolean;
+    /** @default false */
     disabled?: boolean;
     options: DropdownOption<Value, Data>[];
     value?: Value;
@@ -21,12 +24,16 @@ export type DropdownProps<Value, Data = unknown> = {
     placeholder?: string;
     leftIcon?: IconName | AnyOtherString;
     inputFieldClassName?: string;
+    /** @default false */
     withSearch?: boolean;
+    /** @default false */
     withDebounce?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;
+    /** @default false */
     debounceIsLoading?: boolean;
     debounceMinimumSymbolsRequired?: number;
+    /** @default false */
     withoutClearButton?: boolean;
     onChange?: (value: Value | undefined) => void;
     onChangeSearch?: (query: string) => void;

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, debounceDelay = 0.5, debounceIsLoading, debounceMinimumSymbolsRequired, withoutClearButton, onChange, onChangeSearch, renderOption, ...props }, ref) {
+const DropdownComponent = (0, react_1.forwardRef)(function Dropdown({ label, errorText, infoText, required, disabled, options, value: controlledValue, defaultValue, placeholder, 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);
@@ -141,7 +141,8 @@ 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, cursor: !withSearch ? "pointer" : undefined, 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 readyPlaceholder = placeholder ? placeholder : `Select an ${label?.toLowerCase() ?? "option"}`;
+    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, cursor: !withSearch ? "pointer" : undefined, placeholder: withSearch ? (selectedOption ? selectedOption.label : readyPlaceholder) : readyPlaceholder, 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/Form.d.ts

@@ -7,11 +7,14 @@ export type FormProps = {
     submitButtonText?: string;
     submitButtonLoaderName?: LoaderName | AnyOtherString;
     submitButtonId?: string;
+    /** @default false */
     submitButtonIsDisabled?: boolean;
     /** @default "right" */
     actionButtonsLocation?: "left" | "center" | "right";
     gap?: React.CSSProperties["gap"];
+    /** @default false */
     isSubmitting?: boolean;
+    /** @default false */
     isDestructive?: boolean;
     onClickCancel?: () => void;
     onSubmit?: (value: React.FormEvent<HTMLFormElement>) => void;

package/dist/components/InputField.d.ts

@@ -9,6 +9,7 @@ export type InputFieldProps = {
     leftIcon?: IconName | AnyOtherString;
     rightIcon?: IconName | AnyOtherString;
     insideInputFieldComponent?: React.ReactNode;
+    /** @default false */
     withDebounce?: boolean;
     /** @default 0.5s */
     debounceDelay?: number;

package/dist/components/Label.d.ts

@@ -1,6 +1,8 @@
 export type LabelProps = {
     text?: string;
+    /** @default false */
     required?: boolean;
+    /** @default false */
     isError?: boolean;
 };
 declare function Label({ text, required, isError }: LabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Modal.js

@@ -87,7 +87,7 @@ const ModalComponent = (0, react_1.forwardRef)(function Modal({ maxWidth, title,
             isOpened,
         };
     }, [onClickOpen, onClickClose, isOpened]);
-    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2, borderTopRightRadius: theme.styles.borderRadius * 2, paddingInline: theme.styles.space + theme.styles.gap, paddingBlock: theme.styles.space, transition: theme.styles.transition, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h1", color: titleColor ?? theme.colors.textPrimary, transition: theme.styles.transition, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, transition: theme.styles.transition, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose, transition: theme.styles.transition })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
+    return ((0, jsx_runtime_1.jsx)(DialogStylesElement, { theme: theme, colorTheme: colorTheme, opacity: !isOpened ? 0 : 1, onClose: onClickClose, ref: dialogRef, children: isOpenedLate ? ((0, jsx_runtime_1.jsx)(Div_1.default.column, { position: "relative", width: "100%", maxWidth: maxWidth ?? app.contentMaxWidth / 1.3, minHeight: `calc(100% - ${theme.styles.space * 2}px)`, alignItems: "center", justifyContent: "center", marginBlock: theme.styles.space, marginInline: "auto", transform: `translateY(${theme.styles.space}px)`, transition: theme.styles.transition, animation: isOpened ? "fadeInAnimation 0.2s ease forwards" : "fadeOutAnimation 0.2s ease forwards", children: (0, jsx_runtime_1.jsxs)(Div_1.default, { position: "relative", width: "100%", minHeight: 32 + theme.styles.space * 2, backgroundColor: theme.colors.backgroundBase, borderRadius: theme.styles.borderRadius * 2, paddingInline: !title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: !title ? theme.styles.space : undefined, overflow: overflow, children: [title ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Div_1.default.row, { alignItems: "center", gap: theme.styles.gap, backgroundColor: headerBackgroundColor, borderTopLeftRadius: theme.styles.borderRadius * 2 - 1, borderTopRightRadius: theme.styles.borderRadius * 2 - 1, paddingInline: theme.styles.space + theme.styles.gap, paddingBlock: theme.styles.space, transition: theme.styles.transition, children: [(0, jsx_runtime_1.jsxs)(Div_1.default.column, { flex: 1, gap: theme.styles.gap / 2, children: [(0, jsx_runtime_1.jsx)(Text_1.default, { as: "h1", color: titleColor ?? theme.colors.textPrimary, transition: theme.styles.transition, children: title }), description && ((0, jsx_runtime_1.jsx)(Text_1.default, { color: descriptionColor ?? theme.colors.textSecondary, transition: theme.styles.transition, children: description }))] }), (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", marginTop: 1, iconColor: titleColor, onClick: onClickClose, transition: theme.styles.transition })] }), (0, jsx_runtime_1.jsx)(Divider_1.default.horizontal, {})] })) : ((0, jsx_runtime_1.jsx)(Div_1.default, { position: "absolute", top: theme.styles.space, right: theme.styles.space, children: (0, jsx_runtime_1.jsx)(Button_1.default.icon, { icon: "XMark", onClick: onClickClose }) })), (0, jsx_runtime_1.jsx)(Div_1.default, { paddingInline: title ? theme.styles.space + theme.styles.gap : undefined, paddingBlock: title ? theme.styles.space : undefined, children: children })] }) })) : undefined }));
 });
 ModalComponent.confirmation = (0, react_1.forwardRef)(function Confirmation({ continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
     const theme = (0, BetterHtmlProvider_1.useTheme)();

package/dist/components/PageHeader.d.ts

@@ -10,6 +10,7 @@ export type PageHeaderProps = {
     description?: string;
     textAlign?: React.CSSProperties["textAlign"];
     rightElement?: React.ReactNode;
+    /** @default false */
     lightMode?: boolean;
 } & Pick<ComponentMarginProps, "marginBottom">;
 declare function PageHeader({ imageUrl, imageSize, title, titleAs, titleRightElement, description, textAlign, rightElement, lightMode, marginBottom, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Table.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from "react";
+import { ComponentMarginProps, ComponentPropWithRef } from "../types/components";
+import { ToggleInputProps } from "./ToggleInput";
+import { ImageProps } from "./Image";
+type TextColumn<DataItem> = {
+    type: "text";
+    keyName: keyof DataItem;
+    format?: (value: any) => string;
+};
+type ElementColumn<DataItem> = {
+    type: "element";
+    render: (item: DataItem, index: number) => ReactNode;
+};
+type ImageColumn<DataItem> = {
+    type: "image";
+    keyName?: keyof DataItem;
+} & ImageProps;
+type CheckboxColumn<DataItem> = {
+    type: "checkbox";
+    keyName?: keyof DataItem;
+} & ToggleInputProps<boolean>;
+export type TableColumn<DataItem> = {
+    label?: string;
+    width?: string | number;
+    align?: "left" | "center" | "right";
+} & (TextColumn<DataItem> | ElementColumn<DataItem> | ImageColumn<DataItem> | CheckboxColumn<DataItem>);
+export type TableProps<DataItem> = {
+    columns: TableColumn<DataItem>[];
+    data: DataItem[];
+    /** @default false */
+    isStriped?: boolean;
+    /** @default false */
+    withStickyHeader?: boolean;
+    /** @default "No data available" */
+    noDataItemsMessage?: string;
+    onClickRow?: (item: DataItem, index: number) => void;
+    onClickAllCheckboxes?: () => void;
+} & ComponentMarginProps;
+type TableComponentType = {
+    <DataItem>(props: ComponentPropWithRef<HTMLDivElement, TableProps<DataItem>>): React.ReactElement;
+};
+declare const TableComponent: TableComponentType;
+declare const Table: typeof TableComponent;
+export default Table;

package/dist/components/Table.js

@@ -0,0 +1,154 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styled_components_1 = __importStar(require("styled-components"));
+const Div_1 = __importDefault(require("./Div"));
+const ToggleInput_1 = __importDefault(require("./ToggleInput"));
+const Image_1 = __importDefault(require("./Image"));
+const BetterHtmlProvider_1 = require("./BetterHtmlProvider");
+const Text_1 = __importDefault(require("./Text"));
+const defaultImageWidth = 120;
+const TableStyledComponent = styled_components_1.default.table.withConfig({
+    shouldForwardProp: (prop) => !["isStriped", "withHover", "withStickyHeader", "theme"].includes(prop),
+}) `
+   width: 100%;
+   border-collapse: collapse;
+   border-spacing: 0;
+
+   tr {
+      background-color: ${(props) => props.theme.colors.backgroundContent};
+
+      &.isHeader {
+         background-color: ${(props) => props.theme.colors.backgroundSecondary};
+         font-weight: 700;
+      }
+
+      &.isClickable {
+         cursor: pointer;
+      }
+
+      ${(props) => props.isStriped
+    ? (0, styled_components_1.css) `
+                 &:nth-child(even) {
+                    background-color: ${props.theme.colors.backgroundSecondary};
+                 }
+              `
+    : ""}
+
+      ${(props) => props.withHover
+    ? (0, styled_components_1.css) `
+                 transition: ${(props) => props.theme.styles.transition};
+
+                 &:not(.isHeader):hover {
+                    background-color: ${props.theme.colors.backgroundSecondary}20;
+                 }
+              `
+    : ""}
+
+      th {
+         font-size: 18px;
+         text-align: left;
+         padding: ${(props) => props.theme.styles.space}px;
+      }
+
+      td {
+         border-top: 1px solid ${(props) => props.theme.colors.border}60;
+         padding: ${(props) => props.theme.styles.gap}px ${(props) => props.theme.styles.space}px;
+
+         &.noData {
+            text-align: center;
+            padding: ${(props) => props.theme.styles.space}px;
+         }
+      }
+   }
+`;
+const ThStyledComponent = styled_components_1.default.th.withConfig({
+    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
+}) `
+   ${(props) => (props.width ? `width: ${props.width}px;` : "")}
+   ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
+`;
+const TdStyledComponent = styled_components_1.default.td.withConfig({
+    shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop),
+}) `
+   ${(props) => (props.textAlign ? `text-align: ${props.textAlign} !important;` : "")}
+`;
+const TableComponent = (0, react_1.forwardRef)(function Table({ columns, data, isStriped, withStickyHeader, noDataItemsMessage = "No data available", onClickRow, onClickAllCheckboxes, ...props }, ref) {
+    const theme = (0, BetterHtmlProvider_1.useTheme)();
+    const renderCellContent = (0, react_1.useCallback)((column, item, index) => {
+        switch (column.type) {
+            case "text": {
+                const value = item[column.keyName];
+                return column.format ? column.format(value) : String(value ?? "");
+            }
+            case "element": {
+                return column.render(item, index);
+            }
+            case "image": {
+                const { type, keyName, ...props } = column;
+                const src = keyName ? item[keyName] : undefined;
+                return ((0, jsx_runtime_1.jsx)(Image_1.default, { src: src, width: defaultImageWidth, borderRadius: theme.styles.borderRadius / 2, ...props }));
+            }
+            case "checkbox": {
+                const { type, keyName, ...props } = column;
+                const checked = keyName ? item[keyName] : false;
+                return (0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: checked, ...props });
+            }
+            default: {
+                return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
+            }
+        }
+    }, [theme]);
+    const onClickRowElement = (0, react_1.useCallback)((item, index) => {
+        onClickRow?.(item, index);
+    }, [onClickRow]);
+    const everythingIsChecked = (0, react_1.useMemo)(() => {
+        if (!columns.some((column) => column.type === "checkbox"))
+            return false;
+        const keyName = columns.find((column) => column.type === "checkbox")?.keyName;
+        if (!keyName)
+            return false;
+        return data.every((item) => item[keyName]);
+    }, [data]);
+    return ((0, jsx_runtime_1.jsx)(Div_1.default, { border: `1px solid ${theme.colors.border}`, borderRadius: theme.styles.borderRadius * 2, overflow: "auto", ...props, ref: ref, children: (0, jsx_runtime_1.jsxs)(TableStyledComponent, { isStriped: isStriped, withHover: onClickRow !== undefined, withStickyHeader: withStickyHeader, theme: theme, children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsx)("tr", { className: "isHeader", children: columns.map((column, index) => ((0, jsx_runtime_1.jsx)(ThStyledComponent, { width: column.type === "image" ? defaultImageWidth : column.type === "checkbox" ? 26 : column.width, textAlign: column.align, children: column.label ??
+                                (column.type === "checkbox" && onClickAllCheckboxes ? ((0, jsx_runtime_1.jsx)(ToggleInput_1.default.checkbox, { checked: everythingIsChecked, onChange: onClickAllCheckboxes })) : ("")) }, column.type + column.label + index))) }) }), (0, jsx_runtime_1.jsx)("tbody", { children: data.length > 0 ? (data.map((item, rowIndex) => ((0, jsx_runtime_1.jsx)("tr", { className: onClickRow ? "isClickable" : undefined, onClick: () => onClickRowElement(item, rowIndex), children: columns.map((column, colIndex) => ((0, jsx_runtime_1.jsx)(TdStyledComponent, { textAlign: column.align, children: renderCellContent(column, item, rowIndex) }, column.type + column.label + colIndex))) }, JSON.stringify(item) + rowIndex)))) : ((0, jsx_runtime_1.jsx)("tr", { children: (0, jsx_runtime_1.jsx)("td", { className: "noData", colSpan: columns.length, children: (0, jsx_runtime_1.jsx)(Text_1.default.unknown, { children: noDataItemsMessage }) }) })) })] }) }));
+});
+const Table = (0, react_1.memo)(TableComponent);
+exports.default = Table;

package/dist/constants/theme.js

@@ -17,7 +17,7 @@ exports.theme = {
             primary: "#6d466b",
             secondary: "#412234",
             success: "#28a745",
-            info: "#17a2b8",
+            info: "#1eb6dd",
             warn: "#ffc107",
             error: "#dc3545",
             base: "#f8f8f8",
@@ -33,7 +33,7 @@ exports.theme = {
             primary: "#9b6499",
             secondary: "#6c466b",
             success: "#28a745",
-            info: "#17a2b8",
+            info: "#1eb6dd",
             warn: "#ffc107",
             error: "#dc3545",
             base: "#f8f8f8",

package/dist/index.d.ts

@@ -16,9 +16,11 @@ import Form, { type FormProps } from "./components/Form";
 import Label, { type LabelProps } from "./components/Label";
 import FormRow, { type FormRowProps } from "./components/FormRow";
 import ColorThemeSwitch, { type ColorThemeSwitchProps } from "./components/ColorThemeSwitch";
+import Table, { type TableColumn } from "./components/Table";
 import BetterHtmlProvider, { useBetterHtmlContext, useTheme, useLoader, useLoaderControls, type BetterHtmlProviderValue } from "./components/BetterHtmlProvider";
 import { usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery } from "./utils/hooks";
 import { generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject } from "./utils/functions";
+import { loaderControls } from "./utils/variableFunctions";
 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";
@@ -29,4 +31,4 @@ import { type Color, type ColorName, type ColorTheme, type Colors, type Styles,
 import { type BrowserName } from "./types/other";
 import { isMobileDevice } from "./constants";
 export * from "./plugins";
-export { BetterHtmlProvider, BetterHtmlProviderValue, Div, DivProps, Text, TextProps, TextAs, Loader, LoaderProps, Icon, IconProps, Image, ImageProps, Button, ButtonProps, Divider, HorizontalDividerProps, VerticalDividerProps, Modal, ModalProps, ModalRef, PageHolder, PageHolderProps, PageHeader, PageHeaderProps, Chip, ChipProps, InputField, InputFieldProps, TextareaFieldProps, Dropdown, DropdownOption, DropdownProps, ToggleInput, ToggleInputRef, ToggleInputProps, Form, FormProps, Label, LabelProps, FormRow, FormRowProps, ColorThemeSwitch, ColorThemeSwitchProps, 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, };
+export { BetterHtmlProvider, BetterHtmlProviderValue, Div, DivProps, Text, TextProps, TextAs, Loader, LoaderProps, Icon, IconProps, Image, ImageProps, Button, ButtonProps, Divider, HorizontalDividerProps, VerticalDividerProps, Modal, ModalProps, ModalRef, PageHolder, PageHolderProps, PageHeader, PageHeaderProps, Chip, ChipProps, InputField, InputFieldProps, TextareaFieldProps, Dropdown, DropdownOption, DropdownProps, ToggleInput, ToggleInputRef, ToggleInputProps, Form, FormProps, Label, LabelProps, FormRow, FormRowProps, ColorThemeSwitch, ColorThemeSwitchProps, Table, TableColumn, useBetterHtmlContext, useTheme, useLoader, useLoaderControls, usePageResize, usePageScroll, useMediaQuery, useBooleanState, useDebounceState, useForm, useUrlQuery, generateRandomString, getBrowser, formatPhoneNumber, getFormErrorObject, loaderControls, 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.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.ColorThemeSwitch = 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.loaderControls = 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.Table = exports.ColorThemeSwitch = 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"));
@@ -76,6 +76,8 @@ const FormRow_1 = __importDefault(require("./components/FormRow"));
 exports.FormRow = FormRow_1.default;
 const ColorThemeSwitch_1 = __importDefault(require("./components/ColorThemeSwitch"));
 exports.ColorThemeSwitch = ColorThemeSwitch_1.default;
+const Table_1 = __importDefault(require("./components/Table"));
+exports.Table = Table_1.default;
 const BetterHtmlProvider_1 = __importStar(require("./components/BetterHtmlProvider"));
 exports.BetterHtmlProvider = BetterHtmlProvider_1.default;
 Object.defineProperty(exports, "useBetterHtmlContext", { enumerable: true, get: function () { return BetterHtmlProvider_1.useBetterHtmlContext; } });
@@ -95,6 +97,8 @@ Object.defineProperty(exports, "generateRandomString", { enumerable: true, get:
 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 variableFunctions_1 = require("./utils/variableFunctions");
+Object.defineProperty(exports, "loaderControls", { enumerable: true, get: function () { return variableFunctions_1.loaderControls; } });
 const constants_1 = require("./constants");
 Object.defineProperty(exports, "isMobileDevice", { enumerable: true, get: function () { return constants_1.isMobileDevice; } });
 __exportStar(require("./plugins"), exports);

package/dist/utils/hooks.d.ts

@@ -71,7 +71,7 @@ export declare function useForm<FormFields extends Record<string | number, strin
     isDirty: boolean;
 };
 export declare function useUrlQuery(): {
-    setQuery: (query: Record<string, string>, keepHistory?: boolean) => void;
+    setQuery: (query: Record<string, string | number>, keepHistory?: boolean) => void;
     getQuery: (name: string) => string | null;
     removeQuery: (name: string, keepHistory?: boolean) => void;
 };

package/dist/utils/hooks.js

@@ -338,7 +338,7 @@ function useUrlQuery() {
         navigate({
             search: (0, react_router_dom_1.createSearchParams)({
                 ...currentSearchParams,
-                ...query,
+                ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()])),
             }).toString(),
         }, {
             replace: !keepHistory,

package/dist/utils/variableFunctions.d.ts

@@ -0,0 +1,6 @@
+import { AnyOtherString } from "../types/app";
+import { LoaderName } from "../types/loader";
+export declare const loaderControls: {
+    startLoading: (loaderName: LoaderName | AnyOtherString) => void;
+    stopLoading: (loaderName: LoaderName | AnyOtherString) => void;
+};

package/dist/utils/variableFunctions.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loaderControls = void 0;
+const BetterHtmlProvider_1 = require("../components/BetterHtmlProvider");
+const checkBetterHtmlContextValue = (value, functionsName) => {
+    if (value === undefined) {
+        throw new Error(`\`${functionsName}()\` must be used within a \`<BetterHtmlProvider>\`. Make sure to add one at the root of your component tree.`);
+    }
+    return value !== undefined;
+};
+exports.loaderControls = {
+    startLoading: (loaderName) => {
+        if (!checkBetterHtmlContextValue(BetterHtmlProvider_1.externalBetterHtmlContextValue, "loaderControls.startLoading"))
+            return;
+        BetterHtmlProvider_1.externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+            ...oldValue,
+            [loaderName.toString()]: true,
+        }));
+    },
+    stopLoading: (loaderName) => {
+        if (!checkBetterHtmlContextValue(BetterHtmlProvider_1.externalBetterHtmlContextValue, "loaderControls.stopLoading"))
+            return;
+        BetterHtmlProvider_1.externalBetterHtmlContextValue.setLoaders((oldValue) => ({
+            ...oldValue,
+            [loaderName.toString()]: false,
+        }));
+    },
+};

package/package.json

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