@scm-manager/ui-components 3.7.3 → 3.7.4-20250125-130119

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-components",
-  "version": "3.7.3",
+  "version": "3.7.4-20250125-130119",
   "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.3",
-    "@scm-manager/ui-types": "3.7.3",
+    "@scm-manager/ui-tests": "3.7.4-20250125-130119",
+    "@scm-manager/ui-types": "3.7.4-20250125-130119",
     "@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.72.0",
+    "webpack": "^5.76.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.3",
-    "@scm-manager/ui-shortcuts": "3.7.3",
-    "@scm-manager/ui-text": "3.7.3"
+    "@scm-manager/ui-syntaxhighlighting": "3.7.4-20250125-130119",
+    "@scm-manager/ui-shortcuts": "3.7.4-20250125-130119",
+    "@scm-manager/ui-text": "3.7.4-20250125-130119"
   },
   "dependencies": {
-    "@scm-manager/ui-core": "3.7.3",
-    "@scm-manager/ui-overlays": "3.7.3",
-    "@scm-manager/ui-layout": "3.7.3",
-    "@scm-manager/ui-buttons": "3.7.3",
-    "@scm-manager/ui-api": "3.7.3",
-    "@scm-manager/ui-extensions": "3.7.3",
+    "@scm-manager/ui-core": "3.7.4-20250125-130119",
+    "@scm-manager/ui-overlays": "3.7.4-20250125-130119",
+    "@scm-manager/ui-layout": "3.7.4-20250125-130119",
+    "@scm-manager/ui-buttons": "3.7.4-20250125-130119",
+    "@scm-manager/ui-api": "3.7.4-20250125-130119",
+    "@scm-manager/ui-extensions": "3.7.4-20250125-130119",
     "deepmerge": "^4.2.2",
     "hast-util-sanitize": "^3.0.2",
     "react-diff-view": "^2.4.10",

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

@@ -78158,11 +78158,18 @@ exports[`Storyshots Secondary Navigation Active when match 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           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
@@ -78215,7 +78222,7 @@ exports[`Storyshots Secondary Navigation Default 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"
@@ -78278,7 +78285,7 @@ exports[`Storyshots Secondary Navigation Extension Point 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"
@@ -78369,7 +78376,7 @@ exports[`Storyshots Secondary Navigation Sub Navigation 1`] = `
       <div>
         <button
           aria-label="secondaryNavigation.hideContent"
-          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label is-clickable"
+          className="button SecondaryNavigation__MenuButton-sc-8p1rgi-2 fkeiWf menu-label"
           collapsed={false}
           onClick={[Function]}
           type="button"

package/src/forms/InputField.tsx

@@ -21,6 +21,7 @@ import { createAttributesForTesting } from "../devBuild";
 import useAutofocus from "./useAutofocus";
 import { createFormFieldWrapper, FieldProps, FieldType, isLegacy, isUsingRef } from "./FormFieldTypes";
 import { createA11yId } from "../createA11yId";
+import FieldMessage from "@scm-manager/ui-core/src/base/forms/base/field-message/FieldMessage";
 
 type BaseProps = {
   label?: string;
@@ -40,6 +41,7 @@ type BaseProps = {
   defaultValue?: string | number;
   readOnly?: boolean;
   required?: boolean;
+  warning?: string;
 };
 
 export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>> = ({
@@ -60,6 +62,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
   defaultValue,
   readOnly,
   required,
+  warning,
   ...props
 }) => {
   const field = useAutofocus<HTMLInputElement>(autofocus, props.innerRef);
@@ -123,6 +126,7 @@ export const InnerInputField: FC<FieldProps<BaseProps, HTMLInputElement, string>
           {...createAttributesForTesting(testId)}
         />
       </div>
+      {warning ? <FieldMessage variant="warning">{warning}</FieldMessage> : null}
       {helper}
     </fieldset>
   );

package/src/layout/SecondaryNavigationColumn.tsx

@@ -17,6 +17,7 @@
 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;
@@ -28,7 +29,7 @@ const SecondaryColumn = styled.div<{ collapsed: boolean }>`
   }
 `;
 
-const SecondaryNavigationColumn: FC = ({ children }) => {
+const SecondaryNavigationColumnIntern: FC = ({ children }) => {
   const { collapsed } = useSecondaryNavigation();
 
   return (
@@ -38,4 +39,12 @@ const SecondaryNavigationColumn: FC = ({ children }) => {
   );
 };
 
+const SecondaryNavigationColumn: FC = ({ children }) => {
+  return (
+    <SecondaryNavigationProvider>
+      <SecondaryNavigationColumnIntern>{children}</SecondaryNavigationColumnIntern>
+    </SecondaryNavigationProvider>
+  );
+};
+
 export default SecondaryNavigationColumn;

package/src/navigation/ExternalNavLink.tsx

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

package/src/navigation/NavLink.tsx

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

package/src/navigation/SecondaryNavigation.stories.tsx

@@ -16,12 +16,13 @@
 
 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;
@@ -46,7 +47,9 @@ const withRoute = (route: string) => {
 storiesOf("Secondary Navigation", module)
   .addDecorator((story) => (
     <Columns className="columns">
-      <div className="column is-3">{story()}</div>
+      <div className="column is-3">
+        <SecondaryNavigationProvider>{story()}</SecondaryNavigationProvider>
+      </div>
     </Columns>
   ))
   .add("Default", () =>

package/src/navigation/SecondaryNavigation.tsx

@@ -16,10 +16,8 @@
 
 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 = {
@@ -73,14 +71,9 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
   const menuAriaLabel = collapsed ? t("secondaryNavigation.showContent") : t("secondaryNavigation.hideContent");
 
   return (
-    <SectionContainer className="menu" collapsed={collapsed ?? false}>
+    <SectionContainer className="menu" collapsed={collapsed}>
       <div>
-        <MenuButton
-          className={classNames("menu-label", { "is-clickable": true })}
-          collapsed={collapsed}
-          onClick={toggleCollapse}
-          aria-label={menuAriaLabel}
-        >
+        <MenuButton className="menu-label" collapsed={collapsed} onClick={toggleCollapse} aria-label={menuAriaLabel}>
           {isCollapsible ? (
             <Icon className="is-medium" collapsed={collapsed}>
               {arrowIcon}
@@ -88,9 +81,7 @@ const SecondaryNavigation: FC<Props> = ({ label, children, collapsible = true })
           ) : null}
           {collapsed ? "" : label}
         </MenuButton>
-        <ul className="menu-list">
-          <SecondaryNavigationContext.Provider value={true}>{children}</SecondaryNavigationContext.Provider>
-        </ul>
+        <ul className="menu-list">{children}</ul>
       </div>
     </SectionContainer>
   );

package/src/navigation/SecondaryNavigationContext.tsx

@@ -0,0 +1,37 @@
+/*
+ * 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>;
+};

package/src/useSecondaryNavigation.tsx

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

package/src/navigation/SecondaryNavigationContext.ts

@@ -1,19 +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 from "react";
-
-export const SecondaryNavigationContext = React.createContext(false);