ECHOES-1448 Auto-open SidebarNavigation accordions when a child item becomes active

src/components/layout/sidebar-navigation/SidebarNavigationAccordionChildItem.tsx

@@ -18,8 +18,17 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import { useContext, useLayoutEffect, useRef } from 'react';
+import { useMatch, useResolvedPath } from 'react-router-dom';
+import { isDefined } from '~common/helpers/types';
+
 import { SidebarNavigationBaseItem } from './SidebarNavigationBaseItem';
 
+import {
+  SidebarNavigationAccordionContext,
+  type SidebarNavigationAccordionChildActiveHandler,
+} from './SidebarNavigationAccordionContext';
+
 import {
   SidebarNavigationIconComponent,
   SidebarNavigationItemBaseProps,
@@ -36,7 +45,54 @@ export interface SidebarNavigationAccordionChildItemProps extends SidebarNavigat
 export function SidebarNavigationAccordionChildItem(
   props: Readonly<SidebarNavigationAccordionChildItemProps>,
 ) {
-  return <SidebarNavigationBaseItem {...props} />;
+  const handleChildActive = useContext(SidebarNavigationAccordionContext);
+
+  if (!isDefined(handleChildActive)) {
+    return <SidebarNavigationBaseItem {...props} />;
+  }
+
+  return (
+    <SidebarNavigationAccordionChildItemWithAutoOpen
+      handleChildActive={handleChildActive}
+      {...props}
+    />
+  );
 }
 
 SidebarNavigationAccordionChildItem.displayName = 'SidebarNavigationAccordionChildItem';
+
+type SidebarNavigationAccordionChildItemWithAutoOpenProps =
+  SidebarNavigationAccordionChildItemProps & {
+    handleChildActive: SidebarNavigationAccordionChildActiveHandler;
+  };
+
+function SidebarNavigationAccordionChildItemWithAutoOpen(
+  props: Readonly<SidebarNavigationAccordionChildItemWithAutoOpenProps>,
+) {
+  const { handleChildActive, isActive, isMatchingFullPath = false, to, ...restProps } = props;
+
+  const resolvedPath = useResolvedPath(to);
+  const routeMatch = useMatch({ end: isMatchingFullPath, path: resolvedPath.pathname });
+  const resolvedIsActive = isDefined(isActive) ? isActive : isDefined(routeMatch);
+  const wasActiveRef = useRef(false);
+
+  useLayoutEffect(() => {
+    if (resolvedIsActive && !wasActiveRef.current) {
+      handleChildActive();
+    }
+
+    wasActiveRef.current = resolvedIsActive;
+  }, [handleChildActive, resolvedIsActive]);
+
+  return (
+    <SidebarNavigationBaseItem
+      {...restProps}
+      isActive={isActive}
+      isMatchingFullPath={isMatchingFullPath}
+      to={to}
+    />
+  );
+}
+
+SidebarNavigationAccordionChildItemWithAutoOpen.displayName =
+  'SidebarNavigationAccordionChildItemWithAutoOpen';

src/components/layout/sidebar-navigation/SidebarNavigationAccordionContext.ts

@@ -0,0 +1,33 @@
+/*
+ * Echoes React
+ * Copyright (C) 2023-2025 SonarSource Sàrl
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+
+import { createContext } from 'react';
+
+/**
+ * @internal
+ */
+export type SidebarNavigationAccordionChildActiveHandler = VoidFunction;
+
+/**
+ * @internal
+ */
+export const SidebarNavigationAccordionContext = createContext<
+  SidebarNavigationAccordionChildActiveHandler | undefined
+>(undefined);

src/components/layout/sidebar-navigation/SidebarNavigationAccordionItem.tsx

@@ -20,9 +20,7 @@
 
 import styled from '@emotion/styled';
 
-import { ReactNode, Ref, useCallback, useEffect, useId, useRef, useState } from 'react';
-
-import { isDefined } from '~common/helpers/types';
+import { ReactNode, Ref, useEffect, useId, useRef } from 'react';
 import { TextNode } from '~types/utils';
 import { cssVar } from '~utils/design-tokens';
 import { IconChevronDown, IconChevronRight } from '../../icons';
@@ -34,8 +32,10 @@ import {
   SidebarNavigationItemLabel,
 } from './SidebarNavigationItemStyles';
 
+import { SidebarNavigationAccordionContext } from './SidebarNavigationAccordionContext';
 import { SidebarNavigationIconComponent } from './SidebarNavigationTypes';
 import { TOOLTIP_DELAY_IN_MS } from './utils';
+import { useSidebarNavigationAccordionState } from './useSidebarNavigationAccordionState';
 
 interface SidebarNavigationAccordionItemCommonProps {
   /**
@@ -53,7 +53,8 @@ interface SidebarNavigationAccordionItemCommonProps {
   className?: string;
   /**
    * Whether to disable the tooltip on the accordion item or not.
-   * By default the tooltip is enabled, it should only be disabled if you don't expect the content to be ellipsed.
+   * By default the tooltip is enabled, it should only be disabled if you don't expect the content
+   * to be ellipsed.
    * @defaultValue false
    */
   disableTooltip?: boolean;
@@ -67,15 +68,20 @@ interface SidebarNavigationAccordionItemCommonProps {
    */
   label: TextNode;
   /**
-   * The onClose callback is called when the accordion is closed.
+   * Called when the accordion closes in uncontrolled mode. In controlled mode, called when the
+   * user requests closing it.
    */
   onClose?: VoidFunction;
   /**
-   * The onOpen callback is called when the accordion is opened.
+   * Called when the accordion opens in uncontrolled mode, including automatic opening when a child
+   * becomes active on the first render or later. In controlled mode, called when the user
+   * requests opening it.
    */
   onOpen?: VoidFunction;
   /**
-   * Called with the next open state when the user toggles the accordion.
+   * Called with the next open state when the accordion changes in uncontrolled mode, including
+   * automatic opening when a child becomes active on the first render or later. In controlled
+   * mode, called when the user requests a state change.
    */
   onOpenChange?: (isOpen: boolean) => void;
   /**
@@ -89,7 +95,8 @@ interface SidebarNavigationAccordionItemCommonProps {
    */
   scrollLastChildIntoViewOnOpen?: boolean;
   /**
-   * Optional content to display on the right, before the chevron. Typically badges, item count and similar metadata.
+   * Optional content to display on the right, before the chevron. Typically badges, item count,
+   * and similar metadata.
    */
   suffix?: ReactNode;
 }
@@ -140,10 +147,17 @@ export function SidebarNavigationAccordionItem(
     ...htmlProps
   } = props;
 
-  const [internalOpen, setInternalOpen] = useState(isDefaultOpen);
-  const open = isDefined(isOpen) ? isOpen : internalOpen;
   const panelRef = useRef<HTMLElement>(null);
 
+  const { handleChildActive, handleToggle, open, shouldAutoOpenOnActiveChild } =
+    useSidebarNavigationAccordionState({
+      isDefaultOpen,
+      isOpen,
+      onClose,
+      onOpen,
+      onOpenChange,
+    });
+
   useEffect(() => {
     if (open && scrollLastChildIntoViewOnOpen) {
       const lastChild = panelRef.current?.querySelector('li:last-child');
@@ -154,23 +168,7 @@ export function SidebarNavigationAccordionItem(
   const accordionId = `${useId()}sidebar-accordion`;
   const accordionPanelId = `${accordionId}-panel`;
 
-  const handleClick = useCallback(() => {
-    const nextOpen = !open;
-
-    if (!isDefined(isOpen)) {
-      setInternalOpen(nextOpen);
-    }
-
-    onOpenChange?.(nextOpen);
-
-    if (nextOpen) {
-      onOpen?.();
-    } else {
-      onClose?.();
-    }
-  }, [isOpen, onClose, onOpen, onOpenChange, open]);
-
-  return (
+  const content = (
     <AccordionWrapper>
       <Tooltip
         content={disableTooltip ? undefined : label}
@@ -182,7 +180,7 @@ export function SidebarNavigationAccordionItem(
           aria-expanded={open}
           aria-label={ariaLabel}
           id={accordionId}
-          onClick={handleClick}
+          onClick={handleToggle}
           ref={ref}
           type="button">
           <Icon css={sidebarNavigationItemIconStyles} isFilled={false} />
@@ -208,6 +206,16 @@ export function SidebarNavigationAccordionItem(
       </AccordionItemPanel>
     </AccordionWrapper>
   );
+
+  if (!shouldAutoOpenOnActiveChild) {
+    return content;
+  }
+
+  return (
+    <SidebarNavigationAccordionContext.Provider value={handleChildActive}>
+      {content}
+    </SidebarNavigationAccordionContext.Provider>
+  );
 }
 
 SidebarNavigationAccordionItem.displayName = 'SidebarNavigationAccordionItem';