@instructure/ui-tag 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/Tag/v1/index.js +55 -54
  3. package/es/Tag/v1/styles.js +7 -5
  4. package/es/Tag/v1/theme.js +23 -22
  5. package/es/Tag/v2/index.js +84 -82
  6. package/es/Tag/v2/styles.js +7 -5
  7. package/lib/Tag/v1/index.js +55 -54
  8. package/lib/Tag/v1/styles.js +7 -5
  9. package/lib/Tag/v1/theme.js +23 -22
  10. package/lib/Tag/v2/index.js +84 -82
  11. package/lib/Tag/v2/styles.js +7 -5
  12. package/package.json +13 -13
  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-tag
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/Tag/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Tag;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,84 +38,85 @@ category: components
38
38
  ---
39
39
  **/
40
40
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
41
- let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Tag = class Tag extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this.ref = null;
45
- this.focus = () => {
46
- this.ref && this.ref.focus();
47
- };
48
- this.handleClick = e => {
49
- const _this$props = this.props,
50
- disabled = _this$props.disabled,
51
- readOnly = _this$props.readOnly,
52
- onClick = _this$props.onClick;
53
- if (disabled || readOnly) {
54
- e.preventDefault();
55
- e.stopPropagation();
56
- } else if (typeof onClick === 'function') {
57
- onClick(e);
58
- }
59
- };
60
- this.handleRef = element => {
61
- this.ref = element;
62
- if (typeof this.props.elementRef === 'function') {
63
- this.props.elementRef(element);
64
- }
65
- };
66
- }
41
+ let Tag = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tag extends Component {
42
+ static displayName = "Tag";
43
+ static componentId = 'Tag';
44
+ static allowedProps = allowedProps;
45
+ static defaultProps = {
46
+ size: 'medium',
47
+ dismissible: false,
48
+ variant: 'default',
49
+ disabled: false,
50
+ readOnly: false
51
+ };
52
+ ref = null;
67
53
  componentDidMount() {
68
- var _this$props$makeStyle, _this$props2;
69
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
54
+ this.props.makeStyles?.();
70
55
  }
71
56
  componentDidUpdate() {
72
- var _this$props$makeStyle2, _this$props3;
73
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
57
+ this.props.makeStyles?.();
74
58
  }
75
59
  get focused() {
76
60
  return isActiveElement(this.ref);
77
61
  }
62
+ focus = () => {
63
+ this.ref && this.ref.focus();
64
+ };
65
+ handleClick = e => {
66
+ const {
67
+ disabled,
68
+ readOnly,
69
+ onClick
70
+ } = this.props;
71
+ if (disabled || readOnly) {
72
+ e.preventDefault();
73
+ e.stopPropagation();
74
+ } else if (typeof onClick === 'function') {
75
+ onClick(e);
76
+ }
77
+ };
78
+ handleRef = element => {
79
+ this.ref = element;
80
+ if (typeof this.props.elementRef === 'function') {
81
+ this.props.elementRef(element);
82
+ }
83
+ };
78
84
  render() {
79
- const _this$props4 = this.props,
80
- className = _this$props4.className,
81
- dismissible = _this$props4.dismissible,
82
- disabled = _this$props4.disabled,
83
- readOnly = _this$props4.readOnly,
84
- text = _this$props4.text,
85
- title = _this$props4.title,
86
- onClick = _this$props4.onClick,
87
- margin = _this$props4.margin,
88
- styles = _this$props4.styles;
85
+ const {
86
+ className,
87
+ dismissible,
88
+ disabled,
89
+ readOnly,
90
+ text,
91
+ title,
92
+ onClick,
93
+ margin,
94
+ styles
95
+ } = this.props;
89
96
  const passthroughProps = View.omitViewProps(omitProps(this.props, Tag.allowedProps), Tag);
90
97
  return _jsxs(View, {
91
98
  ...passthroughProps,
92
99
  elementRef: this.handleRef,
93
- css: styles === null || styles === void 0 ? void 0 : styles.tag,
100
+ css: styles?.tag,
94
101
  className: className,
95
102
  as: onClick ? 'button' : 'span',
96
103
  margin: margin,
97
- type: onClick ? 'button' : void 0,
104
+ type: onClick ? 'button' : undefined,
98
105
  ...(onClick && {
99
106
  onClick: this.handleClick
100
107
  }),
101
108
  disabled: disabled || readOnly,
102
- display: void 0,
103
- title: title || (typeof text === 'string' ? text : void 0),
109
+ display: undefined,
110
+ title: title || (typeof text === 'string' ? text : undefined),
104
111
  "data-cid": "Tag",
105
112
  children: [_jsx("span", {
106
- css: styles === null || styles === void 0 ? void 0 : styles.text,
113
+ css: styles?.text,
107
114
  children: text
108
115
  }), onClick && dismissible ? _jsx(IconXLine, {
109
- css: styles === null || styles === void 0 ? void 0 : styles.icon
116
+ css: styles?.icon
110
117
  }) : null]
111
118
  });
112
119
  }
113
- }, _Tag.displayName = "Tag", _Tag.componentId = 'Tag', _Tag.allowedProps = allowedProps, _Tag.defaultProps = {
114
- size: 'medium',
115
- dismissible: false,
116
- variant: 'default',
117
- disabled: false,
118
- readOnly: false
119
- }, _Tag)) || _class);
120
+ }) || _class);
120
121
  export default Tag;
121
122
  export { Tag };
package/es/Tag/v1/styles.js CHANGED
@@ -33,11 +33,13 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, props) => {
36
- const variant = props.variant,
37
- size = props.size,
38
- dismissible = props.dismissible,
39
- onClick = props.onClick,
40
- disabled = props.disabled;
36
+ const {
37
+ variant,
38
+ size,
39
+ dismissible,
40
+ onClick,
41
+ disabled
42
+ } = props;
41
43
  const isButton = !!onClick;
42
44
  const sizeVariants = {
43
45
  small: {
package/es/Tag/v1/theme.js CHANGED
@@ -28,17 +28,18 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts0, _colors$contrasts1, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13;
32
- const borders = theme.borders,
33
- colors = theme.colors,
34
- forms = theme.forms,
35
- spacing = theme.spacing,
36
- typography = theme.typography,
37
- themeName = theme.key;
31
+ const {
32
+ borders,
33
+ colors,
34
+ forms,
35
+ spacing,
36
+ typography,
37
+ key: themeName
38
+ } = theme;
38
39
  const themeSpecificStyle = {
39
40
  'canvas-high-contrast': {
40
- defaultBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
41
- defaultBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125
41
+ defaultBackground: colors?.contrasts?.white1010,
42
+ defaultBorderColor: colors?.contrasts?.grey125125
42
43
  },
43
44
  canvas: {
44
45
  focusOutlineColor: theme['ic-brand-primary'],
@@ -58,30 +59,30 @@ const generateComponentTheme = theme => {
58
59
  fontSizeLarge: typography.fontSizeMedium,
59
60
  padding: `0 ${spacing.xSmall}`,
60
61
  paddingSmall: `0 ${spacing.xSmall}`,
61
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
62
+ focusOutlineColor: colors?.contrasts?.blue4570,
62
63
  focusOutlineWidth: borders.widthMedium,
63
64
  focusOutlineStyle: borders.style,
64
65
  maxWidth: '10rem',
65
66
  iconMargin: spacing.xSmall,
66
67
  transitionTiming: '0.2s',
67
- defaultBackgroundHover: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey1214,
68
- defaultBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111,
69
- defaultBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1424,
68
+ defaultBackgroundHover: colors?.contrasts?.grey1214,
69
+ defaultBackground: colors?.contrasts?.grey1111,
70
+ defaultBorderColor: colors?.contrasts?.grey1424,
70
71
  defaultBorderRadius: '999rem',
71
72
  defaultBorderStyle: borders.style,
72
73
  defaultBorderWidth: borders.widthSmall,
73
- defaultColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.grey125125,
74
- defaultIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey125125,
75
- defaultIconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.blue4570,
76
- inlineBackgroundHover: colors === null || colors === void 0 ? void 0 : (_colors$contrasts0 = colors.contrasts) === null || _colors$contrasts0 === void 0 ? void 0 : _colors$contrasts0.grey1111,
77
- inlineBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts1 = colors.contrasts) === null || _colors$contrasts1 === void 0 ? void 0 : _colors$contrasts1.white1010,
78
- inlineBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.grey4570,
74
+ defaultColor: colors?.contrasts?.grey125125,
75
+ defaultIconColor: colors?.contrasts?.grey125125,
76
+ defaultIconHoverColor: colors?.contrasts?.blue4570,
77
+ inlineBackgroundHover: colors?.contrasts?.grey1111,
78
+ inlineBackground: colors?.contrasts?.white1010,
79
+ inlineBorderColor: colors?.contrasts?.grey4570,
79
80
  inlineBorderRadius: borders.radiusMedium,
80
81
  inlineBorderStyle: borders.style,
81
82
  inlineBorderWidth: borders.widthSmall,
82
- inlineColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey125125,
83
- inlineIconColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey4570,
84
- inlineIconHoverColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570
83
+ inlineColor: colors?.contrasts?.grey125125,
84
+ inlineIconColor: colors?.contrasts?.grey4570,
85
+ inlineIconHoverColor: colors?.contrasts?.blue4570
85
86
  };
86
87
  return {
87
88
  ...componentVariables,
package/es/Tag/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Tag;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -37,82 +37,90 @@ category: components
37
37
  ---
38
38
  **/
39
39
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
40
- let Tag = (_dec = withStyle(generateStyle), _dec(_class = (_Tag = class Tag extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.state = {
44
- iconHovered: false
45
- };
46
- this.ref = null;
47
- this.focus = () => {
48
- this.ref && this.ref.focus();
49
- };
50
- this.handleIconMouseEnter = () => {
51
- this.setState({
52
- iconHovered: true
53
- });
54
- };
55
- this.handleIconMouseLeave = () => {
56
- this.setState({
57
- iconHovered: false
58
- });
59
- };
60
- this.handleClick = e => {
61
- const _this$props = this.props,
62
- disabled = _this$props.disabled,
63
- readOnly = _this$props.readOnly,
64
- onClick = _this$props.onClick;
65
- if (disabled || readOnly) {
66
- e.preventDefault();
67
- e.stopPropagation();
68
- } else if (typeof onClick === 'function') {
69
- onClick(e);
70
- }
71
- };
72
- this.handleRef = element => {
73
- this.ref = element;
74
- if (typeof this.props.elementRef === 'function') {
75
- this.props.elementRef(element);
76
- }
77
- };
78
- this.getIconSize = () => {
79
- const _this$props2 = this.props,
80
- size = _this$props2.size,
81
- variant = _this$props2.variant;
82
- if (variant === 'inline') {
83
- return 'xs';
84
- }
85
- const sizeMap = {
86
- small: 'xs',
87
- medium: 'sm',
88
- large: 'md'
89
- };
90
- return sizeMap[size];
91
- };
92
- }
40
+ let Tag = (_dec = withStyle(generateStyle), _dec(_class = class Tag extends Component {
41
+ static displayName = "Tag";
42
+ static componentId = 'Tag';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ size: 'medium',
46
+ dismissible: false,
47
+ variant: 'default',
48
+ disabled: false,
49
+ readOnly: false
50
+ };
51
+ state = {
52
+ iconHovered: false
53
+ };
54
+ ref = null;
93
55
  componentDidMount() {
94
- var _this$props$makeStyle, _this$props3;
95
- (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
56
+ this.props.makeStyles?.();
96
57
  }
97
58
  componentDidUpdate() {
98
- var _this$props$makeStyle2, _this$props4;
99
- (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
59
+ this.props.makeStyles?.();
100
60
  }
101
61
  get focused() {
102
62
  return isActiveElement(this.ref);
103
63
  }
64
+ focus = () => {
65
+ this.ref && this.ref.focus();
66
+ };
67
+ handleIconMouseEnter = () => {
68
+ this.setState({
69
+ iconHovered: true
70
+ });
71
+ };
72
+ handleIconMouseLeave = () => {
73
+ this.setState({
74
+ iconHovered: false
75
+ });
76
+ };
77
+ handleClick = e => {
78
+ const {
79
+ disabled,
80
+ readOnly,
81
+ onClick
82
+ } = this.props;
83
+ if (disabled || readOnly) {
84
+ e.preventDefault();
85
+ e.stopPropagation();
86
+ } else if (typeof onClick === 'function') {
87
+ onClick(e);
88
+ }
89
+ };
90
+ handleRef = element => {
91
+ this.ref = element;
92
+ if (typeof this.props.elementRef === 'function') {
93
+ this.props.elementRef(element);
94
+ }
95
+ };
96
+ getIconSize = () => {
97
+ const {
98
+ size,
99
+ variant
100
+ } = this.props;
101
+ if (variant === 'inline') {
102
+ return 'xs';
103
+ }
104
+ const sizeMap = {
105
+ small: 'xs',
106
+ medium: 'sm',
107
+ large: 'md'
108
+ };
109
+ return sizeMap[size];
110
+ };
104
111
  render() {
105
- const _this$props5 = this.props,
106
- className = _this$props5.className,
107
- dismissible = _this$props5.dismissible,
108
- disabled = _this$props5.disabled,
109
- readOnly = _this$props5.readOnly,
110
- text = _this$props5.text,
111
- title = _this$props5.title,
112
- onClick = _this$props5.onClick,
113
- margin = _this$props5.margin,
114
- styles = _this$props5.styles,
115
- variant = _this$props5.variant;
112
+ const {
113
+ className,
114
+ dismissible,
115
+ disabled,
116
+ readOnly,
117
+ text,
118
+ title,
119
+ onClick,
120
+ margin,
121
+ styles,
122
+ variant
123
+ } = this.props;
116
124
  const passthroughProps = View.omitViewProps(omitProps(this.props, Tag.allowedProps), Tag);
117
125
  const getIconColor = () => {
118
126
  if (disabled) {
@@ -126,25 +134,25 @@ let Tag = (_dec = withStyle(generateStyle), _dec(_class = (_Tag = class Tag exte
126
134
  return _jsxs(View, {
127
135
  ...passthroughProps,
128
136
  elementRef: this.handleRef,
129
- css: styles === null || styles === void 0 ? void 0 : styles.tag,
137
+ css: styles?.tag,
130
138
  className: className,
131
139
  as: onClick ? 'button' : 'span',
132
140
  margin: margin,
133
- type: onClick ? 'button' : void 0,
141
+ type: onClick ? 'button' : undefined,
134
142
  ...(onClick && {
135
143
  onClick: this.handleClick
136
144
  }),
137
145
  disabled: disabled || readOnly,
138
- display: void 0,
139
- title: title || (typeof text === 'string' ? text : void 0),
146
+ display: undefined,
147
+ title: title || (typeof text === 'string' ? text : undefined),
140
148
  "data-cid": "Tag",
141
149
  onMouseEnter: this.handleIconMouseEnter,
142
150
  onMouseLeave: this.handleIconMouseLeave,
143
151
  children: [_jsx("span", {
144
- css: styles === null || styles === void 0 ? void 0 : styles.text,
152
+ css: styles?.text,
145
153
  children: text
146
154
  }), onClick && dismissible ? _jsx("span", {
147
- css: styles === null || styles === void 0 ? void 0 : styles.icon,
155
+ css: styles?.icon,
148
156
  children: _jsx(XInstUIIcon, {
149
157
  size: this.getIconSize(),
150
158
  color: getIconColor()
@@ -152,12 +160,6 @@ let Tag = (_dec = withStyle(generateStyle), _dec(_class = (_Tag = class Tag exte
152
160
  }) : null]
153
161
  });
154
162
  }
155
- }, _Tag.displayName = "Tag", _Tag.componentId = 'Tag', _Tag.allowedProps = allowedProps, _Tag.defaultProps = {
156
- size: 'medium',
157
- dismissible: false,
158
- variant: 'default',
159
- disabled: false,
160
- readOnly: false
161
- }, _Tag)) || _class);
163
+ }) || _class);
162
164
  export default Tag;
163
165
  export { Tag };
package/es/Tag/v2/styles.js CHANGED
@@ -35,11 +35,13 @@ import { calcFocusOutlineStyles } from '@instructure/emotion';
35
35
  * @return {Object} The final style object, which will be used in the component
36
36
  */
37
37
  const generateStyle = (componentTheme, props, sharedTokens) => {
38
- const variant = props.variant,
39
- size = props.size,
40
- dismissible = props.dismissible,
41
- onClick = props.onClick,
42
- disabled = props.disabled;
38
+ const {
39
+ variant,
40
+ size,
41
+ dismissible,
42
+ onClick,
43
+ disabled
44
+ } = props;
43
45
  const isButton = !!onClick;
44
46
  const sizeVariants = {
45
47
  small: {
package/lib/Tag/v1/index.js CHANGED
@@ -15,7 +15,7 @@ var _styles = _interopRequireDefault(require("./styles"));
15
15
  var _theme = _interopRequireDefault(require("./theme"));
16
16
  var _props = require("./props");
17
17
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
18
- var _dec, _class, _Tag;
18
+ var _dec, _class;
19
19
  /*
20
20
  * The MIT License (MIT)
21
21
  *
@@ -44,83 +44,84 @@ var _dec, _class, _Tag;
44
44
  category: components
45
45
  ---
46
46
  **/
47
- let Tag = exports.Tag = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = (_Tag = class Tag extends _react.Component {
48
- constructor(...args) {
49
- super(...args);
50
- this.ref = null;
51
- this.focus = () => {
52
- this.ref && this.ref.focus();
53
- };
54
- this.handleClick = e => {
55
- const _this$props = this.props,
56
- disabled = _this$props.disabled,
57
- readOnly = _this$props.readOnly,
58
- onClick = _this$props.onClick;
59
- if (disabled || readOnly) {
60
- e.preventDefault();
61
- e.stopPropagation();
62
- } else if (typeof onClick === 'function') {
63
- onClick(e);
64
- }
65
- };
66
- this.handleRef = element => {
67
- this.ref = element;
68
- if (typeof this.props.elementRef === 'function') {
69
- this.props.elementRef(element);
70
- }
71
- };
72
- }
47
+ let Tag = exports.Tag = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = class Tag extends _react.Component {
48
+ static displayName = "Tag";
49
+ static componentId = 'Tag';
50
+ static allowedProps = _props.allowedProps;
51
+ static defaultProps = {
52
+ size: 'medium',
53
+ dismissible: false,
54
+ variant: 'default',
55
+ disabled: false,
56
+ readOnly: false
57
+ };
58
+ ref = null;
73
59
  componentDidMount() {
74
- var _this$props$makeStyle, _this$props2;
75
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
60
+ this.props.makeStyles?.();
76
61
  }
77
62
  componentDidUpdate() {
78
- var _this$props$makeStyle2, _this$props3;
79
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
63
+ this.props.makeStyles?.();
80
64
  }
81
65
  get focused() {
82
66
  return (0, _isActiveElement.isActiveElement)(this.ref);
83
67
  }
68
+ focus = () => {
69
+ this.ref && this.ref.focus();
70
+ };
71
+ handleClick = e => {
72
+ const {
73
+ disabled,
74
+ readOnly,
75
+ onClick
76
+ } = this.props;
77
+ if (disabled || readOnly) {
78
+ e.preventDefault();
79
+ e.stopPropagation();
80
+ } else if (typeof onClick === 'function') {
81
+ onClick(e);
82
+ }
83
+ };
84
+ handleRef = element => {
85
+ this.ref = element;
86
+ if (typeof this.props.elementRef === 'function') {
87
+ this.props.elementRef(element);
88
+ }
89
+ };
84
90
  render() {
85
- const _this$props4 = this.props,
86
- className = _this$props4.className,
87
- dismissible = _this$props4.dismissible,
88
- disabled = _this$props4.disabled,
89
- readOnly = _this$props4.readOnly,
90
- text = _this$props4.text,
91
- title = _this$props4.title,
92
- onClick = _this$props4.onClick,
93
- margin = _this$props4.margin,
94
- styles = _this$props4.styles;
91
+ const {
92
+ className,
93
+ dismissible,
94
+ disabled,
95
+ readOnly,
96
+ text,
97
+ title,
98
+ onClick,
99
+ margin,
100
+ styles
101
+ } = this.props;
95
102
  const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, Tag.allowedProps), Tag);
96
103
  return (0, _jsxRuntime.jsxs)(_v11_.View, {
97
104
  ...passthroughProps,
98
105
  elementRef: this.handleRef,
99
- css: styles === null || styles === void 0 ? void 0 : styles.tag,
106
+ css: styles?.tag,
100
107
  className: className,
101
108
  as: onClick ? 'button' : 'span',
102
109
  margin: margin,
103
- type: onClick ? 'button' : void 0,
110
+ type: onClick ? 'button' : undefined,
104
111
  ...(onClick && {
105
112
  onClick: this.handleClick
106
113
  }),
107
114
  disabled: disabled || readOnly,
108
- display: void 0,
109
- title: title || (typeof text === 'string' ? text : void 0),
115
+ display: undefined,
116
+ title: title || (typeof text === 'string' ? text : undefined),
110
117
  "data-cid": "Tag",
111
118
  children: [(0, _jsxRuntime.jsx)("span", {
112
- css: styles === null || styles === void 0 ? void 0 : styles.text,
119
+ css: styles?.text,
113
120
  children: text
114
121
  }), onClick && dismissible ? (0, _jsxRuntime.jsx)(_IconXLine.IconXLine, {
115
- css: styles === null || styles === void 0 ? void 0 : styles.icon
122
+ css: styles?.icon
116
123
  }) : null]
117
124
  });
118
125
  }
119
- }, _Tag.displayName = "Tag", _Tag.componentId = 'Tag', _Tag.allowedProps = _props.allowedProps, _Tag.defaultProps = {
120
- size: 'medium',
121
- dismissible: false,
122
- variant: 'default',
123
- disabled: false,
124
- readOnly: false
125
- }, _Tag)) || _class);
126
+ }) || _class);
126
127
  var _default = exports.default = Tag;
package/lib/Tag/v1/styles.js CHANGED
@@ -39,11 +39,13 @@ exports.default = void 0;
39
39
  * @return {Object} The final style object, which will be used in the component
40
40
  */
41
41
  const generateStyle = (componentTheme, props) => {
42
- const variant = props.variant,
43
- size = props.size,
44
- dismissible = props.dismissible,
45
- onClick = props.onClick,
46
- disabled = props.disabled;
42
+ const {
43
+ variant,
44
+ size,
45
+ dismissible,
46
+ onClick,
47
+ disabled
48
+ } = props;
47
49
  const isButton = !!onClick;
48
50
  const sizeVariants = {
49
51
  small: {