chore: Fix useBaseComponent types (#3742)

Author: just-boris

src/alert/index.tsx

@@ -1,9 +1,9 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 'use client';
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 
-import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { FunnelMetrics } from '../internal/analytics';
@@ -23,13 +23,16 @@ export { AlertProps };
 const Alert = React.forwardRef(
   ({ type = 'info', visible = true, style, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {
     const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);
-    const baseComponentProps = useBaseComponent<HTMLDivElement>(
+
+    const baseComponentProps = useBaseComponent(
       'Alert',
       {
         props: { type, visible, dismissible: props.dismissible },
       },
       analyticsMetadata
     );
+    const rootRef = useRef<HTMLElement>(null);
+    const __internalRootRef = useMergeRefs(rootRef, baseComponentProps.__internalRootRef);
 
     const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =
       useFunnel();
@@ -47,7 +50,7 @@ const Alert = React.forwardRef(
         errorCount.current++;
 
         // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.
-        const errorIsVisible = (baseComponentProps.__internalRootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;
+        const errorIsVisible = (rootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;
 
         if (errorIsVisible) {
           if (subStepSelector) {
@@ -72,7 +75,7 @@ const Alert = React.forwardRef(
               stepNameSelector,
               stepName,
               stepIdentifier,
-              currentDocument: baseComponentProps.__internalRootRef.current?.ownerDocument,
+              currentDocument: rootRef.current?.ownerDocument,
               totalSubSteps: subStepCount.current,
               funnelIdentifier,
               subStepAllSelector: getSubStepAllSelector(),
@@ -112,6 +115,7 @@ const Alert = React.forwardRef(
         visible={visible}
         {...props}
         {...baseComponentProps}
+        __internalRootRef={__internalRootRef}
         ref={ref}
         messageSlotId={messageSlotId}
         style={style}

src/alert/internal.tsx

@@ -38,7 +38,7 @@ const typeToIcon: Record<AlertProps.Type, IconProps['name']> = {
 };
 
 type InternalAlertProps = SomeRequired<AlertProps, 'type'> &
-  InternalBaseComponentProps<HTMLDivElement> & {
+  InternalBaseComponentProps & {
     messageSlotId?: string;
     style?: AlertProps['style'];
   };
@@ -59,7 +59,7 @@ const InternalAlert = React.forwardRef(
       action,
       onDismiss,
       onButtonClick,
-      __internalRootRef = null,
+      __internalRootRef,
       statusIconAriaLabel: deprecatedStatusIconAriaLabel,
       dismissAriaLabel: deprecatedDismissAriaLabel,
       messageSlotId,

src/anchor-navigation/internal.tsx

@@ -19,7 +19,7 @@ export default function InternalAnchorNavigation({
   onFollow,
   onActiveHrefChange,
   activeHref = '',
-  __internalRootRef = null,
+  __internalRootRef,
   scrollSpyOffset = 0,
   ...props
 }: AnchorNavigationProps & InternalBaseComponentProps) {

src/app-layout-toolbar/index.tsx

@@ -54,7 +54,7 @@ const AppLayoutToolbar = React.forwardRef(
         );
       }
     }
-    const { __internalRootRef } = useBaseComponent<HTMLDivElement>(
+    const { __internalRootRef } = useBaseComponent(
       'AppLayoutToolbar',
       {
         props: {

src/app-layout/index.tsx

@@ -46,7 +46,7 @@ const AppLayout = React.forwardRef(
         );
       }
     }
-    const { __internalRootRef } = useBaseComponent<HTMLDivElement>(
+    const { __internalRootRef } = useBaseComponent(
       'AppLayout',
       {
         props: {

src/area-chart/internal.tsx

@@ -64,7 +64,7 @@ export default function InternalAreaChart<T extends AreaChartProps.DataTypes>({
   loadingText,
   recoveryText,
   onRecoveryClick,
-  __internalRootRef = null,
+  __internalRootRef,
   ...props
 }: InternalAreaChartProps<T>) {
   const baseProps = getBaseProps(props);

src/attribute-editor/internal.tsx

@@ -43,7 +43,7 @@ const InternalAttributeEditor = React.forwardRef(
       i18nStrings,
       onAddButtonClick,
       onRemoveButtonClick,
-      __internalRootRef = null,
+      __internalRootRef,
       ...props
     }: InternalAttributeEditorProps<T>,
     ref: React.Ref<AttributeEditorProps.Ref>

src/box/internal.tsx

@@ -23,7 +23,7 @@ export default function InternalBox({
   fontWeight,
   color,
   children,
-  __internalRootRef = null,
+  __internalRootRef,
   ...props
 }: InternalBoxProps) {
   const baseProps = getBaseProps(props);

src/button-group/internal.tsx

@@ -30,7 +30,7 @@ const InternalButtonGroup = forwardRef(
       onFilesChange,
       ariaLabel,
       dropdownExpandToViewport,
-      __internalRootRef = null,
+      __internalRootRef,
       ...props
     }: InternalButtonGroupProps,
     ref: React.Ref<ButtonGroupProps.Ref>

src/button/internal.tsx

@@ -56,7 +56,7 @@ export type InternalButtonProps = Omit<ButtonProps, 'variant'> & {
   __title?: string;
   __emitPerformanceMarks?: boolean;
   __skipNativeAttributesWarnings?: boolean;
-} & InternalBaseComponentProps<HTMLAnchorElement | HTMLButtonElement>;
+} & InternalBaseComponentProps;
 
 export const InternalButton = React.forwardRef(
   (
@@ -92,7 +92,7 @@ export const InternalButton = React.forwardRef(
       style,
       nativeButtonAttributes,
       nativeAnchorAttributes,
-      __internalRootRef = null,
+      __internalRootRef,
       __focusable = false,
       __injectAnalyticsComponentMetadata = false,
       __title,