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/etc/react-link.api.md

@@ -7,6 +7,7 @@
 import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
@@ -16,6 +17,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Link: ForwardRefComponent<LinkProps>;
 
+// @public
+export type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;
+
+// @public
+export type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;
+
 // @public (undocumented)
 export const linkClassNames: SlotClassNames<LinkSlots>;
 
@@ -49,16 +56,19 @@ export type LinkState = ComponentState<LinkSlots> & Required<Pick<LinkProps, 'ap
 };
 
 // @public
-export const renderLink_unstable: (state: LinkState) => JSXElement;
+export const renderLink_unstable: (state: LinkBaseState) => JSXElement;
 
 // @public
 export const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkState;
 
+// @public
+export const useLinkBase_unstable: (props: LinkBaseProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkBaseState;
+
 // @public (undocumented)
 export const useLinkContext: () => LinkContextValue;
 
 // @public
-export const useLinkState_unstable: (state: LinkState) => LinkState;
+export const useLinkState_unstable: (state: LinkBaseState) => LinkBaseState;
 
 // @public (undocumented)
 export const useLinkStyles_unstable: (state: LinkState) => LinkState;

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

@@ -1,11 +1,12 @@
-export type { LinkProps, LinkSlots, LinkState } from './components/Link/index';
+export type { LinkProps, LinkSlots, LinkState, LinkBaseProps, LinkBaseState } from './components/Link/index';
 export {
   Link,
   linkClassNames,
   renderLink_unstable,
   useLinkState_unstable,
   useLinkStyles_unstable,
   useLink_unstable,
+  useLinkBase_unstable,
 } from './components/Link/index';
 export type { LinkContextValue } from './contexts';
 export { LinkContextProvider, linkContextDefaultValue, useLinkContext } from './contexts';

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/renderLink.tsx

@@ -3,12 +3,12 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { LinkSlots, LinkState } from './Link.types';
+import type { LinkSlots, LinkBaseState } from './Link.types';
 
 /**
  * Renders a Link component by passing the state defined props to the appropriate slots.
  */
-export const renderLink_unstable = (state: LinkState): JSXElement => {
+export const renderLink_unstable = (state: LinkBaseState): JSXElement => {
   assertSlots<LinkSlots>(state);
 
   return <state.root />;

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,13 +64,12 @@ export const useLink_unstable = (
     },
 
     root: slot.always(
-      getIntrinsicElementProps<LinkProps>(elementType, {
+      getIntrinsicElementProps<LinkBaseProps>(elementType, {
         ref,
         ...propsWithAssignedAs,
       } as const),
       { elementType },
     ),
-    backgroundAppearance,
   };
 
   useLinkState_unstable(state);

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
-import type { LinkState } from './Link.types';
+import type { LinkBaseState } from './Link.types';
 
 /**
  * The useLinkState_unstable hook processes the Link state.
  * @param state - Link state to mutate.
  */
-export const useLinkState_unstable = (state: LinkState): LinkState => {
+export const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {
   const { disabled, disabledFocusable } = state;
   const { onClick, onKeyDown, role, tabIndex } = state.root;
 

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

@@ -5,7 +5,8 @@ export {
   useLinkState_unstable,
   useLinkStyles_unstable,
   useLink_unstable,
+  useLinkBase_unstable,
 } from './Link';
-export type { LinkProps, LinkSlots, LinkState } from './Link';
+export type { LinkProps, LinkSlots, LinkState, LinkBaseProps, LinkBaseState } from './Link';
 export { linkContextDefaultValue, LinkContextProvider, useLinkContext } from './contexts';
 export type { LinkContextValue } from './contexts';