@equinor/cpl-top-bar-react 0.5.7 → 0.6.0

package/dist/index.js

@@ -311,7 +311,7 @@ function MenuList({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { children: items.map((menuItem) => {
     if (isMenuItemGroup(menuItem)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { "data-active-catalogue": String(menuItem.isExpanded), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_eds_core_react4.Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           MenuLink,
@@ -405,6 +405,32 @@ function SideMenu({
   const [hasOverflow, setHasOverflow] = (0, import_react.useState)(false);
   const [scrolledDown, setScrolledDown] = (0, import_react.useState)(false);
   const containerRef = (0, import_react.useRef)(null);
+  const mainMenuItemsWithActiveCatalogue = (0, import_react.useMemo)(() => {
+    const pathname = typeof window !== "undefined" ? window.location.pathname : void 0;
+    if (!pathname) {
+      return;
+    }
+    return mainMenuItems.map((menuItem) => {
+      if ("items" in menuItem) {
+        return __spreadProps(__spreadValues({}, menuItem), {
+          isExpanded: menuItem.items.some((item) => pathname === item.url)
+        });
+      }
+      return menuItem;
+    });
+  }, [mainMenuItems]);
+  (0, import_react.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const activeCatalogueElement = container.querySelector(
+      '[data-active-catalogue="true"]'
+    );
+    if (activeCatalogueElement) {
+      activeCatalogueElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
   const checkOverflow = (0, import_react.useCallback)(() => {
     requestAnimationFrame(() => {
       const element = containerRef.current;
@@ -449,7 +475,7 @@ function SideMenu({
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           MenuList,
           {
-            items: mainMenuItems,
+            items: mainMenuItemsWithActiveCatalogue != null ? mainMenuItemsWithActiveCatalogue : [],
             currentEnvironment,
             appUrls,
             onToggleMenuGroup: checkOverflow,

package/dist/index.mjs

@@ -173,7 +173,7 @@ var LogoStyle = styled2.div`
 import { Button as Button2, Divider, Icon as Icon4, Typography as Typography2 } from "@equinor/eds-core-react";
 import { collapse } from "@equinor/eds-icons";
 import { tokens as tokens5 } from "@equinor/eds-tokens";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import styled5 from "styled-components";
 
 // src/SideMenu/components/MenuList.tsx
@@ -277,7 +277,7 @@ function MenuList({
 }) {
   return /* @__PURE__ */ jsx5("ul", { children: items.map((menuItem) => {
     if (isMenuItemGroup(menuItem)) {
-      return /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(Accordion, { children: /* @__PURE__ */ jsxs5(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
+      return /* @__PURE__ */ jsx5("li", { "data-active-catalogue": String(menuItem.isExpanded), children: /* @__PURE__ */ jsx5(Accordion, { children: /* @__PURE__ */ jsxs5(AccordionItem, { isExpanded: menuItem.isExpanded, children: [
         /* @__PURE__ */ jsx5(Accordion.Header, { onToggle: onToggleMenuGroup, children: menuItem.title }),
         /* @__PURE__ */ jsx5(Accordion.Panel, { "aria-label": `Links for ${menuItem.title}`, children: /* @__PURE__ */ jsx5("ul", { children: menuItem.items.map((item) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsx5(
           MenuLink,
@@ -371,6 +371,32 @@ function SideMenu({
   const [hasOverflow, setHasOverflow] = useState(false);
   const [scrolledDown, setScrolledDown] = useState(false);
   const containerRef = useRef(null);
+  const mainMenuItemsWithActiveCatalogue = useMemo(() => {
+    const pathname = typeof window !== "undefined" ? window.location.pathname : void 0;
+    if (!pathname) {
+      return;
+    }
+    return mainMenuItems.map((menuItem) => {
+      if ("items" in menuItem) {
+        return __spreadProps(__spreadValues({}, menuItem), {
+          isExpanded: menuItem.items.some((item) => pathname === item.url)
+        });
+      }
+      return menuItem;
+    });
+  }, [mainMenuItems]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const activeCatalogueElement = container.querySelector(
+      '[data-active-catalogue="true"]'
+    );
+    if (activeCatalogueElement) {
+      activeCatalogueElement.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, []);
   const checkOverflow = useCallback(() => {
     requestAnimationFrame(() => {
       const element = containerRef.current;
@@ -415,7 +441,7 @@ function SideMenu({
         /* @__PURE__ */ jsx6(
           MenuList,
           {
-            items: mainMenuItems,
+            items: mainMenuItemsWithActiveCatalogue != null ? mainMenuItemsWithActiveCatalogue : [],
             currentEnvironment,
             appUrls,
             onToggleMenuGroup: checkOverflow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/cpl-top-bar-react",
-  "version": "0.5.7",
+  "version": "0.6.0",
   "license": "MIT",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",