react-better-html 1.1.191 → 1.1.192

package/dist/index.mjs

@@ -9299,7 +9299,7 @@ var Foldable_default = Foldable2;
 // src/components/SideMenu.tsx
 import { memo as memo26, useCallback as useCallback15, useEffect as useEffect14, useMemo as useMemo11 } from "react";
 import { jsx as jsx26, jsxs as jsxs22 } from "react/jsx-runtime";
-var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
+var MenuItemComponent = memo26(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -9319,6 +9319,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
   }, [onClick, item]);
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const isActive = item.href ? location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/" : false;
+  const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
   const paddingBlock = theme2.styles.gap;
   const paddingLeft = theme2.styles.gap + 2;
@@ -9332,7 +9333,7 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
       alignItems: "center",
       gap: iconGap,
       whiteSpace: "nowrap",
-      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : theme2.colors.backgroundContent,
+      backgroundColor: isActive ? colorTheme === "dark" ? lightenColor(theme2.colors.primary, 0.7) : lightenColor(theme2.colors.primary, 0.85) : readyBackgroundColor,
       borderRadius: theme2.styles.borderRadius,
       paddingBlock,
       paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
@@ -9389,7 +9390,15 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ jsx26(MenuItemComponent2, { item: child, onClick }, child.text)),
+          item.children.map((child) => /* @__PURE__ */ jsx26(
+            MenuItemComponent2,
+            {
+              item: child,
+              backgroundColor: readyBackgroundColor,
+              onClick
+            },
+            child.text
+          )),
           /* @__PURE__ */ jsxs22(
             Div_default,
             {
@@ -9419,9 +9428,9 @@ var MenuItemComponent = memo26(function MenuItemComponent2({ item, onClick }) {
                     left: 0,
                     border: `${lineWidth}px solid ${theme2.colors.border}`,
                     borderRadius: 999,
-                    borderTopColor: theme2.colors.backgroundContent,
-                    borderLeftColor: theme2.colors.backgroundContent,
-                    borderRightColor: theme2.colors.backgroundContent,
+                    borderTopColor: readyBackgroundColor,
+                    borderLeftColor: readyBackgroundColor,
+                    borderRightColor: readyBackgroundColor,
                     transform: "rotate(45deg)"
                   }
                 )
@@ -9443,7 +9452,8 @@ var SideMenuComponent = function SideMenu({
   logoFontFamily,
   collapsable,
   withCloseButton,
-  widthMobileHandle
+  widthMobileHandle,
+  backgroundColor
 }) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
@@ -9457,7 +9467,8 @@ var SideMenuComponent = function SideMenu({
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
-  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
+  const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const logoSize = sideMenuCollapsedWidth - theme2.styles.space * 2;
   return /* @__PURE__ */ jsxs22(
     Div_default.column,
@@ -9467,7 +9478,7 @@ var SideMenuComponent = function SideMenu({
       height: `calc(100svh - ${topSpace}px)`,
       top: topSpace,
       left: 0,
-      backgroundColor: theme2.colors.backgroundContent,
+      backgroundColor: readyBackgroundColor,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
       paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
@@ -9521,7 +9532,15 @@ var SideMenuComponent = function SideMenu({
               overflowY: "auto",
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-              children: /* @__PURE__ */ jsx26(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
+              children: /* @__PURE__ */ jsx26(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ jsx26(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              )) })
             }
           ),
           readyBottomItems && /* @__PURE__ */ jsx26(
@@ -9533,7 +9552,15 @@ var SideMenuComponent = function SideMenu({
               paddingTop: mediaQuery.size1000 ? theme2.styles.space : void 0,
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable ? theme2.styles.space : void 0,
-              children: readyBottomItems.map((item) => /* @__PURE__ */ jsx26(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
+              children: readyBottomItems.map((item) => /* @__PURE__ */ jsx26(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              ))
             }
           ),
           isCollapsable && /* @__PURE__ */ jsx26(
@@ -9548,7 +9575,7 @@ var SideMenuComponent = function SideMenu({
                 {
                   alignItems: "center",
                   justifyContent: "center",
-                  backgroundColor: theme2.colors.backgroundContent,
+                  backgroundColor: readyBackgroundColor,
                   borderRadius: theme2.styles.borderRadius,
                   cursor: "pointer",
                   filterHover: filterHover().z1,
@@ -9576,7 +9603,7 @@ var SideMenuComponent = function SideMenu({
             position: "absolute",
             top: theme2.styles.space,
             left: "100%",
-            backgroundColor: theme2.colors.backgroundContent,
+            backgroundColor: readyBackgroundColor,
             border: `solid 1px ${theme2.colors.border}`,
             borderLeft: "none",
             borderTopRightRadius: theme2.styles.borderRadius,
@@ -9611,7 +9638,7 @@ SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, .
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed } = useBetterHtmlContextInternal();
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
-  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + 1 + theme2.styles.space;
+  const sideMenuCollapsedWidth = theme2.styles.space + theme2.styles.space * 2 + 16 + theme2.styles.space;
   return /* @__PURE__ */ jsxs22(
     Div_default,
     {