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

package/src/base/misc/Loading.tsx

@@ -14,7 +14,7 @@
  * 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 { useTranslation } from "react-i18next";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -29,29 +29,29 @@ const FixedSizedImage = styled(Image)`
   height: 128px;
 `;
 
-const Loading = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { message?: string }>(
-  ({ message, children, className, ...props }, ref) => {
-    const [t] = useTranslation("commons");
-    return (
-      <Wrapper
-        className={classNames(
-          "is-flex",
-          "is-flex-direction-column",
-          "is-justify-content-center",
-          "is-align-items-center",
-          className
-        )}
-        {...props}
-        ref={ref}
-      >
-        <FixedSizedImage className="mb-3" src="/images/loading.svg" alt={t("loading.alt")} />
-        <p className="has-text-centered">
-          {message}
-          {children}
-        </p>
-      </Wrapper>
-    );
-  }
-);
+type Props = HTMLAttributes<HTMLDivElement> & { message?: string; ref?: Ref<HTMLDivElement> };
+
+const Loading: FC<Props> = ({ message, children, className, ref, ...props }) => {
+  const [t] = useTranslation("commons");
+  return (
+    <Wrapper
+      className={classNames(
+        "is-flex",
+        "is-flex-direction-column",
+        "is-justify-content-center",
+        "is-align-items-center",
+        className
+      )}
+      {...props}
+      ref={ref}
+    >
+      <FixedSizedImage className="mb-3" src="/images/loading.svg" alt={t("loading.alt")} />
+      <p className="has-text-centered">
+        {message}
+        {children}
+      </p>
+    </Wrapper>
+  );
+};
 
 export default Loading;

package/src/base/misc/SubSubtitle.tsx

@@ -14,16 +14,16 @@
  * 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 classNames from "classnames";
 
-const SubSubtitle = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, children, ...props }, ref) =>
-    children ? (
-      <h3 className={classNames("is-size-5", className)} ref={ref} {...props}>
-        {children}
-      </h3>
-    ) : null
-);
+type Props = HTMLAttributes<HTMLHeadingElement> & { ref?: Ref<HTMLHeadingElement> };
+
+const SubSubtitle: FC<Props> = ({ className, children, ref, ...props }) =>
+  children ? (
+    <h3 className={classNames("is-size-5", className)} ref={ref} {...props}>
+      {children}
+    </h3>
+  ) : null;
 
 export default SubSubtitle;

package/src/base/misc/Subtitle.tsx

@@ -14,17 +14,17 @@
  * 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 classNames from "classnames";
 
-const Subtitle = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & { subtitle?: string }>(
-  ({ subtitle, className, children, ...props }, ref) =>
-    !(subtitle || children) ? null : (
-      <h2 className={classNames("subtitle", className)} {...props} ref={ref}>
-        {subtitle}
-        {children}
-      </h2>
-    )
-);
+type Props = HTMLAttributes<HTMLHeadingElement> & { subtitle?: string; ref?: Ref<HTMLHeadingElement> };
+
+const Subtitle: FC<Props> = ({ subtitle, className, children, ref, ...props }) =>
+  !(subtitle || children) ? null : (
+    <h2 className={classNames("subtitle", className)} {...props} ref={ref}>
+      {subtitle}
+      {children}
+    </h2>
+  );
 
 export default Subtitle;

package/src/base/misc/Title.tsx

@@ -14,26 +14,34 @@
  * 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 classNames from "classnames";
 
 type Props = {
   title?: string;
   customPageTitle?: string;
   preventRefreshingPageTitle?: boolean;
-};
-const Title = React.forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement> & Props>(
-  ({ title, customPageTitle, preventRefreshingPageTitle, children, className, ...props }, ref) => {
-    if (children || title) {
-      return (
-        <h1 className={classNames("title", className)} {...props} ref={ref}>
-          {title}
-          {children}
-        </h1>
-      );
-    }
-    return null;
+  ref?: Ref<HTMLHeadingElement>;
+} & HTMLAttributes<HTMLHeadingElement>;
+
+const Title: FC<Props> = ({
+  title,
+  customPageTitle,
+  preventRefreshingPageTitle,
+  children,
+  className,
+  ref,
+  ...props
+}) => {
+  if (children || title) {
+    return (
+      <h1 className={classNames("title", className)} {...props} ref={ref}>
+        {title}
+        {children}
+      </h1>
+    );
   }
-);
+  return null;
+};
 
 export default Title;

package/src/base/notifications/Notification.tsx

@@ -14,7 +14,7 @@
  * 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 classNames from "classnames";
 
 type NotificationType = "primary" | "info" | "success" | "warning" | "danger" | "inherit";
@@ -23,19 +23,18 @@ type Props = {
   type?: NotificationType;
   onClose?: () => void;
   role?: string;
-};
+  ref?: Ref<HTMLDivElement>;
+} & HTMLAttributes<HTMLDivElement>;
 
-const Notification = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & Props>(
-  ({ type = "info", onClose, className, children, role, ...props }, ref) => {
-    const color = type !== "inherit" ? "is-" + type : "";
+const Notification: FC<Props> = ({ type = "info", onClose, className, children, role, ref, ...props }) => {
+  const color = type !== "inherit" ? "is-" + type : "";
 
-    return (
-      <div className={classNames("notification", color, className)} role={role} ref={ref} {...props}>
-        {onClose ? <button className="delete" onClick={onClose} /> : null}
-        {children}
-      </div>
-    );
-  }
-);
+  return (
+    <div className={classNames("notification", color, className)} role={role} ref={ref} {...props}>
+      {onClose ? <button className="delete" onClick={onClose} /> : null}
+      {children}
+    </div>
+  );
+};
 
 export default Notification;

package/src/base/overlays/dialog/Dialog.tsx

@@ -16,18 +16,18 @@
 
 import * as RadixDialog from "@radix-ui/react-dialog";
 import { DialogProps } from "@radix-ui/react-dialog";
-import React, { ComponentProps, ReactComponentElement, ReactElement, ReactNode, useCallback } from "react";
+import React, { ComponentProps, FC, ReactComponentElement, ReactElement, ReactNode, Ref, useCallback } from "react";
 import { Button } from "../../buttons";
 import { useTranslation } from "react-i18next";
 
-export const CloseButton = React.forwardRef<HTMLButtonElement, ComponentProps<typeof Button>>(
-  ({ children, ...props }, ref) => (
-    <RadixDialog.Close asChild>
-      <Button {...props} ref={ref}>
-        {children}
-      </Button>
-    </RadixDialog.Close>
-  )
+type CloseButtonProps = ComponentProps<typeof Button> & { ref?: Ref<HTMLButtonElement> };
+
+export const CloseButton: FC<CloseButtonProps> = ({ children, ref, ...props }) => (
+  <RadixDialog.Close asChild>
+    <Button {...props} ref={ref}>
+      {children}
+    </Button>
+  </RadixDialog.Close>
 );
 
 type Props = {
@@ -35,43 +35,42 @@ type Props = {
   title: ReactNode;
   description?: ReactNode;
   footer?: ReactElement[] | ((close: () => void) => ReactElement[]);
+  ref?: Ref<HTMLDivElement>;
 } & Pick<DialogProps, "onOpenChange" | "open" | "children">;
 
 /**
  * @beta
  * @since 2.46.0
  */
-const Dialog = React.forwardRef<HTMLDivElement, Props>(
-  ({ children, onOpenChange, open, footer, title, trigger, description }, ref) => {
-    const contentProps = description ? {} : { "aria-describedby": undefined };
-    const close = useCallback(() => onOpenChange && onOpenChange(false), [onOpenChange]);
-    const [t] = useTranslation("commons");
-    return (
-      <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
-        <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>
-        <RadixDialog.Portal>
-          <RadixDialog.Overlay className="modal-background" />
-          <RadixDialog.Content className="modal is-active" ref={ref} {...contentProps}>
-            <div className="modal-card">
-              <div className="modal-card-head">
-                <RadixDialog.Title className="modal-card-title">{title}</RadixDialog.Title>
-                <RadixDialog.Close asChild>
-                  <button className="delete" aria-label={t("dialog.closeButton.ariaLabel")} />
-                </RadixDialog.Close>
-              </div>
-              <div className="modal-card-body">
-                {description ? <RadixDialog.Description>{description}</RadixDialog.Description> : null}
-                {children}
-              </div>
-              {footer ? (
-                <div className="modal-card-foot">{typeof footer === "function" ? footer(close) : footer}</div>
-              ) : null}
+const Dialog: FC<Props> = ({ children, onOpenChange, open, footer, title, trigger, description, ref }) => {
+  const contentProps = description ? {} : { "aria-describedby": undefined };
+  const close = useCallback(() => onOpenChange && onOpenChange(false), [onOpenChange]);
+  const [t] = useTranslation("commons");
+  return (
+    <RadixDialog.Root open={open} onOpenChange={onOpenChange}>
+      <RadixDialog.Trigger asChild>{trigger}</RadixDialog.Trigger>
+      <RadixDialog.Portal>
+        <RadixDialog.Overlay className="modal-background" />
+        <RadixDialog.Content className="modal is-active" ref={ref} {...contentProps}>
+          <div className="modal-card">
+            <div className="modal-card-head">
+              <RadixDialog.Title className="modal-card-title">{title}</RadixDialog.Title>
+              <RadixDialog.Close asChild>
+                <button className="delete" aria-label={t("dialog.closeButton.ariaLabel")} />
+              </RadixDialog.Close>
             </div>
-          </RadixDialog.Content>
-        </RadixDialog.Portal>
-      </RadixDialog.Root>
-    );
-  }
-);
+            <div className="modal-card-body">
+              {description ? <RadixDialog.Description>{description}</RadixDialog.Description> : null}
+              {children}
+            </div>
+            {footer ? (
+              <div className="modal-card-foot">{typeof footer === "function" ? footer(close) : footer}</div>
+            ) : null}
+          </div>
+        </RadixDialog.Content>
+      </RadixDialog.Portal>
+    </RadixDialog.Root>
+  );
+};
 
 export default Dialog;

package/src/base/overlays/menu/Menu.tsx

@@ -21,6 +21,7 @@ import React, {
   createContext,
   FC,
   ReactNode,
+  Ref,
   useCallback,
   useContext,
   useMemo,
@@ -55,22 +56,23 @@ const MenuItem = styled(RadixMenu.Item).attrs({
   }
 `;
 
-type MenuLinkProps = Omit<ReactRouterLinkProps, "onSelect"> & Pick<RadixMenu.MenuItemProps, "disabled">;
+type MenuLinkProps = Omit<ReactRouterLinkProps, "onSelect"> &
+  Pick<RadixMenu.MenuItemProps, "disabled"> & { ref?: Ref<HTMLAnchorElement> };
 
 /**
  * @beta
  * @since 2.44.0
  */
-export const MenuLink = React.forwardRef<HTMLAnchorElement, MenuLinkProps>(({ children, disabled, ...props }, ref) => (
+export const MenuLink: FC<MenuLinkProps> = ({ children, disabled, ref, ...props }) => (
   <MenuItem asChild disabled={disabled}>
     <ReactRouterLink ref={ref} {...props}>
       {children}
     </ReactRouterLink>
   </MenuItem>
-));
+);
 
 type MenuExternalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onSelect"> &
-  Pick<RadixMenu.MenuItemProps, "disabled">;
+  Pick<RadixMenu.MenuItemProps, "disabled"> & { ref?: Ref<HTMLAnchorElement> };
 
 /**
  * External links open in a new browser tab with rel flags "noopener" and "noreferrer" set by default.
@@ -78,18 +80,16 @@ type MenuExternalLinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "onSe
  * @beta
  * @since 2.44.0
  */
-export const MenuExternalLink = React.forwardRef<HTMLAnchorElement, MenuExternalLinkProps>(
-  ({ children, disabled, ...props }, ref) => (
-    <MenuItem asChild disabled={disabled}>
-      <a ref={ref} target="_blank" rel="noopener noreferrer" {...props}>
-        {children}
-      </a>
-    </MenuItem>
-  )
+export const MenuExternalLink: FC<MenuExternalLinkProps> = ({ children, disabled, ref, ...props }) => (
+  <MenuItem asChild disabled={disabled}>
+    <a ref={ref} target="_blank" rel="noopener noreferrer" {...props}>
+      {children}
+    </a>
+  </MenuItem>
 );
 
 type MenuButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" | "onSelect"> &
-  Pick<RadixMenu.MenuItemProps, "onSelect">;
+  Pick<RadixMenu.MenuItemProps, "onSelect"> & { ref?: Ref<HTMLButtonElement> };
 
 /**
  * Use {@link MenuButtonProps#onSelect} to handle menu item selection.
@@ -98,14 +98,12 @@ type MenuButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick" |
  * @beta
  * @since 2.44.0
  */
-export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
-  ({ children, onSelect, disabled, ...props }, ref) => (
-    <MenuItem asChild disabled={disabled} onSelect={onSelect}>
-      <button ref={ref} {...props}>
-        {children}
-      </button>
-    </MenuItem>
-  )
+export const MenuButton: FC<MenuButtonProps> = ({ children, onSelect, disabled, ref, ...props }) => (
+  <MenuItem asChild disabled={disabled} onSelect={onSelect}>
+    <button ref={ref} {...props}>
+      {children}
+    </button>
+  </MenuItem>
 );
 
 type MenuContextType = {
@@ -116,6 +114,7 @@ const MenuContext = createContext<MenuContextType>(null as unknown as MenuContex
 type MenuDialogProps = Omit<MenuButtonProps, "onSelect"> &
   Omit<ComponentProps<typeof Dialog>, "trigger"> & {
     dialogContent?: ReactNode;
+    ref?: Ref<HTMLButtonElement>;
   };
 
 /**
@@ -123,37 +122,35 @@ type MenuDialogProps = Omit<MenuButtonProps, "onSelect"> &
  * @since 2.46.0
  * @see {@link Dialog}
  */
-export const MenuDialog = React.forwardRef<HTMLButtonElement, MenuDialogProps>(
-  ({ children, dialogContent, title, description, footer }, ref) => {
-    const { handleDialogItemOpenChange } = useContext(MenuContext);
-    const [open, setOpen] = useState(false);
-    const handleSelect = useCallback((event: Event) => event.preventDefault(), []);
-    const changeOpen = useCallback(
-      (newValue: boolean) => {
-        setOpen(newValue);
-        handleDialogItemOpenChange(newValue);
-      },
-      [handleDialogItemOpenChange]
-    );
-
-    return (
-      <Dialog
-        trigger={
-          <MenuButton ref={ref} onSelect={handleSelect}>
-            {children}
-          </MenuButton>
-        }
-        title={title}
-        description={description}
-        footer={footer}
-        onOpenChange={changeOpen}
-        open={open}
-      >
-        {dialogContent}
-      </Dialog>
-    );
-  }
-);
+export const MenuDialog: FC<MenuDialogProps> = ({ children, dialogContent, title, description, footer, ref }) => {
+  const { handleDialogItemOpenChange } = useContext(MenuContext);
+  const [open, setOpen] = useState(false);
+  const handleSelect = useCallback((event: Event) => event.preventDefault(), []);
+  const changeOpen = useCallback(
+    (newValue: boolean) => {
+      setOpen(newValue);
+      handleDialogItemOpenChange(newValue);
+    },
+    [handleDialogItemOpenChange]
+  );
+
+  return (
+    <Dialog
+      trigger={
+        <MenuButton ref={ref} onSelect={handleSelect}>
+          {children}
+        </MenuButton>
+      }
+      title={title}
+      description={description}
+      footer={footer}
+      onOpenChange={changeOpen}
+      open={open}
+    >
+      {dialogContent}
+    </Dialog>
+  );
+};
 
 type Props = {
   className?: string;

package/src/base/overlays/menu/MenuTrigger.tsx

@@ -14,31 +14,31 @@
  * 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 { Button, Icon } from "../../buttons";
 import * as RadixMenu from "@radix-ui/react-dropdown-menu";
 import { useTranslation } from "react-i18next";
 import classNames from "classnames";
 
-type Props = ComponentProps<typeof Button>;
+type Props = ComponentProps<typeof Button> & { ref?: Ref<HTMLButtonElement> };
 
 /**
  * @beta
  * @since 2.44.0
  */
-const MenuTrigger = React.forwardRef<HTMLButtonElement, Props>(({ children, ...props }, ref) => (
+const MenuTrigger: FC<Props> = ({ children, ref, ...props }) => (
   <RadixMenu.Trigger asChild>
     <Button ref={ref} {...props}>
       {children}
     </Button>
   </RadixMenu.Trigger>
-));
+);
 
 /**
  * @beta
  * @since 2.44.0
  */
-export const DefaultMenuTrigger = React.forwardRef<HTMLButtonElement, Props>(({ className, ...props }, ref) => {
+export const DefaultMenuTrigger: FC<Props> = ({ className, ref, ...props }) => {
   const [t] = useTranslation("commons");
   return (
     <MenuTrigger
@@ -50,6 +50,6 @@ export const DefaultMenuTrigger = React.forwardRef<HTMLButtonElement, Props>(({
       <Icon>ellipsis-v</Icon>
     </MenuTrigger>
   );
-});
+};
 
 export default MenuTrigger;

package/src/base/overlays/popover/Popover.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ReactElement, ReactNode } from "react";
+import React, { FC, ReactElement, ReactNode, Ref } from "react";
 import * as RadixPopover from "@radix-ui/react-popover";
 import styled from "styled-components";
 import classNames from "classnames";
@@ -38,28 +38,26 @@ type Props = {
    * Element to trigger the popover
    */
   trigger: ReactElement;
-
   /**
    * Element for the content of the popover
    */
   children: ReactElement;
-
   /**
    * Element for the title row of the popover
    */
   title: ReactNode;
-
   /**
    * Classnames for the content of the popover
    */
   className?: string;
+  ref?: Ref<HTMLDivElement>;
 };
 
 /**
  * @beta
  * @since 2.46.0
  */
-const Popover = React.forwardRef<HTMLDivElement, Props>(({ title, className, trigger, children }, ref) => {
+const Popover: FC<Props> = ({ title, className, trigger, children, ref }) => {
   const [t] = useTranslation("commons");
 
   return (
@@ -82,6 +80,6 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(({ title, className, tri
       </RadixPopover.Portal>
     </RadixPopover.Root>
   );
-});
+};
 
 export default Popover;

package/src/base/overlays/tooltip/ExpandableHint.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { useState } from "react";
+import React, { FC, Ref, useState } from "react";
 import Icon from "../../buttons/Icon";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -23,11 +23,12 @@ type Props = {
   message: string;
   summary: string;
   className?: string;
-}
+  ref?: Ref<HTMLButtonElement>;
+};
 
 const StyledButton = styled.button`
   border-radius: 4px !important;
-  min-width: 2.5rem;  
+  min-width: 2.5rem;
   min-height: 24px;
   border: none;
   padding: 6px;
@@ -42,8 +43,6 @@ const StyledButton = styled.button`
   }
 `;
 
-
-
 /**
  * An a11y-friendly tooltip replacement that is an expandable hint
  *
@@ -51,7 +50,7 @@ const StyledButton = styled.button`
  * @since 3.2.0
  */
 
-const ExpandableHint = React.forwardRef<HTMLButtonElement, Props>(({ message, summary, className }, ref) => {
+const ExpandableHint: FC<Props> = ({ message, summary, className, ref }) => {
   const [isOpen, setOpen] = useState<boolean>(false);
   return (
     <>
@@ -63,12 +62,12 @@ const ExpandableHint = React.forwardRef<HTMLButtonElement, Props>(({ message, su
         className={classNames(className, "is-flex")}
         ref={ref}
       >
-          {isOpen ? <Icon className="is-small">chevron-down</Icon> : <Icon className="is-small">chevron-right</Icon>}
+        {isOpen ? <Icon className="is-small">chevron-down</Icon> : <Icon className="is-small">chevron-right</Icon>}
         {summary}
       </StyledButton>
       {isOpen ? <p className="mt-2 is-size-7">{message}</p> : undefined}
     </>
   );
-});
+};
 
 export default ExpandableHint;

package/src/base/overlays/tooltip/Tooltip.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ReactElement, ReactNode } from "react";
+import React, { FC, ReactElement, ReactNode, Ref } from "react";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
 import classNames from "classnames";
 import styled from "styled-components";
@@ -49,6 +49,7 @@ type Props = {
    * Class to be applied to the content container.
    */
   className?: string;
+  ref?: Ref<HTMLDivElement>;
 } & Pick<RadixTooltip.TooltipContentProps, "side">;
 
 /**
@@ -57,7 +58,7 @@ type Props = {
  * @since 2.41.0
  * @beta
  */
-const Tooltip = React.forwardRef<HTMLDivElement, Props>(({ children, className, message, side }, ref) => (
+const Tooltip: FC<Props> = ({ children, className, message, side, ref }) => (
   <RadixTooltip.Provider>
     <RadixTooltip.Root>
       <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
@@ -84,5 +85,6 @@ const Tooltip = React.forwardRef<HTMLDivElement, Props>(({ children, className,
       </RadixTooltip.Portal>
     </RadixTooltip.Root>
   </RadixTooltip.Provider>
-));
+);
+
 export default Tooltip;