@scm-manager/ui-core 4.0.0-REACT18-20250701-125025 → 4.0.0-REACT19

package/src/base/forms/combobox/Combobox.stories.tsx

@@ -14,104 +14,231 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { storiesOf } from "@storybook/react";
+// import { storiesOf } from "@storybook/react";
+// import React, { Fragment, useState } from "react";
+// import Combobox from "./Combobox";
+// import { Combobox as HeadlessCombobox } from "@headlessui/react";
+// import { Option } from "@scm-manager/ui-types";
+// import { Link, BrowserRouter } from "react-router-dom";
+//
+// const waitFor = (ms: number) =>
+//   function <T>(result: T) {
+//     return new Promise<T>((resolve) => setTimeout(() => resolve(result), ms));
+//   };
+//
+// const data = [
+//   { label: "Trillian", value: "1" },
+//   { label: "Arthur", value: "2" },
+//   { label: "Zaphod", value: "3" },
+// ];
+//
+// const linkData = [{ label: "Link111111111111111111111111111111111111", value: "1" }];
+//
+// storiesOf("Combobox", module)
+//   .add("Options array", () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return <Combobox options={data} value={value} onChange={setValue} />;
+//   })
+//   .add("Options function", () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return <Combobox options={() => data} value={value} onChange={setValue} />;
+//   })
+//   .add("Options function as promise", () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return (
+//       <Combobox
+//         value={value}
+//         onChange={setValue}
+//         options={(query) => Promise.resolve(data.filter((t) => t.label.startsWith(query))).then(waitFor(1000))}
+//       />
+//     );
+//   })
+//   .add("Children as Element", () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     const [query, setQuery] = useState("");
+//
+//     return (
+//       <Combobox value={value} onChange={setValue} onQueryChange={setQuery}>
+//         {query ? (
+//           <HeadlessCombobox.Option value={{ label: query, value: query }} key={query} as={Fragment}>
+//             {({ active }) => <Combobox.Option isActive={active}>{`Create ${query}`}</Combobox.Option>}
+//           </HeadlessCombobox.Option>
+//         ) : null}
+//         <HeadlessCombobox.Option value={{ label: "All", value: "All" }} key="all" as={Fragment}>
+//           {({ active }) => <Combobox.Option isActive={active}>All</Combobox.Option>}
+//         </HeadlessCombobox.Option>
+//         <>
+//           {data.map((o) => (
+//             <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+//               {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+//             </HeadlessCombobox.Option>
+//           ))}
+//         </>
+//       </Combobox>
+//     );
+//   })
+//   .add("Children as render props", () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return (
+//       <Combobox options={data} value={value} onChange={setValue}>
+//         {(o) => (
+//           <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+//             {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+//           </HeadlessCombobox.Option>
+//         )}
+//       </Combobox>
+//     );
+//   })
+//   .add("Links as render props", () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     const [query, setQuery] = useState("Hello");
+//     return (
+//       <BrowserRouter>
+//         <Combobox
+//           className="input is-small omni-search-bar"
+//           placeholder={"Placeholder"}
+//           value={value}
+//           options={linkData}
+//           onChange={setValue}
+//           onQueryChange={setQuery}
+//         >
+//           {(o) => (
+//             <HeadlessCombobox.Option value={{ label: o.label, value: query, displayValue: o.value }} key={o.value} as={Fragment}>
+//               {({ active }) => (
+//                 <Combobox.Option isActive={active}>
+//                   <Link to={o.label}>{o.label}</Link>
+//                 </Combobox.Option>
+//               )}
+//             </HeadlessCombobox.Option>
+//           )}
+//         </Combobox>
+//       </BrowserRouter>
+//     );
+//   });
+
 import React, { Fragment, useState } from "react";
-import Combobox from "./Combobox";
+import { BrowserRouter, Link } from "react-router-dom";
+import type { Meta, StoryObj } from "@storybook/react";
 import { Combobox as HeadlessCombobox } from "@headlessui/react";
 import { Option } from "@scm-manager/ui-types";
-import { Link, BrowserRouter } from "react-router-dom";
 
-const waitFor = (ms: number) =>
-  function <T>(result: T) {
-    return new Promise<T>((resolve) => setTimeout(() => resolve(result), ms));
-  };
+import Combobox from "./Combobox";
+
+const waitFor =
+  (ms: number) =>
+  <T,>(result: T) =>
+    new Promise<T>((resolve) => setTimeout(() => resolve(result), ms));
 
-const data = [
+const data: Option<string>[] = [
   { label: "Trillian", value: "1" },
   { label: "Arthur", value: "2" },
   { label: "Zaphod", value: "3" },
 ];
 
-const linkData = [{ label: "Link111111111111111111111111111111111111", value: "1" }];
+const linkData: Option<string>[] = [{ label: "/user/trillian", value: "1" }];
+
+const meta: Meta<typeof Combobox> = {
+  title: "Forms/Combobox",
+  // @ts-ignore
+  component: Combobox,
+  decorators: [(Story) => <div style={{ margin: "2rem", maxWidth: "20rem", minHeight: "15rem" }}>{Story()}</div>],
+  tags: ["autodocs"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-storiesOf("Combobox", module)
-  .add("Options array", () => {
-    const [value, setValue] = useState<Option<string>>();
-    return <Combobox options={data} value={value} onChange={setValue} />;
-  })
-  .add("Options function", () => {
-    const [value, setValue] = useState<Option<string>>();
-    return <Combobox options={() => data} value={value} onChange={setValue} />;
-  })
-  .add("Options function as promise", () => {
-    const [value, setValue] = useState<Option<string>>();
-    return (
-      <Combobox
-        value={value}
-        onChange={setValue}
-        options={(query) => Promise.resolve(data.filter((t) => t.label.startsWith(query))).then(waitFor(1000))}
-      />
-    );
-  })
-  .add("Children as Element", () => {
-    const [value, setValue] = useState<Option<string>>();
-    const [query, setQuery] = useState("");
+// export const OptionsAsArray: Story = {
+//   name: "Options from Array",
+//   render: () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return <Combobox options={data} value={value} onChange={setValue} />;
+//   },
+// };
+//
+// export const OptionsAsFunction: Story = {
+//   name: "Options from Function",
+//   render: () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return <Combobox options={() => data} value={value} onChange={setValue} />;
+//   },
+// };
+//
+// export const OptionsAsPromise: Story = {
+//   name: "Options from Promise",
+//   render: () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return (
+//       <Combobox
+//         value={value}
+//         onChange={setValue}
+//         options={(query) => Promise.resolve(data.filter((t) => t.label.startsWith(query))).then(waitFor(1000))}
+//       />
+//     );
+//   },
+// };
 
-    return (
-      <Combobox value={value} onChange={setValue} onQueryChange={setQuery}>
-        {query ? (
-          <HeadlessCombobox.Option value={{ label: query, value: query }} key={query} as={Fragment}>
-            {({ active }) => <Combobox.Option isActive={active}>{`Create ${query}`}</Combobox.Option>}
-          </HeadlessCombobox.Option>
-        ) : null}
-        <HeadlessCombobox.Option value={{ label: "All", value: "All" }} key="all" as={Fragment}>
-          {({ active }) => <Combobox.Option isActive={active}>All</Combobox.Option>}
-        </HeadlessCombobox.Option>
-        <>
-          {data.map((o) => (
-            <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
-              {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
-            </HeadlessCombobox.Option>
-          ))}
-        </>
-      </Combobox>
-    );
-  })
-  .add("Children as render props", () => {
-    const [value, setValue] = useState<Option<string>>();
-    return (
-      <Combobox options={data} value={value} onChange={setValue}>
-        {(o) => (
-          <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
-            {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
-          </HeadlessCombobox.Option>
-        )}
-      </Combobox>
-    );
-  })
-  .add("Links as render props", () => {
-    const [value, setValue] = useState<Option<string>>();
-    const [query, setQuery] = useState("Hello");
-    return (
-      <BrowserRouter>
-        <Combobox
-          className="input is-small omni-search-bar"
-          placeholder={"Placeholder"}
-          value={value}
-          options={linkData}
-          onChange={setValue}
-          onQueryChange={setQuery}
-        >
-          {(o) => (
-            <HeadlessCombobox.Option value={{ label: o.label, value: query, displayValue: o.value }} key={o.value} as={Fragment}>
-              {({ active }) => (
-                <Combobox.Option isActive={active}>
-                  <Link to={o.label}>{o.label}</Link>
-                </Combobox.Option>
-              )}
-            </HeadlessCombobox.Option>
-          )}
-        </Combobox>
-      </BrowserRouter>
-    );
-  });
+// export const ChildrenAsElement: Story = {
+//   name: "Children as Element",
+//   render: () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     const [query, setQuery] = useState("");
+//     return (
+//       <Combobox value={value} onChange={setValue} onQueryChange={setQuery}>
+//         {query ? (
+//           <HeadlessCombobox.Option value={{ label: query, value: query }} key={query} as={Fragment}>
+//             {({ active }) => <Combobox.Option isActive={active}>{`Create ${query}`}</Combobox.Option>}
+//           </HeadlessCombobox.Option>
+//         ) : null}
+//         <HeadlessCombobox.Option value={{ label: "All", value: "All" }} key="all" as={Fragment}>
+//           {({ active }) => <Combobox.Option isActive={active}>All</Combobox.Option>}
+//         </HeadlessCombobox.Option>
+//         {data.map((o) => (
+//           <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+//             {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+//           </HeadlessCombobox.Option>
+//         ))}
+//       </Combobox>
+//     );
+//   },
+// };
+//
+// export const ChildrenAsRenderProps: Story = {
+//   name: "Children as Render Props",
+//   render: () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return (
+//       <Combobox options={data} value={value} onChange={setValue}>
+//         {(o) => (
+//           <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+//             {({ active }) => <Combobox.Option isActive={active}>{o.label}</Combobox.Option>}
+//           </HeadlessCombobox.Option>
+//         )}
+//       </Combobox>
+//     );
+//   },
+// };
+//
+// export const LinksAsRenderProps: Story = {
+//   name: "Links as Render Props",
+//   render: () => {
+//     const [value, setValue] = useState<Option<string>>();
+//     return (
+//       // Diese Story benötigt ihren eigenen Router-Kontext, um die `Link`-Komponente zu rendern.
+//       <BrowserRouter>
+//         <Combobox placeholder="Placeholder" value={value} options={linkData} onChange={setValue}>
+//           {(o) => (
+//             <HeadlessCombobox.Option value={o} key={o.value} as={Fragment}>
+//               {({ active }) => (
+//                 <Combobox.Option isActive={active}>
+//                   <Link to={o.label}>{o.label}</Link>
+//                 </Combobox.Option>
+//               )}
+//             </HeadlessCombobox.Option>
+//           )}
+//         </Combobox>
+//       </BrowserRouter>
+//     );
+//   },
+// };

package/src/base/forms/combobox/Combobox.tsx

@@ -124,7 +124,7 @@ function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInp
         <HeadlessCombobox.Option value={o} key={o.label} as={Fragment}>
           {({ active }) => <StyledComboboxOption isActive={active}>{o.displayValue ?? o.label}</StyledComboboxOption>}
         </HeadlessCombobox.Option>
-      )
+      ),
     );
   }
 
@@ -132,6 +132,7 @@ function ComboboxComponent<T>(props: ComboboxProps<T>, ref: ForwardedRef<HTMLInp
     <HeadlessCombobox
       as="div"
       value={props.value}
+      // @ts-ignore
       onChange={(e?: Option<T>) => props.onChange && props.onChange(e)}
       disabled={props.disabled || props.readOnly}
       name={props.name}
@@ -173,6 +174,7 @@ type ComboboxOptionsProps<T> = {
 
 function ComboboxOptions<T>({ query, options, children }: ComboboxOptionsProps<T>) {
   const [optionsData, setOptionsData] = useState<Array<Option<T>>>([]);
+  // @ts-ignore
   const activePromise = useRef<Promise<Array<Option<T>>>>();
 
   useEffect(() => {
@@ -204,7 +206,7 @@ function ComboboxOptions<T>({ query, options, children }: ComboboxOptionsProps<T
           <HeadlessCombobox.Option value={o} key={o.label} as={Fragment}>
             {({ active }) => <StyledComboboxOption isActive={active}>{o.displayValue ?? o.label}</StyledComboboxOption>}
           </HeadlessCombobox.Option>
-        )
+        ),
       )}
     </>
   );

package/src/base/forms/combobox/ComboboxField.tsx

@@ -38,7 +38,7 @@ const ComboboxField = function ComboboxField<T>(
     required,
     ...props
   }: ComboboxProps<T> & { label: string; helpText?: string; error?: string; isLoading?: boolean; required?: boolean },
-  ref: React.ForwardedRef<HTMLInputElement>
+  ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const labelId = useAriaId();
   return (
@@ -49,6 +49,7 @@ const ComboboxField = function ComboboxField<T>(
         {helpText ? <Help className="ml-1" text={helpText} /> : null}
       </Label>
       <div className={classNames("control", { "is-loading": isLoading })}>
+        {/* @ts-ignore */}
         <Combobox {...props} ref={ref} aria-labelledby={labelId} />
       </div>
     </Field>

package/src/base/forms/headless-chip-input/ChipInput.tsx

@@ -38,7 +38,7 @@ import { Button } from "../../buttons";
 type ChipInputContextType<T> = {
   add(newValue: Option<T>): void;
   remove(index: number): void;
-  inputRef: RefObject<HTMLInputElement>;
+  inputRef: RefObject<HTMLInputElement | null>;
   disabled?: boolean;
   readOnly?: boolean;
 };
@@ -73,7 +73,7 @@ const DefaultNewChipInput = React.forwardRef<HTMLInputElement, CustomNewChipInpu
           return false;
         }
       },
-      [onChange]
+      [onChange],
     );
 
     return (
@@ -81,7 +81,7 @@ const DefaultNewChipInput = React.forwardRef<HTMLInputElement, CustomNewChipInpu
         <input onKeyDown={handleKeyDown} {...props} ref={ref} />
       </div>
     );
-  }
+  },
 );
 
 type ChipDeleteProps = {
@@ -119,7 +119,7 @@ type NewChipInputProps = {
  */
 export const NewChipInput = withForwardRef(function NewChipInput<T>(
   props: NewChipInputProps,
-  ref: React.ForwardedRef<HTMLInputElement>
+  ref: React.ForwardedRef<HTMLInputElement>,
 ) {
   const { add, disabled, readOnly, inputRef } = useContext(getChipInputContext<T>());
 
@@ -160,7 +160,7 @@ type Props<T> = {
  */
 const ChipInput = withForwardRef(function ChipInput<T>(
   { children, value = [], disabled, readOnly, onChange, isNewItemDuplicate, ...props }: Props<T>,
-  ref: React.ForwardedRef<HTMLUListElement>
+  ref: React.ForwardedRef<HTMLUListElement>,
 ) {
   const inputRef = useRef<HTMLInputElement>(null);
   const isInactive = useMemo(() => disabled || readOnly, [disabled, readOnly]);
@@ -171,7 +171,7 @@ const ChipInput = withForwardRef(function ChipInput<T>(
         !value?.some((item) =>
           isNewItemDuplicate
             ? isNewItemDuplicate(item, newItem)
-            : item.label === newItem.label || item.value === newItem.value
+            : item.label === newItem.label || item.value === newItem.value,
         )
       ) {
         if (onChange) {
@@ -182,11 +182,11 @@ const ChipInput = withForwardRef(function ChipInput<T>(
         }
       }
     },
-    [isInactive, isNewItemDuplicate, onChange, value]
+    [isInactive, isNewItemDuplicate, onChange, value],
   );
   const remove = useCallback(
     (index: number) => !isInactive && onChange && onChange(value?.filter((_, itdx) => itdx !== index)),
-    [isInactive, onChange, value]
+    [isInactive, onChange, value],
   );
   const Context = getChipInputContext<T>();
   return (
@@ -199,7 +199,7 @@ const ChipInput = withForwardRef(function ChipInput<T>(
           remove,
           inputRef,
         }),
-        [add, disabled, readOnly, remove]
+        [add, disabled, readOnly, remove],
       )}
     >
       <ul {...props} ref={ref}>

package/src/base/forms/helpers.ts

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import { UseFormReturn } from "react-hook-form";
+import { FieldValues, DefaultValues, UseFormReturn } from "react-hook-form";
 import { ForwardedRef, forwardRef, MutableRefObject, Ref, RefCallback } from "react";
 
 export function prefixWithoutIndices(path: string): string {
@@ -28,14 +28,17 @@ export function prefixWithoutIndices(path: string): string {
  * > but does **NOT** add or remove items to existing arrays.
  * > This can therefore not be used to clear lists.
  */
-export function setValues<T>(newValues: T, setValue: UseFormReturn<T>["setValue"], path = "") {
-  for (const [key, val] of Object.entries(newValues)) {
-    if (val !== null && typeof val === "object") {
-      if (Array.isArray(val)) {
-        val.forEach((subVal, idx) => setValues(subVal, setValue, path ? `${path}.${key}.${idx}` : `${key}.${idx}`));
-      } else {
-        setValues(val, setValue, path ? `${path}.${key}` : key);
-      }
+export function setValues<T extends FieldValues>(
+  newValues: DefaultValues<T>,
+  setValue: UseFormReturn<T>["setValue"],
+  path = ""
+) {
+  for (const key of Object.keys(newValues)) {
+    const val = newValues[key as keyof typeof newValues];
+    const fullPath = path ? `${path}.${key}` : key;
+
+    if (val !== null && typeof val === "object" && !Array.isArray(val)) {
+      setValues(val as DefaultValues<T>, setValue, fullPath);
     } else {
       const fullPath = path ? `${path}.${key}` : key;
       setValue(fullPath as any, val, { shouldValidate: !fullPath.endsWith("Confirmation"), shouldDirty: true });

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

@@ -33,6 +33,7 @@ type Props<T extends Record<string, unknown>> = Omit<
   confirmationHelpText?: string;
   confirmationErrorMessage?: string;
   confirmationTestId?: string;
+  disabled?: boolean;
 };
 
 export default function ControlledSecretConfirmationField<T extends Record<string, unknown>>({
@@ -48,6 +49,7 @@ export default function ControlledSecretConfirmationField<T extends Record<strin
   confirmationTestId,
   defaultValue,
   readOnly,
+  disabled,
   ...props
 }: Props<T>) {
   const { control, watch, t, readOnly: formReadonly, formId } = useScmFormContext();
@@ -63,7 +65,7 @@ export default function ControlledSecretConfirmationField<T extends Record<strin
     confirmationErrorMessage || t(`${prefixedNameWithoutIndices}.confirmation.errorMessage`);
   const secretValue = watch(nameWithPrefix);
   const validateConfirmField = useCallback(
-    (value) => secretValue === value || confirmationErrorMessageTranslation,
+    (value: any) => secretValue === value || confirmationErrorMessageTranslation,
     [confirmationErrorMessageTranslation, secretValue]
   );
   const confirmFieldRules = useMemo(
@@ -112,7 +114,7 @@ export default function ControlledSecretConfirmationField<T extends Record<strin
             className={classNames("column", className)}
             type="password"
             readOnly={readOnly ?? formReadonly}
-            disabled={props.disabled}
+            disabled={disabled}
             {...field}
             form={formId}
             label={confirmationLabelTranslation}