fix: replace RefObject with Ref for ref prop type

.changeset/fifty-times-look.md

@@ -0,0 +1,5 @@
+---
+"@vygruppen/spor-react": patch
+---
+
+replace RefObject with Ref for ref prop type

packages/spor-react/src/accordion/Accordion.tsx

@@ -56,7 +56,7 @@ export const Accordion = ({
   ref,
   ...props
 }: AccordionProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { variant = "core", children, gap = 2, css, ...rest } = props;
   const recipe = useSlotRecipe({ key: "accordion" });
@@ -77,7 +77,7 @@ export const AccordionItemTrigger = function AccordionItemTrigger({
   ref,
   ...props
 }: AccordionItemTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const {
     startElement,
@@ -115,7 +115,7 @@ export const AccordionItemContent = function AccordionItemContent({
   ref,
   ...props
 }: AccordionItemContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     children,

packages/spor-react/src/accordion/Expandable.tsx

@@ -26,7 +26,7 @@ export const Expandable = ({
   ref,
   ...props
 }: ExpandableProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { title, children, headingLevel, startElement, ...rest } = props;
   return (

packages/spor-react/src/alert/Alert.tsx

@@ -47,7 +47,7 @@ export const Alert = ({
   ref,
   ...props
 }: AlertProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     title,

packages/spor-react/src/alert/AlertIcon.tsx

@@ -30,7 +30,7 @@ export const AlertIcon = ({
   variant,
   customIcon: CustomAlertIcon,
 }: AlertIconProps & {
-  ref?: React.RefObject<SVGSVGElement>;
+  ref?: React.Ref<SVGSVGElement>;
 }) => {
   const { t } = useTranslation();
 

packages/spor-react/src/alert/ExpandableAlert.tsx

@@ -63,7 +63,7 @@ export const ExpandableAlert = ({
   ref,
   ...props
 }: ExpandableAlertProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     variant = "info",

packages/spor-react/src/alert/ServiceAlert.tsx

@@ -61,7 +61,7 @@ export const ServiceAlert = ({
   ref,
   ...props
 }: ServiceAlertProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     variant = "service",

packages/spor-react/src/breadcrumb/Breadcrumb.tsx

@@ -26,7 +26,7 @@ export const Breadcrumb = ({
   css,
   ...props
 }: BreadcrumbRootProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const validChildren = React.Children.toArray(children).filter((element) =>
     React.isValidElement(element),

packages/spor-react/src/button/Button.tsx

@@ -118,7 +118,7 @@ export const Button = ({
   children,
   ...rest
 }: ButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { t } = useTranslation();
 

packages/spor-react/src/button/ButtonGroup.tsx

@@ -52,7 +52,7 @@ export const ButtonGroup = ({
   ref,
   ...props
 }: ButtonGroupProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const recipe = useRecipe({ key: "buttonGroup" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

packages/spor-react/src/button/Clipboard.tsx

@@ -24,7 +24,7 @@ const ClipboardIcon = ({
   ref,
   ...props
 }: ChakraClipboard.IndicatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <ChakraClipboard.Indicator
@@ -41,7 +41,7 @@ const ClipboardCopyText = ({
   ref,
   ...props
 }: ChakraClipboard.IndicatorProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { t } = useTranslation();
   return (
@@ -61,7 +61,7 @@ export const ClipboardButton = ({
   ref,
   ...props
 }: ClipboardButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   return (
     <ChakraClipboard.Trigger asChild>

packages/spor-react/src/button/CloseButton.tsx

@@ -31,7 +31,7 @@ export const CloseButton = ({
   size = "sm",
   ...props
 }: CloseButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement | null>;
+  ref?: React.Ref<HTMLButtonElement | null>;
 }) => {
   const { t } = useTranslation();
   return (

packages/spor-react/src/button/FloatingActionButton.tsx

@@ -45,7 +45,7 @@ export const FloatingActionButton = ({
   placement = "bottom right",
   ...props
 }: FloatingActionButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const scrollDirection = useScrollDirection();
 

packages/spor-react/src/button/IconButton.tsx

@@ -60,7 +60,7 @@ export const IconButton = ({
   ref,
   ...props
 }: IconButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement | null>;
+  ref?: React.Ref<HTMLButtonElement | null>;
 }) => {
   const { icon, size = "sm", loading = false, ...rest } = props;
   return (

packages/spor-react/src/calendar/CalendarContext.tsx

@@ -34,7 +34,7 @@ type BaseCalendarState = {
   prevButtonProps: AriaButtonProps<"button">;
   startValue: CalendarDate | null;
   isSelectingRange: boolean;
-  ref?: React.RefObject<HTMLDivElement | null>;
+  ref?: React.Ref<HTMLDivElement | null>;
 };
 
 type SingleCalendarState = BaseCalendarState & {

packages/spor-react/src/color-mode/color-mode.tsx

@@ -51,7 +51,7 @@ export const ColorModeButton = function ColorModeButton({
   ref,
   ...props
 }: ColorModeButtonProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const { toggleColorMode } = useColorMode();
   return (

packages/spor-react/src/datepicker/CalendarTriggerButton.tsx

@@ -28,7 +28,7 @@ export const CalendarTriggerButton = ({
   onPress: _,
   ...buttonProps
 }: CalendarTriggerButtonProps & {
-  ref?: React.RefObject<HTMLDivElement | null>;
+  ref?: React.Ref<HTMLDivElement | null>;
 }) => {
   const { t } = useTranslation();
 

packages/spor-react/src/datepicker/DateField.tsx

@@ -34,7 +34,7 @@ export const DateField = ({
   ref: externalRef,
   ...props
 }: DateFieldProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const locale = useCurrentLocale();
 

packages/spor-react/src/datepicker/DatePicker.tsx

@@ -76,7 +76,7 @@ export const DatePicker = ({
   css,
   ...props
 }: DatePickerProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const chakraFieldProps = useFieldContext();
   const state = useDatePickerState({

packages/spor-react/src/datepicker/DateTimeSegment.tsx

@@ -27,7 +27,7 @@ export const DateTimeSegment = ({
   ariaDescription,
   variant,
 }: DateTimeSegmentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const internalRef = useRef(null);
   const ref = externalRef ?? internalRef;

packages/spor-react/src/datepicker/StyledField.tsx

@@ -21,7 +21,7 @@ export const StyledField = function StyledField({
   ref,
   ...props
 }: StyledFieldProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     children,

packages/spor-react/src/dialog/Dialog.tsx

@@ -15,7 +15,7 @@ export const DialogContent = ({
   ref,
   ...props
 }: DialogContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     children,
@@ -41,7 +41,7 @@ export const DialogCloseTrigger = function DialogCloseTrigger({
   ref,
   ...props
 }: ChakraDialog.CloseTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   return (
     <ChakraDialog.CloseTrigger ref={ref} position="absolute" {...props} asChild>

packages/spor-react/src/dialog/Drawer.tsx

@@ -58,7 +58,7 @@ export const DrawerContent = ({
   ref,
   ...props
 }: DrawerContentProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     children,
@@ -127,7 +127,7 @@ export const DrawerCloseTrigger = function DrawerCloseTrigger({
   ref,
   ...props
 }: DrawerCloseTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) {
   const { showText = false, ...rest } = props;
   const { size } = useRootDrawerProps();
@@ -151,7 +151,7 @@ export const DrawerBackTrigger = ({
   ref,
   ...props
 }: ChakraDrawer.CloseTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const { t } = useTranslation();
   return (
@@ -169,7 +169,7 @@ export const DrawerFullScreenHeader = ({
   ref,
   ...props
 }: DrawerFullScreenHeaderProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { backTrigger = true, closeTrigger = true, children } = props;
   return (

packages/spor-react/src/input/AttachedInputs.tsx

@@ -46,7 +46,7 @@ export const AttachedInputs = ({
   ref,
   ...props
 }: AttachedInputsProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const recipe = useRecipe({ key: "attachedInputs" });
   const [recipeProps, { onFlip, flipAriaLabel, ...restProps }] =

packages/spor-react/src/input/Autocomplete.tsx

@@ -27,7 +27,7 @@ type Props = {
   loading?: boolean;
   emptyLabel?: React.ReactNode;
   openOnFocus?: boolean;
-  ref?: React.RefObject<HTMLInputElement | null>;
+  ref?: React.Ref<HTMLInputElement | null>;
 } & Omit<ComboboxRootProps, "collection"> &
   FieldProps;
 

packages/spor-react/src/input/CardSelect.tsx

@@ -22,7 +22,7 @@ export const CardSelectContent = ({
   children,
   ...props
 }: StaticCardProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <Portal>
@@ -75,7 +75,7 @@ export const CardSelectTrigger = ({
   children,
   ...props
 }: CardSelectTriggerProps & {
-  ref?: React.RefObject<HTMLButtonElement>;
+  ref?: React.Ref<HTMLButtonElement>;
 }) => {
   const ChevronIcon =
     size === "sm" ? DropdownDownFill18Icon : DropdownDownFill24Icon;

packages/spor-react/src/input/Checkbox.tsx

@@ -33,7 +33,7 @@ export const Checkbox = ({
   ref,
   ...props
 }: CheckboxProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   const { children, inputProps, rootRef, ...rest } = props;
   return (

packages/spor-react/src/input/ChoiceChip.tsx

@@ -56,7 +56,7 @@ export const ChoiceChip = ({
   onCheckedChange,
   ...rootProps
 }: ChoiceChipProps & {
-  ref?: React.RefObject<HTMLInputElement>;
+  ref?: React.Ref<HTMLInputElement>;
 }) => {
   return (
     <CheckboxCard.Root

packages/spor-react/src/input/CountryCodeSelect.tsx

@@ -41,7 +41,7 @@ export const CountryCodeSelect = ({
   ref,
   ...props
 }: CountryCodeSelectProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const { t } = useTranslation();
 

packages/spor-react/src/input/Field.tsx

@@ -84,7 +84,7 @@ export const Field = ({
   ref,
   ...props
 }: FieldProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   const {
     label,
@@ -152,7 +152,7 @@ export const FieldErrorText = ({
   ref,
   ...props
 }: ChakraField.ErrorTextProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) => {
   return (
     <ChakraField.ErrorText ref={ref}>{props.children}</ChakraField.ErrorText>

packages/spor-react/src/input/FloatingLabel.tsx

@@ -4,7 +4,7 @@ export const FloatingLabel = ({
   ref,
   ...props
 }: FieldLabelProps & {
-  ref?: React.RefObject<HTMLLabelElement | null>;
+  ref?: React.Ref<HTMLLabelElement | null>;
 }) => <Field.Label ref={ref} {...props} css={floatingLabelStyles} />;
 
 const floatingLabelStyles = defineStyle({

packages/spor-react/src/input/Input.tsx

@@ -77,7 +77,7 @@ export const Input = ({
   labelAsChild,
   ...props
 }: InputProps & {
-  ref?: React.RefObject<HTMLInputElement | null>;
+  ref?: React.Ref<HTMLInputElement | null>;
 }) => {
   const recipe = useRecipe({ key: "input" });
   const [recipeProps, restProps] = recipe.splitVariantProps(props);

packages/spor-react/src/input/NativeSelect.tsx

@@ -43,7 +43,7 @@ export const NativeSelect = function NativeSelect({
   ref,
   ...props
 }: NativeSelectdProps & {
-  ref?: React.RefObject<HTMLDivElement>;
+  ref?: React.Ref<HTMLDivElement>;
 }) {
   const {
     children,