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

package/src/base/forms/Form.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC, useCallback, useEffect, useState } from "react";
-import { DeepPartial, SubmitHandler, useForm, UseFormReturn } from "react-hook-form";
+import { DefaultValues, SubmitHandler, useForm, UseFormReturn } from "react-hook-form";
 import { ErrorNotification } from "../notifications";
 import { Level } from "../misc";
 import { ScmFormContextProvider } from "./ScmFormContext";
@@ -47,11 +47,11 @@ const SuccessNotification: FC<{ label?: string; hide: () => void }> = ({ label,
   );
 };
 
-type Props<FormType extends Record<string, unknown>, DefaultValues extends FormType> = {
+type Props<FormType extends Record<string, unknown>> = {
   children: ((renderProps: RenderProps<FormType>) => React.ReactNode | React.ReactNode[]) | React.ReactNode;
   translationPath: [namespace: string, prefix: string];
   onSubmit: SubmitHandler<FormType>;
-  defaultValues: DefaultValues;
+  defaultValues: DefaultValues<FormType>;
   readOnly?: boolean;
   submitButtonTestId?: string;
   /**
@@ -73,7 +73,7 @@ type Props<FormType extends Record<string, unknown>, DefaultValues extends FormT
    *
    * @since 2.43.0
    */
-  withResetTo?: DefaultValues;
+  withResetTo?: DefaultValues<FormType>;
   /**
    * Message to display after a successful submit if no translation key is defined.
    *
@@ -89,7 +89,7 @@ type Props<FormType extends Record<string, unknown>, DefaultValues extends FormT
  * @beta
  * @since 2.41.0
  */
-function Form<FormType extends Record<string, unknown>, DefaultValues extends FormType = FormType>({
+function Form<FormType extends Record<string, unknown>>({
   children,
   onSubmit,
   defaultValues,
@@ -99,10 +99,10 @@ function Form<FormType extends Record<string, unknown>, DefaultValues extends Fo
   withDiscardChanges,
   successMessageFallback,
   submitButtonTestId,
-}: Props<FormType, DefaultValues>) {
+}: Props<FormType>) {
   const form = useForm<FormType>({
     mode: "onChange",
-    defaultValues: defaultValues as DeepPartial<FormType>,
+    defaultValues: defaultValues,
   });
   const { formState, handleSubmit, reset, setValue } = form;
   const [ns, prefix] = translationPath;
@@ -149,7 +149,7 @@ function Form<FormType extends Record<string, unknown>, DefaultValues extends Fo
   }, [isDirty]);
 
   const submit = useCallback(
-    async (data) => {
+    async (data: any) => {
       setError(null);
       try {
         return await onSubmit(data);

package/src/base/forms/FormPathContext.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useContext, useMemo } from "react";
+import React, { FC, ReactNode, useContext, useMemo } from "react";
 
 const ScmFormPathContext = React.createContext<string>("");
 
@@ -22,7 +22,7 @@ export function useScmFormPathContext() {
   return useContext(ScmFormPathContext);
 }
 
-export const ScmFormPathContextProvider: FC<{ path: string }> = ({ children, path }) => (
+export const ScmFormPathContextProvider: FC<{ path: string; children?: ReactNode }> = ({ children, path }) => (
   <ScmFormPathContext.Provider value={path}>{children}</ScmFormPathContext.Provider>
 );
 
@@ -58,7 +58,7 @@ export const ScmFormPathContextProvider: FC<{ path: string }> = ({ children, pat
  * // This pattern becomes useful in complex or large forms.
  * ```
  */
-export const ScmNestedFormPathContextProvider: FC<{ path: string }> = ({ children, path }) => {
+export const ScmNestedFormPathContextProvider: FC<{ path: string; children?: ReactNode }> = ({ children, path }) => {
   const prefix = useScmFormPathContext();
   const pathWithPrefix = useMemo(() => (prefix ? `${prefix}.${path}` : path), [path, prefix]);
   return <ScmFormPathContext.Provider value={pathWithPrefix}>{children}</ScmFormPathContext.Provider>;

package/src/base/forms/ScmFormContext.tsx

@@ -15,18 +15,21 @@
  */
 
 import React, { PropsWithChildren, useContext } from "react";
-import { UseFormReturn } from "react-hook-form";
+import { FieldValues, UseFormReturn } from "react-hook-form";
 import type { TFunction } from "i18next";
 
-type ContextType<T = any> = UseFormReturn<T> & {
+type ContextType<T extends FieldValues> = UseFormReturn<T> & {
   t: TFunction;
   readOnly?: boolean;
   formId: string;
 };
 
-const ScmFormContext = React.createContext<ContextType>(null as unknown as ContextType);
+const ScmFormContext = React.createContext<ContextType<any>>(null as any);
 
-export function ScmFormContextProvider<T>({ children, ...props }: PropsWithChildren<ContextType<T>>) {
+export function ScmFormContextProvider<T extends FieldValues>({
+  children,
+  ...props
+}: PropsWithChildren<ContextType<T>>) {
   return <ScmFormContext.Provider value={props}>{children}</ScmFormContext.Provider>;
 }
 

package/src/base/forms/ScmFormListContext.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, useContext, useMemo } from "react";
+import React, { FC, ReactNode, useContext, useMemo } from "react";
 import { FieldValues, useFieldArray, UseFieldArrayReturn } from "react-hook-form";
 import { ScmFormPathContextProvider, useScmFormPathContext } from "./FormPathContext";
 import { useScmFormContext } from "./ScmFormContext";
@@ -25,6 +25,7 @@ const ScmFormListContext = React.createContext<ContextType>(null as unknown as C
 
 type Props = {
   name: string;
+  children?: ReactNode;
 };
 
 /**

package/src/base/forms/base/Field.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, HTMLProps } from "react";
+import React, { FC, HTMLProps, JSX } from "react";
 import classNames from "classnames";
 
 const Field: FC<HTMLProps<HTMLDivElement> | ({ as: keyof JSX.IntrinsicElements } & HTMLProps<HTMLElement>)> = ({

package/src/base/forms/base/label/Label.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { FC, HTMLProps } from "react";
+import React, { FC, HTMLProps, JSX } from "react";
 import classNames from "classnames";
 
 const Label: FC<HTMLProps<HTMLLabelElement> | ({ as: keyof JSX.IntrinsicElements } & HTMLProps<HTMLElement>)> = ({

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

@@ -14,37 +14,95 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
+// import { storiesOf } from "@storybook/react";
+// import React, { useRef, useState } from "react";
+// import ChipInputField from "./ChipInputField";
+// import Combobox from "../combobox/Combobox";
+// import { Option } from "@scm-manager/ui-types";
+// import ChipInput from "../headless-chip-input/ChipInput";
+//
+// storiesOf("Chip Input Field", module)
+//   .add("Default", () => {
+//     const [value, setValue] = useState<Option<string>[]>([]);
+//     const ref = useRef<HTMLInputElement>(null);
+//     return (
+//       <>
+//         <ChipInputField
+//           value={value}
+//           onChange={setValue}
+//           label="Test Chips"
+//           placeholder="Type a new chip name and press enter to add"
+//           aria-label="My personal chip list"
+//           ref={ref}
+//         />
+//         <ChipInput.AddButton inputRef={ref}>Add</ChipInput.AddButton>
+//       </>
+//     );
+//   })
+//   .add("With Autocomplete", () => {
+//     const people = ["Durward Reynolds", "Kenton Towne", "Therese Wunsch", "Benedict Kessler", "Katelyn Rohan"];
+//
+//     const [value, setValue] = useState<Option<string>[]>([]);
+//
+//     return (
+//       <ChipInputField
+//         value={value}
+//         onChange={setValue}
+//         label="Persons"
+//         placeholder="Enter a new person"
+//         aria-label="Enter a new person"
+//       >
+//         <Combobox
+//           options={(query: string) =>
+//             Promise.resolve(
+//               people
+//                 .map<Option<string>>((p) => ({ label: p, value: p }))
+//                 .filter((t) => !value.some((val) => val.label === t.label) && t.label.startsWith(query))
+//                 .concat({ label: query, value: query, displayValue: `Use '${query}'` })
+//             )
+//           }
+//         />
+//       </ChipInputField>
+//     );
+//   });
+
 import React, { useRef, useState } from "react";
-import ChipInputField from "./ChipInputField";
-import Combobox from "../combobox/Combobox";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Option } from "@scm-manager/ui-types";
+
+import ChipInputField from "./ChipInputField";
 import ChipInput from "../headless-chip-input/ChipInput";
+import Combobox from "../combobox/Combobox";
 
-storiesOf("Chip Input Field", module)
-  .add("Default", () => {
-    const [value, setValue] = useState<Option<string>[]>([]);
-    const ref = useRef<HTMLInputElement>(null);
-    return (
-      <>
-        <ChipInputField
-          value={value}
-          onChange={setValue}
-          label="Test Chips"
-          placeholder="Type a new chip name and press enter to add"
-          aria-label="My personal chip list"
-          ref={ref}
-        />
-        <ChipInput.AddButton inputRef={ref}>Add</ChipInput.AddButton>
-      </>
-    );
-  })
-  .add("With Autocomplete", () => {
-    const people = ["Durward Reynolds", "Kenton Towne", "Therese Wunsch", "Benedict Kessler", "Katelyn Rohan"];
+const DefaultExample = () => {
+  const [value, setValue] = useState<Option<string>[]>([]);
+  const ref = useRef<HTMLInputElement>(null);
 
-    const [value, setValue] = useState<Option<string>[]>([]);
+  return (
+    <>
+      {/* @ts-ignore */}
+      <ChipInputField
+        value={value}
+        onChange={setValue}
+        label="Test Chips"
+        placeholder="Type a new chip name and press enter to add"
+        aria-label="My personal chip list"
+        ref={ref}
+      />
+      <ChipInput.AddButton inputRef={ref} className="button is-link is-outlined ml-1 mt-2">
+        Add
+      </ChipInput.AddButton>
+    </>
+  );
+};
+
+const WithAutocompleteExample = () => {
+  const people = ["Durward Reynolds", "Kenton Towne", "Therese Wunsch", "Benedict Kessler", "Katelyn Rohan"];
+  const [value, setValue] = useState<Option<string>[]>([]);
 
-    return (
+  return (
+    <>
+      {/* @ts-ignore */}
       <ChipInputField
         value={value}
         onChange={setValue}
@@ -52,16 +110,39 @@ storiesOf("Chip Input Field", module)
         placeholder="Enter a new person"
         aria-label="Enter a new person"
       >
+        {/* @ts-ignore */}
         <Combobox
           options={(query: string) =>
             Promise.resolve(
               people
                 .map<Option<string>>((p) => ({ label: p, value: p }))
                 .filter((t) => !value.some((val) => val.label === t.label) && t.label.startsWith(query))
-                .concat({ label: query, value: query, displayValue: `Use '${query}'` })
+                .concat({ label: query, value: query, displayValue: `Use '${query}'` }),
             )
           }
         />
       </ChipInputField>
-    );
-  });
+    </>
+  );
+};
+
+const meta: Meta<typeof ChipInputField> = {
+  title: "Forms/ChipInputField",
+
+  // @ts-ignore
+  component: ChipInputField,
+  decorators: [(Story) => <div style={{ margin: "2rem", maxWidth: "40rem" }}>{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => <DefaultExample />,
+};
+
+export const WithAutocomplete: Story = {
+  render: () => <WithAutocompleteExample />,
+};

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

@@ -29,7 +29,17 @@ import { useTranslation } from "react-i18next";
 import { withForwardRef } from "../helpers";
 import { Option } from "@scm-manager/ui-types";
 
-const StyledChipInput: typeof ChipInput = styled(ChipInput)`
+const ChipInputWrapper = React.forwardRef<HTMLUListElement, any>((props, ref) => (
+  // @ts-ignore
+  <ChipInput ref={ref} {...props} />
+));
+
+const NewChipInputWrapper = React.forwardRef<HTMLUListElement, any>((props, ref) => (
+  // @ts-ignore
+  <NewChipInput ref={ref} {...props} />
+));
+
+const StyledChipInput = styled(ChipInputWrapper)`
   min-height: 40px;
   height: min-content;
   gap: 0.5rem;
@@ -39,7 +49,7 @@ const StyledChipInput: typeof ChipInput = styled(ChipInput)`
   }
 `;
 
-const StyledInput = styled(NewChipInput)`
+const StyledInput = styled(NewChipInputWrapper)`
   color: var(--scm-secondary-more-color);
   font-size: 1rem;
   height: initial;
@@ -48,7 +58,7 @@ const StyledInput = styled(NewChipInput)`
   &:focus {
     outline: none;
   }
-` as unknown as typeof NewChipInput;
+`;
 
 const StyledDelete = styled(ChipInput.Chip.Delete)`
   &:focus {
@@ -113,17 +123,18 @@ const ChipInputField = function ChipInputField<T>(
     isNewItemDuplicate,
     ...props
   }: PropsWithRef<InputFieldProps<T>>,
-  ref: React.ForwardedRef<HTMLInputElement>
+  ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const [t] = useTranslation("commons", { keyPrefix: "form.chipList" });
   const deleteTextCallback = useCallback(
-    (item) => (createDeleteText ? createDeleteText(item) : t("delete", { item })),
-    [createDeleteText, t]
+    (item: any) => (createDeleteText ? createDeleteText(item) : t("delete", { item })),
+    [createDeleteText, t],
   );
   const inputId = useAriaId(id ?? testId);
   const labelId = useAriaId();
   const inputDescriptionId = useAriaId();
   const variant = determineVariant(error, warning);
+
   return (
     <Field className={className} aria-owns={inputId}>
       <Label id={labelId}>
@@ -134,7 +145,7 @@ const ChipInputField = function ChipInputField<T>(
       <div className={classNames("control", { "is-loading": isLoading })}>
         <StyledChipInput
           value={value}
-          onChange={(e) => onChange && onChange(e ?? [])}
+          onChange={(e: any) => onChange && onChange(e ?? [])}
           className="is-flex is-flex-wrap-wrap input"
           aria-labelledby={labelId}
           disabled={readOnly || disabled}
@@ -154,10 +165,11 @@ const ChipInputField = function ChipInputField<T>(
               "is-shadowless",
               "input",
               "is-ellipsis-overflow",
-              createVariantClass(variant)
+              createVariantClass(variant),
             )}
             placeholder={!readOnly && !disabled ? placeholder : ""}
             id={inputId}
+            // @ts-ignore
             ref={ref}
             aria-describedby={inputDescriptionId}
             {...createAttributesForTesting(testId)}

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

@@ -56,7 +56,7 @@ function ControlledChipInputField<T extends Record<string, unknown>>(
     optionFactory = defaultOptionFactory,
     ...props
   }: Props<T>,
-  ref: React.ForwardedRef<HTMLInputElement>
+  ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const { control, t, readOnly: formReadonly } = useScmFormContext();
   const formPathPrefix = useScmFormPathContext();
@@ -67,6 +67,7 @@ function ControlledChipInputField<T extends Record<string, unknown>>(
   const placeholderTranslation = placeholder || t(`${prefixedNameWithoutIndices}.placeholder`) || "";
   const ariaLabelTranslation = t(`${prefixedNameWithoutIndices}.ariaLabel`);
   const helpTextTranslation = helpText || t(`${prefixedNameWithoutIndices}.helpText`);
+
   return (
     <Controller
       control={control}
@@ -74,6 +75,7 @@ function ControlledChipInputField<T extends Record<string, unknown>>(
       rules={rules}
       defaultValue={defaultValue}
       render={({ field: { value, onChange, ...field }, fieldState }) => (
+        // @ts-ignore
         <ChipInputField
           label={labelTranslation}
           helpText={helpTextTranslation}