@scm-manager/ui-components 3.10.4-20250824-132529 → 4.0.0-REACT18-20250824-143504

package/src/modals/Modal.tsx

@@ -14,10 +14,10 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, MutableRefObject, useRef } from "react";
+import React, { FC, MutableRefObject, ReactNode, useRef } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
-import { Dialog } from "@headlessui/react";
+import { Dialog, DialogTitle } from "@headlessui/react";
 import { devices } from "../devices";
 import useRegisterModal from "./useRegisterModal";
 
@@ -37,13 +37,14 @@ type Props = {
   size?: ModalSize;
   initialFocusRef?: MutableRefObject<HTMLElement | null>;
   overflowVisible?: boolean;
+  children?: ReactNode;
 };
 
 const SizedModal = styled.div<{ size?: ModalSize; overflow: string }>`
-  width: ${props => (props.size ? `${modalSizes[props.size]}%` : "640px")};
-  overflow: ${props => props.overflow};
+  width: ${(props) => (props.size ? `${modalSizes[props.size]}%` : "640px")};
+  overflow: ${(props) => props.overflow};
   @media screen and (max-width: ${devices.mobile.width}px) {
-    width: ${props => (props.size ? `${modalSizes[props.size]}%` : "320px")};
+    width: ${(props) => (props.size ? `${modalSizes[props.size]}%` : "320px")};
   }
 `;
 
@@ -59,7 +60,7 @@ export const Modal: FC<Props> = ({
   headTextColor = "secondary-most",
   size,
   initialFocusRef,
-  overflowVisible
+  overflowVisible,
 }) => {
   useRegisterModal(active);
   const closeButtonRef = useRef<HTMLButtonElement | null>(null);
@@ -81,13 +82,13 @@ export const Modal: FC<Props> = ({
         { "is-active": active },
         `is-overflow-${overflowAttribute}`,
         `is-border-bottom-radius-${borderBottomRadiusAttribute}`,
-        className
+        "modal-background",
+        className,
       )}
       initialFocus={initialFocusRef ?? closeButtonRef}
     >
-      <Dialog.Overlay className="modal-background" />
       <SizedModal className="modal-card" size={size} overflow={overflowAttribute}>
-        <Dialog.Title as="header" className={classNames("modal-card-head", `has-background-${headColor}`)}>
+        <DialogTitle as="header" className={classNames("modal-card-head", `has-background-${headColor}`)}>
           <h2 className={`modal-card-title m-0 has-text-${headTextColor}`}>{title}</h2>
           <button
             className="delete"
@@ -95,12 +96,12 @@ export const Modal: FC<Props> = ({
             onClick={closeFunction}
             ref={!initialFocusRef ? closeButtonRef : undefined}
           />
-        </Dialog.Title>
+        </DialogTitle>
         <section
           className={classNames(
             "modal-card-body",
             `is-overflow-${overflowAttribute}`,
-            `is-border-bottom-radius-${borderBottomRadiusAttribute}`
+            `is-border-bottom-radius-${borderBottomRadiusAttribute}`,
           )}
         >
           {body || children}

package/src/modals/useRegisterModal.test.tsx

@@ -14,14 +14,14 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { renderHook } from "@testing-library/react-hooks";
-import React, { FC } from "react";
+import { renderHook } from "@testing-library/react";
+import React, { FC, ReactNode } from "react";
 import ActiveModalCountContext, { ModalStateContextType } from "./activeModalCountContext";
 import useRegisterModal from "./useRegisterModal";
 
 const createWrapper =
-  (context: ModalStateContextType): FC =>
-  ({ children }) => {
+  (context: ModalStateContextType): FC<{ children: ReactNode }> =>
+  ({ children }: { children: React.ReactNode }) => {
     return <ActiveModalCountContext.Provider value={context}>{children}</ActiveModalCountContext.Provider>;
   };
 
@@ -83,6 +83,7 @@ describe("useRegisterModal", () => {
     const decrement = jest.fn();
 
     const result = renderHook(({ active }: { active: boolean }) => useRegisterModal(active), {
+      // @ts-ignore
       wrapper: createWrapper({ value: 0, increment, decrement }),
       initialProps: { active: true },
     });

package/src/navigation/MenuContext.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useContext, useState } from "react";
+import React, { FC, ReactNode, useContext, useState } from "react";
 
 export type MenuContext = {
   isCollapsed: () => boolean;
@@ -31,7 +31,7 @@ export const MenuContext = React.createContext<MenuContext>({
   setCollapsed() {},
 });
 
-export const StateMenuContextProvider: FC = ({ children }) => {
+export const StateMenuContextProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [collapsed, setCollapsed] = useState(false);
 
   const context = {

package/src/navigation/NavLink.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useContext, useEffect } from "react";
+import React, { FC, ReactNode, useContext, useEffect } from "react";
 import classNames from "classnames";
 import { Link } from "react-router-dom";
 import { createAttributesForTesting } from "@scm-manager/ui-core";
@@ -28,6 +28,7 @@ type Props = RoutingProps & {
   title?: string;
   icon?: string;
   testId?: string;
+  children?: ReactNode;
 };
 
 type NavLinkContentProp = {
@@ -47,8 +48,8 @@ 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 NavLink: FC<Props> = ({ to, activeOnlyWhenExact, activeWhenMatch, title, testId, children, ...contentProps }) => {
+  const active = useActiveMatch({ to, activeOnlyWhenExact, activeWhenMatch });
   const { collapsed, setCollapsible } = useSecondaryNavigation();
   const isSubNavigation = useContext(SubNavigationContext);
 
@@ -73,8 +74,4 @@ const NavLink: FC<Props> = ({ to, activeWhenMatch, activeOnlyWhenExact, title, t
   );
 };
 
-NavLink.defaultProps = {
-  activeOnlyWhenExact: true,
-};
-
 export default NavLink;

package/src/navigation/PrimaryNavigation.tsx

@@ -53,7 +53,7 @@ const PrimaryNavigation: FC<Props> = ({ links }) => {
 
     const extensionProps = {
       links,
-      label: t("primary-navigation.first-menu")
+      label: t("primary-navigation.first-menu"),
     };
 
     const append = createNavigationAppender(navItems);
@@ -79,7 +79,7 @@ const PrimaryNavigation: FC<Props> = ({ links }) => {
         name="primary-navigation"
         renderAll={true}
         props={{
-          links
+          links,
         }}
       />
     );

package/src/navigation/PrimaryNavigationLink.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC } from "react";
-import { useRouteMatch, Link } from "react-router-dom";
+import { useLocation, NavLink } from "react-router-dom";
 import { createAttributesForTesting } from "../devBuild";
 import classNames from "classnames";
 
@@ -28,16 +28,17 @@ type Props = {
 };
 
 const PrimaryNavigationLink: FC<Props> = ({ to, match, testId, label, className }) => {
-  const routeMatch = useRouteMatch({ path: match });
+  const location = useLocation();
+  const isActive = new RegExp(match).test(location.pathname);
 
   return (
-    <Link
+    <NavLink
       to={to}
-      className={classNames(className, "navbar-item", { "is-active": routeMatch })}
+      className={() => classNames(className, "navbar-item", { "is-active": isActive })}
       {...createAttributesForTesting(testId)}
     >
       {label}
-    </Link>
+    </NavLink>
   );
 };
 

package/src/navigation/RoutingProps.ts

@@ -14,10 +14,8 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { RouteProps } from "react-router-dom";
-
 export type RoutingProps = {
   to: string;
   activeOnlyWhenExact?: boolean;
-  activeWhenMatch?: (route: RouteProps) => boolean;
+  activeWhenMatch?: string;
 };

package/src/navigation/SecondaryNavigation.stories.tsx

@@ -14,16 +14,101 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
-import React, { ReactElement } from "react";
+// 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 SubNavigation from "./SubNavigation";
+//
+// const Columns = styled.div`
+//   margin: 2rem;
+// `;
+//
+// const starships = (
+//   <SubNavigation to="/hitchhiker/starships" label="Starships">
+//     <SecondaryNavigationItem
+//       to="/hitchhiker/starships/heart-of-gold"
+//       icon="fas fa-star"
+//       label="Heart Of Gold"
+//       title="Heart Of Gold"
+//     />
+//     <SecondaryNavigationItem to="/hitchhiker/starships/titanic" label="Titanic" title="Starship Titanic" />
+//   </SubNavigation>
+// );
+//
+// const withRoute = (route: string) => {
+//   return (story: ReactElement<any>) => <MemoryRouter initialEntries={[route]}>{story}</MemoryRouter>;
+// };
+//
+// storiesOf("Secondary Navigation", module)
+//   .addDecorator((story) => (
+//     <Columns className="columns">
+//       <div className="column is-3">
+//         <SecondaryNavigationProvider>{story()}</SecondaryNavigationProvider>
+//       </div>
+//     </Columns>
+//   ))
+//   .add("Default", () =>
+//     withRoute("/")(
+//       <SecondaryNavigation label="Hitchhiker">
+//         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+//         <SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
+//       </SecondaryNavigation>
+//     )
+//   )
+//   .add("Sub Navigation", () =>
+//     withRoute("/")(
+//       <SecondaryNavigation label="Hitchhiker">
+//         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+//         {starships}
+//       </SecondaryNavigation>
+//     )
+//   )
+//   .add("Extension Point", () => {
+//     const binder = new Binder("menu");
+//     binder.bind("subnav.sample", starships);
+//     return withRoute("/hitchhiker/starships/titanic")(
+//       <BinderContext.Provider value={binder}>
+//         <SecondaryNavigation label="Hitchhiker">
+//           <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+//           <ExtensionPoint name="subnav.sample" renderAll={true} />
+//         </SecondaryNavigation>
+//       </BinderContext.Provider>
+//     );
+//   })
+//   .add("Active when match", () =>
+//     withRoute("/hog")(
+//       <SecondaryNavigation label="Hitchhiker">
+//         <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+//         {/*TODO: fix after useAcitveMatch works*/}
+//         <SecondaryNavigationItem
+//           // activeWhenMatch={(route) => route.location?.pathname === "/hog"}
+//           to="/heart-of-gold"
+//           icon="fas fa-star"
+//           label="Heart Of Gold"
+//           title="Heart Of Gold"
+//         />
+//       </SecondaryNavigation>
+//     )
+//   );
+
+import React from "react";
 import { MemoryRouter } from "react-router-dom";
 import styled from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Binder, ExtensionPoint, BinderContext } from "@scm-manager/ui-extensions";
+
 import { SecondaryNavigationProvider } from "./SecondaryNavigationContext";
 import SecondaryNavigation from "./SecondaryNavigation";
 import SecondaryNavigationItem from "./SecondaryNavigationItem";
 import SubNavigation from "./SubNavigation";
 
+// --- Helfer-Komponenten und Mock-Daten (aus der Original-Story übernommen) ---
+
 const Columns = styled.div`
   margin: 2rem;
 `;
@@ -40,38 +125,61 @@ const starships = (
   </SubNavigation>
 );
 
-const withRoute = (route: string) => {
-  return (story: ReactElement<any>) => <MemoryRouter initialEntries={[route]}>{story}</MemoryRouter>;
+// --- Storybook Metadaten ---
+
+const meta: Meta<typeof SecondaryNavigation> = {
+  title: "Navigation/SecondaryNavigation",
+  component: SecondaryNavigation,
+  // Dieser Decorator wendet das Layout und den notwendigen Provider auf alle Stories an.
+  decorators: [
+    (Story) => <MemoryRouter initialEntries={["/"]}>{Story()}</MemoryRouter>,
+    (Story) => (
+      <Columns className="columns">
+        <div className="column is-3">
+          <SecondaryNavigationProvider>
+            <Story />
+          </SecondaryNavigationProvider>
+        </div>
+      </Columns>
+    ),
+  ],
+  tags: ["autodocs"],
 };
 
-storiesOf("Secondary Navigation", module)
-  .addDecorator((story) => (
-    <Columns className="columns">
-      <div className="column is-3">
-        <SecondaryNavigationProvider>{story()}</SecondaryNavigationProvider>
-      </div>
-    </Columns>
-  ))
-  .add("Default", () =>
-    withRoute("/")(
-      <SecondaryNavigation label="Hitchhiker">
-        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
-        <SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
-      </SecondaryNavigation>
-    )
-  )
-  .add("Sub Navigation", () =>
-    withRoute("/")(
-      <SecondaryNavigation label="Hitchhiker">
-        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
-        {starships}
-      </SecondaryNavigation>
-    )
-  )
-  .add("Extension Point", () => {
+export default meta;
+
+// --- Story-Definitionen ---
+
+type Story = StoryObj<typeof meta>;
+
+// Da jede Story eine andere initiale Route für den MemoryRouter benötigt,
+// verwenden wir für jede Story eine `render`-Funktion.
+
+export const Default: Story = {
+  render: () => (
+    <SecondaryNavigation label="Hitchhiker">
+      <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+      <SecondaryNavigationItem to="/heart-of-gold" icon="fas fa-star" label="Heart Of Gold" title="Heart Of Gold" />
+    </SecondaryNavigation>
+  ),
+};
+
+export const WithSubNavigation: Story = {
+  name: "With Sub-Navigation",
+  render: () => (
+    <SecondaryNavigation label="Hitchhiker">
+      <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+      {starships}
+    </SecondaryNavigation>
+  ),
+};
+
+export const WithExtensionPoint: Story = {
+  name: "With Extension Point",
+  render: () => {
     const binder = new Binder("menu");
     binder.bind("subnav.sample", starships);
-    return withRoute("/hitchhiker/starships/titanic")(
+    return (
       <BinderContext.Provider value={binder}>
         <SecondaryNavigation label="Hitchhiker">
           <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
@@ -79,18 +187,22 @@ storiesOf("Secondary Navigation", module)
         </SecondaryNavigation>
       </BinderContext.Provider>
     );
-  })
-  .add("Active when match", () =>
-    withRoute("/hog")(
-      <SecondaryNavigation label="Hitchhiker">
-        <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
-        <SecondaryNavigationItem
-          activeWhenMatch={(route) => route.location?.pathname === "/hog"}
-          to="/heart-of-gold"
-          icon="fas fa-star"
-          label="Heart Of Gold"
-          title="Heart Of Gold"
-        />
-      </SecondaryNavigation>
-    )
-  );
+  },
+};
+
+export const ActiveWhenMatch: Story = {
+  name: "Active When Match",
+  render: () => (
+    <SecondaryNavigation label="Hitchhiker">
+      <SecondaryNavigationItem to="/42" icon="fas fa-puzzle-piece" label="Puzzle 42" title="Puzzle 42" />
+      {/*TODO: fix after useAcitveMatch works*/}
+      <SecondaryNavigationItem
+        // activeWhenMatch={(route) => route.location?.pathname === "/hog"}
+        to="/heart-of-gold"
+        icon="fas fa-star"
+        label="Heart Of Gold"
+        title="Heart Of Gold"
+      />
+    </SecondaryNavigation>
+  ),
+};

package/src/navigation/SecondaryNavigation.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
@@ -23,6 +23,7 @@ import { Button } from "@scm-manager/ui-buttons";
 type Props = {
   label: string;
   collapsible?: boolean;
+  children?: ReactNode;
 };
 
 type CollapsedProps = {
@@ -51,29 +52,29 @@ const Icon = styled.i<CollapsedProps>`
   color: #e2e2e2;
 `;
 
-const MenuButton = styled(Button)<CollapsedProps>`
-  justify-content: ${(props: CollapsedProps) => (props.collapsed ? "center" : "inherit")};
-  width: 100%;
-  color: #e2e2e2;
-  &:hover {
-    color: #e2e2e2;
-  }
-  &:focus {
-    color: #e2e2e2;
-  }
-`;
-
-const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true }) => {
+const SecondaryNavigation: FC<Props> = ({ label, children }) => {
   const [t] = useTranslation("commons");
-  const { collapsible: isCollapsible, collapsed, toggleCollapse } = useSecondaryNavigation(collapsible);
+  const { collapsible: isCollapsible, collapsed, toggleCollapse } = useSecondaryNavigation();
 
   const arrowIcon = collapsed ? <i className="fas fa-caret-left" /> : <i className="fas fa-caret-down" />;
   const menuAriaLabel = collapsed ? t("secondaryNavigation.showContent") : t("secondaryNavigation.hideContent");
 
+  const MenuButton = styled(Button)`
+    justify-content: ${collapsed ? "center" : "inherit"};
+    width: 100%;
+    color: #e2e2e2;
+    &:hover {
+      color: #e2e2e2;
+    }
+    &:focus {
+      color: #e2e2e2;
+    }
+  `;
+
   return (
     <SectionContainer className="menu" collapsed={collapsed}>
       <div>
-        <MenuButton className="menu-label" collapsed={collapsed} onClick={toggleCollapse} aria-label={menuAriaLabel}>
+        <MenuButton className="menu-label" onClick={toggleCollapse} aria-label={menuAriaLabel}>
           {isCollapsible ? (
             <Icon className="is-medium" collapsed={collapsed}>
               {arrowIcon}

package/src/navigation/SecondaryNavigationItem.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import SubNavigation from "./SubNavigation";
 import NavLink from "./NavLink";
 import { RoutingProps } from "./RoutingProps";
@@ -23,6 +23,7 @@ type Props = RoutingProps & {
   label: string;
   title?: string;
   icon?: string;
+  children?: ReactNode;
 };
 
 const SecondaryNavigationItem: FC<Props> = ({ children, ...props }) => {

package/src/navigation/SubNavigation.tsx

@@ -14,20 +14,21 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useEffect } from "react";
+import React, { FC, ReactNode, useEffect } from "react";
 import { Link } from "react-router-dom";
 import classNames from "classnames";
 import { useSecondaryNavigation } from "../useSecondaryNavigation";
 import { RoutingProps } from "./RoutingProps";
-import useActiveMatch from "./useActiveMatch";
 import { createAttributesForTesting } from "../devBuild";
 import { SubNavigationContext } from "./SubNavigationContext";
+import useActiveMatch from "./useActiveMatch";
 
 type Props = RoutingProps & {
   label: string;
   title?: string;
   icon?: string;
   testId?: string;
+  children?: ReactNode;
 };
 
 const SubNavigation: FC<Props> = ({
@@ -44,12 +45,7 @@ const SubNavigation: FC<Props> = ({
   const parents = to.split("/");
   parents.splice(-1, 1);
   const parent = parents.join("/");
-
-  const active = useActiveMatch({
-    to: parent,
-    activeOnlyWhenExact,
-    activeWhenMatch,
-  });
+  const active = useActiveMatch({ to: parent, activeOnlyWhenExact, activeWhenMatch });
 
   useEffect(() => {
     if (active) {

package/src/navigation/useActiveMatch.ts

@@ -14,35 +14,33 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { urls } from "@scm-manager/ui-api";
-import { useLocation, useRouteMatch } from "react-router-dom";
+import { useLocation, useResolvedPath } from "react-router-dom";
 import { RoutingProps } from "./RoutingProps";
 
-const useActiveMatch = ({ to, activeOnlyWhenExact, activeWhenMatch }: RoutingProps) => {
-  let path = to;
-  const index = to.indexOf("?");
-  if (index > 0) {
-    path = to.substr(0, index);
+const useMatchesRoute = (pattern?: string) => {
+  const location = useLocation();
+  if (!pattern) {
+    return false;
   }
+  const regex = new RegExp(pattern);
+  return regex.test(location.pathname || "");
+};
 
-  const match = useRouteMatch({
-    path: urls.escapeUrlForRoute(path),
-    exact: activeOnlyWhenExact,
-  });
-
+const useActiveMatch = ({ to, activeWhenMatch, activeOnlyWhenExact = true }: RoutingProps) => {
   const location = useLocation();
+  const resolved = useResolvedPath(to);
+  const isActive = new RegExp(resolved.pathname).test(location.pathname);
+  const match = useMatchesRoute(activeWhenMatch);
 
-  const isActiveWhenMatch = () => {
-    if (activeWhenMatch) {
-      // noinspection PointlessBooleanExpressionJS could be a truthy value if a function is passed in
-      return !!activeWhenMatch({
-        location,
-      });
+  if (activeOnlyWhenExact) {
+    return isActive;
+  } else if (activeWhenMatch) {
+    if (isActive) {
+      return true;
     }
-    return false;
-  };
-
-  return !!match || isActiveWhenMatch();
+    return match;
+  }
+  return false;
 };
 
 export default useActiveMatch;

package/src/navigation/useNavigationLock.ts

@@ -16,6 +16,7 @@
 
 import { useEffect } from "react";
 
+// TODO: Navigation
 // This hook can be used to warn the user on reloading or closing the current page if the navigation lock is enabled.
 const useNavigationLock = (enabled: boolean) => {
   useEffect(() => {