chore: Fix useBaseComponent types

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

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

src/container/internal.tsx

@@ -70,7 +70,7 @@ export default function InternalContainer({
   __stickyOffset,
   __mobileStickyOffset,
   __stickyHeader = false,
-  __internalRootRef = null,
+  __internalRootRef,
   __disableFooterDivider = false,
   __hiddenContent = false,
   __headerRef,

src/copy-to-clipboard/internal.tsx

@@ -26,7 +26,7 @@ export default function InternalCopyToClipboard({
   popoverRenderWithPortal,
   disabled,
   disabledReason,
-  __internalRootRef = null,
+  __internalRootRef,
   ...restProps
 }: InternalCopyToClipboardProps) {
   const [status, setStatus] = useState<'pending' | 'success' | 'error'>('pending');

src/date-input/internal.tsx

@@ -29,7 +29,7 @@ const InternalDateInput = React.forwardRef(
       locale,
       format = 'slashed',
       inputFormat = 'slashed',
-      __internalRootRef = null,
+      __internalRootRef,
       ...props
     }: InternalDateInputProps,
     ref: Ref<DateInputProps.Ref>

src/file-dropzone/internal.tsx

@@ -14,7 +14,7 @@ import styles from './styles.css.js';
 export default function InternalFileDropzone({
   onChange,
   children,
-  __internalRootRef = null,
+  __internalRootRef,
   ...restProps
 }: FileDropzoneProps & InternalBaseComponentProps) {
   const [isDropzoneHovered, setDropzoneHovered] = useState(false);

src/file-input/internal.tsx

@@ -42,7 +42,7 @@ const InternalFileInput = React.forwardRef(
       onChange,
       variant = 'button',
       children,
-      __internalRootRef = null,
+      __internalRootRef,
       __inputClassName,
       __inputNativeAttributes,
       __injectAnalyticsComponentMetadata,

src/file-upload/internal.tsx

@@ -44,7 +44,7 @@ function InternalFileUpload(
     showFileLastModified,
     showFileThumbnail,
     i18nStrings,
-    __internalRootRef = null,
+    __internalRootRef,
     constraintText,
     errorText,
     warningText,

src/form-field/interfaces.ts

@@ -108,7 +108,7 @@ export namespace FormFieldProps {
   }
 }
 
-export interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps<HTMLDivElement> {
+export interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {
   /**
    * Visually hide the label.
    */

src/form-field/internal.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
 
-import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalGrid from '../grid/internal';
@@ -117,12 +117,14 @@ export default function InternalFormField({
   errorText,
   warningText,
   __hideLabel,
-  __internalRootRef = null,
+  __internalRootRef,
   __disableGutters = false,
   __analyticsMetadata = undefined,
   __style = {},
   ...rest
 }: InternalFormFieldProps) {
+  const rootRef = useRef<HTMLElement>();
+  const ref = useMergeRefs(rootRef, __internalRootRef);
   const baseProps = getBaseProps(rest);
   const isRefresh = useVisualRefresh();
 
@@ -180,7 +182,7 @@ export default function InternalFormField({
       errorCount.current++;
 
       // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.
-      const errorIsVisible = (__internalRootRef?.current?.getBoundingClientRect()?.width ?? 0) > 0;
+      const errorIsVisible = (rootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;
 
       if (errorIsVisible) {
         FunnelMetrics.funnelSubStepError({
@@ -216,7 +218,7 @@ export default function InternalFormField({
       {...baseProps}
       className={clsx(baseProps.className, styles.root)}
       style={__style}
-      ref={__internalRootRef}
+      ref={ref}
       {...analyticsAttributes}
       {...copyAnalyticsMetadataAttribute(rest)}
     >

src/form/index.tsx

@@ -1,17 +1,17 @@
 // 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 { FunnelMetrics } from '../internal/analytics';
 import { AnalyticsFunnel, AnalyticsFunnelStep } from '../internal/analytics/components/analytics-funnel';
 import { useFunnel, useFunnelNameSelector, useFunnelStepRef } from '../internal/analytics/hooks/use-funnel';
 import { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';
 import { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';
 import { ButtonContext, ButtonContextProps } from '../internal/context/button-context';
-import useBaseComponent from '../internal/hooks/use-base-component';
+import useBaseComponent, { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { FormProps } from './interfaces';
 import InternalForm from './internal';
@@ -27,7 +27,9 @@ const FormWithAnalytics = ({
   errorText,
   __internalRootRef,
   ...props
-}: FormProps & ReturnType<typeof useBaseComponent<HTMLElement>>) => {
+}: FormProps & InternalBaseComponentProps) => {
+  const rootRef = useRef<HTMLElement>(null);
+  const ref = useMergeRefs(rootRef, __internalRootRef);
   const {
     funnelIdentifier,
     funnelInteractionId,
@@ -62,7 +64,7 @@ const FormWithAnalytics = ({
         stepNameSelector: funnelStepInfo.current.stepNameSelector,
         stepName,
         stepIdentifier: funnelStepInfo.current.stepIdentifier,
-        currentDocument: __internalRootRef.current?.ownerDocument,
+        currentDocument: rootRef.current?.ownerDocument,
         totalSubSteps: funnelStepInfo.current.subStepCount.current,
         funnelIdentifier,
         subStepAllSelector: getSubStepAllSelector(),
@@ -86,7 +88,6 @@ const FormWithAnalytics = ({
     errorCount,
     funnelErrorContext,
     errorSlotId,
-    __internalRootRef,
     funnelStepInfo,
   ]);
 
@@ -100,7 +101,7 @@ const FormWithAnalytics = ({
         {...props}
         {...funnelProps}
         {...funnelStepInfo.current.funnelStepProps}
-        __internalRootRef={__internalRootRef}
+        __internalRootRef={ref}
         __injectAnalyticsComponentMetadata={true}
       />
     </ButtonContext.Provider>
@@ -109,7 +110,7 @@ const FormWithAnalytics = ({
 
 export default function Form({ variant = 'full-page', ...props }: FormProps) {
   const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);
-  const baseComponentProps = useBaseComponent<HTMLElement>(
+  const baseComponentProps = useBaseComponent(
     'Form',
     {
       props: {

src/grid/internal.tsx

@@ -37,7 +37,7 @@ const InternalGrid = React.forwardRef(
       children,
       __tagOverride,
       __responsiveClassName,
-      __internalRootRef = null,
+      __internalRootRef,
       ...restProps
     }: InternalGridProps,
     ref: React.Ref<HTMLDivElement>

src/header/internal.tsx

@@ -36,7 +36,7 @@ export default function InternalHeader({
   counter,
   description,
   info,
-  __internalRootRef = null,
+  __internalRootRef,
   __disableActionsWrapping,
   __headingTagRef,
   __headingTagTabIndex,

src/icon/internal.tsx

@@ -46,7 +46,7 @@ const InternalIcon = ({
   ariaLabel,
   svg,
   badge,
-  __internalRootRef = null,
+  __internalRootRef,
   ...props
 }: InternalIconProps) => {
   const icons = useContext(InternalIconContext);