react-better-html 1.1.237 → 1.1.239

package/dist/index.mjs

@@ -8,6 +8,7 @@ import {
   darkenColor as darkenColor4,
   saturateColor,
   desaturateColor,
+  calculateColorContrast as calculateColorContrast2,
   generateRandomString,
   formatPhoneNumber,
   eventPreventDefault,
@@ -3293,6 +3294,7 @@ var PageHolderComponent = forwardRef8(function PageHolder({ noMaxContentWidth, c
   );
 });
 PageHolderComponent.center = forwardRef8(function Center({
+  height,
   pageBackgroundColor,
   pageBackgroundImage,
   contentMaxWidth,
@@ -3316,7 +3318,7 @@ PageHolderComponent.center = forwardRef8(function Center({
       position: "relative",
       width: "100%",
       minHeight: "100svh",
-      alignItems: "center",
+      alignItems: height !== "100%" ? "center" : void 0,
       justifyContent: "center",
       backgroundColor: pageBackgroundColor,
       backgroundImage: pageBackgroundImage,
@@ -3338,8 +3340,9 @@ PageHolderComponent.center = forwardRef8(function Center({
         /* @__PURE__ */ jsx13(Div_default.column, { position: "relative", width: `${withSideComponent ? 50 : 100}%`, alignItems: "center", zIndex: 2, children: /* @__PURE__ */ jsx13(
           ContentTag,
           {
-            width: `calc(100% - ${theme2.styles.space * 2}px)`,
+            width: `calc(100% - ${((props.margin ?? props.marginInline) !== void 0 ? parseFloat((props.margin ?? props.marginInline)?.toString() ?? "") : theme2.styles.space) * 2}px)`,
             maxWidth: !noMaxContentWidth ? contentMaxWidth ?? app.contentMaxWidth / 2 : void 0,
+            height,
             marginInline: theme2.styles.space,
             marginBlock: theme2.styles.space,
             ...props,
@@ -7348,6 +7351,7 @@ var Foldable_default = Foldable2;
 // src/components/SideMenu.tsx
 import { createContext as createContext2, memo as memo27, useCallback as useCallback18, useContext as useContext2, useEffect as useEffect16, useMemo as useMemo12, useState as useState15 } from "react";
 import {
+  calculateColorContrast,
   lightenColor as lightenColor3,
   useBetterCoreContext as useBetterCoreContext10,
   useBooleanState as useBooleanState8,
@@ -7364,7 +7368,13 @@ var useSideMenuContext = () => {
   }
   return context;
 };
-var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundColor, onClick }) {
+var MenuItemComponent = memo27(function MenuItemComponent2({
+  item,
+  backgroundColor,
+  activeItemColor,
+  hoverItemColor,
+  onClick
+}) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -7405,6 +7415,7 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
   const lineHeight = 20;
   const lineWidth = 2;
   const lineEndRadius = iconSize / 2 + iconGap * 2;
+  const backgroundColorContrast = activeItemColor ? calculateColorContrast(activeItemColor, theme2.colors.primary) : 21;
   const content = /* @__PURE__ */ jsx27(
     Tooltip_default,
     {
@@ -7423,24 +7434,33 @@ var MenuItemComponent = memo27(function MenuItemComponent2({ item, backgroundCol
           alignItems: "center",
           gap: iconGap,
           whiteSpace: "nowrap",
-          backgroundColor: isActive ? colorTheme === "dark" ? lightenColor3(theme2.colors.primary, 0.7) : lightenColor3(theme2.colors.primary, 0.85) : readyBackgroundColor,
+          backgroundColor: isActive ? activeItemColor ?? (colorTheme === "dark" ? lightenColor3(theme2.colors.primary, 0.7) : lightenColor3(theme2.colors.primary, 0.85)) : readyBackgroundColor,
+          backgroundColorHover: isActive && activeItemColor ? void 0 : hoverItemColor,
           borderRadius: theme2.styles.borderRadius,
           paddingBlock,
           paddingLeft: isCollapsed ? theme2.styles.space : paddingLeft,
           paddingRight: theme2.styles.space,
-          filterHover: `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})`,
+          filterHover: !hoverItemColor || isActive ? `brightness(${colorTheme === "dark" ? isActive ? 0.8 : 1.3 : isActive ? 0.8 : 0.95})` : void 0,
           overflow: isCollapsed ? "hidden" : void 0,
           cursor: item.disabled ? "not-allowed" : "pointer",
           opacity: item.disabled ? 0.6 : void 0,
           onClick: onClickElement,
           children: [
-            /* @__PURE__ */ jsx27(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
+            /* @__PURE__ */ jsx27(
+              Icon_default,
+              {
+                name: item.iconName,
+                color: isActive && backgroundColorContrast < 7 ? theme2.colors.base : theme2.colors.primary,
+                size: iconSize,
+                flexShrink: 0
+              }
+            ),
             /* @__PURE__ */ jsx27(
               Text_default,
               {
                 flex: 1,
                 lineHeight: `${lineHeight}px`,
-                color: isActive ? theme2.colors.primary : theme2.colors.textPrimary,
+                color: isActive ? backgroundColorContrast < 7 ? theme2.colors.base : theme2.colors.primary : theme2.colors.textPrimary,
                 opacity: isCollapsed ? 0 : void 0,
                 transition: theme2.styles.transition,
                 children: item.text
@@ -7580,6 +7600,8 @@ var SideMenuComponent = function SideMenu({
   bottomItemsAdditionalComponent,
   isLoading,
   backgroundColor,
+  activeItemColor,
+  hoverItemColor,
   gap,
   paddingTop,
   paddingBottom,
@@ -7622,6 +7644,8 @@ var SideMenuComponent = function SideMenu({
         {
           item,
           backgroundColor: readyBackgroundColor,
+          activeItemColor,
+          hoverItemColor,
           onClick: onClickXButton
         },
         item.text
@@ -7642,6 +7666,8 @@ var SideMenuComponent = function SideMenu({
         {
           item,
           backgroundColor: readyBackgroundColor,
+          activeItemColor,
+          hoverItemColor,
           onClick: onClickXButton
         },
         item.text
@@ -7898,6 +7924,7 @@ export {
   Tooltip_default as Tooltip,
   alertControls,
   alertsPlugin,
+  calculateColorContrast2 as calculateColorContrast,
   colorThemeControls2 as colorThemeControls,
   countries3 as countries,
   darkenColor4 as darkenColor,