react-better-html 1.1.190 → 1.1.192

package/dist/index.d.mts

@@ -672,6 +672,7 @@ type FormRowComponentType = {
         titleFontSize?: React.CSSProperties["fontSize"];
         description?: string;
         descriptionFontSize?: React.CSSProperties["fontSize"];
+        required?: boolean;
         alignChildren?: React.CSSProperties["justifyContent"];
         isLoading?: boolean;
         withActions?: boolean;
@@ -955,6 +956,8 @@ type SideMenuProps = {
     collapsable?: boolean;
     withCloseButton?: boolean;
     widthMobileHandle?: boolean;
+    /** @default backgroundContent */
+    backgroundColor?: React.CSSProperties["backgroundColor"];
 };
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;

package/dist/index.d.ts

@@ -672,6 +672,7 @@ type FormRowComponentType = {
         titleFontSize?: React.CSSProperties["fontSize"];
         description?: string;
         descriptionFontSize?: React.CSSProperties["fontSize"];
+        required?: boolean;
         alignChildren?: React.CSSProperties["justifyContent"];
         isLoading?: boolean;
         withActions?: boolean;
@@ -955,6 +956,8 @@ type SideMenuProps = {
     collapsable?: boolean;
     withCloseButton?: boolean;
     widthMobileHandle?: boolean;
+    /** @default backgroundContent */
+    backgroundColor?: React.CSSProperties["backgroundColor"];
 };
 type SideMenuComponentType = {
     (props: SideMenuProps): React.ReactElement;

package/dist/index.js

@@ -7680,6 +7680,7 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
   titleFontSize,
   description,
   descriptionFontSize,
+  required,
   alignChildren = "flex-start",
   isLoading,
   withActions,
@@ -7697,7 +7698,13 @@ FormRowComponent.withTitle = (0, import_react23.forwardRef)(function WithTitle({
     /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.row, { width: "100%", alignItems: "center", gap: titleGap, children: [
       icon && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Icon_default, { name: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Div_default.column, { flex: 1, gap: theme2.styles.gap / 2, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { as: titleAs, fontSize: titleFontSize, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: titleAs, fontSize: titleFontSize, children: [
+          title,
+          required && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
+            " ",
+            "*"
+          ] })
+        ] }),
         description && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Text_default, { fontSize: descriptionFontSize, color: theme2.colors.textSecondary, children: description })
       ] }),
       isLoading && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Div_default, { width: 26 - titleGap })
@@ -9378,7 +9385,7 @@ var Foldable_default = Foldable2;
 // src/components/SideMenu.tsx
 var import_react29 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ item, onClick }) {
+var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
     throw new Error(
@@ -9398,6 +9405,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
   }, [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;
@@ -9411,7 +9419,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       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,
@@ -9468,7 +9476,15 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
         overflow: "hidden",
         transition: `max-height ${theme2.styles.transition}, margin-top ${theme2.styles.transition}`,
         children: [
-          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent2, { item: child, onClick }, child.text)),
+          item.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            MenuItemComponent2,
+            {
+              item: child,
+              backgroundColor: readyBackgroundColor,
+              onClick
+            },
+            child.text
+          )),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
             Div_default,
             {
@@ -9498,9 +9514,9 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
                     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)"
                   }
                 )
@@ -9522,7 +9538,8 @@ var SideMenuComponent = function SideMenu({
   logoFontFamily,
   collapsable,
   withCloseButton,
-  widthMobileHandle
+  widthMobileHandle,
+  backgroundColor
 }) {
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
@@ -9536,7 +9553,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__ */ (0, import_jsx_runtime27.jsxs)(
     Div_default.column,
@@ -9546,7 +9564,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,
@@ -9600,7 +9618,15 @@ var SideMenuComponent = function SideMenu({
               overflowY: "auto",
               paddingInline: theme2.styles.space,
               paddingBottom: !isCollapsable && !readyBottomItems ? theme2.styles.space : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text)) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Div_default.column, { gap: theme2.styles.gap / 2, children: readyItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              )) })
             }
           ),
           readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -9612,7 +9638,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__ */ (0, import_jsx_runtime27.jsx)(MenuItemComponent, { item, onClick: onClickXButton }, item.text))
+              children: readyBottomItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                MenuItemComponent,
+                {
+                  item,
+                  backgroundColor: readyBackgroundColor,
+                  onClick: onClickXButton
+                },
+                item.text
+              ))
             }
           ),
           isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -9627,7 +9661,7 @@ var SideMenuComponent = function SideMenu({
                 {
                   alignItems: "center",
                   justifyContent: "center",
-                  backgroundColor: theme2.colors.backgroundContent,
+                  backgroundColor: readyBackgroundColor,
                   borderRadius: theme2.styles.borderRadius,
                   cursor: "pointer",
                   filterHover: filterHover().z1,
@@ -9655,7 +9689,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,
@@ -9690,7 +9724,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__ */ (0, import_jsx_runtime27.jsxs)(
     Div_default,
     {