@fluentui/react-link 9.1.34 → 9.2.0

package/CHANGELOG.md

@@ -1,12 +1,33 @@
 # Change Log - @fluentui/react-link
 
-This log was last generated on Tue, 14 Nov 2023 17:48:36 GMT and should not be manually modified.
+This log was last generated on Thu, 30 Nov 2023 13:37:53 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.2.0)
+
+Thu, 30 Nov 2023 13:37:53 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.35..@fluentui/react-link_v9.2.0)
+
+### Minor changes
+
+- feat: Adding span as an option for Link to render as. ([PR #29937](https://github.com/microsoft/fluentui/pull/29937) by humbertomakotomorimoto@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
+- Bump @fluentui/react-tabster to v9.15.0 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
+
+## [9.1.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.35)
+
+Mon, 20 Nov 2023 09:55:10 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.34..@fluentui/react-link_v9.1.35)
+
+### Patches
+
+- Bump @fluentui/react-shared-contexts to v9.13.0 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+- Bump @fluentui/react-tabster to v9.14.6 ([PR #29878](https://github.com/microsoft/fluentui/pull/29878) by beachball)
+
 ## [9.1.34](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.34)
 
-Tue, 14 Nov 2023 17:48:36 GMT 
+Tue, 14 Nov 2023 17:51:27 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.33..@fluentui/react-link_v9.1.34)
 
 ### Patches

package/dist/index.d.ts

@@ -42,7 +42,7 @@ export declare type LinkSlots = {
     /**
      * Root of the component that renders as either an <a> or a <button> tag.
      */
-    root: Slot<'a', 'button'>;
+    root: Slot<'a', 'button' | 'span'>;
 };
 
 export declare type LinkState = ComponentState<LinkSlots> & Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {
@@ -59,7 +59,7 @@ export declare const renderLink_unstable: (state: LinkState) => JSX.Element;
  * @param props - User provided props to the Link component.
  * @param ref - User provided ref to be passed to the Link component.
  */
-export declare const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement>) => LinkState;
+export declare const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkState;
 
 /**
  * The useLinkState_unstable hook processes the Link state.

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

@@ -1 +1 @@
-{"version":3,"sources":["Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, 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'>;\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\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n"],"names":[],"mappings":"AAAA,WAyCI"}
+{"version":3,"sources":["Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, 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\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n"],"names":[],"mappings":"AAAA,WAyCI"}

package/lib/components/Link/useLink.js

@@ -10,10 +10,12 @@ import { useLinkState_unstable } from './useLinkState';
     const backgroundAppearance = useBackgroundAppearance();
     const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
     const elementType = props.as || (props.href ? 'a' : 'button');
-    // Casting is required here as `as` prop would break the union between `a` and `button` types
+    // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
     const propsWithAssignedAs = {
         ...props,
-        as: elementType
+        as: elementType,
+        role: elementType === 'span' ? 'button' : undefined,
+        type: elementType === 'button' ? 'button' : undefined
     };
     const state = {
         // Props passed at the top-level
@@ -27,7 +29,6 @@ import { useLinkState_unstable } from './useLinkState';
         },
         root: slot.always(getIntrinsicElementProps(elementType, {
             ref,
-            type: elementType === 'button' ? 'button' : undefined,
             ...propsWithAssignedAs
         }), {
             elementType

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

@@ -1 +1 @@
-{"version":3,"sources":["useLink.ts"],"sourcesContent":["import * 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 { LinkProps, LinkState } from './Link.types';\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>,\n): LinkState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { appearance = 'default', 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` and `button` types\n  const propsWithAssignedAs = { ...props, as: elementType } as LinkProps;\n\n  const state: LinkState = {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    inline,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkProps>(elementType, {\n        ref,\n        type: elementType === 'button' ? 'button' : undefined,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n    backgroundAppearance,\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLink_unstable","props","ref","backgroundAppearance","appearance","disabled","disabledFocusable","inline","elementType","as","href","propsWithAssignedAs","state","components","root","always","type","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAC1E,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,uBAAuBL;IAC7B,MAAM,EAAEM,aAAa,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGN;IAEhG,MAAMO,cAAcP,MAAMQ,EAAE,IAAKR,CAAAA,MAAMS,IAAI,GAAG,MAAM,QAAO;IAE3D,6FAA6F;IAC7F,MAAMC,sBAAsB;QAAE,GAAGV,KAAK;QAAEQ,IAAID;IAAY;IAExD,MAAMI,QAAmB;QACvB,gCAAgC;QAChCR;QACAC;QACAC;QACAC;QAEA,mBAAmB;QACnBM,YAAY;YACVC,MAAMN;QACR;QAEAM,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAoCY,aAAa;YAC/CN;YACAc,MAAMR,gBAAgB,WAAW,WAAWS;YAC5C,GAAGN,mBAAmB;QACxB,IACA;YAAEH;QAAY;QAEhBL;IACF;IAEAJ,sBAAsBa;IAEtB,OAAOA;AACT,EAAE"}
+{"version":3,"sources":["useLink.ts"],"sourcesContent":["import * 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 { LinkProps, LinkState } from './Link.types';\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', 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    ...props,\n    as: elementType,\n    role: elementType === 'span' ? 'button' : undefined,\n    type: elementType === 'button' ? 'button' : undefined,\n  } as LinkProps;\n\n  const state: LinkState = {\n    // Props passed at the top-level\n    appearance,\n    disabled,\n    disabledFocusable,\n    inline,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkProps>(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n    backgroundAppearance,\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLink_unstable","props","ref","backgroundAppearance","appearance","disabled","disabledFocusable","inline","elementType","as","href","propsWithAssignedAs","role","undefined","type","state","components","root","always"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAC1E,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,uBAAuBL;IAC7B,MAAM,EAAEM,aAAa,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGN;IAEhG,MAAMO,cAAcP,MAAMQ,EAAE,IAAKR,CAAAA,MAAMS,IAAI,GAAG,MAAM,QAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1B,GAAGV,KAAK;QACRQ,IAAID;QACJI,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;IAC9C;IAEA,MAAME,QAAmB;QACvB,gCAAgC;QAChCX;QACAC;QACAC;QACAC;QAEA,mBAAmB;QACnBS,YAAY;YACVC,MAAMT;QACR;QAEAS,MAAMpB,KAAKqB,MAAM,CACftB,yBAAoCY,aAAa;YAC/CN;YACA,GAAGS,mBAAmB;QACxB,IACA;YAAEH;QAAY;QAEhBL;IACF;IAEAJ,sBAAsBgB;IAEtB,OAAOA;AACT,EAAE"}

package/lib/components/Link/useLinkState.js

@@ -5,17 +5,18 @@ import { Enter, Space } from '@fluentui/keyboard-keys';
  * @param state - Link state to mutate.
  */ export const useLinkState_unstable = (state)=>{
     const { disabled, disabledFocusable } = state;
-    const { onClick, onKeyDown, role, tabIndex, type } = state.root;
-    // Add href and tabIndex=0 for anchor elements.
+    const { onClick, onKeyDown, role, tabIndex } = state.root;
+    // Add href for anchor elements.
     if (state.root.as === 'a') {
         state.root.href = disabled ? undefined : state.root.href;
-        state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
         // Add role="link" for disabled and disabledFocusable links.
         if (disabled || disabledFocusable) {
             state.root.role = role || 'link';
         }
-    } else {
-        state.root.type = type || 'button';
+    }
+    // Add tabIndex=0 for anchor and span elements.
+    if (state.root.as === 'a' || state.root.as === 'span') {
+        state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
     }
     // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
     state.root.onClick = (ev)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkState } 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: LinkState): LinkState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, tabIndex, type } = state.root;\n\n  // Add href and tabIndex=0 for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n    state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n  // Add type=\"button\" for button elements.\n  else {\n    state.root.type = type || 'button';\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    if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\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","type","root","as","href","undefined","ev","preventDefault","key","stopPropagation"],"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,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAE/D,+CAA+C;IAC/C,IAAIR,MAAMQ,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBT,MAAMQ,IAAI,CAACE,IAAI,GAAGT,WAAWU,YAAYX,MAAMQ,IAAI,CAACE,IAAI;QACxDV,MAAMQ,IAAI,CAACF,QAAQ,GAAGA,qBAAAA,sBAAAA,WAAaL,YAAY,CAACC,oBAAoBS,YAAY;QAEhF,4DAA4D;QAC5D,IAAIV,YAAYC,mBAAmB;YACjCF,MAAMQ,IAAI,CAACH,IAAI,GAAGA,QAAQ;QAC5B;IACF,OAEK;QACHL,MAAMQ,IAAI,CAACD,IAAI,GAAGA,QAAQ;IAC5B;IAEA,wGAAwG;IACxGP,MAAMQ,IAAI,CAACL,OAAO,GAAG,CAACS;QACpB,IAAIX,YAAYC,mBAAmB;YACjCU,GAAGC,cAAc;QACnB,OAAO;YACLV,oBAAAA,8BAAAA,QAAUS;QACZ;IACF;IAEA,0GAA0G;IAC1GZ,MAAMQ,IAAI,CAACJ,SAAS,GAAG,CAACQ;QACtB,IAAI,AAACX,CAAAA,YAAYC,iBAAgB,KAAOU,CAAAA,GAAGE,GAAG,KAAKjB,SAASe,GAAGE,GAAG,KAAKhB,KAAI,GAAI;YAC7Ec,GAAGC,cAAc;YACjBD,GAAGG,eAAe;QACpB,OAAO;YACLX,sBAAAA,gCAAAA,UAAYQ;QACd;IACF;IAEA,sDAAsD;IACtDZ,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMQ,IAAI,CAAC,gBAAgB,GAAGP,YAAYC,qBAAqBS;IAC/D,IAAIX,MAAMQ,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BT,MAAMQ,IAAI,CAACP,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}
+{"version":3,"sources":["useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkState } 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: LinkState): LinkState => {\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    if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\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","key","stopPropagation"],"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,IAAI,AAACV,CAAAA,YAAYC,iBAAgB,KAAOS,CAAAA,GAAGE,GAAG,KAAKhB,SAASc,GAAGE,GAAG,KAAKf,KAAI,GAAI;YAC7Ea,GAAGC,cAAc;YACjBD,GAAGG,eAAe;QACpB,OAAO;YACLV,sBAAAA,gCAAAA,UAAYO;QACd;IACF;IAEA,sDAAsD;IACtDX,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/useLink.js

@@ -17,10 +17,12 @@ const useLink_unstable = (props, ref)=>{
     const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
     const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
     const elementType = props.as || (props.href ? 'a' : 'button');
-    // Casting is required here as `as` prop would break the union between `a` and `button` types
+    // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
     const propsWithAssignedAs = {
         ...props,
-        as: elementType
+        as: elementType,
+        role: elementType === 'span' ? 'button' : undefined,
+        type: elementType === 'button' ? 'button' : undefined
     };
     const state = {
         // Props passed at the top-level
@@ -34,7 +36,6 @@ const useLink_unstable = (props, ref)=>{
         },
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(elementType, {
             ref,
-            type: elementType === 'button' ? 'button' : undefined,
             ...propsWithAssignedAs
         }), {
             elementType

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

@@ -1 +1 @@
-{"version":3,"sources":["useLink.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\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 */ export const useLink_unstable = (props, ref)=>{\n    const backgroundAppearance = useBackgroundAppearance();\n    const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;\n    const elementType = props.as || (props.href ? 'a' : 'button');\n    // Casting is required here as `as` prop would break the union between `a` and `button` types\n    const propsWithAssignedAs = {\n        ...props,\n        as: elementType\n    };\n    const state = {\n        // Props passed at the top-level\n        appearance,\n        disabled,\n        disabledFocusable,\n        inline,\n        // Slots definition\n        components: {\n            root: elementType\n        },\n        root: slot.always(getIntrinsicElementProps(elementType, {\n            ref,\n            type: elementType === 'button' ? 'button' : undefined,\n            ...propsWithAssignedAs\n        }), {\n            elementType\n        }),\n        backgroundAppearance\n    };\n    useLinkState_unstable(state);\n    return state;\n};\n"],"names":["useLink_unstable","props","ref","backgroundAppearance","useBackgroundAppearance","appearance","disabled","disabledFocusable","inline","elementType","as","href","propsWithAssignedAs","state","components","root","slot","always","getIntrinsicElementProps","type","undefined","useLinkState_unstable"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;gCACwB;qCACP;8BACF;AAK3B,MAAMA,mBAAmB,CAACC,OAAOC;IACxC,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,MAAM,EAAEC,aAAa,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGP;IAChG,MAAMQ,cAAcR,MAAMS,EAAE,IAAKT,CAAAA,MAAMU,IAAI,GAAG,MAAM,QAAO;IAC3D,6FAA6F;IAC7F,MAAMC,sBAAsB;QACxB,GAAGX,KAAK;QACRS,IAAID;IACR;IACA,MAAMI,QAAQ;QACV,gCAAgC;QAChCR;QACAC;QACAC;QACAC;QACA,mBAAmB;QACnBM,YAAY;YACRC,MAAMN;QACV;QACAM,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACT,aAAa;YACpDP;YACAiB,MAAMV,gBAAgB,WAAW,WAAWW;YAC5C,GAAGR,mBAAmB;QAC1B,IAAI;YACAH;QACJ;QACAN;IACJ;IACAkB,IAAAA,mCAAqB,EAACR;IACtB,OAAOA;AACX"}
+{"version":3,"sources":["useLink.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\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 */ export const useLink_unstable = (props, ref)=>{\n    const backgroundAppearance = useBackgroundAppearance();\n    const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;\n    const elementType = props.as || (props.href ? 'a' : 'button');\n    // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n    const propsWithAssignedAs = {\n        ...props,\n        as: elementType,\n        role: elementType === 'span' ? 'button' : undefined,\n        type: elementType === 'button' ? 'button' : undefined\n    };\n    const state = {\n        // Props passed at the top-level\n        appearance,\n        disabled,\n        disabledFocusable,\n        inline,\n        // Slots definition\n        components: {\n            root: elementType\n        },\n        root: slot.always(getIntrinsicElementProps(elementType, {\n            ref,\n            ...propsWithAssignedAs\n        }), {\n            elementType\n        }),\n        backgroundAppearance\n    };\n    useLinkState_unstable(state);\n    return state;\n};\n"],"names":["useLink_unstable","props","ref","backgroundAppearance","useBackgroundAppearance","appearance","disabled","disabledFocusable","inline","elementType","as","href","propsWithAssignedAs","role","undefined","type","state","components","root","slot","always","getIntrinsicElementProps","useLinkState_unstable"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;gCACwB;qCACP;8BACF;AAK3B,MAAMA,mBAAmB,CAACC,OAAOC;IACxC,MAAMC,uBAAuBC,IAAAA,4CAAuB;IACpD,MAAM,EAAEC,aAAa,SAAS,EAAEC,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEC,SAAS,KAAK,EAAE,GAAGP;IAChG,MAAMQ,cAAcR,MAAMS,EAAE,IAAKT,CAAAA,MAAMU,IAAI,GAAG,MAAM,QAAO;IAC3D,qGAAqG;IACrG,MAAMC,sBAAsB;QACxB,GAAGX,KAAK;QACRS,IAAID;QACJI,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;IAChD;IACA,MAAME,QAAQ;QACV,gCAAgC;QAChCX;QACAC;QACAC;QACAC;QACA,mBAAmB;QACnBS,YAAY;YACRC,MAAMT;QACV;QACAS,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAACZ,aAAa;YACpDP;YACA,GAAGU,mBAAmB;QAC1B,IAAI;YACAH;QACJ;QACAN;IACJ;IACAmB,IAAAA,mCAAqB,EAACN;IACtB,OAAOA;AACX"}

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

@@ -13,17 +13,18 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _keyboardkeys = require("@fluentui/keyboard-keys");
 const useLinkState_unstable = (state)=>{
     const { disabled, disabledFocusable } = state;
-    const { onClick, onKeyDown, role, tabIndex, type } = state.root;
-    // Add href and tabIndex=0 for anchor elements.
+    const { onClick, onKeyDown, role, tabIndex } = state.root;
+    // Add href for anchor elements.
     if (state.root.as === 'a') {
         state.root.href = disabled ? undefined : state.root.href;
-        state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
         // Add role="link" for disabled and disabledFocusable links.
         if (disabled || disabledFocusable) {
             state.root.role = role || 'link';
         }
-    } else {
-        state.root.type = type || 'button';
+    }
+    // Add tabIndex=0 for anchor and span elements.
+    if (state.root.as === 'a' || state.root.as === 'span') {
+        state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
     }
     // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
     state.root.onClick = (ev)=>{

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

@@ -1 +1 @@
-{"version":3,"sources":["useLinkState.js"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */ export const useLinkState_unstable = (state)=>{\n    const { disabled, disabledFocusable } = state;\n    const { onClick, onKeyDown, role, tabIndex, type } = state.root;\n    // Add href and tabIndex=0 for anchor elements.\n    if (state.root.as === 'a') {\n        state.root.href = disabled ? undefined : state.root.href;\n        state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;\n        // Add role=\"link\" for disabled and disabledFocusable links.\n        if (disabled || disabledFocusable) {\n            state.root.role = role || 'link';\n        }\n    } else {\n        state.root.type = type || 'button';\n    }\n    // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n    state.root.onClick = (ev)=>{\n        if (disabled || disabledFocusable) {\n            ev.preventDefault();\n        } else {\n            onClick === null || onClick === void 0 ? void 0 : onClick(ev);\n        }\n    };\n    // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n    state.root.onKeyDown = (ev)=>{\n        if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {\n            ev.preventDefault();\n            ev.stopPropagation();\n        } else {\n            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);\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    return state;\n};\n"],"names":["useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","type","root","as","href","undefined","ev","preventDefault","key","Enter","Space","stopPropagation"],"mappings":";;;;+BAKiBA;;;eAAAA;;;;iEALM;8BACM;AAIlB,MAAMA,wBAAwB,CAACC;IACtC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGP,MAAMQ,IAAI;IAC/D,+CAA+C;IAC/C,IAAIR,MAAMQ,IAAI,CAACC,EAAE,KAAK,KAAK;QACvBT,MAAMQ,IAAI,CAACE,IAAI,GAAGT,WAAWU,YAAYX,MAAMQ,IAAI,CAACE,IAAI;QACxDV,MAAMQ,IAAI,CAACF,QAAQ,GAAGA,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAWL,YAAY,CAACC,oBAAoBS,YAAY;QACzH,4DAA4D;QAC5D,IAAIV,YAAYC,mBAAmB;YAC/BF,MAAMQ,IAAI,CAACH,IAAI,GAAGA,QAAQ;QAC9B;IACJ,OAAO;QACHL,MAAMQ,IAAI,CAACD,IAAI,GAAGA,QAAQ;IAC9B;IACA,wGAAwG;IACxGP,MAAMQ,IAAI,CAACL,OAAO,GAAG,CAACS;QAClB,IAAIX,YAAYC,mBAAmB;YAC/BU,GAAGC,cAAc;QACrB,OAAO;YACHV,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQS;QAC9D;IACJ;IACA,0GAA0G;IAC1GZ,MAAMQ,IAAI,CAACJ,SAAS,GAAG,CAACQ;QACpB,IAAI,AAACX,CAAAA,YAAYC,iBAAgB,KAAOU,CAAAA,GAAGE,GAAG,KAAKC,mBAAK,IAAIH,GAAGE,GAAG,KAAKE,mBAAK,AAAD,GAAI;YAC3EJ,GAAGC,cAAc;YACjBD,GAAGK,eAAe;QACtB,OAAO;YACHb,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUQ;QACpE;IACJ;IACA,sDAAsD;IACtDZ,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMQ,IAAI,CAAC,gBAAgB,GAAGP,YAAYC,qBAAqBS;IAC/D,IAAIX,MAAMQ,IAAI,CAACC,EAAE,KAAK,UAAU;QAC5BT,MAAMQ,IAAI,CAACP,QAAQ,GAAGA,YAAY,CAACC;IACvC;IACA,OAAOF;AACX"}
+{"version":3,"sources":["useLinkState.js"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */ export const useLinkState_unstable = (state)=>{\n    const { disabled, disabledFocusable } = state;\n    const { onClick, onKeyDown, role, tabIndex } = state.root;\n    // Add href for anchor elements.\n    if (state.root.as === 'a') {\n        state.root.href = disabled ? undefined : state.root.href;\n        // Add role=\"link\" for disabled and disabledFocusable links.\n        if (disabled || disabledFocusable) {\n            state.root.role = role || 'link';\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 !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;\n    }\n    // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n    state.root.onClick = (ev)=>{\n        if (disabled || disabledFocusable) {\n            ev.preventDefault();\n        } else {\n            onClick === null || onClick === void 0 ? void 0 : onClick(ev);\n        }\n    };\n    // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n    state.root.onKeyDown = (ev)=>{\n        if ((disabled || disabledFocusable) && (ev.key === Enter || ev.key === Space)) {\n            ev.preventDefault();\n            ev.stopPropagation();\n        } else {\n            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);\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    return state;\n};\n"],"names":["useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","key","Enter","Space","stopPropagation"],"mappings":";;;;+BAKiBA;;;eAAAA;;;;iEALM;8BACM;AAIlB,MAAMA,wBAAwB,CAACC;IACtC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IACzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACvBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QACxD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YAC/BF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC9B;IACJ;IACA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACnDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,aAAa,QAAQA,aAAa,KAAK,IAAIA,WAAWL,YAAY,CAACC,oBAAoBQ,YAAY;IAC7H;IACA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QAClB,IAAIV,YAAYC,mBAAmB;YAC/BS,GAAGC,cAAc;QACrB,OAAO;YACHT,YAAY,QAAQA,YAAY,KAAK,IAAI,KAAK,IAAIA,QAAQQ;QAC9D;IACJ;IACA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACpB,IAAI,AAACV,CAAAA,YAAYC,iBAAgB,KAAOS,CAAAA,GAAGE,GAAG,KAAKC,mBAAK,IAAIH,GAAGE,GAAG,KAAKE,mBAAK,AAAD,GAAI;YAC3EJ,GAAGC,cAAc;YACjBD,GAAGK,eAAe;QACtB,OAAO;YACHZ,cAAc,QAAQA,cAAc,KAAK,IAAI,KAAK,IAAIA,UAAUO;QACpE;IACJ;IACA,sDAAsD;IACtDX,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC5BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACvC;IACA,OAAOF;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-link",
-  "version": "9.1.34",
+  "version": "9.2.0",
   "description": "Fluent UI React Link component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,9 +35,9 @@
   },
   "dependencies": {
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-jsx-runtime": "^9.0.19",
-    "@fluentui/react-shared-contexts": "^9.12.0",
-    "@fluentui/react-tabster": "^9.14.5",
+    "@fluentui/react-jsx-runtime": "^9.0.20",
+    "@fluentui/react-shared-contexts": "^9.13.0",
+    "@fluentui/react-tabster": "^9.15.0",
     "@fluentui/react-theme": "^9.1.16",
     "@fluentui/react-utilities": "^9.15.2",
     "@griffel/react": "^1.5.14",