:bug: fix(BalListItem): TypeScript Type Mismatch for React Component Refs

[glennverschooren]

Current Behavior

When using refs with Baloise Design System React components (specifically BalListItem), there's a TypeScript type mismatch between the expected ref type and the actual DOM element type.

TypeScript error occurs when trying to use a ref with BalListItem:

Type 'RefObject<HTMLBalListItemElement>' is not assignable to type 'Ref<BalListItem> | undefined'. Type 'RefObject<HTMLBalListItemElement>' is not assignable to type 'RefObject<BalListItem>'. Type 'HTMLBalListItemElement' is not assignable to type 'BalListItem'. Property 'autocorrect' is missing in type 'HTMLBalListItemElement' but required in type 'BalListItem'.

Expected Behavior

The ref should accept HTMLBalListItemElement or a compatible type without TypeScript errors, and provide access to component methods like present().

Steps to Reproduce

1. What is the correct TypeScript type for refs on Baloise React components?
2. Should we use HTMLBalListItemElement, HTMLElement, or the component type BalListItem?
3. How can we properly type refs to access web component methods like present() while maintaining type safety?

Code sample

import { BalListItem } from "@baloise/ds-react";
import { useRef, useEffect } from "react";

export default function MyComponent() {
    const listItemRef = useRef<HTMLBalListItemElement>(null);

    useEffect(() => {
        void brokerRef.current?.present();
    }, []);

    return (
        <BalList accordionOneLevel>
                <BalListItem accordion ref={listItemRef}>
                    {/* content */}
                </BalListItem>
        </BalList>
    );
}

Version

19.8.4

Browsers

Microsoft Edge

Device

Desktop

Code Reproduction URL

No response

Additional Information

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[glennverschooren]

This issue is not limited by the BalListItem.