feat(react-link): add useLinkBase_unstable hook

change/@fluentui-react-link-be831e15-2a04-4366-85fe-c959e93f6769.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks for Link",
+  "packageName": "@fluentui/react-link",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-link/library/src/components/Link/Link.types.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';
 import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
 
 export type LinkSlots = {
@@ -36,7 +36,18 @@ export type LinkProps = ComponentProps<LinkSlots> & {
   inline?: boolean;
 };
 
+/**
+ * Link props without design-specific props (appearance).
+ * Use this when building a base link that is unstyled or uses a custom design system.
+ */
+export type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;
+
 export type LinkState = ComponentState<LinkSlots> &
   Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
     backgroundAppearance?: BackgroundAppearanceContextValue;
   };
+
+/**
+ * Link state without design-specific state (appearance, backgroundAppearance).
+ */
+export type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;

packages/react-components/react-link/library/src/components/Link/index.ts

@@ -1,6 +1,6 @@
 export { Link } from './Link';
-export type { LinkProps, LinkSlots, LinkState } from './Link.types';
+export type { LinkBaseProps, LinkBaseState, LinkProps, LinkSlots, LinkState } from './Link.types';
 export { renderLink_unstable } from './renderLink';
-export { useLink_unstable } from './useLink';
+export { useLink_unstable, useLinkBase_unstable } from './useLink';
 export { useLinkState_unstable } from './useLinkState';
 export { linkClassNames, useLinkStyles_unstable } from './useLinkStyles.styles';

packages/react-components/react-link/library/src/components/Link/useLink.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 import { useLinkState_unstable } from './useLinkState';
-import type { LinkProps, LinkState } from './Link.types';
+import type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';
 import { useLinkContext } from '../../contexts/linkContext';
 
 /**
@@ -17,8 +17,30 @@ export const useLink_unstable = (
   ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,
 ): LinkState => {
   const backgroundAppearance = useBackgroundAppearance();
+  const { appearance = 'default', ...baseProps } = props;
+
+  const state = useLinkBase_unstable(baseProps, ref);
+
+  return {
+    appearance,
+    backgroundAppearance,
+    ...state,
+  };
+};
+
+/**
+ * Base hook for Link component, which manages state related to ARIA, keyboard handling,
+ * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).
+ *
+ * @param props - User provided props to the Link component.
+ * @param ref - User provided ref to be passed to the Link component.
+ */
+export const useLinkBase_unstable = (
+  props: LinkBaseProps,
+  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,
+): LinkBaseState => {
   const { inline: inlineContext } = useLinkContext();
-  const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
+  const { disabled = false, disabledFocusable = false, inline = false } = props;
 
   const elementType = props.as || (props.href ? 'a' : 'button');
 
@@ -28,11 +50,10 @@ export const useLink_unstable = (
     type: elementType === 'button' ? 'button' : undefined,
     ...props,
     as: elementType,
-  } as LinkProps;
+  } as LinkBaseProps;
 
-  const state: LinkState = {
+  const state: LinkBaseState = {
     // Props passed at the top-level
-    appearance,
     disabled,
     disabledFocusable,
     inline: inline ?? !!inlineContext,
@@ -43,16 +64,16 @@ export const useLink_unstable = (
     },
 
     root: slot.always(
-      getIntrinsicElementProps<LinkProps>(elementType, {
+      getIntrinsicElementProps<LinkBaseProps>(elementType, {
         ref,
         ...propsWithAssignedAs,
       } as const),
       { elementType },
     ),
-    backgroundAppearance,
   };
 
-  useLinkState_unstable(state);
+  // useLinkState_unstable only accesses disabled, disabledFocusable, and root — all present in LinkBaseState
+  useLinkState_unstable(state as unknown as LinkState);
 
   return state;
 };

packages/react-components/react-link/library/src/index.ts

@@ -9,3 +9,7 @@ export {
 export type { LinkProps, LinkSlots, LinkState } from './Link';
 export { linkContextDefaultValue, LinkContextProvider, useLinkContext } from './contexts';
 export type { LinkContextValue } from './contexts';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useLinkBase_unstable } from './Link';
+// export type { LinkBaseProps, LinkBaseState } from './Link';