@instructure/ui-rating 10.16.1-snapshot-0 → 10.16.1-snapshot-1

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 (21) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/Rating/__new-tests__/Rating.test.js +15 -13
  3. package/es/Rating/index.js +16 -14
  4. package/es/RatingIcon/__new-tests__/RatingIcon.test.js +23 -20
  5. package/es/RatingIcon/index.js +15 -13
  6. package/lib/Rating/__new-tests__/Rating.test.js +16 -15
  7. package/lib/Rating/index.js +15 -13
  8. package/lib/RatingIcon/__new-tests__/RatingIcon.test.js +27 -25
  9. package/lib/RatingIcon/index.js +14 -12
  10. package/package.json +14 -14
  11. package/src/Rating/__new-tests__/Rating.test.tsx +0 -1
  12. package/src/Rating/index.tsx +1 -2
  13. package/src/RatingIcon/__new-tests__/RatingIcon.test.tsx +0 -1
  14. package/src/RatingIcon/index.tsx +1 -2
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/Rating/__new-tests__/Rating.test.d.ts.map +1 -1
  17. package/types/Rating/index.d.ts +1 -3
  18. package/types/Rating/index.d.ts.map +1 -1
  19. package/types/RatingIcon/__new-tests__/RatingIcon.test.d.ts.map +1 -1
  20. package/types/RatingIcon/index.d.ts +1 -3
  21. package/types/RatingIcon/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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
- ## [10.16.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-0) (2025-04-15)
6
+ ## [10.16.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.16.0...v10.16.1-snapshot-1) (2025-04-22)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-rating
9
9
 
package/es/Rating/__new-tests__/Rating.test.js CHANGED
@@ -23,16 +23,16 @@ var _Rating, _Rating2, _Rating3, _Rating4, _Rating5;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import '@testing-library/jest-dom';
30
29
  import { runAxeCheck } from '@instructure/ui-axe-check';
31
30
  import { View } from '@instructure/ui-view';
32
31
  import { Rating } from '../index';
32
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
33
33
  describe('<Rating />', () => {
34
34
  it('should render the correct number of icons', () => {
35
- const _render = render(_Rating || (_Rating = /*#__PURE__*/React.createElement(Rating, {
35
+ const _render = render(_Rating || (_Rating = _jsx(Rating, {
36
36
  label: "Course rating",
37
37
  iconCount: 5
38
38
  }))),
@@ -41,7 +41,7 @@ describe('<Rating />', () => {
41
41
  expect(icons).toHaveLength(5);
42
42
  });
43
43
  it('should handle a valueMax of zero', () => {
44
- const _render2 = render(_Rating2 || (_Rating2 = /*#__PURE__*/React.createElement(Rating, {
44
+ const _render2 = render(_Rating2 || (_Rating2 = _jsx(Rating, {
45
45
  label: "Course rating",
46
46
  valueMax: 0
47
47
  }))),
@@ -50,7 +50,7 @@ describe('<Rating />', () => {
50
50
  expect(icons).toHaveLength(3);
51
51
  });
52
52
  it('should fill the correct number of icons', () => {
53
- const _render3 = render(_Rating3 || (_Rating3 = /*#__PURE__*/React.createElement(Rating, {
53
+ const _render3 = render(_Rating3 || (_Rating3 = _jsx(Rating, {
54
54
  label: "Course rating",
55
55
  iconCount: 5,
56
56
  valueNow: 89,
@@ -61,7 +61,7 @@ describe('<Rating />', () => {
61
61
  expect(filledIcons).toHaveLength(4);
62
62
  });
63
63
  it('never renders more than `iconCount` icons', () => {
64
- const _render4 = render(_Rating4 || (_Rating4 = /*#__PURE__*/React.createElement(Rating, {
64
+ const _render4 = render(_Rating4 || (_Rating4 = _jsx(Rating, {
65
65
  label: "Course rating",
66
66
  iconCount: 5,
67
67
  valueNow: 110,
@@ -72,7 +72,7 @@ describe('<Rating />', () => {
72
72
  expect(icons).toHaveLength(5);
73
73
  });
74
74
  it('should render screen reader text to give context', () => {
75
- const _render5 = render(/*#__PURE__*/React.createElement(Rating, {
75
+ const _render5 = render(_jsx(Rating, {
76
76
  label: "Course rating",
77
77
  iconCount: 5,
78
78
  valueNow: 89,
@@ -83,7 +83,7 @@ describe('<Rating />', () => {
83
83
  expect(container).toHaveTextContent('Course rating 4 out of 5');
84
84
  });
85
85
  it('should meet a11y standards', async () => {
86
- const _render6 = render(_Rating5 || (_Rating5 = /*#__PURE__*/React.createElement(Rating, {
86
+ const _render6 = render(_Rating5 || (_Rating5 = _jsx(Rating, {
87
87
  label: "Course rating",
88
88
  iconCount: 5
89
89
  }))),
@@ -103,10 +103,11 @@ describe('<Rating />', () => {
103
103
  const props = {
104
104
  [prop]: 'foo'
105
105
  };
106
- render(/*#__PURE__*/React.createElement(Rating, Object.assign({
106
+ render(_jsx(Rating, {
107
107
  label: "Course rating",
108
- iconCount: 5
109
- }, props)));
108
+ iconCount: 5,
109
+ ...props
110
+ }));
110
111
  expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
111
112
  consoleErrorSpy.mockRestore();
112
113
  });
@@ -116,10 +117,11 @@ describe('<Rating />', () => {
116
117
  [prop]: allowedProps[prop]
117
118
  };
118
119
  const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
119
- render(/*#__PURE__*/React.createElement(Rating, Object.assign({
120
+ render(_jsx(Rating, {
120
121
  label: "Course rating",
121
- iconCount: 5
122
- }, props)));
122
+ iconCount: 5,
123
+ ...props
124
+ }));
123
125
  expect(consoleErrorSpy).not.toHaveBeenCalled();
124
126
  consoleErrorSpy.mockRestore();
125
127
  });
package/es/Rating/index.js CHANGED
@@ -23,14 +23,13 @@ var _dec, _dec2, _class, _Rating;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
26
  import { Component } from 'react';
28
27
  import { View } from '@instructure/ui-view';
29
28
  import { ScreenReaderContent } from '@instructure/ui-a11y-content';
30
29
  import { omitProps } from '@instructure/ui-react-utils';
31
30
  import { testable } from '@instructure/ui-testable';
32
31
  import { RatingIcon } from '../RatingIcon';
33
- import { withStyle, jsx } from '@instructure/emotion';
32
+ import { withStyle } from '@instructure/emotion';
34
33
  import generateStyle from './styles';
35
34
  import { allowedProps, propTypes } from './props';
36
35
 
@@ -39,6 +38,7 @@ import { allowedProps, propTypes } from './props';
39
38
  category: components
40
39
  ---
41
40
  **/
41
+ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
42
42
  let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_Rating = class Rating extends Component {
43
43
  constructor(...args) {
44
44
  super(...args);
@@ -86,21 +86,23 @@ let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_c
86
86
  formatValueText = _this$props4.formatValueText;
87
87
  const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
88
88
  const passthroughProps = View.omitViewProps(omitProps(this.props, Rating.allowedProps), Rating);
89
- return jsx(View, Object.assign({}, passthroughProps, {
89
+ return _jsxs(View, {
90
+ ...passthroughProps,
90
91
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
91
92
  margin: margin,
92
93
  display: "inline-block",
93
- elementRef: this.handleRef
94
- }), jsx(ScreenReaderContent, null, valueText), [...Array(this.filled)].map((_x, i) => jsx(RatingIcon, {
95
- key: i + 1,
96
- filled: true,
97
- animateFill: animateFill,
98
- animationDelay: animateFill ? (i + 1) * 200 : void 0,
99
- size: size
100
- })), [...Array(this.empty)].map((_x, i) => jsx(RatingIcon, {
101
- key: i + 1,
102
- size: size
103
- })));
94
+ elementRef: this.handleRef,
95
+ children: [_jsx(ScreenReaderContent, {
96
+ children: valueText
97
+ }), [...Array(this.filled)].map((_x, i) => _jsx(RatingIcon, {
98
+ filled: true,
99
+ animateFill: animateFill,
100
+ animationDelay: animateFill ? (i + 1) * 200 : void 0,
101
+ size: size
102
+ }, i + 1)), [...Array(this.empty)].map((_x, i) => _jsx(RatingIcon, {
103
+ size: size
104
+ }, i + 1))]
105
+ });
104
106
  }
105
107
  }, _Rating.displayName = "Rating", _Rating.componentId = 'Rating', _Rating.allowedProps = allowedProps, _Rating.propTypes = propTypes, _Rating.defaultProps = {
106
108
  animateFill: false,
package/es/RatingIcon/__new-tests__/RatingIcon.test.js CHANGED
@@ -23,13 +23,13 @@ var _RatingIcon, _RatingIcon2, _RatingIcon3, _RatingIcon4;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- import React from 'react';
27
26
  import { render, waitFor } from '@testing-library/react';
28
27
  import { vi } from 'vitest';
29
28
  import '@testing-library/jest-dom';
30
29
  import { InstUISettingsProvider } from '@instructure/emotion';
31
30
  import { runAxeCheck } from '@instructure/ui-axe-check';
32
31
  import { RatingIcon } from '../index';
32
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
33
33
  describe('<RatingIcon />', () => {
34
34
  let consoleWarningMock;
35
35
  let consoleErrorMock;
@@ -43,18 +43,19 @@ describe('<RatingIcon />', () => {
43
43
  consoleErrorMock.mockRestore();
44
44
  });
45
45
  it('transitions when filled on render and animateFill is true', async () => {
46
- const _render = render(/*#__PURE__*/React.createElement(InstUISettingsProvider, {
46
+ const _render = render(_jsx(InstUISettingsProvider, {
47
47
  theme: {
48
48
  componentOverrides: {
49
49
  Transition: {
50
50
  duration: '100ms'
51
51
  }
52
52
  }
53
- }
54
- }, _RatingIcon || (_RatingIcon = /*#__PURE__*/React.createElement(RatingIcon, {
55
- filled: true,
56
- animateFill: true
57
- })))),
53
+ },
54
+ children: _RatingIcon || (_RatingIcon = _jsx(RatingIcon, {
55
+ filled: true,
56
+ animateFill: true
57
+ }))
58
+ })),
58
59
  container = _render.container;
59
60
  await waitFor(() => {
60
61
  const icon = container.querySelector('svg');
@@ -66,18 +67,19 @@ describe('<RatingIcon />', () => {
66
67
  });
67
68
  });
68
69
  it('transitions when filled after render and animateFill is true', async () => {
69
- const _render2 = render(/*#__PURE__*/React.createElement(InstUISettingsProvider, {
70
+ const _render2 = render(_jsx(InstUISettingsProvider, {
70
71
  theme: {
71
72
  componentOverrides: {
72
73
  Transition: {
73
74
  duration: '100ms'
74
75
  }
75
76
  }
76
- }
77
- }, _RatingIcon2 || (_RatingIcon2 = /*#__PURE__*/React.createElement(RatingIcon, {
78
- filled: false,
79
- animateFill: true
80
- })))),
77
+ },
78
+ children: _RatingIcon2 || (_RatingIcon2 = _jsx(RatingIcon, {
79
+ filled: false,
80
+ animateFill: true
81
+ }))
82
+ })),
81
83
  container = _render2.container,
82
84
  rerender = _render2.rerender;
83
85
  await waitFor(() => {
@@ -88,18 +90,19 @@ describe('<RatingIcon />', () => {
88
90
  }, {
89
91
  timeout: 500
90
92
  });
91
- rerender(/*#__PURE__*/React.createElement(InstUISettingsProvider, {
93
+ rerender(_jsx(InstUISettingsProvider, {
92
94
  theme: {
93
95
  componentOverrides: {
94
96
  Transition: {
95
97
  duration: '100ms'
96
98
  }
97
99
  }
98
- }
99
- }, _RatingIcon3 || (_RatingIcon3 = /*#__PURE__*/React.createElement(RatingIcon, {
100
- filled: true,
101
- animateFill: true
102
- }))));
100
+ },
101
+ children: _RatingIcon3 || (_RatingIcon3 = _jsx(RatingIcon, {
102
+ filled: true,
103
+ animateFill: true
104
+ }))
105
+ }));
103
106
  await waitFor(() => {
104
107
  const icon = container.querySelector('svg');
105
108
  expect(icon).toBeInTheDocument();
@@ -110,7 +113,7 @@ describe('<RatingIcon />', () => {
110
113
  });
111
114
  });
112
115
  it('should meet a11y standards', async () => {
113
- const _render3 = render(_RatingIcon4 || (_RatingIcon4 = /*#__PURE__*/React.createElement(RatingIcon, {
116
+ const _render3 = render(_RatingIcon4 || (_RatingIcon4 = _jsx(RatingIcon, {
114
117
  filled: true,
115
118
  animateFill: true
116
119
  }))),
package/es/RatingIcon/index.js CHANGED
@@ -23,12 +23,11 @@ var _dec, _class, _RatingIcon;
23
23
  * SOFTWARE.
24
24
  */
25
25
 
26
- /** @jsx jsx */
27
26
  import { Component } from 'react';
28
27
  import { IconStarSolid, IconStarLightSolid } from '@instructure/ui-icons';
29
28
  import { requestAnimationFrame } from '@instructure/ui-dom-utils';
30
29
  import { Transition } from '@instructure/ui-motion';
31
- import { withStyle, jsx } from '@instructure/emotion';
30
+ import { withStyle } from '@instructure/emotion';
32
31
  import generateStyle from './styles';
33
32
  import generateComponentTheme from './theme';
34
33
  import { allowedProps, propTypes } from './props';
@@ -39,6 +38,7 @@ parent: Rating
39
38
  id: Rating.Icon
40
39
  ---
41
40
  **/
41
+ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
42
42
  let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_RatingIcon = class RatingIcon extends Component {
43
43
  constructor(props) {
44
44
  super(props);
@@ -83,21 +83,23 @@ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
83
83
  var _this$props$styles, _this$props$styles2, _this$props$styles3;
84
84
  const animateFill = this.props.animateFill;
85
85
  const Icon = this.state.filled ? IconStarSolid : IconStarLightSolid;
86
- return jsx("span", {
86
+ return _jsx("span", {
87
87
  "aria-hidden": "true",
88
88
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon,
89
89
  ref: el => {
90
90
  this.ref = el;
91
- }
92
- }, this.state.filled && animateFill ? jsx(Transition, {
93
- in: true,
94
- transitionOnMount: true,
95
- type: "scale"
96
- }, jsx(Icon, {
97
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
98
- })) : jsx(Icon, {
99
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
100
- }));
91
+ },
92
+ children: this.state.filled && animateFill ? _jsx(Transition, {
93
+ in: true,
94
+ transitionOnMount: true,
95
+ type: "scale",
96
+ children: _jsx(Icon, {
97
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
98
+ })
99
+ }) : _jsx(Icon, {
100
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
101
+ })
102
+ });
101
103
  }
102
104
  }, _RatingIcon.displayName = "RatingIcon", _RatingIcon.componentId = 'Rating.Icon', _RatingIcon.allowedProps = allowedProps, _RatingIcon.propTypes = propTypes, _RatingIcon.defaultProps = {
103
105
  animationDelay: 200,
package/lib/Rating/__new-tests__/Rating.test.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  require("@testing-library/jest-dom");
8
6
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
9
7
  var _View = require("@instructure/ui-view/lib/View");
10
8
  var _index = require("../index");
9
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
10
  var _Rating, _Rating2, _Rating3, _Rating4, _Rating5;
12
11
  /*
13
12
  * The MIT License (MIT)
@@ -34,7 +33,7 @@ var _Rating, _Rating2, _Rating3, _Rating4, _Rating5;
34
33
  */
35
34
  describe('<Rating />', () => {
36
35
  it('should render the correct number of icons', () => {
37
- const _render = (0, _react2.render)(_Rating || (_Rating = /*#__PURE__*/_react.default.createElement(_index.Rating, {
36
+ const _render = (0, _react.render)(_Rating || (_Rating = (0, _jsxRuntime.jsx)(_index.Rating, {
38
37
  label: "Course rating",
39
38
  iconCount: 5
40
39
  }))),
@@ -43,7 +42,7 @@ describe('<Rating />', () => {
43
42
  expect(icons).toHaveLength(5);
44
43
  });
45
44
  it('should handle a valueMax of zero', () => {
46
- const _render2 = (0, _react2.render)(_Rating2 || (_Rating2 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
45
+ const _render2 = (0, _react.render)(_Rating2 || (_Rating2 = (0, _jsxRuntime.jsx)(_index.Rating, {
47
46
  label: "Course rating",
48
47
  valueMax: 0
49
48
  }))),
@@ -52,7 +51,7 @@ describe('<Rating />', () => {
52
51
  expect(icons).toHaveLength(3);
53
52
  });
54
53
  it('should fill the correct number of icons', () => {
55
- const _render3 = (0, _react2.render)(_Rating3 || (_Rating3 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
54
+ const _render3 = (0, _react.render)(_Rating3 || (_Rating3 = (0, _jsxRuntime.jsx)(_index.Rating, {
56
55
  label: "Course rating",
57
56
  iconCount: 5,
58
57
  valueNow: 89,
@@ -63,7 +62,7 @@ describe('<Rating />', () => {
63
62
  expect(filledIcons).toHaveLength(4);
64
63
  });
65
64
  it('never renders more than `iconCount` icons', () => {
66
- const _render4 = (0, _react2.render)(_Rating4 || (_Rating4 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
65
+ const _render4 = (0, _react.render)(_Rating4 || (_Rating4 = (0, _jsxRuntime.jsx)(_index.Rating, {
67
66
  label: "Course rating",
68
67
  iconCount: 5,
69
68
  valueNow: 110,
@@ -74,7 +73,7 @@ describe('<Rating />', () => {
74
73
  expect(icons).toHaveLength(5);
75
74
  });
76
75
  it('should render screen reader text to give context', () => {
77
- const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Rating, {
76
+ const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.Rating, {
78
77
  label: "Course rating",
79
78
  iconCount: 5,
80
79
  valueNow: 89,
@@ -85,7 +84,7 @@ describe('<Rating />', () => {
85
84
  expect(container).toHaveTextContent('Course rating 4 out of 5');
86
85
  });
87
86
  it('should meet a11y standards', async () => {
88
- const _render6 = (0, _react2.render)(_Rating5 || (_Rating5 = /*#__PURE__*/_react.default.createElement(_index.Rating, {
87
+ const _render6 = (0, _react.render)(_Rating5 || (_Rating5 = (0, _jsxRuntime.jsx)(_index.Rating, {
89
88
  label: "Course rating",
90
89
  iconCount: 5
91
90
  }))),
@@ -105,10 +104,11 @@ describe('<Rating />', () => {
105
104
  const props = {
106
105
  [prop]: 'foo'
107
106
  };
108
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Rating, Object.assign({
107
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Rating, {
109
108
  label: "Course rating",
110
- iconCount: 5
111
- }, props)));
109
+ iconCount: 5,
110
+ ...props
111
+ }));
112
112
  expect(consoleErrorSpy).toHaveBeenCalledWith(expect.stringContaining(expectedErrorMessage), expect.any(String));
113
113
  consoleErrorSpy.mockRestore();
114
114
  });
@@ -118,10 +118,11 @@ describe('<Rating />', () => {
118
118
  [prop]: allowedProps[prop]
119
119
  };
120
120
  const consoleErrorSpy = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
121
- (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Rating, Object.assign({
121
+ (0, _react.render)((0, _jsxRuntime.jsx)(_index.Rating, {
122
122
  label: "Course rating",
123
- iconCount: 5
124
- }, props)));
123
+ iconCount: 5,
124
+ ...props
125
+ }));
125
126
  expect(consoleErrorSpy).not.toHaveBeenCalled();
126
127
  consoleErrorSpy.mockRestore();
127
128
  });
package/lib/Rating/index.js CHANGED
@@ -14,6 +14,7 @@ var _RatingIcon = require("../RatingIcon");
14
14
  var _emotion = require("@instructure/emotion");
15
15
  var _styles = _interopRequireDefault(require("./styles"));
16
16
  var _props = require("./props");
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
18
  var _dec, _dec2, _class, _Rating;
18
19
  /*
19
20
  * The MIT License (MIT)
@@ -38,7 +39,6 @@ var _dec, _dec2, _class, _Rating;
38
39
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
39
40
  * SOFTWARE.
40
41
  */
41
- /** @jsx jsx */
42
42
  /**
43
43
  ---
44
44
  category: components
@@ -91,21 +91,23 @@ let Rating = exports.Rating = (_dec = (0, _emotion.withStyle)(_styles.default, n
91
91
  formatValueText = _this$props4.formatValueText;
92
92
  const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
93
93
  const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Rating.allowedProps), Rating);
94
- return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
94
+ return (0, _jsxRuntime.jsxs)(_View.View, {
95
+ ...passthroughProps,
95
96
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
96
97
  margin: margin,
97
98
  display: "inline-block",
98
- elementRef: this.handleRef
99
- }), (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, valueText), [...Array(this.filled)].map((_x, i) => (0, _emotion.jsx)(_RatingIcon.RatingIcon, {
100
- key: i + 1,
101
- filled: true,
102
- animateFill: animateFill,
103
- animationDelay: animateFill ? (i + 1) * 200 : void 0,
104
- size: size
105
- })), [...Array(this.empty)].map((_x, i) => (0, _emotion.jsx)(_RatingIcon.RatingIcon, {
106
- key: i + 1,
107
- size: size
108
- })));
99
+ elementRef: this.handleRef,
100
+ children: [(0, _jsxRuntime.jsx)(_ScreenReaderContent.ScreenReaderContent, {
101
+ children: valueText
102
+ }), [...Array(this.filled)].map((_x, i) => (0, _jsxRuntime.jsx)(_RatingIcon.RatingIcon, {
103
+ filled: true,
104
+ animateFill: animateFill,
105
+ animationDelay: animateFill ? (i + 1) * 200 : void 0,
106
+ size: size
107
+ }, i + 1)), [...Array(this.empty)].map((_x, i) => (0, _jsxRuntime.jsx)(_RatingIcon.RatingIcon, {
108
+ size: size
109
+ }, i + 1))]
110
+ });
109
111
  }
110
112
  }, _Rating.displayName = "Rating", _Rating.componentId = 'Rating', _Rating.allowedProps = _props.allowedProps, _Rating.propTypes = _props.propTypes, _Rating.defaultProps = {
111
113
  animateFill: false,
package/lib/RatingIcon/__new-tests__/RatingIcon.test.js CHANGED
@@ -1,13 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
- var _react = _interopRequireDefault(require("react"));
5
- var _react2 = require("@testing-library/react");
3
+ var _react = require("@testing-library/react");
6
4
  var _vitest = require("vitest");
7
5
  require("@testing-library/jest-dom");
8
6
  var _emotion = require("@instructure/emotion");
9
7
  var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
10
8
  var _index = require("../index");
9
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
11
10
  var _RatingIcon, _RatingIcon2, _RatingIcon3, _RatingIcon4;
12
11
  /*
13
12
  * The MIT License (MIT)
@@ -45,20 +44,21 @@ describe('<RatingIcon />', () => {
45
44
  consoleErrorMock.mockRestore();
46
45
  });
47
46
  it('transitions when filled on render and animateFill is true', async () => {
48
- const _render = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
47
+ const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_emotion.InstUISettingsProvider, {
49
48
  theme: {
50
49
  componentOverrides: {
51
50
  Transition: {
52
51
  duration: '100ms'
53
52
  }
54
53
  }
55
- }
56
- }, _RatingIcon || (_RatingIcon = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
57
- filled: true,
58
- animateFill: true
59
- })))),
54
+ },
55
+ children: _RatingIcon || (_RatingIcon = (0, _jsxRuntime.jsx)(_index.RatingIcon, {
56
+ filled: true,
57
+ animateFill: true
58
+ }))
59
+ })),
60
60
  container = _render.container;
61
- await (0, _react2.waitFor)(() => {
61
+ await (0, _react.waitFor)(() => {
62
62
  const icon = container.querySelector('svg');
63
63
  expect(icon).toBeInTheDocument();
64
64
  expect(icon.getAttribute('name')).toBe('IconStar');
@@ -68,21 +68,22 @@ describe('<RatingIcon />', () => {
68
68
  });
69
69
  });
70
70
  it('transitions when filled after render and animateFill is true', async () => {
71
- const _render2 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
71
+ const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_emotion.InstUISettingsProvider, {
72
72
  theme: {
73
73
  componentOverrides: {
74
74
  Transition: {
75
75
  duration: '100ms'
76
76
  }
77
77
  }
78
- }
79
- }, _RatingIcon2 || (_RatingIcon2 = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
80
- filled: false,
81
- animateFill: true
82
- })))),
78
+ },
79
+ children: _RatingIcon2 || (_RatingIcon2 = (0, _jsxRuntime.jsx)(_index.RatingIcon, {
80
+ filled: false,
81
+ animateFill: true
82
+ }))
83
+ })),
83
84
  container = _render2.container,
84
85
  rerender = _render2.rerender;
85
- await (0, _react2.waitFor)(() => {
86
+ await (0, _react.waitFor)(() => {
86
87
  const icon = container.querySelector('svg');
87
88
  expect(icon).toBeInTheDocument();
88
89
  expect(icon.getAttribute('name')).toBe('IconStarLight');
@@ -90,19 +91,20 @@ describe('<RatingIcon />', () => {
90
91
  }, {
91
92
  timeout: 500
92
93
  });
93
- rerender(/*#__PURE__*/_react.default.createElement(_emotion.InstUISettingsProvider, {
94
+ rerender((0, _jsxRuntime.jsx)(_emotion.InstUISettingsProvider, {
94
95
  theme: {
95
96
  componentOverrides: {
96
97
  Transition: {
97
98
  duration: '100ms'
98
99
  }
99
100
  }
100
- }
101
- }, _RatingIcon3 || (_RatingIcon3 = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
102
- filled: true,
103
- animateFill: true
104
- }))));
105
- await (0, _react2.waitFor)(() => {
101
+ },
102
+ children: _RatingIcon3 || (_RatingIcon3 = (0, _jsxRuntime.jsx)(_index.RatingIcon, {
103
+ filled: true,
104
+ animateFill: true
105
+ }))
106
+ }));
107
+ await (0, _react.waitFor)(() => {
106
108
  const icon = container.querySelector('svg');
107
109
  expect(icon).toBeInTheDocument();
108
110
  expect(icon.getAttribute('name')).toBe('IconStar');
@@ -112,7 +114,7 @@ describe('<RatingIcon />', () => {
112
114
  });
113
115
  });
114
116
  it('should meet a11y standards', async () => {
115
- const _render3 = (0, _react2.render)(_RatingIcon4 || (_RatingIcon4 = /*#__PURE__*/_react.default.createElement(_index.RatingIcon, {
117
+ const _render3 = (0, _react.render)(_RatingIcon4 || (_RatingIcon4 = (0, _jsxRuntime.jsx)(_index.RatingIcon, {
116
118
  filled: true,
117
119
  animateFill: true
118
120
  }))),
package/lib/RatingIcon/index.js CHANGED
@@ -14,6 +14,7 @@ var _emotion = require("@instructure/emotion");
14
14
  var _styles = _interopRequireDefault(require("./styles"));
15
15
  var _theme = _interopRequireDefault(require("./theme"));
16
16
  var _props = require("./props");
17
+ var _jsxRuntime = require("@emotion/react/jsx-runtime");
17
18
  var _dec, _class, _RatingIcon;
18
19
  /*
19
20
  * The MIT License (MIT)
@@ -38,7 +39,6 @@ var _dec, _class, _RatingIcon;
38
39
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
39
40
  * SOFTWARE.
40
41
  */
41
- /** @jsx jsx */
42
42
  /**
43
43
  ---
44
44
  parent: Rating
@@ -89,21 +89,23 @@ let RatingIcon = exports.RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.de
89
89
  var _this$props$styles, _this$props$styles2, _this$props$styles3;
90
90
  const animateFill = this.props.animateFill;
91
91
  const Icon = this.state.filled ? _IconStarSolid.IconStarSolid : _IconStarLightSolid.IconStarLightSolid;
92
- return (0, _emotion.jsx)("span", {
92
+ return (0, _jsxRuntime.jsx)("span", {
93
93
  "aria-hidden": "true",
94
94
  css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.ratingIcon,
95
95
  ref: el => {
96
96
  this.ref = el;
97
- }
98
- }, this.state.filled && animateFill ? (0, _emotion.jsx)(_Transition.Transition, {
99
- in: true,
100
- transitionOnMount: true,
101
- type: "scale"
102
- }, (0, _emotion.jsx)(Icon, {
103
- css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
104
- })) : (0, _emotion.jsx)(Icon, {
105
- css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
106
- }));
97
+ },
98
+ children: this.state.filled && animateFill ? (0, _jsxRuntime.jsx)(_Transition.Transition, {
99
+ in: true,
100
+ transitionOnMount: true,
101
+ type: "scale",
102
+ children: (0, _jsxRuntime.jsx)(Icon, {
103
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.icon
104
+ })
105
+ }) : (0, _jsxRuntime.jsx)(Icon, {
106
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
107
+ })
108
+ });
107
109
  }
108
110
  }, _RatingIcon.displayName = "RatingIcon", _RatingIcon.componentId = 'Rating.Icon', _RatingIcon.allowedProps = _props.allowedProps, _RatingIcon.propTypes = _props.propTypes, _RatingIcon.defaultProps = {
109
111
  animationDelay: 200,