@fluentui/react-link 9.5.2 → 9.6.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 +21 -2
- package/lib/components/Link/useLinkStyles.styles.raw.js +98 -0
- package/lib/components/Link/useLinkStyles.styles.raw.js.map +1 -0
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js +116 -0
- package/lib-commonjs/components/Link/useLinkStyles.styles.raw.js.map +1 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-link
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 17 Jul 2025 13:45:40 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.6.0)
|
|
8
|
+
|
|
9
|
+
Thu, 17 Jul 2025 13:45:40 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.5.3..@fluentui/react-link_v9.6.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.5.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.5.3)
|
|
18
|
+
|
|
19
|
+
Fri, 27 Jun 2025 13:39:41 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.5.2..@fluentui/react-link_v9.5.3)
|
|
21
|
+
|
|
22
|
+
### Patches
|
|
23
|
+
|
|
24
|
+
- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-link_v9.5.2)
|
|
8
27
|
|
|
9
|
-
Thu, 26 Jun 2025 14:
|
|
28
|
+
Thu, 26 Jun 2025 14:11:55 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-link_v9.5.1..@fluentui/react-link_v9.5.2)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
|
|
2
|
+
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
|
|
3
|
+
import { tokens } from '@fluentui/react-theme';
|
|
4
|
+
export const linkClassNames = {
|
|
5
|
+
root: 'fui-Link'
|
|
6
|
+
};
|
|
7
|
+
const useStyles = makeStyles({
|
|
8
|
+
focusIndicator: createCustomFocusIndicatorStyle({
|
|
9
|
+
textDecorationColor: tokens.colorStrokeFocus2,
|
|
10
|
+
textDecorationLine: 'underline',
|
|
11
|
+
textDecorationStyle: 'double',
|
|
12
|
+
outlineStyle: 'none'
|
|
13
|
+
}),
|
|
14
|
+
// Common styles.
|
|
15
|
+
root: {
|
|
16
|
+
':focus-visible': {
|
|
17
|
+
outlineStyle: 'none'
|
|
18
|
+
},
|
|
19
|
+
backgroundColor: 'transparent',
|
|
20
|
+
boxSizing: 'border-box',
|
|
21
|
+
color: tokens.colorBrandForegroundLink,
|
|
22
|
+
cursor: 'pointer',
|
|
23
|
+
display: 'inline',
|
|
24
|
+
fontFamily: tokens.fontFamilyBase,
|
|
25
|
+
fontSize: tokens.fontSizeBase300,
|
|
26
|
+
fontWeight: tokens.fontWeightRegular,
|
|
27
|
+
margin: '0',
|
|
28
|
+
padding: '0',
|
|
29
|
+
overflow: 'inherit',
|
|
30
|
+
textAlign: 'left',
|
|
31
|
+
textDecorationLine: 'none',
|
|
32
|
+
textDecorationThickness: tokens.strokeWidthThin,
|
|
33
|
+
textOverflow: 'inherit',
|
|
34
|
+
userSelect: 'text',
|
|
35
|
+
':hover': {
|
|
36
|
+
textDecorationLine: 'underline',
|
|
37
|
+
color: tokens.colorBrandForegroundLinkHover
|
|
38
|
+
},
|
|
39
|
+
':active': {
|
|
40
|
+
textDecorationLine: 'underline',
|
|
41
|
+
color: tokens.colorBrandForegroundLinkPressed
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
// Overrides when the Link renders as a button.
|
|
45
|
+
button: {
|
|
46
|
+
...shorthands.borderStyle('none')
|
|
47
|
+
},
|
|
48
|
+
// Overrides when an href is present so the Link renders as an anchor.
|
|
49
|
+
href: {
|
|
50
|
+
fontSize: 'inherit'
|
|
51
|
+
},
|
|
52
|
+
// Overrides when the Link appears subtle.
|
|
53
|
+
subtle: {
|
|
54
|
+
color: tokens.colorNeutralForeground2,
|
|
55
|
+
':hover': {
|
|
56
|
+
textDecorationLine: 'underline',
|
|
57
|
+
color: tokens.colorNeutralForeground2Hover
|
|
58
|
+
},
|
|
59
|
+
':active': {
|
|
60
|
+
textDecorationLine: 'underline',
|
|
61
|
+
color: tokens.colorNeutralForeground2Pressed
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
// Overrides when the Link is rendered inline within text.
|
|
65
|
+
inline: {
|
|
66
|
+
textDecorationLine: 'underline'
|
|
67
|
+
},
|
|
68
|
+
// Overrides when the Link is disabled.
|
|
69
|
+
disabled: {
|
|
70
|
+
textDecorationLine: 'none',
|
|
71
|
+
color: tokens.colorNeutralForegroundDisabled,
|
|
72
|
+
cursor: 'not-allowed',
|
|
73
|
+
':hover': {
|
|
74
|
+
textDecorationLine: 'none',
|
|
75
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
76
|
+
},
|
|
77
|
+
':active': {
|
|
78
|
+
textDecorationLine: 'none',
|
|
79
|
+
color: tokens.colorNeutralForegroundDisabled
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
inverted: {
|
|
83
|
+
color: tokens.colorBrandForegroundInverted,
|
|
84
|
+
':hover': {
|
|
85
|
+
color: tokens.colorBrandForegroundInvertedHover
|
|
86
|
+
},
|
|
87
|
+
':active': {
|
|
88
|
+
color: tokens.colorBrandForegroundInvertedPressed
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
});
|
|
92
|
+
export const useLinkStyles_unstable = (state)=>{
|
|
93
|
+
'use no memo';
|
|
94
|
+
const styles = useStyles();
|
|
95
|
+
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
96
|
+
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, inline && styles.inline, disabled && styles.disabled, state.root.className);
|
|
97
|
+
return state;
|
|
98
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["import { 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.colorNeutralForeground2,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed,\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\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInvertedHover,\n },\n ':active': {\n color: tokens.colorBrandForegroundInvertedPressed,\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 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","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","colorBrandForegroundInvertedHover","colorBrandForegroundInvertedPressed","useLinkStyles_unstable","state","styles","appearance","backgroundAppearance","className","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AACtE,SAASC,+BAA+B,QAAQ,0BAA0B;AAC1E,SAASC,MAAM,QAAQ,wBAAwB;AAI/C,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYN,WAAW;IAC3BO,gBAAgBL,gCAAgC;QAC9CM,qBAAqBL,OAAOM,iBAAiB;QAC7CC,oBAAoB;QACpBC,qBAAqB;QACrBC,cAAc;IAChB;IACA,iBAAiB;IACjBP,MAAM;QACJ,kBAAkB;YAChBO,cAAc;QAChB;QACAC,iBAAiB;QACjBC,WAAW;QACXC,OAAOZ,OAAOa,wBAAwB;QACtCC,QAAQ;QACRC,SAAS;QACTC,YAAYhB,OAAOiB,cAAc;QACjCC,UAAUlB,OAAOmB,eAAe;QAChCC,YAAYpB,OAAOqB,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTC,UAAU;QACVC,WAAW;QACXlB,oBAAoB;QACpBmB,yBAAyB1B,OAAO2B,eAAe;QAC/CC,cAAc;QACdC,YAAY;QAEZ,UAAU;YACRtB,oBAAoB;YACpBK,OAAOZ,OAAO8B,6BAA6B;QAC7C;QAEA,WAAW;YACTvB,oBAAoB;YACpBK,OAAOZ,OAAO+B,+BAA+B;QAC/C;IACF;IACA,+CAA+C;IAC/CC,QAAQ;QACN,GAAGpC,WAAWqC,WAAW,CAAC,OAAO;IACnC;IACA,sEAAsE;IACtEC,MAAM;QACJhB,UAAU;IACZ;IACA,0CAA0C;IAC1CiB,QAAQ;QACNvB,OAAOZ,OAAOoC,uBAAuB;QAErC,UAAU;YACR7B,oBAAoB;YACpBK,OAAOZ,OAAOqC,4BAA4B;QAC5C;QAEA,WAAW;YACT9B,oBAAoB;YACpBK,OAAOZ,OAAOsC,8BAA8B;QAC9C;IACF;IACA,0DAA0D;IAC1DC,QAAQ;QACNhC,oBAAoB;IACtB;IACA,uCAAuC;IACvCiC,UAAU;QACRjC,oBAAoB;QACpBK,OAAOZ,OAAOyC,8BAA8B;QAC5C3B,QAAQ;QAER,UAAU;YACRP,oBAAoB;YACpBK,OAAOZ,OAAOyC,8BAA8B;QAC9C;QAEA,WAAW;YACTlC,oBAAoB;YACpBK,OAAOZ,OAAOyC,8BAA8B;QAC9C;IACF;IAEAC,UAAU;QACR9B,OAAOZ,OAAO2C,4BAA4B;QAC1C,UAAU;YACR/B,OAAOZ,OAAO4C,iCAAiC;QACjD;QACA,WAAW;YACThC,OAAOZ,OAAO6C,mCAAmC;QACnD;IACF;AACF;AAEA,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,SAAS7C;IACf,MAAM,EAAE8C,UAAU,EAAET,QAAQ,EAAED,MAAM,EAAErC,IAAI,EAAEgD,oBAAoB,EAAE,GAAGH;IAErEA,MAAM7C,IAAI,CAACiD,SAAS,GAAGrD,aACrBG,eAAeC,IAAI,EACnB8C,OAAO9C,IAAI,EACX8C,OAAO5C,cAAc,EACrBF,KAAKkD,EAAE,KAAK,OAAOlD,KAAKgC,IAAI,IAAIc,OAAOd,IAAI,EAC3ChC,KAAKkD,EAAE,KAAK,YAAYJ,OAAOhB,MAAM,EACrCiB,eAAe,YAAYD,OAAOb,MAAM,EACxCe,yBAAyB,cAAcF,OAAON,QAAQ,EACtDH,UAAUS,OAAOT,MAAM,EACvBC,YAAYQ,OAAOR,QAAQ,EAC3BO,MAAM7C,IAAI,CAACiD,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -0,0 +1,116 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
function _export(target, all) {
|
|
6
|
+
for(var name in all)Object.defineProperty(target, name, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: all[name]
|
|
9
|
+
});
|
|
10
|
+
}
|
|
11
|
+
_export(exports, {
|
|
12
|
+
linkClassNames: function() {
|
|
13
|
+
return linkClassNames;
|
|
14
|
+
},
|
|
15
|
+
useLinkStyles_unstable: function() {
|
|
16
|
+
return useLinkStyles_unstable;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
const _react = require("@griffel/react");
|
|
20
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
|
21
|
+
const _reacttheme = require("@fluentui/react-theme");
|
|
22
|
+
const linkClassNames = {
|
|
23
|
+
root: 'fui-Link'
|
|
24
|
+
};
|
|
25
|
+
const useStyles = (0, _react.makeStyles)({
|
|
26
|
+
focusIndicator: (0, _reacttabster.createCustomFocusIndicatorStyle)({
|
|
27
|
+
textDecorationColor: _reacttheme.tokens.colorStrokeFocus2,
|
|
28
|
+
textDecorationLine: 'underline',
|
|
29
|
+
textDecorationStyle: 'double',
|
|
30
|
+
outlineStyle: 'none'
|
|
31
|
+
}),
|
|
32
|
+
// Common styles.
|
|
33
|
+
root: {
|
|
34
|
+
':focus-visible': {
|
|
35
|
+
outlineStyle: 'none'
|
|
36
|
+
},
|
|
37
|
+
backgroundColor: 'transparent',
|
|
38
|
+
boxSizing: 'border-box',
|
|
39
|
+
color: _reacttheme.tokens.colorBrandForegroundLink,
|
|
40
|
+
cursor: 'pointer',
|
|
41
|
+
display: 'inline',
|
|
42
|
+
fontFamily: _reacttheme.tokens.fontFamilyBase,
|
|
43
|
+
fontSize: _reacttheme.tokens.fontSizeBase300,
|
|
44
|
+
fontWeight: _reacttheme.tokens.fontWeightRegular,
|
|
45
|
+
margin: '0',
|
|
46
|
+
padding: '0',
|
|
47
|
+
overflow: 'inherit',
|
|
48
|
+
textAlign: 'left',
|
|
49
|
+
textDecorationLine: 'none',
|
|
50
|
+
textDecorationThickness: _reacttheme.tokens.strokeWidthThin,
|
|
51
|
+
textOverflow: 'inherit',
|
|
52
|
+
userSelect: 'text',
|
|
53
|
+
':hover': {
|
|
54
|
+
textDecorationLine: 'underline',
|
|
55
|
+
color: _reacttheme.tokens.colorBrandForegroundLinkHover
|
|
56
|
+
},
|
|
57
|
+
':active': {
|
|
58
|
+
textDecorationLine: 'underline',
|
|
59
|
+
color: _reacttheme.tokens.colorBrandForegroundLinkPressed
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
// Overrides when the Link renders as a button.
|
|
63
|
+
button: {
|
|
64
|
+
..._react.shorthands.borderStyle('none')
|
|
65
|
+
},
|
|
66
|
+
// Overrides when an href is present so the Link renders as an anchor.
|
|
67
|
+
href: {
|
|
68
|
+
fontSize: 'inherit'
|
|
69
|
+
},
|
|
70
|
+
// Overrides when the Link appears subtle.
|
|
71
|
+
subtle: {
|
|
72
|
+
color: _reacttheme.tokens.colorNeutralForeground2,
|
|
73
|
+
':hover': {
|
|
74
|
+
textDecorationLine: 'underline',
|
|
75
|
+
color: _reacttheme.tokens.colorNeutralForeground2Hover
|
|
76
|
+
},
|
|
77
|
+
':active': {
|
|
78
|
+
textDecorationLine: 'underline',
|
|
79
|
+
color: _reacttheme.tokens.colorNeutralForeground2Pressed
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
// Overrides when the Link is rendered inline within text.
|
|
83
|
+
inline: {
|
|
84
|
+
textDecorationLine: 'underline'
|
|
85
|
+
},
|
|
86
|
+
// Overrides when the Link is disabled.
|
|
87
|
+
disabled: {
|
|
88
|
+
textDecorationLine: 'none',
|
|
89
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled,
|
|
90
|
+
cursor: 'not-allowed',
|
|
91
|
+
':hover': {
|
|
92
|
+
textDecorationLine: 'none',
|
|
93
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
94
|
+
},
|
|
95
|
+
':active': {
|
|
96
|
+
textDecorationLine: 'none',
|
|
97
|
+
color: _reacttheme.tokens.colorNeutralForegroundDisabled
|
|
98
|
+
}
|
|
99
|
+
},
|
|
100
|
+
inverted: {
|
|
101
|
+
color: _reacttheme.tokens.colorBrandForegroundInverted,
|
|
102
|
+
':hover': {
|
|
103
|
+
color: _reacttheme.tokens.colorBrandForegroundInvertedHover
|
|
104
|
+
},
|
|
105
|
+
':active': {
|
|
106
|
+
color: _reacttheme.tokens.colorBrandForegroundInvertedPressed
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
const useLinkStyles_unstable = (state)=>{
|
|
111
|
+
'use no memo';
|
|
112
|
+
const styles = useStyles();
|
|
113
|
+
const { appearance, disabled, inline, root, backgroundAppearance } = state;
|
|
114
|
+
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, inline && styles.inline, disabled && styles.disabled, state.root.className);
|
|
115
|
+
return state;
|
|
116
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/Link/useLinkStyles.styles.ts"],"sourcesContent":["import { 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.colorNeutralForeground2,\n\n ':hover': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Hover,\n },\n\n ':active': {\n textDecorationLine: 'underline',\n color: tokens.colorNeutralForeground2Pressed,\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\n inverted: {\n color: tokens.colorBrandForegroundInverted,\n ':hover': {\n color: tokens.colorBrandForegroundInvertedHover,\n },\n ':active': {\n color: tokens.colorBrandForegroundInvertedPressed,\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 inline && styles.inline,\n disabled && styles.disabled,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["linkClassNames","useLinkStyles_unstable","root","useStyles","makeStyles","focusIndicator","createCustomFocusIndicatorStyle","textDecorationColor","tokens","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","shorthands","borderStyle","href","subtle","colorNeutralForeground2","colorNeutralForeground2Hover","colorNeutralForeground2Pressed","inline","disabled","colorNeutralForegroundDisabled","inverted","colorBrandForegroundInverted","colorBrandForegroundInvertedHover","colorBrandForegroundInvertedPressed","state","styles","appearance","backgroundAppearance","className","mergeClasses","as"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAMaA,cAAAA;eAAAA;;IAiGAC,sBAAAA;eAAAA;;;uBAvGwC;8BACL;4BACzB;AAIhB,MAAMD,iBAA4C;IACvDE,MAAM;AACR;AAEA,MAAMC,YAAYC,IAAAA,iBAAAA,EAAW;IAC3BC,gBAAgBC,IAAAA,6CAAAA,EAAgC;QAC9CC,qBAAqBC,kBAAAA,CAAOC,iBAAiB;QAC7CC,oBAAoB;QACpBC,qBAAqB;QACrBC,cAAc;IAChB;IACA,iBAAiB;IACjBV,MAAM;QACJ,kBAAkB;YAChBU,cAAc;QAChB;QACAC,iBAAiB;QACjBC,WAAW;QACXC,OAAOP,kBAAAA,CAAOQ,wBAAwB;QACtCC,QAAQ;QACRC,SAAS;QACTC,YAAYX,kBAAAA,CAAOY,cAAc;QACjCC,UAAUb,kBAAAA,CAAOc,eAAe;QAChCC,YAAYf,kBAAAA,CAAOgB,iBAAiB;QACpCC,QAAQ;QACRC,SAAS;QACTC,UAAU;QACVC,WAAW;QACXlB,oBAAoB;QACpBmB,yBAAyBrB,kBAAAA,CAAOsB,eAAe;QAC/CC,cAAc;QACdC,YAAY;QAEZ,UAAU;YACRtB,oBAAoB;YACpBK,OAAOP,kBAAAA,CAAOyB,6BAA6B;QAC7C;QAEA,WAAW;YACTvB,oBAAoB;YACpBK,OAAOP,kBAAAA,CAAO0B,+BAA+B;QAC/C;IACF;IACA,+CAA+C;IAC/CC,QAAQ;QACN,GAAGC,iBAAAA,CAAWC,WAAW,CAAC,OAAO;IACnC;IACA,sEAAsE;IACtEC,MAAM;QACJjB,UAAU;IACZ;IACA,0CAA0C;IAC1CkB,QAAQ;QACNxB,OAAOP,kBAAAA,CAAOgC,uBAAuB;QAErC,UAAU;YACR9B,oBAAoB;YACpBK,OAAOP,kBAAAA,CAAOiC,4BAA4B;QAC5C;QAEA,WAAW;YACT/B,oBAAoB;YACpBK,OAAOP,kBAAAA,CAAOkC,8BAA8B;QAC9C;IACF;IACA,0DAA0D;IAC1DC,QAAQ;QACNjC,oBAAoB;IACtB;IACA,uCAAuC;IACvCkC,UAAU;QACRlC,oBAAoB;QACpBK,OAAOP,kBAAAA,CAAOqC,8BAA8B;QAC5C5B,QAAQ;QAER,UAAU;YACRP,oBAAoB;YACpBK,OAAOP,kBAAAA,CAAOqC,8BAA8B;QAC9C;QAEA,WAAW;YACTnC,oBAAoB;YACpBK,OAAOP,kBAAAA,CAAOqC,8BAA8B;QAC9C;IACF;IAEAC,UAAU;QACR/B,OAAOP,kBAAAA,CAAOuC,4BAA4B;QAC1C,UAAU;YACRhC,OAAOP,kBAAAA,CAAOwC,iCAAiC;QACjD;QACA,WAAW;YACTjC,OAAOP,kBAAAA,CAAOyC,mCAAmC;QACnD;IACF;AACF;AAEO,MAAMhD,yBAAyB,CAACiD;IACrC;IAEA,MAAMC,SAAShD;IACf,MAAM,EAAEiD,UAAU,EAAER,QAAQ,EAAED,MAAM,EAAEzC,IAAI,EAAEmD,oBAAoB,EAAE,GAAGH;IAErEA,MAAMhD,IAAI,CAACoD,SAAS,GAAGC,IAAAA,mBAAAA,EACrBvD,eAAeE,IAAI,EACnBiD,OAAOjD,IAAI,EACXiD,OAAO9C,cAAc,EACrBH,KAAKsD,EAAE,KAAK,OAAOtD,KAAKoC,IAAI,IAAIa,OAAOb,IAAI,EAC3CpC,KAAKsD,EAAE,KAAK,YAAYL,OAAOhB,MAAM,EACrCiB,eAAe,YAAYD,OAAOZ,MAAM,EACxCc,yBAAyB,cAAcF,OAAOL,QAAQ,EACtDH,UAAUQ,OAAOR,MAAM,EACvBC,YAAYO,OAAOP,QAAQ,EAC3BM,MAAMhD,IAAI,CAACoD,SAAS;IAGtB,OAAOJ;AACT"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-link",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.6.0",
|
|
4
4
|
"description": "Fluent UI React Link component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"@fluentui/keyboard-keys": "^9.0.8",
|
|
23
23
|
"@fluentui/react-jsx-runtime": "^9.1.2",
|
|
24
24
|
"@fluentui/react-shared-contexts": "^9.24.0",
|
|
25
|
-
"@fluentui/react-tabster": "^9.
|
|
25
|
+
"@fluentui/react-tabster": "^9.26.0",
|
|
26
26
|
"@fluentui/react-theme": "^9.1.24",
|
|
27
27
|
"@fluentui/react-utilities": "^9.22.0",
|
|
28
28
|
"@griffel/react": "^1.5.22",
|