react-better-html 1.1.160 → 1.1.162

package/dist/index.mjs

@@ -9,7 +9,6 @@ var isMobileDevice = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Op
 
 // src/utils/hooks.ts
 import { useCallback as useCallback4, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
-import { createSearchParams, useInRouterContext, useNavigate, useSearchParams } from "react-router-dom";
 
 // src/constants/css.ts
 var cssProps = {
@@ -1547,14 +1546,12 @@ var alertsPlugin = (options) => ({
 });
 
 // src/plugins/reactRouterDom.ts
-import { Link as RouterLink, NavLink as RouterNavLink } from "react-router-dom";
-var defaultReactRouterDomPluginOptions = {};
+import * as reactRouterDomLib from "react-router-dom";
+var defaultReactRouterDomPluginOptions = {
+  reactRouterDomLib
+};
 var reactRouterDomPlugin = (options) => ({
   name: "react-router-dom",
-  components: {
-    Link: RouterLink,
-    NavLink: RouterNavLink
-  },
   initialize: () => {
     console.log("react-router-dom plugin initialized");
   },
@@ -2208,7 +2205,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
@@ -2370,7 +2367,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;
@@ -3063,14 +3060,15 @@ function useUrlQuery() {
       "`useUrlQuery` hook requires the `react-router-dom` plugin to be added to the `plugins` prop in `<BetterHtmlProvider>`."
     );
   }
-  const isInRouterContext = 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 = useNavigate();
-  const [searchParams] = useSearchParams();
+  const navigate = reactRouterDomPluginConfig.reactRouterDomLib.useNavigate();
+  const [searchParams] = reactRouterDomPluginConfig.reactRouterDomLib.useSearchParams();
   const setQuery = useCallback4(
     (query, keepHistory = true) => {
       const currentSearchParams = {};
@@ -3079,7 +3077,7 @@ function useUrlQuery() {
       });
       navigate(
         {
-          search: createSearchParams({
+          search: reactRouterDomPluginConfig.reactRouterDomLib.createSearchParams({
             ...currentSearchParams,
             ...Object.fromEntries(Object.entries(query).map(([key, value]) => [key, value.toString()]))
           }).toString()
@@ -3566,7 +3564,9 @@ var PageHolderComponent = forwardRef7(function PageHolder({ noMaxContentWidth, c
 });
 PageHolderComponent.center = forwardRef7(function Center({
   pageBackgroundColor,
+  pageBackgroundImage,
   contentMaxWidth,
+  behindComponent,
   sideComponent,
   sideComponentPosition = "right",
   noMaxContentWidth,
@@ -3581,17 +3581,32 @@ PageHolderComponent.center = forwardRef7(function Center({
   return /* @__PURE__ */ jsxs7(
     Div_default.row,
     {
+      position: "relative",
       width: "100%",
       minHeight: "100svh",
       alignItems: "center",
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
+      backgroundImage: pageBackgroundImage,
       children: [
+        behindComponent && /* @__PURE__ */ jsx12(
+          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__ */ jsx12(Div_default, { width: "50%" }),
-        /* @__PURE__ */ jsx12(Div_default.column, { width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", children: /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx12(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx12(
           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,
@@ -5476,8 +5491,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 = CryptoJS.AES.encrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
     iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
     mode: CryptoJS.mode.CBC,
@@ -5493,8 +5508,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 = CryptoJS.AES.decrypt(text, CryptoJS.enc.Hex.parse(pluginConfig.encryption.secretKey), {
     iv: CryptoJS.enc.Hex.parse(pluginConfig.encryption.iv),
     mode: CryptoJS.mode.CBC,
@@ -9094,7 +9109,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);
@@ -9112,7 +9127,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());
@@ -9134,7 +9149,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());