@instructure/ui-link 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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.
Files changed (13) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Link/v1/index.js +95 -88
  3. package/es/Link/v1/styles.js +12 -8
  4. package/es/Link/v1/theme.js +21 -20
  5. package/es/Link/v2/index.js +122 -113
  6. package/es/Link/v2/styles.js +12 -11
  7. package/lib/Link/v1/index.js +95 -88
  8. package/lib/Link/v1/styles.js +12 -8
  9. package/lib/Link/v1/theme.js +21 -20
  10. package/lib/Link/v2/index.js +122 -113
  11. package/lib/Link/v2/styles.js +12 -11
  12. package/package.json +15 -15
  13. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-link
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Link/v1/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["children", "onClick", "onMouseEnter", "color", "href", "margin", "renderIcon", "iconPlacement", "isWithinText"];
3
- var _dec, _class, _Link;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -42,64 +40,76 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
40
  category: components
43
41
  ---
44
42
  **/
45
- let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Link = class Link extends Component {
46
- constructor(...args) {
47
- super(...args);
48
- this.state = {
49
- hasFocus: false
50
- };
51
- this.ref = null;
52
- this.makeStyleProps = () => {
53
- return {
54
- containsTruncateText: this.containsTruncateText,
55
- hasVisibleChildren: this.hasVisibleChildren
56
- };
57
- };
58
- this.handleElementRef = el => {
59
- const elementRef = this.props.elementRef;
60
- this.ref = el;
61
- if (typeof elementRef === 'function') {
62
- elementRef(el);
63
- }
64
- };
65
- this.handleClick = event => {
66
- const onClick = this.props.onClick;
67
- const interaction = this.interaction;
68
- if (interaction === 'disabled') {
69
- event.preventDefault();
70
- event.stopPropagation();
71
- } else if (typeof onClick === 'function') {
72
- onClick(event);
73
- }
74
- };
75
- this.handleFocus = event => {
76
- this.setState({
77
- hasFocus: true
78
- });
79
- if (typeof this.props.onFocus === 'function') {
80
- this.props.onFocus(event);
81
- }
82
- };
83
- this.handleBlur = event => {
84
- this.setState({
85
- hasFocus: false
86
- });
87
- if (typeof this.props.onBlur === 'function') {
88
- this.props.onBlur(event);
89
- }
90
- };
91
- }
43
+ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Link extends Component {
44
+ static displayName = "Link";
45
+ static componentId = 'Link';
46
+ static allowedProps = allowedProps;
47
+ static defaultProps = {
48
+ // Leave interaction default undefined so that `disabled` can also be supplied
49
+ interaction: undefined,
50
+ color: 'link',
51
+ iconPlacement: 'start',
52
+ isWithinText: true,
53
+ forceButtonRole: true
54
+ };
55
+ state = {
56
+ hasFocus: false
57
+ };
92
58
  get _link() {
93
59
  return this.ref;
94
60
  }
61
+ ref = null;
95
62
  componentDidMount() {
96
- var _this$props$makeStyle, _this$props;
97
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
63
+ this.props.makeStyles?.(this.makeStyleProps());
98
64
  }
99
65
  componentDidUpdate() {
100
- var _this$props$makeStyle2, _this$props2;
101
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
66
+ this.props.makeStyles?.(this.makeStyleProps());
102
67
  }
68
+ makeStyleProps = () => {
69
+ return {
70
+ containsTruncateText: this.containsTruncateText,
71
+ hasVisibleChildren: this.hasVisibleChildren
72
+ };
73
+ };
74
+ handleElementRef = el => {
75
+ const {
76
+ elementRef
77
+ } = this.props;
78
+ this.ref = el;
79
+ if (typeof elementRef === 'function') {
80
+ elementRef(el);
81
+ }
82
+ };
83
+ handleClick = event => {
84
+ const {
85
+ onClick
86
+ } = this.props;
87
+ const {
88
+ interaction
89
+ } = this;
90
+ if (interaction === 'disabled') {
91
+ event.preventDefault();
92
+ event.stopPropagation();
93
+ } else if (typeof onClick === 'function') {
94
+ onClick(event);
95
+ }
96
+ };
97
+ handleFocus = event => {
98
+ this.setState({
99
+ hasFocus: true
100
+ });
101
+ if (typeof this.props.onFocus === 'function') {
102
+ this.props.onFocus(event);
103
+ }
104
+ };
105
+ handleBlur = event => {
106
+ this.setState({
107
+ hasFocus: false
108
+ });
109
+ if (typeof this.props.onBlur === 'function') {
110
+ this.props.onBlur(event);
111
+ }
112
+ };
103
113
  get containsTruncateText() {
104
114
  let truncateText = false;
105
115
  Children.forEach(this.props.children, child => {
@@ -109,14 +119,16 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
109
119
  });
110
120
  warn(
111
121
  // if display prop is used, warn about icon or TruncateText
112
- !truncateText || this.props.display === void 0, '[Link] Using the display property with TruncateText may cause layout issues.');
122
+ !truncateText || this.props.display === undefined, '[Link] Using the display property with TruncateText may cause layout issues.');
113
123
  return truncateText;
114
124
  }
115
125
  get display() {
116
126
  if (this.props.display) {
117
127
  return this.props.display; // user-entered display property
118
128
  }
119
- const containsTruncateText = this.containsTruncateText;
129
+ const {
130
+ containsTruncateText
131
+ } = this;
120
132
  if (this.props.renderIcon) {
121
133
  return containsTruncateText ? 'inline-flex' : 'inline-block';
122
134
  } else {
@@ -142,10 +154,11 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
142
154
  return hasVisibleChildren(this.props.children);
143
155
  }
144
156
  get role() {
145
- const _this$props3 = this.props,
146
- role = _this$props3.role,
147
- forceButtonRole = _this$props3.forceButtonRole,
148
- onClick = _this$props3.onClick;
157
+ const {
158
+ role,
159
+ forceButtonRole,
160
+ onClick
161
+ } = this.props;
149
162
  if (forceButtonRole) {
150
163
  return onClick && this.element !== 'button' ? 'button' : role;
151
164
  }
@@ -155,32 +168,33 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
155
168
  this.ref && this.ref.focus();
156
169
  }
157
170
  renderIcon() {
158
- var _this$props$styles;
159
171
  warn(
160
172
  // if display prop is used, warn about icon or TruncateText
161
- this.props.display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
173
+ this.props.display === undefined, '[Link] Using the display property with an icon may cause layout issues.');
162
174
  return _jsx("span", {
163
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
175
+ css: this.props.styles?.icon,
164
176
  children: callRenderProp(this.props.renderIcon)
165
177
  });
166
178
  }
167
179
  render() {
168
- var _this$props$styles2;
169
- const _this$props4 = this.props,
170
- children = _this$props4.children,
171
- onClick = _this$props4.onClick,
172
- onMouseEnter = _this$props4.onMouseEnter,
173
- color = _this$props4.color,
174
- href = _this$props4.href,
175
- margin = _this$props4.margin,
176
- renderIcon = _this$props4.renderIcon,
177
- iconPlacement = _this$props4.iconPlacement,
178
- isWithinText = _this$props4.isWithinText,
179
- props = _objectWithoutProperties(_this$props4, _excluded);
180
- const interaction = this.interaction;
180
+ const {
181
+ children,
182
+ onClick,
183
+ onMouseEnter,
184
+ color,
185
+ href,
186
+ margin,
187
+ renderIcon,
188
+ iconPlacement,
189
+ isWithinText,
190
+ ...props
191
+ } = this.props;
192
+ const {
193
+ interaction
194
+ } = this;
181
195
  const isDisabled = interaction === 'disabled';
182
- const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
183
- const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
196
+ const type = this.element === 'button' || this.element === 'input' ? 'button' : undefined;
197
+ const tabIndex = this.role === 'button' && !isDisabled ? 0 : undefined;
184
198
  return _jsxs(View, {
185
199
  ...passthroughProps(props),
186
200
  elementRef: this.handleElementRef,
@@ -192,22 +206,15 @@ let Link = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
192
206
  onClick: this.handleClick,
193
207
  onFocus: this.handleFocus,
194
208
  onBlur: this.handleBlur,
195
- "aria-disabled": isDisabled ? 'true' : void 0,
209
+ "aria-disabled": isDisabled ? 'true' : undefined,
196
210
  role: this.role,
197
211
  type: type,
198
212
  tabIndex: tabIndex,
199
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link,
213
+ css: this.props.styles?.link,
200
214
  "data-cid": combineDataCid('Link', this.props),
201
215
  children: [renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null]
202
216
  });
203
217
  }
204
- }, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.allowedProps = allowedProps, _Link.defaultProps = {
205
- // Leave interaction default undefined so that `disabled` can also be supplied
206
- interaction: void 0,
207
- color: 'link',
208
- iconPlacement: 'start',
209
- isWithinText: true,
210
- forceButtonRole: true
211
- }, _Link)) || _class);
218
+ }) || _class);
212
219
  export default Link;
213
220
  export { Link };
package/es/Link/v1/styles.js CHANGED
@@ -33,14 +33,18 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props, state) => {
36
- const isWithinText = props.isWithinText,
37
- renderIcon = props.renderIcon,
38
- _props$iconPlacement = props.iconPlacement,
39
- iconPlacement = _props$iconPlacement === void 0 ? 'start' : _props$iconPlacement,
40
- color = props.color,
41
- variant = props.variant;
42
- const containsTruncateText = state.containsTruncateText,
43
- hasVisibleChildren = state.hasVisibleChildren;
36
+ const {
37
+ isWithinText,
38
+ renderIcon,
39
+ iconPlacement = 'start',
40
+ // TODO workaround needed for react 19 where defaultprops doesn't apply for some reasong
41
+ color,
42
+ variant
43
+ } = props;
44
+ const {
45
+ containsTruncateText,
46
+ hasVisibleChildren
47
+ } = state;
44
48
  const inverseStyle = color === 'link-inverse';
45
49
  const variantStyles = {
46
50
  inline: {
package/es/Link/v1/theme.js CHANGED
@@ -29,12 +29,13 @@ import { darken } from '@instructure/ui-color-utils';
29
29
  * @return {Object} The final theme object with the overrides and component variables
30
30
  */
31
31
  const generateComponentTheme = theme => {
32
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
33
- const colors = theme.colors,
34
- borders = theme.borders,
35
- typography = theme.typography,
36
- spacing = theme.spacing,
37
- themeName = theme.key;
32
+ const {
33
+ colors,
34
+ borders,
35
+ typography,
36
+ spacing,
37
+ key: themeName
38
+ } = theme;
38
39
 
39
40
  // if any styling should depend on the theme itself,
40
41
  // this object should specify it
@@ -52,24 +53,24 @@ const generateComponentTheme = theme => {
52
53
 
53
54
  // maps the theme variables to component specific style variables
54
55
  const componentVariables = {
55
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
56
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
57
- fontSize: typography === null || typography === void 0 ? void 0 : typography.content,
58
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight150,
59
- fontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.contentSmall,
60
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue5782,
56
+ fontFamily: typography?.fontFamily,
57
+ fontWeight: typography?.fontWeightNormal,
58
+ fontSize: typography?.content,
59
+ lineHeight: typography?.lineHeight150,
60
+ fontSizeSmall: typography?.contentSmall,
61
+ color: colors?.contrasts?.blue5782,
61
62
  textDecorationWithinText: 'underline',
62
63
  hoverTextDecorationWithinText: 'none',
63
64
  textDecorationOutsideText: 'none',
64
65
  hoverTextDecorationOutsideText: 'underline',
65
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
66
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue4570,
67
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
68
- focusOutlineBorderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusSmall,
69
- hoverColor: darken(colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue5782, 10),
70
- colorInverse: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1111,
71
- focusInverseOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
72
- focusInverseIconOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.white1010,
66
+ focusOutlineWidth: borders?.widthMedium,
67
+ focusOutlineColor: colors?.contrasts?.blue4570,
68
+ focusOutlineStyle: borders?.style,
69
+ focusOutlineBorderRadius: borders?.radiusSmall,
70
+ hoverColor: darken(colors?.contrasts?.blue5782, 10),
71
+ colorInverse: colors?.contrasts?.grey1111,
72
+ focusInverseOutlineColor: colors?.contrasts?.white1010,
73
+ focusInverseIconOutlineColor: colors?.contrasts?.white1010,
73
74
  iconSize: '1.125em',
74
75
  // make icon slightly larger than inherited font-size,
75
76
  iconPlusTextMargin: spacing.space4,
package/es/Link/v2/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["children", "onClick", "onMouseEnter", "color", "href", "margin", "renderIcon", "iconPlacement"];
3
- var _dec, _class, _Link;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -42,85 +40,97 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
40
  category: components
43
41
  ---
44
42
  **/
45
- let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link extends Component {
46
- constructor(...args) {
47
- super(...args);
48
- this.state = {
49
- hasFocus: false
50
- };
51
- this.ref = null;
52
- this.makeStyleProps = () => {
53
- const _this$props = this.props,
54
- variantProp = _this$props.variant,
55
- sizeProp = _this$props.size;
56
-
57
- // Handle deprecated variant values by mapping them to new variant + size props
58
- let variant = variantProp;
59
- let size = sizeProp;
60
- if (variantProp === 'inline-small' || variantProp === 'standalone-small') {
61
- warn(false, `[Link] The variant value "${variantProp}" is deprecated. Use variant="${variantProp.replace('-small', '')}" with size="small" instead.`);
62
- variant = variantProp.replace('-small', '');
63
- // Only set size from deprecated variant if size prop is not explicitly provided
64
- if (!sizeProp) {
65
- size = 'small';
66
- }
67
- } else if ((variantProp === 'inline' || variantProp === 'standalone') && !sizeProp) {
68
- // When using new variant values without explicit size, default to medium
69
- // This maintains the old behavior where 'inline' and 'standalone' were medium-sized
70
- size = 'medium';
71
- }
72
- return {
73
- containsTruncateText: this.containsTruncateText,
74
- hasVisibleChildren: this.hasVisibleChildren,
75
- variant,
76
- size
77
- };
78
- };
79
- this.handleElementRef = el => {
80
- const elementRef = this.props.elementRef;
81
- this.ref = el;
82
- if (typeof elementRef === 'function') {
83
- elementRef(el);
84
- }
85
- };
86
- this.handleClick = event => {
87
- const onClick = this.props.onClick;
88
- const interaction = this.interaction;
89
- if (interaction === 'disabled') {
90
- event.preventDefault();
91
- event.stopPropagation();
92
- } else if (typeof onClick === 'function') {
93
- onClick(event);
94
- }
95
- };
96
- this.handleFocus = event => {
97
- this.setState({
98
- hasFocus: true
99
- });
100
- if (typeof this.props.onFocus === 'function') {
101
- this.props.onFocus(event);
102
- }
103
- };
104
- this.handleBlur = event => {
105
- this.setState({
106
- hasFocus: false
107
- });
108
- if (typeof this.props.onBlur === 'function') {
109
- this.props.onBlur(event);
110
- }
111
- };
112
- }
43
+ let Link = (_dec = withStyle(generateStyle), _dec(_class = class Link extends Component {
44
+ static displayName = "Link";
45
+ static componentId = 'Link';
46
+ static allowedProps = allowedProps;
47
+ static defaultProps = {
48
+ // Leave interaction default undefined so that `disabled` can also be supplied
49
+ interaction: undefined,
50
+ color: 'link',
51
+ iconPlacement: 'start',
52
+ forceButtonRole: true
53
+ };
54
+ state = {
55
+ hasFocus: false
56
+ };
113
57
  get _link() {
114
58
  return this.ref;
115
59
  }
60
+ ref = null;
116
61
  componentDidMount() {
117
- var _this$props$makeStyle, _this$props2;
118
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2, this.makeStyleProps());
62
+ this.props.makeStyles?.(this.makeStyleProps());
119
63
  }
120
64
  componentDidUpdate() {
121
- var _this$props$makeStyle2, _this$props3;
122
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3, this.makeStyleProps());
65
+ this.props.makeStyles?.(this.makeStyleProps());
123
66
  }
67
+ makeStyleProps = () => {
68
+ const {
69
+ variant: variantProp,
70
+ size: sizeProp
71
+ } = this.props;
72
+
73
+ // Handle deprecated variant values by mapping them to new variant + size props
74
+ let variant = variantProp;
75
+ let size = sizeProp;
76
+ if (variantProp === 'inline-small' || variantProp === 'standalone-small') {
77
+ warn(false, `[Link] The variant value "${variantProp}" is deprecated. Use variant="${variantProp.replace('-small', '')}" with size="small" instead.`);
78
+ variant = variantProp.replace('-small', '');
79
+ // Only set size from deprecated variant if size prop is not explicitly provided
80
+ if (!sizeProp) {
81
+ size = 'small';
82
+ }
83
+ } else if ((variantProp === 'inline' || variantProp === 'standalone') && !sizeProp) {
84
+ // When using new variant values without explicit size, default to medium
85
+ // This maintains the old behavior where 'inline' and 'standalone' were medium-sized
86
+ size = 'medium';
87
+ }
88
+ return {
89
+ containsTruncateText: this.containsTruncateText,
90
+ hasVisibleChildren: this.hasVisibleChildren,
91
+ variant,
92
+ size
93
+ };
94
+ };
95
+ handleElementRef = el => {
96
+ const {
97
+ elementRef
98
+ } = this.props;
99
+ this.ref = el;
100
+ if (typeof elementRef === 'function') {
101
+ elementRef(el);
102
+ }
103
+ };
104
+ handleClick = event => {
105
+ const {
106
+ onClick
107
+ } = this.props;
108
+ const {
109
+ interaction
110
+ } = this;
111
+ if (interaction === 'disabled') {
112
+ event.preventDefault();
113
+ event.stopPropagation();
114
+ } else if (typeof onClick === 'function') {
115
+ onClick(event);
116
+ }
117
+ };
118
+ handleFocus = event => {
119
+ this.setState({
120
+ hasFocus: true
121
+ });
122
+ if (typeof this.props.onFocus === 'function') {
123
+ this.props.onFocus(event);
124
+ }
125
+ };
126
+ handleBlur = event => {
127
+ this.setState({
128
+ hasFocus: false
129
+ });
130
+ if (typeof this.props.onBlur === 'function') {
131
+ this.props.onBlur(event);
132
+ }
133
+ };
124
134
  get containsTruncateText() {
125
135
  let truncateText = false;
126
136
  Children.forEach(this.props.children, child => {
@@ -130,14 +140,16 @@ let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link e
130
140
  });
131
141
  warn(
132
142
  // if display prop is used, warn about icon or TruncateText
133
- !truncateText || this.props.display === void 0, '[Link] Using the display property with TruncateText may cause layout issues.');
143
+ !truncateText || this.props.display === undefined, '[Link] Using the display property with TruncateText may cause layout issues.');
134
144
  return truncateText;
135
145
  }
136
146
  get display() {
137
147
  if (this.props.display) {
138
148
  return this.props.display; // user-entered display property
139
149
  }
140
- const containsTruncateText = this.containsTruncateText;
150
+ const {
151
+ containsTruncateText
152
+ } = this;
141
153
  if (this.props.renderIcon) {
142
154
  return containsTruncateText ? 'inline-flex' : 'inline-block';
143
155
  } else {
@@ -163,10 +175,11 @@ let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link e
163
175
  return hasVisibleChildren(this.props.children);
164
176
  }
165
177
  get role() {
166
- const _this$props4 = this.props,
167
- role = _this$props4.role,
168
- forceButtonRole = _this$props4.forceButtonRole,
169
- onClick = _this$props4.onClick;
178
+ const {
179
+ role,
180
+ forceButtonRole,
181
+ onClick
182
+ } = this.props;
170
183
  if (forceButtonRole) {
171
184
  return onClick && this.element !== 'button' ? 'button' : role;
172
185
  }
@@ -176,15 +189,15 @@ let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link e
176
189
  this.ref && this.ref.focus();
177
190
  }
178
191
  renderIcon() {
179
- var _this$props$styles;
180
- const _this$props5 = this.props,
181
- display = _this$props5.display,
182
- renderIcon = _this$props5.renderIcon,
183
- variantProp = _this$props5.variant,
184
- sizeProp = _this$props5.size;
192
+ const {
193
+ display,
194
+ renderIcon,
195
+ variant: variantProp,
196
+ size: sizeProp
197
+ } = this.props;
185
198
  warn(
186
199
  // if display prop is used, warn about icon or TruncateText
187
- display === void 0, '[Link] Using the display property with an icon may cause layout issues.');
200
+ display === undefined, '[Link] Using the display property with an icon may cause layout issues.');
188
201
 
189
202
  // Determine the actual size being used (considering deprecated variants)
190
203
  let size = sizeProp;
@@ -202,26 +215,28 @@ let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link e
202
215
  };
203
216
  const iconSize = linkSizeToIconSize[size || 'medium'];
204
217
  return _jsx("span", {
205
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.icon,
206
- children: renderIconWithProps(renderIcon, iconSize, void 0)
218
+ css: this.props.styles?.icon,
219
+ children: renderIconWithProps(renderIcon, iconSize, undefined)
207
220
  });
208
221
  }
209
222
  render() {
210
- var _this$props$styles2;
211
- const _this$props6 = this.props,
212
- children = _this$props6.children,
213
- onClick = _this$props6.onClick,
214
- onMouseEnter = _this$props6.onMouseEnter,
215
- color = _this$props6.color,
216
- href = _this$props6.href,
217
- margin = _this$props6.margin,
218
- renderIcon = _this$props6.renderIcon,
219
- iconPlacement = _this$props6.iconPlacement,
220
- props = _objectWithoutProperties(_this$props6, _excluded);
221
- const interaction = this.interaction;
223
+ const {
224
+ children,
225
+ onClick,
226
+ onMouseEnter,
227
+ color,
228
+ href,
229
+ margin,
230
+ renderIcon,
231
+ iconPlacement,
232
+ ...props
233
+ } = this.props;
234
+ const {
235
+ interaction
236
+ } = this;
222
237
  const isDisabled = interaction === 'disabled';
223
- const type = this.element === 'button' || this.element === 'input' ? 'button' : void 0;
224
- const tabIndex = this.role === 'button' && !isDisabled ? 0 : void 0;
238
+ const type = this.element === 'button' || this.element === 'input' ? 'button' : undefined;
239
+ const tabIndex = this.role === 'button' && !isDisabled ? 0 : undefined;
225
240
  return _jsxs(View, {
226
241
  ...passthroughProps(props),
227
242
  elementRef: this.handleElementRef,
@@ -233,21 +248,15 @@ let Link = (_dec = withStyle(generateStyle), _dec(_class = (_Link = class Link e
233
248
  onClick: this.handleClick,
234
249
  onFocus: this.handleFocus,
235
250
  onBlur: this.handleBlur,
236
- "aria-disabled": isDisabled ? 'true' : void 0,
251
+ "aria-disabled": isDisabled ? 'true' : undefined,
237
252
  role: this.role,
238
253
  type: type,
239
254
  tabIndex: tabIndex,
240
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.link,
255
+ css: this.props.styles?.link,
241
256
  "data-cid": combineDataCid('Link', this.props),
242
257
  children: [renderIcon && iconPlacement === 'start' ? this.renderIcon() : null, children, renderIcon && iconPlacement === 'end' ? this.renderIcon() : null]
243
258
  });
244
259
  }
245
- }, _Link.displayName = "Link", _Link.componentId = 'Link', _Link.allowedProps = allowedProps, _Link.defaultProps = {
246
- // Leave interaction default undefined so that `disabled` can also be supplied
247
- interaction: void 0,
248
- color: 'link',
249
- iconPlacement: 'start',
250
- forceButtonRole: true
251
- }, _Link)) || _class);
260
+ }) || _class);
252
261
  export default Link;
253
262
  export { Link };