@scm-manager/ui-components 3.7.2-20250119-163935 → 3.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.7.2-20250119-163935",
+  "version": "3.7.2",
   "description": "UI Components for SCM-Manager and its plugins",
   "main": "src/index.ts",
   "files": [
@@ -32,14 +32,14 @@
     "react-query": "^3.39.2"
   },
   "devDependencies": {
-    "@scm-manager/ui-tests": "3.7.2-20250119-163935",
-    "@scm-manager/ui-types": "3.7.2-20250119-163935",
+    "@scm-manager/ui-tests": "3.7.2",
+    "@scm-manager/ui-types": "3.7.2",
     "@types/fetch-mock": "^7.3.1",
     "@types/react-select": "^2.0.19",
     "@types/unist": "^2.0.3",
     "gitdiff-parser": "^0.2.2",
     "i18next-fetch-backend": "4",
-    "webpack": "^5.76.0",
+    "webpack": "^5.72.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",
@@ -67,17 +67,17 @@
     "@scm-manager/jest-preset": "^2.14.1",
     "@scm-manager/prettier-config": "^2.12.0",
     "@scm-manager/tsconfig": "^2.13.0",
-    "@scm-manager/ui-syntaxhighlighting": "3.7.2-20250119-163935",
-    "@scm-manager/ui-shortcuts": "3.7.2-20250119-163935",
-    "@scm-manager/ui-text": "3.7.2-20250119-163935"
+    "@scm-manager/ui-syntaxhighlighting": "3.7.2",
+    "@scm-manager/ui-shortcuts": "3.7.2",
+    "@scm-manager/ui-text": "3.7.2"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.7.2-20250119-163935",
-    "@scm-manager/ui-overlays": "3.7.2-20250119-163935",
-    "@scm-manager/ui-layout": "3.7.2-20250119-163935",
-    "@scm-manager/ui-buttons": "3.7.2-20250119-163935",
-    "@scm-manager/ui-api": "3.7.2-20250119-163935",
-    "@scm-manager/ui-extensions": "3.7.2-20250119-163935",
+    "@scm-manager/ui-core": "3.7.2",
+    "@scm-manager/ui-overlays": "3.7.2",
+    "@scm-manager/ui-layout": "3.7.2",
+    "@scm-manager/ui-buttons": "3.7.2",
+    "@scm-manager/ui-api": "3.7.2",
+    "@scm-manager/ui-extensions": "3.7.2",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

package/src/__snapshots__/storyshots.test.ts.snap

@@ -78158,18 +78158,11 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
           collapsed={false}
           onClick={[Function]}
           type="button"
         >
-          <i
-            className="SecondaryNavigation__Icon-sc-8p1rgi-1 gqxbcY is-medium"
-          >
-            <i
-              className="fas fa-caret-down"
-            />
-          </i>
           Hitchhiker
         </button>
         <ul
@@ -78222,7 +78215,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
           collapsed={false}
           onClick={[Function]}
           type="button"
@@ -78285,7 +78278,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
           collapsed={false}
           onClick={[Function]}
           type="button"
@@ -78376,7 +78369,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
           collapsed={false}
           onClick={[Function]}
           type="button"

package/src/layout/SecondaryNavigationColumn.tsx

@@ -17,7 +17,6 @@
 import React, { FC } from "react";
 import styled from "styled-components";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
-import { SecondaryNavigationProvider } from "../navigation/SecondaryNavigationContext";
 
 const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   flex: 0 0 auto;
@@ -29,7 +28,7 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-const SecondaryNavigationColumnIntern: FC = ({ children }) => {
+const SecondaryNavigationColumn: FC = ({ children }) => {
   const { collapsed } = useSecondaryNavigation();
 
   return (
@@ -39,12 +38,4 @@ const SecondaryNavigationColumnIntern: FC = ({ children }) => {
   );
 };
 
-const SecondaryNavigationColumn: FC = ({ children }) => {
-  return (
-    <SecondaryNavigationProvider>
-      <SecondaryNavigationColumnIntern>{children}</SecondaryNavigationColumnIntern>
-    </SecondaryNavigationProvider>
-  );
-};
-
 export default SecondaryNavigationColumn;

package/src/navigation/ExternalNavLink.tsx

@@ -14,10 +14,11 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, useContext } from "react";
 import classNames from "classnames";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import ExternalLink from "./ExternalLink";
+import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 
 type Props = {
   to: string;
@@ -27,6 +28,7 @@ type Props = {
 
 const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
   const { collapsed } = useSecondaryNavigation();
+  const isSecondaryNavigation = useContext(SecondaryNavigationContext);
 
   let showIcon;
   if (icon) {
@@ -41,7 +43,7 @@ const ExternalNavLink: FC<Props> = ({ to, icon, label }) => {
     <li title={collapsed ? label : undefined}>
       <ExternalLink to={to} className={collapsed ? "has-text-centered" : ""} aria-label={collapsed ? label : undefined}>
         {showIcon}
-        {collapsed ? null : label}
+        {isSecondaryNavigation && collapsed ? null : label}
       </ExternalLink>
     </li>
   );

package/src/navigation/NavLink.tsx

@@ -17,11 +17,12 @@
 import React, { FC, useContext, useEffect } from "react";
 import classNames from "classnames";
 import { Link } from "react-router-dom";
-import { createAttributesForTesting } from "@scm-manager/ui-core";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import { RoutingProps } from "./RoutingProps";
-import { SubNavigationContext } from "./SubNavigationContext";
 import useActiveMatch from "./useActiveMatch";
+import { createAttributesForTesting } from "@scm-manager/ui-core";
+import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
+import { SubNavigationContext } from "./SubNavigationContext";
 
 type Props = RoutingProps & {
   label: string;
@@ -50,13 +51,14 @@ const NavLinkContent: FC<NavLinkContentProp> = ({ label, icon, collapsed }) => (
 const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, testId, children, ...contentProps }) => {
   const active = useActiveMatch({ to, activeWhenMatch, activeOnlyWhenExact });
   const { collapsed, setCollapsible } = useSecondaryNavigation();
+  const isSecondaryNavigation = useContext(SecondaryNavigationContext);
   const isSubNavigation = useContext(SubNavigationContext);
 
   useEffect(() => {
-    if (active) {
+    if (isSecondaryNavigation && active) {
       setCollapsible(!isSubNavigation);
     }
-  }, [active, isSubNavigation, setCollapsible]);
+  }, [active, isSecondaryNavigation, isSubNavigation, setCollapsible]);
 
   return (
     <li title={collapsed ? title : undefined}>
@@ -67,7 +69,11 @@ const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, t
         aria-label={collapsed ? title : undefined}
         {...(active ? { "aria-current": "page" } : {})}
       >
-        {children || <NavLinkContent {...contentProps} collapsed={collapsed} />}
+        {children ? (
+          children
+        ) : (
+          <NavLinkContent {...contentProps} collapsed={(isSecondaryNavigation && collapsed) ?? false} />
+        )}
       </Link>
     </li>
   );

package/src/navigation/SecondaryNavigation.stories.tsx

@@ -16,13 +16,12 @@
 
 import { storiesOf } from "@storybook/react";
 import React, { ReactElement } from "react";
-import { MemoryRouter } from "react-router-dom";
-import styled from "styled-components";
-import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
-import { SecondaryNavigationProvider } from "./SecondaryNavigationContext";
 import SecondaryNavigation from "./SecondaryNavigation";
 import SecondaryNavigationItem from "./SecondaryNavigationItem";
+import styled from "styled-components";
 import SubNavigation from "./SubNavigation";
+import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
+import { MemoryRouter } from "react-router-dom";
 
 const Columns = styled.div`
   margin: 2rem;
@@ -47,9 +46,7 @@ const withRoute = (route: string) => {
 storiesOf("Secondary Navigation", module)
   .addDecorator((story) => (
     <Columns className="columns">
-      <div className="column is-3">
-        <SecondaryNavigationProvider>{story()}</SecondaryNavigationProvider>
-      </div>
+      <div className="column is-3">{story()}</div>
     </Columns>
   ))
   .add("Default", () =>

package/src/navigation/SecondaryNavigation.tsx

@@ -16,8 +16,10 @@
 
 import React, { FC } from "react";
 import styled from "styled-components";
+import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
+import { SecondaryNavigationContext } from "./SecondaryNavigationContext";
 import { Button } from "@scm-manager/ui-buttons";
 
 type Props = {
@@ -71,9 +73,14 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
   const menuAriaLabel = collapsed ? t("secondaryNavigation.showContent") : t("secondaryNavigation.hideContent");
 
   return (
-    <SectionContainer className="menu" collapsed={collapsed}>
+    <SectionContainer className="menu" collapsed={collapsed ?? false}>
       <div>
-        <MenuButton className="menu-label" collapsed={collapsed} onClick={toggleCollapse} aria-label={menuAriaLabel}>
+        <MenuButton
+          className={classNames("menu-label", { "is-clickable": true })}
+          collapsed={collapsed}
+          onClick={toggleCollapse}
+          aria-label={menuAriaLabel}
+        >
           {isCollapsible ? (
             <Icon className="is-medium" collapsed={collapsed}>
               {arrowIcon}
@@ -81,7 +88,9 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
           ) : null}
           {collapsed ? "" : label}
         </MenuButton>
-        <ul className="menu-list">{children}</ul>
+        <ul className="menu-list">
+          <SecondaryNavigationContext.Provider value={true}>{children}</SecondaryNavigationContext.Provider>
+        </ul>
       </div>
     </SectionContainer>
   );

package/src/navigation/SecondaryNavigationContext.ts

@@ -0,0 +1,19 @@
+/*
+ * Copyright (c) 2020 - present Cloudogu GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * 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 Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+
+import React from "react";
+
+export const SecondaryNavigationContext = React.createContext(false);

package/src/useSecondaryNavigation.tsx

@@ -15,14 +15,17 @@
  */
 
 import { useLocalStorage } from "@scm-manager/ui-api";
-import { useCallback, useContext } from "react";
-import { SecondaryNavigationContext } from "./navigation/SecondaryNavigationContext";
+import { useCallback, useMemo } from "react";
 
 export const useSecondaryNavigation = (isNavigationCollapsible = true) => {
-  const { collapsible, setCollapsible } = useContext(SecondaryNavigationContext);
-  const [isCollapsed, setCollapsed] = useLocalStorage("secondaryNavigation.collapsed", false);
+  const [isCollapsed, setCollapsed] = useLocalStorage<boolean>("secondaryNavigation.collapsed", false);
+  const [isRouteCollapsible, setRouteCollapsible] = useLocalStorage<boolean>("secondaryNavigation.collapsible", true);
 
-  const collapsed = collapsible && isCollapsed;
+  const collapsible = useMemo(
+    () => isRouteCollapsible && isNavigationCollapsible,
+    [isNavigationCollapsible, isRouteCollapsible]
+  );
+  const collapsed = useMemo(() => collapsible && isCollapsed, [collapsible, isCollapsed]);
 
   const toggleCollapse = useCallback(() => {
     if (collapsible) {
@@ -30,10 +33,13 @@ export const useSecondaryNavigation = (isNavigationCollapsible = true) => {
     }
   }, [collapsible, setCollapsed]);
 
-  return {
-    collapsed,
-    collapsible,
-    setCollapsible,
-    toggleCollapse,
-  };
+  return useMemo(
+    () => ({
+      collapsed,
+      collapsible,
+      setCollapsible: setRouteCollapsible,
+      toggleCollapse,
+    }),
+    [collapsed, collapsible, setRouteCollapsible, toggleCollapse]
+  );
 };

package/src/navigation/SecondaryNavigationContext.tsx

@@ -1,37 +0,0 @@
-/*
- * Copyright (c) 2020 - present Cloudogu GmbH
- *
- * This program is free software: you can redistribute it and/or modify it under
- * the terms of the GNU Affero General Public License as published by the Free
- * Software Foundation, version 3.
- *
- * 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 Affero General Public License for more
- * details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program. If not, see https://www.gnu.org/licenses/.
- */
-
-import React, { ReactNode, useMemo, useState } from "react";
-
-type SecondaryNavigationContextState = {
-  collapsible: boolean;
-  setCollapsible: (collapsed: boolean) => void;
-};
-
-const dummy: SecondaryNavigationContextState = {
-  collapsible: false,
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  setCollapsible: () => {},
-};
-
-export const SecondaryNavigationContext = React.createContext<SecondaryNavigationContextState>(dummy);
-
-export const SecondaryNavigationProvider = ({ children }: { children: ReactNode }) => {
-  const [collapsible, setCollapsible] = useState(true);
-  const contextValue = useMemo(() => ({ collapsible, setCollapsible }), [collapsible, setCollapsible]);
-
-  return <SecondaryNavigationContext.Provider value={contextValue}>{children}</SecondaryNavigationContext.Provider>;
-};