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

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

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { InputHTMLAttributes } from "react";
+import React, { FC, InputHTMLAttributes, Ref } from "react";
 import classNames from "classnames";
 import { createVariantClass, Variant } from "../variants";
 import { createAttributesForTesting } from "../../helpers";
@@ -22,9 +22,10 @@ import { createAttributesForTesting } from "../../helpers";
 type Props = {
   variant?: Variant;
   testId?: string;
+  ref?: Ref<HTMLInputElement>;
 } & InputHTMLAttributes<HTMLInputElement>;
 
-const Input = React.forwardRef<HTMLInputElement, Props>(({ variant, className, testId, ...props }, ref) => {
+const Input: FC<Props> = ({ variant, className, testId, ref, ...props }) => {
   return (
     <input
       ref={ref}
@@ -33,6 +34,6 @@ const Input = React.forwardRef<HTMLInputElement, Props>(({ variant, className, t
       {...createAttributesForTesting(testId)}
     />
   );
-});
+};
 
 export default Input;

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

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+import React, { FC, Ref } from "react";
 import classNames from "classnames";
 import Field from "../base/Field";
 import Control from "../base/Control";
@@ -36,52 +36,64 @@ export type InputFieldProps = {
   extendedText?: string;
   error?: string;
   icon?: string;
+  ref?: Ref<HTMLInputElement>;
 } & React.ComponentProps<typeof Input>;
 
 /**
  * @see https://bulma.io/documentation/form/input/
  */
-const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
-  ({ name, label, helpText, descriptionText, extendedText, error, icon, className, id, ...props }, ref) => {
-    const inputId = useAriaId(id ?? props.testId);
-    const helpTextId = helpText ? `input-helptext-${name}` : undefined;
-    const descriptionId = descriptionText ? `input-description-${name}` : undefined;
-    const errorId = error ? `input-error-${name}` : undefined;
-    const variant = error ? "danger" : undefined;
-    return (
-      <Field className={className}>
-        <Label htmlFor={inputId}>
-          {label}
-          {helpText ? <Help className="ml-1" text={helpText} /> : null}
-        </Label>
-        {extendedText && descriptionText ? (
-          <ExpandableText id={descriptionId} descriptionText={descriptionText} extendedDescriptionText={extendedText} />
-        ) : (
-          <p className="mb-2" id={descriptionId}>
-            {descriptionText}
-          </p>
-        )}
-        <Control className={classNames({ "has-icons-left": icon })}>
-          <Input
-            variant={variant}
-            ref={ref}
-            id={inputId}
-            aria-describedby={descriptionId || helpTextId}
-            {...props}
-          ></Input>
-          {icon ? (
-            <span className="icon is-small is-left">
-              <i className={icon} />
-            </span>
-          ) : null}
-        </Control>
-        {error ? (
-          <FieldMessage id={errorId} variant={variant}>
-            {error}
-          </FieldMessage>
+const InputField: FC<InputFieldProps> = ({
+  name,
+  label,
+  helpText,
+  descriptionText,
+  extendedText,
+  error,
+  icon,
+  className,
+  id,
+  ref,
+  ...props
+}) => {
+  const inputId = useAriaId(id ?? props.testId);
+  const helpTextId = helpText ? `input-helptext-${name}` : undefined;
+  const descriptionId = descriptionText ? `input-description-${name}` : undefined;
+  const errorId = error ? `input-error-${name}` : undefined;
+  const variant = error ? "danger" : undefined;
+  return (
+    <Field className={className}>
+      <Label htmlFor={inputId}>
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </Label>
+      {extendedText && descriptionText ? (
+        <ExpandableText id={descriptionId} descriptionText={descriptionText} extendedDescriptionText={extendedText} />
+      ) : (
+        <p className="mb-2" id={descriptionId}>
+          {descriptionText}
+        </p>
+      )}
+      <Control className={classNames({ "has-icons-left": icon })}>
+        <Input
+          variant={variant}
+          ref={ref}
+          id={inputId}
+          aria-describedby={descriptionId || helpTextId}
+          {...props}
+        ></Input>
+        {icon ? (
+          <span className="icon is-small is-left">
+            <i className={icon} />
+          </span>
         ) : null}
-      </Field>
-    );
-  }
-);
+      </Control>
+      {error ? (
+        <FieldMessage id={errorId} variant={variant}>
+          {error}
+        </FieldMessage>
+      ) : null}
+    </Field>
+  );
+};
+
 export default InputField;

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

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { InputHTMLAttributes } from "react";
+import React, { FC, InputHTMLAttributes, Ref } from "react";
 import classNames from "classnames";
 import { createVariantClass, Variant } from "../variants";
 import { createAttributesForTesting } from "../../helpers";
@@ -22,9 +22,10 @@ import { createAttributesForTesting } from "../../helpers";
 type Props = {
   variant?: Variant;
   testId?: string;
+  ref?: Ref<HTMLTextAreaElement>;
 } & InputHTMLAttributes<HTMLTextAreaElement>;
 
-const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(({ variant, className, testId, ...props }, ref) => {
+const Textarea: FC<Props> = ({ variant, className, testId, ref, ...props }) => {
   return (
     <textarea
       ref={ref}
@@ -33,6 +34,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>(({ variant, classN
       {...createAttributesForTesting(testId)}
     />
   );
-});
+};
 
 export default Textarea;

package/src/base/forms/radio-button/RadioButton.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+import React, { FC, Ref } from "react";
 import classNames from "classnames";
 import Help from "../base/help/Help";
 import * as RadioGroup from "@radix-ui/react-radio-group";
@@ -65,7 +65,7 @@ const StyledIndicator = styled(RadioGroup.Indicator)`
   }
 `;
 
-type RadioGroupItemElement = React.ElementRef<typeof RadioGroup.Item>;
+type RadioGroupItemElement = React.ComponentRef<typeof RadioGroup.Item>;
 type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroup.Item>;
 
 type Props = {
@@ -76,37 +76,47 @@ type Props = {
   label?: string;
   labelClassName?: string;
   helpText?: string;
+  ref?: Ref<RadioGroupItemElement>;
 } & RadioGroupItemProps;
 
 /**
  * @beta
  * @since 2.48.0
  */
-const RadioButton = React.forwardRef<RadioGroupItemElement, Props>(
-  ({ id, testId, indicatorClassName, label, labelClassName, className, helpText, value, ...props }, ref) => {
-    const context = useRadioButtonContext();
-    const inputId = useAriaId(id);
-    const labelKey = `${context?.prefix}.radio.${value}`;
-    const displayLabel = label ?? context?.t(labelKey) ?? value ?? "";
+const RadioButton: FC<Props> = ({
+  id,
+  testId,
+  indicatorClassName,
+  label,
+  labelClassName,
+  className,
+  helpText,
+  value,
+  ref,
+  ...props
+}) => {
+  const context = useRadioButtonContext();
+  const inputId = useAriaId(id);
+  const labelKey = `${context?.prefix}.radio.${value}`;
+  const displayLabel = label ?? context?.t(labelKey) ?? value ?? "";
 
-    return (
-      <div className={classNames("radio is-flex is-align-items-center", labelClassName)}>
-        <StyledRadioButton
-          form={context?.formId}
-          id={inputId}
-          value={value}
-          ref={ref}
-          className={classNames("mr-3 mt-3 mb-3", className)}
-          {...props}
-          {...createAttributesForTesting(testId)}
-        >
-          <StyledIndicator className={indicatorClassName} />
-        </StyledRadioButton>
-        <label htmlFor={inputId}>{displayLabel}</label>
-        {helpText ? <Help className="ml-3" text={helpText} /> : null}
-      </div>
-    );
-  }
-);
+  return (
+    <div className={classNames("radio is-flex is-align-items-center", labelClassName)}>
+      <StyledRadioButton
+        form={context?.formId}
+        id={inputId}
+        value={value}
+        ref={ref}
+        className={classNames("mr-3 mt-3 mb-3", className)}
+        {...props}
+        {...createAttributesForTesting(testId)}
+      >
+        <StyledIndicator className={indicatorClassName} />
+      </StyledRadioButton>
+      <label htmlFor={inputId}>{displayLabel}</label>
+      {helpText ? <Help className="ml-3" text={helpText} /> : null}
+    </div>
+  );
+};
 
 export default RadioButton;

package/src/base/forms/radio-button/RadioGroup.tsx

@@ -14,20 +14,21 @@
  * 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 Control from "../base/Control";
 import * as RadixRadio from "@radix-ui/react-radio-group";
 import RadioButton from "./RadioButton";
 
 type Props = {
   options?: { value: string; label?: string; helpText?: string }[];
+  ref?: Ref<HTMLDivElement>;
 } & ComponentProps<typeof RadixRadio.Root>;
 
 /**
  * @beta
  * @since 2.48.0
  */
-const RadioGroup = React.forwardRef<HTMLDivElement, Props>(({ options, children, className, ...props }, ref) => (
+const RadioGroup: FC<Props> = ({ options, children, className, ref, ...props }) => (
   <RadixRadio.Root {...props} asChild>
     <Control ref={ref} className={className}>
       {children ??
@@ -36,6 +37,6 @@ const RadioGroup = React.forwardRef<HTMLDivElement, Props>(({ options, children,
         ))}
     </Control>
   </RadixRadio.Root>
-));
+);
 
 export default RadioGroup;

package/src/base/forms/radio-button/RadioGroupField.tsx

@@ -14,7 +14,7 @@
  * 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 Field from "../base/Field";
 import Label from "../base/label/Label";
 import Help from "../base/help/Help";
@@ -25,26 +25,25 @@ type Props = {
   labelClassName?: string;
   label: string;
   helpText?: string;
+  ref?: Ref<HTMLDivElement>;
 } & ComponentProps<typeof RadioGroup>;
 
 /**
  * @beta
  * @since 2.48.0
  */
-const RadioGroupField = React.forwardRef<HTMLDivElement, Props>(
-  ({ fieldClassName, labelClassName, label, helpText, children, ...props }, ref) => {
-    return (
-      <Field className={fieldClassName} as="fieldset">
-        <Label className={labelClassName} as="legend">
-          {label}
-          {helpText ? <Help className="ml-1" text={helpText} /> : null}
-        </Label>
-        <RadioGroup ref={ref} {...props}>
-          {children}
-        </RadioGroup>
-      </Field>
-    );
-  }
-);
+const RadioGroupField: FC<Props> = ({ fieldClassName, labelClassName, label, helpText, children, ref, ...props }) => {
+  return (
+    <Field className={fieldClassName} as="fieldset">
+      <Label className={labelClassName} as="legend">
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </Label>
+      <RadioGroup ref={ref} {...props}>
+        {children}
+      </RadioGroup>
+    </Field>
+  );
+};
 
 export default RadioGroupField;

package/src/base/forms/select/Select.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { InputHTMLAttributes, Key, OptionHTMLAttributes } from "react";
+import React, { FC, InputHTMLAttributes, Key, OptionHTMLAttributes, Ref } from "react";
 import classNames from "classnames";
 import { createVariantClass, Variant } from "../variants";
 import { createAttributesForTesting } from "../../helpers";
@@ -23,27 +23,26 @@ type Props = {
   variant?: Variant;
   options?: Array<OptionHTMLAttributes<HTMLOptionElement> & { label: string }>;
   testId?: string;
+  ref?: Ref<HTMLSelectElement>;
 } & InputHTMLAttributes<HTMLSelectElement>;
 
 /**
  * @beta
  * @since 2.44.0
  */
-const Select = React.forwardRef<HTMLSelectElement, Props>(
-  ({ variant, children, className, options, testId, ...props }, ref) => (
-    <div className={classNames("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)}>
-      <select ref={ref} {...props} {...createAttributesForTesting(testId)} className={className}>
-        {options
-          ? options.map((opt) => (
-              <option {...opt} key={opt.value as Key}>
-                {opt.label}
-                {opt.children}
-              </option>
-            ))
-          : children}
-      </select>
-    </div>
-  )
+const Select: FC<Props> = ({ variant, children, className, options, testId, ref, ...props }) => (
+  <div className={classNames("select", { "is-multiple": props.multiple }, createVariantClass(variant), className)}>
+    <select ref={ref} {...props} {...createAttributesForTesting(testId)} className={className}>
+      {options
+        ? options.map((opt) => (
+            <option {...opt} key={opt.value as Key}>
+              {opt.label}
+              {opt.children}
+            </option>
+          ))
+        : children}
+    </select>
+  </div>
 );
 
 export default Select;

package/src/base/forms/select/SelectField.tsx

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React from "react";
+import React, { FC, Ref } from "react";
 import Field from "../base/Field";
 import Control from "../base/Control";
 import Label from "../base/label/Label";
@@ -27,6 +27,7 @@ type Props = {
   label: string;
   helpText?: string;
   error?: string;
+  ref?: Ref<HTMLSelectElement>;
 } & React.ComponentProps<typeof Select>;
 
 /**
@@ -34,22 +35,21 @@ type Props = {
  * @beta
  * @since 2.44.0
  */
-const SelectField = React.forwardRef<HTMLSelectElement, Props>(
-  ({ label, helpText, error, className, id, ...props }, ref) => {
-    const selectId = useAriaId(id ?? props.testId);
-    const variant = error ? "danger" : undefined;
-    return (
-      <Field className={className}>
-        <Label htmlFor={selectId}>
-          {label}
-          {helpText ? <Help className="ml-1" text={helpText} /> : null}
-        </Label>
-        <Control>
-          <Select id={selectId} variant={variant} ref={ref} className="is-full-width" {...props}></Select>
-        </Control>
-        {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
-      </Field>
-    );
-  }
-);
+const SelectField: FC<Props> = ({ label, helpText, error, className, id, ref, ...props }) => {
+  const selectId = useAriaId(id ?? props.testId);
+  const variant = error ? "danger" : undefined;
+  return (
+    <Field className={className}>
+      <Label htmlFor={selectId}>
+        {label}
+        {helpText ? <Help className="ml-1" text={helpText} /> : null}
+      </Label>
+      <Control>
+        <Select id={selectId} variant={variant} ref={ref} className="is-full-width" {...props}></Select>
+      </Control>
+      {error ? <FieldMessage variant={variant}>{error}</FieldMessage> : null}
+    </Field>
+  );
+};
+
 export default SelectField;

package/src/base/layout/_helpers/with-classes.tsx

@@ -14,20 +14,23 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentProps, ElementRef, ForwardRefExoticComponent, ReactElement } from "react";
+import React, { ComponentProps, ElementRef, ForwardRefExoticComponent, ReactElement, Ref } from "react";
 import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
 
-const withClasses = <Element extends React.ElementType | ForwardRefExoticComponent<any>>(
-  typ: Element,
-  additionalClassNames: string[],
-  additionalProps?: Partial<ComponentProps<Element>>
-) =>
-  React.forwardRef<
-    ElementRef<Element>,
-    | (ComponentProps<Element> & { asChild?: false; className?: string })
-    | { asChild: true; children: ReactElement<{ className?: string }> }
-  >((props, ref) => {
+type Props<Element extends React.ElementType | ForwardRefExoticComponent<any>> = (
+  | (ComponentProps<Element> & { asChild?: false; className?: string })
+  | { asChild: true; children: ReactElement<{ className?: string }> }
+) & { ref?: Ref<Element> };
+
+const withClasses =
+  <Element extends React.ElementType | ForwardRefExoticComponent<any>>(
+    typ: Element,
+    additionalClassNames: string[],
+    additionalProps?: Partial<ComponentProps<Element>>,
+  ) =>
+  // @ts-ignore TypeScript for some reason does not understand that ref will always be part of the Props
+  ({ ref, ...props }: Props<Element>) => {
     // @ts-ignore Typescript doesn't get it for some reason
     if (props.asChild) {
       return <Slot {...props} className={classNames(...additionalClassNames)} />;
@@ -39,6 +42,6 @@ const withClasses = <Element extends React.ElementType | ForwardRefExoticCompone
         ref,
       });
     }
-  });
+  };
 
 export default withClasses;

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

@@ -14,7 +14,7 @@
  * along with this program. If not, see https://www.gnu.org/licenses/.
  */
 
-import React, { ComponentType, HTMLAttributes, JSX, Ref } from "react";
+import React, { ComponentType, FC, HTMLAttributes, JSX, Ref } from "react";
 import classNames from "classnames";
 import styled from "styled-components";
 
@@ -31,12 +31,12 @@ type Props = HTMLAttributes<HTMLElement> & {
    * @default "div"
    */
   as?: keyof JSX.IntrinsicElements | ComponentType<HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }>;
-
   /**
    * @default "0.5rem"
    * @since 2.46.0
    */
   rowGap?: Gap;
+  ref?: Ref<HTMLElement>;
 };
 
 /**
@@ -46,24 +46,31 @@ type Props = HTMLAttributes<HTMLElement> & {
  * @beta
  * @since 2.44.0
  */
-const Card = React.forwardRef<HTMLElement, Props>(
-  ({ className, avatar, rowGap = "0.25rem", children, as: Comp = "div", action, ...props }, ref) =>
-    React.createElement(
-      Comp,
-      {
-        className: classNames(className, "is-relative", "is-flex", "scmm-card"),
-        ref,
-        ...props,
-      },
-      avatar ? avatar : null,
-      <RowsContainer
-        className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-overflow-hidden is-overflow-wrap-anywhere"
-        style={{ gap: rowGap }}
-      >
-        {children}
-      </RowsContainer>,
-      action ? action : null,
-    ),
-);
+const Card: FC<Props> = ({
+  className,
+  avatar,
+  rowGap = "0.25rem",
+  children,
+  as: Comp = "div",
+  action,
+  ref,
+  ...props
+}) =>
+  React.createElement(
+    Comp,
+    {
+      className: classNames(className, "is-relative", "is-flex", "scmm-card"),
+      ref,
+      ...props,
+    },
+    avatar ? avatar : null,
+    <RowsContainer
+      className="is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 is-overflow-hidden is-overflow-wrap-anywhere"
+      style={{ gap: rowGap }}
+    >
+      {children}
+    </RowsContainer>,
+    action ? action : null,
+  );
 
 export default Card;