react-better-html 1.1.160 → 1.1.162

package/dist/index.d.mts

@@ -1,15 +1,15 @@
 import { WebTarget } from 'styled-components';
 import * as react from 'react';
-import { ComponentType, ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as reactRouterDomLib from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
 type BetterHtmlPlugin<T = object> = {
     name: PluginName;
-    components?: Record<string, ComponentType<any>>;
     initialize?: () => void;
-    getConfig?: () => T;
+    getConfig: () => T;
 };
 
 type ComponentStyle = React.CSSProperties;
@@ -319,14 +319,17 @@ declare const Modal: typeof ModalComponent & {
 type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
-    backgroundColor?: string;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundImage?: React.CSSProperties["backgroundImage"];
     children?: React.ReactNode;
 } & ComponentPaddingProps;
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        pageBackgroundColor?: string;
+        pageBackgroundColor?: React.CSSProperties["backgroundColor"];
+        pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
+        behindComponent?: React.ReactNode;
         sideComponent?: React.ReactNode;
         /** @default "right" */
         sideComponentPosition?: "left" | "right";
@@ -1009,7 +1012,9 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-type ReactRouterDomPluginOptions = {};
+type ReactRouterDomPluginOptions = {
+    reactRouterDomLib: typeof reactRouterDomLib;
+};
 declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
 declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;
 

package/dist/index.d.ts

@@ -1,15 +1,15 @@
 import { WebTarget } from 'styled-components';
 import * as react from 'react';
-import { ComponentType, ComponentProps, ReactNode } from 'react';
+import { ComponentProps, ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as reactRouterDomLib from 'react-router-dom';
 
 type PluginName = "alerts" | "react-router-dom" | "localStorage";
 type BetterHtmlPluginConstructor<T extends object = object> = (config?: T) => BetterHtmlPlugin<T>;
 type BetterHtmlPlugin<T = object> = {
     name: PluginName;
-    components?: Record<string, ComponentType<any>>;
     initialize?: () => void;
-    getConfig?: () => T;
+    getConfig: () => T;
 };
 
 type ComponentStyle = React.CSSProperties;
@@ -319,14 +319,17 @@ declare const Modal: typeof ModalComponent & {
 type PageHolderProps = {
     /** @default false */
     noMaxContentWidth?: boolean;
-    backgroundColor?: string;
+    backgroundColor?: React.CSSProperties["backgroundColor"];
+    backgroundImage?: React.CSSProperties["backgroundImage"];
     children?: React.ReactNode;
 } & ComponentPaddingProps;
 type PageHolderComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps>): React.ReactElement;
     center: (props: ComponentPropWithRef<HTMLDivElement, PageHolderProps & {
-        pageBackgroundColor?: string;
+        pageBackgroundColor?: React.CSSProperties["backgroundColor"];
+        pageBackgroundImage?: React.CSSProperties["backgroundImage"];
         contentMaxWidth?: React.CSSProperties["maxWidth"];
+        behindComponent?: React.ReactNode;
         sideComponent?: React.ReactNode;
         /** @default "right" */
         sideComponentPosition?: "left" | "right";
@@ -1009,7 +1012,9 @@ type AlertsPluginOptions = {
 declare const defaultAlertsPluginOptions: Required<AlertsPluginOptions>;
 declare const alertsPlugin: BetterHtmlPluginConstructor<AlertsPluginOptions>;
 
-type ReactRouterDomPluginOptions = {};
+type ReactRouterDomPluginOptions = {
+    reactRouterDomLib: typeof reactRouterDomLib;
+};
 declare const defaultReactRouterDomPluginOptions: Required<ReactRouterDomPluginOptions>;
 declare const reactRouterDomPlugin: BetterHtmlPluginConstructor<ReactRouterDomPluginOptions>;
 

package/dist/index.js

@@ -102,7 +102,6 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 var import_react10 = require("react");
-var import_react_router_dom2 = require("react-router-dom");
 
 // src/constants/css.ts
 var cssProps = {
@@ -1640,14 +1639,12 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-var import_react_router_dom = require("react-router-dom");
-var defaultReactRouterDomPluginOptions = {};
+var reactRouterDomLib = __toESM(require("react-router-dom"));
+var defaultReactRouterDomPluginOptions = {
+  reactRouterDomLib
+};
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
-  components: {
-    Link: import_react_router_dom.Link,
-    NavLink: import_react_router_dom.NavLink
-  },
   initialize: () => {
     console.log("react-router-dom plugin initialized");
   },
@@ -2301,7 +2298,7 @@ function Alert2({ alert }) {
   const theme2 = useTheme();
   const alertControls2 = useAlertControls();
   const alertsPlugin2 = usePlugin("alerts");
-  const pluginConfig = alertsPlugin2?.getConfig?.() ?? {};
+  const pluginConfig = alertsPlugin2?.getConfig() ?? {};
   const defaultAlertDurationNumber = getAlertDurationFromAuto(
     alert.duration ?? pluginConfig.defaultDuration ?? defaultAlertsPluginOptions.defaultDuration,
     alert
@@ -2463,7 +2460,7 @@ function AlertsHolder() {
   const theme2 = useTheme();
   const alertsPlugin2 = usePlugin("alerts");
   const { alerts } = useBetterHtmlContextInternal();
-  const pluginConfig = alertsPlugin2?.getConfig?.() ?? {};
+  const pluginConfig = alertsPlugin2?.getConfig() ?? {};
   const top = pluginConfig.position === "top" ? theme2.styles.gap : void 0;
   const bottom = pluginConfig.position === "bottom" ? theme2.styles.gap : void 0;
   const left = pluginConfig.align === "left" ? theme2.styles.space : pluginConfig.align === "center" ? "50%" : void 0;
@@ -3156,14 +3153,15 @@ function useUrlQuery() {
       "`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const isInRouterContext = (0, import_react_router_dom2.useInRouterContext)();
+  const reactRouterDomPluginConfig = reactRouterDomPlugin2.getConfig();
+  const isInRouterContext = reactRouterDomPluginConfig.reactRouterDomLib.useInRouterContext();
   if (!isInRouterContext) {
     throw new Error(
       "`useUrlQuery` hook must be used inside a React Router context. Make sure your component is wrapped in a `<BrowserRouter>`, or another Router component."
     );
   }
-  const navigate = (0, import_react_router_dom2.useNavigate)();
-  const [searchParams] = (0, import_react_router_dom2.useSearchParams)();
+  const navigate = reactRouterDomPluginConfig.reactRouterDomLib.useNavigate();
+  const [searchParams] = reactRouterDomPluginConfig.reactRouterDomLib.useSearchParams();
   const setQuery = (0, import_react10.useCallback)(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3172,7 +3170,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: (0, import_react_router_dom2.createSearchParams)({
+          search: reactRouterDomPluginConfig.reactRouterDomLib.createSearchParams({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3659,7 +3657,9 @@ var PageHolderComponent = (0, import_react14.forwardRef)(function PageHolder({ n
 });
 PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   pageBackgroundColor,
+  pageBackgroundImage,
   contentMaxWidth,
+  behindComponent,
   sideComponent,
   sideComponentPosition = "right",
   noMaxContentWidth,
@@ -3674,17 +3674,32 @@ PageHolderComponent.center = (0, import_react14.forwardRef)(function Center({
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     Div_default.row,
     {
+      position: "relative",
       width: "100%",
       minHeight: "100svh",
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
+      backgroundImage: pageBackgroundImage,
       children: [
+        behindComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Div_default,
+          {
+            position: "fixed",
+            width: `${withSideComponent ? 50 : 100}%`,
+            height: "100svh",
+            top: 0,
+            left: sideComponentPosition === "right" ? 0 : "auto",
+            right: sideComponentPosition === "left" ? 0 : "auto",
+            zIndex: 1,
+            children: behindComponent
+          }
+        ),
         sideComponentPosition === "left" && withSideComponent && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default, { width: "50%" }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           Div_default.box,
           {
-            width: `calc(100% - ${theme2.styles.space}px * 2)`,
+            width: `calc(100% - ${theme2.styles.space * 2}px)`,
             maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
             marginInline: theme2.styles.space,
             marginBlock: theme2.styles.space,
@@ -5569,8 +5584,8 @@ var encryptString = (text) => {
       "`encryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
-  if (!pluginConfig?.encryption?.enabled) return text;
+  const pluginConfig = localStoragePlugin2.getConfig();
+  if (!pluginConfig.encryption?.enabled) return text;
   const encrypted = import_crypto_js.default.AES.encrypt(text, import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.secretKey), {
     iv: import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.iv),
     mode: import_crypto_js.default.mode.CBC,
@@ -5586,8 +5601,8 @@ var decryptString = (text) => {
       "`decryptString` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
-  if (!pluginConfig?.encryption?.enabled) return text;
+  const pluginConfig = localStoragePlugin2.getConfig();
+  if (!pluginConfig.encryption?.enabled) return text;
   const decrypted = import_crypto_js.default.AES.decrypt(text, import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.secretKey), {
     iv: import_crypto_js.default.enc.Hex.parse(pluginConfig.encryption.iv),
     mode: import_crypto_js.default.mode.CBC,
@@ -9177,7 +9192,7 @@ function generateLocalStorage() {
           "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
         );
       }
-      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const pluginConfig = localStoragePlugin2.getConfig();
       const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
       const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
       const readyValue = encryptionEnabled ? encryptString(JSON.stringify(value)) : JSON.stringify(value);
@@ -9195,7 +9210,7 @@ function generateLocalStorage() {
           "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
         );
       }
-      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const pluginConfig = localStoragePlugin2.getConfig();
       const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
       const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
       const item = localStorage.getItem(readyName.toString());
@@ -9217,7 +9232,7 @@ function generateLocalStorage() {
           "`generateLocalStorage` hook requires the `localStorage` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
         );
       }
-      const pluginConfig = localStoragePlugin2.getConfig?.() ?? {};
+      const pluginConfig = localStoragePlugin2.getConfig();
       const encryptionEnabled = pluginConfig.encryption?.enabled ?? false;
       const readyName = encryptionEnabled ? encryptString(name.toString()) : name;
       localStorage.removeItem(readyName.toString());