@instructure/ui-rating 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 (17) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Rating/v1/index.js +36 -35
  3. package/es/Rating/v2/index.js +36 -35
  4. package/es/RatingIcon/v1/index.js +35 -32
  5. package/es/RatingIcon/v1/styles.js +6 -2
  6. package/es/RatingIcon/v1/theme.js +12 -11
  7. package/es/RatingIcon/v2/index.js +36 -34
  8. package/es/RatingIcon/v2/styles.js +3 -1
  9. package/lib/Rating/v1/index.js +36 -35
  10. package/lib/Rating/v2/index.js +36 -35
  11. package/lib/RatingIcon/v1/index.js +35 -32
  12. package/lib/RatingIcon/v1/styles.js +6 -2
  13. package/lib/RatingIcon/v1/theme.js +12 -11
  14. package/lib/RatingIcon/v2/index.js +36 -34
  15. package/lib/RatingIcon/v2/styles.js +3 -1
  16. package/package.json +14 -14
  17. 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-rating
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/Rating/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Rating;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -37,27 +37,34 @@ category: components
37
37
  ---
38
38
  **/
39
39
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
40
- let Rating = (_dec = withStyle(generateStyle, null), _dec(_class = (_Rating = class Rating extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- this.ref = el;
46
- };
47
- }
40
+ let Rating = (_dec = withStyle(generateStyle, null), _dec(_class = class Rating extends Component {
41
+ static displayName = "Rating";
42
+ static componentId = 'Rating';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ animateFill: false,
46
+ formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
47
+ iconCount: 3,
48
+ size: 'medium',
49
+ valueNow: 0
50
+ };
51
+ static Icon = RatingIcon;
52
+ ref = null;
53
+ handleRef = el => {
54
+ this.ref = el;
55
+ };
48
56
  componentDidMount() {
49
- var _this$props$makeStyle, _this$props;
50
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
57
+ this.props.makeStyles?.();
51
58
  }
52
59
  componentDidUpdate() {
53
- var _this$props$makeStyle2, _this$props2;
54
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
60
+ this.props.makeStyles?.();
55
61
  }
56
62
  get filled() {
57
- const _this$props3 = this.props,
58
- valueNow = _this$props3.valueNow,
59
- iconCount = _this$props3.iconCount,
60
- valueMax = _this$props3.valueMax;
63
+ const {
64
+ valueNow,
65
+ iconCount,
66
+ valueMax
67
+ } = this.props;
61
68
 
62
69
  // prevent divide by zero errors
63
70
  const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
@@ -74,19 +81,19 @@ let Rating = (_dec = withStyle(generateStyle, null), _dec(_class = (_Rating = cl
74
81
  return this.props.iconCount - this.filled;
75
82
  }
76
83
  render() {
77
- var _this$props$styles;
78
- const _this$props4 = this.props,
79
- iconCount = _this$props4.iconCount,
80
- animateFill = _this$props4.animateFill,
81
- size = _this$props4.size,
82
- margin = _this$props4.margin,
83
- label = _this$props4.label,
84
- formatValueText = _this$props4.formatValueText;
85
- const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
84
+ const {
85
+ iconCount,
86
+ animateFill,
87
+ size,
88
+ margin,
89
+ label,
90
+ formatValueText
91
+ } = this.props;
92
+ const valueText = label + ' ' + formatValueText?.(this.filled, iconCount);
86
93
  const passthroughProps = View.omitViewProps(omitProps(this.props, Rating.allowedProps), Rating);
87
94
  return _jsxs(View, {
88
95
  ...passthroughProps,
89
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
96
+ css: this.props.styles?.rating,
90
97
  margin: margin,
91
98
  display: "inline-block",
92
99
  elementRef: this.handleRef,
@@ -96,19 +103,13 @@ let Rating = (_dec = withStyle(generateStyle, null), _dec(_class = (_Rating = cl
96
103
  }), [...Array(this.filled)].map((_x, i) => _jsx(RatingIcon, {
97
104
  filled: true,
98
105
  animateFill: animateFill,
99
- animationDelay: animateFill ? (i + 1) * 200 : void 0,
106
+ animationDelay: animateFill ? (i + 1) * 200 : undefined,
100
107
  size: size
101
108
  }, i + 1)), [...Array(this.empty)].map((_x, i) => _jsx(RatingIcon, {
102
109
  size: size
103
110
  }, i + 1))]
104
111
  });
105
112
  }
106
- }, _Rating.displayName = "Rating", _Rating.componentId = 'Rating', _Rating.allowedProps = allowedProps, _Rating.defaultProps = {
107
- animateFill: false,
108
- formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
109
- iconCount: 3,
110
- size: 'medium',
111
- valueNow: 0
112
- }, _Rating.Icon = RatingIcon, _Rating)) || _class);
113
+ }) || _class);
113
114
  export default Rating;
114
115
  export { Rating };
package/es/Rating/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _Rating;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -37,27 +37,34 @@ category: components
37
37
  ---
38
38
  **/
39
39
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
40
- let Rating = (_dec = withStyle(generateStyle), _dec(_class = (_Rating = class Rating extends Component {
41
- constructor(...args) {
42
- super(...args);
43
- this.ref = null;
44
- this.handleRef = el => {
45
- this.ref = el;
46
- };
47
- }
40
+ let Rating = (_dec = withStyle(generateStyle), _dec(_class = class Rating extends Component {
41
+ static displayName = "Rating";
42
+ static componentId = 'Rating';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ animateFill: false,
46
+ formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
47
+ iconCount: 3,
48
+ size: 'medium',
49
+ valueNow: 0
50
+ };
51
+ static Icon = RatingIcon;
52
+ ref = null;
53
+ handleRef = el => {
54
+ this.ref = el;
55
+ };
48
56
  componentDidMount() {
49
- var _this$props$makeStyle, _this$props;
50
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
57
+ this.props.makeStyles?.();
51
58
  }
52
59
  componentDidUpdate() {
53
- var _this$props$makeStyle2, _this$props2;
54
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
60
+ this.props.makeStyles?.();
55
61
  }
56
62
  get filled() {
57
- const _this$props3 = this.props,
58
- valueNow = _this$props3.valueNow,
59
- iconCount = _this$props3.iconCount,
60
- valueMax = _this$props3.valueMax;
63
+ const {
64
+ valueNow,
65
+ iconCount,
66
+ valueMax
67
+ } = this.props;
61
68
 
62
69
  // prevent divide by zero errors
63
70
  const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
@@ -74,19 +81,19 @@ let Rating = (_dec = withStyle(generateStyle), _dec(_class = (_Rating = class Ra
74
81
  return this.props.iconCount - this.filled;
75
82
  }
76
83
  render() {
77
- var _this$props$styles;
78
- const _this$props4 = this.props,
79
- iconCount = _this$props4.iconCount,
80
- animateFill = _this$props4.animateFill,
81
- size = _this$props4.size,
82
- margin = _this$props4.margin,
83
- label = _this$props4.label,
84
- formatValueText = _this$props4.formatValueText;
85
- const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
84
+ const {
85
+ iconCount,
86
+ animateFill,
87
+ size,
88
+ margin,
89
+ label,
90
+ formatValueText
91
+ } = this.props;
92
+ const valueText = label + ' ' + formatValueText?.(this.filled, iconCount);
86
93
  const passthroughProps = View.omitViewProps(omitProps(this.props, Rating.allowedProps), Rating);
87
94
  return _jsxs(View, {
88
95
  ...passthroughProps,
89
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
96
+ css: this.props.styles?.rating,
90
97
  margin: margin,
91
98
  display: "inline-block",
92
99
  elementRef: this.handleRef,
@@ -96,19 +103,13 @@ let Rating = (_dec = withStyle(generateStyle), _dec(_class = (_Rating = class Ra
96
103
  }), [...Array(this.filled)].map((_x, i) => _jsx(RatingIcon, {
97
104
  filled: true,
98
105
  animateFill: animateFill,
99
- animationDelay: animateFill ? (i + 1) * 200 : void 0,
106
+ animationDelay: animateFill ? (i + 1) * 200 : undefined,
100
107
  size: size
101
108
  }, i + 1)), [...Array(this.empty)].map((_x, i) => _jsx(RatingIcon, {
102
109
  size: size
103
110
  }, i + 1))]
104
111
  });
105
112
  }
106
- }, _Rating.displayName = "Rating", _Rating.componentId = 'Rating', _Rating.allowedProps = allowedProps, _Rating.defaultProps = {
107
- animateFill: false,
108
- formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
109
- iconCount: 3,
110
- size: 'medium',
111
- valueNow: 0
112
- }, _Rating.Icon = RatingIcon, _Rating)) || _class);
113
+ }) || _class);
113
114
  export default Rating;
114
115
  export { Rating };
package/es/RatingIcon/v1/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _RatingIcon;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,53 +38,61 @@ id: Rating.Icon
38
38
  ---
39
39
  **/
40
40
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
41
- let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_RatingIcon = class RatingIcon extends Component {
41
+ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class RatingIcon extends Component {
42
+ static displayName = "RatingIcon";
43
+ static componentId = 'Rating.Icon';
44
+ static allowedProps = allowedProps;
45
+ static defaultProps = {
46
+ animationDelay: 200,
47
+ animateFill: false,
48
+ filled: false,
49
+ size: 'medium'
50
+ };
51
+ ref = null;
42
52
  constructor(props) {
43
53
  super(props);
44
- this.ref = null;
45
- this._timeouts = [];
46
- this._animation = void 0;
47
- this.makeStyleProps = () => {
48
- return {
49
- filled: this.state.filled
50
- };
51
- };
52
- this.fill = () => {
53
- this._animation = requestAnimationFrame(() => {
54
- this.setState({
55
- filled: true
56
- });
57
- });
58
- };
59
54
  this.state = {
60
55
  filled: props.filled && !props.animateFill
61
56
  };
62
57
  }
58
+ _timeouts = [];
59
+ _animation;
63
60
  componentDidMount() {
64
- var _this$props$makeStyle, _this$props;
65
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
61
+ this.props.makeStyles?.(this.makeStyleProps());
66
62
  if (this.props.animateFill) {
67
63
  this._timeouts.push(setTimeout(this.fill, this.props.animationDelay));
68
64
  }
69
65
  }
70
66
  componentDidUpdate(prevProps) {
71
- var _this$props$makeStyle2, _this$props2;
72
67
  if (this.props.animateFill && this.props.filled && this.props.filled !== prevProps.filled) {
73
68
  this.fill();
74
69
  }
75
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
70
+ this.props.makeStyles?.(this.makeStyleProps());
76
71
  }
77
72
  componentWillUnmount() {
78
73
  this._animation && this._animation.cancel();
79
74
  this._timeouts.forEach(timeout => clearTimeout(timeout));
80
75
  }
76
+ makeStyleProps = () => {
77
+ return {
78
+ filled: this.state.filled
79
+ };
80
+ };
81
+ fill = () => {
82
+ this._animation = requestAnimationFrame(() => {
83
+ this.setState({
84
+ filled: true
85
+ });
86
+ });
87
+ };
81
88
  render() {
82
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
83
- const animateFill = this.props.animateFill;
89
+ const {
90
+ animateFill
91
+ } = this.props;
84
92
  const Icon = this.state.filled ? IconStarSolid : IconStarLightSolid;
85
93
  return _jsx("span", {
86
94
  "aria-hidden": "true",
87
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon,
95
+ css: this.props.styles?.ratingIcon,
88
96
  ref: el => {
89
97
  this.ref = el;
90
98
  },
@@ -93,18 +101,13 @@ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
93
101
  transitionOnMount: true,
94
102
  type: "scale",
95
103
  children: _jsx(Icon, {
96
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
104
+ css: this.props.styles?.icon
97
105
  })
98
106
  }) : _jsx(Icon, {
99
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
107
+ css: this.props.styles?.icon
100
108
  })
101
109
  });
102
110
  }
103
- }, _RatingIcon.displayName = "RatingIcon", _RatingIcon.componentId = 'Rating.Icon', _RatingIcon.allowedProps = allowedProps, _RatingIcon.defaultProps = {
104
- animationDelay: 200,
105
- animateFill: false,
106
- filled: false,
107
- size: 'medium'
108
- }, _RatingIcon)) || _class);
111
+ }) || _class);
109
112
  export default RatingIcon;
110
113
  export { RatingIcon };
package/es/RatingIcon/v1/styles.js CHANGED
@@ -33,8 +33,12 @@
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 size = props.size;
37
- const filled = state.filled;
36
+ const {
37
+ size
38
+ } = props;
39
+ const {
40
+ filled
41
+ } = state;
38
42
  const sizeVariants = {
39
43
  small: {
40
44
  fontSize: componentTheme.smallIconFontSize
package/es/RatingIcon/v1/theme.js CHANGED
@@ -28,11 +28,12 @@
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;
32
- const colors = theme.colors,
33
- typography = theme.typography,
34
- spacing = theme.spacing,
35
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ typography,
34
+ spacing,
35
+ key: themeName
36
+ } = theme;
36
37
  const themeSpecificStyle = {
37
38
  canvas: {
38
39
  iconEmptyColor: theme['ic-brand-primary'],
@@ -40,12 +41,12 @@ const generateComponentTheme = theme => {
40
41
  }
41
42
  };
42
43
  const componentVariables = {
43
- iconMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
44
- iconEmptyColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
45
- iconFilledColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.blue4570,
46
- smallIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
47
- mediumIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
48
- largeIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge
44
+ iconMargin: spacing?.xxxSmall,
45
+ iconEmptyColor: colors?.contrasts?.blue4570,
46
+ iconFilledColor: colors?.contrasts?.blue4570,
47
+ smallIconFontSize: typography?.fontSizeMedium,
48
+ mediumIconFontSize: typography?.fontSizeLarge,
49
+ largeIconFontSize: typography?.fontSizeXXLarge
49
50
  };
50
51
  return {
51
52
  ...componentVariables,
package/es/RatingIcon/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _class, _RatingIcon;
1
+ var _dec, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -43,56 +43,63 @@ parent: Rating
43
43
  id: Rating.Icon
44
44
  ---
45
45
  **/
46
- let RatingIcon = (_dec = withStyle(generateStyle), _dec(_class = (_RatingIcon = class RatingIcon extends Component {
46
+ let RatingIcon = (_dec = withStyle(generateStyle), _dec(_class = class RatingIcon extends Component {
47
+ static displayName = "RatingIcon";
48
+ static componentId = 'Rating.Icon';
49
+ static allowedProps = allowedProps;
50
+ static defaultProps = {
51
+ animationDelay: 200,
52
+ animateFill: false,
53
+ filled: false,
54
+ size: 'medium'
55
+ };
56
+ ref = null;
47
57
  constructor(props) {
48
58
  super(props);
49
- this.ref = null;
50
- this._timeouts = [];
51
- this._animation = void 0;
52
- this.makeStyleProps = () => {
53
- return {
54
- filled: this.state.filled
55
- };
56
- };
57
- this.fill = () => {
58
- this._animation = requestAnimationFrame(() => {
59
- this.setState({
60
- filled: true
61
- });
62
- });
63
- };
64
59
  this.state = {
65
60
  filled: props.filled && !props.animateFill
66
61
  };
67
62
  }
63
+ _timeouts = [];
64
+ _animation;
68
65
  componentDidMount() {
69
- var _this$props$makeStyle, _this$props;
70
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
66
+ this.props.makeStyles?.(this.makeStyleProps());
71
67
  if (this.props.animateFill) {
72
68
  this._timeouts.push(setTimeout(this.fill, this.props.animationDelay));
73
69
  }
74
70
  }
75
71
  componentDidUpdate(prevProps) {
76
- var _this$props$makeStyle2, _this$props2;
77
72
  if (this.props.animateFill && this.props.filled && this.props.filled !== prevProps.filled) {
78
73
  this.fill();
79
74
  }
80
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
75
+ this.props.makeStyles?.(this.makeStyleProps());
81
76
  }
82
77
  componentWillUnmount() {
83
78
  this._animation && this._animation.cancel();
84
79
  this._timeouts.forEach(timeout => clearTimeout(timeout));
85
80
  }
81
+ makeStyleProps = () => {
82
+ return {
83
+ filled: this.state.filled
84
+ };
85
+ };
86
+ fill = () => {
87
+ this._animation = requestAnimationFrame(() => {
88
+ this.setState({
89
+ filled: true
90
+ });
91
+ });
92
+ };
86
93
  render() {
87
- var _this$props$styles, _this$props$styles2, _this$props$styles3;
88
- const _this$props3 = this.props,
89
- animateFill = _this$props3.animateFill,
90
- size = _this$props3.size;
94
+ const {
95
+ animateFill,
96
+ size
97
+ } = this.props;
91
98
  const Icon = this.state.filled ? StarSolidInstUIIcon : StarInstUIIcon;
92
99
  const iconSize = ratingIconSizeToIconSize[size];
93
100
  return _jsx("span", {
94
101
  "aria-hidden": "true",
95
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon,
102
+ css: this.props.styles?.ratingIcon,
96
103
  ref: el => {
97
104
  this.ref = el;
98
105
  },
@@ -101,24 +108,19 @@ let RatingIcon = (_dec = withStyle(generateStyle), _dec(_class = (_RatingIcon =
101
108
  transitionOnMount: true,
102
109
  type: "scale",
103
110
  children: _jsx("span", {
104
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon,
111
+ css: this.props.styles?.icon,
105
112
  children: _jsx(Icon, {
106
113
  size: iconSize
107
114
  })
108
115
  })
109
116
  }) : _jsx("span", {
110
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon,
117
+ css: this.props.styles?.icon,
111
118
  children: _jsx(Icon, {
112
119
  size: iconSize
113
120
  })
114
121
  })
115
122
  });
116
123
  }
117
- }, _RatingIcon.displayName = "RatingIcon", _RatingIcon.componentId = 'Rating.Icon', _RatingIcon.allowedProps = allowedProps, _RatingIcon.defaultProps = {
118
- animationDelay: 200,
119
- animateFill: false,
120
- filled: false,
121
- size: 'medium'
122
- }, _RatingIcon)) || _class);
124
+ }) || _class);
123
125
  export default RatingIcon;
124
126
  export { RatingIcon };
package/es/RatingIcon/v2/styles.js CHANGED
@@ -33,7 +33,9 @@
33
33
  * @return {Object} The final style object, which will be used in the component
34
34
  */
35
35
  const generateStyle = (componentTheme, _props, state, _sharedTokens) => {
36
- const filled = state.filled;
36
+ const {
37
+ filled
38
+ } = state;
37
39
  return {
38
40
  ratingIcon: {
39
41
  label: 'ratingIcon',
package/lib/Rating/v1/index.js CHANGED
@@ -14,7 +14,7 @@ var _emotion = require("@instructure/emotion");
14
14
  var _styles = _interopRequireDefault(require("./styles"));
15
15
  var _props = require("./props");
16
16
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
- var _dec, _class, _Rating;
17
+ var _dec, _class;
18
18
  /*
19
19
  * The MIT License (MIT)
20
20
  *
@@ -43,27 +43,34 @@ var _dec, _class, _Rating;
43
43
  category: components
44
44
  ---
45
45
  **/
46
- let Rating = exports.Rating = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = (_Rating = class Rating extends _react.Component {
47
- constructor(...args) {
48
- super(...args);
49
- this.ref = null;
50
- this.handleRef = el => {
51
- this.ref = el;
52
- };
53
- }
46
+ let Rating = exports.Rating = (_dec = (0, _emotion.withStyleLegacy)(_styles.default, null), _dec(_class = class Rating extends _react.Component {
47
+ static displayName = "Rating";
48
+ static componentId = 'Rating';
49
+ static allowedProps = _props.allowedProps;
50
+ static defaultProps = {
51
+ animateFill: false,
52
+ formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
53
+ iconCount: 3,
54
+ size: 'medium',
55
+ valueNow: 0
56
+ };
57
+ static Icon = _v.RatingIcon;
58
+ ref = null;
59
+ handleRef = el => {
60
+ this.ref = el;
61
+ };
54
62
  componentDidMount() {
55
- var _this$props$makeStyle, _this$props;
56
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
+ this.props.makeStyles?.();
57
64
  }
58
65
  componentDidUpdate() {
59
- var _this$props$makeStyle2, _this$props2;
60
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
66
+ this.props.makeStyles?.();
61
67
  }
62
68
  get filled() {
63
- const _this$props3 = this.props,
64
- valueNow = _this$props3.valueNow,
65
- iconCount = _this$props3.iconCount,
66
- valueMax = _this$props3.valueMax;
69
+ const {
70
+ valueNow,
71
+ iconCount,
72
+ valueMax
73
+ } = this.props;
67
74
 
68
75
  // prevent divide by zero errors
69
76
  const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
@@ -80,19 +87,19 @@ let Rating = exports.Rating = (_dec = (0, _emotion.withStyleLegacy)(_styles.defa
80
87
  return this.props.iconCount - this.filled;
81
88
  }
82
89
  render() {
83
- var _this$props$styles;
84
- const _this$props4 = this.props,
85
- iconCount = _this$props4.iconCount,
86
- animateFill = _this$props4.animateFill,
87
- size = _this$props4.size,
88
- margin = _this$props4.margin,
89
- label = _this$props4.label,
90
- formatValueText = _this$props4.formatValueText;
91
- const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
90
+ const {
91
+ iconCount,
92
+ animateFill,
93
+ size,
94
+ margin,
95
+ label,
96
+ formatValueText
97
+ } = this.props;
98
+ const valueText = label + ' ' + formatValueText?.(this.filled, iconCount);
92
99
  const passthroughProps = _v11_.View.omitViewProps((0, _omitProps.omitProps)(this.props, Rating.allowedProps), Rating);
93
100
  return (0, _jsxRuntime.jsxs)(_v11_.View, {
94
101
  ...passthroughProps,
95
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
102
+ css: this.props.styles?.rating,
96
103
  margin: margin,
97
104
  display: "inline-block",
98
105
  elementRef: this.handleRef,
@@ -102,18 +109,12 @@ let Rating = exports.Rating = (_dec = (0, _emotion.withStyleLegacy)(_styles.defa
102
109
  }), [...Array(this.filled)].map((_x, i) => (0, _jsxRuntime.jsx)(_v.RatingIcon, {
103
110
  filled: true,
104
111
  animateFill: animateFill,
105
- animationDelay: animateFill ? (i + 1) * 200 : void 0,
112
+ animationDelay: animateFill ? (i + 1) * 200 : undefined,
106
113
  size: size
107
114
  }, i + 1)), [...Array(this.empty)].map((_x, i) => (0, _jsxRuntime.jsx)(_v.RatingIcon, {
108
115
  size: size
109
116
  }, i + 1))]
110
117
  });
111
118
  }
112
- }, _Rating.displayName = "Rating", _Rating.componentId = 'Rating', _Rating.allowedProps = _props.allowedProps, _Rating.defaultProps = {
113
- animateFill: false,
114
- formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,
115
- iconCount: 3,
116
- size: 'medium',
117
- valueNow: 0
118
- }, _Rating.Icon = _v.RatingIcon, _Rating)) || _class);
119
+ }) || _class);
119
120
  var _default = exports.default = Rating;