react-better-html 1.1.171 → 1.1.173

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

@@ -321,12 +321,18 @@ type ModalComponent = {
     (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
     confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
         message?: string;
+        /** @default "Continue" */
+        continueButtonText?: string;
         continueButtonLoaderName?: LoaderName | AnyOtherString;
         onContinue?: () => void;
         onCancel?: () => void;
     }>) => React.ReactElement;
     destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
         message?: string;
+        /** @default "Delete" */
+        deleteButtonText?: string;
+        /** @default "trash" */
+        deleteButtonIconName?: IconName | AnyOtherString;
         deleteButtonLoaderName?: LoaderName | AnyOtherString;
         onDelete?: () => void;
         onCancel?: () => void;
@@ -750,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;
@@ -960,11 +968,11 @@ declare const useAlertControls: () => {
 };
 type BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
-    value?: BetterHtmlProviderValue;
+    config?: BetterHtmlProviderValue;
     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";

package/dist/index.d.ts

@@ -321,12 +321,18 @@ type ModalComponent = {
     (props: ComponentPropWithRef<ModalRef, ModalProps>): React.ReactElement;
     confirmation: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
         message?: string;
+        /** @default "Continue" */
+        continueButtonText?: string;
         continueButtonLoaderName?: LoaderName | AnyOtherString;
         onContinue?: () => void;
         onCancel?: () => void;
     }>) => React.ReactElement;
     destructive: (props: ComponentPropWithRef<ModalRef, OmitProps<ModalProps, "maxWidth" | "children" | "overflow"> & {
         message?: string;
+        /** @default "Delete" */
+        deleteButtonText?: string;
+        /** @default "trash" */
+        deleteButtonIconName?: IconName | AnyOtherString;
         deleteButtonLoaderName?: LoaderName | AnyOtherString;
         onDelete?: () => void;
         onCancel?: () => void;
@@ -750,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;
@@ -960,11 +968,11 @@ declare const useAlertControls: () => {
 };
 type BetterHtmlProviderValue = DeepPartialRecord<BetterHtmlConfig>;
 type BetterHtmlProviderProps = {
-    value?: BetterHtmlProviderValue;
+    config?: BetterHtmlProviderValue;
     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";

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);
 
@@ -3716,7 +3716,7 @@ var ModalComponent = (0, import_react14.forwardRef)(function Modal({
     document.body
   );
 });
-ModalComponent.confirmation = (0, import_react14.forwardRef)(function Confirmation({ message, continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
+ModalComponent.confirmation = (0, import_react14.forwardRef)(function Confirmation({ message, continueButtonText = "Continue", continueButtonLoaderName, onContinue, onCancel, ...props }, ref) {
   const theme2 = useTheme();
   const modalRef = (0, import_react14.useRef)(null);
   const onCancelElement = (0, import_react14.useCallback)(() => {
@@ -3739,13 +3739,21 @@ ModalComponent.confirmation = (0, import_react14.forwardRef)(function Confirmati
         marginTop: theme2.styles.space * 2,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default.secondary, { text: "Cancel", onClick: onCancelElement }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { text: "Continue", loaderName: continueButtonLoaderName, onClick: onContinueElement })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Button_default, { text: continueButtonText, loaderName: continueButtonLoaderName, onClick: onContinueElement })
         ]
       }
     )
   ] });
 });
-ModalComponent.destructive = (0, import_react14.forwardRef)(function Destructive2({ message, deleteButtonLoaderName, onDelete, onCancel, ...props }, ref) {
+ModalComponent.destructive = (0, import_react14.forwardRef)(function Destructive2({
+  message,
+  deleteButtonText = "Delete",
+  deleteButtonIconName = "trash",
+  deleteButtonLoaderName,
+  onDelete,
+  onCancel,
+  ...props
+}, ref) {
   const theme2 = useTheme();
   const modalRef = (0, import_react14.useRef)(null);
   const onCancelElement = (0, import_react14.useCallback)(() => {
@@ -3771,8 +3779,8 @@ ModalComponent.destructive = (0, import_react14.forwardRef)(function Destructive
           /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             Button_default.destructive,
             {
-              icon: "trash",
-              text: "Delete",
+              icon: deleteButtonIconName,
+              text: deleteButtonText,
               loaderName: deleteButtonLoaderName,
               onClick: onDeleteElement
             }
@@ -8306,7 +8314,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,
                           {
@@ -8446,7 +8454,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,