@fluentui/react-link 9.1.35 → 9.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -2
- package/dist/index.d.ts +2 -2
- package/lib/components/Link/Link.types.js.map +1 -1
- package/lib/components/Link/useLink.js +4 -3
- package/lib/components/Link/useLink.js.map +1 -1
- package/lib/components/Link/useLinkState.js +6 -5
- package/lib/components/Link/useLinkState.js.map +1 -1
- package/lib-commonjs/components/Link/useLink.js +4 -3
- package/lib-commonjs/components/Link/useLink.js.map +1 -1
- package/lib-commonjs/components/Link/useLinkState.js +6 -5
- package/lib-commonjs/components/Link/useLinkState.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 30 Nov 2023 13:37:53 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.2.0)
|
|
8
|
+
|
|
9
|
+
Thu, 30 Nov 2023 13:37:53 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.35..@fluentui/react-link_v9.2.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: Adding span as an option for Link to render as. ([PR #29937](https://github.com/microsoft/fluentui/pull/29937) by humbertomakotomorimoto@gmail.com)
|
|
15
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.20 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.15.0 ([PR #29957](https://github.com/microsoft/fluentui/pull/29957) by beachball)
|
|
17
|
+
|
|
7
18
|
## [9.1.35](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.1.35)
|
|
8
19
|
|
|
9
|
-
Mon, 20 Nov 2023 09:
|
|
20
|
+
Mon, 20 Nov 2023 09:55:10 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.1.34..@fluentui/react-link_v9.1.35)
|
|
11
22
|
|
|
12
23
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -42,7 +42,7 @@ export declare type LinkSlots = {
|
|
|
42
42
|
/**
|
|
43
43
|
* Root of the component that renders as either an <a> or a <button> tag.
|
|
44
44
|
*/
|
|
45
|
-
root: Slot<'a', 'button'>;
|
|
45
|
+
root: Slot<'a', 'button' | 'span'>;
|
|
46
46
|
};
|
|
47
47
|
|
|
48
48
|
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;
|
|
|
59
59
|
* @param props - User provided props to the Link component.
|
|
60
60
|
* @param ref - User provided ref to be passed to the Link component.
|
|
61
61
|
*/
|
|
62
|
-
export declare const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement>) => LinkState;
|
|
62
|
+
export declare const useLink_unstable: (props: LinkProps, ref: React_2.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>) => LinkState;
|
|
63
63
|
|
|
64
64
|
/**
|
|
65
65
|
* The useLinkState_unstable hook processes the Link state.
|
|
@@ -1 +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"}
|
|
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' | '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"}
|
|
@@ -10,10 +10,12 @@ import { useLinkState_unstable } from './useLinkState';
|
|
|
10
10
|
const backgroundAppearance = useBackgroundAppearance();
|
|
11
11
|
const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
|
|
12
12
|
const elementType = props.as || (props.href ? 'a' : 'button');
|
|
13
|
-
// Casting is required here as `as` prop would break the union between `a` and `
|
|
13
|
+
// Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
|
|
14
14
|
const propsWithAssignedAs = {
|
|
15
15
|
...props,
|
|
16
|
-
as: elementType
|
|
16
|
+
as: elementType,
|
|
17
|
+
role: elementType === 'span' ? 'button' : undefined,
|
|
18
|
+
type: elementType === 'button' ? 'button' : undefined
|
|
17
19
|
};
|
|
18
20
|
const state = {
|
|
19
21
|
// Props passed at the top-level
|
|
@@ -27,7 +29,6 @@ import { useLinkState_unstable } from './useLinkState';
|
|
|
27
29
|
},
|
|
28
30
|
root: slot.always(getIntrinsicElementProps(elementType, {
|
|
29
31
|
ref,
|
|
30
|
-
type: elementType === 'button' ? 'button' : undefined,
|
|
31
32
|
...propsWithAssignedAs
|
|
32
33
|
}), {
|
|
33
34
|
elementType
|
|
@@ -1 +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 `
|
|
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 | 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"}
|
|
@@ -5,17 +5,18 @@ import { Enter, Space } from '@fluentui/keyboard-keys';
|
|
|
5
5
|
* @param state - Link state to mutate.
|
|
6
6
|
*/ export const useLinkState_unstable = (state)=>{
|
|
7
7
|
const { disabled, disabledFocusable } = state;
|
|
8
|
-
const { onClick, onKeyDown, role, tabIndex
|
|
9
|
-
// Add href
|
|
8
|
+
const { onClick, onKeyDown, role, tabIndex } = state.root;
|
|
9
|
+
// Add href for anchor elements.
|
|
10
10
|
if (state.root.as === 'a') {
|
|
11
11
|
state.root.href = disabled ? undefined : state.root.href;
|
|
12
|
-
state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
|
|
13
12
|
// Add role="link" for disabled and disabledFocusable links.
|
|
14
13
|
if (disabled || disabledFocusable) {
|
|
15
14
|
state.root.role = role || 'link';
|
|
16
15
|
}
|
|
17
|
-
}
|
|
18
|
-
|
|
16
|
+
}
|
|
17
|
+
// Add tabIndex=0 for anchor and span elements.
|
|
18
|
+
if (state.root.as === 'a' || state.root.as === 'span') {
|
|
19
|
+
state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
|
|
19
20
|
}
|
|
20
21
|
// Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
|
|
21
22
|
state.root.onClick = (ev)=>{
|
|
@@ -1 +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
|
|
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 } = 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"}
|
|
@@ -17,10 +17,12 @@ const useLink_unstable = (props, ref)=>{
|
|
|
17
17
|
const backgroundAppearance = (0, _reactsharedcontexts.useBackgroundAppearance)();
|
|
18
18
|
const { appearance = 'default', disabled = false, disabledFocusable = false, inline = false } = props;
|
|
19
19
|
const elementType = props.as || (props.href ? 'a' : 'button');
|
|
20
|
-
// Casting is required here as `as` prop would break the union between `a` and `
|
|
20
|
+
// Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
|
|
21
21
|
const propsWithAssignedAs = {
|
|
22
22
|
...props,
|
|
23
|
-
as: elementType
|
|
23
|
+
as: elementType,
|
|
24
|
+
role: elementType === 'span' ? 'button' : undefined,
|
|
25
|
+
type: elementType === 'button' ? 'button' : undefined
|
|
24
26
|
};
|
|
25
27
|
const state = {
|
|
26
28
|
// Props passed at the top-level
|
|
@@ -34,7 +36,6 @@ const useLink_unstable = (props, ref)=>{
|
|
|
34
36
|
},
|
|
35
37
|
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(elementType, {
|
|
36
38
|
ref,
|
|
37
|
-
type: elementType === 'button' ? 'button' : undefined,
|
|
38
39
|
...propsWithAssignedAs
|
|
39
40
|
}), {
|
|
40
41
|
elementType
|
|
@@ -1 +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 `
|
|
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`, `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"}
|
|
@@ -13,17 +13,18 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
|
13
13
|
const _keyboardkeys = require("@fluentui/keyboard-keys");
|
|
14
14
|
const useLinkState_unstable = (state)=>{
|
|
15
15
|
const { disabled, disabledFocusable } = state;
|
|
16
|
-
const { onClick, onKeyDown, role, tabIndex
|
|
17
|
-
// Add href
|
|
16
|
+
const { onClick, onKeyDown, role, tabIndex } = state.root;
|
|
17
|
+
// Add href for anchor elements.
|
|
18
18
|
if (state.root.as === 'a') {
|
|
19
19
|
state.root.href = disabled ? undefined : state.root.href;
|
|
20
|
-
state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
|
|
21
20
|
// Add role="link" for disabled and disabledFocusable links.
|
|
22
21
|
if (disabled || disabledFocusable) {
|
|
23
22
|
state.root.role = role || 'link';
|
|
24
23
|
}
|
|
25
|
-
}
|
|
26
|
-
|
|
24
|
+
}
|
|
25
|
+
// Add tabIndex=0 for anchor and span elements.
|
|
26
|
+
if (state.root.as === 'a' || state.root.as === 'span') {
|
|
27
|
+
state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
|
|
27
28
|
}
|
|
28
29
|
// Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
|
|
29
30
|
state.root.onClick = (ev)=>{
|
|
@@ -1 +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
|
|
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 } = 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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@fluentui/keyboard-keys": "^9.0.7",
|
|
38
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
38
|
+
"@fluentui/react-jsx-runtime": "^9.0.20",
|
|
39
39
|
"@fluentui/react-shared-contexts": "^9.13.0",
|
|
40
|
-
"@fluentui/react-tabster": "^9.
|
|
40
|
+
"@fluentui/react-tabster": "^9.15.0",
|
|
41
41
|
"@fluentui/react-theme": "^9.1.16",
|
|
42
42
|
"@fluentui/react-utilities": "^9.15.2",
|
|
43
43
|
"@griffel/react": "^1.5.14",
|