@scm-manager/ui-core 3.7.2 → 3.7.4-20250125-130119

package/.turbo/turbo-typecheck.log

@@ -1,2 +1,2 @@
-@scm-manager/ui-core:typecheck: cache hit, replaying output 34604f48788bce34
+@scm-manager/ui-core:typecheck: cache hit, replaying output e3a1d7a588e447bd
 @scm-manager/ui-core:typecheck: $ tsc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scm-manager/ui-core",
-  "version": "3.7.2",
+  "version": "3.7.4-20250125-130119",
   "main": "./src/index.ts",
   "license": "AGPL-3.0-only",
   "scripts": {
@@ -20,7 +20,7 @@
     "styled-components": "5"
   },
   "dependencies": {
-    "@scm-manager/ui-api": "3.7.2",
+    "@scm-manager/ui-api": "3.7.4-20250125-130119",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-visually-hidden": "^1.0.3",
@@ -37,7 +37,7 @@
     "@scm-manager/eslint-config": "^2.17.0",
     "@scm-manager/tsconfig": "^2.12.0",
     "@scm-manager/babel-preset": "^2.13.1",
-    "@scm-manager/ui-types": "3.7.2",
+    "@scm-manager/ui-types": "3.7.4-20250125-130119",
     "@types/mousetrap": "1.6.5",
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/react": "12.1.5",

package/src/base/forms/Form.tsx

@@ -17,7 +17,7 @@
 import React, { FC, useCallback, useEffect, useState } from "react";
 import { DeepPartial, SubmitHandler, useForm, UseFormReturn } from "react-hook-form";
 import { ErrorNotification } from "../notifications";
-import { Level } from  "../misc";
+import { Level } from "../misc";
 import { ScmFormContextProvider } from "./ScmFormContext";
 import { useTranslation } from "react-i18next";
 import { Button } from "../buttons";
@@ -135,10 +135,10 @@ function Form<FormType extends Record<string, unknown>, DefaultValues extends Fo
 
   // See https://react-hook-form.com/api/useform/reset/
   useEffect(() => {
-    if (isSubmitSuccessful) {
+    if (isSubmitSuccessful && !error) {
       setShowSuccessNotification(true);
     }
-  }, [isSubmitSuccessful]);
+  }, [isSubmitSuccessful, error]);
 
   useEffect(() => reset(defaultValues as never), [defaultValues, reset]);
 

package/src/base/forms/checkbox/Checkbox.tsx

@@ -33,6 +33,7 @@ const StyledLabel = styled.label`
 type InputFieldProps = {
   label: string;
   helpText?: string;
+  descriptionText?: string;
   testId?: string;
   labelClassName?: string;
 } & Omit<InputHTMLAttributes<HTMLInputElement>, "type">;
@@ -45,6 +46,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, InputFieldProps>(
     {
       readOnly,
       label,
+      descriptionText,
       className,
       labelClassName,
       value,
@@ -57,54 +59,63 @@ const Checkbox = React.forwardRef<HTMLInputElement, InputFieldProps>(
       ...props
     },
     ref
-  ) => (
-    <StyledLabel
-      className={classNames("checkbox is-align-items-center", labelClassName)}
-      // @ts-ignore bulma uses the disabled attribute on labels, although it is not part of the html spec
-      disabled={readOnly || props.disabled}
-    >
-      {readOnly ? (
-        <>
-          <input
-            type="hidden"
-            name={name}
-            value={value}
-            defaultValue={defaultValue}
-            checked={checked}
-            defaultChecked={defaultChecked}
-            readOnly
-          />
-          <StyledInput
-            type="checkbox"
-            className={classNames("m-3", className)}
-            ref={ref}
-            value={value}
-            defaultValue={defaultValue}
-            checked={checked}
-            defaultChecked={defaultChecked}
-            {...props}
-            {...createAttributesForTesting(testId)}
-            disabled
-          />
-        </>
-      ) : (
-        <StyledInput
-          type="checkbox"
-          className={classNames("m-3", className)}
-          ref={ref}
-          name={name}
-          value={value}
-          defaultValue={defaultValue}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          {...props}
-          {...createAttributesForTesting(testId)}
-        />
-      )}
+  ) => {
+    const descriptionId = descriptionText ? `checkbox-description-${name}` : undefined;
+    return (
+      <>
+        {descriptionText ? <p id={descriptionId}>{descriptionText}</p> : null}
+        <StyledLabel
+          className={classNames("checkbox is-align-items-center", labelClassName)}
+          // @ts-ignore bulma uses the disabled attribute on labels, although it is not part of the html spec
+          disabled={readOnly || props.disabled}
+        >
+          {readOnly ? (
+            <>
+              <input
+                type="hidden"
+                name={name}
+                value={value}
+                defaultValue={defaultValue}
+                checked={checked}
+                defaultChecked={defaultChecked}
+                aria-describedby={descriptionId}
+                readOnly
+              />
+              <StyledInput
+                type="checkbox"
+                className={classNames("m-3", className)}
+                ref={ref}
+                value={value}
+                defaultValue={defaultValue}
+                checked={checked}
+                defaultChecked={defaultChecked}
+                aria-describedby={descriptionId}
+                {...props}
+                {...createAttributesForTesting(testId)}
+                disabled
+              />
+            </>
+          ) : (
+            <StyledInput
+              type="checkbox"
+              className={classNames("m-3", className)}
+              ref={ref}
+              name={name}
+              value={value}
+              defaultValue={defaultValue}
+              checked={checked}
+              defaultChecked={defaultChecked}
+              aria-describedby={descriptionId}
+              {...props}
+              {...createAttributesForTesting(testId)}
+            />
+          )}
 
-      {label}
-      {helpText ? <Help className="ml-1" text={helpText} /> : null}
-    </StyledLabel>
-  )
+          {label}
+          {helpText ? <Help className="ml-1" text={helpText} /> : null}
+        </StyledLabel>
+      </>
+    );
+  }
 );
 export default Checkbox;

package/src/base/forms/checkbox/ControlledCheckboxField.tsx

@@ -35,6 +35,7 @@ function ControlledInputField<T extends Record<string, unknown>>({
   name,
   label,
   helpText,
+  descriptionText,
   rules,
   testId,
   defaultChecked,
@@ -48,6 +49,8 @@ function ControlledInputField<T extends Record<string, unknown>>({
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
   const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  const descriptionTextTranslation = descriptionText || t(`${prefixedNameWithoutIndices}.descriptionText`);
+
   return (
     <Controller
       control={control}
@@ -64,6 +67,7 @@ function ControlledInputField<T extends Record<string, unknown>>({
           {...field}
           label={labelTranslation}
           helpText={helpTextTranslation}
+          descriptionText={descriptionTextTranslation}
           testId={testId ?? `checkbox-${nameWithPrefix}`}
         />
       )}

package/src/base/forms/chip-input/ChipInputField.tsx

@@ -28,7 +28,6 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useTranslation } from "react-i18next";
 import { withForwardRef } from "../helpers";
 import { Option } from "@scm-manager/ui-types";
-import { waitForRestartAfter } from "@scm-manager/ui-api";
 
 const StyledChipInput: typeof ChipInput = styled(ChipInput)`
   min-height: 40px;

package/src/base/forms/input/ControlledInputField.tsx

@@ -35,6 +35,7 @@ function ControlledInputField<T extends Record<string, unknown>>({
   name,
   label,
   helpText,
+  descriptionText,
   rules,
   testId,
   defaultValue,
@@ -48,6 +49,8 @@ function ControlledInputField<T extends Record<string, unknown>>({
   const prefixedNameWithoutIndices = prefixWithoutIndices(nameWithPrefix);
   const labelTranslation = label || t(`${prefixedNameWithoutIndices}.label`) || "";
   const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+  const descriptionTextTranslation = descriptionText || t(`${prefixedNameWithoutIndices}.descriptionText`);
+
   return (
     <Controller
       control={control}
@@ -64,6 +67,7 @@ function ControlledInputField<T extends Record<string, unknown>>({
           form={formId}
           label={labelTranslation}
           helpText={helpTextTranslation}
+          descriptionText={descriptionTextTranslation}
           error={
             fieldState.error
               ? fieldState.error.message || t(`${prefixedNameWithoutIndices}.error.${fieldState.error.type}`)

package/src/base/forms/input/InputField.tsx

@@ -26,6 +26,7 @@ import { useAriaId } from "../../helpers";
 type InputFieldProps = {
   label: string;
   helpText?: string;
+  descriptionText?: string;
   error?: string;
 } & React.ComponentProps<typeof Input>;
 
@@ -33,8 +34,9 @@ type InputFieldProps = {
  * @see https://bulma.io/documentation/form/input/
  */
 const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
-  ({ label, helpText, error, className, id, ...props }, ref) => {
+  ({ name, label, helpText, descriptionText, error, className, id, ...props }, ref) => {
     const inputId = useAriaId(id ?? props.testId);
+    const descriptionId = descriptionText ? `input-description-${name}` : undefined;
     const variant = error ? "danger" : undefined;
     return (
       <Field className={className}>
@@ -42,8 +44,13 @@ const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
           {label}
           {helpText ? <Help className="ml-1" text={helpText} /> : null}
         </Label>
+        {descriptionText ? (
+          <p className="mb-2" id={descriptionId}>
+            {descriptionText}
+          </p>
+        ) : null}
         <Control>
-          <Input variant={variant} ref={ref} id={inputId} {...props}></Input>
+          <Input variant={variant} ref={ref} id={inputId} aria-describedby={descriptionId} {...props}></Input>
         </Control>
         {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
       </Field>