@fluentui/react-link 9.8.0 → 9.8.2

package/CHANGELOG.md

@@ -1,12 +1,34 @@
 # Change Log - @fluentui/react-link
 
-This log was last generated on Thu, 26 Mar 2026 08:10:41 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:33:40 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.8.2)
+
+Tue, 26 May 2026 09:33:40 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.8.1..@fluentui/react-link_v9.8.2)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.8.1)
+
+Thu, 23 Apr 2026 14:21:12 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.8.0..@fluentui/react-link_v9.8.1)
+
+### Patches
+
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.8.0)
 
-Thu, 26 Mar 2026 08:10:41 GMT 
+Thu, 26 Mar 2026 08:12:50 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.7.4..@fluentui/react-link_v9.8.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';
+import type { 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';

package/lib/components/Link/Link.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n  /**\n   * Root of the component that renders as either an <a> or a <button> tag.\n   */\n  root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n  /**\n   * A link can appear either with its default style or subtle.\n   * If not specified, the link appears with its default styling.\n   * @default 'default'\n   */\n  appearance?: 'default' | 'subtle';\n\n  /**\n   * Whether the link is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * If true, changes styling when the link is being used alongside other text content.\n   * @default false\n   */\n  inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}
+{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n  /**\n   * Root of the component that renders as either an <a> or a <button> tag.\n   */\n  root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n  /**\n   * A link can appear either with its default style or subtle.\n   * If not specified, the link appears with its default styling.\n   * @default 'default'\n   */\n  appearance?: 'default' | 'subtle';\n\n  /**\n   * Whether the link is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * If true, changes styling when the link is being used alongside other text content.\n   * @default false\n   */\n  inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}

package/lib/components/Link/useLink.js

@@ -1,5 +1,4 @@
 'use client';
-import * as React from 'react';
 import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 import { useLinkState_unstable } from './useLinkState';

package/lib/components/Link/useLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n  props: LinkProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { appearance = 'default', ...baseProps } = props;\n\n  const state = useLinkBase_unstable(baseProps, ref);\n\n  return {\n    appearance,\n    backgroundAppearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n  props: LinkBaseProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n  const { inline: inlineContext } = useLinkContext();\n  const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n  const elementType = props.as || (props.href ? 'a' : 'button');\n\n  // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n  const propsWithAssignedAs = {\n    role: elementType === 'span' ? 'button' : undefined,\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n  } as LinkBaseProps;\n\n  const state: LinkBaseState = {\n    // Props passed at the top-level\n    disabled,\n    disabledFocusable,\n    inline: inline ?? !!inlineContext,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkBaseProps>(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAC1E,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,uBAAuBN;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,uBAAuB,CAClCN,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,GAAGV;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,mBAAAA,oBAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;IAEAd,sBAAsBQ;IAEtB,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n  props: LinkProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { appearance = 'default', ...baseProps } = props;\n\n  const state = useLinkBase_unstable(baseProps, ref);\n\n  return {\n    appearance,\n    backgroundAppearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n  props: LinkBaseProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n  const { inline: inlineContext } = useLinkContext();\n  const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n  const elementType = props.as || (props.href ? 'a' : 'button');\n\n  // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n  const propsWithAssignedAs = {\n    role: elementType === 'span' ? 'button' : undefined,\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n  } as LinkBaseProps;\n\n  const state: LinkBaseState = {\n    // Props passed at the top-level\n    disabled,\n    disabledFocusable,\n    inline: inline ?? !!inlineContext,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkBaseProps>(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;AAGA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAC1E,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,uBAAuBN;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,uBAAuB,CAClCN,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,GAAGV;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,mBAAAA,oBAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;IAEAd,sBAAsBQ;IAEtB,OAAOA;AACT,EAAE"}

package/lib/components/Link/useLinkState.js

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { Enter, Space } from '@fluentui/keyboard-keys';
 /**
  * The useLinkState_unstable hook processes the Link state.

package/lib/components/Link/useLinkState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n  // Add href for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n\n  // Add tabIndex=0 for anchor and span elements.\n  if (state.root.as === 'a' || state.root.as === 'span') {\n    state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    const keyPressed = ev.key === Enter || ev.key === Space;\n\n    if ((disabled || disabledFocusable) && keyPressed) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n      // if there is already onKeyDown provided - respect it\n      if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n        ev.preventDefault();\n        ev.currentTarget.click();\n      }\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = disabled || disabledFocusable;\n  state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n  if (state.root.as === 'button') {\n    state.root.disabled = disabled && !disabledFocusable;\n  }\n\n  return state;\n};\n"],"names":["React","Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAGvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,qBAAAA,sBAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,oBAAAA,8BAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,SAASc,GAAGG,GAAG,KAAKhB;QAElD,IAAI,AAACG,CAAAA,YAAYC,iBAAgB,KAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,sBAAAA,gCAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n  // Add href for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n\n  // Add tabIndex=0 for anchor and span elements.\n  if (state.root.as === 'a' || state.root.as === 'span') {\n    state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    const keyPressed = ev.key === Enter || ev.key === Space;\n\n    if ((disabled || disabledFocusable) && keyPressed) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n      // if there is already onKeyDown provided - respect it\n      if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n        ev.preventDefault();\n        ev.currentTarget.click();\n      }\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = disabled || disabledFocusable;\n  state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n  if (state.root.as === 'button') {\n    state.root.disabled = disabled && !disabledFocusable;\n  }\n\n  return state;\n};\n"],"names":["Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":"AACA,SAASA,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAGvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,qBAAAA,sBAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,oBAAAA,8BAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,SAASc,GAAGG,GAAG,KAAKhB;QAElD,IAAI,AAACG,CAAAA,YAAYC,iBAAgB,KAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,sBAAAA,gCAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}

package/lib/components/Link/useLinkStyles.styles.js

@@ -107,6 +107,7 @@ export const useLinkStyles_unstable = state => {
     root,
     backgroundAppearance
   } = state;
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
   return state;
 };

package/lib/components/Link/useLinkStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n    root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n    focusIndicator: createCustomFocusIndicatorStyle({\n        textDecorationColor: tokens.colorStrokeFocus2,\n        textDecorationLine: 'underline',\n        textDecorationStyle: 'double',\n        outlineStyle: 'none'\n    }),\n    // Common styles.\n    root: {\n        ':focus-visible': {\n            outlineStyle: 'none'\n        },\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorBrandForegroundLink,\n        cursor: 'pointer',\n        display: 'inline',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightRegular,\n        margin: '0',\n        padding: '0',\n        overflow: 'inherit',\n        textAlign: 'left',\n        textDecorationLine: 'none',\n        textDecorationThickness: tokens.strokeWidthThin,\n        textOverflow: 'inherit',\n        userSelect: 'text',\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkPressed\n        }\n    },\n    // Overrides when the Link renders as a button.\n    button: {\n        ...shorthands.borderStyle('none')\n    },\n    // Overrides when an href is present so the Link renders as an anchor.\n    href: {\n        fontSize: 'inherit'\n    },\n    // Overrides when the Link appears subtle.\n    subtle: {\n        color: tokens.colorNeutralForeground2Link,\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkPressed\n        }\n    },\n    // Overrides when the Link is rendered inline within text.\n    inline: {\n        textDecorationLine: 'underline'\n    },\n    // Overrides when the Link is disabled.\n    disabled: {\n        textDecorationLine: 'none',\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        ':hover': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':active': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    inverted: {\n        color: tokens.colorBrandForegroundInverted,\n        ':hover': {\n            color: tokens.colorBrandForegroundInverted\n        },\n        ':active': {\n            color: tokens.colorBrandForegroundInverted\n        }\n    },\n    brand: {\n        color: tokens.colorNeutralForegroundInvertedLink,\n        ':hover': {\n            color: tokens.colorNeutralForegroundInvertedLinkHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForegroundInvertedLinkPressed\n        }\n    }\n});\nexport const useLinkStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance, disabled, inline, root, backgroundAppearance } = state;\n    state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,UAAU,EAAAC,QAAA,EAAcC,YAAY,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,IAAA;IAAAO,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAA7B,OAAA;EAAA;EAAA8B,MAAA;IAAAlC,MAAA;IAAAwB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAQ,MAAA;IAAAf,MAAA;EAAA;EAAAgB,QAAA;IAAAhB,MAAA;IAAApB,MAAA;IAAAC,OAAA;IAAAuB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAU,QAAA;IAAArC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;EAAAW,KAAA;IAAAtC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;AAAA;EAAAY,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA6FjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,MAAM,GAAGvD,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEwD,UAAU;IAAEX,QAAQ;IAAED,MAAM;IAAE7C,IAAI;IAAE0D;EAAqB,CAAC,GAAGH,KAAK;EAC1EA,KAAK,CAACvD,IAAI,CAAC2D,SAAS,GAAG/D,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEwD,MAAM,CAACxD,IAAI,EAAEwD,MAAM,CAACtD,cAAc,EAAEF,IAAI,CAAC4D,EAAE,KAAK,GAAG,IAAI5D,IAAI,CAAC2C,IAAI,IAAIa,MAAM,CAACb,IAAI,EAAE3C,IAAI,CAAC4D,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAAClB,MAAM,EAAEmB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAACZ,MAAM,EAAEc,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACT,QAAQ,EAAEW,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACR,KAAK,EAAEH,MAAM,IAAIW,MAAM,CAACX,MAAM,EAAEC,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAES,KAAK,CAACvD,IAAI,CAAC2D,SAAS,CAAC;EAChZ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n    root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n    focusIndicator: createCustomFocusIndicatorStyle({\n        textDecorationColor: tokens.colorStrokeFocus2,\n        textDecorationLine: 'underline',\n        textDecorationStyle: 'double',\n        outlineStyle: 'none'\n    }),\n    // Common styles.\n    root: {\n        ':focus-visible': {\n            outlineStyle: 'none'\n        },\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorBrandForegroundLink,\n        cursor: 'pointer',\n        display: 'inline',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightRegular,\n        margin: '0',\n        padding: '0',\n        overflow: 'inherit',\n        textAlign: 'left',\n        textDecorationLine: 'none',\n        textDecorationThickness: tokens.strokeWidthThin,\n        textOverflow: 'inherit',\n        userSelect: 'text',\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkPressed\n        }\n    },\n    // Overrides when the Link renders as a button.\n    button: {\n        ...shorthands.borderStyle('none')\n    },\n    // Overrides when an href is present so the Link renders as an anchor.\n    href: {\n        fontSize: 'inherit'\n    },\n    // Overrides when the Link appears subtle.\n    subtle: {\n        color: tokens.colorNeutralForeground2Link,\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkPressed\n        }\n    },\n    // Overrides when the Link is rendered inline within text.\n    inline: {\n        textDecorationLine: 'underline'\n    },\n    // Overrides when the Link is disabled.\n    disabled: {\n        textDecorationLine: 'none',\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        ':hover': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':active': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    inverted: {\n        color: tokens.colorBrandForegroundInverted,\n        ':hover': {\n            color: tokens.colorBrandForegroundInverted\n        },\n        ':active': {\n            color: tokens.colorBrandForegroundInverted\n        }\n    },\n    brand: {\n        color: tokens.colorNeutralForegroundInvertedLink,\n        ':hover': {\n            color: tokens.colorNeutralForegroundInvertedLinkHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForegroundInvertedLinkPressed\n        }\n    }\n});\nexport const useLinkStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance, disabled, inline, root, backgroundAppearance } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,UAAU,EAAAC,QAAA,EAAcC,YAAY,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGN,QAAA;EAAAO,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAN,IAAA;IAAAO,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;IAAA7B,OAAA;EAAA;EAAA8B,MAAA;IAAAlC,MAAA;IAAAwB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAQ,MAAA;IAAAf,MAAA;EAAA;EAAAgB,QAAA;IAAAhB,MAAA;IAAApB,MAAA;IAAAC,OAAA;IAAAuB,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAU,QAAA;IAAArC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;EAAAW,KAAA;IAAAtC,MAAA;IAAAyB,OAAA;IAAAE,MAAA;EAAA;AAAA;EAAAY,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CA6FjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,aAAa;;EACb,MAAMC,MAAM,GAAGvD,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEwD,UAAU;IAAEX,QAAQ;IAAED,MAAM;IAAE7C,IAAI;IAAE0D;EAAqB,CAAC,GAAGH,KAAK;EAC1E;EACAA,KAAK,CAACvD,IAAI,CAAC2D,SAAS,GAAG/D,YAAY,CAACG,cAAc,CAACC,IAAI,EAAEwD,MAAM,CAACxD,IAAI,EAAEwD,MAAM,CAACtD,cAAc,EAAEF,IAAI,CAAC4D,EAAE,KAAK,GAAG,IAAI5D,IAAI,CAAC2C,IAAI,IAAIa,MAAM,CAACb,IAAI,EAAE3C,IAAI,CAAC4D,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAAClB,MAAM,EAAEmB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAACZ,MAAM,EAAEc,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACT,QAAQ,EAAEW,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACR,KAAK,EAAEH,MAAM,IAAIW,MAAM,CAACX,MAAM,EAAEC,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAES,KAAK,CAACvD,IAAI,CAAC2D,SAAS,CAAC;EAChZ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/Link/useLinkStyles.styles.raw.js

@@ -103,6 +103,7 @@ export const useLinkStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance, disabled, inline, root, backgroundAppearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
     return state;
 };

package/lib/components/Link/useLinkStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n  root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createCustomFocusIndicatorStyle({\n    textDecorationColor: tokens.colorStrokeFocus2,\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'double',\n    outlineStyle: 'none',\n  }),\n  // Common styles.\n  root: {\n    ':focus-visible': {\n      outlineStyle: 'none',\n    },\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorBrandForegroundLink,\n    cursor: 'pointer',\n    display: 'inline',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    margin: '0',\n    padding: '0',\n    overflow: 'inherit',\n    textAlign: 'left',\n    textDecorationLine: 'none',\n    textDecorationThickness: tokens.strokeWidthThin,\n    textOverflow: 'inherit',\n    userSelect: 'text',\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkPressed,\n    },\n  },\n  // Overrides when the Link renders as a button.\n  button: {\n    ...shorthands.borderStyle('none'),\n  },\n  // Overrides when an href is present so the Link renders as an anchor.\n  href: {\n    fontSize: 'inherit',\n  },\n  // Overrides when the Link appears subtle.\n  subtle: {\n    color: tokens.colorNeutralForeground2Link,\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkPressed,\n    },\n  },\n  // Overrides when the Link is rendered inline within text.\n  inline: {\n    textDecorationLine: 'underline',\n  },\n  // Overrides when the Link is disabled.\n  disabled: {\n    textDecorationLine: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n\n    ':hover': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':active': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  inverted: {\n    color: tokens.colorBrandForegroundInverted,\n    ':hover': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n    ':active': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundInvertedLink,\n    ':hover': {\n      color: tokens.colorNeutralForegroundInvertedLinkHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundInvertedLinkPressed,\n    },\n  },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n  state.root.className = mergeClasses(\n    linkClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    root.as === 'a' && root.href && styles.href,\n    root.as === 'button' && styles.button,\n    appearance === 'subtle' && styles.subtle,\n    backgroundAppearance === 'inverted' && styles.inverted,\n    backgroundAppearance === 'brand' && styles.brand,\n    inline && styles.inline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n  root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createCustomFocusIndicatorStyle({\n    textDecorationColor: tokens.colorStrokeFocus2,\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'double',\n    outlineStyle: 'none',\n  }),\n  // Common styles.\n  root: {\n    ':focus-visible': {\n      outlineStyle: 'none',\n    },\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorBrandForegroundLink,\n    cursor: 'pointer',\n    display: 'inline',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    margin: '0',\n    padding: '0',\n    overflow: 'inherit',\n    textAlign: 'left',\n    textDecorationLine: 'none',\n    textDecorationThickness: tokens.strokeWidthThin,\n    textOverflow: 'inherit',\n    userSelect: 'text',\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkPressed,\n    },\n  },\n  // Overrides when the Link renders as a button.\n  button: {\n    ...shorthands.borderStyle('none'),\n  },\n  // Overrides when an href is present so the Link renders as an anchor.\n  href: {\n    fontSize: 'inherit',\n  },\n  // Overrides when the Link appears subtle.\n  subtle: {\n    color: tokens.colorNeutralForeground2Link,\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkPressed,\n    },\n  },\n  // Overrides when the Link is rendered inline within text.\n  inline: {\n    textDecorationLine: 'underline',\n  },\n  // Overrides when the Link is disabled.\n  disabled: {\n    textDecorationLine: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n\n    ':hover': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':active': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  inverted: {\n    color: tokens.colorBrandForegroundInverted,\n    ':hover': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n    ':active': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundInvertedLink,\n    ':hover': {\n      color: tokens.colorNeutralForegroundInvertedLinkHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundInvertedLinkPressed,\n    },\n  },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    linkClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    root.as === 'a' && root.href && styles.href,\n    root.as === 'button' && styles.button,\n    appearance === 'subtle' && styles.subtle,\n    backgroundAppearance === 'inverted' && styles.inverted,\n    backgroundAppearance === 'brand' && styles.brand,\n    inline && styles.inline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}

package/lib-commonjs/components/Link/Link.types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n  /**\n   * Root of the component that renders as either an <a> or a <button> tag.\n   */\n  root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n  /**\n   * A link can appear either with its default style or subtle.\n   * If not specified, the link appears with its default styling.\n   * @default 'default'\n   */\n  appearance?: 'default' | 'subtle';\n\n  /**\n   * Whether the link is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * If true, changes styling when the link is being used alongside other text content.\n   * @default false\n   */\n  inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}
+{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport type { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n  /**\n   * Root of the component that renders as either an <a> or a <button> tag.\n   */\n  root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n  /**\n   * A link can appear either with its default style or subtle.\n   * If not specified, the link appears with its default styling.\n   * @default 'default'\n   */\n  appearance?: 'default' | 'subtle';\n\n  /**\n   * Whether the link is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * If true, changes styling when the link is being used alongside other text content.\n   * @default false\n   */\n  inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}

package/lib-commonjs/components/Link/useLink.js

@@ -17,8 +17,6 @@ _export(exports, {
         return useLink_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _useLinkState = require("./useLinkState");

package/lib-commonjs/components/Link/useLink.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n  props: LinkProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { appearance = 'default', ...baseProps } = props;\n\n  const state = useLinkBase_unstable(baseProps, ref);\n\n  return {\n    appearance,\n    backgroundAppearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n  props: LinkBaseProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n  const { inline: inlineContext } = useLinkContext();\n  const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n  const elementType = props.as || (props.href ? 'a' : 'button');\n\n  // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n  const propsWithAssignedAs = {\n    role: elementType === 'span' ? 'button' : undefined,\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n  } as LinkBaseProps;\n\n  const state: LinkBaseState = {\n    // Props passed at the top-level\n    disabled,\n    disabledFocusable,\n    inline: inline ?? !!inlineContext,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkBaseProps>(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;;;;;;;;;;;;wBAqCaa;eAAAA;;oBAvBAP;;;;;iEAZU,QAAQ;gCACgB,4BAA4B;qCACnC,kCAAkC;8BACpC,iBAAiB;6BAExB,6BAA6B;AAOrD,MAAMA,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,2BAAuBN,4CAAAA;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AASK,6BAA6B,CAClCL,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,OAAGV,2BAAAA;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAA,CAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;QAEAd,mCAAAA,EAAsBQ;IAEtB,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n  props: LinkProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { appearance = 'default', ...baseProps } = props;\n\n  const state = useLinkBase_unstable(baseProps, ref);\n\n  return {\n    appearance,\n    backgroundAppearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n  props: LinkBaseProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n  const { inline: inlineContext } = useLinkContext();\n  const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n  const elementType = props.as || (props.href ? 'a' : 'button');\n\n  // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n  const propsWithAssignedAs = {\n    role: elementType === 'span' ? 'button' : undefined,\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n  } as LinkBaseProps;\n\n  const state: LinkBaseState = {\n    // Props passed at the top-level\n    disabled,\n    disabledFocusable,\n    inline: inline ?? !!inlineContext,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkBaseProps>(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;;;;;;;;;;;;wBAqCaY;eAAAA;;oBAvBAP;;;;gCAXkC,4BAA4B;qCACnC,kCAAkC;8BACpC,iBAAiB;6BAExB,6BAA6B;AAOrD,MAAMA,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,2BAAuBN,4CAAAA;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AASK,6BAA6B,CAClCL,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,OAAGV,2BAAAA;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAA,CAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,oBAAAA,CAAKyB,MAAM,KACf1B,wCAAAA,EAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;QAEAd,mCAAAA,EAAsBQ;IAEtB,OAAOA;AACT,EAAE"}

package/lib-commonjs/components/Link/useLinkState.js

@@ -8,8 +8,6 @@ Object.defineProperty(exports, "useLinkState_unstable", {
         return useLinkState_unstable;
     }
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _keyboardkeys = require("@fluentui/keyboard-keys");
 const useLinkState_unstable = (state)=>{
     const { disabled, disabledFocusable } = state;

package/lib-commonjs/components/Link/useLinkState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n  // Add href for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n\n  // Add tabIndex=0 for anchor and span elements.\n  if (state.root.as === 'a' || state.root.as === 'span') {\n    state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    const keyPressed = ev.key === Enter || ev.key === Space;\n\n    if ((disabled || disabledFocusable) && keyPressed) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n      // if there is already onKeyDown provided - respect it\n      if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n        ev.preventDefault();\n        ev.currentTarget.click();\n      }\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = disabled || disabledFocusable;\n  state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n  if (state.root.as === 'button') {\n    state.root.disabled = disabled && !disabledFocusable;\n  }\n\n  return state;\n};\n"],"names":["React","Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":";;;;+BAQaG;;;;;;;iEARU,QAAQ;8BACF,0BAA0B;AAOhD,8BAA8B,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,mBAAAA,IAASc,GAAGG,GAAG,KAAKhB,mBAAAA;QAElD,IAAKG,CAAAA,YAAYC,iBAAAA,CAAgB,IAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import type * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n  // Add href for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n\n  // Add tabIndex=0 for anchor and span elements.\n  if (state.root.as === 'a' || state.root.as === 'span') {\n    state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    const keyPressed = ev.key === Enter || ev.key === Space;\n\n    if ((disabled || disabledFocusable) && keyPressed) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n      // if there is already onKeyDown provided - respect it\n      if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n        ev.preventDefault();\n        ev.currentTarget.click();\n      }\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = disabled || disabledFocusable;\n  state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n  if (state.root.as === 'button') {\n    state.root.disabled = disabled && !disabledFocusable;\n  }\n\n  return state;\n};\n"],"names":["Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":";;;;+BAQaE;;;;;;8BAPgB,0BAA0B;AAOhD,8BAA8B,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,KAAAA,IAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,mBAAAA,IAASc,GAAGG,GAAG,KAAKhB,mBAAAA;QAElD,IAAKG,CAAAA,YAAYC,iBAAAA,CAAgB,IAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,KAAAA,IAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}

package/lib-commonjs/components/Link/useLinkStyles.styles.js

@@ -184,6 +184,7 @@ const useLinkStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance, disabled, inline, root, backgroundAppearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
     return state;
 };

package/lib-commonjs/components/Link/useLinkStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n    root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n    focusIndicator: createCustomFocusIndicatorStyle({\n        textDecorationColor: tokens.colorStrokeFocus2,\n        textDecorationLine: 'underline',\n        textDecorationStyle: 'double',\n        outlineStyle: 'none'\n    }),\n    // Common styles.\n    root: {\n        ':focus-visible': {\n            outlineStyle: 'none'\n        },\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorBrandForegroundLink,\n        cursor: 'pointer',\n        display: 'inline',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightRegular,\n        margin: '0',\n        padding: '0',\n        overflow: 'inherit',\n        textAlign: 'left',\n        textDecorationLine: 'none',\n        textDecorationThickness: tokens.strokeWidthThin,\n        textOverflow: 'inherit',\n        userSelect: 'text',\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkPressed\n        }\n    },\n    // Overrides when the Link renders as a button.\n    button: {\n        ...shorthands.borderStyle('none')\n    },\n    // Overrides when an href is present so the Link renders as an anchor.\n    href: {\n        fontSize: 'inherit'\n    },\n    // Overrides when the Link appears subtle.\n    subtle: {\n        color: tokens.colorNeutralForeground2Link,\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkPressed\n        }\n    },\n    // Overrides when the Link is rendered inline within text.\n    inline: {\n        textDecorationLine: 'underline'\n    },\n    // Overrides when the Link is disabled.\n    disabled: {\n        textDecorationLine: 'none',\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        ':hover': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':active': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    inverted: {\n        color: tokens.colorBrandForegroundInverted,\n        ':hover': {\n            color: tokens.colorBrandForegroundInverted\n        },\n        ':active': {\n            color: tokens.colorBrandForegroundInverted\n        }\n    },\n    brand: {\n        color: tokens.colorNeutralForegroundInvertedLink,\n        ':hover': {\n            color: tokens.colorNeutralForegroundInvertedLinkHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForegroundInvertedLinkPressed\n        }\n    }\n});\nexport const useLinkStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance, disabled, inline, root, backgroundAppearance } = state;\n    state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
+{"version":3,"sources":["useLinkStyles.styles.js"],"sourcesContent":["'use client';\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const linkClassNames = {\n    root: 'fui-Link'\n};\nconst useStyles = makeStyles({\n    focusIndicator: createCustomFocusIndicatorStyle({\n        textDecorationColor: tokens.colorStrokeFocus2,\n        textDecorationLine: 'underline',\n        textDecorationStyle: 'double',\n        outlineStyle: 'none'\n    }),\n    // Common styles.\n    root: {\n        ':focus-visible': {\n            outlineStyle: 'none'\n        },\n        backgroundColor: 'transparent',\n        boxSizing: 'border-box',\n        color: tokens.colorBrandForegroundLink,\n        cursor: 'pointer',\n        display: 'inline',\n        fontFamily: tokens.fontFamilyBase,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightRegular,\n        margin: '0',\n        padding: '0',\n        overflow: 'inherit',\n        textAlign: 'left',\n        textDecorationLine: 'none',\n        textDecorationThickness: tokens.strokeWidthThin,\n        textOverflow: 'inherit',\n        userSelect: 'text',\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorBrandForegroundLinkPressed\n        }\n    },\n    // Overrides when the Link renders as a button.\n    button: {\n        ...shorthands.borderStyle('none')\n    },\n    // Overrides when an href is present so the Link renders as an anchor.\n    href: {\n        fontSize: 'inherit'\n    },\n    // Overrides when the Link appears subtle.\n    subtle: {\n        color: tokens.colorNeutralForeground2Link,\n        ':hover': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkHover\n        },\n        ':active': {\n            textDecorationLine: 'underline',\n            color: tokens.colorNeutralForeground2LinkPressed\n        }\n    },\n    // Overrides when the Link is rendered inline within text.\n    inline: {\n        textDecorationLine: 'underline'\n    },\n    // Overrides when the Link is disabled.\n    disabled: {\n        textDecorationLine: 'none',\n        color: tokens.colorNeutralForegroundDisabled,\n        cursor: 'not-allowed',\n        ':hover': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        },\n        ':active': {\n            textDecorationLine: 'none',\n            color: tokens.colorNeutralForegroundDisabled\n        }\n    },\n    inverted: {\n        color: tokens.colorBrandForegroundInverted,\n        ':hover': {\n            color: tokens.colorBrandForegroundInverted\n        },\n        ':active': {\n            color: tokens.colorBrandForegroundInverted\n        }\n    },\n    brand: {\n        color: tokens.colorNeutralForegroundInvertedLink,\n        ':hover': {\n            color: tokens.colorNeutralForegroundInvertedLinkHover\n        },\n        ':active': {\n            color: tokens.colorNeutralForegroundInvertedLinkPressed\n        }\n    }\n});\nexport const useLinkStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance, disabled, inline, root, backgroundAppearance } = state;\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);\n    return state;\n};\n"],"names":["shorthands","__styles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","Bttzg6e","B3uz8dt","B6ihwck","g9k6zt","B486eqv","De3pzq","B7ck84d","sj55zd","Bceei9c","mc9l5x","Bahqtrf","Be2twd7","Bhrd7zp","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","B68tc82","Bmxbyg5","Bpg54ce","fsow6f","w71qe1","Bkioxbp","ygn44y","famaaq","Bde5pd6","Bi91k9c","i089h6","lj723h","button","icvyot","vrafjx","oivjwe","wvpqe5","href","subtle","inline","disabled","inverted","brand","d","p","i","h","a","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,cAAc;;;IAiGduD,sBAAsB;;;;uBApGkB,gBAAgB;AAG9D,uBAAuB;IAC1BtD,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGN,eAAA,EAAA;IAAAO,cAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAN,IAAA,EAAA;QAAAO,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;IAAA;IAAAC,IAAA,EAAA;QAAA7B,OAAA,EAAA;IAAA;IAAA8B,MAAA,EAAA;QAAAlC,MAAA,EAAA;QAAAwB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAQ,MAAA,EAAA;QAAAf,MAAA,EAAA;IAAA;IAAAgB,QAAA,EAAA;QAAAhB,MAAA,EAAA;QAAApB,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAuB,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAU,QAAA,EAAA;QAAArC,MAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;IAAAW,KAAA,EAAA;QAAAtC,MAAA,EAAA;QAAAyB,OAAA,EAAA;QAAAE,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAY,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CA6FjB,CAAC;AACK,gCAAgCE,KAAK,IAAG;IAC3C,aAAa;IACb,MAAMC,MAAM,GAAGvD,SAAS,CAAC,CAAC;IAC1B,MAAM,EAAEwD,UAAU,EAAEX,QAAQ,EAAED,MAAM,EAAE7C,IAAI,EAAE0D,oBAAAA,EAAsB,GAAGH,KAAK;IAC1E,oDAAA;IACAA,KAAK,CAACvD,IAAI,CAAC2D,SAAS,OAAG/D,mBAAY,EAACG,cAAc,CAACC,IAAI,EAAEwD,MAAM,CAACxD,IAAI,EAAEwD,MAAM,CAACtD,cAAc,EAAEF,IAAI,CAAC4D,EAAE,KAAK,GAAG,IAAI5D,IAAI,CAAC2C,IAAI,IAAIa,MAAM,CAACb,IAAI,EAAE3C,IAAI,CAAC4D,EAAE,KAAK,QAAQ,IAAIJ,MAAM,CAAClB,MAAM,EAAEmB,UAAU,KAAK,QAAQ,IAAID,MAAM,CAACZ,MAAM,EAAEc,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACT,QAAQ,EAAEW,oBAAoB,KAAK,OAAO,IAAIF,MAAM,CAACR,KAAK,EAAEH,MAAM,IAAIW,MAAM,CAACX,MAAM,EAAEC,QAAQ,IAAIU,MAAM,CAACV,QAAQ,EAAES,KAAK,CAACvD,IAAI,CAAC2D,SAAS,CAAC;IAChZ,OAAOJ,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js

@@ -121,6 +121,7 @@ const useLinkStyles_unstable = (state)=>{
     'use no memo';
     const styles = useStyles();
     const { appearance, disabled, inline, root, backgroundAppearance } = state;
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
     return state;
 };

package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n  root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createCustomFocusIndicatorStyle({\n    textDecorationColor: tokens.colorStrokeFocus2,\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'double',\n    outlineStyle: 'none',\n  }),\n  // Common styles.\n  root: {\n    ':focus-visible': {\n      outlineStyle: 'none',\n    },\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorBrandForegroundLink,\n    cursor: 'pointer',\n    display: 'inline',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    margin: '0',\n    padding: '0',\n    overflow: 'inherit',\n    textAlign: 'left',\n    textDecorationLine: 'none',\n    textDecorationThickness: tokens.strokeWidthThin,\n    textOverflow: 'inherit',\n    userSelect: 'text',\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkPressed,\n    },\n  },\n  // Overrides when the Link renders as a button.\n  button: {\n    ...shorthands.borderStyle('none'),\n  },\n  // Overrides when an href is present so the Link renders as an anchor.\n  href: {\n    fontSize: 'inherit',\n  },\n  // Overrides when the Link appears subtle.\n  subtle: {\n    color: tokens.colorNeutralForeground2Link,\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkPressed,\n    },\n  },\n  // Overrides when the Link is rendered inline within text.\n  inline: {\n    textDecorationLine: 'underline',\n  },\n  // Overrides when the Link is disabled.\n  disabled: {\n    textDecorationLine: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n\n    ':hover': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':active': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  inverted: {\n    color: tokens.colorBrandForegroundInverted,\n    ':hover': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n    ':active': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundInvertedLink,\n    ':hover': {\n      color: tokens.colorNeutralForegroundInvertedLinkHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundInvertedLinkPressed,\n    },\n  },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n  state.root.className = mergeClasses(\n    linkClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    root.as === 'a' && root.href && styles.href,\n    root.as === 'button' && styles.button,\n    appearance === 'subtle' && styles.subtle,\n    backgroundAppearance === 'inverted' && styles.inverted,\n    backgroundAppearance === 'brand' && styles.brand,\n    inline && styles.inline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { shorthands, makeStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport type { LinkSlots, LinkState } from './Link.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const linkClassNames: SlotClassNames<LinkSlots> = {\n  root: 'fui-Link',\n};\n\nconst useStyles = makeStyles({\n  focusIndicator: createCustomFocusIndicatorStyle({\n    textDecorationColor: tokens.colorStrokeFocus2,\n    textDecorationLine: 'underline',\n    textDecorationStyle: 'double',\n    outlineStyle: 'none',\n  }),\n  // Common styles.\n  root: {\n    ':focus-visible': {\n      outlineStyle: 'none',\n    },\n    backgroundColor: 'transparent',\n    boxSizing: 'border-box',\n    color: tokens.colorBrandForegroundLink,\n    cursor: 'pointer',\n    display: 'inline',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    margin: '0',\n    padding: '0',\n    overflow: 'inherit',\n    textAlign: 'left',\n    textDecorationLine: 'none',\n    textDecorationThickness: tokens.strokeWidthThin,\n    textOverflow: 'inherit',\n    userSelect: 'text',\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorBrandForegroundLinkPressed,\n    },\n  },\n  // Overrides when the Link renders as a button.\n  button: {\n    ...shorthands.borderStyle('none'),\n  },\n  // Overrides when an href is present so the Link renders as an anchor.\n  href: {\n    fontSize: 'inherit',\n  },\n  // Overrides when the Link appears subtle.\n  subtle: {\n    color: tokens.colorNeutralForeground2Link,\n\n    ':hover': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkHover,\n    },\n\n    ':active': {\n      textDecorationLine: 'underline',\n      color: tokens.colorNeutralForeground2LinkPressed,\n    },\n  },\n  // Overrides when the Link is rendered inline within text.\n  inline: {\n    textDecorationLine: 'underline',\n  },\n  // Overrides when the Link is disabled.\n  disabled: {\n    textDecorationLine: 'none',\n    color: tokens.colorNeutralForegroundDisabled,\n    cursor: 'not-allowed',\n\n    ':hover': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n\n    ':active': {\n      textDecorationLine: 'none',\n      color: tokens.colorNeutralForegroundDisabled,\n    },\n  },\n  inverted: {\n    color: tokens.colorBrandForegroundInverted,\n    ':hover': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n    ':active': {\n      color: tokens.colorBrandForegroundInverted,\n    },\n  },\n  brand: {\n    color: tokens.colorNeutralForegroundInvertedLink,\n    ':hover': {\n      color: tokens.colorNeutralForegroundInvertedLinkHover,\n    },\n    ':active': {\n      color: tokens.colorNeutralForegroundInvertedLinkPressed,\n    },\n  },\n});\n\nexport const useLinkStyles_unstable = (state: LinkState): LinkState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { appearance, disabled, inline, root, backgroundAppearance } = state;\n\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    linkClassNames.root,\n    styles.root,\n    styles.focusIndicator,\n    root.as === 'a' && root.href && styles.href,\n    root.as === 'button' && styles.button,\n    appearance === 'subtle' && styles.subtle,\n    backgroundAppearance === 'inverted' && styles.inverted,\n    backgroundAppearance === 'brand' && styles.brand,\n    inline && styles.inline,\n    disabled && styles.disabled,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["shorthands","makeStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","linkClassNames","root","useStyles","focusIndicator","textDecorationColor","colorStrokeFocus2","textDecorationLine","textDecorationStyle","outlineStyle","backgroundColor","boxSizing","color","colorBrandForegroundLink","cursor","display","fontFamily","fontFamilyBase","fontSize","fontSizeBase300","fontWeight","fontWeightRegular","margin","padding","overflow","textAlign","textDecorationThickness","strokeWidthThin","textOverflow","userSelect","colorBrandForegroundLinkHover","colorBrandForegroundLinkPressed","button","borderStyle","href","subtle","colorNeutralForeground2Link","colorNeutralForeground2LinkHover","colorNeutralForeground2LinkPressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","brand","colorNeutralForegroundInvertedLink","colorNeutralForegroundInvertedLinkHover","colorNeutralForegroundInvertedLinkPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,cAAAA;;;IAyGA+C,sBAAAA;;;;uBA/GwC,iBAAiB;8BACtB,0BAA0B;4BACnD,wBAAwB;AAIxC,uBAAkD;IACvD9C,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,oBAAgBL,6CAAAA,EAAgC;QAC9CM,qBAAqBL,kBAAAA,CAAOM,iBAAiB;QAC7CC,oBAAoB;QACpBC,qBAAqB;QACrBC,cAAc;IAChB;IACA,iBAAiB;IACjBP,MAAM;QACJ,kBAAkB;YAChBO,cAAc;QAChB;QACAC,iBAAiB;QACjBC,WAAW;QACXC,OAAOZ,kBAAAA,CAAOa,wBAAwB;QACtCC,QAAQ;QACRC,SAAS;QACTC,YAAYhB,kBAAAA,CAAOiB,cAAc;QACjCC,UAAUlB,kBAAAA,CAAOmB,eAAe;QAChCC,YAAYpB,kBAAAA,CAAOqB,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTC,UAAU;QACVC,WAAW;QACXlB,oBAAoB;QACpBmB,yBAAyB1B,kBAAAA,CAAO2B,eAAe;QAC/CC,cAAc;QACdC,YAAY;QAEZ,UAAU;YACRtB,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAO8B,6BAA6B;QAC7C;QAEA,WAAW;YACTvB,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAO+B,+BAA+B;QAC/C;IACF;IACA,+CAA+C;IAC/CC,QAAQ;QACN,GAAGpC,iBAAAA,CAAWqC,WAAW,CAAC,OAAO;IACnC;IACA,sEAAsE;IACtEC,MAAM;QACJhB,UAAU;IACZ;IACA,0CAA0C;IAC1CiB,QAAQ;QACNvB,OAAOZ,kBAAAA,CAAOoC,2BAA2B;QAEzC,UAAU;YACR7B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOqC,gCAAgC;QAChD;QAEA,WAAW;YACT9B,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOsC,kCAAkC;QAClD;IACF;IACA,0DAA0D;IAC1DC,QAAQ;QACNhC,oBAAoB;IACtB;IACA,uCAAuC;IACvCiC,UAAU;QACRjC,oBAAoB;QACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC5C3B,QAAQ;QAER,UAAU;YACRP,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTlC,oBAAoB;YACpBK,OAAOZ,kBAAAA,CAAOyC,8BAA8B;QAC9C;IACF;IACAC,UAAU;QACR9B,OAAOZ,kBAAAA,CAAO2C,4BAA4B;QAC1C,UAAU;YACR/B,OAAOZ,kBAAAA,CAAO2C,4BAA4B;QAC5C;QACA,WAAW;YACT/B,OAAOZ,kBAAAA,CAAO2C,4BAA4B;QAC5C;IACF;IACAC,OAAO;QACLhC,OAAOZ,kBAAAA,CAAO6C,kCAAkC;QAChD,UAAU;YACRjC,OAAOZ,kBAAAA,CAAO8C,uCAAuC;QACvD;QACA,WAAW;YACTlC,OAAOZ,kBAAAA,CAAO+C,yCAAyC;QACzD;IACF;AACF;AAEO,+BAA+B,CAACE;IACrC;IAEA,MAAMC,SAAS/C;IACf,MAAM,EAAEgD,UAAU,EAAEX,QAAQ,EAAED,MAAM,EAAErC,IAAI,EAAEkD,oBAAoB,EAAE,GAAGH;IAErE,oDAAoD;IACpDA,MAAM/C,IAAI,CAACmD,SAAS,OAAGvD,mBAAAA,EACrBG,eAAeC,IAAI,EACnBgD,OAAOhD,IAAI,EACXgD,OAAO9C,cAAc,EACrBF,KAAKoD,EAAE,KAAK,OAAOpD,KAAKgC,IAAI,IAAIgB,OAAOhB,IAAI,EAC3ChC,KAAKoD,EAAE,KAAK,YAAYJ,OAAOlB,MAAM,EACrCmB,eAAe,YAAYD,OAAOf,MAAM,EACxCiB,yBAAyB,cAAcF,OAAOR,QAAQ,EACtDU,yBAAyB,WAAWF,OAAON,KAAK,EAChDL,UAAUW,OAAOX,MAAM,EACvBC,YAAYU,OAAOV,QAAQ,EAC3BS,MAAM/C,IAAI,CAACmD,SAAS;IAGtB,OAAOJ;AACT,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-link",
-  "version": "9.8.0",
+  "version": "9.8.2",
   "description": "Fluent UI React Link component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -13,11 +13,11 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
     "@fluentui/react-shared-contexts": "^9.26.2",
-    "@fluentui/react-tabster": "^9.26.13",
+    "@fluentui/react-tabster": "^9.26.15",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },