react-better-html 1.1.172 → 1.1.174

package/README.md

@@ -52,7 +52,7 @@ createRoot(root).render(
 );
 ```
 
-This is enough for the components to work with the default configurations that the library comes with. They can be overridden when passing `value` prop to the `<BetterHtmlProvider>` tag.
+This is enough for the components to work with the default configurations that the library comes with. They can be overridden when passing `config` prop to the `<BetterHtmlProvider>` tag.
 
 ## Problems?
 

package/dist/index.d.mts

@@ -756,6 +756,8 @@ type ListFilter<DataItem> = {
 };
 type TableColumn<DataItem> = {
     label?: string;
+    /** @requires label */
+    renderLabel?: (label: string) => React.ReactNode;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -964,13 +966,13 @@ declare const useAlertControls: () => {
     createAlert: (alert: OmitProps<Alert, "id">) => Alert;
     removeAlert: (alertId: string) => void;
 };
-type BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
+type BetterHtmlProviderConfig = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
-    value?: BetterHtmlProviderValue;
+    config?: BetterHtmlProviderConfig;
     plugins?: BetterHtmlPlugin[];
     children?: React.ReactNode;
 };
-declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
+declare function BetterHtmlProvider({ config, plugins, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
 declare const _default: typeof BetterHtmlProvider;
 
 type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
@@ -1056,4 +1058,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.d.ts

@@ -756,6 +756,8 @@ type ListFilter<DataItem> = {
 };
 type TableColumn<DataItem> = {
     label?: string;
+    /** @requires label */
+    renderLabel?: (label: string) => React.ReactNode;
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -964,13 +966,13 @@ declare const useAlertControls: () => {
     createAlert: (alert: OmitProps<Alert, "id">) => Alert;
     removeAlert: (alertId: string) => void;
 };
-type BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
+type BetterHtmlProviderConfig = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
-    value?: BetterHtmlProviderValue;
+    config?: BetterHtmlProviderConfig;
     plugins?: BetterHtmlPlugin[];
     children?: React.ReactNode;
 };
-declare function BetterHtmlProvider({ value, plugins: pluginsToUse, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
+declare function BetterHtmlProvider({ config, plugins, children }: BetterHtmlProviderProps): react_jsx_runtime.JSX.Element;
 declare const _default: typeof BetterHtmlProvider;
 
 type BrowserName = "firefox" | "chrome" | "safari" | "edge" | "opera";
@@ -1056,4 +1058,4 @@ type LocalStoragePluginOptions = {
 declare const defaultLocalStoragePluginOptions: Required<LocalStoragePluginOptions>;
 declare const localStoragePlugin: BetterHtmlPluginConstructor<LocalStoragePluginOptions>;
 
-export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderValue, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };
+export { type Alert, type AlertType, type AlertsPluginOptions, type AppConfig, type AssetName, type AssetsConfig, type BetterHtmlConfig, type BetterHtmlPlugin, _default as BetterHtmlProvider, type BetterHtmlProviderConfig, type BrowserName, Button, type ButtonProps, Chip, type ChipProps, type Color, type ColorName, type ColorTheme, ColorThemeSwitch, type ColorThemeSwitchProps, type Colors, type ComponentHoverStyle, type ComponentMarginProps, type ComponentPaddingProps, type DeepPartialRecord, Div, type DivProps, _default$3 as Divider, Dropdown, type DropdownOption, type DropdownProps, type ExcludeOptions, Foldable, type FoldableProps, type FoldableRef, Form, type FormProps, FormRow, type FormRowProps, type HorizontalDividerProps, _default$5 as Icon, type IconName, type IconProps, type IconsConfig, _default$4 as Image, type ImageProps, InputField, type InputFieldProps, _default$1 as Label, type LabelProps, Loader, type LoaderConfig, type LoaderName, type LoaderProps, type LocalStoragePluginOptions, Modal, type ModalProps, type ModalRef, type OmitProps, PageHeader, type PageHeaderProps, PageHolder, type PageHolderProps, type PartialRecord, type PickAllRequired, type PickValue, type PluginName, type ReactRouterDomPluginOptions, type Styles, type TabGroup, Table, type TableColumn, type TableProps, type TableRef, Tabs, type TabsProps, type TabsRef, Text, type TextAs, type TextProps, type TextareaFieldProps, type Theme, type ThemeConfig, _default$2 as ToggleInput, type ToggleInputProps, type ToggleInputRef, Tooltip, type TooltipProps, type TooltipRef, type VerticalDividerProps, alertControls, alertsPlugin, colorThemeControls, countries, darkenColor, defaultAlertsPluginOptions, defaultLocalStoragePluginOptions, defaultReactRouterDomPluginOptions, desaturateColor, eventPreventDefault, eventPreventStop, eventStopPropagation, filterHover, formatPhoneNumber, generateLocalStorage, generateRandomString, getBrowser, getFormErrorObject, isMobileDevice, lightenColor, loaderControls, localStoragePlugin, reactRouterDomPlugin, saturateColor, useAlertControls, useBetterHtmlContext, useBooleanState, useDebounceState, useForm, useLoader, useLoaderControls, useMediaQuery, usePageResize, usePageScroll, useTheme, useUrlQuery };

package/dist/index.js

@@ -2622,54 +2622,53 @@ function BetterHtmlProviderContent({ children }) {
     alertsPlugin2 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AlertsHolder_default, {})
   ] });
 }
-function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
+function BetterHtmlProvider({ config, plugins, children }) {
   const [colorTheme, setColorTheme] = (0, import_react9.useState)(
-    localStorage.getItem("theme") === "dark" ? "dark" : value?.colorTheme ?? "light"
+    localStorage.getItem("theme") === "dark" ? "dark" : config?.colorTheme ?? "light"
   );
-  const [loaders, setLoaders] = (0, import_react9.useState)(value?.loaders ?? {});
-  const [plugins] = (0, import_react9.useState)(pluginsToUse ?? []);
+  const [loaders, setLoaders] = (0, import_react9.useState)(config?.loaders ?? {});
   const [alerts, setAlerts] = (0, import_react9.useState)([]);
   const [tabGroups, setTabGroups] = (0, import_react9.useState)([]);
   const [tabsWithDots, setTabsWithDots] = (0, import_react9.useState)([]);
-  const readyValue = (0, import_react9.useMemo)(
+  const readyConfig = (0, import_react9.useMemo)(
     () => ({
       app: {
         ...appConfig,
-        ...value?.app
+        ...config?.app
       },
       theme: {
         styles: {
           ...theme.styles,
-          ...value?.theme?.styles
+          ...config?.theme?.styles
         },
         colors: {
           light: {
             ...theme.colors.light,
-            ...value?.theme?.colors?.light
+            ...config?.theme?.colors?.light
           },
           dark: {
             ...theme.colors.dark,
-            ...value?.theme?.colors?.dark
+            ...config?.theme?.colors?.dark
           }
         }
       },
       colorTheme,
       icons: {
         ...icons,
-        ...value?.icons
+        ...config?.icons
       },
       assets: {
         ...assets,
-        ...value?.assets
+        ...config?.assets
       },
       loaders,
       setLoaders,
       alerts,
       setAlerts,
       components: {
-        ...value?.components
+        ...config?.components
       },
-      plugins,
+      plugins: plugins ?? [],
       componentsState: {
         tabs: {
           tabGroups,
@@ -2679,20 +2678,21 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
         }
       }
     }),
-    [value, colorTheme, loaders, alerts, plugins, tabGroups, tabsWithDots]
+    [config, colorTheme, loaders, alerts, tabGroups, tabsWithDots]
   );
   (0, import_react9.useEffect)(() => {
+    if (!plugins) return;
     plugins.forEach((plugin) => {
       plugin.initialize?.();
     });
-  }, [plugins]);
+  }, []);
   (0, import_react9.useEffect)(() => {
     const html = document.querySelector("html");
     if (!html) return;
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.type === "attributes") {
-          setColorTheme(html.getAttribute("data-theme") === "dark" ? "dark" : value?.colorTheme ?? "light");
+          setColorTheme(html.getAttribute("data-theme") === "dark" ? "dark" : config?.colorTheme ?? "light");
         }
       });
     });
@@ -2703,8 +2703,8 @@ function BetterHtmlProvider({ value, plugins: pluginsToUse, children }) {
       observer.disconnect();
     };
   }, []);
-  externalBetterHtmlContextValue = readyValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(betterHtmlContext.Provider, { value: readyValue, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BetterHtmlProviderContent, { children }) });
+  externalBetterHtmlContextValue = readyConfig;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(betterHtmlContext.Provider, { value: readyConfig, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BetterHtmlProviderContent, { children }) });
 }
 var BetterHtmlProvider_default = (0, import_react9.memo)(BetterHtmlProvider);
 
@@ -3697,14 +3697,15 @@ var ModalComponent = (0, import_react14.forwardRef)(function Modal({
                               marginTop: 1,
                               iconColor: titleColor,
                               onClick: onClickClose,
-                              transition: theme2.styles.transition
+                              transition: theme2.styles.transition,
+                              zIndex: 10
                             }
                           )
                         ]
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Divider_default.horizontal, {})
-                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
+                  ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_jsx_runtime12.Fragment, { children: !withoutCloseButton && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { position: "absolute", top: theme2.styles.space, right: theme2.styles.space, zIndex: 10, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.icon, { icon: "XMark", onClick: onClickClose }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { padding: title ? theme2.styles.space : void 0, children })
                 ]
               }
@@ -8314,7 +8315,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
                             disabled: data.length === 0,
                             onChange: onClickAllCheckboxesElement
                           }
-                        ) : column.label ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: column.label }) : void 0,
+                        ) : column.label ? column.renderLabel ? column.renderLabel(column.label) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text_default, { children: column.label }) : void 0,
                         column.filter && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                           Button_default.icon,
                           {
@@ -8454,7 +8455,7 @@ var TableComponent = (0, import_react25.forwardRef)(function Table({
     /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       Modal_default,
       {
-        title: `Filter ${openedFilterColumn?.label}`,
+        title: `Filter ${openedFilterColumn?.label ?? ""}`,
         description: openedFilterColumn?.filter === "number" ? "Enter minimum and maximum values to filter" : openedFilterColumn?.filter === "date" || openedFilterColumn?.filter === "date-time" ? "Enter minimum and maximum dates to filter" : openedFilterColumn?.filter === "list" ? "Select values to filter from the list bellow" : "",
         onClose: onCloseFilterModal,
         ref: filterModalRef,