@instructure/ui-rating 8.33.1 → 8.33.2

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.33.2](https://github.com/instructure/instructure-ui/compare/v8.33.1...v8.33.2) (2023-01-25)
+
+**Note:** Version bump only for package @instructure/ui-rating
+
 ## [8.33.1](https://github.com/instructure/instructure-ui/compare/v8.33.0...v8.33.1) (2023-01-06)
 
 **Note:** Version bump only for package @instructure/ui-rating

package/es/Rating/RatingLocator.js

@@ -21,7 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import { locator } from '@instructure/ui-test-locator';
-import { Rating } from './index'; // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+import { Rating } from './index';
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 export const RatingLocator = locator(Rating.selector);

package/es/Rating/__examples__/Rating.examples.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 export default {
   sectionProp: 'size',
   propValues: {

package/es/Rating/index.js

@@ -1,5 +1,4 @@
 var _dec, _dec2, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -34,65 +33,58 @@ import { RatingIcon } from '../RatingIcon';
 import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 category: components
 ---
 @tsProps
 **/
-
 let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_class2 = class Rating extends Component {
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   get filled() {
     const _this$props3 = this.props,
-          valueNow = _this$props3.valueNow,
-          iconCount = _this$props3.iconCount,
-          valueMax = _this$props3.valueMax; // prevent divide by zero errors
+      valueNow = _this$props3.valueNow,
+      iconCount = _this$props3.iconCount,
+      valueMax = _this$props3.valueMax;
 
+    // prevent divide by zero errors
     const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
-    const filledIcons = Math.round(valueNow * iconCount / max); // Handle edge case where valueNow is greater than valueMax
+    const filledIcons = Math.round(valueNow * iconCount / max);
 
+    // Handle edge case where valueNow is greater than valueMax
     if (filledIcons > iconCount) {
       return iconCount;
     } else {
       return filledIcons;
     }
   }
-
   get empty() {
     return this.props.iconCount - this.filled;
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props4 = this.props,
-          iconCount = _this$props4.iconCount,
-          animateFill = _this$props4.animateFill,
-          size = _this$props4.size,
-          margin = _this$props4.margin,
-          label = _this$props4.label,
-          formatValueText = _this$props4.formatValueText;
+      iconCount = _this$props4.iconCount,
+      animateFill = _this$props4.animateFill,
+      size = _this$props4.size,
+      margin = _this$props4.margin,
+      label = _this$props4.label,
+      formatValueText = _this$props4.formatValueText;
     const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
     const passthroughProps = View.omitViewProps(omitProps(this.props, Rating.allowedProps), Rating);
     return jsx(View, Object.assign({}, passthroughProps, {
@@ -111,7 +103,6 @@ let Rating = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_c
       size: size
     })));
   }
-
 }, _class2.displayName = "Rating", _class2.componentId = 'Rating', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   animateFill: false,
   formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,

package/es/Rating/styles.js

@@ -40,5 +40,4 @@ const generateStyle = () => {
     }
   };
 };
-
 export default generateStyle;

package/es/RatingIcon/index.js

@@ -1,5 +1,4 @@
 var _dec, _class, _class2;
-
 /*
  * The MIT License (MIT)
  *
@@ -33,6 +32,7 @@ import { withStyle, jsx } from '@instructure/emotion';
 import generateStyle from './styles';
 import generateComponentTheme from './theme';
 import { allowedProps, propTypes } from './props';
+
 /**
 ---
 parent: Rating
@@ -40,20 +40,17 @@ id: Rating.Icon
 ---
 @tsProps
 **/
-
 let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_class2 = class RatingIcon extends Component {
   constructor(props) {
     super(props);
     this.ref = null;
     this._timeouts = [];
     this._animation = void 0;
-
     this.makeStyleProps = () => {
       return {
         filled: this.state.filled
       };
     };
-
     this.fill = () => {
       this._animation = requestAnimationFrame(() => {
         this.setState({
@@ -61,41 +58,30 @@ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
         });
       });
     };
-
     this.state = {
       filled: props.filled && !props.animateFill
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
-
     if (this.props.animateFill) {
       this._timeouts.push(setTimeout(this.fill, this.props.animationDelay));
     }
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     if (this.props.animateFill && this.props.filled && this.props.filled !== prevProps.filled) {
       this.fill();
     }
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
-
   componentWillUnmount() {
     this._animation && this._animation.cancel();
-
     this._timeouts.forEach(timeout => clearTimeout(timeout));
   }
-
   render() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const animateFill = this.props.animateFill;
     const Icon = this.state.filled ? IconStarSolid : IconStarLightSolid;
     return jsx("span", {
@@ -113,7 +99,6 @@ let RatingIcon = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
     })));
   }
-
 }, _class2.displayName = "RatingIcon", _class2.componentId = 'Rating.Icon', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
   animationDelay: 200,
   animateFill: false,

package/es/RatingIcon/styles.js

@@ -69,5 +69,4 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 export default generateStyle;

package/es/RatingIcon/theme.js

@@ -29,9 +29,9 @@
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        themeName = theme.key;
+    typography = theme.typography,
+    spacing = theme.spacing,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       iconEmptyColor: theme['ic-brand-primary'],
@@ -46,9 +46,9 @@ const generateComponentTheme = theme => {
     mediumIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
     largeIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 export default generateComponentTheme;

package/lib/Rating/RatingLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RatingLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const RatingLocator = (0, _locator.locator)(_index.Rating.selector);
 exports.RatingLocator = RatingLocator;

package/lib/Rating/__examples__/Rating.examples.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *

package/lib/Rating/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Rating = void 0;
-
 var _react = require("react");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _ScreenReaderContent = require("@instructure/ui-a11y-content/lib/ScreenReaderContent");
-
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _RatingIcon = require("../RatingIcon");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -37,58 +25,49 @@ let Rating = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0,
   constructor() {
     super(...arguments);
     this.ref = null;
-
     this.handleRef = el => {
       this.ref = el;
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props2;
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   get filled() {
     const _this$props3 = this.props,
-          valueNow = _this$props3.valueNow,
-          iconCount = _this$props3.iconCount,
-          valueMax = _this$props3.valueMax; // prevent divide by zero errors
+      valueNow = _this$props3.valueNow,
+      iconCount = _this$props3.iconCount,
+      valueMax = _this$props3.valueMax;
 
+    // prevent divide by zero errors
     const max = !!valueMax && valueMax > 0 ? valueMax : iconCount;
-    const filledIcons = Math.round(valueNow * iconCount / max); // Handle edge case where valueNow is greater than valueMax
+    const filledIcons = Math.round(valueNow * iconCount / max);
 
+    // Handle edge case where valueNow is greater than valueMax
     if (filledIcons > iconCount) {
       return iconCount;
     } else {
       return filledIcons;
     }
   }
-
   get empty() {
     return this.props.iconCount - this.filled;
   }
-
   render() {
     var _this$props$styles;
-
     const _this$props4 = this.props,
-          iconCount = _this$props4.iconCount,
-          animateFill = _this$props4.animateFill,
-          size = _this$props4.size,
-          margin = _this$props4.margin,
-          label = _this$props4.label,
-          formatValueText = _this$props4.formatValueText;
+      iconCount = _this$props4.iconCount,
+      animateFill = _this$props4.animateFill,
+      size = _this$props4.size,
+      margin = _this$props4.margin,
+      label = _this$props4.label,
+      formatValueText = _this$props4.formatValueText;
     const valueText = label + ' ' + (formatValueText === null || formatValueText === void 0 ? void 0 : formatValueText(this.filled, iconCount));
-
     const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Rating.allowedProps), Rating);
-
     return (0, _emotion.jsx)(_View.View, Object.assign({}, passthroughProps, {
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.rating,
       margin: margin,
@@ -105,7 +84,6 @@ let Rating = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0,
       size: size
     })));
   }
-
 }, _class2.displayName = "Rating", _class2.componentId = 'Rating', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   animateFill: false,
   formatValueText: (filled, iconCount) => `${filled} / ${iconCount}`,

package/lib/Rating/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "RatingLocator", {
   }
 });
 exports.default = void 0;
-
 var _RatingLocator = require("./RatingLocator");
-
 /*
  * The MIT License (MIT)
  *

package/lib/Rating/props.js

@@ -1,16 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -34,6 +30,7 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   label: _propTypes.default.string.isRequired,
   formatValueText: _propTypes.default.func,

package/lib/Rating/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -47,6 +46,5 @@ const generateStyle = () => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/RatingIcon/index.js

@@ -1,32 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RatingIcon = void 0;
-
 var _react = require("react");
-
 var _IconStarSolid = require("@instructure/ui-icons/lib/IconStarSolid.js");
-
 var _IconStarLightSolid = require("@instructure/ui-icons/lib/IconStarLightSolid.js");
-
 var _requestAnimationFrame = require("@instructure/ui-dom-utils/lib/requestAnimationFrame.js");
-
 var _Transition = require("@instructure/ui-motion/lib/Transition");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Rating
@@ -40,13 +28,11 @@ let RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
     this.ref = null;
     this._timeouts = [];
     this._animation = void 0;
-
     this.makeStyleProps = () => {
       return {
         filled: this.state.filled
       };
     };
-
     this.fill = () => {
       this._animation = (0, _requestAnimationFrame.requestAnimationFrame)(() => {
         this.setState({
@@ -54,41 +40,30 @@ let RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
         });
       });
     };
-
     this.state = {
       filled: props.filled && !props.animateFill
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
-
     if (this.props.animateFill) {
       this._timeouts.push(setTimeout(this.fill, this.props.animationDelay));
     }
   }
-
   componentDidUpdate(prevProps) {
     var _this$props$makeStyle2, _this$props2;
-
     if (this.props.animateFill && this.props.filled && this.props.filled !== prevProps.filled) {
       this.fill();
     }
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
   }
-
   componentWillUnmount() {
     this._animation && this._animation.cancel();
-
     this._timeouts.forEach(timeout => clearTimeout(timeout));
   }
-
   render() {
     var _this$props$styles, _this$props$styles2, _this$props$styles3;
-
     const animateFill = this.props.animateFill;
     const Icon = this.state.filled ? _IconStarSolid.IconStarSolid : _IconStarLightSolid.IconStarLightSolid;
     return (0, _emotion.jsx)("span", {
@@ -106,7 +81,6 @@ let RatingIcon = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.icon
     })));
   }
-
 }, _class2.displayName = "RatingIcon", _class2.componentId = 'Rating.Icon', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   animationDelay: 200,
   animateFill: false,

package/lib/RatingIcon/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   animationDelay: _propTypes.default.number,
   animateFill: _propTypes.default.bool,

package/lib/RatingIcon/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -76,6 +75,5 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/RatingIcon/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,9 +35,9 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        spacing = theme.spacing,
-        themeName = theme.key;
+    typography = theme.typography,
+    spacing = theme.spacing,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       iconEmptyColor: theme['ic-brand-primary'],
@@ -53,10 +52,10 @@ const generateComponentTheme = theme => {
     mediumIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
     largeIconFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeXXLarge
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Rating", {
     return _Rating.Rating;
   }
 });
-
 var _Rating = require("./Rating");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-rating",
-  "version": "8.33.1",
+  "version": "8.33.2",
   "description": "A static rating component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,23 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.33.1",
-    "@instructure/emotion": "8.33.1",
-    "@instructure/shared-types": "8.33.1",
-    "@instructure/ui-a11y-content": "8.33.1",
-    "@instructure/ui-dom-utils": "8.33.1",
-    "@instructure/ui-icons": "8.33.1",
-    "@instructure/ui-motion": "8.33.1",
-    "@instructure/ui-react-utils": "8.33.1",
-    "@instructure/ui-testable": "8.33.1",
-    "@instructure/ui-view": "8.33.1",
+    "@instructure/console": "8.33.2",
+    "@instructure/emotion": "8.33.2",
+    "@instructure/shared-types": "8.33.2",
+    "@instructure/ui-a11y-content": "8.33.2",
+    "@instructure/ui-dom-utils": "8.33.2",
+    "@instructure/ui-icons": "8.33.2",
+    "@instructure/ui-motion": "8.33.2",
+    "@instructure/ui-react-utils": "8.33.2",
+    "@instructure/ui-testable": "8.33.2",
+    "@instructure/ui-view": "8.33.2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.33.1",
-    "@instructure/ui-test-locator": "8.33.1",
-    "@instructure/ui-test-utils": "8.33.1",
-    "@instructure/ui-themes": "8.33.1"
+    "@instructure/ui-babel-preset": "8.33.2",
+    "@instructure/ui-test-locator": "8.33.2",
+    "@instructure/ui-test-utils": "8.33.2",
+    "@instructure/ui-themes": "8.33.2"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"