react-better-html 1.1.186 → 1.1.188

package/dist/index.d.mts

@@ -935,13 +935,16 @@ type SideMenuItem = {
     text: string;
     iconName: IconName | AnyOtherString;
     href?: string;
-    onClick?: (item: SideMenuItem) => void;
     disabled?: boolean;
     hidden?: boolean;
     children?: SideMenuItem[];
+    /** @default true */
+    onClickCloseSideMenu?: boolean;
+    onClick?: (item: SideMenuItem) => void;
 };
 type SideMenuProps = {
     items: SideMenuItem[];
+    bottomItems?: SideMenuItem[];
     topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;

package/dist/index.d.ts

@@ -935,13 +935,16 @@ type SideMenuItem = {
     text: string;
     iconName: IconName | AnyOtherString;
     href?: string;
-    onClick?: (item: SideMenuItem) => void;
     disabled?: boolean;
     hidden?: boolean;
     children?: SideMenuItem[];
+    /** @default true */
+    onClickCloseSideMenu?: boolean;
+    onClick?: (item: SideMenuItem) => void;
 };
 type SideMenuProps = {
     items: SideMenuItem[];
+    bottomItems?: SideMenuItem[];
     topSpace?: number;
     logoAssetName?: AssetName | AnyOtherString;
     logoUrl?: string;

package/dist/index.js

@@ -9391,7 +9391,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
   const [isOpened, setIsOpened] = useBooleanState();
   const onClickElement = (0, import_react29.useCallback)(() => {
     if (item.disabled) return;
-    onClick?.();
+    if (item.onClickCloseSideMenu !== false) onClick?.();
     item.onClick?.(item);
   }, [onClick, item]);
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
@@ -9418,7 +9418,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
       overflow: isCollapsed ? "hidden" : void 0,
       cursor: item.disabled ? "not-allowed" : "pointer",
       opacity: item.disabled ? 0.6 : void 0,
-      onClick: item.children ? setIsOpened.toggle : void 0,
+      onClick: item.children ? setIsOpened.toggle : onClickElement,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon_default, { name: item.iconName, color: theme2.colors.primary, size: iconSize, flexShrink: 0 }),
         /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
@@ -9512,6 +9512,7 @@ var MenuItemComponent = (0, import_react29.memo)(function MenuItemComponent2({ i
 });
 var SideMenuComponent = function SideMenu({
   items,
+  bottomItems,
   topSpace = 0,
   logoAssetName,
   logoUrl,
@@ -9528,6 +9529,8 @@ var SideMenuComponent = function SideMenu({
     setSideMenuIsOpenMobile.setFalse();
   }, []);
   const readyItems = (0, import_react29.useMemo)(() => items.filter((item) => !item.hidden), [items]);
+  const readyBottomItems = (0, import_react29.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   const sideMenuWidth = components.sideMenu?.width ?? defaultSideMenuWidth;
@@ -9544,15 +9547,13 @@ var SideMenuComponent = function SideMenu({
       backgroundColor: theme2.colors.backgroundContent,
       borderRight: `solid 1px ${theme2.colors.border}`,
       transform: !mediaQuery.size1000 || sideMenuIsOpenMobile ? "translateX(0)" : "translateX(-100%)",
-      paddingInline: theme2.styles.space,
       paddingTop: logoAssetName || logoUrl ? theme2.styles.gap : theme2.styles.space,
-      paddingBottom: theme2.styles.space,
       transition: mediaQuery.size1000 ? !isCollapsed ? `transform ${theme2.styles.transition}` : "none" : theme2.styles.transition,
       userSelect: "none",
-      zIndex: 11,
+      zIndex: 10,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.column, { width: "100%", height: "100%", gap: theme2.styles.space, children: [
-          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", children: [
+          (logoAssetName || logoUrl || withCloseButton && mediaQuery.size1000) && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Div_default.row, { alignItems: "center", paddingInline: theme2.styles.space, children: [
             (logoAssetName || logoUrl) && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(LinkComponentTag, { to: "/", href: "/", onClick: onClickXButton, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
               Div_default.row,
               {
@@ -9589,28 +9590,58 @@ var SideMenuComponent = function SideMenu({
             ) }),
             withCloseButton && mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default.icon, { icon: "XMark", marginLeft: "auto", onClick: onClickXButton })
           ] }),
-          /* @__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)) }),
-          collapsable && !mediaQuery.size1000 && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-            Div_default.row,
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Div_default.column,
             {
-              alignItems: "center",
-              justifyContent: "center",
-              backgroundColor: theme2.colors.backgroundContent,
-              borderRadius: theme2.styles.borderRadius,
+              width: "100%",
+              height: "100%",
+              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)) })
+            }
+          ),
+          readyBottomItems && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Div_default.column,
+            {
+              borderTop: `solid 1px ${theme2.colors.border}`,
+              gap: theme2.styles.gap / 2,
               marginTop: "auto",
-              cursor: "pointer",
-              filterHover: filterHover().z1,
-              paddingBlock: theme2.styles.gap,
-              isTabAccessed: true,
-              onClick: setSideMenuIsCollapsed.toggle,
+              paddingTop: theme2.styles.space,
+              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))
+            }
+          ),
+          isCollapsable && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            Div_default,
+            {
+              borderTop: `solid 1px ${theme2.colors.border}`,
+              marginTop: !readyBottomItems ? "auto" : void 0,
+              paddingInline: theme2.styles.space,
+              paddingBlock: theme2.styles.space,
               children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
-                Icon_default,
+                Div_default.row,
                 {
-                  name: "chevronRight",
-                  size: 20,
-                  color: theme2.colors.textSecondary,
-                  transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
-                  transition: theme2.styles.transition
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: theme2.colors.backgroundContent,
+                  borderRadius: theme2.styles.borderRadius,
+                  cursor: "pointer",
+                  filterHover: filterHover().z1,
+                  isTabAccessed: true,
+                  paddingBlock: theme2.styles.gap,
+                  onClick: setSideMenuIsCollapsed.toggle,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+                    Icon_default,
+                    {
+                      name: "chevronRight",
+                      size: 20,
+                      color: theme2.colors.textSecondary,
+                      transform: `rotate(${isCollapsed ? 0 : 180}deg)`,
+                      transition: theme2.styles.transition
+                    }
+                  )
                 }
               )
             }