@scm-manager/ui-core 4.0.0-REACT19-20250825-073633 → 4.0.0-REACT19-20250910-124634

package/src/base/layout/card/CardDetail.tsx

@@ -14,13 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, {
-  ButtonHTMLAttributes,
-  ComponentProps,
-  ComponentPropsWithoutRef,
-  HTMLAttributes,
-  ReactNode,
-} from "react";
+import React, { ButtonHTMLAttributes, ComponentProps, FC, HTMLAttributes, ReactNode, Ref } from "react";
 import classNames from "classnames";
 import { useAriaId } from "../../helpers";
 import styled from "styled-components";
@@ -35,7 +29,7 @@ export const CardVariants = {
   WARNING: "warning",
 } as const;
 
-export type CardVariant = typeof CardVariants[keyof typeof CardVariants];
+export type CardVariant = (typeof CardVariants)[keyof typeof CardVariants];
 
 const createCardVariantClasses = (variant?: string | undefined) =>
   classNames({
@@ -48,6 +42,7 @@ const createCardVariantClasses = (variant?: string | undefined) =>
 
 type CardDetailProps = Omit<HTMLAttributes<HTMLSpanElement>, "children"> & {
   children: ReactNode | ((props: { labelId: string }) => ReactNode);
+  ref?: Ref<HTMLSpanElement>;
 };
 
 type CardVariantProps = {
@@ -58,16 +53,14 @@ type CardVariantProps = {
  * @beta
  * @since 2.46.0
  */
-export const CardDetail = React.forwardRef<HTMLSpanElement, CardDetailProps>(
-  ({ children, className, ...props }, ref) => {
-    const labelId = useAriaId();
-    return (
-      <span {...props} className={classNames("is-flex is-align-items-center has-gap-1 p-1", className)} ref={ref}>
-        {typeof children === "function" ? children({ labelId }) : children}
-      </span>
-    );
-  }
-);
+export const CardDetail: FC<CardDetailProps> = ({ children, className, ref, ...props }) => {
+  const labelId = useAriaId();
+  return (
+    <span {...props} className={classNames("is-flex is-align-items-center has-gap-1 p-1", className)} ref={ref}>
+      {typeof children === "function" ? children({ labelId }) : children}
+    </span>
+  );
+};
 
 const InteractiveDetailStyles = `
   &:focus {
@@ -84,23 +77,23 @@ const StyledCardButtonDetail = styled.button`
   }
 `;
 
+type CardButtonDetailProps = ButtonHTMLAttributes<HTMLButtonElement> & { ref?: Ref<HTMLButtonElement> };
+
 /**
  * @beta
  * @since 2.47.0
  */
-export const CardButtonDetail = React.forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
-  ({ children, className, ...props }, ref) => (
-    <StyledCardButtonDetail
-      {...props}
-      className={classNames(
-        "is-flex is-align-items-center has-gap-1 p-1 is-borderless has-background-transparent is-relative has-hover-background-blue has-rounded-border is-clickable",
-        className
-      )}
-      ref={ref}
-    >
-      {children}
-    </StyledCardButtonDetail>
-  )
+export const CardButtonDetail: FC<CardButtonDetailProps> = ({ children, className, ref, ...props }) => (
+  <StyledCardButtonDetail
+    {...props}
+    className={classNames(
+      "is-flex is-align-items-center has-gap-1 p-1 is-borderless has-background-transparent is-relative has-hover-background-blue has-rounded-border is-clickable",
+      className,
+    )}
+    ref={ref}
+  >
+    {children}
+  </StyledCardButtonDetail>
 );
 
 const StyledCardLinkDetail = styled(Link)`
@@ -113,59 +106,55 @@ const StyledCardLinkDetail = styled(Link)`
  * @beta
  * @since 2.47.0
  */
-export const CardLinkDetail = React.forwardRef<HTMLAnchorElement, ComponentPropsWithoutRef<typeof Link>>(
-  ({ children, className, ...props }, ref) => (
-    <StyledCardLinkDetail
-      {...props}
-      className={classNames(
-        "is-flex is-align-items-center has-gap-1 p-1 is-borderless has-background-transparent is-relative has-hover-background-blue has-rounded-border is-clickable",
-        className
-      )}
-      ref={ref}
-    >
-      {children}
-    </StyledCardLinkDetail>
-  )
+export const CardLinkDetail: FC<ComponentProps<typeof Link>> = ({ children, className, ref, ...props }) => (
+  <StyledCardLinkDetail
+    {...props}
+    className={classNames(
+      "is-flex is-align-items-center has-gap-1 p-1 is-borderless has-background-transparent is-relative has-hover-background-blue has-rounded-border is-clickable",
+      className,
+    )}
+    ref={ref}
+  >
+    {children}
+  </StyledCardLinkDetail>
 );
 
+type CardDetailsLabelProps = HTMLAttributes<HTMLSpanElement> & { ref?: Ref<HTMLSpanElement> };
+
 /**
  * @beta
  * @since 2.46.0
  */
-export const CardDetailLabel = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
-  ({ children, className, ...props }, ref) => (
-    <span {...props} className={classNames("has-text-secondary is-size-7", className)} ref={ref}>
-      {children}
-    </span>
-  )
+export const CardDetailLabel: FC<CardDetailsLabelProps> = ({ children, className, ref, ...props }) => (
+  <span {...props} className={classNames("has-text-secondary is-size-7", className)} ref={ref}>
+    {children}
+  </span>
 );
 
+type CardDetailTagProps = HTMLAttributes<HTMLSpanElement> & CardVariantProps & { ref?: Ref<HTMLSpanElement> };
+
 /**
  * @beta
  * @since 2.46.0
  */
-export const CardDetailTag = React.forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement> & CardVariantProps>(
-  ({ children, className, ...props }, ref) => (
-    <span
-      {...props}
-      className={classNames("tag is-rounded", createCardVariantClasses(props.cardVariant), className)}
-      ref={ref}
-    >
-      {children}
-    </span>
-  )
+export const CardDetailTag: FC<CardDetailTagProps> = ({ children, className, ref, ...props }) => (
+  <span
+    {...props}
+    className={classNames("tag is-rounded", createCardVariantClasses(props.cardVariant), className)}
+    ref={ref}
+  >
+    {children}
+  </span>
 );
 
 /**
  * @beta
  * @since 2.47.0
  */
-export const CardDetailIcon = React.forwardRef<HTMLElement, ComponentProps<typeof Icon>>(
-  ({ children, className, ...props }, ref) => (
-    <Icon {...props} className={classNames("is-size-5", className)} ref={ref}>
-      {children}
-    </Icon>
-  )
+export const CardDetailIcon: FC<ComponentProps<typeof Icon>> = ({ children, className, ref, ...props }) => (
+  <Icon {...props} className={classNames("is-size-5", className)} ref={ref}>
+    {children}
+  </Icon>
 );
 
 const CardDetailsRowContainer = styled.div`
@@ -176,18 +165,18 @@ const CardDetailsRowContainer = styled.div`
   }
 `;
 
+type CardDetailsProps = HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> };
+
 /**
  * @beta
  * @since 2.46.0
  */
-export const CardDetails = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ children, className, ...props }, ref) => (
-    <CardDetailsRowContainer
-      {...props}
-      className={classNames("is-flex is-flex-wrap-wrap is-align-items-center", className)}
-      ref={ref}
-    >
-      {children}
-    </CardDetailsRowContainer>
-  )
+export const CardDetails: FC<CardDetailsProps> = ({ children, className, ref, ...props }) => (
+  <CardDetailsRowContainer
+    {...props}
+    className={classNames("is-flex is-flex-wrap-wrap is-align-items-center", className)}
+    ref={ref}
+  >
+    {children}
+  </CardDetailsRowContainer>
 );

package/src/base/layout/card/CardRow.tsx

@@ -14,25 +14,25 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps, HTMLAttributes } from "react";
+import React, { ComponentProps, FC, HTMLAttributes, Ref } from "react";
 import classNames from "classnames";
 
+type CardRowProps = HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> };
+
 /**
  * @beta
  * @since 2.44.0
  */
-const CardRow = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+const CardRow: FC<CardRowProps> = ({ className, ref, ...props }) => (
   <div className={classNames(className, "ml-1")} {...props} ref={ref} />
-));
+);
 
 export default CardRow;
 
-export const SecondaryRow = React.forwardRef<HTMLDivElement, ComponentProps<typeof CardRow>>(
-  ({ className, ...props }, ref) => <CardRow className={classNames(className, "is-size-7")} {...props} ref={ref} />
+export const SecondaryRow: FC<ComponentProps<typeof CardRow>> = ({ className, ref, ...props }) => (
+  <CardRow className={classNames(className, "is-size-7")} {...props} ref={ref} />
 );
 
-export const TertiaryRow = React.forwardRef<HTMLDivElement, ComponentProps<typeof CardRow>>(
-  ({ className, ...props }, ref) => (
-    <CardRow className={classNames(className, "is-size-7", "has-text-secondary")} {...props} ref={ref} />
-  )
+export const TertiaryRow: FC<ComponentProps<typeof CardRow>> = ({ className, ref, ...props }) => (
+  <CardRow className={classNames(className, "is-size-7", "has-text-secondary")} {...props} ref={ref} />
 );

package/src/base/layout/card/CardTitle.tsx

@@ -14,13 +14,14 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLAttributes } from "react";
+import React, { FC, HTMLAttributes, Ref } from "react";
 
 type Props = HTMLAttributes<HTMLHeadingElement> & {
   /**
    * @default 3
    */
   level?: number;
+  ref?: Ref<HTMLHeadingElement>;
 };
 
 /**
@@ -37,15 +38,14 @@ type Props = HTMLAttributes<HTMLHeadingElement> & {
  * @beta
  * @since 2.44.0
  */
-const CardTitle = React.forwardRef<HTMLHeadingElement, Props>(({ children, level = 3, ...props }, ref) =>
+const CardTitle: FC<Props> = ({ children, level = 3, ref, ...props }) =>
   React.createElement(
     `h${level}`,
     {
       ref,
       ...props,
     },
-    children
-  )
-);
+    children,
+  );
 
 export default CardTitle;

package/src/base/layout/card-list/CardList.tsx

@@ -14,19 +14,19 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps, HTMLAttributes } from "react";
+import React, { ComponentProps, FC, HTMLAttributes, Ref } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 import Card from "../card/Card";
 
+type CardListCardProps = Omit<ComponentProps<typeof Card>, "as">;
+
 /**
  * @beta
  * @since 2.44.0
  * @see Card
  */
-export const CardListCard = React.forwardRef<HTMLElement, Omit<ComponentProps<typeof Card>, "as">>((props, ref) => (
-  <Card ref={ref} {...props} as="li" />
-));
+export const CardListCard: FC<CardListCardProps> = ({ ref, ...props }) => <Card ref={ref} {...props} as="li" />;
 
 const CardListElement = styled.ul`
   > * + * {
@@ -43,26 +43,26 @@ const CardListElement = styled.ul`
   }
 `;
 
-type Props = HTMLAttributes<HTMLUListElement>;
+type Props = HTMLAttributes<HTMLUListElement> & { ref?: Ref<HTMLUListElement> };
 
 /**
  * @beta
  * @since 2.44.0
  */
-const CardList = React.forwardRef<HTMLUListElement, Props>(({ children, className, ...props }, ref) => (
+const CardList: FC<Props> = ({ children, className, ref, ...props }) => (
   <CardListElement ref={ref} {...props} className={classNames(className, "is-flex", "is-flex-direction-column")}>
     {children}
   </CardListElement>
-));
+);
 
 /**
  * @beta
  * @since 2.44.0
  */
-export const CardListBox = React.forwardRef<HTMLUListElement, Props>(({ className, children, ...props }, ref) => (
+export const CardListBox: FC<Props> = ({ className, children, ref, ...props }) => (
   <CardList className={classNames(className, "p-2 box")} ref={ref} {...props}>
     {children}
   </CardList>
-));
+);
 
 export default CardList;

package/src/base/layout/collapsible/Collapsible.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps, ReactNode, useEffect, useState } from "react";
+import React, { ComponentProps, FC, ReactNode, Ref, useEffect, useState } from "react";
 import * as RadixCollapsible from "@radix-ui/react-collapsible";
 import { Icon } from "../../buttons";
 import styled from "styled-components";
@@ -34,46 +34,53 @@ type Props = {
   defaultCollapsed?: boolean;
   collapsed?: boolean;
   onCollapsedChange?: (collapsed: boolean) => void;
+  ref?: Ref<HTMLButtonElement>;
 } & Pick<ComponentProps<typeof RadixCollapsible.Root>, "className" | "children">;
 
 /**
  * @beta
  * @since 2.46.0
  */
-const Collapsible = React.forwardRef<HTMLButtonElement, Props>(
-  ({ children, header, className, defaultCollapsed, collapsed, onCollapsedChange }, ref) => {
-    const [isCollapsed, setCollapsed] = useState(defaultCollapsed);
-    const titleId = useAriaId();
-    useEffect(() => {
-      if (collapsed !== undefined) {
-        setCollapsed(collapsed);
-      }
-    }, [collapsed]);
+const Collapsible: FC<Props> = ({
+  children,
+  header,
+  className,
+  defaultCollapsed,
+  collapsed,
+  onCollapsedChange,
+  ref,
+}) => {
+  const [isCollapsed, setCollapsed] = useState(defaultCollapsed);
+  const titleId = useAriaId();
+  useEffect(() => {
+    if (collapsed !== undefined) {
+      setCollapsed(collapsed);
+    }
+  }, [collapsed]);
 
-    return (
-      <RadixCollapsible.Root
-        className={classNames("card", className)}
-        open={!isCollapsed}
-        onOpenChange={(o) => {
-          setCollapsed(!o);
-          if (onCollapsedChange) {
-            onCollapsedChange(!o);
-          }
-        }}
-        defaultOpen={!defaultCollapsed}
-      >
-        <StyledCollapsibleHeader className="card-header is-flex is-justify-content-space-between is-shadowless">
-          <span id={titleId} className="card-header-title">
-            {header}
-          </span>
-          <StyledTrigger aria-labelledby={titleId} className="card-header-icon" ref={ref}>
-            <Icon>{isCollapsed ? "angle-left" : "angle-down"}</Icon>
-          </StyledTrigger>
-        </StyledCollapsibleHeader>
-        <RadixCollapsible.Content className="card-content p-2">{children}</RadixCollapsible.Content>
-      </RadixCollapsible.Root>
-    );
-  }
-);
+  return (
+    <RadixCollapsible.Root
+      className={classNames("card", className)}
+      open={!isCollapsed}
+      onOpenChange={(o) => {
+        setCollapsed(!o);
+        if (onCollapsedChange) {
+          onCollapsedChange(!o);
+        }
+      }}
+      defaultOpen={!defaultCollapsed}
+    >
+      <StyledCollapsibleHeader className="card-header is-flex is-justify-content-space-between is-shadowless">
+        <span id={titleId} className="card-header-title">
+          {header}
+        </span>
+        <StyledTrigger aria-labelledby={titleId} className="card-header-icon" ref={ref}>
+          <Icon>{isCollapsed ? "angle-left" : "angle-down"}</Icon>
+        </StyledTrigger>
+      </StyledCollapsibleHeader>
+      <RadixCollapsible.Content className="card-content p-2">{children}</RadixCollapsible.Content>
+    </RadixCollapsible.Root>
+  );
+};
 
 export default Collapsible;

package/src/base/layout/tabs/TabTrigger.tsx

@@ -14,17 +14,17 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps } from "react";
+import React, { ComponentProps, FC, Ref } from "react";
 import classNames from "classnames";
 import * as HeadlessTabs from "@radix-ui/react-tabs";
 
-type Props = ComponentProps<typeof HeadlessTabs.Trigger>;
+type Props = ComponentProps<typeof HeadlessTabs.Trigger> & { ref?: Ref<HTMLButtonElement> };
 
 /**
  * @beta
  * @since 2.47.0
  */
-const TabTrigger = React.forwardRef<HTMLButtonElement, Props>(({ children, className, ...props }, ref) => (
+const TabTrigger: FC<Props> = ({ children, className, ref, ...props }) => (
   <li>
     <HeadlessTabs.Trigger
       className={classNames("has-background-transparent is-borderless", className)}
@@ -34,5 +34,6 @@ const TabTrigger = React.forwardRef<HTMLButtonElement, Props>(({ children, class
       {children}
     </HeadlessTabs.Trigger>
   </li>
-));
+);
+
 export default TabTrigger;

package/src/base/layout/tabs/Tabs.tsx

@@ -14,16 +14,16 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps, useCallback, useState } from "react";
+import React, { ComponentProps, FC, Ref, useCallback, useState } from "react";
 import * as HeadlessTabs from "@radix-ui/react-tabs";
 
-type Props = Omit<ComponentProps<typeof HeadlessTabs.Root>, "value">;
+type Props = Omit<ComponentProps<typeof HeadlessTabs.Root>, "value"> & { ref?: Ref<HTMLDivElement> };
 
 /**
  * @beta
  * @since 2.47.0
  */
-const Tabs = React.forwardRef<HTMLDivElement, Props>(({ defaultValue, onValueChange, children, ...props }, ref) => {
+const Tabs: FC<Props> = ({ defaultValue, onValueChange, children, ref, ...props }) => {
   const [value, setValue] = useState(defaultValue);
   const handleValueChange = useCallback(
     (newValue: string) => {
@@ -39,6 +39,6 @@ const Tabs = React.forwardRef<HTMLDivElement, Props>(({ defaultValue, onValueCha
       {children}
     </HeadlessTabs.Root>
   );
-});
+};
 
 export default Tabs;

package/src/base/layout/tabs/TabsList.tsx

@@ -14,20 +14,22 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLAttributes } from "react";
+import React, { FC, HTMLAttributes, Ref } from "react";
 import * as RadixTabs from "@radix-ui/react-tabs";
 import classNames from "classnames";
 
+type Props = HTMLAttributes<HTMLUListElement> & { ref?: Ref<HTMLUListElement> };
+
 /**
  * @beta
  * @since 2.47.0
  */
-const TabsList = React.forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ children, ...props }, ref) => (
+const TabsList: FC<Props> = ({ children, ref, ...props }) => (
   <RadixTabs.List className={classNames("tabs", /* required for focus-outline */ "p-1")}>
     <ul {...props} ref={ref}>
       {children}
     </ul>
   </RadixTabs.List>
-));
+);
 
 export default TabsList;

package/src/base/layout/templates/data-page/DataPageHeader.tsx

@@ -15,7 +15,7 @@
  */
 
 import withClasses from "../../_helpers/with-classes";
-import React, { HTMLAttributes } from "react";
+import React, { FC, HTMLAttributes, Ref } from "react";
 import classNames from "classnames";
 import { useAriaId } from "../../../helpers";
 import { LinkButton } from "../../../buttons";
@@ -50,22 +50,21 @@ export const DataPageHeaderSettings = withClasses("div", [
 
 type DataPageHeaderSettingProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
   children?: React.ReactNode | ((props: { formFieldId: string }) => React.ReactNode);
+  ref?: Ref<HTMLSpanElement>;
 };
 
 /**
  * @beta
  * @since 2.47.0
  */
-export const DataPageHeaderSetting = React.forwardRef<HTMLSpanElement, DataPageHeaderSettingProps>(
-  ({ className, children, ...props }, ref) => {
-    const formFieldId = useAriaId();
-    return (
-      <span {...props} className={classNames(className, "is-flex", "is-align-items-center", "has-gap-2")} ref={ref}>
-        {typeof children === "function" ? children({ formFieldId }) : children}
-      </span>
-    );
-  }
-);
+export const DataPageHeaderSetting: FC<DataPageHeaderSettingProps> = ({ className, children, ref, ...props }) => {
+  const formFieldId = useAriaId();
+  return (
+    <span {...props} className={classNames(className, "is-flex", "is-align-items-center", "has-gap-2")} ref={ref}>
+      {typeof children === "function" ? children({ formFieldId }) : children}
+    </span>
+  );
+};
 
 /**
  * @beta

package/src/base/misc/Image.tsx

@@ -14,12 +14,12 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ImgHTMLAttributes } from "react";
+import React, { FC, ImgHTMLAttributes, Ref } from "react";
 import { urls } from "@scm-manager/ui-api";
 
-const Image = React.forwardRef<HTMLImageElement, ImgHTMLAttributes<HTMLImageElement> & { src: string }>(
-  ({ src, alt, ...props }, ref) => (
-    <img src={src?.startsWith("http") ? src : urls.withContextPath(src)} {...props} ref={ref} alt={alt} />
-  )
+type Props = ImgHTMLAttributes<HTMLImageElement> & { src: string; ref?: Ref<HTMLImageElement> };
+
+const Image: FC<Props> = ({ src, alt, ref, ...props }) => (
+  <img src={src?.startsWith("http") ? src : urls.withContextPath(src)} {...props} ref={ref} alt={alt} />
 );
 export default Image;

package/src/base/misc/Level.tsx

@@ -14,20 +14,21 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { HTMLAttributes, ReactNode } from "react";
+import React, { FC, HTMLAttributes, ReactNode, Ref } from "react";
 import classNames from "classnames";
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   left?: ReactNode;
   right?: ReactNode;
+  ref?: Ref<HTMLDivElement>;
 };
 
-const Level = React.forwardRef<HTMLDivElement, Props>(({ right, left, children, className, ...props }, ref) => (
+const Level: FC<Props> = ({ right, left, children, className, ref, ...props }) => (
   <div className={classNames("level", className)} {...props} ref={ref}>
     <div className="level-left">{left}</div>
     {children ? <div className="level-item">{children}</div> : null}
     <div className="level-right">{right}</div>
   </div>
-));
+);
 
 export default Level;