react-better-html 1.1.198 → 1.1.201-beta

package/dist/index.js

@@ -8947,6 +8947,10 @@ var TooltipComponent = (0, import_react27.forwardRef)(function Tooltip({
       };
     }
   }, [trigger, onClickOutside]);
+  (0, import_react27.useEffect)(() => {
+    if (!disabled) return;
+    closeTooltip();
+  }, [disabled]);
   (0, import_react27.useImperativeHandle)(
     ref,
     () => {
@@ -9454,6 +9458,15 @@ var Foldable_default = Foldable2;
 // src/components/SideMenu.tsx
 var import_react30 = require("react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+var sideMenuContext = (0, import_react30.createContext)(void 0);
+var SideMenuContextProvider = sideMenuContext.Provider;
+var useSideMenuContext = () => {
+  const context = (0, import_react30.useContext)(sideMenuContext);
+  if (!context) {
+    throw new Error("`useSideMenuContext` must be used within a `<SideMenuContextProvider>` component");
+  }
+  return context;
+};
 var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ item, backgroundColor, onClick }) {
   const reactRouterDomPlugin2 = usePlugin("react-router-dom");
   if (!reactRouterDomPlugin2) {
@@ -9466,10 +9479,12 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
   const mediaQuery = useMediaQuery();
   const location = reactRouterDomPluginConfig.useLocation();
   const { colorTheme, components, sideMenuIsCollapsed, setSideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const { activeItem, setActiveItem } = useSideMenuContext();
   const [isOpened, setIsOpened] = useBooleanState();
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const onClickElement = (0, import_react30.useCallback)(() => {
     if (item.disabled) return;
+    setActiveItem(void 0);
     if (item.children) {
       setSideMenuIsCollapsed.setFalse();
       if (isCollapsed) setTimeout(setIsOpened.setTrue, 0.1 * 1e3);
@@ -9479,7 +9494,7 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
       item.onClick?.(item);
     }
   }, [onClick, item, isCollapsed]);
-  const isActive = item.href ? location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/" : false;
+  const isActive = activeItem && item.href && activeItem.href === item.href;
   const readyBackgroundColor = backgroundColor ?? theme2.colors.backgroundContent;
   const iconSize = 16;
   const paddingBlock = theme2.styles.gap;
@@ -9491,7 +9506,10 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
   const content = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     Tooltip_default,
     {
-      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { whiteSpace: "nowrap", children: item.text }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default.row, { alignItems: "center", gap: theme2.styles.gap, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { whiteSpace: "nowrap", children: item.text }),
+        item.children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon_default, { name: "chevronDown", color: theme2.colors.textSecondary, size: 14 })
+      ] }),
       contentPointerEvents: "none",
       withArrow: true,
       childrenWrapperWidth: "100%",
@@ -9541,6 +9559,17 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
       )
     }
   );
+  (0, import_react30.useEffect)(() => {
+    if (!item.href) return;
+    const isActive2 = location.pathname === "/" ? location.pathname === item.href : location.pathname.startsWith(item.href) && item.href !== "/";
+    if (!isActive2) return;
+    setActiveItem(
+      (oldValue) => item.href ? oldValue && oldValue.length > item.href.length ? oldValue : {
+        href: item.href,
+        length: item.href.length
+      } : void 0
+    );
+  }, [location.pathname]);
   (0, import_react30.useEffect)(() => {
     if (!item.children) return;
     const toBeOpened = item.children.some(
@@ -9548,6 +9577,10 @@ var MenuItemComponent = (0, import_react30.memo)(function MenuItemComponent2({ i
     );
     setIsOpened.setState(toBeOpened);
   }, [item]);
+  (0, import_react30.useEffect)(() => {
+    if (!isCollapsed) return;
+    setIsOpened.setFalse();
+  }, [isCollapsed]);
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Div_default, { width: "100%", children: [
     item.href ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(LinkComponentTag, { to: item.href, href: item.href, onClick: onClickElement, children: content }) : content,
@@ -9634,11 +9667,19 @@ var SideMenuComponent = function SideMenu({
   const theme2 = useTheme();
   const mediaQuery = useMediaQuery();
   const { components, sideMenuIsCollapsed, setSideMenuIsCollapsed, sideMenuIsOpenMobile, setSideMenuIsOpenMobile } = useBetterHtmlContextInternal();
+  const [activeItem, setActiveItem] = (0, import_react30.useState)();
   const onClickXButton = (0, import_react30.useCallback)(() => {
     setSideMenuIsOpenMobile.setFalse();
   }, []);
   const readyItems = (0, import_react30.useMemo)(() => items.filter((item) => !item.hidden), [items]);
   const readyBottomItems = (0, import_react30.useMemo)(() => bottomItems?.filter((item) => !item.hidden), [bottomItems]);
+  const contextValue = (0, import_react30.useMemo)(
+    () => ({
+      activeItem,
+      setActiveItem
+    }),
+    [activeItem]
+  );
   const isCollapsable = collapsable && !mediaQuery.size1000;
   const isCollapsed = sideMenuIsCollapsed && !mediaQuery.size1000;
   const LinkComponentTag = components.button?.tagReplacement?.linkComponent ?? "a";
@@ -9646,7 +9687,7 @@ var SideMenuComponent = function SideMenu({
   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_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SideMenuContextProvider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     Div_default.column,
     {
       position: "fixed",
@@ -9811,7 +9852,7 @@ var SideMenuComponent = function SideMenu({
         absoluteComponent && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { position: "absolute", top: 0, left: 0, pointerEvents: "none", zIndex: 2, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { pointerEvents: "all", children: absoluteComponent }) })
       ]
     }
-  );
+  ) });
 };
 SideMenuComponent.pageHolder = function SideMenuPageHolder({ outsideComponent, ...props }) {
   const theme2 = useTheme();